/* Recruitmentmarketing landing — extends site.css + pages.css. */

/* ── Hero accent ─────────────────────────────────────────── */
.rec-hero { padding: 168px 0 64px; }
.rec-hero__proof { display: flex; align-items: center; gap: 18px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--border); }
.rec-hero__proof strong { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 3vw, 40px); letter-spacing: -0.03em; color: var(--volt); line-height: 1; flex-shrink: 0; }
.rec-hero__proof span { font-size: 15px; line-height: 1.45; color: var(--fg-2); max-width: 440px; }
.rec-hero__note { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--fg-3); margin: 22px 0 0; }

/* ── Cases · volt interruption panel (homepage-vocabulaire) ─ */
.rec-cases { background: var(--volt); color: var(--bone-on-ink); padding: 130px 0 150px; position: relative; overflow: hidden; }
.rec-cases::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,0.14), transparent 55%); pointer-events: none; }
.rec-cases .container { position: relative; z-index: 1; }
.rec-cases .cases__head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.rec-cases .eyebrow { color: rgba(255,255,255,0.75); justify-content: center; }
.rec-cases .eyebrow::before { background: #fff; }
.rec-cases .cases__title { color: var(--bone-on-ink); }
.rec-cases .cases__head em { color: var(--hot); font-style: italic; }
.rec-cases .cases__lead { color: rgba(255,255,255,0.85); }
.rec-cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Horizontale scroll-rail binnen volt-paneel — fade alleen aan de uiterste randen */
.rec-cases .cases__grid { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 0 20px; margin: 0 calc(50% - 50vw); padding-left: max(32px, calc(50vw - 640px)); padding-right: max(32px, calc(50vw - 640px)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); }
.rec-cases .cases__grid::-webkit-scrollbar { display: none; }
.rec-cases .cases__grid .ccard { width: 340px; flex: 0 0 340px; scroll-snap-align: start; cursor: default; }
@media (max-width: 600px) { .rec-cases .cases__grid .ccard { width: 280px; flex-basis: 280px; } }
.rec-cases .ccard { background: var(--bone-light); border: 1px solid rgba(255,255,255,0.2); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; color: var(--ink); transition: transform var(--dur) var(--ease); }
.rec-cases .ccard__logo { height: 38px; margin-bottom: 20px; display: flex; align-items: center; }
.rec-cases .ccard__logo image-slot { width: 116px; height: 38px; display: block; }
.rec-cases .ccard__logo img { max-height: 38px; max-width: 116px; width: auto; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.85; }
.rec-cases .ccard:hover { transform: translateY(-4px); }
.rec-cases .ccard__industry { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.rec-cases .ccard__industry::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.rec-cases .ccard__name { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.rec-cases .ccard__desc { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin-bottom: 24px; }
.rec-cases .ccard__stats { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rec-cases .ccard__stat { display: flex; flex-direction: column; gap: 4px; }
.rec-cases .ccard__stat-v { font-family: var(--font-display); font-weight: 900; font-size: 28px; letter-spacing: -0.025em; color: var(--volt); line-height: 1; }
.rec-cases .ccard__stat-v--text { font-size: 18px; }
.rec-cases .ccard__stat-l { font-size: 12px; color: var(--fg-3); line-height: 1.35; }
@media (max-width: 900px) { .rec-cases { padding: 88px 0 96px; } .rec-cases__grid { grid-template-columns: 1fr; } }

/* Hero phone */
.rec-phone-wrap { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.rec-phone-wrap::before { content: ''; position: absolute; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(112,0,255,0.20), transparent 62%); filter: blur(30px); }
.rec-phone { position: relative; width: 280px; aspect-ratio: 9 / 19.5; background: linear-gradient(145deg, #3a3a3e, #1b1b1e 30%, #101012); border-radius: 50px; padding: 7px; box-shadow: 0 40px 80px -30px rgba(10,10,10,0.55), 0 0 0 2px rgba(255,255,255,0.04) inset; transform: rotate(-4deg); }
.rec-phone__notch { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); width: 76px; height: 20px; background: #000; border-radius: 999px; z-index: 3; }
.rec-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: linear-gradient(160deg, #1a1a22, #0b0b0f); display: flex; align-items: center; justify-content: center; }
.rec-phone__screen video, .rec-phone__screen image-slot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec-phone__hint { position: relative; z-index: 1; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); line-height: 1.6; padding: 0 20px; }
/* Fake ad UI overlay so the phone reads as a scrolling feed even without video */
.rec-phone__ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 16px 22px; background: linear-gradient(to top, rgba(10,10,10,0.72), transparent 55%); pointer-events: none; }
.rec-phone__badge { align-self: flex-start; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.16); padding: 4px 9px; border-radius: 6px; margin-bottom: 10px; }
.rec-phone__cap { color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 19px; line-height: 1.05; letter-spacing: -0.02em; }
.rec-phone__cta { align-self: flex-start; margin-top: 12px; background: var(--volt); color: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 14px; border-radius: 8px; }
.rec-phone__like { position: absolute; right: 14px; bottom: 90px; z-index: 3; display: flex; flex-direction: column; gap: 16px; align-items: center; color: rgba(255,255,255,0.9); }
.rec-phone__like svg { display: block; }

/* ── Process flow · latente doelgroep activeren (DARK) ───── */
.flow { padding: 130px 0 150px; background: var(--ink); color: var(--bone-on-ink); position: relative; overflow: hidden; }
.flow::before { content: ''; position: absolute; inset: -20% auto auto 50%; transform: translateX(-50%); width: 80%; aspect-ratio: 1; background: radial-gradient(circle, rgba(112,0,255,0.22), transparent 62%); filter: blur(60px); pointer-events: none; }
.flow .container { position: relative; z-index: 1; }
.flow__head { max-width: 820px; margin: 0 auto 72px; text-align: center; }
.flow__head .eyebrow { color: rgba(255,255,255,0.6); }
.flow__head .eyebrow::before { background: var(--hot); }
.flow__head .h2 { color: var(--bone); }
.flow__head .accent { color: var(--volt); font-style: italic; }
.flow__sub { margin: 18px auto 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.72); max-width: 620px; }
.flow__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.flow-step { position: relative; padding: 0 18px; text-align: center; }
.flow-step:not(:last-child)::after { content: ''; position: absolute; top: 19px; left: 50%; right: -50%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 6px, transparent 6px 12px); }
.flow-step--key:not(:last-child)::after, .flow-step:nth-child(3)::after { background: repeating-linear-gradient(90deg, var(--volt) 0 6px, transparent 6px 12px); }
.flow-step__dot { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin: 0 auto 22px; }
.flow-step--key .flow-step__dot { background: var(--volt); border-color: var(--volt); box-shadow: 0 0 0 6px rgba(112,0,255,0.2); }
.flow-step__t { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; color: var(--bone); margin: 0 0 8px; }
.flow-step__d { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.66); margin: 0; }
.flow-step__big { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -0.03em; color: var(--volt); line-height: 1; margin-bottom: 6px; }
@media (max-width: 900px) {
  .flow { padding: 88px 0 96px; }
  .flow__steps { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .flow-step { padding: 0 0 0 56px; text-align: left; }
  .flow-step__dot { position: absolute; left: 0; top: 0; margin: 0; }
  .flow-step__big { margin-top: 4px; }
  .flow-step:not(:last-child)::after { top: 40px; bottom: -28px; left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.4) 0 6px, transparent 6px 12px); }
}
/* Compact single phone for step-deep (minder "uitgebreid") */
.step-deep { padding: 82px 0; }
.step-deep__phones--single { min-height: 340px; }
.step-deep__phones--single::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(112,0,255,0.16), transparent 62%); filter: blur(30px); }
.step-deep__phones--single .phone-tilt { position: relative; z-index: 1; }
.step-deep__phones--single .iphone { width: 196px; transform: rotate(-4deg); box-shadow: 0 40px 80px -30px rgba(10,10,10,0.5); }
@media (max-width: 700px) { .step-deep__phones--single .iphone { width: 150px; } }

/* ── Roles ───────────────────────────────────────────────── */
.roles { padding: 110px 0; background: var(--bone-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.roles__head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.roles__head .accent { color: var(--volt); font-style: italic; }
.roles__sub { margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 620px; }
.roles__grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; margin: 0 auto; }
.role-chip { display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bone); font-size: 15px; font-weight: 500; color: var(--ink); }
.role-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--volt); flex-shrink: 0; }
.roles__note { margin: 32px auto 0; text-align: center; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--fg-3); }
.roles__note strong { color: var(--ink); font-weight: 600; }

/* ── AI-qualification highlight (differentiator) ─────────── */
.ai-qual { position: relative; background: var(--ink); color: var(--bone-on-ink); padding: 120px 0; overflow: hidden; }
.ai-qual__eye { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--volt); display: inline-flex; align-items: center; gap: 10px; }
.ai-qual__eye::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--volt); }
.ai-qual .container { position: relative; z-index: 1; }
.ai-qual__head { max-width: 860px; margin: 0 auto; text-align: center; }
.ai-qual__eye { justify-content: center; }
.ai-qual__h { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.0; letter-spacing: -0.03em; margin: 20px auto 0; max-width: 900px; color: var(--bone-on-ink); }
.ai-qual__h .accent { color: var(--volt); font-style: italic; }
.ai-qual__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 56px auto 0; max-width: 900px; text-align: left; }
.ba-card { border-radius: 18px; padding: 32px 30px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); }
.ba-card--after { border-color: var(--volt); background: linear-gradient(160deg, rgba(112,0,255,0.16), rgba(255,255,255,0.02)); }
.ba-card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.ba-card--after .ba-card__tag { color: var(--volt); }
.ba-card__big { font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 5vw, 68px); line-height: 0.95; letter-spacing: -0.03em; margin: 14px 0 10px; }
.ba-card__big small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 15px; letter-spacing: 0; color: rgba(255,255,255,0.7); margin-top: 8px; }
.ba-card__list { list-style: none; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 12px; }
.ba-card__list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.ba-card__list li::before { content: '→'; position: absolute; left: 0; color: var(--volt); }
.ba-card--before .ba-card__list li::before { content: '×'; color: rgba(255,255,255,0.4); }
.ai-qual__note { margin: 32px auto 0; text-align: center; font-size: 15px; color: rgba(255,255,255,0.6); max-width: 640px; }
.ai-qual::before { content: ''; position: absolute; inset: -20% auto auto 50%; transform: translateX(-50%); width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgba(112,0,255,0.2), transparent 62%); filter: blur(60px); pointer-events: none; }

/* ── Audit CTA form ──────────────────────────────────────── */
.audit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.audit__list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.audit__list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.audit__list li::before { content: '✓'; position: absolute; left: 0; color: var(--volt); font-weight: 700; }
.audit__card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 32px; }
.audit__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.audit__field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.audit__field input, .audit__field select { padding: 14px 16px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-family: var(--font-body); font-size: 15px; }
.audit__field input::placeholder { color: rgba(255,255,255,0.45); }
.audit__field input:focus, .audit__field select:focus { outline: none; border-color: var(--volt); }
.audit__card .btn { width: 100%; justify-content: center; margin-top: 6px; }
.audit__sent { display: none; font-size: 15px; color: #fff; margin-top: 14px; }
.audit__sent.is-shown { display: block; }

/* ── Op locatie · achter-de-schermen band ──────────────── */
.onset { padding: 104px 0; }
.onset__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.onset__copy .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 22px; }
.onset__copy .h2 { color: var(--bone-on-ink); }
.onset__copy .h2 .accent { color: var(--volt); font-style: italic; }
.onset__copy .lead { color: rgba(255,255,255,0.78); margin-top: 22px; max-width: 480px; }
.onset__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.onset__meta span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; padding: 8px 14px; }
.onset__frame { margin: 0; }
.onset__frame figcaption { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin-top: 16px; text-align: center; }
/* Viewfinder */
.vf { position: relative; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); }
.vf img { display: block; width: 100%; height: auto; }
.vf__corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,0.9); }
.vf__corner--tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.vf__corner--tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.vf__corner--bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.vf__corner--br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.vf__rec { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.vf__rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: vf-blink 1.4s steps(1) infinite; }
@keyframes vf-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.15; } }
.vf__mode { position: absolute; top: 18px; left: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.35); padding: 4px 8px; border-radius: 4px; }
.vf__read { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.vf__focus { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; transform: translate(-50%,-50%); border: 1.5px solid rgba(255,255,255,0.85); border-radius: 3px; }
.vf__focus::before, .vf__focus::after { content: ''; position: absolute; background: rgba(255,255,255,0.85); }
.vf__focus::before { top: 50%; left: 42%; width: 16%; height: 1.5px; }
.vf__focus::after { left: 50%; top: 42%; height: 16%; width: 1.5px; }
@media (max-width: 900px) {
  .onset { padding: 72px 0; }
  .onset__grid { grid-template-columns: 1fr; gap: 40px; }
  .onset__frame { max-width: 440px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .ai-qual__grid, .audit__grid { grid-template-columns: 1fr; }
  .ai-qual__grid { gap: 14px; }
}
@media (max-width: 600px) {
  .rec-hero { padding: 116px 0 48px; }
  .rec-hero__proof { gap: 28px; }
  .roles, .ai-qual { padding: 72px 0; }
}


/* ═══════════ NIEUW MIDDENSTUK ═══════════ */

/* ── Systeem · funnel (LIGHT) ── */
.sys { padding: 120px 0 130px; background: var(--bone-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; }
.sys__head { max-width: 780px; margin: 0 auto 26px; text-align: center; }
.sys__head .eyebrow { justify-content: center; }
.sys__head .h2 { color: var(--ink); }
.sys__sub { margin: 18px auto 0; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 600px; }
.sys__partner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; max-width: 820px; margin: 0 auto 50px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sys__partner-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.sys__pbadges { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; }
.sys__pbadge { display: flex; align-items: center; justify-content: center; height: 66px; padding: 12px 22px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 6px 20px rgba(10,10,10,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.sys__pbadge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,10,10,0.10); }
.sys__pbadge img { max-height: 100%; max-width: 140px; width: auto; object-fit: contain; display: block; }
@media (max-width: 600px) { .sys__pbadge { height: 56px; padding: 10px 16px; } }
.plogo { display: inline-flex; align-items: center; gap: 8px; }
.plogo svg { display: block; }
.plogo b { font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); }
.funnel { max-width: 820px; margin: 0 auto; }
.funnel__inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fin { background: var(--bone); border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px; text-align: center; position: relative; }
.fin::after { content: ''; position: absolute; bottom: -21px; left: 50%; width: 2px; height: 20px; background: repeating-linear-gradient(180deg, var(--border-strong) 0 4px, transparent 4px 8px); transform: translateX(-50%); }
.fin__ico { display: flex; align-items: center; justify-content: center; gap: 6px; height: 24px; margin: 0 auto 12px; }
.fin__ico svg { display: block; }
.fin__k { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--volt); margin-bottom: 6px; }
.fin__v { font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; }
.funnel__merge { margin: 34px 0 14px; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.funnel__stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fstage { width: var(--w); min-width: 300px; background: var(--bone); border: 1px solid var(--border-strong); border-radius: 14px; padding: 16px 24px; display: flex; align-items: center; gap: 18px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.fstage:hover { border-color: var(--ink); transform: translateY(-2px); }
.fstage__n { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); flex-shrink: 0; }
.fstage strong { font-family: var(--font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); display: block; margin-bottom: 3px; }
.fstage strong em { color: var(--volt); font-style: italic; font-size: 15px; }
.fstage p { font-size: 13.5px; line-height: 1.45; color: var(--fg-2); margin: 0; }
.fstage p b { background: var(--hot); color: var(--ink); padding: 0 4px; font-weight: 700; }
.fstage--key { background: rgba(112,0,255,0.07); border-color: var(--volt); box-shadow: 0 0 0 4px rgba(112,0,255,0.1); }
@media (max-width: 760px) { .sys { padding: 84px 0 92px; } .funnel__inputs { grid-template-columns: 1fr; gap: 30px; } .fin::after { display: none; } .fstage { width: 100% !important; min-width: 0; } }

/* ── Verhaal · de feel ── */
.story { padding: 110px 0; background: var(--bone-light); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.story__grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: 64px; align-items: center; max-width: 1040px; margin: 0 auto; }
.story__phone { display: flex; justify-content: center; }
.sphone { width: 236px; background: linear-gradient(145deg, #3a3a3e, #1b1b1e 30%, #101012); border-radius: 46px; padding: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,0.09) inset, 0 34px 70px -28px rgba(10,10,10,0.55), 0 6px 18px -6px rgba(10,10,10,0.35); }
.sphone__screen { position: relative; border-radius: 40px; overflow: hidden; aspect-ratio: 9 / 19.5; background: linear-gradient(160deg, #1a1a22, #0b0b0f); box-shadow: 0 0 0 2px #000 inset; }
.sphone__screen image-slot, .sphone__screen video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.sphone__island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 64px; height: 17px; background: #000; border-radius: 999px; z-index: 3; }
.story__adui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 14px 20px; background: linear-gradient(to top, rgba(10,10,10,0.72), transparent 55%); }
.story__badge { align-self: flex-start; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.18); padding: 3px 8px; border-radius: 5px; margin-bottom: auto; margin-top: 8px; }
.story__cap { color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: -0.02em; }
.story__cta { align-self: flex-start; margin-top: 12px; background: var(--volt); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; padding: 8px 12px; border-radius: 8px; }
.story__beats .eyebrow { color: var(--fg-3); }
.story__beats .h2 { margin-top: 16px; }
.beats { list-style: none; margin: 28px 0 0; padding: 0; }
.beats li { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid var(--border); align-items: flex-start; }
.beats li:last-child { border-bottom: 1px solid var(--border); }
.beats li span { font-family: var(--font-mono); font-size: 12px; color: var(--volt); flex-shrink: 0; padding-top: 3px; }
.beats li p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fg-1); font-weight: 500; }
.story__punch { margin-top: 30px; font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.story__punch .accent { color: var(--volt); font-style: italic; }
@media (max-width: 820px) { .story { padding: 80px 0; } .story__grid { grid-template-columns: 1fr; gap: 40px; } .story__phone { order: -1; } }

/* ── Content & resultaat ── */
.proof { padding: 120px 0; }
.proof__head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.proof__head .eyebrow { justify-content: center; }
.proof__head .accent { color: var(--volt); font-style: italic; }
.proof__sub { margin: 16px auto 0; font-size: 17px; line-height: 1.55; color: var(--fg-2); max-width: 580px; }
.proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto 48px; }
.pstat { text-align: center; padding: 28px 20px; background: var(--bone-light); border: 1px solid var(--border); border-radius: 16px; }
.pstat__v { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -0.03em; color: var(--volt); line-height: 1; }
.pstat__l { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.proof__phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.pcard { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sphone--sm { width: 100%; max-width: 200px; }
.pcard__label { text-align: center; }
.pcard__client { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.pcard__res { display: block; font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -0.025em; color: var(--volt); line-height: 1; }
.pcard__meta { display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }
@media (max-width: 820px) { .proof__phones { grid-template-columns: repeat(2, 1fr); } }
.proof__roles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; max-width: 900px; margin: 44px auto 0; }
.proof__roles-k { width: 100%; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--fg-3); margin-bottom: 6px; }
@media (max-width: 820px) { .proof { padding: 84px 0; } .proof__stats { grid-template-columns: 1fr; } .proof__gallery { grid-template-columns: repeat(2, 1fr); } .ctile--wide { grid-column: span 2; } }

/* ── Evaa dashboard (DARK) ── */
.evaa { padding: 120px 0; background: var(--ink); color: var(--bone-on-ink); position: relative; overflow: hidden; }
.evaa::before { content: ''; position: absolute; inset: auto -10% -30% auto; width: 60%; aspect-ratio: 1; background: radial-gradient(circle, rgba(112,0,255,0.2), transparent 60%); pointer-events: none; }
.evaa .container { position: relative; z-index: 1; }
.evaa__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.evaa__copy .eyebrow { color: rgba(255,255,255,0.6); }
.evaa__copy .eyebrow::before { background: var(--hot); }
.evaa__copy .h2 { color: var(--bone); margin-top: 16px; }
.evaa__lead { color: rgba(255,255,255,0.78); margin-top: 20px; max-width: 460px; }
.evaa__points { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.evaa__points div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,0.8); }
.evaa__points div::before { content: '→'; color: #c4a5ff; font-weight: 700; flex-shrink: 0; }
.dash { background: #131318; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7); }
.dash__bar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.dash__logo { font-family: var(--font-display); font-weight: 900; font-size: 17px; letter-spacing: -0.02em; color: #fff; }
.dash__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-left: auto; }
.dash__live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: vf-blink 1.6s steps(1) infinite; }
.dash__row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.dash__row:last-child { border-bottom: 0; }
.dash__cand { display: flex; align-items: center; gap: 12px; }
.dash__ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--volt), #4a00b3); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 12px; color: #fff; flex-shrink: 0; }
.dash__name { font-weight: 600; font-size: 14px; color: #fff; }
.dash__role { font-size: 11px; color: rgba(255,255,255,0.5); font-family: var(--font-mono); }
.dash__score { display: flex; flex-direction: column; gap: 6px; }
.dash__score-l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.dash__meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.dash__meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--volt), #a855f7); }
.dash__pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.dash__pill--ok { background: rgba(34,197,94,0.15); color: #4ade80; }
.dash__pill--wait { background: rgba(240,255,0,0.14); color: var(--hot); }
.dash__pill--new { background: rgba(112,0,255,0.22); color: #c4a5ff; }
@media (max-width: 820px) { .evaa { padding: 84px 0; } .evaa__grid { grid-template-columns: 1fr; gap: 36px; } .dash__row { grid-template-columns: 1fr auto; } .dash__score { display: none; } }

/* ── Content-wall (schuivende creatives) ───────────────── */
.wallclip { overflow: hidden; margin-top: 24px; padding: 72px 0; }
.proof__marquee { overflow: hidden; transform: rotate(-6deg) scale(1.12); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.proof__phones--track { display: flex; flex-wrap: nowrap; gap: 20px; width: max-content; padding: 4px 8px; animation: cases-marquee 70s linear infinite; }
.proof__phones--track .pcard { width: 204px; flex: 0 0 auto; }
.proof__phones--track .sphone--sm { width: 100%; max-width: none; }
.proof__marquee:hover .proof__phones--track { animation-play-state: paused; }
.proof__marquee.is-manual { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.proof__marquee.is-manual::-webkit-scrollbar { display: none; }
.proof__marquee.is-manual .proof__phones--track { animation: none; }
.sys__partner { margin: 40px auto 48px; }

.proof__phones--track .pcard:nth-child(even) { margin-top: 30px; }
@media (max-width: 600px) { .wallclip { padding: 48px 0; } .proof__phones--track .pcard:nth-child(even) { margin-top: 18px; } }


/* ── Casekaart-typografie beter verdelen (lange klantnamen/labels) ── */
.rec-cases .ccard__name { font-size: 23px; line-height: 1.1; hyphens: auto; overflow-wrap: break-word; }
.rec-cases .ccard__industry { letter-spacing: 0.08em; line-height: 1.35; align-items: flex-start; text-wrap: pretty; }
.rec-cases .ccard__industry::before { margin-top: 5px; flex-shrink: 0; }
.rec-cases .ccard__desc { text-wrap: pretty; }
.rec-cases .ccard__stat-l { text-wrap: pretty; }
.rec-cases .ccard__stat-v--text { font-size: 16px; line-height: 1.15; }

/* ── Logo's in casekaarten: nooit wegvallen ── */
.rec-cases .ccard__logo { min-height: 38px; }
.rec-cases .ccard__logo img { max-height: 34px; max-width: 132px; object-fit: contain; filter: grayscale(1); mix-blend-mode: normal; opacity: 0.9; }
.rec-cases .ccard__logo img[src$=".svg"] { max-height: 26px; }

/* ── Mobiel: funnel als één trechter i.p.v. losse blokken ── */
@media (max-width: 720px) {
  .funnel__inputs { gap: 8px; }
  .fin { padding: 12px 14px; }
  .fin__v { font-size: 12.5px; }
  .funnel__merge { font-size: 12px; margin: 14px 0; }
  .funnel__stages { position: relative; gap: 0; padding-left: 26px; }
  .funnel__stages::before { content: ''; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(to bottom, var(--volt), rgba(112,0,255,0.15)); }
  .fstage { width: 100% !important; padding: 16px 16px 16px 14px; border-radius: 12px; margin: 0; position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
  .fstage + .fstage { margin-top: 10px; }
  .fstage::after { content: ''; position: absolute; left: -22px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 4px rgba(112,0,255,0.18); }
  .fstage--key::after { background: var(--hot); box-shadow: 0 0 0 4px rgba(240,255,0,0.2); }
  .fstage p { font-size: 13.5px; line-height: 1.5; }
}

.proof__cta { display: flex; justify-content: center; margin-top: 44px; }