/* =========================================================
   Powerfly — site.css
   Richting A "Van stapel naar offerte" (zie DIRECTION.md)
   ========================================================= */

/* ---------- Lettertypen (zelf gehost, latin-subset; zelfde bestanden en unicode-range als Google Fonts) ---------- */
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/syne-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/epilogue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/epilogue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Epilogue'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/epilogue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --c-paper: #F4F3F0;
  --c-paper-2: #EAE8E3;
  --c-paper-3: #DFDCD5;
  --c-white: #FFFFFF;
  --c-night: #0C0D18;
  --c-night-2: #161827;
  --c-ink: #0C0D18;
  --c-ink-soft: #55576A;
  --c-ink-inv: #F4F3F0;
  --c-ink-inv-soft: #9A9CAB;
  --c-accent: #6D28D9;
  --c-accent-press: #5B21B6;
  --c-accent-hi: #A78BFA;
  --c-on-accent: #FFFFFF;
  --c-rule: #D6D3CC;

  --f-display: "Syne", "Epilogue", system-ui, sans-serif;
  --f-text: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hud: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(1.625rem, 3.6vw, 4rem);
  --fs-h1: clamp(1.75rem, 5.2vw, 4.75rem);
  --fs-h2: clamp(1.5rem, 3.3vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.45vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-hud: 0.75rem;

  --gutter: clamp(16px, 3vw, 40px);
  --section-gap: clamp(72px, 9vw, 136px);
  --maxw: 1360px;
  --measure: 38rem;
  --radius-pill: 0;       /* knoppen zijn scherp en vierkant (14 okt 2026) */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Hero/nav-kleuren: standaard licht. De home-hero schuift ze in WebGL-modus van donker naar licht. */
  --hero-bg: var(--c-paper);
  --hero-fg: var(--c-ink);
  --hero-soft: var(--c-ink-soft);
  --hero-inv: 0;

  --c-error: #B42318;
  --c-placeholder: #6B6D7C;

  /* Paarse familie als vlakken (bijgewerkt 14 okt 2026) */
  --c-deep: #1B0F3F;        /* diep aubergine: donkere secties, footer — tekst 15,9 : 1 */
  --c-deep-soft: #C9BEEA;   /* bijtekst op diep — 10,1 : 1 */
  --c-lilac: #EDE6FF;       /* lichte tint — inkt 16 : 1, bijtekst 5,9 : 1 */
  --c-on-purple-soft: #E4DAFF; /* bijtekst op paars — 5,3 : 1 */

  color-scheme: light;
}

/* ---------- Donkere modus (via de knop in de navigatie) ---------- */
html[data-theme="dark"] {
  --c-paper: #0C0D18;
  --c-paper-2: #151726;
  --c-paper-3: #1F2235;
  --c-white: #121425;
  --c-night: #191B2D;
  --c-night-2: #222538;
  --c-ink: #F4F3F0;
  --c-ink-soft: #A3A5B4;
  --c-accent: #7C3AED;
  --c-accent-press: #6D28D9;
  --c-rule: rgba(244, 243, 240, 0.16);
  --c-error: #FF8A80;
  --c-placeholder: #8C8EA0;
  --c-deep: #231446;
  --c-lilac: #1E1640;
  --hero-inv: 1;
  color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font: 400 var(--fs-body)/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--c-accent);
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
@media (max-width: 767px) { br.d { display: none; } }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--c-accent); color: var(--c-on-accent); }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
.on-night :focus-visible { outline-color: var(--c-accent-hi); }
html { scrollbar-color: var(--c-paper-3) var(--c-paper); }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--c-ink); color: var(--c-paper); padding: 10px 16px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap); }
.section-tight { padding-block: calc(var(--section-gap) * 0.6); }
.on-night { background: var(--c-night); color: var(--c-ink-inv); }
.on-night .soft { color: var(--c-ink-inv-soft); }
.on-paper-2 { background: var(--c-paper-2); }
.on-white { background: var(--c-white); }

/* ---------- Type ---------- */
.h1 { font: 800 var(--fs-h1)/0.95 var(--f-display); letter-spacing: -0.04em; }
.h2 { font: 800 var(--fs-h2)/1.02 var(--f-display); letter-spacing: -0.04em; }
.h3 { font: 600 var(--fs-h3)/1.25 var(--f-text); letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }
.body { max-width: var(--measure); }
.body p + p { margin-top: 1em; }
.soft { color: var(--c-ink-soft); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums; }
.hud {
  font: 500 var(--fs-hud)/1 var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- Knoppen en links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--c-accent); color: var(--c-on-accent);
  font: 600 1rem/1 var(--f-text); text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-sm { min-height: 42px; padding: 0 20px; font-size: 0.9375rem; white-space: nowrap; }
.btn-lg { min-height: 60px; padding: 0 34px; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--c-accent-press); }
}
.link { font-weight: 500; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--c-accent); text-decoration-thickness: 2px; }
  .on-night .link:hover { color: var(--c-accent-hi); }
}
.link.arrow { display: inline-flex; align-items: center; min-height: 44px; }
.arrow::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.35em; vertical-align: -0.1em;
  background: currentColor; transition: transform 160ms var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .arrow:hover::after { transform: translateX(3px); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- Navigatie ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: var(--hero-bg); color: var(--hero-fg);
  padding-top: env(safe-area-inset-top, 0px);
  transition: color 160ms ease;
}
.nav-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.0625rem/1 var(--f-display); letter-spacing: 0.01em; }
.wordmark img { width: 26px; filter: invert(var(--hero-inv)); }
.nav-inner > nav { margin-left: auto; }
.nav-links { display: flex; gap: 26px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: var(--fs-small); color: var(--hero-soft); transition: color 160ms ease; }
.nav-links a[aria-current="page"] { color: var(--hero-fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.5em; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--hero-fg); } }
.nav-toggle { display: none; }
.nav-panel { display: none; }

@media (max-width: 1080px) {
  .nav-links, .nav-inner > .btn { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--hero-fg); font-weight: 600; cursor: pointer;
    transition: transform 140ms var(--ease-out);
  }
  .nav-toggle:active { transform: scale(0.97); }
  .nav-toggle .bars { position: relative; width: 18px; height: 12px; }
  .nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 200ms var(--ease-out); }
  .nav-toggle .bars::before { top: 2px; }
  .nav-toggle .bars::after { bottom: 2px; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(3px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-3px) rotate(-45deg); }

  .nav-panel {
    display: block; position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 auto 0; z-index: 39;
    background: var(--c-paper); color: var(--c-ink);
    padding: 12px var(--gutter) 28px;
    box-shadow: 0 24px 40px -24px rgba(12, 13, 24, 0.35);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
  }
  .nav-panel.open { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
  .nav-panel ul { list-style: none; }
  .nav-panel li a { display: block; padding: 14px 0; font: 800 1.5rem/1.1 var(--f-display); letter-spacing: -0.03em; text-decoration: none; }
  .nav-panel .btn { margin-top: 16px; width: 100%; }
}

/* ---------- Pagina-kop (subpagina's) ---------- */
.page-head { padding-top: calc(72px + clamp(64px, 10vw, 140px)); padding-bottom: clamp(56px, 8vw, 112px); }
.page-head .h1 { margin-bottom: 28px; }
.page-head .lead { color: var(--c-ink); }

/* ---------- Placeholders voor beeld ---------- */
.ph {
  position: relative; display: grid; place-items: center; text-align: center;
  background: var(--c-paper-2); color: var(--c-ink-soft);
  padding: 24px; width: 100%;
}
.ph-label { max-width: 26ch; font-size: var(--fs-small); line-height: 1.4; }
.ph-label strong { display: block; color: var(--c-ink); font: 500 var(--fs-hud)/1.3 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.on-night .ph { background: var(--c-night-2); color: var(--c-ink-inv-soft); }
.on-night .ph-label strong { color: var(--c-ink-inv); }
.on-paper-2 .ph { background: var(--c-paper-3); }

/* ---------- Home: hero (chaos → vlieg → offerte) ---------- */
.hero { position: relative; }
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  --edge: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: calc(72px + 72px) var(--edge) 88px;
  background: var(--hero-bg); color: var(--hero-fg);
  transition: color 160ms ease;
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display: none; }
.hero-copy { position: relative; z-index: 3; }
.hero-h { font: 800 var(--fs-hero)/0.98 var(--f-display); letter-spacing: -0.045em; margin-bottom: 28px; }
.hero-copy .lead { margin-bottom: 36px; max-width: 33rem; }
.hero-signpost { margin-top: 22px; font-size: var(--fs-small); color: var(--hero-soft); }
.hero-signpost a { color: var(--hero-fg); }

.hero .hud { position: absolute; z-index: 3; color: var(--hero-soft); padding: 10px 12px; }
.hud-tl { top: calc(72px + 20px); left: var(--edge); }
.hud-tr { top: calc(72px + 20px); right: var(--edge); }
.hud-bl { bottom: 24px; left: var(--edge); }
.hud-br { bottom: 24px; right: var(--edge); }
a.hud { text-decoration: none; min-height: 44px; display: inline-flex; align-items: flex-end; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { a.hud:hover { color: var(--hero-fg); } }
.hero .hud::before { content: ""; position: absolute; width: 8px; height: 8px; border: 0 solid currentColor; }
.hud-tl::before { top: 0; left: 0; border-top-width: 1px !important; border-left-width: 1px !important; }
.hud-tr::before { top: 0; right: 0; border-top-width: 1px !important; border-right-width: 1px !important; }
.hud-bl::before { bottom: 0; left: 0; border-bottom-width: 1px !important; border-left-width: 1px !important; }
.hud-br::before { bottom: 0; right: 0; border-bottom-width: 1px !important; border-right-width: 1px !important; }

.doc { position: relative; z-index: 2; margin: 0; justify-self: end; width: min(100%, 480px); }
.paper { --c-ink: #0C0D18; --c-ink-soft: #55576A; --c-rule: #D6D3CC; background: #FFFFFF; color: var(--c-ink); padding: 30px 28px 26px; font-size: var(--fs-small); line-height: 1.45; }
.doc-row { display: flex; justify-content: space-between; gap: 16px; }
.doc-head { font-size: 0.8125rem; color: var(--c-ink-soft); margin-bottom: 26px; }
.doc-title { font: 800 1.625rem/1.05 var(--f-display); letter-spacing: -0.03em; }
.doc-sub { margin: 6px 0 20px; color: var(--c-ink-soft); font-size: 0.875rem; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.doc-table td { padding: 10px 0; border-bottom: 1px solid var(--c-rule); vertical-align: top; }
.doc-table td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 12px; }
.doc-total { font-weight: 600; font-size: 1.0625rem; padding: 6px 0 16px; font-variant-numeric: tabular-nums; }
.doc-note { font-size: 0.8125rem; color: var(--c-ink-soft); max-width: 46%; min-height: 104px; }
/* Stempel "Afgehandeld door Powerfly": de vlieg in zwarte inkt, als rubberstempel op de offerte */
.stamp {
  position: absolute; z-index: 4; right: 18px; bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border: 2px solid #0C0D18; border-radius: 6px;
  color: #0C0D18; font: 500 0.75rem/1.25 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase;
  transform: rotate(-9deg); transform-origin: 50% 50%; pointer-events: none;
}
.stamp img { width: 44px; height: auto; }
html:not(.gl):not(.reduce) .stamp { animation: land 220ms var(--ease-out) 250ms both; }
@keyframes land { from { opacity: 0; transform: rotate(-3deg) scale(1.35); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }

html.gl .hero { height: 580vh; } /* lang scrollverhaal in rustig tempo (14 okt 2026: 250 → 400 → 580vh op verzoek) */
html.gl .stage { position: sticky; top: 0; height: 100vh; min-height: 0; }
@supports (height: 100svh) { html.gl .stage { height: 100svh; } } /* mobiel: geen sprong als de adresbalk in- of uitschuift */
@media (max-width: 767px) {
  /* Mobiel (16 okt 2026, Ravi): twee schermen. Scherm 1: tekst met vlokken erachter, die een vlieg worden (iets lager).
     Scherm 2: het vliegje wordt het bonnetje, dat onder de tekst staat. Niets sticky: de canvas beslaat de hele hero. */
  html.gl .hero { height: auto; }
  html.gl .stage { position: relative; top: auto; height: auto; min-height: 0; padding-bottom: 88px; }
  html.gl .hero-copy { min-height: calc(100svh - 72px - 56px - 24px); }
  html.gl .stamp { right: 8px; bottom: -64px; } /* onder het totaal, niet eroverheen */
}
html.gl #gl { display: block; }
html.gl .doc, html.gl .stamp { opacity: 0; }

/* ---------- Thema-knop ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--c-rule); border-radius: 0; background: transparent; color: var(--hero-fg);
  cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.theme-toggle .moon, html[data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(-45deg) scale(0.9); }
html[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: var(--c-paper-2); } }

/* ---------- Home: apart spoor voor zzp'ers en vakmensen ---------- */
.zzp-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px); background: var(--c-night); color: var(--c-ink-inv);
}
.zzp-tile img { width: clamp(44px, 5vw, 64px); filter: invert(1); }
.zzp-tile .h3 { font: 800 clamp(1.375rem, 2.2vw, 2rem)/1.05 var(--f-display); letter-spacing: -0.035em; margin-bottom: 6px; }
.zzp-tile p { color: var(--c-ink-inv-soft); }
.zzp-tile .btn { white-space: nowrap; }

/* ---------- Home: diensten als aanbod (probleem → oplossing → bewijs → risico → rendement) ---------- */
.offer-track { margin-top: clamp(56px, 7vw, 96px); }
.offer-track + .offer-track { margin-top: clamp(88px, 11vw, 160px); }
.track-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-bottom: 20px; }
.track-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-ink); transform-origin: left center; }
.track-head .svc-t { font-size: clamp(1.375rem, 3vw, 2.625rem); }
.track-price { font: 800 clamp(1.125rem, 2vw, 1.75rem)/1.1 var(--f-display); letter-spacing: -0.03em; color: var(--c-accent); }
.track-for { margin-top: 14px; color: var(--c-ink-soft); max-width: 60ch; }
.track-tag { margin-top: 18px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.track-pts { list-style: none; margin-top: 16px; display: grid; gap: 10px; max-width: 60ch; }
.track-pts li { position: relative; padding-left: 24px; }
.track-pts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--c-accent); }
.track-note { margin-top: 16px; max-width: 60ch; }
.ps { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
.ps > div { padding: clamp(24px, 3vw, 40px); }
.ps .ps-now { background: var(--c-paper-2); }
.ps .ps-new { background: var(--c-white); }
.ps h4 { font: 600 1.0625rem/1.3 var(--f-text); margin-bottom: 16px; }
.ps ul { list-style: none; display: grid; gap: 14px; }
.ps li { position: relative; padding-left: 24px; }
.ps-now li::before, .ps-new li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; }
.ps-now li::before { border: 2px solid var(--c-ink-soft); }
.ps-new li::before { background: var(--c-accent); }
.offer { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 2vw, 24px); }
.offer > div { padding: clamp(24px, 3vw, 36px); background: var(--c-white); }
.offer h4 { font: 500 var(--fs-hud)/1.2 var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: 16px; }
.offer .case-name { font: 800 clamp(1.375rem, 2vw, 1.75rem)/1.05 var(--f-display); letter-spacing: -0.03em; margin-bottom: 10px; }
.offer .risk { list-style: none; display: grid; gap: 14px; }
.offer .risk b { display: block; font-weight: 600; }
.roi { display: grid; gap: 14px; align-content: start; }
.offer .roi h4 { margin-bottom: 0; }
.roi-note { font-size: 0.8125rem; color: var(--c-ink-soft); }
.roi .field input { min-height: 46px; padding: 10px 14px; }
.roi-out { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--c-rule); }
.roi-big { font: 800 clamp(1.75rem, 3vw, 2.5rem)/1 var(--f-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.offer-track .actions { margin-top: 28px; }

/* ---------- Home: bewijs ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.proof-live { list-style: none; display: grid; gap: 28px; }
.proof-live li { display: grid; grid-template-columns: 14px 1fr; gap: 16px; align-items: baseline; }
.proof-live li::before { content: ""; width: 10px; height: 10px; background: var(--c-ink); transform: translateY(-1px); }
.proof-live b { display: block; font-weight: 600; }
.systems { margin-top: clamp(56px, 7vw, 96px); display: flex; flex-wrap: wrap; gap: 8px 36px; font: 800 clamp(1.25rem, 2.2vw, 2rem)/1.15 var(--f-display); letter-spacing: -0.03em; }
.systems span { color: var(--c-ink); }
.facts-label { margin-top: clamp(56px, 7vw, 96px); }
.facts { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.fact-n { font: 800 clamp(1.875rem, 3.3vw, 3.25rem)/1 var(--f-display); letter-spacing: -0.04em; margin-bottom: 12px; white-space: nowrap; }
.logos { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.logos .ph { width: 240px; aspect-ratio: 3 / 1; padding: 12px; }

/* ---------- Home: probleem ---------- */
.pile { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
.pile-item { padding: 28px 0 32px; border-top: 1px solid var(--c-rule); }
.pile-item { grid-column: span 4; }
.pile-item .h3 { margin-bottom: 10px; }
.pile-cost { margin-top: clamp(56px, 7vw, 96px); font: 800 clamp(1.375rem, 2.3vw, 2.125rem)/1.25 var(--f-display); letter-spacing: -0.035em; max-width: 30ch; }

/* ---------- Home: 3 stappen ---------- */
.steps { margin-top: clamp(56px, 7vw, 96px); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.step { padding: 0 clamp(16px, 2.5vw, 40px) 0 0; }
.step + .step { padding-left: clamp(16px, 2.5vw, 40px); box-shadow: inset 1px 0 0 rgba(244, 243, 240, 0.14); }
.step .hud { display: block; color: var(--c-accent-hi); margin-bottom: 28px; }
.step-t { font: 800 clamp(1.375rem, 1.9vw, 1.75rem)/1.05 var(--f-display); letter-spacing: -0.035em; margin-bottom: 16px; }
.step p { color: var(--c-ink-inv-soft); max-width: 30ch; }
.step p strong { color: var(--c-ink-inv); font-weight: 500; }

/* ---------- Home: diensten ---------- */
.services { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(48px, 6vw, 80px); }
.svc { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.svc-main { background: var(--c-white); }
.svc-t { font: 800 clamp(1.375rem, 2vw, 1.875rem)/1.05 var(--f-display); letter-spacing: -0.035em; }
.voice, .svc, .proof > *, .split > *, .contact > *, .faq > * { min-width: 0; }
.split .h2, .faq .h2 { font-size: clamp(1.5rem, 2.9vw, 2.625rem); }
.svc-trade { background: var(--c-night); color: var(--c-ink-inv); }
.svc-trade .soft { color: var(--c-ink-inv-soft); }
.svc-price { font: 800 clamp(1.75rem, 3vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.04em; }
.svc-price small { display: block; margin-top: 8px; font: 400 var(--fs-small)/1.4 var(--f-text); letter-spacing: 0; color: inherit; opacity: 0.75; }
.svc ul { list-style: none; display: grid; gap: 10px; }
.svc li { position: relative; padding-left: 22px; }
.svc li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; background: currentColor; }
.svc .actions { margin-top: auto; padding-top: 12px; }

/* ---------- Home: ervaringen ---------- */
.voices { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
.voice { padding: clamp(28px, 4vw, 48px); background: var(--c-paper-2); display: grid; gap: 24px; align-content: start; }
.voice-q { font: 600 clamp(1.25rem, 2vw, 1.75rem)/1.3 var(--f-text); letter-spacing: -0.01em; color: var(--c-ink-soft); }
.voice-who { display: flex; align-items: center; gap: 14px; }
.voice-who .ph { flex: none; width: 56px; height: 56px; padding: 0; border-radius: 50%; background: var(--c-paper-3); overflow: hidden; }
.voice-who .ph .ph-label { display: none; }
.voice-who .ph span { font: 500 9px/1 var(--f-hud); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--c-rule); }
.faq details { border-bottom: 1px solid var(--c-rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-weight: 600; font-size: 1.1875rem; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: currentColor; }
.faq summary .plus::before { left: 7px; top: 0; width: 2px; height: 16px; }
.faq summary .plus::after { left: 0; top: 7px; width: 16px; height: 2px; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 0 28px; max-width: 60ch; color: var(--c-ink); }
.faq .answer p + p { margin-top: 0.8em; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--c-accent); } }

/* ---------- Afsluiter ---------- */
.closer { display: grid; gap: clamp(28px, 4vw, 48px); }
.closer .h2 { font-size: clamp(1.75rem, 5.4vw, 5rem); line-height: 1.02; }
.closer-side { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; }
.closer-side > p { max-width: 36ch; }

/* ---------- Footer ---------- */
.footer { background: var(--c-night); color: var(--c-ink-inv); padding: clamp(64px, 8vw, 112px) 0 32px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer h2 { font: 500 var(--fs-hud)/1 var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-inv-soft); margin-bottom: 18px; }
.footer ul { list-style: none; display: grid; gap: 0; }
.footer a { text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--c-accent-hi); text-decoration: underline; } }
.footer-mark { margin-top: clamp(64px, 8vw, 112px); display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); }
.footer-mark img { width: min(7.4vw, 104px); filter: invert(1); }
.footer-mark span { font: 800 min(8.1vw, 7.4rem)/0.8 var(--f-display); letter-spacing: -0.05em; white-space: nowrap; }
.footer-base { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--c-ink-inv-soft); font-size: 0.875rem; }

/* ---------- Diensten ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.tasks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.tasks li { padding: 18px 0; border-bottom: 1px solid var(--c-rule); font-weight: 500; }
.compare { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
.compare > div { padding: clamp(24px, 3vw, 40px); }
.compare .before { background: var(--c-paper-2); }
.compare .after { background: var(--c-white); }
.compare h4 { font: 500 var(--fs-hud)/1 var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: 18px; }
.compare ul { list-style: none; display: grid; gap: 12px; }
.agent + .agent { margin-top: clamp(80px, 10vw, 144px); }
.agent-figures { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 24px 56px; }
.agent-figures div b { display: block; font: 800 clamp(1.75rem, 3vw, 2.75rem)/1 var(--f-display); letter-spacing: -0.04em; margin-bottom: 6px; }
.controls { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: clamp(40px, 5vw, 64px); }
.controls b { display: block; font-weight: 600; margin-bottom: 6px; color: var(--c-ink-inv); }
.controls li { color: var(--c-ink-inv-soft); }

/* ---------- Tarieven ---------- */
.price-table-wrap { margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; }
.price-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--c-rule); }
.price-table thead th { padding-bottom: 28px; font-weight: 400; }
.price-table thead th:first-child { width: 22%; }
.price-name { display: block; font: 600 1.1875rem/1.3 var(--f-text); margin-bottom: 10px; }
.price-amount { display: block; font: 800 clamp(1.75rem, 2.7vw, 2.625rem)/1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; }
.price-sub { display: block; margin-top: 8px; color: var(--c-ink-soft); font-size: var(--fs-small); }
.price-table tbody th { font-weight: 500; color: var(--c-ink-soft); font-size: var(--fs-small); }
.price-table .yes::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--c-ink); }
.price-table .no { color: var(--c-ink-soft); }
.price-table tfoot td { border-bottom: 0; padding-top: 28px; }
.terms { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.terms b { display: block; margin-bottom: 8px; font-weight: 600; }

/* ---------- Over ons ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.person .ph { aspect-ratio: 4 / 5; margin-bottom: 28px; }
.person .h3 { font: 800 clamp(1.75rem, 3vw, 2.5rem)/1 var(--f-display); letter-spacing: -0.04em; margin-bottom: 6px; color: var(--c-accent); }
html[data-theme="dark"] .person .h3 { color: var(--c-accent-hi); }
/* Over ons levendiger (15 okt 2026): citaten groot en paars, cijfers groot, echte foto */
/* Rijen van beide kaarten delen (foto, naam, rol, tekst, LinkedIn, citaat), zodat citaten op dezelfde lijn beginnen */
@media (min-width: 901px) {
  .people { row-gap: 0; }
  .person { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; }
  .person > * { min-width: 0; }
}
.person-quote { align-self: start; margin: 24px 0 0; padding-left: 20px; border-left: 3px solid var(--c-accent); }
.person-quote p { font: 800 clamp(1.0625rem, 1.8vw, 1.5rem)/1.25 var(--f-display); letter-spacing: -0.02em; color: var(--c-ink); }
html[data-theme="dark"] .person-quote { border-left-color: var(--c-accent-hi); }
.track-groot b { font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1; color: var(--c-accent-hi); }
.track-groot li { align-items: baseline; padding: 32px 0; }
.over-foto { margin: 32px 0 0; }
.over-foto img { display: block; width: 100%; height: auto; }
.over-foto figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.person .role { color: var(--c-ink-soft); margin-bottom: 18px; }
.track { list-style: none; display: grid; gap: 0; margin-top: clamp(40px, 5vw, 64px); }
.track li { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid rgba(244, 243, 240, 0.14); }
.track b { font: 800 clamp(1.25rem, 2.2vw, 2rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.track span { color: var(--c-ink-inv-soft); }
.principles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: clamp(40px, 5vw, 64px); }
.principles b { display: block; font: 800 clamp(1.5rem, 2.4vw, 2.25rem)/1 var(--f-display); letter-spacing: -0.035em; margin-bottom: 14px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font-weight: 600; font-size: var(--fs-small); }
.field .hint { font-size: 0.875rem; color: var(--c-ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font: 400 1.0625rem/1.4 var(--f-text); color: var(--c-ink);
  background: var(--c-white); border: 1px solid var(--c-rule); border-radius: 0; caret-color: var(--c-accent);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-placeholder); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.18); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--c-error); }
.field .error { color: var(--c-error); font-size: 0.875rem; font-weight: 500; }
.field .error:empty { display: none; }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; }
.choices legend { margin-bottom: 10px; }
.choice { position: relative; }
.choice input { position: absolute; left: 0; top: 0; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--c-white); border: 1px solid var(--c-rule); font-size: var(--fs-small); font-weight: 500; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 140ms var(--ease-out); }
.choice span:active { transform: scale(0.97); }
.choice input:checked + span { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
.choice input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.form-note { font-size: 0.875rem; color: var(--c-ink-soft); }
.contact-enkel { grid-template-columns: minmax(0, 40rem); }
.direct { display: grid; gap: 4px; }
.direct-item { padding: 24px 0; border-bottom: 1px solid var(--c-rule); }
.direct-item:first-child { border-top: 1px solid var(--c-rule); }
.direct-item .h3 { margin-bottom: 6px; }
.direct-item p { color: var(--c-ink-soft); margin-bottom: 14px; }

/* ---------- Offerte-automaat (licht, mobiel eerst) ---------- */
.oa-head { padding-top: calc(72px + clamp(40px, 8vw, 112px)); padding-bottom: clamp(48px, 7vw, 96px); }
.oa-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.oa-for { font-weight: 600; margin-bottom: 18px; }
.oa-h { font: 800 clamp(1.625rem, 3.9vw, 3.75rem)/0.95 var(--f-display); letter-spacing: -0.045em; margin-bottom: 24px; }
.oa-promise { margin-top: 14px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.wa-btn { background: var(--c-accent); }
.request { background: var(--c-white); padding: 26px 24px 22px; font-size: var(--fs-small); }
.request-top { display: flex; justify-content: space-between; color: var(--c-ink-soft); font-size: 0.8125rem; margin-bottom: 18px; }
.request-amount { font: 800 clamp(2.25rem, 4vw, 3rem)/1 var(--f-display); letter-spacing: -0.04em; margin: 4px 0 18px; font-variant-numeric: tabular-nums; }
.request dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding-top: 16px; border-top: 1px solid var(--c-rule); }
.request dt { color: var(--c-ink-soft); }
.request dd { margin: 0; text-align: right; font-weight: 500; }
.request-cap { margin-top: 14px; font-size: 0.8125rem; color: var(--c-ink-soft); }
.flow { list-style: none; counter-reset: flow; display: grid; gap: 0; margin-top: clamp(40px, 5vw, 64px); }
.flow li { counter-increment: flow; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--c-rule); }
.flow li::before { content: counter(flow); font: 800 1.75rem/1 var(--f-display); letter-spacing: -0.03em; }
.flow b { display: block; font-weight: 600; margin-bottom: 4px; }
.shots { display: flex; gap: 16px; margin-top: 32px; }
.shots .ph { width: min(46%, 260px); aspect-ratio: 390 / 844; }
.get { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(32px, 4vw, 56px); }
.get li { padding: 18px 0 18px 26px; border-top: 1px solid var(--c-rule); position: relative; }
.get li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 10px; height: 10px; background: var(--c-ink); }
.calc { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.calc-in { display: grid; gap: 20px; }
.calc-out { background: var(--c-white); padding: clamp(24px, 3vw, 40px); }
.calc-big { font: 800 clamp(2.25rem, 4.6vw, 3.75rem)/1 var(--f-display); letter-spacing: -0.045em; margin: 6px 0 16px; font-variant-numeric: tabular-nums; }
.price-card { background: var(--c-night); color: var(--c-ink-inv); padding: clamp(28px, 4vw, 48px); }
.price-card .price-amount { font-size: clamp(2.75rem, 7vw, 5.5rem); }
.price-card .soft { color: var(--c-ink-inv-soft); }
.guarantees { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(32px, 4vw, 56px); }
.guarantees b { display: block; font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.05 var(--f-display); letter-spacing: -0.03em; margin-bottom: 12px; }
.wa-bar { display: none; }

/* ---------- Bedankt ---------- */
.thanks { min-height: 100svh; display: grid; align-content: center; padding-top: 96px; padding-bottom: 64px; }
.thanks img { width: 72px; margin-bottom: 32px; }

/* ---------- Binnenkomen (alleen met JS, nooit verborgen zonder) ---------- */
/* :where() houdt de specificiteit op nul, zodat hover-regels hier altijd boven winnen */
:where(.js-reveal [data-reveal]) > * { opacity: 0; transform: translateY(14px); }
:where(.js-reveal [data-reveal].in) > * {
  opacity: 1; transform: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
/* stagger alleen tijdens het binnenkomen; daarna ('settled') reageert alles zonder vertraging */
:where(.js-reveal [data-reveal].in:not(.settled)) > :nth-child(2) { transition-delay: 50ms; }
:where(.js-reveal [data-reveal].in:not(.settled)) > :nth-child(3) { transition-delay: 100ms; }
:where(.js-reveal [data-reveal].in:not(.settled)) > :nth-child(n+4) { transition-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  :where(.js-reveal [data-reveal]) > * { transform: none; }
  :where(.js-reveal [data-reveal].in) > * { transition: opacity 200ms ease; transition-delay: 0ms !important; }
  .btn:active, .nav-toggle:active, .choice span:active { transform: none; }
  .nav-panel { transform: none !important; }
  .link.arrow { display: inline-flex; align-items: center; min-height: 44px; }
.arrow::after { transition: none; }
  .arrow:hover::after { transform: none; }
}

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .doc-note { max-width: none; min-height: 0; margin-bottom: 96px; }
  .stamp { right: 16px; bottom: 16px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .proof, .faq, .closer, .split, .contact, .oa-grid { grid-template-columns: 1fr; }
  .services, .voices, .compare, .people { grid-template-columns: 1fr; }
  .pile { grid-template-columns: 1fr; }
  .pile-item:nth-child(n) { grid-column: auto; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step, .step + .step { padding: 0; box-shadow: none; }
  .principles, .terms, .guarantees { grid-template-columns: 1fr; gap: 28px; }
  .ps, .offer { grid-template-columns: 1fr; }
  .zzp-tile { grid-template-columns: 1fr; }
  .controls { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .nav-toggle .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-inner { gap: 12px; }
}
@media (max-width: 767px) {
  .stage { grid-template-columns: 1fr; padding-top: calc(72px + 56px); gap: 48px; min-height: 0; padding-bottom: 72px; }
  .hud-tr, .hud-br, .hud-bl { display: none; }
  .hud-tl { top: calc(72px + 8px); }
  .hero-h { font-size: clamp(1.5rem, 6.6vw, 2.5rem); }
  .h2 { font-size: 1.375rem; }
  .doc-title { font-size: 1.25rem; }
  .doc-note { max-width: none; min-height: 0; margin-bottom: 96px; }
  .stamp { right: 16px; bottom: 16px; }
  .systems { font: 600 1.1875rem/1.35 var(--f-text); letter-spacing: 0; gap: 4px 20px; }
  .fact-n { font-size: 1.75rem; }
  .calc { grid-template-columns: 1fr; }
  .doc { justify-self: start; width: min(100%, 360px); }
  .paper { padding: 22px 20px 20px; }
  .facts { grid-template-columns: 1fr; gap: 28px; }
  .tasks, .get { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .track li { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .shots .ph { width: 50%; }
  /* Vaste WhatsApp-balk onderin op de Offerte-automaat */
  .wa-bar {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 30;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--c-paper); box-shadow: 0 -12px 24px -16px rgba(12, 13, 24, 0.35);
  }
  .wa-bar .btn { width: 100%; }
  .has-wa-bar { padding-bottom: 88px; }
}

/* Extreem hoge vensters (alleen screenshots/testen): hero niet het hele venster laten vullen */
@media (min-height: 2000px) { .stage, .thanks { min-height: 900px; } }
@media (max-width: 1080px) {
  .theme-toggle { margin-left: auto; }
  .nav-inner .theme-toggle + .btn + .nav-toggle { margin-left: 4px; }
}

/* ---------- WhatsApp en bellen ---------- */
/* WhatsApp: het groene beeldmerk is de enige plek waar groen voorkomt. Bellen: telefoon-icoon, nummer niet zichtbaar. */
.wa-ico { width: 22px; height: 22px; flex: none; }
.btn .wa-ico { width: 24px; height: 24px; }
.call, .wa-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px;
  transition: color 160ms ease;
}
.call-ico { width: 18px; height: 18px; flex: none; }
.li-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.li-ico { width: 20px; height: 20px; flex: none; color: #0a66c2; }
html[data-theme="dark"] .li-ico { color: currentColor; }
@media (hover: hover) and (pointer: fine) { .call:hover, .wa-link:hover { color: var(--c-accent); } }
.on-night .call:hover, .footer .call:hover, .footer a:hover .wa-ico { color: var(--c-accent-hi); }
.footer a .wa-ico { width: 20px; height: 20px; margin-right: 8px; }
.footer .call { font-weight: 400; }
/* In een zin: geen sprong in de regelhoogte, wel een ruim tikvlak */
p .call { min-height: 0; padding-block: 12px; margin-block: -12px; vertical-align: baseline; }
p .call .call-ico { align-self: center; }

/* ---------- Kernfeiten in de hero (Offerte-automaat): 14 dagen live staat vooraan ---------- */
.hero-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 14px 32px; margin: 0 0 32px; }
.hero-facts li { display: grid; gap: 2px; padding-left: 18px; position: relative; }
.hero-facts li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: var(--hero-fg); }
.hero-facts b { font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.hero-facts span { font-size: 0.875rem; color: var(--hero-soft); }
.hero-sub { margin-top: 14px; font-size: var(--fs-small); color: var(--hero-soft); }
.oa-head .hero-facts { --hero-fg: var(--c-ink); --hero-soft: var(--c-ink-soft); }
@media (max-width: 1100px) { .hero-facts { grid-template-columns: 1fr; gap: 10px; } }
.footer-base a { display: inline; min-height: 0; padding-block: 15px; text-decoration: underline; text-underline-offset: 0.2em; }
/* Compacte kernfeiten: één regel, geen toelichting (de uitleg staat bij de stappen) */
.hero-facts.compact { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 36px; }
.hero-facts.compact b { font-size: 1.125rem; }

/* ---------- Home: twee ingangen in de hero (Offerte-automaat voorop) ---------- */
.hero-routes { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: start; gap: 20px 48px; margin-top: 36px; }
.route { display: grid; gap: 10px; justify-items: start; }
.route-for { font-weight: 600; font-size: var(--fs-small); color: var(--hero-fg); }
.route-meta { font-size: 0.875rem; color: var(--hero-soft); }
.route-link { font-size: 1.125rem; font-weight: 600; min-height: 60px; }
.hero-copy .lead { margin-bottom: 0; }
@media (max-width: 767px) { .hero-routes { grid-template-columns: 1fr; gap: 28px; } }


/* =========================================================
   Beweging in het midden van de site (plans/001–005)
   ========================================================= */

/* 001 — Vervallen (14 okt 2026): blokken die je niet kunt aanklikken bewegen niet bij hover; alleen links en knoppen reageren */
/* 002 — Overloop: vervangen door het stapelen in motion.js (fase 5: clip-path per scrollframe was te duur) */

/* Minder beweging: alles direct op eindstand, alleen kleur en opacity blijven */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] > .h2, .js-reveal [data-reveal] > h2,
  .js-reveal .shots[data-reveal] > .ph, .js-reveal .person[data-reveal] > .ph { clip-path: none; transform: none; opacity: 0; }
  .js-reveal [data-reveal].in > .h2, .js-reveal [data-reveal].in > h2,
  .js-reveal .shots[data-reveal].in > .ph, .js-reveal .person[data-reveal].in > .ph { opacity: 1; transition: opacity 200ms ease; }
  .js-reveal .track-head[data-reveal]::after { transform: none; }
  .faq details .answer { transition: opacity 160ms ease; transform: none; }
  .theme-toggle svg { transform: none !important; }
}


/* =========================================================
   Kleur als vlak (voorbeeld: Bonsai — hele velden in de merkkleur)
   ========================================================= */
.on-deep { background: var(--c-deep); }
.on-deep .soft, .on-deep .step p, .on-deep .controls li, .on-deep .track span { color: var(--c-deep-soft); }
.on-purple { background: var(--c-accent); color: #FFFFFF; }
.on-purple .soft { color: var(--c-on-purple-soft); }
.on-purple :focus-visible { outline-color: #FFFFFF; }
.on-purple .btn { background: #FFFFFF; color: var(--c-accent); }
@media (hover: hover) and (pointer: fine) {
  .on-purple .btn:hover { background: var(--c-lilac); }
  .on-purple .link:hover { color: #FFFFFF; text-decoration-thickness: 2px; }
}
html[data-theme="dark"] .on-purple .btn:hover { background: #EDE6FF; }
.on-lilac { background: var(--c-lilac); }
.on-lilac .ph { background: #DCCFFF; }
html[data-theme="dark"] .on-lilac .ph { background: #2A2052; }
.footer.on-deep { background: var(--c-deep); }
.price-card.on-purple { background: var(--c-accent); }
.price-card.on-purple .soft { color: var(--c-on-purple-soft); }

/* Bewijs: gestapelde casus-panelen in eigen kleur */
.cases { list-style: none; margin-top: clamp(40px, 5vw, 64px); display: grid; }
.case { padding: clamp(28px, 3.5vw, 48px); display: grid; gap: 16px; }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-bottom: 18px; font-size: 0.875rem; box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 25%, transparent); }
.case-tag { font: 500 0.75rem/1 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; border: 1px solid currentColor; }
.case-sector { margin-left: auto; font-weight: 500; }
.case-big { font: 800 clamp(2.25rem, 6vw, 5rem)/0.95 var(--f-display); letter-spacing: -0.045em; margin-top: 8px; }
.case-line { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.45; }
.case.on-lilac { color: var(--c-ink); }
@media (max-width: 767px) { .case-sector { margin-left: 0; } }
@media (hover: hover) and (pointer: fine) {
  .case { transition: opacity 260ms var(--ease-out), transform 180ms var(--ease-out); }
  .case:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .case:hover { transform: none; } }
.on-lilac .voice { background: var(--c-white); }
.on-lilac .voice-who .ph { background: var(--c-lilac); }
html[data-theme="dark"] { --c-lilac: #2B2160; }

/* ---------- ui-ux-pro-max + emil-design-eng (14 okt 2026) ---------- */
/* Tikken reageert direct op touch (geen 300ms-vertraging) */
a, button, summary, label.choice { touch-action: manipulation; }

/* Casus-panelen zijn links: hover hoort bij iets wat je kunt aanklikken */
.cases > li { list-style: none; }
a.case { position: relative; text-decoration: none; padding-right: clamp(72px, 8vw, 120px); }
a.case.on-night { color: var(--c-ink-inv); }
a.case.on-purple { color: #FFFFFF; }
a.case.on-lilac { color: var(--c-ink); }
a.case .case-big, a.case .case-meta { color: inherit; }
.case-go {
  position: absolute; right: clamp(28px, 3.5vw, 48px); bottom: clamp(28px, 3.5vw, 48px);
  width: clamp(28px, 3vw, 40px); height: clamp(28px, 3vw, 40px); background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'%3E%3Cpath d='M3 12h17M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 200ms var(--ease-out);
}
a.case:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { a.case:hover .case-go { transform: translateX(6px); } }

/* Pijl in knoppen die naar een pagina of gesprek gaan; schuift mee bij hover */
.btn.go::after {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn.go:hover::after { transform: translateX(3px); } }

/* Menu: sluiten sneller dan openen */
@media (max-width: 1080px) {
  .nav-panel { transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out), visibility 0s linear 150ms; }
}
@media (prefers-reduced-motion: reduce) {
  a.case:hover .case-go, .btn.go:hover::after { transform: none; }
  a.case:active { transform: none; }
}

/* ---------- Kruimelpad: zichtbare weg terug naar home ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: clamp(24px, 3vw, 40px); font-size: var(--fs-small); color: var(--c-ink-soft); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--c-ink); text-underline-offset: 0.22em; transition: color 160ms ease; }
.crumbs [aria-current] { color: var(--c-ink-soft); }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--c-accent); } .wordmark:hover span { color: var(--c-accent); } }
.wordmark span { transition: color 160ms ease; }
.page-head .crumbs { margin-top: calc(-1 * clamp(32px, 5vw, 80px)); }
.thanks .crumbs { margin-bottom: 32px; }

/* Korte break-sectie op home: doorklik naar Maatwerk */
.break-in { display: grid; grid-template-columns: 1fr auto; gap: 32px 64px; align-items: end; }
.break .lead { max-width: 52ch; }
.break-pts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }
.break-pts li { display: flex; align-items: center; gap: 10px; }
.break-pts li::before { content: ""; width: 8px; height: 8px; background: currentColor; }
@media (max-width: 720px) { .break-in { grid-template-columns: 1fr; } }

/* =====================================================================
   Maatwerk-pagina: donkere kop met procesbeeld, kleurvlakken per sectie
   ===================================================================== */
.on-night .crumbs, .on-night .crumbs [aria-current] { color: var(--c-deep-soft); }
.on-night .crumbs a { color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { .on-night .crumbs a:hover { color: var(--c-accent-hi); } }

.mw-hero { padding-bottom: 0; }
.mw-hero .lead { color: var(--c-ink-inv); }
.mw-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.mw-hero-grid > * { min-width: 0; }
.mw-price { margin-top: 32px; font: 800 clamp(1.375rem, 2.2vw, 2rem)/1.1 var(--f-display); letter-spacing: -0.03em; color: #FFFFFF; }
.mw-price span { display: block; margin-top: 6px; font: 500 1rem/1.4 var(--f-text); letter-spacing: 0; color: var(--c-deep-soft); }

.mw-flow { margin: 0; display: grid; }
.mw-in { display: grid; gap: 8px; }
.mw-src { grid-row: span 2; align-self: center; font: 500 var(--fs-hud)/1 var(--f-hud); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent-hi); }
.mw-msg { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 3px 14px; padding: 14px 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.mw-msg b { font-weight: 600; color: #FFFFFF; }
.mw-msg > span:last-child { font-size: 0.9375rem; color: var(--c-deep-soft); }
.mw-link { display: block; width: 2px; height: 36px; margin-left: 50%; background: var(--c-accent-hi); transform-origin: top center; }
.mw-agent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 20px; background: var(--c-accent); color: #FFFFFF; font: 800 1.375rem/1 var(--f-display); letter-spacing: -0.02em; }
.mw-agent small { margin-left: auto; font: 500 0.9375rem/1.3 var(--f-text); letter-spacing: 0; color: var(--c-on-purple-soft); }
.mw-fly { display: inline-grid; place-items: center; width: 38px; height: 38px; background: #FFFFFF; }
.mw-out { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 16px 18px; background: #FFFFFF; color: #0C0D18; }
.mw-out .mw-src { grid-row: auto; color: #6D28D9; }
.mw-out b { font-weight: 600; }
.mw-ok { padding: 4px 10px; background: #EDE6FF; color: #5B21B6; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }

@keyframes mw-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes mw-draw { from { transform: scaleY(0); } }
@keyframes mw-up { from { opacity: 0; transform: translateY(14px); } }
.mw-msg { animation: mw-in 260ms var(--ease-out) both; }
.mw-msg:nth-child(1) { animation-delay: 80ms; }
.mw-msg:nth-child(2) { animation-delay: 140ms; }
.mw-msg:nth-child(3) { animation-delay: 200ms; }
.mw-link { animation: mw-draw 180ms var(--ease-out) 360ms both; }
.mw-agent { animation: mw-up 240ms var(--ease-out) 480ms both; }
.mw-agent ~ .mw-link { animation-delay: 620ms; }
.mw-out { animation: mw-up 260ms var(--ease-out) 740ms both; }
@media (prefers-reduced-motion: reduce) { .mw-msg, .mw-agent, .mw-out { animation: fade-in 200ms ease both; } .mw-link { animation: none; } }
@keyframes fade-in { from { opacity: 0; } }

.mw-systems { margin-top: clamp(64px, 8vw, 112px); padding-block: 32px clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255, 255, 255, 0.16); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 40px; }
.mw-systems > p:first-child { font-weight: 600; color: var(--c-deep-soft); }
.mw-systems ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 32px; font: 800 clamp(1.25rem, 2.2vw, 2rem)/1.15 var(--f-display); letter-spacing: -0.03em; color: #FFFFFF; }
.mw-sys-note { flex-basis: 100%; max-width: 60ch; color: var(--c-deep-soft); }

.mw-vs { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mw-vs > div { padding: clamp(28px, 4vw, 56px); }
.mw-vs h3 { font: 800 clamp(1.375rem, 2.2vw, 2rem)/1 var(--f-display); letter-spacing: -0.03em; margin-bottom: 24px; }
.mw-vs ul { list-style: none; display: grid; gap: 18px; font-size: 1.125rem; line-height: 1.45; }
.mw-vs li { position: relative; padding-left: 28px; }
.mw-vs li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; }
.mw-vs .now { background: var(--c-paper-2); }
.mw-vs .now li { color: var(--c-ink-soft); }
.mw-vs .now li::before { border: 2px solid var(--c-ink-soft); }
.mw-vs .new { background: var(--c-accent); color: #FFFFFF; }
.mw-vs .new li::before { background: #FFFFFF; }

.mw-case { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 80px); padding: clamp(28px, 4vw, 56px); background: var(--c-white); }
.mw-case-t { font: 800 clamp(1.625rem, 2.8vw, 2.5rem)/1 var(--f-display); letter-spacing: -0.035em; margin-bottom: 10px; }
.mw-case ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mw-case li { padding-top: 16px; border-top: 2px solid var(--c-accent); }
.mw-case li b { display: block; font-weight: 600; margin-bottom: 6px; }

.mw-tasks li { font: 800 clamp(1.0625rem, 1.5vw, 1.3125rem)/1.25 var(--f-display); letter-spacing: -0.02em; border-bottom-color: rgba(109, 40, 217, 0.22); }

.mw-agent-row { align-items: center; }
.mock-stage { padding: clamp(20px, 4vw, 48px); background: var(--c-lilac); }
.mock { background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-rule); }
.mock-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--c-deep); color: #FFFFFF; font: 500 var(--fs-hud)/1.2 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; }
.mock-body { padding: 22px 20px 8px; }
.mock-who { font-size: 0.9375rem; color: var(--c-ink-soft); }
.mock-score { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.mock-score b { font: 800 3.25rem/1 var(--f-display); letter-spacing: -0.04em; }
.mock-score span { color: var(--c-ink-soft); font-weight: 600; }
.mock-meter { height: 8px; margin: 12px 0 14px; background: var(--c-paper-2); }
.mock-meter i { display: block; height: 100%; background: var(--c-accent); transform: scaleX(0.82); transform-origin: left center; }
.mock-rows { list-style: none; }
.mock-rows li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--c-rule); font-size: 0.9375rem; }
.mock-rows span { color: var(--c-ink-soft); }
.mock-go { color: var(--c-accent); }
.mock-table { padding: 6px 20px 10px; font-size: 0.9375rem; }
.mock-table > div { display: grid; grid-template-columns: minmax(0, 1.7fr) 0.6fr 0.8fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--c-rule); }
.mock-table > .mock-th { border-top: 0; color: var(--c-ink-soft); font: 500 var(--fs-hud)/1 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; }
.mock-table b { font: 800 1.125rem/1 var(--f-display); }
.chip { padding: 4px 9px; background: var(--c-lilac); color: #5B21B6; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--c-accent); color: #FFFFFF; }
html[data-theme="dark"] .chip:not(.ok), html[data-theme="dark"] .mock-go { color: var(--c-accent-hi); }
.mock-note { padding: 10px 20px; border-top: 1px solid var(--c-rule); font-size: 0.75rem; color: var(--c-ink-soft); }
.mw-compare .after { background: var(--c-lilac); }
.js-reveal .mock-stage .mock-meter i { transform: scaleX(0); }
.js-reveal .in .mock-stage .mock-meter i { transform: scaleX(0.82); transition: transform 450ms var(--ease-out) 100ms; }
@media (prefers-reduced-motion: reduce) { .js-reveal .mock-stage .mock-meter i { transform: scaleX(0.82); transition: none; } }

.mw-facts { list-style: none; }
.mw-facts li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: baseline; gap: 8px 28px; padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, 0.3); }
.mw-facts li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.mw-facts b { font: 800 clamp(2rem, 4vw, 3.5rem)/1 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; }

.mw-roi { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mw-roi-in { display: grid; gap: 18px; align-content: center; padding: clamp(28px, 4vw, 56px); background: var(--c-white); }
.mw-roi-in .field input { min-height: 52px; padding: 12px 16px; font-size: 1.125rem; }
.mw-roi-out { display: flex; flex-direction: column; gap: 8px; padding: clamp(28px, 4vw, 56px); }
.mw-roi-big { margin: 6px 0 10px; font: 800 clamp(2.75rem, 7vw, 6rem)/0.95 var(--f-display); letter-spacing: -0.045em; color: #FFFFFF; }
.mw-risk { list-style: none; margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mw-risk li { padding-top: 18px; border-top: 2px solid var(--c-ink); }
.mw-risk b { display: block; margin-bottom: 6px; font: 800 1.25rem/1.15 var(--f-display); letter-spacing: -0.02em; }

@media (max-width: 960px) {
  .mw-hero-grid, .mw-case, .mw-roi { grid-template-columns: 1fr; }
  .mw-case ul { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mw-vs, .mw-risk { grid-template-columns: 1fr; }
  .mw-facts li { grid-template-columns: 1fr; }
  .mw-agent small { margin-left: 0; flex-basis: 100%; }
  .mw-msg, .mw-out { grid-template-columns: 1fr; }
  .mw-src { grid-row: auto; }
  .mock-table > div { grid-template-columns: minmax(0, 1fr) auto; }
  .mock-table > div > :nth-child(3), .mock-th > :nth-child(2) { display: none; }
  .mock-table > div > :nth-child(2) { display: none; }
}
/* Maatwerk: correcties na controle */
.mw-hero .h1 { font-size: clamp(2rem, 4vw, 4.25rem); }
.mw-facts li { grid-template-columns: 1fr; }
.mw-facts li .soft { max-width: 44ch; }
.mw-roi-big { font-size: clamp(2.5rem, 5vw, 4.5rem); white-space: nowrap; }
.mock-table b { font: 700 1rem/1 var(--f-text); }
.mw-systems ul { font-size: clamp(1.125rem, 1.8vw, 1.625rem); }
.mw-tasks li { font-size: clamp(1rem, 1.3vw, 1.1875rem); }

/* Tarieven: donkere kop met prijsindex */
.tf-hero { padding-bottom: clamp(56px, 7vw, 96px); }
.tf-index { display: grid; gap: 12px; }
.tf-index a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 22px 24px; text-decoration: none; color: #FFFFFF; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.tf-index a:active { transform: scale(0.98); }
.tf-index .mw-src { grid-row: span 2; }
.tf-index b { font: 800 clamp(1.25rem, 2vw, 1.75rem)/1.05 var(--f-display); letter-spacing: -0.03em; }
.tf-amt { font-weight: 600; font-size: 1.0625rem; color: var(--c-deep-soft); }
.tf-amt small { font-size: inherit; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .tf-index a:hover { transform: translateY(-3px); background: var(--c-accent); border-color: var(--c-accent); } .tf-index a:hover .tf-amt, .tf-index a:hover .mw-src { color: #FFFFFF; } }
@media (prefers-reduced-motion: reduce) { .tf-index a, .tf-index a:hover { transform: none; } }
.tf-oa { align-items: center; }
.tf-oa-pts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.tf-oa-pts li { border-top-color: var(--c-accent); }
.tf-table { background: var(--c-white); padding: 0 clamp(16px, 3vw, 40px) 8px; }
.tf-table .price-table thead th { padding-top: 32px; }
.tf-table .price-table thead th:not(:first-child) { border-top: 4px solid var(--c-accent); }
.tf-table .price-table .yes::before { background: var(--c-accent); }
.mw-zzp .closer { align-items: center; }
#mkb-kop, #oa-kop { scroll-margin-top: 96px; }
@media (max-width: 720px) { .tf-oa-pts { grid-template-columns: 1fr; } .tf-index a { grid-template-columns: 1fr; } .tf-index .mw-src { grid-row: auto; } }

/* Home-hero: één hoofdactie, kleine route voor vakmensen */
.hero-cta { display: grid; gap: 12px; justify-items: start; margin-top: 36px; }
.hero-alt { margin-top: 10px; font-size: var(--fs-small); color: var(--hero-soft); }
.hero-alt .link { color: var(--hero-fg); font-weight: 600; }
/* Langere mkb-kop: twee regels op desktop, knoptekst op één regel op mobiel */
@media (min-width: 768px) { .hero-h { font-size: clamp(1.375rem, 3.05vw, 2.875rem); } }
.hero-cta .btn-lg { white-space: nowrap; }
@media (max-width: 480px) { .hero-cta .btn-lg { padding: 0 20px; font-size: 1rem; } .hero-h { font-size: clamp(1.25rem, 5.4vw, 1.5rem); } }

/* Fase 2: gespreksknop blijft zichtbaar op mobiel; thema-knop verhuist naar het menu op smalle schermen */
.cta-short, .panel-theme { display: none; }
@media (max-width: 1080px) {
  .nav-inner { gap: 12px; }
  .nav-inner > .btn.nav-cta { display: inline-flex; margin-left: 0; min-height: 44px; padding: 0 16px; }
  .nav-inner > .nav-cta ~ .nav-toggle { margin-left: 0; }
}
@media (max-width: 560px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .nav-inner > .theme-toggle { display: none; }
  .nav-inner > .btn.nav-cta { margin-left: auto; padding: 0 14px; }
  .nav-inner { gap: 10px; }
  .wordmark { font-size: 0.9375rem; gap: 8px; }
  .wordmark img { width: 22px; }
  .panel-theme { display: inline-grid; grid-template-columns: 18px auto; column-gap: 10px; width: auto; justify-content: start; place-items: center start; padding: 0 16px; }
  .panel-theme svg { grid-area: 1 / 1; }
  .panel-theme span { grid-area: 1 / 2; }
  .panel-theme { margin-top: 16px; min-height: 44px; height: auto; font-weight: 600; }
}

/* =====================================================================
   Fase 3: layout en typografie (impeccable layout + typeset)
   ===================================================================== */
/* Hiërarchie: de h1 is het grootste op het eerste scherm; h2 en klantnamen eronder */
:root { --fs-h2: clamp(1.5rem, 2.7vw, 2.5rem); }
@media (min-width: 768px) { .hero-h { font-size: clamp(1.5rem, 3.3vw, 3rem); } }
.case-big { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.closer .h2 { font-size: clamp(1.5rem, 4.2vw, 3.75rem); }
.split .h2, .faq .h2 { font-size: clamp(1.5rem, 2.5vw, 2.375rem); }

/* Zzp-route: één smalle rij, geen volle sectie */
.zzp-row { padding-block: clamp(32px, 4vw, 56px); }
.zzp-row .closer { align-items: center; }
.zzp-row-t { font: 600 var(--fs-h3)/1.25 var(--f-text); letter-spacing: -0.01em; }
@media (min-width: 901px) { .zzp-row .closer { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Hero zonder scrollverhaal (mobiel, geen WebGL): HUD heeft dan geen functie */
html:not(.gl) .hero .hud { display: none; }

/* Navigatie loopt niet over twee regels tussen 901 en 1100 px */
.nav-links a { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 1081px) { .nav-links { gap: 18px; } .nav-inner { gap: 20px; } } /* menu met Kennis: hamburger tot 1080px */

/* Afsluiter drukt op mobiel niet tegen de laatste FAQ-regel */

/* FAQ-kop blijft naast de lijst staan */
@media (min-width: 901px) { .faq > div:first-child { position: sticky; top: 112px; align-self: start; } }

/* Raakvlakken minimaal 44 px */
.wordmark { min-height: 44px; }
.footer a { min-height: 44px; }
.btn-sm { min-height: 44px; }

/* Geen nagemaakte vetgedrukte letter: Epilogue is geladen tot 600 */
b, strong { font-weight: 600; }
.mock-table b { font-weight: 600; }

/* Kleine HUD-tekst niet onder 11 px; leesbare maat voor stappen */
.voice-who .ph span { font-size: 11px; }
.step p { max-width: 36ch; }

/* Footer: bijtekst getint uit het aubergine in plaats van neutraal grijs */
.footer h2, .footer-base { color: var(--c-deep-soft); }
.footer-base { opacity: 0.85; }

/* Tarieven: kop past op twee regels */
.tf-hero .h1 { font-size: clamp(1.875rem, 3.6vw, 3.25rem); }
@media (max-width: 400px) { .tf-hero .h1 { font-size: 1.75rem; } }
/* K1 "Elke order, vanzelf verwerkt." is korter: de kop kan op mobiel weer groot */
@media (max-width: 767px) { .hero-h { font-size: clamp(1.5rem, 6.9vw, 2.25rem); } }
@media (max-width: 480px) { .hero-h { font-size: clamp(1.5rem, 6.9vw, 1.625rem); } }
@media (min-width: 768px) { .hero-h { font-size: clamp(1.75rem, 4vw, 3.75rem); } }

/* =====================================================================
   Fase 4: interactielaag (motion.js)
   ===================================================================== */
/* Secties schuiven over elkaar (alleen desktop met muis, zonder "minder beweging", zonder toetsenbord) */
:where(html.stack main > section) { background-color: var(--c-paper); }
html.stack-on main > section { position: sticky; }
.stack-dim { position: absolute; inset: 0; z-index: 5; background: #0C0D18; opacity: 0; pointer-events: none; }
html[data-theme="dark"] .stack-dim { background: #000; }

/* Elk bedieningselement: hover, focus en indrukken */
.link:active, .nav-links a:active, .crumbs a:active, .footer a:active { opacity: 0.7; }
.faq-list summary { transition: color 160ms ease; }
.faq-list summary:active { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover { color: var(--c-accent); }
  .footer a { transition: color 160ms ease; }
}
:focus-visible { outline-offset: 3px; }
a.case:focus-visible, .tf-index a:focus-visible { outline-offset: 4px; }

/* Kaarten: optillen bij hover, nooit alleen een kleurwissel */
@media (hover: hover) and (pointer: fine) {
}
@media (prefers-reduced-motion: reduce) {
}

/* Fase 5: de stagger van het binnenkomen blijft, ook als een hover-regel de transitie opnieuw zet */
.js-reveal [data-reveal].in:not(.settled) > :nth-child(2) { transition-delay: 50ms; }
.js-reveal [data-reveal].in:not(.settled) > :nth-child(3) { transition-delay: 100ms; }
.js-reveal [data-reveal].in:not(.settled) > :nth-child(n+4) { transition-delay: 150ms; }
@media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal].in:not(.settled) > * { transition-delay: 0ms; } }
/* Kop-masker na binnenkomst los, zodat letters aan de zijkant nooit worden afgesneden */
.js-reveal [data-reveal].settled > .h2, .js-reveal [data-reveal].settled > h2 { clip-path: none; }
/* 12: indrukken zichtbaar, ook als de muis erop staat */
.tf-index a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .tf-index a:hover:active { transform: translateY(-3px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .tf-index a:active, .tf-index a:hover:active { transform: none; opacity: 0.85; } }

/* Review-animations: bij "minder beweging" geen draaiende iconen; de staat blijft zichtbaar */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle .bars::before, .nav-toggle .bars::after, .faq summary .plus { transition: none; }
  @starting-style { .faq details[open] .answer { transform: none; } }
}
/* Fase 6: mobiele gespreksknop houdt een toegankelijke naam (volledige tekst voor schermlezers) */
@media (max-width: 560px) { .cta-full { display: inline; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Fase 6: donkere modus — paarse vlakken in het diepere merkpaars, zodat bijtekst ≥ 4,5:1 haalt (was 4,27:1) */
html[data-theme="dark"] .on-purple, html[data-theme="dark"] .price-card.on-purple, html[data-theme="dark"] .mw-vs .new, html[data-theme="dark"] .mw-agent { background: #6D28D9; }

/* Maatwerk: hoe de BUSW-agent werkt (stappen uit de echte agent, zonder cijfers) */
.mw-pipe { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 28px; border-top: 1px solid var(--c-rule); }
.mw-pipe figcaption { font: 600 var(--fs-h3)/1.25 var(--f-text); margin-bottom: 20px; }
.mw-pipe ol { list-style: none; counter-reset: pipe; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mw-pipe li { counter-increment: pipe; display: grid; align-content: start; gap: 6px; padding: 16px; background: var(--c-paper); border-top: 3px solid var(--c-accent); }
.mw-pipe li::before { content: counter(pipe); font: 800 1.5rem/1 var(--f-display); color: var(--c-accent); }
.mw-pipe li:nth-child(2) { border-top-color: var(--c-deep); }
.mw-pipe li:nth-child(2)::before { color: var(--c-ink); }
.mw-pipe b { font-weight: 600; }
.mw-pipe span { font-size: 0.9375rem; color: var(--c-ink-soft); line-height: 1.45; }
@media (max-width: 1100px) { .mw-pipe ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mw-pipe ol { grid-template-columns: 1fr; } }

/* Citaat van de klant in het bewijs (BUSW) */
.case-quote, .mw-quote { margin: 0; padding-left: 18px; border-left: 2px solid currentColor; max-width: 52ch; }
.case-quote p, .mw-quote p { font-size: 1.0625rem; line-height: 1.5; }
.case-quote cite, .mw-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: var(--fs-small); }
.on-deep .case-quote { border-left-color: var(--c-accent-hi); }
.mw-quote { margin-top: 24px; border-left-color: var(--c-accent); }

/* Maatwerk: BUSW als tweede, ander proces (niet het bewijs voor de orders erboven) */
.mw-case-kop { margin-top: clamp(48px, 6vw, 80px); font: 600 var(--fs-h3)/1.25 var(--f-text); letter-spacing: -0.01em; }
.mw-case-kop + .mw-case { margin-top: 16px; }
/* Tarieven: kleine route voor vakmensen onder de mkb-afsluiter */
.closer-alt { flex-basis: 100%; }
.closer-alt .link { color: inherit; font-weight: 600; }

/* Cases vouwen in elkaar bij scrollen (alle schermen; op desktop krimpt de kaart eronder ook) */
.cases > li { position: sticky; top: calc(84px + var(--i, 0) * 16px); }
.cases > li:nth-child(1) { --i: 0; }
.cases > li:nth-child(2) { --i: 1; }
.cases > li:nth-child(3) { --i: 2; }
.case-dim { z-index: 3; }
html.kbd .cases > li, html.measuring .cases > li { position: static; }
@media (prefers-reduced-motion: reduce) { .cases > li { position: static; } }

/* Home = Offerte-automaat: vier pijnpunten in twee kolommen */
.pile-4 .pile-item { grid-column: span 6; }
/* Maatwerk-kop "Elke order, vanzelf verwerkt." past op twee regels naast het procesbeeld */
.mw-hero:not(.tf-hero) .h1 { font-size: clamp(1.5rem, 3.1vw, 2.875rem); }

/* =====================================================================
   Fase 8: verrijking (beeld en product in de bestaande secties)
   ===================================================================== */
/* H1 — case-kaart met beeld en drie echte feiten */
a.case.case-rich { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: center; }
.case-body { display: grid; gap: 16px; min-width: 0; }
.case-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); max-width: 640px; }
.case-facts dt { font: 500 var(--fs-hud)/1.2 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; }
.on-purple .case-facts dt, .on-purple .case-shot figcaption { color: var(--c-on-purple-soft); }
.case-facts dd { margin: 6px 0 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.case-shot { margin: 0; width: clamp(170px, 17vw, 230px); }
.case-shot img { display: block; width: 100%; aspect-ratio: 300 / 430; object-fit: cover; object-position: top; border: 6px solid #0C0D18; border-radius: 22px; background: #0C0D18; }
.case-shot figcaption { margin-top: 10px; font-size: 0.8125rem; line-height: 1.4; }
@media (max-width: 720px) {
  a.case.case-rich { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: 1fr; gap: 10px; }
  .case-shot { width: 200px; }
}

/* H2 — drie voorbeeldschermen van het product (geen echte gegevens) */
.oa-mocks { margin-top: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.oa-mock { margin: 0; display: grid; gap: 14px; align-content: center; padding: clamp(20px, 2.5vw, 32px); background: var(--c-lilac); }
.oa-mock figcaption { font-size: 0.9375rem; line-height: 1.45; color: var(--c-ink-soft); }
.oa-mock figcaption b { color: var(--c-ink); font-weight: 600; }
.oa-phone, .oa-mail { background: var(--c-white); color: var(--c-ink); font-size: 0.875rem; line-height: 1.35; }
.oa-phone { width: min(100%, 250px); justify-self: center; padding: 18px 14px 16px; border: 6px solid #0C0D18; border-radius: 26px; display: grid; gap: 10px; }
.oa-phone-t { font: 800 1.0625rem/1.1 var(--f-display); letter-spacing: -0.02em; }
.oa-field { display: flex; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--c-rule); }
.oa-chev { color: var(--c-ink-soft); }
.oa-result { display: grid; gap: 4px; padding: 12px; background: var(--c-deep); color: #FFFFFF; }
.oa-result span { font-size: 0.75rem; color: var(--c-deep-soft); }
.oa-result b { font: 800 1.375rem/1 var(--f-display); letter-spacing: -0.03em; }
.oa-fake-btn { padding: 11px 12px; background: var(--c-accent); color: #FFFFFF; font-weight: 600; text-align: center; }
.oa-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--c-rule); }
.oa-total { border-bottom: 0; font-weight: 600; }
.oa-mail { padding: 16px 18px; border: 1px solid var(--c-rule); display: grid; gap: 8px; width: 100%; max-width: 380px; justify-self: center; }
.oa-mail-from { font-size: 0.75rem; color: var(--c-ink-soft); }
.oa-mail-t { font-weight: 600; font-size: 0.9375rem; }
.oa-mail-dl { display: grid; gap: 0; margin: 0; }
.oa-mail-dl div { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--c-rule); }
.oa-mail-dl dt { color: var(--c-ink-soft); }
.oa-mail-dl dd { margin: 0; font-weight: 600; }
.oa-attach { justify-self: start; padding: 5px 10px; background: var(--c-lilac); font-weight: 600; font-size: 0.8125rem; }
.oa-mocks-note { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--c-ink-soft); }
html[data-theme="dark"] .oa-phone { border-color: #3a3d55; }
@media (max-width: 900px) { .oa-mocks { grid-template-columns: 1fr; } .oa-mock { grid-template-columns: minmax(0, 1fr); } }

/* Fase 8 stap 3 — "Je krijgt …" per stap, labels en feitenrijen */
.step-get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-weight: 600; }
.step-get > span { font: 500 var(--fs-hud)/1.2 var(--f-hud); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent); }
.on-deep .step-get { color: #FFFFFF; }
.on-deep .step-get > span { color: var(--c-accent-hi); }
.flow .step-get { display: flex; margin-top: 10px; padding-top: 10px; font-size: 0.9375rem; color: var(--c-ink); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 18px; font-size: 0.875rem; color: var(--c-ink-soft); }
.mw-case .case-tag { border-color: var(--c-ink); color: var(--c-ink); }
.mw-facts-row { grid-column: 1 / -1; margin-top: 0; max-width: none; color: var(--c-ink); }
.mw-facts-row dt { color: var(--c-ink-soft); }
.tf-tag { display: inline-block; margin-bottom: 10px; }
.tf-mock { margin-top: 32px; max-width: 320px; }

/* Home na ontdubbelen (14 okt 2026): alleen "Met", en garanties naast de rekenhulp */
.ps.ps-solo { grid-template-columns: 1fr; }
@media (min-width: 900px) { .ps-solo ul { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); } }
.offer.offer-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .offer.offer-duo { grid-template-columns: 1fr; } }
html[data-theme="dark"] .step-get > span { color: var(--c-accent-hi); }
/* Coördinaten van Powerfly (Rotterdam) in de hero: paars */
.hero .hud-tr { color: var(--c-accent); }
html[data-theme="dark"] .hero .hud-tr { color: var(--c-accent-hi); }

/* JFT-kaart, gesplitst (14 okt 2026): tekst op wit, paars alleen als podium voor de prijstool */
a.case.case-split { background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-rule); padding: 0; grid-template-columns: minmax(0, 1fr) minmax(300px, 34%); gap: 0; align-items: stretch; }
.case-split .case-body { padding: clamp(28px, 3.5vw, 48px); align-content: center; }
.case-split .case-line { color: var(--c-ink-soft); }
.case-split .case-quote { border-left-color: var(--c-accent); }
.case-split .case-facts dt { color: var(--c-accent); }
.case-split .case-shot { width: auto; background: var(--c-accent); color: #FFFFFF; display: grid; justify-items: center; align-content: center; padding: clamp(32px, 4vw, 48px) 32px clamp(64px, 6vw, 88px); }
.case-split .case-shot img { width: clamp(170px, 14vw, 210px); }
.case-split .case-shot figcaption { max-width: 210px; color: var(--c-on-purple-soft); }
.case-split .case-go { color: #FFFFFF; }
html[data-theme="dark"] .case-split .case-quote { border-left-color: var(--c-accent-hi); }
html[data-theme="dark"] .case-split .case-facts dt { color: var(--c-accent-hi); }
@media (max-width: 720px) {
  a.case.case-split { grid-template-columns: 1fr; }
  .case-split .case-shot { padding: 32px 24px 72px; }
}
/* Garanties naast de rekenhulp: niet uitrekken tot de hoogte van de rekenhulp */

html[data-theme="dark"] .case-split .case-shot figcaption { color: #FFFFFF; }
@media (min-width: 901px) { .oa-mock figcaption { text-align: center; } }

/* Foto's (14 okt 2026): echte gezichten in plaats van vlakken */
.hero-face { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; line-height: 1.35; color: var(--hero-soft); }
.hero-face b { color: var(--hero-fg); font-weight: 600; }
.hero-face img, .case-quote cite img { flex: none; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-rule); }
.hero-face img { width: 48px; height: 48px; }
.case-quote cite { display: flex; align-items: center; gap: 10px; }
.case-quote cite img { width: 40px; height: 40px; }
.pijn-head { display: grid; gap: 28px; }
@media (min-width: 901px) { .pijn-head { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: end; gap: clamp(32px, 5vw, 72px); } }
.pijn-foto { margin: 0; }
.pijn-foto img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 893; object-fit: cover; background: var(--c-paper-3); }
.pijn-foto figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--c-ink-soft); }
.person-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 28px; background: #CDCDCD; }

/* Lage laptopschermen: het bonnetje (met totaal en stempel) moet altijd helemaal in beeld passen */
@media (min-width: 901px) and (max-height: 760px) {
  html.gl .stage { padding-top: calc(72px + 28px); padding-bottom: 40px; }
}
@media (min-width: 901px) and (max-height: 640px) { .doc { transform: scale(0.84); transform-origin: 100% 50%; } }
@media (min-width: 901px) and (max-height: 560px) { .doc { transform: scale(0.72); } }

/* Gezicht direct naast de hoofdknop: wie je appt, zie je meteen */
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
@media (min-width: 901px) and (max-height: 600px) { .hero-h { font-size: clamp(2.25rem, 4.6vw, 3.5rem); } .hero-copy .lead { font-size: 1.0625rem; } .hero-cta { margin-top: 24px; } }
/* Ravi's gezicht naast de andere WhatsApp-knoppen op de home: alleen het bolletje, geen tekst */
.cta-face { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--c-rule); }
.on-purple .cta-face { border-color: rgba(255, 255, 255, 0.5); }
.offer-track .actions, .risk-cta .actions, .cta-with-face { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
@media (max-width: 600px) {
  .offer-track .actions, .risk-cta .actions, .cta-with-face { flex-direction: column; align-items: flex-start; gap: 12px; }
  .offer-track .actions .cta-face, .risk-cta .actions .cta-face, .cta-with-face .cta-face { order: -1; }
}

/* Kennisartikelen, overzicht en 404 (plan 013). Alleen nieuwe klassen: bestaande pagina's veranderen niet. */
.kennis-titel { max-width: none; }
@media (min-width: 768px) { .kennis-titel { max-width: 32ch; } }
.kennis-meta { margin-top: 20px; font-size: var(--fs-small); }
.kennis-sectie { padding-top: clamp(48px, 6vw, 88px); }
.kennis-tekst { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.65; }
.kennis-tekst p + p, .kennis-tekst p + h2, .kennis-tekst h2 + p { margin-top: 1.1em; }
.kennis-tekst h2 { font: 800 clamp(1.125rem, 1.6vw, 1.4rem)/1.15 var(--f-display); letter-spacing: -0.03em; margin-top: 1.8em; }
.kennis-tekst strong { font-weight: 600; }
.kennis-auteur { display: flex; gap: 16px; align-items: flex-start; max-width: var(--measure); margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--c-paper-3); line-height: 1.5; }
.kennis-auteur img { border-radius: 50%; flex: none; }
.kennis-verder { margin-top: 24px; }
.kennis-lijst { list-style: none; display: grid; gap: 4px; max-width: var(--measure); font-size: var(--fs-lead); }
.kennis-lijst a { display: inline-flex; min-height: 44px; align-items: center; }
.kennis-lijst li + li { margin-top: 12px; }
.kennis-lijst-meta { display: inline-block; font-size: var(--fs-small); line-height: 1.5; }
/* Kennisartikelen met tabellen en lijsten (prijsindex, plan 014) */
.kennis-tekst ul, .kennis-tekst ol { margin-top: 1.1em; padding-left: 1.2em; display: grid; gap: 0.6em; }
.kennis-tekst h2 + ul, .kennis-tekst ul + p, .kennis-tekst ul + h2, .kennis-tekst h2 + ol, .kennis-tekst ol + p, .kennis-tekst ol + h2 { margin-top: 1.1em; }
/* Deelknoppen onder elk kennisartikel (21 okt 2026) */
.kennis-delen { display: flex; align-items: center; gap: 8px; max-width: var(--measure); margin-top: clamp(32px, 4vw, 48px); font-size: var(--fs-small); }
.kennis-delen .soft { margin-right: 4px; }
.deel-knop { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--c-paper-3); border-radius: 50%; color: var(--c-ink); transition: color 160ms ease, border-color 160ms ease; }
.deel-knop:hover, .deel-knop:focus-visible { color: var(--c-accent); border-color: var(--c-accent); }
html[data-theme="dark"] .deel-knop:hover, html[data-theme="dark"] .deel-knop:focus-visible { color: var(--c-accent-hi); border-color: var(--c-accent-hi); }
.kennis-delen + .kennis-auteur { margin-top: 24px; }
.kennis-tabel-wrap { margin-top: 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kennis-tabel { width: 100%; min-width: 20rem; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.kennis-tabel caption { text-align: left; caption-side: top; padding-bottom: 10px; color: var(--c-ink-soft); }
.kennis-tabel th, .kennis-tabel td { padding: 10px 12px 10px 0; text-align: left; border-bottom: 1px solid var(--c-rule); vertical-align: top; }
.kennis-tabel thead th { font-weight: 600; border-bottom: 2px solid var(--c-ink); }
.kennis-tabel tbody th { font-weight: 500; }
.kennis-tabel td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.kennis-tabel td:last-child { text-align: right; padding-right: 0; }
.kennis-tabel thead th:last-child { text-align: right; padding-right: 0; }
.kennis-noot { font-size: var(--fs-small); color: var(--c-ink-soft); }
.kennis-tabel-wrap + p { margin-top: 1em; }
/* Prijscheck (plan 015) */
.prijscheck { display: grid; gap: 14px; margin-top: 1.2em; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--c-rule); background: var(--c-paper); }
.prijscheck[hidden] { display: none; }
.prijscheck label { display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 500; }
.prijscheck select, .prijscheck input { min-height: 48px; padding: 0 12px; border: 1px solid var(--c-rule); border-radius: 0; background: var(--c-white); color: var(--c-ink); font: inherit; font-size: 1rem; }
.prijscheck .btn { justify-self: start; }
.prijscheck-uitkomst { font-weight: 600; min-height: 1.5em; margin: 0; }
.prijscheck-uitkomst:empty { min-height: 0; }
.prijscheck-wa { margin: 0; }

/* =====================================================================
   Raster (14 okt 2026): één verdeling voor de hele site.
   Elke tweekolomsindeling is 1fr 1fr met dezelfde tussenruimte, zodat de rechterkolom
   op elke pagina op dezelfde lijn begint. Knoppen in afsluiters staan onder de tekst, op de linkerlijn.
   ===================================================================== */
:root { --g: clamp(16px, 2vw, 24px); }
@media (min-width: 901px) {
  .faq, .split, .proof, .contact, .calc, .mw-hero-grid, .compare, .mw-vs, .mw-roi, .offer.offer-duo, .oa-mocks, .pijn-head,
  .people, .controls, .get, .tf-oa-pts, .ps:not(.ps-solo), .oa-grid, .zzp-row .closer {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g);
  }
  .pijn-head { align-items: start; }
}
.offer, .ps, .oa-mocks, .compare, .mw-vs, .mw-roi, .mw-risk { gap: var(--g); }
.closer-side { flex-direction: column; align-items: flex-start; gap: 20px; }
/* Driekoloms-rijen op hetzelfde raster: kolommen beginnen overal op dezelfde lijnen */
@media (min-width: 901px) {
  .steps, .principles, .terms, .guarantees, .mw-risk, .facts { column-gap: var(--g); }
  .step, .step + .step { padding: 24px 0 0; box-shadow: inset 0 1px 0 rgba(244, 243, 240, 0.14); }
}
.closer-alt { flex-basis: auto; }

/* Garanties en rekenhulp: twee gelijke witte blokken; de knop staat onderin, direct onder de garanties */
.offer.offer-duo > div, .offer.offer-duo > .roi { display: flex; flex-direction: column; background: var(--c-white); padding: clamp(24px, 3vw, 36px); }
.risk-cta { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }
.offer.offer-duo > .roi { display: grid; align-content: start; }
/* Smalle telefoons: logo, knop en menu passen naast elkaar met lucht ertussen */
@media (max-width: 420px) {
  .wordmark { font-size: 0.8125rem; gap: 7px; }
  .wordmark img { width: 20px; }
  .nav-inner > .btn.nav-cta { padding: 0 12px; gap: 8px; }
  .nav-inner { gap: 8px; }
}
@media (max-width: 420px) {
  .wordmark, .nav-inner > .btn.nav-cta, .nav-toggle { flex-shrink: 0; }
  .nav-inner > .btn.nav-cta { font-size: 0.875rem; padding: 0 10px; }
  .nav-toggle { width: 44px; }
}
/* Heel smal: alleen de vlieg als logo (de naam blijft voor schermlezers in de link staan) */
@media (max-width: 374px) { .wordmark { font-size: 0; gap: 0; } .wordmark img { width: 24px; } }
/* Velden en blokken mogen smaller worden dan hun standaardbreedte (kleinste telefoons) */
.mw-roi > *, .calc > *, .offer > *, .field, .field input, .field select, .field textarea { min-width: 0; }
@media (max-width: 359px) { .hero-cta .btn-lg { white-space: normal; text-align: left; } }
@media (max-width: 374px) { .track-head .svc-t { font-size: 1.25rem; } }

/* Tarieven: tabel op brede schermen, pakketkaarten op telefoon en tablet (niets buiten het kader, niet opzij scrollen) */
.tf-cards { display: none; }
@media (max-width: 900px) {
  .price-table-wrap.tf-table { display: none; }
  .tf-cards { display: grid; gap: var(--g); margin-top: clamp(32px, 5vw, 48px); }
  .tf-card { background: var(--c-white); padding: 24px 20px; border-top: 4px solid var(--c-accent); display: grid; gap: 6px; }
  .tf-card .case-tag { justify-self: start; margin-bottom: 8px; }
  .tf-card .price-name { font: 600 1.125rem/1.25 var(--f-text); }
  .tf-card .price-amount { font: 800 2rem/1 var(--f-display); letter-spacing: -0.03em; margin-top: 4px; }
  .tf-card .price-sub { color: var(--c-ink-soft); font-size: var(--fs-small); }
  .tf-card dl { margin: 14px 0 0; display: grid; }
  .tf-card dl > div { padding: 12px 0; border-top: 1px solid var(--c-rule); display: grid; gap: 2px; }
  .tf-card dt { font-size: 0.8125rem; color: var(--c-ink-soft); }
  .tf-card dd { margin: 0; font-weight: 500; }
  .tf-card dd.yes::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--c-accent); vertical-align: 1px; }
  .tf-card dd.no { color: var(--c-ink-soft); font-weight: 400; }
  .tf-cards > p { margin-top: 8px; }
}
/* Quick Scan (Maatwerk): op smalle schermen staat de tweede zin van de kop in de introtekst-stijl, zodat de kop op twee regels blijft */
@media (max-width: 600px) { .qs-sub { display: block; margin-top: 12px; font: 400 var(--fs-lead)/1.45 var(--f-text); letter-spacing: 0; } }
@media (max-width: 400px) { .page-head .h1 { font-size: 1.625rem; } }
@media (hover: hover) and (pointer: fine) { .nav-links a[aria-current="page"]:hover { text-decoration-color: var(--c-accent); color: var(--c-accent); } }
.direct-item > a.link { display: inline-flex; align-items: center; min-height: 44px; }
/* Grote bedragen in de rekenhulpen schalen mee met hun vak (container query), zodat ze er nooit uit lopen */
.roi-out, .mw-roi-out { container-type: inline-size; }
.roi-big { font-size: clamp(1.5rem, 13cqi, 2.5rem); overflow-wrap: anywhere; }
.mw-roi-big { font-size: clamp(1.75rem, 11cqi, 4.5rem); white-space: normal; overflow-wrap: anywhere; }
/* Lange (bedrijfs)namen in de grote kop van een case: afbreken in plaats van uit de kaart lopen */
.case-big { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) { .kennis-titel { font-size: 1.375rem; } }
@media (max-width: 400px) { .kennis-titel { font-size: 1.25rem; } }

/* Home: drie twijfels (23 okt 2026) */
.twijfels > div { display: flex; flex-direction: column; gap: 12px; }
.twijfel-t { font: 800 clamp(1.25rem, 1.7vw, 1.5rem)/1.1 var(--f-display); letter-spacing: -0.03em; }