/* ═══════════════════════════════════════════════════════════
   WEBGROEIERS — LICHT & CLEAN (all-green)
   Manrope · Wit/off-white · Groen #059669 accent
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colours */
  --white:       #FFFFFF;
  --off-white:   #F2FBF6;
  --surface:     #E8F7EF;
  /* Groen is de merkkleur. Deze variabelen heetten ooit --amber, uit een
     eerdere amber-versie van de site. De oude namen blijven als alias
     bestaan zodat bestaande regels blijven werken; gebruik in nieuwe code
     --green. */
  --hero-marge:  28px;   /* marge rond de hero, maat van yieldfund.com */
  --topbalk-h:   40px;   /* smalle balk boven de hero */
  --green:       #059669;
  --green-dark:  #047857;
  --green-soft:  #D1FAE5;
  --green-bright:#34d399;   /* leesbaar groen op donkere vlakken */
  --amber:       var(--green-dark);
  --accent:      #FBB024;
  --accent-soft: #FEF0D0;
  --accent-dark: #C77E00;
  --amber-dark:  var(--green-dark);
  --amber-light: var(--green-soft);
  --text:        #0F1A17;
  --text-soft:   #3C534A;
  --text-muted:  #63796F;
  --border:      #DBEDE4;
  --navy:        #07291F;
  --navy-mid:    #0E3D2C;

  /* Typography */
  --font:        'Manrope', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --section-y:   clamp(4rem, 8vw, 7rem);
  --container:   1200px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);

  /* Transitions */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    150ms;
  --dur-med:     300ms;
  --dur-slow:    500ms;
}

/* ── RESET & BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
address { font-style: normal; }

/* ── ACCESSIBILITY ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: .5rem 1rem;
  background: var(--amber);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius);
  z-index: 9999;
  transition: top var(--dur-fast);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

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

/* ── LAYOUT ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* ── COLOUR UTILS ───────────────────────────────────────── */
.amber { color: var(--amber); }
em.amber { font-style: normal; color: var(--amber); }

/* ── TYPOGRAPHY HELPERS ─────────────────────────────────── */
.section-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .75rem;
}

.section-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 1.0625rem;
  color: var(--text-soft);
  max-width: 600px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  background: var(--amber);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  border-radius: 50px;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 2px 6px -2px rgba(11,15,14,.22);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--amber-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(11,15,14,.30);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .875rem 1.5rem;
  color: var(--text);
  font-weight: 600;
  font-size: .9375rem;
  border: 1.5px solid var(--border);
  border-radius: 50px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.btn-ghost:hover {
  border-color: var(--text);
  background: rgba(26,29,33,.04);
}

.btn-amber {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  background: var(--amber);
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  border-radius: 50px;
  transition: background var(--dur-fast), transform var(--dur-fast);
  box-shadow: 0 2px 6px -2px rgba(11,15,14,.22);
}
.btn-amber:hover {
  background: var(--amber-dark);
  transform: translateY(-1px);
}

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .875rem 1.5rem;
  color: rgba(255,255,255,.8);
  font-weight: 600;
  font-size: .9375rem;
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 50px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.btn-ghost-light:hover {
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

.btn-full { width: 100%; justify-content: center; }

.btn-google {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1.5rem;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  font-weight: 600;
  font-size: .9375rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn-google:hover {
  border-color: #047857;
  box-shadow: 0 3px 8px -3px rgba(11,15,14,.22);
}

/* ── GLASS CARD ─────────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* ── ANIMATION ──────────────────────────────────────────── */
/* Start hidden; JS adds .is-visible; CSS animation reveals after 800ms as fallback */
@keyframes reveal-fallback {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

[data-animate] {
  animation: reveal-fallback 600ms 800ms var(--ease) both;
}
[data-animate].is-visible {
  animation: reveal-fallback 500ms 0ms var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════
   NAVIGATIE
   ══════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-fast);
}

/* Scrolled: witte achtergrond + donkere tekst */
.site-header.scrolled {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 68px;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--text);
  text-shadow: none;
  flex-shrink: 0;
  text-decoration: none;
  transition: color var(--dur-fast), text-shadow var(--dur-fast);
}
.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--amber);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-soft);
  text-shadow: none;
  transition: color var(--dur-fast), text-shadow var(--dur-fast);
}
.nav-links a:hover { color: var(--text); }

.nav-cta {
  padding: .625rem 1.25rem;
  background: var(--amber) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50px;
  transition: background var(--dur-fast) !important;
}
.nav-cta:hover { background: var(--amber-dark) !important; }

/* ── Scrolled state: donkere nav-tekst ── */
.site-header.scrolled .nav-logo {
  color: var(--text);
  text-shadow: none;
}
.site-header.scrolled .nav-links a {
  color: var(--text-soft);
  text-shadow: none;
}
.site-header.scrolled .nav-links a:hover {
  color: var(--text);
}
.site-header.scrolled .hamburger span {
  background: var(--text);
}

/* ── Mobile trigger ─ */
.mobile-menu__trigger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text);
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.mobile-menu__trigger:hover { background: var(--off-white); }

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast);
}

/* Open state */
.mobile-menu__trigger[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu__trigger[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}
.mobile-menu__trigger[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile overlay (fullscreen kit) ── */
.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100%;
  background: var(--white);
  z-index: 200;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 1.5rem clamp(1.25rem, 5vw, 2.5rem) 2.5rem;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.mobile-menu__overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mobile-menu__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  color: var(--text);
  margin-bottom: 1rem;
  transition: background var(--dur-fast);
}
.mobile-menu__close:hover { background: var(--off-white); }

.mobile-menu__panel { flex: 1; }

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.mobile-menu__item {
  display: block;
  padding: 1rem 1.25rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--text);
  border-radius: var(--radius);
  letter-spacing: -.02em;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mobile-menu__item:hover { background: var(--off-white); }
.mobile-menu__item--cta {
  background: var(--amber);
  color: #fff;
  margin-top: .5rem;
}
.mobile-menu__item--cta:hover {
  background: var(--amber-dark);
}

.mobile-menu__footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.mobile-menu__footer p {
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.mobile-menu__phone {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-menu__trigger { display: flex; }
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */

.hero {
  background: var(--white);
  padding-block: clamp(4rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem);
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

/* Left: text */
.hero-text { display: flex; flex-direction: column; gap: 1.5rem; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-headline {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--text);
  margin: 0;
}

.hero-sub {
  font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 480px;
  margin: 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: .5rem;
}
.stars { color: #F5B400; font-size: 1rem; letter-spacing: 2px; }
.trust-text { font-size: .875rem; color: var(--text-muted); }
.trust-text strong { color: var(--text); }

/* Right: video frame (jkc-stijl) */
.hero-media { display: flex; justify-content: center; }

.hero-video-frame {
  width: 100%;
  max-width: 580px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  background: var(--off-white);
  aspect-ratio: 16/10;
}

.hero-video-slot {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.hero-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-hint {
  position: absolute;
  bottom: 4rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}
.video-play-hint span {
  font-size: .6875rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.4);
  padding: .25rem .625rem;
  border-radius: 50px;
  white-space: nowrap;
}

.video-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.badge-dot {
  width: 7px; height: 7px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(.85); }
}

@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }
  .hero-media { order: -1; }
  .hero-video-frame { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   HERO — FULL-BLEED VIDEO (jkc-stijl)
   ══════════════════════════════════════════════════════════ */

.hero--video {
  position: relative;
  width: 100%;
  /* Ingezet kader met afgeronde hoeken, zoals yieldfund.com: 28px marge
     links, rechts en boven, niets onder. De nav valt in de bovenrand van
     de hero, want de balk erboven (40px) plus deze marge maken daar ruimte
     voor. Full-bleed werkt hier niet: dan zweeft de nav half over wit. */
  padding: 0 var(--hero-marge);
  margin-top: var(--hero-marge);
  background: var(--white);
  display: block;
}

/* Inner container: clipped + rounded video area */
.hero-video-inner {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 520px;
  max-height: 900px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #0d0e10;
}

/* Background video */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

/* ── Hero slideshow: AI-stills MKB-bedrijven, Ken Burns crossfade ── */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  will-change: opacity, transform;
  animation: heroFade 30s infinite, heroZoom 30s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s,  0s;  }
.hero-slide:nth-child(2) { animation-delay: 6s,  6s;  }
.hero-slide:nth-child(3) { animation-delay: 12s, 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s, 18s; }
.hero-slide:nth-child(5) { animation-delay: 24s, 24s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  18%  { opacity: 1; }
  22%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes heroZoom {
  0%   { transform: scale(1.03); }
  22%  { transform: scale(1.12); }
  100% { transform: scale(1.12); }
}

/* Gradient scrim — subtle top, strong bottom */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Full-width dark overlay for nav legibility + bottom text readability */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.18) 15%,
      rgba(0, 0, 0, 0.20) 40%,
      rgba(0, 0, 0, 0.68) 75%,
      rgba(0, 0, 0, 0.82) 100%
    );
}

/* Content wrapper — sits above scrim */
.hero-video-content {
  position: relative;
  z-index: 2;
  width: 100%;
  /* De bovenmarge houdt de inhoud onder de nav, ook als de kop lang wordt.
     112px is de maat die yieldfund.com hier gebruikt. */
  padding-top: 112px;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.hero-video-text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 640px;
}

/* Light variants of existing hero text classes */
.hero-eyebrow--light {
  color: rgba(255, 255, 255, 0.75);
}
.hero-eyebrow--light .eyebrow-dot {
  background: var(--amber, #059669);
}

.hero-headline--light {
  color: #ffffff;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

.hero-sub--light {
  color: rgba(255, 255, 255, 0.85);
  max-width: 480px;
  text-shadow: 0 1px 6px rgba(0,0,0,.3);
}

/* Ghost white CTA */
.btn-ghost--white {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.65);
  background: transparent;
}
.btn-ghost--white:hover,
.btn-ghost--white:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
}

/* Trust / rating badge on dark background */
.hero-trust--light .stars {
  color: #F5B400;
}
.trust-text--light {
  color: rgba(255, 255, 255, 0.8);
}
.trust-text--light strong {
  color: #ffffff;
}


/* ── Explicit amber on primary CTA inside video hero ── */
.hero--video .btn-primary {
  background: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px -8px rgba(11,15,14,.35) !important;
}
.hero--video .btn-primary:hover {
  background: #047857 !important;
}
/* ── Reduced-motion: pause video, show poster ── */
@media (prefers-reduced-motion: reduce) {
  /* Pauzeer de hero-video; poster blijft zichtbaar */
  .hero-bg-video { animation-play-state: paused; }
}

/* ── Mobile: stronger scrim, stacked CTAs ── */
@media (max-width: 640px) {
  .hero--video {
    padding: 0 var(--hero-marge);
  }
  .hero-video-inner {
    height: 78vh;
    min-height: 460px;
    border-radius: 14px;
  }
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.30) 35%,
      rgba(0, 0, 0, 0.78) 72%,
      rgba(0, 0, 0, 0.88) 100%
    );
  }
  .hero-video-text {
    gap: 1rem;
  }
  .hero-headline--light {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost--white {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════
   TRUST STRIP
   ══════════════════════════════════════════════════════════ */

.trust-strip .container { display: block; }

.trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.logo-pill {
  display: inline-block;
  padding: .375rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   STORYTELLING
   ══════════════════════════════════════════════════════════ */

.storytelling {
  padding-block: var(--section-y);
  background: var(--white);
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.story-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med);
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.story-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.story-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text);
  letter-spacing: -.01em;
}

.story-card p {
  font-size: .9375rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Stats row */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
  min-width: 140px;
}

.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat-plus { font-size: .6em; }

.stat-label {
  font-size: .875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .stat-divider { display: none; }
  .stats-row { gap: 2rem; }
  .stat-item { min-width: 45%; }
}

/* ══════════════════════════════════════════════════════════
   GOOGLE REVIEWS
   ══════════════════════════════════════════════════════════ */

.reviews-section {
  padding-block: var(--section-y);
  background: var(--off-white);
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .875rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  margin-left: .75rem;
  vertical-align: middle;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review-stars {
  color: var(--amber);
  font-size: 1.125rem;
  letter-spacing: 2px;
}

.review-quote {
  font-size: .9375rem;
  color: var(--text-soft);
  line-height: 1.65;
  flex: 1;
  quotes: '"' '"';
}
.review-quote::before { content: open-quote; }
.review-quote::after { content: close-quote; }

.review-footer {
  display: flex;
  align-items: center;
  gap: .875rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  background: var(--amber-light);
  color: var(--amber-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--amber);
}

.review-name {
  display: block;
  font-size: .9375rem;
  color: var(--text);
  font-weight: 700;
}

.review-biz {
  font-size: .8125rem;
  color: var(--text-muted);
  display: block;
}
.review-biz em { font-style: italic; }

.reviews-cta { text-align: center; }

/* ══════════════════════════════════════════════════════════
   WERK / CASES
   ══════════════════════════════════════════════════════════ */

.work-section {
  padding-block: var(--section-y);
  background: var(--white);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med);
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Browser frame mockup */
.browser-frame {
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}
.browser-dot:nth-child(1) { background: #ff5f57; }
.browser-dot:nth-child(2) { background: #febc2e; }
.browser-dot:nth-child(3) { background: #28c840; }

.browser-url {
  flex: 1;
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .25rem .875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-screen {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.browser-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .6s var(--ease);
}
.case-card:hover .browser-screen img {
  transform: scale(1.03);
}

.case-info {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.case-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.case-tag {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--off-white);
  padding: .25rem .75rem;
  border-radius: 50px;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════ */

.pricing-section {
  padding-block: var(--section-y);
  background: var(--off-white);
}

.pricing-category {
  margin-bottom: 3rem;
}

.pricing-cat-label {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 780px;
}

.price-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med), box-shadow var(--dur-med);
}
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.price-card--featured {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber), var(--shadow-md);
}

.price-label-popular {
  position: absolute;
  top: -1px;
  right: 1.5rem;
  background: var(--amber);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 0 0 var(--radius) var(--radius);
}

.price-card-header {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.price-badge {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.price-setup {
  font-size: .875rem;
  color: var(--text-muted);
  display: block;
}

.price-monthly {
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

.price-big {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text);
  line-height: 1;
}

.price-period {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  flex: 1;
}
.price-features li {
  font-size: .9375rem;
  color: var(--text-soft);
  padding-left: 1.375rem;
  position: relative;
}
.price-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-weight: 700;
}

.price-note {
  font-size: .8125rem;
  color: var(--amber-dark);
  font-weight: 600;
}

.price-disclaimer {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: .5rem;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   MARKETING
   ══════════════════════════════════════════════════════════ */

.marketing-section {
  padding-block: var(--section-y);
  background: var(--white);
}

.marketing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.marketing-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med), box-shadow var(--dur-med);
}
.marketing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.marketing-icon {
  font-size: 2.25rem;
  margin-bottom: 1rem;
  display: block;
}

.marketing-card h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: .25rem;
}

.marketing-sub {
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--amber-dark);
  margin-bottom: .875rem;
}

.marketing-card p:not(.marketing-sub) {
  font-size: .9375rem;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.marketing-points {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.marketing-points li {
  font-size: .875rem;
  color: var(--text-soft);
  padding-left: 1.25rem;
  position: relative;
}
.marketing-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--amber);
  font-size: .8em;
}

/* ══════════════════════════════════════════════════════════
   AUTORANQ CALLOUT — enige donkere sectie
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   AUTORANQ SHOWCASE (ingelijste gradient-card + product-mock)
   ══════════════════════════════════════════════════════════ */
.autoranq-section {
  padding-block: var(--section-y);
  background: var(--off-white);
}

.autoranq-card {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(140deg, #0A1410 0%, #0E2A20 52%, #064E3B 100%);
  box-shadow: 0 30px 80px -30px rgba(4,120,87,.45), 0 2px 0 rgba(255,255,255,.04) inset;
}
/* glossy sheen */
.autoranq-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 42%);
  pointer-events: none;
}
/* groene radial glow */
.autoranq-card::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 55%;
  height: 150%;
  background: radial-gradient(ellipse at center, rgba(16,185,129,.22) 0%, transparent 70%);
  pointer-events: none;
}

.autoranq-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.autoranq-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: .875rem;
}
.autoranq-heading {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--white);
  margin-bottom: 1rem;
}
.autoranq-heading em.amber { color: #34d399; }
.autoranq-sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 1.75rem;
}
.autoranq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.autoranq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.aq-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .4rem .8rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.aq-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,.8); }

/* ── Autoranq browser frame (echte product-preview) ── */
.autoranq-browser {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.75);
}
.autoranq-browser-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.autoranq-browser-bar .bdot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.autoranq-browser-bar .bdot:nth-child(1){ background:#ff5f57; }
.autoranq-browser-bar .bdot:nth-child(2){ background:#febc2e; }
.autoranq-browser-bar .bdot:nth-child(3){ background:#28c840; }
.autoranq-browser-url {
  margin-left: .6rem; font-size: .75rem; color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.25); border-radius: 6px; padding: .2rem .7rem;
}
.autoranq-browser-screen {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #fff;
}
.autoranq-browser-screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

@media (max-width: 860px) {
  .autoranq-inner { grid-template-columns: 1fr; }
  .autoranq-visual { order: 2; }
}

/* ══════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════ */

.contact-section {
  padding-block: var(--section-y);
  background: var(--off-white);
}

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-inner { grid-template-columns: 1fr; }
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.5rem;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--text);
  font-size: .9375rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.contact-method:hover {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

.contact-icon { font-size: 1.25rem; }

/* Contact form */
.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.form-group label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}

.form-group input,
.form-group textarea {
  font-family: var(--font);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--off-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  background: var(--white);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-privacy {
  font-size: .8125rem;
  color: var(--text-muted);
  text-align: center;
}
.form-privacy a { color: var(--amber-dark); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.site-footer-outer {
  padding: clamp(20px, 3vw, 40px);
  background: var(--white);
}

.site-footer {
  background:
    radial-gradient(70% 120% at 92% 8%, rgba(5,150,105,.22) 0%, rgba(5,150,105,0) 58%),
    linear-gradient(135deg, #0B0F0E 0%, #121917 58%, #16211D 100%);
  color: rgba(255,255,255,.75);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.15);
}

/* Subtle gloss sheen at top */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  z-index: 0;
}

/* Amber radial glow accent */
.site-footer::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 50%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(16,185,129,.07) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer-outer { padding: 16px; }
  .site-footer { border-radius: 16px; }
}

.footer-brand .nav-logo {
  color: var(--white);
  margin-bottom: 1rem;
  display: inline-flex;
}
.footer-brand .logo-mark {
  background: var(--amber);
}
.footer-brand .logo-text {
  color: var(--white);
}

.footer-tagline {
  font-size: .9375rem;
  color: rgba(255,255,255,.5);
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: .875rem;
}
.footer-social a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.7);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.footer-social a:hover {
  background: var(--amber);
  color: #fff;
}

.footer-nav-heading {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Stond op .4 en haalde 3.73:1. Deze letters zijn 12px, dus 4.5
     is de grens; .62 brengt het op ruim 5. */
  color: rgba(255,255,255,.62);
  margin-bottom: 1rem;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.footer-nav a {
  font-size: .9375rem;
  color: rgba(255,255,255,.6);
  transition: color var(--dur-fast);
}
.footer-nav a:hover { color: var(--white); }

.footer-nav address p {
  margin-bottom: .375rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  font-size: .875rem;
  /* Stond op .35 en haalde 3.19:1. */
  color: rgba(255,255,255,.6);
}
.footer-bottom a {
  color: rgba(255,255,255,.5);
  transition: color var(--dur-fast);
}
.footer-bottom a:hover { color: var(--white); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE UTILITIES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cases-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .marketing-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── Fixed-nav body offset + hero underlay ── */
body {
  padding-top: 68px; /* compensate for fixed header */
}
/* Nav is now over a light background — no negative margin needed */
/* .hero--video margin-top reset intentionally removed */

/* ── Pricing: single-column on very narrow screens ── */
@media (max-width: 420px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════
   SERVICES GRID (Webtify-stijl productkaarten) + SVG-iconen
   ══════════════════════════════════════════════════════════ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: 2rem 1.9rem 1.9rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(7,41,31,.04);
  text-decoration: none;
  color: var(--text);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #059669, #34d399);
  opacity: 0; transition: opacity .35s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -22px rgba(7,41,31,.35);
  border-color: #BFE6D2;
}
.service-card:hover::before { opacity: 1; }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--amber-light); color: #047857;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.service-card p { color: var(--text-soft); line-height: 1.6; font-size: .95rem; flex-grow: 1; }
.service-link { font-weight: 700; color: #047857; font-size: .9rem; display: inline-flex; gap: .35rem; align-items: center; transition: gap .3s; }
.service-card:hover .service-link { gap: .6rem; }
.service-card--featured { border-color: #BFE6D2; box-shadow: 0 10px 26px -16px rgba(11,15,14,.26); }
.service-badge {
  position: absolute; top: 1.1rem; right: 1.1rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #047857; background: var(--amber-light);
  padding: .25rem .6rem; border-radius: 999px;
}
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }

/* Emoji -> SVG iconen */
.marketing-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px;
  background: var(--amber-light); color: #047857; margin-bottom: 1rem;
}
.marketing-icon svg { width: 28px; height: 28px; }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; color: #047857; }
.contact-icon svg { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════════════════
   COMPONENT-CONSISTENTIE (clean, uniforme cards + AI-logo-strip)
   ══════════════════════════════════════════════════════════ */
/* Eén clean card-stijl voor alle content-cards */
.glass-card {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(7,41,31,.05);
}
.service-card,
.marketing-card,
.case-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 3px rgba(7,41,31,.05);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.service-card:hover,
.marketing-card:hover,
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -22px rgba(7,41,31,.30);
  border-color: #BFE6D2;
}
/* groene top-accentbalk weg voor uniforme, rustige look */
.service-card::before { display: none; }

/* AI-vindbaarheid logo-strip */
.ai-visibility {
  text-align: center;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.ai-visibility-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}
.ai-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.4rem, 4vw, 3rem);
}
.ai-logo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #9AA8A0;
  opacity: .9;
  transition: color .3s, opacity .3s;
}
.ai-logo svg { width: 21px; height: 21px; flex-shrink: 0; }
.ai-logo span { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.ai-logo:hover { color: var(--text); opacity: 1; }

/* ══════════════════════════════════════════════════════════
   SHOWCASE IMAGE-CARDS · REVIEW-AVATARS · AUTORANQ LICHT · KENNISBANK
   ══════════════════════════════════════════════════════════ */
/* Showcase: FULL-IMAGE-BACKGROUND cards (echte foto vult de kaart) */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.case-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(7,41,31,.08);
  transition: transform .35s var(--ease), box-shadow .35s;
  isolation: isolate;
}
.case-card:hover { transform: translateY(-5px); box-shadow: 0 26px 56px -22px rgba(7,41,31,.45); }
.case-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  z-index: 0;
  transition: transform .7s var(--ease);
}
.case-card:hover .case-bg { transform: scale(1.06); }
.case-overlay {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .5rem;
  padding: 1.6rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(8,20,15,.88) 0%, rgba(8,20,15,.55) 32%, rgba(8,20,15,.12) 58%, rgba(8,20,15,0) 78%);
}
.case-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.case-desc { font-size: .9rem; color: rgba(255,255,255,.88); line-height: 1.5; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.case-services { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.case-service {
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .28rem .7rem; border-radius: 999px;
}
@media (max-width: 900px) { .cases-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .cases-grid { grid-template-columns: 1fr; } }

/* Review portret-avatars + gouden sterren */
img.review-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--white); box-shadow: 0 2px 8px rgba(7,41,31,.15); }
.review-stars { color: #F5B400; }

/* Autoranq LICHT & clean (override donkere gradient) */
.autoranq-section { background: var(--off-white); }
.autoranq-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 1px 3px rgba(7,41,31,.05); }
.autoranq-card::before, .autoranq-card::after { display: none !important; }
.autoranq-eyebrow { color: #047857; }
.autoranq-heading { color: var(--text); }
.autoranq-heading em.amber { color: #047857; }
.autoranq-sub { color: var(--text-soft); }
.aq-chip { color: #047857; background: var(--amber-light); border: 1px solid #CDEBDC; backdrop-filter: none; -webkit-backdrop-filter: none; }
.aq-dot { background: #047857; box-shadow: none; }
.autoranq-browser { background: var(--white); border: 1px solid var(--border); box-shadow: 0 18px 44px -22px rgba(7,41,31,.25); }
.autoranq-browser-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.autoranq-browser-url { color: var(--text-muted); background: var(--off-white); }

/* Kennisbank */
.kb-section { background: var(--white); }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kb-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(7,41,31,.05); text-decoration: none; color: var(--text); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.kb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(7,41,31,.30); border-color: #BFE6D2; }
.kb-cat { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #047857; }
.kb-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.kb-desc { font-size: .92rem; color: var(--text-soft); line-height: 1.55; flex-grow: 1; }
.kb-meta { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; }
.kb-read { font-weight: 700; color: #047857; font-size: .88rem; }
.kb-time { font-size: .8rem; color: var(--text-muted); }
@media (max-width: 900px) { .kb-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .kb-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   PRICING (Webtify-stijl, 3 clean tiers) + KENNISBANK featured images
   ══════════════════════════════════════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; max-width: 1120px; margin: 0 auto; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.1rem 1.85rem; box-shadow: 0 1px 3px rgba(7,41,31,.05); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -24px rgba(7,41,31,.30); border-color: #BFE6D2; }
.price-card--featured { border-color: #047857; box-shadow: 0 14px 32px -18px rgba(11,15,14,.28); }
.price-popular { position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); background: #047857; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 999px; box-shadow: 0 3px 8px -3px rgba(11,15,14,.30); }
.price-badge { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); background: none; padding: 0; }
.price-amount { display: flex; align-items: baseline; gap: .25rem; margin: .9rem 0 .3rem; }
.price-from { font-size: .85rem; color: var(--text-muted); font-weight: 600; margin-right: .1rem; }
.price-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--text); line-height: 1; }
.price-period { font-size: 1rem; color: var(--text-soft); font-weight: 600; }
.price-tagline { font-size: .92rem; color: var(--text-soft); line-height: 1.5; margin-bottom: 1.3rem; min-height: 2.7em; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.6rem; padding: 0; flex-grow: 1; }
.price-features li { position: relative; padding-left: 1.55rem; font-size: .92rem; color: var(--text-soft); line-height: 1.4; }
.price-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #047857; font-weight: 800; }
.btn-full { width: 100%; justify-content: center; }
.pricing-foot { text-align: center; margin-top: 2.2rem; color: var(--text-soft); font-size: .95rem; }
.pricing-foot a { color: #047857; font-weight: 700; text-decoration: none; }
.pricing-foot a:hover { text-decoration: underline; }
.price-note { font-size: .8rem; color: var(--text-muted); font-weight: 500; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* Kennisbank: featured image + nette spacing */
.kb-section { background: var(--white); padding-block: var(--section-y); }
.kb-card { padding: 0; gap: 0; overflow: hidden; }
.kb-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.kb-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.kb-card:hover .kb-image img { transform: scale(1.05); }
.kb-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.4rem 1.5rem; }

/* ══════════════════════════════════════════════════════════
   SPEELSE HAMBURGER + CLOSE (eigen stijl)
   ══════════════════════════════════════════════════════════ */
.hamburger { gap: 5px; }
.hamburger span {
  height: 2.5px;
  width: 24px;
  border-radius: 99px;
  background: var(--text);
  transition: width .3s var(--ease), transform .35s var(--ease), opacity .25s, background .3s;
}
.hamburger span:nth-child(1) { width: 24px; }
.hamburger span:nth-child(2) { width: 14px; background: var(--amber); }   /* korte groene middenlijn */
.hamburger span:nth-child(3) { width: 19px; }
/* speelse hover: lijnen lijnen netjes uit */
.mobile-menu__trigger:hover .hamburger span { width: 24px; }
.mobile-menu__trigger:hover .hamburger span:nth-child(2) { background: var(--amber-dark); }
/* expanded -> nette X (alle lijnen gelijk) */
.mobile-menu__trigger[aria-expanded="true"] .hamburger span { width: 24px; }
.mobile-menu__trigger[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }

/* Playful close: rond knopje, X draait + kleurt groen op hover */
.mobile-menu__close {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  transition: transform .4s var(--ease), border-color .3s, color .3s, background .3s;
}
.mobile-menu__close svg { transition: transform .4s var(--ease); }
.mobile-menu__close:hover {
  background: var(--amber-light);
  border-color: var(--amber);
  color: var(--amber-dark);
  transform: rotate(90deg);
}
.mobile-menu__close:hover svg { transform: scale(1.1); }

/* ══════════════════════════════════════════════════════════
   PRICING — SIMPELE CARDS met speelse pijl (override)
   ══════════════════════════════════════════════════════════ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 1.85rem 1.8rem 1.7rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(7,41,31,.05);
  text-decoration: none; color: var(--text); min-height: 210px;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; overflow: hidden;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px -24px rgba(7,41,31,.35); border-color: #BFE6D2; }
.price-card--featured { border-color: #047857; box-shadow: 0 14px 32px -18px rgba(11,15,14,.28); }
.price-popular { position: absolute; top: 1.5rem; right: 1.6rem; left: auto; transform: none; background: var(--amber-light); color: #047857; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .25rem .65rem; border-radius: 999px; box-shadow: none; }
.price-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.price-amount { display: flex; align-items: baseline; gap: .25rem; margin: .7rem 0 .5rem; }
.price-from { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.price-big { font-size: 2.3rem; font-weight: 800; letter-spacing: -.04em; color: var(--text); line-height: 1; }
.price-period { font-size: .95rem; color: var(--text-soft); font-weight: 600; }
.price-tagline { font-size: .92rem; color: var(--text-soft); line-height: 1.5; flex-grow: 1; padding-right: 3.2rem; margin-bottom: 1.2rem; }
.price-arrow {
  position: absolute; right: 1.6rem; bottom: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber-light); color: #047857;
  transition: background .35s var(--ease), color .35s, transform .35s;
}
.price-arrow svg { width: 20px; height: 20px; transition: transform .4s var(--ease); }
.price-card:hover .price-arrow { background: #047857; color: #fff; transform: scale(1.08); }
.price-card:hover .price-arrow svg { transform: translateX(3px); }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ══════════════════════════════════════════════════════════
   CASE-PAGINA'S (klantverhalen) + showcase cta-arrow
   ══════════════════════════════════════════════════════════ */
.site-header--solid { background: rgba(255,255,255,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.site-header--solid .nav-logo, .site-header--solid .nav-links a { color: var(--text); }
.case-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; }
.case-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.case-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,20,15,.92) 0%, rgba(8,20,15,.55) 42%, rgba(8,20,15,.25) 100%); }
.case-hero-inner { position: relative; z-index: 2; padding-block: clamp(2.5rem,6vw,5rem); color: #fff; }
.case-back { color: rgba(255,255,255,.85); font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-block; margin-bottom: 1.25rem; transition: color .25s; }
.case-back:hover { color: #fff; }
.case-hero-eyebrow { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #34d399; margin-bottom: .6rem; }
.case-hero-title { font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: .6rem; }
.case-hero-tag { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 540px; margin-bottom: 1.1rem; }
.case-services { display: flex; flex-wrap: wrap; gap: .4rem; }
.case-services--hero .case-service { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); padding: .28rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.case-story { padding-block: var(--section-y); }
.case-story > .container { text-align: center; }
.case-intro { font-size: clamp(1.2rem,2.5vw,1.55rem); font-weight: 600; letter-spacing: -.01em; color: var(--text); line-height: 1.45; max-width: 760px; margin: 0 auto 3rem; }
.case-blocks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 2.5rem; text-align: left; }
.case-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: 0 1px 3px rgba(7,41,31,.05); }
.case-block-num { font-size: .85rem; font-weight: 800; color: #047857; }
.case-block h3 { font-size: 1.15rem; font-weight: 800; margin: .5rem 0 .6rem; letter-spacing: -.02em; }
.case-block p { color: var(--text-soft); line-height: 1.6; font-size: .95rem; }
.case-next { background: var(--off-white); padding-block: var(--section-y); text-align: center; }
.case-next h2 { font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .75rem; }
.case-next p { color: var(--text-soft); margin-bottom: 1.5rem; }
.btn-lg { padding: 1.05rem 2.2rem; font-size: 1.05rem; }
@media (max-width:800px){ .case-blocks{ grid-template-columns:1fr; } }
/* showcase card "Bekijk case" arrow */
.case-cta-row { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .85rem; font-weight: 700; color: #fff; }
.case-cta-arrow { display: inline-block; transition: transform .35s var(--ease); }
.case-card:hover .case-cta-arrow { transform: translateX(5px); }

/* ══════════════════════════════════════════════════════════
   SLIDE-IN PIJL (Webtify/Divi-stijl) — verborgen in rust, schuift in bij hover
   ══════════════════════════════════════════════════════════ */
.arrow-cta { display: inline-flex; align-items: center; font-weight: 700; color: #047857; white-space: nowrap; font-size: .9rem; }
.ac-arrow {
  display: inline-block; overflow: hidden;
  max-width: 0; opacity: 0; margin-left: 0;
  transform: translateX(-5px);
  transition: max-width .38s var(--ease), opacity .3s, transform .38s, margin-left .38s;
}
.arrow-cta:hover .ac-arrow,
.price-card:hover .ac-arrow,
.service-card:hover .ac-arrow,
.case-card:hover .ac-arrow,
.kb-card:hover .ac-arrow {
  max-width: 1.4em; opacity: 1; transform: translateX(0); margin-left: .4em;
}
/* pricing: link onderaan, geen los cirkeltje meer */
.price-link { margin-top: auto; }
/* showcase-cards zijn donker: pijl-CTA wit */
.case-card .arrow-cta { color: rgba(255,255,255,.95); }

/* ══════════════════════════════════════════════════════════
   CASE-PAGINA'S v2 — split-intro + echte screenshot + highlights
   ══════════════════════════════════════════════════════════ */
.case-split { padding-block: var(--section-y); }
.case-split-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.case-split-text .case-intro { font-size: clamp(1.15rem,2vw,1.4rem); font-weight: 600; color: var(--text); line-height: 1.5; margin: .9rem 0 1.5rem; max-width: none; text-align: left; }
.case-highlights { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .8rem; }
.case-highlights li { display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--text); }
.case-hl-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber-light); color: #047857; flex-shrink: 0; }
.case-hl-icon svg { width: 15px; height: 15px; }
.case-browser { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 70px -28px rgba(7,41,31,.4); background: var(--white); }
.case-browser-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; background: var(--surface); border-bottom: 1px solid var(--border); }
.case-browser-bar .bdot { width: 9px; height: 9px; border-radius: 50%; background: rgba(7,41,31,.18); }
.case-browser-bar .bdot:nth-child(1){background:#ff5f57}.case-browser-bar .bdot:nth-child(2){background:#febc2e}.case-browser-bar .bdot:nth-child(3){background:#28c840}
.case-browser-url { margin-left: .5rem; font-size: .75rem; color: var(--text-muted); background: var(--off-white); border-radius: 6px; padding: .2rem .7rem; }
.case-browser-screen { aspect-ratio: 16/11; overflow: hidden; background: #fff; }
.case-browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.case-story { background: var(--off-white); padding-block: var(--section-y); }
.case-story > .container { text-align: left; }
.case-story .section-header { margin-bottom: 2.5rem; }
@media (max-width:860px){ .case-split-grid{ grid-template-columns:1fr; } .case-split-visual{ order:-1; } }

/* ══════════════════════════════════════════════════════════
   DIENST-DETAILPAGINA'S + services-grid 4-koloms
   ══════════════════════════════════════════════════════════ */
.services-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

.dienst-hero { padding: clamp(2.5rem,5vw,4.5rem) 0 clamp(2rem,4vw,3.5rem); background: var(--off-white); }
.dienst-hero .case-back { color: var(--text-soft); margin-bottom: 1.25rem; display: inline-block; text-decoration: none; font-weight: 600; font-size: .9rem; }
.dienst-hero .case-back:hover { color: var(--text); }
.dienst-h1 { font-size: clamp(2.4rem,5.5vw,4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.07; margin: .5rem 0 1rem; max-width: 16ch; }
.dienst-sub { font-size: clamp(1.05rem,2vw,1.25rem); color: var(--text-soft); line-height: 1.6; max-width: 640px; margin-bottom: 1.75rem; }
.dienst-hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; }

.benefits-section { padding-block: var(--section-y); }
.benefits-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.benefit-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.85rem; box-shadow: 0 1px 3px rgba(7,41,31,.05); transition: transform .35s var(--ease), box-shadow .35s; }
.benefit-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(7,41,31,.3); }
.benefit-card h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.benefit-card p { color: var(--text-soft); line-height: 1.6; font-size: .95rem; }
.benefit-card--dark { background: linear-gradient(150deg,#07291F,#0E3D2C); border-color: transparent; }
.benefit-card--dark h3 { color: #fff; }
.benefit-card--dark p { color: rgba(255,255,255,.8); }
@media (max-width: 860px) { .benefits-grid { grid-template-columns: 1fr; } }

.aanpak-section { background: var(--off-white); padding-block: var(--section-y); }
.steps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.step-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.8rem 1.5rem; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--amber-light); color: #047857; font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem; }
.step-card h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; }
.step-card p { color: var(--text-soft); line-height: 1.55; font-size: .92rem; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .steps-grid { grid-template-columns: 1fr; } }

.dienst-showcase { padding-block: var(--section-y); }
.dsc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.dsc-card { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(7,41,31,.08); transition: transform .35s var(--ease), box-shadow .35s; }
.dsc-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -24px rgba(7,41,31,.4); }
.dsc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.dsc-card:hover img { transform: scale(1.06); }
.dsc-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; padding: 1.2rem; background: linear-gradient(to top, rgba(8,20,15,.85), rgba(8,20,15,0) 65%); color: #fff; }
.dsc-overlay strong { font-size: 1.1rem; font-weight: 800; }
.dsc-overlay .arrow-cta { color: rgba(255,255,255,.95); font-size: .85rem; }
.dsc-card:hover .ac-arrow { max-width: 1.4em; opacity: 1; transform: translateX(0); margin-left: .4em; }
@media (max-width: 760px) { .dsc-grid { grid-template-columns: 1fr; } }

.dienst-price { padding-bottom: var(--section-y); }
.dienst-price-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: linear-gradient(135deg, var(--amber-light), #F2FBF6); border: 1px solid #CDEBDC; border-radius: var(--radius-xl); padding: clamp(2rem,4vw,3rem); }
.dienst-price-text h2 { font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; letter-spacing: -.02em; margin: .4rem 0 .6rem; }
.dienst-price-text p { color: var(--text-soft); max-width: 540px; }

/* ══════════════════════════════════════════════════════════
   MEGA-MENU (Ontdekken) + LANGUAGE SWITCHER + OVER-ONS
   ══════════════════════════════════════════════════════════ */
.nav-mega-item, .nav-lang { position: relative; display: flex; align-items: center; }
.nav-mega-trigger, .lang-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--text); padding: .25rem 0; }
.nav-caret { transition: transform .3s var(--ease); }
.nav-mega-item:hover .nav-caret, .nav-lang:hover .nav-caret { transform: rotate(180deg); }
.nav-mega-trigger:hover, .lang-btn:hover { color: #047857; }

.mega-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; min-width: 460px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -24px rgba(7,41,31,.35); padding: 1.5rem 1.75rem; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s; z-index: 200; }
.nav-mega-item:hover .mega-menu, .nav-mega-item:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega-menu::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mega-heading { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #047857; margin-bottom: .9rem; }
.mega-col a { display: block; padding: .4rem 0; color: var(--text-soft); text-decoration: none; font-weight: 600; transition: color .2s, padding-left .2s; }
.mega-col a:hover { color: #047857; padding-left: 4px; }

.lang-menu { position: absolute; top: calc(100% + 14px); right: 0; transform: translateY(8px); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 18px 44px -22px rgba(7,41,31,.3); padding: .6rem; min-width: 170px; opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s; z-index: 200; }
.lang-menu::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-lang:hover .lang-menu, .nav-lang:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu .lang-current { display: block; padding: .45rem .6rem; border-radius: 8px; font-weight: 700; color: #047857; background: var(--amber-light); }
.lang-menu .lang-soon { display: flex; justify-content: space-between; align-items: center; gap:.5rem; padding: .45rem .6rem; color: var(--text-muted); text-decoration: none; font-weight: 600; }
.lang-menu .lang-soon em { font-style: normal; font-size: .66rem; background: var(--surface); color: var(--text-muted); padding: .1rem .45rem; border-radius: 999px; }

@media (max-width: 880px) { .nav-mega-item, .nav-lang { display: none; } }
.mobile-menu__label { display:block; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: #047857; margin: 1.1rem 0 .15rem; }
.mobile-menu__item--sub { font-size: 1.15rem; opacity: .85; }

.over-story { max-width: 760px; }
.over-story p { font-size: clamp(1.05rem,2vw,1.25rem); color: var(--text-soft); line-height: 1.7; margin-bottom: 1.25rem; }
.pillars-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.pillar-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.6rem 1.5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(7,41,31,.05); text-decoration: none; color: var(--text); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -22px rgba(7,41,31,.3); border-color: #BFE6D2; }
.pillar-card strong { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.pillar-card span:not(.arrow-cta) { color: var(--text-soft); font-size: .92rem; line-height: 1.5; flex-grow: 1; }
.pillar-card .arrow-cta { margin-top: .3rem; font-size:.85rem; }
.pillar-card:hover .ac-arrow { max-width: 1.4em; opacity: 1; transform: translateX(0); margin-left: .4em; }
@media (max-width: 900px) { .pillars-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .pillars-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   FULL-WIDTH MEGA-MENU (Websites/Webshops/Marketing/Ontdekken)
   ══════════════════════════════════════════════════════════ */
.nav-mega-item { position: static; }
.mega-panel {
  position: absolute; top: 68px; left: 0; right: 0; width: 100%;
  background: var(--white);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  box-shadow: 0 26px 50px -20px rgba(7,41,31,.25);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index: 150;
}
.nav-mega-item:hover .mega-panel, .nav-mega-item:focus-within .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-panel-inner { max-width: var(--container); margin-inline: auto; padding: clamp(2rem,3vw,2.75rem) clamp(1.25rem,5vw,2.5rem); display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem,5vw,5rem); align-items: stretch; }
.mega-cols { display: grid; grid-template-columns: repeat(2, minmax(190px,240px)); gap: clamp(2rem,4vw,4rem); }
.mega-heading { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #047857; margin-bottom: 1rem; }
.mega-col a { display: block; padding: .45rem 0; color: var(--text-soft); text-decoration: none; font-weight: 600; transition: color .2s, padding-left .2s; }
.mega-col a:hover { color: #047857; padding-left: 5px; }
.mega-feature { display: flex; flex-direction: column; justify-content: center; gap: .4rem; min-width: 280px; max-width: 340px; padding: 1.75rem; border-radius: var(--radius-lg); background: linear-gradient(150deg,#07291F,#0E3D2C); color: #fff; text-decoration: none; transition: transform .35s var(--ease); }
.mega-feature:hover { transform: translateY(-3px); }
.mega-feature-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #34d399; }
.mega-feature-price { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.mega-feature-desc { color: rgba(255,255,255,.8); font-size: .92rem; line-height: 1.5; margin-bottom: .5rem; }
.mega-feature .arrow-cta { color: #fff; font-size: .9rem; }
.mega-feature:hover .ac-arrow { max-width: 1.4em; opacity: 1; transform: translateX(0); margin-left: .4em; }
@media (max-width: 980px) { .nav-mega-item, .nav-lang { display: none; } }

/* ══════════════════════════════════════════════════════════
   WERK-SLIDER (Raak geïnspireerd) — autoslide + fade-randen + pijlen
   ══════════════════════════════════════════════════════════ */
.work-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; max-width: none; }
.work-header-text { text-align: left; max-width: 640px; }
.work-nav { display: flex; gap: .6rem; flex-shrink: 0; }
.work-arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(7,41,31,.06); transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s; }
.work-arrow:hover { background: #047857; color: #fff; border-color: #047857; transform: scale(1.07); }
.work-arrow:active { transform: scale(.96); }
.work-arrow svg { width: 22px; height: 22px; }
/* full-bleed slider: loopt door tot de schermranden */
.work-slider { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(2rem,4vw,3rem); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); }
.work-track { display: flex; gap: 1.5rem; padding: .5rem clamp(1rem,4vw,2.5rem); will-change: transform; }
.work-track .case-card { flex: 0 0 clamp(220px, 20vw, 300px); }
@media (max-width: 900px) { .work-track .case-card { flex: 0 0 46vw; } }
@media (max-width: 600px) { .work-track .case-card { flex: 0 0 78vw; } }

/* ══════════════════════════════════════════════════════════
   MEGA-MENU v2: card-vormige items + branche-grid
   ══════════════════════════════════════════════════════════ */
.mega-panel-inner { display: flex !important; grid-template-columns: none !important; gap: clamp(2rem,4vw,3.5rem); align-items: stretch; }
.mega-section { min-width: 0; }
.mega-section--branches { flex: 1; min-width: 280px; }
.mega-cards { display: flex; flex-direction: column; gap: .35rem; }
.mega-cards--2col { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .6rem; }
.mega-card { display: flex; align-items: center; gap: .85rem; padding: .7rem .8rem; border-radius: var(--radius); text-decoration: none; transition: background .2s, transform .2s; }
.mega-card:hover { background: var(--off-white); transform: translateX(2px); }
.mega-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--amber-light); color: #047857; flex-shrink: 0; }
.mega-card-icon svg { width: 20px; height: 20px; }
.mega-card-text { display: flex; flex-direction: column; line-height: 1.25; }
.mega-card-text strong { font-size: .95rem; font-weight: 700; color: var(--text); }
.mega-card-text span { font-size: .8rem; color: var(--text-muted); }
.mega-branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; }
.mega-branch-grid a { display: block; padding: .45rem .25rem; color: var(--text-soft); text-decoration: none; font-weight: 600; font-size: .92rem; border-radius: 6px; transition: color .2s, padding-left .2s; }
.mega-branch-grid a:hover { color: #047857; padding-left: 5px; }
.mega-feature { flex: 0 0 290px; }

/* ══════════════════════════════════════════════════════════
   AMBER ACCENT (#FBB024) + INFINITE LOGO-MARQUEE
   ══════════════════════════════════════════════════════════ */
/* warme accent op 'populair'/featured-badges + stat-tekens */
.price-popular, .service-badge { background: var(--accent); color: #3D2B00; }
.stat-plus { color: var(--accent); }
.google-badge { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.dienst-price-card { background: linear-gradient(135deg, var(--accent-soft), #F2FBF6); border-color: #F4DCA0; }
/* subtiele amber-onderstreping mogelijk via .accent-underline (optioneel) */

/* Logo-marquee: oneindig scrollend, grayscale, fade-randen */

/* ══════════════════════════════════════════════════════════
   NIEUW LOGO (oplopende W-icoon + wordmark-W)
   ══════════════════════════════════════════════════════════ */
.logo-mark { width: 36px; height: 36px; background: none; border-radius: 0; padding: 0; font-size: 0; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text { display: inline-flex; align-items: flex-end; line-height: 1; }
.logo-wm-w { height: 1.04em; width: auto; flex-shrink: 0; }

/* Logo zonder icoon-tegeltje: grotere wordmark, groene W */
.nav-logo { gap: 0; }
.logo-text { font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; }
.logo-wm-w { height: 1.0em; }
.logo-wm-w path { stroke: #059669; }
.site-footer .logo-wm-w path, .site-footer-outer .logo-wm-w path { stroke: #34d399; }
.site-header--solid .logo-text, .site-header .logo-text { color: var(--text); }

.site-footer .logo-text, .site-footer-outer .logo-text { color: #fff; }


/* ══════════════════════════════════════════════════════════
   LOGO-STRIP v2 (Webtify): vaste tekst links + slider rechts, gelijke logo's
   ══════════════════════════════════════════════════════════ */
.trust-strip { background: var(--white); padding-block: clamp(1.7rem,3vw,2.5rem); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trust-row { display: flex; align-items: center; gap: clamp(1.5rem,4vw,3rem); }
.trust-label { flex: 0 0 auto; max-width: 30%; margin: 0; text-align: left; text-transform: none; white-space: normal; font-size: clamp(1.05rem,1.5vw,1.3rem); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; color: var(--text); }
.trust-label .g { color: #047857; }
.logo-slider { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #fff 10%, #fff 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #fff 10%, #fff 90%, transparent 100%); }
.logo-track { display: flex; align-items: center; gap: clamp(3rem,7vw,5.5rem); width: max-content; animation: logoScroll 40s linear infinite; }
.logo-slider:hover .logo-track { animation-play-state: paused; }
.logo-slot { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.marquee-logo { height: 40px; width: auto; max-width: 150px; object-fit: contain; opacity: .8; transition: opacity .3s; flex-shrink: 0; }
.logo-slot:hover .marquee-logo { opacity: 1; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .logo-track { animation: none; } }
@media (max-width: 760px){ .trust-row { flex-direction: column; align-items: flex-start; gap: 1.1rem; } .trust-label { max-width: none; } .logo-slider { width: 100%; } }

/* ══════════════════════════════════════════════════════════
   KENNISBANK: hub + artikelpagina's
   ══════════════════════════════════════════════════════════ */
.kb-image { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); margin: -0.2rem -0.2rem 0.4rem; }
.kb-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.kb-card:hover .kb-image img { transform: scale(1.04); }
.kb-time { font-size: .78rem; color: var(--text-muted); font-weight: 600; }

/* Breadcrumb */
.breadcrumb { font-size: .82rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: #047857; }
.breadcrumb span[aria-current] { color: var(--text-soft); font-weight: 600; }
.breadcrumb .sep { opacity: .5; }

/* Hub hero */
.kb-hub-hero { background: var(--off-white); border-bottom: 1px solid var(--border); padding-block: clamp(2.5rem,5vw,4rem); }
.kb-hub-hero .breadcrumb { margin-bottom: 1.2rem; }
.kb-hub-h1 { font-size: clamp(2rem,4.5vw,3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 1rem; }
.kb-hub-intro { font-size: clamp(1.02rem,1.4vw,1.18rem); color: var(--text-soft); line-height: 1.6; max-width: 60ch; }
.kb-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2rem; }
.kb-pillar { display: block; padding: 1.3rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); text-decoration: none; color: var(--text); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.kb-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFE6D2; }
.kb-pillar strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .2rem; }
.kb-pillar > span { display: block; font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.kb-pillar .arrow-cta { display: inline-flex; }
.kb-pillar .arrow-cta { margin-top: .6rem; font-size: .85rem; }
.kb-list-section { padding-block: var(--section-y); }
@media (max-width: 820px){ .kb-pillars { grid-template-columns: 1fr; } }

/* Artikelpagina */
.article-page { background: var(--white); }
.article-hero { background: var(--off-white); border-bottom: 1px solid var(--border); padding-block: clamp(2.2rem,4vw,3.4rem); }
.article-hero .container { max-width: 820px; }
.article-hero .breadcrumb { margin-bottom: 1.3rem; }
.article-cat { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #047857; }
.article-h1 { font-size: clamp(1.9rem,4vw,2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: .6rem 0 .8rem; }
.article-dek { font-size: clamp(1.05rem,1.5vw,1.25rem); color: var(--text-soft); line-height: 1.55; max-width: 60ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 1.4rem; font-size: .85rem; color: var(--text-muted); }
.article-meta .am-author { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text-soft); }
.article-meta .am-dot { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#059669,#34d399); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .8rem; }

.article-figure { max-width: 960px; margin: clamp(1.6rem,3vw,2.4rem) auto 0; padding: 0 clamp(1rem,4vw,1.5rem); }
.article-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-lg); display: block; }

.article-wrap { max-width: 760px; margin: 0 auto; padding: clamp(2.2rem,4vw,3.4rem) clamp(1rem,4vw,1.5rem) 0; }

/* TOC */
.article-toc { background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; margin-bottom: 2.4rem; }
.article-toc strong { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .7rem; }
.article-toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.article-toc a { color: var(--text-soft); text-decoration: none; font-size: .95rem; }
.article-toc a:hover { color: #047857; }

/* Prose */
.article-body { font-size: 1.06rem; line-height: 1.75; color: var(--text-soft); }
.article-body > p { margin: 0 0 1.3rem; }
.article-body h2 { font-size: clamp(1.4rem,2.4vw,1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); margin: 2.6rem 0 1rem; scroll-margin-top: 90px; }
.article-body h3 { font-size: 1.18rem; font-weight: 700; color: var(--text); margin: 1.8rem 0 .7rem; }
.article-body strong { color: var(--text); font-weight: 700; }
.article-body a { color: #047857; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.article-body a:hover { color: #047857; }
/* Markers terugzetten na de globale reset `ul, ol { list-style: none }` bovenin.
   Die reset is bedoeld voor navigatie- en kaartlijsten; in lopende tekst hoort
   een opsomming gewoon streepjes en nummers te hebben. Dat de bedoeling al zo
   was blijkt uit de `li::marker`-regel hieronder: die kleurt een marker die er
   zonder deze regel niet is. */
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body ul ul { list-style: circle; }
.article-body ol ol { list-style: lower-alpha; }
/* Let op de weggehaalde `display: grid`. Een li in een grid-container is een
   grid-item en toont geen marker, ook niet met list-style: disc erop. Die grid
   stond er alleen voor de ruimte tussen de items; dat doet de margin hieronder
   net zo goed en zonder de markers te slopen. */
.article-body ul, .article-body ol { margin: 0 0 1.3rem; padding-left: 1.5rem; }
.article-body li + li { margin-top: .5rem; }
.article-body li { padding-left: .2rem; }
.article-body li::marker { color: #34d399; }
/* Tabellen in de artikeltekst. Er stond geen enkele table-regel in dit
   bestand, dus een tabel viel terug op de browserstandaard: geen randen,
   geen padding, geen kopregel die eruit springt. */
.article-body table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: .98rem; }
.article-body th, .article-body td { padding: .7rem .9rem; border: 1px solid var(--line, #e7ebf0); text-align: left; vertical-align: top; }
.article-body th { background: var(--off-white, #f7f9fa); font-weight: 700; color: var(--text); }
.article-body tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .015); }
/* Smalle schermen: liever schuiven dan de tekst platdrukken. */
.article-body .table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.article-body .table-wrap table { margin: 0; }

.article-body blockquote { margin: 1.8rem 0; padding: 1.1rem 1.5rem; border-left: 3px solid #059669; background: var(--off-white); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.12rem; font-style: italic; color: var(--text); }
.article-callout { margin: 1.8rem 0; padding: 1.1rem 1.4rem; background: var(--accent-soft); border: 1px solid #F4DCA0; border-radius: var(--radius-lg); font-size: .98rem; color: #5b4300; }
.article-callout strong { color: #3D2B00; }

/* Takeaways */
.article-takeaways { margin: 2.6rem 0; padding: 1.6rem 1.8rem; background: var(--navy); color: #fff; border-radius: var(--radius-lg); }
.article-takeaways h2 { color: #fff; font-size: 1.2rem; margin: 0 0 1rem; }
.article-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.article-takeaways li { position: relative; padding-left: 1.8rem; line-height: 1.5; color: #D1FAE5; }
.article-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #34d399; font-weight: 800; }

/* FAQ */
.article-faq { max-width: 760px; margin: clamp(2.4rem,4vw,3.4rem) auto 0; padding: 0 clamp(1rem,4vw,1.5rem); }
.article-faq h2 { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 1.3rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: .8rem; overflow: hidden; background: var(--white); }
.faq-item summary { cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; color: var(--text); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: #047857; font-weight: 400; flex-shrink: 0; transition: transform .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 1.4rem 1.2rem; color: var(--text-soft); line-height: 1.65; }

/* Related */
.article-related { padding: clamp(3rem,6vw,5rem) 0 0; }
.article-related .section-header { margin-bottom: 1.6rem; }

/* Pillar CTA band */
.article-cta-band { margin-top: clamp(3rem,6vw,5rem); }
.article-cta-inner { background: linear-gradient(135deg, var(--navy), var(--navy-mid)); border-radius: var(--radius-xl); padding: clamp(2rem,4vw,3rem); text-align: center; color: #fff; }
.article-cta-inner h2 { font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .7rem; color: #fff; }
.article-cta-inner p { color: #B9D9CC; max-width: 48ch; margin: 0 auto 1.6rem; line-height: 1.6; }

.kb-allcta { text-align: center; margin-top: 2rem; }

/* E-E-A-T auteursblok onder FAQ */
.author-box { margin-top: 2.4rem; padding: 1.6rem 1.8rem; background: var(--off-white); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.author-box-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 0 0 1.1rem; }
.author-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.author-card { display: flex; gap: .9rem; align-items: flex-start; }
.author-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#059669,#34d399); color: #fff; font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
.author-info strong { display: block; font-size: 1rem; color: var(--text); }
.author-info .author-role { display: block; font-size: .82rem; color: #047857; font-weight: 600; margin-bottom: .35rem; }
.author-info p { margin: 0; font-size: .9rem; color: var(--text-soft); line-height: 1.55; }
@media (max-width: 640px){ .author-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   HERO v3 — full-bleed, 75vh, nav eroverheen
   Opzet geleend van yieldfund.com: transparante nav over de
   media, statuspil, zwevende bewijskaart, kop die per woord
   uit een masker omhoogkomt. Zonder GSAP of Lenis: alles wat
   hieronder staat is CSS, op de parallax na (een paar regels
   in main.js). Dat scheelt ongeveer 100 KB JavaScript.
   ══════════════════════════════════════════════════════════ */

/* Op een pagina met een donkere hero vervalt de 68px die de body vrijhoudt
   voor de vaste header: de header zakt dan naar de bovenrand van de hero,
   die zelf onder de topbalk begint. */
body:has(.hero--video) { padding-top: 0; }
body:has(.hero--video) .site-header:not(.scrolled) {
  top: calc(var(--topbalk-h) + var(--hero-marge));
}

/* ── Smalle balk boven de hero ────────────────────────────────────────
   Zonder deze balk valt de nav half over de witte marge boven de hero.
   Bij yieldfund.com staat hier Trustpilot, inloggen en de taal; bij ons
   de beoordeling, het telefoonnummer en de taalkeuze. */
.topbalk {
  height: var(--topbalk-h);
  background: var(--navy);
  color: rgba(255,255,255,.86);
  font-size: .8125rem;
  display: flex;
  align-items: center;
}
.topbalk__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--hero-marge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbalk__links, .topbalk__rechts { display: flex; align-items: center; gap: 1.25rem; }
.topbalk a { color: inherit; }
.topbalk a:hover { color: #fff; }
.topbalk__score { display: inline-flex; align-items: center; gap: .4rem; }
.topbalk__score .stars { color: var(--accent); font-size: .8125rem; letter-spacing: .02em; }
@media (max-width: 640px) {
  .topbalk__links { display: none; }
  .topbalk__inner { justify-content: flex-end; }
}

/* ── Nav over de donkere hero ─────────────────────────────── */
/* Alleen op pagina's mét een donkere hero. Elders blijft de
   header zich gedragen zoals hij deed. */
body:has(.hero--video) .site-header:not(.scrolled) .logo-text,
body:has(.hero--video) .site-header:not(.scrolled) .nav-logo {
  color: #fff;
}
body:has(.hero--video) .site-header:not(.scrolled) .nav-links > li > a,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger {
  color: rgba(255,255,255,.82);
}
body:has(.hero--video) .site-header:not(.scrolled) .nav-links > li > a:hover,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger:hover {
  color: #fff;
}
body:has(.hero--video) .site-header:not(.scrolled) .hamburger span {
  background: #fff;
}

/* Onderstreping die vanuit het midden uitloopt, zoals bij Yieldfund */
.nav-links a,
.nav-mega-trigger { position: relative; }
.nav-links > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-med) var(--ease);
}
.nav-links > li > a:hover::after { transform: scaleX(1); }

/* ── Statuspil met pulserende stip ────────────────────────── */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  align-self: flex-start;
  padding: .5rem 1rem .5rem .875rem;
  border-radius: 50px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.hero-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.65);
  animation: heroPulse 2.4s var(--ease) infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

/* ── Kop: per woord uit een masker omhoog ─────────────────── */
.hero-headline--light {
  text-shadow: none;               /* het masker doet het werk, niet de schaduw */
  max-width: 15ch;
}
.hero-headline .hw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;           /* ruimte voor staarten van de g en de j */
}
.hero-headline .hw > span {
  display: inline-block;
  transform: translateY(105%);
  animation: heroWord .85s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}
.hero-headline .hw--accent > span { color: var(--green-bright); }
@keyframes heroWord { to { transform: translateY(0); } }

/* ── Zwevende bewijskaart ─────────────────────────────────── */
.hero-card {
  position: absolute;
  z-index: 2;
  top: clamp(7rem, 15vh, 10rem);
  right: clamp(1.25rem, 5vw, 4.5rem);
  display: flex;
  gap: .75rem;
  align-items: center;
  max-width: 20rem;
  padding: .875rem 1.125rem;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(-14px);
  animation: heroCard .9s var(--ease) .95s forwards;
}
@keyframes heroCard { to { opacity: 1; transform: translateY(0); } }
.hero-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 10px;
  background: var(--amber-light, #D1FAE5);
  color: var(--amber, #059669);
}
.hero-card__icon svg { width: 1.1rem; height: 1.1rem; }
.hero-card__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hero-card__top { display: flex; align-items: baseline; gap: .5rem; }
.hero-card__top strong { font-size: .8125rem; color: var(--text); }
.hero-card__time { font-size: .75rem; color: var(--text-muted); }
.hero-card__text {
  font-size: .875rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Knop met cirkel-wipe ─────────────────────────────────── */
.btn-wipe { position: relative; overflow: hidden; isolation: isolate; }
.btn-wipe__fill {
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 120%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--amber-dark, #047857);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-med) var(--ease);
}
.btn-wipe:hover .btn-wipe__fill { transform: translate(-50%, -50%) scale(1); }
.btn-wipe__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  position: relative;
}
.btn-wipe:hover .btn-wipe__label > span { transform: translateX(3px); }
.btn-wipe__label > span { transition: transform var(--dur-med) var(--ease); }

/* ── Scrim: iets zachter, want de hero is nu lager ────────── */
.hero-scrim {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%,
      rgba(0,0,0,.20) 26%,
      rgba(0,0,0,.30) 52%,
      rgba(0,0,0,.72) 82%,
      rgba(0,0,0,.86) 100%);
}

/* ── Parallax op de achtergrond (main.js zet --py) ────────── */
.hero-bg-video,
.hero-slideshow { will-change: transform; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); }

/* ── Klein scherm ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-video-inner { height: 80vh; min-height: 480px; }
  .hero-card { display: none; }        /* te druk naast de kop op mobiel */
  .hero-headline--light { max-width: 100%; }
  .hero-video-content { padding-top: 88px; }

  /* Op smalle schermen vult de tekst bijna de hele hero, dus de achtergrond
     moet over de volle hoogte donker genoeg zijn. De regel hierboven voor
     brede schermen begint bewust lichter; die zou hier winnen op volgorde. */
  .hero-scrim {
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.52) 0%,
        rgba(0,0,0,.46) 30%,
        rgba(0,0,0,.58) 60%,
        rgba(0,0,0,.80) 85%,
        rgba(0,0,0,.88) 100%);
  }
  .hero-trust--light { flex-wrap: nowrap; }
  .trust-text--light { white-space: nowrap; font-size: .82rem; }
}

/* ── Wie minder beweging wil, krijgt het meteen te zien ───── */
@media (prefers-reduced-motion: reduce) {
  .hero-headline .hw > span { animation: none; transform: none; }
  .hero-card { animation: none; opacity: 1; transform: none; }
  .hero-pill__dot { animation: none; }
  .hero-bg-video, .hero-slideshow { transform: none; }
  .nav-links > li > a::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════
   NAV v2 — leesbaarheid over de hero, en megamenu's die uit
   hun eigen menu-item openen in plaats van uit de hele balk
   ══════════════════════════════════════════════════════════ */

/* ── Leesbaarheid ─────────────────────────────────────────
   De hero-foto is bovenin het lichtst, precies waar de nav staat.
   In plaats van de hele scrim donkerder te maken (dat vervlakt de
   foto) ligt hier een eigen verloopje van 150px achter de nav. */
.hero-video-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(4, 20, 15, .58) 0%,
    rgba(4, 20, 15, .34) 45%,
    rgba(4, 20, 15, 0) 100%);
}

body:has(.hero--video) .site-header:not(.scrolled) .nav-links > li > a,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-trigger,
body:has(.hero--video) .site-header:not(.scrolled) .lang-btn {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

/* Het paneel heeft een eigen, lichte achtergrond. Alles daarbinnen erft
   niets van de nav-over-de-hero-regels hierboven. */
.mega-panel, .mega-panel * { text-shadow: none; }
.mega-panel a { color: var(--text-soft); }
.mega-panel .mega-branch-grid a { color: var(--text-soft); }
.mega-panel .mega-branch-grid a:hover { color: var(--green); }
body:has(.hero--video) .site-header:not(.scrolled) .nav-logo {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ── Megamenu opent uit zijn eigen item ───────────────────
   Het paneel blijft over de volle breedte staan, want de inhoud
   heeft die ruimte nodig. Maar het groeit vanuit de x-positie van
   de trigger (main.js zet --mega-x) en er wijst een pijltje naar
   het item. Daarmee hoort het bij dat item in plaats van bij de
   hele balk. */
.mega-panel {
  transform-origin: var(--mega-x, 50%) 0;
  transform: translateY(-6px) scale(.975);
  transition:
    opacity .22s var(--ease),
    transform .28s var(--ease),
    visibility .28s;
}
.nav-mega-item:hover .mega-panel,
.nav-mega-item:focus-within .mega-panel {
  transform: translateY(0) scale(1);
}

/* Het pijltje op de bovenrand, onder het menu-item */
.mega-panel::after {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--mega-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
  transition: left .28s var(--ease);
}

/* Het actieve item krijgt zijn eigen markering, zodat zichtbaar is
   waar het paneel vandaan komt */
.nav-mega-item:hover .nav-mega-trigger,
.nav-mega-item:focus-within .nav-mega-trigger { color: var(--green); }
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-item:hover .nav-mega-trigger,
body:has(.hero--video) .site-header:not(.scrolled) .nav-mega-item:focus-within .nav-mega-trigger {
  color: var(--green-bright);
}

/* Taalmenu hangt al onder zijn eigen knop; alleen de oorsprong nog */
.lang-menu { transform-origin: 100% 0; }
.nav-lang:hover .lang-menu, .nav-lang:focus-within .lang-menu { transform: translateY(0) scale(1); }
.lang-menu { transform: translateY(6px) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .mega-panel, .mega-panel::after, .lang-menu { transition: opacity .1s linear; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   GRADIENTKAARTEN EN BEWEGING
   Bewust klein gehouden: dit raakt de dienstkaarten, de
   cijferbalk en de manier waarop blokken in beeld komen. De
   rest van de site blijft zoals hij was.

   De verlopen zijn opgebouwd zoals in de presentatie: een
   witte bloem linksboven en daaronder een lineair verloop.
   Hier veel lichter, want dit zijn kaarten met tekst erop en
   geen sheets.
   ══════════════════════════════════════════════════════════ */

/* ── 1. Dienstkaarten ─────────────────────────────────────
   Elke kaart krijgt een eigen tint, zodat de rij leest als
   een set en niet als vier keer hetzelfde blok. */
.service-card {
  background:
    radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #F3FDF8 0%, #DFF8EC 100%);
  border-color: rgba(5,150,105,.14);
}
.service-card:nth-child(2) {
  background:
    radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #F4FBF7 0%, #E2F2E9 100%);
  border-color: rgba(5,150,105,.13);
}
.service-card:nth-child(3) {
  background:
    radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #FBF9F4 0%, #F0E8D9 100%);
  border-color: rgba(133,105,54,.12);
}
.service-card:nth-child(4) {
  background:
    radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #FDFBF3 0%, #F7EFDC 100%);
  border-color: rgba(160,120,20,.13);
}
.service-card:hover {
  border-color: rgba(5,150,105,.34);
}
/* Het icoonvlak stond op een lichte tint die nu wegvalt tegen
   het verloop; wit maakt het weer een eigen element. */
.service-card .service-icon {
  background: rgba(255,255,255,.75);
  box-shadow: 0 1px 3px rgba(7,41,31,.06);
}

/* ── 2. De cijferbalk ─────────────────────────────────────*/
.stats-row {
  background:
    radial-gradient(110% 190% at 8% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 52%),
    radial-gradient(120% 200% at 92% 10%, #C7F3DF 0%, rgba(199,243,223,0) 62%),
    linear-gradient(125deg, #F1FDF7 0%, #DCF7EA 55%, #CFF3E2 100%);
  border-color: rgba(5,150,105,.16);
}

/* ── 3. Beweging ──────────────────────────────────────────
   De site had al een waarnemer die .is-visible zet zodra een
   blok in beeld komt, maar elke waarde van data-animate deed
   hetzelfde. Deze regels geven de waarden uit de presentatie
   een eigen beweging. Ze staan na de bestaande regel, dus bij
   gelijke specificiteit winnen ze. `fade-up` blijft wat het
   was, zodat de veertig bestaande plekken niet veranderen. */
@keyframes wg-rise  { from { opacity:0; transform: translateY(26px) } to { opacity:1; transform:none } }
@keyframes wg-pop   { from { opacity:0; transform: scale(.94) }       to { opacity:1; transform:none } }
@keyframes wg-left  { from { opacity:0; transform: translateX(-30px) } to { opacity:1; transform:none } }
@keyframes wg-right { from { opacity:0; transform: translateX(30px) }  to { opacity:1; transform:none } }

[data-animate="rise"],
[data-animate="pop"],
[data-animate="left"],
[data-animate="right"] { opacity: 0; animation: none; }

[data-animate="rise"].is-visible  { animation: wg-rise  .62s var(--ease) both }
[data-animate="pop"].is-visible   { animation: wg-pop   .52s cubic-bezier(.2,.8,.25,1) both }
[data-animate="left"].is-visible  { animation: wg-left  .62s var(--ease) both }
[data-animate="right"].is-visible { animation: wg-right .62s var(--ease) both }

/* Als JavaScript niet draait, hoort de inhoud er gewoon te
   staan in plaats van onzichtbaar te blijven. */
.no-js [data-animate] { opacity: 1 !important; animation: none !important }

/* De uitgelichte kaart houdt zijn eigen rand en schaduw, en krijgt een
   iets voller verloop. Zonder deze regel wint de nth-child hierboven. */
.service-card.service-card--featured {
  background:
    radial-gradient(130% 150% at 14% 0%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(140deg, #ECFDF5 0%, #CDF4E2 100%);
  border-color: #A5DEC3;
  box-shadow: 0 10px 26px -16px rgba(11,15,14,.26);
}

/* ══════════════════════════════════════════════════════════
   CARROUSELS: veegbaar (JS neemt de aandrijving over)
   ══════════════════════════════════════════════════════════ */
.logo-slider.is-draggable .logo-track { animation: none; }
.logo-slider.is-draggable,
.work-slider.is-draggable {
  touch-action: pan-y;             /* verticaal scrollen blijft van de pagina */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.logo-slider.is-draggable:active,
.work-slider.is-draggable:active { cursor: grabbing; }
.logo-slider.is-draggable .logo-track,
.work-slider.is-draggable .work-track { will-change: transform; }
.logo-slider.is-draggable img,
.work-slider.is-draggable img { -webkit-user-drag: none; }

/* ══════════════════════════════════════════════════════════
   MOBIEL: kop, hero en menu in de eerste viewport
   ══════════════════════════════════════════════════════════ */

/* Kopbalk binnen de menu-overlay: logo links, sluitknop rechts */
.mobile-menu__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
  flex-shrink: 0;
}
.mobile-menu__topbar .mobile-menu__close {
  align-self: center;
  margin-bottom: 0;
  margin-right: -10px;
}

/* De overlay ligt in de header, dus zonder deze regel erft het logo de
   witte kleur die de nav over de donkere hero krijgt. Op het witte
   menuscherm is dat onzichtbaar. */
.mobile-menu__overlay .nav-logo,
.mobile-menu__overlay .logo-text,
body:has(.hero--video) .site-header:not(.scrolled) .mobile-menu__overlay .nav-logo,
body:has(.hero--video) .site-header:not(.scrolled) .mobile-menu__overlay .logo-text {
  color: var(--text);
  text-shadow: none;
}

@media (max-width: 640px) {
  /* De hero loopt door tot de schermrand. Met de ingezette kaart stonden
     het logo en de hamburger 8px búiten die kaart en 28px links van de
     kop eronder; full-bleed zet ze op één lijn met de tekst in de hero
     en geeft de kop meteen de volle regelbreedte. */
  :root { --hero-marge: 0px; }
  .topbalk__inner { padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
  .hero-video-inner { border-radius: 0; }

  /* Zachter verloop achter de nav: de scrim eronder is op mobiel al
     donker, waardoor de losse band van 150px zich als een rand aftekende. */
  .hero-video-inner::before {
    height: 108px;
    background: linear-gradient(to bottom,
      rgba(4, 20, 15, .40) 0%,
      rgba(4, 20, 15, .18) 55%,
      rgba(4, 20, 15, 0) 100%);
  }

  /* "47+ MKB-bedrijven gingen je voor" liep buiten de hero en werd afgekapt. */
  .hero-trust--light { flex-wrap: wrap; }
  .trust-text--light { white-space: normal; }

  /* Menu-overlay: logo in beeld en alles binnen één scherm */
  .mobile-menu__overlay { padding: 0 clamp(1.25rem, 5vw, 2.5rem) 1.25rem; }
  .mobile-menu__topbar { height: 56px; }
  .mobile-menu__trigger,
  .mobile-menu__close { -webkit-tap-highlight-color: transparent; }
  .mobile-menu__list { gap: .1rem; }
  .mobile-menu__item {
    padding: .55rem .75rem;
    font-size: 1.1rem;
  }
  .mobile-menu__item--sub {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-soft);
    padding-block: .4rem;
  }
  .mobile-menu__label { margin: .6rem 0 .1rem; padding-inline: .75rem; font-size: .72rem; }
  .mobile-menu__item--cta { margin-top: .5rem; text-align: center; }
  .mobile-menu__footer { margin-top: 1rem; padding-top: .85rem; }
  .mobile-menu__footer p { margin-bottom: .25rem; }
}

/* ═══ MOBIEL MENU V10 · rustige Propty-hiërarchie met subnavigatie ═══ */
.wg-mobile-menu-v10 {
  --wg-mobile-navy: #052a20;
  --wg-mobile-green: #0b805d;
  --wg-mobile-highlight: #76d4af;
}

@media (max-width: 1120px) {
  .mobile-menu__overlay.wg-mobile-menu-v10 {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--wg-mobile-navy) !important;
    color: #fff !important;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(100%, 0, 0) !important;
    transition: opacity .2s ease, transform .3s cubic-bezier(.22,.61,.36,1) !important;
    box-shadow: -28px 0 80px rgba(1, 24, 18, .35);
    overscroll-behavior: contain;
  }

  .mobile-menu__overlay.wg-mobile-menu-v10[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
  }

  .wg-mobile-menu-v10 .wg-mobile-level {
    position: absolute;
    inset: 0;
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--wg-mobile-navy);
    color: #fff;
    transition: opacity .24s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  }

  .wg-mobile-menu-v10 .wg-mobile-level:focus { outline: 0; }

  .wg-mobile-menu-v10 .wg-mobile-level--root {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .wg-mobile-menu-v10[data-active-panel] .wg-mobile-level--root {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-18%, 0, 0);
  }

  .wg-mobile-menu-v10 .wg-mobile-level--submenu {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(100%, 0, 0);
  }

  .wg-mobile-menu-v10 .wg-mobile-level--submenu[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }

  .wg-mobile-menu-v10 .mobile-menu__topbar,
  .wg-mobile-menu-v10 .wg-mobile-subhead {
    display: flex;
    height: 72px;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  .wg-mobile-menu-v10 .mobile-menu__topbar .nav-logo {
    display: inline-flex;
    min-width: 0 !important;
    align-items: center;
    color: #fff !important;
  }

  .wg-mobile-menu-v10 .mobile-menu__topbar .logo-text,
  .wg-mobile-menu-v10 .mobile-menu__topbar .logo-wm-w,
  .wg-mobile-menu-v10 .mobile-menu__topbar .logo-wm-w path {
    color: #fff !important;
    stroke: currentColor !important;
  }

  body.wg-v9 .wg-mobile-menu-v10 .mobile-menu__topbar .logo-text,
  body.wg-v9 .wg-mobile-menu-v10 .mobile-menu__topbar .logo-wm-w,
  body.wg-v9 .wg-mobile-menu-v10 .mobile-menu__topbar .logo-wm-w path {
    color: #fff !important;
    stroke: currentColor !important;
  }

  .wg-mobile-menu-v10 .mobile-menu__close {
    display: inline-flex;
    width: 42px;
    height: 42px;
    margin: 0 !important;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff !important;
    align-self: center;
    transform: none !important;
  }

  .wg-mobile-menu-v10 .mobile-menu__close:hover {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .1);
    color: #fff !important;
    transform: none !important;
  }

  .wg-mobile-menu-v10 .mobile-menu__close .material-symbols-rounded { font-size: 22px; }

  .wg-mobile-menu-v10 .wg-mobile-root-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 20px 18px;
  }

  .wg-mobile-menu-v10 .wg-mobile-root-nav > ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    list-style: none;
  }

  .wg-mobile-menu-v10 .wg-mobile-root-nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .1); }

  .wg-mobile-menu-v10 .wg-mobile-root-link {
    display: flex;
    width: 100%;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 4px !important;
    border: 0;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font: inherit;
    font-size: 1.075rem !important;
    font-weight: 650 !important;
    letter-spacing: -.015em !important;
    text-align: left;
  }

  .wg-mobile-menu-v10 .wg-mobile-root-link .wg-mobile-link__chevron {
    color: rgba(255, 255, 255, .34);
    font-size: 21px;
  }

  .wg-mobile-menu-v10 .wg-mobile-actions {
    margin: auto 16px max(16px, env(safe-area-inset-bottom));
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 24px;
    background: rgba(255, 255, 255, .06);
  }

  .wg-mobile-menu-v10 .wg-mobile-login,
  .wg-mobile-menu-v10 .wg-mobile-primary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px !important;
    border-radius: 13px !important;
    color: #fff !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    text-align: center;
  }

  .wg-mobile-menu-v10 .wg-mobile-login {
    border: 1px solid rgba(255, 255, 255, .17);
    background: transparent !important;
  }

  .wg-mobile-menu-v10 .wg-mobile-primary {
    margin-top: 10px;
    border: 1px solid transparent;
    background: var(--wg-mobile-green) !important;
  }

  .wg-mobile-menu-v10 .wg-mobile-primary .material-symbols-rounded { font-size: 18px; }

  .wg-mobile-menu-v10 .wg-mobile-phone {
    display: block;
    padding: 12px 8px 1px;
    color: rgba(255, 255, 255, .56);
    font-size: .79rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: center;
  }

  .wg-mobile-menu-v10 .wg-mobile-subhead { padding-inline: 12px; }

  .wg-mobile-menu-v10 .wg-mobile-subhead > strong {
    min-width: 0;
    flex: 1;
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    text-align: center;
  }

  .wg-mobile-menu-v10 .wg-mobile-back {
    display: inline-flex;
    min-width: 82px;
    align-items: center;
    gap: 1px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .66);
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
  }

  .wg-mobile-menu-v10 .wg-mobile-back .material-symbols-rounded { font-size: 20px; }

  .wg-mobile-menu-v10 .wg-mobile-subscroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 20px max(26px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  .wg-mobile-menu-v10 .wg-mobile-group { margin: 0 0 25px; }
  .wg-mobile-menu-v10 .wg-mobile-group:last-of-type { margin-bottom: 16px; }
  .wg-mobile-menu-v10 .wg-mobile-group > p {
    margin: 0 0 8px;
    padding: 0 8px;
    color: var(--wg-mobile-highlight);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .wg-mobile-menu-v10 .wg-mobile-group ul { margin: 0; padding: 0; list-style: none; }

  .wg-mobile-menu-v10 .wg-mobile-link {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    padding: 8px !important;
    border-radius: 13px !important;
    color: #fff !important;
  }

  .wg-mobile-menu-v10 .wg-mobile-link:focus-visible,
  .wg-mobile-menu-v10 .wg-mobile-link:hover { background: rgba(255, 255, 255, .06) !important; }

  .wg-mobile-menu-v10 .wg-mobile-link__icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(118, 212, 175, .24);
    border-radius: 10px;
    background: rgba(118, 212, 175, .08);
    color: var(--wg-mobile-highlight);
    font-size: 19px;
  }

  .wg-mobile-menu-v10 .wg-mobile-link__copy { min-width: 0; flex: 1; }
  .wg-mobile-menu-v10 .wg-mobile-link__copy strong,
  .wg-mobile-menu-v10 .wg-mobile-link__copy small { display: block; }
  .wg-mobile-menu-v10 .wg-mobile-link__copy strong {
    color: #fff;
    font-size: .91rem;
    font-weight: 650;
    line-height: 1.25;
  }
  .wg-mobile-menu-v10 .wg-mobile-link__copy small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .48);
    font-size: .73rem;
    font-weight: 450;
    line-height: 1.3;
  }
  .wg-mobile-menu-v10 .wg-mobile-link__chevron {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .23);
    font-size: 19px;
  }

  .wg-mobile-menu-v10 .wg-mobile-panel-cta {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 14px 16px !important;
    border-radius: 13px !important;
    background: var(--wg-mobile-green) !important;
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 700 !important;
  }

  .wg-mobile-menu-v10 :is(a, button):focus-visible {
    outline: 3px solid rgba(118, 212, 175, .72) !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 1121px) {
  .mobile-menu__overlay.wg-mobile-menu-v10 { display: none !important; }
}

@media (min-width: 640px) and (max-width: 1120px) {
  .mobile-menu__overlay.wg-mobile-menu-v10 {
    background: rgba(2, 23, 17, .46) !important;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
  }

  .wg-mobile-menu-v10 .wg-mobile-level {
    inset: 12px 12px 12px auto;
    width: min(432px, calc(100vw - 24px));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 26px 70px rgba(0, 24, 18, .28);
  }
}

@media (max-width: 1120px) {
  html:has(body.wg-v9),
  html:has(body.wg-header-v8) {
    scrollbar-width: none;
  }

  html:has(body.wg-v9)::-webkit-scrollbar,
  html:has(body.wg-header-v8)::-webkit-scrollbar {
    display: none;
  }

  html:has(body.wg-mobile-menu-open) {
    overflow: hidden !important;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 380px), (max-height: 720px) {
  .wg-mobile-menu-v10 .mobile-menu__topbar,
  .wg-mobile-menu-v10 .wg-mobile-subhead { height: 64px; min-height: 64px; }
  .wg-mobile-menu-v10 .wg-mobile-root-nav { padding-top: 18px; }
  .wg-mobile-menu-v10 .wg-mobile-root-link { min-height: 55px; padding-block: 10px !important; }
  .wg-mobile-menu-v10 .wg-mobile-actions { padding: 11px; margin-bottom: max(10px, env(safe-area-inset-bottom)); }
  .wg-mobile-menu-v10 .wg-mobile-login,
  .wg-mobile-menu-v10 .wg-mobile-primary { min-height: 44px; }
  .wg-mobile-menu-v10 .wg-mobile-phone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__overlay.wg-mobile-menu-v10,
  .wg-mobile-menu-v10 .wg-mobile-level { transition-duration: .01ms !important; }
}