/* Purple Clouds — gedeelde huisstijl voor de publieke website. Zelfde paletnamen/lettertypes als
   Ads Architect/Feed Generator (netlify/functions-tools), zodat het hele platform (site + interne
   tools) visueel bij elkaar hoort. */
:root{
  --bg:#FBF8FD; --bg-elevated:#F4EEFB; --panel:#FFFFFF; --panel-2:#F5EFFC;
  --border:rgba(90,40,110,0.12); --border-strong:rgba(90,40,110,0.22);
  /* Merkpalet v3: helderder/Braziliaanser dan de vorige, gedempte versie — vast gezet op de
     exacte codes uit het merk-brief (paars/violet primair, geel highlight, groen als succes-accent). */
  --violet-deep:#6F3DFF; --magenta:#A855F7; --coral:#C63F67; --pink-warm:#D9527A;
  --grad: linear-gradient(90deg,var(--violet-deep),var(--magenta),var(--coral));
  --grad-radial: radial-gradient(circle at 30% 20%, var(--magenta), var(--violet-deep) 70%);
  --ink:#221046; --muted:#6C5A82; --muted-2:#9C8CB0;
  --radius:14px; --shadow: 0 10px 30px -12px rgba(90,40,110,0.16);
  --header-h: 76px;
  /* Donkere secties (afwisseling met de lichte, i.p.v. één vlakke achtergrond de hele pagina) */
  --dark-bg:#150A28; --dark-panel:#221046; --dark-border:rgba(255,255,255,0.10);
  --dark-ink:#F5EFFC; --dark-muted:#B9A6CC;
  /* Felle accenten naast het paarse palet — geel voor CTA/highlights, groen voor vertrouwen/succes. */
  --sun:#FFB800; --sun-deep:#F2841A;
  --success:#39D98A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 12% -12%, rgba(140,46,119,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 110% 8%, rgba(198,63,103,0.08), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; min-height:100vh;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; margin:0; line-height:1.15;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,44px);}

/* ---------- Header / nav ---------- */
/* backdrop-filter staat bewust NIET direct op .site-header: elke waarde ongelijk aan "none" (ook op
   een position:sticky element) maakt dat element de containing block voor position:fixed nakomelingen
   i.p.v. de viewport. Het mobiele uitklapmenu (.site-nav, position:fixed) zit hier middenin — met de
   filter rechtstreeks op .site-header werd dat menu daardoor tegen de kleine header-box aan geplet
   i.p.v. de volledige viewport te vullen, met een vrijwel onzichtbaar menu tot gevolg. Zelfde optische
   glaseffect via een ::before erachter lost dit op zonder die nakomeling-containing-block te triggeren. */
.site-header{
  position:sticky;top:0;z-index:50;width:100%;height:var(--header-h);
  border-bottom:1px solid var(--border);display:flex;align-items:center;
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(251,248,253,0.9);backdrop-filter:blur(10px);
}
.site-header-inner{
  width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,44px);
  display:flex;align-items:center;gap:28px;
}
.site-logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;flex:0 0 auto;}
.site-logo img{height:30px;width:auto;display:block;}
.site-logo-tagline{font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted-2);padding-left:2px;}
@media(max-width:640px){.site-logo-tagline{display:none;}}
.site-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.site-nav-item{position:relative;}
.site-nav-link{
  display:inline-flex;align-items:center;gap:4px;padding:10px 15px;border-radius:100px;
  font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;transition:all .15s;white-space:nowrap;
}
.site-nav-link:hover, .site-nav-link.active{background:var(--panel-2);color:var(--ink);}
.site-nav-cta{background:var(--grad);color:#fff !important;box-shadow:0 8px 20px -10px rgba(198,63,103,0.5);}
.site-nav-cta:hover{opacity:0.92;background:var(--grad);}
.site-nav-dropdown{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:220px;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;flex-direction:column;gap:2px;
}
/* Onzichtbare brug over die 6px ruimte tussen de link en dit paneel — zonder deze brug is dat een
   "dode zone" die geen deel uitmaakt van .site-nav-item of van dit paneel: de muis diagonaal van
   de link naar het paneel bewegen kan daar dus even over GEEN van beide heen gaan, waardoor :hover
   er heel even niet meer geldt en het paneel dichtklapt vóórdat de muis 'm bereikt. Als pseudo-
   element van dit paneel telt hoveren hierover gewoon als hoveren over het paneel zelf. */
.site-nav-dropdown::before{content:'';position:absolute;top:-6px;left:0;right:0;height:6px;}
/* Puur CSS :hover i.p.v. een door JS bijgehouden klasse — :hover is altijd de actuele, echte
   cursorpositie zoals de browser zelf die kent, dus dit kan nooit "blijven hangen" los van waar
   de muis daadwerkelijk is (in tegenstelling tot een JS-klasse die per ongeluk aan kan blijven
   staan als een mouseenter/mouseleave-event ergens niet feilloos afvuurt of gehit-test wordt). */
.site-nav-item:hover .site-nav-dropdown{display:flex;}
/* Direct na een pagina-navigatie doet de browser soms een hit-test op de laatst bekende
   muispositie, waardoor :hover al meteen "actief" kan zijn zonder dat de gebruiker ook maar
   bewogen heeft (bijv. na het klikken op een link die op dezelfde schermpositie staat op de
   vorige pagina). Deze klasse onderdrukt de dropdown een fractie van een seconde na het laden
   (zie layout.js, tijd-gebaseerd i.p.v. afhankelijk van een specifiek event), zodat zo'n
   hit-test nooit zichtbaar wordt. */
.site-nav.nav-just-loaded .site-nav-dropdown,
.site-nav.nav-just-loaded .site-nav-dropdown-mega{display:none !important;}
.site-nav-dropdown a{padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;}
.site-nav-dropdown a:hover{background:var(--panel-2);color:var(--ink);}

/* ---------- Mega-dropdown: gegroepeerd in kolommen, voor menu's met veel items (Diensten) ---------- */
/* Bewust GEEN display hier: display:none komt van de basisklasse .site-nav-dropdown hierboven, en
   wordt pas naar display:grid gezet door de :hover-regel eronder. display:grid hier onvoorwaardelijk
   zetten was de ECHTE hoofdoorzaak van het "blijft hangen"-bugje — dat overschreef de verberg-regel
   altijd (gelijke specificiteit, latere regel wint), waardoor dit menu standaard al zichtbaar was en
   alleen kort gemaskeerd werd door .nav-just-loaded vlak na het laden. */
.site-nav-dropdown-mega{min-width:460px;padding:16px;grid-template-columns:1fr 1fr;gap:4px 28px;}
.site-nav-item:hover .site-nav-dropdown-mega{display:grid;}
.site-nav-dropdown-group-title{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-2);
  padding:8px 14px 4px;grid-column:1/-1;
}
.site-nav-dropdown-group-title:not(:first-child){margin-top:6px;padding-top:12px;border-top:1px solid var(--border);}
@media(max-width:880px){
  .site-nav-dropdown-mega{min-width:0;grid-template-columns:1fr;padding:0 0 0 14px;}
  .site-nav-dropdown-group-title{padding-left:0;}
}
.site-nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--ink);padding:6px;}
@media(max-width:880px){
  .site-nav{
    display:none;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
    background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:18px;overflow-y:auto;
  }
  .site-nav.show{display:flex;}
  .site-nav-link{width:100%;justify-content:flex-start;padding:14px 16px;font-size:16px;}
  .site-nav-dropdown{display:flex !important;position:static;box-shadow:none;border:none;padding:0 0 0 14px;}
  .site-nav-toggle{display:block;margin-left:auto;}
}

/* ---------- Footer: donker, zoals de rest van de premium/nachtelijke secties ---------- */
.site-footer{background:var(--dark-bg);color:var(--dark-ink);margin-top:0;padding:56px 0 26px;position:relative;overflow:hidden;}
.site-footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px;}
@media(max-width:760px){.site-footer-grid{grid-template-columns:1fr 1fr;}}
.site-footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.site-footer-brand img{filter:brightness(0) invert(1);}
.site-footer-tagline{color:var(--dark-muted);font-size:13.5px;max-width:260px;}
.site-footer h4{font-size:12.5px;text-transform:uppercase;letter-spacing:0.04em;color:#fff;opacity:0.6;margin-bottom:14px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.site-footer a{color:var(--dark-muted);text-decoration:none;font-size:14px;}
.site-footer a:hover{color:#fff;}
.site-footer-bottom{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  padding-top:24px;border-top:1px solid var(--dark-border);color:var(--dark-muted);font-size:12.5px;
  font-family:'JetBrains Mono',monospace;
}
.site-footer-social{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.site-footer-social a:not(.site-footer-whatsapp){
  width:34px;height:34px;border-radius:50%;border:1px solid var(--dark-border);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto;
}
.site-footer-social a:not(.site-footer-whatsapp):hover{background:rgba(255,255,255,0.08);}
.site-footer-whatsapp{
  display:inline-flex;align-items:center;gap:7px;background:var(--success);color:#0B2E1F;font-weight:700;
  font-size:12.5px;padding:9px 16px;border-radius:100px;text-decoration:none;white-space:nowrap;margin-left:6px;
}

/* ---------- Reusable page components ---------- */
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--coral);
  letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:16px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--coral);}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
  padding:14px 28px;border-radius:100px;text-decoration:none;cursor:pointer;border:none;transition:transform .15s,opacity .15s;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 30px -10px rgba(198,63,103,0.5);}
.btn-primary:hover{transform:translateY(-1px);}
.btn-secondary{background:var(--panel);color:var(--ink);border:1.5px solid var(--border-strong);}
.btn-secondary:hover{background:var(--panel-2);}
.btn-sun{background:linear-gradient(100deg,var(--sun),var(--sun-deep));color:#2A1600;box-shadow:0 14px 30px -10px rgba(242,132,26,0.55);}
.btn-sun:hover{transform:translateY(-1px);}
.section{padding:80px 0;}
.section-tight{padding:56px 0;}
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:32px;box-shadow:var(--shadow);
}

/* ---------- Donkere secties (volle-breedte kleurvlak, i.p.v. steeds dezelfde lichte achtergrond) ---------- */
.section-dark{background:var(--dark-bg);color:var(--dark-ink);}
.section-dark .eyebrow{color:var(--pink-warm);}
.section-dark p{color:var(--dark-muted);}
.section-dark .card{background:var(--dark-panel);border-color:var(--dark-border);}

/* ---------- Grote, gedurfde hero-typografie ---------- */
.display-xl{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-0.03em;line-height:0.98;
  font-size:clamp(52px,9vw,108px);
}
.display-xl .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- Tag-pills (bijv. kanalen/diensten opsommen, net als productlabels) ---------- */
.tag-pill{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:6px 14px;
  border-radius:100px;background:var(--panel-2);color:var(--muted);border:1px solid var(--border-strong);
}
.section-dark .tag-pill{background:rgba(255,255,255,0.07);color:var(--dark-muted);border-color:var(--dark-border);}

/* ---------- Stat/trust-strip (zoals een rij keurmerken/cijfers onder een hero) ---------- */
.stat-strip{display:flex;flex-wrap:wrap;gap:36px;}
.stat-item{display:flex;flex-direction:column;gap:4px;}
.stat-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:28px;}
.stat-label{font-size:12.5px;color:var(--dark-muted);text-transform:uppercase;letter-spacing:0.04em;}

/* ---------- Foto-placeholder: duidelijk gemarkeerd blok waar straks een echte foto in komt ---------- */
.photo-slot{
  aspect-ratio:4/3;border-radius:18px;border:2px dashed var(--border-strong);background:var(--panel-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted-2);
  text-align:center;padding:24px;
}
.section-dark .photo-slot{border-color:var(--dark-border);background:rgba(255,255,255,0.04);color:var(--dark-muted);}
.photo-slot-icon{font-size:32px;opacity:0.6;}
.photo-slot-label{font-size:12.5px;font-weight:600;max-width:200px;}

/* ---------- Scroll-reveal: subtiele fade/slide-in zodra een sectie in beeld komt ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- Organische golfscheiding tussen secties i.p.v. een harde rechte lijn ---------- */
.wave-divider{display:block;line-height:0;margin-top:-2px;}
.wave-divider svg{width:100%;height:auto;display:block;}

/* ---------- Speelse, licht gedraaide sticker-badge (persoonlijkheid, zoals een stempel) ---------- */
.sticker{
  display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);
  padding:10px 18px;border-radius:100px;font-weight:700;font-size:13px;
  transform:rotate(-3deg);box-shadow:0 10px 24px -10px rgba(0,0,0,0.35);
}

/* ---------- Zwevende wolkvormen (CSS-only, geen afbeelding nodig) — knipoog naar de merknaam ---------- */
.cloud-shape{
  position:absolute;border-radius:100px;background:rgba(255,255,255,0.10);filter:blur(1px);pointer-events:none;
}
.cloud-shape::before, .cloud-shape::after{content:"";position:absolute;border-radius:100px;background:inherit;}

/* ---------- Foto-hero: volle-breedte foto met leesbare gradient-overlay eroverheen ---------- */
.photo-hero{position:relative;overflow:hidden;}
.photo-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(24,11,36,0.94) 0%, rgba(24,11,36,0.75) 42%, rgba(24,11,36,0.35) 75%, rgba(24,11,36,0.55) 100%);
}

/* ---------- Duotone-behandeling voor hergebruikte foto's: brand-kleur eroverheen voor samenhang ---------- */
.photo-tint{position:relative;border-radius:16px;overflow:hidden;}
.photo-tint img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-tint::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:0.4;mix-blend-mode:multiply;}

/* ---------- Polaroid-achtig, licht gedraaid fotokader — speels, voor de karikaturen ---------- */
.polaroid{background:#fff;padding:14px 14px 26px;border-radius:14px;box-shadow:0 24px 50px -18px rgba(0,0,0,0.35);}
.polaroid img{border-radius:6px;width:100%;display:block;}

/* ---------- Kleurrijke icoon-cirkels (gradient per dienst, i.p.v. platte grijze vlakken) ---------- */
.icon-circle{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 12px 24px -10px rgba(0,0,0,0.4);flex:0 0 auto;}
.icon-circle svg{width:24px;height:24px;}
.icon-g1{background:linear-gradient(135deg,#4285F4,#34A853);}
.icon-g2{background:linear-gradient(135deg,#8B5CF6,#EC4899);}
.icon-g3{background:linear-gradient(135deg,#10B981,#34D399);}
.icon-g4{background:linear-gradient(135deg,#FFB800,#F2841A);}
.icon-g5{background:linear-gradient(135deg,#06B6D4,#3B82F6);}
.icon-g6{background:linear-gradient(135deg,#EC4899,#F43F5E);}
.icon-g7{background:linear-gradient(135deg,#6F3DFF,#A855F7);}
.icon-g8{background:linear-gradient(135deg,#F97316,#EF4444);}

/* ---------- Foto-hero: echte brede Rio/strand-zonsondergang-foto (eindelijk landscape-formaat,
   dus geen crop-naar-gezicht-probleem meer zoals met de portret-foto) vult de volledige breedte. ---------- */
.hero-photo{
  position:relative;overflow:hidden;min-height:min(84vh,700px);display:flex;align-items:center;
  background-image:url('../assets/hero-brazil-bg.png');background-size:cover;background-position:center 60%;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(21,10,40,0.82) 0%, rgba(21,10,40,0.6) 32%, rgba(21,10,40,0.22) 58%, rgba(21,10,40,0.08) 78%, transparent 100%),
             linear-gradient(0deg, rgba(21,10,40,0.4), transparent 30%);
}
.hero-photo-grid{position:relative;z-index:2;display:block;min-height:auto;}
.hero-photo-content{position:relative;z-index:2;padding:60px 0;max-width:640px;}
.hero-photo-content .eyebrow{color:#fff;opacity:0.9;font-family:'Caveat',cursive;font-size:20px;font-weight:700;text-transform:none;letter-spacing:0.01em;}
.hero-photo-content .eyebrow::before{display:none;}
.hero-photo h1{color:#fff;font-size:clamp(38px,6vw,64px);line-height:1.08;text-transform:uppercase;letter-spacing:-0.01em;
  text-shadow:0 4px 24px rgba(0,0,0,0.4);}
.hero-photo h1 .hl{
  font-family:'Permanent Marker',cursive;font-weight:400;font-size:1.05em;line-height:1.1;display:inline-block;
  text-transform:uppercase;
  background:linear-gradient(100deg,var(--sun),#fff 35%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:rotate(-2deg);margin-top:8px;text-shadow:none;
}
.hero-photo-content p{color:rgba(255,255,255,0.85);font-size:17px;max-width:480px;margin:18px 0 30px;text-shadow:0 2px 10px rgba(0,0,0,0.4);}
.hero-photo-visual{display:none;}
.hero-corner-tag{
  position:absolute;top:30px;right:clamp(20px,4vw,44px);z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap;
  font-family:'Caveat',cursive;font-weight:700;font-size:22px;line-height:1.25;letter-spacing:0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,0.55);
}
.hero-corner-tag span:nth-child(1){color:var(--sun);transform:rotate(-3deg);}
.hero-corner-tag span:nth-child(2){color:#fff;transform:rotate(2deg);}
.hero-corner-tag span:nth-child(3){color:#E9D5FF;transform:rotate(-2deg);}
.review-float{
  position:relative;margin-top:36px;z-index:3;width:fit-content;
  background:rgba(255,255,255,0.08);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;padding:12px 18px;display:flex;align-items:center;gap:12px;
}
.review-float .avatar-stack{display:flex;}
.review-float .avatar-stack span{
  width:26px;height:26px;border-radius:50%;border:2px solid rgba(21,10,40,0.9);margin-left:-8px;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;
}
.review-float .avatar-stack span:first-child{margin-left:0;}
.review-float-text{display:flex;flex-direction:column;gap:2px;}
.review-float .stars{color:var(--sun);font-size:12px;letter-spacing:1px;}
.review-float .review-text{color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;}
.review-float .review-sub{color:rgba(255,255,255,0.65);font-size:10.5px;white-space:nowrap;}
@media(max-width:640px){.hero-corner-tag{display:none;}}

/* ---------- Palmblad-decoratie: zachte silhouetten in de hoeken, knipoog naar Rio/strand-sfeer ---------- */
.palm-deco{position:absolute;pointer-events:none;z-index:2;opacity:0.5;}
.palm-deco svg{display:block;width:100%;height:100%;}

/* ---------- Vertrouwd-door: kleine kleurcode-badges i.p.v. platte grijze tekst ---------- */
.trust-logos-v2{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.trust-logo-badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;
  background:var(--panel);border:1px solid var(--border);font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:14px;color:var(--ink);box-shadow:0 6px 16px -10px rgba(90,40,110,0.25);
}
.trust-logo-badge .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}

/* ---------- Vivid proof-stats: verloop i.p.v. platte donkere balk, met icoon per cijfer ---------- */
.proof-stats-v2{
  background:linear-gradient(100deg,var(--violet-deep),var(--magenta));border-radius:24px;padding:32px clamp(22px,5vw,52px);color:#fff;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;
  box-shadow:0 30px 70px -26px rgba(111,61,255,0.55);position:relative;overflow:hidden;
  transition:box-shadow .35s ease, transform .35s ease;
}
.proof-stats-v2::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(ellipse 700px 300px at 30% 0%, rgba(230,220,255,0.55), transparent 60%);
}
.proof-stats-v2:hover{
  transform:translateY(-3px);
  box-shadow:0 34px 80px -20px rgba(200,180,255,0.75), 0 0 70px 4px rgba(216,190,255,0.4);
}
.proof-stats-v2:hover::after{opacity:1;}
.proof-stat-v2{display:flex;align-items:center;gap:12px;}
.proof-stat-v2 .icon-circle{margin:0;background:rgba(255,255,255,0.18);box-shadow:none;width:44px;height:44px;border-radius:13px;}
.proof-stat-v2 .icon-circle svg{width:20px;height:20px;}
.proof-stat-v2-text{display:flex;flex-direction:column;}
.proof-stat-v2-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;}
.proof-stat-v2-label{font-size:11.5px;color:rgba(255,255,255,0.78);text-transform:uppercase;letter-spacing:0.04em;}

/* ---------- Praktijk-kaarten: fotokaart met dienst-tag i.p.v. losse platte tekst ---------- */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:880px){.results-grid{grid-template-columns:1fr;}}
.result-card{border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);}
.result-card-photo{height:190px;position:relative;overflow:hidden;}
.result-card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.result-card:hover .result-card-photo img{transform:scale(1.06);}
.result-card-body{padding:22px 24px 26px;}
.result-tag{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);color:var(--magenta);font-weight:700;
  font-size:12px;padding:5px 13px;border-radius:100px;margin-bottom:12px;}
.result-card h4{font-size:17px;margin-bottom:8px;}
.result-card p{font-size:13.5px;color:var(--muted);margin-bottom:14px;}
.result-card a{font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;}
.result-card a::after{content:" →";}

/* ---------- Case studies: fotokaart met resultaat-cijfer, i.p.v. platte tekstkaart ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:880px){.cases-grid{grid-template-columns:1fr;}}
.case-card{border-radius:18px;overflow:hidden;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease;}
.case-card:hover{transform:translateY(-5px);box-shadow:0 24px 46px -18px rgba(90,40,110,0.3);}
.case-card-photo{height:150px;position:relative;overflow:hidden;}
.case-card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.case-card:hover .case-card-photo img{transform:scale(1.08);}
.case-card-tag{position:absolute;top:12px;left:12px;background:rgba(21,10,40,0.75);backdrop-filter:blur(6px);color:#fff;
  font-size:11px;font-weight:700;padding:5px 12px;border-radius:100px;letter-spacing:0.02em;}
.case-card-body{padding:20px 22px 24px;}
.case-card-result{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:30px;color:var(--success);margin-bottom:4px;}
.case-card-body p{font-size:13.5px;color:var(--muted);margin-bottom:12px;}
.case-card-body a{font-weight:700;font-size:13px;color:var(--ink);text-decoration:none;}
.case-card-body a::after{content:" →";}

/* ---------- Testimonials: kaart met sterren, initialen-avatar en rol/bedrijf ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:880px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;}
.testi-card .stars{color:var(--sun);font-size:14px;letter-spacing:2px;margin-bottom:12px;display:block;}
.testi-card p{font-size:14px;color:var(--ink);margin-bottom:18px;font-style:italic;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:13px;flex:0 0 auto;
}
.testi-person-name{font-weight:700;font-size:13.5px;}
.testi-person-role{font-size:12px;color:var(--muted-2);}

/* ---------- Slanke diensten-rij: letterlijke merk-achtige iconen op wit, geen gradient-cirkel ---------- */
.services-lean-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:1080px){.services-lean-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.services-lean-grid{grid-template-columns:repeat(2,1fr);}}
/* Symmetrische variant voor grids met 8 items (4x2 i.p.v. de scheve 6+2) */
.services-lean-grid-4x2{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.services-lean-grid-4x2{grid-template-columns:repeat(2,1fr);}}
.service-lean-item{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:24px 20px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-lean-item:hover{transform:translateY(-5px);box-shadow:0 22px 44px -18px rgba(90,40,110,0.32);border-color:var(--border-strong);}
.service-lean-item::after{
  content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
  transform:skewX(-20deg);transition:left .65s ease;
}
.service-lean-item:hover::after{left:160%;}
.service-lean-item .service-lean-icon{transition:transform .3s ease;}
.service-lean-item:hover .service-lean-icon{transform:scale(1.1) rotate(-4deg);}
.service-lean-icon{width:44px;height:44px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;}
.service-lean-icon svg{width:100%;height:100%;display:block;}
.service-lean-item h4{font-size:14.5px;margin-bottom:6px;}
.service-lean-item p{font-size:12.5px;color:var(--muted);margin-bottom:12px;min-height:32px;}
.service-lean-item a{font-size:12.5px;font-weight:700;color:var(--magenta);text-decoration:none;}
.service-lean-item a::after{content:" →";}

/* ---------- Twee helften naast elkaar, i.p.v. alles onder elkaar (dichter, tijdschrift-achtig ritme) ---------- */
.split-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
@media(max-width:920px){.split-row{grid-template-columns:1fr;}}

/* ---------- Over-ons paneel: lichte kaart met tekst + foto die aan de rand van het paneel bleedt ---------- */
.about-panel{
  background:var(--panel-2);border-radius:24px;overflow:hidden;position:relative;
  min-height:440px;display:flex;
}
.about-panel-text{position:relative;z-index:2;padding:38px 34px;max-width:52%;display:flex;flex-direction:column;justify-content:center;}
.about-panel-text ul{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;}
.about-panel-text ul li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;}
.about-panel-text ul li::before{content:"✓";width:18px;height:18px;border-radius:50%;background:var(--violet-deep);color:#fff;
  font-size:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.about-panel-signoff{font-family:'Caveat',cursive;font-size:19px;color:var(--magenta);margin-top:6px;}
.about-panel-photo{position:absolute;right:0;top:0;bottom:0;width:50%;}
.about-panel-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.about-panel-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel-2) 0%,rgba(245,239,252,0) 22%);}
@media(max-width:920px){.about-panel{flex-direction:column;min-height:0;}
  .about-panel-text{max-width:100%;padding:30px 26px;}
  .about-panel-photo{position:relative;width:100%;height:280px;}
  .about-panel-photo::before{background:linear-gradient(0deg,var(--panel-2) 0%,rgba(245,239,252,0) 30%);}
}

/* ---------- CTA-paneel: kaartvariant van de neon-sectie, past in een split-row i.p.v. volle breedte ---------- */
.cta-panel{
  background:var(--dark-bg);border-radius:24px;position:relative;overflow:hidden;
  padding:40px 36px;display:flex;flex-direction:column;justify-content:center;min-height:340px;
}
.cta-panel-photo{position:absolute;inset:0;z-index:0;opacity:0.4;}
.cta-panel-photo img{width:100%;height:100%;object-fit:cover;object-position:75% 20%;mix-blend-mode:luminosity;}
.cta-panel-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, var(--dark-bg) 5%, rgba(21,10,40,0.55) 40%, rgba(111,61,255,0.5) 100%);
}
.cta-panel h3{color:#fff;font-size:clamp(24px,3vw,30px);margin-bottom:10px;position:relative;z-index:2;}
.cta-panel p{color:var(--dark-muted);font-size:14.5px;margin-bottom:20px;max-width:340px;}
.cta-panel-script{font-family:'Caveat',cursive;font-weight:700;color:var(--sun);font-size:26px;position:absolute;top:36px;right:40px;transform:rotate(-4deg);}

/* ---------- Testimonials-kolom: compacte gestapelde variant voor in een split-row ---------- */
.testi-stack{display:flex;flex-direction:column;gap:14px;}

/* ---------- Neon/glow slotsectie: gloed-vlekken + speelse subtekst i.p.v. platte donkere vlak ---------- */
.cta-neon{position:relative;overflow:hidden;}
.cta-neon-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.55;pointer-events:none;}
.cta-neon-glow.g1{width:340px;height:340px;background:var(--magenta);top:-120px;left:-80px;}
.cta-neon-glow.g2{width:300px;height:300px;background:var(--sun);bottom:-140px;right:-60px;opacity:0.35;}
.cta-subtext{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--sun);font-size:14px;margin-top:18px;letter-spacing:0.02em;}

/* ---------- Pagina-hero: kleinere versie van de homepage-hero, voor elke binnenpagina ---------- */
.page-hero{
  position:relative;overflow:hidden;padding:64px 0 56px;
  background:
    radial-gradient(ellipse 700px 450px at 88% 10%, rgba(255,184,0,0.28), transparent 60%),
    radial-gradient(ellipse 800px 600px at 10% 95%, rgba(198,63,103,0.3), transparent 55%),
    linear-gradient(125deg, var(--dark-bg) 0%, #2A1354 50%, var(--violet-deep) 100%);
}
.page-hero .container{position:relative;z-index:1;}
.page-hero .eyebrow{color:#fff;opacity:0.9;}
.page-hero .eyebrow::before{background:var(--sun);}
.page-hero h1{color:#fff;font-size:clamp(32px,5vw,52px);line-height:1.08;max-width:720px;}
.page-hero h1 .hl{
  font-family:'Permanent Marker',cursive;font-weight:400;text-transform:uppercase;
  background:linear-gradient(100deg,var(--sun),#fff 35%,var(--magenta));-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:rotate(-1.5deg);display:inline-block;
}
.page-hero p{color:rgba(255,255,255,0.82);font-size:16.5px;max-width:560px;margin-top:16px;}
.page-hero-crumb{font-size:12.5px;color:rgba(255,255,255,0.55);margin-bottom:14px;}
.page-hero-crumb a{color:rgba(255,255,255,0.75);text-decoration:none;}
.page-hero-crumb a:hover{color:#fff;}

/* ---------- Foto-variant van de pagina-hero — echte foto i.p.v. platte verloopkleur, voor het
   "voelt leeg" gevoel op binnenpagina's t.o.v. de homepage-hero. ---------- */
.page-hero-photo{position:relative;overflow:hidden;background:none;}
.page-hero-photo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.page-hero-photo-scrim{
  position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(21,10,40,0.88) 0%, rgba(21,10,40,0.68) 38%, rgba(21,10,40,0.35) 68%, rgba(21,10,40,0.2) 100%);
}
.page-hero-photo .container{position:relative;z-index:2;}

/* ---------- Hover op de 3 pillar-kaarten (was helemaal statisch — geen enkele reactie op hover) ---------- */
.pillar-card{transition:transform .25s ease, box-shadow .25s ease;}
.pillar-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -18px rgba(90,40,110,0.32);}
.pillar-card .pillar-photo img{transition:transform .5s ease;}
.pillar-card:hover .pillar-photo img{transform:scale(1.08);}

/* ---------- Persoonlijke tijdlijn (Over mij) — verticale lijn met genummerde stops ---------- */
.life-timeline{position:relative;max-width:680px;margin:0 auto;}
.life-timeline::before{
  content:"";position:absolute;left:25px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--violet-deep),var(--magenta),var(--sun));
}
.life-timeline-item{position:relative;padding-left:72px;padding-bottom:42px;}
.life-timeline-item:last-child{padding-bottom:0;}
.life-timeline-num{
  position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  box-shadow:0 10px 24px -8px rgba(168,85,247,0.6);z-index:1;
}
.life-timeline-item h3{font-size:19px;margin-bottom:8px;}
.life-timeline-item p{color:var(--muted);font-size:14.5px;line-height:1.75;}
@media(max-width:640px){
  .life-timeline::before{left:20px;}
  .life-timeline-item{padding-left:56px;padding-bottom:34px;}
  .life-timeline-num{width:42px;height:42px;font-size:14px;}
}

/* ---------- Volle-breedte foto-band met uitgelicht citaat (manifest-achtige onderbreking) ---------- */
.quote-band{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;}
.quote-band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.quote-band-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(12,6,24,0.75) 0%, rgba(12,6,24,0.55) 50%, rgba(12,6,24,0.8) 100%);}
.quote-band .container{position:relative;z-index:2;text-align:center;}
.quote-band p{
  font-family:'Space Grotesk',sans-serif;font-weight:600;color:#fff;
  font-size:clamp(22px,3.6vw,36px);line-height:1.35;max-width:780px;margin:0 auto;
  text-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.quote-band-sub{margin-top:18px;font-family:'Caveat',cursive;font-size:20px;color:var(--sun);}

/* ---------- Simpele lichte hero-variant voor juridische pagina's (leesbaarheid > flair) ---------- */
.page-hero-plain{background:var(--panel-2);padding:56px 0 44px;border-bottom:1px solid var(--border);}
.page-hero-plain h1{font-size:clamp(28px,4vw,40px);}
.page-hero-plain p{color:var(--muted);font-size:15px;max-width:560px;margin-top:14px;}

/* ---------- Content-secties op binnenpagina's: prose-stijl voor lange lopende tekst ---------- */
.prose{max-width:760px;}
.prose h2{font-size:22px;margin:36px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:14px;color:var(--muted);font-size:15px;line-height:1.75;}
.prose ul{margin:0 0 14px;padding-left:22px;color:var(--muted);font-size:15px;line-height:1.75;}
.prose li{margin-bottom:6px;}
.prose strong{color:var(--ink);}
.prose a{color:var(--magenta);font-weight:600;}

/* ---------- Twee-koloms feature-rij (afbeelding + tekst, herbruikbaar op dienstenpagina's) ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:880px){.feature-row{grid-template-columns:1fr;gap:32px;}}
.feature-row.reverse .feature-row-photo{order:2;}
@media(max-width:880px){.feature-row.reverse .feature-row-photo{order:0;}}
.feature-row-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);position:relative;aspect-ratio:4/3.2;}
.feature-row-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.feature-row h3{font-size:clamp(22px,3vw,28px);margin-bottom:14px;}
.feature-row p{color:var(--muted);font-size:15px;line-height:1.7;margin-bottom:16px;}
.feature-row .edge-list{margin-bottom:0;}
.feature-row .edge-list li::before{color:var(--magenta);}

/* ---------- Team/persoon-kaart (voor Over ons) ---------- */
.person-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:26px;text-align:center;box-shadow:var(--shadow);}
.person-card-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;margin:0 auto 16px;border:3px solid var(--panel-2);}
.person-card-photo img{width:100%;height:100%;object-fit:cover;}
.person-card h4{font-size:16px;margin-bottom:4px;}
.person-card p{font-size:13px;color:var(--muted-2);}

/* ---------- Artikel/blog-kaart (Kennisbank) ---------- */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:880px){.article-grid{grid-template-columns:1fr;}}
.article-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;}
.article-card:hover{transform:translateY(-5px);box-shadow:0 24px 46px -18px rgba(90,40,110,0.3);}
.article-card-photo{height:170px;overflow:hidden;}
.article-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.article-card:hover .article-card-photo img{transform:scale(1.08);}
.article-card-body{padding:22px 24px 26px;}
.article-card-date{font-size:11.5px;color:var(--muted-2);font-family:'JetBrains Mono',monospace;margin-bottom:10px;display:block;}
.article-card h4{font-size:16.5px;margin-bottom:10px;line-height:1.35;}
.article-card p{font-size:13.5px;color:var(--muted);margin-bottom:14px;}
.article-card a{font-weight:700;font-size:13px;color:var(--ink);text-decoration:none;}
.article-card a::after{content:" →";}

/* ---------- Contactkaart met icoon (adres/telefoon/mail/whatsapp) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:36px;}}
.contact-card{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--border);}
.contact-card:last-child{border-bottom:none;}
.contact-card-icon{
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet-deep),var(--magenta));box-shadow:0 10px 20px -8px rgba(168,85,247,0.6);
}
.contact-card-icon svg{width:20px;height:20px;}
.contact-card h4{font-size:14.5px;margin-bottom:4px;}
.contact-card p, .contact-card a{font-size:14.5px;color:var(--muted);text-decoration:none;}
.contact-card a:hover{color:var(--magenta);}

/* ---------- Vergelijkingskaarten (bijv. SEO vs. SEA) — twee kolommen, iconen i.p.v. tekstblokken ---------- */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.compare-grid{grid-template-columns:1fr;}}
.compare-card{background:var(--panel);border:2px solid var(--border);border-radius:20px;padding:28px;}
.compare-card.highlight{border-color:var(--magenta);box-shadow:0 20px 50px -20px rgba(168,85,247,0.35);}
.compare-card-icon{
  width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--violet-deep),var(--magenta));box-shadow:0 12px 24px -10px rgba(168,85,247,0.6);
}
.compare-card-icon svg{width:24px;height:24px;}
.compare-card h4{font-size:19px;margin-bottom:6px;}
.compare-card-tag{font-size:12.5px;color:var(--muted-2);margin-bottom:16px;display:block;}
.compare-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.compare-card ul li{display:flex;gap:9px;font-size:14px;color:var(--muted);}
.compare-card ul li::before{content:"✓";color:var(--success);font-weight:700;flex:0 0 auto;}

/* ---------- Tip-kaarten (icoon + korte tekst) i.p.v. lopende lijst-tekst ---------- */
.tip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:640px){.tip-grid{grid-template-columns:1fr;}}
.tip-card{display:flex;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 20px;}
.tip-card-num{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sun),var(--sun-deep));color:#2A1600;font-weight:700;font-size:14px;
}
.tip-card h5{font-size:14.5px;margin-bottom:4px;}
.tip-card p{font-size:13px;color:var(--muted);}

/* ---------- Pull-quote: groot uitgelicht citaat, breekt lange tekst visueel op ---------- */
.pull-quote{
  position:relative;background:linear-gradient(135deg,var(--violet-deep),var(--magenta));border-radius:20px;
  padding:32px 36px;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;line-height:1.4;
  margin:8px 0;box-shadow:0 24px 50px -20px rgba(168,85,247,0.5);
}
.pull-quote::before{content:"\201C";position:absolute;top:6px;left:20px;font-size:60px;font-family:Georgia,serif;opacity:0.3;line-height:1;}

/* ---------- Mini stap-flow (3 stappen, compacter dan .journey) ---------- */
.mini-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:640px){.mini-steps{grid-template-columns:1fr;}}
.mini-step{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center;}
.mini-step-icon{
  width:44px;height:44px;border-radius:13px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet-deep),var(--magenta));box-shadow:0 10px 20px -8px rgba(168,85,247,0.6);
}
.mini-step-icon svg{width:20px;height:20px;}
.mini-step h5{font-size:14.5px;margin-bottom:6px;}
.mini-step p{font-size:12.5px;color:var(--muted);}

/* ---------- Vertrouwens-badges (certificeringen, i.p.v. alleen tekst-USPs) ---------- */
.badges-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;}
.badge-item{
  display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);
  border-radius:100px;padding:10px 22px 10px 14px;box-shadow:var(--shadow);
}
.badge-item img{height:32px;width:auto;display:block;}
.badge-item-text{display:flex;flex-direction:column;line-height:1.25;}
.badge-item-text strong{font-size:13px;color:var(--ink);}
.badge-item-text span{font-size:11px;color:var(--muted-2);}
.badge-item-icon{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--violet-deep),var(--magenta));
}
.badge-item-icon svg{width:16px;height:16px;}

/* ---------- Checklist-strip (korte, scanbare vertrouwens-punten) ---------- */
.why-strip{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;}
.why-item{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;}
.why-item .check{
  width:24px;height:24px;border-radius:50%;background:var(--pink-warm);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 24px;
}

/* ---------- Sticky groeiscan-CTA (rechtsonder, verschijnt na scrollen voorbij de hero) ---------- */
.sticky-cta{
  position:fixed;right:22px;bottom:22px;z-index:60;
  background:linear-gradient(100deg,var(--sun),var(--sun-deep));color:#2A1600;font-weight:700;font-size:14px;
  padding:14px 22px;border-radius:100px;text-decoration:none;box-shadow:0 16px 34px -12px rgba(242,132,26,0.6);
  display:flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s;
}
.sticky-cta.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.sticky-cta:hover{transform:translateY(-2px);}
@media(max-width:640px){.sticky-cta{right:14px;bottom:14px;padding:12px 18px;font-size:13px;}}

/* ---------- Vertrouwd-door logobalk (klantlogo's, rustig/grijswaarden zodat het niet schreeuwt) ---------- */
.trust-bar{text-align:center;}
.trust-bar-label{font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px;}
.trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,5vw,52px);}
.trust-logos span{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--muted-2);opacity:0.75;letter-spacing:0.01em;transition:opacity .15s,color .15s;}
.trust-logos span:hover{opacity:1;color:var(--ink);}

/* ---------- Proof-stats: donkere balk met geanimeerde cijfers (count-up via data-count-to, zie layout.js) ---------- */
.proof-stats{background:var(--dark-bg);color:#fff;border-radius:28px;padding:44px clamp(24px,5vw,56px);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;box-shadow:0 30px 60px -24px rgba(21,10,40,0.55);}
.proof-stat{display:flex;flex-direction:column;gap:6px;}
.proof-stat-value{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,36px);
  background:linear-gradient(100deg,#fff,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent;}
.proof-stat-label{font-size:12.5px;color:var(--dark-muted);text-transform:uppercase;letter-spacing:0.04em;}

/* ---------- Methode/reis: horizontale stappenrij met verbindingslijn ---------- */
.journey{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;}
@media(max-width:920px){.journey{grid-template-columns:repeat(3,1fr);row-gap:36px;}}
@media(max-width:560px){.journey{grid-template-columns:1fr;}}
.journey-step{position:relative;text-align:center;padding:0 10px;}
.journey-step-num{
  width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  box-shadow:0 12px 24px -10px rgba(168,85,247,0.6);position:relative;z-index:1;
}
.journey-step h4{font-size:14.5px;margin-bottom:6px;}
.journey-step p{font-size:12.5px;color:var(--muted);}
.journey-step::before{
  content:"";position:absolute;top:26px;left:-50%;width:100%;height:2px;background:var(--border-strong);z-index:0;
}
.journey-step:first-child::before{display:none;}
@media(max-width:920px){.journey-step::before{display:none;}}
.section-dark .journey-step p{color:var(--dark-muted);}
.section-dark .journey-step::before{background:var(--dark-border);}

/* ---------- Dichte diensten-grid (meer volume/detail dan de 3 hoofdkaarten) ---------- */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:920px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.service-grid{grid-template-columns:1fr;}}
.service-grid-item{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.service-grid-item:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(90,40,110,0.28);border-color:var(--border-strong);}
.mini-step, .tip-card, .compare-card{transition:transform .25s ease, box-shadow .25s ease;}
.mini-step:hover, .tip-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(90,40,110,0.25);}
.compare-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -18px rgba(90,40,110,0.3);}
.service-grid-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:var(--panel-2);margin-bottom:14px;
}
.service-grid-item h4{font-size:15px;margin-bottom:6px;}
.service-grid-item p{font-size:13px;color:var(--muted);}