/* RESET & GLOBAL */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; color: #333; line-height: 1.6; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.text-center { text-align: center; }
.flex-row { display: flex; align-items: center; gap: 40px; }
.flex-row-reverse { display: flex; flex-direction: row-reverse; align-items: center; gap: 40px; }

/* Navbar */
.navbar { position: fixed; top: 0; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.9); color: white; z-index: 1000; }
.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a { color: white; text-decoration: none; font-weight: 600; }

/* --- SECTION 1: HERO --- */
.section-1-hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.hero-content h1 { font-family: 'Playfair Display', serif; font-size: 4rem; margin-bottom: 20px; }
.script-font { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 300; font-size: 3rem; }
.btn-text { color: #c49b63; text-decoration: none; font-weight: bold; border-bottom: 1px solid #c49b63; }

/* --- SECTION 2: QUALITY --- */
.section-2-quality { padding: 80px 0; background: #fff; }
.col-img img { width: 100%; border-radius: 10px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.col-text h2 { font-family: 'Playfair Display', serif; font-size: 2rem; margin-bottom: 20px; }
.btn-black { background: #000; color: #fff; padding: 12px 25px; text-decoration: none; display: inline-block; margin-top: 20px; }

/* --- SECTION 3: FEATURES --- */
.section-3-features { padding: 80px 0; background: #fafafa; }
.sub-heading { color: #777; margin-bottom: 40px; }
.feature-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
.feature-card { background: white; padding: 30px; width: 300px; border: 1px solid #eee; text-align: center; border-radius: 8px; }
.feature-card .icon { font-size: 3rem; margin-bottom: 20px; color: #c49b63; }

/* --- SECTION 4: VIDEO ROASTING --- */
.section-4-video { position: relative; height: 80vh; color: white; display: flex; align-items: center; overflow: hidden; }
.bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: -1; }
.content-video { position: relative; z-index: 1; }
.text-video h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 30px; }
.roast-info h3 { color: #c49b63; margin-bottom: 5px; }

/* --- SECTION 5: ROTATING PRODUCT --- */
.section-5-showcase { padding: 100px 0; background-color: #efece6; overflow: hidden; }
.col-text-beige h2 { font-family: 'Playfair Display', serif; font-size: 3.5rem; line-height: 1; margin: 20px 0; }
.col-img-rotate { display: flex; justify-content: center; perspective: 1000px; }
.col-img-rotate img { width: 300px; transition: transform 0.1s linear; filter: drop-shadow(10px 20px 20px rgba(0,0,0,0.3)); }

/* --- SECTION 6: GRIND SIZE --- */
.section-6-grind { padding: 80px 0; background: #f4f4f4; }
.grind-grid { display: flex; justify-content: center; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.grind-item { width: 250px; text-align: center; }
.circle-img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 5px solid #fff; }

/* --- SECTION 7: PRODUCTS (DARK) --- */
.section-7-products { padding: 80px 0; background: #1a1a1a; color: white; }
.white-text { color: white; }
.product-grid-dark { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; }
.prod-card { background: #222; padding: 20px; text-align: center; border: 1px solid #333; transition: 0.3s; }
.prod-card:hover { border-color: #c49b63; }
.prod-card img { height: 200px; margin-bottom: 15px; }
.prod-card h3 { font-size: 1rem; margin-bottom: 5px; }
.prod-card p { font-size: 0.8rem; color: #aaa; }

/* --- SECTION 8: BUSINESS --- */
.section-8-business { 
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1598532163257-52d37311e3b2?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center; /* Center content */
}
.business-content { text-align: center; color: white; max-width: 600px; padding: 20px; }
.business-content h2 { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 15px; }
.btn-outline-white { border: 2px solid white; color: white; padding: 10px 30px; text-decoration: none; display: inline-block; margin-top: 20px; transition: 0.3s; }
.btn-outline-white:hover { background: white; color: black; }

/* FOOTER */
footer { background: #111; color: #555; text-align: center; padding: 20px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .flex-row, .flex-row-reverse { flex-direction: column; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    .col-img-rotate img { width: 200px; }
}