/* ═══ fonts: self-hosted woff2 (geen Google-request — GDPR-reviewpunt) ═══ */
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/space-grotesk-var-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:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/space-grotesk-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/space-mono-400-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:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/space-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ═══ Nova Neba — design tokens (bron: Claude Design project) ═══
   V5 (PRO-redactiepass): natuurlijke sectiehoogtes, content-surfaces als
   leeslaag, grotere body-typografie, minder typografische niveaus. */
:root{
  --deep-navy:#0A0F1A;
  --steel:#16233B;
  --titanium:#E6E9EF;
  --electric:#3DA6FF;   /* cobalt glow */
  --violet:#8A7BFF;     /* soft violet */
  --horizon-gold:#E8B583;
  --warm-white:#F6F3ED;
  --graphite:#10192B;
  --ai-glow:linear-gradient(100deg,var(--electric) 0%,var(--violet) 100%);
  --radius:20px;
  --max-w:1200px;
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  /* thema-variabelen (nacht-default; .theme-day overschrijft) */
  --ink:var(--titanium);
  --ink-soft:rgba(230,233,239,.87);
  --ink-faint:rgba(230,233,239,.74);
  --line:rgba(230,233,239,.12);
  --line-strong:rgba(230,233,239,.30);
  --surface:rgba(13,20,36,.55);
  --surface-2:rgba(22,35,59,.55);
  --nav-bg:rgba(10,15,26,.42);
  --kicker:#8FC6FF;
}
body.theme-day{
  --ink:var(--graphite);
  --ink-soft:rgba(16,25,43,.88);
  --ink-faint:rgba(16,25,43,.78);
  --line:rgba(94,66,32,.15);
  --line-strong:rgba(94,66,32,.30);
  --surface:rgba(255,255,255,.52);
  --surface-2:rgba(255,255,255,.62);
  --nav-bg:rgba(246,243,237,.5);
  --kicker:#135F9E; /* gemeten ~5.9:1 op warm wit */
  background:var(--warm-white);
}
/* dag-helft (18-07): horizon-gold als warme signatuur — selectie, actieve
   navlijn en het footer-merk kleuren mee met het daglicht */
::selection{background:rgba(61,166,255,.30)}
body.theme-day ::selection{background:rgba(232,181,131,.45)}
body.theme-day .nav-links a.active::after{background:var(--horizon-gold)}
body.theme-day .footer-mark{color:#C08A52}
body.theme-day .cf-lbl,body.theme-day .role-for{color:#8C5A25}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* vangnet tegen zijwaarts pannen op mobiel (iOS): de pagina scrollt nooit
   bewust horizontaal; clip (niet hidden) laat position:sticky intact */
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--deep-navy);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:color .6s ease;
}

/* ═══ scène-canvas + filmkorrel (anti-banding, subtiel) ═══ */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  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%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.07;
  mix-blend-mode:overlay;
}

/* ═══ skip-link ═══ */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:40;transform:translateY(-250%);
  background:var(--deep-navy);color:var(--titanium);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:12px 18px;font-size:14px;text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{transform:none}

/* ═══ navigatie ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px clamp(20px,4vw,44px);
  background:var(--nav-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .6s ease,border-color .6s ease;
}
/* ═══ vluchtvoortgang: dunne route-lijn onder de nav (18-07) ═══ */
.nav-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  pointer-events:none;
}
.nav-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--electric),var(--violet) 55%,var(--horizon-gold));
  transition:width .15s linear;
}

/* ═══ vluchtfase-readout: klein instrument linksonder (desktop) ═══ */
.flight-status{
  position:fixed;left:clamp(20px,4vw,44px);bottom:26px;z-index:5;
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
  transition:color .6s ease;
}
.fs-phase{display:none}
body[data-phase="night"] .fs-phase[data-phase="night"],
body[data-phase="dawn"] .fs-phase[data-phase="dawn"],
body[data-phase="rise"] .fs-phase[data-phase="rise"],
body[data-phase="day"] .fs-phase[data-phase="day"],
body[data-phase="land"] .fs-phase[data-phase="land"]{display:inline}
body:not([data-phase]) .fs-phase[data-phase="night"]{display:inline}
@media (max-width:960px){.flight-status{display:none}}
html.nn-step .flight-status{display:flex}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);padding:8px 0}
.brand-mark{width:44px;height:auto;flex:none}
.brand-word{font-family:var(--font-display);font-weight:330;font-size:14.5px;letter-spacing:.46em;margin-right:-.46em}
.nav-links{display:flex;gap:clamp(16px,2.6vw,30px)}
.nav-links a{
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;letter-spacing:.02em;
  white-space:nowrap;transition:color .25s ease;
  position:relative;display:inline-block;padding:14px 6px;margin:-14px -6px;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:"";position:absolute;left:6px;right:6px;bottom:9px;height:1px;background:var(--electric);
}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-toggle{
  display:flex;align-items:baseline;gap:7px;
  font:inherit;font-size:13px;letter-spacing:.12em;color:var(--ink);
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:11px 18px;cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.lang-toggle .lt-opt{color:var(--ink-faint);transition:color .25s ease}
.lang-toggle .lt-opt.on{color:var(--ink)}
.lang-toggle .lt-sep{color:var(--ink-faint);opacity:.5}
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:var(--electric)}
/* hamburger: alleen compact zichtbaar */
.menu-toggle{
  display:none;width:48px;height:48px;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;
}
.menu-bar{display:block;width:18px;height:1.6px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
.nav.open .menu-bar:first-child{transform:translateY(4.3px) rotate(45deg)}
.nav.open .menu-bar:last-child{transform:translateY(-4.3px) rotate(-45deg)}

/* ═══ panelen: hero/contact = volle viewport, hoofdstukken = natuurlijke hoogte ═══ */
main{position:relative;z-index:2}
.panel{padding:0 clamp(20px,5vw,48px)}
.hero,.hero-like{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  padding-top:110px;padding-bottom:90px;
  position:relative;
}
.chapter{padding-top:clamp(84px,11vh,140px);padding-bottom:clamp(84px,11vh,140px)}
/* contact = gecentreerde landing in élke fallback-lay-out (reduced motion,
   no-JS, no-canvas); de fly-media-regel hieronder overschrijft dit op desktop */
#contact.chapter{min-height:100svh;display:flex;align-items:center}
/* native ankersprongen (no-JS): niet onder de vaste nav landen */
section[id]{scroll-margin-top:96px}
.panel-inner{width:100%;max-width:var(--max-w);margin:0 auto}
.panel-inner.narrow{max-width:820px}
.panel-inner.center{text-align:center}

/* ═══ typografie: 4 niveaus (headline · lead · kop · body) ═══ */
.kicker{
  color:var(--kicker);font-family:var(--font-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px;
  display:flex;align-items:baseline;gap:12px;
}
/* waypoint-index (18-07): elke sectie is een genummerd waypoint op de route;
   horizon-gold wijst vooruit naar de bestemming */
.k-idx{
  font-style:normal;color:var(--horizon-gold);
  letter-spacing:.14em;flex:none;
}
.k-idx::after{content:"";display:inline-block;width:22px;height:1px;background:var(--line-strong);vertical-align:middle;margin-left:12px}
body.theme-day .k-idx{color:#8C5A25}
.center .kicker{justify-content:center}
h1{
  font-family:var(--font-display);font-size:clamp(52px,7vw,96px);
  line-height:.98;letter-spacing:-.01em;font-weight:300;margin:10px 0 26px;
}
h1 em{
  font-style:normal;font-weight:500;
  background:var(--ai-glow);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
h2{
  font-family:var(--font-display);font-size:clamp(32px,4vw,52px);
  line-height:1.08;letter-spacing:-.015em;font-weight:300;margin:10px 0 20px;max-width:760px;
}
.center h2{margin-left:auto;margin-right:auto}
h3{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:-.01em;margin:0 0 8px}
.lead{
  max-width:620px;color:var(--ink-soft);
  font-size:clamp(18px,1.5vw,21px);line-height:1.6;margin:0 0 14px;
}
.center .lead{margin-left:auto;margin-right:auto}
.footnote{color:var(--ink-faint);font-size:14.5px;margin-top:28px}
.contact-email{
  margin:22px 0 0;font-family:var(--font-mono);font-size:13px;
  letter-spacing:.10em;color:var(--ink-soft);user-select:all;
}
.aside{
  margin:34px 0 0;padding-left:20px;border-left:2px solid var(--horizon-gold);
  color:var(--ink);max-width:560px;font-size:17px;
}
.hero-support{
  margin:20px 0 0;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
.sig-close{margin-top:30px}

/* ═══ content-surface: leeslaag boven de vluchthemel ═══ */
.surface{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .6s ease,border-color .6s ease;
}
.surface2{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:12px;
}

/* ═══ knoppen + tekstlink ═══ */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:34px}
.actions.center{justify-content:center}
.button{
  display:inline-block;padding:15px 26px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line-strong);color:var(--ink);font-size:15.5px;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.button:hover,.button:focus-visible{border-color:var(--electric);transform:translateY(-1px)}
.button.primary{
  background:var(--ai-glow);border:none;color:#06101E;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(61,166,255,.30),0 10px 34px rgba(61,166,255,.26);
}
.button.primary:hover,.button.primary:focus-visible{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 30px rgba(61,166,255,.35),0 0 0 1px rgba(61,166,255,.4);
}
.button.large{font-size:17px;padding:17px 32px}
.text-link{
  color:var(--ink);text-decoration:none;font-size:15.5px;
  padding:14px 4px;margin:-14px -4px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
.text-link:hover,.text-link:focus-visible{border-bottom-color:var(--electric)}

/* ═══ scroll-cue ═══ */
.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--ink-soft);font-size:12px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.cue-line{
  width:1px;height:44px;
  background:linear-gradient(180deg,var(--electric),transparent);
  animation:cueDrift 2.6s ease-in-out infinite;
}
@keyframes cueDrift{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(8px);opacity:.4}}
/* lage viewports: de cue zou over de support-regel schuiven */
@media (max-height:660px){.scroll-cue{display:none}}

/* ═══ 01 · pijnkaarten + formule ═══ */
.pain-grid{
  margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px clamp(16px,2vw,24px);max-width:940px;
}
.pain{padding:22px 24px}
.pain p{margin:0;font-size:17px;line-height:1.55;color:var(--ink)}
/* de formule als GROOT moment (18-07): dit is het scharnier van het verhaal */
.formula{margin-top:34px;padding:28px clamp(24px,3.2vw,42px);max-width:100%}
.formula-line{
  margin:0;font-family:var(--font-mono);font-weight:700;font-size:clamp(16px,1.8vw,23px);
  letter-spacing:.03em;line-height:1.5;color:var(--ink);
}
.formula .footnote{margin-top:10px}

/* ═══ 02 · grote route ═══ */
.route{margin-top:38px;padding:10px clamp(20px,3vw,34px);max-width:820px}
.route-step{
  display:flex;align-items:flex-start;gap:20px;
  padding:20px 0;position:relative;
}
.route-step + .route-step{border-top:1px solid var(--line)}
.route-num{
  flex:none;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:14px;color:var(--ink);
  border:1px solid var(--line-strong);
  background:var(--surface-2);
}
.route-step.check .route-num{border-color:var(--electric)}
.route-step.released .route-num{border-color:rgba(85,201,154,.55)}
.route-step h3{margin:5px 0 4px;font-size:19px}
.route-step p{margin:0;color:var(--ink-soft);font-size:16px}
.roles{
  list-style:none;margin:34px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px clamp(16px,2vw,24px);max-width:1040px;
}
.roles li{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.55;color:var(--ink);padding:20px 22px}
.role-for{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kicker);
}
.role-strong{font-weight:600;margin-top:2px}

/* ═══ 03 · cases: tekst | interface, afwisselend ═══ */
.case{
  margin-top:clamp(56px,8vh,88px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
/* afwisseling: op flip-cases staat het interface-paneel links (panel r1 V5:
   de selector ontbrak, waardoor alle cases dezelfde kant hielden) */
.case.flip .case-text{order:2}
.case-text > * + *{margin-top:14px}
.case-tag{
  display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#55C99A;border:1px solid rgba(85,201,154,.35);
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.case-text h3{font-size:clamp(24px,2.2vw,30px);font-weight:500;margin:12px 0 0;letter-spacing:-.015em}
.case-sub{margin:4px 0 0;color:var(--ink-soft);font-size:16px}
.cf-lbl{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--kicker);margin-bottom:3px;
}
.case-before,.case-human,.case-result{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-soft)}
.case-before span:last-child,.case-human span:last-child,.case-result span:last-child{color:var(--ink-soft)}
.case-steps{
  margin:6px 0 0;padding:0 0 0 2px;list-style:none;counter-reset:cs;
}
.case-steps li{
  counter-increment:cs;position:relative;padding:7px 0 7px 34px;
  font-size:16.5px;line-height:1.5;color:var(--ink);
}
.case-steps li::before{
  content:counter(cs);position:absolute;left:0;top:8px;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);
  border:1px solid var(--line-strong);
}
.case-note{
  font-style:italic;color:var(--ink);border-left:2px solid var(--horizon-gold);
  padding-left:12px;font-size:17px;
}
/* interface-paneel */
.case-ui{margin:0;padding:0;overflow:hidden}
.ui-chrome{
  display:flex;align-items:center;gap:7px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
.ui-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.ui-title{
  margin-left:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
}
.ui-search{
  margin:16px 18px 4px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:10px;
  font-size:14px;color:var(--ink-soft);
}
.ui-rows{list-style:none;margin:10px 0 0;padding:6px 0 6px}
.ui-rows li{
  display:flex;align-items:center;gap:11px;
  padding:11px 18px;font-size:14.5px;color:var(--ink-soft);
}
.ui-rows li + li{border-top:1px solid var(--line)}
.ui-rows li.ui-strong{color:var(--ink)}
.af-dot{width:7px;height:7px;border-radius:50%;flex:none}
.af-dot.ok{background:#55C99A}
.af-dot.ex{background:var(--horizon-gold)}
/* levende status-dots (18-07): zachte puls — het systeem "draait" */
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(85,201,154,.40)}50%{box-shadow:0 0 0 4px rgba(85,201,154,0)}}
.ui-rows .af-dot.ok{animation:dotPulse 3.2s ease-in-out infinite}
.ui-rows li:nth-child(2) .af-dot{animation-delay:.5s}
.ui-rows li:nth-child(3) .af-dot{animation-delay:1s}
.ui-rows li:nth-child(4) .af-dot{animation-delay:1.5s}
.ui-rows li:nth-child(5) .af-dot{animation-delay:2s}
/* rijen komen één voor één binnen zodra de case in beeld is: het paneel
   voelt als een systeem dat wérkt, niet als een statisch plaatje */
html.js .case.reveal .ui-rows li,
html.js .case.reveal .ui-search,
html.js .case.reveal .chain-node,
html.js .case.reveal .chain-verb{
  opacity:0;transform:translateY(10px);
  transition:opacity .55s cubic-bezier(.2,.6,.2,1),transform .55s cubic-bezier(.2,.6,.2,1);
}
html.js .case.reveal.in .ui-rows li,
html.js .case.reveal.in .ui-search,
html.js .case.reveal.in .chain-node,
html.js .case.reveal.in .chain-verb{opacity:1;transform:none}
html.js .case.reveal.in .ui-search{transition-delay:.20s}
html.js .case.reveal.in .ui-rows li:nth-child(1){transition-delay:.30s}
html.js .case.reveal.in .ui-rows li:nth-child(2){transition-delay:.44s}
html.js .case.reveal.in .ui-rows li:nth-child(3){transition-delay:.58s}
html.js .case.reveal.in .ui-rows li:nth-child(4){transition-delay:.72s}
html.js .case.reveal.in .ui-rows li:nth-child(5){transition-delay:.86s}
html.js .case.reveal.in .chain-node:nth-of-type(1){transition-delay:.30s}
html.js .case.reveal.in .chain-verb:nth-of-type(1){transition-delay:.48s}
html.js .case.reveal.in .chain-node:nth-of-type(2){transition-delay:.62s}
html.js .case.reveal.in .chain-verb:nth-of-type(2){transition-delay:.80s}
html.js .case.reveal.in .chain-node:nth-of-type(3){transition-delay:.94s}
.af-illu{
  margin:0;padding:12px 18px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint);
}
/* keten-blok in case 3 */
.chain-big{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 18px}
.chain-node{padding:12px 20px;font-size:15px;color:var(--ink);text-align:center}
.chain-node.released{border-color:rgba(85,201,154,.55)}
.chain-verb{
  margin:2px 0;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
/* proof/CTA-zone na de cases */
.proof-zone{
  margin-top:clamp(56px,8vh,88px);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px 32px;flex-wrap:wrap;padding:26px 30px;
}
.proof-zone p{margin:0;max-width:56ch;color:var(--ink-soft);font-size:16.5px}

/* ═══ 04 · controle-boom ═══ */
.tree{margin-top:38px;padding:26px clamp(20px,3vw,34px);max-width:860px}
.tree-node{
  display:inline-block;font-family:var(--font-mono);font-size:13px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink);
  border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px;
}
.tree-node.check{border-color:var(--electric)}
.tree-drop{margin:8px 0 8px 22px;color:var(--ink-faint);font-size:16px}
.tree-branches{margin-top:14px;display:flex;flex-direction:column;gap:12px;padding-left:22px;border-left:1px solid var(--line)}
.tree-branch{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tree-cond{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.10em;text-transform:uppercase;
  border:1px solid;border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.tree-cond.ok{border-color:rgba(85,201,154,.55);color:var(--ink)}
.tree-cond.ok::before{content:"✓ ";color:#55C99A}
.tree-cond.gate{border-color:var(--horizon-gold);color:var(--ink)}
.tree-arrow{color:var(--ink-faint)}
.tree-out{font-size:15.5px;color:var(--ink-soft)}
.tree-out.gate{color:var(--ink)}
.guarantees{
  list-style:none;margin:30px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;max-width:640px;
}
.guarantees li{display:flex;align-items:baseline;gap:12px;font-size:16.5px;color:var(--ink-soft)}
.guarantees .af-dot{position:relative;top:-2px}

/* ═══ 05 · aanpak 2×2 ═══ */
.steps-grid{
  margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px clamp(18px,2.4vw,28px);max-width:1000px;
  counter-reset:st;
}
.step{padding:26px 28px}
.step h3{font-size:20px}
.step h3::before{
  counter-increment:st;content:"0" counter(st);
  display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;
  letter-spacing:.18em;color:var(--horizon-gold);margin-bottom:10px;
}
body.theme-day .step h3::before{color:#8C5A25}
.step p{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.55}
.step-out{
  margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ═══ 06 · about op een surface (ligt op de felste dageraadshemel) ═══ */
.about-card{padding:clamp(28px,4vw,44px)}
.about-card .footnote{margin-top:22px}

/* ═══ 07 · faq accordion ═══ */
.faq-list{margin-top:34px;display:flex;flex-direction:column;gap:12px}
.fqa{padding:0}
.fqa summary{
  list-style:none;cursor:pointer;
  padding:18px 54px 18px 22px;position:relative;
  font-size:17px;font-weight:500;color:var(--ink);
  transition:color .25s ease;
}
.fqa summary:hover{color:var(--electric)}
body.theme-day .fqa summary:hover{color:#8C5A25}
.fqa summary::-webkit-details-marker{display:none}
.fqa summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .25s ease;
}
.fqa[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.fqa summary:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:var(--radius)}
.fqa p{margin:0;padding:0 22px 20px;color:var(--ink-soft);font-size:16.5px;line-height:1.6;max-width:62ch}

/* ═══ footer ═══ */
.footer{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:40px 20px 48px;color:var(--ink-soft);font-size:13px;
}
.footer-mark{width:52px;color:var(--ink-faint)}
.footer p{margin:0}
.footer-tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ═══ sectie-aankomst: zachte nadering vanaf de horizon (mobiel/tablet) ═══ */
html.js main .chapter{--appr:1}
html.js main .chapter .panel-inner{
  opacity:calc(.25 + .75*var(--appr,1));
  transform:translateY(calc((1 - var(--appr,1)) * 5vh));
  will-change:transform,opacity;
}

/* ═══ waypoint-stepper (V9, owner 18-07): desktop = één sectie per scherm.
   js/stepper.js zet html.nn-step, verschuift <main> per waypoint en klikt
   vast; binnen een te hoge sectie scrollt de leeszone eerst. Mobiel en
   no-JS houden de natuurlijke flow. ═══ */
html.nn-step,html.nn-step body{height:100%;overflow:hidden;overscroll-behavior:none}
html.nn-step main{
  transition:transform .85s cubic-bezier(.22,.65,.16,1);
  will-change:transform;
}
html.nn-step main .panel{
  height:100vh;height:100svh;min-height:0;
  padding-top:0;padding-bottom:0;display:block;overflow:hidden;
}
html.nn-step main .panel.hero{
  display:flex;padding:0 clamp(20px,5vw,48px);
  padding-top:96px;padding-bottom:60px;
}
html.nn-step main .panel .panel-sticky{
  height:100%;display:flex;
  overflow-y:auto;overflow-x:clip;
  padding:clamp(24px,4vh,70px) clamp(20px,5vw,48px);
  padding-top:max(clamp(24px,4vh,70px),92px);
}
html.nn-step main .panel.chapter{padding-left:0;padding-right:0}
html.nn-step main .panel .panel-inner{margin:auto}
/* aankomst: de sectie licht op en stijgt op zijn plek zodra hij vastklikt */
html.nn-step main .panel .panel-inner{
  opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .75s cubic-bezier(.2,.6,.2,1) .28s,transform .75s cubic-bezier(.2,.6,.2,1) .28s;
  will-change:transform,opacity;
}
html.nn-step main .panel.step-active .panel-inner{opacity:1;transform:none}
/* compactere typografie: élke sectie moet op één scherm passen */
html.nn-step main .panel h2{font-size:clamp(26px,2.8vw,40px);margin-bottom:14px}
html.nn-step main .panel .lead{font-size:clamp(16px,1.25vw,18.5px)}
html.nn-step main .panel .kicker{margin-bottom:12px}
html.nn-step main .panel .case-text h3{font-size:clamp(21px,1.8vw,26px)}
/* footer: compacte balk over het laatste waypoint */
html.nn-step .footer{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  flex-direction:row;align-items:center;justify-content:center;gap:18px;
  padding:14px 20px;
  opacity:0;pointer-events:none;transition:opacity .6s ease .4s;
}
html.nn-step .footer .footer-mark{width:30px}
html.nn-step .footer p{font-size:12px}
html.nn-step body[data-step-last="1"] .footer{opacity:1;pointer-events:auto}
/* laatste waypoint: leeszone vrijhouden van de vaste footer-balk (verifier
   18-07: overlap met de contact-mailregel op lage viewports; #contact-id
   zodat de compacte hoogte-tiers dit nooit overschrijven) */
html.nn-step main #contact .panel-sticky{padding-bottom:max(clamp(24px,4vh,70px),68px)}
@media (prefers-reduced-motion:reduce){
  html.nn-step main{transition:none}
  html.nn-step main .panel .panel-inner{opacity:1;transform:none;transition:none}
  html.nn-step main .panel .panel-inner > *{opacity:1 !important;transform:none !important;transition:none !important}
}
/* compact op korte desktop-schermen: elke pagina moet in de leeszone passen */
@media (min-width:641px) and (max-height:940px){
  html.js:not(.no-scene) main .panel.chapter .panel-sticky{padding-top:80px;padding-bottom:12px}
  html.js:not(.no-scene) main .panel.chapter h2{font-size:clamp(28px,3vw,40px);margin-bottom:12px}
  html.js:not(.no-scene) main .panel.chapter .kicker{margin-bottom:10px}
  html.js:not(.no-scene) main .panel.chapter .lead{font-size:17px;margin-bottom:10px}
  html.js:not(.no-scene) main .panel.chapter .sig-close{margin-top:16px}
  html.js:not(.no-scene) main .panel.chapter .footnote{margin-top:14px}
  html.js:not(.no-scene) main .panel.chapter .pain-grid{margin-top:22px;gap:12px 18px}
  html.js:not(.no-scene) main .panel.chapter .pain{padding:15px 20px}
  html.js:not(.no-scene) main .panel.chapter .pain p{font-size:16px}
  html.js:not(.no-scene) main .panel.chapter .formula{margin-top:16px;padding:15px 20px}
  html.js:not(.no-scene) main .panel.chapter .route{margin-top:12px}
  html.js:not(.no-scene) main .panel.chapter .route-step{padding:8px 0;gap:14px}
  html.js:not(.no-scene) main .panel.chapter .route-step h3{font-size:17.5px;margin:3px 0 2px}
  html.js:not(.no-scene) main .panel.chapter .route-step p{font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .route-num{width:32px;height:32px;font-size:12.5px}
  html.js:not(.no-scene) main .panel.chapter .aside{margin-top:10px;font-size:16px}
  html.js:not(.no-scene) main .panel.chapter .roles{margin-top:20px}
  html.js:not(.no-scene) main .panel.chapter .roles li{padding:15px 18px;font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .case{margin-top:8px;gap:clamp(22px,3vw,44px)}
  html.js:not(.no-scene) main .panel.chapter .case-text h3{font-size:24px}
  html.js:not(.no-scene) main .panel.chapter .case-text > * + *{margin-top:10px}
  html.js:not(.no-scene) main .panel.chapter .case-steps li{font-size:15.5px;padding:5px 0 5px 32px}
  html.js:not(.no-scene) main .panel.chapter .case-before,
  html.js:not(.no-scene) main .panel.chapter .case-human,
  html.js:not(.no-scene) main .panel.chapter .case-result{font-size:15.5px}
  html.js:not(.no-scene) main .panel.chapter .case-note{font-size:16px}
  html.js:not(.no-scene) main .panel.chapter .ui-rows li{padding:9px 16px;font-size:12.5px}
  html.js:not(.no-scene) main .panel.chapter .proof-zone{margin-top:16px;padding:16px 24px}
  html.js:not(.no-scene) main .panel.chapter .tree{margin-top:20px;padding:18px 26px}
  html.js:not(.no-scene) main .panel.chapter .guarantees{margin-top:16px;gap:8px}
  html.js:not(.no-scene) main .panel.chapter .steps-grid{margin-top:20px;gap:13px}
  html.js:not(.no-scene) main .panel.chapter .step{padding:18px 22px}
  html.js:not(.no-scene) main .panel.chapter .step p{font-size:15.5px}
  html.js:not(.no-scene) main .panel.chapter .about-card{padding:24px 32px}
  html.js:not(.no-scene) main .panel.chapter .faq-list{margin-top:14px;gap:7px}
  html.js:not(.no-scene) main .panel.chapter .fqa summary{padding:10px 50px 10px 18px;font-size:16px}
  html.js:not(.no-scene) main .panel.chapter .fqa p{padding:0 18px 10px;font-size:15.5px}
}
/* tweede compressie-tier voor gangbare 768px-laptops (panel r1 V6): de
   hoogste pagina's (control/automate/approach/merch) moeten óók daar in de
   leeszone passen — interne scroll is niet toetsenbord-bereikbaar */
@media (min-width:641px) and (max-height:800px){
  html.js:not(.no-scene) main .panel.chapter .panel-sticky{padding-top:76px;padding-bottom:14px}
  html.js:not(.no-scene) main .panel.chapter h2{font-size:clamp(25px,2.6vw,33px);margin-bottom:8px}
  html.js:not(.no-scene) main .panel.chapter .lead{font-size:16px;margin-bottom:7px}
  html.js:not(.no-scene) main .panel.chapter .tree{margin-top:14px;padding:14px 22px}
  html.js:not(.no-scene) main .panel.chapter .tree-node{padding:7px 14px;font-size:12px}
  html.js:not(.no-scene) main .panel.chapter .tree-drop{margin:5px 0 5px 20px;font-size:14px}
  html.js:not(.no-scene) main .panel.chapter .tree-branches{margin-top:10px;gap:9px}
  html.js:not(.no-scene) main .panel.chapter .guarantees{margin-top:12px;gap:6px}
  html.js:not(.no-scene) main .panel.chapter .guarantees li{font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .case-note{font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .route{margin-top:10px}
  html.js:not(.no-scene) main .panel.chapter .route-step{padding:6px 0;gap:12px}
  html.js:not(.no-scene) main .panel.chapter .route-num{width:28px;height:28px;font-size:12px}
  html.js:not(.no-scene) main .panel.chapter .route-step h3{font-size:16.5px;margin:2px 0 1px}
  html.js:not(.no-scene) main .panel.chapter .route-step p{font-size:14.5px}
  html.js:not(.no-scene) main .panel.chapter .aside{margin-top:6px;font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .case-text h3{font-size:21px}
  html.js:not(.no-scene) main .panel.chapter .case-steps li{font-size:14.5px;padding:4px 0 4px 30px}
  html.js:not(.no-scene) main .panel.chapter .case-before,
  html.js:not(.no-scene) main .panel.chapter .case-human,
  html.js:not(.no-scene) main .panel.chapter .case-result{font-size:14.5px}
  html.js:not(.no-scene) main .panel.chapter .ui-rows li{padding:7px 14px;font-size:12px}
  html.js:not(.no-scene) main .panel.chapter .ui-search{margin:12px 14px 2px;padding:8px 12px}
  html.js:not(.no-scene) main .panel.chapter .chain-big{padding:16px 14px;gap:4px}
  html.js:not(.no-scene) main .panel.chapter .chain-node{padding:9px 16px;font-size:14px}
  html.js:not(.no-scene) main .panel.chapter .proof-zone{margin-top:12px;padding:13px 20px}
  html.js:not(.no-scene) main .panel.chapter .proof-zone p{font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .steps-grid{margin-top:14px;gap:10px}
  html.js:not(.no-scene) main .panel.chapter .step{padding:14px 18px}
  html.js:not(.no-scene) main .panel.chapter .step h3{font-size:17.5px}
  html.js:not(.no-scene) main .panel.chapter .step p{font-size:14.5px}
  html.js:not(.no-scene) main .panel.chapter .step-out{margin-top:9px;padding-top:8px}
  html.js:not(.no-scene) main .panel.chapter .pain{padding:12px 16px}
  html.js:not(.no-scene) main .panel.chapter .pain p{font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .formula{margin-top:12px;padding:12px 16px}
  html.js:not(.no-scene) main .panel.chapter .roles li{padding:12px 16px;font-size:14.5px}
  html.js:not(.no-scene) main .panel.chapter .faq-list{margin-top:14px;gap:7px}
  html.js:not(.no-scene) main .panel.chapter .fqa summary{padding:9px 46px 9px 16px;font-size:15px}
  html.js:not(.no-scene) main .panel.chapter .fqa p{padding:0 16px 9px;font-size:14.5px}
  html.js:not(.no-scene) main .panel.chapter .about-card{padding:20px 28px}
  html.js:not(.no-scene) main .panel.chapter .about-card .lead{font-size:16px}
}

/* ═══ reveals ═══ */
html.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1);
}
html.js .reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* ═══ toegankelijkheid / fallbacks ═══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js main .chapter .panel-inner{opacity:1;transform:none}
  .cue-line{animation:none}
  .ui-rows .af-dot.ok{animation:none}
  html.js .case.reveal .ui-rows li,
  html.js .case.reveal .ui-search,
  html.js .case.reveal .chain-node,
  html.js .case.reveal .chain-verb{opacity:1;transform:none;transition:none}
}
@media print{
  html.js .reveal{opacity:1 !important;transform:none !important}
  html.js .case.reveal .ui-rows li,html.js .case.reveal .ui-search,
  html.js .case.reveal .chain-node,html.js .case.reveal .chain-verb{opacity:1 !important;transform:none !important}
  html.js main .chapter .panel-inner{opacity:1 !important;transform:none !important;filter:none !important}
  main .panel.chapter{height:auto !important;min-height:0 !important;padding-top:28px !important;padding-bottom:28px !important;margin-top:0 !important}
  main .panel.chapter .panel-sticky{position:static !important;height:auto !important;overflow:visible !important;padding:0 !important}
  .hero,.hero-like{min-height:0 !important}
  .nav{position:static}
  .menu-toggle{display:none !important}
  /* case-tag-groen haalt op wit papier geen leesbaar contrast */
  .case-tag{color:#1F7A55 !important;border-color:#1F7A55 !important}
  #scene,.grain,.scroll-cue{display:none !important}
  body{background:#fff !important;color:var(--graphite) !important}
  body:not(.theme-day){
    --ink:var(--graphite);
    --ink-soft:rgba(16,25,43,.84);
    --ink-faint:rgba(16,25,43,.7);
    --line:rgba(16,25,43,.13);
    --line-strong:rgba(16,25,43,.28);
    --surface:rgba(255,255,255,.6);
    --surface-2:rgba(255,255,255,.7);
    --kicker:#135F9E;
  }
}
:focus-visible{outline:2px solid var(--electric);outline-offset:3px}

/* ═══ stepper-compact (V9.1, owner: "past niet op één pagina") — in
   stepper-modus geldt de compacte maatvoering ALTIJD, niet alleen op korte
   schermen; staat ná de hoogte-tiers zodat hij wint ═══ */
html.nn-step main .panel h1{font-size:clamp(44px,5.6vw,76px)}
html.nn-step main .panel h2{font-size:clamp(23px,2.3vw,34px);margin-bottom:10px}
html.nn-step main .panel .lead{font-size:16px;margin-bottom:8px}
html.nn-step main .panel .kicker{margin-bottom:10px}
html.nn-step main .panel .pain-grid{margin-top:20px;gap:12px 16px}
html.nn-step main .panel .pain{padding:13px 18px}
html.nn-step main .panel .pain p{font-size:15px}
html.nn-step main .panel .formula{margin-top:14px;padding:16px 22px}
html.nn-step main .panel .formula-line{font-size:clamp(15px,1.5vw,19px)}
html.nn-step main .panel .sig-close{margin-top:14px}
html.nn-step main .panel .footnote{margin-top:12px;font-size:13.5px}
html.nn-step main .panel .route{margin-top:16px}
html.nn-step main .panel .route-step{padding:10px 0;gap:12px}
html.nn-step main .panel .route-num{width:30px;height:30px;font-size:12px}
html.nn-step main .panel .route-step h3{font-size:16.5px;margin:2px 0 1px}
html.nn-step main .panel .route-step p{font-size:14.5px}
html.nn-step main .panel .aside{margin-top:14px;font-size:15px}
html.nn-step main .panel .roles{margin-top:18px}
html.nn-step main .panel .roles li{padding:13px 16px;font-size:14.5px}
html.nn-step main .panel .case{margin-top:10px;gap:clamp(20px,3vw,44px)}
html.nn-step main .panel .case-text h3{font-size:clamp(19px,1.6vw,23px)}
html.nn-step main .panel .case-text > * + *{margin-top:9px}
html.nn-step main .panel .case-steps li{font-size:14.5px;padding:4px 0 4px 30px}
html.nn-step main .panel .case-before,html.nn-step main .panel .case-human,
html.nn-step main .panel .case-result{font-size:14.5px}
html.nn-step main .panel .case-note{font-size:15px}
html.nn-step main .panel .ui-rows li{padding:8px 15px;font-size:12px}
html.nn-step main .panel .ui-search{margin:12px 14px 2px;padding:8px 12px;font-size:12px}
html.nn-step main .panel .chain-big{padding:14px 12px;gap:4px}
html.nn-step main .panel .chain-node{padding:8px 15px;font-size:13.5px}
html.nn-step main .panel .proof-zone{margin-top:14px;padding:13px 20px}
html.nn-step main .panel .proof-zone p{font-size:14.5px}
html.nn-step main .panel .tree{margin-top:16px;padding:16px 24px}
html.nn-step main .panel .tree-node{padding:7px 14px;font-size:12px}
html.nn-step main .panel .tree-drop{margin:5px 0 5px 20px;font-size:14px}
html.nn-step main .panel .tree-branches{margin-top:10px;gap:8px}
html.nn-step main .panel .guarantees{margin-top:12px;gap:6px}
html.nn-step main .panel .guarantees li{font-size:14.5px}
html.nn-step main .panel .steps-grid{margin-top:16px;gap:12px}
html.nn-step main .panel .step{padding:15px 20px}
html.nn-step main .panel .step h3{font-size:17px}
html.nn-step main .panel .step p{font-size:14.5px}
html.nn-step main .panel .step-out{margin-top:9px;padding-top:8px;font-size:10.5px}
html.nn-step main .panel .about-card{padding:22px 30px}
html.nn-step main .panel .about-card .lead{font-size:16px}
html.nn-step main .panel .faq-list{margin-top:14px;gap:8px}
html.nn-step main .panel .fqa summary{padding:9px 46px 9px 16px;font-size:15px}
html.nn-step main .panel .fqa p{padding:0 16px 9px;font-size:14.5px}
html.nn-step main .panel .faq-list{gap:7px}

/* rustiger leesbeeld (V9.2): smaller kader, gecascadeerde aankomst — de
   sectie bouwt zich element voor element op i.p.v. één lap tekst ineens */
html.nn-step main .panel .panel-inner{max-width:1060px}
html.nn-step main .panel .lead{max-width:54ch}
html.nn-step main .panel .panel-inner > *{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1);
}
html.nn-step main .panel.step-active .panel-inner > *{opacity:1;transform:none}
html.nn-step main .panel.step-active .panel-inner > :nth-child(1){transition-delay:.30s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(2){transition-delay:.40s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(3){transition-delay:.50s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(4){transition-delay:.60s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(5){transition-delay:.70s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(6){transition-delay:.80s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(7){transition-delay:.90s}
html.nn-step main .panel.step-active .panel-inner > :nth-child(8){transition-delay:1s}

/* ═══ responsive ═══ */
@media (max-width:960px){
  /* contact blijft op mobiel een volle, gecentreerde landing */
  #contact.chapter{min-height:100svh;display:flex;align-items:center}
  .case{grid-template-columns:1fr;gap:22px;align-items:start}
  .case-ui{order:2}
  .roles{grid-template-columns:1fr;gap:12px}
  .pain-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .proof-zone{flex-direction:column;align-items:flex-start}
  .tree-branch{flex-direction:column;align-items:flex-start;gap:8px}
  .tree-branch .tree-arrow{transform:rotate(90deg);margin-left:22px}
}
@media (max-width:720px){
  body{font-size:17px}
  .brand-word{display:none}
  .nav{padding:12px 16px;gap:10px}
  /* zonder JS is er geen werkende hamburger (panel r1 V5): val terug op de
     twee-rijen-nav; statisch, want een 2-rijen-header van ~200px zou als
     fixed permanent de hero bedekken (panel r1 V6) */
  html:not(.js) .nav{flex-wrap:wrap;position:static}
  html:not(.js) .nav-links{
    display:flex;position:static;flex-direction:row;flex-wrap:wrap;
    flex-basis:100%;background:transparent;border:0;padding:0;gap:4px 10px;
  }
  html:not(.js) .nav-links a{font-size:12.5px;padding:12px 6px;margin:0}
  /* hamburger-menu (alleen mét JS): links verborgen tot .nav.open */
  html.js .menu-toggle{display:flex}
  html.js .nav-links{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    /* vrijwel dekkend: het uitklappaneel ligt over lopende content heen */
    background:rgba(10,15,26,.98);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:6px 8px 10px;
  }
  html.js body.theme-day .nav-links{background:rgba(246,243,237,.98)}
  html.js .nav.open .nav-links{display:flex}
  .nav-links a{
    font-size:16px;letter-spacing:.02em;
    padding:15px 14px;margin:0;border-radius:12px;
  }
  .nav-links a.active::after{left:14px;right:auto;width:22px;bottom:10px}
  .lang-toggle{padding:12px 16px;font-size:12.5px}
  .panel{padding-left:20px;padding-right:20px}
  .chapter{padding-top:72px;padding-bottom:72px}
  h1{font-size:clamp(44px,12vw,64px)}
  .button{padding:16px 26px}
  .button.large{padding:17px 30px}
  .scroll-cue{bottom:24px}
  .route{padding:6px 16px}
  .route-step{gap:14px;padding:16px 0}
  .case-text h3{font-size:23px}
  .ui-rows li{padding:11px 14px;font-size:13.5px}
  .af-illu{font-size:12.5px}
  .chain-node{font-size:14px}
  .tree{padding:20px 16px}
  .tree-drop{margin-left:14px}
  .tree-branches{padding-left:14px}
}

/* ═══ typesysteem V2 (owner 20-07: "te rommelig, te groot — helemaal
   opnieuw"). Eén sluitende maatvoering die alle compressie-tiers hierboven
   overstemt. Principes: (1) één maat kleiner over de hele linie — de scene
   is het spektakel, de tekst is de passagier; (2) strakke, vaste ritmiek:
   kicker 11 → titel 30 → lead 16 → body 15; (3) elke sectie past ruim op
   één scherm; (4) vervolgtekst zakt in maat én inkt zodat de eerste zin
   draagt. ═══ */
h1{font-size:clamp(40px,5vw,64px);line-height:1.02;margin:8px 0 20px}
h2{font-size:clamp(23px,2.3vw,31px);font-weight:400;line-height:1.15;margin:6px 0 12px;max-width:640px}
h3{font-size:17px}
.kicker{font-size:10.5px;margin:0 0 10px}
.lead{font-size:16px;line-height:1.55;color:var(--ink);max-width:58ch;margin:0 0 10px}
.panel-inner .lead ~ .lead{font-size:14.5px;color:var(--ink-soft)}
.aside{font-size:14.5px;margin-top:18px}
.footnote{font-size:12.5px}
/* stepper: zelfde maten, hogere specificiteit dan de tiers */
html.nn-step main .panel .panel-sticky{padding-top:96px}
html.nn-step main .panel h1{font-size:clamp(38px,4.4vw,58px)}
html.nn-step main .panel h2,
html.js:not(.no-scene) main .panel.chapter h2{font-size:clamp(23px,2.3vw,31px);margin-bottom:12px}
html.nn-step main .panel .lead,
html.js:not(.no-scene) main .panel.chapter .lead{font-size:16px;margin-bottom:10px}
html.nn-step main .panel .panel-inner .lead ~ .lead,
html.js:not(.no-scene) main .panel.chapter .panel-inner .lead ~ .lead{font-size:14.5px;color:var(--ink-soft)}
/* content-componenten: één body-maat (15px), compacte dozen */
.pain{padding:14px 18px}
.pain p{font-size:15px}
.pain-grid{margin-top:20px;gap:12px 16px}
.formula{margin-top:20px;padding:16px clamp(20px,2.6vw,32px)}
.formula-line{font-size:clamp(14px,1.4vw,18px)}
.route-step h3{font-size:16px}
.route-step p{font-size:14.5px}
.roles{margin-top:20px;gap:12px 16px}
.roles li{font-size:14.5px;padding:14px 16px}
.case-text h3{font-size:clamp(19px,1.7vw,24px)}
.case-sub,.case-before,.case-human,.case-result{font-size:14.5px}
.case-steps li{font-size:14.5px;padding:5px 0 5px 30px}
.case-note{font-size:15px}
.proof-zone{margin-top:16px;padding:14px 20px}
.proof-zone p{font-size:14.5px}
.tree-drop,.tree-out{font-size:14px}
.guarantees{margin-top:14px;gap:6px}
.guarantees li{font-size:14.5px}
.steps-grid{margin-top:18px;gap:12px 16px}
.step{padding:16px 20px}
.step h3{font-size:16.5px}
.step p{font-size:14.5px}
.fqa summary{font-size:15.5px;padding:12px 50px 12px 18px}
.fqa p{font-size:14.5px;padding:0 18px 12px}
.faq-list{margin-top:18px;gap:8px}
.chain-node{font-size:13.5px;padding:9px 16px}
.tree{margin-top:14px;padding:14px 20px}
.tree-node{padding:6px 13px;font-size:11.5px}
.tree-drop{margin:6px 0 6px 18px}
.tree-branches{margin-top:10px;gap:8px;padding-left:18px}
.button{font-size:14.5px;padding:13px 22px}
.button.large{font-size:15.5px;padding:14px 26px}
.text-link{font-size:14.5px}

/* ═══ opzet V3 (owner 20-07: "hero rustig, rest druk — volledig nieuwe
   opzet"). Elke sectie volgt nu de grammatica van de hero: één gedachte,
   max één contentblok, geen naschriften. De dozen zijn eruit — content
   staat als redactionele lijst met hairlines direct op de nachtlucht; de
   enige overgebleven doos per scherm is het demo-paneel bij de cases. ═══ */
.pain-grid{display:flex;flex-direction:column;gap:0;margin-top:22px;max-width:620px}
.surface.pain{background:none;border:none;box-shadow:none;border-radius:0;padding:12px 0;border-top:1px solid var(--line)}
.surface.pain:last-child{border-bottom:1px solid var(--line)}
.pain p{color:var(--ink-soft)}
.surface.formula{background:none;border:none;box-shadow:none;border-radius:0;margin-top:26px;padding:2px 0 2px 18px;border-left:2px solid var(--horizon-gold)}
.surface.route{background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin-top:22px;max-width:640px}
.route-step{border-top:1px solid var(--line)}
.surface.tree{background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin-top:22px}
.roles{gap:0 32px;margin-top:22px}
.roles li{background:none;border:none;box-shadow:none;border-radius:0;padding:16px 0 0;border-top:1px solid var(--line)}
.steps-grid{gap:0 32px;margin-top:22px}
.surface.step{background:none;border:none;box-shadow:none;border-radius:0;padding:16px 0 14px;border-top:1px solid var(--line)}
.surface.about-card{background:none;border:none;box-shadow:none;border-radius:0;padding:0}
.proof-zone.surface{background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin-top:26px}
.faq-list{gap:0;margin-top:20px}
.surface.fqa{background:none;border:none;box-shadow:none;border-radius:0;border-top:1px solid var(--line)}
.surface.fqa:last-child{border-bottom:1px solid var(--line)}
.fqa summary{padding-left:0}
.fqa p{padding-left:0}
.fqa summary::after{right:8px}
/* uitlijn-pass (owner 20-07): alle zinnen op één leesraster */
h1,h2,h3{text-wrap:balance}
.lead,.pain p,.step p,.roles li,.case-steps li,.case-result,.case-note,.fqa p,.aside,.proof-zone p,.tree-out{text-wrap:pretty}
.lead,.pain-grid,.surface.route,.case-steps,.guarantees{max-width:60ch}
.pain p,.step p,.route-step p,.roles li{line-height:1.5}
/* cases: één tekst-linkerlijn — nummers hangen in de marge i.p.v. de tekst in te duwen */
.case-steps{padding-left:0}
.case-steps li{padding-left:0;padding-right:12px}
.case-steps li::before{position:static;display:inline-flex;margin-right:10px;transform:translateY(-1px)}
.case-steps li{display:flex;align-items:baseline}
.case-steps li::before{flex:0 0 auto}
.case-result{max-width:56ch}
.case-note{max-width:54ch}



/* ═══ mobiel-pass (owner 22-07): compactere maten, ruimere tapdoelen, geen
   horizontale druk. Stepper is op mobiel al uit; dit is de scroll-flow. ═══ */
@media (max-width:720px){
  h1{font-size:clamp(32px,9.5vw,42px);margin-bottom:14px}
  h2{font-size:21px;margin-bottom:10px}
  .kicker{font-size:10px}
  .lead{font-size:15px;line-height:1.55}
  .panel-inner .lead ~ .lead{font-size:14px}
  .panel-inner{padding-left:18px;padding-right:18px}
  section[id]{scroll-margin-top:76px}
  /* grids naar één kolom met rust ertussen */
  .pain-grid,.roles,.steps-grid{grid-template-columns:1fr;gap:10px}
  .pain{padding:12px 14px}
  .step{padding:14px 16px}
  .formula{padding:14px 16px;margin-top:16px}
  .formula-line{font-size:13px}
  .case-grid{grid-template-columns:1fr;gap:18px}
  .case-ui{max-width:none}
  /* tapdoelen ≥44px */
  .button{padding:14px 22px;font-size:15px;width:100%;justify-content:center;text-align:center}
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .fqa summary{padding:14px 46px 14px 16px;min-height:44px}
  /* lange vertakkings-pills passen niet nowrap op telefoonbreedte (491px @375) */
  .tree-cond{white-space:normal;line-height:1.5}
  .fqa p{padding:0 16px 14px}
  .chain{gap:6px}
  .chain-node{font-size:12px;padding:8px 12px}
  .tree-node{font-size:10.5px;padding:5px 10px}
  .tree-branches{grid-template-columns:1fr;padding-left:12px}
  .quote-mark{display:none}
  .proof-zone{padding:12px 14px}
  .footer-grid{grid-template-columns:1fr;gap:22px}
  .nav-inner{padding:0 16px}
  /* hero: knoppen onder elkaar, aside compacter */
  .hero-cta{flex-direction:column;align-items:stretch}
  .aside{font-size:13.5px;margin-top:14px}
}
@media (max-width:420px){
  h1{font-size:30px}
  .panel-inner{padding-left:14px;padding-right:14px}
}

/* ═══ case-animatie 01 V2 (owner 22-07, "helemaal opnieuw"): één foto-kaart
   reist door het systeem — rommelig erin, schoon eruit. Drie stations op één
   as, actieve fase licht op; onderin vaart het product nog. Loop 12s. ═══ */
.case-anim{display:block;width:100%;height:auto;margin-top:6px}
.case-anim *{vector-effect:non-scaling-stroke}
.case-anim .cb-mark path{vector-effect:none;stroke:#C9D0DA}
.case-anim .cb-mark path[stroke="none"]{fill:#C9D0DA;stroke:none}
.case-anim .cb-lbl{fill:rgba(230,233,239,.6);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-anchor:middle;text-transform:uppercase}
.case-anim .cb-frame{fill:rgba(10,15,26,.5);stroke:rgba(230,233,239,.5);stroke-width:1.3}
.case-anim .cb-string{fill:none;stroke:rgba(230,233,239,.4);stroke-width:1.2}
.case-anim .cb-flag{fill:none;stroke:rgba(61,166,255,.55);stroke-width:1.1}
.case-anim .cb-flag.g{stroke:rgba(232,181,131,.6)}
.case-anim .cb-faint circle,.case-anim .cb-faint path{fill:none;stroke:rgba(230,233,239,.25);stroke-width:1.1}
.case-anim .cb-bottle path{fill:rgba(61,166,255,.14);stroke:#7CC0FF;stroke-width:1.4}
.case-anim .cb-bottle.big path{fill:rgba(61,166,255,.20);stroke:#9AD0FF;stroke-width:1.5}
.case-anim .cb-phone rect{fill:rgba(13,22,38,.9);stroke:rgba(230,233,239,.6);stroke-width:1.3}
.case-anim .cb-phone circle{fill:rgba(230,233,239,.6)}
.case-anim .cb-flash circle{fill:#FFFFFF}
.case-anim .cb-flash path{fill:none;stroke:#FFFFFF;stroke-width:1.6;stroke-linecap:round}
.case-anim .cb-flash{opacity:0;animation:cbFlash 12s infinite}
.case-anim .cb-cardspark{stroke:#FFE9C9;stroke-width:1.2}
.case-anim .cb-lbl.l1{animation:cbLbl1 12s infinite}
.case-anim .cb-lbl.l2{animation:cbLbl2 12s infinite}
.case-anim .cb-lbl.l3{animation:cbLbl3 12s infinite}
.case-anim .cb-dots{fill:none;stroke:rgba(230,233,239,.35);stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round}
.case-anim .cb-arrowhead{fill:none;stroke:rgba(230,233,239,.5);stroke-width:1.2}
.case-anim .cb-cardA rect,.case-anim .cb-cardB rect{fill:rgba(13,22,38,.92);stroke:#7CC0FF;stroke-width:1.3}
.case-anim .cb-cardB rect{stroke:#E8B583}
.case-anim .cb-scribble{fill:none;stroke:rgba(230,233,239,.35);stroke-width:1}
.case-anim .cb-minibottle{fill:rgba(61,166,255,.16);stroke:#7CC0FF;stroke-width:1.1}
.case-anim .cb-cardB .cb-minibottle{stroke:#E8B583;fill:rgba(232,181,131,.14)}
.case-anim .cb-cardA{opacity:0;animation:cbCardA 12s infinite;filter:drop-shadow(0 0 6px rgba(124,192,255,.55))}
.case-anim .cb-cardB{opacity:0;animation:cbCardB 12s infinite;filter:drop-shadow(0 0 7px rgba(232,181,131,.55))}
.case-anim .cb-nodebox{fill:rgba(61,166,255,.07);stroke:rgba(124,192,255,.7);stroke-width:1.4}
.case-anim .cb-scan{fill:#7CC0FF;opacity:0;animation:cbScan 12s infinite}
.case-anim .cb-pulse{fill:none;stroke:#7CC0FF;stroke-width:1.2;opacity:0;transform-origin:240px 110px;animation:cbPulse 12s infinite}
.case-anim .cb-s1{animation:cbStage1 12s infinite}
.case-anim .cb-node{animation:cbStage2 12s infinite}
.case-anim .cb-s3 .cb-frame,.case-anim .cb-browser{opacity:.45}
.case-anim .cb-s3{animation:cbStage3 12s infinite}
.case-anim .cb-browser circle{fill:rgba(230,233,239,.5)}
.case-anim .cb-shot{opacity:0;animation:cbShot 12s infinite}
.case-anim .cb-backdrop{fill:rgba(230,233,239,.07);stroke:rgba(230,233,239,.3);stroke-width:1}
.case-anim .cb-shadow{fill:rgba(0,0,0,.5)}
.case-anim .cb-spark{stroke:#FFE9C9;stroke-width:1.2;opacity:0;animation:cbSpark 12s infinite}
.case-anim .cb-spark.s2{animation-delay:.5s}
.case-anim .cb-check{opacity:0;animation:cbCheck 12s infinite}
.case-anim .cb-check circle{fill:none;stroke:rgba(85,201,154,.9);stroke-width:1.4}
.case-anim .cb-check path{fill:none;stroke:rgba(85,201,154,.9);stroke-width:1.6}
.case-anim .cb-arc{fill:none;stroke:rgba(124,192,255,.45);stroke-width:1.4}
.case-anim .cb-route{fill:none;stroke:rgba(230,233,239,.18);stroke-width:1;stroke-dasharray:3 7;animation:cbDrift 30s linear infinite}
.case-anim .cb-citydots circle{fill:#FFD9A0;opacity:.7}
.case-anim .cb-ship{animation:cbShip 34s linear infinite}
.case-anim .cb-bob{animation:cbBob 4s ease-in-out infinite}
.case-anim .cb-hull{fill:none;stroke:rgba(230,233,239,.55);stroke-width:1.3}
.case-anim .cb-cargo rect{fill:rgba(61,166,255,.18);stroke:#7CC0FF;stroke-width:1.2}
.case-anim .cb-cargo rect.g{fill:rgba(232,181,131,.18);stroke:#E8B583}
.case-anim .cb-shiplight{fill:#FF8A7A;animation:cbLight 2.4s infinite}
@keyframes cbFlash{0%,2%{opacity:0}4%{opacity:1}6%{opacity:.25}8%{opacity:.9}11%,100%{opacity:0}}
@keyframes cbLbl1{0%,22%{opacity:1}30%,90%{opacity:.45}97%,100%{opacity:1}}
@keyframes cbLbl2{0%,26%{opacity:.45}32%,54%{opacity:1}62%,100%{opacity:.45}}
@keyframes cbLbl3{0%,58%{opacity:.45}66%,100%{opacity:1}}
@keyframes cbStage1{0%,20%{opacity:1}28%,90%{opacity:.4}97%,100%{opacity:1}}
@keyframes cbStage2{0%,24%{opacity:.45}30%,52%{opacity:1}60%,100%{opacity:.45}}
@keyframes cbStage3{0%,56%{opacity:.5}64%,100%{opacity:1}}
@keyframes cbCardA{0%,10%{opacity:0;transform:translate(80px,110px) scale(1.05)}15%{opacity:1;transform:translate(80px,110px) scale(1.05)}32%{opacity:1;transform:translate(240px,110px) scale(.72)}36%,100%{opacity:0;transform:translate(240px,110px) scale(.72)}}
@keyframes cbScan{0%,32%{opacity:0;transform:translateY(0)}35%{opacity:1}41%{transform:translateY(46px)}47%{opacity:1;transform:translateY(4px)}50%,100%{opacity:0;transform:translateY(0)}}
@keyframes cbPulse{0%,30%{opacity:0;transform:scale(.6)}36%{opacity:.7;transform:scale(.9)}50%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes cbCardB{0%,48%{opacity:0;transform:translate(240px,110px) scale(.72)}53%{opacity:1}68%{opacity:1;transform:translate(400px,112px) scale(1.15)}72%,100%{opacity:0;transform:translate(400px,112px) scale(1.15)}}
@keyframes cbShot{0%,66%{opacity:0}72%,97%{opacity:1}100%{opacity:0}}
@keyframes cbSpark{0%,70%{opacity:0}74%{opacity:1}79%{opacity:0}83%{opacity:.8}87%,100%{opacity:0}}
@keyframes cbCheck{0%,76%{opacity:0}80%,97%{opacity:1}100%{opacity:0}}
@keyframes cbDrift{to{stroke-dashoffset:-100}}
@keyframes cbShip{0%{transform:translate(-60px,265px)}50%{transform:translate(220px,251px)}100%{transform:translate(500px,265px)}}
@keyframes cbBob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2.2px) rotate(-1.2deg)}}
@keyframes cbLight{0%,78%{opacity:.15}84%,92%{opacity:1}100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .case-anim *{animation:none !important}
  .case-anim .cb-shot,.case-anim .cb-check{opacity:1}
  .case-anim .cb-s3{opacity:1}
}