/* ============================================================
SOSO design system v4, "operations console"
Tokens first. Every component reads tokens, never literals.
============================================================ */
:root{
--brand-light:#35BCD8;
--brand-mid:#398ACA;
--brand-dark:#113F71;
--success:#00D68F;
--warn:#FFB020;
--crit:#FF5C7A;
--console:#081827;
--console-deep:#040E19;
--console-rise:#0E2438;
--console-line:rgba(53,188,216,.16);
--console-ink:#EAF4F9;
--console-ink-2:#9FBACC;
--console-ink-3:#6B8699;
--ground:#F7FBFD;
--surface:#FFFFFF;
--sunken:#ECF4F8;
--ink:#08192A;
--ink-2:#3D5568;
--ink-3:#6E8697;
--hair:#D6E4EC;
--hair-soft:#E6EFF4;
--accent:#0F7595;
--accent-soft:rgba(53,188,216,.13);
--on-accent:#04121D;
--ok-ink:#00895C;
--no-ink:#C4344F;
--e1:0 1px 2px rgba(8,25,42,.05), 0 8px 24px -12px rgba(8,25,42,.18);
--e2:0 2px 6px rgba(8,25,42,.06), 0 26px 60px -28px rgba(17,63,113,.34);
--e3:0 40px 90px -40px rgba(17,63,113,.45);
--band-y:clamp(84px,10.5vw,150px);
--gut:clamp(20px,4vw,40px);
--max:1240px;
--r-s:10px;
--r-m:16px;
--r-l:24px;
--r-xl:32px;
--grad-brand:linear-gradient(115deg,var(--brand-light) 0%,var(--brand-mid) 48%,var(--brand-dark) 100%);
--grad-btn:linear-gradient(115deg,#2A76AE 0%,#1A5A93 46%,#113F71 100%);
--grad-btn-hover:linear-gradient(115deg,#24689B 0%,#164E80 46%,#0E3763 100%);
--grad-soft:linear-gradient(150deg,rgba(53,188,216,.14),rgba(57,138,202,.06) 46%,transparent 78%);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#071523;
--surface:#0D2033;
--sunken:#0A1B2C;
--ink:#EAF3F8;
--ink-2:#A9C1D1;
--ink-3:#7793A6;
--hair:rgba(122,164,190,.22);
--hair-soft:rgba(122,164,190,.13);
--accent:#4FCDE8;
--accent-soft:rgba(53,188,216,.16);
--on-accent:#04121D;
--ok-ink:#3FE0AC;
--no-ink:#FF8299;
--e1:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
--e2:0 2px 8px rgba(0,0,0,.4), 0 30px 64px -30px rgba(0,0,0,.85);
--e3:0 44px 96px -44px rgba(0,0,0,.9);
}
}
:root[data-theme="dark"]{
--ground:#071523;
--surface:#0D2033;
--sunken:#0A1B2C;
--ink:#EAF3F8;
--ink-2:#A9C1D1;
--ink-3:#7793A6;
--hair:rgba(122,164,190,.22);
--hair-soft:rgba(122,164,190,.13);
--accent:#4FCDE8;
--accent-soft:rgba(53,188,216,.16);
--on-accent:#04121D;
--ok-ink:#3FE0AC;
--no-ink:#FF8299;
--e1:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
--e2:0 2px 8px rgba(0,0,0,.4), 0 30px 64px -30px rgba(0,0,0,.85);
--e3:0 44px 96px -44px rgba(0,0,0,.9);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;scroll-padding-top:96px}
body{
margin:0;
background:var(--ground);
color:var(--ink);
font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:17px;
line-height:1.62;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
img,svg,canvas{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,.display{
font-family:Archivo,"IBM Plex Sans",system-ui,sans-serif;
font-weight:700;
letter-spacing:-.035em;
line-height:1.04;
text-wrap:balance;
margin:0;
}
h1{font-size:clamp(2.55rem,6vw,5rem);letter-spacing:-.045em;line-height:.97}
h2{font-size:clamp(2rem,4.2vw,3.35rem)}
h3{font-size:clamp(1.12rem,1.55vw,1.4rem);letter-spacing:-.022em;line-height:1.22}
h4{font-size:1.02rem;letter-spacing:-.015em}
p{margin:0}
.mono,.eyebrow,.sublabel,.chip,.metric-label,.kbd{
font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.eyebrow{
display:inline-flex;align-items:center;gap:9px;
font-size:.7rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
color:var(--accent);
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.sublabel{
display:flex;align-items:center;gap:14px;
font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-3);margin:0 0 16px;
}
.sublabel::after{content:"";flex:1;height:1px;background:var(--hair)}
:where(a,button,input,select,summary,[tabindex]):focus-visible{
outline:2px solid var(--brand-light);outline-offset:3px;border-radius:6px;
}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:var(--band-y);position:relative;overflow:hidden}
.band--tight{padding-block:clamp(56px,6vw,86px)}
.band--sunken{background:var(--sunken)}
.band--tint{background:var(--grad-soft),var(--ground)}
.band--console{background:var(--console);color:var(--console-ink)}
.band--console h1,.band--console h2,.band--console h3{color:var(--console-ink)}
.band--console .eyebrow{color:var(--brand-light)}
.band--console .sublabel{color:var(--console-ink-3)}
.band--console .sublabel::after{background:var(--console-line)}
.band--console .lede,.band--console p{color:var(--console-ink-2)}
.hair-top{border-top:1px solid var(--hair)}
.band--console.hair-top{border-top-color:var(--console-line)}
/* Een lichte kaart binnen een donkere band erfde de lichte tekstkleur van
die band. Op de pagina Werken bij leverde dat koppen op met contrast 1.12,
dus praktisch onzichtbaar wit op wit. Elke kaart die zelf een licht
oppervlak zet, zet nu ook zelf de tekstkleur terug.
Deze lijst is afgeleid uit de CSS (alles met background:var(--surface))
en niet met de hand samengesteld, want dat gaat een keer mis. */
.band--console :is(.aicard, .bwrap, .calc, .case, .casebar button, .cfg, .chat-f input, .chat-q button, .chatpanel, .chip, .cmdk, .domgrid div, .kbbar, .kbitem, .kbtags button, .minicalc, .modal, .msnote article, .mswrap, .nfilter button, .nitem, .ocard, .oitem, .omodal, .omodal-close, .oseg-b, .our, .pain, .pcard, .pkg, .prob, .rev, .ritem, .role, .role2, .route, .rpanel, .rule > div, .scard, .speclist div, .split2 > div, .srcwrap, .stack > div, .stat, .step, .teamsize, .tldr, .tool, .tstop, .vert, .wiz){color:var(--ink)}
.band--console :is(.aicard, .bwrap, .calc, .case, .casebar button, .cfg, .chat-f input, .chat-q button, .chatpanel, .chip, .cmdk, .domgrid div, .kbbar, .kbitem, .kbtags button, .minicalc, .modal, .msnote article, .mswrap, .nfilter button, .nitem, .ocard, .oitem, .omodal, .omodal-close, .oseg-b, .our, .pain, .pcard, .pkg, .prob, .rev, .ritem, .role, .role2, .route, .rpanel, .rule > div, .scard, .speclist div, .split2 > div, .srcwrap, .stack > div, .stat, .step, .teamsize, .tldr, .tool, .tstop, .vert, .wiz) :is(h1,h2,h3,h4){color:var(--ink)}
.band--console :is(.aicard, .bwrap, .calc, .case, .casebar button, .cfg, .chat-f input, .chat-q button, .chatpanel, .chip, .cmdk, .domgrid div, .kbbar, .kbitem, .kbtags button, .minicalc, .modal, .msnote article, .mswrap, .nfilter button, .nitem, .ocard, .oitem, .omodal, .omodal-close, .oseg-b, .our, .pain, .pcard, .pkg, .prob, .rev, .ritem, .role, .role2, .route, .rpanel, .rule > div, .scard, .speclist div, .split2 > div, .srcwrap, .stack > div, .stat, .step, .teamsize, .tldr, .tool, .tstop, .vert, .wiz) :is(p,.lede){color:var(--ink-2)}
.band--console :is(.aicard, .bwrap, .calc, .case, .casebar button, .cfg, .chat-f input, .chat-q button, .chatpanel, .chip, .cmdk, .domgrid div, .kbbar, .kbitem, .kbtags button, .minicalc, .modal, .msnote article, .mswrap, .nfilter button, .nitem, .ocard, .oitem, .omodal, .omodal-close, .oseg-b, .our, .pain, .pcard, .pkg, .prob, .rev, .ritem, .role, .role2, .route, .rpanel, .rule > div, .scard, .speclist div, .split2 > div, .srcwrap, .stack > div, .stat, .step, .teamsize, .tldr, .tool, .tstop, .vert, .wiz) .eyebrow{color:var(--accent)}
.head{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,68px)}
.head--solo{grid-template-columns:minmax(0,760px)}
.head h2{margin-top:18px}
.lede{font-size:clamp(1.03rem,1.35vw,1.17rem);line-height:1.6;color:var(--ink-2);max-width:62ch}
@media (max-width:860px){.head{grid-template-columns:1fr;align-items:start}}
.btn{
--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--hair);
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:14px 24px;border-radius:999px;border:1px solid var(--btn-bd);
background:var(--btn-bg);color:var(--btn-fg);
font-size:.95rem;font-weight:600;letter-spacing:-.012em;text-decoration:none;
cursor:pointer;white-space:nowrap;
transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s,border-color .25s,opacity .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.btn--primary{
--btn-bg:var(--grad-btn);--btn-fg:#FFFFFF;--btn-bd:transparent;
box-shadow:0 10px 30px -12px rgba(17,63,113,.55), inset 0 1px 0 rgba(255,255,255,.16);
text-shadow:0 1px 1px rgba(4,18,29,.25);
}
.btn--primary:hover{--btn-bg:var(--grad-btn-hover);box-shadow:0 18px 44px -14px rgba(42,118,174,.7), 0 0 0 1px rgba(53,188,216,.35), inset 0 1px 0 rgba(255,255,255,.2)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--hair)}
.btn--ghost:hover{--btn-bd:var(--accent);background:var(--accent-soft)}
.band--console .btn--ghost,.on-dark .btn--ghost,.hero .btn--ghost,.finale .btn--ghost,.calc-out .btn--ghost,.scanbox .btn--ghost,.dash-wrap .btn--ghost{--btn-fg:var(--console-ink);--btn-bd:rgba(159,186,204,.3)}
.band--console .btn--ghost:hover,.on-dark .btn--ghost:hover,.hero .btn--ghost:hover,.finale .btn--ghost:hover,.calc-out .btn--ghost:hover,.scanbox .btn--ghost:hover{--btn-bd:var(--brand-light);background:rgba(53,188,216,.1)}
.btn--sm{padding:10px 18px;font-size:.87rem}
.btn--wide{width:100%}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link-arrow{
display:inline-flex;align-items:center;gap:8px;
font-weight:600;font-size:.93rem;text-decoration:none;color:var(--accent);
letter-spacing:-.01em;
}
.link-arrow span:last-child{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.link-arrow:hover span:last-child{transform:translateX(5px)}
.band--console .link-arrow{color:var(--brand-light)}
.chip{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border-radius:999px;border:1px solid var(--hair);
background:var(--surface);
font-size:.7rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);
}
.band--console .chip{border-color:var(--console-line);background:rgba(53,188,216,.07);color:var(--console-ink-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;box-shadow:0 0 0 0 rgba(0,214,143,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(0,214,143,0)}100%{box-shadow:0 0 0 0 rgba(0,214,143,0)}}
/* ============================================================
HEADER + MEGA MENU
============================================================ */
.topbar{
position:sticky;top:0;z-index:80;
background:color-mix(in srgb,var(--console) 88%,transparent);
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
border-bottom:1px solid transparent;
transition:background .3s,border-color .3s;
}
.topbar.is-stuck{background:color-mix(in srgb,var(--console) 96%,transparent);border-bottom-color:var(--console-line)}
.topbar.is-stuck .topbar-in{height:clamp(64px,4.8vw,72px)}
.topbar-in{transition:height .32s cubic-bezier(.2,.7,.3,1)}
.progress{
position:absolute;left:0;right:0;bottom:-1px;height:2px;
transform:scaleX(var(--p,0));transform-origin:0 50%;
background:linear-gradient(90deg,var(--brand-light),var(--brand-mid) 62%,var(--brand-dark));
opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.topbar.is-stuck .progress{opacity:1}
@media (prefers-reduced-motion:reduce){.topbar-in{transition:none}}
.topbar-in{display:flex;align-items:center;gap:clamp(12px,2.1vw,30px);height:clamp(76px,6vw,86px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none;transition:opacity .2s}
.brand:hover{opacity:.85}
.b-ico{width:clamp(34px,3vw,42px);height:auto;aspect-ratio:29.97/31.74;flex:none;filter:drop-shadow(0 5px 16px rgba(53,188,216,.5))}
.b-word{height:clamp(21px,1.9vw,26px);width:auto;flex:none}
.brand--ink{color:var(--ink)}
.brand--lg .b-ico{width:38px;height:40px}
.brand--lg .b-word{height:23px}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px;position:relative;align-self:stretch}
.nav-item{position:static}
.nav-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 13px;border:0;background:none;border-radius:9px;
color:var(--console-ink-2);font-size:.92rem;font-weight:500;letter-spacing:-.012em;
white-space:nowrap;
text-decoration:none;cursor:pointer;transition:color .2s,background .2s;
}
.nav-btn:hover,.nav-item[data-open="true"] .nav-btn{color:var(--console-ink);background:rgba(53,188,216,.1)}
.nav-btn .caret{width:9px;height:9px;transition:transform .25s}
.nav-item[data-open="true"] .caret{transform:rotate(180deg)}
.mega{
position:absolute;top:calc(100% + 8px);left:0;transform:translateY(-8px);
width:min(880px,calc(100vw - 48px));
background:var(--console-rise);
border:1px solid var(--console-line);border-radius:var(--r-l);
box-shadow:0 50px 100px -40px rgba(0,0,0,.85);
padding:22px;opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .22s,transform .26s cubic-bezier(.2,.7,.3,1),visibility .22s;
}
.nav-item[data-open="true"] .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.mega-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-link{
display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
padding:12px;border-radius:14px;text-decoration:none;
border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s;
}
.mega-link:hover{background:rgba(53,188,216,.09);border-color:var(--console-line);transform:translateX(2px)}
.mega-ico{
width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:rgba(53,188,216,.12);border:1px solid var(--console-line);
font-size:.95rem;
}
.mega-link b{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.93rem;color:var(--console-ink);letter-spacing:-.022em;line-height:1.3}
.mega-link small{display:block;font-size:.79rem;line-height:1.45;color:var(--console-ink-3);margin-top:3px}
.mega-foot{
margin-top:16px;padding-top:16px;border-top:1px solid var(--console-line);
display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
}
.mega-foot p{font-size:.82rem;color:var(--console-ink-3);margin:0}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.icon-btn{
width:38px;height:38px;border-radius:10px;border:1px solid var(--console-line);
background:transparent;color:var(--console-ink-2);display:grid;place-items:center;cursor:pointer;
transition:background .2s,color .2s,border-color .2s;
}
.icon-btn:hover{background:rgba(53,188,216,.12);color:var(--console-ink);border-color:var(--brand-light)}
.kbd{
font-size:.68rem;border:1px solid var(--console-line);border-radius:6px;
padding:3px 7px;color:var(--console-ink-3);
}
.top-phone{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--console-ink-2);font-size:.9rem;font-weight:500}
.top-phone:hover{color:var(--brand-light)}
.burger{display:none}
/* Tussen 1120 en 1380px paste de kop niet: het menu bleef staan terwijl
telefoonnummer en sneltoets-chip de rij over de rand duwden. Die twee
wijken nu eerst; pas onder 1120px klapt het hele menu in de burger. */
@media (max-width:1380px){
.top-phone,.kbd{display:none}
}
@media (max-width:1120px){
.nav{display:none}
.burger{display:grid}
}
/* Onder 560px passen merknaam, zoeken, de adviesknop en de burger niet
meer naast elkaar: de burger liep 23px buiten de balk. De adviesknop
wijkt, want die staat in het menu zelf bovenaan als snelactie en
onderaan nog een keer als volle knop. */
@media (max-width:560px){
.top-actions > .btn{display:none}
}
/* ============================================================
HERO
============================================================ */
.hero{
position:relative;background:var(--console);color:var(--console-ink);
padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,110px);
overflow:hidden;
}
.hero::before{
content:"";position:absolute;inset:-30% -10% auto -10%;height:130%;
background:
radial-gradient(58% 46% at 18% 8%,rgba(53,188,216,.22),transparent 62%),
radial-gradient(48% 40% at 88% 22%,rgba(57,138,202,.2),transparent 65%),
radial-gradient(40% 38% at 62% 96%,rgba(17,63,113,.5),transparent 70%);
pointer-events:none;
}
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(var(--console-line) 1px,transparent 1px),linear-gradient(90deg,var(--console-line) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(34px,4.5vw,64px);align-items:center}
@media (max-width:1040px){.hero-in{grid-template-columns:1fr;gap:44px}}
.hero-badge{
display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;
border-radius:999px;border:1px solid var(--console-line);background:rgba(53,188,216,.08);
font-family:"IBM Plex Mono",monospace;font-size:.73rem;letter-spacing:.06em;color:var(--console-ink-2);
margin-bottom:26px;
}
.hero-badge b{color:var(--brand-light);font-weight:500}
.hero h1{color:#fff;margin-bottom:22px;font-size:clamp(2.3rem,4.3vw,3.45rem)}
.hero h1 .g{
background:linear-gradient(96deg,var(--brand-light),#7FE3F5 55%,var(--brand-mid));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lede{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.55;color:var(--console-ink-2);max-width:56ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.hero-third{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:var(--console-ink-2);text-decoration:none}
.hero-third b{color:var(--brand-light);font-weight:600;border-bottom:1px solid rgba(53,188,216,.4)}
.hero-third:hover b{border-bottom-color:var(--brand-light)}
.console{
position:relative;border-radius:var(--r-xl);
background:linear-gradient(168deg,#0C2136,#071522 62%);
border:1px solid var(--console-line);
box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 0 0 1px rgba(53,188,216,.05) inset;
overflow:hidden;
}
.console-bar{
display:flex;align-items:center;gap:12px;padding:13px 18px;
border-bottom:1px solid var(--console-line);background:rgba(4,14,25,.6);
}
.console-bar .tt{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--console-ink-2)}
.console-bar .rt{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--success)}
.console-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--console-line)}
.cell{background:#081827;padding:16px 18px;min-height:0;min-width:0}
.cell--full{grid-column:1/-1}
.cell-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cell-h h4{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--console-ink-3)}
.cell-h .st{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--console-ink-3)}
.wave{display:flex;align-items:flex-end;gap:3px;height:38px;margin-bottom:12px}
.wave i{flex:1;background:linear-gradient(180deg,var(--brand-light),rgba(57,138,202,.35));border-radius:2px;min-height:3px;transition:height .18s linear}
.call-line{display:flex;gap:9px;font-size:.8rem;line-height:1.45;color:var(--console-ink-2);margin-bottom:7px}
.call-line b{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--brand-light);flex:none;padding-top:2px}
.call-line.is-ai b{color:var(--success)}
.mailrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(53,188,216,.09);font-size:.81rem;color:var(--console-ink-2)}
.mailrow:last-child{border-bottom:0}
.mailrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:5px;border:1px solid;flex:none}
.tag--ok{color:var(--success);border-color:rgba(0,214,143,.35);background:rgba(0,214,143,.08)}
.tag--warn{color:var(--warn);border-color:rgba(255,176,32,.35);background:rgba(255,176,32,.08)}
.tag--info{color:var(--brand-light);border-color:rgba(53,188,216,.35);background:rgba(53,188,216,.08)}
.tag--crit{color:var(--crit);border-color:rgba(255,92,122,.38);background:rgba(255,92,122,.1)}
.feed{height:132px;min-width:0;overflow:hidden;position:relative;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 84%,transparent)}
.feed-row{display:flex;gap:9px;align-items:center;font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--console-ink-2);padding:5px 0;animation:feedin .5s cubic-bezier(.2,.7,.3,1)}
@keyframes feedin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.feed-row .tm{color:var(--console-ink-3);flex:none}
.feed-row .msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.spark-wrap{position:relative;height:74px;margin-bottom:10px}
.spark-wrap canvas{width:100%;height:100%;display:block}
.metric{display:flex;align-items:baseline;gap:9px}
.metric b{font-family:Archivo,sans-serif;font-size:1.72rem;font-weight:700;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.metric .metric-label{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--console-ink-3)}
.metric .delta{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--success)}
.fleet{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
.fleet i{width:9px;height:9px;border-radius:2px;background:rgba(0,214,143,.75)}
.fleet i.w{background:rgba(255,176,32,.85)}
.fleet i.o{background:rgba(122,150,170,.3)}
@media (max-width:520px){.console-body{grid-template-columns:minmax(0,1fr)}}
/* ============================================================
PARTNER BAR
============================================================ */
.partners{background:var(--console-deep);border-top:1px solid var(--console-line);padding-block:22px}
.partners-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3.4vw,46px);justify-content:center}
.partners p{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--console-ink-3);margin-right:auto}
.plogo{display:flex;align-items:center;gap:9px;font-family:Archivo,sans-serif;font-weight:600;font-size:.93rem;letter-spacing:-.02em;color:var(--console-ink-2);white-space:nowrap}
.plogo svg{flex:none;opacity:.9}
.plogo em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-light);border:1px solid rgba(53,188,216,.3);border-radius:5px;padding:2px 6px}
@media (max-width:800px){.partners p{margin-right:0;width:100%;text-align:center}.partners-in{justify-content:center}}
/* ============================================================
STAT BAND
============================================================ */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-l);overflow:hidden}
.stat{background:var(--surface);padding:26px 22px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:Archivo,sans-serif;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;
background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.86rem;color:var(--ink-2);line-height:1.4}
.stat .metric-label{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:980px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:last-child{grid-column:1/-1}}
@media (max-width:520px){.stats{grid-template-columns:1fr}.stat:last-child{grid-column:auto}}
.foot-note{margin-top:14px;font-size:.79rem;color:var(--ink-3);display:flex;gap:8px;align-items:flex-start}
.band--console .foot-note{color:var(--console-ink-3)}
/* ============================================================
PAIN ROUTER
============================================================ */
.router{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(18px,2.6vw,34px);align-items:start}
.router-tabs{display:flex;flex-direction:column;gap:6px}
.rtab{
text-align:left;padding:15px 17px;border-radius:14px;border:1px solid transparent;
background:transparent;cursor:pointer;color:var(--ink-2);font-size:.96rem;font-weight:500;line-height:1.35;
display:flex;gap:12px;align-items:center;transition:all .22s;
}
.rtab .n{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-3);flex:none}
.rtab:hover{background:var(--accent-soft);color:var(--ink)}
.rtab[aria-selected="true"]{background:var(--surface);border-color:var(--hair);color:var(--ink);font-weight:600;box-shadow:var(--e1)}
.rtab[aria-selected="true"] .n{color:var(--accent)}
.rpanel{
background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-l);
padding:clamp(24px,3vw,38px);box-shadow:var(--e2);min-height:290px;
}
.rpanel[hidden]{display:none}
.rpanel h3{margin-bottom:12px}
.rpanel .lede{margin-bottom:20px;font-size:1rem}
.rpanel ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:9px}
.rpanel li{display:flex;gap:11px;font-size:.94rem;color:var(--ink-2);line-height:1.5}
.rpanel li::before{content:"";width:16px;height:16px;border-radius:5px;flex:none;margin-top:4px;background:var(--accent-soft);border:1px solid var(--accent);
background-image:linear-gradient(135deg,transparent 45%,var(--accent) 45%,var(--accent) 55%,transparent 55%)}
@media (max-width:900px){.router{grid-template-columns:1fr}.router-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px}.rtab{flex:none}}
/* ============================================================
COMPARISON
============================================================ */
/* ── Een gewone week ──────────────────────────────────────────
Vervangt de oude voor/na-tabel. Het moeilijkst te verkopen aan een
maandcontract is de maand waarin niets misgaat: de klant ziet dan
niet waar zijn geld heen ging. Dus tonen we juist die week. Het
stille werk, met tijdstempel, in dezelfde telemetrie-taal als het
Control Center op de homepage.
============================================================ */
.week{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
gap:1px;background:var(--console-line);
border:1px solid var(--console-line);border-radius:var(--r-l);overflow:hidden;
}
@media (max-width:1000px){.week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.week{grid-template-columns:1fr}}
.wday{background:var(--console);padding:0;min-width:0;display:flex;flex-direction:column}
.wday > header{
display:flex;align-items:baseline;gap:8px;
padding:13px 16px;border-bottom:1px solid var(--console-line);
background:rgba(4,14,25,.5);
}
.wday .wd{
font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:.95rem;
letter-spacing:-.02em;color:var(--console-ink);text-transform:lowercase;
}
.wday .wn{
margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--console-ink-3);
}
.wday ul{list-style:none;margin:0;padding:12px 16px 16px;display:grid;gap:12px;align-content:start;flex:1}
.ev{
position:relative;padding-left:13px;min-width:0;
font-size:.85rem;line-height:1.45;color:var(--console-ink-2);
}
.ev::before{
content:"";position:absolute;left:0;top:.34em;bottom:.15em;width:2px;
border-radius:2px;background:var(--brand-light);opacity:.75;
}
.ev--ok::before{background:var(--success)}
.ev--warn::before{background:var(--warn)}
.ev--crit::before{background:var(--crit)}
.ev .evt{
display:block;font-family:"IBM Plex Mono",monospace;font-size:.63rem;
letter-spacing:.1em;color:var(--console-ink-3);margin-bottom:3px;
}
.ev b{display:block;font-weight:600;color:var(--console-ink);letter-spacing:-.008em}
.ev span.evs{display:block;margin-top:2px;font-size:.79rem;color:var(--console-ink-3);line-height:1.4}
.wday--quiet ul{place-content:center;text-align:center}
.wday--quiet .qi{
width:30px;height:33px;margin:0 auto 10px;clip-path:var(--hex-clip);
background:linear-gradient(150deg,rgba(0,214,143,.55),rgba(53,188,216,.35));
}
.wday--quiet p{font-size:.85rem;color:var(--console-ink-2);line-height:1.5}
.wday--quiet p b{display:block;color:var(--console-ink);font-weight:600;margin-bottom:4px}
.week .wday{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.week.in .wday{opacity:1;transform:none}
.week.in .wday:nth-child(1){transition-delay:.04s}
.week.in .wday:nth-child(2){transition-delay:.10s}
.week.in .wday:nth-child(3){transition-delay:.16s}
.week.in .wday:nth-child(4){transition-delay:.22s}
.week.in .wday:nth-child(5){transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
.week .wday{opacity:1;transform:none;transition:none}
}
.wsum{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,2.4vw,28px);
align-items:center;margin-top:18px;padding:20px 24px;
border:1px solid var(--console-line);border-radius:var(--r-l);
background:rgba(53,188,216,.06);
}
@media (max-width:820px){.wsum{grid-template-columns:1fr}}
.wsum p{font-size:.95rem;color:var(--console-ink-2);line-height:1.6;margin:0}
.wsum p b{color:var(--console-ink)}
.wsum .btnrow{margin:0;flex-wrap:nowrap}
@media (max-width:820px){.wsum .btnrow{flex-wrap:wrap}}
/* ============================================================
SERVICE BENTO
============================================================ */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.scard{
position:relative;display:flex;flex-direction:column;gap:12px;
padding:24px;border-radius:var(--r-l);border:1px solid var(--hair);
background:var(--surface);text-decoration:none;overflow:hidden;
box-shadow:var(--e1);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.scard::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-brand);opacity:0;transition:opacity .28s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(53,188,216,.5)}
.scard:hover::before{opacity:1}
.scard--wide{grid-column:span 2}
.scard-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid rgba(53,188,216,.28);color:var(--accent)}
.scard h3{color:var(--ink)}
.scard p{font-size:.92rem;color:var(--ink-2);line-height:1.55}
.scard ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.scard li{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--hair);border-radius:6px;padding:3px 7px}
.scard .go{margin-top:auto;padding-top:6px;font-size:.88rem;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:7px}
.scard .go span:last-child{transition:transform .22s}
.scard:hover .go span:last-child{transform:translateX(5px)}
@media (max-width:1080px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.scard--wide{grid-column:auto}}
/* ============================================================
CALCULATOR
============================================================ */
.calc{
display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;
background:var(--surface);box-shadow:var(--e3);
}
.calc-in{padding:clamp(24px,3vw,40px);border-right:1px solid var(--hair)}
.calc-out{padding:clamp(24px,3vw,40px);background:var(--console);color:var(--console-ink);position:relative;overflow:hidden}
.calc-out::before{content:"";position:absolute;inset:auto -20% -40% -20%;height:70%;background:radial-gradient(50% 60% at 50% 100%,rgba(53,188,216,.24),transparent 70%);pointer-events:none}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc-in{border-right:0;border-bottom:1px solid var(--hair)}}
.field{margin-bottom:26px}
.field:last-child{margin-bottom:0}
.field-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px}
.field-h label{font-size:.93rem;font-weight:600;letter-spacing:-.012em}
.field-h output{font-family:"IBM Plex Mono",monospace;font-size:1rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.field small{display:block;font-size:.8rem;color:var(--ink-3);margin-top:9px;line-height:1.45}
input[type=range]{
-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:var(--sunken);
border:1px solid var(--hair);outline-offset:6px;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
background:var(--grad-brand);border:2px solid var(--surface);
box-shadow:0 3px 12px -2px rgba(53,188,216,.8);cursor:grab;
}
input[type=range]::-moz-range-thumb{
width:20px;height:20px;border-radius:50%;background:var(--brand-light);
border:2px solid var(--surface);box-shadow:0 3px 12px -2px rgba(53,188,216,.8);cursor:grab;
}
.seg{display:flex;gap:6px;background:var(--sunken);border:1px solid var(--hair);border-radius:12px;padding:4px}
.seg button{
flex:1;padding:9px 8px;border:0;border-radius:9px;background:transparent;cursor:pointer;
font-size:.88rem;font-weight:600;color:var(--ink-3);transition:all .2s;
}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--e1)}
.calc-out .rlabel{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--console-ink-3);margin-bottom:8px}
.bignum{
font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.7rem,6vw,4.1rem);
letter-spacing:-.05em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums;
display:flex;align-items:baseline;gap:8px;
}
.bignum .cur{font-size:.42em;color:var(--brand-light);font-weight:600}
.bignum .per{font-size:.24em;color:var(--console-ink-3);font-weight:500;letter-spacing:0;font-family:"IBM Plex Sans",sans-serif}
.calc-sub{margin-top:10px;font-size:.92rem;color:var(--console-ink-2)}
.calc-sub b{color:var(--brand-light)}
.calc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--console-line);border:1px solid var(--console-line);border-radius:var(--r-m);overflow:hidden;margin:26px 0 22px;position:relative;z-index:2}
.calc-grid > div{background:#081827;padding:15px 16px}
.calc-grid b{display:block;font-family:Archivo,sans-serif;font-size:1.32rem;font-weight:700;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:3px}
.calc-grid span{font-size:.75rem;color:var(--console-ink-3);line-height:1.35;display:block}
@media (max-width:480px){.calc-grid{grid-template-columns:1fr}}
.bars{display:grid;gap:10px;margin-bottom:24px;position:relative;z-index:2}
.bar-r{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;font-size:.82rem;color:var(--console-ink-2)}
.bar-t{height:12px;border-radius:99px;background:rgba(122,150,170,.16);overflow:hidden}
.bar-f{height:100%;border-radius:99px;transition:width .7s cubic-bezier(.2,.7,.3,1)}
.bar-f--now{background:linear-gradient(90deg,#5A7B93,#3D5A70)}
.bar-f--soso{background:var(--grad-brand)}
.bar-r em{font-style:normal;font-family:"IBM Plex Mono",monospace;color:#fff;font-variant-numeric:tabular-nums}
details.assump{border-top:1px solid var(--console-line);padding-top:16px;position:relative;z-index:2}
details.assump summary{cursor:pointer;font-size:.84rem;color:var(--console-ink-2);font-weight:600;list-style:none;display:flex;gap:8px;align-items:center}
details.assump summary::-webkit-details-marker{display:none}
details.assump summary::before{content:"?";width:18px;height:18px;border-radius:50%;border:1px solid var(--console-line);display:grid;place-items:center;font-size:.68rem;color:var(--brand-light);flex:none}
details.assump p{font-size:.82rem;color:var(--console-ink-3);line-height:1.55;margin-top:12px}
details.assump ul{margin:10px 0 0;padding-left:18px;font-size:.82rem;color:var(--console-ink-3);line-height:1.6}
/* ============================================================
SECURE+ LAYER STACK
============================================================ */
.secgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.seccard{
padding:20px 18px;border-radius:var(--r-m);
background:linear-gradient(165deg,rgba(53,188,216,.09),rgba(8,24,39,0));
border:1px solid var(--console-line);border-top:2px solid var(--brand-light);
display:flex;flex-direction:column;gap:8px;transition:transform .26s,background .26s;
}
.seccard:hover{transform:translateY(-4px);background:linear-gradient(165deg,rgba(53,188,216,.17),rgba(8,24,39,0))}
.seccard .n{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;color:var(--brand-light)}
.seccard h4{color:#fff;font-size:.98rem}
.seccard p{font-size:.83rem;line-height:1.5;color:var(--console-ink-3)}
@media (max-width:1000px){.secgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.secgrid{grid-template-columns:1fr}}
.modules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--console-line);border:1px solid var(--console-line);border-radius:var(--r-l);overflow:hidden;margin-top:14px}
/* Bij minder items dan kolommen bleven er lege vakken staan die eruitzagen
alsof er iets ontbrak. Het kolomaantal volgt nu het aantal items. Deze
regels staan bewust voor de mediaqueries hieronder, zodat smalle schermen
het gewoon overnemen. */
.modules:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.modules:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.modules:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.module{background:var(--console);padding:18px 16px;transition:background .25s}
.module:hover{background:var(--console-rise)}
.module h4{font-size:.9rem;color:#fff;margin-bottom:5px}
.module p{font-size:.78rem;line-height:1.45;color:var(--console-ink-3)}
@media (max-width:1000px){.modules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.modules{grid-template-columns:1fr}}
/* ============================================================
AI SPLIT
============================================================ */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.aicard{
position:relative;padding:clamp(24px,2.8vw,34px);border-radius:var(--r-l);
border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);
display:flex;flex-direction:column;gap:14px;overflow:hidden;
}
.aicard::after{content:"";position:absolute;inset:auto -30% -60% auto;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,rgba(53,188,216,.14),transparent 66%);pointer-events:none}
.aicard h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.aicard p{font-size:.96rem;color:var(--ink-2)}
.aifeat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aifeat li{font-size:.88rem;color:var(--ink-2);display:flex;gap:9px;align-items:center}
.aifeat li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.aistat{display:flex;gap:22px;padding:16px 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);position:relative;z-index:2}
.aistat div b{display:block;font-family:Archivo,sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-.04em;color:var(--ink)}
.aistat div span{font-size:.76rem;color:var(--ink-3)}
@media (max-width:860px){.split{grid-template-columns:1fr}.aifeat{grid-template-columns:1fr}}
/* ============================================================
PLATFORM / DASHBOARD
============================================================ */
.dash{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--console-line);background:linear-gradient(168deg,#0C2136,#071522);box-shadow:var(--e3)}
.dash-top{display:flex;align-items:center;gap:10px;padding:12px 18px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--console-line);background:rgba(4,14,25,.55)}
.dash-top::-webkit-scrollbar{display:none}
.dash-top .tab{white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--console-ink-3);padding:5px 10px;border-radius:7px}
.dash-top .tab.on{color:var(--console-ink);background:rgba(53,188,216,.14)}
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--console-line)}
.dash-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-c{background:#081827;padding:18px}
.dash-c--2{grid-column:span 2}
.dash-c h4{font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--console-ink-3);margin-bottom:12px}
.dash-kpi{font-family:Archivo,sans-serif;font-size:2rem;font-weight:700;letter-spacing:-.05em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.dash-kpi + span{font-size:.78rem;color:var(--console-ink-3);display:block;margin-top:5px}
.tickets{display:grid;gap:8px}
.ticket{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.82rem;color:var(--console-ink-2);padding:8px 10px;border-radius:9px;background:rgba(53,188,216,.05);border:1px solid var(--console-line)}
.ticket .id{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--console-ink-3)}
.ring{width:88px;height:88px;margin:0 auto}
@media (max-width:960px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-c--2{grid-column:span 2}}
@media (max-width:560px){.dash-grid{grid-template-columns:1fr}.dash-c--2{grid-column:auto}}
.dashfeat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.dashfeat div{padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--console-line);background:rgba(53,188,216,.05);font-size:.87rem;color:var(--console-ink-2);display:flex;gap:9px;align-items:center}
.dashfeat div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-light);flex:none}
@media (max-width:900px){.dashfeat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.dashfeat{grid-template-columns:1fr}}
/* ============================================================
CASES
============================================================ */
.casebar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.casebar button{
padding:9px 16px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);
font-size:.88rem;font-weight:500;color:var(--ink-2);cursor:pointer;transition:all .22s;
}
.casebar button:hover{border-color:var(--accent);color:var(--ink)}
.casebar button[aria-selected="true"]{background:var(--console);color:#fff;border-color:var(--console)}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--e2)}
.case[hidden]{display:none}
.case-l{padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;gap:22px}
.case-r{background:var(--console);color:var(--console-ink);padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;gap:20px;justify-content:center}
.case-step{display:grid;grid-template-columns:auto 1fr;gap:14px}
.case-step .k{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:4px;width:74px}
.case-step p{font-size:.95rem;color:var(--ink-2);line-height:1.55}
.case-step strong{color:var(--ink)}
.case-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.case-res div b{display:block;font-family:Archivo,sans-serif;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.045em;color:#fff;line-height:1}
.case-res div span{font-size:.8rem;color:var(--console-ink-3);display:block;margin-top:5px;line-height:1.4}
.case-quote{font-size:1rem;line-height:1.6;color:var(--console-ink-2);border-left:2px solid var(--brand-light);padding-left:16px}
.case-quote cite{display:block;font-style:normal;font-size:.8rem;color:var(--console-ink-3);margin-top:9px}
@media (max-width:880px){.case{grid-template-columns:1fr}}
/* ============================================================
DARKWEB SCAN
============================================================ */
.scan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:900px){.scan{grid-template-columns:1fr}}
.scanbox{background:var(--console-rise);border:1px solid var(--console-line);border-radius:var(--r-xl);padding:clamp(24px,3vw,34px);box-shadow:var(--e3)}
.scanbox h3{color:#fff;margin-bottom:6px}
.scanbox > p{font-size:.88rem;color:var(--console-ink-3);margin-bottom:20px}
.inp{display:block;width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--console-line);
background:rgba(4,14,25,.6);color:var(--console-ink);font-size:.95rem;margin-bottom:11px}
.inp::placeholder{color:var(--console-ink-3)}
.inp:focus{border-color:var(--brand-light);outline:none;box-shadow:0 0 0 3px rgba(53,188,216,.18)}
.scan-note{font-size:.76rem;color:var(--console-ink-3);margin-top:12px;line-height:1.5}
.scan-result{margin-top:18px;padding:16px;border-radius:12px;border:1px solid rgba(0,214,143,.3);background:rgba(0,214,143,.07);font-size:.88rem;color:var(--console-ink-2);line-height:1.55}
.scan-result[hidden]{display:none}
/* ============================================================
REVIEWS
============================================================ */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rev{padding:26px;border-radius:var(--r-l);border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);display:flex;flex-direction:column;gap:14px}
.stars{display:flex;gap:3px;color:var(--brand-mid)}
.rev p{font-size:.96rem;line-height:1.6;color:var(--ink-2)}
.rev footer{margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:6px;border-top:1px solid var(--hair-soft)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:700;font-size:.82rem;color:#04121D;flex:none}
.rev footer b{display:block;font-size:.88rem;font-weight:600}
.rev footer span{display:block;font-size:.78rem;color:var(--ink-3)}
@media (max-width:900px){.revs{grid-template-columns:1fr}}
/* ============================================================
TOOLS STRIP
============================================================ */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tool{
display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-m);
border:1px dashed var(--hair);background:var(--surface);text-decoration:none;transition:all .24s;
}
.tool:hover{border-style:solid;border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}
.tool b{font-family:Archivo,sans-serif;font-size:.98rem;font-weight:600;letter-spacing:-.022em}
.tool span{font-size:.82rem;color:var(--ink-3);line-height:1.45}
.tool .t{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tools{grid-template-columns:1fr}}
/* ============================================================
FINAL CTA + FOOTER
============================================================ */
.finale{position:relative;overflow:hidden;background:var(--console);color:var(--console-ink);padding-block:clamp(70px,9vw,130px)}
.finale::before{content:"";position:absolute;inset:0;background:
radial-gradient(60% 60% at 20% 0%,rgba(53,188,216,.2),transparent 62%),
radial-gradient(50% 55% at 85% 90%,rgba(17,63,113,.62),transparent 66%);pointer-events:none}
.finale-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,62px);align-items:center}
.finale h2{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:18px}
.finale p{color:var(--console-ink-2);font-size:1.06rem;max-width:52ch;margin-bottom:28px}
.contact-card{background:rgba(4,14,25,.5);border:1px solid var(--console-line);border-radius:var(--r-l);padding:26px;display:grid;gap:16px}
.cline{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;text-decoration:none;color:var(--console-ink-2);font-size:.93rem}
.cline .ci{width:36px;height:36px;border-radius:10px;border:1px solid var(--console-line);background:rgba(53,188,216,.09);display:grid;place-items:center;color:var(--brand-light)}
.cline b{display:block;color:#fff;font-weight:600;font-size:.97rem}
.cline small{display:block;font-size:.79rem;color:var(--console-ink-3)}
@media (max-width:900px){.finale-in{grid-template-columns:1fr}}
.foot{background:var(--console-deep);color:var(--console-ink-3);padding-block:60px 30px;border-top:1px solid var(--console-line)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-bottom:44px}
.foot h5{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--console-ink-2);margin:0 0 16px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:var(--console-ink-3);text-decoration:none;font-size:.89rem;transition:color .2s}
.foot a:hover{color:var(--brand-light)}
.foot-about .b-ico{width:46px}
.foot-about .b-word{height:28px}
.foot-about p{font-size:.88rem;line-height:1.6;color:var(--console-ink-3);margin:14px 0 18px;max-width:36ch}
.foot-bot{border-top:1px solid var(--console-line);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:.8rem}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:18px}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* ============================================================
FLOATING UI
============================================================ */
.sticky-cta{
position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:70;
display:flex;align-items:center;gap:14px;padding:9px 9px 9px 20px;border-radius:999px;
background:color-mix(in srgb,var(--console) 94%,transparent);backdrop-filter:blur(14px);
border:1px solid var(--console-line);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.sticky-cta.show{transform:translate(-50%,0)}
.sticky-cta p{font-size:.88rem;color:var(--console-ink-2);margin:0;white-space:nowrap}
.sticky-cta p b{color:#fff;font-weight:600}
@media (max-width:640px){.sticky-cta{left:12px;right:12px;bottom:12px;transform:translateY(140%);padding:10px 10px 10px 16px}.sticky-cta.show{transform:translateY(0)}.sticky-cta p{white-space:normal;font-size:.8rem}}
.fab{
position:fixed;right:20px;bottom:20px;z-index:72;width:56px;height:56px;border-radius:50%;
border:0;background:var(--grad-brand);color:#04121D;display:grid;place-items:center;cursor:pointer;
box-shadow:0 16px 40px -12px rgba(53,188,216,.85);transition:transform .25s;
}
.fab:hover{transform:scale(1.06)}
@media (max-width:640px){.fab{bottom:78px;right:14px;width:50px;height:50px}}
.totop{
position:fixed;right:20px;bottom:86px;z-index:71;width:44px;height:48px;
clip-path:var(--hex-clip);border:0;cursor:pointer;
background:var(--console-rise);color:var(--brand-light);
display:grid;place-items:center;
box-shadow:0 14px 34px -14px rgba(8,25,42,.8);
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .28s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .28s,background .2s;
}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{background:var(--brand-mid);color:#fff}
.totop:focus-visible{outline:2px solid var(--brand-light);outline-offset:3px}
@media (max-width:640px){.totop{bottom:136px;right:17px;width:40px;height:44px}}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity .01s}}
.chatpanel{
position:fixed;right:20px;bottom:88px;z-index:73;width:min(370px,calc(100vw - 32px));
background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-l);
box-shadow:var(--e3);overflow:hidden;transform:translateY(14px) scale(.97);opacity:0;
visibility:hidden;transition:all .28s cubic-bezier(.2,.7,.3,1);
}
.chatpanel.open{transform:none;opacity:1;visibility:visible}
.chat-h{background:var(--console);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:11px}
.chat-h b{font-family:Archivo,sans-serif;font-size:.97rem;letter-spacing:-.025em}
.chat-h small{display:block;font-size:.74rem;color:var(--console-ink-3)}
.chat-h button{margin-left:auto;background:none;border:0;color:var(--console-ink-2);cursor:pointer;font-size:1.1rem;line-height:1}
.chat-b{padding:18px;display:grid;gap:12px;max-height:min(46vh,360px);overflow-y:auto}
.msg{padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.5;max-width:88%}
.msg--ai{background:var(--sunken);border:1px solid var(--hair);border-bottom-left-radius:5px}
.msg--me{background:var(--grad-brand);color:#04121D;justify-self:end;border-bottom-right-radius:5px;font-weight:500}
.chat-q{padding:0 18px 12px;display:flex;flex-wrap:wrap;gap:7px}
.chat-q button{padding:8px 12px;border-radius:999px;border:1px solid var(--hair);background:var(--surface);font-size:.82rem;cursor:pointer;color:var(--ink-2);transition:all .2s}
.chat-q button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
/* Knoppen onder een antwoord. Een antwoord zonder vervolgstap laat de
bezoeker met de vraag "en nu?" achter, dus elk antwoord krijgt er een. */
.msg-act{display:flex;flex-wrap:wrap;gap:7px;margin-top:-4px}
.msg-act a{
display:inline-flex;align-items:center;gap:6px;
padding:8px 13px;border-radius:999px;text-decoration:none;
border:1px solid var(--accent);background:var(--accent-soft);
font-size:.82rem;font-weight:600;color:var(--accent);
transition:background .18s,color .18s;
}
.msg-act a:hover{background:var(--accent);color:#04121D}
.chat-f{
display:flex;gap:8px;align-items:center;
padding:12px 14px;border-top:1px solid var(--hair);background:var(--sunken);
}
.chat-f input{
flex:1;min-width:0;padding:11px 14px;border-radius:999px;
border:1px solid var(--hair);background:var(--surface);
font-size:.9rem;font-family:inherit;color:var(--ink);
}
.chat-f input::placeholder{color:var(--ink-3)}
.chat-f input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.chat-f button{
flex:none;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
background:var(--grad-brand);color:#04121D;display:grid;place-items:center;
transition:transform .18s;
}
.chat-f button:hover{transform:scale(1.07)}
.msg--dots{display:flex;gap:5px;align-items:center;width:fit-content;padding:14px}
.msg--dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:dot 1.1s infinite}
.msg--dots i:nth-child(2){animation-delay:.16s}
.msg--dots i:nth-child(3){animation-delay:.32s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.msg--dots i{animation:none}}
@media (max-width:640px){.chatpanel{right:12px;bottom:140px}}
.scrim{position:fixed;inset:0;z-index:98;background:rgba(4,14,25,.72);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;display:grid;place-items:center;padding:20px}
.scrim.open{opacity:1;visibility:visible}
.modal{
width:min(620px,100%);background:var(--surface);border:1px solid var(--hair);
border-radius:var(--r-xl);box-shadow:var(--e3);overflow:hidden;
transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.scrim.open .modal{transform:none}
.modal-top{background:var(--console);color:#fff;padding:28px 30px;position:relative;overflow:hidden}
.modal-top::before{content:"";position:absolute;inset:auto -20% -70% 40%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(53,188,216,.3),transparent 68%)}
.modal-top h3{font-size:1.5rem;position:relative;z-index:2;color:#fff}
.modal-top p{position:relative;z-index:2;color:var(--console-ink-2);font-size:.94rem;margin-top:8px}
.modal-b{padding:26px 30px 30px;display:grid;gap:14px}
.modal-b ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.modal-b li{font-size:.92rem;color:var(--ink-2);display:flex;gap:10px}
.modal-b li::before{content:"→";color:var(--accent);font-weight:600}
.modal-close{position:absolute;top:14px;right:16px;z-index:3;background:rgba(255,255,255,.1);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}
.cmdk{width:min(600px,100%);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-l);box-shadow:var(--e3);overflow:hidden;align-self:start;margin-top:12vh;transform:translateY(14px);transition:transform .28s}
.scrim.open .cmdk{transform:none}
.cmdk input{width:100%;padding:18px 20px;border:0;border-bottom:1px solid var(--hair);background:transparent;font-size:1rem;outline:none}
.cmdk-list{max-height:min(52vh,420px);overflow-y:auto;padding:8px}
.cmdk-list a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;text-decoration:none;font-size:.93rem;color:var(--ink-2)}
.cmdk-list a:hover,.cmdk-list a.sel{background:var(--accent-soft);color:var(--ink)}
.cmdk-list .g{font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding:12px 13px 6px}
.cmdk-list a .m{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-3)}
.toast{
position:fixed;left:50%;bottom:88px;transform:translate(-50%,20px);z-index:99;
background:var(--console);color:var(--console-ink);border:1px solid var(--console-line);
border-radius:12px;padding:12px 18px;font-size:.87rem;box-shadow:var(--e3);
opacity:0;visibility:hidden;transition:all .28s;max-width:min(440px,calc(100vw - 32px));text-align:center;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
/* ============================================================
Subpagina-componenten (gedeeld door alle subpagina's)
============================================================ */
.subhero{position:relative;background:var(--console);color:var(--console-ink);padding-block:clamp(30px,4vw,44px) clamp(52px,6.5vw,86px);overflow:hidden}
.subhero::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:140%;pointer-events:none;
background:radial-gradient(56% 46% at 14% 6%,rgba(53,188,216,.2),transparent 62%),
radial-gradient(46% 42% at 86% 30%,rgba(57,138,202,.18),transparent 66%),
radial-gradient(44% 40% at 60% 100%,rgba(17,63,113,.5),transparent 70%)}
.subhero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
background-image:linear-gradient(var(--console-line) 1px,transparent 1px),linear-gradient(90deg,var(--console-line) 1px,transparent 1px);
background-size:64px 64px;
mask-image:radial-gradient(120% 90% at 50% 0%,#000 18%,transparent 76%);
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 18%,transparent 76%)}
.subhero-in{position:relative;z-index:2}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:"IBM Plex Mono",monospace;font-size:.71rem;letter-spacing:.07em;text-transform:uppercase;color:var(--console-ink-3);margin-bottom:clamp(22px,3vw,34px)}
.crumbs a{color:var(--console-ink-3);text-decoration:none}
.crumbs a:hover{color:var(--brand-light)}
.crumbs span[aria-current]{color:var(--brand-light)}
.subhero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:20ch;margin-bottom:20px}
.subhero .lede{color:var(--console-ink-2);font-size:clamp(1.02rem,1.4vw,1.16rem);max-width:60ch;margin-bottom:28px}
.subhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(24px,4vw,60px);align-items:end}
@media (max-width:960px){.subhero-grid{grid-template-columns:1fr}}
.hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--console-line);border:1px solid var(--console-line);border-radius:var(--r-m);overflow:hidden;min-width:min(360px,100%)}
/* Bij drie feiten bleef er rechtsonder een leeg vakje staan dat eruitzag
alsof er iets ontbrak. Het derde vak vult nu de hele breedte. */
.hero-facts > div:nth-child(3):last-child{grid-column:1/-1}
.hero-facts div{background:rgba(4,14,25,.55);padding:15px 17px}
.hero-facts b{display:block;font-family:Archivo,sans-serif;font-size:1.34rem;font-weight:700;letter-spacing:-.04em;color:#fff;line-height:1.1}
.hero-facts span{display:block;font-size:.76rem;color:var(--console-ink-3);margin-top:4px;line-height:1.35}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.role{border:1px solid var(--hair);border-radius:var(--r-l);background:var(--surface);padding:22px;box-shadow:var(--e1);display:flex;flex-direction:column;gap:12px}
.role h3{font-size:1.08rem}
.role .who{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent)}
.role ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.role li{font-size:.88rem;color:var(--ink-2);display:flex;gap:9px;line-height:1.45}
.role li::before{content:"";width:14px;height:14px;border-radius:4px;flex:none;margin-top:4px;background:var(--accent-soft);border:1px solid var(--accent)}
.role li.no::before{background:rgba(255,92,122,.12);border-color:rgba(255,92,122,.4)}
@media (max-width:900px){.roles{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:st}
.step{position:relative;border:1px solid var(--hair);border-radius:var(--r-l);background:var(--surface);padding:24px 22px;box-shadow:var(--e1);overflow:hidden}
.step::before{counter-increment:st;content:counter(st,decimal-leading-zero);
position:absolute;right:14px;bottom:2px;font-family:Archivo,sans-serif;font-weight:700;font-size:3.4rem;
letter-spacing:-.06em;color:var(--accent);opacity:.1;line-height:1}
.step h3{font-size:1rem;margin-bottom:8px}
.step p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.clientbar{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2.6vw,34px)}
.clientbar p{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0;width:100%}
.clientbar span{font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;letter-spacing:-.024em;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.clientbar span:hover{color:var(--ink)}
.speclist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-l);overflow:hidden}
.speclist div{background:var(--surface);padding:16px 18px;display:flex;gap:11px;align-items:center;font-size:.93rem;color:var(--ink-2);transition:background .2s}
.speclist div:hover{background:var(--accent-soft);color:var(--ink)}
.speclist div::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
@media (max-width:900px){.speclist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.speclist{grid-template-columns:1fr}}
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.prob{border:1px solid var(--hair);border-left:2px solid var(--crit);border-radius:0 var(--r-m) var(--r-m) 0;background:var(--surface);padding:18px 20px;box-shadow:var(--e1)}
.prob b{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;letter-spacing:-.022em;color:var(--ink);margin-bottom:6px;line-height:1.3}
.prob p{font-size:.87rem;color:var(--ink-3);line-height:1.5}
@media (max-width:900px){.probs{grid-template-columns:1fr}}
.minicalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--e2)}
.minicalc-in{padding:clamp(22px,3vw,34px);border-right:1px solid var(--hair)}
.minicalc-out{padding:clamp(22px,3vw,34px);background:var(--console);color:var(--console-ink);display:grid;gap:20px;align-content:center;position:relative;overflow:hidden}
.minicalc-out::before{content:"";position:absolute;inset:auto -20% -50% -20%;height:80%;background:radial-gradient(50% 60% at 50% 100%,rgba(53,188,216,.22),transparent 70%);pointer-events:none}
.minicalc-out > div{position:relative;z-index:2}
.minicalc-out b{display:block;font-family:Archivo,sans-serif;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.05em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.minicalc-out span{display:block;font-size:.85rem;color:var(--console-ink-2);margin-top:8px;line-height:1.45}
@media (max-width:820px){.minicalc{grid-template-columns:1fr}.minicalc-in{border-right:0;border-bottom:1px solid var(--hair)}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html{scroll-behavior:auto}
.rv{opacity:1;transform:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--brand-light);color:#04121D;padding:10px 18px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{left:16px}
.riskcalc{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;
border:1px solid var(--console-line);border-radius:var(--r-xl);overflow:hidden;
background:linear-gradient(168deg,#0C2136,#071522);margin-top:40px;
}
.riskcalc-in{padding:clamp(22px,2.6vw,32px);border-right:1px solid var(--console-line)}
.riskcalc-out{padding:clamp(22px,2.6vw,32px);display:grid;gap:18px;align-content:center}
.riskcalc-in .field-h label{color:var(--console-ink)}
.riskcalc-in .field-h output{color:var(--brand-light)}
.riskcalc-in input[type=range]{background:rgba(122,150,170,.16);border-color:var(--console-line)}
.riskcalc-in input[type=range]::-webkit-slider-thumb{border-color:#0C2136}
.riskcalc-in input[type=range]::-moz-range-thumb{border-color:#0C2136}
.riskcalc-in small{color:var(--console-ink-3)}
.riskfig b{display:block;font-family:Archivo,sans-serif;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.riskfig span{display:block;font-size:.84rem;color:var(--console-ink-2);margin-top:6px;line-height:1.45}
.riskfig--good b{background:linear-gradient(96deg,var(--success),#6FF0C6);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:820px){.riskcalc{grid-template-columns:1fr}.riskcalc-in{border-right:0;border-bottom:1px solid var(--console-line)}}
.faq{display:grid;gap:0;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{
list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
font-family:Archivo,sans-serif;font-weight:600;font-size:clamp(1.02rem,1.5vw,1.2rem);
letter-spacing:-.024em;line-height:1.3;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 clamp(20px,6vw,120px) 24px 0;font-size:1rem;line-height:1.65;color:var(--ink-2);max-width:70ch}
/* ============================================================
v5. Het hexagoon-motief uit het SOSO-icoon
Het merkicoon is een afgeronde zeshoek met een lint erin.
Die vorm keert terug als raster, als icoonframe en als
watermerk, zodat de site aanvoelt als het logo.
============================================================ */
:root{
--hex-clip:polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
--hex-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 0L52 15V45L26 60L0 45V15Z' fill='none' stroke='%2335BCD8' stroke-opacity='0.22' stroke-width='1'/%3E%3C/svg%3E");
--hex-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cpath d='M26 0L52 15V45L26 60L0 45V15Z' fill='none' stroke='%23113F71' stroke-opacity='0.10' stroke-width='1'/%3E%3C/svg%3E");
}
.hero::after,.subhero::after{
background-image:var(--hex-dark),var(--hex-dark)!important;
background-size:52px 90px,52px 90px!important;
background-position:0 0,26px 45px!important;
opacity:.85!important;
}
.band--hex{position:relative;isolation:isolate}
.band--hex::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:var(--hex-light),var(--hex-light);
background-size:52px 90px,52px 90px;
background-position:0 0,26px 45px;
mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%);
-webkit-mask-image:radial-gradient(80% 70% at 50% 0%,#000,transparent 75%);
}
.watermark{position:absolute;pointer-events:none;opacity:.045;z-index:0}
.watermark svg{width:100%;height:100%;display:block}
.band--console .watermark{opacity:.07}
.wm-tr{top:-4%;right:-3%;width:min(420px,38vw);aspect-ratio:29.97/31.74}
.wm-bl{bottom:-8%;left:-4%;width:min(360px,32vw);aspect-ratio:29.97/31.74}
.band > .wrap{position:relative;z-index:1}
.scard-ico,.mega-ico,.ci,.app-org .ini{
clip-path:var(--hex-clip);border-radius:0!important;
}
.scard-ico{
width:46px;height:50px;background:var(--grad-brand);border:0;color:#fff;
display:grid;place-items:center;
box-shadow:0 8px 20px -10px rgba(42,118,174,.8);
}
.scard-ico svg{filter:drop-shadow(0 1px 1px rgba(4,18,29,.3))}
.mega-ico{width:34px;height:37px;background:linear-gradient(150deg,rgba(53,188,216,.3),rgba(17,63,113,.5));border:0;color:#fff}
.ci{width:38px;height:41px}
.clientbar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(22px,3.8vw,56px);
}
.clientbar .logo{display:grid;place-items:center;min-height:clamp(38px,4vw,52px)}
.clientbar p{
width:100%;text-align:center;margin:0 0 4px;
font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink-3);
}
.clientbar img{
max-height:clamp(38px,4vw,52px);max-width:clamp(112px,13vw,168px);
width:auto;height:auto;object-fit:contain;display:block;
filter:grayscale(1) contrast(1.05) opacity(.6);
transition:filter .3s ease, transform .3s ease;
}
.clientbar img[data-invert]{filter:grayscale(1) invert(1) contrast(1.05) opacity(.6)}
.clientbar a,.clientbar span.logo{display:block;line-height:0}
.clientbar img:hover{filter:none;transform:translateY(-2px)}
.clientbar img[data-invert]:hover{filter:grayscale(1) invert(1) opacity(1);transform:translateY(-2px)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .clientbar img{filter:grayscale(1) invert(1) contrast(1.05) opacity(.62)}
:root:not([data-theme="light"]) .clientbar img[data-invert]{filter:grayscale(1) contrast(1.05) opacity(.62)}
:root:not([data-theme="light"]) .clientbar img:hover{filter:grayscale(1) invert(1) opacity(1)}
:root:not([data-theme="light"]) .clientbar img[data-invert]:hover{filter:grayscale(1) opacity(1)}
}
:root[data-theme="dark"] .clientbar img{filter:grayscale(1) invert(1) contrast(1.05) opacity(.62)}
:root[data-theme="dark"] .clientbar img[data-invert]{filter:grayscale(1) contrast(1.05) opacity(.62)}
:root[data-theme="dark"] .clientbar img:hover{filter:grayscale(1) invert(1) opacity(1)}
:root[data-theme="dark"] .clientbar img[data-invert]:hover{filter:grayscale(1) opacity(1)}
/* ── Wat het oplost ───────────────────────────────────────────
Was een tabel met zes rijen naast een tweede vergelijkingstabel
verderop: twee keer hetzelfde trucje, en lang. Nu kaarten in een
raster. Bovenin het probleem, gedempt en met een fijne diagonale
arcering; daaronder een hexagon op een gradiëntlijn als scharnier,
en dan het antwoord in de merkkleur. Half zo hoog, en het leest
als één beweging per kaart in plaats van als een spreadsheet.
============================================================ */
.painlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.painlist--pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1040px){.painlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.painlist{grid-template-columns:1fr}}
.painlist-head{display:none}
.pain{
position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
border:1px solid var(--hair);border-radius:var(--r-l);background:var(--surface);
box-shadow:var(--e1);
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.pain:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(53,188,216,.5)}
.pain-n{
position:absolute;top:14px;right:14px;z-index:2;
width:26px;height:29px;clip-path:var(--hex-clip);
background:var(--sunken);color:var(--ink-3);
display:grid;place-items:center;
font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.04em;
transition:background .28s,color .28s;
}
.pain:hover .pain-n{background:var(--grad-brand);color:#fff}
.pain-q{
position:relative;padding:20px 22px 22px;display:flex;gap:11px;align-items:flex-start;
background:
repeating-linear-gradient(135deg,rgba(8,25,42,.028) 0 1px,transparent 1px 7px),
var(--sunken);
}
.pain-q .x{
width:18px;height:20px;flex:none;margin-top:2px;clip-path:var(--hex-clip);
background:rgba(255,92,122,.16);color:var(--no-ink);
display:grid;place-items:center;font-size:.6rem;font-weight:700;
}
.pain-q b{
display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;
letter-spacing:-.022em;color:var(--ink-2);line-height:1.28;padding-right:22px;
}
.pain-q p{font-size:.84rem;color:var(--ink-3);line-height:1.45;margin-top:5px}
.pain-a{
position:relative;padding:22px 22px 22px;display:flex;gap:11px;align-items:flex-start;
flex:1;background:linear-gradient(170deg,var(--accent-soft),transparent 78%);
}
.pain-a::before{
content:"";position:absolute;left:22px;top:-9px;width:17px;height:19px;z-index:2;
clip-path:var(--hex-clip);background:var(--grad-brand);
transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.pain-a::after{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--brand-light) 22%,var(--brand-mid) 78%,transparent);
opacity:.6;
}
.pain:hover .pain-a::before{transform:translateY(1px) scale(1.14)}
.pain-a .v{
width:18px;height:20px;flex:none;margin-top:2px;clip-path:var(--hex-clip);
background:rgba(0,214,143,.2);color:var(--ok-ink);
display:grid;place-items:center;font-size:.6rem;font-weight:700;
}
.pain-a b{
display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;
letter-spacing:-.022em;color:var(--accent);line-height:1.28;
}
.pain-a p{font-size:.84rem;color:var(--ink-2);line-height:1.5;margin-top:5px}
.painlist.rv .pain,.painlist .pain{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s}
.painlist.in .pain{opacity:1;transform:none}
.painlist.in .pain:nth-child(2){transition-delay:.05s}
.painlist.in .pain:nth-child(3){transition-delay:.10s}
.painlist.in .pain:nth-child(4){transition-delay:.15s}
.painlist.in .pain:nth-child(5){transition-delay:.20s}
.painlist.in .pain:nth-child(6){transition-delay:.25s}
.painlist.in .pain:nth-child(7){transition-delay:.30s}
.painlist.in .pain:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
.painlist .pain{opacity:1;transform:none;transition:none}
}
/* ============================================================
3D dienstenslider, coverflow op de vijf kerndiensten
============================================================ */
.showcase{position:relative;overflow:hidden}
.slider3d{
position:relative;perspective:1700px;perspective-origin:50% 42%;
height:clamp(452px,44vw,536px);margin-top:clamp(26px,3.4vw,44px);
touch-action:pan-y;
}
.slide{
position:absolute;top:0;left:50%;
width:min(392px,80vw);height:100%;
margin-left:calc(min(392px,80vw) / -2);
transform-style:preserve-3d;
transition:transform .75s cubic-bezier(.22,.75,.28,1), opacity .55s ease, filter .55s ease;
will-change:transform,opacity;
}
.slide-in{
height:100%;display:flex;flex-direction:column;gap:14px;
padding:clamp(24px,2.6vw,32px);
border-radius:var(--r-xl);
background:linear-gradient(168deg,#0C2136 0%,#071522 78%);
border:1px solid var(--console-line);
box-shadow:0 50px 90px -44px rgba(0,0,0,.95);
position:relative;overflow:hidden;
}
.slide-in::before{
content:"";position:absolute;right:-56px;top:-56px;width:210px;height:227px;
clip-path:var(--hex-clip);
background:linear-gradient(150deg,rgba(53,188,216,.18),transparent 62%);
pointer-events:none;
}
.slide[data-pos="0"] .slide-in{
border-color:rgba(53,188,216,.4);
box-shadow:0 60px 110px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(53,188,216,.18), 0 0 70px -30px rgba(53,188,216,.5);
}
.slide-ico{
width:52px;height:56px;flex:none;clip-path:var(--hex-clip);
background:var(--grad-brand);color:#fff;display:grid;place-items:center;
box-shadow:0 10px 26px -12px rgba(53,188,216,.9);
}
.slide-n{
position:absolute;right:22px;top:18px;
font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
color:var(--console-ink-3);
}
.slide h3{color:#fff;font-size:clamp(1.24rem,1.9vw,1.55rem);letter-spacing:-.03em}
.slide .pitch{font-size:.95rem;line-height:1.55;color:var(--console-ink-2)}
.slide ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.slide li{display:flex;gap:10px;align-items:flex-start;font-size:.87rem;color:var(--console-ink-2);line-height:1.45}
.slide li::before{
content:"";width:10px;height:11px;flex:none;margin-top:5px;
clip-path:var(--hex-clip);background:var(--brand-light);
}
.slide .go{
margin-top:auto;display:inline-flex;align-items:center;gap:9px;
font-size:.92rem;font-weight:600;color:var(--brand-light);text-decoration:none;
}
.slide .go span:last-child{transition:transform .22s}
.slide .go:hover span:last-child{transform:translateX(5px)}
.slider-ui{
display:flex;align-items:center;justify-content:center;gap:14px;
margin-top:clamp(18px,2.4vw,28px);
}
.slider-ui button.nav{
width:44px;height:48px;flex:none;clip-path:var(--hex-clip);
border:0;cursor:pointer;background:rgba(53,188,216,.14);color:var(--console-ink);
display:grid;place-items:center;transition:background .22s,color .22s;
}
.slider-ui button.nav:hover{background:var(--grad-brand);color:#fff}
.dots{display:flex;gap:8px;align-items:center}
.dots button{
width:9px;height:10px;padding:0;border:0;cursor:pointer;clip-path:var(--hex-clip);
background:rgba(159,186,204,.32);transition:background .25s,transform .25s;
}
.dots button[aria-current="true"]{background:var(--brand-light);transform:scale(1.5)}
.slider-label{
min-width:clamp(140px,16vw,210px);text-align:center;
font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--console-ink-3);
}
@media (prefers-reduced-motion:reduce){
.slider3d{height:auto;perspective:none;display:grid;gap:14px}
.slide{position:static;width:auto;margin:0;transform:none!important;opacity:1!important;filter:none!important}
.slider-ui{display:none}
}
/* zonder JS of bij prefers-reduced-motion draait er niets; dan wordt het
een gewone lijst en blijft alle inhoud gewoon leesbaar */
.slider3d:not(.is-live){height:auto;perspective:none;display:grid;gap:14px}
.slider3d:not(.is-live) .slide{position:static;width:auto;margin:0;transform:none;opacity:1;filter:none}
.slider3d:not(.is-live) + .slider-ui{display:none}
@media (max-width:600px){
.slider3d{height:clamp(470px,120vw,560px)}
.slider-label{display:none}
}
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:.97rem;line-height:1.5;color:var(--console-ink-2)}
.checks li::before{
content:"";width:17px;height:19px;flex:none;margin-top:3px;clip-path:var(--hex-clip);
background:rgba(0,214,143,.22);
background-image:linear-gradient(135deg,transparent 42%,var(--success) 42%,var(--success) 58%,transparent 58%);
}
.urgency{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;
padding:20px 22px;border-radius:var(--r-l);
border:1px solid var(--console-line);border-left:2px solid var(--warn);
background:linear-gradient(100deg,rgba(255,176,32,.1),transparent 70%);
}
.u-fig{
font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);
letter-spacing:-.045em;color:var(--warn);line-height:1;white-space:nowrap;
}
.urgency p{font-size:.88rem;line-height:1.5;color:var(--console-ink-2);margin:0}
@media (max-width:560px){.urgency{grid-template-columns:1fr;gap:10px}}
/* leverancierslogo's krijgen een witte plaquette: merkrichtlijnen schrijven de
originele kleuren voor, en op een donkere band lukt dat alleen zo. */
.plogo{
display:flex;align-items:center;justify-content:center;flex:none;
min-height:clamp(48px,4.6vw,60px);padding:9px 16px;
background:#fff;border-radius:13px;
box-shadow:0 10px 24px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
color:#1F3448;font-family:Archivo,sans-serif;font-weight:600;font-size:.9rem;letter-spacing:-.02em;
}
.plogo em{
font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;
text-transform:uppercase;color:#0F5E86;border:1px solid rgba(15,94,134,.32);border-radius:5px;
padding:2px 6px;margin-left:8px;
}
.plogo--img,.plogo--badge{padding:6px 14px}
.pimg{height:clamp(30px,3vw,40px);width:auto;display:block}
.pbadge{height:clamp(46px,4.6vw,58px);width:auto;aspect-ratio:64/73;flex:none;display:block}
/* ============================================================
Partnerbalk v2, lichte band, logo's in eigen kleur
Op een donkere band moet je leverancierslogo's filteren of op
witte vlakjes zetten; dat werd rommelig en het is bovendien in
strijd met de meeste merkrichtlijnen. Op licht mag alles zoals
het hoort te zijn.
============================================================ */
.partners{
background:#F4F9FC;
border-top:1px solid #DCE7EE;border-bottom:1px solid #DCE7EE;
padding-block:clamp(22px,2.6vw,32px);
}
.partners-in{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:clamp(22px,3.6vw,54px);
}
.partners p{
width:100%;text-align:center;margin:0 0 4px;
font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.19em;
text-transform:uppercase;color:#6E8697;
}
.plogo{
display:flex;align-items:center;gap:9px;flex:none;
background:none;border:0;border-radius:0;box-shadow:none;padding:0;min-height:0;
font-family:Archivo,sans-serif;font-weight:600;font-size:.94rem;letter-spacing:-.022em;
color:var(--ink-2);white-space:nowrap;
}
.plogo em{
font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.11em;
text-transform:uppercase;color:var(--accent);border:1px solid var(--hair);border-radius:5px;
padding:3px 7px;margin-left:2px;background:var(--accent-soft);
}
.plogo--img,.plogo--badge{padding:0}
/* Elk logo is bijgesneden tot de inkt, daarna per merk op optisch gelijk gewicht gezet.
Een uniforme hoogte oogt juist ongelijk: de ene lockup is twee regels hoog, de andere een woord. */
.pimg{width:auto;display:block;filter:none;height:clamp(26px,2.7vw,34px)}
.pimg--ms{height:clamp(32px,3.4vw,44px);aspect-ratio:369/80}
.pimg--xe{height:clamp(24px,2.5vw,32px);aspect-ratio:170/64}
.pimg--nl{height:clamp(30px,3.2vw,41px);aspect-ratio:199/82}
.pbadge{height:clamp(48px,4.8vw,62px);width:auto;aspect-ratio:64/73;flex:none;display:block}
/* ============================================================
Mega-menu v2, betere zichtbaarheid en echte icoontjes
============================================================ */
.mega{
background:linear-gradient(168deg,#102B44 0%,#0A1E31 62%,#08192A 100%);
color:var(--console-ink);
border:1px solid rgba(53,188,216,.26);
box-shadow:0 60px 120px -44px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset,
0 0 90px -50px rgba(53,188,216,.5);
padding:20px;
}
.mega::after{
content:"";position:absolute;top:-7px;left:38px;width:12px;height:12px;
background:#102B44;border-left:1px solid rgba(53,188,216,.26);border-top:1px solid rgba(53,188,216,.26);
transform:rotate(45deg);
}
.mega-title{
grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:0 0 4px 4px;
font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--brand-light);
}
.mega-title::after{content:"";flex:1;height:1px;background:rgba(53,188,216,.2)}
.mega-link{
position:relative;grid-template-columns:38px 1fr;gap:13px;padding:11px 12px;
border-radius:12px;overflow:hidden;
}
.mega-link::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;
background:var(--grad-brand);transform:scaleY(0);transform-origin:center;
transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.mega-link:hover{background:rgba(53,188,216,.11);border-color:transparent;transform:none}
.mega-link:hover::before{transform:scaleY(1)}
.mega-link:focus-visible{background:rgba(53,188,216,.14)}
.mega-ico{
width:38px;height:41px;clip-path:var(--hex-clip);border:0;border-radius:0;
background:linear-gradient(155deg,rgba(53,188,216,.26),rgba(17,63,113,.55));
color:var(--brand-light);display:grid;place-items:center;
transition:background .26s, color .26s, transform .26s cubic-bezier(.2,.7,.3,1);
}
.mega-link:hover .mega-ico{background:var(--grad-brand);color:#fff;transform:translateY(-1px) scale(1.04)}
.mega-ico svg{width:19px;height:19px;display:block}
.mega-link b{font-size:.95rem;color:#fff;letter-spacing:-.024em}
.mega-link small{color:#93AFC4;font-size:.8rem;margin-top:2px}
.mega-link:hover small{color:#B6CEDF}
.mega-feat{
grid-column:1/-1;display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
margin-top:6px;padding:14px 16px;border-radius:14px;text-decoration:none;
background:linear-gradient(100deg,rgba(53,188,216,.16),rgba(53,188,216,.04) 70%);
border:1px solid rgba(53,188,216,.3);
transition:border-color .24s, background .24s;
}
.mega-feat:hover{border-color:var(--brand-light);background:linear-gradient(100deg,rgba(53,188,216,.24),rgba(53,188,216,.06) 70%)}
.mega-feat .fi{width:44px;height:48px;clip-path:var(--hex-clip);background:var(--grad-brand);color:#fff;display:grid;place-items:center}
.mega-feat b{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.95rem;color:#fff;letter-spacing:-.024em}
.mega-feat small{display:block;font-size:.8rem;color:#A8C4D6;margin-top:2px}
.mega-feat .fcta{
font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
color:#04121D;background:var(--brand-light);border-radius:999px;padding:7px 13px;white-space:nowrap;
}
@media (max-width:1120px){.mega-feat{grid-template-columns:44px 1fr}.mega-feat .fcta{display:none}}
.mega-foot{margin-top:14px;padding-top:14px;border-top:1px solid rgba(53,188,216,.16)}
.mega-foot p{color:#93AFC4}
.nav-btn{color:#B6CEDF}
.nav-btn:hover,.nav-item[data-open="true"] .nav-btn{color:#fff;background:rgba(53,188,216,.14)}
.nav-item[data-open="true"] .nav-btn{box-shadow:inset 0 -2px 0 var(--brand-light)}
/* ---------- ghost-knop: structureel in plaats van per container ----------
Deze knop is vier keer onleesbaar geweest omdat er telkens een donkere
container aan een handmatige lijst werd toegevoegd en er eentje werd
vergeten. Hij erft nu gewoon de tekstkleur van zijn omgeving, en de rand
is een doorzichtige versie van diezelfde kleur. Voorwaarde: elk donker
oppervlak zet zelf een tekstkleur (band--console, hero, subhero, finale,
calc-out, minicalc-out, app, mega, die doen dat allemaal). */
.btn--ghost{
--btn-fg:inherit;
--btn-bd:color-mix(in srgb, currentColor 26%, transparent);
}
.btn--ghost:hover{
--btn-bd:var(--brand-light);
background:color-mix(in srgb, var(--brand-light) 13%, transparent);
}
/* ============================================================
Hosting, prijskaarten, domeinzoeker en tarieventabel
============================================================ */
.pkg-switch{display:flex;justify-content:center;margin-bottom:clamp(24px,3vw,36px)}
.pkg-switch .seg{max-width:420px;width:100%}
.pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pkgs[hidden]{display:none}
@media (max-width:860px){.pkgs{grid-template-columns:1fr}}
.pkg{
position:relative;display:flex;flex-direction:column;gap:16px;
padding:clamp(26px,3vw,36px);border-radius:var(--r-xl);
border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;overflow:hidden;
}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(53,188,216,.5)}
.pkg::after{
content:"";position:absolute;right:-40px;top:-40px;width:180px;height:195px;
clip-path:var(--hex-clip);background:linear-gradient(150deg,rgba(53,188,216,.12),transparent 64%);
pointer-events:none;
}
.pkg--pick{border-color:var(--accent);box-shadow:var(--e2),0 0 0 1px var(--accent) inset}
.pkg-flag{
position:absolute;top:0;right:0;padding:7px 16px;border-radius:0 var(--r-xl) 0 14px;
background:var(--grad-btn);color:#fff;
font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
}
.pkg > *{position:relative;z-index:1}
.pkg h3{font-size:clamp(1.2rem,1.8vw,1.45rem)}
.pkg .sub{font-size:.9rem;color:var(--ink-3);margin-top:-8px}
.pkg-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pkg-price b{
font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.2rem,3.6vw,2.9rem);
letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pkg-price .per{font-size:.92rem;color:var(--ink-3)}
.pkg-setup{
display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--ink-3);
font-family:"IBM Plex Mono",monospace;letter-spacing:.03em;
}
.pkg-setup b{color:var(--ink-2);font-weight:600}
.pkg-specs{list-style:none;margin:0;padding:0;display:grid;gap:10px;border-top:1px solid var(--hair-soft);padding-top:16px}
.pkg-specs li{display:grid;grid-template-columns:16px 1fr auto;gap:11px;align-items:center;font-size:.92rem;color:var(--ink-2)}
.pkg-specs li::before{
content:"";width:13px;height:14px;clip-path:var(--hex-clip);background:var(--grad-brand);
}
.pkg-specs li em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pkg .btnrow{margin-top:auto;padding-top:6px}
.dombox{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
padding:14px;border-radius:var(--r-l);border:1px solid var(--console-line);
background:rgba(4,14,25,.55);
}
.dombox input{
width:100%;padding:15px 17px;border-radius:12px;border:1px solid var(--console-line);
background:rgba(4,14,25,.7);color:var(--console-ink);font-size:1rem;
}
.dombox input::placeholder{color:var(--console-ink-3)}
.dombox input:focus{border-color:var(--brand-light);outline:none;box-shadow:0 0 0 3px rgba(53,188,216,.18)}
@media (max-width:620px){.dombox{grid-template-columns:1fr}}
.domtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.domtag{
display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border-radius:999px;
border:1px solid var(--console-line);background:rgba(53,188,216,.07);
font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--console-ink);
}
.domtag span{color:var(--brand-light);font-size:.76rem}
.domgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-l);overflow:hidden}
.domgrid div{background:var(--surface);padding:18px 16px;text-align:center;transition:background .22s}
.domgrid div:hover{background:var(--accent-soft)}
.domgrid b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink)}
.domgrid span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:5px;font-variant-numeric:tabular-nums}
@media (max-width:860px){.domgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.domgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ============================================================
Mobiel menu v3, gelaagd
Versie 2 was een lijst van 35 links in klapmenu's. Je opende
Diensten en er schoven negen regels naar beneden, waardoor de
rest van het menu buiten beeld viel. Nu schuift het paneel
opzij naar een tweede laag, zoals iOS en Android het doen:
nooit meer dan zeven regels tegelijk, altijd een terugknop.
============================================================ */
.drawer{
position:fixed;inset:0;z-index:95;color:var(--console-ink);
display:flex;flex-direction:column;
padding:14px var(--gut) 0;
background:
radial-gradient(90% 50% at 50% 0%, rgba(53,188,216,.14), transparent 62%),
linear-gradient(180deg,#0C2136 0%,#08192A 58%);
transform:translateY(-100%);visibility:hidden;
transition:transform .42s cubic-bezier(.32,.72,0,1),visibility 0s linear .42s;
}
.drawer.is-open{transform:translateY(0);visibility:visible;transition:transform .42s cubic-bezier(.32,.72,0,1),visibility 0s}
.drawer-head{
flex:none;display:flex;align-items:center;justify-content:space-between;
height:58px;margin-bottom:2px;
}
/* Het schuifvlak. Negatieve marge zodat een rij bij het aantikken
tot aan de schermrand kan oplichten, terwijl de tekst uitgelijnd
blijft met de rest van de pagina. */
.dnav{position:relative;flex:1;overflow:hidden;margin:0 calc(var(--gut) * -1)}
.dpane{
position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:0 var(--gut) 44px;
opacity:0;visibility:hidden;transform:translateX(30px);
transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .26s,visibility 0s linear .4s;
}
.dpane.is-active{
opacity:1;visibility:visible;transform:translateX(0);
transition:transform .4s cubic-bezier(.32,.72,0,1),opacity .26s,visibility 0s;
}
/* Het hoofdmenu wijkt naar links terwijl de laag eroverheen komt.
Dat leest als dieper gaan, niet als een sprong. */
.dpane[data-pane="root"]{transform:translateX(-22%)}
.dpane[data-pane="root"].is-active{transform:translateX(0)}
.dtop{
position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
padding:4px 0 15px;
background:linear-gradient(180deg,#0C2136 66%,rgba(12,33,54,0));
}
.dback{
display:inline-flex;align-items:center;gap:8px;flex:none;
padding:9px 15px 9px 12px;border-radius:999px;
border:1px solid var(--console-line);background:rgba(53,188,216,.08);
color:var(--brand-light);font-family:Archivo,sans-serif;font-weight:600;
font-size:.82rem;line-height:1;cursor:pointer;
transition:background .18s;
}
.dback:active{background:rgba(53,188,216,.2)}
.dbchev{
width:7px;height:7px;flex:none;
border-left:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);
}
.dtitle{
margin:0;font-family:Archivo,sans-serif;font-weight:700;font-size:1.14rem;
letter-spacing:-.032em;color:#fff;
}
.drawer-quick{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 20px;
}
.drawer-quick a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
padding:14px 8px;border-radius:14px;text-decoration:none;
border:1px solid var(--console-line);background:rgba(53,188,216,.07);
font-size:.74rem;color:var(--console-ink-2);text-align:center;line-height:1.25;
}
.drawer-quick a:active{background:rgba(53,188,216,.16)}
.drawer-quick .qi{
width:30px;height:33px;clip-path:var(--hex-clip);display:grid;place-items:center;
background:var(--grad-brand);color:#fff;
}
.drawer-quick .qi svg{width:15px;height:15px}
.dgroup{
width:100%;display:grid;grid-template-columns:34px 1fr 10px;gap:13px;align-items:center;
padding:14px 4px;background:none;border:0;border-bottom:1px solid var(--console-line);
text-align:left;cursor:pointer;color:inherit;font:inherit;
transition:background .18s;
}
.dgroup:active{background:rgba(53,188,216,.1)}
.dchev{
width:8px;height:8px;justify-self:end;
border-right:2px solid var(--console-ink-3);border-top:2px solid var(--console-ink-3);
transform:rotate(45deg);transition:transform .22s,border-color .22s;
}
.dgroup:active .dchev{border-color:var(--brand-light);transform:rotate(45deg) translate(2px,-2px)}
.ditem{
display:grid;grid-template-columns:34px 1fr;gap:13px;align-items:center;
padding:12px 10px;margin:0 -10px;border-radius:13px;text-decoration:none;
transition:background .18s;
}
.ditem:active{background:rgba(53,188,216,.13)}
.dtxt{min-width:0}
.dtxt b{
display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:1.02rem;
letter-spacing:-.028em;color:#fff;line-height:1.25;
}
.dtxt small{
display:block;font-size:.78rem;color:#A8C4D6;margin-top:2px;line-height:1.4;
}
.drawer .dico{
width:34px;height:37px;flex:none;clip-path:var(--hex-clip);
background:linear-gradient(155deg,rgba(53,188,216,.28),rgba(17,63,113,.55));
color:var(--brand-light);display:grid;place-items:center;
}
.drawer .dico svg{width:16px;height:16px;display:block}
.dsep{
margin:24px 0 4px;font-family:"IBM Plex Mono",monospace;
font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--console-ink-3);
}
.dflat{
display:flex;align-items:center;justify-content:space-between;
padding:15px 4px;border-bottom:1px solid var(--console-line);
font-family:Archivo,sans-serif;font-weight:600;font-size:1.02rem;
letter-spacing:-.028em;color:#fff;text-decoration:none;
}
.dflat::after{
content:"";width:8px;height:8px;flex:none;
border-right:2px solid var(--console-ink-3);border-top:2px solid var(--console-ink-3);
transform:rotate(45deg);
}
.drawer-feat{
display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
margin-top:24px;padding:16px;border-radius:16px;text-decoration:none;
background:linear-gradient(100deg,rgba(53,188,216,.18),rgba(53,188,216,.05) 72%);
border:1px solid rgba(53,188,216,.32);
}
.drawer-feat .fi{width:44px;height:48px;clip-path:var(--hex-clip);background:var(--grad-brand);color:#fff;display:grid;place-items:center}
.drawer-feat b{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.97rem;color:#fff;letter-spacing:-.024em}
.drawer-feat small{display:block;font-size:.8rem;color:#A8C4D6;margin-top:3px;line-height:1.4}
.drawer-cta{margin-top:18px;display:grid;gap:10px}
.drawer-foot{
margin-top:26px;padding-top:18px;border-top:1px solid var(--console-line);
display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
font-size:.78rem;color:var(--console-ink-3);text-align:center;
}
/* Regels komen na elkaar binnen. De selector begint bij .is-open zodat
de animatie ook loopt bij het openen van het menu zelf, niet alleen
bij het wisselen van laag. */
@keyframes dIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.drawer.is-open .dpane.is-active .dpane-body > *{animation:dIn .36s cubic-bezier(.22,.7,.3,1) backwards}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(1){animation-delay:.03s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(2){animation-delay:.06s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(3){animation-delay:.09s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(4){animation-delay:.12s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(5){animation-delay:.15s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(6){animation-delay:.18s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(7){animation-delay:.21s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(8){animation-delay:.24s}
.drawer.is-open .dpane.is-active .dpane-body > *:nth-child(n+9){animation-delay:.27s}
@media (prefers-reduced-motion:reduce){
.drawer,.dpane{transition-duration:.01ms}
.drawer.is-open .dpane.is-active .dpane-body > *{animation:none}
}
/* ============================================================
Contact, routekaarten, formulier en openingstijden
============================================================ */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.routes{grid-template-columns:1fr}}
.route{
position:relative;display:flex;flex-direction:column;gap:12px;
padding:clamp(24px,2.8vw,32px);border-radius:var(--r-l);
border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);
text-decoration:none;overflow:hidden;
transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.route:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(53,188,216,.5)}
.route::after{
content:"";position:absolute;right:-36px;top:-36px;width:160px;height:173px;
clip-path:var(--hex-clip);background:linear-gradient(150deg,rgba(53,188,216,.13),transparent 64%);
opacity:0;transition:opacity .3s;pointer-events:none;
}
.route:hover::after{opacity:1}
.route > *{position:relative;z-index:1}
.route .ri{width:46px;height:50px;clip-path:var(--hex-clip);background:var(--grad-brand);color:#fff;display:grid;place-items:center}
.route h3{font-size:1.1rem}
.route .big{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.2rem,1.9vw,1.45rem);letter-spacing:-.035em;color:var(--accent)}
.route p{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.route .when{margin-top:auto;padding-top:10px;border-top:1px solid var(--hair-soft);font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cform .full{grid-column:1/-1}
@media (max-width:700px){.cform{grid-template-columns:1fr}}
.field-lab{display:block;font-size:.86rem;font-weight:600;color:var(--console-ink);margin-bottom:7px}
.cform input,.cform textarea,.cform select{
width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--console-line);
background:rgba(4,14,25,.6);color:var(--console-ink);font-size:.95rem;font-family:inherit;
}
.cform textarea{min-height:130px;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:var(--console-ink-3)}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--brand-light);outline:none;box-shadow:0 0 0 3px rgba(53,188,216,.18)}
.hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--console-line);border:1px solid var(--console-line);border-radius:var(--r-m);overflow:hidden}
.hours div{background:rgba(4,14,25,.4);padding:13px 16px;display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--console-ink-2)}
.hours div b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:560px){.hours{grid-template-columns:1fr}}
.tl{display:grid;gap:0;border-left:2px solid var(--hair);margin-left:12px}
.tl-item{position:relative;padding:0 0 30px 30px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
content:"";position:absolute;left:-9px;top:4px;width:16px;height:17px;
clip-path:var(--hex-clip);background:var(--grad-brand);
}
.tl-item .yr{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.13em;color:var(--accent)}
.tl-item h3{font-size:1.05rem;margin:5px 0 6px}
.tl-item p{font-size:.93rem;color:var(--ink-2);line-height:1.55;max-width:62ch}
.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.values{grid-template-columns:1fr}}
.value{border:1px solid var(--console-line);border-radius:var(--r-l);padding:24px;background:rgba(53,188,216,.05)}
.value .vn{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.13em;color:var(--brand-light)}
.value h3{color:#fff;font-size:1.05rem;margin:8px 0 8px}
.value p{font-size:.9rem;color:var(--console-ink-2);line-height:1.55}
/* ============================================================
Prijsblokken, echte tarieven per gebruiker per maand
============================================================ */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:980px){.prices{grid-template-columns:1fr}}
.pcard{
position:relative;display:flex;flex-direction:column;gap:15px;
padding:clamp(26px,3vw,34px);border-radius:var(--r-xl);
border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);overflow:hidden;
transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:rgba(53,188,216,.5)}
.pcard::after{
content:"";position:absolute;right:-44px;top:-44px;width:190px;height:206px;
clip-path:var(--hex-clip);background:linear-gradient(150deg,rgba(53,188,216,.14),transparent 62%);
pointer-events:none;
}
.pcard > *{position:relative;z-index:1}
.pcard--hero{
background:linear-gradient(168deg,#0C2136,#071522 74%);border-color:rgba(53,188,216,.35);color:var(--console-ink);
box-shadow:var(--e3),0 0 70px -34px rgba(53,188,216,.55);
}
.pcard--hero h3,.pcard--hero .pc-amt{color:#fff}
.pcard--hero .pc-sub,.pcard--hero li{color:var(--console-ink-2)}
.pcard--hero .pc-per{color:var(--console-ink-3)}
.pcard--hero .pc-specs{border-top-color:var(--console-line)}
.pc-tag{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--accent);
}
.pcard--hero .pc-tag{color:var(--brand-light)}
.pc-tag::before{content:"";width:12px;height:13px;clip-path:var(--hex-clip);background:currentColor}
.pcard h3{font-size:clamp(1.25rem,1.9vw,1.5rem)}
.pc-sub{font-size:.93rem;color:var(--ink-2);line-height:1.55}
.pc-price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:2px}
.pc-amt{
font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.4rem,4.4vw,3.3rem);
letter-spacing:-.055em;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pc-per{font-size:.88rem;color:var(--ink-3);line-height:1.35}
.pc-specs{list-style:none;margin:0;padding:16px 0 0;display:grid;gap:9px;border-top:1px solid var(--hair-soft)}
.pc-specs li{display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.pc-specs li::before{content:"";width:13px;height:14px;flex:none;margin-top:5px;clip-path:var(--hex-clip);background:var(--grad-brand)}
.pcard .btnrow{margin-top:auto;padding-top:6px}
.stack{
display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1px;
background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-l);overflow:hidden;
}
.stack > div{background:var(--surface);padding:20px 22px;position:relative}
.stack .sl{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.stack b{display:block;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.04em;color:var(--ink);margin-top:7px;font-variant-numeric:tabular-nums}
.stack span.desc{display:block;font-size:.83rem;color:var(--ink-3);margin-top:6px;line-height:1.45}
.stack .op{
position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:2;
width:22px;height:24px;clip-path:var(--hex-clip);background:var(--grad-brand);color:#fff;
display:grid;place-items:center;font-size:.8rem;font-weight:700;
}
.stack > div:last-child .op{display:none}
@media (max-width:860px){
.stack{grid-template-columns:1fr}
.stack .op{right:50%;top:auto;bottom:-12px;transform:translateX(50%)}
}
.cfg{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;
background:var(--surface);box-shadow:var(--e3);
}
.cfg-in{padding:clamp(24px,3vw,38px);border-right:1px solid var(--hair)}
.cfg-out{padding:clamp(24px,3vw,38px);background:var(--console);color:var(--console-ink);position:relative;overflow:hidden}
.cfg-out::before{content:"";position:absolute;inset:auto -20% -45% -20%;height:75%;background:radial-gradient(50% 60% at 50% 100%,rgba(53,188,216,.22),transparent 70%);pointer-events:none}
.cfg-out > *{position:relative;z-index:2}
@media (max-width:900px){.cfg{grid-template-columns:1fr}.cfg-in{border-right:0;border-bottom:1px solid var(--hair)}}
.opt{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
padding:15px 16px;border:1px solid var(--hair);border-radius:14px;margin-bottom:10px;
cursor:pointer;transition:border-color .22s,background .22s;
}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt[data-on="true"]{border-color:var(--accent);background:var(--accent-soft)}
.opt[data-locked="true"]{cursor:default;opacity:.95}
.opt .box{
width:22px;height:24px;clip-path:var(--hex-clip);background:var(--hair);
display:grid;place-items:center;color:transparent;font-size:.7rem;font-weight:700;transition:background .22s,color .22s;
}
.opt[data-on="true"] .box{background:var(--grad-brand);color:#fff}
.opt b{display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.98rem;letter-spacing:-.022em;color:var(--ink)}
.opt small{display:block;font-size:.82rem;color:var(--ink-3);margin-top:3px;line-height:1.45}
.opt .amt{font-family:"IBM Plex Mono",monospace;font-size:.86rem;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cfg-total b{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(2.6rem,5.4vw,3.8rem);letter-spacing:-.05em;line-height:.95;color:#fff;font-variant-numeric:tabular-nums}
.cfg-total .cur{font-size:.4em;color:var(--brand-light);font-weight:600}
.cfg-total .per{font-size:.9rem;color:var(--console-ink-3)}
.cfg-lines{display:grid;gap:1px;background:var(--console-line);border:1px solid var(--console-line);border-radius:var(--r-m);overflow:hidden;margin:22px 0}
.cfg-lines div{background:#081827;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;font-size:.88rem;color:var(--console-ink-2)}
.cfg-lines div b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.cfg-lines div.sum{background:rgba(53,188,216,.1)}
.cfg-delta{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--console-line);
background:rgba(4,14,25,.5);
}
.cfg-delta .dv{font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.04em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.cfg-delta.good .dv{color:var(--success)}
.cfg-delta.more .dv{color:var(--warn)}
.cfg-delta p{font-size:.86rem;color:var(--console-ink-2);line-height:1.5;margin:0}
.learn{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(16px,2.2vw,28px);align-items:start}
@media (max-width:1000px){.learn{grid-template-columns:1fr}}
.lp-tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.lp-tab{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px;border:1px solid transparent;color:var(--console-ink-3);white-space:nowrap}
.lp-tab.on{color:var(--brand-light);border-color:rgba(53,188,216,.32);background:rgba(53,188,216,.09)}
.lp-year{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:5px}
.lp-m{position:relative;min-width:0;min-height:58px;border-radius:8px;border:1px solid var(--console-line);background:rgba(255,255,255,.02);padding:13px 9px 9px;display:grid;gap:3px;align-content:start}
.lp-m::before{content:"";position:absolute;left:9px;right:9px;top:6px;height:4px;border-radius:3px;background:var(--brand-light)}
.lp-m::after{content:attr(data-t);font-size:.72rem;line-height:1.25;color:var(--console-ink-2);overflow-wrap:anywhere}
.lp-m{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--console-ink-3)}
.lp-m[data-s="warn"]::before{background:var(--warn)}
.lp-m[data-s="soon"]::before{background:var(--console-line)}
.lp-m[data-s="soon"]{opacity:.55}
@media (max-width:520px){.lp-year{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}}
.courses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--console-line);border-top:1px solid var(--console-line)}
@media (max-width:560px){.courses{grid-template-columns:1fr}}
.course{background:#081827;padding:15px 17px;display:grid;gap:9px;align-content:start;min-width:0}
.course h5{font-size:.92rem;font-weight:600;color:var(--console-ink);letter-spacing:-.012em}
.course p{font-size:.79rem;color:var(--console-ink-3);line-height:1.5}
.pbar{height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand-light),var(--brand-mid))}
.pbar i.warnfill{background:linear-gradient(90deg,var(--warn),#E08A12)}
.pmeta{display:flex;justify-content:space-between;gap:10px;font-family:"IBM Plex Mono",monospace;font-size:.65rem;color:var(--console-ink-3);font-variant-numeric:tabular-nums}
.lp-side{display:grid;gap:12px;min-width:0}
.lp-fact{border:1px solid var(--console-line);border-radius:var(--r-m);background:rgba(53,188,216,.045);padding:16px 18px;min-width:0}
.lp-fact b{display:block;font-family:"Archivo",system-ui,sans-serif;font-size:1.6rem;letter-spacing:-.04em;color:var(--console-ink);line-height:1}
.lp-fact span{display:block;margin-top:6px;font-size:.84rem;color:var(--console-ink-2);line-height:1.5}
.lp-fact small{display:block;margin-top:7px;font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--console-ink-3)}
.lp-dept{display:grid;gap:9px;margin-top:2px}
.lp-dept-row{display:grid;grid-template-columns:minmax(0,1fr) 58px;gap:10px;align-items:center;font-size:.82rem;color:var(--console-ink-2)}
.lp-dept-row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-dept-row .vv{font-family:"IBM Plex Mono",monospace;font-size:.72rem;text-align:right;color:var(--console-ink-3);font-variant-numeric:tabular-nums}
.lp-dept-row .pbar{grid-column:1/-1;margin-top:-3px}
/* ============================================================
Bestel- en offertemodal, gedeeld over alle pagina's.
Eén formulier, per dienst voorgevuld via [data-order].
============================================================ */
.oscrim{
position:fixed;inset:0;z-index:120;display:grid;place-items:center;
padding:clamp(12px,3vw,32px);background:rgba(4,14,25,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transition:opacity .26s ease;overflow-y:auto;
}
.oscrim[hidden]{display:none}
.oscrim.show{opacity:1}
/* Het formulier was 3232px hoog op een scherm van 844, dus bijna vier
schermen, en de verstuurknop stond op 1304px. Nu: vaste kop, scrollend
midden met één stap tegelijk, en een balk onderin die altijd in beeld
blijft. Op een telefoon vult hij het hele scherm, zoals een app. */
.omodal{
position:relative;width:min(720px,100%);margin:auto;
max-height:calc(100dvh - clamp(24px,6vw,64px));
display:flex;flex-direction:column;
background:var(--surface);color:var(--ink);
border:1px solid var(--hair);border-radius:var(--r-xl);
box-shadow:var(--e3);overflow:hidden;
transform:translateY(14px) scale(.985);
transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.oscrim.show .omodal{transform:none}
.omodal .omodal-head{flex:none}
.omodal .oform{display:flex;flex-direction:column;min-height:0;flex:1}
.obody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 clamp(18px,3vw,30px) 18px}
.opane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.opane[hidden]{display:none}
.opane > .full,.opane > .oteam,.opane > .opick,.opane > .osum,.opane > .ostep{grid-column:1/-1}
.obar{
flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:14px clamp(18px,3vw,30px);
border-top:1px solid var(--hair);background:var(--sunken);
}
.obar-l{min-width:0;flex:1}
.obar-lbl{display:block;font-size:.82rem;color:var(--ink-3);line-height:1.3}
.obar-tot{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums}
.obar-tot .cur{font-size:1rem;color:var(--ink-2)}
.obar-tot b{font-family:Archivo,sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.04em;color:var(--ink)}
.obar-tot small{font-size:.76rem;color:var(--ink-3)}
.obar-r{display:flex;align-items:center;gap:9px;flex:none}
.oarrow{margin-left:2px}
@media (max-width:640px){
.oscrim{padding:0;place-items:stretch}
.omodal{width:100%;max-height:none;height:100dvh;border-radius:0;border:0;margin:0}
.opane{grid-template-columns:1fr}
.oitem{padding:11px 13px;gap:11px}
.oi-b small{display:none}
.obar-r{width:100%}
.obar-r .btn{flex:1;justify-content:center}
}
.omodal-close{
position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;
border-radius:50%;border:1px solid var(--hair);background:var(--surface);
color:var(--ink-2);cursor:pointer;font-size:.9rem;line-height:1;
}
.omodal-close:hover{background:var(--sunken);color:var(--ink)}
.omodal-head{
padding:clamp(24px,3vw,32px) clamp(22px,3vw,34px) clamp(18px,2vw,22px);
background:var(--console);color:var(--console-ink);position:relative;overflow:hidden;
}
.omodal-head::before{
content:"";position:absolute;inset:0;background-image:var(--hex-dark);opacity:.55;pointer-events:none;
}
.omodal-head > *{position:relative;z-index:1}
.omodal-head h3{
font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.038em;
font-size:clamp(1.28rem,2.4vw,1.7rem);line-height:1.14;margin:12px 0 8px;text-wrap:balance;
}
.omodal-head p{font-size:.92rem;color:var(--console-ink-2);line-height:1.55;max-width:52ch}
.omodal-head .omodal-close{border-color:var(--console-line);background:rgba(4,14,25,.7);color:var(--console-ink-2)}
.omodal-head .omodal-close:hover{background:var(--console-rise);color:var(--console-ink)}
.oform{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
padding:clamp(22px,3vw,30px) clamp(22px,3vw,34px) clamp(24px,3vw,32px);
}
@media (max-width:620px){.oform{grid-template-columns:1fr}}
.oform .full{grid-column:1/-1}
.ofield{display:grid;gap:6px;min-width:0}
.ofield label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.ofield .req{color:var(--crit)}
.ofield input,.ofield select,.ofield textarea{
width:100%;padding:12px 14px;border-radius:12px;
border:1px solid var(--hair);background:var(--ground);color:var(--ink);
font-size:.95rem;font-family:inherit;
}
.ofield textarea{resize:vertical;min-height:84px}
.ofield input:focus,.ofield select:focus,.ofield textarea:focus{
outline:none;border-color:var(--brand-light);box-shadow:0 0 0 3px var(--accent-soft);
}
.ofield input:user-invalid{border-color:var(--crit)}
.oseg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:520px){.oseg{grid-template-columns:1fr}}
.oseg-b{
text-align:left;padding:13px 16px;border-radius:12px;cursor:pointer;
border:1px solid var(--hair);background:var(--surface);font:inherit;color:inherit;
transition:border-color .18s,background .18s;
}
.oseg-b b{display:block;font-size:.93rem;font-weight:600;letter-spacing:-.012em}
.oseg-b small{display:block;margin-top:3px;font-size:.8rem;color:var(--ink-3)}
.oseg-b:hover{border-color:var(--brand-light)}
.oseg-b.is-on{border-color:var(--brand-light);background:var(--accent-soft)}
.ocheck{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;cursor:pointer}
.ocheck input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand-mid)}
.ocheck span{font-size:.83rem;color:var(--ink-3);line-height:1.55}
.ofoot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:2px}
.onote{width:100%;font-size:.79rem;color:var(--ink-3);line-height:1.55;margin-top:2px}
.olink{
font:inherit;font-size:.79rem;color:var(--accent);background:none;border:0;padding:0;
cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
/* ============================================================
Teamgrootte. De bezoeker zegt één keer hoe groot het kantoor is
en elke prijs op elke pagina rekent zich om naar zijn maandbedrag.
Onze klanten zitten tussen de 5 en 20 medewerkers; daar staat de
standaard dan ook op.
============================================================ */
.teamsize{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:13px 18px;border-radius:999px;
border:1px solid var(--hair);background:var(--surface);box-shadow:var(--e1);
width:max-content;max-width:100%;
}
.teamsize .tl{
font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.teamstep{display:flex;align-items:center;gap:4px}
.teamstep button{
width:30px;height:30px;border-radius:50%;flex:none;cursor:pointer;
border:1px solid var(--hair);background:var(--ground);color:var(--ink);
font-size:1.05rem;line-height:1;display:grid;place-items:center;
transition:border-color .16s,background .16s;
}
.teamstep button:hover:not(:disabled){border-color:var(--brand-light);background:var(--accent-soft)}
.teamstep button:disabled{opacity:.35;cursor:not-allowed}
.teamstep input{
width:56px;text-align:center;font-family:"Archivo",system-ui,sans-serif;
font-weight:600;font-size:1.18rem;letter-spacing:-.03em;
border:0;background:none;color:var(--ink);padding:0;
font-variant-numeric:tabular-nums;-moz-appearance:textfield;
}
.teamstep input::-webkit-outer-spin-button,
.teamstep input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.teamstep input:focus{outline:2px solid var(--brand-light);outline-offset:3px;border-radius:6px}
.teamsize .tu{font-size:.9rem;color:var(--ink-2);white-space:nowrap}
.band--console .teamsize,.subhero .teamsize{
background:rgba(4,14,25,.55);border-color:var(--console-line);
}
.band--console .teamsize .tl,.subhero .teamsize .tl{color:var(--console-ink-3)}
.band--console .teamsize .tu,.subhero .teamsize .tu{color:var(--console-ink-2)}
.band--console .teamstep input,.subhero .teamstep input{color:var(--console-ink)}
.band--console .teamstep button,.subhero .teamstep button{
background:rgba(255,255,255,.04);border-color:var(--console-line);color:var(--console-ink);
}
.tsum{
display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.035em;
color:var(--accent);font-variant-numeric:tabular-nums;
}
.tsum small{
font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;
font-size:.78rem;letter-spacing:0;color:var(--ink-3);
}
.pc-price .tsum{margin-top:10px;font-size:1.02rem;display:flex}
.band--console .tsum{color:var(--brand-light)}
.band--console .tsum small{color:var(--console-ink-3)}
.tldr{
display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:0;border:1px solid var(--hair);border-radius:var(--r-xl);
background:var(--surface);box-shadow:var(--e2);overflow:hidden;
}
@media (max-width:900px){.tldr{grid-template-columns:1fr}}
.tldr-l{padding:clamp(24px,3vw,36px);min-width:0}
.tldr-l .tt{
font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.17em;
text-transform:uppercase;color:var(--accent);
}
.tldr-l h2{
font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.04em;
font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12;margin:11px 0 12px;text-wrap:balance;
}
.tldr-l > p{font-size:1rem;color:var(--ink-2);line-height:1.62;max-width:52ch}
.tldr-facts{display:grid;gap:9px;margin-top:20px}
.tldr-facts div{
display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;align-items:start;
font-size:.91rem;color:var(--ink-2);line-height:1.5;
}
.tldr-facts div::before{
content:"";width:11px;height:12px;margin-top:.34em;
clip-path:var(--hex-clip);background:var(--grad-brand);
}
.tldr-facts b{color:var(--ink);font-weight:600}
.tldr-r{
padding:clamp(24px,3vw,32px);background:var(--console);color:var(--console-ink);
position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;
}
.tldr-r::before{content:"";position:absolute;inset:0;background-image:var(--hex-dark);opacity:.6}
.tldr-r > *{position:relative;z-index:1}
.tldr-r .rl{
font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--console-ink-3);
}
.tldr-price{display:flex;align-items:baseline;gap:6px;margin-top:12px;flex-wrap:wrap}
.tldr-price .cur{font-size:1.1rem;color:var(--console-ink-2)}
.tldr-price b{
font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.05em;
font-size:clamp(2.4rem,5.4vw,3.2rem);line-height:.94;font-variant-numeric:tabular-nums;
}
.tldr-price .per{width:100%;margin-top:7px;font-size:.85rem;color:var(--console-ink-3)}
.tldr-r .sub{margin-top:12px;font-size:.88rem;color:var(--console-ink-2);line-height:1.55}
.tldr-r .sub b{color:var(--console-ink)}
.tldr-r .btnrow{margin-top:auto;padding-top:20px;flex-direction:column;align-items:stretch;gap:9px}
.tldr-r .btnrow .btn{width:100%}
.tldr-r .fine{margin-top:12px;font-size:.75rem;color:var(--console-ink-3);line-height:1.5}
.teamsize--sm{
margin-top:11px;padding:7px 12px;gap:10px;
background:rgba(255,255,255,.05);border-color:var(--console-line);
}
.teamsize--sm .teamstep input{width:44px;font-size:1rem}
.teamsize--sm .teamstep button{width:26px;height:26px;font-size:.95rem;background:rgba(255,255,255,.05);border-color:var(--console-line);color:var(--console-ink)}
.teamsize--sm .tu{font-size:.82rem;color:var(--console-ink-2)}
.tldr-r .teamsize--sm .teamstep input{color:var(--console-ink)}
/* ── Wat het oplost, als 3D-slider ────────────────────────────
Zelfde coverflow als de dienstenslider op de homepage, maar met
probleem-boven / antwoord-onder op één kaart. Elke kaart krijgt een
eigen stop uit het kleurverloop van het icoon (--pc), licht cyaan
vooraan, dieper blauw achterin, zodat de reeks als één gradiënt
leest en niet als zes dezelfde vakjes. Alle stops blijven leesbaar
op de donkere ondergrond; het diepe #113F71 zit alleen in de tint
van de kaart zelf, nooit in tekst.
============================================================ */
.slider3d--pain{height:clamp(430px,41vw,498px)}
.slider3d--pain .slide{width:min(420px,84vw);margin-left:calc(min(420px,84vw) / -2)}
.slide--pain .slide-in{
gap:0;padding:0;
background:linear-gradient(168deg,color-mix(in srgb,var(--pc) 15%,#0C2136) 0%,#071522 76%);
}
.slide--pain .slide-in::before{
background:linear-gradient(150deg,color-mix(in srgb,var(--pc) 30%,transparent),transparent 62%);
}
.slide--pain[data-pos="0"] .slide-in{
border-color:color-mix(in srgb,var(--pc) 45%,transparent);
box-shadow:0 60px 110px -46px rgba(0,0,0,.95),
0 0 0 1px color-mix(in srgb,var(--pc) 20%,transparent),
0 0 70px -30px color-mix(in srgb,var(--pc) 55%,transparent);
}
.ps-half{padding:clamp(22px,2.4vw,28px);display:flex;flex-direction:column;gap:9px;min-width:0}
.ps-half--now{padding-bottom:clamp(20px,2.2vw,26px)}
.ps-half--fix{
position:relative;flex:1;
background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 11%,transparent),transparent 72%);
}
.ps-half--fix::after{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg,transparent,var(--pc) 26%,var(--pc) 74%,transparent);
opacity:.55;
}
.ps-turn{
position:absolute;left:clamp(22px,2.4vw,28px);top:-11px;z-index:2;
width:23px;height:25px;clip-path:var(--hex-clip);
background:linear-gradient(150deg,var(--pc),color-mix(in srgb,var(--pc) 45%,#113F71));
display:grid;place-items:center;
box-shadow:0 8px 20px -8px color-mix(in srgb,var(--pc) 85%,transparent);
}
.ps-turn svg{width:11px;height:11px;color:#fff}
.ps-tag{
font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--console-ink-3);
}
.ps-half--fix .ps-tag{color:var(--pc)}
.slide--pain h3{
color:var(--console-ink);font-size:clamp(1.06rem,1.5vw,1.22rem);
letter-spacing:-.028em;line-height:1.22;margin:0;padding-right:46px;
}
.slide--pain .ps-half--fix h3{color:#fff}
.slide--pain p{font-size:.88rem;line-height:1.5;color:var(--console-ink-3);margin:0}
.slide--pain .ps-half--fix p{color:var(--console-ink-2)}
.slide--pain .slide-n{color:var(--console-ink-3)}
@media (max-width:600px){
.slider3d--pain{height:clamp(452px,128vw,540px)}
}
.slider3d--pain:not(.is-live) .slide-in{height:auto}
/* kleine mono-labels op de donkere band mogen een tint lichter, anders
lezen ze bij dit formaat net te zwak */
.band--console .sublabel{color:var(--console-ink-2)}
/* ── bestelmodal v2: meerdere diensten tegelijk ───────────────
Was één keuzelijst waarin maar één dienst paste. Nu een lijst met
vinkvakjes, gegroepeerd, met per regel het tarief én het bedrag voor
dít kantoor, en onderaan een meelopend totaal. Twee genummerde
stappen zodat het formulier ondanks de extra keuze overzichtelijk blijft.
============================================================ */
.ostep{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;align-items:start;margin-top:6px}
.ostep + .oteam,.ostep + .opick{margin-top:-2px}
.ostep-n{
width:30px;height:33px;clip-path:var(--hex-clip);background:var(--grad-brand);
color:#fff;display:grid;place-items:center;flex:none;
font-family:"IBM Plex Mono",monospace;font-size:.78rem;
}
.ostep-h h4{font-size:1.04rem;font-weight:600;letter-spacing:-.024em;line-height:1.25}
.ostep-h p{margin-top:3px;font-size:.85rem;color:var(--ink-3);line-height:1.5}
.oteam{
display:flex;align-items:center;gap:11px;flex-wrap:wrap;
padding:9px 15px;border-radius:999px;width:max-content;max-width:100%;
border:1px solid var(--hair);background:var(--sunken);
}
.oteam .tl{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.oteam .tu{font-size:.86rem;color:var(--ink-2)}
.oteam .teamstep input{width:48px;font-size:1.05rem}
.oteam .teamstep button{width:27px;height:27px}
.opick{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.opick legend{
padding:0;margin-bottom:4px;
font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--ink-3);
}
.oitem{
display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:13px;align-items:start;
padding:13px 16px;border-radius:var(--r-m);border:1px solid var(--hair);
background:var(--surface);cursor:pointer;
transition:border-color .18s,background .18s;
}
.oitem:hover{border-color:var(--brand-light)}
.oitem:has(input:checked){border-color:var(--brand-light);background:var(--accent-soft)}
.oitem:has(input:focus-visible){outline:2px solid var(--brand-light);outline-offset:2px}
.oitem input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--brand-mid);cursor:pointer}
.oi-b{min-width:0}
.oi-b b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.oi-b small{display:block;margin-top:3px;font-size:.81rem;color:var(--ink-3);line-height:1.45}
.oi-p{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.oi-p .pu{display:block;font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--ink-2)}
.oi-p .pt{display:block;margin-top:3px;font-size:.72rem;color:var(--ink-3)}
.oitem:has(input:checked) .oi-p .pt{color:var(--accent);font-weight:600}
.oitem--free:has(input:checked){border-color:rgba(0,214,143,.45);background:rgba(0,214,143,.07)}
.oitem--free:has(input:checked) .oi-p .pt{color:var(--ok-ink)}
.oitem.is-on{border-color:var(--brand-light);background:var(--accent-soft)}
.oitem--free.is-on{border-color:rgba(0,214,143,.45);background:rgba(0,214,143,.07)}
.osum{
display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,30px);
padding:20px 22px;border-radius:var(--r-l);
border:1px solid var(--console-line);background:var(--console);color:var(--console-ink);
position:relative;overflow:hidden;
}
@media (max-width:640px){.osum{grid-template-columns:1fr}}
.osum::before{content:"";position:absolute;inset:0;background-image:var(--hex-dark);opacity:.5}
.osum > *{position:relative;z-index:1}
.osum .rl{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--console-ink-3)}
.osum-tot{display:flex;align-items:baseline;gap:5px;margin-top:9px;flex-wrap:wrap}
.osum-tot .cur{font-size:1rem;color:var(--console-ink-2)}
.osum-tot b{font-family:"Archivo",system-ui,sans-serif;font-weight:600;letter-spacing:-.05em;font-size:clamp(1.9rem,4.4vw,2.5rem);line-height:.95;font-variant-numeric:tabular-nums}
.osum-tot .per{width:100%;margin-top:6px;font-size:.78rem;color:var(--console-ink-3)}
.osum-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:center;min-width:0}
.osum-list li{display:flex;justify-content:space-between;gap:12px;font-size:.84rem;color:var(--console-ink-2)}
.osum-list li span:last-child{font-family:"IBM Plex Mono",monospace;color:var(--console-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.osum-list li.op{color:var(--console-ink-3)}
.osum-note{grid-column:1/-1;margin:0;font-size:.78rem;color:var(--console-ink-3);line-height:1.5}