/* ============================================================================
   SCA AGENCY — SHARED DESIGN SYSTEM
   Salescaptain Agency · premium B2B growth-system · maritime/captain metaphor
   Visual target: Linear / Vercel / Framer / Attio — dark, deep, subtle motion.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces — LIGHT (Taqiro). Names kept; values flipped to light surfaces.
     --ink = page/paper, --ink-2 = alt section bg, --ink-3 = deeper tint.
     Briefing V2: alt surfaces krijgen een warme (ivoor) ondertoon voor een
     warmere beleving; tekstkleuren een tik donkerder voor meer contrast. */
  --ink: #FFFFFF;
  --ink-2: #F7F6F1;
  --ink-3: #EFEDE5;
  --blue-tint: #EAF1FE;

  /* Accent — professional BLUE (was neon cyan). Names kept so rules resolve. */
  --cyan: #1858EA;
  --cyan-2: #3D78FF;
  --cyan-soft: #1858EA;

  /* Lines / text — navy headings, slate body; --white now means primary TEXT.
     Many components used var(--white) as a text color on dark; on light it must
     read as navy/slate. We point --white at the navy heading colour so that
     legacy "text: var(--white)" renders dark-on-light + readable. */
  --line: #E5E4DC;
  --muted: #5C7085;
  --white: #071B33;          /* primary navy text (legacy "white text") */
  --navy: #071B33;           /* headings */
  --slate: #2B3E54;          /* body text */
  --paper: #FFFFFF;          /* true white where a real white is needed */

  /* Aurora / AI glow — blue family, calm */
  --aurora-1: #1858EA;
  --aurora-2: #3D78FF;
  --aurora-3: #4C7DF0;

  /* Status */
  --success: #16A36A;
  --success-ink: #0F7A4F;    /* donkerder groen voor TEKST · --success haalt maar 2,84:1 op de lichtgroene badge, dit 4,70:1 */
  --warning: #E08A1E;
  --danger: #E0455F;

  /* Glass — light translucent card with a light hairline border */
  --glass: rgba(255, 255, 255, .7);
  --glass-brd: #E5E4DC;

  /* Effects — soft, subtle, navy-tinted low-alpha shadows (no neon glow) */
  --glow-cyan: 0 8px 30px rgba(11, 36, 64, .10);
  --glow-soft: 0 8px 30px rgba(11, 36, 64, .08);
  --shadow-1: 0 8px 30px rgba(11, 36, 64, .08);
  --shadow-2: 0 18px 50px rgba(11, 36, 64, .12);

  /* Radii */
  --radius: 16px;
  --radius-lg: 28px;
  --radius-pill: 40px;

  /* Type families */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);

  /* Spacing scale (8pt-ish) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --container: 1180px;
  --container-narrow: 820px;
  --nav-h: 72px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .18s;
  --dur-2: .35s;
  --dur-3: .6s;

  /* Z-index */
  --z-nav: 100;
  --z-drawer: 110;
  --z-modal: 200;
  --z-toast: 300;
  --z-chat: 90;
  --z-mobilecta: 95;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   1b. TOKENS · SALESMACHINE OS  (design-contract V2 · juli 2026)
   VOLLEDIG ADDITIEF. Geen enkele bestaande tokenwaarde hierboven wijzigt.
   --ink, --ink-2, --ink-3, --cyan, --navy, --slate, --line, --muted, --paper,
   --gold*, --sand*, --radius, --radius-lg, --radius-pill, --container, --nav-h,
   --ease en --dur-1..3 blijven EXACT zoals ze in §1 staan: die acht raken in
   een klap alle 18 pagina's inclusief blogkaarten, funnel-modal en prijskaarten,
   op een site die live op het klantdomein staat. Blast radius van dit blok: nul.
   De componenten die deze tokens gebruiken staan in §36.
   --------------------------------------------------------------------------- */
:root {

  /* ---- BUGFIX-ALIASSEN · vier geverifieerde dode tokens/klassen ------------
     Nagemeten: var(--accent) en var(--hair) worden in index.html gebruikt maar
     zijn NERGENS gedefinieerd, dus het hero-accentwoord rendert vandaag navy
     i.p.v. blauw en .hero__quiet-link heeft geen onderrand. Deze zes regels
     repareren dat zonder een enkele byte HTML aan te raken. */
  --accent:       #1858EA;              /* = --cyan  · merkblauw, ongewijzigd */
  --accent-2:     #3D78FF;              /* = --cyan-2 */
  --accent-ink:   #1246C4;              /* accent als KLEINE tekst op wit · 6,2:1 */
  --hair:         #E5E4DC;              /* = --line */
  --hair-2:       rgba(7, 27, 51, .10); /* zachte scheiding BINNEN een paneel */
  --hair-strong:  rgba(7, 27, 51, .20); /* rand van een actief paneel */

  /* ---- BRAND-RAMP (blauw = HET SYSTEEM) ---------------------------------- */
  --brand-50:   #F0F5FF;   /* actieve rij / chipvlak binnen een scherm */
  --brand-100:  #DEE9FE;   /* hover-vlak, selectie, gevulde staaf */
  --brand-200:  #C2D6FD;   /* rand van een actief UI-element */
  --brand-300:  #8FB4FF;   /* accent OP donker · 8,4:1 op --ink-900 */
  --brand-400:  #3D78FF;   /* hover primaire knop */
  --brand-500:  #1858EA;   /* MERKDRAGER · 5,80:1 op wit = AA */
  --brand-600:  #1246C4;   /* eyebrow-tekst + links op licht · 6,2:1 = AA */
  --brand-700:  #0E369B;   /* active state */
  --brand-800:  #0B2A78;   /* diepste blauw in verlopen */

  /* ---- INK-RAMP (navy → grijsblauw · oppervlak EN tekst) ------------------ */
  --ink-900:  #071B33;   /* = --navy · koppen + donkere secties */
  --ink-800:  #0B2440;   /* tweede stop van het inkt-verloop */
  --ink-700:  #10345A;   /* paneelvlak BINNEN een inkt-sectie */
  --ink-600:  #1B3C63;   /* randen op inkt */
  --ink-500:  #2B3E54;   /* = --slate · bodytekst · 10,4:1 op wit */
  --ink-400:  #5C7085;   /* = --muted · labels · 5,4:1 op wit = AA */
  --ink-300:  #8493A5;   /* iconen/disabled · VERBODEN voor lopende tekst */
  --ink-200:  #CBD7E6;   /* scheidingslijn BINNEN een scherm */
  --ink-100:  #E5E4DC;   /* = --line · hairline */

  /* ---- ON-DARK TEKST ------------------------------------------------------ */
  --on-dark:     #F2F5F9;               /* 15,4:1 op --ink-900 */
  --on-dark-2:   #A9BACD;               /* secundair · 7,1:1 op --ink-900 */
  --hair-dark:   rgba(255, 255, 255, .09);
  --hair-dark-2: rgba(255, 255, 255, .18);

  /* ---- PAPIER (warm) ------------------------------------------------------ */
  --paper-1:  #FFFFFF;   /* = --ink   */
  --paper-2:  #F7F6F1;   /* = --ink-2 · warm ivoor */
  --paper-3:  #EFEDE5;   /* = --ink-3 */

  /* ---- SIGNAAL · UITSLUITEND BINNEN EEN .sui-SCHERM -----------------------
     Regel: de signaalkleur kleurt VORM, de -ink variant kleurt LETTER. De
     grafische varianten zitten onder 4,5:1 en mogen NOOIT tekst dragen. */
  --live:       #16A36A;   /* = --success · bolletje, geboekt slot, vinkje */
  --live-ink:   #0B6B45;   /* dezelfde status als TEKST · 6,9:1 op --live-soft */
  --live-soft:  #E4F6EE;
  --live-300:   #5FE3B0;   /* live op donker */
  --wait:       #E08A1E;   /* = --warning */
  --wait-ink:   #8A5310;   /* 6,1:1 op --wait-soft */
  --wait-soft:  #FCF1DF;
  --lost:       #E0455F;   /* = --danger */
  --lost-ink:   #A32439;
  --lost-soft:  #FCEEF0;

  /* ---- GOUD · UITSLUITEND BEWIJS -----------------------------------------
     Goud raakt nooit een systeem-element aan, blauw raakt nooit een
     bewijs-element aan. Nooit op een knop. --gold/--gold-2/--gold-ink/
     --gold-soft staan al in §35.0 en worden hier NIET overschreven. */
  --gold-on-dark: #C99A46;   /* = --gold-2 · 6,8:1 op navy */

  /* ---- ALPHA-HELPERS · vervangen de hardgecodeerde rgba(24,88,234,..) ----- */
  --brand-a08: rgba(24, 88, 234, .08);
  --brand-a14: rgba(24, 88, 234, .14);
  --brand-a24: rgba(24, 88, 234, .24);
  --navy-a06:  rgba(7, 27, 51, .06);
  --navy-a12:  rgba(7, 27, 51, .12);
  --navy-a22:  rgba(7, 27, 51, .22);

  /* ---- ELEVATIE · getint op NAVY, nooit op zwart -------------------------- */
  --e1: 0 1px 2px var(--navy-a06), 0 1px 1px rgba(7, 27, 51, .04);
  --e2: 0 4px 12px -2px rgba(7, 27, 51, .08), 0 2px 4px -1px rgba(7, 27, 51, .05);
  --e3: 0 12px 28px -8px var(--navy-a12), 0 4px 10px -4px rgba(7, 27, 51, .07);
  --e4: 0 28px 60px -20px var(--navy-a22), 0 10px 24px -12px var(--navy-a12);
  /* De 1px inset-highlight bovenaan is wat van een div een fysiek SCHERM maakt */
  --e-screen: 0 48px 100px -40px rgba(7, 27, 51, .38),
              0 18px 40px -20px rgba(7, 27, 51, .18),
              inset 0 1px 0 rgba(255, 255, 255, .9);
  --e-screen-dark: 0 48px 100px -40px rgba(0, 0, 0, .55),
              inset 0 1px 0 rgba(255, 255, 255, .07);
  --ring-inset:      inset 0 0 0 1px var(--hair);
  --ring-inset-dark: inset 0 0 0 1px var(--hair-dark-2);
  --focus-ring: 0 0 0 2px var(--paper-1), 0 0 0 4px var(--brand-500);

  /* ---- RADII · ADDITIEF. --radius/-lg/-pill blijven 16/28/40px ------------ */
  --radius-screen: 20px;  /* software heeft KLEINERE radii dan marketing */
  --radius-sm:     12px;
  --radius-chip:    8px;

  /* ---- LAYOUT · --container blijft 1180px (de nav zit op breedtecapaciteit) */
  --container-wide: 1320px;
  --container-read:  760px;
  --gutter: clamp(20px, 5vw, 40px);

  /* ---- MOTION · ADDITIEF. --dur-1/2/3 en --ease blijven ongewijzigd ------- */
  --dur-4:   .9s;    /* scherm-choreografie */
  --dur-seq: 11s;    /* de 35-seconden cyclus · 9s actie + 2s rust */
  --ease-spring: cubic-bezier(.34, 1.42, .64, 1); /* max 2x per pagina */

  /* ---- BLAUWDRUKRASTER · puur CSS, 0 requests ----------------------------- */
  --grid-line:      rgba(24, 88, 234, .05);
  --grid-line-dark: rgba(255, 255, 255, .05);
  --grid-size: 32px;

  /* ---- TYPE · mono is NIEUW en dekt alle systeemdata ----------------------
     Valt vandaag terug op de systeem-mono; de fonts-stap zet er later
     'Geist Mono' voor. --font-display/--font-body blijven ONGEWIJZIGD tot de
     self-host-stap de woff2's plaatst, anders vallen alle koppen sitewide
     terug op de bodyfont. */
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* ---- BREEKPUNTEN (documentatie; media queries gebruiken de px) ----------
     --bp-sm 560 · --bp-md 768 · --bp-lg 1024 · --bp-xl 1280
     BESTAANDE UITZONDERINGEN DIE BLIJVEN: 720px (mobiel-minimaal, gedeeld met
     app.js SMALL en .mobile-cta) en de nav-banden 1025-1199 / >=1200. */

  /* ---- CIJFERDISCIPLINE · zie de regel direct onder deze :root-blok.
     tabular-nums staat BEWUST NIET hier. In browser geverifieerd: op :root maakt
     tnum ook de PUNT en de KOMMA tabelbreed, want die horen bij een cijferreeks
     (1.234,56). Gemeten in Schibsted Grotesk op 80px: punt 48px in plaats van
     23px. Dat gaf een zichtbaar gat voor elke punt in de hero-H1 en in elke
     alinea op de hele site. tabular-nums hoort dus op de cijfers zelf. ------- */
}

/* --- 1c. HET ACCENTKLASSE-CONTRACT · lost de tweede dode-klasse-bug op -------
   Er is vanaf nu PRECIES EEN accentklasse: .text-accent. De drie andere namen
   zijn DEPRECATED-aliassen op exact dezelfde regel. NIET verwijderen voordat de
   grep-poort nul treffers geeft: .accent-blue staat op de hero-H1 en is de
   reden dat het accentwoord vandaag navy is in plaats van blauw. -------------- */
.text-accent { color: var(--accent); }
/* DEPRECATED ALIAS — verwijderdatum: na een groene grep-poort. */
.text-cyan, .accent-blue, .accent { color: var(--accent); }
/* Op donkere secties moet hetzelfde accent leesbaar blijven (8,4:1 op --ink-900). */
.surface-ink .text-accent, .surface-ink .text-cyan,
.surface-ink .accent-blue, .surface-ink .accent { color: var(--brand-300); }

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
/* [hidden] moet ALTIJD winnen van display-regels op klassen (anders toont bv.
   .lead-magnet__success{display:flex} zich ondanks het hidden-attribuut). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--slate);
  background: var(--ink);
  line-height: 1.65;
  min-height: 100%;
  /* CONTRACT-EIS (§36): overflow-x:hidden maakt van body een scroll-container en
     breekt position:sticky STIL, zonder foutmelding. clip doet dat niet. De
     hidden-regel blijft als fallback staan voor engines zonder overflow:clip
     (Safari < 16); daar gedraagt de pagina zich exact zoals vandaag. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "cv11";
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

::selection { background: rgba(24, 88, 234, .18); color: var(--navy); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: #CBD7E6; border-radius: 8px; border: 2px solid var(--ink-2); }
::-webkit-scrollbar-thumb:hover { background: #AEC0D6; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: var(--z-toast);
  background: var(--cyan); color: var(--paper); padding: 10px 18px;
  border-radius: 10px; font-weight: 700; transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 700; }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; }
h4 { font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 600; }

p { color: var(--slate); }
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--slate);
  line-height: 1.6;
  max-width: 60ch;
}
.muted { color: var(--muted); }
.text-cyan { color: var(--cyan); }
.balance { text-wrap: balance; }
.measure { max-width: 62ch; }

/* Accent word — minimalist: a single static blue accent, no animation.
   (grad-text/shimmer-text are neutralized to a flat blue per brief.) */
.grad-text {
  color: var(--cyan);
  -webkit-text-fill-color: var(--cyan);
  background: none;
}

/* ---------------------------------------------------------------------------
   4. LAYOUT / CONTAINERS
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--flush-top { padding-top: 0; }

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.08rem; color: var(--slate); }

.grid { display: grid; gap: clamp(18px, 2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 24px; }
.wrap-flex { flex-wrap: wrap; }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-4 { margin-top: 16px; } .mt-5 { margin-top: 24px; } .mt-6 { margin-top: 32px; }
.hidden { display: none !important; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* Collapse two-column sections one column early so content panels (e.g. the
     "Wat je krijgt" deliverables list) get full width on portrait tablets instead
     of being squeezed into a ~40% column. */
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* Section divider hairline */
.hairline {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  margin-block: 0;
}

/* ---------------------------------------------------------------------------
   5. EYEBROW
   --------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::before {
  width: 16px;
  background: linear-gradient(90deg, transparent, var(--cyan));
}

/* ---------------------------------------------------------------------------
   6. BUTTONS  (pill, lift + glow)
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--cyan);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  cursor: pointer;
  isolation: isolate;
  transition: transform var(--dur-1) var(--ease),
              box-shadow var(--dur-2) var(--ease),
              background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }

/* Primary: solid blue, white text, soft navy-tinted lift (no neon) */
.btn:hover {
  transform: translateY(-2px);
  background: var(--cyan-2);
  box-shadow: 0 8px 22px rgba(24, 88, 234, .22);
}
.btn:active { transform: translateY(0); }

/* Ghost / secondary: navy text + light border on white */
.btn-ghost {
  --btn-bg: var(--paper);
  --btn-fg: var(--navy);
  background: var(--paper);
  border: 1px solid var(--line);
  backdrop-filter: none;
}
.btn-ghost:hover {
  transform: translateY(-2px);
  background: var(--ink-2);
  border-color: #CBD7E6;
  box-shadow: var(--shadow-1);
  color: var(--navy);
}

/* Glow — NEUTRALIZED to the clean primary (selector kept; no neon edge).
   .btn-glow now looks identical to a solid-blue primary button. */
.btn-glow {
  --btn-fg: var(--paper);
  background: var(--cyan);
  box-shadow: none;
}
.btn-glow::before {
  content: none;
}
.btn-glow:hover {
  transform: translateY(-2px);
  background: var(--cyan-2);
  box-shadow: 0 8px 22px rgba(24, 88, 234, .22);
}
@property --shimmer-angle {
  syntax: "<angle>"; initial-value: 0deg; inherits: false;
}
@keyframes shimmer-rotate { to { --shimmer-angle: 360deg; } }

.btn-lg { padding: 17px 34px; font-size: 1.05rem; }
.btn-sm { padding: 10px 18px; font-size: .88rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Magnetic helper (JS adds inline translate via --mx/--my; CSS keeps it smooth) */
.magnetic { transition: transform var(--dur-2) var(--ease); }

/* ---------------------------------------------------------------------------
   7. CARD (glass, hover-tilt, glow)
   --------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
/* Top sheen — minimal (inert tint) */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(24, 88, 234, .03), transparent 55%);
  opacity: 1;
  pointer-events: none;
}
/* Cursor-follow glow (JS sets --gx/--gy) — neutralized to a faint blue wash */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(24, 88, 234, .05), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: #CBD7E6;
  box-shadow: var(--shadow-2);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }

.card-tilt { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }

.card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  color: var(--cyan);
  margin-bottom: 20px;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: .98rem; }

.card--feature { padding: clamp(28px, 3.5vw, 40px); }
.card--ai { border-color: var(--line); }
.card--ai .card__icon {
  background: var(--blue-tint);
  color: var(--cyan);
}
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 18px; color: var(--cyan); font-weight: 600; font-size: .95rem;
  transition: gap var(--dur-1) var(--ease);
}
.card-link svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.card:hover .card-link { gap: 10px; }
.card:hover .card-link svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   8. PILL / BADGE
   --------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  color: var(--cyan);
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(22, 163, 106, .12);
  border: 1px solid rgba(22, 163, 106, .35);
  color: var(--success-ink);
}
.badge--free { background: rgba(22, 163, 106, .12); border-color: rgba(22, 163, 106, .4); color: var(--success-ink); }
.badge--hot {
  background: var(--cyan);
  border-color: transparent; color: var(--paper);
  box-shadow: none;
}
.badge--purple { background: var(--blue-tint); border-color: var(--line); color: var(--cyan); }

/* ---------------------------------------------------------------------------
   9. AURORA (animated gradient-mesh background)
   --------------------------------------------------------------------------- */
.aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .06;
  mix-blend-mode: normal;
  will-change: transform;
}
.aurora__blob--1 {
  width: 46vw; height: 46vw; min-width: 380px; min-height: 380px;
  top: -14%; left: -8%;
  background: radial-gradient(circle at 30% 30%, var(--aurora-1), transparent 70%);
  animation: aurora-drift-1 22s var(--ease-in-out) infinite;
}
.aurora__blob--2 {
  width: 40vw; height: 40vw; min-width: 320px; min-height: 320px;
  top: -4%; right: -10%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-2), transparent 68%);
  animation: aurora-drift-2 26s var(--ease-in-out) infinite;
}
.aurora__blob--3 {
  width: 38vw; height: 38vw; min-width: 300px; min-height: 300px;
  bottom: -18%; left: 28%;
  background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 66%);
  opacity: .05;
  animation: aurora-drift-3 30s var(--ease-in-out) infinite;
}
/* Subtle masking fade so the aurora melts into the page */
.aurora--fade::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--ink) 96%);
}

@keyframes aurora-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, 6%, 0) scale(1.12); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-7%, 9%, 0) scale(.92); }
}
@keyframes aurora-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, -8%, 0) scale(1.15); }
}

/* ---------------------------------------------------------------------------
   10. GRAIN OVERLAY
   --------------------------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;            /* inert on light theme (decorative grain removed) */
  mix-blend-mode: normal;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Faint navigational grid / depth lines — very subtle hairline on light */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 36, 64, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 36, 64, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
}

/* ---------------------------------------------------------------------------
   11. NAV (sticky, blur, mobile drawer)
   --------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(11, 36, 64, .06);
}
.nav__inner {
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.02em; color: var(--navy);
}
/* Ilker brand logo (horizontal lockup) — replaces the text wordmark in nav + footer.
   Selectors are scoped per region (header bar / drawer / footer) so sizing never
   cross-leaks: the footer link reuses .nav__brand, so we key off the containers. */
.brand-logo { display: block; width: auto; height: 40px; }
.nav__inner .brand-logo { height: 38px; }
.nav__drawer-head .brand-logo { height: 32px; }
.footer__brand .brand-logo { height: 46px; }
@media (max-width: 768px) {
  .nav__inner .brand-logo { height: 32px; }
}

.nav__menu { display: flex; align-items: center; gap: 4px; }
.nav__link {
  position: relative;
  padding: 9px 14px; border-radius: 10px;
  font-size: .93rem; font-weight: 500; color: var(--slate);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__link:hover { color: var(--navy); background: var(--ink-2); }

/* Dropdowns */
.nav__item { position: relative; }
.nav__item > .nav__link { display: inline-flex; align-items: center; gap: 5px; }
.nav__item > .nav__link svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
.nav__dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 290px;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__item:hover > .nav__link svg,
.nav__item:focus-within > .nav__link svg { transform: rotate(180deg); }
.nav__drop-link {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; border-radius: 11px;
  transition: background var(--dur-1) var(--ease);
}
.nav__drop-link:hover { background: var(--ink-2); }
.nav__drop-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--cyan);
  background: var(--blue-tint); border: 1px solid var(--line);
}
.nav__drop-ico svg { width: 18px; height: 18px; }
.nav__drop-link strong { display: block; font-size: .92rem; font-weight: 600; color: var(--navy); }
.nav__drop-link small { font-size: .8rem; color: var(--muted); }

.nav__cta { display: flex; align-items: center; gap: 10px; }

/* Hamburger — animated lines morph into an X when drawer is open */
.nav__burger {
  display: none;
  width: 44px; height: 44px; border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.nav__burger:hover { background: var(--ink-2); border-color: #CBD7E6; }
.nav__burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px;
  background: var(--navy);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 27px; }
body.drawer-open .nav__burger { border-color: var(--cyan); }
body.drawer-open .nav__burger span { background: var(--cyan); }
body.drawer-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.drawer-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.drawer-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   11b. CLIENT PORTAL BUTTON  (nav bar + footer)
   Subtle premium pill with a login glyph so it reads as "inloggen", distinct
   from the marketing CTAs. One component, reused in .nav__cta and the footer.
   --------------------------------------------------------------------------- */
.portal-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 9px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--navy);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.portal-btn:hover {
  transform: translateY(-2px); color: var(--cyan);
  border-color: var(--cyan); box-shadow: var(--shadow-1);
}
.portal-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.portal-btn__ico {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 8px;
  color: var(--cyan); background: var(--blue-tint); border: 1px solid var(--line);
}
.portal-btn__ico svg { width: 14px; height: 14px; }
/* Footer instance sits under the brand block */
.footer__portal { margin-top: 22px; }
/* In the nav it collapses into the drawer on tablet/mobile (like the ghost CTA) */
@media (max-width: 1024px) { .nav__cta .portal-btn { display: none; } }

/* ---------------------------------------------------------------------------
   11c. HEADER SOCIALS  (nav bar)
   Facebook + Instagram als compacte icoon-knopjes zodat de socials ook BOVENIN
   staan, niet alleen in de footer. Zichtbaar op tablet (721-1024px: menu + portal
   + ghost-CTA klappen in = ruimte) en op ruime desktop (>=1200px). Verborgen op
   mobiel (<=720px, blijft minimal) en in de smalle desktop-band 1025-1199px waar
   de volledige nav (logo + menu + portal + 2 CTA's) al krap zit, zodat er nooit
   horizontale overflow ontstaat. Op mobiel leven de socials bovenin het menu
   (.dsocial met label) plus in de footer. Op >=1200px krijgt .portal-btn
   white-space:nowrap zodat de knop niet over twee regels breekt naast de socials.
   One component reused per page. */
.nav__social { display: flex; align-items: center; gap: 6px; }
.nav__social-btn {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--slate); background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.nav__social-btn:hover {
  transform: translateY(-2px); color: var(--cyan);
  border-color: var(--cyan); box-shadow: var(--shadow-1);
}
.nav__social-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nav__social-btn svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .nav__social { display: none; } }
@media (min-width: 1025px) and (max-width: 1199px) { .nav__social { display: none; } }
/* Vanaf 1025px is de portal-pill zichtbaar (r.868 verbergt hem daaronder) en zit de
   CTA-rij meteen op capaciteit · zonder nowrap breekt "SCA Portaal" over twee regels
   en wordt de knop 66px hoog in een balk van 72px. Ondergrens dus 1025px, niet 1200px. */
@media (min-width: 1025px) { .nav__cta .portal-btn { white-space: nowrap; } }

/* Mobile drawer — backdrop fades + blurs, panel slides in on a premium curve */
.nav__drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(11, 36, 64, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              backdrop-filter var(--dur-2) var(--ease),
              -webkit-backdrop-filter var(--dur-2) var(--ease),
              visibility var(--dur-2);
}
.nav__drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  max-width: 100%;
  background: var(--paper);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 70px rgba(11, 36, 64, .18);
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%);
  transition: transform var(--dur-3) var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  will-change: transform;
}
/* Leading-edge accent — minimal blue wash (no neon) */
.nav__drawer-panel::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 120px;
  pointer-events: none;
  background: radial-gradient(120% 60% at 0% 18%, rgba(24, 88, 234, .04), transparent 70%);
}
body.drawer-open .nav__drawer {
  opacity: 1; visibility: visible;
  background: rgba(11, 36, 64, .35);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}
body.drawer-open .nav__drawer-panel { transform: translateX(0); }
/* ---- Compact premium header ---- */
.nav__drawer-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.nav__drawer-head .nav__brand { font-size: 1.02rem; }
.nav__drawer-close {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--ink-2);
  display: grid; place-items: center; color: var(--slate);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.nav__drawer-close:hover,
.nav__drawer-close:focus-visible { color: var(--cyan); border-color: rgba(24, 88, 234, .4); background: var(--blue-tint); }
.nav__drawer-close:active { transform: scale(.92); }

/* ---- Section scaffolding (compact, card-based) ---- */
.nav__drawer-panel { gap: 14px; }
.dsec { display: flex; flex-direction: column; gap: 8px; }
.dsec__label {
  margin: 2px 2px 2px; display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
.dsec__spark {
  display: grid; place-items: center; width: 18px; height: 18px; color: var(--cyan);
}
.dsec__spark svg { width: 14px; height: 14px; }

/* ---- Primary nav: compact card/list rows (icon + label + chevron) ---- */
.dnav { display: flex; flex-direction: column; gap: 6px; }
.dnav__item,
.dsvc {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--navy);
  font-weight: 500;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.dnav__label,
.dsvc__label { flex: 1 1 auto; font-size: 1rem; line-height: 1.15; }
.dnav__ico,
.dsvc__ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--blue-tint); border: 1px solid var(--line);
  color: var(--cyan);
}
.dnav__ico svg,
.dsvc__ico svg { width: 19px; height: 19px; }
.dnav__chev { flex: none; width: 17px; height: 17px; color: var(--muted); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.dnav__item:hover,
.dnav__item:focus-visible,
.dsvc:hover,
.dsvc:focus-visible {
  background: var(--blue-tint);
  border-color: rgba(24, 88, 234, .3);
  box-shadow: 0 6px 18px rgba(11, 36, 64, .08);
}
.dnav__item:hover .dnav__chev,
.dnav__item:focus-visible .dnav__chev,
.dsvc:hover .dnav__chev,
.dsvc:focus-visible .dnav__chev { color: var(--cyan); transform: translateX(3px); }
.dnav__item:active,
.dsvc:active { transform: scale(.985); }

/* ---- Services sub-cards: tighter, secondary feel ---- */
.dsvc { padding: 9px 11px; border-radius: 11px; }
.dsvc__ico { width: 32px; height: 32px; border-radius: 9px; }
.dsvc__ico svg { width: 17px; height: 17px; }
.dsvc__label { font-size: .94rem; font-weight: 500; }

/* ---- AI-tools: the star. Glass cards with purple (aurora-3) accent ---- */
.dsec--ai {
  position: relative;
  padding: 12px 12px 13px; border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: none;
}
.dsec--ai .dsec__label { color: var(--cyan); }
.aicard {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.aicard__ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; color: var(--cyan);
  background: var(--blue-tint);
  border: 1px solid var(--line);
  box-shadow: none;
}
.aicard__ico svg { width: 20px; height: 20px; }
.aicard__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.aicard__name { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--navy); line-height: 1.2; }
.aicard__desc { font-size: .8rem; color: var(--muted); line-height: 1.25; }
.aicard__badge {
  flex: none; align-self: flex-start;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--cyan);
  background: var(--blue-tint); border: 1px solid var(--line);
}
.aicard:hover,
.aicard:focus-visible {
  background: var(--blue-tint);
  border-color: rgba(24, 88, 234, .3);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11, 36, 64, .08);
}
.aicard:active { transform: translateY(0) scale(.99); }

/* ---- Primary CTA ---- */
.nav__drawer .dcta { margin: 4px 0 2px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.nav__drawer .dcta svg { width: 18px; height: 18px; }
/* JS-injected install button keeps the install spacing it sets inline */
.nav__drawer-panel > .btn { margin-top: 0; }

/* ---- Socials + contact row ---- */
.dsocial {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line);
}
.dsocial__btn {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: var(--slate);
  border: 1px solid var(--line); background: var(--ink-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.dsocial__btn svg { width: 19px; height: 19px; }
.dsocial__btn:hover,
.dsocial__btn:focus-visible { color: var(--cyan); border-color: rgba(24, 88, 234, .4); background: var(--blue-tint); transform: translateY(-2px); }
.dsocial__chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; height: 42px;
  font-size: .9rem; font-weight: 600; color: var(--navy);
  border: 1px solid var(--line); background: var(--ink-2);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.dsocial__chip svg { width: 17px; height: 17px; color: var(--cyan); }
.dsocial__chip:hover,
.dsocial__chip:focus-visible { border-color: rgba(24, 88, 234, .4); background: var(--blue-tint); transform: translateY(-2px); }
.dsocial__label { font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--muted); }

/* Staggered fade + slide-in for drawer content while opening.
   Each direct child of the panel (head, nav, sections, CTA, socials, injected
   install button) starts shifted right + transparent; opening reveals them in sequence. */
.nav__drawer-panel > * {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
body.drawer-open .nav__drawer-panel > * {
  opacity: 1;
  transform: translateX(0);
}
body.drawer-open .nav__drawer-panel > *:nth-child(1)  { transition-delay: .08s; }
body.drawer-open .nav__drawer-panel > *:nth-child(2)  { transition-delay: .12s; }
body.drawer-open .nav__drawer-panel > *:nth-child(3)  { transition-delay: .16s; }
body.drawer-open .nav__drawer-panel > *:nth-child(4)  { transition-delay: .20s; }
body.drawer-open .nav__drawer-panel > *:nth-child(5)  { transition-delay: .24s; }
body.drawer-open .nav__drawer-panel > *:nth-child(6)  { transition-delay: .28s; }
body.drawer-open .nav__drawer-panel > *:nth-child(7)  { transition-delay: .32s; }
body.drawer-open .nav__drawer-panel > *:nth-child(8)  { transition-delay: .36s; }
body.drawer-open .nav__drawer-panel > *:nth-child(9)  { transition-delay: .40s; }
body.drawer-open .nav__drawer-panel > *:nth-child(10) { transition-delay: .44s; }
body.drawer-open .nav__drawer-panel > *:nth-child(n+11) { transition-delay: .48s; }
/* The drawer head (logo + close) should appear instantly, not staggered */
body.drawer-open .nav__drawer-head { transition-delay: 0s; }

/* Lock body scroll when the drawer is open (CSS-only safeguard) */
body.drawer-open { overflow: hidden; }

@media (max-width: 1024px) {
  .nav__menu, .nav__cta .btn-ghost { display: none; }
  .nav__burger { display: block; }
}

/* ---------------------------------------------------------------------------
   11d. NAV-CAPACITEIT  (Salesmachine OS · juli 2026)

   De nav ging van vier naar vijf top-level items (Salesmachine · Diensten ·
   Cases · Tools · Over ons). Dat kost circa 60px, en .nav__inner zat al op
   capaciteit: daar staat niet voor niets een white-space:nowrap-fix op de
   "SCA Portaal"-pill. Zonder dit blok breekt die pill over twee regels, wat
   zich uit als een knop van 66px hoog in plaats van 42px, NIET als
   horizontale overflow. Verifieer bij elke navwijziging dus de knophoogte
   tussen 1181 en 1300px.

   Deze vier regels leveren samen circa 86px terug (menu-gap 16 · link-padding
   40 · inner-gap 20 · cta-gap 10). Er komt GEEN nieuwe klassenaam bij; alleen
   bestaande waarden worden binnen de desktopband bijgesteld. --container,
   --nav-h en de zichtbaarheidsbanden van .nav__social blijven ongemoeid.

   De z-index op .nav__menu is apart nodig: .nav__cta staat later in de DOM,
   dus zonder eigen stapelcontext schilderen de CTA-knoppen over de
   opengeklapte "Over ons"-dropdown heen.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .nav__inner { gap: 14px; }
  .nav__menu  { gap: 0; position: relative; z-index: 2; }
  .nav__link  { padding: 9px 10px; white-space: nowrap; }
  .nav__cta   { gap: 8px; }
}

/* ---------------------------------------------------------------------------
   12. FOOTER
   --------------------------------------------------------------------------- */
.footer {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: clamp(56px, 7vw, 88px) 32px;
  z-index: 2;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 48px;
}
.footer__brand p { color: var(--muted); font-size: .95rem; margin-top: 16px; max-width: 34ch; }
.footer h4 { font-family: var(--font-body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.footer__col a { display: block; padding: 7px 0; color: var(--slate); font-size: .94rem; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.footer__col a:hover { color: var(--cyan); transform: translateX(3px); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .86rem;
}
.footer__socials { display: flex; gap: 10px; align-items: center; }
.footer__socials-label { font-size: .82rem; font-weight: 600; color: var(--muted); margin-right: 2px; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--slate); background: var(--paper);
  transition: all var(--dur-1) var(--ease);
}
.footer__socials a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-2px); box-shadow: var(--shadow-1); }
.footer__socials svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   13. STAT (counter)
   --------------------------------------------------------------------------- */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700; line-height: 1;
  letter-spacing: -.03em;
  color: var(--white);
  display: inline-flex; align-items: baseline;
}
.stat__num .stat__prefix, .stat__num .stat__suffix { color: var(--cyan); }
.stat__label { font-size: .9rem; color: var(--muted); }
.stat-strip .stat + .stat { position: relative; }
.stat-strip .stat + .stat::before {
  content: ""; position: absolute; left: calc(-1 * clamp(10px, 2vw, 28px)); top: 6px; bottom: 6px;
  width: 1px; background: var(--line);
}

/* ---------------------------------------------------------------------------
   14. ACCORDION (FAQ)
   --------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.accordion__item.is-open { border-color: #CBD7E6; background: var(--paper); }
.accordion__trigger {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px;
  font-family: var(--font-display); font-size: clamp(1rem, 1.6vw, 1.16rem); font-weight: 600;
  color: var(--navy);
}
.accordion__icon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--cyan); transition: transform var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
  position: relative;
}
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.accordion__icon::before { width: 12px; height: 2px; }
.accordion__icon::after { width: 2px; height: 12px; transition: transform var(--dur-2) var(--ease); }
.accordion__item.is-open .accordion__icon { background: var(--blue-tint); }
.accordion__item.is-open .accordion__icon::after { transform: rotate(90deg) scaleX(0); }
.accordion__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease);
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding: 0 24px 24px; color: var(--slate); max-width: 70ch; }

/* ---------------------------------------------------------------------------
   15. MODAL + STEPPER (multi-step funnel)
   --------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 36, 64, .42);
  backdrop-filter: blur(10px);
}
.modal__dialog {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(26px, 4vw, 40px);
  transform: translateY(18px) scale(.98);
  transition: transform var(--dur-3) var(--ease);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--slate); transition: all var(--dur-1) var(--ease);
}
.modal__close:hover { color: var(--navy); border-color: var(--cyan); background: var(--blue-tint); }
.modal__eyebrow { margin-bottom: 10px; }
.modal__title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 6px; }
.modal__sub { color: var(--muted); font-size: .95rem; margin-bottom: 22px; }

/* Stepper progress */
.stepper__bar { display: flex; gap: 6px; margin-bottom: 26px; }
.stepper__bar span {
  flex: 1; height: 4px; border-radius: 3px; background: var(--line);
  transition: background var(--dur-2) var(--ease);
}
.stepper__bar span.is-active, .stepper__bar span.is-done { background: var(--cyan); box-shadow: none; }
.stepper__step { display: none; animation: step-in var(--dur-3) var(--ease); }
.stepper__step.is-active { display: block; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.stepper__count { font-size: .8rem; color: var(--muted); margin-bottom: 14px; letter-spacing: .04em; }
.stepper__nav { display: flex; gap: 12px; margin-top: 26px; }
.stepper__nav .btn { flex: 1; }

/* Option chips (for stepper choices) */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--paper);
  cursor: pointer; font-size: .95rem; font-weight: 500;
  transition: all var(--dur-1) var(--ease);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:hover { border-color: #CBD7E6; background: var(--ink-2); }
.choice:has(input:checked) { border-color: var(--cyan); background: var(--blue-tint); box-shadow: none; }
.choice__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; position: relative; transition: border-color var(--dur-1) var(--ease); }
.choice:has(input:checked) .choice__dot { border-color: var(--cyan); }
.choice:has(input:checked) .choice__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cyan); }
@media (max-width: 480px) { .choice-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   16. FORM FIELDS
   --------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label, .label {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--navy); margin-bottom: 7px;
}
.field .req { color: var(--cyan); }
.input, .textarea, .select {
  width: 100%; padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--navy); font-size: .98rem;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(24, 88, 234, .14);
  background: var(--paper);
}
.textarea { resize: vertical; min-height: 110px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231858EA' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* Honeypot — visually + a11y hidden, kept in DOM */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* Consent */
.consent { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 6px; }
.consent input[type="checkbox"] {
  appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--paper);
  cursor: pointer; position: relative; transition: all var(--dur-1) var(--ease);
}
.consent input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); }
.consent input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.consent label { font-size: .82rem; color: var(--muted); line-height: 1.5; margin: 0; font-weight: 400; }
.consent a { color: var(--cyan); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   17. TOAST
   --------------------------------------------------------------------------- */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none; width: min(420px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 14px 18px; border-radius: 14px;
  background: var(--paper);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  color: var(--navy); font-size: .93rem; font-weight: 500;
  transform: translateY(20px); opacity: 0;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.toast.is-visible { transform: translateY(0); opacity: 1; }
.toast__ico { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.toast--success { border-color: rgba(22, 163, 106, .5); }
.toast--success .toast__ico { color: var(--success); }
.toast--error { border-color: rgba(224, 69, 95, .5); }
.toast--error .toast__ico { color: var(--danger); }
.toast--info .toast__ico { color: var(--cyan); }
.toast--warning { border-color: rgba(224, 138, 30, .5); }
.toast--warning .toast__ico { color: var(--warning); }

/* ---------------------------------------------------------------------------
   18. PROGRESS RING
   --------------------------------------------------------------------------- */
.progress-ring { position: relative; width: 120px; height: 120px; }
.progress-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.progress-ring__track { fill: none; stroke: var(--line); stroke-width: 9; }
.progress-ring__fill {
  fill: none; stroke: url(#ringGrad); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-3) var(--ease);
}
.progress-ring__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--white);
}

/* ---------------------------------------------------------------------------
   19. SKELETON / SPINNER
   --------------------------------------------------------------------------- */
.skeleton {
  border-radius: 10px;
  background: linear-gradient(100deg, var(--ink-3) 30%, #F0F5FB 50%, var(--ink-3) 70%);
  background-size: 200% 100%;
  animation: skeleton-shine 1.4s ease-in-out infinite;
}
@keyframes skeleton-shine { to { background-position: -200% 0; } }
.skeleton--line { height: 14px; margin-bottom: 10px; }
.skeleton--title { height: 26px; width: 60%; margin-bottom: 16px; }
.skeleton--block { height: 120px; }

.spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(24, 88, 234, .2);
  border-top-color: var(--cyan);
  animation: spin .7s linear infinite;
}
.spinner--lg { width: 40px; height: 40px; border-width: 3.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spinner { width: 18px; height: 18px; border-color: rgba(255, 255, 255, .4); border-top-color: var(--paper); }
.is-loading { pointer-events: none; }

/* ---------------------------------------------------------------------------
   20. SCROLL REVEAL
   --------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* ---------------------------------------------------------------------------
   21. FLOATING CHAT BUBBLE ("Captain")
   --------------------------------------------------------------------------- */
.chat-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: var(--z-chat);
  display: inline-flex; align-items: center; gap: 11px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  color: var(--navy); font-weight: 600; font-size: .92rem;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.chat-bubble:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.chat-bubble__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--paper);
  background: var(--cyan);
  position: relative;
}
.chat-bubble__avatar svg { width: 20px; height: 20px; }
.chat-bubble__avatar::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--paper);
  box-shadow: none;
}
.chat-bubble__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cyan); animation: pulse-ring 2.4s var(--ease) infinite; opacity: 0;
}
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
.chat-bubble__label small { display: block; font-size: .72rem; color: var(--muted); font-weight: 500; }
@media (max-width: 540px) { .chat-bubble__label { display: none; } .chat-bubble { padding: 10px; } }

/* ---------------------------------------------------------------------------
   22. STICKY MOBILE CTA BAR
   --------------------------------------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobilecta);
  display: none;
  gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; }
@media (max-width: 720px) { .mobile-cta { display: flex; } body { padding-bottom: 76px; } }

/* ---------------------------------------------------------------------------
   23. MISC PREMIUM PRIMITIVES
   --------------------------------------------------------------------------- */
/* Trust / logo cloud */
.logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 56px); }
.logo-cloud span {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2vw, 1.3rem);
  color: #9FB0C4; letter-spacing: -.01em;
  transition: color var(--dur-2) var(--ease);
}
.logo-cloud span:hover { color: var(--navy); }

/* Testimonial */
.quote {
  position: relative;
  padding-top: 8px;
}
.quote__mark { font-family: var(--font-display); font-size: 3.4rem; line-height: 0; color: var(--cyan); opacity: .35; }
.quote p { font-size: 1.06rem; color: var(--slate); margin: 12px 0 22px; line-height: 1.6; }
.quote__author { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--cyan), var(--aurora-3));
  display: grid; place-items: center; font-weight: 700; color: var(--paper);
  border: 1px solid transparent;
}
.quote__author strong { display: block; font-size: .95rem; }
.quote__author small { color: var(--muted); font-size: .85rem; }
.stars { display: inline-flex; gap: 2px; color: var(--warning); margin-bottom: 10px; }
.stars svg { width: 16px; height: 16px; }

/* Pricing */
.price-card { display: flex; flex-direction: column; }
.price-card--featured {
  border-color: var(--cyan);
  box-shadow: 0 12px 36px rgba(24, 88, 234, .14), var(--shadow-2);
  background: linear-gradient(180deg, var(--blue-tint), var(--paper));
}
.price-card--featured::before {
  background: radial-gradient(120% 80% at 50% 0%, rgba(24, 88, 234, .06), transparent 55%);
}
.price-card__ribbon {
  position: absolute; top: 18px; right: 18px;
}
.price-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.price-card__desc { color: var(--muted); font-size: .9rem; margin-top: 4px; min-height: 40px; }
.price-card__price { display: flex; align-items: baseline; gap: 4px; margin: 22px 0 6px; }
.price-card__amount { font-family: var(--font-display); font-size: 2.8rem; font-weight: 700; letter-spacing: -.03em; }
.price-card__per { color: var(--muted); font-size: .95rem; }
.price-card__list { margin: 22px 0 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.price-card__list li { display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; color: var(--slate); }
.price-card__list svg { flex: none; width: 19px; height: 19px; color: var(--cyan); margin-top: 1px; }

/* Steps (how it works) */
.step { position: relative; }
.step__num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--cyan);
  background: var(--blue-tint); border: 1px solid var(--line);
  margin-bottom: 18px;
}
.steps-track { position: relative; }
.steps-track::before {
  content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  z-index: 0;
}
@media (max-width: 900px) { .steps-track::before { display: none; } }

/* System diagram (probleem -> oplossing) */
.sysmap { display: grid; gap: 16px; }
.sysmap__core {
  text-align: center; padding: 26px; border-radius: var(--radius);
  background: var(--blue-tint);
  border: 1px solid var(--cyan); box-shadow: none;
}
.sysmap__ring { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sysmap__node {
  text-align: center; padding: 18px 14px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--navy);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.sysmap__node:hover { border-color: #CBD7E6; transform: translateY(-3px); }
.sysmap__node .sysmap__ico { color: var(--cyan); margin: 0 auto 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--blue-tint); }
.sysmap__node svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .sysmap__ring { grid-template-columns: 1fr 1fr; } }

/* Problem list */
.prob-list { display: flex; flex-direction: column; gap: 14px; }
/* Block + absolutely-positioned icon (NOT flex): a flex row turned each item's
   <strong> label and its trailing description into separate flex items, which
   shattered the text character-by-character in narrow tablet columns. As a block,
   label + description flow as one paragraph and wrap only at word boundaries. */
.prob-list li { display: block; position: relative; padding-left: 39px; color: var(--slate); }
.prob-list .x-ico {
  position: absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(224, 69, 95, .1); border: 1px solid rgba(224, 69, 95, .3); color: var(--danger);
}
.prob-list svg { width: 15px; height: 15px; }
.sol-list li .check-ico {
  background: rgba(22, 163, 106, .1); border-color: rgba(22, 163, 106, .3); color: var(--success);
}

/* Hero */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(48px, 8vw, 96px)); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; max-width: 880px; }
.hero h1 { margin: 22px 0 0; }
.hero .lead { margin: 24px 0 32px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__trust { margin-top: clamp(40px, 6vw, 72px); }

/* Risk reversal strip */
.guarantee {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(22, 163, 106, .06), rgba(24, 88, 234, .04));
  padding: clamp(30px, 4vw, 48px);
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.guarantee__seal {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; color: var(--success);
  background: rgba(22, 163, 106, .1); border: 1.5px solid rgba(22, 163, 106, .4);
  box-shadow: none;
}
.guarantee__seal svg { width: 40px; height: 40px; }

/* Inline panel for slot-cta funnel */
.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px);
  box-shadow: var(--shadow-1);
}

/* CTA hero band */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(32px, 5vw, 60px);
}

/* ---------------------------------------------------------------------------
   24. PREFERS-REDUCED-MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .aurora__blob { animation: none !important; }
  .btn-glow::before { animation: none !important; opacity: .5; }
  .chat-bubble__pulse { display: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .skeleton { animation: none !important; }

  /* Drawer: still functional, just no motion. Backdrop blur kept (static).
     Links appear instantly with no slide/stagger. */
  .nav__drawer-panel { transition: none !important; }
  .nav__drawer-panel > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dnav__item, .dsvc, .aicard, .dsocial__btn, .dsocial__chip, .dnav__chev { transition: none !important; }
  body.drawer-open .nav__drawer-panel > * { transition-delay: 0s !important; }
  .nav__burger span { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   25. RESPONSIVE FINE-TUNING
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .stat-strip { gap: 22px; }
  .stat-strip .stat + .stat::before { display: none; }
  .guarantee { flex-direction: column; text-align: center; align-items: center; }
  .hero__ctas .btn { flex: 1; min-width: 220px; }
}

/* ---------------------------------------------------------------------------
   26. MOBILE OVERFLOW SAFETY  (360px → 768px must never scroll sideways)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Hard clip any rogue horizontal overflow on the page itself */
  html, body { overflow-x: clip; max-width: 100%; }

  /* Flex children must be allowed to shrink so long words / pills don't push
     the layout wider than the viewport. */
  .nav__inner,
  .hero__ctas,
  .stat-strip,
  .footer__bottom,
  .logo-cloud,
  .guarantee,
  .quote__author,
  .price-card__price { min-width: 0; }
  .nav__inner > *,
  .hero__ctas > *,
  .footer__bottom > * { min-width: 0; }

  /* Media never overflows its box */
  img, svg, video, canvas, iframe { max-width: 100%; }

  /* Long unbroken strings (URLs, emails) wrap instead of widening the page */
  p, li, .lead, .price-card__desc, .quote p { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------------
   27. COMPACT MOBILE CARDS + GRID COLLAPSE  (≤ 640px)
   Tighter padding, gaps, type and icons. Single-column grids. Less section air.
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Tighten vertical rhythm so phones aren't an endless scroll */
  .section { padding-block: clamp(44px, 11vw, 60px); }
  .section--tight { padding-block: clamp(34px, 8vw, 48px); }
  /* Hero must clear the fixed 72px transparent nav — the padding-block above
     would otherwise tuck the hero pill / breadcrumb / heading under the header on
     phones (higher specificity than .section wins here). Blog heroes handle their
     own nav clearance in the blog block below. */
  .hero.section { padding-top: calc(var(--nav-h) + 26px); }
  .section-head { margin-bottom: clamp(24px, 7vw, 36px); }

  /* All multi-column grids collapse cleanly to one column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid { gap: 16px; }

  /* Cards: less padding + radius, smaller icons + copy */
  .card,
  .card--feature,
  .card--ai {
    padding: 22px 20px;
    border-radius: var(--radius);
  }
  .card__icon {
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  }
  .card__icon svg { width: 23px; height: 23px; }
  .card h3 { margin-bottom: 8px; }
  .card p { font-size: .94rem; }
  .card-link { margin-top: 14px; }

  /* Disable hover-lift / 3D tilt on touch — avoids sticky hover states */
  .card:hover { transform: none; }

  /* Pricing cards: compact, full-width, stacked */
  .price-card { padding: 24px 20px; border-radius: var(--radius); }
  .price-card__price { margin: 16px 0 6px; }
  .price-card__amount { font-size: 2.3rem; }
  .price-card__desc { min-height: 0; }
  .price-card__list { margin: 18px 0 22px; gap: 10px; }
  .price-card__list li { font-size: .92rem; }
  /* Featured card no longer needs to "pop forward" when stacked */
  .price-card--featured { transform: none; }

  /* CTA band, panel, guarantee: trim the generous desktop padding */
  .cta-band { padding: 28px 22px; border-radius: var(--radius-lg); }
  .panel { padding: 24px 20px; }
  .guarantee { padding: 26px 22px; gap: 18px; }
  .guarantee__seal { width: 70px; height: 70px; }
  .guarantee__seal svg { width: 34px; height: 34px; }

  /* Footer: single column, tighter */
  .footer__grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .footer__bottom { gap: 14px; }

  /* Steps stack; numbers a touch smaller */
  .step__num { width: 42px; height: 42px; margin-bottom: 14px; }

  /* System map: two columns of nodes still read well at this width */
  .sysmap__core { padding: 22px; }

  /* Section heads + leads scale down a notch for breathing room */
  .section-head p { font-size: 1rem; }
}

/* ---------------------------------------------------------------------------
   28. ULTRA-COMPACT  (≤ 420px)  — small phones (down to 360px)
   --------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .section { padding-block: 40px; }
  .hero.section { padding-top: calc(var(--nav-h) + 16px); }
  .container { padding-inline: 18px; }

  /* Cards even tighter */
  .card, .card--feature, .card--ai { padding: 18px 16px; }
  .card__icon { width: 42px; height: 42px; margin-bottom: 14px; }
  .card__icon svg { width: 21px; height: 21px; }
  .card h3 { font-size: 1.15rem; }
  .card p { font-size: .9rem; }

  /* Pricing */
  .price-card { padding: 20px 16px; }
  .price-card__amount { font-size: 2.05rem; }
  .price-card__name { font-size: 1.12rem; }
  .price-card__list li { font-size: .88rem; gap: 9px; }
  .price-card__list svg { width: 17px; height: 17px; }

  /* CTA band + panel + guarantee */
  .cta-band { padding: 24px 18px; }
  .panel { padding: 20px 16px; }
  .guarantee { padding: 22px 18px; }

  /* Hero CTAs stack full-width and stop demanding a 220px min */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { min-width: 0; width: 100%; }

  /* System map nodes go single column on the very smallest screens */
  .sysmap__ring { grid-template-columns: 1fr; }

  /* Stat strip: stack stats vertically, no cramped wrap */
  .stat-strip { gap: 18px; }
  .stat__num { font-size: 1.9rem; }

  /* Accordion: trim horizontal padding */
  .accordion__trigger { padding: 18px 16px; }
  .accordion__panel p { padding: 0 16px 18px; }

  /* Modal: edge-to-edge feel on tiny screens */
  .modal { padding: 12px; }
  .modal__dialog { padding: 22px 18px; }

  /* Footer socials a touch smaller */
  .footer__socials a { width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------------
   29. MOBILE COMPONENT AUDIT  (360px → 768px polish + no-overflow guarantees)
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Pricing grids (commonly .grid-3 / .grid-4) already collapse via §27,
     but ensure any author-built pricing wrapper does too. */
  .pricing-grid,
  .price-grid { grid-template-columns: 1fr !important; }

  /* Featured price card: remove desktop scale/offset that can cause overflow */
  .price-card--featured { margin-top: 0; }

  /* Steps track connector hidden on stacked layout (already off ≤900px),
     keep steps comfortably spaced */
  .steps-track { gap: 22px; }

  /* CTA band inner content centers and wraps cleanly */
  .cta-band .hero__ctas,
  .cta-band .btn { width: 100%; }

  /* Floating chat bubble: keep it clear of the sticky mobile CTA bar and
     never let it run off-screen. */
  .chat-bubble { right: 16px; max-width: calc(100vw - 32px); }
}

/* When the sticky mobile CTA bar is visible (≤720px), float the chat bubble
   above it so the two never overlap. */
@media (max-width: 720px) {
  .chat-bubble { bottom: calc(76px + env(safe-area-inset-bottom) + 14px); }
  /* Sysmap reads better as a tight 2-col between 421–720px */
  .sysmap__ring { gap: 10px; }
}

@media (max-width: 480px) {
  /* Lange NL CTA-labels moeten kunnen afbreken. .btn heeft white-space:nowrap
     (§8) + overflow:hidden (§29-ripple); met de 34px zijpadding van .btn-lg is de
     min-content-breedte het hele label + 68px, waardoor de knop niet kan krimpen
     en body{overflow-x:clip} hem afknipt. Bewust alleen .btn-lg: .btn-sm in de
     nav en de sticky mobiele CTA passen wel en moeten nowrap blijven. */
  .btn-lg {
    white-space: normal;
    text-align: center;
    line-height: 1.25;          /* .btn heeft line-height:1 · zonder dit plakken de regels */
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* ============================================================================
   30. MOTION + INTERACTION LAYER
   Premium choreography: directional reveals, scroll-progress, parallax,
   hero cinema (spotlight + per-line entrance + shimmer), magnetic/tilt/ripple,
   marquee logo-cloud, social-proof toasts, gamified funnel (progress ring,
   confetti micro-burst), SVG line-draw, "agenda" micro-viz, section glow.
   All GPU transform/opacity, rAF-throttled, fully disabled under reduced-motion.
   Hooks consumed by js/app.js §12–§22.
   ============================================================================ */

/* --- 30.1 DIRECTIONAL + STAGGERED SCROLL REVEAL -------------------------------
   Extends §20. Base [data-reveal] = fade+up. Direction variants add slide/scale.
   Extra stagger delays 5–8 + a data-reveal-delay attribute hook beyond 4. */
[data-reveal="up"]    { transform: translateY(30px); }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.92); opacity: 0; }
[data-reveal="up"].is-revealed,
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed,
[data-reveal="zoom"].is-revealed { transform: none; opacity: 1; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }
[data-reveal-delay="7"] { transition-delay: .56s; }
[data-reveal-delay="8"] { transition-delay: .64s; }

/* Auto-stagger: JS sets --reveal-i on each child of [data-reveal-stagger]. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * .07s);
  will-change: opacity, transform;
}
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }

/* --- 30.2 SCROLL-PROGRESS BAR (slim top bar; JS sets --scroll-progress) ------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll-progress, 0));
  background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
  box-shadow: none;
  will-change: transform;
}

/* --- 30.3 PARALLAX (decorative layers; JS sets --parallax-y) ----------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* --- 30.4 HERO CINEMA --------------------------------------------------------
   Load-in choreography: add .hero-cinema to the hero; descendants tagged with
   data-hero-line animate in sequence once .is-loaded is set by JS. */
.hero-cinema [data-hero-line] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--hero-i, 0) * .11s + .12s);
  will-change: opacity, transform;
}
.hero-cinema.is-loaded [data-hero-line] { opacity: 1; transform: none; }

/* Cursor-follow spotlight (desktop pointer only; JS sets --spot-x/--spot-y). */
.hero-spotlight {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease);
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 30%),
    rgba(24, 88, 234, .05), transparent 62%);
  mix-blend-mode: normal;
}
.hero-cinema.is-spotlit .hero-spotlight { opacity: 1; }

/* Shimmer accent — NEUTRALIZED to a flat blue (no animation, no neon).
   Selector kept so headings referencing .shimmer-text stay readable. */
.shimmer-text {
  background: none;
  -webkit-text-fill-color: var(--cyan);
  color: var(--cyan);
  animation: none;
}
@keyframes shimmer-sweep {
  0%, 18% { background-position: 130% 0; }
  60%, 100% { background-position: -30% 0; }
}

/* --- 30.5 TILT + GLARE + RIPPLE ----------------------------------------------
   .card-tilt already exists (§7). JS sets --rx/--ry rotation + glare position. */
.card-tilt {
  transform: perspective(900px)
    rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg))
    translateZ(0);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card-tilt .tilt-glare,
.card-tilt::marker { } /* no-op guard */
.card-tilt .tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 50%),
    rgba(24, 88, 234, .05), transparent 60%);
  transition: opacity var(--dur-2) var(--ease);
  mix-blend-mode: normal;
}
.card-tilt.is-tilting .tilt-glare { opacity: 1; }

/* Soft ripple on button press (JS appends .ripple at pointer coords). */
.btn { overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  pointer-events: none; z-index: 0;
  animation: ripple-out .6s var(--ease) forwards;
}
.btn-ghost .ripple { background: radial-gradient(circle, rgba(24, 88, 234, .2), rgba(24, 88, 234, 0) 70%); }
@keyframes ripple-out {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- 30.6 MARQUEE LOGO-CLOUD -------------------------------------------------
   .logo-marquee wraps a .logo-marquee__track that JS duplicates for a seamless
   loop. Pauses on hover, edge-faded. */
.logo-marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
  display: flex; width: max-content; gap: clamp(40px, 6vw, 72px);
  align-items: center;
  animation: marquee-scroll var(--marquee-dur, 32s) linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__track > * { flex: none; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* --- 30.7 SOCIAL-PROOF TOAST (slides from bottom-left, dismissible) ---------- */
.proof-toast {
  position: fixed; left: 22px; bottom: 22px; z-index: var(--z-toast);
  display: flex; align-items: center; gap: 12px;
  width: min(330px, calc(100vw - 44px));
  padding: 12px 14px; border-radius: 14px;
  background: var(--paper);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  color: var(--slate); font-size: .86rem; line-height: 1.4;
  transform: translateY(140%); opacity: 0;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.proof-toast.is-visible { transform: translateY(0); opacity: 1; }
.proof-toast__ico {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--cyan);
  background: var(--blue-tint); border: 1px solid var(--line);
}
.proof-toast__ico svg { width: 17px; height: 17px; }
.proof-toast strong { color: var(--navy); font-weight: 600; }
.proof-toast small { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.proof-toast__x {
  flex: none; margin-left: auto; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center; color: var(--muted);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.proof-toast__x:hover { color: var(--navy); background: var(--ink-2); }
.proof-toast__x svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .proof-toast { left: 12px; bottom: calc(76px + env(safe-area-inset-bottom) + 14px); width: min(300px, calc(100vw - 24px)); }
}

/* --- 30.8 GAMIFIED FUNNEL ----------------------------------------------------
   Adds a circular progress ring + encouraging microcopy + "nog 1 stap" nudge +
   smooth step transitions. Reuses §15 .stepper. */
.funnel-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.funnel-ring { position: relative; width: 46px; height: 46px; flex: none; }
.funnel-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.funnel-ring__track { fill: none; stroke: var(--line); stroke-width: 5; }
.funnel-ring__fill {
  fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-3) var(--ease);
  filter: none;
}
.funnel-ring__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .72rem; font-weight: 700; color: var(--cyan);
}
.funnel-progress__copy { font-size: .88rem; color: var(--slate); font-weight: 500; }
.funnel-progress__copy strong { color: var(--cyan); font-weight: 700; }

/* Step transition: each freshly-rendered step slides/fades in smoothly. */
.stepper__step.is-active[data-step-content] { animation: step-in var(--dur-3) var(--ease); }

/* "nog 1 stap" nudge chip */
.step-nudge {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px; padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  background: rgba(22, 163, 106, .1); border: 1px solid rgba(22, 163, 106, .32);
  color: var(--success);
}
.step-nudge svg { width: 13px; height: 13px; }

/* --- 30.9 CONFETTI MICRO-BURST (no library; JS spawns .confetti-piece) ------- */
.confetti-layer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5;
  border-radius: inherit;
}
.confetti-piece {
  position: absolute; top: 38%; width: 8px; height: 8px; border-radius: 2px;
  will-change: transform, opacity;
  animation: confetti-fall var(--c-dur, 1.1s) var(--ease) forwards;
  animation-delay: var(--c-delay, 0s);
}
@keyframes confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate3d(var(--c-x, 0), var(--c-y, 120px), 0) rotate(var(--c-r, 360deg)) scale(.6); opacity: 0; }
}

/* Celebratory pulse on the success seal */
.celebrate-pop { animation: celebrate-pop .7s var(--ease) both; }
@keyframes celebrate-pop {
  0% { transform: scale(.4); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- 30.10 SVG LINE-DRAW (.draw-on-view; JS preps stroke dash on paths) ------ */
.draw-on-view path,
.draw-on-view line,
.draw-on-view polyline,
.draw-on-view circle,
.draw-on-view rect {
  stroke-dasharray: var(--dash, 0);
  stroke-dashoffset: var(--dash, 0);
  transition: stroke-dashoffset 1.4s var(--ease);
}
.draw-on-view.is-drawn path,
.draw-on-view.is-drawn line,
.draw-on-view.is-drawn polyline,
.draw-on-view.is-drawn circle,
.draw-on-view.is-drawn rect { stroke-dashoffset: 0; }

/* --- 30.11 "AGENDA VULT ZICH" MICRO-VISUALIZATION ---------------------------
   JS builds slots inside [data-agenda-fill]; rows fill from empty -> booked. */
.agenda-viz { display: flex; flex-direction: column; gap: 8px; }
.agenda-viz__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.agenda-viz__time { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--muted); min-width: 52px; }
.agenda-viz__label { font-size: .9rem; color: var(--slate); }
.agenda-viz__badge {
  margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.agenda-viz__row.is-booked {
  border-color: rgba(22, 163, 106, .4); background: rgba(22, 163, 106, .07);
}
.agenda-viz__row.is-booked .agenda-viz__time { color: var(--success); }
.agenda-viz__row.is-booked .agenda-viz__label { color: var(--navy); }
.agenda-viz__row.is-booked .agenda-viz__badge { opacity: 1; transform: none; color: var(--success); }

/* --- 30.12 SECTION-ENTER GLOW ACCENT ----------------------------------------
   .section-glow gets a soft top accent that lights up when scrolled into view. */
.section-glow { position: relative; }
.section-glow::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(680px, 80%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line) 50%, transparent);
  opacity: 0; transition: opacity var(--dur-3) var(--ease), box-shadow var(--dur-3) var(--ease);
}
.section-glow.is-inview::before { opacity: .8; box-shadow: none; }

/* --- 30.13 OPTIONAL SCROLL-SNAP (opt-in via .snap-y on a scroll container) --- */
.snap-y { scroll-snap-type: y proximity; }
.snap-y > .snap-item { scroll-snap-align: start; }

/* --- 30.14 REDUCED-MOTION: disable the entire motion layer ------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal="up"], [data-reveal="left"], [data-reveal="right"], [data-reveal="zoom"],
  [data-reveal-stagger] > *,
  .hero-cinema [data-hero-line] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-progress { display: none !important; }
  [data-parallax] { transform: none !important; }
  .hero-spotlight { display: none !important; }
  .shimmer-text { animation: none !important; background-position: 50% 0 !important; }
  .card-tilt { transform: none !important; }
  .card-tilt .tilt-glare { display: none !important; }
  .ripple { display: none !important; }
  .logo-marquee__track { animation: none !important; }
  .proof-toast { transition: none !important; }
  .confetti-layer { display: none !important; }
  .celebrate-pop { animation: none !important; }
  .draw-on-view path, .draw-on-view line, .draw-on-view polyline,
  .draw-on-view circle, .draw-on-view rect { stroke-dashoffset: 0 !important; transition: none !important; }
  .agenda-viz__badge { opacity: 1 !important; transform: none !important; }
  .section-glow::before { opacity: .4 !important; transition: none !important; }
}

/* ============================================================================
   31. 3D + PARTICLE ENGINE
   Reusable premium engine: constellation particle field, 3D parallax scene
   utilities, glassmorphic "SCA dashboard" device mockup, and the live
   groeiscore teaser (score ring). All decorative layers are pointer-events:none
   + aria-hidden in markup; canvases pause off-screen/hidden via JS. Fully
   degraded under reduced motion (see 31.6). Hooks consumed by js/app.js §18–§22.
   ============================================================================ */

/* --- 31.1 PARTICLE / CONSTELLATION FIELD -------------------------------------
   <canvas data-particles> auto-inits via SCA.initParticles(). Decorative:
   stretch it behind content, keep it non-interactive + aria-hidden in markup. */
.particle-field {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  display: block;
}
.particle-field--screen { mix-blend-mode: screen; }
/* host helper so a section can layer content above a full-bleed field */
.has-particles { position: relative; }
.has-particles > :not(.particle-field) { position: relative; z-index: 1; }

/* --- 31.2 3D SCENE UTILITIES --------------------------------------------------
   .scene-3d = perspective container. .scene-3d__stage = preserve-3d body that
   SCA.init3DParallax() tilts. .layer-3d[data-depth] are offset by depth. */
.scene-3d {
  position: relative;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}
.scene-3d__stage {
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--dur-2) var(--ease);
  will-change: transform;
}
.layer-3d {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--dur-2) var(--ease);
}
/* decorative depth layers (glows, grids) should never eat clicks */
.layer-3d--deco { pointer-events: none; }

/* --- 31.3 PRODUCT MOCKUP — glassmorphic "SCA dashboard" device ----------------
   Sharp-edged, crisp 1px cyan edges, layered shadows, cyan screen glow,
   subtle idle float. Drop floating .mockup__float chips for depth. */
.mockup {
  position: relative;
  width: min(560px, 100%);
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    var(--shadow-2),
    0 8px 24px rgba(11, 36, 64, .06);
  overflow: hidden;
  will-change: transform;
}
/* crisp 1px edge highlight — neutral light hairline (no neon) */
.mockup::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(24, 88, 234, .12), transparent 36%, transparent 70%, rgba(24, 88, 234, .08));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* window title bar with traffic dots + a faux url chip */
.mockup__bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}
.mockup__bar i {
  width: 10px; height: 10px; border-radius: 50%; display: block;
  background: #D4DEEA;
}
.mockup__bar i:nth-child(1) { background: rgba(224, 69, 95, .7); }
.mockup__bar i:nth-child(2) { background: rgba(224, 138, 30, .7); }
.mockup__bar i:nth-child(3) { background: rgba(22, 163, 106, .7); }
.mockup__bar .mockup__url {
  margin-left: 10px; font-family: var(--font-body); font-size: .72rem;
  letter-spacing: .02em; color: var(--muted);
  padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line);
}
/* screen body */
.mockup__screen {
  position: relative; z-index: 1;
  padding: 18px 18px 22px;
  display: grid; gap: 12px;
}
/* screen glow — inert on light theme */
.mockup__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(24, 88, 234, .04), transparent 55%);
}
.mockup__screen > * { position: relative; z-index: 1; }
/* a data row */
.mockup__row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.mockup__row--head { background: transparent; border: 0; padding: 0 2px 2px; }
.mockup__row .mockup__avatar {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--cyan);
  display: grid; place-items: center; color: var(--paper); font-weight: 800; font-size: .82rem;
}
.mockup__row .mockup__bars { flex: 1; display: grid; gap: 6px; min-width: 0; }
.mockup__row .mockup__bars span {
  height: 7px; border-radius: 4px; background: #D9E3EF;
}
.mockup__row .mockup__bars span:last-child { width: 56%; background: #E6EDF5; }
/* small status chip */
.mockup__chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid;
}
.mockup__chip--new { color: var(--cyan); background: var(--blue-tint); border-color: rgba(24, 88, 234, .25); }
.mockup__chip--won { color: var(--success); background: rgba(22, 163, 106, .1); border-color: rgba(22, 163, 106, .3); }
.mockup__chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: none; }
/* big metric tile */
.mockup__metric {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 15px; border-radius: 12px;
  background: var(--blue-tint);
  border: 1px solid var(--line);
}
.mockup__metric b {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--navy);
}
.mockup__metric small { font-size: .74rem; color: var(--muted); }
.mockup__metric .mockup__trend { color: var(--success); font-weight: 700; font-size: .76rem; }
.mockup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* floating depth chips — clean light cards, no float animation (static) */
.mockup__float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  font-size: .82rem; font-weight: 600; color: var(--navy);
  will-change: transform;
}
.mockup__float svg { width: 18px; height: 18px; color: var(--cyan); }
.mockup__float small { display: block; font-size: .68rem; color: var(--muted); font-weight: 500; }
.mockup__float--tl { top: -18px; left: -22px; }
.mockup__float--br { bottom: -20px; right: -18px; }
.mockup__float--accent { border-color: rgba(24, 88, 234, .3); }

@keyframes mockup-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-.2deg); }
}
@keyframes mockup-float-chip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (max-width: 560px) {
  .mockup__grid { grid-template-columns: 1fr; }
  .mockup__float--tl { left: -8px; }
  .mockup__float--br { right: -6px; }
}

/* --- 31.4 LIVE GROEISCORE TEASER ---------------------------------------------
   [data-groeiscore] root; SCA.initGroeiscoreTeaser() injects the form + result.
   Self-contained .score-ring (no shared <defs> needed). */
.gs-teaser { position: relative; }
.gs-teaser__form { display: flex; flex-direction: column; gap: 10px; }
.gs-teaser__row { display: flex; gap: 10px; flex-wrap: wrap; }
.gs-teaser__url { flex: 1 1 200px; min-width: 0; }
.gs-teaser__branche { flex: 0 1 200px; min-width: 0; }
.gs-teaser__go { flex: none; }
.gs-teaser__hint { font-size: .82rem; margin: 2px 0 0; }
@media (max-width: 560px) {
  .gs-teaser__row { flex-direction: column; }
  .gs-teaser__url, .gs-teaser__branche, .gs-teaser__go { flex: 1 1 auto; width: 100%; }
}

.gs-teaser__result { margin-top: 22px; }

/* anticipation / loading */
.gs-teaser__loading { display: flex; align-items: center; gap: 18px; }
.gs-teaser__loading-copy { display: flex; flex-direction: column; gap: 4px; }
.gs-teaser__loading-copy strong { font-family: var(--font-display); font-size: 1.05rem; }
.gs-teaser__ticker { font-size: .88rem; }

/* score ring (self-contained; reusable) */
.score-ring { position: relative; width: 116px; height: 116px; flex: none; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring__track { fill: none; stroke: var(--line); stroke-width: 9; }
.score-ring__fill {
  fill: none; stroke: var(--cyan); stroke-width: 9; stroke-linecap: round;
  filter: none;
  transition: stroke 0.4s var(--ease);
}
.score-ring__label {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center;
  font-family: var(--font-display);
}
.score-ring__label b { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy); line-height: 1; }
.score-ring__label small { font-size: .72rem; color: var(--muted); font-weight: 600; }
/* pending spinner variant */
.score-ring--pending .score-ring__spin {
  fill: none; stroke: var(--cyan); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 80 246; transform-origin: 60px 60px;
  filter: none;
  animation: score-spin 1s linear infinite;
}
@keyframes score-spin { to { transform: rotate(360deg); } }

/* tone tints the ring */
.gs-teaser__score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.gs-teaser__score.is-good .score-ring__fill { stroke: var(--success); filter: none; }
.gs-teaser__score.is-mid  .score-ring__fill { stroke: var(--cyan); }
.gs-teaser__score.is-low  .score-ring__fill { stroke: var(--warning); filter: none; }
.gs-teaser__readout { flex: 1 1 240px; min-width: 0; }
.gs-teaser__readout .eyebrow { margin-bottom: 8px; }
.gs-teaser__summary { color: var(--slate); font-size: .98rem; margin-bottom: 12px; }
.gs-teaser__qw {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border-radius: 12px;
  background: var(--blue-tint); border: 1px solid var(--line);
  font-size: .92rem; color: var(--slate);
}
.gs-teaser__qw strong { color: var(--cyan); }
.gs-teaser__qw-ico { flex: none; color: var(--cyan); }
.gs-teaser__qw-ico svg { width: 18px; height: 18px; }

.gs-teaser__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.gs-teaser__cta .btn { flex: 1 1 auto; }

/* friendly error / 503 state */
.gs-teaser__error {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 22px; border-radius: var(--radius);
  background: var(--ink-2); border: 1px solid var(--line);
}
.gs-teaser__error p { color: var(--slate); font-size: .96rem; }
.gs-teaser__error-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--warning); background: rgba(224, 138, 30, .1); border: 1px solid rgba(224, 138, 30, .3);
}
.gs-teaser__error-ico svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .gs-teaser__cta .btn { flex: 1 1 100%; }
  .score-ring { width: 100px; height: 100px; }
}

/* --- 31.5 SMALL-SCREEN / FINE-TUNING ----------------------------------------- */
@media (max-width: 720px) {
  .scene-3d { perspective: 900px; }
}

/* --- 31.6 REDUCED-MOTION: static, premium fallback (no loops, no float) ------- */
@media (prefers-reduced-motion: reduce) {
  /* particle field: JS already renders a single static frame; just ensure no blend churn */
  .particle-field { mix-blend-mode: normal; }
  /* 3D scene flattens to a clean, readable stack */
  .scene-3d__stage,
  .layer-3d { transform: none !important; transition: none !important; }
  /* mockup: no idle float, but keep the depth + glow */
  .mockup,
  .mockup__float { animation: none !important; }
  /* score ring: no spinner animation; pending state shows a static arc */
  .score-ring--pending .score-ring__spin { animation: none !important; }
  .score-ring__fill { transition: none !important; }
}

/* ============================================================================
   32. PREMIUM VISUAL LAYER  (Awwwards-tier — additive, GPU, reduced-motion safe)
   New utilities (pair with js/app.js §23–§28):
     .aurora-canvas / [data-aurora]      — signature flowing aurora hero field
     .glow-border / .gradient-border     — animated conic cyan→purple frame
     .glass-premium                      — refined depth glass surface
     [data-textfx="reveal|scramble"]     — per-word reveal + decode headings
     .bento / .bento__tile               — modern varied-tile feature grid
     .spotlight-card  [data-spotlight]   — cursor-follow radial highlight
     [data-scrollscene]                  — pinned/scrolly scroll choreography
     .btn-shine / .cursor-glow           — premium micro: shine sweep + cursor
   ============================================================================ */

/* --- 32.1 AURORA HERO FIELD ---------------------------------------------------
   A full-bleed layered canvas painted by SCA.initAurora(el). The host carries
   .aurora-host (position context). Two stacked canvases: drifting blob field +
   faint grain. Sits BELOW the constellation/particle field and content.
   Static, beautiful CSS fallback paints when JS/canvas is unavailable. */
.aurora-host { position: relative; isolation: isolate; }
.aurora-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  /* MINIMAL light fallback — a barely-there blue wash (no neon, no AI mesh) */
  background:
    radial-gradient(60% 70% at 18% 22%, rgba(24, 88, 234, .05), transparent 60%),
    radial-gradient(60% 65% at 82% 30%, rgba(61, 120, 255, .04), transparent 62%);
  filter: blur(40px);
  opacity: .7;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 26%, #000 52%, transparent 100%);
  mask-image: radial-gradient(130% 120% at 50% 26%, #000 52%, transparent 100%);
  transition: opacity .8s var(--ease);
}
.aurora-canvas canvas {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  display: block;
}
/* when JS takes over it adds .is-live and the canvas paints the gradients */
.aurora-canvas.is-live { background: none; filter: none; opacity: 1; }
/* additive grain — inert on light theme */
.aurora-canvas .aurora-grain {
  position: absolute; inset: -2px; pointer-events: none; mix-blend-mode: normal;
  opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- 32.2 ANIMATED GRADIENT BORDER + PREMIUM GLASS ---------------------------
   .glow-border (alias .gradient-border): an animated conic cyan→purple ring
   drawn in an ::before behind the element using a mask so only the 1px edge
   shows. Works on any rounded box; inherits border-radius. */
.glow-border, .gradient-border { position: relative; isolation: isolate; }
/* NEUTRALIZED: animated neon ring becomes a static 1px light hairline.
   Selectors kept so any page using .glow-border keeps a clean framed edge. */
.glow-border::before, .gradient-border::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; padding: var(--gb-w, 1px);
  background: var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: none;
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease);
}
.glow-border:hover::before, .gradient-border:hover::before { opacity: 1; --gb-w: 1px; }
/* halo variant — inert (no neon outer glow) */
.glow-border--halo::after {
  content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit;
  background: none;
  filter: none; opacity: 0; animation: none;
}
@property --gb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gb-rotate { to { --gb-a: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .glow-border::before, .gradient-border::before {
    background: var(--line);
    animation: none;
  }
  @keyframes gb-pan { to { background-position: 200% 50%; } }
}

/* refined glass surface — light: white surface, 1px hairline, soft shadow */
.glass-premium {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--shadow-1);
}
.glass-premium::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: none;
  mix-blend-mode: normal; opacity: 0;
}

/* --- 32.3 TEXT FX (per-word reveal + scramble) -------------------------------
   SCA.initTextFX() wraps words in .tfx-w spans. data-textfx="reveal" lifts each
   word; "scramble" decodes the heading once in view. */
[data-textfx] .tfx-w {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.55em);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--tfx-i, 0) * 38ms);
  will-change: opacity, transform;
}
[data-textfx].is-textfx-in .tfx-w { opacity: 1; transform: none; }
[data-textfx="scramble"] .tfx-char { display: inline-block; }
[data-textfx="scramble"].is-scrambling { color: var(--cyan); }

/* --- 32.4 BENTO GRID + SPOTLIGHT CARD ----------------------------------------
   .bento is a responsive auto-flow grid; tiles vary by span utility classes.
   Hover lift + a cursor-follow spotlight (JS sets --mx/--my on [data-spotlight]). */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(150px, auto);
  gap: clamp(12px, 1.6vw, 20px);
}
.bento__tile {
  position: relative; overflow: hidden;
  grid-column: span 3;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.bento__tile--lg   { grid-column: span 4; }
.bento__tile--xl   { grid-column: span 6; }
.bento__tile--sm   { grid-column: span 2; }
.bento__tile--tall { grid-row: span 2; }
.bento__tile:hover { transform: translateY(-4px); border-color: #CBD7E6; box-shadow: var(--shadow-2); }

/* cursor-follow radial highlight — neutralized to a faint blue wash */
.spotlight-card, .bento__tile[data-spotlight] { position: relative; }
.spotlight-card::before, .bento__tile[data-spotlight]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(24, 88, 234, .05), transparent 60%);
  transition: opacity var(--dur-2) var(--ease);
}
.spotlight-card.is-spot::before, .bento__tile[data-spotlight].is-spot::before { opacity: 1; }
.spotlight-card > *, .bento__tile > * { position: relative; z-index: 1; }
/* absolute-gepositioneerde kinderen (bv. de "Meest gekozen"-ribbon) mogen hun
   plaatsing niet verliezen aan de generieke lift hierboven */
.spotlight-card > .price-card__ribbon { position: absolute; z-index: 2; }

@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__tile, .bento__tile--lg, .bento__tile--xl, .bento__tile--sm { grid-column: span 4; }
  .bento__tile--tall { grid-row: auto; }
}

/* --- 32.5 SCROLL CINEMA (parallax depth + pinned scrolly) --------------------
   [data-scrollscene] elements get a 0→1 --scene-progress from JS across their
   scroll range; author the motion with that var. .scene-depth-N are presets. */
[data-scrollscene] { will-change: transform; }
.scene-depth-rotate {
  transform: perspective(1200px)
    rotateX(calc((1 - var(--scene-progress, 0)) * 14deg))
    translateY(calc((1 - var(--scene-progress, 0)) * 26px))
    scale(calc(.96 + var(--scene-progress, 0) * .04));
  transition: transform .12s linear;
}
.scene-depth-rise {
  opacity: calc(.25 + var(--scene-progress, 0) * .75);
  transform: translateY(calc((1 - var(--scene-progress, 0)) * 60px));
}
/* section-enter choreography (richer than a plain reveal) */
.section-enter > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: calc(var(--enter-i, 0) * 70ms);
}
.section-enter.is-entered > * { opacity: 1; transform: none; }

/* --- 32.6 PREMIUM MICRO (button shine sweep + cursor glow) -------------------
   .btn-shine adds a diagonal light sweep on hover. .cursor-glow is a global
   pointer halo element injected by SCA.initCursorGlow() on fine pointers. */
/* btn-shine — GEREACTIVEERD (epic-laag): subtiele diagonale lichtsweep, alleen
   op hover/focus; in rust een gewone knop. Reduced motion: uit via 32.7. */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -70%;
  width: 40%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transition: left .6s var(--ease);
  pointer-events: none;
}
.btn-shine:hover::after, .btn-shine:focus-visible::after { left: 140%; }

/* cursor-glow — inert on light theme (no neon halo) */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none;
  width: 480px; height: 480px; margin: -240px 0 0 -240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 88, 234, .04), rgba(24, 88, 234, 0) 60%);
  opacity: 0; mix-blend-mode: normal;
  transform: translate3d(var(--cg-x, -9999px), var(--cg-y, -9999px), 0);
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

/* CIJFERDISCIPLINE · tabular-nums hoort UITSLUITEND op elementen die cijfers
   dragen, nooit op :root. Op :root wordt ook de punt en de komma tabelbreed
   (die horen bij een cijferreeks als 1.234,56): in Schibsted Grotesk op 80px
   werd de punt 48px in plaats van 23px, wat een zichtbaar gat gaf voor elke
   punt in de hero-H1 en in elke alinea sitewide. Hier gescoped op de cijfers
   zelf blijft de teller stabiel tijdens het optellen zonder die bijwerking.
   Nieuwe cijfercomponenten toevoegen aan DEZE selector, niet aan :root. */
.stat[data-count] [data-count-val],
.stat__num,
.stat__prefix,
.stat__suffix,
[data-count-val] { font-variant-numeric: tabular-nums; }
.stat.is-counting [data-count-val] { text-shadow: none; }

/* --- 32.7 REDUCED MOTION: neutralize the premium layer ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .aurora-canvas { opacity: .8; }
  .aurora-canvas .aurora-grain { display: none; }
  .glow-border::before, .gradient-border::before,
  .glow-border--halo::after { animation: none !important; }
  [data-textfx] .tfx-w { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-textfx="scramble"].is-scrambling { color: inherit; }
  .bento__tile { transition: none !important; }
  .bento__tile:hover { transform: none; }
  .spotlight-card::before, .bento__tile[data-spotlight]::before { display: none; }
  [data-scrollscene], .scene-depth-rotate, .scene-depth-rise { transform: none !important; opacity: 1 !important; }
  .section-enter > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn-shine::after { display: none; }
  .cursor-glow { display: none !important; }
  .stat.is-counting [data-count-val] { text-shadow: none; }
}

/* ============================================================================
   33. CONVERSION MACHINE  (additive — funnel mechanics, all reduced-motion safe)
   Pairs with js/app.js §29–§34. Honest, AVG-correct, no dark patterns.
     .sticky-cta            — floating smart CTA pill (desktop + mobile)
     .quiz-*                — multi-step groei-quiz mini-result / teaser pieces
     .lead-magnet           — reusable inline capture block (multi-point)
     .trust-row/.guarantee  — honest trust + guarantee accents
     .exit-offer            — exit-intent offer dressing (reuses .modal)
   ============================================================================ */

/* --- 33.0 EXTRA TOKEN (z above mobile-cta, below chat/nav) ------------------- */
:root { --z-stickycta: 96; }

/* --- 33.1 STICKY SMART CTA ----------------------------------------------------
   Injected by SCA.initStickyCta(). Appears after the hero, hides near the real
   footer CTA, dismissible. Coexists with .mobile-cta (it lifts above it). */
.sticky-cta {
  position: fixed; z-index: var(--z-stickycta);
  right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 26px);
  display: flex; align-items: center; gap: 12px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateY(140%) scale(.98);
  opacity: 0; visibility: hidden;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease), visibility var(--dur-2);
  will-change: transform, opacity;
}
.sticky-cta.is-shown { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.sticky-cta.is-hidden { transform: translateY(140%) scale(.98); opacity: 0; visibility: hidden; }
.sticky-cta__pulse {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  background: var(--cyan);
}
.sticky-cta__pulse svg { width: 20px; height: 20px; }
.sticky-cta__pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--cyan); animation: pulse-ring 2.6s var(--ease) infinite; opacity: 0;
}
.sticky-cta__body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sticky-cta__body strong { font-size: .92rem; color: var(--navy); font-weight: 700; letter-spacing: -.01em; }
.sticky-cta__body small { font-size: .76rem; color: var(--muted); }
.sticky-cta__go {
  flex: none; margin-left: 2px; padding: 10px 18px; font-size: .9rem;
  border-radius: var(--radius-pill);
}
.sticky-cta__x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid transparent; background: transparent;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.sticky-cta__x svg { width: 14px; height: 14px; }
.sticky-cta__x:hover { color: var(--navy); background: var(--ink-2); }
/* On phones the bottom mobile-cta bar exists: lift the pill above it + go compact */
@media (max-width: 720px) {
  .sticky-cta {
    left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom) + 10px);
    max-width: none;
  }
  .sticky-cta__go { margin-left: auto; }
}
@media (max-width: 380px) { .sticky-cta__body small { display: none; } }

/* --- 33.2 QUIZ MINI-RESULT (the micro-reward teaser before the email ask) ----
   Rendered inside the existing .modal__dialog by SCA.openQuiz(). Reuses the
   funnel ring / stepper styles; these add the branch-aware teaser readout. */
.quiz-mini {
  margin: 4px 0 6px; padding: 18px 18px 16px;
  border-radius: var(--radius); position: relative; overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--line);
}
.quiz-mini__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.quiz-mini__ring { position: relative; width: 64px; height: 64px; flex: none; }
.quiz-mini__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-mini__ring .t { fill: none; stroke: var(--line); stroke-width: 7; }
.quiz-mini__ring .f {
  fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round;
  filter: none;
  transition: stroke-dashoffset 1.3s var(--ease);
}
.quiz-mini__pct {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--cyan);
}
.quiz-mini__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.quiz-mini__title span { color: var(--cyan); }
.quiz-mini__list { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.quiz-mini__item { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--slate); }
.quiz-mini__item svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--success); }
.quiz-mini__lock {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: .78rem; color: var(--cyan); font-weight: 600;
}
.quiz-mini__lock svg { width: 13px; height: 13px; }

/* --- 33.3 LEAD MAGNET (reusable multi-point inline capture) -------------------
   SCA.mountLeadMagnet(el, {source}). Compact email/URL row -> /api/leads or
   /api/ai/scan. Drop at several scroll depths. */
.lead-magnet {
  position: relative; overflow: hidden;
  padding: clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(24, 88, 234, .04), transparent 55%),
    var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.lead-magnet__eyebrow { margin-bottom: 8px; }
.lead-magnet__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }
.lead-magnet__sub { color: var(--muted); font-size: .95rem; margin: 6px 0 18px; max-width: 52ch; }
.lead-magnet__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.lead-magnet__row .input { flex: 1 1 220px; min-width: 0; }
.lead-magnet__row .btn { flex: none; }
.lead-magnet__foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: .8rem; color: var(--muted);
}
.lead-magnet__foot svg { width: 14px; height: 14px; color: var(--success); flex: none; }
.lead-magnet__consent { margin-top: 12px; }
.lead-magnet__success {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 2px;
}
.lead-magnet__success .seal {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  background: linear-gradient(135deg, var(--cyan), var(--success));
}
.lead-magnet__success .seal svg { width: 24px; height: 24px; }
.lead-magnet__success strong { display: block; font-family: var(--font-display); font-size: 1.1rem; color: var(--navy); }
.lead-magnet__success small { color: var(--muted); font-size: .88rem; }
@media (max-width: 520px) {
  .lead-magnet__row .btn { flex: 1 1 100%; }
}

/* --- 33.4 TRUST ROW + GUARANTEE ACCENT (honest) ------------------------------ */
.trust-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(12px, 2.5vw, 26px);
}
.trust-row__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; font-weight: 600; color: var(--slate);
}
.trust-row__item svg { width: 17px; height: 17px; color: var(--success); flex: none; }
.guarantee {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-radius: var(--radius-pill);
  background: rgba(22, 163, 106, .08); border: 1px solid rgba(22, 163, 106, .3);
}
/* --ink-400 meet 4,36:1 op de groengetinte vulling boven --sand (rgb 233,239,226)
   en zakt daarmee onder AA. Zelfde ingreep als bij .sui--muted: --ink-500 = 9,34:1. */
.guarantee .muted,
.guarantee .spec,
.guarantee .microcopy { color: var(--ink-500); }
.guarantee__seal {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--paper);
  background: linear-gradient(135deg, var(--success), var(--cyan));
}
.guarantee__seal svg { width: 20px; height: 20px; }
.guarantee__text { font-size: .88rem; color: var(--slate); font-weight: 500; }
.guarantee__text strong { color: var(--success); }
/* honest, TRUE scarcity accent — phrased as positioning, never a fake countdown */
.scarcity-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 600; color: var(--cyan);
}
.scarcity-note .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--success); box-shadow: 0 0 0 0 rgba(22, 163, 106, .6);
  animation: scarcity-blip 2.4s var(--ease) infinite;
}
@keyframes scarcity-blip {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 106, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(22, 163, 106, 0); }
}

/* --- 33.5 EXIT-INTENT OFFER dressing (reuses .modal markup) ------------------ */
.exit-offer__ribbon {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--blue-tint); border: 1px solid var(--line);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--cyan);
}
.exit-offer__ribbon svg { width: 14px; height: 14px; }

/* --- 33.6 REDUCED MOTION: neutralize the conversion layer --------------------- */
@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: opacity .2s linear !important;
    transform: none !important;
  }
  .sticky-cta.is-shown { transform: none !important; }
  .sticky-cta.is-hidden { transform: none !important; }
  .sticky-cta__pulse::after { animation: none !important; }
  .quiz-mini__ring .f { transition: none !important; }
  .scarcity-note .dot { animation: none !important; box-shadow: none !important; }
}

/* ============================================================================
   34. BRIEFING V2  (klantfeedback juni 2026)
     .leak-flow / .leak-punch  — "Waarom bedrijven omzet verliezen" + 5-min belofte
     .card__bullets/.card--wide — dienstkaarten met kernpunten (7 diensten)
     .concept-cta              — conceptwebsite aanvragen
     .case-panel               — klantcase in harde cijfers
     .price-card__amount--poa  — prijs op aanvraag (prijzen tijdelijk offline)
   ============================================================================ */

/* --- 34.1 LEAK FLOW: hoe een lead verloren gaat (warme accenten, hard contrast) */
.leak-flow {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.leak-flow__step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-1);
}
.leak-flow__step h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--navy); }
.leak-flow__step p { font-size: .92rem; color: var(--muted); margin: 0; }
.leak-flow__num {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--warning);
  background: #FBF1DF; border: 1px solid #F2E2C4;
  margin-bottom: 16px;
}
.leak-flow__num svg { width: 20px; height: 20px; }
.leak-flow__step:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -16px; z-index: 2;
  width: 10px; height: 10px;
  border-top: 2px solid var(--warning);
  border-right: 2px solid var(--warning);
  transform: translateY(-50%) rotate(45deg);
  opacity: .75;
}
.leak-flow__step--loss { background: #FCF1F1; border-color: #F1D3D8; }
.leak-flow__step--loss .leak-flow__num { color: var(--danger); background: #F9E2E6; border-color: #F0C9D1; }

/* --- 34.2 LEAK PUNCH: donker contrastblok met de 5-minutenbelofte -------------- */
.leak-punch {
  margin-top: 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, #081D33, #103459);
  border: 1px solid #1B3C63;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 52px);
  box-shadow: var(--shadow-2);
}
.leak-punch .eyebrow { color: #8FB4FF; }
.leak-punch h3 { color: #FFFFFF; font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 6px 0 10px; }
.leak-punch p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 52ch; }
.leak-punch__btn { flex: none; }

/* --- 34.3 DIENSTKAARTEN: kernpunten + brede kaart + button-variant card-link --- */
.card__bullets { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.card__bullets li { position: relative; padding-left: 22px; font-size: .9rem; color: var(--slate); }
.card__bullets li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan);
  transform: rotate(-45deg);
}
.card__bullets--row { flex-direction: row; flex-wrap: wrap; gap: 8px 26px; }
button.card-link { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.card--wide { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.card--wide__body { flex: 1; min-width: 0; }
.card--wide .card__icon { margin-bottom: 0; }
.card--wide .card-link { margin-top: 0; flex: none; }

/* --- 34.4 CONCEPTWEBSITE CTA --------------------------------------------------- */
.concept-cta {
  margin-top: 34px;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
}
.concept-cta .btn { flex: none; }
.concept-cta__copy h3 { margin: 4px 0 8px; }
.concept-cta__copy p { max-width: 60ch; margin: 0; }

/* --- 34.5 KLANTCASE IN HARDE CIJFERS ------------------------------------------- */
.case-panel { margin-bottom: 44px; }
.case-panel__head h3 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin: 6px 0 8px; color: var(--navy); }
.case-panel__head p { margin: 0; }
.case-panel__stats { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); justify-content: space-between; }

/* --- 34.6 PRIJS OP AANVRAAG ----------------------------------------------------- */
.price-card__amount--poa { font-size: 1.35rem; letter-spacing: -.01em; color: var(--navy); }

/* --- 34.6b SHOT ZOOM (lightbox): klik op een CRM-scherm om het groot te bekijken.
       Briefing V2: "de klant kan meteen het CRM inzien". Gekoppeld aan
       [data-shot-zoom] via SCA.initShotZoom() in js/app.js. ------------------------ */
[data-shot-zoom] { cursor: zoom-in; }
[data-shot-zoom]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.shotbox {
  position: fixed; inset: 0; z-index: 250;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(7, 27, 51, .78);
  opacity: 0; transition: opacity .22s ease;
}
.shotbox.is-open { opacity: 1; }
.shotbox__img {
  max-width: min(1400px, 94vw); max-height: 86vh; width: auto; height: auto;
  border-radius: 14px; background: var(--paper);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}
.shotbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #FFFFFF;
  display: grid; place-items: center; cursor: pointer;
}
.shotbox__close:hover { background: rgba(255, 255, 255, .16); }
.shotbox__close svg { width: 20px; height: 20px; }
.shotbox__cap {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  color: rgba(255, 255, 255, .75); font-size: .85rem;
  max-width: 84vw; text-align: center; margin: 0;
}
@media (prefers-reduced-motion: reduce) { .shotbox { transition: none; } }

/* --- 34.8 EPIC LAYER (visuele upgrade): particles in het 5-minutenblok +
       donkere finale CTA-band met aurora. Beide alleen op donkere vlakken,
       zodat de lichte, kalme basis intact blijft. Mobiel: canvases uit. ------- */
.leak-punch { overflow: hidden; }
.leak-punch .particle-field { opacity: .5; }

.cta-band--dark {
  background: linear-gradient(135deg, #081D33, #10345A);
  border-color: #1B3C63;
}
.cta-band--dark .aurora-canvas { opacity: .5; }
.cta-band--dark .eyebrow { color: #8FB4FF; }
.cta-band--dark h2 { color: #FFFFFF; }
.cta-band--dark .lead { color: rgba(255, 255, 255, .84); }
.cta-band--dark .prob-list li { color: rgba(255, 255, 255, .86); }
/* Niet elke donkere band zit in een .surface-ink-sectie · daar bleef .microcopy op
   --ink-400 staan (2,8:1 op de gradient). De guard erna is verplicht: de inline
   funnel in deze band is een WIT .panel, waar --on-dark-2 juist 1,98:1 zou geven. */
.cta-band--dark .microcopy { color: var(--on-dark-2); }
.cta-band--dark .panel .microcopy { color: var(--ink-400); }
.cta-band--dark .pill {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFFFFF;
}
.cta-band--dark .pill__dot { background: #6EE7B7; }

@media (max-width: 720px) {
  .leak-punch .particle-field, .cta-band--dark .aurora-canvas { display: none; }
}

/* --- 34.7 RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 900px) {
  .leak-flow { grid-template-columns: 1fr 1fr; }
  .leak-flow__step:not(:last-child)::after { display: none; }
}
@media (max-width: 640px) {
  .leak-flow { grid-template-columns: 1fr; }
  .leak-punch { flex-direction: column; align-items: flex-start; }
  .leak-punch__btn { width: 100%; justify-content: center; }
  .card--wide { flex-direction: column; align-items: flex-start; }
  .card--wide .card__icon { margin-bottom: 16px; }
  .concept-cta { flex-direction: column; align-items: flex-start; }
  .concept-cta .btn { width: 100%; justify-content: center; }
  .case-panel__stats { justify-content: flex-start; }
}

/* ============================================================================
   35. FEEDBACK V3  (videofeedback Ilker · juli 2026)
     Wens: meer KLEUR, foto's/beeld, "gaten" opvullen, lead2order-sfeer
     (zachter, natuurlijker, contrast), referentie-strip + videosectie, blog.
     Aanpak: een WARME accentlaag (goud/zand) bovenop de bestaande lichte
     Taqiro-stijl + afwisselende sectie-oppervlakken voor ritme. Zware effecten
     blijven op de donkere vlakken; de warme lagen zijn licht en kalm.
   ============================================================================ */

/* --- 35.0 WARME TOKENS + SECTIE-OPPERVLAKKEN (kleur & ritme) ------------------ */
:root {
  --gold: #B07D2B;          /* warm accent (spaarzaam: iconen, sterren, decoratie) */
  --gold-2: #C99A46;        /* lichter goud voor sterren/gloed + goud op donker vlak */
  --gold-ink: #92621B;      /* donkerder goud voor TEKST op licht (WCAG AA ~5:1 op wit) */
  --gold-soft: #F4E8CF;     /* zachte goud-chip achtergrond */
  --sand: #FBF6EC;          /* warme sectie-achtergrond (licht, kalm) */
  --sand-2: #F6EEDD;        /* iets dieper zand */
  --sand-line: #ECE0C9;     /* hairline op zand */
}

/* Full-bleed sectie-oppervlakken: wisselen wit / zand / blauw-tint af zodat de
   pagina "ademt" en niet één wit blok is (feedback: meer kleur, natuurlijker). */
.surface-sand { background: var(--sand); }
.surface-sand-2 { background: linear-gradient(180deg, var(--sand), var(--sand-2)); }
.surface-blue { background: linear-gradient(180deg, var(--blue-tint), var(--paper)); }
.surface-sand + .surface-sand, .surface-blue + .surface-blue { border-top: 1px solid var(--sand-line); }

/* Warme variant van de eyebrow (goud i.p.v. blauw) voor de warme secties. */
.eyebrow--gold { color: var(--gold-ink); }
.eyebrow--gold::before { background: var(--gold-ink); }

/* Sterren in reviews warm goud (was blauw) — kleine, herkenbare warmte. */
.stars svg { color: var(--gold-2); }

/* --- 35.1 REFERENTIE-STRIP onder de hero (lead2order-patroon) -----------------
   "Vertrouwd door" + branche-wordmarks. Losse echte-logo-strip (data-ref-logos)
   blijft verborgen tot Ilker namen aanlevert (window.SCA_REF_LOGOS). ----------- */
.ref-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(16px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 26px) 0;
}
.ref-strip__label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ref-strip__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ref-strip__items { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 38px); }
.ref-strip__item {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.5vw, 1.18rem);
  letter-spacing: -.01em; color: var(--ink-400); transition: color var(--dur-2) var(--ease);
}
.ref-strip__item:hover { color: var(--navy); }
.ref-strip__item img { height: 28px; width: auto; filter: grayscale(1); opacity: .7; }
.ref-strip[hidden] { display: none; }

/* --- 35.2 MEDIA/VIDEO-FEATURE (vult de lege "in beeld"-sectie · F3 + video F4) -
   Twee kolommen: copy links, video-poster rechts met play-knop. Video zelf komt
   later via window.SCA_VIDEO_URL; zolang leeg opent de knop het dashboard groot. */
.mediafeature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.mediafeature__copy h2 { margin-bottom: 14px; }
.mediafeature__copy .lead { margin-bottom: 24px; }
.mediafeature__points { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.mediafeature__points li { position: relative; padding-left: 30px; color: var(--slate); font-weight: 500; }
.mediafeature__points li svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; color: var(--gold); }
.mediafeature__stage {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -28px rgba(11, 36, 64, .42), 0 12px 30px -14px rgba(11, 36, 64, .20);
  aspect-ratio: 16 / 10; background: #081D33;
}
.mediafeature__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ambient teamvideo: gedempte loop over de poster, achter scrim/knop/badge. */
.mediafeature__ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .mediafeature__ambient { display: none; } }
.mediafeature__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(7, 27, 51, .74), rgba(7, 27, 51, .30) 55%, rgba(16, 52, 90, .48));
}
.mediafeature__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(64px, 8vw, 84px); height: clamp(64px, 8vw, 84px); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--cyan);
  box-shadow: 0 18px 44px rgba(7, 27, 51, .45); border: 0;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.mediafeature__play::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); opacity: .0;
  animation: mf-pulse 2.6s var(--ease) infinite;
}
@keyframes mf-pulse { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.25); opacity: 0; } }
.mediafeature__play svg { width: 30px; height: 30px; margin-left: 4px; }
.mediafeature__play:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 22px 54px rgba(7, 27, 51, .55); }
.mediafeature__badge {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(7, 27, 51, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFFFFF; font-size: .82rem; font-weight: 600;
}
.mediafeature__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .mediafeature__play::before { animation: none; } }
@media (max-width: 860px) { .mediafeature { grid-template-columns: 1fr; } .mediafeature__stage { order: -1; } }

/* Video-lightbox (hergebruikt de shotbox-overlay-stijl; iframe of <video>). */
.videobox {
  position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px); background: rgba(7, 27, 51, .82); opacity: 0; transition: opacity .22s ease;
}
.videobox.is-open { opacity: 1; }
.videobox__frame {
  width: min(1100px, 94vw); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
}
.videobox__frame iframe, .videobox__frame video { width: 100%; height: 100%; border: 0; display: block; }
.videobox__close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #FFFFFF;
  display: grid; place-items: center; cursor: pointer;
}
.videobox__close:hover { background: rgba(255, 255, 255, .16); }
.videobox__close svg { width: 20px; height: 20px; }

/* --- 35.3 USP-GRID op zacht zand (lead2order "zacht/natuurlijk" · F1+F4) ------ */
.usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 26px); }
.usp-card {
  background: var(--paper); border: 1px solid var(--sand-line); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: 0 10px 28px -18px rgba(11, 36, 64, .22);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.usp-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11, 36, 64, .30); }
.usp-card__ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--gold-soft); color: var(--gold); margin-bottom: 16px;
}
.usp-card__ico svg { width: 26px; height: 26px; }
.usp-card h3 { font-size: 1.08rem; margin: 0 0 8px; color: var(--navy); }
.usp-card p { font-size: .93rem; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .usp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .usp-grid { grid-template-columns: 1fr; } }

/* --- 35.4 DIENSTEN-KOP met aside (vult de lege rechterhelft · F3) ------------- */
.head-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.head-split .section-head { margin-bottom: 0; }
.head-aside {
  position: relative; background: linear-gradient(150deg, var(--sand), var(--sand-2));
  border: 1px solid var(--sand-line); border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
}
.head-aside__big { display: flex; align-items: baseline; gap: 12px; }
.head-aside__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--gold); line-height: 1; letter-spacing: -.03em; }
.head-aside__num-label { font-weight: 600; color: var(--navy); font-size: 1.02rem; }
.head-aside__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.head-aside__list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--slate); }
.head-aside__list li svg { position: absolute; left: 0; top: 3px; width: 17px; height: 17px; color: var(--gold); }
@media (max-width: 860px) { .head-split { grid-template-columns: 1fr; } .head-aside { display: none; } }

/* --- 35.5 TESTIMONIAL: foto-klaar avatar (valt terug op initialen) ------------ */
.quote__avatar { overflow: hidden; }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* --- 35.6 BLOG: overzicht + artikelkaarten + artikel-typografie (F5) ---------- */
.blog-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #081D33, #10345A 70%);
  color: #FFFFFF; padding-block: clamp(64px, 10vw, 120px);
  /* Reserve the fixed 72px nav height at every width so the breadcrumb/eyebrow
     never tucks under the transparent header (esp. the 640-800px tablet band). */
  padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px));
}
/* Blog article pages lead with <article class="section"> (no .hero), so give it
   the same all-width nav clearance. article.section (0,1,1) beats .section. */
article.section { padding-top: calc(var(--nav-h) + clamp(16px, 4vw, 56px)); }
.blog-hero .eyebrow { color: #8FB4FF; }
.blog-hero .eyebrow--gold, .blog-hero .eyebrow--gold::before { color: var(--gold-2); background: var(--gold-2); }
.blog-hero .eyebrow--gold { background: none; }
.blog-hero h1 { color: #FFFFFF; }
.blog-hero p { color: rgba(255, 255, 255, .82); max-width: 62ch; }
.blog-hero__deco { position: absolute; inset: 0; opacity: .5; pointer-events: none; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); }
.postcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.postcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: #CBD7E6; }
.postcard__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center; color: #FFFFFF;
}
.postcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.postcard__media svg { width: 46px; height: 46px; opacity: .9; position: relative; z-index: 1; }
/* Gekleurde topic-posters (geen stockfoto's nodig, wél kleur · F1/F2) */
/* On-brand cover tints: navy → blue family, with one warm navy → gold. Keeps the
   6 categories distinguishable without the off-palette green/purple/red. */
.postcard__media--a { background: linear-gradient(135deg, #10345A, #1858EA); }
.postcard__media--b { background: linear-gradient(135deg, #0E2C4E, #2E86D8); }
.postcard__media--c { background: linear-gradient(135deg, #143252, #B07D2B); }
.postcard__media--d { background: linear-gradient(135deg, #0B2340, #3D6BE0); }
.postcard__media--e { background: linear-gradient(135deg, #0B2E4E, #3D78FF); }
.postcard__media--f { background: linear-gradient(135deg, #0A2036, #1C4FBF); }
.postcard__body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.2vw, 26px); }
.postcard__cat { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 10px; }
.postcard__title { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; line-height: 1.28; color: var(--navy); margin: 0 0 10px; letter-spacing: -.01em; }
.postcard__excerpt { font-size: .93rem; color: var(--muted); margin: 0 0 18px; }
.postcard__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--muted); }
.postcard__more { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); font-weight: 600; }
.postcard__more svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* Artikelpagina */
/* Article title: the global h1 clamp (up to 5rem) is a hero size that wraps into
   ragged, orphan-word lines inside the ~820px reading column. Scale it to an
   editorial title size so it reads as one confident headline. */
article.section h1 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.14; letter-spacing: -.02em; }
.breadcrumb { font-size: .84rem; color: var(--muted); margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a { color: var(--muted); border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--navy); border-color: var(--line); }
.breadcrumb span[aria-hidden] { color: var(--line); }
.article__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 18px 0 0; font-size: .88rem; color: var(--muted); }
/* --gold is het GRAFISCHE goud (iconen, decoratie) en haalt als tekst maar
   3,13:1 op --gold-soft. Voor tekst hoort --gold-ink: 4,57:1, dus AA. */
.article__meta .pill { background: var(--gold-soft); border-color: var(--sand-line); color: var(--gold-ink); }
.article__cover {
  margin: clamp(26px, 4vw, 40px) 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 21 / 9; display: grid; place-items: center; color: #FFFFFF;
  box-shadow: var(--shadow-2);
}
.article__cover svg { width: 62px; height: 62px; opacity: .92; }
.article__cover img { width: 100%; height: 100%; object-fit: cover; }
.article { font-size: 1.06rem; line-height: 1.8; color: var(--slate); }
.article > p { margin: 0 0 22px; }
.article h2 { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.85rem); color: var(--navy); margin: 40px 0 14px; letter-spacing: -.02em; }
.article h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--navy); margin: 30px 0 10px; }
.article ul, .article ol { margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.article ul li { position: relative; padding-left: 30px; }
.article ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 11px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.article ol { counter-reset: a; }
.article ol li { position: relative; padding-left: 40px; counter-increment: a; }
.article ol li::before { content: counter(a); position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--gold); background: var(--gold-soft); }
.article strong { color: var(--navy); font-weight: 600; }
.article a { color: var(--cyan); border-bottom: 1px solid rgba(24, 88, 234, .3); }
.article a:hover { border-color: var(--cyan); }
.article blockquote {
  margin: 28px 0; padding: 20px 26px; border-left: 4px solid var(--gold);
  background: var(--sand); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-size: 1.14rem; color: var(--navy); line-height: 1.55;
}
.article__key {
  margin: 28px 0; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--radius);
  background: var(--blue-tint); border: 1px solid #D4E2FB;
}
.article__key h3 { margin-top: 0; }
.post-cta {
  margin-top: clamp(36px, 5vw, 56px);
  background: linear-gradient(135deg, #081D33, #10345A); border: 1px solid #1B3C63;
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 40px);
}
.post-cta .eyebrow { color: #8FB4FF; }
.post-cta h2 { color: #FFFFFF; font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 6px 0 8px; }
.post-cta p { color: rgba(255, 255, 255, .82); margin: 0; max-width: 48ch; }
.post-cta .btn { flex: none; }
.post-nav { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.post-nav a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--navy); }
.post-nav a svg { width: 18px; height: 18px; color: var(--cyan); }
@media (max-width: 640px) { .post-cta { flex-direction: column; align-items: flex-start; } .post-cta .btn { width: 100%; justify-content: center; } }

/* ============================================================================
   36. SALESMACHINE OS  (bindend design-contract V2 · juli 2026)
     De interface is de held. Vier PNG's (samen 378.169 bytes) worden hier
     vervangen door in HTML en CSS GEBOUWDE schermen: scherp op elke
     pixeldichtheid, animeerbaar, met indexeerbare tekst en nul requests.
       .sui / .sui__*          — het scherm-frame en zijn onderdelen
       .sui--light/.sui--dark  — elk scherm heeft BEIDE varianten, want zware
                                 effecten mogen alleen op donkere vlakken en een
                                 PNG kan principieel niet op beide oppervlakken
                                 kloppen
       .sui-timeline           — de 35-secondenchoreografie (aanvraag → klant)
       .sui-compare            — dode staat naast levende staat
       .flow-chain             — de keten van aanvraag tot klant met T+ labels
       .step-track / .step__when — werkwijze met doorlooptijd per stap
       .dienst-card            — dienstkaart met interfacefragment + specregels
       .prob-panel             — de probleemsectie op de bestaande leak-CSS
       .result-grid            — de resultatensectie
       .proof-bar / .proof-line — bewijs met naam, periode en bronregel
       .price-factors          — prijsbezwaar zonder een enkel eurobedrag
       .microcopy / .spec      — de vaste geruststellings- en specregels
       .hero-collage           — gepromoveerd uit het style-blok in index.html
     Tokens staan in §1b, het accentklasse-contract in §1c.
     HARDE REGELS IN DEZE SECTIE: alles animeert uitsluitend transform en
     opacity (compositor), elk levend scherm heeft een eindtoestand voor
     prefers-reduced-motion (§36.22) en voor mobiel (§36.21), en niets hier
     herdefinieert een bestaande klasse uit §1 tot en met §35.
   ============================================================================ */

/* --- 36.1 ENGINE-REPARATIES + globale discipline -----------------------------
   body{overflow-x} is bij de bron in §2 gerepareerd (clip i.p.v. hidden), want
   hidden maakt van body een scroll-container en breekt position:sticky STIL. */

/* --scene-progress was niet geregistreerd, dus elke scroll-frame invalideerde de
   complete subtree van het scene-element. Engines zonder @property negeren dit
   blok zonder gevolgen (de fallback-waarden in de componenten dekken dat af). */
@property --scene-progress { syntax: "<number>"; inherits: false; initial-value: 0; }

/* Off-screen secties niet laten renderen. Opt-in via [data-cv] zodat niets stil
   verspringt; contain-intrinsic-size houdt de scrollbar stabiel. */
.section[data-cv] { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* Attribuut-gebonden effect-guard. De bestaande guard in §34.8 is
   SELECTOR-gebonden (.leak-punch .particle-field / .cta-band--dark
   .aurora-canvas), dus een nieuwe donkere sectie viel er buiten. */
@media (max-width: 720px) {
  [data-aurora], canvas[data-particles] { display: none; }
}

/* --- 36.2 OPPERVLAKKEN · ritme van de pagina --------------------------------
   Regel: nooit twee identieke vlakken naast elkaar, en EXACT TWEE .surface-ink
   op de homepage (#salesmachine en #aan-boord). Bij een derde verdampt het
   effect en is de lichte basis niet meer rustig. Dit is een ontwerpbeslissing,
   geen richtlijn — daarom staat hij hier naast de klasse.
   .surface-sand en .surface-blue bestaan al in §35.0 en blijven ongewijzigd. */
.surface-ink {
  background: linear-gradient(160deg, var(--ink-900) 0%, var(--ink-800) 100%);
  color: var(--on-dark);
  position: relative;
  isolation: isolate;
  overflow-x: clip;            /* full-bleed sectie mag nooit de pagina verbreden */
}
.surface-ink::before {         /* blauwdrukraster, puur CSS, 0 requests */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
.surface-ink h1, .surface-ink h2, .surface-ink h3, .surface-ink h4 { color: var(--on-dark); }
.surface-ink p, .surface-ink li { color: var(--on-dark-2); }
.surface-ink .eyebrow { color: var(--brand-300); }
.surface-ink .eyebrow::before { background: linear-gradient(90deg, transparent, var(--brand-300)); }
.surface-ink .eyebrow--gold { color: var(--gold-on-dark); }
.surface-ink .eyebrow--gold::before { background: var(--gold-on-dark); }
.surface-ink .lead { color: var(--on-dark-2); }
.surface-ink .spec, .surface-ink .microcopy, .surface-ink .caption { color: var(--on-dark-2); }

/* Het garantieblok staat op de drie dienstpagina's BINNEN een .cta-band--dark
   .surface-ink. Zijn eigen achtergrond is een gradient op 4 tot 6 procent alpha,
   dus daaronder blijft het navy. .guarantee__text erfde daar --slate: nagemeten
   1,58:1, de tekst was praktisch onzichtbaar. Deze override zet hem op 8,73:1.
   De zegel-cirkel krijgt hetzelfde: --success haalt op navy geen AA. */
.surface-ink .guarantee__text { color: var(--on-dark-2); }
.surface-ink .guarantee__text strong { color: var(--on-dark); }
.surface-ink .guarantee__seal { color: var(--live-300, #7FE3B0); border-color: rgba(127, 227, 176, .45); background: rgba(22, 163, 106, .18); }

.surface-ink .hairline { background: linear-gradient(90deg, transparent, var(--hair-dark-2) 18%, var(--hair-dark-2) 82%, transparent); }

/* Blauwdrukraster op LICHT — uitsluitend achter de hero. */
.grid-blueprint { position: relative; isolation: isolate; }
.grid-blueprint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(100% 80% at 20% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(100% 80% at 20% 0%, #000 30%, transparent 75%);
}
@media (max-width: 720px) { .grid-blueprint::before { display: none; } }

/* Brede productscene + leeskolom. --container blijft 1180px (de nav rekent
   daarop en zit op breedtecapaciteit); dit zijn losse opt-in varianten. */
.container--wide { max-width: var(--container-wide); }
.container--read { max-width: var(--container-read); }

/* DE BLEED-REGEL · links van een productscherm staat altijd meer witruimte dan
   rechts, of andersom, nooit symmetrisch. Een scherm dat aan een kant voorbij de
   container valt leest als een venster op iets groters in plaats van als plaatje.
   Opt-in, en boven 1100px alleen — daaronder kost het horizontale ruimte die er
   niet is (zie het overflow-contract in §36.21). */
@media (min-width: 1101px) {
  .bleed-right { margin-right: calc(-1 * clamp(40px, 6vw, 88px)); }
  .bleed-left  { margin-left:  calc(-1 * clamp(40px, 6vw, 88px)); }
}

/* --- 36.3 TYPOGRAFIELAAG · uitsluitend NIEUWE, opt-in klassen ----------------
   BEWUST NIET gedaan: h1/h2/h3/body/.lead/.eyebrow globaal herschalen. Die
   staan op 18 live pagina's inclusief blog, funnel-modal en prijskaarten; de
   nieuwe schaal komt per pagina mee via deze klassen. Mono is NOOIT voor
   lopende tekst — uitsluitend cijfers, labels, statussen, tijden en specs. */
.display-xl {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.9rem, 1.62rem + 5.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance; max-width: 18ch; color: var(--navy);
}
.surface-ink .display-xl { color: var(--on-dark); }
.body-sm { font-size: .9375rem; line-height: 1.6; color: var(--ink-400); }
.meta    { font-size: .875rem;  line-height: 1.5; color: var(--ink-400); }
.caption { font-size: .8125rem; line-height: 1.45; color: var(--ink-400); }

/* De vaste geruststellingsregel onder ELKE verzendknop. Als COMPONENT gebouwd
   en niet als losse zin, zodat hij nergens vergeten kan worden. De separator is
   ALTIJD het middenpunt-teken: nooit een liggend streepje, nooit een em-dash. */
.microcopy {
  font-family: var(--font-mono); font-weight: 400;
  font-size: .6875rem; letter-spacing: .04em; line-height: 1.5;
  color: var(--ink-400); margin-top: 10px; text-align: inherit;
}

/* De monospace SPECREGEL: wat marketingblokjes in productbladen verandert. */
.spec {
  font-family: var(--font-mono); font-weight: 400;
  font-size: .75rem; letter-spacing: .04em; line-height: 1.5;
  color: var(--ink-400); margin: 0;
}

/* Mono-variant van de bestaande eyebrow (opt-in; de basis-.eyebrow in §5 blijft
   exact zoals hij is zodat er sitewide niets verschuift). */
.eyebrow--mono {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .75rem; letter-spacing: .16em;
}

/* Onder 720px worden mono-labels 10px maar NOOIT lager, en nooit langer dan
   circa 24 tekens: mobiel is een ontwerp, geen degradatie. */
@media (max-width: 720px) {
  .microcopy { font-size: .625rem; }
  .spec { font-size: .6875rem; }
}

/* --- 36.4 .sui · HET SCHERM-FRAME -------------------------------------------
   Het vierde materiaal (SCHERM) naast papier, inkt en zand. Draagt OOK de vier
   echte screenshots (§34.6b .shotbox / [data-shot-zoom]), zodat gebouwd en echt
   beeld als een en hetzelfde product lezen.
   HET MAATVERSCHIL: ruimte ROND een sectie is 72px of meer, ruimte BINNEN een
   scherm 8 tot 12px. Dat contrast laat een paneel als apparaat lezen.
   DE EERLIJKHEIDSREGEL: .sui__cap onder een GEBOUWD scherm zegt altijd
   "Voorbeeldweergave van het Salescaptain-portaal" en NOOIT "Schermafbeelding";
   die claim is voorbehouden aan de vier echte PNG's. Geen nep-avatars, geen
   verzonnen klantnamen, geen klantcijfers binnen een gebouwd scherm. */
.sui {
  --sui-pad: 12px;                 /* 8 tot 12px: BINNEN een apparaat */
  position: relative;
  isolation: isolate;
  overflow: hidden;                /* overflow-contract: elk paneel klipt zelf */
  margin: 0;
  min-width: 0;
  border-radius: var(--radius-screen);   /* 20px · strakker dan de 28px kaart */
  background: var(--paper-1);
  color: var(--ink-500);
  font-family: var(--font-body);
  font-size: .875rem;
  line-height: 1.45;
  box-shadow: var(--e-screen), var(--ring-inset);
}

/* -- chroombalk: een BROODKRUIMEL, nooit een adresbalk met een merknaam ----- */
.sui__bar {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding-inline: 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: .6875rem; letter-spacing: .04em;
  /* --ink-400 op --paper-2 meet 4,20:1 en zakt op 11px onder AA. --ink-500
     meet 9,9:1 en blijft door het lage gewicht nog steeds rustig chroom. */
  color: var(--ink-500);
}
.sui__dots { display: inline-flex; gap: 5px; flex: none; }
.sui__dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-200);
}
.sui__crumb {
  min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sui__live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 8px; border-radius: var(--radius-chip);
  background: var(--live-soft); color: var(--live-ink);
  font-weight: 500;
}
.sui__dot {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--live);
}
.sui__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--live);
  animation: sui-pulse 2.4s var(--ease) infinite;
}
@keyframes sui-pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* -- romp: navigatierail + inhoudsvlak -------------------------------------- */
.sui__body { display: flex; align-items: stretch; min-width: 0; }
.sui__rail {
  flex: none; width: 44px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 0;
  background: var(--paper-2);
  border-right: 1px solid var(--hair);
}
.sui__rail i, .sui__rail span {
  display: block; width: 20px; height: 20px;
  border-radius: 6px;
  background: var(--ink-200);
  opacity: .75;
}
.sui__rail i:first-child { background: var(--brand-500); opacity: 1; }
.sui__main {
  flex: 1; min-width: 0;
  display: grid; gap: 8px; align-content: start;
  padding: var(--sui-pad);
}

/* -- bijschrift: een frame-voet, binnen het paneel (overflow-contract) ------ */
.sui__cap {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--paper-2);
  border-top: 1px solid var(--hair);
  font-size: .75rem; line-height: 1.4; color: var(--ink-400);
}

/* -- toestandslabel boven een vergelijking ---------------------------------- */
.sui__tag {
  position: absolute; z-index: 3; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-chip);
  background: var(--paper-1); box-shadow: var(--e1), var(--ring-inset);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-400);
}
.sui__tag--live { background: var(--live-soft); color: var(--live-ink); box-shadow: var(--e1); }

/* -- DONKERE VARIANT · zelfde markup, ander oppervlak ----------------------- */
.sui--dark {
  background: linear-gradient(165deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: var(--on-dark-2);
  box-shadow: var(--e-screen-dark), var(--ring-inset-dark);
}
.sui--dark .sui__bar {
  background: rgba(255, 255, 255, .04);
  border-bottom-color: var(--hair-dark);
  color: var(--on-dark-2);
}
.sui--dark .sui__dots i { background: var(--hair-dark-2); }
.sui--dark .sui__live { background: rgba(95, 227, 176, .12); color: var(--live-300); }
.sui--dark .sui__dot, .sui--dark .sui__dot::after { background: var(--live-300); }
.sui--dark .sui__rail { background: rgba(255, 255, 255, .03); border-right-color: var(--hair-dark); }
.sui--dark .sui__rail i, .sui--dark .sui__rail span { background: var(--hair-dark-2); }
.sui--dark .sui__rail i:first-child { background: var(--brand-300); }
.sui--dark .sui__cap { background: rgba(255, 255, 255, .03); border-top-color: var(--hair-dark); color: var(--on-dark-2); }
.sui--dark .sui__tag { background: rgba(255, 255, 255, .08); box-shadow: var(--ring-inset-dark); color: var(--on-dark); }
.sui--dark .sui__tag--live { background: rgba(95, 227, 176, .14); color: var(--live-300); }

/* -- MATEN ------------------------------------------------------------------ */
.sui--hero { --sui-pad: clamp(12px, 1.4vw, 18px); }
.sui--frag {
  --sui-pad: 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--e1), var(--ring-inset);
}
.sui--frag .sui__bar { height: 28px; padding-inline: 10px; font-size: .625rem; }
.sui--frag .sui__dots i { width: 6px; height: 6px; }
.sui--frag .sui__rail { display: none; }        /* een fragment heeft geen rail */
.sui--frag .sui__main { min-height: 96px; max-height: 140px; overflow: hidden; }
.sui--dark.sui--frag { box-shadow: var(--ring-inset-dark); }
.sui--strip { --sui-pad: 8px 12px; border-radius: var(--radius-chip); }
.sui--strip .sui__bar, .sui--strip .sui__rail { display: none; }
.sui--strip .sui__main {
  grid-auto-flow: column; grid-auto-columns: max-content;
  align-items: center; gap: 14px;
  overflow: hidden; white-space: nowrap;
}
/* §36.31: wat op mobiel wegvalt is EFFECT, niet BEWIJS. Op één kolom knipt de
   nowrap-strip tot 561px aan tijdstempels weg zonder scrollmogelijkheid, dus
   onder 1025px laten we de keten doorlopen op een tweede regel. */
@media (max-width: 1024px) {
  .sui--strip .sui__main {
    display: flex; flex-wrap: wrap;
    row-gap: 6px; column-gap: 14px;
    overflow: visible;
  }
}

/* -- TOESTAND: de dode staat. Beweegt nooit — dat is het punt. --------------
   AA-AFWIJKING VAN HET CONTRACT, BEWUST EN NAGEMETEN: het contract noemt
   opacity:.55 met tijdstempels in --ink-300. Op een .surface-ink sectie
   composite een wit paneel op .55 naar grijsblauw en komen die tijdstempels uit
   op 1,07:1 — ver onder AA, terwijl het wel echte, voorleesbare tekst is.
   grayscale(1) draagt het "dode" signaal al vrijwel helemaal; de fade hoeft dat
   alleen te versterken. Met opacity .85 en --ink-500 meet dezelfde tekst 5,62:1
   en blijft het paneel naast het levende scherm onmiskenbaar uit. */
.sui--muted { filter: grayscale(1); opacity: .85; box-shadow: var(--e2), var(--ring-inset); }
.sui--muted .sui__data, .sui--muted .sui__row time { color: var(--ink-500); }
.sui--muted * { animation: none !important; }

/* --- 36.5 SYSTEEMTYPOGRAFIE BINNEN EEN SCHERM -------------------------------
   Alles wat de SOFTWARE zegt is mono met tabular figures: tijdstempels,
   kolomkoppen, statuschips, bedragen, T+ labels. Een monospaced tijdstempel is
   het goedkoopste software-signaal dat bestaat. */
.sui__micro {
  font-family: var(--font-mono); font-weight: 600;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-400);
}
.sui__data {
  font-family: var(--font-mono); font-weight: 500;
  font-size: .8125rem; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
}
.sui__label { font-weight: 500; font-size: .8125rem; letter-spacing: -.005em; color: var(--ink-500); }
.sui--dark .sui__micro, .sui--dark .sui__data { color: var(--on-dark-2); }
.sui--dark .sui__label { color: var(--on-dark); }

/* --- 36.6 .sui__kpi · de KPI-tegel ------------------------------------------
   HARD CONTRACT: SCA.countUp selecteert `.stat[data-count]` (js/app.js). Een
   .sui__kpi zonder de klasse .stat telt STIL nooit op. Nooit duizendtallen in
   data-count: bouw 18.000 als .stat__prefix + data-count="18" + .stat__suffix.
   Klantcijfers horen BUITEN een gebouwd scherm (zie .proof-bar in §36.14). */
.sui__kpi {
  position: relative;
  display: grid; gap: 2px; align-content: start;
  min-width: 0;
  padding: 10px 12px 14px;
  border-radius: var(--radius-chip);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-100);
  overflow: hidden;
}
.sui__kpi .stat__num {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sui__kpi .stat__num .stat__prefix, .sui__kpi .stat__num .stat__suffix { color: var(--brand-600); }
.sui__delta {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--ink-400);
}
.sui__delta--up   { color: var(--live-ink); }
.sui__delta--down { color: var(--lost-ink); }

/* De onderlijn groeit synchroon met de teller. transform:scaleX() met
   transform-origin:left — NOOIT width, dat is een layout-animatie. */
.sui__bar-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand-500);
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}
.is-live .sui__bar-fill,
.is-final .sui__bar-fill,
.sui__kpi.is-counting .sui__bar-fill { animation: sui-fill 1.4s var(--ease) forwards; }
@keyframes sui-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sui--dark .sui__kpi { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-dark-2); }
.sui--dark .sui__kpi .stat__num { color: var(--on-dark); }
.sui--dark .sui__kpi .stat__num .stat__prefix, .sui--dark .sui__kpi .stat__num .stat__suffix { color: var(--brand-300); }
.sui--dark .sui__delta--up { color: var(--live-300); }
.sui--dark .sui__bar-fill { background: var(--brand-300); }

/* Een rij KPI-tegels binnen een scherm. minmax(0,1fr): elk grid-kind krijgt
   min-width:0, anders duwt een lang label de tegel breder dan het frame. */
.sui__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .sui__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- 36.7 .sui__row · de leadrij in het dashboard --------------------------- */
.sui__list { display: grid; gap: 6px; min-width: 0; }
.sui__row {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: var(--radius-chip);
  background: var(--paper-1);
  box-shadow: var(--ring-inset);
}
.sui__row > .sui__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui__row time, .sui__row .sui__data { flex: none; }
.sui__row--new { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); }
.sui__row--stale .sui__data { color: var(--lost-ink); }
.sui__avatar {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-100);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .625rem; color: var(--brand-700);
}
.sui--dark .sui__row { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--hair-dark); }
.sui--dark .sui__row--new { background: rgba(24, 88, 234, .18); box-shadow: inset 0 0 0 1px rgba(143, 180, 255, .35); }
.sui--dark .sui__avatar { background: rgba(143, 180, 255, .18); color: var(--brand-300); }

/* Statuschip. De signaalkleur kleurt VORM, de -ink variant kleurt LETTER: de
   grafische varianten zitten onder 4,5:1 en dragen daarom NOOIT tekst. */
.sui__chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-chip);
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .04em;
  background: var(--paper-2); color: var(--ink-400);
}
.sui__chip--live { background: var(--live-soft); color: var(--live-ink); }
.sui__chip--wait { background: var(--wait-soft); color: var(--wait-ink); }
.sui__chip--lost { background: var(--lost-soft); color: var(--lost-ink); }
.sui--dark .sui__chip { background: rgba(255, 255, 255, .07); color: var(--on-dark-2); }
.sui--dark .sui__chip--live { background: rgba(95, 227, 176, .14); color: var(--live-300); }

/* --- 36.8 .sui__chat · het WhatsApp-automatiseringsscherm -------------------
   Het enige visuele bewijs van de kernbelofte "binnen 5 minuten". BEWUST NIET
   het groen en niet de bubbelvorm van het onderliggende kanaal: dit is het
   SCA-paneel dat het aanstuurt, geen kloon. Dat scheelt merkgedoe en het is
   eerlijker. VERBODEN IN BEELD: telefoonnummer, achternaam, e-mailadres en de
   naam van het onderliggende platform. */
.sui__chat { display: grid; gap: 8px; min-width: 0; }
.sui__msg {
  position: relative;
  max-width: 82%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: .8125rem; line-height: 1.5;
}
.sui__msg p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.sui__msg time, .sui__msg .sui__data {
  display: block; margin-top: 4px;
  font-size: .625rem; letter-spacing: .04em; opacity: .8;
}
.sui__msg--out {
  justify-self: end;
  background: var(--brand-50);
  color: var(--ink-900);
  box-shadow: inset 0 0 0 1px var(--brand-100);
  border-bottom-right-radius: 4px;
}
.sui__msg--in {
  justify-self: start;
  background: var(--paper-1);
  color: var(--ink-900);
  box-shadow: var(--ring-inset);
  border-bottom-left-radius: 4px;
}
.sui--dark .sui__msg--out { background: rgba(24, 88, 234, .26); color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(143, 180, 255, .30); }
.sui--dark .sui__msg--in  { background: rgba(255, 255, 255, .06); color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--hair-dark); }

/* Het bezorgd-vinkje in --live, NOOIT in het groen van het kanaal. */
.sui__check {
  display: inline-block; margin-left: 6px;
  width: 12px; height: 12px;
  color: var(--live);
  transform: scale(.4); opacity: 0;
}
.is-live .sui__check, .is-final .sui__check { animation: sui-check-in .32s var(--ease) 5.2s forwards; }
.is-final .sui__check { animation-delay: 0s; }
@keyframes sui-check-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sui--dark .sui__check { color: var(--live-300); }

/* Drie typdotjes, staggered scale. Alleen transform en opacity. */
.sui__typing {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--paper-1); box-shadow: var(--ring-inset);
}
.sui__typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-300);
  transform: scale(.55); opacity: .45;
}
.is-live .sui__typing i { animation: sui-typing .9s var(--ease-in-out) infinite; }
.sui__typing i:nth-child(2) { animation-delay: .15s; }
.sui__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sui-typing {
  0%, 100% { transform: scale(.55); opacity: .45; }
  50%      { transform: scale(1);   opacity: 1; }
}
.sui--dark .sui__typing { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--hair-dark); }

/* De reactietijd is het inhoudelijke punt en mag nooit wegvallen. */
.sui__stamp {
  margin: 2px 0 0;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  color: var(--live-ink);
}
.sui__stamp .sui__data { color: inherit; font-size: inherit; }
.sui--dark .sui__stamp { color: var(--live-300); }
/* Een LICHT .sui-paneel binnen een .surface-ink-sectie: daar wint `.surface-ink p`
   (0,1,1) van `.sui__stamp` (0,1,0), waardoor de stempel de on-dark-kleur op wit
   pakt · gemeten 1,93:1. Deze regel (0,3,0) herstelt de eigen kleur: 6,43:1. */
.surface-ink .sui--light .sui__stamp { color: var(--live-ink); }

/* --- 36.9 .sui__cal · het agendascherm dat zich vult ------------------------
   Hergebruikt VOLLEDIG de bestaande .agenda-viz plus de [data-agenda-fill]-hook
   uit §30.11, dus er komt geen enkele regel nieuwe JavaScript bij. De klassen
   agenda-viz, __row, __time, __label en __badge blijven exact zoals ze zijn:
   app.js en de reduced-motion-regels in §30.14 hangen eraan. Circa 30% van de
   slots blijft bewust open — dat is een eerlijkheidssignaal. */
.sui__cal { gap: 6px; min-width: 0; }
.sui__cal .agenda-viz__row { padding: 8px 11px; border-radius: var(--radius-chip); }
.sui__cal .agenda-viz__time { font-family: var(--font-mono); font-size: .75rem; font-variant-numeric: tabular-nums; min-width: 46px; }
.sui__cal .agenda-viz__label { font-size: .8125rem; }
.sui__cal .agenda-viz__badge { font-family: var(--font-mono); font-size: .625rem; }
.sui__cal .agenda-viz__row.is-booked { border-color: var(--brand-200); background: var(--brand-100); }
.sui__cal .agenda-viz__row.is-booked .agenda-viz__time { color: var(--brand-700); }
.sui__cal .agenda-viz__row.is-booked .agenda-viz__badge { color: var(--live-ink); }
.sui--dark .sui__cal .agenda-viz__row { background: rgba(255, 255, 255, .04); border-color: var(--hair-dark); }
/* Ook het NIET-geboekte badge krijgt een on-dark kleur: hij staat op opacity:0,
   maar tijdens de fade en bij een geforceerde eindtoestand is de basiskleur
   --muted (#5C7085) op inkt slechts 2,75:1 en dus onder AA. */
.sui--dark .sui__cal .agenda-viz__time, .sui--dark .sui__cal .agenda-viz__label,
.sui--dark .sui__cal .agenda-viz__badge { color: var(--on-dark-2); }
.sui--dark .sui__cal .agenda-viz__row.is-booked { background: rgba(24, 88, 234, .24); border-color: rgba(143, 180, 255, .34); }
.sui--dark .sui__cal .agenda-viz__row.is-booked .agenda-viz__time { color: var(--brand-300); }
.sui--dark .sui__cal .agenda-viz__row.is-booked .agenda-viz__label { color: var(--on-dark); }
.sui--dark .sui__cal .agenda-viz__row.is-booked .agenda-viz__badge { color: var(--live-300); }

/* --- 36.10 .sui__pipe · de pipelinekolommen ---------------------------------
   UITZONDERING OP HET OVERFLOW-CONTRACT: de kolommen worden op mobiel
   VERTICAAL gestapeld en NIET in een horizontale scroller weggeschoven.
   Horizontaal scrollbare inhoud wordt op mobiel structureel niet ontdekt, en
   dit is precies de module die het product uitlegt. */
.sui__pipe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.sui__lane {
  display: grid; gap: 6px; align-content: start;
  min-width: 0;
  padding: 8px;
  border-radius: var(--radius-chip);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.sui__lane > .sui__micro { display: flex; justify-content: space-between; gap: 6px; }
.sui__lane--target { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-200); }
.sui__deal {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--paper-1);
  box-shadow: var(--e1), var(--ring-inset);
  font-size: .75rem; color: var(--ink-500);
}
.sui__deal .sui__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sui__deal .sui__data { font-size: .6875rem; }
.sui--dark .sui__lane { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--hair-dark); }
.sui--dark .sui__lane--target { background: rgba(24, 88, 234, .16); box-shadow: inset 0 0 0 1px rgba(143, 180, 255, .30); }
.sui--dark .sui__deal { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--hair-dark-2); color: var(--on-dark); }

/* De kaart die naar de kolom Afspraak glijdt. Letterlijke waarden in de
   keyframes: een var() in een geanimeerde transform valt in Blink terug op de
   main thread. --ease-spring, een van maximaal twee per pagina. */
.sui__deal--moves { transform: translate3d(0, 0, 0); }
.is-live .sui__deal--moves { animation: sui-deal var(--dur-seq) var(--ease-spring) infinite both; }
.is-final .sui__deal--moves { transform: translate3d(0, 104%, 0); animation: none; }
@keyframes sui-deal {
  0%, 37%   { transform: translate3d(0, 0, 0); }
  44%, 100% { transform: translate3d(0, 104%, 0); }
}

/* --- 36.11 .sui__chart · de omzetgrafiek ------------------------------------
   EERLIJKHEIDSREGEL: dit component draagt GEEN bedragen, GEEN klantcijfers en
   GEEN bronclaim. Het toont uitsluitend een relatieve trend zonder as-labels;
   een fictieve omzetgrafiek met cijfers is expliciet verboden. Echte cijfers
   staan buiten het scherm in .proof-bar, met naam, periode en bronregel.
   De staven groeien met scaleY vanaf de basis — nooit met height. */
.sui__chart { display: grid; gap: 8px; min-width: 0; }
.sui__bars {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: end; gap: clamp(4px, 1.2vw, 9px);
  height: 96px; min-width: 0;
  padding-top: 4px;
}
.sui__bar-col {
  min-width: 0; height: 100%;
  display: grid; align-items: end;
}
.sui__bar-col > i {
  display: block; width: 100%;
  height: var(--h, 40%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
  transform: scaleY(0); transform-origin: bottom center;
  will-change: transform;
}
.sui__bar-col--peak > i { background: linear-gradient(180deg, var(--brand-300), var(--brand-500)); }
.is-live .sui__bar-col > i,
.is-final .sui__bar-col > i { animation: sui-grow .7s var(--ease) forwards; }
.sui__bar-col:nth-child(2) > i { animation-delay: .06s; }
.sui__bar-col:nth-child(3) > i { animation-delay: .12s; }
.sui__bar-col:nth-child(4) > i { animation-delay: .18s; }
.sui__bar-col:nth-child(5) > i { animation-delay: .24s; }
.sui__bar-col:nth-child(6) > i { animation-delay: .30s; }
.sui__bar-col:nth-child(7) > i { animation-delay: .36s; }
@keyframes sui-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sui__axis {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: clamp(4px, 1.2vw, 9px);
  padding-top: 6px;
  border-top: 1px solid var(--hair-2);
  text-align: center;
}
.sui--dark .sui__axis { border-top-color: var(--hair-dark); }
.sui--dark .sui__bar-col > i { background: linear-gradient(180deg, var(--brand-300), var(--brand-500)); }

/* --- 36.12 .sui-timeline · het signature moment -----------------------------
   Een lead reist zichtbaar door de complete machine: leadrij binnen · bericht
   uit en antwoord terug · kaart naar Afspraak · agendaslot groen · teller van
   17 naar 18. Vijf stappen op animation-delay via het data-t attribuut. Geen
   timers, geen bibliotheek.
   START EN STOP: SCA.initLiveScreens zet .is-live bij 35% zichtbaarheid en
   HAALT HEM WEER WEG. Die functie mag GEEN io.unobserve doen — alle acht
   bestaande observers in app.js doen dat wel, waardoor animation-play-state
   zonder die nieuwe observer nooit terugvalt naar paused. */
[data-live-screen]:not(.is-live) * { animation-play-state: paused !important; }

.sui-timeline { display: grid; gap: clamp(16px, 2.4vw, 22px); min-width: 0; }
.sui-timeline__stamp {
  margin: 0;
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em;
  color: var(--ink-400);
}
.sui-timeline__stamp .sui__data { color: var(--brand-600); font-size: inherit; }
.surface-ink .sui-timeline__stamp { color: var(--on-dark-2); }
.surface-ink .sui-timeline__stamp .sui__data { color: var(--brand-300); }

/* De vijf stappen. De keyframes eindigen op 100% ZICHTBAAR: daardoor houdt de
   eindtoestand de laatste twee tellen vast voordat de cyclus reset, en bevriest
   animation-fill-mode:forwards op mobiel in de VOLLEDIGE eindstand in plaats
   van in een leeg scherm. */
.sui-timeline [data-t] { opacity: 0; transform: translateY(10px); }
.sui-timeline.is-live [data-t] { animation-duration: var(--dur-seq); animation-timing-function: var(--ease); animation-iteration-count: infinite; animation-fill-mode: both; }
.sui-timeline.is-live [data-t="0"] { animation-name: sui-t0; }
.sui-timeline.is-live [data-t="1"] { animation-name: sui-t1; }
.sui-timeline.is-live [data-t="2"] { animation-name: sui-t2; }
.sui-timeline.is-live [data-t="3"] { animation-name: sui-t3; }
.sui-timeline.is-live [data-t="4"] { animation-name: sui-t4; }
@keyframes sui-t0 { 0%       { opacity: 0; transform: translateY(10px); } 4%,  100% { opacity: 1; transform: none; } }
@keyframes sui-t1 { 0%, 17%  { opacity: 0; transform: translateY(10px); } 21%, 100% { opacity: 1; transform: none; } }
@keyframes sui-t2 { 0%, 37%  { opacity: 0; transform: translateY(10px); } 41%, 100% { opacity: 1; transform: none; } }
@keyframes sui-t3 { 0%, 50%  { opacity: 0; transform: translateY(10px); } 54%, 100% { opacity: 1; transform: none; } }
@keyframes sui-t4 { 0%, 62%  { opacity: 0; transform: translateY(10px); } 66%, 100% { opacity: 1; transform: none; } }

/* De CTA verschijnt zodra de timeline is afgelopen en BLIJFT daarna staan: dit
   is het hoogste intentiemoment van de pagina, dus hij loopt exact een keer. */
.sui-timeline__cta { opacity: 0; transform: translateY(8px); }
.sui-timeline.is-live .sui-timeline__cta { animation: sui-cta var(--dur-seq) var(--ease) 1 forwards; }
@keyframes sui-cta { 0%, 70% { opacity: 0; transform: translateY(8px); } 78%, 100% { opacity: 1; transform: none; } }

/* .is-final = de EINDTOESTAND. Een bevroren halve animatie leest als een kapotte
   pagina en kost vertrouwen, dus reduced-motion en mobiel krijgen dit. */
.sui-timeline.is-final [data-t],
.sui-timeline.is-final .sui-timeline__cta { opacity: 1; transform: none; animation: none; }

/* --- 36.13 .sui-compare · dode staat naast levende staat --------------------
   Twee toestanden van hetzelfde scherm naast elkaar zijn het hele
   probleemargument. Onder 1024px stapelen ze met de DODE variant eerst. */
.sui-compare {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
@media (max-width: 1024px) {
  .sui-compare { grid-template-columns: minmax(0, 1fr); }
}

/* --- 36.14 .scene-screen · de scrollscene-preset voor een scherm ------------
   Het scherm ligt 9deg achterover en komt recht terwijl je scrollt. Hoort op de
   SECTIE of op het frame zelf met data-scene-range="enter" (eenrichting), NOOIT
   samen met [data-reveal] op hetzelfde element: beide schrijven transform.
   Maximaal 4 scrollscenes per pagina. */
.scene-screen {
  transform:
    perspective(1400px)
    rotateX(calc((1 - var(--scene-progress, 0)) * 9deg))
    translateY(calc((1 - var(--scene-progress, 0)) * 34px))
    scale(calc(.972 + var(--scene-progress, 0) * .028));
  transform-origin: 50% 100%;
}
@media (max-width: 720px) { .scene-screen { transform: none; } }

/* --- 36.15 .draw-line · een groeiende RECHTE lijn ---------------------------
   Hangt aan de BESTAANDE .draw-on-view hook (SCA.drawOnView zet .is-drawn, ook
   als er geen SVG-paden in zitten), dus nul nieuwe JavaScript. Voor een rechte
   lijn is scaleX met transform-origin:left visueel identiek aan
   stroke-dashoffset maar composite-only in plaats van per-frame paint. Bewaar
   drawOnView zelf uitsluitend voor echt gebogen paden. */
.draw-line { position: relative; overflow: hidden; background: var(--hair); }
.draw-line__fill {
  display: block; position: absolute; inset: 0;
  background: var(--brand-500);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.draw-on-view.is-drawn .draw-line__fill,
.is-drawn.draw-line .draw-line__fill { transform: scaleX(1); }
.surface-ink .draw-line { background: var(--hair-dark-2); }
.surface-ink .draw-line__fill { background: var(--brand-300); }

/* --- 36.16 .flow-chain · van aanvraag tot klant -----------------------------
   Acht schakels met een doorlooptijd per schakel. De T+ tijdlabels zijn pure
   tekst, dus indexeerbaar en voorleesbaar. De schakels in het midden dragen elk
   een .sui--frag, zodat het geen icoontjesrij is maar echte interface.
   UITZONDERING OP HET OVERFLOW-CONTRACT: op mobiel VERTICAAL stapelen, nooit in
   een horizontale scroller — horizontaal scrollbare inhoud wordt op mobiel
   structureel niet ontdekt en dit is de module die het product uitlegt. */
.flow-chain {
  position: relative;
  display: grid; gap: clamp(14px, 2vw, 20px);
  margin: 0; padding: 0; list-style: none;
  counter-reset: flow;
}
.flow-chain__link {
  position: relative;
  display: grid; gap: 6px; align-content: start;
  min-width: 0;
  padding-left: 28px;                 /* mobiel: de lijn loopt links */
}
.flow-chain__node {
  position: absolute; left: 0; top: 3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper-1);
  box-shadow: 0 0 0 2px var(--brand-500);
}
.flow-chain__link--done .flow-chain__node { background: var(--brand-500); }
.flow-chain__label { font-weight: 600; font-size: .9375rem; color: var(--navy); min-width: 0; }
.flow-chain__t { color: var(--brand-600); }
.flow-chain__frag { margin-top: 4px; }
.surface-ink .flow-chain__label { color: var(--on-dark); }
.surface-ink .flow-chain__t { color: var(--brand-300); }
.surface-ink .flow-chain__node { background: var(--ink-800); box-shadow: 0 0 0 2px var(--brand-300); }
.surface-ink .flow-chain__link--done .flow-chain__node { background: var(--brand-300); }

/* Mobiele verbindingslijn: een verticale rail links langs de schakels. */
.flow-chain::before {
  content: ""; position: absolute; z-index: -1;
  left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: var(--hair);
}
.surface-ink .flow-chain::before { background: var(--hair-dark-2); }

/* Tablet: twee rijen van vier. Desktop: acht schakels op een rij met een
   horizontale rail. */
@media (min-width: 721px) {
  .flow-chain { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
  .flow-chain__link { padding-left: 0; padding-top: 26px; }
  .flow-chain__node { top: 0; left: 0; }
  .flow-chain::before { left: 6px; right: 6px; top: 6px; bottom: auto; width: auto; height: 1px; }
}
@media (min-width: 1101px) {
  .flow-chain { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .flow-chain__label { font-size: .875rem; }
}

/* --- 36.17 .step-track · de werkwijze met doorlooptijd ----------------------
   Zes stappen MET een doorlooptijd en een deliverable per stap. Hergebruikt de
   bestaande .step en .step__num uit §23. Mobiel kantelt de lijn naar verticaal
   langs de linkerkant. */
.step-track {
  position: relative;
  display: grid; gap: clamp(20px, 3vw, 30px);
  margin: 0; padding: 0; list-style: none;
}
.step-track .step { padding-left: 34px; min-width: 0; }
.step-track .step__num {
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  margin-bottom: 0;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .02em;
  background: var(--paper-1); border-color: var(--brand-200);
}
.step__when {
  display: block; margin-bottom: 4px;
  color: var(--brand-600);
}
.step-track .step h3 { margin-bottom: 6px; }
.step-track .step p { margin-bottom: 8px; }
.step-track__line { position: absolute; z-index: -1; left: 10px; top: 22px; bottom: 12px; width: 2px; }
.surface-ink .step-track .step__num { background: var(--ink-800); border-color: var(--ink-600); color: var(--brand-300); }
.surface-ink .step__when { color: var(--brand-300); }

@media (min-width: 861px) {
  .step-track { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(22px, 3vw, 40px); row-gap: clamp(30px, 4vw, 48px); }
  .step-track .step { padding-left: 0; padding-top: 34px; }
  .step-track .step__num { top: 0; }
  .step-track__line { left: 0; right: 0; top: 10px; bottom: auto; width: auto; height: 2px; }
}
@media (min-width: 1101px) {
  .step-track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- 36.18 .dienst-card · het productblad -----------------------------------
   Uitbreiding van de bestaande .card met een monospace SPECREGEL en een
   interfacefragment. Dertien iconen leest als een bureausite; dertien
   schermfragmenten leest als een product.
   VALKUIL: .spotlight-card > * tilt ALLE kinderen naar position:relative, dus
   een kaart met een absoluut gepositioneerd kind (lint, ribbon, badge) krijgt
   BEWUST GEEN .spotlight-card. Deze kaart heeft er geen, dus hij mag wel. */
.dienst-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dienst-card > .sui { margin-bottom: 4px; }
.dienst-card h3 { margin: 0; }
.dienst-card > p { margin: 0; }
.dienst-card .spec + .spec { margin-top: 2px; }
.dienst-card .card-link { margin-top: auto; padding-top: 12px; }
.dienst-card .card-link svg { transition: transform var(--dur-1) var(--ease); }
.dienst-card:hover { border-color: var(--brand-200); }
.dienst-card:hover .card-link svg { transform: translateX(4px); }
/* Het fragment binnenin beweegt NIET: alleen de grote featureschermen leven,
   anders wordt de sectie onrustig. */
.dienst-card .sui * { animation: none !important; }

/* --- 36.19 .feature-showcase · de sticky featuresectie ----------------------
   DE ENIGE sticky-constructie op de site: de tekstkolom blijft staan terwijl de
   schermen erlangs schuiven. Werkt UITSLUITEND omdat body overflow-x:clip heeft
   in plaats van hidden (zie §2) — hidden maakt van body een scroll-container en
   breekt sticky STIL. Onder 980px vervalt sticky via de media query, met
   position:static en niet met !important.
   ASYMMETRIE: featureblokken wisselen 5/7 en 7/5 af, nooit 6/6. */
.feature-showcase {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.feature-showcase__copy { min-width: 0; }
.feature-showcase__stack { display: grid; gap: clamp(28px, 6vw, 72px); min-width: 0; }
@media (min-width: 981px) {
  .feature-showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature-showcase--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature-showcase--flip .feature-showcase__copy { order: 2; }
  .feature-showcase__copy {
    position: sticky;
    top: calc(var(--nav-h) + 48px);
    align-self: start;
  }
}
@media (max-width: 980px) {
  .feature-showcase__copy { position: static; }
}

/* --- 36.20 .case-card · de klantcase ----------------------------------------
   Hierarchie: eerst het cijfer, dan de context, dan de bron. Elk cijfer draagt
   een periode EN een bronregel; zonder die twee is het geen bewijs maar een
   claim. VERBODEN: een klantcijfer binnen een gebouwd .sui-scherm, en NIBA met
   logo, website of vestigingsplaats (alleen de NAAM is vrijgegeven). */
.case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.case-card {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--paper-1);
  box-shadow: var(--e2), var(--ring-inset);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--e3), inset 0 0 0 1px var(--brand-200); }
.case-card__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.8rem + 1.9vw, 3.2rem);
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.case-card__num .stat__prefix, .case-card__num .stat__suffix { color: var(--brand-600); }
.case-card__label { font-weight: 600; color: var(--navy); margin: 0; }
.case-card__body { margin: 0; color: var(--ink-500); }
.case-card .spec { margin-top: auto; padding-top: 8px; }

/* Twee vrijgegeven cijfers naast elkaar op een geanonimiseerde case. Kleiner dan
   .case-card__num (dat is het ENE dominante cijfer van een uitgelichte case),
   zodat de hierarchie tussen de hoofdcase en de twee kleinere blijft kloppen. */
.case-card__stats { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 30px); margin: 2px 0 2px; }
.case-card__stats .stat { display: flex; flex-direction: column; gap: 2px; }
.case-card__stats .stat__num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  line-height: 1; letter-spacing: -.03em; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.case-card__stats .stat__prefix, .case-card__stats .stat__suffix { color: var(--brand-600); }
.case-card__stats .stat__label { font-size: .82rem; color: var(--ink-500); font-weight: 500; }
@media (min-width: 721px)  { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .case-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 36.21 .proof-bar · bewijs binnen twee schermen -------------------------
   Naam en functie zijn VERPLICHTE velden in dit component, zodat de fout van de
   concurrent (negen cases met lege naamvelden) technisch onmogelijk wordt in
   plaats van onwaarschijnlijk. De quote staat in een EIGEN blok en nooit binnen
   de case, anders leest hij als de eigenaar van dat bedrijf. GEEN CTA: dit blok
   bewijst, het vraagt niet. */
.proof-bar {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.proof-bar__num { display: grid; gap: 6px; align-content: start; min-width: 0; }
.proof-bar__num .stat__num {
  font-size: clamp(2.2rem, 1.8rem + 1.9vw, 3.2rem);
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.proof-bar__label { margin: 0; font-weight: 600; color: var(--navy); }
.proof-bar__quote { min-width: 0; }
.proof-bar__quote .quote__author { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.proof-bar__quote cite { font-style: normal; font-weight: 600; color: var(--navy); }
.proof-bar > .ref-strip { justify-content: flex-start; }
@media (min-width: 861px) {
  .proof-bar { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .proof-bar__num { border-right: 1px solid var(--hair); padding-right: clamp(20px, 3vw, 34px); }
}

/* De bewijsregel in de hero: een enkel cijfer met naam, direct onder de CTA. */
.proof-line {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
  font-size: .9375rem; color: var(--ink-500);
}
.proof-line::before {
  content: ""; flex: none;
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--gold-ink);
}
.proof-line strong { color: var(--navy); font-weight: 600; }
.surface-ink .proof-line { color: var(--on-dark-2); }
.surface-ink .proof-line::before { background: var(--gold-on-dark); }
.surface-ink .proof-line strong { color: var(--on-dark); }

/* --- 36.22 .price-factors · het prijsbezwaar --------------------------------
   Drie kaarten met drie keer "Prijs op aanvraag" na zes secties die verlangen
   opbouwen is het grootste frictiepunt van de pagina. Dit vervangt een leegte
   door een reden. VERBODEN: elk eurobedrag, overal, ook in FAQ-antwoorden en in
   JSON-LD offers. */
.price-factors {
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(22px, 2.8vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.price-factors__list {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 10px 26px;
  margin: 0 0 4px; padding: 0; list-style: none;
}
.price-factors__list li {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0;
  color: var(--ink-500); font-size: .9375rem;
}
.price-factors__list .sui__micro { flex: none; color: var(--brand-600); }
@media (min-width: 721px)  { .price-factors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .price-factors__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Onder elke .price-card__amount--poa hoort een <span class="spec">. */
.price-card__amount--poa + .spec { margin-top: 4px; }

/* --- 36.23 PROBLEEMSECTIE ---------------------------------------------------
   HET CONTRACT IS HIER LEIDEND: #omzetlek komt NIET terug als eigen sectie (de
   klant liet hem in Feedback 3 zelf verwijderen). Het probleemargument leeft als
   .sui--muted VOOR-toestand binnen .sui-compare in #salesmachine — twee
   toestanden van hetzelfde scherm, harder contrast, nul klantrisico.
   De bestaande .leak-flow / .leak-punch CSS uit §34.1 en §34.2 (sinds Feedback 3
   ongebruikt) krijgt hieronder alleen een oppervlakvariant, zodat hij binnen een
   .surface-ink sectie herbruikbaar is ZONDER nieuwe klassenamen en zonder een
   enkele bestaande regel te wijzigen. */
.surface-ink .leak-flow__step {
  background: rgba(255, 255, 255, .04);
  border-color: var(--hair-dark);
  box-shadow: none;
}
.surface-ink .leak-flow__step h3 { color: var(--on-dark); }
.surface-ink .leak-flow__step p { color: var(--on-dark-2); }
.surface-ink .leak-flow__num { background: rgba(224, 138, 30, .16); border-color: rgba(224, 138, 30, .32); color: #F0B45C; }
.surface-ink .leak-flow__step--loss { background: rgba(224, 69, 95, .12); border-color: rgba(224, 69, 95, .28); }
.surface-ink .leak-flow__step--loss .leak-flow__num { background: rgba(224, 69, 95, .18); border-color: rgba(224, 69, 95, .34); color: #F6929F; }
.surface-ink .leak-punch { background: rgba(255, 255, 255, .05); border-color: var(--hair-dark-2); box-shadow: none; }

/* De compacte VOOR-lijst naast een .sui--muted scherm. */
.prob-list--before li { color: var(--ink-500); }
.prob-list--before li::marker { color: var(--lost); }
.surface-ink .prob-list--before li { color: var(--on-dark-2); }

/* --- 36.24 .result-grid · de resultatensectie -------------------------------
   Uitkomsten, niet activiteiten. Elk cijfer draagt zijn eenheid en zijn
   bronregel; cijfers zonder bron horen hier niet. Elke teller MOET de klasse
   .stat dragen naast .result-card, anders selecteert SCA.countUp hem niet. */
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.result-card {
  display: grid; gap: 4px; align-content: start;
  min-width: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--radius);
  background: var(--paper-1);
  box-shadow: var(--e1), var(--ring-inset);
}
.result-card .stat__num {
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.result-card__label { margin: 0; font-weight: 600; color: var(--navy); font-size: .9375rem; }
.result-card .spec { margin-top: 6px; }
.surface-ink .result-card { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--hair-dark-2); }
.surface-ink .result-card .stat__num { color: var(--on-dark); }
.surface-ink .result-card__label { color: var(--on-dark); }
@media (min-width: 861px) { .result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- 36.25 .sui-chrome · schermlijst om bestaand beeld ----------------------
   Zet de bestaande .mediafeature (en elk ander beeldblok) in hetzelfde
   venster-kader als de gebouwde schermen, zodat foto, video en interface als
   een en hetzelfde product lezen. Functioneel verandert er niets aan
   .mediafeature: alleen dit frame komt eromheen. */
.sui-chrome {
  position: relative;
  border-radius: var(--radius-screen);
  overflow: hidden;
  background: var(--paper-1);
  box-shadow: var(--e-screen), var(--ring-inset);
}
.sui-chrome > .sui__bar { position: relative; z-index: 2; }
.sui-chrome .mediafeature__stage { border: 0; border-radius: 0; box-shadow: none; }
.sui-chrome__readout {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  padding: 4px 9px; border-radius: var(--radius-chip);
  background: rgba(7, 27, 51, .62);
  color: #FFFFFF;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* --- 36.26 HERO-COLLAGE · gepromoveerd uit het style-blok in index.html -----
   Stond page-local in een <style> in index.html, waardoor geen enkele andere
   pagina CRM-beeld kon tonen zonder de CSS te dupliceren. Hier ongewijzigd
   overgenomen, met de dode var(--accent) en var(--hair) nu wel gedefinieerd
   (§1b). Het page-local blok in index.html mag hierna weg. */
.hero__inner--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__copy { max-width: 640px; min-width: 0; }
.hero__stage-wrap { position: relative; min-width: 0; }
.hero .container { position: relative; z-index: 2; }

/* Taqiro-stijl CRM-collage: hoofdscherm + twee meekijkende panelen + labels.
   Padding op de container geeft de overlappende kaarten hun ruimte, zodat
   niets buiten de hero-kolom valt. */
/* De padding is de SPELING waarin de twee zwevende kaarten leven. Ze zijn
   absoluut gepositioneerd tegen de padding-box, dus meer padding = minder
   overlap met het hoofdpaneel.

   Deze waarden zijn in de browser nagemeten, niet geschat. Met de oude padding
   (42px boven) dekte de agendakaart 228px van het 493px brede hoofdpaneel af,
   precies over de KPI-labelrij: "Afspraken" en "Offertes" waren onleesbaar en
   ook "omzet per week" ging schuil onder de pipelinekaart. Dat viel niet op
   toen dit nog drie screenshots waren, want daar was overlap juist de stijl;
   met gebouwde panelen snijdt diezelfde overlap door echte tekst.

   Boven en onder is nu ruim genoeg dat de kaarten alleen de RAND van het
   hoofdpaneel raken (circa 30px hoekoverlap) en geen enkel label meer bedekken.
   Wijzig je de hoogte van een kaart, hermeet dan of er nog tekst onder valt. */
.hero-collage {
  position: relative; max-width: none; margin-inline: auto;
  padding: clamp(78px, 8.4vw, 124px) clamp(26px, 3vw, 44px) clamp(72px, 8vw, 104px) clamp(10px, 1.4vw, 18px);
}
.hero-collage__main { position: relative; z-index: 1; }
.hero-collage__card { position: absolute; z-index: 2; border-radius: 14px; background: var(--paper); }
.hero-collage__card--agenda { top: 0; right: 0; width: 49%; }
.hero-collage__card--pipeline { bottom: 0; left: 0; width: 57%; z-index: 3; }
.hero-collage__pill {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 40px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  font-size: .8rem; font-weight: 600; color: var(--navy); white-space: nowrap;
}
.hero-collage__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* De pillen zweven op de rand van het hoofdpaneel. Nagemeten in de browser:
   de bovenste stond op 16% en kruiste daarmee de chroombalk, waardoor het woord
   "dashboard" in de broodkruimel onleesbaar werd. Hij staat nu net BOVEN de
   paneelrand (de balk bevat tekst, daar mag niets overheen).
   De onderste mag wel op de rand liggen: daaronder zitten alleen de decoratieve
   staafjes van de omzetgrafiek, geen tekst. Verplaats je een pil, meet dan of er
   tekst onder valt in plaats van het op het oog te doen. */
.hero-collage__pill--top { top: 11%; left: 0; }
.hero-collage__pill--bottom { bottom: 11.5%; right: 4%; }
.hero-collage__hint { margin: 12px auto 0; text-align: center; font-size: .85rem; color: var(--muted); }

/* Rustige secundaire link naast de primaire CTA. BLIJFT een echte leadcapture
   (de groeicheck), niet een scrollanker: dit is de laagste trede van de
   conversieladder en de enige converterende uitweg in frame 1. */
.hero__quiet-link {
  align-self: center; color: var(--muted); font-size: .95rem;
  text-decoration: none; border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hero__quiet-link:hover { color: var(--accent); border-color: var(--accent); }

/* Echte productscreenshots, kalm ingelijst. De PNG's dragen hun eigen
   browser-chroom, dus alleen een frame plus zachte schaduw. */
.shot {
  margin: 0; border-radius: 18px; overflow: hidden; line-height: 0;
  border: 1px solid var(--hair);
  box-shadow: 0 30px 60px -24px rgba(11, 36, 64, .40), 0 10px 26px -12px rgba(11, 36, 64, .18);
}
.shot__img { display: block; width: 100%; height: auto; }

@media (max-width: 980px) {
  .hero__inner--split { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8vw, 56px); }
  .hero__copy { max-width: none; }
  .hero-collage { max-width: 580px; }
}
@media (max-width: 720px) {
  /* Mobiel minimalistisch: alleen het dashboard, geen overlappende panelen.
     De img's houden loading="lazy" — display:none images downloaden nog steeds,
     en de collage bespaart daarmee circa 195 KB. */
  .hero-collage { max-width: 100%; padding: 0; }
  .hero-collage__card, .hero-collage__pill { display: none; }
}

/* --- 36.27 HERO-CINEMA · de LCP-reparatie -----------------------------------
   DE BELANGRIJKSTE TECHNISCHE CORRECTIE VAN HET CONTRACT. Chrome telt een
   element met opacity:0 NIET mee als LCP-kandidaat, en de H1 IS het LCP-element.
   config.js en app.js staan synchroon en parser-blocking in de head, app.js is
   circa 108 KB, en .is-loaded komt pas na DOMContentLoaded plus twee geneste
   rAF's. De bestaande regel in §30.4 zet elke [data-hero-line] op opacity:0 en
   verschuift LCP daarmee circa 0,4 tot 0,7 seconde op mid-range 4G.
   Oplossing: de H1 draagt data-hero-lcp, is vanaf de eerste paint zichtbaar en
   animeert UITSLUITEND transform. De choreografie blijft volledig intact.
   DE .js-GUARD: init() in app.js heeft GEEN try/catch en initHero staat 12e in
   een keten van 20. Zonder <script>document.documentElement.classList.add('js')
   </script> als EERSTE element in de head zou elke fout in de elf eerdere inits
   kop, lead en beide CTA's onzichtbaar maken. Een noscript-blok dekt dit NIET
   (dat vuurt alleen als JS uit staat, niet als het stukgaat).
   Stagger van .11s naar .06s per regel: 110ms per regel is loom. */
.js .hero-cinema [data-hero-line]:not([data-hero-lcp]) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--hero-i, 0) * .06s + .10s);
  will-change: opacity, transform;
}
.js .hero-cinema [data-hero-lcp] {
  opacity: 1;                       /* NOOIT 0: dit is de LCP-kandidaat */
  transform: translateY(18px);
  transition: transform var(--dur-3) var(--ease);
  transition-delay: calc(var(--hero-i, 0) * .06s + .10s);
  will-change: transform;
}
/* Eindtoestand. Deze twee regels MOETEN mee: de twee regels hierboven zijn
   specifieker dan de bestaande .hero-cinema.is-loaded regel in §30.4, dus
   zonder deze zouden de regels na het laden op opacity:0 blijven staan.
   will-change wordt hier WEER OPGEHEVEN — de bestaande regel zet hem en reset
   hem nooit, wat een permanente compositorlaag per heroregel achterlaat. */
.js .hero-cinema.is-loaded [data-hero-line]:not([data-hero-lcp]) { opacity: 1; transform: none; will-change: auto; }
.js .hero-cinema.is-loaded [data-hero-lcp] { transform: none; will-change: auto; }

/* --- 36.28 .spinner__fallback · een echt toegankelijkheidsgat ---------------
   Het globale reduced-motion-blok in §30.14 zet animation-duration op .001ms
   met !important, waardoor de roterende border van .spinner (§19) bevriest tot
   een stilstaand streepje. Dat zit in de laadstatus van elk formulier op de
   site. Buiten reduced-motion is de fallback screenreader-only. */
.spinner__fallback {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- 36.29 FOCUS · zichtbaar op elke ondergrond -----------------------------
   De witte tussenring maakt de ring leesbaar op zowel papier als inkt. Nooit
   weggestyled. */
.sui a:focus-visible, .sui button:focus-visible,
.flow-chain a:focus-visible, .case-card a:focus-visible,
.hero__quiet-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}

/* --- 36.30 HET OVERFLOW-CONTRACT · blokkerend, geen detail ------------------
   VERPLICHTE TEST op 320px, 360px en 390px voordat een sectie als af geldt.
   Horizontale scroll is een blokkerende fout. Elk grid-kind krijgt min-width:0,
   elk paneel klipt zichzelf, en de bleed-klassen bestaan alleen boven 1100px. */
.sui, .sui__main, .sui__body, .sui__row, .sui__lane, .sui__deal,
.flow-chain__link, .step-track .step, .case-card, .result-card,
.dienst-card, .proof-bar__num, .proof-bar__quote { min-width: 0; }
.sui img, .sui svg, .sui-chrome img, .sui-chrome video { max-width: 100%; }

/* Brede mock-inhoud die echt niet past krijgt een EIGEN scroller binnen een
   max-width:100% wrapper — nooit de sectie zelf laten uitzetten. Geldt
   NADRUKKELIJK NIET voor .flow-chain en .sui__pipe: die stapelen verticaal. */
.sui-scroller {
  max-width: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.sui-scroller > * { scroll-snap-align: start; }

/* --- 36.31 MOBIEL (<=720px) · een ONTWERP, geen degradatie ------------------
   Wat op mobiel wegvalt is EFFECT, niet BEWIJS. Elk scherm toont zijn
   eindtoestand met de tijdstempels intact, de specregels blijven leesbaar en de
   sticky CTA blijft blauw en gevuld. Geen canvas, geen aurora, geen particles,
   geen cursor-effecten, geen 3D-parallax, geen scrollscene. De
   hero-cinema-stagger BLIJFT draaien: die kost niets en is precies het moment
   waarop een mobiele bezoeker beslist. */
@media (max-width: 720px) {
  .sui {
    --sui-pad: 10px;
    border-radius: var(--radius-sm);
    box-shadow: var(--e2), var(--ring-inset);
  }
  .sui--dark { box-shadow: var(--e2), var(--ring-inset-dark); }
  .sui__rail { display: none; }             /* de rail is decor, geen bewijs */
  .sui__bar { height: 32px; padding-inline: 10px; }
  .sui__msg { max-width: 92%; }
  .sui__pipe { grid-template-columns: minmax(0, 1fr); }   /* VERTICAAL, nooit scrollen */
  .sui__bars { height: 76px; }
  .sui-compare { gap: 18px; }

  /* De cyclus draait exact EEN keer en bevriest daarna in de EINDSTAND. De
     keyframes eindigen op 100% zichtbaar, dus forwards levert het volledige
     scherm op en niet een leeg frame. */
  .sui-timeline.is-live [data-t] { animation-iteration-count: 1; animation-fill-mode: forwards; }
  .sui-timeline.is-live .sui__deal--moves,
  .sui-timeline.is-live .sui__bar-col > i { animation-iteration-count: 1; animation-fill-mode: forwards; }
  .is-live .sui__deal--moves { animation-iteration-count: 1; animation-fill-mode: forwards; }

  /* will-change wordt onder 720px overal opgeheven: op mid-range Android kost
     elke extra compositorlaag meer dan de animatie oplevert. */
  .sui__bar-fill, .sui__bar-col > i, .draw-line__fill { will-change: auto; }

  /* Geen 3D-parallax en geen scrollscene op mobiel. */
  .sui .layer-3d { transform: none !important; }
}

/* --- 36.32 PREFERS-REDUCED-MOTION · de EINDTOESTAND, nooit een halve --------
   Elk scherm rendert zijn eindtoestand: de lead staat er, het bericht is
   bezorgd met vinkje, de kaart staat in Afspraak, het slot is groen, de teller
   staat op zijn eindwaarde inclusief de onderlijn op scaleX(1), en de CTA staat
   er meteen. Een bevroren halve animatie leest als een kapotte pagina en kost
   vertrouwen. De statuslampjes stoppen met pulseren maar BEHOUDEN hun kleur,
   want de kleur draagt betekenis. De bestaande dekking in §24 en §30.14 blijft
   volledig intact; dit blok vult uitsluitend §36 aan. */
@media (prefers-reduced-motion: reduce) {
  /* Statuslampje: geen puls, kleur blijft. */
  .sui__dot::after { animation: none !important; opacity: 0 !important; }
  .sui__typing i { animation: none !important; transform: none !important; opacity: 1 !important; }

  /* Alle vijf de timelinestappen, de CTA en de bewegende pipelinekaart staan
     direct in hun eindtoestand. */
  .sui-timeline [data-t],
  .sui-timeline__cta { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sui__deal--moves { animation: none !important; transform: translate3d(0, 104%, 0) !important; }
  .sui__check { animation: none !important; opacity: 1 !important; transform: none !important; }

  /* Tellers springen naar hun eindwaarde (app.js doet dat al), dus de onderlijn
     moet direct op scaleX(1) staan in plaats van op 0. */
  .sui__bar-fill { animation: none !important; transform: scaleX(1) !important; }
  .sui__bar-col > i { animation: none !important; transform: scaleY(1) !important; }
  .draw-line__fill { transition: none !important; transform: scaleX(1) !important; }

  /* Geen scherm-choreografie; de bestaande engine forceert --scene-progress al
     op 1, maar dit dekt ook de gevallen waarin app.js niet draait. */
  .scene-screen { transform: none !important; }

  /* .spinner: het globale animation-duration:.001ms!important bevriest de
     roterende border tot een stilstaand streepje. Vervang het rondje door de
     tekstfallback "Bezig met laden". */
  .spinner { border: 0 !important; width: auto !important; height: auto !important; animation: none !important; }
  .spinner__fallback {
    position: static; clip: auto; width: auto; height: auto; margin: 0;
    overflow: visible; white-space: normal;
    font-family: var(--font-mono); font-size: .75rem; color: var(--ink-400);
  }
}

/* ============================================================================
   37. ARTIKELCOMPONENT  (canoniek blogartikel · juli 2026)
     De 22 blogartikelen droegen samen 27 KB page-scoped CSS in eigen <style>
     blokken: 175 unieke selectors en 14 implementaties van hetzelfde idee.
     Er bestonden drie namen voor dezelfde tabelwrapper (.tablewrap, .table-wrap,
     .tbl-wrap) en twee voor de inhoudsopgave (.toc, .article__toc), waardoor
     dezelfde datatabel per artikel anders oogde. Deze sectie is vanaf nu de
     ENIGE bron van waarheid voor de vier terugkerende artikelonderdelen:
       .tablewrap + .article table   · datatabel met caption, thead en tbody
       .article__toc                 · inhoudsopgave met ankerlinks naar de H2's
       .article figure / figcaption  · figuur met bijschrift
       .article__sources             · bronnenlijst onderaan het artikel
     VERVALLEN NAMEN (markup migreren, daarna 37.6 verwijderen):
       .table-wrap · .tbl-wrap · .tblwrap · [data-tablewrap] · .sui-scroller
       om een artikeltabel                                    -> .tablewrap
       .datatable · .tbl (tabelklassen)  -> geen klasse, gewoon .article table
       .toc · [data-toc]                                      -> .article__toc
       .sources · .srcs · .srclist                            -> .article__sources
     MARKUPCONTRACT van een datatabel (de wrapper is een div, het bijschrift een
     zusje ervan; een <caption> in de tabel blijft toegestaan als kort label):
       <figure>
         <div class="tablewrap" tabindex="0" role="group" aria-label="Tabel: ...">
           <table> <caption>...</caption> <thead>...</thead> <tbody>...</tbody> </table>
         </div>
         <figcaption>Bron · ...</figcaption>
       </figure>
     HARDE REGELS IN DEZE SECTIE: uitsluitend bestaande tokens uit §1, §1b en
     §35, geen enkele herdefinitie van een bestaande klasse uit §1 tot en met
     §36, font-variant-numeric staat NOOIT op :root of html (zie 37.2), alles
     werkt van 320 tot 1920px zonder de PAGINA horizontaal te laten scrollen,
     elke tekstkleur haalt AA, en elke overgang heeft een eindtoestand voor
     prefers-reduced-motion (37.8).
   ============================================================================ */

/* --- 37.1 DATATABEL · wrapper, tabel, caption, thead, tbody -----------------
   De wrapper is de ENIGE scroll-container. max-width:100% + overflow-x:auto
   houdt een brede tabel binnen de leeskolom, zodat de pagina zelf nooit
   meescrolt. scroll-snap staat expliciet UIT: met een enkel kind is scrollLeft
   0 de enige snappositie, waardoor een mandatory scroller de tabel op mobiel
   steeds terugtrekt naar links (dat gebeurde toen een artikel .sui-scroller
   (§36.30) om een tabel zette). De wrapper krijgt in de markup tabindex="0" +
   role="group" + aria-label: een scroll-container zonder focus is met het
   toetsenbord onbereikbaar. */
.tablewrap,
/* vervallen namen · verwijderen zodra de markup gemigreerd is (37.6): */
.article .table-wrap,
.article .tbl-wrap,
.article .tblwrap,
.article [data-tablewrap] {
  max-width: 100%;
  margin: 26px 0 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
figure.tablewrap { padding: 0; }
.article figure > .tablewrap { margin: 0; }
.tablewrap:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.article table {
  width: 100%;
  min-width: 34rem;              /* 544px · smaller past niet leesbaar op 320px */
  border-collapse: collapse;
  font-size: .94rem;
  line-height: 1.55;
  color: var(--slate);
}
.article caption {
  caption-side: bottom;
  text-align: left;
  padding: 12px 16px 14px;
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .04em; line-height: 1.5;
  color: var(--muted);           /* 4,7:1 op --ink-2 · AA */
}
.article th,
.article td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.article thead th {
  vertical-align: bottom;
  white-space: nowrap;
  font-family: var(--font-mono); font-weight: 600;
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-600);       /* 7,2:1 op --ink-2 · ruim AA op klein mono */
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.article tbody th { font-weight: 600; color: var(--navy); }
.article tbody tr:last-child th,
.article tbody tr:last-child td { border-bottom: 0; }

/* Rijmarkering alleen waar echt gehoverd kan worden; op touch blijft een
   hoverstaat anders plakken na een tik. */
@media (hover: hover) {
  .article tbody th,
  .article tbody td { transition: background-color var(--dur-1) var(--ease); }
  .article tbody tr:hover th,
  .article tbody tr:hover td { background: var(--ink-2); }
}

/* --- 37.2 CIJFERKOLOMMEN · tabular-nums, uitsluitend op de cel --------------
   font-variant-numeric hoort ALLEEN op de cel of het getal zelf en NOOIT op
   :root of html: daar krijgt ook de punt en de komma de tabelbreedte mee en
   springt een punt van 23px naar 48px (dat was hier een echte bug). Zet de
   klasse .num op de th of td van een cijferkolom, of op de losse waarde. */
.article .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 37.3 INHOUDSOPGAVE · ankerlinks naar de H2's ---------------------------
   Werkt zowel binnen .article als ervoor (als los <nav>), met <ol> of <ul>.
   .article zet op elke li een eigen bullet of nummerchip via ::before; in de
   inhoudsopgave gaat die uit en komt er een mono-volgnummer voor terug. De
   dubbele selectors zijn nodig omdat .article ul li::before specifieker is dan
   .article__toc li::before. */
.article__toc,
/* vervallen namen · verwijderen zodra de markup gemigreerd is (37.6): */
.article .toc,
.toc,
.article [data-toc],
[data-toc] {
  margin: 0 0 30px;
  padding: 20px clamp(18px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
}
.article__toc > :first-child,
.article .article__toc > :first-child { margin-top: 0; }
.article__toc .eyebrow,
.article .article__toc .eyebrow { margin: 0 0 12px; }
.article__toc h2, .article__toc h3,
.article .article__toc h2, .article .article__toc h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; line-height: 1.4; letter-spacing: 0;
  color: var(--navy);
  margin: 0 0 12px;
}
.article__toc ol, .article__toc ul,
.article .article__toc ol, .article .article__toc ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 9px;
  counter-reset: toc;
}
.article__toc li,
.article .article__toc li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  counter-increment: toc;
  font-size: .95rem; line-height: 1.5;
}
.article__toc li::before,
.article .article__toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: .15em;
  display: block;
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none; transform: none;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .6875rem; letter-spacing: .04em;
  color: var(--brand-600);
}
.article__toc a,
.article .article__toc a {
  color: var(--slate);
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
  .article__toc a:hover,
  .article .article__toc a:hover { color: var(--brand-600); border-bottom-color: currentColor; }
}

/* --- 37.4 FIGUUR EN BIJSCHRIFT ---------------------------------------------
   Een figuur houdt hetzelfde verticale ritme als een alinea. Het bijschrift
   staat BUITEN de scroller (zusje van .tablewrap), zodat het bij een brede
   tabel op zijn plek blijft staan in plaats van mee te schuiven. */
.article figure {
  margin: 28px 0 30px;
  padding: 0;
  max-width: 100%;
}
.article figure > img,
.article figure > svg,
.article figure > video {
  display: block;
  width: 100%; height: auto;
  border-radius: var(--radius);
}
.article figcaption {
  margin: 12px 0 0;
  font-size: .8125rem; line-height: 1.55;
  color: var(--muted);           /* 5,4:1 op wit · AA */
}
/* Vangnet voor nog niet gemigreerde markup: een <figure> met een tabel er
   direct in wordt zelf de scroller, zodat de PAGINA ook zonder .tablewrap
   nooit horizontaal scrolt. Vervalt samen met 37.6. */
.article figure:has(> table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* --- 37.5 BRONNENLIJST ------------------------------------------------------
   Sluit het artikel af met een dunne scheidingslijn, een mono-label en de
   bronregels op leesformaat. Lange URL's mogen afbreken, anders duwt een
   bronregel de leeskolom breder dan het scherm. */
.article__sources,
/* vervallen namen · verwijderen zodra de markup gemigreerd is (37.6): */
.article .sources,
.article .srcs,
.article .srclist {
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.article__sources .eyebrow,
.article .article__sources .eyebrow { margin: 0 0 12px; }
.article__sources h2, .article__sources h3,
.article .article__sources h2, .article .article__sources h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; line-height: 1.4; letter-spacing: 0;
  color: var(--navy);
  margin: 0 0 12px;
}
.article__sources ol, .article__sources ul,
.article .article__sources ol, .article .article__sources ul {
  margin: 0; padding: 0;
  list-style: none;
  display: grid; gap: 10px;
  counter-reset: src;
}
.article__sources li,
.article .article__sources li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  counter-increment: src;
  font-size: .875rem; line-height: 1.6;
  color: var(--muted);
}
.article__sources li::before,
.article .article__sources li::before {
  content: counter(src) ".";
  position: absolute; left: 0; top: 0;
  display: block;
  width: auto; height: auto;
  border: 0; border-radius: 0; background: none; transform: none;
  font-family: var(--font-mono); font-weight: 500;
  font-size: .75rem; letter-spacing: .04em;
  color: var(--muted);
}
.article__sources a,
.article .article__sources a {
  color: var(--muted);
  border-bottom: 1px solid var(--hair);
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .article__sources a:hover,
  .article .article__sources a:hover { color: var(--brand-600); border-bottom-color: currentColor; }
}

/* --- 37.6 RESPONSIVE · 320 tot 1920px ---------------------------------------
   Boven 1180px doet de leeskolom (--container-read) het werk, dus hier staat
   alleen wat naar beneden toe moet wijken. De tabel houdt haar min-width en
   scrolt binnen .tablewrap; de pagina zelf blijft stil. */
@media (max-width: 720px) {
  .tablewrap,
  .article .table-wrap,
  .article .tbl-wrap,
  .article .tblwrap,
  .article [data-tablewrap] { margin: 22px 0 10px; border-radius: var(--radius-sm); }
  .article table { font-size: .9rem; }
  .article th,
  .article td { padding: 10px 12px; }
  .article caption { padding: 10px 12px 12px; }
  .article__toc,
  .article .toc,
  .toc,
  .article [data-toc],
  [data-toc] { padding: 18px; border-radius: var(--radius-sm); }
  .article figure { margin: 24px 0 26px; }
}

/* --- 37.7 PRINT · de tabel valt open, de scroller verdwijnt ----------------- */
@media print {
  .tablewrap { overflow: visible; border: 0; }
  .article table { min-width: 0; }
}

/* --- 37.8 PREFERS-REDUCED-MOTION · eindtoestand, geen halve overgang --------
   Deze sectie animeert niets; het enige bewegende deel is de kleurovergang op
   een tabelrij. Die staat hier direct in zijn eindtoestand. Smooth scrolling
   binnen de tabelscroller wordt expliciet uitgezet. */
@media (prefers-reduced-motion: reduce) {
  .article tbody th,
  .article tbody td { transition: none !important; }
  .tablewrap,
  .article .table-wrap,
  .article .tbl-wrap,
  .article .tblwrap,
  .article [data-tablewrap],
  .article figure:has(> table) { scroll-behavior: auto !important; }
}