/* Donsports - stylesheet (v1). Geen inline styles: de CSP staat alleen 'self' toe. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-latin-400.woff2) format('woff2')}
@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bangers-latin-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin-var.woff2) format('woff2')}

:root{--or:#FF8A1F;--or2:#FFB25C;--yl:#FFC21A;--glow:#FFE29A;--navy:#0B0D1A;--navy2:#11142A;--navy3:#141630;--rust:#3A1E0E;--tx:#F4F2EE;--mu:#C8C9D6;--mu2:#A3A6BD;--line:#2B2F4E;--line2:#3B3F5C;--err:#FF9C9C;--pad:clamp(16px,4vw,24px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--tx);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--or)}a:hover{color:var(--or2)}
:focus-visible{outline:3px solid var(--yl);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--or);color:#111;padding:10px 16px;border-radius:6px;font-weight:800;text-decoration:none}
.skip:focus{top:12px;color:#111}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.or{color:var(--or)}
.inl{display:inline}
section{position:relative}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}.d4{--d:.36s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 26px;border-radius:6px;font:800 16px/1.2 'Manrope',sans-serif;text-decoration:none;cursor:pointer;border:0;transform:skewX(-8deg);transition:transform .2s ease,box-shadow .2s ease,background-color .2s}
.btn > *{transform:skewX(8deg)}
.btn-or{background:var(--or);color:#111;box-shadow:0 0 28px rgba(255,138,31,.8)}
.btn-or:hover{color:#111;background:var(--or2);transform:skewX(-8deg) translateY(-2px);box-shadow:0 0 40px rgba(255,138,31,.95)}
.btn-ghost{border:2px solid var(--line2);color:var(--tx);background:transparent}
.btn-ghost:hover{color:var(--tx);border-color:var(--or);transform:skewX(-8deg) translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn[disabled]{opacity:.7;cursor:progress}

/* ---------- header ---------- */
.site-header{position:relative;z-index:5}
.site-header .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding-block:22px}
.logo{font-family:'Anton',sans-serif;font-style:italic;font-size:30px;letter-spacing:1px;color:var(--tx);text-decoration:none;line-height:1}
.logo:hover{color:var(--tx)}
.nav{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;font-weight:700;font-size:15px}
.nav a{color:var(--tx);text-decoration:none;padding:6px 0;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{min-height:44px;padding:10px 20px;font-size:15px}

/* ---------- hero ---------- */
.hero{overflow:hidden;margin-top:-88px;padding:112px 0 120px}
.rays{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;opacity:.14;pointer-events:none;animation:raysIn 1.2s ease-out both,spin 90s linear 1.2s infinite}
@keyframes raysIn{from{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:.14}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-inner{animation:shake .42s linear .8s both}
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,4px)}30%{transform:translate(6px,-5px)}45%{transform:translate(-5px,3px)}60%{transform:translate(4px,-2px)}80%{transform:translate(-2px,1px)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.hero-copy{position:relative}
.chip-loc{display:inline-block;font-family:'Bangers',sans-serif;font-size:20px;letter-spacing:2px;background:var(--yl);color:var(--navy);padding:6px 14px;transform:rotate(-3deg);margin:0 0 22px;line-height:1.2;animation:pop .4s cubic-bezier(.2,.9,.3,1.4) .15s both}
.chip-loc span{white-space:nowrap}
.hero-brand{margin:0 0 6px;font-family:'Anton',sans-serif;font-style:italic;font-size:clamp(30px,5vw,48px);letter-spacing:3px;line-height:1;position:relative;display:block;width:fit-content;animation:brandIn .45s cubic-bezier(.2,.8,.2,1) .25s both}
.hero-brand::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:4px;background:linear-gradient(90deg,var(--or),var(--glow),var(--or));transform-origin:left;animation:underline .5s cubic-bezier(.7,0,.3,1) .5s both;box-shadow:0 0 14px var(--or)}
@keyframes brandIn{from{opacity:.01;transform:translateX(-30px) skewX(-10deg)}to{opacity:1;transform:none}}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:.01;transform:rotate(-3deg) scale(.6)}to{opacity:1;transform:rotate(-3deg) scale(1)}}
.h1{margin:14px 0 0;font-family:'Anton',sans-serif;font-weight:400;font-style:italic;font-size:clamp(3.6rem,15vw,6.9rem);line-height:.92;letter-spacing:.5px;text-shadow:0 0 32px var(--or);animation:slam .45s cubic-bezier(.2,.8,.2,1) .4s both}
.h1 > span{display:block}
@keyframes slam{0%{opacity:.01;transform:translateX(-8%) skewX(-14deg) scale(1.3)}70%{opacity:1;transform:translateX(1%) skewX(-3deg) scale(.98)}100%{opacity:1;transform:none}}
.lead{margin:28px 0 22px;font-size:19px;line-height:1.6;color:var(--mu);max-width:540px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none}
.tags li{border:1px solid var(--or);color:var(--or2);font-weight:800;font-size:13px;letter-spacing:1.5px;padding:6px 12px;border-radius:4px;transform:skewX(-8deg)}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .lead,.hero .tags,.hero .cta{animation:up .5s cubic-bezier(.2,.8,.2,1) both}
.hero .lead{animation-delay:.9s}.hero .tags{animation-delay:1s}.hero .cta{animation-delay:1.1s}
@keyframes up{from{opacity:.01;transform:translateY(18px)}to{opacity:1;transform:none}}
.shock{position:absolute;z-index:0;left:24%;top:46%;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;border:3px solid var(--glow);box-shadow:0 0 30px var(--or),inset 0 0 30px var(--or);opacity:0;pointer-events:none;animation:shock .75s cubic-bezier(.1,.6,.3,1) .78s forwards}
.shock + .shock{animation-delay:.9s;border-width:2px}
@keyframes shock{0%{opacity:1;transform:scale(.1)}100%{opacity:0;transform:scale(7)}}
.flash{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 30% 50%,rgba(255,226,154,.55),rgba(255,138,31,.15) 40%,transparent 70%);opacity:0;animation:flash .5s ease-out .76s both}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* ---------- hero avatar ---------- */
.stage{position:relative;width:100%;max-width:470px;margin-inline:auto;aspect-ratio:600/720;margin-block:0}
.stage > svg,.stage > canvas,.stage > span{position:absolute;pointer-events:none}
.stage > svg{inset:0;width:100%;height:100%;overflow:visible}
.av-aura{transform-origin:50% 100%;will-change:transform,opacity}
.av-aura-outer{opacity:.92;animation:chargeIn 1.5s cubic-bezier(.3,.7,.3,1) both,auraA 1.1s ease-in-out 1.5s infinite}
.av-aura-inner{opacity:.9;animation:chargeIn 1.5s cubic-bezier(.3,.7,.3,1) .1s both,auraB .32s steps(2) 1.6s infinite}
.av-aura-front{mix-blend-mode:screen;animation:chargeIn 1.5s cubic-bezier(.3,.7,.3,1) .2s both,auraC 1.7s ease-in-out 1.7s infinite}
@keyframes chargeIn{0%{opacity:0;transform:scale(.2,.15)}35%{opacity:.6;transform:scale(.55,.5)}48%{opacity:.4;transform:scale(.48,.44)}80%{opacity:1;transform:scale(1.12,1.14)}100%{opacity:.92;transform:scale(1)}}
@keyframes auraA{0%,100%{transform:scale(1,1)}30%{transform:scale(1.025,1.05)}60%{transform:scale(.99,1.02)}80%{transform:scale(1.035,1.07)}}
@keyframes auraB{0%{transform:scale(1,1) translateY(0)}100%{transform:scale(1.02,1.05) translateY(-1.5%)}}
@keyframes auraC{0%,100%{opacity:.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.5%) scale(1.02)}}
.av-body{transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);mask-image:linear-gradient(to bottom,#000 84%,transparent 99%);animation:breathe 3.4s ease-in-out 1.5s infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.008,1.014) translateY(-.4%)}}
.av-body .b-rim,.av-body .eye-glow{animation:fadeOn .9s ease-out .7s both}
@keyframes fadeOn{from{opacity:0}to{opacity:1}}
.av-bolts polyline{opacity:0;animation:bolt 2.2s steps(1) 1.6s infinite}
.av-bolts polyline:nth-child(2){animation-delay:2.1s}.av-bolts polyline:nth-child(3){animation-delay:2.7s}.av-bolts polyline:nth-child(4){animation-delay:3.1s}
@keyframes bolt{0%{opacity:1}8%{opacity:0}13%{opacity:.9}20%,100%{opacity:0}}
.embers{inset:-12% -16% -4%;width:132%;height:116%;z-index:3}
.av-ring{left:50%;bottom:2%;width:76%;height:16%;margin-left:-38%;border-radius:50%;border:3px solid var(--glow);box-shadow:0 0 26px var(--or),inset 0 0 26px var(--or);opacity:0;z-index:2}
.av-flash{inset:-10%;border-radius:50%;background:radial-gradient(circle at 50% 55%,rgba(255,246,208,.85),rgba(255,138,31,.25) 40%,transparent 66%);opacity:0;z-index:4}
.stage.charge .av-ring{animation:ring .9s cubic-bezier(.1,.6,.3,1) 1.25s}
.stage.charge .av-flash{animation:flash .6s ease-out 1.3s}
.stage.surge .av-ring{animation:ring .9s cubic-bezier(.1,.6,.3,1)}
.stage.surge .av-flash{animation:flash .6s ease-out}
.stage.surge .av-aura-outer{animation:surge .7s cubic-bezier(.2,.8,.2,1)}
@keyframes ring{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.9)}}
@keyframes surge{0%{transform:scale(1)}30%{transform:scale(1.14,1.2)}100%{transform:scale(1)}}

/* ---------- orange band ---------- */
.band{background:var(--or);color:#111;transform:skewY(-2deg);margin:-20px 0 0;overflow:hidden;z-index:2}
.band-inner{transform:skewY(2deg);padding:24px 0}
.band-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.band-set{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
.band-set li{font-family:'Anton',sans-serif;font-style:italic;font-size:clamp(20px,2.6vw,28px);letter-spacing:.5px;white-space:nowrap;padding:0 22px;line-height:1.2;display:flex;align-items:center;gap:44px}
.band-set li::after{content:"";width:12px;height:12px;background:#111;transform:rotate(45deg);flex:none;margin-right:-22px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- shared section bits ---------- */
.sec{padding:112px 0;overflow:hidden;overflow:clip}
.bg2{background:var(--navy2)}
.kicker{margin:0 0 12px;font-family:'Bangers',sans-serif;letter-spacing:2px;font-size:22px;color:var(--yl);line-height:1.2}
.h2{position:relative;margin:0 0 24px;font-family:'Anton',sans-serif;font-weight:400;font-style:italic;font-size:clamp(2.6rem,7vw,4rem);line-height:1;text-transform:uppercase}
.h2::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:0;color:transparent;text-shadow:0 0 26px var(--or),0 0 8px rgba(255,138,31,.7);opacity:.55;pointer-events:none}
.js .h2::after{opacity:0}
.js .in .h2::after{animation:charge 1.5s ease-out .45s forwards}
@keyframes charge{0%{opacity:0}30%{opacity:1}45%{opacity:.35}60%{opacity:1}100%{opacity:.55}}
.sec-head{position:relative;margin-bottom:56px}
.sec-head.tight{margin-bottom:24px}
.sec-head .h2{margin-bottom:0}
.sec-head::before{content:"";position:absolute;z-index:3;left:-10%;width:60%;top:-6%;bottom:-6%;background:linear-gradient(90deg,transparent,rgba(255,138,31,.95) 30%,var(--glow) 50%,rgba(255,138,31,.95) 70%,transparent);transform:translateX(-140%) skewX(-28deg);opacity:0;pointer-events:none;mix-blend-mode:screen}
.in .sec-head::before{animation:slash .75s cubic-bezier(.7,0,.25,1) .05s}
@keyframes slash{0%{opacity:1;transform:translateX(-140%) skewX(-28deg)}85%{opacity:1}100%{opacity:0;transform:translateX(260%) skewX(-28deg)}}
.speed{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.speed i{position:absolute;left:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,138,31,.9) 60%,var(--glow));opacity:0;transform:translateX(-100%)}
.in > .speed i{animation:streak .8s cubic-bezier(.5,0,.2,1) both}
@keyframes streak{0%{opacity:0;transform:translateX(-100%)}15%{opacity:.85}100%{opacity:0;transform:translateX(calc(100vw + 100%))}}
.js .rv{opacity:0;translate:0 32px;transition:opacity .6s ease var(--d,0s),translate .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js .rv.in{opacity:1;translate:0 0}
.js .rv-x{translate:-48px 0}

/* ---------- over ---------- */
.over-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1000/1079;background:var(--navy3);margin:0}
.photo img{width:100%;height:100%;object-fit:cover;object-position:30% 40%}
.photo-wrap{position:relative}
.photo-wrap::before{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;border-right:4px solid var(--or);border-bottom:4px solid var(--or);border-radius:0 0 24px 0;filter:drop-shadow(0 0 10px var(--or));pointer-events:none}
.over p.txt{margin:0 0 18px;font-size:18px;line-height:1.7;color:var(--mu)}
.cert-title{margin:34px 0 14px;font-family:'Bangers',sans-serif;letter-spacing:2px;font-size:20px;color:var(--tx)}
.certs{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.cert{position:relative;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border:2px solid var(--or);border-radius:6px;background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(58,30,14,.5));font-weight:800;font-size:15px;transform:skewX(-8deg);box-shadow:0 0 18px rgba(255,138,31,.25)}
.cert > *{transform:skewX(8deg)}
.cert svg{width:22px;height:22px;flex:none;fill:var(--or);filter:drop-shadow(0 0 4px var(--or))}
.certs .cert:nth-child(2){--d:.12s}.certs .cert:nth-child(3){--d:.24s}.certs .cert:nth-child(4){--d:.36s}
.js .cert{opacity:0;scale:.6;transition:opacity .3s ease var(--d,0s),scale .45s cubic-bezier(.2,.9,.3,1.5) var(--d,0s)}
.js .certs.in .cert{opacity:1;scale:1}
.cert::after{content:"";position:absolute;inset:-2px;border-radius:6px;box-shadow:0 0 0 2px var(--glow),0 0 30px 6px var(--or);opacity:0;pointer-events:none}
.certs.in .cert::after{animation:chipFlash .7s ease-out calc(var(--d,0s) + .15s)}
@keyframes chipFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.over-end{margin:30px 0 0;font-family:'Bangers',sans-serif;letter-spacing:2px;font-size:26px;color:var(--or)}

/* ---------- cards (pakketten + lessen) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;perspective:1000px}
.cards > :nth-child(2){--d:.1s}.cards > :nth-child(3){--d:.2s}
.card{position:relative;background:var(--navy);border:1px solid var(--line);border-radius:20px;padding:34px;display:flex;flex-direction:column;gap:14px;transform:translateY(var(--ty,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.card.tilting{transition:transform .08s linear,border-color .3s}
.card::after{content:"";position:absolute;inset:-1px;border-radius:20px;box-shadow:0 0 0 2px var(--or),0 0 36px 4px rgba(255,138,31,.5),inset 0 0 36px rgba(255,138,31,.14);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after,.card.lit::after,.card:focus-within::after{opacity:1;animation:edge 1.2s ease-in-out infinite}
@keyframes edge{50%{opacity:.7}}
.card:hover,.card.lit{border-color:var(--or)}
.card > *{transform:translateZ(28px)}
.card.hot{border:2px solid var(--or);box-shadow:0 0 40px rgba(255,138,31,.3)}
.card-lvl{font-family:'Bangers',sans-serif;font-size:24px;letter-spacing:2px;color:var(--yl);line-height:1.1}
.card.hot .card-lvl{color:var(--or)}
.card h3{margin:0;font-size:26px;font-weight:800;line-height:1.2}
.card p{margin:0;color:var(--mu);line-height:1.6;font-size:16px}
.price{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:10px;font-family:'Anton',sans-serif;font-style:italic;font-size:26px;letter-spacing:.5px;color:var(--or);text-transform:uppercase}
.price svg{width:20px;height:20px;fill:var(--or)}
.card .btn{align-self:flex-start}
.seg{border:0;margin:4px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.seg legend{font-weight:700;font-size:14px;margin-bottom:8px;padding:0}
.seg label{position:relative}
.seg input,.days input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:2px solid var(--line2);border-radius:6px;font-weight:800;font-size:15px;transform:skewX(-8deg);transition:background-color .2s,border-color .2s,color .2s}
.seg input:checked + span{background:var(--or);color:#111;border-color:var(--or)}
.seg input:focus-visible + span{outline:3px solid var(--yl);outline-offset:3px}
.ico{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,138,31,.25),rgba(58,30,14,.6));border:1px solid rgba(255,138,31,.5)}
.ico svg{width:30px;height:30px;stroke:var(--or);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- route / krachtmeter ---------- */
.meter{position:sticky;top:12px;z-index:2;background:rgba(17,20,42,.94);border:1px solid var(--line);border-radius:16px;padding:18px 20px 22px;margin-bottom:40px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.meter-label{font-family:'Bangers',sans-serif;letter-spacing:2px;font-size:20px;color:var(--yl)}
.meter-val{font-family:'Anton',sans-serif;font-style:italic;font-size:clamp(34px,5vw,48px);line-height:1;color:var(--or);text-shadow:0 0 18px rgba(255,138,31,.7);font-variant-numeric:tabular-nums;min-width:4ch;text-align:right}
.meter-bar{position:relative;height:14px;background:#1E2240;border-radius:99px}
.meter-fill{position:absolute;inset:0;border-radius:99px;background:linear-gradient(90deg,var(--rust),var(--or) 40%,var(--yl) 85%,var(--glow));box-shadow:0 0 16px var(--or);transform:scaleX(0);transform-origin:left}
.meter-spark{position:absolute;left:-14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;background:radial-gradient(circle,#fff 15%,var(--glow) 35%,rgba(255,138,31,.6) 55%,transparent 72%);pointer-events:none}
.meter-node{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--navy);border:3px solid var(--line2);transition:border-color .3s,background-color .3s,box-shadow .3s}
.meter-node.n1{left:16.66%}.meter-node.n2{left:50%}.meter-node.n3{left:83.33%}
.meter-node.on{border-color:var(--glow);background:var(--or);box-shadow:0 0 16px var(--or)}
.meter-done{position:absolute;right:20px;bottom:-16px;font-family:'Bangers',sans-serif;letter-spacing:2px;font-size:18px;background:var(--or);color:#111;padding:2px 10px;transform:rotate(-3deg) scale(.6);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.3,1.6)}
.meter.full .meter-done{opacity:1;transform:rotate(-3deg) scale(1)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.step{position:relative;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--navy2);transition:border-color .4s,box-shadow .4s}
.step-num{font-family:'Anton',sans-serif;font-style:italic;font-size:64px;color:var(--line2);line-height:1;transition:color .4s,text-shadow .4s}
.step h3{margin:12px 0 8px;font-size:22px;font-weight:800}
.step p{margin:0;color:var(--mu);line-height:1.6}
.step.on{border-color:var(--or);box-shadow:0 0 34px rgba(255,138,31,.22)}
.step.on .step-num{color:var(--or);text-shadow:0 0 22px rgba(255,138,31,.8)}

/* ---------- rep band ---------- */
.rep-band{height:clamp(340px,38vw,440px);overflow:hidden;background:radial-gradient(ellipse 60% 80% at 80% 60%,var(--rust) 0%,var(--navy3) 55%,var(--navy) 100%)}
.lines{position:absolute;inset:0;pointer-events:none}
.lines i{position:absolute;left:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,178,92,.75),rgba(255,246,208,.9));transform:translateX(-100%);animation:run 1.5s linear infinite;animation-play-state:paused}
.lines i:nth-child(1){top:14%;width:38%;animation-duration:1.5s;animation-delay:-.2s}
.lines i:nth-child(2){top:23%;width:22%;animation-duration:1.1s;animation-delay:-.9s}
.lines i:nth-child(3){top:31%;width:46%;animation-duration:1.8s;animation-delay:-.5s}
.lines i:nth-child(4){top:42%;width:28%;animation-duration:1.3s;animation-delay:-1.1s}
.lines i:nth-child(5){top:55%;width:52%;animation-duration:1.9s;animation-delay:-1.4s}
.lines i:nth-child(6){top:63%;width:20%;animation-duration:1s;animation-delay:-.3s}
.lines i:nth-child(7){top:72%;width:40%;animation-duration:1.6s;animation-delay:-.8s}
.lines i:nth-child(8){top:84%;width:30%;animation-duration:1.2s;animation-delay:-.6s}
.rep-band.live .lines i{animation-play-state:running}
@keyframes run{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw + 100%))}}
.core{position:absolute;right:14%;top:50%;width:150px;height:150px;margin-top:-75px}
.core b{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,#fff 0%,var(--glow) 25%,var(--or) 55%,rgba(255,138,31,0) 72%);animation:flicker .2s steps(2) infinite paused}
.core i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--or);box-shadow:0 0 24px var(--or);opacity:0;animation:ring2 2.1s cubic-bezier(.1,.6,.3,1) infinite paused}
.core i:nth-child(2){animation-delay:.7s}.core i:nth-child(3){animation-delay:1.4s}
.rep-band.live .core b,.rep-band.live .core i{animation-play-state:running}
@keyframes flicker{50%{transform:scale(1.03,1.06) translateY(-1.5%)}}
@keyframes ring2{0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(2.8)}}
.rep-text{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center}
.rep-big{margin:0;font-family:'Anton',sans-serif;font-style:italic;font-size:clamp(3.4rem,9vw,5.5rem);line-height:.95;text-shadow:0 0 30px var(--or),0 4px 0 var(--navy)}

/* ---------- locaties ---------- */
.locs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 32px;padding:0;list-style:none}
.locs > :nth-child(2){--d:.1s}.locs > :nth-child(3){--d:.2s}
.loc{position:relative;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--navy);display:flex;gap:16px;align-items:flex-start;transition:border-color .3s,transform .3s}
.loc:hover{border-color:var(--or);transform:translateY(-4px)}
.loc svg{width:34px;height:34px;flex:none;stroke:var(--or);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,138,31,.6))}
.loc h3{margin:0 0 6px;font-family:'Anton',sans-serif;font-style:italic;font-weight:400;font-size:28px;letter-spacing:.5px;line-height:1.1;text-transform:uppercase}
.loc p{margin:0;color:var(--mu)}
.avail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:center;padding:32px;border:2px solid var(--or);border-radius:20px;background:linear-gradient(135deg,rgba(58,30,14,.55),var(--navy) 60%);box-shadow:0 0 50px rgba(255,138,31,.2)}
.avail-days{margin:0 0 4px;font-size:18px;font-weight:700}
.avail-time{margin:0;font-family:'Anton',sans-serif;font-style:italic;font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--or);text-shadow:0 0 24px rgba(255,138,31,.6);white-space:nowrap}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.week li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;border-radius:10px;border:2px solid var(--line);background:var(--navy3);font-weight:800;font-size:15px;color:#9295B0}
.week li b{display:block;width:70%;height:6px;border-radius:9px;background:#1E2240}
.week li.on{border-color:var(--or);color:var(--tx)}
.week li.on b{background:var(--or);box-shadow:0 0 12px var(--or)}
.week li:nth-child(1){--d:.1s}.week li:nth-child(2){--d:.25s}.week li:nth-child(3){--d:.4s}.week li:nth-child(4){--d:.55s}
.js .week li.on{transition:border-color .3s var(--d),color .3s var(--d),box-shadow .3s var(--d)}
.js .week:not(.in) li.on{border-color:var(--line);color:#9295B0}
.js .week li.on b{transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1) var(--d)}
.js .week:not(.in) li.on b{transform:scaleX(0)}
.week.in li.on{box-shadow:0 0 18px rgba(255,138,31,.35)}

/* ---------- boeken ---------- */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:start}
.book-intro > p{margin:0 0 28px;font-size:18px;line-height:1.7;color:var(--mu)}
.contact-list{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mail{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--tx);text-decoration:none;padding:6px 0;overflow-wrap:anywhere}
.mail svg{width:20px;height:20px;stroke:var(--or);fill:none;stroke-width:2;flex:none}
.mail:hover{color:var(--or2)}
.form-card{position:relative;background:var(--navy2);border:2px solid var(--or);box-shadow:0 0 50px rgba(255,138,31,.25);border-radius:20px;padding:clamp(22px,4vw,36px)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0}
.f.full{grid-column:1/-1}
.f label,.f legend{font-weight:700;font-size:14px;padding:0}
.opt{font-weight:500;color:var(--mu2)}
.req{color:var(--or)}
.f input,.f select,.f textarea{width:100%;background:var(--navy);border:1px solid var(--line2);color:var(--tx);border-radius:8px;padding:13px 14px;font:500 16px/1.4 'Manrope',sans-serif;transition:border-color .2s,box-shadow .2s}
.f select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.f textarea{resize:vertical;min-height:110px}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.f [aria-invalid="true"]{border-color:#FF6B6B}
.f.flash select{animation:selFlash .9s ease-out}
@keyframes selFlash{0%,100%{box-shadow:0 0 0 0 rgba(255,138,31,0)}30%{box-shadow:0 0 0 4px rgba(255,138,31,.6),0 0 30px rgba(255,138,31,.6)}}
.count{margin:0;font-size:13px;color:var(--mu2);text-align:right}
.count.max{color:var(--err)}
.err{margin:0;color:var(--err);font-size:14px;font-weight:600}
.err:empty{display:none}
fieldset.f{border:0;margin:0;padding:0}
.days{display:flex;flex-wrap:wrap;gap:8px}
.days label{position:relative}
.day{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:44px;padding:10px 16px;border-radius:6px;font-weight:700;font-size:15px;border:2px solid var(--line2);transition:background-color .2s,border-color .2s,color .2s}
.days input:checked + .day{background:var(--or);color:#111;border-color:var(--or)}
.days input:focus-visible + .day{outline:3px solid var(--yl);outline-offset:3px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;font-weight:600;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--or)}
.check a{color:var(--or2)}
.honey{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{width:100%;transform:none;margin-top:6px;font-size:17px;min-height:56px}
.submit > *{transform:none}
.submit:hover{transform:translateY(-2px)}
.note{margin:12px 0 0;font-size:13px;color:var(--mu2);text-align:center}
.req-note{margin:0 0 16px;font-size:13px;color:var(--mu2)}

.wa-float{display:none}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;padding-block:40px;color:var(--mu2);font-size:14px}
footer a{color:var(--mu2)}footer a:hover{color:var(--or2)}
footer .logo{font-size:24px}
.foot-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none}

/* ---------- subpages (privacy, bedankt, 404) ---------- */
.page-main{min-height:60vh}
.page-hero{padding:56px 0 24px}
.prose{max-width:760px;padding-bottom:96px}
.prose h2{font-family:'Anton',sans-serif;font-weight:400;font-style:italic;font-size:clamp(1.6rem,4vw,2.2rem);text-transform:uppercase;margin:44px 0 12px;line-height:1.1}
.prose p,.prose li{color:var(--mu);font-size:17px;line-height:1.7}
.prose ul{padding-left:22px}
.prose strong{color:var(--tx)}
.center-page{min-height:calc(100vh - 220px);display:grid;place-items:center;text-align:center;padding:64px 0 96px;position:relative;overflow:hidden}
.center-page .big{font-family:'Bangers',sans-serif;letter-spacing:3px;font-size:clamp(56px,12vw,120px);color:var(--or);text-shadow:0 0 30px var(--or);line-height:1;margin:0 0 8px}
.center-page p{color:var(--mu);font-size:18px;max-width:520px;margin:0 auto 28px}
.center-page .cta{justify-content:center}
.center-page .shock{left:50%;top:40%;animation-delay:.1s}
.center-page .shock + .shock{animation-delay:.25s}

/* ---------- walking mini avatar ---------- */
.walker{position:fixed;left:0;bottom:6px;z-index:40;width:64px;height:96px;pointer-events:none;transition:opacity .3s,visibility .3s}
.walker[hidden]{display:none}
.walker.ghost,.walker.away{opacity:0;visibility:hidden}
.walker-fig{display:block;width:64px;height:96px;padding:0;margin:0;border:0;background:none;cursor:pointer;pointer-events:auto;position:relative;-webkit-tap-highlight-color:transparent}
.walker-fig:focus-visible{outline:3px solid var(--yl);outline-offset:2px;border-radius:10px}
.walker-fig svg{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.w-inner{transform-origin:50% 100%;transition:transform .15s}
.walker.left .w-inner{transform:scaleX(-1)}
.w-aura{position:absolute;left:-30%;right:-30%;top:-10%;bottom:-2%;background:radial-gradient(ellipse 50% 55% at 50% 60%,rgba(255,226,140,.95),rgba(255,138,31,.75) 45%,rgba(255,138,31,0) 72%);clip-path:polygon(50% 0,58% 18%,70% 6%,72% 26%,88% 16%,84% 38%,100% 36%,90% 56%,100% 72%,86% 78%,90% 100%,10% 100%,14% 78%,0 72%,10% 56%,0 36%,16% 38%,12% 16%,28% 26%,30% 6%,42% 18%);opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s;pointer-events:none}
.w-spark{position:absolute;bottom:20%;width:4px;height:4px;border-radius:50%;background:var(--glow);box-shadow:0 0 6px var(--or);opacity:0;pointer-events:none}
.w-spark:nth-of-type(2){left:18%}.w-spark:nth-of-type(3){left:42%}.w-spark:nth-of-type(4){left:66%}.w-spark:nth-of-type(5){left:84%}
.walker.pu .w-aura{opacity:.95;transform:scale(1);animation:wFlame .16s steps(2) infinite}
.walker.pu .w-spark{animation:wSpark .9s ease-out infinite}
.walker.pu .w-spark:nth-of-type(3){animation-delay:.2s}.walker.pu .w-spark:nth-of-type(4){animation-delay:.4s}.walker.pu .w-spark:nth-of-type(5){animation-delay:.6s}
.walker.pu .w-body{animation:wShake .08s linear infinite}
@keyframes wFlame{50%{transform:scale(1.05,1.1) translateY(-3px)}}
@keyframes wSpark{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-70px)}}
@keyframes wShake{25%{transform:translate(1px,-1px)}75%{transform:translate(-1px,1px)}}
.w-legF,.w-legB{transform-box:view-box}
.w-legF{transform-origin:29px 58px}.w-legB{transform-origin:35px 58px}
.w-armF{transform-box:view-box;transform-origin:25px 41px}.w-armB{transform-box:view-box;transform-origin:39px 41px}
.walker.walking .w-legF{animation:wLeg .72s steps(1,end) infinite}
.walker.walking .w-legB{animation:wLeg .72s steps(1,end) -.36s infinite}
.walker.walking .w-armF{animation:wLeg .72s steps(1,end) -.36s infinite}
.walker.walking .w-armB{animation:wLeg .72s steps(1,end) infinite}
.walker.walking .w-body{animation:wBob .36s steps(1,end) infinite}
@keyframes wLeg{0%{transform:rotate(24deg)}12.5%{transform:rotate(15deg)}25%{transform:rotate(4deg)}37.5%{transform:rotate(-9deg)}50%{transform:rotate(-22deg)}62.5%{transform:rotate(-12deg)}75%{transform:rotate(0deg)}87.5%{transform:rotate(12deg)}}
@keyframes wBob{0%{transform:translateY(0)}25%{transform:translateY(-1.5px)}50%{transform:translateY(-2.5px)}75%{transform:translateY(-1px)}}
.walker-close{position:absolute;top:-8px;right:-12px;width:24px;height:24px;padding:0;border-radius:50%;background:var(--navy2);border:1px solid var(--line2);color:var(--tx);font:700 15px/1 'Manrope',sans-serif;display:grid;place-items:center;cursor:pointer;pointer-events:auto;opacity:0;transition:opacity .2s}
.walker:hover .walker-close,.walker:focus-within .walker-close{opacity:1}
.walker-bubble{position:absolute;bottom:100%;left:0;margin-bottom:10px;white-space:nowrap;background:#FFF6E5;color:var(--navy);font-family:'Bangers',sans-serif;font-size:18px;letter-spacing:1px;line-height:1.2;padding:8px 12px;border-radius:12px;border:3px solid var(--navy);box-shadow:4px 4px 0 var(--or);pointer-events:auto;text-decoration:none}
.walker-bubble:hover{color:var(--navy)}
.walker.flip-bubble .walker-bubble{left:auto;right:0}
.walker-bubble[hidden]{display:none}

/* ---------- custom cursor ---------- */
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor label,.has-cursor .card{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:999;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .2s}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--glow);box-shadow:0 0 10px var(--or),0 0 3px #fff}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid rgba(255,138,31,.85);box-shadow:0 0 14px rgba(255,138,31,.5)}
.cur-ring > span{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--glow);transform:scale(1);transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s;opacity:0}
.cur-ring.hot > span{transform:scale(1.6);opacity:1}
.cursor-on .cur-dot,.cursor-on .cur-ring{opacity:1}
.trail{position:fixed;inset:0;width:100vw;height:100vh;z-index:998;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
 .cards,.locs{grid-template-columns:1fr 1fr}
 .cards > :last-child:nth-child(odd),.locs > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:900px){
 .hero-grid,.over-grid,.book-grid,.avail{grid-template-columns:minmax(0,1fr)}
 .hero-grid{gap:56px}
 .stage{max-width:min(400px,84%)}
 .over-grid{gap:48px}
 .photo-wrap{max-width:520px}
 .shock{left:50%;top:22%}
}
@media (max-width:720px){
 .sec{padding:80px 0}
 .site-header .wrap{padding-block:16px}
 .logo{font-size:26px}
 .nav{width:100%;gap:4px 16px;font-size:14px}
 .nav .btn{min-height:44px;padding:8px 16px;font-size:14px;margin-left:auto}
 .hero{margin-top:-120px;padding:140px 0 96px}
 .lead{font-size:17px}
 .cards,.locs,.steps{grid-template-columns:minmax(0,1fr)}
 .cards > :last-child:nth-child(odd),.locs > :last-child:nth-child(odd){grid-column:auto}
 .card{padding:28px}
 .sec-head{margin-bottom:40px}
 .meter{padding:14px 16px 18px}
 .step{padding:22px}
 .step-num{font-size:52px}
 .core{right:-20px;width:120px;height:120px;margin-top:-60px;top:72%}
 .fields{grid-template-columns:minmax(0,1fr)}
 .avail{padding:22px}
 .week{gap:5px}
 .week li{font-size:13px;padding:12px 2px}
 .wa-float{display:grid;place-items:center;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;width:58px;height:58px;border-radius:50%;background:var(--or);color:#111;box-shadow:0 0 0 3px var(--navy),0 0 26px rgba(255,138,31,.85);text-decoration:none}
 .wa-float svg{width:28px;height:28px}
 footer .wrap{padding-bottom:110px}
 .walker-close{opacity:.85}
}
@media (max-width:400px){
 .nav{gap:2px 12px}
 .btn{padding:14px 20px}
 .chip-loc{font-size:16px;letter-spacing:1px}
}
@media (max-width:399px){.walker{display:none!important}}

/* ---------- reduced motion: alleen fades ---------- */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .hero-inner,.av-body,.av-aura{animation:none!important}
 .shock,.flash,.speed,.sec-head::before,.lines,.core i,.embers,.av-ring,.av-flash,.av-bolts,.trail,.cur-dot,.cur-ring{display:none!important;animation:none!important}
 .rays{animation:none!important;opacity:.14}
 .band-track{animation:none!important;width:auto;justify-content:center}
 .band-set{flex-wrap:wrap;justify-content:center;flex:1 1 auto}
 .band-set + .band-set{display:none}
 .h1,.hero-brand,.chip-loc,.stage,.hero .lead,.hero .tags,.hero .cta,.av-body .b-rim,.av-body .eye-glow{animation:fade .5s ease both!important;animation-duration:.5s!important}
 .js .rv,.js .cert{translate:none!important;scale:none!important;transition:opacity .5s ease!important}
 .card{transform:none!important}
 .card > *{transform:none}
 .card:hover::after,.card.lit::after,.card:focus-within::after{animation:none!important}
 .core b{animation:none!important}
 .walker .w-legF,.walker .w-legB,.walker .w-armF,.walker .w-armB,.walker .w-body{animation:none!important}
}
@keyframes fade{from{opacity:.01}to{opacity:1}}