/* ============================================================
   SALES-AGENT — pagina-eigen CSS (prefix: sa-)
   Futuristische pagina over de Constell Event AI Sales Agent.
   Bouwt op het designsysteem (tokens/base/components); alleen wat
   uniek is aan deze pagina staat hier. Alle klassen zijn geprefixt.

   Deze pagina introduceert bewust één page-lokaal accent: een cyaan
   "hologram"-kleur (--sa-cyan) die de look & feel van de AI-horeca-
   foto naar de gebouwde UI-mockups vertaalt. Avondzon blijft het
   merkaccent (chips/CTA's); cyaan leeft UITSLUITEND binnen de
   gebouwde hologram-componenten op donkere vlakken.
   Dit bestand laadt alleen op deze pagina, dus :root is veilig.
   ============================================================ */

:root {
  --sa-cyan:        #5EEAD4;   /* holografisch hoofdaccent (op donker) */
  --sa-cyan-bright: #7DF9E9;
  --sa-cyan-deep:   #0E6E63;
  --sa-holo-line:   rgba(94, 234, 212, 0.42);
  --sa-holo-fill:   rgba(94, 234, 212, 0.08);
  --sa-holo-glow:   rgba(94, 234, 212, 0.28);
  --sa-ink-2:       #0E0E14;   /* iets dieper dan --c-ink voor hologram-panelen */
  --sa-grid:        rgba(255, 255, 255, 0.045);
}

/* Subtiel raster-textuur op donkere sa-secties (futuristisch, rustig) */
.sa-grid-bg { position: relative; isolation: isolate; }
.sa-grid-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--sa-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sa-grid) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%);
}
.sa-grid-bg > * { position: relative; z-index: 1; }

/* =========================================================
   1. HERO — full-bleed video-achtergrond met tekst erover
   ========================================================= */
.sa-hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-on-dark);
  isolation: isolate;
}
.sa-hero-media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
.sa-hero-media video,
.sa-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* Scrim: donker links (voor de tekst) + onder (voor de ticker) + lichte
   algehele verdonkering zodat witte tekst overal ≥4.5:1 haalt. */
.sa-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,9,14,0.92) 0%, rgba(9,9,14,0.72) 34%, rgba(9,9,14,0.30) 62%, rgba(9,9,14,0.55) 100%),
    linear-gradient(0deg, rgba(9,9,14,0.90) 0%, rgba(9,9,14,0.10) 32%, rgba(9,9,14,0.0) 55%),
    radial-gradient(120% 80% at 20% 40%, rgba(9,9,14,0.35), transparent 70%);
}
/* dunne cyaan scanlijn-sfeer bovenop, heel subtiel */
.sa-hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 78% 48%, var(--sa-holo-glow), transparent 60%);
  opacity: 0.5; mix-blend-mode: screen;
}
.sa-hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(7rem, 16vh, 10rem);
}
.sa-hero-kop-wrap { max-width: 46rem; }
.sa-hero .eyebrow { color: var(--sa-cyan-bright); }
.sa-hero-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sa-cyan-bright);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--sa-holo-line);
  border-radius: var(--r-pill);
  background: var(--sa-holo-fill);
  backdrop-filter: blur(6px);
  margin-bottom: var(--sp-5);
}
.sa-hero-badge .sa-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sa-cyan-bright);
  box-shadow: 0 0 8px 1px var(--sa-cyan);
  animation: sa-pulse 2.4s ease-in-out infinite;
}
@keyframes sa-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.sa-hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  color: #fff;
  text-wrap: balance;
  margin-bottom: var(--sp-5);
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.sa-hero h1 .sa-hl { color: var(--sa-cyan-bright); }
.sa-hero-lead {
  font-size: var(--fs-lead);
  color: var(--c-on-dark);
  max-width: 34rem;
  margin-bottom: var(--sp-7);
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.sa-hero-acties { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Capaciteiten-ticker onderaan de hero: laat in één regel zien wat de
   agent doet, doorlopend. Puur CSS-marquee, stil bij reduced-motion. */
.sa-ticker {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(0deg, rgba(9,9,14,0.86), rgba(9,9,14,0.30));
  backdrop-filter: blur(4px);
  overflow: hidden;
  padding-block: 0.85rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sa-ticker-spoor {
  display: inline-flex; gap: 2.4rem; align-items: center;
  white-space: nowrap;
  animation: sa-ticker 34s linear infinite;
  will-change: transform;
}
@keyframes sa-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sa-ticker-item {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--c-on-dark);
}
.sa-ticker-item svg { width: 16px; height: 16px; color: var(--sa-cyan-bright); flex: 0 0 auto; }
.sa-ticker-item::after {
  content: "•"; margin-left: 2.4rem; color: rgba(255,255,255,0.25);
}
.sa-scroll-hint {
  position: absolute; left: 50%; bottom: 4.6rem; z-index: 2;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.sa-scroll-hint svg { width: 20px; height: 20px; animation: sa-bob 1.8s ease-in-out infinite; }
@keyframes sa-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 700px) {
  .sa-hero { min-height: 88vh; }
  .sa-hero-media video, .sa-hero-media img { object-position: center 40%; }
  .sa-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-ticker-spoor, .sa-hero-badge .sa-dot, .sa-scroll-hint svg { animation: none; }
}

/* =========================================================
   Herbruikbaar: hologram-paneel (gebouwde UI-mockups)
   ========================================================= */
.sa-holo {
  position: relative;
  border-radius: var(--r-media);
  background:
    linear-gradient(180deg, rgba(94,234,212,0.05), rgba(94,234,212,0.0)),
    var(--sa-ink-2);
  border: 1px solid var(--sa-holo-line);
  box-shadow:
    0 0 0 1px rgba(94,234,212,0.05),
    0 24px 60px -28px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.04);
  color: var(--c-on-dark);
  overflow: hidden;
}
.sa-holo::before { /* scanline / hoekraster */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--sa-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sa-grid) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 70%);
  opacity: 0.6;
}
.sa-holo-top {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sa-cyan-bright);
}
.sa-holo-top .sa-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sa-cyan); box-shadow: 0 0 6px var(--sa-cyan); }
.sa-holo-top .sa-holo-live { margin-left: auto; color: rgba(255,255,255,0.55); font-size: 0.66rem; letter-spacing: 0.1em; }
.sa-holo-body { padding: 1.1rem 1.2rem 1.3rem; position: relative; z-index: 1; }

/* Chip in hologram-stijl */
.sa-holo-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.22rem 0.6rem; border-radius: var(--r-pill);
  border: 1px solid var(--sa-holo-line); color: var(--sa-cyan-bright);
  background: var(--sa-holo-fill);
}
.sa-holo-chip--warm { color: var(--c-orange-tint); border-color: rgba(251,175,137,0.5); background: rgba(251,175,137,0.09); }
.sa-holo-chip--groen { color: var(--c-groen-licht); border-color: rgba(143,206,169,0.5); background: rgba(143,206,169,0.10); }

/* =========================================================
   2. TRADITIONEEL vs CONSTELL
   ========================================================= */
.sa-trad-claim {
  text-align: center; max-width: 40rem; margin: 0 auto var(--sp-8);
}
.sa-trad-claim .sa-strike { color: var(--c-ink-soft); }
.sa-vergelijk {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  align-items: stretch;
}
.sa-vk {
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-surface-soft);
  border: 1px solid rgba(23,23,29,0.06);
}
.sa-vk--con {
  background: var(--c-ink); color: var(--c-on-dark);
  border: 1px solid rgba(94,234,212,0.3);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,0.6);
}
.sa-vk h3 { font-size: var(--fs-kaartkop); margin-bottom: var(--sp-2); }
.sa-vk--con h3 { color: #fff; }
.sa-vk-sub { font-size: 0.9rem; color: var(--c-ink-soft); margin-bottom: var(--sp-5); }
.sa-vk--con .sa-vk-sub { color: var(--sa-cyan-bright); }
.sa-vk .list-cross li, .sa-vk .checklist li { font-size: var(--fs-body); }
.sa-vk--con .checklist li { color: var(--c-on-dark); }
@media (max-width: 760px) { .sa-vergelijk { grid-template-columns: 1fr; } }

/* =========================================================
   3. PROBLEMS — 4 kaarten
   ========================================================= */
.sa-prob-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5);
}
.sa-prob {
  position: relative;
  padding: var(--sp-6);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  display: flex; gap: var(--sp-4);
}
.sa-prob-num {
  flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--c-orange-deep);
  background: var(--c-orange-wash);
  border: 1px solid rgba(166,63,16,0.18);
}
.sa-prob h3 { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.sa-prob p { font-size: var(--fs-body); color: var(--c-ink-soft); }
@media (max-width: 720px) { .sa-prob-grid { grid-template-columns: 1fr; } }

/* =========================================================
   4. ROUTE — zelftekenende journey (Aanvraag → Boeking)
   ========================================================= */
.sa-route { position: relative; }
.sa-route-baan { width: 100%; height: auto; display: block; overflow: visible; }
.sa-route .sa-baan-track { stroke: rgba(255,255,255,0.14); stroke-width: 2; fill: none; stroke-dasharray: 5 7; }
.sa-route .sa-baan-tekent {
  stroke: var(--sa-cyan); stroke-width: 2.5; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 5px var(--sa-holo-glow));
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.reveal-armed .sa-route.in .sa-baan-tekent { transition: stroke-dashoffset 2.2s var(--ease); stroke-dashoffset: 0; }
.sa-route:not(.in) .sa-baan-tekent, html.no-js .sa-route .sa-baan-tekent { stroke-dashoffset: 0; }
.sa-halte-dot { fill: var(--sa-ink-2); stroke: var(--sa-cyan); stroke-width: 2.5; }
.sa-halte-num { fill: var(--sa-cyan-bright); font-family: var(--font-grotesk, "Space Grotesk"), sans-serif; font-size: 15px; font-weight: 600; text-anchor: middle; }
.sa-route-kaarten {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.sa-rk {
  text-align: left;
  padding: var(--sp-5);
  border-radius: var(--r-tile);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--c-on-dark);
}
.sa-rk .sa-rk-step { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sa-cyan-bright); }
.sa-rk h3 { font-size: var(--fs-h4); margin: 0.3rem 0 0.5rem; color: #fff; }
.sa-rk p { font-size: 0.9rem; color: rgba(244,244,245,0.72); }
/* Mobiel: verticale lijst i.p.v. liggende route */
.sa-route-mobiel { display: none; }
@media (max-width: 860px) {
  .sa-route-baan, .sa-route-kaarten { display: none; }
  .sa-route-mobiel { display: block; }
  .sa-route-mobiel .sa-rk { margin-bottom: var(--sp-4); position: relative; padding-left: 3.4rem; }
  .sa-route-mobiel .sa-rk::before {
    content: attr(data-n); position: absolute; left: var(--sp-5); top: var(--sp-5);
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: grid; place-items: center; font-weight: 600;
    color: var(--sa-cyan-bright); border: 2px solid var(--sa-cyan); background: var(--sa-ink-2);
  }
}

/* =========================================================
   6. MEET — 6 capaciteiten-tegels (hologram)
   ========================================================= */
.sa-meet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.sa-cap {
  padding: var(--sp-5);
  border-radius: var(--r-tile);
  background: var(--c-surface);
  box-shadow: var(--shadow-tile);
  display: flex; flex-direction: column; gap: 0.6rem;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.sa-cap:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.sa-cap-ic {
  width: 2.7rem; height: 2.7rem; border-radius: var(--r-btn);
  display: grid; place-items: center;
  background: var(--c-ink); color: var(--sa-cyan-bright);
  border: 1px solid rgba(94,234,212,0.28);
}
.sa-cap-ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.sa-cap h3 { font-size: var(--fs-h4); }
.sa-cap p { font-size: 0.9rem; color: var(--c-ink-soft); }
@media (max-width: 900px) { .sa-meet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sa-meet-grid { grid-template-columns: 1fr; } }

/* =========================================================
   7. PRECISIE — split: tekst + guest-profiel-console
   ========================================================= */
.sa-split {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.sa-split--flip .sa-split-tekst { order: 2; }
.sa-split-tekst .lead { margin-bottom: var(--sp-5); }
.sa-bullets { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: 0.85rem; }
.sa-bullets li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-body); }
.sa-bullets li svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--c-orange); margin-top: 2px; }
@media (max-width: 820px) {
  .sa-split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .sa-split--flip .sa-split-tekst { order: 0; }
}

/* Guest-profiel-console (gebouwd) */
.sa-console { max-width: 30rem; margin-inline: auto; width: 100%; }
.sa-console-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.sa-console-avatar {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
  color: var(--sa-ink-2); background: linear-gradient(135deg, var(--sa-cyan-bright), var(--sa-cyan-deep));
  flex: 0 0 auto;
}
.sa-console-head b { display: block; color: #fff; font-size: 1rem; }
.sa-console-head span { font-size: 0.8rem; color: rgba(244,244,245,0.6); }
.sa-console-score { margin-left: auto; text-align: right; }
.sa-console-score .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--sa-cyan-bright); }
.sa-console-score .l { display: block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,244,245,0.55); }
.sa-console-rows { display: grid; gap: 0.55rem; }
.sa-console-row {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.8rem; padding: 0.55rem 0.7rem;
  border-radius: var(--r-btn);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(244,244,245,0.82);
}
.sa-console-row svg { width: 15px; height: 15px; color: var(--sa-cyan); flex: 0 0 auto; }
.sa-console-row b { color: #fff; font-weight: 500; }
.sa-console-foot {
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: rgba(244,244,245,0.7);
}
.sa-console-foot .sa-typ { display: inline-flex; gap: 3px; margin-left: auto; }
.sa-console-foot .sa-typ i { width: 5px; height: 5px; border-radius: 50%; background: var(--sa-cyan); animation: sa-typ 1.3s infinite; }
.sa-console-foot .sa-typ i:nth-child(2){ animation-delay: .2s; } .sa-console-foot .sa-typ i:nth-child(3){ animation-delay: .4s; }
@keyframes sa-typ { 0%,60%,100%{ opacity: .25; transform: translateY(0);} 30%{ opacity: 1; transform: translateY(-2px);} }
@media (prefers-reduced-motion: reduce){ .sa-console-foot .sa-typ i { animation: none; } }

/* =========================================================
   8. UITGELICHT — afwisselende rijen tekst + gebouwde visual
   ========================================================= */
.sa-uit-rij { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.sa-uit-rij + .sa-uit-rij { margin-top: clamp(3.5rem, 8vw, 6rem); }
.sa-uit-rij--flip .sa-uit-tekst { order: 2; }
.sa-uit-tekst h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
.sa-uit-tekst .sa-uit-eyebrow { color: var(--c-orange-deep); font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: var(--sp-2); }
.sa-uit-tekst p { font-size: var(--fs-body); color: var(--c-ink-soft); max-width: 40ch; }
.sa-uit-visual { width: 100%; }
@media (max-width: 820px) {
  .sa-uit-rij { grid-template-columns: 1fr; gap: var(--sp-6); }
  .sa-uit-rij--flip .sa-uit-tekst { order: 0; }
}

/* Gebouwde mini-UI's binnen uitgelicht */
.sa-mail-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.8rem; color: rgba(244,244,245,0.85); border-bottom: 1px dashed rgba(255,255,255,0.08); }
.sa-mail-line:last-child { border-bottom: 0; }
.sa-mail-line .sa-av { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(94,234,212,0.16); color: var(--sa-cyan-bright); display: grid; place-items: center; font-size: 0.6rem; font-weight: 600; flex: 0 0 auto; }
.sa-mail-body { padding: 0.9rem 1rem; }
.sa-mail-body p { font-size: 0.82rem; line-height: 1.5; color: rgba(244,244,245,0.78); margin: 0.3rem 0; }
.sa-mail-body .sa-cursor { display: inline-block; width: 2px; height: 1em; background: var(--sa-cyan); vertical-align: text-bottom; animation: sa-blink 1s steps(1) infinite; }
@keyframes sa-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .sa-mail-body .sa-cursor { animation: none; } }

.sa-alert { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem; border-radius: var(--r-btn); background: rgba(94,234,212,0.06); border: 1px solid rgba(94,234,212,0.2); }
.sa-alert + .sa-alert { margin-top: 0.6rem; }
.sa-alert-ic { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(94,234,212,0.15); color: var(--sa-cyan-bright); display: grid; place-items: center; flex: 0 0 auto; }
.sa-alert-ic svg { width: 16px; height: 16px; }
.sa-alert b { display: block; color: #fff; font-size: 0.85rem; margin-bottom: 0.1rem; }
.sa-alert span { font-size: 0.78rem; color: rgba(244,244,245,0.7); }

/* Leer-grafiek (SVG) */
.sa-leer-graph { width: 100%; height: auto; display: block; }
.sa-leer-graph .sa-leer-line { fill: none; stroke: var(--sa-cyan); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--sa-holo-glow)); }
.sa-leer-graph .sa-leer-area { fill: url(#saLeerGrad); }
.sa-leer-graph .sa-leer-dot { fill: var(--sa-cyan-bright); }
.sa-leer-graph .sa-leer-grid { stroke: rgba(255,255,255,0.08); stroke-width: 1; }

/* Herhaalklant-kaart */
.sa-repeat { display: flex; flex-direction: column; gap: 0.6rem; }
.sa-repeat-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.75rem; border-radius: var(--r-btn); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); }
.sa-repeat-row .sa-av { width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg,var(--sa-cyan-deep),var(--sa-cyan)); color: var(--sa-ink-2); display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; flex: 0 0 auto; }
.sa-repeat-row b { font-size: 0.85rem; color: #fff; font-weight: 500; }
.sa-repeat-row span { font-size: 0.72rem; color: rgba(244,244,245,0.6); }
.sa-repeat-row .sa-repeat-badge { margin-left: auto; }

/* =========================================================
   9. FEATURES — 6-grid (golf)
   ========================================================= */
.sa-fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.sa-fcard {
  padding: var(--sp-5); border-radius: var(--r-card);
  background: var(--c-surface); box-shadow: var(--shadow-card);
}
.sa-fcard-ic { width: 2.4rem; height: 2.4rem; border-radius: var(--r-btn); display: grid; place-items: center; background: var(--c-orange-wash); color: var(--c-orange-deep); margin-bottom: var(--sp-3); }
.sa-fcard-ic svg { width: 20px; height: 20px; stroke-width: 1.6; }
.sa-fcard h3 { font-size: var(--fs-h4); margin-bottom: 0.35rem; }
.sa-fcard p { font-size: 0.9rem; color: var(--c-ink-soft); }
@media (max-width: 900px) { .sa-fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sa-fgrid { grid-template-columns: 1fr; } }

/* =========================================================
   10. HUMAN IN THE LOOP + binnenkort + dag-in-het-leven
   ========================================================= */
.sa-human-tekst p { font-size: var(--fs-body); color: var(--c-ink-soft); margin-bottom: var(--sp-4); max-width: 60ch; }
.sa-human-tekst p strong { color: var(--c-ink); font-weight: 500; }
.sa-human-slot { color: var(--c-orange-deep); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; margin-top: var(--sp-3); }

.sa-soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-8); }
.sa-soon {
  padding: var(--sp-6); border-radius: var(--r-card);
  background: var(--c-ink); color: var(--c-on-dark);
  border: 1px solid rgba(94,234,212,0.22);
  position: relative; overflow: hidden;
}
.sa-soon h3 { font-size: var(--fs-kaartkop); color: #fff; margin: var(--sp-2) 0; }
.sa-soon p { font-size: 0.9rem; color: rgba(244,244,245,0.72); margin-bottom: var(--sp-4); }
.sa-soon-cta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sa-cyan-bright); font-weight: 500; font-size: 0.9rem; }
.sa-soon--dag { background: var(--c-surface); color: var(--c-ink); border-color: rgba(23,23,29,0.08); box-shadow: var(--shadow-card); }
.sa-soon--dag h3 { color: var(--c-ink); }
.sa-soon--dag p { color: var(--c-ink-soft); }
.sa-soon--dag .sa-soon-cta { color: var(--c-orange-deep); }
@media (max-width: 700px) { .sa-soon-grid { grid-template-columns: 1fr; } }

/* =========================================================
   11. TESTIMONIALS — 2 quote-kaarten (initialen, geen foto)
   ========================================================= */
.sa-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.sa-quote {
  padding: var(--sp-7);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.sa-quote-mark { font-family: var(--font-display); font-size: 3rem; line-height: 0.6; color: var(--c-orange); height: 1.4rem; }
.sa-quote blockquote { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; margin: var(--sp-4) 0 var(--sp-6); color: var(--c-ink); }
.sa-quote-persoon { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.sa-quote-av { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; background: var(--c-ink); flex: 0 0 auto; }
.sa-quote-persoon b { display: block; font-size: 0.95rem; }
.sa-quote-persoon span { font-size: 0.82rem; color: var(--c-ink-soft); }
@media (max-width: 760px) { .sa-quotes { grid-template-columns: 1fr; } }

/* =========================================================
   12. FAQ — accordeon (één open tegelijk)
   ========================================================= */
.sa-faq { max-width: 52rem; margin-inline: auto; }
.sa-faq-item { border-bottom: 1px solid rgba(23,23,29,0.12); }
.sa-faq-knop {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  padding: var(--sp-5) 0;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--c-ink);
}
.sa-faq-knop:hover { color: var(--c-orange-deep); }
.sa-faq-ic { margin-left: auto; flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.sa-faq-ic::before, .sa-faq-ic::after { content: ""; position: absolute; background: var(--c-ink); border-radius: 2px; transition: transform var(--t-fast) var(--ease); }
.sa-faq-ic::before { left: 0; top: 8px; width: 18px; height: 2px; }
.sa-faq-ic::after { left: 8px; top: 0; width: 2px; height: 18px; }
.sa-faq-knop[aria-expanded="true"] .sa-faq-ic::after { transform: scaleY(0); }
.sa-faq-knop[aria-expanded="true"] { color: var(--c-orange-deep); }
.sa-faq-antwoord { padding: 0 0 var(--sp-5); }
.sa-faq-antwoord p { font-size: var(--fs-body); color: var(--c-ink-soft); max-width: 62ch; }
.sa-faq-antwoord[hidden] { display: none; }

/* =========================================================
   Kruimelpad (donkere balk boven de hero)
   ========================================================= */
.sa-kruimel { background: var(--c-ink); }
.sa-kruimel-inner {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  padding-block: 0.5rem;
}
.sa-kruimel a, .sa-kruimel [aria-current] {
  font-size: 0.9rem; min-height: 44px; /* volwaardig raakvlak op touch */
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.sa-kruimel a { color: rgba(244,244,245,0.62); transition: color var(--t-fast) var(--ease); }
.sa-kruimel a:first-child { color: var(--c-on-dark); }
.sa-kruimel a:hover { color: var(--sa-cyan-bright); }
.sa-kruimel [aria-current] { color: rgba(244,244,245,0.62); }
.sa-kruimel-sep { color: rgba(244,244,245,0.35); }

/* =========================================================
   Interactiestaten — custom links (hover/focus-affordance)
   ========================================================= */
.sa-soon-cta { transition: gap var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.sa-soon-cta:hover { gap: 0.75rem; }
.sa-soon:not(.sa-soon--dag) .sa-soon-cta:hover { color: var(--sa-cyan); }
.sa-soon--dag .sa-soon-cta:hover { color: var(--c-orange); }
.sa-scroll-hint { transition: color var(--t-fast) var(--ease); }
.sa-scroll-hint:hover { color: var(--c-on-dark); }

/* =========================================================
   Sectiekop-helper op donkere banden (cyaan eyebrow)
   ========================================================= */
.section--dark .sa-eyebrow-cyan, .sa-eyebrow-cyan { color: var(--sa-cyan-bright); }
.sa-center { text-align: center; }
.sa-center .lead { margin-inline: auto; }

/* ============ 2b. SCROLL-FILM - de agent aan het werk ============ */
/* De cookiebanner (Usercentrics) zet body.overflowHidden zolang hij openstaat. Daarmee
   wordt body de scrollport voor position:sticky en plakt de film-viewport niet meer: de
   hele film schiet dan in één schermhoogte voorbij. Scrollen doet de bezoeker toch via
   html (die staat op overflow:clip visible), dus die lock kost alleen de film. Het
   scrollslot van ons eigen mobiele menu zet een inline style en wint hier gewoon van.
   !important omdat de banner zijn eigen .overflowHidden-regel ook op !important zet. */
body.overflowHidden{overflow:clip visible !important;}
.sa-film{position:relative;background:var(--c-ink);}
.sa-film-start{height:52vh;}
.sa-film-tussen{height:40vh;}
.sa-film-kop{
  position:sticky;top:128px;z-index:9;   /* ruim onder #navFixed (79px, z10) */
  padding:18px 24px 40px;
  text-align:center;pointer-events:none;
  background:linear-gradient(to bottom, rgba(23,23,29,.82) 0%, rgba(23,23,29,.55) 55%, rgba(23,23,29,0) 100%);
  transition:opacity .45s ease;
}
.sa-film-kop::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:128px;
  background:rgba(23,23,29,.82);   /* dekt de strook tussen schermrand en kop, sluit aan op het verloop */
}
.sa-film-kop.is-weg{opacity:0;}
.sa-film-titel{
  margin:0;font:600 clamp(24px,3.4vw,42px)/1.15 var(--font-display);
  color:var(--c-on-dark);text-shadow:0 1px 18px rgba(23,23,29,.8);text-wrap:balance;
}
#saFilmWereld.sw-root{
  --sw-bg:#EDE6DA;                    /* warme toon van de balzaal-footage */
  --sw-ink:var(--c-ink);
  --sw-ink-soft:var(--c-ink-soft);
  --sw-accent:#3FD0C0;                /* teal van de hologrammen in de film */
  --sw-font-display:var(--font-display);
  --sw-font-body:var(--font-body);
}
/* Autopilot-badge: geen link, wel leesbaar op inkt */
#saFilmWereld .sw-btn--primary{
  color:var(--c-on-dark);letter-spacing:.14em;text-transform:uppercase;cursor:default;
}