/* ============================================================
   Bosala interface system
   A web-native Liquid Glass interpretation for bilingual,
   trust-first student guidance. Content stays grounded; glass is
   reserved for navigation, controls, and temporary surfaces.
   ============================================================ */

:root {
  --blue:        #0a66c2;
  --blue-dark:   #004182;
  --blue-light:  #e8f0fe;
  --bg:          #f4f2ee;
  --card:        #ffffff;
  --text:        #1d2226;
  --text-soft:   #4b5760;  /* darkened from #5e6d77 — small muted text on .5-alpha glass over the colored orbs dropped below WCAG 4.5:1 */
  --border:      #e0dfdc;
  --green:       #057642;
  --orange:      #c37d16;
  --red:         #cc1016;
  --shadow-sm:   0 1px 2px rgba(0,0,0,.08);
  --shadow-md:   0 4px 18px rgba(0,0,0,.08);
  --shadow-lg:   0 20px 50px rgba(0,0,0,.12);
  --radius:      14px;
  --radius-sm:   10px;

  /* homepage redesign v2 (2026-07): named aliases for the same blue + a
     teal/cyan SECONDARY accent (results-preview chip, stat icons, scroll
     cue, small dots). Blue stays primary everywhere - the accent never
     recolors the whole site, `--blue`/etc above are untouched. */
  --primary:     #0A66C2;
  --primary-2:   #34A4FF;
  --navy:        #0B1F3A;
  --accent:      #06B6D4;
  --accent-2:    #22D3EE;

  /* ============================================================
     LIQUID GLASS SYSTEM (2026-08)
     One source of truth for every frosted surface. Before this,
     ~20 rules each hardcoded their own alpha/blur/border/shadow and
     drifted apart; several "cards" were flat white. Tune here, not
     in the component.

     READABILITY RULE: blur scales DOWN as text density goes UP.
     Chrome (nav, pills, chips) may be airy and see-through; panels
     that carry body text use --glass-solid, which is opaque enough
     that contrast never depends on what happens to be behind it.
     ============================================================ */

  /* fills — ascending opacity = ascending text safety */
  --glass:        rgba(255,255,255,.52);  /* chrome: nav, pills, chips     */
  --glass-panel:  rgba(255,255,255,.66);  /* cards with headings + short text */
  --glass-solid:  rgba(255,255,255,.82);  /* long-form text, inputs, modals  */

  /* blur — decorative surfaces frost hard, text surfaces barely at all */
  --blur:         18px;
  --blur-soft:    12px;
  --blur-strong:  28px;

  /* thin bright edge + inner top highlight = the "light refraction" read */
  --glass-edge:   rgba(255,255,255,.75);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,.9);
  --glass-hi-soft:inset 0 1px 0 rgba(255,255,255,.65);

  /* soft LAYERED shadows, tinted navy-blue instead of neutral black —
     black shadows over a blue page read as dirt, blue reads as depth */
  --shadow-1: 0 1px 2px rgba(16,42,80,.06),
              0 4px 12px -4px rgba(16,42,80,.10);
  --shadow-2: 0 2px 6px rgba(16,42,80,.06),
              0 10px 28px -10px rgba(16,42,80,.16);
  --shadow-3: 0 4px 10px rgba(16,42,80,.07),
              0 22px 60px -18px rgba(16,42,80,.24);
  --shadow-glow: 0 10px 30px -10px rgba(10,102,194,.45);

  /* radii */
  --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;

  /* spacing scale — tighter + intentional (was ad-hoc 4..90px literals) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 40px; --sp-8: 56px;

  /* motion — one easing family, three speeds */
  --ease-out:    cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --ease:        var(--ease-out);
  --ease-soft:   var(--ease-in-out);
  --dur-1: 140ms;   /* press / tap feedback */
  --dur-2: 220ms;   /* hover, most state changes */
  --dur-3: 420ms;   /* explanatory entrances */

  /* minimum comfortable tap target (WCAG 2.5.5 / iOS HIG) */
  --tap: 44px;
}

/* One reusable glass surface. Components opt in with `.glass-surface`
   or by consuming the tokens directly. */
.glass-surface {
  background: var(--glass-panel);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2), var(--glass-hi);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #eef2f7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  display: flex; flex-direction: column;
  position: relative;
}
/* `clip` (not `hidden`) so the full-bleed hero's 100vw sub-pixel overflow is
   clipped without breaking `position:sticky` on the results page. Stays on
   `html`, never `body` — `overflow-x` on body clips the absolutely-positioned
   language dropdown. */
html { overflow-x: clip; }

/* Background video — replaces the CSS blob effects (much lighter on GPU).
   The old body::before/::after gradient blobs + @keyframes blobFloat were
   removed: they had no `content`, so they never rendered (dead since the
   video took over the background). */
.bg-video {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: -1; pointer-events: none;
}
body.dir-rtl {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}

/* ===== RTL adjustments ===== */
body.dir-rtl .q-opt:hover { transform: translateX(-4px); }
/* the hero is a single centered column - no left/right flip needed here */
body.dir-rtl .hero-inner { margin-left: auto; text-align: right; }
body.dir-rtl .ocr-status.loading::after { margin-left: 0; margin-right: 8px; }
body.dir-rtl .jobs { padding-left: 0; padding-right: 20px; }
body.dir-rtl .bullets { padding-left: 0; padding-right: 18px; }
body.dir-rtl .breakdown ul { padding-left: 0; padding-right: 18px; }
body.dir-rtl .ranked-list ol { padding: 0; }

/* nav — always: brand on the right, links group on the left.
   Use direction:ltr to lock the visual order regardless of body dir,
   and justify-content:space-between for clean spacing. */
.nav {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  direction: ltr;
  padding: 12px 28px;
  gap: 24px;
}
.brand { unicode-bidi: isolate; }    /* prevent Arabic brand from sticking */
.nav-links {
  display: inline-flex; align-items: center; gap: 18px;
}
.lang-wrap { position: relative; }
.brand { font-family: inherit; }
/* nav links share the SAME look (font, size, weight) */
/* nav links — liquid glass pills with icon circle */
.nav-link {
  font-family: inherit; font-size: .92rem; font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,.45);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(255,255,255,.65);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    0 4px 14px -2px rgba(31, 38, 135, .12),
    inset 0 1px 0 rgba(255,255,255,.8);
  transition: color var(--dur-2) ease,
              background-color var(--dur-2) ease,
              border-color var(--dur-2) ease,
              box-shadow var(--dur-2) ease,
              transform var(--dur-1) var(--ease-out);
}
.nav-link:hover {
  background: rgba(255,255,255,.7);
  color: var(--blue);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px -2px rgba(31, 38, 135, .18),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.nav-link.lang-toggle[aria-expanded="true"] {
  background: var(--blue); color: white;
  border-color: rgba(255,255,255,.35);
}
.nav-link.lang-toggle[aria-expanded="true"] .nav-ico {
  background: rgba(255,255,255,.25); color: white;
}

/* icon circle (the round badge on the left of a glass pill) */
.nav-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10,102,194,.12);
  color: var(--blue);
  flex-shrink: 0;
  transition: color var(--dur-2) ease, background-color var(--dur-2) ease;
}
.nav-link:hover .nav-ico { background: rgba(10,102,194,.22); }
.lang-current { font-weight: 600; }

.lang-menu {
  /* anchor to the RIGHT edge of the toggle (which sits on the right side of the
     nav) so the menu opens inward and never spills off-screen on phones */
  position: absolute; top: calc(100% + 10px);
  right: 0; left: auto;
  width: 220px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  background: rgba(255,255,255,.7);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 16px;
  box-shadow:
    0 20px 50px -10px rgba(31, 38, 135, .25),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform-origin: top right;
  overflow: visible;
  z-index: 200;
  animation: langOpenSmooth 200ms var(--ease-out) both;
}
.lang-opt .opt-label {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
}
@keyframes langOpenSmooth {
  from { opacity: 0; transform: scale(.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.lang-opt {
  opacity: 0;
  animation: langItemIn 180ms var(--ease-out) both;
  border-radius: 10px;
}
.lang-opt:nth-child(1) { animation-delay: 25ms; }
.lang-opt:nth-child(2) { animation-delay: 60ms; }
@keyframes langItemIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-menu.is-closing { animation: langClose 140ms var(--ease-out) both; }
@keyframes langClose { to { opacity: 0; transform: scale(.97) translateY(-4px); } }
.lang-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 10px;
  color: var(--text);
  font-weight: 600; font-size: .95rem;
  border-bottom: 1px solid rgba(255,255,255,.4);
  transition: background .2s ease, transform .15s ease;
  white-space: nowrap;
  overflow: visible;
}
.lang-opt:hover { transform: translateX(2px); }
.lang-opt:last-child { border-bottom: none; }
.lang-opt:hover { background: rgba(10,102,194,.08); color: var(--blue); text-decoration: none; }
.lang-opt.active { background: rgba(10,102,194,.12); color: var(--blue); }
.lang-opt .opt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(10,102,194,.12);
  color: var(--blue);
  font-weight: 800; font-size: .8rem;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.lang-opt.active .opt-ico { background: var(--blue); color: white; }
.lang-opt .opt-label { flex: 1; }
.opt-check { color: var(--blue); font-weight: 800; }

/* nav-links spacing */
.nav-links a { color: var(--text-soft); font-weight: 500; }

@media (max-width: 640px) {
  .nav { padding: 10px 14px; gap: 10px; }
  .lang-toggle { padding: 5px 10px; height: 30px; font-size: .82rem; }
  .lang-menu { min-width: 140px; font-size: .9rem; }
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; }
h2 { font-size: 1.8rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
small { color: var(--text-soft); }

/* ===== NAV — liquid glass ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.55);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 8px 32px -8px rgba(31, 38, 135, .12);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px;
}
.brand {
  font-weight: 800; font-size: 1.3rem; color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.brand:hover { text-decoration: none; }

/* ===== compass tile nav mark — inline SVG, animatable =====
   Redesign v2: replaced the old needle-in-ring mark with a bigger (40px)
   rounded-tile compass - a colored tile background makes it read instantly
   as a logo/app-icon rather than a thin line icon. */
.brand-mark { display: block; flex: 0 0 auto; }
.brand-mark .bm-tile, .brand-mark .bm-needle, .brand-mark .bm-pivot {
  transform-box: view-box; transform-origin: 32px 32px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-tagline {
  font-size: .62rem; font-weight: 600; color: var(--text-soft);
  letter-spacing: .01em; margin-top: 1px;
}
@media (max-width: 480px) { .brand-tagline { display: none; } }

/* default = static final state; JS adds .intro on homepage entry to play ONE
   simple fade + scale entrance (transform/opacity only, GPU-cheap). JS removes
   .intro on animationend so nothing lingers and the hover scale works after. */
.brand-mark.intro {
  transform-origin: center center;
  animation: bmIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bmIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* hover micro-interaction: a gentle scale — NO tilt, needle stays straight */
.brand:hover .brand-mark { transform: scale(1.06); transition: transform .3s cubic-bezier(.16,1,.3,1); }

.nav-links a { color: var(--text-soft); font-weight: 500; }

/* ===== PAGE ===== */
.page { flex: 1; padding: 40px 24px 80px; max-width: 1200px; margin: 0 auto; width: 100%; }
.footer {
  text-align: center; padding: var(--sp-5) var(--sp-4);
  color: var(--text-soft); font-size: .9rem;
  border-top: 1px solid rgba(255,255,255,.6);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
}

/* ===== HERO ===== */
.hero { position: relative; padding: 80px 0; min-height: 80vh; overflow: clip; }
.hero-inner { position: relative; max-width: 720px; z-index: 2; }
.hero-bg {
  position: absolute; inset: -200px; z-index: 0; pointer-events: none;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
          mask-image: radial-gradient(ellipse at center, #000 50%, transparent 85%);
}
/* The three `.orb` blobs (620/520/460px circles carrying a 130px blur filter,
   drifting on a `float` keyframe) were REMOVED in the 2026-08 glass pass.
   They were the single most expensive thing on the page - three full-screen
   blur layers compositing every frame behind an already-blurred glass stack -
   and they read as random decorative orbs rather than a designed backdrop.
   The soft blue field is now carried entirely by the flat radial gradients on
   `.hero-type` / `body:has(.hero-type)` plus the `.aurora` gradient mesh
   below, none of which use a blur filter. Do NOT reintroduce them (same
   reasoning that retired the CSS blobs in favour of bg.webm). */

/* ===== hero grid / network backdrop =====
   Recovered from commit fdc54c0^ (pre big-type-hero redesign), where this
   lived as `.ai-grid` — a sibling SVG behind the hero copy: faint drawn
   network lines + pulsing node dots. Renamed to `.hero-grid` and nested as
   the FIRST child of `.hero-bg` so it inherits the radial edge-fade mask
   and sits at z-index:0 under the spotlight (z1) / headline (z2) — no
   `isolation` added anywhere, so those z0 children still render (see
   CLAUDE.md pitfall). CSS-drawn SVG strokes/dots only, no filter:blur. */
.hero-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  /* Keep the network visibly alive: it is the welcome hero's signature motion,
     not a static texture. The radial mask still keeps it away from the copy. */
  opacity: .72;
}
.hg-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: hgPulse 3.6s var(--ease-in-out) infinite;
}
.hg-dot.d1 { animation-delay: 0s; }
.hg-dot.d2 { animation-delay: .4s; }
.hg-dot.d3 { animation-delay: .8s; }
.hg-dot.d4 { animation-delay: 1.2s; }
.hg-dot.d5 { animation-delay: 1.6s; }
.hg-dot.d6 { animation-delay: 2s; }
@keyframes hgPulse {
  0%, 100% { opacity: .3; transform: scale(.82); }
  50%      { opacity: 1; transform: scale(1.28); }
}
.hero-grid g[stroke] path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: hgDraw 5.2s var(--ease-in-out) infinite alternate;
}
.hero-grid g[stroke] path:nth-child(2) { animation-delay: .8s; }
.hero-grid g[stroke] path:nth-child(3) { animation-delay: 1.6s; }
.hero-grid g[stroke] path:nth-child(4) { animation-delay: 2.4s; }
@keyframes hgDraw {
  from { stroke-dashoffset: 1200; opacity: .08; }
  48%  { opacity: .82; }
  to   { stroke-dashoffset: 0; opacity: .42; }
}

.badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--blue-light); color: var(--blue);
  font-size: .85rem; font-weight: 600; margin-bottom: 18px;
  border: 1px solid rgba(10,102,194,.18);
}
.title { color: var(--text); margin-bottom: 18px; }
.grad {
  font-size: 1.1em;
  font-weight: 900;
  background: linear-gradient(95deg,
    #0a66c2 0%, #34a4ff 40%, #5fc7ff 70%, #6db5ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto;
  animation: gradShift 9s ease-in-out infinite alternate;
  letter-spacing: -.015em;
}
@keyframes gradShift {
  from { background-position: 0%   center; }
  to   { background-position: 100% center; }
}
.subtitle { font-size: 1.15rem; color: var(--text-soft); max-width: 580px; }

.hero-cta { display: flex; gap: 14px; margin: 32px 0; flex-wrap: wrap; }
/* RTL: "forward" points LEFT — mirror the arrow icon so it matches reading direction */
body.dir-rtl .hero-cta .btn svg { transform: scaleX(-1); }
.hero-stats { display: flex; gap: 40px; margin-top: 18px; }

/* trust bar under stats */
.trust-bar {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 22px; padding: 10px 18px;
  background: rgba(255,255,255,.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  box-shadow:
    0 8px 24px -6px rgba(31,38,135,.15),
    inset 0 1px 0 rgba(255,255,255,.9);
  font-size: .85rem; font-weight: 600; color: var(--text);
}
.tb-item { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }
.tb-item svg { color: var(--blue); }
.tb-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--border);
}
@media (max-width: 640px) {
  .trust-bar { gap: 10px; padding: 8px 14px; font-size: .78rem; flex-wrap: wrap; justify-content: center; }
  .tb-dot { display: none; }
}

.stat b { font-size: 2rem; color: var(--blue); display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat span { color: var(--text-soft); font-size: .9rem; }

/* ============================================================
   HERO REDESIGN (2026-07) - Spatial glass + blue Aurora backdrop for
   the big-type hero (see HERO TYPE further down). Motion = transform/
   opacity only, no new blur-filter layers, no scroll listeners (IO
   + optional scroll-driven view() timelines further down). RTL-mirrored.
   ============================================================ */

/* Aurora — transform-only drift, no blur. It supports the network motion with
   a slow ambient shift while the drawn paths provide the visible movement. */
.aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  border-radius: 50%;
  opacity: .46;
}
.aurora-a {
  background:
    radial-gradient(45% 45% at 30% 30%, rgba(52,164,255,.35), transparent 70%),
    radial-gradient(40% 40% at 75% 60%, rgba(10,102,194,.30), transparent 70%),
    conic-gradient(from 90deg at 50% 50%, rgba(93,196,255,.18), rgba(10,102,194,.08), rgba(93,196,255,.18));
  animation: auroraDrift 30s linear infinite;
}
.aurora-b {
  background:
    radial-gradient(50% 50% at 65% 25%, rgba(109,181,255,.30), transparent 70%),
    radial-gradient(35% 35% at 20% 75%, rgba(52,164,255,.25), transparent 70%);
  animation: auroraDrift 40s linear infinite reverse;
  opacity: .58;
}
@keyframes auroraDrift {
  0%   { transform: rotate(0deg)   translate3d(0, 0, 0)   scale(1); }
  50%  { transform: rotate(180deg) translate3d(2%, -2%, 0) scale(1.06); }
  100% { transform: rotate(360deg) translate3d(0, 0, 0)   scale(1); }
}

/* spatial glass depth - tinted (not black) shadow + inner highlight ring */
.glass-spatial {
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 18px 50px -12px rgba(31,64,135,.28);
  transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease;
}
.glass-spatial:hover, .glass-spatial:focus-visible { transform: scale(1.02); }
/* higher-specificity override so the CTA keeps its own blue-glow shadow
   layered with the spatial highlight, instead of the two rules fighting */
.hero-cta .btn-primary.glass-spatial {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 18px 46px -12px rgba(10,102,194,.45);
}
.hero-cta .btn-primary.glass-spatial:hover,
.hero-cta .btn-primary.glass-spatial:focus-visible {
  transform: translateY(-1px) scale(1.02);
}

/* CTA sweep - one diagonal shine on load, replays on hover; mirrored in RTL */
.hero-cta .btn-primary { position: relative; overflow: hidden; }
.hero-cta .btn-primary::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(72px circle at var(--cta-x, 50%) var(--cta-y, 50%), rgba(255,255,255,.34), transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}
.hero-cta .btn-primary:focus-visible::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .hero-cta .btn-primary:hover::before { opacity: 1; }
  .hero-cta .btn svg { transition: transform 160ms var(--ease-out); }
  .hero-cta .btn-primary:hover svg { transform: translateX(2px); }
  body.dir-rtl .hero-cta .btn-primary:hover svg { transform: translateX(-2px) scaleX(-1); }
}
.hero-cta .btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: ctaSweep 1.1s cubic-bezier(.4,0,.2,1) 1.3s 1 both;
}
.hero-cta .btn-primary:hover::after {
  animation: ctaSweep .9s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes ctaSweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
body.dir-rtl .hero-cta .btn-primary::after { animation-name: ctaSweepRtl; }
/* the :hover rule above uses the `animation` SHORTHAND, which resets
   animation-name back to ctaSweep and would silently un-mirror the hover
   sweep in RTL - override animation-name again here, after it, so RTL hover
   keeps using the reversed keyframe too */
body.dir-rtl .hero-cta .btn-primary:hover::after { animation-name: ctaSweepRtl; }
@keyframes ctaSweepRtl {
  from { transform: translateX(120%); }
  to   { transform: translateX(-120%); }
}

/* cursor spotlight - pointer-driven, opacity/position vars only, no blur */
.hero-spotlight {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(180px circle at var(--sx,50%) var(--sy,50%), rgba(52,164,255,.18), transparent 65%);
  opacity: 0;
  transition: opacity .4s ease;
}

/* count-up finish pop */
.count-done { animation: countPop .3s ease; }
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* scroll-driven reveal for below-fold sections, where supported;
   the existing IntersectionObserver + .fade-up stay the fallback */
@supports (animation-timeline: view()) {
  .hero-stats, .trust-bar, .testimonials {
    animation: revealRise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@keyframes revealRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-pill);
  min-height: var(--tap);            /* 44px tap target everywhere, not just mobile */
  font-weight: 600; font-size: 1rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-1) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft),
              background var(--dur-2) var(--ease-soft),
              filter var(--dur-2) var(--ease-soft);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.btn-lg { padding: 14px 28px; font-size: 1.05rem; min-height: 52px; }

/* Primary: a solid blue "liquid pill" — gradient body, bright inner top
   highlight, soft blue glow. Not translucent: white text must never sit on
   a see-through fill. */
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, #2f9dfb 55%, #34a4ff 100%);
  color: white;
  box-shadow: var(--shadow-glow),
              inset 0 1px 0 rgba(255,255,255,.42),
              inset 0 -1px 0 rgba(0,40,90,.18);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 60%, #2f9dfb 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -10px rgba(10,102,194,.55),
              inset 0 1px 0 rgba(255,255,255,.5);
  text-decoration: none;
}
/* Ghost: the true glass pill — frosted fill, thin bright border */
.btn-ghost {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-soft));
  color: var(--blue-dark);
  border: 1px solid rgba(10,102,194,.28);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.78);
  border-color: rgba(10,102,194,.45);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), var(--glass-hi);
  text-decoration: none;
}
/* Press: every button dips toward the surface. Tactile, and it gives touch
   users the feedback that hover states give mouse users. */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0) scale(.975);
  filter: saturate(1.05) brightness(.98);
  transition-duration: var(--dur-1);
}
.link-btn { background: none; border: none; color: var(--blue); font: inherit; cursor: pointer; }

/* ===== FORMS / CARDS — Liquid Glass ===== */
.card {
  background: var(--glass-panel);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2), var(--glass-hi);
  position: relative;
  overflow: hidden;
}
/* Refraction sheen: a single diagonal highlight across the top-left corner,
   fading out well before the text area. Kept under 22% so it reads as a
   glass edge catching light, not as a grey wash over the copy. */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.06) 34%,
    rgba(255,255,255,0)   58%);
}
/* `.glass` is the text-safe variant: MORE opaque, LESS blur. Applied to
   panels that carry paragraphs (AI report, roadmap, why-detail), where
   heavy frost behind body text is the classic glassmorphism failure. */
.glass {
  background: var(--glass-solid);
  backdrop-filter: saturate(150%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-soft));
}

.form-section { display: flex; justify-content: center; padding: 40px 0; }
.form-section .card { width: 100%; max-width: 520px; }
.form-section.wide .card { max-width: 880px; }
/* register's h2->h1 promotion is semantics-only — pin the old h2 size so the
   card layout is visually unchanged (h1's clamp() would nearly double it) */
.form-section .card h1 { font-size: 1.8rem; font-weight: 700; }

.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: .9rem; color: var(--text-soft); font-weight: 500; }

/* Frosted-glass inputs. Fill is --glass-solid, not --glass: typed text is the
   highest-contrast-critical content on the page, so the surface under it stays
   near-opaque and the blur stays low. */
input[type="text"], input[type="number"], select, textarea {
  padding: 12px 14px;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.8);
  background: var(--glass-solid);
  backdrop-filter: saturate(150%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-soft));
  color: var(--text);
  font: inherit;
  box-shadow: var(--shadow-1),
              inset 0 1px 0 rgba(255,255,255,.85),
              inset 0 0 0 1px rgba(10,102,194,.06);
  transition: border-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft),
              background var(--dur-2) var(--ease-soft);
}
input::placeholder, textarea::placeholder { color: #7a8792; }
input[type="text"]:hover, input[type="number"]:hover, select:hover, textarea:hover {
  border-color: rgba(10,102,194,.3);
}
/* background-COLOR, not the `background` shorthand — the shorthand would reset
   background-image and erase the custom select chevron on focus. */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(10,102,194,.16),
              var(--shadow-2);
}
input.filled { background-color: #eefaf3; border-color: rgba(5,118,66,.45); }

/* Custom select chevron. `appearance:none` kills the native arrow, so we draw
   one as a background SVG and pad the correct side — logical properties keep
   it on the left in Arabic without a separate RTL rule. */
select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230a66c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
body.dir-rtl select { background-position: left 15px center; }
.muted { color: var(--text-soft); }

/* reassurance line under the Continue button */
.reg-time-hint {
  margin: -4px 0 0;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* inline branch picker (in register form) */
[hidden] { display: none !important; }
.branch-wrap {
  display: flex; flex-direction: column; gap: 8px;
  animation: fadeUp .35s cubic-bezier(.4,0,.2,1) both;
  border: 0; margin: 0; padding: 0; min-inline-size: 0;
}
.field-label { font-size: .9rem; color: var(--text-soft); font-weight: 500; }

/* branch picker */
.branch-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.span-2 { grid-column: 1 / -1; }
.branch-card {
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px; cursor: pointer;
  transition: background-color var(--dur-2) ease,
              border-color var(--dur-2) ease,
              box-shadow var(--dur-2) ease,
              transform var(--dur-1) var(--ease-out);
  display: flex; align-items: center; gap: 12px;
}
.branch-card input { accent-color: var(--blue); }
.branch-card:has(input:checked) {
  border-color: var(--blue); background: var(--blue-light);
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.branch-card b { display: block; }
.branch-card small { color: var(--text-soft); }

/* grades grid */
.grid-grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }

/* OCR */
.ocr-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px; border: 2px dashed var(--border); border-radius: var(--radius-sm);
  margin: 18px 0 24px;
  background: linear-gradient(180deg, white, #fafafa);
}
.ocr-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--blue); color: white; cursor: pointer; font-weight: 600;
}
.ocr-label:hover { background: var(--blue-dark); }
.ocr-status { font-size: .9rem; color: var(--text-soft); }
.ocr-status.ok   { color: var(--green); font-weight: 600; }
.ocr-status.warn { color: var(--orange); }
.ocr-status.err  { color: var(--red); }
.ocr-status.loading::after { content: ""; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--blue); border-top-color: transparent; border-radius: 50%; margin-left: 8px; animation: spin 1s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== QUIZ ===== */
.quiz-section { max-width: 760px; margin: 0 auto; }
.quiz-progress {
  height: 6px; background: var(--border); border-radius: 999px;
  overflow: hidden; margin-bottom: 8px;
}
.quiz-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blue), #34a4ff);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.quiz-meta { display: flex; justify-content: space-between; align-items: center; color: var(--text-soft); font-size: .9rem; margin-bottom: 24px; }

.q-card {
  background: rgba(255, 255, 255, .6);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: 20px; padding: 36px;
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow:
    0 12px 40px -8px rgba(31, 38, 135, .15),
    inset 0 1px 0 0 rgba(255, 255, 255, .8);
  animation: slideIn .4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.q-text { font-size: 1.4rem; font-weight: 600; margin-bottom: 14px; }

/* "why we ask" hint — makes the system feel like it understands the student */
.q-why {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 22px;
  padding: 10px 14px;
  background: rgba(10,102,194,.07);
  border-radius: 12px;
  border-inline-start: 3px solid var(--blue);
  color: var(--text-soft);
  font-size: .9rem; line-height: 1.45;
}
.q-why-ico { flex-shrink: 0; }

.q-options { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.q-opt {
  position: relative;   /* anchors the visually-hidden (focusable) radio */
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px;
  min-height: var(--tap);
  background: var(--glass-panel);
  backdrop-filter: saturate(160%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur-soft));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
  counter-increment: qopt;
  -webkit-tap-highlight-color: transparent;
}
.q-opt::before {
  content: counter(qopt, upper-alpha);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,102,194,.10);
  color: var(--blue);
  font-weight: 800; font-size: .85rem;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: background var(--dur-2) var(--ease-soft),
              color var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease-soft);
}
/* visually hidden but still focusable — display:none removed the radios from
   the tab order and a11y tree, making the whole quiz mouse-only */
.q-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.q-opt:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.q-options { counter-reset: qopt; }
.q-opt input { accent-color: var(--blue); }

/* hover: lifts toward the pointer, letter badge deepens */
.q-opt:hover {
  border-color: rgba(10,102,194,.35);
  background: rgba(255,255,255,.8);
  transform: translateX(4px);
  box-shadow: var(--shadow-2), var(--glass-hi);
}
.q-opt:hover::before { background: rgba(10,102,194,.2); transform: scale(1.06); }

/* press: settles back down — tactile confirmation on touch, where there is
   no hover state to rely on */
.q-opt:active { transform: translateX(4px) scale(.99); }

/* SELECTED — the "glowing glass" state. A blue-tinted translucent fill, a
   saturated border, and a soft outer glow ring, so the choice reads as lit
   from within rather than merely filled. */
.q-opt:has(input:checked) {
  border-color: var(--blue);
  background:
    linear-gradient(135deg, rgba(52,164,255,.20), rgba(10,102,194,.12)),
    rgba(255,255,255,.82);
  font-weight: 600;
  transform: translateX(4px);
  box-shadow:
    0 0 0 3px rgba(10,102,194,.14),
    0 12px 30px -10px rgba(10,102,194,.42),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.q-opt:has(input:checked)::before {
  background: linear-gradient(135deg, var(--blue), #34a4ff);
  color: white;
  box-shadow: 0 4px 12px -2px rgba(10,102,194,.6),
              inset 0 1px 0 rgba(255,255,255,.4);
}
/* RTL: the nudge follows reading direction (the base rule sets +4px; the
   existing `body.dir-rtl .q-opt:hover` handles hover, these cover the rest) */
body.dir-rtl .q-opt:has(input:checked) { transform: translateX(-4px); }
body.dir-rtl .q-opt:active { transform: translateX(-4px) scale(.99); }

textarea { width: 100%; resize: vertical; font-family: inherit; }

.q-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.shake { animation: shake .35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* ===== RESULTS ===== */
.results-section { max-width: 1100px; margin: 0 auto; }
.results-head { text-align: center; margin-bottom: 32px; }
.section-title { margin: 36px 0 16px; font-size: 1.2rem; color: var(--text-soft); }

/* confidence badge */
/* slider — fully touch-friendly with dynamic fill + floating value bubble */
.slider-wrap {
  position: relative;
  --pad-top: 38px; /* room above for the bubble */
  --thumb: 36px;   /* thumb box incl. border; drives input height + rail centring */
  --rail-h: 10px;
  padding-top: var(--pad-top);
}
/* custom track — plain divs, reliable in every browser.
   Centred vertically on the input (which is --thumb tall). */
.slider-rail {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--pad-top) + var(--thumb) / 2);
  transform: translateY(-50%);
  height: var(--rail-h);
  border-radius: 999px;
  background: var(--blue-light);
  pointer-events: none;
  overflow: hidden;
}
.slider-fill {
  height: 100%;
  width: 50%; /* JS overwrites */
  background: var(--blue);
}
body.dir-rtl .slider-fill { margin-left: auto; }
/* input is as tall as the thumb, so the thumb sits dead-centre on the rail */
.slider {
  -webkit-appearance: none; appearance: none;
  display: block;
  width: 100%; height: var(--thumb);
  background: transparent;
  outline: none; margin: 0;
  cursor: pointer; touch-action: manipulation;
  position: relative; /* renders above .slider-rail */
}
.slider::-webkit-slider-runnable-track {
  height: var(--thumb); background: transparent; border: none;
}
.slider::-moz-range-track {
  height: var(--thumb); background: transparent; border: none;
}
/* keep the range input transparent — the generic input:focus styling
   (white bg + blue ring) must NOT apply, or a big box appears on focus */
.slider:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* show the focus ring on the thumb instead, for keyboard users */
.slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(10,102,194,.2), 0 4px 14px rgba(10,102,194,.45);
}
.slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(10,102,194,.2), 0 4px 14px rgba(10,102,194,.45);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: white; border: 3px solid var(--blue);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,102,194,.45);
  transition: transform .18s var(--ease-out),
              box-shadow .18s ease;
}
.slider::-webkit-slider-thumb:hover,
.slider:active::-webkit-slider-thumb { transform: scale(1.25); }
.slider:active::-webkit-slider-thumb { box-shadow: 0 6px 20px rgba(10,102,194,.6); }
.slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: white; border: 3px solid var(--blue); cursor: pointer;
  box-shadow: 0 4px 14px rgba(10,102,194,.45);
  transition: transform .18s var(--ease-out),
              box-shadow .18s ease;
}
.slider:active::-moz-range-thumb {
  transform: scale(1.25);
  box-shadow: 0 6px 20px rgba(10,102,194,.6);
}
/* RTL gradient direction handled in JS */

/* floating value bubble — pops above the thumb.
   `left` (px) is set by JS to the thumb centre; works for LTR + RTL alike. */
.slider-bubble {
  position: absolute;
  top: 4px;
  left: 50%; /* JS overwrites with thumb-centre px */
  transform: translateX(-50%) scale(.6);
  transform-origin: bottom center;
  background: var(--blue); color: white;
  font-weight: 700; font-size: .92rem;
  padding: 4px 12px; border-radius: 999px;
  pointer-events: none; user-select: none;
  white-space: nowrap; opacity: 0;
  box-shadow: 0 6px 18px rgba(10,102,194,.4);
  transition: opacity .18s ease,
              transform .24s var(--ease-out),
              left .07s linear;
}
.slider-bubble::after {
  content: "";
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--blue);
  border-radius: 1px;
}
.slider-wrap:hover .slider-bubble,
.slider-wrap.active .slider-bubble,
.slider:focus-visible ~ .slider-bubble {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.slider-track {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-soft); font-size: .85rem;
}
.slider-track output {
  background: var(--blue); color: white; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; font-size: .9rem;
}

/* mobile: bigger touch targets + always-visible bubble */
@media (max-width: 720px) {
  /* bigger thumb (44px box) + thicker rail; rail re-centres automatically */
  .slider-wrap { --pad-top: 42px; --thumb: 44px; --rail-h: 14px; }
  .slider::-webkit-slider-thumb {
    width: 36px; height: 36px; border-width: 4px;
    box-shadow: 0 4px 16px rgba(10,102,194,.5);
  }
  .slider::-moz-range-thumb {
    width: 36px; height: 36px; border-width: 4px;
    box-shadow: 0 4px 16px rgba(10,102,194,.5);
  }
  .slider:active::-webkit-slider-thumb { transform: scale(1.18); }
  .slider:active::-moz-range-thumb     { transform: scale(1.18); }
  .slider-wrap .slider-bubble {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    font-size: 1rem; padding: 5px 14px;
  }
  .slider-wrap.active .slider-bubble {
    transform: translateX(-50%) scale(1.06);
  }
}

/* pill radio group */
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  padding: 8px 16px; border: 1.5px solid var(--border); border-radius: 999px;
  cursor: pointer; font-weight: 500;
  transition: color var(--dur-1) ease, background-color var(--dur-1) ease,
              border-color var(--dur-1) ease, transform var(--dur-1) var(--ease-out);
}
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.pill { position: relative; }
.pill:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.pill:has(input:checked) { background: var(--blue); color: white; border-color: var(--blue); }

/* star picker */
.star-pick { display: flex; gap: 4px; }
.star-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 1.8rem; color: var(--border); transition: color .15s ease, transform .1s ease;
}
.star-btn:hover { transform: scale(1.15); }
.star-btn.on { color: #f0b400; }

.ok-msg {
  background: #e3f5ec; color: var(--green); padding: 12px 16px;
  border-radius: var(--radius-sm); margin-top: 12px; font-weight: 600;
}

/* loading shimmer (for async AI report) */
.loading-shimmer { padding: 8px 0; }
.sh-line {
  height: 14px; margin: 10px 0; border-radius: 6px;
  background: linear-gradient(90deg, #e8eaed 0%, #f4f6f8 50%, #e8eaed 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.sh-line.w80 { width: 80%; }
.sh-line.w70 { width: 70%; }
.sh-line.w60 { width: 60%; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.report-status { color: var(--text-soft); font-weight: 400; font-size: .82rem; margin-left: 6px; }

/* AI report — sparkle + thinking animation */
.rep-title { display: inline-flex; align-items: center; gap: 8px; }
.sparkle {
  display: inline-block; font-size: 1.1em;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(10,102,194,.3));
  transition: transform .3s ease;
}
.sparkle.thinking {
  animation: sparkleBreathe 1.4s ease-in-out infinite;
}
@keyframes sparkleBreathe {
  0%, 100% { transform: scale(1)    rotate(0);
             filter: drop-shadow(0 0 6px rgba(10,102,194,.3)); }
  50%      { transform: scale(1.25) rotate(15deg);
             filter: drop-shadow(0 0 14px rgba(52,164,255,.7)); }
}

/* shimmer→content swap fade */
#md-report.fade-out { opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; }

/* gradient shine across the report summary while loading */
.report-details summary:has(.sparkle.thinking) {
  background: linear-gradient(110deg,
    var(--blue-light) 0%, white 30%, var(--blue-light) 60%, white 100%);
  background-size: 300% 100%;
  animation: shineSweep 3s linear infinite;
}
@keyframes shineSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* social proof + testimonials */
.social-proof {
  display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap;
  padding: 16px 22px; background: rgba(255,255,255,.7);
  border-radius: 16px; border: 1px solid var(--border);
  width: max-content; max-width: 100%;
}
.sp-stat b { display: block; font-size: 1.6rem; color: var(--green); font-weight: 800; }
.sp-stat span { color: var(--text-soft); font-size: .85rem; }

.testimonials {
  max-width: 1200px; margin: 60px auto; padding: 0 24px;
}
.testimonials h2 { text-align: center; margin-bottom: 24px; }
.testi-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}
/* Testimonials: glass, but text-safe. These carry a real student's paragraph,
   so the fill is --glass-solid (82%) with low blur — glassy enough to belong
   to the system, opaque enough that the quote never fights the backdrop. */
.testi-card {
  background: var(--glass-solid);
  backdrop-filter: saturate(150%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-soft));
  padding: 22px; border-radius: var(--r-md);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
  transition: transform var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease-soft),
              background var(--dur-2) var(--ease-soft);
  display: flex; flex-direction: column;
}
.testi-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-2), var(--glass-hi);
}
.stars-line { color: #f0b400; font-size: 1.1rem; margin-bottom: 10px; }
.testi-text {
  font-style: italic; color: var(--text); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; flex: 1;
  quotes: "«" "»" "‹" "›";
}
.testi-text q::before { content: open-quote; }
.testi-text q::after { content: close-quote; }
.testi-meta { color: var(--text-soft); font-size: .85rem; margin: 0; }

/* FEEDBACK CARD — prominent, gradient, pulse */
.feedback-hero {
  margin: 40px 0;
  background: linear-gradient(135deg, #fffbe6 0%, #fff5d6 100%);
  border: 2px solid #f0b400;
  box-shadow: 0 10px 30px rgba(240,180,0,.18);
  overflow: hidden;
  transition: max-height .6s ease, opacity .4s ease,
              margin .6s ease, padding .6s ease, border-width .4s ease;
  max-height: 2000px;
}
.feedback-hero.collapsing { max-height: 120px; opacity: .9; }
.feedback-hero.collapsed {
  max-height: 0; opacity: 0; margin: 0; padding: 0;
  border-width: 0; overflow: hidden;
}
.fb-head {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.fb-head h2 { margin: 0; font-size: 1.4rem; }
.fb-head p   { margin: 4px 0 0; font-size: .92rem; }
.fb-pulse {
  font-size: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: white;
  box-shadow: 0 4px 14px rgba(240,180,0,.4);
  animation: pulseFB 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulseFB {
  0%,100% { transform: scale(1); box-shadow: 0 4px 14px rgba(240,180,0,.4); }
  50%     { transform: scale(1.08); box-shadow: 0 6px 20px rgba(240,180,0,.6); }
}

/* success state */
.fb-success {
  text-align: center; padding: 30px 20px;
  opacity: 0; transform: scale(.96);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.fb-success.show { opacity: 1; transform: scale(1); }
.fb-success h3 { margin: 0; font-size: 1.3rem; color: var(--green); }
.fb-check {
  width: 70px; height: 70px; margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--green); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 800;
  box-shadow: 0 8px 22px rgba(5,118,66,.4);
  animation: popIn 250ms var(--ease-out);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* disclaimer */
.disclaimer {
  background: #fff8e1; border: 1px solid #f5d97f; color: #6b5a14;
  padding: 12px 18px; border-radius: 12px; margin: 0 0 24px;
  font-size: .92rem; text-align: center;
}

/* raw-vs-display row */
.raw-detail { margin: 10px 0; font-size: .85rem; }
.raw-detail summary { color: var(--blue); cursor: pointer; font-weight: 600; }
.raw-row { display: flex; justify-content: space-between; margin: 6px 0; color: var(--text-soft); }
.raw-row b { color: var(--text); }

.confidence-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--glass-solid);
  backdrop-filter: saturate(160%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur-soft));
  padding: 14px 20px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2), var(--glass-hi);
  margin-top: 18px;
}
.conf-ring {
  --p: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--blue-light) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.conf-ring::before {
  content: ""; position: absolute; inset: 5px; background: white; border-radius: 50%;
}
.conf-ring span { position: relative; font-weight: 800; color: var(--blue); font-size: .9rem; }
.conf-text { text-align: left; }
body.dir-rtl .conf-text { text-align: right; }
.conf-text b { display: block; }
.conf-text small { display: block; color: var(--text-soft); font-size: .8rem; }

/* HERO MAJOR CARD */
.hero-major {
  display: grid; grid-template-columns: 1fr auto; gap: 30px;
  background: linear-gradient(135deg, #0a66c2 0%, #34a4ff 100%);
  color: white; border-radius: 20px; padding: 36px;
  box-shadow: 0 20px 50px rgba(10,102,194,.3);
  margin-bottom: 40px;
  position: relative; overflow: hidden;
}
.hero-major::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.15), transparent 50%);
}
.hero-major-left { position: relative; z-index: 1; }
.best-tag {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.22); font-weight: 600; font-size: .85rem;
  margin-bottom: 14px;
}
.hero-major-name {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800;
  margin: 0 0 16px; color: white; line-height: 1.1;
}
.hero-chips { margin-bottom: 16px; }
.hero-chips .chip { background: rgba(255,255,255,.2); color: white; border: none; }
.hero-chips .chip.chip-strong { background: rgba(105,240,178,.35); }
.hero-jobs { margin-bottom: 14px; }
.hero-jobs b { display: block; font-size: .9rem; opacity: .8; margin-bottom: 4px; }
.hero-jobs p { margin: 0; font-weight: 500; }
.hero-major .jobs { color: rgba(255,255,255,.92); padding-left: 22px; }
body.dir-rtl .hero-major .jobs { padding-left: 0; padding-right: 22px; }
.hero-major-right { position: relative; z-index: 1; display: flex; align-items: center; }

.big-ring { position: relative; width: 180px; height: 180px; }
.big-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.big-ring .ring-bg, .big-ring .ring-fg { fill: none; stroke-width: 2.5; }
.big-ring .ring-bg { stroke: rgba(255,255,255,.25); }
.big-ring .ring-fg { stroke: white; stroke-linecap: round;
                     animation: drawRing 1.4s cubic-bezier(.4,0,.2,1) forwards; }
.big-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.big-ring-label b { font-size: 2.6rem; font-weight: 800; color: white; line-height: 1; }
.big-ring-label small { color: rgba(255,255,255,.8); font-size: .9rem; }

@media (max-width: 700px) {
  .hero-major { grid-template-columns: 1fr; text-align: center; }
  .hero-major-right { justify-content: center; }
  .big-ring { width: 140px; height: 140px; }
}

/* DUAL ROW (radar + compare) */
.dual-row {
  display: grid; gap: 20px; margin-bottom: 30px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 880px) { .dual-row { grid-template-columns: 1fr; } }
.dual-row .card { padding: 24px; }
.dual-row h3 { margin-bottom: 16px; font-size: 1.1rem; }

/* compare table */
.compare { width: 100%; border-collapse: collapse; font-size: .9rem; }
.compare th, .compare td {
  padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border);
}
.compare th { font-weight: 600; color: var(--text-soft); font-size: .8rem; }
.compare th.rl, .compare td.rl {
  text-align: left; font-weight: 500; color: var(--text-soft);
  font-size: .85rem;
}
.compare th.rl { text-align: start; font-weight: 600; }
body.dir-rtl .compare th.rl, body.dir-rtl .compare td.rl { text-align: right; }
.stars { color: #f0b400; font-size: 1rem; letter-spacing: 1px; }

/* compare table — real percentage cells */
.pct-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pct-num { font-weight: 700; font-size: .9rem; color: var(--text); }
.pct-bar {
  display: block; width: 100%; max-width: 70px; height: 6px;
  background: var(--bg); border-radius: 999px; overflow: hidden;
}
.pct-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--blue), #34a4ff);
  transition: width .8s ease;
}
.pct-high .pct-num { color: var(--green); }
.pct-high .pct-bar > span { background: linear-gradient(90deg, var(--green), #6df0c2); }
.pct-mid .pct-num  { color: var(--orange); }
.pct-mid .pct-bar > span  { background: linear-gradient(90deg, var(--orange), #ffb86b); }
.pct-low .pct-num  { color: var(--red); }
.pct-low .pct-bar > span  { background: linear-gradient(90deg, var(--red), #ff8a92); }

/* Radar interpretation block */
.radar-interp {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.ri-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
}
.ri-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.ri-top         { background: #e3f5ec; }
.ri-top .ri-icon{ background: var(--green); color: white; }
.ri-bottom      { background: #fff3e0; }
.ri-bottom .ri-icon { background: var(--orange); color: white; }
.ri-row small { display: block; color: var(--text-soft); font-size: .8rem; }
.ri-row b     { display: block; color: var(--text); font-size: .95rem; }
.ri-tip {
  background: var(--blue-light); color: var(--blue);
  padding: 12px 14px; border-radius: 10px; font-size: .9rem;
}
.ri-tip b { color: var(--blue-dark); }

/* Why-not-100 section */
.why-100 { margin: 28px 0; padding: 24px; }
.why-100 h3 { margin: 0 0 18px; font-size: 1.2rem; }
.why-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
.why-col h4 { margin: 0 0 10px; font-size: 1rem; }
.why-col ul { list-style: none; padding: 0; margin: 0; }
.why-col li {
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 10px; font-size: .92rem; font-weight: 500;
}
.why-up   h4 { color: var(--green); }
.why-up   li { background: #e3f5ec; color: #034d2c; }
.why-down h4 { color: var(--orange); }
.why-down li { background: #fff3e0; color: #7a4d00; }

/* Accordion roadmap sections */
.rm-section {
  background: var(--glass-solid);
  backdrop-filter: saturate(150%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-soft));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm); margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-soft);
}
.rm-section[open] { box-shadow: var(--shadow-2), var(--glass-hi-soft); }
.rm-section summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  min-height: var(--tap);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 1rem; color: var(--text);
  background: linear-gradient(135deg, rgba(248,250,252,.9), rgba(255,255,255,.6));
  transition: background var(--dur-2) var(--ease-soft);
}
.rm-section summary::-webkit-details-marker { display: none; }
.rm-section summary:hover { background: rgba(10,102,194,.09); }
.rm-chev { color: var(--blue); transition: transform .2s ease; }
.rm-section[open] .rm-chev { transform: rotate(180deg); }
.rm-body {
  padding: 4px 18px 18px;
  animation: fadeUp .3s ease both;
  line-height: 1.65;
}
.rm-body ul { padding-left: 22px; }
body.dir-rtl .rm-body ul { padding-left: 0; padding-right: 22px; }
.rm-body b { color: var(--blue); }

/* structured report */
.md.structured h3 {
  color: var(--blue);
  border-bottom: 2px solid var(--blue-light);
  padding-bottom: 6px; margin-top: 24px; font-size: 1.15rem;
}
.md.structured ul {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0;
}
.md.structured li {
  background: var(--blue-light); color: var(--blue);
  padding: 6px 14px; border-radius: 999px; font-weight: 600;
  font-size: .9rem;
}

.top-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 40px;
}
.top-card {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 8px 28px -6px rgba(31, 38, 135, .15),
    inset 0 1px 0 0 rgba(255, 255, 255, .75);
  transition: transform .25s ease, box-shadow .25s ease;
  animation-delay: var(--d);
  position: relative; overflow: hidden;
}
.top-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 50%);
}
.top-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 16px 48px -8px rgba(31, 38, 135, .25),
    inset 0 1px 0 0 rgba(255, 255, 255, .9);
}

.top-score { position: relative; width: 110px; height: 110px; margin: 0 auto 16px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg, .ring-fg { fill: none; stroke-width: 3; }
.ring-bg { stroke: var(--border); }
.ring-fg { stroke: var(--blue); stroke-linecap: round;
           animation: drawRing 1.2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes drawRing { from { stroke-dasharray: 0,100; } }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-label b { font-size: 1.5rem; color: var(--blue); }
.ring-label small { color: var(--text-soft); font-size: .75rem; }

.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--bg); color: var(--text-soft);
  margin-right: 4px;
}
.chip-strong   { background: #e3f5ec; color: var(--green); }
.chip-moderate { background: #fff3e0; color: var(--orange); }
.chip-weak     { background: #fde8ea; color: var(--red); }
.market { margin: 8px 0 12px; }
.jobs { list-style: disc; padding-left: 20px; color: var(--text-soft); font-size: .9rem; margin: 8px 0; }
.unis { font-size: .85rem; color: var(--text-soft); margin-top: 8px; }
.breakdown { margin: 12px 0; font-size: .9rem; }
.breakdown summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.breakdown ul { margin: 8px 0 0; padding-left: 18px; }

.report.card { margin: 40px 0; }

/* collapsible AI report */
.report-details {
  margin: 32px 0; padding: 0; overflow: hidden;
}
.report-details summary {
  list-style: none; cursor: pointer;
  padding: 20px 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 1.05rem;
  background: linear-gradient(135deg, var(--blue-light), white);
  transition: background .2s ease;
}
.report-details summary::-webkit-details-marker { display: none; }
.report-details summary:hover { background: var(--blue-light); }
.report-details .chev {
  transition: transform .25s ease; color: var(--blue); font-size: 1.2rem;
}
.report-details[open] .chev { transform: rotate(180deg); }
.report-details > .md {
  padding: 0 28px 24px;
  animation: fadeUp .35s ease both;
}
.report h2 { margin-bottom: 16px; }
.md h3 { color: var(--blue); margin-top: 20px; font-size: 1.15rem; }
.md ul { padding-left: 22px; }
.md b { color: var(--text); }

.ranked-list ol {
  list-style: none; padding: 0; margin: 0;
  background: white; border-radius: var(--radius); border: 1px solid var(--border);
  overflow: hidden;
}
.ranked-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.ranked-list li:last-child { border-bottom: none; }
.ranked-list li b { color: var(--blue); }

.cta-row { display: flex; gap: 14px; justify-content: center; margin: 40px 0 0; flex-wrap: wrap; }
.roadmap-cta { text-align: center; margin: 32px 0; }
.roadmap-cta .small { font-size: .85rem; margin-top: 8px; }
#roadmap-card .md h2 { color: var(--blue); border-bottom: 2px solid var(--blue-light); padding-bottom: 6px; }
#roadmap-card .md h3 { margin-top: 24px; }
@media print {
  /* hide everything that's screen-only chrome: nav bars, floating/CTA buttons,
     the rating modal + FAB, the discovery strips, and the background video —
     so the saved PDF is just the student's report, not the live UI */
  .nav, .footer, .cta-row, .ocr-box,
  .results-nav, .rating-fab, .modal-overlay,
  .section-next, .more-below, .hero-cta-btn,
  .roadmap-cta, .rate-cta, .bg-video,
  .compare-hint,
  #rating-modal { display: none !important; }
  /* let the page background go white and the cards print cleanly */
  body { background: #fff !important; }
  .card, .glass, .hero-major { box-shadow: none !important; }
  /* expand the AI report if the student opened it before printing */
  .report-details[open] > .md { display: block !important; }
  .fade-up, .major-details-body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===== FLASH ===== */
.flash-wrap { max-width: 800px; margin: 12px auto; padding: 0 24px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 8px;
  background: white; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.flash-error { background: #fde8ea; color: var(--red); border-color: #f5b5ba; }

/* ===== ANIMATIONS ===== */
.fade-up { animation: fadeUp .7s cubic-bezier(.4,0,.2,1) both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bullets { padding-left: 18px; }
.bullets li { margin-bottom: 8px; }

/* ===== MOBILE / RESPONSIVE — comprehensive ===== */

/* Tablet & below */
@media (max-width: 880px) {
  .page { padding: 28px 18px 60px; }
  h1   { font-size: 2rem; }
  h2   { font-size: 1.5rem; }
  .nav { padding: 10px 18px; }
  .brand { font-size: 1.15rem; }
  .nav-links a { font-size: .9rem; }
  .nav-links a + a { margin-left: 12px; }
  body.dir-rtl .nav-links a + a { margin-left: 0; margin-right: 12px; }

  .hero { padding: 50px 0 30px; min-height: auto; }
  .hero-cta { gap: 10px; }
  .hero-stats { gap: 24px; flex-wrap: wrap; }

  .top-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
  .dual-row { grid-template-columns: 1fr; }
  .branch-grid { grid-template-columns: 1fr 1fr; }
}

/* Phone */
@media (max-width: 640px) {
  html { font-size: 15px; }
  .page { padding: 20px 12px 50px; }
  .card { padding: 20px 18px; border-radius: 14px; }

  /* nav */
  .nav { padding: 8px 12px; }
  .brand { font-size: 1.05rem; gap: 6px; }
  .brand-mark { width: 32px; height: 32px; }
  .nav-links { display: flex; align-items: center; }
  .nav-links a { font-size: .85rem; }
  .nav-links > a:not(.lang-toggle) { display: none; } /* hide About on phone, keep lang */
  .lang-toggle { width: 48px; height: 28px; font-size: .8rem; margin: 0 !important; }

  /* hero */
  .hero { padding: 32px 0 20px; }
  h1, .title { font-size: 1.8rem; line-height: 1.15; }
  .subtitle { font-size: 1rem; }
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-cta .btn { justify-content: center; }
  .btn-lg { padding: 12px 22px; font-size: 1rem; }
  .hero-stats { gap: 18px; justify-content: space-between; width: 100%; }
  .stat b { font-size: 1.4rem; }
  .stat span { font-size: .78rem; }
  .social-proof { gap: 16px; padding: 12px 16px; }
  .sp-stat b { font-size: 1.3rem; }

  /* register/branch */
  .branch-grid { grid-template-columns: 1fr; }
  .grid-grades { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field span { font-size: .85rem; }
  input, select, textarea { font-size: 16px; }  /* 16px prevents iOS zoom-on-focus */

  /* quiz */
  .q-card { padding: 22px 18px 90px; }   /* bottom padding so nav doesn't cover content */
  .q-text { font-size: 1.15rem; line-height: 1.35; }
  .q-opt { padding: 12px 14px; font-size: .95rem; }

  /* sticky nav at bottom so buttons are ALWAYS reachable on mobile */
  .q-nav {
    position: sticky; bottom: 0; left: 0; right: 0;
    margin: 18px -18px -22px;
    padding: 14px 18px;
    background: linear-gradient(to top, white 70%, rgba(255,255,255,.85));
    border-top: 1px solid var(--border);
    display: flex; gap: 10px; flex-wrap: nowrap;
    z-index: 10;
  }
  .q-nav .btn { flex: 1; min-width: 0; justify-content: center; padding: 12px 16px; }
  .q-nav > span { display: none; }   /* hide empty spacer on first question */

  /* results */
  .results-head h1 { font-size: 1.6rem; }
  .confidence-badge { flex-direction: column; text-align: center; padding: 14px 18px; gap: 10px; }
  .conf-text { text-align: center !important; }

  /* hero major card */
  .hero-major { padding: 24px 20px; gap: 18px; text-align: center; }
  .hero-major-name { font-size: 1.6rem; }
  .best-tag { font-size: .78rem; padding: 5px 12px; }
  .big-ring { width: 130px; height: 130px; }
  .big-ring-label b { font-size: 2rem; }

  .top-grid { grid-template-columns: 1fr; gap: 14px; }
  .top-card { padding: 20px; }

  /* compare table — horizontal scroll on tiny screens */
  .compare { font-size: .8rem; min-width: 380px; }
  .dual-row .card { padding: 18px; overflow-x: auto; }

  /* feedback */
  .feedback-hero { padding: 22px 18px; }
  .fb-head { gap: 12px; }
  .fb-head h2 { font-size: 1.15rem; }
  .fb-pulse { width: 44px; height: 44px; font-size: 1.6rem; }
  .pill { padding: 7px 14px; font-size: .9rem; }
  .star-btn { font-size: 1.6rem; padding: 2px; }

  /* testimonials */
  .testi-grid { grid-template-columns: 1fr; }
  .testimonials h2 { font-size: 1.35rem; }

  /* footer cta */
  .cta-row { flex-direction: column; gap: 10px; }
  .cta-row .btn { width: 100%; justify-content: center; }

  /* roadmap card */
  .roadmap-cta .btn { width: 100%; justify-content: center; }
  .report-details summary { padding: 16px 20px; font-size: 1rem; }
  .report-details > .md { padding: 0 20px 20px; }

  /* disclaimer */
  .disclaimer { padding: 10px 14px; font-size: .85rem; }
}

/* Very small phones */
@media (max-width: 380px) {
  .grid-grades { grid-template-columns: 1fr; }
  .hero-stats .stat { flex: 1; min-width: 80px; }
  .ring-label b { font-size: 1.2rem; }
}


/* ===== ADMIN MOBILE ===== */
@media (max-width: 880px) {
  .admin-nav { padding: 10px 14px; flex-wrap: wrap; gap: 10px; }
  .admin-nav nav { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
  .admin-nav nav a { margin-left: 0 !important; font-size: .82rem; }
  .admin-brand { font-size: 1rem; }

  .admin-main { padding: 20px 14px; }
  .admin-main h2 { font-size: 1.05rem; margin: 24px 0 10px; }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi b { font-size: 1.4rem; }
  .kpi span { font-size: .75rem; }

  .research-grid { grid-template-columns: 1fr; }
  .research-card { padding: 18px; }
  .big-stat b { font-size: 1.7rem; }
  .writeup { font-size: .78rem; padding: 12px; }

  .table-wrap { max-height: 380px; }
  .admin-table { font-size: .78rem; min-width: 600px; }
  .admin-table th, .admin-table td { padding: 8px 10px; }
  .comment-cell { max-width: 200px; }

  .majors-bar li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .majors-bar b { text-align: left; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi b { font-size: 1.25rem; }
  .admin-nav nav a.logout { padding: 4px 10px; font-size: .78rem; }
  .admin-login { padding: 28px 22px; }
  .admin-login h1 { font-size: 1.25rem; }
}

/* Grades skip-confirm (shown when submitting with zero grades) */
.skip-confirm {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(240, 180, 0, .1);
  border: 1px solid rgba(240, 180, 0, .35);
}
.skip-confirm p { margin: 0 0 12px; font-weight: 600; }
.skip-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Quiz inline error (validation / network retry) — visible AND announced */
.q-error {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(214, 69, 69, .08);
  border: 1px solid rgba(214, 69, 69, .25);
  color: #b23232;
  font-size: .92rem;
  font-weight: 600;
}

/* ============ ERROR PAGES (404 / 500) ============ */
.error-page {
  display: flex;
  justify-content: center;
  padding: 60px 16px;
}
.error-card {
  text-align: center;
  max-width: 460px;
  padding: 44px 36px;
}
.error-code {
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(120deg, #0a66c2, #34a4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.error-card h1 { font-size: 1.5rem; margin: 0 0 8px; }
.error-card .muted { margin: 0 0 22px; }

/* ============ RESULTS: "what's next" discoverability cue ============ */
.next-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  margin: 14px 0 6px;
  border-left: 3px solid var(--brand, #0a66c2);
}
body.dir-rtl .next-cue { border-left: none; border-right: 3px solid var(--brand, #0a66c2); }
.next-cue-text { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.next-cue-text b { font-size: 1.02rem; }
.next-cue-text .muted { font-size: .88rem; }
.next-cue-links { display: flex; gap: 8px; flex-wrap: wrap; }
.cue-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink, #1d2226);
  background: rgba(10, 102, 194, .08);
  border: 1px solid rgba(10, 102, 194, .18);
  transition: transform .15s ease, background .15s ease;
}
.cue-pill:hover { transform: translateY(-2px); background: rgba(10, 102, 194, .15); }
.cue-pill-primary {
  color: #fff;
  background: var(--brand, #0a66c2);
  border-color: var(--brand, #0a66c2);
}
.cue-pill-primary:hover { background: #084e95; }

/* Roadmap teaser line above the CTA button */
.roadmap-teaser {
  margin: 0 auto 12px;
  max-width: 540px;
  text-align: center;
  color: var(--muted, #5b6670);
  font-size: .94rem;
  line-height: 1.5;
}

/* Glow pulse when the AI report finishes loading + auto-opens */
.report-details.just-loaded {
  animation: reportGlow 2.4s ease;
}
@keyframes reportGlow {
  0%   { box-shadow: 0 0 0 0 rgba(10, 102, 194, .0); }
  20%  { box-shadow: 0 0 0 4px rgba(10, 102, 194, .28); }
  100% { box-shadow: 0 0 0 0 rgba(10, 102, 194, .0); }
}
.report-details .report-status { color: var(--brand, #0a66c2); font-weight: 600; }

@media (max-width: 640px) {
  .next-cue { flex-direction: column; align-items: stretch; text-align: center; }
  .next-cue-links { justify-content: center; }
}

/* ============ ACCESSIBILITY ============ */

/* Skip-to-content link: off-screen until a keyboard user tabs to it, then it
   slides into the top-left so they can jump past the nav (WCAG 2.4.1). */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-150%);
  background: var(--blue); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .18s ease;
}
body.dir-rtl .skip-link { left: auto; right: 8px; }
.skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }
#main-content:focus { outline: none; }   /* programmatic focus target, no ring */

/* screen-reader-only content (visually hidden, still announced) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
           overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* weak-signal alert heading: promoted h3->h2 for a correct outline, but pinned
   back to the old h3 size (1.25rem/600) so the card looks unchanged */
.weak-signal-title { font-size: 1.25rem; font-weight: 600; }

/* Visible keyboard focus everywhere (WCAG 2.4.7). Mouse clicks are unaffected
   (:focus-visible only fires for keyboard). Inputs keep their own focus style. */
:where(a, button, summary, .btn, .link-btn, .cue-pill, .branch-card,
       .star-btn, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 6px;
}
/* white halo on solid-blue surfaces where a blue ring would vanish */
.btn-primary:focus-visible, .cue-pill-primary:focus-visible {
  outline-color: #1d2226;
  box-shadow: 0 0 0 2px #fff;
}

/* Calm everything for users who asked the OS to reduce motion (WCAG 2.3.3).
   Default Liquid Glass experience is untouched — this only fires on opt-in. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
    /* Collapsing DURATION alone was not enough. The entrance animations use
       `both` fill mode with staggered delays (the hero cascade runs to ~0.9s,
       the word stagger to ~0.5s), and a delay is not a duration — so a
       reduced-motion visitor sat looking at elements frozen at their `from`
       keyframe (opacity 0) for up to a second before they snapped in. Zeroing
       the delay makes everything land immediately, which is what "reduce" is
       actually asking for. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  /* the video IS motion, so it must go — but replace it with a STILL in the
     same palette, so reduced-motion visitors get the calm liquid-glass look
     instead of a blank washed-out page. Plain gradients: no blur filter, no
     GPU cost, zero movement. */
  .bg-video { display: none; }
  body {
    background:
      radial-gradient(45vw 45vw at 85% 8%,  rgba(109, 181, 255, .50), transparent 70%),
      radial-gradient(40vw 40vw at 8% 90%,  rgba(255, 181, 107, .30), transparent 70%),
      radial-gradient(35vw 35vw at 45% 55%, rgba(105, 240, 178, .20), transparent 70%),
      #eef2f7;
    background-attachment: fixed;
  }
  /* hero redesign (2026-07): explicit off-states on top of the blanket
     .001ms collapse above, so nothing is left mid-spin/skewed/hidden */
  .aurora { animation: none !important; }
  .hero-spotlight { display: none !important; }
  .hero-cta .btn-primary::after { display: none !important; }
  /* homepage graphics pass (2026-07): logo intro must never play (static
     final logo), grid draw/pulse freeze — but everything stays VISIBLE (no
     blank/half-drawn state). No global `* { animation:none }` was added
     beyond the blanket collapse above (CLAUDE.md pitfall). */
  .brand-mark.intro { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero-grid g[stroke] path { animation: none !important; stroke-dashoffset: 0 !important; opacity: .4 !important; }
  .hg-dot { animation: none !important; opacity: .7 !important; }
}

/* Glass surfaces fall back to solid, blue-tinted fills when the OS asks for
   reduced transparency - legibility never depends on frost. .btn-primary is
   a SOLID blue gradient already, not a glass surface, so it gets its own
   opaque --blue fill here instead of the light #eaf2fd badge fallback -
   that fill under white CTA text was ~1.1:1 contrast (illegible);
   var(--blue) keeps white text comfortably above 4.5:1. */

/* The prefers-reduced-transparency OPAQUE THEME used to sit here. It was moved
   to the very END of this file: it has to override component rules that
   hardcode their own translucent rgba() fills (.nav, .trust-bar, .results-nav,
   .more-below, .lang-menu, the mobile .cta-row/.q-nav ...). Media queries add
   no specificity, so the only thing that decides those ties is source order —
   from here it silently lost every one of them. */


/* ============================================================
   2026-06 UI pass: dropdown polish, footer credit, disabled
   buttons, register trust line, guided results page, rating
   modal. (Liquid-glass aesthetic preserved throughout.)
   ============================================================ */

/* smooth in-page scrolling + offset for the two sticky nav bars */
html { scroll-behavior: smooth; scroll-padding-top: 118px; }

/* ---- footer credit ---- */
.footer-credit {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  color: var(--text-soft);
  opacity: .85;
  letter-spacing: .01em;
}

/* ---- disabled buttons (e.g. Continue before the form is complete) ---- */
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.25);
  box-shadow: none;
  transform: none !important;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: linear-gradient(135deg, var(--blue), #34a4ff); }

/* ---- register: subtle trust line under the time hint ---- */
.reg-trust-line {
  margin: 8px 0 0;
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-soft);
  opacity: .9;
}
.reg-consent {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm); background: var(--glass-solid);
  color: var(--text-soft); font-size: .82rem; line-height: 1.55;
}
.reg-consent input {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--blue);
}

/* ---- register: flow preview + validation hint ---- */
.reg-steps {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 0 0 18px; font-size: .82rem;
  list-style: none; padding: 0;
}
.reg-step {
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.5); border: 1px solid var(--border);
  color: var(--text-soft); font-weight: 600;
}
.reg-step.is-current {
  background: var(--blue-light); color: var(--blue);
  border-color: rgba(10,102,194,.28);
}
.reg-step-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--border);
}
.reg-hint {
  margin: 6px 0 0; font-size: .85rem; color: var(--text-soft); min-height: 1.2em;
}
.reg-hint.ready { color: var(--green); }

/* ============ RESULTS: sticky section nav ============ */
.results-nav {
  position: sticky;
  top: 60px;                 /* sits just under the main glass nav */
  z-index: 30;
  display: flex;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(255,255,255,.62);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  box-shadow: 0 8px 24px -8px rgba(31,38,135,.16);
}
.results-nav::-webkit-scrollbar { display: none; }
.rnav-link {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.rnav-link:hover { background: rgba(10,102,194,.10); color: var(--blue); text-decoration: none; }
.rnav-link.active { background: var(--blue); color: #fff; }

/* result sections: tighter spacing so the next section peeks into view */
.res-block { margin: 0 0 22px; scroll-margin-top: 118px; }
#roadmap-card { scroll-margin-top: 118px; }
.section-peek-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 30px 0 14px;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--blue);
  line-height: 1.25;
}

/* ---- compact hero major card ---- */
.hero-major-compact { padding: 24px 28px; gap: 24px; margin-bottom: 16px; align-items: center; }
.hero-major-compact .hero-major-name { margin-bottom: 12px; }
.hero-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.hero-reasons .hr-label {
  flex: 0 0 100%;
  font-size: .82rem; font-weight: 600; opacity: .85; margin-bottom: 2px;
}
.hr-chip {
  background: rgba(255,255,255,.22);
  color: #fff;
  padding: 5px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 600;
}
.hero-reason-line { color: rgba(255,255,255,.92); margin: 0 0 14px; }
.hero-cta-prompt { margin: 0 0 10px; font-size: .92rem; color: rgba(255,255,255,.9); font-weight: 600; }
.hero-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px;
  background: #fff; color: var(--blue);
  font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 22px -6px rgba(0,0,0,.3);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hero-cta-btn:hover { transform: translateY(-2px); background: #f3f8ff; text-decoration: none; box-shadow: 0 12px 28px -6px rgba(0,0,0,.35); }

/* ---- "more below" discovery strip ---- */
.more-below {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
  margin: 0 0 6px; padding: 16px 18px;
  background: rgba(255,255,255,.5);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px dashed rgba(10,102,194,.3);
  border-radius: 16px;
}
.more-below .mb-title { font-weight: 700; font-size: 1rem; color: var(--blue-dark); }
.mb-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mb-pill {
  padding: 7px 14px; border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  color: var(--text); background: rgba(10,102,194,.08);
  border: 1px solid rgba(10,102,194,.18);
  transition: transform .15s ease, background .15s ease;
}
.mb-pill:hover { transform: translateY(-2px); background: rgba(10,102,194,.16); text-decoration: none; color: var(--blue); }

/* ---- between-section guiding CTA ---- */
.section-next {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; margin: 24px 0 6px;
}
.section-next .sn-text { font-size: .98rem; font-weight: 600; color: var(--text-soft); }
.section-next .sn-btn { padding: 11px 24px; }

/* ---- radar chart: keep it a sensible size on its full-width card ---- */
.radar-box {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 340px;
  margin: 8px auto 0;
}
.radar-box canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 640px) {
  .radar-box { height: 280px; }
}

/* ---- why-detail card ---- */
.why-detail { margin-bottom: 18px; }
.why-detail .wd-reason { margin-bottom: 12px; }
.why-detail .wd-unis { font-size: .9rem; color: var(--text-soft); margin-bottom: 6px; }
.why-detail .wd-steps-label { margin: 12px 0 4px; }

/* compare table — horizontal scroll wrapper on small screens */
.compare-card { margin-top: 18px; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.compare-hint { display: none; margin: 0 0 8px; font-size: .82rem; color: var(--text-soft); }
@media (max-width: 640px) { .compare-hint { display: block; } }

/* ---- rating section CTA ---- */
.rate-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 22px 24px;
}
.rate-cta-text { display: flex; flex-direction: column; gap: 3px; min-width: 200px; }
.rate-cta-text b { font-size: 1.05rem; }
.rate-cta-text .muted { font-size: .9rem; }
.rate-done {
  font-weight: 700; color: var(--green);
  background: #e3f5ec; padding: 10px 18px; border-radius: 999px;
}

/* ============ FLOATING rating button (always visible on results) ============ */
.rating-fab {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 250;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border: none; border-radius: 999px;
  background: linear-gradient(135deg, #f0b400, #ffce3a);
  color: #3a2e00; font-weight: 800; font-size: .98rem;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 10px 28px -6px rgba(240,180,0,.6);
  opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
  transition: opacity .35s ease,
              transform .28s var(--ease-out),
              box-shadow .2s ease;
}
body.dir-rtl .rating-fab { right: auto; left: 22px; }
.rating-fab.show {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
  animation: fabPulse 2.6s ease-in-out 1.2s infinite;
}
.rating-fab.tucked { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; animation: none; }
/* also hide while the rating modal itself is open — no CTA behind the dialog */
body.modal-lock .rating-fab { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; animation: none; }
.rating-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 34px -6px rgba(240,180,0,.75); }
.rating-fab-star { font-size: 1.15rem; line-height: 1; }
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 28px -6px rgba(240,180,0,.55); }
  50%      { box-shadow: 0 12px 36px -2px rgba(240,180,0,.9); }
}
@media (max-width: 640px) {
  .rating-fab { bottom: 14px; right: 14px; padding: 11px 16px; font-size: .9rem; }
  body.dir-rtl .rating-fab { right: auto; left: 14px; }
}

/* ============ MODAL (rating dialog) ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(12, 22, 40, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .25s ease;
}
.modal-overlay.open { opacity: 1; }
/* Dialog reads as a thick slab of glass lifted off the page: near-opaque
   (it holds a form), bright top edge, deep layered shadow. */
.modal-dialog {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(var(--blur-strong));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-strong));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  box-shadow: 0 30px 80px -20px rgba(16,42,80,.45),
              var(--glass-hi);
  transform: translateY(14px) scale(.96);
  transition: transform .25s var(--ease-out);
}
.modal-overlay.open .modal-dialog { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.06); color: var(--text);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
body.dir-rtl .modal-close { right: auto; left: 14px; }
.modal-close:hover { background: rgba(0,0,0,.12); }
body.modal-lock { overflow: hidden; }
/* ---- polished feedback UI inside the modal ---- */
.modal-dialog { max-width: 480px; }
.fb-modal .fb-head {
  flex-direction: column; align-items: center; text-align: center;
  gap: 12px; margin-bottom: 22px;
}
.fb-modal .fb-head > div { display: flex; flex-direction: column; gap: 5px; }
.fb-modal .fb-head h2 { font-size: 1.3rem; margin: 0; }
.fb-modal .fb-head p { margin: 0; max-width: 360px; font-size: .9rem; }
/* brand-blue gradient badge instead of the old flat white circle */
.fb-modal .fb-pulse {
  width: 60px; height: 60px; font-size: 1.9rem;
  background: linear-gradient(135deg, var(--blue), #34a4ff);
  color: #fff;
  box-shadow: 0 12px 28px -6px rgba(10,102,194,.5);
}

.fb-modal .form { gap: 22px; }
.fb-modal .field > span { font-weight: 600; color: var(--text); font-size: .92rem; }

/* helpful + stars sit centred so the dialog feels balanced */
.fb-modal .pill-group { justify-content: center; }
.fb-modal .field:has(.pill-group) > span,
.fb-modal .field:has(.star-pick) > span { text-align: center; }

/* stars — the focal point: bigger, gold, soft glow */
.fb-modal .star-pick { justify-content: center; gap: 10px; margin-top: 2px; }
.fb-modal .star-btn {
  font-size: 2.4rem; color: #dadfe5; padding: 2px;
  transition: transform .12s ease, color .15s ease, text-shadow .15s ease;
}
.fb-modal .star-btn:hover { transform: scale(1.2); }
.fb-modal .star-btn.on { color: #f5b400; text-shadow: 0 3px 12px rgba(245,180,0,.5); }

/* clearer slider end-labels + comfy inputs */
.fb-modal .slider-track { font-weight: 600; }
.fb-modal textarea,
.fb-modal input[type="text"] { background: rgba(255,255,255,.85); }

/* submit spans the dialog */
.fb-modal .form > button[type="submit"] { width: 100%; justify-content: center; margin-top: 2px; }

@media (max-width: 640px) {
  .results-nav { top: 48px; }
  html { scroll-padding-top: 100px; }
  .res-block, #roadmap-card { scroll-margin-top: 100px; }
  .hero-major-compact { padding: 20px 18px; }
  .rate-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .rate-cta .btn, .rate-done { width: 100%; text-align: center; }
  .modal-dialog { padding: 24px 18px; }
  .section-peek-title { font-size: 1.2rem; }
}

@media (max-width: 480px) {
  .trust-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px;
               width:100%; border-radius:18px; padding:10px 14px; }
  .trust-bar .tb-dot { display:none; }
  .hero-stats { gap:12px; }
  .stat b { font-size:1.25rem; }
  .results-nav { gap:4px; padding:5px; }
  .rnav-link { padding:7px 12px; font-size:.82rem; }
  .hero-major-name { font-size:1.4rem; overflow-wrap:anywhere; }
  .compare th, .compare td { padding:8px 6px; }
}

/* ============================================================
   HERO TYPE (2026-07) - light theme, BIG bold typography as the
   hero centerpiece. Cinematic word-by-word mask-reveal entrance on
   load: each word rises from behind a clip mask, staggered, then
   the accent line lands as the punchline with a soft glow. Full-
   bleed + centered composition, pure-blue backdrop field. Motion =
   transform / opacity / clip only (no filter:blur, no scroll
   listeners). RTL-aware. Consolidated 2026-07 polish pass (was
   spread across several fragmented blocks; same computed result,
   refined type scale + vertical rhythm).
   ============================================================ */

/* -- base + full-bleed: spans the full viewport, centers the
   big-type block, radial light-blue field behind it --
   redesign v2: deepened into a richer blue (still light enough for dark
   text) + one teal radial for a hint of the new secondary accent. */
.hero-type {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* 2026-08: was clamp(40px, 6vh, 88px) vertical. Combined with the 706px-tall
     content block that made the hero 792px in a 720px viewport, so the stats
     and trust bar sat below the fold and the section read as one huge empty
     column. Padding tightened here; the content rhythm below was tightened
     with it (the padding alone was not the problem). */
  padding: clamp(24px, 3.4vh, 46px) clamp(20px, 5vw, 64px);
  box-sizing: border-box;
  /* neutralise the generic `.hero { min-height: 80vh }` in the 880-1000px band,
     where no flex centering applies and it produced pure dead space */
  min-height: auto;
  background:
    radial-gradient(55% 60% at 84% -10%, rgba(6,182,212,.13), transparent 65%),
    radial-gradient(125% 95% at 50% -12%, #c6e4ff 0%, #dfeeff 45%, #f2f8fd 100%);
}
/* Vertical-centering on desktop. min-height is now a CAP that leaves the fold
   reachable (was 88vh, which forced dead space on short laptop viewports)
   rather than a floor the content had to fill. */
@media (min-width: 1000px) {
  .hero-type { min-height: min(78vh, 660px); display: flex; align-items: center; }
}
.hero-type .hero-inner {
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

/* -- page backdrop: cools the whole welcome ambiance so the warm
   background video never tints below/around the hero. Scoped via
   :has(.hero-type) so other pages keep the shared video bg. -- */
body:has(.hero-type) {
  background:
    radial-gradient(52vw 42vw at 82% -5%, rgba(52,144,255,.34), transparent 70%),
    radial-gradient(46vw 42vw at 2% 32%, rgba(6,182,212,.16), transparent 72%),
    #e8f1fc;
  background-attachment: fixed;
}
body:has(.hero-type) .bg-video { display: none; }

/* -- headline: type scale + vertical rhythm --
   Cap lowered 5.6rem -> 4.2rem. At 1280px the old clamp resolved to ~90px per
   line; two lines plus the underline consumed over half the viewport on their
   own, which is what pushed everything below it off-screen. 4.2rem still reads
   as a big-type hero, just one that leaves room for the CTA. */
.hero-type .title {
  font-size: clamp(2.15rem, 5.2vw, 4.2rem);
  line-height: 1.07;
  letter-spacing: -.028em;
  font-weight: 800;
  margin-bottom: 14px;
}
.hero-type .tl { display: block; }
.hero-type .accent-line { margin-top: .04em; }

/* word mask: .w clips, .wi rises from behind it. padding/negative-margin
   give descenders (y g j / Arabic tails) room so the clip never crops them. */
.hero-type .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .16em;
  margin-bottom: -.16em;
  animation: none;
  opacity: 1;
  transform: none;
}
.hero-type .wi {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  animation: wiRise .95s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wiRise { to { transform: translateY(0); opacity: 1; } }

/* continuous stagger across the first line only — step tightened .12s -> .07s */
.hero-type .tl:not(.accent-line) .w:nth-child(1) .wi { animation-delay: .10s; }
.hero-type .tl:not(.accent-line) .w:nth-child(2) .wi { animation-delay: .17s; }
.hero-type .tl:not(.accent-line) .w:nth-child(3) .wi { animation-delay: .24s; }
.hero-type .tl:not(.accent-line) .w:nth-child(4) .wi { animation-delay: .31s; }
.hero-type .tl:not(.accent-line) .w:nth-child(5) .wi { animation-delay: .38s; }
.hero-type .tl:not(.accent-line) .w:nth-child(6) .wi { animation-delay: .45s; }

/* the accent line lands last, then glows */
.hero-type .accent-line .wi {
  animation: wiRise .72s cubic-bezier(.16,1,.3,1) .50s both,
             accentGlow 1.4s ease-out 1.15s 1 both;
}
@keyframes accentGlow {
  0%   { filter: drop-shadow(0 0 0 rgba(52,164,255,0)); }
  40%  { filter: drop-shadow(0 6px 26px rgba(52,164,255,.45)); }
  100% { filter: drop-shadow(0 4px 16px rgba(52,164,255,.22)); }
}

/* gradient underline sweeps in under the headline (transform only),
   centered under it in both directions */
.hero-type .title::after {
  content: "";
  display: block;
  height: 3px; width: min(200px, 36%);
  margin: 14px auto 0;
  border-radius: 999px;
  transform: scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, var(--blue), #34a4ff 60%, transparent);
  animation: underlineGrow .8s cubic-bezier(.16,1,.3,1) .78s both;
}
body.dir-rtl .hero-type .title::after {
  background: linear-gradient(270deg, var(--blue), #34a4ff 60%, transparent);
}
@keyframes underlineGrow { to { transform: scaleX(1); } }

/* backdrop breathes in on load */
.hero-type .hero-bg {
  opacity: 0;
  transform: scale(.965);
  animation: bgReveal 1.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes bgReveal { to { opacity: 1; transform: scale(1); } }

/* -- supporting rows: cascade AFTER the headline lands, centered
   composition, vertical rhythm -- */
/* Entrance cascade compressed from a 1.66s tail to ~0.85s. The old timing
   meant the CTA did not exist for the first 1.3 seconds of the page; a visitor
   who looked away briefly returned to a hero that appeared to have no button.
   Same choreography, roughly half the wait. */
.hero-type .badge {
  margin-bottom: 14px;
  animation-delay: .04s;
}
.hero-type .subtitle {
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 560px;
  margin: 2px auto 0;
  animation-delay: .62s;
}
.hero-type .hero-cta {
  justify-content: center;
  margin: 24px 0 0;
  animation-delay: .72s;
}
.hero-type .hero-stats {
  justify-content: center;
  margin-top: 22px;
  gap: clamp(24px, 4.4vw, 46px);
  animation-delay: .80s;
}
.hero-type .trust-bar {
  margin-inline: auto;
  margin-top: 18px;
  animation-delay: .86s;
}
.hero-type .social-proof {
  justify-content: center;
  margin-top: 16px;
  animation-delay: .92s;
}

/* pure-blue background field (retire the old warm/green orbs) */
.hero-type .orb-1 { background: #34a4ff; }
.hero-type .orb-2 { background: #5aa9ff; }
.hero-type .orb-3 { background: #8fd0ff; }

/* -- mobile tuning (single merged breakpoint) -- */
@media (max-width: 720px) {
  .hero-type { padding: 40px 20px 52px; }
  .hero-type .title { font-size: clamp(2.3rem, 9.5vw, 3.4rem); }
  .hero-type .subtitle { font-size: 1.05rem; }
  .hero-type .hero-stats { gap: 22px; }
}

/* reduced motion: everything lands instantly, nothing left mid-rise/clipped */
@media (prefers-reduced-motion: reduce) {
  .hero-type .wi { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-type .hero-bg { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-type .title::after { transform: scaleX(1) !important; animation: none !important; }
}

/* RTL: the big-type hero is CENTERED in both languages. The global
   `body.dir-rtl .hero-inner { text-align:right }` (higher specificity than
   `.hero-type .hero-inner`) was leaving the Arabic hero right-aligned while
   English centered - override it so the composition matches in both. */
body.dir-rtl .hero-type .hero-inner { text-align: center; margin-inline: auto; }


/* ============================================================
   LIQUID GLASS PASS (2026-08)
   Touch ergonomics, the mobile results action bar, and the
   remaining flat surfaces folded onto the token system.
   Scoring engine, weights, confidence cap: untouched.
   ============================================================ */

/* ---- quiz: "choose an answer" gate hint ----
   Paired with the disabled Next button (see quiz.html). Referenced by
   aria-describedby, so it is the button's explanation, not decoration. */
.q-gate-hint {
  margin: 0 0 10px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-soft);
  display: flex; align-items: center; gap: 7px;
}
.q-gate-hint::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  opacity: .5;
  flex: 0 0 auto;
}
.q-gate-hint[hidden] { display: none; }

/* ---- results: sticky bottom action bar on phones ----
   The existing .cta-row is pinned instead of duplicating the buttons. Because
   a sticky element still occupies its own space in flow, the final content is
   never permanently covered - the bar only overlays while it is pinned. */
@media (max-width: 640px) {
  .cta-row {
    position: sticky;
    bottom: 0;
    z-index: 40;
    flex-direction: row;          /* override the stacked mobile default */
    gap: 10px;
    margin: 26px -12px 0;         /* bleed to the page edges (.page has 12px) */
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(var(--blur-strong));
    -webkit-backdrop-filter: saturate(180%) blur(var(--blur-strong));
    border-top: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 -8px 28px -12px rgba(16,42,80,.28);
  }
  .cta-row .btn {
    width: auto;                  /* override the stacked full-width default */
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 12px;
    font-size: .95rem;
    white-space: nowrap;
  }
  /* lift the rating FAB clear of the action bar instead of letting the two
     stack on top of each other in the same corner */
  .rating-fab { bottom: calc(72px + max(10px, env(safe-area-inset-bottom))); }
}

/* ---- results section tabs: easier to hit + swipeable on mobile ---- */
.results-nav { scroll-snap-type: x proximity; scroll-padding: 6px; }
.rnav-link { scroll-snap-align: start; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  .results-nav {
    /* full-bleed so the strip reads as a scrollable tab bar rather than a
       cramped pill that happens to clip */
    margin-inline: -12px;
    border-radius: 0;
    border-inline: none;
    padding: 6px 12px;
    gap: 6px;
  }
  .rnav-link {
    min-height: var(--tap);
    padding: 10px 16px;
    font-size: .9rem;
  }
}

/* ---- minimum touch targets (WCAG 2.5.5 / iOS HIG) ----
   Applied on coarse pointers OR narrow viewports. Gating on `pointer: coarse`
   alone is not enough: hybrid laptops and any narrow window still report a
   fine pointer, so real phone-sized layouts were silently missing the larger
   targets. The two conditions together cover both. */
@media (pointer: coarse), (max-width: 640px) {
  .mb-pill, .cue-pill, .pill, .lang-opt, .link-btn, .star-btn,
  .rnav-link, .lang-toggle, .brand {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
  }
  .mb-pill, .cue-pill, .pill, .rnav-link, .star-btn { justify-content: center; }
  /* the ≤640px block above pins the language toggle to a 28px box — a 48x28
     target is well under the guideline and it is the only control that
     survives on the phone nav */
  .lang-toggle { height: auto; min-width: 52px; padding-block: 8px; justify-content: center; }
  /* <summary> grows via padding, never `display`: it is display:list-item by
     default and flipping that removes the disclosure triangle. .rm-section
     summary is excluded entirely — it is already display:flex with
     justify-content:space-between to push its chevron to the far edge, and
     forcing inline-flex here would collapse that layout. */
  .breakdown summary, .raw-detail summary { padding-block: 13px; }
  .rm-section summary { min-height: var(--tap); box-sizing: border-box; }
  .q-opt { padding-block: 14px; }
  /* skip/link buttons in the quiz meta row need a real target too */
  .quiz-meta .link-btn { padding: 10px 12px; margin: -10px -12px; }
}

/* ---- slider: clearer in both directions ----
   The RTL geometry was already correct (JS anchors the fill to the right edge
   and mirrors the thumb centre). What was unclear was which end meant what:
   the 1 / 10 end-labels were 0.85rem muted grey with no shape, so on a phone
   the scale read as an unlabelled bar. They are now legible chips, and the
   fill is a gradient that darkens toward the thumb — so the direction of
   travel is obvious without reading the numbers at all. */
.slider-track span {
  min-width: 30px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  color: var(--text);
  font-weight: 700;
  font-size: .82rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* gradient runs from the rail's ORIGIN to the thumb. In RTL the fill is
   anchored to the right edge, so the gradient is mirrored to match. */
.slider-fill { background: linear-gradient(90deg, #7cc6ff 0%, var(--blue) 100%); }
body.dir-rtl .slider-fill { background: linear-gradient(270deg, #7cc6ff 0%, var(--blue) 100%); }
.slider-rail {
  background: rgba(10,102,194,.13);
  box-shadow: inset 0 1px 2px rgba(16,42,80,.12);
}

/* ---- remaining flat surfaces -> glass ---- */
.ranked-list ol {
  background: var(--glass-solid);
  backdrop-filter: saturate(150%) blur(var(--blur-soft));
  -webkit-backdrop-filter: saturate(150%) blur(var(--blur-soft));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.ranked-list li { border-bottom-color: rgba(16,42,80,.08); }

.social-proof {
  background: var(--glass-panel);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
}

/* top-3 comparison cards: same token set as .card, plus a lift on hover */
.top-card {
  background: var(--glass-panel);
  backdrop-filter: saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur));
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), var(--glass-hi);
}
.top-card:hover {
  box-shadow: var(--shadow-3), var(--glass-hi);
}

/* ---- nav + chrome onto the token set ---- */
.nav {
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(var(--blur-strong));
  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-strong));
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-1);
}
.nav-link { box-shadow: var(--shadow-1), var(--glass-hi-soft); }
.nav-link:hover { box-shadow: var(--shadow-2), var(--glass-hi); }
.trust-bar { box-shadow: var(--shadow-1), var(--glass-hi); }

/* ---- tighter, more intentional mobile spacing ---- */
@media (max-width: 640px) {
  .page { padding: 16px 12px 32px; }
  .res-block { margin-bottom: 16px; }
  .section-peek-title { margin: 22px 0 10px; }
  .testimonials { margin: 34px auto; padding: 0 12px; }
  .form-section { padding: 18px 0; }
  .card { padding: 20px 16px; }
  .top-grid { gap: 12px; }
  .more-below { padding: 14px; }
  .roadmap-cta { margin: 20px 0; }
  .cta-row { margin-top: 22px; }
}

/* (The reduced-transparency opaque theme lives in the single consolidated
   @media (prefers-reduced-transparency: reduce) block further up, where it
   re-points the --glass* tokens so every component converts at once.) */


/* ============================================================
   2026-08 PREMIUM COHERENCE PASS
   These are the final shared decisions for public pages. They sit
   immediately before the opaque theme so that reduced transparency
   remains the last, authoritative layer in this file.
   ============================================================ */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease-out) both fadeViewOut; }
::view-transition-new(root) { animation: 220ms var(--ease-out) both fadeViewIn; }
@keyframes fadeViewOut { to { opacity: 0; transform: scale(.992); } }
@keyframes fadeViewIn  { from { opacity: 0; transform: scale(.992); } }

/* Floating functional chrome. The rounded shell creates a clear plane above
   content without putting the content itself inside glass. */
.nav {
  position: sticky;
  top: 10px;
  z-index: 120;
  width: min(calc(100% - 24px), 1220px);
  margin: 10px auto 0;
  padding: 9px 14px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2), var(--glass-hi);
  isolation: isolate;
  transform-origin: top center;
  transition: transform 240ms var(--ease-out);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(238,247,255,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(10,102,194,.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}
.nav.is-compact { transform: translateY(-2px) scale(.985); }
.nav.is-compact::before { opacity: 1; }
.nav > .brand, .nav > .nav-links { position: relative; z-index: 1; }
.nav::after {
  content: "";
  position: absolute;
  inset: 1px 12% auto;
  height: 1px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  z-index: 2;
  pointer-events: none;
}
.brand { min-height: var(--tap); }
.brand-word { letter-spacing: -.025em; }
.nav-link { min-height: var(--tap); padding-block: 7px; }
.lang-menu { top: calc(100% + 8px); border-radius: var(--r-md); }

.page {
  padding-top: clamp(24px, 4vw, 46px);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.footer {
  width: min(calc(100% - 24px), 1220px);
  margin: 0 auto 12px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.muted { line-height: 1.7; }

/* Grounded, text-safe content surfaces. The lower blur is deliberate: long
   text should never depend on whatever happens to be moving behind it. */
.form-section { padding: clamp(18px, 4vw, 42px) 0; }
.form-section .card {
  max-width: 620px;
  background: color-mix(in srgb, var(--glass-solid) 94%, #edf6ff 6%);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-color: rgba(255,255,255,.86);
  padding: clamp(24px, 4vw, 40px);
}
.form-section.wide .card { max-width: 820px; }
.form-section .card > h1,
.form-section .card > h2 { margin: 0 0 8px; letter-spacing: -.025em; }
#reg-form { margin-top: 22px; }

input[type="text"], input[type="number"], select, textarea {
  min-height: 50px;
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-1);
}
textarea { min-height: 104px; }
.field > span, .field-label { letter-spacing: .005em; }
.surface-accent {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid rgba(10,102,194,.18);
  background: linear-gradient(145deg, rgba(232,244,255,.88), rgba(255,255,255,.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.ocr-box { padding: 18px; margin: 24px 0; }
.ocr-label { min-height: 48px; border-radius: var(--r-pill); }

/* One shared progress language across registration, marks, and quiz. */
.flow-steps {
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px 0 24px;
}
.flow-steps .reg-step {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(10,102,194,.12);
  background: rgba(255,255,255,.64);
}
.flow-steps .reg-step.is-complete { color: var(--green); background: #eaf8f1; }
.flow-steps .reg-step.is-complete::before { content: "✓"; margin-inline-end: 6px; font-weight: 800; }
.flow-steps .reg-step-sep { flex: 0 1 24px; height: 1px; border-radius: 0; background: rgba(10,102,194,.2); }

/* Quiz: keep the question as the only visual focal point. */
.quiz-section { max-width: 780px; }
.quiz-steps { margin-top: 0; }
.quiz-progress { height: 5px; background: rgba(10,102,194,.11); }
.quiz-bar { box-shadow: 0 0 18px rgba(52,164,255,.28); }
.q-card {
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--glass-solid) 95%, #edf6ff 5%);
  box-shadow: var(--shadow-3), var(--glass-hi);
}
.q-text { letter-spacing: -.018em; line-height: 1.45; }
.q-opt { min-height: 58px; border-radius: var(--r-md); }
.q-opt::before { font-variant-numeric: tabular-nums; }
.q-why-ico { display: inline-flex; color: var(--blue); }
.q-gate-hint::before { border-radius: 2px; transform: rotate(45deg); }

/* About page: a readable editorial surface hierarchy instead of one tall
   glass rectangle. Standard panels are nearly solid; only the CTA floats. */
.about-shell { width: min(100%, 980px); margin: 0 auto; padding: clamp(16px, 3vw, 34px) 0; }
.about-hero { max-width: 720px; margin: 0 auto clamp(24px, 5vw, 46px); text-align: center; }
.about-hero h2 { margin: 14px 0 10px; font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.035em; }
.about-lead { margin: 0; color: var(--text-soft); font-size: clamp(1.02rem, 2vw, 1.2rem); line-height: 1.8; }
.about-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.about-panel {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid rgba(16,42,80,.09);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow-1), inset 0 1px 0 #fff;
}
.about-panel-main { grid-row: span 2; }
.about-panel h3 { margin: 0 0 12px; color: var(--blue-dark); }
.about-panel p:last-child, .about-panel li:last-child { margin-bottom: 0; }
.about-privacy { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(235,246,255,.96), rgba(255,255,255,.92)); }
.about-cta { display: flex; justify-content: center; margin-top: 24px; }

.error-page { min-height: min(70vh, 640px); align-items: center; }
.error-card { max-width: 500px; padding: clamp(34px, 6vw, 58px); }
.error-mark { display: block; margin: 0 auto 18px; filter: drop-shadow(0 10px 18px rgba(10,102,194,.22)); }

/* Results: keep the dense report grounded while the section navigator remains
   the primary floating glass surface. */
.results-head { max-width: 760px; margin-inline: auto; }
.results-nav { top: 82px; box-shadow: var(--shadow-2), var(--glass-hi-soft); }
.section-peek-title { border-inline-start-width: 3px; letter-spacing: -.018em; }
.hero-major-compact { border-radius: var(--r-lg); box-shadow: 0 24px 56px -20px rgba(0,65,130,.42); }
.more-below { border-style: solid; border-color: rgba(10,102,194,.16); background: rgba(248,252,255,.78); }
.rating-fab.show { animation: none; }
.modal-overlay { background: rgba(8,19,36,.58); }
.modal-dialog {
  transform: translateY(10px) scale(.96);
  transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
  opacity: 0;
}
.modal-overlay.open .modal-dialog { opacity: 1; }

/* Motion refinement: shorter travel, shared curves, and no permanent delay.
   Off-screen reveals still run once through the existing observer. */
.fade-up { animation: fadeUp var(--dur-3) var(--ease-out) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.btn, .hero-cta-btn, .cue-pill, .mb-pill, .q-opt, .top-card, .testi-card {
  touch-action: manipulation;
}
.btn:active:not(:disabled):not([aria-disabled="true"]),
.hero-cta-btn:active, .cue-pill:active, .mb-pill:active { transform: scale(.97); }

@media (hover: none) {
  .nav-link:hover, .brand:hover .brand-mark, .glass-spatial:hover,
  .hero-cta-btn:hover, .cue-pill:hover, .mb-pill:hover,
  .top-card:hover, .testi-card:hover, .rating-fab:hover,
  .star-btn:hover { transform: none; }
  .q-opt:hover:not(:has(input:checked)) { transform: none; }
}

@supports not ((backdrop-filter: opacity(1)) or (-webkit-backdrop-filter: opacity(1))) {
  .nav, .footer, .lang-menu, .results-nav, .modal-dialog, .card, .q-card {
    background: rgba(250,253,255,.97);
  }
}

/* ============================================================
   HOMEPAGE REFINEMENT (2026-08)
   A web approximation of optical glass, not an Apple platform
   material. The hierarchy is intentionally narrow: atmosphere,
   content, evidence, controls, then floating navigation.
   ============================================================ */

/* The environment is richer at the edges while the reading column stays
   calm. Flat gradients avoid the continuously composited blur blobs that
   were removed for performance. */
body:has(.hero-type) {
  background:
    radial-gradient(78vw 58vw at 106% 8%, rgba(31,139,240,.22), transparent 70%),
    radial-gradient(68vw 54vw at -12% 42%, rgba(27,183,219,.12), transparent 72%),
    radial-gradient(90vw 70vh at 50% 28%, rgba(255,255,255,.72), transparent 78%),
    linear-gradient(180deg, #dfeeff 0%, #eaf4fe 44%, #eaf4fe 100%);
}
.hero-type {
  padding-block: clamp(30px, 4.2vh, 54px) clamp(54px, 7vh, 84px);
  background: transparent;
}
.hero-type::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .2;
  background-image:
    repeating-linear-gradient(112deg, rgba(255,255,255,.12) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(18deg, rgba(18,91,159,.028) 0 1px, transparent 1px 9px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
          mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.hero-type::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(64px, 10vw, 128px);
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(to bottom, transparent, rgba(234,244,254,.5));
}
.hero-type .hero-inner { z-index: 3; }
.hero-type .hero-bg {
  inset: -16% -8% -10%;
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at center, #000 38%, rgba(0,0,0,.78) 62%, transparent 91%);
          mask-image: radial-gradient(ellipse 74% 72% at center, #000 38%, rgba(0,0,0,.78) 62%, transparent 91%);
}
.hero-grid { opacity: .72; }
.hero-grid g[stroke] path { stroke-width: 1.65px; }
.hero-grid g[stroke] path:nth-child(1) { opacity: .46; }
.hero-grid g[stroke] path:nth-child(2) { opacity: .3; stroke-width: 1.25px; }
.hero-grid g[stroke] path:nth-child(3) { opacity: .24; stroke-width: 1.1px; }
.hero-grid g[stroke] path:nth-child(4) { opacity: .2; stroke-width: 1.15px; }
.aurora { opacity: .42; }
.aurora-b { opacity: .5; }
.aurora-a {
  background:
    radial-gradient(45% 45% at 30% 30%, rgba(52,164,255,.28), transparent 72%),
    radial-gradient(40% 40% at 75% 60%, rgba(10,102,194,.2), transparent 74%);
}

/* Floating optical chrome. The surface remains visibly influenced by its
   blue environment and uses one low-cost pointer light in ::before. */
body:has(.hero-type) .nav { animation: navSettle 440ms var(--ease-out); }
@keyframes navSettle {
  from { opacity: 0; transform: translateY(-8px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav {
  --nav-light-x: 50%;
  --nav-light-y: 0%;
  background:
    linear-gradient(145deg, rgba(245,251,255,.54), rgba(218,237,255,.34)),
    rgba(239,248,255,.28);
  backdrop-filter: saturate(188%) contrast(1.025) blur(26px);
  -webkit-backdrop-filter: saturate(188%) contrast(1.025) blur(26px);
  border-color: rgba(255,255,255,.72);
  box-shadow:
    0 2px 5px rgba(15,72,126,.07),
    0 18px 44px -20px rgba(8,73,137,.3),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(29,111,188,.08);
  transition: transform 240ms var(--ease-out);
}
.nav::before {
  background:
    radial-gradient(190px circle at var(--nav-light-x) var(--nav-light-y), rgba(255,255,255,.7), transparent 72%),
    linear-gradient(118deg, rgba(255,255,255,.2), rgba(218,239,255,.2) 46%, rgba(255,255,255,.08));
  opacity: .6;
  transition: opacity 180ms ease;
}
.nav.is-pointer-lit::before { opacity: .92; }
.nav.is-compact {
  transform: translateY(-2px) scale(.985);
  background-color: rgba(235,246,255,.56);
  box-shadow:
    0 3px 7px rgba(15,72,126,.09),
    0 20px 48px -18px rgba(8,73,137,.38),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(29,111,188,.1);
}
.nav.is-compact::before { opacity: .86; }
.nav.is-compact.is-pointer-lit::before { opacity: 1; }
.nav::after {
  inset: 1px 9% auto;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98) 48%, transparent);
}
.nav-links {
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), inset 0 0 0 1px rgba(255,255,255,.14);
}
.nav-link {
  background: rgba(255,255,255,.08);
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding-inline: 10px 7px;
}
.nav-ico {
  background: rgba(10,102,194,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.nav-link.lang-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(10,102,194,.92), rgba(52,164,255,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 5px 16px -8px rgba(10,102,194,.62);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    background:
      radial-gradient(80px circle at 50% 0%, rgba(255,255,255,.78), transparent 72%),
      rgba(224,241,255,.46);
    border-color: rgba(255,255,255,.38);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 18px -12px rgba(10,102,194,.5);
  }
}

/* The type remains recognisably Bosala, with tighter optical spacing and a
   cooler luminous accent rather than a neon glow. */
.hero-type .title {
  max-width: 980px;
  margin-inline: auto;
  font-size: clamp(2.15rem, 5vw, 4.12rem);
  line-height: 1.045;
  letter-spacing: -.032em;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
.hero-type .accent-line { margin-top: .075em; }
.hero-type .grad {
  background-image: linear-gradient(94deg, #0757a8 0%, #0a66c2 36%, #2f9dfb 68%, #1478d4 100%);
  filter: drop-shadow(0 6px 14px rgba(19,119,211,.12));
}
.hero-type .title::after {
  width: min(184px, 34%);
  height: 4px;
  margin-top: 13px;
  background: linear-gradient(90deg, transparent, rgba(37,151,245,.64) 12%, #0a66c2 50%, rgba(80,189,255,.72) 86%, transparent);
  box-shadow: 0 1px 5px rgba(38,148,237,.16);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  transform-origin: right center;
}
body.dir-ltr .hero-type .title::after { transform-origin: left center; }
.hero-type .subtitle {
  max-width: 610px;
  line-height: 1.72;
  color: #405465;
}

/* Fast hierarchy-driven first load. Arabic shaping remains intact because
   reveal masks operate on whole words, never individual glyphs. */
.hero-type .wi { animation-duration: 620ms; animation-timing-function: var(--ease-out); }
.hero-type .tl:not(.accent-line) .w:nth-child(1) .wi { animation-delay: .08s; }
.hero-type .tl:not(.accent-line) .w:nth-child(2) .wi { animation-delay: .13s; }
.hero-type .tl:not(.accent-line) .w:nth-child(3) .wi { animation-delay: .18s; }
.hero-type .tl:not(.accent-line) .w:nth-child(4) .wi { animation-delay: .23s; }
.hero-type .tl:not(.accent-line) .w:nth-child(5) .wi { animation-delay: .28s; }
.hero-type .tl:not(.accent-line) .w:nth-child(6) .wi { animation-delay: .33s; }
.hero-type .accent-line .wi {
  animation: wiRise 580ms var(--ease-out) .36s both,
             accentGlow 900ms var(--ease-out) .72s 1 both;
}
.hero-type .title::after { animation: underlineGrow 580ms var(--ease-out) .48s both; }
.hero-type .badge { animation-delay: .08s; }
.hero-type .subtitle { animation-delay: .48s; }
.hero-type .hero-cta { margin-top: 22px; animation-delay: .58s; }
.hero-type .hero-stats { margin-top: 24px; animation-delay: .66s; }
.hero-type .hero-evidence { animation-delay: .74s; }

/* One tactile primary object and one restrained secondary material. */
.hero-cta .btn-primary {
  min-width: 166px;
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(145deg, #0757ad 0%, #0a66c2 43%, #2698f1 100%);
  box-shadow:
    0 4px 8px rgba(5,77,148,.16),
    0 18px 36px -14px rgba(10,102,194,.52),
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -1px 0 rgba(0,50,105,.28);
}
.hero-cta .btn-primary::after {
  inset: 1px 16% auto;
  height: 1px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.76), transparent);
  transform: none;
  animation: none;
}
.hero-cta .btn-primary:hover::after,
body.dir-rtl .hero-cta .btn-primary:hover::after { animation: none; }
.hero-cta .btn-ghost {
  background: linear-gradient(145deg, rgba(255,255,255,.42), rgba(224,241,255,.28));
  border-color: rgba(255,255,255,.76);
  backdrop-filter: saturate(168%) blur(16px);
  -webkit-backdrop-filter: saturate(168%) blur(16px);
  box-shadow: 0 10px 28px -18px rgba(13,82,146,.34), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(10,102,194,.07);
}
@media (hover: hover) and (pointer: fine) {
  .hero-cta .btn-ghost:hover {
    background: linear-gradient(145deg, rgba(255,255,255,.68), rgba(219,239,255,.42));
    border-color: rgba(255,255,255,.94);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -18px rgba(13,82,146,.42), inset 0 1px 0 #fff;
  }
}
.hero-cta .btn-primary:active,
.hero-cta .btn-ghost:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.5); }

/* Metrics are one quiet system, not three mini cards. */
.hero-type .hero-stats {
  width: min(100%, 510px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}
.hero-stats .stat { min-width: 0; padding-inline: clamp(12px, 2.8vw, 26px); }
.hero-stats .stat + .stat { border-inline-start: 1px solid rgba(10,102,194,.13); }
.hero-stats .stat b {
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  color: #075aa9;
}
.hero-stats .stat span { display: block; margin-top: 4px; line-height: 1.4; color: #526577; }

/* Trust and measured social proof now share one evidence plane. The rating is
   no longer a detached white card; it is the lower band of the same surface. */
.hero-evidence {
  width: fit-content;
  max-width: min(100%, 720px);
  margin: 19px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: var(--r-lg);
  background:
    radial-gradient(420px circle at 50% -80%, rgba(255,255,255,.72), transparent 72%),
    linear-gradient(145deg, rgba(255,255,255,.46), rgba(220,239,255,.34));
  backdrop-filter: saturate(176%) blur(20px);
  -webkit-backdrop-filter: saturate(176%) blur(20px);
  box-shadow: 0 2px 5px rgba(16,75,131,.06), 0 18px 42px -24px rgba(8,79,145,.34), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(10,102,194,.06);
}
.hero-evidence .trust-bar {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Preserve the established reveal hook for the existing observer without
   stacking a second transform animation inside the animated evidence shell. */
.hero-evidence .trust-bar.fade-up { animation: none; }
.tb-item {
  min-height: 34px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  color: #175c99;
  transition: background-color 180ms ease, color 180ms ease, transform 140ms var(--ease-out);
}
.tb-icon {
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--blue);
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(10,102,194,.07);
}
.tb-dot { width: 1px; height: 20px; border-radius: 0; background: rgba(10,102,194,.13); }
@media (hover: hover) and (pointer: fine) {
  .tb-item:hover { background: rgba(255,255,255,.42); color: var(--blue-dark); transform: translateY(-1px); }
}
.hero-evidence .social-proof {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 11px 12px 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 1fr);
  gap: 0;
  border: 0;
  border-top: 1px solid rgba(10,102,194,.1);
  border-radius: 0;
  background: rgba(238,247,255,.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
}
.hero-evidence .sp-stat { min-width: 0; padding-inline: 16px; text-align: center; }
.hero-evidence .sp-stat + .sp-stat { border-inline-start: 1px solid rgba(10,102,194,.11); }
.hero-evidence .sp-stat b {
  display: block;
  color: #075aa9;
  font-size: 1.28rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.hero-evidence .sp-stat span { display: block; margin-top: 3px; color: #536678; font-size: .76rem; line-height: 1.35; }
.hero-evidence .sp-rating > span { color: #d39510; font-size: .76rem; letter-spacing: .04em; }

/* The second section grows from the same atmosphere instead of beginning as
   a flat rectangle. Cards remain text-safe and only their shell is glass. */
.testimonials {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: clamp(70px, 9vw, 112px) max(24px, calc((100vw - 1120px) / 2)) clamp(72px, 9vw, 104px);
  background:
    radial-gradient(50vw 30vw at 94% 4%, rgba(58,157,241,.13), transparent 72%),
    radial-gradient(42vw 34vw at 3% 82%, rgba(32,183,216,.08), transparent 72%),
    linear-gradient(180deg, #eaf4fe 0%, rgba(244,249,255,.78) 46%, #edf6ff 100%);
}
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,102,194,.12), transparent);
}
.testimonials-head {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto clamp(28px, 4vw, 42px);
}
.testimonials-head h2 { margin: 0; text-align: center; color: #15334f; letter-spacing: -.025em; }
.testimonials-head > span { height: 1px; background: linear-gradient(90deg, transparent, rgba(10,102,194,.18)); }
.testimonials-head > span:last-child { background: linear-gradient(90deg, rgba(10,102,194,.18), transparent); }
.testi-grid {
  max-width: 1120px;
  margin: 0 auto;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 350px));
  justify-content: center;
}
.testi-card {
  position: relative;
  isolation: isolate;
  min-height: 174px;
  padding: 20px;
  background:
    linear-gradient(155deg, rgba(255,255,255,.88), rgba(244,250,255,.76)),
    var(--glass-solid);
  border-color: rgba(255,255,255,.88);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 5px rgba(16,75,131,.05), 0 18px 42px -28px rgba(8,79,145,.28), inset 0 1px 0 #fff;
}
.testi-card::before {
  content: "";
  position: absolute;
  inset: 1px 14% auto;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
}
.testi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.testi-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #0a66c2, #4eaff8);
  color: white;
  font-weight: 800;
  box-shadow: 0 8px 18px -10px rgba(10,102,194,.58), inset 0 1px 0 rgba(255,255,255,.38);
}
.testi-person { min-width: 0; flex: 1; }
.testi-name { margin: 0; color: #173651; font-size: .92rem; font-weight: 700; line-height: 1.35; }
.testi-grade { margin: 2px 0 0; color: #607181; font-size: .76rem; line-height: 1.3; }
.testi-card .stars-line { flex: 0 0 auto; margin: 0; color: #d39510; font-size: .88rem; letter-spacing: .02em; }
.testi-text { margin: 0; font-style: normal; color: #354b5e; line-height: 1.78; -webkit-line-clamp: 3; }
/* The five slots swap their content in place (main.js), so each one reserves
   the full three clamped lines up front. Without it a shorter review landing
   in a slot would shrink its grid row mid-swap and nudge the page under the
   student's cursor. */
.testi-text { min-height: calc(1.78em * 3); }
@media (hover: hover) and (pointer: fine) {
  .testi-card:hover {
    transform: translateY(-3px);
    background: linear-gradient(155deg, rgba(255,255,255,.96), rgba(239,248,255,.84));
    box-shadow: 0 4px 8px rgba(16,75,131,.06), 0 24px 50px -28px rgba(8,79,145,.4), inset 0 1px 0 #fff;
  }
}

/* Extremely small scroll depth, progressive enhancement only. */
@supports (animation-timeline: scroll()) {
  .hero-type .hero-inner {
    animation: heroContentDrift linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 520px;
  }
  @keyframes heroContentDrift { to { transform: translate3d(0, -8px, 0); } }
}

@media (max-width: 768px) {
  .hero-type { padding: 34px 18px 66px; }
  .hero-type .title { font-size: clamp(2.18rem, 9vw, 3.35rem); line-height: 1.075; }
  .hero-type .subtitle { max-width: 36rem; font-size: 1rem; line-height: 1.68; }
  .hero-type .hero-cta { gap: 10px; }
  .hero-type .hero-stats { width: min(100%, 430px); }
  .hero-stats .stat { padding-inline: 10px; }
  .hero-stats .stat span { font-size: .78rem; }
  .hero-evidence { width: min(100%, 560px); border-radius: var(--r-md); }
  .hero-evidence .trust-bar { gap: 5px; padding: 9px 8px; flex-wrap: nowrap; }
  .hero-evidence .tb-item { gap: 5px; padding-inline: 5px; font-size: .75rem; white-space: nowrap; }
  .hero-evidence .tb-icon { width: 23px; height: 23px; }
  .hero-evidence .tb-dot { display: block; height: 17px; }
  .hero-evidence .social-proof { grid-auto-columns: minmax(0, 1fr); padding-inline: 5px; }
  .hero-evidence .sp-stat { padding-inline: 7px; }
  .testimonials { padding-inline: 18px; }
  .testimonials-head { gap: 12px; }
  .testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .hero-type { padding-inline: 14px; }
  .hero-type .title { font-size: clamp(1.78rem, 7.4vw, 2.05rem); }
  .hero-type .hero-cta { display: grid; grid-template-columns: 1fr; width: min(100%, 330px); margin-inline: auto; }
  .hero-type .hero-cta .btn { width: 100%; }
  .hero-evidence .trust-bar { flex-wrap: wrap; row-gap: 4px; }
  .hero-evidence .tb-dot { display: none; }
  .hero-evidence .tb-item { flex: 1 1 auto; justify-content: center; }
  .hero-evidence .sp-stat b { font-size: 1.12rem; }
  .hero-evidence .sp-stat span { font-size: .7rem; }
  .testimonials { padding: 66px 14px 76px; }
  .testimonials-head { grid-template-columns: 1fr; }
  .testimonials-head > span { display: none; }
  .testimonials-head h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .testi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 350px) {
  .nav-link[href] { padding-inline: 7px; }
  .nav-ico { width: 24px; height: 24px; }
  .hero-type .title { font-size: 1.5rem; }
  .hero-stats .stat { padding-inline: 6px; }
  .hero-stats .stat b { font-size: 1.4rem; }
  .hero-evidence .tb-item { font-size: .71rem; }
}

@media (hover: none) {
  .testi-card:hover {
    background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(244,250,255,.76)), var(--glass-solid);
    box-shadow: 0 2px 5px rgba(16,75,131,.05), 0 18px 42px -28px rgba(8,79,145,.28), inset 0 1px 0 #fff;
  }
}

@media (prefers-contrast: more) {
  :root { --text-soft: #34414c; --glass-edge: rgba(10,38,70,.38); }
  .nav, .footer, .card, .q-card, .q-opt, .about-panel, .results-nav, .hero-evidence, .testi-card { border-color: var(--glass-edge); }
}

@media (max-width: 720px) {
  .nav { top: 8px; width: calc(100% - 16px); margin-top: 8px; padding: 6px 8px; }
  .page { padding-top: 18px; }
  .footer { width: calc(100% - 16px); margin-bottom: 8px; }
  .flow-steps { gap: 5px; margin-bottom: 20px; }
  .flow-steps .reg-step { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: .76rem; white-space: nowrap; }
  .flow-steps .reg-step-sep { display: none; }
  .about-grid { grid-template-columns: 1fr; }
  .about-panel-main, .about-privacy { grid-row: auto; grid-column: auto; }
  .about-hero { text-align: start; }
  .results-nav { top: 72px; }
  html { scroll-padding-top: 126px; }
  .res-block, #roadmap-card { scroll-margin-top: 126px; }
  .rating-fab {
    width: 48px; height: 48px; padding: 0; justify-content: center;
    border-radius: 50%;
  }
  .rating-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 380px) {
  .flow-steps .reg-step { font-size: .7rem; padding-inline: 5px; }
  .form-section .card { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .01ms; }
  .fade-up { animation: fadeOnly 160ms ease both; }
  .nav, .nav.is-compact { transform: none; }
  body:has(.hero-type) .nav,
  .hero-type .hero-bg,
  .hero-type .hero-inner { animation: none; transform: none; }
  .hero-spotlight { display: none; }
  @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
}

/* ================================================================
   Decision V1 lab
   Targeted extension of Bosala's existing web glass system.
   ================================================================ */
.beta-page {
  width: min(1120px, 100%);
  margin-inline: auto;
  padding: 46px 0 70px;
}

.beta-hero {
  max-width: 820px;
  margin-bottom: 24px;
}
.beta-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.5vw, 3.7rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.beta-hero > p {
  max-width: 68ch;
  margin: 0;
  color: var(--text-soft);
  line-height: 1.75;
}

.beta-warning {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-inline-start: 4px solid var(--orange);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--glass-solid) 90%, #fff3e0 10%);
  color: #5d451e;
  line-height: 1.7;
}

.beta-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(10, 102, 194, .2);
  border-radius: var(--r-md);
  background: var(--glass-panel);
  box-shadow: var(--shadow-1), var(--glass-hi-soft);
}
.beta-invite span { color: var(--blue); font-size: .75rem; font-weight: 800; }
.beta-invite h3 { margin: 4px 0 4px; font-size: 1.05rem; }
.beta-invite p { margin: 0; color: var(--text-soft); font-size: .86rem; line-height: 1.55; }
.beta-invite .btn { white-space: nowrap; }

.beta-page { max-width: 1040px; }
.beta-state {
  display: grid;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 22px;
}
.beta-state small { color: var(--text-soft); font-weight: 700; }
.beta-state h2 { margin: 6px 0 0; font-size: 1.35rem; }
.beta-state p { margin: 0; line-height: 1.65; color: var(--text-soft); }
.beta-ranking {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.beta-path {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
}
.beta-rank {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue);
  color: white;
  font-weight: 800;
}
.beta-path-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.beta-path-heading h2 { margin: 0 0 5px; font-size: 1.35rem; line-height: 1.35; }
.beta-path-heading p { margin: 0; color: var(--text-soft); font-size: .88rem; }
.beta-path-heading small { color: #76551d; font-weight: 700; }
.beta-signal {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: end;
}
.beta-signal b { display: block; color: var(--blue); font-size: 1.8rem; line-height: 1; }
.beta-signal span { display: block; margin-top: 5px; color: var(--text-soft); font-size: .72rem; }
.beta-signal-note { margin: 12px 0 16px; color: var(--text-soft); font-size: .78rem; }
.beta-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.beta-details section {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--glass-solid) 94%, #eaf3fd 6%);
}
.beta-details h3,
.beta-offerings h3 { margin: 0 0 8px; font-size: .87rem; }
.beta-details ul { margin: 0; padding-inline-start: 18px; color: var(--text-soft); font-size: .82rem; line-height: 1.65; }
.beta-specialization { margin: 0 0 14px; font-size: .86rem; }
.beta-offerings {
  padding-top: 14px;
  border-top: 1px solid rgba(16, 65, 112, .12);
}
.beta-offerings p { margin: 0 0 4px; color: var(--text-soft); font-size: .86rem; line-height: 1.6; }
.beta-offerings small { color: #69747d; }
.beta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

@media (max-width: 760px) {
  .beta-page { padding: 30px 0 54px; }
  .beta-invite,
  .beta-state { grid-template-columns: 1fr; }
  .beta-invite .btn { justify-self: start; }
  .beta-details { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .beta-hero h1 { font-size: 2rem; }
  .beta-actions { display: grid; grid-template-columns: 1fr; }
  .beta-actions .btn { width: 100%; }
  .beta-path { grid-template-columns: 1fr; padding: 18px; }
  .beta-rank { width: 36px; height: 36px; }
  .beta-path-heading { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .beta-signal { text-align: start; }
}


/* Phone layout: one reading column and progressive detail, using the same
   glass tokens as desktop. Keep the opaque theme last in this file. */
.major-details { min-width: 0; }
.major-details > summary {
  color: var(--blue-dark);
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  padding-block: 12px;
  min-height: 44px;
}
.major-details > summary::marker { color: var(--blue); }
.major-details-body > :first-child { margin-top: 4px; }
.major-details-body { overflow-wrap: anywhere; }

/* Question progress moves on the compositor; its numerical value and
   completion rules still come from the existing quiz. */
.quiz-bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
body.dir-rtl .quiz-bar { transform-origin: right; }
@keyframes optionReveal {
  from { opacity: .3; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .q-card { animation: fadeUp 220ms var(--ease-out); }
  .q-opt-label {
    animation: optionReveal 200ms var(--ease-out) var(--option-delay, 0ms) backwards;
  }
  #branch-wrap:not([hidden]) { animation: optionReveal 220ms var(--ease-out); }
  .major-details > summary { transition: opacity var(--dur-1) var(--ease-out); }
  .major-details > summary:active { opacity: .65; }
}

@media screen and (max-width: 720px) {
  .page { padding-inline: 16px; }
  .nav { min-height: 60px; }
  .nav .brand-tagline { display: none; }
  .nav-links { gap: 8px; }
  .nav-link { min-height: 44px; }
  .hero-type { padding: 26px 4px 40px; min-height: auto; }
  .hero-type .badge { max-width: 100%; font-size: .72rem; padding: 7px 12px; }
  .hero-type .title {
    font-size: clamp(1.45rem, 6.7vw, 2.8rem);
    line-height: 1.3;
    letter-spacing: -.025em;
    margin-bottom: 16px;
  }
  .hero-type .title .tl { white-space: normal; }
  .hero-type .subtitle { font-size: .95rem; line-height: 1.9; max-width: 34rem; }
  .hero-type .hero-cta { gap: 8px; margin-top: 24px; }
  .hero-type .hero-cta .btn-primary { min-height: 54px; }
  .hero-type .hero-cta .btn-ghost {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; min-height: 44px;
  }
  .hero-type .hero-stats { margin-top: 28px; gap: 0; padding-block: 12px; }
  .hero-type .hero-stats .stat { min-width: 0; padding-inline: 8px; }
  .hero-type .hero-stats .stat b { font-size: 1.65rem; }
  .hero-type .hero-stats .stat span { font-size: .74rem; }
  .hero-evidence { margin-top: 22px; width: 100%; }
  .hero-evidence .trust-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 8px; }
  .hero-evidence .tb-item { flex-direction: column; text-align: center; white-space: normal; justify-content: start; font-size: .72rem; line-height: 1.65; padding: 0; }
  .hero-evidence .tb-dot { display: none; }
  /* The shorthand here used to end in `0`, which zeroed the side gutter this
     block never meant to touch - it is the last .testimonials padding rule in
     the file, so it also beat the 14px and 18px the ≤540px and ≤768px blocks
     set. The cards then ran edge to edge on every phone and their 24px corners
     were clipped by the viewport. Vertical value unchanged. */
  .testimonials { padding: 36px 14px; }
  .testi-card { padding: 20px; }

  .form-section, .quiz-section { margin-top: 8px; }
  .form-section .card { padding: 24px 18px; }
  .form-section h1, .form-section h2 { font-size: 1.55rem; line-height: 1.5; }
  .form { gap: 22px; }
  .field { min-width: 0; }
  .field > span { line-height: 1.65; }
  input[type="text"], input[type="number"], select, textarea { font-size: 16px; }
  .reg-steps { flex-wrap: nowrap; gap: 6px; margin-block: 20px 26px; }
  .reg-step { min-width: 0; flex: 1 1 0; padding: 8px 4px; font-size: .73rem; text-align: center; }
  .reg-step-sep { display: none; }
  .branch-grid { grid-template-columns: 1fr; gap: 10px; }
  .branch-card { padding: 14px; }
  .ocr-box { margin-block: 22px; padding: 14px; }
  .ocr-label { line-height: 1.7; }
  .grid-grades { grid-template-columns: 1fr; gap: 14px; }
  .grid-grades .field { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: center; }
  .grid-grades .span-2 { grid-column: 1 / -1; margin-top: 12px; }
  .grid-grades input { min-width: 0; text-align: center; }

  .quiz-section { padding-bottom: 20px; }
  .quiz-meta { margin-block: 8px 14px; }
  .q-card { padding: 22px 16px 16px; }
  .q-text { font-size: 1.15rem; line-height: 1.85; margin-bottom: 16px; }
  .q-why { padding: 10px 12px; font-size: .84rem; line-height: 1.8; }
  .q-options { gap: 12px; margin-bottom: 18px; }
  .q-opt { gap: 10px; padding: 14px 12px; min-height: 60px; }
  .q-opt::before { width: 28px; height: 28px; font-size: .75rem; }
  .q-opt-label { font-size: .96rem; line-height: 1.75; }
  .q-nav {
    position: static; margin: 20px 0 0; padding: 14px 0 0;
    background: transparent; box-shadow: none; gap: 12px;
    border-top: 1px solid var(--border);
  }
  .q-nav .btn { min-height: 50px; }

  .results-head { margin-bottom: 20px; }
  .results-head h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
  .confidence-badge { flex-direction: row; padding: 14px; gap: 14px; border-radius: var(--r-lg); }
  .conf-ring { flex-shrink: 0; }
  .conf-text { text-align: start !important; min-width: 0; }
  .conf-text b { line-height: 1.8; }
  .conf-text small { line-height: 1.7; }
  .disclaimer { line-height: 1.8; margin-bottom: 24px; }
  .results-nav { top: 78px; margin-inline: 0; padding: 5px; border-radius: var(--r-md); gap: 4px; }
  .rnav-link { min-height: 44px; padding: 8px 12px; font-size: .82rem; }
  .results-section .res-block { margin-bottom: 36px; }
  .hero-major-compact { padding: 24px 20px; gap: 22px; }
  .hero-major-name { font-size: 1.65rem; line-height: 1.6; overflow-wrap: anywhere; }
  .hero-major-left, .hero-major-right { min-width: 0; }
  .hero-reasons { gap: 8px; }
  .hero-reasons .hr-chip { font-size: .8rem; }
  .big-ring { width: 112px; height: 112px; }
  .big-ring-label b { font-size: 1.65rem; }
  .big-ring-label small { font-size: .72rem; }
  .more-below { display: none; } /* Same destinations remain in the section nav. */
  .section-peek-title { margin-block: 30px 18px; font-size: 1.2rem; line-height: 1.65; }
  .results-section .card { padding: 20px 18px; }
  .results-section .report-details { padding: 0; }
  .why-grid { grid-template-columns: 1fr; gap: 18px; }
  .top-grid { gap: 16px; }
  .top-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 14px; padding: 18px; text-align: start; }
  .top-card .top-score { grid-column: 1; grid-row: 1 / 3; margin: 0; width: 72px; height: 72px; }
  .top-card .ring { width: 72px; height: 72px; }
  .top-card .ring-label b { font-size: 1.05rem; }
  .top-card .ring-label small { font-size: .65rem; }
  .top-card > h3 { grid-column: 2; margin: 2px 0; font-size: 1.06rem; line-height: 1.7; }
  .top-card > .major-details { display: contents; }
  .top-card > .major-details > summary { grid-column: 2; align-self: start; padding-block: 8px; }
  .major-details-body { grid-column: 1 / -1; padding-top: 8px; }
  .major-details:not([open]) > .major-details-body { display: none; }
  .section-next { gap: 14px; padding: 18px; }
  .report-details .rep-title { flex-wrap: wrap; line-height: 1.8; min-width: 0; }
  .report-status { white-space: normal; }
  .radar-box { max-width: 100%; }
  .results-section .cta-row {
    position: static; margin: 26px 0 0; padding: 0; border: 0;
    background: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; flex-wrap: wrap;
  }
  .cta-row .btn { white-space: normal; }
  .rating-fab { display: none; } /* Rating remains in the nav and its own section. */
  .modal-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .footer { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-bar { transition: none; }
  .q-opt-label, #branch-wrap { animation: none; }
}

/* One shared glass shell for branding, language, and report sections. */
html:has(.nav-with-results) { scroll-padding-top: 96px; }
.nav-with-results ~ .page .res-block,
.nav-with-results ~ .page #roadmap-card { scroll-margin-top: 0; }
.nav-with-results {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.nav-with-results > .brand { grid-column: 1; grid-row: 1; }
.nav-with-results > .nav-links { grid-column: 3; grid-row: 1; z-index: 40; }
.nav-with-results > .results-nav {
  position: relative;
  top: auto;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  justify-content: safe center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-with-results .brand-tagline { display: none; }
@media (max-width: 1000px) {
  html:has(.nav-with-results) { scroll-padding-top: 142px; }
  .nav-with-results { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; border-radius: var(--r-lg); }
  .nav-with-results > .nav-links { grid-column: 2; }
  .nav-with-results > .results-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    border-top: 1px solid var(--glass-edge);
    padding-top: 5px;
  }
  .nav-with-results .rnav-link { min-height: 44px; padding: 8px 12px; }
}

/* Scroll reveal: one material stretches, then its controls settle into it.
   Only the backing surface scales; labels keep their original proportions. */
.nav-morph-surface { display: none; }
.results-nav-trigger { display: block; height: 1px; pointer-events: none; }
.nav-with-results.is-scroll-aware {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-with-results.is-scroll-aware::before,
.nav-with-results.is-scroll-aware::after { display: none; }
.is-scroll-aware > .nav-morph-surface {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--glass);
  backdrop-filter: saturate(188%) blur(var(--blur-strong));
  -webkit-backdrop-filter: saturate(188%) blur(var(--blur-strong));
  box-shadow: var(--shadow-2), var(--glass-hi);
  transform-origin: center top;
  transition: transform 300ms var(--ease-drawer);
}
.nav-with-results.is-scroll-aware > .results-nav {
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), transform 220ms var(--ease-drawer), visibility 0s 220ms;
}
.nav-with-results.is-unfolded > .results-nav {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-out) 45ms, transform 300ms var(--ease-drawer), visibility 0s;
}
@media (max-width: 1000px) {
  .nav-with-results.is-scroll-aware { grid-template-columns: minmax(0, 1fr) auto; }
  .nav-with-results.is-scroll-aware > .results-nav {
    position: absolute;
    top: 100%;
    inset-inline: 8px;
    grid-column: auto;
    grid-row: auto;
    height: 56px;
    padding: 4px 0 8px;
    align-items: center;
  }
  .is-scroll-aware.is-unfolded > .nav-morph-surface {
    transform: scaleY(var(--nav-extension-scale, 1.9));
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-scroll-aware > .nav-morph-surface,
  .nav-with-results.is-scroll-aware > .results-nav {
    transition: none;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  /* ------------------------------------------------------------------
     THE OPAQUE THEME — a first-class design, not a degraded one.

     This is not a rare edge case. On Windows it fires whenever
     Settings > Personalization > Colors > "Transparency effects" is OFF
     (registry: HKCU\...\Themes\Personalize\EnableTransparency = 0), and
     Chrome/Edge honour it. Plenty of students run with it off — on low-end
     hardware, in VMs, or because it is off by default in LTSC/N builds — so
     for them NONE of the frost above ever renders.

     So instead of flattening everything to one grey wash, the whole depth
     system is rebuilt without translucency: solid near-white fills, a soft
     vertical sheen for the "lit glass" read, the same bright 1px edge, and
     the same layered blue-tinted shadows. Backdrop blur is dropped (it has
     nothing to blur once fills are opaque) but radius, shadow, motion and
     hierarchy are identical. The page should look deliberately designed in
     both modes, not obviously missing an effect in one.
     ------------------------------------------------------------------ */

  /* opaque re-points of the fill tokens: every component that consumes
     var(--glass*) converts automatically, no per-component overrides */
  :root {
    --glass:       #f5f9fe;
    --glass-panel: #fbfdff;
    --glass-solid: #ffffff;
    --glass-edge:  #dbe7f5;
    --glass-hi:      inset 0 1px 0 #ffffff;
    --glass-hi-soft: inset 0 1px 0 #ffffff;
  }

  /* blur has nothing to act on once fills are opaque — drop it everywhere
     rather than paying the compositing cost for an invisible effect */
  .nav, .footer, .card, .glass, .q-card, .q-opt, .top-card, .testi-card,
  .confidence-badge, .rm-section, .modal-dialog, .ranked-list ol,
  .social-proof, .cta-row, .results-nav, .more-below, .trust-bar, .hero-evidence,
  .lang-menu, .nav-link, .btn-ghost, .modal-overlay, .badge, .catalog-list,
  .beta-invite,
  input[type="text"], input[type="number"], select, textarea {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* the sheen that sold the glass edge, rebuilt as an opaque gradient */
  .card, .q-card, .top-card, .testi-card {
    background-image: linear-gradient(170deg, #ffffff 0%, #f7fbff 100%);
  }
  .card::before { opacity: .5; }

  .badge { background: #eaf2fd; }
  .btn-ghost { background: #f2f7fd; border-color: rgba(10,102,194,.32); }
  /* A gradient is not transparency — the CTA keeps its liquid-pill gradient
     here. (It used to be flattened to a single var(--blue), which was only
     ever needed to escape an illegible #eaf2fd fill under white text.) */
  .btn-primary {
    background-image: linear-gradient(135deg, var(--blue) 0%, #2f9dfb 55%, #34a4ff 100%);
  }
  .modal-overlay { background: rgba(12,22,40,.62); }
  /* Reduced transparency removes blur, not motion. Keep the ambient field
     visible so Windows users do not get a visually static welcome hero. */
  .aurora { opacity: .34; }

  /* selected quiz answer: keep the "lit" read with an opaque blue tint */
  .q-opt:has(input:checked) {
    background-image: linear-gradient(135deg, #e2effc 0%, #d5e8fb 100%);
  }

  /* Components that hardcode their own rgba() fill instead of consuming the
     --glass* tokens, so the token re-point above cannot reach them. These are
     the reason this whole block lives at the end of the file. */
  .nav          { background: #f5f9fe; border-bottom-color: #dbe7f5; }
  .nav::before  { display: none; }
  .is-scroll-aware > .nav-morph-surface {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-link     { background: #ffffff; border-color: #dbe7f5; }
  .lang-menu    { background: #ffffff; border-color: #dbe7f5; }
  .trust-bar    { background: #ffffff; border-color: #dbe7f5; }
  .hero-evidence { background: #ffffff; border-color: #dbe7f5; }
  .hero-evidence .trust-bar { background: transparent; }
  .hero-evidence .social-proof { background: #f3f8fe; }
  .results-nav  { background: #f5f9fe; border-color: #dbe7f5; }
  .more-below   { background: #f7fbff; }
  .reg-step     { background: #f5f9fe; }
  .footer       { background: #f5f9fe; border-top-color: #dbe7f5; }
  .fb-modal textarea,
  .fb-modal input[type="text"] { background: #ffffff; }
  .q-opt:hover  { background: #f2f8ff; }

  /* mobile sticky bars: opaque, or the content scrolling underneath shows
     through at exactly the moment the bar needs to stay readable */
  @media (max-width: 640px) {
    .cta-row { background: #ffffff; border-top-color: #dbe7f5; }
    .q-nav   { background: #ffffff; }
  }
}