/* ═══════════════════════════════════════════════════════════════
   Belvanger, v2 "Werf": industrieel brutalisme.

   WAT HIER ANDERS IS DAN styles.css
   - Kleuren: IDENTIEK. Geen enkele merkkleur is aangeraakt.
   - Logo: IDENTIEK. Zelfde SVG, zelfde arc + oranje stip.
   - Vorm: alle radii op 0, alle blur-schaduwen weg. Randen doen het werk.
   - Type: Fraunces (serif) is vervangen door Anton (zware condensed grotesk).
     Archivo blijft, voor body en dichte UI.
   - Grammatica: geen gecentreerde eyebrow-plus-titel meer, geen zwevende
     kaarten met gap ertussen. Secties zijn genummerd en links uitgelijnd,
     rasters delen hun randen zodat ze als werkbrief lezen in plaats van
     als los zwevende tegels.

   WIE LAADT DIT (stand 2026-08-22)
   index.html, en/index.html, aanbod.html, klantintake.html, 404.html en
   en/404.html.
   NIET: de vier film-*.html (die worden opgenomen; een nieuwe stijl zou
   toekomstige opnames laten afwijken van het bestaande materiaal) en de acht
   voorbeelden/*-premium.html (elk vak heeft daar een eigen ontwerp, en ze
   uniform maken sloopt de belofte "een website per vak, niet een sjabloon").
   De juridische pagina's draaien op css/juridisch.css; zie de kop daarvan.

   VALKUIL BIJ ELKE PAGINA DIE JE NOG OMZET
   Anton heeft ÉÉN gewicht en geen breedte-as. Elke `font-weight: 800/900` of
   `font-stretch` op var(--display) die nog uit het Fraunces-tijdperk stamt,
   laat de browser NEP-vet synthetiseren en dat smeert een smalle letter dicht.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-standard.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
/* Anton: één gewicht, ultra-condensed, ontworpen voor signage. Alleen de
   latin-subset (18 kB): dekt het volledige Nederlands plus het euroteken. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────── Tokens ───────────────────────────
   Merkkleuren hieronder zijn LETTERLIJK overgenomen uit styles.css.
   Verander ze hier niet los: dan lopen homepage en de rest uiteen. */
:root {
  --werkblauw: #16232E;
  --werkblauw-2: #1E3140;
  --signaal: #FF5C1A;
  --signaal-diep: #E6480C;
  --signaal-licht: #FF7A3D;
  --beton: #ECEAE4;
  --krijt: #FAF9F6;
  --vangst: #1FA855;
  --sms: #2F6FED;
  --staal: #6B7078;

  /* Semantisch: licht (default) */
  --bg: var(--beton);
  --surface: var(--krijt);
  --surface-2: #F2F0EB;
  --ink: var(--werkblauw);
  --ink-soft: #3A4753;
  --muted: var(--staal);
  --line: var(--werkblauw);      /* was een zachte beige lijn; randen zijn nu inkt */
  --line-soft: #C9C4BA;          /* alleen voor haarlijnen binnen een vlak */
  --accent: var(--signaal);
  --ring: #FF5C1A;

  /* Ritme & vorm. Radii bestaan nog als token, maar staan op 0: zo blijven
     losse regels die ze noemen werken zonder dat er iets afrondt. */
  --wrap: 1240px;
  --gap: clamp(1rem, 3vw, 2rem);
  --sp-section: clamp(4rem, 8vw, 7rem);
  --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0;

  --bd-w: 2px;
  --bd: var(--bd-w) solid var(--ink);
  --bd-hd: 4px solid var(--ink);
  /* Eén schaduwsoort: hard, geen blur. Als een gestanste plaat op een plaat. */
  --shadow: none;
  --shadow-lg: none;
  --shadow-hard: 7px 7px 0 var(--ink);
  --shadow-hard-sm: 4px 4px 0 var(--ink);

  /* Type */
  /* REGELHOOGTE VAN DE KOP-FONT. Verlaag dit getal niet zonder de meting.
     GEMETEN met canvas measureText op Anton (inkt boven de basislijn, in em):
         gewone kapitalen (KLANT) : 0.86
         É en Í                   : 1.11   <- het accent voegt 0,25em toe
         Ë                        : 1.06
         staart van j/g           : 0.12 ONDER de basislijn
     De witruimte tussen twee regels is `line-height` MIN de inkthoogte van de
     onderste regel. Twee keer misgegaan:
       .86  -> .003em wit tussen gewone kapitalen: de regels raakten elkaar.
       .99  -> prima voor KLANT, maar bij een kop met É (1.11) werd het NEGATIEF
               en dook het accent de regel erboven in. Zichtbaar op de inlogpagina
               van het portaal: "OP ÉÉN PLEK" onder "…NODIG HEEFT,".
     1.12 klaart de hoogste letter die het Nederlands hier gebruikt. Dat is voor
     een kop zonder accenten iets ruimer dan strikt nodig, en dat is de goede kant
     om op te falen: te veel lucht leest als een keuze, een accent dat door de
     regel erboven snijdt leest als een fout. En "één" staat in deze teksten
     overal, dus een krappere waarde is geen optimalisatie maar een tijdbom. */
  --lh-kop: 1.12;
  --display: "Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --display-ui: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Hi-vis waarschuwingsband. Alleen bestaande merkkleuren. */
  --hazard: repeating-linear-gradient(45deg, var(--signaal) 0 14px, var(--werkblauw) 14px 28px);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191F;
    --surface: #16232E;
    --surface-2: #1B2B38;
    --ink: #F3F1EC;
    --ink-soft: #C7CDD3;
    --muted: #93A0AB;
    --line: #F3F1EC;
    --line-soft: #2C3E4B;
  }
}
:root[data-theme="dark"] {
  --bg: #10191F; --surface: #16232E; --surface-2: #1B2B38;
  --ink: #F3F1EC; --ink-soft: #C7CDD3; --muted: #93A0AB;
  --line: #F3F1EC; --line-soft: #2C3E4B;
}
:root[data-theme="light"] {
  --bg: var(--beton); --surface: var(--krijt); --surface-2: #F2F0EB;
  --ink: var(--werkblauw); --ink-soft: #3A4753; --muted: var(--staal);
  --line: var(--werkblauw); --line-soft: #C9C4BA;
}

/* ─────────────────────────── Reset ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Beide varianten: de -webkit-vorm alleen dekt oudere Safari, de kale vorm is
   wat Chrome en Edge lezen. styles.css had alleen de eerste. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--signaal); color: var(--werkblauw); padding: .7rem 1rem;
  border: var(--bd-hd); font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.skip-link:focus { top: 12px; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 0;
}

/* ─────────────────────── Type-schaal & labels ───────────────────────
   De eyebrow is geen zwevend gekleurd zinnetje meer maar een gestempeld
   label: omkaderd, uppercase, met de sectiecode ervoor. */
.eyebrow {
  display: inline-block;
  font-family: var(--display-ui);
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--werkblauw); background: var(--signaal);
  padding: .32rem .6rem; margin-bottom: 1.35rem;
}
.eyebrow--dark { color: var(--surface); background: var(--ink); }

/* text-wrap: balance is hier geen finesse maar noodzaak. De koppen bevatten
   handmatige <br>'s die op Fraunces waren afgestemd; Anton is veel smaller,
   dus zonder balancing viel er telkens één woord alleen op een regel
   ("SERIEUS", "MAAND"). Balance verdeelt de resterende regels alsnog netjes. */
.section-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem);
  line-height: var(--lh-kop);
  letter-spacing: .002em;
  text-wrap: balance;
  /* Regelhoogte .92 is KLEINER dan de fontgrootte, dus de inkt steekt boven de
     tekstbox uit. Gemeten: het accent van de É in "EÉN" reikt 16,6px boven de
     box, terwijl er 17,6px tussen label en kop zat: het raakte het oranje
     label. Deze padding schaalt mee in em, een vaste rem-marge niet. */
  padding-top: .1em;
  color: var(--ink);
}
.section-title--light { color: var(--krijt); }
.section-lead {
  margin-top: 1.1rem; max-width: 46ch; color: var(--ink-soft); font-size: 1.05rem;
}
.section-lead--light { color: rgba(250,249,246,.82); }

/* Sectiekop: links uitgelijnd, genummerd, met een harde regel eronder.
   Het nummer komt uit data-nr en is puur grafisch. */
.section-head {
  max-width: none; margin-inline: 0; text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
  padding-bottom: 1.1rem; border-bottom: var(--bd-hd);
  position: relative;
}
.section-head[data-nr]::before {
  content: attr(data-nr);
  position: absolute; right: 0; top: 0;
  font-family: var(--display); font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: .8;
  color: var(--ink); opacity: .14; pointer-events: none;
}
.section-head .section-lead { margin-inline: 0; }
.section-head--left { text-align: left; margin-inline: 0; }

/* Het gemarkeerde woord: geen dun onderstreepje maar een massief blok.
   De getallen hieronder zijn GEMETEN, niet geschat. Uit canvas measureText op
   Anton bij 112px:
       kapitaal-inkt boven de basislijn : 96px = .857em
       inkt onder de basislijn          : 0    (hoofdletters, geen staarten)
       font-descent (onderkant inline-box onder de basislijn) : 37px = .3304em
   Twee keer eerder gegokt en twee keer mis: eerst met een top/bottom-inset (blok
   40px te hoog), daarna met .73em hoogte (letters staken er 26px bovenuit).
   `bottom` wordt vanaf de onderkant van de inline-box gerekend, dus:
       bottom = .3304em - 4px overhang ≈ .295em
       height = .857em + 4px onder + 4px boven ≈ .93em */
.mark-underline { position: relative; white-space: nowrap; color: var(--werkblauw); }
.mark-underline::after {
  content: ""; position: absolute; left: -.05em; right: -.05em;
  bottom: .295em; height: .93em;
  background: var(--signaal); z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: swipe .5s .35s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes swipe { to { transform: scaleX(1); } }

/* Elk blok in de kop-font krijgt balancing, om dezelfde reden als bij
   .section-title: de handmatige <br>'s komen uit het Fraunces-tijdperk en
   lieten er in Anton steeds één woord alleen achter ("WACHT,", "MAAND"). */
.hero__title, .slot__title, .belief__text, .krijgt__foot,
.pijn__transition, .calc__title { text-wrap: balance; }

/* Hi-vis band, als scheiding tussen zware secties. */
.hazard { height: 14px; background: var(--hazard); }

/* ─────────────────────────── Buttons ───────────────────────────
   Rechthoekig, harde rand, geen zweef-effect. Hover keert om. */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--surface); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.3rem; border-radius: 0; border: var(--bd-w) solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--display-ui);
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em; line-height: 1;
  font-size: .92rem;
  transition: background .12s linear, color .12s linear, box-shadow .12s linear, border-color .12s linear;
}
/* WCAG 2.2 AA, ongewijzigd overgenomen: wit op #FF5C1A haalt 3,09:1 en zakt.
   Donkere merkinkt op datzelfde oranje haalt 5,18:1. Hover moet LICHTER:
   op #E6480C zou donkere tekst naar 4,03:1 zakken, op #FF7A3D is het 6,17:1. */
.btn--primary { --btn-bg: var(--signaal); --btn-fg: var(--werkblauw); --btn-bd: var(--werkblauw); box-shadow: var(--shadow-hard-sm); }
.btn--primary:hover { --btn-bg: var(--signaal-licht); box-shadow: 2px 2px 0 var(--ink); }
.btn--primary:active { box-shadow: 0 0 0 var(--ink); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--surface); }
.btn--sm { padding: .55rem .9rem; font-size: .78rem; }
.btn--lg { padding: 1.05rem 1.7rem; font-size: 1rem; }
.btn--xl { padding: 1.2rem 2.1rem; font-size: 1.1rem; }
.btn--block { display: flex; width: 100%; }
.btn__arrow { transition: transform .15s ease; font-weight: 400; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.ico { width: 1.15em; height: 1.15em; fill: currentColor; }

/* ── VANGNET TEGEN NEP-VET ─────────────────────────────────────────────────
   Anton heeft EEN gewicht (400). Vraagt een regel om 600/800/900, dan tekent de
   browser zelf een vette variant door de letter uit te smeren. Dat ziet er niet
   uit als een fout maar als een lelijk font, en het is daardoor twee keer door
   de controle geglipt: eerst op aanbod.html en de 404's, daarna op de
   paneelkoppen van het dashboard die door JS worden gemaakt.
   font-synthesis-weight: none zegt: doe dat niet, teken gewoon het echte
   gewicht. Archivo is variabel (100-900), dus die verliest er niets bij.
   Alleen -weight, niet -style: `font-synthesis: none` zou ook de schuine
   variant van <em> uitzetten en die wordt in de lopende tekst wel gebruikt. */
* { font-synthesis-weight: none; }


/* ─────────────────────────── Header ───────────────────────────
   Geen doorschijnend glas met blur: een dichte balk met een harde onderrand. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: var(--bd);
  transition: border-color .2s linear;
}
.site-header[data-scrolled] { border-bottom: var(--bd-hd); }
.header__inner { display: flex; align-items: center; gap: 1.2rem; height: 66px; }

/* Logo: ONGEWIJZIGD. Alleen de naam ernaast staat nu in de nieuwe kop-font. */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand__mark { width: 30px; height: 30px; overflow: visible; }
.brand__arc { stroke: var(--ink); }
.brand__dot { fill: var(--signaal); }
.brand__name {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink); line-height: 1;
}
.nav { margin-left: auto; }
.nav__list { display: flex; gap: 0; }
.nav__list li + li { border-left: 1px solid var(--line-soft); }
.nav__list a {
  display: block; padding: .35rem .9rem;
  font-family: var(--display-ui); font-weight: 800; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  transition: color .12s linear, background .12s linear;
}
.nav__list a:hover { color: var(--surface); background: var(--ink); }

.header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: 0; position: relative; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 10px; width: 24px; height: 3px; background: var(--ink);
  transition: transform .2s ease, opacity .15s ease;
}
.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before { top: -8px; }
.nav-toggle__bars::after { top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu { display: none; flex-direction: column; gap: 0; padding: 0 0 1rem; border-top: var(--bd); }
.mobile-menu a {
  padding: .95rem 1.2rem; font-family: var(--display-ui); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; font-size: .88rem;
  border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.mobile-menu .btn { margin: .8rem 1.2rem 0; border-bottom: 0; justify-content: center; }
.mobile-menu__lang { color: var(--muted) !important; border-bottom: 0 !important; }

.lang-switch {
  font-family: var(--display-ui); font-weight: 800; font-size: .74rem; letter-spacing: .1em;
  color: var(--ink); padding: .4rem .55rem; border: var(--bd); line-height: 1;
}
.lang-switch:hover { background: var(--ink); color: var(--surface); }

/* ─────────────────────────── Hero ───────────────────────────
   Asymmetrisch: de kolom met de boodschap is duidelijk breder, en er loopt
   een harde scheidingslijn tussen tekst en bewijs. */
.hero { padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
}
.hero__copy { position: relative; }
.hero__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3rem, 1.2rem + 8.2vw, 7rem); line-height: var(--lh-kop); letter-spacing: .004em;
  color: var(--ink); margin-bottom: 1.4rem;
  padding-top: .1em;  /* zelfde reden als bij .section-title: inkt boven de box */
}
.hero__sub {
  max-width: 42ch; color: var(--ink-soft);
  font-size: clamp(1.02rem, .98rem + .35vw, 1.16rem);
  border-left: var(--bd-hd); padding-left: 1.1rem;
}
.hero__sub strong { color: var(--ink); font-weight: 800; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.7rem 0 1.5rem; }

/* Microtrust: geen zwevende vinkjes maar een omkaderde strip met scheidingen. */
.microtrust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bd-w);
  background: var(--ink); border: var(--bd); color: var(--ink);
  font-family: var(--display-ui); font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.microtrust li {
  background: var(--bg); padding: .6rem .7rem; display: flex; align-items: center; gap: .4rem;
}
.microtrust li::before { content: "✓"; color: var(--vangst); font-weight: 800; flex: none; }
.microtrust--light { background: rgba(250,249,246,.35); border-color: rgba(250,249,246,.5); color: var(--krijt); }
.microtrust--light li { background: var(--werkblauw-2); }
.microtrust--light li::before { color: #4BD98A; }

/* ── Signature: telefoon + chat ──
   De telefoon houdt zijn ronde hoeken: het is een apparaat, geen UI-kaart.
   Alles eromheen (meldingen, knoppen, bijschrift) wordt wel hoekig. */
.hero__demo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.hero__stage { display: flex; align-items: center; gap: clamp(.85rem, 2.2vw, 1.4rem); }
.phone-stage { position: relative; }

/* Signature #2, het merk-ruggetje: was een afgerond staafje, is nu een
   omkaderde kleurenkaart. Zelfde zeven vakkleuren, zelfde volgorde. */
/* Was op 14px een streepje dat als losse ruis naast de telefoon hing. Op 22px
   en bijna de hoogte van het toestel leest het als een bewuste kleurenkaart. */
.hero__spine {
  flex: none; display: flex; flex-direction: column;
  width: 22px; height: clamp(220px, 30vw, 400px);
  border: var(--bd); border-radius: 0; overflow: hidden;
}
.hero__spine-seg { flex: 1 1 0; background: var(--seg); transform-origin: top; }
.hero__spine-seg + .hero__spine-seg { border-top: 1px solid var(--werkblauw); }
@media (max-width: 900px) { .hero__spine { height: clamp(100px, 24vw, 150px); } }

.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 610;
  background: #0E171E;
  border-radius: 40px; padding: 12px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-hard);
}
.phone__notch {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; background: #0E171E; border-radius: 0 0 12px 12px; z-index: 3;
}
.phone__screen {
  height: 100%; background: #E9E4DC; border-radius: 30px; overflow: hidden;
  display: flex; flex-direction: column;
  background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 14px 14px;
}
.chat__top {
  display: flex; align-items: center; gap: .55rem; padding: 2.4rem .85rem .7rem;
  background: #16232E; color: #fff; flex: none;
}
.chat__avatar {
  width: 32px; height: 32px; background: var(--signaal); color: var(--werkblauw);
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none;
}
.chat__who { display: flex; flex-direction: column; line-height: 1.15; }
.chat__who b { font-size: .9rem; }
.chat__who small { font-size: .66rem; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.chat__wa { margin-left: auto; font-size: .6rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.chat__body {
  flex: 1; padding: .9rem .8rem; display: flex; flex-direction: column; gap: .55rem;
  position: relative; overflow-y: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chat__body::-webkit-scrollbar { width: 0; height: 0; }

.chat__event {
  align-self: center; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--werkblauw); color: var(--krijt);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .3rem .6rem;
}
.ico--miss { width: .9em; height: .9em; fill: var(--signaal); }

.bubble {
  max-width: 84%; padding: .55rem .7rem .95rem; border-radius: 0; font-size: .82rem;
  line-height: 1.35; color: #10191F; position: relative; border: 1.5px solid var(--werkblauw);
}
.bubble__meta { position: absolute; right: .6rem; bottom: .3rem; font-size: .58rem; opacity: .6; }
.bubble--out { align-self: flex-end; background: var(--sms); color: #fff; }
.bubble--in  { align-self: flex-start; background: #fff; }

.typing { align-self: flex-start; display: inline-flex; gap: 3px; background: #fff; border: 1.5px solid var(--werkblauw); padding: .6rem .7rem; }
.typing span { width: 6px; height: 6px; background: var(--staal); opacity: .5; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: .9; transform: translateY(-2px); } }

.lead-toast {
  position: absolute; bottom: -10px; right: -10px; z-index: 5;
  display: flex; align-items: center; gap: .55rem; max-width: 262px;
  background: var(--surface); color: var(--ink); border: var(--bd);
  padding: .65rem .85rem; box-shadow: var(--shadow-hard-sm);
  font-size: .8rem; font-weight: 600;
}
.lead-toast b { font-weight: 800; }
.lead-toast__dot { width: 10px; height: 10px; background: var(--vangst); flex: none; box-shadow: 0 0 0 0 rgba(31,168,85,.5); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31,168,85,.5); } 70% { box-shadow: 0 0 0 8px rgba(31,168,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,168,85,0); } }
/* Standaard verborgen, ook zonder JS: de statische poster-staat mag alleen de
   eerste melding tonen, anders stapelen alle drie op dezelfde plek. */
.lead-toast--wide { opacity: 0; pointer-events: none; max-width: 285px; align-items: flex-start; }
.lead-toast--wide.is-in { opacity: 1; pointer-events: auto; }
.lead-toast__ico { width: 26px; height: 26px; flex: none; color: var(--signaal); }
.lead-toast__ico svg { width: 100%; height: 100%; }
.lead-toast__body small { display: block; font-weight: 500; color: var(--muted); margin-top: .2rem; line-height: 1.4; }

/* ── Afspeel-systeem (contract met js/app.js, ongewijzigd) ──
   Poster = het volledige gesprek, ook zonder JS. JS "armt" de telefoon en
   speelt de stappen af. .is-in moet .is-armed verslaan. */
[data-step] { transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1); }
.typing { display: none; }
.phone.is-armed [data-step] { opacity: 0; transform: translateY(8px); }
.phone.is-armed [data-step].is-in { opacity: 1; transform: none; }
.hero__demo.is-armed .lead-toast { opacity: 0; transform: translateY(8px); }
.hero__demo.is-armed .lead-toast.is-in { opacity: 1; transform: none; }
.phone.is-armed .typing.is-in { display: inline-flex; }

/* ── Inkomend gesprek ── */
.callscreen {
  position: absolute; inset: 0; z-index: 4; border-radius: 30px;
  background: #0A1117;
  color: var(--krijt);
  display: flex; flex-direction: column; align-items: center;
  padding: 3.2rem 1rem 1.5rem; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}
.phone[data-state="ringing"] .callscreen { opacity: 1; visibility: visible; }
.callscreen__label { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--signaal); }
.callscreen__avatar {
  width: 76px; height: 76px; margin: 1.1rem 0 .9rem;
  background: rgba(255,255,255,.08); border: 2px solid rgba(250,249,246,.25);
  display: grid; place-items: center; color: rgba(250,249,246,.75);
}
.callscreen__avatar svg { width: 42px; height: 42px; }
.phone[data-state="ringing"] .callscreen__avatar { animation: shake 1s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  8% { transform: rotate(-9deg); } 16% { transform: rotate(9deg); }
  24% { transform: rotate(-7deg); } 32% { transform: rotate(7deg); }
  40% { transform: rotate(0); }
}
.callscreen__num { font-family: var(--display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; }
.callscreen__sub { font-size: .74rem; color: rgba(250,249,246,.5); margin-top: .2rem; text-transform: uppercase; letter-spacing: .08em; }
.callscreen__ring { display: flex; gap: 5px; margin-top: 1rem; }
.callscreen__ring i { width: 8px; height: 8px; background: var(--signaal); opacity: .3; }
.phone[data-state="ringing"] .callscreen__ring i { animation: ringdot 1.1s infinite; }
.phone[data-state="ringing"] .callscreen__ring i:nth-child(2) { animation-delay: .18s; }
.phone[data-state="ringing"] .callscreen__ring i:nth-child(3) { animation-delay: .36s; }
@keyframes ringdot { 0%, 70%, 100% { opacity: .25; transform: scale(1); } 35% { opacity: 1; transform: scale(1.35); } }
.callscreen__btns { display: flex; gap: 2.6rem; margin-top: auto; }
.cbtn { width: 52px; height: 52px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; }
.cbtn--decline { background: #E5484D; }
.cbtn--accept { background: var(--vangst); opacity: .45; }
.callscreen__hint { margin-top: .9rem; font-size: .7rem; color: rgba(250,249,246,.45); }

/* ── Simulatie-knoppen ── */
.simctl { display: flex; align-items: center; gap: .5rem; }
.btn--sim { padding: .7rem 1.05rem; font-size: .78rem; }
.btn--sim__ico { width: 9px; height: 9px; background: var(--signaal); flex: none; }
.simctl.is-live .btn--sim__ico { animation: livepulse 1.4s infinite; }
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(255,92,26,.6); }
  70% { box-shadow: 0 0 0 7px rgba(255,92,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,26,0); }
}
.soundtoggle {
  width: 40px; height: 40px; border: var(--bd);
  background: transparent; color: var(--ink); display: grid; place-items: center;
  transition: color .12s, background .12s;
}
.soundtoggle:hover { background: var(--ink); color: var(--surface); }
.soundtoggle .ico { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.soundtoggle[aria-pressed="true"] { background: var(--signaal); color: var(--werkblauw); border-color: var(--ink); }
.soundtoggle[aria-pressed="true"] [data-sound-slash] { display: none; }

.phone-note {
  text-align: center; color: var(--muted); font-size: .76rem; line-height: 1.45;
  max-width: 340px; margin: 0 auto; border-top: 1px solid var(--line-soft); padding-top: .7rem;
}

/* ─────────────────── Belief-band (statement) ─────────────────── */
.belief { background: var(--werkblauw); color: var(--krijt); padding: 0; }
.belief .wrap { padding: clamp(2.4rem, 5vw, 3.8rem) 0; }
.belief::before, .belief::after { content: ""; display: block; height: 14px; background: var(--hazard); }
.belief__text {
  max-width: 22ch; margin: 0; text-align: left;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem); line-height: var(--lh-kop); letter-spacing: .004em;
}
.belief__text em { font-style: normal; color: var(--signaal); }

/* ─────────────────────── Trades strip ─────────────────────── */
.trades { border-bottom: var(--bd); background: var(--surface-2); }
/* align-items: stretch (de standaard), niet center. Met center werd het label
   wél uitgerekt (align-self: stretch) maar de lijst niet, dus stond de zwarte
   labelblok een paar pixels boven én onder de vakken uit. */
.trades__inner { display: grid; grid-template-columns: max-content 1fr; gap: 0; }
/* Geen max-width in ch. Die knipte "GEBOUWD" middenin af: woorden breken niet,
   dus liep de tekst het zwarte vlak uit en werd donker-op-donker onleesbaar.
   Eén regel op natuurlijke breedte is smal genoeg (~230px van de 1240). */
.trades__label {
  font-family: var(--display-ui);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--surface); background: var(--ink); padding: 1.15rem 1.1rem;
  display: flex; align-items: center; white-space: nowrap;
}
.trades__list {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--bd-w); background: var(--ink); border-left: var(--bd-w) solid var(--ink);
}
.trades__list li {
  background: var(--surface-2);
  display: inline-flex; align-items: center; gap: .5rem; padding: .7rem .9rem;
  font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink); font-size: .82rem;
}
.trade-ico { width: 1.3em; height: 1.3em; color: var(--signaal); flex: none; }

/* ─────────────────── Pijn + rekenmachine ─────────────────── */
.pijn { padding: var(--sp-section) 0; }

/* Scenario's: cellen die hun randen delen, geen zwevende kaarten. */
.herken__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bd-w);
  background: var(--ink); border: var(--bd);
  margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  counter-reset: herken;
}
.herken__card {
  margin: 0; background: var(--surface); padding: 1.5rem 1.4rem 1.4rem;
  font-size: 1.02rem; line-height: 1.45; color: var(--ink); font-style: normal;
  position: relative; padding-top: 3rem;
}
.herken__card::before {
  counter-increment: herken; content: counter(herken, decimal-leading-zero);
  position: absolute; top: .9rem; left: 1.4rem;
  font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--signaal);
}
.herken__bridge {
  max-width: none; margin: 0; text-align: left;
  font-size: clamp(1.02rem, 2vw, 1.18rem); color: var(--ink); line-height: 1.55; font-weight: 500;
  border-left: var(--bd-hd); padding-left: 1.1rem;
}
.pijn__transition {
  text-align: left; color: var(--ink); font-family: var(--display);
  text-transform: uppercase; font-size: clamp(1.2rem, 3vw, 1.9rem); line-height: 1;
  margin: clamp(2rem, 4vw, 2.8rem) 0 1.2rem;
}

/* Cijferband: geen kaarten, één omkaderde balk met drie vakken. */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bd-w);
  background: var(--ink); border: var(--bd); margin-bottom: 1rem;
}
.stat { background: var(--surface); padding: 1.6rem 1.3rem; text-align: left; }
.stat__num {
  display: block; font-family: var(--display); font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(3rem, 1.6rem + 5vw, 5.4rem); line-height: .85; color: var(--signaal);
  letter-spacing: .002em;
}
.stat__label { display: block; margin-top: .8rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.4; }
.stats__source {
  max-width: 68ch; margin: 0 0 clamp(2rem, 4vw, 3rem); text-align: left;
  color: var(--muted); font-size: .78rem; line-height: 1.5;
}

/* Rekenmachine: donkere plaat met harde rand, geen afgeronde widget. */
.calc {
  position: relative; overflow: hidden;
  background: var(--werkblauw); color: var(--krijt);
  border: var(--bd-hd); box-shadow: var(--shadow-hard);
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.4rem, 3.5vw, 2.6rem); align-items: start;
}
.calc::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain); background-size: 160px;
  opacity: .06; mix-blend-mode: overlay; pointer-events: none;
}
.calc__head, .calc__controls, .calc__result { position: relative; z-index: 1; }
.calc__head { grid-column: 1 / -1; border-bottom: 2px solid rgba(250,249,246,.25); padding-bottom: .9rem; }
.calc__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: var(--lh-kop); }
.calc__note { color: rgba(250,249,246,.6); margin-top: .35rem; font-size: .9rem; }
.calc__controls { display: flex; flex-direction: column; gap: 1.3rem; }

.field { display: block; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; gap: .8rem; }
.field__label {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 700;
  color: rgba(250,249,246,.85); font-size: .88rem;
}
.field__ico { width: 1.05em; height: 1.05em; color: var(--signaal); flex: none; }
.field__val {
  font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1;
  color: var(--signaal); font-variant-numeric: tabular-nums lining-nums;
}

/* De slider oogt dun maar het aanraakgebied is 44px hoog. Zet je de input zelf
   op de dikte van het spoor, dan is 'ie op een telefoon onbedienbaar. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; background: transparent; outline-offset: 2px;
  cursor: pointer; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 0; background: rgba(255,255,255,.18); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; box-sizing: border-box;
  width: 26px; height: 26px; margin-top: -9px;
  border-radius: 0; background: var(--signaal); border: 3px solid var(--krijt); cursor: grab;
}
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 0; background: rgba(255,255,255,.18); }
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 26px; height: 26px;
  border-radius: 0; background: var(--signaal); border: 3px solid var(--krijt); cursor: grab;
}

.calc__result { background: rgba(255,255,255,.05); border: 2px solid rgba(250,249,246,.3); padding: 1.5rem; text-align: left; }
.calc__result-label { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; color: rgba(250,249,246,.6); }
.calc__result-num {
  font-family: var(--display); font-weight: 400; font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(3rem, 1.6rem + 5vw, 5rem); line-height: .85; color: var(--krijt);
  margin: .5rem 0 .9rem; letter-spacing: .002em;
}
.calc__result-sub { color: rgba(250,249,246,.8); font-size: .92rem; }
.calc__result-sub strong { color: #4BD98A; }
.calc__result-sub a { color: var(--signaal); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.calc__result-note { color: rgba(250,249,246,.45); font-size: .7rem; margin-top: .7rem; }

/* ─────────────────── Route / de vier stappen ───────────────────
   Was een stippellijn met ronde markers en zwevende kaarten. Nu een
   genummerde kolom met vierkante blokken die tegen elkaar aan liggen. */
.route { padding: var(--sp-section) 0; background: var(--surface-2); border-block: var(--bd); }
.route__list { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; position: relative; max-width: 780px; border: var(--bd); background: var(--ink); display: grid; gap: var(--bd-w); }
.route__step { position: relative; padding: 0; background: var(--surface); display: grid; grid-template-columns: 78px 1fr; }
.route__marker {
  position: static; width: auto; height: auto; border-radius: 0; border: 0;
  background: var(--accent, var(--werkblauw)); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1;
}
.route__card { background: transparent; border: 0; border-radius: 0; padding: 1.2rem 1.4rem 1.3rem; }
.route__title {
  margin: 0 0 .4rem; font-family: var(--display-ui); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; color: var(--ink);
}
.route__text { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.route__chips { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.route__chips li { position: relative; padding-left: 1.6rem; font-weight: 700; color: var(--ink); font-size: .95rem; }
.route__chips li::before { content: "✓"; position: absolute; left: 0; color: var(--accent, var(--vangst)); font-weight: 800; }

/* ─────────────────── Wat je krijgt ───────────────────
   Was vier identieke afgeronde kaarten met schaduw. Nu een genummerd
   specificatieblad: één omkaderd blok, vier regels die randen delen. */
.krijgt { padding: var(--sp-section) 0; }
.cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bd-w);
  background: var(--ink); border: var(--bd); counter-reset: krijgt;
}
.card {
  background: var(--surface); border: 0; border-radius: 0; box-shadow: none;
  padding: 1.6rem 1.5rem 1.7rem 4.2rem; position: relative;
  transition: background .12s linear;
}
.card::before {
  counter-increment: krijgt; content: counter(krijgt, decimal-leading-zero);
  position: absolute; left: 1.4rem; top: 1.5rem;
  font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--signaal);
}
.card:hover { background: var(--surface-2); }
.card__title {
  font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1.05rem; margin-bottom: .45rem; color: var(--ink);
}
.card__text { color: var(--ink-soft); font-size: .94rem; line-height: 1.5; }
.krijgt__foot {
  text-align: left; margin-top: 1.6rem;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); line-height: 1; color: var(--ink);
}

/* ─────────────────────── Voorbeelden ─────────────────────── */
.voorbeelden { padding: var(--sp-section) 0; background: var(--surface-2); border-top: var(--bd); }
.voorbeelden .section-lead { max-width: 62ch; }
.voorbeelden__scroll {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bd-w);
  background: var(--ink); border: var(--bd);
}
.voorbeelden__card {
  position: relative; aspect-ratio: 4 / 5;
  display: block; border-radius: 0; overflow: hidden;
  text-decoration: none; color: #fff; isolation: isolate;
  background: var(--surface-2);
  transition: none;
}
.voorbeelden__card:hover, .voorbeelden__card:focus-visible { transform: none; }
/* De vak-accentkleur zit nu als massieve balk onderaan in plaats van als
   inset-gloed rondom: harder, en het label staat er leesbaar bovenop. */
.voorbeelden__card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 3;
  background: var(--accent, var(--signaal));
}
.voorbeelden__img {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; background: var(--surface-2);
  transition: filter .25s linear;
  filter: saturate(.85) contrast(1.05);
}
.voorbeelden__card:hover .voorbeelden__img, .voorbeelden__card:focus-visible .voorbeelden__img { filter: saturate(1.1) contrast(1.1); }
.voorbeelden__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,15,20,0) 40%, rgba(10,15,20,.86) 100%);
}
.voorbeelden__motif {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 24px; height: 24px; color: var(--werkblauw); background: var(--signaal); padding: 3px;
}
.voorbeelden__motif svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.voorbeelden__label {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .55rem .8rem;
  font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: .84rem; color: #fff;
}
.voorbeelden__label-arrow { flex: none; font-size: 1rem; line-height: 1; opacity: 0; transform: translateX(-4px); transition: opacity .2s ease, transform .2s ease; }
.voorbeelden__card:hover .voorbeelden__label-arrow, .voorbeelden__card:focus-visible .voorbeelden__label-arrow { opacity: 1; transform: translateX(0); }

/* De achtste kaart is geen vak maar de vraag "en mijn vak dan?". Zie de
   opspanregels hieronder: die hangen af van het AANTAL VAKKEN. */
.voorbeelden__card--vraag {
  display: grid; align-content: center; justify-items: start; gap: .7rem;
  padding: clamp(1.1rem, 2vw, 1.6rem); text-align: left;
  background: var(--ink); color: var(--surface); aspect-ratio: auto;
}
.voorbeelden__card--vraag::before { background: var(--signaal); }
.voorbeelden__vraag-plus {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  background: var(--signaal); color: var(--werkblauw);
  font-family: var(--display); font-weight: 400; font-size: 1.7rem; line-height: 1;
}
.voorbeelden__vraag-body { display: block; }
.voorbeelden__vraag-body b {
  display: block; font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 1rem; margin-bottom: .35rem;
}
.voorbeelden__vraag-body small { display: block; font-size: .84rem; line-height: 1.45; color: rgba(250,249,246,.72); }
.voorbeelden__card--vraag .voorbeelden__label { position: static; margin-top: .2rem; padding: 0; color: var(--signaal); }

/* ── Hoeveel vakken beslaat de vraagkaart? ────────────────────────────
   Er zijn ACHT vakken. Acht is deelbaar door 4 en 2, niet door 3:

     4 kolommen : 8 vakken = 2 volle rijen, de vraagkaart krijgt rij 3  → span 4
     3 kolommen : 8 vakken = 2 volle rijen + 2, de vraagkaart is negende → span 1
     2 kolommen : 8 vakken = 4 volle rijen, de vraagkaart krijgt rij 5   → span 2

   Komt er een negende vak bij, reken dit dan opnieuw: aantal vakken plus de
   opspanning van de vraagkaart moet deelbaar zijn door het kolomaantal.
   De selector is bewust zwaarder dan één klasse, want .voorbeelden__card
   zet hierboven aspect-ratio 4/5 en staat op dezelfde specificiteit. */
.voorbeelden__scroll .voorbeelden__card--vraag { grid-column: span 4; aspect-ratio: auto; min-height: 200px; }
@media (max-width: 900px) and (min-width: 621px) {
  .voorbeelden__scroll { grid-template-columns: repeat(3, 1fr); }
  .voorbeelden__scroll .voorbeelden__card--vraag { grid-column: span 1; aspect-ratio: 4/5; }
}
@media (max-width: 620px) {
  .voorbeelden__scroll { grid-template-columns: repeat(2, 1fr); }
  /* Twee kolommen op een telefoon: "Klusbedrijven" moet heel blijven, want daar
     zoekt de bezoeker op. Het pijltje verschijnt toch alleen bij hover. */
  .voorbeelden__label { padding: .5rem .6rem; font-size: .74rem; }
  .voorbeelden__label-arrow { display: none; }
  .voorbeelden__scroll .voorbeelden__card--vraag { grid-column: span 2; }
}
.voorbeelden__note { margin-top: 1rem; font-size: .78rem; color: var(--muted); text-align: left; }
.voorbeelden__dashboard {
  margin-top: 2.4rem; padding-top: 2rem; border-top: var(--bd);
  text-align: left; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.1rem;
}
.voorbeelden__dashboard-text { max-width: 48ch; color: var(--ink-soft); }

/* ─────────────────────────── Prijs ─────────────────────────── */
.prijs { padding: var(--sp-section) 0; border-top: var(--bd); }
.prijs__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.check { display: grid; gap: 0; margin-top: 1.5rem; border: var(--bd); }
.check li {
  position: relative; padding: .8rem .9rem .8rem 2.6rem; color: var(--ink); font-weight: 500;
  font-size: .95rem; line-height: 1.45;
}
.check li + li { border-top: 1px solid var(--line-soft); }
.check li::before {
  content: "✓"; position: absolute; left: .8rem; top: .8rem;
  width: 1.3rem; height: 1.3rem; background: var(--vangst); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}
.pricecard {
  background: var(--surface); border: var(--bd-hd); box-shadow: var(--shadow-hard);
  padding: 1.8rem; text-align: left;
}
.pricecard__tag {
  display: block; background: var(--signaal); color: var(--werkblauw);
  font-family: var(--display-ui); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .7rem; margin: -1.8rem -1.8rem 1.2rem;
}
.pricecard__price {
  font-family: var(--display); font-weight: 400; font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(3.4rem, 2rem + 5vw, 5.6rem); line-height: .82; color: var(--ink); letter-spacing: .002em;
}
.pricecard__cur { font-size: .42em; vertical-align: .7em; margin-right: .04em; }
.pricecard__per { font-family: var(--display-ui); font-size: .22em; color: var(--muted); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pricecard__setup { color: var(--ink-soft); margin: .7rem 0 1.3rem; font-size: .95rem; }
.pricecard__promise {
  text-align: left; background: var(--surface-2);
  border: 2px solid var(--vangst); border-left-width: 6px; color: var(--ink);
  padding: .8rem .95rem; font-size: .88rem; line-height: 1.45; margin: 0 0 1.1rem;
}
.pricecard__promise strong { color: var(--vangst); text-transform: uppercase; letter-spacing: .04em; }
.pricecard__fine { color: var(--muted); font-size: .82rem; margin-top: 1rem; line-height: 1.45; }
.pricecard__was { text-decoration: line-through; }
.pricecard__now { color: var(--ink); font-weight: 800; }

/* ─────────────────────────── Demo CTA ─────────────────────────── */
.demo { padding: 0; background: var(--werkblauw-2); color: var(--krijt); }
.demo::before { content: ""; display: block; height: 14px; background: var(--hazard); }
.demo .wrap { padding-block: var(--sp-section); }
.demo__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.demo-form {
  background: var(--krijt); border: var(--bd-hd); border-color: var(--krijt);
  box-shadow: 7px 7px 0 var(--signaal);
  padding: clamp(1.4rem, 3vw, 2rem); color: var(--werkblauw);
}
.demo-form__row { margin-bottom: .9rem; }
.ffield { display: block; }
.ffield__label {
  display: block; font-family: var(--display-ui); font-weight: 800; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: .35rem; color: var(--werkblauw);
}
.ffield input, .ffield select, .ffield textarea {
  width: 100%; padding: .8rem .9rem; border: 2px solid var(--werkblauw); border-radius: 0;
  font: inherit; background: #fff; color: var(--werkblauw); transition: box-shadow .12s linear;
}
.ffield textarea { resize: vertical; min-height: 3.4em; line-height: 1.4; }
.ffield input::placeholder, .ffield textarea::placeholder { color: #8b939b; }
.ffield input:focus, .ffield select:focus, .ffield textarea:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--signaal);
}
.ffield__opt { font-weight: 600; color: var(--staal); font-size: .9em; letter-spacing: .04em; }
.ffield[data-invalid] input, .ffield[data-invalid] select { border-color: #D93025; box-shadow: inset 0 0 0 2px #D93025; }
.ffield__err { display: block; color: #B3261E; font-size: .8rem; font-weight: 700; margin-top: .3rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.demo-form .btn { margin-top: .4rem; }
.demo-form__legal { font-size: .78rem; color: var(--staal); margin-top: .9rem; text-align: left; line-height: 1.45; }
.demo-form__legal a { text-decoration: underline; }
.demo-form__ok { margin-top: 1rem; background: #fff; border: 3px solid var(--vangst); color: #10603A; padding: 1rem; text-align: left; }
.demo-form__fail { margin-top: 1rem; background: #fff; border: 3px solid var(--signaal-diep); color: #7A3B00; padding: 1rem; text-align: left; }
.demo-form__fail a { text-decoration: underline; color: inherit; }

/* ────────────── Intake-formulier (klantintake.html) ──────────────
   Geen zwevende kaarten met schaduw meer: genummerde, omkaderde blokken die
   als een papieren opnameformulier lezen. */
.intake-hero {
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 clamp(1.8rem, 4vw, 2.6rem);
  background: var(--bg); border-bottom: var(--bd-hd);
}
.intake-hero h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  line-height: var(--lh-kop); letter-spacing: .002em; padding-top: .1em; text-wrap: balance;
}
.intake-hero__meta {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 1.6rem;
  font-family: var(--display-ui); font-size: .74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
  border: var(--bd);
}
.intake-hero__meta span { display: flex; align-items: center; gap: .45rem; padding: .6rem .85rem; }
.intake-hero__meta span + span { border-left: var(--bd); }
.intake-hero__meta svg { width: 15px; height: 15px; stroke: var(--signaal); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.block { padding: var(--sp-section) 0; }

.intake-section {
  background: var(--surface); border: var(--bd); border-radius: 0; box-shadow: none;
  padding: clamp(1.3rem, 3vw, 2rem); margin-bottom: var(--bd-w);
  counter-increment: intake;
}
/* 760px is een goede leesbreedte voor een formulier van deze lengte, maar die
   breedte hoorde op de INHOUD te staan, niet op de .wrap. Die centreert, en dan
   begint het formulier op 340px terwijl de kop erboven op 100px begint. Een
   verspringende linkerrand is in een ontwerp dat op een hard raster leunt het
   eerste wat opvalt. */
.intake-form { counter-reset: intake; max-width: 760px; }
.intake-section__eyebrow {
  display: inline-block; font-family: var(--display-ui); font-weight: 800;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--werkblauw); background: var(--signaal);
  padding: .28rem .55rem; margin: 0 0 .8rem;
}
.intake-section h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: var(--lh-kop); letter-spacing: .002em;
  margin: 0 0 .5rem; padding-top: .1em; color: var(--ink);
}
/* Het volgnummer staat rechts als schaduwcijfer, net als bij de sectiekoppen
   op de homepage, zodat beide pagina's hetzelfde systeem spreken. */
.intake-section h2::after {
  content: counter(intake, decimal-leading-zero);
  float: right; font-size: .8em; color: var(--ink); opacity: .16;
}
.intake-section__hint { color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem; max-width: 64ch; line-height: 1.55; }
.intake-section__legend { display: block; font-family: var(--display-ui); font-weight: 800; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: .6rem; }
.conditional-field { margin-top: 1rem; }

/* Keuzeknoppen: rechthoekig, delen hun randen niet (het zijn losse keuzes),
   maar wél harde randen en een omkering bij hover.
   CONTRASTFIX t.o.v. styles.css: de gekozen pil had wit op #FF5C1A en dat is
   3,09:1, onder de AA-grens van 4,5:1. Donkere merkinkt op datzelfde oranje is
   5,18:1. Zelfde regel als bij .btn--primary. */
.radio-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.radio-pill { position: relative; }
.radio-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.radio-pill span {
  display: inline-flex; align-items: center; padding: .55rem 1rem; border-radius: 0;
  border: var(--bd); font-family: var(--display-ui); font-size: .8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink); background: var(--surface); cursor: pointer;
  -webkit-user-select: none; user-select: none;  /* Safari/iOS heeft de prefix nog nodig, en dit publiek zit op iPhones */
  transition: background .12s linear, color .12s linear;
}
.radio-pill span:hover { background: var(--ink); color: var(--surface); }
.radio-pill input:checked + span { background: var(--signaal); color: var(--werkblauw); border-color: var(--ink); }
.radio-pill input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ─────────────────────────── FAQ ─────────────────────────── */
.faq { padding: var(--sp-section) 0; border-top: var(--bd); }
.faq__inner { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.faq__list { display: grid; gap: 0; border: var(--bd); }
.qa { background: var(--surface); border: 0; border-radius: 0; transition: background .12s linear; }
.qa + .qa { border-top: var(--bd); }
.qa[open] { background: var(--surface-2); }
.qa summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.2rem;
  font-family: var(--display-ui); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; font-size: .92rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "+"; font-family: var(--display-ui); font-size: 1.4rem; font-weight: 400;
  color: var(--werkblauw); background: var(--signaal);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  transition: transform .15s ease; line-height: 1; flex: none;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa__a { padding: 0 1.2rem 1.15rem; color: var(--ink-soft); }
.qa__a p { max-width: 62ch; }

/* ─────────────────────────── Slot CTA ─────────────────────────── */
.slot { padding: 0; background: var(--signaal); color: var(--werkblauw); }
.slot::before { content: ""; display: block; height: 14px; background: var(--hazard); }
.slot .wrap { padding-block: clamp(3rem, 6vw, 5rem); }
/* LET OP: geen margin-inline: 0 hier. Dit element is zelf de .wrap, en die
   centreert met margin-inline: auto. Met 0 schoof de hele slotsectie tegen
   de linkerrand van het scherm; gevonden op een screenshot, niet in code. */
.slot__inner { max-width: none; text-align: left; }
.slot__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 4.6vw, 4.6rem); line-height: var(--lh-kop); letter-spacing: .004em;
  color: var(--werkblauw); margin-bottom: 1.8rem; max-width: 20ch;
}
.slot .btn--primary {
  --btn-bg: var(--werkblauw); --btn-fg: var(--krijt); --btn-bd: var(--werkblauw);
  box-shadow: 5px 5px 0 var(--krijt);
}
.slot .btn--primary:hover { --btn-bg: var(--werkblauw-2); box-shadow: 2px 2px 0 var(--krijt); }
.slot__sub {
  margin-top: 1.2rem; color: var(--werkblauw);
  font-family: var(--display-ui); font-weight: 800; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ─────────────────────────── Footer ─────────────────────────── */
.site-footer { background: var(--werkblauw); color: rgba(250,249,246,.72); padding: clamp(2.6rem, 5vw, 4rem) 0 1.6rem; }
.footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 2.4rem; padding-bottom: 2.2rem; border-bottom: 2px solid rgba(250,249,246,.2); }
.brand--footer .brand__arc { stroke: var(--krijt); }
.brand--footer .brand__name { color: var(--krijt); }
.footer__tag { margin-top: .8rem; max-width: 26ch; }
.footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer__nav h4 {
  color: var(--signaal); font-family: var(--display-ui); font-weight: 800;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .9rem;
}
.footer__nav a { display: block; padding: .28rem 0; color: rgba(250,249,246,.72); font-size: .93rem; }
.footer__nav a:hover { color: var(--signaal); }
.footer__base { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: .5rem; padding-top: 1.3rem; font-size: .82rem; color: rgba(250,249,246,.5); }

/* ─────────────────── Mobiele belbalk ─────────────────── */
.mobile-callbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; gap: 0;
  padding: 0 0 env(safe-area-inset-bottom);
  background: var(--bg); border-top: var(--bd);
}
/* .78rem, niet .92rem: "PLAN EEN GESPREK" in hoofdletters met letterafstand
   viel anders over twee regels in een balk van een halve schermbreedte. */
.btn--callbar { flex: 1; justify-content: center; padding: .95rem .5rem; font-size: .78rem; border: 0; box-shadow: none; }
.btn--callbar:first-child { border-right: var(--bd); }
.mobile-callbar .btn--primary { box-shadow: none; }

/* ─────────────────── Cookiemelding ─────────────────── */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--werkblauw); color: var(--krijt);
  border-top: 4px solid var(--signaal); padding: 1rem clamp(1rem, 4vw, 2rem);
}
.cookie-banner__inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.cookie-banner__inner p { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(250,249,246,.88); max-width: 62ch; }
.cookie-banner__inner a { color: var(--signaal); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: .6rem; flex: none; }
.cookie-banner .btn--ghost { --btn-bd: rgba(250,249,246,.6); --btn-fg: var(--krijt); }
.cookie-banner .btn--ghost:hover { --btn-bg: var(--krijt); --btn-fg: var(--werkblauw); --btn-bd: var(--krijt); }
@media (max-width: 620px) {
  .cookie-banner__inner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1; }
}
/* Chatwidget opschuiven zolang de cookiemelding staat, anders overlappen ze. */
body.has-cookie-banner #ab-chat-toggle, body.has-cookie-banner #ab-chat-panel {
  bottom: calc(12px + var(--cookie-banner-h, 90px)) !important; transition: bottom .2s ease;
}
/* GEEN chatwidget-overrides meer hier. Die stonden er even als noodgreep met
   !important, maar het chatbot-product heeft er zijn eigen mechanisme voor:
   product/chatbot/customers/belvanger/skin.css wordt door de widget zelf
   ingeladen (/api/widget-skin.css). Daar hoort het, want dan geldt het ook
   waar dit stylesheet niet komt. */

/* ─────────────────────────── Reveals ───────────────────────────
   Progressive enhancement, ongewijzigd: content is STANDAARD ZICHTBAAR.
   Reveals worden alleen verborgen als app.js aantoonbaar draait (die zet
   .reveal-ready op <html>). Faalt JS, dan blijft alles leesbaar.
   Brutalistisch: het blok schuift op vanaf links in plaats van te vervagen. */
.reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s linear, transform .35s cubic-bezier(.2,.7,.3,1); }
.reveal-ready .reveal.in { opacity: 1; transform: none; }

/* ─────────────────────────── Responsive ─────────────────────────── */
@media (max-width: 1000px) {
  .trades__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav, .header__actions .btn, .header__actions .lang-switch { display: none; }
  .nav-toggle { display: block; }
  .site-header[data-open] .mobile-menu { display: flex; }
  /* Op mobiel eerst de boodschap, dan het bewijs: de telefoon is ~595px hoog,
     bovenaan zetten duwt de H1 onder de vouw. De simulatie speelt vanzelf af
     zodra de telefoon in beeld scrollt, dus je mist 'm niet. */
  .hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero__sub { max-width: none; }
  .calc { grid-template-columns: 1fr; }
  .prijs__grid, .demo__grid, .faq__inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .trades__inner { grid-template-columns: 1fr; }
  .trades__label { max-width: none; padding: .7rem 1rem; }
  .trades__list { border-left: 0; border-top: var(--bd-w) solid var(--ink); }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
  .voorbeelden__dashboard { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
  .stats { grid-template-columns: 1fr; }
  .herken__grid { grid-template-columns: 1fr; }
  .microtrust { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; }
  .mobile-callbar { display: flex; }
  body { padding-bottom: 68px; }
  /* Naast elkaar was het bij styles.css prima, maar de knoplabels staan nu in
     hoofdletters mét letterafstand: "ZIE HET VOOR JOUW BEDRIJF" viel over vier
     regels op 390px. Onder elkaar en volle breedte: leesbaar, en een groter
     raakvlak voor iemand met werkhandschoenen aan. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { flex: none; width: 100%; justify-content: center; }
  .route__step { grid-template-columns: 56px 1fr; }
  .route__marker { font-size: 1.6rem; }
  .pricecard__tag { margin: -1.8rem -1.8rem 1.1rem; }
  /* Chatwidget boven de mobiele belbalk. Samen met de cookiemelding telt het op
     via de specifiekere regel hieronder. */
  #ab-chat-toggle, #ab-chat-panel { bottom: calc(20px + 68px) !important; }
  body.has-cookie-banner #ab-chat-toggle, body.has-cookie-banner #ab-chat-panel {
    bottom: calc(12px + var(--cookie-banner-h, 90px) + 68px) !important;
  }
}

/* ─────────────────────────── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-ready .reveal { opacity: 1; transform: none; }
  /* vangnet: moet .is-armed verslaan, anders blijft de telefoon leeg */
  .phone.is-armed [data-step],
  .hero__demo.is-armed .lead-toast { opacity: 1; transform: none; }
  .mark-underline::after { transform: scaleX(1); }
  .phone.is-armed .typing, .typing { display: none; }
}