/* Krava — website.
   Zelfde papierachtige taal als de app: warm off-white, één inktblauw accent,
   1px haarlijnen, geen gradiënten en geen gloed.
   Koppen in Source Serif 4, tekst in Public Sans. Beide lokaal, geen extern verzoek. */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-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: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/source-serif-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: "Source Serif 4";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/source-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* KOUD INKTZWAAT MET WARM MESSING.
     Het vorige palet was warm op warm: een bruinige achtergrond met een boter-
     geel accent. Twee warme tinten naast elkaar lezen als modder, niet als luxe.
     Daarom de omgekeerde spanning: een koude, blauwige bijna-zwarte basis (als
     natte inkt) met één verzadigd messing accent dat daardoor echt als metaal
     leest. Het papieren blad blijft warm — dat is het licht in de kamer. */
  --papier: oklch(0.155 0.026 205);
  --blad: oklch(0.218 0.028 205);
  --paneel: oklch(0.192 0.028 205);
  --verhoogd: oklch(0.262 0.030 205);
  --inkt: oklch(0.955 0.006 205);
  --inkt-2: oklch(0.79 0.018 205);
  --inkt-3: oklch(0.625 0.020 205);
  --lijn: oklch(0.305 0.032 205);
  --lijn-zacht: oklch(0.245 0.028 205);

  /* Messing, maar nu echt: meer chroma en iets meer licht, zodat het goud wordt
     in plaats van boter. */
  --accent: oklch(0.885 0.052 88);
  --accent-inkt: oklch(0.93 0.045 90);
  --accent-vlak: oklch(0.285 0.022 88);
  --accent-lijn: oklch(0.47 0.040 88);

  /* Vermiljoen: de rode pen van de corrector. Alleen voor markeringen — het
     actieve streepje, een cijfer, een onderstreping. Nooit voor knoppen. */
  --sein: oklch(0.665 0.185 34);
  --sein-vlak: oklch(0.262 0.062 34);

  --goed: oklch(0.762 0.125 158);
  --goed-vlak: oklch(0.255 0.045 158);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --tekst: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --maat: 1120px;
  --radius: 6px;
  --donker-papier: oklch(0.108 0.020 205);
  color-scheme: dark;
}

/* Fijn korreltje over de donkere vlakken. Het haalt de vlakheid eraf die
   donkere thema's zo goedkoop maakt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Typografie: titels krijgen evenwichtige regels, lopende tekst geen losse
   laatste woordjes. */
h1, h2, h3, .plan-naam {
  text-wrap: balance;
}
p, li, .lead, .klein {
  text-wrap: pretty;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font: 16.5px/1.65 var(--tekst);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.2; }
h3 { font-size: 1.16rem; line-height: 1.35; }
p { margin: 0 0 var(--s4); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-inkt); }
strong { font-weight: 600; }
hr { border: none; border-top: 1px solid var(--lijn); margin: var(--s7) 0; }

.container { max-width: var(--maat); margin: 0 auto; padding: 0 var(--s5); }
.smal { max-width: 660px; }
.midden { max-width: 720px; margin-left: auto; margin-right: auto; }
.lead { font-size: 1.14rem; line-height: 1.6; color: var(--inkt-2); max-width: 62ch; }
.klein { font-size: 0.92rem; color: var(--inkt-3); }
.mono { font-variant-numeric: tabular-nums; }
.nu { font-weight: 600; }

/* ---------------- navigatie ---------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.nav-inhoud {
  max-width: var(--maat);
  margin: 0 auto;
  padding: var(--s3) var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.merk {
  font: 600 1.2rem/1 var(--display);
  letter-spacing: 0.005em;
  color: var(--inkt);
  text-decoration: none;
}
.merk span { color: var(--accent); }
.nav-links { display: flex; gap: var(--s4); margin-left: auto; flex-wrap: wrap; }
.nav-links a {
  color: var(--inkt-2);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--inkt); }
.nav-links a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.nav-actie { display: flex; gap: var(--s2); align-items: center; }

/* Nog niet uit: geen knop maar een mededeling, zodat er niets te klikken valt
   dat je iets laat aanmaken. Wel een link, want rondkijken mag. */
.nav-nog-niet {
  font: 500 0.86rem/1.3 var(--tekst);
  color: var(--inkt-3);
  letter-spacing: 0.01em;
  text-align: right;
}
.nav-nog-niet a { color: var(--accent); text-decoration: none; }
.nav-nog-niet a:hover { text-decoration: underline; }

/* ---------------- aankondiging ---------------- */

/* Bovenaan de landingspagina, vóór alles. Eén keer, en niet weg te klikken:
   het is geen cookiebanner maar een feit over het product. */
.aankondiging {
  background: var(--accent-vlak);
  border-bottom: 1px solid var(--accent-lijn);
}
.aankondiging-binnen {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}
.aankondiging-label {
  flex: 0 0 auto;
  font: 600 0.72rem/1 var(--tekst);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.aankondiging p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--inkt-2);
}
.aankondiging strong { color: var(--inkt); }
.aankondiging a { color: var(--accent); }

@media (max-width: 700px) {
  .aankondiging-binnen { flex-direction: column; gap: var(--s2); }
}

/* ---------------- knoppen ---------------- */

.knop {
  display: inline-block;
  font: 500 0.95rem/1 var(--tekst);
  color: var(--inkt);
  background: var(--blad);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 11px 16px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.knop:hover { border-color: var(--inkt-3); color: var(--inkt); }
.knop.primair { background: var(--accent); border-color: var(--accent); color: oklch(0.19 0.014 72); font-weight: 600; }
.knop.primair:hover { background: var(--accent-inkt); border-color: var(--accent-inkt); color: oklch(0.19 0.014 72); }
.knop.stil { background: none; border-color: transparent; color: var(--inkt-2); padding-left: 0; padding-right: 0; text-decoration: underline; }
.knop.groot { padding: 14px 22px; font-size: 1rem; }

.knoprij { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

/* ---------------- hero ---------------- */

.hero { padding: var(--s9) 0 var(--s8); }
/* Een nauwelijks zichtbaar licht van boven, zodat de bovenkant optilt.
   Geen kleurverloop — alleen minder donker. */
.hero { background-image: radial-gradient(85% 65% at 50% 0%, oklch(0.26 0.030 205) 0%, transparent 68%); }
/* Immersive hero: de kop alleen, op volle breedte, en het beeld er groot
   onder. Twee kolommen naast elkaar maakt van allebei een half verhaal. */
.hero-rooster { display: block; }
.hero h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.5rem);
  line-height: 1.04;
  margin-bottom: var(--s5);
  text-wrap: balance;
}
.hero .lead { max-width: 56ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-beeld { max-width: 1060px; margin: var(--s7) auto 0; }
.hero-beeld img {
  width: 100%;
  display: block;
  border: 1px solid oklch(0.34 0.01 72);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.45), 0 18px 44px oklch(0 0 0 / 0.5);
}
.hero-beeld figcaption { margin-top: var(--s3); }

/* ---------------- secties ---------------- */

.blok { padding: var(--s8) 0; border-top: 1px solid var(--lijn); }
.blok-kop { max-width: 62ch; margin-bottom: var(--s6); }
.blok-kop h2 { margin-bottom: var(--s3); }

/* genummerde stappen: geen kaartenraster, maar een echte volgorde */
.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; }
.stappen li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 1px solid var(--lijn);
}
.stappen li:first-child { border-top: none; padding-top: 0; }
.stappen li::before {
  content: counter(stap);
  font: 600 2rem/1 var(--display);
  /* Neutraal: dit is een nummer, geen knop. Messing hoort te wijzen. */
  color: var(--inkt-3);
  opacity: .35;
}
.stappen h3 { margin-bottom: 6px; }
.stappen p { margin: 0; color: var(--inkt-2); max-width: 60ch; }

/* tweetallen: tekst naast beeld, wisselend van kant */
.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.twee.omgekeerd .twee-beeld { order: -1; }
.twee-beeld img { width: 100%; display: block; border: 1px solid var(--lijn); border-radius: var(--radius); }

/* uitspraak over de volle breedte: ritme, geen kaart */
.stelling {
  background: var(--paneel);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: var(--s8) 0;
}
.stelling p {
  font: 400 clamp(1.3rem, 2.4vw, 1.75rem)/1.4 var(--display);
  max-width: 46ch;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ---------------- tabellen ---------------- */

.tabel { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabel th, .tabel td { text-align: left; padding: var(--s3) var(--s3); border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--inkt-3); }
.tabel td:first-child { font-weight: 500; }
.tabel .ja { color: var(--goed); font-weight: 600; }
.tabel .nee { color: var(--inkt-3); }
.tabel-scroll { overflow-x: auto; }

/* prijstabel: één uitgelichte kolom, geen rij identieke kaarten */
.prijzen { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prijzen th, .prijzen td { text-align: left; padding: var(--s4) var(--s4); border-bottom: 1px solid var(--lijn); vertical-align: top; }
.prijzen thead th { border-bottom: 2px solid var(--inkt); padding-bottom: var(--s3); }
.prijzen thead th .naam { display: block; font: 600 1.15rem/1.3 var(--display); }
.prijzen thead th .bedrag { display: block; font: 600 1.6rem/1.2 var(--display); margin-top: 6px; }
.prijzen thead th .per { display: block; font-size: 0.82rem; color: var(--inkt-3); font-weight: 400; margin-top: 2px; }
.prijzen td:first-child { color: var(--inkt-2); width: 34%; }
.prijzen .uitgelicht { background: var(--accent-vlak); }
.prijzen thead .uitgelicht { border-bottom-color: var(--accent); }
.prijzen .vink { color: var(--goed); font-weight: 600; }
.prijzen .streep { color: var(--inkt-3); }

.prijs-kaart {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--blad);
  padding: var(--s5);
}
.prijs-kaart.uitgelicht { border-color: var(--accent); }
.prijs-kaart ul { margin: var(--s3) 0 0; padding-left: 1.1rem; color: var(--inkt-2); }
.prijs-kaart li { margin-bottom: 5px; }

/* ---------------- de vier varianten ---------------- */

/* Twee kolommen, en op een smal scherm één. De logo's worden op hun eigen
   breedte getoond en niet opgerekt: een logo dat je uitrekt, gaat vervormen. */
.varianten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}
.variant img {
  display: block;
  max-width: 100%;
  height: auto;
  /* De logo's hebben een eigen hoogte; ze hoeven niet even groot te zijn,
     maar wel op dezelfde lijn te beginnen. */
  margin: 0 0 var(--s4);
}
.variant p { margin: 0; color: var(--inkt-2); }

@media (max-width: 760px) {
  .varianten { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- details / faq ---------------- */

details.vraag { border-bottom: 1px solid var(--lijn); padding: var(--s4) 0; }
details.vraag summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details.vraag[open] summary::after { content: "–"; }
details.vraag p { margin: var(--s3) 0 0; color: var(--inkt-2); max-width: 70ch; }

/* ---------------- lijsten ---------------- */

.lijst { list-style: none; margin: 0; padding: 0; }
.lijst li { padding-left: 1.4rem; position: relative; margin-bottom: var(--s3); color: var(--inkt-2); }
.lijst li::before { content: "—"; position: absolute; left: 0; color: var(--inkt-3); }
.lijst strong { color: var(--inkt); }

.kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s6); }

.noot {
  background: var(--paneel);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: var(--s4) var(--s5);
  font-size: 0.95rem;
  color: var(--inkt-2);
}
.noot strong { color: var(--inkt); }

/* ---------------- cta en voettekst ---------------- */

.cta { padding: var(--s8) 0; border-top: 1px solid var(--lijn); }
.cta-binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}
.cta h2 { margin-bottom: var(--s2); }

.voet { border-top: 1px solid var(--lijn); padding: var(--s7) 0 var(--s6); font-size: 0.93rem; color: var(--inkt-3); }
.voet-rooster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.voet h3 { font: 600 0.8rem/1 var(--tekst); text-transform: uppercase; letter-spacing: .07em; color: var(--inkt-3); margin-bottom: var(--s3); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: var(--s2); }
.voet a { color: var(--inkt-2); text-decoration: none; }
.voet a:hover { color: var(--accent); text-decoration: underline; }
.voet-onder { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

@media (max-width: 900px) {
  .hero-rooster, .twee { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .twee.omgekeerd .twee-beeld { order: 0; }
  .hero { padding: var(--s7) 0 var(--s6); }
  .nav-links { display: none; }
  .voet-rooster { grid-template-columns: 1fr; gap: var(--s5); }
  .prijzen td:first-child { width: 40%; }
}

/* ---------------- 3D en beweging ----------------
   Echt 3D met CSS: perspectief, diepte en kanteling. Geen bibliotheek, dus de
   site blijft werken zonder internet en zonder externe verzoeken. */

.hero-beeld { perspective: 1500px; perspective-origin: 60% 40%; }
.hero-beeld img {
  --kantel-x: 0deg;
  --kantel-y: 0deg;
  --schaduw-x: 0px;
  --schaduw-y: 0px;
  transform: rotateY(calc(-7deg + var(--kantel-y))) rotateX(calc(2.5deg + var(--kantel-x))) translateZ(0);
  transform-style: preserve-3d;
  box-shadow:
    var(--schaduw-x) calc(18px + var(--schaduw-y)) 52px oklch(0 0 0 / 0.55),
    0 1px 2px oklch(0 0 0 / 0.45);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Opkomen bij scrollen: komt naar voren uit de diepte. */
.ontwaak {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 30px, -70px) rotateX(7deg);
  transform-origin: 50% 100%;
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1) var(--vertraging, 0ms),
    transform .8s cubic-bezier(.22, 1, .36, 1) var(--vertraging, 0ms);
  will-change: transform, opacity;
}
.ontwaak.in-beeld { opacity: 1; transform: none; }

/* De stappen: het cijfer draait mee naar voren. */
.stappen li.ontwaak::before {
  opacity: 0;
  transform: translateZ(-40px) rotateY(-40deg);
  transition: opacity .6s ease var(--vertraging, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--vertraging, 0ms);
}
.stappen li.ontwaak.in-beeld::before { opacity: .35; transform: none; }

/* Kaarten en kolommen: lichte diepte bij hover. */
.kolommen { perspective: 1200px; }
.prijs-kaart {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .2s ease;
}
.prijs-kaart:hover {
  transform: translateY(-4px) translateZ(22px);
  box-shadow: 0 14px 34px oklch(0.26 0.012 85 / 0.1);
}

.tabel-scroll { perspective: 1600px; }
.prijzen thead th, .prijzen tbody td { transition: background .25s ease; }
.prijzen tbody tr:hover td { background: color-mix(in oklab, var(--accent-vlak) 55%, transparent); }

.twee-beeld { perspective: 1400px; }
.twee-beeld img {
  transform: rotateY(4deg);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.twee.omgekeerd .twee-beeld img { transform: rotateY(-4deg); }
.twee-beeld img:hover { transform: rotateY(0deg) translateZ(30px) scale(1.012); }

.knop { transition: border-color .14s ease, background .14s ease, transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease; }
.knop:hover { transform: translateY(-1px); box-shadow: 0 6px 16px oklch(0.26 0.012 85 / 0.09); }
.knop:active { transform: translateY(0) scale(.99); }

.nav { transition: box-shadow .25s ease; }
.nav.vast { box-shadow: 0 1px 14px oklch(0 0 0 / 0.45); }

/* ---------------- motion-tokens ----------------
   Eén set duur en easing voor de hele site, in plaats van overal losse
   getallen. Snel is voor feedback, gewoon voor overgangen, traag voor
   aankomst, verhaal voor de kinetische typografie. */
:root {
  --duur-snel: 150ms;
  --duur: 300ms;
  --duur-traag: 500ms;
  --duur-verhaal: 820ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-uit: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------- korrel ----------------
   Een nauwelijks zichtbare filmkorrel over alles heen. Dit is wat een groot
   doner vlak laat ademen in plaats van dood te lijken; zonder dit voelt een
   donker thema als een leeg vel. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .03;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ---------------- leesvordering ---------------- */

.leesvordering {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 30;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--vordering, 0));
  will-change: transform;
}

/* ---------------- kinetische typografie ----------------
   De kop van de hero komt woord voor woord uit een masker. Alleen transform,
   dus het blijft op de GPU. Staat uit bij prefers-reduced-motion. */
.kinetisch .woord {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: .06em 0 .18em;
  margin: 0 0 -.18em;
}
.kinetisch .woord > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--duur-verhaal) var(--ease) var(--i, 0ms);
}
.kinetisch.klaar .woord > span { transform: none; }

/* ---------------- tikker ---------------- */

.tikker {
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding: var(--s4) 0;
  overflow: hidden;
  background: var(--papier);
}
.tikker-spoor {
  display: flex;
  align-items: center;
  gap: var(--s6);
  width: max-content;
  animation: tik-schuif 42s linear infinite;
}
.tikker:hover .tikker-spoor { animation-play-state: paused; }
.tikker-spoor span {
  font: 400 1.06rem/1 var(--display);
  color: var(--inkt-2);
  white-space: nowrap;
}
.tikker-spoor span::after {
  content: "·";
  margin-left: var(--s6);
  color: var(--inkt-3);
}
@keyframes tik-schuif { to { transform: translate3d(-50%, 0, 0); } }

/* ---------------- bento ----------------
   Bewust ongelijk: één groot blok, drie kleinere. Gelijke kolommen lezen als
   een lijstje; dit leest als een keuze. */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.bento > * {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--blad);
  padding: var(--s5);
}
.bento > *:first-child {
  grid-column: span 2;
  grid-row: span 2;
  padding: var(--s7) var(--s6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, var(--blad) 0%, oklch(0.235 0.011 74) 100%);
}
.bento > *:first-child h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.bento > *:first-child p { font-size: 1rem; max-width: 34ch; }
.bento h3 { margin-bottom: var(--s2); }
.bento p { margin: 0; }

/* ---------------- magnetische knop ---------------- */

[data-magneet] { transition: transform var(--duur) var(--ease), box-shadow var(--duur) ease, background var(--duur-snel) ease, border-color var(--duur-snel) ease; }

/* ---------------- parallax ---------------- */

.parallax { transform: translate3d(0, var(--parallax, 0px), 0); will-change: transform; }

/* ---------------- paginatransities ----------------
   Geen harde knip tussen pagina's: de browser laat de pagina's in elkaar
   overvloeien en laat het woordmerk als het ware blijven staan. Werkt in
   Chrome; in andere browsers valt het stil terug op een gewone navigatie. */
@view-transition { navigation: auto; }
/* Alleen het woordmerk in de navigatie doet mee; dat staat ook in de voettekst,
   en twee keer dezelfde naam laat de browser de overgang overslaan. */
.nav .merk { view-transition-name: merk; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--duur); }

/* ---------------- demonstratie: video en gif ----------------
   De video's laden pas als ze in beeld komen (preload="none" en pas spelen bij
   binnengaan), en er speelt er nooit meer dan één tegelijk. Zonder dat haalt de
   bezoeker vier megabyte aan beeld binnen waar hij niet om vroeg. */
.demo {
  position: relative;
  margin: 0;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--donker-papier);
}
.demo video,
.demo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--donker-papier);
}
.demo--gif img { aspect-ratio: 8 / 5; }

.demo figcaption {
  padding: var(--s3) var(--s4);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--inkt-3);
  border-top: 1px solid var(--lijn-zacht, var(--lijn));
}
.demo figcaption strong {
  display: block;
  color: var(--inkt-2);
  font-weight: 600;
}

/* Bedienknop: alleen nodig als de video niet automatisch speelt. */
.demo-knop {
  position: absolute;
  right: var(--s4);
  bottom: calc(var(--s4) + 2.6rem);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font: 500 0.82rem/1 var(--tekst);
  color: var(--inkt);
  background: oklch(0.155 0.026 205 / 0.82);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color var(--duur) var(--ease), transform var(--duur) var(--ease);
}
.demo-knop:hover { border-color: var(--accent); transform: translateY(-1px); }
.demo-knop::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--accent);
}
.demo-knop[data-staat="speelt"]::before {
  width: 8px;
  height: 10px;
  border: none;
  border-left: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
}

/* Twee demonstraties naast elkaar op een breed scherm. */
.demo-paar {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: var(--s6);
}

@media (prefers-reduced-motion: reduce) {
  .demo-knop:hover { transform: none; }
}

/* ---------------- scrollgedreven onthullingen ----------------
   Native scroll-timelines: die draaien op de grafische processor en hebben geen
   JavaScript nodig. De animatie volgt de scrollsnelheid van de bezoeker in
   plaats van hem over te nemen — scroll-kaping voelt altijd kapot.
   We animeren alleen opacity, transform en clip-path. */
@supports (animation-timeline: view()) {
  .onthul {
    animation: onthul-kom linear both;
    animation-timeline: view();
    /* Alleen het binnengaan, en dan snel klaar. De animatie moet korter duren
       dan de bezoeker scrollt: een onthulling die doorloopt terwijl de sectie al
       in beeld staat, laat de tekst halfdoorzichtig en dus onleesbaar. */
    animation-range: entry 0% entry 55%;
  }
  @keyframes onthul-kom {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }

  /* De stelling in vermiljoen: de onderstreping tekent zich terwijl je scrolt,
     als een pen die een regel markeert. */
  .stelling p {
    animation: streep-teken linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 85%;
  }
  @keyframes streep-teken {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* Terugval voor browsers zonder scroll-timelines: alles staat er gewoon. */
.onthul { opacity: 1; }
@supports not (animation-timeline: view()) {
  .onthul { opacity: 1; transform: none; }
}

/* De cijfers in de statistieken krijgen een messing streepje onder zich dat
   zich uitstrekt zodra het in beeld komt. */
.cijfer-rij > * {
  position: relative;
  padding-bottom: var(--s4);
}
.cijfer-rij > *::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--sein);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--duur-verhaal) var(--ease-uit);
}
.cijfer-rij.in-beeld > *::after { transform: scaleX(1); }
.cijfer-rij.in-beeld > *:nth-child(2)::after { transition-delay: 110ms; }
.cijfer-rij.in-beeld > *:nth-child(3)::after { transition-delay: 220ms; }
.cijfer-rij.in-beeld > *:nth-child(4)::after { transition-delay: 330ms; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento > *:first-child { grid-column: auto; grid-row: auto; padding: var(--s6) var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  .onthul, .onthul.in-beeld { opacity: 1; transform: none; transition: none; animation: none; }
  .stelling p { animation: none; clip-path: none; }
  .cijfer-rij > *::after { transform: scaleX(1); transition: none; }
  .hero-beeld img, .twee-beeld img { transform: none; }
  .prijs-kaart:hover, .knop:hover, .knop:active { transform: none; }
}

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.87 0.006 85); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.78 0.008 85); background-clip: content-box; }

/* Wie minder beweging wil, krijgt een stilstaande site. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------------- GLAS ----------------

   Dezelfde taal als het beheerscherm: panelen van matglas waar een kleurig
   licht doorheen schemert.

   Het belangrijkste staat niet in de panelen maar erachter. Zonder kleur om
   doorheen te kijken is glassmorphism gewoon een donker vlak met een randje.
   Daarom eerst de gloed, dan pas het glas.

   De tekst blijft buiten het glas om leesbaar te blijven: glas is voor
   panelen, koppen en knoppen, nooit voor lopende tekst. */

:root {
  --glas: rgba(255, 255, 255, 0.045);
  --glas-2: rgba(255, 255, 255, 0.07);
  --glas-rand: rgba(255, 255, 255, 0.10);
  --glas-rand-2: rgba(255, 255, 255, 0.17);
  --glas-blur: blur(22px) saturate(1.5);
  --glas-radius: 18px;
  --glas-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 40px rgba(0, 0, 0, 0.38);
}

/* Het licht achter het glas. Vast gepositioneerd, dus het scrolt niet mee en
   de panelen schuiven er als het ware overheen. */
body { background: #08090d; }
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at 14% 2%, oklch(0.58 0.13 200 / 0.54), transparent 66%),
    radial-gradient(46% 44% at 88% 88%, oklch(0.80 0.09 88 / 0.24), transparent 68%),
    linear-gradient(180deg, #0c0d13, #07080c);
}

/* De panelen. */
.nav,
.prijs-kaart,
.stelling,
.noot,
.cta-binnen,
.bento,
.demo,
.voet {
  background: var(--glas);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  border-radius: var(--glas-radius);
  box-shadow: var(--glas-schaduw);
}

/* De bovenbalk blijft plakken en loopt van rand tot rand, dus daar geen
   afgeronde hoeken en geen zijranden. */
.nav {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: 0;
}

.prijs-kaart,
.stelling,
.noot,
.cta-binnen,
.demo,
.bento { padding: var(--s5); }
.voet { border-radius: var(--glas-radius) var(--glas-radius) 0 0; padding: var(--s7) var(--s5) var(--s6); border-bottom: none; }

/* De blokken hadden een bovenrand als scheiding. Met losse panelen is die
   rand dubbelop. */
.blok { border-top: none; }
.hero { background-image: none; }

/* ---------------- MENU OP EEN TELEFOON ----------------

   Tot nu toe verdween de navigatie onder 900 pixels volledig: geen knop, geen
   menu, niets. Op een telefoon kon je dus nergens heen. */

.nav-inhoud { position: relative; }
.nav-klep { display: none; }

.nav-klep span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--inkt);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .16s ease;
}
.nav-klep[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-klep[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-klep[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-klep {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0 12px;
    cursor: pointer;
    background: var(--glas-2);
    border: 1px solid var(--glas-rand);
    border-radius: 12px;
    backdrop-filter: var(--glas-blur);
    -webkit-backdrop-filter: var(--glas-blur);
  }

  /* Het menu klapt onder de balk uit als een paneel van glas. */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
    padding: var(--s3);
    /* Bijna dicht. Een menu is geen sierpaneel: de grote kop erachter mag er
       niet doorheen schemeren, anders is de tekst niet te lezen. */
    background: #0d0f14;
    backdrop-filter: var(--glas-blur);
    -webkit-backdrop-filter: var(--glas-blur);
    border: 1px solid var(--glas-rand-2);
    border-radius: var(--glas-radius);
    box-shadow: var(--glas-schaduw);
    z-index: 30;
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 13px 14px;
    border-radius: 11px;
    border-bottom: none;
    font-size: 1rem;
  }
  .nav-links a:hover,
  .nav-links a[aria-current="page"] { background: var(--glas-2); color: var(--inkt); }

  /* De twee knoppen mogen krimpen, anders duwen ze het logo van het scherm. */
  .nav-actie { gap: var(--s2); }
  .nav-actie .knop { padding: 10px 14px; font-size: 0.92rem; }
}

@media (max-width: 420px) {
  .nav-inhoud { gap: var(--s3); }
  .nav-actie .knop { padding: 9px 11px; font-size: 0.86rem; }
  .merk { font-size: 1.15rem; }
}

/* ---------------- LICHTER OP EEN TELEFOON ----------------

   De schermafbeeldingen en gif's zijn samen bijna een megabyte. Op een
   telefoon met een matige verbinding is dat het verschil tussen wel en niet
   laden. Ze blijven staan, maar ze krijgen minder ruimte en ze wachten met
   laden tot je ze bijna ziet. */

.hero-beeld img,
.demo img,
.demo video,
.twee-beeld img {
  max-width: 100%;
  height: auto;
}

.hero-beeld { perspective: none; }
.hero-beeld img { transform: none; }

@media (max-width: 900px) {
  /* Geen 3D-kanteling op een telefoon: dat kost rekenkracht en het beeld
     wordt er alleen maar scheef van op een smal scherm. */
  .hero-beeld { margin-top: var(--s6); }
  .demo { padding: var(--s3); }
  .blok { padding: var(--s7) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-klep span { transition: none; }
}