/* ============================================================
   SLIMSERVICE — DESIGN SYSTEM
   Dark base · Wit = actie · Groen = live/systeem
   Twee lichte doorbraken: ROI + Finale CTA
   Fonts: Syne (display) · DM Mono (labels/mono)
============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --void:      #07060A;
  --ink:       #0D0C13;
  --surface:   #111019;
  --surface2:  #181624;
  --light-bg:  #F4F3EE;
  --light-s:   #ECEAE2;

  /* Borders */
  --line:      rgba(255,255,255,.07);
  --line2:     rgba(255,255,255,.13);
  --line-l:    rgba(20,18,30,.10);
  --line-l2:   rgba(20,18,30,.18);

  /* Text */
  --text:      #F0EEF8;
  --muted:     #6B6880;
  --faint:     rgba(240,238,248,.55);
  --ink-text:  #1A1828;
  --ink-muted: #6B6A7A;

  /* Green — systeem / live */
  --g:         #00FF88;
  --g-dim:     rgba(0,255,136,.08);
  --g-ring:    rgba(0,255,136,.22);

  /* White — primaire actie */
  --w-dim:     rgba(255,255,255,.08);
  --w-ring:    rgba(255,255,255,.20);

  /* Fonts */
  --f-d: 'Syne', system-ui, sans-serif;
  --f-m: 'DM Mono', 'Courier New', monospace;

  /* Radii */
  --r:    4px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Shadows */
  --shadow:    0 8px 28px rgba(0,0,0,.28);
  --shadow-lg: 0 32px 80px rgba(0,0,0,.50);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px; /* compensate sticky header */
}
body {
  font-family: var(--f-d);
  background: var(--void);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul,ol { list-style: none; }

/* Subtle scan lines */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1 {
  font-family: var(--f-d); font-weight: 800;
  font-size: clamp(38px,5.2vw,76px);
  line-height: .93; letter-spacing: -.03em;
}
h1 .accent { color: var(--g); }

h2 {
  font-family: var(--f-d); font-weight: 800;
  font-size: clamp(30px,4vw,54px);
  line-height: .97; letter-spacing: -.025em;
}

h3 {
  font-family: var(--f-d); font-weight: 700;
  font-size: 17px; letter-spacing: -.01em; line-height: 1.25;
}

p { color: var(--muted); }

.lead {
  font-size: clamp(16px,1.6vw,19px);
  color: var(--faint); line-height: 1.6; font-weight: 400;
}

.kicker {
  font-family: var(--f-m); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 14px;
}
.kicker.live { color: var(--g); }
.kicker.light { color: var(--ink-muted); }

/* Light section text overrides */
.section-light { background: var(--light-bg); }
.section-light h2,
.section-light h3 { color: var(--ink-text); }
.section-light p,
.section-light .lead { color: var(--ink-muted); }
.section-light .kicker { color: var(--ink-muted); }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap { max-width: 1180px; margin:0 auto; padding:0 clamp(20px,4vw,52px); }
.wrap-full { padding:0 clamp(20px,4vw,52px); }
section { position: relative; }
.hline { border:none; border-top:1px solid var(--line); }

/* ── REVEAL ──────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in { opacity:1; transform:none; }
.reveal-l {
  opacity:0; transform:translateX(-18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-l.in { opacity:1; transform:none; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:var(--r-md);
  font-family:var(--f-d); font-size:14px; font-weight:700;
  letter-spacing:-.01em; border:1.5px solid transparent; cursor:pointer;
  transition: transform .12s, box-shadow .12s, background .12s;
  text-decoration:none; white-space:nowrap;
  min-height:44px; /* minimum touch target */
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:none; }

.btn-primary {
  background:#fff; color:var(--void); border-color:#fff;
}
.btn-primary:hover { box-shadow:0 8px 28px rgba(255,255,255,.22); }

.btn-primary-dark {
  background:var(--ink-text); color:#fff; border-color:var(--ink-text);
}
.btn-primary-dark:hover { box-shadow:0 8px 28px rgba(0,0,0,.3); }

.btn-green {
  background:var(--g-dim); color:var(--g); border-color:var(--g-ring);
}
.btn-green:hover { background:rgba(0,255,136,.13); box-shadow:0 6px 20px rgba(0,255,136,.18); }

.btn-ghost {
  background:var(--w-dim); color:var(--faint); border-color:var(--line2);
}
.btn-ghost:hover { background:rgba(255,255,255,.10); }

.btn-ghost-dark {
  background:transparent; color:var(--ink-text); border-color:var(--line-l2);
}
.btn-ghost-dark:hover { background:var(--light-s); }

.btn-full { width:100%; }

/* ── HEADER ──────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  background:rgba(7,6,10,.88);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:60px;
}
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-dot {
  width:26px; height:26px; border-radius:var(--r);
  background:#fff; display:grid; place-items:center;
  position:relative; flex-shrink:0;
}
.brand-dot::after {
  content:''; position:absolute; top:-2px; right:-2px;
  width:7px; height:7px; border-radius:50%;
  background:var(--g); border:2px solid var(--void);
  animation:blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.brand-dot svg { width:14px; height:14px; }
.brand-name {
  font-family:var(--f-d); font-size:17px; font-weight:800; letter-spacing:-.02em;
}
.header-phone {
  font-family:var(--f-m); font-size:12px; color:var(--muted);
  letter-spacing:.04em; margin-left:4px;
}
.nav { display:flex; align-items:center; gap:2px; }
.nav a {
  font-family:var(--f-m); font-size:11px; color:var(--muted);
  padding:6px 11px; border-radius:var(--r-md); border:1px solid transparent;
  transition:color .12s, background .12s; letter-spacing:.05em; text-transform:uppercase;
}
.nav a:hover { color:var(--text); background:var(--w-dim); }
.nav a.active { color:var(--text); border-color:var(--line2); background:var(--w-dim); }
.nav a.nav-sprint { color:var(--g); }
.nav a.nav-sprint:hover { color:var(--g); background:var(--g-dim); }
.nav a.nav-sprint.active { color:var(--g); border-color:var(--g-ring); background:var(--g-dim); }
.header-cta { display:flex; gap:8px; align-items:center; }
.nav-toggle {
  display:none; background:none; border:1px solid var(--line2);
  border-radius:var(--r-md); padding:7px 12px;
  font-family:var(--f-m); font-size:11px; color:var(--text);
  cursor:pointer; letter-spacing:.08em; text-transform:uppercase;
}

/* ── TICKER ──────────────────────────────────────────────── */
.ticker-band {
  background:var(--void); overflow:hidden;
  border-top:1px solid var(--g-ring);
  border-bottom:1px solid var(--line);
  padding:11px 0;
}
.ticker-track {
  display:flex; width:max-content;
  animation:tickroll 46s linear infinite;
}
.ticker-track:hover { animation-play-state:paused; }
@keyframes tickroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-item {
  display:inline-flex; align-items:center; gap:9px;
  padding:0 28px; font-family:var(--f-m); font-size:11px;
  color:rgba(0,255,136,.55); white-space:nowrap;
  border-right:1px solid rgba(0,255,136,.08); letter-spacing:.07em;
}
.t-item .td {
  width:5px; height:5px; border-radius:50%;
  background:var(--g); flex-shrink:0; animation:blink 1.8s infinite;
}
.t-item strong { color:var(--g); }
.t-item .tl { color:rgba(0,255,136,.3); font-size:10px; }

/* ── HERO ────────────────────────────────────────────────── */
.hero {
  padding:clamp(56px,8vw,100px) 0 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-bg {
  position:absolute; right:-1%; top:52%; transform:translateY(-50%);
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(220px,28vw,420px);
  color:rgba(255,255,255,.022); letter-spacing:-.06em;
  line-height:1; pointer-events:none; user-select:none;
}
.hero-grid {
  display:grid; grid-template-columns:1fr .72fr;
  gap:clamp(36px,5vw,72px); align-items:center;
  position:relative; z-index:2;
}
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; margin-bottom:26px;
  border:1px solid var(--g-ring); border-radius:var(--r);
  font-family:var(--f-m); font-size:11px; color:var(--g);
  background:var(--g-dim); letter-spacing:.08em;
}
.hero-pill::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--g); animation:blink 2s infinite;
}
.hero h1 { margin-bottom:24px; }
.hero .lead { max-width:50ch; margin-bottom:32px; }
.hero-acts { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.trust-row {
  display:flex; flex-wrap:wrap; gap:14px;
  padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--f-m); font-size:11px; color:var(--muted);
  letter-spacing:.05em;
}
.trust-row span { display:flex; align-items:center; gap:5px; }
.trust-row span::before { content:'✓'; color:var(--g); }
.scroll-hint {
  display:flex; justify-content:center;
  padding:clamp(20px,2.5vw,32px) 0;
  color:var(--muted);
  animation:bounceY 2s ease-in-out infinite;
  font-size:18px;
}
@keyframes bounceY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ── PHONE MOCKUP ────────────────────────────────────────── */
.phone-col {
  position:relative;
  display:flex; flex-direction:column; align-items:center;
}

/* Groene gloed achter de phone */
.phone-col::before {
  content:''; position:absolute;
  width:340px; height:520px;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,255,136,.09) 0%, transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; z-index:0; border-radius:50%;
}

.phone-shell {
  background:#09080F;
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(0,255,136,.06);
  width:308px; margin:0 auto; position:relative; z-index:2;
  /* vaste breedte desktop — wordt overschreven op mobiel */
}
.phone-bar {
  background:#075E54; padding:12px 14px;
  display:flex; align-items:center; gap:9px;
}
.p-ava {
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,#25D366,#128C7E);
  display:grid; place-items:center;
  font-family:var(--f-d); font-size:13px; font-weight:800;
  color:#fff; flex-shrink:0;
}
.p-name { font-family:var(--f-d); font-size:13px; font-weight:700; color:#fff; }
.p-status { font-family:var(--f-m); font-size:10px; color:rgba(255,255,255,.65); letter-spacing:.04em; }

.phone-tabs {
  display:flex; background:#0E0D15;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.ptab {
  flex:1; padding:8px 4px; text-align:center;
  font-family:var(--f-m); font-size:11px;
  color:rgba(255,255,255,.3); background:none; border:none;
  border-bottom:2px solid transparent; cursor:pointer;
  transition:color .12s, border-color .12s; letter-spacing:.04em;
}
.ptab.on { color:#25D366; border-bottom-color:#25D366; }

.chat-area {
  padding:12px; background:#0B141A;
  height:360px; display:flex; flex-direction:column; gap:7px;
  position:relative;
  overflow-y:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.chat-area::-webkit-scrollbar { display:none; }
.chat-panel { display:none; flex-direction:column; gap:7px; }
.chat-panel.on { display:flex; }

/* Animated chat state */
.chat-panel.animating .bub,
.chat-panel.animating .bub-typing { opacity:0; }
.bub {
  max-width:84%; padding:8px 12px;
  font-family:var(--f-d); font-size:12px; line-height:1.45;
  border-radius:10px;
}
.bub.u { align-self:flex-end; background:#005C4B; color:#E9F5F0; border-bottom-right-radius:2px; }
.bub.s { align-self:flex-start; background:#1E2B33; color:#E1E8ED; border:1px solid rgba(0,255,136,.12); border-bottom-left-radius:2px; }
.bub .ck { font-size:10px; color:#53BDEB; margin-left:3px; }
.bub-meta { text-align:center; font-family:var(--f-m); font-size:10px; color:rgba(255,255,255,.25); letter-spacing:.04em; }

.bub-typing {
  align-self:flex-start; background:#1E2B33;
  border:1px solid rgba(0,255,136,.10);
  padding:9px 12px; border-radius:10px; border-bottom-left-radius:2px;
  display:flex; gap:3px; align-items:center;
}
.bub-typing span {
  width:4px; height:4px; border-radius:50%;
  background:#53BDEB; opacity:.4; animation:tdot 1.2s infinite;
}
.bub-typing span:nth-child(2){animation-delay:.2s}
.bub-typing span:nth-child(3){animation-delay:.4s}
@keyframes tdot { 0%,100%{opacity:.4;transform:none} 50%{opacity:1;transform:translateY(-3px)} }

.phone-input {
  background:#0D1117; padding:8px 12px;
  display:flex; gap:7px; align-items:center;
  border-top:1px solid rgba(255,255,255,.04);
}
.pi-field {
  flex:1; background:#2A3942; border-radius:18px;
  padding:7px 12px; font-family:var(--f-m); font-size:11px;
  color:rgba(255,255,255,.3); letter-spacing:.03em;
}
.pi-send {
  width:28px; height:28px; border-radius:50%;
  background:#00A884; display:grid; place-items:center;
  font-size:12px; color:#fff; flex-shrink:0;
}
.phone-note {
  text-align:center; margin-top:9px;
  font-family:var(--f-m); font-size:10px;
  color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
}

/* Floating badges */
/* fbd badges removed */

/* ── STATS ───────────────────────────────────────────────── */
.stats-section { border-bottom:1px solid var(--line); }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.stat-cell {
  padding:clamp(32px,4vw,56px) clamp(24px,3vw,44px);
  border-right:1px solid var(--line);
  transition:background .18s;
}
.stat-cell:last-child { border-right:none; }
.stat-cell:hover { background:var(--surface); }
.stat-n {
  display:block; font-family:var(--f-d); font-weight:800;
  font-size:clamp(60px,7.5vw,100px); line-height:.9;
  letter-spacing:-.04em; color:var(--text); margin-bottom:10px;
}
.stat-n .u { font-size:.35em; color:var(--g); vertical-align:.22em; letter-spacing:0; }
.stat-l { font-family:var(--f-m); font-size:clamp(10px,1.2vw,11px); color:var(--muted); letter-spacing:.07em; text-transform:uppercase; line-height:1.6; }

/* ── HOE HET WERKT ───────────────────────────────────────── */
.how-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.section-head { margin-bottom:clamp(36px,4.5vw,58px); }
.section-head h2 { margin-bottom:10px; }
.section-head .lead { max-width:52ch; }

.steps-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--line);
  gap:1px;
}
.step-card {
  padding:clamp(24px,3vw,42px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:14px;
  transition:background .18s;
}
.step-card:hover { background:var(--surface2); }
.step-num {
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(64px,7vw,96px); line-height:.85;
  letter-spacing:-.05em; color:rgba(255,255,255,.04);
}
.step-card h3 { color:var(--text); border-left:2px solid var(--g); padding-left:11px; }
.step-card p { font-size:14px; line-height:1.65; }

.deliverables {
  margin-top:clamp(16px,2vw,24px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:grid; grid-template-columns:1fr auto;
}
.del-left {
  padding:clamp(22px,3vw,36px);
  border-right:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.del-right {
  padding:clamp(22px,3vw,36px);
  background:var(--surface);
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:12px; min-width:210px; text-align:center;
}
.tick-row {
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; color:var(--faint); line-height:1.45;
}
.tick-i {
  width:16px; height:16px; border-radius:50%;
  background:var(--g-dim); border:1px solid var(--g-ring);
  display:grid; place-items:center; font-size:9px;
  color:var(--g); flex-shrink:0; margin-top:2px; font-weight:900;
}
.live-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:var(--r-md);
  border:1px solid var(--g-ring); background:var(--g-dim);
  font-family:var(--f-m); font-size:13px; color:var(--g); letter-spacing:.04em;
}
.live-badge::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--g); animation:blink 2s infinite;
}

/* ── PRODUCT IMAGES ──────────────────────────────────────── */
.product-section {
  padding:clamp(56px,6vw,88px) 0;
  border-bottom:1px solid var(--line);
}
.product-section.alt { background:var(--surface); }
.prod-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px); align-items:center;
}
.prod-row.flip { direction:rtl; }
.prod-row.flip > * { direction:ltr; }
.prod-img img {
  border-radius:var(--r-lg); border:1px solid var(--line2);
  box-shadow:var(--shadow-lg); width:100%;
}
.prod-img-ph {
  border-radius:var(--r-lg); border:1px dashed var(--line2);
  background:var(--surface2); aspect-ratio:16/10;
  display:grid; place-items:center;
  font-family:var(--f-m); font-size:11px; color:var(--muted); letter-spacing:.06em;
}
.prod-txt { display:flex; flex-direction:column; gap:16px; }
.prod-txt .btn { align-self:flex-start; }

/* ── SCENARIOS ───────────────────────────────────────────── */
.scenarios-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.sc-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(28px,3vw,44px);
}
.sc-card {
  padding:clamp(28px,3vw,44px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:16px;
  transition:background .18s;
}
.sc-card:hover { background:var(--surface2); }
.sc-icon {
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--g-dim); border:1px solid var(--g-ring);
  display:grid; place-items:center; font-size:20px;
}
.sc-card h3 { color:var(--text); font-size:19px; border-left:2px solid var(--g); padding-left:11px; }
.sc-sub {
  font-family:var(--f-m); font-size:10px; color:var(--muted);
  letter-spacing:.10em; text-transform:uppercase; margin-top:-4px;
  margin-bottom:4px;
}
.sc-card > p { font-size:13px; line-height:1.65; flex:1; }
.sc-steps { display:grid; gap:6px; }
.sc-step {
  display:flex; gap:8px; align-items:flex-start;
  font-family:var(--f-m); font-size:11px; color:var(--muted); letter-spacing:.03em;
}
.sn {
  width:17px; height:17px; border-radius:50%;
  background:rgba(255,255,255,.04); border:1px solid var(--line2);
  display:grid; place-items:center; font-size:9px; font-weight:700;
  color:var(--faint); flex-shrink:0; margin-top:1px;
}
.sc-acts { display:grid; gap:8px; margin-top:auto; }

/* Demo row */
.demos-row {
  margin-top:clamp(20px,2.5vw,32px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.demo-card {
  padding:20px 22px;
  background:var(--surface2);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; transition:background .18s;
}
.demo-card:hover { background:var(--surface); }
.demo-card-info { display:flex; flex-direction:column; gap:3px; }
.demo-card-title { font-size:13px; font-weight:700; color:var(--text); }
.demo-card-sub { font-family:var(--f-m); font-size:10px; color:var(--muted); letter-spacing:.06em; }

/* ── BEZWAARBLOK ─────────────────────────────────────────── */
.bezwaar-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.bezwaar-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(28px,3vw,44px);
}
.bz-card {
  padding:clamp(22px,2.8vw,36px);
  background:var(--surface2);
  display:flex; flex-direction:column; gap:12px;
  transition:background .18s;
}
.bz-card:hover { background:var(--ink); }
.bz-q {
  font-size:15px; font-weight:700; color:var(--text); line-height:1.3;
  padding-left:14px; border-left:2px solid var(--g);
}
.bz-a { font-size:13px; line-height:1.7; color:var(--muted); }
.bz-a strong { color:var(--faint); }

/* ── ROI — LICHTE SECTIE ─────────────────────────────────── */
.roi-section {
  padding:clamp(64px,7vw,100px) 0;
  background:var(--light-bg);
  border-top:3px solid var(--ink-text);
  border-bottom:3px solid var(--ink-text);
}
.roi-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.5vw,32px); margin-top:clamp(32px,4vw,52px);
  align-items:start;
}
.roi-input-card {
  background:#fff;
  border:1px solid var(--line-l2);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.roi-input-card h3 { color:var(--ink-text); margin-bottom:6px; }
.roi-input-card > p { font-size:13px; margin-bottom:22px; color:var(--ink-muted); }
.roi-form { display:grid; gap:14px; }
.roi-lbl {
  font-family:var(--f-m); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); display:block; margin-bottom:6px;
}
.roi-inp {
  width:100%; background:var(--light-s);
  border:1px solid var(--line-l2); border-radius:var(--r-md);
  padding:11px 14px; color:var(--ink-text);
  font-family:var(--f-d); font-size:16px; font-weight:600;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.roi-inp:focus {
  border-color:rgba(20,18,30,.4);
  box-shadow:0 0 0 3px rgba(20,18,30,.07);
  background:#fff;
}

.roi-result-card {
  background:#fff; border:1px solid var(--line-l2);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,36px);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  position:sticky; top:76px;
  display:flex; flex-direction:column; gap:16px;
}
.roi-out-block { display:flex; flex-direction:column; gap:4px; padding-bottom:14px; border-bottom:1px solid var(--line-l); }
.roi-out-block:last-of-type { border-bottom:none; padding-bottom:0; }
.roi-out-lbl { font-family:var(--f-m); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); }
.roi-out-n {
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(36px,4vw,52px);
  line-height:.95; letter-spacing:-.03em; color:var(--ink-text);
}
.roi-out-n.total { font-size:clamp(44px,5vw,66px); color:var(--ink-text); }
.roi-out-sub { font-size:12px; color:var(--ink-muted); font-family:var(--f-m); letter-spacing:.04em; }
.roi-formula-note { font-family:var(--f-m); font-size:10px; color:var(--ink-muted); letter-spacing:.04em; line-height:1.6; }

/* ── PRICING ─────────────────────────────────────────────── */
.pricing-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.urgency-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--r);
  border:1px solid var(--g-ring); background:var(--g-dim);
  font-family:var(--f-m); font-size:10px; color:var(--g);
  letter-spacing:.08em; text-transform:uppercase; margin-top:12px;
}
.urgency-pill::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--g); animation:blink 2s infinite;
}
.pricing-grid {
  display:grid; grid-template-columns:1fr 1.06fr 1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(24px,3vw,40px);
}
.pc {
  padding:clamp(22px,2.8vw,38px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:14px;
  transition:background .18s;
}
.pc:hover { background:var(--surface2); }
.pc.featured {
  background:var(--void);
  border:none;
}
.pc.dim { opacity:.62; }
.pc.dim:hover { opacity:1; }
.pc-badge {
  display:block;
  /* negative margins to bleed to card edges */
  margin: calc(-1 * clamp(22px,2.8vw,36px))
          calc(-1 * clamp(22px,2.8vw,36px))
          clamp(16px,2vw,22px);
  padding: 9px clamp(22px,2.8vw,36px);
  background:var(--g); color:var(--void);
  font-family:var(--f-m); font-size:10px;
  letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; text-align:center;
}
.pc.featured { position:relative; }
.pc-name { font-size:17px; font-weight:800; color:var(--text); }
.pc-price {
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(30px,3.2vw,42px); line-height:1;
  letter-spacing:-.025em; color:var(--text);
}
.pc-price span { font-size:13px; font-weight:400; color:var(--muted); font-family:var(--f-d); }
.pc-monthly { font-family:var(--f-m); font-size:11px; color:var(--muted); margin-top:-8px; letter-spacing:.04em; }
.pc-credits-note { font-size:12px; color:var(--muted); font-family:var(--f-m); letter-spacing:.03em; }
.pc-credits-note strong { color:var(--faint); }
.pc-desc { font-size:13px; line-height:1.6; color:var(--muted); }
.pc-rule { border:none; border-top:1px solid var(--line); }
.pc-feats { display:grid; gap:9px; flex:1; }
.fi.n { color:var(--muted); }
.pc-cta { margin-top:auto; }

/* Add-ons */
.addons-section {
  margin-top:clamp(20px,2.5vw,32px);
}
.addons-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.ao-card {
  padding:clamp(18px,2vw,28px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:8px;
  transition:background .18s;
}
.ao-card:hover { background:var(--surface2); }
.ao-name { font-size:14px; font-weight:700; color:var(--text); }
.ao-desc { font-size:12px; line-height:1.55; flex:1; }
.ao-price { font-family:var(--f-m); font-size:12px; color:var(--g); letter-spacing:.04em; margin-top:auto; }

/* Sprint banner */
.sprint-banner {
  margin-top:clamp(16px,2vw,24px);
  border:1px solid var(--line2); border-left:3px solid #fff;
  border-radius:var(--r-lg);
  padding:clamp(18px,2vw,28px) clamp(20px,2.5vw,36px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; background:var(--surface);
}
.sprint-copy h3 { font-size:15px; color:var(--text); margin-bottom:4px; }
.sprint-copy p { font-size:13px; }
.sprint-acts { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.pricing-foot {
  margin-top:14px; padding:13px 18px;
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--f-m); font-size:11px; color:var(--muted);
  text-align:center; background:var(--surface); letter-spacing:.04em;
}

/* ── SOCIAL PROOF ────────────────────────────────────────── */
.proof-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.proof-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(24px,3vw,40px);
}
.ph-card {
  padding:clamp(20px,2.5vw,30px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:12px;
}
.ph-ava {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.04); border:1px dashed var(--line2);
}
.ph-line { height:8px; border-radius:var(--r); background:rgba(255,255,255,.05); }
.ph-line.s { width:55%; } .ph-line.m { width:75%; }
.ph-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r);
  background:var(--w-dim); border:1px solid var(--line2);
  font-family:var(--f-m); font-size:10px; color:var(--muted);
  letter-spacing:.08em; align-self:flex-start; text-transform:uppercase;
}
.proof-cta-note {
  text-align:center; margin-top:18px;
  font-family:var(--f-m); font-size:12px; color:var(--muted); letter-spacing:.04em;
}
.proof-cta-note a { color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ── ABOUT ───────────────────────────────────────────────── */
.about-section {
  padding:clamp(64px,8vw,110px) 0;
  border-bottom:1px solid var(--line);
  background:var(--void); overflow:hidden;
}
.about-bg {
  position:absolute; pointer-events:none; user-select:none;
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(120px,18vw,260px);
  color:rgba(255,255,255,.025);
  letter-spacing:-.05em; line-height:1;
  right:-1%; top:50%; transform:translateY(-50%);
}
.about-inner { max-width:800px; position:relative; z-index:2; }
.about-quote {
  font-family:var(--f-d); font-size:clamp(20px,2.5vw,32px);
  font-weight:700; line-height:1.3; letter-spacing:-.015em;
  color:var(--text); margin-bottom:20px;
}
.about-quote strong { color:var(--g); font-weight:700; }
.about-body { font-size:15px; color:var(--muted); line-height:1.75; max-width:60ch; margin-bottom:20px; }
.about-sig { font-family:var(--f-m); font-size:13px; color:var(--muted); letter-spacing:.06em; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.faq-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px; margin-top:clamp(28px,3vw,44px);
}
.faq-item {
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--surface);
}
.faq-item summary {
  padding:15px 18px; font-weight:700; font-size:14px;
  cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:12px; list-style:none;
  transition:background .12s; letter-spacing:-.01em;
  word-break:break-word;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { background:var(--surface2); }
.faq-item summary::after {
  content:'+'; font-size:18px; color:var(--g);
  flex-shrink:0; transition:transform .2s;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p {
  padding:0 18px 15px; padding-top:12px; font-size:13px;
  line-height:1.65; border-top:1px solid var(--line); color:var(--muted);
}

/* ── FINALE CTA — LICHTE SECTIE ──────────────────────────── */
.cta-section {
  padding:clamp(72px,9vw,120px) 0;
  background:var(--light-bg);
  border-top:3px solid var(--ink-text);
  text-align:center; overflow:hidden;
}
.cta-bg {
  position:absolute; pointer-events:none; user-select:none;
  font-family:var(--f-d); font-weight:800;
  font-size:clamp(80px,14vw,200px);
  color:rgba(20,18,30,.04);
  letter-spacing:-.04em; line-height:1; white-space:nowrap;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.cta-inner { position:relative; z-index:2; }
.cta-section h2 { color:var(--ink-text); margin-bottom:14px; }
.cta-section p { color:var(--ink-muted); font-size:17px; margin-bottom:10px; max-width:52ch; margin-left:auto; margin-right:auto; }
.cta-section .kicker { color:var(--ink-muted); }
.cta-urgency {
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 14px; margin-bottom:28px; border-radius:var(--r);
  background:var(--light-s); border:1px solid var(--line-l2);
  font-family:var(--f-m); font-size:11px; color:var(--ink-muted);
  letter-spacing:.07em; text-transform:uppercase;
}
.cta-urgency::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--ink-text); animation:blink 2s infinite;
}
.cta-acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }

/* Payment logos in CTA */
.pay-cta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; }
.pay-cta-lbl { font-family:var(--f-m); font-size:10px; color:var(--ink-muted); letter-spacing:.08em; text-transform:uppercase; margin-right:4px; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer {
  border-top:1px solid var(--line);
  padding: clamp(44px,5vw,64px) 0 0;
  background:var(--void);
}

/* ── FOOTER TOP: brand (2fr) + 4 kolommen (1fr each) ──────── */
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.footer-brand-col { padding-right: 16px; }
.footer-brand { font-family:var(--f-d); font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; color:var(--text); }
.footer-tag { font-size:13px; color:var(--muted); line-height:1.65; margin-bottom:14px; max-width:30ch; }
.footer-meta { font-family:var(--f-m); font-size:10.5px; color:var(--muted); line-height:1.9; letter-spacing:.03em; margin-top:10px; }

/* ── FOOTER COLUMNS ───────────────────────────────────────── */
.fc-title { font-family:var(--f-m); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:block; }
.footer-col a { display:block; font-size:13px; color:var(--muted); margin-bottom:8px; transition:color .12s; text-decoration:none; }
.footer-col a:hover { color:var(--text); }

/* ── FOOTER DIVIDER ───────────────────────────────────────── */
.footer-divider {
  height: 1px;
  background: var(--line);
  margin-top: clamp(32px,4vw,48px);
}

/* ── FOOTER BOTTOM BAR ────────────────────────────────────── */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 18px;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom-left {
  font-family: var(--f-m); font-size: 11px;
  color: var(--muted); letter-spacing: .04em;
}

/* ── PAYMENT RUNNER in footer-bottom ─────────────────────── */
.footer-pay-runner {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.footer-pay-runner img {
  height: 20px; width: auto;
  opacity: .85;
  filter: none;
  transition: opacity .15s;
}
.footer-pay-runner img:hover { opacity: 1; }

/* ── RESPONSIVE FOOTER ────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 2fr 1fr 1fr 1fr; }
  /* Arkeon col drops to second row */
}
@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; padding-right: 0; }
  .footer-tag { max-width: 100%; }
}
@media (max-width: 580px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ── PAYMENT LOGOS ───────────────────────────────────────── */
.pay-logos { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pay-logo svg { display:block; }
.pay-logo { opacity:.55; transition:opacity .15s; }
.pay-logo:hover { opacity:1; }
/* Dark section logos = white */
.pay-logos.on-dark .pay-logo path,
.pay-logos.on-dark .pay-logo rect,
.pay-logos.on-dark .pay-logo circle { fill:#fff !important; }
/* Light section logos = dark */
.pay-logos.on-light .pay-logo path,
.pay-logos.on-light .pay-logo rect,
.pay-logos.on-light .pay-logo circle { fill:var(--ink-text) !important; }

/* ── STICKY WHATSAPP + MOBILE BAR ────────────────────────── */
.wa-float {
  position:fixed; bottom:80px; right:20px; z-index:95;
  width:52px; height:52px; border-radius:50%;
  background:#25D366;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.40);
  transition:transform .15s, box-shadow .15s;
}
.wa-float:hover { transform:scale(1.08); box-shadow:0 10px 32px rgba(37,211,102,.5); }
.wa-float svg { width:26px; height:26px; }

.sticky-bar {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:90;
  padding:10px 16px; background:rgba(7,6,10,.94);
  backdrop-filter:blur(20px); border-top:1px solid var(--line);
  gap:10px; transform:translateY(100%); transition:transform .3s ease;
}
.sticky-bar.on { transform:translateY(0); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr; }
  .phone-col { margin-top: 32px; }
  .fbd { display:none; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-cell { border-right:none; border-bottom:1px solid var(--line); }
  .stat-cell:last-child { border-bottom:none; }
  .steps-grid { grid-template-columns:1fr; }
  .deliverables { grid-template-columns:1fr; }
  .del-left { grid-template-columns:1fr; border-right:none; border-bottom:1px solid var(--line); }
  .del-right { min-width:auto; }
  .prod-row { grid-template-columns:1fr; }
  .prod-row.flip { direction:ltr; }
  .sc-grid { grid-template-columns:1fr; }
  .demos-row { grid-template-columns:1fr; }
  .bezwaar-grid { grid-template-columns:1fr; }
  .roi-grid { grid-template-columns:1fr; }
  .roi-result-card { position:static; }
  .pricing-grid { grid-template-columns:1fr; }
  .pc.dim { opacity:1; }
  .addons-grid { grid-template-columns:1fr 1fr; }
  .proof-grid { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .nav { display:none; }
  .header-phone { display:none; }
  .nav-toggle { display:block; }
  .sticky-bar { display:flex; }
  .wa-float { display:flex; }
  .header-cta .btn-ghost { display:none; }
  /* Body padding so content clears sticky bar */
  body { padding-bottom:68px; }
  /* Phone max-width on tablet */
  /* Phone: centreer en begrens breedte zodat ratio klopt */
  .phone-shell { width: min(280px, 82vw); }
  .phone-col::before { width:260px; height:360px; }
}
@media (max-width:580px) {
  .cta-acts { flex-direction:column; align-items:stretch; }
  .hero-acts .btn-ghost { display:none; }
  .addons-grid { grid-template-columns:1fr; }
  /* Phone fills available width on small screens, max narrow for tall phone ratio */
  .phone-shell { width: min(260px, 78vw); }
  /* Trust row wraps cleanly */
  .trust-row { gap:10px; }
  /* Pay logos wrap without overflow */
  .pay-cta { gap:6px; }
  .pay-logos { gap:5px; }
  /* Stats smaller on very small screens */
  .stat-n { font-size:clamp(52px,14vw,80px); }
  /* Section padding tighter on mobile */
  .how-section,
  .product-section,
  .scenarios-section,
  .bezwaar-section,
  .roi-section,
  .pricing-section,
  .proof-section,
  .about-section,
  .faq-section,
  .cta-section { padding:clamp(44px,6vw,80px) 0; }
  /* Demos row full width */
  .demos-row { border-radius:var(--r-md); }
  /* Sprint banner stacks */
  .sprint-banner { flex-direction:column; }
  .sprint-acts { width:100%; }
  .sprint-acts .btn { flex:1; text-align:center; }
  /* Hero h1 breathing room */
  .hero { padding-top:clamp(40px,7vw,80px); }
}

body.nav-open .nav {
  display:flex; flex-direction:column;
  position:fixed; top:60px; left:0; right:0;
  background:rgba(7,6,10,.97);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  padding:10px 20px 18px; gap:3px; z-index:99;
}
body.nav-open .nav a { padding:11px 14px; font-size:12px; text-transform:uppercase; }

/* ── ENTERPRISE BAR ──────────────────────────────────────── */
.enterprise-bar {
  margin-top:clamp(16px,2vw,22px);
  border:1px solid var(--line2);
  border-left:3px solid var(--g);
  border-radius:var(--r-lg);
  padding:clamp(18px,2vw,26px) clamp(20px,2.5vw,36px);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  background:var(--surface);
}
.enterprise-copy h3 { font-size:15px; color:var(--text); margin-bottom:4px; }
.enterprise-copy p { font-size:13px; }

/* ── EERSTE MAAND TOTAAL ─────────────────────────────────── */
.pc-monthly-total {
  font-family:var(--f-m); font-size:11px; color:var(--muted);
  letter-spacing:.04em; margin-top:-4px;
}
.pc-monthly-total strong { color:var(--faint); }

/* ── SVG fi icons ─────────────────────────────────────────── */
.fi { width:12px; height:12px; flex-shrink:0; margin-top:3px; color:var(--g); display:block; }
.fi.n { color:var(--muted); }
.pc.featured .fi { color:rgba(255,255,255,.9); }

/* ── VERTROUWEN & PRIVACY ────────────────────────────────── */
.trust-section {
  padding:clamp(64px,7vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.trust-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(28px,3vw,44px);
}
.trust-card {
  padding:clamp(22px,2.8vw,36px);
  background:var(--surface);
  display:flex; flex-direction:column; gap:12px;
  transition:background .18s;
}
.trust-card:hover { background:var(--surface2); }
.trust-card-icon {
  width:42px; height:42px; border-radius:var(--r-md);
  background:var(--g-dim); border:1px solid var(--g-ring);
  display:grid; place-items:center; flex-shrink:0;
  color:var(--g);
}
.trust-card-icon svg { width:20px; height:20px; }
.trust-card h3 { color:var(--text); border-left:2px solid var(--g); padding-left:11px; }
.trust-card p { font-size:13px; line-height:1.65; }

/* ── ADDONS ICON SIZE FIX ─────────────────────────────────── */
.ao-icon { width:42px; height:42px; border-radius:var(--r-md);
  background:var(--g-dim); border:1px solid var(--g-ring);
  display:grid; place-items:center; flex-shrink:0; color:var(--g); }
.ao-icon svg { width:20px; height:20px; }

/* ── SC ICON SIZE ─────────────────────────────────────────── */
.sc-icon svg { width:20px; height:20px; }

/* ── PAYMENT LOGOS ────────────────────────────────────────── */
.pay-logo img { display:block; height:20px; width:auto; opacity:.55; transition:opacity .15s; filter:brightness(0); }
.pay-logo img:hover { opacity:1; }
.pay-cta .pay-logo img { filter:brightness(0); opacity:.6; }
.pay-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; align-items:center; }
.pay-row .pay-logo img { filter:brightness(0) invert(1); height:18px; }

/* ── EXTRA RESPONSIVE ─────────────────────────────────────── */
@media (max-width:980px) {
  .trust-cards { grid-template-columns:1fr; }
  .enterprise-bar { flex-direction:column; align-items:flex-start; }
}

/* ── MONO TAG (vervangt AI emoji icons) ───────────────────── */
.mono-tag {
  font-family: var(--f-m);
  font-size: 11px; font-weight: 500;
  letter-spacing: .06em; color: var(--g);
  line-height: 1;
}

/* ── WAT SECTIE ───────────────────────────────────────────── */
.wat-section {
  padding: clamp(64px,7vw,100px) 0;
  border-bottom: 1px solid var(--line);
}
.wat-grid {
  display: grid; grid-template-columns: repeat(2,1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  margin-top: clamp(28px,3vw,44px);
}
.wat-card {
  padding: clamp(22px,2.8vw,36px);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
  transition: background .18s;
}
.wat-card:hover { background: var(--surface2); }
.wat-card .mono-tag {
  font-size: 12px; color: var(--muted);
}
.wat-card h3 { color: var(--text); }
.wat-card p { font-size: 13px; line-height: 1.65; }

/* ── GESCHIKT VOOR ────────────────────────────────────────── */
.geschikt-voor {
  margin-top: clamp(20px,2.5vw,32px);
}
.tag-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.tag {
  padding: 6px 13px; border-radius: var(--r-md);
  border: 1px solid var(--line2); background: var(--surface);
  font-family: var(--f-m); font-size: 11px; color: var(--faint);
  letter-spacing: .05em;
}
.tag.tag-dim {
  color: var(--muted); background: transparent;
  border-color: var(--line);
}

/* ── VEEL GEHOORDE WENS ───────────────────────────────────── */
.wensen-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  margin-top: clamp(20px,2.5vw,30px);
}
.wens-card {
  padding: clamp(20px,2.5vw,30px);
  background: var(--surface2);
  transition: background .18s;
}
.wens-card:hover { background: var(--surface); }
.wens-q {
  font-size: clamp(14px,1.4vw,17px);
  color: var(--faint); line-height: 1.45;
  font-weight: 600; letter-spacing: -.01em;
  position:relative; padding-left:20px;
}
.wens-q::before {
  content:'"'; position:absolute; left:0; top:-2px;
  font-family:var(--f-d); font-size:22px; font-weight:800;
  color:var(--g); line-height:1;
}

/* ── CHECK ICON (pricing feats) ───────────────────────────── */
.fi-check {
  font-family: var(--f-m); font-size: 11px;
  color: var(--g); flex-shrink: 0; margin-top: 2px;
  font-weight: 500;
}
.fi-check.n { color: var(--muted); }
.pc.featured .fi-check { color: rgba(255,255,255,.9); }
.pc-feat { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--faint); }
.pc.featured .pc-feat { color: rgba(255,255,255,.85); }
.pc-feat-no { opacity: .5; }

/* ── TRUST CARD ICON overwrite ────────────────────────────── */
.trust-card-icon .mono-tag { font-size: 13px; }
.ao-icon .mono-tag { font-size: 13px; }
.sc-icon .mono-tag { font-size: 13px; }

/* ── PAYMENT LOGOS footer ─────────────────────────────────── */
.pay-logo-footer {
  opacity: .4; filter: brightness(0) invert(1);
  transition: opacity .15s; display: block; height: 18px; width: auto;
}
.pay-logo-footer:hover { opacity: .8; }

/* ── EXTRA RESPONSIVE WAT/WENSEN ─────────────────────────── */
@media (max-width:980px) {
  .wat-grid { grid-template-columns: 1fr 1fr; }
  .wensen-grid { grid-template-columns: 1fr; }
}
@media (max-width:580px) {
  .wat-grid { grid-template-columns: 1fr; }
}


/* ── ICON CONTAINERS DISABLED ────────────────────────────── */
.trust-card-icon,
.ao-icon,
.sc-icon {
  display: none;
}

/* ── AO-CARD: remove gap that icon used to fill ──────────── */
.ao-card {
  gap: 10px;
}

/* ── TRUST-CARD: tighter without icon ────────────────────── */
.trust-card {
  gap: 10px;
}

/* ── RELAY BANNER COMPACT ────────────────────────────────── */
.relay-banner-section {
  padding: clamp(24px,3vw,40px) 0;
  border-bottom: 1px solid var(--line);
}
.relay-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(20px,2.5vw,32px) clamp(22px,3vw,40px);
  border: 1px solid var(--line2);
  border-left: 3px solid rgba(255,255,255,.15);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.relay-bar-copy h3 { font-size: 16px; color: var(--text); margin-bottom: 5px; }
.relay-bar-copy p { font-size: 13px; max-width: 56ch; }
@media (max-width: 680px) {
  .relay-bar { flex-direction: column; align-items: flex-start; }
  .relay-bar .btn { width: 100%; text-align: center; }
}

/* ── FOUNDER QUOTE IN HERO ───────────────────────────────── */
.founder-quote {
  margin-top: 18px; margin-bottom: 4px;
  font-size: clamp(12px,1.1vw,13px);
  font-style: italic;
  color: var(--muted);
  max-width: 42ch;
  line-height: 1.55;
  padding-left: 11px;
  border-left: 2px solid var(--g-ring);
}

/* ── WENS-SRC bronvermelding ─────────────────────────────── */
.wens-src {
  margin-top: 9px;
  font-family: var(--f-m);
  font-size: 10px; letter-spacing: .07em;
  color: var(--muted); text-transform: uppercase;
}

/* ── FOOTER ARKEON ───────────────────────────────────────── */
.footer-arkeon {
  display: flex; align-items: center; gap: 7px;
  margin-top: 10px; margin-bottom: 4px;
}
.footer-arkeon-label {
  font-family: var(--f-m); font-size: 10px;
  color: var(--muted); letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-arkeon-name {
  font-family: var(--f-m); font-size: 11px;
  color: var(--faint); letter-spacing: .04em;
  text-decoration: none; border-bottom: 1px solid var(--line2);
  padding-bottom: 1px; transition: color .15s, border-color .15s;
}
.footer-arkeon-name:hover { color: var(--text); border-color: var(--faint); }

/* ── FAVICON SVG fallback kleur ──────────────────────────── */
/* favicon.svg wordt inline geserverd door server */



/* ==========================================================
   HOTFIX (single block) — contrast + 4 demo grid + footer logos
   Tijdelijke consolidatiepatch voor Lighthouse + UX
========================================================== */

/* 1) Globale dark-text contrast tokens */
:root{
  --muted: #8A879C;
  --faint: rgba(240,238,248,.62);
}

/* 2) 4 demo-kaarten layout */
.sc-grid{
  grid-template-columns: repeat(4, 1fr);
}

/* Nettere overgang op tablet/laptop */
@media (max-width: 1280px){
  .sc-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Bestaande mobiele breakpoint (bijv. max-width:980px -> 1fr) blijft staan */

/* 3) Footer betaal-logo's zichtbaar maken */
.footer-pay-runner img,
.pay-logo-footer{
  opacity: .9;
  filter: none;
}
.footer-pay-runner img:hover,
.pay-logo-footer:hover{
  opacity: 1;
}

/* 4) Grootste contrast-boosdoener: dim-cards dimmen alle tekst mee */
.pc.dim{
  opacity: 1;                 /* was .62 */
  background: var(--surface); /* visueel nog steeds rustig */
}

/* Niet-beschikbare features minder agressief dimmen */
.pc-feat-no{
  opacity: .82; /* was .5 */
}

/* 5) Dark theme microcopy / small text contrast omhoog */
.kicker:not(.light),
.header-phone,
.nav a,
.trust-row,
.scroll-hint,
.phone-note,
.stat-l,
.prod-img-ph,
.sc-sub,
.sc-step,
.demo-card-sub,
.bz-a,
.pricing-foot,
.proof-cta-note,
.about-body,
.about-sig,
.faq-item p,
.footer-tag,
.footer-meta,
.fc-title,
.footer-col a,
.footer-bottom-left,
.footer-arkeon-label,
.footer-arkeon-name,
.pc-price span,
.pc-monthly,
.pc-monthly-total,
.pc-credits-note,
.pc-desc,
.fi.n,
.fi-check.n,
.wens-src,
.wat-card .mono-tag,
.tag.tag-dim{
  color: var(--faint);
}

/* 6) Tiny labels / phone UI / ticker (Lighthouse pakt deze mee) */
.t-item{ color: rgba(0,255,136,.72); }
.t-item .tl{ color: rgba(0,255,136,.60); }

.p-status{ color: rgba(255,255,255,.82); }
.ptab{ color: rgba(255,255,255,.68); }
.bub-meta{ color: rgba(255,255,255,.70); }
.pi-field{ color: rgba(255,255,255,.72); }

/* 7) Hero / founder quote contrast */
.founder-quote{
  color: rgba(240,238,248,.78);
  border-left-color: rgba(0,255,136,.40);
}
.wens-q{
  color: rgba(240,238,248,.82);
}

/* 8) Pricing / tags / emphasis op donker vlak */
.pc-credits-note strong,
.pc-monthly-total strong,
.bz-a strong{
  color: rgba(240,238,248,.88);
}

.pc-feat,
.tag{
  color: rgba(240,238,248,.82);
}
/* Extra contrast patch (remaining Lighthouse hits) */
.pc-credits-note[style*="opacity"]{
  opacity: .9 !important;
}

/* CTA light section text contrast */
.cta-section.section-light .cta-eyebrow,
.cta-section.section-light .lead,
.cta-section.section-light p,
.cta-section.section-light .cta-note,
.cta-section.section-light .muted{
  color: rgba(18,16,28,.78) !important;
}
/* Product visuals (3 kaarten) — behoud HTML width/height voor Lighthouse, voorkom vervorming */
.prod-img img{
  width: 100%;
  height: auto !important;
  display: block;
}

/* ==========================================================
   MOBILE STABILIZATION + PREP FOR SCENARIO ACCORDION
   (append-only patch)
========================================================== */

@media (max-width: 480px) {
  /* =========================
     HEADER (menu houden, CTA's weg)
     ========================= */
  .header-inner {
    min-width: 0;
    gap: 10px;
  }

  .header-inner > * {
    min-width: 0;
  }

  /* Alleen header CTA buttons uit; menu-toggle blijft zichtbaar */
  .header-cta > .btn,
  .header-cta .btn-primary,
  .header-cta .btn-ghost {
    display: none !important;
  }

  .brand {
    min-width: 0;
    gap: 8px;
  }

  .brand-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-toggle {
    flex-shrink: 0;
  }

  /* =========================
     WA FLOAT binnen viewport
     ========================= */
  .wa-float {
    left: auto !important;
    right: 12px !important;
    bottom: 84px !important;
    transform: none !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* =========================
     HERO layout + announcement
     ========================= */
  .hero .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .hero {
    padding-top: clamp(34px, 6vw, 56px);
  }

  .hero-pill {
    display: flex;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    line-height: 1.22;
    font-size: 12px;
    letter-spacing: .05em;
    padding: 8px 12px;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
  }

  /* =========================
     HERO H1 (zonder content rewrite)
     - "professioneel" (accent) blijft groen
     ========================= */
  .hero h1 {
    font-size: clamp(23px, 7.85vw, 37px) !important;
    line-height: 0.97 !important;
    letter-spacing: -0.004em !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;

    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* Groene woord (accent = "professioneel") subtiel compacter op mobiel */
  .hero h1 .accent {
    color: var(--g) !important;
    display: inline-block;
    white-space: nowrap;
    line-height: inherit;
    vertical-align: baseline;

    font-size: 0.88em;
    letter-spacing: -0.002em;
    transform: scaleX(0.93);
    transform-origin: left center;
  }

  .hero .lead {
    max-width: 100%;
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-acts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
  }

  .hero-acts .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
  }

  /* Phone mockup centreren */
  .phone-col {
    align-items: center;
    justify-content: center;
    margin-top: 18px;
  }

  .phone-shell {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* =========================
     SCENARIO'S (fallback nu: 1 kolom i.p.v. rare 2-col breuken)
     ========================= */
  .sc-grid {
    grid-template-columns: 1fr !important;
    gap: 1px;
  }

  .sc-card,
  .sc-card > * {
    min-width: 0;
  }

  .sc-card h3 {
    font-size: 18px;
    line-height: 1.12;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    overflow: visible;
  }

  .sc-sub,
  .sc-card > p,
  .sc-step {
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
  }

  .sc-acts {
    gap: 8px;
    flex-wrap: wrap;
  }

  .sc-acts .btn {
    font-size: 12px;
    min-height: 44px;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.15;
  }

  /* =========================
     ROI (safeguards)
     ========================= */
  .roi-form .roi-inp {
    font-size: 16px;
    padding: 10px 12px;
    min-width: 0;
  }

  .roi-result-card {
    min-width: 0;
    overflow: hidden;
  }

  .roi-out-n {
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.02;
  }

  .roi-out-n.total {
    font-size: clamp(34px, 9vw, 52px);
  }

  /* =========================
     FOOTER (minder lege lucht)
     ========================= */
  .footer {
    padding-top: 34px;
  }

  .footer-top {
    gap: 22px;
  }

  .footer-tag {
    margin-bottom: 10px;
  }

  .footer-meta {
    line-height: 1.7;
  }

  .footer-divider {
    margin-top: 24px;
  }

  .footer-bottom {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 10px;
  }

  /* =========================
     PREP: mobile scenario accordion styles (nog geen gedrag)
     - Wordt actief zodra jij .sc-accordion markup toevoegt in index
     ========================= */
  .sc-accordion {
    display: block;
    margin-top: 0;
  }

  .sc-acc-item {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    overflow: clip;
    margin-bottom: 10px;
  }

  .sc-acc-head {
    width: 100%;
    display: grid;
    grid-template-columns: 4px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .sc-acc-head:focus-visible {
    outline: 2px solid rgba(30,255,139,.45);
    outline-offset: 2px;
  }

  .sc-acc-accent {
    width: 4px;
    height: 42px;
    border-radius: 99px;
    background: var(--g);
    box-shadow: 0 0 16px rgba(30,255,139,.25);
  }

  .sc-acc-titlewrap {
    min-width: 0;
  }

  .sc-acc-title {
    display: block;
    font-size: 18px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .sc-acc-sub {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: normal;
  }

  .sc-acc-chevron {
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
    flex-shrink: 0;
  }

  .sc-acc-chevron::before {
    content: "⌄";
    font-size: 16px;
    line-height: 1;
    transform: translateY(-1px);
  }

  .sc-acc-panel {
    display: none;
    padding: 0 14px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.04);
  }

  .sc-acc-item.is-open .sc-acc-panel {
    display: block;
  }

  .sc-acc-item.is-open .sc-acc-chevron {
    transform: rotate(180deg);
    color: var(--text);
    border-color: rgba(30,255,139,.25);
  }

  .sc-acc-panel p {
    margin: 10px 0 0;
  }

  .sc-acc-steps {
    margin: 10px 0 0;
    display: grid;
    gap: 8px;
  }

  .sc-acc-step {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 8px;
    align-items: start;
    color: var(--muted);
  }

  .sc-acc-step > b {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    display: grid;
    place-items: center;
    font-size: 11px;
    color: var(--text);
  }

  .sc-acc-acts {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .sc-acc-acts .btn {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
    white-space: normal;
    line-height: 1.15;
    justify-content: center;
  }
}

/* <=380px */
@media (max-width: 380px) {
  .hero .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero h1 {
    font-size: clamp(22px, 7.45vw, 34px) !important;
    letter-spacing: -0.003em !important;
    line-height: 0.98 !important;
  }

  .hero h1 .accent {
    font-size: 0.86em;
    transform: scaleX(0.91);
    letter-spacing: -0.001em;
  }

  .hero-pill {
    font-size: 11px;
    letter-spacing: .04em;
  }

  /* Footer 2x2 op mobiel behouden */
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    padding-right: 0;
  }

  /* Accordion CTA's onder elkaar op small screens */
  .sc-acc-acts {
    grid-template-columns: 1fr;
  }
}

/* Alleen op echt mini scherm terug naar 1 kolom footer */
@media (max-width: 320px) {
  .footer-top {
    grid-template-columns: 1fr !important;
  }
}

/* === hidden attribute hard-fix (must win) === */
#sectoren .sc-grid[hidden],
#sectoren #sc-accordion-mobile[hidden],
#sectoren .sc-acc-panel[hidden] {
  display: none !important;
}

/* Desktop/tablet: accordion altijd uit */
@media (min-width: 481px) {
  #sectoren #sc-accordion-mobile {
    display: none !important;
  }
}

/* Mobiel: accordion zichtbaar als JS hidden=false zet */
@media (max-width: 480px) {
  #sectoren #sc-accordion-mobile:not([hidden]) {
    display: block !important;
  }
}

/* === HERO H1 final sizing (fills width better on mobile) === */
@media (max-width: 480px) {
  .hero .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero h1 {
    /* groter dan nu, maar nog veilig voor "professioneel" */
    font-size: clamp(28px, 9.4vw, 44px) !important;
    line-height: 0.91 !important;
    letter-spacing: -0.010em !important;
    margin-bottom: 14px !important;

    max-width: 100% !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* groene woord blijft groen + net iets compacter zodat het past */
  .hero h1 .accent {
    color: var(--g) !important;
    display: inline-block;
    white-space: nowrap;
    font-size: 0.93em !important;
    letter-spacing: -0.006em !important;
    transform: scaleX(0.95);
    transform-origin: left center;
    line-height: inherit;
  }

  /* lead iets compacter zodat hero visueel sterker blijft */
  .hero .lead {
    font-size: 14px !important;
    line-height: 1.45 !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    font-size: clamp(26px, 8.9vw, 40px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.008em !important;
  }

  .hero h1 .accent {
    font-size: 0.91em !important;
    transform: scaleX(0.93);
    letter-spacing: -0.004em !important;
  }
}