/* ───────────────────────────────────────────────
       DESIGN SYSTEM — CATKing Brand Reference v3 (April 2026)
       Body:    DM Sans (landing) — 400 / 500 / 700 / 800 / 900
       Italic:  Cormorant Garamond italic 500 — always orange
       Display: Georgia serif (numerals / stats / scorecard)

       Palette spine:
       · Primary  — CATKing Amber #E8951F · Amber Dark #D17F0F · Amber Light #FCEAD0
       · Accent   — Tertiary Blue #5B9BD5 (sparingly: data highlights, verification, video accents)
       · Ground   — Single dark #1A1A2E · Soft border #2A2A40
       · Surface  — Cream #FAFAF7 · White #FFFFFF
       ─────────────────────────────────────────────── */

:root {
    /* Primary · Brand — Yellow / Amber (was Orange) */
    --orange: #E8951F;          /* Warm amber-yellow — main brand accent */
    --orange-deep: #D17F0F;     /* Deeper yellow for hover & contrast */
    --orange-pale: #FCEAD0;     /* Pale yellow tint for soft fills */

    /* Secondary · Light Blue (used sparingly, for accents) */
    --blue: #2385F4;            /* Vivid blue — verified badges, info pills, focus rings */
    --blue-deep: #1A6FCC;       /* Hover state for vivid blue */
    --blue-soft: #5B9BD5;       /* Gentle companion blue — secondary buttons */
    --blue-pale: #DCEEFA;       /* Soft blue background tint */

    /* Foundation · Navy (was near-black ink) — main dark surfaces */
    --navy: #1A1A2E;            /* Brand navy — single dark color across all dark sections */
    --navy-deep: #1A1A2E;       /* Same — keeps tonal consistency */
    --navy-soft: #2A2A40;       /* Lighter navy — borders, dividers (subtle) */

    --ink: #1A1A2E;             /* Same dark — primary dark surface, body copy */
    --ink-soft: #1A1A2E;        /* Same — no second dark tone */
    --slate: #5F6B78;
    --slate-soft: #95A0AC;

    --line: #E1E5EB;
    --line-soft: #EEF1F5;

    /* Surfaces */
    --paper: #FAFAF7;           /* Cream — primary light section ground */
    --paper-warm: #FCEAD0;      /* Soft yellow — warm fills (matches yellow-pale) */
    --paper-cool: #F0F6FC;      /* Cool off-white tinted blue — alt sections */
    --white: #FFFFFF;

    --red: #B23A2C;

    /* Display & italic stacks */
    --serif: Georgia, "Times New Roman", serif;
    --italic: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip !important;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--white);
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    width: 100%;
    overflow-x: clip !important;
}

h1, h2, h3, h4, h5 {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.6px;
    line-height: 1.15;
}

/* Italic accents (within headings) — signature v3 type move */
h1 em, h2 em, h3 em, .accent-italic {
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    color: var(--orange);
    letter-spacing: -1px;
    font-size: 1.18em;
}

.quote, blockquote, .italic-claim {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.section { padding: 64px 0; }
.section-tight { padding: 44px 0; }

/* Background image conversion utility */
.section-bg-img {
    /*position: absolute;*/
    top: 0;
    left: 0;
    width: 100%;
    /*height: 100%;*/
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* ─── ALTERNATING THEME UTILITIES ───
   Apply .theme-dark or .theme-light on each <section> for strict
   alternation across the page. The dark theme paints on var(--ink),
   the light theme on var(--paper). All section-head text colors,
   eyebrows, sub-paragraphs and inline cards adapt automatically. */
.theme-dark {
    background: var(--ink) !important;
    color: var(--white);
    position: relative;
}
.theme-dark .section-title { color: var(--white); }
.theme-dark .section-sub { color: #BFBAB2; }
.theme-dark .eyebrow { color: var(--orange); }
.theme-light {
    background: var(--paper) !important;
    color: var(--ink-soft);
}
.theme-light .section-title { color: var(--ink); }
.theme-light .section-sub { color: var(--slate-soft); }
.theme-light .eyebrow { color: var(--orange-deep); }

/* ─── DARK-THEME CARD OVERRIDES ───
   For sections that were previously light but are now flipped to dark. */
.theme-dark .review-card,
.theme-dark .story-card,
.theme-dark .exam-card,
.theme-dark .price-card,
.theme-dark .faculty-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
    color: var(--white);
}
.theme-dark .review-card:hover,
.theme-dark .story-card:hover,
.theme-dark .exam-card:hover,
.theme-dark .price-card:hover,
.theme-dark .faculty-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(232,149,31,0.5);
}
.theme-dark .review-text,
.theme-dark .story-quote,
.theme-dark .exam-desc,
.theme-dark .faculty-cred { color: #BFBAB2; }
.theme-dark .review-name,
.theme-dark .story-name,
.theme-dark .exam-title,
.theme-dark .price-name,
.theme-dark .faculty-cred strong { color: var(--white); }
.theme-dark .story-sections {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.theme-dark .story-sec { border-color: rgba(255,255,255,0.08); }
.theme-dark .story-sec-lbl { color: #9C988F; }
.theme-dark .story-sec-val { color: var(--white); }
.theme-dark .story-btn {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}
.theme-dark .story-card:hover .story-btn {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
}
.theme-dark .review-college { color: var(--orange); }
.theme-dark .review-meta { color: #8E8A82; }
.theme-dark .exam-pill {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #DCD7CE;
}
.theme-dark .exam-stat { border-top-color: rgba(255,255,255,0.1); }
.theme-dark .exam-link {
    background: var(--orange);
    color: var(--ink);
}
.theme-dark .exam-link:hover {
    background: var(--white);
    color: var(--ink);
}

/* ─── LIGHT-THEME OVERRIDES ───
   For sections that were dark but are now light. */
.theme-light.how-section { background: var(--paper) !important; color: var(--ink-soft); }
.theme-light.how-section::before,
.theme-light.how-section::after { display: none; }
.theme-light .how-step {
    background: var(--white);
    border-color: var(--line);
}
.theme-light .how-step:hover {
    background: var(--white);
    border-color: var(--orange);
    box-shadow: 0 18px 38px rgba(232,149,31,0.16);
}
.theme-light .how-title { color: var(--ink); }
.theme-light .how-desc { color: var(--slate); }
.theme-light .how-time { border-top-color: var(--line); color: var(--orange-deep); }
.theme-light .how-step-icon { color: var(--slate-soft); }
.theme-light .how-cta-text { color: var(--slate); }

.theme-light.secrets-section { background: var(--paper) !important; color: var(--ink-soft); }
.theme-light.secrets-section::before { opacity: 0.4; }
.theme-light .secrets-arrow {
    background: var(--white);
    border-color: var(--line);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.theme-light .secrets-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
}
.theme-light .secrets-press { border-top-color: var(--line); }
.theme-light .secrets-press-label { color: var(--slate-soft); }
.theme-light .secrets-press-logo { color: var(--slate); }

.theme-light.media-section { background: var(--paper) !important; color: var(--ink-soft); }
.theme-light .media-col {
    background: var(--white);
    border-color: var(--line);
}
.theme-light .media-col-head h3 { color: var(--ink); }
.theme-light .podcast-card {
    background: var(--white);
    border-color: var(--line);
}
.theme-light .podcast-card:hover {
    border-color: var(--orange);
    box-shadow: 0 12px 30px rgba(232,149,31,0.15);
}
.theme-light .podcast-title { color: var(--ink); }
.theme-light .podcast-caption { color: var(--slate); }
.theme-light .podcast-tag { background: var(--orange-pale); color: var(--orange-deep); }
.theme-light .blog-list-head h4 { color: var(--ink); }
.theme-light .blog-scroller {
    background: var(--paper-warm);
    border-color: var(--line);
}
.theme-light .blog-card:hover { background: var(--orange-pale); }
.theme-light .blog-title { color: var(--ink); }
.theme-light .blog-meta { color: var(--slate-soft); }
.theme-light .blog-meta .dot { background: var(--slate-soft); }
.theme-light .event-thumb { border-color: var(--line); }

/* Belief in dark theme — flip the left panel text */
.theme-dark.belief-section { background: var(--ink) !important; }
.theme-dark .belief-left .section-title { color: var(--white); }
.theme-dark .belief-para { color: #BFBAB2; }
.theme-dark .belief-para strong { color: var(--white); }
.theme-dark .belief-tile {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.theme-dark .belief-tile:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(232,149,31,0.45);
}
.theme-dark .belief-tile-title { color: var(--white); }
.theme-dark .belief-tile-desc { color: #BFBAB2; }

/* Pricing in dark theme */
.theme-dark.pricing-section { background: var(--ink) !important; }
.theme-dark .price-tier { color: var(--orange); }
.theme-dark .price-amount { color: var(--white); }
.theme-dark .price-amount-strike { color: #8E8A82; }
.theme-dark .price-bullet { color: #BFBAB2; }
.theme-dark .price-bullet::before { color: var(--orange); }
.theme-dark .price-card.featured {
    background: linear-gradient(160deg, rgba(232,149,31,0.16) 0%, rgba(255,255,255,0.04) 100%);
    border-color: var(--orange);
}
.theme-dark .price-card.featured .price-name { color: var(--white); }

/* Authority in dark theme */
.theme-dark.authority-section { background: var(--ink) !important; }
.theme-dark .founder-block {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.theme-dark .founder-text h3 { color: var(--white); }
.theme-dark .founder-creds { color: #BFBAB2; }
.theme-dark .founder-creds strong { color: var(--white); }
.theme-dark .founder-quote { color: #DCD7CE; }
.theme-dark .founder-meta { border-top-color: rgba(255,255,255,0.12); }
.theme-dark .founder-meta-item .num { color: var(--white); }
.theme-dark .founder-meta-item .lbl { color: #8E8A82; }
.theme-dark .faculty-arrow {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--white);
}
.theme-dark .faculty-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
}

/* Exam in dark theme */
.theme-dark.exam-section { background: var(--ink) !important; }

/* Reviews in dark theme */
.theme-dark.reviews-section { background: var(--ink) !important; }
.theme-dark .review-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }

/* Section eyebrow label */
.eyebrow {
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--orange-deep);
    margin-bottom: 14px;
    display: inline-block;
}
.section-title {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: var(--ink);
    margin-bottom: 12px;
    max-width: 720px;
}
.section-title em {
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    color: var(--orange);
    letter-spacing: -1.2px;
    font-size: 1.18em;
}
.section-sub {
    font-size: 15px;
    color: var(--slate-soft);
    max-width: 640px;
    line-height: 1.65;
}
.section-head { margin-bottom: 36px; }
@media (max-width: 760px) {
    .section-title { font-size: 32px; letter-spacing: -1px; }
}

/* ─── Buttons ─── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
}
.btn-primary {
    background: var(--orange);
    color: var(--ink);
}
.btn-primary:hover {
    background: var(--orange-deep);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232,149,31,0.32);
}
.btn-dark {
    background: var(--ink);
    color: var(--white);
}
.btn-dark:hover { background: var(--ink-soft); }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-ghost-light {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(35,133,244,0.5);
}
.btn-ghost-light:hover {
    background: var(--blue-soft);
    color: var(--white);
    border-color: var(--blue-soft);
    box-shadow: 0 6px 16px rgba(91,155,213,0.35);
}
.btn-blue {
    background: var(--blue);
    color: var(--white);
    border: 1.5px solid var(--blue);
    transition: background 0.16s, box-shadow 0.16s;
}
.btn-blue:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    box-shadow: 0 8px 18px rgba(35,133,244,0.4);
}
.btn-link {
    background: none;
    padding: 0;
    color: var(--orange-deep);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-bottom: 1.5px solid var(--orange);
    padding-bottom: 2px;
    font-family: inherit;
}
.btn-link:hover { color: var(--orange); }

/* ─── Top utility bar ─── */
.utility-bar {
    background: var(--ink);
    color: #D8D4CB;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.utility-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.util-left, .util-center {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.util-mega {
    font-size: 14px;
    line-height: 1;
    margin-right: 2px;
}
.util-left strong { color: var(--white); font-weight: 700; }
.util-link {
    color: var(--orange);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
    margin-left: 4px;
}
.util-link:hover { color: #FFC270; }
.util-center {
    color: #BFBAB2;
    font-size: 12.5px;
}
.util-center a {
    color: var(--white);
    font-weight: 700;
    transition: color 0.15s;
}
.util-center a:hover { color: var(--orange); }
.util-divider {
    color: #5A554E;
    margin: 0 4px;
}
.util-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #25D366;
    color: var(--white);
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    border: none;
    cursor: pointer;
    line-height: 1.2;
}
.util-whatsapp:hover {
    background: #1FAF53;
    color: var(--white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.util-whatsapp svg { width: 12px; height: 12px; flex-shrink: 0; }

@media (max-width: 1100px) {
    .util-center { display: none; }
}
@media (max-width: 720px) {
    .utility-bar { padding: 7px 0; font-size: 11.5px; }
    .utility-inner { gap: 12px; padding: 0 16px; }
    .util-whatsapp { padding: 6px 10px; font-size: 11.5px; }
    .util-whatsapp .wa-num { display: none; }
    .util-left { font-size: 11.5px; }
}
@media (max-width: 540px) {
    .util-left .util-link { display: none; }
    .belief-tiles { grid-template-columns: 1fr; }
}

/* ─── Navbar ─── */
.nav {
    background: var(--ink);
    border-bottom: 2px solid var(--orange);
    box-shadow: 0 1px 0 rgba(232,149,31,0.4), 0 6px 20px rgba(0,0,0,0.18);
    position: sticky;
    top: 0;
    z-index: 90;
}
.nav-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}
.brand-block {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.brand-logo {
    height: 32px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}
.nav-links {
    display: flex;
    gap: 3px;
    align-items: center;
}
.nav-item { position: relative; }
.nav-link {
    font-size: 13px;
    color: rgba(255,255,255,0.92);
    padding: 6px 11px;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border: none;
    font-family: inherit;
}
.nav-link:hover,
.nav-item:hover > .nav-link {
    background: rgba(232,149,31,0.16);
    color: var(--orange);
}

/* Courses — highlighted as an amber button */
.nav-item--mega > .nav-link {
    background: var(--orange);
    color: var(--ink);
    font-weight: 800;
    padding: 6px 14px;
    box-shadow: 0 4px 12px rgba(232,149,31,0.32);
}
.nav-item--mega > .nav-link:hover,
.nav-item--mega:hover > .nav-link {
    background: var(--orange-deep);
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(232,149,31,0.42);
    transform: translateY(-1px);
}
.nav-item--mega > .nav-link .caret {
    border-right-color: var(--ink);
    border-bottom-color: var(--ink);
}
.nav-link .caret {
    width: 6px; height: 6px;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.18s;
    margin-left: 1px;
    margin-bottom: 2px;
}
.nav-item:hover .nav-link .caret { transform: rotate(225deg) translate(-1px, -1px); }
.nav-cta { margin-left: auto; }
.nav-btn-compact {
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.2;
}


/* Standard hover dropdown (Explore) — Removed to use global cat-exam-landing.css */
/* Mega menu (Courses) — Removed to use global cat-exam-landing.css */

.mega-preview-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(26,26,46,0.55) 100%);
    border-radius: inherit;
    pointer-events: none;
}
.mega-preview-caption {
    color: var(--ink);
}
.mega-preview-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--orange-deep);
    margin-bottom: 6px;
}
.mega-preview-title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: 4px;
}
.mega-preview-sub {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.4;
}

/* ─── PDF button in nav ─── */
.nav-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--orange-pale);
    color: var(--orange-deep);
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(232,149,31,0.4);
    transition: all 0.15s;
    font-family: inherit;
    margin-left: 8px;
    white-space: nowrap;
    line-height: 1.2;
}
.nav-pdf:hover {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(232,149,31,0.28);
}
.nav-pdf svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Login / SignUp button inside dark nav — ghost outline */
.nav .btn-dark.nav-cta {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255,255,255,0.35);
}
.nav .btn-dark.nav-cta:hover {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border-color: var(--white);
}


.login-feature-tick {
    width: 28px; height: 28px;
    background: var(--orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--white);
    box-shadow: 0 3px 10px rgba(232,149,31,0.4);
}
.login-feature-tick svg { width: 14px; height: 14px; stroke-width: 3; }

@media (max-width: 760px) {
    .login-modal { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
    .login-feature-side { clip-path: none; padding: 32px 28px; }
    .login-form-side { padding: 32px 24px; }
    .login-title { font-size: 22px; }
}

/* ─── PDF Modal ─── */
.modal-backdrop:not(.fade) {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFade 0.22s ease;
}
.modal-backdrop:not(.fade).show { display: flex; }
#enquiryModal { display: none !important; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalScale { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/*.modal {*/
/*    background: var(--white);*/
/*    border-radius: 8px;*/
/*    width: 100%;*/
/*    max-width: 480px;*/
/*    max-height: 84vh;*/
/*    position: relative;*/
/*    animation: modalScale 0.24s ease;*/
/*    box-shadow: 0 30px 80px rgba(0,0,0,0.3);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    overflow: hidden;*/
/*}*/
/*.modal-header {*/
/*    padding: 22px 28px 16px;*/
/*    border-bottom: 1px solid var(--line);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 14px;*/
/*    background: var(--white);*/
/*    border-radius: 8px 8px 0 0;*/
/*    z-index: 2;*/
/*    flex-shrink: 0;*/
/*}*/
/*.modal-header h3 {*/
/*    font-size: 18px;*/
/*    color: var(--ink);*/
/*    line-height: 1.3;*/
/*}*/
/*.modal-header .modal-sub {*/
/*    font-size: 12.5px;*/
/*    color: var(--slate-soft);*/
/*    margin-top: 2px;*/
/*}*/
/*.modal-close {*/
/*    position: absolute;*/
/*    top: 14px; right: 14px;*/
/*    background: transparent;*/
/*    border: none;*/
/*    font-size: 22px;*/
/*    cursor: pointer;*/
/*    color: var(--slate-soft);*/
/*    width: 34px; height: 34px;*/
/*    border-radius: 4px;*/
/*    line-height: 1;*/
/*    transition: background 0.12s;*/
/*    z-index: 3;*/
/*}*/
/*.modal-close:hover { background: var(--paper-warm); color: var(--ink); }*/
/*.modal-back {*/
/*    background: transparent;*/
/*    border: 1px solid var(--line);*/
/*    cursor: pointer;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 5px;*/
/*    font-size: 12.5px;*/
/*    color: var(--slate);*/
/*    font-weight: 600;*/
/*    padding: 6px 10px;*/
/*    border-radius: 4px;*/
/*    font-family: inherit;*/
/*    transition: all 0.15s;*/
/*}*/
/*.modal-back:hover { background: var(--paper-warm); color: var(--ink); border-color: var(--ink); }*/
/*.modal-body {*/
/*    padding: 22px 28px 28px;*/
/*    overflow-y: auto;*/
/*    flex: 1 1 auto;*/
/*    min-height: 0;*/
/*}*/
/*!* Slim scrollbar inside list *!*/
/*.modal-body::-webkit-scrollbar { width: 8px; }*/
/*.modal-body::-webkit-scrollbar-track {*/
/*    background: var(--paper-warm);*/
/*    border-radius: 0 8px 8px 0;*/
/*}*/
/*.modal-body::-webkit-scrollbar-thumb {*/
/*    background: var(--line);*/
/*    border-radius: 4px;*/
/*    border: 2px solid var(--paper-warm);*/
/*}*/
/*.modal-body::-webkit-scrollbar-thumb:hover { background: var(--slate-soft); }*/
/*.modal-body { scrollbar-width: thin; scrollbar-color: var(--line) var(--paper-warm); }*/

.pdf-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pdf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--white);
    text-align: left;
    font-family: inherit;
    width: 100%;
}
.pdf-item:hover {
    border-color: var(--orange);
    background: var(--orange-pale);
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(232,149,31,0.18);
}
.pdf-icon {
    width: 38px; height: 38px;
    background: var(--orange-pale);
    color: var(--orange-deep);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.pdf-item:hover .pdf-icon { background: var(--orange); color: var(--ink); }
.pdf-info { min-width: 0; flex: 1; }
.pdf-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}
.pdf-sub {
    font-size: 11px;
    color: var(--slate-soft);
    margin-top: 2px;
    font-weight: 500;
}
.pdf-item-arrow {
    color: var(--slate-soft);
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.pdf-item:hover .pdf-item-arrow {
    color: var(--orange-deep);
    transform: translateX(2px);
}

/* Form step */
.modal-list { display: block; }
.modal-list.hidden { display: none; }
.modal-form { display: none; }
.modal-form.active { display: block; }

.form-card {
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
}
.form-pdf-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--orange-pale);
    color: var(--orange-deep);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.4px;
}
.form-pdf-pill::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--orange-deep);
    border-radius: 50%;
}
.form-card h4 {
    font-size: 22px;
    margin-bottom: 6px;
    color: var(--ink);
}
.form-card .form-desc {
    font-size: 13.5px;
    color: var(--slate);
    margin-bottom: 22px;
    line-height: 1.55;
}

.phone-input {
    display: flex;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    margin-bottom: 12px;
    transition: border-color 0.15s;
    text-align: left;
}
.phone-input:focus-within { border-color: var(--orange); }
.phone-input .prefix {
    padding: 12px 12px;
    background: var(--paper-warm);
    border-right: 1px solid var(--line);
    font-size: 14px;
    font-weight: 600;
    color: var(--slate);
    border-radius: 4px 0 0 4px;
}
.phone-input input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    font-family: inherit;
    background: transparent;
    outline: none;
    width: 100%;
    min-width: 0;
}

.form-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    margin-bottom: 12px;
    transition: border-color 0.15s;
    text-align: left;
}
.form-input:focus { outline: none; border-color: var(--orange); }

.form-submit {
    width: 100%;
    padding: 13px;
    background: var(--orange);
    border: none;
    border-radius: 5px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    transition: all 0.15s;
}
.form-submit:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,149,31,0.32); }
.form-submit:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--slate-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
}
.form-divider::before, .form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

.form-google {
    width: 100%;
    padding: 12px;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.15s;
}
.form-google:hover { border-color: var(--ink); background: var(--paper-warm); }
.form-google svg { width: 18px; height: 18px; flex-shrink: 0; }

.form-toggle {
    font-size: 12.5px;
    color: var(--slate);
    margin-top: 16px;
}
.form-toggle button {
    background: none;
    border: none;
    color: var(--orange-deep);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0 2px;
    text-decoration: underline;
}
.form-toggle button:hover { color: var(--orange); }

/* Success state */
.form-success {
    text-align: center;
    padding: 28px 0 12px;
    display: none;
}
.form-success.show { display: block; }
.form-success .check {
    width: 60px; height: 60px;
    background: var(--orange);
    color: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 30px;
    line-height: 1;
    animation: scaleIn 0.4s ease;
}
@keyframes scaleIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h4 { font-size: 20px; margin-bottom: 8px; color: var(--ink); }
.form-success p { font-size: 13.5px; color: var(--slate); }

/* ──────────────────────────────────────
   1. HERO
   ────────────────────────────────────── */
.hero {
    background: var(--ink);
    color: var(--white);
    padding: 110px 0 120px;
    position: relative;
    overflow: hidden;
    min-height: 640px;
    display: flex;
    align-items: center;
}
/* Background video — full-bleed, behind everything */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
/* Dark scrim — keeps text legible against any video frame */
.hero-bg-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(26,26,46,0.65) 0%, rgba(26,26,46,0.78) 60%, rgba(26,26,46,0.92) 100%),
        linear-gradient(180deg, rgba(26,26,46,0.4) 0%, rgba(26,26,46,0.15) 30%, rgba(26,26,46,0.15) 70%, rgba(26,26,46,0.7) 100%);
    z-index: 1;
    pointer-events: none;
}
.hero .container { position: relative; z-index: 2; width: 100%; }
.hero-inner--centered {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.hero-center {
    max-width: 920px;
    width: 100%;
    text-align: center;
}
.hero h1 {
    font-size: 70px;
    line-height: 1.0;
    color: var(--white);
    margin: 0 auto 26px;
    letter-spacing: -2.4px;
    font-weight: 900;
    max-width: 1000px;
    text-shadow: 0 4px 28px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
    opacity: 0;
    animation: heroFadeUp 0.9s ease-out 0.15s forwards;
}
.hero h1 em {
    color: var(--orange);
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    letter-spacing: -1.5px;
}
.hero h1 .brand-accent {
    color: var(--orange);
}
.hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    line-height: 1.65;
    margin: 0 auto 36px;
    max-width: 660px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    opacity: 0;
    animation: heroFadeUp 0.9s ease-out 0.45s forwards;
}
.hero-sub strong { color: var(--white); }
.hero-ctas {
    display: flex;
    gap: 12px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: heroFadeUp 0.9s ease-out 0.7s forwards;
}
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.18);
    max-width: 720px;
    margin: 0 auto;
    opacity: 0;
    animation: heroFadeUp 0.9s ease-out 0.95s forwards;
}
.hero-stat-num {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 6px;
    text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.hero-stat-lbl {
    font-size: 12.5px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero h1, .hero-sub, .hero-ctas, .hero-stats {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ──────────────────────────────────────
   1.25 CATKING PROMISE — Topper equation
   ────────────────────────────────────── */
.promise-section {
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-cool) 100%);
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
}
.promise-section::before {
    content: '';
    position: absolute;
    top: -10%; right: -8%;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(232,149,31,0.08) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.promise-section::after {
    content: '';
    position: absolute;
    bottom: -15%; left: -6%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(35,133,244,0.06) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.promise-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.promise-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
}
.promise-eyebrow-text {
    color: var(--orange);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* === Equation: CATKing Topper = CAT Topper === */
.promise-equation {
    margin-bottom: 22px;
}
.promise-equation-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.promise-row-1 { margin-bottom: 4px; }
.promise-word {
    line-height: 1;
    letter-spacing: -1.5px;
}
.promise-word-italic {
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    color: var(--orange);
    font-size: 78px;
    letter-spacing: -2px;
    /* Wave float animation */
    animation: promiseWave 3.5s ease-in-out infinite;
    display: inline-block;
    transform-origin: center;
}
.promise-word-bold {
    font-family: inherit;
    font-weight: 900;
    color: var(--ink);
    font-size: 64px;
    letter-spacing: -2px;
    animation: promiseWave 3.5s ease-in-out infinite;
    animation-delay: 0.4s;
    display: inline-block;
    transform-origin: center;
}
.promise-row-2 .promise-word-italic {
    animation-delay: 0.8s;
}
.promise-row-2 .promise-word-bold {
    animation-delay: 1.2s;
}
.promise-equals {
    font-family: inherit;
    font-weight: 300;
    color: var(--slate);
    font-size: 56px;
    line-height: 1;
    margin-left: 8px;
    opacity: 0.5;
}
@keyframes promiseWave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-6px) rotate(-0.6deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-3px) rotate(0.4deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .promise-word-italic, .promise-word-bold {
        animation: none;
    }
}
.promise-body {
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.65;
    margin-bottom: 20px;
    max-width: 540px;
}
.promise-body strong {
    color: var(--ink);
    font-weight: 700;
}
.promise-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 24px;
    max-width: 540px;
}
.promise-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,149,31,0.10);
    border: 1px solid rgba(232,149,31,0.30);
    color: var(--orange-deep);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 13px;
    border-radius: 30px;
    line-height: 1.3;
}
.promise-pill-tick {
    color: var(--orange);
    font-weight: 800;
    font-size: 13px;
}
.promise-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.promise-btn,
.promise-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
    line-height: 1;
    font-family: inherit;
    box-sizing: border-box;
    min-height: 48px;
}
.promise-btn {
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    box-shadow: 0 6px 18px rgba(232,149,31,0.32);
}
.promise-btn:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(232,149,31,0.42);
}
.promise-btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    box-shadow: none;
}
.promise-btn-secondary:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26,26,46,0.18);
}

/* === Topper Hall of Fame card — light theme === */
.promise-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF7 100%);
    border: 1px solid rgba(232,149,31,0.20);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(26,26,46,0.10), 0 4px 14px rgba(26,26,46,0.04);
    position: relative;
}
.promise-card-header {
    background: linear-gradient(135deg, var(--paper-warm) 0%, rgba(232,149,31,0.18) 100%);
    border-bottom: 1px solid rgba(232,149,31,0.22);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.promise-card-title {
    color: var(--orange-deep);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.promise-toppers {
    list-style: none;
    padding: 0;
    margin: 0;
}
.promise-toppers-headrow {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr;
    gap: 14px;
    align-items: center;
    padding: 12px 22px;
    background: rgba(26,26,46,0.03);
    border-bottom: 1px solid var(--line-soft);
}
.promise-toppers-h {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--slate);
    line-height: 1.3;
}
.promise-toppers-h-name { text-align: left; }
.promise-toppers-h-mock { text-align: center; }
.promise-toppers-h-pct  { text-align: right; }

.promise-topper {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr 0.9fr;
    gap: 14px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    transition: background 0.2s ease;
}
.promise-topper:last-child {
    border-bottom: 0;
}
.promise-topper:hover {
    background: rgba(232,149,31,0.04);
}
.promise-topper-info { min-width: 0; }
.promise-topper-name {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}
.promise-topper-mock {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    text-align: center;
    line-height: 1;
    letter-spacing: -0.3px;
}
.promise-topper-score {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    text-align: right;
}
.promise-topper-score small {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--orange-deep);
    margin-left: 2px;
}

@media (max-width: 980px) {
    .promise-grid { grid-template-columns: 1fr; gap: 32px; }
    .promise-word-italic { font-size: 56px; }
    .promise-word-bold { font-size: 46px; }
    .promise-equals { font-size: 40px; }
    .promise-pills { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .promise-section { padding: 48px 0 56px; }
    .promise-word-italic { font-size: 44px; letter-spacing: -1px; }
    .promise-word-bold { font-size: 36px; letter-spacing: -1px; }
    .promise-toppers-headrow,
    .promise-topper {
        padding: 12px 16px;
        gap: 10px;
        grid-template-columns: 1.3fr 0.8fr 0.9fr;
    }
    .promise-toppers-h { font-size: 9.5px; letter-spacing: 0.6px; }
    .promise-topper-name { font-size: 13.5px; }
    .promise-topper-mock { font-size: 16px; }
    .promise-topper-score { font-size: 18px; }
    .promise-card-header { padding: 12px 16px; }
}

/* ──────────────────────────────────────
   1.5 WHAT YOU'LL GET — Platform overview
   ────────────────────────────────────── */
.platform-section {
    background: var(--ink);
    color: var(--white);
}
.platform-section .eyebrow { color: var(--orange); }
.platform-section .section-title { color: var(--white); }
.platform-section .section-title em { color: var(--orange); }
.platform-section .section-sub { color: rgba(255,255,255,0.72); }
.platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.platform-tile {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(232,149,31,0.22);
    border-radius: 12px;
    padding: 26px 24px 24px;
    transition: all 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    backdrop-filter: blur(2px);
}
.platform-tile:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 18px 38px rgba(232,149,31,0.18);
}
.platform-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
    transition: width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.platform-tile:hover::before { width: 100%; }
.platform-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.platform-icon {
    width: 48px; height: 48px;
    background: rgba(232,149,31,0.16);
    border: 1px solid rgba(232,149,31,0.42);
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.22s, transform 0.22s, color 0.22s;
}
.platform-tile:hover .platform-icon {
    background: var(--orange);
    color: var(--ink);
    transform: rotate(-4deg) scale(1.06);
}
.platform-icon svg { width: 22px; height: 22px; }
.platform-stat {
    display: inline-flex;
    align-items: center;
    background: var(--orange);
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 900;
    font-size: 13px;
    padding: 5px 11px;
    border-radius: 4px;
    letter-spacing: -0.2px;
    flex-shrink: 0;
}
.platform-title {
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}
.platform-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    line-height: 1.55;
    flex-grow: 1;
}

/* Trust marquee */
.marquee-bar {
    background: var(--paper-warm);
    border-top: 2px solid var(--blue);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 16px 0;
}
.marquee-track {
    display: flex;
    gap: 64px;
    animation: scroll 30s linear infinite;
    width: max-content;
    white-space: nowrap;
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.marquee-item {
    font-size: 13px;
    color: var(--slate);
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.marquee-item::before {
    content: '';
    width: 4px; height: 4px;
    background: var(--orange);
    border-radius: 50%;
}

/* ──────────────────────────────────────
   1.6 COURSES — Tabbed catalog
   ────────────────────────────────────── */
.courses-section {
    background: var(--paper);
    padding: 64px 0 76px;
}
.courses-head {
    text-align: center;
    margin-bottom: 28px;
}
.courses-head .section-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}
.courses-tabs {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
}
.courses-tab {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    color: var(--slate);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 12px 4px 16px;
    cursor: pointer;
    position: relative;
    transition: color 0.18s;
}
.courses-tab::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 3px;
    background: var(--orange);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}
.courses-tab:hover { color: var(--ink); }
.courses-tab.active {
    color: var(--orange-deep);
}
.courses-tab.active::after { transform: scaleX(1); }

.courses-panel {
    display: none;
}
.courses-panel.active { display: block; }

/* Extra cards — hidden until "View all" toggles .expanded */
.courses-panel:not(.expanded) .course-card.is-extra {
    display: none;
}
.courses-panel.expanded .course-card.is-extra {
    display: flex;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.course-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.course-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.07);
    border-color: var(--orange);
}
.course-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    text-align: center;
}
.course-card-title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 1.25;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* === Image preview between title and pointers === */
.course-card-image {
    aspect-ratio: 5 / 3;
    width: 100%;
    display: block;
    border-radius: 10px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.course-card-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,46,0.50) 0%, rgba(26,26,46,0.82) 100%);
    z-index: 1;
}
.course-card-image-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #FFFFFF;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
}
.course-card-image-badge small {
    display: block;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--orange);
    margin-top: 4px;
    opacity: 0.95;
}
.course-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.course-card-features li {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.35;
    padding-left: 15px;
    position: relative;
    text-align: left;
}
.course-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--orange);
    font-weight: 800;
    font-size: 11px;
}
.course-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--line-soft);
    overflow: hidden;
    justify-content: center;
}
.course-price-now {
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.course-price-was {
    font-size: 12px;
    color: var(--slate-soft);
    text-decoration: line-through;
    font-weight: 600;
    white-space: nowrap;
}
.course-price-tag {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--red);
    background: rgba(178,58,44,0.08);
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.course-card-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.course-card-ctas.course-card-ctas--single {
    grid-template-columns: 1fr;
}
.course-btn-secondary {
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--line);
    padding: 13px 8px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.course-btn-secondary:hover {
    border-color: var(--ink);
    background: var(--paper);
    color: var(--ink);
}
.course-btn-primary {
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    padding: 13px 8px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 3px 10px rgba(232,149,31,0.35);
}
.course-btn-primary:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    box-shadow: 0 6px 16px rgba(232,149,31,0.50);
    color: var(--ink);
    transform: translateY(-1px);
}

.courses-viewall {
    text-align: center;
    margin-top: 32px;
}
.courses-viewall-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    color: var(--orange-deep);
    padding: 10px 20px;
    border: 1.5px solid var(--orange);
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.16s;
}
.courses-viewall-link:hover {
    background: var(--orange);
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(232,149,31,0.32);
}

/* ──────────────────────────────────────
   1.7 EXAM SPOTLIGHT — Stacked alternating cards
   ────────────────────────────────────── */
.exam-spotlight-section {
    background: var(--paper);
    padding: 72px 0 80px;
}
.exam-spotlight-head {
    text-align: center;
    margin-bottom: 40px;
}
.exam-spotlight-head .section-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
}
.exam-spotlight-head .section-sub {
    max-width: 640px;
    margin: 14px auto 0;
}
.exam-spotlight-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    padding-bottom: 60px;
    overflow: visible !important;
}
.exam-spotlight-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    box-shadow: 0 10px 30px rgba(26,26,46,0.08), 0 4px 8px rgba(26,26,46,0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: sticky;
    will-change: transform, box-shadow;
    isolation: isolate;
    opacity: 1;
}
.exam-spotlight-card:hover {
    border-color: var(--orange);
    box-shadow: 0 20px 44px rgba(26,26,46,0.18), 0 6px 14px rgba(232,149,31,0.12);
}
/* Staggered sticky offsets — creates the layered card-stack effect on scroll */
.exam-spotlight-card:nth-child(1) { top: 90px; z-index: 1; }
.exam-spotlight-card:nth-child(2) { top: 102px; z-index: 2; }
.exam-spotlight-card:nth-child(3) { top: 114px; z-index: 3; }
.exam-spotlight-card:nth-child(4) { top: 126px; z-index: 4; }
.exam-spotlight-card:nth-child(5) { top: 138px; z-index: 5; }
.exam-spotlight-card:nth-child(6) { top: 150px; z-index: 6; }
.exam-spotlight-card:nth-child(7) { top: 162px; z-index: 7; }
.exam-spotlight-card:nth-child(8) { top: 174px; z-index: 8; }
.exam-spotlight-card:nth-child(9) { top: 186px; z-index: 9; }
.exam-spotlight-card:nth-child(10) { top: 198px; z-index: 10; }
.exam-spotlight-card:nth-child(11) { top: 210px; z-index: 11; }

/* Scroll-driven entrance animation (modern browsers — graceful fallback elsewhere) */
@supports (animation-timeline: view()) {
    .exam-spotlight-card {
        animation: spotlightCardRise linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 80%;
    }
    @keyframes spotlightCardRise {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .exam-spotlight-card {
        animation: none !important;
        position: static;
        opacity: 1 !important;
        transform: none !important;
    }
}
.exam-spotlight-card.flip .exam-spotlight-image { order: 2; }
.exam-spotlight-card.flip .exam-spotlight-content { order: 1; }
.exam-spotlight-image {
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    position: relative;
}
.exam-spotlight-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,26,46,0.18) 0%, rgba(26,26,46,0.5) 100%);
}
/* === Click-to-load embedded YouTube player === */
.exam-spotlight-image.exam-spotlight-video {
    display: block;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background-color: #0F0F0F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 16 / 9;
    align-self: center;
    justify-self: center;
    width: calc(100% - 48px);
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.10);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}
.exam-spotlight-image.exam-spotlight-video::after {
    /* No dark overlay — let the thumbnail come through */
    display: none;
}
.exam-spotlight-image.exam-spotlight-video:not(.is-playing):hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 44px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.14);
}
/* When playing, iframe takes over — hide the facade controls */
.exam-spotlight-image.exam-spotlight-video.is-playing {
    cursor: default;
}
.exam-spotlight-image.exam-spotlight-video.is-playing .exam-spotlight-play,
.exam-spotlight-image.exam-spotlight-video.is-playing .exam-spotlight-video-pill,
.exam-spotlight-image.exam-spotlight-video.is-playing .exam-spotlight-yt-source {
    display: none;
}
.exam-spotlight-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Classic YouTube red play button (centered, click-to-load) */
.exam-spotlight-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 72px; height: 50px;
    border-radius: 14px;
    background: #FF0000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    z-index: 2;
    transition: all 0.2s ease;
    pointer-events: none;
}
.exam-spotlight-image.exam-spotlight-video:hover .exam-spotlight-play {
    transform: translate(-50%, -50%) scale(1.06);
    background: #FF1A1A;
}
.exam-spotlight-play svg {
    width: 26px; height: 26px;
    fill: #FFFFFF;
    margin-left: 3px;
}
/* "Watch" pill in top-left */
.exam-spotlight-video-pill {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.exam-spotlight-video-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #FF0000;
    box-shadow: 0 0 8px rgba(255,0,0,0.7);
    animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
/* YouTube channel-source label, bottom-left (facade only) */
.exam-spotlight-yt-source {
    position: absolute;
    bottom: 12px; left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,0.65);
    pointer-events: none;
}
.exam-spotlight-yt-source svg {
    width: 18px; height: 13px;
    flex-shrink: 0;
}
/* YouTube redirect button — bottom-right corner, persists when playing */
.exam-spotlight-yt-link {
    position: absolute;
    bottom: 10px; right: 10px;
    z-index: 4;
    width: 38px; height: 28px;
    border-radius: 6px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}
.exam-spotlight-yt-link:hover {
    background: #FF0000;
    border-color: #FF0000;
    transform: scale(1.06);
}
.exam-spotlight-yt-link svg {
    width: 22px; height: 16px;
}
.exam-spotlight-yt-link:hover svg path:first-child {
    fill: #FFFFFF;
}
.exam-spotlight-yt-link:hover svg path:last-child {
    fill: #FF0000;
}
.exam-spotlight-content {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
}
.exam-spotlight-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--orange-deep);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.exam-spotlight-num::before {
    content: '';
    width: 24px;
    height: 2px;
    background: var(--orange);
}
.exam-spotlight-title {
    font-family: inherit;
    font-size: 30px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -1px;
    margin-bottom: 12px;
    line-height: 1.1;
}
.exam-spotlight-desc {
    font-size: 14.5px;
    color: var(--slate);
    line-height: 1.6;
    margin-bottom: 24px;
}
.exam-spotlight-ctas {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.exam-spotlight-cta-primary {
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.exam-spotlight-cta-primary:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    box-shadow: 0 6px 14px rgba(232,149,31,0.36);
    color: var(--ink);
}
.exam-spotlight-cta-secondary {
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--line);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
.exam-spotlight-cta-secondary:hover {
    border-color: var(--ink);
    background: var(--paper);
    color: var(--ink);
}

/* ──────────────────────────────────────
   2. WHAT WE BELIEVE — Philosophy + video
   ────────────────────────────────────── */
.belief-section {
    background: var(--paper-cool) !important;
    border-bottom: 1px solid var(--line);
}
.belief-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}
.belief-left .eyebrow { margin-bottom: 12px; }
.belief-left .section-title {
    font-size: 38px;
    margin-bottom: 16px;
}
.belief-para {
    font-size: 15px;
    color: var(--slate);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 540px;
}
.belief-para strong {
    color: var(--ink);
    font-weight: 700;
}
.belief-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.belief-tile {
    background: var(--paper);
    border: 1.5px solid rgba(35,133,244,0.35);
    border-radius: 12px;
    padding: 18px 18px 16px;
    transition: all 0.22s;
    position: relative;
    overflow: hidden;
}
.belief-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 0;
    background: var(--blue);
    transition: height 0.22s;
}
.belief-tile:hover {
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(35,133,244,0.12);
    background: var(--white);
}
.belief-tile:hover::before { height: 100%; }
.belief-tile-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    margin-bottom: 14px;
    transition: transform 0.22s;
}
.belief-tile:hover .belief-tile-image {
    transform: scale(1.06);
}
.belief-tile-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.25;
}
.belief-tile-desc {
    font-size: 12.5px;
    color: var(--slate);
    line-height: 1.55;
}

/* Right panel — video player */
.belief-right { position: relative; }
.belief-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--navy);
    /* background-image: url('believe-thumb.jpg'); Converted to <img> in Blade */
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 18px 44px rgba(15,15,28,0.22);
    transition: all 0.28s;
    border: 1px solid var(--navy-soft);
    display: block;
    text-decoration: none;
}
.belief-video:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 56px rgba(15,15,28,0.3);
}
.belief-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.08);
    transition: background 0.25s;
}
.belief-video:hover::before {
    background: rgba(0,0,0,0.18);
}
.belief-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.28s;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.belief-video:hover .belief-video-play {
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 16px 38px rgba(232,149,31,0.5);
}
.belief-video-play svg {
    width: 28px; height: 28px;
    color: var(--ink);
    margin-left: 4px;
}

.belief-video-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.22;
    color: var(--ink);
    margin-top: 22px;
    max-width: 460px;
}
.belief-video-title em {
    font-family: var(--italic);
    font-style: italic;
    font-weight: 500;
    color: var(--orange);
    letter-spacing: -0.8px;
}
.belief-video-caption {
    font-size: 13.5px;
    color: var(--slate-soft);
    margin-top: 10px;
    line-height: 1.55;
    max-width: 420px;
}
.belief-video-cta {
    margin-top: 22px;
    padding: 14px 28px;
    font-size: 14.5px;
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(232,149,31,0.22);
}
.belief-video-cta:hover {
    box-shadow: 0 12px 28px rgba(232,149,31,0.36);
}

/* ──────────────────────────────────────
   3. FREE RESOURCES (Reciprocity)
   ────────────────────────────────────── */
.free-section {
    background: var(--paper);
}
.free-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 32px;
}
.free-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 22px 22px;
    transition: all 0.22s;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.free-card:hover {
    border-color: var(--orange);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.free-tag {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--ink);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 2px;
}
.free-meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--orange-deep);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.free-title {
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 8px;
}
.free-desc {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}
.free-stat {
    font-size: 12px;
    color: var(--slate-soft);
    margin-bottom: 14px;
    font-style: italic;
    font-family: Georgia, serif;
}
.free-link {
    color: var(--orange-deep);
    font-weight: 700;
    font-size: 13.5px;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
    font-family: inherit;
}
.free-bundle {
    background: var(--ink);
    border-radius: 6px;
    padding: 28px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    gap: 24px;
}
.free-bundle-text h4 { color: var(--white); font-size: 19px; margin-bottom: 4px; }
.free-bundle-text p { color: #BFBAB2; font-size: 14px; }

/* ──────────────────────────────────────
   4. SOCIAL PROOF
   ────────────────────────────────────── */
.proof-section {
    background: var(--white);
}
.proof-counter {
    display: flex;
    justify-content: center;
    gap: 56px;
    padding: 32px 0 44px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 56px;
    flex-wrap: wrap;
}
.proof-stat-num {
    font-family: inherit;
    font-size: 38px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}
.proof-stat-num em { color: var(--orange-deep); font-style: normal; }
.proof-stat-lbl {
    font-size: 12.5px;
    color: var(--slate-soft);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-top: 6px;
}
.proof-stat { text-align: center; }

/* Toppers wall */
.toppers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 64px;
}
.topper-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 22px 20px 20px;
    text-align: center;
    transition: all 0.22s;
}
.topper-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.07);
    border-color: var(--orange);
}
.topper-initials {
    width: 64px; height: 64px;
    background: var(--ink);
    color: var(--orange);
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
}
.topper-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; font-family: inherit; }
.topper-pile {
    font-family: inherit;
    color: var(--orange-deep);
    font-size: 22px;
    font-weight: 700;
    margin: 6px 0 4px;
}
.topper-college { font-size: 12px; color: var(--slate); }
.topper-year { font-size: 11px; color: var(--slate-soft); margin-top: 4px; letter-spacing: 0.6px; }

/* Testimonials */
.test-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.test-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 26px 24px;
    position: relative;
}
.test-card .qmark {
    font-family: Georgia, serif;
    font-size: 64px;
    color: var(--orange);
    opacity: 0.25;
    position: absolute;
    top: 6px;
    left: 18px;
    line-height: 1;
}
.test-text {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin: 14px 0 20px;
    position: relative;
    z-index: 1;
}
.test-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.test-avatar {
    width: 42px; height: 42px;
    background: var(--orange);
    color: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
}
.test-name { font-size: 13.5px; font-weight: 700; color: var(--ink); font-family: inherit; }
.test-result { font-size: 12px; color: var(--orange-deep); font-weight: 600; }

/* Press logos */
.press-row {
    display: flex;
    justify-content: center;
    gap: 56px;
    align-items: center;
    margin-top: 56px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.press-row .label {
    font-size: 11px;
    letter-spacing: 1.6px;
    color: var(--slate-soft);
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
}
.press-logo {
    font-family: Georgia, serif;
    font-size: 16px;
    color: var(--slate);
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

/* ──────────────────────────────────────
   5. AUTHORITY
   ────────────────────────────────────── */
.authority-section {
    background: var(--paper-warm);
}
.founder-block {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: center;
    margin-bottom: 44px;
}
.founder-avatar {
    width: 220px; height: 220px;
    border-radius: 8px;
    background-color: var(--ink);
    background-size: cover;
    background-position: center top;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    border: 3px solid var(--orange);
}
.founder-avatar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
}
.founder-text .role {
    font-size: 11.5px;
    letter-spacing: 2px;
    color: var(--orange-deep);
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
}
.founder-text h3 {
    font-size: 28px;
    margin-bottom: 6px;
    color: var(--ink);
    letter-spacing: -0.6px;
}
.founder-creds {
    font-size: 13.5px;
    color: var(--slate);
    margin-bottom: 16px;
    line-height: 1.65;
}
.founder-creds strong { color: var(--ink); }
.founder-quote {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 16.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    border-left: 3px solid var(--orange);
    padding: 6px 0 6px 18px;
    margin-bottom: 18px;
}
.founder-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.founder-meta-item .num {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.2px;
}
.founder-meta-item .num em {
    color: var(--orange);
    font-style: normal;
}
.founder-meta-item .lbl { font-size: 12px; color: var(--slate-soft); margin-top: 3px; }

/* Faculty wall — horizontal infinite scroll with arrow controls */
.faculty-marquee-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 6px 0 12px;
}
.faculty-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.faculty-track {
    --fac-card-w: 230px;
    --fac-card-gap: 14px;
    --fac-visible: 8;
    display: flex;
    gap: var(--fac-card-gap);
    width: max-content;
    padding: 0 28px;
    animation: scrollFaculty 65s linear infinite;
    will-change: transform;
}
.faculty-marquee-wrap:hover .faculty-track,
.faculty-marquee-wrap:focus-within .faculty-track,
.faculty-track.is-paused {
    animation-play-state: paused;
}
@keyframes scrollFaculty {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (var(--fac-card-w) + var(--fac-card-gap)) * var(--fac-visible))); }
}
/* Arrow buttons */
.faculty-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    z-index: 5;
    transition: all 0.18s;
    font-family: inherit;
}
.faculty-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 18px rgba(232,149,31,0.4);
}
.faculty-arrow.prev { left: 12px; }
.faculty-arrow.next { right: 12px; }
.faculty-arrow svg { width: 16px; height: 16px; }

.faculty-card {
    flex: 0 0 var(--fac-card-w);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.22s;
    display: flex;
    flex-direction: column;
}
.faculty-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.1);
    border-color: var(--orange);
}
.faculty-photo {
    aspect-ratio: 1 / 1;
    background-color: var(--ink);
    background-size: 110% auto;
    background-position: center 25%;
    background-repeat: no-repeat;
    position: relative;
}
.faculty-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(15,15,28,0.92) 100%);
}
.faculty-name-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px 10px;
    z-index: 1;
    color: var(--white);
}
.faculty-name {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.2px;
    line-height: 1.15;
    margin-bottom: 2px;
}
.faculty-role {
    color: var(--orange);
    font-size: 9.5px;
    letter-spacing: 1px;
    font-weight: 800;
    text-transform: uppercase;
}
.faculty-body {
    padding: 12px 14px 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faculty-cred {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.45;
}
.faculty-cred strong { color: var(--ink); font-weight: 700; }
.faculty-cred-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}
.faculty-cred-row::before {
    content: '';
    flex-shrink: 0;
    width: 4px; height: 4px;
    margin-top: 6px;
    background: var(--orange);
    border-radius: 50%;
}

/* ──────────────────────────────────────
   6. FEATURES (Quantified)
   ────────────────────────────────────── */
.features-section {
    background: var(--white);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.feat-cell {
    background: var(--white);
    padding: 32px 28px;
    transition: all 0.22s;
    cursor: default;
}
.feat-cell:hover { background: var(--paper); }
.feat-num {
    font-family: var(--serif);
    font-size: 38px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    margin-bottom: 14px;
}
.feat-num sup { font-size: 18px; vertical-align: top; margin-top: 6px; color: var(--orange-deep); }
.feat-title {
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.feat-desc {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
}

/* ──────────────────────────────────────
   6.5 EXAM COVERAGE — Choose your exam
   ────────────────────────────────────── */
.exam-section {
    background: var(--paper-warm);
}
.exam-marquee {
    --exam-card-w: 280px;
    --exam-card-gap: 16px;
    --exam-visible: 12;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 14px 0;
    mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.exam-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    z-index: 5;
    transition: all 0.2s ease;
}
.exam-arrow:hover {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
    box-shadow: 0 8px 22px rgba(232,149,31,0.32);
    transform: translateY(-50%) scale(1.06);
}
.exam-arrow.prev { left: 18px; }
.exam-arrow.next { right: 18px; }
.exam-arrow svg { width: 17px; height: 17px; }
.theme-dark .exam-arrow {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: var(--white);
    backdrop-filter: blur(8px);
}
.theme-dark .exam-arrow:hover {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
}
.exam-track {
    display: flex;
    gap: var(--exam-card-gap);
    width: max-content;
    animation: scrollExams 80s linear infinite;
    will-change: transform;
}
.exam-marquee:hover .exam-track,
.exam-marquee:focus-within .exam-track {
    animation-play-state: paused;
}
@keyframes scrollExams {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (var(--exam-card-w) + var(--exam-card-gap)) * var(--exam-visible))); }
}

.exam-card {
    flex: 0 0 var(--exam-card-w);
    background: linear-gradient(180deg, var(--navy) 0%, var(--ink) 100%);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 280px;
    overflow: hidden;
    isolation: isolate;
}

/* Image-preview layer — ALWAYS visible (no hover transition) */
.exam-card[data-preview]::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--preview-img);
    background-size: cover;
    background-position: center;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
}

/* Dark scrim — ALWAYS visible — keeps overlay text legible on top of image */
.exam-card .exam-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,28,45,0.72) 0%, rgba(15,28,45,0.62) 45%, rgba(15,28,45,0.88) 100%);
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

/* Top-left orange accent tab — always visible */
.exam-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 3px;
    background: var(--orange);
    border-radius: 5px 0 5px 0;
    z-index: 4;
}

/* Card content — styled for dark substrate by default (no hover state) */
.exam-card .exam-meta {
    color: var(--orange);
}
.exam-card .exam-title,
.exam-card .exam-desc {
    color: var(--white);
}
.exam-card .exam-pill {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    color: var(--white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.exam-card .exam-stat {
    color: var(--orange);
    border-top-color: rgba(255,255,255,0.22);
}
.exam-card .exam-stat::before { color: var(--orange); }
.exam-card .exam-link {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
    box-shadow: 0 4px 14px rgba(232,149,31,0.32);
}
.exam-meta {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--orange-deep);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.exam-title {
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 8px;
    letter-spacing: -0.4px;
}
.exam-desc {
    font-size: 12px;
    color: var(--slate);
    line-height: 1.5;
    margin-bottom: 10px;
    flex-grow: 1;
}
.exam-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--slate);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    margin-bottom: 10px;
    align-self: flex-start;
}
.exam-pill svg { width: 11px; height: 11px; flex-shrink: 0; color: var(--orange-deep); }
.exam-stat {
    font-size: 11.5px;
    color: var(--orange-deep);
    font-weight: 700;
    padding-top: 8px;
    margin-bottom: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}
.exam-stat::before {
    content: '✓';
    color: var(--orange-deep);
    font-weight: 800;
    font-size: 11px;
}
.exam-link {
    background: var(--ink);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    padding: 9px 14px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.16s, gap 0.18s, color 0.16s;
    text-decoration: none;
    align-self: stretch;
    text-align: center;
}
.exam-link:hover {
    background: var(--orange);
    color: var(--ink);
    gap: 8px;
}

/* ──────────────────────────────────────
   SECTION 2 — STUDENT REVIEWS (auto-scroll marquee)
   ────────────────────────────────────── */
.reviews-section {
    background: var(--paper-warm);
    overflow: hidden;
}
.reviews-marquee {
    --card-w: 340px;
    --card-gap: 18px;
    --visible-cards: 8; /* number of unique cards before loop */
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 8px 0;
    mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.reviews-track {
    display: flex;
    gap: var(--card-gap);
    width: max-content;
    animation: scrollReviews 70s linear infinite;
    will-change: transform;
}
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track {
    animation-play-state: paused;
}
@keyframes scrollReviews {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (var(--card-w) + var(--card-gap)) * var(--visible-cards))); }
}
.review-card {
    flex: 0 0 var(--card-w);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 26px 24px 22px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: all 0.22s;
}
.review-card:hover {
    border-color: var(--orange);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.review-card .qmark {
    font-family: Georgia, serif;
    font-size: 60px;
    color: var(--orange);
    opacity: 0.26;
    position: absolute;
    top: 4px;
    left: 18px;
    line-height: 1;
}
.review-text {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.65;
    margin: 22px 0 22px;
    position: relative;
    z-index: 1;
    flex-grow: 1;
}
.review-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.review-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--orange-pale);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--orange);
}
.review-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    font-family: inherit;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.review-name::after {
    content: '✓';
    width: 14px; height: 14px;
    background: var(--blue);
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
}
.review-college {
    font-size: 11.5px;
    color: var(--orange-deep);
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-top: 3px;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; }
}

/* ──────────────────────────────────────
   SECTION 3 — SUCCESS STORIES
   ────────────────────────────────────── */
.stories-section {
    background: var(--white);
}
.stories-stats {
    display: flex;
    justify-content: center;
    gap: 48px;
    padding: 18px 0 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.story-stat { text-align: center; }
.story-stat-num {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
}
.story-stat-num em { color: var(--orange); font-style: normal; }
.story-stat-num small {
    font-size: 16px;
    color: var(--slate);
    font-weight: 600;
}
.story-stat-lbl {
    font-size: 12px;
    color: var(--slate);
    letter-spacing: 0.3px;
}

/* Stories — marquee with static cards (no flip) */
.stories-marquee {
    --card-w: 320px;
    --card-gap: 16px;
    --visible-cards: 4;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 8px 0 16px;
    mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.stories-track {
    display: flex;
    gap: var(--card-gap);
    width: max-content;
    animation: scrollStories 60s linear infinite;
    will-change: transform;
}
.stories-marquee:hover .stories-track,
.stories-marquee:focus-within .stories-track,
.stories-track.is-paused {
    animation-play-state: paused;
}
@keyframes scrollStories {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (var(--card-w) + var(--card-gap)) * var(--visible-cards))); }
}
/* Arrow buttons for stories marquee */
.stories-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    z-index: 6;
    transition: all 0.18s;
    font-family: inherit;
}
.stories-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(232,149,31,0.45);
}
.stories-arrow.prev { left: 14px; }
.stories-arrow.next { right: 14px; }
.stories-arrow svg { width: 16px; height: 16px; }
/* Dark-theme stories arrow override */
.theme-dark .stories-arrow {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--white);
    backdrop-filter: blur(6px);
}
.theme-dark .stories-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
}

.story-card {
    flex: 0 0 var(--card-w);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    overflow: hidden;
}
.story-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(232,149,31,0.18);
    border-color: var(--orange);
}

/* === Header === cream band with avatar + name + sub */
.story-head {
    background: var(--paper-warm);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.story-avatar {
    width: 50px; height: 50px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-style: normal;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
    border: 2.5px solid var(--white);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    position: relative;
}
.story-avatar::after {
    content: '★';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 17px; height: 17px;
    background: var(--orange);
    color: var(--white);
    border-radius: 50%;
    border: 2px solid var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
}
.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.story-head-info { min-width: 0; flex: 1; }
.story-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    font-family: inherit;
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: -0.3px;
}
.story-sub {
    font-size: 12px;
    color: var(--slate);
    font-weight: 500;
    line-height: 1.3;
}

/* === Score banner === amber gradient (matches brand), more compact */
.story-score-banner {
    margin: 12px 16px 12px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    border-radius: 10px;
    padding: 14px 14px 13px;
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(26,26,46,0.25);
    border: 1px solid rgba(232,149,31,0.35);
}
.story-score-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -15%;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(232,149,31,0.16) 0%, transparent 70%);
    border-radius: 50%;
}
.story-score-banner::after {
    content: '';
    position: absolute;
    bottom: -55%; left: -10%;
    width: 110px; height: 110px;
    background: radial-gradient(circle, rgba(232,149,31,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.story-score-pct {
    font-family: inherit;
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
    color: var(--orange);
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}
.story-score-pct sup {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: lowercase;
    margin-left: 2px;
    vertical-align: top;
    color: var(--orange);
}
.story-score-lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: rgba(255,255,255,0.85);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

/* === Section-wise score table preview === */
.story-sections {
    margin: 0 16px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--white);
}
.story-sections.api-scorecard-preview {
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-scorecard-img {
    width: 100%;
    max-height: 96px;
    object-fit: contain;
    display: block;
}
.story-sections-header {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
}
.story-sections-header > div {
    text-align: center;
    padding: 7px 2px;
    font-size: 11px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
    border-right: 1px solid var(--line-soft);
    letter-spacing: 0.4px;
}
.story-sections-header > div:last-child { border-right: none; }
.story-sec-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line-soft);
}
.story-sec-grid:last-child { border-bottom: none; }
.story-sec-grid > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-right: 1px solid var(--line-soft);
}
.story-sec-grid > div:last-child { border-right: none; }
.story-sec-grid span {
    text-align: center;
    padding: 5px 2px;
    font-size: 8px;
    color: var(--slate);
    border-right: 1px dotted var(--line-soft);
    line-height: 1.2;
}
.story-sec-grid span:last-child { border-right: none; }
.story-sec-grid.values span {
    color: var(--ink);
    font-weight: 700;
    font-size: 9px;
    padding: 6px 2px;
}
.story-subhead {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--paper);
    border-bottom: 1px solid var(--line-soft);
}
.story-subhead > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-right: 1px solid var(--line-soft);
}
.story-subhead > div:last-child { border-right: none; }
.story-subhead span {
    text-align: center;
    padding: 4px 1px;
    font-size: 7px;
    font-weight: 700;
    color: var(--slate);
    border-right: 1px dotted var(--line-soft);
    line-height: 1.1;
    text-transform: capitalize;
}
.story-subhead span:last-child { border-right: none; }

/* === Italic quote === */
.story-quote {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 16px 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
.story-quote::before { content: '\201C'; color: var(--ink-soft); font-style: italic; font-weight: 700; margin-right: 1px; }
.story-quote::after { content: '\201D'; color: var(--ink-soft); font-style: italic; font-weight: 700; margin-left: 1px; }

/* === View scorecard CTA === full-width amber pill */
.story-btn {
    background: var(--orange);
    border: 1.5px solid var(--orange);
    color: var(--ink);
    padding: 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.16s;
    display: block;
    margin: auto 16px 16px;
    width: calc(100% - 32px);
    text-align: center;
    box-shadow: 0 4px 12px rgba(232,149,31,0.28);
    letter-spacing: 0.2px;
}
.story-btn:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    box-shadow: 0 6px 18px rgba(232,149,31,0.45);
    transform: translateY(-1px);
}
.story-card:hover .story-btn {
    box-shadow: 0 6px 18px rgba(232,149,31,0.4);
}

/* ─── Scorecard Modal ─── */
.scorecard-modal {
    background: var(--white);
    border-radius: 10px;
    width: 100%;
    max-width: 540px;
    max-height: 88vh;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalScale 0.24s ease;
}
.scorecard-modal-header {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    color: var(--white);
    padding: 26px 28px 22px;
    position: relative;
    overflow: hidden;
}
.scorecard-modal-header::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(232,149,31,0.22) 0%, transparent 65%);
    pointer-events: none;
}
.scorecard-modal-header > * { position: relative; z-index: 1; }
.scorecard-modal-tag {
    display: inline-block;
    background: rgba(232,149,31,0.18);
    color: var(--orange);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 3px;
    border: 1px solid rgba(232,149,31,0.35);
    margin-bottom: 14px;
}
.scorecard-modal-name-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.scorecard-modal-avatar {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
    color: var(--ink);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(232,149,31,0.35);
    overflow: hidden;
}
.scorecard-modal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.scorecard-modal-name {
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.4px;
    margin-bottom: 4px;
}
.scorecard-modal-pct {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 900;
    color: var(--orange);
    letter-spacing: -0.4px;
}
.scorecard-modal-pct sup {
    font-family: inherit;
    font-size: 10px;
    color: var(--orange);
    font-weight: 800;
    margin-left: 2px;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: top;
}
.scorecard-modal-body {
    padding: 24px 28px 26px;
    overflow-y: auto;
}
.scorecard-modal-image-wrap {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 18px;
    text-align: center;
}
.scorecard-modal-full-img {
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.scorecard-modal-body .scorecard-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}
.scorecard-modal-body .scorecard-table th {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--slate-soft);
    padding: 10px 0 8px;
    text-align: left;
    border-bottom: 1.5px solid var(--line);
}
.scorecard-modal-body .scorecard-table th:nth-child(2),
.scorecard-modal-body .scorecard-table th:nth-child(3) { text-align: right; }
.scorecard-modal-body .scorecard-table td {
    font-size: 14px;
    color: var(--ink);
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.scorecard-modal-body .scorecard-table td:nth-child(2),
.scorecard-modal-body .scorecard-table td:nth-child(3) {
    text-align: right;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--ink);
}
.scorecard-modal-body .scorecard-table tr.total td {
    border-bottom: none;
    border-top: 2px solid var(--orange);
    padding-top: 16px;
    font-weight: 800;
    font-size: 15px;
}
.scorecard-modal-body .scorecard-table tr.total td:first-child {
    color: var(--orange-deep);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.2px;
}
.scorecard-modal-body .scorecard-table tr.total td:nth-child(3) {
    color: var(--orange-deep);
    font-size: 18px;
}
.scorecard-quote-box {
    background: var(--paper-warm);
    border-left: 3px solid var(--orange);
    padding: 14px 16px;
    border-radius: 0 6px 6px 0;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 13px;
    color: var(--slate);
    line-height: 1.55;
    margin-bottom: 18px;
}
.scorecard-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 6px;
}
.scorecard-meta-cell {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
}
.scorecard-meta-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--slate-soft);
    margin-bottom: 5px;
}
.scorecard-meta-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}
.scorecard-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--blue-deep);
    font-weight: 700;
    margin-top: 14px;
}
.scorecard-verified::before {
    content: '✓';
    width: 16px; height: 16px;
    background: var(--blue);
    color: var(--white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .stories-track,
    .exam-track,
    .faculty-track,
    .secrets-track { animation: none; }
}

/* ──────────────────────────────────────
   SECTION 4 — SECRETS — YouTube reels marquee
   ────────────────────────────────────── */
.secrets-section {
    background: var(--ink);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.secrets-section::before {
    content: '';
    position: absolute;
    top: -80px; right: -120px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(232,149,31,0.1) 0%, transparent 65%);
    pointer-events: none;
}
.secrets-section .container { position: relative; z-index: 1; }
.secrets-section .section-title { color: var(--white); }
.secrets-section .section-sub { color: #BFBAB2; }
.secrets-section .eyebrow { color: var(--orange); }

.secrets-marquee-wrap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 8px 0 12px;
}
.secrets-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 70px, black calc(100% - 70px), transparent 100%);
}
.secrets-track {
    --sec-card-w: 230px;
    --sec-card-gap: 14px;
    --sec-visible: 9;
    display: flex;
    gap: var(--sec-card-gap);
    width: max-content;
    padding: 0 28px;
    animation: scrollSecrets 75s linear infinite;
    will-change: transform;
}
.secrets-marquee-wrap:hover .secrets-track,
.secrets-marquee-wrap:focus-within .secrets-track,
.secrets-track.is-paused {
    animation-play-state: paused;
}
@keyframes scrollSecrets {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-1 * (var(--sec-card-w) + var(--sec-card-gap)) * var(--sec-visible))); }
}

.secrets-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 6;
    transition: all 0.18s;
    font-family: inherit;
}
.secrets-arrow:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ink);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 20px rgba(232,149,31,0.45);
}
.secrets-arrow.prev { left: 14px; }
.secrets-arrow.next { right: 14px; }
.secrets-arrow svg { width: 16px; height: 16px; }

.secret-card {
    flex: 0 0 var(--sec-card-w);
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--navy) center/cover no-repeat;
    background-image: var(--thumb);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}
.secret-card:hover {
    transform: translateY(-5px) scale(1.02);
    border-color: var(--orange);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 0 1px var(--orange);
}
.secret-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.92) 100%);
    z-index: 1;
}
.secret-pill {
    position: absolute;
    top: 12px; left: 12px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(232,149,31,0.35);
    color: var(--orange);
    padding: 4px 9px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    z-index: 3;
    text-transform: uppercase;
    font-family: inherit;
}
.secret-pill .pulse-dot {
    display: inline-block;
    width: 5px; height: 5px;
    background: var(--orange);
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    animation: livePulse 1.6s infinite;
}
.secret-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.96);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.24s;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.secret-card:hover .secret-play {
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.12);
}
.secret-play svg {
    width: 22px; height: 22px;
    color: var(--ink);
    margin-left: 3px;
}
.secret-bottom {
    position: absolute;
    left: 14px; right: 14px; bottom: 12px;
    z-index: 3;
    color: var(--white);
}
.secret-name {
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 2px;
    letter-spacing: -0.2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.secret-score {
    font-size: 10.5px;
    color: var(--orange);
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* YouTube modal */
/* CAT Enquiry Popup — auto-shows after 5s */
.enquiry-modal {
    background: var(--white);
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.32);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalScale 0.28s ease;
    max-height: 92vh;
}
.enquiry-modal .modal-close {
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    z-index: 5;
    top: 12px; right: 12px;
}
.enquiry-modal .modal-close:hover {
    background: var(--orange);
    color: var(--ink);
}
.enquiry-top-tagline {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    color: var(--white);
    padding: 14px 26px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.1px;
    border-bottom: 1px solid rgba(232,149,31,0.25);
}
.enquiry-top-tagline strong {
    color: var(--orange);
    font-weight: 800;
}
.enquiry-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 992 / 284;
    background-color: var(--paper-warm);
    /* background-image: url('popup-alumni-collage.jpg'); Converted to <img> in Blade */
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--orange);
    flex-shrink: 0;
    overflow: hidden;
}
.enquiry-banner .section-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.enquiry-body {
    padding: 22px 26px 26px;
    overflow-y: auto;
}
.enquiry-banner-caption {
    font-size: 12.5px;
    color: var(--slate);
    text-align: center;
    margin: 0 0 16px;
    line-height: 1.5;
    font-weight: 500;
}
.enquiry-banner-caption strong { color: var(--ink); font-weight: 700; }
.enquiry-heading {
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.enquiry-heading em {
    font-family: var(--italic);
    font-style: italic;
    color: var(--orange);
    font-weight: 500;
}
.enquiry-sub {
    font-size: 12.5px;
    color: var(--slate-soft);
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.45;
}
.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enquiry-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.enquiry-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(35,133,244,0.16);
}
.enquiry-input::placeholder { color: var(--slate-soft); }
.enquiry-submit {
    background: var(--orange);
    color: var(--ink);
    border: none;
    padding: 13px 18px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.16s, transform 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    letter-spacing: 0.2px;
    box-shadow: 0 6px 16px rgba(232,149,31,0.25);
}
.enquiry-submit:hover {
    background: var(--orange-deep);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(232,149,31,0.4);
}
.enquiry-submit svg { width: 14px; height: 14px; }
.enquiry-foot {
    font-size: 11px;
    color: var(--slate-soft);
    text-align: center;
    margin-top: 12px;
    line-height: 1.45;
}
.enquiry-success {
    text-align: center;
    padding: 14px 0 4px;
    display: none;
}
.enquiry-success.show { display: block; }
.enquiry-form.hidden { display: none; }
.enquiry-success-check {
    width: 56px; height: 56px;
    background: var(--blue);
    color: var(--white);
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(35,133,244,0.32);
}
.enquiry-success h4 {
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
}
.enquiry-success p {
    font-size: 13px;
    color: var(--slate);
    line-height: 1.5;
}

.yt-modal {
    background: transparent;
    width: 100%;
    max-width: 880px;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.yt-modal iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.yt-modal .modal-close {
    top: -42px;
    right: 0;
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.2);
}
.yt-modal .modal-close:hover {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
}

.secrets-press {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 44px;
    flex-wrap: wrap;
}
.secrets-press-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #888377;
    text-transform: uppercase;
}
.secrets-press-logo {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: #BFBAB2;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ──────────────────────────────────────
   7. HOW IT WORKS
   ────────────────────────────────────── */
.how-section {
    background: var(--navy-deep) !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.how-section::before {
    content: '';
    position: absolute;
    top: -100px; left: -100px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(232,149,31,0.1) 0%, transparent 65%);
    pointer-events: none;
}
.how-section::after {
    content: '';
    position: absolute;
    bottom: -150px; right: -100px;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(91,155,213,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.how-section .container { position: relative; z-index: 1; }
.how-section .section-title { color: #fff; }
.how-section .section-sub { color: #BFBAB2; }
.how-section .eyebrow { color: var(--orange); }

.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.how-step {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(232,149,31,0.4);
    border-radius: 14px;
    padding: 28px 22px 24px;
    position: relative;
    transition: all 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
    cursor: default;
}
.how-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(232,149,31,0.12) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.32s;
    pointer-events: none;
}
.how-step::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
    transition: width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.how-step:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(232,149,31,0.45);
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,149,31,0.2);
}
.how-step:hover::before { opacity: 1; }
.how-step:hover::after { width: 100%; }

.how-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.how-num {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
    color: var(--ink);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.32s;
    box-shadow: 0 6px 18px rgba(232,149,31,0.3);
}
.how-step:hover .how-num {
    transform: scale(1.1) rotate(-4deg);
}
.how-step-icon {
    width: 36px; height: 36px;
    color: rgba(255,255,255,0.35);
    transition: color 0.32s, transform 0.32s;
}
.how-step:hover .how-step-icon { color: var(--orange); transform: rotate(8deg); }

.how-title {
    font-family: inherit;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
    line-height: 1.25;
}
.how-desc {
    font-size: 13px;
    color: #BFBAB2;
    line-height: 1.55;
    margin-bottom: 16px;
    min-height: 60px;
}
.how-time {
    font-size: 10.5px;
    color: var(--orange);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.32s;
}
.how-step:hover .how-time { border-color: rgba(232,149,31,0.3); }

.how-cta-row {
    margin-top: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.how-cta-row .btn { padding: 14px 28px; font-size: 14px; }
.how-cta-text {
    font-size: 13px;
    color: #BFBAB2;
}

/* ──────────────────────────────────────
   8. PROFILE ELEVATION — Beyond just CAT
   ────────────────────────────────────── */
.elevate-section { position: relative; overflow: hidden; background: var(--navy) !important; }
.elevate-section::after {
    content: '';
    position: absolute;
    left: -120px; bottom: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(232,149,31,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.elevate-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.elevate-video {
    position: relative;
    min-height: 480px;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--navy);
    background-image: url('profile-elevate-thumb.jpg');
    background-size: cover;
    background-position: center;
    cursor: pointer;
    box-shadow: 0 24px 56px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.elevate-video:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 70px rgba(232,149,31,0.18), 0 24px 56px rgba(0,0,0,0.5);
}
.elevate-video::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
    z-index: 1;
}
.elevate-video-tag {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--orange);
    color: var(--ink);
    padding: 5px 11px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
}
.elevate-video-tag .vt-dot {
    width: 7px; height: 7px;
    background: var(--ink);
    border-radius: 50%;
    animation: livePulse 1.6s infinite;
}
.elevate-video-duration {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    color: #fff;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    z-index: 3;
    font-family: var(--serif);
}
.elevate-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 78px; height: 78px;
    border-radius: 50%;
    background: rgba(255,255,255,0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.28s ease;
    box-shadow: 0 14px 36px rgba(0,0,0,0.5);
}
.elevate-video:hover .elevate-video-play {
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 18px 50px rgba(232,149,31,0.55);
}
.elevate-video-play svg {
    width: 28px; height: 28px;
    color: var(--ink);
    margin-left: 4px;
}
.elevate-video-meta {
    position: absolute;
    left: 18px; right: 18px; bottom: 16px;
    z-index: 3;
    color: #fff;
}
.elevate-video-meta-title {
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    margin-bottom: 4px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.elevate-video-meta-sub {
    font-size: 12.5px;
    color: #DCD7CE;
    font-weight: 600;
}

/* Right column tile grid — 2×2 square image cards */
.elevate-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.elevate-tile {
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.22s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.elevate-tile:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(232,149,31,0.55);
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(232,149,31,0.16);
}
.elevate-tile-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    background-color: var(--ink);
    transition: transform 0.4s ease;
}
.elevate-tile:hover .elevate-tile-image {
    transform: scale(1.04);
}
.elevate-tile-body {
    padding: 14px 16px 16px;
}
.elevate-tile-title {
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--white);
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: center;
}

/* ──────────────────────────────────────
 9. COURSE HIGHLIGHT
 ────────────────────────────────────── */
.course-section {
    background: var(--white);
}
.course-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    /*grid-template-columns: 1fr 0.85fr;*/
}
.course-left { padding: 44px 44px 40px; }
.course-tag {
    display: inline-block;
    background: var(--orange);
    color: var(--ink);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    margin-bottom: 16px;
}
.course-name {
    font-size: 30px;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.15;
}
.course-tagline {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--slate);
    font-size: 15.5px;
    margin-bottom: 28px;
}
.course-includes {
    list-style: none;
    margin-bottom: 28px;
}
.course-includes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
    color: var(--ink-soft);
}
.course-includes li::before {
    content: '✓';
    color: var(--orange);
    font-weight: 700;
    font-size: 13px;
}
.course-includes li:last-child { border-bottom: none; }
.course-includes strong { color: var(--ink); font-family: inherit; }
.course-right {
    background: var(--ink);
    padding: 44px 36px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.course-right h4 { color: var(--white); font-size: 16px; margin-bottom: 18px; letter-spacing: 0.5px; }
.course-target-list {
    list-style: none;
    margin-bottom: 24px;
}
.course-target-list li {
    padding: 10px 0;
    color: #D8D4CB;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.course-target-list li::before {
    content: '— ';
    color: var(--orange);
    font-weight: 700;
}
.course-right .quote {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 13.5px;
    color: #BFBAB2;
    line-height: 1.6;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* ──────────────────────────────────────
   10. PRICING
   ────────────────────────────────────── */
.pricing-section {
    background: var(--paper-cool) !important;
}
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}
.price-card {
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    padding: 32px 30px 28px;
    transition: all 0.22s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.price-card.featured {
    border-color: var(--orange);
    border-width: 2px;
    box-shadow: 0 16px 40px rgba(232,149,31,0.18);
    transform: scale(1.02);
}
.price-popular {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--orange);
    color: var(--ink);
    padding: 5px 16px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    white-space: nowrap;
}
.price-name {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--slate);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.price-was {
    font-size: 14px;
    color: var(--slate-soft);
    text-decoration: line-through;
    margin-bottom: 4px;
}
.price-now {
    font-family: inherit;
    font-size: 38px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}
.price-now sup {
    font-size: 18px;
    vertical-align: top;
    margin-top: 6px;
    margin-right: 4px;
}
.price-period { font-size: 13px; color: var(--slate); margin-top: 4px; }
.price-save {
    color: var(--orange-deep);
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 8px;
    background: rgba(45,125,70,0.08);
    padding: 4px 10px;
    border-radius: 3px;
    display: inline-block;
}
.price-divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 22px 0 18px;
}
.price-features {
    list-style: none;
    margin-bottom: 24px;
    flex-grow: 1;
}
.price-features li {
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--ink-soft);
    display: flex;
    gap: 10px;
    align-items: baseline;
    line-height: 1.5;
}
.price-features li::before {
    content: '✓';
    color: var(--orange);
    font-weight: 700;
    font-size: 12px;
}
.price-features li.no::before { content: '✕'; color: var(--slate-soft); }
.price-features li.no { color: var(--slate-soft); }
.price-cta-btn {
    width: 100%;
    justify-content: center;
}
.price-anchor {
    background: var(--paper-warm);
    border-left: 3px solid var(--orange);
    padding: 16px 20px;
    margin-bottom: 36px;
    border-radius: 0 4px 4px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.price-anchor-text {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--ink-soft);
    font-size: 15px;
}
.price-anchor-text strong { font-style: normal; color: var(--ink); font-family: inherit; }

/* ──────────────────────────────────────
   11. REAL SCARCITY
   ────────────────────────────────────── */
.scarcity-section {
    background: var(--white);
}
.scarcity-card {
    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
    border: 1px solid var(--line);
    border-left: 4px solid var(--orange);
    border-radius: 6px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.scarcity-card h3 {
    font-size: 26px;
    color: var(--ink);
    margin-bottom: 8px;
}
.scarcity-card p {
    font-size: 15px;
    color: var(--slate);
    margin-bottom: 18px;
    line-height: 1.6;
}
.scarcity-meta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    margin-top: 6px;
}
.scarcity-meta-item .lbl { font-size: 11.5px; color: var(--slate-soft); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.scarcity-meta-item .val {
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
}
.seats-bar-wrap {
    background: var(--white);
    border-radius: 8px;
    padding: 26px 28px;
    border: 1px solid var(--line);
}
.seats-headline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.seats-num {
    font-family: inherit;
    font-size: 36px;
    font-weight: 700;
    color: var(--orange-deep);
    line-height: 1;
}
.seats-num em { color: var(--ink); font-style: normal; font-size: 22px; }
.seats-lbl { font-size: 13px; color: var(--slate); }
.seats-bar {
    height: 10px;
    background: var(--line-soft);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}
.seats-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
    width: 0%;
    transition: width 1.4s ease-out;
    border-radius: 6px;
}
.seats-foot {
    font-size: 12.5px;
    color: var(--slate);
    font-family: Georgia, serif;
    font-style: italic;
}
.seats-foot strong { color: var(--red); font-style: normal; font-family: inherit; }

/* ──────────────────────────────────────
   12. COUNSELLING
   ────────────────────────────────────── */
.counsel-section {
    padding: 0;
    background: var(--paper) !important;
}
.counsel-section .container { padding-top: 0; padding-bottom: 0; }
/* ────────────────────────────────────────
   12-B. FREE WORKSHOP BANNER (replaces counselling)
   ──────────────────────────────────────── */
.workshop-banner {
    background: linear-gradient(135deg, var(--paper-cool) 0%, #DCEEFA 50%, #B5DCF5 100%);
    border-radius: 20px;
    padding: 0;
    margin: 60px 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 380px 1fr;
    align-items: stretch;
    border: 1px solid rgba(35,133,244,0.18);
    box-shadow: 0 18px 48px rgba(26,26,46,0.10);
    min-height: 220px;
}
/* === LEFT VISUAL: graduation cap floating on clouds, drawn entirely with CSS === */
.workshop-banner-visual {
    position: relative;
    overflow: hidden;
}
.workshop-cap {
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -55%);
    width: 220px;
    height: 220px;
}
.workshop-cap-mortarboard {
    position: absolute;
    top: 18px; left: -10px;
    width: 230px;
    height: 38px;
    background: var(--ink);
    border-radius: 4px;
    transform: skewY(-3deg);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    z-index: 4;
}
.workshop-cap-mortarboard::before {
    content: '';
    position: absolute;
    inset: 1px 2px;
    background: linear-gradient(165deg, #2A2A40 0%, var(--ink) 60%, #0F0F1F 100%);
    border-radius: 3px;
}
.workshop-cap-band {
    position: absolute;
    top: 56px; left: 32px;
    width: 156px;
    height: 12px;
    background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
    z-index: 3;
    border-radius: 1px;
}
.workshop-cap-base {
    position: absolute;
    top: 68px; left: 42px;
    width: 138px;
    height: 56px;
    background: linear-gradient(180deg, var(--ink) 0%, #0F0F1F 100%);
    border-radius: 0 0 8px 8px;
    z-index: 2;
    box-shadow: inset 0 -8px 14px rgba(0,0,0,0.4);
}
.workshop-cap-button {
    position: absolute;
    top: 14px; left: 105px;
    width: 12px;
    height: 12px;
    background: var(--orange);
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 8px rgba(232,149,31,0.5);
}
.workshop-cap-tassel {
    position: absolute;
    top: 20px; left: 110px;
    z-index: 5;
}
.workshop-cap-tassel-cord {
    width: 2px;
    height: 56px;
    background: var(--orange);
    transform-origin: top;
    transform: rotate(20deg);
    box-shadow: 0 0 4px rgba(232,149,31,0.4);
}
.workshop-cap-tassel-fringe {
    position: absolute;
    top: 52px; left: 17px;
    width: 14px;
    height: 22px;
    background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
    border-radius: 0 0 3px 3px;
    transform: rotate(20deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.workshop-cap-tassel-fringe::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px);
}
/* Soft white clouds beneath the cap */
.workshop-cloud {
    position: absolute;
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(26,26,46,0.06);
}
.workshop-cloud-1 {
    bottom: 28px; left: 10px;
    width: 70px; height: 70px;
}
.workshop-cloud-2 {
    bottom: 16px; left: 60px;
    width: 110px; height: 110px;
}
.workshop-cloud-3 {
    bottom: 22px; left: 130px;
    width: 80px; height: 80px;
}
.workshop-cloud-4 {
    bottom: 6px; left: 90px;
    width: 60px; height: 60px;
    opacity: 0.7;
}

/* === RIGHT CONTENT === */
.workshop-banner-content {
    padding: 48px 64px 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    text-align: center;
    align-items: center;
}
.workshop-banner-title {
    font-family: inherit;
    font-size: 34px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 12px;
}
.workshop-banner-title em {
    color: var(--orange);
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    font-size: 1.18em;
    letter-spacing: -0.5px;
}
.workshop-banner-sub {
    font-size: 15px;
    color: var(--slate);
    line-height: 1.55;
    margin-bottom: 24px;
    max-width: 540px;
}
.workshop-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    padding: 14px 32px;
    font-size: 14.5px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(232,149,31,0.32);
    letter-spacing: 0.2px;
}
.workshop-banner-btn:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(232,149,31,0.46);
    color: var(--ink);
}

@media (max-width: 900px) {
    .workshop-banner {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .workshop-banner-visual {
        height: 200px;
    }
    .workshop-cap { transform: translate(-50%, -50%) scale(0.85); }
    .workshop-banner-content {
        padding: 28px 28px 36px;
    }
    .workshop-banner-title { font-size: 26px; }
}

.counsel-form {
    background: var(--white);
    color: var(--ink);
    padding: 32px 32px 28px;
    border-radius: 6px;
}
.counsel-form h3 { font-size: 20px; margin-bottom: 6px; }
.counsel-form .form-sub {
    font-family: Georgia, serif;
    font-style: italic;
    color: var(--slate);
    font-size: 13.5px;
    margin-bottom: 22px;
}
.form-group { margin-bottom: 14px; }
.form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--slate);
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.form-input, .form-select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    transition: border 0.18s;
}
.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--orange);
    background: var(--white);
}
.form-trust {
    margin-top: 14px;
    font-size: 12px;
    color: var(--slate-soft);
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
}
.form-trust strong { color: var(--ink); font-style: normal; font-family: inherit; }

/* ──────────────────────────────────────
   13. FAQ
   ────────────────────────────────────── */
.faq-section {
    background: var(--paper);
}
.faq-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 56px;
}
.faq-side .section-title { font-size: 28px; }

/* Social icon row in FAQ left column */
.faq-socials {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 18px;
}
.faq-social {
    width: 46px; height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    flex-shrink: 0;
}
.faq-social svg {
    width: 22px;
    height: 22px;
}
.faq-social:hover {
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.08);
}
.faq-social-whatsapp {
    background: #25D366;
}
.faq-social-whatsapp:hover {
    box-shadow: 0 8px 20px rgba(37,211,102,0.45);
}
.faq-social-instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.faq-social-instagram:hover {
    box-shadow: 0 8px 20px rgba(220,39,67,0.42);
}
.faq-social-facebook {
    background: #1877F2;
}
.faq-social-facebook:hover {
    box-shadow: 0 8px 20px rgba(24,119,242,0.45);
}
.faq-social-youtube {
    background: #FF0000;
}
.faq-social-youtube:hover {
    box-shadow: 0 8px 20px rgba(255,0,0,0.42);
}
.faq-side-cta { margin-top: 6px; }
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s;
}
.faq-item.open { border-color: var(--orange); }
.faq-q {
    padding: 18px 24px;
    font-family: inherit;
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
.faq-q::after {
    content: '+';
    color: var(--orange);
    font-size: 22px;
    font-weight: 700;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-item.open .faq-a { max-height: 480px; }
.faq-a-inner {
    padding: 0 24px 22px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.65;
}
.faq-a-inner strong { color: var(--ink); }
.faq-a-inner a {
    color: var(--orange);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed rgba(232,149,31,0.45);
    transition: color 0.15s, border-color 0.15s;
}
.faq-a-inner a:hover {
    color: var(--orange-deep);
    border-bottom-color: var(--orange-deep);
}

/* === FAQ View All === redirects to /faqs page */
.faq-viewall-wrap {
    text-align: center;
    margin-top: 18px;
}
.faq-viewall-btn {
    display: inline-block;
    background: transparent;
    color: var(--orange);
    border: 1.5px solid var(--orange);
    padding: 12px 26px;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    transition: all 0.18s;
    text-decoration: none;
    text-align: center;
}
.faq-viewall-btn:hover {
    background: var(--orange);
    color: var(--ink);
    box-shadow: 0 6px 16px rgba(232,149,31,0.32);
}

/* ──────────────────────────────────────
   STICKY CTA BAR
   ────────────────────────────────────── */
.sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--ink);
    color: var(--white);
    padding: 14px 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 80;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.18);
    flex-wrap: wrap;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-msg { font-size: 14px; font-family: Arial, sans-serif; }
.sticky-msg strong { color: var(--orange); }
.sticky-cta .btn-primary { padding: 10px 20px; font-size: 13.5px; }
.sticky-cta .close {
    background: none;
    border: none;
    color: #8E8A82;
    cursor: pointer;
    font-size: 20px;
    padding: 0 4px;
    line-height: 1;
}

/* ──────────────────────────────────────
   LIVE ENROLLMENT TOAST (Bottom-Left)
   ────────────────────────────────────── */
.live-toast {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 2000;
    display: none; /* Controlled by JS */
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    align-items: center;
    gap: 16px;
    min-width: 320px;
    max-width: 400px;
    color: #fff;
    font-family: var(--body);
}

.toast-avatar {
    width: 44px;
    height: 44px;
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.toast-name {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}

.toast-msg {
    font-size: 13px;
    color: #BFBAB2;
    line-height: 1.4;
}

.toast-time {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.toast-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}

.toast-close:hover {
    color: #fff;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 640px) {
    .live-toast {
        left: 12px;
        right: 12px;
        bottom: 74px; /* Above mobile sticky bar */
        min-width: 0;
    }
}

/* ──────────────────────────────────────
   FOOTER
   ────────────────────────────────────── */
.footer {
    background: var(--ink);
    color: #BFBAB2;
    padding: 60px 0 24px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 40px;
}
.footer .brand { color: var(--white); margin-bottom: 14px; }
.footer-logo {
    height: 40px;
    margin-bottom: 14px;
    display: block;
    filter: brightness(0) invert(1);
}
.footer-about { font-size: 13.5px; line-height: 1.65; margin: 12px 0 18px; }
.footer-portal-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.footer-portal-links a {
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    text-decoration: none;
    transition: color 0.18s;
}
.footer-portal-links a:hover { color: var(--orange-deep); text-decoration: underline; }
.footer-contact { font-size: 13px; margin-bottom: 18px; }
.footer-contact-title {
    color: var(--white);
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 13px;
}
.footer-contact a {
    color: #BFBAB2;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    transition: color 0.18s;
}
.footer-contact a:hover { color: var(--orange); }
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: all 0.18s;
    text-decoration: none;
}
.footer-social a:hover {
    background: var(--orange);
    color: var(--ink);
    transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }
.footer h5 { color: var(--white); font-size: 12.5px; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 16px; font-family: inherit; font-weight: 800; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 9px; }
.footer ul li a { font-size: 13px; color: #BFBAB2; transition: color 0.18s; text-decoration: none; }
.footer ul li a:hover { color: var(--orange); }
.footer-apps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-app-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.footer-app-row-label {
    font-size: 12px;
    color: var(--white);
    font-weight: 700;
}
.footer-app-badges {
    display: flex;
    gap: 6px;
}
.footer-app-badges a {
    flex: 1;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all 0.18s;
    border: 1px solid rgba(255,255,255,0.12);
}
.footer-app-badges a:hover {
    background: var(--orange);
    color: var(--ink);
    border-color: var(--orange);
}
.footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #8E8A82;
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 980px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* ──────────────────────────────────────
   5b. AUTHORITY & EXPERTISE (Media + Events)
   Dark themed section matching reference screenshot
   ────────────────────────────────────── */
.media-section {
    background: var(--ink);
    color: #FFFFFF;
}
.media-section .section-head {
    text-align: center;
    margin: 0 auto 56px;
    max-width: 760px;
}
.media-section .eyebrow {
    color: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.media-section .eyebrow::before {
    content: '★';
    font-size: 14px;
}
.media-section .section-title {
    color: #FFFFFF;
    max-width: 760px;
    margin: 0 auto 14px;
    font-size: 40px;
    line-height: 1.15;
}
.media-section .section-sub {
    color: #8696AB;
    margin: 0 auto;
    font-size: 16px;
    max-width: 580px;
}
.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.media-col {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 22px;
    display: flex;
    flex-direction: column;
}
.media-col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.media-col-head h3 {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
    font-family: inherit;
    letter-spacing: -0.2px;
}
.media-col-head h3::before {
    margin-right: 8px;
}
.media-col-head.podcast h3::before { content: '🎙'; }
.media-col-head.events h3::before { content: '📅'; }
.media-badge {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 4px 12px;
    border-radius: 14px;
    font-family: inherit;
}
.media-badge.orange {
    background: rgba(232,149,31,0.15);
    color: var(--orange);
    border: 1px solid rgba(232,149,31,0.3);
}
.media-badge.red {
    background: rgba(178,58,44,0.18);
    color: #E5594A;
    border: 1px solid rgba(178,58,44,0.4);
}

/* Podcast cards */
.podcast-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.podcast-card {
    background: var(--navy);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
    overflow: hidden;
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.podcast-card:hover {
    transform: translateY(-3px);
    border-color: rgba(232,149,31,0.45);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.podcast-thumb {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
}
.podcast-thumb.t1 { /* background-image: url('media-mba.jpg'); */ }
.podcast-thumb.t2 { /* background-image: url('media-tedx.jpg'); */ }
.podcast-thumb.t3 { /* background-image: url('media-ashneer.jpg'); */ }
.podcast-thumb.t4 { /* background-image: url('media-iimk.jpg'); */ }
.podcast-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.06);
    transition: background 0.22s;
}
.podcast-card:hover .podcast-thumb::before {
    background: rgba(0,0,0,0.22);
}
.podcast-thumb-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.25s;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    opacity: 0;
}
.podcast-card:hover .podcast-thumb-play {
    opacity: 1;
    background: var(--orange);
    transform: translate(-50%, -50%) scale(1.06);
}
.podcast-thumb-play svg {
    width: 16px; height: 16px;
    color: var(--ink);
    margin-left: 2px;
}
.podcast-body {
    padding: 10px 12px 12px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.podcast-tag {
    display: inline-block;
    background: rgba(232,149,31,0.15);
    color: var(--orange);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
    align-self: flex-start;
    font-family: inherit;
    text-transform: uppercase;
}
.podcast-title {
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.podcast-caption {
    color: #8696AB;
    font-size: 11.5px;
    line-height: 1.45;
    margin-bottom: 10px;
    flex-grow: 1;
}
.podcast-btn {
    background: var(--orange);
    color: var(--ink);
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    align-self: flex-start;
    text-transform: uppercase;
    transition: background 0.18s;
}
.podcast-btn:hover { background: var(--orange-deep); }

/* Event thumbs */
.event-thumbs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.event-thumb {
    aspect-ratio: 16 / 10;
    border-radius: 7px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
    display: block;
    text-decoration: none;
    color: inherit;
}
.event-thumb:hover {
    transform: translateY(-3px);
    border-color: rgba(232,149,31,0.45);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.event-thumb.workshop { /* background-image: url('event-workshop.jpg'); */ }
.event-thumb.live { /* background-image: url('event-live-class.jpg'); */ }
.event-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 35%, transparent 55%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
.event-thumb-title {
    position: absolute;
    top: 10px; left: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0,0,0,0.85);
    font-family: inherit;
    line-height: 1.25;
    z-index: 1;
}
.event-thumb-status {
    position: absolute;
    bottom: 10px; left: 10px;
    background: rgba(0,0,0,0.7);
    color: #FFFFFF;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    font-family: inherit;
    backdrop-filter: blur(4px);
    z-index: 1;
}
.event-thumb-status.live::before {
    content: '';
    width: 6px; height: 6px;
    background: #FF5050;
    border-radius: 50%;
    animation: pulse 1.8s infinite;
}
.event-thumb-duration {
    position: absolute;
    bottom: 10px; right: 10px;
    background: rgba(0,0,0,0.7);
    color: #FFFFFF;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 3px;
    font-weight: 600;
    font-family: var(--serif);
    backdrop-filter: blur(4px);
    z-index: 1;
}

/* Blog list — vertical scroll with 2 visible */
.blog-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}
.blog-list-head h4 {
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.blog-list-head h4::before {
    content: '✎';
    color: var(--orange);
    font-size: 16px;
    line-height: 1;
}
.blog-list-head a {
    font-size: 11.5px;
    color: var(--orange);
    font-weight: 700;
    transition: gap 0.18s, color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.blog-list-head a:hover { color: var(--orange-deep); gap: 7px; }
.blog-scroller {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    flex: 1 1 0;
    min-height: 218px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,149,31,0.4) rgba(255,255,255,0.04);
}
.blog-scroller::-webkit-scrollbar { width: 7px; }
.blog-scroller::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
}
.blog-scroller::-webkit-scrollbar-thumb {
    background: rgba(232,149,31,0.4);
    border-radius: 8px;
}
.blog-scroller::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.blog-card {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.16s, transform 0.16s;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
}
.blog-card + .blog-card { margin-top: 4px; }
.blog-card:hover {
    background: rgba(232,149,31,0.1);
    transform: translateX(2px);
}
.blog-thumb {
    width: 84px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--orange-deep) 0%, var(--orange) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 900;
    font-size: 11px;
    text-align: center;
    line-height: 1.05;
    padding: 6px;
    box-shadow: 0 4px 12px rgba(232,149,31,0.25);
    border: 1px solid rgba(232,149,31,0.35);
}
.blog-thumb.tag-cat   { background: linear-gradient(135deg, #3D7BB8 0%, #5B9BD5 100%); color: #fff; box-shadow: 0 4px 12px rgba(91,155,213,0.3); border-color: rgba(91,155,213,0.4); }
.blog-thumb.tag-non   { background: linear-gradient(135deg, #4A2A6F 0%, #6B3FA0 100%); color: #fff; border-color: rgba(107,63,160,0.4); box-shadow: 0 4px 12px rgba(107,63,160,0.3); }
.blog-thumb.tag-mba   { background: linear-gradient(135deg, var(--orange-deep) 0%, var(--orange) 100%); color: var(--ink); }
.blog-thumb.tag-pi    { background: linear-gradient(135deg, #B23A2C 0%, #D54C3A 100%); color: #fff; border-color: rgba(178,58,44,0.45); box-shadow: 0 4px 12px rgba(178,58,44,0.3); }
.blog-thumb.tag-prep  { background: linear-gradient(135deg, #2A4A3F 0%, #3D6F5C 100%); color: #fff; border-color: rgba(61,111,92,0.45); box-shadow: 0 4px 12px rgba(61,111,92,0.3); }
.blog-thumb.tag-iim   { background: linear-gradient(135deg, #1A1A2E 0%, #2A2A4A 100%); color: var(--orange); border-color: rgba(232,149,31,0.3); }
.blog-info { min-width: 0; flex: 1; }
.blog-eyebrow {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.blog-title {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-meta {
    font-size: 10.5px;
    color: #8E8A82;
    display: flex;
    align-items: center;
    gap: 6px;
}
.blog-meta .dot { width: 3px; height: 3px; background: #8E8A82; border-radius: 50%; }

/* Event list rows */
.event-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.event-row {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 13px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    transition: border-color 0.22s, background 0.22s;
}
.event-row:hover {
    border-color: rgba(232,149,31,0.35);
    background: rgba(255,255,255,0.04);
}
.event-date {
    border: 1.5px solid var(--orange);
    border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    min-width: 48px;
}
.event-date-num {
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    color: var(--orange);
    line-height: 1;
}
.event-date-mo {
    font-size: 9.5px;
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 3px;
    font-family: inherit;
}
.event-info-title {
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.event-info-title .live-dot {
    width: 8px; height: 8px;
    background: #E5594A;
    border-radius: 50%;
    animation: pulse 1.6s infinite;
    display: inline-block;
}
.event-info-meta {
    color: #8696AB;
    font-size: 12px;
    line-height: 1.45;
}
.event-register-btn {
    background: var(--orange);
    color: var(--ink);
    border: none;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s;
}
.event-register-btn:hover { background: var(--orange-deep); }

/* Scroll-triggered fade */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.21, 0.6, 0.35, 1), transform 0.8s cubic-bezier(0.21, 0.6, 0.35, 1);
    will-change: opacity, transform;
}
.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1180px) {
    .nav-link { font-size: 12.5px; padding: 7px 7px; }
    .nav-pdf { padding: 7px 9px; font-size: 12.5px; }
    .nav-cta { margin-left: 6px; }
    .brand-tag { display: none; }
}

@media (max-width: 1060px) {
    .nav-link { padding: 7px 8px; font-size: 12.5px; }
    .nav-cta, .btn-primary { padding: 11px 14px; font-size: 13px; }
    .nav-inner { gap: 6px; padding: 0 16px; }
}

@media (max-width: 980px) {
    .mega { grid-template-columns: 200px 1fr; height: 360px; }
    .mega-preview { display: none; }
    .course-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .courses-tabs { gap: 18px; overflow-x: auto; }
    .courses-tab { font-size: 14px; }
    .exam-spotlight-card { grid-template-columns: 1fr; min-height: 0; position: static; top: auto !important; }
    .exam-spotlight-card.flip .exam-spotlight-image { order: 1; }
    .exam-spotlight-card.flip .exam-spotlight-content { order: 2; }
    .exam-spotlight-image { aspect-ratio: 16 / 10; }
    .exam-spotlight-content { padding: 28px 24px; }
    .exam-spotlight-title { font-size: 26px; }
    .hero-inner, .elevate-inner, .counsel-inner, .scarcity-card, .course-card, .founder-block, .belief-inner { grid-template-columns: 1fr; gap: 32px; }
    .elevate-video { min-height: 0; aspect-ratio: 4 / 3; }
    .elevate-tiles { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 42px; letter-spacing: -1.4px; }
    .toppers-grid, .free-grid, .platform-grid { grid-template-columns: repeat(2, 1fr); }
    .secrets-grid { grid-template-columns: repeat(3, 1fr); }
    .stories-stats { gap: 28px; padding: 22px 0 28px; }
    .story-stat-num { font-size: 26px; }
    .test-grid, .price-grid, .features-grid { grid-template-columns: 1fr; }
    .how-grid { grid-template-columns: repeat(2, 1fr); }
    .how-desc { min-height: 0; }
    .media-grid, .podcast-grid, .event-thumbs-grid { grid-template-columns: 1fr; }
    .media-section .section-title { font-size: 28px; }
    .event-row { grid-template-columns: auto 1fr; }
    .event-row .event-register-btn { grid-column: 1 / -1; justify-self: stretch; padding: 10px; }
    .faq-grid, .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .nav-links { display: none; }
    .modal-header { padding: 18px 20px 14px; }
    .modal-body { padding: 18px 20px 22px; }
    .section { padding: 56px 0; }
    .section-title { font-size: 26px; }
    .founder-block { padding: 28px; }
    .founder-avatar { width: 100px; height: 100px; font-size: 32px; margin: 0 auto; }
}

    /* ==========================================
       FIX CARD ALIGNMENT + CLEAN TAB DESIGN
    ========================================== */

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

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

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

    .course-card{
        background:#fff;
        border:1px solid #E8ECF2;
        border-radius:18px;
        overflow:hidden;
        transition:all .25s ease;
        box-shadow:
            0 1px 2px rgba(16,24,40,.03),
            0 8px 24px rgba(16,24,40,.04);
    }

    .course-card:hover{
        transform:translateY(-4px);
        border-color:rgba(232,149,31,.4);

        box-shadow:
            0 12px 30px rgba(16,24,40,.08),
            0 6px 18px rgba(232,149,31,.08);
    }

    .course-card-body{
        padding:18px;
        display:flex;
        flex-direction:column;
        height:100%;
    }

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

    .course-card-title{
        text-align:center;
        font-size:18px;
        font-weight:800;
        color:#111827;
        line-height:1.3;
        margin:0 0 16px;
    }

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

    .course-card-image{
        position:relative;

        /* remove side blank spacing */
        width:calc(100% + 36px);
        margin-left:-18px;
        margin-right:-18px;

        height:180px;
        overflow:hidden;

        background-size:cover;
        background-position:center;

        margin-bottom:18px;
    }

    .course-card-image::before{
        content:'';
        position:absolute;
        inset:0;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.05) 0%,
                rgba(0,0,0,.58) 100%
            );
    }

    /* ==========================================
       IMAGE BADGE
    ========================================== */

    .course-card-image-badge{
        position:absolute;
        left:18px;
        bottom:18px;
        z-index:2;

        color:#fff;
        font-size:22px;
        font-weight:900;
        line-height:1;
        letter-spacing:-0.7px;

        text-shadow:
            0 3px 12px rgba(0,0,0,.35);
    }

    .course-card-image-badge small{
        display:inline-flex;
        align-items:center;

        margin-top:8px;
        padding:5px 10px;

        border-radius:999px;

        background:rgba(255,255,255,.16);

        font-size:10px;
        font-weight:700;
        letter-spacing:1px;

        color:#FFE0A1;
    }

    /* ==========================================
       FEATURES
    ========================================== */

    .course-card-features {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 11px;
        flex: 1;
        align-items: start;
    }

    .course-card-features li{
        position:relative;

        padding-left:22px;

        font-size:14px;
        font-weight:500;
        line-height:1.45;

        color:#667085;
    }

    .course-card-features li::before{
        content:'✓';

        position:absolute;
        left:0;
        top:0;

        color:#E8951F;
        font-size:14px;
        font-weight:900;
    }

    /* ==========================================
       PRICE
    ========================================== */

    .course-card-price{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:8px;

        margin-top:18px;
        padding-top:16px;

        border-top:1px solid #EEF2F6;
    }

    .course-price-now{
        font-size:24px;
        font-weight:900;
        line-height:1;
        letter-spacing:-1px;

        color:#111827;
    }

    .course-price-was{
        font-size:14px;
        font-weight:700;
        color:#98A2B3;
        text-decoration:line-through;
    }

    .course-price-tag{
        margin-left:auto;

        padding:5px 10px;

        border-radius:999px;

        background:#FFF4E7;

        color:#D17F0F;
        font-size:10px;
        font-weight:800;
        letter-spacing:.5px;
    }

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

    .course-card-ctas{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        margin-top:18px;
    }

    .course-card-ctas .btn{
        height:44px;

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

        border-radius:12px;

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

        transition:all .2s ease;
    }

    /* Secondary */

    .course-btn-secondary{
        background:#fff;
        border:1px solid #D7DFE8;
        color:#111827;
    }

    .course-btn-secondary:hover{
        border-color:#E8951F;
        background:#FFF9F1;
        color:#D17F0F;
    }

    /* Primary */

    .course-btn-primary{
        border:none;

        background:linear-gradient(
            135deg,
            #F5B13A 0%,
            #E8951F 100%
        );

        color:#111827;

        box-shadow:
            0 8px 18px rgba(232,149,31,.18);
    }

    .course-btn-primary:hover{
        transform:translateY(-1px);

        box-shadow:
            0 12px 24px rgba(232,149,31,.28);
    }

    /* ==========================================
       ACTIVE CARD BORDER
    ========================================== */

    .course-card:nth-child(2){
        border-color:rgba(232,149,31,.45);
    }

    /* ==========================================
       CLEAN TAB DESIGN
    ========================================== */

    .courses-tabs{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:34px;

        margin-bottom:34px;

        border-bottom:1px solid #E8ECF2;
    }

    .courses-tab{
        position:relative;

        background:transparent !important;
        border:none !important;
        box-shadow:none !important;

        height:auto;
        padding:0 0 16px;

        border-radius:0;

        font-size:15px;
        font-weight:800;
        letter-spacing:1px;
        text-transform:uppercase;

        color:#667085;

        transition:all .2s ease;
    }

    .courses-tab:hover{
        color:#E8951F;
    }

    /* active underline */

    .courses-tab.active{
        color:#E8951F;
    }

    .courses-tab.active::after{
        content:'';

        position:absolute;
        left:0;
        bottom:-1px;

        width:100%;
        height:3px;

        background:#E8951F;
        border-radius:10px 10px 0 0;
    }

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

    @media(max-width:1024px){

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

    }

    @media(max-width:768px){

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

    }