/* Klik&Shop AI Solutions – redesign 01-11-2026. Geen JavaScript, geen externe bronnen. Animaties alleen bij prefers-reduced-motion: no-preference. */
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk.woff2?v=b2b38195d9-20261101) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--ink:#0a1426;--ink2:#0f1d35;--ink3:#16294a;--geel:#ffc933;--geel-l:#ffd666;--oranje:#ff9f1a;--oranje-d:#b45309;--blauw:#3b82f6;--blauw-l:#8fbcff;
--tekst:#14213a;--grijs:#4f5d73;--lijn:#e3e8f1;--bg:#f4f6fb;--wit:#fff;--groen:#15803d;--rood:#b91c1c;--licht:#c3d0e4;--gedempt:#a9b8d0;
--accent:linear-gradient(135deg,#ffd84d 0%,#ff9f1a 100%);--kop:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--schaduw:0 1px 2px rgba(10,20,38,.05),0 10px 30px rgba(10,20,38,.07);--schaduw-hover:0 2px 4px rgba(10,20,38,.06),0 22px 48px rgba(10,20,38,.14)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--tekst);background:var(--wit);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:#1d4ed8;text-underline-offset:3px}a:hover{color:var(--oranje-d)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid #ffb020;outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--geel);color:var(--ink);font-weight:700;padding:8px 14px;z-index:40}.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;vertical-align:middle}
h1,h2,h3,.logo,.getal,.prijs{font-family:var(--kop)}
/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:30;background:rgba(10,20,38,.94);border-bottom:1px solid rgba(255,255,255,.08)}
@supports (backdrop-filter:blur(8px)){.kop{background:rgba(10,20,38,.82);backdrop-filter:blur(14px) saturate(140%)}}
.kop .wrap{display:flex;align-items:center;gap:14px;min-height:72px;flex-wrap:wrap}
.logo{font-weight:700;text-decoration:none;color:#fff;font-size:21px;letter-spacing:-.4px;margin-right:auto;white-space:nowrap}
.logo span{color:var(--geel)}.logo:hover{color:#fff}
.menu{display:flex;gap:2px;order:1}.kop-cta{order:2}.taal{order:3}
.menu a{text-decoration:none;color:#d3ddec;padding:8px 12px;border-radius:10px;font-size:15.5px;font-weight:500;position:relative}
.menu a:hover{background:rgba(255,255,255,.08);color:#fff}
.menu a[aria-current=page]{color:#fff;font-weight:700}
.menu a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--accent)}
.kop-cta{text-decoration:none;font-weight:700;font-size:14.5px;color:var(--ink);background:var(--accent);padding:8px 14px;border-radius:999px;white-space:nowrap;margin-left:6px}
.kop-cta:hover{color:var(--ink);filter:brightness(1.06)}
.taal{display:flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;overflow:hidden;font-size:13.5px;font-weight:700}
.taal a,.taal span{padding:6px 12px;text-decoration:none}.taal span{background:var(--geel);color:var(--ink)}.taal a{color:#e6edf8}.taal a:hover{background:rgba(255,255,255,.1);color:#fff}
.menuknop{display:none}#menu-toggle{position:absolute;opacity:0;pointer-events:none}
@media (max-width:980px){
 .kop .wrap{gap:10px;min-height:64px}.logo{font-size:18px}.kop-cta{display:none}
 .taal{order:1}.menuknop{order:2;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:2px 11px;font-size:20px;line-height:1.5;cursor:pointer;color:#fff;font-weight:700}
 .menu{display:none;order:5;flex-basis:100%;flex-direction:column;padding:0 0 14px}
 #menu-toggle:checked ~ .menu{display:flex}
 #menu-toggle:focus-visible + .menuknop{outline:3px solid #ffb020}
 .menu a{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0}.menu a[aria-current=page]::after{left:10px;right:auto;width:28px;bottom:6px}
}
/* ---------- knoppen ---------- */
.knoppen{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.knop{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#1a1200;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:12px;border:2px solid transparent;
 box-shadow:0 8px 22px rgba(255,159,26,.30);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.knop:hover{color:#1a1200;transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,159,26,.42)}
.knop.licht{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:none}.knop.licht:hover{background:var(--bg);color:var(--ink)}
.knop.wa{background:#25d366;color:#052e16;box-shadow:0 8px 22px rgba(37,211,102,.25)}.knop.wa:hover{background:#3ee07a;color:#052e16}
.hero .knop.licht,.cta .knop.licht,.donker .knop.licht{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.4)}
.hero .knop.licht:hover,.cta .knop.licht:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
/* ---------- donkere achtergronden ---------- */
.hero,.paginakop,.donker,.cta{background-color:var(--ink);
 background-image:radial-gradient(640px 420px at 88% 12%,rgba(59,130,246,.30),transparent 62%),radial-gradient(520px 380px at 4% 96%,rgba(255,159,26,.16),transparent 62%),
 linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,auto,44px 44px,44px 44px}
/* ---------- hero ---------- */
.hero{color:var(--licht);padding:76px 0 132px;clip-path:polygon(0 0,100% 0,100% calc(100% - 64px),0 100%);position:relative}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:56px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,201,51,.10);border:1px solid rgba(255,201,51,.35);color:var(--geel-l);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.35}
.tag .ic{width:16px;height:16px;color:var(--geel)}
.hero h1{font-size:clamp(40px,5.2vw,66px);line-height:1.03;margin:22px 0 22px;color:#fff;letter-spacing:-1.8px;font-weight:700}
.gloed{color:var(--geel);background:var(--accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;white-space:nowrap}
.gloed::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:4px;background:var(--accent);transform-origin:left;opacity:.9}
.lead{font-size:19.5px;max-width:600px;color:var(--licht);margin:0 0 30px}
.hero-link{margin:20px 0 0;font-size:16px}.hero-link a{color:var(--blauw-l)}.hero-link a:hover{color:#fff}
.hero-punten{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;color:var(--licht)}
.hero-punten li{display:flex;align-items:center;gap:8px}.hero-punten .ic{width:18px;height:18px;color:var(--geel)}
/* ---------- hero-podium (geanimeerd voorbeeld) ---------- */
.podium{margin:0;position:relative;height:550px;padding-bottom:34px}
.p-gloed{position:absolute;inset:6% 4% 14% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(59,130,246,.45),rgba(255,159,26,.12) 60%,transparent);pointer-events:none}
.p-blad,.p-concept{background:#fff;color:var(--tekst);border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.p-blad{position:absolute;top:0;right:0;width:88%}
.mock-balk{display:flex;gap:6px;align-items:center;background:#eef2f8;padding:9px 11px;border-bottom:1px solid var(--lijn)}
.mock-balk span{padding:3px 10px;border-radius:7px;background:#fff;font-weight:700;color:var(--ink3);font-size:12.5px}
.mock-balk .mock-label{margin-left:auto;background:#fff1cc;color:#8a4b00}
.podium table{font-size:13px;line-height:1.4}.podium th,.podium td{padding:8px 10px;border:0;border-bottom:1px solid #edf1f7;width:auto}
.podium th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:#55637a;background:#fafbfd}
.rij-nieuw td{background:#fffbea}
.nieuwtag{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:var(--accent);color:#3b2400;border-radius:5px;padding:0 5px;margin-left:4px;vertical-align:1px}
.mist{display:inline-block;background:#fff1e0;color:#9a3412;font-weight:700;border-radius:6px;padding:0 6px}
.mock-spoed{background:#fee2e2;color:#991b1b;font-weight:800;padding:1px 6px;border-radius:5px;font-size:12px}
.p-tel{position:absolute;left:0;bottom:44px;width:228px;background:#060c18;border:2px solid rgba(255,255,255,.16);border-radius:34px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.p-tel::before{content:"";display:block;width:70px;height:6px;border-radius:6px;background:rgba(255,255,255,.18);margin:2px auto 9px}
.p-tel-scherm{background:linear-gradient(180deg,#14284d,#0d1a33);border-radius:24px;padding:12px;min-height:218px}
.p-notif{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:9px 10px;color:#fff;font-size:13px;line-height:1.3}
.p-notif small{display:block;color:var(--gedempt);font-size:11.5px}
.p-notif-ic{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--accent);color:#3b2400}
.p-bel{margin:12px 0 0;background:#fff;color:var(--tekst);border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:13px;line-height:1.45}
.p-bel small{display:block;color:var(--grijs);font-size:11.5px;margin-top:4px}
.p-concept{position:absolute;right:2%;bottom:34px;width:300px;padding:14px 16px;border-left:4px solid var(--oranje)}
.p-concept-kop{display:flex;align-items:center;gap:8px;font-size:14px}.p-concept-kop .ic{color:var(--oranje-d)}
.p-concept-kop span{margin-left:auto;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#991b1b;background:#fee2e2;border-radius:5px;padding:1px 6px}
.p-concept p{margin:8px 0 0;font-size:13px;line-height:1.5}
.p-zelf{display:flex;align-items:center;gap:6px;color:var(--groen);font-weight:700;font-size:12.5px!important}.p-zelf .ic{width:16px;height:16px}
.p-stroom{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 4px rgba(255,201,51,.25),0 0 22px 6px rgba(255,201,51,.6);opacity:0;pointer-events:none}
.p-stroom1{left:190px;top:300px}.p-stroom2{right:120px;top:120px;background:var(--blauw-l);box-shadow:0 0 0 4px rgba(143,188,255,.25),0 0 22px 6px rgba(143,188,255,.6)}
.podium figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:13px;color:var(--gedempt)}
/* ---------- feiten ---------- */
.feitenband{position:relative;z-index:2;margin-top:-84px}
.feiten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feiten li{background:#fff;border-radius:20px;padding:22px 22px 20px;box-shadow:var(--schaduw-hover);border:1px solid var(--lijn);position:relative;overflow:hidden}
.feiten li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.feiten li:nth-child(even)::before{background:linear-gradient(180deg,#3b82f6,#8fbcff)}
.getal{display:block;font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-1px;color:var(--ink);margin-bottom:6px}
.feiten span{display:block;font-size:15px;color:var(--grijs);line-height:1.45}
/* ---------- secties ---------- */
main{display:block}
.sectie{padding:92px 0}.sectie.grijs{background:var(--bg)}
.bovenkop{display:inline-flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--oranje-d)}
.bovenkop::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--accent)}
h2{font-size:clamp(28px,3.3vw,42px);line-height:1.12;color:var(--ink);margin:0 0 30px;letter-spacing:-1px;font-weight:700}
h3{font-size:20px;line-height:1.3;margin:0 0 8px;color:var(--ink);letter-spacing:-.3px;font-weight:700}
.donker{position:relative;z-index:1;margin:-56px 0;padding:150px 0;color:var(--licht);clip-path:polygon(0 56px,100% 0,100% calc(100% - 56px),0 100%)}
.donker h2,.donker h3{color:#fff}.donker .bovenkop{color:var(--geel-l)}.donker a{color:var(--geel-l)}
.donker + .sectie{padding-top:140px}
.intro{font-size:19px;color:#2b3846;max-width:780px;margin:0 0 10px}
.klein{font-size:15px;color:var(--grijs)}
.raster{align-items:stretch;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.raster.twee{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:28px;align-items:start}
/* ---------- kaarten ---------- */
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:28px 26px 24px;position:relative;overflow:hidden;box-shadow:var(--schaduw);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.kaart::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.kaart:hover{transform:translateY(-6px);box-shadow:var(--schaduw-hover);border-color:#d5dceb}.kaart:hover::before{transform:scaleX(1)}
.kaart p:last-child,.kaart ul:last-child{margin-bottom:0}
.kaart-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#fff4cf,#ffe0b0);color:var(--oranje-d);margin-bottom:18px;transition:transform .3s ease}
.kaart-ic .ic{width:26px;height:26px}
.raster>.kaart:nth-child(3n+2) .kaart-ic{background:linear-gradient(135deg,#e0ecff,#c9dcff);color:#1d4ed8}
.raster>.kaart:nth-child(3n+3) .kaart-ic{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d}
.kaart:hover .kaart-ic{transform:rotate(-6deg) scale(1.06)}
/* ---------- tijdlijn (home) ---------- */
.tijdlijn{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;position:relative}
.tijdlijn::before{content:"";position:absolute;top:34px;left:34px;right:16%;height:2px;background:linear-gradient(90deg,var(--geel),var(--blauw) 60%,rgba(59,130,246,.15))}
.tijdlijn li{position:relative}
.t-knoop{position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:68px;border-radius:50%;background:var(--ink3);border:1px solid rgba(255,255,255,.14);color:var(--geel);
 box-shadow:0 0 0 7px var(--ink),0 0 34px rgba(255,201,51,.28);margin-bottom:22px}
.t-knoop .ic{width:28px;height:28px}
.t-knoop::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,201,51,.45);opacity:0}
.tijdlijn li:nth-child(2) .t-knoop{color:var(--blauw-l);box-shadow:0 0 0 7px var(--ink),0 0 34px rgba(59,130,246,.35)}
.tijdlijn li:nth-child(3) .t-knoop{color:#4ade80;box-shadow:0 0 0 7px var(--ink),0 0 34px rgba(74,222,128,.25)}
.t-nr{display:block;font-family:var(--kop);font-size:14px;font-weight:700;letter-spacing:2.5px;color:var(--blauw-l);margin-bottom:6px}
.tijdlijn h3{font-size:22px}.tijdlijn p{margin:0;color:var(--licht)}
.tijdlijn-link{margin:44px 0 0}.tijdlijn-link a{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(255,214,102,.4);padding-bottom:2px}
.tijdlijn-link a:hover{color:#fff;border-color:#fff}.tijdlijn-link .ic{transition:transform .2s}.tijdlijn-link a:hover .ic{transform:translateX(4px)}
/* ---------- doet / doet niet ---------- */
.paneel{background:#fff;border-radius:22px;padding:34px 32px 26px;box-shadow:var(--schaduw);border:1px solid var(--lijn);position:relative;overflow:hidden}
.paneel::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}
.paneel-ja::before{background:linear-gradient(90deg,#22c55e,#86efac)}.paneel-nee::before{background:linear-gradient(90deg,#ef4444,#fca5a5)}
.paneel h2{font-size:28px;margin-bottom:16px}
ul.vink,ul.kruis{list-style:none;padding:0;margin:10px 0 14px}ul.vink li,ul.kruis li{padding-left:36px;position:relative;margin:11px 0}
ul.vink li::before,ul.kruis li::before{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
ul.vink li::before{content:"✓";background:#dcfce7;color:var(--groen)}
ul.kruis li::before{content:"✕";background:#fee2e2;color:var(--rood)}
/* ---------- rekenvoorbeeld ---------- */
.let{background:#fff8e6;border-left:4px solid var(--oranje);padding:16px 20px;border-radius:12px;margin:20px 0}
.rekenblok{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center;border-radius:26px;padding:36px 38px;color:var(--licht);
 background:radial-gradient(420px 260px at 100% 0,rgba(255,159,26,.22),transparent 70%),linear-gradient(135deg,var(--ink2),var(--ink3));box-shadow:0 24px 50px rgba(10,20,38,.22)}
.rekenblok .let{background:none;border:0;padding:0;margin:0;color:var(--licht);font-size:18px;line-height:1.6}.rekenblok .let b{color:var(--geel-l);font-family:var(--kop);font-size:22px;display:block;margin-bottom:6px}
.balken{display:grid;gap:18px}
.balk-label{display:block;font-size:14px;color:var(--gedempt);margin-bottom:6px}
.balk-staaf{display:flex;align-items:center;height:48px;border-radius:12px;padding:0 16px;transform-origin:left}
.balk-staaf b{font-family:var(--kop);font-size:20px;color:var(--ink)}
.balk-klus .balk-staaf{width:100%;background:var(--accent);box-shadow:0 0 30px rgba(255,159,26,.35)}
.balk-starter .balk-staaf{width:62%;background:linear-gradient(90deg,#3b82f6,#8fbcff)}
.reken{margin-top:26px}
/* ---------- voor wie ---------- */
.voorwie{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:40px;align-items:center}
.illustratie{width:100%;max-width:340px;height:auto;justify-self:center}
.leesverder{font-size:16px}
/* ---------- FAQ ---------- */
.faqlijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.faq-item{background:#fff;border:1px solid var(--lijn);border-radius:20px;padding:24px 24px 20px 24px;box-shadow:var(--schaduw);transition:transform .25s ease,box-shadow .25s ease}
.faq-item:hover{transform:translateY(-4px);box-shadow:var(--schaduw-hover)}
.faq-item h3{font-size:19px;margin:0 0 10px;display:flex;gap:12px;align-items:flex-start}
.faq-item h3::before{content:"?";flex:none;width:30px;height:30px;border-radius:9px;background:var(--ink);color:var(--geel);display:flex;align-items:center;justify-content:center;font-size:16px;margin-top:-2px}
.faq-item p{margin:0 0 8px}.faq-item p:last-child{margin-bottom:0;color:#334155}.faq-item .kort{font-weight:700;color:var(--tekst)}
details.faq{background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:14px 18px;margin:0 0 10px}
/* ---------- CTA ---------- */
.cta-sectie{padding:40px 0 100px}
.cta{color:var(--licht);border-radius:30px;padding:58px 52px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(10,20,38,.25)}
.cta::after{content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,201,51,.35),transparent);pointer-events:none}
.cta-tekst{max-width:520px;position:relative;z-index:1}.cta h2{color:#fff;margin:0 0 10px;font-size:clamp(28px,3vw,40px)}.cta p{margin:0;color:var(--licht);font-size:18px}
.cta-knoppen{display:flex;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
/* ---------- binnenpagina's ---------- */
.paginakop{color:var(--licht);padding:70px 0 108px;clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%);margin-bottom:-20px}
h1.pagina{font-size:clamp(34px,4.4vw,56px);line-height:1.06;color:#fff;margin:0 0 14px;letter-spacing:-1.4px;font-weight:700}
.paginakop .intro{color:var(--licht);font-size:19.5px;max-width:760px}.paginakop .klein{color:var(--gedempt)}.paginakop a{color:var(--blauw-l)}
.prijs{font-size:44px;font-weight:700;color:var(--ink);margin:6px 0 4px;letter-spacing:-1px;line-height:1.1}.prijs small{display:block;font-family:system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--grijs);letter-spacing:0;margin-top:4px}
.raster.prijzen{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.prijslabel{display:inline-block;font-size:12.5px;font-weight:800;color:#8a4b00;background:#fff1cc;text-transform:uppercase;letter-spacing:.8px;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.kaart.uitgelicht{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#ffd84d,#ff9f1a 45%,#3b82f6) border-box;box-shadow:0 24px 50px rgba(255,159,26,.18)}
.kaart.uitgelicht .prijslabel{background:var(--accent);color:#3b2400}
.stappen{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:18px;position:relative}
.stappen::before{content:"";position:absolute;left:27px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--geel),var(--blauw))}
.stappen>li{counter-increment:s;background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:20px 22px 18px 24px;margin-left:72px;position:relative;box-shadow:var(--schaduw);transition:transform .25s ease,box-shadow .25s ease}
.stappen>li:hover{transform:translateX(6px);box-shadow:var(--schaduw-hover)}
.stappen>li::before{content:counter(s);position:absolute;left:-72px;top:16px;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--geel);font-family:var(--kop);font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px #fff,0 0 24px rgba(255,159,26,.35)}
.stappen h3{margin-bottom:4px}.stappen p{margin:0}
.concept-banner{background:#fdecea;border:2px dashed var(--rood);color:#7a1610;padding:12px 16px;border-radius:12px;margin:20px 0;font-weight:700}
.mail{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;background:#fff;border:1px solid var(--lijn);border-top:5px solid var(--oranje);border-radius:16px;padding:18px 20px;overflow-x:auto;margin:0;box-shadow:var(--schaduw)}
.mail.fout{border-top-color:var(--rood);background:#fff7f6}
.bericht{background:#fff;border:1px solid var(--lijn);border-radius:20px 20px 20px 6px;padding:18px 20px;font-size:17px;font-style:italic;box-shadow:var(--schaduw)}
table{border-collapse:collapse;width:100%;font-size:15.5px;background:#fff}
th,td{border:1px solid var(--lijn);padding:10px 12px;text-align:left;vertical-align:top}th{background:#f1f5fb;color:var(--ink3);width:34%}
.tabelwrap{overflow-x:auto;border-radius:14px}
.label{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin:0 0 10px;color:#1e3a8a;background:#e0ecff;padding:4px 11px;border-radius:999px}
.label.groen{color:#166534;background:#dcfce7}.label.rood{color:#991b1b;background:#fee2e2}
.raster.twee>div>.label:not(:first-child),.sectie .wrap>.label{margin-top:8px}
.juridisch{max-width:840px}.juridisch h2{font-size:23px;margin:34px 0 8px;letter-spacing:-.4px}.juridisch p,.juridisch li{color:#2b3846}
.gegevens{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:20px 24px;box-shadow:var(--schaduw)}
.gegevens dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}.gegevens dt{font-weight:700}.gegevens dd{margin:0}
.contactblok{background:#fff;border:1px solid var(--lijn);border-radius:22px;padding:28px;box-shadow:var(--schaduw-hover);margin-bottom:34px}
.contactblok p:first-of-type{margin-top:0}
.paginakop + .wrap,.paginakop + .wrap.juridisch{padding-top:40px}
/* ---------- voet ---------- */
.voet{background:#070e1b;color:var(--gedempt);padding:46px 0 100px;font-size:15px;position:relative}
.voet::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--geel),var(--oranje),var(--blauw))}
.voet a{color:#e6edf8}.voet a:hover{color:var(--geel)}.voet .wrap{display:grid;gap:12px}.voet nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.voet .merk{color:#fff;font-weight:700;font-size:19px;font-family:var(--kop)}.voet .merk span{color:var(--geel)}
/* ---------- mobiele belbalk en zwevende WhatsApp-knop ---------- */
.belbalk{display:none}
.wa-zweef{position:fixed;right:18px;bottom:18px;z-index:21;width:56px;height:56px;border-radius:50%;background:#1fa855;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none;transition:transform .2s ease}
.wa-zweef::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;opacity:0;pointer-events:none}
.wa-zweef:hover{background:#178a45;color:#fff;transform:scale(1.06)}.wa-zweef:focus-visible{outline:3px solid #ffb020;outline-offset:3px}
/* ---------- responsief ---------- */
@media (max-width:1060px){.hero-raster{grid-template-columns:1fr;gap:44px}.podium{max-width:620px}}
@media (max-width:980px){
 .feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tijdlijn{grid-template-columns:1fr;gap:30px}.tijdlijn::before{top:10px;bottom:10px;left:33px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--geel),var(--blauw))}
 .tijdlijn li{padding-left:94px;min-height:68px}.t-knoop{position:absolute;left:0;top:0;margin:0}
 .rekenblok{grid-template-columns:1fr;padding:28px 24px}.voorwie{grid-template-columns:1fr}.illustratie{max-width:240px}
 .faqlijst{grid-template-columns:1fr}
}
@media (max-width:860px){
 .belbalk{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(10,20,38,.95);border-top:1px solid rgba(255,255,255,.1);padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
 .belknop{display:block;text-align:center;background:var(--accent);color:var(--ink);font-weight:800;padding:11px;border-radius:12px;text-decoration:none}
 .belknop:hover{color:var(--ink);filter:brightness(1.05)}
 body{padding-bottom:64px}
 .wa-zweef{right:14px;bottom:calc(74px + env(safe-area-inset-bottom));width:52px;height:52px}
 .voet{padding-bottom:84px}
}
@media (max-width:760px){
 .raster.prijzen{grid-template-columns:1fr}
 .podium{height:auto;display:flex;flex-direction:column;gap:14px;padding-bottom:0}
 .p-blad,.p-tel,.p-concept,.podium figcaption{position:relative;inset:auto;width:auto}
 .p-tel{order:1;border-radius:24px;padding:8px;width:100%}.p-tel::before{display:none}.p-tel-scherm{min-height:0;border-radius:18px}
 .p-blad{order:2}.p-concept{order:3}.podium figcaption{order:4}
 .p-stroom{display:none}
 .podium table{font-size:12.5px}.podium th,.podium td{padding:7px 7px}
}
@media (max-width:600px){
 body{font-size:16.5px}.wrap{padding:0 20px}
 .hero{padding:44px 0 104px;clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),0 100%)}.hero h1{font-size:40px;letter-spacing:-1.2px}.lead{font-size:18px}
 .knoppen .knop{width:100%;justify-content:center}
 .feitenband{margin-top:-64px}.feiten{gap:12px}.feiten li{padding:16px 16px 14px}.getal{font-size:30px}.feiten span{font-size:14px}
 .sectie{padding:64px 0}.donker{padding:110px 0;margin:-36px 0;clip-path:polygon(0 36px,100% 0,100% calc(100% - 36px),0 100%)}.donker + .sectie{padding-top:96px}
 .paginakop{padding:46px 0 84px;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),0 100%)}
 .paneel{padding:28px 22px 20px}.cta{padding:36px 24px;border-radius:24px}.cta-knoppen .knop{width:100%;justify-content:center}
 .stappen::before{left:21px}.stappen>li{margin-left:56px;padding:16px 16px 14px}.stappen>li::before{left:-56px;width:44px;height:44px;font-size:17px}
 th{width:40%}.gegevens dl{grid-template-columns:1fr}.gegevens dt{margin-top:6px}.contactblok{padding:22px}
}
/* ---------- beweging (alleen als de bezoeker dat niet heeft uitgezet) ---------- */
@media (prefers-reduced-motion:no-preference){
 .gloed::after{animation:veeg 1.1s .5s cubic-bezier(.2,.7,.2,1) both}
 .p-gloed{animation:adem 7s ease-in-out infinite alternate}
 .p-notif{animation:a-notif 12s infinite}
 .p-bel{animation:a-bel 12s infinite}
 .p-stroom1{animation:a-stroom1 12s infinite}
 .rij-nieuw td{animation:a-rij 12s infinite}
 .mist{animation:a-mist 12s infinite}
 .p-stroom2{animation:a-stroom2 12s infinite}
 .p-concept{animation:a-concept 12s infinite}
 .t-knoop::after{animation:ring 3s ease-out infinite}
 .tijdlijn li:nth-child(2) .t-knoop::after{animation-delay:1s;border-color:rgba(143,188,255,.5)}.tijdlijn li:nth-child(3) .t-knoop::after{animation-delay:2s;border-color:rgba(74,222,128,.5)}
 .wa-zweef::after{animation:ring 2.8s 2s ease-out 3}
 @supports (animation-timeline:view()){
  main .sectie .kaart,main .faq-item,main .paneel,main .tijdlijn li,main .stappen>li,main .rekenblok,main .sectie h2,main .sectie .bovenkop,main .contactblok,main .gegevens{animation:opkomen linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  .balk-staaf{animation:groei linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
 }
}
@keyframes veeg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes adem{from{opacity:.75;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@keyframes opkomen{from{translate:0 36px;scale:.97}to{translate:0 0;scale:1}}
@keyframes groei{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes a-notif{0%{opacity:0;transform:translateY(-14px)}5%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes a-bel{0%,5%{opacity:0;transform:translateY(14px) scale(.96)}11%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes a-stroom1{0%,14%{opacity:0;transform:translate(0,0)}16%{opacity:1}27%{opacity:1;transform:translate(120px,-210px) scale(.8)}29%,100%{opacity:0;transform:translate(120px,-210px)}}
@keyframes a-rij{0%,27%{opacity:0;transform:translateX(-16px);background-color:#fde68a}33%{opacity:1;transform:none;background-color:#fde68a}48%,90%{opacity:1;transform:none;background-color:#fffbea}97%,100%{opacity:0;transform:none}}
@keyframes a-mist{0%,36%{transform:none}40%{transform:scale(1.15)}44%,100%{transform:none}}
@keyframes a-stroom2{0%,44%{opacity:0;transform:translate(0,0)}46%{opacity:1}57%{opacity:1;transform:translate(10px,190px) scale(.8)}59%,100%{opacity:0;transform:translate(10px,190px)}}
@keyframes a-concept{0%,56%{opacity:0;transform:translateY(22px) scale(.95)}63%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@media print{.kop,.voet,.menuknop,.belbalk,.wa-zweef,.p-stroom{display:none}.hero,.paginakop,.donker,.cta{background:#fff;color:#000;clip-path:none}}
/* verfijning na eerste screenshots */
.sectie.grijs{background-color:var(--bg);background-image:radial-gradient(rgba(20,33,58,.07) 1px,transparent 1.2px);background-size:22px 22px}
.cta{flex-direction:column;text-align:center;justify-content:center}
.cta-tekst{max-width:720px;margin:0 auto}.cta-knoppen{justify-content:center}
.cta::before{content:"";position:absolute;left:-100px;bottom:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,130,246,.35),transparent);pointer-events:none}
.voet p{margin:0}.voet .wrap{gap:14px}.voet .merk{margin-bottom:4px}
.paginakop .wrap{position:relative}.kop-deco{position:absolute;right:24px;top:50%;width:190px;height:190px;margin-top:-95px;opacity:.95;filter:drop-shadow(0 0 28px rgba(255,170,30,.35))}
@media (prefers-reduced-motion:no-preference){.kop-deco circle:last-of-type{animation:kd-draai 30s linear infinite;transform-origin:100px 100px}}
@keyframes kd-draai{to{transform:rotate(360deg)}}
@media (max-width:860px){.kop-deco{display:none}}
.raster.prijzen{align-items:stretch}
@media (max-width:860px){.hero-link{padding-right:72px}}
.voet a[href^="tel:"]{white-space:nowrap}/* tel */
.formcheck{padding-top:56px;padding-bottom:24px}
.formcheck .cta p.bovenkop{font-size:13px;color:var(--geel);margin:0 0 12px}
.formcheck .cta h2{margin-bottom:14px}
.formcheck-stappen{margin:18px 0 0;padding-left:22px;color:var(--licht);font-size:17px;line-height:1.6;text-align:left;display:inline-block}
.formcheck-stappen li{margin:4px 0}

/* ---------- gratis websitecheck ---------- */
.wc{padding-top:56px}
.wc-kaart{background:#fff;border:1px solid var(--lijn);border-radius:24px;box-shadow:var(--schaduw-hover);padding:32px;max-width:920px;margin:0 auto}
.wc-form label{display:block;font-family:var(--kop);font-weight:700;font-size:19px;color:var(--ink);margin-bottom:10px}
.wc-rij{display:flex;flex-wrap:wrap;gap:12px}
.wc-rij input{flex:1 1 260px;min-width:0;font:inherit;font-size:17px;padding:13px 16px;border:2px solid var(--ink3);border-radius:12px;color:var(--tekst);background:#fff}
.wc-rij input:focus{outline:3px solid var(--geel);outline-offset:2px;border-color:var(--ink)}
.wc-rij .knop{cursor:pointer;font:inherit;font-weight:700}
.wc-form .klein{margin:12px 0 0}
.wc-uitslag{margin-top:30px;border-top:1px solid var(--lijn);padding-top:26px}
.wc-uitslag h2{font-size:clamp(24px,2.6vw,32px);margin:0 0 8px;overflow-wrap:anywhere}
.wc-tellers{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px;padding:0;list-style:none}
.wc-tellers li{border-radius:999px;padding:6px 14px;font-weight:700;font-size:15px}
.wc-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wc-item{border:1px solid var(--lijn);border-left:5px solid var(--grijs);border-radius:14px;padding:14px 16px;background:#fff;min-width:0}
.wc-item p{margin:4px 0}
.wc-item code{display:block;margin-top:8px;background:var(--bg);border-radius:8px;padding:8px 10px;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;color:var(--ink3)}
.wc-pagina{font-size:14px;color:var(--grijs);overflow-wrap:anywhere}
.wc-badge{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;padding:2px 8px;margin-right:8px;vertical-align:1px}
.wc-fout{border-left-color:var(--rood)}.wc-fout .wc-badge,.wc-tellers .wc-t-fout{background:#fde8e8;color:var(--rood)}
.wc-let{border-left-color:var(--oranje)}.wc-let .wc-badge,.wc-tellers .wc-t-let{background:#fff3d6;color:var(--oranje-d)}
.wc-ok{border-left-color:var(--groen)}.wc-ok .wc-badge,.wc-tellers .wc-t-ok{background:#e3f5e9;color:var(--groen)}
.wc-melding{background:#fff8e6;border-left:4px solid var(--oranje);padding:16px 20px;border-radius:12px;margin:26px 0 0}
.wc-melding.wc-fout{background:#fde8e8;border-left-color:var(--rood)}
.formcheck-zelf{margin:18px 0 0;font-size:16px}.formcheck-zelf a{color:var(--geel-l)}.formcheck-zelf a:hover{color:#fff}
@media (max-width:600px){.wc-kaart{padding:22px 16px;border-radius:18px}.wc-rij .knop{width:100%;justify-content:center}}