/* ==========================================================================
   LemmeCode — Design System
   Edit colors/fonts here; they cascade across the whole site.
   ========================================================================== */

:root {
  /* Brand palette — LemmeCode */
  --ink: #0d1121;
  --ink-soft: #1a2040;
  --paper: #f4f5f9;
  --paper-warm: #eef0f6;
  --white: #ffffff;
  --muted: #5b6578;
  --muted-soft: #6b7488;   /* 4.6:1 on white — safe for small text */
  --line: #e2e7ef;
  --line-strong: #c8d0de;

  /* Accents — brand board: navy, purple, pink, teal, yellow */
  --accent: #6c5ce7;       /* purple — Code, brand, primary action */
  --accent-deep: #4e41c4;  /* readable purple on white */
  --accent-soft: #eeebfc;
  --coral: #ff6b8b;        /* pink — energy, BUILD */
  --coral-deep: #e85a7c;
  --coral-glow: #ff6b8b;
  --coral-soft: #fff1f4;
  --teal: #00c2a8;         /* CREATE */
  --teal-soft: #e5f9f5;
  --yellow: #ffc53d;       /* GROW */
  --yellow-soft: #fff6d9;

  /* Program tints — map to the four brand pillars */
  --python: #00c2a8;
  --scratch: #ffc53d;
  --design: #ff6b8b;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(13, 17, 33, 0.045);
  --shadow-md: 0 10px 28px rgba(13, 17, 33, 0.07);
  --shadow-lg: 0 24px 56px rgba(13, 17, 33, 0.11);
  --shadow-coral: 0 12px 32px rgba(108, 92, 231, 0.28);

  /* Radius */
  --radius: 1.25rem;
  --radius-sm: 0.75rem;
  --radius-lg: 1.75rem;

  /* Layout */
  --container: 1160px;
  --container-narrow: 820px;
  --nav-h: 4.25rem;

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.7s;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` rather than `hidden`: both stop sideways overflow, but `hidden`
     makes the body a scroll container, which causes the scroll-driven
     reveals below to resolve against the wrong scrollport. */
  overflow-x: clip;
}

/* Skip link — keyboard / screen-reader first stop */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 200;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  font-size: 0.875rem;
  transform: translateY(-120%);
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0.75rem);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* Layout ------------------------------------------------------------------ */
.container {
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

.container-narrow {
  width: min(var(--container-narrow), calc(100% - 2rem));
  margin-inline: auto;
}

.section {
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
}

/* Keep anchored sections clear of the sticky header */
section[id],
[data-anchor] {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.section-sm {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* An inset rounded slab instead of another full-bleed band. Breaks up the
   run of edge-to-edge sections and marks this block as the centrepiece. */
.section-panel {
  padding-block: clamp(1.5rem, 3vw, 3rem);
}

/* Geometry only — pair it with .bg-ink-atmosphere so every dark-section
   descendant rule keeps applying inside the panel. */
.panel-dark {
  width: min(calc(var(--container) + 6rem), calc(100% - 2rem));
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.bg-white {
  background: var(--white);
}

.bg-paper {
  background: var(--paper);
}

.bg-atmosphere {
  background:
    radial-gradient(ellipse 85% 55% at 8% -8%, rgba(108, 92, 231, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 45% at 92% 5%, rgba(255, 107, 139, 0.12), transparent 50%),
    radial-gradient(ellipse 40% 42% at 82% 92%, rgba(255, 197, 61, 0.16), transparent 55%),
    radial-gradient(ellipse 45% 50% at 40% 105%, rgba(0, 194, 168, 0.10), transparent 55%),
    var(--paper);
}

.bg-ink {
  background: var(--ink);
  color: var(--white);
}

.bg-ink-atmosphere {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(108, 92, 231, 0.42), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 20%, rgba(255, 107, 139, 0.22), transparent 50%),
    radial-gradient(ellipse 35% 35% at 78% 88%, rgba(255, 197, 61, 0.16), transparent 50%),
    radial-gradient(ellipse 40% 40% at 42% 100%, rgba(0, 194, 168, 0.14), transparent 50%),
    var(--ink);
  color: var(--white);
}

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

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

.text-balance {
  text-wrap: balance;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 1rem;
}

.bg-ink-atmosphere .eyebrow,
.bg-ink .eyebrow {
  color: var(--accent);
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  color: var(--ink);
  max-width: 40rem;
}

.text-center .section-title {
  margin-inline: auto;
}

.bg-ink .section-title,
.bg-ink-atmosphere .section-title {
  color: var(--white);
}

.section-desc {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--muted);
  max-width: 36rem;
  line-height: 1.7;
}

.text-center .section-desc {
  margin-inline: auto;
}

.bg-ink .section-desc,
.bg-ink-atmosphere .section-desc {
  color: rgba(255, 255, 255, 0.65);
}

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur-fast) ease,
    box-shadow var(--dur) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
  text-decoration: none;
  will-change: transform;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.65;
  cursor: wait;
  pointer-events: none;
  transform: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--shadow-coral);
  padding: 0.9rem 1.85rem;
  font-size: 0.95rem;
}

.btn-primary:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(108, 92, 231, 0.38);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.9rem 1.85rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--line-strong);
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ink {
  background: var(--ink);
  color: var(--white);
  padding: 0.9rem 1.85rem;
  font-size: 0.95rem;
  box-shadow: 0 10px 30px rgba(13, 17, 33, 0.2);
}

.btn-ink:hover {
  background: var(--ink-soft);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1.15rem;
  font-size: 0.875rem;
}

.btn-block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Cards ------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease,
    border-color var(--dur) ease;
}

.card:hover,
.card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  height: 100%;
  border-radius: inherit;
}

.card-link .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Pins the "Explore →" affordance to the bottom so cards read as a set */
.card-link .link-arrow {
  margin-top: auto;
  padding-top: 1.5rem;
}

.card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.card-ink {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.card-ink:hover,
.card-ink:focus-within {
  border-color: var(--ink);
}

/* Navigation -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition:
    background var(--dur) ease,
    box-shadow var(--dur) ease,
    border-color var(--dur) ease,
    padding var(--dur) ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px rgba(13, 17, 33, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: 1rem;
}

.site-header.is-scrolled .nav {
  height: 3.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.92rem, 2.4vw, 1.125rem);
  letter-spacing: -0.02em;
  flex-shrink: 1;
  min-width: 0;
  line-height: 1.15;
}

.logo-mark {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease-out);
}

.logo:hover .logo-mark {
  transform: scale(1.04);
}

.logo-word {
  display: inline-flex;
  white-space: nowrap;
}

.logo-lemme {
  color: #0d1121;
}

.logo-code {
  color: #6c5ce7;
}

.site-footer .logo-lemme {
  color: var(--white);
}

.nav-links {
  display: none;
  align-items: center;
  gap: 0.1rem;
  margin-inline: auto;
}

.nav-links a {
  padding: 0.5rem 0.7rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: 0.5rem;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: rgba(13, 17, 33, 0.04);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-cta {
  display: none;
  flex-shrink: 0;
}

.nav-toggle {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.nav-toggle:hover {
  border-color: var(--line-strong);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-toggle-bars {
  position: relative;
  width: 1rem;
  height: 0.875rem;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease, top var(--dur) ease, bottom var(--dur) ease;
}

.nav-toggle-bars span:nth-child(1) {
  top: 0;
}
.nav-toggle-bars span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.nav-toggle-bars span:nth-child(3) {
  bottom: 0;
}

.site-header.is-open .nav-toggle-bars span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.site-header.is-open .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.site-header.is-open .nav-toggle-bars span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s var(--ease-out),
    opacity var(--dur) ease;
}

.site-header.is-open .mobile-nav {
  display: block;
  max-height: min(70vh, 36rem);
  opacity: 1;
  overflow-y: auto;
}

.mobile-nav a {
  display: block;
  padding: 0.85rem 1rem;
  font-weight: 500;
  border-radius: 0.75rem;
  transition: background var(--dur-fast) ease;
}

.mobile-nav a:hover {
  background: var(--paper);
}

.mobile-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobile-nav-inner {
  padding: 1rem 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Mobile sticky CTA when header CTA is hidden */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(13, 17, 33, 0.06);
}

.mobile-cta-bar .btn {
  width: 100%;
}

body.has-mobile-cta {
  padding-bottom: 4.5rem;
}

@media (min-width: 640px) {
  .nav-cta {
    display: inline-flex;
  }
  .mobile-cta-bar {
    display: none !important;
  }
  body.has-mobile-cta {
    padding-bottom: 0;
  }
}

@media (max-width: 639px) {
  .mobile-cta-bar.is-visible {
    display: block;
  }
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav,
  .site-header.is-open .mobile-nav {
    display: none;
  }
}

/* Hero -------------------------------------------------------------------- */
.hero {
  padding: 2rem 0 3.5rem;
  position: relative;
}

@media (min-width: 768px) {
  .hero {
    padding: 3.25rem 0 5.5rem;
  }
}

.hero-grid {
  display: grid;
  gap: 2.75rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2.5rem;
  }
}

/* Brand as hero-level signal (not only nav) */
.hero-brand {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.hero-brand .logo-mark {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.hero h1 {
  font-size: clamp(2.75rem, 7.5vw, 4.5rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
  max-width: 12ch;
}

.hero-sub {
  margin-top: 1.15rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  font-weight: 500;
  color: rgba(13, 17, 33, 0.78);
  letter-spacing: -0.02em;
  max-width: 34rem;
  line-height: 1.35;
}

.hero-desc {
  margin-top: 1rem;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 30rem;
  line-height: 1.65;
}

.hero-desc strong {
  color: var(--ink);
  font-weight: 600;
}

/* Cycles through real project types so the promise stays concrete. It sits on
   its own line, sized to the longest phrase, so swapping words never reflows
   the paragraph above it. */
.hero-builds {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.4rem;
  font-size: 0.9375rem;
}

.hero-builds-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-soft);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.hero-rotator {
  display: inline-grid;
  overflow: hidden;
}

.hero-rotator-word {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-deep);
  white-space: nowrap;
  animation: rotator-in 0.45s var(--ease-out);
}

.hero-rotator-word.is-leaving {
  animation: rotator-out 0.3s var(--ease-out) forwards;
}

@keyframes rotator-in {
  from {
    opacity: 0;
    transform: translateY(0.7em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotator-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.7em);
  }
}

/* A very slow aurora drift keeps the hero feeling alive without competing
   with the copy. Purely decorative, so it sits behind everything. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 40% at 18% 28%, rgba(108, 92, 231, 0.20), transparent 60%),
    radial-gradient(ellipse 35% 35% at 82% 18%, rgba(255, 107, 139, 0.14), transparent 60%),
    radial-gradient(ellipse 28% 28% at 88% 72%, rgba(255, 197, 61, 0.16), transparent 60%),
    radial-gradient(ellipse 30% 30% at 52% 82%, rgba(0, 194, 168, 0.12), transparent 60%);
  filter: blur(20px);
  animation: aurora 26s ease-in-out infinite alternate;
}

.hero > * {
  position: relative;
  z-index: 1;
}

@keyframes aurora {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 1.5%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
  }
}

.trust-pills {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 2.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(13, 17, 33, 0.78);
}

@media (min-width: 640px) {
  .trust-pills {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.65rem 1.35rem;
  }
}

.trust-pills li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Trust strip ------------------------------------------------------------- */
.trust-strip {
  border-block: 1px solid var(--line);
  background: var(--white);
  padding: 1.35rem 0;
}

.trust-strip ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

@media (min-width: 900px) {
  .trust-strip ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(13, 17, 33, 0.82);
}

@media (min-width: 900px) {
  .trust-strip li + li {
    padding-left: 1.5rem;
    border-left: 1px solid var(--line);
  }
}

.trust-icon {
  display: grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}

.trust-strip li:nth-child(1) .trust-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

.trust-strip li:nth-child(2) .trust-icon {
  background: var(--teal-soft);
  color: var(--teal);
}

.trust-strip li:nth-child(3) .trust-icon {
  background: var(--coral-soft);
  color: var(--coral);
}

.trust-strip li:nth-child(4) .trust-icon {
  background: var(--yellow-soft);
  color: #0d1121;
}

.trust-icon svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Grids ------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  display: grid;
  gap: 1.5rem;
}

.grid-4 {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mt-8 {
  margin-top: 2rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}

/* Build cards / programs -------------------------------------------------- */
.project-preview {
  height: 11rem;
  position: relative;
  overflow: hidden;
}

.preview-scratch {
  background: #1b2438;
}

.preview-scratch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, #00c2a8, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(255, 107, 139, 0.55), transparent 40%);
  opacity: 0.5;
}

.preview-blob {
  position: absolute;
  border-radius: 999px;
}

.preview-python {
  background: #0f172a;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: #e0f2fe;
}

.preview-design {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-mock {
  width: 55%;
  height: 100%;
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.phone-mock-bar {
  height: 1.5rem;
  background: var(--ink);
}

.phone-mock-body {
  padding: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.skel {
  height: 0.5rem;
  border-radius: 4px;
  background: var(--line);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.tag {
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.card-body {
  padding: 1.5rem 1.75rem;
}

.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.meta-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.meta-age {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
}

.link-arrow {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--coral);
}

.card-link:hover .link-arrow {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* How it works timeline --------------------------------------------------- */
.steps {
  display: grid;
  gap: 2rem;
  position: relative;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.steps-line {
  display: none;
}

@media (min-width: 1024px) {
  .steps-line {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 1.35rem;
    height: 1px;
    background: var(--line);
  }

  .steps-line-fill {
    position: absolute;
    left: 0;
    top: 1.3rem;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    transform-origin: left;
  }
}

.step {
  position: relative;
}

.step-num {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.step.is-visible .step-num,
.step.reveal.is-visible .step-num {
  transform: scale(1);
}

.step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* Inside lesson ----------------------------------------------------------- */
.lesson-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .lesson-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.zoom-mock {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
}

.zoom-dots {
  display: flex;
  gap: 0.35rem;
  margin-right: 0.75rem;
}

.zoom-dots span {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}

.zoom-body {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
}

@media (min-width: 768px) {
  .zoom-body {
    grid-template-columns: 1fr 180px;
  }
}

.zoom-screen {
  border-radius: 1rem;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 240px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: #e0f2fe;
}

.zoom-side {
  display: flex;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .zoom-side {
    flex-direction: column;
  }
}

.zoom-cam {
  flex: 1;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 100px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.segment {
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.25rem 1.5rem;
}

.segment-hot {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
}

.segment-time {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-deep);
  margin-right: 0.75rem;
}

.segment-hot .segment-time {
  color: var(--accent);
}

.segments {
  display: grid;
  gap: 1rem;
}

/* Program cards featured -------------------------------------------------- */
.program-cards {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .program-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.program-card {
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  padding: 1.75rem 2rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  height: 100%;
}

.program-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.program-card.featured {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .program-card.featured {
    transform: scale(1.03);
    z-index: 1;
  }
  .program-card.featured:hover {
    transform: scale(1.03) translateY(-4px);
  }
}

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.program-card.featured .badge {
  background: rgba(108, 92, 231, 0.22);
  color: #d7d0ff;
}

.program-card.featured .meta-age,
.program-card.featured .text-muted {
  color: rgba(255, 255, 255, 0.7);
}

/* Naming what the child actually makes lands harder than naming the skill,
   so the project tags sit above the skill list on each program card. */
.program-builds-label {
  margin: 1.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.program-card .tag-row {
  margin-top: 0.6rem;
}

.program-card.featured .program-builds-label {
  color: rgba(255, 255, 255, 0.5);
}

.program-card.featured .tag {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.82);
}

/* When the age filter drops the flagship card to the light surface, its tags
   and label have to come back with it. */
.program-cards.is-filtered .program-card.featured:not(.is-match) .program-builds-label {
  color: var(--muted-soft);
}

.program-cards.is-filtered .program-card.featured:not(.is-match) .tag {
  background: var(--paper);
  border-color: var(--line);
  color: var(--muted);
}

.skill-list {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0 2rem;
  flex: 1;
}

.skill-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Comparison -------------------------------------------------------------- */
.compare {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-box {
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.75rem 2rem;
  height: 100%;
}

.compare-box.hot {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.benefit-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .benefit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .benefit-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.benefit {
  border-radius: 1rem;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.25rem;
  height: 100%;
}

.benefit h4 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

.benefit p {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Projects portfolio ------------------------------------------------------ */
.demo-badge {
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.15rem 0.6rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Progress report --------------------------------------------------------- */
.progress-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .progress-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.report {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) ease;
}

.reveal.is-visible .report {
  animation: report-rise 0.8s var(--ease-out);
}

@keyframes report-rise {
  from {
    opacity: 0.85;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.report-head {
  background: var(--ink);
  color: var(--white);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.report-body {
  padding: 1.5rem 2rem;
  display: grid;
  gap: 1.5rem;
}

.note-box {
  border-radius: 1rem;
  background: rgba(230, 247, 245, 0.7);
  border: 1px solid rgba(255, 107, 139, 0.12);
  padding: 1.25rem;
}

/* Mentors ----------------------------------------------------------------- */
.avatar {
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.avatar-circle {
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.tone-umed {
  background: linear-gradient(135deg, rgba(0, 194, 168, 0.38), rgba(108, 92, 231, 0.18));
}
.tone-nilufar {
  background: linear-gradient(135deg, rgba(255, 197, 61, 0.5), rgba(255, 107, 139, 0.18));
}
.tone-yosin {
  background: linear-gradient(135deg, rgba(255, 107, 139, 0.32), rgba(108, 92, 231, 0.16));
}

/* Testimonials placeholders ----------------------------------------------- */
.placeholder-card {
  border-radius: 1.5rem;
  border: 1px dashed var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  padding: 1.75rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Pricing ----------------------------------------------------------------- */
.pricing-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 3rem);
}

.price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3rem);
  letter-spacing: -0.03em;
}

.include-grid {
  display: grid;
  gap: 0.75rem;
  margin: 2rem 0 2.5rem;
}

@media (min-width: 640px) {
  .include-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.include-grid li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Trial flow -------------------------------------------------------------- */
.trial-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .trial-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.trial-steps {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .trial-steps {
    grid-template-columns: 1fr 1fr;
  }
}

.trial-step {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  padding: 1.25rem;
}

.trial-step span {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.trial-step p {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
}

/* FAQ accordion ----------------------------------------------------------- */
.accordion {
  border-radius: 1.5rem;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.accordion-item + .accordion-item {
  border-top: 1px solid var(--line);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) ease;
}

.accordion-trigger:hover {
  background: rgba(244, 246, 249, 0.85);
}

.accordion-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.accordion-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: transparent;
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
  color: var(--muted);
  line-height: 1.7;
}

.accordion-panel.is-open {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
  min-height: 0;
  padding-inline: 1.5rem;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--dur) ease,
    transform var(--dur) var(--ease-out),
    padding-bottom 0.4s var(--ease-out);
}

.accordion-panel.is-open .accordion-panel-inner {
  padding-bottom: 1.5rem;
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 640px) {
  .accordion-panel-inner {
    padding-right: 4rem;
  }
}

/* Footer ------------------------------------------------------------------ */
.site-footer {
  background: var(--ink);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-grid {
  display: grid;
  gap: 3rem;
  padding: 4rem 0;
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.2fr 2fr;
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }
}

.footer-cols h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1rem;
  font-family: var(--font-body);
}

.footer-cols a {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.75rem;
  transition: color 0.2s ease;
}

.footer-cols a:hover {
  color: var(--white);
}

.footer-blurb {
  margin-top: 1.25rem;
  max-width: 22rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

.footer-tag {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.socials a {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.socials a:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Page hero (inner pages) ------------------------------------------------- */
.page-hero {
  padding: 3rem 0 4rem;
}

.page-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  max-width: 40rem;
}

.page-hero .lead {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  color: var(--muted);
  max-width: 36rem;
  line-height: 1.7;
}

/* Booking form ------------------------------------------------------------ */
.book-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .book-layout {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

.book-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.book-assurance span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.form-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: relative;
}

.form-step {
  display: none;
}

.form-step.is-active {
  display: block;
  animation: form-step-in 0.35s var(--ease-out);
}

@keyframes form-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.form-progress span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transition: background var(--dur) ease, transform var(--dur-fast) ease;
}

.form-progress span.is-done,
.form-progress span.is-current {
  background: var(--accent);
}

.form-progress span.is-current {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.form-step-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label,
.form-group .field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.8rem 1rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  min-height: 2.85rem;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--line-strong);
}

.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group input:not([type="checkbox"]):not([type="radio"]).is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-soft);
}

.form-group .field-error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--coral-deep);
  font-weight: 500;
}

.form-group.has-error .field-error {
  display: block;
}

.form-group textarea {
  min-height: 6rem;
  resize: vertical;
}

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.choice-grid.is-invalid .choice span {
  border-color: rgba(255, 107, 139, 0.45);
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  display: block;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease;
}

.choice:hover span {
  border-color: var(--line-strong);
  background: var(--paper);
}

.choice input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.18);
}

.choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.time-slots {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .time-slots {
    grid-template-columns: 1fr 1fr;
  }
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.form-hint {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted-soft);
  text-align: center;
}

.form-field-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form-human {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
}

.form-human input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-error-banner {
  display: none;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--coral-soft);
  color: var(--coral-deep);
  font-size: 0.875rem;
  font-weight: 500;
}

.form-error-banner.is-visible {
  display: block;
}

.form-success {
  text-align: center;
  padding: 2rem 0;
  animation: form-step-in 0.4s var(--ease-out);
}

.form-success h2 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

/* Hero visual composition ------------------------------------------------- */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1 / 1.05;
}

@media (min-width: 640px) {
  .hero-visual {
    aspect-ratio: 1;
  }
}


.hero-visual-bg {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 50% at 28% 18%, rgba(108, 92, 231, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 40% at 88% 78%, rgba(255, 197, 61, 0.14), transparent 55%),
    linear-gradient(145deg, var(--white) 0%, var(--paper) 55%, rgba(229, 249, 245, 0.7) 100%);
  box-shadow: var(--shadow-lg);
}

.hero-visual[data-parallax] .float-a,
.hero-visual[data-parallax] .float-b,
.hero-visual[data-parallax] .float-c,
.hero-visual[data-parallax] .float-d {
  transition: transform 0.45s var(--ease-out);
}

.window {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 246, 249, 0.9);
}

.window-bar .c {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.window-title {
  margin-left: 0.25rem;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Parallax is applied to .float-*; drift lives on the inner card so the two
   transforms never fight each other. */
.float-a {
  position: absolute;
  left: 0;
  top: 3%;
  width: 49%;
}

.float-b {
  position: absolute;
  right: 0;
  top: 24%;
  width: 54%;
  z-index: 3;
}

.float-c {
  position: absolute;
  left: 3%;
  bottom: 2%;
  width: 46%;
  z-index: 2;
}

.float-d {
  position: absolute;
  right: 2%;
  bottom: 19%;
  width: 42%;
  z-index: 4;
}

.float-b > *,
.float-d > * {
  animation: float-soft 9s ease-in-out infinite;
}

.float-d > * {
  animation-duration: 11s;
  animation-delay: 1.6s;
}

/* The absolute collage can't survive small widths — stack the two strongest
   pieces instead. Must come after the .float-* rules to win the cascade. */
@media (max-width: 639px) {
  .hero-visual {
    aspect-ratio: auto;
    max-width: 22rem;
    display: grid;
    gap: 0.85rem;
  }

  .hero-visual-bg {
    display: none;
  }

  .float-a,
  .float-c {
    display: none;
  }

  .float-b,
  .float-d {
    position: static;
    inset: auto;
    width: 100%;
  }

  .float-b > *,
  .float-d > * {
    animation: none;
  }
}

.live-pill {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(13, 17, 33, 0.95);
  color: var(--white);
  padding: 0.75rem;
  box-shadow: var(--shadow-lg);
}

.code-pane {
  background: #0f172a;
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.55;
  color: #e0f2fe;
  height: 10rem;
  overflow: hidden;
}

.cursor-blink::after {
  content: "";
  display: inline-block;
  width: 0.45ch;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: code-blink 1s step-end infinite;
}

@keyframes float-soft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes code-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Reveal on scroll -------------------------------------------------------- */
/* Only hide pending reveals once the script that reveals them is confirmed
   running — otherwise a JS failure would blank out most of the page. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}
.reveal-delay-2 {
  transition-delay: 0.16s;
}
.reveal-delay-3 {
  transition-delay: 0.24s;
}

.js .reveal-scale {
  transform: translate3d(0, 16px, 0) scale(0.98);
}

.js .reveal-scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Prose pages ------------------------------------------------------------- */
.prose {
  max-width: 42rem;
  margin-inline: auto;
}

.prose h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}

.prose p,
.prose li {
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.prose ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.center-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 2rem;
}

.center-note a {
  font-weight: 600;
  color: var(--coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.mono {
  font-family: var(--font-mono);
}

.text-sm {
  font-size: 0.875rem;
}

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

.list-check li {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.list-check .dot {
  margin-top: 0.55rem;
}

/* ==========================================================================
   Project stage graphics
   Reusable "this is a real project" visuals: a game stage, a code pane and
   an app screen. Used in the hero collage and the build cards.
   ========================================================================== */
.game-stage {
  background: linear-gradient(180deg, #16213a 0%, #0f172a 100%);
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 24%, rgba(0, 194, 168, 0.4), transparent 42%),
    radial-gradient(circle at 78% 18%, rgba(255, 107, 139, 0.35), transparent 38%);
}

.gs-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.6rem;
  background: linear-gradient(180deg, #34d399, #10b981);
}

.gs-ground::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
}

.gs-hero {
  position: absolute;
  left: 1.4rem;
  bottom: 1.6rem;
  width: 1.6rem;
  height: 1.85rem;
  border-radius: 0.55rem 0.55rem 0.25rem 0.25rem;
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  animation: gs-hop 2.8s ease-in-out infinite;
}

.gs-hero::before,
.gs-hero::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: rgba(13, 17, 33, 0.75);
}

.gs-hero::before {
  left: 0.4rem;
}

.gs-hero::after {
  right: 0.4rem;
}

.gs-block {
  position: absolute;
  height: 0.6rem;
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.gs-coin {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0.5rem rgba(251, 191, 36, 0.7);
  animation: gs-bob 2.2s ease-in-out infinite;
}

.gs-score {
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}

@keyframes gs-hop {
  0%, 62%, 100% {
    transform: translateY(0);
  }
  74% {
    transform: translateY(-0.7rem);
  }
}

@keyframes gs-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem);
  }
}

/* App / Figma screen ------------------------------------------------------ */
.app-stage {
  background: linear-gradient(140deg, #f8fafc 0%, #eef2ff 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 1.1rem;
}

.phone {
  width: 8.5rem;
  max-width: 62%;
  border-radius: 1.1rem 1.1rem 0 0;
  border: 1px solid var(--line);
  border-bottom: none;
  background: var(--white);
  box-shadow: 0 -6px 20px rgba(13, 17, 33, 0.09);
  padding: 0.5rem 0.5rem 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
}

.phone-notch {
  width: 2.2rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--line-strong);
  margin: 0 auto 0.15rem;
}

.phone-hero {
  height: 2.1rem;
  border-radius: 0.5rem;
  background: linear-gradient(120deg, rgba(108, 92, 231, 0.38), rgba(255, 107, 139, 0.28));
}

.phone-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.phone-row span {
  height: 1.35rem;
  border-radius: 0.35rem;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}

.phone-line {
  height: 0.35rem;
  border-radius: 999px;
  background: var(--line);
}

.phone-line.w70 {
  width: 70%;
}

.phone-line.w45 {
  width: 45%;
}

.phone-cta {
  height: 1.1rem;
  border-radius: 999px;
  background: var(--coral);
  opacity: 0.85;
  margin-top: 0.1rem;
}

/* Live lesson card ------------------------------------------------------- */
.live-card {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(13, 17, 33, 0.96);
  color: var(--white);
  padding: 0.7rem 0.75rem 0.75rem;
  box-shadow: var(--shadow-lg);
}

.live-card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.live-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.live-cam {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.6rem;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0.35rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 600;
}

.live-cam.is-mentor {
  background: linear-gradient(150deg, rgba(108, 92, 231, 0.55), #16213a);
}

.live-cam.is-student {
  background: linear-gradient(150deg, rgba(0, 194, 168, 0.42), #16213a);
}

/* Simple silhouette so the tiles read as people, not empty boxes */
.live-cam::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.55rem;
  width: 1.9rem;
  height: 1.9rem;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: rgba(255, 255, 255, 0.26);
}

.live-cam::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.5rem;
  width: 0.85rem;
  height: 0.85rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

.live-cam span {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Scroll progress + nav orientation
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 120;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--coral), var(--yellow));
  pointer-events: none;
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease-out);
}

.nav-links a.is-active::after {
  transform: scaleX(1);
}

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

/* ==========================================================================
   Conversion microcopy
   ========================================================================== */
.cta-assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--muted);
}

.cta-assurance li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cta-assurance svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* Items written without an inline icon still get the tick, so the reassurance
   row reads the same everywhere it appears. */
.cta-assurance li:not(:has(svg))::before {
  content: "✓";
  color: var(--accent);
  font-size: 0.8125rem;
  line-height: 1;
  flex-shrink: 0;
}

.bg-ink-atmosphere .cta-assurance,
.bg-ink .cta-assurance {
  color: rgba(255, 255, 255, 0.6);
}

.hero-meta {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted-soft);
}

/* Buttons go full-width on small screens for thumb reach */
@media (max-width: 479px) {
  .btn-row .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Program age chooser
   ========================================================================== */
.age-chooser {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.age-chooser-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  margin-right: 0.25rem;
}

.age-chip {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.age-chip:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.age-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.age-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Age filter: promote the match rather than disabling the others, so parents
   can still read every program instead of facing three greyed-out blocks. */
.program-card {
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease,
    background-color var(--dur) ease,
    border-color var(--dur) ease,
    color var(--dur) ease,
    opacity var(--dur) ease;
}

.program-cards.is-filtered .program-card:not(.is-match) {
  opacity: 0.62;
  box-shadow: none;
}

/* The flagship card is dark and scaled up by default. Dimming a dark surface
   just turns it grey, so it drops to the light surface and gives up its scale
   when it isn't the recommended path. */
.program-cards.is-filtered .program-card.featured:not(.is-match) {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}

.program-cards.is-filtered .program-card.featured:not(.is-match) .meta-age,
.program-cards.is-filtered .program-card.featured:not(.is-match) .text-muted {
  color: var(--muted);
}

.program-cards.is-filtered .program-card.featured:not(.is-match) .badge {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.program-cards.is-filtered .program-card.featured:not(.is-match) .btn-primary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

@media (min-width: 1024px) {
  .program-cards.is-filtered .program-card.featured:not(.is-match) {
    transform: scale(1);
  }
  .program-cards.is-filtered .program-card.featured:not(.is-match):hover {
    transform: translateY(-4px);
  }
}

.program-cards.is-filtered .program-card.is-match {
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent);
}

.program-cards.is-filtered .program-card.featured.is-match {
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent);
}

@media (min-width: 1024px) {
  .program-cards.is-filtered .program-card.is-match:not(.featured) {
    transform: scale(1.02);
  }
  .program-cards.is-filtered .program-card.is-match:not(.featured):hover {
    transform: scale(1.02) translateY(-4px);
  }
}

.age-match-note {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
  min-height: 1.5rem;
}

.age-match-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   Trust / safety section
   ========================================================================== */
.trust-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 1.65rem 1.75rem;
  height: 100%;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease,
    border-color var(--dur) ease;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.icon-tile svg {
  width: 1.35rem;
  height: 1.35rem;
}

.icon-tile.tone-coral {
  background: var(--coral-soft);
  color: var(--coral-deep);
}

.icon-tile.tone-ink {
  background: rgba(13, 17, 33, 0.06);
  color: var(--ink);
}

.trust-card h3 {
  font-size: 1.15rem;
}

.trust-card p {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.65;
}

/* Honest early-stage framing instead of empty review placeholders */
.founder-note {
  display: grid;
  gap: 2rem;
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 900px) {
  .founder-note {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
  }
}

.founder-note blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.founder-note cite {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: 0.875rem;
  color: var(--muted);
}

.founder-seal {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #0d1121;
  flex-shrink: 0;
}

.founder-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Dark section overrides (Inside a lesson)
   ========================================================================== */
.bg-ink-atmosphere .segment,
.bg-ink .segment {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--white);
  backdrop-filter: blur(8px);
}

.bg-ink-atmosphere .segment .text-muted,
.bg-ink .segment .text-muted {
  color: rgba(255, 255, 255, 0.62);
}

.bg-ink-atmosphere .segment-hot,
.bg-ink .segment-hot {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.bg-ink-atmosphere .segment-hot .segment-time,
.bg-ink .segment-hot .segment-time {
  color: var(--accent-deep);
}

/* The highlighted card inverts back to light, so its body copy must too */
.bg-ink-atmosphere .segment-hot .text-muted,
.bg-ink .segment-hot .text-muted {
  color: var(--muted);
}

.bg-ink-atmosphere .zoom-mock,
.bg-ink .zoom-mock {
  border-color: rgba(255, 255, 255, 0.14);
  background: #0a0f1c;
}

.lesson-callout {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

.live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: live-pulse 2.4s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.55rem rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

/* ==========================================================================
   Mentors
   ========================================================================== */
.mentor-card {
  padding: 1.5rem 1.75rem 1.75rem;
}

.avatar {
  position: relative;
  overflow: hidden;
}

.avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.5), transparent 55%);
  pointer-events: none;
}

.avatar-circle {
  position: relative;
  z-index: 1;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .avatar-circle {
  transform: scale(1.05);
}

.mentor-facts {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--muted);
}

.mentor-facts strong {
  color: var(--ink);
  font-weight: 600;
}

.photo-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--muted-soft);
}

/* ==========================================================================
   Pricing extras
   ========================================================================== */
.price-frame {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0.25rem;
}

.price-note {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
}

.price-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.5rem;
}

.price-toggle button {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.price-toggle button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
}

.price-toggle button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Stagger reveal + pointer effects
   ========================================================================== */
.reveal[style*="--i"] {
  transition-delay: calc(var(--i) * 70ms);
}

/* ==========================================================================
   Scroll-driven reveals (progressive enhancement)

   Where scroll-linked timelines exist, reveals are bound to real scroll
   position instead of a one-shot class toggle: the motion tracks the wheel or
   finger and runs off the main thread. main.js checks the same feature and
   skips its IntersectionObserver so the two never drive the same property.
   Note the base state here is *visible* — if a timeline ever fails to
   activate, content stays readable rather than stuck at zero opacity.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal,
    .js .reveal-scale {
      opacity: 1;
      transform: none;
      transition: none;
      animation: reveal-rise linear both;
      animation-timeline: view();
      /* Siblings share a scroll position, so --i offsets each range to keep
         the staggered feel the transition-delay used to give. */
      animation-range: entry calc(5% + var(--i, 0) * 5%) entry calc(55% + var(--i, 0) * 5%);
    }

    .js .reveal-delay-1 {
      animation-range: entry 10% entry 60%;
    }
    .js .reveal-delay-2 {
      animation-range: entry 15% entry 65%;
    }
    .js .reveal-delay-3 {
      animation-range: entry 20% entry 70%;
    }

    .js .reveal-scale {
      animation-name: reveal-rise-scale;
    }
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes reveal-rise-scale {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ==========================================================================
   Scroll-linked motion

   Progress values (0–1) are written to --p by main.js from a single rAF-
   throttled scroll listener, so several elements can share one measurement
   pass. Anything keyed on --p degrades to its resting state when the script
   is absent.
   ========================================================================== */
[data-scroll-motion] {
  --p: 0;
}

/* Section visuals drift gently against the scroll direction. */
[data-scroll-motion="drift"] {
  transform: translate3d(0, calc((0.5 - var(--p)) * 2.5rem), 0);
  will-change: transform;
}

/* The connecting line draws itself as the reader moves through the steps. */
[data-scroll-motion="draw"] {
  transform: scaleX(var(--p));
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-motion="drift"] {
    transform: none;
  }

  [data-scroll-motion="draw"] {
    transform: scaleX(1);
  }
}

.spotlight {
  position: relative;
}

.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    16rem circle at var(--mx, 50%) var(--my, 0%),
    rgba(108, 92, 231, 0.10),
    transparent 65%
  );
  transition: opacity var(--dur) ease;
  z-index: 0;
}

@media (hover: hover) and (min-width: 1024px) {
  .spotlight:hover::before {
    opacity: 1;
  }
}

.spotlight > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Mobile CTA bar refinements
   ========================================================================== */
.mobile-cta-bar {
  transform: translateY(120%);
  transition: transform 0.4s var(--ease-out);
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.mobile-cta-bar-note {
  display: block;
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   Interactive playground — the visitor edits real values and watches the
   result run. This is the proof behind "kids don't just learn, they build".
   ========================================================================== */
.playground {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .playground {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2rem;
  }
}

/* --- Editor panel --- */
.pg-editor {
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(9, 14, 26, 0.72);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pg-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
}

.pg-dots {
  display: inline-flex;
  gap: 0.3rem;
}

.pg-dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.pg-filename {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.pg-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(108, 92, 231, 0.18);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  transition: opacity var(--dur) ease;
}

.pg-badge.is-running {
  color: #ffd9a0;
  background: rgba(245, 166, 35, 0.18);
}

.pg-code {
  margin: 0;
  padding: 1.25rem 1rem;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2.4vw, 0.875rem);
  line-height: 2;
  color: rgba(255, 255, 255, 0.82);
  overflow-x: auto;
}

.pg-row {
  display: block;
  border-radius: 0.4rem;
  padding-inline: 0.4rem;
  margin-inline: -0.4rem;
  transition: background var(--dur) ease;
}

/* Flashes the line matching whichever control the visitor just moved, so the
   link between the slider and the code is impossible to miss. */
.pg-row.is-touched {
  background: rgba(108, 92, 231, 0.18);
}

.pg-comment {
  color: rgba(255, 255, 255, 0.35);
}

.pg-op {
  color: #f9a8d4;
}

.pg-num {
  color: #ffd9a0;
  font-weight: 600;
}

.pg-str {
  color: #6ee7b7;
}

.pg-fn {
  color: #93c5fd;
}

.pg-spacer {
  line-height: 1;
}

/* --- Controls --- */
.pg-controls {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.02);
}

.pg-control {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.pg-control label,
.pg-control-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.pg-control input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  cursor: pointer;
}

.pg-control input[type="range"]::-webkit-slider-runnable-track {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.pg-control input[type="range"]::-moz-range-track {
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.pg-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: -0.4rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform var(--dur-fast) var(--ease-out);
}

.pg-control input[type="range"]::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pg-control input[type="range"]:hover::-webkit-slider-thumb,
.pg-control input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.15);
}

.pg-control input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 999px;
}

.pg-control-theme {
  align-items: center;
}

.pg-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pg-themes button {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.pg-themes button:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.pg-themes button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pg-hint {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

/* --- Live stage --- */
.pg-preview {
  display: grid;
  gap: 1.25rem;
}

.pg-stage {
  --pg-speed: 5;
  --pg-jump: 70px;
  position: relative;
  height: clamp(15rem, 42vw, 20rem);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: background var(--dur-slow) ease;
}

.pg-stage[data-theme="sunset"] {
  background: linear-gradient(180deg, #2b1b3d 0%, #7b3f5e 55%, #d9765a 100%);
}

.pg-stage[data-theme="night"] {
  background: linear-gradient(180deg, #070d1c 0%, #142244 60%, #1d3a63 100%);
}

.pg-stage[data-theme="day"] {
  background: linear-gradient(180deg, #7cc7f0 0%, #b6e2f5 60%, #e8f6fb 100%);
}

.pg-sun {
  position: absolute;
  top: 14%;
  right: 12%;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  transition: background var(--dur-slow) ease, box-shadow var(--dur-slow) ease;
}

.pg-stage[data-theme="sunset"] .pg-sun {
  background: #ffcf8b;
  box-shadow: 0 0 3rem 1rem rgba(255, 187, 120, 0.45);
}

.pg-stage[data-theme="night"] .pg-sun {
  background: #e8eefc;
  box-shadow: 0 0 2.5rem 0.5rem rgba(214, 228, 255, 0.28);
}

.pg-stage[data-theme="day"] .pg-sun {
  background: #fff6cf;
  box-shadow: 0 0 3rem 1.2rem rgba(255, 246, 207, 0.65);
}

.pg-hill {
  position: absolute;
  bottom: 2.1rem;
  border-radius: 50% 50% 0 0;
  opacity: 0.35;
  background: #0d1121;
}

.pg-hill-a {
  left: -4%;
  width: 55%;
  height: 5.5rem;
}

.pg-hill-b {
  right: -8%;
  width: 48%;
  height: 4rem;
  opacity: 0.25;
}

.pg-ground {
  position: absolute;
  inset: auto 0 0 0;
  height: 2.1rem;
  background: rgba(13, 17, 33, 0.55);
  border-top: 2px solid rgba(255, 255, 255, 0.16);
}

/* Coins are laid out along the track by the script */
.pg-coins {
  position: absolute;
  inset: 0;
}

.pg-coin {
  position: absolute;
  bottom: 4.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffe08a, #f5a623);
  box-shadow: 0 0 0.75rem rgba(245, 166, 35, 0.6);
  animation: pg-coin-spin 1.6s var(--ease-out) infinite;
}

@keyframes pg-coin-spin {
  0%,
  100% {
    transform: scaleX(1) translateY(0);
  }
  50% {
    transform: scaleX(0.35) translateY(-0.3rem);
  }
}

.pg-runner {
  position: absolute;
  bottom: 2.1rem;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  animation: pg-run calc(9s / var(--pg-speed)) linear infinite;
}

.pg-runner-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.7rem;
  background: linear-gradient(160deg, #5eefd6, #00c2a8);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  animation: pg-jump calc(2.4s / var(--pg-speed)) var(--ease-out) infinite;
}

.pg-eye {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #06231f;
  margin-top: -0.3rem;
}

.pg-shadow {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 2rem;
  height: 0.35rem;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(2px);
  animation: pg-shadow calc(2.4s / var(--pg-speed)) var(--ease-out) infinite;
}

@keyframes pg-run {
  from {
    left: -3rem;
  }
  to {
    left: 100%;
  }
}

@keyframes pg-jump {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(calc(-1 * var(--pg-jump)));
  }
}

@keyframes pg-shadow {
  0%,
  55%,
  100% {
    opacity: 0.35;
    transform: translate(-50%, 0) scale(1);
  }
  25% {
    opacity: 0.12;
    transform: translate(-50%, 0) scale(0.6);
  }
}

/* --- Readout --- */
.pg-readout {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.pg-readout-live {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent);
}

.pg-readout-note {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.68);
  max-width: 34rem;
}

@media (max-width: 639px) {
  .pg-control {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  /* Three world chips can't share a row with the label at this width, so the
     label moves above them and they get the full column. */
  .pg-control-theme {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .pg-readout {
    justify-items: stretch;
  }

  .pg-readout .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .live-dot,
  .avatar-circle,
  .mobile-cta-bar,
  .trust-card,
  .age-chip,
  .spotlight::before {
    animation: none !important;
    transition: none !important;
  }

  .mobile-cta-bar.is-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal-scale,
  .float-a,
  .float-b,
  .float-c,
  .float-d,
  .card,
  .program-card,
  .steps-line-fill,
  .form-step.is-active,
  .form-success,
  .btn,
  .accordion-panel {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .float-a,
  .float-b,
  .float-c,
  .float-d,
  .float-b > *,
  .float-d > * {
    transform: none !important;
    animation: none !important;
  }

  .cursor-blink::after {
    animation: none !important;
  }

  .hero::before,
  .hero-rotator-word {
    animation: none !important;
  }

  /* The playground stays fully interactive — only the looping motion stops.
     The runner parks mid-stage so the scene still reads as a game. */
  .pg-runner,
  .pg-runner-body,
  .pg-shadow,
  .pg-coin {
    animation: none !important;
  }

  .pg-runner {
    left: 38% !important;
  }

  .pg-runner-body {
    transform: translateY(calc(-1 * var(--pg-jump))) !important;
  }
}