/* bitzsearch.com: de verkoopsite. Negen hoofdstukken, elk op een eigen vlak over de volle breedte (wit, licht, donker voor de
   wow-momenten, één oranje band voor de oproep). Vastgeprikte toestellen waarvan het scherm wisselt terwijl de stappen voorbijscrollen.
   Alleen dagmodus. Het accent is het oranje van de app: het logo-oranje alleen in het logo en op grote vlakken, voor knoppen en tekst
   het donkere oranje (contrast minstens 4,5:1). Onderaan dit bestand staan de goedgekeurde stukken van de uitlegpagina
   (bron/zo-werkt-bitzsearch.html), met dezelfde variabelen. Bij "minder beweging" staat alles meteen in zijn eindstand. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --bg:#ffffff; --vlak:#ffffff; --inkt:#141412; --inkt-2:#3b3b3f; --zacht:#64646a; --lijn:#e4e4e7; --lijn-sterk:#c9c9ce;
  --merk:#e8500a;               /* het logo-oranje: alleen het logo en grote vlakken */
  --accent:#b8400a;             /* tekst en randen in oranje (--orange-text in de app): 5,6:1 op wit */
  --knop:#c84207;               /* de knop (--orange-deep in de app): 4,9:1 met witte tekst */
  --knop-donker:#a93705;
  --accent-zacht:#fff1ea; --accent-rand:#fdd3bd; --op-accent:#ffffff;
  --kans:#141412; --kans-zacht:#ececee;
  --band:#141412; --band-inkt:#f4f4f5; --band-zacht:#b6b6bb; --band-lijn:#333336; --band-accent:#ff8452; --band-accent-2:#ffb28f; --band-vlak:#222224;
  --schaduw:0 1px 0 rgba(20,20,18,.04),0 28px 56px -36px rgba(20,20,18,.28);
  --tekst:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --kolom:1160px; --schil:64px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--inkt);font-family:var(--tekst);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;color:var(--inkt);font-weight:800}
h2{font-size:clamp(30px,4.4vw,56px);line-height:1.02;letter-spacing:-.035em}
h3{font-size:21px;line-height:1.25;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}
.accent{color:var(--accent)}
.kopje{display:grid;gap:14px;max-width:960px}
.kopje p:not(.label){color:var(--inkt-2);font-size:17px}
.kopje p.lead{font-size:clamp(17px,1.7vw,21px);max-width:36em}
.kopje.midden{justify-items:center;text-align:center;margin-inline:auto}
.kopje.midden h2{max-width:16ch}
.symbolen{position:absolute;width:0;height:0;overflow:hidden}
.ic{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--zacht)}
.hint svg{width:15px;height:15px}
@keyframes op{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes groei{from{width:0}}
@keyframes hoog{from{height:0}}
@keyframes vul{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes draai{to{transform:rotate(360deg)}}
@keyframes teken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* De kolom en de vlakken */
.kolom{width:min(var(--kolom),100% - 32px);margin-inline:auto}
.vlak{padding-block:clamp(72px,9vw,128px)}
.vlak > .kolom{display:grid;gap:clamp(36px,5vw,64px)}
.vlak.licht{background:#f4f4f5}
.vlak.wit{background:#fff}
.vlak.donker{background:var(--band);color:var(--band-inkt);
  --bg:#1c1c1e; --vlak:#222224; --inkt:#f4f4f5; --inkt-2:#d2d2d6; --zacht:#9a9aa0; --lijn:#3a3a3e; --lijn-sterk:#55555a;
  --accent:#ff8452; --knop:#ff8452; --knop-donker:#ffa07a; --accent-zacht:rgba(255,132,82,.14); --accent-rand:rgba(255,132,82,.45); --op-accent:#141412;
  --kans:#ffffff; --kans-zacht:rgba(255,255,255,.12); --schaduw:0 30px 60px -40px rgba(0,0,0,.8)}
.vlak.donker h2,.vlak.donker h3{color:#fff}
.vlak.donker .knop{color:#141412}
.vlak.oranje{background:var(--merk);color:#fff;
  --inkt:#ffffff; --inkt-2:#ffe6d9; --zacht:#ffd2bd; --lijn:rgba(255,255,255,.3); --accent:#ffffff; --knop:#141412; --knop-donker:#2a2a2d; --vlak:rgba(255,255,255,.1)}
.vlak.oranje h2,.vlak.oranje h3{color:#fff}
.vlak.oranje .knop{color:#fff}
.vlak.oranje a{color:#fff}
.vlak.oranje .veld-rij{background:#fff;border-color:transparent}
.vlak.oranje .veld-rij input{color:#141412}
.vlak.oranje .veld .klein{color:#fff}
.vlak.oranje .veld .klein svg{stroke:#fff}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border-radius:999px;border:0;background:var(--knop);color:#fff;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;transition:background .2s ease,transform .2s ease;white-space:nowrap}
.knop:hover{background:var(--knop-donker)}
.knop:active{transform:scale(.98)}
.knop.licht{background:var(--vlak);color:var(--inkt);border:1px solid var(--lijn)}
.knop.licht:hover{border-color:var(--inkt);background:var(--vlak)}
.knop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* De schil: een smalle balk die meescrolt, licht glas */
.schil{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);background:rgba(255,255,255,.72);border-bottom:1px solid rgba(20,20,18,.06)}
.schil .kolom{display:flex;align-items:center;gap:18px;min-height:var(--schil)}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{height:26px;width:auto}
.schil nav{display:none;gap:4px;margin-left:8px}
.schil nav a{color:var(--inkt-2);text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center}
.schil nav a:hover{background:rgba(20,20,18,.06);color:var(--inkt)}
@media (min-width:900px){.schil nav{display:flex}}
.schil .rechts{margin-left:auto;display:flex;align-items:center;gap:8px}
.schil .inloggen{color:var(--inkt-2);text-decoration:none;font-weight:700;font-size:14.5px;padding:8px 12px;min-height:40px;display:inline-flex;align-items:center;border-radius:999px}
.schil .inloggen:hover{background:rgba(20,20,18,.06);color:var(--inkt)}
.schil .knop{min-height:40px;padding:6px 16px;font-size:14.5px}
@media (max-width:480px){.schil .inloggen{display:none}}

/* De balk "Gratis voorvertoning": verschijnt na de belofte, verdwijnt bij het slot */
.balk-oproep{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px max(16px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));background:rgba(20,20,18,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;transform:translateY(110%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;justify-content:center}
.balk-oproep.aan{transform:none}
.balk-oproep .in{width:min(var(--kolom),100%);display:flex;align-items:center;justify-content:space-between;gap:14px}
.balk-oproep b{font-size:15px;font-weight:800}
.balk-oproep span{display:block;font-size:13px;color:var(--band-zacht);font-weight:600}
.balk-oproep .knop{min-height:42px;padding:6px 18px;font-size:15px;background:var(--knop)}
.balk-oproep .knop:hover{background:var(--merk)}
@media (max-width:560px){.balk-oproep span{display:none}.balk-oproep b{font-size:14px}}

/* 1. De belofte: kop, veld én toestellen samen op het eerste scherm */
.belofte{padding-block:clamp(28px,4vw,56px) clamp(40px,6vw,80px);overflow:hidden}
.belofte > .kolom{display:grid;gap:28px;grid-template-columns:1fr;align-items:center}
@media (min-width:960px){.belofte > .kolom{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px}}
.belofte-tekst{display:grid;gap:20px;max-width:620px}
.belofte h1{font-size:clamp(36px,5.2vw,70px);line-height:.98;letter-spacing:-.04em;max-width:12ch}
.belofte h1 .accent{color:var(--accent)}
.belofte .lead{font-size:clamp(16px,1.5vw,20px);color:var(--inkt-2);max-width:32em}
.veld{display:grid;gap:10px;max-width:600px}
.veld label{font-weight:800;font-size:16px}
.veld-rij{display:flex;gap:6px;background:#fff;border:1.5px solid var(--lijn-sterk);border-radius:999px;padding:5px 5px 5px 18px;box-shadow:var(--schaduw);transition:border-color .2s ease}
.veld-rij:focus-within{border-color:var(--inkt)}
.veld-rij input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:17px;font-weight:600;color:var(--inkt);outline:none;min-height:44px}
.veld-rij input::placeholder{color:var(--zacht);font-weight:500}
.veld-rij .knop{flex:none}
.veld .klein{font-size:13.5px;color:var(--zacht);font-weight:700;display:flex;flex-wrap:wrap;gap:4px 16px}
.veld .klein span{display:inline-flex;align-items:center;gap:6px}
.veld .klein svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.veld-rij{flex-direction:column;border-radius:22px;padding:6px}.veld-rij input{padding-inline:12px;min-height:40px}.veld-rij .knop{width:100%;min-height:44px}}
.belofte-toestellen{position:relative;display:grid;justify-items:end;padding:8px 0 0}
.belofte-toestellen .macbook{width:100%}
.belofte-toestellen .iphone{position:absolute;right:-2%;bottom:-6%;width:28%;min-width:120px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1.5px #3a3a3e}
@media (max-width:959px){.belofte-toestellen{padding-right:6%}.belofte-toestellen .iphone{right:-4%;width:30%;bottom:-12%}}
.belofte-noot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:13.5px;color:var(--zacht);font-weight:600}
.belofte-noot a{font-weight:800}
.beweeg .intro > *{animation:intro .9s cubic-bezier(.2,.8,.2,1) both}
.beweeg .intro > :nth-child(2){animation-delay:.1s}
.beweeg .intro > :nth-child(3){animation-delay:.2s}
.beweeg .intro > :nth-child(4){animation-delay:.3s}
.beweeg .belofte-toestellen .macbook{animation:intro 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
.beweeg .belofte-toestellen .iphone{animation:intro 1.1s cubic-bezier(.2,.8,.2,1) .5s both}
@keyframes intro{from{opacity:0;transform:translateY(28px)}}

/* De toestellen: echte, volledige schermen (statusbalk en thuisbalk van iOS, menubalk en Safari van macOS zitten in het beeld) in
   CSS getekende behuizingen. Het scherm heeft exact de verhouding van het beeld, dus niets wordt afgesneden of uitgerekt. */
.toestel{position:relative;--p:0}
.toestel .scherm{position:relative;overflow:hidden;background:#fff}
.toestel .scherm img{width:100%;height:auto;display:block;object-fit:cover;object-position:top;will-change:transform}
.toestel .scherm img.scrol{transform:translateY(calc(var(--p) * var(--rest,0px) * -1))}
.toestel .scherm img.statusbalk{position:absolute;left:0;top:0;z-index:2;transform:none}
/* iPhone: 393×852, rand 10 px rondom (2.55% van de breedte, overal even dik), scherm afgerond zo'n 47 px bij 393 breed. */
.iphone{width:min(300px,80vw);aspect-ratio:413/872;padding:2.42%;border-radius:14.3%/6.8%;background:#0e0e10;box-shadow:inset 0 0 0 1.5px #3a3a3e,0 40px 70px -40px rgba(20,20,18,.55)}
.iphone .scherm{aspect-ratio:393/852;border-radius:12%/5.5%}
.iphone::before{content:"";position:absolute;left:50%;top:2.4%;width:30.3%;height:4.25%;transform:translateX(-50%);background:#0b0b0c;border-radius:999px;z-index:3}
/* MacBook Pro 14": scherm 1512×982, de notch valt over de menubalk van macOS in het beeld. */
.macbook{width:100%;display:grid;gap:0}
.macbook .deksel{padding:1.6% 1.6% 2.2%;background:linear-gradient(180deg,#2a2a2d,#141416);border-radius:min(2.2vw,24px) min(2.2vw,24px) 0 0;box-shadow:inset 0 0 0 1.5px #4b4b4f;position:relative}
.macbook .deksel::before{content:"";position:absolute;left:50%;top:1.6%;width:10.4%;height:2.4%;transform:translateX(-50%);background:#0e0e0f;border-radius:0 0 8px 8px;z-index:2}
.macbook .scherm{aspect-ratio:1512/982;border-radius:min(.9vw,10px)}
.macbook .basis{height:clamp(10px,1.3vw,16px);background:linear-gradient(180deg,#e6e6e9,#c7c7cc 55%,#a9a9af);border-radius:0 0 min(1.2vw,14px) min(1.2vw,14px);position:relative;box-shadow:0 30px 60px -40px rgba(20,20,18,.6)}
.macbook .basis::before{content:"";position:absolute;left:50%;top:0;width:14%;height:38%;transform:translateX(-50%);background:#b4b4ba;border-radius:0 0 8px 8px}
/* Gestapelde schermen in één toestel: het actieve scherm staat bovenaan */
.scherm.stapel img:not(.statusbalk){position:absolute;inset:0;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.scherm.stapel img:first-child{position:relative}
.scherm.stapel img.aan{opacity:1;transform:none}

/* Vastgeprikt toestel, stappen ernaast (het scrolverhaal) */
.scrolly{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
.scrolly-vast{position:sticky;top:calc(var(--schil) + 12px);z-index:1;display:grid;justify-items:center}
.scrolly-stappen{list-style:none;margin:0;padding:0;display:grid}
.scrolly-stappen .stap{min-height:62vh;display:grid;align-content:center;gap:12px;padding-block:8vh;opacity:.35;transition:opacity .4s ease}
.scrolly-stappen .stap.aan{opacity:1}
.scrolly-stappen .stap:last-child{min-height:50vh}
.stap h3{font-size:clamp(26px,3vw,40px);line-height:1.05;letter-spacing:-.03em}
.stap p{font-size:clamp(16px,1.4vw,19px);color:var(--inkt-2);max-width:30em}
.stap .nr{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--accent)}
.stap ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.stap li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;font-size:15.5px;color:var(--inkt-2)}
.stap li svg{width:18px;height:18px;margin-top:3px}
@media (min-width:900px){
  .scrolly{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:48px}
  .scrolly.om{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .scrolly.om .scrolly-vast{order:2}
  .scrolly-vast{top:max(84px,calc(50vh - var(--hoog,520px) / 2))}
  .scrolly .macbook{width:100%}
  .scrolly.om .scrolly-vast{--hoog:800px}
  .scrolly .iphone{width:min(360px,100%)}
  .scrolly-stappen .stap{min-height:80vh}
}
@media (max-width:899px){
  .scrolly-vast{background:#fff;padding-bottom:14px;top:var(--schil)}
  .scrolly .macbook{width:min(100%,560px)}
  .scrolly .iphone{width:min(200px,46vw)}
  .scrolly-stappen .stap{min-height:48vh;padding-block:6vh}
}

/* 2. Google én AI: het statement in het midden, het blok groot */
.zoek-groot{display:grid;justify-items:center}
.zoek-groot .zoek{width:min(100%,720px);background:#fff;color:#141412;--vlak:#ffffff;--bg:#f4f4f5;--inkt:#141412;--inkt-2:#3b3b3f;--zacht:#64646a;--lijn:#e4e4e7;--accent:#b8400a;--accent-zacht:#fff1ea;--op-accent:#ffffff}
.drie-feiten{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));max-width:960px;margin-inline:auto;width:100%}
.drie-feiten div{display:grid;gap:4px;border-top:1px solid var(--lijn);padding-top:14px}
.drie-feiten b{font-size:18px;color:var(--inkt)}
.drie-feiten span{color:var(--inkt-2);font-size:15px}

/* De oproep tussen de hoofdstukken */
.oproep{display:grid;gap:18px;grid-template-columns:1fr;align-items:center;background:var(--vlak);border:1px solid var(--lijn);border-radius:24px;padding:clamp(22px,3.5vw,36px);box-shadow:var(--schaduw)}
@media (min-width:860px){.oproep{grid-template-columns:minmax(0,1fr) auto}}
.oproep h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.1}
.oproep p{color:var(--inkt-2);margin-top:6px;font-size:16px}
.oproep .bezwaren{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:700;color:var(--zacht)}
.oproep .bezwaren li{display:inline-flex;align-items:center;gap:6px}
.oproep .bezwaren svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.oproep .knop{justify-self:start;min-height:52px;padding-inline:26px;font-size:17px}
.vlak.donker .oproep{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* 4. Het plan: de kaart in de donkere band */
.plan-afwegen{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.plan-afwegen div{display:grid;gap:6px;border-top:1px solid var(--lijn);padding-top:14px}
.plan-afwegen svg{width:24px;height:24px}
.plan-afwegen b{font-size:17px}
.plan-afwegen span{font-size:15px;color:var(--inkt-2)}
.vlak.donker .kaart{box-shadow:var(--schaduw)}
.vlak.donker .k-doel{fill:#fff}
.vlak.donker .k-doel-klein,.vlak.donker .k-doel-t{fill:#141412}
.vlak.donker .k-doel-ring{stroke:#141412}
.vlak.donker .k-doel-hart{fill:var(--merk)}
.vlak.donker .k-stip.kans{fill:#fff;stroke:#fff}
.vlak.donker .tag.kans{background:#fff;color:#141412;border-color:#fff}
.vlak.donker .kaart-veld{background:#171718}
.vlak.donker .seg{background:#2a2a2d}
.vlak.donker .seg button{color:#d2d2d6}
.vlak.donker .seg button[aria-pressed="true"]{background:#fff;color:#141412}

/* Inklapbare stukken */
.klap{border:1px solid var(--lijn);border-radius:18px;background:var(--vlak)}
.klap summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:800;font-size:17px;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;min-height:56px}
.klap summary::-webkit-details-marker{display:none}
.klap summary svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;transition:transform .25s ease}
.klap[open] summary svg{transform:rotate(45deg)}
.klap .klap-in{padding:0 22px 24px;display:grid;gap:20px}
.klap .klap-in > p{color:var(--inkt-2)}
@media (max-width:560px){.klap summary,.klap .klap-in{padding-inline:16px}}

/* 5. In jouw stem, en eerlijk over AI */
.stem-raster{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media (min-width:960px){.stem-raster{grid-template-columns:minmax(0,.9fr) auto minmax(0,1.1fr);gap:40px;align-items:center}}
.stem-raster .iphone{width:min(300px,80vw);justify-self:center}
.eerlijk{display:grid;gap:18px}
.eerlijk h3{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.08}
.letterlijk{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.letterlijk li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:16px;color:var(--inkt-2)}
.letterlijk li b{color:var(--inkt)}
.letterlijk svg{width:22px;height:22px;margin-top:2px}

/* 6. Je ziet wat het oplevert */
.ai-drie{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.ai-drie div{background:var(--vlak);border:1px solid var(--lijn);border-radius:18px;padding:20px;display:grid;gap:6px;align-content:start}
.ai-drie svg{width:24px;height:24px;margin-bottom:4px}
.ai-drie b{font-size:16.5px}
.ai-drie span{color:var(--inkt-2);font-size:15px}
.assistenten .chip{animation:none}

/* 8. Pakketten en wat je mag verwachten */
.verwacht{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.verwacht li{display:grid;gap:4px;border-top:2px solid var(--accent);padding-top:14px}
.verwacht b{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.verwacht strong{font-weight:800;line-height:1.3;font-size:17px}
.verwacht span{color:var(--zacht);font-size:14.5px}
.pakket-regels{display:grid;gap:8px;color:var(--inkt-2);font-size:15px;max-width:80ch}
.pakket-regels b{color:var(--inkt)}

/* 9. Bewijs, vragen */
.bewijs-lijst{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.bewijs-lijst a{display:grid;gap:8px;background:var(--vlak);border:1px solid var(--lijn);border-radius:18px;padding:20px;color:var(--inkt);text-decoration:none;min-height:120px;align-content:start;transition:border-color .2s ease}
.bewijs-lijst a:hover{border-color:var(--inkt)}
.bewijs-lijst .url{font-family:var(--mono);font-size:11.5px;color:var(--zacht)}
.bewijs-lijst b{font-size:16.5px;line-height:1.3}
.bewijs-lijst .meer{justify-self:start}
.vragen-lijst{display:grid;gap:8px;max-width:860px}
.vraag{background:var(--vlak);border:1px solid var(--lijn);border-radius:16px}
.vraag summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:800;font-size:17px;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;min-height:56px}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;transition:transform .25s ease}
.vraag[open] summary svg{transform:rotate(45deg)}
.vraag .antw{padding:0 22px 22px;color:var(--inkt-2);display:grid;gap:10px;font-size:16px}
.vraag .antw b{color:var(--inkt)}
.vraag .antw ul{margin:0;padding-left:20px;display:grid;gap:6px}
.vraag .bron-noot{font-size:13.5px;color:var(--zacht);font-weight:600}
.vraag .bron-noot a{color:var(--accent)}

/* Het slot: de oranje band */
.slot > .kolom{grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.slot > .kolom{grid-template-columns:minmax(0,1.1fr) auto;gap:48px}}
.slot h2{font-size:clamp(32px,4.4vw,58px);max-width:14ch}
.slot .lead{color:#ffe6d9;font-size:18px;max-width:34em}
.slot .veld label{color:#fff}
.slot .iphone{width:min(260px,70vw);justify-self:center}
@media (min-width:860px){.slot .iphone{margin-bottom:calc(-1 * clamp(72px,9vw,128px) - 60px)}.voet-site{padding-top:72px}}
.slot-tekst{display:grid;gap:22px}

/* De voet: een donker vlak in de stijl van spacebitz.com. Papier #faf7f1; gedempt 62%, kolomkoppen 50%, lijnen 14%; hover in het merkoranje. */
.voet{background:#141412;color:#faf7f1;--papier:#faf7f1;--gedempt:rgba(250,247,241,.62);--kop:rgba(250,247,241,.5);--haar:rgba(250,247,241,.14);padding:clamp(56px,7vw,88px) 0 0;position:relative;overflow:hidden}
.voet .kolom{display:grid;gap:40px}
.voet a{color:var(--papier);text-decoration:none;transition:color .2s ease}
.voet a:hover{color:var(--merk)}
.voet-raster{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.voet-merk{display:grid;gap:14px;justify-items:start}
.voet-merk .logo img{height:28px;width:auto}
.voet-zin{color:var(--gedempt);font-size:15.5px;max-width:30em}
.voet-firma{display:grid;gap:4px;margin-top:6px}
.voet-firma b,.voet-insta b{color:var(--papier)}
.voet-firma b{font-size:15px}
.voet .mono{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gedempt);margin-top:3px}
.voet-kop{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kop);margin-bottom:16px}
.voet-kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.voet-kolom li a{font-weight:600;font-size:15px;min-height:28px;display:inline-flex;align-items:center}
.voet-volg{display:grid;gap:22px;justify-items:start}
.voet-insta{display:inline-flex;align-items:center;gap:14px}
.voet-insta b{display:block;font-weight:700;font-size:15px}
.voet-rond{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--haar);display:grid;place-items:center;flex:none;transition:border-color .2s ease}
.voet-insta:hover .voet-rond{border-color:var(--merk)}
.voet-rond svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.voet .knop{background:var(--knop);color:#fff}
.voet .knop:hover{background:var(--merk);color:#fff}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;border-top:1px solid var(--haar);padding-top:22px;color:var(--gedempt);font-size:13.5px}
.voet-onder ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.voet-onder a{color:var(--gedempt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:28px;display:inline-flex;align-items:center}
.voet-noot{color:var(--gedempt);font-size:12.5px;margin-top:-26px}
.voet-merkwoord{display:block;width:100%;height:auto;margin-top:8px;pointer-events:none;user-select:none}
.voet-merkwoord text{font-family:var(--tekst);font-weight:800;font-size:190px;letter-spacing:-.04em}
@media (max-width:1023px){.voet-raster{grid-template-columns:1fr 1fr}.voet-merk{grid-column:1/-1}}
@media (max-width:599px){.voet-raster{grid-template-columns:1fr}}
/* Juridische pagina's */
.pagina{max-width:760px;margin:0 auto;padding:48px 0 96px;display:grid;gap:20px}
.pagina h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em}
.pagina p,.pagina li{color:var(--inkt-2);font-size:16.5px}
.pagina h2{font-size:22px;margin-top:16px;letter-spacing:-.01em;line-height:1.2}

/* Secties komen rustig in beeld; met minder beweging staat alles meteen in zijn eindstand */
.beweeg .onthul{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.beweeg .onthul.zicht{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.scrolly-stappen .stap{opacity:1}.scherm.stapel img{opacity:1;transform:none}.scherm.stapel img:not(.aan){display:none}.scherm.stapel img:first-child{display:block}}

/* ---- De goedgekeurde stukken van de uitlegpagina ---- */
/* De goedgekeurde stukken van de uitlegpagina (bitzseo/verkoopsite/bron/zo-werkt-bitzsearch.html), met de kleuren van de site:
   het accent is hier het donkere oranje uit de app, "kans" is de inkt. De variabelen staan in site.css. Niet met de hand herschikken:
   wat hier staat, is de inhoud die Jurgen goedkeurde. */


/* Het Google-en-AI-blok */
.zoek{margin:0;background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;padding:20px;display:grid;gap:6px;min-width:0;box-shadow:var(--schaduw)}
.zoekbalk{display:flex;align-items:center;gap:10px;border:1px solid var(--lijn);border-radius:999px;padding:11px 18px;font-weight:700;margin-bottom:8px;min-height:47px}
.zoekbalk svg{width:18px;height:18px;flex:none}
.caret{width:2px;height:18px;background:var(--accent);margin-left:-8px;opacity:0}
.zoek.typt .caret{opacity:1;animation:knipper 1s steps(1) infinite}
@keyframes knipper{50%{opacity:0}}
.uitslag{display:grid;gap:2px;padding:12px 14px;border-radius:12px}
.uitslag .url{font-family:var(--mono);font-size:12px;color:var(--zacht)}
.uitslag b{font-size:16px;font-weight:700;color:var(--inkt-2)}
.uitslag span{font-size:14px;color:var(--zacht)}
.uitslag.jij{background:var(--accent-zacht);outline:1.5px solid var(--accent);outline-offset:-1.5px}
.uitslag.jij b{color:var(--accent)}
.uitslag.jij span{color:var(--inkt-2)}
.uitslag .kop{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.uitslag .jij-tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.vb-sector{font-size:13px;font-weight:600;color:var(--zacht);padding:0 4px 6px;border-bottom:1px solid var(--lijn);margin-bottom:6px}
.vb-sector b{color:var(--inkt);font-weight:800}
.zoek figcaption{font-size:14px;color:var(--zacht);padding:12px 4px 0;border-top:1px solid var(--lijn);margin-top:6px}
.vak{display:grid;gap:6px}
.vak + .vak{border-top:1px solid var(--lijn);padding-top:16px;margin-top:8px}
.vak-kop{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);padding:0 4px 4px}
.vraag-bel{justify-self:end;max-width:85%;background:var(--bg);border:1px solid var(--lijn);border-radius:16px 16px 4px 16px;padding:9px 14px;font-weight:600;font-size:14.5px}
.antwoord{display:grid;gap:10px;padding:6px 4px 0;font-size:14.5px;color:var(--inkt-2);min-height:112px;align-content:start}
.bron{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:var(--accent-zacht);color:var(--accent);border:1.5px solid var(--accent);border-radius:999px;padding:3px 12px 3px 10px;font-family:var(--mono);font-size:12px;font-weight:600}
.bron svg{width:14px;height:14px}
.beweeg .zoek [data-v]{opacity:.14;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.beweeg .zoek [data-v].zicht{opacity:1;transform:none}
.beweeg .zoek .bron[data-v]{transform:scale(.8)}
.beweeg .zoek .bron[data-v].zicht{transform:none}
.beweeg .woorden span{opacity:.14;transition:opacity .2s ease}
.beweeg .woorden span.zicht{opacity:1}
.beweeg .zoek.wis [data-v],.beweeg .zoek.wis .woorden span{opacity:.14;transition:opacity .4s ease}
.beweeg .zoek.wis .getypt{opacity:0;transition:opacity .4s ease}

/* Zelf doen met AI? Het onderzoek, de samenhang en het verschil */
.verschil{display:grid;gap:40px}
.verschil-raster{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.verschil-raster{grid-template-columns:1fr 1fr}}
.paneel{background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start;min-width:0}
.paneel-voet{color:var(--inkt-2);font-size:15.5px}
.trechter{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.trechter li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.trechter li::before{content:"";height:44px;width:var(--b);justify-self:center;background:var(--accent-zacht);border-radius:8px}
.trechter li.eind::before{background:var(--accent)}
.trechter li > span{display:block;min-width:0}
.trechter b{display:block;font-weight:800;font-size:15.5px;line-height:1.3}
.trechter li > span > span{display:block;color:var(--zacht);font-size:14px;line-height:1.35}
.trechter li.eind b{color:var(--accent)}
.beweeg .zicht .trechter li::before{animation:groei .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--k)*.18s)}
.beweeg .zicht .trechter li > span{animation:op .5s both;animation-delay:calc(.3s + var(--k)*.18s)}
.cluster{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c" ". h ." "d e f";gap:26px 12px;align-items:center;justify-items:center;padding:6px 0}
.cl-lijnen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cl-lijnen .naar-kern{fill:none;stroke:var(--accent);stroke-width:1.6;opacity:.55;transition:opacity .2s ease,stroke-width .2s ease}
.cl-lijnen .naar-kern.licht{opacity:1;stroke-width:2.4}
.cl-lijnen .onderling{fill:none;stroke:var(--zacht);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55}
.beweeg .zicht .cl-lijnen:not(.stil) .naar-kern{stroke-dasharray:1 1;animation:teken .8s both;animation-delay:calc(.35s + var(--k)*.12s)}
.beweeg .zicht .cl-lijnen:not(.stil) .onderling{animation:op .6s 1.3s both}
@keyframes teken{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.sat,.cl-kern{position:relative;z-index:1;text-align:center;border-radius:12px;line-height:1.3}
.sat{background:var(--vlak);border:1px solid var(--lijn);padding:8px 10px;font-size:13.5px;font-weight:700;color:var(--inkt-2);width:100%;transition:border-color .2s ease,color .2s ease}
.sat:hover{border-color:var(--accent);color:var(--accent)}
.cl-kern{grid-area:h;background:var(--accent);color:var(--op-accent);padding:12px 16px;display:grid;gap:1px;width:100%}
.cl-kern b{font-size:16px}
.cl-kern span{font-size:12px;font-weight:600;opacity:.9}
.sat:nth-of-type(1){grid-area:a}.sat:nth-of-type(2){grid-area:b}.sat:nth-of-type(3){grid-area:c}.sat:nth-of-type(4){grid-area:d}.sat:nth-of-type(5){grid-area:e}.sat:nth-of-type(6){grid-area:f}
.beweeg .zicht .cluster .sat{animation:pop .4s both;animation-delay:calc(.15s + var(--k)*.12s)}
@media (max-width:520px){
  .cluster{gap:22px 8px}
  .sat{font-size:12px;padding:7px 6px}
  .cl-kern{padding:10px 8px}
  .cl-kern b{font-size:14.5px}
  .cl-kern span{font-size:11px}
}
/* Het plan als kaart */
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:24px;padding:clamp(20px,3vw,36px);display:grid;gap:22px;min-width:0}
.kaart-kop{display:grid;gap:20px;grid-template-columns:1fr;align-items:end}
@media (min-width:900px){.kaart-kop{grid-template-columns:minmax(0,1fr) auto;gap:40px}}
.kaart-kop h3{font-size:clamp(24px,2.8vw,32px);margin-top:8px}
.kaart-kop .sub{color:var(--inkt-2);max-width:72ch;margin-top:8px;font-size:16.5px}
.tellers{display:flex;flex-wrap:wrap;gap:12px 32px}
.teller{display:grid;gap:2px}
.teller b{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.teller span{font-size:13.5px;color:var(--zacht);font-weight:600}
.kaart-themas{display:flex;flex-wrap:wrap;gap:8px}
.kaart-themas button{display:inline-flex;align-items:center;gap:8px;min-height:40px;border:1px solid var(--lijn);background:var(--bg);border-radius:999px;padding:5px 14px 5px 5px;font-weight:700;font-size:14px;cursor:pointer;color:var(--inkt-2);transition:background .2s ease,border-color .2s ease,color .2s ease}
.kaart-themas button:hover{border-color:var(--zacht)}
.kaart-themas button i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--vlak);border:1px solid var(--lijn);display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;font-weight:600}
.kaart-themas button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--op-accent)}
.kaart-themas button[aria-pressed="true"] i{background:var(--op-accent);color:var(--accent);border-color:transparent}
.kaart-raster{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
@media (min-width:1000px){.kaart-raster{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.kaart-links{display:grid;gap:12px;min-width:0}
.kaart-veld{background:var(--bg);border-radius:18px;min-width:0;overflow:hidden}
.kaart-veld svg{display:block;width:100%;height:auto;min-height:300px}
.legende-k{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--zacht);font-weight:600}
.legende-k span{display:inline-flex;align-items:center;gap:8px}
.legende-k svg{width:22px;height:12px;overflow:visible}
.k-lijn{fill:none;stroke:var(--accent);stroke-width:1.3;opacity:.45;transition:opacity .3s ease}
.k-lijn.dik{stroke-width:2.4;opacity:.7}
.k-kruis{fill:none;stroke:var(--zacht);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55;transition:opacity .3s ease}
.k-stip{fill:var(--vlak);stroke:var(--accent);stroke-width:1.8;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .2s ease,fill .2s ease}
.k-stip.kans{fill:var(--kans);stroke:var(--kans)}
.k-stip.licht{transform:scale(1.7);fill:var(--accent)}
.k-stip.kans.licht{fill:var(--kans)}
.k-thema{cursor:pointer;transform-box:fill-box;transform-origin:center}
.k-thema rect,.k-thema circle{fill:var(--vlak);stroke:var(--accent);stroke-width:2;transition:fill .3s ease}
.k-naam{fill:var(--inkt);font-family:var(--tekst);font-weight:800;font-size:14.5px;transition:fill .3s ease}
.k-nr{fill:var(--accent);font-family:var(--mono);font-weight:600;font-size:12px}
.k-groep{transition:opacity .35s ease}
.kaart-veld.focus .k-groep:not(.aan){opacity:.2}
.kaart-veld.focus .k-kruisen{opacity:.35}
.k-groep.aan .k-thema rect,.k-groep.aan .k-thema circle{fill:var(--accent)}
.k-groep.aan .k-naam{fill:var(--op-accent)}
.k-groep.aan .k-nr{fill:var(--op-accent)}
.k-groep.aan .k-lijn{opacity:.95}
.k-doel{fill:var(--inkt)}
.k-doel-ring{fill:none;stroke:var(--bg);stroke-width:2}
.k-doel-hart{fill:var(--kans)}
.k-doel-klein{fill:var(--bg);opacity:.65;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em}
.k-doel-t{fill:var(--bg);font-family:var(--tekst);font-weight:800;font-size:15px}
.k-doel-g{transform-box:fill-box;transform-origin:center}
.beweeg .zicht svg:not(.stil) .k-lijn{stroke-dasharray:1 1;animation:teken .7s both;animation-delay:var(--d)}
.beweeg .zicht svg:not(.stil) .k-stip,.beweeg .zicht svg:not(.stil) .k-thema,.beweeg .zicht svg:not(.stil) .k-doel-g{animation:pop .45s both;animation-delay:var(--d)}
.beweeg .zicht svg:not(.stil) .k-kruis{animation:op .6s both;animation-delay:var(--d)}
.kaart-lijst{display:grid;gap:8px;align-content:start;min-width:0}
.kl-kop{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--lijn)}
.kl-kop b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.kl-kop span{font-size:14px;color:var(--zacht);font-weight:600}
.kl-kolom{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);padding:2px 10px 0}
.kl-rijen{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.kl-rijen li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:9px 10px;border-radius:10px;transition:background .2s ease}
.beweeg .kl-rijen li{animation:op .35s both;animation-delay:calc(var(--k)*45ms)}
.kl-rijen li:hover{background:var(--bg)}
.kl-rijen li.pijler{background:var(--accent-zacht)}
.kl-titel{font-weight:700;font-size:14.5px;line-height:1.3}
.kl-tags{grid-column:1;display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--vlak);color:var(--inkt-2);border:1px solid var(--lijn);white-space:nowrap}
.tag.hoofd{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.tag.kans{background:var(--kans-zacht);color:var(--inkt);border-color:var(--kans)}
.meter{grid-column:2;grid-row:1/3;display:flex;gap:3px;align-items:end;height:18px}
.meter i{width:5px;border-radius:2px;background:var(--lijn)}
.meter i:nth-child(1){height:6px}.meter i:nth-child(2){height:9px}.meter i:nth-child(3){height:12px}.meter i:nth-child(4){height:15px}.meter i:nth-child(5){height:18px}
.meter i.aan{background:var(--accent)}
.regellijst{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.regellijst li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;color:var(--inkt-2);font-size:15px}
.regellijst svg{width:20px;height:20px;margin-top:2px}
.regellijst b{display:block;color:var(--inkt);font-size:15.5px}

/* Zelf met AI tegenover BitzSearch: twee kolommen die elkaar aankijken */
.duel{display:grid;min-width:0}
.duel-rij{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);grid-template-areas:"zelf wat wij"}
.d-wat{grid-area:wat;display:grid;place-items:center;text-align:center;padding:14px 10px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht)}
.d-zelf{grid-area:zelf;background:var(--vlak);border-inline:1px solid var(--lijn);padding:16px 24px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;color:var(--zacht);font-size:15.5px}
.d-wij{grid-area:wij;background:var(--accent);color:var(--op-accent);padding:16px 26px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font-size:15.5px;font-weight:700}
.d-zelf svg,.d-wij svg{width:18px;height:18px;margin-top:3px}
.d-zelf svg{stroke:var(--zacht)}
.d-wij svg{stroke:var(--op-accent);stroke-width:2.6}
.duel-rij + .duel-rij .d-zelf{border-top:1px solid var(--lijn)}
.duel-rij + .duel-rij .d-wij{border-top:1px solid color-mix(in srgb,var(--op-accent) 20%,transparent)}
.duel-kop .d-zelf,.duel-kop .d-wij{display:grid;grid-template-columns:1fr;gap:8px;padding-top:26px;padding-bottom:22px;border-top:1px solid var(--lijn);border-radius:22px 22px 0 0}
.duel-kop .d-wij{border-top-color:var(--accent)}
.duel-kop b{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--inkt)}
.duel-kop .d-wij b{color:var(--op-accent)}
.duel-kop .d-wij .label{color:var(--op-accent);opacity:.8}
.duel-rij:last-child .d-zelf,.duel-rij:last-child .d-wij{padding-bottom:26px;border-radius:0 0 22px 22px}
.duel-rij:last-child .d-zelf{border-bottom:1px solid var(--lijn)}
.duel-rij:last-child .d-wat,.duel-rij:nth-last-child(2) .d-wat{color:var(--inkt);font-weight:700}
.vs{width:46px;height:46px;border-radius:50%;background:var(--inkt);color:var(--bg);display:grid;place-items:center;font-family:var(--tekst);font-weight:800;font-size:15px;letter-spacing:0;text-transform:none}
@media (max-width:760px){
  .duel{gap:14px}
  .duel-rij{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"wat wat" "zelf wij";column-gap:8px}
  .d-wat{place-items:start;padding:0 2px 8px;text-align:left}
  .duel-kop .d-wat{display:none}
  .d-zelf,.d-wij,.duel-rij + .duel-rij .d-zelf,.duel-rij + .duel-rij .d-wij,.duel-kop .d-zelf,.duel-kop .d-wij,.duel-rij:last-child .d-zelf,.duel-rij:last-child .d-wij{border:1px solid var(--lijn);border-radius:12px;padding:12px;font-size:14.5px;grid-template-columns:16px minmax(0,1fr);gap:8px}
  .d-zelf svg,.d-wij svg{width:15px;height:15px}
  .duel-kop .d-zelf,.duel-kop .d-wij{grid-template-columns:1fr}
  .d-wij,.duel-rij + .duel-rij .d-wij,.duel-kop .d-wij,.duel-rij:last-child .d-wij{border-color:var(--accent)}
  .duel-kop b{font-size:16px}
}

/* Hoe een tekst ontstaat */
.schrijf{display:grid;gap:24px}
.anatomie{gap:18px}
.anat-raster{display:grid;gap:24px;grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.anat-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px}}
.anat-tekst{background:var(--bg);border-radius:16px;padding:22px 22px 22px 54px;display:grid;gap:14px;min-width:0}
.anat-deel{position:relative;border-radius:10px;padding:6px 8px;margin-inline:-8px;transition:background .25s ease,box-shadow .25s ease}
.anat-deel.aan{background:var(--vlak);box-shadow:inset 0 0 0 1.5px var(--accent)}
.a-nr{position:absolute;left:-38px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--vlak);border:1.5px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center;transition:background .25s ease,color .25s ease}
.anat-deel.aan .a-nr{background:var(--accent);color:var(--op-accent)}
.a-titel{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em;line-height:1.2;font-weight:800;color:var(--inkt)}
.a-eerste{font-size:16px;font-weight:600;color:var(--inkt-2)}
.a-foto,.ft-beeld{position:relative;height:120px;border-radius:12px;overflow:hidden;background:var(--accent-zacht)}
.tegels{position:absolute;inset:0;background:linear-gradient(var(--vlak) 2px,transparent 2px) 0 0/34px 34px,linear-gradient(90deg,var(--vlak) 2px,transparent 2px) 0 0/34px 34px;opacity:.7}
.douche{position:absolute;right:18%;top:14%;width:56px;height:10px;border-radius:6px;background:var(--accent);box-shadow:0 0 0 0 transparent}
.douche::after{content:"";position:absolute;left:24px;top:-26px;width:6px;height:28px;border-radius:3px;background:var(--accent)}
.a-blok{display:grid;gap:8px}
.a-blok b{font-size:16px}
.a-eigen{font-size:14.5px;font-weight:600;color:var(--inkt);background:var(--kans-zacht);border-radius:6px;padding:4px 8px;justify-self:start}
.a-vraag{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:600;color:var(--inkt-2);border-top:1px solid var(--lijn);padding-top:7px}
.a-vraag em{font-style:normal;font-family:var(--mono);color:var(--zacht)}
.a-links{display:flex;flex-wrap:wrap;gap:8px}
.a-links span{font-size:13.5px;font-weight:700;color:var(--accent);background:var(--accent-zacht);border-radius:999px;padding:4px 12px}
.a-links span::before{content:"→ "}
.anat-uitleg{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:anat}
.anat-uitleg li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 12px;padding:10px 12px;border-radius:12px;cursor:pointer;counter-increment:anat;transition:background .2s ease}
.anat-uitleg li::before{content:counter(anat);grid-row:1/3;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center}
.anat-uitleg li.aan{background:var(--accent-zacht)}
.anat-uitleg li.aan::before{background:var(--accent);color:var(--op-accent)}
.anat-uitleg b{font-size:15.5px}
.anat-uitleg span{font-size:14.5px;color:var(--inkt-2)}
.schrijf-duo{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:980px){.schrijf-duo{grid-template-columns:1fr 1fr}}
.stem,.foto{gap:14px;align-content:start}
.stem h3,.foto h3{font-size:clamp(20px,2.2vw,24px)}
.stem-sub{color:var(--inkt-2);font-size:15.5px}
.stem-keuze{display:flex;flex-wrap:wrap;gap:8px}
.stem-tekst{font-size:17px;line-height:1.6;background:var(--bg);border-radius:14px;padding:18px 20px;border-left:3px solid var(--accent);min-height:7.5em}
.beweeg .stem-tekst.wissel{animation:op .35s ease both}
.foto-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.foto-drie{grid-template-columns:1fr}}
.foto-tegel{display:grid;gap:6px;align-content:start}
.foto-tegel b{font-size:15px}
.foto-tegel span{font-size:13.5px;color:var(--inkt-2)}
.ft-beeld{height:96px}
.ft-vink{position:absolute;right:8px;bottom:8px;width:24px;height:24px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.ft-vink svg{width:14px;height:14px;stroke:var(--op-accent);stroke-width:3}
.ft-zes{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;background:var(--bg)}
.ft-zes i{border-radius:6px;background:var(--accent-zacht)}
.ft-zes i:nth-child(2n){background:var(--lijn)}
.ft-eigen{display:grid;place-items:center;background:var(--bg);border:1.5px dashed var(--zacht)}
.ft-eigen svg{width:28px;height:28px}
.poorten{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.poorten li{position:relative;background:var(--vlak);border:1px solid var(--lijn);border-radius:16px;padding:16px;display:grid;gap:6px;align-content:start}
.poorten b{font-size:15.5px}
.poorten li > span:last-child{font-size:13.5px;color:var(--inkt-2)}
.p-nr{width:28px;height:28px;border-radius:50%;background:var(--accent-zacht);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;display:grid;place-items:center}
.p-online{background:var(--accent)!important;border-color:var(--accent)!important}
.p-online b,.p-online > span:last-child{color:var(--op-accent)!important}
.p-online .p-nr{background:var(--op-accent)}
.p-online .p-nr svg{width:16px;height:16px;stroke:var(--accent);stroke-width:3}
.beweeg .zicht .poorten li{animation:op .45s both;animation-delay:calc(var(--k,0)*.12s)}
.sector-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sector-lbl{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--zacht)}

/* Koppelen met Google, waarom klanten blijven, groeigrafiek */

.groei-graf{background:var(--bg);border-radius:16px;padding:16px 16px 6px;display:grid;gap:8px;min-width:0}
#groei-svg{width:100%;height:auto;display:block;overflow:visible}
#groei-svg .g-raster{stroke:var(--lijn);stroke-width:1}
#groei-svg .g-as{fill:var(--zacht);font-family:var(--mono);font-size:11px}
#groei-svg .g-lijn{fill:none;stroke:var(--zacht);stroke-width:2;opacity:.4;stroke-linejoin:round}
#groei-svg .g-lijn.aan{stroke:var(--accent);stroke-width:4;opacity:1}
#groei-svg .g-naam{fill:var(--zacht);font-family:var(--tekst);font-weight:700;font-size:13px}
#groei-svg .g-naam.aan{fill:var(--accent);font-weight:800;font-size:14px}
.beweeg #groei-svg .g-lijn.aan.teken{stroke-dasharray:1 1;animation:teken 1.4s ease both}

/* Advertenties of SEO */
.ads{display:grid;gap:40px}
.ads-raster{display:grid;gap:20px;grid-template-columns:1fr}
.graf-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
.legende{display:flex;gap:18px;font-size:14px;font-weight:600;color:var(--inkt-2)}
.legende span{display:inline-flex;align-items:center;gap:8px}
.stip{width:10px;height:10px;border-radius:3px;display:inline-block}
.stip.a{background:var(--zacht)}.stip.s{background:var(--accent)}
.balken{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:190px;border-bottom:1px solid var(--lijn)}
.maandje{display:flex;gap:2px;align-items:end;height:100%}
.maandje i{flex:1;height:var(--h);border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.maandje .a{background:var(--lijn-sterk)}.maandje .s{background:var(--accent)}
.beweeg .zicht .maandje i{animation:hoog .6s backwards;animation-delay:calc(.2s + var(--k)*70ms)}
.stoplijn{position:absolute;top:-6px;bottom:0;left:calc(50% + 3px);border-left:1.5px dashed var(--inkt-2);opacity:0;transition:opacity .3s ease;pointer-events:none}
.stoplijn em{position:absolute;top:-4px;left:8px;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--inkt-2);white-space:nowrap}
.gestopt .stoplijn{opacity:1}
.as12{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;font-family:var(--mono);font-size:10.5px;color:var(--zacht);text-align:center}
.tegen{display:grid;gap:12px;grid-template-columns:1fr;align-content:start}
@media (min-width:560px) and (max-width:959px){.tegen{grid-template-columns:1fr 1fr}}
.tegen > div{border:1px solid var(--lijn);border-radius:18px;padding:20px;background:var(--vlak);display:grid;gap:12px;align-content:start}
.tegen .wij{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tegen .wij .label{color:var(--accent)}
.tegen ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tegen li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px;color:var(--inkt-2)}
.tegen li svg{width:18px;height:18px;margin-top:2px}
.tegen .zij li svg{stroke:var(--zacht)}
.slotzin{font-size:clamp(19px,2.1vw,24px);font-weight:800;letter-spacing:-.01em;line-height:1.3;max-width:56em}
.reken{background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;padding:clamp(20px,3vw,32px);display:grid;gap:28px;grid-template-columns:1fr;min-width:0}
@media (min-width:900px){.reken{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px}}
.reken-in,.reken-uit{display:grid;gap:18px;align-content:start;min-width:0}
.reken-in h3{font-size:clamp(22px,2.4vw,28px)}
.reken-sub{color:var(--inkt-2)}
.schuif{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline;font-weight:700;font-size:15px}
.schuif b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.schuif input{grid-column:1/-1;width:100%;accent-color:var(--accent);height:32px;margin:0;cursor:pointer}
.schuif small{grid-column:1/-1;font-size:13px;font-weight:500;color:var(--zacht)}
.vb{display:grid;gap:12px}
.vb-rij{display:grid;grid-template-columns:170px minmax(0,1fr) 100px;gap:14px;align-items:center;font-weight:700;font-size:15px}
.vb-spoor{height:30px;background:var(--bg);border-radius:8px;overflow:hidden}
.vb-spoor i{display:block;height:100%;width:var(--w,0);border-radius:8px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.vb-spoor .a{background:var(--lijn-sterk)}.vb-spoor .s{background:var(--accent)}
.vb-rij b{font-size:22px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.vb-kop{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--zacht);text-transform:uppercase;letter-spacing:.06em}
@media (max-width:560px){
  .vb-rij{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .vb-rij .vb-naam{grid-column:1;grid-row:1}
  .vb-rij b{grid-column:2;grid-row:1}
  .vb-rij .vb-spoor{grid-column:1/-1;grid-row:2}
}
.reken-zin{font-size:clamp(17px,1.6vw,19px);font-weight:700;line-height:1.45;border-top:1px solid var(--lijn);padding-top:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk-wrap{grid-column:1/-1;display:grid;gap:16px;border-top:1px solid var(--lijn);padding-top:24px;min-width:0}
.pk-kop{display:grid;gap:8px}
.pk-sub{color:var(--inkt-2);font-size:16px}
.pk-sub b{color:var(--inkt)}
.pk-scroll{overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch}
.pk-tabel{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:15px}
.pk-tabel th,.pk-tabel td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--lijn);vertical-align:middle}
.pk-tabel tbody th{text-align:left;font-weight:700;color:var(--inkt-2);font-size:14.5px;width:22%}
.pk-tabel thead th{border-bottom:1px solid var(--inkt);font-weight:800;vertical-align:bottom}
.pk-tabel .ads-k{color:var(--inkt-2);font-size:15px}
.pk-tabel .ads-k small{display:block;font-size:11.5px;font-weight:600;color:var(--zacht);margin-top:2px}
.pk-tabel td.ads-k{background:var(--bg);color:var(--inkt);font-weight:700}
.pk-tabel thead button{border:1px solid var(--lijn);background:var(--vlak);border-radius:999px;padding:7px 14px;min-height:40px;font-weight:800;font-size:14px;cursor:pointer;color:var(--inkt-2);transition:background .2s ease,color .2s ease,border-color .2s ease}
.pk-tabel thead button:hover{border-color:var(--zacht)}
.pk-tabel .kies{background:var(--accent-zacht)}
.pk-tabel thead .kies{border-radius:12px 12px 0 0}
.pk-tabel thead .kies button{background:var(--accent);color:var(--op-accent);border-color:var(--accent)}
.pk-tabel td{font-variant-numeric:tabular-nums;font-weight:600}
.pk-tabel td.kies{font-weight:800;color:var(--inkt)}
.pk-tabel td.top{color:var(--accent);font-weight:800}
.pk-tabel tr:last-child th,.pk-tabel tr:last-child td{border-bottom:0}
.pk-tabel tbody th,.pk-tabel thead th:first-child{position:sticky;left:0;z-index:1;background:var(--vlak)}
@media (max-width:640px){.pk-tabel tbody th{width:auto;min-width:130px;box-shadow:1px 0 0 var(--lijn)}}

/* Resultaat over tijd en tempo per pakket */
.tijd{display:grid;gap:40px}
.verloop,.tempo{background:var(--vlak);border:1px solid var(--lijn);border-radius:20px;padding:clamp(18px,3vw,28px);display:grid;gap:18px;min-width:0}
.curve-wrap{position:relative;height:170px;margin-top:12px}
.curve{position:absolute;inset:0;width:100%;height:100%}
.curve .vlak{fill:var(--accent-zacht)}
.curve .rand{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke}
.beweeg .zicht .curve{animation:onthulx 2.4s cubic-bezier(.3,.7,.2,1) .2s both}
@keyframes onthulx{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.mijl{position:absolute;top:0;bottom:0;left:var(--x);border-left:1.5px dashed var(--lijn)}
.mijl > span,.mnr{width:26px;height:26px;border-radius:50%;background:var(--vlak);border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}
.mijl > span{position:absolute;top:-13px;left:-14px}
.beweeg .zicht .mijl > span{animation:pop .4s both;animation-delay:calc(.5s + var(--k)*.45s)}
.as{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--zacht)}
.verloop > .as{border-top:1px solid var(--lijn);padding-top:8px;margin-top:-18px}
.mijlpalen{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mijlpalen li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.mijlpalen b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.06em}
.mijlpalen strong{display:block;font-weight:800;line-height:1.3;margin-top:2px}
.mijlpalen .z{display:block;color:var(--zacht);font-size:14px;margin-top:2px}
.klein-voet{font-size:13.5px;color:var(--zacht)}
.tempo-kop{display:grid;gap:16px;align-items:end;grid-template-columns:1fr}
@media (min-width:980px){.tempo-kop{grid-template-columns:minmax(0,1fr) auto}}
.tempo-kop .kopje{gap:8px}
.tempo-kop .kopje p{font-size:16px}
.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg);padding:4px;border-radius:999px;justify-self:start}
.seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;min-height:40px;font-weight:700;font-size:14px;cursor:pointer;color:var(--inkt-2);transition:background .2s ease,color .2s ease}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--op-accent)}
@media (max-width:480px){.seg{border-radius:16px;display:grid;grid-template-columns:1fr 1fr;width:100%}.seg button{border-radius:12px}}
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
.cijfer{background:var(--bg);border-radius:14px;padding:14px 16px;display:grid;gap:2px}
.cijfer span{font-size:13.5px;color:var(--zacht);font-weight:600}
.cijfer b{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.themas{display:grid;gap:8px}
.thema{display:grid;grid-template-columns:92px minmax(0,1fr) 104px;gap:12px;align-items:center;font-size:13.5px;font-weight:700;color:var(--inkt-2)}
.spoor{position:relative;height:16px;background:var(--bg);border-radius:6px;overflow:hidden}
.spoor i{position:absolute;top:0;bottom:0;left:var(--l,0);width:var(--w,0);background:var(--accent);border-radius:5px;transform-origin:left}
.beweeg .spoor i.loopt{animation:vul .45s ease both;animation-delay:var(--d,0s)}
.klaar-op{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--zacht);white-space:nowrap}
.klaar-op.laat{color:var(--kans)}
.as-tempo .as{font-size:10.5px}
@media (max-width:520px){
  .themas{gap:10px}
  .thema{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  .thema > span:first-child{grid-column:1;grid-row:1}
  .thema .klaar-op{grid-column:2;grid-row:1}
  .thema .spoor{grid-column:1/-1;grid-row:2}
  .as-tempo > span:first-child,.as-tempo .klaar-op{display:none}
  .as-tempo .as{grid-column:1/-1;grid-row:1}
}
.regel{display:grid;gap:10px;align-content:start;border-top:1px solid var(--band-lijn);padding-top:20px;min-width:0}
.regel > b{font-size:19px;letter-spacing:-.01em}
.regel.o > b{color:var(--band-accent)}
.regel > p{color:var(--band-zacht);font-size:16.5px}
.weken{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.weken li{display:grid;gap:8px;justify-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--band-zacht);text-transform:uppercase;letter-spacing:.06em}
.weken .blad-ic{width:100%;max-width:72px;aspect-ratio:4/5;border:1.5px solid var(--band-accent-2);border-radius:10px;display:grid;place-items:center;background:var(--band-vlak)}
.weken .blad-ic svg{width:22px;height:22px;stroke:var(--band-accent-2)}
.beweeg .weken .blad-ic{animation:week 14s infinite both;animation-delay:calc(var(--k)*1.8s)}
.beweeg .weken .blad-ic svg{animation:weekvink 14s infinite both;animation-delay:calc(var(--k)*1.8s)}
@keyframes week{0%{border-color:var(--band-lijn);background:transparent}8%,85%{border-color:var(--band-accent-2);background:var(--band-vlak)}100%{border-color:var(--band-lijn);background:transparent}}
@keyframes weekvink{0%{opacity:0;transform:scale(.5)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
.voorstel{margin-top:10px;background:var(--band-vlak);border:1px solid var(--band-lijn);border-radius:16px;padding:18px;display:grid;gap:10px}
.voorstel .sc-kop{color:var(--band-zacht)}
.voorstel b{font-size:16px;color:var(--band-inkt)}
.voorstel p{color:var(--band-zacht);font-size:14.5px}
.knoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.knoppen button{min-height:40px;border-radius:999px;padding:6px 16px;font-weight:700;font-size:14px;cursor:pointer;border:1px solid var(--band-lijn);background:transparent;color:var(--band-inkt);transition:background .2s ease,border-color .2s ease}
.knoppen button:hover{border-color:var(--band-zacht)}
.knoppen button[aria-pressed="true"]{background:var(--band-inkt);color:var(--band);border-color:var(--band-inkt)}
.gevolg{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--band-inkt);font-size:15px;min-height:24px}
.gevolg svg{width:20px;height:20px;stroke:var(--band-accent-2);flex:none}
.beweeg .gevolg svg{animation:draai 3s linear infinite}

/* Pakketten */
.pakketten{display:grid;gap:32px}
.vier{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.pakket{border:1px solid var(--lijn);border-radius:18px;padding:24px;display:grid;gap:6px;align-content:start;background:var(--vlak);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}
.pakket:hover{border-color:var(--zacht)}
.pakket[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pakket > span{display:block}
.pakket .naam{font-weight:800;font-size:17px}
.pakket .aantal{font-weight:800;font-size:44px;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:8px}
.pakket .aantal small{font-size:15px;font-weight:600;color:var(--zacht);letter-spacing:0;margin-left:6px}
.pakket .prijs{font-weight:700;font-variant-numeric:tabular-nums}
.pakket .prijs small{font-weight:500;color:var(--zacht);font-size:14px}
.pakket .wat{color:var(--inkt-2);font-size:14.5px;border-top:1px solid var(--lijn);padding-top:14px;margin-top:10px}
.maand{background:var(--vlak);border:1px solid var(--lijn);border-radius:18px;padding:clamp(18px,3vw,26px);display:grid;gap:16px}
.maand-kop{font-size:16.5px;color:var(--inkt-2)}
.maand-kop b{color:var(--inkt)}
.dagen{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (min-width:700px){.dagen{grid-template-columns:repeat(15,minmax(0,1fr))}}
@media (min-width:1000px){.dagen{grid-template-columns:repeat(30,minmax(0,1fr))}}
.dag{aspect-ratio:1/1.15;max-width:100%;border:1px solid var(--lijn);border-radius:8px;display:grid;justify-items:center;align-content:space-between;padding:4px 0 6px}
.dag small{font-family:var(--mono);font-size:10px;color:var(--zacht)}
.dag i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.dag.tekst{border-color:var(--accent);background:var(--accent-zacht)}
.beweeg .dag.tekst i{animation:pop .35s both;animation-delay:calc(var(--k)*45ms)}

/* Secties komen rustig in beeld */
.beweeg .onthul{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.beweeg .onthul.zicht{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}