/* rak.tdgdigital.com — "Eerst zien." Remake-concept voor Raketwerk. Huisstijl van raketwerk.nl: Plus Jakarta Sans,
   aubergine/paars/violet/lavendel/koraal. Maten in rem; vanaf 1440 schaalt het geheel mee. */
@font-face{font-family:"PJS";src:url(/fonts/display.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Mono";src:url(/fonts/mono.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{
  --aub:#241234;--aub2:#2f1a45;--paars:#6424D8;--violet:#8B5CFF;--lav:#DCCBFF;--koraal:#FF6B5F;--koraal-d:#e04f43;
  --bg:#FAF7FF;--wit:#fff;--grijs:#55466B;--lijn:#E6DCF8;--zacht:#F1EAFF;--op-donker:#C9B8E0;
  --rand:clamp(1.25rem,5vw,4.5rem);--kop-h:4.5rem;
  --f:"PJS","Segoe UI",system-ui,-apple-system,sans-serif;--mono:"Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--kop-h)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--bg);color:var(--aub);font-family:var(--f);font-size:1.0625rem;line-height:1.6;overflow-x:clip}
::selection{background:var(--violet);color:#fff}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04}
p{margin:0 0 1em}
a{color:var(--paars);text-underline-offset:.18em}
code{font-family:var(--mono);font-size:.92em;background:rgba(139,92,255,.16);padding:.05em .35em;border-radius:.3em}
:focus-visible{outline:3px solid var(--paars);outline-offset:3px;border-radius:4px}
.donker :focus-visible,.belofte :focus-visible,.voet :focus-visible{outline-color:#fff}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:#fff;padding:.5rem 1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
@media (max-width:420px){.nw{white-space:normal}}
.wrap{padding-inline:var(--rand);width:100%}
.label{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--paars);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.label::before{content:"";width:.85rem;height:.95rem;background:currentColor;clip-path:polygon(50% 0,100% 38%,100% 100%,50% 62%,0 100%,0 38%)}
.donker .label,.belofte .label{color:var(--lav)}
h2{font-size:clamp(2.15rem,5.2vw,4.4rem)}
h2 + p:not(.intro){margin-top:1.3rem}
.intro{font-size:clamp(1.1rem,1.6vw,1.3rem);max-width:44ch;margin-top:1.2rem}

/* knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.8rem 1.4rem;border-radius:.85rem;
  font:700 1rem/1.2 var(--f);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s,background-color .2s,box-shadow .2s}
.knop-koraal{background:var(--koraal);color:var(--aub);box-shadow:0 .5rem 1.4rem -0.6rem rgba(255,107,95,.9)}
.knop-koraal:hover{transform:translateY(-2px);background:#ff7e73}
.knop-rand{border-color:var(--paars);color:var(--paars);background:rgba(255,255,255,.6)}
.knop-rand:hover{background:var(--paars);color:#fff}
.knop-vol{width:100%}
.tekstknop{background:none;border:0;color:inherit;font:600 .95rem var(--f);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:2.75rem;padding:.4rem .2rem}

/* ---------------------------------------------------------------- kop */
.kop{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .3s,box-shadow .3s,transform .4s}
.kop-in{display:flex;align-items:center;gap:1.5rem;height:var(--kop-h);padding-inline:var(--rand)}
.kop.vast{background:rgba(250,247,255,.94);box-shadow:0 1px 0 var(--lijn)}
.kop-logo{display:block;flex-shrink:0;min-height:44px;display:flex;align-items:center}
.kop-logo img{width:9.5rem}
.kop-nav{display:flex;gap:1.6rem;margin-left:auto;font-weight:600;font-size:.95rem}
.kop-nav a{color:var(--aub);text-decoration:none;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;position:relative}
.kop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:2px;background:var(--koraal);transform:scaleX(0);transition:transform .25s}
.kop-nav a:hover::after,.kop-nav a[aria-current]::after{transform:scaleX(1)}
.kop-cta{min-height:2.75rem;padding:.5rem 1rem;font-size:.92rem}
.kop-menu{display:none;margin-left:auto;width:48px;height:48px;flex-shrink:0;border:0;border-radius:.8rem;background:var(--aub);cursor:pointer;position:relative}
.kop-menu-streep,.kop-menu-streep::before,.kop-menu-streep::after{position:absolute;left:14px;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.kop-menu-streep{top:23px}.kop-menu-streep::before{content:"";left:0;top:-7px}.kop-menu-streep::after{content:"";left:0;top:7px}
.kop-menu[aria-expanded=true] .kop-menu-streep{background:transparent}
.kop-menu[aria-expanded=true] .kop-menu-streep::before{transform:translateY(7px) rotate(45deg)}
.kop-menu[aria-expanded=true] .kop-menu-streep::after{transform:translateY(-7px) rotate(-45deg)}
.lade{position:fixed;inset:var(--kop-h) 0 0;background:var(--bg);padding:1.5rem var(--rand) 2rem;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem}
.lade nav{display:flex;flex-direction:column}
.lade nav a{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--aub);text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--lijn)}
.lade-tel a{font-weight:700}
@media (max-width:1100px){.kop-nav,.kop-cta{display:none}.kop-menu{display:block}}
@media (min-width:1101px){.lade{display:none!important}}

/* ---------------------------------------------------------------- opening */
.opening{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;overflow:hidden;
  transition:transform .85s cubic-bezier(.7,0,.25,1)}
.opening::after{content:"";position:absolute;left:0;right:0;top:100%;height:5rem;
  background:radial-gradient(circle at 50% 0,var(--bg) 68%,transparent 70%) 0 0/7rem 5rem repeat-x}
.opening.weg{transform:translateY(calc(-100% - 5rem))}
.op-schets{position:absolute;inset:14% 12%;border:2px dashed #cbbde6;border-radius:1.2rem}
.op-balk,.op-blok,.op-knop{position:absolute;background:var(--lijn);border-radius:.5rem;transition:background-color .35s,transform .35s}
.op-b1{left:6%;top:18%;width:42%;height:9%}.op-b2{left:6%;top:31%;width:34%;height:9%}.op-b3{left:6%;top:47%;width:38%;height:3%}
.op-blok{right:6%;top:14%;width:36%;height:62%;border-radius:1rem}.op-knop{left:6%;top:60%;width:18%;height:8%;border-radius:.8rem}
.op-label{position:absolute;left:1.2rem;bottom:.6rem;margin:0;font:500 .85rem var(--mono);color:#9b8bb8}
.op-stempel{position:relative;margin:0;font-size:clamp(3rem,10vw,8rem);font-weight:800;letter-spacing:-.04em;color:var(--koraal);
  border:.35rem solid currentColor;border-radius:1rem;padding:.05em .3em;transform:rotate(-8deg) scale(2.4);opacity:0;background:rgba(250,247,255,.85)}
.op-sub{position:absolute;margin:0;top:calc(50% + clamp(3.2rem,8vw,6.5rem));font-size:clamp(1.3rem,3vw,2.2rem);font-weight:800;color:var(--paars);opacity:0;transform:translateY(1rem)}
.opening.stempel .op-stempel{animation:stempel .45s cubic-bezier(.2,1.6,.4,1) forwards}
.opening.stempel .op-schets{animation:schud .3s .25s}
.opening.af .op-sub{opacity:1;transform:none;transition:all .4s}
.opening.af .op-balk,.opening.af .op-knop{background:var(--paars)}
.opening.af .op-blok{background:linear-gradient(160deg,#c4b5ff,#ffc7b8)}
.op-sla{position:absolute;right:1rem;bottom:1rem;background:none;border:0;font:600 .9rem var(--f);color:var(--grijs);cursor:pointer;min-height:44px;padding:.5rem 1rem}
@keyframes stempel{to{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes schud{30%{transform:translate(4px,-3px)}60%{transform:translate(-3px,2px)}}
@media (prefers-reduced-motion:reduce){.opening{display:none}}

/* wolkranden: bolletjes van gelijke maat, schalen niet scheef */
.wolkrand{position:absolute;left:0;right:0;height:4.5rem;pointer-events:none;z-index:3;
  background:radial-gradient(circle at 50% 100%,var(--wk) 66%,transparent 67.5%) 0 100%/6.5rem 4.5rem repeat-x,
             radial-gradient(circle at 50% 100%,var(--wk) 66%,transparent 67.5%) 3.1rem 100%/9rem 3.6rem repeat-x}
.wolkrand-onder{bottom:-1px}
.wolkrand-boven{top:-1px;transform:scaleY(-1)}
@media (max-width:700px){.wolkrand{height:3rem;background-size:4.2rem 3rem,6rem 2.4rem}}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(100svh,62rem);display:flex;align-items:center;padding:calc(var(--kop-h) + 2rem) 0 6.5rem;overflow:hidden;background:#d9cdfc}
.hero-film{position:absolute;inset:0;overflow:hidden;container-type:size;--fx:.7;--fy:.4}
/* doek = lucht + Rakkie (of de film) in één vlak met vaste verhouding, gesneden als object-fit:cover */
.hero-doek{position:absolute;width:max(100cqw,calc(100cqh * 1.7778));aspect-ratio:16/9;
  left:calc((100cqw - max(100cqw,calc(100cqh * 1.7778))) * var(--fx));top:calc((100cqh - max(100cqh,calc(100cqw * .5625))) * var(--fy))}
.hero-doek > img,.hero-video{position:absolute;inset:0;width:100%;height:100%}
.hero-rakkie{position:absolute;left:63.88%;top:12.9%;width:26.34%;animation:zweef 3.4s ease-in-out infinite alternate}
.hero-rakkie img{width:100%}
@keyframes zweef{from{transform:translateY(0) rotate(0)}to{transform:translateY(-3%) rotate(1.5deg)}}
.hero-film.film .hero-rakkie{display:none}
.hero-video{opacity:0;transition:opacity .8s}
.hero-video.speelt{opacity:1}
.hero-film::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(250,247,255,.65) 0,rgba(250,247,255,0) 9rem),
  linear-gradient(90deg,rgba(250,247,255,.92) 0%,rgba(250,247,255,.78) 32%,rgba(250,247,255,.25) 50%,rgba(250,247,255,0) 60%)}
.hero-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,.6fr);align-items:center;gap:2rem}
.hero h1{font-size:clamp(2.55rem,5.2vw,5.1rem)}
.hero h1 span{display:block;color:var(--paars)}
.hero-onder{font-size:clamp(1.08rem,1.5vw,1.3rem);max-width:38ch;margin-top:1.4rem}
.hero-actie{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.2rem;margin:1.8rem 0 1.1rem}
.prijs{display:flex;align-items:center;gap:.8rem;margin:0;background:#fff;border:2px solid var(--lav);border-radius:1rem;padding:.55rem 1.1rem .55rem .9rem;box-shadow:0 .8rem 2rem -1.2rem rgba(100,36,216,.6)}
.prijs-bedrag{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--paars)}
.prijs-bedrag sup{font-size:.5em;vertical-align:.55em;margin-right:.08em}
.prijs-tekst{display:flex;flex-direction:column;line-height:1.3;font-size:.92rem}
.prijs-tekst small{color:var(--grijs);font-size:.8rem}
.hero-noot{font-size:.88rem;color:var(--grijs);max-width:44ch;margin:0}

/* bouwer + telefoon */
.bouwer{display:flex;flex-direction:column;align-items:center;gap:1rem}
.tel{width:min(100%,16.5rem);aspect-ratio:9/18.6;border-radius:2.4rem;background:var(--aub);padding:.55rem;
  box-shadow:0 2.5rem 4rem -2rem rgba(36,18,52,.7),inset 0 0 0 2px #4a2e66;transform:rotate(-4deg);transition:transform .5s}
.bouwer:focus-within .tel,.tel:hover{transform:rotate(-1deg) translateY(-.3rem)}
.tel-scherm{position:relative;height:100%;border-radius:1.9rem;overflow:hidden;background:#fff}
.tel-scherm::before{content:"";position:absolute;z-index:5;left:50%;top:.45rem;width:4.4rem;height:1.15rem;border-radius:1rem;background:var(--aub);transform:translateX(-50%)}
.ms{--mk:#6424D8;--ma:#FF6B5F;--mg:#f4efe6;position:absolute;inset:0;font-family:var(--f);color:#1d1626;display:flex;flex-direction:column;font-size:.62rem;line-height:1.35}
.ms > *{transition:opacity .35s,transform .35s}
.ms .bouwt{opacity:0;transform:translateY(.5rem)}
.ms-nav{display:flex;align-items:center;gap:.4rem;padding:2rem .8rem .55rem}
.ms-mono{width:1.55rem;height:1.55rem;border-radius:.45rem;background:var(--mk);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.62rem;flex-shrink:0}
.ms-naam{font-weight:800;font-size:.7rem;line-height:1.1;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-burger{margin-left:auto;width:.9rem;height:.55rem;border-block:2px solid currentColor;position:relative;flex-shrink:0}
.ms-held{margin:0 .55rem;border-radius:.9rem;padding:1rem .8rem .9rem;color:#fff;position:relative;overflow:hidden;min-height:9.2rem;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--mk)}
.ms-held::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--ma) 75%,transparent),transparent 60%)}
.ms-icoon{position:absolute;right:.6rem;top:.6rem;width:3.4rem;height:3.4rem;opacity:.9}
.ms-icoon svg{width:100%;height:100%}
.ms-held > *{position:relative}
.ms-plaats{font-size:.55rem;font-weight:700;opacity:.85;margin:0 0 .2rem}
.ms-kop{hyphens:none;overflow-wrap:anywhere;font-size:1.05rem;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
.ms-knoppen{display:flex;gap:.35rem;padding:.6rem .55rem 0}
.ms-knop{flex:1;border-radius:.5rem;padding:.45rem .3rem;text-align:center;font-weight:700;background:var(--ma);color:#1d1626}
.ms-knop + .ms-knop{background:var(--mg);color:#1d1626}
.ms-blok{margin:.65rem .55rem 0;padding:.6rem .65rem;border-radius:.7rem;background:var(--mg)}
.ms-blok b{display:block;font-size:.66rem;margin-bottom:.15rem}
.ms-blok p{margin:0;opacity:.75}
.ms-rij{display:flex;justify-content:space-between}
.ms-voet{margin-top:auto;padding:.55rem .8rem .9rem;font-size:.5rem;opacity:.55;text-align:center}
.bouwer-veld{width:min(100%,19rem);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.45rem;background:rgba(255,255,255,.85);border-radius:1rem;padding:.8rem;
  box-shadow:0 .6rem 1.6rem -1rem rgba(36,18,52,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bouwer-vraag{grid-column:1/-1;margin:0 0 .1rem;font-weight:800;font-size:.95rem}
.bouwer-veld input{min-width:0;min-height:2.75rem;border:2px solid #725a9f;border-radius:.6rem;padding:.4rem .7rem;font:500 .95rem var(--f);color:var(--aub);background:#fff}
.bouwer-veld input:focus{outline:none;border-color:var(--paars);box-shadow:0 0 0 3px rgba(100,36,216,.2)}
.bouwer-uitleg{grid-column:1/-1;margin:.2rem 0 0;font-size:.74rem;line-height:1.4;color:var(--grijs)}

@media (max-width:1180px) and (min-width:761px){
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .hero-film{--fx:.82}
  .hero-film::after{background:linear-gradient(180deg,rgba(250,247,255,.6) 0,rgba(250,247,255,0) 9rem),linear-gradient(90deg,rgba(250,247,255,.92) 0%,rgba(250,247,255,.8) 45%,rgba(250,247,255,.2) 75%)}
}
@media (max-width:760px){
  .hero{display:block;min-height:0;padding:calc(var(--kop-h) + 1.2rem) 0 5rem;background:#f3edff}
  .hero-film{top:auto;height:34rem}
  .hero-film{--fx:.84;--fy:.5}
  .hero-film::after{background:linear-gradient(180deg,#f3edff 0%,rgba(243,237,255,.85) 22%,rgba(243,237,255,0) 50%)}
  .hero-in{grid-template-columns:1fr;gap:1.6rem}
  .hero-onder{margin-top:1rem}
  .bouwer{flex-direction:row;align-items:flex-start;gap:.9rem}
  .tel{width:42%;flex-shrink:0;border-radius:1.7rem;padding:.4rem;transform:rotate(-3deg)}
  .tel-scherm{border-radius:1.35rem}
  .bouwer-veld{grid-template-columns:1fr;flex:1;padding:.7rem}
  .hero-actie{margin-top:1.4rem}
}
@media (max-width:760px),(orientation:landscape) and (max-height:500px){
  .ms{font-size:.42rem}.ms-nav{padding:1.4rem .5rem .4rem}.ms-kop{font-size:.72rem}.ms-held{min-height:6.4rem;padding:.6rem .5rem}
  .ms-icoon{width:2.2rem;height:2.2rem}.ms-mono{width:1.1rem;height:1.1rem;font-size:.45rem}.ms-naam{font-size:.5rem}
  .tel-scherm::before{width:3rem;height:.8rem;top:.35rem}
}
@media (orientation:landscape) and (max-height:500px){
  .hero{min-height:0;padding-bottom:5rem}
  .hero h1{font-size:min(8vw,13svh)}
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bouwer-uitleg{display:none}
  .hero-film{height:auto;inset:0}
  .bouwer{flex-direction:row;align-items:flex-start}.tel{width:52%;border-radius:1.7rem;padding:.4rem}.tel-scherm{border-radius:1.35rem}.bouwer-veld{grid-template-columns:1fr;padding:.6rem}
}

/* ---------------------------------------------------------------- werkwijze */
.donker{background:var(--aub);color:#fff}
.donker a:not(.knop){color:var(--lav)}
.werkwijze{position:relative;padding:6rem 0 9rem;overflow:hidden}
.werkwijze h2 span{color:var(--lav)}
.werkwijze .intro{color:var(--op-donker)}
.trap{position:relative;margin-top:4rem}
.trap-spoor{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.trap-spoor{pointer-events:none}
.trap-spoor path{fill:none;stroke:var(--koraal);stroke-width:2.5;stroke-dasharray:7 9;opacity:.75;stroke-linecap:round}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.6rem;position:relative}
.trap{padding-top:10.4rem}
.stap{transform:translateY(calc(var(--i) * -2.6rem));padding-top:1rem;border-top:2px solid #4a2e66;opacity:0;transition:opacity .6s calc(var(--i) * .12s),border-color .6s calc(var(--i)*.12s)}
.trap.in .stap{opacity:1;border-color:var(--violet)}
.stap-nr{display:block;font-size:clamp(2.6rem,4.5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--violet)}
.stap:nth-child(3) .stap-nr{color:var(--koraal)}
.stap h3{font-size:1.18rem;letter-spacing:-.015em;margin:.6rem 0 .5rem}
.stap p{color:var(--op-donker);font-size:.95rem;margin:0}
.risico{display:flex;align-items:center;gap:2rem;margin-top:4.5rem;flex-wrap:wrap}
.risico img{width:7.5rem}
.risico p{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;flex:1 1 20rem}
@media (max-width:900px){
  .stappen{grid-template-columns:1fr;gap:0}
  .trap{padding-top:0}
  .stap{transform:none;display:grid;grid-template-columns:4.2rem minmax(0,1fr);column-gap:1rem;padding:1.1rem 0;border-top:1px solid #4a2e66}
  .stap-nr{grid-row:span 2;font-size:2.6rem}
  .stap h3{margin:.1rem 0 .2rem}
  .trap-spoor{display:none}
  .risico{margin-top:3.5rem;gap:1.2rem}.risico img{width:5rem}
}

/* ---------------------------------------------------------------- aanbod: aftellen */
.aanbod{position:relative;padding:5rem 0 9rem}
.aftel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);margin-top:3rem;align-items:start}
.aftel-bord{position:sticky;top:calc(var(--kop-h) + 1.5rem)}
.aftel-scherm{position:relative;aspect-ratio:5/4;border-radius:1.6rem;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 85% 0%,#7c4cf2 0%,#5a1cc8 42%,#2e0f63 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.2rem,3vw,2.4rem)}
.aftel-getal{margin:0;font-size:clamp(7rem,17vw,15rem);font-weight:800;letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums}
.aftel-getal span{display:inline-block}
.aftel-getal span.tik{animation:tik .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes tik{from{transform:translateY(-.25em);opacity:0}}
.aftel-naam{margin:.8rem 0 0;font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:700;min-height:1.3em}
.aftel-knop{margin-top:1rem}
.lanceer{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end;padding:clamp(1.2rem,3vw,2.4rem);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;background:radial-gradient(120% 90% at 90% 0%,#6a36e0 0%,#4f17b4 38%,#2a0d5a 100%)}
.aftel.gelanceerd .lanceer{opacity:1;visibility:visible}
.aftel.gelanceerd .aftel-getal,.aftel.gelanceerd .aftel-naam{opacity:0}
.lanceer-rakkie,.lanceer-video{position:absolute;right:6%;bottom:0;height:92%;width:auto;object-fit:contain}
.lanceer-video{right:0;height:100%;width:62%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .3s}
.lanceer-video.speelt{opacity:1}
.aftel.gelanceerd .lanceer-rakkie{animation:opstijgen 2.4s cubic-bezier(.5,0,.3,1) both}
.aftel.gelanceerd .lanceer-video.speelt ~ .lanceer-tekst,.lanceer-tekst{position:relative;z-index:2}
.aftel.gelanceerd.met-film .lanceer-rakkie{display:none}
@keyframes opstijgen{0%{transform:translateY(40%)}40%{transform:translateY(0)}100%{transform:translateY(-8%)}}
.lanceer-label{font-size:.78rem;font-weight:700;letter-spacing:.08em;color:#fff;margin-bottom:.5rem}
.lanceer h3{font-size:clamp(1.8rem,3.4vw,2.9rem)}
.lanceer-tekst > p:not(.lanceer-label):not(.lanceer-prijs){color:#fff;margin:.6rem 0 1rem;max-width:22ch}
.lanceer-prijs{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .5rem;background:#fff;color:var(--aub);border-radius:.8rem;padding:.4rem .9rem;margin:0;font-weight:700;font-size:.9rem}
.lanceer-prijs span{font-size:1.8rem;font-weight:800;color:var(--paars);letter-spacing:-.03em}
.lanceer-prijs sup{font-size:.5em;vertical-align:.6em}
.lanceer-prijs small{color:var(--grijs);font-weight:500}
.aftel-lijst{list-style:none;margin:0;padding:0;counter-reset:x}
.aftel-lijst li{display:grid;grid-template-columns:3.4rem minmax(0,1fr) 2rem;align-items:center;gap:.6rem;padding:.95rem 0;border-bottom:1px solid var(--lijn);transition:color .3s}
.ab-nr{font-weight:800;font-size:1.05rem;color:#9b8bb8;font-variant-numeric:tabular-nums;transition:color .3s}
.ab-naam{font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.01em}
.ab-vink{width:1.7rem;height:1.7rem;border-radius:50%;border:2px solid var(--lijn);position:relative;transition:background-color .3s,border-color .3s}
.ab-vink::after{content:"";position:absolute;left:.5rem;top:.28rem;width:.38rem;height:.72rem;border:solid #fff;border-width:0 .17rem .17rem 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.aftel-lijst li.af .ab-vink{background:var(--paars);border-color:var(--paars)}
.aftel-lijst li.af .ab-vink::after{transform:rotate(45deg) scale(1)}
.aftel-lijst li.af .ab-nr{color:var(--paars)}
.aftel-lijst li.nu{color:var(--paars)}
.aftel-lijst li.nu .ab-nr{color:var(--koraal-d)}
.aftel-lijst li:last-child .ab-naam::after{content:"  · lancering";color:var(--koraal-d);font-size:.8em;white-space:pre}
@media (max-width:900px){
  .aftel{grid-template-columns:1fr}
  .aftel-bord{position:relative;top:0}
  .aftel-scherm{aspect-ratio:auto;min-height:24rem}
  .lanceer{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .lanceer-rakkie{height:80%;right:2%}
  .lanceer-video{width:55%}
}
@media (max-width:480px){.aftel-scherm{min-height:27rem}.lanceer{grid-template-columns:1fr}.lanceer-rakkie{height:44%;top:.6rem;bottom:auto;right:.4rem}.lanceer h3{font-size:1.9rem}.lanceer-video{width:100%;opacity:0}.lanceer-video.speelt{opacity:.55}.lanceer-tekst>p:not(.lanceer-label):not(.lanceer-prijs){max-width:15ch}}

/* ---------------------------------------------------------------- belofte: sleutels */
.belofte{position:relative;background:var(--paars);color:#fff;padding:5.5rem 0 9rem;overflow:hidden}
.belofte::before{content:"";position:absolute;right:-8rem;top:-6rem;width:40rem;height:44rem;background:rgba(255,255,255,.05);
  clip-path:polygon(50% 0,100% 38%,100% 100%,50% 62%,0 100%,0 38%)}
.belofte-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.belofte p{color:#efe7ff;max-width:46ch}
.belofte-vet{font-weight:800;font-size:1.25rem;color:#fff!important}
.sleutelbord{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:stretch}
.haak,.ring{border-radius:1.4rem;padding:1.3rem 1.2rem 1.4rem;min-height:21rem;display:flex;flex-direction:column}
.haak{background:rgba(36,18,52,.45)}
.ring{background:#fff;color:var(--aub)}
.haak-kop{font-weight:800;font-size:1.15rem;margin:0 0 .2rem;color:inherit!important}
.haak-sub{font-size:.88rem;margin:0 0 1rem;opacity:.85;color:inherit!important}
.haak-plank{flex:1;display:flex;flex-direction:column;gap:.7rem;justify-content:flex-start;padding-top:.6rem;border-top:4px solid rgba(255,255,255,.25)}
.ring-plek{flex:1;position:relative;display:flex;flex-direction:column;gap:.7rem;padding-top:3.2rem}
.ring-o{position:absolute;left:1.3rem;top:0;width:3rem;height:3rem;border:5px solid #c7b3ea;border-radius:50%}
.ring-naam{position:absolute;left:4.9rem;top:.75rem;font:600 .9rem var(--mono);color:var(--paars)}
.sleutel{display:flex;align-items:center;gap:.6rem;width:100%;min-height:3.4rem;border:0;border-radius:.9rem;padding:.4rem .7rem;background:rgba(255,255,255,.1);
  color:#ffd76a;cursor:grab;font:700 .98rem var(--f);text-align:left;touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:background-color .2s}
.sleutel:hover{background:rgba(255,255,255,.18)}
.sleutel svg{width:4.2rem;height:auto;flex-shrink:0;transform:rotate(-10deg)}
@media (min-width:521px) and (max-width:1180px){.sleutel svg{width:2.8rem}.sleutel{gap:.4rem;padding-inline:.5rem;font-size:.9rem}}
.sleutel-tag{color:#fff}
.ring .sleutel{background:var(--zacht);color:#d79b16;cursor:default}
.ring .sleutel .sleutel-tag{color:var(--aub)}
.sleutel.sleept{cursor:grabbing;z-index:20;position:relative;transition:none;box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.6)}
.sleutel-klaar{grid-column:1/-1;margin:.4rem 0 0;font-weight:800;font-size:1.35rem;min-height:1.6em;color:#fff!important}
.sleutelbord .tekstknop{grid-column:1/-1;justify-self:start;color:#fff;margin-top:-.4rem}
@media (max-width:900px){.belofte-in{grid-template-columns:1fr}}
@media (max-width:520px){.sleutelbord{grid-template-columns:1fr}.haak,.ring{min-height:0}.haak-plank{min-height:3.4rem}.ring-plek{min-height:4rem}}

/* ---------------------------------------------------------------- nazorg */
.nazorg{padding:5rem 0 6rem}
.nazorg-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.nazorg-in > div > p:not(.intro):not(.label){max-width:46ch;color:var(--grijs)}
.tarief{position:relative;margin-top:2.4rem;padding:1.6rem 8rem 1.4rem 1.6rem;border-radius:1.4rem;background:var(--zacht);max-width:28rem}
.tarief-rakkie{position:absolute;right:1rem;bottom:1rem;width:6.2rem}
@media (max-width:420px){.tarief{padding-right:1.6rem;padding-top:5.5rem}.tarief-rakkie{top:-1.5rem;bottom:auto;width:5.2rem}}
.tarief-bedrag{font-size:3.6rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--paars);margin:0 0 .8rem}
.tarief-bedrag sup{font-size:.45em;vertical-align:.8em}
.tarief-bedrag small{font-size:1rem;letter-spacing:0;color:var(--aub);font-weight:600}
.tarief-kort{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font-weight:600;font-size:.95rem}
.tarief-kort li::before{content:"✓ ";color:var(--paars)}
.diensten{list-style:none;margin:0;padding:0;border-top:2px solid var(--aub)}
.diensten li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--lijn)}
.diensten b{font-size:1.2rem;letter-spacing:-.015em}
.diensten span{color:var(--grijs)}
@media (max-width:900px){.nazorg-in{grid-template-columns:1fr}.diensten li{grid-template-columns:1fr;gap:.2rem}}

/* ---------------------------------------------------------------- over */
.over{position:relative;min-height:46rem;display:flex;align-items:flex-end;overflow:hidden;background:#e7d6fb}
.over-beeld{position:absolute;inset:0}
.over-beeld img,.over-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.over-video{opacity:0;transition:opacity .8s}.over-video.speelt{opacity:1}
.over-in{position:relative;z-index:2;padding-block:4rem}
.over-kaart{background:rgba(250,247,255,.94);border-radius:1.6rem;padding:clamp(1.4rem,3vw,2.6rem);max-width:min(100%,40rem);box-shadow:0 2rem 3rem -2rem rgba(36,18,52,.5)}
.over-kaart h2{font-size:clamp(2rem,3.8vw,3.3rem);margin-bottom:1.2rem}
.over-kaart h2 .nw{color:var(--paars)}
.over-kaart p{color:#3c2d50}
.handtekening{font-weight:800;color:var(--paars)!important;margin:0}
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  .over{display:block;min-height:0;background:var(--bg)}
  .over-beeld{position:relative;aspect-ratio:16/10}
  .over-in{padding-block:0 3rem;margin-top:-3rem}
}

/* ---------------------------------------------------------------- zelf: editor */
.zelf{position:relative;padding:7rem 0 9rem}
.zelf h2 span{color:var(--koraal)}
.zelf .intro{color:var(--op-donker);max-width:52ch}
.zelf code{background:rgba(255,255,255,.1);color:#ffd2cc}
.editor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.4rem;margin-top:3rem;align-items:stretch}
.ed-code{background:#170b22;border-radius:1.2rem;padding:0 0 1.2rem;border:1px solid #3a2452;display:flex;flex-direction:column;min-width:0}
.ed-tab{display:flex;justify-content:space-between;align-items:center;margin:0;padding:.75rem 1.1rem;border-bottom:1px solid #3a2452;font:500 .85rem var(--mono);color:var(--op-donker)}
.ed-staat{color:#7ee0a5}.ed-staat.gewijzigd{color:var(--koraal)}
.ed-regels{overflow-x:auto;padding:1rem 1.1rem}
.ed-regels pre{margin:0;font:400 clamp(.82rem,1.15vw,1rem)/1.9 var(--mono);color:#e9e1f5;white-space:pre}
.ln{display:inline-block;width:2.2em;color:#6d5a86;user-select:none}
.c{color:#9a86b6}.t{color:#ff9c8f}
.ed-in{font:inherit;color:#fff;background:rgba(139,92,255,.22);border:2px solid var(--violet);border-radius:.25rem;padding:.05em .3em;width:23ch;min-height:44px;vertical-align:middle}
.ed-in-kort{width:13ch}
.ed-in:focus{outline:2px solid #fff;outline-offset:2px;background:rgba(139,92,255,.38)}
.ed-knop{align-self:flex-start;margin:.4rem 1.1rem 0}
.ed-browser{background:#fff;color:var(--aub);border-radius:1.2rem;overflow:hidden;display:flex;flex-direction:column;position:relative;min-height:18rem}
.ed-adres{margin:0;padding:.7rem 1rem;background:var(--zacht);font:500 .85rem var(--mono);color:var(--grijs)}
.ed-adres span{color:#6e5a93;margin-right:.6rem;letter-spacing:.1em}
.ed-voortgang{height:3px;background:var(--koraal);transform:scaleX(0);transform-origin:left}
.ed-voortgang.loopt{animation:laden .9s ease-out forwards}
@keyframes laden{to{transform:scaleX(1)}}
.ed-pagina{flex:1;padding:1.6rem 1.4rem;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#fff7ec,#ffe6d6)}
.ed-merk{font-weight:800;font-size:.9rem;color:#8a4b14;margin-bottom:1.4rem}
.ed-h1{font-size:clamp(1.6rem,2.8vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 1.2rem;color:#3d1f08;overflow-wrap:anywhere}
.ed-bel{display:inline-block;align-self:flex-start;background:#3d1f08;color:#fff;font-weight:700;border-radius:.7rem;padding:.6rem 1rem;margin:0}
.ed-pagina.vers{animation:vers .6s}
@keyframes vers{from{opacity:.2;filter:blur(3px)}}
.vijf-regels{margin:3rem 0 0;padding:0;list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem}
.vijf-regels li{counter-increment:r;color:var(--op-donker);font-size:.95rem;border-top:2px solid #4a2e66;padding-top:.9rem}
.vijf-regels li::before{content:counter(r);display:block;font-weight:800;font-size:1.6rem;color:var(--koraal);margin-bottom:.3rem}
.zelf-noot{margin-top:2.4rem;font-size:1.25rem;font-weight:700}
@media (max-width:900px){.editor{grid-template-columns:1fr}.vijf-regels{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.vijf-regels{grid-template-columns:1fr}.ed-regels pre{font-size:.74rem}.ed-in{width:100%;display:block;margin:.2rem 0 .2rem 2.2em;max-width:calc(100% - 2.2em)}.ed-in-kort{width:100%}}

/* ---------------------------------------------------------------- vragen */
.vragen{padding:3rem 0 7rem}
.vragen-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.vragen-kop{position:sticky;top:calc(var(--kop-h) + 2rem)}
.vragen-kop h2{margin-bottom:1rem}
.vragen-kop img{width:8rem;margin-top:1rem}
details{border-bottom:1px solid var(--lijn)}
details:first-child{border-top:2px solid var(--aub)}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 0;font-weight:800;font-size:clamp(1.08rem,1.5vw,1.3rem);letter-spacing:-.015em;min-height:3.5rem}
summary::-webkit-details-marker{display:none}
.plus{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--zacht);position:relative;flex-shrink:0;transition:transform .3s,background-color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:.85rem;height:2px;background:var(--paars);transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
details[open] .plus{background:var(--paars)}
details[open] .plus::before,details[open] .plus::after{background:#fff}
details[open] .plus::after{transform:translate(-50%,-50%) rotate(0)}
.antw{padding:0 0 1.4rem;color:#3c2d50;max-width:62ch}
.antw ul{padding-left:1.2rem}
@media (max-width:900px){.vragen-in{grid-template-columns:1fr}.vragen-kop{position:static}.vragen-kop img{display:none}}

/* ---------------------------------------------------------------- contact */
.contact{position:relative;padding:8rem 0 6rem;background:linear-gradient(180deg,#e9defd 0%,#d8c9fb 100%);overflow:hidden}
.contact-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.contact-tekst > p:not(.label){max-width:44ch}
.direct-kop{font-weight:800;margin-top:2rem}
.direct{margin:0;display:grid;gap:.2rem}
.direct div{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center;border-bottom:1px solid rgba(100,36,216,.18);min-height:3rem}
.direct dt{color:var(--grijs);font-weight:600}
.direct dd{margin:0;font-weight:800;font-size:1.1rem}
.direct a{text-decoration:none;color:var(--aub);display:inline-block;padding:.5rem 0}
.direct a:hover{color:var(--paars)}
.formulier-kaart{background:#fff;border-radius:1.6rem;padding:clamp(1.3rem,3vw,2.4rem);box-shadow:0 2rem 4rem -2.5rem rgba(36,18,52,.6)}
.veld{margin-bottom:1.1rem}
.veld label{display:block;font-weight:700;margin-bottom:.35rem}
.veld input,.veld select{width:100%;min-height:3.1rem;border:2px solid #8a73b8;border-radius:.75rem;padding:.6rem .9rem;font:500 1rem var(--f);color:var(--aub);background:#fff}
.veld input:focus,.veld select:focus{outline:none;border-color:var(--paars);box-shadow:0 0 0 3px rgba(100,36,216,.2)}
.veld.fout input{border-color:#c0392b}
.veld-fout{color:#b3261e;font-size:.88rem;margin:.35rem 0 0}
.tel-rij{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.5rem}
.veld select{padding-inline:.6rem}
.form-noot{font-size:.85rem;color:var(--grijs);margin:1rem 0 0}
.bedankt{text-align:center}
.bedankt img{width:8rem;margin:0 auto 1rem}
.bedankt h3{font-size:2rem;margin-bottom:.6rem}
@media (max-width:900px){.contact-in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- voet */
.voet{background:var(--aub);color:var(--op-donker);padding:4rem 0 2rem;font-size:.95rem}
.voet a{color:#fff}
.voet-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:2rem}
.voet-merk img{width:10rem;margin-bottom:.8rem}
.voet-kop{font-size:1rem;color:#fff;letter-spacing:0;margin-bottom:.6rem}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;border-top:1px solid #4a2e66;margin-top:2.5rem;padding-top:1.4rem;font-size:.85rem}
.voet-onder p{margin:0}
@media (max-width:760px){.voet-in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- privacy */
.privacy{padding:calc(var(--kop-h) + 3rem) 0 5rem}
.privacy-in{max-width:none}
.privacy-in > *{max-width:46rem}
.privacy h1{font-size:clamp(2.4rem,5vw,4rem);margin-bottom:.6rem}
.privacy h2{font-size:1.5rem;margin:2.2rem 0 .6rem;letter-spacing:-.02em}
.privacy .klein{color:var(--grijs)}
.body-privacy .kop{background:rgba(250,247,255,.94);box-shadow:0 1px 0 var(--lijn)}

/* inloop */
.rv{opacity:0;transform:translateY(1.5rem);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}