.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
.lbl{font:500 12px/1.3 var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--font-body);padding:15px 22px;border-radius:var(--radius-m);text-decoration:none;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out)}
.btn-p{background:var(--action-primary);color:#fff}.btn-p:hover{background:var(--action-primary-hover);color:#fff}
.btn-o{border-color:var(--border-strong);color:var(--text-primary)}.btn-o:hover{background:var(--surface-warm);color:var(--text-primary)}
.btn .ar{transition:transform var(--dur-fast) var(--ease-out)}.btn:hover .ar{transform:translateX(4px)}
nav{position:sticky;top:0;z-index:5;background:rgba(250,245,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav ul a,nav .btn{white-space:nowrap}
nav ul a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:15px}nav ul a:hover{color:var(--text-primary)}
.h-display{font:400 clamp(44px,7vw,84px)/1.02 var(--font-display);letter-spacing:var(--tracking-tight);margin:0;text-wrap:balance}
.h2{font:400 clamp(32px,4vw,48px)/1.08 var(--font-display);letter-spacing:-.01em;margin:0;text-wrap:balance}
section{padding:112px 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-m);padding:28px;display:flex;flex-direction:column;gap:12px;color:var(--text-primary);text-decoration:none;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);color:var(--text-primary)}
.step{position:relative;padding-top:24px;border-top:1px solid var(--border-strong)}
.dot{position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--mte-harbor)}
.row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--border-default);font-size:15px;line-height:1.5}
.row>span:last-child{overflow-wrap:break-word;hyphens:auto}
.row .lbl{font-size:11px;line-height:1.6}
.todo{color:var(--text-muted);font-style:italic}
i[data-lucide]{width:20px;height:20px;stroke-width:1.5}
@media (max-width:1080px){nav ul{display:none}}
@media (max-width:820px){section{padding:72px 0}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.tilt{transform-style:preserve-3d;will-change:transform}
.mag{will-change:transform;transition:transform .25s var(--ease-out),background var(--dur-fast)}
.hl{position:relative;display:inline-block}
.hl svg{position:absolute;left:-2%;bottom:-.08em;width:104%;height:.3em;overflow:visible}
.hl path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .5s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.m-track{position:relative;height:1px;background:var(--border-strong);margin-bottom:0}
.m-fill{position:absolute;left:0;top:0;height:1px;background:var(--mte-signal);width:0}
.m-step{padding-top:28px;position:relative;opacity:.45;transition:opacity .4s var(--ease-out)}
.m-step .dot{top:-5px;transition:background .3s,transform .3s var(--ease-out)}
.m-step.on{opacity:1}.m-step.on .dot{background:var(--mte-signal);transform:scale(1.4)}
.m-step.on .lbl{color:var(--text-accent)}
.q-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-m);padding:16px 18px;font:500 16px/1.4 var(--font-body);color:var(--text-primary);cursor:pointer;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.q-opt:hover{border-color:var(--mte-harbor-2);transform:translateX(4px)}
.q-opt.sel{border-color:var(--mte-signal);background:var(--mte-signal-soft)}
.q-opt .k{font:500 12px var(--font-mono);color:var(--text-muted);width:18px}
.q-pane{animation:qin .4s var(--ease-out)}
@keyframes qin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.meter{height:10px;border-radius:999px;background:var(--mte-harbor-soft);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--mte-signal);border-radius:999px;transition:width 1.2s var(--ease-out)}
.case{cursor:pointer}
.case .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-out)}
.case .more>div{overflow:hidden}
.case.open .more{grid-template-rows:1fr}
.case .tg{transition:transform .3s var(--ease-out)}.case.open .tg{transform:rotate(45deg)}
.case .row{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease-out)}
.case.open .row{opacity:1;transform:none}.case.open .row:nth-child(2){transition-delay:.08s}.case.open .row:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hl path{animation:none;stroke-dashoffset:0}.q-pane{animation:none}*{transition-duration:0s!important}}
.bp-s{all:unset;cursor:pointer;border-top:2px solid var(--border-default);padding-top:10px;opacity:.45;transition:opacity .3s,border-color .3s;font-family:var(--font-body);color:var(--text-primary)}.bp-s:hover{opacity:.8}.bp-s:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
#bp-prev:disabled{opacity:.35;cursor:default}
.bp-s.on{opacity:1;border-color:var(--mte-signal)}.bp-s.on .lbl{color:var(--text-accent)}
@media (max-width:700px){#bp-steps{grid-template-columns:1fr 1fr!important}}

/* mobiel */
.mnav-btn{display:none;all:unset;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--radius-m)}
.mnav-btn span{display:block;width:22px;height:1.5px;background:var(--text-primary);position:relative;transition:transform .3s var(--ease-out)}
.mnav-btn span::before,.mnav-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--text-primary);transition:transform .3s var(--ease-out),top .3s}
.mnav-btn span::before{top:-7px}.mnav-btn span::after{top:7px}
.mnav-open .mnav-btn span{background:transparent}.mnav-open .mnav-btn span::before{top:0;transform:rotate(45deg)}.mnav-open .mnav-btn span::after{top:0;transform:rotate(-45deg)}
.mnav{position:fixed;inset:72px 0 0 0;background:var(--surface-page);z-index:4;padding:32px;display:flex;flex-direction:column;gap:4px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s,transform .3s var(--ease-out),visibility .25s}
.mnav a{font:400 36px/1.3 var(--font-display);color:var(--text-primary);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--border-default)}
.mnav .btn{margin-top:24px;font:600 16px/1 var(--font-body);border:0;justify-content:center}
.mnav-open .mnav{opacity:1;transform:none;visibility:visible}
@media (max-width:1080px){.mnav-btn{display:inline-flex;margin-left:4px}nav .wrap>.btn{margin-left:auto}nav .wrap{gap:12px!important}}
@media (max-width:560px){nav .wrap>.btn{display:none}}
@media (max-width:700px){
 .wrap{padding:0 20px}
 section{padding:64px 0}
 div:has(> #bp){overflow-x:auto;-webkit-overflow-scrolling:touch}
 #bp{min-width:860px}
 .sh{grid-template-columns:1fr!important}
 .sv{grid-template-columns:1fr!important;padding:48px 0!important}
 .sv>div:first-child>div{padding-top:0!important;margin-bottom:12px}
 .sv .sv-dot{top:2px!important}
 .cr{grid-template-columns:32px minmax(0,1fr) auto!important;gap:8px 12px!important;padding:24px 0!important}
 .cr>span:last-child>span:first-child{display:none!important}
 #q-box{padding:22px!important;min-height:0!important}
 .case .row{grid-template-columns:1fr!important;gap:2px!important}
 #co .wrap{padding-top:16px}
 #co-prev,#co-next{display:none!important}
 div:has(> #knot){display:none!important}
 #bpmn{display:none!important}
 #hero .btn-o{display:none!important}
 .m-track{display:none!important}
}