﻿
    <link rel="preconnect" href="https://fonts.googleapis.com" >
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap" rel="stylesheet" >

    <style >
    /* ── Reset & Base ──────────────────────────── */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --navy: #0C2340;
        --navy-mid: #1A3D6D;
        --navy-soft: #2B5FA8;
        --green: #0E9157;
        --green-light: #D1F5E3;
        --green-dark: #0A6B40;
        --amber: #F59E0B;
        --red-soft: #FEF2F2;
        --red: #DC2626;
        --chalk: #FFFFFF;
        --off-white: #F7F9FC;
        --border: #E2E8F0;
        --text-1: #0C2340;
        --text-2: #475569;
        --text-3: #94A3B8;
        --r-sm: 10px;
        --r-md: 16px;
        --r-lg: 24px;
        --r-xl: 36px;
        --shadow-card: 0 2px 12px rgba(12,35,64,.07), 0 8px 32px rgba(12,35,64,.05);
        --shadow-hover: 0 12px 48px rgba(12,35,64,.14);
    }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--off-white);
        color: var(--text-1);
        line-height: 1.6;
        overflow-x: hidden;
    }

    h1, h2, h3, h4 {
        font-family: 'Syne', sans-serif;
        line-height: 1.15;
        letter-spacing: -.02em;
    }
    /* ── Layout Helpers ──────────────────────────── */
    .wrap {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .wrap-narrow {
        max-width: 880px;
        margin: 0 auto;
        padding: 0 40px;
    }

    .section {
        padding: 110px 0;
    }

    .section-sm {
        padding: 70px 0;
    }

    .grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: center;
    }

    .grid-3 {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 28px;
    }

    .grid-4 {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 24px;
    }

    .flex-center {
        display: flex;
        align-items: center;
    }

    .flex-col {
        flex-direction: column;
    }

    .gap-sm {
        gap: 12px;
    }

    .gap-md {
        gap: 24px;
    }

    .t-center {
        text-align: center;
    }
    /* ── Badges / Tags ──────────────────────────── */
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'DM Sans', sans-serif;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--navy-mid);
        background: #E8EFF8;
        border: 1px solid #C5D5EC;
        border-radius: 50px;
        padding: 5px 14px;
        margin-bottom: 20px;
    }

        .eyebrow.green {
            color: var(--green-dark);
            background: var(--green-light);
            border-color: #9FE5C3;
        }

        .eyebrow.amber {
            color: #92400E;
            background: #FFFBEB;
            border-color: #FDE68A;
        }
    /* ── Buttons ──────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 15px 30px;
        border-radius: var(--r-md);
        font-family: 'DM Sans', sans-serif;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        transition: all .2s ease;
        border: 2px solid transparent;
        cursor: pointer;
        white-space: nowrap;
    }

    .btn-navy {
        background: var(--navy);
        color: #fff;
    }

        .btn-navy:hover {
            background: var(--navy-mid);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(12,35,64,.25);
        }

    .btn-green {
        background: var(--green);
        color: #fff;
    }

        .btn-green:hover {
            background: var(--green-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(14,145,87,.3);
        }

    .btn-ghost {
        background: transparent;
        border-color: var(--border);
        color: var(--text-1);
    }

        .btn-ghost:hover {
            border-color: var(--navy-mid);
            background: #EEF3FA;
            transform: translateY(-2px);
        }

    .btn-ghost-white {
        background: transparent;
        border-color: rgba(255,255,255,.35);
        color: #fff;
    }

        .btn-ghost-white:hover {
            background: rgba(255,255,255,.12);
            border-color: rgba(255,255,255,.6);
        }

    .btn-lg {
        padding: 17px 38px;
        font-size: 1.05rem;
    }
    /* ── Cards ──────────────────────────── */
    .card {
        background: var(--chalk);
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        padding: 32px;
        box-shadow: var(--shadow-card);
        transition: box-shadow .25s ease, transform .25s ease;
    }

        .card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px);
        }

    .card-accent {
        border-top: 4px solid var(--green);
    }

    .card-navy {
        background: var(--navy);
        color: white;
        border-color: var(--navy-mid);
    }
    /* ── HERO ──────────────────────────── */
    .hero {
        padding: 80px 0 100px;
        background: linear-gradient(165deg, #EBF2FF 0%, #F7F9FC 55%, #E6F7EE 100%);
        position: relative;
        overflow: hidden;
    }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 8% 50%, rgba(43,95,168,.08) 0%, transparent 50%), radial-gradient(circle at 92% 20%, rgba(14,145,87,.07) 0%, transparent 45%);
            pointer-events: none;
        }
        /* Grid pattern overlay */
        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(12,35,64,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(12,35,64,.04) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }

    .hero-inner {
        position: relative;
        z-index: 1;
    }

    .hero-title {
        font-size: clamp(2.6rem, 5.5vw, 4.2rem);
        color: var(--navy);
        max-width: 680px;
    }

        .hero-title .highlight {
            color: var(--green);
            position: relative;
            display: inline-block;
        }

            .hero-title .highlight::after {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, var(--green), #3ED594);
                border-radius: 4px;
            }

    .hero-sub {
        font-size: 1.15rem;
        color: var(--text-2);
        max-width: 560px;
        margin: 24px 0 36px;
        line-height: 1.7;
    }

    .hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-bottom: 48px;
    }

    .trust-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        align-items: center;
        padding-top: 28px;
        border-top: 1px solid rgba(12,35,64,.1);
    }

    .trust-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .88rem;
        color: var(--text-2);
        font-weight: 500;
    }

        .trust-item i {
            color: var(--green);
        }
    /* Dashboard mockup */
    .hero-dashboard {
        background: #fff;
        border-radius: var(--r-xl);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-hover);
        overflow: hidden;
        position: relative;
    }

    .db-topbar {
        background: var(--navy);
        padding: 14px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .db-topbar-title {
        font-family: 'Syne', sans-serif;
        color: #fff;
        font-size: .95rem;
        font-weight: 700;
    }

    .db-live {
        background: var(--green);
        color: #fff;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .08em;
        padding: 3px 10px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .db-live::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #fff;
            animation: blink 1.4s ease infinite;
        }

    @@keyframes blink {
        0%, 100% {
            opacity: 1
        }

        50% {
            opacity: .3
        }
    }

    .db-body {
        padding: 20px;
    }

    .trainee-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
    }

        .trainee-row:last-of-type {
            border-bottom: none;
        }

    .t-avatar {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: linear-gradient(135deg, #E8EFF8, #C5D5EC);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        color: var(--navy-mid);
        font-size: .9rem;
    }

    .t-name {
        font-weight: 600;
        font-size: .95rem;
        color: var(--text-1);
    }

    .t-role {
        font-size: .78rem;
        color: var(--text-3);
    }

    .score-pair {
        display: flex;
        gap: 18px;
        text-align: right;
    }

    .score-col .lbl {
        font-size: .65rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-3);
    }

    .score-col .val {
        font-family: 'Syne', sans-serif;
        font-size: 1rem;
        font-weight: 700;
    }

    .val-ok {
        color: var(--green-dark);
    }

    .val-bad {
        color: var(--red);
    }

    .danger-alert {
        background: var(--red-soft);
        border-left: 3px solid var(--red);
        border-radius: var(--r-sm);
        padding: 12px 14px;
        margin: 8px 0;
        font-size: .82rem;
        color: #7F1D1D;
    }

        .danger-alert strong {
            display: block;
            margin-bottom: 4px;
        }

    .readiness-bar {
        margin-top: 18px;
    }

    .readiness-lbl {
        display: flex;
        justify-content: space-between;
        font-size: .8rem;
        color: var(--text-2);
        margin-bottom: 6px;
    }

    .bar-track {
        height: 8px;
        background: var(--border);
        border-radius: 50px;
        overflow: hidden;
    }

    .bar-fill {
        height: 100%;
        width: 72%;
        background: linear-gradient(90deg, var(--navy-mid), var(--green));
        border-radius: 50px;
    }

    .db-footer {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        font-size: .8rem;
        color: var(--text-2);
    }

    .badge-risk-sm {
        background: var(--red-soft);
        color: var(--red);
        border: 1px solid #FECACA;
        border-radius: 50px;
        padding: 3px 10px;
        font-size: .72rem;
        font-weight: 700;
    }
    /* ── CONTENT TYPES ──────────────────────────── */
    .content-types-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 24px;
        margin-top: 60px;
    }

    .ct-card {
        background: var(--chalk);
        border: 1px solid var(--border);
        border-radius: var(--r-lg);
        padding: 36px 28px;
        box-shadow: var(--shadow-card);
        transition: all .25s ease;
        position: relative;
        overflow: hidden;
    }

        .ct-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .ct-card.video::before {
            background: linear-gradient(90deg, #3B82F6, #60A5FA);
        }

        .ct-card.pdf::before {
            background: linear-gradient(90deg, var(--green), #3ED594);
        }

        .ct-card.youtube::before {
            background: linear-gradient(90deg, #F59E0B, #FCD34D);
        }

        .ct-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-6px);
        }

    .ct-icon {
        width: 56px;
        height: 56px;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

        .ct-icon.video {
            background: #DBEAFE;
            color: #2563EB;
        }

        .ct-icon.pdf {
            background: var(--green-light);
            color: var(--green-dark);
        }

        .ct-icon.youtube {
            background: #FFFBEB;
            color: #D97706;
        }

    .ct-card h3 {
        font-size: 1.25rem;
        margin-bottom: 10px;
        color: var(--navy);
    }

    .ct-card p {
        font-size: .92rem;
        color: var(--text-2);
        line-height: 1.65;
        margin-bottom: 18px;
    }

    .ct-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: .75rem;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 50px;
        border: 1px solid;
        margin: 3px 3px 0 0;
    }

        .ct-tag.v {
            color: #2563EB;
            background: #DBEAFE;
            border-color: #BFDBFE;
        }

        .ct-tag.g {
            color: var(--green-dark);
            background: var(--green-light);
            border-color: #9FE5C3;
        }

        .ct-tag.a {
            color: #92400E;
            background: #FFFBEB;
            border-color: #FDE68A;
        }
    /* ── PDF FEATURE SPOTLIGHT ──────────────────── */
    .pdf-spotlight {
        background: linear-gradient(145deg, #F0FAF5 0%, #E8F7EF 100%);
        border: 2px solid #B0E8CB;
        border-radius: var(--r-xl);
        padding: 60px;
        position: relative;
        overflow: hidden;
    }

        .pdf-spotlight::before {
            content: 'PDF';
            position: absolute;
            right: -20px;
            top: -20px;
            font-family: 'Syne', sans-serif;
            font-size: 9rem;
            font-weight: 800;
            color: rgba(14,145,87,.06);
            line-height: 1;
            pointer-events: none;
        }

        .pdf-spotlight h2 {
            color: var(--navy);
            font-size: clamp(1.8rem,3vw,2.6rem);
            max-width: 540px;
            margin-bottom: 16px;
        }

        .pdf-spotlight p {
            color: var(--text-2);
            font-size: 1.05rem;
            max-width: 520px;
            line-height: 1.7;
            margin-bottom: 32px;
        }

    .pdf-flow {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-top: 36px;
    }

    .flow-step {
        background: #fff;
        border: 1px solid #B0E8CB;
        border-radius: var(--r-md);
        padding: 14px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 2px 8px rgba(14,145,87,.08);
    }

    .flow-step-num {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--green);
        color: #fff;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: .85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .flow-step span {
        font-size: .88rem;
        font-weight: 600;
        color: var(--navy);
    }

    .flow-arrow {
        color: #9FE5C3;
        font-size: 1.2rem;
    }
    /* PDF mockup */
    .pdf-mockup {
        background: #fff;
        border-radius: var(--r-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-hover);
        overflow: hidden;
    }

    .pdf-topbar {
        background: var(--green);
        padding: 14px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .pdf-topbar-icon {
        width: 34px;
        height: 34px;
        background: rgba(255,255,255,.2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1rem;
    }

    .pdf-topbar-title {
        font-family: 'Syne', sans-serif;
        color: #fff;
        font-size: .9rem;
        font-weight: 700;
    }

    .pdf-topbar-sub {
        font-size: .75rem;
        color: rgba(255,255,255,.8);
    }

    .pdf-page-preview {
        padding: 20px;
    }

    .pdf-page-line {
        height: 10px;
        background: var(--border);
        border-radius: 4px;
        margin-bottom: 8px;
    }

        .pdf-page-line.short {
            width: 60%;
        }

        .pdf-page-line.med {
            width: 85%;
        }

    .pdf-question-card {
        background: #F0FAF5;
        border: 2px solid var(--green);
        border-radius: var(--r-md);
        padding: 18px;
        margin: 16px 0;
    }

    .pdf-q-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: .8rem;
        font-weight: 700;
        color: var(--green-dark);
    }

    .pdf-q-text {
        font-size: .9rem;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 14px;
    }

    .pdf-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 8px;
        margin-bottom: 6px;
        font-size: .84rem;
        color: var(--text-1);
        border: 1px solid var(--border);
        background: #fff;
        cursor: pointer;
    }

        .pdf-option.selected {
            border-color: var(--green);
            background: var(--green-light);
            font-weight: 600;
        }

    .confidence-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
        font-size: .78rem;
        color: var(--text-2);
        font-weight: 600;
    }

    .conf-dot {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid var(--border);
        background: #fff;
        cursor: pointer;
        transition: .15s;
    }

        .conf-dot.active {
            background: var(--green);
            border-color: var(--green);
        }
    /* ── HOW IT WORKS ──────────────────────────── */
    .steps-grid {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 0;
        position: relative;
        margin-top: 64px;
    }

        .steps-grid::before {
            content: '';
            position: absolute;
            top: 36px;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg, var(--navy-soft), var(--green));
            z-index: 0;
        }

    .step-item {
        text-align: center;
        padding: 0 12px;
        position: relative;
        z-index: 1;
    }

    .step-circle {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: var(--chalk);
        border: 3px solid var(--border);
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Syne', sans-serif;
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--navy-mid);
        transition: all .25s ease;
        box-shadow: 0 4px 16px rgba(12,35,64,.1);
    }

    .step-item:hover .step-circle {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy);
        transform: scale(1.1);
    }

    .step-item h4 {
        font-size: 1rem;
        color: var(--navy);
        margin-bottom: 8px;
    }

    .step-item p {
        font-size: .82rem;
        color: var(--text-2);
        line-height: 1.5;
    }
    /* ── COMPARISON ──────────────────────────── */
    .compare-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: var(--r-lg);
        overflow: hidden;
        box-shadow: var(--shadow-card);
        margin-top: 48px;
    }

        .compare-table th {
            padding: 22px 24px;
            text-align: left;
            font-family: 'Syne', sans-serif;
            font-size: 1rem;
        }

            .compare-table th:first-child {
                background: var(--off-white);
                color: var(--text-2);
                font-size: .85rem;
            }

            .compare-table th:nth-child(2) {
                background: #FEF9F9;
                color: #B91C1C;
            }

            .compare-table th:nth-child(3) {
                background: var(--navy);
                color: #fff;
            }

        .compare-table td {
            padding: 18px 24px;
            font-size: .92rem;
            border-top: 1px solid var(--border);
        }

            .compare-table td:first-child {
                font-weight: 600;
                color: var(--text-1);
                background: var(--chalk);
            }

            .compare-table td:nth-child(2) {
                background: #FFFAFA;
                color: var(--text-2);
            }

            .compare-table td:nth-child(3) {
                background: #F0F6FF;
                font-weight: 600;
                color: var(--navy);
            }

        .compare-table .check-green {
            color: var(--green-dark);
        }

        .compare-table .check-grey {
            color: var(--text-3);
        }

        .compare-table .x-red {
            color: var(--red);
        }
    /* ── INTELLIGENCE LEVELS ──────────────────────────── */
    .intel-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 24px;
        margin-top: 56px;
    }

    .intel-card {
        border-radius: var(--r-lg);
        padding: 36px 30px;
        box-shadow: var(--shadow-card);
        border: 1px solid var(--border);
        background: var(--chalk);
        position: relative;
        overflow: hidden;
    }

        .intel-card::after {
            content: '';
            position: absolute;
            bottom: -20px;
            right: -20px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(43,95,168,.07) 0%, transparent 70%);
        }

    .intel-num {
        font-family: 'Syne', sans-serif;
        font-size: 3.5rem;
        font-weight: 800;
        color: #E8EFF8;
        line-height: 1;
        margin-bottom: 12px;
    }

    .intel-icon-wrap {
        width: 52px;
        height: 52px;
        border-radius: var(--r-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        margin-bottom: 18px;
    }

    .intel-card:nth-child(1) .intel-icon-wrap {
        background: #EEF3FA;
        color: var(--navy-mid);
    }

    .intel-card:nth-child(2) .intel-icon-wrap {
        background: var(--green-light);
        color: var(--green-dark);
    }

    .intel-card:nth-child(3) .intel-icon-wrap {
        background: #FFFBEB;
        color: #92400E;
    }

    .intel-card:nth-child(2) {
        border-top: 4px solid var(--green);
    }

    .intel-card h3 {
        font-size: 1.3rem;
        color: var(--navy);
        margin-bottom: 14px;
    }

    .intel-list {
        list-style: none;
    }

        .intel-list li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 9px 0;
            border-bottom: 1px solid var(--border);
            font-size: .9rem;
            color: var(--text-2);
        }

            .intel-list li:last-child {
                border-bottom: none;
            }

            .intel-list li::before {
                content: '✓';
                color: var(--green);
                font-weight: 700;
                margin-top: 1px;
            }
    /* ── PRICING ──────────────────────────── */
    .pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 28px;
        max-width: 820px;
        margin: 56px auto 0;
    }

    .pricing-card {
        border-radius: var(--r-xl);
        padding: 40px 36px;
        border: 2px solid var(--border);
        background: var(--chalk);
        box-shadow: var(--shadow-card);
    }

        .pricing-card.featured {
            background: var(--navy);
            border-color: var(--navy);
            box-shadow: 0 24px 64px rgba(12,35,64,.25);
        }

            .pricing-card.featured * {
                color: rgba(255,255,255,.9);
            }

            .pricing-card.featured h3 {
                color: #fff;
            }

    .plan-label {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: 8px;
        display: block;
    }

    .featured .plan-label {
        color: rgba(255,255,255,.5);
    }

    .plan-name {
        font-family: 'Syne', sans-serif;
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 6px;
    }

    .featured .plan-name {
        color: #fff;
    }

    .plan-price {
        font-family: 'Syne', sans-serif;
        font-size: 2.8rem;
        font-weight: 800;
        color: var(--navy);
        line-height: 1.1;
        margin: 14px 0 8px;
    }

    .featured .plan-price {
        color: #fff;
    }

    .plan-price sup {
        font-size: 1.4rem;
        vertical-align: super;
    }

    .plan-price sub {
        font-size: .9rem;
        font-weight: 400;
        opacity: .6;
    }

    .plan-desc {
        font-size: .9rem;
        color: var(--text-2);
        margin-bottom: 28px;
        line-height: 1.6;
    }

    .featured .plan-desc {
        color: rgba(255,255,255,.65);
    }

    .plan-features {
        list-style: none;
        margin-bottom: 32px;
    }

        .plan-features li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 9px 0;
            font-size: .9rem;
            color: var(--text-2);
            border-bottom: 1px solid var(--border);
        }

            .plan-features li:last-child {
                border-bottom: none;
            }

    .featured .plan-features li {
        color: rgba(255,255,255,.75);
        border-bottom-color: rgba(255,255,255,.1);
    }

    .plan-features li i {
        color: var(--green);
        margin-top: 2px;
        flex-shrink: 0;
    }

    .featured .plan-features li i {
        color: #3ED594;
    }
    /* ── QUOTE BANNER ──────────────────────────── */
    .quote-banner {
        background: var(--navy);
        border-radius: var(--r-xl);
        padding: 60px 64px;
        margin-top: 80px;
        position: relative;
        overflow: hidden;
    }

        .quote-banner::before {
            content: '"';
            position: absolute;
            top: -20px;
            left: 30px;
            font-family: 'Syne', sans-serif;
            font-size: 14rem;
            font-weight: 900;
            color: rgba(255,255,255,.05);
            line-height: 1;
        }

        .quote-banner p {
            font-size: 1.4rem;
            line-height: 1.6;
            color: rgba(255,255,255,.9);
            max-width: 780px;
            position: relative;
            z-index: 1;
        }

        .quote-banner cite {
            font-style: normal;
            font-size: 1rem;
            color: var(--green);
            font-weight: 600;
            display: block;
            margin-top: 20px;
        }
    /* ── CTA SECTION ──────────────────────────── */
    .final-cta {
        background: linear-gradient(145deg, #0C2340 0%, #1A3D6D 60%, #0A6B40 100%);
        padding: 110px 0;
        text-align: center;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        position: relative;
        overflow: hidden;
    }

        .final-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 50%, rgba(62,213,148,.12) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(43,95,168,.15) 0%, transparent 50%);
        }

    .final-cta-inner {
        position: relative;
        z-index: 1;
    }

    .final-cta h2 {
        font-size: clamp(2rem,4vw,3.2rem);
        color: #fff;
        margin-bottom: 20px;
    }

    .final-cta p {
        font-size: 1.1rem;
        color: rgba(255,255,255,.7);
        max-width: 580px;
        margin: 0 auto 40px;
    }

    .cta-btns {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    /* ── JOIN GROUP MODAL ──────────────────────────── */
    #joinGroupModal .modal-header {
        background: var(--navy);
    }

    #joinGroupModal .modal-title {
        color: #fff;
        font-family: 'Syne', sans-serif;
    }

    #joinGroupModal .btn-close {
        filter: brightness(0) invert(1);
    }
    /* ── Animations ──────────────────────────── */
    .fade-up {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s ease, transform .6s ease;
    }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

    .fade-up-d1 {
        transition-delay: .1s;
    }

    .fade-up-d2 {
        transition-delay: .2s;
    }

    .fade-up-d3 {
        transition-delay: .3s;
    }

    .fade-up-d4 {
        transition-delay: .4s;
    }
    /* ── Responsive ──────────────────────────── */
    @@media (max-width: 1024px) {
        .grid-2, .content-types-grid, .intel-grid, .grid-3 {
            grid-template-columns: 1fr 1fr;
        }

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

            .steps-grid::before {
                display: none;
            }
    }

    @@media (max-width: 768px) {
        .wrap, .wrap-narrow {
            padding: 0 20px;
        }

        .section {
            padding: 70px 0;
        }

        .grid-2, .content-types-grid, .intel-grid, .grid-3, .pricing-grid {
            grid-template-columns: 1fr;
        }

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

        .pdf-spotlight {
            padding: 36px 28px;
        }

        .quote-banner {
            padding: 40px 32px;
        }

        .hero {
            padding: 60px 0 70px;
        }

        .hero-title {
            font-size: 2.4rem;
        }
    }

