/* ===== Self-hosted fonts (Inter + Outfit, latin/latin-ext, font-display:swap) ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/outfit-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/outfit-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/caveat-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/caveat-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ================================================================
   WAYNE JUSTICE — English Teacher
   Design System: Lumina Dark — Premium Educational
   ================================================================ */

/* ─── Tokens ─── */
:root {
  /* Background scale — Unlock Your Voice theme */
  --bg-base: #09090b;
  --bg-elevated: #18181b;
  --bg-card: #1f1f23;
  --bg-card-hover: #27272a;
  --border: rgba(228, 228, 231, 0.12);
  --border-hover: rgba(245, 158, 11, 0.35);

  /* Text */
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #8b8b93;

  /* Accent system — warm amber, energy of learning */
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --accent-glow: rgba(245, 158, 11, 0.20);
  --accent-warm: #fbbf24;
  --accent-warm-soft: rgba(251, 191, 36, 0.15);
  --accent-urgent: #ef4444;
  --accent-success: #22c55e;

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  /* Weight scale — see docs/TYPOGRAPHY.md. "Skip a weight" for real contrast:
     body 400 ↔ display 700. Labels/eyebrows 500. Avoid the muddy all-600. */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --text-xs: clamp(0.70rem, 0.68rem + 0.10vw, 0.78rem);
  --text-sm: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --text-base: clamp(0.94rem, 0.91rem + 0.15vw, 1rem);
  --text-lg: clamp(1.05rem, 1.02rem + 0.15vw, 1.125rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --text-5xl: clamp(2.75rem, 2.2rem + 2.5vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii — sharp editorial style, not AI-rounded */
  --radius-sharp: 0px;
  --radius-subtle: 4px;
  --radius-soft: 8px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 40px var(--accent-glow);

  /* Transitions — GSAP power2.out equivalent */
  --transition-fast: 150ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-base: 250ms cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slow: 400ms cubic-bezier(0.33, 1, 0.68, 1);

  /* Layout */
  --max-width: 1160px;
}

/* ─── Reset ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background: var(--bg-base);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection {
  background: var(--accent-soft);
  color: var(--text-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── Skip Link ─── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent);
  color: var(--bg-base);
  padding: var(--space-2) var(--space-4);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  z-index: 10000;
  border-radius: 0 0 var(--radius-subtle) 0;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ─── Focus ─── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Container ─── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
  position: relative;
}

@media (min-width: 641px) {
  .container { padding: 0 var(--space-6); }
}

/* ─── Section spacing (mobile-first) ─── */
:root { --section-py: clamp(48px, 7vw, 96px); }

@media (min-width: 641px) {
  :root { --section-py: clamp(48px, 7vw, 96px); }
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Weight steps build hierarchy alongside size: bold display top, lighter as
   the scale descends — the contrast, not the size alone, signals importance. */
h1 { font-size: var(--text-5xl); font-weight: var(--w-bold); letter-spacing: -0.035em; }
h2 { font-size: var(--text-3xl); font-weight: var(--w-semibold); }
h3 { font-size: var(--text-xl); font-weight: var(--w-semibold); }
h4 { font-size: var(--text-lg); font-weight: var(--w-medium); }
h5 { font-weight: var(--w-medium); }

p { color: var(--text-secondary); font-weight: var(--w-regular); }

.text-gradient {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-muted { color: var(--text-muted); }

/* ─── Navbar ─── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.navbar.scrolled {
  background: var(--bg-elevated);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.03em;
}

.logo span {
  color: var(--accent);
}

.nav-links {
  display: none;
  position: fixed;
  inset: 68px 0 0;
  background: var(--bg-base);
  flex-direction: column;
  padding: var(--space-8);
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
  z-index: 99;
}

.nav-links.active { display: flex; }

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-subtle);
  transition: all var(--transition-fast);
}

.nav-links a:hover {
  color: var(--accent);
  background: transparent;
}

.nav-links a.active {
  color: var(--accent);
  background: transparent;
}

.menu-toggle {
  display: flex;
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-subtle);
}

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-base);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn-outline:hover {
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: var(--accent-soft);
}

.btn-large {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-pill);
}

.btn svg, .btn-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ─── Icons ─── */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--bg-card-hover);
}

/* ─── Badge ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge-warm {
  background: var(--accent-warm-soft);
  color: var(--accent-warm);
}

.badge-urgent {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-urgent);
}

/* ─── Hero ─── */
.hero {
  padding: var(--space-24) 0 var(--space-20);
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Notebook horizontal lines */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(245, 158, 11, 0.06) 31px,
      rgba(245, 158, 11, 0.06) 32px
    ),
    /* Notebook margin line */
    linear-gradient(90deg, transparent 39px, rgba(245, 158, 11, 0.10) 39px, rgba(245, 158, 11, 0.10) 40px, transparent 40px),
    /* Subtle glow orbs */
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 80%, rgba(251, 191, 36, 0.03) 0%, transparent 50%),
    /* Depth gradient */
    linear-gradient(135deg, #0a0a0f 0%, #111118 50%, #0a0a0f 100%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  gap: var(--space-12);
  align-items: center;
}

.hero-badge {
  margin-bottom: var(--space-6);
}

.hero h1 {
  margin-bottom: var(--space-6);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: wordReveal 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.hero h1 .word:nth-child(1) { animation-delay: 0.15s; }
.hero h1 .word:nth-child(2) { animation-delay: 0.23s; }
.hero h1 .word:nth-child(3) { animation-delay: 0.31s; }
.hero h1 .word:nth-child(4) { animation-delay: 0.39s; }
.hero h1 .word:nth-child(5) { animation-delay: 0.47s; }
.hero h1 .word:nth-child(6) { animation-delay: 0.55s; }

@keyframes wordReveal {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero p {
  font-size: var(--text-lg);
  font-weight: var(--w-light);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-8);
}
/* the lead's emphasis carries weight, not colour — bumps light → semibold */
.hero p strong { font-weight: var(--w-semibold); color: var(--text-primary); }

.hero-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.hero-contact {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.hero-contact a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.hero-contact a:hover {
  text-decoration: underline;
}

/* Hero card */
.hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  max-width: 360px;
  margin: 0 auto;
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  text-align: center;
}

.avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 3px solid var(--bg-card);
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 20px rgba(245, 158, 11, 0.15),
    inset 0 0 30px rgba(0,0,0,0.3);
}

.avatar-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.avatar-status {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.avatar-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-success);
  opacity: 0.6;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.avatar-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-success);
  border: 2px solid var(--bg-card);
}

@keyframes ping {
  0% { transform: scale(1); opacity: 0.6; }
  75%, 100% { transform: scale(2.5); opacity: 0; }
}

.teacher-info h2 {
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.teacher-tagline {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  margin-bottom: var(--space-5);
}

.features {
  list-style: none;
  text-align: left;
}

.features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}

.features li:last-child { border-bottom: none; }

.features .icon {
  color: var(--accent-success);
}

/* ─── Stats Bar ─── */
.stats-bar {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-8) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 420px;
  margin: 0 auto;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ─── Marquee ─── */
.marquee-section {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

.marquee-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-8);
  white-space: nowrap;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

.marquee-item .icon { color: var(--accent); }

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* "Teacher's correction" — the wrong word gets a red strike drawn left→right,
   the fix is written above it in the accent, slightly hand-tilted. Replaces the
   generic typewriter; on-theme for an English teacher. */
.correction {
  min-height: 2.4em;
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--w-medium);
  color: var(--text-secondary);
  line-height: 1.9;
  transition: opacity 0.4s ease;
}
.correction.is-out { opacity: 0; }

/* inline-block (not inline) is REQUIRED: iOS Safari mis-positions an absolutely
   positioned child of a position:relative *inline* element. inline-block fixes it. */
.corr-wrong {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: var(--text-primary);
}
.corr-wrong::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 56%;
  height: 2.5px;
  border-radius: 2px;
  background: #ef4444;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.corr-wrong.is-struck::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

.corr-fix {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -2px;
  font-family: var(--font-hand);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  -webkit-transform: translate(-50%, 7px) rotate(-4deg);
  transform: translate(-50%, 7px) rotate(-4deg);
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.corr-wrong.is-fixed .corr-fix {
  opacity: 1;
  -webkit-transform: translate(-50%, 0) rotate(-4deg);
  transform: translate(-50%, 0) rotate(-4deg);
}
/* little down-caret so the fix reads as "this replaces the word below" */
.corr-fix::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .corr-wrong::after { -webkit-transition: none; transition: none; }
  .corr-fix { -webkit-transition: none; transition: none; }
  .correction { -webkit-transition: none; transition: none; }
}

/* paragraph that hosts inline corrections needs head-room for the fix above */
.about-fix { line-height: 2.5; margin-top: var(--space-4); }

/* ── Reusable STATIC inline correction (works everywhere, no JS) ──
   <span class="ink"><span class="ink-fix">right</span>wrong</span>
   The wrong text is struck in red, the handwritten fix sits above in accent. */
.ink {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: inherit;
}
.ink::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 56%;
  height: 2px;
  border-radius: 2px;
  background: #ef4444;
}
.ink-fix {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -2px;
  -webkit-transform: translateX(-50%) rotate(-4deg);
  transform: translateX(-50%) rotate(-4deg);
  font-family: var(--font-hand);
  font-size: 1.5em;
  line-height: 1;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  pointer-events: none;
}
.ink-fix::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  opacity: 0.7;
}


.progress-path {
  position: relative;
  padding: var(--space-8) 0;
}

.path-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 3px;
  background: linear-gradient(180deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
  border-radius: 2px;
}

.path-nodes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  position: relative;
  padding-left: var(--space-6);
}

.path-node {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.path-node::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 3px solid var(--border);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.path-node.active::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.node-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-display);
}

.path-node.active .node-label {
  color: var(--accent);
}

.node-title {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

@media (min-width: 641px) {
  .path-line {
    top: calc(var(--space-8) + 8px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
    transform: none;
  }
  .path-nodes {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    padding-left: 0;
  }
  .path-node {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
}

.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  margin: 0 auto var(--space-8);
  font-size: var(--text-sm);
}

.chat-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-subtle);
  max-width: 80%;
  animation: chatPop 0.4s var(--transition-slow) both;
}

.chat-bubble-left {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-bottom-left-radius: var(--space-1);
}

.chat-bubble-right {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-bottom-right-radius: var(--space-1);
}

@keyframes chatPop {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.result-card.unlocked .result-level {
  animation: levelUnlock 0.8s var(--transition-slow) both;
}

@keyframes levelUnlock {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.result-card.unlocked .result-level h2 {
  animation: levelGlow 2s ease-in-out infinite;
}

@keyframes levelGlow {
  0%, 100% { text-shadow: 0 0 10px var(--accent-glow); }
  50% { text-shadow: 0 0 25px var(--accent-glow), 0 0 40px var(--accent-glow); }
}

.sound-wave-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
}

.sound-wave-wrap:hover {
  background: var(--accent-soft);
}

.sound-wave-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sound-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 20px;
  transition: opacity var(--transition-base);
}

.sound-wave-wrap[aria-pressed="true"] .sound-wave {
  opacity: 0.25;
}

.sound-wave-wrap[aria-pressed="true"] .sound-wave span {
  animation-play-state: paused;
}

.sound-wave span {
  display: block;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: soundWave 1.2s ease-in-out infinite;
}

.sound-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.sound-wave span:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.sound-wave span:nth-child(3) { height: 20px; animation-delay: 0.2s; }
.sound-wave span:nth-child(4) { height: 14px; animation-delay: 0.3s; }
.sound-wave span:nth-child(5) { height: 8px; animation-delay: 0.4s; }

@keyframes soundWave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.sound-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.sound-wave-wrap:hover .sound-label {
  color: var(--accent);
}

/* ─── Duolingo Test ─── */
.duolingo-test {
  max-width: 640px;
  margin: 0 auto;
}

.test-progress-bar {
  height: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.test-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
  transition: width 0.5s var(--transition-slow);
}

.test-progress-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
  text-align: center;
  font-weight: 500;
}

.test-question {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-8);
  text-align: center;
}

.test-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.test-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-subtle);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
  width: 100%;
}

.test-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.test-option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.test-option .option-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.test-option:hover .option-letter,
.test-option.selected .option-letter {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
}

/* Slide animations */
.slide-out-left {
  animation: slideOutLeft 0.3s var(--transition-slow) forwards;
}

.slide-in-right {
  animation: slideInRight 0.4s var(--transition-slow) forwards;
}

@keyframes slideOutLeft {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-40px); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.before-after-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}

.before-col h3,
.after-col h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-5);
  text-align: center;
}

.before-col h3 {
  color: var(--text-muted);
}

.after-col h3 {
  color: var(--accent);
}

.before-col ul,
.after-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.before-col li,
.after-col li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-subtle);
  font-size: var(--text-base);
}

.before-col li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.before-col li .icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.after-col li {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text-primary);
}

.after-col li .icon {
  color: var(--accent);
  flex-shrink: 0;
}

.ba-divider {
  display: none;
}

@media (min-width: 769px) {
  .before-after-grid {
    grid-template-columns: 1fr auto 1fr;
    max-width: none;
    align-items: start;
  }
  .ba-divider {
    display: block;
    width: 2px;
    background: linear-gradient(180deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
    align-self: stretch;
    opacity: 0.3;
    margin-top: var(--space-8);
  }
}

/* ─── Test Modal ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--transition-base), visibility 0.3s;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s var(--transition-base);
}

.modal-overlay.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.modal-close-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-body {
  /* extra top padding so content clears the absolutely-positioned close button */
  padding: var(--space-16) var(--space-6) var(--space-8);
}

.modal-body .page-header {
  padding: 0 0 var(--space-6);
}

.modal-body .page-header h1 {
  font-size: var(--text-2xl);
}

.modal-body .section {
  padding: 0;
}

.modal-body .duolingo-test {
  margin: 0;
}

.modal-body .result-card {
  margin: 0;
  animation: none;
}

/* ─── Sections ─── */
.section {
  padding: var(--section-py) 0;
}

.section-alt { background: var(--bg-elevated); }

.section-header {
  max-width: 560px;
  margin-bottom: var(--space-12);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  margin-bottom: var(--space-3);
}

.section-header p {
  color: var(--text-muted);
  font-size: var(--text-lg);
}

.page-header {
  background: var(--bg-elevated);
  padding: var(--space-16) 0 var(--space-10);
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  margin-bottom: var(--space-3);
}

.page-header p {
  color: var(--text-muted);
  font-size: var(--text-lg);
  max-width: 520px;
}

/* ─── Steps ─── */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 420px;
  margin: 0 auto;
  position: relative;
}

/* Connector line — mobile (vertical) */
.steps-grid::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  background: linear-gradient(180deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
  opacity: 0.4;
}

.step-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  transition: all var(--transition-base);
  position: relative;
}

.step-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.step-number {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  letter-spacing: 0.05em;
}

.step-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-subtle);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.step-icon .icon { width: 22px; height: 22px; }

.step-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.step-card p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ─── Pricing ─── */
.pricing-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: var(--space-10);
  font-size: var(--text-lg);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 420px;
  margin: 0 auto;
  align-items: start;
}

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
}

.pricing-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
  position: relative;
}

.pricing-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.price {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-3) 0 var(--space-1);
  line-height: 1;
}

.price span {
  font-size: var(--text-lg);
  color: var(--text-muted);
  font-weight: 500;
}

.old-price {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.save-text {
  color: var(--accent-success);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.pricing-features {
  list-style: none;
  text-align: left;
  margin: var(--space-6) 0;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-sm);
}

.pricing-features .icon {
  color: var(--accent-success);
  width: 16px;
  height: 16px;
}

/* ─── About ─── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

.about-text h2 {
  margin-bottom: var(--space-4);
}

.about-text p {
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

.about-text strong {
  color: var(--text-primary);
}

.about-services {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.about-services h3 {
  font-family: var(--font-body);
  color: var(--accent);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.about-services ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.about-services li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.about-services .icon {
  color: var(--accent);
}

.about-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 480px;
  margin: 0 auto;
  gap: var(--space-4);
}

.about-images img {
  width: 100%;
  border-radius: var(--radius-subtle);
  object-fit: cover;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  transition: all var(--transition-base);
}

.about-images img:hover {
  transform: scale(1.02);
  border-color: var(--border-hover);
}

/* ─── Testimonials ─── */
.testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  transition: all var(--transition-base);
}

.testimonial:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.testimonial-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.testimonial p {
  font-size: var(--text-lg);
  font-style: italic;
  margin-bottom: var(--space-5);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.testimonial .author {
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-sm);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 420px;
  margin: 0 auto;
}

/* ─── CTA ─── */
.cta-section {
  background: var(--bg-elevated);
  text-align: center;
  border-top: 1px solid var(--border);
}

.cta-section h2 {
  margin-bottom: var(--space-3);
}

.cta-section p {
  color: var(--text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Forms ─── */
.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  transition: all var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-label {
  display: block;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.form-label span {
  display: block;
  margin-bottom: var(--space-2);
}

/* ─── Test Form ─── */
.test-form {
  max-width: 680px;
  margin: 0 auto;
}

.question-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  transition: all var(--transition-fast);
}

.question-block:hover {
  border-color: var(--border-hover);
}

.q-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  line-height: var(--leading-snug);
}

/* Custom Radio */
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.radio-option:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.radio-option input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-muted);
  border-radius: var(--radius-full);
  margin-top: 3px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.radio-option input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--bg-card);
}

.radio-option:has(input:checked) {
  background: var(--accent-soft);
  color: var(--text-primary);
}

/* ─── Result Card ─── */
.result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-6);
  margin-top: var(--space-8);
  animation: fadeInUp 0.5s var(--transition-slow);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-level {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border);
}

.result-level .level-label {
  display: block;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-2);
}

.result-level h2 {
  font-size: var(--text-3xl);
}

.result-plan {
  background: var(--bg-elevated);
  border-radius: var(--radius-subtle);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.result-plan h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.result-plan p { margin: 0; font-size: var(--text-sm); }

.offer-card {
  background: var(--bg-elevated);
  border: 1px solid var(--accent-warm-soft);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  text-align: center;
  margin-bottom: var(--space-6);
}

.offer-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.offer-card > p {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.offer-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.offer-price .old {
  font-size: var(--text-xl);
  color: var(--text-muted);
  text-decoration: line-through;
}

.offer-price .new {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--accent-warm);
}

.offer-price .discount {
  background: var(--accent-urgent);
  color: var(--bg-base);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}

.offer-timer {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-4);
}

.result-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Assessment ─── */
.assessment-nav {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-10);
  flex-wrap: wrap;
}

.level-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.level-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.level-btn.active {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
}

.level-content {
  display: none;
  animation: fadeInUp 0.4s ease;
}

.level-content.active { display: block; }

.level-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.level-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: var(--space-3);
}

.level-badge.elementary { background: rgba(34, 197, 94, 0.15); color: var(--accent-success); }
.level-badge.intermediate { background: var(--accent-soft); color: var(--accent); }
.level-badge.upper { background: rgba(248, 113, 113, 0.15); color: var(--accent-urgent); }

.question-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  transition: all var(--transition-fast);
}

.question-group:hover {
  border-color: var(--border-hover);
}

.question-group h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.question-group .topic {
  color: var(--accent);
}

.question-group small {
  color: var(--text-muted);
  font-weight: 400;
  font-size: var(--text-sm);
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Custom Checkbox */
.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.check-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.check-item input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-muted);
  border-radius: var(--radius-subtle);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.check-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305070a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.check-item:has(input:checked) {
  color: var(--text-primary);
  background: var(--accent-soft);
}

.assessment-footer {
  margin-top: var(--space-10);
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-4);
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.5s var(--transition-slow);
}

.progress-text {
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}

/* ─── Calendar & Booking ─── */
.booking-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.calendar-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-6);
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.calendar-header h2 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  margin: 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.cal-day-header {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: var(--space-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-subtle);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.cal-day:hover:not(.disabled) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.cal-day.other {
  color: var(--text-muted);
  opacity: 0.4;
}

.cal-day.selected {
  background: var(--accent);
  color: var(--bg-base);
  font-weight: 700;
  border-color: var(--accent);
}

.cal-day.disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.booking-form-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-6);
}

.booking-form-wrapper h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.time-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.time-slot {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.time-slot:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.time-slot.selected {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  font-weight: 600;
}

.hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ─── Payment ─── */
.payment-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 420px;
  margin: 0 auto;
}

.payment-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  text-align: center;
  transition: all var(--transition-base);
}

.payment-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.payment-card.popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-glow);
}

.payment-card h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.pay-note-big {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  text-align: center;
  margin-top: var(--space-10);
}

.pay-note-big a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

/* ─── Modal ─── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-6);
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-8);
  max-width: 480px;
  width: 100%;
  position: relative;
  animation: fadeInUp 0.3s var(--transition-slow);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-subtle);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.pay-methods { margin: var(--space-6) 0; }

.pay-method {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  text-align: left;
  transition: border-color var(--transition-fast);
}

.pay-method:hover {
  border-color: var(--border-hover);
}

.pay-method h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pay-method p { font-size: var(--text-sm); margin: 0; }

.pay-method code {
  background: var(--bg-card-hover);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-subtle);
  font-family: 'Fira Code', monospace;
  font-size: var(--text-xs);
  color: var(--accent);
}

.pay-note {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

/* ─── Footer ─── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-8) 0;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ─── Utilities ─── */
.hidden { display: none !important; }
.strike { text-decoration: line-through; opacity: 0.5; }

/* ─── SPA Transitions ─── */
#main-content {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.page-exit {
  opacity: 0;
  transform: translateY(8px);
}

.page-enter {
  opacity: 0;
  transform: translateY(-8px);
}

.page-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.spa-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  z-index: 10000;
  width: 0;
  transition: width 0.2s ease;
  pointer-events: none;
}

.spa-loader.loading {
  width: 70%;
  transition: width 0.4s ease;
}

.spa-loader.done {
  width: 100%;
  transition: width 0.15s ease;
  opacity: 0;
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--transition-slow), transform 0.5s var(--transition-slow);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track { animation: none; }
}

/* ─── Responsive ─── */
@media (min-width: 1025px) {
  .hero .container {
    grid-template-columns: 1fr 380px;
    text-align: left;
    gap: var(--space-16);
  }
  .hero h1, .hero p { margin-left: 0; margin-right: 0; }
  .hero-card { max-width: none; margin: 0; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .about-images { max-width: none; margin: 0; }
  .booking-layout { grid-template-columns: 1fr 360px; }
}

@media (min-width: 769px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
  .steps-grid::before {
    left: 16%;
    right: 16%;
    top: 28px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--border) 0%, var(--accent) 50%, var(--border) 100%);
  }
  .pricing-grid { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
  .payment-options { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); max-width: none; margin: 0; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); max-width: none; margin: 0; }
  .testimonial-featured { grid-column: span 2; }
  .nav-links {
    display: flex;
    position: static;
    inset: auto;
    background: transparent;
    flex-direction: row;
    padding: 0;
    gap: var(--space-6);
    border-bottom: none;
  }
  .menu-toggle { display: none; }
  .section-header { text-align: left; margin-left: 0; margin-right: 0; }
  .level-btn { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); }
  .question-group { padding: var(--space-6); }
  .result-card { padding: var(--space-10); }
}


/* ===== recovered late-edit rules (balanced) 2026-06-02 ===== */
.stat-rating {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}
.stat-rating .rating-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.stat-rating .stars {
  transform: translateY(-2px);
}
.stat-rating .stars .icon {
  width: 16px;
  height: 16px;
}
.stars-row {
  margin-bottom: var(--space-4);
}
.stars-row .icon {
  width: 16px;
  height: 16px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.trust-pill:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.trust-pill .icon {
  color: var(--accent);
  width: 14px;
  height: 14px;
}
.trust-strip {
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--accent);
}
.stars .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: currentColor;
}
.stars {
  transform: translateY(-2px);
}
.stars .icon {
  width: 16px;
  height: 16px;
}
.rating-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.trust-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.author-name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}
.author-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.avatar-initials {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  border: 1px solid var(--accent);
}
.author-role {
  color: var(--text-muted);
  font-size: var(--text-xs);
}
.stars-row {
  margin-bottom: var(--space-4);
  filter: drop-shadow(0 1px 4px var(--accent-glow));
}
.stars-row .icon {
  width: 20px;
  height: 20px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.trust-pill:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}
.trust-pill .icon {
  color: var(--accent);
  width: 16px;
  height: 16px;
}
.trust-strip {
  background:
    linear-gradient(180deg, transparent 0%, rgba(245, 158, 11, 0.04) 50%, transparent 100%),
    var(--bg-base);
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
}
.stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
}
.stars .icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
}
.trust-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
}
.stat-rating .stars .icon {
  width: 22px;
  height: 22px;
}
.stars .icon {
  width: 22px;
  height: 22px;
}
.avatar-initials {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--bg-base);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* ===== Booking calendar (real day-grouped grid) ===== */
.booking-cal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}
.cal-day {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  padding: var(--space-5);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.cal-day:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cal-day-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.cal-dow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.cal-dnum {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.cal-mon {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cal-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: var(--space-2);
}
.cal-time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.cal-time:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
  box-shadow: var(--shadow-glow);
}
.cal-note {
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ===== Assessment self-check form ===== */
#assessForm { padding: var(--space-8); }
#assessForm fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  padding: var(--space-5) var(--space-6) var(--space-6);
  margin-bottom: var(--space-6);
}
#assessForm legend {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding: 0 var(--space-2);
}
#assessForm label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-top: var(--space-2);
  border-radius: var(--radius-subtle);
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
#assessForm label:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
#assessForm .assess-skill {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-hover);
  border-radius: var(--radius-subtle);
  background: var(--bg-elevated);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
#assessForm .assess-skill::after {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--bg-base);
  border-bottom: 2.5px solid var(--bg-base);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
#assessForm .assess-skill:checked {
  background: var(--accent);
  border-color: var(--accent);
}
#assessForm .assess-skill:checked::after { opacity: 1; }
#assessForm .assess-skill:hover { border-color: var(--accent); }
#assessForm label:has(.assess-skill:checked) {
  background: var(--accent-soft);
  color: var(--text-primary);
}
#assessForm .btn { margin-top: var(--space-2); }

/* ===== Award-craft layer (2026-06-03): grain, cursor, progress, tilt ===== */

/* Film-grain overlay — subtle premium texture */
.grain {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-warm));
  box-shadow: var(--shadow-glow);
  will-change: transform;
}

/* Custom cursor */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1001;
  mix-blend-mode: difference;
  opacity: 0;
  will-change: transform;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: #fff;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid #fff;
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, background 0.25s ease;
}
.cursor-ring.cursor-hover {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(255, 255, 255, 0.12);
}
.cursor-ring.cursor-down {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
}
body.has-custom-cursor .cursor-dot,
body.has-custom-cursor .cursor-ring { opacity: 1; }
@media (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor label,
  body.has-custom-cursor .btn,
  body.has-custom-cursor .cal-time { cursor: none; }
}

/* Tilt / magnetic smoothing */
.pricing-card,
.step-card,
.testimonial,
.hero-card,
.path-node { transform-style: preserve-3d; }
.btn-large { will-change: transform; }

/* Hide award motion for reduced-motion / coarse pointers */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .cursor-dot,
  .cursor-ring { display: none; }
}
@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none; }
}

/* ===== FAQ accordion (Ch7) ===== */
.faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  padding: 0 var(--space-5);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.faq-item[open] {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  transition: transform var(--transition-base);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 0 var(--space-5);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.faq-item a { color: var(--accent); }

/* ===== Icon micro-animations ===== */
.icon { transition: transform var(--transition-base); }
/* hover lift/rotate where the icon sits inside an interactive element */
.btn:hover .icon { transform: translateY(-1px) scale(1.08); }
.trust-pill:hover .icon { transform: rotate(-8deg) scale(1.1); }
.features li:hover .icon { transform: scale(1.2); }
.faq-item summary:hover::after { transform: scale(1.15); }
/* step-icon: gentle idle float + pop on card hover */
.step-icon .icon { animation: iconFloat 3.2s ease-in-out infinite; }
.step-card:nth-child(2) .step-icon .icon { animation-delay: .4s; }
.step-card:nth-child(3) .step-icon .icon { animation-delay: .8s; }
.step-card:hover .step-icon { transform: translateY(-3px) scale(1.06); transition: transform var(--transition-base); }
.step-card:hover .step-icon .icon { animation-play-state: paused; transform: rotate(6deg) scale(1.12); }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* stars: subtle staggered twinkle */
.stars .icon { animation: starTwinkle 2.6s ease-in-out infinite; }
.stars .icon:nth-child(2){animation-delay:.2s} .stars .icon:nth-child(3){animation-delay:.4s}
.stars .icon:nth-child(4){animation-delay:.6s} .stars .icon:nth-child(5){animation-delay:.8s}
@keyframes starTwinkle { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:.85} }
/* hero badge award icon: slow rotate-in on load */
.hero-badge .icon { animation: badgeSpin .9s ease-out 1; }
@keyframes badgeSpin { 0%{transform:rotate(-180deg) scale(0);opacity:0} 100%{transform:rotate(0) scale(1);opacity:1} }
@media (prefers-reduced-motion: reduce) {
  .icon, .step-icon .icon, .stars .icon, .hero-badge .icon { animation: none !important; transition: none !important; }
}

/* ===== Custom scrollbar (dark theme) ===== */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.55) var(--bg-elevated);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-elevated); }
::-webkit-scrollbar-thumb {
  background: var(--bg-card-hover);
  border-radius: 999px;
  border: 2px solid var(--bg-elevated);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--bg-elevated); }
/* modal scroll: pad so content doesn't sit under the rounded corner / close button */
.modal-container { scrollbar-gutter: stable; }

/* ===== Clickable Path-to-Fluency nodes (open the level test) ===== */
a.path-node { text-decoration: none; cursor: pointer; transition: transform var(--transition-base); }
a.path-node:hover { transform: translateY(-3px); }
a.path-node:hover::before { border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
a.path-node:hover .node-label { color: var(--accent); }
a.path-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-subtle); }

/* ===== Booking month calendar (recovered design) ===== */
.bcal-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.bcal, .bcal-side {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  padding: var(--space-6);
}
.bcal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.bcal-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}
.bcal-nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.bcal-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bcal-nav:disabled { opacity: 0.3; cursor: default; }
.bcal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.bcal-dow span {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}
.bcal-cell {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-subtle);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  background: none;
  color: var(--text-muted);
}
.bcal-empty { background: none; }
.bcal-off { color: var(--text-muted); opacity: 0.35; }
.bcal-has {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.bcal-has:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.bcal-sel {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg-base) !important;
  box-shadow: var(--shadow-glow);
}
.bcal-side h3 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.bcal-hint { color: var(--text-muted); font-size: var(--text-sm); }
.bcal-times { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.bcal-time {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.bcal-time:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-base); box-shadow: var(--shadow-glow); }
@media (max-width: 768px) { .bcal-wrap { grid-template-columns: 1fr; } }

/* per-time row with add-to-calendar */
.bcal-time-row { display: flex; align-items: center; gap: var(--space-2); }
.bcal-time-row .bcal-time { flex: 1; }
.bcal-addcal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: var(--radius-subtle);
  background: var(--bg-elevated); color: var(--text-muted);
  transition: all var(--transition-fast);
}
.bcal-addcal:hover { border-color: var(--accent); color: var(--accent); }
.bcal-times { flex-direction: column; align-items: stretch; }

/* booking side-panel actions */
.bcal-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.bcal-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
.bcal-time.sel { background: var(--accent); border-color: var(--accent); color: var(--bg-base); box-shadow: var(--shadow-glow); }
.bcal-msg { margin-top: var(--space-3); color: var(--accent); font-size: var(--text-sm); }

/* ===== Trust-strip as infinite marquee (awwwards) ===== */
.trust-strip.marquee {
  overflow: hidden;
  padding: var(--space-5) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .trust-pills {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-right: var(--space-3);   /* seam spacing so -50% loops seamlessly */
  margin: 0;
}
.marquee .trust-pill { flex: 0 0 auto; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee.trust-strip { overflow-x: auto; }
}

/* ===== Big typographic marquee (awwwards) ===== */
.marquee .mq-row {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
.mq-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  padding: 0 var(--space-5);
}
.mq-item:nth-child(4n+1) { color: var(--accent); }
.mq-sep {
  font-size: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  color: var(--accent);
  opacity: 0.7;
}
.trust-strip.marquee { padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }

/* ===== Full assessment test ===== */
.assess-level {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent);
  margin: var(--space-10) 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.assess-blocks { display: flex; flex-direction: column; gap: var(--space-3); }
.assess-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  padding: 0 var(--space-5);
  transition: border-color var(--transition-base);
}
.assess-block[open] { border-color: var(--border-hover); background: var(--bg-card-hover); }
.assess-block summary {
  list-style: none; cursor: pointer;
  padding: var(--space-4) 0;
  display: flex; align-items: baseline; gap: var(--space-3);
  color: var(--text-primary); font-weight: 500;
}
.assess-block summary::-webkit-details-marker { display: none; }
.assess-num {
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}
.assess-q0 { color: var(--text-primary); }
.assess-qs { margin: 0 0 var(--space-5); padding-left: var(--space-8); color: var(--text-secondary); line-height: var(--leading-normal); }
.assess-qs li { margin: var(--space-2) 0; }
.assess-end {
  text-align: center; font-family: var(--font-display); font-weight: 600;
  color: var(--accent-success); background: var(--bg-elevated);
  border: 1px dashed var(--border); border-radius: var(--radius-soft);
  padding: var(--space-3); margin: var(--space-5) 0;
}
.assess-cta { text-align: center; margin-top: var(--space-10); }
.assess-cta p { color: var(--text-secondary); margin-bottom: var(--space-5); }

/* clickable How-It-Works step cards */
a.step-card { text-decoration: none; color: inherit; cursor: pointer; display: block; }
a.step-card h3, a.step-card p { color: inherit; }

/* booking contact form + confirmation */
.bcal-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.bcal-form input, .bcal-form textarea {
  width: 100%; font: inherit;
  padding: 0.6rem 0.8rem; border-radius: var(--radius-subtle);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary);
}
.bcal-form input:focus, .bcal-form textarea:focus { outline: none; border-color: var(--accent); }
.bcal-form textarea { resize: vertical; }
.bcal-done { text-align: center; margin-top: var(--space-5); }
.bcal-done-badge {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-success); color: var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto var(--space-3);
}
.bcal-done h4 { font-family: var(--font-display); margin-bottom: var(--space-2); }
.bcal-done p { color: var(--text-secondary); margin-bottom: var(--space-4); font-size: var(--text-sm); }

/* footer credit */
.footer-credit { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.footer-credit a { color: var(--text-secondary); text-decoration: none; }
.footer-credit a:hover { color: var(--accent); }

/* review submission form */
.review-form-wrap { max-width: 640px; margin: var(--space-8) auto 0; text-align: center; }
.review-form-wrap > summary { display: inline-flex; cursor: pointer; list-style: none; }
.review-form-wrap > summary::-webkit-details-marker { display: none; }
.review-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); text-align: left; }
.review-form input, .review-form textarea, .review-form select {
  width: 100%; font: inherit; padding: 0.6rem 0.8rem;
  border-radius: var(--radius-subtle); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-primary);
}
.review-form input:focus, .review-form textarea:focus, .review-form select:focus { outline: none; border-color: var(--accent); }
.review-thanks { margin-top: var(--space-5); color: var(--accent-success); font-weight: 600; }

/* always-visible review form card */
.review-form-wrap {
  max-width: 640px; margin: var(--space-10) auto 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-soft); padding: var(--space-6); text-align: left;
}
.review-form-title {
  font-family: var(--font-display); font-size: var(--text-lg);
  margin-bottom: var(--space-4); text-align: center;
}
.review-form { margin-top: 0; }

/* ===== Admin dashboard ===== */
.admin-body { background: var(--bg-base); color: var(--text-primary); }
.adm-top { border-bottom: 1px solid var(--border); background: var(--bg-elevated); padding: var(--space-4) 0; }
.adm-top-in { display: flex; align-items: center; justify-content: space-between; }
.adm-link { color: var(--accent); text-decoration: none; }
.adm-main { max-width: 1500px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-16); display: flex; flex-direction: column; gap: var(--space-6); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.adm-col-main, .adm-col-side { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
@media (max-width: 1000px) { .adm-grid { grid-template-columns: 1fr; } }
.adm-table-wrap { overflow-x: auto; }
.adm-table-wrap .adm-table { font-size: var(--text-sm); }
.adm-table-wrap .adm-table th, .adm-table-wrap .adm-table td { padding: var(--space-2) var(--space-3); white-space: nowrap; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); }
.adm-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-soft); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.adm-kpi-hot { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.adm-kpi-n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; }
.adm-kpi-hot .adm-kpi-n { color: var(--accent); }
.adm-kpi-l { font-size: var(--text-sm); color: var(--text-muted); }
.adm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-soft); padding: var(--space-6); }
.adm-h2 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-4); }
.adm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.adm-cal-title { font-family: var(--font-display); font-size: var(--text-lg); text-transform: capitalize; }
.adm-cell { position: relative; flex-direction: column; gap: 2px; padding: var(--space-2); }
.adm-cell-d { font-weight: 600; }
.adm-cell-meta { font-size: 10px; color: var(--text-muted); }
.adm-has-free { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); color: var(--text-primary); cursor: pointer; }
.adm-full { background: var(--accent-soft); border-color: rgba(245,158,11,0.35); color: var(--text-primary); cursor: pointer; }
.adm-cell.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.adm-cell-req { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-urgent); box-shadow: 0 0 6px var(--accent-urgent); }
.adm-legend { display: flex; gap: var(--space-5); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); flex-wrap: wrap; }
.adm-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.lg-free { background: rgba(34,197,94,0.5); } .lg-book { background: var(--accent); } .lg-req { background: var(--accent-urgent); border-radius: 50%; }
.adm-day { margin-top: var(--space-5); }
.adm-day-slots { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-slot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-subtle); }
.adm-slot-t { font-weight: 600; min-width: 56px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.adm-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding-bottom: var(--space-2); }
.adm-table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-top: 1px solid var(--border); }
.adm-review { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.adm-review p { color: var(--text-secondary); margin: var(--space-2) 0 var(--space-3); }
.adm-inline { display: inline; }
.adm-sm { padding: 0.3rem 0.8rem !important; font-size: var(--text-sm); }
.adm-danger { color: var(--accent-urgent); }
.adm-muted { color: var(--text-muted); }
.adm-addform { display: flex; gap: var(--space-4); align-items: end; flex-wrap: wrap; }
.adm-addform input { padding: 0.5rem; border-radius: var(--radius-subtle); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-primary); }

/* ===== Focus attention on ONE primary CTA ===== */
/* dim the marquee so it recedes behind the hero button */
.trust-strip.marquee { opacity: 0.5; }
.mq-item { color: var(--text-muted); font-weight: 600; }
.mq-item:nth-child(4n+1) { color: var(--text-secondary); }   /* no accent — keep it quiet */
.mq-sep { color: var(--text-muted); opacity: 0.5; }
/* ghost secondary button: present but quiet, lets the primary win */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.btn-ghost:hover { color: var(--accent); background: var(--accent-soft); }

/* hero promo — one editorial line, no pills/glow. A live dot, the offer in
   weight, the deadline as a quiet tracked eyebrow. */
.hero-promo {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
}
.promo-key {
  font-size: var(--text-sm);
  font-weight: var(--w-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.promo-sub {
  font-size: var(--text-xs);
  font-weight: var(--w-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.promo-sub b {
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Stripe embedded checkout overlay */
.stripe-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.stripe-overlay[hidden] { display: none; }
.stripe-modal {
  width: min(480px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--bg-card, #16161c);
  border: 1px solid var(--border);
  border-radius: var(--radius-soft);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.stripe-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.stripe-modal-title {
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stripe-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}
.stripe-close:hover { color: var(--text-primary); }
.stripe-mount { min-height: 320px; background: #fff; }
.stripe-loading {
  padding: var(--space-12) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── Lesson platform trust badges (Zoom / Google Meet / Telegram) ── */
.platforms-strip { padding: var(--space-7) var(--space-4); border-bottom: 1px solid var(--border); }
.platforms { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.platforms-label { font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.platform { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--w-semibold); color: var(--text-secondary); }
.platform .icon { width: 20px; height: 20px; }
.platform-zoom .icon { color: #0B5CFF; }
.platform-meet .icon { color: #00AC47; }
.platform-tg .icon { color: #26A5E4; }
.platform:hover { color: var(--text-primary); }

/* ═══════════════ Level-test game (/assessment) — clean rebuild ═══════════════
   Premium dark + amber, generous type, depth cards, bottom feedback sheet. */
.quiz-section { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: clamp(24px,4vw,48px) var(--space-4); overflow-x: hidden; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 100% 34px; }
/* warm glow + vignette for depth */
.quiz-section::before { content:""; position:absolute; left:50%; top:6%; width:min(760px,120vw); height:460px; transform:translateX(-50%); border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; background:radial-gradient(circle,rgba(245,158,11,0.07),transparent 60%); }
.quiz-section::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,0.45)); }
.quiz { position: relative; z-index: 1; width: 100%; max-width: 600px; }
.quiz-screen { text-align: center; animation: quizIn .4s ease; }
@keyframes quizIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* start screen */
.quiz-eyebrow { display:inline-block; font-size:var(--text-xs); font-weight:var(--w-medium); letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-4); }
.quiz-h1 { font-size:var(--text-4xl); line-height:1.05; margin-bottom:var(--space-5); }
.quiz-lead { font-size:var(--text-lg); font-weight:var(--w-light); color:var(--text-secondary); max-width:42ch; margin:0 auto var(--space-7); }
.quiz-lead b { font-weight:var(--w-semibold); color:var(--text-primary); }
.quiz-sub { font-size:var(--text-sm); color:var(--text-muted); margin-top:var(--space-4); }

/* top bar */
.quiz-top { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-8); }
.quiz-quit { background:none; border:none; font-size:24px; line-height:1; color:var(--text-muted); cursor:pointer; flex:none; transition:color .15s; }
.quiz-quit:hover { color:var(--text-primary); }
.quiz-bar { flex:1; height:14px; border-radius:var(--radius-pill); background:var(--bg-elevated); overflow:hidden; }
.quiz-bar > span { display:block; height:100%; width:0; border-radius:var(--radius-pill); background:linear-gradient(90deg,var(--accent),var(--accent-hover)); box-shadow:0 0 14px -2px var(--accent); transition:width .5s cubic-bezier(.65,0,.35,1); }
.quiz-hearts { display:flex; gap:5px; flex:none; }
.quiz-heart svg { width:26px; height:26px; fill:#f0463a; filter:drop-shadow(0 2px 5px rgba(255,75,110,.4)); transition:transform .2s; }
.quiz-heart.is-empty svg { fill:#2c2c34; filter:none; }
.quiz-heart.just-lost { animation:heartPop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes heartPop { 0%{transform:scale(1)} 25%{transform:scale(1.55) rotate(-14deg)} 55%{transform:scale(.85)} 100%{transform:scale(1)} }

/* question */
.quiz-stage { animation:none; }
.quiz-stage.q-in { animation:qStage .42s cubic-bezier(.22,1,.36,1); }
@keyframes qStage { from{opacity:0;transform:translateY(12px) scale(.99)} to{opacity:1;transform:none} }
.quiz-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-6); }
.quiz-band { font-size:var(--text-xs); font-weight:var(--w-bold); letter-spacing:.1em; color:var(--accent); background:var(--accent-soft); padding:4px 11px; border-radius:var(--radius-pill); }
.quiz-count { font-size:var(--text-sm); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.quiz-q { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:var(--w-bold); line-height:1.25; letter-spacing:-.02em; color:var(--text-primary); margin-bottom:var(--space-8); }

/* options — depth cards */
.quiz-opts { display:grid; gap:var(--space-3); }
.quiz-opt { display:flex; align-items:center; gap:var(--space-4); width:100%; text-align:left; padding:var(--space-4) var(--space-5); font-size:var(--text-lg); font-weight:var(--w-medium); color:var(--text-primary); background:var(--bg-card); border:1px solid var(--border); border-radius:16px; cursor:pointer; box-shadow:0 8px 22px -16px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04); transition:transform .12s, border-color .15s, background .15s, box-shadow .15s; }
.quiz-stage.q-in .quiz-opt { opacity:0; animation:optIn .42s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(.14s + var(--oi,0)*.07s); }
@keyframes optIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.quiz-opt .opt-key { flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; border:1px solid var(--border); background:rgba(255,255,255,0.04); font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); color:var(--text-muted); transition:all .15s; }
.quiz-opt:not(:disabled):hover .opt-key { border-color:var(--accent); color:var(--accent); }
.quiz-opt .opt-txt { flex:1; }
.quiz-opt.is-correct .opt-key { background:rgba(245,158,11,0.18); border-color:rgba(245,158,11,0.5); color:#fbbf24; }
.quiz-opt.is-wrong .opt-key { background:rgba(240,70,58,0.18); border-color:rgba(240,70,58,0.5); color:#f7a59b; }
.quiz-opt.is-wrong .opt-txt { text-decoration:line-through; text-decoration-color:#f0463a; text-decoration-thickness:2px; }
.quiz-opt .opt-mark { display:none; }
.quiz-opt:not(:disabled):hover { border-color:var(--accent); background:var(--bg-elevated); transform:translateY(-2px); }
.quiz-opt:not(:disabled):active { transform:translateY(0); }
.quiz-opt:disabled { cursor:default; }
.quiz-opt.is-correct { background:var(--bg-card); border-color:rgba(245,158,11,0.6); box-shadow:inset 0 0 0 999px rgba(245,158,11,0.07); animation:optPop .45s cubic-bezier(.34,1.56,.64,1); }
.quiz-opt.is-correct .opt-txt { color:#fbbf24; font-weight:var(--w-semibold); }
.quiz-opt.is-correct .opt-mark { background:#f59e0b; color:#1a1205; opacity:1; transform:scale(1); }
.quiz-opt.is-wrong { background:var(--bg-card); border-color:rgba(240,70,58,0.55); box-shadow:inset 0 0 0 999px rgba(240,70,58,0.06); }
.quiz-opt.is-wrong .opt-txt { color:#f7a59b; }
.quiz-opt.is-wrong .opt-mark { background:#f0463a; color:#2a0610; opacity:1; transform:scale(1); }
.quiz-opt.is-dim { opacity:.4; }
@keyframes optPop { 0%{transform:scale(1)} 35%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* bottom feedback sheet */
.quiz-foot { margin-top:var(--space-6); padding:var(--space-5); border:1.5px solid var(--border); border-radius:20px; background:var(--bg-card); display:flex; flex-direction:column; gap:var(--space-4); animation:footUp .36s cubic-bezier(.22,1,.36,1); }
.quiz-foot[hidden] { display:none; }
@keyframes footUp { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.quiz-foot.is-ok { border-color:#f59e0b; background:#241a07; }
.quiz-foot.is-bad { border-color:#f0463a; background:#2a1411; }
.quiz-foot .quiz-verdict, .quiz-foot .quiz-next { width:100%; max-width:600px; }
.quiz-verdict { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); text-align:left; font-size:var(--text-lg); font-weight:var(--w-semibold); }
.quiz-vline { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2) var(--space-3); }
.quiz-vmark { display:inline-flex; align-items:center; justify-content:center; flex:none; }
.quiz-foot.is-ok .quiz-verdict { color:#fbbf24; }
.quiz-foot.is-ok .quiz-vmark { color:#f59e0b; }
.quiz-foot.is-bad .quiz-verdict { color:#f7a59b; }
.quiz-foot.is-bad .quiz-vmark { color:#f0463a; }
.quiz-xp { color:var(--accent); font-weight:var(--w-bold); }
.quiz-streak { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:var(--radius-pill); }
/* the fix as a bold handwritten "margin note" — the signature moment */
.quiz-fix { font-family:var(--font-hand); font-size:2.6em; line-height:0.95; color:var(--accent); transform:rotate(-3deg); transform-origin:left center; margin:2px 0 4px; }
.quiz-why { width:100%; font-size:var(--text-sm); font-weight:var(--w-regular); color:var(--text-muted); }

/* teacher's ink-stamp ✓ slammed onto the correct answer */
.quiz-stamp { position:fixed; z-index:9999; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:3px solid #f59e0b; border-radius:50%; color:#f59e0b; font-size:28px; font-weight:900; pointer-events:none; animation:stampIn .85s cubic-bezier(.34,1.3,.5,1) forwards; }
@keyframes stampIn { 0%{opacity:0; transform:scale(2.4) rotate(-22deg)} 22%{opacity:1; transform:scale(.92) rotate(-10deg)} 35%{transform:scale(1.04) rotate(-12deg)} 100%{opacity:0; transform:scale(1) rotate(-12deg)} }
@media (prefers-reduced-motion:reduce){ .quiz-stamp{display:none} }
/* chunky CONTINUE — brand amber, pushable */
.quiz-next.btn { border:none; border-radius:16px; padding:var(--space-4) var(--space-6); font-family:var(--font-display); font-weight:700; font-size:var(--text-base); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; background:var(--accent); color:#1a1205; border-bottom:4px solid rgba(0,0,0,.35); transition:transform .07s, filter .15s; }
.quiz-next.btn:hover { filter:brightness(1.06); }
.quiz-next.btn:active { transform:translateY(2px); border-bottom-width:2px; }

/* floating +XP */
.quiz-xpfloat { position:fixed; z-index:9999; transform:translate(-50%,0); font-family:var(--font-display); font-weight:800; font-size:var(--text-xl); color:var(--accent); text-shadow:0 2px 10px rgba(0,0,0,.5); pointer-events:none; animation:xpRise 1.1s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes xpRise { 0%{opacity:0;transform:translate(-50%,10px) scale(.8)} 18%{opacity:1;transform:translate(-50%,-6px) scale(1.1)} 100%{opacity:0;transform:translate(-50%,-72px) scale(1)} }

/* result */
.quiz-level-big { font-family:var(--font-display); font-size:clamp(3.5rem,10vw,6rem); font-weight:var(--w-bold); line-height:1; color:var(--accent); margin:var(--space-2) 0 var(--space-6); text-shadow:0 0 50px rgba(245,158,11,.3); }
.quiz-level-big span { display:block; font-size:var(--text-xl); font-weight:var(--w-medium); color:var(--text-secondary); letter-spacing:.02em; }
.quiz-path { display:flex; justify-content:space-between; max-width:420px; margin:0 auto var(--space-6); position:relative; }
.quiz-path::before { content:""; position:absolute; left:6%; right:6%; top:5px; height:2px; background:var(--border); }
.quiz-dot { position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); flex:1; }
.quiz-dot i { width:12px; height:12px; border-radius:50%; background:var(--bg-elevated); border:2px solid var(--border); z-index:1; }
.quiz-dot b { font-size:var(--text-xs); color:var(--text-muted); font-weight:var(--w-medium); }
.quiz-dot.is-on i { background:var(--accent); border-color:var(--accent); }
.quiz-dot.is-on b { color:var(--text-secondary); }
.quiz-dot.is-now i { transform:scale(1.5); box-shadow:0 0 0 4px rgba(245,158,11,.18),0 0 22px rgba(245,158,11,.7); }
.quiz-dot.is-now b { color:var(--accent); font-weight:var(--w-bold); }
.quiz-scoreline { display:flex; justify-content:center; gap:var(--space-6); margin-bottom:var(--space-5); color:var(--text-muted); font-size:var(--text-sm); }
.quiz-scoreline b { color:var(--text-primary); font-size:var(--text-lg); font-family:var(--font-display); }
.quiz-result-cta { display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); }

@media (max-width:560px){ .quiz-q{font-size:var(--text-2xl)} .quiz-heart svg{width:22px;height:22px} }
@media (prefers-reduced-motion:reduce){ .quiz-screen,.quiz-stage.q-in,.quiz-stage.q-in .quiz-opt,.quiz-opt.is-correct,.quiz-heart.just-lost,.quiz-foot,.quiz-xpfloat{animation:none} .quiz-section::before{display:none} }

/* ════ Level-test — reference rebuild: contained card, 2×2, timer, hint ════ */
.quiz-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:26px; padding:clamp(20px,3.5vw,34px); box-shadow:0 30px 80px -40px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.04); }
.quiz-top { margin-bottom:var(--space-6); }
.quiz-quit { display:inline-flex; }
.quiz-quit .icon { width:20px; height:20px; }
/* meta row: band · timer · count */
.quiz-meta { gap:var(--space-3); }
.quiz-timer { display:inline-flex; align-items:center; gap:5px; font-size:var(--text-sm); font-weight:var(--w-semibold); font-variant-numeric:tabular-nums; color:var(--accent); background:var(--accent-soft); padding:4px 11px; border-radius:var(--radius-pill); }
.quiz-timer .icon { width:15px; height:15px; }
.quiz-timer.is-low { color:#f0463a; background:rgba(240,70,58,0.14); animation:tick 1s steps(1) infinite; }
@keyframes tick { 50%{opacity:.55} }
/* 2×2 answer grid */
.quiz-opts { grid-template-columns:1fr 1fr; gap:var(--space-3); }
.quiz-opt { padding:var(--space-4); font-size:var(--text-base); }
.quiz-opt.is-out { opacity:.22; }
@media (max-width:520px){ .quiz-opts{ grid-template-columns:1fr; } }
/* hint button */
.quiz-hint { display:inline-flex; align-items:center; gap:6px; margin:var(--space-5) auto 0; padding:8px 16px; background:transparent; border:1px solid var(--border); border-radius:var(--radius-pill); color:var(--text-secondary); font-size:var(--text-sm); font-weight:var(--w-medium); cursor:pointer; transition:all .15s; }
.quiz-hint .icon { width:16px; height:16px; color:var(--accent); }
.quiz-hint b { color:var(--accent); }
.quiz-hint:not(:disabled):hover { border-color:var(--accent); color:var(--text-primary); }
.quiz-hint:disabled { opacity:.4; cursor:default; }
/* feedback now lives inside the card */
.quiz-foot { margin:var(--space-5) calc(-1 * clamp(20px,3.5vw,34px)) calc(-1 * clamp(20px,3.5vw,34px)); padding:var(--space-5) clamp(20px,3.5vw,34px) clamp(20px,3.5vw,34px); border:none; border-top:1.5px solid var(--border); border-radius:0 0 26px 26px; }
.quiz-foot.is-ok { border-top-color:#f59e0b; background:rgba(245,158,11,0.05); }
.quiz-foot.is-bad { border-top-color:#f0463a; background:rgba(240,70,58,0.05); }
/* check/cross icons in verdict + stamp */
.quiz-vmark .icon { width:26px; height:26px; }
.quiz-stamp .icon { width:30px; height:30px; }
.quiz-opt.is-correct .opt-mark, .quiz-opt.is-wrong .opt-mark { display:none; }

/* ════ feedback as a centered animated popup (overrides inline foot) ════ */
.quiz-foot { position:fixed; inset:0; z-index:200; margin:0; padding:var(--space-4); display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.62); backdrop-filter:blur(6px); border:none; border-radius:0; animation:popBack .2s ease; }
.quiz-foot[hidden]{ display:none; }
.quiz-foot.is-ok, .quiz-foot.is-bad { background:rgba(0,0,0,0.62); }
.quiz-foot.closing { animation:popBackOut .22s ease forwards; }
@keyframes popBack { from{opacity:0} to{opacity:1} }
@keyframes popBackOut { to{opacity:0} }
.quiz-pop { width:100%; max-width:440px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:22px; padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); box-shadow:0 40px 100px -40px rgba(0,0,0,0.92); animation:popIn .34s cubic-bezier(.34,1.4,.5,1); }
.quiz-foot.closing .quiz-pop { animation:popOut .22s ease forwards; }
@keyframes popIn { 0%{opacity:0; transform:translateY(22px) scale(.93)} 100%{opacity:1; transform:none} }
@keyframes popOut { to{opacity:0; transform:translateY(10px) scale(.97)} }
.quiz-foot.is-ok .quiz-verdict { color:#fbbf24; }
.quiz-pop .quiz-verdict, .quiz-pop .quiz-next { width:100%; max-width:none; }
.quiz-pop .quiz-next.btn { width:100%; }
@media(prefers-reduced-motion:reduce){ .quiz-foot,.quiz-pop,.quiz-foot.closing,.quiz-foot.closing .quiz-pop{animation:none} }