/* Mikofy Engine: grafiet en steen, één signaalkleur voor wat leeft. Geen schaduwen, 4px hoeken, haarlijnen. */
:root {
  /* Mikofy-kleuren: diep groenzwart en lime. Lime is het signaal: actie, live, gelukt. */
  --gr: #0E1611;
  --gr2: #15201A;
  --gr3: #1E2B23;
  --st: #EDF1E9;
  --wh: #F8FAF5;
  --ink: #0F1A12;
  --ink2: #475449;
  --on-gr: #EAF0E6;
  --on-gr2: #9FAE9F;
  --line: rgba(15, 26, 18, .14);
  --line-d: rgba(234, 240, 230, .12);
  --sig: #9FE870;
  --sig-ink: #3A8F27;
  --ok: #9FE870;
  --ok-ink: #2F7A1F;
  --wait: #F2B33D;
  --err: #FF6B5E;
  --r: 4px;
  --max: 1280px;
  --gut: clamp(16px, 3.4vw, 40px);
  --sans: 'Host Grotesk', system-ui, sans-serif;
  --mono: 'Fragment Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
body { margin: 0; background: var(--st); color: var(--ink); font: 400 17px/1.55 var(--sans); font-feature-settings: 'ss01'; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sig); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }
.dark { background: var(--gr); color: var(--on-gr); }
.dark ::selection { background: var(--sig); color: var(--ink); }
.sec:not(.dark) :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 99; background: var(--sig); color: var(--ink); padding: 8px 12px; border-radius: var(--r); }

/* knoppen */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent; font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-sig { background: var(--sig); color: var(--ink); }
.btn-sig:hover { background: #B6F293; }
.btn-line { border-color: var(--line-d); color: var(--on-gr); background: transparent; }
.btn-line:hover { border-color: var(--on-gr2); }
.btn-ink { background: var(--ink); color: var(--wh); }
.btn-ink:hover { background: #24342A; }
.btn[disabled] { opacity: .5; cursor: progress; }

/* navigatie */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(14, 22, 17, .94); backdrop-filter: saturate(140%) blur(10px); color: var(--on-gr); border-bottom: 1px solid var(--line-d); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand img { height: 24px; width: auto; }
.brand span { font-weight: 600; font-size: 19px; letter-spacing: -.02em; padding-top: 1px; }
.nav-links { display: flex; gap: 24px; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--on-gr2); transition: color .2s; }
.nav-links a:hover { color: var(--on-gr); }
.nav-end { display: flex; align-items: center; gap: 16px; }
.lang { display: flex; gap: 2px; font-family: var(--mono); font-size: 13px; }
.lang a { text-decoration: none; color: var(--on-gr2); padding: 6px 7px; border-radius: var(--r); }
.lang a[aria-current] { color: var(--on-gr); background: var(--gr3); }
.nav .btn { min-height: 40px; padding: 0 16px; font-size: 15px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line-d); border-radius: var(--r); width: 44px; height: 40px; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--on-gr); margin: 4px auto; transition: transform .3s var(--ease); }
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-end { margin-left: auto; }
}
@media (max-width: 720px) {
  .menu-btn { display: block; }
  .nav-end .btn, .nav-end .lang { display: none; }
  .nav.open .nav-links { display: flex; position: fixed; inset: 64px 0 0; flex-direction: column; gap: 0; background: var(--gr); padding: 12px var(--gut) 24px; font-size: 22px; }
  .nav.open .nav-links a { color: var(--on-gr); display: block; padding: 14px 0; border-bottom: 1px solid var(--line-d); }
  .nav.open .nav-links .m-only { display: block; }
  .nav.open .menu-btn span:first-child { transform: translateY(2.75px) rotate(45deg); }
  .nav.open .menu-btn span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
}
.nav-links .m-only { display: none; }
.nav-links .m-only .lang { margin-top: 18px; font-size: 16px; }

/* hero */
.hero { padding: clamp(40px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4.5vw, 72px); align-items: start; }
.hero h1 { font-size: clamp(44px, 5.1vw, 76px); line-height: .95; letter-spacing: -.04em; font-weight: 600; margin-top: 8px; }
.hero h1 em { font-style: normal; color: var(--sig); }
.hero .lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--on-gr2); margin-top: 26px; max-width: 34em; }
.hero .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.txt-link { color: var(--on-gr); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(236, 237, 234, .35); text-underline-offset: .3em; transition: text-decoration-color .2s; }
.txt-link:hover { text-decoration-color: var(--sig); }
.stack { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line-d); color: var(--on-gr2); font-size: 14px; }
.stack ul { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--mono); font-size: 13px; color: var(--on-gr); }
@media (max-width: 980px) { .hero .wrap { grid-template-columns: 1fr; } }

/* de run-console */
.run { position: relative; background: var(--gr2); border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; }
.run-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line-d); scrollbar-width: none; }
.run-tabs::-webkit-scrollbar { display: none; }
.run-tabs button { flex: none; background: none; border: 0; border-right: 1px solid var(--line-d); color: var(--on-gr2); padding: 14px 18px; font-size: 14px; cursor: pointer; position: relative; transition: color .2s, background .2s; }
.run-tabs button:hover { color: var(--on-gr); }
.run-tabs button[aria-selected="true"] { color: var(--on-gr); background: var(--gr3); }
.run-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sig); }
.run-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 20px 0; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); }
.run-state { display: inline-flex; align-items: center; gap: 8px; color: var(--on-gr); }
.run-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--on-gr2); }
.run-state[data-s="running"] i { background: var(--sig); animation: pulse 1.2s infinite; }
.run-state[data-s="ok"] i { background: var(--ok); }
.run-state[data-s="wait"] i { background: var(--wait); animation: pulse 1.6s infinite; }
.run-state[data-s="err"] i { background: var(--err); }
@keyframes pulse { 50% { opacity: .35; } }
.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 16px 20px 0; position: relative; }
.rail::before { content: ''; position: absolute; left: 12px; right: 12px; top: 11px; height: 1px; background: var(--line-d); }
.rail .bar { position: absolute; left: 12px; right: 12px; top: 11px; height: 1px; background: var(--sig); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.node { position: relative; padding-right: 8px; min-width: 0; }
.node .pt { width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line-d); background: var(--gr2); display: grid; place-items: center; position: relative; z-index: 1; transition: border-color .3s, background .3s; }
.node .pt svg { width: 12px; height: 12px; opacity: 0; transition: opacity .2s; }
.node .sys { display: block; font-family: var(--mono); font-size: 12px; color: var(--on-gr); margin-top: 10px; white-space: nowrap; overflow: hidden; }
.node .sys .short { display: none; }
.node .lbl { display: block; font-size: 13px; color: var(--on-gr2); line-height: 1.35; margin-top: 2px; }
.node[data-s="active"] .pt { border-color: var(--sig); box-shadow: 0 0 0 4px rgba(159, 232, 112, .18); }
.node[data-s="ok"] .pt { background: var(--ok); border-color: var(--ok); }
.node[data-s="ok"] .pt svg.ok { opacity: 1; }
.node[data-s="err"] .pt { background: var(--err); border-color: var(--err); }
.node[data-s="err"] .pt svg.err { opacity: 1; }
.node[data-s="wait"] .pt { background: var(--wait); border-color: var(--wait); }
.node[data-s="wait"] .pt svg.wait { opacity: 1; }
.log { list-style: none; margin: 18px 0 0; padding: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px); mask-image: linear-gradient(to bottom, transparent 0, #000 26px); border-top: 1px solid var(--line-d); height: 300px; overflow-y: auto; font-family: var(--mono); font-size: 13px; scrollbar-width: thin; scrollbar-color: var(--gr3) transparent; }
.log li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding: 9px 20px; border-bottom: 1px solid var(--line-d); color: var(--on-gr); animation: logIn .45s var(--ease); }
.log li time { color: var(--on-gr2); }
.log li b { font-weight: 400; white-space: nowrap; }
.log li b.ok { color: var(--ok); }
.log li b.err { color: var(--err); }
.log li b.wait { color: var(--wait); }
.log li b.info { color: var(--on-gr2); }
@keyframes logIn { from { opacity: 0; transform: translateY(6px); } }
.decide { position: absolute; left: 0; right: 0; margin: 0; padding: 14px 20px; background: var(--gr3); border-top: 1px solid var(--sig); border-bottom: 1px solid var(--line-d); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 14.5px; animation: logIn .45s var(--ease); }
.decide p { flex: 1 1 260px; }
.decide .row { display: flex; gap: 8px; }
.decide button { min-height: 40px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line-d); background: transparent; color: var(--on-gr); cursor: pointer; font-weight: 600; font-size: 14.5px; }
.decide button.yes { background: var(--sig); border-color: var(--sig); color: var(--ink); }
.decide button:hover { border-color: var(--on-gr2); }
.run-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; font-size: 13px; color: var(--on-gr2); }
.run-ctl { display: flex; flex-wrap: wrap; gap: 8px; }
.run-ctl button { min-height: 38px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-d); background: transparent; color: var(--on-gr); font-family: var(--mono); font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.run-ctl button:hover { border-color: var(--on-gr2); }
.run-ctl button[aria-pressed="true"] { border-color: var(--err); color: #FFB3AE; }
.run-ctl button[aria-pressed="true"] i { background: var(--err); }
.run-ctl i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-gr2); }
@media (max-width: 620px) {
  .rail { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 14px 14px 0; }
  .node .lbl { display: none; }
  .node .sys { font-size: 11px; }
  .node .sys .full { display: none; }
  .node .sys .short { display: inline; }
  .log { height: 320px; font-size: 12.5px; }
  .log li { grid-template-columns: 1fr auto; padding: 9px 14px; gap: 2px 10px; }
  .log li time { grid-column: 1 / -1; font-size: 11.5px; }
  .run-head, .run-foot, .decide { padding-left: 14px; padding-right: 14px; }
  .run-head { flex-direction: column; gap: 6px; }
}

/* secties op steen */
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(36px, 4.5vw, 56px); }
.sec-head h2 { font-size: clamp(34px, 3.9vw, 58px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; }
.sec-head p { color: var(--ink2); font-size: 18px; max-width: 36em; }
.dark .sec-head p { color: var(--on-gr2); }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* nu / met engine */
.switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 3px; background: var(--wh); margin-bottom: 22px; }
.switch button { border: 0; background: none; padding: 9px 16px; border-radius: 2px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink2); transition: background .25s var(--ease), color .25s; }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--wh); }
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ledger li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger .area { font-weight: 600; font-size: 19px; letter-spacing: -.015em; }
.ledger .txt { position: relative; font-size: 18px; min-height: 1.6em; }
.ledger .txt span { display: block; transition: opacity .35s var(--ease), transform .45s var(--ease), filter .35s; }
.ledger .txt .after { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); filter: blur(3px); }
.ledger.on .txt .before { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
.ledger.on .txt .after { opacity: 1; transform: none; filter: none; }
.ledger .who { font-size: 14px; color: var(--ink2); text-align: right; }
.ledger .who .after { display: none; color: var(--ok-ink); }
.ledger.on .who .before { display: none; }
.ledger.on .who .after { display: inline; }
@media (max-width: 760px) {
  .ledger li { grid-template-columns: 1fr; }
  .ledger .who { text-align: left; }
  .ledger .txt { min-height: 3.2em; }
}

/* systemenkaart */
.map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.groups { display: grid; gap: 22px; }
.group h3 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink2); margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--wh); font-family: var(--mono); font-size: 13.5px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--ink2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--wh); }
.chip i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.chip[aria-pressed="true"] i { background: var(--sig); border-color: var(--sig); }
.plan { position: sticky; top: 88px; background: var(--gr); color: var(--on-gr); border-radius: var(--r); padding: 26px; min-height: 360px; }
.plan h3 { font-size: 22px; letter-spacing: -.02em; }
.plan .empty { color: var(--on-gr2); margin-top: 14px; }
.plan ol { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: p; }
.plan ol li { counter-increment: p; display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line-d); animation: logIn .45s var(--ease); }
.plan ol li::before { content: counter(p); font-family: var(--mono); font-size: 13px; color: var(--on-gr2); padding-top: 3px; }
.plan ol li b { display: block; font-weight: 600; }
.plan ol li span { display: block; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); margin-top: 4px; }
.plan .lead-sys { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-d); font-size: 14.5px; color: var(--on-gr2); }
.plan .lead-sys b { color: var(--on-gr); font-weight: 600; }
.plan .note { margin-top: 18px; font-size: 13px; color: var(--on-gr2); }
.robot { margin-top: 26px; font-size: 15px; color: var(--ink2); max-width: 44em; }
@media (max-width: 900px) { .map { grid-template-columns: 1fr; } .plan { position: static; min-height: 0; } }

/* rekenhulp */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.field-r { padding: 18px 0; border-bottom: 1px solid var(--line); }
.field-r:first-child { border-top: 1px solid var(--ink); }
.field-r label { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; }
.field-r output { font-family: var(--mono); font-size: 15px; min-width: 5ch; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin-top: 8px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--ink) var(--p, 50%), var(--line) var(--p, 50%)); }
input[type=range]::-moz-range-track { height: 2px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wh); border: 2px solid var(--ink); margin-top: -10px; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--wh); border: 2px solid var(--ink); }
.result { background: var(--wh); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); }
.result .big { font-size: clamp(48px, 5.4vw, 76px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.result .unit { color: var(--ink2); margin-top: 6px; }
.result .row + .row { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.result .note { margin-top: 24px; font-size: 14px; color: var(--ink2); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* bewijs */
.cases-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-d); margin-bottom: clamp(28px, 4vw, 48px); overflow-x: auto; scrollbar-width: none; }
.cases-tabs::-webkit-scrollbar { display: none; }
.cases-tabs button { flex: none; background: none; border: 0; padding: 0 0 16px; margin-right: 34px; color: var(--on-gr2); font-size: 18px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; position: relative; }
.cases-tabs button[aria-selected="true"] { color: var(--on-gr); }
.cases-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sig); }
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4.5vw, 72px); }
.case[hidden] { display: none; }
.case h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.case > div > p { color: var(--on-gr2); margin-top: 16px; font-size: 17.5px; }
.spec { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line-d); }
.spec li { padding: 13px 0; border-bottom: 1px solid var(--line-d); font-size: 15.5px; }
.case .tag { display: inline-block; margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); }
.case .btn { margin-top: 24px; }
.vis { background: var(--gr2); border: 1px solid var(--line-d); border-radius: var(--r); padding: 22px; align-self: start; }
.vis-h { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); margin-bottom: 16px; }
/* planner (eigen systeem) */
.hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.hours span { height: 46px; border-radius: 2px; background: var(--gr3); position: relative; transition: background .3s; }
.hours span.ran { background: var(--ok); }
.hours span.miss { background: transparent; outline: 1px dashed var(--err); outline-offset: -1px; }
.hours span.now { background: var(--on-gr); }
.hours-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--on-gr2); margin-top: 8px; }
.alert { margin-top: 16px; min-height: 48px; font-family: var(--mono); font-size: 13px; color: var(--on-gr); display: flex; align-items: center; gap: 10px; }
.alert.bad { color: #FFB3AE; }
.vis .run-ctl { margin-top: 14px; }
/* statusmachine (Slabstraat) */
.states { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.states li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line-d); border-radius: var(--r); font-size: 15px; color: var(--on-gr2); transition: border-color .3s, color .3s, background .3s; }
.states li .k { font-family: var(--mono); font-size: 12px; }
.states li .d { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; justify-self: center; }
.states li.done { color: var(--on-gr); }
.states li.done .d { background: var(--ok); border-color: var(--ok); }
.states li.cur { color: var(--on-gr); border-color: var(--sig); background: rgba(159, 232, 112, .07); }
.states li.cur .d { background: var(--sig); border-color: var(--sig); }
/* telefoon (bestratingsdemo) */
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.phones img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-d); background: var(--gr3); }
.phones figcaption { font-size: 13px; color: var(--on-gr2); margin-top: 10px; }
.phones figure { margin: 0; }
.chain { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr); }
.chain span + span::before { content: '→'; margin-right: 10px; color: var(--sig); }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }

/* aanpak */
.phases { list-style: none; margin: 0; padding: 0; position: relative; }
.phases::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.phases .fill { position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--sig-ink); transform: scaleY(var(--fill, 0)); transform-origin: top; }
.phase { display: grid; grid-template-columns: 32px minmax(0, 4fr) minmax(0, 5fr); gap: 8px 40px; padding: 0 0 clamp(36px, 4.5vw, 56px) 0; position: relative; }
.phase .n { width: 11px; height: 11px; margin: 10px 0 0 10px; border-radius: 50%; border: 1px solid var(--ink2); background: var(--st); position: relative; z-index: 1; transition: background .3s, border-color .3s; }
.phase.on .n { background: var(--sig); border-color: var(--ink); }
.phase h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.025em; padding-top: 2px; }
.phase .p { color: var(--ink2); margin-top: 8px; }
.phase .gets { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.phase .gets b { font-size: 13px; font-weight: 600; color: var(--ink2); display: block; margin-bottom: 6px; }
.phase .gets ul { margin: 0; padding: 0 0 0 18px; }
.phase .gets li { padding: 2px 0; }
.price { margin-top: 8px; padding: 22px 0 0 72px; border-top: 1px solid var(--line); color: var(--ink2); max-width: 60em; }
@media (max-width: 760px) {
  .phase { grid-template-columns: 32px 1fr; }
  .phase .gets { grid-column: 2; }
  .price { padding-left: 0; }
}

/* veiligheid */
.qa { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.qa li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 48px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 19px; letter-spacing: -.015em; }
.qa p { color: var(--ink2); }
.honest { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 48px; }
.honest b { font-weight: 600; }
.honest p { color: var(--ink2); }
@media (max-width: 760px) { .qa li, .honest { grid-template-columns: 1fr; } }

/* faq */
.faq { border-top: 1px solid var(--ink); max-width: 980px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; flex: none; margin-top: 4px; transition: transform .35s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--ink2); max-width: 60em; }

/* scan */
.scan .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); }
.scan h2 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1; letter-spacing: -.04em; }
.scan .sub { color: var(--on-gr2); margin-top: 18px; font-size: 18px; }
.steps { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--line-d); }
.steps li { padding: 14px 0; border-bottom: 1px solid var(--line-d); }
.contact-alt { margin-top: 26px; font-size: 15px; color: var(--on-gr2); }
.contact-alt a { color: var(--on-gr); }
form.f { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.f .full { grid-column: 1 / -1; }
.f label { display: block; font-size: 14px; color: var(--on-gr2); margin-bottom: 6px; }
.f input, .f select, .f textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-d); background: var(--gr2); color: var(--on-gr); font-size: 16px; transition: border-color .2s; caret-color: var(--sig); }
.f textarea { min-height: 112px; resize: vertical; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239FAE9F' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: rgba(236, 237, 234, .3); }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--sig); outline: none; }
.f input[aria-invalid="true"] { border-color: var(--err); }
.f .hp { position: absolute; left: -9999px; }
.f .send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.f .msg { font-size: 15px; }
.f .msg.err { color: #FFB3AE; }
.f .msg.ok { color: var(--sig); }
.f small { font-size: 13px; color: var(--on-gr2); }
.f small a { color: var(--on-gr); }
@media (max-width: 900px) { .scan .wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { form.f { grid-template-columns: 1fr; } }

/* footer */
.foot { border-top: 1px solid var(--line-d); padding: 36px 0 44px; font-size: 14.5px; color: var(--on-gr2); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--on-gr); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .other { color: var(--on-gr); }
.foot .foot-legal { display: block; margin: 18px auto 0; font-size: 13px; color: var(--on-gr2); overflow-wrap: anywhere; }

/* binnenkomst: één keer, rustig; inhoud is standaard zichtbaar */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---------- ronde 2: lime vlakken ---------- */
.lime { background: var(--sig); color: var(--ink); }
.lime ::selection { background: var(--ink); color: var(--sig); }
.sec.lime + .sec, .sec + .sec.lime { border-top: 0; }
.lime .sec-head p, .lime .sub, .lime .contact-alt { color: #23401F; }
.lime .switch { background: transparent; border-color: rgba(15, 26, 18, .3); }
.lime .switch button { color: var(--ink); }
.lime .switch button[aria-pressed="true"] { background: var(--ink); color: var(--sig); }
.lime .ledger { border-top-color: var(--ink); }
.lime .ledger li { border-bottom-color: rgba(15, 26, 18, .2); }
.lime .ledger .who { color: #23401F; }
.lime .ledger .who .after { color: var(--ink); font-weight: 600; }
.lime .ledger .area { font-size: 21px; }
.lime .ledger .txt { font-size: 20px; }
.lime :focus-visible { outline-color: var(--ink); }
/* scan op lime: donkere velden, donkere knop */
.lime.scan h2 { color: var(--ink); }
.lime .steps { border-top-color: rgba(15, 26, 18, .25); }
.lime .steps li { border-bottom-color: rgba(15, 26, 18, .25); }
.lime .contact-alt a { color: var(--ink); font-weight: 600; }
.lime .f label { color: #23401F; }
.lime .f small { color: #23401F; }
.lime .f small a { color: var(--ink); }
.lime .f input, .lime .f select, .lime .f textarea { background: var(--gr); border-color: var(--gr); color: var(--on-gr); caret-color: var(--sig); }
.lime .f input:focus, .lime .f select:focus, .lime .f textarea:focus { border-color: var(--wh); }
/* zichtbare focus (WCAG 2.4.7): naast de randkleur een duidelijke ring */
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.lime .f input:focus-visible, .lime .f select:focus-visible, .lime .f textarea:focus-visible { outline-color: var(--ink); }
.lime .btn-sig { background: var(--ink); color: var(--sig); }
.lime .btn-sig:hover { background: #24342A; }
.lime .f .msg.err { color: #8A1C12; }
.lime .f .msg.ok { color: var(--ink); font-weight: 600; }
.people { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--ink); }
.people h3 { font-size: 24px; letter-spacing: -.02em; }
.people p { margin-top: 10px; color: #23401F; max-width: 34em; }

/* ---------- ronde 2: inzoombare Engine ---------- */
.zoom { background: #0A110C; color: var(--on-gr); padding-top: clamp(72px, 9vw, 120px); }
.zoom-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; padding-bottom: 36px; }
.zoom-head h2 { font-size: clamp(40px, 5.2vw, 80px); line-height: .98; letter-spacing: -.04em; }
.zoom-head p { color: var(--on-gr2); font-size: 18px; max-width: 36em; }
.zoom-track { position: relative; }
.zoom-stage { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 72px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
.zoom-hud { display: flex; flex-direction: column; gap: 20px; }
.zoom-levels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.zoom-levels li { padding: 14px 0; border-bottom: 1px solid var(--line-d); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; color: var(--on-gr2); transition: color .35s; cursor: pointer; }
.zoom-levels b { font-weight: 600; font-size: 17px; color: var(--on-gr2); transition: color .35s; }
.zoom-levels .mag { font-family: var(--mono); font-size: 12.5px; }
.zoom-levels p { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.45; max-height: 0; overflow: hidden; opacity: 0; transition: opacity .4s; }
.zoom-levels li.on b { color: var(--on-gr); }
.zoom-levels li.on .mag { color: var(--sig); }
.zoom-levels li.on p { max-height: 8em; opacity: 1; color: var(--on-gr2); }
.zoom-ctl { display: flex; align-items: center; gap: 10px; }
.zoom-ctl button { width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line-d); background: var(--gr2); color: var(--on-gr); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background .2s; }
.zoom-ctl button:hover { border-color: var(--sig); }
.zoom-ctl button[disabled] { opacity: .35; cursor: default; }
.zoom-ctl svg { width: 16px; height: 16px; }
.zoom-mag { font-family: var(--mono); font-size: 15px; min-width: 5ch; text-align: center; color: var(--sig); }
.zoom-hint { font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); }
.zoom-box { position: relative; border: 1px solid var(--line-d); border-radius: var(--r); overflow: hidden; background: radial-gradient(circle, rgba(234, 240, 230, .07) 1px, transparent 1.2px) 0 0 / 24px 24px, #0C140F; }
/* zonder JS (of met minder beweging): de lagen onder elkaar */
.zl { position: relative; width: 100%; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line-d); }
.z-on .zoom-box { aspect-ratio: 16 / 10; }
.z-on .zoom-box .zl { position: absolute; inset: 0; aspect-ratio: auto; border: 0; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires .w { fill: none; stroke: rgba(234, 240, 230, .3); stroke-width: 1; }
.wires .p { fill: none; stroke: var(--sig); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2.5 97.5; animation: flow 2.6s linear infinite; }
@keyframes flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .wires .p { animation: none; stroke-dasharray: none; stroke-width: 1; } .core .ring { animation: none; } }
.dn, .pn, .core { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.dn { min-width: 150px; padding: 12px 14px; border: 1px solid var(--line-d); border-radius: var(--r); background: var(--gr2); }
.dn b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dn span { display: block; font-family: var(--mono); font-size: 12px; color: var(--on-gr2); margin-top: 3px; }
.dn.focus { border-color: var(--sig); }
.dn.focus b { color: var(--sig); }
.core { width: 168px; height: 168px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--sig); color: var(--ink); }
.core b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.core span { font-family: var(--mono); font-size: 11.5px; margin-top: 2px; }
.core .ring { position: absolute; inset: -16px; border-radius: 50%; border: 1px dashed rgba(159, 232, 112, .55); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.zl-h { position: absolute; left: 4%; top: 7%; font-family: var(--mono); font-size: 13px; color: var(--on-gr2); }
.pn { width: 15%; min-width: 118px; text-align: center; }
.pn i { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; background: var(--sig); color: var(--ink); }
.pn i svg { width: 18px; height: 18px; }
.pn b { display: block; font-family: var(--mono); font-size: 14px; font-weight: 400; }
.pn span { display: block; font-size: 14px; color: var(--on-gr2); margin-top: 2px; }
.pn.focus i { box-shadow: 0 0 0 6px rgba(159, 232, 112, .2); }
.l2, .l3 { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 9%; align-items: center; padding: 5% 6%; }
.inv { background: var(--wh); color: var(--ink); border-radius: 3px; padding: 18px 20px 14px; font-size: 12.5px; line-height: 1.4; }
.inv-top { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.inv-top b { font-size: 14px; }
.inv-top span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.inv-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; color: var(--ink2); font-size: 11.5px; }
.inv table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.inv td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.inv td:nth-child(2) { color: var(--ink2); padding: 4px 8px; white-space: nowrap; }
.inv td:last-child, .inv dd { text-align: right; white-space: nowrap; }
.inv dl { display: grid; grid-template-columns: 1fr auto; margin: 6px 0 0; gap: 2px 12px; font-variant-numeric: tabular-nums; }
.inv dt, .inv dd { margin: 0; }
.inv .t { font-weight: 700; }
.inv-iban { font-family: var(--mono); font-size: 11px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.inv small { display: block; margin-top: 8px; font-size: 10.5px; color: var(--ink2); }
.inv [data-f]:not([data-f=""]) { background: rgba(159, 232, 112, .45); box-shadow: 0 0 0 2px rgba(159, 232, 112, .45); }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 1px 10px; padding: 10px 0; border-bottom: 1px solid var(--line-d); }
.checks i { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: var(--ink); margin-top: 1px; }
.checks i svg { width: 11px; height: 11px; }
.checks li.wait i { background: var(--wait); }
.checks b { font-size: 15px; font-weight: 600; }
.checks span { font-family: var(--mono); font-size: 12px; color: var(--on-gr2); }
.checks li.focus { background: rgba(159, 232, 112, .06); }
.l3 { grid-template-columns: 1.2fr 1fr; gap: 6%; }
.json { margin: 0; padding: 20px 22px; background: #070C08; border: 1px solid var(--line-d); border-radius: var(--r); font: 13px/1.6 var(--mono); color: var(--on-gr); white-space: pre; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--gr3) transparent; }
.json .jk { color: #A9C7AE; }
.json .js { color: var(--sig); }
.json .jn { color: #F2D27A; }
.l3-log p { font-size: 15px; color: var(--on-gr2); margin-bottom: 12px; }
.l3-log ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); font: 12.5px/1.45 var(--mono); }
.l3-log li { display: grid; grid-template-columns: 104px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-d); }
.l3-log time { color: var(--on-gr2); }
@media (max-width: 980px) {
  .zoom-head { grid-template-columns: 1fr; }
  .zoom-stage { grid-template-columns: 1fr; }
  .zoom-hud { order: 2; }
}
@media (max-width: 700px) {
  .zl { aspect-ratio: 9 / 15; }
  .z-on .zoom-box { aspect-ratio: auto; height: calc(100svh - 64px - 150px); max-height: 640px; }
  .z-on .zoom-stage { padding-top: 12px; }
  .dn, .pn, .core { left: var(--mx); top: var(--my); }
  .dn { min-width: 0; width: 42%; padding: 9px 10px; }
  .dn b { font-size: 14px; }
  .dn span { font-size: 11px; }
  .core { width: 118px; height: 118px; }
  .core b { font-size: 20px; }
  .pn { width: 70%; display: grid; grid-template-columns: 34px 1fr; text-align: left; align-items: center; gap: 0 12px; }
  .pn i { grid-row: span 2; width: 34px; height: 34px; margin: 0; }
  .l2, .l3 { grid-template-columns: 1fr; gap: 14px; padding: 5%; align-content: center; }
  .l3 { align-content: start; overflow-y: auto; padding-top: 16px; }
  .inv { padding: 12px 12px 10px; font-size: 11px; }
  .inv table td:nth-child(2) { display: none; }
  .checks li { padding: 6px 0; }
  .checks b { font-size: 13px; }
  .checks span { font-size: 11px; }
  .json { font-size: 10px; line-height: 1.5; padding: 12px; }
  .l3-log p { font-size: 13px; margin-bottom: 6px; }
  .l3-log li { padding: 6px 0; }
  .inv tr:nth-child(n+2):not(.more), .inv-meta { display: none; }
  .zl-h { top: 3%; }
  .l3-log li { grid-template-columns: 1fr; gap: 0; }
  .z-on .zoom-levels li:not(.on) { display: none; }
  .zoom-hud { gap: 12px; }
}

/* ---------- ronde 2: storingssimulator ---------- */
.sim { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.sim-list { display: grid; gap: 8px; }
.sim-list button { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--line-d); background: var(--gr2); color: var(--on-gr); font-size: 18px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: border-color .2s, background .2s; }
.sim-list button svg { width: 18px; height: 18px; flex: none; opacity: .5; transition: transform .3s var(--ease), opacity .2s; }
.sim-list button:hover { border-color: rgba(234, 240, 230, .3); }
.sim-list button[aria-selected="true"] { border-color: var(--sig); background: var(--gr3); }
.sim-list button[aria-selected="true"] svg { opacity: 1; color: var(--sig); transform: translateX(3px); }
.sim-log { background: var(--gr2); border: 1px solid var(--line-d); border-radius: var(--r); min-height: 420px; display: flex; flex-direction: column; }
.sim-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line-d); font-family: var(--mono); font-size: 12.5px; }
.sim-play { background: none; border: 1px solid var(--line-d); color: var(--on-gr); border-radius: var(--r); padding: 7px 12px; font-family: var(--mono); font-size: 12.5px; cursor: pointer; }
.sim-play:hover { border-color: var(--sig); }
.sim-log ol { list-style: none; margin: 0; padding: 0; flex: 1; font-family: var(--mono); font-size: 13px; }
.sim-log li { display: grid; grid-template-columns: 58px minmax(0, 1fr) 14px; gap: 14px; align-items: start; padding: 11px 20px; border-bottom: 1px solid var(--line-d); animation: logIn .45s var(--ease); }
.sim-log li time { color: var(--on-gr2); }
.sim-log li i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--on-gr2); }
.sim-log li.ok i { background: var(--ok); }
.sim-log li.err i { background: var(--err); }
.sim-log li.wait i { background: var(--wait); }
.sim-log li.err span { color: #FFC2BC; }
.sim-note { padding: 14px 20px; font-size: 13px; color: var(--on-gr2); }
.it { margin-top: clamp(64px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 64px; align-items: end; margin-bottom: 32px; }
.it h2 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.03em; font-weight: 500; }
.it-p { color: var(--on-gr2); font-size: 17px; }
.dark .qa { border-top-color: var(--on-gr); }
.dark .qa li { border-bottom-color: var(--line-d); }
.dark .qa p, .dark .honest p { color: var(--on-gr2); }
@media (max-width: 860px) { .sim, .it { grid-template-columns: 1fr; } .sim-log { min-height: 0; } .sim-log li { grid-template-columns: 1fr 12px; gap: 2px 10px; padding: 10px 14px; } .sim-log li time { grid-column: 1 / -1; font-size: 11.5px; } .sim-h, .sim-note { padding-left: 14px; padding-right: 14px; } .sim-list button { font-size: 16px; padding: 15px 16px; } }

/* ---------- ronde 2: aanpak met wat je per fase krijgt ---------- */
.appr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.art-col { align-self: stretch; }
.art-stick { position: sticky; top: 104px; }
.phase h3 { line-height: 1.15; }
.arts .art { display: none; }
.arts .art.on { display: block; animation: artIn .5s var(--ease); }
@keyframes artIn { from { opacity: 0; transform: translateY(10px); } }
.art { background: var(--gr); color: var(--on-gr); border-radius: var(--r); padding: 24px; min-height: 300px; }
.art-h { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--on-gr2); margin-bottom: 18px; }
.art small { display: block; margin-top: 16px; font-size: 12.5px; color: var(--on-gr2); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bars li { display: grid; grid-template-columns: 1fr 26px; gap: 6px 10px; align-items: center; font-size: 14px; }
.bars li span { grid-column: 1 / -1; }
.bars li i { height: 10px; border-radius: 2px; background: var(--sig); width: var(--w); }
.bars li b { font: 400 13px var(--mono); text-align: right; }
.flow { display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr; gap: 10px 4px; align-items: center; font-size: 13.5px; }
.fb { border: 1px solid var(--line-d); border-radius: var(--r); padding: 10px; text-align: center; background: var(--gr2); }
.fb.q { border-color: var(--wait); }
.fb.ok { border-color: var(--sig); color: var(--sig); }
.fb.no { color: var(--on-gr2); }
.fa { height: 1px; background: var(--on-gr2); }
.fy, .fn { font: 12px var(--mono); color: var(--on-gr2); text-align: center; }
.fy em, .fn em { font-style: normal; }
.flow .fy { grid-column: 5; grid-row: 2; }
.flow .fb.ok { grid-column: 5; grid-row: 3; }
.flow .fn { grid-column: 3; grid-row: 2; }
.flow .fb.no { grid-column: 3; grid-row: 3; }
.rounds { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-d); }
.rounds li { display: grid; grid-template-columns: 14px 86px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-d); font-size: 15px; }
.rounds .d { width: 10px; height: 10px; border-radius: 50%; background: var(--sig); }
.rounds li.cur .d { background: var(--wait); }
.rounds b { font-weight: 600; }
.rounds em { font: 12.5px var(--mono); font-style: normal; color: var(--on-gr2); }
.book { background: var(--wh); color: var(--ink); border-radius: 3px; padding: 22px; }
.book .art-h { color: var(--ink2); border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.book ul { margin: 0; padding: 0 0 0 18px; }
.book li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.mon { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.mon span { height: 54px; border-radius: 2px; background: var(--sig); }
.mon span.warn { background: var(--wait); }
.art-inline { display: none; }
@media (max-width: 900px) {
  .appr { grid-template-columns: 1fr; }
  .art-col { margin-bottom: 28px; } .art-stick { position: static; }
  .art-inline { display: block; grid-column: 2; margin-top: 4px; }
  .art-inline .art { min-height: 0; padding: 18px; }
  .rounds li { grid-template-columns: 12px 70px 1fr; }
  .rounds em { grid-column: 3; }
}

/* zoommodus: de stage blijft staan terwijl je door de track scrolt */
.z-on .zoom-stage { position: sticky; top: 64px; min-height: calc(100vh - 64px); align-content: center; padding-top: 24px; padding-bottom: 24px; }
.z-on .zoom-box { max-height: calc(100vh - 120px); }
@media (max-width: 980px) { .z-on .zoom-stage { align-content: start; } }

@media (max-width: 700px) { .zl[data-l="2"] .wires { display: none; } }

/* samenvattingsregel op de factuur: alleen mobiel, waar de andere regels wegvallen */
.inv tr.more { display: none; }
@media (max-width: 700px) { .inv tr.more { display: table-row; } .inv tr.more td { color: var(--ink2); } }
/* zoom in rust op een niveau: het focuspunt licht lime op */
.zl .focus { transition: box-shadow .4s var(--ease), border-color .4s; }
.zl.rest .dn.focus, .zl.rest .checks li.focus { box-shadow: 0 0 0 2px var(--sig); }
.zl.rest .pn.focus i { box-shadow: 0 0 0 8px rgba(159, 232, 112, .3); }

/* echt scherm als bewijs */
.vis-col { display: grid; gap: 16px; align-self: start; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line-d); }
.shot figcaption { margin-top: 10px; font-size: 13.5px; color: var(--on-gr2); }

/* ---------- 3D-Engine (laag 0) ---------- */
.has3d > .wires, .has3d > .dn, .has3d > .core { display: none; }
.e3d { position: absolute; inset: 0; }
.e3d canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.e3d canvas:active { cursor: grabbing; }
.e3d-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.e3d-lbl { position: absolute; left: 0; top: 0; padding: 6px 10px; border: 1px solid var(--line-d); border-radius: var(--r); background: rgba(14, 22, 17, .88); white-space: nowrap; opacity: 0; transition: opacity .35s, border-color .2s, background .2s; }
.e3d-lbl b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.e3d-lbl span { display: block; font: 11px var(--mono); color: var(--on-gr2); }
.e3d-lbl.focus { border-color: var(--sig); }
.e3d-lbl.focus b { color: var(--sig); }
.e3d-lbl.on { border-color: var(--on-gr); background: var(--gr3); }
.e3d-lbl.is-core { background: var(--sig); border-color: var(--sig); color: var(--ink); }
.e3d-lbl.is-core span { color: var(--ink); }
.e3d-core { position: absolute; left: 16px; top: 12px; margin: 0; font: 12px var(--mono); color: var(--on-gr2); pointer-events: none; }
.e3d-core b { font: 600 13px var(--sans); color: var(--sig); margin-right: 6px; }
.e3d-hint { position: absolute; left: 16px; bottom: 12px; font: 12px var(--mono); color: var(--on-gr2); pointer-events: none; }
@media (max-width: 700px) { .e3d-lbl { padding: 4px 7px; } .e3d-lbl b { font-size: 12px; } .e3d-lbl span { display: none; } .e3d-lbl.is-core span { display: block; } }

/* ---------- de Engine als opening ---------- */
.zoom { padding-top: 0; }
.zoom-left { position: relative; display: grid; align-content: center; }
.zoom-intro h1 { font-size: clamp(44px, 5.1vw, 76px); line-height: .95; letter-spacing: -.04em; font-weight: 600; }
.zoom-intro h1 em { font-style: normal; color: var(--sig); }
.zoom-intro .lead { font-size: clamp(17px, 1.3vw, 19px); color: var(--on-gr2); margin-top: 22px; max-width: 32em; }
.zoom-intro .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 30px; }
.zoom-intro .stack { margin-top: 34px; }
.zoom-title { font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin-bottom: 14px; }
.z-on .zoom-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); }
.z-on .zoom-box { aspect-ratio: auto; height: calc(100vh - 64px - 48px); max-height: none; }
.z-on .zoom-left > * { grid-area: 1 / 1; }
.z-on .zoom-intro { opacity: var(--intro, 1); transform: translateY(calc((1 - var(--intro, 1)) * -24px)); pointer-events: auto; }
.z-on .zoom-hud { opacity: calc(1 - var(--intro, 1)); align-self: center; }
.z-on[style*="--intro: 1"] .zoom-hud { pointer-events: none; }
.tryrun .run { max-width: 980px; }
.zoom-hud .zoom-levels { margin-top: 0; }
@media (max-width: 980px) {
  .z-on .zoom-stage { grid-template-columns: 1fr; }
  .z-on .zoom-left { order: 2; }
}
@media (max-width: 700px) {
  /* telefoon: de kop ligt over de bovenkant van de machine, de HUD eronder */
  .z-on .zoom-stage { grid-template-columns: 1fr; padding-top: 0; }
  .z-on .zoom-box { height: calc(100svh - 64px - 132px); }
  .z-on .zoom-left { order: 0; display: contents; }
  .z-on .zoom-intro { grid-area: 1 / 1; z-index: 2; align-self: start; padding: 18px 16px 0; pointer-events: none; }
  .z-on .zoom-intro .acts, .z-on .zoom-intro a { pointer-events: auto; }
  .z-on .zoom-intro { min-width: 0; }
  .z-on .zoom-intro h1 { font-size: clamp(26px, 8vw, 34px); overflow-wrap: anywhere; }
  .z-on .zoom-intro .lead { font-size: 15.5px; margin-top: 12px; }
  .z-on .zoom-intro .acts { margin-top: 16px; }
  .z-on .zoom-intro .stack { display: none; }
  .z-on .zoom-box { grid-area: 1 / 1; }
  .z-on .zoom-hud { grid-area: 2 / 1; }
}
/* z-on staat al in de HTML (geen verspringing bij het laden); tot engine.js de lagen stuurt is alleen laag 0 zichtbaar */
.z-on .zoom-track { height: 400vh; }
.z-on .zl:not([data-l="0"]) { opacity: 0; visibility: hidden; }
@media (max-width: 700px) { .z-on .zoom-track { height: 360vh; } }
@media (prefers-reduced-motion: reduce) { .z-on .zoom-track { height: auto; } .z-on .zl:not([data-l="0"]) { opacity: 1; visibility: visible; } }
@media (max-width: 700px) { .e3d-core { display: none; } }
@media (max-width: 700px) { .e3d-hint { display: none; } }

/* ---------- ritme: elke sectie een eigen opbouw ---------- */
.side-head h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; }
.side-head p { color: var(--ink2); font-size: 17.5px; margin-top: 16px; max-width: 30em; }
.dark .side-head p { color: var(--on-gr2); }
.side-head.sticky { position: sticky; top: 104px; align-self: start; }
/* 'wat er verandert': één grote uitspraak over de hele breedte */
#verschil .sec-head { grid-template-columns: 1fr; gap: 18px; }
#verschil .sec-head h2 { font-size: clamp(56px, 9vw, 140px); line-height: .9; letter-spacing: -.05em; font-weight: 600; }
#verschil .sec-head p { font-size: 20px; }
/* systemen: kop en tekst onder elkaar, smal */
#systemen .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
#systemen .sec-head p { padding-top: 10px; }
/* rekenhulp: geen kaart, de uitkomst groot over de volle breedte */
#rekenhulp .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
#rekenhulp .result { background: none; border: 0; padding: 0; }
#rekenhulp .result .row { display: grid; grid-template-columns: 1fr; }
#rekenhulp .result .big { font-size: clamp(64px, 9vw, 148px); letter-spacing: -.05em; line-height: .9; }
#rekenhulp .result .row + .row { border-top: 1px solid var(--ink); }
/* aanpak: kop zit links boven het artefact */
.arts { margin-top: 32px; }
.appr .side-head p { color: var(--ink2); }
/* storingssimulator: kop links boven de scenario's */
.sim-side .side-head { margin-bottom: 28px; }
#veiligheid { padding-top: clamp(72px, 9vw, 128px); }
/* FAQ: kop links, vragen rechts */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px 64px; }
.faq-grid .faq { max-width: none; }
@media (max-width: 900px) {
  #systemen .sec-head, #rekenhulp .calc, .faq-grid { grid-template-columns: 1fr; }
  .side-head.sticky { position: static; }
  .arts { display: none; }
}

/* ---------- v3: schermvullende opening, Mikofy-letter, groot woordmerk ---------- */
:root { --display: 'Unbounded', 'Host Grotesk', system-ui, sans-serif; }
.zoom-intro h1, .side-head h2, .sec-head h2, .scan h2, .zoom-title, .case h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; }
.zoom-intro h1 { font-size: clamp(38px, 4.3vw, 66px); line-height: 1.02; }
.side-head h2, .sec-head h2 { font-size: clamp(28px, 3vw, 46px); line-height: 1.08; }
.scan h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; }
.case h3 { font-size: clamp(22px, 2.2vw, 32px); }
.zoom-title { font-size: 18px; }
/* de opening: geen kader, de machine vult het hele beeld; de kop ligt er links overheen */
@media (min-width: 981px) {
  .z-on .zoom-stage { position: sticky; top: 64px; max-width: none; height: calc(100vh - 64px); min-height: 0; padding: 0; display: block; }
  .z-on .zoom-box { position: absolute; inset: 0; height: auto; border: 0; border-radius: 0; background: radial-gradient(circle, rgba(234, 240, 230, .06) 1px, transparent 1.2px) 0 0 / 26px 26px, #0A110C; }
  .z-on .zoom-left { position: absolute; z-index: 3; left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); top: 0; bottom: 0; width: min(480px, 36vw); pointer-events: none; }
  .z-on .zoom-left a, .z-on .zoom-left button, .z-on .zoom-levels li { pointer-events: auto; }
  .z-on .zl[data-l="0"] { inset: 0; }
  /* de 2D-lagen (proces, factuur, data) krijgen rechts een eigen kader */
  .z-on .zl:not([data-l="0"]) { width: auto; height: auto; inset: 7% max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) 7% calc(max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))) + min(560px, 43vw)); border: 1px solid var(--line-d); border-radius: var(--r); background: #0C140F; }
  .e3d-core { left: auto; right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); top: 22px; }
  .e3d-hint { left: auto; right: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); bottom: 22px; }
}
.foot-mark { display: flex; align-items: flex-end; gap: clamp(12px, 2vw, 28px); padding-top: clamp(40px, 6vw, 72px); padding-bottom: 8px; }
.foot-mark img { width: min(68vw, 880px); height: auto; }
.foot-mark span { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 6.4vw, 92px); letter-spacing: -.03em; color: var(--sig); line-height: 1; padding-bottom: 1.5%; }
.it.faq-grid { margin-top: clamp(64px, 8vw, 104px); }
.dark .faq { border-top-color: var(--on-gr); }
.dark .faq details { border-bottom-color: var(--line-d); }
.dark .faq details p { color: var(--on-gr2); }