/* Goldfish — statische site.
 *
 * Kleuren, lettertypen en de waterachtergrond komen uit de app, zodat de stap
 * van deze pagina's naar /app niet als een andere site voelt:
 *   frontend/lib/theme/colors.dart      — de kleuren
 *   frontend/lib/theme/app_theme.dart   — Baloo 2 voor koppen, Nunito voor tekst,
 *                                         en een appbar zonder vlak of schaduw
 *   frontend/lib/widgets/water_background.dart — de gradiënt onder alles
 *
 * Alles wat beweegt gebruikt uitsluitend transform en opacity: die twee kan de
 * browser op de compositor afhandelen, ze veroorzaken geen herberekening van de
 * layout en dus geen layout shift tijdens het laden. Onderaan staat één
 * @media-regel die de hele boel stilzet voor wie prefers-reduced-motion aan heeft.
 */

/* ── Lettertypen ──────────────────────────────────────────────────────────────
   Dezelfde bestanden als de app, teruggebracht tot de latijnse tekens: samen
   60 kB in plaats van 800. Lokaal, dus geen verzoek naar Google en geen
   cookiebanner-discussie. */

@font-face {
  font-family: 'Baloo 2';
  src: url('/fonts/baloo2-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --primary: #FF8C42;
  --secondary: #FFC857;
  --accent: #FF6B6B;
  --seagrass: #23705A;

  --water-top: #F1F9FE;     /* waterSurfaceLight */
  --water-bottom: #DCEDF7;  /* backgroundLight   */
  --surface: #FFFFFF;
  --surface-2: #F1F9FE;
  --text: #0F303F;
  --muted: #56798B;
  --border: #D1E5F0;

  /* Koele schaduw in plaats van neutraal zwart, net als cardTheme in de app:
     witte kaarten liggen daardoor ín het water in plaats van erop. */
  --shadow-sm: 0 1px 2px rgb(11 73 102 / 0.08), 0 2px 8px rgb(11 73 102 / 0.06);
  --shadow-md: 0 4px 12px rgb(11 73 102 / 0.10), 0 12px 32px rgb(11 73 102 / 0.08);
  --shadow-lg: 0 8px 24px rgb(11 73 102 / 0.12), 0 24px 64px rgb(11 73 102 / 0.10);
  --glow: 0 6px 20px rgb(255 140 66 / 0.35);

  --heading: 'Baloo 2', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 16px;
  --radius-lg: 24px;
  --measure: 36rem;
  --bar: 64px;
  --gutter: clamp(20px, 4vw, 72px);
  /* De voorbeelden hebben de verhouding van een telefoon (2:1, tussen 18:9 en
     19,5:9 in). De breedte volgt uit de hoogte, zodat die verhouding klopt op
     elk scherm en het toestel nooit onder het venster uit loopt. */
  --screen: clamp(440px, 58vh, 640px);
  --screen-w: min(calc(var(--screen) / 2), 100%);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --water-top: #0C3244;    /* waterSurfaceDark */
    --water-bottom: #051A26; /* backgroundDark   */
    --surface: #0C2A3A;
    --surface-2: #103041;
    --text: #FFFFFF;
    --muted: #B2C9D6;
    --border: #1D4358;
    --seagrass: #7FD6B0;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.30);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.40), 0 24px 64px rgb(0 0 0 / 0.35);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* De balk is doorzichtig; zonder dit springt een anker eronder. */
  scroll-padding-top: calc(var(--bar) + 12px);
}

body {
  margin: 0;
  color: var(--text);
  font: 400 17px/1.7 var(--body);
  overflow-x: hidden;

  /* De waterachtergrond van de app: dezelfde gradiënt, vastgezet op het
     kijkvenster zodat hij bij het scrollen niet meeloopt — net als de
     WaterBackground die in de app onder de Navigator ligt. */
  background:
    radial-gradient(38rem 30rem at 88% -8%, rgb(255 200 87 / 0.28), transparent 70%),
    linear-gradient(180deg, var(--water-top), var(--water-bottom));
  background-attachment: fixed;
  background-color: var(--water-bottom);
}

::selection { background: rgb(255 140 66 / 0.28); }

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

/* ── Raster ───────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Schermvullend: balk, hero, de tekstkolommen en de voettekst lopen door tot
   de rand, met alleen een marge die meegroeit. De leesbreedte wordt niet door
   de kolom bepaald maar door --measure op de tekst zelf, dus lange regels
   blijven uit. */
.site-header .wrap,
.site-footer .wrap,
.hero .wrap,
.wrap.columns { max-width: none; }

main { padding-bottom: 96px; }
main h2, main h3, main p, main ul, main ol { max-width: var(--measure); }
section { position: relative; }

/* ── Typografie ───────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;   /* Baloo is al rond; te veel negatieve spatiëring plakt */
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 3.8rem); margin: 0 0 20px; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); margin: 0 0 16px; }
h3 { font-size: 1.2rem; margin: 0 0 8px; }

main .wrap > h2 { margin-top: 88px; }
main .wrap > h2:first-child { margin-top: 56px; }
main .columns { margin-top: 64px; }

p { margin: 0 0 18px; }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 34rem;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 140 66 / 0.45);
  transition: border-color 0.2s, color 0.2s;
}
a:hover { border-color: var(--primary); color: var(--primary); }

strong { font-weight: 700; }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ── De balk ──────────────────────────────────────────────────────────────────
   Nagebouwd naar AppBarTheme in app_theme.dart: geen vlak, geen schaduw, geen
   elevation — de achtergrond schijnt erdoorheen, en titel en iconen zijn oranje.
   Eén web-afwijking: zodra er tekst onderdoor scrolt wordt hij half dekkend,
   anders loopt de titel door de inhoud heen. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--water-top) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: var(--shadow-sm);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bar);
  flex-wrap: nowrap;     /* nooit een tweede regel: dat was wat er misging */
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  border: 0;
  min-width: 0;
  /* AppBarTheme.titleTextStyle: Baloo 2, 22px, w700, AppColors.primary */
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}
.brand:hover { color: var(--primary); }
.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex: none;
  transition: transform 0.4s var(--ease);
}
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

.site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.95rem;
  flex: none;
}
.site-header nav a { color: var(--muted); border: 0; white-space: nowrap; }
.site-header nav a:hover { color: var(--primary); }
.site-header nav a[aria-current="page"] { color: var(--text); font-weight: 600; }

/* Op een smal scherm blijft alleen de titel met de knop staan — zoals de app:
   die heeft in de balk ook geen navigatie, alleen een titel en een actie. De
   pagina's zijn bereikbaar via de tekst en de voettekst. */
@media (max-width: 46rem) {
  .site-header nav .nav-link { display: none; }
  .site-header nav { gap: 12px; }
  .brand { font-size: 20px; }
}

/* ── Knoppen ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s, border-color 0.25s, color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #FFA45C);
  color: #2A1200;
  box-shadow: var(--glow);
}
.btn-primary:hover { color: #2A1200; box-shadow: 0 10px 28px rgb(255 140 66 / 0.45); }

.btn-ghost {
  border-color: var(--border);
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--text); }

.site-header .btn { padding: 9px 18px; font-size: 0.95rem; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 32px 0 12px;
}
.cta-note { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(28px, 4vw, 64px) 0 clamp(32px, 4.5vw, 72px);
  overflow: hidden;
}

.hero .wrap {
  display: grid;
  /* minmax(0, 1fr) en niet `auto`: het spoor is een flexrij met alle vier de
     slides naast elkaar, en een auto-kolom wordt zo breed als díe hele rij
     (ruim 800px). Op een smal scherm loopt de hero daarmee het beeld uit. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  justify-items: center;
  text-align: center;
}
.hero .lead { margin-left: auto; margin-right: auto; }

/* Zodra het past: tekst in de ene kolom, het spoor in de andere. Er staat nog
   steeds één slide tegelijk in beeld — de kolommen zijn de pagina-indeling,
   niet de slides. Zo staat de tekst náást het voorbeeld in plaats van eronder,
   en hoef je niet te scrollen om beide te zien. */
@media (min-width: 62rem) {
  .hero .wrap {
    /* Vaste maat voor de tweede kolom, om dezelfde reden: met `auto` eist het
       spoor de breedte van al zijn slides op en houdt de tekst niets over. */
    /* Tweederde tekst, eenderde spoor. Het spoor staat gecentreerd in zijn
       eigen kolom in plaats van tegen de rand. */
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 120px);
  }
  .hero .slider { width: 100%; justify-self: center; }

  /* Bewust géén rechtklappen bij aanwijzen: de slides schuiven onder de cursor
     door, dus die regel vuurde bij elke wissel opnieuw en dan sprong het
     toestel steeds even recht. */
}

/* Nog breder: de tekstkolom mag meegroeien, het spoor houdt zijn maat. */
@media (min-width: 78rem) {
  .hero h1 { font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.2rem); }
}

.hero::before {
  content: "";
  position: absolute;
  width: 42vw; height: 42vw;
  max-width: 440px; max-height: 440px;
  top: -14%; left: -10%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, var(--primary), transparent 68%);
  animation: drift 19s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(40px, 30px, 0) scale(1.14); }
}

.hero h1 .accent {
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Belletjes, puur decoratief; motion.js maakt ze aan. */
.bubbles { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.bubbles span {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.12));
  border: 1px solid rgb(255 255 255 / 0.35);
  animation: rise linear infinite;
  opacity: 0;
}
@media (prefers-color-scheme: dark) {
  .bubbles span {
    background: radial-gradient(circle at 32% 30%, rgb(127 214 176 / 0.4), rgb(127 214 176 / 0.05));
    border-color: rgb(127 214 176 / 0.22);
  }
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.7; }
  85%  { opacity: 0.45; }
  100% { transform: translate3d(14px, -72vh, 0) scale(1.15); opacity: 0; }
}

/* Het spoor staat in de hero, onder de gecentreerde titel. Breed genoeg voor
   het voorbeeld van een oefensessie dat in slide 2 zit. */
/* De witte kaart om tekst en toestel heen. Stond eerder op de slides zelf;
   die zijn er niet meer, dus hij hoort nu bij het spoor. */
.hero .slider {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  box-shadow: var(--shadow-lg);
}
.slider, .screens { min-width: 0; max-width: 100%; }
/* ── De schuivende samenvatting ───────────────────────────────────────────────
   Zonder JavaScript is dit gewoon een lijst met drie kaarten onder elkaar: alle
   drie staan altijd in de HTML, ze worden nooit door script aangemaakt. Pas
   onder .js wordt het een spoor dat opschuift. */

.slider { position: relative; }

.captions {
  display: grid;             /* alle vier in dezelfde cel */
  margin-bottom: 4px;
  text-align: left;
}
.captions .caption {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.captions .caption.is-on { opacity: 1; visibility: visible; }
/* Zonder JavaScript staat de eerste er gewoon (die draagt .is-on in de HTML);
   de rest is dan niet zichtbaar maar staat wél in de broncode. */
.js .captions .caption { transition: opacity 0.45s var(--ease), visibility 0.45s; }

.caption .step {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  margin-bottom: 8px;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--primary);
  background: rgb(255 140 66 / 0.14);
}
.caption h3 { margin: 0 0 6px; font-size: 1.18rem; }
.caption p { margin: 0; color: var(--muted); max-width: none; }

/* ── Het toestel: staat stil, de schermen erin schuiven ──────────────────── */

.device {
  position: relative;
  width: var(--screen-w);
  height: var(--screen);
  margin: 0 auto;
  overflow: hidden;
}
.screens {
  display: flex;
  height: 100%;
  transition: transform 0.55s var(--ease);
  will-change: transform;
}
.screen { flex: 0 0 100%; height: 100%; }
.screen > * { width: 100%; height: 100%; margin: 0; }


/* Het spoor snijdt af wat buiten beeld ligt; de pijlen liggen er juist buiten. */
.js .slider { position: relative; }

.arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translate3d(0, -50%, 0);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: none;
  place-items: center;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
              opacity 0.2s var(--ease);
}
.arrow svg { width: 17px; height: 17px; fill: var(--text); }
.arrow:hover { border-color: var(--primary); background: var(--surface); }
.arrow.prev { left: 8px; }
.arrow.next { right: 8px; }

/* Alleen bij een echte aanwijzer. Op een aanraakscherm veeg je. */
@media (hover: hover) and (pointer: fine) {
  .js .arrow { display: grid; }
}

.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}
.dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  cursor: pointer;
  transition: width 0.35s var(--ease), background 0.35s var(--ease);
}
.dots button[aria-selected="true"] { width: 26px; background: var(--primary); }
/* Zonder JavaScript staan alle kaarten er al; dan zeggen bolletjes niets. */
.dots { display: none; }
.js .dots { display: flex; }

/* ── Het toestel ──────────────────────────────────────────────────────────────
   Alleen het blauwe scherm staat schuin — niet de witte kaart eromheen, want
   daar staat de uitleg in en die moet gewoon recht te lezen zijn.

   De draaiing gaat nu de andere kant op: de linkerrand loopt naar achteren
   weg en hij leunt iets naar achteren (rotateX), zodat het aanvoelt als een
   toestel dat rechtop voor je staat in plaats van een kaart die openklapt.
   Het perspectief zit in de transform zelf, dus elk paneel heeft er zijn
   eigen — er is geen ouder voor nodig.

   Alleen op een breed scherm: op een telefoon kíjk je al naar een
   telefoonscherm, en dan is het alleen maar lastiger te lezen. */
.device {
  position: relative;
  /* Het leunen zit in rotateX, niet in rotateZ. Met veel rotateZ en weinig
     rotateX krijg je een rechthoek die scheef hángt — een scheef scherm.
     Door de bovenrand weg te kantelen (rotateX) wordt hij korter dan de
     onderrand, en dát leest als een toestel dat achteroverligt. De
     perspectiefafstand is ook korter: hoe dichter het oog, hoe sterker die
     verkorting. Het draaipunt ligt laag, alsof hij op zijn onderkant staat. */
  transform: perspective(900px) rotateX(17deg) rotateY(11deg) rotateZ(-3deg)
             scale(0.9);
  transform-origin: 50% 85%;

  /* De rand van het toestel. Dít is wat het een scherm maakt en niet de
     draaiing: een donkere rand met een dubbele afronding (buitenrand ruimer
     dan de binnenkant), en een lichte lijn erlangs waar het licht op valt. */
  border: 9px solid #1C2D38;
  border-radius: 32px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.10),          /* glans op de rand */
    0 2px 0 0 rgb(0 0 0 / 0.30),
    18px 54px 64px -26px rgb(11 73 102 / 0.50), /* slagschaduw, laag */
    6px 16px 20px -10px rgb(11 73 102 / 0.40);  /* contactschaduw */
}

/* De glasplaat: een strijklicht over het scherm, in dezelfde richting als de
   draaiing. Ligt boven de inhoud maar vangt geen klikken. */
.device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg,
    rgb(255 255 255 / 0.38) 0%,
    rgb(255 255 255 / 0.12) 22%,
    rgb(255 255 255 / 0) 42%);
}

/* Binnen het toestel is het paneel alleen nog de inhoud: rand, afronding en
   schaduw komen van .device. */
.screen > .review,
.screen > .appdemo {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}

/* ── Kaartjes ─────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 20px;
  margin: 32px 0 8px;
  padding: 0;
  list-style: none;
  max-width: none;
}
.cards li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.cards li:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.cards h3 { margin: 0 0 8px; font-size: 1.1rem; }
.cards p { margin: 0; color: var(--muted); font-size: 0.98rem; max-width: none; }

/* ── Tabel ────────────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  margin: 32px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  background-image:
    linear-gradient(to right, var(--surface), transparent 12px),
    linear-gradient(to left, var(--surface), transparent 12px),
    linear-gradient(to right, rgb(11 73 102 / 0.10), transparent 12px),
    linear-gradient(to left, rgb(11 73 102 / 0.10), transparent 12px);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
table { border-collapse: collapse; width: 100%; min-width: 36rem; font-size: 0.97rem; }
th, td { text-align: left; padding: 15px 18px; vertical-align: top; }
thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.2s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tbody th { font-weight: 700; white-space: nowrap; }

/* ── Losse elementen ──────────────────────────────────────────────────────── */

.note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--seagrass);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 34px 0;
  max-width: var(--measure);
  box-shadow: var(--shadow-sm);
}
.note p:last-child { margin: 0; }

ul.checks { list-style: none; padding: 0; margin: 24px 0; }
ul.checks li { padding-left: 34px; position: relative; margin-bottom: 14px; }
ul.checks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.5em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 2px 6px rgb(255 140 66 / 0.35);
}
ul.checks li::after {
  content: "";
  position: absolute;
  left: 7px; top: calc(0.5em + 5px);
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Voettekst ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  color: var(--muted);
  font-size: 0.93rem;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.site-footer a { border: 0; }
.site-footer a:hover { color: var(--primary); }
.site-footer .spacer { margin-left: auto; }

/* ── Binnenvliegen bij het scrollen ───────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js .cards[data-reveal] li { transition: inherit; }
.js .cards[data-reveal].is-in li:nth-child(2) { transition-delay: 0.08s; }
.js .cards[data-reveal].is-in li:nth-child(3) { transition-delay: 0.16s; }

/* ── Minder beweging ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .bubbles { display: none; }
  /* De hoek blijft staan; alleen de overgang eruit. */
  .device { transition: none !important; }
  /* Geen schuivend spoor, maar de drie kaarten onder elkaar. */
  .js .slider { overflow: visible; }
  .js   .js   .js .dots { display: none; }
}

/* Alleen voor schermlezers: de samenvatting in de hero heeft een kop nodig voor
   de documentstructuur, maar op het scherm zou die niets toevoegen. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── De zwevende knop ─────────────────────────────────────────────────────────
   FloatingActionButtonThemeData in app_theme.dart: vlak in AppColors.primary,
   tekst en icoon wit. Hier vastgezet onderaan het scherm, gecentreerd, zodat de
   enige oproep tot actie altijd binnen bereik is. De hele transform staat op
   één plek, want translateX(-50%) is wat hem centreert — een hover die alleen
   translateY zet, zou hem naar rechts schieten. */

.fab {
  position: fixed;
  white-space: nowrap;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translate3d(-50%, 0, 0);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.02rem;
  color: #FFFFFF;
  background: var(--primary);
  box-shadow: 0 8px 26px rgb(255 140 66 / 0.45), 0 2px 8px rgb(11 73 102 / 0.20);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s;
}
.fab:hover {
  color: #FFFFFF;
  background: #FF9D5C;
  transform: translate3d(-50%, -3px, 0);
  box-shadow: 0 14px 34px rgb(255 140 66 / 0.5), 0 2px 8px rgb(11 73 102 / 0.20);
}
.fab:active { transform: translate3d(-50%, 0, 0); }
.fab svg { width: 20px; height: 20px; fill: currentColor; }

/* Ruimte onder de voettekst, anders ligt de knop erover. */
body { padding-bottom: 104px; }

/* ── Voorbeeld van een oefensessie ────────────────────────────────────────────
   Nagebouwd naar screens/review: de vraag komt als chatbubbel binnen, je
   antwoord staat ingesprongen eronder, en in de strook onderaan verschijnt
   eerst "Had je dit goed of fout?" met twee cirkels en daarna de halve pizza
   voor "Hoe lang moest je nadenken?".

   Het geheel is versiering (aria-hidden): het legt uit wat de tekst ernaast al
   zegt, en er staat niets in dat geïndexeerd hoeft te worden. */

.review {
  /* Alle tekst in de voorbeelden is een veelvoud van --u, en --u volgt de
     hoogte van het toestel. Groeit de telefoon, dan groeit de tekst mee en
     blijft de verhouding gelijk. IJkpunt: bij --screen 560 is --u 10px. */
  --u: calc(var(--screen) / 56);
  width: var(--screen-w);
  /* Los zou 560 px mooi zijn; in een slide moet er tekst boven passen. */
  height: var(--screen);
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  text-align: left;
  font-size: calc(var(--u) * 1);
}

/* De balk van de app: doorkijk, titel oranje in Baloo 2. */
.review-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 6px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: calc(var(--u) * 1.13);
  color: var(--primary);
  flex: none;
}
.review-bar .count {
  margin-left: auto;
  font-family: var(--body);
  font-size: calc(var(--u) * 0.8);
  font-weight: 700;
  color: var(--muted);
}

.transcript {
  /* Zelfde reden als .editor .rows: een bodem, zodat de bubbels nooit tot een
     streepje samengedrukt kunnen worden. */
  flex: 1 1 auto;
  min-height: 7rem;
  padding: 10px 16px 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

/* Bubbels: dezelfde maten en hoeken als chat_bubble.dart. Vraag en antwoord
   staan allebei links; het antwoord springt 32px in. */
.bubble {
  flex: none;            /* zie .editor .rows > .row: anders krimpen ze mee */
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 4px 18px 18px 18px;
  background: var(--surface);
  box-shadow: 0 3px 6px rgb(0 0 0 / 0.10);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
              background 0.5s var(--ease), box-shadow 0.4s var(--ease),
              font-size 0.3s var(--ease);
}
.bubble.is-in { opacity: 1; transform: none; }

.bubble.q.active {
  font-size: calc(var(--u) * 1.2);
  /* Color.lerp(cardColor, primary, 0.06) */
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  box-shadow: 0 5px 18px 2px rgb(255 140 66 / 0.28), 0 3px 6px rgb(0 0 0 / 0.10);
}

.bubble.a {
  margin-left: 32px;
  border-radius: 18px 18px 4px 18px;
  color: #FFFFFF;
  background: #90A4AE;              /* nog niet beoordeeld */
}
.bubble.a.graded { background: var(--grade, #43A047); }
.bubble.a.wrong  { background: #EF5350; }   /* deleteColor */

.bubble .meta {
  display: block;
  font-size: calc(var(--u) * 0.73);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}

/* De strook onderaan — in de app de ruimte waar het toetsenbord stond. */
.slot {
  flex: none;
  height: clamp(96px, 12vh, 116px);
  position: relative;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.panel {
  position: absolute;
  inset: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.panel.is-on { opacity: 1; }

/* Invoer */
.panel.input { justify-content: flex-start; padding-top: 18px; }
.field {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--water-top);
}
.field .typed { flex: 1; color: var(--text); }
.field .typed:empty::before { content: "Jouw antwoord…"; color: var(--muted); }
.field .caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--primary);
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.field .send {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  display: grid;
  place-items: center;
  transition: transform 0.2s var(--ease);
}
.field .send svg { width: 17px; height: 17px; fill: #fff; }
.panel.input.sending .send { transform: scale(0.82); }

/* Goed of fout — de lage variant (_CompactJudgement): Goed links, spieken in
   het midden, Fout rechts, alle drie over de volle hoogte van de strook. */
.panel.judge-panel {
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
}
.jbtn {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: calc(var(--u) * 0.9);
  font-weight: 700;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.jbtn.good { background: #4CAF50; color: #fff; }            /* correctUnselected */
.jbtn.good.picked {
  background: #388E3C;                                      /* correctSelected */
  box-shadow: 0 5px 14px rgb(56 142 60 / 0.4);
}
.jbtn.bad { background: #FFEBEE; color: #D32F2F; }          /* wrongBg / wrongFg */
.jbtn.bad.picked {
  background: #E53935; color: #fff;                         /* wrongSelected */
  box-shadow: 0 5px 14px rgb(229 57 53 / 0.4);
}

.cheat {
  flex: none;
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 0 10px;
  font-size: calc(var(--u) * 0.67);
  color: #83A0B0;                                           /* subtleText */
}
.cheat svg { width: 18px; height: 18px; fill: #A3BDCB; }    /* subtleIcon */

/* Hoeveel moeite kostte het — de lage variant (_NumberButton): vijf knopjes,
   1 links … 5 rechts, elk in zijn eigen tint. Onaangeraakt staan ze op 18%
   van die kleur; gekozen vullen ze helemaal. */
.panel.grade {
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 12px 14px;
}
.num {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: calc(var(--u) * 1.07);
  font-weight: 600;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, transparent);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.num.picked {
  background: var(--c);
  color: #fff;
  font-weight: 700;
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 45%, transparent);
}
.num.dim { opacity: 0.45; }

/* De vraag die bij de knoppen hoort, in de laatste bubbel (ChatBubble.prompt):
   een dunne lijn en daaronder de tekst in het oranje. */
.bubble .prompt-line {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #DCEAF3;                            /* borderSubtle */
  font-size: calc(var(--u) * 0.87);
  font-weight: 600;
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  /* Geen doorlopende vertoning; de eindstand blijft staan. */
  .bubble { opacity: 1; transform: none; }
  .field .caret { animation: none; }
}

/* ── Voorbeelden uit de app op slide 1 en 3 ───────────────────────────────────
   Alles staat standaard gewoon zichtbaar en stil. De animaties hangen aan
   .is-active, die motion.js op de slide in beeld zet — dus zonder JavaScript
   zie je precies dezelfde plaatjes, alleen zonder beweging. */

.appdemo {
  --u: calc(var(--screen) / 56);   /* zie .review */
  width: var(--screen-w);
  margin: 12px auto 0;
  text-align: left;
  font-size: calc(var(--u) * 1.35);
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

/* Slide 1 — de kaart zoals je hem invoert (card_item.dart, _buildCard):
   vraag vet bovenaan met de opslaanknop ernaast, een dunne lijn, en daaronder
   het antwoord. Niet twee kolommen — dat is de brede lijstweergave. */

.editor .sheet-title,
.stats .sheet-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: calc(var(--u) * 1.6);
  color: var(--primary);
  margin: 0 0 9px;
}

/* De lijst is de scrollende helft; wat er niet meer in past valt bovenaan weg,
   net als in de app waar je lijst doorloopt boven de lege kaart. */
.editor { display: flex; flex-direction: column; height: var(--screen); }
.editor .rows {
  list-style: none;
  margin: 0;
  padding: 0;
  /* basis auto in plaats van 0: de lijst vertrekt vanaf zijn eigen inhoud en
     groeit met de vrije ruimte mee, in plaats van vanaf niets. min-height is
     het vangnet — twee volle kaarten passen er altijd in. */
  flex: 1 1 auto;
  min-height: 6.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
}

/* De lege kaart eronder staat iets losser van de lijst, en licht op zolang je
   erin bezig bent. */
.editor .row.new {
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.editor .row.new.busy {
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgb(255 140 66 / 0.22);
}

/* flex: none is hier niet cosmetisch. De lijst is een flexkolom, en flexitems
   krimpen standaard zodra de inhoud niet meer past. Zonder deze regel wordt een
   nieuw toegevoegde kaart platgedrukt in plaats van dat de oudste bovenaan uit
   beeld schuift — hij stond er dus wél, maar was een paar pixels hoog. */
.editor .rows > .row { flex: none; }

.editor .row {
  padding: 7px 11px;
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 2px 5px rgb(11 73 102 / 0.07);
  font-size: calc(var(--u) * 1.3);
  line-height: 1.35;
}
/* De scheidingslijn tussen vraag en antwoord: 1px op 8% dekking. */
.editor .row .a {
  display: block;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--muted);
  min-height: 1.2em;
}
.editor .row .line { display: flex; align-items: flex-start; gap: 8px; }
.editor .q { font-weight: 700; flex: 1; min-height: 1.2em; word-break: break-word; }

/* De tijdelijke tekst uit _fieldDecoration. */
.editor .row.new .q:empty::before { content: "Nieuwe vraag…"; }
.editor .row.new .a:empty::before { content: "Antwoord…"; }
.editor .row.new .q:empty::before,
.editor .row.new .a:empty::before {
  color: color-mix(in srgb, var(--text) 38%, transparent);
  font-weight: 400;
}

.editor .row .typing::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1.05em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--primary);
  animation: blink 1.1s steps(1) infinite;
}

/* Het vinkje "Opslaan": gedoofd tot er iets te bewaren is. */
.editor .save {
  width: 17px; height: 17px;
  flex: none;
  display: grid;
  place-items: center;
  opacity: 0.25;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.editor .save svg { width: 14px; height: 14px; fill: var(--text); }
.editor .save.on { opacity: 1; transform: scale(1.12); }
.editor .save.on svg { fill: var(--primary); }

.editor .hint { margin: 9px 0 0; font-size: calc(var(--u) * 1.15); color: var(--muted); }
/* De kaart die net is opgeslagen, schuift van onderen de lijst in. */
.editor .row.fresh { animation: row-in 0.45s var(--ease) both; }

@keyframes row-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Slide 3 — het dashboard met een selectie */

.decks {
  /* Flex en geen grid: de decks staan onder elkaar bovenin met vaste
     tussenruimte, en `margin-top: auto` op de trainknop duwt die naar de
     onderrand. In een grid met align-content: start doet zo'n auto-marge
     niets — daar is geen vrije ruimte om te verdelen. */
  display: flex;
  flex-direction: column;
  gap: 10px;                      /* DeckSurface.gap = 10 */
  min-height: var(--screen);
}
.decks .deck { flex: none; }

/* De balk van het dashboard: woordmerk in oranje Baloo 2 met de
   gebruikersnaam eronder, zoals _Wordmark in goldfish_app_bar.dart. */
.decks .app-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 0 10px;
}
.decks .app-bar img { width: 26px; height: 26px; border-radius: 8px; flex: none; }
.decks .mark {
  display: grid;
  font-family: var(--heading);
  font-weight: 700;
  font-size: calc(var(--u) * 1.13);
  line-height: 1.1;
  color: var(--primary);
}
.decks .mark i {
  font-style: normal;
  font-family: var(--body);
  font-size: calc(var(--u) * 0.73);
  font-weight: 600;
  color: var(--muted);
}

.deck {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 18px;               /* DeckSurface.radius = 18 */
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.deck.picked {
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-md);
  transform: translate3d(0, -1px, 0);
}
.deck-body { min-width: 0; flex: 1; }
.deck-title { margin: 0; font-weight: 700; font-size: calc(var(--u) * 0.93); }

.deck .dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 20%, transparent);
}

/* Het gevulde vinkje dat een gekozen deck markeert (_SelectionCheck). */
.deck .tick {
  width: 21px; height: 21px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  border: 2px solid var(--surface);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.deck .tick svg { width: 13px; height: 13px; fill: #fff; }
.deck.picked .tick { opacity: 1; transform: scale(1); }

.chips { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: calc(var(--u) * 0.77); }
.chip { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.chip b { color: var(--text); }
.chip i { width: 7px; height: 7px; border-radius: 50%; }
.chip.due i { background: #FFA726; }   /* AppColors.dueColor */
.chip.new i { background: #B0BEC5; }   /* AppColors.newColor */

.badge {
  font-size: calc(var(--u) * 0.7);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
}
.badge.pub { background: #1E88E5; }    /* AppColors.badgePublic */

/* De knop onderaan het dashboard, met het aantal erop. */
.decks .train {
  display: block;
  margin-top: auto;
  padding: 10px;
  border-radius: 999px;
  text-align: center;
  font-size: calc(var(--u) * 0.87);
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  box-shadow: var(--glow);
  opacity: 0.35;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.decks .train.ready { opacity: 1; }
.decks .train.bump { transform: scale(1.04); }

/* Slide 4 — de statistieken */

.stats {
  min-height: var(--screen);
  display: flex;
  flex-direction: column;
}
.stats .chart-wrap { display: flex; align-items: center; }

.stats .figures {
  display: flex;
  justify-content: space-evenly;
  gap: 8px;
  padding: 6px 0 10px;
}
.stats .figures span { text-align: center; }
.stats .figures b {
  display: block;
  font-family: var(--heading);
  font-size: calc(var(--u) * 2);
  line-height: 1.1;
}
.stats .figures i { font-style: normal; font-size: calc(var(--u) * 1.1); color: var(--muted); }

.stats .chart { width: 100%; display: block; }
.stats .chart .bars rect { fill: color-mix(in srgb, var(--text) 13%, transparent); }
.stats .chart .ln {
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stats .chart .remote { stroke: #26A69A; }   /* lange termijn */
.stats .chart .stable { stroke: #FFA726; }   /* korte termijn */
.stats .chart .recent { stroke: #AB47BC; }   /* nu */

/* De agenda uit stats_calendar.dart: een maand in zeven kolommen, elke dag
   gekleurd naar hoeveel je die dag geoefend hebt — van oranje (weinig) naar
   groen (veel), met vandaag omrand in de merkkleur. */
.stats .agenda { margin-top: 12px; }

.stats .agenda-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(var(--u) * 1.1);
  color: var(--muted);
  margin-bottom: 3px;
}
.stats .agenda-bar svg { width: 13px; height: 13px; fill: var(--muted); opacity: 0.8; }
.stats .agenda-bar .month { flex: 1; text-align: center; font-weight: 600; }
.stats .agenda-bar .chev { font-size: 15px; line-height: 1; opacity: 0.7; }

.stats .weekdays,
.stats .days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;                          /* mainAxisSpacing / crossAxisSpacing = 3 */
}
.stats .weekdays {
  font-size: calc(var(--u) * 0.9);
  color: var(--muted);
  text-align: center;
  margin-bottom: 3px;
}

.stats .day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: calc(var(--u) * 0.9);
  color: var(--muted);
  background: var(--surface);
}
.stats .day.empty { background: none; }
.stats .day.hot { background: var(--heat); color: #fff; font-weight: 600; }
.stats .day.today { outline: 1.5px solid var(--primary); outline-offset: -1.5px; }

.stats .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 13px; margin: 12px 0 2px; font-size: calc(var(--u) * 1.1); color: var(--muted); }
.stats .lg { display: inline-flex; align-items: center; gap: 5px; }
.stats .lg i { width: 11px; height: 3px; border-radius: 2px; background: var(--c); }
/* "Geoefend" zijn de staafjes, dus een blokje in plaats van een streep. */
.stats .lg.bar i { width: 7px; height: 8px; border-radius: 1.5px; opacity: 0.22; }

/* De lijnen tekenen zichzelf zodra de slide in beeld komt. */
.screen.is-active .stats .chart .ln {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.5s var(--ease) both;
}
.screen.is-active .stats .chart .remote { animation-delay: 0.15s; }
.screen.is-active .stats .chart .stable { animation-delay: 0.3s; }
.screen.is-active .stats .chart .recent { animation-delay: 0.45s; }
.screen.is-active .stats .chart .bars rect { animation: grow 0.5s var(--ease) both; transform-origin: 50% 100%; }
.screen.is-active .stats .figures span { animation: pop 0.45s var(--ease) both; }
.screen.is-active .stats .figures span:nth-child(2) { animation-delay: 0.08s; }
.screen.is-active .stats .figures span:nth-child(3) { animation-delay: 0.16s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pop {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Vegen: de browser mag verticaal scrollen, horizontaal doen wij zelf. */
.js .slider { touch-action: pan-y; }
.js .slider:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .screen.is-active .editor *,
  .screen.is-active .decks *,
  .screen.is-active .stats * { animation: none !important; }
  .screen.is-active .stats .chart .ln { stroke-dashoffset: 0; }
}

/* ── De tekst onder de hero, in kolommen ──────────────────────────────────────
   Elk onderwerp is een blok; de blokken verdelen zich over de kolommen. Geen
   CSS-kolommen (column-count): dan loopt één lap tekst van onder in de ene
   kolom naar boven in de volgende, en zit je te scrollen om één alinea te
   lezen. Zo blijft elk onderwerp bij elkaar. */

.columns { display: grid; gap: clamp(28px, 3vw, 48px) clamp(32px, 5vw, 88px); }

.block { min-width: 0; }
.block h2 { margin-top: 0; }
/* Binnen een kolom bepaalt de kolom de leesbreedte, niet --measure. */
.columns .block h2,
.columns .block h3,
.columns .block p,
.columns .block ul,
.columns .block ol,
.columns .block .note { max-width: none; }
.block .cta-row { margin-top: 24px; }

@media (min-width: 62rem) {
  .columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 78rem) {
  .columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* De eerste kop hoeft geen aanloop meer: de blokken staan al uit elkaar. */
main .columns > .block > h2 { margin-top: 0; }