/* ───────────────────────────────────────────────
     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: #FEA82F;
    --orange-deep: #E8951F;
    --orange-pale: #FFF4E0;

    /* Secondary · Light Blue (used sparingly, for accents) */
    --blue: #2385F4;
    --blue-deep: #1A6FCC;
    --blue-soft: #5B9BD5;
    --blue-pale: #EAF3FE;

    /* Foundation · Navy (was near-black ink) — main dark surfaces */
    --navy: #1a1a2e;
    --navy-deep: #11111f;
    --navy-soft: #242438;

    --ink: #0f0f1c;
    --ink-soft: #0f0f1c;
    --slate: #5F6B78;
    --slate-soft: #95A0AC;

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

    /* Surfaces */
    --paper: #FAFAF7;
    --paper-warm: #FFF4E0;
    --paper-cool: #F0F6FC;
    --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;
  }

  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;
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
  }

  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;
  }

  /* ─── 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);
  }
  .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;
  }

  .nav .btn-dark.nav-cta:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-color: var(--white);
  }

  /* ─── Login / SignUp Modal ─── */
  .login-modal {
    background: var(--white);
    border-radius: 12px;
    width: 100%;
    max-width: 880px;
    max-height: 88vh;
    position: relative;
    animation: modalScale 0.24s ease;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }

  .login-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-modal-close:hover {
    background: rgba(255, 255, 255, 0.32);
  }

  .login-form-side {
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    background: var(--white);
  }

  .login-title {
    font-family: inherit;
    font-size: 26px;
    font-weight: 900;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.6px;
    margin-bottom: 8px;
  }

  .login-title .wave {
    display: inline-block;
    transform-origin: 70% 70%;
    animation: wave 2.4s ease-in-out infinite;
  }

  @keyframes wave {

    0%,
    60%,
    100% {
      transform: rotate(0deg);
    }

    10%,
    30% {
      transform: rotate(14deg);
    }

    20% {
      transform: rotate(-8deg);
    }

    40%,
    50% {
      transform: rotate(14deg);
    }
  }

  .login-sub {
    font-size: 14px;
    color: var(--slate);
    margin-bottom: 30px;
    line-height: 1.4;
  }

  .login-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
    display: block;
  }

  .login-label .req {
    color: var(--red);
    margin-left: 1px;
  }

  .login-input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--line);
    border-radius: 30px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 18px;
  }

  .login-input::placeholder {
    color: var(--slate-soft);
  }

  .login-input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(232, 149, 31, 0.18);
  }

  .login-otp-btn {
    width: 100%;
    padding: 14px;
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    border-radius: 30px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.16s;
    box-shadow: 0 6px 18px rgba(232, 149, 31, 0.32);
    margin-bottom: 22px;
  }

  .login-otp-btn:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    box-shadow: 0 8px 22px rgba(232, 149, 31, 0.45);
    transform: translateY(-1px);
  }

  .login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }

  .login-divider::before,
  .login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
  }

  .login-divider span {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--slate-soft);
    letter-spacing: 1.5px;
  }

  .login-google-btn {
    width: 100%;
    padding: 12px;
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
  }

  .login-google-btn:hover {
    border-color: var(--orange);
    box-shadow: 0 4px 12px rgba(232, 149, 31, 0.16);
  }

  .login-google-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .login-toggle {
    text-align: center;
    font-size: 13.5px;
    color: var(--slate);
  }

  .login-toggle a {
    color: var(--orange-deep);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
  }

  .login-toggle a:hover {
    text-decoration: underline;
  }

  .login-toggle .login-pipe {
    color: var(--slate-soft);
    margin: 0 6px;
  }

  /* Right side — dark + amber accents (page palette) */
  .login-feature-side {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    padding: 50px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
  }

  .login-feature-side::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(232, 149, 31, 0.15) 0%, transparent 70%);
    border-radius: 50%;
  }

  .login-feature-side::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -15%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(232, 149, 31, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }

  .login-feature {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(232, 149, 31, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 1;
    transition: all 0.2s;
  }

  .login-feature:hover {
    background: rgba(232, 149, 31, 0.14);
    border-color: var(--orange);
    transform: translateX(3px);
  }

  .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 ─── */

  #pdfModal .modal-body {
    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;
  }

  .hero-inner {
    position: relative;
    padding: 120px 0 80px;
  }

  .hero-inner--centered {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* Floating Social Proof Cards */
  .hero-floating-card {
    position: absolute;
    width: 240px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: transform 0.3s ease;
    animation: heroFadeUp 1s ease-out forwards;
    opacity: 0;
  }

  .hero-floating-card:hover {
    transform: translateY(-5px) scale(1.02);
  }

  .hero-floating-card--left {
    left: -40px;
    top: 25%;
    animation-delay: 0.8s;
  }

  .hero-floating-card--right {
    right: -40px;
    top: 35%;
    animation-delay: 1s;
  }

  .hfc-img {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
  }

  .hfc-content {
    padding: 16px;
    text-align: left;
  }

  .hfc-tag {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
  }

  .hfc-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
  }

  @media (max-width: 1200px) {
    .hero-floating-card {
      display: 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: 88px;
    line-height: .92;
    color: var(--white);
    margin: 0 auto 18px;
    letter-spacing: -3px;
    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(3, 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.5 WHAT YOU'LL GET — Platform overview
     ────────────────────────────────────── */
  .platform-section {
    background: var(--paper);
  }

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

  .platform-tile {
    background: var(--white);
    border: 1.5px solid rgba(35, 133, 244, 0.35);
    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;
  }

  .platform-tile:hover {
    transform: translateY(-5px);
    border-color: var(--blue);
    box-shadow: 0 18px 38px rgba(35, 133, 244, 0.16);
  }

  .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: var(--orange-pale);
    border: 1px solid rgba(232, 149, 31, 0.35);
    color: var(--orange-deep);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.22s, transform 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(--ink);
    color: var(--orange);
    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(--ink);
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
  }

  .platform-desc {
    font-size: 13px;
    color: var(--slate);
    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(4, 1fr);
    gap: 16px;
  }

  .course-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    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 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .course-card-title {
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    text-align: center;
    line-height: 1.25;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .course-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow: hidden;
  }

  .course-card-features li {
    font-size: 11.5px;
    color: var(--slate);
    line-height: 1.35;
    padding-left: 14px;
    position: relative;
  }

  .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: 7px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    overflow: hidden;
  }

  .course-price-now {
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -0.2px;
    white-space: nowrap;
  }

  .course-price-was {
    font-size: 11px;
    color: var(--slate-soft);
    text-decoration: line-through;
    font-weight: 600;
    white-space: nowrap;
  }

  .course-price-tag {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    color: var(--red);
    background: rgba(178, 58, 44, 0.08);
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
  }

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

  .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: 7px 4px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
  }

  .course-btn-secondary:hover {
    border-color: var(--ink);
    background: var(--paper);
  }

  .course-btn-primary {
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    padding: 7px 4px;
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.2;
    display: inline-block;
    text-decoration: none;
    text-align: center;
  }

  .course-btn-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);
  }

  .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 SLIDER (Horizontal) --- */
  .exam-slider-wrap {
    position: relative;
    margin-top: 48px;
    overflow: visible; /* Ensure arrows are not cut off */
  }

  .spotlight-swiper {
    overflow: hidden;
    padding: 10px 0;
    position: relative;
    width: 100%;
  }

  .exam-spotlight-card {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    min-height: 440px;
    box-shadow: none; /* Removed shadow as per request */
    transition: border-color 0.3s ease;
    isolation: isolate;
  }

  .exam-spotlight-card.reveal {
    opacity: 0;
    transform: translateY(20px);
  }

  .exam-spotlight-card.reveal.in {
    opacity: 1;
    transform: translateY(0);
  }

  .exam-spotlight-card:hover {
    border-color: var(--orange);
  }

  /* Staggered sticky offsets removed - slider uses flex */

  /* Slider Arrows */
  .slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    transition: all 0.25s;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    color: var(--ink);
  }

  .slider-arrow:hover {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
    box-shadow: 0 8px 24px rgba(254, 168, 47, 0.35);
    transform: translateY(-50%) scale(1.08);
  }

  .slider-arrow.prev { left: -75px; }
  .slider-arrow.next { right: -75px; }

  @media (max-width: 1400px) {
    .slider-arrow.prev { left: -30px; }
    .slider-arrow.next { right: -30px; }
  }

  @media (max-width: 1200px) {
    .exam-spotlight-card {
      flex: 0 0 100%;
      flex-direction: column; /* Stack vertically on mobile */
      min-height: 0;
    }
    .exam-spotlight-image {
      height: 240px;
      flex: 0 0 auto;
    }
    .exam-spotlight-content {
      padding: 24px 20px;
    }
    .slider-arrow {
      width: 42px;
      height: 42px;
    }
    .slider-arrow.prev { left: 10px; }
    .slider-arrow.next { right: 10px; }
  }

  @media (max-width: 780px) {
    .slider-arrow { display: none; }
    .exam-slider { padding: 10px 0; }
    .exam-track { gap: 16px; }
  }

  /* (Modern Scroll-driven entrance block removed in favor of reliable JS fallback) */
  /* @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 {
    flex: 0 0 52%; /* Fixed width for image */
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100%;
  }

  .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%);
  }

  .exam-spotlight-content {
    flex: 1; /* Take remaining space */
    padding: 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('../images/home/believe-thumb.jpg');
    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: cover;
    background-position: center top;
    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;
    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%);
  }

  .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-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-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);
  }

  .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-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 {
    width: 100%;
    aspect-ratio: 992 / 284;
    background-color: var(--paper-warm);
    background-image: url('../images/home/popup-alumni-collage.jpg');
    background-size: cover;
    background-position: center;
    border-bottom: 3px solid var(--orange);
    flex-shrink: 0;
  }

  .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('../images/home/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;
  }

  .counsel-banner {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy) 100%);
    border-radius: 20px;
    padding: 56px 64px;
    margin: 60px 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 48px;
    align-items: center;
    border: 1px solid rgba(232, 149, 31, 0.2);
    box-shadow: 0 24px 60px rgba(26, 26, 46, 0.18);
  }

  .counsel-banner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(232, 149, 31, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .counsel-banner::after {
    content: '';
    position: absolute;
    bottom: -50%;
    left: -5%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(232, 149, 31, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }

  .counsel-banner-content {
    position: relative;
    z-index: 1;
  }

  .counsel-banner-eyebrow {
    display: inline-block;
    background: rgba(232, 149, 31, 0.15);
    color: var(--orange);
    border: 1px solid rgba(232, 149, 31, 0.35);
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
  }

  .counsel-banner-title {
    font-family: inherit;
    font-size: 38px;
    font-weight: 900;
    color: var(--white);
    line-height: 1.15;
    letter-spacing: -1.2px;
    margin-bottom: 14px;
  }

  .counsel-banner-title em {
    color: var(--orange);
    font-family: var(--italic);
    font-style: italic;
    font-weight: 600;
    font-size: 1.18em;
    letter-spacing: -0.5px;
  }

  .counsel-banner-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 26px;
  }

  .counsel-banner-stats {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
  }

  .counsel-banner-stat {
    display: flex;
    flex-direction: column;
  }

  .counsel-banner-stat-num {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    letter-spacing: -0.5px;
  }

  .counsel-banner-stat-lbl {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
    font-weight: 600;
  }

  .counsel-banner-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
  }

  .counsel-banner-cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    min-width: 260px;
  }

  .counsel-banner-btn-primary {
    background: var(--orange);
    color: var(--ink);
    border: 1.5px solid var(--orange);
    padding: 16px 28px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(232, 149, 31, 0.36);
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .counsel-banner-btn-primary:hover {
    background: var(--orange-deep);
    border-color: var(--orange-deep);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(232, 149, 31, 0.5);
    color: var(--ink);
  }

  .counsel-banner-btn-secondary {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .counsel-banner-btn-secondary:hover {
    border-color: var(--orange);
    background: rgba(232, 149, 31, 0.1);
    color: var(--orange);
  }

  .counsel-banner-trust {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 4px;
    line-height: 1.5;
  }

  @media (max-width: 900px) {
    .counsel-banner {
      grid-template-columns: 1fr;
      padding: 44px 32px;
      gap: 32px;
    }

    .counsel-banner-title {
      font-size: 30px;
    }

    .counsel-banner-cta {
      min-width: 0;
    }
  }

  .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 notification toast */
  .live-toast {
    position: fixed;
    bottom: 86px;
    left: 24px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: 4px;
    padding: 14px 38px 14px 16px;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 70;
    max-width: 320px;
    animation: slideUp 0.4s ease;
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .toast-avatar {
    width: 38px;
    height: 38px;
    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: 13px;
    flex-shrink: 0;
  }

  .toast-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    font-family: inherit;
  }

  .toast-msg {
    font-size: 12.5px;
    color: var(--slate);
    margin-top: 2px;
  }

  .toast-time {
    font-size: 11px;
    color: var(--slate-soft);
    margin-top: 3px;
    font-style: italic;
    font-family: Georgia, serif;
  }

  .toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: var(--slate-soft);
    cursor: pointer;
    font-size: 14px;
  }


  /* ──────────────────────────────────────
     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('../images/home/media-mba.jpg');
  }

  .podcast-thumb.t2 {
    background-image: url('../images/home/media-tedx.jpg');
  }

  .podcast-thumb.t3 {
    background-image: url('../images/home/media-ashneer.jpg');
  }

  .podcast-thumb.t4 {
    background-image: url('../images/home/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('../images/home/event-workshop.jpg');
  }

  .event-thumb.live {
    background-image: url('../images/home/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.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Responsive */

  @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 {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .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;
    }
  }