/* ── Reset & tokens ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg0: #060d1a;
  --bg1: #0c1526;
  --bg2: #111d35;
  /* Achtergrond van de afwisselende secties. Apart van --bg1, dat ook de
     invoervelden vult; die moeten juist donkerder blijven dan hun sectie. */
  --bg-alt: #0e1930;
  /* Scheidslijn tussen secties. Op bijna zwart haalt kleurverschil het niet:
     tussen #060d1a en #0c1526 zit een contrast van 1,07, en zelfs een flinke
     sprong komt niet boven 1,33. Over zeventien schermen leest de pagina dan
     als een aaneengesloten vlak. Een haarlijn doet wat de vulling niet kan. */
  --sectie-lijn: rgba(148,163,184,.14);
  --bg3: #1a2848;
  --card: #172034;
  --card2: #1e2d47;
  --border: rgba(99,102,241,.18);
  --border2: rgba(255,255,255,.06);
  --ind: #6366f1;
  --ind2: #818cf8;
  --ind3: #4f46e5;
  --vio: #8b5cf6;
  --sky: #38bdf8;
  --grn: #34d399;
  --amb: #fbbf24;
  --rose: #f87171;
  --text: #f0f4ff;
  /* Zachte tekst in een zandtint (afgeleid van --zand-200 uit de app) in plaats
     van koud slate-grijs: de site leest warmer en voelt als familie van het
     ingelogde deel, dat op zand staat. Alleen deze twee; kaarten, randen en
     indigo blijven koel, anders verliest het accent zijn tegenhanger. */
  --text2: #c6beae;
  --text3: #8f8779;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 24px 64px rgba(0,0,0,.55);
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg0);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; height: 60px;
  background: rgba(6,13,26,.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border2);
  transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: rgba(99,102,241,.28); }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* 40px: op 26px was de ingebakken slogan 4,9px hoog en niet te lezen. De balk is
   60px, dus hier past het logo met 10px lucht boven en onder. */
.nav-logo img { height: 40px; }
.nav-logo-name { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.3px; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 13px; color: var(--text2); text-decoration: none; font-weight: 500; transition: color .15s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.btn-ghost { font-size: 13px; font-weight: 500; color: var(--text2); text-decoration: none; padding: 7px 14px; border-radius: 8px; transition: color .15s, background .15s; }
.btn-ghost:hover { color: var(--text); background: var(--border2); }
.btn-ind {
  font-size: 13px; font-weight: 600; color: #fff; text-decoration: none;
  padding: 8px 18px; border-radius: 8px;
  background: linear-gradient(135deg, var(--ind), var(--ind3));
  transition: opacity .15s, transform .12s;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
}
.btn-ind:hover { opacity: .88; transform: translateY(-1px); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 24px 80px;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(99,102,241,.18) 0%, transparent 70%),
              var(--bg0);
}
.hero-bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(120px, 18vw, 220px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(99,102,241,.07);
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
/* ── Section background words ─────────────────────────────── */
.section { position: relative; overflow: hidden; }
.section-inner { position: relative; z-index: 1; }
.sbg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(100px, 15vw, 200px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(99,102,241,.065);
  paint-order: stroke fill;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.sbg-top    { top: -10px; }
.sbg-mid    { top: 50%; transform: translate(-50%, -50%); }
.sbg-bottom { bottom: -10px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.25);
  color: var(--ind2); padding: 5px 14px 5px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin-bottom: 28px; letter-spacing: .02em;
  position: relative;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ind); animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.8); } }

.hero-title {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800; letter-spacing: -2px; line-height: 1.07;
  text-align: center; max-width: 860px;
  color: var(--text);
}
.hero-title span {
  background: linear-gradient(135deg, var(--ind2) 0%, var(--vio) 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  margin-top: 22px;
  font-size: clamp(15px, 2vw, 19px); color: var(--text2); text-align: center;
  max-width: 580px; line-height: 1.65;
}
.hero-actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.btn-hero {
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 14px 30px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ind) 0%, var(--vio) 100%);
  box-shadow: 0 8px 32px rgba(99,102,241,.4);
  transition: transform .15s, box-shadow .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(99,102,241,.5); }
.btn-hero-ghost {
  font-size: 15px; font-weight: 600; color: var(--text2); text-decoration: none;
  padding: 14px 28px; border-radius: 12px;
  border: 1.5px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.btn-hero-ghost:hover { color: var(--text); border-color: var(--ind); background: rgba(99,102,241,.05); }
.hero-trial { margin-top: 14px; font-size: 12px; color: var(--text3); position: relative; }

/* floating cards */
/* Vier kaarten naast elkaar met vaste tussenruimte; de verspringing komt uit de
   bovenmarge, niet uit absolute posities, zodat ze elkaar op geen enkele breedte overlappen. */
.float-area {
  position: relative; width: 100%; max-width: 960px; margin-top: 64px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.fc {
  position: relative; flex: 0 1 auto; min-width: 0; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow);
}
.fc-match { width: 220px; margin-top: 10px; animation: floatA 6s ease-in-out infinite; }
.fc-pipeline { width: 230px; margin-top: -20px; animation: floatB 7s ease-in-out infinite; }
.fc-cv { width: 210px; margin-top: 14px; animation: floatC 5.5s ease-in-out infinite; }
.fc-kpi { width: 160px; margin-top: -5px; animation: floatA 6.5s ease-in-out infinite reverse; }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatB { 0%,100%{transform:translateY(-5px)} 50%{transform:translateY(5px)} }
@keyframes floatC { 0%,100%{transform:translateY(4px)} 50%{transform:translateY(-8px)} }

.fc-label { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text3); text-transform: uppercase; margin-bottom: 10px; }
.fc-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.fc-sub { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.fc-score-row { display: flex; align-items: center; gap: 8px; }
.fc-score-pct { font-size: 20px; font-weight: 800; color: var(--ind2); }
.fc-score-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.fc-score-fill { height: 100%; background: linear-gradient(90deg, var(--ind), var(--vio)); border-radius: 2px; }
.fc-skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.fc-tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; }
.fc-tag-match { background: rgba(99,102,241,.15); color: var(--ind2); }
.fc-tag-miss { background: rgba(239,68,68,.1); color: #f87171; }
.pipe-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pipe-label { font-size: 11px; color: var(--text2); width: 72px; }
.pipe-bar { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.pipe-fill { height: 100%; border-radius: 3px; }
.kpi-val { font-size: 22px; font-weight: 800; color: var(--grn); margin: 4px 0; }
.kpi-lbl { font-size: 11px; color: var(--text2); }
.kpi-delta { font-size: 10px; font-weight: 600; color: var(--grn); margin-top: 4px; }
.cv-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.cv-item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ind); flex-shrink: 0; margin-top: 4px; }
.cv-item-txt { font-size: 11px; color: var(--text2); line-height: 1.4; }

/* ── Section wrapper ─────────────────────────────────────── */
.section { padding: 96px 24px; }
.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--sectie-lijn);
  border-bottom: 1px solid var(--sectie-lijn);
}
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ind2); margin-bottom: 14px;
}
.section-title {
  font-size: clamp(28px, 4vw, 46px); font-weight: 800; letter-spacing: -1.5px;
  line-height: 1.1; color: var(--text); margin-bottom: 16px;
}
.section-sub { font-size: 17px; color: var(--text2); max-width: 560px; line-height: 1.65; }
.section-center { text-align: center; }
.section-center .section-sub { margin: 0 auto; }

/* ── Feature grid ────────────────────────────────────────── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 56px;
}
.feat-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 28px 28px 32px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.feat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ind), var(--vio));
  opacity: 0; transition: opacity .2s;
}
.feat-card:hover { border-color: var(--border); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.3); }
.feat-card:hover::before { opacity: 1; }
.feat-icon {
  width: 44px; height: 44px; border-radius: 10px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.feat-icon-ind { background: rgba(99,102,241,.15); }
.feat-icon-vio { background: rgba(139,92,246,.15); }
.feat-icon-sky { background: rgba(56,189,248,.12); }
.feat-icon-grn { background: rgba(52,211,153,.12); }
.feat-icon-amb { background: rgba(251,191,36,.12); }
.feat-icon-rose { background: rgba(248,113,113,.12); }
.feat-card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -.3px; }
.feat-card p { font-size: 14px; color: var(--text2); line-height: 1.6; }

/* Rollen: zelfde kaart als de features, met een lijst rechten eronder */
.rol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.rol-card {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  padding: 24px; transition: border-color .15s, transform .15s;
}
.rol-card:hover { border-color: var(--border); transform: translateY(-3px); }
.rol-top { display: flex; align-items: center; gap: 10px; }
.rol-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.rol-naam { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.rol-tag { display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.rol-desc { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-top: 10px; }
.rol-rechten { list-style: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border2); display: flex; flex-direction: column; gap: 6px; }
.rol-rechten li { font-size: 12.5px; color: var(--text3); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.rol-rechten li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ind); flex-shrink: 0; margin-top: 7px; }

/* Eigen omgeving en beveiliging */
.iso-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.iso-card { background: var(--bg2); border: 1px solid var(--border2); border-radius: 14px; padding: 22px 20px; }
.iso-icon { font-size: 20px; margin-bottom: 10px; }
.iso-kop { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.iso-body { font-size: 13px; color: var(--text2); line-height: 1.6; }
.iso-adres {
  margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text2);
}
.iso-url {
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 13px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 14px;
}

/* Voorstelpakket: kaart met de gegevens die op de aanbieding komen */
.vs-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border2); }
.vs-avatar { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--ind), var(--vio)); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.vs-naam { font-size: 15px; font-weight: 700; color: var(--text); }
.vs-rol { font-size: 12.5px; color: var(--text3); margin-top: 2px; }
.vs-rij { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border2); font-size: 13px; }
.vs-rij:last-of-type { border-bottom: none; }
.vs-sleutel { color: var(--text3); }
.vs-waarde { color: var(--text); font-weight: 600; }
.vs-bijlagen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border2); display: flex; gap: 8px; flex-wrap: wrap; }
.vs-bijlage { font-size: 11.5px; font-weight: 600; color: var(--text2); background: rgba(255,255,255,.04); border: 1px solid var(--border2); border-radius: 8px; padding: 5px 10px; }

@media (max-width: 900px) {
  .rol-grid { grid-template-columns: repeat(2, 1fr); }
  .iso-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .rol-grid, .iso-grid { grid-template-columns: 1fr; }
}

/* ── Deep-dive duo sections ──────────────────────────────── */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.duo.flip { direction: rtl; }
.duo.flip > * { direction: ltr; }
.duo-copy { display: flex; flex-direction: column; }
.duo-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.duo-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text2); line-height: 1.6; }
.duo-list li::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(99,102,241,.15); flex-shrink: 0; margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' stroke='%236366f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.duo-visual {
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px; box-shadow: var(--shadow);
  min-height: 360px; display: flex; flex-direction: column; gap: 14px;
}

/* ── Match demo ──────────────────────────────────────────── */
.match-candidate {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 10px; padding: 14px 16px;
  display: flex; gap: 14px; align-items: center;
}
.mc-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ind), var(--vio));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.mc-info { flex: 1; min-width: 0; }
.mc-name { font-size: 13px; font-weight: 600; color: var(--text); }
.mc-role { font-size: 11px; color: var(--text2); margin-top: 1px; }
.mc-score-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mc-bar { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.mc-fill { height: 100%; background: linear-gradient(90deg, var(--ind), var(--vio)); border-radius: 2px; }
.mc-pct { font-size: 13px; font-weight: 700; color: var(--ind2); }
.mc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.tag { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 4px; }
.tag-m { background: rgba(99,102,241,.15); color: var(--ind2); }
.tag-x { background: rgba(248,113,113,.12); color: #f87171; }
.tag-g { background: rgba(52,211,153,.12); color: var(--grn); }

/* ── CV-analyse demo ─────────────────────────────────────── */
.cv-score-ring { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.cv-score-ring svg { transform: rotate(-90deg); }
.cv-score-ring-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; color: var(--text);
}
.cv-suggestion {
  background: var(--card); border: 1px solid var(--border2); border-radius: 10px;
  padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start;
}
.sug-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.sug-hi { background: rgba(251,191,36,.15); }
.sug-lo { background: rgba(52,211,153,.12); }
.sug-title { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.sug-body { font-size: 11px; color: var(--text2); line-height: 1.5; }
.sug-apply { font-size: 11px; font-weight: 600; color: var(--ind2); margin-top: 4px; }

/* ── Pipeline demo ───────────────────────────────────────── */
.pipeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pipeline-h-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pipeline-h-val { font-size: 13px; font-weight: 700; color: var(--grn); }
.pipeline-stage { margin-bottom: 8px; }
.ps-top { display: flex; justify-content: space-between; margin-bottom: 4px; }
.ps-name { font-size: 11px; font-weight: 500; color: var(--text2); }
.ps-count { font-size: 11px; font-weight: 700; color: var(--text); }
.ps-bar { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.ps-fill { height: 100%; border-radius: 3px; }
.placement-row {
  background: var(--card); border: 1px solid var(--border2); border-radius: 8px;
  padding: 10px 14px; display: flex; align-items: center; gap: 12px;
}
.pl-avi { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #0ea5e9, #6366f1); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.pl-info { flex: 1; }
.pl-name { font-size: 12px; font-weight: 600; color: var(--text); }
.pl-detail { font-size: 11px; color: var(--text2); }
.pl-status { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgba(52,211,153,.12); color: var(--grn); }

/* ── Skill market demo ───────────────────────────────────── */
.sm-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sm-skill { font-size: 12px; font-weight: 500; color: var(--text); width: 100px; flex-shrink: 0; }
.sm-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sm-bar-wrap { display: flex; gap: 3px; align-items: center; }
.sm-bar-lbl { font-size: 9px; color: var(--text3); width: 38px; flex-shrink: 0; }
.sm-bar-track { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.sm-bar-fill { height: 100%; border-radius: 3px; }
.sm-fill-d { background: var(--ind); }
.sm-fill-s { background: var(--grn); }
.sm-gap-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }

/* ── Stats bar ───────────────────────────────────────────── */
/* Drie stoelen onder de hero: het gat per rol, en wat Workrlab ervan maakt */
.stoelen { padding: 0 24px 72px; position: relative; z-index: 1; }
.stoelen-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stoel {
  background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px;
}
.stoel-rol { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ind2); }
.stoel p { font-size: 14px; line-height: 1.6; margin: 0; }
.stoel-nu { color: var(--text2); }
.stoel-straks { color: var(--text); padding-top: 14px; border-top: 1px solid var(--border2); }
.stoel p span {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; margin-right: 8px; vertical-align: 1px;
}
.stoel-nu span { color: var(--text3); background: rgba(255,255,255,.05); }
.stoel-straks span { color: var(--ind2); background: rgba(99,102,241,.15); }
@media (max-width: 900px) { .stoelen-inner { grid-template-columns: 1fr; } }

.stats-bar {
  background: var(--bg1); border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2);
  padding: 40px 24px;
}
.stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; }
.stat-val { font-size: 36px; font-weight: 800; letter-spacing: -1.5px; color: var(--text); line-height: 1; margin-bottom: 6px; }
.stat-val span { background: linear-gradient(135deg, var(--ind2), var(--vio)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.stat-lbl { font-size: 13px; color: var(--text2); }

/* ── Pricing ─────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; max-width: 780px; margin-left: auto; margin-right: auto; }
.plan-card {
  background: var(--card); border: 1px solid var(--border2); border-radius: 18px; padding: 32px 28px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan-card.featured {
  border-color: var(--ind); background: linear-gradient(160deg, rgba(99,102,241,.1), var(--card) 60%);
  box-shadow: 0 0 0 1px var(--ind), 0 24px 64px rgba(99,102,241,.2);
}
.plan-badge {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg, var(--ind), var(--vio));
  color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 99px;
  letter-spacing: .04em;
}
.plan-name { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.plan-tag { font-size: 13px; color: var(--text2); margin-bottom: 24px; line-height: 1.5; }
.plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 6px; }
.plan-price-curr { font-size: 20px; font-weight: 600; color: var(--text2); }
.plan-price-val { font-size: 44px; font-weight: 800; letter-spacing: -2px; color: var(--text); line-height: 1; }
.plan-price-per { font-size: 13px; color: var(--text3); }
.plan-price-vat {
  font-size: 11px; font-weight: 600; color: var(--text2); margin-left: 8px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 99px; white-space: nowrap;
}
.plan-billing { font-size: 12px; color: var(--text3); margin-bottom: 20px; }
.prijs-faq { max-width: 960px; margin: 56px auto 0; position: relative; z-index: 1; }
.prijs-faq h3 { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; letter-spacing: -.3px; margin-bottom: 6px; }
.prijs-faq-sub { font-size: 13px; color: var(--text3); text-align: center; margin-bottom: 22px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--text3); font-weight: 400; font-size: 18px; line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding: 0 18px 16px; margin: 0; font-size: 13px; color: var(--text2); line-height: 1.65; }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }
.plan-seats { display: flex; gap: 8px; margin-bottom: 24px; }
.plan-seat {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 10px;
  background: rgba(99,102,241,.06); border: 1px solid var(--border2);
}
.plan-card.featured .plan-seat { background: rgba(99,102,241,.12); border-color: rgba(99,102,241,.25); }
.plan-seat-num { font-size: 18px; font-weight: 800; letter-spacing: -.5px; color: var(--text); line-height: 1; }
.plan-seat-lbl { font-size: 10px; color: var(--text3); text-align: center; line-height: 1.3; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; flex: 1; }
/* Het vinkje staat absoluut, zodat de regel zelf gewoon lopende tekst blijft.
   Als flexcontainer werd elk stuk tekst en elk inline element een eigen flexitem
   met tussenruimte: 'CV-analyse (15 per maand) & aanbiedingspakket' viel daardoor
   uiteen in drie losse blokken naast elkaar. */
.plan-features li { font-size: 13px; color: var(--text2); position: relative; padding-left: 26px; }
.plan-features li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  background: rgba(99,102,241,.15) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l3.5 3.5L13 4.5' stroke='%236366f1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  border-radius: 50%;
}
.plan-cta {
  display: block; text-align: center; font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 13px 20px; border-radius: 10px; border: 1.5px solid var(--border);
  color: var(--text2); transition: all .15s;
}
.plan-cta:hover { border-color: var(--ind); color: var(--ind2); background: rgba(99,102,241,.05); }
.plan-card.featured .plan-cta {
  background: linear-gradient(135deg, var(--ind), var(--ind3));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(99,102,241,.35);
}
.plan-card.featured .plan-cta:hover { opacity: .88; }

/* ── CTA bottom ──────────────────────────────────────────── */
.cta-section {
  padding: 100px 24px;
  background: var(--bg0);
  text-align: center;
}
.cta-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  filter: brightness(.62) saturate(.9);
  transform: scale(1.02);
}
.cta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,6,18,.55) 0%, rgba(2,6,18,.45) 50%, rgba(2,6,18,.65) 100%);
  pointer-events: none;
}
.cta-title { font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -2px; color: #fff; line-height: 1.1; margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.cta-sub { font-size: 17px; color: rgba(255,255,255,.85); margin-bottom: 36px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  padding: 40px 24px; border-top: 1px solid var(--border2);
}
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
/* Even hoog als de twee regels tekst ernaast; op 22px was het logo een vlek. */
.footer-logo { height: 34px; }
.footer-copy { font-size: 13px; color: var(--text3); }
.footer-bedrijf { font-size: 12px; color: var(--text3); opacity: .75; margin-top: 3px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 13px; color: var(--text3); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: var(--text2); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 40px; }
  .duo.flip { direction: ltr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .float-area { display: none; }
}
/* ── Hamburger ───────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: rgba(255,255,255,.8);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Na de basisregel, anders wint 'display: none' en heeft mobiel geen menu */
/* Tien menu-items (Werkwijze, Voorstel en Markt erbij): tot 1200 pixels iets compacter,
   en onder 1100 pixels het menu achter de hamburger, anders braken 'AI-matching' en
   'CV-analyse' op het streepje en liep de balk tegen de knoppen aan. */
@media (max-width: 1200px) { .nav-links { gap: 16px; } .nav-links a { font-size: 12.5px; } }
@media (max-width: 1100px) { .nav-links { display: none; } .nav-hamburger { display: flex; } }
@media (max-width: 600px) {
  .nav-cta .btn-ghost { display: none; }  /* staat ook in het menu */
  .btn-ind { white-space: nowrap; padding: 8px 12px; font-size: 12px; }
}
/* ── Mobile drawer ───────────────────────────────────────── */
.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: #0c1526;
  border-bottom: 1px solid rgba(99,102,241,.2);
  padding: 16px 24px 24px;
  z-index: 998;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer a {
  display: block;
  padding: 12px 0;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .15s;
}
.nav-mobile-drawer a:hover { color: #fff; }
.nav-mobile-drawer .mob-cta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: none;
  padding: 0;
}
.nav-mobile-drawer .mob-cta a {
  text-align: center;
  border-bottom: none;
  padding: 11px;
  border-radius: 8px;
  font-weight: 700;
}
.nav-mobile-drawer .mob-cta .btn-ghost-mob { border: 1px solid rgba(255,255,255,.2); }
.nav-mobile-drawer .mob-cta .btn-ind-mob { background: var(--ind); color: #fff; }
@media (max-width: 600px) {
  .nav { padding: 0 20px; }
  /* Op een telefoon moet het logo de knop en het hamburgermenu ernaast ruimte
     laten: op 40px bleef op een scherm van 375px nog 13px over, en daaronder
     raken ze elkaar. Op 32px is het logo 123px breed en past alles. */
  .nav-logo img { height: 32px; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
}

/* ── Reveal animation ────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.rd1 { transition-delay: .07s; } .rd2 { transition-delay: .14s; } .rd3 { transition-delay: .21s; }
.rd4 { transition-delay: .28s; } .rd5 { transition-delay: .35s; }


/* ── Subpagina's in dezelfde stijl (contact) ─────────────── */
.page { padding: 132px 24px 96px; position: relative; overflow: hidden; }
.page-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.contact-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: start; margin-top: 44px; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.veld label { font-size: 12px; font-weight: 600; color: var(--text2); letter-spacing: .02em; }
.veld label em { color: var(--rose); font-style: normal; }
.veld input, .veld select, .veld textarea {
  width: 100%; background: var(--bg1); border: 1px solid var(--border2); border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 14px; padding: 11px 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--ind); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.veld select option { background: var(--bg2); color: var(--text); }
.veld textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contact-voet p { font-size: 12px; color: var(--text3); max-width: 420px; line-height: 1.6; }
.contact-voet a { color: var(--ind2); font-weight: 600; text-decoration: none; }
button.btn-hero { border: 0; cursor: pointer; font: inherit; font-size: 14px; }
.melding { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text); }
.melding strong { display: block; font-size: 14px; margin-bottom: 2px; }
.melding-ok { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.3); }
.melding-fout { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.3); }
.melding-ico { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.melding-ok .melding-ico { background: rgba(52,211,153,.18); color: var(--grn); }
.melding-fout .melding-ico { background: rgba(248,113,113,.18); color: var(--rose); }
.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.info-kaart { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius); padding: 20px 22px; }
.info-kaart-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(99,102,241,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--ind2); font-size: 15px; }
.info-kaart h3 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.info-kaart p { font-size: 13px; color: var(--text2); line-height: 1.6; }
.info-kaart a { color: var(--ind2); font-weight: 600; text-decoration: none; }
.info-kaart a:hover { color: var(--text); }
@media (max-width: 860px) {
  .page { padding-top: 110px; }
  .contact-grid { grid-template-columns: 1fr; }
  .veld-rij { grid-template-columns: 1fr; }
}

/* ── Over Workrlab ───────────────────────────────────────── */
.over-verhaal { max-width: 680px; margin: 48px auto 0; }
.over-verhaal h2 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; color: var(--text); margin: 40px 0 12px; }
.over-verhaal h2:first-child { margin-top: 0; }
.over-verhaal p { font-size: 16px; line-height: 1.75; color: var(--text2); margin-bottom: 16px; }
.over-verhaal p strong { color: var(--text); font-weight: 600; }
.over-quote {
  margin: 28px 0; padding: 18px 22px; border-left: 3px solid var(--ind);
  background: rgba(99,102,241,.07); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 16px; line-height: 1.7; color: var(--text);
}
.over-kaart { background: var(--card); border: 1px solid var(--border2); border-radius: var(--radius); padding: 20px 22px; }
.over-kaart-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.over-kaart-label.rol { color: var(--ind2); }
.over-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1100px; margin: 24px auto 0; }
.over-kaart p { font-size: 14px; line-height: 1.6; color: var(--text2); }
.over-kaart p strong { color: var(--text); font-weight: 600; }
.over-principes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 960px; margin: 24px auto 0; }
.over-oprichter { max-width: 680px; margin: 24px auto 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start; }
.over-initiaal { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--ind), var(--vio)); }
.over-oprichter h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.over-oprichter .rol { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
.over-oprichter p { font-size: 14px; line-height: 1.65; color: var(--text2); }
.over-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
@media (max-width: 900px) { .over-rollen { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .over-principes { grid-template-columns: 1fr; } }