/* corvoapex.nl · Corvo Premium (punt 286, 18 okt 2026): zelfde stijl als het dashboard (punt 284).
   Bijna zwarte basis met een aurora bovenin, glazen vlakken met een lichtrand (licht van boven), licht dat de muis volgt,
   witte koppen en cijfers, één kleurfamilie (indigo #6E7BFF → blauw #5B9BFF → cyaan #38E1FF). Amber, groen en rood
   alleen als het iets betekent. Eén lettertype: Inter (ook voor koppen, zoals het dashboard). */

/* ---------- tokens ---------- */
:root{
  --bg:#05060B;--bg2:#060712;
  --tx:#E9EBF2;--tekst:#E9EBF2;--sterk:#FFFFFF;--stil:#9BA1B5;--zacht:#C3C7D4;
  --accent:#6E7BFF;--accent2:#A9B2FF;--blauw:#5B9BFF;--cyaan:#38E1FF;
  --lb:#A9B2FF;--bl:#6E7BFF;--blue:#A9B2FF;--bluel:#A9B2FF;
  --amber:#F5B54A;--groen:#34D399;--rood:#F87171;
  --night:#05060B;--night2:rgba(13,15,30,.66);--cream:#F4F5FA;--sand:rgba(255,255,255,.03);--ink:#E9EBF2;--soft:#9BA1B5;
  --line:rgba(255,255,255,.10);--lined:rgba(255,255,255,.10);--rand:rgba(255,255,255,.08);--rand2:rgba(255,255,255,.10);
  --vlak:rgba(13,15,30,.72);
  --r:20px;--r-m:14px;
  --lichtrand:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 35%,rgba(255,255,255,.025) 70%,rgba(255,255,255,.07));
  --glasvlak:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 55%),linear-gradient(rgba(13,15,30,.70),rgba(13,15,30,.70));
  --spot:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),rgba(130,140,255,.11),transparent 42%);
  --schaduw:inset 0 1px 0 rgba(255,255,255,.06),0 1px 1px rgba(0,0,0,.4),0 24px 56px -28px rgba(0,0,0,.95);
  --knop:linear-gradient(180deg,#5A62EE,#4343CF);
  color-scheme:dark;
}

/* ---------- basis ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;position:relative;background:transparent;color:var(--tx);font:16px/1.65 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* aurora bovenin (absoluut, niet vast: geen verschuiving en weinig werk voor de telefoon) */
body::before{content:"";position:absolute;left:0;right:0;top:0;height:1150px;z-index:-1;pointer-events:none;background:
  radial-gradient(52% 60% at 26% 0%,rgba(88,96,255,.42),transparent 70%),
  radial-gradient(42% 52% at 86% 0%,rgba(56,189,248,.24),transparent 70%),
  radial-gradient(32% 40% at 60% 0%,rgba(168,85,247,.20),transparent 70%),
  linear-gradient(180deg,rgba(6,7,18,0) 60%,var(--bg));
  -webkit-mask:linear-gradient(180deg,#000 55%,transparent);mask:linear-gradient(180deg,#000 55%,transparent)}
/* fijn raster, alleen bovenin, vervaagt naar beneden */
body::after{content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/48px 48px;
  -webkit-mask:radial-gradient(70% 90% at 50% 0%,#000,transparent 75%);mask:radial-gradient(70% 90% at 50% 0%,#000,transparent 75%)}
main{position:relative}
a{color:var(--accent2);text-decoration-color:rgba(169,178,255,.4);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
a:hover{color:#D3D8FF;text-decoration-color:currentColor}
img{max-width:100%;height:auto}
p{color:var(--tx)}
b,strong{color:var(--sterk);font-weight:600}
::selection{background:rgba(110,123,255,.45);color:#fff}

h1,h2,h3{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--sterk);margin:0 0 .5em;font-weight:620;line-height:1.15;letter-spacing:-.022em}
h1{font-size:clamp(2.05rem,4.6vw,3.6rem);font-weight:660;line-height:1.06;letter-spacing:-.042em}
h2{font-size:clamp(1.55rem,2.8vw,2.25rem);letter-spacing:-.032em;line-height:1.12}
h3{font-size:1.14rem;letter-spacing:-.015em;line-height:1.3}
/* koppen boven op de pagina: wit naar zacht zilver, zoals het dashboard */
.pagehead h1,.night.full h1{background:linear-gradient(180deg,#FFFFFF 40%,#BEC3DA);-webkit-background-clip:text;background-clip:text;color:transparent!important}
@media (forced-colors:active){.pagehead h1,.night.full h1{color:CanvasText!important;background:none}}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:800px}
section{padding:72px 0}
.grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.grid > *,.herogrid > *{min-width:0}

/* kleine hoofdletterlabels */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#B9C0FF!important;margin-bottom:12px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#8A92FF,#38E1FF);box-shadow:0 0 10px 1px rgba(110,140,255,.85);flex:0 0 6px}
.lede,.lede p{font-size:1.14rem;line-height:1.6;color:var(--zacht)!important;max-width:700px}
.fine{font-size:.85rem;color:var(--stil)}
.tagline{font-size:1.25rem;font-weight:600;letter-spacing:-.015em;color:var(--accent2)!important;margin:0 0 12px}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:12px 20px;border-radius:12px;font:inherit;font-weight:600;font-size:.97rem;letter-spacing:-.01em;line-height:1.3;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn-warm{background:var(--knop);color:#fff!important;border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.2),0 0 0 1px rgba(85,96,240,.35),0 10px 26px -10px rgba(99,102,241,.95)}
.btn-warm:hover{filter:brightness(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 0 0 1px rgba(110,123,255,.5),0 14px 34px -10px rgba(99,102,241,1)}
.btn-dark,.btn-line,.btn-light{background:rgba(255,255,255,.05);color:#EEF0F6!important;border-color:rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.btn-dark:hover,.btn-line:hover,.btn-light:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)}
@supports (backdrop-filter:blur(1px)){.btn-dark,.btn-line,.btn-light{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}

/* ---------- glazen vlakken ---------- */
.card,details.faq,.calcbox,.bw,.launch,.tbl,.legal .note,.legal .safe{
  border:1px solid transparent;border-radius:var(--r);
  background:var(--spot) padding-box,var(--glasvlak) padding-box,var(--lichtrand) border-box;
  box-shadow:var(--schaduw)}
@media (min-width:900px){.card,details.faq,.calcbox,.bw{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}}
.card{position:relative;padding:24px;color:var(--tx)}
.card h3,.card b{color:var(--sterk)} .card p,.card li{color:var(--stil)} .card p{margin:.35em 0 0;font-size:.96rem}
.card .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--spot) padding-box,linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)) padding-box,linear-gradient(165deg,rgba(255,255,255,.13),rgba(255,255,255,.03)) border-box;box-shadow:none}
a.card{text-decoration:none;color:inherit}
a.card,.card.klik{transition:transform .2s,box-shadow .2s}
a.card:hover,.card.klik:hover{--lichtrand:linear-gradient(165deg,rgba(170,180,255,.50),rgba(255,255,255,.08) 40%,rgba(120,140,255,.20));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 28px 60px -26px rgba(70,80,220,.6)}
@media (prefers-reduced-motion:no-preference){a.card:hover,.card.klik:hover{transform:translateY(-3px)}}
/* kaarten met een eigen randkleur in de pagina: zachte gloed bovenin in plaats van een harde rand */
.card[style*="border-color"]{--sk:110,123,255;border-color:transparent!important;background:radial-gradient(70% 120% at 0% 0%,rgba(var(--sk),.14),transparent 60%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,linear-gradient(165deg,rgba(var(--sk),.6),rgba(255,255,255,.06) 35%,rgba(255,255,255,.03)) border-box}
.card[style*="224,145,61"]{--sk:56,225,255}
.card[style*="245,165,36"]{--sk:245,165,36}
.card[style*="52,211,153"]{--sk:52,211,153}
/* uitgelicht pakket: aurora in het vlak */
.spot{background:radial-gradient(85% 95% at 0% 0%,rgba(88,96,255,.42),transparent 62%) padding-box,radial-gradient(55% 70% at 100% 0%,rgba(56,189,248,.20),transparent 60%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,linear-gradient(165deg,rgba(170,180,255,.55),rgba(255,255,255,.07) 40%,rgba(56,225,255,.25)) border-box!important;color:var(--tx)}
.spot h3,.spot .price,.spot p.kaartkop.kaartkop{color:#fff!important} .spot p,.spot .price small{color:var(--zacht)!important}
.meest{position:absolute;top:-11px;right:16px;background:linear-gradient(90deg,#5A62EE,#4343CF);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:99px;box-shadow:0 6px 18px -6px rgba(99,102,241,.95),inset 0 1px 0 rgba(255,255,255,.35)}

/* iconen in glazen tegeltjes */
.ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:linear-gradient(135deg,rgba(124,131,255,.32),rgba(56,189,248,.10));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px -6px rgba(99,102,241,.7);font-size:1.25rem}
.ic{display:inline-flex;vertical-align:-.18em} .ic svg{width:1.05em;height:1.05em;stroke:#C9CEFF;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ico .ic svg{width:22px;height:22px;stroke:#E3E6FF}

/* labels */
.tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#C3C8FF!important;background:rgba(110,123,255,.14)!important;border:1px solid rgba(150,160,255,.28);padding:3px 10px;border-radius:8px}
.tag.nieuw{background:transparent!important;border:1px solid rgba(56,225,255,.45);color:#9BEBFF!important;font-size:.6rem;padding:1px 6px;margin-left:6px;vertical-align:middle;border-radius:6px}
.tag.bk{background:transparent!important;border:1px dashed rgba(150,160,255,.5)}
.appbadge{display:inline-flex;gap:8px;align-items:center;background:rgba(110,123,255,.14);border:1px solid rgba(150,160,255,.28);color:#C3C8FF;border-radius:100px;padding:6px 12px;font-size:.82rem;font-weight:600}
.nl-only{display:inline-block;margin-left:8px;font-size:.72rem;border:1px solid var(--rand2);border-radius:99px;padding:2px 8px;color:var(--stil)}

/* prijzen: witte cijfers, strak */
.price{font-size:2.15rem;font-weight:620;letter-spacing:-.045em;line-height:1.15;color:#fff;font-variant-numeric:tabular-nums}
.price small{font-size:.85rem;font-weight:500;letter-spacing:0;color:var(--stil)}
.pkrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:14px}
.pkrow .pk{border:1px solid transparent;border-radius:12px;padding:10px 12px;background:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)) padding-box,linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) border-box}
.pkrow .pk b{display:block;color:#fff;font-size:.95rem} .pkrow .pk span{color:var(--stil);font-size:.88rem}
.pkrow .pk.rec{background:radial-gradient(90% 120% at 0% 0%,rgba(110,123,255,.15),transparent 70%) padding-box,linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)) padding-box,linear-gradient(165deg,rgba(150,160,255,.65),rgba(56,225,255,.2)) border-box}
.pkrow .pk.rec span{color:#C3C8FF}

ul.check{list-style:none;padding:0;margin:12px 0 0} ul.check li{padding:5px 0 5px 28px;position:relative;font-size:.95rem}
ul.check li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,rgba(124,131,255,.45),rgba(56,189,248,.22)) ;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
ul.check li::after{content:"";position:absolute;left:5px;top:calc(.62em + 3px);width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.note{background:radial-gradient(80% 120% at 0% 0%,rgba(110,123,255,.16),transparent 70%),rgba(255,255,255,.03)!important;border:1px solid rgba(150,160,255,.25);color:var(--tx)!important;border-radius:var(--r-m);padding:16px 18px;font-size:.94rem}
.letop{background:rgba(245,165,36,.10);border:1px solid rgba(245,165,36,.42);color:#FCD9A0;border-radius:12px;padding:12px 14px}
.proef{margin:14px 0 0;font-size:.95rem;color:var(--zacht)} .proef b{color:#9BEBFF} .proef a{text-decoration:underline}
.proef-voet{margin:0 0 6px} .proef-voet a{display:inline;color:#9BEBFF}

/* kruimelpad */
.crumbs{font-size:.8rem;color:var(--stil);padding-top:18px;letter-spacing:.01em} .crumbs a{color:var(--stil);text-decoration:none} .crumbs a:hover{color:#fff;text-decoration:underline} .crumbs span{color:var(--zacht)}

/* blokken */
.pagehead{padding:36px 0 60px;background:transparent}
.pagehead .lede{color:var(--zacht)} .pagehead p b{color:#fff}
.sand{background:linear-gradient(180deg,transparent,rgba(110,123,255,.035) 30%,rgba(110,123,255,.035) 70%,transparent)}
.night{background:transparent;color:var(--tx)}
.night h1,.night h2,.night h3{color:#fff} .night .lede{color:var(--zacht)}
/* afsluitend blok: groot glazen paneel met aurora */
main > section.night:not(.full){position:relative;margin:36px auto;max-width:1180px;width:calc(100% - 48px);border-radius:28px;padding:68px 0;border:1px solid transparent;overflow:hidden;
  background:radial-gradient(60% 90% at 20% 0%,rgba(88,96,255,.40),transparent 65%) padding-box,radial-gradient(45% 80% at 90% 0%,rgba(56,189,248,.22),transparent 65%) padding-box,radial-gradient(50% 70% at 60% 120%,rgba(168,85,247,.18),transparent 65%) padding-box,linear-gradient(rgba(10,11,24,.82),rgba(10,11,24,.82)) padding-box,linear-gradient(165deg,rgba(170,180,255,.5),rgba(255,255,255,.06) 40%,rgba(56,225,255,.25)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(70,80,220,.6)}
main > section.night.full{background:transparent}
@media (max-width:640px){main > section.night:not(.full){width:calc(100% - 20px);margin:22px auto;border-radius:22px;padding:48px 0}}

/* stappen */
.steps{counter-reset:s;display:grid;gap:14px} .steps .card{padding-left:66px}
.steps .card::before{counter-increment:s;content:counter(s);position:absolute;left:20px;top:22px;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#7C83FF,#4F57E6);color:#fff;font-weight:600;font-size:.9rem;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 18px -6px rgba(99,102,241,.95)}

/* veelgestelde vragen */
details.faq{padding:18px 20px;margin:10px 0;border-radius:var(--r-m)}
details.faq summary{cursor:pointer;font-weight:600;color:#fff;list-style:none;position:relative;padding-right:30px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";position:absolute;right:4px;top:.45em;width:8px;height:8px;border:solid #A9B2FF;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
details.faq[open] summary::after{transform:rotate(-135deg);top:.7em}
details.faq p{margin:10px 0 0;color:var(--stil)}

/* tabellen: glas, kleine hoofdletterkoppen */
.tbl{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:.9rem;color:var(--tx)}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top}
.tbl th{background:transparent;color:#8E93A8;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tbl tr:last-child td{border-bottom:0} .tbl tr:hover td{background:rgba(130,140,255,.05)}
.tbl td.us,.tbl th.us{background:rgba(110,123,255,.12);color:#fff;font-weight:600} .tbl a{color:var(--accent2)} .tbl b{color:#fff}
.tblwrap{overflow-x:auto}
.veeg{display:none;font-size:.82rem;color:var(--accent2);margin:6px 0;text-align:right}

/* formulieren */
form.f label{display:block;font-weight:500;font-size:.86rem;color:var(--zacht);margin:14px 0 6px;letter-spacing:.005em}
form.f input,form.f textarea,form.f select{width:100%;padding:12px 14px;border:1px solid rgba(255,255,255,.11);border-radius:12px;font:inherit;font-size:1rem;color:#fff;background:rgba(0,0,0,.28);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);transition:border-color .15s,box-shadow .15s,background .15s}
form.f input::placeholder,form.f textarea::placeholder{color:#7D8296}
form.f input:hover,form.f textarea:hover,form.f select:hover{border-color:rgba(255,255,255,.2)}
form.f input:focus,form.f textarea:focus,form.f select:focus{outline:none;border-color:rgba(150,160,255,.8);background:rgba(0,0,0,.36);box-shadow:0 0 0 3px rgba(110,123,255,.28)}
form.f textarea{min-height:110px;resize:vertical;line-height:1.5}
form.f .fine{color:var(--stil)}
form.f button[type=submit]{margin-top:6px}

/* focus: altijd zichtbaar */
a:focus-visible,button:focus-visible,summary:focus-visible,.kbd:focus-visible,[tabindex]:focus-visible{outline:2px solid #9BEBFF;outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline:2px solid #9BEBFF;outline-offset:3px;border-radius:12px}

/* ---------- navigatie: zwevende glazen balk ---------- */
.hdr{position:sticky;top:0;z-index:50;padding:10px 0 0;background:linear-gradient(180deg,rgba(5,6,11,.85),rgba(5,6,11,0))}
.hdr > .in{display:flex;align-items:center;gap:12px;height:60px;max-width:1240px;margin:0 auto;padding:0 10px 0 16px;border-radius:18px;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(18,20,38,.72),rgba(10,11,22,.76)) padding-box,linear-gradient(165deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 45%,rgba(255,255,255,.08)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -20px rgba(0,0,0,.95)}
@supports (backdrop-filter:blur(1px)){.hdr > .in{background:linear-gradient(180deg,rgba(18,20,38,.55),rgba(10,11,22,.62)) padding-box,linear-gradient(165deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 45%,rgba(255,255,255,.08)) border-box;backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%)}}
@media (max-width:1290px){.hdr > .in{margin:0 12px}}
.brand{display:flex;align-items:center;gap:10px;margin-right:18px;color:#fff;text-decoration:none;font-weight:620;letter-spacing:-.02em;white-space:nowrap;font-size:1.02rem}
.brand img{width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 4px 14px -4px rgba(110,123,255,.8)}
.brand b{font-weight:620;background:linear-gradient(90deg,#A5ADFF,#38E1FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:2px;margin:0 0 0 6px;padding:0;flex:1} .menu > li{list-style:none;position:relative}
.menu > li > a,.menu > li > button{display:block;white-space:nowrap;padding:8px 10px;color:#B4B9CA;text-decoration:none;font:500 .9rem Inter,sans-serif;letter-spacing:-.005em;background:none;border:0;cursor:pointer;border-radius:10px;transition:color .15s,background .15s}
.menu > li > a:hover,.menu > li > button:hover,.menu > li:focus-within > button{color:#fff;background:rgba(255,255,255,.06)}
.drop{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:250px;padding:10px;border-radius:16px;border:1px solid transparent;
  background:linear-gradient(rgba(14,15,28,.94),rgba(14,15,28,.94)) padding-box,linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -24px rgba(0,0,0,.95)}
@supports (backdrop-filter:blur(1px)){.drop{background:linear-gradient(rgba(14,15,28,.8),rgba(14,15,28,.8)) padding-box,linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) border-box;backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%)}}
.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu > li:hover > .drop,.menu > li:focus-within > .drop{display:block}
.drop a{display:block;padding:8px 10px;border-radius:9px;color:#DADDE8;text-decoration:none;font-size:.9rem} .drop a:hover{background:rgba(130,140,255,.12);color:#fff}
.drop .h{font-size:.66rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#8E93A8;padding:8px 10px 3px}
.mega{display:none;grid-template-columns:repeat(4,1fr);row-gap:10px;gap:6px;min-width:900px;left:-280px}
.menu > li:hover > .mega,.menu > li:focus-within > .mega{display:grid}
.mega .all{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);margin-top:6px;padding-top:10px;font-weight:600}
.hdr .right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr .right .btn{padding:9px 14px!important;font-size:.9rem;border-radius:11px}
.portal{color:#B4B9CA;font-size:.86rem;text-decoration:none;white-space:nowrap;padding:8px 8px;border-radius:10px} .portal:hover{color:#fff;background:rgba(255,255,255,.06)}
.lang{border:1px solid rgba(255,255,255,.14);color:#E6E8F0;border-radius:9px;padding:5px 9px;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-decoration:none;background:rgba(255,255,255,.04)} .lang:hover{background:rgba(110,123,255,.25);color:#fff}
.burger{display:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:11px;padding:6px 12px;font-size:1.1rem;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.mob{display:none}
.stickycta{display:none}
@media (max-width:1340px){
  .menu,.hdr .right .btn,.hdr .right .portal{display:none!important} .burger{display:block} .hdr .right .lang{display:inline-block}
  .mob.open{display:block;margin:8px 12px 0;padding:6px 18px 18px;max-height:calc(100vh - 96px);overflow:auto;border-radius:18px;border:1px solid transparent;
    background:linear-gradient(rgba(12,13,26,.96),rgba(12,13,26,.96)) padding-box,linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.05)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -24px rgba(0,0,0,.95)}
  .mob details{border-bottom:1px solid rgba(255,255,255,.07)}
  .mob summary,.mob > a{display:block;padding:14px 2px;color:#fff;font-weight:600;text-decoration:none;cursor:pointer;list-style:none;letter-spacing:-.01em}
  .mob summary::-webkit-details-marker{display:none}
  .mob summary{position:relative} .mob summary::after{content:"";position:absolute;right:6px;top:1.2em;width:7px;height:7px;border:solid #A9B2FF;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .mob details[open] summary::after{transform:rotate(-135deg);top:1.4em}
  .mob > a{border-bottom:1px solid rgba(255,255,255,.07)} .mob > a:last-child{border-bottom:0;color:#C3C8FF}
  .mob details a{display:block;padding:9px 12px;color:#C3C7D4;text-decoration:none;font-size:.95rem;border-radius:9px} .mob details a:hover{background:rgba(130,140,255,.1);color:#fff}
  .mob .h{display:block;color:#8E93A8;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;padding:10px 12px 2px}
  .stickycta{display:block;position:fixed;left:12px;bottom:12px;z-index:60}
  .stickycta .btn{padding:12px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 0 1px rgba(85,96,240,.35),0 14px 34px -10px rgba(0,0,0,.9),0 10px 26px -10px rgba(99,102,241,.95)}
  footer{padding-bottom:96px!important}
}
@media (max-width:1180px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr} section{padding:52px 0} .wrap{padding:0 16px}
  .hdr > .in{margin:0 10px;padding:0 8px 0 12px;height:56px} .brand{font-size:.98rem}
  .btn{white-space:normal;text-align:center;max-width:100%} .cta-row .btn{flex:1 1 auto}
  .card{padding:20px}
}

/* ---------- hero ---------- */
.herogrid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.herologo2{display:block;width:180px;max-width:55%;height:auto;margin:0 0 14px -6px;mix-blend-mode:lighten}
.herologo img{width:100%;max-width:460px;height:auto;display:block;margin-left:auto;mix-blend-mode:lighten}
.herogrid .bw{max-width:none;margin-left:auto}
@media (max-width:900px){.herogrid{grid-template-columns:1fr;gap:28px}.herologo{order:-1}.herologo img{max-width:230px;margin:0 auto}}
@media (max-width:640px){.herologo2{width:170px}}

/* browservenster (demo) als zwevend glas met gloed */
.bw{min-width:0;max-width:100%;border-radius:18px;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(110,123,255,.10),0 40px 100px -30px rgba(70,80,220,.65),0 0 140px -40px rgba(56,189,248,.35)}
.bw-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.07)}
.bw-bar i{width:11px;height:11px;border-radius:50%;display:inline-block;background:rgba(255,255,255,.16)}
.bw-bar span{margin-left:10px;flex:1;max-width:340px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:3px 10px;font-size:.76rem;color:var(--stil);text-align:center}
.bw-body{position:relative;overflow:hidden;background:#060712;width:100%;contain:layout paint} .bw-body iframe{border:0;display:block;transform-origin:0 0;background:#060712}
.zwevend{position:absolute;z-index:3;right:-10px;bottom:36px;display:flex;gap:10px;align-items:center;max-width:260px;padding:11px 14px;border-radius:14px;font-size:.82rem;color:var(--zacht);border:1px solid transparent;
  background:linear-gradient(rgba(16,18,34,.86),rgba(16,18,34,.86)) padding-box,linear-gradient(165deg,rgba(255,255,255,.3),rgba(255,255,255,.06)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 50px -14px rgba(0,0,0,.9)}
@supports (backdrop-filter:blur(1px)){.zwevend{background:linear-gradient(rgba(16,18,34,.66),rgba(16,18,34,.66)) padding-box,linear-gradient(165deg,rgba(255,255,255,.3),rgba(255,255,255,.06)) border-box;backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%)}}
.zwevend b{color:#fff} .zwevend .wa{width:30px;height:30px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:#05210F;font-weight:700;flex:0 0 30px;box-shadow:0 0 18px -2px rgba(37,211,102,.7)}
@media (max-width:900px){.zwevend{right:8px;bottom:8px}}
.video{max-width:960px;margin:0 auto} .video video{width:100%;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#000;box-shadow:0 40px 100px -30px rgba(70,80,220,.6)} .video figcaption{color:var(--stil);font-size:.9rem;margin-top:10px;text-align:center}

/* rekenhulp en scanformulier: glazen paneel met aurora in de hoek */
.calcbox{padding:28px;color:var(--tx);border-radius:24px;
  background:radial-gradient(70% 70% at 100% 0%,rgba(88,96,255,.26),transparent 62%) padding-box,radial-gradient(50% 50% at 0% 100%,rgba(56,189,248,.08),transparent 60%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,var(--lichtrand) border-box}
.calcbox h2{color:#fff} .calcbox p{color:var(--zacht)}
.calcin{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:stretch}
.calcf label{color:var(--zacht);font-size:.85rem;line-height:1.4;min-height:2.9em;display:flex;align-items:flex-end}
.calcbox form.f input{font-size:1.15rem;font-weight:600}
.calcres{border-radius:18px;padding:20px 22px;border:1px solid transparent;background:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22)) padding-box,linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.calcbig{font-size:2.8rem;font-weight:620;letter-spacing:-.05em;color:var(--amber);line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums;text-shadow:0 0 36px rgba(245,165,36,.35)}
@media (max-width:900px){.calcin{grid-template-columns:1fr}.calcf .grid{grid-template-columns:1fr}}
#scan .calcf label{min-height:0;display:block;margin:12px 0 6px} #scan .calcf input{font-size:1rem;font-weight:500;padding:11px 13px}
#scan .calcf .grid{gap:0 14px}
#scan .calcf textarea{min-height:84px}

/* aftellen */
.launch{color:var(--tx);padding:20px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.launch .t{font-size:1.2rem;font-weight:620;letter-spacing:-.02em;color:#fff} .launch .s{color:var(--zacht);font-size:.92rem;margin-top:2px}
.launch .badge{background:linear-gradient(90deg,#5A62EE,#4343CF);color:#fff;font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
.cd{display:flex;gap:8px} .cd div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:6px 10px;text-align:center;min-width:54px}
.cd b{display:block;font-size:1.25rem;font-weight:620;color:#fff;font-variant-numeric:tabular-nums} .cd span{font-size:.66rem;color:var(--stil);text-transform:uppercase;letter-spacing:.08em}

/* echte schermen uit het dashboard */
.schermen-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}
.schermen-rij figure{margin:0}
.schermen-rij a{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 56px -28px rgba(0,0,0,.95),0 30px 70px -40px rgba(70,80,220,.5);background:#060712}
.schermen-rij img{display:block;width:100%;height:auto;transition:transform .25s}
@media (prefers-reduced-motion:no-preference){.schermen-rij a:hover img{transform:scale(1.02)}}
.schermen-rij figcaption{text-align:left;font-size:.88rem;margin-top:8px;color:var(--stil)}

/* kaart met de link op de kop; de hele kaart is klikbaar */
.card.klik h3 a{color:inherit;text-decoration:none}
.card.klik h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card.klik:focus-within{outline:2px solid #9BEBFF;outline-offset:3px}
p.kaartkop.kaartkop{font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-weight:620;font-size:1.14rem;line-height:1.3;letter-spacing:-.015em;color:#fff;margin:0 0 .5em}
.card.klik p.kaartkop.kaartkop a{color:inherit;text-decoration:none}
.card.klik p.kaartkop.kaartkop a::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ---------- voettekst ---------- */
footer{position:relative;margin-top:40px;padding:60px 0 28px;font-size:.9rem;color:var(--stil);background:radial-gradient(60% 120% at 50% 100%,rgba(88,96,255,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.015),rgba(0,0,0,.25))}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(165,173,255,.45),rgba(56,225,255,.3),transparent)}
footer a{color:var(--zacht);text-decoration:none;display:block;padding:3px 0} footer a:hover{color:#fff}
footer .cols{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:24px}
footer b{color:#fff;display:block;margin-bottom:10px;font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
footer .brand b{display:inline;margin:0;font-size:inherit;letter-spacing:-.02em;text-transform:none}
footer .proef-voet b{display:inline;margin:0;font-size:inherit;font-weight:600;letter-spacing:0;text-transform:none;color:#9BEBFF}
footer .safe{margin-top:32px;padding:14px 16px;border-radius:14px;color:var(--zacht);font-size:.85rem;border:1px solid transparent;background:linear-gradient(rgba(255,255,255,.03),rgba(255,255,255,.03)) padding-box,linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) border-box}
footer .safe a{display:inline;color:var(--accent2)}
footer .bot{margin-top:18px;font-size:.8rem;color:#8A8FA3}
@media (max-width:980px){footer .cols{grid-template-columns:repeat(2,1fr)}}

/* ---------- cookiemelding ---------- */
#ck{display:none;position:fixed;left:12px;bottom:12px;z-index:90;max-width:520px;padding:16px 18px;border-radius:16px;color:var(--tx);border:1px solid transparent;
  background:linear-gradient(rgba(14,15,28,.95),rgba(14,15,28,.95)) padding-box,linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.05)) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -20px rgba(0,0,0,.95)}
@supports (backdrop-filter:blur(1px)){#ck{background:linear-gradient(rgba(14,15,28,.8),rgba(14,15,28,.8)) padding-box,linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.05)) border-box;backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)}}
#ck p{margin:0 0 12px;font-size:.9rem;color:var(--zacht)} #ck a{color:var(--accent2)} #ck button{margin-right:8px}
@media (max-width:640px){#ck{left:10px;right:10px;max-width:none;bottom:84px}#ck .btn{flex:1 1 auto}}

/* ---------- smalle schermen: niets zijwaarts ---------- */
@media (max-width:700px){
  main{overflow-x:clip} main .wrap{max-width:100%} .tblwrap{max-width:100%;overflow-x:auto;border-radius:16px}
  .tbl{overflow:visible!important;border-radius:0!important}
  .tbl th:first-child,.tbl td:first-child{position:sticky;left:0;z-index:1;background:#0D0F1E;min-width:118px;max-width:150px;box-shadow:2px 0 6px rgba(0,0,0,.4)}
  .tbl th,.tbl td{min-width:132px;overflow-wrap:break-word;hyphens:auto} .tbl td.us,.tbl th.us{min-width:160px}
  .veeg{display:block!important}
}

/* formulieren in een kaart: zachte aurora in de hoek */
.card:has(> form.f){background:radial-gradient(70% 60% at 100% 0%,rgba(88,96,255,.22),transparent 62%) padding-box,var(--spot) padding-box,var(--glasvlak) padding-box,var(--lichtrand) border-box}

/* ---------- minder beweging ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
/* Homepage: omslagfoto in plaats van de klikbare demo (19 okt, Wouter); één verwijzing naar de demo */
.omslag{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px -30px rgba(88,96,255,.55),0 12px 30px -18px rgba(0,0,0,.9)}
.omslag img{display:block;width:100%;height:auto}
.demolink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:#A9B2FF;text-decoration:none}
.demolink:hover{color:#D3D8FF;text-decoration:underline}
/* Sociale media in de voettekst als icoontjes (19 okt; tools/sociaal-voet.mjs) */
footer .sociaal{display:flex;gap:10px;margin:12px 0 10px}
footer .sociaal a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:12px;color:#C9CEFF;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:color .15s,border-color .15s,box-shadow .15s,transform .15s}
footer .sociaal a:hover{color:#fff;border-color:rgba(150,160,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px -8px rgba(110,123,255,.9);transform:translateY(-1px)}
footer .sociaal a:focus-visible{outline:2px solid #38E1FF;outline-offset:2px}
@media (prefers-reduced-motion:reduce){footer .sociaal a{transition:none}footer .sociaal a:hover{transform:none}}