/* ══════════════════════════════════════════════════════════════
   LockTrace — landingspage
   Design Brief v1.3 · geen externe bronnen · geen inline styles
   (strikte CSP: style-src 'self')
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url('/assets/fonts/jetbrains-mono-var-latin.woff2') format('woff2');
}

/* ── TOKENS — Design Brief §4 ── */
:root {
  --brand:       #2E75D4;
  --accent:      #5A9FE8;

  --canvas:      #f7f8f8;
  --surf:        #ffffff;
  --surf-tint:   rgba(46,117,212,0.06);
  --fg:          #101113;
  --fg-body:     #3e3e44;
  --fg-faint:    #8a8f98;
  --rule:        #e6e6e6;
  --rule-str:    #d8dadd;
  --shadow:      0 1px 2px rgba(16,24,40,0.05), 0 2px 6px rgba(16,24,40,0.06);
  --shadow-lift: 0 4px 12px rgba(16,24,40,0.08), 0 12px 32px rgba(16,24,40,0.08);

  --ok:          #2FD6A1;
  --warn:        #F59E0B;
  --bad:         #FC2647;
  --ok-text:     #0c8a68;
  --warn-text:   #b06f06;
  --bad-text:    #FC2647;

  /* donker canvas = merk-signatuur. Vast in beide thema's. */
  --dark:        #08090a;
  --dark-2:      #0e1013;
  --dark-fg:     #f7f8f8;
  --dark-body:   rgba(247,248,248,0.72);
  --dark-faint:  rgba(247,248,248,0.46);
  --dark-rule:   rgba(255,255,255,0.08);
  --dark-whisper:rgba(255,255,255,0.05);
  --dark-surf:   rgba(255,255,255,0.03);

  --maxw:        1200px;
  --gap-sect:    clamp(72px, 9vw, 128px);
}

/* Eén thema: licht canvas. Het donkere vlak is merk-signatuur (hero, header,
   garantie, slot-CTA, footer) — geen dark mode. Bewust geen thema-schakelaar. */

/* ── BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: "cv01", "ss03";
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
body.no-scroll { overflow: hidden; }

.wrap { width:100%; max-width: var(--maxw); margin:0 auto; padding:0 24px; }

h1,h2,h3 { font-weight: 590; letter-spacing:-0.028em; line-height:1.12; }

.mono {
  font-family:'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  text-transform: uppercase; letter-spacing: 1.2px; font-weight: 400;
}
.num { font-family:'JetBrains Mono', ui-monospace, 'Consolas', monospace; letter-spacing:0; }

a { color: inherit; }
.hidden { display: none; }

/* chapter marker — typografisch ritueel (Design Brief §6.2) */
.chapter {
  font-size: 11px; color: var(--brand);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.chapter::before { content:""; width:20px; height:1px; background: var(--brand); flex-shrink:0; }
.chapter.is-accent { color: var(--accent); }
.chapter.is-accent::before { background: var(--accent); }
.chapter.is-bad  { color: var(--bad-text); }
.chapter.is-bad::before  { background: var(--bad); }

/* ── buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:510; line-height:1;
  padding:15px 26px; border-radius:9999px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn-primary { background: var(--brand); color:#fff; }
.btn-primary:hover { background:#2a6ac2; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(46,117,212,0.28); }
.btn-ghost-dark { border-radius:6px; background:transparent; color: var(--dark-fg); border:1px solid rgba(255,255,255,0.16); }
.btn-ghost-dark:hover { border-color: var(--accent); color: var(--accent); }
.btn .arw { transition: transform .16s ease; }
.btn:hover .arw { transform: translateX(3px); }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── HEADER ──
   Op de landingspage begint de header buiten beeld: het eerste scherm is
   alleen de belofte. Hij glijdt in beeld zodra er gescrold wordt (.show).
   Op onderliggende pagina's staat hij meteen vast (.is-static). */
.hdr {
  position: fixed; top:0; left:0; right:0; z-index: 60;
  background: rgba(8,9,10,0.90);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--dark-rule);
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.hdr.show, .hdr.is-static { transform:none; }
body.static-hdr { padding-top:64px; }
@media (prefers-reduced-motion: reduce) { .hdr { transition:none; } }

.hdr-in { display:flex; align-items:center; gap: clamp(16px,2.4vw,34px); height:64px; }
.lockup { display:flex; align-items:center; gap:9px; text-decoration:none; }
.lockup svg { width:26px; height:26px; display:block; }
.lockup .word { font-size:18px; font-weight:590; letter-spacing:-0.025em; color: var(--dark-fg); }
.hdr-right { display:flex; align-items:center; gap:14px; margin-left:auto; }

.hdr-nav { display:flex; align-items:center; gap: clamp(14px,1.9vw,26px); list-style:none; }
.hdr-nav a {
  font-size:13.5px; font-weight:510; color: var(--dark-body);
  text-decoration:none; white-space:nowrap;
  transition: color .15s ease;
}
.hdr-nav a:hover { color: var(--dark-fg); }
.hdr-nav a.here { color: var(--accent); }

.hdr .btn { padding:11px 20px; font-size:14px; }

/* ── HERO ── */
.hero {
  background: var(--dark); color: var(--dark-fg);
  position:relative; overflow:hidden;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(760px 460px at 22% 8%, rgba(46,117,212,0.08), transparent 68%);
}
.hero-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 68px); align-items:center;
}
.hero h1 { font-size: clamp(34px, 4.6vw, 55px); margin: 18px 0 22px; }
.hero h1 .em { color: var(--accent); }
.hero-sub {
  font-size: clamp(16px, 1.35vw, 18px); line-height:1.58;
  color: var(--dark-body); max-width: 46ch; margin-bottom: 28px;
}

/* slide-variant: hero als scherm-vullende tussenstop (wildcard slide 2) */
.hero-slide { min-height:100dvh; display:flex; align-items:center; }
.hero-slide .hero-grid { width:100%; }

/* lichte slide op het witte canvas van de site. De overgang van het zwarte
   openingsscherm loopt via een dissolve: het zwart lost naar boven toe op
   in het wit, zodat de sprong niet als een klap binnenkomt. */
.hero-slide.is-light { background: var(--canvas); color: var(--fg); }
.hero-slide.is-light::before {
  content:""; position:absolute; left:0; right:0; top:0;
  height: clamp(220px, 34vh, 400px); pointer-events:none;
  background: linear-gradient(to bottom,
    #08090a 0%, rgba(8,9,10,0.86) 18%, rgba(8,9,10,0.42) 46%, rgba(8,9,10,0) 100%);
}
.hero-slide.is-light .hero-sub,
.hero-slide.is-light .checks li { color: var(--fg-body); }
.hero-slide.is-light .checks strong { color: var(--fg); }
.hero-slide.is-light .checks .tick { border-color: rgba(47,214,161,0.5); }
.hero-slide.is-light .checks .tick svg { stroke: var(--ok-text); }
.hero-slide.is-light .reversal { color: var(--fg-faint); }
.hero-slide.is-light .reversal .dot { background: var(--fg-faint); }
.hero-slide.is-light .feed-cap { color: var(--fg-faint); }

/* de openingszin is geen bijschrift maar een uitspraak — hij moet het
   gewicht dragen dat de vraag op scherm 1 had */
.slide-lead {
  font-size: clamp(18px, 2.4vh, 24px);
  line-height: 1.45; letter-spacing:-0.016em;
  color: var(--fg); font-weight:450;
  max-width: 34ch; margin-bottom: clamp(22px,3.4vh,34px);
}
.slide-lead em { font-style:normal; color: var(--brand); font-weight:590; }
.slide-lead strong { font-weight:590; color: var(--fg); }
.hero-slide.is-light .checks li { font-size:16px; }
.hero-slide.is-light .chapter { margin-bottom:18px; }

/* ── logboek in lichte uitvoering ── */
.hero-slide.is-light .feed {
  background: var(--surf); border-color: var(--rule);
  box-shadow: var(--shadow-lift);
}
.hero-slide.is-light .feed-bar { background: var(--canvas); border-bottom-color: var(--rule); }
.hero-slide.is-light .feed-title { color: var(--fg-faint); }
.hero-slide.is-light .feed-live { color: var(--ok-text); }
.hero-slide.is-light .ev {
  background: var(--surf); border-color: var(--rule);
  box-shadow: var(--shadow);
}
.hero-slide.is-light .ev.bad { background: rgba(252,38,71,0.035); }
.hero-slide.is-light .ev-loc { color: var(--fg); }
.hero-slide.is-light .ev-time,
.hero-slide.is-light .ev-meta { color: var(--fg-faint); }
.hero-slide.is-light .ev-pill { color: var(--ok-text); }
.hero-slide.is-light .ev.warn .ev-pill { color: var(--warn-text); }
.hero-slide.is-light .ev.bad .ev-pill { color: var(--bad-text); }

/* ghost-knop op licht canvas */
.btn-ghost {
  border-radius:6px; background:transparent;
  color: var(--fg); border:1px solid var(--rule-str);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ══ HERO als volledig eerste scherm (landingspage) ══
   Eén scherm dat het venster vult: geen header, geen scrollbalk. Alle maten
   schalen mee met de vensterhoogte zodat het op een laptop nét past. */
.hero-full {
  min-height: 100dvh;
  display:flex; flex-direction:column; justify-content:center;
  background: linear-gradient(135deg, #16202b 0%, #0b0e12 58%, #08090a 100%);
  padding: clamp(20px,3vh,40px) 0 clamp(48px,6vh,68px);
}
.hero-full::before {
  background: radial-gradient(820px 520px at 78% 12%, rgba(46,117,212,0.10), transparent 66%);
}
.hero-full .hero-grid {
  grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  align-items:center; row-gap: clamp(20px,3.4vh,38px);
}

/* linkerkolom */
.hero-copy { display:flex; flex-direction:column; gap: clamp(13px,2.5vh,26px); }
.hero-lockup { display:inline-flex; align-items:center; gap:11px; align-self:flex-start; text-decoration:none; }
.hero-lockup svg { width: clamp(30px,3.8vh,40px); height: clamp(30px,3.8vh,40px); display:block; }
.hero-lockup .word {
  font-size: clamp(22px,2.8vh,29px); font-weight:590;
  letter-spacing:-0.025em; color: var(--dark-fg);
}
.hero-full h1 { font-size: clamp(28px, 3.3vw + 0.35vh, 48px); margin:0; }
.hero-full .chapter { margin:0; }
.hero-full .checks { gap: clamp(10px,1.8vh,16px); margin:0; font-size:16px; }
.hero-full .checks li { font-size:16px; }

/* de knop staat gecentreerd onder de tekst — één duidelijke uitgang */
.hero-copy .btn-primary { align-self:center; padding:16px 40px; font-size: clamp(15px,1.9vh,17px); }
.risk { text-align:center; font-size:12.5px; color: var(--dark-faint); margin-top:-4px; }

/* rechterkolom: het platform, in beeld */
.visual { display:flex; flex-direction:column; gap:10px; min-width:0; }
.browser {
  background: var(--dark-2); border:1px solid var(--dark-rule);
  border-radius:12px; overflow:hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.browser-bar { display:flex; gap:6px; padding:10px 12px; background: rgba(255,255,255,0.05); }
.browser-bar span { width:10px; height:10px; border-radius:9999px; background: rgba(255,255,255,0.18); }
.browser svg { display:block; width:100%; height:auto; }
.visual figcaption { font-size:12.5px; color: var(--dark-faint); text-align:center; line-height:1.5; }

/* plattegrond-animaties — inline <style> mag niet (strikte CSP), dus hier */
@media (prefers-reduced-motion: no-preference) {
  .fp-route { animation: fp-dash 1.1s linear infinite; }
  .fp-pulse { animation: fp-pulse 1.7s ease-out infinite; }
}
@keyframes fp-dash { to { stroke-dashoffset: -32; } }
@keyframes fp-pulse {
  0%   { transform: scale(.6); opacity:.9; }
  100% { transform: scale(2.3); opacity:0; }
}
.fp-pulse { transform-box: fill-box; transform-origin: center; }

/* bewijsstrook: volle breedte onderaan het eerste scherm */
.proofband {
  grid-column: 1 / -1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  border-top:1px solid var(--dark-rule);
  padding-top: clamp(14px,2.4vh,24px);
}
.trust {
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 26px;
  font-size:14px; color: var(--accent);
}
.trust b { color: var(--dark-fg); font-weight:590; }
.trust-note {
  font-size:11px; color: var(--dark-faint);
  letter-spacing:.6px; text-transform:uppercase; text-align:center;
}

/* ── "Ontdek LockTrace" — de uitnodiging om verder te lezen ──
   Geen knop: de knop is voor het gesprek. Dit is de tweede uitgang. */
.discover {
  position:absolute; left:50%; bottom: clamp(14px,2.6vh,30px); transform:translateX(-50%);
  z-index:2; display:inline-flex; align-items:center; gap:10px;
  color: var(--dark-fg); text-decoration:none;
  font-size: clamp(15px,1.9vh,17px); font-weight:590; letter-spacing:-0.012em;
  transition: color .15s ease;
}
.discover:hover { color: var(--accent); }
.discover svg { width:19px; height:19px; }
@media (prefers-reduced-motion: no-preference) {
  .discover svg { animation: cue-bob 1.9s ease-in-out infinite; }
}
@keyframes cue-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

.checks { list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:32px; }
.checks li { display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color: var(--dark-body); line-height:1.5; }
.checks strong { color: var(--dark-fg); font-weight:590; }
.checks .tick {
  flex-shrink:0; width:19px; height:19px; margin-top:2px; border-radius:9999px;
  background: rgba(47,214,161,0.12); border:1px solid rgba(47,214,161,0.42);
  display:grid; place-items:center;
}
.checks .tick svg { width:10px; height:10px; stroke: var(--ok); }

.cta-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.reversal {
  margin-top:14px; font-size:12.5px; color: var(--dark-faint);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.reversal .dot { width:3px; height:3px; border-radius:9999px; background: var(--dark-faint); }

/* ── hero-visual: audit-feed (Design Brief §6.2) ── */
.feed {
  background: var(--dark-2);
  border:1px solid var(--dark-rule); border-radius:12px;
  overflow:hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.feed-bar {
  display:flex; align-items:center; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--dark-rule);
  background: var(--dark-surf);
}
.feed-dot { width:9px; height:9px; border-radius:9999px; background: var(--ok); flex-shrink:0; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.feed-title { font-size:10.5px; color: var(--dark-faint); }
.feed-live { margin-left:auto; font-size:9.5px; color: var(--ok); }
.feed-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:330px; }

.ev {
  display:flex; align-items:center; gap:12px;
  background: var(--dark-surf); border:1px solid var(--dark-whisper);
  border-left:3px solid var(--ok);
  border-radius:8px; padding:11px 13px;
  animation: evfade 1.4s ease both;
}
/* zacht invloeien i.p.v. inspringen — het log mag de tekst links niet wegconcurreren */
@keyframes evfade { from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion: reduce) {
  .ev { animation:none }
  .feed-dot { animation:none }
}
.ev.warn { border-left-color: var(--warn); }
.ev.bad  { border-left-color: var(--bad); background: rgba(252,38,71,0.05); }
.ev-time { font-size:11px; color: var(--dark-faint); flex-shrink:0; }
.ev-main { flex:1; min-width:0; display:block; }
.ev-loc { font-size:13px; font-weight:510; color: var(--dark-fg); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ev-meta { font-size:9.5px; color: var(--dark-faint); margin-top:3px; display:block; }
.ev-pill {
  font-size:9px; padding:4px 9px; border-radius:9999px; flex-shrink:0;
  color: var(--ok); background: rgba(47,214,161,0.10); border:1px solid rgba(47,214,161,0.36);
}
.ev.warn .ev-pill { color: var(--warn); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.36); }
.ev.bad  .ev-pill { color: var(--bad);  background: rgba(252,38,71,0.10);  border-color: rgba(252,38,71,0.38); }
.feed-cap { font-size:11.5px; color: var(--dark-faint); margin-top:14px; line-height:1.5; }

/* ── STATUSSTROOK ── */
.status-strip { background: var(--dark-2); border-top:1px solid var(--dark-rule); color: var(--dark-fg); }
.status-in { padding:26px 0 30px; }
.status-lbl { font-size:9.5px; color: var(--dark-faint); margin-bottom:16px; }
.status-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.st-num { font-size:19px; font-weight:510; color: var(--dark-fg); }
.st-num .u { font-size:12px; color: var(--dark-faint); margin-left:3px; }
.st-desc { font-size:12px; color: var(--dark-faint); margin-top:5px; line-height:1.45; }

/* ── SECTIES ── */
section.band { padding: var(--gap-sect) 0; }
/* Anker-landing.
   Sectie zonder eigen vlak: scroll dóór de padding heen, zodat de
   hoofdstukmarkering net onder de vaste header uitkomt (~85px). */
section.band[id] { scroll-margin-top: calc(85px - var(--gap-sect)); }
/* Sectie mét gekleurd vlak: landen op de rand zelf — anders snijd je de
   bovenkant van het vlak af en staat het scheef onder de header. */
section.band.tint[id] { scroll-margin-top: 64px; }
section.band.tint { background: var(--surf-tint); }
.sect-h { font-size: clamp(27px, 3vw, 38px); margin-bottom:16px; }
.sect-h .em { color: var(--brand); }
.sect-lead { font-size:17px; color: var(--fg-body); max-width: 62ch; line-height:1.6; }
.sect-lead strong { color: var(--fg); font-weight:590; }

/* ── blinde vlek ── */
.blind-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; align-items:start; }
.col-lbl { font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.col-lbl.ok { color: var(--ok-text); }
.col-lbl.warn { color: var(--warn-text); }

.card {
  background: var(--surf); border:1px solid var(--rule);
  border-radius:8px; padding:16px 18px; box-shadow: var(--shadow);
}
.card.ok { border-left:3px solid var(--ok); }
.acs-card { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.acs-time { font-size:12px; color: var(--fg-faint); flex-shrink:0; }
.acs-main { flex:1; }
.acs-t { font-size:14.5px; font-weight:590; }
.acs-m { font-size:10px; color: var(--fg-faint); margin-top:4px; }
.acs-pill {
  font-size:9px; padding:4px 10px; border-radius:9999px; flex-shrink:0;
  color: var(--ok-text); background: rgba(47,214,161,0.10); border:1px solid rgba(47,214,161,0.40);
}
.after { font-size:15px; color: var(--fg-body); line-height:1.6; }
.after strong { color: var(--fg); font-weight:590; }
.after-note { font-size:13.5px; color: var(--fg-faint); margin-top:12px; }

.steps { display:flex; flex-direction:column; gap:9px; }
.step {
  display:flex; align-items:center; gap:15px;
  background: var(--surf); border:1px solid var(--rule);
  border-radius:6px; padding:13px 16px;
}
.step-n { font-size:12px; color: var(--fg-faint); flex-shrink:0; }
.step-nm { flex:1; font-size:15px; font-weight:590; }
.step-st { font-size:9.5px; flex-shrink:0; }
.step.reg   { border-left:3px solid var(--ok); }
.step.reg .step-st { color: var(--ok-text); }
.step.un    { opacity:.72; }
.step.un .step-nm { font-weight:510; color: var(--fg-faint); }
.step.un .step-st { color: var(--fg-faint); }
.step.fail  { border-left:3px solid var(--bad); background: rgba(252,38,71,0.03); }
.step.fail .step-st { color: var(--bad-text); }

.punch {
  margin-top:44px; padding:26px 30px;
  background: var(--surf-tint); border-left:3px solid var(--brand); border-radius:8px;
  font-size:19px; font-weight:510; line-height:1.5;
}
.punch .em { color: var(--brand); }

/* ── duo: de combinatie is het punt ──
   Twee gelijkwaardige helften met een plus ertussen. Visueel gezegd:
   wij vervangen niets, wij maken het paar compleet. */
.duo {
  margin-top:44px; padding: clamp(26px,3.2vw,38px);
  background: var(--surf); border:1px solid var(--rule);
  border-radius:12px; box-shadow: var(--shadow);
}
.duo-row {
  display:grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px,3vw,38px); align-items:center;
}
.duo-name { font-size:10px; color: var(--fg-faint); margin-bottom:10px; }
.duo-name.is-accent { color: var(--brand); }
.duo-txt { font-size:15.5px; color: var(--fg-body); line-height:1.55; }
.duo-txt strong { color: var(--fg); font-weight:590; }
.duo-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.duo-chip {
  font-family:'JetBrains Mono', ui-monospace, 'Consolas', monospace;
  font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
  padding:5px 11px; border-radius:9999px;
  color: var(--fg-faint); border:1px solid var(--rule-str);
}
/* zelfde kleurcodering als het gebeurtenislogboek: tussenstappen amber,
   bevestigd groen, alarm rood */
.duo-chip.ok {
  color: var(--ok-text);
  background: rgba(47,214,161,0.10); border-color: rgba(47,214,161,0.40);
}
.duo-chip.warn {
  color: var(--warn-text);
  background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.40);
}
.duo-chip.bad {
  color: var(--bad-text);
  background: rgba(252,38,71,0.08); border-color: rgba(252,38,71,0.40);
}
.duo-plus {
  font-size:22px; font-weight:400; color: var(--brand);
  width:42px; height:42px; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid var(--rule-str); border-radius:9999px;
  background: var(--surf-tint);
}
.duo-sum {
  margin-top: clamp(22px,2.8vw,30px); padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:19px; font-weight:510; line-height:1.5;
}
.duo-sum .em { color: var(--brand); }

@media (max-width: 760px) {
  .duo-row { grid-template-columns:1fr; gap:18px; justify-items:start; }
  .duo-plus { width:34px; height:34px; font-size:18px; }
}

/* ── trio ── */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.trio-c { background: var(--surf); border:1px solid var(--rule); border-top:2px solid var(--brand); border-radius:8px; padding:24px; box-shadow: var(--shadow); }
.trio-v { font-size:10px; color: var(--brand); margin-bottom:12px; }
.trio-d { font-size:14.5px; color: var(--fg-body); line-height:1.55; }
.trio-d strong { color: var(--fg); font-weight:590; }

/* ── wetgeving ── */
.law { background: var(--surf); border:1px solid var(--rule); border-radius:12px; padding: clamp(28px,3.4vw,44px); box-shadow: var(--shadow); margin-top:44px; }
.law-two { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.law-h { font-size:19px; font-weight:590; margin-bottom:6px; }
.law-alias { color: var(--brand); font-weight:510; white-space:nowrap; }
.law-date { font-size:11px; color: var(--brand); margin-bottom:14px; }
.law-b { font-size:14.5px; color: var(--fg-body); line-height:1.6; }
.law-b strong { color: var(--fg); font-weight:590; }
.law-foot { margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); font-size:13.5px; color: var(--fg-faint); line-height:1.6; }
.law-foot .hl { color: var(--fg); font-weight:590; }

/* ── aanbod ── */
.offer { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.of { background: var(--surf); border:1px solid var(--rule); border-radius:8px; padding:26px; box-shadow: var(--shadow); }
.of-ph { font-size:10px; color: var(--brand); margin-bottom:14px; }
.of-h { font-size:17px; font-weight:590; margin-bottom:12px; }
.of ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.of li { font-size:14px; color: var(--fg-body); line-height:1.5; padding-left:16px; position:relative; }
.of li::before { content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:9999px; background: var(--brand); opacity:.55; }

/* ── garantie ── */
.guarantee {
  margin-top:44px; background: var(--dark); color: var(--dark-fg);
  border-radius:12px; padding: clamp(30px,4vw,52px); position:relative; overflow:hidden;
}
.guarantee::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(520px 300px at 82% 12%, rgba(46,117,212,0.08), transparent 66%);
}
.g-in { position:relative; z-index:1; max-width:70ch; }
.g-lbl { font-size:10px; color: var(--accent); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.g-lbl::before { content:""; width:20px; height:1px; background: var(--accent); }
.g-q { font-size: clamp(21px,2.5vw,30px); font-weight:510; line-height:1.35; letter-spacing:-0.02em; }
.g-q .em { color: var(--accent); }
.g-b { margin-top:18px; font-size:15.5px; color: var(--dark-body); line-height:1.6; }
.g-b strong { color: var(--dark-fg); font-weight:590; }

/* ── FAQ ── */
.faq { margin-top:44px; border-top:1px solid var(--rule); }
.qa { border-bottom:1px solid var(--rule); }
.qa summary {
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-size:16.5px; font-weight:510; line-height:1.45;
}
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after {
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--fg-faint); border-bottom:1.5px solid var(--fg-faint);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.qa[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.qa summary:hover { color: var(--brand); }
.qa-a { padding:0 44px 24px 0; font-size:15px; color: var(--fg-body); line-height:1.65; max-width:78ch; }
.qa-a strong { color: var(--fg); font-weight:590; }
.qa-a p + p { margin-top:12px; }

/* ── slot-CTA ── */
.close-cta { background: var(--dark); color: var(--dark-fg); position:relative; overflow:hidden; }
.close-cta::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(700px 420px at 50% 0%, rgba(46,117,212,0.08), transparent 66%);
}
.cc-in { position:relative; z-index:1; padding: var(--gap-sect) 0; text-align:center; }
/* de twee vragen keren klein terug — herkenning, geen nieuwe prik */
.cc-recall {
  font-size:15px; color: var(--dark-faint); line-height:1.6;
  max-width:52ch; margin:0 auto 22px;
}
.cc-h { font-size: clamp(28px,3.4vw,42px); margin-bottom:18px; }
.cc-h .em { color: var(--accent); }
.cc-sub { font-size:17px; color: var(--dark-body); max-width:56ch; margin:0 auto 32px; line-height:1.6; }
.cc-in .cta-row { justify-content:center; }
.cc-in .reversal { justify-content:center; }

/* ── footer ── */
.ftr { background: var(--dark-2); color: var(--dark-faint); border-top:1px solid var(--dark-rule); }
.ftr-in { padding:34px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ftr a { color: var(--dark-body); text-decoration:none; }
.ftr a:hover { color: var(--accent); }
.ftr-links { display:flex; gap:22px; font-size:13.5px; flex-wrap:wrap; }
.ftr-claim { font-size:9.5px; }
/* werkvarianten — volle breedte onder de footerregel, bewust onopvallend */
.ftr-variants {
  flex-basis:100%; display:flex; gap:16px; align-items:center;
  padding-top:18px; margin-top:4px; border-top:1px solid var(--dark-rule);
  font-size:9.5px; color: rgba(247,248,248,0.28);
}
.ftr-variants a { color: rgba(247,248,248,0.4); text-decoration:none; }
.ftr-variants a:hover { color: var(--accent); }
.ftr .lockup { opacity:.8; }
.ftr .lockup .word { font-size:15px; }

/* ── STICKY ONDERBALK ── */
.sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background: rgba(8,9,10,0.94);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--dark-rule);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.sticky.show { transform:none; }
.sticky-in { display:flex; align-items:center; gap:16px; padding:13px 0; }
.sticky-tag {
  font-size:9px; padding:4px 9px; border-radius:9999px; flex-shrink:0;
  color: var(--accent); border:1px solid rgba(90,159,232,0.36); background: rgba(90,159,232,0.08);
}
.sticky-txt { flex:1; font-size:14px; color: var(--dark-body); line-height:1.4; }
.sticky-txt strong { color: var(--dark-fg); font-weight:590; }
.sticky-txt a { color: var(--accent); text-decoration:none; }
.sticky-txt a:hover { text-decoration:underline; }
.sticky-x {
  background:none; border:none; cursor:pointer; color: var(--dark-faint);
  font-size:19px; line-height:1; padding:5px 3px; flex-shrink:0;
}
.sticky-x:hover { color: var(--dark-fg); }

/* ── MODAL ── */
.ovl {
  position:fixed; inset:0; z-index:90; display:none;
  background: rgba(8,9,10,0.72); backdrop-filter: blur(4px);
  align-items:center; justify-content:center; padding:24px;
}
.ovl.show { display:flex; }
.modal {
  background: var(--surf); color: var(--fg);
  border:1px solid var(--rule); border-radius:12px;
  width:100%; max-width:520px; padding: clamp(26px,3vw,38px);
  box-shadow: var(--shadow-lift); position:relative;
  max-height: calc(100vh - 48px); overflow-y:auto;
  animation: pop .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes pop { from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
.modal-x {
  position:absolute; top:14px; right:16px; background:none; border:none;
  cursor:pointer; font-size:23px; line-height:1; color: var(--fg-faint);
}
.modal-x:hover { color: var(--fg); }
.modal h2 { font-size:23px; margin-bottom:10px; }
.modal-sub { font-size:14.5px; color: var(--fg-body); line-height:1.6; margin-bottom:24px; }
.modal-sub.tight { margin-bottom:0; }
.fld { margin-bottom:15px; }
.fld label { display:block; font-size:12.5px; font-weight:510; margin-bottom:6px; }
.fld .opt { color: var(--fg-faint); font-weight:400; }
.fld input, .fld textarea {
  width:100%; font-family:inherit; font-size:15px; color: var(--fg);
  background: var(--canvas); border:1px solid var(--rule-str); border-radius:6px;
  padding:11px 13px; transition: border-color .15s ease;
}
.fld input:focus, .fld textarea:focus { outline:none; border-color: var(--brand); }
.fld textarea { resize:vertical; min-height:76px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.modal .btn { width:100%; justify-content:center; margin-top:8px; }
.modal-alt { margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); font-size:13.5px; color: var(--fg-faint); text-align:center; }
.modal-alt.bare { border:none; margin-top:20px; padding-top:0; }
.modal-alt a { color: var(--brand); text-decoration:none; font-weight:510; }
.done { text-align:center; padding:16px 0; }
.done-ic { width:46px; height:46px; margin:0 auto 18px; border-radius:9999px; background: rgba(47,214,161,0.12); border:1px solid rgba(47,214,161,0.42); display:grid; place-items:center; }
.done-ic svg { width:22px; height:22px; stroke: var(--ok-text); }

/* ── WERKSCHAKELAAR (tijdelijk) ──
   Alleen voor de preview: heen en weer tussen de nieuwe en de oude opzet,
   zodat er onderdelen uit te kiezen zijn. Weghalen vóór livegang. */
.hdr-switch {
  display:flex; align-items:center; gap:2px; padding:3px;
  border:1px solid rgba(255,255,255,0.14); border-radius:9999px;
  background: rgba(255,255,255,0.03);
}
.hdr-switch a {
  font-size:12px; font-weight:510; letter-spacing:.2px;
  color: var(--dark-faint); text-decoration:none;
  padding:6px 14px; border-radius:9999px; white-space:nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.hdr-switch a:hover { color: var(--dark-fg); }
.hdr-switch a.on { background: var(--brand); color:#fff; }

/* ── VERVOLG onder het eerste scherm ── */
.next-lead { font-size:17px; color: var(--fg-body); max-width:62ch; line-height:1.6; margin-top:14px; }
.next-lead strong { color: var(--fg); font-weight:590; }
.next-more { display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-size:15px; font-weight:510; color: var(--brand); text-decoration:none; }
.next-more:hover { text-decoration:underline; }
.next-more .arw { transition: transform .16s ease; }
.next-more:hover .arw { transform: translateX(3px); }

/* ══ WILDCARD — het scherm is de demo ══
   Eén zwart scherm, het pulserende logo uit de placeholder, en een
   getimede sequentie die het kernmoment naspeelt: bezoek voorbij,
   deur dicht — wie bewijst dat hij op slot zit? Alles duwt daarna
   naar één uitgang: Ontdek LockTrace. Puur CSS, geen JS nodig. */
@keyframes riseIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeIn { to { opacity:1; } }

.wc {
  position:relative; overflow:hidden;
  min-height:100dvh;
  background: var(--dark); color: var(--dark-fg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(22px,3.6vh,40px);
  padding: clamp(24px,4vh,48px) 24px clamp(64px,9vh,96px);
  text-align:center;
}

/* ambient laag — uit de placeholder */
.wc-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: repeating-linear-gradient(
    -54deg,
    transparent 0px, transparent 88px,
    rgba(46,117,212,0.014) 88px, rgba(46,117,212,0.014) 89px
  );
}
.wc-glow {
  position:absolute; border-radius:9999px; z-index:0; pointer-events:none;
  width:min(760px,100vw); height:min(760px,100vw);
  top:42%; left:50%; transform:translate(-50%,-50%);
  background: radial-gradient(circle,
    rgba(46,117,212,0.10) 0%, rgba(46,117,212,0.04) 45%, transparent 70%);
  animation: wc-breathe 6s ease-in-out infinite;
}
@keyframes wc-breathe { 0%,100%{opacity:.7} 50%{opacity:1} }

/* ── lockup: het pulserende logo + woordmerk ── */
.wc-lockup {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  gap: clamp(18px,3.6vw,44px); flex-wrap:wrap;
  margin-top: clamp(14px,3vh,34px);
  opacity:0; animation: fadeIn .6s ease 1.9s forwards;
}
.wc-logo {
  position:relative; flex-shrink:0;
  width: clamp(84px,14vh,144px); height: clamp(84px,14vh,144px);
  display:flex; align-items:center; justify-content:center;
}
/* de ringen vertrekken op het moment dat de dot landt (1.4s) —
   tekenen → dot → puls is één doorlopende beweging */
.wc-ring {
  position:absolute; inset:0; overflow:visible;
  opacity:0; animation: wc-hexpulse 5.5s ease-out infinite both;
}
.wc-ring:nth-child(1) { animation-delay: 3.9s; }
.wc-ring:nth-child(2) { animation-delay: 5.8s; }
.wc-ring:nth-child(3) { animation-delay: 7.7s; }
.wc-ring path {
  fill:none; stroke: rgba(46,117,212,0.55); stroke-width:1.5;
  stroke-linejoin:miter; transform-origin:50% 50%; transform-box:view-box;
}
@keyframes wc-hexpulse {
  0%   { opacity:0;   transform:scale(.86); }
  8%   { opacity:.65; }
  100% { opacity:0;   transform:scale(2.05); }
}
.wc-mark {
  position:relative; z-index:2; width:100%; height:100%;
  filter: drop-shadow(0 0 28px rgba(46,117,212,0.32));
}
/* eerst de dot, dan de lijn: het pad begint bij de dot, dus de streek
   vertrekt zichtbaar vanuit de dot en tekent de hexagon rond (klaar 1.7s) */
.wc-mark path {
  fill:none; stroke: var(--brand); stroke-width:3.8;
  stroke-linejoin:miter; stroke-miterlimit:10;
  stroke-dasharray:560; stroke-dashoffset:560;
  animation: wc-draw 1.5s ease 2.4s forwards;
}
.wc-mark circle {
  fill: var(--accent); opacity:0;
  animation: wc-dotin .25s ease-out 2.15s forwards;
}
@keyframes wc-draw { to { stroke-dashoffset:0; } }
@keyframes wc-dotin {
  from { opacity:0; r:2; }
  to   { opacity:1; r:6; }
}
.wc-word {
  font-size: clamp(38px,7.6vh,78px); font-weight:590;
  letter-spacing:-0.03em; line-height:1; white-space:nowrap;
}

/* ── de trigger: vraag + antwoord staan er meteen ──
   Het eerste wat iemand ziet is de vraag, niet het merk. Het logo
   ondertekent daarna. */
.wc-ask {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap: clamp(14px,2.6vh,24px);
  opacity:0;
  animation: fadeIn .7s ease .15s forwards;
}
.wc-q2 {
  font-size: clamp(29px,5.4vh,54px); font-weight:590;
  letter-spacing:-0.028em; line-height:1.16;
}
.wc-q2 .em { color: var(--accent); }
.wc-ans {
  font-size: clamp(15.5px,2.3vh,19px); color: var(--dark-body);
}
.wc-ans .hl { color: var(--dark-fg); font-weight:590; }

/* ══ VARIANT 2: merk eerst, dan de vraag ══
   Zelfde onderdelen, omgekeerde volgorde en de oorspronkelijke timing:
   logo bouwt op → regel + facts → pas daarna de vraag. */
.wc.is-brandfirst .wc-lockup { margin-top:0; animation: fadeIn .6s ease .1s forwards; }
.wc.is-brandfirst .wc-mark circle { animation: wc-dotin .25s ease-out .35s forwards; }
.wc.is-brandfirst .wc-mark path   { animation: wc-draw 1.5s ease .6s forwards; }
.wc.is-brandfirst .wc-ring:nth-child(1) { animation-delay: 2.1s; }
.wc.is-brandfirst .wc-ring:nth-child(2) { animation-delay: 4s; }
.wc.is-brandfirst .wc-ring:nth-child(3) { animation-delay: 5.9s; }
.wc.is-brandfirst .wc-rule { animation: fadeIn .4s ease .45s forwards; }
.wc.is-brandfirst .wc-meta { animation: riseIn .45s ease .5s forwards; }
.wc.is-brandfirst .wc-ask  { animation: riseIn .8s ease 2.7s forwards; }
.wc.is-brandfirst .wc-logo { width: clamp(96px,17vh,180px); height: clamp(96px,17vh,180px); }
.wc.is-brandfirst .wc-word { font-size: clamp(46px,9.5vh,100px); }

/* ── blauwe regel + drie facts — uit de placeholder ── */
.wc-rule {
  position:relative; z-index:1;
  width:min(560px,80vw); height:1px;
  background: linear-gradient(to right,
    transparent 0%, rgba(46,117,212,0.35) 30%,
    rgba(46,117,212,0.35) 70%, transparent 100%);
  opacity:0; animation: fadeIn .4s ease 2.25s forwards;
}
.wc-meta {
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap; padding:0 16px;
  font-size: clamp(11px,1.6vh,15px); letter-spacing:.18em;
  color: var(--accent);
  opacity:0; transform:translateY(10px);
  animation: riseIn .45s ease 2.3s forwards;
}
.wc-meta .sep { color: var(--dark-faint); }
.wc-metadot {
  width:6px; height:6px; border-radius:9999px; background: var(--accent);
  flex-shrink:0;
  animation: wc-blink 3s ease-in-out 2.3s infinite;
}
@keyframes wc-blink { 0%,85%,100%{opacity:1} 92%{opacity:.1} }

/* skip: wie niet wil wachten, klikt of scrolt gewoon — inhoud staat eronder.
   De uitgang is de gewone .discover ("Ontdek LockTrace ↓"), meteen
   zichtbaar onderaan — clean en wit, zoals op Home. */
@media (prefers-reduced-motion: reduce) {
  .wc-lockup, .wc-ask, .wc-rule, .wc-meta { animation:none; opacity:1; transform:none; }
  .wc-metadot { animation:none; }
  .wc-mark path { animation:none; stroke-dashoffset:0; }
  .wc-mark circle { animation:none; opacity:1; }
  .wc-ring, .wc-glow { animation:none; opacity:0; }
}

@media (max-width: 600px) {
  .wc-word { font-size: clamp(38px,11vw,56px); }
  .wc-q2 br { display:none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 820px) {
  .hdr-nav { display:none; }
}
@media (max-width: 940px) {
  .hero-grid, .blind-grid, .law-two { grid-template-columns:1fr; }
  .trio, .offer { grid-template-columns:1fr; }
  .status-grid { grid-template-columns:repeat(2,1fr); row-gap:24px; }
  .hero { padding-top:44px; }
  .feed-body { min-height:0; }
  .hero-full { min-height:0; padding-top:40px; }
  .hero-copy .btn-primary { align-self:stretch; justify-content:center; }
  .discover { display:none; }
}
@media (max-width: 600px) {
  .hdr .btn-hdr { display:none; }
  .status-grid { grid-template-columns:1fr; }
  .trust { font-size:13px; gap:4px 18px; }
  .cta-row { flex-direction:column; align-items:stretch; }
  .cta-row .btn { justify-content:center; }
  /* Knoptekst mag hier wel afbreken. Zonder dit eist "Plan een gesprek van
     30 minuten" 410px in een scherm van 345: de knop kan niet krimpen en duwt
     de hele grid-kolom breder dan het scherm, waardoor alles ernaast (feed,
     statuslabels, lopende tekst) buiten beeld valt zonder dat je erheen kunt
     scrollen. Eén knop, achttien afgekapte elementen. */
  .btn { white-space: normal; }
  /* Vangnet: grid-items hebben standaard min-width:auto en weigeren dan kleiner
     te worden dan hun breedste onbreekbare inhoud. Dit houdt de kolom binnen het
     scherm als er later een lang woord of een brede tabel bij komt. */
  .hero-grid > * { min-width: 0; }
  .sticky-txt { font-size:13px; }
  .sticky-tag { display:none; }
}