/* ==========================================================================
   WIN WIN ONLINE MARKETING — DESIGN SYSTEM v3
   --------------------------------------------------------------------------
   Opzet: warm-licht als basis, met donkere "ankersecties" die het ritme van
   de pagina bepalen (hero, cijferband, cases, over, afsluiter). Elke sectie
   kan van thema wisselen via .theme-dark — componenten lezen alleen
   semantische tokens en werken daardoor op beide achtergronden.

   0.  Tokens & thema's
   1.  Reset & basis
   2.  Typografie & layout-utilities
   3.  Knoppen, chips, badges
   4.  Navigatie + scrollprogressie
   5.  Hero & page-hero
   6.  Marquees
   7.  Sectiekoppen
   8.  Pijn-erkenning
   9.  Stats
   10. Diensten
   11. Proces-tijdlijn & processtappen
   12. USP-rijen & garanties
   13. Cases
   14. Reviews
   15. Oprichter / over
   16. Trust
   17. Tarieven
   18. FAQ
   19. CTA-band
   20. Footer
   21. Sticky mobiele CTA
   22. Formulieren
   23. Calculator
   24. Voor wie / gerelateerd / deliverables
   25. Animatiebasis & reduced motion
   ========================================================================== */

/* ==========================================================================
   0. TOKENS & THEMA'S
   ========================================================================== */
:root{
  /* --- Merkkleuren (thema-onafhankelijk) --- */
  --orange:      #F47B20;
  --orange-600:  #DC6A11;
  --orange-700:  #B85608;
  --orange-300:  #FFA057;
  --orange-glow: rgba(244,123,32,0.34);

  --good: #1F9D63;
  --bad:  #D0483A;

  /* --- LICHT THEMA (basis) --- */
  --bg:          #FBFAF8;
  --bg-alt:      #F3F1EC;
  --surface:     #FFFFFF;
  --surface-2:   #F7F5F1;
  --surface-3:   #EFECE5;

  --line:        #E8E4DC;
  --line-mid:    #D8D2C7;
  --line-strong: #BEB7A9;

  --t1: #14120F;
  --t2: #4E4B43;
  --t3: #7E7A71;

  /* Oranje dat leesbaar is op licht */
  --accent: #B85608;
  --accent-soft: rgba(244,123,32,0.10);
  --accent-line: rgba(244,123,32,0.28);

  --shadow-sm: 0 1px 2px rgba(20,18,15,0.05), 0 2px 8px rgba(20,18,15,0.04);
  --shadow:    0 4px 12px rgba(20,18,15,0.06), 0 18px 40px rgba(20,18,15,0.07);
  --shadow-lg: 0 8px 20px rgba(20,18,15,0.08), 0 32px 70px rgba(20,18,15,0.11);

  /* --- Vorm & maat --- */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --container: 1220px;
  --gutter: 22px;
  --nav-h: 74px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* --- DONKER THEMA — per sectie toe te passen --- */
.theme-dark{
  --bg:          #0C0C10;
  --bg-alt:      #101016;
  --surface:     #17171D;
  --surface-2:   #1D1D25;
  --surface-3:   #24242D;

  --line:        rgba(255,255,255,0.09);
  --line-mid:    rgba(255,255,255,0.15);
  --line-strong: rgba(255,255,255,0.26);

  --t1: #F6F4F2;
  --t2: #C4C1C9;
  --t3: #918E99;

  --accent: #FFA057;
  --accent-soft: rgba(244,123,32,0.13);
  --accent-line: rgba(244,123,32,0.30);

  --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
  --shadow:    0 16px 44px rgba(0,0,0,0.42);
  --shadow-lg: 0 34px 80px rgba(0,0,0,0.52);

  background:var(--bg);
  color:var(--t1);
}

/* ==========================================================================
   1. RESET & BASIS
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.js-on{ scroll-behavior:auto; }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg);
  color:var(--t1);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip i.p.v. hidden: hidden maakt van body een scrollcontainer en
     breekt daarmee position:sticky verderop in de pagina. */
  overflow-x:clip;
  font-feature-settings:'ss01' 1,'cv02' 1;
}

img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font:inherit; font-size:1rem; color:inherit; }
::selection{ background:var(--orange); color:#fff; }

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

section{ position:relative; scroll-margin-top:calc(var(--nav-h) + 20px); }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
  z-index:1;
}
.container-narrow{ max-width:860px; margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--orange); color:#fff;
  padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  font-weight:700; z-index:5000;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   2. TYPOGRAFIE & LAYOUT-UTILITIES
   ========================================================================== */
h1,h2,h3,h4,h5{
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.03em;
  text-wrap:balance;
  color:var(--t1);
}
h1{ font-size:clamp(2.35rem, 5.4vw, 4rem); letter-spacing:-0.038em; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.8rem); letter-spacing:-0.032em; }
h3{ font-size:clamp(1.12rem, 1.6vw, 1.35rem); letter-spacing:-0.022em; }
h4{ font-size:1rem; letter-spacing:-0.015em; }

p{ text-wrap:pretty; }

/* Accent op het sleutelwoord van een kop: alleen kleur, geen ander lettertype
   en geen cursief. Rustiger, en het oog landt nog steeds op de belofte. */
.accent{ color:var(--accent); }

.lead{
  font-size:clamp(1.03rem, 1.25vw, 1.18rem);
  color:var(--t2);
  line-height:1.62;
  max-width:62ch;
}
.muted{ color:var(--t3); }
.small{ font-size:0.86rem; }
.center{ text-align:center; }

/* Eyebrow: klein oriëntatielabel boven elke kop */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:'';
  width:22px; height:2px;
  background:var(--orange);
  border-radius:2px;
  flex-shrink:0;
}

/* Sectie-ritme */
.sec{ padding:clamp(70px, 8.5vw, 122px) 0; background:var(--bg); }
.sec-tight{ padding:clamp(50px, 6vw, 82px) 0; background:var(--bg); }
.sec-alt{ background:var(--bg-alt); }
.sec-line-top{ border-top:1px solid var(--line); }
.sec-line-bottom{ border-bottom:1px solid var(--line); }

/* Zachte oranje gloed als sfeerlaag (alleen zinvol op donkere secties) */
.glow-wrap{ position:relative; overflow:hidden; }
.glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(64px);
  z-index:0;
}
.glow-a{ width:640px; height:640px; top:-300px; right:-200px; background:radial-gradient(circle, rgba(244,123,32,0.26), transparent 66%); }
.glow-b{ width:520px; height:520px; bottom:-280px; left:-180px; background:radial-gradient(circle, rgba(244,123,32,0.16), transparent 66%); }

/* ==========================================================================
   3. KNOPPEN, CHIPS, BADGES
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 25px;
  border-radius:999px;
  font-weight:600;
  font-size:0.94rem;
  letter-spacing:-0.01em;
  line-height:1;
  white-space:nowrap;
  isolation:isolate;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  will-change:transform;
}
.btn svg{ flex-shrink:0; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn .arrow{ transition:transform .35s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

/* Primair — de enige knop met gloed, op elke achtergrond identiek.
   Eén visueel unieke actie per scherm trekt de klik. */
.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 6px 20px -6px var(--orange-glow);
}
.btn-primary:hover{
  background:var(--orange-600);
  transform:translateY(-2px);
  box-shadow:0 14px 32px -8px var(--orange-glow);
}

/* Secundair — neemt de kleur van het thema over */
.btn-outline{
  background:transparent;
  border:1px solid var(--line-mid);
  color:var(--t1);
}
.btn-outline:hover{
  border-color:var(--line-strong);
  background:var(--surface-2);
  transform:translateY(-2px);
}
.theme-dark .btn-outline:hover{ background:rgba(255,255,255,0.07); }

.btn-solid{ background:var(--t1); color:var(--bg); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }

.btn-sm{ padding:10px 19px; font-size:0.87rem; }
.btn-lg{ padding:17px 32px; font-size:1rem; }
.btn-block{ width:100%; }

/* Legacy-aliassen uit de eerste opzet */
.btn-dark{ background:var(--t1); color:var(--bg); }
.btn-ghost, .btn-glass{ background:transparent; border:1px solid var(--line-mid); color:var(--t1); }
.btn-ghost:hover, .btn-glass:hover{ border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-2px); }

.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:0.69rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:999px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
}

/* Badge voor iets wat inbegrepen is: groen in plaats van oranje, zodat het
   losstaat van de merkkleur die overal een prijs of dienst markeert. */
.tag-free{
  background:rgba(31,157,99,0.10);
  border-color:rgba(31,157,99,0.30);
  color:#17794C;
}
.theme-dark .tag-free{ color:#4ED28C; background:rgba(62,207,142,0.12); border-color:rgba(62,207,142,0.28); }
.tag-neutral{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--t3);
}

/* Levende status-indicator */
.pulse-dot{
  position:relative;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--good);
  flex-shrink:0;
}
.pulse-dot::after{
  content:'';
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid var(--good);
  opacity:0;
  animation:pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring{
  0%   { transform:scale(.55); opacity:.8; }
  70%  { transform:scale(1.5); opacity:0; }
  100% { opacity:0; }
}

/* ==========================================================================
   4. NAVIGATIE + SCROLLPROGRESSIE
   De navigatie is altijd donker: als vaste balk boven wisselende secties
   blijft hij daarmee herkenbaar en hoeft de tekstkleur nooit te wisselen.
   ========================================================================== */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.scrolled{
  background:rgba(12,12,16,0.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:rgba(255,255,255,0.09);
  box-shadow:0 8px 30px rgba(0,0,0,.28);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:var(--container);
  margin-inline:auto;
  padding:17px var(--gutter);
  transition:padding .4s var(--ease);
}
.nav.scrolled .nav-inner{ padding:11px var(--gutter); }

.brand-group{ display:flex; align-items:center; gap:14px; min-width:0; }
.logo{ display:flex; flex-direction:column; line-height:1; }
.logo-mark{
  font-weight:800;
  font-size:1.3rem;
  letter-spacing:-0.045em;
  color:#F6F4F2;
  transition:font-size .4s var(--ease);
}
.logo-mark span{ color:var(--orange); }
.logo-sub{
  font-size:0.57rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin-top:4px;
}
.nav.scrolled .logo-mark{ font-size:1.13rem; }

/* Beeldlogo: hoogte vast, breedte volgt de verhouding van het bestand */
.logo img{ height:42px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.scrolled .logo img{ height:34px; }
.footer-brand img{ height:40px; width:auto; display:block; }

.nav-links{
  display:none;
  align-items:center;
  gap:2px;
  font-size:0.89rem;
  font-weight:500;
}
.nav-links a{
  position:relative;
  padding:9px 14px;
  border-radius:999px;
  color:rgba(255,255,255,0.74);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,0.08); }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:50%; bottom:3px;
  transform:translateX(-50%);
  width:15px; height:2px;
  border-radius:2px;
  background:var(--orange);
}

.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-cta .btn{ display:none; }

.nav-rating{
  display:none;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  font-size:0.78rem;
  font-weight:600;
  color:rgba(255,255,255,0.86);
  background:rgba(255,255,255,0.05);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.nav-rating:hover{ border-color:rgba(244,123,32,.55); background:rgba(244,123,32,.12); }
.nav-rating b{ color:#fff; font-weight:700; }
.nav-rating-stars{ position:relative; display:inline-block; font-size:0.72rem; letter-spacing:1.6px; line-height:1; }
.nav-rating-stars .stars-bg{ color:rgba(255,255,255,0.22); }
.nav-rating-stars .stars-fg{ position:absolute; top:0; left:0; overflow:hidden; width:96%; color:var(--orange); white-space:nowrap; }

.nav-burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
}
.nav-burger span{
  height:1.5px; width:17px;
  background:#fff;
  border-radius:2px;
  transition:transform .3s var(--ease-out), opacity .2s var(--ease);
}
.nav.open .nav-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav-mobile{
  display:none;
  flex-direction:column;
  background:rgba(12,12,16,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.09);
  padding:10px var(--gutter) 26px;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
}
.nav.open .nav-mobile{ display:flex; }
.nav-mobile a{
  padding:15px 2px;
  font-weight:500;
  font-size:1.02rem;
  color:rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.nav-mobile a.active{ color:var(--orange-300); }
.nav-mobile .btn{ margin-top:18px; width:100%; }

/* Leesvoortgang: zichtbare voortgang houdt de scroll op gang */
.scroll-progress{
  position:absolute;
  left:0; bottom:-1px;
  height:2px;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--orange-700), var(--orange), var(--orange-300));
  z-index:2;
}

@media(min-width:1000px){
  .nav-links{ display:flex; }
  .nav-rating{ display:inline-flex; }
  .nav-cta .btn{ display:inline-flex; }
  .nav-burger{ display:none; }
  .nav-mobile{ display:none !important; }
}

/* ==========================================================================
   5. HERO & PAGE-HERO
   ========================================================================== */
.hero, .page-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 78% -12%, rgba(244,123,32,0.20), transparent 62%),
    var(--bg);
}
.hero{ padding:calc(var(--nav-h) + 58px) 0 66px; }
.page-hero{ padding:calc(var(--nav-h) + 56px) 0 60px; }

/* Fijn raster: geeft diepte en een subtiele "dashboard"-associatie */
.hero::before, .page-hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(ellipse 90% 68% at 50% 30%, #000 18%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 68% at 50% 30%, #000 18%, transparent 78%);
  pointer-events:none;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr;
  gap:46px;
  align-items:center;
}
.hero-copy{ max-width:660px; }
.hero h1{ margin-bottom:20px; }
.hero .lead{ margin-bottom:30px; }

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:13px;
  margin-bottom:20px;
}

/* Risico-omkering direct onder de knop: precies waar de twijfel ontstaat */
.hero-reassure{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:0.83rem;
  color:var(--t3);
}
.hero-reassure span{ display:inline-flex; align-items:center; gap:7px; }
.hero-reassure svg{ color:var(--good); flex-shrink:0; }

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 22px;
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero-trust-item{ display:flex; align-items:center; gap:9px; font-size:0.82rem; color:var(--t3); }
.hero-trust-item b{ color:var(--t1); font-weight:700; font-size:0.92rem; }
.hero-trust-sep{ width:1px; height:24px; background:var(--line-mid); display:none; }

.page-hero h1{ font-size:clamp(2.15rem, 4.6vw, 3.3rem); margin-bottom:18px; max-width:18ch; }
.page-hero .lead{ margin-bottom:4px; }
.page-hero .hero-actions{ margin-top:30px; }

.breadcrumb{ font-size:0.78rem; color:var(--t3); margin-bottom:20px; }
.breadcrumb a{ transition:color .2s var(--ease); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb span{ margin:0 8px; opacity:.5; }

/* Glazen resultaatpaneel — maakt "meetbare winst" concreet en visueel */
.hero-panel{
  position:relative;
  border-radius:var(--r-xl);
  padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.03) 42%, rgba(244,123,32,.26));
  box-shadow:var(--shadow-lg);
}
.hero-panel-inner{
  border-radius:calc(var(--r-xl) - 1px);
  background:linear-gradient(165deg, rgba(29,29,37,.95), rgba(15,15,20,.97));
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  padding:24px;
  overflow:hidden;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.panel-title{ font-size:0.82rem; font-weight:700; }
.panel-sub{ font-size:0.7rem; color:var(--t3); margin-top:2px; }
.panel-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:#4ED28C;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(62,207,142,.12);
  border:1px solid rgba(62,207,142,.24);
}
.panel-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:18px; }
.panel-metric{
  padding:14px 15px;
  border-radius:var(--r);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
}
.panel-metric-label{
  font-size:0.66rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--t3);
  margin-bottom:7px;
}
.panel-metric-value{ font-size:1.55rem; font-weight:700; letter-spacing:-0.045em; line-height:1; color:var(--t1); }
.panel-metric-value.up{ color:var(--orange-300); }
.panel-metric-delta{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:7px;
  font-size:0.71rem; font-weight:600;
  color:#4ED28C;
}
.panel-chart{
  position:relative;
  height:82px;
  border-radius:var(--r);
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  padding:11px 13px;
  overflow:hidden;
}
.panel-chart svg{ width:100%; height:100%; overflow:visible; }
.chart-line{ fill:none; stroke:url(#chartGrad); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.chart-area{ fill:url(#chartFill); opacity:.55; }
.panel-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px;
  font-size:0.71rem;
  color:var(--t3);
}
.panel-foot em{ font-style:normal; color:var(--t2); }

@media(min-width:640px){ .hero-trust-sep{ display:block; } }
@media(min-width:1000px){
  .hero{ padding:calc(var(--nav-h) + 84px) 0 92px; }
  .page-hero{ padding:calc(var(--nav-h) + 76px) 0 78px; }
  .hero-inner{ grid-template-columns:1.06fr 0.94fr; gap:60px; }
}

/* ==========================================================================
   6. MARQUEES
   ========================================================================== */
.marquee-section{
  padding:30px 0;
  background:var(--bg-alt);
  border-block:1px solid var(--line);
}
.marquee-label{
  text-align:center;
  font-size:0.67rem;
  font-weight:700;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:20px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 44s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track.reverse{ animation-name:marquee-reverse; animation-duration:52s; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes marquee-reverse{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

.logo-chip{
  display:flex; align-items:center; justify-content:center;
  height:50px; padding:0 38px;
  font-weight:700; font-size:1rem;
  letter-spacing:0.04em;
  color:var(--t3);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.logo-chip:hover{ color:var(--t2); }

.cert-chip, .tool-chip{
  display:flex; align-items:center; gap:11px;
  height:54px; margin:0 6px; padding:0 19px;
  white-space:nowrap;
  font-weight:600; font-size:0.87rem;
  color:var(--t2);
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  transition:border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.cert-chip:hover, .tool-chip:hover{ border-color:var(--line-mid); color:var(--t1); box-shadow:var(--shadow-sm); }
.cert-chip .brand-icon, .tool-chip .brand-icon{ flex-shrink:0; }

/* ==========================================================================
   7. SECTIEKOPPEN
   ========================================================================== */
.section-head{ max-width:660px; margin-bottom:48px; }
.section-head p{ color:var(--t2); font-size:1.02rem; margin-top:14px; max-width:58ch; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center p{ margin-inline:auto; }
.section-head.center .eyebrow::before{ display:none; }

.section-head-row{ display:flex; flex-direction:column; gap:22px; margin-bottom:48px; }
.section-head-row .section-head{ margin-bottom:0; }
@media(min-width:900px){
  .section-head-row{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
}

/* ==========================================================================
   8. PIJN-ERKENNING (verlies weegt zwaarder dan winst)
   ========================================================================== */
.pain-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.pain-card{
  position:relative;
  padding:26px 24px 24px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.pain-card::before{
  content:'';
  position:absolute;
  left:0; top:24px; bottom:24px;
  width:2px;
  background:linear-gradient(180deg, var(--bad), transparent);
  opacity:.5;
}
.pain-card:hover{ transform:translateY(-3px); border-color:var(--line-mid); box-shadow:var(--shadow); }
.pain-icon{
  width:34px; height:34px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(208,72,58,0.09);
  border:1px solid rgba(208,72,58,0.2);
  color:var(--bad);
  margin-bottom:16px;
}
/* Variant voor beloftes in plaats van bezwaren: dezelfde kaart, merkkleur. */
.pain-card.strength::before{ background:linear-gradient(180deg, var(--orange), transparent); opacity:.75; }
.pain-card.strength .pain-icon{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent);
}
.pain-quote{
  font-size:1.01rem;
  font-weight:600;
  color:var(--t1);
  line-height:1.48;
  margin-bottom:11px;
  letter-spacing:-0.015em;
}
.pain-card p{ font-size:0.89rem; color:var(--t2); }
/* Antwoordregel: pijn → directe geruststelling */
.pain-answer{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line-mid);
  font-size:0.85rem;
  font-weight:600;
  color:var(--accent);
}
.pain-answer svg{ flex-shrink:0; margin-top:3px; }
@media(min-width:760px){ .pain-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(min-width:1100px){ .pain-grid{ grid-template-columns:repeat(4,1fr); } }

/* ==========================================================================
   9. STATS
   ========================================================================== */
.stats{ padding:clamp(52px,6.5vw,80px) 0; background:var(--bg); }
.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{ background:var(--bg); padding:26px 18px; text-align:center; transition:background-color .35s var(--ease); }
.stat:hover{ background:var(--surface-2); }
.theme-dark .stat:hover{ background:var(--surface); }
.stat-num{
  font-size:clamp(1.95rem, 3.4vw, 2.75rem);
  font-weight:700;
  letter-spacing:-0.05em;
  line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.theme-dark .stat-num{ color:var(--orange-300); }
.stat-label{ margin-top:11px; font-size:0.82rem; font-weight:500; color:var(--t3); line-height:1.45; }
@media(min-width:820px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } .stat{ padding:32px 20px; } }

/* ==========================================================================
   10. DIENSTEN
   ========================================================================== */
.services{ padding:clamp(70px,8.5vw,122px) 0; background:var(--bg); }
.service-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.service-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 26px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
  transition:transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
/* Cursor-volgende gloed (JS zet --mx/--my) — beloont interactie subtiel */
.service-card::before{
  content:'';
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), var(--accent-soft), transparent 62%);
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:-1;
  pointer-events:none;
}
.service-card:hover{ transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow); }
.service-card:hover::before{ opacity:1; }

.service-icon{
  width:46px; height:46px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  margin-bottom:18px;
  flex-shrink:0;
  transition:transform .45s var(--ease-out);
}
.service-card:hover .service-icon{ transform:scale(1.06) rotate(-3deg); }
.service-card h3{ margin-bottom:8px; }
.service-card > p{ color:var(--t2); font-size:0.92rem; flex-grow:1; }

.service-outcome{
  display:flex; align-items:center; gap:8px;
  margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
  font-size:0.82rem;
  font-weight:600;
  color:var(--t2);
}
.service-outcome svg{ color:var(--orange); flex-shrink:0; }
.service-link{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:16px;
  font-size:0.86rem; font-weight:600;
  color:var(--accent);
}
.service-link svg{ transition:transform .35s var(--ease-out); }
.service-card:hover .service-link svg{ transform:translateX(4px); }
.service-card .tag{ align-self:flex-start; margin-bottom:14px; }

@media(min-width:760px){ .service-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(min-width:1100px){ .service-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1000px){ .service-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.services-teaser-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  max-width:680px; margin:0 auto 32px;
}
.service-tile{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
  padding:24px 16px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  transition:transform .35s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.service-tile:hover{ transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-sm); }
.service-tile h3{ font-size:0.92rem; }
.service-tile .service-icon{ margin-bottom:0; width:44px; height:44px; }

/* Groepslabel boven een dienstenraster */
.group-label{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--t3);
  margin-bottom:16px;
}
.group-label::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}

.services-footnote{ text-align:center; margin-top:28px; font-size:0.86rem; color:var(--t2); }
.services-footnote a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }


/* ==========================================================================
   11. PROCES-TIJDLIJN & PROCESSTAPPEN
   ========================================================================== */
.timeline{ position:relative; display:flex; flex-direction:column; }
/* De lijn vult mee met de scroll: het traject wordt zichtbaar eindig,
   wat onzekerheid over "waar begin ik aan" wegneemt. */
.timeline-rail{
  position:absolute;
  left:23px; top:14px; bottom:14px;
  width:2px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}
.timeline-fill{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--orange-300), var(--orange), var(--orange-700));
  transform:scaleY(0);
  transform-origin:50% 0;
}
.tl-step{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:20px;
  padding-bottom:38px;
}
.tl-step:last-child{ padding-bottom:0; }
.tl-dot{
  position:relative;
  z-index:2;
  width:48px; height:48px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem;
  color:var(--t3);
  background:var(--bg);
  border:1px solid var(--line-mid);
  transition:color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
  flex-shrink:0;
}
.sec-alt .tl-dot{ background:var(--bg-alt); }
.tl-step.is-active .tl-dot{
  color:#fff;
  background:var(--orange);
  border-color:transparent;
  box-shadow:0 0 0 5px var(--accent-soft);
}
.tl-body{ padding-top:5px; }
.tl-when{
  display:inline-block;
  font-size:0.67rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:7px;
}
.tl-body h3{ margin-bottom:8px; }
.tl-body p{ color:var(--t2); font-size:0.93rem; max-width:56ch; }
.tl-meta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:13px;
  padding:6px 13px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--line);
  font-size:0.77rem;
  color:var(--t2);
}
.tl-meta svg{ color:var(--orange); flex-shrink:0; }
@media(min-width:900px){ .tl-step{ grid-template-columns:56px 1fr; gap:26px; padding-bottom:48px; } }

/* Processtappen in raster (dienstpagina's) */
.process-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.process-step{
  display:flex; gap:17px;
  padding:24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.process-step:hover{ border-color:var(--line-mid); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.process-num{
  width:38px; height:38px;
  border-radius:11px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.88rem;
  flex-shrink:0;
}
.process-step h3{ font-size:1rem; margin-bottom:6px; }
.process-step p{ color:var(--t2); font-size:0.89rem; }
@media(min-width:820px){ .process-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media(min-width:1100px){ .process-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   12. USP-RIJEN & GARANTIES
   ========================================================================== */
.usps-extended{ padding:clamp(70px,8.5vw,122px) 0; background:var(--bg); }
.usp-layout{ display:grid; grid-template-columns:1fr; gap:42px; }
.usp-sticky{ align-self:start; }
.usp-list{ display:flex; flex-direction:column; }
.usp-row{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.usp-row:first-child{ padding-top:0; }
.usp-row:last-child{ border-bottom:0; padding-bottom:0; }
.usp-row-num{
  font-size:0.74rem;
  font-weight:700;
  letter-spacing:0.16em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.usp-row h3{ font-size:1.15rem; margin:4px 0 8px; }
.usp-row p{ color:var(--t2); font-size:0.94rem; max-width:60ch; }
.usp-row p a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@media(min-width:900px){
  .usp-layout{ grid-template-columns:0.85fr 1.15fr; gap:66px; }
  .usp-sticky{ position:sticky; top:calc(var(--nav-h) + 36px); }
  .usp-row{ grid-template-columns:74px 1fr; gap:22px; padding:28px 0; }
  .usp-row-num{ padding-top:5px; }
}

.guarantee-card{
  margin-top:28px;
  padding:24px;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line-mid);
  box-shadow:var(--shadow-sm);
}
.guarantee-card h4{ display:flex; align-items:center; gap:9px; margin-bottom:15px; font-size:0.94rem; }
.guarantee-card h4 svg{ color:var(--orange); }
.guarantee-list{ display:flex; flex-direction:column; gap:11px; }
.guarantee-list li{ display:flex; align-items:flex-start; gap:10px; font-size:0.87rem; color:var(--t2); }
.guarantee-list svg{ color:var(--good); flex-shrink:0; margin-top:3px; }

/* ==========================================================================
   13. CASES
   ========================================================================== */
.cases{ padding:clamp(70px,8.5vw,122px) 0; background:var(--bg); }
.case-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.case-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-xl);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform .45s var(--ease-out), border-color .35s var(--ease), box-shadow .45s var(--ease-out);
}
.case-card:hover{ transform:translateY(-4px); border-color:var(--line-mid); box-shadow:var(--shadow); }
.case-top{
  padding:28px 28px 24px;
  background:
    radial-gradient(500px 220px at 100% 0%, var(--accent-soft), transparent 60%),
    var(--surface-2);
  border-bottom:1px solid var(--line);
}
.case-top .tag{ margin-bottom:15px; }
.case-top h3{ margin-bottom:9px; }
.case-top p{ color:var(--t2); font-size:0.91rem; }
.case-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
.case-stats > *{ background:var(--surface); padding:20px 16px; text-align:center; }
.case-stat-num{
  font-size:1.5rem; font-weight:700; letter-spacing:-0.045em;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
.theme-dark .case-stat-num{ color:var(--orange-300); }
.case-stat-label{ font-size:0.71rem; color:var(--t3); font-weight:600; margin-top:6px; letter-spacing:0.03em; }
.case-body{ padding:24px 28px; }
.case-body ul{ display:flex; flex-direction:column; gap:10px; }
.case-body li{ display:flex; gap:10px; font-size:0.89rem; color:var(--t2); }
.case-body li svg{ color:var(--orange); flex-shrink:0; margin-top:4px; }
.case-label{ font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--t3); margin-bottom:6px; }
.case-body p + .case-label{ margin-top:16px; }
.case-note{ padding:16px 28px 24px; font-size:0.77rem; color:var(--t3); font-style:italic; }
.case-body .case-note{ padding:14px 0 0; }
@media(min-width:900px){ .case-grid{ grid-template-columns:1fr 1fr; } }

.case-teaser-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:760px){ .case-teaser-grid{ grid-template-columns:1fr 1fr; } }
.case-teaser-card{
  display:block;
  padding:28px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  transition:transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.case-teaser-card:hover{ transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow); }
.case-teaser-card h3{ font-size:1.03rem; margin:13px 0 17px; }
.case-teaser-stat{ font-size:1.95rem; font-weight:700; letter-spacing:-0.05em; color:var(--orange); }
.case-teaser-stat-label{ font-size:0.73rem; color:var(--t3); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; }

/* ==========================================================================
   14. REVIEWS
   ========================================================================== */
.reviews{ padding:clamp(70px,8.5vw,122px) 0; background:var(--bg); }
.rating-banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:370px;
  margin:0 auto 42px;
  padding:26px 32px;
  background:var(--surface);
  border:1px solid var(--line-mid);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  text-align:center;
}
.rating-score{ font-size:3rem; font-weight:700; line-height:1; letter-spacing:-0.05em; color:var(--t1); }
.rating-stars{ position:relative; display:inline-block; font-size:1.35rem; letter-spacing:4px; line-height:1; margin-top:6px; }
.rating-stars .stars-bg{ color:var(--line-mid); }
.rating-stars .stars-fg{ position:absolute; top:0; left:0; overflow:hidden; width:96%; color:var(--orange); white-space:nowrap; }
.rating-meta strong{ display:block; font-size:0.88rem; font-weight:600; margin-top:8px; }
.rating-meta span{ display:block; font-size:0.73rem; color:var(--t3); font-style:italic; margin-top:5px; }

.review-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.review-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 26px;
  display:flex;
  flex-direction:column;
  gap:15px;
  overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.review-card:hover{ transform:translateY(-3px); border-color:var(--line-mid); box-shadow:var(--shadow); }
.stars{ display:flex; gap:3px; color:var(--orange); font-size:0.93rem; letter-spacing:2px; }
.review-card p.quote{ color:var(--t1); font-size:0.97rem; line-height:1.58; flex-grow:1; }
.review-author{ display:flex; align-items:center; gap:12px; }
.review-avatar{
  width:40px; height:40px; border-radius:50%;
  background:var(--surface-3);
  border:1px solid var(--line-mid);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.8rem;
  flex-shrink:0;
}
.review-name{ font-weight:600; font-size:0.89rem; }
.review-role{ font-size:0.76rem; color:var(--t3); }
.review-badge{
  align-self:flex-start;
  font-size:0.68rem;
  color:var(--t3);
  font-style:italic;
  padding:4px 10px;
  border-radius:999px;
  border:1px dashed var(--line-mid);
}
@media(min-width:960px){ .review-grid{ grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   15. OPRICHTER / OVER
   ========================================================================== */
.about-dark{ padding:clamp(70px,8.5vw,122px) 0; position:relative; overflow:hidden; background:var(--bg); }
.about-inner{ position:relative; z-index:1; }
.about-grid{ display:grid; grid-template-columns:1fr; gap:42px; align-items:center; }
.about-text p{ color:var(--t2); margin-bottom:16px; font-size:1rem; }
.about-quote{
  border-left:2px solid var(--orange);
  padding:2px 0 2px 22px;
  margin:26px 0;
  font-size:1.22rem;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-0.02em;
  color:var(--t1);
}
.about-facts{ display:grid; grid-template-columns:1fr; gap:14px; }
.about-fact{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:20px 22px;
  transition:border-color .3s var(--ease), transform .35s var(--ease-out);
}
.about-fact:hover{ border-color:var(--line-mid); transform:translateY(-2px); }
.about-fact h4{ font-size:0.89rem; color:var(--accent); margin-bottom:6px; }
.about-fact p{ color:var(--t2); font-size:0.86rem; }

.about-teaser-text{ max-width:660px; margin:0 auto; text-align:center; }
.about-teaser-text p{ color:var(--t2); font-size:1.01rem; margin-bottom:22px; }
.about-teaser-text .about-quote{ text-align:left; }

/* Portretkaart */
.founder-card{
  position:relative;
  border-radius:var(--r-xl);
  padding:1px;
  background:linear-gradient(165deg, var(--line-strong), var(--accent-line));
  box-shadow:var(--shadow-lg);
}
.founder-inner{ border-radius:calc(var(--r-xl) - 1px); background:var(--surface); overflow:hidden; }
.founder-photo{
  position:relative;
  aspect-ratio:4/4.3;
  background:
    radial-gradient(300px 240px at 50% 18%, var(--accent-soft), transparent 62%),
    var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  color:var(--t3);
  overflow:hidden;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-photo-ph{ text-align:center; padding:24px; }
.founder-photo-ph .initials{ font-size:3.2rem; font-weight:700; letter-spacing:-0.05em; color:var(--line-mid); line-height:1; }
.founder-photo-ph span{ display:block; font-size:0.73rem; margin-top:12px; letter-spacing:.05em; }
.founder-meta{ padding:20px 22px; border-top:1px solid var(--line); }
.founder-name{ font-weight:700; font-size:0.99rem; letter-spacing:-0.02em; }
.founder-role{ font-size:0.79rem; color:var(--t3); margin-top:2px; }
.founder-contact{ display:flex; flex-wrap:wrap; gap:9px; padding:0 22px 20px; }
.founder-contact a{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  font-size:0.81rem; font-weight:600;
  color:var(--t2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.founder-contact a:hover{ border-color:var(--accent-line); color:var(--t1); }
.founder-contact svg{ color:var(--orange); flex-shrink:0; }

@media(min-width:960px){
  .about-grid{ grid-template-columns:1.15fr 0.85fr; gap:60px; }
  .about-facts{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================================
   16. TRUST
   ========================================================================== */
.trust-section{ padding:clamp(60px,7.5vw,104px) 0; background:var(--bg); }
.trust-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  padding:10px 0 6px;
}
.trust-row{ padding:22px 0 24px; }
.trust-row .marquee-label{ margin-bottom:15px; }
.trust-row .cert-chip, .trust-row .tool-chip{ background:var(--surface-2); }
.trust-divider{ height:1px; background:var(--line); margin:0 30px; }

/* ==========================================================================
   17. TARIEVEN
   ========================================================================== */
.pricing{ padding:clamp(70px,8.5vw,122px) 0; background:var(--bg); }
.price-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:stretch;
  max-width:1000px;
  margin-inline:auto;
}
/* Ankerkaart: het duurdere, bekende alternatief staat ernaast en visueel
   gedempt. Zonder referentiepunt is een tarief een abstract getal. */
.anchor-card{
  padding:30px 26px;
  border-radius:var(--r-lg);
  border:1px dashed var(--line-mid);
  background:transparent;
}
.anchor-card h3{ font-size:0.99rem; color:var(--t2); margin-bottom:16px; }
.anchor-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:0.87rem;
  color:var(--t3);
}
.anchor-row:last-of-type{ border-bottom:0; }
.anchor-row b{ color:var(--t2); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.anchor-total{
  margin-top:16px; padding-top:15px;
  border-top:1px solid var(--line-mid);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.anchor-total span{ font-size:0.83rem; color:var(--t3); }
.anchor-total strong{ font-size:1.45rem; font-weight:700; letter-spacing:-0.04em; color:var(--t2); }
.anchor-note{ margin-top:13px; font-size:0.75rem; color:var(--t3); font-style:italic; }

/* Nevenblok voor diensten zonder advertentiebudget */
.price-side{
  padding:30px 26px;
  border-radius:var(--r-lg);
  border:1px solid var(--line-mid);
  background:var(--surface);
  display:flex;
  flex-direction:column;
}
.price-side h3{ font-size:1.05rem; margin-bottom:12px; }
.price-side > p{ font-size:0.9rem; color:var(--t2); margin-bottom:20px; }
.price-side-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; flex-grow:1; }
.price-side-list li{ display:flex; align-items:flex-start; gap:10px; font-size:0.89rem; color:var(--t2); }
.price-side-list li svg{ color:var(--orange); flex-shrink:0; margin-top:3px; }
.price-side-list b{ color:var(--t1); font-weight:600; }

.price-card{
  position:relative;
  border-radius:var(--r-xl);
  border:1px solid var(--accent-line);
  background:var(--surface);
  box-shadow:var(--shadow-lg);
  max-width:560px;
  margin-inline:auto;
  width:100%;
}
.price-layout .price-card{ max-width:none; }
.price-card-inner{
  border-radius:inherit;
  background:radial-gradient(500px 280px at 50% -12%, var(--accent-soft), transparent 62%);
  padding:38px 28px 30px;
  text-align:center;
  height:100%;
}
.price-badge{
  position:absolute;
  top:-13px; left:50%;
  transform:translateX(-50%);
  padding:6px 16px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:0.67rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  box-shadow:0 6px 18px -6px var(--orange-glow);
  white-space:nowrap;
}
.price-value{ font-size:clamp(2.5rem, 5.6vw, 3.2rem); font-weight:700; letter-spacing:-0.055em; line-height:1; margin-top:8px; }
.price-value span{ color:var(--orange); }
.price-sub{ color:var(--t2); font-size:0.92rem; margin-top:11px; margin-bottom:26px; }
.price-features{
  text-align:left;
  display:flex; flex-direction:column; gap:12px;
  margin-bottom:26px;
  padding:22px 0;
  border-block:1px solid var(--line);
}
.price-feature{ display:flex; align-items:flex-start; gap:11px; font-size:0.9rem; color:var(--t2); }
.price-feature svg{ color:var(--orange); flex-shrink:0; margin-top:3px; }
.price-foot{ margin-top:15px; font-size:0.77rem; color:var(--t3); }
@media(min-width:900px){ .price-layout{ grid-template-columns:0.9fr 1.1fr; gap:22px; } }

/* Rekenvoorbeeld-kaarten */
.example-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:900px){ .example-grid{ grid-template-columns:repeat(3,1fr); } }
.example-card{
  padding:26px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  text-align:center;
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.example-card:hover{ border-color:var(--line-mid); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.example-card h3{ font-size:0.99rem; margin:14px 0 10px; }
.example-formula{ font-size:0.83rem; color:var(--t3); font-variant-numeric:tabular-nums; }
.example-price{
  font-size:1.75rem; font-weight:700; letter-spacing:-0.045em;
  color:var(--orange); margin-top:12px;
  font-variant-numeric:tabular-nums;
}
.example-price small{ font-size:0.82rem; font-weight:600; color:var(--t3); letter-spacing:0; }

/* ==========================================================================
   18. FAQ
   ========================================================================== */
.faq-list{ display:flex; flex-direction:column; max-width:820px; margin-inline:auto; }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover{ border-color:var(--line-mid); }
.faq-item.open{ border-color:var(--accent-line); box-shadow:var(--shadow-sm); }
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:19px 21px;
  font-weight:600;
  font-size:0.97rem;
  text-align:left;
  color:var(--t1);
  letter-spacing:-0.015em;
}
.faq-question .faq-icon{
  flex-shrink:0;
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-mid);
  color:var(--accent);
  transition:transform .35s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease);
}
.faq-item.open .faq-question .faq-icon{
  transform:rotate(135deg);
  background:var(--accent-soft);
  border-color:var(--accent-line);
}
.faq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-out); }
.faq-item.open .faq-answer{ grid-template-rows:1fr; }
/* Directe kinderen moeten kunnen krimpen, anders lekt de tekst uit de
   dichtgeklapte rij. Geldt ook voor opmaak zonder wrapper-div. */
.faq-answer > *{ overflow:hidden; min-height:0; }
.faq-answer p{ padding:0 21px 21px; color:var(--t2); font-size:0.92rem; max-width:66ch; }
.faq-answer p a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   19. CTA-BAND
   ========================================================================== */
.cta-band{
  position:relative;
  padding:clamp(70px,8.5vw,112px) 0;
  background:
    radial-gradient(720px 400px at 50% 0%, rgba(244,123,32,.18), transparent 62%),
    var(--bg);
  text-align:center;
  overflow:hidden;
}
.cta-band::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 68% 70% at 50% 40%, #000, transparent 74%);
  mask-image:radial-gradient(ellipse 68% 70% at 50% 40%, #000, transparent 74%);
  pointer-events:none;
}
.cta-band .container{ position:relative; z-index:1; }
.cta-band h2{ margin-bottom:14px; }
.cta-band > .container > p{ color:var(--t2); margin-bottom:28px; max-width:56ch; margin-inline:auto; }
.cta-band-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:13px; }
.cta-band .eyebrow{ display:inline-flex; }
.cta-band .eyebrow::before{ display:none; }

/* Geruststelling ná de laatste CTA — de laatste indruk weegt zwaar */
.cta-assure{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:11px 24px;
  margin-top:28px;
  font-size:0.83rem;
  color:var(--t3);
}
.cta-assure span{ display:inline-flex; align-items:center; gap:8px; }
.cta-assure svg{ color:#4ED28C; flex-shrink:0; }

.teaser-actions{ text-align:center; margin-top:34px; }

/* ==========================================================================
   20. FOOTER
   ========================================================================== */
footer{
  background:var(--bg);
  color:var(--t3);
  padding:66px 0 26px;
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line);
}
.footer-brand p{ margin-top:15px; color:var(--t3); font-size:0.88rem; max-width:290px; }
.footer-col h4{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.16em; color:var(--t1); margin-bottom:17px; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:0.88rem; color:var(--t3); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--orange-300); }
.footer-bottom{ display:flex; flex-direction:column; gap:10px; padding-top:24px; font-size:0.77rem; color:var(--t3); }
@media(min-width:620px){
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@media(min-width:980px){
  .footer-grid{ grid-template-columns:1.5fr repeat(4,1fr); gap:30px; }
}

/* ==========================================================================
   21. STICKY MOBIELE CTA (duimzone, altijd bereikbaar)
   ========================================================================== */
.sticky-cta{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 11px 10px 17px;
  border-radius:999px;
  background:rgba(18,18,23,0.9);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  transform:translateY(150%);
  transition:transform .5s var(--ease-out);
  color:#F6F4F2;
}
.sticky-cta.show{ transform:translateY(0); }
.sticky-cta-text{ flex:1; min-width:0; line-height:1.25; }
.sticky-cta-text strong{ display:block; font-size:0.84rem; font-weight:600; }
.sticky-cta-text span{ font-size:0.71rem; color:rgba(255,255,255,0.55); }
.sticky-cta .btn{ flex-shrink:0; }
@media(min-width:1000px){ .sticky-cta{ display:none; } }

/* ==========================================================================
   22. FORMULIEREN
   ========================================================================== */
.contact{ padding:clamp(70px,8.5vw,112px) 0; background:var(--bg); }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:38px; }
.contact-info{ display:flex; flex-direction:column; gap:20px; }
.contact-info-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-info-item .ico{
  width:42px; height:42px; border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-info-item h4{ font-size:0.93rem; margin-bottom:3px; }
.contact-info-item p, .contact-info-item a{ color:var(--t2); font-size:0.89rem; }

.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:30px 26px;
  box-shadow:var(--shadow);
}
.form-row{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
.form-group{ display:flex; flex-direction:column; gap:7px; }
.form-group label{ font-size:0.82rem; font-weight:600; color:var(--t2); }
.form-group label .req{ color:var(--orange); }
.form-group input, .form-group select, .form-group textarea{
  padding:13px 14px;
  border:1px solid var(--line-mid);
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--t1);
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:var(--t3); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.form-group textarea{ resize:vertical; min-height:118px; }
.form-error{ display:none; font-size:0.76rem; color:var(--bad); font-weight:600; }
.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea{ border-color:var(--bad); box-shadow:0 0 0 3px rgba(208,72,58,.1); }
.form-group.invalid .form-error{ display:block; }

.form-submit{ width:100%; margin-top:8px; }
.form-success{
  display:none;
  align-items:flex-start;
  gap:14px;
  background:rgba(31,157,99,.07);
  border:1px solid rgba(31,157,99,.28);
  border-radius:var(--r);
  padding:22px;
  margin-top:18px;
}
.form-success.show{ display:flex; }
.form-success svg{ color:var(--good); flex-shrink:0; margin-top:2px; }
.form-success h4{ font-size:0.97rem; margin-bottom:5px; }
.form-success p{ font-size:0.87rem; color:var(--t2); }
#contactForm.hide{ display:none; }

/* Voortgangsbalk boven het formulier: "bijna klaar" vermindert afhaken
   in het laatste stuk. */
.form-progress{ margin-bottom:22px; }
.form-progress-bar{ height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.form-progress-fill{
  height:100%;
  width:8%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--orange-700), var(--orange-300));
  transition:width .5s var(--ease-out);
}
.form-progress-label{ display:flex; justify-content:space-between; gap:12px; margin-top:9px; font-size:0.74rem; color:var(--t3); }

@media(min-width:700px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .contact-grid{ grid-template-columns:0.82fr 1.18fr; gap:52px; } }

/* ==========================================================================
   23. VOOR WIE / GERELATEERD / DELIVERABLES
   ========================================================================== */
.fit-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
.fit-card{
  padding:28px 26px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
}
.fit-card.yes{ border-color:rgba(31,157,99,.28); }
.fit-card.no{ border-color:rgba(208,72,58,.24); }
.fit-card h3{ font-size:1.02rem; margin-bottom:17px; display:flex; align-items:center; gap:10px; }
.fit-card.yes h3 svg{ color:var(--good); }
.fit-card.no h3 svg{ color:var(--bad); }
.fit-card ul{ display:flex; flex-direction:column; gap:12px; }
.fit-card li{ display:flex; gap:11px; font-size:0.9rem; color:var(--t2); align-items:flex-start; }
.fit-card li svg{ flex-shrink:0; margin-top:4px; }
.fit-card.yes li svg{ color:var(--good); }
.fit-card.no li svg{ color:var(--bad); }
@media(min-width:760px){ .fit-grid{ grid-template-columns:1fr 1fr; } }

.related-services{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:760px){ .related-services{ grid-template-columns:repeat(3,1fr); } }
.related-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  transition:transform .35s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.related-card:hover{ transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-sm); }
.related-card h4{ font-size:0.97rem; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.related-card h4 svg{ color:var(--orange); opacity:.55; transition:transform .3s var(--ease-out), opacity .3s var(--ease); }
.related-card:hover h4 svg{ transform:translateX(3px); opacity:1; }
.related-card p{ font-size:0.85rem; color:var(--t2); }

.deliver-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:760px){ .deliver-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .deliver-grid{ grid-template-columns:repeat(3,1fr); } }
.deliver-item{
  display:flex; gap:13px;
  padding:20px 22px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.deliver-item:hover{ border-color:var(--line-mid); box-shadow:var(--shadow-sm); }
.deliver-item svg{ color:var(--orange); flex-shrink:0; margin-top:3px; }
.deliver-item h4{ font-size:0.92rem; margin-bottom:4px; }
.deliver-item p{ font-size:0.83rem; color:var(--t2); }

/* Waardenraster */
.value-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:700px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .value-grid{ grid-template-columns:repeat(4,1fr); } }
.value-card{
  padding:26px 24px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.value-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.value-num{ font-size:0.72rem; font-weight:700; letter-spacing:0.16em; color:var(--accent); margin-bottom:12px; }
.value-card h3{ font-size:1.05rem; margin-bottom:8px; }
.value-card p{ font-size:0.89rem; color:var(--t2); }

/* Prozablok met beperkte regellengte */
.prose{ max-width:66ch; }
.prose p{ color:var(--t2); font-size:1.01rem; margin-bottom:16px; }
.prose p:last-child{ margin-bottom:0; }
.prose a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* Legacy USP-balk */
.usp-bar{ background:var(--bg-alt); border-block:1px solid var(--line); color:var(--t2); padding:15px 0; overflow:hidden; }
.usp-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.usp-bar:hover .usp-track{ animation-play-state:paused; }
.usp-bar-item{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:0.87rem; white-space:nowrap; padding:0 26px; }
.usp-bar-item svg{ flex-shrink:0; color:var(--orange); }
@media(min-width:760px){
  .usp-track{
    display:grid; grid-template-columns:repeat(3,1fr);
    width:100%; max-width:var(--container);
    margin-inline:auto; padding-inline:var(--gutter);
    animation:none;
  }
  .usp-bar-item{ justify-content:center; padding:0; }
  .usp-bar-item[aria-hidden="true"]{ display:none; }
}

/* ==========================================================================
   25. ANIMATIEBASIS & REDUCED MOTION
   ========================================================================== */
/* Beginstaat alleen zetten als JS draait — zonder JS blijft alles zichtbaar. */
html.js-on [data-anim]{ opacity:0; }
html.js-on [data-anim="up"]{ transform:translateY(24px); }
html.js-on [data-anim="fade"]{ transform:none; }
html.js-on [data-anim="scale"]{ transform:scale(.965); }
html.js-on [data-anim="left"]{ transform:translateX(-24px); }
html.js-on [data-anim="right"]{ transform:translateX(24px); }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
html:not(.js-on) .reveal{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.js-on [data-anim]{ opacity:1 !important; transform:none !important; }
  .marquee-track,.usp-track{ animation:none !important; }
  .sticky-cta{ transform:none; }
}

/* ==========================================================================
   24. MOBIEL: niets breder dan het scherm, rustige afstanden
   ========================================================================== */
@media(max-width:999px){
  /* Sticky CTA verbergen zodra het menu open staat; menu vult het hele scherm */
  body > .nav.open ~ .sticky-cta{ transform:translateY(150%); }
  .nav-mobile{ min-height:calc(100dvh - var(--nav-h)); }
  /* Sticky CTA onderaan overlapt anders de laatste footerregel */
  footer{ padding-bottom:96px; }
}
@media(max-width:639px){
  /* Knoppen mogen over twee regels, nooit buiten beeld */
  .btn{ white-space:normal; text-align:center; max-width:100%; line-height:1.2; }
  .btn-lg{ padding:16px 26px; }
  .hero-actions .btn-lg, .cta-band-actions .btn-lg{ width:100%; }
  /* Marquee-label zat zonder container tegen de rand */
  .marquee-label{ padding-inline:var(--gutter); }
  /* Stat-cijfers: "2-wekelijks"/"Maandelijks" op één regel houden */
  .stat{ padding:24px 10px; }
  .stat-num{ font-size:clamp(1.5rem, 6.8vw, 1.95rem); white-space:nowrap; }
  .stat-label{ font-size:0.78rem; }
  /* Badge boven de prijskaart */
  .price-badge{ font-size:0.6rem; padding:6px 12px; max-width:calc(100% - 20px); letter-spacing:0.1em; }
}