:root {
    --bg: #0f1116;
    --text: #f7f7f7;
    --muted: #c9d1d9;
    --yellow: #ebef00;
    --chip: #161a20;
    --chip-br: #ffe27a;
    --cta1: #ff6a3a;
    --cta2: #ff3e3e;
    --note: #e69b2f;
    --max: 1200px;
    --gutter: clamp(12px, 3.5vw, 20px);
}
:root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* your sticky bar */
.sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; /* always stick to the real bottom */
    z-index: 9999;
    padding: 12px 16px calc(12px + var(--safe-bottom)); /* avoid iPhone home-indicator overlap */
    /* background, shadow, etc… */
}

    /* give the page room so content isn’t hidden under the bar */
    body {
        padding-bottom: calc(84px + var(--safe-bottom));
    } /* 84px ≈ bar height */

    /* --- Base --- */
    * {
        box-sizing: border-box;
        line-height: 1.2;
        font-weight: 700;
    }
    .faq-a,
    .faq-a p,
    .faq-a li {
        font-weight: 500 !important;
    }
    html,
    body {
        margin: 0;
        padding: 0;
    }

    body {
        background: var(--bg);
        color: var(--text);
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        line-height: 1.5;
    }

    /* --- Containers --- */
    .wrap,
    .aud-wrap {
        max-width: var(--max);
        margin: 0 auto;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .aud-wrap {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* --- Hero --- */
    .hero {
        text-align: center;
        padding: 20px 0 10px;
    }

    .hero h1,
    .hero h2,
    .hero h3 {
        margin: 0 0 5px;
    }

    .hero .u {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 2px;
    }

    .hero h1 {
        font-size: 33px;
        font-weight: 600;
    }
    .hero h2 {
        font-size: 33px;
        font-weight: 600;
    }
    .hero h3 {
        font-size: 33px;
        font-weight: 600;
    }

    .hero .sub {
        color: var(--muted);
        margin: 010px 0 23px;
        font-weight: 500;
    }

    /* --- CTA --- */
    .cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        inline-size: clamp(260px, 90vw, 900px);
        margin: 0 auto 22px;
        background: linear-gradient(270deg, #ce1512, #ff6a3a, #ce1512);
        animation: ctaGradientMove 8s ease infinite;
        background-size: 400% 400%;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        border-radius: 12px;
        padding: 18px 16px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        cursor: pointer;
        user-select: none;
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }
    @keyframes ctaGradientMove {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
    }

    .cta small {
        display: block;
        margin-top: 4px;
        opacity: 0.95;
        font-weight: 600;
    }

    .note {
        text-align: center;
        font-weight: 500;
        margin-top: 6px;
    }
    .note strong {
        color: var(--note);
    }

    /* --- Modal --- */
    /* before */
    .backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 1000; /* <-- too low */
    }

    /* after */
    .backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
        z-index: 2147483650; /* higher than sticky bar */
    }

    .modal {
        background: #fff;
        color: #0f1116;
        width: min(460px, 100%);
        border-radius: 14px;
        padding: 22px 22px 16px;
        position: relative;
        box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
    }
    .modal h4 {
        margin: 0 0 8px;
        font-weight: 500;
        font-size: x-large;
        text-align: center;
    }
    .x {
        position: absolute;
        right: 12px;
        top: 8px;
        font-size: 26px;
        line-height: 1;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .f .row {
        margin: 10px 0;
    }
    .f input,
    .f select {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #d2d6db;
        border-radius: 10px;
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        background: #fff;
        color: #111;
    }

    /* ===== Country code picker ===== */
    .ccp-row { display: flex; gap: 8px; }
    .ccp-row input[type="tel"] { flex: 1; min-width: 0; }
    .ccp-picker { display: flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 44px; padding: 0 10px; border: 1px solid #d2d6db; border-radius: 10px; background: #fafafa; }
    .ccp-flag { width: 22px; height: 14px; object-fit: cover; border-radius: 2px; display: block; }
    .ccp-code { display: inline-block !important; width: 58px !important; min-width: 58px !important; max-width: 58px !important; flex: 0 0 auto !important; box-sizing: border-box !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; font-size: 16px; font-weight: 700; color: #111; font-family: "Poppins", sans-serif; outline: none !important; }
    .f .submit {
        width: 100%;
        background: var(--cta2);
        color: #fff;
        border: 0;
        padding: 14px 16px;
        border-radius: 10px;
        font-weight: 700;
        font-size: 21px;
        cursor: pointer;
        font-family: "Poppins", sans-serif;
    }
    .privacy {
        font-size: 16px;
        color: #222;
        margin: 8px 2px 0;
        font-weight: 500;
        text-align: center;
    }

    /* --- Designed For Section --- */
    .aud {
        background: #f6f7f8;
        color: #0f1116;
        text-align: center;
        padding: 10px 0 5px;
    }
    .aud h2 {
        font-weight: 700;
        font-size: 36px;
        line-height: 1.2;
        margin: 0 0 6px;
    }
    .aud .sub {
        color: #000;
        font-weight: 600;
        margin: 0 0 20px;
        font-size: 19px;
    }
    .aud-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 22px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto 24px;
    }
    .aud-pill {
        display: flex;
        align-items: flex-start;
        text-align: left;
        gap: 10px;
        background: #fff;
        border-radius: 14px;
        padding: 10px 10px;
        font-size: 18px;
        font-weight: 600;
        border: 1px solid #e7ebf0;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
    }
    .aud-pill.alt {
        background: #dbf4fe;
    }
    .aud-pill i {
        color: #26b500;
        font-size: 20px;
    }
    .aud .anyone {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #0a8f2b;
        font-weight: 700;
        font-size: 28px;
        margin: 8px 0 12px;
    }
    .aud .anyone i {
        font-size: 24px;
    }
    .aud .note {
        color: #222;
        margin: 0 0 16px;
    }
    .aud .note strong {
        color: #e69b2f;
    }

    /* --- Responsive --- */
    @media (max-width: 1360px) {
        .aud h2 {
            font-size: 28px;
        }
    }
    @media (max-width: 900px) {
        .hero h1 {
            font-size: 20px;
            line-height: 1.3;
        }
        .hero h2 {
            font-size: 20px;
            line-height: 1.3;
        }
        .hero h3 {
            font-size: 20px;
            line-height: 1.3;
        }
        .cta {
            font-size: 18px;
        }
        .aud h2 {
            font-size: 28px;
        }
    }
    @media (max-width: 780px) {
        .aud-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .aud .anyone {
            font-size: 24px;
        }
    }
    @media (max-width: 520px) {
        .hero h1 {
            font-size: 22px;
            line-height: normal;
        }
        .hero h2 {
            font-size: 22px;
            line-height: normal;
        }
        .hero h3 {
            font-size: 22px;
            line-height: normal;
        }
        .aud-grid {
            grid-template-columns: 1fr;
        }
        .aud h2 {
            font-size: 24px;
        }
        .aud .anyone {
            font-size: 22px;
        }
        .hero.wrap {
            padding-left: calc(var(--gutter) + 12px);
            padding-right: calc(var(--gutter) + 12px);
        }
    }
    /* ===== Testimonials ===== */
    .testi {
        background: #fff;
        color: #0f1116;
        text-align: center;
        padding: 0 0 40px;
    }

    /* Heading part with black background */
    .testi-head {
        background: #fff;
        color: #000;
        padding: 30px 20px 30px;
    }
    .testi-head h2 {
        font-size: 34px;
        font-weight: 700;
        margin: 0 0 8px;
        color: #000;
    }
    .testi-head .sub {
        margin: 0;
        color: #d69b00;
        font-weight: 700;
    }

    /* Testimonials grid */
    .t-img-grid {
        display: grid;
        /* grid-template-columns: repeat(2, 1fr); */
        gap: 18px;
        max-width: 1100px;
        margin: 0 auto 30px;
    }
    .t-img-grid .testimonial-card {
        width: 100%;
        height: auto;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }
    .t-img-grid .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

    /* Rating & Hook */
    .t-rating {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin: 10px 0 14px;
    }
    .stars {
        color: #ffb100;
        font-size: 22px;
        letter-spacing: 2px;
    }
    .t-score {
        font-weight: 800;
    }
    .t-rev {
        color: #6b7280;
        font-size: 13px;
    }

    .t-hook {
        max-width: 1000px;
        margin: 0 auto 20px;
        color: #0f1116;
        font-weight: 500;
        line-height: 1.6;
    }
    .t-hook strong {
        background: #ffe5b5;
        padding: 0 4px;
        border-radius: 6px;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .testi-head h2 {
            font-size: 30px;
        }
        .t-img-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 520px) {
        .testi-head h2 {
            font-size: 24px;
        }
        .t-img-grid {
            grid-template-columns: 1fr;
        }
    }
    /* ===== Learn / Curriculum ===== */
    .learn {
        margin-top: -40px;
        background: #fff;
        color: #0f1116;
        padding: 0 0 42px;
    }
    .learn-head {
        background: #0f1116;
        color: #fff;
        text-align: center;
        padding: 20px 20px 20px;
    }
    .learn-head h2 {
        margin: 0 0 8px;
        font-size: 34px;
        font-weight: 700;
        color: #fff;
    }

    .learn-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
    }
    .learn-card {
        background: #f9fafb;
        border: 1px solid #e8ecf1;
        border-radius: 14px;
        padding: 18px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;
    }
    .learn-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
    }
    .lc-icon {
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .lc-icon img {
        width: 40px;
        height: 40px;
        display: block;
    }
    .lc-body {
        flex: 1;
    }
    .lc-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        color: #0a84ff;
        margin: 0 0 6px;
    }
    .lc-desc {
        margin: 0;
        color: #374151;
        line-height: 1.55;
        font-weight: 500;
    }

    /* responsive */
    @media (max-width: 900px) {
        .learn-head h2 {
            font-size: 30px;
        }
    }
    @media (max-width: 780px) {
        .learn-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 520px) {
        .learn-head h2 {
            font-size: 24px;
        }
    }
    /* ===== Certificate Section ===== */
    .cert {
        background: #111;
        color: #fff;
        text-align: center;
        padding: 30px 16px;
    }

    .cert h2 {
        font-size: 32px;
        font-weight: 700;
        color: var(--yellow);
        margin: 0 0 12px;
    }

    .cert p {
        font-size: 18px;
        color: #e4e4e4;
        font-weight: 500;
        margin: 0 0 28px;
    }

    .cert p strong {
        color: var(--yellow);
    }

    .cert-media {
        display: flex;
        justify-content: center;
        margin: 0 auto 30px;
    }

    .cert-media img {
        width: min(700px, 95vw);
        height: auto;
        border-radius: 10px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    }

    /* Adjust CTA alignment reuse */
    .cert .cta {
        margin: 20px auto;
    }

    .cert .note {
        color: #f7f7f7;
        font-size: 16px;
        margin-top: 8px;
    }
    .cert .note strong {
        color: #ffeb3b;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .cert h2 {
            font-size: 24px;
        }
        .cert p {
            font-size: 16px;
        }
    }
    /* ===== Mentor / About ===== */
    .mentor {
        background: #fff;
        color: #0f1116;
        padding: 40px 0 42px;
    }
    .mentor .wrap {
        padding-top: 0;
        padding-bottom: 0;
    }
    .m-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 420px 1fr;
        gap: 30px 36px;
        align-items: start;
    }
    .m-photo {
        display: flex;
        justify-content: center;
    }
    .m-photo img {
        width: 100%;
        max-width: 420px;
        height: auto;
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    }

    /* Base (desktop first) */
    .m-head {
        font-size: 36px;
        font-weight: 700;
        color: #0a84ff;
        margin: 0 0 10px;
        display: block; /* show on desktop */
    }
    .m-head-m {
        font-size: 36px;
        font-weight: 700;
        color: #0a84ff;
        margin: 0 0 10px;
        display: none; /* hide on desktop */
    }
    .m-badges {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 22px;
        margin: 6px 0 14px;
    }
    .m-badge {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        font-weight: 600;
        color: #0f1116;
    }
    .m-badge i {
        color: #1ecb5a;
        font-size: 20px;
        position: relative;
        top: 2px;
    }

    .m-copy {
        color: #22303a;
        line-height: 1.65;
        font-weight: 500;
    }
    .m-copy .hl {
        color: #0a84ff;
        font-weight: 800;
    }
    .m-copy a {
        color: #0a84ff;
        text-decoration: none;
        font-weight: 700;
    }

    @media (max-width: 980px) {
        .m-grid {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        .m-head {
            font-size: 30px;
            text-align: center;
        }
    }
    @media (max-width: 980px) {
        .m-head {
            display: none;
        }
        .m-head-m {
            display: block;
            font-size: 30px;
            text-align: center;
        }
    }

    @media (max-width: 520px) {
        .m-head-m {
            font-size: 26px;
        }
        .m-badges {
            grid-template-columns: 1fr;
        }
    }
    /* ===== Bonuses ===== */
    .bonus {
        background: #fff;
        color: #0f1116;
        padding: 0 0 10px;
    }
    .bonus-head {
        margin-top: -40px;
        margin-bottom: 25px;
        background: #0f1116;
        color: #fff;
        text-align: center;
        padding: 30px 20px 30px;
    }
    .bonus-head h2 {
        margin: 0 0 6px;
        font-size: 34px;
        font-weight: 600;
    }
    .bonus-head .sub {
        margin: 0;
        color: #ffe44d;
        font-weight: 700;
    }

    .b-grid {
        max-width: 900px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 22px;
    }
    .b-card {
        position: relative;
        background: #f3f5f7;
        border: 1px solid #e5e9ef;
        border-radius: 14px;
        padding: 22px 18px;
        text-align: center;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
    }
    .b-ribbon {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -12px;
        background: #0f1116;
        color: #ebef00;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 15px;
        letter-spacing: 0.3px;
    }
    .b-title {
        font-weight: 600;
        font-size: 18px;
        line-height: 1.35;
        margin: 8px 0 14px;
    }
    .b-worth {
        display: inline-block;
        border: 2px solid #133a63;
        border-radius: 8px;
        padding: 8px 14px;
        font-weight: 600;
        color: #0a84ff;
        background: #fff;
    }

    /* single wide card row */
    .b-span {
        grid-column: 1 / -1;
    }

    /* Countdown block */
    .b-urgency {
        margin: 26px auto 10px;
        text-align: center;
    }
    .b-urgency h3 {
        margin: 0 0 12px;
        font-size: 30px;
        font-weight: 700;
    }
    .b-timer {
        display: flex;
        gap: 14px;
        justify-content: center;
        flex-wrap: wrap;
        margin: 10px 0 8px;
    }
    .b-box {
        background: #0f1116;
        color: #ebef00;
        border-radius: 12px;
        width: 120px;
        height: 96px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    }
    .b-num {
        font-size: 38px;
        font-weight: 700;
        line-height: 1;
    }
    .b-label {
        color: #fff;
        font-weight: 700;
        margin-top: 6px;
        font-size: 14px;
    }

    /* responsive */
    @media (max-width: 1300px) {
        .bonus-head h2 {
            font-size: 30px;
        }
        .b-urgency h3 {
            font-size: 26px;
        }
    }
    @media (max-width: 760px) {
        .b-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 520px) {
        .bonus-head h2 {
            font-size: 25px;
        }
    }
    /* ===== FAQ Section ===== */
    .faq {
        background: #fff;
        color: #0f1116;
        padding: 5px 10px;
    }

    .faq .wrap {
        max-width: 1100px;
        margin: 0 auto;
    }

    .faq h2 {
        text-align: center;
        font-size: 38px;
        font-weight: 700;
        margin-top: -40px;
        margin-bottom: 12px;
    }

    .faq .lead {
        max-width: 850px;
        margin: 0 auto 30px;
        text-align: center;
        color: #374151;
        font-weight: 500;
        line-height: 1.6;
    }

    /* ===== Accordion ===== */
    .faq-list {
        max-width: 1000px;
        margin: 0 auto;
    }

    .faq-item {
        border-radius: 10px;
        margin: 14px 0;
        overflow: hidden;
        background: #0b0d2a;
    }

    /* Question Button */
    .faq-q {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        background: #0b0d2a;
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 16px 20px 16px 50px;
        font-size: 15px; /* 🎯 Adjust this to change question font size */
        font-weight: 600;
        border-radius: 10px;
        position: relative;
        text-align: left;
        transition: background 0.25s ease;
    }

    .faq-q:hover {
        background: #0e1136;
    }

    /* Plus/Minus Icon */
    .faq-q::before {
        content: "+";
        position: absolute;
        left: 18px;
        font-size: 24px;
        font-weight: 600;
        color: #ffd641;
        transition: transform 0.2s ease;
    }

    .faq-item[aria-expanded="true"] .faq-q::before {
        content: "–";
        transform: rotate(180deg);
    }

    /* Answer */
    /* Panel uses height animation instead of max-height */
    .faq-a {
        position: relative;
        height: 0; /* animate this */
        overflow: hidden;
        font-weight: 500;
        padding: 0 18px 0 28px; /* collapsed padding */
        transition:
            height 0.26s ease,
            padding 0.26s ease;
        background: #fff;
        border-radius: 0 0 10px 10px;
        will-change: height; /* hint for smoother paint */
    }

    .faq-item[aria-expanded="true"] .faq-a {
        padding: 15px 20px;
    }

    /* Answer Text */
    .faq-a p {
        margin: 0;
        font-size: 16px;
        color: #22303a;
    }

    .faq-a a {
        color: #0a84ff;
        text-decoration: none;
        font-weight: 500;
    }

    .faq-a a:hover {
        text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .faq h2 {
            font-size: 30px;
        }
        .faq-q {
            font-size: 16px;
            padding: 14px 16px 14px 46px;
        }
    }

    /* ================================
Sticky Bottom CTA (Mobile Only)
================================ */
    /* ================================
Sticky Bottom CTA (Mobile Only)
================================ */
    /* Flush sticky bar, no bottom gap */
    html,
    body {
        margin: 0;
        padding: 0;
    }

    /* ================================
Sticky Bottom CTA (Mobile Only)
================================ */
    .sticky-cta {
        position: fixed; /* <-- makes it STICKY to viewport */
        left: 0;
        right: 0;
        bottom: 0; /* hug the bottom */
        background: #0b0d2a;
        color: #fff;
        z-index: 950; /* sit above everything */
        padding: 14px 18px env(safe-area-inset-bottom);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
        border-top: 2px solid #fff;
    }
    @media (min-width: 901px) {
        .sticky-cta {
            display: none !important;
        } /* mobile only */
    }

    .sticky-content {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .sticky-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: center;
    }

    /* LEFT */
    .sticky-left {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .sticky-title {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0.2px;
        color: #e8ecf3;
    }

    .countdown {
        display: flex;
        gap: 18px;
        align-items: center;
    }
    .countdown .cd-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.05;
    }
    .countdown strong {
        font-size: 18px;
        font-weight: 600;
        color: #ffd641;
    }
    .countdown span {
        font-size: 12px;
        color: #e8ecf3;
        margin-top: 2px;
    }

    /* RIGHT */
    .sticky-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding-top: 4px; /* visually centers this column */
    }
    .price {
        font-size: 18px;
        font-weight: 500;
        line-height: 1;
    }

    .price del {
        opacity: 0.75;
        margin-right: 6px;
    }

    .sticky-btn {
        width: 200px; /* like in the screenshot */
        border: 0;
        border-radius: 10px;
        padding: 9px 0;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        background: linear-gradient(90deg, #ff6a3a, #ff3e3e);
        color: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
        transition:
            transform 0.1s ease,
            filter 0.2s ease;
    }
    .sticky-btn:hover {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }

    .sticky-offer {
        font-size: 10px;
        color: #cbd5e1;
    }

    /* Small phones */
    @media (max-width: 360px) {
        .sticky-row {
            gap: 12px;
        }
        .sticky-btn {
            width: 180px;
        }
    }
    body.modal-open .sticky-cta {
        display: none !important;
    }
    /* respect users who prefer reduced motion */
    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .cta,
        .sticky-btn,
        .js-open {
            animation: none !important;
        }
    }

    /* Subtle periodic shake with a long idle */
    @keyframes cta-pulse-shake {
        0%,
        92%,
        100% {
            transform: translateX(0) rotate(0);
        }
        2% {
            transform: translateX(-2px) rotate(-0.5deg);
        }
        4% {
            transform: translateX(2px) rotate(0.5deg);
        }
        6% {
            transform: translateX(-2px) rotate(-0.5deg);
        }
        8% {
            transform: translateX(2px) rotate(0.5deg);
        }
        10% {
            transform: translateX(-1px) rotate(-0.25deg);
        }
        12% {
            transform: translateX(1px) rotate(0.25deg);
        }
    }

    /* Apply to ALL CTAs */
    .cta,
    .sticky-btn,
    .js-open {
        animation: cta-pulse-shake 5s ease-in-out infinite;
        transform-origin: center;
        will-change: transform;
    }

    /* Optional: a slightly stronger shake when hovered/focused */
    @keyframes cta-shake-quick {
        0%,
        100% {
            transform: translateX(0) rotate(0);
        }
        20% {
            transform: translateX(-2px) rotate(-0.5deg);
        }
        40% {
            transform: translateX(2px) rotate(0.5deg);
        }
        60% {
            transform: translateX(-2px) rotate(-0.5deg);
        }
        80% {
            transform: translateX(2px) rotate(0.5deg);
        }
    }
    .cta:hover,
    .cta:focus,
    .sticky-btn:hover,
    .sticky-btn:focus,
    .js-open:hover,
    .js-open:focus {
        animation:
            cta-pulse-shake 8s ease-in-out infinite,
            cta-shake-quick 0.6s ease-in-out;
    }

    /* respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .cta,
        .sticky-btn {
            animation: none !important;
        }
        .cta::after,
        .sticky-btn::after {
            animation: none !important;
        }
    }

    /* make buttons a clipping context for the sheen */
    .cta,
    .sticky-btn {
        position: relative;
        overflow: hidden;
        isolation: isolate; /* keeps the sheen above background, below text */
    }

    /* the white sheen */
    .cta::after,
    .sticky-btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%; /* start off the left side */
        width: 50%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 45%,
            rgba(255, 255, 255, 0) 100%
        );
        transform: skewX(-20deg);
        animation: btn-shine 3.6s ease-in-out infinite;
        /* optional: make it happen less often */
        animation-delay: 1s;
    }

    /* faster pass on hover/focus */
    .cta:hover::after,
    .cta:focus::after,
    .sticky-btn:hover::after,
    .sticky-btn:focus::after {
        animation-duration: 1.2s;
    }

    @keyframes btn-shine {
        0% {
            left: -150%;
        }
        55% {
            left: 130%;
        } /* sweep across */
        100% {
            left: 130%;
        } /* idle offscreen */
    }




    #hero-fb { background: var(--bg); padding: 4px 0 18px; }
    .fb-hero-container { max-width: 900px; margin: auto; padding: 0 var(--gutter); }
    .fb-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
    .fb-hero-image { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
    .fb-hero-image img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: 16px; }
    .fb-hero-content { display: flex; flex-direction: column; gap: 14px; }
    .fb-hero-content .cta { inline-size: 100%; margin: 0; font-size: 16px; padding: 14px 12px; }
    .fb-card { background: #161a20; border: 1px solid #2a2f3a; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); padding: 14px; }
    .fb-date-card { display: flex; align-items: center; gap: 14px; }
    .fb-cal-badge { width: 52px; display: inline-block; border-radius: 10px; overflow: hidden; border: 0px solid rgba(0,0,0,0.25); text-align: center; background: #fff; flex-shrink: 0; }
    .fb-cal-month { background: #1877f2; color: #fff; font-weight: 700; letter-spacing: 0.08em; font-size: 10px; line-height: 20px; text-transform: uppercase; }
    .fb-cal-day { color: #111; font-weight: 800; font-size: 16px; line-height: 30px; }
    .fb-date-info .fb-date-line { font-size: 15px; font-weight: 600; color: var(--text); }
    .fb-date-info .fb-time-line { color: var(--muted); font-weight: 600; margin-top: 3px; font-size: 13px; }
    .fb-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .fb-info .fb-label { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
    .fb-info .fb-value { font-size: 15px; font-weight: 600; color: var(--text); }
    @media (max-width: 700px) { .fb-hero-grid { grid-template-columns: 1fr; } }



.legal-disclaimer{background:#0f1116;border-top:1px solid rgba(255,255,255,.09);padding:28px 18px 32px}
.legal-disclaimer p{max-width:1100px;margin:0 auto;font-family:inherit;font-size:12px;font-weight:400;line-height:1.75;letter-spacing:.1px;color:#7d8590;text-align:left}
@media(max-width:600px){.legal-disclaimer{padding:22px 16px 26px}.legal-disclaimer p{font-size:11.5px;line-height:1.7}}



.testimonial-title {
    text-align: center;
    color: #d99a00;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 35px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.testimonial-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 12px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-image {
    width: 55px;
    height: 55px;
    min-width: 55px;

    border-radius: 50%;
    object-fit: cover;

    border: 2px solid #eee;
}

.testimonial-content {
    background: #f0f1f4;
    border-radius: 25px;
    padding: 10px 15px;
	text-align:left;
    font-size: 17px;
    line-height: 1.35;
    flex: 1;
	font-weight:initial;
}

.testimonial-name {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 4px;
	text-align:left;
}

.highlight {
    background: #fff900;
    padding: 0 3px;
}

/* Mobile */
@media (max-width: 768px) {

    .testimonial-section {
        padding: 25px 12px 40px;
    }

    .testimonial-title {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .testimonial-content {
        font-size: 16px;
    }

    .testimonial-name {
        font-size: 16px;
    }

    .profile-image {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }
}


/* ================================
PRACTICAL TOOLS SECTION
================================ */

.practical-tools-section {
padding: 40px 20px;
background: #f8faff;
}

.tools-container {
max-width: 1100px;
margin: 0 auto;
}

/* Heading */

.tools-heading {
text-align: center;
max-width: 750px;
margin: 0 auto 45px;
}

.tools-label {
display: inline-block;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
color: #635bff;
margin-bottom: 12px;
}

.tools-heading h2 {
margin: 0;
font-size: 38px;
line-height: 1.2;
font-weight: 800;
color: #111827;
}

.tools-heading h2 span {
color: #635bff;
}

.tools-heading p {
margin: 15px auto 0;
font-size: 17px;
line-height: 1.7;
color: #667085;
}


/* ================================
TOOLS GRID
================================ */

.tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}


/* Tool Card */

.tool-card {
display: flex;
align-items: center;
gap: 18px;

background: #ffffff;
border: 1px solid #e8ecf4;
border-radius: 16px;

padding: 20px;

box-shadow: 0 5px 20px rgba(30, 41, 59, 0.05);

transition: all 0.25s ease;
}

.tool-card:hover {
transform: translateY(-4px);
border-color: #635bff;
box-shadow: 0 12px 30px rgba(99, 91, 255, 0.12);
}


/* Icons */

.tool-icon {
width: 58px;
height: 58px;

flex: 0 0 58px;

border-radius: 14px;

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

font-size: 18px;
font-weight: 800;

color: #ffffff;
}


/* Individual colors */

.tool-icon.meta {
background: linear-gradient(135deg, #1877f2, #0866ff);
}

.tool-icon.google {
background: linear-gradient(135deg, #4285f4, #34a853);
}

.tool-icon.analytics {
background: linear-gradient(135deg, #fbbc04, #f9ab00);
}

.tool-icon.search {
background: linear-gradient(135deg, #4285f4, #34a853);
}

.tool-icon.canva {
background: linear-gradient(135deg, #00c4cc, #7d2ae8);
}

.tool-icon.wordpress {
background: #21759b;
}

.tool-icon.chatgpt {
background: #111827;
}

.tool-icon.gemini {
background: linear-gradient(135deg, #4285f4, #8e44ad);
}


/* Text */

.tool-card h3 {
margin: 0 0 5px;

font-size: 17px;
font-weight: 750;

color: #111827;
}

.tool-card p {
margin: 0;

font-size: 13px;
line-height: 1.5;

color: #7b8494;
}


/* ================================
SYLLABUS BOX
================================ */

.syllabus-box {
margin-top: 35px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;

padding: 25px 28px;

border-radius: 18px;

background:
/* linear-gradient(
    135deg,
    #111827,
    #27245c
); */
linear-gradient(270deg, #ce1512, #ff6a3a, #ce1512);

box-shadow: 0 15px 35px rgba(17, 24, 39, 0.15);
}

.syllabus-content {
display: flex;
align-items: center;
gap: 16px;
}

.syllabus-icon {
width: 50px;
height: 50px;

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

background: rgba(255,255,255,0.12);

border-radius: 12px;

font-size: 24px;
}

.syllabus-content h3 {
margin: 0 0 5px;

color: #ffffff;

font-size: 18px;
}

.syllabus-content p {
margin: 0;

color: #c7c9d5;

font-size: 13px;
}


/* Button */

.syllabus-btn {
display: inline-flex;
align-items: center;
gap: 10px;

padding: 14px 22px;

border-radius: 10px;

background: #ffffff;

color: #111827;

text-decoration: none;

font-size: 14px;
font-weight: 750;

white-space: nowrap;

transition: 0.25s ease;
}

.syllabus-btn:hover {
transform: translateY(-2px);
background: #635bff;
color: #ffffff;
}

.syllabus-btn span {
font-size: 18px;
}


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

@media (max-width: 768px) {

.practical-tools-section {
padding: 30px 15px;
}

.tools-heading h2 {
font-size: 28px;
}

.tools-heading p {
font-size: 15px;
}

.tools-grid {
grid-template-columns: 1fr;
}

.tool-card {
padding: 16px;
}

.syllabus-box {
flex-direction: column;
align-items: flex-start;
}

.syllabus-btn {
width: 100%;
justify-content: center;
}

}

/* ==========================================
TEACHING EXPERIENCE / DEMO SECTION
========================================== */

.teaching-demo-section {
padding: 20px 20px;
background: #ffffff;
}

.teaching-demo-container {
max-width: 850px;
margin: 0 auto;
text-align: center;
}


/* Badge */

.demo-badge {
display: inline-flex;
align-items: center;

padding: 8px 16px;

border-radius: 50px;

background: #eef2ff;
color: #635bff;

font-size: 12px;
font-weight: 800;

letter-spacing: 1px;

margin-bottom: 18px;
}


/* Heading */

.demo-title {
margin: 0 auto;

max-width: 700px;

font-size: 38px;
line-height: 1.25;

font-weight: 800;

color: #111827;
}

.demo-title span {
display: block;
color: #635bff;
}


/* Subtitle */

.demo-subtitle {
margin: 18px 0 35px;

font-size: 20px;
font-weight: 700;

color: #374151;
}


/* Video Card */

.demo-video-card {
position: relative;

display: flex;
align-items: center;

gap: 20px;

padding: 25px;

text-align: left;

border-radius: 20px;

background:
/* linear-gradient(
    135deg,
    #111827,
    #27245c
); */
linear-gradient(270deg, #ce1512, #ff6a3a, #ce1512);

box-shadow:
0 20px 45px rgba(17, 24, 39, 0.16);
}


/* Play Icon */

.video-icon {
width: 65px;
height: 65px;

flex: 0 0 65px;

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

border-radius: 50%;

background: #ffffff;

color: #635bff;

font-size: 22px;

padding-left: 3px;

box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}


/* Content */

.video-content {
flex: 1;
}

.video-content h3 {
margin: 0 0 6px;

color: #ffffff;

font-size: 20px;
}

.video-content p {
margin: 0;

color: #c7c9d5;

font-size: 14px;

line-height: 1.5;
}


/* Button */

.demo-video-btn {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 13px 20px;

border-radius: 10px;

background: #ffffff;

color: #111827;

text-decoration: none;

font-size: 14px;
font-weight: 800;

white-space: nowrap;

transition: all 0.25s ease;
}

.demo-video-btn:hover {
background: #635bff;
color: #ffffff;

transform: translateY(-2px);
}

.demo-video-btn span {
font-size: 12px;
}


/* Note */

.demo-note {
margin-top: 22px;

font-size: 14px;

color: #6b7280;
}

.demo-note a {
color: #635bff;

font-weight: 700;

text-decoration: underline;
}


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

@media (max-width: 700px) {

.teaching-demo-section {
padding: 25px 15px;
}

.demo-title {
font-size: 28px;
}

.demo-subtitle {
font-size: 18px;
}

.demo-video-card {
flex-direction: column;
text-align: center;
padding: 25px 20px;
}

.video-content p {
font-size: 13px;
}

.demo-video-btn {
width: 100%;
justify-content: center;
}

}


/* ==========================================
PROGRAM INVESTMENT
========================================== */

.program-investment-section {
padding: 20px 20px;
background: #f8faff;
}

.investment-container {
max-width: 850px;
margin: 0 auto;
}


/* Heading */

.investment-heading {
text-align: center;
margin-bottom: 35px;
}

.investment-label {
display: inline-block;

padding: 7px 14px;

border-radius: 50px;

background: #eef2ff;
color: #635bff;

font-size: 12px;
font-weight: 800;

letter-spacing: 1.5px;

margin-bottom: 15px;
}

.investment-heading h2 {
margin: 0;

font-size: 38px;
line-height: 1.25;

font-weight: 800;

color: #111827;
}

.investment-heading h2 span {
color: #635bff;
}

.investment-heading p {
margin: 12px 0 0;

color: #6b7280;

font-size: 16px;
}


/* Main Card */

.investment-card {
background: #ffffff;

border: 1px solid #e5e7eb;

border-radius: 24px;

padding: 30px;

box-shadow:
0 20px 50px rgba(17, 24, 39, 0.10);
}


/* Total Fee */

.total-fee {
text-align: center;

padding-bottom: 25px;

border-bottom: 1px solid #edf0f5;
}

.fee-label {
display: block;

color: #6b7280;

font-size: 14px;

margin-bottom: 5px;
}

.total-fee strong {
font-size: 32px;

color: #111827;
}


/* Payment Plan */

.payment-plan {
display: flex;

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

gap: 18px;

margin-top: 25px;
}


/* Payment Boxes */

.payment-box {
flex: 1;

min-height: 145px;

display: flex;

flex-direction: column;

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

text-align: center;

padding: 20px;

border-radius: 18px;

border: 1px solid #e6e9f0;
}


/* Today */

.today-payment {
background: #f5f7ff;

border-color: #cfd2ff;
}


/* Job */

.job-payment {
background: #f7fbf8;

border-color: #ccebd8;
}


/* Badge */

.payment-badge {
display: inline-block;

padding: 5px 10px;

border-radius: 50px;

font-size: 10px;

font-weight: 800;

letter-spacing: .5px;

color: #ffffff;

background: #111827;

margin-bottom: 10px;
}


/* Amount */

.payment-amount {
font-size: 34px;

font-weight: 850;

color: #635bff;

line-height: 1.1;
}

.job-payment .payment-amount {
color: #16a34a;
}


/* Description */

.payment-box p {
margin: 8px 0 0;

color: #6b7280;

font-size: 13px;
}


/* Plus */

.payment-plus {
width: 35px;
height: 35px;

flex: 0 0 35px;

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

border-radius: 50%;

background: #eef2ff;

color: #635bff;

font-size: 22px;
font-weight: 800;
}


/* Highlight */

.investment-highlight {
margin-top: 25px;

padding: 15px 20px;

border-radius: 12px;

background: #111827;

color: #ffffff;

text-align: center;

font-size: 14px;

font-weight: 600;
}

.investment-highlight span {
display: inline-flex;

width: 22px;
height: 22px;

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

margin-right: 5px;

border-radius: 50%;

background: #22c55e;

color: #ffffff;

font-size: 12px;
}


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

@media (max-width: 650px) {

.program-investment-section {
padding: 25px 15px;
}

.investment-heading h2 {
font-size: 28px;
}

.investment-heading p {
font-size: 14px;
}

.investment-card {
padding: 20px 15px;
}

.payment-plan {
flex-direction: column;

gap: 12px;
}

.payment-box {
width: 100%;

min-height: 125px;
}

.payment-plus {
transform: rotate(90deg);
}

.total-fee strong {
font-size: 28px;
}

.payment-amount {
font-size: 30px;
}

}

/* ==========================================
HOW TO GET STARTED
========================================== */

.get-started-section {
padding: 1px 20px;
background: #f8faff;
}

.get-started-container {
max-width: 850px;
margin: 0 auto;
}


/* Heading */

.started-heading {
text-align: center;
margin-bottom: 40px;
}

.started-label {
display: inline-block;

padding: 7px 14px;

border-radius: 50px;

background: #eef2ff;
color: #635bff;

font-size: 12px;
font-weight: 800;

letter-spacing: 1.5px;

margin-bottom: 14px;
}

.started-heading h2 {
margin: 0;

color: #111827;

font-size: 38px;
font-weight: 800;
}

.started-heading p {
margin: 12px 0 0;

color: #6b7280;

font-size: 16px;
}


/* ==========================================
STEPS CARD
========================================== */

.started-card {
position: relative;

background: #ffffff;

border: 1px solid #e5e7eb;

border-radius: 22px;

padding: 30px;

box-shadow:
0 15px 40px rgba(17, 24, 39, 0.08);
}


/* Vertical line */

.started-card::before {
content: "";

position: absolute;

left: 55px;
top: 55px;
bottom: 55px;

width: 2px;

background: #e3e6ff;
}


/* Individual Step */

.started-step {
position: relative;

display: flex;

align-items: center;

gap: 20px;

padding: 15px 0;
}


/* Number */

.step-number {
position: relative;
z-index: 2;

width: 50px;
height: 50px;

flex: 0 0 50px;

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

border-radius: 50%;

background: #635bff;

color: #ffffff;

font-size: 17px;
font-weight: 800;

box-shadow:
0 5px 15px rgba(99, 91, 255, 0.25);
}


/* Step Content */

.step-content {
flex: 1;

padding: 12px 18px;

border-radius: 12px;

transition: 0.25s ease;
}

.step-content:hover {
background: #f7f8ff;
}

.step-content h3 {
margin: 0 0 5px;

color: #111827;

font-size: 16px;

font-weight: 750;
}

.step-content p {
margin: 0;

color: #6b7280;

font-size: 14px;

line-height: 1.5;
}


/* Important Step */

.important-step .step-number {
background: #111827;
}

.important-step .step-content {
background: #fff8e6;

border: 1px solid #ffe4a3;
}

.important-step .step-content h3 {
color: #111827;
}

.important-step .step-content p {
color: #7a5b00;
}


/* ==========================================
CAREER CALL CTA
========================================== */

.career-call-box {
margin-top: 30px;

display: flex;
align-items: center;

gap: 18px;

padding: 25px;

border-radius: 20px;

background:
/* linear-gradient(
    135deg,
    #111827,
    #27245c
); */
linear-gradient(270deg, #ce1512, #ff6a3a, #ce1512);

box-shadow:
0 20px 45px rgba(17, 24, 39, 0.15);
}


/* Icon */

.call-icon {
width: 55px;
height: 55px;

flex: 0 0 55px;

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

border-radius: 50%;

background: rgba(255,255,255,0.12);

font-size: 24px;
}


/* Content */

.call-content {
flex: 1;
}

.call-label {
display: block;

margin-bottom: 4px;

color: #aeb4ff;

font-size: 10px;
font-weight: 800;

letter-spacing: 1px;
}

.call-content h3 {
margin: 0;

color: #ffffff;

font-size: 20px;
}

.call-content p {
margin: 4px 0 0;

color: #c7c9d5;

font-size: 13px;
}


/* Button */

.career-call-btn {
display: inline-flex;
align-items: center;
gap: 10px;

padding: 14px 20px;

border-radius: 10px;

background: #ffffff;

color: #111827;

text-decoration: none;

font-size: 13px;

font-weight: 800;

white-space: nowrap;

transition: 0.25s ease;
}

.career-call-btn:hover {
background: #635bff;

color: #ffffff;

transform: translateY(-2px);
}

.career-call-btn span {
font-size: 18px;
}


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

@media (max-width: 700px) {

.get-started-section {
padding: 55px 15px;
}

.started-heading h2 {
font-size: 28px;
}

.started-heading p {
font-size: 14px;
}

.started-card {
padding: 20px 15px;
}

.started-card::before {
left: 40px;
}

.started-step {
gap: 12px;
}

.step-number {
width: 45px;
height: 45px;

flex-basis: 45px;

font-size: 15px;
}

.step-content {
padding: 10px 12px;
}

.step-content h3 {
font-size: 14px;
}

.step-content p {
font-size: 13px;
}

.career-call-box {
flex-direction: column;

text-align: center;

padding: 25px 20px;
}

.call-content {
width: 100%;
}

.career-call-btn {
width: 100%;

justify-content: center;
}

}


#na-reviews-section,
#na-reviews-section * {
box-sizing: border-box;
}

#na-reviews-section {
/*  --na-bg: #000000;
--na-card: #111111;
--na-gold: #f4c63d;
--na-gold-light: #ffe18a;
--na-text: #ffffff;
--na-muted: #bcbcbc; */

width: 100%;
margin: 0;
padding: 10px 0 10px;
background:
radial-gradient(circle at 50% 0%, rgba(244,198,61,.10), transparent 35%),
var(--na-bg);
color: var(--na-text);
font-family: Arial, Helvetica, sans-serif;
}

#na-reviews-section .na-review-wrap {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
}

#na-reviews-section .na-review-heading {
text-align: center;
margin-bottom: 42px;
}

#na-reviews-section .na-review-badge {
display: inline-block;
margin-bottom: 14px;
padding: 7px 18px;
border: 1px solid rgba(244,198,61,.6);
border-radius: 999px;
color: var(--na-gold);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}

#na-reviews-section .na-review-title {
margin: 0;
color: var(--na-gold);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.1;
font-weight: 700;
}

#na-reviews-section .na-review-subtitle {
max-width: 680px;
margin: 14px auto 0;
color: var(--na-muted);
font-size: 16px;
line-height: 1.6;
}

#na-reviews-section .na-review-line {
width: 90px;
height: 3px;
margin: 22px auto 0;
background: linear-gradient(90deg, transparent, var(--na-gold), transparent);
}

/* Desktop grid */
#na-reviews-section .na-review-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}

#na-reviews-section .na-review-card {
margin: 0;
padding: 7px;
background: linear-gradient(145deg, #292929, #0c0c0c);
border: 1px solid rgba(244,198,61,.28);
border-radius: 14px;
box-shadow: 0 15px 40px rgba(0,0,0,.45);
overflow: hidden;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

#na-reviews-section .na-review-card:hover {
transform: translateY(-6px);
border-color: rgba(244,198,61,.8);
box-shadow: 0 22px 50px rgba(0,0,0,.65), 0 0 22px rgba(244,198,61,.08);
}

#na-reviews-section .na-review-card a {
display: block;
line-height: 0;
background: #111;
border-radius: 9px;
overflow: hidden;
}

#na-reviews-section .na-review-card img {
width: 100%;
height: 360px;
display: block;
object-fit: cover;
object-position: center top;
transition: transform .35s ease;
}

#na-reviews-section .na-review-card:hover img {
transform: scale(1.025);
}

/* Bottom CTA */
#na-reviews-section .na-review-cta {
text-align: center;
margin-top: 44px;
}

#na-reviews-section .na-review-cta-text {
margin: 0 0 18px;
color: #ddd;
font-size: 17px;
font-weight: 700;
}

#na-reviews-section .na-review-button {
display: inline-block;
padding: 14px 28px;
border: 2px solid #ffe7a0;
border-radius: 11px;
background: linear-gradient(180deg, #ffd76b, #efb642);
color: #080808;
font-size: 16px;
font-weight: 900;
text-decoration: none;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
transition: transform .2s ease, filter .2s ease;
}

#na-reviews-section .na-review-button:hover {
color: #000;
transform: translateY(-2px);
filter: brightness(1.06);
}

/* Tablet */
@media (max-width: 1050px) {
#na-reviews-section .na-review-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

#na-reviews-section .na-review-card img {
height: 390px;
}
}

/* Mobile: horizontal swipe carousel */
@media (max-width: 700px) {
#na-reviews-section {
padding: 50px 0 60px;
}

#na-reviews-section .na-review-wrap {
width: calc(100% - 24px);
}

#na-reviews-section .na-review-heading {
margin-bottom: 28px;
}

#na-reviews-section .na-review-grid {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 5px 4px 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}

#na-reviews-section .na-review-grid::-webkit-scrollbar {
display: none;
}

#na-reviews-section .na-review-card {
flex: 0 0 min(82vw, 330px);
scroll-snap-align: center;
}

#na-reviews-section .na-review-card img {
height: 440px;
}

#na-reviews-section .na-review-subtitle {
font-size: 14px;
}
}



.tools-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
max-width: 1000px;
margin: 0 auto;
}

.tool-card {
display: flex;
align-items: center;
gap: 18px;

padding: 20px;

background: #111;
border: 1px solid rgba(244, 198, 61, 0.25);
border-radius: 14px;

transition: all 0.3s ease;
}

.tool-card:hover {
transform: translateY(-4px);
border-color: #f4c63d;
box-shadow: 0 10px 30px rgba(244, 198, 61, 0.12);
}

.tool-icon {
width: 65px;
height: 65px;
min-width: 65px;

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

background: #fff;
border-radius: 14px;
padding: 12px;
}

.tool-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

.tool-card h3 {
margin: 0 0 7px;
color: #f4c63d;
font-size: 18px;
font-weight: 700;
}

.tool-card p {
margin: 0;
color: #bdbdbd;
font-size: 14px;
line-height: 1.5;
}

/* Mobile */
@media (max-width: 767px) {

.tools-grid {
grid-template-columns: 1fr;
gap: 14px;
}

.tool-card {
padding: 16px;
gap: 14px;
}

.tool-icon {
width: 55px;
height: 55px;
min-width: 55px;
padding: 10px;
}

.tool-card h3 {
font-size: 16px;
}

.tool-card p {
font-size: 13px;
}
}