/* Layout: één lange verkooppagina in de BOLZ Base-huisstijl. Ritme licht, nacht, grijs; geel alleen voor de punt, live, de basis en de hoofdknop, en één keer als afsluiter. Het blok is het verhaal: Base onderaan, modules erop. */
:root {
  --licht: #fbfbfa; --wit: #ffffff; --grijs: #f3f4f6; --lijn: #e5e7eb; --zacht: #6b7280; --dim: #9ca3af;
  --inkt: #0a0a0a; --nacht: #08090a; --nacht-2: #0e0f11; --nacht-lijn: #1f2125; --nacht-zacht: #8a8f98; --nacht-tekst: #f3f4f6;
  --geel: #f5c43b; --geel-licht: #ffd96b; --goud: #b88a17; --geel-tekst: #8a6a14;
  --display: "Saira", "Helvetica Neue", Arial, sans-serif; --body: "Saira", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, Menlo, monospace; --data: "Oxanium", "Martian Mono", ui-monospace, monospace;
  --ruimte: clamp(72px, 8vw, 116px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section[id], main[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--licht); color: var(--inkt); font-family: var(--body); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.g { padding-inline: clamp(16px, 4vw, 48px); }
.w { max-width: 1200px; margin-inline: auto; }
p { margin: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 125%; text-wrap: balance; }
h3 { font-size: 18px; letter-spacing: -.005em; line-height: 1.25; font-weight: 700; font-stretch: 112%; }
/* Koppen als het woordmerk */
.mk { text-transform: uppercase; font-weight: 800; font-stretch: 125%; letter-spacing: -.01em; line-height: 1.02; }
.mk .g2 { color: var(--zacht); -webkit-text-stroke-color: var(--zacht); }
.mk::after { content: ""; display: inline-block; width: .18em; height: .18em; margin-left: .06em; border-radius: .055em; background: var(--geel); position: relative; top: .02em; }
.mk.zonder::after { display: none; }
h1.mk { font-size: clamp(30px, 3.7vw, 52px); }
h2.mk { font-size: clamp(24px, 2.8vw, 40px); }
.label { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--zacht); display: inline-flex; align-items: center; gap: 8px; }
.label::before { content: ""; width: 8px; height: 8px; border-radius: 2.3px; background: var(--geel); }
.zacht { color: var(--zacht); }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; max-width: 50ch; }
.cijfer { font-family: var(--data); font-variant-numeric: tabular-nums; }

/* Nacht-secties */
.nacht { background: var(--nacht); color: var(--nacht-tekst); }
.nacht .mk .g2 { color: var(--nacht-zacht); -webkit-text-stroke-color: var(--nacht-zacht); }
.nacht .zacht, .nacht .label { color: var(--nacht-zacht); }
.grijs { background: var(--grijs); }

/* Knoppen: blokken met diepte rechtsonder, net als de kubus */
.knop { --d: 4px; display: inline-flex; align-items: center; gap: 9px; font: 600 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; border-radius: 10px; padding: 15px 20px; box-shadow: var(--d) var(--d) 0 var(--zij, var(--goud)); margin: 0 var(--d) var(--d) 0; transition: transform .12s ease, box-shadow .12s ease; white-space: nowrap; }
.knop:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--zij, var(--goud)); }
.knop:active { transform: translate(var(--d), var(--d)); box-shadow: 0 0 0 var(--zij, var(--goud)); }
.knop:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--geel); outline-offset: 3px; }
.knop.geel { background: linear-gradient(180deg, var(--geel-licht) 0, var(--geel) 40%); color: var(--inkt); --zij: var(--goud); }
.knop.inkt { background: #1a1c20; color: var(--nacht-tekst); --zij: #000; }
.knop.rand { background: var(--grijs); color: var(--inkt); --zij: var(--nacht-zacht); }
.nacht .knop.rand { background: #22252a; color: var(--nacht-tekst); --zij: #000; box-shadow: var(--d) var(--d) 0 #000, inset 0 0 0 1px #34373d; }
.knop.klein { font-size: 15px; padding: 11px 15px; --d: 3px; }
@media (prefers-reduced-motion: reduce) { .knop { transition: none; } }

/* Woordmerk */
.woord { display: inline-flex; line-height: 0; min-width: 0; flex: 0 1 auto; --base-kleur: #6b7280; --punt-kleur: var(--geel); color: var(--inkt); }
.woord svg { width: 6.5665em; max-width: 100%; height: auto; aspect-ratio: 6566.5 / 733; overflow: visible; }
.nacht .woord, .woord.op-nacht, footer .woord, .nav .woord { color: var(--nacht-tekst); --base-kleur: #8a8f98; }
.lockup { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-width: 0; }
.lockup > svg { flex: none; }

/* Pulse */
.pulse .gloed, .pulse .kern { transform-box: fill-box; transform-origin: center; }
.pulse .gloed { animation: gloed 2.6s ease-in-out infinite; }
.pulse .kern { animation: kern 2.6s ease-in-out infinite; }
@keyframes gloed { 0%, 100% { opacity: .35; transform: scale(.9); } 12% { opacity: 1; transform: scale(1.08); } 26% { opacity: .55; transform: scale(.96); } 38% { opacity: .9; transform: scale(1.04); } 60% { opacity: .4; transform: scale(.92); } }
@keyframes kern { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.04); } 26% { transform: scale(1); } 38% { transform: scale(1.025); } 50% { transform: scale(1); } }
.live-stip { width: 8px; height: 8px; border-radius: 2.3px; background: var(--geel); position: relative; display: inline-block; flex: none; }
.live-stip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: stip 2.6s ease-out infinite; }
@keyframes stip { 0% { box-shadow: 0 0 0 0 rgba(245, 196, 59, .65); } 45%, 100% { box-shadow: 0 0 0 7px rgba(245, 196, 59, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse .gloed, .pulse .kern, .live-stip::after { animation: none; } }

/* Navigatie */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(17, 18, 20, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1f2125; color: var(--nacht-tekst); }
.nav .w { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.nav .lockup > svg { width: 34px; height: 34px; }
.nav .woord { font-size: 24px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 16.5px; }
.nav-links a { text-decoration: none; color: #c9ccd2; }
.nav-links a:hover { color: var(--nacht-tekst); }
.nav .acties { display: flex; align-items: center; gap: 14px; }
.nav .inlog { font-size: 15px; }
@media (max-width: 980px) { .nav-links { display: none; } .nav .acties { margin-left: auto; } }
@media (max-width: 520px) { .nav .inlog { display: none; } .nav .woord { font-size: 17px; } .nav .knop { padding: 11px 13px; font-size: 15px; } }

/* Hero */
.hero { padding-block: var(--ruimte); overflow: hidden; }
.hero .w { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .lead { color: var(--zacht); margin-top: 26px; }
.hero .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.vinkjes { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: 15.5px; color: var(--zacht); }
.vinkjes span { display: inline-flex; align-items: center; gap: 8px; }
.vinkjes span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--geel); }
.blik { color: var(--nacht-tekst); background: var(--nacht-2); border: 1px solid var(--nacht-lijn); border-radius: 20px; padding: 20px; display: grid; gap: 16px; box-shadow: 10px 10px 0 #dcdee2; }
.blik-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.blik-kop b { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 17px; }
.blik-kop span { font-family: var(--mono); font-size: 12px; color: var(--nacht-zacht); display: inline-flex; align-items: center; gap: 7px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi { background: #15171a; border: 1px solid var(--nacht-lijn); border-radius: 12px; padding: 12px; display: grid; gap: 2px; min-width: 0; }
.kpi span { font-size: 13.5px; color: var(--nacht-zacht); }
.kpi b { font-family: var(--data); font-weight: 600; font-size: clamp(19px, 2vw, 25px); white-space: nowrap; letter-spacing: -.01em; }
.kpi i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--inkt); background: var(--geel); border-radius: 4px; padding: 1px 6px; justify-self: start; }
.trend { background: #15171a; border: 1px solid var(--nacht-lijn); border-radius: 12px; padding: 12px; }
.trend-kop { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--nacht-zacht); margin-bottom: 6px; }
.trend svg { width: 100%; height: 86px; display: block; }
.regels { display: grid; gap: 6px; }
.regel { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #15171a; border: 1px solid var(--nacht-lijn); border-radius: 12px; padding: 10px 12px; font-size: 15.5px; }
.regel small { display: block; color: var(--nacht-zacht); font-size: 13.5px; line-height: 1.35; }
.regel b { font-family: var(--data); font-weight: 600; font-size: 16px; }
.regel .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--data); font-weight: 700; font-size: 14px; background: #24272c; color: var(--nacht-tekst); }
.regel.let .ic { background: var(--geel); color: var(--inkt); }
.regel.let b { color: var(--geel); font-family: var(--body); font-size: 15px; }

/* Strook */
.strook { border-bottom: 1px solid var(--lijn); }
.strook .w { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-block: 20px; font-size: 16px; color: var(--zacht); }
.strook b { color: var(--inkt); font-weight: 600; }

/* Secties */
.sectie { padding-block: var(--ruimte); }
.kop { display: grid; gap: 18px; max-width: 860px; margin-bottom: clamp(36px, 5vw, 60px); }
.kop p { font-size: clamp(17px, 1.5vw, 19px); color: var(--zacht); max-width: 58ch; }
.nacht .kop p { color: #a3a8b0; }

/* Verhaal */
.verhaal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ochtend { border-radius: 20px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; align-content: start; }
.ochtend.voor { background: var(--wit); border: 1px solid var(--lijn); }
.ochtend.na { background: var(--nacht); color: var(--nacht-tekst); }
.ochtend h3 { font-size: 22px; }
.tabjes { display: flex; flex-wrap: wrap; gap: 6px; }
.tabjes span { font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--lijn); border-radius: 7px; padding: 5px 9px; color: var(--zacht); background: var(--grijs); }
.tabjes span s { text-decoration-color: #c2410c; }
.lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lijst li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.lijst li::before { content: ""; width: 8px; height: 8px; border-radius: 2.3px; background: var(--dim); margin-top: 9px; }
.na .lijst li::before { background: var(--geel); }
.oorsprong { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; background: var(--grijs); border-radius: 20px; padding: clamp(20px, 3vw, 30px); }
.oorsprong p { font-size: 17px; max-width: 70ch; }
.oorsprong svg { width: 72px; height: 72px; }

/* In één blik */
.drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 24px; display: grid; gap: 12px; align-content: start; }
.kaart .nr { font-family: var(--data); font-weight: 700; font-size: 16px; color: var(--geel-tekst); }
.kaart p { color: var(--zacht); font-size: 16px; }
.mini { margin-top: 6px; border-top: 1px solid var(--lijn); padding-top: 12px; display: grid; gap: 6px; font-size: 15px; }
.mini div { display: flex; justify-content: space-between; gap: 10px; }
.mini span:last-child { font-family: var(--data); font-weight: 600; }
.mini .o { color: var(--geel-tekst); }

/* Het blok */
.blok-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.modules { display: grid; gap: 10px; }
.mod-rij { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 12px 14px 12px 12px; }
.mod-rij svg { width: 44px; height: 44px; }
.mod-rij b { display: block; font-size: 16px; font-weight: 600; }
.mod-rij small { display: block; font-size: 14.5px; color: var(--zacht); line-height: 1.4; }
.mod-rij.basis { border-color: #f1d98a; background: #fffbeb; }
.vast { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt); background: var(--geel); border-radius: 6px; padding: 5px 8px; }
.binnenkort { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); border: 1px dashed #c9ccd2; border-radius: 6px; padding: 5px 8px; }
.schakel { width: 46px; height: 28px; border-radius: 9px; background: #e5e7eb; position: relative; border: 0; cursor: pointer; padding: 0; flex: none; }
.schakel::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 6px; background: #9ca3af; transition: left .18s ease, background .18s ease; }
.schakel[aria-checked="true"] { background: var(--inkt); }
.schakel[aria-checked="true"]::after { left: 22px; background: var(--geel); }
.stapel-wrap { position: relative; }
.stapel-wrap svg { width: 100%; height: auto; display: block; }
.mod3d { transition: transform .42s cubic-bezier(.2, .9, .3, 1.2), opacity .25s ease; }
.mod3d.uit { transform: translateY(-46px); opacity: 0; }
.slot { transition: opacity .25s ease; }
.slot.weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mod3d { transition: none; } }
.teller { position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 13px; color: var(--zacht); }
.teller b { font-family: var(--data); font-size: 16px; color: var(--inkt); }

/* Functies */
.functies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.functie { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.functie p { color: var(--zacht); font-size: 16.5px; }
.tag { justify-self: start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 2.6px; background: var(--geel); }
.tag.mod::before { background: #8a8f98; }

/* Herleidbaar */
.herleid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.modellen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.model { font: 600 14.5px/1 var(--body); padding: 12px 15px; border-radius: 10px; border: 0; cursor: pointer; background: var(--wit); color: var(--inkt); box-shadow: 3px 3px 0 #c9ccd2; margin: 0 3px 3px 0; }
.model[aria-pressed="true"] { background: var(--geel); box-shadow: 3px 3px 0 var(--goud); }
.reis { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 18px; display: grid; gap: 8px; }
.stap { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; transition: background .2s; }
.stap.heeft { background: #fff8e1; }
.stap .bol { width: 30px; height: 30px; border-radius: 8.6px; display: grid; place-items: center; background: var(--grijs); font-family: var(--data); font-weight: 700; }
.stap.heeft .bol { background: var(--geel); }
.stap b { font-size: 16.5px; }
.stap small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--zacht); letter-spacing: .03em; }
.balk { height: 6px; background: var(--grijs); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.balk i { display: block; height: 100%; background: var(--inkt); border-radius: 3px; width: 0; transition: width .35s ease; }
.bedrag { font-family: var(--data); font-weight: 600; font-size: 16px; }
.order { display: flex; justify-content: space-between; border-top: 1px dashed var(--lijn); margin-top: 4px; padding: 12px 10px 4px; font-weight: 600; }
.order span { font-family: var(--data); }
.noot-klein { font-size: 14.5px; color: var(--zacht); margin-top: 14px; }

/* Account */
.account { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 20px; display: grid; gap: 14px; align-content: start; }
.paneel h3 { font-size: 18px; }
.paneel p { color: var(--zacht); font-size: 16px; }
.paneel .voorbeeld { color: var(--nacht-tekst); background: #111316; border: 1px solid var(--nacht-lijn); border-radius: 12px; padding: 14px; display: grid; gap: 10px; font-size: 15px; }
.vb-label { font-family: var(--mono); font-size: 11px; color: var(--nacht-zacht); text-transform: uppercase; letter-spacing: .04em; }
.meter { height: 10px; background: #24272c; border-radius: 3px; overflow: hidden; display: flex; }
.meter i { display: block; background: var(--geel); }
.meter i.prog { background: repeating-linear-gradient(45deg, #8a6a14 0 4px, #5c4a14 4px 8px); }
.rij { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rij .cijfer { font-weight: 600; }
.lamp { display: inline-flex; align-items: center; gap: 8px; }
.lamp::before { content: ""; width: 9px; height: 9px; border-radius: 2.6px; background: #4ade80; }
.lamp.oranje::before { background: var(--geel); }
.rol { font-family: var(--mono); font-size: 11.5px; border: 1px solid #34373d; border-radius: 6px; padding: 3px 7px; color: #c9ccd2; }
.wij-zien { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 1.5px dashed #c9ccd2; border-radius: 18px; padding: 20px 22px; }
.wij-zien p { color: var(--zacht); font-size: 16px; max-width: 70ch; }
.wij-zien .lampen { display: flex; gap: 6px; }
.wij-zien .lampen i { width: 14px; height: 14px; border-radius: 4px; background: #4ade80; }
.wij-zien .lampen i.o { background: var(--geel); }

/* Agencies */
.agency { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.wisselaar { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: 10px; display: grid; gap: 4px; box-shadow: 8px 8px 0 #e5e7eb; }
.klant { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 16px; }
.klant.actief { background: var(--grijs); }
.klant .av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--display); font-weight: 900; color: var(--wit); font-size: 16px; }
.klant small { display: block; color: var(--zacht); font-size: 13.5px; }
.klant .cijfer { font-weight: 600; font-size: 16px; }
.demo-tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; background: var(--geel); border-radius: 5px; padding: 2px 6px; }
.voordelen { display: grid; gap: 16px; margin-top: 30px; }
.voordeel { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.voordeel::before { content: ""; width: 12px; height: 12px; border-radius: 3.4px; background: var(--geel); margin-top: 6px; }
.voordeel b { display: block; font-size: 17px; }
.voordeel > span > span { display: block; color: var(--zacht); font-size: 16.5px; }
.voordeel b { color: var(--inkt); }

/* Vergelijking */
.tabel-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--lijn); background: var(--wit); }
table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 16px; }
th, td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font-weight: 600; font-size: 14.5px; color: var(--zacht); }
th.wij { color: var(--inkt); }
td.wij, th.wij { background: #fffbeb; }
td:first-child { font-weight: 600; }
td.wij { font-weight: 600; }
td.nee { color: var(--zacht); }
.tabel-noot { font-size: 14px; color: var(--zacht); margin-top: 12px; }
.posities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.positie { border-radius: 18px; padding: 20px; background: var(--grijs); display: grid; gap: 6px; }
.positie b { font-family: var(--display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 16px; letter-spacing: -.01em; }
.positie span { color: var(--zacht); font-size: 16px; }

/* Credits en prijs */
.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: 26px; }
.tokens { display: grid; gap: 8px; }
.token { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 13px 16px; font-size: 16.5px; }
.token b { font-family: var(--data); font-weight: 600; white-space: nowrap; }
.quiz { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; align-items: start; }
.vraagkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 20px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; min-height: 420px; align-content: start; }
.voortgang { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.voortgang i { height: 6px; border-radius: 2px; background: var(--lijn); }
.voortgang i.af { background: var(--inkt); }
.vraag-nr { font-family: var(--mono); font-size: 12px; color: var(--zacht); text-transform: uppercase; letter-spacing: .04em; }
.vraag h3 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 8px; }
.hint { color: var(--zacht); font-size: 16px; margin-top: 6px; }
.keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.keuze { text-align: left; font: 600 15.5px/1.3 var(--body); color: var(--inkt); background: var(--grijs); border: 0; border-radius: 12px; padding: 14px 16px; cursor: pointer; box-shadow: 3px 3px 0 #d5d8dd; margin: 0 3px 3px 0; transition: transform .1s ease, box-shadow .1s ease; }
.keuze small { display: block; font-weight: 400; font-size: 14.5px; color: var(--zacht); margin-top: 3px; }
.keuze:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #d5d8dd; }
.keuze[aria-pressed="true"] { background: var(--geel); box-shadow: 3px 3px 0 var(--goud); }
.keuze[aria-pressed="true"] small { color: #5c4a14; }
.quiz-voet { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.stil { background: none; border: 0; font: 600 15px var(--body); color: var(--zacht); cursor: pointer; padding: 8px 4px; }
.schatting { background: var(--nacht); color: var(--nacht-tekst); border-radius: 20px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 16px; position: sticky; top: 90px; }
.schatting .label { color: var(--nacht-zacht); }
.prijs { font-family: var(--data); font-weight: 700; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.02em; }
.prijs small { font-family: var(--body); font-weight: 500; font-size: 16px; color: var(--nacht-zacht); letter-spacing: 0; }
.opbouw { display: grid; gap: 7px; font-size: 15.5px; border-top: 1px solid var(--nacht-lijn); padding-top: 14px; }
.opbouw div { display: flex; justify-content: space-between; gap: 10px; color: #c9ccd2; }
.opbouw b { font-family: var(--data); font-weight: 600; color: var(--nacht-tekst); }
.noot { font-size: 14px; color: var(--nacht-zacht); }

/* FAQ */
.faq { display: grid; gap: 8px; max-width: 900px; }
.faq details { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 4px 20px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--data); font-weight: 700; color: var(--geel-tekst); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--zacht); padding-bottom: 16px; max-width: 70ch; }

/* Afsluiter: het enige gele vlak */
.slot-sectie { background: var(--geel); color: var(--inkt); }
.slot-sectie .w { display: grid; justify-items: center; text-align: center; gap: 26px; padding-block: var(--ruimte); }
.slot-sectie .w > svg { order: -1; width: 92px; height: 92px; }
.slot-sectie .mail { justify-content: center; }
.slot-sectie .mk::after { background: var(--inkt); }
.slot-sectie .mk .g2 { color: #5c4a14; -webkit-text-stroke-color: #5c4a14; }
.slot-sectie p { font-size: 19px; max-width: 46ch; margin: 22px auto 0; }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.mail code { font-family: var(--mono); font-size: 16px; background: rgba(255, 255, 255, .5); border-radius: 10px; padding: 13px 16px; user-select: all; }

/* Footer */
footer { background: var(--nacht); color: var(--nacht-zacht); font-size: 15px; }
footer .lockup > svg { width: 28px; height: 28px; }
footer .woord { font-size: 16px; }
footer a { text-decoration: none; color: #c9ccd2; }

@media (max-width: 980px) {
  .hero .w, .blok-grid, .herleid, .agency, .credits, .quiz, .verhaal { grid-template-columns: 1fr; }
  .drie, .functies, .account, .posities { grid-template-columns: 1fr 1fr; }
  .schatting { position: static; }
}
@media (max-width: 640px) {
  .drie, .functies, .account, .posities, .keuzes { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .kpi { padding: 10px 8px; }
  .oorsprong, .wij-zien { grid-template-columns: 1fr; }
  .klant { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .klant .cijfer { display: none; }
}

/* ---------- Dashboardvoorbeeld ---------- */
.d-raam { background: var(--d-bg); border: 1px solid var(--d-rand); border-radius: 18px; overflow: hidden; color: var(--d-tekst); box-shadow: 10px 10px 0 #dcdee2; font-size: 15px; text-align: left; }
.d-titelbalk { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--d-rand); background: var(--d-balk); }
.d-stipjes { display: flex; gap: 6px; } .d-stipjes i { width: 10px; height: 10px; border-radius: 3px; background: var(--d-diep); }
.d-url { font-family: var(--mono); font-size: 12px; color: var(--d-zacht); background: var(--d-vlak); border-radius: 6px; padding: 4px 10px; }
.d-vb { margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--inkt); background: var(--geel); border-radius: 5px; padding: 3px 7px; }
.d-romp { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 560px; }
.d-zij { background: var(--d-balk); border-right: 1px solid var(--d-rand); padding: 14px 10px; display: grid; gap: 14px; align-content: start; }
.d-merk { display: flex; align-items: center; gap: 7px; padding: 2px 6px; }
.d-merk > svg { width: 26px; height: 26px; flex: none; }
.d-merk .woord { font-size: 15px; color: var(--d-tekst); --base-kleur: #8a8f98; }
.d-klant { display: flex; align-items: center; gap: 8px; background: var(--d-vlak); border: 1px solid var(--d-rand); border-radius: 10px; padding: 7px 8px; font-weight: 600; font-size: 14.5px; }
.d-av { width: 24px; height: 24px; border-radius: 7px; background: var(--d-av); color: var(--d-av-tekst); display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 13px; }
.d-demo { margin-left: auto; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; background: var(--geel); color: var(--inkt); border-radius: 4px; padding: 2px 5px; }
.d-groep { display: grid; gap: 2px; }
.d-groep > span { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--d-dim); padding: 4px 8px; }
.d-item { text-align: left; background: none; border: 0; color: var(--d-licht); font: 500 13.5px var(--body); padding: 6px 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 9px; }
.d-item::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--d-lijn2); flex: none; }
.d-item:hover { background: var(--d-vlak); color: var(--d-tekst); }
.d-item[aria-current="true"] { background: var(--d-vlak2); color: var(--d-tekst); }
.d-item[aria-current="true"]::before { background: var(--geel); }
.d-hoofd { padding: 16px 18px 20px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.d-boven { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.d-titel { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 20px; letter-spacing: -.02em; margin-right: auto; }
.d-chip { font: 500 12.5px var(--body); color: var(--d-licht); background: var(--d-vlak); border: 1px solid var(--d-rand); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.d-chip.d-vast { cursor: default; }
.d-chip[aria-pressed="true"] { background: var(--geel); color: var(--inkt); border-color: var(--geel); }
.d-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--d-zacht); }
.d-tabs { display: none; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.d-tab { flex: none; font: 500 13px var(--body); color: var(--d-licht); background: var(--d-vlak); border: 1px solid var(--d-rand); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.d-tab[aria-current="true"] { background: var(--geel); color: var(--inkt); border-color: var(--geel); }
.d-inhoud { display: grid; gap: 12px; min-width: 0; }
.d-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.d-kpis.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.d-kpi { background: var(--d-kaart); border: 1px solid var(--d-rand); border-radius: 12px; padding: 12px 14px; display: grid; gap: 3px; min-width: 0; }
.d-kpi > span { font-size: 13.5px; color: var(--d-zacht); }
.d-kpi b { font-family: var(--data); font-weight: 600; font-size: clamp(18px, 1.9vw, 24px); white-space: nowrap; }
.d-kpi i { font-style: normal; justify-self: start; font-family: var(--mono); font-size: 11.5px; background: var(--geel); color: var(--inkt); border-radius: 4px; padding: 1px 6px; }
.d-kpi i.neg { background: var(--d-diep); color: var(--d-licht); }
.d-rij { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.d-kaart { background: var(--d-kaart); border: 1px solid var(--d-rand); border-radius: 12px; padding: 14px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.d-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--d-zacht); }
.d-knop { font: 600 12px var(--body); color: var(--d-tekst); background: var(--d-vlak2); border: 1px solid var(--d-lijn2); border-radius: 7px; padding: 5px 9px; }
.d-grafiek { width: 100%; height: 150px; display: block; }
.d-legenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--d-zacht); }
.d-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.d-legenda i { width: 9px; height: 9px; border-radius: 2.5px; display: inline-block; }
.d-legenda i.lijn { height: 0; width: 14px; border-top: 2px dashed #8a8f98; border-radius: 0; }
.d-doel { display: grid; gap: 8px; }
.d-groot { font-family: var(--data); font-weight: 700; font-size: 34px; line-height: 1; }
.d-groot small { font-size: 16px; color: var(--d-zacht); font-weight: 500; }
.d-doel > span { color: var(--d-zacht); font-size: 14px; }
.d-mini { display: flex; justify-content: space-between; border-top: 1px solid var(--d-rand); padding-top: 8px; font-size: 14px; color: var(--d-zacht); }
.d-mini b { font-family: var(--data); color: var(--geel); }
.d-balk { display: flex; height: 7px; background: var(--d-diep); border-radius: 3px; overflow: hidden; min-width: 50px; }
.d-balk i { display: block; background: #8a8f98; border-radius: 3px; }
.d-balk i.prog { background: repeating-linear-gradient(45deg, #8a6a14 0 4px, #5c4a14 4px 8px); border-radius: 0; }
.d-lijst { display: grid; gap: 6px; }
.d-lijst > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--d-vlak); border-radius: 9px; padding: 8px 10px; font-size: 14.5px; }
.d-lijst.kort > div { grid-template-columns: minmax(0, 1fr) auto; }
.d-lijst small { display: block; color: var(--d-zacht); font-size: 12.5px; }
.d-lijst b { font-family: var(--data); font-weight: 600; }
.d-nr { width: 24px; height: 24px; border-radius: 7px; background: var(--d-diep); display: grid; place-items: center; font-family: var(--data); font-weight: 700; font-size: 13px; }
.d-nr.geel { background: var(--geel); color: var(--inkt); }
.d-tabel { overflow-x: auto; }
.d-tabel table { min-width: 520px; font-size: 14px; border-collapse: collapse; width: 100%; }
.d-tabel th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--d-dim); font-weight: 400; padding: 8px; border-bottom: 1px solid var(--d-rand); background: none; }
.d-tabel td { padding: 9px 8px; border-bottom: 1px solid var(--d-td); font-family: var(--data); font-weight: 500; background: none; }
.d-tabel td:first-child { font-family: var(--body); font-weight: 600; }
.d-tabel td small { display: block; font-weight: 400; color: var(--d-zacht); font-size: 12.5px; }
.d-tabel tr:last-child td { border-bottom: 0; }
.d-cel { display: grid; grid-template-columns: auto minmax(40px, 1fr); gap: 10px; align-items: center; }
.d-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.d-sel { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--d-zacht); border: 1px dashed var(--d-lijn2); border-radius: 7px; padding: 5px 9px; }
.d-paden { display: grid; gap: 10px; }
.d-paden > div { display: grid; grid-template-columns: minmax(0, 1fr) 76px 110px; gap: 12px; align-items: center; }
.d-pad { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.d-pad i { font-style: normal; font-size: 13.5px; background: var(--d-vlak2); border: 1px solid var(--d-pad); border-radius: 7px; padding: 4px 8px; }
.d-pad i.geel { background: var(--geel); color: var(--inkt); border-color: var(--geel); font-weight: 600; }
.d-pad em { font-style: normal; color: var(--d-dim); }
.d-paden b { font-family: var(--data); font-weight: 600; font-size: 14px; }
.d-feed { display: grid; gap: 6px; }
.d-feed > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--d-vlak); border-radius: 9px; padding: 8px 10px; font-size: 14.5px; animation: binnen .4s ease; }
.d-feed small { display: block; color: var(--d-zacht); font-size: 12.5px; }
.d-feed b { font-family: var(--mono); font-size: 11.5px; color: var(--d-zacht); font-weight: 400; }
@keyframes binnen { from { opacity: 0; transform: translateY(-6px); } }
.d-plan { display: grid; gap: 12px; }
.d-plan > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: 14.5px; }
.d-plan b { font-family: var(--data); font-weight: 600; text-align: right; }
.d-plan small { color: var(--d-zacht); font-weight: 400; }
.d-noot { font-size: 13.5px; color: var(--d-zacht); }
.d-leeg { display: grid; gap: 10px; justify-items: start; padding: 26px 8px; }
.d-leeg b { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 22px; }
.d-leeg p { color: var(--d-zacht); max-width: 44ch; }
@media (prefers-reduced-motion: reduce) { .d-feed > div { animation: none; } }
@media (max-width: 860px) {
  .d-romp { grid-template-columns: 1fr; min-height: 0; }
  .d-zij { display: none; }
  .d-tabs { display: flex; }
  .d-kpis { grid-template-columns: 1fr 1fr; }
  .d-kpis.drie { grid-template-columns: 1fr 1fr 1fr; }
  .d-rij { grid-template-columns: 1fr; }
  .d-paden > div { grid-template-columns: 1fr auto; } .d-paden .d-balk { grid-column: 1 / -1; }
  .d-plan > div { grid-template-columns: 90px minmax(0, 1fr); } .d-plan b { grid-column: 1 / -1; text-align: left; }
  .d-live, .d-url { display: none; }
}

/* Kleuren van het dashboard: donker standaard, licht met de schakelaar */
.d-raam { --d-bg: #0b0c0e; --d-rand: #1f2125; --d-tekst: #f3f4f6; --d-zacht: #8a8f98; --d-balk: #08090a; --d-vlak: #15171a; --d-vlak2: #1a1c20; --d-kaart: #111316; --d-diep: #24272c; --d-lijn2: #34373d; --d-dim: #6b7280; --d-pad: #2a2d33; --d-td: #17191c; --d-licht: #c9ccd2; --d-staaf: #2a2d33; --d-av: #f3f4f6; --d-av-tekst: #0a0a0a; transition: background .25s ease, color .25s ease; }
.d-raam.licht { --d-bg: #f6f7f8; --d-rand: #e5e7eb; --d-tekst: #0a0a0a; --d-zacht: #6b7280; --d-balk: #ffffff; --d-vlak: #f3f4f6; --d-vlak2: #eceef1; --d-kaart: #ffffff; --d-diep: #e5e7eb; --d-lijn2: #d1d5db; --d-dim: #9ca3af; --d-pad: #e5e7eb; --d-td: #f0f1f3; --d-licht: #374151; --d-staaf: #d5d8dd; --d-av: #0a0a0a; --d-av-tekst: #ffffff; }
.d-merk .woord { color: var(--d-tekst) !important; --base-kleur: var(--d-zacht) !important; }
.d-schakel { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 14px; }
.d-schakel button { font: 600 14.5px/1 var(--body); color: var(--inkt); background: var(--wit); border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; box-shadow: 3px 3px 0 #d5d8dd; margin: 0 3px 3px 0; display: inline-flex; align-items: center; gap: 8px; }
.d-schakel button::before { content: ""; width: 10px; height: 10px; border-radius: 2.9px; background: #0b0c0e; }
.d-schakel button[data-thema="licht"]::before { background: #e5e7eb; box-shadow: inset 0 0 0 1px #c9ccd2; }
.d-schakel button[aria-pressed="true"] { background: var(--geel); box-shadow: 3px 3px 0 var(--goud); }
/* ---------- Pagina's ---------- */
.paginakop { padding-block: var(--ruimte); }
.paginakop .w { display: grid; gap: 22px; max-width: 1200px; }
.paginakop .lead { color: var(--zacht); }
.paginakop.licht .lead { color: var(--zacht); }
.paginakop .acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.verder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.verder a { text-decoration: none; background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 22px; display: grid; gap: 8px; transition: transform .12s ease, box-shadow .12s ease; }
.verder a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #e5e7eb; }
.verder a span { color: var(--zacht); font-size: 16.5px; }
.verder a b { font-family: var(--display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 18px; letter-spacing: -.01em; display: flex; justify-content: space-between; }
.ic-tegel { width: 42px; height: 42px; border-radius: 12px; background: var(--inkt); color: var(--nacht-tekst); display: grid; place-items: center; flex: none; transition: background .15s ease, color .15s ease; }
.ic-tegel svg { width: 21px; height: 21px; }
.verder a:hover .ic-tegel { background: var(--geel); color: var(--inkt); }
.verder a .ic-tegel { margin-bottom: 6px; }
.nacht .verder a { background: var(--nacht-2); border-color: var(--nacht-lijn); }
.nacht .verder a:hover { box-shadow: 4px 4px 0 #000; }
.nacht .verder a span { color: var(--nacht-zacht); }
.stappen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: stap; }
.stappen > div { background: var(--wit); border: 1px solid var(--lijn); border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.stappen > div::before { counter-increment: stap; content: counter(stap); width: 34px; height: 34px; border-radius: 9.7px; background: var(--geel); display: grid; place-items: center; font-family: var(--data); font-weight: 700; }
.stappen p { color: var(--zacht); font-size: 16.5px; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.logo-tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.logo-tegel b { font-size: 16px; }
.logo-tegel span { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.logo-tegel.geel span { color: var(--geel-tekst); }
.roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.roadmap > div { border-radius: 18px; padding: 22px; display: grid; gap: 10px; align-content: start; }
.roadmap .nu { background: var(--nacht); color: var(--nacht-tekst); }
.roadmap .straks { background: var(--wit); border: 1px solid var(--lijn); }
.roadmap .later { border: 1.5px dashed #c9ccd2; }
.roadmap ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 16.5px; }
.nacht .kaart { background: var(--nacht-2); border-color: var(--nacht-lijn); }
.nacht .kaart p { color: var(--nacht-zacht); }
.menuknop { display: none; background: #22252a; border: 1px solid #34373d; color: var(--nacht-tekst); border-radius: 9px; padding: 9px 12px; font: 600 15px var(--body); cursor: pointer; }
.nav .menupaneel { display: block; border-top: 1px solid #1f2125; padding-block: 10px 16px; }
.nav .menupaneel[hidden] { display: none; }
.menupaneel nav { display: grid; gap: 2px; }
.menupaneel a { text-decoration: none; color: #e5e7eb; padding: 11px 4px; font-size: 18px; border-bottom: 1px solid #1f2125; }
.nav-links a[aria-current="page"] { color: var(--nacht-tekst); box-shadow: inset 0 -2px 0 var(--geel); }
.footer-kolommen { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 48px 28px; }
.footer-kolommen nav { display: grid; gap: 8px; align-content: start; }
.footer-kolommen b { color: var(--nacht-tekst); font-size: 15px; }
.footer-kolommen p { max-width: 34ch; margin-top: 14px; }
.footer-onder { border-top: 1px solid var(--nacht-lijn); padding-block: 18px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
@media (max-width: 980px) {
  .menuknop { display: inline-block; }
  .verder, .roadmap { grid-template-columns: 1fr 1fr; }
  .stappen, .logos { grid-template-columns: 1fr 1fr; }
  .footer-kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .verder, .roadmap, .stappen { grid-template-columns: 1fr; } .footer-kolommen { grid-template-columns: 1fr; } }

/* Logo's van platformen, altijd in een vierkant */
.logo-ic { width: 40px; height: 40px; border-radius: 11.4px; background: var(--grijs); color: var(--inkt); display: grid; place-items: center; flex: none; font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: -.02em; }
.logo-ic svg { width: 20px; height: 20px; }
.logo-ic.klein { width: 22px; height: 22px; border-radius: 6.3px; font-size: 9px; }
.logo-ic.klein svg { width: 12px; height: 12px; }
.grijs .logo-ic { background: var(--grijs); }
.logo-tegel { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.logo-tegel .logo-ic { grid-row: span 2; }
.chips-logo { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-logo span { display: inline-flex; align-items: center; gap: 8px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 5px 10px 5px 5px; font-size: 15.5px; font-weight: 500; }
.strook .met-logo { display: inline-flex; align-items: center; gap: 8px; }
/* Logo zonder tegel: het blok zelf */
.lockup > svg.kaal { width: 36px; height: 41px; }
.footer-logo { display: grid; justify-items: start; gap: 12px; text-decoration: none; }
.footer-logo > svg { width: 44px; height: 50px; }
.footer-logo .woord { font-size: 20px; }

/* Animaties: zacht en kort */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
@keyframes opkomen { from { opacity: 0; transform: translateY(12px); } }
.hero .w > *, .paginakop .w > * { animation: opkomen .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero .w > :nth-child(2), .paginakop .w > :nth-child(2) { animation-delay: .08s; }
.paginakop .w > :nth-child(3) { animation-delay: .14s; }
.paginakop .w > :nth-child(4) { animation-delay: .2s; }
.label::before { transition: transform .3s ease; }
.kop:hover .label::before { transform: rotate(45deg); }
.lockup > svg.kaal { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .hero .w > *, .paginakop .w > * { animation: none; } }

.nav .knop.rand { background: #22252a; color: var(--nacht-tekst); --zij: #000; box-shadow: 3px 3px 0 #000, inset 0 0 0 1px #34373d; }
.nav .knop.rand:hover { box-shadow: 2px 2px 0 #000, inset 0 0 0 1px #34373d; }
/* Kleine logo's: groot genoeg om te lezen */
.logo-ic.klein { width: 30px; height: 30px; border-radius: 8.6px; font-size: 11px; }
.logo-ic.klein svg { width: 17px; height: 17px; }
.strook .w { font-size: 17px; gap: 12px 30px; }
/* Footer: blok naast het gestapelde woordmerk */
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo > svg:first-child { width: 48px; height: 55px; }
.footer-logo .stapelwoord { width: 118px; height: auto; }
/* De gele punt in de grote kop klopt */
@keyframes punt-klop { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 196, 59, .55); } 12% { transform: scale(1.22); } 26% { transform: scale(1); } 38% { transform: scale(1.12); } 50% { transform: scale(1); box-shadow: 0 0 0 .22em rgba(245, 196, 59, 0); } }
.hero h1.mk::after, .paginakop h1.mk::after { animation: punt-klop 2.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .hero h1.mk::after, .paginakop h1.mk::after { animation: none; } }

/* Dashboard in de paginakop */
.kop-app { margin-top: 24px; }
/* Actieve pagina in het menu: een blokje, geen streepje */
.nav-links { gap: 6px; }
.nav-links a { padding: 7px 12px; border-radius: 9px; transition: background .15s ease, color .15s ease; }
.nav-links a:hover { background: #1c1e22; }
.nav-links a[aria-current="page"] { background: #2a2d33; color: var(--nacht-tekst); box-shadow: inset 0 0 0 1px #3a3d44; }
/* Woo: breed woordbeeld */
.logo-ic svg.breed { width: 84%; height: 84%; }
/* FAQ: plus in een vierkantje, draait naar een kruis */
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--grijs); display: grid; place-items: center; font-family: var(--body); font-weight: 600; font-size: 19px; line-height: 1; color: var(--inkt); transition: background .25s ease; }
.faq details[open] summary::after { content: "\2212"; background: var(--geel); }
.faq summary { align-items: center; }
.faq details p { overflow: hidden; }
/* Cijfers en tekens precies in het midden van hun vakje */
.d-nr, .regel .ic, .stap .bol, .klant .av, .d-av, .stappen > div::before, .ic-tegel, .logo-ic, .plus { line-height: 1; text-align: center; }
.faq details.sluit summary::after { content: "+"; background: var(--grijs); }

/* Vergelijkingstabel: duidelijker, met een teken in een vakje per cel */
table { font-size: 16.5px; }
th { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--inkt); vertical-align: bottom; padding-block: 18px 14px; }
th.wij { text-align: left; }
.th-lockup { gap: 8px; }
.th-lockup > svg.kaal { width: 30px; height: 34px; }
.th-lockup .woord { font-size: 20px; }
td { padding-block: 16px; }
td:first-child { width: 28%; }
tbody tr:hover td { background: #fafafa; }
tbody tr:hover td.wij { background: #fff6d6; }
td.wij, td.nee, td.deels { white-space: nowrap; }
td.wij::before, td.nee::before, td.deels::before { content: ""; display: inline-block; vertical-align: -6px; width: 24px; height: 24px; border-radius: 6.9px; margin-right: 10px; background: var(--grijs) center / 14px no-repeat; }
td.wij::before { background-color: var(--geel); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
td.nee::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
td.deels::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
td { vertical-align: middle; }
td:first-child { width: 30%; }

/* Formulieren */
.formulier-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.formulier-kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: clamp(22px, 3vw, 36px); }
.formulier-kaart form, .formulier-kaart .klaar { display: grid; gap: 18px; }
.kaart-kop { font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; }
.velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.velden label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.velden .breed { grid-column: 1 / -1; }
.velden input, .velden select, .velden textarea { font: 400 17px/1.4 var(--body); color: var(--inkt); background: var(--licht); border: 1.5px solid var(--lijn); border-radius: 10px; padding: 12px 14px; width: 100%; min-width: 0; }
.velden textarea { resize: vertical; }
.velden input:focus, .velden select:focus, .velden textarea:focus { outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(245, 196, 59, .45); }
.pot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fout { color: #b42318; font-size: 15px; font-weight: 600; }
.klein-tekst { font-size: 14px; color: var(--zacht); }
.mono { font-family: var(--mono); font-size: .92em; }
.klaar p { color: var(--zacht); font-size: 17px; }
.klaar-blok { width: 44px; height: 44px; border-radius: 12.6px; background: var(--geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 24px no-repeat; }
.dagen { display: grid; gap: 16px; }
.dagen ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: dag; }
.dagen li { background: var(--wit); border: 1px solid var(--lijn); border-radius: 16px; padding: 16px 18px 16px 62px; position: relative; display: grid; gap: 4px; }
.dagen li::before { counter-increment: dag; content: counter(dag); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 9px; background: var(--geel); display: grid; place-items: center; font-family: var(--data); font-weight: 700; line-height: 1; }
.dagen li b { font-size: 17px; }
.dagen li span { color: var(--zacht); font-size: 16px; }
.mail-schatting { display: grid; gap: 10px; border-top: 1px solid var(--nacht-lijn); padding-top: 16px; }
.mail-schatting b { font-size: 16px; }
.velden.smal { gap: 8px; }
.velden.smal input { background: #15171a; border-color: #2a2d33; color: var(--nacht-tekst); font-size: 16px; padding: 10px 12px; }
.velden.smal input::placeholder { color: #8a8f98; }
.mail-schatting .knop.rand { background: #22252a; color: var(--nacht-tekst); --zij: #000; box-shadow: 3px 3px 0 #000, inset 0 0 0 1px #34373d; justify-self: start; }
.klaar.donker { border-top: 1px solid var(--nacht-lijn); padding-top: 16px; color: #c9ccd2; font-size: 16px; display: block; }
@media (max-width: 860px) { .formulier-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .velden { grid-template-columns: 1fr; } }
.klaar[hidden], form[hidden] { display: none !important; }

/* Knoppen houden hun eigen breedte, ook in formulieren en grids */
.knop { justify-self: start; align-self: start; width: auto; }
/* Keuzes als blokjes, geen dropdown van de browser */
.keuze-blokken { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.keuze-blokken legend { font-size: 15px; font-weight: 600; margin-bottom: 8px; padding: 0; width: 100%; }
.keuze-blokken label { position: relative; }
.keuze-blokken input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze-blokken span { display: inline-flex; align-items: center; gap: 8px; font: 600 15.5px/1 var(--body); background: var(--grijs); border-radius: 10px; padding: 9px 13px; cursor: pointer; box-shadow: 3px 3px 0 #d5d8dd; margin: 0 3px 3px 0; transition: transform .1s ease, box-shadow .1s ease, background .15s ease; }
.keuze-blokken span:has(.logo-ic) { padding-left: 6px; }
.keuze-blokken .logo-ic.klein { width: 26px; height: 26px; background: var(--wit); }
.keuze-blokken span:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #d5d8dd; }
.keuze-blokken input:checked + span { background: var(--geel); box-shadow: 3px 3px 0 var(--goud); }
.keuze-blokken input:focus-visible + span { outline: 2px solid var(--inkt); outline-offset: 2px; }
.ongeldig input, input.ongeldig { border-color: #b42318 !important; }
fieldset.ongeldig legend, label.ongeldig { color: #b42318; }

/* Stroom op de attributiepagina */
.stroom-wrap { background: var(--wit); border: 1px solid var(--lijn); border-radius: 22px; padding: clamp(14px, 2.4vw, 28px); }
.stroom-wrap svg { width: 100%; height: auto; display: block; }
.stroom-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; font-size: 15px; color: var(--zacht); }
.stroom-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.stroom-legenda i { width: 8px; height: 8px; border-radius: 2.3px; background: #c4c8ce; }
.stroom-legenda i.geel { width: 11px; height: 11px; background: var(--geel); }