/* 2Speed: gedeelde opmaak van de particuliere en de zakelijke homepage.
   body.p = particulier (blauw neon), body.z = zakelijk (staal en wit licht). */
@font-face{font-family:"Figtree";src:url(../fonts/figtree-var.woff2) format("woff2");font-weight:300 900;font-display:swap}

:root{--rand:clamp(20px,4.6vw,72px);--max:1320px;--kop:76px}
body.p{
  --grond:#03060C;--grond-2:#060B16;--vlak:#0A1222;--vlak-2:#0E1A31;--lijn:rgba(120,170,240,.16);
  --tekst:#E9F1FC;--mist:rgba(208,224,245,.68);--accent:#1F8BEA;--accent-fel:#46A6FF;--accent-licht:#7CC4FF;
  --gloed:rgba(31,139,234,.55);--knop-tekst:#fff
}
body.z{
  --grond:#08090B;--grond-2:#0D0F12;--vlak:#121519;--vlak-2:#171B20;--lijn:rgba(255,255,255,.1);
  --tekst:#EEF1F5;--mist:rgba(222,228,236,.62);--accent:#F4F6F9;--accent-fel:#fff;--accent-licht:#C9D6E6;
  --gloed:rgba(230,238,250,.28);--knop-tekst:#0B0D10
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kop) + 8px)}
body{margin:0;background:var(--grond);color:var(--tekst);font-family:"Figtree",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.naar-inhoud{position:absolute;left:-999px;top:8px;z-index:99;padding:10px 16px;border-radius:8px;background:#fff;color:#000}
.naar-inhoud:focus{left:12px}
:focus-visible{outline:3px solid var(--accent-licht);outline-offset:3px}

/* ── knoppen ── */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border:0;border-radius:8px;font:800 16.5px "Figtree",sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .3s,color .3s}
.knop svg{width:20px;height:20px;flex:none;transition:transform .3s}
.knop:hover{transform:translateY(-2px)}
.knop:hover svg{transform:translateX(4px)}
.knop-vol{background:var(--accent);color:var(--knop-tekst);box-shadow:0 18px 40px -16px var(--gloed)}
.knop-vol:hover{background:var(--accent-fel);box-shadow:0 22px 46px -14px var(--gloed)}
.knop-rand{color:var(--tekst);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.knop-rand:hover{box-shadow:inset 0 0 0 1.5px #fff}

/* ── kopbalk ── */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop);transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.kop.vast{background:rgba(3,5,10,.82);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--lijn)}
.kop .wrap{display:flex;align-items:center;gap:32px;height:100%;max-width:none}
.kop .logo img{height:40px;width:auto}
.kop nav{display:flex;gap:28px;margin-left:auto;font-weight:600;font-size:15px}
.kop nav a{text-decoration:none;color:var(--mist);transition:color .2s}
.kop nav a:hover{color:#fff}
.wissel{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--mist);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:color .2s,box-shadow .2s}
.wissel:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.wissel svg{width:14px;height:14px}
.kop .knop{min-height:44px;padding:0 20px;font-size:15px}
.menu-knop{display:none}

/* ── hero ── */
.hero{position:relative;min-height:max(680px,100svh);display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-top:var(--kop)}
.hero-beeld{position:absolute;right:0;top:calc(50% + var(--kop) / 2);width:min(59vw,1280px);aspect-ratio:var(--beeld,1.6);transform:translateY(-50%);z-index:-2}
.hero-beeld img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 14%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 26%),linear-gradient(0deg,transparent 0,#000 14%,#000 88%,transparent 100%);mask-composite:intersect;
  animation:binnen 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes binnen{from{transform:scale(1.06);filter:brightness(.35)}to{transform:none;filter:none}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 55% at 14% 46%,var(--gloed),transparent 70%);opacity:.5}
.hero-tekst{position:relative;max-width:min(580px,42vw);padding-block:56px 72px}
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.42em;text-transform:uppercase;color:var(--accent-licht)}
.hero h1{margin-top:18px;font-weight:900;font-size:clamp(56px,6.4vw,104px);line-height:.94;letter-spacing:-.045em;color:#fff;text-wrap:balance;animation:op 1s cubic-bezier(.2,.8,.2,1) .2s both}
.hero h1 em{font-style:normal;color:var(--accent-licht)}
.hero-sub{margin-top:22px;max-width:30em;font-size:clamp(17px,1.35vw,20px);color:var(--mist);animation:op 1s ease .35s both}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;animation:op 1s ease .5s both}
.hero-punten{display:flex;flex-wrap:wrap;gap:12px 28px;margin:38px 0 0;padding:24px 0 0;border-top:1px solid var(--lijn);list-style:none;font-size:15px;color:var(--mist);animation:op 1s ease .65s both}
.hero-punten li{display:flex;align-items:center;gap:10px}
.hero-punten b{color:#fff}
.hero-punten svg{width:20px;height:20px;flex:none;color:var(--accent-licht)}
@keyframes op{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sterren{color:#F5B301;letter-spacing:1px}
.scroll{position:absolute;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border-radius:14px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.scroll::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:wiel 1.8s ease-in-out infinite}
@keyframes wiel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* ── secties ── */
.sectie{position:relative;padding-block:clamp(84px,11vw,140px)}
.sectie-kop{max-width:720px}
.sectie-kop.midden{margin-inline:auto;text-align:center}
.sectie-kop.midden .kicker{justify-content:center}
.sectie h2{margin-top:16px;font-weight:900;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.sectie h2 em{font-style:normal;color:var(--accent-licht)}
.intro{margin-top:18px;font-size:clamp(17px,1.3vw,19px);color:var(--mist)}
[data-in]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-in].zichtbaar{opacity:1;transform:none}

/* zeshoek uit de startpagina: als vorm voor nummers en iconen */
.zes{position:relative;display:grid;place-items:center;flex:none;width:58px;height:66px;color:var(--accent-licht)}
.zes::before{content:"";position:absolute;inset:0;background:var(--accent);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);opacity:.95}
.zes::after{content:"";position:absolute;inset:2px;background:var(--vlak);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.zes>*{position:relative;z-index:1}
.zes svg{width:24px;height:24px}
.zes b{font-size:22px;font-weight:900;color:#fff}
.zes.gloeit{filter:drop-shadow(0 0 14px var(--gloed))}

/* ── reviews ── */
.review-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.review{display:flex;flex-direction:column;margin:0;padding:28px;border-radius:18px;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--lijn)}
.review .sterren{font-size:16px}
.review blockquote{margin:14px 0 0;font-size:16.5px;line-height:1.6;color:var(--tekst)}
.review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;font-size:14px;color:var(--mist)}
.review figcaption i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--vlak-2);box-shadow:inset 0 0 0 1px var(--lijn);color:#fff;font-style:normal;font-weight:800}
.review figcaption b{display:block;color:#fff;font-size:15px}
.review .soort{margin-left:auto;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--accent-licht);font-size:12px;font-weight:700}
.score{display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:12px 22px;border-radius:999px;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--lijn)}
.score b{font-size:30px;font-weight:900;color:#fff;line-height:1}
.score span{font-size:14.5px;color:var(--mist)}

/* ── vragen ── */
.vragen-raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:800;color:#fff}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--lijn);color:var(--accent-licht);font-size:22px;font-weight:500;transition:transform .3s}
.vraag[open] summary::after{transform:rotate(45deg)}
.vraag p{padding:0 56px 24px 0;color:var(--mist)}

/* ── afsluiter met formulier ── */
.slot{position:relative;padding-block:clamp(84px,10vw,130px);overflow:hidden;isolation:isolate}
.slot-beeld{position:absolute;inset:0;z-index:-1}
.slot-beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;opacity:.38}
.slot-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--grond) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,var(--grond) 0,transparent 30%,transparent 70%,var(--grond) 100%)}
.slot-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(36px,6vw,96px);align-items:center}
.contact{display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none}
.contact a,.contact span{display:inline-flex;align-items:center;gap:12px;font-size:17px;color:#fff;text-decoration:none}
.contact svg{width:22px;height:22px;color:var(--accent-licht);flex:none}
.formulier{padding:32px;border-radius:20px;background:#fff;color:#0B1424;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.formulier h3{font-size:24px;font-weight:900;letter-spacing:-.02em}
.formulier .onder-kop{margin-top:4px;font-size:15px;color:#5A6678}
.velden{display:grid;gap:14px;margin-top:22px}
.velden.twee{grid-template-columns:1fr 1fr}
.veld{display:grid;gap:6px;font-size:14px;font-weight:700;color:#283447}
.veld.breed{grid-column:1 / -1}
.veld em{font-style:normal;font-weight:500;color:#6B7686}
.veld input,.veld select,.veld textarea{min-height:52px;padding:0 15px;border:1.5px solid #D6DEE8;border-radius:9px;font:500 16px "Figtree",sans-serif;color:#0B1424;background:#fff}
.veld textarea{min-height:96px;padding:12px 15px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:#1F8BEA;box-shadow:0 0 0 4px rgba(31,139,234,.16)}
.formulier .knop{width:100%;margin-top:20px}
body.z .formulier .knop-vol{background:#0B0D10;color:#fff;box-shadow:0 16px 30px -16px rgba(0,0,0,.6)}
body.z .formulier .knop-vol:hover{background:#1B2028}
.form-fout{margin-top:12px;padding:10px 14px;border-radius:9px;background:#FDECEC;color:#8E1C1C;font-size:14px;font-weight:600}
.form-klaar{text-align:center;padding:36px 0}
.form-klaar b{display:block;font-size:22px}
.form-klaar span{display:block;margin-top:6px;color:#5A6678}
.web{position:absolute;left:-9999px}

/* ── voet ── */
.voet{border-top:1px solid var(--lijn);padding-block:56px 32px;font-size:15px;color:var(--mist);background:var(--grond)}
.voet-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.voet img{height:38px;width:auto}
.voet h3{font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:800}
.voet ul{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.voet a{text-decoration:none}
.voet a:hover{color:#fff}
.voet-wissel{display:block;padding:22px;border-radius:16px;background:var(--vlak);box-shadow:inset 0 0 0 1px var(--lijn);text-decoration:none;transition:box-shadow .3s}
.voet-wissel:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.voet-wissel small{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-licht)}
.voet-wissel b{display:block;margin-top:6px;color:#fff;font-size:19px}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--lijn);font-size:13.5px}

/* ── kleinere schermen ── */
@media (max-width:1180px){.kop nav{gap:20px;font-size:14.5px}}
@media (max-width:1020px){
  .kop nav,.kop .wissel{display:none}
  .menu-knop{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:none;color:#fff}
  .menu-open .kop{background:rgba(3,5,10,.97)}
  .menu-open .kop nav{display:flex;position:absolute;top:var(--kop);left:0;right:0;flex-direction:column;gap:0;padding:8px var(--rand) 24px;background:rgba(3,5,10,.97);border-bottom:1px solid var(--lijn)}
  .menu-open .kop nav a{padding:14px 0;border-bottom:1px solid var(--lijn);font-size:17px;color:#fff}
  .menu-open .kop nav .menu-wissel{display:block}
  .vragen-raster,.slot-raster{grid-template-columns:minmax(0,1fr)}
  .review-raster{grid-template-columns:minmax(0,1fr)}
  .voet-raster{grid-template-columns:1fr 1fr}
}
.menu-wissel{display:none}
@media (max-width:760px){
  :root{--kop:64px}
  body{font-size:16.5px}
  .kop .logo img{height:32px}
  .kop .knop{display:none}
  .hero{display:block;min-height:0;padding-top:var(--kop)}
  .hero-beeld{position:relative;top:auto;width:auto;height:auto;aspect-ratio:var(--beeld,1.6);margin:0;transform:none}
  .hero-beeld img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)}
  .hero::before{display:none}
  .hero-tekst{max-width:none;margin-top:-40px;padding-block:0 56px}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .kicker{letter-spacing:.3em;font-size:12px}
  .hero-knoppen .knop{flex:1 1 100%}
  .scroll{display:none}
  .velden.twee{grid-template-columns:1fr}
  .vraag p{padding-right:0}
  .voet-raster{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-in]{opacity:1;transform:none}}