/* ═══════════════════════════════════════════════════════════════
   VIDIMUS.BE — sitelaag bovenop de huisstijl van de app
   Laadt ná app-huis.css + app-huis-pages.css. Alleen wat de app
   niet heeft: held, tickerband, hash-regen, sectieritme, en de
   opstelling van de app-componenten (glas, tegels, tabel, lade)
   als marketingpagina. Kleuren, letters, radii, schaduwen en
   beweging komen uit de app; hier staat geen eigen palet.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --site-ease: cubic-bezier(.16, 1, .3, 1);
  --sec: clamp(72px, 9vw, 150px);
}

/* de knipoog van de app (rood vierkantje) is hier blauw: één accent op de site */
.huisdot { background: var(--act); }

/* ── raster & secties ────────────────────────────────────────── */
.wrap { position: relative; z-index: 1; max-width: 110rem; margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec); }
.sec + .sec { padding-top: calc(var(--sec) * .45); }
.sec-lbl.kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: start; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sec-lbl.kop h2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: clamp(28px, 1.2rem + 1.8vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
.sec-lbl.kop h2 .thin { color: var(--ink-3); }
.sec-lbl.kop h2 .dot { color: var(--act); }
.sec-lbl.kop .lbl { padding-top: 14px; white-space: nowrap; }
.sec-lbl.kop .side { grid-column: 1; max-width: 56ch; color: var(--ink-3); font-size: 16px; line-height: 1.65; }
.sec-lbl.kop .side b { color: var(--ink-2); font-weight: 600; }
.dot { color: var(--act); }
.sub { color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 58ch; }
.sub b { color: var(--ink); font-weight: 600; }

/* pictogram naast een kop: lijntekening die zichzelf tekent zodra de sectie in beeld komt (700ms, uit de app) */
.pict .ln { stroke-dasharray: 180; stroke-dashoffset: 180; }
.js .rv:not(.is-in) .pict .seal, .js .rv:not(.is-in) .pict .seal-check { animation-play-state: paused; }
.rv.is-in .pict .ln { animation: siteDraw 700ms var(--site-ease) forwards; }
.rv.is-in .pict .ln:nth-child(2) { animation-delay: 90ms; }
.rv.is-in .pict .ln:nth-child(3) { animation-delay: 180ms; }
.rv.is-in .pict .ln:nth-child(4) { animation-delay: 270ms; }
@keyframes siteDraw { to { stroke-dashoffset: 0; } }
.no-js .pict .ln, .rv.is-in .pict .ln { stroke-dashoffset: 0; }

/* onthulling: alleen opacity/transform, 700ms uit de app */
.rv { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 700ms var(--site-ease); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } .rv.is-in .pict .ln { animation: none; stroke-dashoffset: 0; } }

/* ── kopbalk: de app, met een SITE-label en genummerde ankers ─── */
.topnav a b { font: 500 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink-3); margin-right: 6px; }
.topnav a:hover b, .topnav a[aria-current] b { color: var(--act); }
header.site .top-start { white-space: nowrap; }

/* ── voet: de app-voet, met links ────────────────────────────── */
.app-voet { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 28px; text-transform: uppercase; }
.app-voet a:hover { color: var(--ink); }
.app-voet .sp { flex: 1; }

/* ── tickerband: het blok als strip, mono rijen, groene punt ─── */
.anchorband { display: flex; align-items: center; gap: 14px; padding: 7px 14px; border-radius: 999px; background: var(--metal); box-shadow: var(--metal-shadow); color: #fff; overflow: hidden; margin-top: 18px; position: relative; }
.anchorband::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14) 48%, rgba(255, 255, 255, 0) 66%); background-size: 260% 100%; animation: sheen2 1400ms var(--out) 400ms forwards; background-position: 160% 0; }
.ab-lbl { display: inline-flex; align-items: center; gap: 9px; font: 500 10px/1 var(--mono); letter-spacing: .18em; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.ab-lbl i { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); box-shadow: none; animation: blink 1.6s ease-in-out infinite; }
.anchorband.is-demo .ab-lbl i { background: rgba(255, 255, 255, .35); box-shadow: none; animation: none; }
.ab-view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ab-track { display: flex; gap: 28px; width: max-content; animation: abScroll var(--ab-dur, 40s) linear infinite; }
.anchorband:hover .ab-track { animation-play-state: paused; }
@keyframes abScroll { to { transform: translateX(-50%); } }
.ab-row { display: inline-flex; align-items: baseline; gap: 8px; font: 400 11px/1 var(--mono); letter-spacing: .04em; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.ab-row b { font-weight: 500; letter-spacing: .14em; color: #fff; }
.ab-row i { font-style: normal; color: rgba(255, 255, 255, .3); }
.ab-row time { font-variant-numeric: tabular-nums; }
.ab-row .vd-hash { font-size: 11px; line-height: 1; color: rgba(255, 255, 255, .92); letter-spacing: .06em; }
.ab-row .vd-hash.copied { color: var(--ok); }
.ab-note { font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .ab-track { animation: none; } .anchorband::before { animation: none; } .ab-lbl i { animation: none; } }

/* ── held: licht, hash-regen in inkt op 8 %, kop in zinstijl ─── */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 9vw, 136px) clamp(64px, 9vw, 140px); }
#hashrain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero .wrap { display: grid; gap: clamp(26px, 3.6vw, 44px); }
.hero .anchorband { margin-top: 0; margin-bottom: calc(-1 * clamp(8px, 1.4vw, 16px)); }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; }
.hero-kicker i { width: 4px; height: 4px; border-radius: 50%; background: var(--ok);  flex: none; }
.hero-title { font-size: clamp(46px, 1rem + 8.4vw, 124px); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; max-width: 12ch; text-wrap: balance; }
.hero-title .strike { position: relative; color: var(--ink-3); display: inline-block; }
.hero-title .strike::after { content: ""; position: absolute; left: -.02em; right: -.02em; top: 50%; height: .055em; min-height: 3px; border-radius: 3px; background: var(--act); transform: scaleX(0); transform-origin: left; }
.js .hero-title .strike::after { animation: siteStrike 700ms var(--site-ease) 500ms forwards; }
.no-js .hero-title .strike::after { transform: none; }
@keyframes siteStrike { to { transform: scaleX(1); } }
.hero-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); grid-template-rows: auto auto; gap: 22px clamp(2rem, 5vw, 5rem); align-items: start; }
.hero-under .sub { font-size: clamp(15px, .9rem + .3vw, 18px); max-width: 52ch; grid-column: 1; grid-row: 1; }
.hero-under .hero-actions { grid-column: 1; grid-row: 2; }
/* 22/09: de vier vragen als eigen blok naast de intro, op dezelfde bovenlijn, met het blauw als enig accent */
.hero-vraag { grid-column: 2; grid-row: 1 / 3; align-self: start; padding: 4px 0 4px 22px; border-left: 2px solid var(--blue, #1E4FD8); display: grid; gap: 12px; }
.hero-vraag .vragen { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: clamp(17px, 1rem + .5vw, 22px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.hero-vraag .vragen span { white-space: nowrap; } .hero-vraag .vragen span:not(:last-child)::after { content: "·"; color: var(--blue, #1E4FD8); margin: 0 .45em; }
.hero-vraag .antwoord { margin: 0; font-size: clamp(15px, .9rem + .3vw, 17px); color: var(--ink-2); line-height: 1.55; max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .xbtn { height: 48px; padding-inline: 22px; }

/* ── knoppen: lichte aanvulling op de app-pil ────────────────── */
.xbtn svg { width: 14px; height: 14px; }
a.go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--act); text-decoration: none; }
a.go svg { width: 14px; height: 14px; transition: transform 200ms var(--out); }
a.go:hover svg { transform: translateX(3px); }

/* ── 01 · de demo: kaart + lade, twee glazen ─────────────────── */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.demo-grid > .glass { display: grid; align-content: start; }
.kaart, .lade, .glass { border-radius: 22px; padding: 22px 24px 20px; }
.kaart .kop, .lade .kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kaart h3, .lade h3 { font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin-top: 8px; }
.kaart .doc-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.kaart .kv { margin-top: 16px; }
.kaart .kv dd[contenteditable] { outline: none; cursor: text; border-radius: 6px; transition: background 140ms, color 200ms; }
.kaart .kv dd[contenteditable]:hover { background: rgba(30, 79, 216, .05); }
.kaart .kv dd[contenteditable]:focus { background: #fff; box-shadow: 0 0 0 2px rgba(30, 79, 216, .25); }
.kaart .kv dd.changed { color: var(--act); }
.kaart .doc-foot { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.kaart .doc-foot svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--act); }
.kaart.shake { animation: siteShake 420ms var(--site-ease); }
@keyframes siteShake { 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
.lade .kv { margin-top: 12px; }
.lade .kv dd.wacht { color: var(--ink-3); }
.lade .verdict { display: grid; gap: 4px; margin-top: 16px; }
.lade .verdict .kt-verdict { font-size: 18px; }
.lade .vsub { font: 400 12px/1.5 var(--mono); color: var(--ink-3); }
.lade .lbl.zes { display: block; margin-top: 20px; }
.lade .checkrows { margin-top: 8px; }
.lade .checkrow { font-size: 14px; }
.lade .checkrow > span:first-child b { font-weight: 500; }
.lade .xbtn { margin-top: 16px; }
/* hash die vastklikt: teken voor teken van grijs naar inkt (hash-plate van de app) */
.vd-hash.lock i { display: inline-block; font-style: normal; color: rgba(11, 15, 23, .22); transform: translateY(2px); transition: color 260ms var(--out), transform 260ms var(--out); }
.vd-hash.lock i.on { color: inherit; transform: none; }
.states { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.state { border-radius: 20px; padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.state .kt-verdict { display: inline-flex; align-items: center; gap: 8px; }
.state .kt-verdict::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;  }
.state .kt-verdict.bad::before { box-shadow: 0 0 0 3px rgba(179, 35, 64, .14); }
.state p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.states-foot { grid-column: 1 / -1; font-size: 14px; color: var(--ink-3); max-width: 70ch; }
.states-foot b { color: var(--ink); font-weight: 600; }

/* ── 02 · de aflevering: drie tegels + de video ──────────────── */
.moment-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
.taps { display: grid; gap: 16px; }
.taps .tile { align-content: start; cursor: default; min-height: 0; gap: 10px; padding: 22px 24px 20px; }
.taps .tile:hover { transform: none; box-shadow: var(--glass-shadow); }
.taps .tile b { font-size: 34px; color: var(--ink-3); }
.taps .tile h3 { font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; display: grid; gap: 6px; }
.taps .tile h3 small { font: 500 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.taps .tile p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.taps .tile p b, .taps .tile .law b { font-size: inherit; letter-spacing: inherit; line-height: inherit; color: var(--ink); font-weight: 600; }
.taps .law { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 13px; color: var(--ink-3); padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--glass-edge); }
.taps .law b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.moment-video { margin: 0; border-radius: 22px; padding: 14px; display: grid; gap: 12px; position: sticky; top: 76px; }
.video-frame { position: relative; border-radius: 14px; overflow: hidden; background: var(--ink); border: 1px solid var(--line); }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.playcover { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(180deg, rgba(11, 15, 23, 0), rgba(11, 15, 23, .5)); cursor: pointer; display: flex; align-items: flex-end; padding: 14px; }
.playchip { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: linear-gradient(180deg, #1c2333 0%, #0b0f17 100%); color: #fff; font: 600 13px/1 var(--ui); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 24px -12px rgba(11, 15, 23, .6); transition: transform 160ms var(--out); }
.playcover:hover .playchip { transform: translateY(-1px); }
.playchip svg { width: 12px; height: 12px; }
.moment-video figcaption { display: grid; gap: 4px; padding: 0 6px 4px; font-size: 13px; color: var(--ink-2); }

/* ── protocol: drie stroomkaarten ────────────────────────────── */
.how-grid { grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); }
.how-grid .stroom { cursor: default; min-height: 0; }
.how-grid .stroom:hover { transform: none; box-shadow: var(--glass-shadow); }
.how-grid .stroom p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ── 03 · de app: vier schermen in glas ──────────────────────── */
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.shot { margin: 0; border-radius: 22px; padding: 18px 18px 16px; display: grid; gap: 14px; perspective: 1400px; }
/* iPhone-frame (Oskar 05/09): donkere titanium bezel, dynamic island, zijknoppen, lichte 3D-kanteling; de schermen blijven scherp */
.phone { position: relative; border-radius: 40px; padding: 10px; background: linear-gradient(160deg, #3a3f48 0%, #1c2028 45%, #0b0f17 100%); box-shadow: 0 30px 60px -30px rgba(11, 15, 23, .6), 0 2px 0 rgba(255, 255, 255, .12) inset, 0 -1px 0 rgba(0, 0, 0, .6) inset; transform: rotateY(-6deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 700ms var(--site-ease); }
.shot:nth-child(even) .phone { transform: rotateY(6deg) rotateX(2deg); }
.shot:hover .phone { transform: rotateY(0) rotateX(0); }
.phone-screen { position: relative; border-radius: 31px; overflow: hidden; background: #0B0F17; padding: 0; }
.phone-island { position: absolute; top: 10px; left: 50%; width: 32%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #0B0F17; z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04); }
.phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #4a505a, #23272f); }
.phone-btn.l1 { left: -3px; top: 17%; height: 5%; } .phone-btn.l2 { left: -3px; top: 25%; height: 9%; } .phone-btn.l3 { left: -3px; top: 36%; height: 9%; } .phone-btn.r1 { right: -3px; top: 27%; height: 14%; }
.shot-frame { border-radius: 31px; overflow: hidden; background: #fff; aspect-ratio: 390 / 844; }
.shot-frame img { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { .phone, .shot:nth-child(even) .phone { transform: none; } }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-frame.missing { display: grid; place-items: center; color: var(--ink-3); font: 500 11px var(--mono); letter-spacing: .12em; }
.shot-frame.missing img { display: none; }
.shot figcaption { display: grid; gap: 4px; padding: 0 6px; font-size: 14px; font-weight: 500; }

/* ── 04 · rekensom: glazen formulier + twee tegels ───────────── */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-in .fld input { height: 46px; font-size: 16px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.calc-in .fld input:focus { border-color: var(--act); box-shadow: 0 0 0 3px rgba(30, 79, 216, .14); }
.calc-out { display: grid; gap: 16px; }
.calc-out .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-out .tile { cursor: default; min-height: 0; }
.calc-out .tile:hover { transform: none; box-shadow: var(--glass-shadow); }
.calc-out .tile output { display: block; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-out .tile output .u { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink-3); margin-left: 6px; vertical-align: middle; }
.calc-priv { grid-column: 1 / -1; }

/* ── specificatie: de tabel van de app ───────────────────────── */
.rg-table.spec tbody tr { cursor: default; }
.rg-table.spec td { padding: 12px 22px; vertical-align: top; }
.rg-table.spec td.k { font: 500 10px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.rg-table.spec td.v { font: 500 13px/1.6 var(--mono); color: var(--ink); white-space: nowrap; }
.rg-table.spec td p { font-size: 14px; color: var(--ink-2); max-width: 64ch; }
.rg-table.spec code { font: 500 12px var(--mono); background: rgba(11, 15, 23, .05); padding: 1px 6px; border-radius: 6px; }
.honest { margin-top: 16px; border-radius: 16px; padding: 16px 20px; max-width: 74ch; }
.honest b { color: var(--ink); font-weight: 600; }

/* ── 05 · prijs: één glas ────────────────────────────────────── */
.price { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; border-radius: 24px; padding: 0; overflow: hidden; }
.price > div { padding: clamp(22px, 3vw, 34px); display: grid; gap: 12px; align-content: start; }
.price .plan-after { border-left: 1px solid rgba(11, 15, 23, .07); background: rgba(255, 255, 255, .25); }
.price h3 { font-size: 24px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.price .amt { font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .amt small { display: block; font: 500 11px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.price ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.price li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.price li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--ok);  margin-top: 7px; }
.price .xbtn { justify-self: start; height: 48px; padding-inline: 22px; margin-top: 6px; }
.price .plan-after p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.price .plan-after p b { color: var(--ink); font-weight: 600; }

/* ── oprichter: glas met foto ────────────────────────────────── */
.foundr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px clamp(20px, 3vw, 40px); align-items: center; border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.foundr img { width: clamp(96px, 10vw, 132px); height: clamp(96px, 10vw, 132px); border-radius: 22px; object-fit: cover; border: 1px solid var(--line); box-shadow: var(--glass-shadow); }
.foundr figure { margin: 0; display: grid; gap: 12px; }
.foundr blockquote { margin: 0; font-size: clamp(18px, 1rem + .9vw, 24px); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
.foundr blockquote span { color: var(--ink-3); }
.foundr figcaption { font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.foundr figcaption b { color: var(--ink); font-weight: 500; }
.foundr-contact { display: grid; gap: 6px; justify-items: start; }
.foundr-contact a { font-size: 14px; font-weight: 500; color: var(--act); text-decoration: none; }
.foundr-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── slot ────────────────────────────────────────────────────── */
.final .wrap { display: grid; gap: 22px; justify-items: start; }
.final h2 { font-size: clamp(32px, 1.4rem + 3.4vw, 64px); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.final h2 .thin { color: var(--ink-3); }
.final p { max-width: 54ch; }

/* ── responsief ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundr { grid-template-columns: auto minmax(0, 1fr); }
  .foundr-contact { grid-column: 1 / -1; grid-auto-flow: column; gap: 6px 20px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .topnav a { padding: 6px 7px; font-size: 13px; }
  .topnav a b { display: none; }
  header.site .top-login { display: none; }
  .demo-grid, .moment-grid, .calc-grid, .price, .states { grid-template-columns: 1fr; }
  .moment-video { position: static; }
  .price .plan-after { border-left: 0; border-top: 1px solid rgba(11, 15, 23, .07); }
  .hero-under { grid-template-columns: 1fr; align-items: start; }
  .hero-under .sub, .hero-under .hero-actions, .hero-vraag { grid-column: 1; grid-row: auto; }
  .hero-vraag { order: 1; } .hero-under .hero-actions { order: 2; }
  .sec-lbl.kop .lbl { padding-top: 0; }
}
@media (max-width: 720px) {
  .hero { padding-block: 36px 56px; }
  .hero-title { font-size: clamp(42px, 13.5vw, 64px); }
  .anchorband { gap: 10px; padding: 6px 12px; }
  .ab-note { display: none; }
  .kaart, .lade, .glass { padding: 18px 18px 16px; border-radius: 18px; }
  .taps .tile { padding: 18px 18px 16px; }
  .calc-in { grid-template-columns: 1fr; }
  .calc-out .tiles { grid-template-columns: 1fr; }
  .foundr { grid-template-columns: 1fr; justify-items: start; }
  .foundr-contact { grid-auto-flow: row; }
  .hero-actions .xbtn { width: 100%; }
  /* specificatietabel wordt een lijst, zoals de verbruikstabel in de app op telefoon */
  .rg-table.spec { display: block; white-space: normal; border-radius: 16px; }
  .rg-table.spec thead { display: none; }
  .rg-table.spec tbody { display: grid; }
  .rg-table.spec tr { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .rg-table.spec tr:last-child { border-bottom: 0; }
  .rg-table.spec td { display: block; padding: 0; border: 0; }
  .rg-table.spec td.v { white-space: normal; }
}
@media (max-width: 480px) {
  .ab-lbl { font-size: 0; gap: 0; }
  .ab-lbl i { font-size: 10px; }
  .shots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shot { padding: 8px 8px 10px; border-radius: 16px; }
  .shot figcaption { font-size: 12.5px; }
}

/* vier video's (papierstijl) in glazen kaarten */
.vgrid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vcard { display: grid; overflow: hidden; }
.vcard .vslot { position: relative; aspect-ratio: 16 / 9; background: #0B0F17; }
.vcard video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard .playcover { padding: 14px; align-items: flex-end; }
.vcard figcaption { padding: 14px 16px 16px; display: grid; gap: 4px; font-weight: 500; font-size: 14px; }
@media (max-width: 1100px) { .vgrid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vgrid4 { grid-template-columns: 1fr; } }
/* begin uw stroom: rechtstreeks de wizard in */
.startkaart { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; padding: 32px; align-items: center; }
.startkaart .start-tekst { display: grid; gap: 10px; }
.startform { display: grid; gap: 12px; }
.startform .fld input { height: 48px; font-size: 16px; }
.startform .xbtn { justify-self: start; margin-top: 4px; }
@media (max-width: 860px) { .startkaart { grid-template-columns: 1fr; padding: 22px; } }

/* hero: eerst "Woord tegen woord.", dan de streep, dan schuift "Wiskunde" erin (Oskar 05/09: "lijkt nu één zin") */
.hero-title .wisk { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; vertical-align: bottom; opacity: 0; }
.js .hero-title .wisk { animation: siteWisk 1300ms var(--site-ease) 2600ms forwards; }
.js .hero-title .strike::after { animation-delay: 1500ms; animation-duration: 900ms; }
.no-js .hero-title .wisk { max-width: none; opacity: 1; }
@keyframes siteWisk { from { max-width: 0; opacity: 0; } 40% { opacity: 0; } to { max-width: 8em; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .hero-title .wisk { animation: none; max-width: none; opacity: 1; } }
/* sensordata */
.sens-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sens-kaart { padding: 22px 24px; display: grid; gap: 12px; align-content: start; }
.sens-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sens-lijst li { padding-left: 18px; position: relative; }
.sens-lijst li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.sens-lijst.ok li::before { background: var(--ok); }
.sens-lijst b { color: var(--ink); font-weight: 600; }
.sens-code { display: grid; gap: 6px; margin-top: 4px; }
.sens-code pre { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--metal, linear-gradient(160deg, #3b4049 0%, #242830 38%, #171a20 68%, #2b2f37 100%)); color: rgba(255, 255, 255, .88); font: 400 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 860px) { .sens-grid { grid-template-columns: 1fr; } }
/* spatie tussen de doorgestreepte "Woord" en "Wiskunde" (inline-block slikte de spatie in) */
.hero-title .wisk { margin-left: .18em; }

/* de zes controles: ingeklapt, zodat document- en bewijskaart gelijk staan; openklikken vanaf IDENTIEK (Oskar 05/09) */
.zes-klap { border-top: 1px solid var(--line); margin-top: 10px; }
.zes-klap summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 0; }
.zes-klap summary::-webkit-details-marker { display: none; }
.zes-klap .zes-sum { font: 500 12px/1 var(--mono); color: var(--ok); letter-spacing: .06em; }
.zes-klap .zes-sum.bad { color: var(--bad); }
.zes-klap summary i { font-style: normal; font: 500 16px/1 var(--mono); color: var(--ink-3); transition: transform 200ms var(--site-ease); }
.zes-klap[open] summary i { transform: rotate(45deg); }
.zes-klap .checkrows { margin-bottom: 12px; }

.demo-grid > .glass .xbtn { justify-self: start; align-self: end; }

/* uitleg per controle: waarom identiek, en waarom straks niet (Oskar 05/09) */
.checkrow.klik { cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.checkrow.klik > span:first-child b::before { content: "›"; display: inline-block; margin-right: 8px; color: var(--ink-3); transition: transform 200ms var(--site-ease); }
.checkrow.klik.open > span:first-child b::before { transform: rotate(90deg); }
.checkrow .chk-uitleg { grid-column: 1 / -1; padding: 2px 0 6px 18px; }
.checkrow .chk-uitleg p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.checkrow .chk-uitleg p[data-bad] { color: var(--bad); }
.checkrow .chk-uitleg p b { color: var(--ink); }
/* sensorvideo boven de twee kaarten */
.sens-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 20px; }
.sens-kop .sec-lbl { margin: 0; }
.sens-video { margin: 0; grid-template-columns: 1fr; gap: 0; }
@media (max-width: 860px) { .sens-kop { grid-template-columns: 1fr; } }
.sens-video .vslot { aspect-ratio: 16 / 9; }
.sens-video figcaption { padding: 18px 22px; font-size: 14px; line-height: 1.55; color: var(--ink-2); display: grid; gap: 8px; }
@media (max-width: 860px) { .sens-video { grid-template-columns: 1fr; } }

/* waarom: gewone databank vs verankeringslaag, in glas met een gekleurde bovenrand */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-col { padding: 24px 26px 20px; display: grid; gap: 14px; align-content: start; border-top: 3px solid var(--ink-3); }
.vs-col.bad-side { border-top-color: var(--bad); } .vs-col.good-side { border-top-color: var(--ok); }
.vs-col h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.vs-col.bad-side h3 { color: var(--bad); } .vs-col.good-side h3 { color: var(--ok); }
.vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.vs-col li { padding-left: 20px; position: relative; }
.vs-col li::before { position: absolute; left: 0; top: 0; font: 500 13px/1.6 var(--mono); }
.vs-col.bad-side li::before { content: "×"; color: var(--bad); } .vs-col.good-side li::before { content: "→"; color: var(--ok); }
.vs-col .cost { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font: 500 11px/1 var(--mono); letter-spacing: .14em; }
.vs-col.bad-side .cost { color: var(--bad); } .vs-col.good-side .cost { color: var(--ok); }
@media (max-width: 860px) { .vs-grid { grid-template-columns: 1fr; } }
/* oprichter: het hele gezicht, niet alleen de kin */
.foundr img { object-fit: cover; object-position: 50% 22%; }

/* oprichter: de foto is 4:5 — toon ze volledig, niets afgesneden */
.foundr img { width: 132px; height: 165px; object-fit: cover; object-position: 50% 50%; border-radius: 22px; }

/* het probleem: de oorspronkelijke zin, woord per woord oplichtend bij het scrollen (app-typografie) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.statement { margin: 14px 0 0; font-size: clamp(30px, 4.6vw, 62px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; color: var(--ink); max-width: 20ch; text-wrap: balance; }
.statement .w { display: inline-block; opacity: .14; transition: opacity 900ms var(--site-ease); }
.statement .w.on { opacity: 1; }
.statement .w.hot { color: var(--act); }
.statement-foot { margin: 26px 0 40px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.statement-foot b { color: var(--act); margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .statement .w { opacity: 1; } }

/* video's op hun plek, groot genoeg om te kijken zonder volledig scherm */
.vcard.groot { max-width: 64rem; margin-inline: auto; }
/* 11/09 (Oskar): het waarom kleiner en naast de kop; scenario-video van de aflevering weg */
.waarom { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }   /* video = zelfde formaat als de twee ketenvideo's */
.waarom .vslot { aspect-ratio: 16 / 9; } .waarom .playcover { padding: 22px; } .waarom .playchip { height: 46px; padding: 0 20px; font-size: 14px; }
.waarom .sec-lbl.kop { margin-bottom: 0; }
.waarom .vcard { border-radius: 20px; margin: 0; }
.moment-grid.enkel { grid-template-columns: 1fr; }
.moment-grid.enkel .taps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .waarom { grid-template-columns: 1fr; } .moment-grid.enkel .taps { grid-template-columns: 1fr; } }
.vcard.groot .vslot, .video-duo .vslot { aspect-ratio: 16 / 9; }
.vcard.groot .playcover, .video-duo .playcover { padding: 22px; }
.vcard.groot .playchip { height: 46px; padding: 0 20px; font-size: 14px; }
.video-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .video-duo { grid-template-columns: 1fr; } }

/* de hele uitleg: achter één knop, in leesbare grootte (Oskar 06/09: essentieel, maar te groot voor de pagina) */
.meer-uitleg { margin: -18px 0 44px; }
.meer-uitleg summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.meer-uitleg summary::-webkit-details-marker { display: none; }
.meer-uitleg summary .xbtn { pointer-events: none; }
.meer-uitleg[open] summary .xbtn span::after { content: " ↑"; }
.meer-tekst { margin-top: 22px; max-width: 72ch; display: grid; gap: 14px; font-size: 16px; line-height: 1.65; color: var(--ink-2); animation: siteFade 500ms var(--site-ease) both; }
.meer-tekst b { color: var(--ink); font-weight: 600; }
@keyframes siteFade { from { opacity: 0; transform: translateY(6px); } }

/* de punt/het vraagteken sluit aan op het laatste woord, geen spatie ervoor */
.sec-lbl h2 .dot, .hero-title .dot, h2 .dot { margin-left: 0; }

/* de kop is flex (pictogram + tekst); de punt mag geen eigen flex-item met gap zijn */
.sec-lbl h2 { gap: 0; }
.sec-lbl h2 .pict { margin-right: 14px; }
.sec-lbl h2 .dot { margin-left: 0; }

/* sensorkop naast de video: kop en label onder elkaar, vraagteken blijft aan het woord */
.sens-kop .sec-lbl { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sens-kop .sec-lbl h2 { flex-wrap: nowrap; white-space: nowrap; }
.sens-kop .sec-lbl .lbl { order: 3; }
.sens-kop .sec-lbl .side { max-width: none; }
@media (max-width: 860px) { .sens-kop .sec-lbl h2 { white-space: normal; } }

/* één record, twee levens (Oskar 06/09, optie 2) */
.tweelevens { display: grid; gap: 16px; }
.tl-stappen { display: flex; gap: 8px; flex-wrap: wrap; }
.tl-stap { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink-2); font: 500 13px/1 var(--ui); cursor: pointer; transition: background 160ms, color 160ms, transform 160ms var(--site-ease); }
.tl-stap small { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
.tl-stap:active { transform: scale(.97); }
.tl-stap.cur { background: var(--ink); color: #fff; border-color: var(--ink); } .tl-stap.cur small { color: rgba(255, 255, 255, .6); }
.tl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tl-kaart { padding: 20px 22px 18px; display: grid; gap: 10px; min-height: 300px; }
.tl-kop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.tl-versie { font: 500 11px/1.6 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.tl-versie.ok { color: var(--ok); } .tl-versie.bad { color: var(--bad); }
.tl-kaart .kv dd { transition: color 400ms var(--site-ease), background 400ms; border-radius: 6px; }
.tl-kaart .kv dd.wijzig { color: var(--bad); background: rgba(179, 35, 64, .07); }
.tl-kaart .kv dd.weg { color: var(--ink-3); text-decoration: line-through; }
.tl-extra { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(46, 107, 85, .07); border: 1px solid rgba(46, 107, 85, .25); font: 500 12px/1.6 var(--mono); color: var(--ink-2); }
.tl-extra b { color: var(--ok); font-weight: 600; }
.tl-noot { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-3); min-height: 2.6em; transition: color 300ms; }
.tl-noot.bad { color: var(--bad); } .tl-noot.ok { color: var(--ok); }
.tl-uitkomst { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tl-u { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 0 6px; opacity: .35; transition: opacity 400ms; }
.tl-u.aan { opacity: 1; } .tl-u.bad { color: var(--bad); } .tl-u.ok { color: var(--ok); }
@media (max-width: 860px) { .tl-grid, .tl-uitkomst { grid-template-columns: 1fr; } .tl-kaart { min-height: 0; } }

/* koppen zijn flex (pictogram + tekst): de punt niet als apart flex-item met gap */
.sec-lbl.kop h2, .sec-lbl h2 { gap: 0 !important; }
.sec-lbl.kop h2 .pict, .sec-lbl h2 .pict { margin-right: 14px; }

/* ── mobiel: sectiekop in één kolom (09-09) — label boven de titel, zijtekst op volle breedte;
   voorheen kneep de tweekolomsgrid de titel en de zijtekst tot één woord per regel naast het label ── */
@media (max-width: 720px) {
  .sec-lbl.kop { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sec-lbl.kop .lbl { order: -1; white-space: normal; padding-top: 0; }
  .sec-lbl.kop .side { grid-column: auto; max-width: none; font-size: 16px; }
  .sec-lbl.kop h2 { font-size: clamp(30px, 9vw, 38px); }
  .lbl { font-size: 11px; letter-spacing: .12em; }
  .m, code, pre, .mono, .kv dd, .rawrow code, .ab-track { font-size: 12.5px; }
  .anchorband .ab-track { font-size: 12px; }
}

/* ══ 03 · DE APP · 3D-scrollpresentatie (14/09) ══ */
.app3d .wrap { position: relative; z-index: 2; }
.stage-wrap { height: 620svh; position: relative; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter); perspective: 1600px; }
.stage .glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(30, 79, 216, .22), rgba(46, 107, 85, .10) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.stage .ring3d { position: absolute; left: 50%; top: 50%; width: 92vmin; height: 92vmin; transform: translate(-50%, -50%) rotate(var(--ring, 0deg)); opacity: .55; pointer-events: none; }
.stage .ring3d text { font: 400 8.5px var(--mono); letter-spacing: .34em; fill: rgba(11, 15, 23, .28); }
/* de telefoon: fotorealistische behuizing uit Blender (Cycles, titanium, orthografisch van voren); het scherm is een echte
   screenshot op de exacte schermrechthoek; de draai blijft CSS, het glas krijgt een reflectie die meedraait */
.tel { position: relative; justify-self: center; width: min(340px, 78svh * 1019 / 2101, 82vw); aspect-ratio: 1019 / 2101; transform: rotateY(var(--ry, -16deg)) rotateX(var(--rx, 4deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d; transition: transform 90ms linear; filter: drop-shadow(0 60px 70px rgba(11, 15, 23, .35)) drop-shadow(0 14px 22px rgba(11, 15, 23, .25)); }
.tel-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translateZ(2px); }
.tel-frame img { width: 100%; height: 100%; display: block; }
.tel-screen { position: absolute; left: 5.120%; top: 2.480%; width: 89.858%; height: 95.087%; border-radius: 13.21% / 6.78%; overflow: hidden; background: #F2F3F6; z-index: 2; }
.tel .phone-island { z-index: 4; top: 2.2%; width: 30%; height: 2.9%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.tel .phone-island::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5568, #0b0f17 60%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.tel .scherm { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms var(--out), transform 420ms var(--out); transform: scale(1.03); }
.tel .scherm.is-on { opacity: 1; transform: none; }
.tel .scherm img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.tel-glans { position: absolute; left: 5.120%; top: 2.480%; width: 89.858%; height: 95.087%; border-radius: inherit; pointer-events: none; z-index: 5; transform: translateZ(3px); border-radius: 13.21% / 6.78%;
  background: linear-gradient(calc(112deg + var(--ryn, 0) * .8deg), rgba(255, 255, 255, 0) calc(28% + var(--ryn, 0) * 1.2%), rgba(255, 255, 255, .14) calc(41% + var(--ryn, 0) * 1.2%), rgba(255, 255, 255, .04) calc(49% + var(--ryn, 0) * 1.2%), rgba(255, 255, 255, 0) calc(60% + var(--ryn, 0) * 1.2%)); mix-blend-mode: screen; }
.stappen { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; }
.stappen li { grid-area: 1 / 1; opacity: 0; transform: translateY(18px); transition: opacity 420ms var(--out), transform 420ms var(--out); pointer-events: none; max-width: 30rem; }
.stappen li.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stappen b { display: block; font-size: clamp(26px, 1.1rem + 1.6vw, 38px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; margin: 10px 0 12px; }
.stappen p { color: var(--ink-3); font-size: 16px; line-height: 1.55; max-width: 44ch; }
.app-badge { position: absolute; right: var(--gutter); bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--metal); color: #fff; box-shadow: var(--metal-shadow); border: 1px solid rgba(0, 0, 0, .35); text-decoration: none; transition: transform 160ms var(--out); }
.app-badge:hover { transform: translateY(-1px); } .app-badge:active { transform: scale(.98); }
.app-badge svg { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.app-badge small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .16em; color: rgba(255, 255, 255, .6); margin-bottom: 3px; }
.app-badge b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
@media (max-width: 900px) { .app-badge { display: none; } }
.stage-strip { position: absolute; left: var(--gutter); bottom: calc(44px + env(safe-area-inset-bottom)); transform: none; justify-content: flex-start; max-width: 60%; display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0 var(--gutter); font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.stage-strip .acc { color: var(--ink); }
@media (max-width: 900px) { .stage-strip { display: none; } }
.punten { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.punten i { width: 6px; height: 6px; border-radius: 50%; background: rgba(11, 15, 23, .2); transition: transform 200ms var(--out), background 200ms; }
.punten i.is-on { background: var(--ink); transform: scale(1.5); }
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: end; padding-bottom: 56px; }
  .tel { width: min(62vw, 52svh * 1019 / 2101); margin: 0 auto; }
  .stappen { padding: 14px 0 0; text-align: center; justify-items: center; }
  .stappen li { max-width: 34rem; }
  .stappen b { font-size: 24px; margin: 6px 0 8px; } .stappen p { font-size: 14.5px; }
  .stage .ring3d { width: 120vw; height: 120vw; top: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-wrap { height: auto; } .stage { position: static; height: auto; display: grid; padding-block: 24px; }
  .tel { --ry: 0deg; --rx: 0deg; --ryn: 0; transition: none; } .stappen li { opacity: 1; transform: none; grid-area: auto; margin-bottom: 18px; } .punten, .ring3d { display: none; }
}

.stage-na { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 22px; }
.stage-na .law { margin: 0; }

.plan-after .tier3 { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(11, 15, 23, .07); color: var(--ink-3); font-size: 14px; }
.plan-after .tier3 b { color: var(--ink); }


/* 16/09: geborsteld staal — textuurlaag correct schalen en mengen op elk element dat var(--metal) gebruikt */
.app-badge, .sens-code pre, /* ── tickerband: het blok als strip, mono rijen, groene punt ─── */
.anchorband { background-size:auto,512px 256px,auto;background-blend-mode:screen,overlay,normal;border:1px solid rgba(0,0,0,.45);box-shadow:var(--metal-shadow); }

/* hero-toestel (23/09): het product zelf vult de rechterkant */
.hero .wrap { position: relative; }
.hero-toestel { display: none; }
@media (min-width: 1100px) {
  .hero-toestel { display: block; position: absolute; right: clamp(8px, 3vw, 56px); top: 50%; transform: translateY(-50%); width: 300px; margin: 0; pointer-events: none; }
  .ht-telefoon { width: 300px; aspect-ratio: 390 / 844; border-radius: 48px; padding: 9px; background: #0b0b0d; box-shadow: 0 50px 90px -40px rgba(11, 15, 23, .55), 0 18px 36px -18px rgba(11, 15, 23, .35); animation: htZweef 6s ease-in-out infinite; }
  .ht-telefoon picture { display: block; width: 100%; height: 100%; }
  .ht-telefoon img { width: 100%; height: 100%; object-fit: cover; border-radius: 40px; display: block; }
  .ht-kaart { position: absolute; left: -150px; bottom: 70px; width: 250px; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(11, 15, 23, .06); border-radius: 20px; padding: 14px 16px; box-shadow: 0 24px 50px -28px rgba(11, 15, 23, .45); animation: htZweef 6s ease-in-out -3s infinite; }
  .ht-lbl { font: 500 10px/1 var(--mono, monospace); letter-spacing: .14em; color: var(--ink-3, #8A90A0); }
  .ht-kaart ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
  .ht-kaart li { display: grid; grid-template-columns: 16px 64px 1fr; align-items: center; gap: 8px; font-size: 13px; }
  .ht-kaart li i { width: 16px; height: 16px; border-radius: 50%; background: #1E4FD8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
  .ht-kaart li b { font-weight: 600; }
  .ht-kaart li span { color: var(--ink-2, #4B5160); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hero-title { max-width: 9.5ch; }
  .hero-under { grid-template-columns: minmax(0, 1fr); max-width: calc(100% - 420px); }
}
@keyframes htZweef { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .ht-telefoon, .ht-kaart { animation: none; } }

/* ── twee routes onder de held (25/09, partner-led): bedrijf of partner ── */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.routes a { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border-radius: 22px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); text-decoration: none; color: var(--ink); transition: box-shadow 160ms, transform 160ms var(--out); }
.routes a:hover { box-shadow: var(--glass-shadow-hi); transform: translateY(-2px); }
.routes a b { font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.routes a span { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.routes a em { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.routes a.partner { border-top: 3px solid var(--act, #1E4FD8); }
@media (max-width: 720px) { .routes { grid-template-columns: 1fr; } }

/* ── navigatie met zeven items (25/09): nooit afbreken; op smalle schermen vallen Scenario's en Help weg (staan in de voet) ── */
.topnav a { white-space: nowrap; }
@media (max-width: 1000px) { .topnav a[href="scenarios.html"], .topnav a[href="help.html"] { display: none; } }

/* ── mobiel menu (26/09): knop in de kop, paneel eronder; alleen onder 720 px ── */
.menu-knop { display: none; width: 44px; height: 44px; border: 1px solid var(--glass-edge); border-radius: 12px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); cursor: pointer; padding: 0; position: relative; flex: none; }
.menu-knop span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 180ms, top 180ms; }
.menu-knop span:first-child { top: 17px; } .menu-knop span:last-child { top: 25px; }
.menu-knop[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-knop[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mob-menu { display: none; }
@media (max-width: 720px) {
  .menu-knop { display: block; }
  .mob-menu { display: grid; gap: 2px; position: fixed; left: 12px; right: 12px; top: 70px; z-index: 60; padding: 10px; border-radius: 20px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-edge); box-shadow: 0 24px 60px -30px rgba(11, 15, 23, .5); }
  .mob-menu[hidden] { display: none; }
  .mob-menu a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 16px; }
  .mob-menu a b { display: none; }
  .mob-menu a[aria-current] { background: rgba(11, 15, 23, .06); }
  .mob-menu .mob-login { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink-3); }
}

/* 29/09: kleinste telefoons (320–380 px) — niets buiten het scherm */
@media (max-width: 380px) {
  header.site { gap: .55rem; padding-inline: 16px; }
  header.site .top-start { font-size: 13px; padding: 8px 11px; }
  .page-hero .crumb { flex-wrap: wrap; row-gap: 6px; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head .idx { grid-column: 1; grid-row: auto; padding-top: 0; }
  .sec-head h2, .disp { overflow-wrap: break-word; hyphens: auto; }
}
/* 29/09: code op een telefoon afbreken in plaats van opzij te laten vegen */
@media (max-width: 600px) { .codecard, .ai-pre { white-space: pre-wrap; overflow-wrap: anywhere; } }