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

:root {

    --green-dark: #17233F;

    --green-main: #6D3FA0;

    --green-light: #EEE7F5;

    --cream: #F5F1F8;

    --cream-light: #FBFAFD;

    --gold: #6D3FA0;

    --gold-light: #B99BD1;

    --text-dark: #20283A;

    --text-muted: #687080;

    --white: #FFFFFF;

    --border: #E4E0EA;

}





/* =========================================
   YU SLEEP BRAND ACCENT
   Navy + Purple + Small Sage-Green Detail
========================================= */

:root {
    --sage-accent: #5F8A55;
    --sage-soft: #EEF4EB;
}

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

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--cream-light);

    color: var(--text-dark);

    line-height: 1.6;

}


img {

    max-width: 100%;

}


a {

    color: inherit;

    text-decoration: none;

}



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

.container {

    width: min(1180px,
            calc(100% - 40px));

    margin: 0 auto;

}


section {

    scroll-margin-top: 90px;

}


.section-label {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.section-heading {

    max-width: 780px;

    margin:
        0 auto 60px;

    text-align: center;

}


.section-heading h2 {

    margin-bottom: 18px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px,
            4vw,
            54px);

    line-height: 1.15;

}


.section-heading p {

    color: var(--text-muted);

    font-size: 17px;

    line-height: 1.75;

}



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

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding:
        15px 25px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 700;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.btn:hover {

    transform:
        translateY(-3px);

}


.btn-primary {

    background:
        var(--green-dark);

    color:
        var(--white);

    box-shadow:
        0 10px 25px rgba(23,
            35,
            63,
            .18);

}


.btn-primary:hover {

    background:
        var(--green-main);

}


.btn-secondary {

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

    color:
        var(--green-dark);

}


.btn-secondary:hover {

    background:
        var(--green-dark);

    color:
        var(--white);

}



/* =========================================
   PROMO BAR
========================================= */

.promo-bar {

    padding:
        10px 0;

    background:
        var(--green-dark);

    color:
        var(--cream);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .5px;

}


.promo-bar-content {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    text-align: center;

}


.promo-bar-content>span:first-child {

    color:
        var(--gold-light);

    font-weight: 800;

}


.promo-dot {

    color:
        var(--gold);

}



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

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(251,
            250,
            247,
            .96);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid rgba(23,
            35,
            63,
            .08);

}


.header-container {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.site-logo {

    display: flex;

    flex-direction: column;

    line-height: 1;

}


.logo-main {

    color:
        var(--green-dark);

    font-size: 20px;

    font-weight: 800;

    letter-spacing: 2px;

}


.logo-sub {

    margin-top: 5px;

    color:
        var(--gold);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 28px;

}


.desktop-nav a {

    color:
        var(--text-dark);

    font-size: 14px;

    font-weight: 600;

    transition:
        color .2s ease;

}


.desktop-nav a:hover {

    color:
        var(--green-main);

}


.header-cta {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        12px 18px;

    background:
        var(--green-dark);

    color:
        var(--white);

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;

}


.header-cta:hover {

    background:
        var(--green-main);

    transform:
        translateY(-2px);

}



/* MOBILE MENU */

.mobile-menu-btn {

    display: none;

    width: 42px;

    height: 42px;

    border: none;

    background: transparent;

    cursor: pointer;

}


.mobile-menu-btn span {

    display: block;

    width: 24px;

    height: 2px;

    margin: 5px auto;

    background:
        var(--green-dark);

    transition:
        transform .25s ease,
        opacity .25s ease;

}


.mobile-nav {

    display: none;

}



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

.hero-section {

    padding:
        100px 0;

    background:
        linear-gradient(135deg,
            var(--cream-light) 0%,
            var(--green-light) 100%);

}


.hero-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 70px;

}


.hero-content h1 {

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(45px,
            5vw,
            72px);

    line-height: 1.08;

}


.hero-content h1 span {

    color:
        var(--green-main);

}


.hero-description {

    max-width: 600px;

    margin-bottom: 30px;

    color:
        var(--text-muted);

    font-size: 18px;

    line-height: 1.8;

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}


.hero-note {

    margin-top: 20px;

    color:
        var(--text-muted);

    font-size: 13px;

}


.hero-image-wrap {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.hero-image-circle {

    width: 500px;
    height: 500px;

    position: relative;
    z-index: 2;

    border-radius: 50%;

    overflow: hidden;

    background: #E7DFF0;

    display: flex;

    align-items: center;
    justify-content: center;

}


.hero-product-image {

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    display: block;

    object-fit: cover;
    object-position: center center;

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

}


.hero-image-decoration {

    position: absolute;

    border-radius: 50%;

}


.decoration-one {

    width: 380px;

    height: 380px;

    background:
        rgba(109,
            63,
            160,
            .12);

}


.decoration-two {

    width: 480px;

    height: 480px;

    border:
        1px solid rgba(23,
            35,
            63,
            .12);

}



/* =========================================
   TRUST BAR
========================================= */

.trust-bar {

    padding:
        28px 0;

    background:
        var(--white);

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

}


.trust-grid {

    display: grid;

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

    gap: 25px;

}


.trust-item {

    display: flex;

    align-items: center;

    gap: 12px;

}


.trust-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-weight: 800;

}


.trust-item strong {

    display: block;

    font-size: 13px;

}


.trust-item span {

    display: block;

    color:
        var(--text-muted);

    font-size: 11px;

}



/* =========================================
   OVERVIEW
========================================= */

.overview-section {

    padding:
        110px 0;

    background:
        var(--cream-light);

}


.overview-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 90px;

}


.overview-content h2 {

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px,
            4vw,
            56px);

    line-height: 1.15;

}


.overview-content p {

    margin-bottom: 18px;

    color:
        var(--text-muted);

    font-size: 17px;

    line-height: 1.8;

}


.quick-facts {

    display: grid;

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

    gap: 18px;

}


.fact-card {

    min-height: 190px;

    padding: 28px;

    background:
        var(--white);

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

    border-radius: 14px;

}


.fact-number {

    display: block;

    margin-bottom: 15px;

    color:
        var(--gold);

    font-size: 13px;

    font-weight: 800;

}


.fact-card h3 {

    margin-bottom: 10px;

    font-size: 18px;

}


.fact-card p {

    color:
        var(--text-muted);

    font-size: 14px;

}



/* =========================================
   WHY THIS GUIDE
========================================= */

.guide-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.guide-grid {

    display: grid;

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

    gap: 25px;

}


.guide-card {

    padding: 38px 30px;

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

    border-radius: 16px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.guide-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 20px 45px rgba(23,
            35,
            63,
            .08);

}


.guide-number {

    display: block;

    margin-bottom: 25px;

    color:
        var(--gold);

    font-size: 28px;

    font-family:
        Georgia,
        serif;

    font-weight: 700;

}


.guide-card h3 {

    margin-bottom: 14px;

    font-size: 22px;

}


.guide-card p {

    color:
        var(--text-muted);

    font-size: 15px;

}



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

.ingredients-section {
    padding: 100px 0;
    background: #F8F7FA;
}


/* =========================================
   SECTION HEADING
========================================= */

.ingredients-section .section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}


/* =========================================
   INGREDIENT GRID
========================================= */

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}


/* =========================================
   INGREDIENT CARD
========================================= */

.ingredient-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 35px 25px;

    background: #ffffff;

    border: 1px solid #E4E0EA;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* CARD HOVER */

.ingredient-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.08);
}


/* =========================================
   INGREDIENT IMAGE
========================================= */

.ingredient-image {
    width: 150px;
    height: 150px;

    margin: 0 auto 25px;

    border-radius: 50%;

    overflow: hidden;

    flex-shrink: 0;

    background: #F2EEF6;

    border: 5px solid #ffffff;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.10);
}


/* =========================================
   INGREDIENT IMAGE
========================================= */

.ingredient-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


/* =========================================
   INGREDIENT TITLE
========================================= */

.ingredient-card h3 {
    margin: 0 0 10px;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;

    color: #20283A;
}


/* =========================================
   INGREDIENT DESCRIPTION
========================================= */

.ingredient-card p {
    margin: 0 0 15px;

    max-width: 260px;

    font-size: 14px;

    line-height: 1.6;

    color: #687080;
}


/* =========================================
   INGREDIENT AMOUNT
========================================= */

.ingredient-card>span {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding: 5px 12px;

    border-radius: 30px;

    background: #F1EDF5;

    font-size: 13px;

    font-weight: 600;

    color: #555D6B;
}


/* =========================================
   FORMULA NOTE
========================================= */

.formula-note {
    max-width: 850px;

    margin: 45px auto 0;

    padding: 20px 25px;

    background: #ffffff;

    border-left: 4px solid #6D3FA0;

    border-radius: 8px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.04);
}


.formula-note p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #687080;

    text-align: center;
}


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

@media (max-width: 991px) {

    .ingredients-section {
        padding: 80px 0;
    }

    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .ingredients-section {
        padding: 65px 0;
    }


    .ingredients-section .section-heading {
        margin-bottom: 40px;
    }


    .ingredients-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    .ingredient-card {
        padding: 30px 20px;
    }


    .ingredient-image {
        width: 130px;
        height: 130px;

        margin-bottom: 20px;
    }


    .ingredient-card h3 {
        font-size: 19px;
    }


    .ingredient-card p {
        font-size: 14px;
    }


    .formula-note {
        margin-top: 35px;

        padding: 18px;
    }


    .formula-note p {
        font-size: 13px;
    }


}



/* =========================================
   PRODUCT DETAILS
========================================= */

.details-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.details-grid {

    display: grid;

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

    gap: 25px;

}


.detail-step {

    position: relative;

    padding:
        30px 20px;

    text-align: center;

}


.detail-step span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin-bottom: 20px;

    border-radius: 50%;

    background:
        var(--green-dark);

    color:
        var(--gold-light);

    font-size: 14px;

    font-weight: 800;

}


.detail-step h3 {

    margin-bottom: 12px;

    font-size: 18px;

}


.detail-step p {

    color:
        var(--text-muted);

    font-size: 14px;

}



/* =========================================
   PACKAGE OPTIONS
========================================= */

.packages-section {

    padding:
        120px 0;

    background:
        var(--cream);

}


.package-grid {

    display: grid;

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

    align-items: center;

    gap: 28px;

    max-width: 1100px;

    margin: 0 auto;

}


.package-card {

    position: relative;

    padding:
        45px 32px;

    background:
        var(--white);

    border:
        1px solid #E4E0EA;

    border-radius: 18px;

    text-align: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.package-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px rgba(23,
            35,
            63,
            .12);

}


.package-label {

    display: block;

    min-height: 20px;

    margin-bottom: 15px;

    color:
        var(--green-main);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

}


.package-card h3 {

    margin-bottom: 10px;

    font-size: 30px;

}


.package-supply {

    margin-bottom: 28px;

    color:
        var(--text-muted);

    font-size: 15px;

}


.package-price {

    margin-bottom: 30px;

}


.price {

    display: block;

    color:
        var(--green-dark);

    font-size: 52px;

    font-weight: 800;

    line-height: 1;

}


.price-label {

    display: block;

    margin-top: 8px;

    color:
        var(--text-muted);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.package-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 54px;

    padding:
        14px 20px;

    border-radius: 8px;

    background:
        var(--green-dark);

    color:
        var(--white);

    font-size: 14px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;

}


.package-btn:hover {

    background:
        var(--green-main);

    transform:
        translateY(-2px);

}



/* BEST VALUE */

.package-card.best-value {

    padding:
        62px 34px;

    background:
        var(--green-dark);

    border:
        2px solid var(--gold);

    color:
        var(--white);

    transform:
        scale(1.06);

    box-shadow:
        0 25px 55px rgba(23,
            35,
            63,
            .28);

    z-index: 2;

}


.package-card.best-value:hover {

    transform:
        scale(1.08) translateY(-6px);

}


.best-value-badge {

    position: absolute;

    top: -19px;

    left: 50%;

    transform:
        translateX(-50%);

    padding:
        9px 22px;

    border-radius: 30px;

    background:
        var(--gold);

    color:
        var(--green-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    white-space: nowrap;

}


.best-value .package-label {

    color:
        var(--gold-light);

}


.best-value h3 {

    color:
        var(--white);

}


.best-value .package-supply {

    color:
        rgba(255,
            255,
            255,
            .72);

}


.best-value .price {

    color:
        var(--gold-light);

}


.best-value .price-label {

    color:
        rgba(255,
            255,
            255,
            .65);

}


.best-value-btn {

    background:
        var(--gold);

    color:
        var(--green-dark);

    font-size: 15px;

    font-weight: 800;

    box-shadow:
        0 10px 25px rgba(109,
            63,
            160,
            .25);

}


.best-value-btn:hover {

    background:
        var(--gold-light);

}


.package-note {

    max-width: 700px;

    margin:
        40px auto 0;

    color:
        var(--text-muted);

    font-size: 12px;

    text-align: center;

}



/* =========================================
   BONUS
========================================= */

.bonus-section {

    padding:
        110px 0;

    background:
        var(--cream-light);

}


.bonus-grid {

    display: grid;

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

    gap: 25px;

}


.bonus-card {

    overflow: hidden;

    padding-bottom: 30px;

    background:
        var(--white);

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

    border-radius: 16px;

    text-align: center;

}


.bonus-image {

    height: 220px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    padding: 20px;

    background:
        var(--green-light);

}


.bonus-image img {

    max-height: 180px;

    object-fit: contain;

}


.bonus-card>span {

    color:
        var(--gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.bonus-card h3 {

    margin:
        10px 20px;

    font-size: 20px;

}


.bonus-card p {

    padding:
        0 25px;

    color:
        var(--text-muted);

    font-size: 14px;

}


.bonus-cta-wrap {

    margin-top: 40px;

    text-align: center;

}



/* =========================================
   GUARANTEE
========================================= */

.guarantee-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.guarantee-card {

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    align-items: center;

    gap: 70px;

    padding:
        70px 58px;

    background:
        linear-gradient(135deg,
            #F5F1F8 0%,
            #EEE7F5 100%);

    border:
        1px solid rgba(23,
            35,
            63,
            .15);

    border-radius: 28px;

    overflow: hidden;

}


.guarantee-content {

    max-width: 700px;

}


.guarantee-content h2 {

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px,
            4vw,
            58px);

    line-height: 1.12;

}


.guarantee-content p {

    margin-bottom: 32px;

    color:
        var(--text-muted);

    font-size: 17px;

    line-height: 1.75;

}


.guarantee-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        16px 28px;

    border-radius: 8px;

    background:
        var(--green-dark);

    color:
        var(--white);

    font-size: 15px;

    font-weight: 700;

    transition:
        transform .25s ease,
        background .25s ease;

}


.guarantee-btn:hover {

    background:
        var(--green-main);

    transform:
        translateY(-3px);

}


.guarantee-btn span {

    font-size: 20px;

}


.guarantee-image {

    display: flex;

    align-items: center;

    justify-content: center;

}


.guarantee-image img {

    width: 100%;

    max-width: 350px;

    object-fit: contain;

    filter:
        drop-shadow(0 18px 25px rgba(0,
                0,
                0,
                .16));

}



/* =========================================
   FINAL VERDICT
========================================= */

.final-verdict-section {

    padding:
        110px 0;

    background:
        var(--cream);

}


.final-verdict-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: start;

    gap: 80px;

}


.verdict-content h2 {

    margin-bottom: 25px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px,
            4vw,
            58px);

    line-height: 1.15;

}


.verdict-content p {

    margin-bottom: 18px;

    color:
        var(--text-muted);

    font-size: 17px;

    line-height: 1.8;

}


.verdict-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    padding:
        16px 28px;

    background:
        var(--green-dark);

    color:
        var(--white);

    border-radius: 8px;

    font-weight: 700;

}


.verdict-checklist-wrap {

    padding: 40px;

    background:
        var(--white);

    border-radius: 18px;

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

}


.checklist-group+.checklist-group {

    margin-top: 35px;

    padding-top: 35px;

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

}


.checklist-group h3 {

    margin-bottom: 20px;

    color:
        var(--green-dark);

    font-size: 12px;

    letter-spacing: 1.4px;

}


.verdict-item {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    font-size: 15px;

}


.verdict-item span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-size: 12px;

    font-weight: 800;

}


.consider-item {

    position: relative;

    margin-bottom: 13px;

    padding-left: 18px;

    color:
        var(--text-muted);

    font-size: 14px;

}


.consider-item::before {

    content: "•";

    position: absolute;

    left: 0;

    color:
        var(--gold);

}



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

.faq-section {

    padding:
        110px 0;

    background:
        var(--white);

}


.faq-container {

    max-width: 900px;

}


.faq-list {

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

}


.faq-item {

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

}


.faq-question {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        24px 0;

    border: none;

    background: transparent;

    color:
        var(--text-dark);

    text-align: left;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

}


.faq-icon {

    flex-shrink: 0;

    color:
        var(--green-main);

    font-size: 28px;

    font-weight: 400;

    transition:
        transform .3s ease;

}


.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition:
        max-height .4s ease;

}


.faq-answer p {

    padding:
        0 0 24px;

    color:
        var(--text-muted);

    font-size: 15px;

    line-height: 1.8;

}


.faq-item.active .faq-answer {

    max-height: 300px;

}


.faq-item.active .faq-icon {

    transform:
        rotate(45deg);

}



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

.final-cta-section {

    padding:
        110px 0;

    background:
        var(--cream-light);

}


.final-cta-card {

    position: relative;

    max-width: 1000px;

    margin: 0 auto;

    padding:
        85px 40px;

    overflow: hidden;

    border-radius: 28px;

    background:
        var(--green-dark);

    color:
        var(--white);

    text-align: center;

}


.final-cta-card::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    top: -250px;

    left: -100px;

    border-radius: 50%;

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

}


.final-cta-card h2 {

    position: relative;

    max-width: 700px;

    margin:
        0 auto 20px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(38px,
            4vw,
            58px);

    line-height: 1.15;

}


.final-cta-card p {

    position: relative;

    max-width: 650px;

    margin:
        0 auto 35px;

    color:
        rgba(255,
            255,
            255,
            .75);

    font-size: 17px;

}


.final-cta-card .section-label {

    position: relative;

    color:
        var(--gold-light);

}


.final-cta-btn {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        17px 32px;

    border-radius: 8px;

    background:
        var(--gold);

    color:
        var(--green-dark);

    font-weight: 800;

    transition:
        transform .25s ease,
        background .25s ease;

}


.final-cta-btn:hover {

    background:
        var(--gold-light);

    transform:
        translateY(-3px);

}



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

.site-footer {

    padding:
        80px 0 30px;

    background:
        #151B30;

    color:
        var(--white);

}


.footer-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 60px;

    padding-bottom: 50px;

}


.footer-logo {

    display: flex;

    flex-direction: column;

    margin-bottom: 20px;

}


.footer-logo span {

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 2px;

}


.footer-logo small {

    margin-top: 5px;

    color:
        var(--gold-light);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

}


.footer-brand p {

    max-width: 400px;

    color:
        rgba(255,
            255,
            255,
            .65);

    font-size: 14px;

    line-height: 1.8;

}


.footer-column h3 {

    margin-bottom: 20px;

    color:
        var(--gold-light);

    font-size: 12px;

    letter-spacing: 1.5px;

}


.footer-column a {

    display: block;

    margin-bottom: 12px;

    color:
        rgba(255,
            255,
            255,
            .7);

    font-size: 14px;

    transition:
        color .2s ease;

}


.footer-column a:hover {

    color:
        var(--white);

}


.footer-disclaimer {

    padding:
        30px 0;

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

}


.footer-disclaimer p {

    max-width: 1000px;

    margin-bottom: 14px;

    color:
        rgba(255,
            255,
            255,
            .55);

    font-size: 12px;

    line-height: 1.8;

}


.footer-disclaimer strong {

    color:
        rgba(255,
            255,
            255,
            .8);

}


.footer-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 25px;

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

}


.footer-bottom p,
.footer-bottom a {

    color:
        rgba(255,
            255,
            255,
            .5);

    font-size: 12px;

}


.footer-bottom a:hover {

    color:
        var(--white);

}



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

@media (max-width: 1000px) {


    /* HEADER */

    .desktop-nav {

        gap: 18px;

    }


    /* TRUST */

    .trust-grid {

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

    }


    /* HERO */

    .hero-grid {

        gap: 40px;

    }


    /* INGREDIENTS */

    .ingredients-grid {

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

    }


    /* PACKAGE */

    .package-grid {

        gap: 20px;

    }


    .package-card {

        padding:
            38px 24px;

    }


    /* GUARANTEE */

    .guarantee-card {

        gap: 40px;

        padding:
            55px 40px;

    }


    /* VERDICT */

    .final-verdict-grid {

        gap: 50px;

    }

}



/* =========================================
   MOBILE / TABLET
========================================= */

@media (max-width: 800px) {


    /* GLOBAL */

    .container {

        width:
            min(100% - 32px,
                680px);

    }


    /* HEADER */

    .desktop-nav,
    .header-cta {

        display: none;

    }


    .mobile-menu-btn {

        display: block;

    }


    .mobile-nav {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        padding: 25px;

        background:
            var(--cream-light);

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

        box-shadow:
            0 20px 30px rgba(0,
                0,
                0,
                .08);

    }


    .mobile-nav.active {

        display: flex;

        flex-direction: column;

        gap: 18px;

    }


    .mobile-nav a {

        font-size: 16px;

        font-weight: 600;

    }


    .mobile-nav-cta {

        padding:
            15px 20px;

        border-radius: 7px;

        background:
            var(--green-dark);

        color:
            var(--white);

        text-align: center;

    }


    /* HERO */

    .hero-section {

        padding:
            75px 0;

    }


    .hero-grid {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-image-wrap {

        min-height: 420px;

        order: -1;

    }


    .hero-image-circle {

        width: 420px;
        height: 420px;

    }


    /* OVERVIEW */

    .overview-grid {

        grid-template-columns:
            1fr;

        gap: 50px;

    }


    /* GUIDE */

    .guide-grid {

        grid-template-columns:
            1fr;

    }


    /* INGREDIENT */

    .ingredients-grid {

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

    }


    /* DETAILS */

    .details-grid {

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

    }


    /* PACKAGES */

    .package-grid {

        grid-template-columns:
            1fr;

        max-width: 500px;

        gap: 40px;

    }


    .package-card.best-value {

        transform: none;

    }


    .package-card.best-value:hover {

        transform:
            translateY(-6px);

    }


    /* BONUS */

    .bonus-grid {

        grid-template-columns:
            1fr;

        max-width: 500px;

        margin: 0 auto;

    }


    /* GUARANTEE */

    .guarantee-card {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .guarantee-image {

        order: -1;

    }


    .guarantee-content {

        max-width: 100%;

    }


    /* VERDICT */

    .final-verdict-grid {

        grid-template-columns:
            1fr;

    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-brand {

        grid-column:
            1 / -1;

    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 560px) {


    /* PROMO */

    .promo-bar {

        font-size: 10px;

    }


    .promo-dot {

        display: none;

    }


    .promo-bar-content {

        flex-direction: column;

        gap: 2px;

    }


    /* SECTION SPACING */

    .overview-section,
    .guide-section,
    .ingredients-section,
    .details-section,
    .packages-section,
    .bonus-section,
    .guarantee-section,
    .final-verdict-section,
    .faq-section,
    .final-cta-section {

        padding:
            75px 0;

    }


    /* HERO */

    .hero-content h1 {

        font-size: 42px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .hero-image-wrap {

        min-height: 350px;

    }


    .hero-image-circle {

        width: 320px;
        height: 320px;

    }


    .decoration-one {

        width: 260px;

        height: 260px;

    }


    .decoration-two {

        width: 330px;

        height: 330px;

    }


    /* TRUST */

    .trust-grid {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    /* OVERVIEW */

    .quick-facts {

        grid-template-columns:
            1fr;

    }


    .fact-card {

        min-height: auto;

    }


    /* INGREDIENTS */

    .ingredient-card {

        padding:
            20px 12px;

    }


    /* DETAILS */

    .details-grid {

        grid-template-columns:
            1fr;

    }


    /* PACKAGE */

    .package-card {

        padding:
            42px 25px;

    }


    .package-card.best-value {

        padding:
            55px 25px;

    }


    /* GUARANTEE */

    .guarantee-card {

        padding:
            42px 22px;

        border-radius: 20px;

    }


    .guarantee-content h2 {

        font-size: 36px;

    }


    .guarantee-image img {

        max-width: 230px;

    }


    .guarantee-btn {

        width: 100%;

        min-height: 56px;

    }


    /* VERDICT */

    .verdict-checklist-wrap {

        padding: 28px 22px;

    }


    /* FAQ */

    .faq-question {

        font-size: 16px;

    }


    /* FINAL CTA */

    .final-cta-card {

        padding:
            65px 22px;

        border-radius: 20px;

    }


    .final-cta-btn {

        width: 100%;

        justify-content: center;

    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

        gap: 35px;

    }


    .footer-brand {

        grid-column: auto;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

    }

}

/* Small sage-green accent */
.offer-perks span {
    background: var(--sage-soft);
    color: var(--sage-accent);
}