/* Zelf gehost. Niet met de hand aanpassen: draai
   python3 scripts/vendor_fonts.py opnieuw. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(/assets/fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(/assets/fonts/unbounded-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#07060d; --bg2:#0e0c1a;
  --card:rgba(255,255,255,.04); --line:rgba(255,255,255,.09);
  --text:#f3f1fa; --muted:#a29fb8;
  --c1:#ff3d6e; --c2:#ff9a3d; --c3:#7b5cff; --c4:#22d3ee;
  --grad:linear-gradient(120deg,var(--c1),var(--c2) 45%,var(--c3));
  --grad2:linear-gradient(120deg,var(--c3),var(--c4));
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{font-family:'Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--c1);color:#fff}
.link{color:var(--text);border-bottom:1px solid var(--c1);transition:.2s}
.link:hover{color:var(--c2)}

/* ---------- Emoji-animaties ---------- */
.emo{display:inline-block;font-style:normal;line-height:1}
.wave{transform-origin:70% 75%;animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.wiggle{animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-12deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.flicker{animation:flicker 1.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes flicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.12) rotate(3deg)}}
.zap{animation:zap 2.2s steps(1) infinite}
@keyframes zap{0%,88%,100%{opacity:1;transform:none}90%{opacity:.3;transform:translateX(2px)}94%{opacity:1;transform:translateX(-2px) scale(1.15)}}
.spin-slow{animation:spinE 6s linear infinite}
@keyframes spinE{to{transform:rotate(360deg)}}
.plane{animation:plane 4s ease-in-out infinite}
@keyframes plane{0%{transform:translate(-6px,4px) rotate(-8deg)}50%{transform:translate(6px,-4px) rotate(4deg)}100%{transform:translate(-6px,4px) rotate(-8deg)}}
.pop-hover{transition:transform .35s cubic-bezier(.3,1.8,.5,1)}
*:hover>.pop-hover{transform:scale(1.25) rotate(-10deg)}

/* ---------- Achtergrond ---------- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 18s ease-in-out infinite}
.b1{width:520px;height:520px;background:var(--c1);top:-140px;left:-120px}
.b2{width:460px;height:460px;background:var(--c3);top:30%;right:-160px;animation-delay:-6s}
.b3{width:380px;height:380px;background:var(--c2);bottom:-120px;left:25%;animation-delay:-12s;opacity:.35}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.1)}66%{transform:translate(-40px,50px) scale(.92)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(255,61,110,.18),transparent 65%);transform:translate(-50%,-50%);top:-500px;left:-500px}

/* ---------- Nav ---------- */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(1120px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 18px;border-radius:999px;background:rgba(14,12,26,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);transition:.3s}
.nav.scrolled{background:rgba(14,12,26,.85);box-shadow:0 10px 40px rgba(0,0,0,.4)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;font-weight:900;font-size:20px;letter-spacing:-.5px}
.logo svg{width:38px;height:38px;flex:none;transition:transform .5s cubic-bezier(.6,-0.4,.3,1.6)}
.logo:hover svg{transform:rotate(-12deg) scale(1.1)}
.logo .dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .tld{color:var(--muted);font-weight:500}

/* ---------- Budget ---------- */
.budget{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.budget-card{position:relative;padding:40px 34px;border-radius:32px;border:1px solid var(--line);background:var(--card);overflow:hidden;text-align:center}
.budget-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,61,110,.25),transparent 60%);pointer-events:none}
.budget-card>*{position:relative}
.b-emoji{font-size:90px;line-height:1;margin-bottom:12px;display:inline-block}
.b-emoji.pop{animation:stagePop .5s cubic-bezier(.3,1.7,.5,1)}
.b-label{font-family:'Unbounded';font-size:clamp(20px,2.6vw,28px);margin-bottom:6px}
.b-text{color:var(--muted);min-height:3.2em;max-width:380px;margin:0 auto}
.range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:10px;margin:30px 0 10px;cursor:pointer;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3)) 0/var(--fill,0%) 100% no-repeat,rgba(255,255,255,.1)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:6px solid var(--c1);box-shadow:0 4px 20px rgba(255,61,110,.6);transition:transform .2s}
.range::-webkit-slider-thumb:active{transform:scale(1.2)}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:6px solid var(--c1)}
.r-ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.b-ok{display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:10px 18px;border-radius:999px;background:rgba(61,220,132,.14);color:#7ff0b0;font-weight:700}
.promises{counter-reset:pr;display:grid;gap:14px;margin-top:30px}
.promise{counter-increment:pr;display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:var(--card);transition:.3s}
.promise:hover{transform:translateX(6px);border-color:rgba(255,154,61,.45)}
.promise .emo{font-size:28px;flex:none}
.promise::before{content:counter(pr);flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-family:'Unbounded';font-size:13px;font-weight:700;background:var(--grad)}
.promise b{display:block;font-size:16px}
.promise span{color:var(--muted);font-size:15px}
@media (max-width:980px){.budget{grid-template-columns:1fr;gap:36px}}
.menu{display:flex;gap:2px;list-style:none}
.menu a{position:relative;display:block;padding:9px 14px;border-radius:999px;font-size:15px;color:var(--muted);transition:.25s}
.menu a:hover,.menu a.active{color:var(--text);background:rgba(255,255,255,.07)}
.menu a.active::after{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--c1);transform:translateX(-50%)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;background:var(--grad);background-size:200% 200%;color:#fff;border:0;cursor:pointer;transition:transform .25s,box-shadow .25s,background-position .6s;box-shadow:0 8px 30px rgba(255,61,110,.35)}
.btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 12px 40px rgba(255,61,110,.5)}
.btn.ghost{background:transparent;border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.05)}
.nav .btn{padding:10px 18px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--text);border-radius:2px;transition:.35s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:26px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:40;background:rgba(7,6,13,.96);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;padding:0 32px;gap:4px;clip-path:circle(0% at calc(100% - 44px) 40px);transition:clip-path .7s cubic-bezier(.77,0,.18,1)}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 44px) 40px)}
.mobile-menu a{font-family:'Unbounded',sans-serif;font-size:clamp(28px,8vw,46px);font-weight:700;opacity:0;transform:translateY(20px);transition:.4s;display:flex;align-items:center;gap:14px}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu a small{font-size:.7em}
.mobile-menu a:hover span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Layout ---------- */
section{padding:120px 0;position:relative}
.wrap{width:min(1120px,calc(100% - 32px));margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--grad)}
h1,h2,h3{font-family:'Unbounded',sans-serif;line-height:1.05;letter-spacing:-1px}
h2{font-size:clamp(34px,6vw,64px);margin-bottom:22px}
h2 .emo{font-size:.8em;vertical-align:.05em}
.grad-text{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:640px}

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:140px}
.hero h1{font-size:clamp(52px,12vw,150px);font-weight:900;letter-spacing:-4px;margin:10px 0 24px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.15s}
.hero h1 .bolt{font-size:.55em;vertical-align:.35em;margin-left:.1em}
@keyframes rise{to{transform:none}}
.hero .lead{opacity:0;animation:fade 1s .6s forwards}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;opacity:0;animation:fade 1s .8s forwards}
@keyframes fade{to{opacity:1}}
.typed{color:var(--text);border-right:2px solid var(--c1);padding-right:4px;animation:blink 1s step-end infinite}
@keyframes blink{50%{border-color:transparent}}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:14px;color:var(--muted)}
.scroll-hint{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:2px solid var(--line);border-radius:20px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--c1);transform:translateX(-50%);animation:scroll 1.8s infinite}
@keyframes scroll{to{transform:translate(-50%,14px);opacity:0}}

/* ---------- Marquee ---------- */
.marquee-wrap{overflow:hidden;padding:30px 0;width:100%}
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:rgba(255,255,255,.015);transform:rotate(-1.5deg) scaleX(1.04)}
.marquee.rev{transform:rotate(1.5deg) scaleX(1.04);background:var(--grad)}
.marquee.rev .marquee-track{animation-direction:reverse}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marq 30s linear infinite}
.marquee span{font-family:'Unbounded',sans-serif;font-size:clamp(22px,4vw,40px);font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:48px}
.marquee span:nth-child(even){-webkit-text-stroke:1px rgba(255,255,255,.4);color:transparent}
.marquee.rev span:nth-child(even){-webkit-text-stroke:1px rgba(255,255,255,.85)}
.marquee span::after{content:"✦";color:var(--c1);-webkit-text-stroke:0}
.marquee.rev span::after{color:#fff}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Diensten (sticky showcase) ---------- */
.svc-intro{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.svc{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;margin-top:64px}
.svc-stage{position:sticky;top:110px;height:calc(100vh - 150px);max-height:560px;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;justify-content:space-between;padding:32px}
.svc-stage::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from var(--a,0deg),var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));opacity:.22;filter:blur(40px);animation:rot 12s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rot{to{--a:360deg}}
.svc-stage>*{position:relative}
.stage-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.stage-count{font-family:'Unbounded';font-size:15px;color:var(--text)}
.stage-emoji{font-size:clamp(110px,14vw,170px);text-align:center;line-height:1;filter:drop-shadow(0 20px 40px rgba(0,0,0,.5))}
.stage-emoji.pop{animation:stagePop .6s cubic-bezier(.3,1.7,.5,1)}
@keyframes stagePop{0%{transform:scale(.3) rotate(-30deg);opacity:0}100%{transform:none;opacity:1}}
.stage-title{font-family:'Unbounded';font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.5px;text-align:center}
.stage-dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.stage-dots i{width:8px;height:8px;border-radius:8px;background:rgba(255,255,255,.2);transition:.4s}
.stage-dots i.on{width:28px;background:var(--grad)}
.svc-list{display:flex;flex-direction:column;gap:22px}
.svc-item{padding:34px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);transition:border-color .4s,background .4s;min-height:62vh;display:flex;flex-direction:column;justify-content:center}
.svc-item.on{border-color:rgba(255,61,110,.45);background:rgba(255,255,255,.06)}
.svc-item .m-emoji{display:none;font-size:54px;margin-bottom:14px}
.svc-item .no{font-family:'Unbounded';font-size:13px;color:var(--c2);letter-spacing:2px;margin-bottom:10px}
.svc-item h3{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.svc-item>p{color:var(--muted);font-size:17px}
.svc-item ul{list-style:none;margin:22px 0;display:grid;gap:10px}
.svc-item li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.svc-item li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--grad);margin-top:1px}
.for{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px dashed var(--line);align-self:flex-start}
.for b{color:var(--text);font-weight:500}

/* ---------- Werkwijze ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.pstep{position:relative;padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);transition:.35s}
.pstep:hover{transform:translateY(-6px) rotate(-1deg);border-color:rgba(255,154,61,.5)}
.pstep .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.pstep .top .emo{font-size:40px}
.pstep .top b{font-family:'Unbounded';font-size:40px;font-weight:900;-webkit-text-stroke:1.5px rgba(255,255,255,.3);color:transparent;transition:.35s}
.pstep:hover .top b{color:var(--c2);-webkit-text-stroke-color:var(--c2)}
.pstep h3{font-size:19px;margin-bottom:8px}
.pstep p{color:var(--muted);font-size:15px}

/* ---------- Over mij ---------- */
.about{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:32px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.portrait .ph{position:absolute;inset:0;display:grid;place-items:center;background:conic-gradient(from 210deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));animation:hue 14s linear infinite}
.portrait .ph::after{content:"";position:absolute;inset:3px;border-radius:29px;background:var(--bg2)}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.portrait .initials{position:relative;z-index:1;font-family:'Unbounded';font-weight:900;font-size:clamp(80px,14vw,140px);letter-spacing:-6px}
.portrait .tag{position:absolute;z-index:2;left:18px;bottom:18px;right:18px;padding:14px 18px;border-radius:16px;background:rgba(7,6,13,.7);backdrop-filter:blur(10px);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.portrait .tag b{color:var(--text);display:block;font-size:16px}
.float-chip{position:absolute;z-index:3;padding:10px 16px;border-radius:999px;background:rgba(14,12,26,.85);border:1px solid var(--line);font-size:14px;backdrop-filter:blur(10px);animation:bob 4s ease-in-out infinite;display:flex;gap:6px;align-items:center}
.chip1{top:24px;right:18px}
.chip2{top:42%;left:18px;animation-delay:-2s}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.stat{padding:20px;border-radius:18px;background:var(--card);border:1px solid var(--line);transition:.3s}
.stat:hover{transform:translateY(-4px)}
.stat .emo{font-size:24px;margin-bottom:8px}
.stat b{display:block;font-family:'Unbounded';font-size:clamp(24px,4vw,34px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:13px;color:var(--muted)}
.about p+p{margin-top:16px}

/* ---------- Waarom (bento) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto);gap:18px;margin-top:56px}
.tile{position:relative;padding:28px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;transition:.35s}
.tile:hover{transform:translateY(-4px)}
.tile h3{font-size:20px;margin-bottom:6px}
.tile p{color:var(--muted);font-size:15px}
.tile.wide{grid-column:span 2}
.tile.tall{grid-row:span 2}
.tile.hot{background:var(--grad);border:0}
.tile.hot p{color:rgba(255,255,255,.88)}
.tile .big{font-family:'Unbounded';font-weight:900;font-size:clamp(48px,7vw,84px);line-height:1;margin-bottom:auto}
.tile>.emo{font-size:44px;margin-bottom:auto}
.tile .ring{position:absolute;width:260px;height:260px;border-radius:50%;border:40px solid rgba(123,92,255,.22);top:-90px;right:-90px;animation:spinE 20s linear infinite}
.chips-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:auto}
.chips-cloud span{padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);font-size:14px;transition:.25s}
.chips-cloud span:hover{background:var(--grad2);transform:translateY(-2px) rotate(-2deg)}

/* ---------- Verhaal ---------- */
.timeline{position:relative;margin-top:64px;padding-left:56px}
.timeline::before{content:"";position:absolute;left:19px;top:0;bottom:0;width:2px;background:var(--line)}
.timeline .progress{position:absolute;left:19px;top:0;width:2px;height:0;background:var(--grad);box-shadow:0 0 18px var(--c1)}
.step{position:relative;padding:0 0 56px}
.step .dot{font-family:'Unbounded';font-size:13px;font-weight:700;color:var(--muted);position:absolute;left:-56px;top:-4px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg);border:2px solid var(--line);transition:.4s}
.step.on .dot{color:#fff;background:var(--grad);border-color:var(--c1);box-shadow:0 0 0 6px rgba(255,61,110,.18);transform:scale(1.1)}
.step .when{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--c2);margin-bottom:6px}
.step h3{font-size:clamp(22px,3vw,30px);margin-bottom:10px}
.step p{color:var(--muted);max-width:620px}
.quote{margin-top:24px;padding:44px 32px;border-radius:var(--radius);background:linear-gradient(135deg,rgba(255,61,110,.12),rgba(123,92,255,.12));border:1px solid var(--line);text-align:center}
.quote p{font-family:'Unbounded';font-size:clamp(22px,3.5vw,36px);line-height:1.2;letter-spacing:-.5px}

/* ---------- Portfolio (stacked) ---------- */
.stack{margin-top:56px;display:flex;flex-direction:column;gap:28px;padding-bottom:40px}
.scard{position:sticky;top:calc(100px + var(--i) * 22px);min-height:440px;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);display:grid;grid-template-columns:1.1fr 1fr;transform-origin:50% 0;box-shadow:0 -20px 60px rgba(0,0,0,.45);will-change:transform}
.scard .art{position:relative;overflow:hidden;display:grid;place-items:center}
.scard .art .glyph{font-size:clamp(90px,12vw,150px);filter:drop-shadow(0 20px 40px rgba(0,0,0,.4));transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.scard:hover .art .glyph{transform:scale(1.12) rotate(-8deg)}
.scard .art .big-no{position:absolute;left:24px;bottom:10px;font-family:'Unbounded';font-weight:900;font-size:120px;line-height:1;color:rgba(255,255,255,.08)}
.art1{background:radial-gradient(circle at 30% 30%,var(--c1),transparent 55%),radial-gradient(circle at 80% 70%,var(--c3),transparent 50%),#1a0f24}
.art2{background:radial-gradient(circle at 20% 80%,var(--c4),transparent 55%),radial-gradient(circle at 80% 20%,var(--c3),transparent 55%),#0b1424}
.art3{background:repeating-linear-gradient(45deg,rgba(255,154,61,.14) 0 14px,transparent 14px 28px),radial-gradient(circle at 70% 30%,var(--c2),transparent 60%),#1c1009}
.art4{background:radial-gradient(circle at 70% 60%,var(--c1),transparent 55%),radial-gradient(circle at 20% 20%,var(--c2),transparent 50%),#1a0a0e}
.art5{background:linear-gradient(135deg,#141026,#241a3a)}
.scard .info{padding:40px;display:flex;flex-direction:column;justify-content:center;background:var(--bg2)}
.scard .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.scard .chips span{font-size:12px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08)}
.scard .chips .live{background:rgba(61,220,132,.15);color:#7ff0b0}
.scard .chips .wip{background:rgba(255,154,61,.15);color:#ffc28a}
.scard h3{font-size:clamp(26px,3vw,36px);margin-bottom:12px}
.scard p{color:var(--muted)}
.scard .btn{margin-top:26px;align-self:flex-start}

/* ---------- Blog ---------- */
.blog{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-top:56px;align-items:stretch}
.feature{position:relative;border-radius:32px;overflow:hidden;min-height:480px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px;border:1px solid var(--line)}
.feature .fbg{position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,var(--c1),transparent 50%),radial-gradient(circle at 80% 30%,var(--c3),transparent 50%),radial-gradient(circle at 50% 90%,var(--c2),transparent 55%),#140b1c;transition:transform 1s}
.feature:hover .fbg{transform:scale(1.08) rotate(2deg)}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,6,13,.92) 25%,transparent 75%)}
.feature>*:not(.fbg){position:relative;z-index:1}
.feature .femo{position:absolute;top:32px;right:32px;font-size:80px;z-index:1}
.feature .kicker{display:inline-flex;align-self:flex-start;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:13px;margin-bottom:16px}
.feature h3{font-size:clamp(28px,3.6vw,44px);margin-bottom:12px}
.feature p{color:rgba(255,255,255,.75);max-width:460px}
.feature .more{margin-top:22px;font-weight:700}
.feature .more::after,.topic .arrow{content:"→"}
.topics{display:flex;flex-direction:column;border-radius:32px;border:1px solid var(--line);background:var(--card);overflow:hidden}
.topics-head{padding:24px 28px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.topic{position:relative;display:flex;align-items:center;gap:18px;padding:22px 28px;border-bottom:1px solid var(--line);flex:1;overflow:hidden;transition:padding .35s}
.topic:last-child{border-bottom:0}
.topic::before{content:"";position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:0}
.topic:hover::before{transform:scaleX(1)}
.topic:hover{padding-left:36px}
.topic>*{position:relative;z-index:1}
.topic .tno{font-family:'Unbounded';font-weight:900;font-size:26px;flex:none;-webkit-text-stroke:1px rgba(255,255,255,.35);color:transparent;transition:.35s}
.topic:hover .tno{color:#fff;-webkit-text-stroke-color:#fff}
.topic:hover .emo{transform:scale(1.2) rotate(-12deg)}
.topic h4{font-family:'Unbounded';font-size:17px;font-weight:700;letter-spacing:-.3px}
.topic p{font-size:14px;color:var(--muted);transition:color .3s}
.topic:hover p{color:rgba(255,255,255,.9)}
.topic .arrow{margin-left:auto;font-size:22px;opacity:0;transform:translateX(-14px);transition:.35s}
.topic:hover .arrow{opacity:1;transform:none}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:48px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 56px 24px 0;font-family:'Unbounded';font-size:clamp(16px,2.2vw,20px);position:relative;transition:color .25s;display:flex;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--c2)}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-family:'Space Grotesk';font-size:22px;transition:.35s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--grad);border-color:transparent}
.faq details p{color:var(--muted);padding:0 56px 24px 46px;animation:fadeDown .4s}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}}

/* ---------- Contact ---------- */
.contact{text-align:center}
.contact h2{font-size:clamp(44px,10vw,120px);letter-spacing:-3px}
.contact .lead{margin:0 auto}
.contact-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.big-mail{display:inline-flex;gap:14px;align-items:center;margin-top:36px;font-family:'Unbounded';font-size:clamp(20px,4vw,40px);position:relative}
.big-mail::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:100%;background:var(--grad);transform:scaleX(.2);transform-origin:left;transition:transform .5s}
.big-mail:hover::after{transform:scaleX(1)}
footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .sites a{margin-left:18px;transition:.2s}
footer .sites a:hover{color:var(--text)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ---------- Glitch ---------- */
.glitch{position:relative;display:inline-block}
h2.glitch{display:block}
/* Warme laag uit de gradient (roze → oranje) + koele tegenlaag (paars → cyaan) */
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;white-space:pre-line;pointer-events:none;opacity:0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.glitch::before{background-image:linear-gradient(90deg,var(--c1),var(--c2))}
.glitch::after{background-image:linear-gradient(90deg,var(--c3),var(--c4))}
.glitch.glitching{text-shadow:0 0 18px rgba(255,61,110,.35)}
.glitch.glitching{animation:gl-shake .5s steps(2) both}
.glitch.glitching::before{opacity:1;animation:gl-a .5s steps(1) both}
.glitch.glitching::after{opacity:1;animation:gl-b .5s steps(1) both}
@keyframes gl-a{0%{clip-path:inset(10% 0 70% 0);transform:translate(-6px,-2px)}20%{clip-path:inset(60% 0 10% 0);transform:translate(5px,2px)}40%{clip-path:inset(30% 0 45% 0);transform:translate(-4px,1px)}60%{clip-path:inset(80% 0 2% 0);transform:translate(6px,-1px)}80%{clip-path:inset(5% 0 85% 0);transform:translate(-3px,2px)}100%{clip-path:inset(50% 0 50% 0);opacity:0}}
@keyframes gl-b{0%{clip-path:inset(70% 0 5% 0);transform:translate(5px,1px)}20%{clip-path:inset(15% 0 65% 0);transform:translate(-6px,-1px)}40%{clip-path:inset(45% 0 30% 0);transform:translate(4px,2px)}60%{clip-path:inset(2% 0 80% 0);transform:translate(-5px,0)}80%{clip-path:inset(85% 0 5% 0);transform:translate(3px,-2px)}100%{clip-path:inset(50% 0 50% 0);opacity:0}}
@keyframes gl-shake{0%{transform:none}25%{transform:skewX(-6deg)}50%{transform:skewX(4deg) translateX(2px)}75%{transform:skewX(-2deg)}100%{transform:none}}


/* ---------- Icons ---------- */
.ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.125em}
.ibox{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--grad);box-shadow:0 10px 26px rgba(255,61,110,.3);margin-bottom:20px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.ibox .ic{width:26px;height:26px;color:#fff}
.ibox.sm{width:42px;height:42px;border-radius:12px;margin:0;box-shadow:none}
.ibox.sm .ic{width:20px;height:20px}
.pstep:hover .ibox,.promise:hover .ibox{transform:rotate(-10deg) scale(1.1)}
.pstep:nth-child(2) .ibox{background:var(--grad2)}
.pstep:nth-child(3) .ibox{background:linear-gradient(120deg,var(--c2),var(--c1))}
.pstep:nth-child(4) .ibox{background:linear-gradient(120deg,var(--c4),var(--c3))}
.promise::before{display:none}
.step .dot .ic{width:18px;height:18px}
.topic .tno{-webkit-text-stroke:0;color:var(--muted);font-size:26px;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.topic .tno .ic{width:22px;height:22px}
.topic:hover .tno{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12)}
.kicker{gap:8px;align-items:center}
.faq .qi{width:22px;height:22px;color:var(--c2)}
.big-mail .ic{width:.9em;height:.9em;color:var(--c1)}
.quote .qmark{width:40px;height:40px;color:var(--c1);margin-bottom:14px}
.quote small{display:block;margin-top:14px;color:var(--muted)}

/* ---------- Logo-arm ---------- */
.logo svg.arm{transform-origin:12% 85%;animation:flex 3.5s ease-in-out infinite}
.logo:hover svg.arm{animation:flexHard .5s ease-in-out 2}
@keyframes flex{0%,70%,100%{transform:none}78%{transform:rotate(-8deg) scale(1.08)}86%{transform:rotate(2deg)}}
@keyframes flexHard{50%{transform:rotate(-12deg) scale(1.15)}}

/* ---------- Diensten: leesbaarheid + meer info ---------- */
.svc-item{min-height:0;padding:38px}
.svc-item>p{color:#d4d0e6;font-size:17px;line-height:1.7}
.svc-item li{color:#ece9f6}
.svc-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--c2);margin-bottom:12px;font-weight:700}
.svc-tag .ic{width:18px;height:18px}
.for .ic{width:16px;height:16px;color:var(--c2)}
.stage-name{font-family:'Unbounded';font-size:14px;color:var(--text)}
.more{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);transition:.25s}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{background:rgba(255,255,255,.08)}
.more summary .ic{transition:transform .3s}
.more[open] summary{background:var(--grad);border-color:transparent}
.more[open] summary .ic{transform:rotate(180deg)}
.more-body{padding-top:22px;animation:fadeDown .4s}
.more-body h4{display:flex;align-items:center;gap:10px;font-family:'Unbounded';font-size:15px;margin:0 0 8px}
.more-body h4 .ic{color:var(--c1);width:18px;height:18px}
.more-body p{color:#d4d0e6;margin-bottom:20px}
.mini{list-style:none;display:grid;gap:8px;margin-bottom:24px}
.mini li{position:relative;padding-left:22px;color:#ece9f6}
.mini li::before{content:"";position:absolute;left:4px;top:.65em;width:7px;height:7px;border-radius:50%;background:var(--grad)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .menu,.nav .btn{display:none}
  .burger{display:block}
  .svc{grid-template-columns:1fr;gap:0;margin-top:40px}
  .svc-stage{display:none}
  .svc-item{min-height:0}
  .svc-item .m-emoji{display:block}
  .about{grid-template-columns:1fr;gap:48px}
  .portrait{max-width:420px;margin:0 auto;width:100%}
  .process{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr 1fr}
  .tile.tall{grid-row:auto}
  .scard{grid-template-columns:1fr;min-height:0;top:calc(84px + var(--i) * 14px)}
  .scard .art{min-height:200px}
  .scard .info{padding:28px}
  .blog{grid-template-columns:1fr}
  .feature{min-height:400px}
  section{padding:90px 0}
}
@media (max-width:560px){
  .stats{gap:8px}.stat{padding:14px}
  .quote{padding:28px 20px}
  .hero h1{letter-spacing:-2px}
  .process,.bento{grid-template-columns:1fr}
  .tile.wide{grid-column:auto}
  .svc-item{padding:26px}
  .scard .art{min-height:160px}
  .scard .art .big-no{font-size:80px}
  .feature{padding:26px}
  .feature .femo{font-size:60px;top:24px;right:24px}
  .topic{padding:18px 20px;gap:14px}
  .faq details p{padding:0 0 24px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
  .hero .lead,.hero-cta{opacity:1}
}

/* ===== Nav in ferhat.io-stijl ===== */
.nav{top:0;left:0;transform:none;width:100%;border:0;border-radius:0;padding:18px max(16px,calc((100% - 1120px)/2));
  background:linear-gradient(rgba(7,6,13,.9),rgba(7,6,13,0));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav.scrolled{background:rgba(7,6,13,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--line)}
.logo svg.arm{width:46px;height:46px}
.nav-right{display:flex;align-items:center;gap:10px}
.round{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#13111f;border:1px solid var(--line);color:var(--text);cursor:pointer;transition:.25s;flex:none}
.round:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.round .ic{width:22px;height:22px;stroke:currentColor}
.status{height:52px;padding:0 22px 0 18px;border-radius:999px;display:inline-flex;align-items:center;gap:12px;background:#13111f;border:1px solid rgba(61,220,132,.5);
  font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;transition:.25s;box-shadow:0 0 24px rgba(61,220,132,.12)}
.status:hover{box-shadow:0 0 30px rgba(61,220,132,.3)}
.status i{width:10px;height:10px;border-radius:50%;background:#3ddc84;flex:none;animation:stPulse 2s infinite}
@keyframes stPulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.st-words{display:inline-grid;overflow:hidden}
.st-words span{grid-area:1/1;opacity:0;transform:translateY(100%);transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .45s}
.st-words span.on{opacity:1;transform:none}
.nav .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:static}
.nav .burger span{position:static;width:20px;height:2px;border-radius:2px;background:var(--text);transition:.35s;left:auto;right:auto;top:auto}
.nav .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav .burger.open span:nth-child(2){opacity:0}
.nav .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{clip-path:circle(0% at calc(100% - 42px) 44px)}
.mobile-menu.open{clip-path:circle(150% at calc(100% - 42px) 44px)}
@media (max-width:620px){
  .logo .word{display:none}
  .nav-right{gap:8px}
  .round{width:46px;height:46px}
  .status{height:46px;padding:0 16px 0 14px;letter-spacing:2px;font-size:12px;gap:10px}
}
@media (max-width:350px){.status{letter-spacing:1px;padding:0 12px}}

/* ===== Icons strakker afgewerkt ===== */
.ibox{width:56px;height:56px;border-radius:18px;flex:none;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 30px rgba(0,0,0,.25);position:relative}
.ibox::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pstep:hover .ibox::after,.promise:hover .ibox::after{opacity:1}
.pstep:nth-child(n) .ibox{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02))}
.ibox .ic{width:26px;height:26px;stroke:url(#ig);stroke-width:1.8}
.ibox.sm{width:48px;height:48px;border-radius:15px}
.ibox.sm .ic{width:22px;height:22px}
.promise{align-items:flex-start;gap:18px}
.promise>div:last-child{padding-top:2px}
.step .dot .ic,.topic .tno .ic,.faq .qi,.svc-tag .ic,.for .ic,.more-body h4 .ic{stroke:url(#ig)}
.step.on .dot .ic{stroke:#fff}
.topic:hover .tno .ic{stroke:#fff}
.faq .qi{stroke-width:1.8}

/* ===== Header zonder achtergrond, logo blendt mee ===== */
.nav,.nav.scrolled{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.logo{mix-blend-mode:screen}
.logo .dot{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4s linear infinite}
.round,.status{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(19,17,31,.75)}
.st-word{display:inline-block}
.for{flex-wrap:wrap;border-radius:16px;row-gap:2px}

/* ===== Scroll-indicator ===== */
.progress-bar{position:fixed;top:0;left:0;right:0;height:4px;z-index:70;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4));background-size:200% 100%;animation:barShift 6s linear infinite;
  box-shadow:0 0 14px rgba(255,61,110,.7),0 0 4px rgba(255,154,61,.8)}
@keyframes barShift{to{background-position:200% 0}}

/* ===== Meer-info knop ===== */
.more-btn{margin-top:24px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;font-size:15px;color:var(--text);
  padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);cursor:pointer;transition:.25s}
.more-btn .ic{width:16px;height:16px;transition:transform .3s}
.more-btn:hover{background:var(--grad);border-color:transparent}
.more-btn:hover .ic{transform:translate(2px,-2px)}
button.feature,button.topic{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;background:none;border:0}
button.feature{border:1px solid var(--line)}
button.topic{border-bottom:1px solid var(--line)}
button.topic:last-of-type{border-bottom:0}
.soon{display:flex;gap:10px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,154,61,.1);color:#ffd0a6!important;font-size:15px}
.soon .ic{stroke:currentColor;width:18px;height:18px}

/* ===== Bottom sheet ===== */
.sheet-bg{position:fixed;inset:0;z-index:80;background:rgba(5,4,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:81;left:50%;bottom:0;width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column;
  translate:-50% 0;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.9,.2,1);
  background:linear-gradient(180deg,#171428,#0e0c1a);border:1px solid rgba(255,255,255,.12);border-bottom:0;border-radius:30px 30px 0 0;
  box-shadow:0 -30px 80px rgba(0,0,0,.6)}
.sheet::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:30px 30px 0 0;background:var(--grad)}
.sheet.open{transform:translateY(0)}
.sheet-grab{padding:12px 0 4px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.sheet-grab span{width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.25)}
.sheet-close{position:absolute;top:16px;right:16px;width:44px;height:44px}
.sheet-close .ic{width:20px;height:20px}
.sheet-scroll{overflow-y:auto;padding:10px 32px calc(32px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.sheet-head{display:flex;align-items:center;gap:16px;margin:8px 56px 22px 0;touch-action:none}
.sheet-emoji{font-size:44px;line-height:1}
.sheet-head h3{font-size:clamp(22px,4vw,30px)}
.sheet-body h4{display:flex;align-items:center;gap:10px;font-family:'Unbounded';font-size:15px;margin:0 0 8px}
.sheet-body h4 .ic{stroke:url(#ig);width:18px;height:18px}
.sheet-body p{color:#d4d0e6;margin-bottom:20px;font-size:16px;line-height:1.7}
.sheet-body .btn{margin-top:4px}
body.sheet-open{overflow:hidden}
@media (max-width:560px){.sheet-scroll{padding:6px 22px calc(26px + env(safe-area-inset-bottom))}.sheet{max-height:90vh}}

/* ===== Footer ===== */
.foot{position:relative;padding:90px 0 30px;border-top:1px solid var(--line);overflow:hidden;color:var(--muted);font-size:15px}
.foot::before{content:"";position:absolute;left:50%;top:0;width:60%;height:1px;transform:translateX(-50%);background:var(--grad);box-shadow:0 0 30px var(--c1)}
.foot .wrap{display:block}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:48px}
.foot-motto{font-family:'Unbounded';font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--text);letter-spacing:-.5px;margin-bottom:26px}
.foot-status{display:inline-flex}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col h5{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--c2);margin-bottom:6px}
.foot-col a,.foot-note{display:inline-flex;align-items:center;gap:10px;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-col .ic{stroke:url(#ig);width:18px;height:18px}
.foot-note{font-size:14px}
.foot-word{font-family:'Unbounded';font-weight:900;font-size:clamp(64px,18vw,250px);line-height:.85;letter-spacing:-.06em;text-align:center;margin:70px 0 24px;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);user-select:none;transition:.6s}
.foot-word span{background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;animation:shine 6s linear infinite}
.foot:hover .foot-word{-webkit-text-stroke-color:rgba(255,255,255,.3)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
.to-top{width:46px;height:46px}
.to-top .ic{transform:rotate(-45deg);width:20px;height:20px}
@media (max-width:860px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-top{grid-template-columns:1fr;gap:34px}.foot-bottom{justify-content:center;text-align:center}.foot-word{margin-top:50px}}

/* ===== Diensten: icon i.p.v. emoji ===== */
.stage-icon{width:clamp(130px,14vw,170px);height:clamp(130px,14vw,170px);margin:0 auto;border-radius:40px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px rgba(0,0,0,.35)}
.stage-icon .ic{width:46%;height:46%;stroke:url(#ig);stroke-width:1.5}
.stage-icon.pop{animation:stagePop .6s cubic-bezier(.3,1.7,.5,1)}
.sheet-ic{width:52px;height:52px;margin:0}
.sheet-ic .ic{width:24px;height:24px}

/* ===== Bottom sheet: nette rand ===== */
.sheet{border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -30px 80px rgba(0,0,0,.6)}
.sheet::before{left:28px;right:28px;top:0;height:2px;border-radius:2px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.sheet::after{content:"";position:absolute;left:50%;top:-40px;width:70%;height:80px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,61,110,.18),transparent 70%)}

/* ===== Scroll-indicator links ===== */
.progress-bar{display:none}
.scroll-rail{position:fixed;left:0;top:0;bottom:0;width:3px;z-index:70;background:rgba(255,255,255,.05);pointer-events:none}
.scroll-fill{position:absolute;inset:0;transform-origin:50% 0;transform:scaleY(0);border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#ffb36b,#ff5a7a 45%,#8f6bff);background-size:100% 160%;animation:railDrift 14s ease-in-out infinite alternate}
@keyframes railDrift{to{background-position:0 100%}}
.scroll-tip{position:absolute;left:-2px;top:0;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px #ff8a6a,0 0 20px rgba(143,107,255,.6);opacity:.9}
.sheet-close:focus{outline:none}
.sheet-close:focus-visible{outline:2px solid var(--c2);outline-offset:3px}

/* ===== Scrollbalk: echte overlay ===== */
html{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
.scroll-tip{display:none}
.scroll-fill{box-shadow:0 0 12px rgba(255,90,122,.55)}

/* ===== Laadscherm ===== */
body.loading{overflow:hidden}
body:not(.loaded) .hero *{animation-play-state:paused!important}
.loader{position:fixed;inset:0;z-index:200;background:radial-gradient(circle at 50% 45%,#1a1230,#07060d 70%);display:grid;place-items:center;
  clip-path:circle(150% at 50% 45%);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.loader.done{clip-path:circle(0% at 50% 45%)}
.loader::before{content:"";position:absolute;width:520px;height:520px;left:50%;top:45%;transform:translate(-50%,-50%);border-radius:50%;
  background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));filter:blur(110px);opacity:.28;animation:spinE 8s linear infinite}
.ld-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;width:min(320px,80vw)}
.ld-arm{width:clamp(120px,30vw,170px);height:auto;transform-origin:12% 85%;filter:drop-shadow(0 20px 40px rgba(255,61,110,.35));animation:ldPump 1s ease-in-out infinite}
@keyframes ldPump{50%{transform:scale(1.04) rotate(-2deg)}}
.ld-arm.flex{animation:ldFlex .6s cubic-bezier(.3,1.8,.5,1) forwards}
@keyframes ldFlex{0%{transform:none}50%{transform:rotate(-14deg) scale(1.22)}100%{transform:rotate(-6deg) scale(1.12)}}
.ld-count{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(46px,12vw,72px);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-count small{font-size:.45em;margin-left:4px;vertical-align:.6em}
.ld-meter{width:100%;height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.ld-meter i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);border-radius:6px;background:var(--grad);box-shadow:0 0 16px rgba(255,61,110,.6)}
.ld-msg{font-size:15px;color:var(--muted);letter-spacing:.5px;min-height:1.6em}
.ld-msg.swap{animation:ldSwap .35s ease}
@keyframes ldSwap{from{opacity:0;transform:translateY(8px)}}
.ld-brand{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:'Unbounded',sans-serif;font-weight:900;font-size:16px;letter-spacing:-.3px;color:var(--text);opacity:.7}
.ld-brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-brand em{font-style:normal;color:var(--muted);font-weight:500}

/* ===== Terug naar boven ===== */
.to-top-fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:60;
  height:58px;min-width:58px;padding:0;border:0;border-radius:999px;cursor:pointer;color:var(--text);
  display:flex;align-items:center;justify-content:flex-end;background:rgba(19,17,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(30px) scale(.8);pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.to-top-fab.show{opacity:1;transform:none;pointer-events:auto}
body.sheet-open .to-top-fab{opacity:0;pointer-events:none}
.to-top-fab .ring{position:absolute;right:0;top:0;width:58px;height:58px;transform:rotate(-90deg)}
.to-top-fab .track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.5}
.to-top-fab .bar{fill:none;stroke:url(#rg);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .15s linear}
.to-top-fab .arrow-wrap{width:58px;height:58px;display:grid;place-items:center;flex:none;overflow:hidden;order:2}
.to-top-fab .arrow{width:22px;height:22px;transition:transform .3s}
.to-top-fab .tt-label{order:1;max-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:14px;letter-spacing:.5px;
  transition:max-width .4s cubic-bezier(.7,0,.2,1),padding .4s;padding-left:0}
@media (hover:hover){
  .to-top-fab:hover .tt-label{max-width:90px;padding-left:20px}
  .to-top-fab:hover .arrow{transform:translateY(-3px)}
  .to-top-fab:hover{box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
}
.to-top-fab.launch .arrow{animation:launch .7s cubic-bezier(.5,0,.2,1)}
@keyframes launch{0%{transform:none}40%{transform:translateY(-40px);opacity:0}41%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}
.to-top-fab.launch .ring{animation:ringPop .7s ease}
@keyframes ringPop{40%{transform:rotate(-90deg) scale(1.12)}}

/* Sheet verborgen bij overscroll (iOS) */
.sheet{visibility:hidden;transform:translateY(calc(100% + 120px));transition:transform .5s cubic-bezier(.2,.9,.2,1),visibility 0s linear .5s}
.sheet.open{visibility:visible;transform:translateY(0);transition:transform .5s cubic-bezier(.2,.9,.2,1),visibility 0s}

/* ===== Footer (creatief) ===== */
.ft{position:relative;padding:40px 0 calc(28px + env(safe-area-inset-bottom));overflow:hidden}
.ft::before{content:"";position:absolute;left:50%;bottom:-260px;width:900px;height:520px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,61,110,.28),rgba(123,92,255,.12),transparent);filter:blur(30px);pointer-events:none}
.ft .wrap{position:relative;display:block}
.ft-cta{position:relative;padding:48px 40px;border-radius:36px;overflow:hidden;text-align:center;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1)}
.ft-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(600px circle at 50% 0%,rgba(255,154,61,.16),transparent 60%);pointer-events:none}
.ft-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.ft-dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;animation:stPulse 2s infinite}
.ft-title{font-size:clamp(30px,6vw,60px);letter-spacing:-1.5px;margin-bottom:28px}
.ft-actions{position:relative;z-index:1;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ft-copy{position:relative}
.ft-copy .ic,.ft-actions .ic{width:18px;height:18px;stroke:currentColor}
.ft-copy-hint{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.22);margin-left:4px;transition:.3s}
.ft-copy.copied .ft-copy-hint{background:#3ddc84;color:#062b16}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:16px;margin-top:16px}
.ft-tile{padding:26px;border-radius:26px;background:rgba(255,255,255,.035);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:.35s}
.ft-tile:hover{border-color:rgba(255,255,255,.18);transform:translateY(-3px)}
.ft-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.ft-label .ic{width:16px;height:16px;stroke:url(#ig)}
.ft-clock{font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ft-clock i{font-style:normal;animation:blink 1s step-end infinite;-webkit-text-fill-color:var(--c2)}
.ft-sub{font-size:13px;color:var(--muted)}
.ft-motto{font-family:'Unbounded',sans-serif;font-size:clamp(20px,2.2vw,24px);line-height:1.2;letter-spacing:-.5px;color:var(--text);margin-top:auto}
.ft-pills{display:flex;flex-wrap:wrap;gap:8px}
.ft-pills a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--muted);transition:.25s}
.ft-pills a:hover{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px)}
.ft-word{display:flex;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(64px,19vw,250px);line-height:.9;letter-spacing:-.05em;
  margin:56px 0 22px;user-select:none;cursor:default}
.ft-word span{display:inline-block;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18);transition:color .4s,-webkit-text-stroke-color .4s}
.ft-word span.hl{background:var(--grad);background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;animation:shine 6s linear infinite}
.ft-word.wave span{animation:ftWave .9s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .08s) both}
.ft-word.wave span.hl{animation:ftWave .9s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .08s) both,shine 6s linear infinite}
@keyframes ftWave{0%{transform:translateY(40%);opacity:0}100%{transform:none;opacity:1}}
.ft-word span.lift{animation:ftLift .7s cubic-bezier(.3,1.8,.5,1)!important;-webkit-text-stroke-color:rgba(255,255,255,.6)}
@keyframes ftLift{40%{transform:translateY(-18%) scale(1.08)}}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ft-made{display:inline-flex;align-items:center;gap:6px}
.ft-arm{width:20px;height:20px;stroke:none;animation:flex 3.5s ease-in-out infinite;transform-origin:20% 80%}
@media (max-width:900px){.ft-grid{grid-template-columns:1fr 1fr}.ft-nav{grid-column:1/-1}}
@media (max-width:560px){.ft-grid{grid-template-columns:1fr}.ft-cta{padding:36px 22px}.ft-bottom{justify-content:center;text-align:center;padding-right:70px}}
.ft-title{color:var(--text)}

/* ===== Menu-overlay (creatief) ===== */
.mobile-menu{display:none}
.menu-ov{position:fixed;inset:0;z-index:45;pointer-events:none;visibility:hidden;transition:visibility 0s linear .9s}
.menu-ov.open{pointer-events:auto;visibility:visible;transition:visibility 0s}
.mo-stripes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr)}
.mo-stripes i{background:#0b0916;transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.77,0,.18,1);transition-delay:calc((4 - var(--k)) * .05s)}
.mo-stripes i:nth-child(1){--k:0}.mo-stripes i:nth-child(2){--k:1}.mo-stripes i:nth-child(3){--k:2}.mo-stripes i:nth-child(4){--k:3}.mo-stripes i:nth-child(5){--k:4}
.menu-ov.open .mo-stripes i{transform:scaleY(1);transform-origin:50% 0;transition-delay:calc(var(--k) * .06s)}
.mo-glow{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none;
  background:radial-gradient(600px circle at 85% 10%,rgba(255,61,110,.22),transparent 60%),radial-gradient(700px circle at 10% 95%,rgba(123,92,255,.22),transparent 60%)}
.menu-ov.open .mo-glow{opacity:1;transition-delay:.35s}
.mo-inner{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain;
  width:min(1120px,calc(100% - 32px));margin:0 auto;padding:110px 0 calc(28px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr auto;gap:24px 60px}
.mo-links{display:flex;flex-direction:column;justify-content:center}
.mo-links a{display:flex;align-items:center;gap:16px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(30px);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.2,1);transition-delay:0s}
.menu-ov.open .mo-links a{opacity:1;transform:none;transition-delay:calc(.35s + var(--n) * .045s)}
.mo-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));transition:.35s}
.mo-ic .ic{width:20px;height:20px;stroke:url(#ig)}
.mo-txt{display:flex;flex-direction:column;min-width:0}
.mo-t{position:relative;font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(24px,4.4vw,44px);line-height:1.05;letter-spacing:-1px;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);
  background:var(--grad) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;transition:background-size .5s cubic-bezier(.7,0,.2,1),-webkit-text-stroke-color .3s}
.mo-s{font-size:13px;color:var(--muted);letter-spacing:.5px;margin-top:2px}
.mo-arrow{margin-left:auto;width:22px;height:22px;stroke:var(--text);opacity:0;transform:translate(-12px,12px);transition:.35s}
.mo-links a:hover .mo-t,.mo-links a:focus-visible .mo-t{background-size:100% 100%;-webkit-text-stroke-color:transparent}
.mo-links a:hover .mo-arrow,.mo-links a:focus-visible .mo-arrow{opacity:1;transform:none}
.mo-links a:hover .mo-ic{transform:rotate(-8deg) scale(1.08);border-color:rgba(255,154,61,.5)}
.mo-links a.active .mo-t{-webkit-text-stroke-color:transparent;background-size:100% 100%}
.mo-links a:focus{outline:none}
.mo-preview{align-self:center;padding:40px;border-radius:32px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:0 30px 80px rgba(0,0,0,.4);
  opacity:0;transform:translateY(30px) rotate(2deg);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.2,1)}
.menu-ov.open .mo-preview{opacity:1;transform:none;transition-delay:.55s}
.mo-preview.swap .mo-p-ic,.mo-preview.swap .mo-p-title,.mo-preview.swap .mo-p-desc{animation:ldSwap .35s ease}
.mo-p-ic{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;margin-bottom:26px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02))}
.mo-p-ic .ic{width:44px;height:44px;stroke:url(#ig);stroke-width:1.5}
.mo-p-title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:30px;letter-spacing:-.5px;margin-bottom:10px}
.mo-p-desc{color:#d4d0e6;font-size:17px;line-height:1.6}
.mo-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(20px);transition:.5s}
.menu-ov.open .mo-foot{opacity:1;transform:none;transition-delay:.75s}
.mo-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:14px;color:var(--muted)}
.mo-chip b{color:var(--text);font-variant-numeric:tabular-nums}
.mo-chip .ic{width:16px;height:16px;stroke:url(#ig)}
a.mo-chip:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.mo-dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;animation:stPulse 2s infinite}
.mo-quote{margin-left:auto;font-family:'Unbounded',sans-serif;font-size:14px;color:var(--muted)}
.mo-quote em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
body.menu-open{overflow:hidden}
@media (max-width:900px){
  .mo-inner{grid-template-columns:1fr;padding-top:96px;gap:18px}
  .mo-preview{display:none}
  .mo-quote{margin-left:0;width:100%}
}
@media (max-width:420px){.mo-ic{width:36px;height:36px;border-radius:11px}.mo-ic .ic{width:17px;height:17px}.mo-links a{gap:12px;padding:7px 0}.mo-s{font-size:12px}}
@media (hover:none){.mo-arrow{opacity:.5;transform:none}}
.mo-t{font-size:clamp(22px,min(4.2vw,4.3vh),44px)}
@media (min-width:901px){.mo-links a{padding:6px 0}.mo-inner{padding-top:100px}}
body.menu-open .to-top-fab{opacity:0;pointer-events:none}

/* Menu compacter, mobiel zonder scroll */
.mo-links a{padding:5px 0;gap:14px}
.mo-ic{width:36px;height:36px;border-radius:11px}
.mo-ic .ic{width:17px;height:17px}
.mo-t{font-size:clamp(20px,min(4vw,4.6vh),40px)}
.mo-p-title{margin-bottom:0}
@media (max-width:900px){
  .mo-inner{overflow:hidden;height:100dvh;padding-top:92px;grid-template-rows:1fr auto;gap:14px}
  .mo-links{justify-content:center}
  .mo-t{font-size:clamp(19px,min(7.4vw,4.1dvh),36px)}
  .mo-links a{padding:max(3px,.55dvh) 0}
  .mo-foot{gap:8px;padding-top:14px}
  .mo-chip{padding:7px 12px;font-size:13px}
}
@media (max-width:900px) and (max-height:700px){.mo-quote{display:none}.mo-ic{width:30px;height:30px}.mo-ic .ic{width:15px;height:15px}}

/* Menu: leesbare tekst, icons zonder blok */
.mo-t{color:var(--text);-webkit-text-stroke:0;font-weight:700;letter-spacing:-.5px;
  background:var(--grad) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:currentColor;
  transition:color .3s,opacity .3s}
.mo-links a:hover .mo-t,.mo-links a:focus-visible .mo-t,.mo-links a.active .mo-t{background-size:100% 100%;-webkit-text-fill-color:transparent;-webkit-text-stroke:0}
.mo-links:hover a:not(:hover) .mo-t{opacity:.45}
.mo-ic,.mo-links a:hover .mo-ic{width:auto;height:auto;border:0;background:none;border-radius:0;box-shadow:none}
.mo-ic .ic{width:22px;height:22px;stroke-width:1.9}
.mo-links a:hover .mo-ic{transform:rotate(-10deg) scale(1.15)}
@media (max-width:900px) and (max-height:700px){.mo-ic{width:auto;height:auto}.mo-ic .ic{width:19px;height:19px}}

/* ===== Menu-overlay (terug naar versie 1 + badges) ===== */
.menu-ov{position:fixed;inset:0;z-index:45;visibility:visible;pointer-events:none;
  background:radial-gradient(600px circle at 90% 5%,rgba(255,61,110,.2),transparent 60%),radial-gradient(700px circle at 0% 100%,rgba(123,92,255,.2),transparent 60%),rgba(7,6,13,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  clip-path:circle(0% at calc(100% - max(16px,(100% - 1120px)/2) - 26px) 44px);transition:clip-path .7s cubic-bezier(.77,0,.18,1)}
.menu-ov.open{pointer-events:auto;clip-path:circle(150% at calc(100% - max(16px,(100% - 1120px)/2) - 26px) 44px)}
.menu-ov .mo-inner{position:relative;display:flex;flex-direction:column;justify-content:center;height:100dvh;overflow:hidden;
  width:min(1120px,calc(100% - 32px));margin:0 auto;padding:96px 0 calc(24px + env(safe-area-inset-bottom));grid-template-columns:none;gap:0}
.menu-ov .mo-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0}
.menu-ov .mo-links a{display:block;padding:max(2px,.4dvh) 0;border:0;opacity:0;transform:translateY(24px);transition:opacity .4s,transform .45s cubic-bezier(.2,.9,.2,1);transition-delay:0s}
.menu-ov.open .mo-links a{opacity:1;transform:none;transition-delay:calc(.25s + var(--n) * .05s)}
.menu-ov .mo-links a span{display:inline-block;font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(26px,min(8vw,5dvh),54px);line-height:1.12;letter-spacing:-1px;
  color:var(--text);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.menu-ov .mo-links a:hover span,.menu-ov .mo-links a.active span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.menu-ov .mo-links a:hover span{transform:translateX(10px)}
.menu-ov .mo-links a:focus{outline:none}
.menu-ov .mo-foot{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(16px);transition:.45s}
.menu-ov.open .mo-foot{opacity:1;transform:none;transition-delay:.7s}
.menu-ov .mo-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:14px;color:var(--muted)}
.menu-ov .mo-chip b{color:var(--text);font-variant-numeric:tabular-nums}
.menu-ov .mo-chip .ic{width:17px;height:17px;stroke:url(#ig)}
.menu-ov a.mo-chip:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.menu-ov .mo-chip:first-child{border-color:rgba(61,220,132,.4);color:var(--text)}
@media (max-width:620px){.menu-ov{clip-path:circle(0% at calc(100% - 39px) 41px)}.menu-ov.open{clip-path:circle(150% at calc(100% - 39px) 41px)}}

/* =====================================================================
   Pagina's die niet in de oorspronkelijke onepager zaten:
   /blog, /blog/{slug}, /portfolio, /portfolio/{slug}, /beheer.
   Zelfde tokens en vormentaal als hierboven: ronde hoeken, kaartranden,
   gradient-accenten.
   ===================================================================== */

.pt-0{padding-top:0}
.section-more{margin-top:48px;text-align:center}
.h-sm{font-family:'Unbounded',sans-serif;font-size:clamp(22px,3vw,30px);letter-spacing:-.6px;margin-bottom:28px}

/* ---------- Paginakop ---------- */
.page-hero{padding:160px 0 56px;position:relative}
.page-hero.tall{padding:200px 0 120px;text-align:center}
.page-hero h1{font-family:'Unbounded',sans-serif;font-size:clamp(34px,6vw,60px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:20px}
.page-hero .lead{max-width:640px}
.page-hero.tall .lead{margin:0 auto}
.page-hero.tall .hero-cta{justify-content:center}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:26px}
.crumbs a{border-bottom:1px solid transparent;transition:.2s}
.crumbs a:hover{color:var(--text);border-bottom-color:var(--c1)}
.crumbs b{color:var(--text);font-weight:500;max-width:min(100%,46ch);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs span{opacity:.4}

.notice{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;margin-bottom:22px;
  background:rgba(255,154,61,.14);border:1px solid rgba(255,154,61,.4);color:#ffd0a0;font-size:14px}
.notice .ic{width:16px;height:16px;flex:none}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:44px}
.filter-search{display:flex;align-items:center;gap:12px;flex:1 1 280px;max-width:420px;
  padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);transition:.25s}
.filter-search:focus-within{border-color:rgba(255,61,110,.5);background:rgba(255,255,255,.07)}
.filter-search .ic{width:18px;height:18px;color:var(--muted);flex:none}
.filter-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;outline:none}
.filter-search input::placeholder{color:var(--muted)}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.filters .filter-chips{margin-bottom:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:14px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);transition:.25s}
.chip:hover{color:var(--text);border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
.chip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:700}
.chip.sm{padding:5px 12px;font-size:12px;letter-spacing:.3px}

/* ---------- Lege staat ---------- */
.blog-empty{display:grid;justify-items:center;gap:14px;text-align:center;padding:72px 32px;
  border-radius:32px;border:1px dashed var(--line);background:var(--card)}
.blog-empty .ibox{display:grid;place-items:center;margin-bottom:0}
.blog-empty h3{font-family:'Unbounded',sans-serif;font-size:clamp(20px,3vw,26px);letter-spacing:-.5px}
.blog-empty p{color:var(--muted);max-width:46ch}

/* ---------- Blogoverzicht ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);transition:transform .35s,border-color .35s}
.post-card:hover{transform:translateY(-6px);border-color:rgba(255,154,61,.45)}
.pc-art{display:block;aspect-ratio:16/10;background:#140b1c;overflow:hidden;position:relative}
.pc-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.post-card:hover .pc-art img{transform:scale(1.06)}
.pc-fallback{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,var(--c1),transparent 55%),radial-gradient(circle at 75% 70%,var(--c3),transparent 55%),#140b1c}
.pc-fallback .ic{width:38px;height:38px;opacity:.85}
.pc-body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px;flex:1}
.pc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pc-body h2,.pc-body h3{font-family:'Unbounded',sans-serif;font-size:20px;line-height:1.25;letter-spacing:-.5px}
.pc-body h2 a:hover,.pc-body h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pc-body p{color:var(--muted);font-size:15px;flex:1}
.pc-more{font-weight:700;font-size:14px;color:var(--c2);transition:transform .25s}
.post-card:hover .pc-more{transform:translateX(4px)}

/* Coverfoto in de uitgelichte kaart op de homepagina */
.feature .fimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s;z-index:0}
.feature:hover .fimg{transform:scale(1.06)}
.topic.topic-static{cursor:default}
.topic.topic-static::before{display:none}
.topic.topic-static:hover{padding-left:28px}

/* ---------- Portfoliooverzicht ---------- */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.work-card{display:flex;flex-direction:column;border-radius:28px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);transition:transform .35s,border-color .35s}
.work-card:hover{transform:translateY(-6px);border-color:rgba(123,92,255,.5)}
.work-card.wide{grid-column:span 2}
.wc-art{display:block;aspect-ratio:16/10;background:#140b1c;overflow:hidden;position:relative}
.wc-art img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s}
.work-card:hover .wc-art img{transform:scale(1.05)}
.wc-body{display:flex;flex-direction:column;gap:12px;padding:26px 26px 28px;flex:1}
.wc-body h2,.wc-body h3{font-family:'Unbounded',sans-serif;font-size:21px;line-height:1.25;letter-spacing:-.5px}
.wc-body h2 a:hover,.wc-body h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wc-body p{color:var(--muted);font-size:15px;flex:1}
@media (max-width:760px){.work-card.wide{grid-column:span 1}}

/* De stapelkaarten op de homepagina kregen een echte foto */
.scard .art img{width:100%;height:100%;object-fit:cover;object-position:top center}
.scard .art{overflow:hidden}
.scard .info h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Detailpagina's ---------- */
.single .page-hero{padding-bottom:40px}
.single-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-bottom:20px}
.single-actions{margin-top:26px}
.single-cover{margin:0 0 56px;border-radius:32px;overflow:hidden;border:1px solid var(--line);background:#140b1c}
.single-cover img{display:block;width:100%;height:auto}

.prose{max-width:72ch;font-size:17px}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:'Unbounded',sans-serif;letter-spacing:-.6px;line-height:1.2;margin-top:2em}
.prose h2{font-size:clamp(24px,3.4vw,32px)}
.prose h3{font-size:clamp(20px,2.6vw,24px)}
.prose h4,.prose h5{font-size:18px}
.prose h2.prose-h{display:flex;align-items:center;gap:14px}
.prose p{color:rgba(243,241,250,.82)}
.prose strong{color:var(--text)}
.prose a{color:var(--text);border-bottom:1px solid var(--c1)}
.prose a:hover{color:var(--c2)}
.prose ul,.prose ol{padding-left:1.4em;color:rgba(243,241,250,.82);display:grid;gap:.5em}
.prose li::marker{color:var(--c2)}
.prose blockquote{margin:1.6em 0;padding:22px 26px;border-radius:22px;border:1px solid var(--line);
  background:var(--card);border-left:3px solid var(--c1)}
.prose blockquote p{color:var(--text);font-size:19px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.08)}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.prose img{border-radius:22px}

.single-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
  margin-top:64px;padding:28px 30px;border-radius:28px;border:1px solid var(--line);background:var(--card)}
.sf-author{display:flex;align-items:center;gap:16px}
.sf-author img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:none}
.sf-author b{display:block;font-family:'Unbounded',sans-serif;font-size:16px}
.sf-author span{color:var(--muted);font-size:14px}

/* Portfolio-detail: tekst + zijkolom */
.work-single{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.work-aside{display:grid;gap:18px;position:sticky;top:110px}
.aside-card{padding:24px 26px;border-radius:26px;border:1px solid var(--line);background:var(--card)}
.aside-card .ft-label{margin-bottom:16px}
.aside-list{display:grid;gap:10px;list-style:none}
.aside-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:rgba(243,241,250,.82)}
.aside-list .ic{width:16px;height:16px;flex:none;margin-top:4px;color:var(--c2)}
.chips-cloud.static{position:static;display:flex;flex-wrap:wrap;gap:8px;opacity:1;animation:none;transform:none}
.chips-cloud.static span{position:static;padding:6px 13px;border-radius:999px;font-size:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted)}
.aside-cta p{color:var(--muted);font-size:15px;margin-bottom:18px}
.wide-stats{margin-bottom:0}
@media (max-width:900px){
  .work-single{grid-template-columns:1fr;gap:40px}
  .work-aside{position:static}
}

/* =====================================================================
   Beheerpaneel
   ===================================================================== */

body.admin{background:var(--bg);padding-bottom:80px}
body.admin .bg,body.admin .grain,body.admin .cursor-glow{display:none}
.adm-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:18px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--bg2)}
.adm-brand{font-family:'Unbounded',sans-serif;font-weight:900;font-size:19px;letter-spacing:-.5px}
.adm-brand .dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.adm-brand .tld{color:var(--muted);font-weight:500}
.adm-brand small{margin-left:8px;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.adm-top-right{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.adm-who{font-size:14px;color:var(--muted);margin-right:4px}
.btn.sm{padding:8px 15px;font-size:13px}
.btn.ghost.danger{border-color:rgba(255,61,110,.4);color:#ff8ba6}
.btn.ghost.danger:hover{background:rgba(255,61,110,.14);border-color:rgba(255,61,110,.7)}
form.inline{display:inline}

.adm-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:14px clamp(16px,4vw,40px) 0}
.adm-tabs a{padding:10px 18px;border-radius:999px 999px 0 0;font-size:15px;color:var(--muted);
  border:1px solid transparent;border-bottom:0;transition:.2s}
.adm-tabs a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.adm-tabs a.on{color:var(--text);background:var(--card);border-color:var(--line);font-weight:700}

.adm-main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:34px 0 0}
.adm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.adm-head h1{font-family:'Unbounded',sans-serif;font-size:clamp(26px,4vw,36px);letter-spacing:-1px}
.adm-sub{font-family:'Unbounded',sans-serif;font-size:19px;letter-spacing:-.5px;margin:40px 0 18px;
  padding-top:24px;border-top:1px solid var(--line)}
.adm-form .adm-sub:first-child{margin-top:0;padding-top:0;border-top:0}
.muted{color:var(--muted);font-size:15px}
.muted code,.adm-empty code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.08)}

.flash{padding:14px 20px;border-radius:16px;margin-bottom:26px;font-size:15px;
  background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.4);color:#8af0b8}
.flash.error{background:rgba(255,61,110,.14);border-color:rgba(255,61,110,.45);color:#ff9fb4}

.adm-empty{display:grid;justify-items:start;gap:14px;padding:56px 36px;border-radius:28px;
  border:1px dashed var(--line);background:var(--card)}
.adm-empty h2{font-family:'Unbounded',sans-serif;font-size:22px;letter-spacing:-.5px}
.adm-empty p{color:var(--muted);max-width:60ch}

.adm-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);font-size:15px}
.adm-table th,.adm-table td{padding:16px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.adm-table thead th{background:rgba(255,255,255,.04);font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.adm-table tbody tr:last-child td{border-bottom:0}
.adm-table tbody tr:hover{background:rgba(255,255,255,.03)}
.adm-table .right{text-align:right}
.adm-table .nowrap{white-space:nowrap}
.adm-table .nowrap>*{margin-left:6px}
.adm-title{font-weight:700;display:block}
.adm-title:hover{color:var(--c2)}
.adm-table small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.badge-status{display:inline-flex;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700}
.badge-status.published{background:rgba(61,220,132,.16);color:#7ff0b0}
.badge-status.draft{background:rgba(255,255,255,.09);color:var(--muted)}
@media (max-width:760px){
  .adm-table,.adm-table thead,.adm-table tbody,.adm-table tr,.adm-table th,.adm-table td{display:block}
  .adm-table thead{display:none}
  .adm-table tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .adm-table td{border-bottom:0;padding:8px 18px}
  .adm-table .right{text-align:left}
}

/* ---------- Formulieren ---------- */
.adm-login{max-width:420px;margin:60px auto 0;padding:38px 34px;border-radius:30px;
  border:1px solid var(--line);background:var(--card)}
.adm-login h1{font-family:'Unbounded',sans-serif;font-size:30px;letter-spacing:-1px;margin-bottom:8px}
.adm-login .muted{margin-bottom:26px}

.adm-form{display:grid;gap:22px;max-width:620px}
.adm-form.wide{max-width:none}
.adm-form label{display:grid;gap:8px}
.adm-form label>span{font-size:14px;font-weight:700}
.adm-form label>span small{display:block;margin-top:3px;font-weight:400;color:var(--muted);font-size:13px}
.adm-form label>span small code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.08)}
.req{color:var(--c1)}
.adm-form input[type=text],.adm-form input[type=email],.adm-form input[type=url],
.adm-form input[type=password],.adm-form input[type=number],.adm-form input[type=datetime-local],
.adm-form select,.adm-form textarea{
  width:100%;padding:13px 17px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);font:inherit;outline:none;transition:.2s}
.adm-form textarea{resize:vertical;line-height:1.6}
.adm-form textarea.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.5px;line-height:1.7}
.adm-form input:focus,.adm-form select:focus,.adm-form textarea:focus{
  border-color:rgba(255,61,110,.55);background:rgba(255,255,255,.07)}
.adm-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29fb8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:18px;padding-right:44px}
.adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.input-prefix{display:flex;align-items:center;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);overflow:hidden;transition:.2s}
.input-prefix:focus-within{border-color:rgba(255,61,110,.55)}
.input-prefix>span{padding:13px 0 13px 17px;color:var(--muted);font-size:14px;white-space:nowrap}
.input-prefix input{border:0!important;background:none!important;padding-left:4px!important}
.adm-checks{display:grid;gap:14px}
.adm-form label.check{display:flex;align-items:flex-start;gap:12px}
.adm-form label.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--c1)}
.adm-form label.check>span{font-weight:700}
.adm-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:6px}

/* Beschikbaarheidsbadge uit: grijs bolletje, geen puls, geen groene gloed. */
.status.off{border-color:var(--line)}
.status.off:hover{box-shadow:none}
.status.off i{background:var(--muted);animation:none}
.menu-ov .mo-chip.off{border-color:var(--line);color:var(--muted)}
.mo-chip.off .mo-dot{background:var(--muted);animation:none}

/* =====================================================================
   Diensten, FAQ, juridische pagina's en de cookiebanner.
   ===================================================================== */

/* ---------- Dienstenkaarten ---------- */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.svc-card{display:flex;flex-direction:column;gap:14px;padding:34px 32px;border-radius:28px;
  border:1px solid var(--line);background:var(--card);transition:transform .35s,border-color .35s}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(255,154,61,.45)}
.svc-card .ibox{display:grid;place-items:center}
.svc-card h2,.svc-card h3{font-family:'Unbounded',sans-serif;font-size:22px;line-height:1.2;letter-spacing:-.6px}
.svc-card h2 a:hover,.svc-card h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-card-tag{color:var(--c2);font-size:15px;font-weight:700;margin-top:-6px}
.svc-card p{color:var(--muted);font-size:15px}
.svc-card ul{list-style:none;display:grid;gap:9px;margin-top:2px}
.svc-card li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:rgba(243,241,250,.82)}
.svc-card li .ic{width:16px;height:16px;flex:none;margin-top:4px;color:var(--c2)}
.svc-card .pc-more{margin-top:auto;padding-top:8px}
.svc-cards.compact .svc-card{padding:26px 26px}

.cta-block{margin-top:56px;padding:44px 40px;border-radius:32px;border:1px solid var(--line);
  background:var(--card);position:relative;overflow:hidden;text-align:center}
.cta-block::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(255,61,110,.22),transparent 65%);pointer-events:none}
.cta-block>*{position:relative}
.cta-block h2{font-family:'Unbounded',sans-serif;font-size:clamp(22px,3.4vw,30px);letter-spacing:-.8px;margin-bottom:12px}
.cta-block p{color:var(--muted);max-width:56ch;margin:0 auto 24px}
.cta-block .contact-links{justify-content:center}

/* ---------- Dienstpagina ---------- */
.problem-line{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);border-left:3px solid var(--c2)}
.problem-line .ic{width:18px;height:18px;flex:none;margin-top:4px;color:var(--c2)}
.benefit-grid{display:grid;gap:14px}
.benefit{padding:20px 22px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.benefit b{display:block;font-family:'Unbounded',sans-serif;font-size:16px;letter-spacing:-.3px;margin-bottom:6px}
.benefit span{color:var(--muted);font-size:15px}
.step-list{counter-reset:st;list-style:none;display:grid;gap:12px;padding-left:0}
.step-list li{counter-increment:st;display:flex;align-items:flex-start;gap:14px;
  color:rgba(243,241,250,.82)}
.step-list li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;font-family:'Unbounded';font-size:12px;font-weight:700;background:var(--grad);color:#fff}

/* ---------- FAQ-pagina ---------- */
.faq-group{margin-bottom:52px}
.faq-group .faq{margin-top:0}
.faq-group:target h2,.faq details:target summary{color:var(--c2)}

/* ---------- Juridische pagina's ---------- */
.legal-prose h2{font-size:clamp(20px,2.6vw,25px)}
.legal-prose li{margin-bottom:.2em}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal-table{width:100%;min-width:520px;border-collapse:separate;border-spacing:0;border-radius:18px;
  overflow:hidden;border:1px solid var(--line);background:var(--card);font-size:15px}
.legal-table th,.legal-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table th{background:rgba(255,255,255,.04);font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);font-weight:500;white-space:nowrap}
.legal-table tr:last-child td{border-bottom:0}
.legal-table td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--c2);white-space:nowrap}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.consent-actions{display:flex;flex-wrap:wrap;gap:12px}
.consent-state{color:var(--muted);font-size:14px;min-height:1.4em}

/* ---------- Footer: juridische links ---------- */
.ft-legal{display:flex;flex-wrap:wrap;gap:4px 16px}
.ft-legal a{color:var(--muted);font-size:14px;border-bottom:1px solid transparent;transition:.2s}
.ft-legal a:hover{color:var(--text);border-bottom-color:var(--c1)}

/* ---------- Cookiebanner ---------- */
.cookiebar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,calc(100% + 28px));
  z-index:120;width:min(880px,calc(100% - 24px));padding:20px 24px;border-radius:24px;
  border:1px solid var(--line);background:rgba(14,12,26,.94);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.cookiebar.show{transform:translate(-50%,0);opacity:1}
.cb-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.cb-text{font-size:14.5px;color:var(--muted);flex:1 1 380px;line-height:1.55}
.cb-text b{display:block;color:var(--text);font-size:15.5px;margin-bottom:3px}
.cb-text a{color:var(--text);border-bottom:1px solid var(--c1)}
.cb-text a:hover{color:var(--c2)}
.cb-actions{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.cb-actions .btn{padding:11px 20px;font-size:14px}
@media (max-width:620px){
  .cookiebar{bottom:10px;padding:18px 20px}
  .cb-actions{width:100%}
  .cb-actions .btn{flex:1;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .cookiebar{transition:opacity .2s}
}

/* ---------------------------------------------------------------------
   De budgetkaart blijft staan terwijl de linkerkolom verder scrollt.
   Dat werkt alleen als de grid-items bovenaan uitgelijnd zijn: met
   align-items:center krijgt de kaart een eigen gecentreerde plek in de rij
   en houdt sticky geen ruimte over om in te schuiven. Alleen op een breed
   scherm, want daaronder staat de kaart gewoon onder de tekst en valt er
   niets te plakken.
   --------------------------------------------------------------------- */
@media (min-width:981px){
  .budget{align-items:start}
  .budget-card{position:sticky;top:calc(100px + 1rem)}
}

/* ---------------------------------------------------------------------
   Snel schakelen in het portfolio-overzicht.
   De Bewaar-knoppen staan er voor wie geen JavaScript heeft; zodra de
   scripts draaien krijgt body de klasse quick-live en verdwijnen ze.
   --------------------------------------------------------------------- */
.quick-hint{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.quick-hint .ic{width:16px;height:16px;flex:none;color:var(--c2)}
.quick-hint b{color:var(--text)}

form.quick{display:flex;align-items:center;gap:8px;margin:0}
form.quick.saving{opacity:.55;pointer-events:none}
body.quick-live .quick-save{display:none}

.portfolio-table td.switches{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.portfolio-table tr.is-hidden td:not(.switches){opacity:.5}

.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw-track{position:relative;width:38px;height:22px;border-radius:999px;flex:none;
  background:rgba(255,255,255,.12);border:1px solid var(--line);transition:background .25s,border-color .25s}
.sw-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .25s}
.switch input:checked+.sw-track{background:var(--grad);border-color:transparent}
.switch input:checked+.sw-track::after{transform:translateX(16px);background:#fff}
.switch input:focus-visible+.sw-track{outline:2px solid var(--c2);outline-offset:2px}
.sw-label{font-size:13px;color:var(--muted);transition:color .2s;white-space:nowrap}
.switch input:checked~.sw-label{color:var(--text)}

.portfolio-table select{padding:9px 34px 9px 13px;border-radius:12px;font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  appearance:none;outline:none;transition:.2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29fb8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.portfolio-table select:focus{border-color:rgba(255,61,110,.55);background-color:rgba(255,255,255,.07)}

.flash.warn{background:rgba(255,154,61,.14);border-color:rgba(255,154,61,.45);color:#ffd0a0;
  margin:12px 0 0;padding:10px 16px;font-size:14px}
.hidden{display:none}

.quick-status{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 24px));
  z-index:60;padding:13px 24px;border-radius:999px;font-size:14.5px;font-weight:700;
  background:rgba(61,220,132,.16);border:1px solid rgba(61,220,132,.45);color:#8af0b8;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none}
.quick-status.show{transform:translate(-50%,0);opacity:1}
.quick-status.error{background:rgba(255,61,110,.16);border-color:rgba(255,61,110,.5);color:#ff9fb4}

@media (max-width:760px){
  .portfolio-table td.switches{gap:12px 16px;padding-top:4px}
  form.quick{width:auto}
}

/* De knop in de budgetkaart. De bevestiging erboven blijft, maar krijgt
   minder gewicht: de knop is waar de bezoeker naartoe moet. */
.b-ok{font-size:14px;padding:8px 16px;margin-top:20px}
.b-cta{margin-top:18px;width:100%;justify-content:center}
.b-note{margin-top:12px;font-size:13px;color:var(--muted)}

/* =====================================================================
   Snelheid
   ===================================================================== */

/* Het dimmen van de onderliggende stapelkaarten liep via filter:brightness().
   Een filter dwingt de hele kaart, foto inbegrepen, elk scroll-frame opnieuw
   te tekenen. Een overlay waarvan alleen de opacity verandert, hoeft enkel
   opnieuw samengesteld te worden. */
.scard{will-change:auto}
.scard::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:var(--bg);opacity:var(--dim,0)}

/* Op een telefoon zijn de zware sierelementen het duurste wat er draait:
   drie geanimeerde vlekken met 90px blur, een ruisfilter over het hele
   scherm, en een draaiend kleurenverloop achter het dienstenpodium. Op een
   klein scherm zijn ze nauwelijks zichtbaar en kosten ze elk frame. */
@media (max-width:980px){
  .bg{background:
    radial-gradient(60% 45% at 8% 4%, rgba(255,61,110,.30), transparent 70%),
    radial-gradient(55% 40% at 98% 38%, rgba(123,92,255,.28), transparent 70%),
    radial-gradient(60% 35% at 38% 100%, rgba(255,154,61,.16), transparent 70%)}
  .blob{display:none}
  .grain{display:none}
  .svc-stage::before{animation:none}
  .loader::before{display:none}
}

/* Wie beweging uitzet, krijgt ook de dure effecten niet. */
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  .svc-stage::before{animation:none}
  .loader::before{animation:none}
  .marquee-track{animation:none}
}

/* Het laadscherm overslaan: de eerste keer per bezoek is het een merkmoment,
   daarna is het alleen nog wachttijd. De klasse wordt vóór de eerste tekening
   gezet door het scriptje in head.php, zodat er niets opflikkert. */
html[data-loader="skip"] .loader{display:none}
html[data-loader="skip"] body.loading{overflow:visible}

/* Het portret vulde zijn kader niet: er stond geen regel voor, dus de foto
   viel terug op haar eigen afmetingen binnen een kader van 4/5. */
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-author img{width:58px;height:58px}

/* De hero stond op een telefoon te ver van boven: hij is verticaal
   gecentreerd én heeft 140px padding erboven, en op een lang scherm stapelt
   dat op tot een gat van een paar honderd pixels onder de navigatie. Op een
   klein scherm begint hij nu gewoon bovenaan.
   100svh in plaats van 100vh, want 100vh rekent op een telefoon met de
   adresbalk mee die er niet altijd is. */
@media (max-width:980px){
  .hero{
    align-items:flex-start;
    padding-top:clamp(92px, 15vh, 130px);
    min-height:100svh;
  }
}

/* Het dienstenraster stond op auto-fit vanaf 320px, wat op een breed scherm
   drie kolommen geeft: bij vier kaarten blijft er dan één alleen op de
   tweede rij staan. Nu twee kolommen voor de uitgebreide kaarten, en vier
   voor de compacte onderaan een dienstpagina. */
@media (min-width:760px){
  .svc-cards{grid-template-columns:repeat(2,1fr)}
  /* Een oneven laatste kaart neemt de volle breedte, anders staat er een
     gat naast. */
  .svc-cards>:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:620px){
  .svc-cards.compact{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .svc-cards.compact>:last-child:nth-child(odd){grid-column:auto}
}

/* Zodra de werkwijze-stappen niet meer vier naast elkaar staan, is het icoon
   boven de titel zonde van de hoogte. Icoon links, titel en tekst ernaast. */
@media (max-width:980px){
  .pstep{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;align-items:start}
  .pstep .ibox{grid-row:1/3;margin-bottom:0}
  .pstep h3{grid-column:2;margin-bottom:0;align-self:center}
  .pstep p{grid-column:2}
}

/* Toelichting onder een knop, zodat de knop zelf kort kan blijven. */
.more-note{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------------------
   Over mij
   --------------------------------------------------------------------- */
.about-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.about-hero .portrait{max-width:420px;width:100%;margin-left:auto}
.about-hero .single-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){
  .about-hero{grid-template-columns:1fr;gap:36px}
  .about-hero .portrait{margin:0 auto;max-width:360px}
}

.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
.fact{padding:20px 24px;background:var(--bg)}
.fact dt{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fact dd{font-family:'Unbounded',sans-serif;font-size:16px;letter-spacing:-.3px;margin:0}

.chapters{display:grid;gap:4px;margin-top:56px}
.chapter{display:grid;grid-template-columns:150px 1fr;gap:36px;padding:34px 0;
  border-top:1px solid var(--line)}
.chapter:last-child{border-bottom:1px solid var(--line)}
.ch-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:110px;align-self:start}
.ch-side .ibox{margin-bottom:0}
.ch-year{font-family:'Unbounded',sans-serif;font-size:15px;letter-spacing:-.3px;color:var(--c2)}
.ch-body h2{font-family:'Unbounded',sans-serif;font-size:clamp(22px,3vw,28px);letter-spacing:-.8px;margin-bottom:16px}
.ch-body p{color:rgba(243,241,250,.82);max-width:68ch}
.ch-body p+p{margin-top:14px}
@media (max-width:760px){
  .chapter{grid-template-columns:1fr;gap:16px;padding:28px 0}
  .ch-side{flex-direction:row;align-items:center;position:static;gap:14px}
}

/* De badges stonden vóór de titel en duwden die met margin-bottom:auto naar
   de onderkant van de tegel. Zodra ze over drie regels liepen, plakte de
   tekst eraan vast. Nu: titel, tekst, en de badges eronder met lucht ertussen. */
.tile .chips-cloud{margin-bottom:0;margin-top:20px}

/* Het glitch-effect blijft ook aan staan als de bezoeker beweging vermindert,
   op uitdrukkelijk verzoek: het hoort bij het merk. Maar het algemene blok
   hierboven zet álle animaties uit met !important, en dán loopt gl-shake
   nooit af. Het animationend-event komt dan nooit, en de gekleurde kopieën
   (die op opacity:1 staan) blijven permanent over de kop liggen. Daarom hier
   expliciet weer aangezet, korter en zonder het schudden. */
@media (prefers-reduced-motion:reduce){
  .glitch.glitching{animation:gl-shake .4s steps(2) both!important}
  .glitch.glitching::before{animation:gl-a .4s steps(1) both!important}
  .glitch.glitching::after{animation:gl-b .4s steps(1) both!important}
}