/* ==========================================================================
   EWE ACADEMY — standalone single-file build
   Same design tokens as the Next app (src/app/globals.css), hand-rolled so
   this file depends on nothing.

   TYPE NOTE: the Next app uses Inter + Instrument Serif via next/font. Those
   ship as seven unlabelled subset files with no unicode-range, so they cannot
   be inlined reliably here. This build names platform faces explicitly
   instead — Segoe UI / SF Pro / Roboto all carry full Cyrillic, which the
   Russian default requires.
   ========================================================================== */

:root {
  color-scheme: light;

  --brand: #69121f;
  --brand-500: #8f2739;
  --brand-400: #b85d6e;
  --brand-50: #fbf4f5;
  --brand-900: #28070c;

  --ink: #0b0a0a;
  --muted: #6e6a6a;
  --faint: #9b9696;
  --line: #e9e5e5;
  --surface: #ffffff;
  --surface-2: #faf8f8;
  /* Placeholder ground behind a portrait while its image decodes. Was
     referenced by .teacher .portrait but never declared, so the slot fell
     back to transparent and flashed page-white. */
  --surface-3: #f2eded;

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --radius: 20px;
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  --display: clamp(2.6rem, 7vw, 7.5rem);
  --h1: clamp(2.1rem, 5vw, 4.6rem);
  --h2: clamp(1.6rem, 3.2vw, 3rem);
  --h3: clamp(1.15rem, 1.8vw, 1.6rem);
  --lead: clamp(1.02rem, 1.3vw, 1.32rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body[data-loading="true"] { overflow: hidden; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 { font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

.tnum { font-variant-numeric: tabular-nums lining-nums; }
.gpu { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shell {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Animated elements start hidden; JS reveals them. */
[data-reveal] { opacity: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--brand);
  opacity: 0.55;
}
.eyebrow.on-dark { color: rgba(255, 255, 255, 0.5); }
.eyebrow.on-dark::before { background: rgba(255, 255, 255, 0.4); }
.eyebrow.bare::before { display: none; }

.rule { height: 1px; width: 100%; background: var(--line); transform-origin: left center; }
.rule.on-dark { background: rgba(255, 255, 255, 0.15); }

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  will-change: transform;
}
#preloader .aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 60% at 50% 42%, rgba(138, 36, 55, 0.9), transparent 70%);
  pointer-events: none;
}
#pre-mark-wrap { overflow: hidden; }
#pre-mark img { height: 92px; width: auto; }
#pre-word { margin-top: 1.75rem; display: flex; align-items: baseline; gap: 0.5rem; opacity: 0; font-size: 1.125rem; }
#pre-meta { position: absolute; inset-inline: 0; bottom: 0; padding: 0 var(--gutter) 2.5rem; }
#pre-meta .row { max-width: 90rem; margin-inline: auto; display: flex; align-items: flex-end; justify-content: space-between; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; }
#pre-track { max-width: 90rem; margin: 1rem auto 0; height: 1px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#pre-bar { display: block; height: 100%; background: rgba(255, 255, 255, 0.8); transform: scaleX(0); transform-origin: left; }

@media (min-width: 640px) { #pre-mark img { height: 132px; } }

/* ---------- Cursor glow ---------- */
#glow {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  width: 26rem; height: 26rem;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(99, 16, 29, 0.1), rgba(99, 16, 29, 0.05) 45%, transparent 72%);
}

/* ---------- Floating gradients ---------- */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* A blob is sized in rems but clipped to its own section, so wherever one crossed a seam the clip
   drew a flat edge through the glow -- a circle cut in half, stuck to the section boundary. Fade the
   field out toward each seam instead, so it never depends on which section sits next to it. The
   hero keeps its top edge (page top) and the dark results band keeps its own rounded edges. */
.blobs { --blob-seam: 10rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blob-seam), #000 calc(100% - var(--blob-seam)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--blob-seam), #000 calc(100% - var(--blob-seam)), transparent 100%); }
.hero .blobs { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--blob-seam)), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--blob-seam)), transparent 100%); }
#results .blobs { -webkit-mask-image: none; mask-image: none; }
.blob { position: absolute; will-change: transform; }
.blob.a { left: -12%; top: -18%; width: 46rem; height: 46rem; background: radial-gradient(closest-side, rgba(99,16,29,.13), transparent); }
.blob.b { right: -14%; top: 6%; width: 38rem; height: 38rem; background: radial-gradient(closest-side, rgba(199,91,57,.11), transparent); }
.blob.c { bottom: -22%; left: 28%; width: 42rem; height: 42rem; background: radial-gradient(closest-side, rgba(138,36,55,.09), transparent); }
.on-dark .blob.a { background: radial-gradient(closest-side, rgba(199,91,57,.30), transparent); }
.on-dark .blob.b { background: radial-gradient(closest-side, rgba(138,36,55,.42), transparent); }
.on-dark .blob.c { background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }

/* ---------- Nav ---------- */
#nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: 1rem var(--gutter) 0;
  will-change: transform;
}
#nav-shell {
  max-width: 90rem;
  margin-inline: auto;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.5rem 0 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  position: relative;
  transition: background-color 0.5s var(--expo), border-color 0.5s var(--expo), box-shadow 0.5s var(--expo);
}
#nav-shell[data-scrolled="true"] {
  background: color-mix(in srgb, white 72%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: color-mix(in srgb, var(--brand) 9%, transparent);
  box-shadow: 0 1px 2px rgba(11,10,10,.04), 0 14px 40px -24px rgba(11,10,10,.35);
}
.brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: inherit; }
.brand img { height: 34px; width: auto; }
.brand .lg-light { display: none; }

/* Over the dark results band the default nav is dark-on-dark. Invert it. */
body.nav-invert #nav-shell[data-scrolled="true"] {
  background: color-mix(in srgb, #000 32%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, 0.6);
}
body.nav-invert .brand .lg-dark { display: none; }
body.nav-invert .brand .lg-light { display: block; }
body.nav-invert .brand .name { color: #fff; }
body.nav-invert .brand .sub { color: #fff; }
body.nav-invert #nav-links a { color: rgba(255, 255, 255, 0.6); }
body.nav-invert #nav-links a:hover { color: #fff; }
body.nav-invert #nav-links a::after { background: #fff; }
body.nav-invert .langs button { color: rgba(255, 255, 255, 0.45); }
body.nav-invert .langs button:hover { color: #fff; }
body.nav-invert .langs button[aria-current="true"] { color: #fff; }
body.nav-invert .langs .sep { color: rgba(255, 255, 255, 0.2); }
body.nav-invert #burger span { background: #fff; }
body.nav-invert #burger:hover { background: rgba(255, 255, 255, 0.1); }
#nav-shell, .brand .name, .brand .sub, #nav-links a, .langs button { transition: color .45s var(--expo), background-color .45s var(--expo), border-color .45s var(--expo); }
.brand .name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; }
.brand .sub { font-size: 0.9375rem; opacity: 0.55; letter-spacing: -0.01em; }

#nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: none; align-items: center; gap: 0.25rem; }
#nav-links a {
  position: relative;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.3s;
}
#nav-links a:hover { color: var(--ink); }
#nav-links a::after {
  content: "";
  position: absolute;
  left: 0.875rem; right: 0.875rem; bottom: 0.25rem;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--expo);
}
#nav-links a:hover::after { transform: scaleX(1); }
@media (min-width: 1024px) { #nav-links { display: flex; } }

.nav-right { display: flex; align-items: center; gap: 0.5rem; }

.langs { display: flex; align-items: center; gap: 0.125rem; }
.langs button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--faint);
  transition: color 0.3s;
  border-radius: 4px;
}
.langs button:hover { color: var(--ink); }
.langs button[aria-current="true"] { color: var(--brand); }
.langs .sep { color: var(--line); font-size: 0.6875rem; padding: 0 0.125rem; }

#burger {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; border-radius: 999px; cursor: pointer;
  transition: background-color 0.3s;
}
#burger:hover { background: var(--brand-50); }
#burger span { position: absolute; height: 1px; width: 1.25rem; background: var(--ink); transition: transform 0.5s var(--expo); }
#burger span:nth-child(1) { transform: translateY(-3px); }
#burger span:nth-child(2) { transform: translateY(3px); }
#burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
#burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
@media (min-width: 1024px) { #burger { display: none; } }

/* The nav CTA is dropped on phones — the hero carries the same button a
   thumb-length below. The language switcher is NOT dropped: on a trilingual
   site, burying it in a burger menu is the wrong trade. */
.only-sm { display: none; }
@media (min-width: 640px) { .only-sm { display: block; } }

/* ---------- Mobile menu ---------- */
#menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--surface);
  padding: 7rem var(--gutter) 3.5rem;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: auto;
}
#menu.open { display: flex; }
#menu a.item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
}
#menu a.item .n { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; color: var(--faint); }
#menu .langs-panel { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
#menu .langs-panel button {
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.3s;
}
#menu .langs-panel button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 999px;
  padding: 0.875rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.5s var(--expo), border-color 0.5s var(--expo), color 0.5s var(--expo), box-shadow 0.5s var(--expo);
  will-change: transform;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(99,16,29,.28), 0 12px 32px -12px rgba(99,16,29,.5);
}
.btn-primary:hover { background: var(--brand-500); box-shadow: 0 1px 2px rgba(99,16,29,.3), 0 18px 44px -12px rgba(99,16,29,.62); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: color-mix(in srgb, var(--brand-50) 60%, transparent); }
.btn-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.mag { display: inline-block; padding: 0.625rem; margin: -0.625rem; }
.btn .lab { display: inline-flex; align-items: center; gap: 0.625rem; will-change: transform; }
.btn .arw { width: 0.875rem; height: 0.875rem; transition: transform 0.5s var(--expo); }
.btn:hover .arw { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 8rem 0 4rem;
}
h1.display { font-size: var(--display); line-height: 0.93; letter-spacing: -0.045em; max-width: 17ch; margin-top: 1.75rem; }
h1.display .accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--brand); }
.hero-grid { margin-top: 2.5rem; display: grid; gap: 2.5rem; }
.lead { font-size: var(--lead); line-height: 1.56; letter-spacing: -0.012em; color: var(--muted); }
.cta-row { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.proof .v { font-size: var(--h3); font-weight: 500; letter-spacing: -0.03em; }
.proof .l { margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.35; color: var(--faint); }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .hero-copy { grid-column: span 6; }
  .hero-proof { grid-column: 8 / span 5; }
}

#cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 0.75rem; opacity: 0; pointer-events: none; }
#cue .lbl { font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--faint); }
#cue .track { position: relative; display: block; width: 1px; height: 3rem; background: var(--line); overflow: hidden; }
#cue .seg { position: absolute; inset-inline: 0; top: 0; height: 33%; background: var(--brand); }
@media (min-width: 768px) { #cue { display: flex; } }

/* ---------- Generic section ---------- */
.section { position: relative; padding: 7rem 0; }
@media (min-width: 768px) { .section { padding: 10rem 0; } }
.section.tinted { background: var(--surface-2); }
h2.h1 { font-size: var(--h1); line-height: 1; letter-spacing: -0.038em; margin-top: 1.5rem; }
h3.h3 { font-size: var(--h3); line-height: 1.24; letter-spacing: -0.022em; }
.section-head { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .section-head .lhs { grid-column: span 7; }
  .section-head .rhs { grid-column: 9 / span 4; }
}
.small { font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }

/* ---------- About ---------- */
.about-grid { margin-top: 3.5rem; display: grid; gap: 3.5rem; }
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--brand);
  aspect-ratio: 4 / 5;
}
.media .inner { position: absolute; inset: 0; will-change: transform; }
/* Depth comes from the two gradients and the mark alone. A tiled hairline
   grid used to sit here; it read as generic dashboard texture on what is a
   brand panel, not a canvas or blueprint. */
.media .g1 { position: absolute; inset: 0; background: radial-gradient(120% 90% at 15% 0%, #8a2437, transparent 55%), radial-gradient(100% 80% at 100% 100%, #3d0b13, transparent 60%); }
.media .mk { position: absolute; inset: 0; display: grid; place-items: center; }
.media .mk img { height: 46%; width: auto; opacity: 0.9; }
.pillars { margin-top: 3.5rem; display: grid; gap: 2.25rem 2.5rem; }
.pillar { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.pillar p { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .about-media { grid-column: span 5; position: sticky; top: 7rem; }
  .about-body { grid-column: 7 / span 6; }
}

/* ---------- Courses ----------
   Named `course-track`, not `track`: the scroll cue already owns `.track`,
   and a bare `.track` here silently restyled it. */
.course-track { margin-top: 5rem; }
.course-track:first-child { margin-top: 3.5rem; }
.track-head { margin-top: 2.25rem; display: grid; gap: 1.5rem; }
.track-head h3 { font-size: var(--h2); line-height: 1.08; letter-spacing: -0.03em; }
.track-head .exams { margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--brand); }
@media (min-width: 1024px) {
  .track-head { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .track-head .lhs { grid-column: span 5; }
  .track-head .rhs { grid-column: 8 / span 5; }
}
.tier .name { font-size: var(--h3); font-weight: 500; letter-spacing: -0.022em; }
.tier .price { margin-top: 1.25rem; display: flex; align-items: baseline; gap: 0.375rem; }
.tier .price .n { font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.tier .price .u { font-size: 0.8125rem; color: var(--faint); }
@media (min-width: 768px) { .tier .price .n { font-size: 2.35rem; } }
.tier ul { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); flex: 1; display: flex; flex-direction: column; gap: 0.625rem; }
.tier .suits { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tier .suits .lbl { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
.tier .suits p { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.65; color: var(--muted); }
.tier .act { margin-top: 1.75rem; }
/* Every tier card is identical at rest. The burgundy border and the filled
   button are hover states owned by the CARD, so pointing anywhere on it lights
   the whole thing — not just the button. Pure CSS, no JS state. */
.card.tier:hover { border-color: var(--brand); }

.btn-card {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.card.tier:hover .btn-card {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.cards { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.75rem;
  transition: transform 0.7s var(--expo), border-color 0.7s var(--expo), box-shadow 0.7s var(--expo);
  --spot-x: 50%; --spot-y: 0px; --spot-o: 0;
}
@media (min-width: 768px) { .card { padding: 2.25rem; } }
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  box-shadow: 0 2px 4px rgba(11,10,10,.03), 0 28px 60px -32px rgba(99,16,29,.4);
}
.card .spot {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--spot-o);
  background: radial-gradient(22rem circle at var(--spot-x) var(--spot-y), rgba(99,16,29,.07), transparent 70%);
}
.card > *:not(.spot) { position: relative; }
.card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.card .idx { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; color: var(--faint); transition: color 0.5s; }
.card:hover .idx, .card:hover .top svg { color: var(--brand); }
.card .top svg { width: 0.875rem; height: 0.875rem; color: var(--faint); transition: color 0.5s; }
.card .nm { margin-top: 2.5rem; font-size: 2.25rem; font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 768px) { .card .nm { font-size: 2.75rem; } }
.card .full { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.35; color: var(--faint); }
.card .sum { margin-top: 1.5rem; font-size: 0.9375rem; line-height: 1.65; color: var(--muted); }
.card dl { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 0.25rem; }
.card dl .r { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
.card dl .r:last-child { border-bottom: 0; }
.card dl dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.card dl dd { font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; }
.card ul { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.card li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; line-height: 1.35; color: var(--muted); }
.card li svg { margin-top: 0.3rem; width: 0.75rem; height: 0.75rem; flex: none; color: var(--brand); }
.card .badge {
  margin-top: 2rem; width: fit-content;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--faint); transition: all 0.5s;
}
.card:hover .badge { border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.card .badge i { width: 4px; height: 4px; border-radius: 999px; background: currentColor; }

/* ---------- Segmented control ----------
   Shared by the teacher-track filter and the booking form's plan chooser.
   The burgundy pill is one absolutely-positioned node that GSAP slides and
   resizes between segments, so switching reads as one object moving rather
   than two backgrounds cross-fading. */
.segs {
  position: relative;
  display: inline-flex; align-items: stretch; gap: 0.25rem;
  max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem;
  background: var(--surface);
}
.segs .pill {
  position: absolute; left: 0; top: 0.3rem;
  width: 0; height: calc(100% - 0.6rem);
  border-radius: 999px; background: var(--brand);
  opacity: 0; pointer-events: none;
}
.seg {
  position: relative; z-index: 1;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  border: 0; background: none; cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--muted); white-space: nowrap;
  transition: color .45s var(--expo);
  -webkit-tap-highlight-color: transparent;
}
.seg:hover { color: var(--ink); }
.seg[aria-selected="true"], .seg[aria-selected="true"]:hover { color: #fff; }
.seg .sub { font-size: 0.6875rem; font-weight: 500; color: var(--faint); transition: color .45s var(--expo); }
.seg[aria-selected="true"] .sub { color: rgba(255,255,255,.62); }

/* ---------- Teachers ----------
   A horizontal rail rather than a grid: the section no longer grows the page
   vertically, and the row is driven sideways by the arrows (or a swipe). */
.teachers-bar { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

.tcar { position: relative; margin-top: 1.5rem; }
.teachers {
  display: flex; gap: 1.25rem;
  overflow-x: auto; overflow-y: hidden;
  /* Proximity, not mandatory: the arrows tween scrollLeft to an exact card
     offset, and mandatory snapping fights a running tween. */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.teachers::-webkit-scrollbar { display: none; }
/* The rail itself is the keyboard-scrollable region, so it must show focus. */
.teachers:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--radius); }

.teacher {
  position: relative;
  flex: 0 0 auto;
  width: min(82vw, 22rem);
  /* Taller than it is wide by a good margin: the copy sits over the photo, so
     a short card left the text crowding the face. */
  min-height: clamp(29rem, 48vw, 35rem);
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-3);
  --sx: 50%; --sy: 50%; --so: 0;
  transition: box-shadow .45s var(--expo), opacity .45s var(--expo);
}
.teacher[hidden] { display: none; }
.teacher:hover { box-shadow: 0 2px 4px rgba(11,10,10,.03), 0 28px 60px -32px rgba(105,18,31,.5); }

/* Hovering one card recedes the rest of the rail. Dropped wholesale by
   browsers without :has(), which simply leaves every card at full strength. */
@media (hover: hover) and (pointer: fine) {
  .teachers:has(.teacher:hover) .teacher:not(:hover) { opacity: .58; }
}

.teacher .shot {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* Dead centre on purpose. The source files are pre-cropped to 3:4 with every
     face solved onto the same eye-line, so nudging the origin here would undo
     that alignment rather than help it. */
  object-position: center center;
  /* Ten portraits shot on ten different phones. Pulling saturation and
     brightness back at rest makes the rail read as one set; hover restores
     the photo to its true grade, so the card you are reading is the only
     one at full colour. */
  filter: saturate(.8) contrast(1.04) brightness(.94);
  transform: scale(1.02);
  transition: transform 1.2s var(--expo), filter .7s var(--expo);
}
.teacher:hover .shot { transform: scale(1.07); filter: none; }

/* Legibility floor for the overlaid copy over any photo. */
.teacher .veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(18,4,7,.95) 0%, rgba(18,4,7,.88) 22%, rgba(18,4,7,.62) 42%,
    rgba(18,4,7,.26) 62%, rgba(18,4,7,0) 82%);
  transition: opacity .6s var(--expo);
}

/* Pointer-tracked spotlight, driven by --sx/--sy from script. */
.teacher .glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--so);
  background: radial-gradient(9rem circle at var(--sx) var(--sy), rgba(255,255,255,.32), rgba(255,255,255,0) 62%);
}
@media (hover: hover) and (pointer: fine) { .teacher .glow { mix-blend-mode: soft-light; } }

.teacher-body { position: relative; z-index: 2; padding: 1.4rem; color: #fff; }
.teacher-body .who { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.teacher-body h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.022em; color: #fff; }
.teacher-body .role { margin-top: 0.3rem; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--brand-400); }
.teacher-body .sweep { margin-top: 0.9rem; display: block; height: 1px; background: rgba(255,255,255,.28); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--expo); }
.teacher:hover .sweep { transform: scaleX(1); }
/* Cards in a flex row all take the height of the tallest, so one long
   translation used to stretch the whole rail. The clamp fixes the block at eight
   lines, which is enough for the longest English bio -- Russian and Uzbek run
   naturally longer, and this keeps the row the same height in every language
   instead of letting the wordiest one set it. */
.teacher-body .bio {
  margin-top: 0.9rem;
  font-size: 0.85rem; line-height: 1.6;
  color: rgba(255,255,255,.82);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
  overflow: hidden;
}

/* Credentials sit beside the name, always legible -- no longer hover-gated,
   so keyboard and screen-reader users get them on the same terms. */
.teacher .creds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; flex: none; max-width: 52%; }
.teacher .creds li {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: -0.01em;
  color: #fff; white-space: nowrap;
}

/* Rail arrows. Mouse affordances only: they carry no accessible name (there
   is no dictionary copy for one, and an English-only label on a trilingual
   site is worse than none), so they are hidden from assistive tech and the
   rail itself is focusable and arrow-key scrollable instead. */
.tnav {
  position: absolute; top: 50%; z-index: 3;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-top: -1.375rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(11,10,10,.04), 0 14px 30px -16px rgba(11,10,10,.3);
  transition: opacity .4s var(--expo), background-color .4s var(--expo),
              border-color .4s var(--expo), color .4s var(--expo);
}
.tnav:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tnav svg { width: 1rem; height: 1rem; }
.tnav.prev { left: -0.85rem; }
.tnav.next { right: -0.85rem; }
.tnav[aria-disabled="true"] { opacity: 0; pointer-events: none; }
/* Below the fold of a tablet the rail is swiped, not clicked. */
@media (max-width: 767px) { .tnav { display: none; } }


/* ---------- Why ---------- */
.why-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: repeat(12, 1fr); }
  .why-head { grid-column: span 4; position: sticky; top: 8rem; align-self: start; }
  .why-list { grid-column: 6 / span 7; }
}
.why-item { border-top: 1px solid var(--line); padding: 2.25rem 0; }
.why-item:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) { .why-item { padding: 2.75rem 0; } }
.why-item .hd { display: flex; align-items: baseline; gap: 1.25rem; }
.why-item .n { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; color: var(--faint); transition: color 0.5s; }
.why-item h3 { font-size: var(--h2); line-height: 1.08; letter-spacing: -0.03em; transition: transform 0.7s var(--expo); }
.why-item:hover .n { color: var(--brand); }
.why-item:hover h3 { transform: translateX(6px); }
.why-item p { margin-top: 1.25rem; max-width: 62ch; font-size: var(--lead); line-height: 1.56; color: var(--muted); }
.why-item .swipe { margin-top: 2.25rem; display: block; height: 1px; width: 100%; background: color-mix(in srgb, var(--brand) 50%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--expo); }
.why-item:hover .swipe { transform: scaleX(1); }
@media (min-width: 768px) { .why-item p { padding-left: 3.4rem; } }

/* ---------- Results (dark) ---------- */
#results {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--brand-900);
  color: #fff;
  padding: 7rem 0;
}
@media (min-width: 768px) { #results { border-radius: 2.75rem; padding: 10rem 0; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 2rem; padding-top: 3rem; }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat .v { font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.stat .l { margin-top: 1rem; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; }
.stat .d { margin-top: 0.25rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.4); }
.quotes { display: grid; gap: 1.25rem; padding-top: 3rem; }
@media (min-width: 1024px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  padding: 1.75rem;
  background: color-mix(in srgb, #fff 7%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  transition: border-color 0.7s;
}
.quote:hover { border-color: rgba(255, 255, 255, 0.25); }
@media (min-width: 768px) { .quote { padding: 2rem; } }
.quote svg { width: 1.4rem; height: 1rem; color: rgba(255,255,255,0.35); }
.quote blockquote { margin: 1.5rem 0 0; flex: 1; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, 0.85); }
.quote figcaption { margin-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.25rem; }
.quote .who { font-size: 0.9375rem; font-weight: 500; }
.quote .role { margin-top: 0.25rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); }
.chips { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.625rem;
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px;
  padding: 0.625rem 1rem; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.7);
  transition: all 0.5s;
}
.chip:hover { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.chip i { width: 4px; height: 4px; border-radius: 999px; background: var(--brand); }

/* ---------- Form ---------- */
.form-grid { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) {
  .form-grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; }
  .form-head { grid-column: span 5; position: sticky; top: 8rem; align-self: start; }
  .form-body { grid-column: 7 / span 6; }
}
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.75rem; }
@media (min-width: 768px) { .panel { padding: 2.25rem; } }
.fields { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field.wide { grid-column: span 2; } }
/* Scoped to the field's own caption. The plan cards are <label>s too, and an
   unscoped rule uppercased and shrank every plan name and price inside them.
   .flabel names a radio group, which has no single control to point a
   <label for> at -- aria-labelledby does the joining instead. */
.field > label, .field .flabel { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.field input, .field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: inherit;
  transition: border-color 0.3s var(--expo), box-shadow 0.3s var(--expo);
}
.field select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%236e6a6a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 12px 8px; }
.field input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus { outline: none; border-color: color-mix(in srgb, var(--brand) 45%, transparent); box-shadow: 0 0 0 3px rgba(99, 16, 29, 0.08); }
.field.bad input, .field.bad select { border-color: var(--brand); }
.field .err { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--brand); }

/* ---------- Plan chooser ----------
   Replaces the grouped <select> for "Course". The control is still a native
   radio group named "course" carrying the same "track:tier" values, so
   validation and submission are untouched -- only the skin and the motion
   are new. */
.field .lblrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.field .lblrow label, .field .lblrow .flabel { margin-bottom: 0; }
/* Live echo of the current choice, next to the field label. */
.pick { font-size: 0.75rem; font-weight: 500; letter-spacing: -0.01em; color: var(--brand); text-align: right; }
.pick:empty { display: none; }

.plan .segs { margin-bottom: 0.85rem; }
.plan .seg { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.45rem 1.05rem; }
.plan .seg .sub { font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; }

.ptiers { display: grid; gap: 0.6rem; }
.ptiers[hidden] { display: none; }
@media (min-width: 480px) { .ptiers { grid-template-columns: repeat(3, 1fr); } }
.ptier { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Visually hidden but still focusable and still the real form control. */
.ptier input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ptier .bd {
  position: relative; display: block; overflow: hidden;
  height: 100%;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
  padding: 0.8rem 0.9rem;
  transition: border-color .45s var(--expo), background-color .45s var(--expo),
              box-shadow .45s var(--expo), opacity .45s var(--expo);
}
.ptier:hover .bd { border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.ptier input:checked + .bd {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 1px 2px rgba(11,10,10,.03), 0 18px 34px -22px rgba(105,18,31,.45);
}
.ptier input:focus-visible + .bd { outline: 2px solid var(--brand); outline-offset: 3px; }
.field.bad .ptier .bd { border-color: var(--brand); }
/* Once a plan is picked the unchosen two step back. */
.ptiers:has(input:checked) .ptier:not(:has(input:checked)) .bd { opacity: .58; }

.ptier .hd { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ptier .nm { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.015em; }
.ptier .ck {
  width: 1rem; height: 1rem; flex: none; color: var(--brand);
  opacity: 0; transform: scale(.5);
  transition: opacity .3s var(--expo), transform .5s var(--expo);
}
/* The tick draws itself rather than popping in. */
.ptier .ck path { stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset .55s var(--expo) .08s; }
.ptier input:checked + .bd .ck { opacity: 1; transform: none; }
.ptier input:checked + .bd .ck path { stroke-dashoffset: 0; }
.ptier .pr { margin-top: 0.6rem; display: block; }
.ptier .pr .n { display: block; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.ptier .pr .u { display: block; margin-top: 0.2rem; font-size: 0.6875rem; color: var(--faint); }
/* Ripple seeded at the click point, scaled out by script. */
.ptier .rip {
  position: absolute; z-index: 0; width: 16px; height: 16px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  pointer-events: none; opacity: 0;
}
.ptier .hd, .ptier .pr { position: relative; z-index: 1; }

/* ---------- Completion meter ----------
   Decorative: it mirrors the three fields validation already enforces
   (name, phone, course). Screen readers get the real error messages, so the
   bar is hidden from them rather than given an invented label. */
.meter { margin-top: 1.9rem; display: flex; align-items: center; gap: 0.85rem; }
.meter .trk { position: relative; flex: 1; height: 2px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter .fil { position: absolute; inset: 0; border-radius: 999px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.meter .n { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; color: var(--faint); transition: color .5s var(--expo); }
.meter.full .n { color: var(--brand); }
.consent { margin-top: 1.5rem; max-width: 52ch; font-size: 0.75rem; line-height: 1.65; color: var(--faint); }
/* ---------- Currency ----------
   Prices are set in UZS; every other currency is a conversion, so it is shown
   with a small approximation sign and a note naming the rate's date. */
.cur-bar { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; }
.cur { display: inline-flex; align-items: center; gap: 0.7rem; max-width: 100%; }
.cur-lbl { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.cur-sel {
  appearance: none; -webkit-appearance: none;
  max-width: 100%;
  border: 1px solid var(--line); border-radius: 999px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%236e6a6a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px 8px;
  padding: 0.55rem 2.3rem 0.55rem 1.05rem;
  font: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.3s var(--expo), box-shadow 0.3s var(--expo);
}
.cur-sel:hover { border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.cur-sel:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Inside the form, .field select would stretch it to the full row. */
.field .cur-sel { width: auto; padding: 0.55rem 2.3rem 0.55rem 1.05rem; border-radius: 999px; font-size: 0.8125rem; background-position: right 0.9rem center; }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.85rem; }
.plan .plan-top .segs { margin-bottom: 0; }
.plan-top .cur-lbl { display: none; }
.cur-note { max-width: 56ch; font-size: 0.75rem; line-height: 1.6; color: var(--faint); }
.cur-note:empty { display: none; }
.plan > .cur-note { margin-top: 0.75rem; }
.ptier .pr .n .ap { font-size: 0.8em; vertical-align: 0.05em; }
.n .ap { margin-right: 0.18em; font-size: 0.55em; font-weight: 500; letter-spacing: 0; opacity: 0.5; vertical-align: 0.32em; }
.tick { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--brand); color: #fff; }
.tick svg { width: 1.25rem; height: 1.25rem; }
.linkish { margin-top: 2rem; background: none; border: 0; padding: 0; font-size: 0.9375rem; font-weight: 500; color: var(--brand); cursor: pointer; text-underline-offset: 4px; }
.linkish:hover { text-decoration: underline; }
.notice { margin-top: 1.75rem; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); background: var(--brand-50); border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--brand); }

/* ---------- Final CTA ---------- */
#contact { position: relative; overflow: hidden; padding: 8rem 0; }
@media (min-width: 768px) { #contact { padding: 11rem 0; } }
#contact .wm { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); display: none; pointer-events: none; }
#contact .wm img { height: 35rem; width: auto; opacity: 0.045; }
@media (min-width: 1024px) { #contact .wm { display: block; } }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
h2.display { font-size: var(--display); line-height: 0.93; letter-spacing: -0.045em; max-width: 15ch; margin-top: 1.75rem; }

/* ---------- Footer ---------- */
footer { position: relative; padding-bottom: 2.5rem; }
.foot-grid { display: grid; gap: 3rem; padding-top: 3.5rem; }
@media (min-width: 768px) { .foot-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; } .fc1 { grid-column: span 5; } .fc2 { grid-column: 7 / span 3; } .fc3 { grid-column: span 2; } .fc4 { grid-column: span 2; } }
.foot-grid h2 { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--faint); }
.foot-grid ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.foot-grid a { font-size: 0.9375rem; color: var(--muted); text-decoration: none; transition: color 0.3s; }
.foot-grid a:hover { color: var(--ink); }
.foot-bottom { margin-top: 4rem; border-top: 1px solid var(--line); padding-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.8125rem; color: var(--faint); }
@media (min-width: 640px) { .foot-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Preview banner &#8212; this build is a shareable copy, not the live site. */
#preview-note {
  position: fixed; z-index: 55; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
  color: #fff; border-radius: 999px; padding: 0.5rem 0.9rem;
  font-size: 0.6875rem; letter-spacing: 0.02em; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
#preview-note i { width: 5px; height: 5px; border-radius: 999px; background: var(--brand); flex: none; }

/* ==========================================================================
   PHONES
   Three separate problems, all only visible below ~640px:

   1. The hero measured 954px against an 812px viewport, so the proof strip
      sat under the fold and the section felt cropped. Tightened padding and
      the display scale until the whole hero fits one screen.
   2. backdrop-filter over a moving background is one of the most expensive
      things a mobile GPU can be asked to do. Swapped for flat translucency &#8212;
      the frosted look is worth nothing at a stuttering frame rate.
   3. The blurred gradient fields are huge composited layers. Two smaller ones
      read the same as three big ones at this width.
   ========================================================================== */

@media (max-width: 639px) {
  :root {
    --display: clamp(2.15rem, 8.4vw, 2.9rem);
    --h1: clamp(1.85rem, 7vw, 2.5rem);
    --h2: clamp(1.45rem, 5.6vw, 1.9rem);
    --lead: 1rem;
  }

  .hero { min-height: auto; padding: 5.75rem 0 2.5rem; }
  h1.display { margin-top: 1.25rem; }
  .hero-grid { margin-top: 1.5rem; gap: 1.75rem; }
  .cta-row { margin-top: 1.5rem; gap: 0.625rem; }
  .cta-row .btn { width: 100%; }
  .cta-row .mag { display: block; width: 100%; }
  .proof { gap: 0.75rem; padding-top: 1rem; }
  .proof .l { font-size: 0.75rem; }

  /* `.mag` sets display:inline-block and is declared after `.only-sm`, so at
     equal specificity it won the cascade and the nav CTA stayed visible.
     The id here settles it. */
  #nav-shell .only-sm { display: none; }

  .section { padding: 5rem 0; }
  #results { padding: 5rem 0; border-radius: 1.25rem; }
  #contact { padding: 6rem 0; }

  #nav { padding-top: 0.625rem; }
  #nav-shell { padding-left: 0.75rem; }
  .brand img { height: 28px; }
  .brand .name, .brand .sub { font-size: 0.875rem; }

  /* Flat translucency instead of a live blur. */
  #nav-shell[data-scrolled="true"] {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.nav-invert #nav-shell[data-scrolled="true"] {
    background: rgba(25, 5, 9, 0.9);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .quote {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .blob { filter: none; }
  .blob.a { width: 26rem; height: 26rem; }
  .blob.b { width: 22rem; height: 22rem; }
  .blob.c { display: none; }

  .card { padding: 1.5rem; }
  .card .nm { margin-top: 1.75rem; font-size: 2rem; }
  .panel { padding: 1.5rem; }
  .why-item { padding: 1.75rem 0; }
  .why-item p { margin-top: 1rem; }
  .about-grid, .why-grid, .form-grid, .foot-grid { gap: 2.5rem; }
  .pillars { margin-top: 2.5rem; gap: 1.75rem; }
  #preview-note { font-size: 0.625rem; padding: 0.4rem 0.75rem; max-width: calc(100vw - 2rem); }
  #preview-note span { overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  /* The credential chips are content, not decoration: if the reveal that
     carries them is switched off they must simply be there. Same for the
     tick, whose draw-on is its only way of appearing. */
  .teacher .creds li { opacity: 1 !important; transform: none !important; }
  .teacher .portrait::after { opacity: 1 !important; }
  .ptier input:checked + .bd .ck { opacity: 1 !important; transform: none !important; }
  .ptier input:checked + .bd .ck path { stroke-dashoffset: 0 !important; }
}