:root {
  --c-primary: #0E6E8C;
  --c-primary-soft: #DCEEF3;
  --c-on-dark: #4FB3D6;
  --c-dark: #071E2B;
  --c-dark-2: #0C2A3B;
  --c-bg: #F7FAFC;
  --c-accent: #35C2B5;
  --c-ink: #0F2430;
  --c-muted: rgba(15, 36, 48, .64);
  --c-line: rgba(15, 36, 48, .12);
  --c-white: #FFFFFF;
  --c-whatsapp: #25D366;
  --c-whatsapp-dark: #075E54;
  --c-error: #C0392B;
  --shadow-card: 0 1px 2px rgba(15, 36, 48, .05), 0 16px 40px -20px rgba(15, 36, 48, .25);
  --radius: 16px;
  --wrap: 1180px;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-dark);
  color: var(--c-white);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); line-height: 1.15; font-family: var(--font-display); }
h3 { font-size: 1.2rem; font-family: var(--font-display); }
p { margin: 0; }

a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.page > .wrap { width: 100%; }

.display-huge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 6.4rem);
  line-height: .96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.text-gradient {
  background: linear-gradient(100deg, var(--c-accent), var(--c-on-dark) 60%, var(--c-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-on-dark { color: var(--c-white); }

.kicker {
  display: inline-block;
  margin: 0 0 16px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.kicker-on-dark { color: var(--c-on-dark); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(100deg, var(--c-accent), var(--c-primary));
  color: var(--c-white);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(53, 194, 181, .5); }
.btn-cta-solid {
  background: var(--c-white);
  color: var(--c-dark);
}
.btn-cta-solid:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35); }
.btn-ghost-dark {
  background: rgba(255, 255, 255, .04);
  color: var(--c-white);
  border-color: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
}
.btn-ghost-dark:hover { border-color: var(--c-on-dark); background: rgba(255, 255, 255, .08); }
.btn-ghost {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-lg { padding: 14px 26px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 30, 43, .55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.brand-logo { height: 30px; width: auto; display: block; }
.nav-links {
  display: flex;
  gap: 28px;
  font-weight: 600;
  font-size: .95rem;
  color: rgba(255, 255, 255, .82);
}
.nav-links a:hover { color: var(--c-on-dark); }
.nav .btn-sm { color: var(--c-white); }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--c-white);
  border-radius: 2px;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--c-white);
}
.mobile-nav a { padding: 10px 0; font-weight: 600; }
.mobile-nav .btn { margin-top: 8px; width: 100%; }
.nav.open .mobile-nav { display: flex; }

/* Hero */
.hero {
  padding: 140px 0 100px;
  background: radial-gradient(120% 90% at 50% -10%, var(--c-dark-2), var(--c-dark) 60%);
  color: var(--c-white);
}
/* Full, unaltered source clip, shown full-bleed and looping -- the clip has
   its own baked-in headline text, so the real DOM headline/lead/trust-bar
   are visually hidden (.hero-sr) rather than removed, to avoid showing the
   same message twice while keeping it in the accessibility tree/SEO. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(7, 30, 43, .9), transparent 70%),
    linear-gradient(180deg, rgba(7, 30, 43, .25), transparent 30%);
}
.hero-inner {
  position: relative;
  z-index: 4;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.hero-lead {
  display: block;
  margin: 26px auto 34px;
  font-size: 1.15rem;
  color: rgba(247, 250, 252, .78);
  max-width: 46ch;
}
.hero-cta {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px;
  border-radius: 999px;
  background: rgba(4, 18, 26, .72);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .6);
}
.trust-bar {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 40px 0 0;
  padding: 0;
  justify-content: center;
  font-size: .82rem;
  font-weight: 600;
}
.trust-bar-dark { color: rgba(247, 250, 252, .68); }
.trust-bar li { position: relative; padding-left: 18px; }
.trust-bar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 10px 2px rgba(53, 194, 181, .7);
}
.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  width: 24px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}
.scroll-hint span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-on-dark);
  margin: 6px auto 0;
  animation: scrollhint 1.8s ease infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}

/* Floating gradient planets */
.floating-orb {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  filter: blur(1px);
  animation: floaty 7s ease-in-out infinite;
}
.fo-5 { width: 14px; height: 14px; top: 76%; right: 10%; background: radial-gradient(circle at 32% 30%, #fff, var(--c-on-dark) 45%, var(--c-accent) 100%); animation-duration: 7s; opacity: .7; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

/* Statement (geometric dark impact section) */
.statement {
  background: linear-gradient(180deg, var(--c-dark) 0%, var(--c-dark-2) 100%);
  color: var(--c-white);
  text-align: center;
}
.statement-grid {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(30deg, rgba(79, 179, 214, .16) 1px, transparent 1px),
    linear-gradient(150deg, rgba(79, 179, 214, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 179, 214, .1) 1px, transparent 1px);
  background-size: 58px 100px;
  mask-image: radial-gradient(60% 60% at 50% 40%, #000 30%, transparent 75%);
}
.statement-glow {
  position: absolute;
  inset: -20% 20% auto 20%;
  height: 480px;
  background: radial-gradient(50% 50% at 50% 0%, rgba(53, 194, 181, .25), transparent 70%);
  filter: blur(20px);
}
.statement-text { position: relative; z-index: 1; }
.statement-sub {
  position: relative;
  z-index: 1;
  display: block;
  margin: 28px auto 0;
  max-width: 44ch;
  color: rgba(247, 250, 252, .68);
  font-size: 1.1rem;
}

/* Proof — vivid full-bleed page */
.proof {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-dark-2) 55%, var(--c-dark) 100%);
  color: var(--c-white);
  /* .page's default flex is row -- fine for one .wrap, but this section now
     holds a 400vh phone-demo plus a second panel and needs them in a column. */
  flex-direction: column;
  padding: 100px 0;
  /* Tall section -- scroll-snap fights this exactly like it did for the
     sticky-scroll .how sections earlier; same opt-out. */
  scroll-snap-align: none;
  overflow: visible;
}
.proof-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.proof-copy h2 { margin: 12px 0 18px; }
.proof-lead { display: block; margin-top: 16px; color: rgba(247, 250, 252, .78); font-size: 1.02rem; }
.proof-inner + .proof-inner { margin-top: 96px; }
.proof-inner-reverse .proof-visual { order: 2; }
.proof-inner-reverse .proof-copy { order: 1; }

/* Highlights -- a light strip of honest capability callouts between the
   statement and proof sections, echoing the big-number/short-caption style
   of the storytelling reference without inventing unverified statistics. */
.highlights { background: var(--c-white); min-height: auto; padding: 96px 0; }
.highlights-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.highlight-card { text-align: center; padding: 0 12px; }
.highlight-card:nth-child(2) { transition-delay: .1s; }
.highlight-card:nth-child(3) { transition-delay: .2s; }
.highlight-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: -0.01em;
  color: var(--c-primary);
  margin-bottom: 12px;
}
.highlight-card p { color: var(--c-muted); font-size: 1rem; max-width: 32ch; margin: 0 auto; }

/* Trust visual -- simple abstract icon pair (assistant <-> person), used in
   place of photography we don't have, kept consistent with the site's
   existing stroke-icon language rather than faking realism. */
.trust-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 72px 40px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .14);
}
.trust-visual-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: var(--c-accent);
  flex-shrink: 0;
}
.trust-visual-icon svg { width: 36px; height: 36px; }
.trust-visual-line {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-accent) 0 6px, transparent 6px 12px);
  opacity: .6;
}

/* Section head */
.section-head { max-width: 640px; margin-bottom: 56px; position: relative; z-index: 1; }

/* Features — editorial list, no card boxes */
.features {
  background: var(--c-bg);
  padding: 60px 0;
  /* Tall section (image + 6-item list routinely exceeds 100vh) -- same
     scroll-snap opt-out as .proof/.how/.how-diagram, otherwise scroll-snap
     fights the overflow and the reader has to scroll several times before
     the next section becomes reachable. */
  flex-direction: column;
  align-items: stretch;
  scroll-snap-align: none;
  overflow: visible;
}
.features-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.features-visual img {
  width: 100%;
  /* Without this, the img's `height="716"` HTML attribute (set for CLS
     prevention) was winning over `width: 100%` and rendering at its raw
     716px pixel height instead of scaling with width -- badly stretched
     the image and made the section far taller than the text list beside
     it. `height: auto` lets the browser derive height from the image's
     own intrinsic aspect ratio instead. */
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(14, 110, 140, .35);
}
.features-grid .editorial-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 0;
}
.editorial-item {
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 18px;
  align-items: start;
}
.editorial-item:last-child { border-bottom: 1px solid var(--c-line); }
.editorial-icon {
  grid-row: 1 / 3;
  color: var(--c-primary);
  display: flex;
}
.editorial-icon svg { width: 26px; height: 26px; }
.editorial-item h3 { margin-bottom: 8px; }
.editorial-item p { color: var(--c-muted); font-size: .95rem; grid-column: 2; }

/* Branches ("Voor wie") — reuses the .how-diagram sticky-scroll mechanism
   (same [data-diagram] JS hook, see script.js) so branches slide through
   full-screen, one at a time, as the reader scrolls -- dark variant, since
   .diagram-* is otherwise hardcoded to the light .how-diagram theme. Same
   flex/scroll-snap opt-out as .how-diagram, needed for the same reason
   (a tall sticky-scroll container fighting .page's one-screen assumptions). */
.branch-diagram {
  background: linear-gradient(160deg, var(--c-dark) 0%, #10334a 100%);
  color: var(--c-white);
  flex-direction: column;
  align-items: stretch;
  padding: 60px 0 0;
  scroll-snap-align: none;
  overflow: visible;
}
/* Opaque, not transparent: each slide must fully hide the one behind it
   once it has slid into place -- same requirement .how-diagram's white
   .diagram-slide meets for the light variant. Transparent here caused the
   incoming and outgoing slide's text to render on top of each other. */
.branch-diagram .diagram-slide { background: var(--c-dark-2); }
.branch-diagram .diagram-num { color: var(--c-accent); opacity: .35; }
.branch-diagram .diagram-copy h3 { color: var(--c-white); }
.branch-diagram .diagram-copy p { color: rgba(247, 250, 252, .72); }
.branch-diagram .diagram-dot { background: rgba(255, 255, 255, .22); }
.branch-diagram .diagram-dot.is-active { background: var(--c-accent); }

.branch-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 56px 48px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  min-width: 280px;
}
.branch-visual-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-accent), var(--c-primary));
  box-shadow: 0 0 48px rgba(53, 194, 181, .35);
  color: var(--c-white);
}
.branch-visual-icon svg { width: 44px; height: 44px; }
.branch-visual-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--c-white);
  text-align: center;
}

/* hoe-het-werkt.html's own intro block -- same dark gradient as .how so the
   page reads as one continuous piece, not three mismatched sections. */
.how-intro {
  background: linear-gradient(160deg, var(--c-dark) 0%, #10334a 100%);
  color: var(--c-white);
}
.how-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
  color: rgba(247, 250, 252, .55);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
}
.how-back:hover { color: var(--c-white); }

/* How it works (dark section) */
.how {
  background: linear-gradient(160deg, var(--c-dark) 0%, #10334a 100%);
  color: var(--c-white);
  padding: 60px 0;
  /* This section is now much taller than one viewport (sticky-scroll steps)
     -- .page's default scroll-snap-align/overflow assume a one-screen
     section and actively fight a tall one (scroll-snap kept yanking the
     page back to the section start while scrolling through the steps).
     Opt this section out of both. */
  scroll-snap-align: none;
  overflow: visible;
}
.how-grid {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(79, 179, 214, .1) 0 1px, transparent 1px 90px);
}
/* Sticky-scroll "storytelling" mechanic -- a pinned visual on the left whose
   .how-slide items reveal cumulatively (each stays visible once shown, the
   next one stacks below it) as the reader scrolls past text steps on the
   right (see script.js's howScroll observer). Currently only used by
   #tijdens-een-gesprek (its own page, hoe-het-werkt.html). */
.how-scroll {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  margin-top: 64px;
  /* align-items: start is required -- .how-visual must NOT stretch to the
     row height. A sticky element that's stretched to equal its own grid
     cell's height has zero slack to move within (its box IS the full
     travel range), so it unsticks almost immediately after the initial
     pin. Keeping .how-visual at its natural (short) height gives it
     (row height - its own height) of room to stay pinned while the tall
     .how-steps-scroll column scrolls past beside it -- the standard
     "sticky sidebar in CSS grid" pattern. Confirmed live: the earlier
     stretched version looked fine in quick spot-checks but broke down on
     a real scroll -- the image vanished mid-way through the last step. */
  align-items: start;
}
.how-visual {
  position: sticky;
  top: 96px;
  /* .how-step is also position:relative (for its progress rail) and comes
     later in the DOM -- without an explicit z-index it would paint above
     this sticky image wherever they visually overlap (notably in the
     single-column mobile layout, where both share the same width). */
  z-index: 2;
}
.how-visual-frame {
  position: relative;
  height: 440px;
  padding: 32px;
  /* Slides used to be absolutely-stacked crossfading panels (one visible at
     a time); now every revealed slide stays in-flow and visible at once, so
     this is a top-aligned column instead -- the "roadmap" builds downward as
     steps become active. Sized so all 4 (fairly compact) mock visuals plus
     gaps fit inside the existing 440px without the frame itself growing. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(79, 179, 214, .16), rgba(53, 194, 181, .05) 65%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
}
.how-visual-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 0%, rgba(53, 194, 181, .2), transparent 60%);
  pointer-events: none;
}
.how-slide {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(.92);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  will-change: opacity, transform;
}
.how-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.how-steps-scroll { list-style: none; margin: 0; padding: 0; }
.how-step {
  position: relative;
  /* Must stay taller than .how-visual-frame's fixed height (440px) + its
     sticky top offset (96px), or the sticky image runs out of room and
     scrolls away before this step finishes its active window -- a real bug
     found live: on shorter browser windows 56vh alone was under that
     threshold, so the image vanished during the last step. The px floor
     guarantees enough room regardless of viewport height; vh keeps the
     pacing pleasant on taller screens. */
  min-height: max(56vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 28px;
  opacity: .4;
  transition: opacity .4s cubic-bezier(.16,1,.3,1);
}
.how-step.is-active { opacity: 1; }
/* Progress rail: a full-height track behind each step, with a highlighted
   segment that grows in on the active step -- a clearer "active indicator"
   than a plain border-color swap. */
.how-step::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, .14);
}
.how-step::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px; height: 0;
  background: var(--c-on-dark);
  box-shadow: 0 0 12px rgba(79, 179, 214, .6);
  transition: height .5s cubic-bezier(.16,1,.3,1);
}
.how-step.is-active::after { height: 100%; }
.how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  font-weight: 800;
  font-size: .88rem;
  margin-bottom: 14px;
  transition: background .4s ease, color .4s ease, transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.how-step.is-active .how-num {
  background: linear-gradient(135deg, var(--c-accent), var(--c-on-dark));
  border-color: transparent;
  color: var(--c-dark);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(53, 194, 181, .14), 0 16px 32px -16px rgba(53, 194, 181, .7);
}
.how-step h3 { color: var(--c-white); margin-bottom: 8px; }
.how-step p { color: rgba(247, 250, 252, .72); font-size: .95rem; max-width: 46ch; }

/* Phone-demo scrollytelling -- a step-list on the left highlights as the
   reader scrolls, while a phone mockup on the right progressively reveals
   messages in sync. Ported precisely (including the phone's visual chrome
   -- status bar, header, bubble shapes, fake input bar) from a reference
   technique; drives off scroll progress within a tall container (not
   IntersectionObserver, since the reveal needs a continuous 0..1 progress
   value, not just in/out). */
/* 400vh meant ~75vh of real scroll distance per step (400vh total minus
   the 100vh that stays visible via sticky, divided over 4 steps) -- on a
   typical desktop viewport that's 500-700px per step, roughly 5-6 mouse
   wheel notches (~100-120px each) to advance one step. Shortened to a
   fixed extra distance (not vh-scaled) so it's ~2 notches per step
   regardless of viewport height. Desktop only, see the mobile override
   below -- touch scrolling doesn't have the same "notch" granularity, so
   the original pacing there wasn't reported as a problem. */
.phone-demo-scroll { position: relative; height: calc(100vh + 640px); }
.phone-demo-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.phone-demo-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.phone-steps-label {
  margin: 0 0 24px;
  color: rgba(247, 250, 252, .35);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.phone-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.phone-step {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: transparent;
  opacity: .25;
  transition: opacity .5s ease, background-color .5s ease, border-color .5s ease;
}
.phone-step.is-done { opacity: 1; }
.phone-step.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
.phone-step-row { display: flex; align-items: center; gap: 12px; }
.phone-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(247, 250, 252, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .68rem;
  flex: none;
  transition: background .4s ease, color .4s ease;
}
.phone-step.is-done .phone-step-num,
.phone-step.is-active .phone-step-num { background: var(--c-accent); color: var(--c-dark); }
.phone-step h4 {
  color: rgba(247, 250, 252, .45);
  font-size: .92rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--font-display);
  transition: color .3s ease;
}
.phone-step.is-active h4 { color: var(--c-white); }
.phone-step-desc {
  color: rgba(247, 250, 252, .5);
  font-size: .85rem;
  line-height: 1.5;
  margin: 8px 0 0 36px;
  display: none;
}
.phone-step.is-active .phone-step-desc { display: block; }

/* The phone itself -- a self-contained mockup silhouette (status bar,
   header, message thread, fake input), not a generic card. */
.phone-mock-wrap { display: flex; justify-content: center; }
.phone-mock {
  width: 268px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--c-dark-2);
  box-shadow: 0 0 80px rgba(53, 194, 181, .08), 0 32px 64px -12px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.phone-mock-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
  color: rgba(247, 250, 252, .3);
  font-size: .62rem;
  font-weight: 600;
}
.phone-mock-notch { width: 56px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.phone-mock-signal { display: flex; gap: 2px; }
.phone-mock-signal i { display: block; width: 10px; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, .25); }
.phone-mock-signal i:last-child { width: 4px; }
.phone-mock-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.phone-mock-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.phone-mock-avatar svg { width: 14px; height: 14px; }
.phone-mock-name { display: block; color: var(--c-white); font-size: .78rem; font-weight: 700; }
.phone-mock-live {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: var(--c-accent);
  font-size: .62rem;
  font-weight: 700;
}
.phone-mock-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 6px 1px rgba(53, 194, 181, .7);
}
.phone-mock-messages { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 290px; }
.phone-mock-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: .74rem;
  line-height: 1.45;
}
.phone-mock-bubble.bot {
  align-self: flex-start;
  background: var(--c-dark);
  color: rgba(247, 250, 252, .85);
  border-bottom-left-radius: 3px;
}
.phone-mock-bubble.caller {
  align-self: flex-end;
  background: var(--c-accent);
  color: var(--c-dark);
  font-weight: 600;
  border-bottom-right-radius: 3px;
}
.phone-mock-system {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(53, 194, 181, .12);
  border: 1px solid rgba(53, 194, 181, .3);
  color: var(--c-accent);
  font-size: .66rem;
  font-weight: 600;
}
.phone-mock-system svg { width: 12px; height: 12px; flex: none; }
.phone-mock-input {
  margin: 0 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--c-dark);
}
.phone-mock-input span:first-child { flex: 1; color: rgba(247, 250, 252, .22); font-size: .68rem; }
.phone-mock-send {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(53, 194, 181, .2);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.phone-mock-send svg { width: 12px; height: 12px; }

.phone-msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease-out, transform .4s ease-out;
}
.phone-msg.is-visible { opacity: 1; transform: none; }

/* WhatsApp-specific accents for this module -- a large, low-opacity
   watermark of the WhatsApp glyph behind the whole scroll area, plus a
   small copy of the same glyph as a label icon and the phone's header
   avatar, so the "this is WhatsApp, not a phone call" framing reads at a
   glance without relying on the copy alone. */
.whatsapp-mark {
  position: absolute;
  top: 50%;
  left: -80px;
  transform: translateY(-50%) rotate(-8deg);
  width: 480px;
  height: 480px;
  color: var(--c-whatsapp);
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
.phone-steps-label { display: flex; align-items: center; gap: 8px; }
.phone-steps-label-icon { width: 14px; height: 14px; color: var(--c-whatsapp); flex: none; }
.phone-mock-whatsapp .phone-mock-avatar { background: var(--c-whatsapp); color: var(--c-white); }
.phone-mock-whatsapp .phone-mock-avatar svg { width: 15px; height: 15px; }
.phone-mock-live-whatsapp { color: var(--c-whatsapp); }
.phone-mock-live-whatsapp .phone-mock-live-dot { background: var(--c-whatsapp); box-shadow: 0 0 6px 1px rgba(37, 211, 102, .7); }
.phone-mock-whatsapp .phone-mock-bubble.caller { background: var(--c-whatsapp-dark); color: var(--c-white); }
.phone-mock-whatsapp .phone-mock-system { background: rgba(37, 211, 102, .12); border-color: rgba(37, 211, 102, .32); color: var(--c-whatsapp); }
.phone-mock-send-whatsapp { background: rgba(37, 211, 102, .2); color: var(--c-whatsapp); }

/* Diagram scroll -- full-screen slides that slide in horizontally from the
   right as the reader scrolls through a tall sticky container, stacking on
   top of the previous slide. Ported from a reference technique; also driven
   by continuous scroll progress rather than IntersectionObserver. */
.how-diagram {
  /* .page's default flex is row with align-items:center -- with
     .diagram-head and .diagram-scroll as siblings, column-stacking alone
     isn't enough: align-items:center still shrink-wraps each child to its
     own content width on the cross axis, and .diagram-scroll's children
     are all absolutely positioned (no intrinsic width), so it collapsed
     to 0. Needs align-items:stretch too. Same bug/fix as .proof. */
  flex-direction: column;
  align-items: stretch;
  /* White, unlike every other full-bleed section here (branches/proof/how
     are all dark) -- deliberate, requested to break up the otherwise
     all-dark scroll rhythm. The onboard-* mock visuals below keep their
     dark "device chrome" styling unchanged; a dark UI screenshot on a
     white page is a normal, deliberate contrast pattern and their existing
     box-shadows read better against white than they did against dark. */
  background: var(--c-white);
  color: var(--c-ink);
  padding: 60px 0 0;
  scroll-snap-align: none;
  overflow: visible;
}
.how-diagram .how-grid { background-image: repeating-linear-gradient(115deg, rgba(14, 110, 140, .07) 0 1px, transparent 1px 90px); }
.diagram-head { position: relative; z-index: 1; padding-bottom: 40px; }
.diagram-lead { display: block; color: var(--c-muted); font-size: 1.02rem; }
/* Fixed extra distance rather than a pure vh multiple, same reasoning and
   target pace (~2 mouse-wheel notches per step) as .phone-demo-scroll's
   fix above -- vh scaling made that section need 4-5 notches per step on
   a typical desktop viewport, and this section has the same underlying
   math (now 4 steps, was 3). Mobile keeps the taller vh-based version. */
.diagram-scroll { position: relative; height: calc(100vh + 860px); }
.diagram-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.diagram-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: var(--c-white);
  transform: translateX(100%);
  will-change: transform;
}
.diagram-slide[data-index="0"] { transform: translateX(0); }
.diagram-slide-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: 100%; }
.diagram-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--c-primary);
  opacity: .16;
  margin-bottom: 8px;
}
.diagram-copy h3 { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--c-ink); margin-bottom: 16px; }
.diagram-copy p { color: var(--c-muted); font-size: 1.05rem; line-height: 1.55; max-width: 42ch; margin-bottom: 32px; }
.diagram-dots { display: flex; gap: 8px; }
.diagram-dot { width: 8px; height: 4px; border-radius: 999px; background: var(--c-line); transition: width .3s ease, background .3s ease; }
.diagram-dot.is-active { width: 32px; background: var(--c-accent); }
.diagram-visual { display: flex; justify-content: center; }

/* Onboarding mock visuals for the "In vier stappen live" diagram-scroll --
   ported faithfully (structure/behavior) from a reference build, restyled
   entirely in our own palette/type instead of the reference's per-step
   rainbow accents + serif numerals. */
.onboard-card {
  width: 320px;
  padding: 28px;
  border-radius: 20px;
  background: var(--c-dark-2);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 32px 64px rgba(0, 0, 0, .5);
}
.onboard-card-title { color: var(--c-white); font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.onboard-card-sub { color: rgba(247, 250, 252, .45); font-size: .8rem; line-height: 1.55; margin: 0 0 24px; }
.onboard-field-label { display: block; color: rgba(247, 250, 252, .45); font-size: .78rem; margin-bottom: 6px; }
.onboard-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(247, 250, 252, .8);
  font-size: .9rem;
  margin-bottom: 12px;
}
.onboard-input-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0; }
.onboard-voice-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 800;
  flex: none;
}
/* Step 1's mockup: a static browser-window + "received" illustration, not a
   real form -- deliberately no input/button elements, so it can't read as
   something a visitor could click or type into (there's no self-service
   scan feature to imply). */
.onboard-card-intake { padding: 20px; }
.onboard-browser { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); margin-bottom: 20px; }
.onboard-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.onboard-browser-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.onboard-browser-url { margin-left: 8px; flex: 1; font-size: .74rem; color: rgba(247, 250, 252, .55); background: rgba(255, 255, 255, .05); padding: 3px 10px; border-radius: 999px; }
.onboard-browser-body { padding: 16px 14px 18px; }
.onboard-browser-line { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); margin-bottom: 8px; }
.onboard-browser-line:last-child { margin-bottom: 0; }
.onboard-browser-line-title { width: 60%; height: 10px; background: rgba(255, 255, 255, .14); }
.onboard-browser-line-short { width: 40%; }
.onboard-received { display: flex; align-items: flex-start; gap: 12px; }
.onboard-received-icon { width: 30px; height: 30px; border-radius: 50%; flex: none; background: rgba(53, 194, 181, .16); color: var(--c-accent); display: flex; align-items: center; justify-content: center; }
.onboard-received-icon svg { width: 15px; height: 15px; }
.onboard-received .onboard-card-title { margin: 0 0 2px; font-size: .92rem; }
.onboard-received .onboard-card-sub { margin: 0; }

.onboard-toggle { display: flex; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .05); margin-bottom: 28px; }
.onboard-toggle-option {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: rgba(247, 250, 252, .45);
}
.onboard-toggle-option.is-active { background: var(--c-white); color: var(--c-dark); }

/* Slide 3 phone frame -- an actual call-screen mockup, not the site's
   simpler .mock-* abstractions, since the reference specifically shows the
   agent's own outbound-test-call UI here. */
.onboard-phone {
  width: 210px;
  border-radius: 40px;
  border: 4px solid rgba(255, 255, 255, .12);
  background: #1c1c1e;
  box-shadow: 0 32px 64px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.onboard-phone-notch { width: 80px; height: 24px; margin: 12px auto 4px; border-radius: 999px; background: #000; }
.onboard-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 32px;
  min-height: 320px;
  background: linear-gradient(160deg, #2c2c2e 0%, #1c1c1e 60%);
}
.onboard-phone-time { position: absolute; top: 16px; left: 16px; color: var(--c-white); font-size: .7rem; font-weight: 600; }
.onboard-phone-duration { color: rgba(255, 255, 255, .5); font-size: .78rem; margin: 4px 0 10px; }
.onboard-phone-avatar-ring {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(53, 194, 181, .14);
  border: 2px solid rgba(53, 194, 181, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
/* Outgoing-call radar rings -- two staggered expanding/fading circles behind
   the avatar, so the "Bellen..." screen reads as actively live, not static. */
.onboard-phone-avatar-ring::before,
.onboard-phone-avatar-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-accent);
  opacity: 0;
  animation: onboard-call-ring 1.8s ease-out infinite;
}
.onboard-phone-avatar-ring::after { animation-delay: .9s; }
.onboard-phone-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: onboard-heartbeat 1.4s ease-in-out infinite;
}
.onboard-phone-avatar svg { width: 26px; height: 26px; }
@keyframes onboard-call-ring {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes onboard-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.13); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .onboard-phone-avatar-ring::before,
  .onboard-phone-avatar-ring::after,
  .onboard-phone-avatar {
    animation: none;
  }
}
.onboard-phone-name { color: var(--c-white); font-weight: 700; font-size: 1.05rem; margin: 0 0 2px; }
.onboard-phone-status { color: rgba(255, 255, 255, .4); font-size: .78rem; margin: 0 0 32px; }
.onboard-phone-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; }
.onboard-phone-control { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.onboard-phone-control-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-phone-control-icon svg { width: 16px; height: 16px; }
.onboard-phone-control span:last-child { color: rgba(255, 255, 255, .35); font-size: .62rem; }
.onboard-phone-end { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.onboard-phone-end-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ff3b30;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-phone-end-btn svg { width: 22px; height: 22px; }
.onboard-phone-end-label { color: rgba(255, 255, 255, .35); font-size: .62rem; }

.onboard-notif-list { width: 300px; display: flex; flex-direction: column; gap: 10px; }
.onboard-notif {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--c-dark-2);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
}
.onboard-notif-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(53, 194, 181, .14);
  color: var(--c-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.onboard-notif-icon svg { width: 16px; height: 16px; }
.onboard-notif-title { color: var(--c-white); font-size: .82rem; font-weight: 600; line-height: 1.35; }
.onboard-notif-sub {
  color: rgba(247, 250, 252, .45);
  font-size: .74rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onboard-notif-time { color: rgba(247, 250, 252, .28); font-size: .68rem; margin-top: 4px; }

/* Mock UI illustrations inside .how-slide -- deliberately simple/abstract,
   not real product screenshots. */
.mock-link, .mock-call { width: 100%; max-width: 280px; }
.mock-line { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); flex: 1; }
.mock-line-title { height: 10px; max-width: 60%; background: rgba(255, 255, 255, .3); }

.mock-link { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mock-link-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; flex: none;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55);
}
.mock-link-badge svg { width: 26px; height: 26px; }
.mock-link-new { background: rgba(53, 194, 181, .18); border: 1px solid rgba(53, 194, 181, .45); color: var(--c-accent); }
.mock-link-line { flex: 1; max-width: 60px; height: 2px; background: repeating-linear-gradient(90deg, var(--c-on-dark) 0 6px, transparent 6px 12px); }

.mock-call { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.mock-call-top { display: flex; align-items: center; gap: 12px; width: 100%; }
/* Caller -> arrow -> "Direct beantwoord" flow row, step 1 only -- makes the
   causal link (klant belt -> direct beantwoord) explicit instead of showing
   the outcome badge on its own. */
.mock-flow { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.mock-flow-caller {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: var(--c-dark-2); border: 1px solid rgba(255, 255, 255, .14); color: var(--c-on-dark);
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55);
}
.mock-flow-caller svg { width: 22px; height: 22px; }
.mock-flow-arrow { width: 18px; height: 18px; color: var(--c-on-dark); flex: none; }
.mock-pulse {
  width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent); flex: none;
  box-shadow: 0 0 0 0 rgba(53, 194, 181, .6);
  animation: mockPulse 1.8s ease-out infinite;
}
@keyframes mockPulse {
  0% { box-shadow: 0 0 0 0 rgba(53, 194, 181, .55); }
  70% { box-shadow: 0 0 0 14px rgba(53, 194, 181, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 194, 181, 0); }
}
.mock-notice {
  display: flex; align-items: center; gap: 10px;
  background: rgba(53, 194, 181, .16); border: 1px solid rgba(53, 194, 181, .4);
  color: var(--c-white); border-radius: 12px; padding: 12px 16px; font-size: .9rem; font-weight: 600;
  box-shadow: 0 16px 32px -16px rgba(53, 194, 181, .5);
}
.mock-notice svg { width: 20px; height: 20px; color: var(--c-accent); flex: none; }

.mock-fork { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 260px; }
.mock-fork-badge {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-dark-2); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px; padding: 14px 16px; color: var(--c-white); font-size: .88rem; font-weight: 600;
  box-shadow: 0 16px 32px -18px rgba(0, 0, 0, .5);
}
.mock-fork-badge svg { width: 22px; height: 22px; color: var(--c-on-dark); flex: none; }

/* CTA — vivid closing page, two-column demo-aanvraag (ported from reference,
   restyled in huisstijl). Left: pitch + checklist + mailto fallback, both in
   white-on-gradient like the previous single-column version. Right: a solid
   white form card -- a translucent card (as the dark-mode reference used)
   would lose contrast against a saturated gradient, so this deviates from
   the reference there deliberately. */
.cta {
  background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-primary) 70%);
  color: var(--c-white);
  /* .page's row flex would shrink-wrap .wrap on the cross axis like every
     other section here; column + stretch fixes that (same recurring bug as
     .proof/.how-diagram), and justify-content:center keeps the two-column
     grid vertically centered in the 100vh page like the old single-column
     layout was. */
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding: 20px 0; }
.cta-intro h2 { margin: 16px 0 20px; color: var(--c-white); }
.cta-kicker { color: rgba(255, 255, 255, .85); }
.cta-lead { color: rgba(255, 255, 255, .85); font-size: 1.05rem; line-height: 1.55; margin-bottom: 28px; max-width: 46ch; }
.cta-checklist { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cta-checklist li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .92); font-size: .95rem; }
.cta-checklist svg { width: 18px; height: 18px; flex: none; }
.cta-mail { color: rgba(255, 255, 255, .75); font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta-mail:hover { color: var(--c-white); }

.cta-form-panel { position: relative; }
.cta-form {
  background: var(--c-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 32px 64px -20px rgba(7, 30, 43, .35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* This class's own display:flex outranks the UA [hidden] stylesheet rule,
   so setting the hidden attribute alone (as script.js does after a
   successful submit) silently fails to hide it without this override. */
.cta-form[hidden] { display: none; }
.cta-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta-field label { display: block; color: var(--c-muted); font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.cta-field input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: .92rem;
  font-family: inherit;
}
.cta-field input::placeholder { color: rgba(15, 36, 48, .35); }
.cta-field input:focus { outline: none; border-color: var(--c-primary); background: var(--c-white); }
.cta-form-submit { width: 100%; margin-top: 4px; }
.cta-form-error { color: var(--c-error); font-size: .85rem; text-align: center; margin-top: -4px; }
.cta-form-error a { text-decoration: underline; }

.cta-form-sent {
  background: var(--c-white);
  border-radius: 20px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 32px 64px -20px rgba(7, 30, 43, .35);
}
.cta-form-sent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  margin-bottom: 16px;
}
.cta-form-sent-icon svg { width: 28px; height: 28px; }
.cta-form-sent h3 { color: var(--c-ink); margin-bottom: 8px; }
.cta-form-sent p { color: var(--c-muted); font-size: .95rem; }

/* Footer */
.footer { border-top: 1px solid var(--c-line); padding: 32px 0; background: var(--c-bg); }
.footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-right: auto;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-muted);
}
.footer-links a:hover { color: var(--c-primary); }
.footer-copy { font-size: .85rem; color: var(--c-muted); }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.98);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint span, .floating-orb { animation: none; }
  .hero-video { display: none; }
}

/* Pricing (abonnementen.html) */
.pricing-intro {
  background: linear-gradient(160deg, var(--c-dark) 0%, #10334a 100%);
  color: var(--c-white);
}
.pricing { background: var(--c-bg); padding: 80px 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  border-radius: 24px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: 0 20px 50px -30px rgba(15, 36, 48, .25);
}
.pricing-card-featured {
  border-color: var(--c-primary);
  box-shadow: 0 24px 60px -24px rgba(14, 110, 140, .4);
  transform: translateY(-8px);
}
.pricing-badge {
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.pricing-name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin-bottom: 8px; }
.pricing-tagline { color: var(--c-muted); font-size: .95rem; margin-bottom: 24px; min-height: 44px; }
.pricing-price { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; }
.pricing-price-note { color: var(--c-muted); font-size: .85rem; margin-bottom: 24px; }
.pricing-cta { width: 100%; margin-bottom: 32px; }
.pricing-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--c-ink); }
.pricing-features svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c-accent); }
.pricing-footnote { text-align: center; margin-top: 56px; color: var(--c-muted); }
.pricing-footnote a { color: var(--c-primary); font-weight: 600; }

/* Responsive */
@media (max-width: 920px) {
  .proof-inner { grid-template-columns: 1fr; }
  .proof-inner + .proof-inner { margin-top: 56px; }
  .proof-inner-reverse .proof-visual, .proof-inner-reverse .proof-copy { order: initial; }
  .highlights-inner { grid-template-columns: 1fr; gap: 40px; }
  .features-grid { grid-template-columns: 1fr; gap: 32px; }
  .features-visual { order: -1; }
  /* Single column: the sticky-pin/crossfade effect is deliberately dropped
     here, not just shrunk. Tried keeping it (see git history) and found a
     real bug live: in one column, the pinned image and the step text share
     the same width, so as text scrolls "past" the pinned image it visually
     collides with it instead of sliding beside it -- the image is too
     short to ever fully mask a step's text, so parts of both show at once.
     A plain non-pinned image above each step's text avoids that entirely
     and is the standard fallback for this pattern on narrow screens. */
  .how-scroll { grid-template-columns: 1fr; gap: 24px; }
  .how-visual { position: static; order: -1; }
  /* No shorter mobile override anymore -- the frame now needs to hold all 4
     stacked slides at once (not just the single active one the old 240px
     was sized for), and that content isn't any smaller on a narrow screen,
     so it keeps the same 440px as desktop. */
  .how-step { min-height: 0; padding-left: 22px; padding-bottom: 32px; opacity: 1; }
  .how-step::before, .how-step::after { display: none; }
  .diagram-slide-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .diagram-visual { order: -1; }
  .onboard-card, .onboard-notif-list { width: 100%; max-width: 320px; }
  .onboard-phone { width: 180px; }
  .branch-visual { min-width: 0; width: 100%; max-width: 300px; padding: 40px 28px; margin: 0 auto; }
  .diagram-num { font-size: 4rem; }
  .diagram-copy .diagram-dots { justify-content: center; }
  .phone-demo-inner { grid-template-columns: 1fr; gap: 16px; }
  .phone-mock { width: 100%; max-width: 300px; margin: 0 auto; }
  .phone-step { padding: 12px; }
  .phone-step.is-active .phone-step-desc { display: none; }
  .cta-grid { grid-template-columns: 1fr; gap: 40px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-card-featured { transform: none; }
}

@media (max-width: 720px) {
  html { scroll-snap-type: none; }
  .nav-links { display: none; }
  .nav-inner .btn-sm { display: none; }
  .nav-toggle { display: flex; }
  .page { min-height: auto; padding-top: 72px; padding-bottom: 72px; }
  .hero { padding: 120px 0 80px; min-height: 100vh; }
  .statement { padding: 90px 0; }
  /* Restore the original, taller scroll distance here -- the shortened
     desktop pacing above targets mouse-wheel notches specifically; touch
     scrolling doesn't have the same granularity and this wasn't reported
     as a problem on mobile. */
  .phone-demo-scroll { height: 400vh; }
  .diagram-scroll { height: 400vh; }
}