/* BoostYourStream: zelfde wereld als FACEOFF (licht en warm, Unbounded + Hanken Grotesk). Lettertypes lokaal. */
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url(/fonts/unbounded-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url(/fonts/unbounded-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url(/fonts/unbounded-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2"); }

:root {
  --room: #FFFFFF; --paper: #FFFFFF; --ink: #2A101E; --ink-2: #4A2A3A; --mute: #6A525E;
  --line: rgba(42, 16, 30, 0.13); --line-2: rgba(42, 16, 30, 0.22);
  --peach: #FFF0F3; --pink: #FFE5EB; --lilac: #FFF0F3; --sand: #FAFAFB;
  /* TikTok-rood als enige accent (Razzmatazz, 28 okt), met lichte en donkere varianten */
  --accent: #FE2C55; --accent-dark: #D91E44; --accent-soft: #FFE5EB; --accent-tint: #FFF3F5; --accent-line: #FFC4D1;
  --left: #FE2C55; --mid: #FE2C55; --right: #FE2C55;
  --fo-left: #FE2C55; --fo-mid: #FE2C55; --fo-right: #FE2C55;
  --ok: #17784A; --ok-bg: #E2F5EA; --warn: #8A5200; --warn-bg: #FFF1D6; --bad: #B3261E; --bad-bg: #FDE4E1;
  /* BoostYourAgency en FACEOFF delen hetzelfde verloop (logo spot op podium, Gilles 15 okt 2026). */
  --grad: linear-gradient(var(--accent), var(--accent)); /* geen verloop meer, enkel effen rood */
  --grad-fo: linear-gradient(var(--accent), var(--accent));
  --grad-soft: linear-gradient(var(--accent-tint), var(--accent-tint));
  --display: "Plus Jakarta Sans", "Hanken Grotesk", system-ui, sans-serif; /* koppen (Carlo, 21 okt) */
  --brand: "Unbounded", "Hanken Grotesk", system-ui, sans-serif; /* enkel woordmerk BYA en FACEOFF */
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r: 24px; --r-s: 16px; --r-c: 12px; --r-xs: 10px;
  --ink-hover: #3D1A2C; --on-ink: #FFFFFF; --on-ink-soft: #E8D3DC; --soft: var(--mute);
  --t-hover: 140ms; --t-fade: 160ms; --t-settle: 800ms;
  --shadow: 0 1px 0 rgba(42,16,30,.04), 0 18px 40px -26px rgba(42,16,30,.35);
  --shadow-lift: 0 1px 0 rgba(42,16,30,.05), 0 30px 64px -30px rgba(42,16,30,.5);
  --ease: cubic-bezier(.16, 1, .3, 1); /* de enige curve */
  --gut: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--room); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--room); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; word-spacing: .04em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.6vw, 3.7rem); letter-spacing: -0.025em; }
h3 { font-size: 1.08rem; letter-spacing: -0.02em; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--mid); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: 2px; border-radius: 8px; }
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: var(--room); padding: .6rem 1rem; border-radius: 12px; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 860px; }
.center-t { text-align: center; }
.center-t .lead { margin-left: auto; margin-right: auto; }
.mute { color: var(--mute); }
.small { font-size: .9rem; }
.ic { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.ic.sm { width: 1rem; height: 1rem; }
* { scrollbar-color: var(--line-2) transparent; }
input::placeholder, textarea::placeholder { color: var(--mute); }

/* ---------- testband ---------- */
.test-banner { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .45rem var(--gut); background: var(--peach); color: var(--ink); font-size: .82rem; font-weight: 600; text-align: center; }
.test-banner .ic { width: 1rem; height: 1rem; color: var(--ink-2); }

/* ---------- kop ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--room) 90%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 1.6rem; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; line-height: 1; white-space: nowrap; }
.logo .mark { width: 40px; height: 40px; flex: 0 0 auto; }
.wm { font-family: var(--brand); font-weight: 800; letter-spacing: -0.05em; line-height: 1; display: inline-flex; align-items: center; gap: .28em; color: var(--ink); white-space: nowrap; }
.wm .pil { font-size: .62em; letter-spacing: -.01em; background: var(--ink); color: var(--room); border-radius: 999px; padding: .22em .5em .28em; }
.wm .ag { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.logo .wm { font-size: 1.36rem; }
.fo-lock { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.fo-wm { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--brand); font-weight: 800; letter-spacing: -0.05em; font-size: 1.6rem; line-height: 1; }
.fo-wm .pil { font-size: .48em; letter-spacing: 0; background: var(--ink); color: var(--room); border-radius: 999px; padding: .3em .58em .36em; }
.fo-wm .off { background: var(--grad-fo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.fo-lock .by { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .92rem; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem .3rem .45rem; }
.fo-lock .by img { width: 20px; height: 20px; }
.fo-lock .by-wm .wm { font-size: .95rem; }
.fo-text .fo-lock { margin-bottom: 1.2rem; }
.main-nav { display: flex; align-items: center; gap: .2rem; }
.main-nav > a, .dd-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .8rem; border-radius: 12px; font-weight: 600; font-size: .98rem; color: var(--ink-2); text-decoration: none; background: none; border: 0; transition: background var(--t-hover) var(--ease); }
.main-nav > a:hover, .dd-btn:hover, .dd-btn[aria-expanded="true"] { background: var(--sand); }
.main-nav > a[aria-current="page"] { background: var(--peach); color: var(--ink); }
.dd { position: relative; }
.dd-btn .ic { transition: transform var(--t-hover) var(--ease); }
.dd-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.mega { position: absolute; top: calc(100% + 10px); left: -1rem; width: min(1180px, 94vw); max-height: calc(100vh - 120px); overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift); padding: .8rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-hover) var(--ease), transform var(--t-fade) var(--ease), visibility 0s 200ms; }
.dd.open .mega, .dd:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-hover) var(--ease), transform var(--t-fade) var(--ease); }
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .2rem .6rem; }
.mm-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 16px; text-decoration: none; transition: background var(--t-hover) var(--ease); }
.mm-item:hover { background: var(--sand); }
.mm-item .ic { color: var(--mute); margin-top: .1rem; }
.mm-item b { display: block; font-weight: 600; }
.mm-item small { display: block; color: var(--mute); font-size: .86rem; line-height: 1.35; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.lang { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .88rem; text-decoration: none; padding: .45rem .7rem; border-radius: 999px; border: 1px solid var(--line); }
.lang:hover { background: var(--sand); }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); align-items: center; justify-content: center; }
.burger .ic:last-child { display: none; }
.burger[aria-expanded="true"] .ic:first-child { display: none; }
.burger[aria-expanded="true"] .ic:last-child { display: block; }
.mnav { border-top: 1px solid var(--line); background: var(--room); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 1rem 0 1.5rem; }
.mnav-h { font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .3rem; }
.mnav-mods { display: grid; gap: .1rem; margin-bottom: 1rem; }
.mnav-links { display: grid; gap: .1rem; border-top: 1px solid var(--line); padding-top: .8rem; margin-bottom: 1rem; }
.mnav-links a { padding: .75rem .9rem; font-weight: 600; text-decoration: none; border-radius: 12px; }

/* ---------- knoppen ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid transparent; transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), background var(--t-hover) var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-grad { background: var(--grad); color: #fff; }
.btn-grad:hover { filter: saturate(1.08) brightness(1.03); }
.btn-ink { background: var(--ink); color: var(--room); }
.btn-ink:hover { background: var(--ink-hover); }
.btn-line { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-ghost-light { color: #fff; border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .92rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btns { display: flex; flex-wrap: wrap; gap: .7rem; }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color var(--t-hover) var(--ease); }
.more:hover { text-decoration-color: var(--mid); }
.more .ic { transition: transform var(--t-hover) var(--ease); }
.more:hover .ic { transform: translateX(2px); }
/* pijlchip: de kleine handtekening op knoppen */
.chip-arrow { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin: 0 -.65rem 0 .15rem; border-radius: 999px; background: rgba(255,255,255,.2); transition: transform var(--t-hover) var(--ease); }
.btn-line .chip-arrow { background: var(--sand); }
.btn-sm .chip-arrow { width: 1.4rem; height: 1.4rem; margin-right: -.5rem; }
.btn:hover .chip-arrow { transform: translateX(2px); }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.hero-plain { padding-bottom: 1.5rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero-text { display: flex; flex-direction: column; gap: 1.4rem; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 40rem; margin-top: 1.1rem; }
.hero-text .lead { margin-top: 0; }
.hero-plain h1 { max-width: 20ch; }
.center-t h1 { margin: 0 auto; }
.proof { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-weight: 600; font-size: .95rem; color: var(--ink-2); }
.proof li, .ticks li { display: flex; align-items: flex-start; gap: .5rem; }
.proof .ic, .ticks .ic { color: var(--ok); width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.crumb { font-size: .9rem; color: var(--mute); font-weight: 600; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.stage { position: relative; aspect-ratio: 1.1; }
.stage-shot { position: absolute; inset: 0 12% 22% 0; width: 88%; border-radius: var(--r); box-shadow: var(--shadow-lift); border: 1px solid var(--line); object-fit: cover; object-position: left top; height: 78%; animation: rise 900ms var(--ease) both; }
.stage-mock { position: absolute; left: 6%; bottom: 0; width: 58%; animation: rise 900ms 120ms var(--ease) both; }
.stage-phone { position: absolute; right: 0; bottom: 4%; width: 34%; animation: rise 900ms 240ms var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
h1 .w { display: inline-block; animation: rise var(--t-settle) var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
h1 .soft { color: var(--soft); }
.cap { font-size: .8rem; color: var(--mute); margin-top: .6rem; }
.hero-visual .cap { text-align: right; }
.inplans { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .9rem; color: var(--mute); font-weight: 600; }
.chip { display: inline-block; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem; color: var(--ink); font-weight: 600; font-size: .84rem; }

/* ---------- secties ---------- */
.sec { padding: clamp(3rem, 7vw, 6rem) 0; }
.sec-tight { padding-top: 1.5rem; }
.sec-soft { background: var(--sand); }
.sec-ink { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-ink p { color: var(--ink-2); }
.h-sec { font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.025em; max-width: 24ch; margin-bottom: 1.6rem; }
.h-sub { font-size: 1.25rem; margin-bottom: .4rem; }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end; margin-bottom: 2rem; }
.sec-head .h-sec { margin: 0; }
.sec-head p { color: var(--ink-2); font-size: 1.1rem; }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.pain { padding: 1.6rem 1.6rem 0 0; }
.pain + .pain { padding-left: 1.6rem; border-left: 1px solid var(--line); }
.pain h3 { margin-bottom: .6rem; font-size: 1.15rem; }
.pain p { color: var(--ink-2); }

.flow { list-style: none; margin: 0 0 3.5rem; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; counter-reset: f; }
.flow li a { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease); position: relative; }
.flow li a:hover { border-color: var(--ink); }
.flow .fi { width: 2.4rem; height: 2.4rem; border-radius: var(--r-c); background: var(--sand); color: var(--ink); display: grid; place-items: center; }
.flow b { font-size: .95rem; line-height: 1.25; }
.showcase { display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.rev .split-text { order: 2; }
.split-text { display: flex; flex-direction: column; gap: 1.1rem; }
.split-text h3 { font-size: clamp(1.3rem, 2.3vw, 1.9rem); letter-spacing: -0.035em; }
.split-text p { color: var(--ink-2); font-size: 1.06rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-weight: 600; }
.mod-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .7rem; margin-top: 3rem; }
.sec-soft .h-sec + .mod-links { margin-top: 0; }
.mod-link { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.mod-link:hover { border-color: var(--ink); }
.mod-link > .ic:first-child { color: var(--ink-2); width: 1.5rem; height: 1.5rem; }
.mod-link span { flex: 1; min-width: 0; }
.mod-link b { display: block; }
.mod-link small { display: block; color: var(--mute); font-size: .86rem; line-height: 1.35; }
.mod-link .go { color: var(--mute); }

.tiktok { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tiktok-head p { font-size: 1.12rem; margin-bottom: 1.4rem; }
.tt-steps, .vault-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.tt-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.tt-steps li:last-child { border-bottom: 0; }
.tt-steps h3, .vault-flow h3 { color: var(--ink); margin-bottom: .35rem; }
.n { width: 3rem; height: 3rem; border-radius: var(--r-c); display: grid; place-items: center; background: var(--sand); color: var(--ink); border: 1px solid var(--line); }
.vault-flow { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.vault-flow li { display: flex; flex-direction: column; gap: .8rem; position: relative; }

.fo { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.fo-text p { color: var(--ink-2); font-size: 1.1rem; margin-bottom: 1.5rem; }
.fo-shots { position: relative; padding-right: 14%; }
.fo-shots > img:first-child { border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.fo-phone { position: absolute; right: 0; bottom: -8%; width: 30%; border-radius: 24px; border: 6px solid var(--ink); box-shadow: var(--shadow-lift); }
.bureau > * { max-width: 860px; }
.bureau p { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 1.2rem; }

.cta-band { background: var(--ink); color: var(--on-ink); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.cta-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-in h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin-bottom: .6rem; }
.cta-in p { font-size: 1.1rem; max-width: 38rem; color: var(--on-ink-soft); }
.cta-btns { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- modulepagina ---------- */
.pain-quote { margin: 0 0 3rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.7rem); letter-spacing: -0.03em; line-height: 1.3; max-width: 38ch; color: var(--ink); }
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 4rem; }
.feat { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem 1rem; }
.feat .fnum { grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--peach); color: var(--mid); display: grid; place-items: center; }
.feat h3 { align-self: center; }
.feat p { color: var(--ink-2); }
/* Functies als lijst (modulepagina's met echt scherm) */
.feat-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.feat-split .pain-quote { margin: 0; position: sticky; top: 7rem; }
.feat-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.feat-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .35rem 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.feat-list .fl-n { grid-row: span 2; padding-top: .2rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--mute); font-variant-numeric: tabular-nums; }
.feat-list h3 { margin: 0; }
.feat-list p { margin: 0; color: var(--ink-2); max-width: 56ch; }
@media (max-width: 860px) { .feat-split { grid-template-columns: 1fr; gap: 2rem; } .feat-split .pain-quote { position: static; } }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.gallery figure, .shot { margin: 0; }
.gallery img, .shot img { border-radius: var(--r-s); border: 1px solid var(--line); }
.narrow-shot { max-width: 900px; margin: 3rem auto 0; }

/* ---------- prijzen ---------- */
.toggle { display: inline-flex; margin: 1.8rem auto 0; padding: .3rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.toggle button { border: 0; background: none; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--room); }
.save { font-size: .74rem; font-weight: 600; background: var(--ok-bg); color: var(--ok); border-radius: 999px; padding: .15rem .5rem; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem 1.4rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.plan.rec { border: 2px solid var(--ink); }
.rec-tag { position: absolute; top: -0.8rem; left: 1.3rem; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .78rem; border-radius: 999px; padding: .25rem .75rem; }
.plan h3 { font-size: 1.25rem; }
.ptag { color: var(--mute); font-weight: 600; font-size: .92rem; }
.price { display: flex; align-items: baseline; gap: .35rem; margin-top: .6rem; }
.price .amt { font-family: var(--display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.price .from, .price .cur { font-weight: 600; color: var(--ink-2); }
.pper { font-size: .85rem; color: var(--mute); }
.plim { font-weight: 600; font-size: .95rem; padding: .6rem 0 .8rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.plan .btn { margin: .2rem 0 1rem; }
.plan .ticks { font-size: .94rem; font-weight: 500; }
.pnote { margin-top: 1.4rem; color: var(--mute); font-size: .92rem; text-align: center; }
.never { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1rem; font-weight: 600; text-align: center; }
.never .ic { color: var(--ink-2); }
.cmp-wrap { overflow-x: auto; background: var(--paper); border-radius: var(--r); border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { padding: .85rem 1rem; text-align: center; border-bottom: 1px solid var(--line); font-size: .95rem; }
.cmp tbody th { text-align: left; font-weight: 600; }
.cmp thead th { font-family: var(--display); font-size: .95rem; letter-spacing: -0.02em; position: sticky; top: 0; background: var(--paper); }
.cmp .rec { background: color-mix(in srgb, var(--pink) 40%, #fff); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.yes .ic { color: var(--ok); margin: 0 auto; }
.no .ic { color: var(--line-2); margin: 0 auto; }
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.addon { padding: 1.4rem 1.4rem 0 0; }
.addon + .addon { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.aprice { font-weight: 600; color: var(--ink); margin: .4rem 0; }
.addon p:last-child { color: var(--ink-2); font-size: .95rem; }

/* ---------- vragen ---------- */
.faq { display: flex; flex-direction: column; margin-bottom: 1.5rem; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem .2rem; font-weight: 600; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform var(--t-hover) var(--ease); color: var(--ink-2); }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 .2rem 1.3rem; color: var(--ink-2); max-width: 68ch; }

/* ---------- over ons ---------- */
.story p { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 1.2rem; max-width: 66ch; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0; }
.numbers div { display: flex; flex-direction: column-reverse; gap: .3rem; padding: 1.2rem 0; border-top: 2px solid var(--ink); }
.numbers dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -0.04em; }
.numbers dt { color: var(--ink-2); font-weight: 600; }

/* ---------- veiligheid ---------- */
.sec-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem 3rem; }
.sblock h3 { margin-bottom: .5rem; }
.sblock p { color: var(--ink-2); }

/* ---------- boeken ---------- */
.book { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
.book-main { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow); min-height: 420px; }
.book-side { padding: 1.4rem; border-radius: var(--r); background: var(--grad-soft); display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 100px; }
.bsteps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.bsteps li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; color: var(--mute); padding: .35rem .8rem .35rem .35rem; border-radius: 999px; background: var(--sand); }
.bsteps li span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: .8rem; }
.bsteps li[aria-current="step"] { background: var(--ink); color: var(--room); }
.bsteps li[aria-current="step"] span { background: var(--on-ink); color: var(--ink); }
.bsteps li.done span { background: var(--ok); color: #fff; }
.bpanel { display: flex; flex-direction: column; gap: .9rem; animation: nudge 420ms var(--ease) both; }
@keyframes nudge { from { transform: translateY(10px); } to { transform: none; } }
.bpanel[hidden] { display: none; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; margin-top: .4rem; }
.day, .slot { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .85rem .5rem; border-radius: 16px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 600; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.day small { color: var(--mute); font-weight: 600; font-size: .8rem; text-transform: capitalize; }
.day b { font-family: var(--display); font-size: 1.15rem; }
.day:hover, .slot:hover { border-color: var(--ink); transform: translateY(-1px); }
.day[aria-pressed="true"], .slot[aria-pressed="true"] { background: var(--ink); color: var(--room); border-color: var(--ink); }
.day[aria-pressed="true"] small { color: var(--on-ink-soft); }
.day[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .55rem; }
.slot { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.chosen { font-weight: 600; color: var(--ink); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fgrid label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .93rem; }
.fgrid .full { grid-column: 1 / -1; }
.fgrid input, .fgrid select, .fgrid textarea { width: 100%; padding: .78rem .9rem; border-radius: var(--r-c); border: 1px solid var(--line-2); background: #fff; font-weight: 500; font-size: 1rem; caret-color: var(--mid); }
.fgrid input:focus, .fgrid select:focus, .fgrid textarea:focus { outline: none; border-color: var(--mid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mid) 18%, transparent); }
.fgrid [aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
.fgrid .check { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 500; }
.fgrid .check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--mid); flex: 0 0 auto; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ferr { color: var(--bad); background: var(--bad-bg); padding: .7rem 1rem; border-radius: 12px; font-weight: 600; }
.frow { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.ok { align-items: flex-start; }
.okmark { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.okmark .ic { width: 1.8rem; height: 1.8rem; }

/* ---------- nagetekende schermen ---------- */
.mock { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); overflow: hidden; font-size: 13px; line-height: 1.35; text-align: left; }
.mock-bar { display: flex; align-items: center; gap: 5px; padding: 9px 12px; background: var(--sand); border-bottom: 1px solid var(--line); }
.mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #E8CFC3; }
.mock-bar b { margin-left: 8px; font-family: var(--display); font-size: 11px; letter-spacing: -0.03em; color: var(--mute); }
.mock-body { display: grid; grid-template-columns: 96px 1fr; min-height: 220px; }
.mock-body.noside { grid-template-columns: 1fr; }
.mock-side { border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; background: color-mix(in srgb, var(--room) 70%, #fff); }
.mock-side i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--mute); padding: 5px 7px; border-radius: 8px; }
.mock-side i.on { background: var(--peach); color: var(--ink); }
.mock-main { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mock-h { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.03em; }
.av { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 10px; letter-spacing: -0.02em; color: var(--ink-2); }
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kcol { background: var(--room); border-radius: 12px; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.kh { font-weight: 600; font-size: 11px; display: flex; justify-content: space-between; color: var(--ink-2); }
.kh span { background: #fff; border-radius: 999px; padding: 0 6px; }
.kcard { display: flex; gap: 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px; }
.kcard b { display: block; font-size: 12px; }
.kcard small { display: block; color: var(--mute); font-size: 10.5px; }
.kcard em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--mid); }
.onb-head { display: flex; align-items: center; gap: 9px; }
.onb-head b { display: block; }
.onb-head small { color: var(--mute); font-size: 11px; }
.pct { white-space: nowrap; margin-left: auto; background: var(--peach); border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.bar { height: 7px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }
.bar.light { background: rgba(255,255,255,.35); }
.bar.light i { background: #fff; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--room); font-weight: 600; }
.steps li svg { width: 16px; height: 16px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; }
.steps li span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); }
.steps li.done { color: var(--mute); text-decoration: line-through; text-decoration-color: var(--line-2); }
.phone { width: 100%; max-width: 230px; aspect-ratio: 9 / 18.5; background: var(--ink); border-radius: 30px; padding: 7px; box-shadow: var(--shadow-lift); }
.phone-in { height: 100%; border-radius: 24px; background: var(--room); padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; font-size: 11.5px; line-height: 1.35; overflow: hidden; }
.ph-top { display: flex; justify-content: space-between; align-items: center; }
.ph-top b { font-family: var(--display); font-size: 14px; letter-spacing: -0.03em; }
.ph-card { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 8px 9px; display: flex; flex-direction: column; gap: 3px; }
.ph-card small { color: var(--mute); font-weight: 600; font-size: 10px; }
.ph-card strong { font-family: var(--display); font-size: 16px; }
.grad-card { background: var(--grad); border: 0; color: #fff; }
.grad-card small { color: #FFE9F0; }
.ph-tabs { margin-top: auto; display: flex; justify-content: space-around; padding: 6px; background: #fff; border-radius: 12px; }
.ph-tabs i { width: 16px; height: 16px; border-radius: 6px; background: var(--sand); }
.ph-tabs i.on { background: var(--mid); }
.acad { display: grid; gap: 6px; }
.lesson { display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line); border-radius: 11px; }
.lesson .num { width: 24px; height: 24px; border-radius: 8px; background: var(--lilac); display: grid; place-items: center; font-weight: 600; font-size: 11px; color: var(--right); }
.lesson b { display: block; font-size: 12px; }
.lesson small { color: var(--mute); font-size: 10.5px; }
.lesson .st { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--mute); }
.lesson.done .st { color: var(--ok); }
.round { display: grid; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--room); }
.rrow b { font-size: 12px; }
.tag { margin-left: auto; font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bcard { border: 1px solid var(--line); border-radius: 10px; padding: 7px; display: flex; flex-direction: column; gap: 2px; }
.bcard small { color: var(--mid); font-weight: 600; font-size: 10px; }
.bcard b { font-size: 11.5px; }
.bcard em { font-style: normal; color: var(--mute); font-size: 10.5px; }
.mt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mt th { text-align: left; font-size: 10.5px; color: var(--mute); font-weight: 600; padding: 4px 5px; border-bottom: 1px solid var(--line); }
.mt td { padding: 6px 5px; border-bottom: 1px solid var(--line); font-size: 12px; }
.mt tr.bad td { background: var(--bad-bg); }
.mt .tag { margin: 0; }
.mnote { font-size: 11px; color: var(--mute); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kpis div { border: 1px solid var(--line); border-radius: 10px; padding: 7px; }
.kpis small { display: block; color: var(--mute); font-size: 10.5px; font-weight: 600; }
.kpis b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: -0.03em; }
.kpis em { font-style: normal; font-size: 10.5px; font-weight: 600; }
.kpis .up { color: var(--ok); }
.kpis .dn { color: var(--bad); }
.chart { width: 100%; height: 90px; }
.chart rect { fill: url(#none); fill: var(--mid); opacity: .85; }
.chart rect:last-child { fill: var(--right); opacity: 1; }
.hero-visual > .phone { margin: 0 auto; }

/* ---------- voet ---------- */
.site-foot { background: var(--sand); color: var(--ink-2); padding: 3.5rem 0 2rem; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot-grid > div { display: flex; flex-direction: column; gap: .5rem; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--ink); text-decoration: underline; }

.foot-brand p { max-width: 30ch; margin-top: .6rem; }
.fh { font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.foot-legal { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute); }

/* ---------- schermbreedtes ---------- */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .addons { grid-template-columns: repeat(2, 1fr); }
  .addon:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .hero-grid, .split, .tiktok, .fo, .sec-head, .book { grid-template-columns: 1fr; }
  .split.rev .split-text { order: 0; }
  .pains, .sec-blocks, .vault-flow { grid-template-columns: 1fr; }
  .pain + .pain { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .pain { padding-bottom: 1.4rem; }
  .features { grid-template-columns: 1fr; gap: 1.8rem; }
  .gallery { grid-template-columns: 1fr; }
  .numbers { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .book-side { position: static; }
  .hero-visual .cap { text-align: left; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .head-row { height: 62px; gap: .6rem; }
  .logo .wm { font-size: 1.05rem; }
  .logo .mark { width: 34px; height: 34px; }
  .plans, .addons { grid-template-columns: 1fr; }
  .addon + .addon { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .addon { padding-bottom: 1.2rem; }
  .flow { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: 1fr; }
  .btns .btn, .cta-btns .btn { flex: 1 1 100%; }
  .stage { aspect-ratio: .95; }
  .stage-mock { width: 66%; }
  .stage-phone { width: 40%; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .kanban .kcol:last-child { display: none; }
  .test-banner { font-size: .75rem; }
  .lang { padding: .4rem .55rem; }
  .fo-phone { width: 34%; }
  .frow .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 560px) {
  .stage { aspect-ratio: 1.15; }
  .stage-shot { inset: 0; width: 100%; height: 82%; }
  .stage-mock { display: none; }
  .stage-phone { width: 42%; right: 2%; bottom: 0; }
}

/* Nieuwe modules (16 okt 2026): mail, AI-brein, TikTok-nieuws, bans en bezwaar */
.badge { display: inline-block; margin-left: .4rem; font-family: var(--body); font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); }
.badge.soon { color: var(--mute); }
.ic.xs { width: 13px; height: 13px; vertical-align: -2px; }
.inbox { display: flex; flex-direction: column; gap: 4px; }
.irow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; }
.irow.late { background: var(--bad-bg); }
.irow b { display: block; font-size: 12px; } .irow small { display: block; color: var(--mute); font-size: 11px; }
.itime { margin-left: auto; font-size: 10.5px; color: var(--mute); font-weight: 600; }
.draft { border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; background: color-mix(in srgb, var(--lilac) 45%, #fff); display: flex; flex-direction: column; gap: 6px; }
.draft small { color: var(--right); font-weight: 600; font-size: 10.5px; }
.draft p { font-size: 12px; color: var(--ink); }
.dbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.dbtn { font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.dbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.brain, .news { display: flex; flex-direction: column; gap: 9px; }
.bq { background: var(--sand); border-radius: 12px; padding: 8px 10px; } .bq small { color: var(--mute); font-weight: 600; font-size: 10.5px; } .bq p { font-size: 12px; }
.srcs { display: flex; flex-wrap: wrap; gap: 5px; } .srcs span { font-size: 10.5px; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; color: var(--ink-2); }
.nhead { display: flex; gap: 6px; align-items: center; } .nhead small { margin-left: auto; color: var(--mute); font-weight: 600; font-size: 10.5px; } .nhead .chip { font-size: 10.5px; padding: .1rem .5rem; }
.ncard { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 7px; } .ncard p { font-size: 12px; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .tiles div { background: var(--sand); border-radius: 9px; padding: 5px 7px; } .tiles small { display: block; font-size: 9.5px; color: var(--mute); font-weight: 600; } .tiles b { font-size: 11px; }
.brein-sec .brein-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.brein-flow { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; counter-reset: b; }
.brein-flow li { counter-increment: b; display: flex; gap: .8rem; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: .7rem 1rem; font-weight: 600; }
.brein-flow li::before { content: counter(b); flex: none; width: 1.8rem; height: 1.8rem; border-radius: var(--r-xs); background: var(--sand); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: .85rem; }
.brein-mods { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
@media (max-width: 900px) { .brein-sec .brein-grid { grid-template-columns: 1fr; } .mega-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .brein-mods { grid-template-columns: 1fr; } .tiles { grid-template-columns: 1fr 1fr; } }

/* Groepen (16 okt 2026): menu en overzicht per groep */
.mm-h { font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: .5rem .9rem .3rem; }
.mm-group .mm-item { padding: .55rem .9rem; }
.all-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
.all-group .mm-h { margin: 0 0 .6rem; }
.mod-links.one { grid-template-columns: 1fr; display: grid; gap: .5rem; }
.livegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lcard { border: 1px solid var(--line); border-radius: 10px; padding: 7px 8px; display: flex; gap: 7px; align-items: center; }
.lcard b { display: block; font-size: 11.5px; } .lcard small { display: block; color: var(--mute); font-size: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; animation: live 1.8s var(--ease) infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mid) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 7px transparent; } }
.clips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .clips div { aspect-ratio: 9/14; border-radius: 8px; background: var(--grad-soft); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 4px; font-size: 9.5px; font-weight: 600; }
.clips div.on { outline: 2px solid var(--mid); }
.rank { display: flex; flex-direction: column; gap: 4px; } .rrank { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 9px; background: var(--sand); font-size: 11.5px; } .rrank em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--ok); font-size: 10.5px; }
.poster { aspect-ratio: 4/5; border-radius: 12px; background: var(--grad); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; font-family: var(--display); max-width: 230px; margin: 0 auto; }
.poster b { font-size: 18px; } .poster small { font-family: var(--body); font-weight: 600; font-size: 11px; opacity: .92; }
.integr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .integr div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; } .integr .tag { margin-left: auto; }
@media (max-width: 1000px) { .mega-grid, .all-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .all-groups { grid-template-columns: 1fr; } }
/* Megamenu gecentreerd onder de kop (18 modules passen niet vanaf de knop) */
.head-row { position: relative; }
.main-nav .dd { position: static; }
.mega { left: 50%; margin-left: calc(min(1180px, 94vw) / -2); top: calc(100% - 4px); }


/* ---------- ontwerpregels (havn-principes vertaald naar BYA, 21 okt 2026) ---------- */
/* Sectielabel: klein, hoofdletters, gespatieerd. Nummer in inkt. */
.label { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; font-family: var(--body); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.label .num { color: var(--ink); font-variant-numeric: tabular-nums; }
.label .num::after { content: ""; display: inline-block; width: 1.4rem; height: 1px; margin-left: .7rem; vertical-align: middle; background: var(--line-2); }
/* Figuren: vier hoeken eerlijk gelabeld */
.fig { margin: 0; }
.fig-meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .7rem; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.fig-meta.bot { margin: .8rem 0 0; }
/* Kader: dunne hulplijnen aan de rand, + waar de sectielijn ze kruist */
main { position: relative; }
main::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: min(1220px, 100%); transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); pointer-events: none; z-index: 1; }
.sec, .cta-band { position: relative; border-top: 1px solid var(--line); }
.sec::before, .sec::after { content: "+"; position: absolute; top: -.62em; font: 400 15px/1 var(--body); color: var(--ink-2); z-index: 2; pointer-events: none; }
.sec::before { left: calc(50% - min(1220px, 100%) / 2 - .3em); }
.sec::after { right: calc(50% - min(1220px, 100%) / 2 - .3em); }
.sec-ink { border-bottom: 0; }
/* Rustig in beeld komen: vervagen weg, 14px omhoog, een keer */
.js [data-reveal] { opacity: 0; transform: translateY(14px); filter: blur(10px); transition: opacity var(--t-settle) var(--ease) var(--d, 0ms), transform var(--t-settle) var(--ease) var(--d, 0ms), filter var(--t-settle) var(--ease) var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
@media (max-width: 860px) { main::before, .sec::before, .sec::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; filter: none; } .dot { animation: none; } }

/* ---------- groeidoel en de twee motoren (homepage, 21 okt 2026) ---------- */
.goal { display: flex; flex-direction: column; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.goal-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.goal-top small { display: block; color: var(--mute); font-size: 11px; font-weight: 600; }
.goal-top b { font-family: var(--display); font-size: 22px; letter-spacing: -0.03em; }
.goal-top b span { font-size: 13px; color: var(--mute); letter-spacing: 0; }
.goal-top .tag { margin: 0; }
.goal-bar { position: relative; height: 10px; border-radius: 999px; background: var(--sand); }
.goal-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.goal-bar s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--mid); border-radius: 2px; }
.goal-meta { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.engines-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.engines-mini div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.engines-mini small { display: block; color: var(--mute); font-size: 10.5px; font-weight: 600; }
.engines-mini b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: -0.03em; }
.engines-mini em { font-style: normal; font-size: 10.5px; font-weight: 600; }
.engines-mini .dn { color: var(--bad); }
.engines-mini .up { color: var(--ok); }
.hero-visual .fig { max-width: 560px; margin-left: auto; }
.engines { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.engine { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.2rem, 2.4vw, 1.8rem); }
.engine h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 1rem; }
.engine .label { margin-bottom: .8rem; }
.eng-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; border-top: 1px solid var(--line); }
.eng-list li { border-bottom: 1px solid var(--line); }
.eng-list li:last-child { border-bottom: 0; }
.eng-list a { display: flex; align-items: center; gap: .85rem; padding: .85rem .2rem; text-decoration: none; }
.eng-list a > .ic:first-child { color: var(--ink-2); width: 1.3rem; height: 1.3rem; }
.eng-list span { flex: 1; min-width: 0; }
.eng-list b { display: block; font-weight: 600; }
.eng-list small { display: block; color: var(--mute); font-size: .9rem; line-height: 1.35; }
.eng-list .go { color: var(--mute); transition: transform var(--t-hover) var(--ease); }
.eng-list a:hover .go { transform: translateX(2px); color: var(--ink); }
.show-title { font-size: 11.5px; font-family: var(--body); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 2rem; }
.eng-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 860px) { .engines { grid-template-columns: 1fr; } .hero-visual .fig { margin: 0 auto; } }
.bureau p.label { font-size: 11.5px; margin-bottom: 1.1rem; color: var(--mute); }

/* ---------- hero: het doel stijgt, met BYA blijf je erboven (illustratie) ---------- */
.growth { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lift); padding: 16px 16px 8px; }
.growth-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.growth-head b { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -0.03em; color: var(--ink); flex-basis: 100%; margin-bottom: 2px; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.lg i { display: inline-block; width: 16px; height: 3px; border-radius: 3px; }
.lg-met { background: var(--grad); }
.lg-doel { background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 4px 7px); }
.lg-zonder { background: var(--line-2); }
.growth svg { width: 100%; height: auto; display: block; overflow: visible; }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-ax { font: 600 11px var(--body); fill: var(--mute); }
.g-doel { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 5 4; }
.g-zonder { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) .5s forwards; }
.g-met { fill: none; stroke: url(#gMet); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) .3s forwards; }
.g-hit { fill: var(--paper); stroke: var(--mid); stroke-width: 2.5; opacity: 0; animation: pop .4s var(--ease) 1.6s forwards; }
.g-miss { fill: var(--bad); opacity: 0; animation: pop .4s var(--ease) 1.8s forwards; }
.g-tag { font: 600 12px var(--body); opacity: 0; animation: pop .4s var(--ease) 2s forwards; }
.g-tag-met { fill: var(--ink); }
.g-tag-miss { fill: var(--bad); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
.hero-fig { max-width: 600px; margin-left: auto; }
@media (max-width: 860px) { .hero-fig { margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .g-met, .g-zonder { stroke-dashoffset: 0; } .g-hit, .g-miss, .g-tag { opacity: 1; } }

/* ---------- probleem: drie rijen onder elkaar (21 okt) ---------- */
.pains { grid-template-columns: 1fr; max-width: 980px; counter-reset: pain; }
.pain, .pain + .pain { display: grid; grid-template-columns: 3rem minmax(0, .9fr) minmax(0, 1.1fr); gap: .4rem 2rem; align-items: baseline; padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--line); }
.pain:first-child { border-top: 0; }
.pain::before { counter-increment: pain; content: "0" counter(pain); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums; }
.pain h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
@media (max-width: 860px) { .pain, .pain + .pain { grid-template-columns: 2.4rem 1fr; } .pain p { grid-column: 2; } }

/* ---------- motoren: een beeld per motor, links eronder (21 okt) ---------- */
.art { background: var(--room); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; margin: 0 0 1.2rem; font-size: 13px; }
.art-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.art-head b { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.art-head .tag { margin: 0; }
.art-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--mute); }
.art-key i { width: 2px; height: 12px; background: var(--ink); border-radius: 2px; }
.art-note { margin-top: 10px; font-size: 11px; font-weight: 600; color: var(--mute); }
.crow { display: grid; grid-template-columns: 28px 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; }
.crow b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow .tag { margin: 0; }
.cbar { position: relative; height: 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.cbar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: var(--ink-2); }
.cbar s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.crow:last-child .cbar i { background: var(--bad); }
.js .engine .cbar i { width: 0; transition: width 900ms var(--ease) var(--d, 0ms); }
.js .engine.in .cbar i { width: var(--w); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day-c { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 5px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.day-c small { font-size: 9.5px; font-weight: 600; color: var(--mute); }
.day-c em { display: flex; gap: 3px; }
.day-c i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.day-c i.on { background: var(--ink-2); border-color: var(--ink-2); }
.day-c.today { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.day-c.later { opacity: .55; }
.js .engine .day-c i.on { transform: scale(0); transition: transform 400ms var(--ease) var(--d, 0ms); }
.js .engine.in .day-c i.on { transform: none; }
.engine .art + .eng-list { border-top: 1px solid var(--line); }
@media (max-width: 420px) { .crow { grid-template-columns: 28px 60px minmax(0, 1fr); } .crow .tag { grid-column: 2 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .js .engine .cbar i { width: var(--w); } .js .engine .day-c i.on { transform: none; } }
.pain p .more { display: flex; width: fit-content; margin-top: .5rem; }

/* ---------- groeiformule (21 okt) ---------- */
.formula { display: inline-block; margin: 0 0 .6rem; padding: .9rem 1.2rem; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line-2); font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -0.01em; }
.formula-note { color: var(--ink-2); margin-bottom: 2rem; }
.sec-soft .formula { margin-bottom: 1.6rem; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.three-c { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 1.3rem; }
.three-c h3 { margin: .7rem 0 .4rem; font-size: 1.15rem; }
.three-c p { color: var(--ink-2); }
.num3 { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-xs); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: .9rem; }
.btable-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); }
.btable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .95rem; }
.btable th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: .8rem 1rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.btable td { padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.btable tr:last-child td { border-bottom: 0; }
.btable td:last-child { font-weight: 600; }
.ladder-t mark { background: color-mix(in srgb, var(--pink) 60%, transparent); color: var(--ink); padding: .1rem .4rem; border-radius: 6px; }
.ladder-t td:nth-child(2) { border-right: 1px solid var(--line); }
.ladder-t td:nth-child(2), .ladder-t td:nth-child(4) { font-weight: 600; }
.ladder-t td:nth-child(1), .ladder-t td:nth-child(3) { font-weight: 400; }
.bexample { margin-top: 1.2rem; color: var(--ink-2); max-width: 70ch; }
.callout { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--r-s); background: var(--bad-bg); color: var(--ink); max-width: 70ch; }
.ladder-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ladder { box-shadow: none; padding: 14px 14px 10px; }
.ladder-x { text-align: center; font-size: 11px; font-weight: 600; color: var(--mute); margin-top: 2px; }
.g-lad { fill: none; stroke: url(#gLad); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ladder-grid .in .g-lad, .ladder-grid :not([data-reveal]) .g-lad { animation: draw 1.6s var(--ease) .2s forwards; }
.g-same { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.g-same.light { stroke: var(--line-2); }
.g-tag-same { font: 600 11px var(--body); fill: var(--ink); }
.ladder .g-hit { opacity: 1; animation: none; }
.bpoints { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 80ch; }
.bpoints li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-2); }
.bpoints .ic { color: var(--ok); margin-top: .2rem; }
.two-tables { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; }
.bnote { margin-top: 2rem; font-size: .85rem; color: var(--mute); max-width: 80ch; }
@media (max-width: 860px) { .three, .ladder-grid, .two-tables { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .g-lad { stroke-dashoffset: 0; animation: none; } }

/* ---------- rekenmachine groeibonus (21 okt) ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; }
.calc-in { display: flex; flex-direction: column; gap: .9rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 1.3rem; }
.calc-in label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .92rem; }
.calc-in input { width: 100%; padding: .78rem .9rem; border-radius: var(--r-c); border: 1px solid var(--line-2); background: #fff; font-size: 1.1rem; font-weight: 500; font-variant-numeric: tabular-nums; caret-color: var(--mid); }
.calc-in input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent); }
.calc-days { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.calc-out { background: var(--ink); color: var(--on-ink); border-radius: var(--r-s); padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; }
.calc-out dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; }
.calc-out dl div { display: flex; flex-direction: column; gap: .2rem; }
.calc-out dt { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-soft); }
.calc-out dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.calc-out .big { grid-column: 1 / -1; }
.calc-out .big dd { font-size: clamp(1.8rem, 4vw, 2.6rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-meter { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); }
.calc-meter i { display: block; height: 100%; border-radius: inherit; background: var(--grad); transition: width 300ms var(--ease); }
.calc-meter s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--on-ink); border-radius: 2px; }
.calc-next { font-weight: 600; }
.calc-nextbar { color: var(--on-ink-soft); font-size: .92rem; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-out .big dd { display: inline-block; align-self: flex-start; }

/* rekenmachine: schuiven naast het getal */
.calc-in input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: .55rem 0 .1rem; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--ink) var(--pos, 50%), var(--line) var(--pos, 50%)); box-shadow: none; cursor: pointer; }
.calc-in input[type="range"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: 4px; }
.calc-in input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(42,16,30,.2); transition: transform var(--t-hover) var(--ease); }
.calc-in input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.calc-in input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* label boven de hoofdtitel: wat het is */
.eyebrow { align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 -.4rem; padding: .35rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.eyebrow { white-space: nowrap; max-width: 100%; }
@media (max-width: 700px) { .eyebrow { font-size: 10px; letter-spacing: .04em; padding: .3rem .65rem; } }

/* ---------- featurepagina v2 (Recruit Center eerst, 22 okt) ---------- */
.steps-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.msteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.msteps li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.msteps li:first-child { border-top: 0; padding-top: 0; }
.mnum { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--r-xs); background: var(--ink); color: var(--on-ink); font-weight: 600; }
.msteps h3 { margin: .2rem 0 .3rem; font-size: 1.15rem; }
.msteps p { color: var(--ink-2); }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; max-width: 820px; }
.funnel li { display: flex; align-items: baseline; gap: 1rem; width: var(--w); min-width: min(100%, 260px); padding: 1rem 1.3rem; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); }
.funnel li:last-child { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.funnel b { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); font-variant-numeric: tabular-nums; min-width: 3.2ch; }
.funnel span { font-weight: 500; }
@media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; } .funnel li { width: 100%; } }

/* case op de homepage (22 okt) */
.case-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 1.6rem; }
.case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 0 0 1.6rem; }
.case-stats div { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 0 0; border-top: 2px solid var(--ink); }
.case-stats dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.case-stats dt { color: var(--ink-2); font-weight: 500; }
@media (max-width: 860px) { .case-stats { grid-template-columns: 1fr 1fr; } }
/* echt scherm uit de CRM op de homepage */
.shot-real { margin: 0 0 clamp(3rem, 6vw, 5rem); border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lift); background: var(--paper); }
.shot-real img { width: 100%; height: auto; display: block; }

/* ---------- productmenu: verticale kolommen per onderwerp (22 okt) ---------- */
.mega { padding: 0; overflow: hidden; }
.mega-grid { gap: 0; align-items: stretch; }
.mm-group { display: flex; flex-direction: column; gap: .1rem; padding: 1.1rem .6rem 1rem; }
.mm-group + .mm-group { border-left: 1px solid var(--line); }
/* geen kleurvlak per kolom, enkel lijnen (Carlo, 22 okt) */
.mm-top { padding: 0 .9rem .8rem; margin-bottom: .4rem; border-bottom: 1px solid var(--line); }
.mm-top .mm-h { margin: 0 0 .25rem; color: var(--ink); font-size: 12px; }
.mm-lead { margin: 0; font-size: .86rem; color: var(--mute); line-height: 1.35; }
.mm-group .mm-item { padding: .55rem .9rem; }
.mm-item.soon { opacity: .5; }
.mm-item.soon:hover { opacity: .75; }
.mm-item.soon + .mm-item.soon, .mm-item:not(.soon) + .mm-item.soon { margin-top: 0; }
.mm-item:not(.soon) + .mm-item.soon { border-top: 1px dashed var(--line); margin-top: .3rem; padding-top: .8rem; }
/* gsm-menu: zelfde groepen, onder elkaar */
.mnav-mods .mm-group { padding: .6rem 0 .4rem; border-left: 0; background: none; }
.mnav-mods .mm-group + .mm-group { border-top: 1px solid var(--line); }
.mnav-mods .mm-top { padding: 0 .9rem .5rem; border-bottom: 0; margin: 0; }
@media (max-width: 1000px) { .mm-group:nth-child(3) { border-left: 0; } .mm-group:nth-child(n+3) { border-top: 1px solid var(--line); } }
.mm-item.off { cursor: default; }
.mm-item.off:hover { background: none; opacity: .5; }
.mm-item.off { align-items: center; padding-top: .4rem; padding-bottom: .4rem; }
.mm-item.off + .mm-item.off { border-top: 0; margin-top: 0; padding-top: .4rem; }
.mm-extra .mm-item.off:first-of-type { border-top: 0; margin-top: 0; }

/* prijzen: drie pakketten (FACEOFF Open komt later) */
.plans { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin: 0 auto; }
@media (max-width: 1080px) { .plans { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 520px; } }

/* productmenu: de kolom onder je muis blijft, de andere vallen weg */
@media (hover: hover) {
  .mega-grid .mm-group { transition: opacity var(--t-fade) var(--ease); }
  .mega-grid:hover .mm-group { opacity: .35; }
  .mega-grid .mm-group:hover { opacity: 1; }
}
.hero-shot { margin: 0; }

/* ---------- hero met echt scherm uit de tool (KPI-cockpit), tweede pass 22 okt ----------
   Tekst links, het scherm rechts uitgelijnd op de rand van de pagina, licht gekanteld,
   volledig zichtbaar. Twee kaartjes met de cijfers waar het om draait. */
.hero-bleed { position: relative; overflow: hidden; }
.hero-bleed .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-bleed .hero-text { max-width: 440px; position: relative; z-index: 2; }
.hero-bleed h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); }
.bleed-stage { position: absolute; z-index: 1; pointer-events: none; top: 50%; transform: translateY(-46%);
  right: max(var(--gut), calc((100vw - 1220px) / 2 + var(--gut))); --side: max(var(--gut), calc((100vw - 1220px) / 2 + var(--gut))); width: min(720px, calc(100vw - 2 * var(--side) - 440px - 72px)); perspective: 1600px; }
.bleed-shot { position: relative; margin: 0; transform-origin: 60% 50%;
  transform: rotateY(-10deg) rotateX(4deg); animation: shotfloat 9s ease-in-out infinite; }
@keyframes shotfloat {
  0%, 100% { transform: translateY(0) rotateY(-10deg) rotateX(4deg) rotateZ(0deg); }
  33% { transform: translateY(-9px) rotateY(-7.5deg) rotateX(5deg) rotateZ(-.4deg); }
  66% { transform: translateY(-4px) rotateY(-11.5deg) rotateX(3deg) rotateZ(.3deg); } }
.bleed-shot img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 24px 48px -24px rgba(42,16,30,.35), 0 60px 100px -50px rgba(42,16,30,.4); }
.bleed-shot::before { content: ""; position: absolute; inset: 8% -8% -10% 6%; z-index: -1; border-radius: 40%;
  background: none; }
.bleed-chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 1px; padding: .6rem .85rem; border-radius: 12px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 14px 30px -14px rgba(42,16,30,.4); animation: chipin 600ms var(--ease) both; transform: translateZ(30px); }
.bleed-chip small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.bleed-chip b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.bleed-chip.c1 { left: -22px; bottom: 9%; animation: chipin 600ms var(--ease) 450ms both, chipfloat 6s ease-in-out 1.1s infinite; }
.bleed-chip.c2 { right: 7%; top: -18px; animation: chipin 600ms var(--ease) 650ms both, chipfloat 7s ease-in-out 1.3s infinite reverse; }
.bleed-chip.c2 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes chipfloat { 0%, 100% { transform: translate3d(0, 0, 30px); } 50% { transform: translate3d(0, -7px, 30px); } }
@keyframes chipin { from { opacity: 0; transform: translate3d(0, 10px, 30px); } to { opacity: 1; transform: translateZ(30px); } }
@media (min-width: 1081px) { .hero-bleed { min-height: 620px; display: flex; align-items: center; } .hero-bleed > .wrap { width: 100%; } }
@media (max-width: 1080px) {
  .bleed-stage { position: relative; top: auto; right: auto; transform: none; width: min(720px, calc(100% - 2 * var(--gut))); margin: 2.4rem auto 0; }
  .bleed-shot { transform-origin: 50% 50%; }
  .hero-bleed .hero-text { max-width: 640px; }
  .bleed-chip.c1 { left: -8px; bottom: -16px; }
  .bleed-chip.c2 { right: 10px; top: -16px; }
}
@media (prefers-reduced-motion: reduce) { .bleed-shot { animation: none; } .bleed-chip { animation: none !important; } }

/* Use cases als vragen (modulepagina) */
.uses { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.use { padding: 1.8rem 1.8rem 1.7rem; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: .6rem; }
.use-who { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); background: var(--peach); padding: .25rem .6rem; border-radius: 99px; }
.use h3 { margin: .2rem 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.use p { margin: 0; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 760px) { .uses { grid-template-columns: 1fr; } }
/* Werkt samen met (in plaats van het volledige modulerooster) */
.related { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.rel { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.5rem 1.4rem; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow 200ms, transform 200ms; }
.rel:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -22px rgba(42,16,30,.35); }
.rel-ic { width: 2.4rem; height: 2.4rem; border-radius: 11px; background: var(--peach); color: var(--mid); display: grid; place-items: center; margin-bottom: .4rem; }
.rel b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.rel p { margin: 0; color: var(--ink-2); padding-right: 1.4rem; }
.rel-go { position: absolute; top: 1.6rem; right: 1.5rem; color: var(--mute); transition: transform 200ms, color 200ms; }
.rel:hover .rel-go { transform: translateX(3px); color: var(--ink); }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* Twee soorten bonus (bonusmotor) */
.kinds { margin-top: 2.4rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem; align-items: start; }
.kind { padding: 2rem; border-radius: 20px; display: flex; flex-direction: column; gap: .7rem; }
.kind h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; }
.kind p { margin: 0; color: var(--ink-2); max-width: 50ch; }
.kind-tag { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 99px; }
.kind-tt { box-shadow: inset 0 0 0 1px var(--line); }
.kind-tt .kind-tag { color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.kind-you { background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 24px 48px -30px rgba(42,16,30,.35); }
.kind-you .kind-tag { color: var(--mid); background: var(--peach); }
.kind-link { margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); align-self: flex-start; padding-bottom: 2px; }
.kind-link:hover { border-color: var(--ink); }
.rules { margin-top: .8rem; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 1rem 1.2rem .4rem; }
.rules > small { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.rules dl { margin: .5rem 0 0; }
.rules dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.rules dl div:first-child { border-top: 0; }
.rules dt { color: var(--ink-2); }
.rules dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .kinds { grid-template-columns: 1fr; } .kind { padding: 1.5rem; } }
.pays { margin-top: 1rem; border-radius: 14px; background: var(--sand); padding: 1rem 1.2rem .3rem; }
.pays > small { display: block; margin-bottom: .4rem; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.pays-f { margin: .35rem 0 .4rem; font-size: .92rem; color: var(--ink-2); }
.pays ul { list-style: none; margin: 0; padding: 0; }
.pays li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .15rem; padding: .8rem 0; border-top: 1px solid var(--line); align-items: center; }
.pay-who { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.pay-who b { font-weight: 600; }
.pay-who span { font-size: .88rem; color: var(--mute); }
.pay-calc { grid-column: 1; font-size: .88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pay-res { grid-column: 2; font-family: var(--display); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pays li.zero .pay-res { color: var(--mute); }

/* Rangreis-hero (campagnes en rangen) */
.rk-stage { position: relative; padding: 3.6rem 1rem 4.6rem 2.6rem; }
.rk-card { position: relative; max-width: 420px; margin-left: auto; padding: 1.6rem 1.6rem 1.4rem; border-radius: 22px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 30px 60px -30px rgba(42,16,30,.4); }
.rk-hi { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.rk-lv { display: flex; justify-content: space-between; align-items: center; margin-bottom: .7rem; }
.rk-now { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.02em; }
.rk-next { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); padding: .3rem .65rem; border-radius: 99px; }
.rk-bar { height: 12px; border-radius: 99px; background: var(--sand); overflow: hidden; }
.rk-bar i { display: block; height: 100%; width: 60%; border-radius: inherit; background: var(--grad); transform-origin: left; animation: rkfill 1.4s var(--ease) .3s both; }
.rk-ends { display: flex; justify-content: space-between; margin-top: .4rem; color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.rk-have { margin: 1rem 0 0; display: flex; flex-direction: column; gap: .1rem; }
.rk-have b { font-family: var(--display); font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rk-have span { color: var(--ink-2); font-size: .92rem; }
.rk-dots { display: flex; gap: .45rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.rk-dots span { flex: 1; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.rk-dots .done { background: var(--peach); color: var(--mid); box-shadow: none; }
.rk-dots .cur { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.rk-camp, .rk-bonus { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: .75rem 1rem; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -18px rgba(42,16,30,.45); }
.rk-camp small, .rk-bonus small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.rk-camp b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.rk-camp span { font-size: .85rem; color: var(--ink-2); }
.rk-camp { left: 0; bottom: 0; animation: rkin 600ms var(--ease) .9s both, rkfloat 7s ease-in-out 1.5s infinite; }
.rk-bonus { right: -.4rem; top: 0; animation: rkin 600ms var(--ease) 1.5s both, rkfloat 6s ease-in-out 2.1s infinite reverse; }
.rk-bonus b { font-family: var(--display); font-weight: 600; font-size: 1.3rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes rkfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rkin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rkfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 560px) { .rk-stage { padding: 3.6rem 0 4.6rem; } .rk-bonus { right: 0; } }
@media (prefers-reduced-motion: reduce) { .rk-bar i, .rk-camp, .rk-bonus { animation: none; } }

/* Module-label bovenaan detailpagina's: icoon + naam */
.mod-tag { display: flex; align-items: center; gap: .6rem; margin: 0; font-weight: 600; font-size: 1rem; color: var(--ink); }
.mod-tag-ic { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--peach); color: var(--mid); display: grid; place-items: center; flex: none; }

/* Gestapelde schermen (coaching) */
.stk-stage { perspective: none; }
.stk { margin: 0; }
.stk img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 24px 48px -24px rgba(42,16,30,.35), 0 50px 90px -50px rgba(42,16,30,.35); }
.stk-front { position: relative; z-index: 2; width: 100%; animation: stkin 700ms var(--ease) both, stkfront 8s ease-in-out 700ms infinite; }
.stk-back { position: absolute; z-index: 1; width: 80%; right: -9%; top: -16%; transform-origin: 70% 30%; animation: stkinb 700ms var(--ease) 250ms both, stkfloat 10s ease-in-out 950ms infinite; }
.stk-back img { filter: saturate(.92); }
@keyframes stkin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stkinb { from { opacity: 0; transform: rotate(3deg) translateY(14px); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes stkfront { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes stkfloat { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
.stk-back { transform: rotate(3deg); }
@media (max-width: 1080px) { .stk-stage { margin-top: 3.4rem; } .stk-front { width: 94%; } .stk-back { right: 0; width: 74%; } }
@media (prefers-reduced-motion: reduce) { .stk-front, .stk-back { animation: none; } }

/* Telefoon-hero (creator-app) */
.ph-stage { position: relative; display: flex; justify-content: center; padding: 1rem 0 1.5rem; }
.ph { position: relative; width: 300px; max-width: 78vw; aspect-ratio: 300 / 620; border-radius: 46px; padding: 11px; background: var(--ink);
  box-shadow: 0 0 0 1px rgba(42,16,30,.2), 0 30px 60px -28px rgba(42,16,30,.55), 0 70px 110px -60px rgba(42,16,30,.45); }
.ph-notch { position: absolute; z-index: 3; top: 11px; left: 50%; width: 38%; height: 24px; transform: translateX(-50%); background: var(--ink); border-radius: 0 0 16px 16px; }
.ph-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--paper); }
.ph-scroll { display: block; width: 100%; height: auto; padding-top: 22px; animation: phscroll 22s ease-in-out 1.2s infinite; }
@keyframes phscroll { 0%, 8% { transform: translateY(0); } 46%, 58% { transform: translateY(calc(-100% + 598px)); } 94%, 100% { transform: translateY(0); } }
.ph-toast { position: absolute; z-index: 4; top: 3.2rem; left: 50%; width: min(330px, 86vw); display: flex; gap: .7rem; align-items: center; padding: .75rem .9rem; border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(42,16,30,.45); transform: translate(-50%, -12px); opacity: 0; animation: phtoast 11s var(--ease) 2.4s infinite; }
.ph-toast-ic { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; }
.ph-toast small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); }
.ph-toast b { display: block; font-weight: 600; font-size: .9rem; line-height: 1.3; }
@keyframes phtoast { 0% { opacity: 0; transform: translate(-50%, -12px); } 5%, 42% { opacity: 1; transform: translate(-50%, 0); } 48%, 100% { opacity: 0; transform: translate(-50%, -12px); } }
@media (prefers-reduced-motion: reduce) { .ph-scroll { animation: none; } .ph-toast { animation: none; opacity: 1; transform: translate(-50%, 0); } }

/* Store-badges (creator-app) */
.stores { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.store { display: inline-flex; align-items: center; gap: .55rem; height: 46px; padding: 0 1rem 0 .8rem; border-radius: 11px; background: var(--ink); color: var(--on-ink); }
.store svg { width: 22px; height: 22px; flex: none; }
.store > span { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font-size: 10px; letter-spacing: .02em; opacity: .85; }
.store b { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

/* Academy-hero: echt overzicht, plat, met een lege "jouw eerste cursus"-kaart op de vrije plek */
.ac-shot { position: relative; margin: 0; animation: stkin 700ms var(--ease) both, stkfront 9s ease-in-out 700ms infinite; }
.ac-shot img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 24px 48px -24px rgba(42,16,30,.35), 0 50px 90px -50px rgba(42,16,30,.35); }
.ac-new { position: absolute; left: 74%; top: 16.3%; width: 22.6%; height: 33%; border-radius: 8px; border: 2px dashed var(--mid);
  background: color-mix(in srgb, var(--paper) 88%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; text-align: center; padding: .4rem;
  opacity: 0; transform: scale(.94); animation: acin 600ms var(--ease) 1.1s forwards, acpulse 2.8s ease-in-out 1.8s infinite; }
.ac-new b { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.2rem; line-height: 1; margin-bottom: .2rem; }
.ac-new strong { font-family: var(--display); font-weight: 600; font-size: clamp(.72rem, 1vw, .95rem); line-height: 1.15; }
.ac-new small { font-size: clamp(.6rem, .8vw, .75rem); color: var(--mute); line-height: 1.2; }
@keyframes acin { to { opacity: 1; transform: none; } }
@keyframes acpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,49,104,0); } 50% { box-shadow: 0 0 0 6px rgba(224,49,104,.12); } }
@media (prefers-reduced-motion: reduce) { .ac-shot, .ac-new { animation: none; opacity: 1; transform: none; } }
.ac-new b { flex: none; }
@media (max-width: 640px) { .ac-new small { display: none; } .ac-new b { width: 1.3rem; height: 1.3rem; font-size: .9rem; } .ac-new strong { font-size: .68rem; } }

/* Meekijken-hero (shadowing) */
.sh-stage { position: relative; padding: 1rem 1rem 1rem 3rem; }
.sh-card { max-width: 340px; margin-left: auto; margin-right: 1.5rem; padding: .8rem .8rem 1.1rem; border-radius: 22px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 30px 60px -30px rgba(42,16,30,.4); }
.sh-video { position: relative; aspect-ratio: 3 / 4; border-radius: 15px; overflow: hidden; background: #2A101E; }
.sh-blob { position: absolute; border-radius: 50%; filter: blur(28px); opacity: .85; }
.sh-blob.b1 { width: 55%; height: 70%; left: 8%; top: 18%; background: var(--left); animation: shdrift 9s ease-in-out infinite; }
.sh-blob.b2 { width: 45%; height: 60%; right: 6%; top: 8%; background: var(--right); animation: shdrift 11s ease-in-out infinite reverse; }
.sh-blob.b3 { width: 35%; height: 45%; left: 38%; bottom: -10%; background: var(--mid); animation: shdrift 13s ease-in-out infinite; }
@keyframes shdrift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6%, -5%); } }
.sh-live { position: absolute; top: .8rem; left: .8rem; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--accent); padding: .2rem .5rem; border-radius: 6px; }
.sh-watch { position: absolute; top: .8rem; right: .8rem; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.35); padding: .2rem .55rem; border-radius: 99px; }
.sh-who { position: absolute; left: .85rem; top: 2.6rem; display: flex; flex-direction: column; color: #fff; }
.sh-who b { font-weight: 600; font-size: .95rem; } .sh-who small { font-size: 11px; opacity: .8; }
.sh-line { position: relative; display: flex; gap: 4px; margin: 1.6rem .3rem 0; }
.sh-line .seg { position: relative; height: 10px; border-radius: 99px; background: var(--sand); }
.sh-line .s1 { flex: 2.2; } .sh-line .s2 { flex: 3; background: var(--peach); } .sh-line .s3 { flex: 1.8; }
.sh-line .seg i { position: absolute; bottom: 15px; left: 0; font-style: normal; font-size: 11px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.sh-line .s1 { background: linear-gradient(90deg, var(--left), var(--mid)); } .sh-line .s1 i { color: var(--ink); }
.sh-head { position: absolute; top: -5px; width: 3px; height: 20px; border-radius: 2px; background: var(--ink); left: 0; animation: shplay 10s linear infinite; }
@keyframes shplay { from { left: 0; } to { left: calc(100% - 3px); } }
.sh-tip { position: absolute; z-index: 2; left: 0; bottom: 6.2rem; max-width: 300px; display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(42,16,30,.45); animation: rkin 600ms var(--ease) 1s both, rkfloat 7s ease-in-out 1.6s infinite; }
.sh-av { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; font-size: .85rem; }
.sh-tip small { display: block; font-size: 11px; font-weight: 600; color: var(--mute); margin-bottom: 2px; }
.sh-tip b { display: block; font-weight: 600; font-size: .92rem; line-height: 1.35; }
@media (max-width: 560px) { .sh-stage { padding: 1rem 0 1rem 1.2rem; } .sh-card { margin-right: 0; max-width: 300px; } .sh-tip { max-width: 250px; bottom: 5.6rem; } }
@media (prefers-reduced-motion: reduce) { .sh-blob, .sh-head, .sh-tip { animation: none; } }

/* Zo werkt meekijken: 4 stappen met een kleine tekening */
.how { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.how li { display: flex; flex-direction: column; gap: .45rem; }
.how-vis { height: 116px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: .9rem; margin-bottom: .6rem; overflow: hidden; }
.how-n { font-size: .85rem; font-weight: 600; color: var(--mute); font-variant-numeric: tabular-nums; }
.how h3 { margin: 0; }
.how p { margin: 0; color: var(--ink-2); }
.hv-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; max-width: 220px; padding: .6rem .75rem; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font-size: .85rem; font-weight: 600; }
.hv-sw { flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--grad); position: relative; }
.hv-sw i { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.how-clips { flex-direction: row; flex-wrap: wrap; }
.hv-clip { font-size: .78rem; font-weight: 600; padding: .4rem .65rem; border-radius: 9px; background: var(--sand); color: var(--ink-2); }
.hv-clip.on { background: var(--ink); color: var(--on-ink); }
.hv-bar { width: 100%; max-width: 220px; height: 8px; border-radius: 99px; background: var(--sand); position: relative; }
.hv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: inherit; background: linear-gradient(90deg, var(--left), var(--mid)); }
.hv-bar i::after { content: ""; position: absolute; right: -2px; top: -5px; width: 3px; height: 18px; border-radius: 2px; background: var(--ink); }
.hv-tip { align-self: flex-start; margin-left: calc(50% - 110px + 30%); max-width: 70%; font-size: .78rem; font-weight: 600; line-height: 1.3; padding: .45rem .6rem; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 20px -12px rgba(42,16,30,.4); }
.hv-tip small { display: block; font-size: 10px; color: var(--mute); }
.hv-gone { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.hv-gone .ic { color: var(--mid); }
@media (max-width: 1000px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; gap: 2.2rem; } .hv-tip { margin-left: 0; align-self: center; } }
.hv-note { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 230px; padding: .6rem .7rem; border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 10px 20px -12px rgba(42,16,30,.4); }
.hv-note-ic { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--grad); color: #fff; display: grid; place-items: center; }
.hv-note b { display: block; font-size: .82rem; font-weight: 600; }
.hv-note small { display: block; font-size: .72rem; color: var(--mute); }

/* Live-radar-hero */
.lv-stage { position: relative; padding: 1rem 1rem 4.4rem 2rem; }
.lv-card { max-width: 430px; margin-left: auto; padding: 1.1rem 1.1rem .5rem; border-radius: 22px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 30px 60px -30px rgba(42,16,30,.4); }
.lv-head { display: flex; justify-content: space-between; align-items: center; margin: 0 .2rem .6rem; }
.lv-head b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.lv-n { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 700; color: #fff; background: var(--accent); padding: .2rem .6rem; border-radius: 99px; }
.lv-n i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lvpulse 1.4s ease-in-out infinite; }
.lv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .7rem; row-gap: .5rem; align-items: center; padding: .75rem .2rem; border-top: 1px solid var(--line); }
.lv-av { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--mid); background: var(--peach); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent); }
.lv-who b { display: block; font-weight: 600; font-size: .92rem; } .lv-who small { font-size: .78rem; color: var(--mute); }
.lv-w { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-w .ic { color: var(--mute); }
.lv-bat { grid-column: 2 / 4; display: flex; flex-direction: column; gap: .3rem; }
.lv-bat small { font-size: .74rem; font-weight: 600; color: var(--mute); }
.lv-bar { height: 8px; border-radius: 99px; background: var(--accent-soft); overflow: hidden; }
.lv-bar i { display: block; height: 100%; width: 58%; background: linear-gradient(90deg, var(--left), var(--mid)); animation: lvbattle 5s ease-in-out infinite; }
@keyframes lvbattle { 0%, 100% { width: 58%; } 30% { width: 46%; } 60% { width: 66%; } }
@keyframes lvpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lv-ping { position: absolute; z-index: 2; left: 0; bottom: .8rem; display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(42,16,30,.45); opacity: 0; animation: lvping 9s var(--ease) 1.2s infinite; }
.lv-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(254,44,85,.18); }
.lv-ping b { display: block; font-weight: 600; font-size: .9rem; } .lv-ping small { display: block; font-size: .78rem; color: var(--mute); }
@keyframes lvping { 0% { opacity: 0; transform: translateY(10px); } 6%, 55% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(10px); } }
@media (max-width: 560px) { .lv-stage { padding: 1rem 0 4.6rem; } }
@media (prefers-reduced-motion: reduce) { .lv-n i, .lv-bar i { animation: none; } .lv-ping { animation: none; opacity: 1; } }

/* Live-radar: echt rooster-scherm, plat en zwevend, met het live-seintje */
.lvr-ping { left: -1.6rem; bottom: -1.4rem; }
@media (max-width: 1080px) { .lvr-ping { left: .4rem; bottom: -1.6rem; } }

/* Recruit Center-hero: echt scherm + doelkaartje */
.rcr-chip { position: absolute; z-index: 3; left: -1.8rem; bottom: -1.6rem; width: 230px; display: flex; flex-direction: column; gap: 3px; padding: .85rem 1rem .9rem; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(42,16,30,.45); animation: rkin 600ms var(--ease) .9s both, rkfloat 7s ease-in-out 1.5s infinite; }
.rcr-chip small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.rcr-chip b { font-family: var(--display); font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rcr-bar { height: 7px; border-radius: 99px; background: var(--sand); overflow: hidden; margin: 3px 0 2px; }
.rcr-bar i { display: block; height: 100%; width: 86.7%; background: var(--grad); border-radius: inherit; transform-origin: left; animation: rkfill 1.4s var(--ease) 1.1s both; }
.rcr-chip em { font-style: normal; font-size: .8rem; color: var(--ink-2); }
.feat-split-h { margin: 0; position: sticky; top: 7rem; }
@media (max-width: 1080px) { .rcr-chip { left: .4rem; bottom: -2rem; } }
@media (max-width: 860px) { .feat-split-h { position: static; } }
@media (prefers-reduced-motion: reduce) { .rcr-chip, .rcr-bar i { animation: none; } }
@media (max-width: 640px) { .rcr-stage { margin-bottom: 2.6rem; } .rcr-chip { left: auto; right: .4rem; bottom: -3.2rem; width: 175px; padding: .65rem .8rem; } .rcr-chip b { font-size: 1.15rem; } }

/* Onboarding-hero: het echte bord, breed, traag van links naar rechts */
.pan-frame { margin: 0; overflow: hidden; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 24px 48px -24px rgba(42,16,30,.35), 0 50px 90px -50px rgba(42,16,30,.35); animation: stkin 700ms var(--ease) both; }
.pan-frame img { display: block; width: 190%; max-width: none; height: auto; animation: pan 14s ease-in-out .2s infinite; }
@keyframes pan { 0%, 3% { transform: translateX(0); } 40%, 48% { transform: translateX(-47.37%); } 88%, 100% { transform: translateX(0); } }
.steps-shot { margin: 0; }
.steps-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(42,16,30,.35); }
@media (prefers-reduced-motion: reduce) { .pan-frame, .pan-frame img { animation: none; } }

/* Teamtraining-hero: echt startscherm + "nu bezig"-kaartje met lopende balk */
.trn-chip { position: absolute; z-index: 3; left: -1.6rem; bottom: -1.5rem; width: 300px; display: flex; gap: .75rem; align-items: center; padding: .8rem .95rem; border-radius: 16px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(42,16,30,.45); animation: rkin 600ms var(--ease) .9s both, rkfloat 7s ease-in-out 1.5s infinite; }
.trn-play { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--grad); display: grid; place-items: center; }
.trn-play::after { content: ""; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.trn-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trn-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.trn-txt b { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-bar { height: 5px; border-radius: 99px; background: var(--sand); overflow: hidden; margin-top: 4px; }
.trn-bar i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: left; animation: trnplay 12s linear 1.2s infinite; }
@keyframes trnplay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1080px) { .trn-chip { left: .4rem; bottom: -2rem; } }
@media (max-width: 640px) { .trn-stage { margin-bottom: 2.4rem; } .trn-chip { width: 250px; bottom: -3rem; } }
@media (prefers-reduced-motion: reduce) { .trn-chip, .trn-bar i { animation: none; } }

/* Wat is BoostYourAgency */
.wi-hero h1 { max-width: 16ch; }
.wi-lead { max-width: 60ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.wi-two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.wi-why { display: flex; flex-direction: column; gap: 1rem; padding-top: .4rem; }
.wi-why p { margin: 0; color: var(--ink-2); font-size: 1.05rem; max-width: 60ch; }
.wi-roles .use p { font-size: 1.02rem; color: var(--ink); }
.wi-groups { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.wi-group h3 { margin: 0 0 .6rem; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.wi-group ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wi-group li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.wi-ic { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--peach); color: var(--mid); display: grid; place-items: center; }
.wi-group b { display: block; font-weight: 600; margin-bottom: .15rem; }
.wi-group small { display: block; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.wi-go { color: var(--mute); margin-top: .3rem; transition: transform 200ms, color 200ms; }
.wi-group li a:hover .wi-go { transform: translateX(3px); color: var(--ink); }
.wi-case { max-width: 60ch; display: flex; flex-direction: column; gap: .8rem; }
.wi-case .spa-logo { align-self: flex-start; }
.wi-case p { margin: 0; font-size: 1.1rem; color: var(--ink-2); }
@media (max-width: 1000px) { .wi-groups { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 860px) { .wi-two { grid-template-columns: 1fr; gap: 1.2rem; } }

.wi-hero .btns { margin-top: 2.2rem; }
.wi-hero .wi-lead { margin-top: 1.4rem; }
.wi-engines { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.wi-engine { padding: 2rem; border-radius: 20px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: .6rem; }
.wi-engine small { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mid); background: var(--peach); padding: .25rem .6rem; border-radius: 99px; }
.wi-engine h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.65rem); letter-spacing: -0.02em; }
.wi-engine p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.wi-note { margin: 1.6rem 0 0; max-width: 62ch; font-size: 1.08rem; color: var(--ink); }
.wi-work { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
.wi-workcol h3 { margin: 0 0 .5rem; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--mute); }
.wi-workcol ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wi-workcol li { padding: .85rem 0 .85rem 1.6rem; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-2); }
.wi-workcol li::before { content: ""; position: absolute; left: .2rem; top: 1.35rem; width: .55rem; height: 2px; border-radius: 2px; background: var(--mute); }
.wi-stress { margin: 1.4rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -0.02em; }
.wi-answer { margin-top: 2.6rem; display: flex; gap: 1.2rem; align-items: center; padding: 1.6rem 1.8rem; border-radius: 20px; background: var(--ink); color: var(--on-ink); }
.wi-mark { flex: none; width: 44px; height: 44px; }
.wi-answer p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 48ch; }
@media (max-width: 760px) { .wi-engines, .wi-work { grid-template-columns: 1fr; } .wi-answer { flex-direction: column; align-items: flex-start; } }

/* Al dat handwerk: korte tegels om te scannen */
.wi-work { grid-template-columns: 1fr; gap: 2rem; }
.wi-tiles { list-style: none; margin: 0; padding: 0 !important; border: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.wi-tiles li { border: 0 !important; padding: 1.1rem 1.1rem 1.2rem !important; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: .7rem; }
.wi-tiles li::before { display: none; }
.wi-tic { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--sand); color: var(--mute); display: grid; place-items: center; }
.wi-tiles b { font-weight: 600; font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.wi-h2-long { max-width: 30ch; }
@media (max-width: 900px) { .wi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wat is het: grote gecentreerde zin bovenaan */
.wi-hero .wrap { text-align: center; display: flex; flex-direction: column; align-items: center; }
.wi-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.05; text-wrap: balance; margin: 0; }
.wi-q { margin: 0 0 1.4rem; font-size: .95rem; font-weight: 600; color: var(--mute); }
.wi-hero .btns { justify-content: center; }

.wi-graph { margin: 3rem auto 0; max-width: 860px; }
.wi-rolelist { list-style: none; margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--line); max-width: 900px; }
.wi-rolelist li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.6rem; align-items: baseline; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.wi-rolelist b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; }
.wi-rolelist p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }
@media (max-width: 640px) { .wi-rolelist li { grid-template-columns: 1fr; gap: .3rem; } }

/* Wat is het: links onder de grafiek, kaarten van de homepage */
.wi-graphwrap { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.wi-eng { margin-top: 2.4rem; }
/* Spreiding van echte schermen onder de kop */
.wi-spread { position: relative; width: 100%; max-width: 1180px; aspect-ratio: 1180 / 520; margin: 3.4rem auto 0; }
.wi-spread .sp { position: absolute; display: block; height: auto; border-radius: 12px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(42,16,30,.06), 0 24px 48px -24px rgba(42,16,30,.35), 0 50px 90px -50px rgba(42,16,30,.3); animation: spin 800ms var(--ease) both, spfloat 9s ease-in-out infinite; }
.sp-1 { width: 33%; left: 0; top: 16%; z-index: 1; --r: -5deg; animation-delay: .35s, 1.2s !important; }
.sp-2 { width: 33%; right: 0; top: 16%; z-index: 1; --r: 5deg; animation-delay: .4s, 2.4s !important; }
.sp-3 { width: 37%; left: 11%; top: 6%; z-index: 2; --r: -2.5deg; animation-delay: .2s, .6s !important; }
.sp-4 { width: 37%; right: 11%; top: 6%; z-index: 2; --r: 2.5deg; animation-delay: .25s, 1.8s !important; }
.sp-5 { width: 46%; left: 27%; top: 0; z-index: 3; --r: 0deg; animation-delay: 0s, 3s !important; }
.sp-phone { position: absolute; z-index: 4; right: 21%; bottom: -4%; width: 13%; aspect-ratio: 300 / 620; border-radius: 22px; padding: 5px; background: var(--ink); overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(42,16,30,.6); animation: spin 800ms var(--ease) .5s both, spfloat 8s ease-in-out 2s infinite; --r: 4deg; }
.sp-phone img { display: block; width: 100%; height: auto; border-radius: 17px; }
@keyframes spin { from { opacity: 0; transform: translateY(24px) rotate(var(--r)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes spfloat { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-8px); } }
@media (max-width: 760px) { .wi-spread { aspect-ratio: 390 / 300; } .sp-1, .sp-2 { display: none; } .sp-3 { width: 52%; left: 0; top: 12%; } .sp-4 { width: 52%; right: 0; top: 12%; } .sp-5 { width: 66%; left: 17%; } .sp-phone { width: 22%; right: 6%; } }
@media (prefers-reduced-motion: reduce) { .wi-spread .sp, .sp-phone { animation: none; transform: rotate(var(--r)); } }
/* Wat is het: meer ruimte en een rustiger telefoon */
.wi-q { margin-bottom: 1.8rem; }
.wi-hero .btns { margin-top: 2.8rem; }
.wi-spread { margin-top: 4.6rem; aspect-ratio: 1180 / 470; }
.sp-phone { right: 24%; bottom: auto; top: 20%; width: 12%; --r: 0deg; animation: spin 800ms var(--ease) .5s both, spphone 8s ease-in-out 1.4s infinite; }
@keyframes spphone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 760px) { .wi-spread { aspect-ratio: 390 / 290; margin-top: 3rem; } .sp-phone { right: 8%; top: 22%; width: 20%; } }
/* Drie schermen in plaats van vijf */
.wi-spread { aspect-ratio: 1180 / 500; }
.sp-l { width: 44%; left: 2%; top: 12%; z-index: 1; --r: -3deg; animation-delay: .25s, 1s !important; }
.sp-r { width: 44%; right: 2%; top: 12%; z-index: 1; --r: 3deg; animation-delay: .3s, 2.2s !important; }
.sp-c { width: 54%; left: 23%; top: 0; z-index: 2; --r: 0deg; animation-delay: 0s, 3s !important; }
@media (max-width: 760px) { .wi-spread { aspect-ratio: 390 / 260; } .sp-l { width: 56%; left: 0; } .sp-r { width: 56%; right: 0; } .sp-c { width: 70%; left: 15%; } }
.wi-graph { max-width: 1120px; width: 100%; }
.wi-graphwrap { align-items: center; text-align: center; }
.wi-graphwrap .kind-link { align-self: center; }
.wi-graph { text-align: left; }
.wi-graph { max-width: 920px; }

/* Prijstabel: de pakketten als kaarten in de kop, de rijen eronder (27 okt) */
.ptable .cmp { min-width: 760px; }
.ptable thead th { position: static; vertical-align: top; text-align: left; font-family: inherit; letter-spacing: 0; padding: 2.9rem 1.1rem 1.3rem; }
.ptable .pfirst { width: 32%; }
.pcard { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.pcard h3 { font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.02em; }
.pcard .ptag { font-size: .88rem; font-weight: 500; }
.pcard .price { display: flex; align-items: baseline; gap: .1rem; margin-top: .3rem; }
.pcard .price .amt { font-size: 2.3rem; }
.pcard .price .cur { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.pcard .pper { font-weight: 500; }
.pcard .plim { font-size: .9rem; padding: .4rem 0 .6rem; margin: 0; border-bottom: 0; font-weight: 600; }
.pcard .btn { margin-top: .3rem; }
.ptable .rec-tag { top: -2.3rem; left: 0; line-height: 1.2; }
.ptable tbody td { text-align: center; }
@media (max-width: 860px) {
  .ptable .cmp { min-width: 620px; }
  .ptable .pfirst { width: 150px; }
  .ptable tbody th, .ptable thead .pfirst { position: sticky; left: 0; z-index: 1; background: var(--paper); font-size: .85rem; }
  .ptable thead th { padding: 2.7rem .7rem 1rem; }
  .pcard .price .amt { font-size: 1.8rem; }
  .pcard .btn { font-size: .85rem; padding-left: .6rem; padding-right: .6rem; }
}
@media (max-width: 860px) {
  .ptable .pfirst { width: 118px; }
  .ptable tbody th { font-size: .8rem; padding-left: .7rem; padding-right: .5rem; }
  .pcard .ptag { display: none; }
  .ptable .cmp { min-width: 560px; }
}
.ptable .upg { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 500; color: var(--mute); text-decoration: none; white-space: nowrap; }
.ptable .upg:hover { color: var(--ink); }
.ptable .upg .ic { width: .9rem; height: .9rem; }
@media (min-width: 1081px) { .addons { grid-template-columns: repeat(5, 1fr); } }
/* Tooltips in de prijstabel */
.ptable tbody th { position: relative; }
.tip { position: relative; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .4rem; border-radius: 50%; border: 1px solid var(--line-2); color: var(--mute); font-size: .68rem; font-weight: 700; line-height: 1; cursor: help; vertical-align: .1em; }
.tip:hover, .tip:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.tip-txt { position: absolute; left: -.4rem; bottom: calc(100% + .55rem); width: 16rem; padding: .6rem .75rem; border-radius: .6rem; background: var(--ink); color: var(--on-ink); font-size: .82rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; z-index: 5; pointer-events: none; }
.tip-txt::after { content: ""; position: absolute; left: .75rem; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip-txt, .tip:focus .tip-txt, .tip:focus-within .tip-txt { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 860px) { .tip-txt { width: 13rem; } }
@media (prefers-reduced-motion: reduce) { .tip-txt { transition: none; } }
/* Case: citaat en nog-te-bevestigen cijfers (gele markering, weg zodra Gilles de cijfers geeft) */
mark.ph { background: #FFE58A; color: inherit; border-radius: .25em; padding: 0 .25em; }
.case-quote { margin: 2rem 0 0; padding: 1.4rem 1.6rem; border-left: 3px solid var(--ink); background: var(--paper); border-radius: 0 var(--r) var(--r) 0; }
.case-quote p { font-family: var(--display); font-size: 1.35rem; line-height: 1.35; letter-spacing: -0.02em; margin: 0; }
.case-quote footer { margin-top: .7rem; color: var(--mute); font-size: .92rem; font-weight: 600; }
/* Case-pagina als klantverhaal (27 okt) */
.case-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.case-main .h-sub { font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 1rem; }
.case-p { font-size: 1.12rem; line-height: 1.6; margin: 0 0 1rem; max-width: 60ch; }
.snap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; position: sticky; top: 6rem; }
.snap-h { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 .6rem; }
.snap dl { margin: 0; display: grid; }
.snap dl div { display: grid; grid-template-columns: 7.5rem 1fr; gap: .8rem; padding: .65rem 0; border-top: 1px solid var(--line); font-size: .95rem; }
.snap dl div:first-child { border-top: 0; }
.snap dt { color: var(--mute); }
.snap dd { margin: 0; font-weight: 600; }
.ba { border-top: 1px solid var(--line-2); }
.ba-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.ba-head { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; padding: .8rem 0; }
.ba-row b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.ba-before { color: var(--ink-2); }
.ba-after { font-weight: 600; }
.outside { margin: 1rem 0 0; }
.outside p { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25; letter-spacing: -0.02em; margin: 0; }
.outside footer { margin-top: 1rem; opacity: .75; font-weight: 600; }
.fit { margin: 1.4rem 0 2rem; font-size: 1.05rem; }
@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; gap: 2rem; }
  .snap { position: static; }
  .ba-head { display: none; }
  .ba-row { grid-template-columns: 1fr; gap: .5rem; }
  .ba-before::before, .ba-after::before { content: attr(data-l); display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: .15rem; }
}
.snap dd a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Homepage, Attio-pas (27 okt) */
.hero-c { padding-bottom: 0; overflow: hidden; }
.hero-c-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; max-width: 900px; }
.hero-c h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; margin: 0; }
.hero-c .lead { max-width: 34rem; color: var(--mute); margin: 0; }
.hero-c .btns { justify-content: center; margin-top: .4rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: .85rem; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.pill:hover { border-color: var(--ink); color: var(--ink); }
.hero-stage { position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.6rem) 0; border-radius: 28px 28px 0 0; background: var(--accent-tint); }
.hero-stage .win { border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 30px 80px -30px rgba(42,16,30,.35); }
.win { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.win-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #FAFAFB; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E9DFE3; }
.win img { display: block; width: 100%; height: auto; }
.stats-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.stats-by { margin: 0; padding: 1rem 0 0; text-align: center; font-size: .85rem; }
.stats-by a { color: var(--mute); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.stats-by a:hover { color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.stats div { padding: 1.4rem 1rem 1.6rem; text-align: center; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: .2rem; }
.stats div:first-child { border-left: 0; }
.stats dd { margin: 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 600; }
.stats dt { color: var(--mute); font-size: .9rem; }
.prob { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.prob-list { display: grid; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.prob-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.prob-list h3 { font-size: 1.08rem; margin: 0 0 .3rem; }
.prob-list p { margin: 0; color: var(--ink-2); }
.jobs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); margin-top: 2.5rem; align-items: stretch; }
.jobs-nav ol { position: sticky; top: 7rem; }
.jobs-nav ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-2); }
.jobs-nav a { display: block; padding: .5rem 0 .5rem 1.1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--mute); text-decoration: none; font-weight: 600; transition: color .2s, border-color .2s; }
.jobs-nav a:hover { color: var(--ink); }
.jobs-nav a.on { color: var(--ink); border-left-color: var(--ink); }
.jobs-list { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.job-line { font-family: var(--display); font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--mute); margin: 0 0 .8rem; max-width: 36rem; text-wrap: balance; }
.job-line b { color: var(--ink); font-weight: 600; }
.job-shot { margin: 1.6rem 0 0; }
.job-shot .win { box-shadow: 0 24px 60px -32px rgba(42,16,30,.3); }
@media (max-width: 860px) {
  .hero-stage { border-radius: 18px 18px 0 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(3) { border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .prob, .jobs { grid-template-columns: 1fr; }
  .jobs-nav { display: none; }
}
/* Minder tekst, meer lucht (27 okt) */
.prob-list { margin-top: 2.6rem; }
.prob-list > div { padding: 1.7rem 0; }
.prob-list h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.prob-list p { color: var(--mute); }
.prob-list .more { margin-left: .4rem; }
.jobs { margin-top: 3.5rem; }
.jobs-nav a { padding: .7rem 0 .7rem 1.2rem; }
.jobs-list { gap: clamp(5rem, 10vw, 8rem); }
.job-line { margin-bottom: 1.2rem; max-width: 30rem; line-height: 1.3; }
.job-shot { margin-top: 2.2rem; }
/* Logo van Stream Performance Agency bij de case */
.spa-logo { display: block; height: 40px; width: auto; }
.spa-logo-lg { height: 52px; margin-bottom: 1.6rem; }
.stats-logo { display: flex; justify-content: center; padding-top: 1.6rem; }
.stats-strip .stats-by { padding-top: .7rem; }
/* Homepage case (04): logo en de cijfers onder elkaar */
.case-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.case-logo { margin: 1.4rem 0 1.4rem; }
.case-stats-v { grid-template-columns: 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line-2); }
.case-stats-v div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.3rem 0; border-top: 0; border-bottom: 1px solid var(--line); }
.case-stats-v dt { text-align: right; color: var(--mute); }
@media (max-width: 860px) { .case-split { grid-template-columns: 1fr; } .case-stats-v { grid-template-columns: 1fr; } }
/* Case-pagina: meer lucht tussen de opening en het resultaat */
.case-grid { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }

/* ---------- probleem-grafiek in Attio-stijl (28 okt) ---------- */
.growth.gx { padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 12px 32px -12px rgba(16,16,20,.10); }
.gx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px 24px; margin-bottom: 22px; }
.gx-head small { display: block; font-size: 12.5px; color: var(--mute); margin-bottom: 4px; }
.gx-head b { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.gx-head em { font-style: normal; font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 4px 9px; }
.gx-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); padding-top: 4px; }
.gx-lg span, .gx-tip span { display: inline-flex; align-items: center; gap: 7px; }
.gx-head i, .gx-tip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.d-met { background: var(--accent); }
.d-doel { background: transparent; border: 1.5px dashed var(--ink-2); box-sizing: border-box; }
.d-zonder { background: var(--line-2); }
.gx-plot { position: relative; padding-bottom: 26px; }
.gx-plot svg { width: 100%; height: 240px; display: block; overflow: visible; }
.gx .g-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.gx .g-ax { font: 500 11px var(--body); fill: var(--mute); }
.g-cross { stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-area { fill: var(--accent); opacity: .07; }
.gx .g-doel { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .55; }
.gx .g-met { stroke: var(--accent); stroke-width: 2.25; }
.gx .g-zonder { stroke: var(--line-2); stroke-width: 2; }
.gx-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); opacity: 0; animation: pop .4s var(--ease) 1.7s forwards; }
.gx-dot-zonder { border-color: var(--line-2); box-shadow: none; }
.gx-x { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; }
.gx-x span { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--mute); }
.gx-x span:first-child { transform: none; }
.gx-x span:last-child { transform: translateX(-100%); }
.gx-tip { position: absolute; transform: translateY(-30%); min-width: 168px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(16,16,20,.16); padding: 10px 12px; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); opacity: 0; animation: pop .4s var(--ease) 1.9s forwards; }
.gx-tip small { font-size: 11px; color: var(--mute); }
.gx-tip b { margin-left: auto; padding-left: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.gx-tip b.bad { color: var(--bad); }
@media (max-width: 520px) { .gx-head b { font-size: 24px; } .gx-plot svg { height: 200px; } .gx-tip { min-width: 0; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .gx-dot, .gx-tip { opacity: 1; animation: none; } }
.gx-y { position: absolute; left: 0; top: 0; bottom: 26px; width: 30px; }
.gx-y span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--mute); }
.gx-tip { transform: none; }
.gx-x span:first-child, .gx-x span:last-child { transform: translateX(-50%); }
.gx-plot { padding-top: 0; }
@media (max-width: 520px) { .gx-tip { right: auto !important; left: 12%; padding: 8px 10px; gap: 4px; } }

/* =========================================================
   Attio-pas voor alle andere pagina's (28 okt)
   ========================================================= */
/* Hero: gecentreerd, pill met module-icoon, product op een getint podium */
.hero-att { padding-top: clamp(3.5rem, 8vw, 6.5rem); }
.hero-att.hero-text-only { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.hero-att .hero-c-in { gap: 1.25rem; }
.pill-mod { gap: .55rem; padding: .3rem .85rem .3rem .35rem; cursor: default; }
.pill-mod:hover { border-color: var(--line-2); color: var(--ink-2); }
.pill-ic { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-dark); }
.pill-ic .ic { width: .95rem; height: .95rem; }
.proof-c { justify-content: center; margin-top: .6rem; font-size: .9rem; font-weight: 500; color: var(--mute); }
.proof-c .ic { color: var(--accent); }
.hero-att .stores { justify-content: center; }
.att-stage { overflow: visible; }
.att-stage .win { position: relative; z-index: 1; }
.att-free { display: flex; justify-content: center; align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 28px; min-height: 340px; }
.att-free > * { max-width: 680px; width: 100%; }
.att-free .ph-stage, .att-free .rk-stage { width: auto; }
.att-fig { margin: 0; }
.att-fig > * { box-shadow: 0 30px 80px -30px rgba(42,16,30,.3); }

/* Zwevende kaartjes op het podium */
.att-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; min-width: 180px; max-width: 280px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px -16px rgba(42,16,30,.28); animation: chipin 600ms var(--ease) 500ms both, chipfloat 7s ease-in-out 1.2s infinite; }
.att-float > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-float small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.att-float b { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.att-float em { font-style: normal; font-size: .8rem; color: var(--ink-2); }
.att-float.f1 { left: clamp(-1rem, -1.5vw, 0rem); top: 38%; }
.att-float.f2 { right: clamp(-1rem, -1.5vw, 0rem); top: 12%; animation-direction: normal, reverse; }
.af-ic { width: 2rem; height: 2rem; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 1.2rem; }
.af-live { width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); animation: livepulse 1.6s ease-in-out infinite; }
.af-play::before { content: ""; margin-left: 3px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@keyframes livepulse { 50% { box-shadow: 0 0 0 9px var(--accent-tint); } }
@media (max-width: 760px) { .att-float { min-width: 0; max-width: 62%; padding: .55rem .75rem; } .att-float b { font-size: .95rem; } .att-float.f1 { left: .5rem; top: auto; bottom: 1rem; } .att-float.f2 { right: .5rem; top: .5rem; } .af-ic { width: 1.6rem; height: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .att-float, .af-live { animation: none; } }

/* Grote uitspraak boven de functies */
.att-state { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -0.03em; max-width: 22ch; margin: 0 0 clamp(2rem, 4vw, 3.2rem); text-wrap: balance; color: var(--ink); }

/* Bento: tegels met gedeelde haarlijnen in plaats van losse kaarten */
.bento, .uses, .related, .wi-tiles { display: grid; gap: 1px !important; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.bento.b3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bento.b2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-c { background: var(--paper); padding: clamp(1.4rem, 2.6vw, 2.1rem); display: flex; flex-direction: column; gap: .55rem; min-width: 0; transition: background 200ms; }
.bento-c:hover { background: var(--accent-tint); }
.b-ic { width: 2.3rem; height: 2.3rem; border-radius: 10px; display: grid; place-items: center; margin-bottom: .7rem; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent-line); }
.b-ic .ic { width: 1.1rem; height: 1.1rem; }
.b-num { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.bento-c h3 { margin: 0; font-size: 1.08rem; letter-spacing: -0.01em; }
.bento-c p { margin: 0; color: var(--mute); max-width: 42ch; }
@media (max-width: 860px) { .bento.b3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento.b3, .bento.b2 { grid-template-columns: 1fr; } }

.uses .use, .related .rel, .wi-tiles li { border-radius: 0 !important; box-shadow: none !important; background: var(--paper); transform: none !important; }
.uses .use { padding: clamp(1.5rem, 3vw, 2.3rem); }
.related .rel:hover, .wi-tiles li:hover { background: var(--accent-tint); }
.use-who { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; padding: 0 !important; background: none !important; border: 0 !important; font-size: 11px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute) !important; }
.use-who::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Tabellen: rustig, haarlijnen, kop in grijs */
.btable-wrap { border-radius: 16px; border-color: var(--line); }
.btable th { background: var(--sand); font-size: 11px; color: var(--mute); border-bottom: 1px solid var(--line); padding: .75rem 1.1rem; }
.btable td { padding: .8rem 1.1rem; color: var(--ink-2); }
.btable td:first-child { color: var(--ink); font-weight: 500; }
.btable td:last-child { color: var(--ink); }
.btable tbody tr { transition: background 150ms; }
.btable tbody tr:hover { background: var(--accent-tint); }
.btable mark { background: var(--accent-soft); color: var(--accent-dark); border-radius: 6px; padding: .1rem .4rem; }

/* Rekenmachine: licht kaartje, het bedrag in rood */
.calc-out { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -32px rgba(42,16,30,.3); padding: 1.6rem; }
.calc-out dt { color: var(--mute); }
.calc-out .big dd { background: none; color: var(--accent); -webkit-text-fill-color: currentColor; }
.calc-out .calc-next, .calc-out .calc-nextbar { color: var(--ink-2); }

/* Wat is het: het antwoord als licht blok */
.wi-answer { background: var(--accent-tint); color: var(--ink); border: 1px solid var(--accent-line); }

/* Afsluiter: licht en gecentreerd, met een kijkje in het product */
.cta-att { position: relative; border-top: 1px solid var(--line); padding-top: clamp(4rem, 9vw, 7rem); overflow: hidden; background: var(--paper); }
.cta-att-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; max-width: 760px; margin: 0 auto; }
.cta-mark { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 12px 30px -10px rgba(254,44,85,.45); }
.cta-att h2 { margin: .4rem 0 0; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.cta-att p { margin: 0; font-size: 1.1rem; color: var(--mute); }
.cta-att .btns { justify-content: center; margin-top: .4rem; }
.cta-stage { margin-top: clamp(2.5rem, 5vw, 3.8rem); max-height: clamp(180px, 26vw, 340px); overflow: hidden; }
.cta-stage .win { box-shadow: 0 30px 80px -30px rgba(42,16,30,.35); }

/* Secties: alles wit, scheiding met haarlijnen */
.sec-soft { background: var(--paper); }
/* Bento: lijnen per tegel, zodat lege plekken in de laatste rij gewoon wit blijven */
.bento, .uses, .related, .wi-tiles { gap: 0 !important; background: var(--paper); }
.bento-c, .uses .use, .related .rel, .wi-tiles li { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line) !important; }
@media (min-width: 861px) { .related:has(> .rel:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Afgesneden podia lopen onderaan zacht uit in wit (28 okt) */
.hero-stage:not(.att-free)::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 38%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 92%); }
.cta-stage::after { height: 60%; }
/* Raster terug op echte lijnen (1px tussenruimte op een lijnkleur), lege plekken gevuld met witte tegels */
.bento, .uses, .related, .wi-tiles { gap: 1px !important; background: var(--line) !important; }
.bento-c, .uses .use, .related .rel, .wi-tiles li { box-shadow: none !important; }
.bento-fill { display: none; }
.bento-fill:hover { background: var(--paper); }
@media (min-width: 861px) { .b3 > .fill3 { display: block; } .b2 > .fill2 { display: block; } }
@media (min-width: 561px) and (max-width: 860px) { .bento > .fill2 { display: block; } }
@media (min-width: 561px) and (max-width: 860px) { .bento.b3:has(> .bento-c:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Grafiek: geen streep-animatie meer (brak op brede schermen), lijnen schuiven in van links */
.gx .g-met, .gx .g-zonder { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.gx-plot svg { clip-path: inset(0 100% 0 0); animation: gxreveal 1.5s var(--ease) .3s forwards; }
@keyframes gxreveal { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .gx-plot svg { clip-path: none; animation: none; } }

/* Demo-aanvraag: drie velden */
.demo-main { min-height: 0; }
.demo-grid { grid-template-columns: 1fr; }
.demo-main .btn-block { margin-top: .2rem; }
.demo-main .ok { align-items: flex-start; }