/* ============================================================================
   KARIGOR IT ACADEMY — "CORTEX" DARK THEME
   ----------------------------------------------------------------------------
   Loaded LAST, after tokens.css / base.css / sections.css / courses.css.
   It re-skins the entire site purely by cascade: not one existing selector,
   class name, id or data-attribute is renamed or removed anywhere else.

   Structure
     00  Palette + token overrides
     01  Page shell, typography, scrollbar
     02  Motion contract (GSAP handover + reduced motion)
     03  Buttons
     04  Surfaces: cards, glass, badges, inputs, modals, toasts
     05  Navbar / drawer / bottom nav / account menu
     06  HERO — WebGL canvas + overlay UI
     07  Showcase (relocated admin slider)
     08  Section rhythm + all content blocks
     09  Footer + floating actions
     10  Responsive + performance guards
   ========================================================================= */


/* ============================================================
   00 · PALETTE + TOKEN OVERRIDES
   Re-pointing the existing tokens flips ~70% of the site in one
   move, because tokens.css already drives every component.
   ============================================================ */
:root {
  /* ---- Cortex core palette ---- */
  --cx-void:        #000000;
  --cx-bg:          #03040A;
  --cx-surface:     #070A14;
  --cx-surface-2:   #0B0F1E;
  --cx-surface-3:   #111729;

  --cx-cyan:        #4DE3FF;
  --cx-cyan-soft:   #9BF0FF;
  --cx-blue:        #2F7BFF;
  --cx-blue-deep:   #1B4FD8;
  --cx-violet:      #7A5CFF;

  --cx-text:        #E9F1FF;
  --cx-text-dim:    #A6B8DA;
  --cx-text-mute:   #7185A9;

  --cx-line:        rgba(125, 178, 255, 0.13);
  --cx-line-soft:   rgba(125, 178, 255, 0.08);
  --cx-line-hot:    rgba(77, 227, 255, 0.55);

  --cx-glow-cyan:   0 0 34px rgba(77, 227, 255, 0.30);
  --cx-glow-blue:   0 0 40px rgba(47, 123, 255, 0.34);
  --cx-glow-text:   0 0 26px rgba(77, 227, 255, 0.35);

  /* ---- Re-point the legacy tokens ---- */
  --cloud:         var(--cx-bg);          /* page background            */
  --cloud-tint:    #05070F;               /* .section-tint              */
  --ink-navy:      #04060D;               /* dark surfaces + footer     */

  --grey-900:      var(--cx-text);        /* body text (base.css:15)    */
  --grey-700:      var(--cx-text-dim);
  --grey-500:      var(--cx-text-mute);
  --grey-300:      #4E5E80;
  --grey-100:      var(--cx-line);        /* hairline borders           */

  --royal:         #55B4FF;               /* accent text / eyebrows     */
  --cobalt-glow:   var(--cx-blue);
  --sky-ice:       var(--cx-cyan-soft);
  --cyan-spark:    var(--cx-cyan);
  --accent-bright: var(--cx-cyan);
  --accent-orange:      #8C6BFF;          /* warm accent → violet       */
  --accent-orange-soft: #B49CFF;

  /* ---- Gradients ---- */
  --grad-hero:  linear-gradient(150deg, #05070F 0%, #081228 40%, #0B1A3C 72%, #071026 100%);
  --grad-brand: linear-gradient(100deg, var(--cx-blue-deep) 0%, var(--cx-blue) 45%, var(--cx-cyan) 100%);
  --grad-ice:   linear-gradient(180deg, #04060E 0%, #070B18 100%);
  --grad-card:  linear-gradient(158deg, rgba(22, 31, 54, 0.78) 0%, rgba(10, 14, 27, 0.92) 55%, rgba(6, 9, 18, 0.96) 100%);
  --grad-glow-spot:   radial-gradient(circle, rgba(77,227,255,0.30) 0%, rgba(77,227,255,0) 70%);
  --grad-glow-orange: radial-gradient(circle, rgba(122,92,255,0.42) 0%, rgba(47,123,255,0.16) 45%, rgba(47,123,255,0) 72%);

  /* ---- Glass ---- */
  --glass-fill-light:  rgba(14, 20, 38, 0.62);
  --glass-fill-dark:   rgba(6, 9, 18, 0.72);
  --glass-fill-navbar: rgba(6, 9, 20, 0.66);
  --glass-border:      var(--cx-line);
  --glass-border-dark: var(--cx-line);
  --glass-highlight:   rgba(160, 210, 255, 0.16);
  --glass-blur:        20px;
  --glass-blur-sm:     12px;
  --glass-shadow:      0 24px 70px -28px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(125,178,255,0.07) inset;
  --glass-shadow-dark: var(--glass-shadow);

  /* ---- Shadows ---- */
  --shadow-card:    0 18px 48px -24px rgba(0, 0, 0, 0.92);
  --shadow-card-hi: 0 28px 70px -22px rgba(0, 0, 0, 0.95), 0 0 44px -14px rgba(77, 227, 255, 0.34);

  /* ---- Typography — geometric sans, Bengali preserved ----
     Inter carries the Latin glyphs; Anek Bangla catches every
     Bengali codepoint through per-glyph font fallback, so all
     existing বাংলা copy renders exactly as before. */
  --font-bn:   'Inter', 'Anek Bangla', 'Noto Sans Bengali', sans-serif;
  --font-en:   'Space Grotesk', 'Inter', 'Anek Bangla', sans-serif;
  --font-data: 'Space Grotesk', 'Inter', 'Anek Bangla', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;

  color-scheme: dark;
}


/* ============================================================
   01 · PAGE SHELL
   ============================================================ */
html {
  background: var(--cx-void);
  /* Guarantees the Three.js canvas can never push the page sideways. */
  overflow-x: hidden;
}

body {
  background: var(--cx-bg);
  color: var(--cx-text);
  overflow-x: hidden;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fixed aurora field behind everything — gives the black depth
   instead of reading as flat #000. Non-interactive, GPU-cheap. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(58% 42% at 78% 6%,  rgba(47, 123, 255, 0.16) 0%, transparent 68%),
    radial-gradient(48% 38% at 12% 34%, rgba(122, 92, 255, 0.12) 0%, transparent 70%),
    radial-gradient(62% 46% at 50% 104%, rgba(77, 227, 255, 0.10) 0%, transparent 72%);
  pointer-events: none;
}
/* Technical substrate — a fine grid crossed with a dot matrix. Two different
   frequencies read as engineered texture rather than as graph paper. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(rgba(125, 178, 255, 0.16) 1px, transparent 1.4px),
    linear-gradient(rgba(125, 178, 255, 0.040) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 178, 255, 0.040) 1px, transparent 1px);
  background-size: 26px 26px, 78px 78px, 78px 78px;
  mask-image: radial-gradient(ellipse 92% 72% at 50% 16%, #000 0%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse 92% 72% at 50% 16%, #000 0%, transparent 84%);
  pointer-events: none;
}

/* ---- Film grain ----
   A single inline SVG turbulence tile, blended over everything. It is what
   stops large flat black areas looking like dead pixels, and it hides the
   colour banding that dark gradients produce on 8-bit panels.
   Fixed + pointer-events:none, so it costs one composited layer and nothing
   else. */
.cx-grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* mix-blend-mode on a full-screen fixed layer is expensive to composite on
   phones, so mobile drops the blend and just tints. */
@media (max-width: 640px) { .cx-grain { opacity: 0.10; mix-blend-mode: normal; } }

/* ---- Section texture ----
   Each section carries a faint diagonal hatch so the page reads as layered
   material instead of flat panels. */
.section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(125, 178, 255, 0.022) 0px,
    rgba(125, 178, 255, 0.022) 1px,
    transparent 1px,
    transparent 9px
  );
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.section > .container, .section > .orange-glow { position: relative; z-index: 1; }

/* Glowing hairline where sections meet. */
.section + .section::after {
  content: "";
  position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77, 227, 255, 0.30), transparent);
  pointer-events: none;
}

h1, h2, h3, h4, h5 { color: var(--cx-text); letter-spacing: -0.025em; }
h2 { font-family: var(--font-en); }

::selection { background: rgba(77, 227, 255, 0.28); color: #fff; }

/* Scrollbars */
* { scrollbar-color: rgba(125,178,255,0.22) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cx-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(47,123,255,0.5), rgba(77,227,255,0.4));
  border-radius: 999px; border: 2px solid var(--cx-void);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--cx-blue), var(--cx-cyan)); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cx-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(77, 227, 255, 0.14);
}

.skip-link { background: var(--cx-cyan); color: #04060D; font-weight: 700; }

.eyebrow {
  color: var(--cx-cyan);
  letter-spacing: 0.2em;
  font-family: var(--font-data);
  text-shadow: 0 0 20px rgba(77, 227, 255, 0.4);
}
.eyebrow::before {
  background: var(--cx-cyan);
  box-shadow: 0 0 10px var(--cx-cyan), 0 0 20px rgba(77,227,255,0.6);
}

.text-grad {
  background: linear-gradient(100deg, #fff 0%, var(--cx-cyan-soft) 45%, var(--cx-blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ============================================================
   02 · MOTION CONTRACT
   `common.js initReveal()` stays the fallback. The instant
   animations.js confirms GSAP is live it sets html.gsap-on, and
   these rules stand the CSS reveal down so the two never fight.
   ============================================================ */
html.gsap-on .reveal,
html.gsap-on .reveal-stagger.in-view > * {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}

/* Hero copy pre-state. Gated on html.js-anim, which index.html's inline
   script sets and then clears after 3s — so a blocked CDN can never
   strand this text invisible. */
html.js-anim .cortex-hero [data-hero-anim] {
  opacity: 0;
  transform: translateY(26px);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  html.js-anim .cortex-hero [data-hero-anim] { opacity: 1; transform: none; }
  body::before, body::after { animation: none; }
}


/* ============================================================
   02B · POINTER INTERACTIONS
   animations.js writes --mx / --my (cursor position inside the
   element) and --tilt-x / --tilt-y. All the painting happens here,
   so if that script never runs nothing is missing — the plain
   hover states below still apply.
   ============================================================ */
html.cx-pointer-fx .cc-card,
html.cx-pointer-fx .feat-card,
html.cx-pointer-fx .flow-step,
html.cx-pointer-fx .smart7-card,
html.cx-pointer-fx .video-card,
html.cx-pointer-fx .testi-card,
html.cx-pointer-fx .gallery-item,
html.cx-pointer-fx .instructor-card,
html.cx-pointer-fx .stats-card,
html.cx-pointer-fx .newsletter-card {
  transform-style: preserve-3d;
  transition: transform 380ms var(--ease-out), border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
html.cx-pointer-fx .cx-tilting {
  transform: perspective(900px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             translateY(-4px) scale(1.012);
  transition: transform 140ms linear, border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}

/* Cursor-tracking sheen. ::after is already used by .btn-primary, so this
   rides on a separate stacking layer via background-image on the element. */
html.cx-pointer-fx .cc-card,
html.cx-pointer-fx .feat-card,
html.cx-pointer-fx .flow-step,
html.cx-pointer-fx .smart7-card,
html.cx-pointer-fx .video-card,
html.cx-pointer-fx .instructor-card {
  background-image:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
      rgba(77, 227, 255, 0.10) 0%, transparent 62%),
    var(--grad-card);
}
html.cx-pointer-fx .btn-primary,
html.cx-pointer-fx .btn-glass,
html.cx-pointer-fx .btn-glass-dark,
html.cx-pointer-fx .quick-cat-chip,
html.cx-pointer-fx .skill-chip { position: relative; overflow: hidden; }
html.cx-pointer-fx .btn-glass::before,
html.cx-pointer-fx .btn-glass-dark::before,
html.cx-pointer-fx .quick-cat-chip::before,
html.cx-pointer-fx .skill-chip::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%),
    rgba(77, 227, 255, 0.22) 0%, transparent 65%);
  opacity: 0; transition: opacity 260ms var(--ease-out);
}
html.cx-pointer-fx .btn-glass:hover::before,
html.cx-pointer-fx .btn-glass-dark:hover::before,
html.cx-pointer-fx .quick-cat-chip:hover::before,
html.cx-pointer-fx .skill-chip:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.cx-pointer-fx .cx-tilting { transform: none; }
}


/* ============================================================
   03 · BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-bn);
  letter-spacing: 0.005em;
  position: relative;
  transition: transform 220ms var(--ease-spring),
              box-shadow 320ms var(--ease-out),
              background 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              color 220ms var(--ease-out);
}

/* Primary — glowing gradient pill ("Get a Free Audit" energy).
   The ::after layer is a brighter copy of the gradient that fades
   in on hover, so the glow shifts without repainting the base. */
.btn-primary {
  background: var(--grad-brand);
  background-size: 180% 100%;
  color: #ffffff;
  font-weight: 700;
  border: 1px solid rgba(155, 240, 255, 0.34);
  box-shadow:
    0 10px 30px -10px rgba(47, 123, 255, 0.75),
    0 0 24px -6px rgba(77, 227, 255, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--cx-blue) 0%, var(--cx-cyan) 60%, #CFF8FF 100%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.035);
  box-shadow:
    0 16px 44px -12px rgba(47, 123, 255, 0.9),
    0 0 46px -6px rgba(77, 227, 255, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active { transform: scale(0.97); }

/* Glass — outlined, lights up its border on hover */
.btn-glass {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cx-line);
  color: var(--cx-text);
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: none;
}
.btn-glass:hover {
  background: rgba(77, 227, 255, 0.09);
  border-color: var(--cx-line-hot);
  color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 30px -8px rgba(77, 227, 255, 0.6);
}

.btn-glass-dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(155, 240, 255, 0.24);
  color: #fff;
}
.btn-glass-dark:hover {
  background: rgba(77, 227, 255, 0.14);
  border-color: var(--cx-line-hot);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 32px -10px rgba(77, 227, 255, 0.65);
}

.btn-ghost { color: var(--cx-text-dim); }
.btn-ghost:hover { background: rgba(77, 227, 255, 0.08); color: var(--cx-cyan); }

/* Register CTA — kept as the single loudest action, retuned to
   a violet/magenta that belongs in the Cortex palette. */
.btn-register {
  background: linear-gradient(100deg, #7A5CFF 0%, #B14BFF 55%, #FF5CE1 100%);
  color: #fff;
  border: 1px solid rgba(255, 160, 245, 0.4);
  box-shadow: 0 0 0 0 rgba(177, 75, 255, 0.5), 0 12px 34px -12px rgba(177, 75, 255, 0.85);
}
@keyframes btn-register-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(177,75,255,0.5), 0 12px 34px -12px rgba(177,75,255,0.85); }
  70%  { box-shadow: 0 0 0 16px rgba(177,75,255,0), 0 12px 34px -12px rgba(177,75,255,0.85); }
  100% { box-shadow: 0 0 0 0 rgba(177,75,255,0), 0 12px 34px -12px rgba(177,75,255,0.85); }
}
.btn-register:hover { transform: translateY(-2px) scale(1.035); }

.btn[disabled] { opacity: 0.35; box-shadow: none; border-color: var(--cx-line-soft); }


/* ============================================================
   04 · SURFACES
   ============================================================ */
.glass {
  background: var(--glass-fill-light);
  border: 1px solid var(--cx-line);
  box-shadow: var(--glass-shadow);
}
.glass::before {
  background: linear-gradient(180deg, rgba(160, 210, 255, 0.10) 0%, rgba(160, 210, 255, 0) 26%);
}

.card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  transition: transform 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out),
              border-color 420ms var(--ease-out);
}
.card-hover:hover {
  transform: translateY(-6px);
  border-color: var(--cx-line-hot);
  box-shadow: var(--shadow-card-hi);
}

/* Badges */
.badge-cyan {
  background: rgba(77, 227, 255, 0.09);
  border: 1px solid rgba(77, 227, 255, 0.30);
  color: var(--cx-cyan-soft);
  text-shadow: 0 0 16px rgba(77, 227, 255, 0.5);
}
.badge-blue { background: rgba(47, 123, 255, 0.12); color: #8CC4FF; border: 1px solid rgba(47,123,255,0.28); }
.badge-live { background: rgba(0, 230, 160, 0.10); color: #4DFFC3; border: 1px solid rgba(0, 230, 160, 0.32); }
.badge-live::before { background: #4DFFC3; box-shadow: 0 0 10px #4DFFC3; }
.badge-discount { background: rgba(255, 92, 225, 0.12); color: #FF9BEC; border: 1px solid rgba(255, 92, 225, 0.32); }

/* Inputs — dark wells with a cyan focus ring */
.field-row input,
.newsletter-form input,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], input[type="date"], textarea, select {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cx-line);
  color: var(--cx-text);
  font-family: var(--font-bn);
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--cx-text-mute); }
.field-row input:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--cx-line-hot);
  background: rgba(77, 227, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(77, 227, 255, 0.12), 0 0 28px -8px rgba(77, 227, 255, 0.6);
}
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cx-text);
  -webkit-box-shadow: 0 0 0 1000px #0B0F1E inset;
  caret-color: var(--cx-text);
}
.field-error { color: #FF7A9C; }

/* Modals */
.modal-overlay { background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-box {
  background: linear-gradient(158deg, #131B2E 0%, #080C18 100%);
  border: 1px solid var(--cx-line);
  box-shadow: 0 40px 100px -30px #000, 0 0 60px -20px rgba(77, 227, 255, 0.35);
  color: var(--cx-text);
}
.modal-box .modal-hint { color: var(--cx-text-mute); }
.cropper-frame { background: #05070F; box-shadow: 0 0 0 1px var(--cx-line-hot), 0 0 34px -10px rgba(77,227,255,0.6); }

/* Toasts */
.toast { border: 1px solid var(--cx-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.toast-info    { background: rgba(11, 15, 30, 0.94); color: var(--cx-text); box-shadow: 0 0 34px -12px rgba(77,227,255,0.6); }
.toast-success { background: rgba(6, 40, 30, 0.94); color: #7DFFCE; border-color: rgba(77,255,195,0.34); }
.toast-error   { background: rgba(46, 8, 22, 0.94); color: #FF9CB4; border-color: rgba(255,122,156,0.34); }

/* Skeletons */
.skeleton { background: linear-gradient(90deg, #0A0E1A 25%, #141C31 37%, #0A0E1A 63%); background-size: 400% 100%; }


/* ============================================================
   05 · NAVBAR / DRAWER / BOTTOM NAV
   ============================================================ */
.navbar {
  background: var(--glass-fill-navbar);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--cx-line);
  box-shadow: 0 20px 50px -30px #000;
}
.navbar-wrap.scrolled .navbar {
  background: rgba(4, 6, 14, 0.86);
  border-color: rgba(125, 178, 255, 0.20);
  box-shadow: 0 24px 60px -30px #000, 0 0 40px -22px rgba(77, 227, 255, 0.55);
}
.brand img {
  border-radius: 9px;
  box-shadow: 0 0 22px -6px rgba(77, 227, 255, 0.6);
}
.brand-name { color: var(--cx-text); }        /* was var(--ink-navy) */
.brand-name small { color: var(--cx-text-mute); }

.nav-links a { color: var(--cx-text-dim); }
.nav-links a:hover { color: #fff; background: rgba(77, 227, 255, 0.08); }
.nav-links a.active { color: var(--cx-cyan); background: rgba(77, 227, 255, 0.10); }
/* Animated underline on the active link */
.nav-links a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--cx-cyan); box-shadow: 0 0 10px var(--cx-cyan);
}

.menu-toggle { background: rgba(77, 227, 255, 0.10); border: 1px solid var(--cx-line); color: var(--cx-text); }
.menu-toggle:hover { background: rgba(77, 227, 255, 0.18); border-color: var(--cx-line-hot); }

.nav-account-trigger { background: rgba(77,227,255,0.08); border: 1px solid var(--cx-line); color: var(--cx-text); }
.nav-account-trigger:hover { background: rgba(77,227,255,0.16); border-color: var(--cx-line-hot); }
.nav-account-trigger svg { color: var(--cx-text-mute); }
.nav-account-menu {
  background: rgba(8, 11, 22, 0.96);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--cx-line);
  box-shadow: 0 30px 70px -28px #000, 0 0 40px -18px rgba(77,227,255,0.4);
}
.nav-account-menu a, .nav-account-menu button { color: var(--cx-text-dim); }
.nav-account-menu a:hover, .nav-account-menu button:hover { background: rgba(77,227,255,0.10); color: var(--cx-cyan); }
.nav-account-menu .nav-account-logout { color: #FF7A9C; }
.mobile-drawer-actions .nav-account-trigger { background: rgba(77,227,255,0.06); }

.mobile-drawer { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mobile-drawer-panel {
  background: rgba(7, 10, 20, 0.96);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--cx-line);
  box-shadow: 0 40px 90px -30px #000, 0 0 60px -26px rgba(77,227,255,0.5);
}
.mobile-drawer-panel a { color: var(--cx-text-dim); }
.mobile-drawer-panel a:hover, .mobile-drawer-panel a:focus-visible { background: rgba(77,227,255,0.10); color: var(--cx-cyan); }
.mobile-drawer-actions { border-top: 1px solid var(--cx-line); }

.mobile-bottom-nav {
  background: rgba(5, 8, 16, 0.88);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--cx-line);
  box-shadow: 0 20px 50px -24px #000;
}
.mobile-bottom-nav a { color: var(--cx-text-mute); }
.mobile-bottom-nav a.active { color: var(--cx-cyan); background: rgba(77, 227, 255, 0.12); }


/* ============================================================
   06 · HERO — full-viewport WebGL canvas + overlay UI
   ============================================================ */
.cortex-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;            /* excludes mobile browser chrome */
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--cx-void);
  overflow: hidden;
  isolation: isolate;
}

.hero-canvas-wrap {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;          /* mouse events are read on window, not here */
}
#brainCanvas {
  display: block;
  width: 100%; height: 100%;
  /* Sized in device pixels by animations.js; CSS keeps it fluid. */
}

/* Grid substrate + glow blobs, retuned for the black hero */
.cortex-hero .hero-grid-fade {
  background-image:
    linear-gradient(rgba(125, 178, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 178, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 0%, transparent 76%);
}
.cortex-hero .hero-blob.b1 { width: 640px; height: 640px; top: -200px; right: -160px; opacity: 0.75; }
.cortex-hero .hero-blob.b2 {
  width: 520px; height: 520px; bottom: -200px; left: -140px;
  background: radial-gradient(circle, rgba(122, 92, 255, 0.32) 0%, rgba(122, 92, 255, 0) 70%);
}

/* Vignette — darkens BOTH the frame and the centre. The centre matters
   most: the headline sits directly over the densest part of the cloud,
   and without this scrim the particles read straight through the type. */
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 64% at 50% 50%, transparent 34%, rgba(0,0,0,0.50) 80%, #000 100%),
    linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.06) 24%, transparent 60%, rgba(0,0,0,0.88) 100%);
  pointer-events: none;
}

.hero-overlay { position: relative; z-index: 2; width: 100%; }
.cortex-hero .hero-inner {
  display: block;                /* was a 2-col grid — now single centred column */
  padding: 132px 0 120px;
}
.cortex-hero .hero-copy {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
/* Local scrim — a soft dark ellipse sitting between the particle cloud and
   the type. .hero-overlay owns the stacking context (z-index:2), so z-index:-1
   places this BELOW the copy but still ABOVE the canvas. */
/* NO panel and NO backdrop-filter behind the hero copy.
   A blurred glass panel large enough to sit behind the headline also blurs
   the brain across the whole centre of the hero — it hid the exact thing it
   was meant to sit in front of. Legibility now comes from halos welded to
   the glyphs themselves (see .hero-headline / .hero-sub below), so the
   particle cloud stays crisp and fully visible everywhere, including the
   gaps between letters. */
.cortex-hero .hero-copy .badge {
  margin-bottom: var(--sp-5);
  background: rgba(4, 8, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.75);
}

.cortex-hero .hero-headline {
  font-size: clamp(2.3rem, 6.4vw, 4.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-5);
  /* The gradient fill is background-clip:text, so text-shadow would draw a
     blurred ghost glyph instead of a shadow. drop-shadow works on the
     rendered alpha.

     Stacked tight-to-wide: the first two pass close to the glyph edge and do
     the contrast work, the last two spread a soft pool that separates the
     block from the cloud — without covering it. */
  filter:
    drop-shadow(0 0 3px rgba(0, 0, 0, 1))
    drop-shadow(0 0 8px rgba(0, 0, 0, 0.98))
    drop-shadow(0 2px 22px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 54px rgba(0, 0, 0, 0.75));
}
.cortex-hero .hero-headline .bn-line {
  background: linear-gradient(178deg, #FFFFFF 12%, #C7DDFF 62%, #7FA8E8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  padding-bottom: 0.06em;        /* stops descenders clipping under background-clip */
}
.cortex-hero .hero-headline .en-line {
  font-family: var(--font-en);
  font-size: 0.30em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-cyan);
  /* Dark halo first (legibility), cyan bloom second (the look). */
  text-shadow:
    0 0 3px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 0.98),
    0 2px 22px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(77, 227, 255, 0.35);
  margin-top: var(--sp-4);
  opacity: 0.92;
}

.cortex-hero .hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  color: #C3D3EE;
  max-width: 620px;
  margin: 0 auto var(--sp-7);
  line-height: 1.75;
  text-shadow:
    0 0 3px rgba(0, 0, 0, 1),
    0 0 9px rgba(0, 0, 0, 0.98),
    0 2px 20px rgba(0, 0, 0, 0.9),
    0 0 44px rgba(0, 0, 0, 0.7);
}
.cortex-hero .hero-cta-row { justify-content: center; margin-bottom: var(--sp-7); }
.cortex-hero .hero-cta-row .btn { padding: 16px 34px; min-height: 54px; }

.cortex-hero .hero-microtrust { justify-content: center; gap: var(--sp-6); }
.cortex-hero .hero-microtrust .mt-item {
  color: var(--cx-text-dim);
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cx-line);
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.cortex-hero .hero-microtrust strong {
  color: var(--cx-cyan);
  font-family: var(--font-data);
  text-shadow: 0 0 18px rgba(77, 227, 255, 0.55);
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--cx-text-mute);
}
.hsc-label { font-family: var(--font-data); font-size: 0.6rem; letter-spacing: 0.34em; }
.hsc-rail {
  width: 22px; height: 36px; border-radius: 999px;
  border: 1px solid var(--cx-line); position: relative;
  display: block;
}
.hsc-dot {
  position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; border-radius: 3px;
  background: var(--cx-cyan); box-shadow: 0 0 10px var(--cx-cyan);
  transform: translateX(-50%);
  animation: hsc-travel 2s var(--ease-out) infinite;
}
@keyframes hsc-travel {
  0%   { transform: translate(-50%, 0);   opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, 13px); opacity: 0; }
}
.hero-scroll-cue:hover { color: var(--cx-cyan); }
@media (prefers-reduced-motion: reduce) { .hsc-dot { animation: none; } }


/* ============================================================
   07 · SHOWCASE — relocated admin slider
   ============================================================ */
.showcase-section[hidden] { display: none !important; }
.showcase-section { padding-top: var(--sp-8); }
.hero-slider {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--cx-line);
  box-shadow: 0 40px 100px -40px #000, 0 0 70px -30px rgba(47, 123, 255, 0.6);
  border-radius: var(--radius-xl);
  transition: border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.hero-slider:hover { border-color: var(--cx-line-hot); box-shadow: 0 40px 100px -40px #000, 0 0 90px -28px rgba(77, 227, 255, 0.65); }
.hero-slide.image-only { background: var(--cx-surface); }
.hero-slider-arrow {
  background: rgba(6, 9, 18, 0.72);
  border: 1px solid var(--cx-line);
  color: var(--cx-text);
}
.hero-slider-arrow:hover { background: rgba(77, 227, 255, 0.18); border-color: var(--cx-line-hot); }
.hero-slider-dots button { background: rgba(180, 210, 255, 0.28); }
.hero-slider-dots button[aria-current="true"] { background: var(--cx-cyan); box-shadow: 0 0 14px var(--cx-cyan); }


/* ============================================================
   08 · SECTION RHYTHM + CONTENT BLOCKS
   ============================================================ */
/* Kill the light alternating stripe from base.css:51 */
.section,
.section:nth-of-type(even) { background: transparent; }
.section.section-tint { background: var(--cloud-tint); }
.section.section-ice   { background: var(--grad-ice); }

/* Hairline dividers between sections instead of colour blocks */
.section.section-tint, .section.section-ice {
  border-top: 1px solid var(--cx-line-soft);
  border-bottom: 1px solid var(--cx-line-soft);
}

.section-head p { color: var(--cx-text-dim); }
.orange-glow { filter: blur(80px); opacity: 0.7; }

/* ---- Stats ---- */
.stats-strip { margin-top: var(--sp-8); }
.stats-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: 0 30px 80px -40px #000, 0 0 60px -34px rgba(77, 227, 255, 0.5);
}
.stat-num {
  color: #fff;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cx-cyan) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--cx-text-mute); letter-spacing: 0.06em; }
.stat-item { position: relative; }
.stat-item + .stat-item::before {
  content: ""; position: absolute; left: calc(var(--sp-6) / -2); top: 12%; bottom: 12%;
  width: 1px; background: linear-gradient(180deg, transparent, var(--cx-line), transparent);
}
@media (max-width: 719px) { .stat-item + .stat-item::before { display: none; } }

/* ---- Line-art icons (replacing the old emoji glyphs) ----
   They inherit currentColor, so they take the cyan hover state with the
   rest of the chip instead of staying a fixed full-colour emoji. */
.qc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex-shrink: 0; color: var(--cx-cyan);
  transition: color 220ms var(--ease-out), filter 220ms var(--ease-out);
}
.qc-icon .qc-ico { width: 100%; height: 100%; display: block; }
.quick-cat-chip:hover .qc-icon,
.mobile-drawer-panel a:hover .qc-icon {
  color: #fff;
  filter: drop-shadow(0 0 7px rgba(77, 227, 255, 0.9));
}
.gallery-placeholder span { width: 30px; height: 30px; color: var(--cx-text-mute); opacity: 1; }
.gallery-placeholder span .qc-ico { width: 100%; height: 100%; }
.fs-num-ico, .s7-letter .qc-ico { display: block; }
.fs-num-ico { width: 26px; height: 26px; color: var(--cx-cyan); }
.fs-num-ico .qc-ico { width: 100%; height: 100%; }
.s7-letter .qc-ico { width: 21px; height: 21px; }

/* ---- Quick category chips ---- */
.quick-cat-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cx-line);
  color: var(--cx-text-dim);
  box-shadow: none;
}
.quick-cat-chip:hover {
  color: #fff;
  border-color: var(--cx-line-hot);
  background: rgba(77, 227, 255, 0.09);
  box-shadow: 0 0 30px -10px rgba(77, 227, 255, 0.7);
}
.quick-cat-chip-all { background: var(--grad-brand); color: #fff; border-color: rgba(155,240,255,0.35); }
.quick-cat-chip-all:hover { background: var(--grad-brand); opacity: 1; box-shadow: 0 0 34px -8px rgba(77,227,255,0.8); }

/* ---- Flagship ---- */
.flagship {
  background: var(--grad-hero);
  border: 1px solid var(--cx-line);
  box-shadow: 0 40px 110px -50px #000, 0 0 80px -40px rgba(47, 123, 255, 0.7);
}
.flagship-copy p { color: var(--cx-text-dim); }
.fs-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cx-line);
  transition: border-color 320ms var(--ease-out), background 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.fs-item:hover { border-color: var(--cx-line-hot); background: rgba(77,227,255,0.07); transform: translateY(-3px); }
.fs-item .fs-num { color: var(--cx-cyan); text-shadow: 0 0 20px rgba(77, 227, 255, 0.45); }
.fs-item .fs-lab { color: var(--cx-text-mute); }

/* ---- Flow steps ---- */
.flow-step {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 380ms var(--ease-out), border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
/* Top edge lights up on hover */
.flow-step::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cx-cyan), transparent);
  opacity: 0; transition: opacity 380ms var(--ease-out);
}
.flow-step:hover { transform: translateY(-5px); border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); }
.flow-step:hover::before { opacity: 1; }
.flow-step .fs-index {
  color: var(--cx-cyan); font-size: 0.72rem; letter-spacing: 0.22em;
  text-shadow: 0 0 16px rgba(77, 227, 255, 0.5);
}
.flow-step p { color: var(--cx-text-mute); }
@media (min-width: 1040px) {
  .flow-step:not(:last-child)::after {
    background: repeating-linear-gradient(90deg, rgba(77,227,255,0.5) 0 5px, transparent 5px 10px);
  }
}

/* ---- SMART-7 ---- */
.smart7-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  transition: transform 380ms var(--ease-out), border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.smart7-card:hover { transform: translateY(-5px); border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); }
.smart7-card .s7-letter {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 0 26px -6px rgba(77, 227, 255, 0.8);
}
.smart7-card p { color: var(--cx-text-mute); }

/* ---- Course cards (.cc-* — rendered by main.js / courses.js) ---- */
.cc-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.cc-card:hover {
  transform: translateY(-6px);
  border-color: var(--cx-line-hot);
  box-shadow: var(--shadow-card-hi);
}
.cc-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(3,4,10,0.85) 0%, rgba(3,4,10,0.15) 60%, transparent 100%);
  pointer-events: none;
}
.cc-thumb.cat-ai       { background: linear-gradient(140deg, #04060E 0%, #14357F 62%, #2F7BFF 120%); }
.cc-thumb.cat-dev      { background: linear-gradient(140deg, #04060E 0%, #0F4C6B 60%, #4DE3FF 130%); }
.cc-thumb.cat-design   { background: linear-gradient(140deg, #0B0518 0%, #4B22A8 68%, #B14BFF 130%); }
.cc-thumb.cat-data     { background: linear-gradient(140deg, #03110E 0%, #0B6B55 66%, #2FD3A5 130%); }
.cc-thumb.cat-security { background: linear-gradient(140deg, #14040A 0%, #7E1F38 66%, #FF5C8A 130%); }
.cc-thumb.cat-office   { background: linear-gradient(140deg, #04060E 0%, #1B4FD8 66%, #14357F 130%); }
.cc-thumb.cat-kids     { background: linear-gradient(140deg, #1A0C02 0%, #A5560F 62%, #FFB763 130%); }
.cc-thumb-icon { color: rgba(255,255,255,0.92); text-shadow: 0 0 30px rgba(77,227,255,0.6); }
.cc-type-tag { color: var(--cx-cyan-soft); }
.cc-cat { color: var(--cx-cyan); letter-spacing: 0.14em; }
.cc-desc { color: var(--cx-text-mute); }
.cc-meta { color: var(--cx-text-mute); }
.cc-rating { color: #FFC65C; }
.cc-rating .cc-students { color: var(--cx-text-mute); }
.cc-foot { border-top: 1px solid var(--cx-line); }
.cc-price { color: #fff; }                     /* was var(--ink-navy) */
.cc-price .old { color: var(--cx-text-mute); }

/* ---- Feature cards ---- */
.feat-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
}
.feat-card .feat-icon {
  background: rgba(77, 227, 255, 0.09);
  border: 1px solid rgba(77, 227, 255, 0.22);
  color: var(--cx-cyan);
  font-size: 1.35rem;
  box-shadow: 0 0 26px -10px rgba(77, 227, 255, 0.8);
  transition: transform 380ms var(--ease-spring), box-shadow 380ms var(--ease-out);
}
.feat-card:hover .feat-icon { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 34px -6px rgba(77, 227, 255, 0.9); }
.feat-card p { color: var(--cx-text-mute); }

/* ---- Testimonials ---- */
.testi-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: transform 380ms var(--ease-out), border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
}
.testi-card:hover { transform: translateY(-4px); border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); }
.testi-quote { color: var(--cx-text-dim); }
.testi-avatar { background: var(--grad-brand); box-shadow: 0 0 22px -6px rgba(77, 227, 255, 0.8); }
.testi-role { color: var(--cx-text-mute); }

/* ---- Skill chips ---- */
.skill-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cx-line);
  color: var(--cx-text-dim);
  box-shadow: none;
}
.skill-chip:hover {
  color: #fff; border-color: var(--cx-line-hot);
  background: rgba(77, 227, 255, 0.09);
  box-shadow: 0 0 30px -10px rgba(77, 227, 255, 0.75);
}

/* ---- Video cards ---- */
.video-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  transition: transform 420ms var(--ease-out), border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.video-card:hover { transform: translateY(-6px); border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); }
.video-thumb { background: var(--grad-hero); }
.video-thumb-emoji { opacity: 0.32; }
.video-play { background: rgba(255, 45, 85, 0.92); box-shadow: 0 0 30px -6px rgba(255, 45, 85, 0.9); }
.video-body p { color: var(--cx-text-mute); }

/* ---- Gallery ---- */
.gallery-item {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: var(--shadow-card);
  transition: border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.gallery-item:hover { border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); transform: translateY(-4px); }
.gallery-placeholder {
  background: rgba(255, 255, 255, 0.018);
  border: 1.5px dashed var(--cx-line);
  color: var(--cx-text-mute);
}
.gallery-item .gallery-caption { background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, transparent 100%); }

/* ---- CTA banner ---- */
.cta-banner {
  background: var(--grad-hero);
  border: 1px solid var(--cx-line);
  box-shadow: 0 40px 110px -50px #000, 0 0 90px -44px rgba(77, 227, 255, 0.75);
}
.cta-banner p { color: var(--cx-text-dim); }

/* ---- Newsletter ---- */
.newsletter-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  box-shadow: 0 30px 80px -40px #000, 0 0 60px -34px rgba(47, 123, 255, 0.55);
}
.newsletter-lede { color: var(--cx-text-dim); margin-top: var(--sp-3); }

/* ---- Instructors (course-details) ---- */
.instructor-card {
  background: var(--grad-card);
  border: 1px solid var(--cx-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  transition: border-color 380ms var(--ease-out), box-shadow 380ms var(--ease-out), transform 380ms var(--ease-out);
}
.instructor-card:hover { border-color: var(--cx-line-hot); box-shadow: var(--shadow-card-hi); transform: translateY(-3px); }
.instructor-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(77, 227, 255, 0.09);
  border: 1px solid rgba(77, 227, 255, 0.26);
  color: var(--cx-cyan);
  box-shadow: 0 0 26px -10px rgba(77, 227, 255, 0.85);
  overflow: hidden;
}
.instructor-avatar svg { width: 26px; height: 26px; }
.instructor-avatar img { width: 100%; height: 100%; object-fit: cover; }
.instructor-name { font-weight: 700; color: #fff; }
.instructor-role { font-size: var(--fs-sm); color: var(--cx-text-mute); }

/* Additional instructors sit in a responsive grid under the primary one. */
.instructor-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-3);
  margin-top: var(--sp-3);
}
@media (min-width: 720px) { .instructor-grid { grid-template-columns: repeat(2, 1fr); } }
.instructor-grid:empty { display: none; margin: 0; }

/* ---- Promo video ---- */
#coursePromoSection[hidden] { display: none !important; }
.promo-video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #000;
  border: 1px solid var(--cx-line);
  box-shadow: 0 30px 80px -40px #000, 0 0 70px -34px rgba(77, 227, 255, 0.6);
}
.promo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---- Misc ---- */
.phase-note { background: rgba(77,227,255,0.05); border: 1px dashed rgba(77,227,255,0.32); color: var(--cx-cyan); }
.results-count strong { color: #fff; }
.breadcrumb a:hover { color: var(--cx-cyan); }


/* ============================================================
   09 · FOOTER + FLOATING ACTIONS
   ============================================================ */
.site-footer {
  background: linear-gradient(180deg, #04060D 0%, #000000 100%);
  border-top: 1px solid var(--cx-line);
  color: var(--cx-text-mute);
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,227,255,0.55), transparent);
}
.footer-brand p { color: var(--cx-text-mute); }
.footer-col h5 { color: #fff; font-family: var(--font-data); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; }
.footer-col a, .footer-contact a { color: var(--cx-text-mute); }
.footer-col a:hover, .footer-contact a:hover { color: var(--cx-cyan); }
.footer-contact svg { color: var(--cx-cyan); }
.footer-socials a {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--cx-line);
  color: var(--cx-text-dim);
  transition: all 260ms var(--ease-out);
}
.footer-socials a:hover {
  background: rgba(77, 227, 255, 0.14);
  border-color: var(--cx-line-hot);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 26px -8px rgba(77, 227, 255, 0.8);
}
.footer-socials a.whatsapp-link:hover { background: #25D366; border-color: #25D366; box-shadow: 0 0 26px -8px rgba(37,211,102,0.9); }
.footer-bottom { border-top: 1px solid var(--cx-line); color: var(--cx-text-mute); }

.whatsapp-float { box-shadow: 0 0 34px -8px rgba(37, 211, 102, 0.85); }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 0 46px -6px rgba(37, 211, 102, 1); }


/* ============================================================
   10 · RESPONSIVE + PERFORMANCE
   ============================================================ */

/* Tablet */
@media (max-width: 980px) {
  .cortex-hero .hero-inner { padding: 120px 0 108px; }
  .cortex-hero .hero-blob.b1 { width: 460px; height: 460px; }
  .cortex-hero .hero-blob.b2 { width: 380px; height: 380px; }
}

/* Mobile — the biggest perf lever is backdrop-filter, so it's dialled
   right back here; the canvas DPR/particle budget is cut in animations.js. */
@media (max-width: 640px) {
  :root { --glass-blur: 12px; --glass-blur-sm: 8px; }

  /* sections.css:607 sets .hero{padding-top:22px} under 600px — neutralised
     here so the overlay stays vertically centred on the canvas. */
  .cortex-hero { min-height: 92vh; min-height: 92svh; padding: 0; }
  .cortex-hero .hero-inner { padding: 104px 0 96px; }
  .cortex-hero .hero-copy { padding: 0 2px; }
  .cortex-hero .hero-headline { font-size: clamp(2rem, 9.2vw, 2.9rem); letter-spacing: -0.03em; }
  .cortex-hero .hero-headline .en-line { font-size: 0.34em; letter-spacing: 0.1em; }
  .cortex-hero .hero-sub { font-size: 0.95rem; line-height: 1.7; margin-bottom: var(--sp-6); }
  .cortex-hero .hero-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .cortex-hero .hero-cta-row .btn { width: 100%; padding: 15px 24px; }
  .cortex-hero .hero-microtrust { gap: 8px; }
  .cortex-hero .hero-microtrust .mt-item { font-size: 0.76rem; padding: 8px 14px; }
  .cortex-hero .hero-blob { filter: blur(60px); }

  .hero-scroll-cue { display: none; }

  .stats-strip { margin-top: var(--sp-6); }
  .stats-card { gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); }

  /* Cheaper compositing on low-power devices */
  .mobile-bottom-nav, .navbar { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .fs-item, .smart7-card, .testi-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .orange-glow { filter: blur(50px); opacity: 0.5; }
  body::after { background-size: 44px 44px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .cortex-hero .hero-headline { font-size: clamp(1.75rem, 9vw, 2.3rem); }
  .cortex-hero .hero-microtrust .mt-item { padding: 7px 12px; font-size: 0.72rem; }
}

/* Short landscape phones — never let the hero copy overflow the viewport */
@media (max-height: 560px) and (orientation: landscape) {
  .cortex-hero { min-height: auto; }
  .cortex-hero .hero-inner { padding: 110px 0 72px; }
  .hero-scroll-cue { display: none; }
}

/* Coarse pointers get no hover-lift (it sticks after tap) */
@media (hover: none) {
  .card-hover:hover, .cc-card:hover, .feat-card:hover, .flow-step:hover,
  .smart7-card:hover, .testi-card:hover, .video-card:hover, .gallery-item:hover,
  .skill-chip:hover, .quick-cat-chip:hover, .btn:hover {
    transform: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-glass:hover, .btn-glass-dark:hover, .btn-register:hover { transform: none; }
  .card-hover:hover, .cc-card:hover, .flow-step:hover, .smart7-card:hover,
  .video-card:hover, .testi-card:hover, .gallery-item:hover { transform: none; }
}

/* Print */
@media print {
  body::before, body::after, .hero-canvas-wrap, .hero-scroll-cue,
  .whatsapp-float, .mobile-bottom-nav { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   11 · MOTION PACK
   Scroll progress · magnetic CTAs · cursor spotlight.
   All three are injected by animations.js; if that never runs,
   none of these selectors match anything and nothing is missing.
   ============================================================ */

/* ---- Scroll progress ---- */
.cx-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: calc(var(--z-nav) + 5);
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cx-blue-deep), var(--cx-blue) 45%, var(--cx-cyan));
  box-shadow: 0 0 14px rgba(77, 227, 255, 0.85);
  pointer-events: none;
  will-change: transform;
}

/* ---- Magnetic CTAs ---- */
html.cx-pointer-fx .btn-primary,
html.cx-pointer-fx .btn-register,
html.cx-pointer-fx .hero-scroll-cue {
  /* Returns home slowly when the cursor leaves, snaps quickly while near. */
  transition: transform 520ms var(--ease-out),
              box-shadow 320ms var(--ease-out),
              background 320ms var(--ease-out);
}
html.cx-pointer-fx .cx-magnet {
  transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(1.035);
  transition: transform 140ms var(--ease-out),
              box-shadow 320ms var(--ease-out),
              background 320ms var(--ease-out);
}
/* The hero CTA row already scales on hover; keep the two from compounding. */
html.cx-pointer-fx .btn-primary.cx-magnet:hover { transform: translate3d(var(--mag-x, 0), var(--mag-y, 0), 0) scale(1.05); }

/* ---- Cursor spotlight ---- */
.cx-spotlight {
  position: fixed; top: 0; left: 0;
  width: 520px; height: 520px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(77, 227, 255, 0.10) 0%,
    rgba(47, 123, 255, 0.06) 34%,
    transparent 68%);
  mix-blend-mode: screen;
  will-change: transform;
}
/* No cursor on touch devices, and the blend is expensive there anyway. */
@media (hover: none), (max-width: 640px) { .cx-spotlight { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cx-scroll-progress, .cx-spotlight { display: none; }
  html.cx-pointer-fx .cx-magnet { transform: none; }
}


/* ============================================================================
   13 · NEURAL MONITOR HERO
   ----------------------------------------------------------------------------
   Retunes the hero to match the reference footage:
     · deep NAVY field, not pure black
     · brain sits right of centre, copy runs down the left
     · monospace HUD chrome top and bottom
   Loaded after section 06, so these win on order.
   ========================================================================= */

:root {
  --nm-navy-deep: #050D20;
  --nm-navy:      #0A1B3D;
  --nm-navy-lit:  #123566;
  --nm-ink:       #9FB8D8;
  --nm-ink-dim:   #6C87AE;
  --nm-line:      rgba(120, 170, 240, 0.16);
}

/* ---- Field ---- */
.cortex-hero {
  background:
    radial-gradient(120% 90% at 72% 78%, rgba(24, 84, 168, 0.55) 0%, transparent 62%),
    radial-gradient(90% 70% at 20% 12%, rgba(12, 38, 84, 0.85) 0%, transparent 70%),
    linear-gradient(165deg, var(--nm-navy-deep) 0%, var(--nm-navy) 52%, #071634 100%);
}

/* The blobs fought the navy field — the gradient above replaces them. */
.cortex-hero .hero-blob { display: none; }

.cortex-hero .hero-grid-fade {
  background-image:
    linear-gradient(rgba(140, 190, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 190, 255, 0.035) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(ellipse 70% 60% at 62% 50%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 62% 50%, #000 0%, transparent 78%);
}

/* Vignette is much lighter now — the navy already carries the depth, and the
   copy sits in its own column rather than on top of the particles. */
.cortex-hero .hero-vignette {
  background:
    linear-gradient(90deg, rgba(5, 13, 32, 0.86) 0%, rgba(5, 13, 32, 0.45) 34%, transparent 58%),
    linear-gradient(180deg, rgba(5, 13, 32, 0.80) 0%, transparent 22%, transparent 68%, rgba(4, 10, 26, 0.88) 100%);
}

/* ---- Copy: left column ---- */
.cortex-hero .hero-inner { padding: 148px 0 120px; }
.cortex-hero .hero-copy {
  max-width: 560px;
  margin: 0;
  text-align: left;
}
.cortex-hero .hero-copy::before { display: none; }   /* scrim no longer needed */

.hero-eyebrow {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #8FB8E8;
  margin-bottom: 18px;
}

.cortex-hero .hero-headline {
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
/* The four stacked black drop-shadows from section 06 were sized for the old
   layout, where the headline sat directly on top of the brightest part of the
   particle cloud. The copy now lives in its own column on the navy field, so
   that halo is both unnecessary and muddy — and because a parent filter
   composites with the child's, the two were stacking. Clear the parent. */
.cortex-hero .hero-headline { filter: none; }

.cortex-hero .hero-headline .bn-line {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
  /* One soft navy-tinted shadow — separates the type from the field without
     reading as a black outline. */
  filter: drop-shadow(0 2px 14px rgba(6, 18, 44, 0.55));
}
.cortex-hero .hero-headline .en-line {
  color: #7FC6F5;
  letter-spacing: 0.16em;
  text-shadow: 0 0 22px rgba(80, 170, 255, 0.45);
}

.cortex-hero .hero-sub {
  color: var(--nm-ink);
  max-width: 380px;
  margin: 0 0 var(--sp-6);
  font-size: 0.98rem;
  line-height: 1.7;
  text-shadow: 0 1px 10px rgba(6, 18, 44, 0.45);
}
.cortex-hero .hero-cta-row { justify-content: flex-start; margin-bottom: var(--sp-6); }
.cortex-hero .hero-microtrust { justify-content: flex-start; gap: 10px; }
.cortex-hero .hero-microtrust .mt-item {
  background: rgba(10, 27, 61, 0.72);
  border-color: var(--nm-line);
}

/* ---- Specimen meta strip ---- */
.hero-meta {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: 16px;
  border-top: 1px solid var(--nm-line);
  font-family: var(--font-data);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--nm-ink-dim);
}
.hero-meta i { color: #4FA8F0; font-style: normal; margin-right: 6px; }
.hero-meta b { color: #C3D9F5; font-weight: 600; margin-left: 8px; }


/* ---- Mobile: copy re-centres, brain sits behind it ---- */
@media (max-width: 900px) {
  .cortex-hero .hero-copy { max-width: 100%; text-align: center; }
  .cortex-hero .hero-sub { margin-left: auto; margin-right: auto; max-width: 440px; }
  .cortex-hero .hero-cta-row { justify-content: center; }
  .cortex-hero .hero-microtrust { justify-content: center; }
  .hero-meta { justify-content: center; }
  .hero-eyebrow { text-align: center; }
  /* Below this width the copy sits back on top of the particles, so a
     little more separation is warranted again — still far lighter than the
     old halo. */
  .cortex-hero .hero-headline .bn-line { filter: drop-shadow(0 2px 16px rgba(4, 12, 32, 0.78)); }
  .cortex-hero .hero-sub { text-shadow: 0 1px 14px rgba(4, 12, 32, 0.72); }

  /* Copy needs its backdrop again once it overlaps the brain. */
  .cortex-hero .hero-vignette {
    background:
      radial-gradient(ellipse 76% 54% at 50% 46%, rgba(5, 13, 32, 0.86) 0%, rgba(5, 13, 32, 0.42) 58%, transparent 84%),
      linear-gradient(180deg, rgba(5, 13, 32, 0.86) 0%, transparent 26%, transparent 66%, rgba(4, 10, 26, 0.9) 100%);
  }
}

/* Eyebrow + HUD entrance share the hero's staged reveal */
html.js-anim .cortex-hero .hero-eyebrow,
html.js-anim .cortex-hero .hero-meta { opacity: 0; transform: translateY(26px); }

/* ============================================================================
   14 · SMART-7 — EXPANDING COLOUR PANELS
   ----------------------------------------------------------------------------
   Modelled on the reference: collapsed panels show a number and a vertical
   spine label; the open one expands to reveal the full content. Each panel
   carries its own saturated gradient, which is what stops the section
   reading as one flat dark band.
   ========================================================================= */

.smart7-track {
  display: flex;
  gap: 10px;
  overflow: visible;
  padding: 0;
  height: clamp(320px, 42vw, 420px);
  scroll-snap-type: none;
}

.s7-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  padding: 22px 18px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* The flex-grow change is what animates; a long cubic-bezier makes it
     feel like the panel is being pulled open rather than snapping. */
  transition: flex-grow 700ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 500ms var(--ease-out),
              border-color 500ms var(--ease-out);
  will-change: flex-grow;
}

/* Per-panel gradients */
.s7-panel.s1 { background: linear-gradient(160deg, #123C8C 0%, #1E6BE0 55%, #35B6FF 100%); }
.s7-panel.s2 { background: linear-gradient(160deg, #2B1470 0%, #6B33D6 55%, #A566FF 100%); }
.s7-panel.s3 { background: linear-gradient(160deg, #063A55 0%, #0E7C9B 55%, #2BD9D2 100%); }
.s7-panel.s4 { background: linear-gradient(160deg, #4A1155 0%, #A0248C 55%, #FF5CC8 100%); }
.s7-panel.s5 { background: linear-gradient(160deg, #06402F 0%, #0E8A5F 55%, #35E0A1 100%); }
.s7-panel.s6 { background: linear-gradient(160deg, #5A2206 0%, #C2620E 55%, #FFAE3D 100%); }
.s7-panel.s7 { background: linear-gradient(160deg, #3C0A2A 0%, #B0155A 55%, #FF6B8A 100%); }

/* A soft top sheen so each panel reads as a lit surface, not flat paint. */
.s7-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,0.26) 0%, transparent 62%);
  pointer-events: none;
}
/* Darkened foot keeps the collapsed number legible over bright gradients. */
.s7-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.42) 0%, transparent 46%);
  pointer-events: none;
}

.s7-panel:hover,
.s7-panel:focus-visible { border-color: rgba(255, 255, 255, 0.34); outline: none; }
.s7-panel.is-open {
  flex-grow: 4.6;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9), 0 0 60px -28px rgba(120, 190, 255, 0.7);
}

.s7-num {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-family: var(--font-data); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.85);
}

/* Collapsed spine label — rotated, hidden once the panel opens. */
.s7-spine {
  position: absolute; z-index: 2;
  bottom: 54px; left: 50%;
  transform-origin: center;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 260ms var(--ease-out);
}
.s7-panel.is-open .s7-spine { opacity: 0; pointer-events: none; }

/* Expanded content */
.s7-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--ease-out) 180ms, transform 420ms var(--ease-out) 180ms;
  pointer-events: none;
}
.s7-panel.is-open .s7-body { opacity: 1; transform: none; }

.s7-body .s7-letter {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-data); font-weight: 700; font-size: 1.2rem;
  color: #fff; margin-bottom: 14px; box-shadow: none;
}
.s7-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; color: #fff; }
.s7-desc {
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.86);
  max-width: 320px; line-height: 1.6;
}

/* ---- Mobile: stack vertically, expand in height instead of width ---- */
@media (max-width: 780px) {
  .smart7-track { flex-direction: column; height: auto; gap: 8px; }
  .s7-panel {
    flex: 0 0 auto; min-height: 74px; height: 74px;
    justify-content: center; padding: 16px 18px 16px 62px;
    transition: height 620ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms var(--ease-out);
  }
  .s7-panel.is-open { height: 210px; justify-content: flex-end; }
  .s7-num { top: 50%; transform: translateY(-50%); }
  .s7-panel.is-open .s7-num { top: 18px; transform: none; }
  .s7-spine {
    writing-mode: horizontal-tb; transform: none;
    left: 62px; bottom: auto; top: 50%; margin-top: -0.6em;
  }
  .s7-panel::after { background: linear-gradient(0deg, rgba(0,0,0,0.34) 0%, transparent 60%); }
  .s7-desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .s7-panel, .s7-body, .s7-spine { transition: none; }
}

/* ============================================================================
   15 · PUBLIC REVIEWS
   ========================================================================= */
.rv-stars { display: inline-flex; gap: 2px; font-size: 0.95rem; line-height: 1; }
.rv-star { color: rgba(125, 178, 255, 0.22); }
.rv-star.on { color: #FFC65C; text-shadow: 0 0 12px rgba(255, 198, 92, 0.6); }

.rv-card .rv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.rv-course {
  font-size: var(--fs-xs); font-weight: 700;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(77, 227, 255, 0.10);
  border: 1px solid rgba(77, 227, 255, 0.26);
  color: var(--cx-cyan);
}
.rv-avatar {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1rem;
}

/* Course-details reviews */
.rv-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.rv-summary:empty { display: none; }
.rv-summary strong { font-family: var(--font-data); font-size: 1.5rem; color: #fff; }
.rv-summary span { font-size: var(--fs-sm); color: var(--cx-text-mute); }
.rv-list { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 760px) { .rv-list { grid-template-columns: repeat(2, 1fr); } }
.rv-list .testi-card { min-width: 0; max-width: none; }


/* ============================================================================
   16 · APPLE-STYLE TAB TRANSITIONS
   ----------------------------------------------------------------------------
   The student and admin panels swapped instantly with display:none. Now the
   incoming panel eases up and in. Kept short and lightly damped — the point
   is continuity, not spectacle.
   ========================================================================= */
.student-tab-panel.active,
.admin-tab.active {
  animation: cx-tab-in 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cx-tab-in {
  from { opacity: 0; transform: translateY(14px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

/* The moving pill behind the active tab is what makes it feel Apple-like. */
.student-tabbar .student-nav-link,
.admin-nav-btn {
  position: relative;
  transition: color 320ms var(--ease-out), background 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.student-tabbar .student-nav-link.active::after,
.admin-nav-btn.active::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cx-cyan), transparent);
  box-shadow: 0 0 10px rgba(77, 227, 255, 0.9);
  animation: cx-underline-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cx-underline-in {
  from { transform: scaleX(0.2); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .student-tab-panel.active, .admin-tab.active,
  .student-tabbar .student-nav-link.active::after,
  .admin-nav-btn.active::after { animation: none; }
}

/* ---- SMART-7 3D visual ----
   Sits top-right of the open panel, above the gradient but below the text.
   Only visible while its panel is open, so it never crowds the collapsed
   spine labels. */
.s7-viz {
  position: absolute;
  top: 14%; right: 6%;
  width: clamp(120px, 42%, 210px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 520ms var(--ease-out) 220ms, transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.35));
}
.s7-panel.is-open .s7-viz { opacity: 0.92; transform: scale(1); }
.s7-viz canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 780px) {
  /* On the stacked layout the panel is short and wide — park it on the
     right edge, smaller, so it never collides with the copy. */
  .s7-viz { top: 50%; right: 4%; transform: translateY(-50%) scale(0.8); width: 92px; }
  .s7-panel.is-open .s7-viz { transform: translateY(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .s7-viz { transition: none; }
}

/* ============================================================================
   17 · PREMIUM PALETTE — PER-SECTION COLOUR
   ----------------------------------------------------------------------------
   The site had one dark surface repeated everywhere, which read as flat and
   heavy. Each section now carries its own hue via data-accent, and every
   component inside it derives its eyebrow, glow, borders, icons and hover
   state from that hue.

   The surfaces are also lifted: cards move off near-black onto a slate that
   actually holds colour, which is what separates "dark" from "premium".
   ========================================================================= */

[data-accent] {
  --sec:      #3B82F6;
  --sec-2:    #22D3EE;
  --sec-glow: rgba(59, 130, 246, 0.18);
  --sec-tint: rgba(59, 130, 246, 0.06);
}
[data-accent="sky"]    { --sec: #38BDF8; --sec-2: #7DD3FC; --sec-glow: rgba(56,189,248,0.20); --sec-tint: rgba(56,189,248,0.055); }
[data-accent="indigo"] { --sec: #6366F1; --sec-2: #A5B4FC; --sec-glow: rgba(99,102,241,0.22); --sec-tint: rgba(99,102,241,0.06); }
[data-accent="violet"] { --sec: #A855F7; --sec-2: #D8B4FE; --sec-glow: rgba(168,85,247,0.22); --sec-tint: rgba(168,85,247,0.06); }
[data-accent="teal"]   { --sec: #2DD4BF; --sec-2: #99F6E4; --sec-glow: rgba(45,212,191,0.20); --sec-tint: rgba(45,212,191,0.055); }
[data-accent="amber"]  { --sec: #FBBF24; --sec-2: #FDE68A; --sec-glow: rgba(251,191,36,0.20); --sec-tint: rgba(251,191,36,0.055); }
[data-accent="rose"]   { --sec: #FB7185; --sec-2: #FDA4AF; --sec-glow: rgba(251,113,133,0.20); --sec-tint: rgba(251,113,133,0.055); }
[data-accent="lime"]   { --sec: #A3E635; --sec-2: #D9F99D; --sec-glow: rgba(163,230,53,0.18); --sec-tint: rgba(163,230,53,0.05); }

/* ---- Section field: a soft wash of its own colour ---- */
.section[data-accent] {
  background:
    radial-gradient(90% 60% at 15% 0%, var(--sec-tint) 0%, transparent 62%),
    radial-gradient(70% 50% at 88% 100%, var(--sec-tint) 0%, transparent 66%),
    linear-gradient(180deg, #080C18 0%, #0A0F1F 50%, #080C18 100%);
  padding: clamp(76px, 10vw, 132px) 0;
}
.section[data-accent].section-tint {
  background:
    radial-gradient(90% 60% at 80% 0%, var(--sec-tint) 0%, transparent 60%),
    linear-gradient(180deg, #0A0F20 0%, #0C1226 55%, #0A0F20 100%);
}
.section[data-accent].section-ice {
  background:
    radial-gradient(80% 55% at 20% 100%, var(--sec-tint) 0%, transparent 64%),
    linear-gradient(180deg, #070B16 0%, #0B1122 50%, #070B16 100%);
}

/* The old orange blobs now take the section hue. */
.section[data-accent] .orange-glow {
  background: radial-gradient(circle, var(--sec-glow) 0%, transparent 70%);
  opacity: 0.9;
}

/* ---- Type: bigger, airier, Apple-ish rhythm ---- */
.section[data-accent] .eyebrow { color: var(--sec-2); text-shadow: 0 0 22px var(--sec-glow); }
.section[data-accent] .eyebrow::before { background: var(--sec); box-shadow: 0 0 12px var(--sec); }
.section-head h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
}
.section-head { margin-bottom: clamp(36px, 5vw, 62px); }
.section-head p { font-size: 1.02rem; line-height: 1.75; }

/* ---- Lifted surfaces ----
   These read as material rather than as holes in the page. */
.section[data-accent] .cc-card,
.section[data-accent] .feat-card,
.section[data-accent] .flow-step,
.section[data-accent] .video-card,
.section[data-accent] .testi-card,
.section[data-accent] .gallery-item,
.section[data-accent] .newsletter-card,
.section[data-accent] .smart7-card {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.008) 100%),
    linear-gradient(158deg, #131B30 0%, #0D1424 60%, #0B111F 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  box-shadow: 0 22px 50px -28px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* Hover picks up the section's own colour instead of a global cyan. */
.section[data-accent] .cc-card:hover,
.section[data-accent] .feat-card:hover,
.section[data-accent] .flow-step:hover,
.section[data-accent] .video-card:hover,
.section[data-accent] .testi-card:hover,
.section[data-accent] .gallery-item:hover {
  border-color: color-mix(in srgb, var(--sec) 55%, transparent);
  box-shadow: 0 30px 66px -26px rgba(0,0,0,0.95), 0 0 52px -18px var(--sec-glow);
}

/* Icons, numbers and accents follow the section hue */
.section[data-accent] .feat-card .feat-icon {
  background: color-mix(in srgb, var(--sec) 14%, transparent);
  border-color: color-mix(in srgb, var(--sec) 34%, transparent);
  color: var(--sec-2);
  box-shadow: 0 0 26px -10px var(--sec);
}
.section[data-accent] .flow-step .fs-index { color: var(--sec-2); text-shadow: 0 0 16px var(--sec-glow); }
.section[data-accent] .flow-step::before { background: linear-gradient(90deg, transparent, var(--sec), transparent); }
.section[data-accent] .cc-cat { color: var(--sec-2); }
.section[data-accent] .rv-course {
  background: color-mix(in srgb, var(--sec) 12%, transparent);
  border-color: color-mix(in srgb, var(--sec) 30%, transparent);
  color: var(--sec-2);
}
.section[data-accent] .skill-chip:hover,
.section[data-accent] .quick-cat-chip:hover {
  border-color: color-mix(in srgb, var(--sec) 55%, transparent);
  background: color-mix(in srgb, var(--sec) 10%, transparent);
  box-shadow: 0 0 30px -12px var(--sec);
}
.section[data-accent] .testi-avatar,
.section[data-accent] .rv-avatar {
  background: linear-gradient(140deg, var(--sec) 0%, var(--sec-2) 100%);
  box-shadow: 0 0 22px -6px var(--sec);
}
.section[data-accent] .section-head h2 { color: #F2F7FF; }

/* Section divider glow takes the hue of the section it introduces. */
.section[data-accent] + .section[data-accent]::after {
  background: linear-gradient(90deg, transparent, var(--sec), transparent);
  opacity: 0.5;
}

/* ---- Page ground: lifted off pure black ---- */
body { background: #070B15; }
body::before {
  background:
    radial-gradient(58% 42% at 78% 4%,  rgba(99, 102, 241, 0.17) 0%, transparent 66%),
    radial-gradient(48% 38% at 10% 30%, rgba(168, 85, 247, 0.13) 0%, transparent 68%),
    radial-gradient(54% 40% at 62% 68%, rgba(45, 212, 191, 0.10) 0%, transparent 70%),
    radial-gradient(62% 46% at 30% 102%, rgba(56, 189, 248, 0.12) 0%, transparent 72%);
}

/* Fallback for browsers without color-mix — plain cyan rather than nothing. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .section[data-accent] .cc-card:hover,
  .section[data-accent] .feat-card:hover,
  .section[data-accent] .flow-step:hover,
  .section[data-accent] .video-card:hover,
  .section[data-accent] .testi-card:hover,
  .section[data-accent] .gallery-item:hover { border-color: var(--cx-line-hot); }
  .section[data-accent] .feat-card .feat-icon { background: rgba(77,227,255,0.10); border-color: rgba(77,227,255,0.30); }
}

/* ============================================================================
   18 · PREMIUM COMPONENT POLISH
   Larger radii, softer light, more generous spacing — the things that
   separate a dark theme from a considered one.
   ========================================================================= */

:root {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 30px;
}

/* ---- Stats strip: each figure gets its own colour ---- */
.stats-card {
  background:
    linear-gradient(158deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%),
    linear-gradient(158deg, #141C33 0%, #0C1324 100%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 40px) clamp(20px, 3vw, 34px);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.07) inset;
}
.stat-item:nth-child(1) .stat-num { background-image: linear-gradient(180deg,#FFF 0%,#7DD3FC 130%); }
.stat-item:nth-child(2) .stat-num { background-image: linear-gradient(180deg,#FFF 0%,#A5B4FC 130%); }
.stat-item:nth-child(3) .stat-num { background-image: linear-gradient(180deg,#FFF 0%,#D8B4FE 130%); }
.stat-item:nth-child(4) .stat-num { background-image: linear-gradient(180deg,#FFF 0%,#99F6E4 130%); }
.stat-item:nth-child(5) .stat-num { background-image: linear-gradient(180deg,#FFF 0%,#FDE68A 130%); }
.stat-num {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}
.stat-label { letter-spacing: 0.1em; font-size: 0.68rem; }

/* ---- Quick category chips: each its own hue ---- */
.quick-cat-row { gap: 12px; margin: clamp(28px,4vw,44px) 0; }
.quick-cat-chip {
  padding: 13px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
}
.quick-cat-chip:nth-child(1) .qc-icon { color: #7DD3FC; }
.quick-cat-chip:nth-child(2) .qc-icon { color: #A5B4FC; }
.quick-cat-chip:nth-child(3) .qc-icon { color: #D8B4FE; }
.quick-cat-chip:nth-child(4) .qc-icon { color: #99F6E4; }
.quick-cat-chip:nth-child(5) .qc-icon { color: #FDA4AF; }
.quick-cat-chip:nth-child(6) .qc-icon { color: #FDE68A; }
.quick-cat-chip:nth-child(7) .qc-icon { color: #D9F99D; }

/* ---- Flagship + CTA: richer, not flat navy ---- */
.flagship {
  background:
    radial-gradient(80% 90% at 88% 10%, rgba(99,102,241,0.30) 0%, transparent 60%),
    radial-gradient(70% 80% at 8% 92%, rgba(56,189,248,0.22) 0%, transparent 62%),
    linear-gradient(155deg, #0D1430 0%, #131C3E 55%, #0B1128 100%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 30px;
  box-shadow: 0 40px 100px -46px #000, 0 1px 0 rgba(255,255,255,0.08) inset;
}
.fs-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 18px;
}
.fs-item .fs-num { color: #BFD9FF; }

.cta-banner {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(168,85,247,0.30) 0%, transparent 60%),
    radial-gradient(70% 90% at 84% 100%, rgba(56,189,248,0.28) 0%, transparent 62%),
    linear-gradient(155deg, #0E1433 0%, #141B40 55%, #0C1129 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 56px);
}

/* ---- Buttons: softer, brighter, more Apple ---- */
.btn { border-radius: 999px; font-weight: 600; }
.btn-primary {
  background: linear-gradient(135deg, #4F8BFF 0%, #38BDF8 52%, #5EEAD4 100%);
  border: none;
  box-shadow: 0 10px 28px -10px rgba(56,189,248,0.75), 0 1px 0 rgba(255,255,255,0.30) inset;
}
.btn-primary::after { background: linear-gradient(135deg, #6BA0FF 0%, #67D3FF 52%, #7BF3DE 100%); }
.btn-glass {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-glass:hover { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.28); }

/* ---- Newsletter + inputs ---- */
.newsletter-card { border-radius: 30px; padding: clamp(36px,5vw,56px) clamp(24px,4vw,48px); }
.field-row input, input, textarea, select {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
}
textarea { border-radius: 18px; }

/* ---- Footer: lifted off pure black ---- */
.site-footer {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(99,102,241,0.10) 0%, transparent 62%),
    linear-gradient(180deg, #080D1A 0%, #05080F 100%);
}

/* ============================================================================
   19 · COLOUR, PROPERLY THIS TIME
   ----------------------------------------------------------------------------
   The previous pass tinted sections at ~5% alpha, which is invisible against
   a near-black ground — the page still read as uniformly dark. This raises
   the tints by 3-4x, lifts every base surface several steps, and lets each
   section's hue actually reach the cards inside it.
   ========================================================================= */

/* ---- Much stronger section tints ---- */
[data-accent="sky"]    { --sec-tint: rgba(56,189,248,0.20);  --sec-glow: rgba(56,189,248,0.40); }
[data-accent="indigo"] { --sec-tint: rgba(99,102,241,0.22);  --sec-glow: rgba(99,102,241,0.42); }
[data-accent="violet"] { --sec-tint: rgba(168,85,247,0.22);  --sec-glow: rgba(168,85,247,0.42); }
[data-accent="teal"]   { --sec-tint: rgba(45,212,191,0.19);  --sec-glow: rgba(45,212,191,0.38); }
[data-accent="amber"]  { --sec-tint: rgba(251,191,36,0.17);  --sec-glow: rgba(251,191,36,0.36); }
[data-accent="rose"]   { --sec-tint: rgba(251,113,133,0.19); --sec-glow: rgba(251,113,133,0.38); }
[data-accent="lime"]   { --sec-tint: rgba(163,230,53,0.16);  --sec-glow: rgba(163,230,53,0.34); }

/* ---- Page ground: several steps lighter ---- */
html { background: #0B1020; }
body { background: #0B1020; }
body::before {
  background:
    radial-gradient(70% 50% at 82% 2%,   rgba(99,102,241,0.30) 0%, transparent 64%),
    radial-gradient(60% 45% at 6% 26%,   rgba(168,85,247,0.24) 0%, transparent 66%),
    radial-gradient(62% 45% at 68% 60%,  rgba(45,212,191,0.20) 0%, transparent 68%),
    radial-gradient(70% 50% at 24% 100%, rgba(56,189,248,0.26) 0%, transparent 70%);
}

/* ---- Sections: the hue now genuinely colours the panel ---- */
.section[data-accent] {
  background:
    radial-gradient(110% 78% at 10% -12%, var(--sec-tint) 0%, transparent 58%),
    radial-gradient(88% 66% at 92% 112%, var(--sec-tint) 0%, transparent 62%),
    linear-gradient(180deg, #101733 0%, #16204A 48%, #101733 100%);
}
.section[data-accent].section-tint {
  background:
    radial-gradient(110% 78% at 86% -10%, var(--sec-tint) 0%, transparent 58%),
    linear-gradient(180deg, #121A3A 0%, #1A2455 50%, #121A3A 100%);
}
.section[data-accent].section-ice {
  background:
    radial-gradient(100% 70% at 16% 110%, var(--sec-tint) 0%, transparent 62%),
    linear-gradient(180deg, #0E1530 0%, #141D45 50%, #0E1530 100%);
}

/* ---- Cards carry their section's colour ---- */
.section[data-accent] .cc-card,
.section[data-accent] .feat-card,
.section[data-accent] .flow-step,
.section[data-accent] .video-card,
.section[data-accent] .testi-card,
.section[data-accent] .gallery-item,
.section[data-accent] .newsletter-card {
  background-image:
    linear-gradient(158deg, var(--sec-tint) 0%, transparent 55%),
    linear-gradient(158deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%),
    linear-gradient(158deg, #1B2647 0%, #141D3A 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 54px -30px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.10) inset;
}

/* ---- Stats: lighter card, brighter figures ---- */
.stats-card {
  background-image:
    linear-gradient(158deg, rgba(99,102,241,0.20) 0%, transparent 52%),
    linear-gradient(158deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%),
    linear-gradient(158deg, #1C2750 0%, #151E3E 100%);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ---- Chips ---- */
.quick-cat-chip {
  background-image:
    linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  color: #DCE7FF;
}
.skill-chip {
  background-image: linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.14);
  color: #DCE7FF;
}

/* ---- Text: brighter across the board ---- */
:root {
  --cx-text:      #F0F5FF;
  --cx-text-dim:  #C2D2EE;
  --cx-text-mute: #93A8CC;
  --cx-line:      rgba(160, 195, 255, 0.20);
  --cx-line-soft: rgba(160, 195, 255, 0.12);
}
.section-head p, .cc-desc, .feat-card p, .flow-step p, .testi-quote { color: #C2D2EE; }

/* ---- Nav + footer lifted to match ---- */
.navbar { background: rgba(18, 26, 54, 0.78); border-color: rgba(160,195,255,0.20); }
.navbar-wrap.scrolled .navbar { background: rgba(16, 23, 48, 0.92); }
.site-footer {
  background:
    radial-gradient(70% 80% at 50% 0%, rgba(99,102,241,0.22) 0%, transparent 62%),
    linear-gradient(180deg, #101833 0%, #0B1020 100%);
}
.mobile-bottom-nav, .mobile-drawer-panel { background: rgba(18, 26, 54, 0.94); }

/* ---- The dividing hairline should read now ---- */
.section[data-accent] + .section[data-accent]::after { opacity: 0.85; height: 1px; }

/* ---- Grain must not grey out the new colour ---- */
.cx-grain { opacity: 0.10; }

/* ============================================================================
   20 · HOW IT WORKS — EXPANDING PANELS
   Same mechanic as SMART-7, eight steps, and deliberately larger type inside
   the open panel since these carry the most explanatory copy on the page.
   ========================================================================= */

.flow-track {
  display: flex;
  gap: 10px;
  height: clamp(340px, 44vw, 440px);
}

/* Eight gradients, walking the spectrum so the sequence reads as a journey. */
.flow-panel.p1 { background: linear-gradient(160deg, #0B2E6B 0%, #1D6FE0 55%, #4FB8FF 100%); }
.flow-panel.p2 { background: linear-gradient(160deg, #10265F 0%, #3350D8 55%, #7C90FF 100%); }
.flow-panel.p3 { background: linear-gradient(160deg, #2A1264 0%, #6A32D4 55%, #A97BFF 100%); }
.flow-panel.p4 { background: linear-gradient(160deg, #45115C 0%, #9527A8 55%, #DC7BFF 100%); }
.flow-panel.p5 { background: linear-gradient(160deg, #5C0E44 0%, #B81F73 55%, #FF7BC0 100%); }
.flow-panel.p6 { background: linear-gradient(160deg, #05364A 0%, #0B7E93 55%, #35D6E0 100%); }
.flow-panel.p7 { background: linear-gradient(160deg, #05402F 0%, #0E8A5C 55%, #3BE3A0 100%); }
.flow-panel.p8 { background: linear-gradient(160deg, #5A3406 0%, #C2820E 55%, #FFC93D 100%); }

/* ---- Larger type inside the open panel ---- */
.flow-panel .s7-title {
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.2;
  margin-bottom: 12px;
}
.flow-panel .s7-desc {
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.94);
  max-width: 380px;
}
.flow-panel .s7-num {
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
}
.flow-panel .s7-spine { font-size: 1rem; }
.flow-panel.is-open { flex-grow: 5.2; }

/* Collapsed panels are narrower here because there are eight of them. */
.flow-track .s7-panel { padding: 24px 16px; }

@media (max-width: 900px) {
  .flow-track { flex-direction: column; height: auto; gap: 8px; }
  .flow-track .s7-panel {
    flex: 0 0 auto; min-height: 78px; height: 78px;
    justify-content: center; padding: 16px 18px 16px 66px;
    transition: height 620ms cubic-bezier(0.22, 1, 0.36, 1), border-color 400ms var(--ease-out);
  }
  .flow-track .s7-panel.is-open { height: 216px; justify-content: flex-end; }
  .flow-track .s7-num { top: 50%; transform: translateY(-50%); }
  .flow-track .s7-panel.is-open .s7-num { top: 18px; transform: none; }
  .flow-track .s7-spine {
    writing-mode: horizontal-tb; transform: none;
    left: 66px; bottom: auto; top: 50%; margin-top: -0.6em;
  }
  .flow-panel .s7-desc { max-width: none; }
}

/* ============================================================================
   21 · LIGHT THEME
   ----------------------------------------------------------------------------
   Nearly everything on this site is token-driven, so flipping the tokens does
   most of the work. What follows the token block are the places that hard-code
   a dark value and therefore have to be named explicitly.

   The hero stays dark in both themes on purpose: the particle brain is
   additive light, and it simply does not exist on a white ground.
   ========================================================================= */

html[data-theme="light"] {
  color-scheme: light;

  --cx-void:      #FFFFFF;
  --cx-bg:        #F4F7FE;
  --cx-surface:   #FFFFFF;
  --cx-surface-2: #F7F9FF;

  --cx-text:      #0E1730;
  --cx-text-dim:  #46557A;
  --cx-text-mute: #6B7C9E;

  --cx-line:      rgba(20, 45, 100, 0.14);
  --cx-line-soft: rgba(20, 45, 100, 0.08);
  --cx-line-hot:  rgba(37, 99, 235, 0.55);

  --cloud:        #F4F7FE;
  --cloud-tint:   #EDF2FC;
  --ink-navy:     #0E1730;

  --grey-900: #0E1730;
  --grey-700: #46557A;
  --grey-500: #6B7C9E;
  --grey-300: #A9B7D0;
  --grey-100: rgba(20, 45, 100, 0.14);

  --royal:      #2563EB;
  --cyan-spark: #0891B2;

  --grad-card: linear-gradient(158deg, #FFFFFF 0%, #F5F8FF 100%);
  --grad-ice:  linear-gradient(180deg, #EEF3FD 0%, #F7FAFF 100%);

  --shadow-card:    0 12px 30px -18px rgba(20, 45, 100, 0.30);
  --shadow-card-hi: 0 22px 48px -20px rgba(20, 45, 100, 0.34);

  --glass-fill-light:  rgba(255, 255, 255, 0.80);
  --glass-fill-navbar: rgba(255, 255, 255, 0.82);
  --glass-border:      rgba(20, 45, 100, 0.12);
  --glass-shadow:      0 16px 40px -24px rgba(20, 45, 100, 0.35);
}

html[data-theme="light"] body { background: var(--cx-bg); color: var(--cx-text); }

/* Aurora and grid soften to a wash on white. */
html[data-theme="light"] body::before {
  background:
    radial-gradient(70% 50% at 82% 2%,   rgba(99,102,241,0.13) 0%, transparent 64%),
    radial-gradient(60% 45% at 6% 26%,   rgba(168,85,247,0.10) 0%, transparent 66%),
    radial-gradient(62% 45% at 68% 60%,  rgba(45,212,191,0.10) 0%, transparent 68%),
    radial-gradient(70% 50% at 24% 100%, rgba(56,189,248,0.12) 0%, transparent 70%);
}
html[data-theme="light"] body::after {
  background-image:
    radial-gradient(rgba(20,45,100,0.10) 1px, transparent 1.4px),
    linear-gradient(rgba(20,45,100,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,45,100,0.035) 1px, transparent 1px);
}
html[data-theme="light"] .cx-grain { opacity: 0.05; mix-blend-mode: multiply; }
html[data-theme="light"] .cx-spotlight { mix-blend-mode: multiply; opacity: 0.5; }

/* ---- Sections keep their hue, on a light ground ---- */
html[data-theme="light"] .section[data-accent] {
  background:
    radial-gradient(110% 78% at 10% -12%, var(--sec-tint) 0%, transparent 58%),
    radial-gradient(88% 66% at 92% 112%, var(--sec-tint) 0%, transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F3F7FF 48%, #FFFFFF 100%);
}
html[data-theme="light"] .section[data-accent].section-tint {
  background:
    radial-gradient(110% 78% at 86% -10%, var(--sec-tint) 0%, transparent 58%),
    linear-gradient(180deg, #F1F5FE 0%, #E9F0FC 50%, #F1F5FE 100%);
}
html[data-theme="light"] .section[data-accent].section-ice {
  background:
    radial-gradient(100% 70% at 16% 110%, var(--sec-tint) 0%, transparent 62%),
    linear-gradient(180deg, #F5F8FF 0%, #EDF3FE 50%, #F5F8FF 100%);
}

/* ---- Cards ---- */
html[data-theme="light"] .section[data-accent] .cc-card,
html[data-theme="light"] .section[data-accent] .feat-card,
html[data-theme="light"] .section[data-accent] .video-card,
html[data-theme="light"] .section[data-accent] .testi-card,
html[data-theme="light"] .section[data-accent] .gallery-item,
html[data-theme="light"] .section[data-accent] .newsletter-card,
html[data-theme="light"] .stats-card {
  background-image:
    linear-gradient(158deg, var(--sec-tint) 0%, transparent 55%),
    linear-gradient(158deg, #FFFFFF 0%, #F6F9FF 100%);
  border: 1px solid rgba(20, 45, 100, 0.12);
  box-shadow: 0 14px 34px -22px rgba(20, 45, 100, 0.34), 0 1px 0 rgba(255,255,255,0.9) inset;
}
html[data-theme="light"] .stat-num {
  -webkit-text-fill-color: initial;
  background-image: none;
  color: #0E1730;
}
html[data-theme="light"] .section-head h2 { color: #0B1226; }
html[data-theme="light"] .section-head p,
html[data-theme="light"] .cc-desc,
html[data-theme="light"] .feat-card p,
html[data-theme="light"] .testi-quote { color: #46557A; }

/* ---- Navbar / drawer / footer ---- */
html[data-theme="light"] .navbar {
  background: rgba(255,255,255,0.86);
  border-color: rgba(20,45,100,0.12);
  box-shadow: 0 14px 34px -24px rgba(20,45,100,0.4);
}
html[data-theme="light"] .navbar-wrap.scrolled .navbar { background: rgba(255,255,255,0.96); }
html[data-theme="light"] .brand-name { color: #0E1730; }
html[data-theme="light"] .nav-links a { color: #46557A; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active { color: #2563EB; background: rgba(37,99,235,0.09); }
html[data-theme="light"] .mobile-bottom-nav,
html[data-theme="light"] .mobile-drawer-panel { background: rgba(255,255,255,0.96); }
html[data-theme="light"] .mobile-drawer-panel a { color: #46557A; }
html[data-theme="light"] .site-footer {
  background: linear-gradient(180deg, #EDF2FC 0%, #E4EBF8 100%);
  color: #46557A;
  border-top: 1px solid rgba(20,45,100,0.10);
}
html[data-theme="light"] .footer-col h5,
html[data-theme="light"] .brand-name small { color: #0E1730; }
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .footer-contact a { color: #46557A; }
html[data-theme="light"] .footer-socials a {
  background: rgba(20,45,100,0.05);
  border-color: rgba(20,45,100,0.12);
  color: #46557A;
}

/* ---- Chips + buttons ---- */
html[data-theme="light"] .quick-cat-chip,
html[data-theme="light"] .skill-chip {
  background-image: linear-gradient(160deg, #FFFFFF, #F4F8FF);
  border: 1px solid rgba(20,45,100,0.12);
  color: #33436A;
}
html[data-theme="light"] .btn-glass {
  background: rgba(20,45,100,0.05);
  border-color: rgba(20,45,100,0.14);
  color: #0E1730;
}
html[data-theme="light"] .btn-glass:hover { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.35); }
html[data-theme="light"] .btn-ghost { color: #46557A; }

/* ---- Inputs ---- */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .field-input,
html[data-theme="light"] .field-row input {
  background: #FFFFFF;
  border: 1px solid rgba(20,45,100,0.16);
  color: #0E1730;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #8C9BBA; }
html[data-theme="light"] select option { background: #FFFFFF; color: #0E1730; }

/* ---- App surfaces (dashboard / admin / auth) ---- */
html[data-theme="light"] .dash-shell { background: #F4F7FE; }
html[data-theme="light"] .admin-section,
html[data-theme="light"] .student-welcome-card,
html[data-theme="light"] .student-overview-card,
html[data-theme="light"] .student-course-card,
html[data-theme="light"] .notification-item,
html[data-theme="light"] .certificate-row,
html[data-theme="light"] .admin-course-card,
html[data-theme="light"] .payment-row,
html[data-theme="light"] .instructor-row,
html[data-theme="light"] .auth-card {
  background: #FFFFFF;
  border: 1px solid rgba(20,45,100,0.12);
  box-shadow: 0 14px 34px -24px rgba(20,45,100,0.32);
}
html[data-theme="light"] .student-sidebar,
html[data-theme="light"] .student-tabbar,
html[data-theme="light"] .admin-sidebar {
  background: #FFFFFF;
  border: 1px solid rgba(20,45,100,0.12);
}
html[data-theme="light"] .student-nav-link,
html[data-theme="light"] .admin-nav-btn { color: #46557A; }
html[data-theme="light"] .admin-table td { color: #33436A; }
html[data-theme="light"] .admin-table th { color: #6B7C9E; }
html[data-theme="light"] .auth-page { background: #EEF3FD; }
html[data-theme="light"] .auth-title { color: #0E1730; }

/* The hero is a light-emitting scene; it stays dark in both themes. */
html[data-theme="light"] .cortex-hero { color: #fff; }
html[data-theme="light"] .cortex-hero .hero-headline .bn-line {
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* ---- The toggle itself ---- */
.theme-toggle {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--cx-line);
  color: var(--cx-text);
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; padding: 0;
  transition: background 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              transform 240ms var(--ease-spring);
}
.theme-toggle:hover {
  background: rgba(77,227,255,0.14);
  border-color: var(--cx-line-hot);
  transform: rotate(-18deg) scale(1.06);
}
html[data-theme="light"] .theme-toggle {
  background: rgba(20,45,100,0.05);
  border-color: rgba(20,45,100,0.14);
  color: #0E1730;
}
html[data-theme="light"] .theme-toggle:hover { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.35); }
.theme-toggle .ti-sun  { display: none; }
.theme-toggle .ti-moon { display: block; }
html[data-theme="light"] .theme-toggle .ti-sun  { display: block; }
html[data-theme="light"] .theme-toggle .ti-moon { display: none; }

/* Colour changes are eased so the switch reads as a transition, not a jolt.
   The class is added only for the duration of the swap. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .section,
html.theme-anim .navbar,
html.theme-anim .site-footer,
html.theme-anim .cc-card,
html.theme-anim .feat-card,
html.theme-anim .stats-card {
  transition: background-color 420ms var(--ease-out),
              background-image 420ms var(--ease-out),
              color 420ms var(--ease-out),
              border-color 420ms var(--ease-out) !important;
}

/* ============================================================================
   22 · NAVBAR FIT
   ----------------------------------------------------------------------------
   Adding the theme toggle pushed the bar past its 1120px cap, so the Bengali
   nav labels and the brand started wrapping onto two lines. Nothing here
   changes structure — it widens the bar, stops every label wrapping, and
   tightens the spacing so all of it fits on one row again.
   ========================================================================= */

.navbar {
  max-width: 1300px;
  padding: 8px 10px 8px 16px;
  gap: 10px;
}

/* Labels must never break mid-phrase — that was the visible failure. */
.brand-name,
.nav-links a,
.nav-actions .btn { white-space: nowrap; }

.brand { flex-shrink: 0; }
.brand-name { font-size: 0.94rem; line-height: 1.15; }
.brand-name small { font-size: 0.68rem; }

.nav-links {
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}
.nav-links a {
  padding: 8px 11px;
  font-size: 0.86rem;
}

.nav-actions { gap: 6px; flex-shrink: 0; }
.nav-actions .btn-sm { padding: 9px 15px; font-size: 0.82rem; min-height: 38px; }
.nav-actions .btn-ghost { padding: 9px 10px; }

/* A slightly smaller toggle buys back the width the labels need. */
.theme-toggle { width: 38px; height: 38px; }
.theme-toggle svg { width: 16px; height: 16px; }
.menu-toggle { width: 38px; height: 38px; }

/* Between 1080px and 1240px the full link row plus every action is simply
   too much for Bengali text. Drop the lowest-value items first rather than
   letting the bar wrap. */
@media (max-width: 1240px) {
  .nav-links a { padding: 8px 9px; font-size: 0.82rem; }
  .nav-actions .nav-profile-link { display: none; }
}
@media (max-width: 1140px) {
  .nav-links a { font-size: 0.78rem; padding: 8px 7px; }
  .brand-name small { display: none; }
}

/* Below the link-row breakpoint the drawer takes over, so the bar can relax. */
@media (max-width: 1079px) {
  .navbar { max-width: 1120px; padding: 10px 12px 10px 18px; }
  .brand-name { font-size: 1rem; }
  .brand-name small { display: block; }
}

/* ============================================================================
   23 · NAVBAR SIZING — SECOND PASS
   ----------------------------------------------------------------------------
   The first fix stopped the wrapping but shrank everything too far; the bar
   read as cramped. This restores comfortable type and height while keeping
   the no-wrap guarantee, using the extra width instead of smaller text.
   ========================================================================= */

.navbar {
  max-width: 1340px;
  padding: 10px 12px 10px 18px;
  gap: 14px;
}

.brand img { width: 38px; height: 38px; }
.brand-name { font-size: 1rem; }
.brand-name small { font-size: 0.72rem; display: block; }

.nav-links { gap: 4px; }
.nav-links a {
  padding: 10px 14px;
  font-size: 0.92rem;
  border-radius: 999px;
}

.nav-actions { gap: 8px; }
.nav-actions .btn-sm {
  padding: 11px 20px;
  font-size: 0.88rem;
  min-height: 42px;
}

.theme-toggle, .menu-toggle { width: 42px; height: 42px; }
.theme-toggle svg { width: 18px; height: 18px; }

/* The account pill that replaces লগইন once signed in is the widest single
   item in the bar — cap it so it can't crowd the links out. */
.nav-account-trigger { padding: 7px 13px 7px 7px; font-size: 0.88rem; }
.nav-account-name { max-width: 96px; }
.nav-account-avatar { width: 30px; height: 30px; }

/* Step down only when genuinely necessary, and drop items rather than
   shrinking type past the point of comfort. */
@media (max-width: 1300px) {
  .nav-links a { padding: 10px 11px; font-size: 0.88rem; }
  .nav-actions .nav-profile-link { display: none; }
}
@media (max-width: 1180px) {
  .nav-links a { padding: 9px 9px; font-size: 0.84rem; }
  .nav-account-name { max-width: 72px; }
  .brand-name small { display: none; }
}
@media (max-width: 1079px) {
  /* Drawer takes over here, so the bar has room to breathe again. */
  .navbar { max-width: 1120px; }
  .brand-name small { display: block; }
}

/* ============================================================================
   24 · LIQUID GLASS NAVBAR
   ----------------------------------------------------------------------------
   A real glass surface needs four things, not just transparency:
     1. heavy backdrop blur + saturation, so what is behind it bends and
        intensifies rather than merely showing through
     2. a bright specular edge along the top, where light catches the rim
     3. a darker lower edge, where the glass thickens
     4. a slow-moving sheen, so it reads as a material rather than a filter
   ========================================================================= */

.navbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.05) 34%,
    rgba(10, 20, 45, 0.22) 100%
  );
  backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 20px 50px -22px rgba(0, 0, 0, 0.65),
    0 1px 0 rgba(255, 255, 255, 0.30) inset,      /* top rim highlight */
    0 -1px 0 rgba(255, 255, 255, 0.06) inset;     /* bottom thickness  */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Specular sheen — a wide, very soft diagonal band drifting across the bar. */
.navbar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 55%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 42%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.10) 58%,
    transparent 100%
  );
  filter: blur(6px);
  animation: nav-sheen 9s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
@keyframes nav-sheen {
  0%, 62% { transform: translateX(0); opacity: 0; }
  68%     { opacity: 1; }
  96%     { transform: translateX(320%); opacity: 0; }
  100%    { transform: translateX(320%); opacity: 0; }
}

/* Once scrolled the glass thickens — less transparent, tighter blur. */
.navbar-wrap.scrolled .navbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 34%,
    rgba(8, 16, 38, 0.46) 100%
  );
  backdrop-filter: blur(32px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(32px) saturate(200%) brightness(1.04);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 24px 60px -26px rgba(0, 0, 0, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.26) inset;
}

/* Light theme: the same construction, inverted. */
html[data-theme="light"] .navbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.48) 40%,
    rgba(225, 235, 252, 0.42) 100%
  );
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 18px 44px -24px rgba(20, 45, 100, 0.40),
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 -1px 0 rgba(20, 45, 100, 0.05) inset;
}
html[data-theme="light"] .navbar-wrap.scrolled .navbar {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.68) 40%,
    rgba(228, 237, 253, 0.62) 100%
  );
}
html[data-theme="light"] .navbar::after {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.55) 54%,
    transparent 100%
  );
}

/* Interactive parts sit on the glass rather than punching holes in it. */
.nav-links a:hover { background: rgba(255, 255, 255, 0.12); }
.nav-links a.active {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
html[data-theme="light"] .nav-links a:hover { background: rgba(37, 99, 235, 0.10); }
html[data-theme="light"] .nav-links a.active { background: rgba(37, 99, 235, 0.14); }

.theme-toggle, .menu-toggle {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-account-trigger {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* The mobile drawer and bottom bar are the same material. */
.mobile-drawer-panel, .mobile-bottom-nav {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(10, 20, 45, 0.55) 100%
  );
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.26) inset;
}
html[data-theme="light"] .mobile-drawer-panel,
html[data-theme="light"] .mobile-bottom-nav {
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(240,245,255,0.78) 100%);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 26px 60px -30px rgba(20,45,100,0.4), 0 1px 0 rgba(255,255,255,0.95) inset;
}

/* backdrop-filter is the whole effect; without it the bar would be a
   near-invisible sheet, so fall back to something solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: rgba(14, 22, 46, 0.94); }
  html[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar::after { animation: none; opacity: 0; }
}

/* ============================================================================
   25 · CATEGORY TILES (courses page)
   ----------------------------------------------------------------------------
   These were white cards inheriting light-theme text colour, so the labels
   were near-invisible. Rebuilt as dark tiles with line-art icons, each
   carrying its own hue.
   ========================================================================= */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.category-tile {
  --ct: #38BDF8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(158deg, color-mix(in srgb, var(--ct) 16%, transparent) 0%, transparent 58%),
    linear-gradient(158deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.025) 100%),
    linear-gradient(158deg, #1B2647 0%, #141D3A 100%);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 20px 44px -28px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.09) inset;
  color: #EAF1FF;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  transition: transform 380ms var(--ease-out),
              border-color 380ms var(--ease-out),
              box-shadow 380ms var(--ease-out);
}
.category-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ct) 60%, transparent);
  box-shadow: 0 28px 60px -26px rgba(0,0,0,0.9), 0 0 46px -18px var(--ct);
}

.category-tile .ct-icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ct) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ct) 34%, transparent);
  color: var(--ct);
  box-shadow: 0 0 26px -12px var(--ct);
  flex-shrink: 0;
}
.category-tile .ct-icon svg { width: 23px; height: 23px; }
.category-tile .ct-label { color: #EAF1FF; }

.category-tile.c-ai     { --ct: #38BDF8; }
.category-tile.c-dev    { --ct: #6366F1; }
.category-tile.c-design { --ct: #A855F7; }
.category-tile.c-data   { --ct: #2DD4BF; }
.category-tile.c-sec    { --ct: #FB7185; }
.category-tile.c-office { --ct: #FBBF24; }
.category-tile.c-kids   { --ct: #A3E635; }

html[data-theme="light"] .category-tile {
  background-image:
    linear-gradient(158deg, color-mix(in srgb, var(--ct) 14%, transparent) 0%, transparent 58%),
    linear-gradient(158deg, #FFFFFF 0%, #F5F8FF 100%);
  border-color: rgba(20,45,100,0.12);
  color: #0E1730;
}
html[data-theme="light"] .category-tile .ct-label { color: #0E1730; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .category-tile .ct-icon { background: rgba(77,227,255,0.14); border-color: rgba(77,227,255,0.32); }
}


/* ============================================================================
   26 · SECTION RHYTHM — CLOSE THE GAPS
   ----------------------------------------------------------------------------
   Section padding had grown to 76-132px top AND bottom, so consecutive
   sections left ~260px of empty space between content. Halved, and the
   loose wrappers between them tightened.
   ========================================================================= */

.section[data-accent] { padding: clamp(48px, 5.5vw, 76px) 0; }
.section-head { margin-bottom: clamp(26px, 3.2vw, 40px); }

.stats-strip { margin-top: clamp(20px, 3vw, 34px); }
.quick-cat-row { margin: clamp(18px, 2.6vw, 30px) 0; }

/* These two sit outside .section and were adding their own vertical run. */
.container.stats-strip + .container { margin-top: 0; }

/* The showcase band only exists when Firestore returns slides; when hidden
   it must contribute nothing. */
.showcase-section[hidden] { display: none !important; }
.showcase-section { padding-top: clamp(40px, 5vw, 64px); }


/* ============================================================================
   27 · TECHNICAL GRID — ORTHOGONAL, NOT DIAGONAL
   ----------------------------------------------------------------------------
   The previous texture was a 135deg hatch, which read as a diagonal weave.
   Replaced with a proper drafting grid: fine cells, heavier majors every
   fifth line, crosshairs at the major intersections and a dot at each cell
   centre — the construction in the supplied reference.

   One inline SVG tile rather than stacked gradients, because the crosshairs
   need exact geometry that background-image gradients cannot express.
   ========================================================================= */

.section::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23A9C7FF' fill='none'%3E%3Cg stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M24 0v120M48 0v120M72 0v120M96 0v120M0 24h120M0 48h120M0 72h120M0 96h120'/%3E%3C/g%3E%3Cg stroke-opacity='0.13' stroke-width='1'%3E%3Cpath d='M0 0v120M120 0v120M0 0h120M0 120h120'/%3E%3C/g%3E%3Cg stroke-opacity='0.30' stroke-width='1.2'%3E%3Cpath d='M0 -7v14M-7 0h14M120 -7v14M113 0h14M0 113v14M-7 120h14M120 113v14M113 120h14'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='1.1' fill='%23A9C7FF' fill-opacity='0.22'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  opacity: 0.9;
}

/* The page-level backdrop grid follows the same construction so the two
   layers agree instead of interfering. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg stroke='%23A9C7FF' fill='none'%3E%3Cg stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M24 0v120M48 0v120M72 0v120M96 0v120M0 24h120M0 48h120M0 72h120M0 96h120'/%3E%3C/g%3E%3Cg stroke-opacity='0.11' stroke-width='1'%3E%3Cpath d='M0 0v120M0 0h120'/%3E%3C/g%3E%3Cg stroke-opacity='0.26' stroke-width='1.2'%3E%3Cpath d='M0 -7v14M-7 0h14'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='60' cy='60' r='1' fill='%23A9C7FF' fill-opacity='0.20'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

html[data-theme="light"] .section::before,
html[data-theme="light"] body::after { opacity: 0.55; filter: invert(1) hue-rotate(180deg); }

/* ============================================================================
   28 · REVIEW CLAMP + READ MORE
   A single long review was stretching the whole page. Long ones now clamp to
   five lines behind a toggle; short ones are untouched.
   ========================================================================= */
.rv-card.is-clamped .rv-quote {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* line-clamp needs a fallback height for engines that ignore it. */
  max-height: 8.6em;
}
.rv-card.is-clamped.is-open .rv-quote {
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}
.rv-more {
  background: none;
  border: none;
  padding: 0;
  margin: -6px 0 14px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cx-cyan);
  cursor: pointer;
  align-self: flex-start;
}
.rv-more:hover { text-decoration: underline; }
.rv-more:focus-visible { outline: 2px solid var(--cx-cyan); outline-offset: 3px; border-radius: 4px; }
html[data-theme="light"] .rv-more { color: #2563EB; }

/* Cards in the homepage rail need a ceiling too, or one long review makes
   the whole row tall. */
.testi-track .rv-card { max-width: 360px; }


/* ============================================================================
   29 · BATCH BUILDER (admin)
   ========================================================================= */
.batch-builder { display: flex; flex-direction: column; gap: 10px; }
.batch-row {
  display: grid;
  grid-template-columns: 110px 170px 100px 150px minmax(0,1fr) auto;
  gap: 10px; align-items: end;
  padding: 14px; border-radius: 16px;
  background: var(--cxa-well);
  border: 1px solid var(--cx-line);
  transition: border-color 260ms var(--ease-out);
}
.batch-row:hover { border-color: rgba(77, 227, 255, 0.32); }
.batch-window {
  display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 10px; min-width: 0;
}
.batch-window span {
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cx-text-mute);
}
.batch-window strong {
  font-size: 0.88rem; color: var(--cx-cyan); font-weight: 700;
}
.batch-row-actions { padding-bottom: 6px; }
@media (max-width: 1080px) {
  .batch-row { grid-template-columns: 1fr 1fr; }
  .batch-window { grid-column: 1 / -1; padding-bottom: 0; }
  .batch-row-actions { grid-column: 1 / -1; }
  .batch-row-actions .btn { width: 100%; justify-content: center; }
}

/* Date shown per item in the week editor */
.week-item-date {
  font-family: var(--font-data);
  font-size: 0.72rem; font-weight: 700;
  color: var(--cx-cyan);
  padding: 8px 10px; border-radius: 10px;
  background: rgba(77, 227, 255, 0.08);
  border: 1px solid rgba(77, 227, 255, 0.22);
  text-align: center; white-space: nowrap;
}
.week-item-row { grid-template-columns: 118px 92px minmax(200px,1fr) 140px minmax(200px,1fr); }
@media (max-width: 900px) { .week-item-row { grid-template-columns: 1fr; } }

/* Date shown to the student on each lesson row */
.ci-date {
  font-family: var(--font-data);
  font-size: 0.72rem; font-weight: 700;
  color: var(--cx-cyan);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(77, 227, 255, 0.10);
  border: 1px solid rgba(77, 227, 255, 0.24);
  white-space: nowrap; flex-shrink: 0;
}
html[data-theme="light"] .ci-date,
html[data-theme="light"] .week-item-date {
  color: #0E7490; background: rgba(8, 145, 178, 0.10); border-color: rgba(8, 145, 178, 0.28);
}


/* ============================================================================
   30 · LIGHT THEME — TEXT LEGIBILITY
   ----------------------------------------------------------------------------
   Many components set a pale colour directly rather than through a token, so
   they stayed near-white on the light ground. This names them.
   ========================================================================= */
html[data-theme="light"] {
  --nm-ink: #46557A;
  --nm-ink-dim: #6B7C9E;
}

html[data-theme="light"] body,
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] td,
html[data-theme="light"] label,
html[data-theme="light"] .field-label { color: #33436A; }

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] strong,
html[data-theme="light"] .testi-name,
html[data-theme="light"] .cc-body h4,
html[data-theme="light"] .feat-card h4,
html[data-theme="light"] .video-body h4,
html[data-theme="light"] .smart7-card h4 { color: #0B1226; }

html[data-theme="light"] .cc-desc,
html[data-theme="light"] .cc-meta,
html[data-theme="light"] .video-body p,
html[data-theme="light"] .testi-role,
html[data-theme="light"] .field-hint,
html[data-theme="light"] .stat-label,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .gallery-placeholder { color: #6B7C9E; }

html[data-theme="light"] .cc-price,
html[data-theme="light"] .results-count strong,
html[data-theme="light"] .student-overview-card strong,
html[data-theme="light"] .pi-row strong,
html[data-theme="light"] .cert-row-info strong,
html[data-theme="light"] .notification-item .ni-head strong { color: #0B1226; }

html[data-theme="light"] .eyebrow { color: #2563EB; text-shadow: none; }
html[data-theme="light"] .section[data-accent] .eyebrow {
  color: color-mix(in srgb, var(--sec) 72%, #0B1226);
  text-shadow: none;
}

/* Badges and pills that were built for a dark ground */
html[data-theme="light"] .badge-cyan {
  background: rgba(8, 145, 178, 0.10);
  border-color: rgba(8, 145, 178, 0.28);
  color: #0E7490;
  text-shadow: none;
}
html[data-theme="light"] .rv-course,
html[data-theme="light"] .admin-role-tag,
html[data-theme="light"] .scc-badge { color: #0E7490; }
html[data-theme="light"] .student-id-box code,
html[data-theme="light"] .admin-stat-num,
html[data-theme="light"] .admin-period-stat .aps-num,
html[data-theme="light"] .spc-head > strong,
html[data-theme="light"] .admin-course-pct,
html[data-theme="light"] .ac-grade,
html[data-theme="light"] .cert-list-title,
html[data-theme="light"] .student-kicker,
html[data-theme="light"] .selected-course-label { color: #1D4ED8; }

/* Dark-on-dark panels that must stay dark keep white text */
html[data-theme="light"] .flagship,
html[data-theme="light"] .cta-banner,
html[data-theme="light"] .dash-hero,
html[data-theme="light"] .selected-course-hero,
html[data-theme="light"] .s7-panel,
html[data-theme="light"] .video-thumb,
html[data-theme="light"] .cc-thumb { color: #fff; }
html[data-theme="light"] .flagship h3,
html[data-theme="light"] .cta-banner h2,
html[data-theme="light"] .dash-name,
html[data-theme="light"] .s7-title { color: #fff; }
html[data-theme="light"] .flagship p,
html[data-theme="light"] .cta-banner p { color: rgba(255,255,255,0.86); }
html[data-theme="light"] .fs-item .fs-lab { color: rgba(255,255,255,0.72); }

/* Toasts */
html[data-theme="light"] .toast-info { background: #0E1730; color: #fff; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-theme="light"] .section[data-accent] .eyebrow { color: #2563EB; }
}

/* ============================================================================
   31 · NAVBAR OVERFLOW FIX
   ----------------------------------------------------------------------------
   Section 24 put `overflow: hidden` on .navbar so the sheen pseudo-element
   could not escape the pill. That also clipped the account dropdown, which is
   a child of the bar — the menu opened but was invisible.

   The sheen is now painted as an extra background layer on .navbar itself and
   animated by background-position, so it can never overflow and the bar needs
   no clipping at all.
   ========================================================================= */

.navbar {
  overflow: visible;
  background-image:
    /* moving specular band */
    linear-gradient(100deg,
      transparent 38%,
      rgba(255, 255, 255, 0.13) 47%,
      rgba(255, 255, 255, 0.20) 50%,
      rgba(255, 255, 255, 0.13) 53%,
      transparent 62%),
    /* the glass body itself */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.05) 34%,
      rgba(10, 20, 45, 0.22) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 180% 0, 0 0;
  background-repeat: no-repeat;
  animation: nav-sheen-slide 9s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
@keyframes nav-sheen-slide {
  0%, 58% { background-position: 180% 0, 0 0; }
  92%     { background-position: -80% 0, 0 0; }
  100%    { background-position: -80% 0, 0 0; }
}

/* The old pseudo-element sheen is no longer needed. */
.navbar::after { content: none; }

html[data-theme="light"] .navbar {
  background-image:
    linear-gradient(100deg,
      transparent 38%,
      rgba(255, 255, 255, 0.55) 47%,
      rgba(255, 255, 255, 0.80) 50%,
      rgba(255, 255, 255, 0.55) 53%,
      transparent 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.48) 40%,
      rgba(225, 235, 252, 0.42) 100%);
}

/* The dropdown must sit above the bar and everything behind it. */
.nav-account { position: relative; z-index: 5; }
.nav-account-menu { z-index: 220; }

@media (prefers-reduced-motion: reduce) {
  .navbar { animation: none; background-position: 180% 0, 0 0; }
}


/* ============================================================================
   32 · REVIEW AVATARS
   Reviews now carry the student's photo; the initial stays as the fallback.
   ========================================================================= */
.rv-avatar {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rv-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}


/* ============================================================================
   33 · DATE-LOCKED ITEMS
   Quizzes and assignments cannot be ticked before their scheduled date.
   ========================================================================= */
.curriculum-item.is-locked { opacity: 0.72; }
.curriculum-item.is-locked .ci-checkbox-wrap { cursor: not-allowed; }
.curriculum-item.is-locked input[type="checkbox"] { cursor: not-allowed; }
.ci-lock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 196, 93, 0.10);
  border: 1px solid rgba(255, 196, 93, 0.30);
  color: #FFD08A;
  white-space: nowrap; flex-shrink: 0;
}
.ci-lock svg { width: 12px; height: 12px; }
html[data-theme="light"] .ci-lock {
  background: rgba(180, 120, 10, 0.10);
  border-color: rgba(180, 120, 10, 0.28);
  color: #9A6500;
}


/* ============================================================================
   34 · BATCH PICKER (public course page)
   ========================================================================= */
.batch-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .batch-list { grid-template-columns: repeat(2, 1fr); } }

.batch-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 18px 20px; border-radius: 18px;
  background-image:
    linear-gradient(158deg, rgba(56,189,248,0.14) 0%, transparent 55%),
    linear-gradient(158deg, #1B2647 0%, #141D3A 100%);
  border: 1px solid rgba(255,255,255,0.13);
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.batch-card:hover { border-color: var(--cx-line-hot); box-shadow: 0 0 40px -18px rgba(77,227,255,0.8); transform: translateY(-3px); }
.batch-card-main { min-width: 0; }
.batch-card-no {
  font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cx-cyan);
}
.batch-card-window { font-size: 1.02rem; font-weight: 700; color: #fff; margin-top: 4px; }
.batch-card-status {
  font-size: var(--fs-xs); font-weight: 700;
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.batch-card-status.open    { background: rgba(77,255,195,0.11); color: #7DFFCE; border: 1px solid rgba(77,255,195,0.30); }
.batch-card-status.running { background: rgba(255,196,93,0.12); color: #FFD08A; border: 1px solid rgba(255,196,93,0.30); }
.batch-card-status.closed  { background: rgba(125,178,255,0.10); color: var(--cx-text-mute); border: 1px solid var(--cx-line); }

html[data-theme="light"] .batch-card {
  background-image:
    linear-gradient(158deg, rgba(56,189,248,0.12) 0%, transparent 55%),
    linear-gradient(158deg, #FFFFFF 0%, #F6F9FF 100%);
  border-color: rgba(20,45,100,0.12);
}
html[data-theme="light"] .batch-card-window { color: #0B1226; }

/* Footer contact emails (rendered by site-settings.js) */
.footer-contact .fc-email { align-items: flex-start; gap: 10px; }
.footer-contact .fc-email svg { margin-top: 3px; }
.footer-contact .fc-email span { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.footer-contact .fc-email b { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cx-cyan); }
.footer-contact .fc-email i { font-style: normal; font-size: var(--fs-xs); color: var(--cx-text-mute); margin-top: 1px; }
html[data-theme="light"] .footer-contact .fc-email b { color: #0E7490; }


/* ============================================================================
   SECTION RHYTHM
   ----------------------------------------------------------------------------
   tokens.css sets --section-pad: clamp(64px, 9vw, 128px). That padding is
   applied to the TOP and BOTTOM of every .section, so two stacked sections
   put 256px of empty space between their content at desktop width. On the
   sections whose first child is a card rather than a .section-head — the
   newsletter and the CTA banner especially — that reads as a hole in the
   page rather than breathing room.

   tokens.css is left untouched (it is one of the byte-identical originals);
   the token is re-declared here instead, where cortex.css already wins by
   cascade.
   ============================================================================ */
:root {
  --section-pad: clamp(48px, 6vw, 88px);
}

/* Consecutive sections stack their bottom + top padding. Trim the top of
   the follower so the seam is one comfortable gap instead of two. */
.section + .section { padding-top: calc(var(--section-pad) * 0.72); }

/* A section that opens straight onto a card (no .section-head to fill the
   space) needs less room above it than one that opens onto a heading. */
#newsletter { padding-top: calc(var(--section-pad) * 0.6); }

/* ============================================================================
   ORANGE-GLOW FLOW BUG
   ----------------------------------------------------------------------------
   BUGFIX — large empty gaps appeared above the sections that carry a glow
   (how-it-works, YouTube, newsletter, CTA…).

   base.css:218 makes .orange-glow `position: absolute` so the blob floats
   behind the content. The rule at cortex.css:193 — meant to lift .container
   above the .section::before texture — listed `.section > .orange-glow`
   alongside it and set BOTH to `position: relative`. That dropped a purely
   decorative 420px (og-md) or 560px (og-lg) circle straight into the
   document flow, so every glow pushed the real content down by its own
   height. The space was the blob, not the padding.

   The glow keeps its stacking context; it just stops taking up room.
   ============================================================================ */
.section > .orange-glow,
.section.has-glow > .orange-glow { position: absolute; }


/* ============================================================================
   LEGAL PAGES (terms.html · refund.html · privacy.html)
   ----------------------------------------------------------------------------
   Long-form reading, so this is the one place on the site where measure and
   line-height matter more than density: ~68ch column, generous leading, and a
   sticky table of contents that turns a wall of clauses into something a
   worried student can navigate.
   ============================================================================ */
.legal-wrap {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding-top: var(--sp-7);
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr — a bare 1fr is minmax(auto, 1fr), so the
     refund table's min-width would stretch the column past the viewport
     instead of letting .legal-table-wrap scroll it. */
  .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

.legal-updated {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--cx-text-mute);
}
.legal-updated strong { color: var(--cx-cyan); }
html[data-theme="light"] .legal-updated strong { color: #0E7490; }

/* ---------- table of contents ---------- */
.legal-toc {
  position: sticky;
  top: 96px;
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  padding: 18px;
  /* NOT --cxa-well: that token is declared in cortex-app.css, which the
     public pages do not load, so it would resolve to nothing and leave the
     panel transparent. Stated literally here instead. */
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html[data-theme="light"] .legal-toc {
  background: #FFFFFF;
  box-shadow: 0 10px 26px -18px rgba(20, 45, 100, 0.30);
}
@media (max-width: 900px) { .legal-toc { position: static; } }
.legal-toc h2 {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cx-text-mute);
  margin-bottom: 12px;
}
.legal-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }
.legal-toc li { counter-increment: toc; margin-bottom: 2px; }
.legal-toc a {
  display: block;
  padding: 6px 9px;
  border-radius: 9px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--cx-text-dim);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.legal-toc a:before { content: counter(toc) ". "; color: var(--cx-text-mute); }
.legal-toc a:hover { background: rgba(77, 227, 255, 0.10); color: var(--cx-cyan); }
html[data-theme="light"] .legal-toc a:hover { background: rgba(37, 99, 235, 0.07); color: #1D4ED8; }

/* ---------- body ---------- */
.legal-body { max-width: 68ch; }
.legal-body section { margin-bottom: var(--sp-7); scroll-margin-top: 96px; }
.legal-body h2 {
  font-size: 1.24rem;
  line-height: 1.4;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}
.legal-body h3 {
  font-size: 0.98rem;
  margin: var(--sp-5) 0 var(--sp-3);
  color: var(--cx-cyan);
}
html[data-theme="light"] .legal-body h3 { color: #1D4ED8; }
.legal-body p, .legal-body li {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--cx-text-dim);
}
.legal-body p { margin-bottom: var(--sp-4); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--sp-4) 1.3em; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--cx-text); font-weight: 700; }
.legal-body a { color: var(--cx-cyan); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .legal-body a { color: #1D4ED8; }

.legal-intro {
  border-left: 3px solid var(--cx-cyan);
  padding: 2px 0 2px 16px;
  margin-bottom: var(--sp-7);
}
.legal-intro p { margin: 0; }
html[data-theme="light"] .legal-intro { border-left-color: #1D4ED8; }

/* A note is secondary; a highlight is the thing we most want read. */
.legal-note {
  font-size: 0.87rem !important;
  color: var(--cx-text-mute) !important;
  border-left: 2px solid var(--cx-line);
  padding-left: 13px;
}
.legal-highlight {
  background: rgba(77, 255, 195, 0.08);
  border: 1px solid rgba(77, 255, 195, 0.28);
  border-radius: 13px;
  padding: 14px 16px;
}
html[data-theme="light"] .legal-highlight {
  background: rgba(15, 122, 85, 0.06);
  border-color: rgba(15, 122, 85, 0.24);
}

/* Placeholders the academy still has to decide — deliberately loud so they
   cannot be published by accident. */
.legal-fill {
  background: rgba(255, 196, 93, 0.18);
  border: 1px dashed rgba(255, 196, 93, 0.6);
  color: #FFD08A;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
  font-weight: 600;
}
html[data-theme="light"] .legal-fill {
  background: rgba(154, 101, 0, 0.10);
  border-color: rgba(154, 101, 0, 0.45);
  color: #7A4F00;
}

/* ---------- tables ---------- */
.legal-table-wrap { overflow-x: auto; margin-bottom: var(--sp-4); }
.legal-table { width: 100%; border-collapse: collapse; min-width: 380px; }
.legal-table th, .legal-table td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--cx-line);
  font-size: 0.9rem;
  line-height: 1.6;
  vertical-align: top;
}
.legal-table th {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cx-text-mute);
}
.legal-table td { color: var(--cx-text-dim); }
.legal-table tbody tr:last-child td { border-bottom: none; }

/* Legal links in the footer bar. .footer-bottom is space-between, so this
   sits opposite the copyright line. */
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-legal a {
  color: var(--cx-text-mute);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-legal a:hover { color: var(--cx-cyan); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .footer-legal a:hover { color: #1D4ED8; }


/* ============================================================================
   MCQ EXAM PAGE (exams.html)
   ----------------------------------------------------------------------------
   Someone sitting a timed test should not have to hunt for anything: the
   timer is always visible, options are large enough to tap on a phone, and
   the selected answer is unmistakable at a glance.
   ============================================================================ */
.exam-wrap { padding-top: var(--sp-7); }

/* ---------- login gate / submitted state ---------- */
.exam-gate {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  border: 1px solid var(--cx-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="light"] .exam-gate { background: #fff; box-shadow: 0 14px 34px -22px rgba(20,45,100,.3); }
.exam-gate-icon { font-size: 2.4rem; display: block; margin-bottom: 14px; }
.exam-gate h2 { font-size: 1.4rem; margin-bottom: 10px; }
.exam-gate p { color: var(--cx-text-dim); line-height: 1.8; margin-bottom: 22px; }

/* ---------- category tabs ---------- */
.exam-cat-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.exam-cat-tab {
  text-align: left;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.exam-cat-tab:hover { transform: translateY(-2px); border-color: var(--cx-line-hot); }
.exam-cat-tab strong { display: block; font-size: 1.05rem; margin-bottom: 4px; color: var(--cx-text); }
.exam-cat-tab span { font-size: var(--fs-sm); color: var(--cx-text-mute); }
.exam-cat-tab.active {
  border-color: var(--cx-line-hot);
  background: rgba(77, 227, 255, 0.10);
  box-shadow: 0 0 34px -18px rgba(77, 227, 255, .9);
}
html[data-theme="light"] .exam-cat-tab { background: #fff; }
html[data-theme="light"] .exam-cat-tab.active { background: rgba(37, 99, 235, 0.07); }

/* ---------- exam cards ---------- */
.exam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.exam-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, 0.03);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease;
}
.exam-card:hover { transform: translateY(-4px); border-color: var(--cx-line-hot); }
html[data-theme="light"] .exam-card { background: #fff; box-shadow: 0 12px 30px -22px rgba(20,45,100,.3); }
.exam-card h3 { font-size: 1.08rem; line-height: 1.5; }
.exam-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.exam-mode {
  font-size: 0.62rem; font-weight: 700; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 99px; white-space: nowrap;
}
.exam-mode.is-weekly { background: rgba(255,196,93,.14); border: 1px solid rgba(255,196,93,.42); color: #FFD08A; }
.exam-mode.is-practice { background: rgba(77,255,195,.10); border: 1px solid rgba(77,255,195,.34); color: #7DFFCE; }
html[data-theme="light"] .exam-mode.is-weekly { background: rgba(154,101,0,.09); color: #7A4F00; }
html[data-theme="light"] .exam-mode.is-practice { background: rgba(15,122,85,.08); color: #0F7A55; }
.exam-deadline { font-size: 0.66rem; color: var(--cx-text-mute); white-space: nowrap; }
.exam-meta { font-size: var(--fs-sm); color: var(--cx-text-mute); }
.exam-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--fs-xs); color: var(--cx-text-mute); }
.exam-stats strong { color: var(--cx-text); }
.exam-stats .is-warn strong { color: #FF9E9E; }
.exam-card .btn { margin-top: auto; }
.exam-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  border: 1px dashed var(--cx-line); border-radius: 18px; color: var(--cx-text-mute);
}

/* ---------- runner ---------- */
.exam-runbar {
  position: sticky; top: 78px; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 20px; margin-bottom: 12px;
  border-radius: 18px;
  border: 1px solid var(--cx-line);
  background: rgba(8, 12, 24, 0.94);
  backdrop-filter: blur(14px);
}
html[data-theme="light"] .exam-runbar { background: rgba(255,255,255,.95); box-shadow: 0 10px 26px -20px rgba(20,45,100,.35); }
.exam-runbar h2 { font-size: 1.12rem; }
.exam-runbar p { font-size: var(--fs-xs); color: var(--cx-text-mute); margin-top: 2px; }
.exam-timer {
  font-family: var(--font-data); font-size: 1.6rem; font-weight: 800;
  padding: 8px 16px; border-radius: 14px; white-space: nowrap;
  background: rgba(77,227,255,.10); border: 1px solid rgba(77,227,255,.30); color: var(--cx-cyan);
}
.exam-timer.is-low {
  background: rgba(255,122,122,.14); border-color: rgba(255,122,122,.5); color: #FF9E9E;
  animation: examPulse 1s ease-in-out infinite;
}
@keyframes examPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .exam-timer.is-low { animation: none; } }

.exam-progress { height: 6px; border-radius: 99px; background: rgba(125,178,255,.16); overflow: hidden; }
.exam-progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--cx-cyan), var(--cx-blue));
  transition: width .3s ease;
}
.exam-progress-text { font-size: var(--fs-xs); color: var(--cx-text-mute); margin: 6px 0 18px; }

.exam-questions { display: flex; flex-direction: column; gap: 14px; }
.exam-q {
  border: 1px solid var(--cx-line); border-radius: 18px; padding: 18px 20px;
  background: rgba(255,255,255,.03); margin: 0;
}
html[data-theme="light"] .exam-q { background: #fff; }
.exam-q legend {
  font-weight: 700; line-height: 1.7; padding: 0 0 12px;
  color: var(--cx-text); float: left; width: 100%;
}
.exam-q-no {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; margin-right: 8px;
  border-radius: 8px; font-size: .8rem;
  background: rgba(77,227,255,.12); color: var(--cx-cyan);
}
html[data-theme="light"] .exam-q-no { background: rgba(37,99,235,.09); color: #1D4ED8; }
.exam-options { display: grid; gap: 8px; clear: both; }
.exam-option {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--cx-line-soft);
  background: rgba(255,255,255,.02);
  transition: border-color .18s ease, background .18s ease;
  line-height: 1.6;
}
.exam-option:hover { border-color: var(--cx-line-hot); }
.exam-option input { position: absolute; opacity: 0; pointer-events: none; }
.exam-option-letter {
  flex: 0 0 28px; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%; font-weight: 700; font-size: .82rem;
  border: 1px solid var(--cx-line); color: var(--cx-text-mute);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.exam-option:has(input:checked) {
  border-color: var(--cx-line-hot);
  background: rgba(77,227,255,.10);
}
.exam-option:has(input:checked) .exam-option-letter {
  background: var(--cx-cyan); color: #04060D; border-color: transparent;
}
/* Keyboard users must still see focus even though the radio itself is hidden. */
.exam-option:has(input:focus-visible) { outline: 2px solid var(--cx-cyan); outline-offset: 2px; }
html[data-theme="light"] .exam-option { background: #fff; }
html[data-theme="light"] .exam-option:has(input:checked) { background: rgba(37,99,235,.07); }
html[data-theme="light"] .exam-option:has(input:checked) .exam-option-letter { background: #1D4ED8; color: #fff; }

.exam-submit-row { margin-top: 24px; text-align: center; }
.exam-submit-row .btn { min-width: 220px; }
.exam-submit-row .field-hint { margin-top: 10px; }

/* ---------- result ---------- */
.exam-result-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 24px; margin-bottom: 24px;
  border-radius: 22px; border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .exam-result-head { background: #fff; }
.exam-score-ring {
  --progress: 0deg;
  width: 104px; height: 104px; flex: 0 0 104px;
  border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--cx-cyan) var(--progress), rgba(125,178,255,.14) 0);
}
.exam-score-ring:before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: var(--cx-bg);
}
.exam-score-ring span {
  position: relative; z-index: 1;
  font-family: var(--font-data); font-weight: 800; font-size: 1.25rem; color: var(--cx-text);
}
.exam-result-head h2 { font-size: 1.3rem; margin-bottom: 4px; }
.exam-score-line strong { font-family: var(--font-data); font-size: 1.5rem; color: var(--cx-cyan); }
html[data-theme="light"] .exam-score-line strong { color: #1D4ED8; }
.exam-score-chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-sm); color: var(--cx-text-mute); }
.exam-score-chips strong { color: var(--cx-text); }
.exam-score-chips .is-ok strong { color: #7DFFCE; }
.exam-score-chips .is-bad strong { color: #FF9E9E; }
.exam-result-head .btn { margin-left: auto; }

.exam-review-title { font-size: 1.05rem; margin-bottom: 12px; }
.exam-review { display: flex; flex-direction: column; gap: 10px; }
.exam-review-item {
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--cx-line); border-left-width: 3px;
  background: rgba(255,255,255,.02);
  font-size: var(--fs-sm); line-height: 1.75;
}
.exam-review-item strong { display: block; margin-bottom: 6px; color: var(--cx-text); }
.exam-review-line { display: block; color: var(--cx-text-mute); }
.exam-review-line.is-right { color: #7DFFCE; }
.exam-review-item.is-ok { border-left-color: #7DFFCE; }
.exam-review-item.is-bad { border-left-color: #FF9E9E; }
.exam-review-item.is-blank { border-left-color: #FFC45D; }
html[data-theme="light"] .exam-review-item { background: #fff; }
html[data-theme="light"] .exam-review-line.is-right { color: #0F7A55; }

@media (max-width: 640px) {
  .exam-runbar { top: 68px; padding: 12px 14px; }
  .exam-timer { font-size: 1.25rem; padding: 6px 12px; }
  .exam-result-head .btn { margin-left: 0; }
}

/* ---------- admin: MCQ tab ---------- */
.mcq-bank-form, .mcq-exam-form {
  border: 1px solid var(--cx-line); border-radius: 18px;
  padding: 18px; margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="light"] .mcq-bank-form, html[data-theme="light"] .mcq-exam-form { background: #F7F9FE; }
.admin-table tr.mcq-top td { background: rgba(255, 196, 93, 0.07); }

/* ============================================================================
   PWA INSTALL BANNER
   ----------------------------------------------------------------------------
   Sits above the mobile bottom nav rather than over it, so it never covers
   navigation. Dismissible, and js/pwa.js remembers the dismissal for two
   weeks — an install prompt that nags is worse than none.
   ============================================================================ */
.pwa-install {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%);
  z-index: 2000;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--cx-line);
  background: rgba(8, 12, 24, 0.96);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 60px -26px #000;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.pwa-install.is-open { transform: translate(-50%, 0); }
html[data-theme="light"] .pwa-install {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 22px 50px -26px rgba(20, 45, 100, .5);
}

/* The bottom nav only exists on small screens; lift clear of it there. */
@media (max-width: 768px) {
  /* The bottom nav is 73px tall and already sits 16px off the bottom,
     so the banner has to clear 89px, not 78. Measured, not guessed. */
  .pwa-install { bottom: calc(101px + env(safe-area-inset-bottom, 0px)); }
}

.pwa-install-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 11px; object-fit: contain;
  background: #fff;
}
.pwa-install-text { min-width: 0; flex: 1 1 auto; }
.pwa-install-text strong { display: block; font-size: 0.94rem; margin-bottom: 2px; }
.pwa-install-text span { display: block; font-size: var(--fs-xs); line-height: 1.55; color: var(--cx-text-mute); }
.pwa-install-text b { color: var(--cx-cyan); font-weight: 700; }
html[data-theme="light"] .pwa-install-text b { color: #1D4ED8; }

.pwa-install-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pwa-install-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  border: 1px solid var(--cx-line);
  background: transparent; color: var(--cx-text-mute);
  font-size: 0.8rem; line-height: 1;
  transition: color .2s ease, border-color .2s ease;
}
.pwa-install-close:hover { color: var(--cx-text); border-color: var(--cx-line-hot); }

@media (max-width: 480px) {
  .pwa-install { flex-wrap: wrap; }
  .pwa-install-text { flex: 1 1 100%; order: 2; }
  .pwa-install-actions { order: 1; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install { transition: none; }
}

/* ============================================================================
   LIGHT THEME — LIGHT-ON-LIGHT TEXT FIXES
   ----------------------------------------------------------------------------
   Found by walking every text node and comparing its colour against the first
   OPAQUE backdrop above it. Twenty-seven elements were painting near-white or
   pale-accent text onto the light background, i.e. effectively invisible.

   The cause in every case is specificity: the dark-theme rule is written as
   `.section[data-accent] …` (0,3,1) while the light override was
   `html[data-theme="light"] .section-head h2` (0,2,2) — so the dark rule won
   even in light mode. These overrides restate the same selectors WITH the
   theme prefix, which lifts them above the dark-theme originals.

   Accent colours reuse the light palette already established in this file:
   amber #9A6500, cyan #0E7490, rose #B3243F, ink #0B1226.
   ============================================================================ */

/* 1 · section headings — 9 occurrences, contrast was 1.0 (invisible) */
html[data-theme="light"] .section[data-accent] .section-head h2,
html[data-theme="light"] .section[data-accent] h2 { color: #0B1226; }

/* 2 · feature-card icons */
html[data-theme="light"] .section[data-accent] .feat-card .feat-icon { color: #9A6500; }

/* 3 · review stars */
html[data-theme="light"] .rv-star.on,
html[data-theme="light"] .section[data-accent] .rv-star.on { color: #B26A00; }

/* 4 · course-card category label */
html[data-theme="light"] .section[data-accent] .cc-cat,
html[data-theme="light"] .cc-cat { color: #0E7490; }

/* 5 · course-card rating */
html[data-theme="light"] .section[data-accent] .cc-rating,
html[data-theme="light"] .cc-rating { color: #9A6500; }

/* 6 · review course tag */
html[data-theme="light"] .section[data-accent] .rv-course,
html[data-theme="light"] .rv-course { color: #B3243F; }

/* 7 · footer brand — the footer gradient is LIGHT in this theme
   (#EDF2FC → #E4EBF8), so white lettering disappeared into it. */
html[data-theme="light"] .site-footer .brand-name { color: #0B1226 !important; }
html[data-theme="light"] .site-footer .brand-name small { color: #46557A !important; }

/* 8 · stat labels were 3.91:1 against a 4.5:1 requirement — a near miss,
   but small text is exactly where a near miss is felt. */
html[data-theme="light"] .stat-label { color: #55637F; }


/* ============================================================================
   EXAM PAGE — class/subject chips, thumbnails, promo video, course cross-sell
   ============================================================================ */

/* ---------- class & subject chips ----------
   Replaces two <select> menus. Five classes and ten subjects are quicker to
   scan than a dropdown, and far easier to hit with a thumb. */
.exam-pick-label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cx-text-mute);
  margin: 0 0 9px;
}
.exam-class-chips, .exam-subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.exam-chip {
  padding: 9px 16px;
  border-radius: 99px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--cx-text-dim);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.exam-chip:hover { border-color: var(--cx-line-hot); color: var(--cx-text); }
.exam-chip.active {
  background: linear-gradient(90deg, var(--cx-cyan), var(--cx-blue));
  border-color: transparent;
  color: #04060D;
}
html[data-theme="light"] .exam-chip { background: #fff; color: #46557A; }
html[data-theme="light"] .exam-chip.active {
  background: linear-gradient(90deg, #2563EB, #0E7490);
  color: #fff;
}
.exam-class-chips .exam-chip { min-width: 62px; justify-content: center; text-align: center; }

/* ---------- thumbnail on an exam card ---------- */
.exam-thumb {
  border-radius: 13px;
  overflow: hidden;
  /* 16:9 and full card width — same shape the admin panel now crops to,
     and the same shape as the course cards beside it. */
  aspect-ratio: 16 / 9;
  background: linear-gradient(140deg, #04060E 0%, #14357F 62%, #2F7BFF 120%);
}
.exam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
html[data-theme="light"] .exam-thumb { background: #E8EDF7; }

/* ---------- promo video ---------- */
.exam-promo-btn {
  align-self: flex-start;
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(226, 20, 108, 0.42);
  background: rgba(226, 20, 108, 0.10);
  color: #FF8FBE;
  transition: background .2s ease;
}
.exam-promo-btn:hover { background: rgba(226, 20, 108, 0.20); }
html[data-theme="light"] .exam-promo-btn { background: rgba(226,20,108,.07); color: #B01055; }

.exam-promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 4, 10, 0.86);
  backdrop-filter: blur(6px);
}
.exam-promo-box { position: relative; width: min(880px, 100%); }
.exam-promo-frame {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  background: #000;
}
.exam-promo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.exam-promo-close {
  position: absolute;
  top: -44px; right: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
}
.exam-promo-close:hover { background: rgba(255,255,255,.18); }

/* ---------- paid-course cross-sell ---------- */
.exam-crosssell {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  border-top: 1px solid var(--cx-line);
}
.exam-crosssell-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.exam-crosssell-head h2 { font-size: 1.35rem; margin: 6px 0 6px; letter-spacing: -0.01em; }
.exam-crosssell-head p { color: var(--cx-text-mute); font-size: var(--fs-sm); line-height: 1.7; max-width: 56ch; }
.exam-crosssell .course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .exam-promo-close { top: -40px; }
  .exam-crosssell-head { align-items: flex-start; }
}

/* ============================================================================
   APP DOWNLOAD PAGE
   ============================================================================ */
.dl-wrap { padding-top: var(--sp-7); }
.dl-hero {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--sp-7);
  align-items: center;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid var(--cx-line);
  background: linear-gradient(150deg, rgba(47,123,255,.12), rgba(255,255,255,.02));
  margin-bottom: var(--sp-7);
}
.dl-copy h2 { font-size: 1.6rem; margin: 8px 0 10px; letter-spacing: -0.02em; }
.dl-copy p { color: var(--cx-text-dim); line-height: 1.8; margin-bottom: var(--sp-5); }
.dl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.dl-apk { gap: 9px; }

/* A small phone mock: cheaper than a screenshot and never goes stale. */
.dl-phone {
  aspect-ratio: 9/17;
  border-radius: 26px;
  padding: 10px;
  background: linear-gradient(160deg, #2A3550, #0E1526);
  border: 1px solid var(--cx-line);
  box-shadow: 0 30px 60px -30px #000;
}
.dl-phone-screen {
  height: 100%;
  border-radius: 18px;
  background: #070B16;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 16px;
}
.dl-phone-screen img { width: 62px; border-radius: 16px; }
.dl-phone-screen strong { font-size: .95rem; }
.dl-phone-screen span { font-size: .68rem; color: var(--cx-text-mute); line-height: 1.5; }

.dl-steps, .dl-iphone {
  border: 1px solid var(--cx-line);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: var(--sp-6);
  background: rgba(255,255,255,.02);
}
html[data-theme="light"] .dl-steps, html[data-theme="light"] .dl-iphone,
html[data-theme="light"] .dl-hero { background: #fff; }
.dl-steps h3, .dl-iphone h3 { font-size: 1.1rem; margin-bottom: var(--sp-4); }
.dl-steps ol { margin: 0 0 var(--sp-4) 1.2em; }
.dl-steps li { margin-bottom: 11px; line-height: 1.75; color: var(--cx-text-dim); font-size: .93rem; }
.dl-steps li strong { color: var(--cx-text); }
.dl-steps em { color: var(--cx-cyan); font-style: normal; font-weight: 600; }
html[data-theme="light"] .dl-steps em { color: #1D4ED8; }
.dl-iphone p { color: var(--cx-text-dim); line-height: 1.8; margin: 0; }
.dl-iphone b { color: var(--cx-cyan); }
html[data-theme="light"] .dl-iphone b { color: #1D4ED8; }

.dl-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: var(--sp-6);
}
.dl-feature {
  border: 1px solid var(--cx-line);
  border-radius: 18px;
  padding: 20px;
  background: rgba(255,255,255,.02);
}
html[data-theme="light"] .dl-feature { background: #fff; }
.dl-feature span { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.dl-feature strong { display: block; margin-bottom: 5px; font-size: .95rem; }
.dl-feature p { margin: 0; font-size: .82rem; color: var(--cx-text-mute); line-height: 1.65; }

@media (max-width: 760px) {
  .dl-hero { grid-template-columns: 1fr; padding: 22px; }
  .dl-phone { max-width: 190px; margin: 0 auto; }
  .dl-actions .btn { width: 100%; justify-content: center; }
}

/* An APK link that has not been configured yet: visibly inert, so nobody
   taps a button that cannot do anything. */
.btn.is-disabled {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(0.4);
}


/* ============================================================
   হোমপেজ ছোট করা — "আসছে শীঘ্রই" আলাদা সেকশন ছিল, এখন কোর্স
   সেকশনের নিচে মিশে গেছে। সেকশন কমল, তথ্য একই রইল।
   ============================================================ */
.chip-cloud-lede {
  margin: var(--sp-8, 32px) 0 var(--sp-4, 16px);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cx-text-mute, rgba(255, 255, 255, 0.62));
  text-align: center;
}

/* ============================================================
   লাইট থিমে পেজের ground
   ------------------------------------------------------------
   cortex.css-এ  html { background: #0B1020 }  আছে কিন্তু তার কোনো
   light ওভাররাইড ছিল না — শুধু  html[data-theme="light"] body
   ছিল। <html>-এর ব্যাকগ্রাউন্ড থাকলে সেটাই canvas আঁকে, body-রটা
   শুধু body-র বাক্সটুকু। ফলে লাইট থিমে overscroll (রাবার-ব্যান্ড)
   বা body-র বাক্সের বাইরের অংশে ডার্ক রং উঁকি দিত।
   ============================================================ */
html[data-theme="light"] { background: var(--cx-bg); }

/* ============================================================
   পরীক্ষার তালিকায় লগইনের পট্টি
   ------------------------------------------------------------
   আগে সাইন-আউট অবস্থায় পুরো তালিকাই লুকানো থাকত — কী কী পরীক্ষা
   আছে সেটাই দেখা যেত না। এখন তালিকা খোলা, আর উপরে এই পট্টি বলে
   দেয় দিতে হলে কী লাগবে।
   ============================================================ */
.exam-login-notice {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 16px);
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: var(--sp-6, 24px);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(77,227,255,.10), rgba(99,102,241,.10));
  border: 1px solid rgba(77,227,255,.28);
}
.exam-login-notice-icon { font-size: 1.5rem; line-height: 1 }
.exam-login-notice > div:nth-child(2) { flex: 1 1 260px }
.exam-login-notice strong { display: block; font-size: .98rem; margin-bottom: 2px }
.exam-login-notice p { margin: 0; font-size: .86rem; color: var(--cx-text-mute) }
.exam-login-notice-actions { display: flex; gap: 8px; flex-wrap: wrap }

html[data-theme="light"] .exam-login-notice {
  background: linear-gradient(135deg, rgba(27,79,216,.07), rgba(99,102,241,.07));
  border-color: rgba(27,79,216,.20);
}

/* ============================================================
   ব্যাচের সময়সীমা — মেয়াদের বাইরে ক্লাস
   ============================================================ */
.batch-window-lock {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  margin-bottom: var(--sp-5, 20px);
  background: rgba(251,191,36,.10);
  border: 1px solid rgba(251,191,36,.32);
}
.batch-window-lock strong { display: block; margin-bottom: 3px }
.batch-window-lock p { margin: 0; font-size: .88rem; color: var(--cx-text-mute) }

/* ছাত্র নিজে টিক দিতে পারে না এমন আইটেম */
.ci-checkbox-wrap input[type="checkbox"][data-auto-only] { cursor: not-allowed }
.ci-auto-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .74rem;
  color: var(--cx-text-mute);
  margin-left: 6px;
}

/* ============================================================
   EMBED MODE — অ্যাপের WebView-এ আইনি পাতা
   ------------------------------------------------------------
   অ্যাপের নিজস্ব app bar আছে, তাই সাইটের নেভবার/ফুটার/ভাসমান বোতাম
   লুকিয়ে দেওয়া হয়। লেখাটুকুই থাকে — একই নথি, দুই জায়গায় এক।
   ============================================================ */
html.is-embedded .navbar-wrap,
html.is-embedded .mobile-bottom-nav,
html.is-embedded .site-footer,
html.is-embedded .whatsapp-float,
html.is-embedded .breadcrumb,
html.is-embedded .cx-scroll-progress,
html.is-embedded .cx-spotlight,
html.is-embedded .cx-grain,
html.is-embedded .orange-glow,
html.is-embedded .hero-grid-fade { display: none !important; }

html.is-embedded body { padding-top: 0 !important; }

/* উপরের বিশাল হিরোটা অ্যাপে অপ্রয়োজনীয় — শিরোনামই যথেষ্ট */
html.is-embedded .section:first-of-type { padding-top: 20px !important; }
html.is-embedded .legal-body { padding-top: 0 !important; }

/* `.instructor-card` sets display:flex, which outranks the UA's [hidden]
   rule — so hiding the card from JS silently did nothing. Scoped to this
   one class rather than a global [hidden] override. */
.instructor-card[hidden] { display: none; }

/* ============================================================
   EXAM BRIEF — the rules, shown before the clock starts
   ============================================================ */
.exam-brief {
  max-width: 720px; margin: 0 auto;
  border: 1px solid var(--cx-line); border-radius: 22px;
  padding: 28px 26px;
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .exam-brief { background: #fff; }
.exam-brief-eyebrow {
  margin: 0 0 6px; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--cx-cyan);
}
.exam-brief h2 { margin: 0 0 16px; line-height: 1.4; }
.exam-brief h3 {
  margin: 22px 0 10px; font-size: .95rem;
  color: var(--cx-text);
}
.exam-brief-stats {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--cx-line-soft);
  background: rgba(255,255,255,.02);
  font-size: .85rem; color: var(--cx-text-mute);
}
.exam-brief-stats strong { color: var(--cx-text); font-family: var(--font-data, inherit); }
.exam-brief-stats .is-warn strong { color: var(--cx-amber, #FFC45D); }
.exam-brief-rules { margin: 0; padding-left: 20px; }
.exam-brief-rules li {
  margin-bottom: 10px; line-height: 1.75;
  color: var(--cx-text-body, var(--cx-text-mute));
}
.exam-brief-rules strong { color: var(--cx-text); }
.exam-brief-note {
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--cx-line-hot);
  background: rgba(77,227,255,.07);
  line-height: 1.75;
}
.exam-brief-note strong { display: block; margin-bottom: 6px; color: var(--cx-text); }
.exam-brief-note p { margin: 0 0 6px; }
.exam-brief-note p:last-child { margin-bottom: 0; }
.exam-brief-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 24px;
}
.exam-brief-actions .btn { flex: 1 1 auto; }
.exam-brief + .field-hint, .exam-brief .field-hint { margin-top: 10px; text-align: center; }

/* ---------- a question whose answer is now final ---------- */
/* The radios are disabled in JS; these only make that visible. */
.exam-option.is-locked { opacity: .55; cursor: not-allowed; }
.exam-option.is-locked:hover { border-color: var(--cx-line-soft); }
.exam-option.is-locked-pick { cursor: default; }
.exam-q-locked {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0; font-size: .78rem; color: var(--cx-text-mute);
}
.exam-q-locked::before { content: "🔒"; font-size: .9em; }

/* ============================================================
   THUMBNAILS SHOW THE WHOLE PICTURE
   ------------------------------------------------------------
   The boxes are 1:1 and the admin panel now crops uploads to 1:1, so for a
   current thumbnail `contain` and `cover` are identical. They differ only
   for the older 16:9 pictures that predate the cropper — and there `cover`
   was quietly slicing the sides off. `contain` shows all of it instead.
   ============================================================ */
.exam-thumb img,
.cc-thumb img,
.scc-thumb img,
.enroll-card-visual img { object-fit: contain; }

/* ============================================================
   DOWNLOAD PAGE — why Play Protect warns
   ------------------------------------------------------------
   Given its own card rather than a footnote: people who hit that
   warning stop installing, and a one-line hint below the steps was
   easy to miss. Same shell as .dl-steps so the page still reads as
   one sequence, with an amber edge marking it as the "read this" bit.
   ============================================================ */
.dl-safety {
  border: 1px solid var(--cx-line);
  border-left: 3px solid var(--cx-amber, #FFC45D);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: var(--sp-6);
  background: rgba(255,255,255,.02);
  scroll-margin-top: 96px;
}
html[data-theme="light"] .dl-safety { background: #fff; }
.dl-safety h3 { font-size: 1.1rem; margin-bottom: var(--sp-3); }
.dl-safety-lead {
  margin: 0 0 var(--sp-4);
  line-height: 1.85;
  color: var(--cx-text-dim);
  font-size: .95rem;
}
.dl-safety-lead strong { color: var(--cx-text); }
.dl-safety-list { margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.dl-safety-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 14px;
  line-height: 1.8;
  color: var(--cx-text-dim);
  font-size: .92rem;
}
.dl-safety-list li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
  color: var(--cx-green, #3FD48B);
}
.dl-safety-list li strong { color: var(--cx-text); }
.dl-safety-note {
  margin: 0 0 var(--sp-3);
  padding: 13px 15px;
  border-radius: 13px;
  border: 1px solid var(--cx-line-soft);
  background: rgba(255,255,255,.02);
  line-height: 1.8;
  font-size: .88rem;
  color: var(--cx-text-dim);
}
.dl-safety-note a, .dl-steps a { color: var(--cx-cyan); }
html[data-theme="light"] .dl-safety-note a, html[data-theme="light"] .dl-steps a { color: #1D4ED8; }

/* ============================================================
   NAVBAR ON A PHONE — nothing may fall off the right edge
   ------------------------------------------------------------
   At 375px the bar held: brand + "ভর্তি হোন" + account chip + theme
   toggle + hamburger. That overflowed, and the two controls at the end
   — theme and the menu itself — were the ones pushed off screen, which
   is the worst possible pair to lose: the menu is how you reach every
   other page.

   So below 620px the bar keeps only what cannot live anywhere else:
   brand, account (when signed in), theme, menu. The "ভর্তি হোন" CTA is
   already inside the drawer and the hero has its own big button, so
   dropping it here costs nothing.
   ============================================================ */
@media (max-width: 620px) {
  .navbar { padding: 8px 10px 8px 14px; gap: 8px; }
  .navbar > .brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-actions { gap: 6px; flex-shrink: 0; flex-wrap: nowrap; }

  /* Already in the drawer, and the hero repeats it. */
  .nav-actions > .btn-primary { display: none; }

  /* Signed in: the avatar identifies the account; the name does not fit. */
  .nav-account-name { display: none; }
  .nav-account-trigger { padding: 5px 8px 5px 5px; }

  .theme-toggle, .menu-toggle { width: 38px; height: 38px; flex: 0 0 38px; }
}

/* Only genuinely tiny phones (320-340px) lose the brand subtitle — at
   360px and up there is room for it now that the CTA has moved. */
@media (max-width: 344px) {
  .brand-name small { display: none; }
  .brand img { width: 32px; height: 32px; }
}

/* ============================================================
   HOMEPAGE APP CTA
   ------------------------------------------------------------
   Shares #apkBtn / #apkNote with download.html so js/apk-link.js drives
   both from one setting. On a phone the mock screen drops away — the
   button is what matters there, not the decoration.
   ============================================================ */
.app-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 34px 36px;
  border: 1px solid var(--cx-line);
  border-radius: 26px;
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .app-cta { background: #fff; }
.app-cta-copy h2 { margin: 6px 0 12px; line-height: 1.35; }
.app-cta-copy > p { margin: 0 0 22px; line-height: 1.85; color: var(--cx-text-dim); max-width: 54ch; }
.app-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.app-cta-actions .btn { gap: 9px; }
.app-cta .field-hint { margin: 0; }

.app-cta-phone {
  width: 190px;
  aspect-ratio: 9 / 17;
  border-radius: 28px;
  padding: 10px;
  border: 1px solid var(--cx-line-hot);
  background: linear-gradient(160deg, rgba(77,227,255,.16), rgba(47,111,237,.10));
  flex: none;
}
.app-cta-screen {
  height: 100%;
  border-radius: 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 18px;
  background: linear-gradient(160deg, #04060E, #14357F);
}
.app-cta-screen img { width: 72px; height: 72px; border-radius: 18px; }
.app-cta-screen strong { color: #fff; font-size: 1rem; }
.app-cta-screen span { color: rgba(255,255,255,.72); font-size: .76rem; line-height: 1.6; }

@media (max-width: 860px) {
  .app-cta { grid-template-columns: 1fr; gap: 26px; padding: 26px 20px; }
  .app-cta-phone { display: none; }
  .app-cta-actions .btn { flex: 1 1 200px; justify-content: center; }
}