:root{--bg:#080A0D;--p1:#10151C;--p2:#0C1117;--rand:#1E2833;--tekst:#fff;--grijs:#9AA6B2;--licht:#c9d2da;--blauw:#14A2EF;--cyaan:#3FD0FF;--groen:#2ECC71;--amber:#F5A623}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tekst);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.venster img{width:100%}
.w{max-width:1240px;margin:0 auto;padding:0 32px}
h1,h2,h3,.kop{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;letter-spacing:.01em;line-height:1.05;text-transform:uppercase}
.label{font:600 13px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--cyaan);text-transform:uppercase}
.knop{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:7px;font:600 14px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--rand);transition:border-color .15s,box-shadow .15s}
.knop:hover{border-color:var(--cyaan)}
.knop.primair{background:var(--blauw);border-color:var(--blauw);color:#04121f;box-shadow:0 0 26px rgba(20,162,239,.35)}
.knop.primair:hover{box-shadow:0 0 36px rgba(63,208,255,.55)}
/* header */
header{position:sticky;top:0;z-index:20;background:rgba(8,10,13,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--rand)}
header .w{display:flex;align-items:center;height:72px;gap:36px}
header .logo img{height:30px;width:auto}
nav{display:flex;gap:26px;font-size:15px;color:var(--grijs);flex:1}
nav a:hover{color:#fff}
header .knop{height:42px;padding:0 18px;font-size:13px}
.menu{display:none;background:none;border:1px solid var(--rand);color:#fff;border-radius:6px;width:44px;height:40px;font-size:20px;margin-left:auto}
/* hero */
.hero{padding:88px 0 40px;background:radial-gradient(900px 520px at 78% 35%,rgba(20,162,239,.14),transparent 70%)}
.hero .w{display:grid;grid-template-columns:6fr 5fr;gap:56px;align-items:center}
.hero h1{font-size:60px;margin:20px 0 22px}
.hero h1 span{color:var(--cyaan)}
.hero p.lead{color:var(--licht);font-size:20px;max-width:540px;margin-bottom:34px}
.knoppen{display:flex;gap:14px;flex-wrap:wrap}
.hero-beeld{position:relative}
.venster{background:var(--p1);border:1px solid var(--rand);border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.venster .balk{height:30px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid var(--rand);font:500 12px Inter;color:var(--grijs)}
.venster .balk i{width:9px;height:9px;border-radius:50%;background:#2a3542}
.venster .balk span{margin-left:8px}
.hero-beeld .groot img{width:100%}
.hero-beeld .klein{position:absolute;width:52%;right:-30px;bottom:-80px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.keten{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-top:110px;font:600 14px Inter;letter-spacing:.14em;color:var(--grijs);text-transform:uppercase;flex-wrap:wrap}
.keten b{color:#fff;padding:11px 18px;border:1px solid var(--rand);border-radius:7px;background:var(--p1);font-weight:600;white-space:nowrap}
.keten b.t{border-color:rgba(20,162,239,.7);background:linear-gradient(180deg,rgba(20,162,239,.16),var(--p1))}
.keten em{font-style:normal;color:var(--blauw)}
/* trust */
.trust{border-top:1px solid var(--rand);border-bottom:1px solid var(--rand);padding:24px 0;margin-top:40px}
.trust .w{display:flex;align-items:center;gap:20px;font-size:14px;flex-wrap:wrap;color:var(--grijs);font-size:15px}
.trust .label{color:#fff;margin-right:6px}
.trust span:not(.label)::before{content:"";display:inline-block;width:7px;height:7px;background:var(--blauw);border-radius:2px;margin-right:9px;vertical-align:2px}
/* secties */
section{padding:112px 0}
section.donker{background:#0A0D11}
section h2{font-size:52px;margin:14px 0 20px}
.intro{color:var(--grijs);max-width:700px;font-size:18px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:56px}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.kaart{background:var(--p1);border:1px solid var(--rand);border-radius:10px;padding:32px}
.kaart h3{font-size:26px;margin-bottom:10px}
.kaart p{color:var(--grijs)}
.kaart.accent{border-color:rgba(20,162,239,.5);background:linear-gradient(135deg,rgba(20,162,239,.10),var(--p1) 60%)}
.kaart .venster{margin-top:24px;box-shadow:none}
.groot-getal{font-family:"Barlow Semi Condensed",sans-serif;font-weight:700;font-size:52px;color:var(--cyaan);line-height:1}
/* keten groot */
.flow{display:grid;grid-template-columns:repeat(6,1fr);margin-top:56px}
.stap{background:var(--p1);border:1px solid var(--rand);border-radius:10px;padding:22px 18px;margin:0 10px;position:relative}
.stap:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:20px;height:2px;background:var(--blauw)}
.stap .n{font:500 12px "JetBrains Mono",monospace;color:var(--blauw)}
.stap h3{font-size:20px;margin:8px 0}
.stap p{font-size:14px;color:var(--grijs);line-height:1.5}
.stap.t{border-color:rgba(20,162,239,.6);background:linear-gradient(180deg,rgba(20,162,239,.10),var(--p1))}
.noot{font-size:14px;color:var(--grijs);margin-top:22px}
/* lijsten */
.lijst{list-style:none;margin-top:14px}
.lijst li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--rand);color:#dfe5ea}
.lijst li::before{content:"";position:absolute;left:4px;top:18px;width:11px;height:6px;border-left:2px solid var(--groen);border-bottom:2px solid var(--groen);transform:rotate(-45deg)}
.lijst li b{color:#fff}
/* tabellen */
table{width:100%;border-collapse:collapse;margin-top:36px;font-size:16px}
th{text-align:left;font:600 12px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);padding:0 16px 14px;border-bottom:1px solid var(--rand)}
td{padding:15px 16px;border-bottom:1px solid var(--rand);vertical-align:top}
td.m{font:500 15px "JetBrains Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.hq td:first-child{color:var(--cyaan);font-weight:600}
.tabelwrap{overflow-x:auto}
/* schermen naast tekst */
.naast{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center;margin-top:24px}
.naast.om{grid-template-columns:6fr 5fr}
.punten{display:grid;gap:18px;margin-top:28px}
.punt{display:flex;gap:14px}
.punt i{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(20,162,239,.16);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--cyaan);font:600 13px "JetBrains Mono",monospace}
.punt b{display:block;color:#fff}
.punt span{color:var(--grijs);font-size:16px}
/* 192 */
.blok192{display:flex;gap:30px;align-items:center;margin-top:28px;border-color:rgba(20,162,239,.6);background:linear-gradient(90deg,rgba(20,162,239,.14),var(--p1))}
.blok192 .kop{font-size:60px;color:var(--cyaan);text-transform:none;white-space:nowrap}
/* faq */
details{border-bottom:1px solid var(--rand);padding:18px 0}
summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::after{content:"+";color:var(--cyaan);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--grijs);margin-top:10px;max-width:820px}
/* contact */
form{display:grid;gap:14px;margin-top:28px}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input,textarea,select{width:100%;background:var(--p2);border:1px solid var(--rand);border-radius:8px;color:#fff;font:400 16px Inter,sans-serif;padding:14px 16px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blauw)}
textarea{min-height:140px;resize:vertical}
label{font-size:13px;color:var(--grijs);display:grid;gap:6px}
.verborgen{position:absolute;left:-5000px}
.melding{padding:14px 18px;border-radius:8px;margin-top:16px;display:none}
.melding.ok{display:block;background:rgba(46,204,113,.12);border:1px solid rgba(46,204,113,.4)}
.melding.fout{display:block;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4)}
/* slot */
.slot{text-align:center;background:radial-gradient(700px 300px at 50% 50%,rgba(20,162,239,.13),transparent 70%)}
.slot h2{font-size:60px}
.slot .knoppen{justify-content:center;margin-top:32px}
footer{border-top:1px solid var(--rand);padding:48px 0;color:var(--grijs);font-size:14px}
footer .w{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
footer a{display:block;margin:6px 0}
footer a:hover{color:#fff}
footer .klein{font-size:12.5px;margin-top:14px;max-width:360px}
/* tekstpagina's */
.tekst{max-width:820px}
.tekst h2{font-size:34px;margin:48px 0 12px}
.tekst p,.tekst li{color:var(--licht);margin:10px 0}
.tekst ul{padding-left:22px}
.invullen{background:rgba(245,166,35,.12);border:1px dashed rgba(245,166,35,.6);color:#f3d9a8;padding:2px 8px;border-radius:4px}
@media (max-width:1080px){
  .hero .w,.naast,.naast.om{grid-template-columns:1fr}
  .hero-beeld .klein{right:0}
  .vier{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:repeat(3,1fr);gap:20px}
  .stap{margin:0}.stap::after{display:none}
}
@media (max-width:760px){
  nav,header .knop{display:none}
  .menu{display:block}
  header.open nav{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:var(--bg);padding:16px 16px 24px;border-bottom:1px solid var(--rand);gap:14px;font-size:17px}
  .w{padding:0 16px}
  .hero{padding:44px 0 24px}
  .hero h1{font-size:44px}
  .hero p.lead{font-size:18px}
  .hero-beeld .klein{position:static;width:70%;margin:18px auto 0}
  .keten{margin-top:40px;gap:8px;font-size:12px}
  .keten b{padding:9px 12px}
  section{padding:64px 0}
  section h2,.slot h2{font-size:36px}
  .twee,.drie,.vier,.flow,.velden{grid-template-columns:1fr}
  .kaart{padding:24px}
  .blok192{flex-direction:column;align-items:flex-start}
  .kaart.accent{grid-template-columns:1fr!important;padding:24px!important;gap:20px!important}
  .kaart.accent h2{font-size:32px!important}
  .blok192 .kop{font-size:44px}
  footer .w{grid-template-columns:1fr 1fr}
  table{font-size:14px} th,td{padding:12px 8px}
}