/* bitzplanner.com, versie 2 (8 november): het verhaal van Apple en investorshub.be met de tokens van Atlas. Alle kleuren zijn var(--…) uit
   tokens.css (gegenereerd uit web/ui.css, plus --papier en --voet van de site). Vlakken: podium --kijker, donkere band --navy, warm vlak
   --orange-deep, licht --bg, wit --surface; nooit twee keer hetzelfde na elkaar. Eigen maten voor een site die groter spreekt dan de app
   staan hier één keer. De toestellen zijn CSS met maatcontainers: alles schaalt mee met de breedte van het toestel. */
:root{
  --font:'Manrope',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --kolom:1120px; --gutter:20px; --nav-h:56px;
  --ruimte:clamp(72px,9vw,128px); --ruimte-klein:clamp(40px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --inkt:var(--mark);
}
@media (min-width:700px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--t-16);line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
[hidden]{display:none !important}
a{color:var(--blue-text);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--heading);font-weight:800;letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
h2{font-size:clamp(34px,4.2vw,60px)}
h3{font-size:clamp(26px,2.6vw,36px)}
p{margin:0}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--text-2);line-height:1.5;max-width:34em}
.eyebrow{font-size:var(--t-12);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin:0 0 var(--s4)}
.skip{position:absolute;left:-999px;top:8px;background:var(--card);padding:var(--s2) var(--s3);border-radius:var(--r-sm);z-index:60}
.skip:focus{left:8px}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
.woordmerk{font-size:var(--t-18);font-weight:800;letter-spacing:-.02em;color:var(--heading)}
.woordmerk b{color:var(--orange)}

/* knoppen, zoals in de app (ui.css); pil en groot voor de oproepen op de site */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:40px;padding:0 var(--s4);border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);font-weight:700;font-size:var(--t-14);white-space:nowrap;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--surface-2);color:var(--heading);text-decoration:none}
.btn.primary{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--on-navy)}
.btn.primary:hover{background:var(--orange-deeper);border-color:var(--orange-deeper);color:var(--on-navy)}
.btn.pil{border-radius:var(--r-pill)}
.btn.groot{height:52px;padding:0 var(--s8);font-size:var(--t-16)}
.btn.glas{background:color-mix(in srgb,var(--kijker-text) 10%,transparent);border-color:var(--kijker-rand);color:var(--kijker-text)}
.btn.glas:hover{background:color-mix(in srgb,var(--kijker-text) 18%,transparent);color:var(--kijker-text)}
.btn.op-oranje{background:var(--card);border-color:var(--card);color:var(--orange-text)}
.btn.op-oranje:hover{background:var(--surface-2);color:var(--orange-deeper)}

/* de zwevende, donkere glazen balk bovenaan */
.nav{position:fixed;top:12px;left:0;right:0;z-index:50;padding:0 var(--gutter);pointer-events:none}
.nav__in{pointer-events:auto;max-width:var(--kolom);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s2) 0 var(--s4);border-radius:var(--r-pill);background:color-mix(in srgb,var(--kijker) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid var(--kijker-soft);box-shadow:var(--shadow-lg)}
.nav__logo{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px}
.nav__logo:hover{text-decoration:none}
.nav .woordmerk{color:var(--kijker-text)}
.nav__mid{display:none;margin:0 auto;gap:var(--s5)}
.nav__mid a{color:var(--on-navy-muted);font-size:var(--t-14);font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.nav__mid a:hover{color:var(--kijker-text);text-decoration:none}
.nav__acties{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.nav__login{display:none;color:var(--on-navy-muted);font-weight:600;font-size:var(--t-14);min-height:40px;align-items:center;padding:0 var(--s2)}
.nav__login:hover{color:var(--kijker-text);text-decoration:none}
@media (min-width:760px){.nav__login{display:inline-flex}}
@media (min-width:1000px){.nav__mid{display:flex}}

/* vlakken */
.podium{background:var(--kijker);color:var(--kijker-text)}
.vlak-wit{background:var(--surface)}
.vlak-licht{background:var(--bg)}
.vlak-donker{background:var(--navy);color:var(--on-navy)}
.hoofdstuk{padding:var(--ruimte) var(--gutter)}
.lockup{max-width:var(--kolom);margin:0 auto var(--ruimte-klein);text-align:center}
.lockup .lead{margin:var(--s5) auto 0}
.lockup--donker h2{color:var(--on-navy)}
.lockup--donker .lead{color:var(--on-navy-muted)}
.lockup--donker .eyebrow{color:var(--orange)}
.onderschrift{margin:var(--s4) 0 0;text-align:center;font-size:var(--t-12);letter-spacing:.04em;color:var(--muted)}
.podium .onderschrift,.onderschrift--donker{color:var(--on-navy-muted)}

/* 1. de belofte: één scherm hoog, kop, toestel, knoppen en regel samen; het sfeerbeeld (AI) erachter, met een donkere sluier bovenaan
   zodat de kop 4,5:1 houdt */
.hero__beeld{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;opacity:.85;transform-origin:50% 55%}
.hero__beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--kijker) 0%,color-mix(in srgb,var(--kijker) 55%,transparent) 42%,color-mix(in srgb,var(--kijker) 25%,transparent) 70%,var(--kijker) 100%)}

.hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 32px) var(--gutter) var(--ruimte-klein);text-align:center}
.hero__halo{position:absolute;left:50%;top:56%;width:min(1100px,150vw);aspect-ratio:1.3;transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 34%,transparent),color-mix(in srgb,var(--orange) 12%,transparent) 50%,transparent 74%);pointer-events:none;filter:blur(8px)}
.hero__in{position:relative;z-index:1;max-width:var(--kolom);margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hero__kop{color:var(--kijker-text);font-size:clamp(30px,3.15vw,46px);letter-spacing:-.03em;line-height:1.06}
.hero__toestel{margin:clamp(16px,2.6svh,28px) 0 0}
.hero__toestel .tel{--tw:min(312px,calc((100svh - 296px) / 2.06),78vw)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);margin-top:clamp(16px,2.4svh,28px)}
.hero__regel{margin-top:var(--s3);color:var(--on-navy-muted);font-size:var(--t-14)}
@media (max-width:699px){
  .hero{padding-top:calc(var(--nav-h) + 32px)}
  .hero__kop{font-size:clamp(28px,8.4vw,36px)}
  .hero__toestel .tel{--tw:min(240px,calc((100svh - 372px) / 2.06),70vw)}
}

/* de balk met de oproep */
.balk{padding:var(--s5) var(--gutter)}
.balk--oranje{background:var(--orange-deep);color:var(--on-navy)}
.balk--donker{background:var(--navy);color:var(--on-navy)}
.balk__in{max-width:var(--kolom);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
.balk p{color:var(--on-navy-muted);font-size:var(--t-16)}
.balk--oranje p{color:var(--on-navy);opacity:.92}
.balk p b{color:var(--on-navy);font-weight:800}

/* De toestellen staan in toestellen.css (één onderdeel, ook voor de site van BitzSearch). Hier alleen de kaart waarin een toestel kan staan. */
.pf{position:relative;height:26rem;background:linear-gradient(180deg,var(--surface),var(--surface-2));overflow:hidden;container-type:inline-size;--tw:min(19.5rem,84cqw)}
.pf .tel{position:absolute;left:50%;top:1.25rem;transform:translateX(-50%);margin:0}
.laptop--breed{--mw:min(1080px,100%)}
.duo{position:relative;padding:0 0 6% 0}
.duo .tel{position:absolute;right:-2%;bottom:0;margin:0;--tw:min(22%,250px)}

/* 2 en 5. het vastgeprikte toestel */
.stage{max-width:var(--kolom);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8)}
.stage__toestel{display:flex;justify-content:center}
.stage__prik{margin:0;width:100%;max-width:26rem}
.stage__prik .pf{height:34rem;--tw:min(21rem,84cqw)}
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.stap{padding:var(--s4) 0}
.stap__nr{font-family:var(--mono);font-size:var(--t-12);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.stap h3{margin:0 0 var(--s3)}
.stap p{color:var(--text-2);font-size:clamp(16px,1.25vw,19px);max-width:30em}
.feiten{list-style:none;padding:0;margin:var(--s5) 0 0;display:grid;gap:var(--s2)}
.feiten li{position:relative;padding-left:26px;color:var(--text-2);font-size:var(--t-14);font-weight:600}
.feiten li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border-radius:50%;background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green-rand)}
.feiten li::after{content:"";position:absolute;left:5px;top:calc(.2em + 4px);width:6px;height:3px;border-left:2px solid var(--green-text);border-bottom:2px solid var(--green-text);transform:rotate(-45deg)}
.feiten--donker li{color:var(--on-navy-muted)}
.feiten--rij{max-width:var(--kolom);margin:var(--ruimte-klein) auto 0;gap:var(--s4)}
@media (min-width:900px){
  .feiten--rij{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .stage{grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,96px);align-items:start}
  .stage--omgekeerd .stage__tekst{order:2}
  .stage--omgekeerd .stage__toestel{order:1}
  .stage__toestel{position:sticky;top:calc(50svh - 18rem);align-self:start}
  .stap{min-height:60svh;display:flex;flex-direction:column;justify-content:center;padding:0;opacity:.35;transition:opacity .4s var(--ease)}
  .stap.aan{opacity:1}
}
@media (max-width:899px){.stage__toestel{order:-1}.stap{opacity:1}}
@media (prefers-reduced-motion:reduce){.stap{opacity:1;transition:none}}

/* 3. nooit dubbel: de week die zich 's nachts vult */
.week{max-width:var(--kolom);margin:0 auto;background:var(--surface);color:var(--text);border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.week__kop{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-13)}
.week__titel{font-weight:800;color:var(--heading)}
.week__klok{font-family:var(--mono);font-weight:500;color:var(--heading);padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-2)}
.week__status{color:var(--muted);margin-left:auto;text-align:right}
.week__raster{display:grid;grid-template-columns:34px repeat(7,1fr);height:min(52vw,440px);min-height:320px}
.week__uren{display:grid;grid-template-rows:28px repeat(10,1fr);font-family:var(--mono);font-size:var(--t-11);color:var(--muted-2);text-align:right;padding-right:6px}
.week__uren span{display:block;transform:translateY(-6px)}
.week__uren span:first-child{grid-row:2}
.week__dag{display:grid;grid-template-rows:28px 1fr;border-left:1px solid var(--line);min-width:0}
.week__dagkop{font-size:var(--t-11);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 6px 0;white-space:nowrap}
.week__dagkop b{color:var(--heading);margin-left:3px;font-size:var(--t-12)}
.week__vak{position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(10% - 1px),var(--line) calc(10% - 1px),var(--line) 10%)}
.week__dag--dicht .week__vak{background-color:var(--inset);background-image:repeating-linear-gradient(135deg,transparent 0 6px,var(--line) 6px 7px)}
.boek{position:absolute;left:3px;right:3px;padding:3px 6px;border-radius:4px;border-left:3px solid var(--blue);background:var(--blue-soft);color:var(--blue-deep);font-size:var(--t-11);line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.boek b{display:block;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.boek span{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.boek.is-extern{border-left-color:var(--purple);background:var(--purple-soft);color:var(--purple-text)}
.boek.is-tweede{border-left-color:var(--green);background:var(--green-soft);color:var(--green-text)}
.boek[data-u="8"]{top:0}.boek[data-u="9"]{top:10%}.boek[data-u="10"]{top:20%}.boek[data-u="11"]{top:30%}.boek[data-u="12"]{top:40%}.boek[data-u="13"]{top:50%}.boek[data-u="14"]{top:60%}.boek[data-u="15"]{top:70%}.boek[data-u="16"]{top:80%}.boek[data-u="17"]{top:90%}
.boek[data-l="1"]{height:calc(10% - 3px)}.boek[data-l="2"]{height:calc(20% - 3px)}
.boek[data-n]{opacity:0;transform:scale(.6);transform-origin:left top}
.boek[data-n="1"]{--n:1}.boek[data-n="2"]{--n:2}.boek[data-n="3"]{--n:3}.boek[data-n="4"]{--n:4}.boek[data-n="5"]{--n:5}.boek[data-n="6"]{--n:6}.boek[data-n="7"]{--n:7}.boek[data-n="8"]{--n:8}.boek[data-n="9"]{--n:9}.boek[data-n="10"]{--n:10}
.week.speel .boek[data-n]{animation:boek-in .5s var(--ease) both;animation-delay:calc(var(--n) * .55s + .4s)}
.week.speel .boek.is-tweede{animation-delay:8.2s}
.week.speel .boek[data-kern]{animation:boek-in .5s var(--ease) both,boek-bezet .9s ease 6.6s both;animation-delay:calc(var(--n) * .55s + .4s),6.6s}
@keyframes boek-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes boek-bezet{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px var(--orange-rand);background:var(--orange-soft);border-left-color:var(--orange)}70%{box-shadow:0 0 0 3px var(--orange-rand)}}
.week__toast{position:absolute;left:50%;bottom:var(--s4);transform:translate(-50%,16px);opacity:0;display:flex;align-items:center;gap:var(--s3);max-width:min(92%,520px);padding:var(--s3) var(--s4);border-radius:var(--r);background:var(--navy);color:var(--on-navy);box-shadow:var(--shadow-lg);font-size:var(--t-14);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.week__toast.aan{opacity:1;transform:translate(-50%,0)}
.week__toast-nr{flex:none;width:28px;height:28px;border-radius:50%;background:var(--orange-deep);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--t-12);font-weight:500}
@media (max-width:699px){.week__raster{grid-template-columns:26px repeat(5,1fr)}.week__dag--dicht{display:none}.week__status{display:none}.boek span{display:none}}
@media (prefers-reduced-motion:reduce){.boek[data-n]{opacity:1;transform:none;animation:none !important}.week.speel .boek[data-kern]{box-shadow:0 0 0 3px var(--orange-rand);background:var(--orange-soft);border-left-color:var(--orange)}.week__toast{transition:none}}

/* 4. voor jouw zaak */
.kies-rij{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.kies-knop{height:44px;padding:0 var(--s5);border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--card);color:var(--text-2);font:inherit;font-size:var(--t-14);font-weight:700;white-space:nowrap;cursor:pointer}
.kies-knop:hover{background:var(--surface-2);color:var(--heading)}
.kies-knop[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.sector-blok{max-width:var(--kolom);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:center}
.sector-foto{margin:0}
.sector-foto img{display:block;width:100%;height:auto;border-radius:var(--r);aspect-ratio:4 / 5;object-fit:cover}
.sector-tekst h3{margin-bottom:var(--s3)}
.sector-tekst p{color:var(--text-2)}
.sector-tel{margin:0}
.sector-tel .pf{--tw:min(17rem,84cqw)}
@media (min-width:900px){.sector-blok{grid-template-columns:5fr 4fr 4fr;gap:clamp(24px,3.5vw,48px)}}
@media (max-width:899px){.sector-blok{grid-template-columns:1fr 1fr}.sector-tekst{grid-column:1 / -1}}
@media (max-width:599px){.sector-blok{grid-template-columns:1fr}}

/* 7. het bewijs */
.bewijs{max-width:var(--kolom);margin:var(--ruimte) auto 0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8);align-items:center}
.bewijs__tekst p:not(.eyebrow){color:var(--text-2);margin-top:var(--s3)}
.laptop--bewijs{--mw:100%}
@media (min-width:900px){.bewijs{grid-template-columns:4fr 8fr;gap:clamp(32px,4vw,56px)}}

/* 8. pakketten */
.periode{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;background:var(--surface-2);margin-top:var(--s6)}
.periode-knop{min-height:40px;padding:var(--s1) var(--s4);border:0;border-radius:var(--r-pill);background:transparent;font:inherit;font-size:var(--t-14);font-weight:700;color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2)}
.periode-knop[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.periode-extra{white-space:nowrap;font-size:var(--t-11);font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-pill);background:var(--green-soft);color:var(--green-text)}
@media (max-width:480px){.periode-knop{flex-direction:column;gap:2px;padding:var(--s1) var(--s3)}}
.pakket-rij{max-width:var(--kolom);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--s4)}
@media (min-width:900px){.pakket-rij{grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:stretch}}
.pakket{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s8) var(--s6);display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.pakket-mid{border-color:var(--navy-line);box-shadow:0 0 0 1px var(--navy-line),var(--shadow-sm)}
.pakket h3{font-size:var(--t-22);margin:0 0 var(--s1)}
.pakket-voor{color:var(--muted);font-size:var(--t-14);margin:0 0 var(--s5)}
.prijs{display:flex;align-items:baseline;gap:var(--s2);margin:0}
.bedrag{font-size:var(--t-40,40px);font-weight:800;letter-spacing:-.03em;color:var(--heading)}
.per{color:var(--muted);font-size:var(--t-14)}
.prijs-jaar{color:var(--muted);font-size:var(--t-13);margin:var(--s1) 0 var(--s5)}
.pakket-lijst{list-style:none;padding:var(--s5) 0 0;margin:0 0 var(--s6);display:grid;gap:var(--s2);border-top:1px solid var(--line);flex:1}
.pakket-lijst li{position:relative;padding-left:22px;font-size:var(--t-14);color:var(--text-2)}
.pakket-lijst li::before{content:"";position:absolute;left:2px;top:.55em;width:6px;height:3px;border-left:2px solid var(--green-text);border-bottom:2px solid var(--green-text);transform:rotate(-45deg)}
.pakket-lijst b{color:var(--heading)}
.pakket .btn{width:100%;height:44px}
.pakket-voet{max-width:var(--kolom);margin:var(--s8) auto 0;text-align:center}
.pakket-voet p{color:var(--muted);font-size:var(--t-14);max-width:44em;margin:0 auto var(--s3)}
.pakket-voet b{color:var(--heading)}

/* 9. vragen */
.vraag-lijst{max-width:760px;margin:0 auto;border-top:1px solid var(--line)}
.vraag-lijst details{border-bottom:1px solid var(--line)}
.vraag-lijst summary{cursor:pointer;list-style:none;padding:var(--s4) 40px var(--s4) 0;font-weight:700;font-size:var(--t-16);color:var(--heading);position:relative;min-height:56px;display:flex;align-items:center}
.vraag-lijst summary::-webkit-details-marker{display:none}
.vraag-lijst summary::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.vraag-lijst details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.vraag-lijst p{color:var(--text-2);margin:0 0 var(--s5);max-width:44em}

/* het slot: donker, met de waaier van telefoons */
.slot{position:relative;overflow:hidden;padding:var(--ruimte) var(--gutter) 0;text-align:center}
.slot__halo{position:absolute;left:50%;bottom:-20%;width:min(1200px,160vw);aspect-ratio:1.6;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--orange) 28%,transparent),color-mix(in srgb,var(--orange) 8%,transparent) 55%,transparent 75%);pointer-events:none;filter:blur(10px)}
.slot__in{position:relative;z-index:1;max-width:var(--kolom);margin:0 auto}
.slot__kop{color:var(--kijker-text)}
.slot__lead{color:var(--on-navy-muted);margin:var(--s5) auto 0}
.slot .hero__cta{margin-top:var(--s6)}
.waaier{position:relative;z-index:1;max-width:var(--kolom);margin:var(--ruimte-klein) auto 0;height:clamp(220px,30vw,380px);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;gap:3%}
.waaier .tel{--tw:clamp(120px,16%,200px);flex:none;margin:0;transform-origin:50% 120%}
.waaier .tel[data-waaier="1"]{transform:rotate(-10deg) translateY(12%)}
.waaier .tel[data-waaier="2"]{transform:rotate(-5deg) translateY(4%)}
.waaier .tel[data-waaier="4"]{transform:rotate(5deg) translateY(4%)}
.waaier .tel[data-waaier="5"]{transform:rotate(10deg) translateY(12%)}
.slot .onderschrift{position:relative;z-index:1;padding-bottom:var(--s6)}
@media (max-width:699px){.waaier{height:52vw;gap:2%}.waaier .tel{--tw:30vw}.waaier .tel[data-waaier="1"],.waaier .tel[data-waaier="5"]{display:none}}

/* de voet, in de stijl van spacebitz.com: het vlak --voet (het donkerste merkvlak), tekst in --papier; gedempt 62 %, kolomkoppen 50 %,
   lijnen 14 % van het papier (gemeten: 62 % op het vlak 7,0:1, 50 % 5,2:1); hover in het merkoranje. */
.voet{background:var(--voet);color:var(--papier);padding:var(--ruimte-klein) var(--gutter) 0;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--papier) 10%,transparent)}
.voet__in{max-width:var(--kolom);margin:0 auto}
.voet a{color:var(--papier)}
.voet a:hover{color:var(--orange);text-decoration:none}
.voet__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem)}
@media (min-width:600px){.voet__grid{grid-template-columns:1fr 1fr}.voet__merk{grid-column:1 / -1}}
@media (min-width:1024px){.voet__grid{grid-template-columns:1.5fr 1fr 1fr 1.15fr}.voet__merk{grid-column:auto}}
.voet__logo{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px}
.voet__logo img{width:34px;height:34px}
.woordmerk--papier{color:var(--papier);font-size:var(--t-22)}
.voet__zin{margin:var(--s4) 0 var(--s5);color:color-mix(in srgb,var(--papier) 62%,transparent);font-size:var(--t-16);max-width:22em}
.voet__bedrijf{font-weight:800;margin:0 0 var(--s1)}
.voet__mono{display:block;font-family:var(--mono);font-size:var(--t-11);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--papier) 62%,transparent)}
.voet__kop{margin:0 0 var(--s4);font-family:var(--mono);font-size:var(--t-12);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--papier) 50%,transparent);line-height:1.2}
.voet__lijst{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.voet__lijst a{display:inline-flex;align-items:center;min-height:40px;font-weight:600;font-size:15px}
.voet__lijst li .voet__mono{margin-top:-6px}
.voet__ig{display:flex;width:fit-content;align-items:center;gap:var(--s3);min-height:44px;margin-bottom:var(--s5)}
.voet__ig-icoon{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid color-mix(in srgb,var(--papier) 28%,transparent);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--papier)}
.voet__ig:hover .voet__ig-icoon{border-color:var(--orange);color:var(--orange)}
.voet__ig-tekst{display:flex;flex-direction:column;line-height:1.25}
.voet__ig-tekst b{font-weight:700}
.voet__ig-tekst small{font-size:var(--t-13);color:color-mix(in srgb,var(--papier) 62%,transparent)}
.voet__knop{display:inline-flex}
.voet__onder{margin-top:var(--ruimte-klein);padding-top:var(--s5);border-top:1px solid color-mix(in srgb,var(--papier) 14%,transparent);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s6);font-size:var(--t-13);color:color-mix(in srgb,var(--papier) 62%,transparent)}
.voet__copy{margin:0}
.voet__juridisch{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center}
.voet__juridisch a{color:var(--papier);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:40px;display:inline-flex;align-items:center}
.voet__juridisch a:hover{color:var(--orange)}
.voet__juridisch span{color:color-mix(in srgb,var(--papier) 62%,transparent)}
.voet__klein{margin:var(--s3) 0 0;font-size:var(--t-12);color:color-mix(in srgb,var(--papier) 50%,transparent)}
.voet__wm{margin-top:var(--s6);padding-bottom:var(--s2);line-height:0;pointer-events:none;user-select:none}
.wm{display:block;width:100%;height:auto}
.wm text{font-family:var(--font);font-weight:800;font-size:150px;letter-spacing:-.02em}
.wm .wm-a{stop-color:var(--papier);stop-opacity:.1}
.wm .wm-b{stop-color:var(--papier);stop-opacity:.01}

/* wettelijke vermeldingen */
.tekst-pagina{padding:calc(var(--nav-h) + 48px) var(--gutter) var(--ruimte)}
.tekst-pagina .kolom{max-width:720px;margin:0 auto}
.tekst-pagina h1{font-size:clamp(32px,4vw,48px);margin:0 0 var(--s4)}
.tekst-pagina dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s2) var(--s6);margin:var(--s6) 0}
.tekst-pagina dt{color:var(--muted);font-size:var(--t-14)}
.tekst-pagina dd{margin:0}
.tekst-pagina p{margin:0 0 var(--s4)}
.klein{font-size:var(--t-13);color:var(--muted)}
@media (max-width:560px){.tekst-pagina dl{grid-template-columns:1fr}.tekst-pagina dt{margin-top:var(--s2)}}

/* Beweging (8 november): scroll-gekoppeld, alleen transform, opacity en clip-path, zonder script. Bij "minder beweging" staat alles in
   zijn eindstand (de animaties staan dan uit). Het eerste hoofdstuk schuift als een afgeronde kaart over de hero, die intussen krimpt en
   dooft; koppen komen regel per regel; de week en de toestellen gaan open met een groeiende uitsnede. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-wrap{height:200svh}
    .hero{position:sticky;top:0;z-index:0;min-height:100svh}
    /* de brug: terwijl je het eerste scherm wegscrolt, zoomt het sfeerbeeld in en groeit het toestel tot in het scherm; kop en knoppen doven */
    .hero__beeld img{animation:hero-zoom linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes hero-zoom{to{transform:scale(1.22)}}
    .hero__kop{animation:hero-kop linear both;animation-timeline:scroll(root);animation-range:0 55svh}
    @keyframes hero-kop{to{opacity:0;transform:translateY(-24px)}}
    .hero__cta,.hero__regel,.hero__toestel .onderschrift{animation:hero-knop linear both;animation-timeline:scroll(root);animation-range:0 35svh}
    @keyframes hero-knop{to{opacity:0}}
    .hero__toestel .tel{transform-origin:50% 38%;animation:hero-tel linear both;animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes hero-tel{to{transform:translateY(-10svh) scale(1.5)}}
    /* dan schuift de oranje kaart erover en dooft de hero */
    .hero__in,.hero__halo,.hero__beeld{animation-name:hero-weg;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:100svh 200svh}
    .hero__beeld img{animation-name:hero-zoom}
    @keyframes hero-weg{to{opacity:.15}}
    .balk--kaart{position:relative;z-index:2;border-radius:28px 28px 0 0;box-shadow:0 -24px 60px -20px color-mix(in srgb,var(--mark) 60%,transparent)}
    .hoofdstuk,.balk,.slot,.voet{position:relative;z-index:1}
    .lockup .eyebrow,.lockup h2,.lockup .lead,.lockup .kies-rij{animation:kom-op .8s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .lockup h2{animation-delay:.05s}.lockup .lead{animation-delay:.1s}.lockup .kies-rij{animation-delay:.15s}
    @keyframes kom-op{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
    .week,.laptop--breed,.sector-foto img,.pf{animation:open linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes open{from{clip-path:inset(10% 6% round 28px);transform:translateY(32px) scale(.96);opacity:.6}to{clip-path:inset(0 0 round 8px);transform:none;opacity:1}}
    .pf{animation-name:open-kaart}
    @keyframes open-kaart{from{clip-path:inset(8% 6% round 24px);transform:translateY(24px);opacity:.6}to{clip-path:inset(0 0 round 8px);transform:none;opacity:1}}
    .bewijs__tekst,.sector-tekst,.stap,.pakket,.vraag-lijst{animation:kom-op .8s var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 50%}
    .stap{animation:none}
    .waaier .tel{animation:waaier linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
    @keyframes waaier{from{transform:translateY(40%) rotate(0deg);opacity:0}}
    .hero__halo{animation-name:halo-weg}
    @keyframes halo-weg{to{opacity:0}}
  }
}

/* de proefpagina van de toestellen (toestellen.html) */
.toestel-proef{margin:0}
.proef-vlak{display:grid;grid-template-columns:1fr;gap:48px;justify-items:center;padding:64px 24px}
@media (min-width:1200px){.proef-vlak{grid-template-columns:auto auto;align-items:end}}
.proef-vlak .laptop{--mw:min(1000px,100%)}
.proef-vlak .tel{--tw:min(340px,84vw)}
.proef-vlak--licht{background:var(--bg)}
.proef-vlak--donker{background:var(--kijker)}