/* ==========================================
   RESET
   ========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#1d2939;
    line-height:1.6;
    overflow-x:hidden;
}

/* ==========================================
   VARIABLES
   ========================================== */

:root{

    --primary:#3f9b57;
    --primary-dark:#2f7f46;

    --text:#1d2939;
    --text-light:#667085;

    --white:#ffffff;

    --bg-light:#f8fafc;

    --border:#e5e7eb;

    --radius:18px;

    --shadow:
    0 10px 30px rgba(0,0,0,0.08);

}

/* ==========================================
   GLOBAL
   ========================================== */

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}

section{
    padding:70px 0;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ==========================================
   BUTTONS
   ========================================== */

.primary-btn,
.header-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    border:none;

    border-radius:999px;

    transition:.3s ease;

    cursor:pointer;
}

.primary-btn{

    min-height:58px;

    padding:0 28px;

    font-size:16px;

    width:100%;
}

.header-btn{

    min-height:50px;

    padding:0 22px;

    font-size:15px;
}

.primary-btn:hover,
.header-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);
}

.large-btn{

    min-height:64px;

    font-size:18px;
}

/* ==========================================
   HEADER
   ========================================== */

.header{

    position:relative;

    background:#ffffff;

    border-bottom:1px solid var(--border);
}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:40px;
}

.logo img{

    height:150px;

    width:auto;

    display:block;

}
.nav-menu{

    display:none;
}

/* ==========================================
   HERO
   ========================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding-top:50px;

    padding-bottom:60px;
}

.hero-content{

    display:flex;

    flex-direction:column;

    gap:35px;
}

.hero-text{

    text-align:center;
}

.hero-badge{

    display:inline-block;

    background:#ecfdf3;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    padding:10px 16px;

    border-radius:999px;

    margin-bottom:18px;
}

.hero h1{

    font-size:34px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:18px;

    color:var(--text);
}

.hero-description{

    font-size:17px;

    color:var(--text-light);

    margin-bottom:25px;
}

.hero-buttons{

    margin-bottom:22px;
}

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;
}

.product-image{

    width:100%;

    max-width:340px;

    margin:auto;
}

/* ==========================================
   TRUST BADGES
   ========================================== */

.trust-badges{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:25px;
}

.badge-item{

    background:#f8fafc;

    border:1px solid var(--border);

    padding:14px 16px;

    border-radius:14px;

    font-size:15px;

    font-weight:600;
}

.hero-disclaimer{

    margin-top:20px;

    font-size:12px;

    color:#98a2b3;
}

/* ==========================================
   SECTION HEADER
   ========================================== */

.section-header{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:45px;
}

.section-header h2{

    font-size:30px;

    line-height:1.2;

    margin-top:15px;

    margin-bottom:15px;
}

.section-header p{

    color:var(--text-light);

    font-size:16px;
}

.section-badge{

    display:inline-block;

    background:#ecfdf3;

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    padding:10px 16px;

    border-radius:999px;
}

/* ==========================================
   MOBILE STICKY CTA
   ========================================== */

.mobile-sticky-cta{

    position:fixed;

    left:0;

    right:0;

    bottom:0;

    z-index:9999;

    background:#ffffff;

    padding:12px;

    box-shadow:
    0 -5px 25px rgba(0,0,0,.12);

    border-top:1px solid var(--border);
}

.mobile-sticky-cta a{

    width:100%;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    border-radius:999px;

    font-weight:700;

    font-size:16px;
}

/* ==========================================
   SPACING FOR STICKY CTA
   ========================================== */

body{

    padding-bottom:90px;
}
/* ==========================================
   BENEFITS SECTION
   ========================================== */

.benefits-section{

    background:var(--bg-light);
}

.benefits-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;
}

.benefit-card{

    background:#ffffff;

    border-radius:var(--radius);

    padding:30px 25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s ease;
}

.benefit-card:hover{

    transform:translateY(-5px);
}

.benefit-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    background:#ecfdf3;

    border-radius:50%;
}

.benefit-card h3{

    font-size:22px;

    margin-bottom:12px;

    color:var(--text);
}

.benefit-card p{

    color:var(--text-light);

    font-size:15px;
}

/* ==========================================
   INGREDIENTS SECTION
   ========================================== */

.ingredients-section{

    background:#ffffff;
}

.ingredients-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;
}

.ingredient-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:30px 25px;

    text-align:center;

    transition:.3s ease;
}

.ingredient-card:hover{

    border-color:var(--primary);

    transform:translateY(-4px);
}

.ingredient-icon{

    width:70px;

    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:#ecfdf3;

    border-radius:50%;
}

.ingredient-card h3{

    font-size:22px;

    margin-bottom:12px;
}

.ingredient-card p{

    color:var(--text-light);

    font-size:15px;
}

/* ==========================================
   HOW IT WORKS
   ========================================== */

.how-it-works{

    background:var(--bg-light);
}

.steps-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;
}

.step-card{

    background:#ffffff;

    padding:35px 25px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow);

    position:relative;
}

.step-number{

    width:65px;

    height:65px;

    margin:0 auto 20px;

    background:var(--primary);

    color:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;
}

.step-card h3{

    font-size:22px;

    margin-bottom:15px;
}

.step-card p{

    color:var(--text-light);

    font-size:15px;
}

/* ==========================================
   MID CTA SECTION
   ========================================== */

.mid-cta{

    padding-top:40px;

    padding-bottom:40px;

    background:#ffffff;
}

.mid-cta-box{

    background:linear-gradient(
        135deg,
        #3f9b57,
        #2f7f46
    );

    color:#ffffff;

    border-radius:30px;

    padding:40px 25px;

    text-align:center;
}

.mid-cta-box h2{

    font-size:30px;

    margin-bottom:15px;

    line-height:1.2;
}

.mid-cta-box p{

    margin-bottom:25px;

    font-size:16px;

    opacity:.95;
}

.mid-cta-box .primary-btn{

    background:#ffffff;

    color:var(--primary);
}

.mid-cta-box .primary-btn:hover{

    background:#f3f4f6;
}

/* ==========================================
   CARD CONSISTENCY
   ========================================== */

.benefit-card,
.ingredient-card,
.step-card{

    min-height:100%;
}

/* ==========================================
   TABLET RESPONSIVE
   ========================================== */

@media(min-width:768px){

    .benefits-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

    .ingredients-grid{

        grid-template-columns:
        repeat(2,1fr);
    }

    .steps-grid{

        grid-template-columns:
        repeat(3,1fr);
    }

    .mid-cta-box{

        padding:60px;
    }
}

/* ==========================================
   DESKTOP RESPONSIVE
   ========================================== */

@media(min-width:1024px){

    .benefits-grid{

        grid-template-columns:
        repeat(4,1fr);
    }

    .ingredients-grid{

        grid-template-columns:
        repeat(4,1fr);
    }

    .benefit-card,
    .ingredient-card{

        text-align:center;
    }
}

/* ==========================================
   FAQ SECTION
   ========================================== */

.faq-section{

    background:#ffffff;
}

.faq-container{

    max-width:850px;

    margin:0 auto;
}

.faq-item{

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    margin-bottom:16px;

    background:#ffffff;
}

.faq-question{

    width:100%;

    border:none;

    background:#ffffff;

    padding:22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    color:var(--text);
}

.faq-question:hover{

    background:#f8fafc;
}

.faq-icon{

    font-size:22px;

    color:var(--primary);

    transition:.3s ease;
}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .3s ease;
}

.faq-answer p{

    padding:0 22px 22px;

    color:var(--text-light);

    font-size:15px;
}

.faq-item.active .faq-answer{

    max-height:250px;
}

.faq-item.active .faq-icon{

    transform:rotate(45deg);
}

/* ==========================================
   FINAL CTA SECTION
   ========================================== */

.final-cta-section{

    background:
    linear-gradient(
        135deg,
        #f8fafc,
        #ecfdf3
    );
}

.final-cta-content{

    max-width:850px;

    margin:0 auto;

    text-align:center;
}

.final-cta-content h2{

    font-size:34px;

    line-height:1.2;

    margin-top:15px;

    margin-bottom:18px;
}

.final-cta-content p{

    color:var(--text-light);

    font-size:17px;

    margin-bottom:30px;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer{

    background:#0f172a;

    color:#ffffff;

    padding-top:60px;

    padding-bottom:120px;
}

.footer-top{

    display:flex;

    flex-direction:column;

    gap:40px;
}

.footer-logo img{

    height:250px;

    width:auto;

    margin-bottom:18px;
}

.footer-logo p{

    color:#cbd5e1;

    max-width:450px;
}

.footer-links h4{

    margin-bottom:15px;

    font-size:18px;
}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.footer-links a{

    color:#cbd5e1;

    transition:.3s ease;
}

.footer-links a:hover{

    color:#ffffff;
}

.footer-bottom{

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    text-align:center;

    color:#94a3b8;

    font-size:14px;
}

/* ==========================================
   DESKTOP NAVIGATION
   ========================================== */

@media(min-width:992px){

    .nav-menu{

        display:block;
    }

    .nav-menu ul{

        display:flex;

        gap:35px;
    }

    .nav-menu a{

        color:var(--text);

        font-weight:600;

        transition:.3s ease;
    }

    .nav-menu a:hover{

        color:var(--primary);
    }
}

/* ==========================================
   DESKTOP HERO
   ========================================== */

@media(min-width:992px){

    body{

        padding-bottom:0;
    }

    .mobile-sticky-cta{

        display:none;
    }

    .hero{

        padding-top:80px;

        padding-bottom:90px;
    }

    .hero-content{

        flex-direction:row;

        align-items:center;

        justify-content:space-between;

        gap:60px;
    }

    .hero-text{

        flex:1;

        text-align:left;
    }

    .hero-image{

        flex:1;
    }

    .hero h1{

        font-size:56px;
    }

    .hero-description{

        max-width:650px;
    }

    .trust-badges{

        display:grid;

        grid-template-columns:
        repeat(3,1fr);

        gap:15px;
    }

    .badge-item{

        text-align:center;
    }

    .product-image{

        max-width:500px;
    }

    .primary-btn{

        width:auto;

        min-width:260px;
    }

    .footer-top{

        flex-direction:row;

        justify-content:space-between;
    }
}

/* ==========================================
   LARGE DESKTOP
   ========================================== */

@media(min-width:1200px){

    .hero h1{

        font-size:64px;
    }

    .section-header h2{

        font-size:42px;
    }

    .final-cta-content h2{

        font-size:48px;
    }
}

/* ==========================================
   IMAGE PLACEHOLDERS
   ========================================== */

.product-image{

    filter:
    drop-shadow(
        0 20px 40px rgba(0,0,0,.15)
    );
}

.logo img{

    object-fit:contain;
}

/* ==========================================
   SCROLLBAR
   ========================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#f1f5f9;
}

::-webkit-scrollbar-thumb{

    background:#3f9b57;

    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{

    background:#2f7f46;
}