/* Parkwatch site, ronde 14: dezelfde straat, zekerder van zichzelf.
   Merkblauw #0677D3 draagt de pagina; oranje #D95F00 (de kleur van betaalde zones in de app) is er alleen voor het pijnpunt.
   Geen engine, geen externe verzoeken. Beweging alleen met transform, opacity en een enkele blur. */
@font-face{font-family:"Inter";src:url(fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
 --ink:#14212B;--soft:#46555F;--blue:#0677D3;--blue-l:#2297F7;--blue-d:#04589F;--blue-ink:#0560B0;
 --sky:#E6F1FB;--tint:#F3F8FD;--line:#DCE6F0;--dusk:#12304F;--dusk-d:#0A1D33;
 --alert:#D95F00;--alert-t:#FFF1E3;--alert-ink:#7A3200;
 --g:clamp(1.25rem,5vw,5.5rem);--hb:76px;
 --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
 --ease:cubic-bezier(.22,1,.36,1);--out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.45,.5,1);
}
@supports (transition-timing-function:linear(0,1)){:root{--spring:linear(0,.38 7%,.86 15%,1.06 24%,1.07 31%,1.02 42%,.995 56%,1)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hb) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:500;color:var(--ink);background:#fff;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,table{margin:0}ul,ol{padding:0;list-style:none}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:84rem;margin-inline:auto;padding-inline:var(--g)}
.h1{font-weight:750;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.h2{font-weight:750;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.3rem,4.6vw,4.4rem);text-wrap:balance}
.lede{font-size:clamp(1.1rem,1.35vw,1.36rem);line-height:1.45;color:var(--soft);max-width:36ch;text-wrap:pretty}
.sec-kop{display:grid;gap:18px;max-width:52rem;margin-bottom:clamp(44px,6vw,88px)}
section{position:relative}
/* De pagina begint onder de zwevende menubalk: het eerste blok loopt erachter door. */
main{margin-top:calc(var(--hb)*-1)}

/* ---- menubalk: een pil die boven de pagina zweeft */
.top{position:sticky;top:0;z-index:60;height:var(--hb);padding:10px var(--g) 0;pointer-events:none}
.top-in{pointer-events:auto;position:relative;height:56px;max-width:78rem;margin-inline:auto;padding:0 7px 0 16px;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
 border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
 border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 1px rgba(8,40,80,.04),0 14px 34px -20px rgba(8,40,80,.42)}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-size:1.1rem;letter-spacing:-.02em;text-decoration:none;flex:none}
.mark-i{width:34px;height:34px;border-radius:10px;display:block}
.mark:hover span{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.nav{margin-inline:auto}
.nav ul{display:flex;gap:clamp(4px,1vw,12px)}
.nav a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:21px;font-size:.95rem;font-weight:600;color:var(--soft);text-decoration:none;transition:background 160ms var(--ease),color 160ms}
.nav a:hover{color:var(--ink);background:rgba(6,119,211,.08)}
.nav a[aria-current]{color:var(--blue-ink);background:rgba(6,119,211,.1)}
.dl{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:21px;background:var(--blue);color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 14px -8px rgba(6,119,211,.8);transition:transform 120ms var(--ease),background 120ms}
.dl:hover{background:var(--blue-d)}.dl:active{transform:scale(.97)}
.burger{display:none;flex:none;width:42px;height:42px;border:0;background:none;border-radius:21px;cursor:pointer;position:relative;padding:0}
.burger i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);transition:transform 200ms var(--ease),opacity 120ms}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:25px}
.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu-open .burger i:nth-child(2){opacity:0}.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---- badge */
.store{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.badge{display:inline-block;line-height:0;border-radius:9px;transition:transform 120ms var(--ease)}
a.badge:active{transform:scale(.97)}
.badge-svg{height:54px;width:auto;display:block}
.soon{font-size:.9rem;font-weight:600;color:var(--soft)}

/* ---- zichtbaar worden bij scrollen. Zonder JS of met minder beweging staat alles er gewoon. */
@media (prefers-reduced-motion:no-preference){
 .js .rv{transition:opacity 900ms var(--out),transform 1100ms var(--out)}
 .js .rv:not(.in){opacity:0;transform:translate3d(0,40px,0)}
}

/* ======================= hero: het verhaal in acht seconden =======================
   0,3 s auto rijdt de straat in en remt · 2,0 s knipperlichten (op slot) · 2,3 s voetstappen: je loopt weg
   2,9 s het bord licht op · 3,0 s de bon dreigt: € 74 · 3,9 s telefoon gaat aan · 4,0 s melding valt in en trilt
   5,3 s tik op de melding · 5,6 s de app: kaart met de oranje zone · 5,8 s blad schuift op
   6,9 s tik op Betaald · 7,2 s vinkje, de bon lost op · 7,6 s Pim springt op het dak · daarna rust.
   De standaardstijlen hieronder zijn de eindstand; de animaties lopen er alleen naartoe. */
.hero{--pw:clamp(240px,min(23vw,calc((100svh - var(--hb) - var(--kb) - 44px)/2.2)),340px);--cw:clamp(230px,21vw,320px);--kb:13vh;
 height:100svh;min-height:680px;max-height:1060px;overflow:hidden;background:var(--sky)}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,#BFDDF8 0%,#DDEDFB 50%,#F3F8FD 100%)}
.sun{position:absolute;left:78%;top:12%;width:clamp(110px,12vw,190px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFF3DA,#FFE2AE);opacity:.95}
.clouds{position:absolute;inset:-60px 0 auto 0;height:60%}
.cl{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w)*.2);border-radius:99px;background:#fff;opacity:.85}
.cl::before{content:"";position:absolute;left:20%;top:-60%;width:40%;aspect-ratio:1;border-radius:50%;background:#fff}
@media (prefers-reduced-motion:no-preference){.clouds{animation:drift 60s linear infinite alternate}}
@keyframes drift{to{transform:translate3d(-4vw,0,0)}}
.lay{position:absolute;left:50%;margin-left:-1200px;width:2400px;pointer-events:none}
.hz{width:2400px;height:auto;max-width:none;display:block}
.lay-far{bottom:6vh}.lay-mid{bottom:-2vh}
@media (min-width:861px){.lay-far,.lay-mid{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) calc(50% - 8vw),#000 calc(50% + 7vw));mask-image:linear-gradient(90deg,rgba(0,0,0,.28) 0,rgba(0,0,0,.28) calc(50% - 8vw),#000 calc(50% + 7vw))}}
.stage{position:absolute;inset:0;pointer-events:none;
 --px:73%;--cl:calc(var(--px) - var(--pw)/2 - var(--cw) - 36px)}
.kerb{position:absolute;left:0;right:0;bottom:-110px;height:calc(var(--kb) + 110px);overflow:hidden;
 background:linear-gradient(#E4ECF5 0 14px,#F6F9FC 14px 17px,#C2D2E2 17px 62%,#A5B9CE 62% 100%);box-shadow:0 -14px 22px -12px rgba(8,40,80,.22)}
.kerb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(110px + 5vh);background:linear-gradient(rgba(30,56,84,0),rgba(30,56,84,.34))}
/* bord: blauwe P met onderbord "betaald parkeren" */
.zwrap{position:absolute;left:calc(var(--cl) - 50px);bottom:calc(var(--kb) - 4px);height:min(36vh,330px);aspect-ratio:128/420;filter:drop-shadow(12px 6px 5px rgba(8,40,80,.2))}
.zbord{display:block;width:100%;height:100%}
.zring{position:absolute;left:4.7%;top:1.4%;width:90.6%;aspect-ratio:1;border-radius:14%;border:3px solid var(--alert);opacity:0}
/* auto */
.autow{position:absolute;left:var(--cl);bottom:calc(var(--kb) - 16px);width:var(--cw);z-index:1}
.kar{display:block;width:100%;height:auto;overflow:visible}
.kar-b{transform-box:fill-box;transform-origin:50% 100%}
.whl{transform-box:fill-box;transform-origin:50% 50%}
.lamp{opacity:0}
.kar-s{position:absolute;left:4%;right:2%;bottom:-6px;height:14px;border-radius:50%;background:rgba(8,40,80,.3);filter:blur(5px)}
/* voetstappen: je loopt weg */
.steps{position:absolute;left:calc(var(--cl) - var(--cw)*.05);bottom:calc(var(--kb) - 46px);width:calc(var(--cw)*.5);height:20px;display:flex;flex-direction:row-reverse;justify-content:space-between;z-index:2}
.steps i{width:11px;height:7px;border-radius:50%;background:#7E98B3;opacity:0}
.steps i:nth-child(odd){translate:0 -7px}
/* de bon die dreigt */
.bon{position:absolute;left:calc(var(--cl) + var(--cw)*.33);bottom:calc(var(--kb) + var(--cw)*.43);z-index:3;opacity:0;
 display:grid;justify-items:start;min-width:132px;padding:0 0 12px;border-radius:12px;background:#fff;overflow:hidden;
 box-shadow:0 18px 30px -14px rgba(122,50,0,.45),0 2px 6px rgba(8,40,80,.12);transform:rotate(-6deg)}
.bon-k{width:100%;padding:5px 12px;background:var(--alert);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bon b{padding:6px 12px 0;font-size:2rem;line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.bon-r{padding:4px 12px 0;font-size:.74rem;font-weight:600;color:var(--alert-ink)}
/* Pim op het dak, waar de bon was */
.pimstand{position:absolute;left:calc(var(--cl) + var(--cw)*.4);bottom:calc(var(--kb) - 16px + var(--cw)*.345);width:96px;z-index:2}
.pimstand .pim-hero{width:96px;height:96px;display:block;position:relative}
.pim-shadow{position:absolute;left:10px;right:10px;bottom:-3px;height:10px;border-radius:50%;background:rgba(8,40,80,.25);filter:blur(3px)}
/* telefoon */
.hero-phone{position:absolute;left:var(--px);bottom:calc(var(--kb) - 12px);width:var(--pw);translate:-50% 0;padding:7px;background:#0F1A24;border-radius:calc(var(--pw)*.115 + 7px);z-index:4;
 box-shadow:0 50px 90px -30px rgba(8,40,80,.55),0 4px 10px rgba(8,40,80,.18),inset 0 0 0 1.5px #2A3A49}
.hero-phone::before,.hero-phone::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(6,119,211,.55);opacity:0;pointer-events:none}
.hero-phone .pscreen{width:100%;font-size:calc((var(--pw) - 14px)/24.375);box-shadow:none}
/* de app: kaart met de oranje zone, rondje links, knop rechts, wit blad onderin */
.app{position:absolute;inset:0;background:#EEF1F4;overflow:hidden;transform-origin:50% 22%}
.kaart{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sb{position:absolute;left:2.2em;top:1em;font-size:.95em;font-weight:650;color:var(--ink)}
.kn{position:absolute;top:3.3em;width:2.75em;height:2.75em;border-radius:50%;background:#fff;box-shadow:0 .35em .9em -.35em rgba(8,40,80,.4);display:flex;align-items:center;justify-content:center;gap:.2em}
.kn-l{left:1em}.kn-l i{width:.3em;height:.3em;border-radius:50%;background:var(--ink)}
.kn-r{right:1em}.kn-r svg{width:1.15em;height:1.15em}
.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:flex-start;padding:.7em 1.25em 2.1em;background:#fff;border-radius:1.6em 1.6em 0 0;box-shadow:0 -.5em 2em -1em rgba(8,40,80,.35)}
.grab{align-self:center;width:2.4em;height:.3em;border-radius:.15em;background:#C3CBD3;margin-bottom:.9em}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.32em .75em;border-radius:99px;background:var(--alert-t);color:var(--alert-ink);font-weight:700;font-size:.8em}
.chip i{width:.55em;height:.55em;border-radius:50%;background:var(--alert)}
.sh-t{margin-top:.55em;font-size:1.45em;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.sh-l{margin-top:.2em;font-size:.88em;color:#5B6872}
.sh-q{margin-top:.75em;font-size:.94em;font-weight:700}
.knoppen{margin-top:1em;width:100%;display:grid;gap:.6em}
.hero .knoppen{opacity:0}
.bt{position:relative;display:grid;place-items:center;height:2.9em;border-radius:1.45em;font-weight:700;font-size:.95em}
.bt.pri{background:linear-gradient(#0677D3,#0B7CDA);color:#fff}
.bt.out{box-shadow:inset 0 0 0 .1em #C5CDD6;color:var(--ink)}
.bt.pri::after,.ntf::after{content:"";position:absolute;left:50%;top:50%;width:3em;height:3em;margin:-1.5em 0 0 -1.5em;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;pointer-events:none}
.ntf::after{background:rgba(6,119,211,.3)}
.ok{position:absolute;left:1.25em;right:1.25em;bottom:2.1em;height:6.4em;display:flex;align-items:center;justify-content:center;gap:.55em;color:var(--blue-ink);font-weight:750;font-size:1.05em}
.ok i{width:2.3em;height:2.3em;border-radius:50%;background:var(--blue);display:grid;place-items:center;box-shadow:0 .4em .9em -.4em rgba(6,119,211,.8)}
.ok svg{width:1.3em;height:1.3em}
/* kop */
.hero-copy{position:absolute;left:var(--g);top:calc(var(--hb) + clamp(36px,8vh,104px));width:min(52vw,46rem);z-index:5}
.hero-copy .h1{font-size:clamp(3.1rem,6.3vw,6rem)}
.hero-copy .h1 .ln:nth-child(2){color:var(--blue)}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:block;animation:lineIn 1000ms var(--out) both}
.ln:nth-child(2)>span{animation-delay:120ms}
@keyframes lineIn{from{transform:translate3d(0,105%,0)}to{transform:none}}
.hero-copy .lede{margin-top:clamp(18px,2.6vh,30px);max-width:28ch;color:#3B4A55;font-size:clamp(1.12rem,1.45vw,1.42rem)}
.hero-copy .store{margin-top:clamp(22px,3.6vh,40px)}
@keyframes fadeIn{from{opacity:0;transform:translate3d(0,6px,0)}}

@media (prefers-reduced-motion:no-preference){
 .js .hero.play .autow,.js .hero.play .kar-s{animation:drive 780ms cubic-bezier(.14,.72,.22,1) .15s both}
 .js .hero.play .whl{animation:spin 780ms cubic-bezier(.14,.72,.22,1) .15s both}
 .js .hero.play .kar-b{animation:brake 350ms var(--ease) .81s both}
 .js .hero.play .lamp{animation:blink 380ms linear 1s both}
 .js .hero.play .steps i{animation:walk 1.2s var(--ease) both}
 .js .hero.play .steps i:nth-child(1){animation-delay:1.15s}.js .hero.play .steps i:nth-child(2){animation-delay:1.23s}.js .hero.play .steps i:nth-child(3){animation-delay:1.31s}
 .js .hero.play .steps i:nth-child(4){animation-delay:1.39s}.js .hero.play .steps i:nth-child(5){animation-delay:1.47s}.js .hero.play .steps i:nth-child(6){animation-delay:1.55s}
 .js .hero.play .zring{animation:ring 550ms var(--out) 1.45s 2 both}
 .js .hero.play .bon{animation:bon 2.85s linear 1.5s both}
 .js .hero.play .hero-phone{animation:rise 650ms var(--out) .05s both,buzz 380ms linear 2.02s 1}
 .js .hero.play .hero-phone::before{animation:ring2 650ms var(--out) 2.02s both}
 .js .hero.play .hero-phone::after{animation:ring2 650ms var(--out) 2.17s both}
 .js .hero.play .dim{animation:wake 400ms var(--ease) 1.92s both}
 .js .hero.play .ntf{animation:drop 420ms var(--spring) 2s both,press 150ms var(--ease) 3.15s 1}
 .js .hero.play .ntf::after{animation:tap 330ms var(--out) 3.12s both}
 .js .hero.play .app{animation:appIn 300ms var(--out) 3.3s both}
 .js .hero.play .sheet{animation:sheetUp 430ms var(--spring) 3.4s both}
 .js .hero.play .knoppen{animation:knop 4.3s linear both}
 .js .hero.play .bt.pri{animation:press 150ms var(--ease) 3.97s 1}
 .js .hero.play .bt.pri::after{animation:tap 330ms var(--out) 3.95s both}
 .js .hero.play .ok{animation:okIn 310ms var(--spring) 4.13s both}
 .js .hero.play .pimstand{animation:pimIn 380ms var(--spring) 4.3s both}
 /* Herhalen: de eindstand blijft even staan, dan vervaagt de scène zacht en begint hij opnieuw (pagina.js). */
 .js .hero .stage{transition:opacity 600ms ease-in-out}
 .js .hero.fade .stage{opacity:0}
}
@keyframes drive{from{transform:translate3d(-110vw,0,0)}to{transform:none}}
@keyframes spin{from{transform:rotate(-1260deg)}to{transform:none}}
@keyframes brake{0%{transform:none}35%{transform:translate3d(0,2px,0) rotate(1deg)}70%{transform:translate3d(0,-1px,0) rotate(-.35deg)}100%{transform:none}}
@keyframes blink{0%,100%{opacity:0}12%,30%{opacity:1}42%{opacity:0}58%,76%{opacity:1}88%{opacity:0}}
@keyframes walk{0%{opacity:0;transform:scale(.3)}12%{opacity:.8;transform:none}70%{opacity:.8}100%{opacity:0}}
@keyframes ring2{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
@keyframes bon{
 0%{opacity:0;transform:translate3d(0,22px,0) rotate(0) scale(.86);filter:blur(0)}
 7.4%{opacity:1;transform:translate3d(0,-4px,0) rotate(-8deg) scale(1.02)}
 11%{transform:translate3d(0,0,0) rotate(-5deg) scale(1)}
 15%{transform:rotate(-7deg)}19%{transform:rotate(-6deg)}
 88%{opacity:1;transform:rotate(-6deg) scale(1);filter:blur(0)}
 100%{opacity:0;transform:translate3d(0,-18px,0) rotate(-6deg) scale(.7);filter:blur(8px)}}
@keyframes rise{from{transform:translate3d(0,70px,0)}to{transform:none}}
@keyframes wake{from{opacity:.32}to{opacity:0}}
@keyframes drop{from{opacity:0;transform:translate3d(0,-4.6em,0) scale(.96)}30%{opacity:1}to{opacity:1;transform:none}}
@keyframes press{0%,100%{transform:none}45%{transform:scale(.96)}}
@keyframes tap{0%{opacity:0;transform:scale(.3)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@keyframes appIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translate3d(0,105%,0)}to{transform:none}}
@keyframes knop{0%,96%{opacity:1;transform:none}100%{opacity:0;transform:scale(.94)}}
@keyframes okIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes pimIn{0%{opacity:0;transform:translate3d(0,30px,0) scale(.3)}100%{opacity:1;transform:none}}
@keyframes buzz{0%{transform:none}7%{transform:translate3d(-5px,2px,0) rotate(-.3deg)}15%{transform:translate3d(5px,-2px,0) rotate(.3deg)}25%{transform:translate3d(-4px,2px,0) rotate(-.22deg)}36%{transform:translate3d(4px,-1px,0) rotate(.2deg)}48%{transform:translate3d(-2px,1px,0)}62%{transform:translate3d(2px,0,0)}100%{transform:none}}

/* ======================= pijnpunten ======================= */
.pijn{overflow:clip;background:#fff;padding-block:clamp(96px,12vw,176px)}
.pijn-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,104px);align-items:start}
.pijn-kop{position:sticky;top:calc(var(--hb) + 48px);display:grid;gap:18px}
.pijn-kop .h2{font-size:clamp(3rem,7vw,6rem);letter-spacing:-.045em;line-height:.94}
.pijn-kop .lede{font-size:clamp(1.15rem,1.5vw,1.45rem)}
.pijn-lijst{counter-reset:p}
.pijn-lijst li{position:relative;padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) clamp(52px,5vw,76px);border-top:1px solid var(--line);font-weight:750;letter-spacing:-.03em;line-height:1.1;font-size:clamp(1.55rem,3vw,2.75rem);text-wrap:balance}
.pijn-lijst li:last-child{border-bottom:1px solid var(--line)}
.pijn-lijst li::before{content:"";position:absolute;left:0;top:calc(clamp(26px,3vw,40px) + .14em);width:clamp(28px,2.4vw,38px);aspect-ratio:1;border-radius:30%;
 background:var(--alert-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6.5v7' stroke='%23D95F00' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.8' fill='%23D95F00'/%3E%3C/svg%3E") center/62% no-repeat}
/* Elke regel licht op als hij het midden van het scherm bereikt. */
@supports (animation-timeline:view()){
 @media (prefers-reduced-motion:no-preference){
  .pijn-lijst li{animation:lightUp linear both;animation-timeline:view();animation-range:entry 10% cover 42%}
  @keyframes lightUp{from{color:#8796A3;transform:translate3d(24px,0,0)}to{color:var(--ink);transform:none}}
 }
}

/* ---- band met de App Store-knop: het merkblauw draagt het hele vlak */
.cta{background:var(--blue);color:#fff;overflow:hidden}
.cta::before{content:"";position:absolute;right:-6vw;top:50%;width:min(38vw,520px);aspect-ratio:1;translate:0 -50%;border-radius:30%;background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,0) 70%);rotate:12deg;pointer-events:none}
.cta{position:relative}
.cta-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px 48px;padding-block:clamp(48px,6.5vw,92px);flex-wrap:wrap}
.cta-t{font-weight:750;letter-spacing:-.035em;line-height:1.04;font-size:clamp(1.9rem,3.8vw,3.4rem);max-width:20ch;text-wrap:balance}
.cta .soon{color:#D6E9FB}
.cta .badge{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 14px 30px -14px rgba(0,20,50,.6)}

/* ======================= hoe het werkt ======================= */
.hoe{background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);padding-block:clamp(96px,12vw,176px)}
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);position:relative;counter-reset:s}
.stappen::before{content:"";position:absolute;left:4%;right:12%;top:clamp(130px,12.5vw,190px);border-top:3px dashed #B7D2EC;z-index:0;transform-origin:0 50%}
.stp{position:relative;z-index:1;display:grid;justify-items:start;align-content:start;gap:28px}
.sph{position:relative;width:min(100%,clamp(180px,18vw,260px));padding:6px;background:#0F1A24;border-radius:calc(clamp(180px,18vw,260px)*.115 + 6px);box-shadow:0 40px 70px -30px rgba(8,40,80,.5),0 3px 8px rgba(8,40,80,.14),inset 0 0 0 1.5px #2A3A49}
/* Vast vak voor de schermafbeelding: 390 × 844. Een nieuwe afbeelding met dezelfde naam valt er precies in. */
/* De drie schermen zijn HTML in de stijl van de app van nu (kaart met blad). Vaste maat 390 × 844, letters schalen mee met de breedte. */
.sph .cq{container-type:inline-size}
.sph .pscreen{width:100%;font-size:calc(100cqw/24.375);border-radius:11.5cqw;box-shadow:none}
.scr .sheet{padding-bottom:1.6em}
.chip.neutraal{background:#EDEFF3;color:#46525D}
.sh-p{margin-top:.45em;font-size:.88em;line-height:1.45;color:#5B6872}
.sh-kop{display:flex;align-items:center;gap:.6em;width:100%;margin-top:.55em}
.sh-kop .sh-t{margin-top:0;flex:1}
.sh-pim{width:2.5em;height:2.5em;flex:none}
.cd{width:100%;margin-top:1em;display:grid;grid-template-columns:1fr auto;gap:.45em .5em;font-size:.78em;color:#5B6872;font-weight:600}
.cd i{grid-column:1/-1;height:.45em;border-radius:.25em;background:#E6E9ED;overflow:hidden}
.cd b{display:block;width:20%;height:100%;border-radius:inherit;background:var(--blue)}
.knop1{width:100%;margin-top:1.1em;display:grid;gap:.6em}
.sph::after{counter-increment:s;content:counter(s);position:absolute;right:-22px;top:-22px;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:1.3rem;box-shadow:0 0 0 6px #fff,0 10px 20px -8px rgba(6,119,211,.7)}
.stx h3{font-size:clamp(1.5rem,2.2vw,2.1rem);font-weight:750;letter-spacing:-.03em;line-height:1.08}
.stx p{margin-top:12px;color:var(--soft);font-size:1.08rem;line-height:1.55;max-width:26ch;text-wrap:pretty}
.noot{margin-top:clamp(44px,6vw,80px);display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:600;color:var(--soft);font-size:1.05rem}
.noot::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--blue);flex:none}
@media (prefers-reduced-motion:no-preference){
 .js .stappen .stp{transition:opacity 800ms var(--out),transform 1100ms var(--out)}
 .js .stappen:not(.in) .stp{opacity:0;transform:translate3d(0,64px,0)}
 .js .stappen .stp:nth-child(2){transition-delay:140ms}.js .stappen .stp:nth-child(3){transition-delay:280ms}
 .js .stappen::before{transition:transform 1400ms var(--out) 300ms}
 .js .stappen:not(.in)::before{transform:scaleX(0)}
}

/* ======================= afsluiting: de deur dicht ======================= */
.finale{--pw:clamp(230px,21vw,290px);min-height:840px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#0B2038 0%,#12304F 62%,#173B62 100%);padding-top:clamp(96px,11vw,150px)}
.dusk{position:absolute;inset:0}
.moon{position:absolute;left:52%;top:8%;width:clamp(56px,6vw,96px);aspect-ratio:1;border-radius:50%;background:#EAF2FB;opacity:.92;box-shadow:0 0 60px 10px rgba(234,242,251,.12)}
.lay-dfar{bottom:150px}.lay-dmid{bottom:110px}
@media (min-width:861px){.lay-dfar,.lay-dmid{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) 44%,#000 64%);mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0,rgba(0,0,0,.14) 44%,#000 64%)}}
.road{position:absolute;left:0;right:0;bottom:0;height:150px;background:var(--dusk-d);border-top:5px solid #1D4A78;overflow:hidden}
.dash{position:absolute;left:0;right:0;top:62%;height:6px;background:repeating-linear-gradient(90deg,#5E93C6 0 64px,transparent 64px 112px);opacity:.7}
.carw{position:absolute;left:clamp(24px,7vw,120px);bottom:112px;width:64px;height:80px;transform-origin:50% 100%;z-index:2}
.carw .car{width:64px;height:80px;display:block;overflow:visible}
.trail{position:absolute;left:calc(clamp(24px,7vw,120px) + 90px);bottom:84px;display:flex;gap:clamp(14px,2.4vw,30px);z-index:2}
.trail i{width:12px;height:12px;border-radius:50%;background:#7FB6EA;opacity:.0}
.finale-in{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:start;padding-bottom:210px}
.fin-copy{display:grid;gap:clamp(20px,2.6vw,32px);justify-items:start;align-content:start}
.fin-copy .h1{font-size:clamp(3.2rem,7.4vw,6rem);letter-spacing:-.045em;line-height:.94}
.fin-copy .lede{color:#C7DDF3}
.momenten{display:grid;gap:16px;max-width:34rem}
.momenten li{padding-left:46px;position:relative;line-height:1.45;color:#C7DDF3;font-size:1.06rem}
.momenten li b{color:#fff;font-weight:700}
.momenten{counter-reset:m}
.momenten li::before{content:counter(m);counter-increment:m;position:absolute;left:0;top:0;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#1E4A78;box-shadow:inset 0 0 0 2px #2F6CA5;font-size:.85rem;font-weight:700;color:#fff}
.fin-copy .store .badge{box-shadow:0 0 0 1px rgba(255,255,255,.35)}.fin-copy .soon{color:#fff}
.fin-phone{display:flex;justify-content:center;align-self:end;margin-bottom:-110px}
.pwrap{position:relative;width:var(--pw)}
.pscreen{position:relative;width:var(--pw);aspect-ratio:390/844;font-size:calc(var(--pw)/24.375);border-radius:calc(var(--pw)*.115);overflow:hidden;box-shadow:0 0 0 7px #08131F,0 50px 100px -24px rgba(0,0,0,.65);background:#08131F}
.pscreen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dim{position:absolute;inset:0;background:#04101C;opacity:0}
.ntf{position:absolute;left:.7em;right:.7em;top:14.4em;border-radius:1.6em;padding:.85em 1em .9em;color:#0E1822;
 background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(240,244,250,.36));-webkit-backdrop-filter:blur(1.5em) saturate(1.9) brightness(1.08);backdrop-filter:blur(1.5em) saturate(1.9) brightness(1.08);
 box-shadow:inset 0 0 0 .06em rgba(255,255,255,.5),inset 0 .08em 0 rgba(255,255,255,.7),inset 0 -.06em .2em rgba(255,255,255,.18),0 .5em 1.4em -.6em rgba(4,16,28,.35);overflow:hidden}
.ntf .n{display:flex;gap:.7em;align-items:flex-start}
.ntf .app-i{width:2.1em;height:2.1em;flex:none;margin-top:.05em;border-radius:.55em}
.ntf .nt{flex:1;min-width:0}
.ntf .hd{display:flex;align-items:baseline;gap:.5em;font-size:.8em;line-height:1.3;color:rgba(14,24,34,.62);font-weight:600}
.ntf .hd span{flex:1}
.ntf .t{margin-top:.08em;font-weight:650;font-size:.94em;line-height:1.28}
.ntf .st{font-size:.875em;line-height:1.32;font-weight:600}
.ntf .m{font-size:.875em;line-height:1.32;color:rgba(14,24,34,.78)}
.pim-pop{position:absolute;right:calc(var(--pw)*-.4);top:calc(var(--pw)*.9);width:130px;z-index:4;transform:rotate(6deg)}
.pim-pop .pim-pop-i{width:130px;height:130px;display:block}
/* Met JS begint de scène stil. Zonder JS of met verminderde beweging staat de eindstand er meteen. */
.js .melding:not(.go) .ntf{opacity:0;transform:translate3d(0,-4.4em,0) scale(.97)}
.js .melding:not(.go) .dim{opacity:.32}
.js .finale:not(.go) .pim-pop{opacity:0;transform:translate3d(-30px,24px,0) scale(.5)}
.melding .ntf{transition:opacity 110ms var(--ease) var(--nd,1.35s),transform 350ms var(--spring) var(--nd,1.35s)}
.melding .dim{transition:opacity 260ms var(--ease) var(--nd,1.35s)}
.pim-pop{transition:opacity 100ms 1.43s,transform 320ms var(--spring) 1.43s}
.go .momenten li{animation:mom 250ms var(--ease) both}
.go .momenten li:nth-child(2){animation-delay:.45s}.go .momenten li:nth-child(3){animation-delay:1.3s}
.js .finale:not(.go) .momenten li:nth-child(n+2){opacity:.38}
.js .finale:not(.go) .momenten li:nth-child(1){opacity:.38}
@keyframes mom{from{opacity:.38}to{opacity:1}}
.go .carw{animation:plant 260ms var(--ease) .1s 1 both}
@keyframes plant{0%{transform:scale(1,1)}30%{transform:scale(1.14,.84)}60%{transform:scale(.94,1.1)}100%{transform:scale(1,1)}}
.go .trail i{animation:step 180ms var(--ease) both}
.go .trail i:nth-child(1){animation-delay:0.45s}.go .trail i:nth-child(2){animation-delay:0.55s}.go .trail i:nth-child(3){animation-delay:0.65s}.go .trail i:nth-child(4){animation-delay:0.75s}
.go .trail i:nth-child(5){animation-delay:0.85s}.go .trail i:nth-child(6){animation-delay:0.95s}.go .trail i:nth-child(7){animation-delay:1.05s}.go .trail i:nth-child(8){animation-delay:1.15s}
@keyframes step{from{opacity:0;transform:scale(.4)}to{opacity:.85;transform:none}}
.go .pwrap{animation:buzz 380ms linear 1.35s 1}
.finale:not(.go) .trail i{opacity:0}
.nu .trail i{opacity:.85;animation:none}
.go.nu .carw,.go.nu .pwrap,.go.nu .momenten li{animation:none}
.go.nu .ntf,.go.nu .dim,.go.nu .pim-pop{transition:none}

/* ======================= voet: de weg loopt door in de nacht ======================= */
.foot{background:var(--dusk-d);color:#C7DDF3;padding-block:clamp(56px,6vw,88px) clamp(40px,4vw,56px)}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:start}
.foot-brand{display:grid;gap:14px}.foot-brand .mark{color:#fff}
.foot-brand p{color:#fff;font-weight:750;letter-spacing:-.035em;line-height:1.02;font-size:clamp(1.8rem,3.4vw,3rem);max-width:14ch}
.foot nav ul{display:flex;flex-wrap:wrap;gap:6px 24px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;color:#C7DDF3}.foot nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:.22em}
.fine{grid-column:1/-1;text-align:center;text-wrap:balance;font-size:.95rem;line-height:1.65;color:#DCEAF8;padding:28px max(0px,calc((100% - 68ch)/2)) 0;border-top:1px solid #1D3B5C}

/* ======================= blog en losse pagina's ======================= */
.blog-kop{background:linear-gradient(180deg,#BFDDF8 0%,#E6F1FB 70%,#fff 100%);padding-block:calc(var(--hb) + clamp(56px,8vw,112px)) clamp(48px,6vw,80px)}
.blog-kop .h1{font-size:clamp(3.2rem,8vw,6rem)}.blog-kop .lede{margin-top:18px}
.blog-lijst{padding-block:clamp(32px,4vw,64px) clamp(72px,8vw,120px)}
.bl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.bk{position:relative;display:grid;gap:14px;align-content:start;height:100%;padding:clamp(26px,2.6vw,36px);border-radius:28px;text-decoration:none;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -36px rgba(8,40,80,.4);transition:transform 260ms var(--out),box-shadow 260ms var(--out)}
.bk:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px #B9D3EC,0 34px 60px -30px rgba(8,40,80,.45)}
.bk-m{justify-self:start;padding:5px 12px;border-radius:99px;background:var(--sky);font-size:.8rem;font-weight:700;color:var(--blue-ink)}
.bk h2{font-size:clamp(1.4rem,1.9vw,1.85rem);font-weight:750;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.bk p{color:var(--soft);line-height:1.55;font-size:1rem;text-wrap:pretty}
.bk-l{margin-top:8px;font-weight:700;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.bk-l::after{content:"→";transition:transform 260ms var(--out)}.bk:hover .bk-l::after{transform:translateX(5px)}
.art{background:linear-gradient(180deg,#CFE5FA 0,#EAF3FC 360px,#fff 640px);padding-block:calc(var(--hb) + clamp(48px,7vw,104px)) clamp(64px,8vw,120px)}
.art-in{max-width:48rem}
.terug{margin-bottom:28px}.terug a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:21px;background:rgba(255,255,255,.75);font-weight:650;color:var(--blue-ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(6,119,211,.14)}.terug a:hover{background:#fff}
.art h1{font-size:clamp(2.5rem,6vw,4.6rem)}
.art-m{margin-top:18px;font-size:.9rem;font-weight:650;color:var(--soft)}
.art-intro{margin-top:28px;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.5;color:var(--ink);text-wrap:pretty}
.art h2{margin-top:clamp(40px,5vw,60px);font-size:clamp(1.55rem,2.6vw,2.2rem);font-weight:750;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.art p{margin-top:14px;font-size:1.1rem;line-height:1.72;color:#2A3944;text-wrap:pretty}
.art-intro+p{margin-top:22px}
.art ul{margin-top:16px;display:grid;gap:8px}
.art li{position:relative;padding-left:26px;font-size:1.1rem;line-height:1.6;color:#2A3944}
.art li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;border-radius:3px;background:var(--blue)}
.art a{color:var(--blue-ink);font-weight:650}
.art-over{margin-top:clamp(44px,5vw,68px);padding:clamp(22px,2.6vw,32px);border-radius:24px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
.art-over h2{margin:0;font-size:1.25rem}.art-over p{margin-top:8px;font-size:1rem;line-height:1.55}.art-over a{color:var(--blue);font-weight:700}
/* gemeenten als bordjes */
.art ul.gem{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.art .gem li{padding:10px 18px 10px 40px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 8px 18px -14px rgba(8,40,80,.4);font-weight:700;font-size:1.05rem;color:var(--ink)}
.art .gem li::before{left:16px;top:50%;margin-top:-6px;width:12px;height:12px;border-radius:4px}
#lijst-actief li::before{background:var(--blue)}

/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;background:linear-gradient(180deg,#BFDDF8 0%,#E6F1FB 60%,#F3F8FD 100%);padding:calc(var(--hb) + 48px) var(--g) 64px}
.nf-in{max-width:36rem}.nf-in .h1{font-size:clamp(2.6rem,6vw,4.4rem);margin-top:24px}.nf-in .lede{margin-top:16px}
.pim-nf{width:120px;height:120px;display:block}
.back{display:inline-flex;align-items:center;height:54px;margin-top:30px;padding:0 26px;border-radius:27px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 24px -12px rgba(6,119,211,.8)}
.back:hover{background:var(--blue-d)}

/* ======================= tablet en telefoon ======================= */
@media (max-width:1100px){
 .bl{grid-template-columns:1fr}
}
@media (max-width:980px){
 .burger{display:block;margin-left:auto;order:3}
 .dl{order:2;margin-left:auto}
 .burger{margin-left:0}
 .nav{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;background:#fff;border-radius:24px;box-shadow:0 30px 50px -24px rgba(8,40,80,.4),inset 0 0 0 1px var(--line);padding:8px;display:none}
 html.js.menu-open .nav{display:block}
 html:not(.js) .nav{position:static;display:block;box-shadow:none;padding-block:0 8px;background:none}
 html:not(.js) .top{height:auto}
 html:not(.js) .top-in{flex-wrap:wrap;height:auto;padding-block:10px;border-radius:24px}
 .nav ul{flex-direction:column;gap:2px}
 .nav a{width:100%;min-height:50px;font-size:1.08rem;padding:0 16px;border-radius:16px}
 .pijn-in{grid-template-columns:1fr}
 .pijn-kop{position:static}
}
@media (max-width:860px){
 :root{--hb:66px}
 .top{padding:8px 12px 0}.top-in{height:50px;padding:0 5px 0 12px}
 .dl{height:40px}.burger{width:40px;height:40px}.burger i{left:11px;right:11px}.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:19px}.burger i:nth-child(3){top:24px}
 .badge-svg{height:50px}
 /* hero: kop bovenaan, scène eronder: auto links, telefoon rechts uit het trottoir */
 .hero{--pw:min(55vw,216px);--cw:min(41vw,170px);--kb:11vh;min-height:0;height:100svh;max-height:none}
 .stage{--px:69%;--cl:2%}
 .hero-copy{left:var(--g);right:var(--g);width:auto;top:calc(var(--hb) + clamp(20px,4svh,48px))}
 .hero-copy .h1{font-size:clamp(2.6rem,12.4vw,3.5rem)}
 .hero-copy .lede{font-size:1.06rem;margin-top:14px}
 .hero-copy .store{margin-top:18px}
 .sun{left:auto;right:6%;top:44%;width:80px}
 .hz{width:1500px}.lay:not(.lay-front){width:1500px;margin-left:-750px}
 .lay-far{bottom:4vh}.lay-mid{bottom:-3vh}
 .hero-phone{bottom:auto;top:calc(var(--hb) + 318px);padding:6px}
 .zwrap{left:calc(var(--cw)*.5);height:24svh;filter:drop-shadow(8px 4px 4px rgba(8,40,80,.2))}
 .bon{left:calc(var(--cl) + var(--cw)*.12);min-width:104px;border-radius:10px}
 .bon b{font-size:1.55rem}.bon-k{font-size:.62rem;padding:4px 10px}.bon-r{font-size:.66rem;padding:3px 10px 0}.bon b{padding:5px 10px 0}
 .pimstand{left:calc(var(--cl) + var(--cw)*.3);width:64px}.pimstand .pim-hero{width:64px;height:64px}
 .steps{display:none}
 .stappen{grid-template-columns:1fr;gap:56px}
 .stappen::before{display:none}
 .stp{grid-template-columns:min(40vw,170px) 1fr;align-items:center;gap:26px}
 .sph{width:min(40vw,170px);padding:5px;border-radius:calc(min(40vw,170px)*.115 + 5px)}

 .sph::after{width:42px;height:42px;right:-14px;top:-14px;font-size:1.1rem;box-shadow:0 0 0 5px var(--tint),0 8px 16px -8px rgba(6,119,211,.7)}
 .stx p{max-width:none}
 .cta-in{flex-direction:column;align-items:flex-start}
 .cta::before{width:70vw;right:-30vw}
 /* afsluiting: tekst boven, telefoon onderin, weg erachter */
 .finale{--pw:min(62vw,250px);min-height:0}
 .finale-in{grid-template-columns:1fr;padding-bottom:150px}
 .fin-phone{margin-bottom:-120px;justify-content:center;margin-top:12px}
 .road{height:130px}.lay-dfar{bottom:130px}.lay-dmid{bottom:92px}.dusk .hz{width:1500px}
 .trail{display:none}
 .moon{left:auto;top:64px;right:7%;width:46px}
 .carw{display:none}
 .pim-pop{right:calc(var(--pw)*-.2);top:calc(var(--pw)*1.1);width:96px}.pim-pop .pim-pop-i{width:96px;height:96px}
 .foot-in{grid-template-columns:1fr}
}
@media (max-width:480px){
 .mark span{display:none}
 .dl{padding:0 14px;font-size:.82rem}
 .top-in{gap:8px}
 .stp{grid-template-columns:38vw 1fr;gap:20px}
 .sph{width:38vw;border-radius:calc(38vw*.115 + 5px)}
}
@media (min-width:600px) and (max-width:860px){
 .hero{--pw:min(42vw,320px);--cw:min(30vw,240px)}.hero-copy .h1{font-size:4rem}.hero-copy .lede{font-size:1.2rem;max-width:30ch}
 .stage{--px:70%;--cl:4%}
 .hero-phone{top:calc(var(--hb) + 380px)}
 .zwrap{height:30svh}.hz{width:2000px}.lay:not(.lay-front){width:2000px;margin-left:-1000px}
}
@media (max-width:860px) and (max-height:720px){
 .hero{--pw:min(50vw,210px);--cw:min(36vw,150px)}.hero-copy .h1{font-size:2.3rem}.hero-copy .lede{font-size:.95rem;margin-top:10px}.hero-copy .store{margin-top:14px}
 .hero-phone{top:calc(var(--hb) + 250px)}.zwrap{height:20svh}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .ln>span{animation:none}
 .go .carw,.go .pwrap,.go .momenten li,.go .trail i{animation:none}
 .ntf,.dim,.pim-pop{transition:none!important}
 .trail i{opacity:.85!important}
}

/* ======================= wachtlijst: direct na de hero en op /wachtlijst =======================
   Links het plaatsnaambord dat meeschrijft met je stad, rechts het formulier. Foutregels hebben hun plek al,
   en de bedankt-staat ligt in dezelfde gridcel als het formulier: niets verspringt.
   Zonder JS: gewoon POST, de server stuurt terug naar #wl-bedankt of #wl-fout (:target). */
.wl{background:var(--tint);padding-block:clamp(72px,9vw,140px);border-bottom:1px solid var(--line)}
.wl-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:center}
.wl-kop{display:grid;gap:18px;align-content:start;justify-items:start}
.wl-pagina{background:linear-gradient(180deg,#CFE5FA 0,#EAF3FC 360px,var(--tint) 640px);padding-top:calc(var(--hb) + clamp(48px,7vw,104px))}
.wl-pagina .h1{font-size:clamp(2.5rem,6vw,4.6rem)}
/* plaatsnaambord: blauw met witte rand, zoals bij de bebouwde kom */
.wl-bord{--bw:clamp(260px,25vw,368px);--n:9;margin-top:clamp(20px,3vw,40px);display:grid;justify-items:center;width:var(--bw);filter:drop-shadow(12px 8px 6px rgba(8,40,80,.18))}
.wl-bord-v{position:relative;z-index:1;width:100%;padding:7px;border-radius:14px;background:var(--blue)}
.wl-bord-t{display:grid;place-items:center;height:calc(var(--bw)*.3);padding:0 14px;border:3px solid #fff;border-radius:9px;color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;white-space:nowrap;overflow:hidden;
 font-size:min(calc(var(--bw)*.11),calc((var(--bw) - 54px)*1.42/var(--n)))}
.wl-bord-v::after{content:"op de wachtlijst";position:absolute;left:50%;top:calc(100% + 10px);translate:-50% 0;padding:6px 14px;border-radius:7px;background:#fff;color:var(--blue-ink);font-weight:750;font-size:.92rem;white-space:nowrap;box-shadow:inset 0 0 0 2px var(--blue);opacity:0;transform:translateY(-8px) scale(.96)}
.wl-paal{display:block;width:12px;height:clamp(64px,7vw,96px);background:linear-gradient(90deg,#8EA1B3,#DCE4EC 45%,#9AACBD)}
.wl-bord.is-op .wl-bord-v::after{opacity:1;transform:none;transition:opacity 300ms var(--out) 120ms,transform 500ms var(--spring) 120ms}
/* kaart */
.wl-kaart{position:relative;display:grid;padding:clamp(24px,3vw,40px);border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px rgba(8,40,80,.5)}
.wl-form,.wl-ok{grid-area:1/1;min-width:0}
.wl-form{display:grid;gap:10px}
.wl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.wl-veld{display:grid;gap:8px}
.wl-veld label{font-weight:650;font-size:1rem;color:var(--ink)}
.wl-veld input{width:100%;height:56px;padding:0 18px;font:inherit;font-size:1.06rem;font-weight:500;color:var(--ink);background:#fff;border:1.5px solid #8193A5;border-radius:16px;
 transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease);-webkit-appearance:none;appearance:none}
.wl-veld input::-webkit-calendar-picker-indicator{opacity:0}
.wl-veld input:hover{border-color:var(--soft)}
.wl-veld input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(6,119,211,.2)}
.wl-veld input[aria-invalid=true]{border-color:#B54D00}
.wl-veld input[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(217,95,0,.2)}
.wl-f{min-height:1.4rem;font-size:.9rem;line-height:1.4rem;font-weight:600;color:var(--alert-ink)}
.wl-knop{position:relative;margin-top:8px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 28px;border:0;border-radius:29px;background:var(--blue);color:#fff;font:inherit;font-size:1.06rem;font-weight:700;cursor:pointer;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 24px -12px rgba(6,119,211,.8);transition:transform 120ms var(--ease),background 120ms}
.wl-knop:hover{background:var(--blue-d)}.wl-knop:active{transform:scale(.98)}
.wl-knop[aria-busy=true]{background:var(--blue-d);cursor:progress}
.wl-knop[aria-busy=true]::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:wl-draai 700ms linear infinite}
@keyframes wl-draai{to{transform:rotate(1turn)}}
/* De melding na versturen neemt de plek van de toestemmingsregel over: zelfde cel, dus geen sprong. */
.wl-voet{display:grid;margin-top:14px}
.wl-melding,.wl-mag{grid-area:1/1}
.wl-melding{font-size:.95rem;line-height:1.45;font-weight:600;color:var(--alert-ink);text-wrap:pretty}
.wl-melding:not(:empty)+.wl-mag{visibility:hidden}
.wl-mag{font-size:.9rem;line-height:1.5;color:var(--soft);text-wrap:pretty}
.wl-mag a{color:var(--blue-ink);font-weight:650}
.wl-nojs{display:none;margin-bottom:12px;padding:12px 16px;border-radius:14px;background:var(--alert-t);color:var(--alert-ink);font-weight:650;line-height:1.45}
#wl-fout:target{display:block}
/* bedankt */
.wl-ok{display:grid;align-content:center;justify-items:start;visibility:hidden;opacity:0}
.wl-vink{width:60px;height:60px;border-radius:30%;background:var(--blue);display:grid;place-items:center;box-shadow:0 12px 24px -12px rgba(6,119,211,.8)}
.wl-ok-t{margin-top:24px;font-weight:750;letter-spacing:-.035em;line-height:1.04;font-size:clamp(1.9rem,3vw,2.6rem);text-wrap:balance}
.wl-ok-p{margin-top:12px;color:var(--soft);font-size:1.1rem;line-height:1.5;max-width:30ch;text-wrap:pretty}
.wl-nog{margin-top:26px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--tint);color:var(--blue-ink);font-weight:650;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(6,119,211,.16)}
.wl-nog:hover{background:var(--sky)}
.wl-kaart.is-ok .wl-ok,.wl-kaart:has(#wl-bedankt:target) .wl-ok{visibility:visible;opacity:1}
.wl-kaart.is-ok .wl-form,.wl-kaart:has(#wl-bedankt:target) .wl-form{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:no-preference){
 .wl-form,.wl-ok{transition:opacity 320ms var(--out),visibility 0s linear 320ms}
 .wl-kaart.is-ok .wl-ok{transition:opacity 420ms var(--out) 140ms,visibility 0s}
 .wl-kaart.is-ok .wl-vink{animation:wl-vink 620ms var(--spring) 160ms both}
 .wl-bord.is-op .wl-bord-v{animation:wl-knik 700ms var(--spring) 1}
}
@keyframes wl-vink{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes wl-knik{0%{transform:none}30%{transform:rotate(-3deg)}60%{transform:rotate(1.5deg)}100%{transform:none}}
.wl-bevestig .back{border:0;font:inherit;font-size:1.06rem;cursor:pointer}
/* Robotcheck: een rekenpuzzel die je browser zelf oplost (wachtlijst.js), zonder derden. Alleen met JS zichtbaar;
   de rij heeft een vaste hoogte, dus de tekstwissel verschuift niets. Zonder JS: de rekenvraag op de bevestigstap. */
.wl-check{display:none;align-items:center;gap:12px;height:50px;padding:0 16px;border-radius:16px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);font-size:.95rem;line-height:1.3}
.js .wl-check:not([hidden]){display:flex}
.wl-check-i{position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #8193A5}
.wl-check-i svg{opacity:0;transform:scale(.5)}
.wl-check-t{flex:1;min-width:0;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-check-m{flex:none;font-size:.84rem}
.wl-check[data-staat=bezig] .wl-check-i{box-shadow:inset 0 0 0 2px rgba(6,119,211,.22)}
.wl-check[data-staat=bezig] .wl-check-i::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--blue);border-right-color:var(--blue)}
.wl-check[data-staat=klaar] .wl-check-i{background:var(--blue);box-shadow:none}
.wl-check[data-staat=klaar] .wl-check-i svg{opacity:1;transform:none}
.wl-check[data-staat=fout] .wl-check-i{box-shadow:inset 0 0 0 2px var(--alert)}
.wl-check[data-staat=fout] .wl-check-t{color:var(--alert-ink);white-space:normal;font-size:.9rem}
.wl-check[data-staat=fout] .wl-check-m{display:none}
@media (prefers-reduced-motion:no-preference){
 .wl-check[data-staat=bezig] .wl-check-i::before{border-right-color:transparent;animation:wl-draai 800ms linear infinite}
 .wl-check-i svg{transition:opacity 200ms var(--out),transform 420ms var(--spring)}
}
.wl-vraag{margin:24px 0 8px;max-width:30rem}
.wl-vraag input{max-width:12rem}
.wl-vraag .wl-vraag-u{margin:0;font-size:.9rem;line-height:1.45;color:var(--soft)}
.wl-vraag-f{display:block;margin-bottom:2px;font-weight:650;color:var(--alert-ink)}
.wl-art{background:#fff;padding-block:clamp(56px,7vw,96px)}
.wl-art h2{margin-top:0}
@media (max-width:860px){
 .wl-in{grid-template-columns:1fr;gap:28px}
 .wl-bord{display:none}
 .wl-kaart{border-radius:24px;padding:22px 20px}
 .wl-knop{width:100%}
}

/* Lancering: de App Store-badge wordt "Meld je aan voor de lancering" tot de app er is. */
.lanceer{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;border-radius:999px;background:var(--blue);color:#fff;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;text-decoration:none;box-shadow:0 12px 26px -14px rgba(11,124,218,.75);transition:transform 120ms var(--ease),box-shadow 160ms var(--ease)}
.lanceer:hover{box-shadow:0 16px 30px -14px rgba(11,124,218,.9)}
.lanceer:active{transform:scale(.97)}
.lanceer:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px var(--blue)}
.cta .lanceer,.fin-copy .lanceer{background:#fff;color:var(--blue);box-shadow:0 14px 30px -14px rgba(0,20,50,.6)}
@media (max-width:420px){.lanceer{min-height:50px;padding:0 22px;font-size:.98rem}}