/* KeizerAI Brand Guide v2 (dark-first). Bron: assets/Brand-assets/brand-guide.md
   Gedeelde look voor alle pagina's. Laadt na de inline <style> van elke pagina en na tailwind.css.

   Palet
   Dark Base #0A0E12 · Dark Surface #12181D · Dark Elevated #192127
   Text Light #F3F6F5 · Secondary Text #69767D
   Blue #3A9DFF · Deep Blue #2458E8 · Cyan #62D6F5 · Teal #2AD9AE
   Regel: nooit wit of Text Light op Blue (contrast 2.6). Knoplabel op Blue = Dark Base. */

:root {
  color-scheme: dark;
  --dark-base: #0A0E12;
  --dark-surface: #12181D;
  --dark-elevated: #192127;
  --text-light: #F3F6F5;
  --text-secondary: #69767D;
  --blue: #3A9DFF;
  --blue-hover: #62B4FF;
  --deep-blue: #2458E8;
  --cyan: #62D6F5;
  --teal: #2AD9AE;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

body { font-family: 'Inter', system-ui, sans-serif; color: var(--text-light); background: var(--dark-base); line-height: 1.7; }
::selection { background: var(--blue); color: var(--dark-base); }

/* Koppen: Satoshi, strakke tracking */
.font-display { font-family: 'Satoshi', Inter, system-ui, sans-serif; letter-spacing: -0.03em; }
h1, h2, h3 { font-family: 'Satoshi', Inter, system-ui, sans-serif; }

/* Gloeiend kopwoord (was serif-accent): Satoshi Black, verloop Blue naar Cyan */
.serif-accent {
  font-family: 'Satoshi', Inter, system-ui, sans-serif;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -0.03em;
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 70%, #7EE8D2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Kopwoorden die al blauw waren krijgen hetzelfde verloop */
h1 .text-blue, h2 .text-blue, h3 .text-blue {
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 70%, #7EE8D2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Diepte: gelaagd (base > surface > elevated > floating), blauw getinte schaduwen */
.shadow-soft { box-shadow: 0 1px 0 rgba(243,246,245,0.05) inset, 0 12px 28px -10px rgba(0,0,0,0.55), 0 24px 56px -20px rgba(36,88,232,0.22); }
.shadow-blue { box-shadow: 0 8px 22px -8px rgba(58,157,255,0.45), 0 2px 6px rgba(58,157,255,0.25); }
.shadow-card-dark { box-shadow: 0 1px 0 rgba(243,246,245,0.06) inset, 0 20px 40px -18px rgba(0,0,0,0.6), 0 8px 20px -10px rgba(36,88,232,0.18); }
.surface-elevated { background: var(--dark-elevated); }

/* Glaskaart (gids 6b): Dark Surface 60%, 1px rand Text Light 10%, blur 16px, 8px hoeken */
.glass {
  background: rgba(18,24,29,0.6);
  border: 1px solid rgba(243,246,245,0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 8px;
}

/* ===== Sectie-achtergronden: luminous mesh (moodboard: Gemini, AgentBoost, KEIZERAI-banner) =====
   Drie niveaus: hero (fel, bewegend, horizon) > band (aurora) > inhoud (zachte zijgloed).
   Tekst staat nooit op de felste plek: licht zit in hoeken en onderrand. */

/* Inhoud: nooit meer plat zwart, zachte gloed in de hoeken */
.bg-diag-blue,
.hero-premium-bg {
  background-color: var(--dark-base);
  background-image:
    radial-gradient(45% 40% at 0% 0%, rgba(36,88,232,0.26), transparent 70%),
    radial-gradient(40% 38% at 100% 100%, rgba(98,214,245,0.12), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.hero-premium-bg--alt {
  background-color: var(--dark-base);
  background-image:
    radial-gradient(45% 40% at 100% 0%, rgba(58,157,255,0.20), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(42,217,174,0.10), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* Hero: felle mesh die langzaam drijft + gloeiende horizon onderin */
.hero-premium-bg--glow {
  position: relative;
  isolation: isolate;
  background-color: var(--dark-base);
  background-image:
    radial-gradient(90% 70% at 50% 150%, var(--dark-base) 0 86%, rgba(98,214,245,0.95) 87.2%, rgba(58,157,255,0.45) 89%, rgba(36,88,232,0.18) 93%, transparent 100%),
    linear-gradient(180deg, transparent 55%, rgba(36,88,232,0.22) 100%);
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.hero-premium-bg--glow::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(32% 38% at 80% 24%, rgba(58,157,255,0.55), transparent 70%),
    radial-gradient(26% 30% at 95% 58%, rgba(98,214,245,0.42), transparent 70%),
    radial-gradient(30% 34% at 14% 14%, rgba(36,88,232,0.60), transparent 70%),
    radial-gradient(22% 26% at 62% 78%, rgba(42,217,174,0.22), transparent 70%);
  animation: glow-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}
@media (max-width: 767px) {
  .hero-premium-bg--glow {
    background-image:
      radial-gradient(110% 40% at 50% 138%, var(--dark-base) 0 86%, rgba(98,214,245,0.95) 87.2%, rgba(58,157,255,0.45) 89%, rgba(36,88,232,0.18) 93%, transparent 100%),
      linear-gradient(180deg, transparent 55%, rgba(36,88,232,0.22) 100%);
  }
}
/* Werkwijze-hero heeft zijn eigen horizon-element */
.wh-hero.hero-premium-bg--glow { background-image: none; }

@keyframes glow-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.03); }
}

/* Band (werkwijze, FAQ, logo-rij, footer): aurora met lichtlijn aan de bovenrand */
.navy-premium-bg,
.navy-premium-bg--alt,
.navy-studio-bg {
  background-color: var(--dark-base);
  background-image:
    radial-gradient(55% 55% at 12% 0%, rgba(36,88,232,0.50), transparent 70%),
    radial-gradient(40% 45% at 92% 8%, rgba(98,214,245,0.24), transparent 70%),
    radial-gradient(70% 50% at 50% 115%, rgba(58,157,255,0.30), transparent 70%),
    linear-gradient(180deg, #0C1626 0%, var(--dark-base) 55%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 rgba(98,214,245,0.22);
}

/* Banner (contact/CTA): volle KEIZERAI-banner mesh */
.grad-accent {
  position: relative;
  background-color: var(--dark-base);
  background-image:
    radial-gradient(38% 65% at 88% 18%, rgba(98,214,245,0.55), transparent 70%),
    radial-gradient(50% 60% at 62% 62%, rgba(58,157,255,0.42), transparent 70%),
    radial-gradient(48% 75% at 6% 100%, rgba(36,88,232,0.70), transparent 70%),
    radial-gradient(28% 40% at 32% 6%, rgba(42,217,174,0.20), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-blend-mode: normal;
}

/* Grote cijfers: Text Light naar Cyan */
.num-glow {
  background-image: linear-gradient(120deg, var(--text-light) 20%, var(--cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Kaarten op donker: zachte blauwe gloed-rand bij hover */
.bg-surface.rounded-lg { transition: box-shadow 0.25s var(--ease-spring), border-color 0.25s var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .hero-premium-bg--glow::after { animation: none; }
}

/* Knoppen: pil-rond. Primair = Blue met Dark Base-label */
.btn-primary,
.btn-outline,
.btn-soft,
.btn-shiny { border-radius: 999px; }

/* CTA: verloop Blue naar Cyan, Dark Base-label (6.9+). Geldt ook voor .btn-shiny */
.btn-primary,
.btn-shiny {
  background: linear-gradient(120deg, var(--blue) 0%, var(--cyan) 100%); color: var(--dark-base);
  box-shadow: 0 6px 18px -8px rgba(58,157,255,0.55), 0 1px 0 rgba(255,255,255,0.25) inset;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring);
}
.btn-primary:hover,
.btn-shiny:hover { background: linear-gradient(120deg, var(--blue-hover) 0%, #8BE3F8 100%); color: var(--dark-base); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(58,157,255,0.6), 0 1px 0 rgba(255,255,255,0.3) inset; }
.btn-primary:active,
.btn-shiny:active { background: linear-gradient(120deg, var(--blue) 0%, var(--cyan) 100%); transform: translateY(0); box-shadow: 0 4px 12px -6px rgba(58,157,255,0.5); }
.btn-primary:focus-visible,
.btn-shiny:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.btn-outline {
  border: 1.5px solid var(--text-light); color: var(--text-light);
  transition: transform 0.25s var(--ease-spring), background-color 0.25s var(--ease-spring), color 0.25s var(--ease-spring);
}
.btn-outline:hover { background: var(--text-light); color: var(--dark-base); transform: translateY(-2px); }
.btn-outline:active { background: rgba(243,246,245,0.85); color: var(--dark-base); transform: translateY(0); }
.btn-outline:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.btn-soft {
  background: rgba(243,246,245,0.07); color: var(--text-light);
  transition: transform 0.25s var(--ease-spring), background-color 0.25s var(--ease-spring);
}
.btn-soft:hover { background: rgba(243,246,245,0.12); transform: translateY(-2px); }
.btn-soft:active { background: rgba(243,246,245,0.16); transform: translateY(0); }
.btn-soft:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Secundaire knop op lichte vlakken: zwart, zodat cyaan voor de hoofdactie blijft */
.btn-dark {
  border-radius: 999px; background: #11171B; color: #F3F6F5;
  box-shadow: 0 8px 20px -10px rgba(17,23,27,0.45);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), background-color 0.25s var(--ease-spring);
}
.btn-dark:hover { background: #1E272D; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(17,23,27,0.5); }
.btn-dark:active { background: #11171B; transform: translateY(0); box-shadow: 0 4px 10px -6px rgba(17,23,27,0.4); }
.btn-dark:focus-visible { outline: 2px solid var(--deep-blue, #2458E8); outline-offset: 3px; }

/* Navigatie, formulieren */
.nav-link { color: var(--text-light); }
.nav-link::after { background: var(--blue); }
.nav-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; }

.input-field,
.input-light {
  background: rgba(243,246,245,0.05); border: 1.5px solid rgba(243,246,245,0.16); color: var(--text-light);
  border-radius: 8px;
}
.input-field::placeholder,
.input-light::placeholder { color: rgba(243,246,245,0.45); }
.input-field:focus,
.input-light:focus { border-color: var(--blue); background: rgba(243,246,245,0.08); outline: none; box-shadow: 0 0 0 2px rgba(58,157,255,0.35); }

.faq-item summary:hover .faq-question,
.faq-item[open] summary .faq-question { color: var(--text-light); }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 8px; }

/* Klantlogo's op donker: eenkleurig licht */
.logo-mono { filter: brightness(0) invert(1); opacity: 0.55; }
.logo-mono-jpg { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: 0.6; }
.logo-strip img { opacity: 0.75; transition: opacity 0.25s var(--ease-spring); }
.logo-strip a:hover img, .logo-strip a:focus-visible img { opacity: 1; }
.logo-strip a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.logo-strip-light img { opacity: 0.6; filter: grayscale(1) brightness(0) invert(1); }
.logo-strip-light a:hover img,
.logo-strip-light a:focus-visible img { opacity: 1; filter: none; }
.logo-strip-light a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }

.footer-link { color: rgba(243,246,245,0.65); }
.footer-link:hover { color: var(--cyan); }
.footer-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Werkwijze: tijdlijn + kaarten */
/* Tijdlijn: cyaan lijn die zacht gloeit; het stuk dat je al gescrold hebt licht fel op */
.roadmap-rail::before { background: rgba(98,214,245,0.3); box-shadow: 0 0 8px rgba(98,214,245,0.35); }
.roadmap-trail {
  background: linear-gradient(180deg, rgba(98,214,245,0.5) 0%, var(--cyan) 40%, #9BE9FB 100%);
  box-shadow: 0 0 6px rgba(98,214,245,0.9), 0 0 18px rgba(98,214,245,0.55), 0 0 36px rgba(58,157,255,0.35);
  border-radius: 2px;
}
.roadmap-runner { background: #E6FAFE; box-shadow: 0 0 0 4px rgba(98,214,245,0.25), 0 0 14px 3px rgba(98,214,245,0.85), 0 0 34px 8px rgba(58,157,255,0.45); }
.roadmap-dot { border-color: rgba(98,214,245,0.45); background: var(--dark-base); }
.roadmap-step.is-reached .roadmap-dot { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 12px rgba(98,214,245,0.7); }

.wk-card { border-radius: 8px; }
.wk-card--paper {
  background: var(--dark-surface); color: var(--text-light);
  border: 1px solid rgba(243,246,245,0.1);
  box-shadow: 0 1px 0 rgba(243,246,245,0.05) inset, 0 24px 48px -20px rgba(0,0,0,0.6);
}
.wk-card--navy {
  background: linear-gradient(180deg, var(--dark-elevated) 0%, var(--dark-surface) 100%); color: var(--text-light);
  border: 1px solid rgba(243,246,245,0.12);
  box-shadow: 0 1px 0 rgba(243,246,245,0.06) inset, 0 24px 48px -20px rgba(0,0,0,0.65);
}
/* Blauwe kaart: Deep Blue met wit label (5.8), geen wit op Blue */
.wk-card--blue {
  background: linear-gradient(155deg, #2E68F0 0%, var(--deep-blue) 55%, #1B45C0 100%); color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 24px 48px -18px rgba(0,0,0,0.7), 0 10px 26px -12px rgba(36,88,232,0.55);
}
.wk-bar { background: rgba(243,246,245,0.09); }
.wk-stat { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 8px; }
.wk-live-dot { background: var(--teal); box-shadow: 0 0 0 3px rgba(42,217,174,0.28); }
.wk-deadline { color: var(--dark-base); background: var(--text-light); }
.wk-note { background: rgba(243,246,245,0.05); color: rgba(243,246,245,0.75); }
.wk-note--dark { background: rgba(243,246,245,0.06); color: rgba(243,246,245,0.72); }
.wk-note--blue { background: rgba(10,14,18,0.28); color: rgba(255,255,255,0.9); }

/* Foto-behandeling: verloop in Dark Base, kleurlaag Blue */
.photo-treat::after { background: linear-gradient(to top, rgba(10,14,18,0.6) 0%, rgba(10,14,18,0.16) 38%, rgba(10,14,18,0) 68%); }
.photo-treat--caption::after { background: linear-gradient(to top, rgba(10,14,18,0.94) 0%, rgba(10,14,18,0.64) 18%, rgba(10,14,18,0.18) 42%, rgba(10,14,18,0) 72%); }
.photo-tint { background: var(--blue); }
.founder-photo:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 24px 48px -16px rgba(58,157,255,0.3); }

/* Gedeelde focus-ring (Blue, 2px) voor links en knoppen zonder eigen regel */
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: var(--blue); }

/* ===== Naadloze secties (.blend) =====
   Sectie zelf is transparant op Dark Base. De gloed zit in een laag die 140px boven en
   onder de sectie uitsteekt en daar uitfadet, zodat buren in elkaar overlopen zonder rand. */
.blend {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
.blend.grain::before { display: none; }
.blend::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -140px; bottom: -140px;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 140px), transparent 100%);
}
.blend--logos::after {
  background-image:
    radial-gradient(55% 75% at 50% 18%, rgba(98,214,245,0.30), transparent 70%),
    radial-gradient(30% 70% at 6% 50%, rgba(36,88,232,0.35), transparent 70%),
    radial-gradient(30% 70% at 96% 50%, rgba(42,217,174,0.14), transparent 70%);
}
.blend--left::after {
  background-image:
    radial-gradient(45% 45% at 0% 35%, rgba(36,88,232,0.55), transparent 70%),
    radial-gradient(35% 38% at 100% 82%, rgba(98,214,245,0.24), transparent 70%),
    radial-gradient(30% 30% at 55% 100%, rgba(58,157,255,0.18), transparent 70%);
}
.blend--werkwijze::after {
  background-image:
    radial-gradient(50% 22% at 0% 6%, rgba(36,88,232,0.60), transparent 70%),
    radial-gradient(45% 20% at 100% 30%, rgba(58,157,255,0.38), transparent 70%),
    radial-gradient(40% 18% at 10% 58%, rgba(98,214,245,0.24), transparent 70%),
    radial-gradient(45% 20% at 100% 80%, rgba(42,217,174,0.20), transparent 70%),
    radial-gradient(60% 14% at 40% 100%, rgba(58,157,255,0.28), transparent 70%);
}
.blend--right::after {
  background-image:
    radial-gradient(45% 45% at 100% 28%, rgba(58,157,255,0.45), transparent 70%),
    radial-gradient(38% 40% at 0% 88%, rgba(42,217,174,0.18), transparent 70%),
    radial-gradient(35% 30% at 30% 0%, rgba(36,88,232,0.25), transparent 70%);
}
.blend--teal::after {
  background-image:
    radial-gradient(40% 50% at 6% 50%, rgba(42,217,174,0.22), transparent 70%),
    radial-gradient(45% 55% at 96% 30%, rgba(36,88,232,0.50), transparent 70%),
    radial-gradient(35% 40% at 70% 100%, rgba(98,214,245,0.18), transparent 70%);
}
.blend--faq::after {
  background-image:
    radial-gradient(55% 50% at 16% 50%, rgba(36,88,232,0.55), transparent 70%),
    radial-gradient(40% 45% at 92% 18%, rgba(98,214,245,0.28), transparent 70%),
    radial-gradient(40% 40% at 80% 100%, rgba(58,157,255,0.25), transparent 70%);
}
.blend--banner::after {
  background-image:
    radial-gradient(38% 55% at 90% 16%, rgba(98,214,245,0.55), transparent 70%),
    radial-gradient(50% 50% at 62% 62%, rgba(58,157,255,0.42), transparent 70%),
    radial-gradient(48% 65% at 4% 96%, rgba(36,88,232,0.75), transparent 70%),
    radial-gradient(28% 35% at 30% 8%, rgba(42,217,174,0.24), transparent 70%);
}
.blend--footer::after {
  background-image:
    radial-gradient(70% 80% at 50% 115%, rgba(58,157,255,0.42), transparent 70%),
    radial-gradient(40% 70% at 92% 100%, rgba(98,214,245,0.26), transparent 70%),
    radial-gradient(40% 70% at 6% 100%, rgba(36,88,232,0.55), transparent 70%);
}

/* ===== Lichte secties (.section-light) — brand guide sectie 10 =====
   Light Base achtergrond, Text Dark tekst, Deep Blue accent. Zet de bestaande
   paper/surface-classes binnen de sectie om, zodat de html gelijk blijft.
   Donkere sub-vlakken (.navy-studio-bg, .photo-treat) houden hun lichte tekst. */
.section-light {
  --text-dark: #11171B;
  --light-base: #F5F7F6;
  --light-surface: #EBEFED;
  --light-elevated: #FAFBFA;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color-scheme: light;
  background: var(--light-base);
  color: var(--text-dark);
}
.section-light .text-paper { color: var(--text-dark); }
.section-light .text-paper\/90 { color: rgba(17,23,27,0.9); }
.section-light .text-paper\/80 { color: rgba(17,23,27,0.82); }
.section-light .text-paper\/70,
.section-light .text-paper\/65 { color: rgba(17,23,27,0.72); }
.section-light .text-paper\/60,
.section-light .text-paper\/55,
.section-light .text-paper\/50 { color: rgba(17,23,27,0.64); }
.section-light .hover\:text-paper:hover { color: var(--text-dark); }
.section-light .text-blue { color: var(--deep-blue); }
.section-light :is(h1, h2, h3) .text-blue {
  background-image: linear-gradient(90deg, var(--deep-blue) 0%, #2E7BF0 100%);
}
.section-light .num-glow { background-image: linear-gradient(120deg, var(--text-dark) 20%, var(--deep-blue) 100%); }
.section-light p[style*="background-clip"] { background-image: linear-gradient(135deg, #2E7BF0 0%, var(--deep-blue) 55%, #1B45C0 100%) !important; }

.section-light .bg-surface { background-color: var(--light-elevated); }
.section-light .bg-paper\/5 { background-color: rgba(17,23,27,0.04); }
.section-light .bg-blue\/10 { background-color: rgba(36,88,232,0.08); }
.section-light .border-paper\/10 { border-color: rgba(17,23,27,0.08); }
.section-light .border-paper\/15 { border-color: rgba(17,23,27,0.12); }
.section-light .shadow-soft { box-shadow: 0 1px 2px rgba(17,23,27,0.04), 0 10px 24px -12px rgba(17,23,27,0.10), 0 24px 48px -24px rgba(36,88,232,0.16); }
.section-light .shadow-blue { box-shadow: 0 8px 22px -10px rgba(36,88,232,0.45), 0 2px 6px rgba(36,88,232,0.18); }

/* Knoppen op licht: CTA houdt Blue/Cyan-verloop, focusring Deep Blue */
.section-light .btn-soft { background: rgba(17,23,27,0.06); color: var(--text-dark); }
.section-light .btn-soft:hover { background: rgba(17,23,27,0.1); }
.section-light .btn-soft:active { background: rgba(17,23,27,0.14); }
.section-light :is(a, button, summary):focus-visible,
.section-light :is(.btn-primary, .btn-shiny, .btn-soft):focus-visible { outline-color: var(--deep-blue); }

.section-light .input-light { background: #FFFFFF; border-color: rgba(17,23,27,0.14); color: var(--text-dark); }
.section-light .input-light::placeholder { color: rgba(17,23,27,0.45); }
.section-light .input-light:focus { background: #FFFFFF; border-color: var(--deep-blue); box-shadow: 0 0 0 3px rgba(36,88,232,0.18); }

/* Donkere vlakken binnen een lichte sectie blijven donker */
.section-light :is(.navy-studio-bg, .photo-treat) { color-scheme: dark; }
.section-light :is(.navy-studio-bg, .photo-treat) .text-paper { color: var(--text-light); }
.section-light :is(.navy-studio-bg, .photo-treat) .text-paper\/80 { color: rgba(243,246,245,0.8); }
.section-light :is(.navy-studio-bg, .photo-treat) .text-paper\/50 { color: rgba(243,246,245,0.5); }
.section-light :is(.navy-studio-bg, .photo-treat) .text-blue { color: var(--blue); }
.section-light :is(.navy-studio-bg, .photo-treat) .bg-blue\/15 { background-color: rgba(58,157,255,0.15); }

/* Gloeiend kopwoord, randen, pagina-specifieke onderdelen op licht */
.section-light .serif-accent { background-image: linear-gradient(90deg, var(--deep-blue) 0%, #2E7BF0 100%); }
.section-light :is(.navy-studio-bg, .photo-treat) .serif-accent { background-image: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 70%, #7EE8D2 100%); }
.section-light .border-paper\/20 { border-color: rgba(17,23,27,0.14); }
.section-light .border-paper\/\[0\.08\] { border-color: rgba(17,23,27,0.08); }
.section-light .text-paper\/\[0\.07\] { color: rgba(17,23,27,0.07); }
.section-light .bg-surface\/50 { background-color: rgba(250,251,250,0.7); }
.section-light [class*="bg-navy"].text-paper,
.section-light [class*="bg-navy"] .text-paper { color: var(--text-light); }
.section-light .logo-strip-light img { filter: grayscale(1) brightness(0); opacity: 0.5; }
.section-light .logo-strip-light a:hover img,
.section-light .logo-strip-light a:focus-visible img { filter: none; opacity: 1; }
/* Logo's met losse naam (PSP ICT, Kras Mesologie): naam even licht als de grijze logo's ernaast */
.section-light .logo-strip-light li span > span { color: rgba(17,23,27,0.5); }
.section-light .trust-pill .marquee-track li > span > span { opacity: 0.55; }
.section-light .trust-pill .marquee-track li:hover > span > span { opacity: 1; }
.logo-strip li > span > span { opacity: 0.75; }
/* Pneuman (donker logo): zacht grijs zodat het naast de andere logo's valt, in beide logostroken */
.logo-strip img.logo-own,
.section-light .trust-pill .marquee-track img.logo-own,
.section-light .logo-strip-light img.logo-own { filter: grayscale(1) contrast(0.5) brightness(1.35); opacity: 0.6; }
.section-light .text-link { color: var(--text-dark); }
.section-light .text-link:hover { color: var(--deep-blue); }
.section-light .build-chip { color: var(--deep-blue); background: rgba(36,88,232,0.08); border-color: rgba(36,88,232,0.2); }
.section-light .build-chip:hover { color: var(--deep-blue); background: rgba(36,88,232,0.14); }
.section-light .service-card--extra { background: transparent; border-color: rgba(17,23,27,0.2); }
.section-light .extra-label { color: var(--deep-blue); background: rgba(36,88,232,0.08); border-color: rgba(36,88,232,0.2); }

/* Hero's op licht (contact, over ons, cases, diensten, werkwijze) */
.section-light .btn-outline { border-color: var(--text-dark); color: var(--text-dark); }
.section-light .btn-outline:hover { background: var(--text-dark); color: var(--light-base); }
.section-light .btn-outline:active { background: rgba(17,23,27,0.85); color: var(--light-base); }
/* Werkwijze-hero vult het hele scherm; de volgende sectie begint pas na de scroll.
   De horizon-boog blijft: licht vlak met een gloeiende blauw-cyaan rand. */
.section-light.wh-hero { min-height: 100svh; padding-bottom: 12rem; display: flex; flex-direction: column; justify-content: center; }
.section-light .wh-horizon {
  background: var(--light-base);
  box-shadow:
    0 0 0 1.5px rgba(58,157,255,0.75),
    0 -4px 18px -2px rgba(98,214,245,0.75),
    0 -24px 70px -8px rgba(58,157,255,0.45),
    0 -60px 140px -20px rgba(98,214,245,0.3);
}
.section-light .wh-horizon::before { border-top-color: var(--cyan); border-top-width: 2.5px; }
.section-light .wh-title { background: linear-gradient(135deg, var(--text-dark) 30%, rgba(17,23,27,0.6)); -webkit-background-clip: text; background-clip: text; }

/* Donkere sectie direct na een lichte: gloed niet over de lichte sectie laten lopen */
.section-light + .blend::after {
  top: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent 100%);
}

/* ===== Schuine naden licht <-> donker =====
   De lichte sectie krijgt een licht schuine rand (standaard links laag, rechts hoog; .slant-flip spiegelt
   hem, naden wisselen om en om) en schuift over de donkere buur heen. De donkere buur krijgt een transparante
   rand van dezelfde hoogte, zodat zijn inhoud niet onder de schuine punt valt. */
:root { --slant: clamp(22px, 3.6vw, 60px); }
.section-light.slant-top,
.section-light.slant-bottom { z-index: 1; }
.section-light.slant-top {
  margin-top: calc(var(--slant) * -1);
  border-top: var(--slant) solid transparent;
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}
.section-light.slant-bottom {
  margin-bottom: calc(var(--slant) * -1);
  border-bottom: var(--slant) solid transparent;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.section-light.slant-top.slant-bottom {
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
/* .slant-flip spiegelt de rand (links hoog, rechts laag), zodat opeenvolgende naden om en om lopen */
.section-light.slant-top.slant-flip {
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
}
.section-light.slant-bottom.slant-flip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant)));
}
.section-light.slant-top.slant-bottom.slant-flip {
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
}
.slant-bottom + *,
main:has(> .slant-bottom:last-child) + * { border-top: var(--slant) solid transparent; box-shadow: none; background-origin: border-box; }
*:has(+ .slant-top) { border-bottom: var(--slant) solid transparent; background-origin: border-box; }
/* Cases: CTA zit in een wrapper, dus de rand hoort op de CTA-sectie zelf */
main:has(> .slant-bottom:last-child) + div:has(> .grad-accent:first-child) { border-top-width: 0; }
main:has(> .slant-bottom:last-child) + div > .grad-accent:first-child { border-top: var(--slant) solid transparent; background-origin: border-box; }
:is(.slant-bottom + *, main:has(> .slant-bottom:last-child) + *).grain::before { top: calc(var(--slant) * -1); }
.grain:has(+ .slant-top)::before { bottom: calc(var(--slant) * -1); }
/* Gloedlaag van .blend: tot in de rand doorlopen en zacht laten invallen, geen harde lijn */
:is(.slant-bottom + .blend, main:has(> .slant-bottom:last-child) + .blend)::after {
  top: calc(var(--slant) * -1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--slant) + 160px), #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--slant) + 160px), #000 calc(100% - 140px), transparent 100%);
}

/* Donker op donker (werkwijze: samenwerken -> footer): geen lichtlijn of afgekapte gloed */
.navy-studio-bg.flat-bottom { background-image: radial-gradient(55% 55% at 12% 0%, rgba(36,88,232,0.50), transparent 70%), radial-gradient(40% 45% at 92% 8%, rgba(98,214,245,0.24), transparent 70%), linear-gradient(180deg, #0C1626 0%, var(--dark-base) 55%); }
.navy-studio-bg.flat-top { box-shadow: none; background-image: radial-gradient(70% 50% at 50% 115%, rgba(58,157,255,0.30), transparent 70%); }

/* ===== Header op licht (alle pagina's beginnen wit) ===== */
#site-header {
  background: rgba(245,247,246,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(17,23,27,0.07);
  color: #11171B;
}
#site-header.shadow-soft { box-shadow: 0 1px 2px rgba(17,23,27,0.04), 0 12px 28px -18px rgba(36,88,232,0.22); }
#site-header .nav-link { color: #11171B; }
#site-header .nav-link::after { background: var(--deep-blue); }
#site-header .nav-link:focus-visible { outline-color: var(--deep-blue); }
#site-header #menu-toggle { color: #11171B; border-color: rgba(17,23,27,0.14); }
#site-header #menu-toggle:hover { background: rgba(17,23,27,0.05); }
#site-header #menu-toggle:active { background: rgba(17,23,27,0.09); }
#site-header #mobile-nav { background: #FAFBFA; border-top-color: rgba(17,23,27,0.07); }

/* ===== Homepage-hero op licht ===== */
.section-light .hero-panel {
  background: var(--light-elevated);
  border-color: rgba(17,23,27,0.06);
  box-shadow: 0 1px 2px rgba(17,23,27,0.04), 0 30px 70px -40px rgba(36,88,232,0.28);
}
.section-light .aurora {
  --aurora-dark: repeating-linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 7%, transparent 10%, transparent 12%, #FFFFFF 16%);
  background-image: var(--aurora-dark), var(--aurora-light);
  filter: blur(10px) invert(1);
  opacity: 0.4;
}
.section-light .aurora::after { background-image: var(--aurora-dark), var(--aurora-light); }
.section-light .trust-pill {
  background: rgba(255,255,255,0.7);
  border-color: rgba(17,23,27,0.08);
  box-shadow: 0 1px 2px rgba(17,23,27,0.04), 0 16px 32px -20px rgba(36,88,232,0.25);
}
.section-light .trust-pill-label { border-color: rgba(17,23,27,0.12); }
.section-light .trust-pill .marquee-track img { filter: grayscale(1) brightness(0); opacity: 0.55; }
.section-light .trust-pill .marquee-track img[src$="pneuman.webp"] { filter: grayscale(1) contrast(1.2); }
.section-light .trust-pill .marquee-track li:hover img { filter: none; opacity: 1; }

/* Subtiele korrel over de hele pagina, zodat de gloed niet plastic oogt */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
}

/* ===== Homepage-hero: afgerond paneel met aurora (Gemini-stijl) ===== */
.hero-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 112px);
  border-radius: 28px;
  background: var(--dark-base);
  border: 1px solid rgba(243,246,245,0.08);
  box-shadow:
    0 1px 0 rgba(243,246,245,0.06) inset,
    0 40px 90px -50px rgba(58,157,255,0.35),
    0 20px 40px -30px rgba(0,0,0,0.7);
}
@media (min-width: 1024px) { .hero-panel { min-height: calc(100svh - 120px); } }
.hero-panel.grain::before { z-index: 1; }

/* Aurora: herhalende strepen, geblurd, met een tweede laag die er langzaam doorheen schuift */
.aurora {
  --aurora-dark: repeating-linear-gradient(100deg, #0A0E12 0%, #0A0E12 7%, transparent 10%, transparent 12%, #0A0E12 16%);
  --aurora-light: repeating-linear-gradient(100deg, #3A9DFF 10%, #62D6F5 15%, #2458E8 20%, #9BE6FA 25%, #3A9DFF 30%);
  position: absolute;
  inset: -10px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--aurora-dark), var(--aurora-light);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  filter: blur(10px);
  opacity: 0.55;
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 10%, transparent 72%);
}
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aurora-dark), var(--aurora-light);
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  animation: aurora 60s linear infinite;
}
@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::after { animation: none; }
}

.hero-title {
  font-size: clamp(2.75rem, 8.2vw, 6.75rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.hero-title .serif-accent { font-weight: 500; white-space: nowrap; }

/* Logo-balk onderin de hero */
.trust-pill {
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(18,24,29,0.55);
  border: 1px solid rgba(243,246,245,0.1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(243,246,245,0.05) inset, 0 20px 40px -24px rgba(0,0,0,0.7);
}
@media (min-width: 640px) {
  .trust-pill { padding: 8px 8px 8px 24px; border-radius: 999px; }
  .trust-pill-label { padding-right: 20px; margin-right: 4px; border-right: 1px solid rgba(243,246,245,0.14); }
  .trust-pill .marquee { height: 48px; display: flex; align-items: center; }
}
.trust-pill .marquee-track { align-items: center; }
.trust-pill .marquee-track li,
.trust-pill .marquee-track li > span { display: flex; align-items: center; line-height: 1; }
.trust-pill .marquee-track img { display: block; }
/* Logo's in de hero: wit en ingetogen, kleur terug bij hover */
.trust-pill .marquee-track img { filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s var(--ease-spring); }
.trust-pill .marquee-track li > span > span { opacity: 0.7; transition: opacity 0.3s var(--ease-spring); }
.trust-pill .marquee-track li:hover img { filter: none; opacity: 1; }
.trust-pill .marquee-track li:hover span > span { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .trust-pill .marquee-track { flex-wrap: nowrap; justify-content: center; gap: 2rem; width: 100%; }
  .trust-pill .marquee-track li[aria-hidden="true"] { display: none; }
}
/* Pneuman-icoon heeft eigen vlak: grijstinten i.p.v. wit maken */
.trust-pill .marquee-track img[src$="pneuman.webp"] { filter: grayscale(1) brightness(1.5) contrast(1.1); }
.trust-pill .marquee-track li:hover img[src$="pneuman.webp"] { filter: none; }
/* Hero-accent volgt het logo: diep blauw naar fel cyaan */
.hero-title .serif-accent {
  background-image: linear-gradient(90deg, #0166FA 0%, #016EFA 30%, #03CFFB 62%, #03F7FA 82%, #03F7FA 100%);
}

/* ===== Cookiebalk: spiegelt de header (zelfde lichte glaslaag en haarlijn), volle breedte onderin =====
   Inhoud staat op dezelfde containerbreedte als de navigatie. Weigeren en Accepteren zijn even groot. */
.cookie-banner {
  position: fixed; z-index: 100; left: 0; right: 0; bottom: 0;
  background: rgba(245,247,246,0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(17,23,27,0.08);
  box-shadow: 0 -1px 2px rgba(17,23,27,0.03), 0 -18px 40px -24px rgba(36,88,232,0.28);
  color: #11171B;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  animation: cookie-in 0.7s var(--ease-spring) both;
}
.cookie-banner.is-leaving { animation: cookie-out 0.35s var(--ease-spring) both; }
.cookie-banner-inner {
  max-width: 80rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 640px) { .cookie-banner { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 768px) {
  .cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}
@media (min-width: 1024px) { .cookie-banner { padding: 10px 40px calc(10px + env(safe-area-inset-bottom)); } }
.cookie-banner-text { max-width: 46rem; }
.cookie-banner p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(17,23,27,0.72); }
.cookie-banner p strong { font: 700 13px/1.45 'Satoshi', Inter, system-ui, sans-serif; letter-spacing: -0.01em; color: #11171B; }
.cookie-banner a { color: var(--deep-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
.cookie-banner a:hover { color: #11171B; }
.cookie-banner a:active { opacity: 0.7; }
.cookie-banner a:focus-visible { outline: 2px solid var(--deep-blue); outline-offset: 2px; border-radius: 2px; }
.cookie-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; }
@media (min-width: 768px) { .cookie-banner-actions { grid-template-columns: repeat(2, auto); } }
.cookie-btn {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 500 13px/1.2 'Inter', system-ui, sans-serif;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring), background-color 0.3s var(--ease-spring);
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn:active { transform: translateY(0) scale(0.98); }
.cookie-btn:focus-visible { outline: 2px solid var(--deep-blue); outline-offset: 3px; }
.cookie-btn--ghost { background: transparent; color: #11171B; border: 1.5px solid rgba(17,23,27,0.22); }
.cookie-btn--ghost:hover { background: rgba(17,23,27,0.05); }
.cookie-btn--ghost:active { background: rgba(17,23,27,0.09); }
.cookie-btn--primary {
  border: 0; color: var(--dark-base);
  background: linear-gradient(120deg, var(--blue) 0%, var(--cyan) 100%);
  box-shadow: 0 6px 18px -8px rgba(58,157,255,0.55), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.cookie-btn--primary:hover { box-shadow: 0 12px 26px -10px rgba(58,157,255,0.6), 0 1px 0 rgba(255,255,255,0.3) inset; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes cookie-out { to { opacity: 0; transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .cookie-banner.is-leaving { animation: none; }
  .cookie-btn { transition: none; }
}

/* ===== Typografie: Satoshi voor koppen, Inter voor lopende tekst =====
   Vier gewichten, niet meer:
   Satoshi Medium (500) voor grote koppen (h1, h2, text-h3), Satoshi Bold (700) voor kaarttitels, Satoshi Regular (400) voor cijfers,
   Inter Regular (400) voor lopende tekst, Inter Medium (500) voor labels, knoppen en links.
   Het accentwoord krijgt geen zwaarder gewicht dan de rest van de kop. */
body, p, li, input, select, textarea, label, button { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4, .font-display { font-family: 'Satoshi', Inter, system-ui, sans-serif; }
h1 { font-weight: 500; letter-spacing: -0.035em; }
h1 .serif-accent { font-weight: 500; }

/* ===== Werkwijze als blauw vlak met tijdlijn (layout naar truehorizon "How we work") =====
   Eén kolom, vierkante markers op een dunne witte lijn; per stap nummer, titel,
   tekst en labels met wat je krijgt. De meelopende stip blijft (JS applyRail). */
.roadmap-band {
  background:
    radial-gradient(55% 35% at 90% 4%, rgba(98,214,245,0.22), transparent 70%),
    radial-gradient(45% 30% at 4% 96%, rgba(10,14,18,0.22), transparent 70%),
    linear-gradient(180deg, #1B45C0 0%, #2458E8 100%);
  background-origin: border-box;
  color: #F3F6F5;
}
.roadmap-band .roadmap-rail::before {
  top: var(--rail-start, 0); bottom: auto; height: calc(var(--rail-end, 100%) - var(--rail-start, 0));
  background: rgba(243,246,245,0.3); box-shadow: none;
  -webkit-mask-image: none; mask-image: none;
}
.roadmap-band .roadmap-trail { background: #F3F6F5; box-shadow: 0 0 10px rgba(185,238,251,0.6); }
.roadmap-band .roadmap-runner {
  width: 10px; height: 10px; border-radius: 1px; background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 18px 4px rgba(185,238,251,0.75);
}
.roadmap-band .roadmap-step { min-height: 0; padding-top: 0; padding-bottom: clamp(6rem, 22vh, 13rem); }
.roadmap-band .roadmap-step.roadmap-end { padding-bottom: 0; }
.roadmap-band .roadmap-dot {
  top: 22px; width: 13px; height: 13px; border-radius: 1px;
  border: 2px solid rgba(243,246,245,0.7); background: var(--dark-base);
}
.roadmap-band .roadmap-step.is-reached .roadmap-dot { border-color: #FFFFFF; background: #FFFFFF; box-shadow: none; transform: translate(-50%, -50%); }
.roadmap-band .roadmap-end .roadmap-dot { top: 20px; }
.rm-num { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: rgba(243,246,245,0.42); }
.rm-when { font-size: 13px; font-weight: 500; color: rgba(243,246,245,0.75); }
.rm-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.rm-pills li {
  font-size: 13px; line-height: 1.3; padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(243,246,245,0.35); background: rgba(243,246,245,0.08); color: rgba(243,246,245,0.92);
}
.rm-cta {
  display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 4px;
  background: #FFFFFF; color: #1B45C0; font-weight: 500; font-size: 15px;
  box-shadow: 0 10px 24px -12px rgba(10,14,18,0.5);
  transition: transform 0.3s var(--ease-spring), opacity 0.3s var(--ease-spring);
}
.rm-cta:hover { transform: translateY(-2px); opacity: 0.94; }
.rm-cta:active { transform: translateY(0) scale(0.98); }
.rm-cta:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.roadmap-band .rm-pict { height: auto; width: 150px; opacity: 0.9; }
.roadmap-band .rm-pict .ic { width: 150px; height: auto; overflow: visible; }
/* donkere vlakjes in de pictogrammen: licht doorzichtig op het blauw */
.roadmap-band .rm-pict [fill="rgba(18,24,29,0.85)"],
.roadmap-band .rm-pict [fill="rgba(18,24,29,0.9)"] { fill: rgba(255,255,255,0.1); }
.roadmap-band .rm-pict [fill="rgba(36,88,232,0.25)"] { fill: rgba(255,255,255,0.14); }
@media (prefers-reduced-motion: reduce) { .rm-cta, .rm-cta:hover { transition: none; transform: none; } }

/* Werkwijze: alleen de actieve stap is scherp, de rest staat vaag tot je erheen scrolt */
.roadmap-band .roadmap-step > :not(.roadmap-dot) {
  opacity: 0.25; filter: blur(2.5px); transform: translateY(10px);
  transition: opacity 0.55s var(--ease-spring), filter 0.55s var(--ease-spring), transform 0.65s var(--ease-spring);
}
.roadmap-band .roadmap-step.is-active > :not(.roadmap-dot) { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .roadmap-band .roadmap-step > :not(.roadmap-dot) { transition: none; transform: none; filter: none; }
}

/* Roadmap in merkkleuren (homepage + werkwijze): cyaan lijn, stip, markers en nummers (sectie staat op donker door .blend).
   Alleen via .roadmap-band--brand. Lopende tekst blijft wit voor leesbaarheid. */
.roadmap-band--brand .roadmap-rail::before { background: rgba(98,214,245,0.28); }
.roadmap-band--brand .roadmap-trail {
  background: linear-gradient(180deg, var(--cyan), #B9EEFB);
  box-shadow: 0 0 12px rgba(98,214,245,0.7);
}
.roadmap-band--brand .roadmap-runner {
  background: #E6FAFE;
  box-shadow: 0 0 0 4px rgba(98,214,245,0.25), 0 0 18px 4px rgba(98,214,245,0.8);
}
.roadmap-band--brand .roadmap-dot { border-color: rgba(98,214,245,0.55); background: var(--dark-base); }
.roadmap-band--brand .roadmap-step.is-reached .roadmap-dot {
  border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 12px rgba(98,214,245,0.6);
}
.roadmap-band--brand .rm-num { color: var(--cyan); }
.rm-accent {
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 70%, #7EE8D2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Werkwijze-pagina: extra laag per stap (jouw rol, wat je krijgt) */
.rm-label { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--cyan); }
.rm-role {
  margin-top: 1.25rem; padding-left: 14px; border-left: 2px solid rgba(98,214,245,0.45);
  font-size: 15px; line-height: 1.6; color: rgba(243,246,245,0.85);
}
.rm-role .rm-label { margin-bottom: 2px; }