/* AICHATBOT-PRO-20261012 — aichatbotvergelijken.nl (eigen bouwer bouw_aichatbot.py) */
:root{
 --nacht:#0E0C2B;--nacht2:#17144A;--inkt:#16142F;--grijs:#5B5878;--lijn:#E6E3F5;--zacht:#F6F4FF;--wit:#fff;
 --violet:#6D5EF5;--violet-d:#5443E0;--violet-l:#A99FFF;--perzik:#FF9F6E;--perzik-d:#E8743F;--munt:#5EEAD4;
 --rad:18px;--rad-s:12px;--schaduw:0 24px 60px -32px rgba(23,20,74,.45);--schaduw-s:0 10px 28px -18px rgba(23,20,74,.35);
 --kop:"Bricolage Grotesque",Inter,system-ui,sans-serif;--tekst:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
 /* aliassen voor inhoud uit het gedeelde sjabloon (keuzehulp, rekenhulp) */
 --l:var(--lijn);--r:var(--rad);--t:var(--zacht);--k:var(--violet);--d:var(--grijs)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.65 var(--tekst);color:var(--inkt);background:var(--wit);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-d);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--violet)}
h1,h2,h3{font-family:var(--kop);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;color:inherit}
h1{font-size:clamp(2.1rem,5.4vw,4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.3vw,2.45rem);font-weight:750}
h3{font-size:1.2rem;font-weight:700}
h1 u,h2 u{text-decoration:none;background:linear-gradient(transparent 68%,rgba(255,159,110,.55) 68%,rgba(255,159,110,.55) 92%,transparent 92%);padding:0 .06em}
.held h1 u{background:none;color:var(--perzik);position:relative;white-space:nowrap}
.held h1 u::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.12em;border-radius:9px;background:linear-gradient(90deg,var(--perzik),var(--violet-l));transform-origin:left;animation:streep 1s .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes streep{from{transform:scaleX(0)}}
p{margin:0 0 1em}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.held-g>*,.ph-g>*,.demo>*,.kz-g>*,.lees>*,.eer>*,.ft-g>*{min-width:0}
.w{width:min(1180px,100% - 32px);margin-inline:auto}
.w-sm{width:min(780px,100% - 32px)}.w-md{width:min(920px,100% - 32px)}
.ic{width:22px;height:22px;flex:none}.ic-s{width:17px;height:17px;vertical-align:-3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--wit);padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:12px}
:focus-visible{outline:3px solid var(--perzik);outline-offset:2px;border-radius:6px}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--grijs);max-width:62ch}
.eb{display:inline-flex;align-items:center;gap:7px;font:500 .78rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--violet-d);margin-bottom:14px}
.eb-l{color:var(--munt)}
/* knoppen */
.kn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font:700 .98rem/1.1 var(--tekst);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.kn:hover{transform:translateY(-2px)}
.kn-a{background:linear-gradient(135deg,var(--perzik),var(--perzik-d));color:#1B0E06;box-shadow:0 12px 28px -12px rgba(232,116,63,.75)}
.kn-a:hover{color:#1B0E06;box-shadow:0 16px 34px -12px rgba(232,116,63,.9)}
.kn-o{border-color:rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.06)}
.kn-o:hover{color:#fff;background:rgba(255,255,255,.13)}
.kn-d{border-color:var(--lijn);color:var(--inkt);background:var(--wit)}.kn-d:hover{color:var(--violet-d);border-color:var(--violet-l)}
.kn-g{background:var(--zacht);color:var(--inkt);border-color:var(--lijn)}
.kn-blok{width:100%}
.kn-k{min-height:42px;padding:9px 18px;font-size:.92rem}
.kn-g2{position:relative;overflow:hidden}
.kn-g2::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:glans 4.5s 1.5s infinite}
@keyframes glans{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
/* kop */
.hd{position:sticky;top:0;z-index:50;background:rgba(14,12,43,.82);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(255,255,255,.07);transition:background .3s,box-shadow .3s}
.hd.vast{background:rgba(14,12,43,.95);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.hd-in{display:flex;align-items:center;gap:22px;min-height:70px}
.merk{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 1.04rem/1 var(--kop);letter-spacing:-.01em;white-space:nowrap}
.merk:hover{color:#fff}.merk b{font-weight:800}
.mk{width:36px;height:36px;flex:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.merk:hover .mk{transform:rotate(-8deg) scale(1.06)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600;font-size:.94rem;padding:9px 13px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover,.nav a[aria-current]{color:#fff;background:rgba(255,255,255,.09)}
.hamb{display:none;margin-left:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;width:46px;height:46px;border-radius:12px;align-items:center;justify-content:center;cursor:pointer}
.mpan{position:fixed;inset:70px 0 0;z-index:49;background:var(--nacht);padding:18px 16px 28px;overflow:auto;display:flex;flex-direction:column;gap:18px}
.mpan[hidden]{display:none}
.mpan nav{display:flex;flex-direction:column}
.mpan nav a{color:#fff;text-decoration:none;font:700 1.25rem/1 var(--kop);padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
/* donkere vlakken */
.held,.ph,.s-donker{position:relative;background:radial-gradient(1100px 520px at 85% -10%,rgba(109,94,245,.42),transparent 60%),radial-gradient(700px 420px at -5% 110%,rgba(255,159,110,.16),transparent 60%),var(--nacht);color:#fff;overflow:hidden}
.held .lead,.ph .lead,.s-donker .lead{color:rgba(255,255,255,.76)}
.raster{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 60% 30%,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 60% 30%,#000 25%,transparent 75%);pointer-events:none}
.held{padding:clamp(48px,8vw,104px) 0 clamp(64px,9vw,120px)}
.held-g{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.cta2{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.held-v{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:rgba(255,255,255,.8);font-size:.93rem}
.held-v li{display:flex;align-items:center;gap:7px}.held-v .ic{color:var(--munt)}
/* kanaal-mockup */
.mock{position:relative;height:500px}
.mk-glow{position:absolute;inset:12% 8%;background:radial-gradient(circle,rgba(109,94,245,.55),transparent 65%);filter:blur(30px);animation:adem 6s ease-in-out infinite}
@keyframes adem{50%{transform:scale(1.12);opacity:.7}}
.mk-kaart{position:absolute;background:rgba(255,255,255,.97);color:var(--inkt);border-radius:18px;padding:16px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.4);font-size:.88rem;line-height:1.45;opacity:0;animation:kaartIn .8s cubic-bezier(.2,.8,.2,1) forwards,zweef 7s ease-in-out infinite}
.mk-kaart[data-i="0"]{animation-delay:.2s,1s}.mk-kaart[data-i="1"]{animation-delay:.55s,1.6s}.mk-kaart[data-i="2"]{animation-delay:.9s,2.1s}.mk-kaart[data-i="3"]{animation-delay:1.25s,2.6s}
@keyframes kaartIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
@keyframes zweef{50%{translate:0 -8px}}
.mk-web{left:0;top:10px;width:60%;padding:0;overflow:hidden}
.mk-top{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#F1EFFB;border-bottom:1px solid var(--lijn)}
.dot{width:9px;height:9px;border-radius:50%;background:#D5D1EA}.dot:first-child{background:#FF8F7A}.dot:nth-child(2){background:#FFC56E}
.mk-url{margin-left:10px;font:500 .72rem var(--mono);color:var(--grijs);background:#fff;padding:3px 10px;border-radius:99px}
.mk-chat{padding:14px}
.b{margin:0 0 8px;padding:9px 12px;border-radius:14px;max-width:88%;width:fit-content}
.b.k{background:#EEECFB;border-bottom-right-radius:4px;margin-left:auto}
.b.a{background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;border-bottom-left-radius:4px}
.typ{display:flex;gap:4px;padding:6px 2px;margin:0}
.typ i{width:7px;height:7px;border-radius:50%;background:#B9B3E6;animation:typ 1.2s infinite}.typ i:nth-child(2){animation-delay:.15s}.typ i:nth-child(3){animation-delay:.3s}
@keyframes typ{30%{transform:translateY(-4px);background:var(--violet)}}
.mk-lbl{position:absolute;top:-12px;right:14px;display:inline-flex;align-items:center;gap:5px;background:var(--nacht2);color:#fff;font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:6px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.mk-web .mk-lbl{top:9px;right:10px}
.mk-wa{right:0;top:70px;width:38%;background:#ECF8F1}
.mk-wah{display:flex;align-items:center;gap:6px;font-weight:700;color:#127A4B;font-size:.78rem;margin-bottom:8px}
.mk-wa .b.k{background:#fff}.mk-wa .b.a{background:#D6F5E3;color:#123;}
.mk-tel{left:3%;top:318px;width:50%;background:var(--nacht2);color:#fff;box-shadow:0 30px 60px -24px rgba(0,0,0,.7),0 0 0 1px rgba(169,159,255,.35)}
.mk-telk{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--munt);font-weight:600}
.golf{display:flex;align-items:center;gap:4px;height:40px;margin:8px 0}
.golf i{flex:1;background:linear-gradient(var(--munt),var(--violet-l));border-radius:4px;height:30%;animation:golf 1.1s ease-in-out infinite}
.golf i:nth-child(2n){animation-delay:.2s}.golf i:nth-child(3n){animation-delay:.4s}.golf i:nth-child(5n){animation-delay:.55s}
@keyframes golf{50%{height:100%}}
.mk-tt{margin:0;font-size:.8rem;color:rgba(255,255,255,.82);font-style:italic}
.mk-ag{right:0;top:292px;width:42%}
.mk-agk{font-size:.78rem;font-weight:700;color:var(--violet-d);display:flex;gap:6px;align-items:center;margin-bottom:6px}
.mk-ag ul{list-style:none;margin:0;padding:0;font-size:.82rem}
.mk-ag li{display:flex;gap:6px;align-items:center;padding:3px 0}
.mk-ag .ok .ic{color:#13A06B}.mk-ag .wacht{color:var(--perzik-d);font-weight:600}
/* strook */
.strook{background:var(--nacht2);border-block:1px solid rgba(255,255,255,.08);overflow:hidden;padding:14px 0}
.strook-t{display:flex;gap:44px;width:max-content;animation:strook 42s linear infinite}
.strook span{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.72);font:500 .86rem var(--mono);white-space:nowrap}
.strook .ic{color:var(--perzik)}
@keyframes strook{to{transform:translateX(-50%)}}
/* secties */
.s{padding:clamp(60px,8vw,110px) 0}
.s-zacht{background:var(--zacht)}
.kop-c{text-align:center;max-width:760px;margin:0 auto 46px}.kop-c .lead{margin-inline:auto}
/* demo */
.s-demo{background:linear-gradient(180deg,var(--zacht),#fff)}
.demo{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.vink{list-style:none;padding:0;margin:0 0 26px}
.vink li{position:relative;padding:8px 0 8px 34px;font-weight:600}
.vink li::before{content:"";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--lijn);background:#fff;color:var(--inkt);padding:9px 15px;border-radius:999px;font:600 .9rem var(--tekst);cursor:pointer;transition:all .2s;min-height:42px}
.chip:hover{border-color:var(--violet-l)}
.chip.aan{background:var(--nacht);color:#fff;border-color:var(--nacht)}
.tel-frame{background:#fff;border-radius:28px;box-shadow:var(--schaduw),0 0 0 1px var(--lijn);overflow:hidden;max-width:470px}
.tf-kop{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--nacht);color:#fff}
.tf-kop small{display:block;color:var(--munt);font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.tf-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--perzik));display:grid;place-items:center}
.tf-ber{height:360px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:2px;background:radial-gradient(circle at 20% 0,#F4F2FF,#fff 60%);scroll-behavior:smooth}
.tf-ber .b{font-size:.95rem;animation:bIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes bIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
.tf-in{display:flex;justify-content:space-between;align-items:center;margin:0 14px 14px;padding:12px 16px;border:1px solid var(--lijn);border-radius:999px;color:#9A97B5;font-size:.9rem}
.demo-n{font-size:.83rem;color:var(--grijs);margin-top:12px;max-width:470px}
/* pijn */
.pijn{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pk{background:#fff;border:1px solid var(--lijn);border-radius:var(--rad);padding:28px;box-shadow:var(--schaduw-s);position:relative}
.pk::before{content:"“";position:absolute;top:-6px;right:20px;font:800 5rem/1 var(--kop);color:rgba(109,94,245,.13)}
.pk b{display:block;font:700 1.15rem/1.35 var(--kop);margin-bottom:12px}
.pk p{color:var(--grijs);margin:0}
/* keuzehulp op home */
.kz-g{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.kl{color:var(--grijs);font-size:.95rem}
.kz-w .kh{margin:0}
.kh{box-shadow:var(--schaduw)!important;border-radius:22px!important}
.kh label:has(input:checked){background:#EEEBFF!important}
.knop{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--perzik),var(--perzik-d));color:#1B0E06!important;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:999px}
/* soorten */
.sks{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:1180px){.sks{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
.sk{position:relative;display:flex;flex-direction:column;gap:6px;padding:24px;background:#fff;border:1px solid var(--lijn);border-radius:var(--rad);color:var(--inkt);text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.sk:hover{transform:translateY(-5px);box-shadow:var(--schaduw);border-color:var(--violet-l);color:var(--inkt)}
.sk-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#EEEBFF,#FFE9DC);color:var(--violet-d);margin-bottom:8px;transition:transform .4s}
.sk:hover .sk-ic{transform:rotate(-6deg) scale(1.08)}
.sk-kan{font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grijs)}
.sk b{font:700 1.14rem/1.25 var(--kop)}
.sk span:not([class]){color:var(--grijs);font-size:.93rem}
.sk-m{position:absolute;top:22px;right:22px;color:var(--violet);opacity:0;transform:translateX(-6px);transition:all .3s}
.sk:hover .sk-m{opacity:1;transform:none}
/* tabel */
.tbw{overflow-x:auto;border-radius:var(--rad);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.tb{width:100%;border-collapse:collapse;min-width:660px;font-size:.95rem}
.tb th,.tb td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:top}
.tb thead th{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--munt)}
.tb tbody th{font-family:var(--kop);font-size:1.02rem}
.tb td{color:rgba(255,255,255,.78)}
.tb a{color:var(--perzik);font-weight:600}
.tb-n{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:16px}.tb-n a{color:#fff}
/* branches */
.bks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bk{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--rad);background:var(--zacht);color:var(--inkt);text-decoration:none;font-family:var(--kop);font-size:1.08rem;transition:background .25s,color .25s,transform .25s}
.bk>.ic:first-child{color:var(--violet)}
.bk-p{margin-left:auto;transition:transform .25s}
.bk:hover{background:var(--nacht);color:#fff;transform:translateY(-3px)}.bk:hover .ic{color:var(--perzik)}.bk:hover .bk-p{transform:translateX(4px)}
/* eerlijk */
.eer{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;max-width:900px}
.eer-ic{width:68px;height:68px;border-radius:20px;background:var(--nacht);color:var(--munt);display:grid;place-items:center}.eer-ic .ic{width:32px;height:32px}
.eer p{color:var(--grijs)}
/* binnenpagina kop */
.ph{padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px)}
.ph-g{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.ph-g1{grid-template-columns:1fr;max-width:880px}
.ph h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.kruim{font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:18px}.kruim a{color:rgba(255,255,255,.85)}.kruim span{margin:0 4px;opacity:.5}
.bijg{font:500 .74rem var(--mono);color:rgba(255,255,255,.5);margin:0;text-transform:uppercase;letter-spacing:.05em}
.ph-f{margin:0;position:relative}
.ph-f::before{content:"";position:absolute;inset:-12px -12px 12px 12px;border-radius:26px;border:1.5px solid rgba(169,159,255,.4)}
.ph-foto{position:relative;width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.ph-k{text-align:left}
/* artikel */
.lees{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.tekst{max-width:760px;font-size:1.06rem;overflow-wrap:anywhere}
.tekst table{overflow-wrap:normal}
.tekst h2{margin-top:1.9em;scroll-margin-top:96px;font-size:clamp(1.45rem,2.6vw,1.9rem)}
.tekst h2:first-child{margin-top:0}
.tekst h3{margin-top:1.5em}
.tekst ul,.tekst ol{padding-left:1.3em}.tekst li{margin:.35em 0}.tekst li::marker{color:var(--violet)}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;border:1px solid var(--lijn);border-radius:var(--rad-s);max-width:100%}
.tekst table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.tbl:has(th:only-child) table{min-width:0}
.tekst th,.tekst td{padding:12px 14px;border-bottom:1px solid var(--lijn);text-align:left;vertical-align:top}
.tekst th{background:var(--zacht);font-weight:700;font-size:.88rem}
.tekst tr:last-child td{border-bottom:0}
.tekst blockquote{margin:24px 0;padding:18px 22px;border-left:4px solid var(--perzik);background:#FFF6F0;border-radius:0 var(--rad-s) var(--rad-s) 0}
.lees-z{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.inh{display:flex;flex-direction:column;border-left:2px solid var(--lijn);padding-left:16px;max-height:52vh;overflow:auto}
.inh b{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--grijs);margin-bottom:8px}
.inh a{color:var(--grijs);text-decoration:none;font-size:.9rem;padding:5px 0;line-height:1.35;transition:color .2s}
.inh a:hover,.inh a.nu{color:var(--violet-d);font-weight:600}
.zk{background:var(--nacht);color:#fff;border-radius:var(--rad);padding:22px;background-image:radial-gradient(circle at 100% 0,rgba(109,94,245,.6),transparent 60%)}
.zk b{font:700 1.15rem var(--kop)}.zk p{color:rgba(255,255,255,.75);font-size:.92rem;margin:6px 0 14px}
.overzicht{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.overzicht li{margin:0!important;padding:16px 18px;border:1px solid var(--lijn);border-radius:var(--rad-s);display:flex;flex-direction:column;gap:4px}
.overzicht li span{font-size:.88rem;color:var(--grijs)}.overzicht br{display:none}
/* formulier */
.s-form{background:var(--zacht)}
.fk{background:#fff;border-radius:24px;padding:clamp(22px,4vw,40px);box-shadow:var(--schaduw);border:1px solid var(--lijn)}
.lees-z .fk{padding:22px}.lees-z .fk h2{font-size:1.35rem}.lees-z .r2{grid-template-columns:1fr}
.fk-l{color:var(--grijs)}
.fm label,.fm legend{display:block;font-weight:600;font-size:.88rem;margin:12px 0 5px}
.fm input:not([type=radio]),.fm select,.fm textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:var(--rad-s);background:#FCFBFF;min-height:48px;transition:border-color .2s,box-shadow .2s}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(109,94,245,.15);background:#fff}
.fm textarea{min-height:110px;resize:vertical}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rol{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.rol legend{width:100%}
.rol label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 16px;border:1.5px solid var(--lijn);border-radius:999px;cursor:pointer}
.rol label:has(input:checked){border-color:var(--violet);background:#EEEBFF}
.rol input{accent-color:var(--violet)}
.fm .kn{margin-top:18px}
.fk-s{font-size:.82rem;color:var(--grijs);margin:12px 0 0;display:flex;gap:6px;align-items:flex-start}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
/* faq */
.fqs{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.fq{border:1px solid var(--lijn);border-radius:var(--rad-s);background:#fff;transition:box-shadow .25s,border-color .25s}
.fq[open]{box-shadow:var(--schaduw-s);border-color:var(--violet-l)}
.fq summary{list-style:none;cursor:pointer;padding:18px 20px;font:700 1.04rem/1.35 var(--kop);display:flex;justify-content:space-between;gap:14px;align-items:center}
.fq summary::-webkit-details-marker{display:none}
.fq-p{transform:rotate(90deg);transition:transform .25s;color:var(--violet)}
.fq[open] .fq-p{transform:rotate(-90deg)}
.fq p{padding:0 20px 18px;margin:0;color:var(--grijs)}
/* lees ook */
.rks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.rk{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--lijn);border-radius:var(--rad);text-decoration:none;color:var(--inkt);transition:transform .3s,box-shadow .3s}
.rk:hover{transform:translateY(-4px);box-shadow:var(--schaduw);color:var(--inkt)}
.rk-eb{font:500 .7rem var(--mono);text-transform:uppercase;color:var(--violet-d);letter-spacing:.06em}
.rk b{font:700 1.15rem/1.3 var(--kop)}.rk span:not([class]){color:var(--grijs);font-size:.92rem}
.rk-m{margin-top:auto;color:var(--violet-d);font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center}
/* voet */
.ft{background:var(--nacht);color:rgba(255,255,255,.72);padding:0 0 30px;font-size:.93rem;position:relative}
.ft-cta{position:relative;top:-46px;margin-bottom:-6px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px 32px;border-radius:24px;background:linear-gradient(120deg,var(--violet-d),var(--violet) 55%,#9A6BF0);color:#fff;box-shadow:0 30px 60px -30px rgba(84,67,224,.9)}
.ft-cta .eb{color:#FFD9C5;margin-bottom:6px}.ft-cta b{display:block;font:700 clamp(1.15rem,2.2vw,1.5rem)/1.25 var(--kop)}
.ft-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-top:10px}
.ft h3{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--munt);margin-bottom:14px}
.ft-g>div>a:not(.merk){display:block;color:rgba(255,255,255,.72);text-decoration:none;padding:4px 0}
.ft-g>div>a:hover{color:#fff}
.ft-o p{margin:14px 0}
.ft-eerlijk{font-size:.86rem;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:var(--rad-s);background:rgba(255,255,255,.03)}.ft-eerlijk a{color:var(--perzik)}
.ft-k{border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:20px;font-size:.8rem;color:rgba(255,255,255,.5)}
.mbar{display:none}
/* onthullen */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
/* responsief */
@media (max-width:1060px){.nav{display:none}.hamb{display:inline-flex}.hd .kn-k{margin-left:auto}.hamb{margin-left:0}
 .held-g,.demo,.kz-g,.ph-g{grid-template-columns:1fr}.mock{height:470px;max-width:560px;width:100%;margin:0 auto}
 .lees{grid-template-columns:minmax(0,1fr)}.lees-z{position:static}.inh{display:none}.ft-g{grid-template-columns:1fr 1fr}.ph-f{max-width:560px}}
@media (max-width:760px){body{font-size:16px}
 .hd-in{min-height:62px;gap:10px}.mpan{inset:62px 0 0}.hd .kn-k{display:none}.hamb{margin-left:auto}.merk{font-size:.95rem}.mk{width:32px;height:32px}
 .pijn,.rks,.bks{grid-template-columns:1fr}.r2{grid-template-columns:1fr}
 .mock{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;padding-top:12px}.mk-kaart{position:relative;inset:auto;width:auto!important;animation:kaartIn .8s cubic-bezier(.2,.8,.2,1) forwards}.mk-web{grid-column:1/-1}.mk-ag{display:none}.mk-wa,.mk-tel{font-size:.8rem}.mk-tel .mk-tt{display:none}
 .sk{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px}.sk-ic{grid-row:1/4;width:44px;height:44px;margin:0}.sk-m{display:none}
 .cta2 .kn{flex:1 1 100%}
 .ft-g{grid-template-columns:1fr}.ft-cta{padding:22px}.ft-cta .kn{width:100%}
 .eer{grid-template-columns:1fr}.ph-f::before{display:none}.ph-foto{aspect-ratio:16/10}
 .tf-ber{height:330px}
 .mbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lijn);transform:translateY(110%);transition:transform .35s}
 .mbar.toon{transform:none}.mbar .kn{min-height:46px;padding:10px}
 .ft{padding-bottom:96px}
 .tekst table{font-size:.88rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.mk-kaart{opacity:1}}

/* ── WAUW-20261012: aurora, spotlight, woorden, draai, tellers, stappen, dock, paneel ── */
.voortgang{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--v,0));background:linear-gradient(90deg,var(--perzik),var(--violet-l),var(--munt))}
.hd-tel{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font:600 .92rem var(--tekst);padding:9px 12px;border-radius:999px;white-space:nowrap;transition:background .2s}
.hd-tel:hover{color:#fff;background:rgba(255,255,255,.09)}.hd-tel .ic{color:var(--munt)}
.nav{margin-left:auto}
.aurora{position:absolute;inset:-20%;pointer-events:none;filter:blur(70px);opacity:.75}
.aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen}
.aurora i:nth-child(1){width:46vw;height:46vw;left:48%;top:-8%;background:radial-gradient(circle,rgba(124,108,246,.85),transparent 62%);animation:dw1 18s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:34vw;height:34vw;left:8%;top:52%;background:radial-gradient(circle,rgba(255,159,110,.5),transparent 62%);animation:dw2 22s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:30vw;height:30vw;left:68%;top:48%;background:radial-gradient(circle,rgba(94,234,212,.38),transparent 62%);animation:dw3 26s ease-in-out infinite alternate}
@keyframes dw1{to{transform:translate(-14vw,10vh) scale(1.15)}}@keyframes dw2{to{transform:translate(18vw,-12vh) scale(1.2)}}@keyframes dw3{to{transform:translate(-20vw,-6vh) scale(.9)}}
.ph .aurora{opacity:.55}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(169,159,255,.16),transparent 60%);transition:background .1s}
.held .w,.ph .w{position:relative;z-index:1}
.woorden .wd{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px);animation:wdIn .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.08s + var(--i)*.09s)}
@keyframes wdIn{to{opacity:1;transform:none;filter:none}}
.held h1 u::after{animation-delay:1.1s}
.draai{font:600 clamp(1.05rem,1.8vw,1.3rem) var(--kop);color:rgba(255,255,255,.82);margin:-4px 0 18px;min-height:1.5em}
.draai-w{color:var(--munt);background:linear-gradient(90deg,var(--munt),var(--violet-l));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.draai-c{display:inline-block;width:2px;height:1.05em;background:var(--munt);margin-left:3px;vertical-align:-.15em;animation:knip 1s steps(1) infinite}
@keyframes knip{50%{opacity:0}}
.mock3d{perspective:1200px}
.mock3d .mock{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .25s ease-out}
.mock3d .mk-kaart[data-i="1"],.mock3d .mk-kaart[data-i="3"]{translate:0 0 40px}
.tellers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(40px,6vw,72px);border:1px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.tl{background:rgba(14,12,43,.55);padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.tl b{font:800 clamp(1.7rem,3.4vw,2.5rem)/1 var(--kop);color:#fff;letter-spacing:-.02em}
.tl>span{color:rgba(255,255,255,.66);font-size:.9rem}
.s-stap{background:linear-gradient(180deg,#fff,var(--zacht))}
.stappen{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;max-width:1040px}
.stappen::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,var(--violet),var(--perzik));transform-origin:left;transform:scaleX(var(--sv,0));transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.stappen.in::before{--sv:1}
.stappen li{position:relative;text-align:center;padding:0 10px}
.st-n{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 18px;border-radius:22px;background:var(--nacht);color:#fff;font:800 1.2rem var(--kop);box-shadow:0 18px 34px -18px rgba(23,20,74,.8),inset 0 0 0 1px rgba(255,255,255,.12);position:relative;z-index:1;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.stappen li:hover .st-n{transform:translateY(-4px) rotate(-6deg)}
.stappen li:nth-child(2) .st-n{background:linear-gradient(135deg,var(--violet),var(--violet-d))}.stappen li:nth-child(3) .st-n{background:linear-gradient(135deg,var(--perzik),var(--perzik-d));color:#1B0E06}
.stappen b{display:block;font:700 1.2rem var(--kop);margin-bottom:6px}.stappen p{color:var(--grijs);margin:0}
.cta-c{justify-content:center;margin-top:40px}
button.kn{font-family:var(--tekst)}
/* kaart-spotlight */
.sk,.rk,.pk{--x:50%;--y:50%}
.sk::after,.rk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--x) var(--y),rgba(124,108,246,.12),transparent 65%)}
.sk:hover::after,.rk:hover::after{opacity:1}.rk{position:relative}
/* dock */
.dock{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;gap:10px;transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.dock.toon{transform:none;opacity:1}
.dk{display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;font:700 .98rem var(--tekst);text-decoration:none;box-shadow:0 18px 40px -16px rgba(14,12,43,.6);transition:transform .2s}
.dk:hover{transform:translateY(-3px)}
.dk-bel{background:var(--nacht);color:#fff}.dk-bel:hover{color:#fff}.dk-bel .ic{color:var(--munt)}
.dk-aan{background:linear-gradient(135deg,var(--perzik),var(--perzik-d));color:#1B0E06;position:relative}
.dk-aan::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,159,110,.6);animation:puls 2.6s infinite}
@keyframes puls{70%{box-shadow:0 0 0 16px rgba(255,159,110,0)}100%{box-shadow:0 0 0 0 rgba(255,159,110,0)}}
/* paneel */
.pnl-bg{position:fixed;inset:0;z-index:60;background:rgba(9,8,28,.55);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.pnl-bg.open{opacity:1}
.pnl{position:fixed;z-index:61;right:20px;bottom:20px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:#fff;border-radius:26px;box-shadow:0 40px 90px -30px rgba(9,8,28,.75);transform:translateY(24px) scale(.97);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.pnl.open{transform:none;opacity:1}
.pnl-k{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:22px 22px 18px;background:var(--nacht);color:#fff;background-image:radial-gradient(circle at 100% 0,rgba(124,108,246,.7),transparent 60%)}
.pnl-k .eb{margin-bottom:8px}.pnl-k b{display:block;font:700 1.3rem/1.2 var(--kop)}
.pnl-x{background:rgba(255,255,255,.1);border:0;color:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none}
.pnl-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;margin:14px 16px 0;background:var(--zacht);border-radius:14px}
.pnl-tabs button{border:0;background:none;padding:10px 6px;border-radius:10px;font:600 .84rem var(--tekst);color:var(--grijs);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:42px}
.pnl-tabs button[aria-selected=true]{background:#fff;color:var(--inkt);box-shadow:var(--schaduw-s)}
.pnl-b{padding:6px 20px 22px}
.snel label:not(.sc){display:block;font-weight:600;font-size:.86rem;margin:12px 0 5px}
.snel input:not([type=radio]),.snel textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:1.5px solid var(--lijn);border-radius:var(--rad-s);background:#FCFBFF;min-height:46px}
.snel input:focus,.snel textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(109,94,245,.15)}
.snel .kn{margin-top:16px}
.sn-v{font-weight:700;margin:14px 0 8px}
.scs{display:flex;flex-wrap:wrap;gap:7px}
.sc{cursor:pointer}.sc input{position:absolute;opacity:0}
.sc span{display:inline-block;padding:8px 13px;border:1.5px solid var(--lijn);border-radius:999px;font-size:.86rem;font-weight:600;transition:all .2s}
.sc input:checked+span{background:var(--nacht);border-color:var(--nacht);color:#fff}
.sc input:focus-visible+span{outline:3px solid var(--perzik);outline-offset:2px}
.bel{text-align:center;padding:18px 0 4px}
.bel-ic,.ok-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:6px auto 12px;background:linear-gradient(135deg,var(--violet),var(--violet-d));color:#fff;box-shadow:0 0 0 10px rgba(124,108,246,.12)}
.bel-ic{animation:rinkel 2.4s ease-in-out infinite}
@keyframes rinkel{0%,60%,100%{transform:none}65%,75%,85%{transform:rotate(-12deg)}70%,80%,90%{transform:rotate(12deg)}}
.bel-nr{display:block;font:800 2rem var(--kop);color:var(--inkt);text-decoration:none;margin:4px 0 16px;letter-spacing:-.01em}
.pnl-ok{text-align:center;padding:22px 0 6px}.pnl-ok b{font:700 1.3rem var(--kop);display:block;margin-bottom:6px}.pnl-ok p{color:var(--grijs)}
.ok-ic{background:linear-gradient(135deg,#21C189,#13A06B);animation:okIn .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes okIn{from{transform:scale(.3);opacity:0}}
.snel.bezig .kn{opacity:.6;pointer-events:none}
@media (max-width:1240px){.hd-tel span{display:none}.hd-tel{padding:10px}}
@media (max-width:1060px){.hd-tel{margin-left:auto}.tellers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
 .hd-tel{display:none}
 .dock{left:0;right:0;bottom:0;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--lijn);display:grid;grid-template-columns:1fr 1.4fr}
 .dk{justify-content:center;min-height:48px;box-shadow:none;padding:0 12px}
 .pnl{right:0;left:0;bottom:0;width:100%;border-radius:24px 24px 0 0;max-height:92dvh}
 .stappen{grid-template-columns:1fr;gap:28px}.stappen::before{top:0;bottom:0;left:33px;right:auto;width:2px;height:auto;transform-origin:top;transform:scaleY(var(--sv,0))}
 .stappen li{text-align:left;display:grid;grid-template-columns:68px 1fr;column-gap:16px;padding:0}.st-n{grid-row:1/3;margin:0}
 .tl{padding:16px}.cta-c .kn{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){.woorden .wd{opacity:1;filter:none;transform:none}.aurora i{animation:none}.dock{transition:none}}

.pnl-tabs[hidden],.snel[hidden],.bel[hidden],.pnl-ok[hidden]{display:none!important}