:root{
  --bg:#f4f4f6;
  --bg-alt:#eaeaee;
  --card:#ffffff;
  --text:#101014;
  --text-dim:#5c5c66;
  --accent:#3358ff;
  --accent-2:#101014;
  --line:#dcdce2;
  --radius:18px;
  --maxw:1160px;
  --dark-bg:#0e0e10;
  --dark-line:#2a2a2f;
  --dark-text:#f5f4f0;
  --dark-text-dim:#a8a7ad;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.1;}
h2{font-size:clamp(28px,4vw,42px); margin-bottom:16px;}
.eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.lede{color:var(--text-dim); font-size:18px; max-width:560px; margin-bottom:8px;}
.slogan{color:var(--accent); font-size:20px; font-weight:700; margin-bottom:18px; max-width:480px;}

/* PRELOADER: logo dendert in 3D vanuit de diepte op de kijker af, neemt
   een hap, en knalt daarna dwars door het scherm de homepage in. Eenmalig
   per sessie.
   LET OP: geen `perspective` op body/html hangen - dat maakt fixed-elementen
   binnenin per ongeluk relatief aan dat element ipv aan de viewport. */
#preloader{
  position:fixed; inset:0; z-index:999;
  background:var(--dark-bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transform-origin:50% 100%;
  transition:opacity 0.6s ease, transform 0.6s cubic-bezier(.6,0,.3,1);
}
#preloader.hide{
  opacity:0;
  transform:rotateX(-32deg) translateY(-50px) scale(1.08);
  pointer-events:none;
}
/* Echt uitgestoken 3D blokje dat van ver weg met veel snelheid op de kijker
   af komt vliegen (translateZ + perspective = echte dolly-zoom, geen platte
   scale-truc), even blijft zweven zodat de diepte goed te zien is, dan een
   hap neemt, kruimels over het hele scherm uitstrooit en tot slot dwars
   door de camera heen naar de kijker toe knalt om de homepage te onthullen. */
.preloader-stage{perspective:900px;}
/* Het blokje is in DOM groter (200px) dan het er ooit "rustend" uitziet
   (rond 136px, dus scale(0.68) in ruststand). Reden: bij 3D-transforms
   rasterisert de browser de laag vaak op basis van het onvertaalde
   layout-formaat en schaalt die bitmap daarna - hoe groter die brondata,
   hoe scherper hij blijft op het moment dat hij dichtbij komt en groot
   in beeld staat. will-change zet 'm bovendien meteen op een eigen laag. */
.pl-cube{
  position:relative; width:200px; height:200px;
  transform-style:preserve-3d; will-change:transform;
  filter: drop-shadow(0 40px 70px rgba(20,20,45,0.45));
  animation: plApproach 0.75s cubic-bezier(.16,1,.3,1) both,
             plIdleFloat 0.7s ease-in-out 0.75s 1,
             plImpact 0.22s ease-out 1.65s both,
             plSettle 0.85s ease-in 1.85s forwards;
}
.pl-face{position:absolute; background:#3358ff;}
.pl-front{
  width:200px; height:200px; top:0; left:0; border-radius:40px;
  display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden;
}
.pl-front svg{width:100%; height:100%; display:block;}
.pl-side{
  width:35px; height:200px; top:0; right:-35px;
  border-radius:0 40px 40px 0; background:#2445c2;
  transform:rotateY(90deg); transform-origin:left center;
  backface-visibility:hidden;
}
.pl-bottom{
  width:200px; height:35px; left:0; bottom:-35px;
  border-radius:0 0 40px 40px; background:#1c3699;
  transform:rotateX(-90deg); transform-origin:top center;
  backface-visibility:hidden;
}
.pl-bite{
  transform-box: fill-box; transform-origin:63% 38%;
  transform:scale(0); opacity:0;
  animation: plBite 0.3s cubic-bezier(.34,1.56,.64,1) 1.45s forwards;
}
.pl-crumbs{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.crumb{
  position:absolute; top:calc(50% - 14px); left:calc(50% + 18px);
  width:8px; height:8px; border-radius:50%; background:#ffffff;
  opacity:0;
  animation: plCrumb 0.9s cubic-bezier(.16,.84,.44,1) forwards;
}
.crumb.c1{ --tx:-38vw; --ty:-26vh; --rot:340deg; width:11px; height:11px; animation-delay:1.5s;}
.crumb.c2{ --tx:36vw; --ty:-34vh; --rot:-280deg; background:#c7d1ff; animation-delay:1.52s;}
.crumb.c3{ --tx:-26vw; --ty:30vh; --rot:220deg; animation-delay:1.54s;}
.crumb.c4{ --tx:40vw; --ty:22vh; --rot:-360deg; width:6px; height:6px; background:#c7d1ff; animation-delay:1.55s;}
.crumb.c5{ --tx:-10vw; --ty:-40vh; --rot:180deg; width:9px; height:9px; animation-delay:1.57s;}
.crumb.c6{ --tx:14vw; --ty:38vh; --rot:-200deg; background:#c7d1ff; animation-delay:1.59s;}
.crumb.c7{ --tx:-44vw; --ty:5vh; --rot:300deg; width:7px; height:7px; animation-delay:1.61s;}
.crumb.c8{ --tx:46vw; --ty:-5vh; --rot:-320deg; animation-delay:1.63s;}
.crumb.c9{ --tx:-19vw; --ty:-14vh; --rot:260deg; width:6px; height:6px; background:#c7d1ff; animation-delay:1.65s;}
.crumb.c10{ --tx:21vw; --ty:9vh; --rot:-240deg; animation-delay:1.67s;}
@keyframes plApproach{
  0%{ transform: translateZ(-1050px) rotateY(-260deg) rotateX(30deg) scale(.055); opacity:0; }
  14%{ opacity:1; }
  42%{ transform: translateZ(170px) rotateY(28deg) rotateX(-14deg) scale(.952); opacity:1; }
  68%{ transform: translateZ(-25px) rotateY(-8deg) rotateX(4deg) scale(.6); }
  100%{ transform: translateZ(0) rotateY(0) rotateX(0) scale(.68); opacity:1; }
}
@keyframes plIdleFloat{
  0%{ transform: translateZ(0) rotateY(0) rotateX(0) scale(.68); }
  50%{ transform: translateZ(25px) rotateY(-16deg) rotateX(7deg) scale(.714); }
  100%{ transform: translateZ(0) rotateY(0) rotateX(0) scale(.68); }
}
@keyframes plBite{
  0%{ transform:scale(0); opacity:0; }
  50%{ opacity:1; }
  65%{ transform:scale(1.4); }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes plImpact{
  0%{ transform:scale(.68); }
  45%{ transform:scale(.558); }
  100%{ transform:scale(.68); }
}
/* Blijft na de hap eerst een moment gewoon goed zichtbaar stilstaan (tot
   55%) zodat je echt ziet dat het ons logo is, en lost dan pas rustig op -
   geen snelle blur meer waar niemand het logo nog in herkent. */
@keyframes plSettle{
  0%{ transform:translateZ(0) scale(.68); opacity:1; }
  55%{ transform:translateZ(0) scale(.68); opacity:1; }
  100%{ transform:translateZ(30px) scale(.44); opacity:0; }
}
@keyframes plCrumb{
  0%{ transform:translate(0,0) rotate(0deg) scale(1); opacity:1; }
  12%{ opacity:1; }
  100%{ transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(0.2); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #preloader{transition:opacity 0.3s ease;}
  #preloader.hide{transform:none;}
  .pl-cube, .pl-bite{animation:none; opacity:1; transform:none;}
  .crumb{display:none;}
}

/* NAV: donker en glazig, blijft zichtbaar tijdens scrollen (bookend met de footer) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,14,16,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--dark-line);
  color:var(--dark-text);
}
nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:var(--maxw); margin:0 auto;
}
.logo{display:flex; align-items:center; gap:9px; font-size:19px; font-weight:800; letter-spacing:-0.02em; white-space:nowrap; flex-shrink:0; color:var(--dark-text);}
/* Zelfde "hap uit het blokje"-vorm als het climax-moment van de preloader,
   nu permanent in de nav - zo landt de openingsanimatie visueel in het
   echte merkmerk van de site in plaats van gewoon te verdwijnen. */
.logo-mark{
  width:26px; height:26px; border-radius:7px; flex-shrink:0;
  background: radial-gradient(circle at 76% 30%, transparent 0 5px, #3358ff 5.5px 100%);
}
.logo span{color:#7c93ff;}
.nav-links{display:flex; gap:24px; font-size:15px; font-weight:600;}
.nav-links a{opacity:0.78; transition:opacity .15s; white-space:nowrap; color:var(--dark-text);}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1; color:#7c93ff;}
.nav-cta{
  background:var(--accent); color:#ffffff; padding:10px 20px;
  border-radius:100px; font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0;
}
.burger{display:none; background:none; border:none; color:var(--dark-text); cursor:pointer; padding:6px;}
.burger svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round;}

/* PAGE HERO (inner pages) */
.page-hero{padding:64px 0 8px;}
.page-hero h1{font-size:clamp(30px,4.5vw,46px); margin-bottom:16px;}

/* HERO */
.hero{
  position:relative; overflow:hidden;
  padding:120px 0 90px;
}
.hero::before{
  content:""; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(51,88,255,0.14), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(51,88,255,0.07), transparent 40%);
  animation: heroFlow 16s ease-in-out infinite alternate;
}
@keyframes heroFlow{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(2%,-3%) scale(1.05); }
  100%{ transform:translate(-2%,2%) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none;}
}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center;}
.hero h1{font-size:clamp(38px,6vw,64px); margin-bottom:22px;}
.hero h1 .hl{color:var(--accent);}
.hero p{color:var(--text-dim); font-size:19px; max-width:480px; margin-bottom:32px;}
.btn-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-block; padding:14px 28px; border-radius:100px;
  font-weight:700; font-size:15px; transition:transform .15s, background .15s;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:#ffffff;}
.btn-ghost{border:1px solid var(--line); color:var(--text); background:var(--card);}
.stat-row{display:flex; gap:36px; margin-top:44px; flex-wrap:wrap;}
.stat b{display:block; font-size:26px; color:var(--accent-2);}
.stat span{font-size:13px; color:var(--text-dim);}

.phone-stack{position:relative; height:420px;}
.phone{
  position:absolute; width:190px; height:380px; border-radius:28px;
  background:linear-gradient(160deg,var(--card),#eef0fb);
  border:1px solid var(--line); box-shadow:0 30px 60px rgba(20,22,45,0.15);
  padding:14px;
}
.phone .bar{height:8px; width:40%; background:var(--line); border-radius:10px; margin-bottom:12px;}
.phone .fill{
  position:relative; height:calc(100% - 24px); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, rgba(51,88,255,0.30), rgba(51,88,255,0.04));
}
.phone.p1{left:0; top:20px; transform:rotate(-8deg);}
.phone.p2{left:120px; top:0; transform:rotate(4deg); z-index:2;}
.phone.p3{left:240px; top:40px; transform:rotate(-3deg);}
/* Abstracte "video-UI" bovenop de gradient, zodat de telefoonschermen niet
   leeg aanvoelen maar als een geladen contentfeed ogen (geen nepcontent,
   puur decoratieve chrome zoals een like/comment-kolom en bijschrift). */
.phone-actions{position:absolute; right:10px; bottom:44px; display:flex; flex-direction:column; gap:13px; align-items:center;}
.phone-actions span{width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.85); box-shadow:0 2px 6px rgba(20,22,45,0.18);}
.phone-caption{position:absolute; left:12px; right:46px; bottom:14px;}
.phone-caption i{display:block; width:34%; height:7px; border-radius:6px; background:rgba(255,255,255,0.9); margin-bottom:7px;}
.phone-caption b{display:block; width:78%; height:6px; border-radius:6px; background:rgba(255,255,255,0.5); font-weight:400;}
.phone-caption b + b{width:55%; margin-top:5px;}

/* CIJFERS */
.cijfers{background:var(--bg-alt);}
.cijfers-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px;}
.cijfer-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(16,16,20,0.05);
  padding:26px 22px; text-align:center;
}
.cijfer-card b{display:block; font-size:32px; font-weight:800; color:var(--accent); margin-bottom:8px;}
.cijfer-card span{font-size:13.5px; color:var(--text-dim);}
.cijfers-bron{margin-top:20px; font-size:12.5px; color:var(--text-dim);}

/* AANPAK */
.aanpak-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:40px;}
.aanpak-item{padding:0;}
.aanpak-item .num{
  font-size:14px; font-weight:800; color:var(--accent); margin-bottom:14px;
  display:inline-block; border:1px solid var(--line); width:34px; height:34px;
  border-radius:50%; text-align:center; line-height:32px;
}
.aanpak-item h3{font-size:17px; margin-bottom:8px;}
.aanpak-item p{color:var(--text-dim); font-size:14px;}

/* VERGELIJKING */
.vergelijk-table{width:100%; border-collapse:collapse; margin-top:40px; font-size:14.5px;}
.vergelijk-table th, .vergelijk-table td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line);}
.vergelijk-table th{color:var(--text-dim); font-size:13px; text-transform:uppercase; letter-spacing:0.04em; font-weight:700;}
.vergelijk-table td:first-child{color:var(--text-dim); width:28%;}
.vergelijk-table td.us{color:var(--text); font-weight:600;}
.vergelijk-table td.us:before{content:"✓ "; color:var(--accent); font-weight:800;}
.vergelijk-table th.us-col{color:var(--accent);}

/* BELIEF STATEMENTS: geen vinkjes/kruisjes, meer manifest dan spec-sheet */
.belief-list{margin-top:40px; max-width:640px;}
.belief-row{border-top:1px solid var(--line); padding:26px 0;}
.belief-row:first-child{border-top:none; padding-top:0;}
.belief-old{
  color:var(--text-dim); font-size:15px; margin-bottom:8px;
  text-decoration:line-through; text-decoration-color:var(--line); text-decoration-thickness:1.5px;
}
.belief-new{color:var(--text); font-size:clamp(20px,2.6vw,27px); font-weight:800; letter-spacing:-0.01em; line-height:1.25;}

/* TIKTOK EMBEDS: echte content tussen de tekst, breekt lange pagina's op,
   groot en verticaal zoals een Instagram Reel. TikTok's eigen embed.js lost
   de vm.tiktok.com share-links zelf client-side op (geen video-ID nodig) en
   bouwt de eigen TikTok-speler op: creatornaam, bijschrift en de like-,
   comment- en share-teller staan daar automatisch al in.
   LET OP: align-items MOET expliciet gezet zijn op de flex-containers hier -
   zonder dat kan de iframe die embed.js injecteert op hoogte 0 blijven
   hangen en toont TikTok in plaats daarvan "Video currently unavailable". */
.tiktok-gallery{
  margin-top:40px; display:flex; gap:20px;
  align-items:flex-start;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding-bottom:14px; margin-bottom:-14px; scrollbar-width:thin;
}
.tiktok-gallery > blockquote.tiktok-embed{margin:0 !important; flex:0 0 auto; scroll-snap-align:start;}
@media (min-width:1120px){
  .tiktok-gallery{justify-content:center; overflow-x:visible;}
}
.tiktok-single{margin-top:40px; display:flex; justify-content:center; align-items:flex-start;}

/* TESTIMONIAL */
.testimonial{
  max-width:680px; margin:0 auto; text-align:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:44px 36px; box-shadow:0 4px 24px rgba(16,16,20,0.06);
}
.testimonial .stars{color:#f5a623; font-size:20px; letter-spacing:3px; margin-bottom:18px;}
.testimonial-quote{font-size:clamp(17px,2.2vw,20px); font-weight:600; line-height:1.55; color:var(--text); margin-bottom:16px;}
.testimonial-author{font-size:14px; color:var(--text-dim); font-weight:700;}

/* LEAD MAGNET */
.leadmagnet{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 4px 24px rgba(16,16,20,0.05);
  padding:32px 34px;
}
.leadmagnet h3{font-size:19px; margin-bottom:6px;}
.leadmagnet p{color:var(--text-dim); font-size:14.5px; max-width:480px;}
.gids-form{display:flex; gap:10px; flex-wrap:wrap;}
.gids-form input{
  background:var(--bg); border:1px solid var(--line); color:var(--text);
  padding:12px 16px; border-radius:100px; font-size:14.5px; font-family:inherit; min-width:220px;
}
.gids-confirm{color:var(--accent); font-weight:700; font-size:14.5px;}

/* USP STRIP */
.usp-strip{padding:10px 0 50px;}
.usp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.usp-item{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px;
  box-shadow:0 4px 20px rgba(16,16,20,0.05);
}
.usp-item .ico{font-size:22px; line-height:1; color:var(--accent);}
.usp-item h4{font-size:15.5px; margin-bottom:4px;}
.usp-item p{font-size:13.5px; color:var(--text-dim);}

/* DIENSTEN */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px;}
.service-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 4px 20px rgba(16,16,20,0.05);
  padding:28px;
}
.service-card .ico{font-size:26px; margin-bottom:14px; color:var(--accent);}
.service-card h3{font-size:18px; margin-bottom:10px;}
.service-card p{color:var(--text-dim); font-size:14.5px;}
.service-card.highlight{
  grid-column:1 / -1; display:flex; align-items:center; gap:24px;
  border-color:var(--accent); background:linear-gradient(90deg, rgba(51,88,255,0.08), var(--card) 55%);
}
.service-card.highlight .ico{font-size:36px; margin-bottom:0;}
.service-card.highlight h3{font-size:19px;}

/* ICON SVGs (vervangen emoji's, consistente lijnstijl) */
.ico svg{
  width:1em; height:1em; display:block;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* PAKKETTEN */
.pakketten{background:var(--bg-alt);}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; align-items:stretch;}
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 4px 24px rgba(16,16,20,0.06);
  padding:32px 28px; display:flex; flex-direction:column;
}
.price-card.featured{
  border-color:var(--accent);
  background:linear-gradient(180deg, rgba(51,88,255,0.08), var(--card) 30%);
  position:relative;
}
.badge{
  position:absolute; top:-13px; left:28px; background:var(--accent); color:#ffffff;
  font-size:12px; font-weight:800; padding:5px 14px; border-radius:100px;
  text-transform:uppercase; letter-spacing:0.04em;
}
.price-card h3{font-size:20px; margin-bottom:4px;}
.price-card .tagline{color:var(--text-dim); font-size:14px; margin-bottom:20px;}
.price{font-size:36px; font-weight:800; margin-bottom:4px;}
.price span{font-size:14px; font-weight:500; color:var(--text-dim);}
.price-note{font-size:12.5px; color:var(--text-dim); margin-bottom:24px;}
.price-card ul{list-style:none; margin-bottom:28px; flex-grow:1;}
.price-card li{
  font-size:14.5px; padding:9px 0; border-top:1px solid var(--line);
  display:flex; gap:10px; align-items:flex-start;
}
.price-card li:first-child{border-top:none;}
.price-card li:before{content:"✓"; color:var(--accent); font-weight:800;}
.price-card .btn{text-align:center; width:100%;}

.custom-strip{
  margin-top:24px; background:var(--card); border:1px dashed var(--line);
  border-radius:var(--radius); padding:26px 30px; box-shadow:0 4px 20px rgba(16,16,20,0.05);
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.custom-strip h4{font-size:18px; margin-bottom:4px;}
.custom-strip p{color:var(--text-dim); font-size:14.5px;}

/* WERKWIJZE */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
.step{padding:0;}
.step .num{
  font-size:14px; font-weight:800; color:var(--accent); margin-bottom:14px;
  display:inline-block; border:1px solid var(--line); width:34px; height:34px;
  border-radius:50%; text-align:center; line-height:32px;
}
.step h3{font-size:17px; margin-bottom:8px;}
.step p{color:var(--text-dim); font-size:14px;}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.about-grid .lede{max-width:none; font-size:17px;}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:0 4px 20px rgba(16,16,20,0.05);}
.kpi b{font-size:24px; color:var(--accent-2); display:block;}
.kpi span{font-size:13px; color:var(--text-dim);}

/* TEAM */
.team-photo{
  width:64px; height:64px; border-radius:50%; margin-bottom:14px;
  background:linear-gradient(160deg, rgba(51,88,255,0.25), var(--card));
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:var(--accent-2);
}

/* FAQ */
.faq-list{max-width:760px; margin-top:36px;}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-item h3{font-size:16.5px; margin-bottom:8px;}
.faq-item p{color:var(--text-dim); font-size:14.5px;}

/* CTA */
.cta{
  text-align:center; background:linear-gradient(135deg, rgba(51,88,255,0.12), #ffffff 70%);
  border:1px solid var(--line);
  border-radius:28px; padding:70px 40px; margin:0 24px;
}
.cta h2{max-width:600px; margin:0 auto 18px;}
.cta p{color:var(--text-dim); max-width:480px; margin:0 auto 30px;}

/* CONTACT */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:6px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; background:var(--card); border:1px solid var(--line); color:var(--text);
  padding:13px 14px; border-radius:10px; font-size:14.5px; font-family:inherit;
}
.form-row textarea{resize:vertical; min-height:100px;}
.contact-info p{color:var(--text-dim); margin-bottom:22px;}
.contact-item{margin-bottom:20px;}
.contact-item b{display:block; font-size:14px; color:var(--text-dim); margin-bottom:4px;}
.contact-item a, .contact-item span{font-size:17px; font-weight:700;}

footer{background:var(--dark-bg); color:var(--dark-text-dim); padding:36px 0; font-size:13.5px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
footer .wrap > span{color:var(--dark-text);}
.footer-links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-links a{opacity:0.85; color:var(--dark-text);}
.footer-links a:hover{opacity:1; text-decoration:underline;}

/* COOKIE BANNER */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:100;
  max-width:640px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:22px 24px; box-shadow:0 20px 50px rgba(20,20,40,0.12);
  display:flex; flex-direction:column; gap:14px;
}
#cookie-banner p{font-size:13.5px; color:var(--text-dim);}
#cookie-banner p a{color:var(--text); text-decoration:underline;}
.cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-actions .btn{padding:10px 18px; font-size:13.5px;}

/* Nav klapt in tot burgermenu zodra er niet genoeg breedte is voor alle
   menu-items naast logo en CTA (voorkomt afbreken/overlap van het logo). */
@media (max-width:1180px){
  .nav-links, .nav-cta{display:none;}
  .nav-links.is-open{
    display:flex; flex-direction:column; gap:4px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(14,14,16,0.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--dark-line);
    box-shadow:0 20px 40px rgba(0,0,0,0.35);
    padding:14px 24px 20px;
  }
  .nav-links.is-open a{padding:12px 0; font-size:16px;}
  .nav-links.is-open .nav-cta-mobile{
    display:block; width:100%; text-align:center;
    margin-top:14px; padding:14px 20px; font-size:16px;
  }
  .burger{display:block;}
}

@media (max-width:880px){
  .hero-inner, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .phone-stack{height:280px; margin-top:20px;}
  .services-grid, .price-grid, .usp-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .service-card.highlight{flex-direction:column; align-items:flex-start;}
  .cijfers-grid{grid-template-columns:1fr 1fr;}
  .aanpak-grid{grid-template-columns:1fr;}
  .vergelijk-table, .vergelijk-table tr, .vergelijk-table td, .vergelijk-table th{display:block; width:auto;}
  .vergelijk-table tr:first-child{display:none;}
  .vergelijk-table tr:not(:first-child){
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; margin-bottom:12px;
  }
  .vergelijk-table td{border:none; padding:4px 0; white-space:normal;}
  .vergelijk-table td:first-child{
    font-size:12px; text-transform:uppercase; letter-spacing:0.05em; font-weight:800;
    color:var(--text-dim); padding-bottom:8px;
  }
  .vergelijk-table td:nth-child(2){color:var(--text-dim); padding-left:18px; position:relative;}
  .vergelijk-table td:nth-child(2):before{content:"✕"; position:absolute; left:0; color:var(--text-dim); font-weight:800;}
  .vergelijk-table td.us{padding-left:18px; position:relative;}
  .vergelijk-table td.us:before{position:absolute; left:0;}
  .leadmagnet{flex-direction:column; align-items:flex-start;}
}

/* SCROLL REVEAL: vloeiend voor content, snel/snappy voor USP's */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

.reveal-fast{
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity 0.4s cubic-bezier(.34,1.56,.64,1), transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.reveal-fast.is-visible{opacity:1; transform:translateY(0) scale(1);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-fast{opacity:1; transform:none; transition:none;}
}

/* STICKY MOBIELE CTA: alleen op telefoonformaat, staat de rest van de tijd
   uit de weg. Verdwijnt zelf als het uitklapmenu open staat (main.js zet
   dan body.menu-open), zodat ze elkaar nooit overlappen. */
.mobile-sticky-cta{display:none;}
@media (max-width:680px){
  .mobile-sticky-cta{
    display:block; position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
    background:var(--accent); color:#ffffff; text-align:center;
    padding:15px; border-radius:100px; font-weight:700; font-size:15px;
    box-shadow:0 12px 30px rgba(51,88,255,0.4);
  }
  body.menu-open .mobile-sticky-cta{display:none;}
  body:has(.mobile-sticky-cta){padding-bottom:76px;}
}