/* =============================================================
   CallDriven — cinematic scroll experience
   ============================================================= */

/* -------------------------------------------------------------
   Inter — self-hosted (assets/fonts/, woff2, Inter v4 via
   @fontsource/inter, SIL Open Font License 1.1).

   Bewust NIET van fonts.googleapis.com: die call stuurt het IP van
   elke bezoeker naar een server buiten de EU vóór hij iets kan
   weigeren. We verkopen GDPR-degelijkheid; dan mag de eerste
   request van de pagina daar niet mee in tegenspraak zijn.
   Bijkomend: geen preconnect naar een derde partij, geen
   render-blocking CSS van buiten, en deze bestanden vallen onder
   de immutable cache-header uit vercel.json.

   font-display:swap — tekst is meteen leesbaar in de systeemfont
   uit --font en wisselt daarna. De boot-veil dekt de eerste paint
   af, dus de swap is voor de bezoeker niet zichtbaar.
   ------------------------------------------------------------- */

@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/inter-latin-ext-300-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/inter-latin-300-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-400-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-latin-ext-500-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-latin-500-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-latin-600-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-latin-700-normal.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --blue:      #2563EB;
  --blue-lt:   #3B82F6;
  --navy:      #141A26;
  --ink:       #05080F;

  --fg:        #E8EFFC;
  --fg-soft:   rgba(220,232,252,.60);
  --fg-faint:  rgba(200,216,244,.34);
  --hair:      rgba(150,180,240,.16);

  --pad:       clamp(20px, 4.2vw, 68px);
  --font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

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

html,body{ margin:0; padding:0; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

body{
  font-family:var(--font);
  color:var(--fg);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}

::selection{ background:rgba(37,99,235,.42); color:#fff; }

a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* ---------------------------------------------------------------
   Canvas + scroll driver
   --------------------------------------------------------------- */

#gl{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  background:var(--ink);
}

.scroller{
  position:relative;
  width:100%;
  height:1900vh;          /* recomputed in JS against real viewport height */
  pointer-events:none;
  z-index:-1;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.hdr{
  position:fixed; top:0; left:0; right:0;
  z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:clamp(16px,2.4vw,30px) var(--pad);
  mix-blend-mode:normal;
  pointer-events:none;
}
.hdr > *{ pointer-events:auto; }

.mark{
  display:inline-flex; align-items:center; gap:11px;
  color:var(--blue-lt);
}
.mark:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:6px; border-radius:6px }
.mark-wave{
  width:30px; height:18px; overflow:visible;
  opacity:.95;
}
.mark-wave path{
  transform-origin:center;
  animation:markPulse 2.6s ease-in-out infinite;
}
.mark-wave path:nth-child(1){ animation-delay:-.0s }
.mark-wave path:nth-child(2){ animation-delay:-.16s }
.mark-wave path:nth-child(3){ animation-delay:-.32s }
.mark-wave path:nth-child(4){ animation-delay:-.48s }
.mark-wave path:nth-child(5){ animation-delay:-.64s }
.mark-wave path:nth-child(6){ animation-delay:-.80s }
.mark-wave path:nth-child(7){ animation-delay:-.96s }
@keyframes markPulse{
  0%,100%{ transform:scaleY(.55); opacity:.6 }
  50%    { transform:scaleY(1);   opacity:1  }
}
.mark-txt{
  font-size:15px; font-weight:600; letter-spacing:-.015em;
  color:var(--fg);
}

.hdr-right{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.hdr-cat{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-faint);
}
@media (max-width:720px){ .hdr-cat{ display:none } }

/* Tekstlink naar de onderbouw: zelfde snit als de headertekst, maar op alle
   breedtes zichtbaar en leesbaar (geen --fg-faint). */
.hdr-link{
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-soft);
  white-space:nowrap;
  transition:color .35s;
}
.hdr-link:hover{ color:var(--fg) }
.hdr-link:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:4px; border-radius:4px }
@media (max-width:480px){
  .hdr-link{ font-size:10px; letter-spacing:.12em }
  .hdr .btn-sm{ padding:9px 13px; font-size:12px }
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 22px;
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  color:var(--fg);
  background:rgba(12,18,32,.42);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:border-color .35s, background .35s, color .35s, transform .35s;
  overflow:hidden;
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 160% at 50% 120%, rgba(59,130,246,.42), transparent 62%);
  opacity:0; transition:opacity .4s;
}
.btn:hover{ border-color:rgba(120,165,250,.48); transform:translateY(-1px); }
.btn:hover::after{ opacity:1 }
.btn > *{ position:relative; z-index:1 }
.btn-sm{ padding:10px 18px; font-size:12.5px; }

.btn-primary{
  background:linear-gradient(180deg, #3B82F6, #2563EB);
  border-color:rgba(140,180,255,.42);
  color:#fff; font-weight:560;
  padding:16px 30px; font-size:14.5px;
  box-shadow:0 10px 40px -12px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{ box-shadow:0 16px 54px -12px rgba(37,99,235,1), inset 0 1px 0 rgba(255,255,255,.3) }
.btn-ghost{ padding:16px 26px; color:var(--fg-soft) }
.btn-ghost:hover{ color:var(--fg) }

/* Tekstlink naast een primaire knop: één duidelijke actie, één rustige
   uitweg voor wie eerst bewijs wil. Geen tweede knop — dat zou de keuze
   verdubbelen in plaats van hem te sturen. */
.btn-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:16px 2px;
  font-size:13.5px; font-weight:450; letter-spacing:-.005em;
  color:var(--fg-soft);
  white-space:nowrap;
  transition:color .35s;
}
.btn-link::after{
  content:"↓";
  font-size:13px; opacity:.55;
  transition:transform .45s cubic-bezier(.19,1,.22,1), opacity .35s;
}
.btn-link:hover{ color:var(--fg) }
.btn-link:hover::after{ transform:translateY(3px); opacity:1 }
.btn-link:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:4px; border-radius:4px }

/* ---------------------------------------------------------------
   Chapter rail
   --------------------------------------------------------------- */

.rail{
  position:fixed; z-index:35;
  right:calc(var(--pad) - 6px); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:3px;
  padding:6px;
  transition:opacity .45s;
}
.rail-item{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:6px 4px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-faint);
  transition:color .4s;
}
.rail-num{ opacity:0; transform:translateX(6px); transition:opacity .4s, transform .4s; }
.rail-line{
  display:block; width:16px; height:1px; flex:0 0 auto;
  background:currentColor; opacity:.5;
  transition:width .5s cubic-bezier(.19,1,.22,1), opacity .4s;
}
/* Tien rail-knoppen staan in de tab-volgorde vóór de hero-CTA. Zonder eigen
   ring kreeg je daar de standaardring van de browser: 1px op bijna-zwart. */
.rail-item:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:4px }
.rail-item:hover{ color:var(--fg-soft) }
.rail-item:hover .rail-num{ opacity:1; transform:none }
.rail-item.on{ color:var(--fg) }
.rail-item.on .rail-num{ opacity:1; transform:none }
.rail-item.on .rail-line{ width:34px; opacity:1; background:var(--blue-lt) }
@media (max-width:900px){ .rail{ display:none } }
/* Keep right-aligned copy clear of the rail wherever the rail is shown. */
@media (min-width:901px){
  html:not(.flat) .beat[data-align="right"]{ padding-right:calc(var(--pad) + 130px) }
}

/* ---------------------------------------------------------------
   Story beats
   --------------------------------------------------------------- */

.story{
  position:fixed; inset:0;
  z-index:20;
  pointer-events:none;
  overflow:hidden;          /* the beat scrims bleed past the viewport */
}

.beat{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:clamp(96px,12vh,150px) var(--pad) clamp(70px,10vh,120px);
  opacity:0;
  will-change:opacity;
}
.beat[data-align="left"]  { align-items:flex-start; text-align:left; }
.beat[data-align="center"]{ align-items:center;    text-align:center; }
.beat[data-align="right"] { align-items:flex-end;  text-align:right; }
.beat[data-y="top"]{ justify-content:flex-start; padding-top:clamp(108px,15vh,190px) }
.beat[data-y="mid"]{ justify-content:center }
/* sits in the clear band between two bands of 3D, not centred on either */
.beat[data-y="lower"]{ justify-content:flex-end; padding-bottom:20vh }
.beat[data-y="bot"]{ justify-content:flex-end }

/* legibility scrim that follows the text block, not the whole screen */
.beat::before{
  content:""; position:absolute; z-index:-1;
  left:-14vw; right:-14vw; top:-16vh; bottom:-16vh;
  background:radial-gradient(46% 40% at var(--sx,50%) var(--sy,50%),
              rgba(5,8,15,.72) 0%, rgba(5,8,15,.44) 40%, rgba(5,8,15,0) 72%);
  pointer-events:none;
}
.beat[data-align="left"]  { --sx:26% }
.beat[data-align="right"] { --sx:74% }
.beat[data-y="top"]       { --sy:30% }
.beat[data-y="lower"]     { --sy:66% }
.beat[data-y="bot"]       { --sy:70% }

.ln{ will-change:opacity, transform; }

.eyebrow{
  margin:0 0 clamp(18px,2.2vw,30px);
  font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-lt);
}
.eyebrow::before{
  content:""; display:inline-block;
  width:24px; height:1px; margin-right:12px; vertical-align:middle;
  background:currentColor; opacity:.6;
}

h1, .beat h2{
  margin:0;
  font-size:clamp(2.5rem, 6.4vw, 6.4rem);
  line-height:.96;
  font-weight:600;
  letter-spacing:-.042em;
  color:var(--fg);
  text-wrap:balance;
}
.beat h2.huge, h1{
  font-size:clamp(2.8rem, 8.2vw, 8.4rem);
  letter-spacing:-.05em;
}
h1 em, .beat h2 em{
  font-style:normal; font-weight:300;
  color:var(--blue-lt);
}

/* Koppen uit drie korte zinnen lopen over twee regels. Een iets kleinere
   graad houdt de regelval boven de illustratie in plaats van erin. */
.beat h2.tight{ font-size:clamp(2.1rem, 5.2vw, 5.2rem) }

.lede{
  margin:clamp(22px,2.6vw,34px) 0 0;
  max-width:46ch;
  font-size:clamp(1rem, 1.28vw, 1.22rem);
  line-height:1.62;
  font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}
.beat[data-align="center"] .lede{ margin-left:auto; margin-right:auto }
.beat[data-align="right"]  .lede{ margin-left:auto }

.fine{
  margin:clamp(26px,3vw,40px) 0 0;
  font-size:12.5px; letter-spacing:.06em;
  color:var(--fg-faint);
}

/* Vertrouwenssignalen in de hero: een regel, geen kaders. */
.trust-strip{
  margin:clamp(20px,2.2vw,28px) 0 0;
  font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint);
}

/* Nabijheid van de maker — zachter dan .fine, direct onder de risicoregel. */
.founder{
  margin:12px 0 0;
  font-size:12.5px; line-height:1.5;
  color:rgba(200,216,244,.44);
}
.foot{
  margin:clamp(40px,5vw,70px) 0 0;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(180,200,235,.22);
}

/* The outputs. On a wide screen with WebGL these names are already attached
   to the 3D documents, so the chips would only repeat them. They appear
   where that labelling cannot work: static mode, and phones — where ten
   labels in a 400px frame collide into an unreadable pile. */
.outputs{
  display:none;
  flex-wrap:wrap; justify-content:center;
  gap:8px 10px;
  margin:clamp(30px,3.6vw,48px) auto 0;
  max-width:62ch;
}
html.flat .outputs{ display:flex }
.outputs li{
  padding:8px 16px;
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:12.5px; font-weight:400; letter-spacing:.01em;
  color:var(--fg-soft);
  background:rgba(10,16,30,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.outputs li:nth-child(3n+1){ color:var(--fg); border-color:rgba(120,165,250,.34) }

/* ---------------------------------------------------------------
   Hoe het werkt — drie genummerde stappen
   --------------------------------------------------------------- */

/* This beat carries three columns of reading text under its heading, so the
   heading takes a smaller degree than the display h2, and the scrim centre
   drops to cover the taller block. */
.beat.beat-how{ --sy:44% }
.beat-how h2{ font-size:clamp(1.9rem, 3.8vw, 3.6rem) }

.steps{
  list-style:none;                 /* the number is its own element below */
  margin:clamp(28px,3.4vw,50px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px,3vw,48px);
  width:min(100%, 1080px);
  text-align:left;
}

.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid rgba(120,165,250,.42);
  border-radius:50%;
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--blue-lt);
  background:rgba(10,16,30,.55);
  box-shadow:0 0 20px -8px rgba(59,130,246,.7);
}
.step h3{
  margin:14px 0 0;
  font-size:clamp(1.02rem, 1.25vw, 1.18rem);
  line-height:1.35; font-weight:600; letter-spacing:-.015em;
  color:var(--fg);
  text-wrap:balance;
}
.step p{
  margin:10px 0 0;
  font-size:clamp(.86rem, .98vw, .95rem);
  line-height:1.6; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}

/* Gedempt, maar bewust niet --fg-faint: die haalt op de inkt-achtergrond
   geen 4.5:1. Deze kleur haalt ~5.3:1. De schaduw (zelfde als de 3D-labels)
   houdt de regel leesbaar waar de documenten erachter oplichten. */
.steps-note{
  margin:clamp(22px,2.8vw,36px) 0 0;
  font-size:12px; letter-spacing:.03em; line-height:1.5;
  color:rgba(205,221,249,.58);
  max-width:56ch;
  text-shadow:0 1px 14px rgba(5,8,15,.95);
}

/* Het actieve rail-label ("Hoe het werkt") staat op kolom-3-hoogte; dezelfde
   vrijruimte die rechts-uitgelijnde beats krijgen, maar symmetrisch zodat de
   drie kolommen gecentreerd blijven. */
@media (min-width:901px){
  html:not(.flat) .beat-how{
    padding-left:calc(var(--pad) + 110px);
    padding-right:calc(var(--pad) + 110px);
  }
}

/* Gestapeld op smalle schermen: nummer links, tekst rechts — dat spaart de
   hoogte die drie volle kolommen onder elkaar zouden kosten. */
@media (max-width:760px){
  .steps{ grid-template-columns:1fr; gap:12px; margin-top:18px; width:100% }
  .step{
    display:grid; grid-template-columns:30px 1fr;
    column-gap:12px; align-items:start;
  }
  .step-num{ width:30px; height:30px; font-size:12.5px; grid-row:1 / span 2; margin-top:2px }
  .step h3{ grid-column:2; margin:5px 0 0; font-size:15px }
  .step p{ grid-column:2; margin:6px 0 0; font-size:13px; line-height:1.5 }
  .steps-note{ margin-top:12px; font-size:11.5px }
  /* Het langste leesblok van de site: krappere kop en marges houden het
     binnen één telefoonscherm (375×667 incl. de beat-drift), met de
     disclosure-regel ruim boven de vaste geluid- en demo-knoppen onderin. */
  .beat-how h2{ font-size:clamp(1.4rem, 5.8vw, 1.8rem) }
  .beat-how .eyebrow{ margin-bottom:12px }
  .beat.beat-how{ padding-top:60px; padding-bottom:48px }
}

/* ---------------------------------------------------------------
   Zo ziet dat eruit — de bewijs-plaat bij stap 1
   --------------------------------------------------------------- */

/* De plaat draagt zijn eigen schaduw en afgeronde hoeken in het alfakanaal;
   elke rand, box-shadow of achtergrond hier zou dubbelen. Het beeld zweeft
   dus kaal op de inkt, en de kop deelt de leesgraad van .beat-how. */
.beat-proof h2{ font-size:clamp(1.9rem, 3.8vw, 3.6rem) }

.proof{
  margin:clamp(18px,2.2vw,30px) 0 0;
  display:flex; flex-direction:column; align-items:center;
}
.proof img{
  display:block;
  width:auto; height:auto;
  max-width:min(64vw, 100%);
  max-height:60vh;
}

/* Zelfde behandeling als .steps-note: gedempt maar >= 4.5:1 op de inkt, en
   de labelschaduw houdt hem leesbaar waar deeltjes erachter oplichten. */
.proof figcaption{
  margin-top:clamp(10px,1.4vw,18px);
  font-size:12px; letter-spacing:.03em; line-height:1.5;
  color:rgba(205,221,249,.58);
  max-width:56ch;
  text-shadow:0 1px 14px rgba(5,8,15,.95);
}

/* Dezelfde rail-vrijruimte als .beat-how, zodat de plaat niet onder het
   actieve hoofdstuklabel schuift. */
@media (min-width:901px){
  html:not(.flat) .beat-proof{
    padding-left:calc(var(--pad) + 110px);
    padding-right:calc(var(--pad) + 110px);
  }
}

@media (max-width:760px){
  .beat-proof h2{ font-size:clamp(1.4rem, 5.8vw, 1.8rem) }
  .proof img{ max-width:min(92vw, 100%) }
  .proof figcaption{ font-size:11.5px }
}

.cta-row{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin:clamp(34px,4vw,54px) 0 0;
}

/* ---------------------------------------------------------------
   CTA-blok — één component voor elk conversiemoment buiten de film
   --------------------------------------------------------------- */

/* Regel, knop en geruststelling komen uit de markup; hier staat alleen het
   ritme. Geen modifiers: een tweede stijl zou een tweede beslissing zijn, en
   elke instantie moet als dezelfde uitnodiging lezen. De film houdt zijn
   eigen .cta-row — die leeft in een vast venster en telt in de tijdlijn. */
.cta-block{
  display:flex; flex-direction:column; align-items:center;
  margin-top:clamp(30px,3.8vw,50px);
  text-align:center;
}
.cta-block .cta-line{
  margin:0; max-width:52ch;
  text-wrap:pretty;
}
/* min-height houdt ook de niet-primaire knop op 44px raakvlak. */
.cta-block .btn{ margin-top:clamp(18px,2.2vw,26px); min-height:44px }
.cta-block .ground-note{ margin-top:14px; max-width:52ch }

/* De slotsectie ís dit blok, dus daar centreert de kop mee. */
#slot{ text-align:center }
#slot .cta-block{ margin-top:clamp(18px,2.2vw,28px) }

/* Elke knop had tot nu toe alleen de standaardring van de browser. Op de
   primaire knop leest blauw-op-blauw niet, dus die krijgt de tekstkleur. */
.btn:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:4px }
.btn-primary:focus-visible,
.sticky-cta:focus-visible{ outline:2px solid var(--fg); outline-offset:4px }

/* De hero draagt nu vijf elementen; de knopregel en de trust-strip krijgen
   krappere marges zodat het blok boven de golfbasislijn blijft. */
.cta-hero{ margin-top:clamp(22px,2.4vw,30px); align-items:center }
.cta-hero + .trust-strip{ margin-top:clamp(14px,1.5vw,18px) }

/* Het heroblok is het langste van de site. Het staat gecentreerd, maar met
   extra ondermarge zodat het naar boven schuift, weg van de golf, en de lege
   band onder de header benut. De lede loopt breder zodat hij op twee regels
   past in plaats van drie. */
.beat[data-hero]{ padding-bottom:clamp(120px,20vh,220px) }
.beat[data-hero] .eyebrow{ margin-bottom:clamp(14px,1.6vw,20px) }
.beat[data-hero] .lede{ max-width:68ch }

/* Any beat holding something clickable becomes interactive while it is on
   screen; the story layer itself stays transparent to the pointer. */
.beat.live{ pointer-events:auto }

/* De slot-beat draagt kop, knoppen, twee regels geruststelling, het
   formulier en de voettekst — daar mag de ademruimte krapper. */
.beat-cta .cta-row{ margin-top:clamp(24px,2.8vw,32px) }
/* Deze regels dragen geruststelling en kwalificatie, geen sfeer — ze mogen
   iets meer contrast dan de gewone fijne regel. */
.beat-cta .fine{ margin-top:clamp(14px,1.6vw,18px); color:rgba(206,222,250,.50) }
.beat-cta .foot{ margin-top:clamp(18px,2vw,26px) }

/* ---------------------------------------------------------------
   Lead-formulier
   --------------------------------------------------------------- */

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

/* Breed genoeg dat de drie velden en de knop op één rij passen — dat
   scheelt een hele regel hoogte in een toch al volle slot-beat. */
.lead{
  width:100%; max-width:720px;
  margin:clamp(16px,1.9vw,22px) auto 0;
}
.lead-fields{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; align-items:stretch;
}
.lead input[type="text"],
.lead input[type="email"],
.lead input[type="tel"]{
  flex:1 1 155px;
  min-width:0;                     /* zonder dit duwen flex-items de rij breder dan het scherm */
  padding:13px 16px;
  border:1px solid var(--hair);
  border-radius:12px;
  /* Near-opaque on purpose: the waveform runs behind this beat, and a field
     you can see straight through does not read as somewhere you can type. */
  background:rgba(8,13,26,.88);
  color:var(--fg);
  font-family:inherit; font-size:14px; text-align:left;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.lead input::placeholder{ color:rgba(200,216,244,.42) }
.lead input:focus{
  outline:none;
  border-color:var(--blue-lt);
  background:rgba(11,18,34,.95);
  box-shadow:0 0 0 3px rgba(59,130,246,.20);
}
.lead .btn-primary{ flex:0 0 auto; padding:13px 22px; font-size:13.5px }
.lead input[name="_gotcha"]{ position:absolute; left:-9999px; opacity:0; height:0 }

.lead-note{
  margin:12px 0 0;
  font-size:12.5px; line-height:1.5;
  color:var(--fg-faint);
  min-height:1.1em;
}
.lead-note.ok{ color:var(--blue-lt) }
.lead-note.err{ color:#E9A6A6 }
.lead.sent .lead-fields{ display:none }

/* Een veld dat de validatie tegenhoudt wordt zichtbaar gemarkeerd, niet
   alleen in de notitie eronder: de bezoeker moet zien wélk veld het is.
   aria-invalid is de bron van waarheid, zodat schermlezers hetzelfde
   verhaal krijgen als de rand. */
.lead input[aria-invalid="true"]{
  border-color:#E9A6A6;
  box-shadow:0 0 0 3px rgba(233,166,166,.16);
}
.lead input[aria-invalid="true"]:focus{
  border-color:#E9A6A6;
  box-shadow:0 0 0 3px rgba(233,166,166,.28);
}

/* ---------------------------------------------------------------
   Sticky CTA
   --------------------------------------------------------------- */

.sticky-cta{
  position:fixed; z-index:45;
  right:var(--pad); bottom:clamp(22px,3.4vh,34px);
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px;
  border:1px solid rgba(140,180,255,.42);
  border-radius:999px;
  background:linear-gradient(180deg, #3B82F6, #2563EB);
  color:#fff; font-size:13px; font-weight:560; letter-spacing:-.005em;
  white-space:nowrap;
  box-shadow:0 10px 34px -12px rgba(37,99,235,.9), inset 0 1px 0 rgba(255,255,255,.22);
  opacity:0; transform:translateY(12px) scale(.96);
  pointer-events:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.19,1,.22,1), box-shadow .35s;
}
.sticky-cta.on{ opacity:1; transform:none; pointer-events:auto }
.sticky-cta:hover{ box-shadow:0 16px 44px -12px rgba(37,99,235,1), inset 0 1px 0 rgba(255,255,255,.3) }
/* Zonder scroll-driver in statische modus: altijd tonen. */
html.flat .sticky-cta{ opacity:1; transform:none; pointer-events:auto }

/* ---------------------------------------------------------------
   3D-anchored labels
   --------------------------------------------------------------- */

.labels{
  position:fixed; inset:0;
  z-index:25;
  pointer-events:none;
  overflow:hidden;
}
.lbl{
  position:absolute; left:0; top:0;
  display:flex; align-items:center; gap:8px;
  opacity:0;
  white-space:nowrap;
  transform:translate3d(-9999px,-9999px,0);
  will-change:transform, opacity;
}
.lbl i{
  width:5px; height:5px; flex:0 0 auto;
  border-radius:50%;
  background:var(--blue-lt);
  box-shadow:0 0 12px 2px rgba(59,130,246,.85);
}
.lbl span{
  font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(226,238,255,.82);
  text-shadow:0 1px 14px rgba(5,8,15,.95);
}
.lbl.sm span{ font-size:9.5px; letter-spacing:.13em; color:rgba(210,226,252,.66) }
.lbl.sm i{ width:4px; height:4px }

/* ---------------------------------------------------------------
   Scroll hint / sound / cursor
   --------------------------------------------------------------- */

.hint{
  position:fixed; z-index:30;
  left:50%; bottom:clamp(26px,4vh,46px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:11px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fg-faint);
  opacity:0; transition:opacity .9s ease;
  pointer-events:none;
}
.hint.on{ opacity:1 }
.hint i{
  display:block; width:1px; height:42px;
  background:linear-gradient(180deg, rgba(59,130,246,.9), transparent);
  animation:hintRun 2.1s cubic-bezier(.6,0,.3,1) infinite;
  transform-origin:top;
}
@keyframes hintRun{
  0%   { transform:scaleY(0);   opacity:0 }
  30%  { transform:scaleY(1);   opacity:1 }
  100% { transform:scaleY(1) translateY(42px); opacity:0 }
}

.sound{
  position:fixed; z-index:40;
  left:var(--pad); bottom:clamp(22px,3.4vh,34px);
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 15px 9px 12px;
  border:1px solid var(--hair); border-radius:999px;
  background:rgba(10,16,30,.4);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:var(--fg-faint);
  font-family:inherit; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  cursor:pointer;
  transition:color .35s, border-color .35s, opacity .45s;
}
.sound:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:4px }
.sound:hover{ color:var(--fg-soft); border-color:rgba(120,165,250,.34) }
.sound[aria-pressed="true"]{ color:var(--fg); border-color:rgba(120,165,250,.42) }
.sound-bars{ display:flex; align-items:center; gap:2px; height:12px }
.sound-bars i{
  width:2px; height:3px; border-radius:1px;
  background:currentColor; opacity:.75;
}
.sound[aria-pressed="true"] .sound-bars i{ animation:sBar .9s ease-in-out infinite }
.sound[aria-pressed="true"] .sound-bars i:nth-child(2){ animation-delay:-.15s }
.sound[aria-pressed="true"] .sound-bars i:nth-child(3){ animation-delay:-.35s }
.sound[aria-pressed="true"] .sound-bars i:nth-child(4){ animation-delay:-.55s }
@keyframes sBar{ 0%,100%{ height:3px } 50%{ height:12px } }
@media (max-width:720px){ .sound-txt{ display:none } .sound{ padding:9px 12px } }

.cursor{
  position:fixed; z-index:60; left:0; top:0;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(120,165,250,.5);
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .4s, width .4s, height .4s, margin .4s, border-color .4s;
  will-change:transform;
}
.cursor i{
  position:absolute; left:50%; top:50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:var(--blue-lt);
  box-shadow:0 0 10px 2px rgba(59,130,246,.8);
}
.cursor.on{ opacity:1 }
.cursor.hot{ width:56px; height:56px; margin:-28px 0 0 -28px; border-color:rgba(160,196,255,.75) }
@media (hover:none){ .cursor{ display:none } }

/* ---------------------------------------------------------------
   Boven de film — hero en calculator in gewone documentflow
   --------------------------------------------------------------- */

/* Zelfde laag als de onderbouw: boven de vaste filmlagen (story 20,
   labels 25), onder de header (40) en de sticky (45). */
.prefilm{ position:relative; z-index:30 }

/* De hero heeft bewust géén eigen achtergrond: het vaste canvas tekent de
   golf erachter, en zolang je hierboven staat rust de film op p=0 — het
   beeld waarop deze copy gecomponeerd is. Maten, uitlijning en ondermarge
   komen één op één van .beat[data-hero] + data-align="left" + data-y="mid",
   zodat de hero er hetzelfde uitziet als toen hij nog een beat was. */
.intro{
  position:relative;
  min-height:100vh;
  min-height:100svh;        /* de telefoonbalk mag de hero niet afsnijden */
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  text-align:left;
  padding:clamp(96px,12vh,150px) var(--pad) clamp(120px,20vh,220px);
  scroll-margin-top:clamp(70px,10vh,110px);
}
/* Dezelfde leesbaarheidsscrim als een linksuitgelijnde beat. De beat mocht
   ±14vw buiten beeld lopen omdat .story hem afknipt; hier is er niets dat dat
   doet, dus loopt hij niet meer buiten de zijkanten — de straal en het middel-
   punt zijn omgerekend naar de smallere doos, zodat de val identiek blijft.
   Verticaal loopt hij door tot 16vh onder de hero: boven het document is dat
   onbereikbaar, en onder de hero valt hij radiaal uit tegen het canvas dat
   daar gewoon doorloopt — dat is precies de zachte overgang naar de card. */
.intro::before{
  content:""; position:absolute; z-index:-1;
  left:0; right:0; top:-16vh; bottom:-16vh;
  background:radial-gradient(59% 40% at 19% 50%,
              rgba(5,8,15,.72) 0%, rgba(5,8,15,.44) 40%, rgba(5,8,15,0) 72%);
  pointer-events:none;
}
.intro .eyebrow{ margin-bottom:clamp(14px,1.6vw,20px) }
.intro .lede{ max-width:68ch }

/* De onthulling die de hero als beat op de wandklok kreeg, nu in CSS: twee
   fases, dezelfde cascade, en niets ervan onder reduced motion — daar staat
   alles er meteen. */
@media (prefers-reduced-motion: no-preference){
  .intro > *{ animation:introRise .9s cubic-bezier(.19,1,.22,1) both }
  .intro > h1{ animation-delay:.10s }
  .intro > .lede{ animation-delay:.62s }
  .intro > .cta-row{ animation-delay:.74s }
  .intro > .trust-strip{ animation-delay:.86s }
}
@keyframes introRise{
  from{ opacity:0; transform:translate3d(0,22px,0); filter:blur(6px) }
  to  { opacity:1; transform:none; filter:none }
}

/* #ground is het enige dekkende element op de pagina. Alles erboven deelt
   hetzelfde canvas: de sectie zelf draagt geen vlak, zodat de golf doorloopt
   boven, onder en náást de calculator. Z-index 1 binnen .prefilm houdt de
   card boven de uitlopende heroscrim. */
#cost{
  position:relative; z-index:1;
  padding:clamp(80px,11vh,140px) var(--pad) clamp(80px,11vh,140px);
  scroll-margin-top:clamp(70px,10vh,110px);
}

/* De card die op het beeld drijft. Dezelfde basiskleur, hairline en radius als
   .roi-frame en .price-card; alleen de dekking is anders, en die is geen
   smaakkeuze.

   Het canvas rust op p=0 zolang je hierboven staat, en de card schuift over
   dat vaste beeld — dus élk deel van de card kan boven de helderste pixel
   komen. De laagste alpha in deze gradient is daarmee de bindende waarde.
   Gemeten piek op p=0: rgb(161,201,216) op 1440. Doorgerekend over de hele
   keten (canvas -> card -> .roi-gain -> tekst) vraagt de krapste regel — de
   blauwe kop in .roi-gain — minimaal 0.865. Vandaar 0.90 als ondergrens, met
   0.97 bovenaan voor volume. tools/verify-timeline.js bewaakt die ondergrens;
   zakt hij, dan valt de contrastgarantie stil om. */
.cost-body{
  max-width:1080px; margin:0 auto;
  padding:clamp(26px,3.4vw,52px);
  border:1px solid var(--hair);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,16,30,.97) 0%, rgba(10,16,30,.90) 100%);
  /* De lichtlijn bovenaan is dezelfde als op .btn-primary, maar veel zachter:
     dit is een groot vlak, geen knop. De schaduw tilt hem van de golf af. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 30px 80px -40px rgba(0,0,0,.85);
}

/* Zonder canvas draagt de body een gradient; de card blijft daar een card,
   maar zonder de schaduw die alleen tegen bewegend beeld nodig is. */
html.flat .cost-body{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }

/* ---------------------------------------------------------------
   De onderbouw — statisch koopdeel onder de film
   --------------------------------------------------------------- */

/* Ligt boven de vaste filmlagen (story 20, labels 25) en onder de header
   (40) en sticky (45), met dezelfde inkt als de film zodat er geen naad is
   waar hij eroverheen schuift. */
#ground{
  position:relative; z-index:30;
  background:var(--ink);
  /* De footer sluit hieronder aan met zijn eigen ruimte. */
  padding:clamp(100px,14vh,170px) var(--pad) clamp(70px,10vh,120px);
}

/* scroll-margin houdt een aangesprongen sectie onder de vaste header */
.ground-sec{ max-width:1080px; margin:0 auto; scroll-margin-top:clamp(70px,10vh,110px); }
.ground-sec + .ground-sec{
  margin-top:clamp(90px,12vh,160px);
  padding-top:clamp(70px,9vh,120px);
  border-top:1px solid rgba(120,165,250,.08);
}

/* De calculator staat buiten #ground maar spreekt dezelfde taal; één
   selector houdt dat op één plek. */
#ground h2,
#cost h2{
  margin:0;
  font-size:clamp(1.9rem, 3.8vw, 3.6rem);
  line-height:1.02; font-weight:600; letter-spacing:-.035em;
  color:var(--fg);
  text-wrap:balance;
}
.ground-lede{
  margin:clamp(18px,2.2vw,28px) 0 0;
  max-width:62ch;
  font-size:clamp(1rem, 1.28vw, 1.22rem);
  line-height:1.62; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}

/* Zelfde snit als de trust-strip in de hero, maar niet met --fg-faint: alle
   gedempte regels in de onderbouw blijven boven 4.5:1 op de inkt. */
.ground-strip{
  margin:clamp(24px,3vw,40px) 0 0;
  font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(205,221,249,.58);
}
.ground-note{
  margin:14px 0 0;
  font-size:12px; letter-spacing:.03em; line-height:1.6;
  color:rgba(205,221,249,.58);
  max-width:64ch;
}

/* -- wat er klaarstaat --
   Zelfde rasterritme als .steps in de film en dezelfde streepjes-marker als
   .price-list, maar zonder kaders: deze sectie opent de onderbouw en moet
   rustiger ogen dan de prijsblokken. De kolomkoppen delen het label-formaat
   van de andere h3's hier (.partner-label, .roi-frame h3). */

.deliver-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
  margin-top:clamp(26px,3.2vw,44px);
}
.deliver-col h3{
  margin:0;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-lt);
}
.deliver-list{
  margin:clamp(14px,1.8vw,20px) 0 0;
  display:grid; gap:12px;
}
.deliver-list li{
  position:relative; padding-left:22px;
  font-size:14px; line-height:1.55; font-weight:300;
  color:var(--fg-soft);
}
.deliver-list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:10px; height:1px;
  background:var(--blue-lt);
}
#klaar-na-gesprek .ground-note{ margin-top:clamp(24px,3vw,38px) }

@media (max-width:760px){
  .deliver-grid{ grid-template-columns:1fr; gap:clamp(24px,5.5vw,32px) }
}

/* -- prijs -- */

.price-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(18px,2.4vw,28px);
  align-items:start;
  margin-top:clamp(28px,3.6vw,48px);
}
.price-card{
  border:1px solid var(--hair);
  border-radius:20px;
  background:rgba(10,16,30,.45);
  padding:clamp(24px,3vw,40px);
}
.price-big{
  margin:0;
  font-size:clamp(3rem, 5.4vw, 4.6rem);
  line-height:1; font-weight:600; letter-spacing:-.04em;
  color:var(--fg);
}
.price-sub{
  margin:8px 0 0;
  font-size:13px; letter-spacing:.02em;
  color:rgba(205,221,249,.58);
}
.price-list{
  margin:clamp(20px,2.4vw,30px) 0 0;
  display:grid; gap:12px;
}
.price-list li{
  position:relative; padding-left:22px;
  font-size:14px; line-height:1.55; font-weight:300;
  color:var(--fg-soft);
}
.price-list li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:10px; height:1px;
  background:var(--blue-lt);
}
.price-card .btn{ margin-top:clamp(24px,3vw,36px) }

/* Onderscheiden, niet schreeuwend: een tint blauwer, een programmalabel,
   geen doorgestreepte prijs — dit is een partnerschap, geen korting. */
.price-partner{
  border-color:rgba(120,165,250,.30);
  background:rgba(13,22,42,.55);
}
.partner-label{
  margin:0;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-lt);
}
.price-partner p:not(.partner-label){
  margin:clamp(16px,2vw,24px) 0 0;
  font-size:14.5px; line-height:1.62; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}

@media (max-width:760px){
  .price-grid{ grid-template-columns:1fr }   /* prijs eerst: bronvolgorde */
}

/* -- ROI-calculator -- */

.roi-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(20px,2.6vw,32px) clamp(26px,3.4vw,48px);
  margin-top:clamp(26px,3.2vw,42px);
}
.roi-field label{
  display:block;
  font-size:13px; line-height:1.45;
  color:var(--fg-soft);
  max-width:52ch;
}
.roi-slider{ display:flex; align-items:center; gap:14px; margin-top:10px }
.roi input[type="range"]{
  flex:1 1 auto; width:100%; margin:0;
  accent-color:var(--blue-lt);
  touch-action:none;          /* slepen is schuiven, nooit scrollen */
  cursor:pointer;
}
.roi input[type="range"]:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:4px; border-radius:4px }
.roi-slider output{
  flex:0 0 auto; min-width:4.5ch; text-align:right;
  font-size:14px; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--fg);
}
.roi input[type="number"],
.roi input[type="email"]{
  display:block; margin-top:10px;
  width:100%; max-width:220px;
  padding:11px 14px;
  border:1px solid var(--hair); border-radius:12px;
  background:rgba(8,13,26,.88);
  color:var(--fg);
  font-family:inherit; font-size:14px;
  transition:border-color .3s, box-shadow .3s;
}
.roi input[type="number"]:focus,
.roi input[type="email"]:focus{
  outline:none; border-color:var(--blue-lt);
  box-shadow:0 0 0 3px rgba(59,130,246,.20);
}

/* Gedempte regels in de calculator delen de >= 4.5:1-kleur van de rest van
   de onderbouw — nooit --fg-faint. */
.roi-help{
  margin:8px 0 0;
  font-size:12px; line-height:1.55;
  color:rgba(205,221,249,.58);
  max-width:52ch;
}

.roi-method{ margin-top:clamp(20px,2.6vw,32px) }
.roi-method summary{
  cursor:pointer;
  font-size:13px; font-weight:500;
  color:var(--fg-soft);
}
.roi-method summary:hover{ color:var(--fg) }
.roi-method p{
  margin:10px 0 0;
  font-size:12.5px; letter-spacing:.02em; line-height:1.6;
  color:rgba(205,221,249,.58);
}

.roi-results{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(24px,3vw,40px);
}
.roi-frame{
  border:1px solid var(--hair); border-radius:20px;
  background:rgba(10,16,30,.45);
  padding:clamp(20px,2.6vw,34px);
}
.roi-frame h3{
  margin:0;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-lt);
}
.roi-gain{ border-color:rgba(120,165,250,.30); background:rgba(13,22,42,.55) }
.roi-big{
  margin:14px 0 0;
  font-size:clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight:600; letter-spacing:-.02em; line-height:1.15;
  color:var(--fg);
}
.roi-line{
  margin:8px 0 0;
  font-size:14px; line-height:1.55; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}
.roi-money{
  margin-top:clamp(18px,2.4vw,28px);
  border:1px solid var(--hair); border-radius:20px;
  background:rgba(10,16,30,.45);
  padding:clamp(20px,2.6vw,34px);
}
.roi-money-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.4vw,28px);
  align-items:start;
}
.roi-money .roi-big{ margin-top:0 }
.roi-note{
  margin:clamp(16px,2vw,24px) 0 0;
  font-size:12px; line-height:1.6;
  color:rgba(205,221,249,.58);
  max-width:70ch;
}

.roi-gate{ margin-top:clamp(18px,2.4vw,28px); max-width:420px }
.roi-gate .roi-consent{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:14px;
  font-size:13px; line-height:1.5;
  color:var(--fg-soft);
  max-width:none;
}
.roi-gate .roi-consent input{ margin:3px 0 0; accent-color:var(--blue-lt) }
.roi-gate .roi-consent a{ text-decoration:underline }
.roi-gate .btn{ margin-top:16px }

@media (max-width:760px){
  .roi-grid{ grid-template-columns:1fr }
  .roi-results{ grid-template-columns:1fr }
  .roi-money-grid{ grid-template-columns:1fr }
}

/* -- FAQ-accordeon -- */

.faq{
  margin-top:clamp(24px,3vw,40px);
  border-top:1px solid rgba(120,165,250,.10);
}
.faq-item{ border-bottom:1px solid rgba(120,165,250,.10) }
.faq-q{ margin:0 }
.faq-q button{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%;
  padding:clamp(16px,2vw,22px) 2px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; text-align:left;
  font-size:clamp(.98rem,1.2vw,1.12rem); font-weight:500; letter-spacing:-.01em;
  color:var(--fg);
  transition:color .3s;
}
.faq-q button:hover{ color:var(--blue-lt) }
.faq-q button:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:6px }
.faq-ic{
  position:relative; flex:0 0 auto;
  width:12px; height:12px;
}
.faq-ic::before, .faq-ic::after{
  content:""; position:absolute; left:0; top:5px;
  width:12px; height:2px; border-radius:1px;
  background:var(--blue-lt);
  transition:transform .35s;
}
.faq-ic::after{ transform:rotate(90deg) }
.faq-item.open .faq-ic::after{ transform:rotate(0deg) }

/* Open- en dichtvouwen via grid-rows; visibility haalt dichte panelen uit
   de toegankelijkheidsboom en de tab-volgorde. */
.faq-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1);
}
.faq-panel-in{
  overflow:hidden; min-height:0;
  visibility:hidden;
  transition:visibility 0s .4s;
}
.faq-item.open .faq-panel{ grid-template-rows:1fr }
.faq-item.open .faq-panel-in{ visibility:visible; transition:visibility 0s 0s }
.faq-panel-in p{
  margin:0;
  padding:0 2px clamp(18px,2.2vw,24px);
  max-width:72ch;
  font-size:14.5px; line-height:1.65; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}

/* -- footer -- */

.site-foot{
  position:relative; z-index:30;
  background:var(--ink);
  border-top:1px solid rgba(120,165,250,.08);
  /* De ondermarge houdt de regel vrij van de sticky demo-knop rechtsonder. */
  padding:clamp(28px,4vh,44px) var(--pad) clamp(92px,13vh,120px);
}
.site-foot p{
  max-width:1080px; margin:0 auto;
  font-size:12px; letter-spacing:.04em; line-height:1.6;
  color:rgba(205,221,249,.58);
  text-align:center;
}
.site-foot a{ text-decoration:underline; text-underline-offset:3px }
.site-foot a:hover{ color:var(--fg) }
.site-foot a:focus-visible{
  outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:3px;
}

/* -- juridische footer (art. XII.6 WER) --
   De ondernemingsgegevens zijn wettelijk verplicht, maar ze zijn geen
   verkoopargument: ze staan in dezelfde stille toon als de rest van de
   voettekst, één kolom, geen kaders, geen kopjes in kapitalen. Het
   wordmerk staat er lowercase bij als rustpunt — hetzelfde register als
   Linear of Stripe, niet dat van een recruitment-SaaS.

   .site-foot p is al contrastgetest (5.28:1 op --ink); alle regels
   hieronder erven diezelfde kleur, zodat de test blijft dekken wat er
   werkelijk staat. */
.foot-inner{
  max-width:1080px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2vh,20px);
}
.foot-mark{
  font-size:15px; font-weight:500; letter-spacing:-.02em;
  color:rgba(205,221,249,.72);
  text-transform:lowercase;
}
.foot-mark::after{
  content:""; display:block;
  width:26px; height:2px; margin:9px auto 0;
  background:var(--blue); border-radius:2px; opacity:.75;
}
.site-foot .foot-legal{
  font-size:12px; letter-spacing:.02em; line-height:1.85;
  max-width:70ch;
}
.site-foot .foot-legal span{ white-space:nowrap }
.foot-sep{ opacity:.38; padding:0 2px }
.site-foot .foot-links{ letter-spacing:.05em }
.site-foot .foot-links a{ padding:2px 0 }

/* Zodra gewone pagina in beeld is — de calculator boven de film of de
   onderbouw eronder — stapt de filmnavigatie opzij: ze wijst daar nergens
   heen. Visibility haalt de vervaagde knoppen ook uit de tab-volgorde; de
   vertraging laat de fade eerst aflopen. De header krijgt dan een inkt-fade:
   in de film regelen de beat-scrims de leesbaarheid, hier schuift gewone
   content onder hem door. */
html.paged .rail,
html.paged .sound{
  opacity:0; pointer-events:none;
  visibility:hidden;
  transition:opacity .45s, visibility 0s .45s;
}
/* De scroll-hint hangt vast onderaan het venster, en de card komt precies
   daar het beeld in zodra je de hero verlaat. Hij hoort bij de hero, niet bij
   de calculator: zodra er gewone pagina in beeld staat, is hij klaar. */
html.paged .hint{ opacity:0 }
html.paged .hdr{
  background:linear-gradient(180deg, rgba(5,8,15,.94) 0%, rgba(5,8,15,.72) 55%, rgba(5,8,15,0) 100%);
}
/* Alleen de onderbouw houdt de sticky knop overeind voorbij zijn filmvenster.
   Boven de film staat er al een primaire knop in beeld — in de hero én onder
   het calculatorresultaat — en een derde zou daarmee concurreren. */
html.grounded .sticky-cta{ opacity:1; transform:none; pointer-events:auto }

/* ---------------------------------------------------------------
   Boot veil (covers the first paint until GL is live)
   --------------------------------------------------------------- */

body::after{
  content:""; position:fixed; inset:0; z-index:80;
  background:var(--ink);
  pointer-events:none;
  opacity:1; transition:opacity 1.1s ease .1s;
}
body.lit::after{ opacity:0 }

/* ---------------------------------------------------------------
   Losse documentpagina's (privacy.html): geen film, geen boot-veil,
   gewone inhoud onder de vaste header.
   --------------------------------------------------------------- */

body.doc::after{ display:none }
.page-main{
  max-width:1080px; margin:0 auto;
  min-height:55vh;
  padding:clamp(140px,22vh,230px) var(--pad) clamp(90px,14vh,150px);
}
.page-main h1{
  margin:0;
  font-size:clamp(1.9rem, 3.8vw, 3.6rem);
  line-height:1.02; font-weight:600; letter-spacing:-.035em;
  color:var(--fg);
  text-wrap:balance;
}
.page-main p{
  margin:clamp(18px,2.2vw,28px) 0 0;
  max-width:62ch;
  font-size:clamp(1rem, 1.28vw, 1.22rem);
  line-height:1.62; font-weight:300;
  color:var(--fg-soft);
  text-wrap:pretty;
}
/* :not(.btn) — een knop is geen tekstlink. Zonder deze uitzondering
   onderstreept de documentstijl ook de CTA's op de 404. */
.page-main a:not(.btn){ text-decoration:underline; text-underline-offset:3px }
.page-main a:not(.btn):hover{ color:var(--fg) }
.page-main a:focus-visible{
  outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:3px;
}

/* -- documentpagina's: beleidstekst --
   Een privacybeleid wordt gescand, niet gelezen. Vandaar korte secties met
   een duidelijke kop, een blauwe streep als anker, en lijsten in dezelfde
   zachte kleur als de lopende tekst. Geen kaders, geen accordeon: alles
   staat open zodat Ctrl+F het vindt en een printversie klopt. */
.page-main .doc-lede{
  font-size:clamp(1.05rem, 1.45vw, 1.35rem);
  color:rgba(220,232,252,.72);
}
.page-main .doc-meta{
  margin-top:clamp(14px,1.6vw,20px);
  font-size:12.5px; letter-spacing:.04em;
  color:var(--fg-faint);
}
.page-main h2{
  margin:clamp(46px,6vh,74px) 0 0;
  font-size:clamp(1.12rem, 1.5vw, 1.4rem);
  font-weight:600; letter-spacing:-.015em; line-height:1.25;
  color:var(--fg);
}
.page-main h2::before{
  content:""; display:block;
  width:22px; height:2px; margin:0 0 14px;
  background:var(--blue); border-radius:2px; opacity:.8;
}
.page-main h3{
  margin:clamp(24px,3vh,34px) 0 0;
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  color:rgba(232,239,252,.92);
}
.page-main ul.doc-list{
  margin:clamp(14px,1.8vw,20px) 0 0; padding:0;
  max-width:62ch; list-style:none;
}
.page-main ul.doc-list li{
  position:relative;
  padding-left:20px;
  margin-top:9px;
  font-size:clamp(.97rem, 1.15vw, 1.06rem);
  line-height:1.62; font-weight:300;
  color:var(--fg-soft);
}
.page-main ul.doc-list li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%;
  background:var(--blue-lt); opacity:.6;
}
.page-main ul.doc-list li strong{
  font-weight:500; color:rgba(232,239,252,.9);
}
.page-main .doc-table{
  width:100%; max-width:62ch;
  margin:clamp(16px,2vw,24px) 0 0;
  border-collapse:collapse;
  font-size:clamp(.9rem,1.05vw,.98rem); font-weight:300;
  color:var(--fg-soft);
  text-align:left;
}
.page-main .doc-table th,
.page-main .doc-table td{
  padding:11px 14px 11px 0;
  border-bottom:1px solid var(--hair);
  vertical-align:top; line-height:1.55;
}
.page-main .doc-table th{
  font-weight:500; color:rgba(232,239,252,.9);
  white-space:nowrap;
}
.page-main .doc-fill{
  color:rgba(233,166,166,.92);
  font-weight:400;
}
.page-main .doc-back{
  margin-top:clamp(46px,6vh,74px);
  padding-top:clamp(22px,3vh,32px);
  border-top:1px solid var(--hair);
  font-size:13px; letter-spacing:.03em;
}

/* -- 404 -- */
.page-main .doc-404{
  font-size:clamp(.78rem,1vw,.86rem);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-lt);
  margin:0 0 clamp(14px,1.6vw,20px);
  font-weight:500;
}
.page-main .doc-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:clamp(26px,3.4vh,38px);
}

/* ---------------------------------------------------------------
   Fallback: no WebGL2, or reduced motion.
   The whole story becomes a normal, readable, still-handsome page.
   --------------------------------------------------------------- */

html.flat #gl,
html.flat .labels,
html.flat .rail,
html.flat .hint,
html.flat .sound,
html.flat .cursor{ display:none }

html.flat .scroller{ display:none }

html.flat body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(37,99,235,.20), transparent 60%),
    radial-gradient(90% 60% at 90% 40%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(180deg, #05080F 0%, #0A1120 50%, #05080F 100%);
  background-attachment:fixed;
}
html.flat body::after{ display:none }

html.flat .story{ position:static; inset:auto; pointer-events:auto; overflow:visible }
/* In flat-modus draagt de body de gradient; de onderbouw leest daar gewoon
   op door in plaats van er een eigen vlak over te leggen. */
/* #cost staat hier niet meer bij: die sectie draagt sowieso geen vlak meer. */
html.flat #ground,
html.flat .site-foot{ background:none }
/* Zonder canvas is er niets om leesbaar tegen te houden. */
html.flat .intro::before{ display:none }
html.flat .beat{
  position:relative; inset:auto;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  min-height:88vh;
  padding-block:clamp(90px,14vh,180px);
  border-top:1px solid rgba(120,165,250,.08);
}
html.flat .beat:first-child{ border-top:0; min-height:100vh }
html.flat .beat::before{ display:none }
html.flat .ln{ opacity:1 !important; transform:none !important; filter:none !important }
html.flat .beat{ pointer-events:auto }

/* ---------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------- */

/* Phones: the 3D labels are unreadable at this width, so the chips take over
   and sit at the foot of the beat, clear of the artwork. */
@media (max-width:760px){
  .labels{ display:none }
  .outputs{
    display:flex; justify-content:flex-start;
    margin:auto 0 0; gap:6px 8px;
  }
  .outputs li{ font-size:11px; padding:6px 12px }
}

@media (max-width:640px){
  .beat{ align-items:flex-start !important; text-align:left !important }
  .beat[data-align] { --sx:50% }
  .beat .lede{ margin-left:0 !important; margin-right:0 !important }
  .cta-row{ justify-content:flex-start }
  .cta-row .btn-primary, .cta-row .btn-ghost{ width:100% }
  /* De tekstlink blijft een link, geen derde knop-blok. */
  .cta-hero{ gap:6px }
  .cta-hero .btn-link{ padding:10px 2px }

  /* Eén veld per rij leest rustiger dan een halve rij op een telefoon. */
  .lead{ max-width:none }
  .lead-fields{ flex-direction:column; align-items:stretch }
  .lead input[type="text"],
  .lead input[type="email"],
  .lead input[type="tel"]{ flex:1 1 auto; width:100% }
  .lead .btn-primary{ width:100% }

  /* De sticky knop deelt de onderrand met de geluidsknop: compacter,
     en de geluidsknop houdt links zijn eigen ruimte. */
  .sticky-cta{ padding:11px 16px; font-size:12px }
}