/* ==========================================================================
   Studienkompass — German Public University Eligibility Checker
   Design tokens
   Palette: Ink #0B0B0D · Paper #FAFAF9 · Flag Red #C9202D · Flag Gold #D4A72C
            Blue accent #3D7EFF · Slate grays for structure
   Type: Space Grotesk (display) · Inter (body/UI) · JetBrains Mono (data/stats)
   ========================================================================== */

:root{
  --ink:#0B0B0D;
  --ink-soft:#141417;
  --paper:#FAFAF9;
  --red:#C9202D;
  --red-soft:rgba(201,32,45,.14);
  --gold:#D4A72C;
  --gold-soft:rgba(212,167,44,.16);
  --blue:#3D7EFF;
  --blue-soft:rgba(61,126,255,.14);
  --green:#1F9D6B;
  --green-soft:rgba(31,157,107,.14);
  --amber:#C98A1C;
  --amber-soft:rgba(201,138,28,.16);
  --eyebrow:#D4A72C;

  --brand-gradient:linear-gradient(115deg, var(--red) 0%, var(--gold) 52%, var(--blue) 100%);
  --brand-gradient-hover:linear-gradient(115deg, #A3141F 0%, #B68C22 52%, #2E63D6 100%);
  --chamfer:14px;
  --chamfer-lg:18px;
  --chamfer-sm:10px;

  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;

  --ease:cubic-bezier(.22,1,.36,1);
  --container:1240px;

  /* dark theme (default) */
  --bg:#0A0A0C;
  --bg-elevated:#111114;
  --surface:rgba(255,255,255,.045);
  --surface-strong:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.16);
  --text:#F3F3F1;
  --text-dim:#A8A8AC;
  --text-faint:#68686E;
  --shadow:0 20px 60px -20px rgba(0,0,0,.6);
  --card-bg:#151519;
  --card-border:rgba(255,255,255,.14);
  --footer-bg:#08080A;
}

html[data-theme="light"]{
  --bg:#F7F6F2;
  --bg-elevated:#FFFFFF;
  --surface:rgba(255,255,255,.82);
  --surface-strong:rgba(255,255,255,.95);
  --border:rgba(11,11,13,.10);
  --border-strong:rgba(11,11,13,.20);
  --text:#131315;
  --text-dim:#4A4A4F;
  --text-faint:#6E6E74;
  --shadow:0 20px 50px -22px rgba(20,20,25,.18);
  --eyebrow:#8A5A00;
  --gold:#8A5A00;
  --amber:#96650F;
  --card-bg:#FFFFFF;
  --card-border:rgba(17,17,20,.14);
  --footer-bg:#F0EEE6;
}
html[data-theme="light"] .float-shape{opacity:.22}
html[data-theme="light"] .hero-grid{opacity:.3}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s var(--ease), color .35s var(--ease);
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(650px 420px at 12% -5%, var(--red-soft), transparent 60%),
    radial-gradient(600px 500px at 100% 10%, var(--gold-soft), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, var(--blue-soft), transparent 55%);
}
html[data-theme="light"] body::before{opacity:.5}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.08}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--eyebrow);margin-bottom:14px;font-weight:700;
}
section{padding:96px 5vw;max-width:var(--container);margin:0 auto}
.section-head{max-width:640px;margin-bottom:48px}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px}
.section-sub{color:var(--text-dim);font-size:1.02rem}

.glass{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
}

/* ---------- buttons ---------- */
/* Signature "chamfered" shape — corners are cut at an angle instead of the
   generic rounded pill, so every button reads as Studienkompass rather
   than a template default. Scaled per size variant below. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;font-weight:600;font-size:.92rem;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  transition:transform .22s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), filter .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--brand-gradient);background-size:160% 160%;background-position:0% 50%;color:#fff;box-shadow:0 8px 24px -8px rgba(201,32,45,.5)}
.btn-primary:hover{background-position:100% 50%;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(201,32,45,.55)}
.btn-ghost{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--red);background:var(--red-soft);color:var(--text);transform:translateY(-2px)}
.btn-lg{--chamfer:var(--chamfer-lg);padding:16px 30px;font-size:1rem}
.btn-sm{--chamfer:var(--chamfer-sm);padding:9px 18px;font-size:.82rem}
.btn:active{transform:translateY(0) scale(.96)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-submit{display:none}
.btn[disabled]{opacity:.35;pointer-events:none}

/* click feedback: a squash-and-settle pop layered under a colour flash,
   triggered by adding .is-pressed from script.js on pointerdown/click */
@keyframes btnPop{
  0%{transform:scale(1)}
  40%{transform:scale(.92) rotate(-.3deg)}
  70%{transform:scale(1.035)}
  100%{transform:scale(1)}
}
@keyframes btnFlash{
  0%{filter:brightness(1) saturate(1)}
  35%{filter:brightness(1.28) saturate(1.15)}
  100%{filter:brightness(1) saturate(1)}
}
.btn.is-pressed{animation:btnPop .42s var(--ease), btnFlash .5s ease-out}

/* a thin animated ring that snaps outward from the click point, distinct
   from the ripple fill so a tap reads as two layered pulses */
.btn-shock{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border:1.5px solid currentColor;border-radius:50%;opacity:.7;pointer-events:none;
  animation:shockOut .55s var(--ease) forwards;z-index:0}
@keyframes shockOut{to{width:170%;height:170%;margin:-85% 0 0 -85%;opacity:0}}

/* ripple */
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.32;transform:scale(0);animation:rippleAnim .6s ease-out forwards;pointer-events:none;z-index:0}
@keyframes rippleAnim{to{transform:scale(3);opacity:0}}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;padding:14px 5vw;
  background:transparent;
  backdrop-filter:blur(0px) saturate(100%);-webkit-backdrop-filter:blur(0px) saturate(100%);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), -webkit-backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .3s var(--ease), box-shadow .4s var(--ease);
}
/* glass / frosted effect kicks in only once the page is scrolled */
.nav.scrolled{
  background:color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-color:var(--card-border);
  box-shadow:var(--shadow);
  padding:10px 5vw;
}
.nav-inner{max-width:var(--container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{display:flex;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em}
.brand-name em{font-style:normal;color:var(--red)}
.nav-links{display:flex;gap:6px;font-size:.9rem;font-weight:500}
.nav-links a{
  color:var(--text-dim);position:relative;padding:8px 14px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .2s, background .25s var(--ease);
}
.nav-links a:hover{color:var(--text);background:var(--surface)}
.nav-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav-links a.active{color:var(--text);background:var(--red-soft)}
.nav-links a.active::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;background:var(--card-bg);transition:border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--ease)}
.theme-toggle:hover{border-color:var(--gold);transform:rotate(20deg) scale(1.06)}
.theme-toggle:hover{border-color:var(--border-strong)}
.icon-moon{display:none}
html[data-theme="light"] .icon-sun{display:none}
html[data-theme="light"] .icon-moon{display:block}
.nav-burger{display:none;flex-direction:column;gap:5px;width:24px}
.nav-burger span{height:2px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}

/* ---------- hero ---------- */
.hero{position:relative;padding:150px 5vw 100px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 75%);
  opacity:.5;
}
.float-shape{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;animation:drift 14s ease-in-out infinite}
.shape-1{width:220px;height:220px;background:radial-gradient(circle,var(--red) 0%,transparent 70%);top:6%;left:2%;animation-delay:0s}
.shape-2{width:280px;height:280px;background:radial-gradient(circle,var(--gold) 0%,transparent 70%);top:20%;right:4%;animation-delay:-4s}
.shape-3{width:180px;height:180px;background:radial-gradient(circle,var(--blue) 0%,transparent 70%);bottom:8%;left:14%;animation-delay:-8s}
.shape-4{width:140px;height:140px;background:radial-gradient(circle,var(--green) 0%,transparent 70%);bottom:20%;right:20%;animation-delay:-11s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}

.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;max-width:var(--container);margin:0 auto}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:20px}
.grad-text{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:1.08rem;color:var(--text-dim);max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:32px}
.stat{display:flex;flex-direction:column}
.stat-num,.stat-num-static,.stat-suffix{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;color:var(--text)}
.stat-suffix{display:inline}
.stat-label{font-size:.76rem;color:var(--text-faint);margin-top:4px}

[data-reveal]{opacity:0;transform:translateY(18px);animation:reveal .8s var(--ease) forwards}
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal-up.in-view{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal-stagger.in-view > *{opacity:1;transform:none}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:.03s}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:.13s}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:.18s}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:.23s}
.reveal-stagger.in-view > *:nth-child(n+6){transition-delay:.27s}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.15s}
.hero-copy>*:nth-child(3){animation-delay:.25s}
.hero-copy>*:nth-child(4){animation-delay:.35s}
.hero-copy>*:nth-child(5){animation-delay:.45s}
@keyframes reveal{to{opacity:1;transform:none}}

.hero-visual{position:relative;height:540px}

/* ---------- hero illustration (journey map: PK -> DE) ---------- */
.hero-illustration{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;animation:illoFade 1s var(--ease) .15s forwards}
.hero-illustration svg{width:100%;height:100%}
@keyframes illoFade{to{opacity:1}}

.route-path{
  fill:none;stroke:var(--text-faint);opacity:.55;
  stroke-dasharray:1 9;
  animation:routeFlow 2.4s linear infinite;
}
@keyframes routeFlow{to{stroke-dashoffset:-40}}

.marker-halo{fill:none;stroke:var(--border-strong);stroke-width:1}
.marker-origin .marker-halo{animation:haloPulse 2.6s ease-in-out infinite}
.marker-dest .marker-halo{animation:haloPulse 2.6s ease-in-out 1.1s infinite}
@keyframes haloPulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}
.marker-dot-green{fill:var(--green)}
.marker-dot-red{fill:var(--red)}
.marker-label{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  fill:var(--text-faint);letter-spacing:.04em;
}

.plane{
  fill:var(--gold);
  transform-box:fill-box;
  offset-path:path("M70,430 C160,380 190,300 210,250 C240,175 300,150 420,95");
  animation:planeFly 7s ease-in-out infinite;
}
@keyframes planeFly{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}

/* Fallback for browsers without CSS motion-path support (e.g. Safari <16):
   approximate the same route with waypoint keyframes instead of offset-path. */
@supports not (offset-path: path("M0 0")){
  .plane{
    offset-path:none;
    animation:planeFlyFallback 7s ease-in-out infinite;
  }
  @keyframes planeFlyFallback{
    0%{transform:translate(70px,430px) rotate(-20deg);opacity:0}
    8%{opacity:1}
    18%{transform:translate(130px,398px) rotate(-28deg)}
    36%{transform:translate(180px,320px) rotate(-42deg)}
    50%{transform:translate(210px,250px) rotate(-52deg)}
    66%{transform:translate(268px,178px) rotate(-48deg)}
    84%{transform:translate(348px,132px) rotate(-32deg)}
    92%{opacity:1}
    100%{transform:translate(420px,95px) rotate(-18deg);opacity:0}
  }
}

.compass-ring{fill:none;stroke:var(--border-strong);stroke-width:1.2}
.compass-ring-dash{stroke-dasharray:2 6;opacity:.6;animation:compassSpin 40s linear infinite}
@keyframes compassSpin{to{transform:rotate(360deg)}}
.compass-tick{stroke:var(--text-faint);stroke-width:1.4}
.compass-needle-a{fill:var(--red)}
.compass-needle-b{fill:var(--gold)}
.compass-hub{fill:var(--bg-elevated);stroke:var(--border-strong);stroke-width:1}
.compass{transform-origin:center;animation:compassBob 6s ease-in-out infinite}
@keyframes compassBob{0%,100%{transform:translate(500px,150px) rotate(0deg)}50%{transform:translate(500px,150px) rotate(-4deg)}}

.gradcap-top{fill:var(--blue);opacity:.85}
.gradcap-band{fill:none;stroke:var(--blue);stroke-width:1.6;opacity:.85}
.gradcap-tassel{stroke:var(--gold);stroke-width:1.6}
.gradcap-tassel-end{fill:var(--gold)}
.gradcap{animation:floaty 5s ease-in-out .3s infinite}

.scatter-dot{animation:twinkle 3.2s ease-in-out infinite}
.dot-gold{fill:var(--gold)}
.dot-blue{fill:var(--blue)}
.dot-red{fill:var(--red)}
.dot-green{fill:var(--green)}
.scatter-dot:nth-of-type(odd){animation-delay:1.1s}
.scatter-dot:nth-of-type(3n){animation-delay:2s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}

@media (max-width:1080px){
  .hero-illustration{opacity:.5}
}
@media (max-width:560px){
  .hero-illustration{display:none}
}
@media (prefers-reduced-motion: reduce){
  .plane{offset-path:none;opacity:1;animation:none;transform:translate(210px,250px)}
  .compass{animation:none}
  .compass-ring-dash{animation:none}
}
.floaty{animation:floaty 5s ease-in-out infinite}
.float-delay-1{animation-delay:-1.5s}
.float-delay-2{animation-delay:-3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Hero cards get a near-opaque surface of their own (separate from the
   thin global .glass tint) so text stays legible over the glow blobs
   behind them, in both dark and light theme. */
.score-card,.mini-card{
  background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  border:1px solid var(--border-strong);
}
.score-card{
  position:absolute;top:0;left:0;z-index:3;width:320px;padding:26px;border-radius:var(--radius-lg);
  opacity:0;animation:cardPop .7s var(--ease) .4s forwards, floaty 5s ease-in-out 1.1s infinite, glowPulse 4s ease-in-out 1.1s infinite;
}
@keyframes cardPop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:var(--shadow), 0 0 0 1px var(--green-soft), 0 0 40px -10px var(--green-soft)}}
.score-card-head{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.score-title{font-size:.78rem;color:var(--text-faint);margin-bottom:2px}
.score-uni{font-weight:600;font-size:.94rem}
.score-ring{position:relative;width:64px;height:64px;flex:none}
.score-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:var(--border);stroke-width:9}
.ring-fill{fill:none;stroke:url(#none);stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.4s var(--ease)}
.ring-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:600;font-size:.85rem}
.score-checks{display:flex;flex-direction:column;gap:7px;font-size:.82rem;margin-bottom:16px}
.score-checks li{padding-left:20px;position:relative;color:var(--text-dim)}
.score-checks li::before{position:absolute;left:0;top:0}
.score-checks li.ok::before{content:"✓";color:var(--green)}
.score-checks li.warn::before{content:"!";color:var(--amber)}
.badge{display:inline-flex;padding:6px 14px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.02em}
.badge-green{background:var(--green-soft);color:var(--green)}
.badge-yellow{background:var(--amber-soft);color:var(--amber)}
.badge-red{background:var(--red-soft);color:var(--red)}
.mini-card{
  position:absolute;z-index:2;padding:14px 18px;border-radius:var(--radius-md);font-size:.82rem;font-weight:600;
  display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(18px) scale(.96);
  animation:cardPop .7s var(--ease) forwards, floaty 5s ease-in-out infinite;
}
.mini-card p{color:var(--text)}
.mini-card-1{top:270px;left:0;width:210px;animation-delay:.65s, 1.4s}
.mini-card-2{top:410px;right:0;width:210px;animation-delay:.9s, 2s}
.mini-badge{align-self:flex-start;padding:3px 10px;border-radius:999px;font-size:.65rem}

.trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 5vw;text-align:center}
.trust-strip p{color:var(--text-faint);font-size:.82rem;font-family:var(--font-mono)}

/* ---------- features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.feature-card{
  padding:28px;border-radius:var(--radius-lg);opacity:0;transform:translateY(24px);
  background:var(--card-bg);
  border:1px solid var(--card-border);box-shadow:var(--shadow);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.feature-card.in-view{animation:reveal .7s var(--ease) forwards}
.feature-card:hover{transform:translateY(-6px);border-color:var(--blue)}
.feature-icon{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;color:#fff;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.feature-card:hover .feature-icon{transform:scale(1.08) rotate(-4deg);box-shadow:0 10px 22px -6px rgba(0,0,0,.4)}
.feature-card h3{font-size:1.05rem;margin-bottom:8px}
.feature-card p{color:var(--text-dim);font-size:.88rem}

/* ---------- form ---------- */
.form-shell{max-width:840px;margin:0 auto;padding:40px;border-radius:var(--radius-xl)}
.form-progress{display:flex;align-items:center;margin-bottom:40px}
.fp-step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.fp-dot{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.82rem;transition:all .3s var(--ease)}
.fp-step.active .fp-dot{background:var(--red);border-color:var(--red);color:#fff}
.fp-step.done .fp-dot{background:var(--green);border-color:var(--green);color:#fff}
.fp-label{font-size:.68rem;color:var(--text-faint);white-space:nowrap}
.fp-step.active .fp-label{color:var(--text)}
.fp-line{flex:1;height:1.5px;background:var(--border);margin:0 6px 22px}

.form-step{display:none;animation:reveal .5s var(--ease)}
.form-step.active{display:block}
.form-step legend{font-family:var(--font-display);font-size:1.2rem;margin-bottom:6px}
.step-hint{color:var(--text-faint);font-size:.82rem;margin-bottom:20px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.field.wide{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.8rem;color:var(--text-dim);font-weight:500}
.field input,.field select{
  padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--text);transition:border-color .2s, box-shadow .2s;
}
.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);outline:none}
.field input.invalid{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.readonly-field input{background:var(--surface);color:var(--gold);font-family:var(--font-mono);font-weight:600}
.field-error{font-size:.72rem;color:var(--red);min-height:14px}
.form-nav{display:flex;justify-content:space-between;margin-top:34px}

/* ---------- results ---------- */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:28px}
.dash-stat{padding:18px 20px;border-radius:var(--radius-md)}
.dash-stat span{display:block;font-size:.72rem;color:var(--text-faint);margin-bottom:6px}
.dash-stat strong{font-family:var(--font-mono);font-size:1.4rem}

.data-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--blue-soft);border:1px solid rgba(61,126,255,.28);
  border-radius:var(--radius-md);padding:14px 16px;margin-bottom:20px;
}
.data-note svg{flex:none;color:var(--blue);margin-top:2px}
.data-note p{font-size:.86rem;line-height:1.55;color:var(--text-dim)}
.data-note strong{color:var(--text)}
.data-note em{font-style:normal;color:var(--text)}

.results-toolbar{display:flex;gap:12px;padding:16px;border-radius:var(--radius-md);margin-bottom:22px;flex-wrap:wrap}
.results-toolbar input,.results-toolbar select{padding:11px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text)}
.results-toolbar input{flex:1;min-width:200px}
.results-toolbar select:focus,.results-toolbar input:focus{border-color:var(--blue);outline:none}

.recommend-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.chip{padding:8px 16px;border-radius:999px;font-size:.78rem;border:1px solid var(--border);color:var(--text-dim);background:var(--surface);transition:.2s}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}

.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.empty-state{color:var(--text-faint);grid-column:1/-1;text-align:center;padding:60px 20px;border:1px dashed var(--border);border-radius:var(--radius-lg)}
.uni-card{
  padding:24px;border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:14px;
  opacity:0;transform:translateY(16px) scale(.98);animation:cardIn .5s var(--ease) forwards;
  background:var(--card-bg);
  border:1px solid var(--card-border);box-shadow:var(--shadow);
}
@keyframes cardIn{to{opacity:1;transform:none}}
.uni-card:hover{border-color:var(--blue)}
.uni-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.uni-name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;line-height:1.25}
.uni-loc{font-size:.78rem;color:var(--text-faint);margin-top:3px}
.uni-ring{position:relative;width:52px;height:52px;flex:none}
.uni-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.uni-ring .ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.72rem;font-weight:700}
.uni-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.78rem;color:var(--text-dim)}
.uni-meta b{color:var(--text);font-weight:600}
.uni-reasons{font-size:.78rem;color:var(--text-dim);border-top:1px dashed var(--border);padding-top:12px}
.uni-reasons li{padding-left:16px;position:relative;margin-top:4px}
.uni-reasons li::before{content:"–";position:absolute;left:0}
.uni-actions{display:flex;gap:10px;margin-top:auto}
.uni-actions .btn{--chamfer:var(--chamfer-sm);flex:1;padding:10px}

/* ---------- scholarships / visa ---------- */
.scholarship-grid,.visa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.info-card{padding:26px;border-radius:var(--radius-lg);transition:transform .3s var(--ease), border-color .3s var(--ease)}
.info-card:hover{transform:translateY(-4px);border-color:var(--blue)}
.info-card h3{font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.info-icon{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;flex:none;
  color:#fff;box-shadow:0 4px 12px -4px rgba(0,0,0,.3);transition:transform .25s var(--ease);
}
.info-card:hover .info-icon{transform:scale(1.08) rotate(-3deg)}
.info-card p{color:var(--text-dim);font-size:.86rem}
.info-card .tag{
  display:inline-block;margin-top:12px;font-size:.68rem;font-family:var(--font-mono);font-weight:600;
  color:#fff;padding:4px 12px;border-radius:999px;transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.3);
}
.info-card:hover .tag{transform:translateY(-2px)}
.step-badge{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--red);color:#fff;font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  box-shadow:0 4px 12px -4px rgba(201,32,45,.5);transition:transform .25s var(--ease);
}
.info-card:hover .step-badge{transform:scale(1.12)}

/* ---------- cost calculator ---------- */
.cost-shell{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:34px;border-radius:var(--radius-xl)}
/* Grid items get a content-based automatic minimum width by spec, which
   overrides flex-child min-width:0 one level down — a range input's
   default intrinsic size was winning that fight and forcing this whole
   column wider than its 1fr track on narrow phones ("grid blowout").
   min-width:0 here is what actually lets the column shrink. */
.cost-inputs{display:flex;flex-direction:column;gap:16px;min-width:0}
.cost-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.cost-row label{font-size:.86rem;color:var(--text-dim);flex:1;min-width:0}
/* Range inputs carry a browser-default intrinsic min-width (~130px)
   that flex-shrink can't override on its own — on a 320px-wide phone
   that alone was wider than the space left after the label and output,
   pushing the row (and the whole card) past the edge of the screen.
   min-width:0 lets it actually shrink like every other flex child. */
.cost-row input[type=range]{flex:2;min-width:0;accent-color:var(--red)}
.cost-row output{font-family:var(--font-mono);width:64px;flex:none;text-align:right;font-weight:600}
.cost-output{display:flex;flex-direction:column;justify-content:center;gap:18px}
.cost-total{display:flex;flex-direction:column;gap:6px}
.cost-total span{font-size:.8rem;color:var(--text-faint)}
.cost-total strong{font-family:var(--font-mono);font-size:2.6rem;background:linear-gradient(100deg,var(--gold),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.cost-bar{height:14px;border-radius:999px;background:var(--surface-strong);overflow:hidden;display:flex}
.cost-bar span{height:100%}
.cost-note{font-size:.76rem;color:var(--text-faint)}

/* ---------- documents ---------- */
.doc-shell{padding:32px;border-radius:var(--radius-xl)}
.doc-progress{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.doc-progress-track{flex:1;height:8px;border-radius:999px;background:var(--surface-strong);overflow:hidden}
.doc-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--blue));width:0%;transition:width .4s var(--ease)}
#docProgressLabel{font-size:.8rem;color:var(--text-faint);font-family:var(--font-mono);white-space:nowrap}
.doc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.doc-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;transition:border-color .25s var(--ease), transform .2s var(--ease), background .25s var(--ease)}
.doc-item:hover{border-color:var(--green);transform:translateY(-2px)}
.doc-item input{accent-color:var(--green);width:16px;height:16px}
.doc-item.checked{border-color:var(--green);background:var(--green-soft)}
.doc-item.checked span{color:var(--text-faint);text-decoration:line-through}

/* ---------- footer ---------- */
.site-footer{background:var(--footer-bg);border-top:1px solid var(--card-border);padding:64px 5vw 0}
.footer-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1.3fr 2fr;gap:40px;padding-bottom:40px}
.footer-brand p{color:var(--text-faint);font-size:.84rem;margin-top:12px;max-width:320px}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer-col h4{font-size:.78rem;color:var(--text-faint);margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
/* footer nav links styled as small chamfered buttons, colour-coded per
   column so Product/Company read as distinct groups, not a flat list.
   (No generic ".footer-col a" fallback needed — every footer link now
   carries an explicit button class, so nothing is left unstyled.) */
.footer-link-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex !important;align-items:center;
  padding:9px 16px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--text-dim) !important;
  font-size:.85rem;font-weight:600;
  clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
}
.footer-link-blue:hover{background:var(--blue);border-color:var(--blue);color:#fff !important;transform:translateX(4px) translateY(-2px);box-shadow:0 10px 22px -8px rgba(61,126,255,.5)}
.footer-link-gold:hover{background:var(--gold);border-color:var(--gold);color:var(--ink) !important;transform:translateX(4px) translateY(-2px);box-shadow:0 10px 22px -8px rgba(212,167,44,.45)}
.footer-link-btn.is-pressed{animation:btnPop .42s var(--ease), btnFlash .5s ease-out}
.footer-social{display:flex;gap:10px;flex-wrap:wrap}
.footer-social-btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  clip-path:polygon(var(--chamfer-sm) 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%,0 var(--chamfer-sm));
  background:var(--card-bg);border:1px solid var(--card-border);color:var(--text) !important;font-size:.82rem;font-weight:600;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease), filter .25s var(--ease);
}
.footer-social-btn svg{transition:transform .3s var(--ease)}
.footer-social-btn:hover svg{transform:scale(1.12) rotate(-6deg)}
.footer-social-github:hover{background:#181717;border-color:#181717;color:#fff !important;transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(0,0,0,.55)}
.footer-social-linkedin:hover{background:#0A66C2;border-color:#0A66C2;color:#fff !important;transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(10,102,194,.5)}
.footer-social-btn.is-pressed{animation:btnPop .42s var(--ease), btnFlash .5s ease-out}
.footer-bottom{max-width:var(--container);margin:0 auto;border-top:1px solid var(--border);padding:20px 0;text-align:center}
.footer-bottom p{font-size:.76rem;color:var(--text-faint)}

/* ---------- modal / toast ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:500;padding:20px}
.modal-backdrop.open{display:flex;animation:reveal .25s var(--ease)}
.modal{max-width:480px;width:100%;padding:32px;border-radius:var(--radius-lg);position:relative}
.modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--surface-strong)}
#modalContent h3{margin-bottom:12px;font-size:1.2rem}
#modalContent p{color:var(--text-dim);font-size:.9rem;margin-bottom:10px}

.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:999px;font-size:.86rem;z-index:600;transition:transform .4s var(--ease);box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ---------- skeleton / loading ---------- */
.skeleton{background:linear-gradient(100deg,var(--surface) 30%,var(--surface-strong) 50%,var(--surface) 70%);background-size:200% 100%;animation:shimmer 1.3s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.progress-line{position:fixed;top:0;left:0;height:3px;background:var(--brand-gradient);z-index:999;width:0%;transition:width .3s var(--ease)}

.back-to-top{
  position:fixed;bottom:28px;right:28px;width:46px;height:46px;border-radius:50%;
  background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;color:var(--text);
  opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .2s, background .3s var(--ease);
  z-index:150;
}
.back-to-top.show{opacity:1;transform:none;pointer-events:auto}
.back-to-top:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-3px)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{height:560px;margin-top:30px}
  .cost-shell{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
/* Nav gets its own, wider breakpoint: measured in a real headless-browser
   pass, the full link row + theme toggle + "Check Eligibility" button
   stop fitting on one line anywhere from ~861px up to ~1000px — the
   button was getting pushed off the right edge of the viewport and
   became unreachable, with no burger menu yet to fall back on. 1040px
   gives enough margin above that measured range. */
@media (max-width:1040px){
  .nav-links{display:none}
  .nav-actions .btn{display:none}
  .nav-burger{display:flex}
}
@media (max-width:860px){
  .hero{padding-top:120px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .field-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
}

/* ---------- container safety net ----------
   Nothing should ever be wider than its parent. This is a defensive
   backstop for the fixed-width/fixed-position pieces below (hero cards,
   illustration, absolutely-positioned mini-cards) so a stray px value
   can never push the page into horizontal scroll / clipped content. */
.nav-inner,.hero-inner,.hero-visual,.form-shell,.doc-shell,.cost-shell,
.footer-inner,.modal,section{max-width:100%}
img,svg{max-width:100%}

/* ---------- tablet + phone fine-tune (≤860px) ----------
   Everything above already reflows at 860px, but the multi-step form and
   the shell paddings were tuned for desktop widths and stayed untouched,
   so on tablets AND phones the step labels ("Language & Tests") and card
   padding either got cramped or — worse — overflowed their own card
   (the classic "slipping out of the container" bug). This pass now
   applies all the way down through phone widths, not just the ~700–860px
   tablet band, so nothing reverts to the broken nowrap default below
   701px. */
@media (max-width:860px){
  .form-shell,.doc-shell{padding:28px 24px}
  .form-progress{margin-bottom:32px}
  .fp-label{font-size:.6rem;white-space:normal;text-align:center;max-width:70px}
  .fp-line{margin:0 4px 22px}
  .cost-shell{padding:26px;gap:26px}
  .feature-grid,.scholarship-grid,.visa-grid,.doc-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .results-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

@media (max-width:560px){
  section{padding:64px 6vw}
  .hero-visual{height:600px}
  .score-card{width:100%;left:0;top:0}
  .mini-card-1{width:calc(50% - 8px);left:0;right:auto;top:auto;bottom:80px}
  .mini-card-2{width:calc(50% - 8px);right:0;left:auto;top:auto;bottom:0}
  .footer-cols{grid-template-columns:1fr}
  .results-toolbar{flex-direction:column}
  .form-shell,.doc-shell{padding:22px 16px}
  .cost-shell{padding:20px}
}

/* ---------- small phones (≤480px) ----------
   Below this width even a 220–310px grid-item minimum no longer fits
   inside the viewport once section padding is subtracted, so those
   auto-fit/auto-fill grids were forcing horizontal overflow ("cards
   slipping out of their container"). Collapse them to a single column
   instead of letting the browser fight a minimum that's wider than the
   screen. */
@media (max-width:480px){
  .feature-grid,.scholarship-grid,.visa-grid,.doc-list,
  .results-grid,.dash-stats{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr;gap:20px}
  .fp-label{max-width:52px;font-size:.56rem}
  .fp-dot{width:28px;height:28px;font-size:.72rem}
  .cost-row output{width:52px}
  .modal{padding:24px}
}