:root {
  --outer: #cbd1cf;
  --paper: #fffefa;
  --soft: #f3f5f2;
  --ink: #111513;
  --muted: #69716b;
  --line: #dce2de;
  --green: #0cc481;
  --mint: #d9f5e6;
  --cyan: #11d8c1;
  --orange: #ef9d6b;
  --purple: #8f8cdb;
  --max: 100%;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 18px;
  --shadow: 0 12px 30px rgba(31, 44, 38, .12);
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-variant-emoji: text; font-weight: 700; letter-spacing: -.05em; line-height: .94; text-wrap: balance; }
p { color: var(--muted); }
img { display: block; max-width: 100%; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }

.site-window { background: var(--paper); border: 0; border-radius: 0; box-shadow: none; margin: 0 auto; max-width: none; min-height: 100vh; overflow: hidden; }
.wrap { margin-inline: auto; max-width: var(--max); padding-inline: var(--gutter); }
/* Bovenaan een gewone witte balk over de volle breedte van het venster. Zodra
   je scrollt krimpt hij naar een zwevende, doorschijnende druppel die als losse
   laag boven de pagina blijft hangen. position: fixed vanaf het begin, met een
   padding-top op .site-window als tegenwicht, zodat er bij het omschakelen
   niets verspringt. Sticky kan niet: .site-window heeft overflow: hidden. */
.site-nav { align-items: center; background: rgba(255, 254, 250, .94); border: 1px solid transparent; border-radius: 0; display: flex; height: 76px; inset-inline: 0; justify-content: space-between; margin-inline: auto; padding-inline: var(--gutter); position: fixed; top: 0; transition: width .34s cubic-bezier(.23, 1, .32, 1), height .34s cubic-bezier(.23, 1, .32, 1), top .34s cubic-bezier(.23, 1, .32, 1), border-radius .34s cubic-bezier(.23, 1, .32, 1), padding-inline .34s cubic-bezier(.23, 1, .32, 1), background .24s ease, box-shadow .24s ease, border-color .24s ease; width: 100%; z-index: 40; }
.site-window { padding-top: 76px; }

.pill-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-copy .pill-row { margin-top: 26px; }
.hero-copy .pill-row .pill { margin-top: 0; }

.nav-toggle { display: none; }
.nav-panel { display: none; }
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -.07em; text-decoration: none; }
.wordmark::before { content: "✣"; font-size: 14px; margin-right: 7px; }
.nav-right, .nav-links, .lang-switch { align-items: center; display: flex; }
.nav-right { gap: clamp(14px, 2.5vw, 34px); }
.nav-links { gap: clamp(16px, 2.4vw, 32px); }
.nav-links a { font-size: 13px; text-decoration: none; }
.lang-switch { font-size: 13px; gap: 3px; }
.lang-switch a { text-decoration: none; }
.lang-switch a[aria-current="page"] { font-weight: 700; }
.lang-switch a:not([aria-current="page"]) { color: #9ca49f; }
.lang-switch a + a::before { color: #bdc4bf; content: "/"; margin-right: 3px; }
.pill { align-items: center; background: var(--cyan); border: 0; border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font-size: 13px; gap: 18px; justify-content: center; min-height: 40px; padding: 0 15px 0 18px; text-decoration: none; transition: transform .18s ease, background .18s ease; }
.pill { max-width: 100%; }
/* De knoptekst is een hele zin, dus hij moet binnen de knop kunnen afbreken in
   plaats van uit zijn container te lopen. Vandaar padding op de blokas: zonder
   dat groeit de knop niet mee met een tweede regel. */
.pill { padding-block: 9px; text-align: center; text-wrap: balance; }
.pill::after { background: var(--ink); border-radius: 50%; content: ""; flex-shrink: 0; height: 8px; width: 8px; }
/* In de balk bovenaan is geen ruimte voor de hele zin: daar staat de knop naast
   het woordmerk, de taalwissel en het menu. De korte variant staat in de HTML. */
.pill-short { display: none; }
.pill:hover { background: var(--green); transform: translateY(-2px); }
.pill-ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(17, 21, 19, .35); }
.pill-ghost::after { background: var(--green); }
.pill-ghost:hover { background: var(--ink); box-shadow: none; color: var(--paper); }
/* Op het donkere aanbod-paneel moet de omtrek juist licht zijn. */
.offer-panel .pill-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: var(--paper); }
.offer-panel .pill-ghost:hover { background: var(--paper); color: var(--ink); }
.pill:focus-visible, .nav-links a:focus-visible, .lang-switch a:focus-visible, .text-link:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

.hero { padding: 0 clamp(12px, 2.2vw, 34px) clamp(24px, 3vw, 40px); }
.hero-stage { background: #edf0ed; border-radius: var(--radius); min-height: min(625px, calc(100vh - 96px)); min-height: min(625px, calc(100svh - 96px)); overflow: hidden; position: relative; }
.hero-visual-shell { background: #edf0ed; inset: 0; overflow: hidden; pointer-events: none; position: absolute; }
.hero-visual-shell::after { background: linear-gradient(90deg, rgba(237,240,237,.94) 0%, rgba(237,240,237,.62) 29%, rgba(237,240,237,.06) 58%, rgba(237,240,237,.02) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.hero-visual { background: #edf0ed; border: 0; height: 100%; left: 10%; position: absolute; top: 0; transform: scale(1.14); transform-origin: 50% 50%; width: 114%; }
.hero-copy { bottom: clamp(30px, 5.5vw, 76px); left: clamp(24px, 4.3vw, 62px); max-width: 670px; position: absolute; z-index: 2; }
.hero-copy h1 { font-size: clamp(44px, 4.6vw, 66px); max-width: 620px; }
.hero-copy p { color: var(--ink); font-size: 17px; line-height: 1.4; margin-top: 22px; max-width: 340px; }
.hero-copy .pill { margin-top: 24px; }
.hero-kicker, .eyebrow { color: #2f7350; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.hero-kicker { color: var(--ink); font-size: 12px; letter-spacing: .045em; margin-bottom: 18px; text-transform: none; }
.hero-note { font-size: 10px; font-weight: 700; letter-spacing: .12em; position: absolute; right: clamp(24px, 4.3vw, 62px); text-transform: uppercase; top: 30px; z-index: 1; }
.hero-note::before { background: var(--green); border-radius: 50%; content: ""; display: inline-block; height: 8px; margin-right: 8px; width: 8px; }
.hero-index { bottom: 27px; color: rgba(17, 21, 19, .55); font-size: 10px; letter-spacing: .1em; position: absolute; right: clamp(24px, 4.3vw, 62px); text-transform: uppercase; z-index: 2; }

.stack-row { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 13px 26px; min-height: 88px; }
.stack-row span { color: #646d67; font-size: 13px; }
.stack-row .stack-label { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .11em; margin-right: 10px; text-transform: uppercase; }
.stack-row .stack-item::before { background: var(--ink); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 7px; vertical-align: 1px; width: 7px; }
.stack-row .stack-item:nth-child(3)::before { background: var(--cyan); }
.stack-row .stack-item:nth-child(4)::before { background: var(--orange); }
.stack-row .stack-item:nth-child(5)::before { background: var(--purple); }
.stack-row .stack-item:nth-child(6)::before { background: var(--green); }

.section { padding: clamp(92px, 11vw, 170px) 0; }
.section-head { align-items: end; display: grid; gap: 56px; grid-template-columns: minmax(0, .9fr) minmax(260px, .65fr); margin-bottom: 50px; }
.section-head h2 { font-size: clamp(48px, 6vw, 88px); max-width: 760px; }
.section-head p { font-size: 17px; line-height: 1.45; max-width: 360px; }
.section-number { color: #2f7350; font-size: 11px; font-weight: 700; letter-spacing: .12em; margin-bottom: 19px; text-transform: uppercase; }

.system-section { background: var(--soft); padding-block:clamp(76px,8vw,118px); }
.system-showcase { align-items:center; display:grid; gap:clamp(32px,3vw,44px); grid-template-columns:minmax(230px,.34fr) minmax(0,1fr); margin-inline:auto; max-width:1760px; }
.system-copy { max-width:330px; }
.system-copy h2 { font-size:clamp(46px,4.2vw,62px); max-width:330px; }
.system-copy p { font-size:16px; line-height:1.5; margin-top:28px; max-width:310px; }
.system-case-link { display:inline-flex; font-size:13px; margin-top:30px; text-decoration:none; }
.system-case-link span { margin-left:8px; transition:transform .18s ease; }
.system-case-link:hover span { transform:translateX(4px); }
.platform-study-embed { aspect-ratio:4/3; background:#e6ebe7; border:1px solid #cfd7d1; border-radius:var(--radius); box-shadow:0 18px 42px rgba(26,40,32,.10); justify-self:end; max-width:min(100%, 1240px); overflow:hidden; width:100%; }
.platform-study-embed iframe { background:#e6ebe7; border:0; display:block; height:100%; pointer-events:none; width:100%; }
.operating-view { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); min-height: 470px; overflow: hidden; padding: clamp(24px, 4vw, 50px); position: relative; }
.operating-view::before { background: linear-gradient(90deg, rgba(17,21,19,.045) 1px, transparent 1px), linear-gradient(rgba(17,21,19,.045) 1px, transparent 1px); background-size: 36px 36px; content: ""; inset: 0; opacity: .45; pointer-events: none; position: absolute; }
.operating-view > * { position: relative; z-index: 1; }
.operating-view-main { align-items: stretch; display: grid; gap: clamp(18px, 3vw, 38px); grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); margin-top: 38px; }
.operating-slot { min-height: 285px; }
.operating-log { background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3vw, 34px); }
.log-intro { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.log-intro .eyebrow { display: block; margin-bottom: 10px; }
.log-intro strong { display: block; font-size: clamp(22px, 2.4vw, 33px); letter-spacing: -.06em; line-height: .98; max-width: 260px; }
.log-item { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 11px; grid-template-columns: 10px 1fr auto; padding: 15px 0; }
.log-item:last-child { border-bottom: 0; padding-bottom: 0; }
.log-dot { background: var(--green); border-radius: 50%; display: block; height: 8px; width: 8px; }
.log-dot.cyan { background: var(--cyan); }
.log-dot.orange { background: var(--orange); }
.log-item b, .log-item small { display: block; }
.log-item b { font-size: 13px; }
.log-item small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.log-item > span { color: #4b976d; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.operating-footer { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin-top: 26px; }
.operating-footer p { color: var(--muted); font-size: 13px; max-width: 470px; }
.system-board { background: var(--mint); border-radius: var(--radius); min-height: 500px; overflow: hidden; padding: clamp(24px, 4vw, 54px); position: relative; }
.system-board::before { background-image: linear-gradient(rgba(16, 29, 23, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 29, 23, .07) 1px, transparent 1px); background-size: 32px 32px; content: ""; inset: 0; opacity: .55; pointer-events: none; position: absolute; }
.system-board-top { align-items: center; display: flex; justify-content: space-between; position: relative; z-index: 1; }
.system-board-top strong { font-size: 14px; letter-spacing: -.03em; }
.live-label { align-items: center; color: #3f8d64; display: flex; font-size: 10px; font-weight: 700; gap: 7px; letter-spacing: .1em; text-transform: uppercase; }
.live-label::before { background: var(--green); border-radius: 50%; content: ""; height: 7px; width: 7px; }
.signal-steps { align-items: stretch; display: grid; gap: clamp(12px, 2vw, 28px); grid-template-columns: repeat(3, 1fr); margin-top: 120px; position: relative; z-index: 1; }
.signal-steps::before { background: var(--ink); content: ""; height: 1px; left: 14%; opacity: .25; position: absolute; right: 14%; top: 42px; }
.signal-svg { height: 180px; inset: 148px 4% auto; overflow: visible; pointer-events: none; position: absolute; width: 92%; z-index: 0; }
.signal-svg path { fill: none; stroke-linecap: round; stroke-width: 1.6; }
.signal-svg .trace { stroke-dasharray: 2 9; }
.signal-svg .traveller { fill: var(--cyan); }
.signal-svg .traveller.green { fill: var(--green); }
.signal-svg .traveller.orange { fill: var(--orange); }
.signal-step { background: rgba(255, 254, 250, .92); border: 1px solid rgba(17, 21, 19, .14); border-radius: 12px; min-height: 255px; padding: 20px; position: relative; }
.signal-step::before { background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; content: ""; height: 14px; left: 24px; position: absolute; top: -8px; width: 14px; }
.signal-step:nth-child(2)::before { border-color: var(--cyan); }
.signal-step:nth-child(3)::before { border-color: var(--green); }
.signal-step .small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.signal-step h3 { font-size: clamp(25px, 3vw, 42px); margin-top: 54px; }
.signal-step p { font-size: 14px; line-height: 1.45; margin-top: 14px; max-width: 240px; }
.signal-foot { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin-top: 28px; position: relative; z-index: 1; }
.signal-foot p { color: #4c6657; font-size: 13px; max-width: 400px; }
.signal-foot .signal-status { color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.signal-status::before { color: var(--green); content: "✓"; margin-right: 6px; }

.cases-section { background: #f5f6f4; overflow: hidden; }
.cases-head { align-items: end; display: grid; gap: clamp(24px, 3vw, 46px); grid-template-columns: auto minmax(240px, .5fr) 1fr; margin-bottom: 46px; }
.cases-head h2 { font-size: clamp(58px, 8vw, 116px); }
.cases-title-link { align-items:flex-start; display:inline-flex; gap:12px; text-decoration:none; }
.cases-title-link span { color:#3f8d64; font-size:.26em; letter-spacing:0; margin-top:.12em; transition:transform .18s ease; }
.cases-title-link:hover span { transform:translate(3px,-3px); }
.cases-title-link:focus-visible, .case-card:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
.cases-head p { font-size: 16px; line-height: 1.45; max-width: 300px; }
.case-controls { display: flex; gap: 8px; }
.case-controls.is-hidden { display: none; }
.case-control { align-items: center; background: var(--ink); border: 0; border-radius: 50%; color: var(--paper); cursor: pointer; display: grid; font-size: 18px; height: 46px; place-items: center; transition: background .18s ease, color .18s ease, transform .18s ease; width: 46px; }
.case-control:disabled { cursor: default; opacity: .32; transform: none; }
.case-control:not(:disabled):hover { background: var(--green); color: var(--ink); transform: translateY(-2px); }
.case-control:active { transform: translateY(0) scale(.96); }
.case-control:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.cases-link { display: inline-flex; font-size: 13px; text-decoration: none; }
.cases-actions { align-items: center; display: flex; gap: 14px; justify-self: end; }
.cases-all { white-space: nowrap; }
.cases-link span { margin-left: 8px; transition: transform .18s ease; }
.cases-link:hover span { transform: translateX(4px); }
.case-rail { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.case-card { background: var(--paper); border-radius: 13px; color:inherit; flex: 0 0 min(500px, 42vw); min-width: 310px; overflow: hidden; text-decoration:none; }
.case-title { align-items: center; display: flex; font-size: 15px; font-weight: 600; justify-content: space-between; min-height: 57px; padding: 0 20px; }
.case-title span { color: var(--muted); font-size: 11px; font-weight: 400; }
.case-image { aspect-ratio: 1.16 / 1; background: #dfe5e0; overflow: hidden; position: relative; }
.case-image img { height: 100%; object-fit: cover; width: 100%; }
.case-image img.owner { object-position: 50% 20%; }
.case-image img.roofing-photo { object-position: 50% 44%; }
.case-image img.daily-brief-photo { object-position: 50% 50%; }
.case-image img.accounting-photo { object-position: 50% 50%; }
.daily-brief-image { background: #cbc3b7; isolation: isolate; }
.daily-brief-image::before { background: linear-gradient(90deg, rgba(7, 12, 10, .14), transparent 48%, rgba(7, 12, 10, .08)); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.daily-brief-image .brief-workspace-photo { height: 100%; object-fit: cover; object-position: 37% 50%; width: 100%; }
.daily-brief-ui { background: #f7f8f4; clip-path: polygon(10% 2%, 88% 0, 100% 90%, 0 100%); color: #111512; display: grid; grid-template-rows: auto 1fr; left: 27.2%; overflow: hidden; padding: 7px 10px 9px 13px; pointer-events: none; position: absolute; top: 20.3%; transform: rotate(-1deg); transform-origin: center; width: 34.5%; height: 28.5%; z-index: 2; }
.brief-ui-bar { align-items: center; border-bottom: 1px solid rgba(17, 21, 18, .15); display: flex; font-size: clamp(5px, .55vw, 8px); justify-content: space-between; min-height: 16px; }
.brief-ui-bar b { letter-spacing: -.04em; }
.brief-ui-bar span { color: #708077; font-variant-numeric: tabular-nums; }
.brief-ui-body { align-items: center; display: grid; gap: 5px; grid-template-columns: minmax(0, .75fr) 22px minmax(0, 1fr); min-height: 0; }
.brief-sources { display: grid; gap: 3px; }
.brief-sources span { background: #e7ebe7; border-left: 2px solid #6a7b71; color: #4d5d54; display: block; font-size: clamp(4px, .43vw, 6px); line-height: 1; overflow: hidden; padding: 3px 4px; text-overflow: ellipsis; white-space: nowrap; }
.brief-core { align-items: center; display: flex; height: 100%; justify-content: center; position: relative; }
.brief-core::before, .brief-core::after { background: #96a59c; content: ""; height: 1px; position: absolute; top: 50%; width: 10px; z-index: -1; }
.brief-core::before { right: 50%; }
.brief-core::after { left: 50%; }
.brief-core i { align-items: center; background: var(--green); border: 2px solid rgba(255,255,255,.8); border-radius: 50%; display: flex; font-size: 7px; font-style: normal; font-weight: 800; height: 20px; justify-content: center; width: 20px; }
.brief-output { min-width: 0; }
.brief-output small, .brief-output b, .brief-output span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brief-output small { color: #668073; font-size: clamp(4px, .42vw, 6px); text-transform: uppercase; }
.brief-output b { font-size: clamp(6px, .75vw, 11px); letter-spacing: -.05em; margin-top: 3px; }
.brief-output span { border-top: 1px solid #d8ded9; color: #5e7066; font-size: clamp(4px, .42vw, 6px); margin-top: 5px; padding-top: 4px; }
.daily-brief-pending { background: linear-gradient(135deg, #eef1ed, #dfe6e1); border: 1px solid #d4dcd6; }
.daily-brief-pending::before { background-image: linear-gradient(rgba(17,21,19,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(17,21,19,.045) 1px, transparent 1px); background-size: 30px 30px; content: ""; inset: 0; opacity: .55; position: absolute; }
.case-label { align-items: center; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); background: rgba(255, 254, 250, .62); border: 1px solid rgba(255,255,255,.68); border-radius: 999px; bottom: 18px; box-shadow: 0 10px 26px rgba(31,44,38,.12); color: rgba(17,21,19,.82); display: flex; font-size: 12px; font-weight: 500; gap: 8px; left: 18px; padding: 9px 13px; position: absolute; }
.case-label::before { background: var(--green); border-radius: 50%; content: ""; height: 7px; width: 7px; }
.image-slot { align-items: center; background: linear-gradient(135deg, #f6f8f5, #eaf0eb); border: 1px dashed #a9b8ae; color: #53675b; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; text-align: center; }
.image-slot::before { border: 1px solid rgba(74, 151, 109, .2); border-radius: 50%; content: ""; height: 62%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 52%; }
.image-slot > span, .image-slot > small { max-width: 250px; position: relative; z-index: 1; }
.image-slot > span { color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: -.02em; }
.image-slot > small { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 8px; }
.case-image.image-slot, .story-card-visual.image-slot { padding: 24px; }
.case-image.image-slot .case-label, .story-card-visual.image-slot .story-caption { z-index: 2; }

.owner-section { background: var(--paper); }
.owner-grid { align-items: center; display: grid; gap: clamp(40px, 8vw, 130px); grid-template-columns: minmax(240px, .7fr) minmax(0, 1fr); }
.owner-photo { aspect-ratio: 1 / 1; background: var(--green); overflow: hidden; position: relative; }
.owner-photo img { height: 100%; object-fit: cover; width: 100%; }
.owner-photo figcaption { background: var(--paper); bottom: 14px; font-size: 12px; left: 14px; padding: 8px 10px; position: absolute; }
.owner-copy h2 { font-size: clamp(48px, 6vw, 84px); max-width: 700px; }
.owner-copy p { font-size: 17px; line-height: 1.5; margin-top: 24px; max-width: 500px; }
.owner-copy .eyebrow { margin-bottom: 20px; }
.team-heading { align-items: end; display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); margin-bottom: 52px; }
.team-heading h2 { font-size: clamp(50px, 6.5vw, 94px); max-width: 800px; }
.team-heading > p { font-size: 17px; line-height: 1.5; max-width: 370px; }
.team-grid-v3 { align-items: start; display: grid; gap: clamp(32px, 7vw, 110px); grid-template-columns: minmax(250px, .72fr) minmax(0, 1fr); }
.team-lead { max-width: 470px; }
.founder-slot { aspect-ratio: 1 / 1; background: #0a0b0a; overflow: hidden; }
.founder-slot img { height: 100%; object-fit: cover; object-position: 50% 18%; width: 100%; }
.team-caption { align-items: baseline; display: flex; gap: 12px; margin-top: 15px; }
.team-caption strong { font-size: 16px; }
.team-caption span { color: var(--muted); font-size: 12px; }
.team-lead > p { font-size: 14px; line-height: 1.55; margin-top: 17px; }
.team-capabilities { border-top: 1px solid var(--line); padding-top: 17px; }
.team-capabilities h3 { font-size: clamp(45px, 5.5vw, 80px); margin-top: 22px; }
.team-capabilities > p { font-size: 17px; line-height: 1.5; margin-top: 28px; max-width: 540px; }
.capability-list { border-top: 1px solid var(--line); display: grid; gap: 0; margin-top: 32px; }
.capability-list span { border-bottom: 1px solid var(--line); font-size: 13px; padding: 13px 0; }

.offer-section { background: var(--soft); padding-bottom: clamp(72px, 9vw, 130px); padding-top: 0; }
.offer-panel { background: var(--ink); border-radius: var(--radius); color: var(--paper); display: grid; gap: clamp(40px, 8vw, 120px); grid-template-columns: minmax(0, 1fr) minmax(270px, .72fr); overflow: hidden; padding: clamp(32px, 5vw, 70px); }
.offer-panel h2 { color: var(--paper); font-size: clamp(48px, 6.3vw, 90px); max-width: 780px; }
.offer-panel .eyebrow { color: var(--green); margin-bottom: 20px; }
.offer-copy > p { color: #c0cbc4; font-size: 16px; line-height: 1.5; max-width: 420px; }
.offer-list { border-top: 1px solid #3b4640; margin-top: 26px; }
.offer-item { border-bottom: 1px solid #3b4640; display: grid; gap: 13px; grid-template-columns: 23px 1fr; padding: 18px 0; }
.check { color: var(--green); font-weight: 700; }
.offer-item b { font-size: 14px; }
.offer-item p { color: #aebbb3; font-size: 13px; line-height: 1.4; margin-top: 4px; }
.guarantee { border-top: 1px solid #426550; margin-top: 25px; padding-top: 15px; }
.guarantee strong { font-size: 14px; }
.guarantee p { color: #aebbb3; font-size: 12px; line-height: 1.45; margin-top: 5px; }
.offer-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.offer-actions .text-link { color: #d8e2db; font-size: 13px; text-decoration: none; }

.footer { background: var(--paper); border-top: 1px solid var(--line); padding: 26px var(--gutter) 34px; }
.footer-row { align-items: center; display: flex; gap: 22px; justify-content: space-between; }
.footer-row p, .footer-row a { color: var(--muted); font-size: 12px; }
.footer-row a { text-decoration: none; }
.footer-mark { font-size: clamp(70px, 12vw, 150px); font-weight: 700; letter-spacing: -.1em; line-height: .8; margin-top: 80px; }

/* Uitgebreide footer: contact links, twee kolommen rechts, wordmark, en een
   smalle balk onderaan voor copyright en juridische links. */
.footer.footer-wide { padding: 62px var(--gutter) 0; }
.footer-top { display: grid; gap: 38px 40px; grid-template-columns: 1.5fr 1fr 1fr; }
.footer-kvk { color: var(--muted); font-size: 12px; margin: 0 0 13px; }
.footer-mail { border-bottom: 1px solid currentColor; color: var(--ink); display: inline-block; font-size: clamp(19px, 2.3vw, 27px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; padding-bottom: 2px; text-decoration: none; }
.footer-col { align-items: flex-start; display: flex; flex-direction: column; gap: 12px; }
.footer-col-title { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.footer-col a { color: var(--ink); font-size: 16px; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bar { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; margin-top: 28px; padding: 15px 0 22px; }
.footer-bar p, .footer-bar a { color: var(--muted); font-size: 12px; margin: 0; }
.footer-bar a { text-decoration: none; }
.footer-bar a:hover { color: var(--ink); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 24px; }


/* Mobiel menu: hamburger in de zwevende balk, paneel eronder in dezelfde
   doorschijnende stijl. Boven 1024px bestaat geen van beide. */
/* Overgenomen uit v2: kop-met-zijtekst, de pijnpuntenlijst op de cases-pagina
   en het afsluitende CTA-paneel. De twee route-kaarten van v2 zijn eruit; de
   Tally doet die splitsing nu zelf, dus hier staat een knop. */
.v2-head { align-items: end; display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); margin-bottom: clamp(40px, 5vw, 64px); }
.v2-head h2 { font-size: clamp(48px, 6vw, 88px); max-width: 820px; }
.v2-head > p, .v2-head > div > p { font-size: 17px; line-height: 1.5; max-width: 400px; }
.v2-head .eyebrow { margin-bottom: 19px; }

.payback-grid { display: grid; gap: 0 clamp(24px, 3vw, 44px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.payback-item { border-top: 1px solid #cfd7d1; padding: 22px 0 34px; }
.payback-item b { color: #2f7350; display: block; font-size: 11px; letter-spacing: .12em; }
.payback-item h3 { font-size: 21px; letter-spacing: -.04em; line-height: 1.05; margin: 14px 0 0; }
.payback-item p { font-size: 14px; line-height: 1.5; margin-top: 10px; max-width: 360px; }

/* Waarom-blok: donker paneel met de kop links en vier korte claims rechts,
   in dezelfde opzet als de tegels bij Nodefy. Geen uitleg onder de claims; het
   blok heeft geen visual en moet het van bondigheid hebben. */
.why-section { padding: clamp(58px, 7vw, 104px) 0; }
.why-panel { align-items: start; background: var(--ink); border-radius: var(--radius); color: var(--paper); display: grid; gap: clamp(30px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); padding: clamp(32px, 4.4vw, 62px); }
.why-panel .eyebrow { color: var(--green); margin-bottom: 18px; }
.why-panel h2 { color: var(--paper); font-size: clamp(34px, 3.6vw, 52px); max-width: 520px; }
.why-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.why-tile { background: var(--paper); border-radius: 14px; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; min-height: 152px; padding: 22px; position: relative; transition: transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s ease; }
.why-tile:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .22); transform: translateY(-4px); }
.why-figure { display: block; font-size: clamp(38px, 3.8vw, 54px); font-weight: 700; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.why-tile b { font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; letter-spacing: -.01em; line-height: 1.25; max-width: 190px; }
.why-index { color: #9aa39d; font-size: 11px; font-weight: 700; letter-spacing: .1em; position: absolute; right: 18px; top: 18px; }
/* De tegels komen een voor een omhoog; de cijfers tellen pas als ze in beeld staan. */
.reveal-ready .why-tile { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1), box-shadow .3s ease; }
.reveal-ready .why-tile.is-visible { opacity: 1; transform: none; }
.reveal-ready .why-tile:nth-child(2) { transition-delay: .09s; }
.reveal-ready .why-tile:nth-child(3) { transition-delay: .18s; }
.reveal-ready .why-tile:nth-child(4) { transition-delay: .27s; }
.why-num.is-swapping { animation: figure-swap .45s ease both; }
@keyframes figure-swap { 0% { opacity: 1; } 45% { opacity: 0; transform: translateY(-6px); } 55% { transform: translateY(6px); } 100% { opacity: 1; transform: none; } }

.cta-section { background: var(--soft); padding: 0 0 clamp(72px, 9vw, 130px); }
.cta-panel { background: var(--ink); border-radius: var(--radius); color: var(--paper); padding: clamp(32px, 5vw, 70px); }
.cta-panel h2 { color: var(--paper); font-size: clamp(48px, 6.3vw, 90px); max-width: 900px; }
.cta-panel .eyebrow { color: var(--green); margin-bottom: 20px; }
.cta-panel > p { color: #bdc9c1; font-size: 17px; line-height: 1.5; margin-top: 22px; max-width: 520px; }
.cta-panel .pill-row { margin-top: clamp(30px, 3.5vw, 46px); }
.cta-panel .pill-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); color: var(--paper); }
.cta-panel .pill-ghost:hover { background: var(--paper); color: var(--ink); }
.cta-alt { color: #8f9c95; font-size: 13px; margin-top: 22px; }
.cta-alt a { color: var(--paper); }

@media (min-width: 1800px) {
  .hero-stage { min-height: min(760px, calc(100vh - 96px)); }
}

/* Mobiele correcties -------------------------------------------------------- */
@media (max-width: 768px) {
  /* Het label kreeg CRM naast zich; nu staat de rij systemen er netjes onder. */
  .stack-row .stack-label { flex-basis: 100%; margin-right: 0; }

  /* Een woord past niet op dezelfde grootte als een getal van twee tekens. */
  .why-tile.is-word .why-figure { font-size: clamp(20px, 5.6vw, 26px); }

  /* De knoppen stonden tegen de intro aan geplakt. */
  .cases-head .cases-actions { margin-top: 22px; }

  /* De rail loopt door tot de schermranden, zodat swipen natuurlijk voelt en
     de laatste kaart niet half achter de marge blijft hangen. */
  .cases-section .case-rail { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .case-card { flex: 0 0 84%; min-width: 0; }
}

@media (max-width: 1024px) {
  .offer-page .offer-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-toggle { align-items: center; background: var(--paper); border: 1px solid rgba(17, 21, 19, .12); border-radius: 50%; cursor: pointer; display: inline-flex; flex: none; height: 40px; justify-content: center; padding: 0; width: 40px; }
  .nav-toggle-bars { background: var(--ink); border-radius: 2px; display: block; height: 2px; position: relative; transition: background .16s ease; width: 16px; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { background: var(--ink); border-radius: 2px; content: ""; height: 2px; left: 0; position: absolute; transition: transform .2s ease; width: 16px; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }

  .nav-panel { backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); background: rgba(255, 254, 250, .78); border: 1px solid rgba(255, 255, 255, .55); border-radius: 20px; box-shadow: 0 16px 40px rgba(31, 44, 38, .15); inset-inline: 0; margin-inline: auto; overflow: hidden; padding: 6px 20px 14px; position: fixed; top: 76px; width: calc(100% - 26px); z-index: 39; }
  .nav-open .nav-panel { display: block; }
  .nav-panel a { border-bottom: 1px solid rgba(17, 21, 19, .09); display: block; font-size: 17px; font-weight: 500; letter-spacing: -.02em; padding: 15px 0; text-decoration: none; }
  .nav-panel a:last-of-type { border-bottom: 0; }
  .nav-panel .nav-panel-lang { border-top: 1px solid rgba(17, 21, 19, .09); display: flex; gap: 4px; margin-top: 4px; padding-top: 13px; }
  .nav-panel .nav-panel-lang a { border: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; padding: 0; text-transform: uppercase; }
  .nav-panel .nav-panel-lang a[aria-current="page"] { color: var(--ink); }
  .nav-panel .nav-panel-lang a + a::before { color: #bdc4bf; content: "/"; margin-right: 4px; }
  /* De links schuiven een voor een binnen, zodat het paneel niet in een klap
     op het scherm staat. */
  .nav-open .nav-panel a { animation: nav-item-in .34s cubic-bezier(.23, 1, .32, 1) both; }
  .nav-open .nav-panel a:nth-of-type(1) { animation-delay: .03s; }
  .nav-open .nav-panel a:nth-of-type(2) { animation-delay: .07s; }
  .nav-open .nav-panel a:nth-of-type(3) { animation-delay: .11s; }
  .nav-open .nav-panel a:nth-of-type(4) { animation-delay: .15s; }
  .nav-open .nav-panel a:nth-of-type(5) { animation-delay: .19s; }
  .nav-open .nav-panel .nav-panel-lang { animation: nav-item-in .34s cubic-bezier(.23, 1, .32, 1) .23s both; }
}

@media (max-width: 560px) {
  .site-nav .lang-switch { display: none; }
  .site-nav .pill { font-size: 12px; gap: 12px; min-height: 36px; padding: 0 12px 0 14px; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .payback-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stage { min-height: min(640px, calc(100svh - 104px)); }
  .section-head, .cases-head { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); }
  .cases-head .case-controls { grid-column: 2; grid-row: 1; justify-self: end; }
  .owner-grid { gap: 50px; }
  .offer-panel { gap: 55px; }
  .system-showcase { gap:32px; grid-template-columns:minmax(220px,.34fr) minmax(0,1fr); }
}

@media (max-width: 768px) {
  .offer-page .offer-steps { grid-template-columns: 1fr; }
  .offer-page .offer-step { border-bottom: 1px solid var(--line); }
  .offer-page .offer-detail-head { display: block; }
  .offer-page .cost-split { grid-template-columns: 1fr; }
  .cases-actions { justify-self: start; }
  .why-panel { display: block; }
  .why-panel h2 { font-size: clamp(32px, 8vw, 44px); }
  .why-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .why-figure { font-size: clamp(30px, 9vw, 42px); }
  .why-tile { min-height: 124px; padding: 18px; }
}

/* Twee kolommen laten per tegel te weinig breedte over: het cijfer, het bijschrift
   en het volgnummer kwamen op elkaar te staan. Onder deze breedte wordt elke tegel
   één regel, met het cijfer links en het bijschrift ernaast. Het volgnummer vervalt;
   01 tot en met 04 voegt bij vier tegels onder elkaar niets toe. */
@media (max-width: 560px) {
  .why-tiles { gap: 10px; grid-template-columns: 1fr; }
  .why-tile { align-items: baseline; column-gap: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; padding: 16px 18px; row-gap: 2px; }
  .why-figure { font-size: 32px; }
  .why-tile.is-word .why-figure { font-size: 21px; }
  .why-tile b { max-width: none; }
  .why-index { display: none; }
  .v2-head { display: block; }
  .v2-head > p, .v2-head > div > p { margin-top: 24px; }
  .v2-head h2 { font-size: clamp(46px, 12vw, 80px); }
  .payback-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer.footer-wide { padding-top: 46px; }
  .site-window { border-radius: 0 0 15px 15px; margin: 0 auto 25px; }
  .site-nav { height: 64px; }
  .site-window { padding-top: 64px; }
  .nav-scrolled .site-nav { height: 56px; }
  .nav-panel { top: 74px; }
  .wordmark { font-size: 18px; }
  .nav-right { gap: 12px; }
  .nav-right .pill { font-size: 12px; min-height: 36px; padding: 0 11px 0 13px; white-space: nowrap; }
  .nav-right .pill .pill-full { display: none; }
  .nav-right .pill .pill-short { display: inline; }
  .hero { padding-inline: 12px; }
  .hero-stage { min-height: min(590px, calc(100svh - 120px)); }
  .hero-visual { height: 100%; left: 0; width: 100%; }
  .hero-visual-shell::after { background: linear-gradient(180deg, rgba(237,240,237,.04) 20%, rgba(237,240,237,.88) 72%, rgba(237,240,237,.96) 100%); }
  .hero-copy { bottom: 30px; left: 26px; right: 26px; }
  .hero-copy .pill-row { align-items: flex-start; flex-direction: column; }
  .hero-copy h1 { font-size: clamp(42px, 10vw, 62px); max-width: 520px; }
  .hero-note { right: 25px; top: 23px; }
  .hero-index { display: none; }
  .stack-row { padding-block: 20px; }
  .section { padding: 86px 0; }
  .section-head, .cases-head, .owner-grid, .offer-panel, .team-heading, .team-grid-v3 { display: block; }
  .system-showcase { display:block; }
  .system-copy { max-width:600px; }
  .platform-study-embed { justify-self:auto; margin-top:42px; max-width:680px; }
  .section-head p, .cases-head p { margin-top: 25px; }
  .section-head h2, .cases-head h2 { font-size: clamp(50px, 13vw, 86px); }
  .system-board { min-height: 700px; padding: 24px; }
  .operating-view { padding: 24px; }
  .operating-view-main { display: block; }
  .operating-log { margin-top: 16px; }
  .operating-footer { align-items: start; display: block; }
  .operating-footer .signal-status { display: block; margin-top: 17px; }
  .signal-steps { display: block; margin-top: 85px; }
  .signal-steps::before { height: auto; left: 31px; right: auto; top: 42px; bottom: 45px; width: 1px; }
  .signal-svg { display: none; }
  .signal-step { min-height: 190px; margin-bottom: 16px; padding-left: 58px; }
  .signal-step h3 { margin-top: 22px; }
  .signal-step p { margin-top: 9px; }
  .signal-foot { align-items: start; display: block; }
  .signal-foot .signal-status { display: block; margin-top: 18px; }
  .case-rail { margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .case-card { flex-basis: 78vw; }
  .owner-photo { max-width: 430px; }
  .owner-copy { margin-top: 46px; }
  .team-heading > p { margin-top: 24px; }
  .team-grid-v3 { display: flex; flex-direction: column; margin-top: 48px; }
  /* Teamervaring eerst, de oprichter eronder: op een telefoon wil je weten wie
     het bedrijf is voordat je een portret van één persoon krijgt. */
  .team-capabilities { order: 1; }
  /* De schuine strepen scheiden drie koppen die op een telefoon toch al onder
     elkaar staan. Dan zijn het losse leestekens aan het regeleinde. */
  .team-capabilities h3 .pijler-sep { display: none; }
  .team-lead { order: 2; }
  /* Op desktop staat het portret in een eigen kolom en mag het vierkant groot
     zijn. Zodra die kolom wegvalt wordt datzelfde vierkant schermbreed, en dan
     is de oprichter het grootste element van de pagina. Hier wordt het een
     byline: klein portret, naam ernaast, tekst eronder. */
  .team-lead { align-items: center; column-gap: 16px; display: grid; grid-template-columns: 104px minmax(0, 1fr); }
  .founder-slot { grid-column: 1; grid-row: 1; }
  .team-caption { display: block; grid-column: 2; grid-row: 1; margin-top: 0; }
  .team-caption span { display: block; margin-top: 3px; }
  .team-lead > p { grid-column: 1 / -1; grid-row: 2; margin-top: 20px; }
  .team-lead { margin-top: 54px; }
  .offer-panel .offer-copy { margin-top: 42px; }
  .footer-row { align-items: start; display: block; }
  .footer-row a { display: inline-block; margin-top: 10px; }
}

@media (max-width: 375px) {
  .nav-right .pill { gap: 9px; }
  .lang-switch { font-size: 11px; }
  .hero-stage { min-height: min(590px, calc(100svh - 108px)); }
  .hero-copy h1 { font-size: 42px; }
  .hero-copy p { font-size: 15px; }
  .system-board { min-height: 720px; }
  .case-card { flex-basis: 84vw; }
}

@media (prefers-color-scheme: dark) {
  html, body { background: #cbd1cf; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .case-control { transition: none; }
  .signal-svg .traveller { display: none; }
}

/* v3 iteration: cases, FAQ and proof visuals stay in the same light editorial system. */
.faq-section { background: var(--soft); }
.faq-grid { align-items: start; display: grid; gap: clamp(40px, 9vw, 150px); grid-template-columns: minmax(220px, .65fr) minmax(0, 1fr); }
.faq-grid h2 { font-size: clamp(56px, 8vw, 112px); }
.faq-grid > div:first-child > p { font-size: 16px; line-height: 1.5; margin-top: 22px; max-width: 270px; }
.faq-list { display: grid; gap: 7px; }
.faq-list details { background: var(--paper); border: 0; border-radius: 12px; margin: 0; padding: 0 20px; }
.faq-list summary { align-items: center; cursor: pointer; display: flex; font-size: 16px; font-weight: 700; justify-content: space-between; list-style: none; min-height: 68px; padding-right: 28px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { align-items: center; background: var(--ink); border-radius: 50%; color: var(--paper); content: "+"; display: grid; font-size: 17px; height: 22px; line-height: 1; place-items: center; position: absolute; right: 0; top: 23px; width: 22px; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; padding: 15px 0 19px; max-width: 680px; }
.faq-list summary:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.faq-list details.is-animating { transform: none; will-change: height; }

.page-hero { background: var(--soft); padding: clamp(75px, 10vw, 145px) 0 70px; }
.page-hero-grid { align-items: end; display: grid; gap: 50px; grid-template-columns: minmax(0, 1fr) minmax(260px, .52fr); }
.page-hero h1 { font-size: clamp(64px, 10vw, 150px); max-width: 850px; }
.page-hero p { font-size: 17px; line-height: 1.5; max-width: 365px; }
.page-hero .section-number { margin-bottom: 22px; }
.topic-bar { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); overflow: hidden; }
.topic-rail { display: flex; gap: 9px; overflow-x: auto; padding: 18px var(--gutter); scrollbar-width: none; }
.topic-rail::-webkit-scrollbar { display: none; }
.topic-chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; flex: 0 0 auto; font-size: 13px; min-height: 42px; padding: 0 16px; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.topic-chip:hover, .topic-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.topic-chip:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.story-section { background: #f5f6f4; overflow: hidden; padding-bottom: clamp(95px, 12vw, 175px); }
.story-intro { align-items: end; display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 35px; }
.story-intro h2 { font-size: clamp(48px, 7vw, 100px); }
.story-intro p { font-size: 16px; line-height: 1.5; max-width: 330px; }
.story-card { background: var(--paper); border-radius: 14px; flex: 0 0 min(565px, 44vw); min-width: 310px; overflow: hidden; }
.story-grid { display: grid; gap: 11px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-grid .story-card { flex: none; min-width: 0; }
.story-grid .story-card:first-child { grid-column: 1 / -1; }
.story-grid .story-card:first-child .story-card-visual { aspect-ratio: 2.1 / 1; }
.story-card.is-hidden { display: none; }
.story-card-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; min-height: 64px; padding: 0 20px; }
.story-card-head strong { font-size: 17px; letter-spacing: -.04em; }
.story-card-head span { color: var(--muted); font-size: 11px; }
.story-card-visual { aspect-ratio: 1.32 / 1; background: #d8e1da; overflow: hidden; position: relative; }
.story-card-visual > img { height: 100%; object-fit: cover; width: 100%; }
.story-card-visual.photo-wide > img { object-position: center 22%; }
.story-card-visual.photo-top > img { object-position: center top; }
.story-caption { align-items: center; background: rgba(255, 254, 250, .94); bottom: 17px; display: flex; font-size: 13px; gap: 9px; left: 17px; padding: 10px 13px; position: absolute; }
.story-caption::before { background: var(--green); border-radius: 50%; content: ""; height: 7px; width: 7px; }
.story-card-copy { display: grid; gap: 12px; grid-template-columns: .7fr 1fr; padding: 18px 20px 23px; }
.story-card-copy .story-type { color: #4a926b; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-card-copy p { font-size: 14px; line-height: 1.45; }
.story-controls { display: flex; gap: 8px; }

.dashboard-visual { background: #dcebe1; height: 100%; padding: 24px; position: relative; }
.dashboard-visual::before { background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(214,241,227,.5)); content: ""; inset: 0; position: absolute; }
.dashboard-window { background: rgba(255,254,250,.92); border: 1px solid rgba(17,21,19,.14); box-shadow: 0 14px 30px rgba(17,21,19,.12); height: 74%; left: 10%; overflow: hidden; position: absolute; top: 13%; width: 80%; z-index: 1; }
.dashboard-bar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 7px; height: 31px; padding: 0 12px; }
.dashboard-bar i { background: var(--green); border-radius: 50%; height: 6px; width: 6px; }
.dashboard-bar b { font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-body { display: grid; gap: 12px; grid-template-columns: .75fr 1.25fr; padding: 15px; }
.dashboard-stat { background: #e4f5eb; padding: 12px; }
.dashboard-stat small, .dashboard-graph small { color: var(--muted); display: block; font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-stat strong { display: block; font-size: 25px; letter-spacing: -.07em; margin-top: 8px; }
.dashboard-stat em { color: #3d9769; display: block; font-size: 9px; font-style: normal; margin-top: 3px; }
.dashboard-graph { background: var(--paper); border: 1px solid var(--line); padding: 12px; }
.dashboard-graph svg { display: block; height: 86px; margin-top: 11px; width: 100%; }
.dashboard-tasks { border-top: 1px solid var(--line); grid-column: 1 / -1; padding-top: 10px; }
.dashboard-task { align-items: center; display: flex; font-size: 9px; gap: 7px; padding: 6px 0; }
.dashboard-task::before { background: var(--cyan); border-radius: 50%; content: ""; height: 6px; width: 6px; }
.dashboard-task:nth-child(3)::before { background: var(--orange); }
.dashboard-task:nth-child(4)::before { background: var(--green); }

.offer-page .page-hero { background: var(--paper); }
.offer-page .page-hero h1 { max-width: 800px; }
.offer-page .offer-page-hero { padding: clamp(64px, 8vw, 112px) 0 58px; }
.offer-page .offer-page-hero h1 { font-size: clamp(55px, 8vw, 112px); }
.offer-page .offer-detail { background: var(--soft); padding: clamp(64px, 8vw, 110px) 0; }
.offer-page .offer-detail-head { align-items: end; display: grid; gap: clamp(28px, 4vw, 60px); grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); margin-bottom: clamp(34px, 4vw, 52px); }
.offer-page .offer-detail h2 { font-size: clamp(44px, 5vw, 70px); }
.offer-page .offer-detail-copy > p { font-size: 17px; line-height: 1.5; max-width: 480px; }
.offer-page .offer-steps { border-top: 1px solid var(--line); display: grid; gap: 0 clamp(24px, 3vw, 44px); grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
.offer-page .offer-step { border-bottom: 0; display: block; padding: 22px 0 6px; }
.offer-page .offer-step > b { color: #4a926b; display: block; font-size: 12px; letter-spacing: .1em; margin-bottom: 12px; }
.offer-page .offer-step strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.offer-page .offer-step p { font-size: 14px; line-height: 1.45; margin-top: 4px; }
.offer-page .cost-block { background: var(--ink); border-radius: var(--radius); color: var(--paper); margin-top: clamp(46px, 5vw, 74px); padding: clamp(28px, 3.6vw, 52px); }
.offer-page .cost-block .eyebrow { color: var(--green); }
.offer-page .cost-split { display: grid; gap: clamp(22px, 3vw, 44px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 26px; }
.offer-page .cost-part { border-top: 1px solid #36413a; padding-top: 20px; }
.offer-page .cost-figure { display: block; font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.offer-page .cost-figure small { color: #b8c3bc; font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.offer-page .cost-part p { color: #bdc9c1; font-size: 14px; line-height: 1.5; margin-top: 12px; }
.offer-page .cost-foot { align-items: center; border-top: 1px solid #36413a; display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; margin-top: 28px; padding-top: 20px; }
.offer-page .cost-foot p { color: #bdc9c1; font-size: 13px; margin: 0; max-width: 520px; }

.offer-page .offer-cta { background: var(--ink); color: var(--paper); padding: clamp(55px, 8vw, 105px) 0; }
.offer-page .offer-cta h2 { color: var(--paper); font-size: clamp(48px, 7vw, 100px); max-width: 800px; }
.offer-page .offer-cta p { color: #bdc9c1; font-size: 17px; line-height: 1.5; margin-top: 20px; max-width: 410px; }
.offer-page .offer-cta .pill { margin-top: 28px; }

.workflow-visual { background: #e5f3e8; height: 100%; overflow: hidden; position: relative; }
.workflow-grid { background-image: linear-gradient(rgba(17,21,19,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(17,21,19,.07) 1px, transparent 1px); background-size: 28px 28px; inset: 0; opacity: .62; position: absolute; }
.workflow-line { border-top: 2px dashed rgba(17,21,19,.38); height: 1px; position: absolute; transform-origin: left center; width: 31%; }
.workflow-line::after { background: var(--green); border-radius: 50%; content: ""; height: 11px; position: absolute; right: -2px; top: -6px; width: 11px; }
.workflow-line.line-one { left: 26%; top: 43%; transform: rotate(-15deg); }
.workflow-line.line-two { left: 55%; top: 37%; transform: rotate(18deg); }
.workflow-node { background: rgba(255,254,250,.92); border: 1px solid rgba(17,21,19,.16); box-shadow: 0 10px 18px rgba(17,21,19,.08); padding: 16px; position: absolute; width: 28%; }
.workflow-node small { color: #4a926b; display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.workflow-node b { display: block; font-size: 17px; letter-spacing: -.05em; margin-top: 10px; }
.workflow-node.node-one { left: 6%; top: 28%; }
.workflow-node.node-two { left: 37%; top: 17%; }
.workflow-node.node-three { right: 6%; top: 44%; }
.workflow-node.node-three b { color: #418e64; }
.story-section + .system-section .system-board { min-height: 390px; }
.trace-points { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 128px; position: relative; z-index: 1; }
.trace-point { border-top: 1px solid rgba(17,21,19,.17); padding-top: 11px; }
.trace-point b { color: #4a926b; display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.trace-point span { color: #52645a; display: block; font-size: 13px; line-height: 1.4; margin-top: 7px; max-width: 210px; }

/* Cases: a quiet editorial ledger, one approved case at a time. */
.case-page-hero { padding-bottom: clamp(64px, 7vw, 96px); }
.case-ledger { background: var(--soft); padding: clamp(34px, 5vw, 72px) 0 clamp(100px, 12vw, 170px); }
.case-feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); overflow: hidden; }
.case-feature-image { min-height: 690px; overflow: hidden; position: relative; }
.case-feature-image::after { background: linear-gradient(180deg, transparent 62%, rgba(11,17,13,.55)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.case-feature-image img { height: 100%; object-fit: cover; object-position: 50% 48%; width: 100%; }
.case-feature-image img.daily-brief-photo { object-position: 50% 50%; }
.case-feature-image img.accounting-photo { object-position: 50% 50%; }
.case-feature-image > span { bottom: 22px; color: white; font-size: 10px; font-weight: 700; left: 24px; letter-spacing: .12em; position: absolute; text-transform: uppercase; z-index: 1; }
.case-feature + .case-feature { margin-top: 28px; }
.case-feature-reverse .case-feature-image { grid-column: 2; grid-row: 1; }
.case-feature-reverse .case-feature-copy { grid-column: 1; grid-row: 1; }
.case-feature-image.daily-brief-image .brief-workspace-photo { object-position: 37% 50%; }
.case-feature-image .daily-brief-ui { height: 29%; left: 22.8%; top: 20.2%; width: 42%; }
.case-feature-image.daily-brief-image > span { z-index: 3; }
.case-feature-image.daily-brief-pending > span { z-index: 3; }
.case-feature-copy { align-self:center; padding: clamp(36px, 6vw, 84px); }
.case-feature-copy h2 { font-size: clamp(42px, 5vw, 72px); max-width: 610px; }
.case-feature-copy > p { font-size: 16px; line-height: 1.55; margin-top: 25px; max-width: 520px; }
.case-feature-copy > p + .pill { margin-top: 30px; }
.case-flow-list { border-top: 1px solid var(--line); list-style: none; margin: 34px 0 30px; padding: 0; }
.case-flow-list li { border-bottom: 1px solid var(--line); display: grid; gap: 16px; grid-template-columns: minmax(135px,.62fr) 1fr; padding: 17px 0; }
.case-flow-list b { font-size: 12px; }
.case-flow-list span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.platform-flow-break { background: #edf1ee; border: 1px solid rgba(17,21,19,.1); border-radius: var(--radius); margin: 28px clamp(24px, 6vw, 92px) 0; overflow: hidden; }
.platform-flow-break-copy { align-items: end; display: grid; gap: clamp(24px, 4vw, 54px); grid-template-columns: minmax(0, .9fr) minmax(280px, .72fr); padding: clamp(28px, 3.4vw, 44px) clamp(24px, 4vw, 52px) clamp(20px, 2.5vw, 32px); }
.platform-flow-break-copy h2 { font-size: clamp(36px, 4.2vw, 58px); max-width: 560px; }
.platform-flow-break-copy p { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 460px; }
.platform-flow-embed { aspect-ratio: 8 / 5; background: #e6ebe7; border: 0; display: block; width: 100%; }
.platform-flow-break + .case-feature { margin-top: 28px; }


@media (max-width: 768px) {
  .faq-grid, .page-hero-grid, .offer-page .offer-detail-grid { display: block; }
  .faq-grid > div:first-child > p, .page-hero p { margin-top: 22px; }
  .faq-list { margin-top: 42px; }
  .page-hero h1 { font-size: clamp(58px, 16vw, 100px); }
  .story-intro { display: block; }
  .story-intro p { margin-top: 22px; }
  .story-controls { margin-top: 22px; }
  .story-grid { display: block; }
  .story-grid .story-card { margin-bottom: 11px; }
  .story-grid .story-card:first-child .story-card-visual { aspect-ratio: 1.32 / 1; }
  .story-card { flex-basis: 83vw; }
  .story-card-copy { display: block; }
  .story-card-copy p { margin-top: 9px; }
  .offer-page .offer-detail-copy { margin-bottom: 48px; }
  .offer-page .price-card-v3 { margin-inline: 0; }
  .story-section + .system-section .system-board { min-height: 500px; }
  .trace-points { display: block; margin-top: 88px; }
  .trace-point { margin-top: 13px; }
  .trace-point span { max-width: none; }
  .case-feature { display: block; }
  .case-feature-reverse .case-feature-image, .case-feature-reverse .case-feature-copy { grid-column: auto; grid-row: auto; }
  .case-feature-image { aspect-ratio: .95 / 1; min-height: 0; }
  .case-feature-copy { padding: 38px 24px 46px; }
  .case-flow-list li { display: block; }
  .case-flow-list span { display: block; margin-top: 6px; }
  .platform-flow-break { margin-inline: 0; }
  .platform-flow-break-copy { display: block; padding: 30px 24px 24px; }
  .platform-flow-break-copy p { margin-top: 18px; }
  .platform-flow-embed { aspect-ratio: auto; height: 750px; }
}

@media (max-width: 375px) {
  .faq-list details { padding-inline: 16px; }
  .faq-list summary { font-size: 15px; }
  .topic-rail { padding-inline: 20px; }
}

/* Nodefy-like transitions: the page reveals in calm layers instead of popping in. */
.site-window { animation: window-arrive .72s cubic-bezier(.23, 1, .32, 1) backwards; }
.hero-copy > * { animation: hero-arrive .72s cubic-bezier(.23, 1, .32, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: .12s; }
.hero-copy > *:nth-child(2) { animation-delay: .2s; }
.hero-copy > *:nth-child(3) { animation-delay: .28s; }
.hero-copy > *:nth-child(4) { animation-delay: .36s; }
.hero-note, .hero-index { animation: soft-arrive .8s ease both; animation-delay: .35s; }
.reveal-ready .reveal-target { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.23, 1, .32, 1), transform .7s cubic-bezier(.23, 1, .32, 1); }
.reveal-ready .reveal-target.is-visible { opacity: 1; transform: none; }
.reveal-ready .reveal-target:nth-child(2) { transition-delay: .06s; }
.reveal-ready .reveal-target:nth-child(3) { transition-delay: .12s; }
.case-card, .faq-list details, .offer-panel, .operating-view, .platform-study-embed { transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s ease; }
.case-card:hover { box-shadow: 0 18px 34px rgba(31, 44, 38, .12); transform: translateY(-5px); }
.faq-list details:hover { box-shadow: 0 10px 24px rgba(31, 44, 38, .07); transform: translateY(-2px); }
.offer-panel:hover, .operating-view:hover, .platform-study-embed:hover { box-shadow: 0 18px 38px rgba(31, 44, 38, .11); }
.case-rail, .topic-rail { scroll-behavior: smooth; scroll-snap-type: x proximity; }
.case-card, .story-card { scroll-snap-align: start; }
.nav-scrolled .site-nav { backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); background: rgba(255, 254, 250, .62); border-color: rgba(255, 255, 255, .5); border-radius: 999px; box-shadow: 0 10px 30px rgba(31, 44, 38, .12); height: 64px; padding-inline: clamp(14px, 1.8vw, 26px); top: 10px; width: calc(100% - 26px); }
@keyframes window-arrive { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; } }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nav-item-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes soft-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .site-window, .hero-copy > *, .hero-note, .hero-index { animation: none; }
  .reveal-ready .reveal-target { opacity: 1; transform: none; transition: none; }
  .case-card, .faq-list details, .offer-panel, .operating-view, .platform-study-embed { transition: none; }
}

/* Mobiel, aanbod-pagina ------------------------------------------------------
   De regels voor .offer-page staan verderop in dit bestand dan de media-blokken
   hierboven, dus een override moet hier staan om te winnen. */
@media (max-width: 900px) {
  .offer-page .offer-detail-head { display: block; }
  .offer-page .offer-detail-head > p { margin-top: 20px; }
  .offer-page .offer-detail h2 { font-size: clamp(34px, 9vw, 48px); }
  .offer-page .offer-steps { grid-template-columns: 1fr; }
  .offer-page .offer-step { border-bottom: 1px solid var(--line); padding: 18px 0; }
  .offer-page .offer-step:last-child { border-bottom: 0; }
  .offer-page .cost-split { gap: 0; grid-template-columns: 1fr; }
  .offer-page .cost-part + .cost-part { margin-top: 22px; }
  .offer-page .cost-figure { font-size: clamp(30px, 8.5vw, 40px); }
  .offer-page .cost-figure small { display: block; margin-left: 0; margin-top: 8px; }
  .offer-page .cost-foot { align-items: flex-start; flex-direction: column; }
  .offer-page .cost-foot .pill { width: 100%; justify-content: space-between; }
  .offer-page .page-hero h1 { font-size: clamp(40px, 12vw, 64px); }
  .offer-page .offer-cta h2 { font-size: clamp(38px, 11vw, 60px); }
}