/* Sondable, de site. Hero herbouwd op 6 september 2026: gecentreerde kop,
   aanmeldveld, en een doorlopende strook voorbeeldreels (CSS, geen JS).
   Regels staan in docs/stijlgids-site.md; het referentielogboek van deze
   ronde in §11 daar. Referentie van Max: de PulseFit-hero. Aanvullend via
   Mobbin: VEED (kop, veld, kaarten eronder), Descript (kop kort, sub legt uit),
   ISO Meet (de regel onder het veld), Monte (post-kaarten met cijfers eronder).

   Drie stemmen, conform stijlgids-site.md §3:
   - Poppins         500-700   koppen, het kerncijfer en wat het product zegt
   - Inter           400-600   al het andere
   - JetBrains Mono  400-500   de bewijslaag: n, drempels, annotaties     */

/* Zelf gehost, latin-subset van Google Fonts (7 september 2026). Inter en
   JetBrains Mono zijn variabele fonts (één bestand, gewichtsbereik); Poppins
   heeft drie losse sneden. font-display: swap, zodat tekst nooit wacht. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand: #1354F6;      /* gemeten: 4,5+ met witte tekst erop, stijlgids §11 */
  --brand-700: #0F42C7;
  --brand-50: #EEF3FF;
  --brand-op-nacht: #579EFF; /* merkkleur op donker komt nooit uit stap 700 */

  /* licht, één op één de app-tokens van 1 september */
  --canvas: #FFFFFF;
  --vlak: #F7F7F7;
  --lijn: #EAEBED;
  --tekst: #151619;
  --tekst-2: #43474E;
  --tekst-3: #71767F;

  /* donker: alleen nog voor de reelframes in de strook */
  --nacht: #0B0C0D;
  --nacht-tekst: #F4F6F8;
  --nacht-tekst-2: #A2ABB9;
  --nacht-tekst-3: #6E7684;
  --nacht-lijn: rgba(255, 255, 255, .11);

  --radius: 12px;
  --radius-klein: 8px;

  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --kolom: 1120px;
  --sectie: clamp(96px, 12vw, 160px);

  /* de strook */
  --reelbreedte: 232px;
  --reelgap: 16px;
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--tekst);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
::selection { background: var(--brand-50); color: var(--brand-700); }

/* ---------- Bouwstenen ---------- */

.kolom {
  width: 100%;
  max-width: var(--kolom);
  margin: 0 auto;
  padding: 0 24px;
}

.sectie { padding: var(--sectie) 0 0; }

/* De paginakop: de enige plek met gewicht 700 (stijlgids-site §2). */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 13.6em;
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--brand); }

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -.016em;
  margin: 0 0 28px;
  max-width: 22ch;
  text-wrap: balance;
}
h2 em { font-style: normal; color: var(--brand); }

h3 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

p { margin: 0 0 18px; max-width: 60ch; }
p:last-child { margin-bottom: 0; }

.sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--tekst-2);
  max-width: 48ch;
  margin: 26px 0 0;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 22px;
}

.klein { font-size: 15px; color: var(--tekst-2); }
.mono { font-family: var(--font-mono); font-size: 13px; color: var(--tekst-3); }
strong { font-weight: 600; }

/* ---------- Navigatie ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .94); /* geen backdrop-blur: die vraagt elk frame een nieuwe vervaging van alles wat eronder beweegt */
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out;
}
.nav.gezakt { border-bottom-color: var(--lijn); }
.nav .kolom {
  max-width: none;
  padding: 0 clamp(24px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* Het merk is het lockup uit de app (merkteken.tsx), één op één:
   de drie vlakken in merkkleur, de letters in de tekstkleur. */
.merk { display: flex; align-items: center; text-decoration: none; color: var(--tekst); }
.merk .lockup { height: 26px; width: auto; display: block; }

/* ---------- Knoppen en velden ---------- */

.knop {
  appearance: none;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  padding: 0 22px;
  height: 48px;
  border-radius: var(--radius-klein);
  background: var(--brand);
  color: #fff;
  white-space: nowrap;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knop:hover { background: var(--brand-700); }
.knop:active { transform: translateY(1px); }
.knop.klein { height: 40px; font-size: 15px; padding: 0 16px; }

.veld {
  appearance: none;
  font-family: var(--font-body);
  font-size: 16px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-klein);
  background: var(--canvas);
  color: var(--tekst);
  width: 100%;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.veld::placeholder { color: var(--tekst-3); }
.veld:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(19, 84, 246, .14);
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.aanmelden { display: flex; gap: 10px; max-width: 470px; margin-top: 36px; }
.aanmelden .veld { flex: 1; }
.geruststelling { margin-top: 12px; font-size: 14px; color: var(--tekst-3); max-width: 470px; }

.melding {
  margin-top: 14px;
  font-size: 15px;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  max-width: 470px;
  display: none;
}
.melding.zichtbaar { display: block; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  padding: clamp(56px, 8vw, 104px) 0 0;
}

/* Alles gecentreerd in één kolom: kop, sub, veld, regel. */
.herotekst {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.herotekst .eyebrow { margin-bottom: 26px; }
.herotekst .sub { max-width: 46ch; margin-top: 24px; }
.herotekst .aanmelden { width: 100%; max-width: 520px; }
.herotekst .geruststelling { text-align: center; }

/* ---------- Het raster: de vloer van de hero ---------- */

/* Een perspectiefraster in de lijnkleur dat langzaam naar de kijker toe loopt.
   Alleen transform (§5), geen kleur, en het staat stil bij reduced motion.
   De horizon ligt op 22% van de hoogte (perspective-origin), dus boven de
   kop; het masker laat de lijnen bij de horizon en onderaan in het canvas
   verlopen. Dat is een uitsnede, geen kleurverloop. Eén cel per omloop van
   de animatie, zodat de naad onzichtbaar is. */
.raster {
  position: absolute;
  inset: 0 0 96px;
  z-index: 0;
  overflow: hidden;
  perspective: 260px;
  perspective-origin: 50% 22%;
  pointer-events: none;
}
/* De uitloop in het canvas is geen masker maar twee vlakken in de canvaskleur
   over het raster heen. Gemeten op 7 september 2026 (4× CPU-vertraging): met een
   masker op een bewegende laag kost de hero 21 ms per frame, met vlakken 16,7.
   Zelfde beeld, zie stijlgids-site.md §2 en §11. */
.raster::before, .raster::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; }
.raster::before { top: 0; height: 40%; background: linear-gradient(to bottom, var(--canvas) 15%, transparent); }
.raster::after { bottom: 0; height: 16%; background: linear-gradient(to top, var(--canvas), transparent); }
.raster .vlak {
  position: absolute;
  inset: 0;
  transform: rotateX(64deg);
}
.raster .lijnen {
  position: absolute;
  inset: -30% -100%; /* zo klein als kan zonder dat de randen in beeld komen: de laag is anders acht keer het scherm */
  background-image:
    linear-gradient(to right, rgba(21, 22, 25, .11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 22, 25, .11) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: vloer 3.2s linear infinite;
  will-change: transform;
}
.hero[data-uit] .raster .lijnen { animation-play-state: paused; }
@keyframes vloer {
  from { transform: translate3d(0, -72px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.herotekst, .strook, .bron, .hero .peilmerk { position: relative; z-index: 1; }

/* ---------- De strook: acht voorbeeldreels, doorlopend ---------- */

/* De beweging is CSS en geen GSAP: hij moet ook lopen zonder script, en hij
   is de enige doorlopende beweging op de pagina (stijlgids-site §2 en §5).
   De randen lopen uit in het canvas via een masker; dat is geen kleurverloop
   maar een uitsnede, en dus geen overtreding van §13. */
.strook {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 14px; /* het etiket steekt over de bovenrand van de kaart */
  overflow: hidden;
}
/* De randen lopen uit in het canvas via twee vlakken, geen masker (zie .raster). */
.strook::before, .strook::after, .koppelstrook::before, .koppelstrook::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 7%;
  z-index: 2;
  pointer-events: none;
}
.strook::before, .koppelstrook::before { left: 0; background: linear-gradient(to right, var(--canvas), transparent); }
.strook::after, .koppelstrook::after { right: 0; background: linear-gradient(to left, var(--canvas), transparent); }
.baan {
  display: flex;
  width: max-content;
  animation: schuif 48s linear infinite;
  will-change: transform;
}
.strook:hover .baan,
.strook[data-uit] .baan { animation-play-state: paused; }
@keyframes schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Twee identieke lijsten, elk met de tussenruimte als rechterrand, zodat
   precies de helft van de baan één volle ronde is en de naad onzichtbaar. */
.reels {
  display: flex;
  gap: var(--reelgap);
  padding: 0 var(--reelgap) 0 0;
  margin: 0;
  list-style: none;
}

/* Eén kaart: boven het frame (de video), onder de twee getallen. */
.reel {
  position: relative;
  flex: none;
  width: var(--reelbreedte);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--canvas);
}
.reel .frame {
  position: relative;
  aspect-ratio: 9 / 13;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--nacht);
  color: var(--nacht-tekst);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.reel .kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--nacht-tekst-2);
}
.reel .chip { padding: 3px 8px; border: 1px solid var(--nacht-lijn); border-radius: 99px; }
.reel .duur { font-variant-numeric: tabular-nums; }

/* De hook op het beeld, zoals een reel hem zelf ook draagt. */
.reel .hooktekst {
  margin: auto 0 16px;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.reel .curve { width: 100%; height: 52px; display: block; overflow: visible; }
.reel .curve path { fill: none; stroke: var(--brand-op-nacht); stroke-width: 2; stroke-linecap: round; }
.reel .tijdas {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--nacht-tekst-3);
}

.reel .cijfers { display: grid; grid-template-columns: 1fr 1fr; }
.reel .cijfer { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reel .cijfer + .cijfer { border-left: 1px solid var(--lijn); }
.reel .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--tekst-3); }
.reel .waarde {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.reel .klanten .waarde { color: var(--brand); }

/* Twee etiketten in de hele strook: het getal van Instagram (neutraal) en
   het getal van Sondable (merkkleur). Kleur draagt hier betekenis. */
.reel .etiket {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px solid var(--lijn);
  background: var(--canvas);
  color: var(--tekst);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.reel .etiket.klanten-etiket { background: var(--brand); border-color: var(--brand); color: #fff; }

.bron { text-align: center; margin: 18px auto 0; max-width: 72ch; padding: 0 24px; }

/* ---------- Het peilmerk: vloer van de hero, plafond van het slot ---------- */

.peilmerk { position: relative; height: 72px; overflow: hidden; margin-top: 8px; }
.peilmerk .schaal {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(21, 22, 25, .22) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(21, 22, 25, .42) 0 1px, transparent 1px 40px);
  background-size: 100% 9px, 100% 18px;
  background-position: 0 bottom, 0 bottom;
  background-repeat: repeat-x;
  transform-origin: left center;
}
/* Het gemeten punt: een lange merkkleurige tik óp de schaal, met de stip erop.
   Geen gloed: hij hoort bij de schaal, hij zweeft er niet boven. */
.peilmerk .punt {
  position: absolute;
  left: 68%;
  bottom: 0;
  width: 2px;
  height: 28px;
  margin-left: -1px;
  background: var(--brand);
  transform-origin: 50% 100%;
}
.peilmerk .punt::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 99px;
  background: var(--brand);
}
.slot .peilmerk { height: 56px; margin-top: 0; }
.slot .peilmerk .schaal {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .38) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .70) 0 1px, transparent 1px 40px);
  background-position: 0 top, 0 top;
  transform: scaleY(-1);
}

.midden { text-align: center; margin-left: auto; margin-right: auto; }
.intro {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--tekst-2);
  max-width: 52ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.intro.midden { margin-left: auto; margin-right: auto; }
.sectie .bron { text-align: left; margin: 16px 0 0; padding: 0; max-width: 78ch; }

/* ---------- Productvenster ---------- */

.venster {
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  background: var(--canvas);
  overflow: hidden;
  position: relative;
}
.venster .balk {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
}
.venster .stip { width: 9px; height: 9px; border-radius: 99px; background: var(--lijn); }
.venster .adres {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tekst-3);
}
.venster .vol { width: 100%; height: auto; display: block; }
.venster .uitsnede { position: relative; overflow: hidden; }
.venster .uitsnede img { position: absolute; max-width: none; }
.venster .etiket {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-klein);
  background: var(--nacht);
  color: var(--nacht-tekst);
  font-family: var(--font-mono);
  font-size: 12px;
}
.venster .etiket .bol { width: 7px; height: 7px; border-radius: 99px; background: var(--brand-op-nacht); }

/* ---------- De som: het typografische moment ---------- */

.som { margin-top: var(--sectie); background: var(--vlak); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding-bottom: var(--sectie); }
.som .veld { background: var(--canvas); }
.somkern { max-width: 760px; margin: 0 auto; }
/* De schuifregelaars: hairline als baan, de vulling tot de knop in merkkleur
   (een harde stop, geen verloop), het waardepilletje boven de knop. */
.schuivers { display: grid; gap: 36px 40px; max-width: 760px; }
@media (min-width: 720px) { .schuivers { grid-template-columns: 1fr 1fr; } }
.schuiver label { display: block; font-size: 15px; color: var(--tekst-2); margin-bottom: 40px; }
.baanwrap { position: relative; padding: 0 9px; }
.pil {
  position: absolute;
  top: -32px;
  left: 0;
  translate: -50% 0;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}
.schuif {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2px;
  margin: 8px 0;
  border-radius: 2px;
  background: var(--lijn);
  outline: none;
  cursor: pointer;
}
.schuif::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 99px;
  background: var(--canvas);
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(21, 22, 25, .18);
  transition: transform 150ms ease-out;
}
.schuif::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 99px;
  background: var(--canvas);
  border: 2px solid var(--brand);
  box-shadow: 0 1px 3px rgba(21, 22, 25, .18);
}
.schuif:hover::-webkit-slider-thumb, .schuif:active::-webkit-slider-thumb { transform: scale(1.15); }
.schuif:focus-visible { outline: 2px solid var(--brand); outline-offset: 8px; }
.uiteinden { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 9px; font-size: 11px; }

/* Het puntenveld: één stip per reel. */
.stippenveld { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 760px; }
.veldkop { margin: 0 0 18px; max-width: none; }
.stippen + .veldkop { margin: 20px 0 0; }
.stippen { display: flex; flex-wrap: wrap; gap: 4px; min-height: 6px; }
.stippen i { display: block; width: 6px; height: 6px; border-radius: 99px; background: var(--tekst-3); opacity: .5; }
.stippen.blauw i { background: var(--brand); opacity: 1; }
.stippen .rest { flex-basis: 100%; text-align: right; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--tekst-3); }
.koppelstreep { display: flex; align-items: center; gap: 12px; margin: 24px 0 20px; }
.koppelstreep::before, .koppelstreep::after { content: ""; flex: 1; border-top: 1px dashed var(--tekst-3); opacity: .5; }
.koppelstreep .mono { color: var(--brand); font-weight: 500; }
.stippenveld + .naloop { margin-top: clamp(28px, 4vw, 44px); }

.som .reuzencijfer {
  margin: clamp(40px, 6vw, 72px) 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(88px, 15vw, 200px);
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--tekst);
}
.som .reuzencijfer .eenheid {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  color: var(--tekst-3);
  margin-left: 16px;
  letter-spacing: -.01em;
}
.som .regel { font-size: clamp(19px, 2vw, 24px); margin: 0 0 6px; max-width: none; }
.som .regel .cijfer { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.som .regel .accent { color: var(--brand); }
.som .naloop { margin-top: 28px; max-width: 58ch; color: var(--tekst-2); }
.som .draai {
  margin-top: 36px;
  padding: 20px 24px;
  border-left: 2px solid var(--brand);
  background: var(--canvas);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  max-width: 640px;
  color: var(--tekst);
}
.som .aanname { margin-top: 20px; }

/* ---------- De gescrubde curve-sectie (de ene toegestane) ---------- */

.curve-sectie { background: var(--canvas); }
.curve-sectie .kolom { display: flex; flex-direction: column; justify-content: center; }
.curve-doek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  padding: 8px 0 0;
  text-align: center;
}
.curve-tekst h2 { margin: 0 auto 12px; font-size: clamp(30px, 3.4vw, 42px); }
.curve-tekst p { font-size: 17px; margin-bottom: 10px; }
.curve-tekst p { color: var(--tekst-2); margin-left: auto; margin-right: auto; max-width: 54ch; }
.curve-beeld { width: 100%; }
.curve-beeld svg { width: 100%; height: auto; overflow: visible; display: block; }
.curve-beeld .as { stroke: var(--lijn); stroke-width: 1; }
.curve-beeld .tikken line { stroke: var(--lijn); stroke-width: 1; }
.curve-beeld .uren text, .curve-beeld .wijzer text, .curve-beeld .label, .curve-beeld .eindlabel {
  font-family: var(--font-mono); font-size: 11px; fill: var(--tekst-3); letter-spacing: .04em;
}
.curve-beeld .label.blauw { fill: var(--brand); }
.curve-beeld [data-curve-a] { fill: none; stroke: #8A93A5; stroke-width: 2.5; stroke-linecap: round; }
.curve-beeld [data-curve-b] { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; }
.curve-beeld .metingen circle { fill: var(--brand); }
.curve-beeld [data-curve-punt] { fill: var(--brand); }
.curve-beeld .wijzer line { stroke: var(--tekst-3); stroke-width: 1; stroke-dasharray: 2 4; }
.curve-beeld .wijzer text { fill: var(--tekst); }
.curve-beeld .eindlijn { stroke: var(--tekst-3); stroke-width: 1; stroke-dasharray: 4 5; }
.curve-uitleg { margin: 8px auto 0; font-family: var(--font-mono); font-size: 12px; color: var(--tekst-3); text-align: center; max-width: none; }

/* ---------- Drieluiken: hairlines, geen dozen ---------- */

.drieluik {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn);
}
@media (min-width: 860px) { .drieluik { grid-template-columns: repeat(3, 1fr); } }
.drieluik .deel {
  padding: 28px 32px 36px 0;
  border-bottom: 1px solid var(--lijn);
}
@media (min-width: 860px) {
  .drieluik .deel { border-bottom: 0; }
  .drieluik .deel + .deel { border-left: 1px solid var(--lijn); padding-left: 32px; }
}
.drieluik p { font-size: 15.5px; color: var(--tekst-2); }
.drieluik h3 { margin-top: 26px; }

/* Elke tekening is het ding zelf: de sheet, het telefoonscherm, het dashboard,
   de schakelaar, het aanmeldveld. Eén viewBox (320 × 200), drie stijlen: licht
   kader, donker toestel (dezelfde nacht als de reelframes in de hero), en de
   merkkleur voor het ene dat je moet zien. Gedeeld door meting 05, 08 en 10. */
.diagram { aspect-ratio: 320 / 200; color: var(--tekst-3); }
.diagram svg { width: 100%; height: 100%; overflow: visible; display: block; }
.diagram text { font-family: var(--font-mono); font-size: 10px; fill: var(--tekst-3); letter-spacing: .04em; }
.diagram .kader { fill: var(--canvas); stroke: var(--lijn); }
.diagram .kopvlak { fill: var(--vlak); }
.diagram .lijn { stroke: var(--lijn); stroke-width: 1; fill: none; }
.diagram .kop { font-size: 9.5px; letter-spacing: .06em; }
.diagram .cel { fill: var(--tekst); font-variant-numeric: tabular-nums; }
.diagram .cel.grijs { fill: var(--tekst-3); }
.diagram .leegvak { fill: var(--brand-50); fill-opacity: .75; stroke: var(--brand); stroke-width: 1; stroke-dasharray: 4 3; }
.diagram .pilvlak { fill: var(--brand); }
.diagram .piltekst { fill: #fff; font-weight: 500; }
.diagram .balk { fill: var(--tekst-3); opacity: .45; }
.diagram .balk.hoog { opacity: .22; }
.diagram .gelijk { stroke: var(--brand); stroke-width: 1.25; stroke-dasharray: 4 4; }
.diagram .toestel { fill: var(--nacht); }
.diagram .toestelrand { fill: none; stroke: var(--nacht-lijn); }
.diagram .nacht-mono { fill: var(--nacht-tekst-3); font-size: 9px; }
.diagram .nacht-klein { font-family: var(--font-body); font-size: 10px; fill: var(--nacht-tekst-2); letter-spacing: 0; }
.diagram .nacht-groot { font-family: var(--font-display); font-weight: 700; font-size: 26px; fill: var(--nacht-tekst); letter-spacing: -.02em; }
.diagram .nacht-lijn { stroke: var(--nacht-lijn); stroke-width: 1; }
.diagram .onbekend { stroke: var(--nacht-tekst-3); stroke-width: 1.5; stroke-dasharray: 3 4; stroke-linecap: round; }
.diagram .vraag { font-family: var(--font-display); font-weight: 700; font-size: 34px; fill: var(--brand-op-nacht); letter-spacing: 0; }
.diagram .accentgroot { font-family: var(--font-display); font-weight: 600; font-size: 20px; fill: var(--brand); letter-spacing: -.01em; }
.diagram .accent { fill: var(--brand); font-weight: 500; }
.diagram .stip.vol { fill: var(--brand); }
.diagram .stip.leeg { fill: none; stroke: var(--brand); stroke-width: 1.25; stroke-dasharray: 2 2; }
.diagram .schakelaar { fill: var(--brand); }
.diagram .knopje { fill: #fff; }
.diagram .chipvlak { fill: var(--canvas); stroke: var(--lijn); }
.diagram .leeslijn { fill: none; stroke: var(--brand); stroke-width: 1.25; stroke-dasharray: 3 3; }
.diagram .curvelijn { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }

/* ---------- De lagen van meting 06: het merkteken, uitgeklapt ---------- */

.lagen { margin: 0 auto clamp(40px, 5vw, 64px); max-width: 900px; }
.lagenbeeld { width: 100%; height: auto; display: block; overflow: visible; }
.lagenbeeld .vlak path { fill: var(--brand); }
.lagenbeeld .vlak { opacity: var(--dek); transition: opacity 150ms ease-out; cursor: pointer; }
/* Drie standen, in oplopende voorrang: de open laag (klik) staat vol en de andere
   twee op de helft van hun dekking; een hover (data-actief) dimt tijdelijk alles
   behalve het paar waar de muis op staat. */
.lagen[data-open] .vlak:not(.open) { opacity: calc(var(--dek) * .5); }
.lagen[data-actief] .vlak:not(.actief) { opacity: calc(var(--dek) * .28); }
.lagen[data-actief] .vlak.actief { opacity: var(--dek); }
/* Geen tussenruimte tussen de kolommen: elk labelmidden valt dan precies op
   1/6, 1/2 en 5/6 van de breedte, waar de vlakken staan (150, 450, 750). */
.laaglabels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 18px; }
.laaglabel {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-klein);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 18px 8px 10px;
  transition: opacity 150ms ease-out;
}
.laaglabel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* de leider: een korte lijn van het vlak naar het label */
.laaglabel::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 12px; background: var(--tekst-3); opacity: .5; }
.laaglabel .nr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); }
.laaglabel strong { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; color: var(--tekst); }
.laaglabel .wat { font-size: 13px; color: var(--tekst-2); max-width: 22ch; }
.lagen[data-open] .laaglabel[aria-selected="false"] { opacity: .55; }
.lagen[data-open] .laaglabel[aria-selected="true"] .nr { color: var(--brand); }
.lagen[data-open] .laaglabel[aria-selected="true"]::before { background: var(--brand); opacity: 1; }
.lagen[data-actief] .laaglabel:not(.actief) { opacity: .4; }
.lagen[data-actief] .laaglabel.actief { opacity: 1; }
@media (max-width: 719px) {
  .laaglabel strong { font-size: 15px; }
  .laaglabel .wat { font-size: 11px; }
}

/* ---------- De panelen van meting 06: één laag tegelijk, met zijn demo ---------- */

/* Zonder script staan de drie panelen onder elkaar, gescheiden door een hairline.
   Met script (data-klikbaar op .uitleg) liggen ze op dezelfde gridcel en toont
   beweging.js er één; de hoogte is dan de hoogste van de drie, zodat de pagina
   niet springt bij het wisselen. */
.uitleg { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--lijn); }
.paneel { display: grid; gap: 28px; padding-top: clamp(28px, 4vw, 44px); }
.paneel + .paneel { margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--lijn); }
@media (min-width: 860px) {
  .paneel { grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 5vw, 72px); align-items: center; }
}
.uitleg[data-klikbaar] { display: grid; }
.uitleg[data-klikbaar] .paneel { grid-area: 1 / 1; margin-top: 0; border-top: 0; }

/* Aceternity-patroon (referentie van Max, 6 september): de accentstreep links
   van de titel; de titel schuift op hover vier pixels op. De streep hangt aan
   .titel en niet aan h3, zodat hij blijft staan. */
.paneel .titel { position: relative; padding-left: 18px; margin-bottom: 14px; }
.paneel .titel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 3px;
  height: 22px;
  border-radius: 3px;
  background: var(--brand);
}
.paneel h3 { margin: 0; font-size: 21px; transition: transform 150ms ease-out; }
.paneel:hover h3 { transform: translateX(4px); }
.paneel p { font-size: 16px; color: var(--tekst-2); max-width: 46ch; }
.paneel .zodat { border-top: 1px solid var(--lijn); padding-top: 14px; margin-top: 16px; }

/* De demo staat op een vlak (trap 3, alleen), en de tekening vult hem. */
.paneel .demo {
  background: var(--vlak);
  border-radius: var(--radius);
  padding: clamp(20px, 3vw, 36px);
  color: var(--tekst-3);
}
.paneel .demo svg { width: 100%; height: auto; overflow: visible; display: block; }
.paneel .demo text { font-family: var(--font-body); font-size: 11px; fill: var(--tekst); }
.paneel .demo text.mono { font-family: var(--font-mono); font-size: 9px; fill: var(--tekst-3); letter-spacing: .04em; }
.paneel .demo text.mono.helder { fill: var(--tekst); font-variant-numeric: tabular-nums; }
.paneel .demo .regel { fill: var(--lijn); }
.paneel .demo .regel.zin { fill: var(--tekst-3); }
.paneel .demo .streep { stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.paneel .demo .verbinder { stroke: var(--brand); stroke-width: 1.5; fill: none; }
.paneel .demo .chip rect { fill: var(--canvas); stroke: var(--brand); stroke-width: 1.25; }
.paneel .demo .chip text { fill: var(--brand); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; }
.paneel .demo .as { stroke: var(--lijn); stroke-width: 1; }
.paneel .demo .tikken line { stroke: var(--lijn); stroke-width: 1; }
.paneel .demo .curve { stroke: var(--brand); stroke-width: 2; fill: none; stroke-linecap: round; }
.paneel .demo .punten circle { fill: var(--brand); }
.paneel .demo .bubbel rect { fill: var(--canvas); stroke: var(--lijn); }
.paneel .demo .bubbel text:first-of-type { font-family: var(--font-mono); font-size: 10px; font-weight: 500; fill: var(--tekst); letter-spacing: .06em; }
.paneel .demo .kaart rect { fill: var(--canvas); stroke: var(--brand); stroke-width: 1.25; }
.paneel .demo .euro { font-family: var(--font-display); font-weight: 700; font-size: 26px; fill: var(--brand); }

/* De roepen over het vergelijkbord in meting 01. */
.venster .roep {
  position: absolute;
  z-index: 2;
  translate: -50% -50%; /* los van transform, want GSAP zet die zelf */
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid var(--lijn);
  background: var(--canvas);
  color: var(--tekst);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.venster .roep.brand { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 719px) { .venster .roep { display: none; } }

/* De kaarten in de strook tillen op hover. */
.reel { transition: transform 150ms ease-out; }
.reel:hover { transform: translateY(-4px); }

/* ---------- Het toneel van meting 01: scherm achter, kaarten voor ---------- */

/* Het scherm loopt onderaan uit in het canvas (masker, geen kleurverloop) en
   is bewust kleiner dan de kolom, zodat de kaarten erbuiten kunnen hangen. De
   kaarten zweven, dus zij zijn de enige plek op de site met een schaduw. */
.toneel { position: relative; padding: 16px 0 28px; }
.toneel .scherm {
  position: relative;
  width: min(100%, 820px);
  margin: 0 auto;
}
.toneel .scherm::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(to top, var(--canvas), transparent);
  z-index: 1;
  pointer-events: none;
}
.toneel .laag { will-change: transform; }
.toneel .kaarten { position: absolute; inset: 0; pointer-events: none; }
.toneel .kaart {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  padding: 14px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  background: var(--canvas);
  box-shadow: 0 16px 40px rgba(21, 22, 25, .10), 0 1px 2px rgba(21, 22, 25, .06);
  transition: translate 150ms ease-out, box-shadow 150ms ease-out;
}
.toneel .kaart:hover { translate: 0 -3px; box-shadow: 0 22px 48px rgba(21, 22, 25, .14), 0 1px 2px rgba(21, 22, 25, .06); }
.toneel .kaart .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--tekst-3); }
.toneel .kaart .getal { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tekst); }
.toneel .kaart .wat { font-size: 13px; color: var(--tekst-2); }
.toneel .kaart.brand .getal { color: var(--brand); }
.toneel .chipje {
  position: absolute;
  pointer-events: auto;
  padding: 7px 12px;
  border-radius: 99px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(19, 84, 246, .18);
}
@media (max-width: 860px) {
  .toneel { padding-bottom: 0; }
  .toneel .kaarten { position: static; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
  .toneel .kaart, .toneel .chipje { position: static !important; }
  .toneel .kaart { flex: 1 1 200px; box-shadow: none; }
}

/* ---------- De sheet van meting 02 ---------- */

.pijn { align-items: center; }
.pijn h2 { margin-bottom: 20px; }
.pijn p { color: var(--tekst-2); }
.pijn .zodat { border-top: 1px solid var(--lijn); padding-top: 14px; margin-top: 18px; color: var(--tekst); }
.sheet {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--canvas);
  overflow-x: auto; /* op smal scrolt de tabel binnen zijn eigen kader */
}
.sheet table { width: 100%; min-width: 470px; border-collapse: collapse; font-size: 13px; }
.sheet th, .sheet td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  white-space: nowrap;
}
.sheet th {
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--tekst-3);
  background: var(--vlak);
}
.sheet th + th, .sheet td + td { border-left: 1px solid var(--lijn); }
.sheet .r { text-align: right; font-variant-numeric: tabular-nums; }
.sheet td.r { font-family: var(--font-mono); }
.sheet td:first-child { font-family: var(--font-mono); color: var(--tekst-3); }
.sheet td.leeg { width: 19%; }
.sheet th.leeg::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--brand);
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.sheet.klaar th.leeg::after { opacity: 1; }
.sheet .voet { margin: 0; padding: 10px 12px; font-size: 11px; max-width: none; }
.sheet .voet strong { color: var(--tekst); opacity: 0; transition: opacity 300ms ease-out; }
.sheet.klaar .voet strong { opacity: 1; }

/* ---------- Sondable AI: één reel, en het gesprek ernaast ---------- */

/* Midday en Rows (Mobbin) als vertrekpunt, op 7 september 2026 versoberd op
   vraag van Max: geen bord, geen venster, één reelkaart uit de strook en het
   paneel ernaast. Het paneel is de app op schaal: de bronchip, de vraag rechts
   in de merkkleur, het antwoord op het vlak met de balken erin. */
.ai-demo { display: grid; grid-template-columns: var(--reelbreedte) 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; max-width: 820px; margin: 0 auto; }
.ai-reel { margin-top: 14px; } /* ruimte voor het etiket */
.ai-reel:hover { transform: none; }
/* Het getal op de kaart waar de balk over gaat, licht op. */
.ai-reel .cijfer { transition: background-color 300ms ease-out; border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.ai-reel .cijfer.licht { background: var(--brand-50); }
.ai-reel .curve path { transition: stroke-width 300ms ease-out; }
.ai-reel .curve path.licht { stroke-width: 3.5; }
.ai-paneel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--canvas);
  font-size: 13.5px; line-height: 1.45;
}
.ai-kop { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.ai-kop .ster { color: var(--brand); font-size: 15px; }
.ai-kop .mono { margin-left: auto; font-size: 11px; }
.ai-chips { display: flex; gap: 6px; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--lijn);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--tekst-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-chip b { width: 18px; height: 18px; border-radius: 99px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }
.ai-vraag { align-self: flex-end; max-width: 88%; }
.ai-vraag p { margin: 0; max-width: none; min-height: 38px; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--brand); color: #fff; }
.ai-antwoord { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px 14px 14px 4px; background: var(--vlak); }
.ai-antwoord p { margin: 0; max-width: none; }
.ai-laad { position: absolute; top: 12px; left: 12px; visibility: hidden; } /* alleen zichtbaar tijdens de demo; beweging.js zet hem aan en uit */
.ai-assen { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); padding: 10px 0; }
.ai-as .regel { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.ai-as .regel .mono { font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.ai-as .ai-baan { height: 4px; margin: 6px 0 5px; border-radius: 2px; background: var(--lijn); overflow: hidden; }
.ai-as .ai-baan i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
.ai-as .oordeel { font-size: 12px; color: var(--tekst-2); }
.ai-veld { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-klein); color: var(--tekst-3); font-size: 12.5px; }
.ai-veld .pijl { width: 24px; height: 24px; border-radius: 99px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
@media (max-width: 719px) {
  .ai-demo { grid-template-columns: 1fr; justify-items: center; }
  .ai-reel { width: var(--reelbreedte); }
  .ai-paneel { width: 100%; }
}

/* ---------- Koppelingen: twee stroken chips ---------- */

.koppelingen .intro { margin-bottom: 0; }
.koppelstrook {
  position: relative;
  margin-top: 44px;
  overflow: hidden;
}
.koppelstrook::before, .koppelstrook::after { width: 8%; }
.koppelstrook + .koppelstrook { margin-top: 20px; }
.koppelbaan { display: flex; width: max-content; animation: schuif 40s linear infinite; will-change: transform; }
.koppelstrook.terug .koppelbaan { animation-direction: reverse; }
.koppelstrook:hover .koppelbaan,
.koppelstrook[data-uit] .koppelbaan { animation-play-state: paused; }
.chips { display: flex; gap: 28px; padding: 0 28px 0 0; margin: 0; list-style: none; }
.koppel { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; }
.koppel .chip {
  width: 72px; height: 72px;
  border-radius: 99px;
  border: 1px solid var(--lijn);
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  transition: translate 150ms ease-out, border-color 150ms ease-out;
}
.koppel .chip:hover { translate: 0 -3px; border-color: var(--tekst-3); }
.koppel .chip img { width: 28px; height: 28px; display: block; }
.koppel .letter { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; color: var(--tekst); line-height: 1; }
.koppel .naam { font-size: 13px; font-weight: 500; color: var(--tekst-2); white-space: nowrap; }
.bron.midden { text-align: center; margin: 28px auto 0; }

/* ---------- Tweeluik ---------- */

.tweeluik { display: grid; gap: 48px; align-items: start; }
@media (min-width: 940px) { .tweeluik { grid-template-columns: 1fr 1fr; gap: 72px; } }
/* ---------- Het gesprek van meting 09: de vraag van je klant ---------- */

/* Navigate (Mobbin): vraag links, antwoord rechts, als berichten. De klant
   spreekt op het vlak, jij in de merkkleur. */
.gesprek { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.bericht { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.bericht .wie { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); padding: 0 4px; }
.bericht p { margin: 0; font-size: 17px; line-height: 1.5; padding: 14px 18px; border-radius: 18px; max-width: none; }
.bericht.van-klant { align-self: flex-start; }
.bericht.van-klant p { background: var(--vlak); color: var(--tekst); border-bottom-left-radius: 6px; }
.bericht.van-jou { align-self: flex-end; align-items: flex-end; }
.bericht.van-jou p { background: var(--brand); color: #fff; border-bottom-right-radius: 6px; }
.feiten { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.feiten li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--tekst-2);
  padding: 7px 12px;
  border: 1px solid var(--lijn);
  border-radius: 99px;
}
.feiten li::before { content: "✓ "; color: var(--brand); }
@media (max-width: 719px) { .bericht { max-width: 92%; } .bericht p { font-size: 16px; } }

/* ---------- De stappenlijn van meting 10 ---------- */

/* Samara (Mobbin): een lijn met een punt per stap, de tekening erboven, de
   uitleg eronder. Het nummer zit óp de lijn. */
.stappenlijn { list-style: none; padding: 0; margin: 0; display: grid; gap: 40px 24px; }
@media (min-width: 860px) { .stappenlijn { grid-template-columns: repeat(4, 1fr); gap: 0 24px; } }
.stap { display: flex; flex-direction: column; }
.stap .diagram { margin-bottom: 20px; }
.stap .nr {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  margin-bottom: 14px;
}
.stap .nr::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--brand); flex: none; }
.stap .nr::after { content: ""; flex: 1; border-top: 1px solid var(--lijn); }
@media (min-width: 860px) { .stap:last-child .nr::after { display: none; } }
.stap h3 { font-size: 18px; margin-bottom: 6px; }
.stap p { font-size: 15.5px; color: var(--tekst-2); }
.stappenlijn + .bron { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- De weken van meting 11: wat verloopt ---------- */

.wekenveld { max-width: 760px; margin: 0 auto; }
.wekenveld .schuiver label { margin-bottom: 44px; }
.wekenstrook { display: grid; grid-template-columns: repeat(16, 1fr); gap: 6px; margin-top: 32px; }
@media (max-width: 719px) { .wekenstrook { grid-template-columns: repeat(8, 1fr); } }
.week {
  position: relative;
  display: block;
  aspect-ratio: 40 / 34;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--canvas);
  overflow: hidden;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.week svg { position: absolute; inset: 4px 4px 12px; width: calc(100% - 8px); height: calc(100% - 16px); }
.week svg path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; transition: opacity 150ms ease-out; }
.week i {
  position: absolute; left: 0; right: 0; bottom: 2px;
  text-align: center;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .04em;
  color: var(--tekst-3);
}
/* Een week vóór het koppelen: leeg, gearceerd, geen curve. */
.week.kwijt {
  border-color: transparent;
  background: repeating-linear-gradient(135deg, var(--vlak) 0 4px, var(--lijn) 4px 5px);
}
.week.kwijt svg path { opacity: 0; }
.weken .reuzencijfer {
  margin: clamp(28px, 4vw, 40px) 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 9vw, 120px);
  line-height: .95;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  max-width: none;
}
.weken .reuzencijfer .eenheid { font-size: clamp(22px, 3vw, 36px); font-weight: 600; color: var(--tekst-3); margin-left: 14px; letter-spacing: -.01em; }
.weken .reuzencijfer, .weken .aanname { text-align: center; margin-left: auto; margin-right: auto; }
.weken .aanname { margin-top: 12px; }

/* ---------- Het slot: het ene vol-blauwe vlak (Base), met de krans ---------- */

.slot {
  position: relative;
  overflow: hidden;
  margin-top: var(--sectie);
  background: var(--brand);
  color: #fff;
  padding: 0 0 clamp(72px, 9vw, 120px);
  display: flex;
  flex-direction: column;
}
.slot .peilmerk { position: relative; z-index: 2; }
/* De krans: het formulier in het midden, de acht kaarten eromheen op een
   ellips (middelpunt 50/50, straal 42% breed en 36% hoog). De hoogte is vast,
   want de kaarten staan in percentages. */
.slotkrans { position: relative; min-height: 1100px; display: flex; align-items: center; }
.slotinhoud {
  position: relative;
  z-index: 2;
  pointer-events: none; /* de kolom is breder dan de tekst; de kaarten eronder moeten de muis krijgen */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}
.slotinhoud > * { pointer-events: auto; }
.slot h2 {
  color: #fff;
  font-size: clamp(40px, 5.6vw, 72px);
  max-width: 14ch;
  margin-bottom: 20px;
}
.slot p { color: rgba(255, 255, 255, .82); max-width: 48ch; }
.slot .aanmelden { width: 100%; max-width: 520px; margin-top: 28px; }
.slot .veld {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.slot .veld::placeholder { color: rgba(255, 255, 255, .6); }
.slot .veld:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.slot .knop { background: #fff; color: var(--brand-700); }
.slot .knop:hover { background: var(--brand-50); }
.slot .geruststelling { color: rgba(255, 255, 255, .66); text-align: center; }
.slot .melding { background: rgba(255, 255, 255, .14); color: #fff; }
.slotps { position: relative; z-index: 2; display: flex; justify-content: center; text-align: center; margin-top: clamp(24px, 3vw, 40px); }
.slot .ps {
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .28);
  font-size: 16px;
  color: rgba(255, 255, 255, .82);
  max-width: 62ch;
}
.slot .ps strong { color: #fff; }

/* De kaarten in de krans: kopieën van de hero-strook (beweging.js), elk op
   zijn plek met een eigen lichte draai; hover zet hem recht en tilt hem op. */
.lint { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lint .reel {
  list-style: none; /* de kopieën zijn li's in een div, anders staat er een opsommingsteken naast */
  position: absolute;
  left: var(--kx); top: var(--ky);
  width: 140px;
  margin: 0;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--rot));
  transition: transform 200ms ease-out;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 18px 40px rgba(11, 12, 13, .28);
}
.lint .reel:hover { transform: translate(-50%, -50%) rotate(0deg) translateY(-6px); }
/* Acht plekken op een ellips om het formulier: twee boven, twee onder, twee
   per zijkant. Bij een kaart van 140px (23% van 1100px hoog) blijft er tussen
   elke kaart en de tekst minstens 5% lucht; gemeten in krans.cjs. */
.lint .reel:nth-child(1) { --kx: 34%; --ky: 15%; --rot: -6deg; }
.lint .reel:nth-child(2) { --kx: 66%; --ky: 15%; --rot: 5deg; }
.lint .reel:nth-child(3) { --kx: 89%; --ky: 36%; --rot: 9deg; }
.lint .reel:nth-child(4) { --kx: 89%; --ky: 64%; --rot: -4deg; }
.lint .reel:nth-child(5) { --kx: 66%; --ky: 85%; --rot: 7deg; }
.lint .reel:nth-child(6) { --kx: 34%; --ky: 85%; --rot: -8deg; }
.lint .reel:nth-child(7) { --kx: 11%; --ky: 64%; --rot: 5deg; }
.lint .reel:nth-child(8) { --kx: 11%; --ky: 36%; --rot: -9deg; }
.lint .reel .frame { padding: 11px; }
.lint .reel .kop { font-size: 9px; }
.lint .reel .chip { padding: 2px 6px; }
.lint .reel .hooktekst { font-size: 14px; margin-bottom: 10px; }
.lint .reel .curve { height: 36px; }
.lint .reel .tijdas { font-size: 8px; margin-top: 4px; }
.lint .reel .cijfer { padding: 8px 9px 9px; }
.lint .reel .label { font-size: 9px; }
.lint .reel .waarde { font-size: 14px; }
/* Het funnel-etiket: wit op het blauw, de plek in de funnel in mono. */
.lint .reel .etiket.funnel { background: #fff; border-color: #fff; color: var(--brand-700); font-size: 10px; padding: 4px 9px; top: -11px; }
@media (max-width: 1100px) {
  .lint .reel { width: 124px; }
  .lint .reel:nth-child(3), .lint .reel:nth-child(4) { --kx: 92%; }
  .lint .reel:nth-child(7), .lint .reel:nth-child(8) { --kx: 8%; }
}
@media (max-width: 719px) {
  /* op smal is de krans een rij kaarten onder het formulier, met de hand te scrollen */
  .slotkrans { min-height: 0; display: flex; flex-direction: column; padding-top: clamp(48px, 7vw, 72px); }
  .lint { order: 2; position: relative; inset: auto; display: flex; gap: 12px; overflow-x: auto; padding: 24px 24px 12px; margin-top: 8px; }
  .lint .reel { position: relative; left: auto; top: auto; flex: none; width: 120px; transform: none; }
  .lint .reel:hover { transform: none; }
  .lint .reel .hooktekst { font-size: 11px; }
  .lint .reel .curve { height: 26px; }
  .lint .reel .cijfer { padding: 6px 7px; }
  .lint .reel .waarde { font-size: 11px; }
}

/* ---------- Voet ---------- */

.voet {
  padding: 32px 0 40px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tekst-3);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.slot + .voet { border-top: 0; }

/* ---------- Stil: de strook staat, en is met de hand te scrollen ---------- */

@media (prefers-reduced-motion: reduce) {
  .baan { animation: none; }
  .raster .lijnen { animation: none; }
  .koppelbaan { animation: none; }
  .koppelstrook { overflow-x: auto; padding-bottom: 8px; }
  .strook::before, .strook::after, .koppelstrook::before, .koppelstrook::after { display: none; }
  .chips[aria-hidden="true"] { display: none; }
  .strook {
    overflow-x: auto;
    padding-bottom: 12px;
  }
  .reels[aria-hidden="true"] { display: none; }
}

/* ---------- Mobiel ---------- */

@media (max-width: 719px) {
  :root { --reelbreedte: 184px; --reelgap: 12px; }
  .raster { perspective: 200px; }
  .raster .lijnen { background-size: 56px 56px; }
  @keyframes vloer { from { transform: translate3d(0, -56px, 0); } to { transform: translate3d(0, 0, 0); } }
  .aanmelden { flex-direction: column; }
  .strook::before, .strook::after { width: 5%; }
  .stippen { gap: 3px; }
  .stippen i { width: 5px; height: 5px; }
  .reel .frame { padding: 12px; }
  .reel .hooktekst { font-size: 17px; }
  .reel .cijfer { padding: 10px 12px 12px; }
  .reel .waarde { font-size: 16px; }
}