/* ===========================
   Bosala — LinkedIn-style UI
   =========================== */

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

* { 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: all .2s ease;
}
.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: all .2s 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 .35s cubic-bezier(.4,0,.2,1) both;
}
.lang-opt .opt-label {
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: visible;
}
@keyframes langOpenSmooth {
  0%   { opacity: 0; transform: scale(.9)  translateY(-8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}
.lang-opt {
  opacity: 0;
  animation: langItemIn .35s cubic-bezier(.4,0,.2,1) both;
  border-radius: 10px;
}
.lang-opt:nth-child(1) { animation-delay: .12s; }
.lang-opt:nth-child(2) { animation-delay: .22s; }
@keyframes langItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.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: 20px; color: var(--text-soft); font-size: .9rem; border-top: 1px solid var(--border); background: white; }

/* ===== 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%);
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(130px); opacity: .45;
  animation: float 14s ease-in-out infinite;
  mix-blend-mode: multiply;
}
.orb-1 { width: 620px; height: 620px; background: #34a4ff; top: -180px; right: -180px; }
.orb-2 { width: 520px; height: 520px; background: #ff8a3d; bottom: -180px; left: -150px; animation-delay: -4s; opacity: .35; }
.orb-3 { width: 460px; height: 460px; background: #6df0c2; top: 25%;  right: 35%; animation-delay: -8s; opacity: .3; }

@keyframes float {
  0%, 100% { transform: translateY(0)   translateX(0); }
  50%      { transform: translateY(-40px) translateX(30px); }
}

/* ===== 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;
  opacity: .8; /* redesign v2: raised from .55 so the network reads clearly */
}
.hg-dot { animation: hgPulse 3s 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; r: 3; }
  50%      { opacity: 1;  r: 5; }
}
.hero-grid g[stroke] path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: hgDraw 4s 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: 0; }
  50%  { opacity: 1; }
  to   { stroke-dashoffset: 0;    opacity: .4; }
}

.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 - blue radial/conic mesh, transform-only drift, no blur */
.aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  border-radius: 50%;
  opacity: .55;
}
.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 26s 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 34s linear infinite reverse;
  opacity: .7;
}
@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::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; gap: 8px;
  padding: 10px 22px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  font-family: inherit;
}
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--blue), #34a4ff);
  color: white;
  box-shadow:
    0 6px 20px rgba(10,102,194,.35),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-dark), var(--blue));
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(10,102,194,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
  text-decoration: none;
}
.btn-ghost {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--blue);
  border: 1.5px solid rgba(10,102,194,.4);
}
.btn-ghost:hover { background: rgba(255,255,255,.7); text-decoration: none; }
.link-btn { background: none; border: none; color: var(--blue); font: inherit; cursor: pointer; }

/* ===== FORMS / CARDS — Liquid Glass ===== */
.card {
  background: rgba(255, 255, 255, .55);
  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),
    inset 0 -1px 0 0 rgba(255, 255, 255, .2);
  position: relative;
  overflow: hidden;
}
/* shimmer highlight on top edge (liquid glass reflection) */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,255,255,.4) 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 100%);
}
.glass {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}

.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: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: .9rem; color: var(--text-soft); font-weight: 500; }
input[type="text"], input[type="number"], select, textarea {
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue);
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 4px rgba(10,102,194,.15);
}
input.filled { background: #f0f9f4; border-color: var(--green); }
.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: all .15s ease;
  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: 10px; margin-bottom: 28px; }
.q-opt {
  position: relative;   /* anchors the visually-hidden (focusable) radio */
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px;
  background: rgba(255,255,255,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,.65);
  border-radius: 16px;
  cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:
    0 4px 14px -4px rgba(31, 38, 135, .1),
    inset 0 1px 0 rgba(255,255,255,.7);
  position: relative;
  counter-increment: qopt;
}
.q-opt::before {
  content: counter(qopt, upper-alpha);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(10,102,194,.12);
  color: var(--blue);
  font-weight: 800; font-size: .85rem;
  flex-shrink: 0;
  transition: all .2s ease;
}
/* 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:hover::before { background: rgba(10,102,194,.22); transform: scale(1.08); }
.q-opt:has(input:checked)::before { background: var(--blue); color: white; }
.q-opt input { accent-color: var(--blue); }
.q-opt:hover { border-color: var(--blue); background: var(--blue-light); transform: translateX(4px); }
.q-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-light); font-weight: 600; }

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 cubic-bezier(.34,1.56,.64,1),
              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 cubic-bezier(.34,1.56,.64,1),
              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 .28s cubic-bezier(.34,1.56,.64,1),
              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: all .15s ease;
}
.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;
}
.testi-card {
  background: white; padding: 22px; border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.testi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.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(.9);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.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 .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  from { transform: scale(0) rotate(-90deg); }
  to   { transform: scale(1) rotate(0); }
}

/* 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: white; padding: 14px 20px; border-radius: 999px;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  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: white; border: 1px solid var(--border);
  border-radius: var(--radius-sm); margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.rm-section[open] { box-shadow: var(--shadow-sm); }
.rm-section summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 1rem; color: var(--text);
  background: linear-gradient(135deg, #f8fafc, white);
}
.rm-section summary::-webkit-details-marker { display: none; }
.rm-section summary:hover { background: var(--blue-light); }
.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; }
}

/* ===== 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;
  }
  /* 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. */
@media (prefers-reduced-transparency: reduce) {
  .aurora { opacity: .4; }
  .badge {
    background: #eaf2fd;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .btn-primary {
    background: var(--blue);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ============================================================
   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;
}

/* ---- 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 .35s cubic-bezier(.34,1.56,.64,1),
              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; }
.modal-dialog {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 22px;
  padding: 30px 28px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
  transform: translateY(14px) scale(.96);
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
}
.modal-overlay.open .modal-dialog { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  width: 36px; height: 36px; 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);
  padding: clamp(40px, 6vh, 88px) clamp(22px, 5vw, 64px);
  box-sizing: border-box;
  background:
    radial-gradient(55% 60% at 84% -10%, rgba(6,182,212,.14), transparent 65%),
    radial-gradient(125% 95% at 50% -12%, #bfe0ff 0%, #dcedff 45%, #eef5fc 100%);
}
@media (min-width: 1000px) {
  .hero-type { min-height: 88vh; 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 -- */
.hero-type .title {
  font-size: clamp(2.6rem, 7.2vw, 5.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  margin-bottom: 20px;
}
.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 */
.hero-type .tl:not(.accent-line) .w:nth-child(1) .wi { animation-delay: .18s; }
.hero-type .tl:not(.accent-line) .w:nth-child(2) .wi { animation-delay: .30s; }
.hero-type .tl:not(.accent-line) .w:nth-child(3) .wi { animation-delay: .42s; }
.hero-type .tl:not(.accent-line) .w:nth-child(4) .wi { animation-delay: .54s; }
.hero-type .tl:not(.accent-line) .w:nth-child(5) .wi { animation-delay: .66s; }
.hero-type .tl:not(.accent-line) .w:nth-child(6) .wi { animation-delay: .78s; }

/* the accent line lands last, then glows */
.hero-type .accent-line .wi {
  animation: wiRise .95s cubic-bezier(.16,1,.3,1) .95s both,
             accentGlow 1.7s ease-out 2s 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: 4px; width: min(240px, 42%);
  margin: 18px auto 0;
  border-radius: 999px;
  transform: scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, var(--blue), #34a4ff 60%, transparent);
  animation: underlineGrow 1s cubic-bezier(.16,1,.3,1) 1.4s 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 -- */
.hero-type .badge {
  margin-bottom: 20px;
  animation-delay: .05s;
}
.hero-type .subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 4px auto 0;
  animation-delay: 1.15s;
}
.hero-type .hero-cta {
  justify-content: center;
  margin: 32px 0 0;
  animation-delay: 1.32s;
}
.hero-type .hero-stats {
  justify-content: center;
  margin-top: 28px;
  gap: clamp(28px, 5vw, 52px);
  animation-delay: 1.46s;
}
.hero-type .trust-bar {
  margin-inline: auto;
  margin-top: 24px;
  animation-delay: 1.58s;
}
.hero-type .social-proof {
  justify-content: center;
  animation-delay: 1.66s;
}

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