/* =====================================================================
   GeneralExperts-IT - basisstijl
   Gedeeld door index.html en contact.html. Eerder stond dit inline in
   index.html; als losse stylesheet kan de contactpagina er niet meer
   van afwijken en cachet de browser hem over paginas heen.
   ===================================================================== */
:root{
  --bg:#050505;
  --bg-soft:#0a0d0b;
  --navy:#0d1b24;
  --card:rgba(255,255,255,.04);
  --card-border:rgba(52,211,153,.14);
  --txt:#f2f4f0;
  --txt-soft:#a3ada5;
  --green:#22c98b;
  --green-bright:#4ade9d;
  --orange:#ff8a3d;
  --orange-deep:#f2691d;
  --glow-green:rgba(34,201,139,.32);
  --glow-orange:rgba(255,138,61,.32);
  --radius:20px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip i.p.v. hidden — hidden maakt van html/body een
   clipping-container en dat breekt position:sticky (de videoheader);
   clip kapt horizontale overflow net zo goed af, zónder dat effect */
html{scroll-padding-top:84px;overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green);color:#04140d}
img{max-width:100%;display:block}
a{color:var(--green-bright)}
h1,h2,h3,h4{line-height:1.2;font-weight:800;letter-spacing:-.02em}
.container{max-width:1160px;margin:0 auto;padding:0 22px}
/* Verticaal ritme schaalt mee met het scherm: een vaste 112px is op een
   telefoon onevenredig veel lege ruimte en op een breed scherm te weinig. */
section{position:relative;padding:clamp(72px,7.4vw,116px) 0}

/* ===== leesbreedte =====
   Lopende tekst boven ~75 tekens per regel leest slecht en oogt amateuristisch.
   Kaarten en kolommen zijn vanzelf al smaller, dus deze bovengrens raakt
   alleen de brede tekstblokken die anders over de volle 1160px uitlopen. */
section p,section li{max-width:70ch}
/* gecentreerde blokken blijven gecentreerd ondanks de maximumbreedte
   (de breedte van .sec-head p staat verderop, bij de sectiekoppen zelf) */
.sec-head .sub{margin-left:auto;margin-right:auto}

/* ===== sectieritme =====
   Een haarlijn op de container-breedte markeert waar een hoofdstuk begint.
   Dat verdeelt de pagina in delen in plaats van een eindeloze donkere rol.
   Getekend als achtergrond en niet als ::before, want die pseudo-elementen
   zijn hier al in gebruik voor de sfeergloed per sectie. */
.sec-lijn{
  background-image:linear-gradient(90deg,transparent,rgba(52,211,153,.20) 20%,rgba(52,211,153,.20) 80%,transparent);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:min(1160px,calc(100% - 44px)) 1px;
}

/* ===== noise-texture voor diepte ===== */
.noise{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ===== per-sectie sfeer: glow-orbs en diagonale vlakken ===== */
#home::before,#diensten::before,#buddy::before,#projecten::before,
#over::before,#werkwijze::before,#faq::before,#contact::before{
  content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;
}
#home::before{width:640px;height:640px;top:-220px;left:-260px;background:radial-gradient(circle,rgba(34,201,139,.09),transparent 65%)}
/* kleurbrug: de eerste sectie ná de film begint in exact de videotint
   (#040404) en lost zacht op naar de normale pagina-achtergrond.
   Hoort dus bij de sectie die direct op het verhaal volgt — sinds de
   herschikking is dat Welkom en niet meer de Werkplaats. */
#home::after{
  content:"";position:absolute;top:0;left:0;right:0;height:300px;
  z-index:-1;pointer-events:none;border-radius:0;
  background:linear-gradient(180deg,#040404,rgba(4,4,4,0));
}
#diensten::before{width:700px;height:700px;top:8%;right:-300px;background:radial-gradient(circle,rgba(22,48,70,.55),transparent 68%)}
#buddy::before{width:780px;height:780px;top:-60px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(34,201,139,.08),transparent 65%)}
#projecten::before{width:600px;height:600px;bottom:-200px;left:-240px;background:radial-gradient(circle,rgba(255,138,61,.07),transparent 65%)}
#over::before{width:680px;height:680px;top:-160px;right:-260px;background:radial-gradient(circle,rgba(22,48,70,.6),transparent 68%)}
#werkwijze::before{width:560px;height:560px;top:20%;left:-220px;background:radial-gradient(circle,rgba(34,201,139,.07),transparent 65%)}
#faq::before{width:640px;height:640px;bottom:-220px;right:-260px;background:radial-gradient(circle,rgba(255,138,61,.06),transparent 65%)}
#contact::before{width:820px;height:820px;top:-120px;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(34,201,139,.09),transparent 62%)}
/* diagonale panelen achter diensten en werkwijze */
#diensten::after,#werkwijze::after{
  content:"";position:absolute;left:-8%;right:-8%;top:48px;bottom:48px;z-index:-2;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 72%);
  transform:skewY(-2.2deg);
  border-top:1px solid rgba(34,201,139,.13);
  border-bottom:1px solid rgba(255,255,255,.045);
}
#werkwijze::after{transform:skewY(2.2deg);border-top-color:rgba(255,138,61,.12)}
/* subtiele logo-watermarks */
.sec-watermark{
  position:absolute;width:min(440px,55vw);opacity:.035;z-index:-1;
  pointer-events:none;user-select:none;
}
#buddy .sec-watermark{top:4%;right:-5%;transform:rotate(8deg)}
#over .sec-watermark{bottom:-6%;left:-4%;transform:rotate(-7deg)}
@media(max-width:720px){.sec-watermark{display:none}}

/* ===== achtergrond ===== */
#netCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.5}
.bg-gradient{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(1000px 650px at 88% -12%, rgba(34,201,139,.10), transparent 60%),
    radial-gradient(850px 600px at -12% 32%, rgba(13,27,36,.85), transparent 65%),
    radial-gradient(750px 520px at 62% 112%, rgba(242,105,29,.07), transparent 60%),
    var(--bg);
}

/* ===== nav ===== */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:box-shadow .3s;
}
/* de blur zit op een pseudo-element: backdrop-filter op de header zélf
   maakt er een containing block van, waardoor het mobiele menu
   (position:fixed-kind) binnen de header gevangen raakt en transparant
   over de pagina valt */
header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(5,7,6,.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(52,211,153,.1);
  opacity:0;transition:opacity .3s;
}
header.scrolled::before{opacity:1}
header.scrolled{box-shadow:0 6px 30px rgba(0,0,0,.45)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .4s cubic-bezier(.22,1,.36,1)}
header.scrolled .nav{height:60px}
/* voortgangsbalk bovenaan */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:130;pointer-events:none;
  background:linear-gradient(90deg,var(--green-bright),var(--green) 55%,var(--orange));
  transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(34,201,139,.4);
}
.logo{
  display:flex;align-items:center;gap:11px;flex:none;white-space:nowrap;
  font-weight:900;font-size:1.1rem;text-decoration:none;color:var(--txt);
  letter-spacing:-.01em;
}
.logo img{
  width:46px;height:46px;object-fit:contain;
  filter:drop-shadow(0 3px 10px var(--glow-green));
  transition:transform .3s;
}
.logo:hover img{transform:rotate(-6deg) scale(1.06)}
.logo span b{color:var(--green-bright)}
@media(max-width:900px){.logo img{width:40px;height:40px}.logo{font-size:1rem}}
nav.menu{display:flex;gap:2px;align-items:center}
nav.menu a{
  color:var(--txt-soft);text-decoration:none;font-weight:600;font-size:.92rem;
  padding:9px 12px;border-radius:10px;transition:color .2s,background .2s;
  /* zonder dit brak een label als "Buddy Pakket" op een krap scherm over
     twee of drie regels en werd de balk twee keer zo hoog */
  white-space:nowrap;
}
/* Tien items passen alleen in de compacte maat: de container loopt niet
   verder dan 1160px, en op volle maat duwde de balk het logo over twee
   regels. Geldt vanaf de hamburgerdrempel, dus op elk bureaubladscherm. */
@media(min-width:1100px){
  nav.menu{gap:0}
  nav.menu a{font-size:.85rem;padding:8px 9px}
  nav.menu a.cta{margin-left:6px}
}
nav.menu a:hover{color:var(--green-bright);background:rgba(34,201,139,.08)}
nav.menu a.cta{
  color:#1d0e02;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 4px 16px var(--glow-orange);margin-left:8px;font-weight:800;
}
nav.menu a.cta:hover{filter:brightness(1.1);color:#1d0e02}
.hamburger{
  display:none;background:none;border:0;cursor:pointer;padding:10px;
  flex-direction:column;gap:5px;z-index:110;
}
.hamburger span{display:block;width:26px;height:3px;border-radius:3px;background:var(--txt);transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* Het uitklapmenu begint bij 1099px en niet meer bij 900px: met tien items
   paste de horizontale balk daaronder simpelweg niet. */
@media(max-width:1099px){
  .hamburger{display:flex}
  nav.menu{
    position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(320px,85vw);
    flex-direction:column;align-items:stretch;gap:6px;
    background:rgba(6,9,7,.97);backdrop-filter:blur(18px);
    padding:90px 26px calc(30px + env(safe-area-inset-bottom,0px));transform:translateX(100%);
    /* tien items passen niet meer op elk telefoonscherm; laat de lade
       scrollen in plaats van de onderste links af te snijden */
    overflow-y:auto;overscroll-behavior:contain;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-10px 0 40px rgba(0,0,0,.6);
    border-left:1px solid rgba(52,211,153,.12);
  }
  nav.menu.open{transform:translateX(0)}
  nav.menu a{font-size:1.05rem;padding:14px 16px}
  nav.menu a.cta{margin-left:0;text-align:center;margin-top:10px}
}

/* ===== knoppen ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 30px;border-radius:14px;font-weight:800;font-size:1rem;
  text-decoration:none;cursor:pointer;border:0;transition:transform .2s,box-shadow .25s,filter .2s;
  font-family:var(--font);position:relative;overflow:hidden;
}
.btn:active{transform:scale(.97)}
/* glans-sweep micro-animatie op gevulde knoppen */
.btn-primary::after,.btn-green::after{
  content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
}
.btn-primary:hover::after,.btn-green:hover::after{left:135%}
/* primair: groene gradient, oranje hover-glow */
.btn-primary{
  color:#04140d;background:linear-gradient(135deg,var(--green-bright),var(--green) 72%);
  box-shadow:0 6px 24px var(--glow-green),inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 10px 38px var(--glow-green),0 0 30px var(--glow-orange),0 0 0 2px rgba(255,138,61,.3);
}
/* secundair: transparant met dunne groene border */
.btn-ghost{
  color:var(--txt);background:transparent;
  border:1px solid rgba(34,201,139,.4);
}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(34,201,139,.12);box-shadow:0 8px 26px var(--glow-green)}
/* accent: oranje gradient voor Buddy-CTA's */
.btn-green{
  color:#1d0e02;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 6px 24px var(--glow-orange),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 10px 36px var(--glow-orange),0 0 0 2px rgba(255,138,61,.28);filter:brightness(1.06)}

/* ===== hero ===== */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:130px 0 80px;overflow:hidden;position:relative;
  background:
    radial-gradient(1100px 700px at 78% 30%, rgba(34,201,139,.08), transparent 62%),
    radial-gradient(800px 560px at 15% 75%, rgba(242,105,29,.05), transparent 60%),
    radial-gradient(900px 640px at 50% -20%, rgba(13,27,36,.9), transparent 70%);
}
.hero-watermark{
  position:absolute;right:-6%;bottom:-8%;width:min(560px,70vw);opacity:.04;
  pointer-events:none;user-select:none;
}
@media(max-width:920px){.hero-watermark{display:none}}
/* bewegende lichtbanen */
.hero-beams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-beams span{
  position:absolute;left:-25%;width:150%;height:260px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(34,201,139,.12),transparent 72%);
  animation:beamA 16s ease-in-out infinite alternate;
  top:14%;will-change:transform;
}
.hero-beams span:nth-child(2){
  top:58%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,138,61,.09),transparent 72%);
  animation:beamB 20s ease-in-out infinite alternate;
}
@keyframes beamA{from{transform:rotate(-16deg) translateX(-6%)}to{transform:rotate(-16deg) translateX(6%)}}
@keyframes beamB{from{transform:rotate(12deg) translateX(6%)}to{transform:rotate(12deg) translateX(-6%)}}
@media(max-width:920px){.hero-beams{display:none}}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;width:100%;
}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .hero{padding:104px 0 56px;min-height:auto}
}
.hero-visual{position:relative;display:grid;place-items:center;min-height:460px}
@media(max-width:920px){.hero-visual{order:-1;min-height:250px}}
/* AI-circuitlijnen achter het logo */
.ai-lines{
  position:absolute;width:130%;max-width:640px;height:auto;z-index:0;opacity:.6;
  pointer-events:none;
}
.ai-lines path{
  fill:none;stroke:rgba(34,201,139,.4);stroke-width:1.5;
  stroke-dasharray:5 9;animation:aiDash 10s linear infinite;
}
.ai-lines path.o{stroke:rgba(255,138,61,.38);animation-duration:14s;animation-direction:reverse}
.ai-lines circle{fill:rgba(74,222,157,.55)}
.ai-lines circle.o{fill:rgba(255,138,61,.55)}
@keyframes aiDash{to{stroke-dashoffset:-140}}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
/* radial glow in groen en oranje */
.hero-glow{
  position:absolute;width:480px;height:480px;border-radius:50%;z-index:0;
  background:
    radial-gradient(circle at 42% 40%,rgba(34,201,139,.26),transparent 58%),
    radial-gradient(circle at 62% 66%,rgba(255,138,61,.14),transparent 55%);
  animation:glowPulse 6s ease-in-out infinite;
}
@media(max-width:920px){.hero-glow{width:280px;height:280px}}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
/* draaiende ringen */
.hero-ring{
  position:absolute;border-radius:50%;border:1px dashed rgba(34,201,139,.28);z-index:1;
  animation:ringSpin 44s linear infinite;
}
.hero-ring.r1{width:440px;height:440px}
.hero-ring.r2{width:530px;height:530px;border-color:rgba(255,138,61,.18);animation-direction:reverse;animation-duration:60s}
@media(max-width:920px){.hero-ring.r1{width:250px;height:250px}.hero-ring.r2{width:305px;height:305px}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.hero-ring .orb{
  position:absolute;width:10px;height:10px;border-radius:50%;top:-5px;left:50%;
  background:var(--green-bright);box-shadow:0 0 14px var(--glow-green);
}
.hero-ring.r2 .orb{background:var(--orange);box-shadow:0 0 14px var(--glow-orange)}
/* glassmorphism-orb met het logo */
.hero-orb{
  position:relative;z-index:2;width:min(350px,62vw);aspect-ratio:1;
  display:grid;place-items:center;border-radius:20%;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 60%);
  border:1px solid rgba(34,201,139,.38);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 34px 90px rgba(0,0,0,.6),
    0 0 70px rgba(34,201,139,.16),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 48px rgba(34,201,139,.05);
  animation:heroFloat 6.5s ease-in-out infinite;
}
@media(max-width:920px){.hero-orb{width:min(215px,52vw)}}
.hero-orb .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hero-orb .shine::before{
  content:"";position:absolute;top:-60%;left:-70%;width:70%;height:220%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.09),transparent);
  transform:rotate(18deg);animation:orbShine 7s ease-in-out infinite;
}
@keyframes orbShine{0%,55%,100%{left:-70%}25%{left:120%}}
.hero-logo{
  width:76%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.5)) drop-shadow(0 0 26px var(--glow-green));
}
/* oranje accentlijnen op de orb */
.hero-orb .corner{
  position:absolute;width:38px;height:38px;border:3px solid var(--orange);z-index:3;
  animation:cornerPulse 3.5s ease-in-out infinite;
}
.hero-orb .corner.c1{top:-12px;left:-12px;border-right:0;border-bottom:0;border-radius:16px 0 0 0}
.hero-orb .corner.c2{bottom:-12px;right:-12px;border-left:0;border-top:0;border-radius:0 0 16px 0;animation-delay:1.7s}
@keyframes cornerPulse{0%,100%{opacity:.55}50%{opacity:1;filter:drop-shadow(0 0 10px var(--glow-orange))}}
.hero-orb .tick{
  position:absolute;z-index:3;border-radius:2px;
  background:var(--orange);box-shadow:0 0 10px var(--glow-orange);
}
.hero-orb .tick.t1{width:34px;height:3px;right:-46px;top:32%}
.hero-orb .tick.t2{width:3px;height:34px;left:-14px;bottom:26%;background:var(--green-bright);box-shadow:0 0 10px var(--glow-green)}
/* scroll-indicator */
.scroll-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--txt-soft);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  opacity:.65;z-index:3;
}
.scroll-hint span{width:22px;height:34px;border:2px solid rgba(34,201,139,.45);border-radius:100px;position:relative}
.scroll-hint span::before{
  content:"";position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;
  border-radius:4px;background:var(--green-bright);
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}}
@media(max-width:920px){.scroll-hint{display:none}}

/* slider */
.slider{position:relative}
.slide{display:none}
.slide.active{display:block}
.slide .el{opacity:0;transform:translateY(22px);animation:fadeUp .7s cubic-bezier(.22,1,.36,1) forwards}
.slide .el.e2{animation-delay:.12s}
.slide .el.e3{animation-delay:.24s}
.slide .el.e4{animation-delay:.36s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:100px;font-size:.85rem;font-weight:700;
  background:rgba(34,201,139,.09);border:1px solid rgba(34,201,139,.3);color:var(--green-bright);
  margin-bottom:24px;
}
.slide h1{font-size:clamp(2.1rem,5.5vw,3.7rem);margin-bottom:12px}
.slide h1 .grad{
  background:linear-gradient(90deg,var(--green-bright),var(--green) 55%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.slide .sub{font-size:clamp(1.1rem,2.6vw,1.45rem);font-weight:800;color:var(--orange);margin-bottom:16px}
.slide p.lead{
  font-size:clamp(1rem,2.2vw,1.14rem);color:var(--txt-soft);
  max-width:560px;margin:0 0 30px;
}
@media(max-width:920px){.slide p.lead{margin:0 auto 30px}}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:920px){.hero-ctas{justify-content:center}}
@media(max-width:520px){.hero-ctas{flex-direction:column}.hero-ctas .btn{width:100%}}
.dots{display:flex;gap:10px;margin-top:38px}
@media(max-width:920px){.dots{justify-content:center}}
.dots button{
  width:34px;height:6px;border-radius:6px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);transition:.3s;padding:0;
}
.dots button.active{background:linear-gradient(90deg,var(--green-bright),var(--orange));width:52px}
.trust{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
@media(max-width:920px){.trust{justify-content:center}}
.trust span{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;font-size:.83rem;font-weight:600;
  background:var(--card);border:1px solid var(--card-border);color:var(--txt-soft);
  opacity:0;transform:translateY(12px);
}
.trust.animate span{animation:fadeUp .5s cubic-bezier(.22,1,.36,1) forwards}
.trust.animate span:nth-child(1){animation-delay:.5s}
.trust.animate span:nth-child(2){animation-delay:.65s}
.trust.animate span:nth-child(3){animation-delay:.8s}
.trust.animate span:nth-child(4){animation-delay:.95s}
.trust.animate span:nth-child(5){animation-delay:1.1s}
.trust span i{font-style:normal}

/* ===== sectiekoppen ===== */
.sec-head{text-align:center;max-width:880px;margin:0 auto 54px}
.sec-tag{
  display:inline-flex;align-items:center;gap:9px;padding:7px 18px;border-radius:100px;
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(34,201,139,.09);border:1px solid rgba(34,201,139,.3);color:var(--green-bright);
  margin-bottom:18px;box-shadow:0 0 22px rgba(34,201,139,.1);
}
.sec-tag::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--orange);box-shadow:0 0 9px var(--glow-orange);
}
.sec-head h2{
  font-size:clamp(1.55rem,4.6vw,2.6rem);margin-bottom:14px;
  /* nette regelverdeling: nooit afgesneden, gebalanceerd over regels */
  text-wrap:balance;overflow-wrap:break-word;
}
.sec-head p{max-width:min(66ch,660px);margin-left:auto;margin-right:auto}
.sec-head .sub{color:var(--orange);font-weight:700;font-size:1.06rem;margin-bottom:10px}
.sec-head p{color:var(--txt-soft)}
.welkom-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px}
@media(max-width:520px){.welkom-ctas{flex-direction:column}.welkom-ctas .btn{width:100%}}
/* ===== reveal — luxe fade + blur ===== */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .95s ease,transform .95s cubic-bezier(.16,1,.3,1),filter .95s ease}
.reveal.visible{opacity:1;transform:none}
/* scale-in variant voor prijskaarten */
.reveal-scale{opacity:0;transform:scale(.93) translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1),filter 1s ease}
.reveal-scale.visible{opacity:1;transform:none}
/* blur-out alleen op desktop — mobiel blijft licht */
@media(min-width:721px){
  .reveal,.reveal-scale{filter:blur(9px)}
  .reveal.visible,.reveal-scale.visible{filter:blur(0)}
}
.reveal.d1,.reveal-scale.d1{transition-delay:.1s}
.reveal.d2,.reveal-scale.d2{transition-delay:.2s}
.reveal.d3,.reveal-scale.d3{transition-delay:.3s}

/* ===== cards ===== */
/* Kaarten in dezelfde rij rekken vanzelf mee tot gelijke hoogte; dat is het
   standaardgedrag van grid. Een expliciete grid-auto-rows:1fr leek netter,
   maar perst de rij samen tot onder de inhoud zodra de kolom smal wordt —
   op mobiel liep de tekst daardoor uit de kaart. Niet doen dus. */
.grid{display:grid;gap:22px}
.grid>*{min-width:0}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}}
@media(max-width:600px){.grid-4{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}}
.card{
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 62%);
  border:1px solid rgba(34,201,139,.18);
  border-radius:var(--radius);padding:32px 28px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card:hover{
  transform:translateY(-6px);border-color:rgba(255,138,61,.5);
  box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 34px rgba(255,138,61,.09),inset 0 1px 0 rgba(255,255,255,.1);
}
.card .icon{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-size:1.55rem;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(34,201,139,.2),rgba(255,138,61,.14));
  border:1px solid rgba(34,201,139,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .3s,box-shadow .3s;
}
.card:hover .icon{box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 18px rgba(34,201,139,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.card:hover .icon{transform:scale(1.08) rotate(-4deg)}
.card h3{font-size:1.18rem;margin-bottom:10px}
.card p{color:var(--txt-soft);font-size:.95rem}

/* ===== service cards ===== */
.service{display:flex;flex-direction:column;padding:34px 28px;position:relative;overflow:hidden}
.service::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green-bright),var(--green),var(--orange));
  opacity:0;transition:opacity .3s;
}
.service:hover::before{opacity:1}
.service .icon{width:62px;height:62px;font-size:1.75rem;border-radius:18px}
.service h3{font-size:1.35rem}
.service ul{list-style:none;margin:16px 0 20px;flex-grow:1}
.service ul li{color:var(--txt-soft);font-size:.93rem;padding:6px 0 6px 28px;position:relative}
.service ul li::before{
  content:"✓";position:absolute;left:0;top:6px;
  width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:.75rem;font-weight:900;color:var(--green-bright);
  background:rgba(34,201,139,.12);
}
.service .note{
  background:rgba(255,138,61,.06);border:1px solid rgba(255,138,61,.25);
  border-radius:12px;padding:12px 15px;font-size:.85rem;color:var(--txt-soft);
  margin-bottom:20px;
}
.service .note b{color:var(--orange)}
.service .btn{width:100%;opacity:.92;transition:opacity .3s,transform .2s,box-shadow .25s,filter .2s}
/* CTA en achtergrond worden duidelijker wanneer de kaart hovert */
.service:hover .btn{opacity:1}
.service:hover{background:linear-gradient(155deg,rgba(34,201,139,.09),rgba(255,138,61,.035) 65%)}
.service:hover .icon{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 6px 24px rgba(0,0,0,.4),0 0 24px rgba(34,201,139,.35),inset 0 1px 0 rgba(255,255,255,.15);
}

/* ===== pricing ===== */
.pricing{align-items:stretch;max-width:880px;margin:0 auto}
.price-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 60%);
  border:1px solid rgba(34,201,139,.2);
  border-radius:24px;padding:38px 32px;
  backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s,box-shadow .3s,border-color .3s;
}
.price-card:hover{transform:translateY(-6px);border-color:rgba(255,138,61,.45);box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 30px rgba(255,138,61,.08),inset 0 1px 0 rgba(255,255,255,.08)}
.price-card.pro{
  border-color:rgba(34,201,139,.5);
  background:linear-gradient(160deg,rgba(34,201,139,.1),rgba(255,138,61,.05) 60%,var(--card));
  box-shadow:0 0 0 1px rgba(34,201,139,.22),0 20px 50px rgba(0,0,0,.4);
}
.price-card.pro:hover{box-shadow:0 0 0 1px rgba(34,201,139,.4),0 26px 60px rgba(0,0,0,.45)}
.badge-pop{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  padding:6px 18px;border-radius:100px;font-size:.78rem;font-weight:900;
  color:#1d0e02;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 4px 16px var(--glow-orange);white-space:nowrap;
  animation:badgeFloat 3.4s ease-in-out infinite;
}
@keyframes badgeFloat{
  0%,100%{transform:translateX(-50%) translateY(0);box-shadow:0 4px 16px var(--glow-orange)}
  50%{transform:translateX(-50%) translateY(-4px);box-shadow:0 8px 24px rgba(255,138,61,.45)}
}
.price-card .label{font-size:.85rem;font-weight:700;color:var(--txt-soft);margin-bottom:6px}
.price-card h3{font-size:1.45rem;margin-bottom:14px}
.price-card .price{
  font-size:2.8rem;font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--txt) 40%,var(--green-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.price-card.pro .price{background:linear-gradient(120deg,var(--txt) 35%,var(--green-bright) 75%,var(--orange));-webkit-background-clip:text;background-clip:text}
.price-card .price small{font-size:.9rem;font-weight:600;-webkit-text-fill-color:var(--txt-soft);color:var(--txt-soft)}
.price-card .desc{color:var(--txt-soft);font-size:.94rem;margin:14px 0 20px}
.price-card ul{list-style:none;margin-bottom:26px;flex-grow:1}
.price-card ul li{color:var(--txt-soft);font-size:.94rem;padding:7px 0 7px 30px;position:relative}
.price-card ul li::before{
  content:"✓";position:absolute;left:0;top:7px;width:21px;height:21px;border-radius:7px;
  display:grid;place-items:center;font-size:.75rem;font-weight:900;
  color:var(--green-bright);background:rgba(34,201,139,.13);
}
.disclaimer{
  max-width:760px;margin:34px auto 0;text-align:center;
  padding:16px 22px;border-radius:14px;font-size:.9rem;color:var(--txt-soft);
  background:rgba(255,255,255,.03);border:1px dashed var(--card-border);
}

/* ===== buddy-module ===== */
.buddy-nav{
  position:sticky;top:84px;z-index:60;
  display:flex;gap:4px;overflow-x:auto;
  padding:7px;margin:0 auto 46px;width:fit-content;max-width:100%;
  background:rgba(6,9,7,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(34,201,139,.22);border-radius:100px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  scrollbar-width:none;
}
.buddy-nav::-webkit-scrollbar{display:none}
.buddy-nav a{
  color:var(--txt-soft);text-decoration:none;font-size:.84rem;font-weight:700;
  padding:8px 15px;border-radius:100px;white-space:nowrap;
  transition:color .2s,background .2s;
}
.buddy-nav a:hover{color:var(--green-bright);background:rgba(34,201,139,.1)}
@media(max-width:720px){.buddy-nav{top:76px;margin-bottom:36px}}
.sub-head{text-align:center;max-width:680px;margin:76px auto 36px}
.sub-head h3{font-size:clamp(1.3rem,3.2vw,1.8rem);margin-bottom:8px;text-wrap:balance;overflow-wrap:break-word}
.sub-head p{color:var(--txt-soft);font-size:.96rem}
.buddy-intro{
  max-width:820px;margin:0 auto;padding:42px 38px;border-radius:24px;text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%);
  border:1px solid rgba(34,201,139,.3);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 46px rgba(34,201,139,.07),inset 0 1px 0 rgba(255,255,255,.09);
}
@media(max-width:600px){.buddy-intro{padding:32px 22px}}
.bi-icons{display:flex;gap:12px;justify-content:center;margin-bottom:22px}
.bi-icons span{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;
  background:linear-gradient(135deg,rgba(34,201,139,.18),rgba(255,138,61,.12));
  border:1px solid rgba(34,201,139,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.buddy-intro p{color:var(--txt-soft);margin-bottom:16px;font-size:1rem}
.buddy-intro .btn{margin-top:8px}
.scope-card{
  display:flex;gap:20px;align-items:flex-start;max-width:860px;margin:76px auto 0;
  background:linear-gradient(155deg,rgba(255,138,61,.09),rgba(255,255,255,.012) 60%);
  border:1px solid rgba(255,138,61,.4);border-radius:20px;padding:28px 30px;
  box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 30px rgba(255,138,61,.07),inset 0 1px 0 rgba(255,255,255,.08);
}
.scope-card .scope-icon{
  width:54px;height:54px;flex-shrink:0;border-radius:15px;display:grid;place-items:center;
  font-size:1.5rem;background:rgba(255,138,61,.14);border:1px solid rgba(255,138,61,.4);
}
.scope-card h3{margin-bottom:8px;color:var(--orange);font-size:1.2rem}
.scope-card p{color:var(--txt-soft);font-size:.95rem}
@media(max-width:600px){.scope-card{flex-direction:column;padding:24px 20px}}
/* keuzehulp */
.keuzehulp{
  max-width:860px;margin:76px auto 0;padding:38px 34px;border-radius:24px;text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%);
  border:1px solid rgba(34,201,139,.24);
  box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
@media(max-width:600px){.keuzehulp{padding:30px 20px}}
.keuzehulp h3{font-size:clamp(1.3rem,3vw,1.6rem);margin-bottom:6px}
.kh-intro{color:var(--txt-soft);margin-bottom:28px;font-size:.95rem}
.kh-vraag{margin-bottom:24px;text-align:left}
.kh-label{font-weight:700;margin-bottom:11px;font-size:.95rem}
.kh-opties{display:flex;gap:10px;flex-wrap:wrap}
.kh-opties button{
  padding:11px 17px;border-radius:100px;cursor:pointer;font-family:var(--font);
  font-size:.88rem;font-weight:600;color:var(--txt-soft);
  background:rgba(255,255,255,.04);border:1px solid rgba(34,201,139,.22);
  transition:border-color .2s,background .2s,color .2s,transform .15s;
}
.kh-opties button:hover{border-color:rgba(34,201,139,.55);color:var(--txt);transform:translateY(-1px)}
.kh-opties button.active{background:rgba(34,201,139,.16);border-color:var(--green);color:var(--green-bright)}
@media(max-width:600px){.kh-opties{flex-direction:column}.kh-opties button{width:100%}}
.kh-resultaat{
  margin-top:28px;padding:24px;border-radius:16px;
  background:rgba(34,201,139,.08);border:1px solid rgba(34,201,139,.4);
  animation:formIn .5s cubic-bezier(.22,1,.36,1);
}
.kh-resultaat.pro{background:rgba(255,138,61,.08);border-color:rgba(255,138,61,.45)}
.kh-result-text{font-weight:800;font-size:1.12rem;margin-bottom:18px}
.kh-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* pakketkaart-knoppen + detail-drawers */
.btn-sm{padding:12px 20px;font-size:.9rem;border-radius:12px}
.pc-btns{display:flex;flex-direction:column;gap:10px}
.pakket-detail{max-height:0;overflow:hidden;opacity:0;transition:max-height .65s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.pakket-detail.open{opacity:1}
.pd-card{
  margin-top:26px;padding:40px 36px;border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%);
  border:1px solid rgba(34,201,139,.32);
  box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 40px rgba(34,201,139,.06),inset 0 1px 0 rgba(255,255,255,.08);
}
.pd-card.pro-detail{border-color:rgba(255,138,61,.4);box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 40px rgba(255,138,61,.07),inset 0 1px 0 rgba(255,255,255,.08)}
@media(max-width:600px){.pd-card{padding:28px 20px}}
.pd-card h3{font-size:1.5rem;margin-bottom:16px}
.pd-card h4{font-size:1.05rem;margin:26px 0 12px;color:var(--green-bright)}
.pd-card.pro-detail h4{color:var(--orange)}
.pd-card p{color:var(--txt-soft);font-size:.96rem;margin-bottom:12px}
.pd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
@media(max-width:760px){.pd-cols{grid-template-columns:1fr}}
.pd-card ul{list-style:none;margin:0 0 8px}
.pd-card ul li{color:var(--txt-soft);font-size:.93rem;padding:6px 0 6px 28px;position:relative}
.pd-card ul li::before{
  content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-size:.72rem;font-weight:900;
  color:var(--green-bright);background:rgba(34,201,139,.12);
}
.pd-card.pro-detail ul li::before{color:var(--orange);background:rgba(255,138,61,.12)}
.pd-price{font-size:1.7rem;font-weight:900;margin:20px 0 4px}
.pd-price small{font-size:.9rem;font-weight:600;color:var(--txt-soft)}
.pd-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:24px}
.pd-terug{
  background:none;border:0;color:var(--txt-soft);cursor:pointer;
  font-family:var(--font);font-weight:600;font-size:.88rem;padding:10px 4px;
  text-decoration:underline;text-underline-offset:3px;
}
.pd-terug:hover{color:var(--green-bright)}
/* ===== inklapbare module-verdieping ===== */
.extra-toggle{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:52px auto 0;padding:16px 30px;border-radius:100px;cursor:pointer;
  background:rgba(34,201,139,.06);border:1px solid rgba(34,201,139,.32);
  color:var(--txt);font-family:var(--font);font-weight:800;font-size:.95rem;
  transition:background .25s,border-color .25s,transform .2s,box-shadow .25s;
}
.extra-toggle:hover{background:rgba(34,201,139,.13);transform:translateY(-2px);box-shadow:0 8px 26px var(--glow-green)}
.extra-toggle .et-arrow{
  width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(34,201,139,.13);color:var(--green-bright);font-size:.78rem;
  transition:transform .35s;
}
.extra-toggle.open .et-arrow{transform:rotate(180deg)}
.module-extra{max-height:0;overflow:hidden;opacity:0;transition:max-height .75s cubic-bezier(.22,1,.36,1),opacity .5s ease}
.module-extra.open{opacity:1}

/* keuzechip in contactsectie */
.choice-chip{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
  padding:10px 20px;border-radius:100px;font-size:.92rem;font-weight:700;
  background:rgba(34,201,139,.12);border:1px solid rgba(34,201,139,.5);color:var(--green-bright);
  animation:formIn .5s cubic-bezier(.22,1,.36,1);
}

/* ===== slotblok: de afsluiting van de homepage =====
   Het formulier zelf staat op contact.html; dit blok is de uitnodiging. */
.slotblok{
  position:relative;
  max-width:820px;margin:0 auto;text-align:center;
  padding:clamp(34px,4.4vw,58px) clamp(22px,3.4vw,52px);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 130% at 50% -20%,rgba(34,201,139,.10),rgba(0,0,0,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 70px rgba(0,0,0,.45);
}
.slot-label{
  display:inline-block;margin-bottom:14px;
  font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--green-bright);
  padding:6px 14px;border-radius:100px;
  border:1px solid rgba(34,201,139,.32);background:rgba(5,9,7,.5);
}
.slotblok h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:14px;letter-spacing:-.02em}
.slotblok p{max-width:56ch;margin:0 auto 26px;color:var(--txt-soft)}
.slot-acties{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-bottom:30px}
.slot-punten{
  display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;
  list-style:none;margin:0;padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.88rem;color:var(--txt-soft);max-width:none;
}
.slot-punten li{display:flex;align-items:center;gap:8px;max-width:none}
.slot-punten li::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--green-bright);box-shadow:0 0 10px rgba(74,222,157,.8);
}
.slot-punten b{color:var(--txt);font-weight:700}
@media(max-width:600px){
  .slot-acties .btn{width:100%}
  .slot-punten{flex-direction:column;align-items:center;gap:12px}
}

/* ===== ingang naar de Digitale Werkplaats =====
   Volgt hetzelfde verticale ritme als de rest; alleen onderaan iets krapper
   omdat de sectie eronder direct doorloopt. */
/* ===== Mijn Projecten: opgeleverde websites =====
   Eén project per rij over de volle containerbreedte in plaats van twee
   kaarten naast elkaar. De schermafbeelding krijgt daarmee ruim twee keer
   zoveel oppervlak — en daar draait deze sectie om: de bezoeker moet de
   website kunnen zien, niet raden. Beeld en tekst wisselen per rij van kant
   zodat de reeks ritme houdt.
   De kaart is één link naar de live site. De afbeelding zit in een
   browservenster; dat leest meteen als "dit is een echte website" en sluit
   aan op de mock-ups elders op de pagina (.wsm-browser en .m-bar).
   De beelden zijn licht; ze staan daarom iets gedempt zodat ze de donkere
   pagina niet openbreken, en klaren op bij hover — meteen de bevestiging
   dat er iets te klikken valt. */
.proj-grid{display:flex;flex-direction:column;gap:30px}
.proj-kaart{
  display:grid;grid-template-columns:1.4fr 1fr;align-items:center;
  border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:var(--txt);
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 62%);
  border:1px solid rgba(34,201,139,.22);
  box-shadow:0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.proj-kaart:hover,.proj-kaart:focus-visible{
  transform:translateY(-6px);border-color:rgba(255,138,61,.5);
  box-shadow:0 26px 62px rgba(0,0,0,.5),0 0 40px rgba(255,138,61,.10),inset 0 1px 0 rgba(255,255,255,.1);
}
.proj-kaart:focus-visible{outline:2px solid var(--green-bright);outline-offset:3px}
/* Om en om: bij de tweede rij staat het beeld rechts. De kolombreedtes
   draaien mee — alleen de volgorde omzetten zou het beeld in de smalle
   kolom laten belanden en dan is de ene rij ineens kleiner dan de andere. */
.proj-kaart.omgekeerd{grid-template-columns:1fr 1.4fr}
.proj-kaart.omgekeerd .pk-venster{order:2}

/* het browservenster */
.pk-venster{
  display:flex;flex-direction:column;justify-content:center;
  padding:16px;align-self:stretch;
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(34,201,139,.07),rgba(0,0,0,0) 70%),
    rgba(6,10,8,.45);
}
.pk-bar{display:flex;align-items:center;gap:6px;padding:0 4px 10px}
.pk-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.pk-bar i:first-child{background:rgba(255,138,61,.55)}
.pk-bar i:nth-child(2){background:rgba(255,255,255,.22)}
.pk-bar i:nth-child(3){background:rgba(34,201,139,.5)}
.pk-bar b{
  margin-left:6px;padding:3px 13px;border-radius:100px;
  font:600 .74rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--txt-soft);background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pk-beeld{
  display:block;position:relative;overflow:hidden;
  border-radius:12px;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.pk-beeld img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  filter:saturate(.94) brightness(.93);
  transition:transform .45s cubic-bezier(.22,1,.36,1),filter .3s;
}
.proj-kaart:hover .pk-beeld img,.proj-kaart:focus-visible .pk-beeld img{
  filter:none;transform:scale(1.035);
}

/* de tekstkolom */
.pk-tekst{display:flex;flex-direction:column;padding:30px 34px}
.pk-label{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-bright);margin-bottom:11px;
}
.pk-label-oranje{color:var(--orange)}
.pk-titel{font-size:1.45rem;margin-bottom:11px}
.pk-om{color:var(--txt-soft);font-size:1rem;margin-bottom:20px;max-width:46ch}
.pk-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pk-tags b{
  padding:6px 13px;border-radius:100px;font-size:.76rem;font-weight:700;
  color:var(--txt-soft);background:rgba(6,10,8,.5);border:1px solid rgba(34,201,139,.22);
}
.pk-knop{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-weight:800;font-size:.95rem;color:var(--green-bright);
  padding:12px 22px;border-radius:13px;
  border:1px solid rgba(34,201,139,.38);background:rgba(34,201,139,.07);
  transition:color .25s,border-color .25s,background .25s;
}
.pk-knop em{font-style:normal;transition:transform .25s}
.proj-kaart:hover .pk-knop,.proj-kaart:focus-visible .pk-knop{
  color:var(--orange);border-color:rgba(255,138,61,.5);background:rgba(255,138,61,.1);
}
.proj-kaart:hover .pk-knop em{transform:translate(2px,-2px)}

/* ===== de vrije etalageplek =====
   Geen project maar een aanbod, dus bewust anders: gestreepte rand, oranje
   accent en een leeg venster. Zo concurreert hij niet met het echte werk
   maar valt hij wel op als iets waar je op kunt klikken. */
.proj-vrij{
  border-style:dashed;border-color:rgba(255,138,61,.34);
  background:linear-gradient(155deg,rgba(255,138,61,.055),rgba(255,255,255,.012) 62%);
}
.proj-vrij:hover,.proj-vrij:focus-visible{border-color:rgba(255,138,61,.62)}
.proj-vrij .pk-venster{background:radial-gradient(90% 120% at 50% 0%,rgba(255,138,61,.07),rgba(0,0,0,0) 70%),rgba(6,10,8,.4)}
.proj-vrij .pk-tags b{border-color:rgba(255,138,61,.26)}
.pk-leeg{
  display:grid;place-content:center;justify-items:center;gap:12px;
  aspect-ratio:16/10;
  border-style:dashed;border-color:rgba(255,138,61,.3);
  /* een fijn ruitpatroon in plaats van een zwart gat: het venster leest nu
     als een leeg canvas dat nog ingevuld kan worden */
  background:
    repeating-linear-gradient(0deg,rgba(255,138,61,.05) 0 1px,rgba(0,0,0,0) 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,138,61,.05) 0 1px,rgba(0,0,0,0) 1px 34px),
    rgba(6,10,8,.4);
  box-shadow:none;
}
.pl-plus{font-size:2.6rem;font-weight:800;line-height:1;color:rgba(255,138,61,.75)}
.pl-tekst{
  font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-soft);
}
.pk-knop-oranje{color:var(--orange);border-color:rgba(255,138,61,.42);background:rgba(255,138,61,.09)}
.proj-vrij:hover .pk-knop em{transform:translateX(4px)}

.proj-voet{text-align:center;color:var(--txt-soft);font-size:.9rem;margin:30px auto 0;max-width:none}
.proj-voet a{color:var(--green-bright);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(34,201,139,.4)}
.proj-voet a:hover{color:var(--orange);border-color:rgba(255,138,61,.5)}

/* Onder ~820px past beeld naast tekst niet meer; dan weer gestapeld,
   dezelfde grens als het Werkplaats-blok hierboven. */
@media(max-width:820px){
  .proj-grid{gap:22px}
  .proj-kaart,.proj-kaart.omgekeerd{grid-template-columns:1fr}
  .proj-kaart.omgekeerd .pk-venster{order:0}
  .pk-venster{padding:12px}
  .pk-tekst{padding:24px 24px 26px}
  .pk-titel{font-size:1.25rem}
  .pk-om{font-size:.96rem;max-width:none}
}
/* Bewegingsarm: geen lift en geen inzoomen, wel het opklaren van het beeld
   zodat de kaart nog steeds reageert op aanwijzen. */
@media(prefers-reduced-motion:reduce){
  .proj-kaart,.pk-beeld img,.pk-knop em{transition:none}
  .proj-kaart:hover,.proj-kaart:focus-visible{transform:none}
  .proj-kaart:hover .pk-beeld img,.proj-kaart:focus-visible .pk-beeld img{transform:none}
}

/* ===== interactief lab: monitor + hotspots ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lab{max-width:1120px;margin:0 auto}
.kiezer{display:flex;gap:8px;padding:6px;border-radius:100px;background:rgba(6,10,8,.6);
  border:1px solid rgba(34,201,139,.25);margin:0 auto 22px;width:fit-content;max-width:100%}
.kiezer button{padding:11px 22px;border-radius:100px;border:0;background:none;color:var(--txt-soft);
  font-family:var(--font);font-weight:800;font-size:.9rem;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.kiezer button[aria-selected="true"]{background:linear-gradient(135deg,var(--green-bright),var(--green));color:#04140d}
.kiezer button.biz[aria-selected="true"]{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#1d0e02}
.lab-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
@media(max-width:940px){.lab-grid{grid-template-columns:1fr;gap:20px}}
.monitor{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#101613,#0a0d0b);border:1px solid rgba(34,201,139,.4);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(34,201,139,.1);transition:border-color .4s,box-shadow .4s}
.monitor.biz{border-color:rgba(255,138,61,.45);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(255,138,61,.1)}
/* ---------------------------------------------------------------------
   Website Lab: twee wezenlijk verschillende mock-ups.
   Starter is één doorlopende persoonlijke pagina, Business is een stapel
   van meerdere pagina's. Het verschil moet zonder tekst te lezen zichtbaar
   zijn, dus verschilt de opbouw — niet alleen de kleur.
   --------------------------------------------------------------------- */
.m-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);align-items:center}
.m-bar i{width:9px;height:9px;border-radius:50%;display:block;flex:none}
.m-bar i:nth-child(1){background:#ff6058}.m-bar i:nth-child(2){background:#ffbd2e}.m-bar i:nth-child(3){background:#28c840}
/* basislabel in de balk; het mailvenster in de Buddy-sectie gebruikt
   dezelfde balk met een kale span, dus die stijl moet blijven bestaan */
.m-bar span{margin-left:10px;font-size:.7rem;color:var(--txt-soft);font-weight:600}
.m-url{padding:3px 10px;border-radius:100px;background:rgba(0,0,0,.35);white-space:nowrap}
/* paginatabs: alleen de multipage heeft ze */
.m-tabs{display:flex;gap:3px;margin-left:auto;overflow:hidden;
  max-width:0;opacity:0;transition:max-width .6s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.monitor[data-pak="business"] .m-tabs{max-width:230px;opacity:1;transition-delay:.22s}
.m-tabs b{font-size:.6rem;font-weight:700;color:var(--txt-soft);padding:3px 7px;border-radius:5px 5px 0 0;
  background:rgba(255,255,255,.05);white-space:nowrap}
.m-tabs b.actief{background:rgba(255,138,61,.22);color:var(--orange)}

.m-doek{position:relative;aspect-ratio:16/10.4;overflow:hidden}
.m-scene{position:absolute;inset:0;padding:11px;
  transition:opacity .4s ease,transform .8s cubic-bezier(.16,1,.3,1),filter .5s ease}
.monitor[data-pak="starter"] .m-multi{opacity:0;transform:translateY(16px) scale(.93);filter:blur(3px);pointer-events:none}
.monitor[data-pak="business"] .m-one{opacity:0;transform:translateY(-14px) scale(.9);filter:blur(3px);pointer-events:none}

/* ===== Starter: één doorlopende pagina ===== */
.m-one{display:flex;flex-direction:column}
.one-rol{flex:1;justify-content:space-between}
.one-nav{display:flex;align-items:center;gap:7px;padding-bottom:7px;margin-bottom:8px;
  border-bottom:1px solid rgba(74,222,157,.16)}
.one-nav b{font-size:.6rem;color:var(--green-bright);font-weight:800}
.one-nav u{margin-left:auto;text-decoration:none;font-size:.56rem;color:var(--txt-soft)}
.one-nav u+u{margin-left:0}
/* de scrollbalk maakt zichtbaar dat het één lange pagina is */
.one-scroll{position:absolute;right:5px;top:34px;bottom:9px;width:3px;border-radius:3px;background:rgba(255,255,255,.07)}
.one-scroll span{display:block;width:100%;height:34%;border-radius:3px;background:rgba(74,222,157,.5)}
.one-rol{position:relative;padding-left:13px;display:flex;flex-direction:column;gap:7px}
/* doorlopende draad: alle secties hangen aan dezelfde pagina */
.one-draad{position:absolute;left:4px;top:2px;bottom:2px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--green-bright),rgba(74,222,157,.15))}
.one-sec{position:relative;display:flex;flex-direction:column;gap:3px}
.one-sec::before{content:"";position:absolute;left:-12px;top:3px;width:6px;height:6px;border-radius:50%;
  background:var(--green-bright);box-shadow:0 0 0 2px rgba(10,16,13,1)}
.one-kop{font-size:.66rem;font-weight:800;color:var(--green-bright);letter-spacing:.04em}
.one-sec i{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.12)}
.one-sec i.k{width:62%}
/* persoonlijke hero: portret, naam, intro en actie */
.one-hero{flex-direction:row;align-items:center;gap:9px;padding:8px;border-radius:9px;
  background:linear-gradient(135deg,rgba(34,201,139,.22),rgba(34,201,139,.05))}
.one-portret{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;background:rgba(4,20,13,.6);border:1px solid rgba(74,222,157,.45)}
.one-portret img{width:26px;height:26px}
.one-tekst{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.one-naam{display:block;height:6px;width:52%;border-radius:3px;background:rgba(235,255,245,.85)}
.one-rolregel{display:block;height:4px;width:38%;border-radius:3px;background:rgba(74,222,157,.6)}
.one-intro{display:block;height:3px;width:72%;border-radius:3px;background:rgba(255,255,255,.14)}
.one-cta{align-self:flex-start;margin-top:2px;font-size:.56rem;font-weight:800;color:#04140d;
  padding:3px 8px;border-radius:100px;background:var(--green-bright);font-style:normal}
.one-diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.one-diensten u{height:16px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(74,222,157,.18)}
/* drie herkenbare projecten met een label */
.one-werk{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.one-werk u{height:26px;border-radius:5px;display:grid;place-items:center;text-decoration:none;
  background:linear-gradient(150deg,rgba(74,222,157,.2),rgba(255,255,255,.04));
  border:1px solid rgba(74,222,157,.28)}
.one-werk b{font-size:.58rem;color:#d8f2e6;font-weight:700}
.one-review{display:flex;align-items:center;gap:6px}
.one-review s{text-decoration:none;font-size:.5rem;color:var(--orange);letter-spacing:1px}
.one-review i{flex:1;height:4px}
.one-contact{display:flex;align-items:center;gap:7px}
.one-contact>i{flex:1;height:9px;border-radius:4px;background:rgba(255,255,255,.08)}
.one-social{display:flex;gap:3px}
.one-social u{width:9px;height:9px;border-radius:50%;background:rgba(74,222,157,.45)}

/* ===== Business: meerdere pagina's als stapel ===== */
.m-laag{position:absolute;left:11px;right:11px;top:11px;bottom:11px;border-radius:9px;
  background:linear-gradient(160deg,#14201a,#0b100d);border:1px solid rgba(255,138,61,.22);
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.monitor[data-pak="starter"] .m-laag{transform:none;opacity:0}
.monitor[data-pak="business"] .m-laag.l2{transform:translate(9px,-9px)}
.monitor[data-pak="business"] .m-laag.l3{transform:translate(18px,-18px);transition-delay:.07s;opacity:.7}
.m-voor{position:relative;height:100%;border-radius:9px;padding:9px;overflow:hidden;
  background:linear-gradient(160deg,#101613,#0a0d0b);border:1px solid rgba(255,138,61,.4)}
.multi-nav{display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-bottom:7px;
  border-bottom:1px solid rgba(255,138,61,.18)}
.multi-nav b{font-size:.58rem;color:var(--orange);font-weight:800;margin-right:auto}
.multi-nav u{text-decoration:none;font-size:.56rem;color:var(--txt-soft)}
.multi-nav u.actief{color:var(--orange);font-weight:800}
.multi-nav u.knop{color:#1d0e02;background:var(--orange);padding:2px 6px;border-radius:100px;font-weight:800}
/* per keer één pagina in beeld */
.m-voor{display:flex;flex-direction:column}
.multi-pg{display:none;flex-direction:column;gap:6px}
.multi-pg.actief{display:flex;flex:1;justify-content:space-evenly;animation:pgIn .4s cubic-bezier(.16,1,.3,1)}
@keyframes pgIn{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}
.pg-kop{font-size:.66rem;font-weight:800;color:var(--orange)}
.multi-pg i{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.12)}
.multi-pg i.k{width:58%}
.pg-hero{display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:8px;
  background:linear-gradient(135deg,rgba(255,138,61,.22),rgba(255,138,61,.04))}
.pg-hero em{align-self:flex-start;font-style:normal;font-size:.56rem;font-weight:800;color:#1d0e02;
  padding:3px 8px;border-radius:100px;background:var(--orange);margin-top:2px}
.pg-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.pg-rij u{height:18px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,138,61,.16)}
.pg-diensten{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.pg-diensten u{height:20px;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,138,61,.2)}
.pg-zij{display:flex;gap:5px}
.pg-zij i{flex:1}
.pg-cases{display:flex;flex-direction:column;gap:5px}
.pg-cases u{display:flex;align-items:center;gap:6px;height:17px;padding:0 6px;border-radius:5px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,138,61,.18)}
.pg-cases s{text-decoration:none;font-size:.58rem;font-weight:900;color:var(--orange);flex:none}
.pg-cases i{flex:1}
.pg-team{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.pg-team u{height:19px;border-radius:5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,138,61,.16)}
.pg-form{display:flex;align-items:center;gap:5px}
.pg-form i{flex:1;height:9px;border-radius:4px;background:rgba(255,255,255,.07)}
.pg-form em{font-style:normal;font-size:.46rem;font-weight:800;color:#1d0e02;padding:2px 7px;border-radius:100px;background:var(--orange)}
/* compacte sitemap rechtsonder: de structuur in één oogopslag */
.m-sitemap{position:absolute;right:14px;bottom:13px;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 6px;border-radius:7px;background:rgba(4,7,6,.72);border:1px solid rgba(255,138,61,.28)}
.m-sitemap s{width:16px;height:4px;border-radius:2px;background:var(--orange);text-decoration:none}
.m-sitemap u{width:11px;height:3px;border-radius:2px;background:rgba(255,138,61,.45)}

/* ===== bewegingsarm: geen morph, wel het verschil ===== */
@media(prefers-reduced-motion:reduce){
  .m-scene,.m-laag,.m-tabs{transition:none}
  .multi-pg.actief{animation:none}
  .monitor[data-pak="starter"] .m-multi,
  .monitor[data-pak="business"] .m-one{filter:none}
}

.hot{position:absolute;width:28px;height:28px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid var(--green-bright);background:rgba(4,20,13,.8);color:var(--green-bright);
  font-family:var(--font);font-weight:900;font-size:.74rem;display:grid;place-items:center;
  animation:hotPuls 2.6s ease-out infinite;transition:transform .2s,background .2s}
.monitor.biz .hot{border-color:var(--orange);color:var(--orange)}
/* De punten wijzen per pakket naar andere onderdelen, dus ze verplaatsen mee.
   In CSS in plaats van inline, zodat er niets in JS gepositioneerd hoeft. */
.monitor[data-pak="starter"] .hot[data-hot="0"]{left:42%;top:15%}
.monitor[data-pak="starter"] .hot[data-hot="1"]{left:64%;top:45%}
.monitor[data-pak="starter"] .hot[data-hot="2"]{left:50%;top:63%}
.monitor[data-pak="starter"] .hot[data-hot="3"]{left:22%;top:31%}
.monitor[data-pak="starter"] .hot[data-hot="4"]{left:74%;top:89%}
.monitor[data-pak="business"] .hot[data-hot="0"]{left:88%;top:9%}
.monitor[data-pak="business"] .hot[data-hot="1"]{left:32%;top:44%}
.monitor[data-pak="business"] .hot[data-hot="2"]{left:57%;top:60%}
.monitor[data-pak="business"] .hot[data-hot="3"]{left:26%;top:76%}
.monitor[data-pak="business"] .hot[data-hot="4"]{left:79%;top:88%}
.hot{transition:transform .2s,background .2s,left .7s cubic-bezier(.16,1,.3,1),top .7s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.hot{transition:none}}
@keyframes hotPuls{0%{box-shadow:0 0 0 0 rgba(74,222,157,.4)}70%{box-shadow:0 0 0 13px rgba(74,222,157,0)}100%{box-shadow:0 0 0 0 rgba(74,222,157,0)}}
.hot:hover,.hot[aria-expanded="true"]{transform:scale(1.18)}
.hot[aria-expanded="true"]{background:var(--green-bright);color:#04140d}
.monitor.biz .hot[aria-expanded="true"]{background:var(--orange);color:#1d0e02}
.hot-uitleg{margin-top:12px;padding:15px 17px;border-radius:14px;min-height:78px;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(34,201,139,.25)}
.hot-uitleg strong{display:block;color:var(--green-bright);font-size:.98rem;margin-bottom:3px}
.monitor.biz+.hot-uitleg strong{color:var(--orange)}
.monitor.biz+.hot-uitleg{border-color:rgba(255,138,61,.3)}
/* =====================================================================
   Ruime tik-doelen op élk aanraakscherm
   Deze regels hangen aan pointer:coarse in plaats van aan een breedte:
   een tablet van 768px of breder wordt óók met een vinger bediend, en die
   viel eerder buiten de mobiele breakpoint. 46px omdat aanwijzen onder de
   44px meetbaar onnauwkeurig wordt.
   ===================================================================== */
@media(pointer:coarse){
  /* De punten liggen op een kleine mock-up; 46px zichtbaar zou het beeld
     afdekken. Daarom blijft de stip klein en ligt het raakvlak eromheen. */
  .hot{width:30px;height:30px;font-size:.72rem}
  .hot::after{content:"";position:absolute;inset:-8px;border-radius:50%}
  .pm-vgl .card .naar,footer .legal-links a,.check label a,.privacy-note a,.naar{
    display:inline-flex;align-items:center;padding:11px 2px;min-height:46px;line-height:1.5;
  }
  .btn,.pd-terug,.eind-keuze,
  [data-detail],[data-close],[role="tab"]{
    min-height:46px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .kh-opties button{min-height:48px;padding:13px 16px;justify-content:flex-start;text-align:left}
  /* invoervelden: 16px voorkomt dat iOS bij focus automatisch inzoomt */
  .form-card input,.form-card select,.form-card textarea{font-size:16px;min-height:46px}
}

@media(max-width:767px){
  footer .legal-links{gap:2px 18px}
}
.hot-uitleg p{color:var(--txt-soft);font-size:.9rem}
.lab .paneel{border-radius:20px;padding:28px 26px;
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 62%);
  border:1px solid rgba(34,201,139,.28);backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .4s}
.lab .paneel.biz{border-color:rgba(255,138,61,.4)}
.p-label{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-bright)}
.paneel.biz .p-label{color:var(--orange)}
.lab .paneel h3{font-size:1.35rem;font-weight:900;margin:5px 0 4px}
.p-wie{color:var(--txt-soft);font-size:.9rem;margin-bottom:14px}
.p-prijs{font-size:2rem;font-weight:900;letter-spacing:-.03em;line-height:1.15}
.p-prijs small{display:block;font-size:.84rem;font-weight:600;color:var(--txt-soft);margin-top:3px}
.lab .paneel ul{list-style:none;margin:16px 0 20px}
.lab .paneel li{position:relative;padding:6px 0 6px 28px;color:var(--txt-soft);font-size:.9rem}
.lab .paneel li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-size:.7rem;font-weight:900;color:var(--green-bright);background:rgba(34,201,139,.13)}
.lab .paneel.biz li::before{color:var(--orange);background:rgba(255,138,61,.13)}
.lab .paneel .btn{width:100%}
.lab .paneel.biz .btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#1d0e02;box-shadow:0 6px 24px var(--glow-orange)}

/* ===== project builder in de pagina ===== */
.bouwer{display:flex;flex-direction:column;gap:18px}
.bouw-groep{border:0;padding:0;margin:0}
.bouw-groep legend{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--green-bright);margin-bottom:11px;padding:0}
.opties{display:flex;flex-wrap:wrap;gap:9px}
.opties button{padding:12px 18px;border-radius:100px;cursor:pointer;font-family:var(--font);
  font-weight:700;font-size:.88rem;background:rgba(255,255,255,.045);
  border:1px solid rgba(34,201,139,.22);color:var(--txt-soft);
  transition:border-color .2s,background .2s,color .2s,transform .18s}
.opties button:hover{border-color:rgba(34,201,139,.6);color:var(--txt);transform:translateY(-2px)}
.opties button[aria-pressed="true"]{background:rgba(34,201,139,.18);border-color:var(--green);color:var(--green-bright)}
.resultaat{margin:6px 0 18px;padding:16px;border-radius:14px;
  background:rgba(34,201,139,.08);border:1px solid rgba(34,201,139,.35);
  animation:sigIn .45s cubic-bezier(.22,1,.36,1) both}
.res-rij{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.07);font-size:.88rem}
.res-rij:last-of-type{border-bottom:0}
.res-rij span{color:var(--txt-soft)}
.res-rij b{color:var(--txt);text-align:right}
.res-advies{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);
  color:var(--txt-soft);font-size:.89rem;line-height:1.65}

/* ===== buddy scan: fictief mailvenster ===== */
.mailvenster{background:linear-gradient(170deg,#0e1411,#0a0d0b)}
.mail{padding:0;font-size:.92rem}
/* kop met afzender */
.mail-kop{display:flex;gap:13px;align-items:flex-start;padding:16px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.mail-avatar{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:900;letter-spacing:.02em;color:#0b100d;
  background:linear-gradient(135deg,#8fa3ae,#5f7480);
}
.mail-van{min-width:0;flex:1}
.mail-naam{font-weight:800;color:var(--txt);font-size:.97rem;line-height:1.3}
.mail-aan{font-size:.78rem;color:var(--txt-soft);margin-top:5px}
.mail-onderwerp{
  padding:15px 18px 0;font-size:1.06rem;font-weight:800;color:var(--txt);
  line-height:1.35;letter-spacing:-.01em;
}
.mail-tekst{padding:12px 18px 18px;color:var(--txt-soft);line-height:1.72}
.mail-tekst p{margin-bottom:11px}
.mail-slot{margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.07);
  font-size:.86rem;color:var(--txt-soft)}
.mail-afzender{color:var(--txt);font-weight:600}
/* klikbare signalen */
.sig{
  border:0;border-radius:7px;font:inherit;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);color:var(--txt);
  box-shadow:inset 0 -2px 0 rgba(255,138,61,.5);
  transition:background .2s,box-shadow .2s,transform .15s;
}
.sig:hover{background:rgba(255,138,61,.16);transform:translateY(-1px)}
.sig-adres{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:7px 10px;
  max-width:100%;font-size:.85rem;color:var(--txt-soft);word-break:break-all;
}
.sig-blok{display:inline-flex;align-items:flex-start;gap:8px;padding:9px 12px;width:100%}
.sig-tekst{min-width:0}
.sig-link{color:#7db8ff;text-decoration:underline;word-break:break-all}
.sig-vink{display:none;font-weight:900;color:var(--green-bright);flex-shrink:0}
.sig[aria-expanded="true"]{
  background:rgba(34,201,139,.16);
  box-shadow:inset 0 -2px 0 var(--green),0 0 0 1px rgba(34,201,139,.35);
}
.sig[aria-expanded="true"] .sig-vink{display:inline}
.sig[aria-expanded="true"] .sig-link{color:var(--green-bright)}
@media(max-width:520px){
  .mail-kop{padding:14px 14px 12px;gap:11px}
  .mail-avatar{width:38px;height:38px;font-size:.76rem}
  .mail-onderwerp{padding:13px 14px 0;font-size:.98rem}
  .mail-tekst{padding:11px 14px 16px;font-size:.88rem}
}
.fictief{margin-top:12px;font-size:.8rem;color:var(--txt-soft);background:rgba(255,138,61,.07);
  border:1px solid rgba(255,138,61,.25);border-radius:12px;padding:11px 14px}
.scan-balk{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 16px}
.scan-balk span{display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--green-bright),var(--green));transition:width .45s cubic-bezier(.22,1,.36,1)}
.scan-lijst{list-style:none;margin:0 0 6px}
.scan-lijst li{padding:9px 0 9px 30px;position:relative;color:var(--txt-soft);font-size:.87rem;
  animation:sigIn .4s cubic-bezier(.22,1,.36,1) both}
@keyframes sigIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.scan-lijst li::before{content:"✓";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:6px;
  display:grid;place-items:center;font-size:.7rem;font-weight:900;color:var(--green-bright);background:rgba(34,201,139,.14)}
.scan-lijst li b{display:block;color:var(--txt);font-size:.91rem;margin-bottom:1px}
.scan-klaar{margin:8px 0 16px;padding:15px 16px;border-radius:14px;
  background:rgba(34,201,139,.1);border:1px solid rgba(34,201,139,.42);animation:sigIn .5s cubic-bezier(.22,1,.36,1) both}
.scan-klaar strong{display:block;color:var(--green-bright);font-size:1rem;margin-bottom:4px}
.scan-klaar p{color:var(--txt-soft);font-size:.87rem}

/* ===== website-module ===== */
.ws-intro{
  display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;
  max-width:1040px;margin:0 auto;padding:44px 40px;border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.014) 60%);
  border:1px solid rgba(34,201,139,.3);
  backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 46px rgba(34,201,139,.07),inset 0 1px 0 rgba(255,255,255,.09);
}
@media(max-width:880px){.ws-intro{grid-template-columns:1fr;padding:32px 22px;gap:30px}}
.ws-intro-text p{color:var(--txt-soft);margin-bottom:16px;font-size:1rem}
.ws-intro-text .kernwaarden{justify-content:flex-start;margin-top:6px}
/* zwevende website-mockup */
.ws-mockup{position:relative;display:grid;place-items:center;min-height:300px}
@media(max-width:880px){
  .ws-mockup{min-height:250px}
  /* De gloed is een vaste 340px en stak op smalle schermen buiten zijn kader,
     zowel in de breedte als in de hoogte. Extra selector omdat de basisregel
     verderop in dit bestand staat en anders alsnog wint. */
  .ws-mockup .wsm-glow{width:min(340px,70vw);height:min(340px,70vw,230px)}
}
.wsm-glow{
  position:absolute;width:340px;height:340px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(34,201,139,.2),transparent 65%);
  animation:glowPulse 6s ease-in-out infinite;
}
.wsm-accent{position:absolute;background:var(--orange);border-radius:2px;box-shadow:0 0 10px var(--glow-orange);z-index:1}
.wsm-accent.a1{width:36px;height:3px;top:9%;left:4%}
.wsm-accent.a2{width:3px;height:36px;bottom:12%;right:2%}
.wsm-browser{
  width:min(330px,92%);border-radius:14px;overflow:hidden;position:relative;z-index:2;
  background:linear-gradient(160deg,#101613,#0a0d0b);
  border:1px solid rgba(34,201,139,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 40px rgba(34,201,139,.14);
  animation:heroFloat 7s ease-in-out infinite;
}
.wsm-bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.04)}
.wsm-bar span{width:9px;height:9px;border-radius:50%}
.wsm-bar span:nth-child(1){background:#ff6058}
.wsm-bar span:nth-child(2){background:#ffbd2e}
.wsm-bar span:nth-child(3){background:#28c840}
.wsm-body{padding:16px}
.wsm-hero{
  height:66px;border-radius:9px;margin-bottom:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(34,201,139,.28),rgba(255,138,61,.2));
}
.wsm-hero img{width:36px;height:36px}
.wsm-line{height:9px;border-radius:6px;background:rgba(255,255,255,.1);margin-bottom:9px}
.wsm-line.w60{width:60%}
.wsm-line.groen{background:rgba(34,201,139,.45);width:42%}
.wsm-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.wsm-cards div{height:38px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07)}
.wsm-phone{
  position:absolute;right:4%;bottom:-10px;width:88px;border-radius:14px;z-index:3;
  background:#0b100d;border:1px solid rgba(255,138,61,.5);
  box-shadow:0 16px 40px rgba(0,0,0,.6),0 0 24px rgba(255,138,61,.15);
  padding:12px 9px;animation:heroFloat 6s ease-in-out infinite reverse;
}
.wsm-phone .wsm-line{height:6px;margin-bottom:6px}
.wsm-phone .wsm-hero{height:30px;margin-bottom:8px}
.wsm-phone .wsm-hero img{width:18px;height:18px}
/* keuzekaarten website */
.ws-keuze .kk{cursor:pointer;text-align:left}
.ws-keuze .kk.active{border-color:var(--green);box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 30px rgba(34,201,139,.12),inset 0 1px 0 rgba(255,255,255,.1)}
.kk-result{
  display:none;margin-top:16px;padding:12px 15px;border-radius:12px;
  background:rgba(34,201,139,.1);border:1px solid rgba(34,201,139,.4);
  font-weight:700;font-size:.9rem;color:var(--green-bright);
}
.kk-result.oranje{background:rgba(255,138,61,.1);border-color:rgba(255,138,61,.45);color:var(--orange)}
.kk.active .kk-result{display:block;animation:formIn .4s cubic-bezier(.22,1,.36,1)}
.kk .btn{margin-top:14px;width:100%}
/* prijskaart-subregel voor service */
.price-sub{font-size:.88rem;color:var(--txt-soft);font-weight:600;margin-top:4px}
/* vergelijkingstabel */
.vgl{
  max-width:960px;margin:0 auto;border-radius:18px;overflow:hidden;
  border:1px solid rgba(34,201,139,.22);
  background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.vgl-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid rgba(255,255,255,.06)}
.vgl-row:last-child{border-bottom:0}
.vgl-row>div{padding:14px 18px;font-size:.92rem;color:var(--txt-soft)}
.vgl-row>div:first-child{font-weight:700;color:var(--txt)}
.vgl-head{background:rgba(34,201,139,.08)}
.vgl-head>div{font-weight:800;color:var(--txt)}
.vgl-head>div:nth-child(2){color:var(--green-bright)}
.vgl-head>div:nth-child(3){color:var(--orange)}
@media(max-width:760px){
  .vgl{border:0;background:none;overflow:visible;box-shadow:none}
  .vgl-head{display:none}
  .vgl-row{
    grid-template-columns:1fr;border:1px solid rgba(34,201,139,.2);border-radius:14px;
    margin-bottom:12px;overflow:hidden;
    background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  }
  .vgl-row>div:first-child{background:rgba(34,201,139,.08);padding:12px 16px}
  .vgl-row>div{padding:10px 16px}
  .vgl-row>div[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--green-bright)}
  .vgl-row>div[data-label="Business"]::before{color:var(--orange)}
}
/* timeline met 5 stappen */
@media(min-width:881px){
  .timeline.tl-5{grid-template-columns:repeat(5,1fr)}
  .timeline.tl-5 .tl-line{left:9%;right:9%}
}

/* ===== project op maat-module ===== */
.pm-cat{
  text-align:left;cursor:pointer;font-family:var(--font);color:var(--txt);
  display:flex;flex-direction:column;align-items:flex-start;
}
.pm-cat p{flex-grow:1}
.pm-cat.active{
  border-color:var(--green);
  box-shadow:0 20px 48px rgba(0,0,0,.45),0 0 30px rgba(34,201,139,.14),inset 0 1px 0 rgba(255,255,255,.1);
}
.pm-more{
  color:var(--green-bright);font-weight:700;font-size:.88rem;
  display:inline-block;margin-top:14px;transition:transform .2s;
}
.pm-cat:hover .pm-more{transform:translateX(4px)}
.scope-list{list-style:none;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
@media(max-width:600px){.scope-list{grid-template-columns:1fr}}
.scope-list li{color:var(--txt-soft);font-size:.9rem;padding:5px 0 5px 27px;position:relative}
.scope-list li::before{
  content:"✓";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:6px;
  display:grid;place-items:center;font-size:.7rem;font-weight:900;
  color:var(--orange);background:rgba(255,138,61,.13);
}
.pm-vgl .card h3{margin-bottom:8px}
.pm-vgl .card .naar{
  display:inline-block;margin-top:14px;font-weight:700;font-size:.88rem;
  color:var(--green-bright);text-decoration:none;
}
.pm-vgl .card .naar:hover{text-decoration:underline;text-underline-offset:3px}
.pm-vgl .card.pm-hl{border-color:rgba(255,138,61,.45)}
.pm-vgl .card.pm-hl h3,.pm-vgl .card.pm-hl .naar{color:var(--orange)}

/* ===== projecten ===== */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:860px;margin:0 auto 36px}
@media(max-width:820px){.chips{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.chips{grid-template-columns:1fr}}
.chip{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(34,201,139,.16);border-radius:14px;
  font-weight:600;font-size:.93rem;cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .25s,border-color .25s,background .25s;
}
.chip:hover{transform:translateY(-3px) scale(1.02);border-color:rgba(255,138,61,.45);background:rgba(255,138,61,.05)}
.chip i{font-style:normal;font-size:1.2rem}
.uurtarief-note{max-width:680px;margin:0 auto;text-align:center;color:var(--txt-soft)}
.uurtarief-note .tarief{
  display:inline-block;margin:20px 0 26px;padding:12px 24px;border-radius:12px;
  background:rgba(34,201,139,.07);border:1px solid rgba(34,201,139,.28);
  font-weight:700;color:var(--txt);font-size:.95rem;
}

/* ===== over ===== */
.over-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start}
@media(max-width:880px){.over-wrap{grid-template-columns:1fr}}
.over-text p{color:var(--txt-soft);margin-bottom:18px;font-size:1.02rem}
.over-text .quote{
  border-left:3px solid var(--green);padding:4px 0 4px 18px;
  color:var(--txt);font-weight:700;font-size:1.05rem;margin-top:24px;
}
.profiel{
  background:linear-gradient(160deg,rgba(34,201,139,.08),rgba(255,138,61,.05));
  border:1px solid rgba(34,201,139,.28);border-radius:24px;padding:34px 30px;text-align:center;
}
.profiel .avatar{
  width:110px;height:110px;margin:0 auto 18px;display:grid;place-items:center;
}
.profiel .avatar img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 8px 24px var(--glow-green));
  animation:heroFloat 7s ease-in-out infinite;
}
.profiel h3{font-size:1.3rem}
.profiel .titel{
  display:inline-block;margin:8px 0 6px;padding:5px 15px;border-radius:100px;
  font-size:.82rem;font-weight:800;color:var(--orange);
  background:rgba(255,138,61,.1);border:1px solid rgba(255,138,61,.35);
}
.profiel .exp{color:var(--txt-soft);font-size:.92rem;margin-bottom:20px}
.kernwaarden{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kernwaarden span{
  padding:7px 13px;border-radius:100px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--card-border);color:var(--txt-soft);
}

/* ===== timeline ===== */
.timeline{max-width:760px;margin:0 auto;position:relative}
/* de lijn tekent zichzelf wanneer de sectie in beeld komt */
.tl-line{
  position:absolute;left:26px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--green-bright),var(--green) 60%,var(--orange));
  opacity:.5;transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s cubic-bezier(.22,1,.36,1) .2s;
}
.timeline.visible .tl-line{transform:scaleY(1)}
.step{position:relative;padding:0 0 38px 82px}
.step:last-child{padding-bottom:0}
.step .marker{
  position:absolute;left:0;top:0;width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;font-weight:900;font-size:1.15rem;
  background:linear-gradient(135deg,var(--green),#128a5e);color:#04140d;
  box-shadow:0 6px 22px var(--glow-green);z-index:1;
}
.step:nth-child(odd) .marker{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#1d0e02;box-shadow:0 6px 22px var(--glow-orange)}
.step .ico{font-size:1.35rem;margin-bottom:4px}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{color:var(--txt-soft);font-size:.95rem}
/* horizontale timeline op desktop */
@media(min-width:881px){
  .timeline{max-width:1060px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
  .tl-line{
    left:11%;right:11%;top:27px;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,var(--green-bright),var(--green) 60%,var(--orange));
    transform:scaleX(0);transform-origin:left;
  }
  .timeline.visible .tl-line{transform:scaleX(1)}
  .step{padding:0;text-align:center}
  .step .marker{position:relative;margin:0 auto 20px}
  .step .ico{font-size:1.55rem;margin-bottom:8px}
}

/* ===== faq ===== */
.faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.01));
  border:1px solid rgba(34,201,139,.16);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;transition:border-color .3s,box-shadow .3s;
}
.faq-item.open{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.3)}
.faq-item.open{border-color:rgba(255,138,61,.45)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--txt);font-weight:700;font-size:1rem;font-family:var(--font);
}
.faq-q .arrow{
  flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(34,201,139,.1);color:var(--green-bright);font-size:.85rem;
  transition:transform .35s,background .3s,color .3s;
}
.faq-item.open .faq-q .arrow{transform:rotate(180deg);background:rgba(255,138,61,.14);color:var(--orange)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
.faq-a p{padding:0 22px 20px;color:var(--txt-soft);font-size:.95rem}

/* ===== contact ===== */
.contact-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:start}
@media(max-width:880px){.contact-wrap{grid-template-columns:1fr}}
.contact-gate{
  background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 60%);
  border:1px solid rgba(34,201,139,.32);border-radius:24px;
  padding:46px 34px;text-align:center;backdrop-filter:blur(10px);
  box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 46px rgba(34,201,139,.08),inset 0 1px 0 rgba(255,255,255,.09);
}
@media(max-width:520px){.contact-gate{padding:34px 22px}}
.contact-gate .shield{
  width:66px;height:66px;margin:0 auto 20px;border-radius:20px;display:grid;place-items:center;
  font-size:1.9rem;background:linear-gradient(135deg,rgba(34,201,139,.16),rgba(255,138,61,.12));
  border:1px solid rgba(34,201,139,.3);
}
.contact-gate p{color:var(--txt-soft);margin-bottom:24px;max-width:460px;margin-left:auto;margin-right:auto}
.contact-gate .privacy-note{
  font-size:.82rem;color:var(--txt-soft);margin:18px auto 0;opacity:.85;
}
#formMount{overflow:hidden}
.form-card{
  background:var(--bg-soft);border:1px solid rgba(34,201,139,.35);border-radius:24px;
  padding:34px 30px;
  box-shadow:0 0 0 1px rgba(34,201,139,.1),0 0 44px rgba(34,201,139,.08);
  animation:formIn .55s cubic-bezier(.22,1,.36,1);
}
@keyframes formIn{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:520px){.form-card{padding:26px 18px}}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.87rem;margin-bottom:7px}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;border-radius:12px;font-size:.95rem;
  background:rgba(255,255,255,.045);border:1px solid rgba(52,211,153,.18);
  color:var(--txt);font-family:var(--font);transition:border-color .2s,box-shadow .2s;
}
.field select option{background:var(--bg-soft);color:var(--txt)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(34,201,139,.16);
}
.field textarea{resize:vertical;min-height:120px}
.check{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px}
.check input{width:19px;height:19px;margin-top:3px;accent-color:var(--green);flex-shrink:0}
.check label{font-size:.86rem;color:var(--txt-soft)}
.form-status{margin-top:14px;font-weight:600;font-size:.92rem;display:none}
.form-status.ok{display:block;color:var(--green-bright)}
.form-status.err{display:block;color:#ff8a8a}
/* honeypot: bewust géén display:none — off-screen zodat mensen 'm nooit zien, bots vaak wel invullen */
.hp-wrap{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.contact-info .card{margin-bottom:18px}
.contact-info .card h3{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.contact-links{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.contact-links a,.contact-links button{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--card-border);
  color:var(--txt);text-decoration:none;font-weight:600;font-size:.92rem;
  transition:transform .2s,border-color .2s;cursor:pointer;font-family:var(--font);
  width:100%;text-align:left;
}
.contact-links a:hover,.contact-links button:hover{transform:translateX(4px);border-color:rgba(255,138,61,.45)}
.contact-links i{font-style:normal;font-size:1.15rem}
.biz{font-size:.86rem;color:var(--txt-soft);line-height:2}

/* ===== footer ===== */
footer{
  border-top:1px solid rgba(52,211,153,.12);
  background:rgba(4,6,5,.8);padding:52px 0 110px;text-align:center;
}
@media(min-width:901px){footer{padding-bottom:52px}}
footer .footer-logo{width:60px;height:60px;object-fit:contain;margin:0 auto 16px;filter:drop-shadow(0 4px 16px var(--glow-green))}
footer .slogan{
  font-size:clamp(1.1rem,3vw,1.45rem);font-weight:800;margin-bottom:22px;
  background:linear-gradient(90deg,var(--green-bright),var(--green) 55%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
footer .legal-links{display:flex;gap:8px 22px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
footer .legal-links a{color:var(--txt-soft);text-decoration:none;font-size:.88rem;font-weight:600}
footer .legal-links a:hover{color:var(--orange)}
footer .meta{color:var(--txt-soft);font-size:.84rem;line-height:1.9}

/* ===== sticky mobiele CTA ===== */
/* Anchored to the dynamic viewport, not the layout viewport: a phone browser's
   own bottom bar then sits below the button instead of on top of it. */
.sticky-cta{
  position:fixed;left:14px;right:14px;top:0;height:100vh;height:100dvh;z-index:90;
  display:none;align-items:flex-end;pointer-events:none;
  padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}
.sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px;border-radius:16px;font-weight:800;font-size:1.02rem;
  color:#1d0e02;text-decoration:none;pointer-events:auto;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 10px 34px rgba(0,0,0,.55),0 6px 20px var(--glow-orange);
  animation:ctaPulse 3.6s ease-in-out infinite;
  transform:translateY(calc(100% + 30px));transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.sticky-cta.show a{transform:none}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 10px 34px rgba(0,0,0,.55),0 6px 20px var(--glow-orange)}
  50%{box-shadow:0 10px 34px rgba(0,0,0,.55),0 6px 32px rgba(255,138,61,.5)}
}
#openFormBtn{animation:gatePulse 4s ease-in-out infinite}
@keyframes gatePulse{
  0%,100%{box-shadow:0 6px 24px var(--glow-green),inset 0 1px 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 6px 34px rgba(34,201,139,.5),inset 0 1px 0 rgba(255,255,255,.25)}
}
@media(max-width:900px){.sticky-cta{display:flex}}


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