/* Concept "De polderweg", v2: mensen op de weg.
   Road-marking yellow blijft het enige accent, hectometerpaal-groen markeert tijd en afstand.
   Nieuw: mensen in elk beeld, een live voorbeeld per team (persoon + wat er op het scherm gebeurt),
   en een dagprogramma waarin je de dag in foto's doorloopt. */
:root{
  --bg:#E9EDEA; --surface:#F7F8F5; --ink:#16232A; --muted:#56656B; --line:#CBD3CF;
  --polder:#2F5236; --mark:#EFA83A; --mark-ink:#16232A; --photo-ink:#F7F8F5;
  --screen:#FFFFFF; --screen-in:#EEF1EE;
  --f-display:"Anybody","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --max:1200px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F171B; --surface:#152126; --ink:#E5EBE8; --muted:#9AA9AE; --line:#26353B;
  --polder:#3F7049; --screen:#1B2A30; --screen-in:#22343B; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F171B; --surface:#152126; --ink:#E5EBE8; --muted:#9AA9AE; --line:#26353B;
  --polder:#3F7049; --screen:#1B2A30; --screen-in:#22343B; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance; font-variation-settings:"wdth" 100}
h2{font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.02; font-weight:800; font-variation-settings:"wdth" 88; letter-spacing:-0.015em}
h3{font-size:1.35rem; line-height:1.15; font-weight:700; font-variation-settings:"wdth" 95}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--mark); outline-offset:3px; border-radius:4px}
.intro{color:var(--muted); font-size:1.15rem; max-width:56ch}
figure{margin:0}

/* header */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:31; background:var(--bg)}
header.top .wrap{display:flex; align-items:center; gap:14px; padding-block:12px}
.chip{font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--mark); color:var(--mark-ink)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:1.5rem; font-variation-settings:"wdth" 120; letter-spacing:-0.02em}
.brand-mark{width:34px; height:20px; flex:none}
.top-right{margin-left:auto; display:flex; align-items:center; gap:18px}
.top-phone{font-size:.95rem; color:var(--muted); font-variant-numeric:tabular-nums}
.top-phone b{color:var(--ink); font-weight:600}

/* buttons */
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 24px; border-radius:6px; font-weight:700; font-size:1rem; text-decoration:none; border:2px solid transparent; cursor:pointer; font-family:var(--f-body); line-height:1.2; transition:background-color .15s ease, border-color .15s ease, color .15s ease}
.btn-mark{background:var(--mark); color:var(--mark-ink)}
.btn-mark:hover{background:color-mix(in srgb, var(--mark) 85%, #fff)}
.btn-line{border-color:currentColor; color:inherit; background:transparent}
.btn-line:hover{background:color-mix(in srgb, currentColor 10%, transparent)}
.btn-sm{padding:10px 16px; font-size:.92rem}

/* ============ HERO: het team aan tafel, je schuift aan ============ */
.hero{position:relative; height:160svh; background:#0E161A}
.hero-stage{position:sticky; top:var(--hdr,64px); height:calc(100svh - var(--hdr,64px)); min-height:540px; overflow:hidden}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 40%; transform-origin:62% 45%; transform:scale(calc(1.02 + var(--p,0) * .16)); will-change:transform}
.hero-shade{position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(14,22,26,.78) 0%, rgba(14,22,26,.45) 38%, rgba(14,22,26,0) 66%),
  linear-gradient(180deg, rgba(14,22,26,0) 45%, rgba(14,22,26,.8) 100%)}
.hero-copy{position:absolute; left:0; right:0; bottom:0; color:var(--photo-ink)}
.hero-copy .wrap{padding-block:0 clamp(32px, 7vh, 80px); display:grid; gap:clamp(16px, 2.6vh, 26px)}
.hero h1{font-size:clamp(2.3rem, 6vw, 5.4rem); line-height:.96; font-weight:850; letter-spacing:-0.02em; max-width:13ch;
  font-variation-settings:"wdth" calc(78 + var(--p,0) * var(--wmax,40)); color:var(--photo-ink)}
.hero-sub{font-size:clamp(1.1rem, 1.6vw, 1.35rem); max-width:40ch; color:color-mix(in srgb, var(--photo-ink) 88%, transparent)}
.hero .btn-line{color:var(--photo-ink)}
.hero-road{position:absolute; left:0; right:0; bottom:0; height:5px; background:repeating-linear-gradient(90deg, var(--mark) 0 34px, transparent 34px 56px); transform-origin:0 50%; transform:scaleX(var(--p,0))}

/* ============ sections ============ */
.sec{padding-block:clamp(72px, 10vw, 128px)}
/* herkenning */
.recog{background:var(--surface); border-bottom:1px solid var(--line)}
.thoughts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.thoughts li{background:var(--bg); border-radius:4px; padding:22px 22px 24px; border-left:4px solid var(--mark); font-size:1.08rem; line-height:1.45; font-weight:500}
.recog-close{margin-top:clamp(32px, 4vw, 48px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px}
.recog-close p{font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:700; line-height:1.3; max-width:46ch}
@media (max-width:900px){.thoughts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.thoughts{grid-template-columns:1fr}}
.sec-head{display:grid; gap:18px; margin-bottom:clamp(36px, 5vw, 56px); max-width:780px}

/* why */
.why-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px, 6vw, 88px); align-items:stretch}
.why-photo{position:relative; border-radius:4px; overflow:hidden; min-height:440px}
.why-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:35% 50%}
.why-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:48px 18px 16px; color:var(--photo-ink); font-size:.92rem; background:linear-gradient(180deg, transparent, rgba(14,22,26,.75))}
.reasons{display:grid; margin-top:32px}
.reason{display:grid; grid-template-columns:auto 1fr; gap:6px 20px; padding:22px 0; border-top:1px solid var(--line)}
.reason:last-child{border-bottom:1px solid var(--line)}
.reason svg{width:28px; height:28px; color:var(--polder); grid-row:span 2; margin-top:2px}
.reason p{color:var(--muted)}

/* ============ kansenscan met live voorbeeld ============ */
.scan{background:var(--surface); border-block:1px solid var(--line)}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.tab{font:inherit; font-weight:600; font-size:1rem; padding:11px 18px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; transition:background-color .15s, border-color .15s, color .15s}
.tab:hover{border-color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.scan-panel{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 4vw, 56px); align-items:start}
.scan-media{position:relative; border-radius:4px; overflow:hidden; aspect-ratio:4/3; width:100%; min-width:0; background:var(--line)}
.scan-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .5s ease, transform .9s ease}
.scan-media img.on{opacity:1; transform:scale(1)}
.scan-media figcaption{position:absolute; left:0; right:0; bottom:0; padding:44px 18px 14px; color:var(--photo-ink); font-size:.92rem; background:linear-gradient(180deg, transparent, rgba(14,22,26,.72)); z-index:1}
.scan-body{display:flex; flex-direction:column; gap:18px; min-width:0}
.scan-body h3{font-size:clamp(1.6rem, 2.6vw, 2.2rem); font-weight:800; font-variation-settings:"wdth" 90}

/* het "scherm" van de medewerker */
.demo{background:var(--screen); border:1px solid var(--line); border-radius:10px; box-shadow:0 24px 48px -32px rgba(14,22,26,.45); overflow:hidden}
.demo-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--muted)}
.demo-bar i{width:9px; height:9px; border-radius:50%; background:var(--line); display:block}
.demo-bar span{margin-left:6px}
.demo-bar .tag{margin-left:auto}
.tag{font-size:.75rem; font-weight:700; line-height:1.2; padding:3px 9px; border-radius:999px; background:color-mix(in srgb, var(--polder) 14%, transparent); color:var(--polder); white-space:nowrap}
.ex-list{display:flex; flex-wrap:wrap; gap:8px}
.ex{font:inherit; font-size:.93rem; font-weight:600; padding:8px 12px; border-radius:6px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; gap:10px; align-items:center; transition:border-color .15s, background-color .15s}
.ex:hover{border-color:var(--ink)}
.ex[aria-pressed="true"]{border-color:var(--ink); background:var(--screen); box-shadow:inset 3px 0 0 var(--mark)}
.tools-head{display:grid; gap:8px; margin-top:clamp(48px, 6vw, 72px); max-width:62ch}
.tools-head p{color:var(--muted)}
.tools{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 32px; margin-top:20px}
.tool{font:inherit; color:inherit; text-align:left; background:none; border:0; border-top:3px solid var(--line); padding:16px 0 22px; display:grid; gap:4px; align-content:start; cursor:pointer; transition:border-color .2s, opacity .2s}
.tool b{font-size:1.05rem}
.tool span{color:var(--muted); font-size:.96rem}
.tool small{font-size:.85rem; font-weight:600; color:var(--polder); margin-top:4px}
.tool.used{border-top-color:var(--mark)}
.tool.base{cursor:default; border-top-color:var(--ink)}
.tool:not(.base):hover b{text-decoration:underline; text-decoration-color:var(--mark); text-decoration-thickness:3px; text-underline-offset:4px}
.tool.lit{border-top-color:var(--polder)}
.demo-body{padding:16px; display:grid; gap:12px}
.demo-lbl{font-size:.85rem; font-weight:700; color:var(--muted)}
.demo-in{background:var(--screen-in); border-radius:6px; padding:12px 14px; font-size:.95rem; line-height:1.5}
.demo-go{justify-self:start}
.demo-go[disabled]{opacity:.55; cursor:default}
.demo-out{min-height:9.5em; border:1.5px dashed var(--line); border-radius:6px; padding:12px 14px; font-size:.95rem; line-height:1.5; white-space:pre-line; position:relative}
.demo-out.live{border-style:solid; border-color:var(--polder)}
.demo-out .empty{color:var(--muted)}
.caret{display:inline-block; width:2px; height:1.05em; background:var(--ink); vertical-align:-2px; margin-left:1px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.demo-check{display:flex; gap:10px; align-items:center; font-size:.9rem; color:var(--polder); font-weight:600; opacity:0; transition:opacity .3s ease}
.demo-check.on{opacity:1}
.demo-check svg{width:18px; height:18px; flex:none}

.uses{list-style:none; margin:clamp(32px, 4vw, 48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:28px}
.uses li{padding-top:16px; border-top:3px solid var(--mark); display:grid; gap:4px}
.uses b{font-weight:700}
.uses span{color:var(--muted); font-size:.98rem}
.scan-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:28px}
.scan-note{font-size:.9rem; color:var(--muted)}
.fade{animation:fade .4s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ============ v3: rijkere voorbeelden ============ */
.goals{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px}
.goals-lbl{font-weight:700; margin-right:6px}
.goal{font:inherit; font-size:.95rem; font-weight:600; padding:9px 14px; border-radius:6px; border:0; background:var(--bg); color:var(--ink); cursor:pointer; box-shadow:inset 0 -3px 0 var(--mark); transition:background-color .15s}
.goal:hover{background:color-mix(in srgb, var(--mark) 30%, var(--bg))}
.goal small{font-weight:500; color:var(--muted); margin-left:4px}
.goal.on{background:var(--mark); color:var(--mark-ink)}
.goal.on small{color:var(--mark-ink)}
.demo-doel{font-size:.88rem; color:var(--muted); margin:0}
.demo-doel b{color:var(--ink)}
.stage{display:grid; gap:12px; min-height:360px; align-content:start}
.demo-out.doc{white-space:pre-line}
.demo-go + .skip{font:inherit; font-size:.85rem; background:none; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; justify-self:start; padding:0}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* skill-kaart */
.skillcard{border:1.5px solid var(--line); border-radius:8px; padding:14px 16px; display:grid; gap:8px; background:var(--screen-in)}
.sk-head{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline}
.sk-head b{font-family:var(--f-display); font-size:1.1rem; font-variation-settings:"wdth" 90}
.sk-head span, .sk-meta{font-size:.84rem; color:var(--muted)}
.skillcard ol{margin:0; padding-left:20px; font-size:.93rem; display:grid; gap:3px}

/* agent-stappen */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.steps li{display:grid; grid-template-columns:22px 1fr; gap:10px; padding:7px 0; font-size:.94rem; opacity:.35; transition:opacity .3s}
.steps li.run, .steps li.done{opacity:1}
.steps li small{display:block; color:var(--muted); font-size:.8rem}
.ic{width:18px; height:18px; border-radius:50%; border:2px solid var(--line); margin-top:3px; position:relative}
.run .ic{border-color:var(--polder); border-top-color:transparent; animation:spin .8s linear infinite}
.done .ic{border-color:var(--polder); background:var(--polder)}
.done .ic::after{content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.approve{border:2px solid var(--mark); border-radius:8px; padding:12px 14px; display:grid; gap:10px; background:color-mix(in srgb, var(--mark) 12%, var(--screen))}
.approve b{font-size:.95rem}

/* loop */
.sched{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:8px; background:var(--ink); color:var(--bg)}
.sched svg{width:26px; height:26px; flex:none; color:var(--mark)}
.sched b{display:block}
.sched span{font-size:.84rem; opacity:.75}
.runs{list-style:none; margin:0; padding:0; font-size:.9rem}
.runs li{display:grid; grid-template-columns:132px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--line)}
.runs li span:first-child{color:var(--muted); font-variant-numeric:tabular-nums}
.runs li.new{animation:fade .4s ease}
.runs li.new span:first-child{color:var(--polder); font-weight:700}

/* spraak */
.player{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 14px; border-radius:8px; background:var(--screen-in)}
.pbtn{width:44px; height:44px; border-radius:50%; border:0; background:var(--mark); color:var(--mark-ink); cursor:pointer; display:grid; place-items:center}
.pbtn svg{width:18px; height:18px}
.wave{display:flex; align-items:center; gap:2px; height:40px}
.wave i{flex:1; background:var(--line); border-radius:2px; min-width:2px; transition:background-color .15s}
.wave i.on{background:var(--polder)}
.ptime{font-size:.84rem; color:var(--muted); font-variant-numeric:tabular-nums}
.who{font-size:.86rem; color:var(--muted)}
.transcript{font-size:.93rem; line-height:1.5; color:var(--ink); min-height:3em}
.transcript span{opacity:.18; transition:opacity .25s}
.transcript span.on{opacity:1}

/* interview */
.qa{display:grid; gap:8px; font-size:.93rem}
.qa p{padding:8px 12px; border-radius:8px; max-width:88%; animation:fade .35s ease}
.qa .q{background:var(--screen-in); justify-self:start}
.qa .a{background:color-mix(in srgb, var(--polder) 14%, var(--screen)); justify-self:end}
.qa p b{display:block; font-size:.78rem; color:var(--muted)}

/* beeld */
.gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.gen{aspect-ratio:1; border-radius:6px; overflow:hidden; background:linear-gradient(110deg, var(--screen-in) 30%, var(--line) 50%, var(--screen-in) 70%); background-size:250% 100%; animation:shimmer 1.3s linear infinite; position:relative}
.gen img{width:100%; height:100%; object-fit:cover; opacity:0; filter:blur(14px); transform:scale(1.06); transition:opacity .6s, filter 1.1s, transform 1.1s}
.gen.ok{animation:none}
.gen.ok img{opacity:1; filter:none; transform:none}
@keyframes shimmer{to{background-position:-150% 0}}

/* video */
.vsteps{display:flex; flex-wrap:wrap; gap:6px}
.vsteps span{font-size:.82rem; padding:4px 10px; border-radius:999px; background:var(--screen-in); color:var(--muted); transition:background-color .2s, color .2s}
.vsteps span.done{background:var(--polder); color:#fff}
.vwrap{position:relative; border-radius:8px; overflow:hidden; background:#0E161A}
.vwrap video{width:100%; display:block; max-height:340px; margin:0 auto}
.vcap{position:absolute; left:12px; right:12px; bottom:14px; text-align:center; pointer-events:none}
.vcap span{display:inline-block; background:rgba(14,22,26,.78); color:#fff; padding:5px 12px; border-radius:4px; font-weight:600; font-size:.95rem}
.vcap span:empty{display:none}

/* artifact-venster */
.art{border:1.5px solid var(--polder); border-radius:8px; overflow:hidden; animation:fade .4s ease}
.art-bar{display:flex; justify-content:space-between; gap:10px; padding:8px 12px; background:color-mix(in srgb, var(--polder) 12%, var(--screen)); font-size:.82rem; font-weight:600; color:var(--polder)}
.art-body{padding:14px; display:grid; gap:12px}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{font:inherit; font-size:.85rem; font-weight:600; padding:6px 11px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.kpis{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px}
.kpi{background:var(--screen-in); border-radius:6px; padding:8px 10px}
.kpi b{display:block; font-family:var(--f-display); font-size:1.35rem; font-variation-settings:"wdth" 85; font-variant-numeric:tabular-nums}
.kpi span{font-size:.78rem; color:var(--muted)}
.bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; align-items:end; height:120px; position:relative}
.bar{display:grid; gap:4px; justify-items:center; align-self:end; font-size:.72rem; color:var(--muted)}
.bar i{display:block; width:100%; background:var(--polder); border-radius:3px 3px 0 0; transition:height .45s ease}
.bar.warn i{background:var(--mark)}
.bar b{font-weight:600; color:var(--ink); font-size:.72rem; font-variant-numeric:tabular-nums}
.buffer{position:absolute; left:0; right:0; border-top:2px dashed var(--mark); pointer-events:none}
.buffer span{position:absolute; right:0; top:-18px; font-size:.72rem; color:var(--muted); background:var(--screen); padding:0 4px}
.slider{display:grid; gap:4px}
.slider label{font-size:.88rem; font-weight:600; display:flex; justify-content:space-between; gap:10px}
.slider input{width:100%; accent-color:var(--polder)}
.big{font-family:var(--f-display); font-weight:800; font-size:1.7rem; line-height:1.1; font-variation-settings:"wdth" 85; font-variant-numeric:tabular-nums}
.toggle{display:flex; gap:8px; align-items:center; font-size:.9rem; cursor:pointer}
.toggle input{accent-color:var(--polder); width:18px; height:18px}
.clist{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.clist label{display:flex; gap:10px; align-items:flex-start; padding:7px 0; cursor:pointer; font-size:.95rem; border-bottom:1px solid var(--line)}
.clist input{accent-color:var(--polder); width:18px; height:18px; margin-top:3px; flex:none}
.clist input:checked + span{text-decoration:line-through; color:var(--muted)}
.prog{height:8px; border-radius:4px; background:var(--screen-in); overflow:hidden}
.prog i{display:block; height:100%; width:0; background:var(--polder); transition:width .3s}

/* procesdiagram */
.flow{display:grid; gap:0; padding:4px 0}
.fl{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,.9fr); align-items:center; gap:8px; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s}
.fl.on{opacity:1; transform:none}
.fl-box{padding:9px 12px; border-radius:6px; background:var(--screen-in); font-size:.92rem; font-weight:600; position:relative}
.fl.dec .fl-box{background:color-mix(in srgb, var(--mark) 22%, var(--screen)); border-left:4px solid var(--mark)}
.fl-arrow{font-size:.78rem; color:var(--muted); white-space:nowrap}
.fl-side{padding:8px 10px; border-radius:6px; border:1.5px dashed var(--polder); font-size:.86rem}
.fl-down{height:16px; margin-left:22px; border-left:2px solid var(--line)}
.fl-down small{display:block; padding-left:8px; font-size:.75rem; color:var(--muted); line-height:16px}

@media (max-width: 960px){
  .stage{min-height:0}
}
@media (max-width: 520px){
  .fl{grid-template-columns:1fr}
  .fl-arrow{padding-left:10px}
  .kpis{grid-template-columns:1fr 1fr}
}


/* website-skill, eigen software, analyse */
.browser{border:1.5px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; color:#1d2a24}
.br-bar{display:flex; align-items:center; gap:6px; padding:7px 10px; background:var(--screen-in); border-bottom:1px solid var(--line); font-size:.8rem; color:var(--muted)}
.br-bar i{width:8px; height:8px; border-radius:50%; background:var(--line); display:block}
.br-url{margin-left:6px; flex:1; background:var(--screen); border-radius:4px; padding:2px 8px}
.br-state{font-size:.72rem; padding:2px 8px; border-radius:999px; background:var(--line); color:var(--ink)}
.br-state.prev{background:var(--mark); color:var(--mark-ink)}
.br-state.live{background:var(--polder); color:#fff}
.br-page{padding:10px 12px 14px; display:grid; gap:10px; font-size:.8rem}
.br-nav{display:flex; gap:12px; align-items:baseline; color:#56656b}
.br-nav b{color:#3b2a1e; font-size:.95rem; margin-right:auto}
.br-new{display:grid; grid-template-columns:84px 1fr; gap:10px; align-items:center; background:#3b2a1e; color:#f5ede3; border-radius:6px; overflow:hidden; animation:fade .5s ease}
.br-new img{width:84px; height:84px; object-fit:cover}
.br-new div{display:grid; gap:2px; padding:8px 8px 8px 0}
.br-new b{font-size:.95rem}
.br-new em{font-style:normal; font-weight:700; justify-self:start; margin-top:4px; padding:3px 9px; border-radius:4px; background:#e8b04a; color:#3b2a1e}
.br-new.green em{background:#6f9a62; color:#fff}
.br-hero{display:grid; gap:2px; padding:14px 12px; border-radius:6px; background:#efe6da}
.br-hero b{font-size:1rem; color:#3b2a1e}
.br-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.br-grid i{height:34px; border-radius:4px; background:#efe6da}
.roster{display:grid; grid-template-columns:62px repeat(5,1fr); gap:3px; font-size:.75rem; align-items:center}
.roster b{text-align:center; color:var(--muted); font-weight:600}
.roster i{font-style:normal; text-align:center; padding:4px 0; border-radius:3px; background:var(--screen-in); color:var(--muted)}
.roster i.s1{background:color-mix(in srgb, var(--polder) 22%, var(--screen)); color:var(--ink)}
.roster i.s2{background:color-mix(in srgb, var(--mark) 45%, var(--screen)); color:var(--ink)}
.kpi.save{background:var(--polder); color:#fff}
.kpi.save span{color:rgba(255,255,255,.8)}
.conn{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; padding:10px 12px; border-radius:8px; background:color-mix(in srgb, var(--polder) 12%, var(--screen))}
.conn .dot{width:10px; height:10px; border-radius:50%; background:#3FA35B; margin-top:5px; flex:none; box-shadow:0 0 0 3px color-mix(in srgb, #3FA35B 25%, transparent)}
.qchips{display:grid; gap:6px}
.qchips button{font:inherit; font-size:.93rem; text-align:left; padding:9px 12px; border-radius:6px; border:1.5px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}
.qchips button:hover{border-color:var(--ink)}
.qchips button[aria-pressed="true"]{border-color:var(--ink); background:var(--screen); box-shadow:inset 3px 0 0 var(--mark)}
.ana{display:grid; gap:10px}
.ana-res{display:grid; gap:10px}
.hbars{display:grid; gap:6px}
.hb{display:grid; grid-template-columns:minmax(0,1.3fr) 1fr auto; gap:10px; align-items:center; font-size:.85rem}
.hb i{height:12px; border-radius:3px; background:var(--screen-in); overflow:hidden}
.hb u{display:block; height:100%; background:var(--polder); transition:width .6s ease}
.hb b{font-variant-numeric:tabular-nums; min-width:4.5em; text-align:right}
@media (max-width:520px){ .roster{grid-template-columns:48px repeat(5,1fr)} .br-nav span{display:none} }
/* hero zonder scrolleffect */
.hero{height:auto}
.hero-stage{position:relative; top:auto; height:calc(100svh - var(--hdr,64px)); max-height:860px}
.hero-img{transform:none; will-change:auto}
.hero h1{font-variation-settings:"wdth" 84}
.hero-road{transform:none}
@media (max-width:720px){ .hero{height:auto} .hero-stage{height:calc(92svh - var(--hdr,64px))} }

/* logo */
.brand{gap:10px; font-family:"Outfit", var(--f-body); font-weight:700; font-size:1.45rem; letter-spacing:-0.01em; font-variation-settings:normal}
.brand-mark{width:38px; height:30px; flex:none}

/* ============ AI First Day ============ */
.day-top{display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; margin-bottom:48px}
.price-tag{display:grid; justify-items:end; gap:2px; text-align:right}
.price-tag .amt{font-family:var(--f-display); font-size:clamp(2.4rem, 5vw, 4rem); font-weight:850; line-height:1; font-variation-settings:"wdth" 75; font-variant-numeric:tabular-nums}
.price-tag small{color:var(--muted); font-size:.9rem}

.road{position:relative; display:grid; grid-template-columns:repeat(5, 1fr); margin-bottom:28px}
.road::before{content:""; position:absolute; left:0; right:0; top:27px; height:4px; background:repeating-linear-gradient(90deg, var(--mark) 0 26px, transparent 26px 44px)}
.road-progress{position:absolute; left:0; top:27px; height:4px; width:var(--rp,0%); background:var(--mark); border-radius:2px; transition:width .45s ease}
.stop{position:relative; font:inherit; color:inherit; background:none; border:0; padding:0 8px 0 0; text-align:left; cursor:pointer; display:grid; gap:12px; justify-items:start}
.hm{display:inline-grid; place-items:center; min-width:62px; height:58px; padding:0 10px; background:var(--polder); color:#fff; border-radius:3px; font-weight:700; font-size:1rem; font-variant-numeric:tabular-nums; box-shadow:0 0 0 4px var(--bg); transition:transform .2s ease, background-color .2s ease}
.stop .lbl{font-weight:700; font-size:1.02rem}
.stop[aria-selected="true"] .hm{background:var(--mark); color:var(--mark-ink); transform:translateY(-4px)}
.stop:hover .hm{transform:translateY(-4px)}
.stop-detail{display:grid; grid-template-columns:1fr 1.15fr; background:var(--surface); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.stop-detail .txt{padding:clamp(24px, 4vw, 44px); display:grid; gap:14px; align-content:center; min-width:0}
.stop-detail .when{color:var(--polder); font-weight:700}
.stop-detail .txt p{color:var(--muted); font-size:1.05rem; max-width:48ch}
.stop-nav{display:flex; gap:10px; margin-top:10px}
.stop-photo{position:relative; min-height:340px; overflow:hidden; background:var(--line)}
.stop-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease}
.stop-photo img.on{opacity:1}
.stop-photo .bigtime{position:absolute; left:0; right:0; bottom:0; padding:60px 22px 16px; background:linear-gradient(180deg, transparent, rgba(14,22,26,.7)); color:var(--photo-ink); font-family:var(--f-display); font-weight:850; font-size:clamp(3rem, 7vw, 6rem); line-height:1; font-variation-settings:"wdth" 125; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stop-photo .bigtime.word{font-size:clamp(2.4rem, 5vw, 4.2rem); font-variation-settings:"wdth" 100}

.gets{display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; margin-top:56px}
.get{display:grid; gap:8px; align-content:start; padding-top:18px; border-top:3px solid var(--ink)}
.get p{color:var(--muted); font-size:.98rem}

.ladder{margin-top:72px; display:grid; gap:24px}
.ladder-row{display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.rung{padding:26px 26px 28px; display:grid; gap:8px; align-content:start; background:var(--surface); border-right:1px solid var(--line)}
.rung:last-child{border-right:0}
.rung .stage{display:block; min-height:0; font-weight:700; color:var(--polder); font-size:.95rem}
.rung p{color:var(--muted); font-size:.98rem}
.rung.first{background:var(--ink); color:var(--bg)}
.rung.first .stage{color:var(--mark)}
.rung.first p{color:color-mix(in srgb, var(--bg) 75%, var(--ink))}

/* ============ case: echte mensen, groot ============ */
.case{background:var(--ink); color:var(--bg)}
.case .intro{color:color-mix(in srgb, var(--bg) 72%, var(--ink))}
.case-hero{position:relative; margin:0 0 clamp(40px, 6vw, 72px); border-radius:4px; overflow:hidden}
.case-hero img{width:100%; aspect-ratio:21/9; object-fit:cover; object-position:50% 45%}
.case-hero blockquote{margin:0; padding:clamp(20px, 3vw, 32px) 0 0; display:grid; grid-template-columns:1.2fr 1fr; gap:12px 48px; align-items:end; color:var(--bg)}
.case-quote{font-family:var(--f-display); font-weight:700; font-size:clamp(1.6rem, 3vw, 2.6rem); line-height:1.06; font-variation-settings:"wdth" 82; letter-spacing:-0.01em; max-width:22ch}
.case-hero cite{display:block; font-style:normal; font-size:.95rem; opacity:.75; max-width:44ch}
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 80px); align-items:start}
.path{list-style:none; margin:0; padding:0; counter-reset:p; position:relative; min-width:0}
.path::before{content:""; position:absolute; left:17px; top:10px; bottom:10px; width:3px; background:repeating-linear-gradient(180deg, var(--mark) 0 14px, transparent 14px 24px)}
.path li{position:relative; display:grid; grid-template-columns:38px 1fr; gap:18px; padding:0 0 26px; counter-increment:p}
.path li::before{content:counter(p); display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ink); border:2px solid var(--mark); color:var(--mark); font-weight:700; font-size:.95rem; position:relative; z-index:1}
.path b{display:block; font-size:1.1rem; padding-top:5px}
.path span{color:color-mix(in srgb, var(--bg) 68%, var(--ink)); font-size:.98rem}
.case-side{display:grid; gap:18px; min-width:0}
.case-side p{color:color-mix(in srgb, var(--bg) 72%, var(--ink))}
.case-side strong{color:var(--bg)}
.case-grid > *, .faq-grid > *, .why-grid > *, .scan-panel > *{min-width:0}

/* ============ faq ============ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px, 6vw, 80px); align-items:start}
details{border-top:1px solid var(--line); padding:20px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer; font-weight:700; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform .2s ease, background-color .2s}
summary .pm svg{width:12px; height:12px}
details[open] summary .pm{transform:rotate(45deg); background:var(--mark); border-color:var(--mark); color:var(--mark-ink)}
details p{margin-top:12px; color:var(--muted); max-width:62ch}

/* ============ closing ============ */
.closing{position:relative; color:var(--photo-ink); overflow:hidden; background:#0E161A}
.closing > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85}
.closing .shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,22,26,.9) 0%, rgba(14,22,26,.7) 45%, rgba(14,22,26,.25) 100%)}
.closing .wrap{position:relative; padding-block:clamp(88px, 12vw, 160px)}
.closing-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px, 6vw, 80px); align-items:center}
.closing-main{display:grid; gap:24px; min-width:0}
.founder{background:var(--surface); color:var(--ink); border-radius:4px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.founder img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:60% 30%}
.founder figcaption{padding:18px 22px 22px; color:var(--muted); font-size:.98rem}
.founder figcaption b{display:block; color:var(--ink); font-size:1.1rem}
.closing h2{color:var(--photo-ink); max-width:16ch}
.closing p{color:color-mix(in srgb, var(--photo-ink) 82%, transparent); font-size:1.15rem; max-width:44ch}
.closing .btn-line{color:var(--photo-ink)}
.contact-lines{display:grid; gap:10px; margin-top:10px; font-size:1rem}
.contact-lines div{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.contact-lines .k{min-width:84px; opacity:.7}
.copy{font:inherit; font-size:.8rem; background:transparent; color:inherit; border:1px solid currentColor; border-radius:999px; padding:3px 11px; cursor:pointer; opacity:.75}
.copy:hover{opacity:1}

.draft-note{width:100%; font-size:.82rem}
footer{padding-block:32px 120px; font-size:.88rem; color:var(--muted)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px}
footer .sep{opacity:.5; margin:0 6px}
.is-ph{border-bottom:1.5px dashed currentColor; opacity:.75}

/* mobile sticky CTA */
.sticky{position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; gap:10px; background:var(--surface); border-top:1px solid var(--line);
  padding:12px max(16px, env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  transform:translateY(110%); transition:transform .3s ease}
.sticky.show{transform:none}
.sticky .btn{flex:1; padding:13px 12px; font-size:.95rem}


/* ============ platformkeuze: we kennen ze allemaal, wij kiezen Claude ============ */
.pick-strip{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; margin-bottom:24px}
.pf{font:inherit; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:8px; padding:14px 8px 12px; display:grid; justify-items:center; gap:8px; cursor:pointer; position:relative; transition:border-color .15s, transform .15s}
.pf:hover{border-color:var(--ink)}
.pf[aria-selected="true"]{border-color:var(--ink); box-shadow:inset 0 -4px 0 var(--ink)}
.pf.ours{border-color:var(--mark)}
.pf.ours[aria-selected="true"]{box-shadow:inset 0 -4px 0 var(--mark)}
.pf .logo{width:52px; height:52px; border-radius:12px; background:#fff; display:grid; place-items:center; padding:8px; box-shadow:0 0 0 1px rgba(22,35,42,.08)}
.pf .logo img{max-width:100%; max-height:100%; object-fit:contain}
.pf b{font-size:.98rem; line-height:1.15}
.pf small{font-size:.78rem; color:var(--muted); line-height:1.2}
.pf .our-chip{position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap}
.pick-panel{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(24px, 4vw, 48px); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:clamp(18px, 3vw, 32px)}
.pick-shots{display:grid; gap:12px; min-width:0}
.shot{margin:0; border-radius:8px; overflow:hidden; background:#fff; border:1px solid var(--line); position:relative}
.shot img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center}
.shot.contain img{object-fit:contain; background:#f3f3f1}
.shot figcaption{font-size:.8rem; color:var(--muted); padding:8px 12px; background:var(--surface); border-top:1px solid var(--line)}
.shot figcaption a{color:var(--muted)}
.thumbs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.thumb{font:inherit; color:var(--ink); text-align:left; display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; padding:6px; border-radius:6px; border:1.5px solid var(--line); background:transparent; cursor:pointer; font-size:.85rem; line-height:1.25}
.thumb img{width:72px; height:45px; object-fit:cover; object-position:top; border-radius:4px; background:#fff}
.thumb:hover{border-color:var(--ink)}
.thumb[aria-pressed="true"]{border-color:var(--ink); box-shadow:inset 3px 0 0 var(--mark)}
.choose-why h3{font-size:1.25rem}
.pick-info{display:grid; gap:14px; min-width:0}
.pick-info h3{font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:800; font-variation-settings:"wdth" 90}
.pick-info .maker{color:var(--muted); font-size:.95rem; margin-top:-8px}
.pick-info ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
.pick-info li{padding:10px 0 10px 26px; border-top:1px solid var(--line); position:relative; font-size:1rem; line-height:1.45}
.pick-info li::before{content:""; position:absolute; left:2px; top:18px; width:12px; height:3px; background:var(--polder)}
.pick-info .best{font-size:.95rem; background:var(--bg); border-radius:6px; padding:12px 14px}
.pick-info .best b{display:block; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:2px}
.pick-info .src{font-size:.82rem; color:var(--muted)}
.choose{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(24px, 4vw, 56px); margin-top:clamp(40px, 5vw, 64px); padding-top:clamp(32px, 4vw, 48px); border-top:3px solid var(--mark)}
.choose h3{font-size:clamp(1.6rem, 2.8vw, 2.4rem); font-weight:800; font-variation-settings:"wdth" 88; line-height:1.05}
.choose-left{display:grid; gap:18px; align-content:start}
.choose-left p{color:var(--muted)}
.partner{display:inline-grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:#fff; color:#16232A; border-radius:10px; padding:14px 18px; border:1.5px solid #16232A; position:relative; max-width:360px}
.partner img{height:18px; width:auto}
.partner span{font-weight:700; font-size:.95rem; line-height:1.2}
.partner span small{display:block; font-weight:500; font-size:.8rem; color:#56656B}
.partner.draft{border-style:dashed}
.partner[hidden]{display:none}
.partner .draft-flag{position:absolute; top:-11px; right:12px; font-size:.7rem; font-weight:800; letter-spacing:.04em; background:#C2410C; color:#fff; padding:3px 8px; border-radius:999px}
.choose-why{list-style:none; margin:0; padding:0; display:grid; gap:0}
.choose-why li{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; padding:18px 0; border-top:1px solid var(--line)}
.choose-why li:last-child{border-bottom:1px solid var(--line)}
.choose-why .n{font-family:var(--f-display); font-weight:800; font-size:1.4rem; color:var(--polder); grid-row:span 2; min-width:1.4em}
.choose-why p{color:var(--muted)}
.pick-note{font-size:.85rem; color:var(--muted); margin-top:18px; max-width:80ch}
@media (max-width: 960px){
  .pick-strip{grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:16px}
  .pick-panel, .choose{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .thumbs{grid-template-columns:1fr}
  .pf .logo{width:44px; height:44px}
}

@media (max-width: 960px){
  .why-grid, .scan-panel, .case-grid, .faq-grid, .stop-detail, .closing-grid{grid-template-columns:1fr}
  .gets{grid-template-columns:1fr 1fr}
  .uses{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr 1fr}
  .ladder-row{grid-template-columns:1fr}
  .rung{border-right:0; border-bottom:1px solid var(--line)}
  .rung:last-child{border-bottom:0}
  .day-top{grid-template-columns:1fr}
  .price-tag{justify-items:start; text-align:left}
  .stop-photo{min-height:0; aspect-ratio:4/3; order:-1}
  .case-hero img{aspect-ratio:4/3}
  .case-hero blockquote{grid-template-columns:1fr}
}
@media (max-width: 720px){
  body{font-size:17px}
  .sticky{display:flex}
  .top-phone{display:none}
  header .btn-sm{display:none}
  .road{grid-template-columns:repeat(5, minmax(76px, 1fr)); overflow-x:auto; padding-bottom:8px; scrollbar-width:none}
  .road::-webkit-scrollbar{display:none}
  .hm{min-width:56px; height:50px; font-size:.92rem}
  .stop .lbl{font-size:.92rem}
  .gets{grid-template-columns:1fr}
  .tools{grid-template-columns:1fr}
  .why-photo{min-height:300px}
  .hero{height:auto}
  .hero-img{object-position:68% 40%}
  .hero-shade{background:linear-gradient(180deg, rgba(14,22,26,.1) 20%, rgba(14,22,26,.85) 72%)}
  .hero h1{font-size:clamp(2.1rem, 10vw, 2.8rem)}
  .hero-sub{font-size:1.05rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .hero-stage{position:relative}
  .hero-img{transform:none}
  .hero-road{transform:none}
  .hero h1{font-variation-settings:"wdth" 92}
  *{transition:none !important; animation:none !important}
}