/* 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:not(.mq-dienst) 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:not(.mq-dienst) 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:not(.mq-dienst) span::after{content:"✦";color:var(--c1);-webkit-text-stroke:0}
.marquee.rev span::after{color:#fff}
@keyframes marq{to{transform:translateX(-50%)}}

/* De band onder de hero toont de diensten. */
.marquee.mq-dienst{padding:16px 0}
.marquee.mq-dienst .marquee-track{gap:0;animation-duration:46s}
.marquee.mq-dienst:hover .marquee-track,
.marquee.mq-dienst:focus-within .marquee-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:16px;padding:0 30px;white-space:nowrap;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(19px,3.2vw,32px);
  transition:gap .3s}
.mq-item::after{content:"✦";color:var(--c1);font-size:.5em;margin-left:30px;
  transition:transform .4s,color .3s}
.mq-item:hover::after{transform:rotate(90deg) scale(1.3)}
.mq-ic{display:grid;place-items:center;width:1.55em;height:1.55em;border-radius:50%;flex:none;
  border:1px solid var(--line);background:rgba(255,255,255,.04);transition:.3s}
.mq-ic .ic{width:.62em;height:.62em;color:var(--muted);transition:.3s}
/* Dezelfde afwisseling als in de onderste band: om en om vol en in omtrek. */
.mq-item:nth-child(even) .mq-t{-webkit-text-stroke:1px rgba(255,255,255,.4);color:transparent}
/* Zie feedback_background_clip_text_snijdt_af: padding en negatieve marge aan alle vier de kanten, anders knipt het verloop de staarten van de letters af. */
.mq-t{padding:.14em .08em;margin:-.14em -.08em;transition:.3s}
.mq-pijl{display:inline-flex;width:0;overflow:hidden;opacity:0;transition:.35s}
.mq-pijl .ic{width:.5em;height:.5em;color:var(--c1)}
.mq-item:hover .mq-t,.mq-item:focus-visible .mq-t{
  -webkit-text-stroke:0;color:transparent;
  background:var(--grad);-webkit-background-clip:text;background-clip:text}
.mq-item:hover .mq-ic,.mq-item:focus-visible .mq-ic{
  border-color:rgba(255,61,110,.55);background:rgba(255,61,110,.12);transform:rotate(-8deg) scale(1.06)}
.mq-item:hover .mq-ic .ic,.mq-item:focus-visible .mq-ic .ic{color:var(--c1)}
.mq-item:hover .mq-pijl,.mq-item:focus-visible .mq-pijl{width:.75em;opacity:1}
.mq-item:focus-visible{outline:none}
@media (hover:none){
  /* Zonder muis valt er niets te zweven: dan staat alles meteen leesbaar. */
  .mq-item:nth-child(even) .mq-t{-webkit-text-stroke:0;color:var(--text)}
}

/* ---------- 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}
/* Evenveel kolommen als er kaarten zijn, tot drie. */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
.stats:not(:has(.stat:nth-child(3))){grid-template-columns:repeat(2,1fr)}
.stats:not(:has(.stat:nth-child(2))){grid-template-columns:minmax(0,1fr)}
/* Eén cijfer naast zijn label, anders wordt die ene kaart een leeg vlak. */
.stats:not(:has(.stat:nth-child(2))) .stat{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.stats:not(:has(.stat:nth-child(2))) .stat b{display:inline}
.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}
/* De schermafdruk vult de hele helft van de kaart, zonder gekleurde rand
   eromheen: het gaat om het werk, niet om het vlak. */
.scard .art{position:relative;overflow:hidden;display:grid;place-items:stretch;background:#120a19}
.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)}
.sc-venster.shot{position:relative;display:flex;flex-direction:column;width:100%;height:100%;
  background:#120a19}
.sc-venster .shot-bar{padding:10px 15px;gap:10px;flex:none}
.sc-venster .shot-dots i{width:9px;height:9px}
.sc-venster .shot-url{padding:3px 11px;font-size:12px}
.sc-venster .shot-view{flex:1;min-height:0;overflow:hidden}
.sc-venster .shot-view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
/* Met .scard ervoor, want .pf-gsm staat verderop in dit bestand en zet de
   telefoon anders weer op onzichtbaar tot zijn blok actief wordt. */
.scard .sc-gsm{right:20px;bottom:20px;width:auto;--tel-b:96px;opacity:1;transform:rotate(3deg)}
.sc-leeg{display:grid;place-items:center;width:84px;height:84px;border-radius:24px;
  border:1px solid var(--line);background:rgba(255,255,255,.05)}
.sc-leeg .ic{width:34px;height:34px;color:var(--muted)}

/* ---------- Telefoonmockup ----------
   De maten komen van een iPhone 16 Pro: scherm 393 op 852 punten, statusbalk
   54 hoog, dynamic island 125 op 36 met 11 punten erboven, schermhoeken met
   een straal van 55. Alles staat hier als breuk van de schermbreedte, zodat
   het toestel op elke maat dezelfde verhoudingen houdt.

   --tel-b is de buitenbreedte en wordt van buitenaf gezet. Die variabele mag
   hier niet gedeclareerd worden: een eigen waarde op .tel wint van wat de
   ouder doorgeeft. Vandaar overal een terugvalwaarde. */
.tel{--rand:calc(var(--tel-b,140px) * .026);
  --scherm:calc(var(--tel-b,140px) - var(--rand) * 2);
  position:relative;display:inline-block;width:var(--tel-b,140px);padding:var(--rand);
  border-radius:calc(var(--scherm) * .14 + var(--rand));
  background:linear-gradient(145deg,#6e6e75,#2a2a30 18%,#1b1b1f 50%,#2d2d33 82%,#6e6e75);
  box-shadow:0 18px 44px rgba(0,0,0,.6)}
/* Het lichte randje van het titanium, net binnen de behuizing. */
.tel::after{content:'';position:absolute;inset:calc(var(--rand) * .34);border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}
/* Het scherm houdt de verhouding van het toestel: 393 op 852 punten. De
   afdruk begint onder de statusbalk, want ze is gemaakt vanaf de bovenkant van
   de pagina en heeft die balk dus niet. Daarboven blijft het zwart, zoals bij
   een app met een donkere statusbalk. */
.tel-scherm{position:relative;display:block;overflow:hidden;background:#15151a;
  aspect-ratio:393 / 852;border-radius:calc(var(--scherm) * .14)}

/* De statusbalk ligt over het beeld, zoals op het toestel zelf: uur links,
   de dynamic island in het midden, de tekens rechts. Een raster van
   1fr auto 1fr houdt de pil gecentreerd wat het uur ook is. */
.tel-balk{position:absolute;inset:0 0 auto 0;z-index:3;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;
  height:calc(var(--scherm) * .1374);
  padding:calc(var(--scherm) * .012) calc(var(--scherm) * .05) 0 calc(var(--scherm) * .055);
  color:#fff}
/* Niet de letter van de site: die heeft een eigenzinnige 1 en 7 en dan leest
   het uur meteen als iets anders dan een telefoon. De systeemletter geeft op
   een Mac of iPhone de echte SF Pro, en elders een neutrale grotesk. */
.tel-uur{justify-self:start;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:calc(var(--scherm) * .0458);line-height:1;font-weight:600;
  letter-spacing:0;font-variant-numeric:tabular-nums}
.tel-eiland{justify-self:center;position:relative;
  width:calc(var(--scherm) * .318);height:calc(var(--scherm) * .0916);border-radius:999px;
  background:#000;box-shadow:inset 0 0 0 1px #1a1a1f}
/* Het lensje van de camera, rechts in de pil. */
.tel-eiland::after{content:'';position:absolute;right:13%;top:50%;height:32%;aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2b3550,#0b0d14 70%)}
.tel-iconen{display:flex;justify-content:flex-end;align-items:center;
  gap:calc(var(--scherm) * .014);color:#fff}
.tel-iconen svg{height:calc(var(--scherm) * .0345);width:auto;fill:currentColor}

/* De knoppen op de zijkant: actieknop en volume links, aan/uit rechts. */
.tel-knop{position:absolute;width:calc(var(--tel-b,140px) * .009);border-radius:2px;
  background:linear-gradient(90deg,#4a4a52,#23232a);z-index:0}
.tel-knop-actie{left:calc(var(--tel-b,140px) * -.007);top:17%;height:4.2%}
.tel-knop-op{left:calc(var(--tel-b,140px) * -.007);top:23.4%;height:5.8%}
.tel-knop-neer{left:calc(var(--tel-b,140px) * -.007);top:30.6%;height:5.8%}
.tel-knop-aan{right:calc(var(--tel-b,140px) * -.007);top:25.6%;height:9%;
  background:linear-gradient(270deg,#4a4a52,#23232a)}

.tel img{position:absolute;left:0;top:6.34%;display:block;width:100%;height:93.66%;
  object-fit:cover;object-position:top center}
@media (max-width:760px){
  .scard .sc-gsm{right:12px;bottom:12px;--tel-b:74px}
}
.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)}
.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 h3 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.scard p{color:var(--muted)}
.scard .btn{margin-top:26px;align-self:flex-start}
.scard .pc-more{margin-top:24px;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}
/* Open staat: het plusteken draait naar een kruis. */
.faq details[open] summary::after{transform:rotate(45deg);background:var(--grad);
  border-color:transparent;color:#fff;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.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}
h1.glitch,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. */

.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 ---------- */
/* auto-fit i.p.v. auto-fill: bij twee kaarten blijft er anders een lege derde kolom staan. */
/* De projectkaart, zoals ze op de dienstenpagina's staat. */
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.work-grid:not(:has(.work-card:nth-child(2))){grid-template-columns:minmax(0,540px);justify-content:center}
.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)}
.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}

/* ---------- Portfolio: index links, het werk rechts ----------
   De lijst blijft staan en loopt mee met waar je bent; de blokken ernaast
   scrollen. Welk blok actief is komt uit een scroll-luisteraar en niet uit een
   IntersectionObserver: die vuurt alleen bij het binnen- en buitengaan van een
   band, en slaat een blok over dat hoger is dan die band. */
/* Een vaste breedte voor de index: met overflow:hidden draagt de lijst niets
   bij aan de breedte van zijn kolom, en dan valt hij samen tot een paar letters. */
.pf-werk{display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;margin-top:38px}
/* Bij één of twee projecten, zoals in een filter, heeft een index geen zin. */
.pf-werk.pf-alleen{grid-template-columns:minmax(0,1fr)}
.pf-werk.pf-alleen .pf-index{display:none}
.pf-werk.pf-alleen .pf-blok{opacity:1;max-width:none}

.pf-index{position:sticky;top:110px;align-self:start;display:flex;gap:18px;
  max-height:calc(100vh - 150px)}
.pf-rail{position:relative;width:2px;flex:none;border-radius:2px;background:var(--line)}
.pf-rail i{position:absolute;left:0;right:0;top:0;height:0;border-radius:2px;background:var(--grad);
  transition:height .5s cubic-bezier(.2,.8,.2,1)}
.pf-index ol{list-style:none;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.pf-index a{display:block;padding:7px 0;font-size:14.5px;line-height:1.3;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .35s,opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.pf-index a:hover{color:var(--text)}
/* Hoe verder van het actieve project, hoe verder weg de regel staat. */
.pf-index a[data-ver="1"]{opacity:.72}
.pf-index a[data-ver="2"]{opacity:.5}
.pf-index a[data-ver="3"]{opacity:.34}
.pf-index a.on{color:var(--text);opacity:1;font-weight:700;transform:translateX(5px);
  font-family:'Unbounded',sans-serif;font-size:15px;letter-spacing:-.3px}

.pf-blokken{display:flex;flex-direction:column;gap:92px}
.pf-blok{scroll-margin-top:104px;display:grid;gap:28px;max-width:800px;opacity:.42;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1)}
.pf-blok.on{opacity:1}

.pf-venster.shot{position:relative;border-radius:22px;background:#120a19;overflow:visible;
  border:1px solid var(--line);box-shadow:0 34px 80px rgba(0,0,0,.5);
  transform:perspective(1600px) rotateX(var(--kantel,0deg));transform-origin:50% 100%;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.pf-venster .shot-bar{border-radius:22px 22px 0 0}
.pf-venster .shot-view{border-radius:0 0 22px 22px;overflow:hidden}
.pf-blok.on .pf-venster.shot{box-shadow:0 44px 100px rgba(0,0,0,.6)}
.pf-venster:hover .shot-view img{transform:scale(1.03)}

/* De telefoonversie hangt over de onderste hoek van het venster. */
/* Het omhulsel bepaalt alleen waar de telefoon hangt en hoe breed hij is;
   de mockup zelf staat bij .tel verderop. */
.pf-gsm{position:absolute;right:-14px;bottom:-34px;--tel-b:132px;line-height:0;
  transform:rotate(3deg) translateY(10px);opacity:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.pf-blok.on .pf-gsm{opacity:1;transform:rotate(3deg)}

.pf-info{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pf-info h2{font-family:'Unbounded',sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-1px}
.pf-info h2 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-info p{color:var(--muted);font-size:16px;max-width:62ch}

.pf-cijfers{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pf-cijfers li{display:flex;flex-direction:column;gap:3px;padding:12px 18px;border-radius:16px;
  border:1px solid var(--line);background:var(--card);min-width:118px}
.pf-cijfers b{font-family:'Unbounded',sans-serif;font-size:21px;letter-spacing:-.6px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.06em .1em;margin:-.06em -.1em}
.pf-cijfers span{font-size:12.5px;color:var(--muted);line-height:1.35}

.pf-tech{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.pf-tech li{padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  font-size:12px;color:var(--muted)}

@media (max-width:1100px){
  .pf-werk{grid-template-columns:1fr;gap:0}
  .pf-index{display:none}
  .pf-blokken{gap:76px}
  .pf-blok{max-width:none}
  .pf-blok{opacity:1}
  .pf-venster.shot{transform:none}
  .pf-gsm{opacity:1;transform:rotate(3deg);--tel-b:112px;right:-6px;bottom:-26px}
}
@media (max-width:620px){
  /* Ook op een telefoon blijft de telefoonversie staan, alleen kleiner. */
  .pf-gsm{--tel-b:92px;right:-2px;bottom:-18px}
  .pf-cijfers li{min-width:0;flex:1 1 44%;padding:11px 14px}
}
@media (prefers-reduced-motion:reduce){
  .pf-blok{opacity:1}
  .pf-venster.shot{transform:none}
  .pf-gsm{opacity:1;transform:rotate(3deg)}
}

/* 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)}
/* Een citaat in een stuk is een adempauze, geen melding. */
.prose blockquote{position:relative;margin:2.6em 0;padding:0 0 0 60px;
  border:0;background:none;border-radius:0}
.prose blockquote::before{content:"\201C";position:absolute;left:-2px;top:-.2em;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:78px;line-height:1;
  background:var(--grad);background-size:200% auto;-webkit-background-clip:text;
  background-clip:text;color:transparent;animation:shine 6s linear infinite;
  pointer-events:none}
.prose blockquote p{font-family:'Unbounded',sans-serif;font-weight:500;
  font-size:clamp(18px,2.3vw,23px);line-height:1.35;letter-spacing:-.5px;
  color:var(--text)}
.prose blockquote>*+*{margin-top:.6em}

@media (max-width:620px){
  .prose blockquote{padding-left:42px;margin:2.2em 0}
  .prose blockquote::before{font-size:58px}
}

/* Het kleurverloop schuift traag door het aanhalingsteken; wie beweging liever kwijt is, krijgt het gewoon stil. */
@media (prefers-reduced-motion:reduce){
  .prose blockquote::before{animation:none}
}
.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}
/* Zijbalk links, inhoud rechts. */
body.admin.heeft-zijbalk{--zij:248px;padding-bottom:0}
.adm-zij{position:fixed;top:0;left:0;bottom:0;width:var(--zij);z-index:40;
  display:flex;flex-direction:column;gap:26px;padding:24px 18px;
  border-right:1px solid var(--line);background:var(--bg2);overflow-y:auto}
.adm-nav{display:grid;gap:3px}
.adm-nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:14px;
  font-size:15px;color:var(--muted);transition:.2s}
.adm-nav a .ic{width:17px;height:17px;flex:none}
.adm-nav a span{flex:1;min-width:0}
.adm-nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.adm-nav a.on{color:#fff;font-weight:700;background:var(--grad);box-shadow:0 8px 24px rgba(255,61,110,.28)}
.adm-zij-voet{margin-top:auto;display:grid;gap:3px;padding-top:18px;border-top:1px solid var(--line)}
.adm-zij-link{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:14px;
  font-size:14px;color:var(--muted);transition:.2s}
.adm-zij-link .ic{width:15px;height:15px;flex:none}
.adm-zij-link:hover{color:var(--text);background:rgba(255,255,255,.06)}
.adm-zij-wie{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 13px 0}
.adm-menuknop{display:none;position:fixed;z-index:60;top:14px;left:14px;
  align-items:center;gap:8px;padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:rgba(14,12,26,.92);color:var(--text);
  font:inherit;font-size:14px;font-weight:700;backdrop-filter:blur(14px)}
.adm-menuknop .ic{width:15px;height:15px}
.adm-sluit{position:fixed;inset:0;z-index:35;background:rgba(5,4,10,.6);backdrop-filter:blur(4px)}

.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)}
/* In de zijbalk eronder in plaats van ernaast: "klantpaneel" past niet naast het woordmerk en brak anders op een onvoorspelbare plek af. */
.adm-zij .adm-brand{display:block;padding:4px 13px 0}
.adm-zij .adm-brand small{display:block;margin:4px 0 0}
/* Zie feedback_background_clip_text_snijdt_af: lucht aan alle vier de kanten, anders valt het puntje op de i weg. */
.adm-zij .adm-brand .dot{padding:.22em .07em;margin:-.22em -.07em}
.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}

/* Onderverdeling binnen één tabblad: kleiner, zonder vulling, zodat het duidelijk een niveau lager is. */
.adm-subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 32px}
.adm-subtabs a{display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;font-size:13px;
  border:1px solid transparent;color:var(--muted);transition:.25s}
.adm-subtabs a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.adm-subtabs a.on{color:var(--text);border-color:var(--line);background:var(--card);font-weight:700}
.adm-deel[hidden]{display:none}

.adm-main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:34px 0 80px}
body.admin.heeft-zijbalk .adm-main{width:auto;margin:0 0 0 var(--zij);
  padding:34px clamp(20px,3vw,40px) 90px;max-width:1240px}
/* Het inlogscherm heeft geen zijbalk, dus daar blijft het midden het midden. */
.adm-main-kaal{padding-top:0}

@media (max-width:1040px){
  body.admin.heeft-zijbalk{--zij:0px}
  .adm-menuknop{display:inline-flex}
  body.admin.heeft-zijbalk .adm-main{margin-left:0;padding-top:76px}
  /* Extra lucht bovenaan, anders ligt de menuknop over het woordmerk. */
  .adm-zij{width:276px;padding-top:76px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
  body.menu-open .adm-zij{transform:none;box-shadow:0 0 60px rgba(0,0,0,.6)}
}
@media (prefers-reduced-motion:reduce){.adm-zij{transition:none}}
.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}
}
@media (min-width:761px) and (max-width:1240px){
  .portfolio-table,.portfolio-table thead,.portfolio-table tbody,
  .portfolio-table tr,.portfolio-table th,.portfolio-table td{display:block}
  .portfolio-table thead{display:none}
  .portfolio-table tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .portfolio-table td{border-bottom:0;padding:8px 18px}
  .portfolio-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}

/* 620px liet op een breed scherm de halve pagina leeg staan terwijl de velden
   in .adm-row er met twee tegelijk in moesten. De inlog- en herstelformulieren
   worden al door .adm-login smal gehouden. */
.adm-form{display:grid;gap:22px;max-width:880px}
.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)}
/* Niet opnoemen welke soorten velden donker worden, maar welke het niet
   worden. Met een opsomming viel er altijd eentje buiten: een datumveld bleef
   wit tussen de donkere velden omdat type=date nooit was toegevoegd.
   color-scheme zorgt dat de kalender en de klok van de browser zelf ook donker
   opengaan in plaats van als een wit vlak. */
.adm-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]),
.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;
  color-scheme:dark}
.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}
/* Onderaan uitlijnen, anders hangt een veld hoger dan zijn buur zodra één
   label een extra regel uitleg heeft. */
.adm-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;align-items:end}
.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}
/* Twee groot, drie compact eronder. */
.svc-rij-groot{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.svc-rij-klein{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));margin-top:24px}
.svc-klein{padding:26px 24px;gap:11px}
.svc-klein h2{font-size:19px}
.svc-klein .svc-card-tag{font-size:14px}
.svc-klein p,.svc-klein li{font-size:14.5px}
.svc-klein .ibox{width:44px;height:44px}
.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 ---------- */
/* De probleemregel is een kaart met een waarschuwingsrand. */
.problem-line{position:relative;overflow:hidden;isolation:isolate;
  padding:22px 26px 22px 28px;border-radius:24px;
  border:1px solid rgba(255,154,61,.28);border-left:3px solid var(--c2);
  background:linear-gradient(135deg,rgba(255,154,61,.12),rgba(255,61,110,.06) 55%,rgba(255,255,255,.03));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07);
  color:rgba(243,241,250,.86)}
.problem-line b{color:#fff}
.problem-line > .ic{position:absolute;right:-14px;bottom:-26px;z-index:-1;
  width:150px;height:150px;margin:0;color:var(--c2);opacity:.1;
  transform:rotate(-8deg);pointer-events:none}
@media (max-width:620px){
  .problem-line{padding:20px 22px}
  .problem-line > .ic{width:112px;height:112px;right:-18px;bottom:-22px}
}

/* ---------- Dienstpagina: het pad ---------- Een lichtpunt loopt het pad af. */
/* De ruimte tussen de stappen is bewust groot genoeg: de nummerblokjes zijn even hoog als een rij, dus zonder die ruimte zou de lijn er volledig achter verdwijnen en blijft er van het pad niets over. */
/* .prose ol zet eigen padding en gap en is specifieker dan .pad alleen; vandaar overal .prose .pad. */
.prose .pad{position:relative;list-style:none;display:grid;gap:12px;padding:8px 0 8px 58px;margin-top:6px}
.prose .pad::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 10%,rgba(255,255,255,.16) 90%,transparent)}
/* Het licht is een wazige vlek die groter is dan het blokje, zodat hij er als een gloed omheen uitkomt in plaats van erachter te verdwijnen. */
.prose .pad-licht{position:absolute;left:-9px;top:0;width:56px;height:56px;border-radius:50%;
  background:var(--grad);filter:blur(13px);opacity:0;
  transform:translateY(var(--y,0));
  transition:transform .55s cubic-bezier(.34,1.3,.5,1),opacity .45s;pointer-events:none}
.prose .pad.is-wakker .pad-licht{opacity:.5}
.pad-stap{position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:11px 16px 11px 14px;border-radius:16px;
  color:rgba(243,241,250,.78);transition:background .3s,color .3s,transform .35s}
/* top:5px zet het blokje gelijk met de eerste regel. */
.pad-nr{position:absolute;left:-58px;top:5px;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;flex:none;
  font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;letter-spacing:-.3px;
  color:var(--muted);background:var(--bg);border:1px solid var(--line);
  transition:background .35s,color .35s,border-color .35s,transform .35s,box-shadow .35s}
.pad-tekst{min-width:0}
.pad-stap:hover,.pad-stap.is-aan{background:rgba(255,255,255,.05);color:#fff;transform:translateX(7px)}
.pad-stap:hover .pad-nr,.pad-stap.is-aan .pad-nr{color:#fff;background:var(--grad);border-color:transparent;
  transform:scale(1.08) rotate(-5deg);box-shadow:0 10px 24px rgba(255,61,110,.3)}
@media (max-width:620px){
  .prose .pad{padding-left:50px}
  .prose .pad::before{left:16px}
  .prose .pad-licht{left:-12px}
  .prose .pad-nr{left:-50px;top:6px;width:33px;height:33px;border-radius:11px;font-size:12px}
  .pad-stap{gap:12px;padding:10px 12px}
}
/* Wie beweging liever kwijt is, krijgt de lijst zonder rondlopend licht. */
@media (prefers-reduced-motion:reduce){
  .pad-licht{display:none}
  .pad-stap,.pad-nr{transition:none}
  .pad-stap:hover{transform:none}
}
.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. */
@media (min-width:981px){
  .budget{align-items:start}
  .budget-card{position:sticky;top:calc(100px + 1rem)}
}

/* --------------------------------------------------------------------- Snel schakelen in het portfolio-overzicht. */
.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}

/* Volgorde van het portfolio: slepen aan het handvat, of nummers zonder javascript. */
.sleep-hint{display:none}
body.sort-live .sleep-hint{display:flex}
.ord{white-space:nowrap}
.ord-grip{display:none;padding:6px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);cursor:grab;touch-action:none}
.ord-grip:hover{color:var(--text);background:rgba(255,255,255,.07)}
.ord-grip:focus-visible{outline:2px solid var(--c2);outline-offset:2px}
.ord-grip .ic{width:16px;height:16px;display:block}
.ord-nr{width:62px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);font:inherit}
.ord-plek{display:none;margin-left:4px;color:var(--muted);font-variant-numeric:tabular-nums}
.ord-opslaan{margin-top:14px}
body.sort-live .ord-grip{display:inline-flex;vertical-align:middle}
body.sort-live .ord-plek{display:inline}
body.sort-live .ord-nr,body.sort-live .ord-opslaan{display:none}
body.sleep-bezig{user-select:none;cursor:grabbing}
body.sleep-bezig .ord-grip{cursor:grabbing}
.portfolio-table tr.sleept{background:rgba(255,255,255,.07);
  box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative;z-index:2}

.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. */
.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(). */
.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. */
@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. */
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. */
@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. */
@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. */
@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}
}

/* Drie kolommen: met zes feiten geeft dat twee volle rijen. */
.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
@media (max-width:760px){.fact-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.fact-grid{grid-template-columns:1fr}}
.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. */
.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. */
@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}
}

/* Het ronde avatartje onder een blogbericht toont een staand portret: zonder object-position zie je de borst in plaats van het gezicht. */
.sf-author img{object-fit:cover;object-position:top center;border-radius:50%}

/* ---------- Samengewerkt met: logostrip ---------- Bewust rustig gehouden: geen schuine stand, geen zware animatie. */
.partners{margin:8px 0 4px}
.partners.tight{margin:48px 0 8px}
.partners-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px}
.partners-rail{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.partners-track{display:flex;width:max-content;align-items:center;
  animation:partners-marq 38s linear infinite}
.partners-rail:hover .partners-track{animation-play-state:paused}
.partner{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:0 38px;height:56px}
.partner img{height:calc(26px * var(--logo-schaal,1));width:auto;max-width:132px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.5;transition:opacity .3s}
.partner:hover img{opacity:.95}
@keyframes partners-marq{to{transform:translateX(-50%)}}

@media (max-width:700px){
  .partner{padding:0 26px;height:48px}
  .partner img{height:calc(22px * var(--logo-schaal,1));max-width:104px}
  .partners.tight{margin-top:36px}
}

/* Wie beweging liever kwijt is, krijgt een stilstaande rij die gewoon horizontaal scrollbaar is. */
@media (prefers-reduced-motion:reduce){
  .partners-track{animation:none;width:auto}
  .partners-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .partner[aria-hidden="true"]{display:none}
}

/* ---------- Beheer: tussenkopje en toelichting bij Locatie & tijd ---------- */
.adm-sub3{font-family:'Unbounded',sans-serif;font-size:14px;letter-spacing:-.2px;
  margin:26px 0 14px;color:var(--muted)}
.adm-hint{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 18px;
  padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02)}
.adm-hint b{color:var(--text);font-weight:600}

/* ---------- Discrete verwijzing naar de RSS-feed onderaan /blog ---------- */
.feed-link{margin-top:40px;font-size:14px}
.feed-link a{display:inline-flex;align-items:center;gap:9px;color:var(--muted);
  transition:color .25s}
.feed-link a:hover{color:var(--text)}
.feed-link .ic{width:16px;height:16px}

/* =========================================================================== Offertes: beheer =========================================================================== */
.adm-block{margin-top:52px;padding-top:36px;border-top:1px solid var(--line)}
/* Het blok brengt zelf al een streep en bovenvulling mee, dus de eerste titel erin hoeft dat niet nog eens te doen: anders staat er een dubbele lijn met honderdvijftig pixels lucht ertussen. */
.adm-block > .adm-sub:first-child{margin-top:0;padding-top:0;border-top:0}
.adm-hint.warn{border-color:rgba(255,154,61,.5);background:rgba(255,154,61,.08);color:var(--text)}
.adm-check{display:flex;align-items:flex-start;gap:12px;margin:18px 0}
.adm-check input{margin-top:4px;flex:0 0 auto}
.adm-check span small{display:block;color:var(--muted);font-weight:400}
form.inline{display:inline}
.adm-table .mid{text-align:center}
.adm-table .mono,input.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}

/* Statuspillen. */
.pill{display:inline-flex;align-items:center;padding:5px 13px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.3px;border:1px solid}
.pill.st-concept{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}
.pill.st-open{background:rgba(255,154,61,.14);color:#ffbe7d;border-color:rgba(255,154,61,.4)}
.pill.st-ok{background:rgba(61,220,132,.14);color:#7ff0b0;border-color:rgba(61,220,132,.4)}
.pill.st-nee{background:rgba(255,61,110,.14);color:#ff8fab;border-color:rgba(255,61,110,.4)}

/* De lijnentabel in de opsteller */
.adm-table.lines td{padding:10px 12px;vertical-align:top}
.adm-table.lines input[type=text],.adm-table.lines input[type=number]{width:100%;padding:9px 11px;font-size:14px}
.adm-table.lines input.sub{margin-top:6px;font-size:12.5px;color:var(--muted)}
.adm-table.lines .w-aantal{width:140px}
.adm-table.lines .w-prijs{width:140px}
.adm-table.lines .w-maand{width:90px}
.adm-table.lines .w-totaal{width:130px}
.adm-table.lines .totaal{white-space:nowrap;font-variant-numeric:tabular-nums;padding-top:19px}
.adm-table.lines .weg{padding:6px 11px;line-height:1}

/* Het offerteformulier staat in twee kolommen: de velden links, de som ernaast
   en meescrollend. Zo zie je meteen wat een lijn met het totaal doet, in plaats
   van dat je ervoor naar beneden moet. */
.off-vorm{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 340px;
  gap:40px;align-items:start}
.off-velden{display:grid;gap:22px;min-width:0;max-width:760px}
.off-zij{position:sticky;top:22px;min-width:0}
@media (max-width:1180px){
  .off-vorm{grid-template-columns:1fr;gap:0}
  .off-velden{max-width:none}
  .off-zij{position:static;margin-top:26px}
}

.totalen{padding:22px 24px;border:1px solid var(--line);border-radius:20px;
  background:var(--card);font-size:15px}
.totalen div{display:flex;justify-content:space-between;gap:14px;padding:7px 0}
.totalen span{color:var(--muted)}
.totalen span i{font-style:normal}
.totalen b{font-variant-numeric:tabular-nums;white-space:nowrap}
.totalen hr{border:0;height:1px;background:var(--line);margin:12px 0}
.totalen .groot{font-size:19px;padding:12px 0}
.totalen .groot b{font-family:'Unbounded',sans-serif;font-size:21px}
.totalen .maand b{color:var(--c2)}

/* =========================================================================== Offerte: de pagina die de klant ziet =========================================================================== */
.offerte .off-kop{padding:120px 0 36px}
.off-merk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.offerte h1{font-size:clamp(28px,5vw,46px);line-height:1.08;margin-bottom:14px}
.off-intro,.off-outro{max-width:68ch;margin:28px 0}

.off-lijnen{width:100%;border-collapse:separate;border-spacing:0;margin:36px 0 0;
  border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card)}
.off-lijnen th,.off-lijnen td{padding:18px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.off-lijnen thead th{background:rgba(255,255,255,.04);font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.off-lijnen tbody tr:last-child td{border-bottom:0}
.off-lijnen .right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.off-lijnen .sub{display:block;margin-top:5px;font-size:13px;color:var(--muted);font-weight:400}
.off-lijnen tr.herhaalt td{background:rgba(123,92,255,.05)}

.off-tel{margin:26px 0 0;margin-left:auto;max-width:440px;padding:24px 26px;
  border:1px solid var(--line);border-radius:22px;background:var(--card)}
.off-tel div{display:flex;justify-content:space-between;gap:20px;padding:8px 0}
.off-tel span{color:var(--muted)}
.off-tel b{font-variant-numeric:tabular-nums}
.off-tel .korting b{color:var(--c2)}
.off-tel .groot{margin-top:10px;padding-top:16px;border-top:1px solid var(--line);font-size:19px}
.off-tel .groot b{font-family:'Unbounded',sans-serif;font-size:23px}
.off-tel .maand b{color:var(--c3)}
.off-btwnoot{margin-top:14px;font-size:13px;color:var(--muted)}

.off-betaling{margin:56px 0}
.off-stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:24px 0 18px}
.off-stap{padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.off-pct{display:inline-block;font-family:'Unbounded',sans-serif;font-size:30px;line-height:1;
  background:var(--grad);background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;margin-bottom:14px}
.off-stap h3{font-family:'Unbounded',sans-serif;font-size:17px;margin-bottom:8px}
.off-stap p{color:var(--muted);font-size:15px}
.off-stap b{color:var(--text)}

.off-akkoord{margin:48px 0;padding:32px;border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,61,110,.08),rgba(123,92,255,.08))}
.off-akkoord.ok{border-color:rgba(61,220,132,.4);background:rgba(61,220,132,.07)}
.off-akkoord.nee{border-color:rgba(255,61,110,.35);background:rgba(255,61,110,.06)}
.off-akkoord h2{margin-bottom:10px}
.off-form{margin-top:22px;display:grid;gap:18px;max-width:520px}
.off-form label>span{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.off-form label>span small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:2px}
.off-form input[type=text],.off-form input[type=email],.off-form textarea{width:100%;padding:13px 15px;
  border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text);font:inherit;font-size:15px}
.off-form input:focus,.off-form textarea:focus{outline:2px solid var(--c1);outline-offset:1px}

.off-knoppen{display:flex;gap:12px;flex-wrap:wrap}
.off-form .small{font-size:12.5px}
.off-nee{margin-top:26px}
.off-nee summary{cursor:pointer;color:var(--muted);font-size:14px}
.off-voet{margin:44px 0 24px;font-size:15px}

/* =========================================================================== Factuur =========================================================================== */
.factuur{padding:120px 0 60px}
.fac-waarschuwing{padding:16px 18px;border-radius:16px;margin-bottom:28px;font-size:14px;
  border:1px solid rgba(255,154,61,.5);background:rgba(255,154,61,.1)}
.fac-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:36px}
.factuur h1{font-family:'Unbounded',sans-serif;font-size:clamp(26px,4vw,38px);line-height:1.1}
.h-xs{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-bottom:10px}
.fac-partijen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;
  padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--card);margin-bottom:36px}
.fac-partijen p{line-height:1.7;font-size:15px}
.fac-lijnen{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;background:var(--card)}
.fac-lijnen th,.fac-lijnen td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
.fac-lijnen thead th{background:rgba(255,255,255,.04);font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);font-weight:500}
.fac-lijnen .right{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fac-lijnen tfoot td{color:var(--muted);border-bottom:0;padding-top:12px;padding-bottom:12px}
.fac-lijnen tfoot .groot td{color:var(--text);font-size:19px;border-top:1px solid var(--line)}
.fac-btwnoot{margin-top:16px;font-size:13.5px;color:var(--muted)}
.fac-betalen{margin:44px 0}
.fac-bank{margin-top:18px;display:grid;gap:12px;max-width:480px}
.fac-bank div{display:flex;justify-content:space-between;gap:20px;padding:12px 16px;
  border:1px solid var(--line);border-radius:14px;background:var(--card)}
.fac-bank dt{color:var(--muted);font-size:14px}
.fac-ok{margin:36px 0;padding:18px 20px;border-radius:16px;font-size:15px;
  border:1px solid rgba(61,220,132,.4);background:rgba(61,220,132,.08)}
.fac-voet{margin-top:40px;font-size:14.5px}
.fac-print{margin-top:24px}

/* Afdrukken of opslaan als pdf: alleen het document, zonder chrome en op wit. */
@media print{
  header.nav,.sheet,.fab,.cookie-bar,footer,.fac-print,.to-top,[class*=cookie]{display:none!important}
  html,body{background:#fff!important;color:#111!important}
  .factuur{padding:0}
  .fac-partijen,.fac-lijnen,.fac-bank div{background:#fff!important;border-color:#ccc!important}
  .fac-lijnen thead th{background:#f3f3f3!important;color:#444!important}
  .h-xs,.muted,.fac-bank dt,.fac-lijnen tfoot td{color:#555!important}
  a{color:#111!important;text-decoration:underline}
  .fac-waarschuwing{border-color:#b26a00!important;background:#fff6e8!important;color:#7a4a00!important}
}

/* ---------- De balk bovenaan een offerte in het beheer ---------- Dit is de plek waar je de link moet kunnen vinden, dus hij staat vóór het formulier en niet eronder. */
.off-balk{margin:0 0 34px;padding:24px 26px;border-radius:22px;border:1px solid var(--line);
  background:var(--card)}
.off-balk.verstuurd{border-color:rgba(255,154,61,.45);background:rgba(255,154,61,.07)}
.off-balk.goedgekeurd{border-color:rgba(61,220,132,.42);background:rgba(61,220,132,.07)}
.off-balk-tekst{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.off-balk-tekst b{font-size:16px}
.off-balk-tekst span{color:var(--muted);font-size:14px}
.off-kopieer{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin-bottom:14px}
.off-kopieer input{flex:1 1 320px;min-width:0;padding:12px 15px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.off-kopieer .btn{flex:0 0 auto}
.off-balk-knoppen{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.off-balk-noot{margin-top:14px;font-size:13px;color:var(--muted)}
.off-download{margin:40px 0 0}

@media (max-width:620px){
  .off-balk{padding:20px}
  .off-kopieer input{flex-basis:100%}
}

/* =========================================================================== Akkoord geven op een offerte =========================================================================== Dit is het enige moment op de hele site waarop iemand een verbintenis aangaat. */

.off-check{display:flex;align-items:flex-start;gap:15px;font-size:14.5px;line-height:1.55;
  cursor:pointer;padding:16px 18px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);transition:border-color .3s,background .3s}
.off-check:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.055)}

/* Het echte vakje blijft bestaan maar is onzichtbaar: niet display:none, want dan haalt het toetsenbord het niet meer. */
.off-check input{position:absolute;opacity:0;width:0;height:0;margin:0}

/* Het haakje is een svg en geen gedraaide randen: de optische as van zo'n haakje valt niet samen met die van zijn kader, dus met randen blijf je pixels bijschuiven. */
.off-check .vink{flex:0 0 auto;position:relative;display:grid;place-items:center;
  box-sizing:border-box;width:26px;height:26px;margin-top:1px;
  border-radius:9px;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.04);
  transition:border-color .25s,background .25s,transform .25s}
.off-check .vink::before{content:"";position:absolute;inset:-1.5px;border-radius:9px;
  background:var(--grad);background-size:200% 200%;opacity:0;transition:opacity .25s}
.off-check .vink svg{position:relative;width:16px;height:16px;color:#fff}
/* Het haakje wordt getekend in plaats van te verschijnen: de lijn is een streepjespatroon van precies zijn eigen lengte, en die schuift van helemaal weg naar helemaal zichtbaar. */
.off-check .vink svg path{stroke-dasharray:21;stroke-dashoffset:21;
  transition:stroke-dashoffset .38s cubic-bezier(.45,0,.2,1)}

.off-check:hover .vink{border-color:rgba(255,255,255,.4)}
.off-check input:checked + .vink{border-color:transparent;transform:scale(1.05)}
.off-check input:checked + .vink::before{opacity:1}
.off-check input:checked + .vink svg path{stroke-dashoffset:0}
/* Alleen een rand bij toetsenbordgebruik, niet bij een muisklik. */
.off-check input:focus-visible + .vink{outline:2px solid var(--c3);outline-offset:3px}

.off-check-tekst b{color:var(--text)}

/* ---- De knop zelf ---- */
.akkoord{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;
  padding:18px 30px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:700;font-size:16.5px;color:#fff;
  background:var(--grad);background-size:220% 220%;
  box-shadow:0 10px 36px rgba(255,61,110,.38);
  transition:transform .28s,box-shadow .28s,background-position .7s}
.akkoord:hover{transform:translateY(-3px);background-position:100% 0;
  box-shadow:0 18px 52px rgba(255,61,110,.55)}
.akkoord:active{transform:translateY(-1px) scale(.99)}
.akkoord:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Een lichtstreep die traag over de knop schuift. */
.akkoord-glans{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  background-size:260% 100%;animation:akkoord-glans 3.6s ease-in-out infinite}
@keyframes akkoord-glans{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}

.akkoord-tekst{position:relative}
.akkoord-pijl{position:relative;display:inline-flex;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.akkoord-pijl svg{width:20px;height:20px;display:block}
.akkoord:hover .akkoord-pijl{transform:translateX(5px)}

@media (max-width:620px){
  .akkoord{width:100%;justify-content:center;padding:17px 24px;font-size:15.5px}
}

/* Wie beweging liever kwijt is, krijgt de knop zonder de glans. */
@media (prefers-reduced-motion:reduce){
  .akkoord-glans{animation:none;display:none}
  .akkoord,.akkoord-pijl,.off-check .vink{transition:none}
  .off-check .vink svg path{transition:none;stroke-dasharray:none;stroke-dashoffset:0;
    opacity:0}
  .off-check input:checked + .vink svg path{opacity:1}
}

/* ---------- De offerte terugvinden: QR plus link ---------- */
.off-terugvinden{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
  margin:48px 0 0;padding:26px;border-radius:24px;border:1px solid var(--line);
  background:var(--card)}
.off-qr{flex:0 0 auto;width:132px;padding:10px;border-radius:16px;background:#fff;
  line-height:0}
.off-qr svg{width:100%;height:auto;display:block}
.off-terugvinden-tekst{flex:1 1 300px;min-width:0}
.off-terugvinden-tekst p{color:var(--muted);font-size:15px;margin:8px 0 16px}
.off-link-rij{display:flex;gap:10px;flex-wrap:wrap}
.off-link-rij input{flex:1 1 260px;min-width:0;padding:11px 14px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

@media (max-width:620px){
  .off-terugvinden{padding:20px;gap:20px}
  .off-qr{width:112px}
}

/* Bij het afdrukken van de offertepagina is de code juist het nuttigste deel. */
@media print{
  .off-terugvinden{border-color:#ccc!important;background:#fff!important;color:#111!important}
  .off-link-rij input{background:#fff!important;color:#111!important;border-color:#ccc!important}
}

/* Knop "zet klaar om te delen", met het mailvinkje erboven */
.off-klaar{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.off-klaar .adm-check{margin:0}

/* Mailadres en telefoonnummer in het contactblok. */
.contact-regels{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:16px 36px;margin-top:36px;font-size:clamp(20px,3.2vw,34px)}
.contact-regels .big-mail{margin-top:0;font-size:inherit}
/* Even groot als het mailadres. */
.big-tel{font-size:inherit}
.big-tel .ic{color:var(--c2)}

/* Het witte vak waarin de e-mailhandtekening getoond wordt. */
.hdt-doos{background:#fff;border-radius:16px;padding:26px 28px;display:inline-block;
  max-width:100%;overflow-x:auto}
.hdt-doos a{text-decoration:none}
.hdt-keuze{display:flex;gap:10px;margin:0 0 28px}
.hdt-scheiding{width:1px;align-self:stretch;background:var(--line);margin:0 6px}

/* ---------- Instellingen als accordeon ---------- Zelfde gedachte als de FAQ op de site: één deel open, een plusje dat kantelt. */
.adm-vouw{border:1px solid var(--line);border-radius:18px;background:var(--card);
  margin-bottom:12px;overflow:hidden}
.adm-vouw[open]{border-color:rgba(255,255,255,.2)}
.adm-vouw summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:18px 62px 18px 20px;position:relative;transition:background .25s}
.adm-vouw summary::-webkit-details-marker{display:none}
.adm-vouw summary:hover{background:rgba(255,255,255,.04)}
.adm-vouw summary .ic{width:20px;height:20px;flex:none;color:var(--c2)}
.adm-vouw summary span{display:flex;flex-direction:column;gap:2px;min-width:0}
.adm-vouw summary b{font-family:'Unbounded',sans-serif;font-size:15px;letter-spacing:-.3px}
.adm-vouw summary small{color:var(--muted);font-size:13px}
.adm-vouw summary::after{content:"+";position:absolute;right:18px;top:50%;width:30px;height:30px;
  margin-top:-15px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-size:19px;color:var(--muted);transition:.35s}
.adm-vouw[open] summary::after{transform:rotate(45deg);background:var(--grad);
  border-color:transparent;color:#fff}
.adm-vouw-in{padding:4px 20px 22px;border-top:1px solid var(--line)}
.adm-vouw-in > :first-child{margin-top:18px}
.adm-vouw-in .adm-sub3:first-child{margin-top:18px}

@media (max-width:620px){
  .adm-vouw summary{padding:16px 54px 16px 16px}
  .adm-vouw-in{padding:4px 16px 18px}
}

/* ---------- Projectpagina: schermafdruk in een venster ---------- Het beeld is een foto van een website. */
.single-cover.shot{border-radius:26px;background:#120a19;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.shot-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.04)}
.shot-dots{display:flex;gap:7px;flex:none}
.shot-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.18)}
.shot-dots i:first-child{background:rgba(255,61,110,.6)}
.shot-dots i:nth-child(2){background:rgba(255,154,61,.6)}
.shot-view{display:block;position:relative;overflow:hidden}
.shot-view img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.shot-url{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:5px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-url .ic{width:14px;height:14px;flex:none;color:var(--c2)}
.shot-go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;
  background:var(--grad);color:#fff;font-weight:600;font-size:15px;white-space:nowrap;
  box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;transition:.35s;pointer-events:none}
.shot-go .ic{width:17px;height:17px}
a.shot-view::after{content:"";position:absolute;inset:0;background:rgba(10,5,15,.5);opacity:0;transition:.35s}
a.shot-view:hover img,a.shot-view:focus-visible img{transform:scale(1.03)}
a.shot-view:hover::after,a.shot-view:focus-visible::after{opacity:1}
a.shot-view:hover .shot-go,a.shot-view:focus-visible .shot-go{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Projectpagina: het verhaal in genummerde delen ---------- */
.work-story{display:grid;gap:0}
.story-step{position:relative;padding:0 0 42px 62px}
.story-step:last-child{padding-bottom:0}
/* De lijn loopt van bolletje naar bolletje, niet voorbij het laatste. */
.story-step::before{content:"";position:absolute;left:21px;top:48px;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--line) 0 75%,transparent)}
.story-step:last-child::before{display:none}
/* De alinea's zitten nu in een section, dus .prose>*+* raakt ze niet meer. */
.story-step>*+*{margin-top:1.15em}
.ss-mark+.ss-title{margin-top:0}
.ss-mark{position:absolute;left:0;top:-4px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--card);transition:.4s}
.ss-mark .ic{width:20px;height:20px;color:var(--muted);transition:color .4s}
.story-step.is-on .ss-mark{background:var(--grad);border-color:transparent;
  box-shadow:0 10px 26px rgba(255,61,110,.28)}
.story-step.is-on .ss-mark .ic{color:#fff}
.ss-title{font-family:'Unbounded',sans-serif;font-size:clamp(22px,3vw,28px);letter-spacing:-.8px;
  line-height:1.2;margin:0 0 18px}
.story-step > :not(.ss-mark){max-width:68ch}

/* ---------- Projectpagina: springlijst in de zijkolom ---------- */
.sn-list{list-style:none;display:grid;gap:2px;counter-reset:none}
.sn-list a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;
  font-size:15px;color:var(--muted);transition:.25s}
.sn-list a .ic{width:17px;height:17px;flex:none;color:rgba(243,241,250,.35);transition:color .25s}
.sn-list a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.sn-list a.is-on{color:#fff;background:rgba(255,255,255,.07)}
.sn-list a.is-on .ic{color:var(--c1)}

@media (max-width:760px){
  .story-step{padding:0 0 34px 52px}
  .ss-mark{width:38px;height:38px;border-radius:12px}
  .ss-mark .ic{width:18px;height:18px}
  .story-step::before{left:18px;top:40px}
  .shot-bar{padding:10px 14px;gap:10px}
}

/* ---------- Voettekst: het puntje op de i werd afgesneden ---------- De gekleurde letters krijgen hun kleur via background-clip:text, en een achtergrond komt nooit buiten de rand van het element. */
.ft-word span{padding:.22em .07em;margin:-.22em -.07em}

/* ---------- Onderliggende dienstpagina: vergelijking en rekenmodule ---------- */
.vgl-wrap{overflow-x:auto;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.prose .vgl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px;margin:0}
.prose .vgl th,.prose .vgl td{padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.prose .vgl thead th{font-family:'Unbounded',sans-serif;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.prose .vgl tbody tr:last-child th,.prose .vgl tbody tr:last-child td{border-bottom:0}
.prose .vgl tbody th{font-weight:600;color:#fff;white-space:nowrap}
.prose .vgl td{color:rgba(243,241,250,.75)}
.prose .vgl .vgl-ons{color:#fff;background:linear-gradient(90deg,rgba(255,61,110,.08),rgba(123,92,255,.08))}
.prose .vgl thead th:last-child{color:var(--c2)}

.reken{margin-top:18px;padding:24px;border-radius:26px;border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.reken-knoppen{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.schuif{display:flex;flex-direction:column;gap:9px;cursor:pointer}
.schuif-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;color:var(--muted)}
.schuif-kop b{font-family:'Unbounded',sans-serif;font-size:19px;letter-spacing:-.5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.12em .07em;margin:-.12em -.07em;white-space:nowrap}
.schuif-voet{display:flex;justify-content:space-between;font-size:11px;color:rgba(243,241,250,.35)}
.schuif-voet i{font-style:normal}
/* De balk links van de knop is gevuld, rechts leeg. */
.schuif input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;margin:0;cursor:grab}
.schuif input[type=range]:active{cursor:grabbing}
.schuif input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--c1),var(--c2) var(--vul,50%),rgba(255,255,255,.1) var(--vul,50%))}
.schuif input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.1)}
.schuif input[type=range]::-moz-range-progress{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--c1),var(--c2))}
.schuif input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-8px;border-radius:50%;border:2px solid #fff;
  background:var(--grad);box-shadow:0 4px 14px rgba(255,61,110,.45);transition:transform .2s}
.schuif input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;
  border:2px solid #fff;background:var(--c1);box-shadow:0 4px 14px rgba(255,61,110,.45)}
.schuif input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.schuif input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
.schuif input[type=range]:focus-visible{outline:none}
.schuif input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(255,61,110,.25)}
.schuif input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px rgba(255,61,110,.25)}
.reken-uit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.reken-kaart{padding:18px 20px;border-radius:20px;border:1px solid var(--line);background:rgba(7,6,13,.4)}
.reken-kaart .ft-label{margin-bottom:10px}
.reken-kaart b{display:block;font-family:'Unbounded',sans-serif;font-size:clamp(24px,4vw,32px);
  letter-spacing:-1px;line-height:1.1}
.reken-kaart small{display:block;margin-top:7px;font-size:13px;color:var(--muted)}
.reken-kaart.is-ons{border-color:rgba(255,61,110,.3)}
.reken-kaart.is-ons b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.1em .06em;margin:-.1em -.06em}
.reken-slot{margin-top:18px;padding:13px 18px;border-radius:16px;font-size:15px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:rgba(243,241,250,.82)}
.reken-slot.is-voordeel{border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.08);color:#aef0c9}
.reken-slot.is-nadeel{border-color:rgba(255,154,61,.3);background:rgba(255,154,61,.08);color:#ffd2a6}
@media (max-width:640px){
  .reken{padding:18px}
  .reken-knoppen{grid-template-columns:1fr;gap:20px}
  .reken-uit{grid-template-columns:1fr}
}

/* De fases in het pad hebben een naam, een duur en een uitleg onder elkaar. */
.pad-duur{font-size:13px;color:var(--c2);margin-left:8px}
.prose .niet-lijst li::marker{color:var(--c2)}
.lead-sm{color:var(--muted);max-width:68ch;margin-top:-4px;margin-bottom:22px}

/* Verwijzingen naar onderliggende dienstpagina's. */
.svc-kinderen{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.svc-kinderen-kop{display:block;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
/* Twee op twee, niet drie met een weesje ernaast. */
.svc-kinderen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px}
.svc-kinderen-grid a{display:grid;gap:3px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);transition:.25s}
.svc-kinderen-grid a:hover{transform:translateY(-3px);border-color:rgba(255,154,61,.45);
  background:rgba(255,154,61,.07)}
.svc-kinderen-grid .ic{width:16px;height:16px;color:var(--c2);margin-bottom:3px}
.svc-kinderen-grid b{font-size:14.5px}
.svc-kinderen-grid span{font-size:13px;color:var(--muted);line-height:1.5}
.kind-grid{display:grid;gap:14px;margin-top:4px}
/* Icoon en titel naast elkaar, de regel eronder lijnt uit met de titel. */
.prose .kind-kaart{display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:15px;row-gap:6px;padding:20px 22px;border-radius:22px;
  border:1px solid var(--line);background:var(--card);color:inherit;transition:.3s}
.prose .kind-kaart:hover{transform:translateY(-3px);border-color:rgba(255,61,110,.4)}
.prose .kind-kaart .ibox{grid-row:1;grid-column:1;margin:0}
.prose .kind-kaart b{grid-row:1;grid-column:2;font-family:'Unbounded',sans-serif;
  font-size:17px;letter-spacing:-.4px}
.prose .kind-kaart > span:last-child{grid-column:2;color:var(--muted);font-size:15px}
@media (max-width:520px){
  .prose .kind-kaart{column-gap:12px;padding:18px}
  .prose .kind-kaart > span:last-child{grid-column:1/-1}
}
.reken-noot{margin-top:12px;font-size:13px;color:var(--muted)}
.reken-kaart.is-ons b{font-size:clamp(21px,3.4vw,28px)}

/* Een sectiekop met icoon, buiten .prose. */
.sec-h{display:flex;align-items:center;gap:14px}
.faq + .sec-h,.sec-h + .faq{margin-top:0}

/* De opslaanbalk van de instellingen. */
.adm-balk{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-radius:18px;border:1px solid var(--line);
  background:rgba(14,12,26,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
.adm-balk span{font-size:14px;color:var(--muted)}
@media (max-width:560px){
  .adm-balk{justify-content:center;text-align:center}
  .adm-balk span{width:100%}
}

/* De kaart "Jouw project?". */
.scard .art.art-volgend-vlak{
  background:
    radial-gradient(circle at 24% 26%,rgba(255,61,110,.38),transparent 56%),
    radial-gradient(circle at 80% 22%,rgba(255,154,61,.3),transparent 52%),
    radial-gradient(circle at 62% 88%,rgba(123,92,255,.45),transparent 58%),
    #140b1c}

/* Het beeld op die kaart. */
.scard .art .art-volgend{width:100%;height:100%;object-fit:contain;
  padding:clamp(18px,4vw,46px);animation:bob 5s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.scard:hover .art .art-volgend{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.scard .art .art-volgend{animation:none}}

/* ---------- Contactpagina ---------- */
/* De drie rechtstreekse kanalen, boven het formulier. */
.kanalen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Icoon en titel naast elkaar; het adres en de notitie lijnen uit met de titel. */
.kanaal{display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:15px;row-gap:6px;padding:24px 26px;border-radius:24px;
  border:1px solid var(--line);background:var(--card);color:inherit;transition:.3s}
.kanaal:hover{transform:translateY(-4px);border-color:rgba(255,61,110,.45);
  box-shadow:0 22px 50px rgba(0,0,0,.35)}
.kanaal .ibox{grid-row:1;grid-column:1;margin:0}
.kanaal b{grid-row:1;grid-column:2;font-family:'Unbounded',sans-serif;font-size:17px;letter-spacing:-.4px}
.kanaal-waarde,.kanaal-noot{grid-column:2}
.kanaal-waarde{font-size:15px;color:#fff;word-break:break-word}
.kanaal:hover .kanaal-waarde{background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;padding:.08em .05em;margin:-.08em -.05em}
.kanaal-noot{font-size:13px;color:var(--muted)}
@media (max-width:860px){.kanalen{grid-template-columns:1fr}}
@media (max-width:420px){.kanaal{column-gap:12px;padding:20px}.kanaal-waarde,.kanaal-noot{grid-column:1/-1}}

/* Het formulier is een kaart, net als alles eromheen. */
.contact-form{display:grid;gap:20px;margin-top:4px;
  padding:clamp(22px,3.4vw,34px);border-radius:28px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px rgba(0,0,0,.3)}
.cf-kop{display:grid;gap:7px}
.cf-kop h2{font-family:'Unbounded',sans-serif;font-size:clamp(21px,3vw,27px);letter-spacing:-.7px;margin:0}
.cf-kop p{color:var(--muted);font-size:15px;margin:0}
.cf-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form label{display:grid;gap:8px}
.contact-form label>span{font-size:14px;font-weight:700}
.contact-form label>span small{font-weight:400;color:var(--muted);font-size:13px}
.contact-form .req{color:var(--c1)}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:13px 16px;border-radius:16px;border:1px solid var(--line);
  background:rgba(7,6,13,.5);color:var(--text);font:inherit;font-size:16px;
  transition:border-color .25s,box-shadow .25s;color-scheme:dark}
.contact-form textarea{resize:vertical;line-height:1.6;min-height:150px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(255,61,110,.16)}
.contact-form select{appearance:none;cursor:pointer;
  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 14px center;background-size:18px;padding-right:44px}
.cf-voet{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cf-noot{font-size:13px;color:var(--muted);max-width:42ch}
.cf-noot a{border-bottom:1px solid var(--c1)}
/* Het lokaas voor robots: uit beeld, maar niet display:none, want dat slaan sommige invulrobots juist over. */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.melding{display:flex;align-items:flex-start;gap:12px;padding:18px 22px;border-radius:20px;
  border:1px solid var(--line);background:var(--card)}
.melding .ic{width:19px;height:19px;flex:none;margin-top:3px}
.melding.ok{border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.08);color:#b6f2d0}
.melding.ok .ic{color:#6fe3a4}
.melding.fout{border-color:rgba(255,154,61,.35);background:rgba(255,154,61,.08);color:#ffd2a6}
.melding.fout .ic{color:var(--c2)}
.contact-direct a{border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.contact-direct a:hover{color:#fff;border-bottom-color:var(--c1)}
.aside-tekst{color:var(--muted);font-size:15px;margin-bottom:16px}

/* Meerkeuze als chips. */
.cf-keuze{border:0;padding:0;margin:0;display:grid;gap:11px}
.cf-keuze legend{padding:0;font-size:14px;font-weight:700}
.cf-keuze legend small{font-weight:400;color:var(--muted);font-size:13px}
.cf-chips{display:flex;flex-wrap:wrap;gap:8px}
.cf-chip{position:relative;cursor:pointer}
.cf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.cf-chip span{display:inline-block;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:14px;color:var(--muted);transition:.25s}
.cf-chip:hover span{color:var(--text);border-color:rgba(255,255,255,.2)}
.cf-chip input:checked+span{color:#fff;border-color:transparent;background:var(--grad);
  box-shadow:0 8px 20px rgba(255,61,110,.25)}
.cf-chip input:focus-visible+span{outline:2px solid var(--c1);outline-offset:3px}

/* Terugbellen: een vinkvakje dat twee velden openzet. */
.cf-bellen{border-radius:22px;border:1px solid var(--line);background:rgba(7,6,13,.4);padding:18px 20px;
  transition:border-color .3s,background .3s}
.cf-bellen:has(#cfBellen:checked){border-color:rgba(255,61,110,.35);background:rgba(255,61,110,.05)}
/* .contact-form label zet display:grid en is specifieker dan .cf-bellen-kop alleen; zonder die extra klasse ervoor belandt het vakje bóven de tekst. */
.contact-form .cf-bellen-kop{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
.cf-bellen-kop input{position:absolute;opacity:0;width:1px;height:1px}
.cf-vink{flex:none;width:24px;height:24px;margin-top:1px;border-radius:8px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  position:relative;transition:.25s}
/* Het vinkje is twee lijnen die samen een haakje vormen. */
.cf-vink::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;border-radius:1px;
  transform:rotate(45deg) scale(.4);opacity:0;transition:.25s}
.cf-bellen-kop:hover .cf-vink{border-color:rgba(255,255,255,.4)}
.cf-bellen-kop input:checked+.cf-vink{background:var(--grad);border-color:transparent;
  box-shadow:0 6px 18px rgba(255,61,110,.3)}
.cf-bellen-kop input:checked+.cf-vink::after{opacity:1;transform:rotate(45deg) scale(1)}
.cf-bellen-kop input:focus-visible+.cf-vink{outline:2px solid var(--c1);outline-offset:3px}
.cf-bellen-tekst{display:grid;gap:3px;min-width:0}
.cf-bellen-tekst b{font-size:15px}
.cf-bellen-tekst small{color:var(--muted);font-size:13px}
.cf-bellen-velden{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.cf-bellen-velden[hidden]{display:none}

@media (max-width:620px){.cf-rij,.cf-bellen-velden{grid-template-columns:1fr}}

/* ---------- Beheer: contactberichten ---------- */
.adm-teller{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  margin-left:6px;border-radius:999px;background:var(--grad);color:#fff;
  font-size:11px;font-weight:700;line-height:1;vertical-align:1px}
.adm-berichten{display:grid;gap:14px}
.adm-bericht{padding:22px 24px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
.adm-bericht.is-nieuw{border-color:rgba(255,61,110,.4);box-shadow:inset 3px 0 0 var(--c1)}
.adm-bericht.is-beantwoord{box-shadow:inset 3px 0 0 rgba(61,220,132,.55)}
.adm-bericht.is-afgehandeld{opacity:.62;box-shadow:inset 3px 0 0 rgba(255,255,255,.18)}
.adm-bericht.is-afgehandeld:hover{opacity:1}
.adm-bericht.verborgen{display:none}

/* Filteren en zoeken, in de browser afgehandeld. */
.ab-filters{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px}
.ab-filters .chip{border:1px solid var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:13px;cursor:pointer}
.ab-filters .chip.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:700}
.ab-zoek{display:flex;align-items:center;gap:8px;margin-left:auto;padding:7px 14px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);min-width:min(100%,260px)}
.ab-zoek .ic{width:15px;height:15px;flex:none;color:var(--muted)}
.ab-zoek input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:inherit;font-size:14px;outline:none}
.ab-geenresultaat{padding:26px;border-radius:22px;border:1px dashed var(--line);color:var(--muted);text-align:center}

/* De stand van een bericht in één woord. */
.ab-stand{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);font-size:12px;letter-spacing:.3px}
.ab-stand .ic{width:13px;height:13px}
.ab-nieuw{border-color:rgba(255,61,110,.4);background:rgba(255,61,110,.1);color:#ffb3c6}
.ab-beantwoord{border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.08);color:#aef0c9}
.ab-afgehandeld{color:var(--muted)}

.ab-waarschuwing{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding:10px 14px;
  border-radius:14px;font-size:14px;
  border:1px solid rgba(255,154,61,.3);background:rgba(255,154,61,.08);color:#ffd2a6}
.ab-waarschuwing .ic{width:15px;height:15px;flex:none}

/* Wat ik terugschreef, ingesprongen onder het bericht. */
.ab-antwoord{margin:0 0 14px;padding:14px 18px;border-radius:16px;border-left:3px solid rgba(61,220,132,.5);
  background:rgba(61,220,132,.05)}
.ab-antwoord.mislukt{border-left-color:rgba(255,154,61,.6);background:rgba(255,154,61,.06)}
.ab-antwoord-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:7px;
  font-size:13px;color:var(--muted)}
.ab-antwoord-kop b{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:13.5px}
.ab-antwoord-kop .ic{width:14px;height:14px;color:#7ff0b0}
.ab-antwoord p{color:rgba(243,241,250,.82);line-height:1.65;font-size:15px}
.ab-fout{color:#ffd2a6}

.ab-schrijf{margin-bottom:16px}
.ab-schrijf summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.ab-schrijf summary::-webkit-details-marker{display:none}
.ab-schrijf summary:hover{color:var(--text);border-color:rgba(123,92,255,.5)}
.ab-schrijf[open] summary{margin-bottom:12px}
.ab-schrijf summary .ic{width:14px;height:14px;color:var(--c2)}
.ab-schrijf textarea{width:100%;padding:14px 17px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--text);font:inherit;line-height:1.65;resize:vertical;outline:none}
.ab-schrijf textarea:focus{border-color:rgba(255,61,110,.55);background:rgba(255,255,255,.07)}
.ab-hint{margin:9px 0 12px;font-size:13px}
.ab-kop{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-start}
.ab-wie b{display:block;font-family:'Unbounded',sans-serif;font-size:16px;letter-spacing:-.3px}
.ab-wie span{font-size:14px;color:var(--muted)}
.ab-wie a:hover{color:var(--c2)}
.ab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ab-mail{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(255,154,61,.35);background:rgba(255,154,61,.1);color:#ffd2a6}
.ab-mail.ok{border-color:rgba(61,220,132,.3);background:rgba(61,220,132,.08);color:#aef0c9}
.ab-mail .ic{width:13px;height:13px}
.ab-tekst{margin:16px 0 18px;color:rgba(243,241,250,.85);line-height:1.7}
.ab-voet{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ab-voet form{display:inline}
.ab-bron{font-size:13px;color:var(--muted)}
/* De balk die verschijnt als er nog een klad van dit formulier bewaard is. */
.klad-balk{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px;
  padding:14px 18px;border-radius:16px;font-size:14.5px;
  border:1px solid rgba(255,154,61,.4);background:rgba(255,154,61,.09);color:var(--text)}
.klad-balk span{flex:1 1 220px}
/* Melding als de aanmelding onderweg afgelopen is. */
body.sessie-weg::before{content:'Je bent niet meer aangemeld. Open het beheer in een ander tabblad, meld je aan en kom terug: wat je typte staat hier nog.';
  position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:90;max-width:min(560px,calc(100% - 28px));
  padding:13px 20px;border-radius:16px;font-size:14.5px;line-height:1.5;
  border:1px solid rgba(255,61,110,.5);background:rgba(28,8,16,.97);color:var(--text);
  box-shadow:0 20px 50px rgba(0,0,0,.6)}

/* De vraag of je het zeker weet, op de server. */
.bevestig{max-width:640px;padding:28px 30px;border-radius:22px;
  border:1px solid rgba(255,61,110,.4);background:rgba(255,61,110,.06)}
.bevestig-wat{display:flex;align-items:center;gap:11px;margin:0 0 10px;
  font-family:'Unbounded',sans-serif;font-size:19px;letter-spacing:-.4px}
.bevestig-wat .ic{width:18px;height:18px;flex:none;color:var(--c1)}
.bevestig .adm-actions{margin-top:22px}
.btn.danger{background:linear-gradient(90deg,#ff3d6e,#ff6b4a);border-color:transparent;color:#fff}

.adm-leeg{display:flex;align-items:center;gap:12px;padding:28px;border-radius:22px;
  border:1px dashed var(--line);color:var(--muted)}
.adm-leeg a{border-bottom:1px solid var(--c1)}
.ab-bedrijf{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:14px;color:var(--muted)}
.ab-bellen{display:inline-flex;align-items:center;gap:8px;margin:-6px 0 16px;
  padding:7px 14px;border-radius:999px;font-size:14px;
  border:1px solid rgba(255,154,61,.3);background:rgba(255,154,61,.08);color:#ffd2a6}
.ab-bellen .ic{width:15px;height:15px}
.cf-budget{display:flex;align-items:center;gap:9px;margin-top:4px;padding:10px 14px;
  border-radius:14px;font-size:14px;
  border:1px solid rgba(255,154,61,.28);background:rgba(255,154,61,.08);color:#ffd2a6}
.cf-budget .ic{width:15px;height:15px;flex:none}
.ab-budget{display:inline-flex;align-items:center;gap:6px}
.ab-budget .ic{width:13px;height:13px}

/* ---------- Klantpaneel (/klant) ---------- Dezelfde taal als de site: glas, één lijnkleur, dezelfde pillen. */
body.kp{min-height:100vh;display:flex;flex-direction:column}
/* Dezelfde zijbalk als het beheer, alleen doorzichtig: hier mogen de vlekken van de site doorschijnen, want dit is de klant zijn kant. */
body.kp.heeft-zijbalk{--zij:248px}
.kp-zij{background:rgba(14,12,26,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.kp-zij .adm-brand{font-weight:700}
.kp-badge{margin-left:2px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;
  background:rgba(255,154,61,.16);color:#ffbe7d;border:1px solid rgba(255,154,61,.35)}
.kp-zij .adm-nav a.on .kp-badge{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}

.kp-main{flex:1}
body.kp.heeft-zijbalk .kp-main{margin-left:var(--zij)}
body.kp.heeft-zijbalk .wrap{width:min(1000px,calc(100% - 48px))}
@media (max-width:1040px){
  body.kp.heeft-zijbalk{--zij:0px}
  body.kp.heeft-zijbalk .kp-main{margin-left:0;padding-top:64px}
}
.kp-sect{padding:clamp(34px,5vw,56px) 0}
.kp-smal{width:min(640px,calc(100% - 32px))}
.kp-kop{margin-bottom:30px}
.kp-kop h1{font-family:'Unbounded',sans-serif;font-size:clamp(27px,4.6vw,40px);letter-spacing:-1.2px;margin:0 0 10px}
.kp-kop p{margin:0;max-width:62ch}
.kp-stats{margin-top:0;margin-bottom:28px}
.kp-flash{margin-bottom:22px;padding:13px 18px;border-radius:16px;font-size:15px;
  border:1px solid rgba(61,220,132,.35);background:rgba(61,220,132,.1);color:#aef0c9}
.kp-flash.error{border-color:rgba(255,61,110,.4);background:rgba(255,61,110,.1);color:#ff9fb6}

/* Wat op de klant wacht. Staat boven het archief, want dat is waarvoor hij komt. */
.kp-taken{display:grid;gap:12px;margin-bottom:34px}
.kp-taak{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:20px;
  border:1px solid rgba(255,154,61,.32);background:rgba(255,154,61,.07)}
.kp-taak.is-laat{border-color:rgba(255,61,110,.4);background:rgba(255,61,110,.08)}
.kp-taak-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid var(--line)}
.kp-taak-ico .ic{width:19px;height:19px}
.kp-taak-tekst{flex:1;min-width:0}
.kp-taak-tekst h2{margin:0 0 4px}
.kp-taak-tekst p{margin:0;font-size:14px}
.kp-taak .btn{flex:none}

.kp-kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
/* Twee kaarten onder elkaar plakten tegen elkaar: ze stonden los in de wrap
   zonder tussenruimte. In een raster zorgt de gap zelf voor de ruimte, dus
   alleen tussen opeenvolgende kaarten. */
.kp-kaart + .kp-kaart{margin-top:18px}
.kp-kolommen .kp-kaart + .kp-kaart{margin-top:0}
.kp-kaart{padding:clamp(20px,2.6vw,28px);border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kp-kaart>h2{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.kp-kaart>h2 .ic{width:15px;height:15px}
.kp-kaart>p{margin:0 0 16px;font-size:15px}
.kp-lijst{list-style:none;display:grid;gap:2px}
.kp-lijst li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.kp-lijst li:first-child{border-top:0}
.kp-lijst li>a{flex:1;min-width:0;display:grid;gap:3px;transition:.2s}
.kp-lijst li>a:hover{opacity:.75}
.kp-li-kop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kp-li-sub{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-li-bedrag{flex:none;font-weight:700;font-size:15px}
.kp-meer{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14px;color:var(--muted);transition:.2s}
.kp-meer:hover{color:var(--text)}
.kp-meer .ic{width:13px;height:13px}

.kp-hoe{margin-top:34px}
.kp-hoe>h2{margin-bottom:16px}
.kp-stappen{list-style:none;counter-reset:kps;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.kp-stappen li{counter-increment:kps;display:grid;gap:5px;padding:18px 20px 18px 20px;border-radius:18px;
  background:var(--card);border:1px solid var(--line)}
.kp-stappen li::before{content:counter(kps);font-family:'Unbounded',sans-serif;font-size:13px;
  color:var(--c1);letter-spacing:1px}
.kp-stappen li b{font-size:16px}
.kp-stappen li span{font-size:14px;line-height:1.6}

/* Lijsten van offertes en facturen. */
.kp-rijen{display:grid;gap:14px}
.kp-rij{padding:clamp(18px,2.4vw,24px);border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.25s}
.kp-rij:hover{border-color:rgba(255,255,255,.18)}
.kp-rij.is-wacht{border-color:rgba(255,154,61,.3)}
.kp-rij.is-laat{border-color:rgba(255,61,110,.35)}
.kp-rij.is-klaar{opacity:.78}
.kp-rij-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kp-rij-kop h2{margin:0;font-family:'Unbounded',sans-serif;font-size:17px;letter-spacing:-.4px;
  text-transform:none;color:var(--text)}
.kp-rij-titel{margin:8px 0 0;color:rgba(243,241,250,.88)}
.kp-rij-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:12px;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.kp-rij-feiten dt{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.kp-rij-feiten dd{margin:0;font-weight:700;font-size:15px}
.kp-rij-acties{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.kp-leeg{display:flex;align-items:center;gap:14px;padding:30px;border-radius:22px;
  border:1px dashed var(--line);color:var(--muted)}
.kp-knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.kp-terug{margin-top:24px}

/* Gegevensformulier. */
.kp-form{display:grid;gap:22px;padding:clamp(22px,3.4vw,32px);border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px rgba(0,0,0,.3);margin-bottom:18px}
.kp-form>h2{margin:0}
.kp-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.kp-velden .kp-breed{grid-column:1/-1}
.kp-velden label{display:grid;gap:8px}
.kp-velden label>span{font-size:14px;font-weight:700}
.kp-velden label>span i{color:var(--c1);font-style:normal}
.kp-velden input,.kp-velden select{width:100%;padding:13px 16px;border-radius:16px;
  border:1px solid var(--line);background:rgba(7,6,13,.5);color:var(--text);font:inherit;font-size:16px;
  transition:border-color .25s,box-shadow .25s}
.kp-velden input:focus,.kp-velden select:focus{outline:none;border-color:var(--c1);
  box-shadow:0 0 0 3px rgba(255,61,110,.16)}
.kp-velden select{appearance:none;cursor:pointer;
  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 14px center;background-size:18px;padding-right:44px}
.kp-form-voet{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.kp-form-voet p{font-size:13px;max-width:44ch;margin:0}

.kp-contact{display:grid;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.kp-contact-voet{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.kp-toevoegen{margin-top:4px;border-top:1px solid var(--line);padding-top:14px}
.kp-toevoegen summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
.kp-toevoegen summary::-webkit-details-marker{display:none}
.kp-toevoegen summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;
  margin-right:10px;border-radius:999px;border:1px solid var(--line);color:var(--c1);font-weight:700}
.kp-toevoegen[open] summary::before{content:"\00d7"}

.kp-foot{border-top:1px solid var(--line);padding:26px 0;margin-top:40px;font-size:14px}
.kp-foot-in{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.kp-foot p{margin:0}
.kp-foot a{border-bottom:1px solid var(--line)}
.kp-foot a:hover{border-bottom-color:var(--c1)}

@media (max-width:640px){
  .kp-taak{flex-wrap:wrap}
  .kp-taak .btn{width:100%;justify-content:center}
  .kp-wie{display:none}
}

/* Het blok Klantpaneel in het beheer. */
.paneel{display:grid;gap:18px;padding:22px;border-radius:20px;
  border:1px solid var(--line);background:var(--card)}
.paneel-kop{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.paneel-kop .pill .ic{width:12px;height:12px;margin-right:5px}
.paneel-gezien{margin-left:auto;font-size:13px;color:var(--muted)}
.paneel-vak{display:grid;gap:8px}
.paneel-label{font-size:14px;font-weight:700}
.paneel-label small{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--muted)}
.paneel-rij{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.paneel-veld{flex:1 1 320px;min-width:0;padding:12px 15px;border-radius:14px;
  border:1px solid var(--line);background:rgba(7,6,13,.55);color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  text-overflow:ellipsis;transition:border-color .25s,box-shadow .25s}
.paneel-veld:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(255,61,110,.16)}
.paneel-uit{padding:14px 16px;border-radius:14px;font-size:14px;
  border:1px solid rgba(255,154,61,.3);background:rgba(255,154,61,.07);color:#ffd2a6}
.paneel-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.paneel-knoppen form.inline{display:inline}
.paneel-code{margin-top:26px}
.paneel-code .adm-sub3{margin-bottom:6px}
@media (max-width:720px){
  .paneel-gezien{margin-left:0;flex-basis:100%}
  .paneel-rij .btn{flex:1}
}

/* Het codescherm: één veld, dus geen rij van kolommen maar een rustig vak. */
.kp-codeform{max-width:440px}
.kp-codeform input{letter-spacing:.14em;font-size:17px}
.kp-codeform .kp-form-voet{align-items:flex-start;flex-direction:column;gap:12px}
.kp-slot{border-color:rgba(255,154,61,.35);background:rgba(255,154,61,.07)}

/* Voetregel onder het inlogvak: wachtwoord vergeten, terug naar inloggen. */
.adm-login-voet{margin-top:22px;font-size:14px;color:var(--muted)}
.adm-login-voet a{border-bottom:1px solid var(--line);transition:.2s}
.adm-login-voet a:hover{color:var(--text);border-bottom-color:var(--c1)}
.adm-login .flash{margin-bottom:16px}
.kp-vraaglink{display:grid;gap:16px;margin-top:16px;justify-items:start}
.kp-vraaglink .kp-velden{width:100%;max-width:360px}
.kp-codehulp{margin-top:18px}

/* ---------- Dashboard in het beheer ---------- */
.dash-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:14px;margin-bottom:10px}
.dash-kaart{display:grid;gap:5px;padding:20px 22px;border-radius:20px;
  border:1px solid var(--line);background:var(--card)}
.dash-kaart.is-laat{border-color:rgba(255,61,110,.35);background:rgba(255,61,110,.07)}
.dash-kaart.is-nieuw{border-color:rgba(255,154,61,.35);background:rgba(255,154,61,.07)}
.dash-label{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
/* Het verloop op de tekst heeft lucht nodig, anders knipt het de staarten af. */
.dash-groot{font-family:'Unbounded',sans-serif;font-size:clamp(23px,3vw,30px);letter-spacing:-1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.12em .06em;margin:-.12em -.06em}
.dash-sub{font-size:13px}
.dash-sub a{border-bottom:1px solid var(--c1)}
.dash-fijn{display:block;font-size:12.5px;margin-top:2px}

/* Pas naast elkaar als er echt plaats is: twee tabellen van vijf kolommen in een halve schermbreedte breken alleen maar af. */
.dash-kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:0 34px;align-items:start}
.dash-kolommen .adm-table td:nth-child(3),
.dash-kolommen .adm-table th:nth-child(3){white-space:nowrap}
.dash-kolommen .adm-block{margin-top:40px}
/* De kop van een blok met een knop ernaast. */
.adm-block-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:18px;padding-top:24px;border-top:1px solid var(--line)}
.adm-block-kop .adm-sub{margin:0;padding-top:0;border-top:0}

.dash-snel{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px}
.dash-snel a{display:grid;gap:3px;padding:18px 20px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);transition:.25s}
.dash-snel a:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22)}
.dash-snel a .ic{width:18px;height:18px;color:var(--c1);margin-bottom:5px}
.dash-snel a b{font-size:15px}
.dash-snel a span{font-size:13px;color:var(--muted)}

/* De klantenlogin in de menu-overlay: zelfde vorm als de andere chips, maar iets levendiger, want dit is iets om op te klikken en niet iets om te lezen. */
/* Met .menu-ov ervoor, anders wint de algemene .menu-ov .mo-chip verderop in dit bestand op gewicht en blijft deze chip er grijs uitzien. */
.menu-ov .mo-chip-klant{color:var(--text);border-color:rgba(255,61,110,.35);background:rgba(255,61,110,.08)}
.menu-ov .mo-chip-klant:hover{border-color:rgba(255,61,110,.7);background:rgba(255,61,110,.16)}

/* ---------- Keuzehulp op /diensten ---------- */
/* In de kop, niet in een eigen kaart eronder: dit is de eerste vraag van de pagina en geen hulpmiddel dat je er los bij krijgt. */
.keuzehulp{margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(22px,2.8vw,30px);
  border-top:1px solid var(--line)}
.kh-vraag{margin:0 0 14px;font-family:'Unbounded',sans-serif;font-size:15px;letter-spacing:-.3px;
  color:var(--muted)}
.kh-rij{display:flex;flex-wrap:wrap;gap:10px}
.kh-knop{display:inline-flex;align-items:center;gap:11px;
  padding:13px 18px;border-radius:999px;font-size:15px;line-height:1.3;
  border:1px solid var(--line);background:rgba(255,255,255,.035);color:rgba(243,241,250,.9);
  cursor:pointer;transition:.25s}
.kh-knop .ic{width:14px;height:14px;flex:none;color:var(--muted);transition:.25s}
.kh-knop:hover{color:#fff;border-color:rgba(255,154,61,.5);background:rgba(255,154,61,.09);
  transform:translateY(-2px)}
.kh-knop:hover .ic{color:var(--c2);transform:translate(2px,-2px)}
.kh-knop.is-aan{color:#fff;border-color:transparent;background:var(--grad);font-weight:700;
  box-shadow:0 10px 30px rgba(255,61,110,.32)}
.kh-knop.is-aan .ic{color:#fff}
.kh-antwoord{margin:16px 0 0;font-size:16px;color:rgba(243,241,250,.9);max-width:70ch}

/* ---------- De diensten als banden ---------- */
.dienst-banden{display:grid;gap:clamp(18px,2.4vw,26px)}
/* scroll-margin houdt de band onder de zwevende navigatie als de keuzehulp ernaartoe springt; zonder dat schuift de titel eronder. */
.dienst-band{scroll-margin-top:104px;display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  border-radius:30px;overflow:hidden;border:1px solid var(--line);background:var(--card);
  transition:transform .35s,border-color .35s,opacity .3s,box-shadow .35s}
.dienst-band:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
/* Om en om gespiegeld, zodat het oog blijft bewegen in plaats van een kolom af te lopen. */
.dienst-band:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,34%)}
.dienst-band:nth-child(even) .db-art{order:2}
.db-art{position:relative;min-height:240px;overflow:hidden;background:#140f26}
.db-art img,.db-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Het filmpje ligt over de afbeelding en komt pas in beeld als hij speelt, zodat er nooit een zwart vlak of een sprong te zien is. */
.db-film{opacity:0;transition:opacity .6s}
.db-film.speelt{opacity:1}
@media (prefers-reduced-motion:reduce){.db-film{display:none}}
.db-tekst{display:flex;flex-direction:column;gap:14px;padding:clamp(26px,3vw,40px)}
.db-tekst h2{font-family:'Unbounded',sans-serif;font-size:clamp(21px,2.6vw,27px);line-height:1.15;
  letter-spacing:-.8px}
.db-tekst h2 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.db-tag{margin-top:-6px;font-size:15.5px;font-weight:700;color:var(--c2)}
.db-body{font-size:15.5px;color:var(--muted);line-height:1.7;max-width:68ch}
.db-punten{list-style:none;display:grid;gap:9px;margin-top:2px}
.db-punten li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:rgba(243,241,250,.84)}
.db-punten li .ic{width:16px;height:16px;flex:none;margin-top:4px;color:var(--c2)}

@media (max-width:860px){
  /* Allebei noemen: .dienst-band:nth-child(even) hierboven weegt zwaarder dan .dienst-band, dus zonder deze regel blijven de even banden in twee kolommen staan en loopt de tekst uit zijn vak. */
  .dienst-band,
  .dienst-band:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .dienst-band:nth-child(even) .db-art{order:0}
  .db-art{min-height:215px}
}

/* De gekozen dienst licht op, de rest zakt weg. */
.dienst-band.is-doffer{opacity:.4}
.dienst-band.is-gekozen{border-color:rgba(255,61,110,.55);
  box-shadow:0 0 0 1px rgba(255,61,110,.25),0 26px 70px rgba(255,61,110,.16)}
@media (prefers-reduced-motion:reduce){.dienst-band,.db-ic{transition:none}}
/* Dezelfde zin, maar dan binnen de gekozen kaart. */
.kh-antwoord.in-kaart{margin:0;padding:13px 16px;border-radius:14px;font-size:15px;line-height:1.6;
  border:1px solid rgba(255,61,110,.3);background:rgba(255,61,110,.08);color:rgba(243,241,250,.92)}
.kh-antwoord.in-kaart::before{display:none}

/* ---------- /diensten: podium met de animaties ---------- */
.dp-media{position:relative;flex:1;margin:22px 0;border-radius:22px;overflow:hidden;
  background:#140f26;border:1px solid rgba(255,255,255,.08)}
.dp-laag{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.dp-laag.on{opacity:1}
.dp-laag img,.dp-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Het filmpje ligt over het beeld en komt pas tevoorschijn als het speelt, zodat er nooit een zwart vlak of een sprong te zien is. */
.dp-film{opacity:0;transition:opacity .6s}
.dp-film.speelt{opacity:1}
.dp-stage .stage-title{font-size:clamp(18px,1.9vw,23px)}

.dp-item{scroll-margin-top:104px}
.dp-item h2{font-family:'Unbounded',sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.15;
  letter-spacing:-1px;margin-bottom:6px}

.dp-item .svc-kinderen{margin-top:20px}

/* Onder 980px verdwijnt het podium, en daarmee alle beeld en beweging op deze pagina. */
@media (max-width:980px){
  .dp-item{justify-content:flex-start}
  .dp-list{gap:18px}
}

/* ---------- Layouts: overzicht ---------- */
.lay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px}
.lay-kaart{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);background:var(--card);transition:transform .35s,border-color .35s}
.lay-kaart:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.lay-kaart.is-verkocht{opacity:.82}
/* Het venster met de levende miniatuur. */
.lay-venster{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0a0812;
  border-bottom:1px solid var(--line)}
/* De miniatuur rendert op 1280 breed en wordt daarna teruggeschaald tot precies de breedte van de kaart. */
.lay-mini{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;
  transform:scale(var(--mini,.45));transform-origin:0 0;pointer-events:none}
/* Een doorzichtige laag erover: de miniatuur is om naar te kijken, de klik hoort naar de layoutpagina te gaan en niet in het ontwerp zelf te landen. */
.lay-dek{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,6,13,.45),transparent 55%)}
.lay-badge{position:absolute;top:14px;right:14px;padding:7px 15px;border-radius:999px;
  font-size:13px;font-weight:700;color:#fff;background:var(--grad);
  box-shadow:0 10px 26px rgba(255,61,110,.35)}
.lay-badge.klein{position:static;padding:5px 12px;font-size:12px;box-shadow:none}
.lay-tekst{display:flex;flex-direction:column;gap:12px;padding:24px 26px 26px;flex:1}
.lay-tekst h2{font-family:'Unbounded',sans-serif;font-size:19px;letter-spacing:-.5px}
.lay-tekst h2 a:hover{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lay-tekst>p{color:var(--muted);font-size:15px;line-height:1.65}
.lay-voet{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.lay-tag{padding:5px 12px;border-radius:999px;font-size:12.5px;color:var(--muted);
  border:1px solid var(--line);background:rgba(255,255,255,.035)}
.lay-tekst .more-btn{margin-top:14px}

/* ---------- Layouts: één layout bekijken ---------- */
body.toon{background:var(--bg);overflow:hidden}
.lay-toon{display:flex;flex-direction:column;height:100vh;height:100svh}
.lay-balk{display:flex;align-items:center;gap:18px;flex:none;padding:12px clamp(14px,2.4vw,24px);
  border-bottom:1px solid var(--line);background:var(--bg2)}
.lay-merk{font-family:'Unbounded',sans-serif;font-weight:900;font-size:18px;letter-spacing:-.5px;flex:none}
/* Zie feedback_background_clip_text_snijdt_af: lucht aan alle vier de kanten. */
.lay-merk .dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding:.22em .07em;margin:-.22em -.07em}
.lay-merk .tld{color:var(--muted);font-weight:500}
.lay-balk-midden{display:flex;align-items:center;gap:12px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.lay-balk-midden::-webkit-scrollbar{display:none}
.lay-balk-titel{font-size:15px;font-weight:700;white-space:nowrap}
.lay-schakel{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);
  border:1px solid var(--line)}
.lay-schakel a{padding:7px 15px;border-radius:999px;font-size:14px;color:var(--muted);white-space:nowrap;transition:.2s}
.lay-schakel a:hover{color:var(--text)}
.lay-schakel a.on{color:#fff;font-weight:700;background:var(--grad)}
.lay-balk-rechts{display:flex;align-items:center;gap:10px;flex:none}
.lay-scherm{flex:1;width:100%;border:0;background:#fff}

@media (max-width:720px){
  .lay-balk{flex-wrap:wrap;gap:10px}
  .lay-balk-midden{order:3;flex-basis:100%}
  .lay-balk-rechts{margin-left:auto}
  .lay-balk-rechts .btn{padding:7px 13px;font-size:13px}
}
/* Een scherm hernoemen, in de rij zelf. */
.lay-hernoem{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lay-hernoem input[type=text]{flex:1 1 180px;min-width:0;padding:8px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(7,6,13,.5);color:var(--text);font:inherit;font-size:14px}
.lay-hernoem input[type=number]{width:70px;padding:8px 10px;border-radius:12px;
  border:1px solid var(--line);background:rgba(7,6,13,.5);color:var(--text);font:inherit;font-size:14px}
.lay-hernoem input:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px rgba(255,61,110,.16)}
.lay-adres{flex-basis:100%;font-size:12.5px;color:var(--muted)}
/* De categorie staat voorop in de voet van een layoutkaart. */
.lay-tag.is-cat{color:var(--text);border-color:rgba(255,154,61,.4);background:rgba(255,154,61,.1)}

/* Schermafdrukken bij een project. */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px;margin-top:22px;align-items:start}
.shots .shot{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.shots .shot img{display:block;width:100%;height:auto}
.shots .shot-staand{display:flex;flex-direction:column;align-items:center;padding-top:26px}
.shots .shot-staand .tel{--tel-b:290px}
.shots .shot-staand figcaption{width:100%;margin-top:26px;border-top:1px solid var(--line)}
.shots figcaption{padding:14px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}