*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
:root{
  --bg:#060608;--surface:#0a0a0d;--surface2:#13131a;
  --border:rgba(255,255,255,.07);--accent:#7c3aed;--accent2:#00d4ff;
  --text:#e8e8f0;--muted:#999;--g:4.8vw;--nav-h:64px;
  scroll-behavior:smooth;
}
html{font-family:'Inter',sans-serif;font-size:16px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none;scroll-padding-top:var(--nav-h);}
body{overflow-x:hidden;}


.outer{padding-left:var(--g);padding-right:var(--g);}
section{padding:9rem 0;}
#about{padding:6rem 0;}

/* Bovenaan de pagina is de balk doorzichtig: een half-zwarte balk met blur
   over de gloed van een subpagina sneed daar een zichtbare rechthoek uit.
   Zodra je scrolt (.scrolled, na 40px) komt de achtergrond erbij, zodat de
   tekst leesbaar blijft over wat eronder door schuift. */
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,transform .35s cubic-bezier(.4,0,.2,1);}
nav.nav-hidden{transform:translateY(-100%);}
nav.scrolled{background:rgba(6,6,8,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom-color:var(--border);}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;}.nav-inner .nav-links{justify-self:center;}.nav-inner>:last-child{justify-self:end;}
.logo{display:flex;align-items:center;}
.logo span{color:var(--accent);}
.nav-links{display:flex;gap:2.5rem;list-style:none;}
.nav-links a{font-size:13px;color:var(--muted);letter-spacing:.02em;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-right{display:flex;align-items:center;gap:.75rem;}
.nav-cta{font-size:13px;font-weight:500;padding:10px 22px;background:var(--accent);color:#fff;border-radius:6px;transition:opacity .2s,transform .2s;}
.nav-cta:hover{opacity:.85;transform:translateY(-1px);}

/* Language toggle */
.lang-toggle{display:flex;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.lang-btn{font-size:12px;font-weight:500;padding:8px 13px;color:var(--muted);transition:all .2s;letter-spacing:.05em;border:none;background:none;}
.lang-btn.active{background:var(--accent);color:#fff;}
.lang-btn:hover:not(.active){color:#fff;}
.lang-divider{width:1px;height:16px;background:var(--border);}

#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:calc(var(--nav-h) + 6vh);padding-bottom:5rem;position:relative;}
#hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:18rem;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;z-index:1;}
.hero-bg-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.18) 0%,rgba(124,58,237,.14) 20%,rgba(124,58,237,.09) 38%,rgba(124,58,237,.04) 55%,rgba(124,58,237,.01) 68%,transparent 75%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;filter:blur(2px);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;}
.hero-content{position:relative;z-index:2;max-width:900px;}
.hero-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(34,197,94,.9);background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);border-radius:999px;padding:5px 14px 5px 10px;margin-bottom:2rem;}
.hero-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px 2px rgba(34,197,94,.5);animation:dot-pulse 2s ease-in-out infinite;flex-shrink:0;}
@keyframes dot-pulse{0%,100%{opacity:1;box-shadow:0 0 6px 2px rgba(34,197,94,.5);}50%{opacity:.6;box-shadow:0 0 10px 4px rgba(34,197,94,.3);}}
h1.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(48px,7vw,88px);font-weight:700;line-height:.95;letter-spacing:-.02em;color:#fff;margin-bottom:1.8rem;white-space:nowrap;}
h1.hero-title .line2{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25);}
h1.hero-title .typed-wrap{color:var(--accent);position:relative;}
/* De cursor is een los streepje met de hoogte van een hoofdletter. Een rand op het woord zelf was zo hoog als de letterbox en stak door de regel erboven. */
#typed-text{position:relative;display:inline-block;line-height:1;padding-right:.1em;}
/* Een onzichtbaar teken (zero-width space), zodat het blokje ook zonder letters zijn hoogte houdt. Anders klapt het in tot nul en zakt de cursor naar de regel eronder. */
#typed-text::before{content:"\200B";}
#typed-text::after{content:"";position:absolute;right:0;top:.06em;height:.82em;width:3px;background:var(--accent);animation:blink .7s step-end infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-sub{font-size:16px;font-weight:300;line-height:1.75;color:var(--muted);max-width:480px;margin-bottom:2.5rem;}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;}
.hero-btns .magnetic{display:inline-flex;}
.btn-primary{font-size:14px;font-weight:500;padding:14px 32px;background:var(--accent);color:#fff;border-radius:6px;border:1px solid transparent;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,58,237,.25);}
.btn-ghost{font-size:14px;font-weight:500;padding:14px 32px;border:1px solid rgba(255,255,255,.18);color:var(--text);border-radius:6px;transition:border-color .2s,color .2s;display:inline-flex;align-items:center;gap:8px;}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);color:#fff;}
.btn-wa-cta:hover{border-color:rgba(37,211,102,.7)!important;color:#25d366!important;transform:translateY(-3px);box-shadow:0 12px 32px rgba(37,211,102,.2);}
@media(hover:none){.btn-wa-cta{border-color:rgba(37,211,102,.5)!important;color:#25d366!important;box-shadow:0 0 20px rgba(37,211,102,.15);}}

.hero-float{position:absolute;right:4vw;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;}
.float-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;width:220px;margin-bottom:24px;backdrop-filter:blur(10px);}
.float-card-sm{width:160px;margin-left:auto;}
.fc-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.fc-bar{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden;margin:4px 0;}
.fc-bar-fill{height:100%;border-radius:3px;}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes mob-float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes mob-float2{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.f1{animation:float1 4s ease-in-out infinite;}
.f2{animation:float2 5s ease-in-out infinite .5s;}
.f3{animation:float3 3.5s ease-in-out infinite 1s;}

.marquee-section{padding:2rem 0;background:var(--surface);overflow:hidden;position:relative;border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);}
.fade-edge{position:relative;}
.fade-edge::before,.fade-edge::after{content:'';position:absolute;left:0;right:0;height:5rem;pointer-events:none;z-index:2;}
.fade-edge::before{top:0;background:linear-gradient(to bottom,var(--bg),transparent);}
.fade-edge::after{bottom:0;background:linear-gradient(to top,var(--bg),transparent);}
.fade-edge-sm::before,.fade-edge-sm::after{height:2.5rem;}
.marquee-track{display:flex;white-space:nowrap;}
.marquee-inner{display:flex;animation:marquee 55s linear infinite;}
.marquee-item{display:inline-flex;align-items:center;gap:12px;padding:0 2.5rem;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.marquee-item svg{opacity:.4;}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.about-strip{display:grid;grid-template-columns:420px 1fr;gap:4rem;align-items:center;}
.about-img-wrap{position:relative;width:280px;margin:0 auto;}
.about-img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:16px;}
.about-badge{position:absolute;bottom:-20px;right:-20px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:16px;padding:20px 24px;font-family:'Space Grotesk',sans-serif;text-align:center;min-width:120px;box-shadow:0 8px 40px rgba(124,58,237,.45),0 0 0 1px rgba(255,255,255,.15) inset;}
.about-badge .badge-icon{display:block;margin:0 auto 8px;opacity:.85;}
.about-badge .big-num{font-size:42px;font-weight:700;line-height:1;display:block;}
.about-badge .small-lbl{font-size:10px;opacity:.75;letter-spacing:.08em;text-transform:uppercase;margin-top:4px;display:block;}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem;padding-top:3rem;border-top:1px solid var(--border);}
.stat-item{background:var(--bg);border-radius:14px;padding:1.5rem 1rem;text-align:center;transition:border-color .3s,box-shadow .3s;}
.stat-item:nth-child(1){border:1px solid rgba(124,58,237,.4);}
.stat-item:nth-child(2){border:1px solid rgba(0,212,255,.35);}
.stat-item:nth-child(3){border:1px solid rgba(34,197,94,.35);}
.stat-item:nth-child(1):hover{border-color:rgba(124,58,237,.65);box-shadow:0 0 20px rgba(124,58,237,.12);}
.stat-item:nth-child(2):hover{border-color:rgba(0,212,255,.6);box-shadow:0 0 20px rgba(0,212,255,.1);}
.stat-item:nth-child(3):hover{border-color:rgba(34,197,94,.6);box-shadow:0 0 20px rgba(34,197,94,.1);}
.stat-item .num{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:#fff;line-height:1;}
.stat-item .lbl{font-size:11px;color:var(--muted);margin-top:6px;letter-spacing:.05em;text-transform:uppercase;}

.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5px;background:var(--border);border-radius:16px;overflow:hidden;}
.service-card{background:var(--surface);padding:3rem;transition:background .25s;}
.service-card:hover{background:var(--surface2);}
.service-card:first-child{border-radius:16px 0 0 0;}
.service-card:nth-child(2){border-radius:0 16px 0 0;}
.service-card:nth-child(3){border-radius:0 0 0 16px;}
.service-card:last-child{border-radius:0 0 16px 0;}
.service-icon{width:48px;height:48px;background:rgba(124,58,237,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:background .25s;}
.service-card:hover .service-icon{background:rgba(124,58,237,.3);}
.service-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:#fff;margin-bottom:.75rem;}
.service-desc{font-size:14px;line-height:1.75;color:var(--muted);}
.service-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.stag{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:#888;letter-spacing:.04em;}

.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:820px;margin:0 auto;}
.pricing-card{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:2.5rem;display:flex;flex-direction:column;transition:border-color .25s,box-shadow .25s;box-shadow:0 0 48px rgba(124,58,237,.13);}
.pricing-card:hover{border-color:rgba(124,58,237,.35);box-shadow:0 0 64px rgba(124,58,237,.2);}
.pricing-card.featured{background:linear-gradient(145deg,rgba(124,58,237,.1) 0%,var(--surface2) 55%);border-color:rgba(124,58,237,.45);box-shadow:0 0 48px rgba(124,58,237,.18);}
.pricing-card.featured:hover{box-shadow:0 0 72px rgba(124,58,237,.28);}
.pricing-divider{height:1px;background:var(--border);margin:1.5rem 0;}
.pricing-card.featured .pricing-divider{background:rgba(124,58,237,.25);}
.pricing-features{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-direction:column;gap:.75rem;flex:1;}
.pricing-features li{display:flex;align-items:flex-start;gap:.6rem;font-size:13.5px;color:rgba(232,232,240,.75);line-height:1.4;}
.pricing-features li svg{flex-shrink:0;margin-top:1px;}
.pricing-features li.feat-no{opacity:.3;}
.bill-lbl{font-size:13px;color:var(--muted);transition:color .2s;cursor:pointer;}
.bill-lbl-active{color:#fff;}
.bill-switch{width:42px;height:22px;border-radius:11px;background:var(--surface2);border:1px solid var(--border);position:relative;cursor:pointer;transition:background .25s;flex-shrink:0;}
.bill-switch.on{background:var(--accent);border-color:var(--accent);}
.bill-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s;}
.bill-switch.on .bill-thumb{transform:translateX(20px);}
.bill-save{font-size:11px;font-weight:500;padding:3px 9px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28);color:#22c55e;letter-spacing:.04em;}
.pricing-btn{display:block;text-align:center;padding:.85rem 1rem;border-radius:8px;font-size:14px;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:opacity .2s,background .2s,border-color .2s;}
.pricing-btn-ghost{border:1px solid var(--border);color:#fff;}
.pricing-btn-ghost:hover{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.08);}
.pricing-btn-solid{background:#0084FF;color:#fff;}
.pricing-btn-solid:hover{background:#0073e6;opacity:1;}
.pricing-faq{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;}
.pfaq-item{padding:.875rem 0;border-bottom:1px solid var(--border);}
.pfaq-item:last-child,.pfaq-item:nth-last-child(2){border-bottom:none;}
.pfaq-q{font-size:13.5px;font-weight:500;color:#fff;margin-bottom:.3rem;}
.pfaq-a{font-size:13px;color:var(--muted);line-height:1.65;}
@media(max-width:520px){.pricing-features{grid-template-columns:1fr !important;}}

.portfolio-tabs{display:flex;gap:.5rem;margin-bottom:3rem;}
.ptab{font-size:13px;padding:8px 18px;border-radius:6px;border:1px solid var(--border);color:var(--muted);transition:all .2s;}
.ptab.active,.ptab:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.p-card{border-radius:12px;overflow:hidden;position:relative;background:var(--surface);}
.p-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s ease,filter .5s ease;}
.p-card:hover .p-card-img{transform:scale(1.06);filter:brightness(.5);}
.p-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem;background:linear-gradient(to top,rgba(6,6,8,.95) 0%,transparent 60%);transform:translateY(30px);opacity:0;transition:opacity .35s,transform .35s;}
.p-card:hover .p-card-overlay{opacity:1;transform:translateY(0);}
.p-cat{font-size:10px;color:var(--accent2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;}
.p-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#fff;margin-bottom:.4rem;}
.p-desc{font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;}
.p-card-tag{position:absolute;top:14px;left:14px;font-size:10px;background:rgba(6,6,8,.8);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--muted);padding:4px 10px;border-radius:999px;letter-spacing:.06em;}
.p-card.wide{grid-column:span 2;}

.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.process-grid::before{content:'';position:absolute;top:27px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:0;}
.process-step{text-align:center;padding:0 .75rem;position:relative;}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:var(--accent);margin:0 auto 1.5rem;position:relative;z-index:1;transition:all .25s;box-shadow:0 0 0 6px var(--surface);}
.process-step:hover .step-num{box-shadow:0 0 0 6px var(--surface),0 0 20px 4px rgba(124,58,237,.6),0 0 40px 8px rgba(0,212,255,.25);}
.step-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#fff;margin-bottom:.5rem;}
.step-desc{font-size:13px;color:var(--muted);line-height:1.65;}

.testi-carousel{position:relative;max-width:680px;margin:0 auto;}
.testi-track{display:flex;gap:2rem;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.testi-card{min-width:100%;background:var(--surface);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:2.5rem;display:flex;flex-direction:column;}
.testi-card .testi-quote{flex:1;}
.testi-card .testi-author{margin-top:1.5rem;}
.testi-nav{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin-top:2rem;}
.testi-btn{background:none;border:1px solid var(--border);color:var(--muted);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1;}
.testi-btn:hover{border-color:var(--accent);color:var(--accent);}
.testi-dots{display:flex;gap:.5rem;align-items:center;}
.testi-dot{width:7px;height:7px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:all .3s;padding:0;}
.testi-dot.active{width:22px;border-radius:4px;background:var(--accent);}
.stars{color:#f59e0b;font-size:14px;margin-bottom:1rem;letter-spacing:2px;}
.testi-quote{font-size:14px;line-height:1.75;color:var(--text);margin-bottom:1.5rem;}
.testi-author{display:flex;align-items:center;gap:.75rem;}
.testi-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(.3);}
.testi-name{font-size:14px;font-weight:500;color:#fff;}
.testi-role{font-size:12px;color:var(--muted);}

.cta-section{text-align:center;background:var(--surface);border-radius:24px;padding:3.375rem 4rem;position:relative;overflow:hidden;border:1px solid rgba(124,58,237,.18);animation:border-glow 8s ease-in-out infinite;}
@keyframes border-glow{0%,100%{box-shadow:0 0 60px rgba(124,58,237,.18),0 0 120px rgba(124,58,237,.07),-8px 0 80px rgba(124,58,237,.12),8px 0 80px rgba(0,212,255,.06);}25%{box-shadow:0 -8px 80px rgba(0,212,255,.14),0 0 120px rgba(124,58,237,.06),8px 0 60px rgba(124,58,237,.1),-8px 0 40px rgba(0,212,255,.05);}50%{box-shadow:8px 0 80px rgba(0,212,255,.15),0 0 100px rgba(124,58,237,.08),0 8px 80px rgba(124,58,237,.1),-8px 0 60px rgba(0,212,255,.06);}75%{box-shadow:-8px 0 80px rgba(124,58,237,.18),0 0 120px rgba(0,212,255,.07),0 -8px 60px rgba(0,212,255,.08),8px 0 40px rgba(124,58,237,.08);}}
.cta-bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.055) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 30%,transparent 100%);mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 30%,transparent 100%);}
.cta-corner{position:absolute;width:56px;height:56px;pointer-events:none;}
.cta-corner-tl{top:-1px;left:-1px;border-top:2px solid rgba(124,58,237,.6);border-left:2px solid rgba(124,58,237,.6);border-radius:24px 0 0 0;}
.cta-corner-tr{top:-1px;right:-1px;border-top:2px solid rgba(0,212,255,.35);border-right:2px solid rgba(0,212,255,.35);border-radius:0 24px 0 0;}
.cta-corner-bl{bottom:-1px;left:-1px;border-bottom:2px solid rgba(0,212,255,.35);border-left:2px solid rgba(0,212,255,.35);border-radius:0 0 0 24px;}
.cta-corner-br{bottom:-1px;right:-1px;border-bottom:2px solid rgba(124,58,237,.6);border-right:2px solid rgba(124,58,237,.6);border-radius:0 0 24px 0;}
.cta-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.28) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;animation:glow-drift 10s ease-in-out infinite;will-change:transform;filter:blur(8px);}
.cta-glow2{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.13) 0%,transparent 70%);top:15%;right:8%;pointer-events:none;animation:glow-drift2 14s ease-in-out infinite;filter:blur(6px);}
.cta-glow3{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.1) 0%,transparent 70%);bottom:10%;left:6%;pointer-events:none;animation:glow-drift2 11s ease-in-out infinite reverse;filter:blur(5px);}
@keyframes glow-drift{0%{transform:translate(-50%,-50%) translate(0px,0px)}25%{transform:translate(-50%,-50%) translate(50px,-25px)}50%{transform:translate(-50%,-50%) translate(0px,-50px)}75%{transform:translate(-50%,-50%) translate(-50px,-25px)}100%{transform:translate(-50%,-50%) translate(0px,0px)}}
@keyframes glow-drift2{0%,100%{transform:translate(0,0)}33%{transform:translate(-20px,15px)}66%{transform:translate(15px,-10px)}}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(34,197,94,.4)}50%{opacity:.8;box-shadow:0 0 0 5px rgba(34,197,94,0)}}
.cta-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,3.5vw,46px);font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:.5rem;line-height:1.15;position:relative;z-index:1;}
.cta-sub{font-size:16px;color:var(--muted);margin-bottom:2.5rem;position:relative;z-index:1;}
.cta-email{font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3vw,40px);font-weight:600;color:var(--accent);position:relative;z-index:1;display:inline-block;transition:opacity .2s;}
.cta-email:hover{opacity:.75;}

.sec-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;}
.sec-label::before{content:'';width:20px;height:1px;background:var(--accent);}
.sec-heading{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1.05;margin-bottom:1.5rem;}

footer{background:var(--bg);border-top:1px solid var(--border);padding:2.25rem 0;}
.footer-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}.footer-inner .footer-links{justify-self:center;}.footer-inner>:last-child{justify-self:end;}
.footer-links{display:flex;gap:2rem;}
.footer-links a{font-size:13px;color:var(--muted);transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-copy{font-size:12px;color:var(--muted);}
.footer-legal a{font-size:13px;color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-legal a:hover{color:#fff;}

.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-l.visible{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-r.visible{opacity:1;transform:translateX(0);}
.delay-1{transition-delay:.1s!important;}.delay-2{transition-delay:.2s!important;}
.delay-3{transition-delay:.3s!important;}.delay-4{transition-delay:.4s!important;}.delay-5{transition-delay:.5s!important;}

a{text-decoration:none;color:inherit;}
.grad{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}

/* Language switch animation */
[data-i18n],[data-i18n-html]{transition:opacity .2s ease;}
.lang-switching [data-i18n],.lang-switching [data-i18n-html]{opacity:0;}

/* ── Portfolio mockups ── */
.p-mockup{width:100%;display:block;overflow:hidden;position:relative;font-family:'Inter',sans-serif;aspect-ratio:4/3;}
.p-card.wide .p-mockup{aspect-ratio:unset;height:100%;}
.p-card:hover .p-mockup .mock-inner{transform:scale(1.04);filter:brightness(.55);}
.mock-inner{transition:transform .5s ease,filter .5s ease;transform-origin:top left;}

#toTop{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;z-index:90;box-shadow:0 4px 24px rgba(124,58,237,.45);}
#toTop.visible{opacity:1;transform:translateY(0);}
#toTop:hover{background:#6d28d9;}
#waBtn{position:fixed;bottom:5rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;z-index:90;box-shadow:0 0 18px 4px rgba(124,58,237,.55),0 4px 24px rgba(124,58,237,.4);transition:transform .2s,box-shadow .2s;animation:wa-pulse 2.5s ease-in-out infinite;}
#waBtn:hover{transform:scale(1.1);box-shadow:0 0 28px 8px rgba(124,58,237,.7),0 6px 32px rgba(124,58,237,.55);}
@keyframes wa-pulse{0%,100%{box-shadow:0 0 18px 4px rgba(124,58,237,.55),0 4px 24px rgba(124,58,237,.4);}50%{box-shadow:0 0 28px 10px rgba(124,58,237,.75),0 4px 28px rgba(124,58,237,.55);}}
@keyframes play-pulse{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.18);opacity:1;}}
@keyframes ring-expand{0%{transform:scale(1);opacity:.5;}100%{transform:scale(1.7);opacity:0;}}
.vid-play-icon{animation:play-pulse 1.8s ease-in-out infinite;}
.vid-play-icon::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.5);animation:ring-expand 1.8s ease-out infinite;}

::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25);}

/* ─── Burger ─── */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;border:none;background:none;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0;}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s ease,opacity .3s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ─── Mobile menu ─── */
.mobile-menu{position:fixed;inset:0;top:var(--nav-h);background:rgba(6,6,8,.97);backdrop-filter:blur(20px);z-index:99;padding:2rem var(--g);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);border-top:1px solid var(--border);}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu .mm-link{font-size:22px;font-weight:500;color:var(--muted);padding:1rem 0;border-bottom:1px solid var(--border);transition:color .2s;display:block;text-decoration:none;}
.mobile-menu .mm-link:hover,.mobile-menu .mm-link:active{color:#fff;}
.mobile-menu .mm-cta{margin-top:auto;padding-top:2rem;display:block;text-align:center;padding:1rem 1.5rem;background:var(--accent);color:#fff;border-radius:8px;font-size:15px;font-weight:600;text-decoration:none;margin-top:1.5rem;}

/* ─── Responsive: 768px ─── */
@media(max-width:768px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .nav-inner{grid-template-columns:1fr auto;}

  .hero-btns{flex-direction:column;}
  .hero-btns .magnetic{width:100%;}
  .hero-btns .btn-primary,.hero-btns .btn-ghost{width:100%;justify-content:center;}
  #hero{height:100vh;height:100dvh;min-height:0;overflow:visible;}
  .hero-float{position:relative;top:auto;right:auto;z-index:2;display:flex;flex-direction:row;gap:.75rem;margin-top:2.5rem;padding-left:var(--g);padding-right:var(--g);width:100%;box-sizing:border-box;transform:none!important;}
  .float-card{flex:1;min-width:0;margin-bottom:0;padding:12px 10px;border-color:rgba(255,255,255,.18);text-align:center;}
  .float-card>div:first-child{justify-content:center;}
  .float-card-sm{margin-left:0;width:auto;}
  .f3{display:none;}
  .f1{animation:mob-float1 3.5s ease-in-out infinite;}
  .f2{animation:mob-float2 4s ease-in-out infinite 0.6s;}
  .fc-val{font-size:18px!important;}
  section{padding:6rem 0;}

  #about{padding:3rem 0!important;}
  .about-strip{grid-template-columns:1fr;gap:1.25rem;}
  .about-img-wrap{display:none;}
  .about-badge{right:-10px;bottom:-10px;padding:14px 18px;}
  .about-badge .big-num{font-size:32px;}

  .services-grid{grid-template-columns:1fr;}
  .service-card:first-child{border-radius:16px 16px 0 0;}
  .service-card:nth-child(2){border-radius:0;}
  .service-card:nth-child(3){border-radius:0;}
  .service-card:last-child{border-radius:0 0 16px 16px;}
  .service-card{padding:2rem;}

  .portfolio-grid{grid-template-columns:1fr 1fr;}
  .portfolio-tabs{flex-wrap:wrap;}

  .process-grid{grid-template-columns:repeat(3,1fr);}
  .process-grid::before{display:none;}


  .cta-section{padding:2.5rem 1.5rem;}

  .footer-inner{grid-template-columns:1fr;gap:1.25rem;text-align:center;}
  .footer-inner .footer-links,.footer-inner>:last-child,.footer-inner>:first-child{justify-self:center;}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:1rem;display:none;}
  .footer-legal{padding-right:0!important;justify-content:center;}

  .pricing-faq{grid-template-columns:1fr;gap:0;}
  .pfaq-item:nth-last-child(2){border-bottom:1px solid var(--border);}
}

/* ─── Responsive: 480px ─── */
@media(max-width:480px){
  .portfolio-grid{grid-template-columns:1fr;}
  .p-card.wide{grid-column:span 1;}
  .process-grid{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:1fr;gap:1.5rem;}
  .about-img-wrap{max-width:140px;}
  .pricing-card{padding:1.75rem;}
  .lang-toggle{display:none;}
}

/* =============================================
   MOBILE FIXES
   ============================================= */

/* Scroll hint */
#scroll-hint{position:absolute;bottom:2.25rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:.55;transition:opacity .4s ease;cursor:pointer;z-index:2;pointer-events:auto;user-select:none;}
#scroll-hint span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-family:'Space Grotesk',sans-serif;}
#scroll-hint .scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,var(--accent),var(--accent2));transform-origin:top;animation:line-draw 1.7s ease-in-out infinite;}
@keyframes line-draw{0%{transform:scaleY(0);opacity:1;}65%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(1);opacity:0;}}
#scroll-hint:hover{opacity:.9;}

/* P7 — Global overflow lock */
html{overflow-x:hidden;max-width:100%;}

/* P1 — Hero title: remove nowrap, scale down on mobile */
@media(max-width:768px){
  h1.hero-title{white-space:normal;word-break:break-word;line-height:1.1;}
}
@media(max-width:480px){
  h1.hero-title{font-size:clamp(30px,8.5vw,48px);}
}

/* P2 — Floating buttons: dimmer + smaller on mobile so content stays readable */
@media(max-width:768px){
  #waBtn{width:40px;height:40px;bottom:1.25rem;right:1.25rem;}
  #toTop{display:none;}
  #waBtn:active,#toTop:active{opacity:1;}
}

/* P3 — Video showcase grid */
.vid-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
@media(max-width:768px){
  .vid-grid{grid-template-columns:1fr;gap:3rem;}
}

/* P4 — Touch devices: hide hover hint, autoplay handled in JS */
.vid-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;border-radius:16px;background:rgba(6,6,8,.45);backdrop-filter:blur(2px);pointer-events:none;transition:opacity .3s;}
@media(hover:none){
  .vid-hint{display:none;}
  .vid-icon-cursor{display:none;}
  .vid-icon-tap{display:block!important;}
}

/* P5 — Contact form: stack name + email on small screens */
@media(max-width:600px){
  .form-row{flex-direction:column;}
}

/* P6 — Process: timeline layout on mobile */
@media(max-width:480px){
  .process-grid{gap:0;}
  .process-step{
    display:grid;
    grid-template-columns:56px 1fr;
    grid-template-rows:56px auto;
    column-gap:1.25rem;
    align-items:start;
    text-align:left;
    padding:0 0 2rem 0;
    position:relative;
  }
  .step-num{grid-row:1;margin:0;}
  .step-title{text-align:left;margin:0 0 .35rem 0;align-self:center;}
  .step-desc{text-align:left;grid-column:2;}
  .process-step:not(:last-child)::before{
    content:'';
    position:absolute;
    left:27px;
    top:56px;
    bottom:0;
    width:2px;
    background:linear-gradient(180deg,var(--accent),var(--accent2));
  }
}

/* ── Payment modal ──────────────────────────────────────────── */
#pay-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(6,6,8,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s ease;}
#pay-backdrop.open{opacity:1;pointer-events:auto;}
#pay-modal{background:var(--surface);border:1px solid rgba(124,58,237,.25);border-radius:20px;padding:2.5rem 2rem;width:100%;max-width:440px;position:relative;transform:translateY(24px) scale(.97);transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 60px rgba(124,58,237,.18),0 24px 64px rgba(0,0,0,.6);}
#pay-backdrop.open #pay-modal{transform:translateY(0) scale(1);}
#pay-close{position:absolute;top:1.1rem;right:1.1rem;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;font-size:16px;line-height:1;}
#pay-close:hover{background:rgba(255,255,255,.12);color:var(--text);}
.pay-tag{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(124,58,237,.12);padding:.3rem .7rem;border-radius:20px;margin-bottom:1.1rem;font-family:'Space Grotesk',sans-serif;}
#pay-modal h2{font-family:'Space Grotesk',sans-serif;font-size:1.55rem;font-weight:700;letter-spacing:-.03em;color:var(--text);margin-bottom:.45rem;line-height:1.2;}
#pay-modal .pay-sub{font-size:.88rem;color:var(--muted);line-height:1.6;margin-bottom:1.75rem;}
.pay-field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1rem;}
.pay-field label{font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-family:'Space Grotesk',sans-serif;}
.pay-field input{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;}
.pay-field input::placeholder{color:#444;}
.pay-field input:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 3px rgba(124,58,237,.12);}
.pay-field input.err{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1);}
.pay-field-err{font-size:.78rem;color:#ef4444;display:none;margin-top:.15rem;}
.pay-field-err.show{display:block;}
.pay-divider{height:1px;background:var(--border);margin:1.5rem 0;}
.pay-summary{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;}
.pay-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;}
.pay-summary-row span:first-child{color:var(--muted);}
.pay-summary-row span:last-child{color:var(--text);font-weight:500;font-family:'Space Grotesk',sans-serif;}
.pay-summary-row.total span:first-child{color:var(--text);font-weight:600;}
.pay-summary-row.total span:last-child{color:var(--accent);font-size:1rem;font-weight:700;}
#pay-btn{width:100%;padding:.9rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:10px;font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:opacity .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:.6rem;position:relative;overflow:hidden;}
#pay-btn:hover:not(:disabled){opacity:.88;}
#pay-btn:active:not(:disabled){transform:scale(.98);}
#pay-btn:disabled{opacity:.55;cursor:not-allowed;}
.pay-spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:pay-spin .7s linear infinite;display:none;flex-shrink:0;}
#pay-btn.loading .pay-spinner{display:block;}
#pay-btn.loading .pay-btn-text{opacity:.6;}
@keyframes pay-spin{to{transform:rotate(360deg)}}
#pay-msg{margin-top:1rem;font-size:.88rem;text-align:center;display:none;padding:.75rem 1rem;border-radius:8px;}
#pay-msg.err{display:block;background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.2);}
.pay-secure{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:1rem;font-size:.75rem;color:#444;}
.pay-secure svg{flex-shrink:0;}
/* Socials. Rustig grijs, en pas kleur bij aanwijzen — dezelfde aanpak als de
   WhatsApp-knop, die ook alleen zijn merkkleur draagt waar dat helpt. */
.soc{display:flex;gap:.55rem;align-items:center;}
.soc a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--border);color:var(--muted);text-decoration:none;
  transition:color .2s,border-color .2s,transform .2s,background .2s;}
.soc a:hover{transform:translateY(-2px);}
.soc a.ig:hover{color:#e1306c;border-color:rgba(225,48,108,.45);background:rgba(225,48,108,.08);}
.soc a.fb:hover{color:#1877f2;border-color:rgba(24,119,242,.45);background:rgba(24,119,242,.08);}
.footer-brand{display:flex;flex-direction:column;gap:.85rem;}
@media (max-width:768px){
  .footer-inner .footer-brand{align-items:center;}
}


#intro-screen{transition:opacity .45s ease;}
#i-btn.pressed{transform:scale(.95);}


/* ── Prijzenpagina ─────────────────────────────────────────────────────────
   Dezelfde bouwstenen als de rest van de site: de prijskaart als anker, de
   inclusies met vinkjes, en de vragen in losse kaarten in plaats van als
   doorlopende tekst. */
.prijs-pagina{position:relative;padding:8rem 0 7rem;overflow:hidden;}
.prijs-glow{position:absolute;top:-18rem;left:50%;transform:translateX(-50%);width:min(78rem,130vw);
  height:44rem;pointer-events:none;
  background:radial-gradient(closest-side,rgba(124,58,237,.16),transparent 72%);}
.prijs-pagina > .outer{position:relative;z-index:1;}

.prijs-kop{max-width:680px;margin:0 auto 3.5rem;text-align:center;}
.prijs-kop .sec-heading{margin-bottom:1.5rem;}
.prijs-lead{font-size:17px;color:#c9c9d6;line-height:1.75;margin-bottom:1.25rem;}
.prijs-lead strong{color:#fff;font-weight:600;}
.prijs-intro{font-size:14.5px;color:var(--muted);line-height:1.8;}

/* ── De kaart met het bedrag ───────────────────────────────────────────── */
.prijs-kaartwrap{max-width:880px;margin:0 auto 5rem;}
.prijs-kaart{padding:2.75rem 2.5rem;}
.prijs-bedragen{display:flex;align-items:flex-start;justify-content:center;gap:1.75rem;flex-wrap:wrap;
  text-align:center;margin-bottom:1rem;}
.prijs-bedrag{min-width:8.5rem;}
.prijs-cijfer{font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,6vw,56px);font-weight:700;
  color:#fff;line-height:1;letter-spacing:-.02em;}
.prijs-onder{font-size:12.5px;color:var(--muted);margin-top:.5rem;line-height:1.5;}
.prijs-plus{font-family:'Space Grotesk',sans-serif;font-size:26px;color:var(--muted);
  align-self:center;margin-top:-1.4rem;}
.prijs-opzeg{text-align:center;font-size:12px;letter-spacing:.04em;color:var(--muted);
  margin-bottom:1.75rem;}

.prijs-kaartkop{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#fff;
  margin:1.5rem 0 1.25rem;letter-spacing:-.01em;text-align:center;}

/* Drie naast elkaar, twee rijen. Daarvoor moet de kaart breder: in 640px
   wordt elke kolom zo smal dat "SSL-beveiliging, zodat bezoekers het slotje
   zien" over vier regels breekt en de rijen ongelijk hoog worden. */
.prijs-punten{display:grid !important;grid-template-columns:repeat(3,1fr);gap:1.1rem 1.5rem;
  margin:0 0 2rem;width:auto;}
.prijs-punten li{display:flex;align-items:flex-start;gap:.6rem;font-size:13.5px;color:var(--muted);
  line-height:1.55;text-align:left;}
.prijs-punten svg{flex:none;margin-top:.22em;}

@media(max-width:820px){ .prijs-punten{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .prijs-punten{grid-template-columns:1fr;} }

.prijs-knoppen{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem;}
.prijs-knop{font-size:14px;padding:13px 22px;flex:1 1 auto;justify-content:center;min-width:11rem;}

/* ── Losse blokken ────────────────────────────────────────────────────────*/
.prijs-vraag{max-width:640px;margin:0 auto 1.25rem;background:transparent;
  border:1px solid var(--border);border-radius:16px;padding:2rem 2.25rem;
  transition:border-color .25s,transform .25s;}
.prijs-vraag:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px);}
.prijs-vraag h2{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;
  color:#fff;letter-spacing:-.01em;margin:0 0 .9rem;}
.prijs-vraag p{font-size:14.5px;color:var(--muted);line-height:1.8;margin:0 0 .9rem;}
.prijs-vraag p:last-child{margin-bottom:0;}
.prijs-vraag strong{color:#fff;font-weight:600;}

/* ── Afsluiter ─────────────────────────────────────────────────────────── */
.prijs-slot{max-width:640px;margin:4rem auto 0;text-align:center;padding-top:3rem;
  border-top:1px solid var(--border);}
.prijs-slot h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:#fff;
  margin:0 0 .75rem;letter-spacing:-.01em;}
.prijs-slot p{font-size:14.5px;color:var(--muted);line-height:1.75;margin:0 0 1.75rem;}

@media(max-width:560px){
  .prijs-pagina{padding:6rem 0 5rem;}
  .prijs-kaart{padding:2rem 1.5rem;}
  .prijs-vraag{padding:1.5rem 1.4rem;}
  .prijs-plus{display:none;}
  .prijs-bedragen{gap:1.5rem;}
}

/* ── Contactpagina ─────────────────────────────────────────────────────────
   Leunt op de prijzenpagina: dezelfde kop, dezelfde vraagblokken, dezelfde
   gloed. Alleen de contactkaarten en de gegevenslijst zijn nieuw. */
.contact-pagina{position:relative;padding:8rem 0 7rem;overflow:hidden;}
.contact-pagina > .outer{position:relative;z-index:1;}

.contact-manieren{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  max-width:880px;margin:0 auto 3.5rem;}
.contact-kaart{display:flex;align-items:flex-start;gap:1.1rem;text-decoration:none;
  background:transparent;border:1px solid var(--border);border-radius:16px;
  padding:1.6rem 1.7rem;transition:border-color .25s,transform .25s;}
.contact-kaart:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px);}
.contact-icoon{flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;background:rgba(124,58,237,.1);
  border:1px solid rgba(124,58,237,.18);color:var(--accent);}
.contact-icoon.wa{background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.22);
  color:#25d366;}
.contact-tekst{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.contact-kop{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.contact-waarde{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:#fff;
  letter-spacing:-.01em;word-break:break-word;}
.contact-onder{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:.15rem;}

.contact-formulierwrap{max-width:880px;margin:0 auto 4.5rem;}
.contact-blok{margin:0;}
.contact-blokkop{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:600;color:#fff;
  letter-spacing:-.02em;text-align:center;margin:0 0 .6rem;position:relative;z-index:1;}
.contact-blokonder{font-size:14.5px;color:var(--muted);line-height:1.75;text-align:center;
  max-width:460px;margin:0 auto 2rem;position:relative;z-index:1;}

.contact-gegevens{max-width:640px;margin:4rem auto 0;text-align:center;padding-top:3rem;
  border-top:1px solid var(--border);}
.contact-gegevens h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;
  color:#fff;letter-spacing:-.02em;margin:0 0 1.75rem;}
/* Eén kolom met regels: label links, gegeven rechts. Twee kolommen met het
   label bóven het gegeven las rommelig — het oog wist niet welk label bij welk
   gegeven hoorde. */
.contact-lijst{max-width:420px;margin:0 auto;text-align:left;}
.contact-lijst > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;padding:.85rem 0;border-bottom:1px solid var(--border);}
.contact-lijst > div:last-child{border-bottom:0;}
.contact-lijst dt{font-size:14px;color:var(--muted);flex-shrink:0;}
.contact-lijst dd{margin:0;font-size:14.5px;color:#fff;text-align:right;}
.contact-lijst dd a{color:var(--text);text-decoration:none;border-bottom:1px solid rgba(124,58,237,.35);
  transition:color .2s,border-color .2s;}
.contact-lijst dd a:hover{color:#fff;border-color:var(--accent);}

@media(max-width:820px){
  .contact-manieren{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .contact-pagina{padding:6rem 0 5rem;}
  .contact-kaart{padding:1.4rem 1.3rem;}
  .contact-lijst > div{padding:.75rem 0;gap:1rem;}
  .contact-lijst dt{font-size:13.5px;}
  .contact-blokkop{font-size:21px;}
}

/* ── Werkwijzepagina ───────────────────────────────────────────────────────
   Zelfde kop, vraagblokken en afsluiter als de prijzenpagina. Nieuw zijn de
   genummerde stappen en de tijdlijn van de eerste week. */
.werk-pagina{position:relative;padding:8rem 0 7rem;overflow:hidden;}
.werk-pagina > .outer{position:relative;z-index:1;}

.werk-stappen{max-width:720px;margin:0 auto 4.5rem;}
.werk-stap{display:flex;gap:1.75rem;padding:0 0 2.5rem;position:relative;}
/* Het lijntje dat de stappen aan elkaar rijgt; bij de laatste hoeft het niet. */
.werk-stap::before{content:'';position:absolute;left:21px;top:48px;bottom:0;width:1px;
  background:linear-gradient(rgba(124,58,237,.35),rgba(124,58,237,0));}
.werk-stap:last-child::before{display:none;}
.werk-stap:last-child{padding-bottom:0;}
.werk-nummer{flex-shrink:0;width:43px;height:43px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.25);
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:.02em;}
.werk-inhoud{padding-top:.35rem;}
.werk-inhoud h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;
  color:#fff;letter-spacing:-.01em;margin:0 0 .7rem;}
.werk-inhoud p{font-size:14.5px;color:var(--muted);line-height:1.8;margin:0 0 .9rem;}
.werk-inhoud p:last-child{margin-bottom:0;}

.werk-week{max-width:640px;margin:0 auto 4.5rem;text-align:center;
  border:1px solid var(--border);border-radius:16px;padding:2.25rem 2.25rem 2rem;}
.werk-week h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;
  color:#fff;letter-spacing:-.01em;margin:0 0 .6rem;}
.werk-weekonder{font-size:14px;color:var(--muted);line-height:1.75;margin:0 0 1.75rem;}
.werk-tijdlijn{list-style:none;margin:0;padding:0;text-align:left;}
.werk-tijdlijn li{display:flex;gap:1.25rem;align-items:baseline;
  padding:.8rem 0;border-top:1px solid var(--border);font-size:14.5px;
  color:var(--muted);line-height:1.7;}
.werk-dag{flex-shrink:0;width:72px;color:#fff;font-weight:600;font-size:13.5px;}

@media(max-width:640px){
  .werk-pagina{padding:6rem 0 5rem;}
  .werk-stap{gap:1.1rem;padding-bottom:2rem;}
  .werk-stap::before{left:18px;top:42px;}
  .werk-nummer{width:37px;height:37px;font-size:12px;}
  .werk-week{padding:1.75rem 1.4rem 1.5rem;}
  .werk-tijdlijn li{flex-direction:column;gap:.2rem;}
  .werk-dag{width:auto;}
}

/* ── Over WebSix ───────────────────────────────────────────────────────────
   De foto naast de tekst, daaronder dezelfde blokken als op de andere
   subpagina's. De cijfers gebruiken de bestaande .stats-row. */
.over-pagina{position:relative;padding:8rem 0 7rem;overflow:hidden;}
.over-pagina > .outer{position:relative;z-index:1;}

.over-strip{display:grid;grid-template-columns:280px 1fr;gap:3rem;align-items:center;
  max-width:880px;margin:0 auto 4.5rem;}
.over-foto img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:16px;display:block;}
.over-tekst h2{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:#fff;
  letter-spacing:-.02em;margin:0 0 1rem;}
.over-tekst p{font-size:14.5px;color:var(--muted);line-height:1.8;margin:0 0 1rem;}
.over-tekst p:last-child{margin-bottom:0;}
.over-kvk{font-size:12px;opacity:.55;}

.over-blokken{max-width:720px;margin:0 auto;}
.over-blokken .prijs-vraag{max-width:none;}

.over-cijfers{max-width:640px;margin:4rem auto 0;padding-top:3rem;
  border-top:1px solid var(--border);}

@media(max-width:820px){
  .over-strip{grid-template-columns:1fr;gap:2rem;text-align:center;max-width:520px;}
  .over-foto{max-width:240px;margin:0 auto;}
  .over-tekst p{text-align:left;}
}
@media(max-width:640px){
  .over-pagina{padding:6rem 0 5rem;}
  .over-tekst h2{font-size:20px;}
}

/* ── Van de voorpagina naar de subpagina's ────────────────────────────────
   Elk blok op de voorpagina vat iets samen; deze knop brengt je naar de
   pagina waar het volledige verhaal staat. */
.home-naar{margin-top:2rem;}
.home-naarlink{font-size:13px;color:var(--muted);text-decoration:none;
  border-bottom:1px solid rgba(124,58,237,.3);padding-bottom:2px;
  transition:color .2s,border-color .2s;}
.home-naarlink:hover{color:#fff;border-color:var(--accent);}
@media(max-width:820px){
  .home-naar{margin-top:1.5rem;}
}

/* ── Kruimelpad op subpagina's ─────────────────────────────────────────────
   Staat in de lege ruimte boven de kop, onder het menu. */
main{position:relative;}
.kruimels{position:absolute;top:calc(var(--nav-h) + 1.5rem);left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:.6rem;font-size:12.5px;color:var(--muted);
  letter-spacing:.02em;}
.kruimels a{color:var(--muted);text-decoration:none;transition:color .2s;}
.kruimels a:hover{color:#fff;}
.kruimels [aria-current]{color:#fff;}
@media(max-width:640px){
  .kruimels{top:calc(var(--nav-h) + .75rem);font-size:12px;}
}

/* ── Branchepagina's ──────────────────────────────────────────────────────
   Leunen op de prijzenpagina. Nieuw: de drie kaarten met wat klanten zoeken,
   het blok met wat er op de site komt, en het prijsblok. */
.br-kop{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:#fff;
  letter-spacing:-.02em;text-align:center;margin:0 0 1.5rem;}
.br-zoeken{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:960px;
  margin:0 auto 4rem;}
.br-kaart{border:1px solid var(--border);border-radius:16px;padding:1.6rem 1.7rem;
  transition:border-color .25s,transform .25s;}
.br-kaart:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px);}
.br-kaart h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 .6rem;}
.br-kaart p{font-size:14px;color:var(--muted);line-height:1.75;margin:0;}

.br-erop{max-width:880px;margin:0 auto 4rem;border:1px solid rgba(124,58,237,.25);
  border-radius:16px;padding:2rem 2.25rem;background:rgba(124,58,237,.04);}
.br-erop h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 1.25rem;text-align:center;}

.br-voorbeeld{text-align:left;}
.br-prijs{max-width:640px;margin:3rem auto 0;text-align:center;}
.br-prijs h2{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 .6rem;}
.br-prijs p{font-size:14.5px;color:var(--muted);line-height:1.75;margin:0 0 1.5rem;}

/* De branches onderaan elke pagina. */
.footer-branches{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;
  padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid var(--border);
  font-size:12.5px;}
.footer-branches span{color:var(--muted);opacity:.7;text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;margin-right:.4rem;}
.footer-branches a{color:var(--muted);text-decoration:none;transition:color .2s;}
.footer-branches a:hover{color:#fff;}

@media(max-width:820px){
  .br-zoeken{grid-template-columns:1fr;max-width:560px;}
}
@media(max-width:640px){
  .br-erop{padding:1.5rem 1.25rem;}
}

/* ── Kennisbank ───────────────────────────────────────────────────────────
   Het overzicht is een lijst kaartjes; een artikel is een leeskolom van
   680px, want langere regels leest niemand op een scherm. */
.kb-lijst{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
.kb-kaartje{display:block;text-decoration:none;border:1px solid var(--border);border-radius:16px;
  padding:1.6rem 1.8rem;transition:border-color .25s,transform .25s;}
.kb-kaartje:hover{border-color:rgba(124,58,237,.3);transform:translateY(-2px);}
.kb-kaartje h2{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 .5rem;}
.kb-kaartje p{font-size:14px;color:var(--muted);line-height:1.7;margin:0 0 .75rem;}
.kb-lees{font-size:12px;color:var(--accent);letter-spacing:.04em;}

.kb-kop{max-width:720px;}
.kb-kop .sec-heading{font-size:clamp(28px,4vw,40px);line-height:1.15;}
.kb-meta{font-size:12.5px;color:var(--muted);letter-spacing:.02em;margin:-.5rem 0 1.5rem;}
.kb-meta time{color:var(--text);}

.kb-inhoud{max-width:680px;margin:0 auto;}
.kb-inhoud h2{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:2.5rem 0 .9rem;}
.kb-inhoud h2:first-child{margin-top:0;}
.kb-inhoud p{font-size:15.5px;color:#c9c9d6;line-height:1.85;margin:0 0 1.1rem;}
.kb-inhoud strong{color:#fff;font-weight:600;}
.kb-inhoud a,.kb-slot a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(124,58,237,.5);
  transition:border-color .2s;}
.kb-inhoud a:hover,.kb-slot a:hover{border-color:var(--accent2);}
.kb-slot{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);
  color:var(--muted) !important;font-size:14.5px !important;}

.kb-kaart{max-width:680px;margin:3.5rem auto 0;text-align:center;border:1px solid rgba(124,58,237,.25);
  border-radius:16px;padding:2rem 2.25rem;background:rgba(124,58,237,.04);}
.kb-kaart h2{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 .6rem;}
.kb-kaart p{font-size:14.5px;color:var(--muted);line-height:1.75;margin:0 0 1.5rem;}

.kb-meer{max-width:680px;margin:3.5rem auto 0;padding-top:2.5rem;border-top:1px solid var(--border);}
.kb-meer h2{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin:0 0 1rem;}
.kb-meer ul{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.kb-meer li a{font-size:14.5px;color:var(--muted);text-decoration:none;transition:color .2s;}
.kb-meer li a:hover{color:#fff;}
.kb-alles{font-size:13px;color:var(--accent);text-decoration:none;}

@media(max-width:640px){
  .kb-kaartje{padding:1.3rem 1.25rem;}
  .kb-kaart{padding:1.6rem 1.25rem;}
  .kb-inhoud p{font-size:15px;}
}

/* ── Mobiel: subpagina's beginnen te dicht onder het menu ───────────────
   Op 6rem stond het kruimelpad tegen het label van de kop aan. Deze regels
   staan onderaan het bestand en winnen daardoor van de eerdere 6rem. */
@media(max-width:640px){
  .prijs-pagina,.contact-pagina,.werk-pagina,.over-pagina{padding-top:8.5rem;}
  .kruimels{top:calc(var(--nav-h) + 1.1rem);}
}

/* Een lange laatste kruimel (artikeltitel) wordt afgekapt met … in plaats
   van uit beeld te lopen. De links ervoor blijven altijd volledig zichtbaar. */
.kruimels [aria-current]{min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kruimels a,.kruimels [aria-hidden]{flex-shrink:0;}

/* Met zeven menulinks past de balk vanaf ongeveer 1040px niet meer naast de
   taalknop en de contactknop. Op tablets dus ook de hamburger; de rest van
   de tabletopmaak blijft zoals hij is. */
@media(max-width:1080px){
  .nav-links,.nav-cta{display:none;}
  .burger{display:flex;}
  .nav-inner{grid-template-columns:1fr auto;}
}