/* Rizona Studio · variant "vloeibaar". Huisstijl: de glaswereld (B-0115). Alleen huisstijltokens. */

@font-face { font-family: "Manrope"; src: url("./assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("./assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --sc-canvas: #070a10;
  --sc-surface: #0b141e;
  --sc-ink: #edf3fb;
  --sc-ink-soft: #9fb4cc;
  --sc-accent: #ffd078;
  --sc-accent-ink: #1d1405;
  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text: "Manrope", system-ui, sans-serif;
  --sc-font-mono: "Manrope", system-ui, sans-serif;
  --sc-shadow-color: 212 40% 2%;

  --ink: #edf3fb;
  --soft: #c9d6e3;
  --muted: #9fb4cc;
  --dim: #7a8ca1;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-2: rgba(255, 255, 255, 0.16);
  --amber: #ffd078;
  --amber-eyebrow: #eac173;
  --amber-ink: #1d1405;
  --cyan: #6cd1fa;
  --entree: #030912;
  --tint-research: 137, 208, 255;
  --tint-ideeen: 239, 211, 167;
  --tint-schrijven: 191, 218, 250;
  --tint-factchecker: 135, 231, 233;
  --tint-resultaten: 143, 205, 234;
  --good: #6fe0a6;
  --quiet: #8fcdea;
  --glass-shell: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025));
  --glass-core: linear-gradient(172deg, rgba(22, 34, 48, 0.94), rgba(7, 13, 21, 0.97));
  --glass-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 44px 70px -44px rgba(0, 0, 0, 0.95), 0 20px 40px -26px rgba(0, 0, 0, 0.8);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bar-h: 68px;
  --gutter: clamp(16px, 4.6vw, 72px);
}

html { background: var(--sc-canvas); }
body { background: radial-gradient(ellipse at 66% 0%, #3144522e, transparent 46%), var(--sc-canvas); }
body { font-family: "Manrope", system-ui, sans-serif; color: var(--soft); background: var(--sc-canvas); }

::selection { background: var(--amber); color: var(--amber-ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
a { color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #080b0e; font-weight: 700; transform: translateY(-160%); transition: transform 0.2s var(--ease); }
.skip-link:focus-visible { transform: none; }
svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber-eyebrow); }
.h2 { margin: 0; color: var(--ink); font-size: clamp(34px, 4.3vw, 66px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.lede { margin: 14px 0 0; color: var(--soft); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.58; max-width: 36rem; text-wrap: pretty; }
.fine { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--soft); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); }
.ini { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--glass-shell); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim); }

/* ------------------------------------------------------------- knoppen -- */
.btn-amber {
  display: inline-flex; align-items: center; gap: 16px; height: 54px; padding: 0 6px 0 24px; border: 0; border-radius: 999px;
  color: var(--amber-ink); font: 700 15.5px/1 "Manrope", system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(180deg, #ffe4a6, #f7c35c 70%, #efb64a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(120, 70, 0, 0.25), 0 0 0 1px rgba(255, 216, 140, 0.55), 0 14px 34px -14px rgba(246, 190, 80, 0.65);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-dot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(29, 20, 5, 0.92); color: var(--amber); }
.btn-dot svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn-amber:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(120, 70, 0, 0.25), 0 0 0 1px rgba(255, 216, 140, 0.7), 0 20px 40px -14px rgba(246, 190, 80, 0.7); }
}
.btn-amber:active { transform: scale(0.97); }
.btn-amber:focus-visible { outline-color: var(--cyan); outline-offset: 4px; border-radius: 999px; }

.link-cyan { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--cyan); font: 700 14.5px/1 "Manrope", system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.link-cyan svg { width: 16px; height: 16px; transition: transform 0.18s var(--ease); }
@media (hover: hover) and (pointer: fine) { .link-cyan:hover svg { transform: translateX(3px); } .link-cyan:hover { color: #9fe0fb; } }
.link-cyan:active { transform: translateY(1px); }

/* ----------------------------------------------------------------- balk -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-inline: var(--gutter);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.bar.is-glass {
  background: rgba(8, 11, 14, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 -1px 0 var(--hair);
}
.bar-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; justify-self: start; }
.mark { width: 26px; height: 26px; }
.mark ellipse { stroke: var(--amber); stroke-width: 2.2; }
.mark circle { fill: var(--ink); stroke: none; }
.bar-links { display: flex; gap: 6px; }
.bar-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--soft); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color 0.16s var(--ease), background-color 0.16s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); } }
.bar-cta {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px;
  color: var(--amber); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(255, 208, 120, 0.5); background: rgba(255, 208, 120, 0.04);
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.bar-cta svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .bar-cta:hover { background: rgba(255, 208, 120, 0.1); border-color: rgba(255, 208, 120, 0.8); } }
.bar-cta:active { transform: scale(0.97); }
.bar-menu { display: none; justify-self: end; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255, 255, 255, 0.04); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.bar-menu svg { width: 18px; height: 18px; }
.sheet { position: fixed; z-index: 59; inset: var(--bar-h) 12px auto 12px; padding: 10px; border-radius: 24px; background: rgba(11, 20, 30, 0.97); border: 1px solid var(--hair-2); box-shadow: var(--glass-rim), var(--glass-shadow); }
.sheet nav { display: grid; gap: 2px; }
.sheet a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; }
.sheet a:active { background: rgba(255, 255, 255, 0.06); }
.sheet .sheet-cta { margin-top: 6px; justify-content: space-between; color: var(--amber); border: 1px solid rgba(255, 208, 120, 0.45); }
.sheet .sheet-cta svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- hero -- */
/* De wereld van de Live-pagina: dezelfde aardfoto en dezelfde vaste sterren, met de echte orb erboven.
   Sterren, aarde en orb bewegen in hun eigen tempo; de tekst beweegt gewoon mee. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: clip; isolation: isolate; background: var(--entree); }
.hero-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-stars { position: absolute; left: -6%; right: -6%; top: -4%; height: 70%; will-change: transform; background: radial-gradient(circle at 66.8% 82.5%, #edf3fbb3 0, transparent 2.5px), radial-gradient(circle at 43.6% 17.4%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 82.7% 49.9%, #c9d6e3cc 0, transparent 2.0px), radial-gradient(circle at 57.4% 15.7%, #c9d6e366 0, transparent 1.7px), radial-gradient(circle at 2.4% 50.7%, #edf3fb80 0, transparent 1.7px), radial-gradient(circle at 50.5% 87.5%, #edf3fb99 0, transparent 2.5px), radial-gradient(circle at 11.5% 73.9%, #edf3fb99 0, transparent 1.7px), radial-gradient(circle at 60.2% 55.5%, #c9d6e399 0, transparent 1.7px), radial-gradient(circle at 23.4% 7.9%, #c9d6e380 0, transparent 1.7px), radial-gradient(circle at 82.4% 74.2%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 94.4% 10.4%, #6cd1fa66 0, transparent 2.5px), radial-gradient(circle at 4.9% 18.9%, #edf3fbcc 0, transparent 2.5px), radial-gradient(circle at 86.5% 4.3%, #6cd1fa99 0, transparent 1.7px), radial-gradient(circle at 96.5% 33.4%, #edf3fbb3 0, transparent 1.7px), radial-gradient(circle at 10.8% 87.8%, #c9d6e366 0, transparent 1.7px), radial-gradient(circle at 30.8% 95.3%, #edf3fbcc 0, transparent 1.7px), radial-gradient(circle at 67.0% 10.2%, #edf3fbcc 0, transparent 2.5px), radial-gradient(circle at 24.2% 5.3%, #c9d6e3b3 0, transparent 2.5px), radial-gradient(circle at 78.7% 90.0%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 27.0% 22.2%, #6cd1fab3 0, transparent 1.7px), radial-gradient(circle at 62.7% 61.2%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 24.4% 47.0%, #edf3fbb3 0, transparent 1.7px), radial-gradient(circle at 58.5% 54.1%, #edf3fb99 0, transparent 2.5px), radial-gradient(circle at 32.4% 87.2%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 77.0% 53.2%, #6cd1fa66 0, transparent 2.5px), radial-gradient(circle at 2.3% 82.5%, #6cd1fa66 0, transparent 1.7px), radial-gradient(circle at 67.5% 82.3%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 5.4% 85.7%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 93.2% 71.7%, #edf3fb80 0, transparent 1.7px), radial-gradient(circle at 30.7% 50.1%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 40.3% 66.3%, #c9d6e3b3 0, transparent 1.7px), radial-gradient(circle at 48.9% 63.9%, #edf3fb66 0, transparent 2.5px), radial-gradient(circle at 71.2% 92.3%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 68.0% 58.8%, #edf3fbb3 0, transparent 2.0px), radial-gradient(circle at 74.2% 52.0%, #6cd1fa99 0, transparent 2.0px), radial-gradient(circle at 41.7% 80.9%, #edf3fbcc 0, transparent 2.0px), radial-gradient(circle at 75.2% 44.7%, #6cd1fab3 0, transparent 1.7px), radial-gradient(circle at 2.1% 23.2%, #6cd1fab3 0, transparent 2.5px); -webkit-mask: linear-gradient(transparent, #000 18% 70%, transparent); mask: linear-gradient(transparent, #000 18% 70%, transparent); }
.hero-earth { position: absolute; left: 50%; top: 0; width: var(--earth-w, 120vw); transform: translate3d(-50%, var(--earth-y, 0px), 0); will-change: transform;
  -webkit-mask: linear-gradient(transparent 6%, #000 30%, #000 82%, transparent 100%); mask: linear-gradient(transparent 6%, #000 30%, #000 82%, transparent 100%); }
.hero-earth img { display: block; width: 100%; height: auto; max-width: none; }
.earth-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s var(--ease); }
.hero-earth.is-turning .earth-gl { opacity: 1; }
.hero-planet { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(7, 10, 16, 0.75) 55%, var(--sc-canvas) 92%); }
.hero-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--bar-h) + clamp(14px, 4vh, 48px)) var(--gutter) 0;
}
.hero-title { margin: 0; color: var(--ink); font-size: clamp(36px, 4.8vw, 78px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; will-change: transform; }
.hero-orb { --orb: clamp(210px, min(27vw, 38vh), 390px); position: relative; width: var(--orb); height: var(--orb); margin-top: clamp(0px, 1vh, 14px); will-change: transform; }
.orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-still { position: absolute; inset: 18%; width: 64%; height: 64%; opacity: 0; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
.orb-lost .orb-canvas { opacity: 0; }
.orb-lost .orb-still { opacity: 1; }
.hero-foot { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-bottom: clamp(36px, 9vh, 96px); will-change: opacity, transform; }
.hero-foot::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: min(860px, 100vw); height: 300px; translate: -50% -50%; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(1, 6, 14, 0.82), rgba(1, 6, 14, 0.5) 42%, transparent 70%); }
.hero-sub { margin: 0 auto; max-width: 35rem; color: var(--soft); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.55; text-wrap: pretty; }
.hero .btn-amber { margin-top: clamp(14px, 2.6vh, 26px); }

/* ---------------------------------------------------- waar we voor staan -- */
/* Jij weet het: een grote lopende regel met een klein beeld erin. Bij het scrollen groeit dat beeld uit tot het hele scherm.
   Idee uit de referentie (realevate.agency/bythesea), in onze letter en kleur. --g is hoe ver het beeld open is. */
.zicht-stage { display: grid; place-items: center; overflow: clip; background: var(--sc-canvas); }
/* Eén leesbare regel met het vak ertussen. Als het vak opengaat, schuiven de woorden opzij. */
.zicht-words { --w: clamp(150px, 14vw, 230px); position: absolute; z-index: 3; inset: 0; margin: 0; display: grid; grid-template-columns: 1fr var(--w) 1fr; align-items: center; color: var(--ink); font-size: clamp(36px, 4.4vw, 84px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
.zw-l { justify-self: end; transform: translate3d(calc(var(--g, 0) * var(--g, 0) * -55vw), 0, 0); opacity: clamp(0, calc((1 - var(--g, 0)) * 4), 1); text-shadow: 0 2px 24px rgba(6, 11, 19, 0.8); }
.zw-r { justify-self: start; transform: translate3d(calc(var(--g, 0) * var(--g, 0) * 55vw), 0, 0); opacity: clamp(0, calc((1 - var(--g, 0)) * 4), 1); text-shadow: 0 2px 24px rgba(6, 11, 19, 0.8); }
.zicht-frame { --w: clamp(180px, 21vw, 340px); position: absolute; inset: 0; overflow: hidden;
  }
/* De scène: geen foto, maar een LinkedIn-tegel in glas met een baan eromheen, zoals Orbit. Posts zweven erbij als het vak open is. */
.zf-scene { position: absolute; inset: 0; }
/* Ruimte zonder beeld en zonder rand: drie lagen sterren over het hele scherm, ook achter de woorden.
   Bij het scrollen vlieg je erin: de lagen schalen elk in hun eigen tempo naar buiten (dichtbij sneller) en nevels in onze blauwen lichten op. */
.zf-space { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.zf-st { position: absolute; inset: -25%; background-repeat: repeat; will-change: transform; animation: zf-drift 260s linear infinite; }
.zf-st--far { background-image: radial-gradient(0.7px 0.7px at 6px 240px, #edf3fb, transparent), radial-gradient(0.8px 0.8px at 72px 22px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 274px 118px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 75px 16px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 118px 274px, #8fd8fb, transparent), radial-gradient(1.1px 1.1px at 211px 104px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 60px 10px, #edf3fb, transparent), radial-gradient(0.8px 0.8px at 174px 101px, #edf3fb, transparent), radial-gradient(1.1px 1.1px at 186px 305px, #c9d6e3, transparent), radial-gradient(0.9px 0.9px at 111px 213px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 30px 26px, #edf3fb, transparent), radial-gradient(0.8px 0.8px at 68px 104px, #edf3fb, transparent), radial-gradient(1.0px 1.0px at 15px 44px, #edf3fb, transparent), radial-gradient(1.0px 1.0px at 111px 106px, #8fd8fb, transparent), radial-gradient(0.8px 0.8px at 188px 99px, #c9d6e3, transparent), radial-gradient(0.8px 0.8px at 246px 21px, #edf3fb, transparent), radial-gradient(0.9px 0.9px at 171px 292px, #8fd8fb, transparent), radial-gradient(1.1px 1.1px at 161px 109px, #c9d6e3, transparent), radial-gradient(0.9px 0.9px at 156px 90px, #8fd8fb, transparent), radial-gradient(0.8px 0.8px at 151px 47px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 307px 191px, #c9d6e3, transparent), radial-gradient(1.1px 1.1px at 204px 145px, #8fd8fb, transparent), radial-gradient(0.9px 0.9px at 100px 58px, #edf3fb, transparent), radial-gradient(1.0px 1.0px at 227px 206px, #8fd8fb, transparent), radial-gradient(0.7px 0.7px at 60px 137px, #8fd8fb, transparent), radial-gradient(0.8px 0.8px at 61px 99px, #c9d6e3, transparent), radial-gradient(0.7px 0.7px at 77px 243px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 262px 142px, #8fd8fb, transparent), radial-gradient(0.7px 0.7px at 251px 302px, #c9d6e3, transparent), radial-gradient(1.0px 1.0px at 248px 70px, #8fd8fb, transparent), radial-gradient(0.8px 0.8px at 254px 12px, #edf3fb, transparent), radial-gradient(0.7px 0.7px at 178px 121px, #edf3fb, transparent), radial-gradient(0.9px 0.9px at 298px 144px, #c9d6e3, transparent), radial-gradient(0.9px 0.9px at 67px 63px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 25px 105px, #edf3fb, transparent), radial-gradient(0.9px 0.9px at 94px 283px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 262px 268px, #8fd8fb, transparent), radial-gradient(0.9px 0.9px at 205px 116px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 236px 157px, #edf3fb, transparent), radial-gradient(0.8px 0.8px at 166px 68px, #8fd8fb, transparent), radial-gradient(1.1px 1.1px at 177px 98px, #8fd8fb, transparent), radial-gradient(1.0px 1.0px at 194px 296px, #c9d6e3, transparent), radial-gradient(0.8px 0.8px at 60px 217px, #c9d6e3, transparent), radial-gradient(0.8px 0.8px at 194px 157px, #8fd8fb, transparent), radial-gradient(0.9px 0.9px at 157px 277px, #edf3fb, transparent), radial-gradient(0.9px 0.9px at 19px 16px, #edf3fb, transparent), radial-gradient(0.8px 0.8px at 132px 274px, #8fd8fb, transparent), radial-gradient(0.9px 0.9px at 186px 107px, #edf3fb, transparent); background-size: 311px 311px; opacity: calc(0.45 + var(--g, 0) * 0.35); transform: scale(calc(1 + var(--g, 0) * 0.25)); }
.zf-st--mid { background-image: radial-gradient(1.1px 1.1px at 196px 362px, #edf3fb, transparent), radial-gradient(1.2px 1.2px at 164px 176px, #ffffff, transparent), radial-gradient(1.1px 1.1px at 57px 394px, #edf3fb, transparent), radial-gradient(1.4px 1.4px at 453px 319px, #ffffff, transparent), radial-gradient(1.2px 1.2px at 231px 333px, #edf3fb, transparent), radial-gradient(1.0px 1.0px at 213px 17px, #edf3fb, transparent), radial-gradient(1.3px 1.3px at 152px 413px, #edf3fb, transparent), radial-gradient(1.2px 1.2px at 0px 141px, #ffffff, transparent), radial-gradient(1.5px 1.5px at 153px 455px, #8fd8fb, transparent), radial-gradient(1.5px 1.5px at 157px 206px, #edf3fb, transparent), radial-gradient(1.1px 1.1px at 122px 309px, #8fd8fb, transparent), radial-gradient(1.2px 1.2px at 276px 393px, #edf3fb, transparent), radial-gradient(1.4px 1.4px at 343px 293px, #edf3fb, transparent), radial-gradient(1.3px 1.3px at 191px 464px, #ffffff, transparent), radial-gradient(1.3px 1.3px at 344px 240px, #ffffff, transparent), radial-gradient(1.2px 1.2px at 158px 405px, #8fd8fb, transparent), radial-gradient(1.5px 1.5px at 109px 283px, #ffffff, transparent), radial-gradient(1.3px 1.3px at 24px 421px, #8fd8fb, transparent), radial-gradient(1.5px 1.5px at 122px 24px, #ffffff, transparent), radial-gradient(1.2px 1.2px at 350px 467px, #edf3fb, transparent), radial-gradient(1.0px 1.0px at 407px 281px, #edf3fb, transparent), radial-gradient(1.5px 1.5px at 373px 251px, #ffffff, transparent), radial-gradient(1.0px 1.0px at 72px 392px, #ffffff, transparent), radial-gradient(1.6px 1.6px at 408px 22px, #edf3fb, transparent), radial-gradient(1.3px 1.3px at 275px 441px, #edf3fb, transparent), radial-gradient(1.3px 1.3px at 39px 11px, #ffffff, transparent); background-size: 467px 467px; opacity: calc(0.5 + var(--g, 0) * 0.4); transform: scale(calc(1 + var(--g, 0) * 0.6)); animation-duration: 200s; }
.zf-st--near { background-image: radial-gradient(1.9px 1.9px at 450px 278px, #edf3fb, transparent), radial-gradient(2.2px 2.2px at 683px 3px, #b5e8ff, transparent), radial-gradient(1.7px 1.7px at 665px 347px, #ffffff, transparent), radial-gradient(1.5px 1.5px at 476px 367px, #b5e8ff, transparent), radial-gradient(2.0px 2.0px at 401px 329px, #ffffff, transparent), radial-gradient(2.3px 2.3px at 428px 224px, #b5e8ff, transparent), radial-gradient(2.2px 2.2px at 456px 39px, #edf3fb, transparent), radial-gradient(1.6px 1.6px at 461px 411px, #b5e8ff, transparent), radial-gradient(1.8px 1.8px at 528px 326px, #b5e8ff, transparent), radial-gradient(1.9px 1.9px at 263px 93px, #ffffff, transparent), radial-gradient(2.2px 2.2px at 599px 314px, #ffffff, transparent), radial-gradient(1.8px 1.8px at 128px 660px, #ffffff, transparent); background-size: 691px 691px; opacity: calc(0.35 + var(--g, 0) * 0.65); transform: scale(calc(1 + var(--g, 0) * 1.3)); animation-duration: 150s; }
@keyframes zf-drift { to { rotate: 360deg; } }
.zf-neb { position: absolute; inset: -10%; opacity: calc(0.25 + var(--g, 0) * 0.75); transform: scale(calc(0.9 + var(--g, 0) * 0.25));
  background: radial-gradient(ellipse 40% 32% at 28% 32%, rgba(46, 120, 190, 0.32), transparent 70%), radial-gradient(ellipse 36% 30% at 74% 70%, rgba(80, 95, 200, 0.24), transparent 70%), radial-gradient(ellipse 55% 45% at 55% 45%, rgba(108, 209, 250, 0.1), transparent 70%); }
/* Overgangen: dezelfde sterren en nevel lopen door. Onder de aarde in de hero komen ze geleidelijk op (zoals de ruimte begint),
   en na het LinkedIn-stuk lopen ze nog een stuk door en vervagen ze naar zwart bij "Jouw kennis verdient een plek". */
.space-tail { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; }
.space-tail--in { --g: 0; bottom: 0; height: 55%; -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%); }
.space-tail--out { --g: 1; top: 0; height: 75vh; z-index: -1; -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.12) 40%, transparent 100%); mask: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.12) 40%, transparent 100%); }
.space-tail .zf-st { transform: none; }
.space-tail--out .zf-st--near { opacity: 0.7; }
.say { isolation: isolate; }
.zf-scene { -webkit-mask: linear-gradient(#000 52%, rgba(0, 0, 0, 0.22) 100%); mask: linear-gradient(#000 52%, rgba(0, 0, 0, 0.22) 100%); }
/* Geen kader: de rand van het vak heeft de kleur van de pagina. Alleen de gloed rond de tegel is blauw, en die groeit mee. */
.zf-glow { position: absolute; left: 50%; top: 50%; width: calc(320px + var(--g, 0) * 150vmax); height: calc(260px + var(--g, 0) * 150vmax); translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(24, 70, 120, 0.55) 0%, rgba(12, 36, 66, 0.3) 40%, transparent 75%); }
.zf-dots { position: absolute; opacity: 0.45; left: 50%; top: 50%; width: calc(240px + var(--g, 0) * 110vmax); height: calc(200px + var(--g, 0) * 100vmax); translate: -50% -50%; background-image: radial-gradient(rgba(140, 200, 240, 0.22) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); }
.zf-hud { position: absolute; left: 50%; top: 50%; width: calc(150px + var(--g, 0) * 300px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(108, 209, 250, 0.26); animation: zf-spin 40s linear infinite; }
.zf-hud::after { content: ""; position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.1); }
.zf-pulse { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 1.5px solid rgba(108, 209, 250, 0.6); opacity: 0; animation: zf-pulse 3.2s var(--ease) infinite; }
.zf-pulse--late { animation-delay: 1.6s; }
.zf-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 0; height: 0; perspective: 600px; transform: scale(calc(0.72 + var(--g, 0) * 0.5)); }
/* De LinkedIn-tegel: glas in LinkedIn-blauw, met de letters zoals LinkedIn ze tekent. */
.zf-in { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #1f7ad6, #0a66c2 45%, #0858aa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px rgba(150, 205, 255, 0.35), 0 0 40px rgba(40, 140, 240, 0.5), 0 0 120px rgba(30, 120, 220, 0.3); z-index: 5; }
.zf-in-mark { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; fill: #fff; stroke: none; }
.zf-ring { position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px solid rgba(160, 220, 255, 0.55); box-shadow: 0 0 14px rgba(108, 209, 250, 0.35); transform: rotateX(72deg) rotateY(-12deg) rotateZ(0deg); animation: zf-orbit 7s linear infinite; }
.zf-ring--b { left: -84px; top: -84px; width: 168px; height: 168px; border-color: rgba(160, 220, 255, 0.35); transform: rotateX(70deg) rotateY(58deg); animation: zf-orbit-b 11s linear infinite reverse; }
.zf-ring i { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #e9f8ff; box-shadow: 0 0 10px 3px rgba(108, 209, 250, 0.9); }
@keyframes zf-orbit { to { transform: rotateX(72deg) rotateY(-12deg) rotateZ(360deg); } }
@keyframes zf-orbit-b { to { transform: rotateX(70deg) rotateY(58deg) rotateZ(360deg); } }
@keyframes zf-spin { to { rotate: 360deg; } }
@keyframes zf-pulse { 0% { opacity: 0.7; transform: scale(calc(0.72 + var(--g, 0) * 0.5)); } 100% { opacity: 0; transform: scale(calc((0.72 + var(--g, 0) * 0.5) * 2.8)); } }
/* Vier kaartjes vertellen de route: jouw kennis, een concept dat op jouw ja wacht, jouw post, en een reactie. Geen cijfers. */
.zf-card { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.zf-float { position: relative; display: grid; gap: 8px; padding: 13px 14px; border-radius: 18px; background: linear-gradient(170deg, rgba(22, 40, 62, 0.94), rgba(10, 18, 30, 0.94)); border: 1px solid rgba(137, 208, 255, 0.26); box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9); animation: zf-float 5s ease-in-out infinite alternate; }
.c2 .zf-float { animation-delay: -1.5s; } .c3 .zf-float { animation-delay: -3s; } .c4 .zf-float { animation-delay: -4s; }
@keyframes zf-float { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.zf-tag { justify-self: start; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.4); }
.zf-doc { width: clamp(200px, 15vw, 236px); }
.zf-file { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.zf-file svg, .zf-act svg, .zf-ok svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.zf-file svg { color: var(--cyan); }
.zf-post { width: clamp(240px, 19vw, 290px); border-color: rgba(108, 209, 250, 0.7); box-shadow: 0 0 34px -8px rgba(108, 209, 250, 0.6), 0 22px 44px -22px rgba(0, 0, 0, 0.9); }
.zf-who { display: flex; align-items: center; gap: 9px; }
.zf-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #0b1a2a; font-size: 10.5px; font-weight: 800; background: linear-gradient(160deg, #cfeaff, #8fcdea); }
.zf-av--b { background: linear-gradient(160deg, #f4dcb8, #d8b082); }
.zf-name b { display: block; color: var(--ink); font-size: 12.5px; }
.zf-name small { display: block; color: var(--muted); font-size: 10.5px; }
.zf-hook { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.35; }
.zf-line { margin: -3px 0 0; color: var(--soft); font-size: 12px; }
.zf-act { display: flex; gap: 12px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--muted); font-size: 10.5px; font-weight: 600; }
.zf-act span { display: inline-flex; align-items: center; gap: 4px; }
.zf-chip { position: absolute; top: 10px; right: 10px; height: 18px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10px; font-weight: 700; color: #06131f; background: var(--cyan); }
.zf-concept { width: clamp(200px, 15vw, 236px); }
.zf-ok { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; color: var(--ink); font-size: 11px; font-weight: 700; border: 1px solid rgba(108, 209, 250, 0.55); background: rgba(108, 209, 250, 0.08); }
.zf-ok svg { color: var(--cyan); stroke-width: 2; }
.zf-comment { width: clamp(220px, 17vw, 260px); grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.zf-bubble { display: grid; gap: 2px; padding: 8px 11px; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, 0.06); color: var(--soft); font-size: 12px; line-height: 1.4; }
.zf-bubble b { color: var(--ink); font-size: 11px; }
.zicht-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(6, 11, 19, 0.6) 82%, rgba(6, 11, 19, 0.45)); opacity: var(--c, 0); }
.zicht-cap { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - 84rem) / 2 + var(--gutter))); bottom: clamp(32px, 8vh, 80px); margin: 0; display: grid; gap: 6px; opacity: var(--c, 0); transform: translate3d(0, calc((1 - var(--c, 0)) * 16px), 0); }
.zicht-cap b { color: #fff; font-size: clamp(36px, 5.2vw, 84px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.zicht-cap span { color: rgba(237, 243, 251, 0.85); font-size: clamp(16px, 1.3vw, 20px); }

/* Waar we voor staan: een dunne lijn, een rustige kop in het midden en drie beloftes die om en om staan. */
.say { position: relative; z-index: 2; padding: clamp(90px, 14vh, 160px) 0 clamp(70px, 12vh, 140px); }
.say-head { display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); }
.say-line { position: relative; width: 1px; height: 64px; margin-bottom: 26px; background: linear-gradient(transparent, rgba(108, 209, 250, 0.8)); }
.say-line i { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #e9f8ff; box-shadow: 0 0 10px 2px rgba(108, 209, 250, 0.8); animation: say-drop 2.2s var(--ease) infinite; }
@keyframes say-drop { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
.say-hint { display: inline-flex; align-items: center; gap: 8px; margin: 26px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.say-hint span { color: var(--cyan); animation: say-bob 1.6s ease-in-out infinite; }
@keyframes say-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.say-title { margin: 16px 0 0; color: var(--ink); font-size: clamp(36px, 4.6vw, 72px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; text-wrap: balance; }
.say-sub { margin: 20px 0 0; max-width: 32rem; color: var(--soft); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; }
/* Drie beloftes als kaarten op een vaste plek. Bij het scrollen schuiven ze één voor één omhoog in een rij,
   en de kleine animatie in elke kaart speelt mee met de scroll (--lp van 0 naar 1). Op de telefoon een stapel. */
.say { padding: 0; }
.pledge-stage { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(20px, 4vh, 44px); padding-top: var(--bar-h); background: transparent; }
.pledge-stage .say-line { height: 40px; margin-bottom: 14px; }
.pledge-stage .say-title { margin-top: 12px; font-size: clamp(34px, 4vw, 62px); }
.pledge-stage .say-sub { margin-top: 12px; }
.say-hint { transition: opacity 0.3s var(--ease); }
.pledge-row { width: 100%; max-width: 84rem; margin: 0 auto; padding: 0 var(--gutter); list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pl-card { position: relative; display: grid; align-content: start; gap: 10px; padding: 14px 14px 24px; border-radius: 28px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--glass-rim), var(--glass-shadow); will-change: transform, opacity; }
.pl-card h3 { margin: 4px 10px 0; color: var(--ink); font-size: clamp(22px, 1.9vw, 30px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.pl-card p { margin: 0 10px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.pl-n { margin: 10px 10px 0; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.pl-vis { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 20px; background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(30, 80, 130, 0.35), transparent 70%), #0a121d; border: 1px solid rgba(137, 208, 255, 0.12); }
.pl-vis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(140, 200, 240, 0.14) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); }
.pl-vis [style*="--a"] { --k: clamp(0, calc((var(--lp, 0) - var(--a)) / (var(--b) - var(--a))), 1); opacity: var(--k); transform: translate3d(0, calc((1 - var(--k)) * 12px), 0); }
.pl-vis svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #0b1a2a; font-size: 9.5px; font-weight: 800; background: linear-gradient(160deg, #cfeaff, #8fcdea); }
.pv-av--b { background: linear-gradient(160deg, #f4dcb8, #d8b082); }
/* 1: kennis loopt naar Orbit */
.pv-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(108, 209, 250, 0.55); }
.pv-lines path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--lp, 0) - 0.35) / 0.4, 1)); }
.pv-q { position: absolute; left: 6%; top: 10%; width: 44%; display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 4px 14px 14px 14px; background: rgba(239, 211, 167, 0.07); border: 1px solid rgba(239, 211, 167, 0.35); color: var(--ink); font-size: 11.5px; font-weight: 600; line-height: 1.35; }
.pv-q small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 500; }
.pv-doc { position: absolute; left: 6%; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 9px; border-radius: 999px; color: var(--ink); font-size: 11.5px; font-weight: 600; background: rgba(7, 13, 21, 0.75); border: 1px solid rgba(137, 208, 255, 0.35); }
.pv-doc svg { width: 14px; height: 14px; color: var(--cyan); stroke-width: 1.3; }
.pv-doc--1 { top: 46%; } .pv-doc--2 { top: 72%; }
.pv-orb { position: absolute; right: 6%; top: 50%; display: grid; justify-items: center; gap: 2px; translate: 0 -50%; }
.pv-orb img { width: clamp(76px, 7vw, 108px); height: auto; -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%); filter: drop-shadow(0 0 18px rgba(108, 209, 250, 0.45)); }
.pv-orb small { color: var(--soft); font-size: 10.5px; font-weight: 600; }
/* 2: jij keurt goed */
.pv-post { position: absolute; left: 8%; right: 8%; top: 9%; display: grid; gap: 7px; padding: 11px 12px; border-radius: 16px; background: linear-gradient(170deg, rgba(22, 40, 62, 0.95), rgba(10, 18, 30, 0.95)); border: 1px solid rgba(137, 208, 255, 0.25); }
.pv-who { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11.5px; }
.pv-tag { margin-left: auto; height: 18px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 9.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.4); }
.pv-hook { color: var(--ink); font-size: 12.5px; line-height: 1.35; }
.pv-post i, .pv-text i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.pv-post i.s, .pv-text i.s { width: 60%; } .pv-text i.m { width: 85%; }
.pv-btns { position: absolute; left: 8%; right: 8%; bottom: 13%; display: flex; gap: 8px; justify-content: flex-end; }
.pv-ghost, .pv-go { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pv-ghost { color: var(--soft); border: 1px solid var(--hair-2); }
.pv-go { --on: clamp(0, calc((var(--lp, 0) - 0.66) * 12), 1); position: relative; color: #06131f; background: var(--cyan); box-shadow: 0 0 calc(var(--on) * 22px) rgba(108, 209, 250, 0.7); transform: scale(calc(1 - var(--on) * (1 - var(--on)) * 0.3)); }
.pv-go-a { opacity: calc(1 - var(--on)); }
.pv-go-b { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; opacity: var(--on); }
.pv-go-b svg { width: 13px; height: 13px; stroke-width: 2.4; }
.pv-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: #fff !important; stroke: #0a121d !important; stroke-width: 1.2 !important; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
  --m: clamp(0, calc((var(--lp, 0) - 0.35) / 0.3), 1); opacity: clamp(0, calc((var(--lp, 0) - 0.3) * 10), 1);
  left: calc(28% + var(--m) * 46%); top: calc(44% + var(--m) * 34%); }
.pv-you { position: absolute; left: 8%; bottom: 14%; display: inline-flex; align-items: center; gap: 7px; color: var(--soft); font-size: 11px; font-weight: 600; }
.pv-you .pv-av { width: 22px; height: 22px; font-size: 8.5px; }
/* 3: nagelopen */
.pv-text { position: absolute; left: 9%; right: 9%; top: 10%; display: grid; gap: 9px; padding: 13px 14px; overflow: hidden; border-radius: 16px; background: linear-gradient(170deg, rgba(22, 40, 62, 0.95), rgba(10, 18, 30, 0.95)); border: 1px solid rgba(137, 208, 255, 0.22); }
.pv-claim { --h: clamp(0, calc((var(--lp, 0) - 0.45) / 0.15), 1); padding: 4px 6px; margin: 0 -6px; border-radius: 6px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.4; background: rgba(111, 224, 166, calc(var(--h) * 0.14)); box-shadow: inset 2px 0 0 rgba(111, 224, 166, calc(var(--h) * 0.9)); }
.pv-scan { position: absolute; left: 0; right: 0; height: 26px; top: calc(-26px + clamp(0, (var(--lp, 0) - 0.12) / 0.45, 1) * (100% + 26px)); background: linear-gradient(180deg, transparent, rgba(108, 209, 250, 0.22), transparent); border-bottom: 1px solid rgba(108, 209, 250, 0.6); }
.pv-src { position: absolute; left: 9%; bottom: 10%; display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; background: rgba(7, 13, 21, 0.8); border: 1px solid rgba(111, 224, 166, 0.45); color: var(--ink); font-size: 11.5px; font-weight: 700; }
.pv-src small { display: block; color: var(--muted); font-size: 10px; font-weight: 500; }
.pv-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #052014; background: var(--good); }
.pv-ok svg { width: 14px; height: 14px; stroke-width: 2.6; }
.foot-credit { margin-top: 6px; color: var(--dim); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .pl-card { --lp: 1; } .zicht-stage { --g: 1; --c: 1; } .zf-hud, .zf-ring, .zf-float, .zf-pulse, .zf-st { animation: none !important; } .say-line i, .say-hint span { animation: none; } .say-line i { opacity: 0; } }

/* ------------------------------------------------------------- onze naam -- */
.naam-stage { display: grid; place-items: center; background: transparent; }
.naam-inner { width: 100%; max-width: 84rem; margin: 0 auto; padding: var(--bar-h) var(--gutter) 0; display: grid; justify-items: center; text-align: center; }
.naam-word { position: relative; margin: clamp(60px, 13vh, 150px) 0 0.5em; color: var(--ink); font-size: clamp(64px, 12vw, 200px); font-weight: 700; letter-spacing: -0.06em; line-height: 0.92; white-space: nowrap; }
.nw-rise, .nw-zone { position: relative; display: inline-block; will-change: transform; }
.nw-add { position: absolute; left: 100%; top: 0; color: var(--muted); opacity: 0; will-change: opacity; }
.nw-swap { position: relative; display: inline-block; }
.nw-e { position: absolute; left: 0; top: 0; opacity: 0; }
.nw-ring { position: absolute; left: -17%; top: 0%; width: 134%; height: 104%; overflow: visible; pointer-events: none; }
.nw-ring ellipse { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 1 2; stroke-dashoffset: var(--ring, 1); vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(108, 209, 250, 0.45)); }
.naam-cap { margin: 0; max-width: 34rem; color: var(--soft); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; opacity: 0; transform: translate3d(0, 12px, 0); will-change: opacity, transform; }
.naam-trio { margin: clamp(22px, 4vh, 40px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.naam-trio li { padding: 12px 18px; border-radius: 999px; color: var(--soft); font-size: clamp(15px, 1.15vw, 17px); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); opacity: 0; transform: translate3d(0, 12px, 0); will-change: opacity, transform; }
.naam-trio b { color: var(--ink); }
.naam-trio li:last-child { border-color: rgba(108, 209, 250, 0.45); background: rgba(108, 209, 250, 0.06); }

/* ------------------------------------------------------ zo werken we samen -- */
.samen { padding-block: clamp(90px, 12vw, 160px) clamp(60px, 8vw, 110px); }
.path { position: relative; margin-top: clamp(36px, 5vw, 64px); }
.path-line { display: block; width: 100%; height: clamp(80px, 10vw, 150px); overflow: visible; }
.pl-base { fill: none; stroke: rgba(108, 209, 250, 0.16); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pl-lit { fill: none; stroke: var(--cyan); stroke-width: 2.2; stroke-dasharray: 1 2; stroke-dashoffset: var(--lit, 1); filter: drop-shadow(0 0 5px rgba(108, 209, 250, 0.6)); }
.path-light { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #edf3fb; box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.22), 0 0 22px 6px rgba(108, 209, 250, 0.55); will-change: transform; }
.steps { margin: clamp(-40px, -3vw, -20px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.step { position: relative; display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; padding: 0 6px; opacity: 0.32; transition: opacity 0.5s var(--ease); }
.step.on { opacity: 1; }
.step-dot { position: absolute; left: 50%; top: var(--dy, 0px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #0b141e; border: 2px solid rgba(108, 209, 250, 0.5); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.step.on .step-dot { background: var(--cyan); box-shadow: 0 0 14px rgba(108, 209, 250, 0.7); }
.step-n { margin: 64px 0 0; color: var(--cyan); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.step h3 { margin: 0; color: var(--ink); font-size: clamp(19px, 1.6vw, 24px); font-weight: 700; letter-spacing: -0.03em; }
.step p:not(.step-n) { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; max-width: 26ch; }
.step p b { color: var(--soft); }
.samen-note { margin-top: clamp(28px, 4vw, 48px); text-align: center; }

/* ---------------------------------------------------- orbit en de agents -- */
.crew { position: relative; isolation: isolate; padding-block: clamp(80px, 10vw, 140px); }
/* Het enige gekleurde licht in het midden van de pagina: Orbit verlicht zijn eigen werkvloer, zoals in de app.
   Zacht, koel en zonder randen; boven en onder loopt het uit in het zwart. */
.crew::before { content: ""; position: absolute; inset: -12vh 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 50% at 50% 40%, rgba(112, 158, 204, 0.2), rgba(52, 88, 132, 0.09) 48%, transparent 78%);
  -webkit-mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
/* Het team in één oogopslag: Orbit boven, de Raad ernaast, vier agents op één lijn met elk één regel. */
.crew-head { display: grid; justify-items: center; text-align: center; }
.crew-head .lede { max-width: 34rem; margin: 16px auto 0; }
.crew-stage { position: relative; width: 100%; max-width: 74rem; height: clamp(470px, 64vh, 580px); margin: clamp(20px, 3vh, 40px) auto 0; overflow: clip; overflow-clip-margin: 40px; }
.crew-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.crew-wires path { fill: none; stroke: rgba(108, 209, 250, 0.18); stroke-width: 1; transition: stroke 0.5s var(--ease), stroke-width 0.5s var(--ease); }
.crew-wires path.raad-wire { stroke-dasharray: 4 5; }
.crew-wires path.on { stroke: rgba(190, 228, 250, 0.85); stroke-width: 1.4; }
.crew-wires circle { fill: #edf3fb; filter: drop-shadow(0 0 6px #6cd1fa); }
.crew-floor { position: absolute; left: 50%; top: 58%; width: 300%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 97.45%, rgba(170, 210, 240, 0.55) 97.6%, rgba(90, 150, 210, 0.14) 97.85%, transparent 98.7%);
  -webkit-mask: linear-gradient(90deg, transparent 30%, #000 40% 60%, transparent 70%), linear-gradient(#000 2%, transparent 7%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent 30%, #000 40% 60%, transparent 70%), linear-gradient(#000 2%, transparent 7%); mask-composite: intersect; }
@keyframes work-scan { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-6px); } }
@keyframes work-bob { from { transform: translateY(0) scale(1); } to { transform: translateY(-9px) scale(1.03); } }
@keyframes work-write { from { transform: rotate(-3deg) translateX(-2px); } to { transform: rotate(3deg) translateX(2px) translateY(-3px); } }
.crew-orb { position: absolute; z-index: 2; left: 50%; top: 0; width: clamp(150px, 13vw, 200px); aspect-ratio: 1; translate: -50% 0; }
.crew-who { margin: 0; display: grid; gap: 2px; }
.crew-who b { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.crew-who span { color: var(--muted); font-size: 13.5px; }
.crew-who--orbit { position: absolute; z-index: 2; left: 50%; top: calc(clamp(150px, 13vw, 200px) - 6px); translate: -50% 0; justify-items: center; text-align: center; }
.crew-raad { position: absolute; z-index: 2; left: calc(50% + clamp(150px, 15vw, 230px)); top: clamp(36px, 5vh, 60px); display: grid; gap: 10px; }
.rb-beads { display: flex; gap: 4px; }
.rb-beads img { width: clamp(32px, 2.8vw, 40px); height: auto; }
.crew-agents { position: absolute; z-index: 3; left: 0; right: 0; bottom: 2%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.agent { display: grid; justify-items: center; gap: 3px; text-align: center; }
.ag-fig { position: relative; display: block; width: clamp(88px, 8vw, 118px); aspect-ratio: 1; margin-bottom: 8px; will-change: transform; }
.ag-fig::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -5%; height: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(108, 209, 250, 0.35), transparent); opacity: 0; transition: opacity 0.5s var(--ease); }
.ag-fig img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.6)); }
.ag-name { color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ag-role { color: var(--muted); font-size: 13.5px; }
.agent.on .ag-fig::before { opacity: 1; }
/* Op de muis zegt een agent zelf wat hij doet, in één korte zin. */
.agent { position: relative; }
.ag-say { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 12px); translate: -50% 0; white-space: nowrap; padding: 9px 14px; border-radius: 16px; color: var(--ink); font-size: 14px; font-weight: 600; background: rgba(12, 22, 34, 0.94); border: 1px solid rgba(137, 208, 255, 0.45); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8), 0 0 22px -8px rgba(108, 209, 250, 0.5); opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); transform-origin: 50% 100%; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; }
.ag-say::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; margin: -5px 0 0 -5px; rotate: 45deg; background: rgb(12, 22, 34); border-right: 1px solid rgba(137, 208, 255, 0.45); border-bottom: 1px solid rgba(137, 208, 255, 0.45); }
.talk > .ag-say, .ag-say.talk { opacity: 1; transform: none; }
.crew-raad > .ag-say { left: 0; translate: 0 0; bottom: calc(100% + 10px); }
.crew-raad > .ag-say::after { left: 24px; }
.orb-say { left: auto; right: calc(50% + clamp(84px, 7.5vw, 112px)); bottom: auto; top: clamp(60px, 7vw, 92px); translate: 0 0; transform-origin: 100% 50%; }
.orb-say::after { left: 100%; top: 50%; border-right: 1px solid rgba(137, 208, 255, 0.45); border-bottom: 0; border-top: 1px solid rgba(137, 208, 255, 0.45); }
.crew-orb { cursor: default; }

/* --------------------------------------------------------------- gieten -- */
.cast-stage { background: var(--sc-canvas); }
.cast-grid {
  height: 100%; width: 100%; max-width: 92rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(400px, 1.35fr) minmax(190px, 0.55fr); gap: clamp(22px, 3vw, 52px);
  align-items: center; padding: calc(var(--bar-h) + 1vh) var(--gutter) 2vh;
}
.cast-side { display: flex; flex-direction: column; gap: 14px; }
.cast-title { font-size: clamp(28px, 2.9vw, 46px); }
.beats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; max-width: 360px; }
.beats li { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.beats i { display: block; height: 100%; background: var(--cyan); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); box-shadow: 0 0 10px rgba(108, 209, 250, 0.6); }
.cap { display: grid; margin-top: 10px; min-height: clamp(220px, 30vh, 280px); }
.cap-step { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-content: start; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); pointer-events: none; }
.cap-step.on { opacity: 1; transform: none; }
.cap-fig { grid-row: span 3; width: clamp(64px, 6vw, 92px); aspect-ratio: 1; }
.cap-fig img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.cap-step.on .cap-fig img { animation: work-bob 2.2s ease-in-out infinite alternate; }
.cap-fig--raad { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: center; }
.cap-fig--raad img, .cap-step.on .cap-fig--raad img { animation: none; }
.cap-fig--you { display: grid; place-items: center; border-radius: 50%; background: var(--glass-shell); border: 1px solid rgba(255, 208, 120, 0.5); color: var(--amber); }
.cap-fig--you svg { width: 44%; height: 44%; stroke-width: 2.4; }
.cap-n { margin: 4px 0 0; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.cap-big { margin: 6px 0 0; color: var(--ink); font-size: clamp(22px, 2.1vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.cap-small { margin: 10px 0 0; color: var(--soft); font-size: 15px; line-height: 1.55; max-width: 34ch; }
.float-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 30px; }
.float-chips span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--dim); border: 1px solid var(--hair); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease); }
.float-chips span.on { opacity: 1; transform: none; color: var(--ink); border-color: rgba(137, 208, 255, 0.55); background: rgba(137, 208, 255, 0.1); }
.float-quote { margin: 0; min-height: 0; padding: 0 14px; border-left: 2px solid rgba(239, 211, 167, 0.7); color: var(--ink); font-size: 15px; font-weight: 600; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.float-quote.on { opacity: 1; transform: none; }
.cast-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cast-head { display: flex; align-items: center; gap: 12px; }
.cast-head .who { display: grid; line-height: 1.25; }
.cast-head .who b { color: var(--ink); font-size: 15px; }
.cast-head .who small { color: var(--muted); font-size: 12.5px; }
.status { margin-left: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: var(--quiet); background: rgba(143, 205, 234, 0.08); border: 1px solid rgba(143, 205, 234, 0.25); transition: color 0.3s var(--ease), background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.status.done { color: var(--amber); background: rgba(255, 208, 120, 0.08); border-color: rgba(255, 208, 120, 0.45); }
.mould { position: relative; width: 100%; height: var(--mould-h, 440px); border-radius: 26px; }
.cast-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.cast-post { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: normal; }
.cast-foot { margin-top: 2px; }
.cast-now { display: none; }
.notes { position: relative; align-self: stretch; margin: 0; padding: 0; list-style: none; }
.note {
  position: absolute; left: 0; right: 0; top: var(--y, 50%); display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; row-gap: 2px; align-items: center; padding-left: 4px;
  font-size: 13.5px; line-height: 1.42; color: var(--soft);
  opacity: 0; transform: translate3d(-10px, -50%, 0); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.note.on { opacity: 1; transform: translate3d(0, -50%, 0); }
.note::before { content: ""; position: absolute; right: calc(100% + 6px); top: 11px; width: var(--lead, 44px); height: 1px; background: linear-gradient(90deg, rgba(255, 208, 120, 0.15), rgba(255, 208, 120, 0.85)); transform-origin: 100% 50%; }
.note::after { content: ""; position: absolute; right: calc(100% + var(--lead, 44px) + 4px); top: 8px; width: 7px; height: 7px; border-radius: 99px; background: var(--amber); }
.note img { grid-row: span 2; width: 34px; height: 34px; }
.n-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.note--ok .n-kind { color: var(--good); }
.note--ask .n-kind { color: var(--amber); }
.note--point .n-kind { color: var(--quiet); }

/* ------------------------------------------------------- orbit aan het werk -- */
.round-stage { background: transparent; }
.round-grid { height: 100%; width: 100%; max-width: 92rem; margin: 0 auto; padding: calc(var(--bar-h) + 1.5vh) var(--gutter) 2vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.round-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.round-title { font-size: clamp(28px, 2.8vw, 44px); }
.round-lede { margin: 0; color: var(--soft); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.55; max-width: 48ch; }
.chat { position: relative; height: clamp(280px, 44vh, 440px); margin-top: 6px; overflow: hidden; border-radius: 24px; background: var(--glass-panel); border: 1px solid var(--hair); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-mask: linear-gradient(transparent 0, #000 16%, #000 100%); mask: linear-gradient(transparent 0, #000 16%, #000 100%); }
.chat-log { position: absolute; left: 14px; right: 14px; top: 14px; margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; transform: translate3d(0, var(--shift, 0px), 0); transition: transform 0.55s var(--ease); }
.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.msg.on { opacity: 1; transform: none; }
.msg-av { width: 34px; height: 34px; object-fit: contain; }
.msg-av--orb img { width: 34px; height: 34px; border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 72%); mask-image: radial-gradient(circle, #000 60%, transparent 72%); }
.msg-av--you { display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 208, 120, 0.55); color: var(--amber); }
.msg-av--you svg { width: 16px; height: 16px; stroke-width: 2.6; }
.msg-body { justify-self: start; max-width: 94%; padding: 9px 12px 10px; border-radius: 4px 16px 16px 16px; background: rgba(7, 13, 21, 0.66); border: 1px solid var(--hair); transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.msg-body b { display: block; color: var(--ink); font-size: 12.5px; }
.msg-body p { margin: 2px 0 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.msg.is-now .msg-body { border-color: rgba(108, 209, 250, 0.55); box-shadow: 0 0 22px -8px rgba(108, 209, 250, 0.6); }
.msg--orbit { grid-template-columns: minmax(0, 1fr) 34px; }
.msg--orbit .msg-av { order: 2; }
.msg--orbit .msg-body { order: 1; justify-self: end; border-radius: 16px 4px 16px 16px; background: rgba(20, 48, 74, 0.62); border-color: rgba(108, 209, 250, 0.28); }
.msg--you .msg-body { border-color: rgba(255, 208, 120, 0.5); background: rgba(255, 208, 120, 0.07); }
.msg--you .msg-body p { color: var(--amber); font-weight: 700; }
.att-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.att-chips i { font-style: normal; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--soft); border: 1px solid var(--hair-2); }
.att-chips--src i { color: var(--ink); border-color: rgba(137, 208, 255, 0.5); background: rgba(137, 208, 255, 0.08); }
.att-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 8px; width: 120px; }
.att-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(143, 205, 234, 0.85), rgba(143, 205, 234, 0.15)); }
.att-card { display: grid; gap: 2px; margin-top: 8px; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(239, 211, 167, 0.5); background: rgba(239, 211, 167, 0.06); }
.att-card b { font-size: 13.5px; color: var(--ink); }
.att-card small { font-size: 12px; color: var(--muted); }
.att-post { display: block; margin-top: 8px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--hair-2); color: var(--ink); font-size: 13px; line-height: 1.45; }
.chat-foot { margin-top: 2px; }
.round-right { display: grid; justify-items: center; align-content: center; gap: 14px; }
.now { display: grid; justify-items: center; text-align: center; width: 100%; }
.now-stage { position: relative; width: clamp(220px, 23vw, 330px); aspect-ratio: 1.25; overflow: hidden; }
.now-floor { position: absolute; left: 50%; top: 74%; width: 340%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(circle closest-side, #000209 85.3%, #070b14 92.36%, #0a2138 96.2%, #103e6d 97.26%, #2e8bd0 97.61%, #083d73 97.82%, #01162d 98.32%, #00050f99 99.3%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent 38%, #000 46% 54%, transparent 62%); mask: linear-gradient(90deg, transparent 38%, #000 46% 54%, transparent 62%); }
.now-fig { position: absolute; left: 50%; bottom: 25%; width: 58%; aspect-ratio: 1; translate: -50% 0; }
.now-fig > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: now-in 0.5s var(--ease) both; }
.now-fig img { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.6)); }
.now-fig .fig-orb { border-radius: 50%; -webkit-mask-image: radial-gradient(circle, #000 58%, transparent 71%); mask-image: radial-gradient(circle, #000 58%, transparent 71%); }
.now-fig .fig-raad { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 6%; }
.now-fig .fig-raad img { position: static; width: 100%; height: 100%; animation: none; }
.now-fig .fig-you { display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 208, 120, 0.6); color: var(--amber); background: radial-gradient(circle, rgba(255, 208, 120, 0.12), transparent 70%); }
.now-fig .fig-you svg { width: 44%; height: 44%; stroke-width: 2.4; }
.now-fig[data-who="research"] img { animation: now-in 0.5s var(--ease) both, work-scan 2.8s var(--ease) 0.5s infinite alternate; }
.now-fig[data-who="resultaten"] img, .now-fig[data-who="ideeen"] img { animation: now-in 0.5s var(--ease) both, work-bob 2s ease-in-out 0.5s infinite alternate; }
.now-fig[data-who="schrijven"] img { animation: now-in 0.5s var(--ease) both, work-write 0.9s ease-in-out 0.5s infinite alternate; }
@keyframes now-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.94); } to { opacity: 1; transform: none; } }
.now-label { margin: 4px 0 0; color: var(--ink); font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
.now-task { margin: 2px 0 0; color: var(--cyan); font-size: 15px; font-weight: 600; }
.now-work { width: min(100%, 380px); min-height: 96px; margin-top: 12px; text-align: left; }
.cycle { position: relative; width: min(100%, 360px); margin: 26px 0 22px; }
.cycle svg { display: block; width: 100%; height: auto; overflow: visible; }
.cy-track { fill: none; stroke: rgba(108, 209, 250, 0.22); stroke-width: 1.2; stroke-dasharray: 3 5; }
.cy-light { fill: #edf3fb; filter: drop-shadow(0 0 7px #6cd1fa) drop-shadow(0 0 2px #6cd1fa); }
.cy-labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.cy-labels li { position: absolute; left: var(--lx); top: var(--ly); translate: -50% -50%; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--dim); background: rgba(8, 11, 14, 0.85); border: 1px solid var(--hair); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); white-space: nowrap; }
.cy-labels li.on { color: var(--ink); border-color: rgba(108, 209, 250, 0.6); }

/* -------------------------------------------------------------- in de praktijk -- */
.cases-stage { background: transparent; }
.cases-grid { height: 100%; width: 100%; max-width: 92rem; margin: 0 auto; padding: calc(var(--bar-h) + 2vh) var(--gutter) 3vh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cases-left { display: flex; flex-direction: column; }
.cases-title { font-size: clamp(30px, 3.2vw, 50px); }
.case-dots { display: flex; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.case-dots li { width: 34px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.case-dots li.on { background: var(--cyan); box-shadow: 0 0 10px rgba(108, 209, 250, 0.6); }
/* De route: zeven stappen op één lijn. Wat klaar is licht op, de huidige stap gloeit. */
.case-rail { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 30rem; margin: 22px 0 0; padding: 0 0 24px; list-style: none; }
.case-rail::before, .case-rail::after { content: ""; position: absolute; left: calc(100% / 14); top: 17px; height: 1px; }
.case-rail::before { right: calc(100% / 14); background: rgba(255, 255, 255, 0.12); }
.case-rail::after { width: calc((100% - 100% / 7) * var(--rp, 0)); background: linear-gradient(90deg, rgba(108, 209, 250, 0.35), var(--cyan)); transition: width 0.5s var(--ease); }
.case-rail li { position: relative; z-index: 1; display: grid; justify-items: center; }
.rl-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0c131d; border: 1px solid rgba(255, 255, 255, 0.14); opacity: 0.42; filter: grayscale(0.7); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease), transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.rl-ic img { width: 27px; height: 27px; object-fit: contain; }
.case-rail li.on .rl-ic { opacity: 1; filter: none; border-color: rgba(108, 209, 250, 0.45); }
.case-rail li.now .rl-ic { transform: scale(1.18); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.14), 0 0 18px rgba(108, 209, 250, 0.5); }
/* Alleen de huidige stap draagt zijn naam, zo lopen de namen nooit tegen elkaar aan. */
.rl-name { position: absolute; top: 46px; left: 50%; translate: -50% 0; color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.4s var(--ease); }
.case-rail li.now .rl-name { opacity: 1; }
.case-rail li:first-child .rl-name { left: 0; translate: 0 0; }
.case-rail li:last-child .rl-name { left: auto; right: 0; translate: 0 0; }
.ct-step { margin: 0 0 10px; color: var(--cyan); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.cv-team { display: flex; gap: 8px; }
.cv-team span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; color: var(--ink); font-size: 13.5px; font-weight: 700; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(137, 208, 255, 0.35); }
.cv-team img { width: 30px; height: 30px; object-fit: contain; }

.cv-beads { display: flex; gap: 2px; }
.cv-agent--raad .cv-beads img { width: 38px; height: 38px; }
.cv-agent--eva > img { width: 60px; height: 60px; }
.case-vis.on .cv-agent--eva > img { animation: none; }
.cv-files { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.cv-files li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.f-ic { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.cv-orders { gap: 10px; }
.cv-order { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 6px; border-radius: 16px; background: rgba(7, 13, 21, 0.55); border: 1px solid rgba(137, 208, 255, 0.22); }
.cv-order img { flex: none; width: 40px; height: 40px; object-fit: contain; }
.cv-order > span { display: grid; gap: 1px; min-width: 0; }
.cv-order b { font-size: 14.5px; }
.cv-order small { color: var(--soft); font-size: 13px; }
.cv-solo { left: 8%; top: 26%; width: 76%; padding: 22px 24px; }
.cv-solo b { font-size: clamp(20px, 1.8vw, 28px); }
.cv-post--mini { top: 17%; }
.case-vis[data-i="6"] .cv-approve, .case-vis[data-i="6"] .cv-done { top: 50%; }
.cv-live { position: absolute; left: 4%; top: 68%; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 14px; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 700; background: rgba(7, 13, 21, 0.7); border: 1px solid rgba(111, 224, 166, 0.45); }
.cv-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
/* Na "Online op LinkedIn" loopt er een lijn naar beneden, de volgende sectie in. */
.case-vis .cv-drop { position: absolute; left: calc(4% + 18.5px); top: calc(68% + 42px); width: 2px; height: 100vh; opacity: 1; transform-origin: 50% 0; transform: scaleY(var(--k)); background: linear-gradient(var(--good), var(--cyan) 18%, var(--cyan)); box-shadow: 0 0 10px rgba(108, 209, 250, 0.45); }

/* Online: de post zoals hij op LinkedIn staat. De lijn uit de stappen komt hier binnen. */
.online { position: relative; padding: clamp(90px, 15vh, 160px) 0 clamp(50px, 8vh, 100px); }
.online-line { position: absolute; left: var(--lx, 50%); top: 0; width: 2px; height: var(--ly, 120px); margin-left: -1px; background: linear-gradient(var(--cyan), rgba(108, 209, 250, 0.75)); box-shadow: 0 0 10px rgba(108, 209, 250, 0.45); }
.online-spark { position: absolute; left: var(--lx, 50%); top: var(--sy, 0px); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #e9f8ff; box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.25), 0 0 18px 4px rgba(108, 209, 250, 0.75); }
.online.landed .online-spark { opacity: 0; transition: opacity 0.3s var(--ease); }
.online-grid { width: 100%; max-width: 92rem; margin: 0 auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.online-sub { margin: 16px 0 0; max-width: 30rem; color: var(--soft); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
.li-post { position: relative; margin-left: 4%; max-width: 34rem; display: grid; gap: 14px; padding: 20px 22px 16px; border-radius: 24px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); transition: border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); will-change: opacity, transform; }
.online.landed .li-post { border-color: rgba(108, 209, 250, 0.45); box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 40px -12px rgba(108, 209, 250, 0.55); }
.li-plug { position: absolute; left: var(--px, 18px); top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(108, 209, 250, 0.9); opacity: 0; }
.online.landed .li-plug { opacity: 1; }
.online.landed .li-plug::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.8); animation: pin-ping 1.4s var(--ease) 2 both; }
.li-head { display: flex; align-items: center; gap: 12px; }
.li-head img { width: 44px; height: 44px; }
.li-head b { display: block; color: var(--ink); font-size: 15.5px; }
.li-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.li-badge { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.4); }
.li-body p { margin: 0 0 6px; color: var(--soft); font-size: 15px; line-height: 1.55; }
.li-body p:first-child { color: var(--ink); font-weight: 600; }
.li-actions { display: flex; gap: 22px; padding-top: 12px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13px; font-weight: 600; }
.li-next { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; border-radius: 16px; background: rgba(7, 13, 21, 0.55); border: 1px solid rgba(137, 208, 255, 0.2); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.li-next img { width: 34px; height: 34px; object-fit: contain; }
.li-next small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.online-note { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; color: var(--muted); font-size: 12.5px; }
.case-texts { display: grid; margin-top: clamp(22px, 4vh, 40px); }
.case-text { grid-area: 1 / 1; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.case-text.on { opacity: 1; transform: none; }
.ct-big { margin: 0; color: var(--ink); font-size: clamp(28px, 3vw, 46px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; text-wrap: balance; }
.ct-small { margin: 16px 0 0; max-width: 32rem; color: var(--soft); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
.cases-right { position: relative; height: clamp(380px, 62vh, 580px); }
.case-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(closest-side at 50% 42%, rgba(96, 140, 184, 0.1), transparent); }

.case-vis { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }
.case-vis.on { opacity: 1; }
/* Alles in een situatie verschijnt op het ritme van de scroll: --lp loopt van 0 naar 1. */
.case-vis [style*="--a"] { --k: clamp(0, calc((var(--lp, 0) - var(--a)) / (var(--b) - var(--a))), 1); opacity: var(--k); transform: translate3d(0, calc((1 - var(--k)) * 18px), 0); }
.cv-card { position: absolute; display: grid; gap: 8px; padding: 16px 18px; border-radius: 22px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); overflow: hidden; }
.cv-card b { color: var(--ink); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.3; letter-spacing: -0.015em; }
.cv-card small { color: var(--muted); font-size: 12.5px; }
.cv-tag { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.45); }
.cv-tag--idea { background: rgba(239, 211, 167, 0.08); border-color: rgba(239, 211, 167, 0.55); }
.cv-tag--lesson { background: rgba(111, 224, 166, 0.08); border-color: rgba(111, 224, 166, 0.5); color: var(--good); }
.cv-card i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.cv-card i:last-of-type { width: 62%; }
/* scene 1 */
/* Eén bedrijf, per situatie hoogstens drie dingen: wie werkt, wat er binnenkomt, wat eruit komt. */
.case-co { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px 10px 10px; justify-self: start; align-self: flex-start; border-radius: 18px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--glass-rim); }
.case-co b { display: block; color: var(--ink); font-size: 16px; }
.case-co small { display: block; color: var(--soft); font-size: 13.5px; margin-top: 2px; }
.co-face { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #0c131d; box-shadow: 0 0 0 1px rgba(137, 208, 255, 0.35); }
.cv-face { flex: none; width: 30px; height: 30px; border-radius: 50%; }
.cv-by { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; }
.cv-by img { width: 22px; height: 22px; border-radius: 50%; }
.cv-tag img { width: 22px; height: 22px; margin: 0 6px 0 -6px; object-fit: contain; }
/* Orbit is hier de echte, levende orb, net als bovenaan de pagina. */
.cv-orb { position: relative; flex: none; width: 104px; height: 104px; margin: -22px 0 -22px -18px; }
/* Wie er werkt: de figuur zweeft vrij met zijn naam ernaast, zonder kader, zodat ook Orbit met zijn ringen ruimte heeft. */
.cv-agent { position: absolute; left: 4%; top: 1%; display: inline-flex; align-items: center; gap: 12px; height: 60px; color: var(--ink); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.cv-agent > img { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.case-vis.on .cv-agent > img { animation: work-bob 2.4s ease-in-out infinite alternate; }
.cv-one { left: 4%; top: 20%; width: 62%; }
.cv-two { right: 2%; top: 58%; width: 58%; }
.cv-two--idea { border-color: rgba(239, 211, 167, 0.4); }
.cv-two--lesson { border-color: rgba(111, 224, 166, 0.35); }
.cv-bubble { position: absolute; display: grid; gap: 6px; padding: 18px 20px; border-radius: 22px 22px 22px 6px; background: rgba(239, 211, 167, 0.07); border: 1px solid rgba(239, 211, 167, 0.45); color: var(--ink); font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; line-height: 1.35; }
.cv-bubble small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.cv-post { left: 4%; top: 17%; width: 84%; }
.cv-post p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.cv-post p:first-of-type { color: var(--ink); font-weight: 600; }
.cv-who { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; }
.cv-who .ini { width: 30px; height: 30px; font-size: 11px; }
.cv-who small { margin-left: auto; }
.cv-checked { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.cv-checked svg { width: 15px; height: 15px; stroke-width: 2.6; color: var(--good); }
.cv-approve, .cv-done { position: absolute; left: 4%; top: 80%; }
.cv-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px; color: var(--amber-ink); font-weight: 700; font-size: 15px; background: linear-gradient(180deg, #ffe4a6, #f7c35c 70%, #efb64a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 14px 30px -14px rgba(246, 190, 80, 0.6); }
/* "Goedgekeurd" schuift over de knop heen, dus de knop verdwijnt zonder tweede beweging. */
.cv-done { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; color: var(--amber); font-weight: 700; font-size: 15px; border: 1px solid rgba(255, 208, 120, 0.55); background: #17150f; box-shadow: 0 0 0 6px #0a0f17; }
.cv-done .cv-face { width: 28px; height: 28px; margin-left: -10px; }
.cv-chart { top: 18%; }
.cv-bars { display: flex; align-items: flex-end; gap: 10px; height: clamp(90px, 13vh, 130px); padding-top: 6px; }
.cv-bars i { flex: 1; height: var(--h) !important; width: auto !important; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(143, 205, 234, 0.55), rgba(143, 205, 234, 0.08)); transform-origin: 50% 100%; transform: scaleY(var(--k)) !important; opacity: 1 !important; }
.cv-bars i.now { background: linear-gradient(180deg, var(--cyan), rgba(108, 209, 250, 0.15)); box-shadow: 0 0 18px -4px rgba(108, 209, 250, 0.6); }

/* ---------------------------------------------------------------- vragen -- */
.vragen { position: relative; padding-block: clamp(80px, 10vw, 150px) clamp(40px, 6vw, 80px); }
.vragen-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.link-inline { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(108, 209, 250, 0.4); }
.faq-title { margin: 0 0 8px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
details { border-top: 1px solid var(--hair); }
details:last-of-type { border-bottom: 1px solid var(--hair); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; list-style: none; cursor: pointer; color: var(--ink); font-size: 16.5px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform 0.25s var(--ease); }
details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { summary:hover { color: #fff; } summary:hover svg { color: var(--cyan); } }
details p { margin: 0 0 18px; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--soft); }

/* ---------------------------------------------------------------- slot -- */
.slot { position: relative; min-height: clamp(900px, 165vh, 1500px); padding: calc(var(--bar-h) + clamp(40px, 9vh, 110px)) 0 0; overflow: clip; isolation: isolate; }
.slot-earth { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.slot-stars { position: absolute; left: -6%; right: -6%; top: 0; height: 60%; background: radial-gradient(circle at 66.8% 82.5%, #edf3fbb3 0, transparent 2.5px), radial-gradient(circle at 43.6% 17.4%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 82.7% 49.9%, #c9d6e3cc 0, transparent 2.0px), radial-gradient(circle at 57.4% 15.7%, #c9d6e366 0, transparent 1.7px), radial-gradient(circle at 2.4% 50.7%, #edf3fb80 0, transparent 1.7px), radial-gradient(circle at 50.5% 87.5%, #edf3fb99 0, transparent 2.5px), radial-gradient(circle at 11.5% 73.9%, #edf3fb99 0, transparent 1.7px), radial-gradient(circle at 60.2% 55.5%, #c9d6e399 0, transparent 1.7px), radial-gradient(circle at 23.4% 7.9%, #c9d6e380 0, transparent 1.7px), radial-gradient(circle at 82.4% 74.2%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 94.4% 10.4%, #6cd1fa66 0, transparent 2.5px), radial-gradient(circle at 4.9% 18.9%, #edf3fbcc 0, transparent 2.5px), radial-gradient(circle at 86.5% 4.3%, #6cd1fa99 0, transparent 1.7px), radial-gradient(circle at 96.5% 33.4%, #edf3fbb3 0, transparent 1.7px), radial-gradient(circle at 10.8% 87.8%, #c9d6e366 0, transparent 1.7px), radial-gradient(circle at 30.8% 95.3%, #edf3fbcc 0, transparent 1.7px), radial-gradient(circle at 67.0% 10.2%, #edf3fbcc 0, transparent 2.5px), radial-gradient(circle at 24.2% 5.3%, #c9d6e3b3 0, transparent 2.5px), radial-gradient(circle at 78.7% 90.0%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 27.0% 22.2%, #6cd1fab3 0, transparent 1.7px), radial-gradient(circle at 62.7% 61.2%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 24.4% 47.0%, #edf3fbb3 0, transparent 1.7px), radial-gradient(circle at 58.5% 54.1%, #edf3fb99 0, transparent 2.5px), radial-gradient(circle at 32.4% 87.2%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 77.0% 53.2%, #6cd1fa66 0, transparent 2.5px), radial-gradient(circle at 2.3% 82.5%, #6cd1fa66 0, transparent 1.7px), radial-gradient(circle at 67.5% 82.3%, #edf3fb80 0, transparent 2.0px), radial-gradient(circle at 5.4% 85.7%, #edf3fb66 0, transparent 1.7px), radial-gradient(circle at 93.2% 71.7%, #edf3fb80 0, transparent 1.7px), radial-gradient(circle at 30.7% 50.1%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 40.3% 66.3%, #c9d6e3b3 0, transparent 1.7px), radial-gradient(circle at 48.9% 63.9%, #edf3fb66 0, transparent 2.5px), radial-gradient(circle at 71.2% 92.3%, #6cd1fa80 0, transparent 2.5px), radial-gradient(circle at 68.0% 58.8%, #edf3fbb3 0, transparent 2.0px), radial-gradient(circle at 74.2% 52.0%, #6cd1fa99 0, transparent 2.0px), radial-gradient(circle at 41.7% 80.9%, #edf3fbcc 0, transparent 2.0px), radial-gradient(circle at 75.2% 44.7%, #6cd1fab3 0, transparent 1.7px), radial-gradient(circle at 2.1% 23.2%, #6cd1fab3 0, transparent 2.5px); opacity: 0.7; -webkit-mask: linear-gradient(transparent, #000 30% 70%, transparent); mask: linear-gradient(transparent, #000 30% 70%, transparent); }
.slot-globe { position: absolute; left: 50%; top: var(--gy, 0px); width: var(--gw, 130vw); transform: translate3d(-50%, var(--gp, 0px), 0); will-change: transform; }
.slot-earth-img { display: block; width: 100%; height: auto; max-width: none; -webkit-mask: linear-gradient(transparent 0%, #000 16%, #000 84%, transparent 100%); mask: linear-gradient(transparent 0%, #000 16%, #000 84%, transparent 100%); }
.slot-earth-gl { -webkit-mask: linear-gradient(transparent 0%, #000 16%, #000 84%, transparent 100%); mask: linear-gradient(transparent 0%, #000 16%, #000 84%, transparent 100%); }
.slot-globe.is-turning .earth-gl { opacity: 1; }
.pin { position: absolute; left: 47.1%; top: 55.5%; width: 0; height: 0; }
.pin-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #edf3fb; box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.25), 0 0 20px 6px rgba(108, 209, 250, 0.6); }
.pin-dot::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.7); opacity: 0; transform: scale(0.5); }
.slot.is-seen .pin-dot::after { animation: pin-ping 1.6s var(--ease) 0.3s 2 both; }
@keyframes pin-ping { from { opacity: 0.9; transform: scale(0.5); } to { opacity: 0; transform: scale(2.4); } }
.pin-stem { position: absolute; right: 8px; top: -1px; width: var(--stem, 60px); height: 1px; background: linear-gradient(270deg, rgba(108, 209, 250, 0.9), rgba(108, 209, 250, 0.25)); }
.pin-card { position: absolute; z-index: 3; left: var(--cx, 50%); top: var(--cy, 70%); display: grid; gap: 2px; padding: 14px 18px; border-radius: 20px; background: radial-gradient(circle at 0 0, rgba(237, 243, 251, 0.1), transparent 40px), linear-gradient(170deg, rgba(14, 26, 42, 0.86), rgba(4, 9, 17, 0.9)); border: 1px solid rgba(108, 209, 250, 0.35); box-shadow: inset 0 1px 0 rgba(237, 243, 251, 0.2), 0 20px 40px -20px rgba(0, 0, 0, 0.9); }
.pin-card p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.45; }
.pin-card .pin-title { color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.pin-card .link-cyan { min-height: 36px; font-size: 14px; }
.slot-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.slot-title { margin: 0; color: var(--ink); font-size: clamp(46px, 6.4vw, 116px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; }
.st-line { display: block; }
.slot-sub { margin: 20px 0 0; max-width: 30rem; color: var(--soft); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
.composer { display: grid; gap: 14px; margin: 0; padding: clamp(18px, 1.8vw, 26px); border-radius: 28px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend { padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.field input[type="text"], .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 14px; resize: vertical;
  color: var(--ink); font: 500 15px/1.45 "Manrope", system-ui, sans-serif;
  background: rgba(7, 13, 21, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.field textarea { min-height: 88px; }
.field input::placeholder, .field textarea::placeholder { color: #6f8196; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: rgba(108, 209, 250, 0.7); box-shadow: 0 0 0 3px rgba(108, 209, 250, 0.16); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--soft); font-size: 14px; font-weight: 600; transition: color 0.16s var(--ease), border-color 0.16s var(--ease), background-color 0.16s var(--ease); }
.seg input:checked + span { color: var(--cyan); border-color: rgba(108, 209, 250, 0.6); background: rgba(108, 209, 250, 0.08); }
.seg input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .seg label:hover span { border-color: rgba(255, 255, 255, 0.24); } }
.composer-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }

/* ---------------------------------------------------------------- voet -- */
.foot { position: relative; z-index: 2; background: var(--sc-canvas); border-top: 1px solid var(--hair); padding: clamp(48px, 6vw, 72px) 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; }
.foot-brand p { margin: 12px 0 0; max-width: 30ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.foot-col { display: grid; align-content: start; gap: 2px; font-size: 14.5px; color: var(--muted); }
.foot-col h3 { margin: 0 0 8px; color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; }
.foot-col a { display: inline-flex; align-items: center; min-height: 36px; color: var(--soft); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--cyan); } }
.foot-col span { padding: 6px 0; }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); }
.foot-legal p { margin: 0; color: var(--dim); font-size: 12.5px; line-height: 1.55; }

/* ---------------------------------------------------- zonder WebGL ------ */
.no-gl .cast-gl { display: none; }
.no-gl .cast-post { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; padding: 28px 30px; border-radius: 26px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: var(--glass-rim), var(--glass-shadow); }
.no-gl .mould { height: auto; }
.no-gl .cast-post p { margin: 0 0 12px; color: var(--ink); font-size: 16px; line-height: 1.5; font-weight: 600; }


/* ------------------------------------------------------- minder beweging -- */
@media (prefers-reduced-motion: reduce) {
  .illus .ln { stroke-dashoffset: 0; transition: none; }
  .illus .fill-dot { opacity: 0.9; transition: none; }
  .note { transform: translate3d(0, -50%, 0); transition: opacity 0.2s; }
  .say-row { transform: none !important; }
  .ex-in { transform: none !important; }
  .now-fig > *, .now-fig img, .msg, .chat-log { animation: none !important; transition: none !important; }
  .case-vis.on .cv-agent > img { animation: none; }
  .agent .ag-fig img { animation: none !important; }
  .naam-cap, .naam-trio li { opacity: 1; transform: none; }
  .slot.is-seen .pin-dot::after { animation: none; }
}

/* -------------------------------------------------------------- tablet -- */
@media (max-width: 1100px) {
  .pl-vis { aspect-ratio: 16 / 12; }
  .pv-q { width: 56%; font-size: 10.5px; padding: 6px 8px; } .pv-q .pv-av { display: none; }
  .pv-doc { height: 26px; font-size: 10.5px; } .pv-doc--1 { top: 50%; } .pv-doc--2 { top: 75%; }
  .pv-orb img { width: 64px; }
  .pv-hook { font-size: 11.5px; } .pv-ghost { display: none; }
  .pv-claim { font-size: 11px; } .pv-src { font-size: 10.5px; }
  .bar-links { display: none; }
  .bar { grid-template-columns: 1fr auto; }
  .cast-grid { grid-template-columns: minmax(230px, 0.9fr) minmax(320px, 1.3fr); }
  .notes { display: none; }
  .cast-now { display: block; margin: 0; min-height: 3em; font-size: 14px; line-height: 1.45; color: var(--soft); }
  .cast-now b { font-weight: 700; }
}

/* -------------------------------------------------------------- telefoon -- */
@media (max-width: 760px) {
  :root { --bar-h: 60px; }
  .bar-cta { display: none; }
  .bar-menu { display: inline-flex; }
  .hero-title { font-size: clamp(32px, 9.6vw, 48px); }
  .say-title { font-size: clamp(36px, 10.5vw, 48px); }
  .zicht-words, .zicht-frame { --w: 52vw; }
  .zicht-words { grid-template-columns: 1fr; grid-template-rows: 1fr 190px 1fr; justify-items: center; font-size: clamp(34px, 10.5vw, 50px); }
  .zw-l { align-self: end; justify-self: center; transform: translate3d(0, calc(var(--g, 0) * var(--g, 0) * -55vh), 0); }
  .zw-r { align-self: start; justify-self: center; transform: translate3d(0, calc(var(--g, 0) * var(--g, 0) * 55vh), 0); }
  .zf-doc, .zf-concept, .zf-comment { width: 176px; } .zf-post { width: 206px; }
  .zf-float { padding: 10px 11px; gap: 6px; }
  .pledge-stage { justify-content: flex-start; gap: 18px; padding-top: calc(var(--bar-h) + 14px); }
  .pledge-stage .say-line, .pledge-stage .say-hint { display: none; }
  .pledge-stage .say-title { font-size: clamp(30px, 8.6vw, 40px); }
  .pledge-row { position: relative; display: block; flex: 1; padding: 0 var(--gutter); }
  .pl-card { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; transform-origin: 50% 0; }
  .pl-card { background: linear-gradient(170deg, #111b28, #0a1119); }
  .pv-q { width: 58%; }
  .pl-card p { font-size: 14.5px; }
  .pv-orb img { width: 74px; }
  .hero-orb { --orb: clamp(190px, 62vw, 280px); }
  .steps { grid-template-columns: 1fr; gap: 26px; margin-top: 20px; }
  .path-line, .path-light { display: none; }
  .step { justify-items: start; text-align: left; padding-left: 28px; }
  .step::before { content: ""; position: absolute; left: 5px; top: 0; bottom: -26px; width: 1px; background: rgba(108, 209, 250, 0.2); }
  .step:last-child::before { bottom: 0; }
  .step-dot { left: 0; margin-left: 0; top: 2px; }
  .step-n { margin-top: 0; }
  .crew-stage { height: auto; overflow: visible; display: grid; justify-items: center; gap: 22px; padding: 0 var(--gutter); }
  .crew-wires, .crew-floor { display: none; }
  .crew-orb { position: relative; left: auto; translate: none; width: clamp(130px, 38vw, 170px); margin-bottom: -18px; }
  .crew-who--orbit { position: relative; left: auto; top: auto; translate: none; }
  .crew-raad { position: relative; left: auto; top: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 1px solid var(--hair-2); }
  .rb-beads img { width: 26px; }
  .crew-raad .crew-who b { font-size: 14.5px; }
  .crew-raad .crew-who span { font-size: 12.5px; }
  .crew-agents { position: relative; bottom: auto; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .ag-fig { width: clamp(76px, 22vw, 96px); }
  .ag-name { font-size: 15px; }
  .ag-say { position: relative; left: auto; bottom: auto; translate: none; white-space: normal; max-width: 160px; margin-top: 8px; text-align: center; font-size: 13px; transform-origin: 50% 0; }
  .ag-say::after { top: 0; border: 0; border-left: 1px solid rgba(137, 208, 255, 0.45); border-top: 1px solid rgba(137, 208, 255, 0.45); }
  .crew-raad > .ag-say, .orb-say { display: none; }  .vragen-grid { grid-template-columns: 1fr; }
  .slot { min-height: 0; padding-bottom: clamp(420px, 120vw, 560px); }
  .feed-head .srcs { display: none; }
  .bento { grid-template-columns: 1fr; }
  .b-card:nth-child(n) { grid-column: 1; grid-row: auto; }
  .b-card--wide .b-in { flex-direction: column; align-items: flex-start; }
  .cast-grid { grid-template-columns: 1fr; align-content: start; gap: 12px; padding-top: calc(var(--bar-h) + 10px); }
  .cast-side { gap: 10px; }
  .cases-grid { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: calc(var(--bar-h) + 10px); }
  .cases-left .eyebrow { display: none; }
  .cases-title { font-size: 24px; }
  .case-dots { margin-top: 10px; }
  .case-texts { margin-top: 12px; }
  .ct-big { font-size: 26px; }
  .ct-small { font-size: 14.5px; margin-top: 8px; }
  .cases-right { height: clamp(320px, 52vh, 420px); }
  .case-co { margin-top: 10px; padding: 6px 12px 6px 6px; }
  .co-face { width: 34px; height: 34px; }
  .cv-orb { width: 80px; height: 80px; margin: -17px 0 -17px -2px; }
  .case-co b { font-size: 13.5px; }
  .case-co small { font-size: 11.5px; }
  .cv-agent { left: 0; top: 0; height: 46px; font-size: 14.5px; }
  .cv-agent > img { width: 46px; height: 46px; }
  .cv-agent--raad .cv-beads img { width: 30px; height: 30px; }
  .cv-one { left: 0; top: 16%; width: 88%; }
  .cv-two { right: 0; top: 56%; width: 84%; }
  .cv-post { left: 0; top: 15%; width: 100%; }
  .cv-post p { font-size: 13.5px; }
  .cv-approve, .cv-done { left: 0; top: 84%; }
  .case-rail { margin-top: 12px; }
  .rl-name { display: none; }
  .case-rail { padding-bottom: 4px; }
  .case-vis .cv-drop { left: 18.5px; top: calc(70% + 42px); }
  .cv-order img { width: 34px; height: 34px; }
  .case-vis[data-i="0"] .cv-one { top: 14%; }
  .case-vis[data-i="0"] .cv-two { top: 61%; }
  .cv-files { gap: 5px; }
  .cv-files li { font-size: 13px; }
  .cv-order { padding: 5px 10px 5px 4px; }
  .online-grid { grid-template-columns: 1fr; gap: 28px; }
  .li-post { order: -1; margin-left: 0; }
  .li-actions { gap: 16px; }
  .ct-step { margin-bottom: 6px; font-size: 11px; }
  .cv-solo { left: 0; width: 100%; }
  .case-vis[data-i="6"] .cv-approve, .case-vis[data-i="6"] .cv-done { left: 0; top: 50%; }
  .cv-live { left: 0; top: 70%; }
  .cv-bars { height: 72px; }
  .cv-two--lesson { top: 68%; }
  .round-grid { grid-template-columns: 1fr; align-content: start; gap: 8px; padding-top: calc(var(--bar-h) + 8px); }
  .round-right { order: -1; grid-auto-flow: column; justify-content: start; gap: 12px; }
  .round-lede, .round-left .eyebrow, .cycle, .now-work { display: none; }
  .now { grid-template-columns: 76px 1fr; text-align: left; align-items: center; column-gap: 12px; justify-items: start; }
  .now-stage { grid-row: span 2; width: 76px; }
  .now-label { font-size: 18px; margin: 0; }
  .now-task { font-size: 13px; }
  .chat { height: clamp(300px, 56vh, 470px); }
  .round-title { font-size: 22px; }
  .cast-side .eyebrow { display: none; }
  .cap { min-height: 150px; margin-top: 4px; }
  .cap-fig { width: 52px; }
  .cap-big { font-size: 20px; }
  .cap-small { font-size: 13.5px; margin-top: 6px; }
  .float-chips, .float-quote { display: none; }
  .cast-title { font-size: clamp(25px, 7vw, 32px); }
  .agents { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .agents li { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 6px 2px; row-gap: 4px; }
  .agents li > img, .agents .a-you { grid-row: auto; width: 34px; height: 34px; }
  .agents .a-name { font-size: 11px; }
  .agents .a-task { display: none; }
  .cast-head .who small { display: none; }
  .ex-card { flex-basis: min(82vw, 360px); }
  .ex-intro { flex-basis: min(78vw, 340px); }
  .ex-outro { flex-basis: min(70vw, 300px); }
  .slot-grid { grid-template-columns: 1fr; }
  .slot-title { font-size: clamp(44px, 13.5vw, 72px); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .cast-title { font-size: 22px; }
  .agents li > img, .agents .a-you { width: 28px; height: 28px; }
  .cast-foot { display: none; }
}

/* ------------------------------------------------ herziening 28: verhaal --- */
/* Het probleem in één regel boven "Van jouw kennis … naar hun feed." Verdwijnt zodra het inzoomen begint. */
.zicht-pain { position: absolute; z-index: 3; left: 50%; top: calc(50% - clamp(130px, 19vh, 190px)); width: min(40rem, calc(100vw - 2 * var(--gutter))); margin: 0; translate: -50% 0; text-align: center; color: var(--soft); font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.35; text-wrap: balance; opacity: clamp(0, calc(1 - var(--g, 0) * 3), 1); transform: translate3d(0, calc(var(--g, 0) * -60px), 0); text-shadow: 0 2px 24px rgba(6, 11, 19, 0.8); pointer-events: none; }
/* Bij minder beweging is er geen inzoomen; dan staat het probleem boven "Wij maken het zichtbaar.". */
.zicht-cap .zc-pain { display: none; color: var(--muted); font-size: clamp(15px, 1.15vw, 18px); font-weight: 600; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .zicht-pain { display: none; } .zicht-cap .zc-pain { display: block; } }

/* Dezelfde hoofdknop, herhaald op een beslismoment: na het voorbeeld en na de werkwijze. */
.again { display: grid; justify-items: center; gap: 16px; margin: clamp(44px, 7vh, 80px) auto 0; padding: 0 var(--gutter); text-align: center; }
.again p { margin: 0; color: var(--ink); font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; text-wrap: balance; }

/* Wat er na de knop gebeurt. */
.slot-next { margin-top: clamp(20px, 3vh, 30px); max-width: 30rem; }
.slot-next-t { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.slot-next ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.slot-next li { display: flex; align-items: center; gap: 12px; color: var(--soft); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.4; }
.slot-next li span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.45); color: var(--cyan); font-size: 12px; font-weight: 700; }

@media (max-width: 760px) {
  .zicht-pain { top: calc(var(--bar-h) + 7vh); font-size: 18px; }
  .again { margin-top: 40px; }
  .again p { font-size: 20px; }
}
.no-break { white-space: nowrap; }
/* Op de telefoon draait de onderste kaart vlak boven de slotzin; daar is geen ruimte voor de extra regel. */
@media (prefers-reduced-motion: reduce) and (max-width: 760px) { .zicht-cap .zc-pain { display: none; } }

/* ---------------------------------------- herziening 29: advies van de raad --- */
/* Onder de hoofdknop: wat je met die knop doet. */
.hero-hint { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 500; }

/* Stappenrij van Eva: elke figuur zegt op de muis zelf wat hij doet (de muistekst van het weggehaalde team). */
.rl-say { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 12px); translate: -50% 0; white-space: nowrap; padding: 8px 12px; border-radius: 14px; color: var(--ink); font-size: 13px; font-weight: 600; background: rgba(12, 22, 34, 0.96); border: 1px solid rgba(137, 208, 255, 0.45); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8), 0 0 22px -8px rgba(108, 209, 250, 0.5); opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); transform-origin: 50% 100%; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); pointer-events: none; }
.rl-say::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; rotate: 45deg; background: rgb(12, 22, 34); border-right: 1px solid rgba(137, 208, 255, 0.45); border-bottom: 1px solid rgba(137, 208, 255, 0.45); }
.case-rail li:first-child .rl-say { left: -4px; translate: 0 0; transform-origin: 0 100%; }
.case-rail li:first-child .rl-say::after { left: 21px; }
.case-rail li:last-child .rl-say { left: auto; right: -4px; translate: 0 0; transform-origin: 100% 100%; }
.case-rail li:last-child .rl-say::after { left: auto; right: 16px; }
.case-rail li.talk .rl-say { opacity: 1; transform: none; }
.case-rail li.talk .rl-ic { opacity: 1; filter: none; border-color: var(--cyan); }
@media (hover: hover) and (pointer: fine) { .case-rail li { cursor: default; } }
@media (hover: none) { .rl-say { display: none; } }

/* Voor en na: de notitie uit Eva's kennisbank, en dezelfde zinnen gemarkeerd in haar post. */
.kb-note { margin: clamp(22px, 3vh, 32px) 0 0; max-width: 30rem; padding: 16px 18px; border-radius: 20px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.kb-note figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.kb-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.4); }
.kb-note small { color: var(--muted); font-size: 12.5px; }
.kb-note blockquote { margin: 0; color: var(--soft); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; }
.kb-note mark, .li-body mark { color: var(--ink); background: linear-gradient(transparent 58%, rgba(108, 209, 250, 0.32) 58%); border-radius: 2px; padding: 0 1px; }

/* Samenwerken: met wie je praat. Initialen, geen foto's (die zijn er nog niet). */
.team-row { display: flex; align-items: center; gap: 14px; margin-top: 22px; max-width: 40rem; }
.team-row p { margin: 0; color: var(--soft); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; }
.team-row b { color: var(--ink); font-weight: 700; }
.team-av { display: flex; flex: none; gap: 6px; }
.team-av i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink); background: linear-gradient(170deg, #17263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.4); box-shadow: inset 0 1px 0 rgba(237, 243, 251, 0.14); }

/* Formulier: het inzicht is niet verplicht. */
.field .opt { margin-left: 6px; color: var(--dim); font-weight: 500; }

@media (max-width: 760px) {
  .kb-note { padding: 14px 15px; }
  .team-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .team-av i { width: 34px; height: 34px; font-size: 11.5px; }
}
/* De muistekst staat onder het figuurtje, op de plek van de naam, zodat hij nergens over tekst valt. */
.rl-say { top: 44px; bottom: auto; transform: translate3d(0, -6px, 0) scale(0.96); transform-origin: 50% 0; }
.rl-say::after { top: 0; bottom: auto; border: 0; border-left: 1px solid rgba(137, 208, 255, 0.45); border-top: 1px solid rgba(137, 208, 255, 0.45); }
.case-rail li:first-child .rl-say { transform-origin: 0 0; }
.case-rail li:last-child .rl-say { transform-origin: 100% 0; }
.case-rail:has(li.talk) .rl-name { opacity: 0; }

/* ---------------------------------------- herziening 30: probleem, machine, feed, naam --- */
/* Het probleem: links drie redenen, rechts een post die er niet komt. Je scroll speelt de redenen af. */
.pain { position: relative; isolation: isolate; z-index: 2; padding: clamp(110px, 17vh, 190px) 0 clamp(70px, 11vh, 130px); }
.pain-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.pain-list { list-style: none; margin: clamp(26px, 4vh, 40px) 0 0; padding: 0; max-width: 34rem; }
.pain-list li { position: relative; padding: 15px 0 15px 30px; border-top: 1px solid var(--hair); color: var(--muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; transition: color 0.4s var(--ease); }
.pain-list li:last-child { border-bottom: 1px solid var(--hair); }
.pain-list li::before { content: ""; position: absolute; left: 3px; top: 24px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.45); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.pain-list li b { color: var(--soft); font-weight: 700; transition: color 0.4s var(--ease); }
.pain-list li.on { color: var(--soft); }
.pain-list li.on b { color: var(--ink); }
.pain-list li.on::before { background: var(--cyan); box-shadow: 0 0 12px rgba(108, 209, 250, 0.8); }
.pain-end { margin: 24px 0 0; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.pain-vis { display: grid; justify-items: center; }
.cmp { width: min(100%, 30rem); padding: 20px 22px 18px; border-radius: 24px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.cmp-head { display: flex; align-items: center; gap: 12px; }
.cmp-head b { display: block; color: var(--ink); font-size: 15px; }
.cmp-head small { display: block; color: var(--muted); font-size: 12.5px; }
.cmp-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #0b1a2a; font-size: 13px; font-weight: 800; background: linear-gradient(160deg, #cfeaff, #8fcdea); }
.cmp-body { position: relative; min-height: 150px; margin: 16px 0; padding: 16px 18px; border-radius: 16px; background: rgba(5, 10, 17, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); }
.cmp-body > p { position: absolute; inset: 16px 18px; margin: 0; opacity: 0; transition: opacity 0.35s var(--ease); }
.cmp-body > p.on { opacity: 1; }
.cmp-type { color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.5; }
.cmp-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 2px; vertical-align: -0.2em; background: var(--cyan); animation: cmp-blink 1.05s steps(1) infinite; }
@keyframes cmp-blink { 50% { opacity: 0; } }
.cmp-ai { color: var(--muted); font-size: 16px; line-height: 1.55; }
.cmp-flag { display: table; margin-top: 12px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--soft); border: 1px dashed rgba(255, 255, 255, 0.25); }
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cmp-cal { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; color: var(--soft); font-size: 13px; font-weight: 600; border: 1px solid var(--hair-2); }
.cmp-when { position: relative; display: inline-grid; color: var(--cyan); }
.cmp-when i { grid-area: 1 / 1; font-style: normal; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.cmp-when i.on { opacity: 1; transform: none; }
.cmp-state { color: var(--muted); font-size: 12.5px; font-weight: 600; opacity: 0; transition: opacity 0.4s var(--ease); }
.cmp-state.on { opacity: 1; }

/* Zo werkt het: wat je erin stopt, Orbit, en wat je terugkrijgt. */
.hoe-stage { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(26px, 5vh, 56px); padding-top: var(--bar-h); background: transparent; }
.hoe-head { display: grid; justify-items: center; gap: 14px; padding: 0 var(--gutter); text-align: center; }
.hoe-head .h2 { font-size: clamp(32px, 3.8vw, 58px); }
.hoe-machine { position: relative; width: 100%; max-width: 84rem; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 0.75fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 90px); align-items: center; }
.hoe-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hoe-wires path { fill: none; stroke: rgba(108, 209, 250, 0.55); stroke-width: 1.4; stroke-dasharray: 1 1; stroke-dashoffset: var(--d, 1); filter: drop-shadow(0 0 4px rgba(108, 209, 250, 0.35)); }
.hoe-col { position: relative; z-index: 1; display: grid; gap: 12px; align-content: center; }
.hoe-in { justify-items: end; text-align: right; }
.hoe-out { justify-items: start; }
.hoe-core { justify-items: center; text-align: center; gap: 8px; }
.hoe-label { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.hoe-chips { display: grid; gap: 10px; justify-items: end; margin: 0; padding: 0; list-style: none; }
.hoe-chip { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); font-size: 15px; font-weight: 600; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(137, 208, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); opacity: var(--k, 0); transform: translate3d(calc((1 - var(--k, 0)) * -28px), 0, 0); }
.hoe-chip svg { width: 16px; height: 16px; color: var(--cyan); }
.hoe-cap { margin: 8px 0 0; max-width: 17rem; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hoe-orb { --glow: 0; position: relative; width: clamp(150px, 13vw, 210px); aspect-ratio: 1; }
.hoe-orb::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, calc(0.1 + var(--glow) * 0.22)), transparent 62%); }
.hoe-verbs { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.hoe-verbs li { color: var(--dim); font-size: 14.5px; font-weight: 600; transition: color 0.35s var(--ease); }
.hoe-verbs li.on { color: var(--ink); }
.hoe-post { position: relative; width: min(100%, 22rem); display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(170deg, rgba(22, 40, 62, 0.95), rgba(10, 18, 30, 0.95)); border: 1px solid rgba(137, 208, 255, 0.25); opacity: var(--k, 0); transform: translate3d(calc((1 - var(--k, 0)) * 28px), 0, 0); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.hoe-post i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.hoe-post i.s { width: 60%; }
.hp-who { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12.5px; }
.hp-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #0b1a2a; font-size: 9.5px; font-weight: 800; background: linear-gradient(160deg, #cfeaff, #8fcdea); }
.hp-tag { margin-left: auto; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--ink); background: rgba(137, 208, 255, 0.1); border: 1px solid rgba(137, 208, 255, 0.4); }
.hp-hook { color: var(--ink); font-size: 14.5px; line-height: 1.4; }
.hp-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.hp-ghost, .hp-go { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.hp-ghost { color: var(--soft); border: 1px solid var(--hair-2); }
.hp-go { position: relative; color: var(--cyan); border: 1px solid rgba(108, 209, 250, 0.6); transition: background-color 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.hp-go-b { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; opacity: 0; transition: opacity 0.3s var(--ease); }
.hp-go-a { transition: opacity 0.3s var(--ease); }
.hp-go-b svg { width: 13px; height: 13px; stroke-width: 2.4; }
.hoe-post.ok { border-color: rgba(108, 209, 250, 0.6); box-shadow: 0 0 30px -10px rgba(108, 209, 250, 0.6); }
.hoe-post.ok .hp-go { color: #06131f; background: var(--cyan); box-shadow: 0 0 18px rgba(108, 209, 250, 0.6); }
.hoe-post.ok .hp-go-a { opacity: 0; }
.hoe-post.ok .hp-go-b { opacity: 1; }
.hoe-post.ok .hp-tag { color: #06131f; background: var(--cyan); border-color: var(--cyan); }

/* Online: de post landt in een feed, tussen andere posts. Geen lijn of balletje meer. */
.feed { position: relative; display: grid; gap: 16px; margin-left: 4%; max-width: 34rem; padding: 24px 0; transform: translate3d(0, var(--fy, 0px), 0); -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); will-change: transform; }
.feed .li-post { margin-left: 0; max-width: none; }
.feed-ghost { display: grid; gap: 10px; padding: 18px 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); }
.fg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.fg-av { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.fg-name { width: 130px; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.1); }
.fg-l { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.fg-l.s { width: 58%; }
.li-new { position: absolute; z-index: 2; top: -13px; right: 20px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #06131f; background: var(--cyan); box-shadow: 0 0 18px rgba(108, 209, 250, 0.55); opacity: 0; transform: translate3d(0, 6px, 0) scale(0.92); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.online.landed .li-new { opacity: 1; transform: none; }
.li-src { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; border-radius: 16px; background: rgba(7, 13, 21, 0.55); border: 1px solid rgba(137, 208, 255, 0.2); color: var(--ink); font-size: 13.5px; font-weight: 700; }
.li-src-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(108, 209, 250, 0.08); }
.li-src-ic svg { width: 17px; height: 17px; color: var(--cyan); }
.li-src small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.case-vis .cv-drop { display: none; }

/* De naam als klikbare vraag: open hem en "Rizona" valt uiteen in rise en zone. */
.naam-mini { display: grid; justify-items: center; padding: 0 0 24px; text-align: center; }
.naam-mini .naam-word { margin: 0.6em 0 0.62em; font-size: clamp(54px, 6.2vw, 96px); }
.naam-mini .nw-rise, .naam-mini .nw-zone { transition: transform 1s var(--ease) 0.15s; }
.naam-q.play .nw-rise { transform: translate3d(-0.42em, -0.4em, 0); }
.naam-q.play .nw-zone { transform: translate3d(0.36em, 0.42em, 0); }
.naam-mini .nw-add { transition: opacity 0.6s var(--ease) 0.6s; }
.naam-q.play .nw-add { opacity: 1; }
.naam-mini .nw-a, .naam-mini .nw-e { transition: opacity 0.5s var(--ease) 0.7s; }
.naam-q.play .nw-a { opacity: 0; }
.naam-q.play .nw-e { opacity: 1; }
.naam-mini .nw-ring ellipse { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease) 0.5s; }
.naam-q.play .nw-ring ellipse { stroke-dashoffset: 0; }
.naam-mini .naam-cap { max-width: 32rem; margin: 0; text-align: center; transition: opacity 0.6s var(--ease) 1s, transform 0.6s var(--ease) 1s; }
.naam-mini .naam-trio { margin: 20px 0 0; }
.naam-mini .naam-trio li { font-size: 14.5px; padding: 10px 15px; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.naam-mini .naam-trio li:nth-child(1) { transition-delay: 1.2s; }
.naam-mini .naam-trio li:nth-child(2) { transition-delay: 1.32s; }
.naam-mini .naam-trio li:nth-child(3) { transition-delay: 1.44s; }
.naam-q.play .naam-cap, .naam-q.play .naam-trio li { opacity: 1; transform: none; }
.naam-mini .naam-who { margin: 18px 0 0; max-width: 32rem; color: var(--muted); font-size: 14.5px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cmp-caret { animation: none; }
  .naam-mini *, .naam-mini .nw-ring ellipse { transition: none !important; }
}

@media (max-width: 1100px) {
  .hoe-machine { grid-template-columns: minmax(0, 1fr) minmax(150px, 0.6fr) minmax(0, 1fr); gap: 24px; }
  .hoe-chip { height: 40px; padding: 0 13px; font-size: 14px; }
  .hoe-verbs li { font-size: 13.5px; }
}

@media (max-width: 760px) {
  .pain { padding-top: 90px; }
  .pain-grid { grid-template-columns: 1fr; gap: 28px; }
  .pain-list li { font-size: 15.5px; }
  .cmp-body { min-height: 138px; }
  .hoe-stage { justify-content: flex-start; gap: 16px; padding-top: calc(var(--bar-h) + 18px); }
  .hoe-head .h2 { font-size: clamp(28px, 8vw, 36px); }
  .hoe-machine { grid-template-columns: 1fr; gap: 14px; }
  .hoe-wires, .hoe-cap, .hoe-post[data-i="0"] { display: none; }
  .hoe-in, .hoe-out { justify-items: center; text-align: center; }
  .hoe-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .hoe-chip { height: 34px; padding: 0 12px; font-size: 13px; transform: translate3d(0, calc((1 - var(--k, 0)) * 14px), 0); }
  .hoe-chip svg { width: 14px; height: 14px; }
  .hoe-core { gap: 4px; }
  .hoe-core::before, .hoe-core::after { content: ""; width: 1px; height: 18px; background: linear-gradient(rgba(108, 209, 250, 0.1), rgba(108, 209, 250, 0.7)); }
  .hoe-core::after { order: 9; }
  .hoe-orb { width: 92px; }
  .hoe-verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .hoe-verbs li { font-size: 12.5px; }
  .hoe-label { margin-bottom: 2px; font-size: 11px; }
  .hoe-post { transform: translate3d(0, calc((1 - var(--k, 0)) * 14px), 0); }
  .feed { order: -1; margin-left: 0; }
  .naam-mini .naam-word { font-size: clamp(46px, 13vw, 60px); }
}
.hoe-post { text-align: left; }

/* ---------------------------------------- herziening 31: pijn, oplossing, post vliegt naar de feed --- */
/* Het probleem staat nu vast: het beeld blijft staan terwijl je de drie pijnpunten leest. */
.pain { padding: 0; }
.pain-stage { display: grid; align-items: center; padding-top: var(--bar-h); background: transparent; }
.pain-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.pain-copy .eyebrow { margin-bottom: 16px; }
.pain-list li { display: grid; gap: 3px; }
.pain-list li b { font-size: clamp(17px, 1.35vw, 21px); letter-spacing: -0.015em; }
.pain-list li span { display: block; }
.pain-vis { position: relative; display: grid; place-items: center; }
.ps-scene { grid-area: 1 / 1; width: min(100%, 30rem); opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.ps-scene.on { opacity: 1; transform: none; }
.ps-card { display: grid; gap: 12px; padding: 20px 22px; border-radius: 24px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.ps-head { display: flex; align-items: center; gap: 12px; }
.ps-head b { display: block; color: var(--ink); font-size: 15px; }
.ps-head small { display: block; color: var(--muted); font-size: 12.5px; }
.ps-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #0b1a2a; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; background: linear-gradient(160deg, #cfeaff, #8fcdea); }
.ps-l { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.09); }
.ps-l.s { width: 58%; }
.ps-sub { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ps-who { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ps-who li { display: flex; align-items: center; gap: 11px; padding: 6px 10px 6px 6px; border-radius: 14px; color: var(--soft); font-size: 14.5px; font-weight: 600; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ps-scene.on .ps-who li { opacity: 1; transform: none; }
.ps-scene.on .ps-who li:nth-child(2) { transition-delay: 0.12s; }
.ps-scene.on .ps-who li:nth-child(3) { transition-delay: 0.24s; }
.ps-scene.on .ps-who li:nth-child(4) { transition-delay: 0.42s; }
.ps-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.ps-who li.miss { color: var(--muted); border: 1px dashed rgba(255, 255, 255, 0.24); }
.ps-who li.miss .ps-dot { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); }
.ps-who li.miss small { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.ps-bars { display: flex; align-items: flex-end; gap: 12px; height: 180px; margin-top: 34px; padding: 0 4px; border-bottom: 1px solid var(--hair); }
.ps-bars span { position: relative; flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: rgba(255, 255, 255, 0.1); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.6s var(--ease); }
.ps-scene.on .ps-bars span { transform: none; }
.ps-scene.on .ps-bars span:nth-child(2) { transition-delay: 0.06s; } .ps-scene.on .ps-bars span:nth-child(3) { transition-delay: 0.12s; } .ps-scene.on .ps-bars span:nth-child(4) { transition-delay: 0.18s; } .ps-scene.on .ps-bars span:nth-child(5) { transition-delay: 0.24s; } .ps-scene.on .ps-bars span:nth-child(6) { transition-delay: 0.3s; }
.ps-bars span.hit { background: linear-gradient(180deg, var(--cyan), rgba(108, 209, 250, 0.35)); box-shadow: 0 0 22px -6px rgba(108, 209, 250, 0.6); }
.ps-bars em { position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0; white-space: nowrap; padding: 7px 12px; border-radius: 12px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--ink); background: rgba(12, 22, 34, 0.96); border: 1px solid rgba(137, 208, 255, 0.45); opacity: 0; transition: opacity 0.4s var(--ease) 0.6s; }
.ps-scene.on .ps-bars em { opacity: 1; }
.ps-note { margin: 0; color: var(--dim); font-size: 12px; }
.ps-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(108, 209, 250, 0.08); border: 1px solid rgba(108, 209, 250, 0.3); }
.ps-ic svg { width: 20px; height: 20px; color: var(--cyan); }
.ps-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 16px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.2); text-align: center; }
.ps-empty b { color: var(--ink); font-size: 17px; }
.ps-empty small { color: var(--muted); font-size: 13.5px; }
.ps-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ps-week span { height: 56px; padding: 7px 8px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, 0.16); color: var(--muted); font-size: 12px; font-weight: 600; }

/* De oplossing: een baan rond de echte orb. */
.loop { position: relative; }
.loop-stage { display: grid; align-items: center; padding-top: var(--bar-h); background: transparent; }
.loop-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); align-items: center; }
.loop-copy .eyebrow { margin-bottom: 16px; }
.loop-list { display: grid; gap: 8px; margin: clamp(20px, 3vh, 30px) 0 0; padding: 0; list-style: none; max-width: 34rem; }
.loop-list li { display: flex; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; border-radius: 18px; border: 1px solid transparent; color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; transition: color 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.loop-list li b { color: var(--soft); }
.loop-list li.on { color: var(--soft); background: rgba(108, 209, 250, 0.06); border-color: rgba(108, 209, 250, 0.3); }
.loop-list li.on b { color: var(--ink); }
.ll-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #0c131d; border: 1px solid var(--hair-2); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.ll-ic img { width: 33px; height: 33px; object-fit: contain; }
.loop-list li:not(.on) .ll-ic { opacity: 0.55; filter: grayscale(0.6); }
.loop-end { margin: 20px 0 0; max-width: 32rem; color: var(--ink); font-size: clamp(17px, 1.35vw, 20px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.loop-vis { position: relative; justify-self: center; width: min(100%, 540px, 62vh); aspect-ratio: 1; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lr-base { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.35; stroke-dasharray: 0.5 1.4; }
.lr-lit { fill: none; stroke: var(--cyan); stroke-width: 0.55; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--lit, 1); filter: drop-shadow(0 0 1.2px rgba(108, 209, 250, 0.9)); }
.loop-dot { position: absolute; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e9f8ff; box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.25), 0 0 18px 4px rgba(108, 209, 250, 0.75); }
.loop-orb { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 1; translate: -50% -50%; }
.loop-orb::before { content: ""; position: absolute; inset: -35%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, 0.14), transparent 62%); }
.loop-orb b { position: absolute; left: 50%; top: 100%; translate: -50% 0; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.loop-st { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; display: grid; justify-items: center; gap: 6px; opacity: 0.5; transition: opacity 0.4s var(--ease); }
.loop-st b { position: absolute; top: 100%; margin-top: 6px; white-space: nowrap; color: var(--soft); font-size: 13.5px; font-weight: 700; }
.ls-fig { display: grid; place-items: center; width: clamp(62px, 5.6vw, 84px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #15263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.25); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.ls-fig img { width: 76%; height: 76%; object-fit: contain; }
.loop-st.on { opacity: 1; }
.loop-st.now .ls-fig { transform: scale(1.1); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.14), 0 0 28px rgba(108, 209, 250, 0.5); }
.loop-in { position: absolute; z-index: 2; left: -2%; top: 1%; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border-radius: 16px; background: var(--glass-core); border: 1px solid rgba(137, 208, 255, 0.3); box-shadow: var(--glass-rim); opacity: var(--k, 0); transform: translate3d(0, calc((1 - var(--k, 0)) * 10px), 0); }
.loop-in > svg { width: 18px; height: 18px; flex: none; color: var(--cyan); }
.loop-in b { display: block; color: var(--ink); font-size: 13.5px; }
.loop-in small { display: block; color: var(--muted); font-size: 11.5px; }

/* De post vliegt vanuit stap 7 naar beneden en wordt de post op LinkedIn. */
.fly { position: fixed !important; left: 0; top: 0; z-index: 40; margin: 0 !important; max-width: none !important; transform-origin: 0 0; pointer-events: none; transition: none !important; display: none; will-change: transform, clip-path; }
.fly.on { display: grid; }

@media (max-width: 1100px) {
  .loop-list li { font-size: 14.5px; }
  .loop-in { display: none; }
}

@media (max-width: 760px) {
  .pain-stage { align-items: start; padding-top: calc(var(--bar-h) + 18px); }
  .pain-grid { gap: 18px; }
  .pain-copy .eyebrow { display: none; }
  .pain-copy .h2 { font-size: clamp(28px, 8.2vw, 36px); }
  .pain-list { margin-top: 14px; }
  .pain-list li { padding: 10px 0 10px 26px; font-size: 14.5px; }
  .pain-list li::before { top: 17px; }
  .pain-list li b { font-size: 16px; }
  .pain-list li:not(.on) span { display: none; }
  .pain-end { margin-top: 14px; font-size: 16px; }
  .ps-card { padding: 15px 16px; gap: 9px; }
  .ps-bars { height: 120px; margin-top: 30px; }
  .ps-week span { height: 40px; }
  .ps-empty { padding: 16px; }
  .ps-who li { font-size: 13.5px; }
  .loop-stage { align-items: start; padding-top: calc(var(--bar-h) + 18px); }
  .loop-grid { gap: 14px; }
  .loop-copy { display: contents; }
  .loop-copy .eyebrow, .loop-copy .lede, .loop-end { display: none; }
  .loop-copy .h2 { order: 1; font-size: clamp(28px, 8.2vw, 36px); }
  .loop-vis { order: 2; width: min(76vw, 300px); margin: 6px auto 10px; }
  .loop-list { order: 3; margin-top: 0; gap: 4px; }
  .loop-list li { padding: 6px 10px 6px 6px; font-size: 13.5px; }
  .ll-ic { width: 34px; height: 34px; } .ll-ic img { width: 27px; height: 27px; }
  .ls-fig { width: 54px; }
  .loop-st b { font-size: 12px; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-scene, .ps-who li, .ps-bars span, .ps-bars em, .loop-list li, .loop-st, .ls-fig { transition: none !important; }
}
.feed { transform: none; }
/* Namen op de baan: een donkere achtergrond, zodat de lijn er niet door loopt. Intake los van Research. */
.loop-st b { padding: 2px 9px; border-radius: 8px; background: var(--sc-canvas); }
.loop-in { left: -9%; top: 0; }
.fly { background: linear-gradient(172deg, #16222f, #070d15); }
@media (max-width: 760px) {
  .pain-grid, .loop-grid { grid-template-columns: 1fr; }
}
.loop-st { width: max-content; }
.loop-st b { left: 50%; translate: -50% 0; }

/* ---------------------------------------- herziening 32: de ronde, en een kortere landing --- */
/* De oplossing: data erin, Orbit beslist met de Raad van Vier, post eruit, en de cijfers weer terug. De ronde draait zelf. */
.cyc { position: relative; padding: clamp(110px, 16vh, 180px) 0 clamp(80px, 12vh, 140px); }
.cyc-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.cyc-stage { position: relative; width: 100%; max-width: 74rem; margin: clamp(40px, 7vh, 72px) auto 0; padding: 0 var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: center; }
.cyc-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cyc-wires path { fill: none; stroke: rgba(108, 209, 250, 0.3); stroke-width: 1.3; stroke-dasharray: 3 6; stroke-linecap: round; }
.cyc-wires circle { fill: #e9f8ff; filter: drop-shadow(0 0 6px rgba(108, 209, 250, 0.95)); opacity: 0; }
.cyc-col { position: relative; z-index: 1; display: grid; justify-items: center; gap: 18px; }
.cyc-label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.4s var(--ease); }
.cyc-col.on .cyc-label { color: var(--cyan); }
.cyc-ag { display: grid; justify-items: center; gap: 8px; }
.cyc-fig { display: grid; place-items: center; width: clamp(76px, 6.6vw, 100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #15263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.25); transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.cyc-fig img { width: 78%; height: 78%; object-fit: contain; }
.cyc-ag b { color: var(--soft); font-size: 14px; font-weight: 700; }
.cyc-ag.on .cyc-fig { transform: translate3d(0, -6px, 0) scale(1.06); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.14), 0 0 26px rgba(108, 209, 250, 0.5); }
.cyc-ag.on b { color: var(--ink); }
.cyc-orb { --glow: 0; position: relative; width: clamp(170px, 15vw, 230px); aspect-ratio: 1; }
.cyc-orb::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, calc(0.1 + var(--glow) * 0.25)), transparent 62%); }
.cyc-raad { display: grid; justify-items: center; gap: 8px; }
.cyc-beads { display: flex; gap: 6px; }
.cyc-beads img { width: 34px; height: 34px; border-radius: 50%; opacity: 0.45; filter: grayscale(0.5); transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.cyc-beads img.on { opacity: 1; filter: none; transform: translate3d(0, -3px, 0); box-shadow: 0 0 14px rgba(108, 209, 250, 0.6); }
.cyc-raad b { color: var(--muted); font-size: 13px; font-weight: 600; }
.cyc-ok { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 10px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 700; border: 1px solid rgba(108, 209, 250, 0.45); transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.cyc-ok-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.55); }
.cyc-ok-ic svg { width: 12px; height: 12px; stroke-width: 2.4; }
.cyc-ok.on { color: #06131f; background: var(--cyan); box-shadow: 0 0 22px rgba(108, 209, 250, 0.55); }
.cyc-ok.on .cyc-ok-ic { border-color: rgba(6, 19, 31, 0.6); }
.cyc-back { position: absolute; left: 50%; bottom: 0; translate: -50% 0; margin: 0; white-space: nowrap; color: var(--muted); font-size: 14px; font-weight: 600; transition: color 0.4s var(--ease); }
.cyc-back.on { color: var(--ink); }

/* Online: dichter op het voorbeeld, en een zachte gloed in plaats van vol zwart. */
.online { padding-top: clamp(24px, 4vh, 48px); isolation: isolate; }
.online::before { content: ""; position: absolute; z-index: -1; left: 30%; right: 0; top: -20vh; height: calc(100% + 20vh); pointer-events: none; background: radial-gradient(ellipse 55% 45% at 55% 42%, rgba(46, 104, 160, 0.2), transparent 70%); }
.feed .feed-ghost:first-child { padding-top: 6px; }
.feed .feed-ghost:first-child .fg-head { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cyc-fig, .cyc-beads img, .cyc-ok, .cyc-label, .cyc-back { transition: none !important; }
}
@media (max-width: 760px) {
  .cyc { padding-top: 90px; }
  .cyc-stage { grid-template-columns: 1fr; gap: 10px; padding-bottom: 0; margin-top: 30px; }
  .cyc-wires { display: none; }
  .cyc-col { gap: 10px; }
  .cyc-in, .cyc-out { grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 28px; }
  .cyc-in .cyc-label, .cyc-out .cyc-label, .cyc-out .cyc-ok { grid-column: 1 / -1; justify-self: center; }
  .cyc-fig { width: 66px; }
  .cyc-orb { width: 120px; }
  .cyc-col::after { content: ""; justify-self: center; width: 1px; height: 22px; background: linear-gradient(rgba(108, 209, 250, 0.1), rgba(108, 209, 250, 0.7)); grid-column: 1 / -1; }
  .cyc-out::after { display: none; }
  .cyc-back { position: relative; left: auto; bottom: auto; translate: none; margin-top: 14px; text-align: center; white-space: normal; }
  .cyc-back::before { content: "↺ "; color: var(--cyan); }
}
/* Eva: wat jij doet, in één regel onder de kop. */
.cases-sub { margin: 10px 0 0; max-width: 30rem; color: var(--soft); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.45; }
/* Slot: met wie je mailt. */
.slot-av { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.slot-av b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 9.5px; font-weight: 800; color: var(--ink); background: linear-gradient(170deg, #17263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.4); }
.slot-next li em { flex: 1; font-style: normal; }
.slot-av b { font-style: normal; }
/* De ronde: jouw intake bovenaan links, als tegenhanger van "Jij zegt ja" rechts. */
.cyc-intake { height: 36px; font-size: 13.5px; }
.cyc-intake .cyc-ok-ic svg { width: 12px; height: 12px; stroke-width: 1.8; }
@media (max-width: 760px) {
  .cases-sub { font-size: 14px; margin-top: 6px; }
  .cyc-in .cyc-intake { grid-column: 1 / -1; justify-self: center; }
}
/* Tijdens de vlucht een zachte gloed rond de post, zodat het zwart ertussen leeft. */
.fly.on { border-color: rgba(108, 209, 250, 0.45) !important; box-shadow: var(--glass-rim), 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 60px -10px rgba(108, 209, 250, 0.35) !important; }

/* ---------------------------------------- herziening 33: kaartjes die een klant blij maken --- */
/* Rond het LinkedIn-logo draaien nu de momenten waar het om draait: een ingeplande kennismaking, een post waar
   de reacties op binnenstromen, een beslisser die je profiel bekijkt en een bericht met de vraag om te bellen.
   Gelabeld als voorbeeld; geen aantallen. */
.zf-cal, .zf-note-card { width: clamp(236px, 17.5vw, 270px); grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.zf-note-card { grid-template-columns: auto 1fr; }
.zf-date { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 12px; overflow: hidden; background: rgba(237, 243, 251, 0.95); color: #0b1a2a; line-height: 1; }
.zf-date small { align-self: stretch; display: grid; place-items: center; padding: 3px 0; background: #ff6b6b; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.zf-date b { padding-bottom: 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.zf-cal-t { display: grid; gap: 2px; min-width: 0; }
.zf-cal-t b { color: var(--ink); font-size: 13px; line-height: 1.3; }
.zf-cal-t small { color: var(--muted); font-size: 11px; }
.zf-yes { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--good); box-shadow: 0 0 16px rgba(111, 224, 166, 0.6); animation: zf-yes 2.6s var(--ease) infinite; }
.zf-yes svg { width: 14px; height: 14px; fill: none; stroke: #062014; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes zf-yes { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } }
.zf-react { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.zf-react b { color: var(--ink); font-size: 11.5px; font-weight: 700; }
.zf-rx { display: flex; }
.zf-rx i, .zf-pop i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #0e1a28; }
.zf-rx i + i { margin-left: -5px; }
.zf-rx svg, .zf-pop svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rx-like { background: #378fe9; }
.rx-clap { background: #6dae4f; }
.rx-love { background: #df704d; }
.rx-love svg { fill: #fff; stroke: none; }
/* Reacties die uit de post omhoog poppen. */
.zf-pop { position: absolute; right: 22px; bottom: 34px; width: 60px; height: 10px; pointer-events: none; }
.zf-pop i { position: absolute; bottom: 0; width: 24px; height: 24px; border: 0; opacity: 0; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.7); animation: zf-pop 3s ease-out infinite; }
.zf-pop svg { width: 13px; height: 13px; }
.zf-pop i:nth-child(1) { left: 0; animation-delay: 0s; }
.zf-pop i:nth-child(2) { left: 18px; animation-delay: 0.6s; }
.zf-pop i:nth-child(3) { left: 36px; animation-delay: 1.2s; }
.zf-pop i:nth-child(4) { left: 10px; animation-delay: 1.8s; }
.zf-pop i:nth-child(5) { left: 30px; animation-delay: 2.4s; }
@keyframes zf-pop { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); } 15% { opacity: 1; transform: translate3d(0, -12px, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(6px, -70px, 0) scale(0.85); } }
.zf-bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(108, 209, 250, 0.1); border: 1px solid rgba(108, 209, 250, 0.4); animation: zf-ring 3.2s ease-in-out infinite; }
.zf-bell svg { width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zf-bell i { position: absolute; top: 4px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 2px #0e1a28; }
@keyframes zf-ring { 0%, 78%, 100% { rotate: 0deg; } 82% { rotate: 14deg; } 86% { rotate: -12deg; } 90% { rotate: 8deg; } 94% { rotate: -4deg; } }
.zf-dm { width: clamp(236px, 18vw, 276px); }
.zf-dm-h { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; }
.zf-dm-h svg { width: 15px; height: 15px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linejoin: round; }
.zf-dm-h i { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #378fe9; box-shadow: 0 0 10px rgba(55, 143, 233, 0.9); }
.zf-dm .zf-who { align-items: start; }
.zf-dm .zf-bubble { color: var(--ink); font-size: 12.5px; font-weight: 600; }
/* Het label: alleen zichtbaar als de kaartjes er zijn. */
.zf-note { position: absolute; z-index: 4; right: max(var(--gutter), calc((100vw - 84rem) / 2 + var(--gutter))); top: calc(var(--bar-h) + 22px); margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; opacity: clamp(0, calc((var(--g, 0) - 0.55) * 3), 1); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .zf-pop, .zf-yes, .zf-bell { animation: none !important; } .zf-pop { display: none; } }
@media (max-width: 760px) {
  .zf-cal, .zf-dm { width: 196px; }
  .zf-cal { gap: 9px; }
  .zf-date { width: 38px; height: 42px; } .zf-date b { font-size: 17px; }
  .zf-cal-t b { font-size: 12px; } .zf-cal-t small { font-size: 10px; }
  .zf-yes { display: none; }
  .zf-react b { font-size: 10.5px; }
  .zf-dm .zf-bubble { font-size: 11.5px; }
  .zf-note { left: 0; right: 0; top: calc(var(--bar-h) + 12px); text-align: center; font-size: 11px; }
}
/* De reacties poppen langs de rechterrand van de post omhoog, niet over de tekst. Kaartjes iets groter en helderder. */
.zf-pop { right: -16px; bottom: 26px; width: 34px; }
.zf-pop i:nth-child(1) { left: 0; } .zf-pop i:nth-child(2) { left: 8px; } .zf-pop i:nth-child(3) { left: 2px; } .zf-pop i:nth-child(4) { left: 10px; } .zf-pop i:nth-child(5) { left: 4px; }
@keyframes zf-pop { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); } 15% { opacity: 1; transform: translate3d(4px, -14px, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate3d(14px, -96px, 0) scale(0.85); } }
@media (min-width: 761px) {
  .zf-cal, .zf-note-card { width: clamp(256px, 19vw, 300px); }
  .zf-dm { width: clamp(256px, 19vw, 300px); }
  .zf-post { width: clamp(272px, 21vw, 322px); }
  .zf-cal-t b { font-size: 14px; } .zf-cal-t small { font-size: 11.5px; }
  .zf-hook { font-size: 14px; }
  .zf-dm .zf-bubble { font-size: 13.5px; }
  .zf-react b { font-size: 12.5px; }
}
.zf-float { background: linear-gradient(170deg, rgba(26, 46, 70, 0.96), rgba(11, 20, 33, 0.96)); }
@media (max-width: 760px) { .zf-pop { right: -10px; } }

/* ---------------------------------------- herziening 34: elke stap laat het echte werk zien --- */
/* Eva als echte klant: initialen zoals op LinkedIn, geen figuur uit ons systeem. */
.eva-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #3a2414; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; background: linear-gradient(160deg, #f6dcc0, #dcae86); box-shadow: inset 0 -2px 6px rgba(120, 70, 30, 0.25); }
.eva-av--lg { width: 46px; height: 46px; font-size: 15px; }
.eva-av--li { width: 44px; height: 44px; font-size: 14px; }
.case-co { position: relative; }
.case-co .co-label { margin-left: 6px; align-self: center; padding: 3px 9px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px dashed rgba(255, 255, 255, 0.25); white-space: nowrap; }
.rl-ic--eva .eva-av { width: 26px; height: 26px; font-size: 9.5px; }
.cases-right { height: clamp(430px, 70vh, 650px); }

/* Een stapbeeld: van boven naar beneden, alles in beeld. */
.case-vis.sv { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 2%; }
.case-vis.sv > * { position: relative; flex: none; }
.sv-agent { display: flex; align-items: center; gap: 12px; height: 56px; color: var(--ink); }
.sv-agent > img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5)); }
.case-vis.on .sv-agent > img { animation: work-bob 2.4s ease-in-out infinite alternate; }
.sv-agent > span:last-child { display: grid; gap: 1px; }
.sv-agent b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.sv-agent small { color: var(--muted); font-size: 13px; }
.sv-agent .cv-orb { width: 92px; height: 92px; margin: -18px -10px -18px -16px; }
.sv-agent--raad .cv-beads img { width: 36px; height: 36px; }
.sv-card { display: grid; gap: 10px; padding: 16px 18px; border-radius: 20px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.sv-card .cv-tag svg { width: 13px; height: 13px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.4; }
/* 1 · intake als formulier */
.sv-form { display: grid; gap: 8px; margin: 0; }
.sv-form div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: rgba(5, 10, 17, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); }
.sv-form dt { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sv-form dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.sv-orders { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-orders > small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sv-order { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; border-radius: 16px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(137, 208, 255, 0.28); }
.sv-order img { flex: none; width: 38px; height: 38px; object-fit: contain; }
.sv-order > span { display: grid; gap: 1px; min-width: 0; }
.sv-order b { color: var(--ink); font-size: 14px; }
.sv-order small { color: var(--soft); font-size: 12.5px; line-height: 1.3; }
/* 2 · research: zoeken, bronnen, echte posts, een kans */
.sv-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(5, 10, 17, 0.7); border: 1px solid rgba(108, 209, 250, 0.4); color: var(--ink); font-size: 14px; font-weight: 600; }
.sv-search svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.sv-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-sources span { height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--cyan); background: rgba(108, 209, 250, 0.08); border: 1px solid rgba(108, 209, 250, 0.35); }
.sv-li { display: grid; gap: 8px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(170deg, #182637, #0d1622); border: 1px solid rgba(255, 255, 255, 0.1); }
.sv-li header { display: flex; align-items: center; gap: 10px; }
.sv-li header > span:nth-child(2) { display: grid; }
.sv-li header b { color: var(--ink); font-size: 13.5px; }
.sv-li header small { color: var(--muted); font-size: 11.5px; }
.sv-li p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; }
.sv-li footer { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--soft); font-size: 12px; font-weight: 600; }
.sv-li--comp { opacity: 0.85; }
.sv-li--comp p { color: var(--soft); }
.sv-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #0b1a2a; }
.sv-av--a { background: linear-gradient(160deg, #cfe0ea, #9fb7c6); }
.sv-av--c { background: linear-gradient(160deg, #d8d2ea, #a9a0c8); }
.sv-src { margin-left: auto; align-self: flex-start; font-style: normal; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--soft); border: 1px solid rgba(255, 255, 255, 0.18); }
.sv-find { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: rgba(111, 224, 166, 0.06); border: 1px solid rgba(111, 224, 166, 0.4); }
.sv-find b { color: var(--ink); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; }
.sv-find small { color: var(--soft); font-size: 12.5px; }
.sv-find .cv-tag svg { width: 12px; height: 12px; margin-right: 5px; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* 3 · resultaten: haar posts als rijen */
.sv-stats ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.sv-stats li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 38%; gap: 12px; align-items: center; color: var(--soft); font-size: 13.5px; }
.sv-stats li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-stats li i { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); position: relative; overflow: hidden; }
.sv-stats li i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 5px; background: rgba(143, 205, 234, 0.45); transform-origin: 0 50%; transform: scaleX(var(--k, 1)); }
.sv-stats li.hit { color: var(--ink); font-weight: 700; }
.sv-stats li.hit i::after { background: linear-gradient(90deg, rgba(108, 209, 250, 0.6), var(--cyan)); box-shadow: 0 0 14px rgba(108, 209, 250, 0.6); }
.sv-stats li em { position: absolute; right: 0; top: -18px; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--cyan); }
.sv-stats > small { color: var(--dim); font-size: 11.5px; }
/* 4 · de raad: vier oordelen, dan kiest Orbit */
.sv-plan b { color: var(--ink); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; }
.sv-votes { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sv-votes li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--soft); font-size: 13.5px; line-height: 1.35; }
.sv-votes img { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.sv-votes b { display: block; color: var(--ink); font-size: 12.5px; }
.sv-decide { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(111, 224, 166, 0.07); border: 1px solid rgba(111, 224, 166, 0.45); }
.sv-decide b { color: var(--ink); font-size: 15px; }
.sv-ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--good); }
.sv-ok svg { width: 13px; height: 13px; fill: none; stroke: #062014; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 5 · ideeën: het idee met waarom */
.sv-idea { border-color: rgba(239, 211, 167, 0.4); }
.sv-idea > b { color: var(--ink); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; letter-spacing: -0.02em; }
.sv-why { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chips span { height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); }
.sv-alts { display: grid; gap: 6px; padding: 0 4px; }
.sv-alts small { color: var(--dim); font-size: 12px; font-weight: 600; }
.sv-alts span { color: var(--muted); font-size: 13.5px; }
.sv-alts span::before { content: "· "; }
/* 6 · schrijven: het concept groeit regel voor regel */
.sv-who { display: flex; align-items: center; gap: 10px; }
.sv-who > span:nth-child(2) { display: grid; }
.sv-who b { color: var(--ink); font-size: 14px; }
.sv-who small { color: var(--muted); font-size: 12px; }
.sv-who > em { margin-left: auto; font-style: normal; }
.sv-draft p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
.sv-draft p:first-of-type { color: var(--ink); font-weight: 600; }
.sv-check { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--soft); font-size: 13px; }
.sv-check > svg { width: 16px; height: 16px; fill: none; stroke: var(--good); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-check b { color: var(--ink); }
/* 7 · Eva keurt goed: cursor, knop, en pas dan mag hij live */
.sv--ok { --ok: clamp(0, calc((var(--lp, 0) - 0.4) * 14), 1); --mv: clamp(0, calc((var(--lp, 0) - 0.12) / 0.26), 1); }
.sv-approve { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); border-color: rgba(255, 255, 255, calc(0.12 * (1 - var(--ok)))); box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 0 calc(var(--ok) * 1px) rgba(111, 224, 166, 0.7), 0 0 calc(var(--ok) * 40px) rgba(111, 224, 166, 0.28); }
.sv-approve p { margin: 0; color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.sv-approve p:first-of-type { color: var(--ink); font-weight: 600; }
.sv-state { position: relative; display: inline-grid; }
.sv-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sv-state-a { color: var(--amber); border: 1px solid rgba(255, 208, 120, 0.5); opacity: calc(1 - var(--ok)); }
.sv-state-b { color: #062014; background: var(--good); opacity: var(--ok); }
.sv-state-b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sv-btns { position: relative; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.sv-ghost, .sv-go { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.sv-ghost { color: var(--soft); border: 1px solid var(--hair-2); }
.sv-go { position: relative; overflow: hidden; color: var(--amber-ink); background: linear-gradient(180deg, #ffe4a6, #f7c35c 70%, #efb64a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 24px -12px rgba(246, 190, 80, 0.7); transform: scale(calc(1 - var(--ok) * (1 - var(--ok)) * 0.4)); }
.sv-go-a { opacity: calc(1 - var(--ok)); }
.sv-go-b { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #062014; background: var(--good); opacity: var(--ok); }
.sv-go-b svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sv-cursor { position: absolute; right: 30px; bottom: 6px; width: 24px; height: 24px; fill: #fff; stroke: #0b1a2a; stroke-width: 1.2; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); transform: translate3d(calc((1 - var(--mv)) * 120px), calc((1 - var(--mv)) * 80px), 0) scale(calc(1 - var(--ok) * (1 - var(--ok)) * 0.6)); opacity: calc(clamp(0, (var(--lp, 0) - 0.1) * 10, 1) * (1 - clamp(0, (var(--lp, 0) - 0.55) * 8, 1))); }
.sv-after { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sv-after li { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 10px; justify-self: start; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 700; background: rgba(7, 13, 21, 0.7); border: 1px solid rgba(111, 224, 166, 0.45); }
.sv-after .sv-li-go { border-color: rgba(10, 102, 194, 0.8); box-shadow: 0 0 24px -6px rgba(10, 102, 194, 0.8); }
.sv-li-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #0a66c2; }
.sv-li-logo svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
.case-vis.sv [style*="--a"] { transform: translate3d(0, calc((1 - var(--k)) * 14px), 0); }
@media (prefers-reduced-motion: reduce) { .case-vis.on .sv-agent > img { animation: none; } }

/* Minder zwart tussen het voorbeeld en de post op LinkedIn. */
.online { padding-top: 0; }
@media (min-width: 761px) { .online { margin-top: -10vh; } }

/* Vragen onderaan: de aarde loopt zacht uit in het zwart. */
.slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--sc-canvas)); }
.slot .pin-card { z-index: 3; }
.vragen { padding-top: clamp(60px, 8vw, 110px); }

@media (max-width: 1100px) {
  .sv-form div { grid-template-columns: 8rem 1fr; }
  .sv-stats li { font-size: 12.5px; }
}
@media (max-width: 760px) {
  .cases-right { height: clamp(380px, 58vh, 470px); }
  .case-vis.sv { gap: 8px; padding: 0; justify-content: flex-start; }
  .case-co .co-label { display: none; }
  .sv-agent { height: 42px; gap: 10px; }
  .sv-agent > img { width: 42px; height: 42px; }
  .sv-agent b { font-size: 14px; } .sv-agent small { font-size: 12px; }
  .sv-agent .cv-orb { width: 70px; height: 70px; margin: -14px -8px -14px -12px; }
  .sv-agent--raad .cv-beads img { width: 26px; height: 26px; }
  .sv-card { padding: 12px 13px; gap: 7px; border-radius: 16px; }
  .sv-form { gap: 5px; }
  .sv-form div { grid-template-columns: 1fr; gap: 1px; padding: 6px 10px; }
  .sv-form dt { font-size: 11px; } .sv-form dd { font-size: 13px; }
  .sv-orders { grid-template-columns: 1fr; gap: 6px; }
  .sv-order { padding: 5px 10px 5px 5px; } .sv-order img { width: 30px; height: 30px; }
  .sv-order b { font-size: 12.5px; } .sv-order small { font-size: 11.5px; }
  .sv-search { height: 38px; font-size: 12.5px; padding: 0 12px; }
  .sv-sources, .sv-li--comp, .sv-alts { display: none; }
  .sv-li { padding: 10px 12px; gap: 6px; } .sv-li p { font-size: 13px; }
  .sv-find { padding: 10px 12px; } .sv-find small { display: none; }
  .sv-stats li { grid-template-columns: minmax(0, 1fr) 34%; font-size: 12px; }
  .sv-votes { gap: 5px; } .sv-votes li { padding: 5px 10px 5px 5px; font-size: 12px; gap: 9px; } .sv-votes img { width: 26px; height: 26px; } .sv-votes b { font-size: 11.5px; }
  .sv-decide { padding: 9px 12px; } .sv-decide b { font-size: 13.5px; }
  .sv-idea > b { font-size: 18px; } .sv-chips span { height: 24px; font-size: 11.5px; }
  .sv-draft p, .sv-approve p { font-size: 13px; }
  .sv-approve p:nth-of-type(2) { display: none; }
  .sv-after { gap: 5px; } .sv-after li { height: 34px; font-size: 13px; }
  .sv-ghost, .sv-go { height: 36px; padding: 0 14px; font-size: 13px; }
}
.sv-approve.cv-post--mini { top: auto; left: auto; width: auto; }
@media (max-width: 760px) {
  .sv-form div { grid-template-columns: 6.8rem 1fr; gap: 8px; padding: 5px 10px; align-items: center; }
  .sv-form dt { font-size: 10.5px; } .sv-form dd { font-size: 12.5px; }
  .sv-orders > small { display: none; }
  .sv-orders { grid-template-columns: 1fr 1fr; }
  .sv-order small { display: none; }
  .sv-votes li { padding: 4px 10px 4px 5px; }
  .sv-plan b { font-size: 14px; }
}

/* ---------------------------------------- herziening 35: elke stap in dezelfde lijn --- */
/* Elke stap: bovenaan de agent, in het midden wat hij doet, onderaan wat eruit komt. In één oogopslag. */
.case-vis.sv { gap: 14px; }
.sv-find { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 13px 16px; }
.sv-find b { font-size: clamp(15px, 1.2vw, 17px); }
.sv-who-ic { display: flex; gap: 4px; margin-left: auto; }
.sv-who-ic img { width: 30px; height: 30px; object-fit: contain; }
/* 2 · research: zoeken, en wat hij vindt op YouTube en LinkedIn */
.sv-research { display: grid; gap: 12px; }
.sv-search { height: 42px; font-size: 14px; }
.sv-hits { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; align-items: start; }
.sv-yt { display: grid; gap: 7px; padding: 10px; border-radius: 16px; background: linear-gradient(170deg, #182637, #0d1622); border: 1px solid rgba(255, 255, 255, 0.1); }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 78% 35%, #3d6fa0 0, transparent 46%), linear-gradient(135deg, #20324a, #0b1522 70%); }
.yt-person { position: absolute; right: 6%; bottom: 0; width: 34%; height: 82%; }
.yt-person::before { content: ""; position: absolute; left: 50%; top: 4%; width: 44%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: linear-gradient(160deg, #e7c4a2, #b88a66); }
.yt-person i { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; border-radius: 48% 48% 0 0; background: linear-gradient(170deg, #2c4562, #172638); }
.yt-big { position: absolute; left: 7%; top: 14%; width: 58%; color: #fff; font-size: clamp(14px, 1.25vw, 19px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.yt-big em { display: inline-block; margin-top: 3px; padding: 1px 5px; font-style: normal; color: #1d1405; background: var(--amber); }
.yt-play { position: absolute; left: 50%; top: 52%; width: 38px; height: 27px; translate: -50% -50%; border-radius: 8px; background: #ff0033; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6); }
.yt-play::after { content: ""; position: absolute; left: 15px; top: 8px; border-left: 11px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.yt-time { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 10.5px; font-weight: 700; }
.yt-title { color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.yt-ch { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
.yt-logo { width: 14px; height: 10px; border-radius: 3px; background: #ff0033; position: relative; }
.yt-logo::after { content: ""; position: absolute; left: 5px; top: 2.5px; border-left: 5px solid #fff; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
.sv-lipost { display: grid; gap: 8px; padding: 12px 13px; border-radius: 16px; background: linear-gradient(170deg, #182637, #0d1622); border: 1px solid rgba(255, 255, 255, 0.1); }
.sv-lipost header { display: flex; align-items: center; gap: 9px; }
.sv-lipost header > span:nth-child(2) { display: grid; }
.sv-lipost header b { color: var(--ink); font-size: 13px; }
.sv-lipost header small { color: var(--muted); font-size: 11px; }
.sv-li-mini { margin-left: auto; align-self: flex-start; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: #0a66c2; }
.sv-li-mini svg { width: 16px; height: 16px; fill: #fff; }
.sv-lipost p { margin: 0; color: var(--ink); font-size: 13.5px; line-height: 1.45; }
.sv-lipost footer { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--soft); font-size: 11.5px; font-weight: 600; }
/* 4 · de raad: vier korte oordelen */
.sv-council { display: grid; gap: 12px; }
.sv-plan { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); }
.sv-plan b { color: var(--ink); font-size: clamp(15px, 1.2vw, 17px); }
.sv-vote4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-vote4 li { display: flex; align-items: center; gap: 11px; padding: 11px 13px 11px 10px; border-radius: 16px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.09); }
.sv-vote4 img { flex: none; width: 38px; height: 38px; border-radius: 50%; }
.sv-vote4 span { display: grid; gap: 1px; min-width: 0; }
.sv-vote4 small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.sv-vote4 b { color: var(--ink); font-size: 15px; }
.sv-vote4 i { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--good); }
.sv-vote4 i svg { width: 12px; height: 12px; fill: none; stroke: #062014; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* 3, 5, 6 · iets rustiger zodat alles in één lijn staat */
.sv-stats li { opacity: 1; }
.sv-idea > b { font-size: clamp(18px, 1.55vw, 23px); }
.sv-chips span { font-size: 12.5px; }

@media (max-width: 1100px) {
  .yt-big { font-size: 13px; }
  .sv-vote4 b { font-size: 13.5px; }
}
@media (max-width: 760px) {
  .case-vis.sv { gap: 10px; }
  .sv-search { display: none; }
  .sv-hits { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sv-yt { padding: 7px; gap: 5px; }
  .yt-big { font-size: 11px; } .yt-play { width: 28px; height: 20px; } .yt-play::after { left: 11px; top: 5px; border-left-width: 8px; border-top-width: 5px; border-bottom-width: 5px; }
  .yt-title { font-size: 11.5px; } .yt-ch { display: none; }
  .sv-lipost { padding: 9px 10px; gap: 6px; } .sv-lipost p { font-size: 11.5px; } .sv-lipost header small { display: none; } .sv-lipost footer span:last-child { display: none; }
  .sv-plan { padding: 9px 12px; } .sv-plan b { font-size: 13.5px; }
  .sv-vote4 { gap: 6px; } .sv-vote4 li { padding: 7px 8px 7px 7px; gap: 7px; } .sv-vote4 img { width: 28px; height: 28px; } .sv-vote4 b { font-size: 12.5px; } .sv-vote4 small { font-size: 10px; } .sv-vote4 i { width: 18px; height: 18px; }
  .sv-find { padding: 9px 12px; } .sv-find b { font-size: 13.5px; } .sv-who-ic { display: none; }
  .sv-chips span { height: 24px; font-size: 11px; }
  .sv-draft p:nth-of-type(3) { display: none; }
}

/* ---------------------------------------- herziening 36: simpel genoeg voor een vijftienjarige --- */
/* Research: vier bronnen worden nagelopen, dan vult de kennisbank zich. */
.sv-learn { display: grid; gap: 12px; }
.sv-src4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-src4 li { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 8px 10px; border-radius: 16px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.09); }
.s4-vis { position: relative; display: grid; align-content: center; justify-items: start; gap: 5px; width: 100%; height: 58px; padding: 8px 9px; border-radius: 10px; overflow: hidden; background: linear-gradient(170deg, #182637, #0d1622); border: 1px solid rgba(255, 255, 255, 0.08); }
.s4-vis b { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.s4-vis b.s { width: 60%; }
.s4-web { align-content: start; }
.s4-web i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.s4-web { grid-template-columns: repeat(3, auto) 1fr; }
.s4-web b { grid-column: 1 / -1; }
.s4-li-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: #0a66c2; }
.s4-li-logo svg { width: 18px; height: 18px; fill: #fff; }
.s4-yt { place-items: center; background: radial-gradient(circle at 70% 30%, #3d6fa0 0, transparent 50%), linear-gradient(135deg, #20324a, #0b1522 70%); }
.s4-yt .yt-play { position: relative; left: auto; top: auto; translate: none; }
.s4-comp { grid-auto-flow: column; justify-content: center; align-items: center; gap: 0; }
.s4-comp .sv-av { width: 28px; height: 28px; font-size: 10px; margin-left: -6px; box-shadow: 0 0 0 2px #0d1622; }
.s4-comp .sv-av:first-child { margin-left: 0; }
.sv-av--d { background: linear-gradient(160deg, #cfe8da, #93c2a8); }
.s4-name { color: var(--ink); font-size: 13px; font-weight: 700; }
.s4-ok { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--sc-canvas); }
.s4-ok svg { width: 12px; height: 12px; fill: none; stroke: #062014; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-know .sv-form div { padding: 7px 12px; }
/* Raad van Vier: vier vragen, vier keer ja */
.sv-vote4 em { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 800; color: #062014; background: var(--good); }
.sv-vote4 em svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-vote4 i { display: none; }
.sv-vote4 b { font-size: 14.5px; line-height: 1.25; }
.sv-plan b { line-height: 1.3; }
.sv-idea > b { font-size: clamp(20px, 1.8vw, 27px); }
@media (max-width: 1100px) {
  .s4-name { font-size: 12px; }
  .sv-vote4 b { font-size: 13px; }
}
@media (max-width: 760px) {
  .sv-src4 { gap: 6px; }
  .sv-src4 li { padding: 6px 4px 7px; gap: 5px; border-radius: 12px; }
  .s4-vis { height: 40px; padding: 5px 6px; gap: 3px; }
  .s4-comp .sv-av { width: 20px; height: 20px; font-size: 8px; }
  .s4-yt .yt-play { width: 24px; height: 17px; } .s4-yt .yt-play::after { left: 9px; top: 4px; border-left-width: 7px; border-top-width: 4.5px; border-bottom-width: 4.5px; }
  .s4-li-logo { width: 18px; height: 18px; } .s4-li-logo svg { width: 14px; height: 14px; }
  .s4-name { font-size: 10px; }
  .s4-ok { width: 18px; height: 18px; top: -5px; right: -5px; }
  .sv-know .sv-form div { padding: 4px 9px; }
  .sv-vote4 li { flex-wrap: wrap; } .sv-vote4 em { height: 20px; font-size: 10.5px; padding: 0 7px; margin-left: 0; }
  .sv-vote4 b { font-size: 11.5px; }
  .sv-plan .cv-tag { display: none; }
}
@media (max-width: 760px) {
  .sv-vote4 li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 5px; align-items: center; }
  .sv-vote4 img { grid-row: 1 / 3; align-self: start; }
  .sv-vote4 em { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------- herziening 37: de Raad stemt, en minder groen --- */
/* Raad van Vier als stemming: het plan bovenaan, vier adviseurs, elk steekt een duim op. */
.sv-vote { gap: 14px; }
.sv-vote-plan { color: var(--ink); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -0.02em; }
.sv-jury { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.sv-jury li { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 11px; border-radius: 16px; text-align: center; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); }
.jr-face { position: relative; display: block; width: 52px; height: 52px; margin-bottom: 4px; }
.jr-face img { width: 100%; height: 100%; border-radius: 50%; }
.jr-face i { position: absolute; right: -8px; top: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px #0c1520; }
.jr-face i svg { width: 14px; height: 14px; fill: none; stroke: #062014; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.case-vis.sv .jr-face i[style*="--a"] { transform: translate3d(0, 0, 0) scale(calc(0.4 + var(--k) * 0.6)); }
.sv-jury b { color: var(--ink); font-size: 14px; line-height: 1.2; }
.sv-jury small { color: var(--muted); font-size: 11px; }
.sv-score { display: inline-flex; gap: 4px; }
.sv-score i { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 8px rgba(111, 224, 166, 0.6); }
/* Stap 7: alleen de knop wordt groen; de kaart krijgt een zachte rand in plaats van een groene gloed. */
.sv-approve { box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 0 calc(var(--ok) * 1px) rgba(255, 255, 255, 0.22); }
@media (max-width: 760px) {
  .sv-vote-plan { font-size: 16px; }
  .sv-jury { gap: 6px; }
  .sv-jury li { padding: 8px 3px; }
  .jr-face { width: 38px; height: 38px; }
  .jr-face i { width: 20px; height: 20px; right: -7px; top: -5px; } .jr-face i svg { width: 11px; height: 11px; }
  .sv-jury b { font-size: 11px; } .sv-jury small { font-size: 9.5px; }
  .sv-score i { width: 8px; height: 8px; }
}

/* ---------------------------------------- herziening 38: kring en klant, en de zin die alles pakt --- */
/* Beeld 1: binnen de kring liken mensen je post; je klant staat erbuiten en ziet niets. */
.ps-reach { gap: 10px; }
.reach { position: relative; height: clamp(240px, 32vh, 300px); }
.rc-out { position: absolute; inset: 0; border-radius: 22px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 10px, transparent 10px 20px); }
.rc-in { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; max-height: 100%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, 0.16), rgba(108, 209, 250, 0.04) 70%); border: 1px solid rgba(108, 209, 250, 0.55); box-shadow: 0 0 40px -10px rgba(108, 209, 250, 0.5), inset 0 0 30px -10px rgba(108, 209, 250, 0.5); }
.ps-scene.on .rc-in { animation: rc-breathe 3.4s ease-in-out infinite; }
@keyframes rc-breathe { 50% { box-shadow: 0 0 56px -8px rgba(108, 209, 250, 0.6), inset 0 0 40px -10px rgba(108, 209, 250, 0.6); } }
.rc-lbl { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.rc-lbl--in { left: 50%; top: calc(50% + min(31%, 46%) - 26px); translate: -50% 0; color: var(--cyan); }
.rc-lbl--out { left: 12px; top: 10px; color: var(--dim); }
.rc-me { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; align-content: center; width: 64px; height: 64px; border-radius: 50%; color: #0b1a2a; background: linear-gradient(160deg, #cfeaff, #8fcdea); box-shadow: 0 0 0 6px rgba(108, 209, 250, 0.15), 0 10px 24px -8px rgba(0, 0, 0, 0.7); }
.rc-me b { font-size: 13px; font-weight: 800; line-height: 1; }
.rc-me small { font-size: 9.5px; font-weight: 700; color: #234; }
.rc-p { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; display: grid; justify-items: center; gap: 3px; }
.rc-p i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; color: var(--ink); background: #1a2a3c; border: 1px solid rgba(255, 255, 255, 0.16); }
.rc-p--in em { position: absolute; right: -8px; top: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #378fe9; box-shadow: 0 0 0 2px #101b28; opacity: 0; transform: scale(0.4); transition: opacity 0.35s var(--ease) var(--d), transform 0.35s var(--ease) var(--d); }
.rc-p--in em svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ps-scene.on .rc-p--in em { opacity: 1; transform: none; }
.rc-p--out i { width: 30px; height: 30px; opacity: 0.35; border-style: dashed; background: transparent; }
.rc-p--klant { translate: -86% -60%; }
.rc-p--klant i { width: 42px; height: 42px; opacity: 0.75; border: 1px dashed rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.03); }
.rc-p--klant i svg { width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-p--klant b { color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.rc-p--klant small { color: #ff8b8b; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* een stippellijn van jou naar je klant die bij de rand van je kring stopt */
.rc-block { position: absolute; left: 50%; top: 50%; width: 46%; height: 1px; transform-origin: 0 50%; rotate: 33deg; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 4px, transparent 4px 9px); -webkit-mask: linear-gradient(90deg, #000 62%, transparent 66%); mask: linear-gradient(90deg, #000 62%, transparent 66%); }
.rc-block::after { content: "×"; position: absolute; left: 62%; top: 50%; translate: -50% -55%; color: #ff8b8b; font-size: 18px; font-weight: 800; }
.ps-cap { margin: 0; color: var(--soft); font-size: 15px; text-align: center; }
.ps-cap b { color: var(--ink); }

/* De zin die alles pakt: de lijst trekt zich terug, de zin komt groot in beeld en licht woord voor woord op. */
.pain-grid { transition: opacity 0.2s linear; opacity: calc(1 - var(--pp, 0) * 0.88); transform: scale(calc(1 - var(--pp, 0) * 0.03)); }
.pain-punch { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; margin: 0; padding: 0 var(--gutter); translate: 0 -50%; display: grid; justify-items: center; gap: clamp(10px, 2vh, 20px); text-align: center; pointer-events: none; opacity: var(--pp, 0); }
.pain-punch::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1100px, 120vw); height: 70vh; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 208, 120, calc(var(--pk, 0) * 0.16)), rgba(108, 209, 250, calc(var(--pk, 0) * 0.08)) 55%, transparent); }
.pp-a { color: var(--muted); font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; transform: translate3d(0, calc((1 - var(--pp, 0)) * 16px), 0); }
.pp-b { color: var(--ink); font-size: clamp(42px, 6.4vw, 104px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.pp-w { display: inline-block; opacity: calc(0.12 + var(--wk, 0) * 0.88); transform: translate3d(0, calc((1 - var(--wk, 0)) * 14px), 0); }
.pp-key { position: relative; color: #fff; text-shadow: 0 0 calc(var(--wk, 0) * 36px) rgba(255, 208, 120, 0.55); }
.pp-key::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 4px; border-radius: 2px; background: var(--amber); transform-origin: 0 50%; transform: scaleX(var(--pk, 0)); box-shadow: 0 0 18px rgba(255, 208, 120, 0.8); }
@media (max-width: 760px) {
  .reach { height: 250px; }
  .rc-in { width: 66%; }
  .rc-p i { width: 32px; height: 32px; font-size: 11px; }
  .rc-p--klant i { width: 36px; height: 36px; }
  .rc-p--klant b { font-size: 11px; } .rc-p--klant small { font-size: 10px; }
  .ps-cap { font-size: 13.5px; }
  .pp-b { font-size: clamp(36px, 11vw, 48px); }
  .pp-a { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ps-scene.on .rc-in { animation: none; } .rc-p--in em { transition: none; } }
/* De lijst verdwijnt helemaal als de zin komt, zodat er niets door elkaar staat. */
.pain-grid { opacity: calc(1 - var(--pp, 0)); transform: scale(calc(1 - var(--pp, 0) * 0.04)); }

/* ---------------------------------------- herziening 39: twee beelden die je meteen snapt --- */
/* Beeld 1: mensen met hun naam erbij, geen letters. */
.rc-p i svg { width: 22px; height: 22px; fill: rgba(237, 243, 251, 0.85); stroke: none; }
.rc-p--in i { width: 44px; height: 44px; background: linear-gradient(170deg, #233a54, #15253a); border-color: rgba(108, 209, 250, 0.4); }
.rc-p--in b { color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; }
.rc-p--klant i { position: relative; }
.rc-p--klant i > svg { fill: rgba(237, 243, 251, 0.35); }
.rc-eye { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #2a1820; border: 1px solid rgba(255, 139, 139, 0.6); }
.rc-eye svg { width: 12px !important; height: 12px !important; fill: none !important; stroke: #ff8b8b !important; stroke-width: 2 !important; }
.rc-lbl--in { top: auto; bottom: calc(50% - min(31%, 46%) + 10px); }
.reach { height: clamp(260px, 34vh, 320px); }
/* Beeld 3: een scorebord. Likes ja, berichten en afspraken nul. */
.sc-rows { display: grid; gap: 10px; margin: 6px 0 4px; padding: 0; list-style: none; }
.sc-rows li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ps-scene.on .sc-rows li { opacity: 1; transform: none; }
.ps-scene.on .sc-rows li:nth-child(2) { transition-delay: 0.25s; }
.ps-scene.on .sc-rows li:nth-child(3) { transition-delay: 0.5s; }
.sc-rows b { flex: 1; color: var(--ink); font-size: 15.5px; }
.sc-ic { display: grid; place-items: center; min-width: 40px; height: 40px; }
.sc-ic > svg { width: 24px; height: 24px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-ic .zf-rx i { width: 22px; height: 22px; }
.sc-zero { color: var(--muted); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sc-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.sc-mark svg { width: 13px; height: 13px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-rows .yes .sc-mark { background: var(--good); } .sc-rows .yes .sc-mark svg { stroke: #062014; }
.sc-rows .no { border-color: rgba(255, 139, 139, 0.22); }
.sc-rows .no .sc-mark { background: rgba(255, 139, 139, 0.14); border: 1px solid rgba(255, 139, 139, 0.55); } .sc-rows .no .sc-mark svg { stroke: #ff8b8b; }
@media (max-width: 760px) {
  .reach { height: 270px; }
  .rc-p--in i { width: 36px; height: 36px; } .rc-p i svg { width: 18px; height: 18px; }
  .rc-p--in b { font-size: 10.5px; }
  .sc-rows li { padding: 10px 12px; gap: 10px; } .sc-rows b { font-size: 13.5px; } .sc-zero { font-size: 18px; } .sc-ic { min-width: 32px; height: 32px; } .sc-ic > svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .sc-rows li { transition: none; } }
@media (max-width: 760px) {
  .rc-block { rotate: 44deg; width: 40%; }
  .rc-p--klant { translate: -80% -58%; }
}

/* ---------------------------------------- herziening 40: de feed van je klant --- */
/* Je klant scrolt door LinkedIn. Hij ziet de post van je concurrent, met reacties. Jouw post staat er niet. */
.ps-feed { gap: 12px; }
.kf-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.kf-head > span:nth-child(2) { display: grid; }
.kf-head b { color: var(--ink); font-size: 15px; }
.kf-head small { color: var(--muted); font-size: 12.5px; }
.kf-who i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(170deg, #233a54, #15253a); border: 1px solid rgba(108, 209, 250, 0.4); }
.kf-who svg { width: 22px; height: 22px; fill: rgba(237, 243, 251, 0.85); }
.kf-li { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #0a66c2; }
.kf-li svg { width: 19px; height: 19px; fill: #fff; }
.kf-post { position: relative; display: grid; gap: 9px; padding: 14px 15px 12px; border-radius: 16px; background: linear-gradient(170deg, #182637, #0d1622); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.5s var(--ease) 0.6s, box-shadow 0.5s var(--ease) 0.6s; }
.ps-scene.on .kf-post { opacity: 1; transform: none; border-color: rgba(255, 139, 139, 0.55); box-shadow: 0 0 0 1px rgba(255, 139, 139, 0.25), 0 0 36px -10px rgba(255, 139, 139, 0.45); }
.kf-post header { display: flex; align-items: center; gap: 10px; }
.kf-post header > span:nth-child(2) { display: grid; }
.kf-post header b { color: var(--ink); font-size: 14px; }
.kf-post header small { color: var(--muted); font-size: 11.5px; }
.kf-post p { margin: 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.kf-post footer { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--soft); font-size: 12.5px; font-weight: 600; }
.kf-tag { position: absolute; top: -11px; right: 14px; height: 22px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #2a0f12; background: #ff8b8b; opacity: 0; transform: scale(0.8); transition: opacity 0.35s var(--ease) 0.7s, transform 0.35s var(--ease) 0.7s; }
.ps-scene.on .kf-tag { opacity: 1; transform: none; }
.kf-empty { display: grid; justify-items: center; gap: 2px; padding: 18px 14px; border-radius: 16px; border: 1.5px dashed rgba(255, 255, 255, 0.22); text-align: center; opacity: 0; transition: opacity 0.5s var(--ease) 1.1s; }
.ps-scene.on .kf-empty { opacity: 1; }
.kf-empty span { color: var(--soft); font-size: 14.5px; font-weight: 700; }
.kf-empty small { color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .kf-post, .kf-tag, .kf-empty { transition: none; } }
@media (max-width: 760px) {
  .kf-head { padding-bottom: 9px; } .kf-head b { font-size: 13.5px; } .kf-head small { font-size: 11px; }
  .kf-who i { width: 34px; height: 34px; } .kf-who svg { width: 18px; height: 18px; }
  .kf-post { padding: 11px 12px 10px; gap: 7px; } .kf-post p { font-size: 13.5px; }
  .kf-empty { padding: 12px; }
}

/* ---------------------------------------- herziening 41: korte pijnpunten, wie je post ziet, en de zin onder de lijst --- */
/* Beeld 1: twee balken. Je eigen netwerk ziet je post, nieuwe mensen bijna niet. */
.ps-reach2 { gap: 14px; }
.ps-reach2 .ps-sub { margin-bottom: 4px; }
.rb-row { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ps-scene.on .rb-row { opacity: 1; transform: none; }
.ps-scene.on .rb-row--low { transition-delay: 0.3s; }
.rb-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(108, 209, 250, 0.1); border: 1px solid rgba(108, 209, 250, 0.4); }
.rb-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rb-txt { display: grid; gap: 9px; }
.rb-txt b { color: var(--ink); font-size: 15.5px; }
.rb-bar { display: block; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rb-bar i { display: block; width: var(--w); height: 100%; border-radius: 7px; background: linear-gradient(90deg, rgba(108, 209, 250, 0.45), var(--cyan)); box-shadow: 0 0 18px -4px rgba(108, 209, 250, 0.7); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.2s; }
.ps-scene.on .rb-bar i { transform: none; }
.rb-row--low { border-color: rgba(255, 139, 139, 0.3); }
.rb-row--low .rb-ic { background: rgba(255, 139, 139, 0.1); border-color: rgba(255, 139, 139, 0.5); }
.rb-row--low .rb-ic svg { stroke: #ff8b8b; }
.rb-row--low .rb-bar i { min-width: 10px; background: #ff8b8b; box-shadow: 0 0 14px -2px rgba(255, 139, 139, 0.8); transition-delay: 0.6s; }
/* het wolkje bij de korte balk, zoals "Waarom deze wel?": het staat onder de balk en wijst met een puntje naar het rode stukje, dus het bedekt nooit tekst */
.rb-flag { position: relative; justify-self: start; margin-top: 3px; max-width: 100%; padding: 6px 11px; border-radius: 11px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: rgba(12, 22, 34, 0.96); border: 1px solid rgba(255, 139, 139, 0.55); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease) 1.1s, transform 0.4s var(--ease) 1.1s; }
.rb-flag::before { content: ""; position: absolute; left: 7px; top: -5px; width: 8px; height: 8px; rotate: 45deg; background: rgba(12, 22, 34, 0.96); border-left: 1px solid rgba(255, 139, 139, 0.55); border-top: 1px solid rgba(255, 139, 139, 0.55); }
.ps-scene.on .rb-flag { opacity: 1; transform: none; }

/* De zin staat nu gewoon onder de lijst, groot en wit; de woorden lichten op en "de aanpak" krijgt een gouden streep. */
.pain-grid { opacity: 1; transform: none; transition: none; }
.pain-punch { position: relative; left: auto; right: auto; top: auto; z-index: auto; translate: none; margin: clamp(24px, 4vh, 40px) 0 0; padding: 0; justify-items: start; gap: 8px; text-align: left; opacity: var(--pp, 0); transform: translate3d(0, calc((1 - var(--pp, 0)) * 12px), 0); }
.pain-punch::before { left: 0; top: 50%; width: 130%; height: 260%; translate: -18% -50%; }
.pp-a { font-size: clamp(17px, 1.3vw, 20px); color: var(--soft); transform: none; }
.pp-b { font-size: clamp(34px, 3.5vw, 56px); letter-spacing: -0.045em; line-height: 1.05; }
@media (max-width: 760px) {
  .rb-row { padding: 11px 12px; gap: 11px; grid-template-columns: 36px minmax(0, 1fr); }
  .rb-ic { width: 36px; height: 36px; } .rb-ic svg { width: 20px; height: 20px; }
  .rb-txt b { font-size: 13.5px; } .rb-bar { height: 11px; }
  .rb-flag { font-size: 11.5px; padding: 5px 9px; }
  .pain-punch { margin-top: 18px; gap: 4px; }
  .pp-a { font-size: 15px; }
  .pp-b { font-size: clamp(28px, 8.4vw, 36px); }
}
@media (prefers-reduced-motion: reduce) { .rb-row, .rb-bar i, .rb-flag { transition: none; } }
/* Telefoon: het wolkje onder de korte balk, en de zin onder het beeld, zodat er geen leeg gat boven het beeld staat. */
@media (max-width: 760px) {
  .pain-copy { display: contents; }
  .pain-copy .h2 { order: 1; }
  .pain-list { order: 2; margin-top: 0; }
  .pain-vis { order: 3; }
  .pain-punch { order: 4; margin-top: 4px; }
}
/* De korte uitlegregels staan er weer; de lijst iets compacter, zodat de zin eronder ruim in beeld blijft. */
@media (min-width: 761px) {
  .pain-list li { padding-top: 12px; padding-bottom: 12px; }
  .pain-list li::before { top: 21px; }
  .pain-punch { margin-top: clamp(18px, 3vh, 30px); }
}

/* ---------------------------------------- herziening 42: de aanpak, het proces en de post in één stuk --- */
/* Eén vastgezet stuk. Bovenaan de kop en één zin die per stap wisselt; daaronder de kaart met Orbit in het midden. */
.flow { position: relative; z-index: 2; }
.flow-stage { display: grid; grid-template-rows: auto auto; align-content: center; gap: clamp(18px, 3.6vh, 44px); padding: calc(var(--bar-h) + clamp(10px, 2vh, 24px)) var(--gutter) clamp(10px, 2vh, 24px); background: transparent; }
.flow-head { display: grid; justify-items: center; gap: 12px; text-align: center; }
.flow .h2 { font-size: clamp(30px, 3.3vw, 54px); }
.flow-says { display: grid; width: min(100%, 60rem); min-height: 82px; margin-top: 4px; }
.fs { grid-area: 1 / 1; margin: 0; display: grid; align-content: start; justify-items: center; gap: 12px; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.fs.on { opacity: 1; transform: none; }
.fs b { color: var(--ink); font-size: clamp(18px, 1.55vw, 24px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.fs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fs-chips i { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--soft); background: rgba(108, 209, 250, 0.06); border: 1px solid rgba(108, 209, 250, 0.28); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.fs-chips svg { width: 14px; height: 14px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fs.on .fs-chips i { opacity: 1; transform: none; }
.fs.on .fs-chips i:nth-child(2) { transition-delay: 0.08s; } .fs.on .fs-chips i:nth-child(3) { transition-delay: 0.16s; } .fs.on .fs-chips i:nth-child(4) { transition-delay: 0.24s; } .fs.on .fs-chips i:nth-child(5) { transition-delay: 0.32s; } .fs.on .fs-chips i:nth-child(6) { transition-delay: 0.4s; }

/* De kaart: data erin, Orbit beslist, post eruit, op LinkedIn. Draden lopen altijd via Orbit. */
.flow-map { position: relative; width: 100%; max-width: 82rem; margin: 0 auto; padding-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(18px, 3.2vw, 56px); align-items: center; }
.flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-wires path { fill: none; stroke: rgba(108, 209, 250, 0.22); stroke-width: 1.3; stroke-dasharray: 3 6; stroke-linecap: round; transition: stroke 0.3s var(--ease); }
.flow-wires path.hot { stroke: rgba(108, 209, 250, 0.75); }
.flow-wires circle { fill: #e9f8ff; filter: drop-shadow(0 0 6px rgba(108, 209, 250, 0.95)); opacity: 0; }
.fl-col { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 18px); }
.fl-label { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; transition: color 0.4s var(--ease); }
.fl-col.on .fl-label { color: var(--cyan); }
.fl-ag { display: grid; justify-items: center; gap: 7px; }
.fl-fig { display: grid; place-items: center; width: clamp(64px, 5.6vw, 92px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #15263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.25); transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.fl-fig img { width: 78%; height: 78%; object-fit: contain; }
.fl-ag b { color: var(--soft); font-size: 14px; font-weight: 700; transition: color 0.4s var(--ease); }
.fl-ag.on .fl-fig { transform: translate3d(0, -5px, 0) scale(1.07); border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(108, 209, 250, 0.14), 0 0 26px rgba(108, 209, 250, 0.5); }
.fl-ag.on b { color: var(--ink); }
.fl-orb { --glow: 0; position: relative; width: clamp(140px, 12.6vw, 206px); aspect-ratio: 1; }
.fl-orb::before { content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, calc(0.1 + var(--glow) * 0.3)), transparent 62%); }
.fl-round { position: absolute; right: -14%; top: 4%; z-index: 2; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #06131f; background: var(--cyan); box-shadow: 0 0 20px rgba(108, 209, 250, 0.55); opacity: 0; transform: scale(0.85); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.fl-round.on { opacity: 1; transform: none; }
.fl-raad { display: grid; justify-items: center; gap: 8px; }
.fl-beads { display: flex; gap: 6px; }
.fl-beads img { width: 32px; height: 32px; border-radius: 50%; opacity: 0.45; filter: grayscale(0.5); transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.fl-beads img.on { opacity: 1; filter: none; transform: translate3d(0, -3px, 0); box-shadow: 0 0 14px rgba(108, 209, 250, 0.6); }
.fl-raad b { color: var(--muted); font-size: 13px; font-weight: 600; }
.fl-pill { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px 0 9px; border-radius: 999px; white-space: nowrap; color: var(--ink); font-size: 14px; font-weight: 700; border: 1px solid rgba(108, 209, 250, 0.45); transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.fl-pill-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(108, 209, 250, 0.55); }
.fl-pill-ic svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fl-pill--ok .fl-pill-ic svg { stroke-width: 2.4; }
.fl-pill.on { color: #06131f; background: var(--cyan); box-shadow: 0 0 22px rgba(108, 209, 250, 0.55); }
.fl-pill.on .fl-pill-ic { border-color: rgba(6, 19, 31, 0.6); }

/* De post: een lege plek, dan het concept, de goedkeuring en de post op LinkedIn. Dezelfde kaart, zodat je hem ziet groeien. */
.fl-post { justify-items: stretch; }
.fl-post .fl-label { justify-self: center; }
.fp { position: relative; display: grid; width: 100%; max-width: 26rem; justify-self: center; }
.fp-slot { grid-area: 1 / 1; display: grid; place-items: center; border-radius: 22px; border: 1.5px dashed rgba(255, 255, 255, 0.18); color: var(--muted); font-size: 14px; font-weight: 600; transition: opacity 0.4s var(--ease); }
.fp.is-draft .fp-slot { opacity: 0; }
.fp-card { --ok: 0; --mv: 0; grid-area: 1 / 1; display: grid; gap: 11px; padding: 16px 18px 14px; border-radius: 22px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.fp.is-draft .fp-card { opacity: 1; transform: none; }
.fp.is-live .fp-card { border-color: rgba(108, 209, 250, 0.45); box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 40px -10px rgba(108, 209, 250, 0.45); }
.fp-head { display: flex; align-items: center; gap: 10px; }
.fp-head > span:nth-child(2) { display: grid; }
.fp-head b { color: var(--ink); font-size: 14.5px; }
.fp-head small { color: var(--muted); font-size: 12px; }
.fp-state { margin-left: auto; display: grid; justify-items: end; }
.fp-c, .fp-li { grid-area: 1 / 1; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.fp-c { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--soft); border: 1px solid var(--hair-2); }
.fp-li { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #0a66c2; opacity: 0; transform: scale(0.6); }
.fp-li svg { width: 20px; height: 20px; fill: #fff; }
.fp.is-live .fp-c { opacity: 0; }
.fp.is-live .fp-li { opacity: 1; transform: none; }
.fp-body p { margin: 0 0 5px; color: var(--soft); font-size: 14px; line-height: 1.5; opacity: 0.08; transition: opacity 0.35s var(--ease); }
.fp-body p:first-child { color: var(--ink); font-weight: 600; }
.fp-body p.on { opacity: 1; }
.fp-foot { display: grid; min-height: 40px; padding-top: 10px; border-top: 1px solid var(--hair); }
.fp-btns { position: relative; grid-area: 1 / 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; opacity: 0; transition: opacity 0.3s var(--ease); }
.fp.is-ask .fp-btns { opacity: 1; }
.fp-btns .sv-ghost, .fp-btns .sv-go { height: 36px; padding: 0 15px; font-size: 13.5px; }
.fp-btns .sv-cursor { right: 26px; bottom: -4px; }
.fp-rx { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease) 0.25s, transform 0.4s var(--ease) 0.25s; }
.fp.is-live .fp-rx { opacity: 1; transform: none; }
.fp-note { grid-row: 2; justify-self: end; margin-top: 8px; color: var(--dim); font-size: 12px; opacity: 0; transition: opacity 0.4s var(--ease); }
.fp.is-draft .fp-note { opacity: 1; }

@media (max-width: 1100px) {
  .fl-pill { height: 34px; font-size: 13px; }
  .fp-card { padding: 13px 14px 12px; }
  .fp-body p { font-size: 13px; }
  .fp-head small { display: none; }
}
@media (max-height: 820px) and (min-width: 761px) {
  .fl-fig { width: clamp(58px, 5vw, 76px); }
  .fl-orb { width: clamp(124px, 11vw, 168px); }
  .flow-says { min-height: 74px; }
}
@media (max-width: 760px) {
  .flow-stage { align-content: start; gap: 10px; padding-top: calc(var(--bar-h) + 14px); }
  .flow .eyebrow { display: none; }
  .flow .h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .flow-says { min-height: 92px; margin-top: 0; }
  .fs { gap: 8px; }
  .fs b { font-size: 16px; }
  .fs-chips { gap: 6px; }
  .fs-chips i { height: 26px; padding: 0 10px; font-size: 12px; }
  .flow-map { grid-template-columns: 1fr; gap: 12px; padding-bottom: 0; }
  .flow-wires, .fl-label { display: none; }
  .fl-in, .fl-out { grid-auto-flow: column; justify-content: center; align-items: center; column-gap: 16px; }
  .fl-fig { width: 52px; }
  .fl-ag { gap: 4px; }
  .fl-ag b { font-size: 12px; }
  .fl-orb { width: 92px; }
  .fl-round { right: -60%; top: 30%; }
  .fl-beads img { width: 24px; height: 24px; }
  .fl-raad b { font-size: 12px; }
  .fl-pill { height: 32px; padding: 0 12px 0 7px; font-size: 12.5px; }
  .fp-card { padding: 11px 13px 10px; gap: 8px; }
  .fp-body p { font-size: 12.5px; }
  .fp-body p:nth-child(2) { display: none; }
  .fp-foot { min-height: 34px; padding-top: 8px; }
  .fp-btns .sv-ghost, .fp-btns .sv-go { height: 30px; padding: 0 12px; font-size: 12px; }
  .fp-note { margin-top: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs, .fs-chips i, .fl-fig, .fl-beads img, .fl-pill, .fl-round, .fp-slot, .fp-card, .fp-c, .fp-li, .fp-body p, .fp-btns, .fp-rx, .fp-note, .flow-wires path { transition: none !important; }
}
.fp-btns .sv-go { min-width: 9.6em; justify-content: center; }
@media (max-width: 760px) { .fp-btns .sv-go { min-width: 9em; } }

/* ---------------------------------------- herziening 43: Orbit stuurt alles aan, je scrolt door één ronde --- */
/* Orbit staat vast in een laag zo hoog als het scherm: op groot scherm links in het midden, op de telefoon bovenaan.
   De stappen schuiven ernaast (of eronder) voorbij. Lichtstralen lopen van Orbit naar wie hij aanstuurt en terug. */
.os { --os-orb: clamp(150px, 13vw, 210px); --os-col: 36%; position: relative; z-index: 2; padding-bottom: 6vh; }
.os-over { position: sticky; top: 0; z-index: 3; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; }
.os-shade { display: none; }
.os-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.os-beams path { fill: none; stroke: rgba(108, 209, 250, 0.6); stroke-width: 1.6; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 5px rgba(108, 209, 250, 0.7)); }
.os-beams circle { fill: #f1fbff; opacity: 0; filter: drop-shadow(0 0 6px rgba(108, 209, 250, 1)); }
.os-frame { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: min(100%, 84rem); margin: 0 auto; padding: 0 var(--gutter); }
.os-boss { position: absolute; left: var(--gutter); top: calc(50% + var(--bar-h) / 2); width: calc((100% - 2 * var(--gutter)) * 0.36); translate: 0 -50%; display: grid; justify-items: center; gap: 8px; }
.os-orb { --rx: 0; position: relative; width: var(--os-orb); aspect-ratio: 1; }
.os-orb::before { content: ""; position: absolute; inset: -34%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(108, 209, 250, calc(0.12 + var(--rx) * 0.32)), transparent 62%); }
.os-name { margin: 0; display: grid; justify-items: center; gap: 3px; text-align: center; }
.os-name b { color: var(--ink); font-size: 18px; font-weight: 700; }
.os-status { color: var(--cyan); font-size: 15px; font-weight: 600; text-wrap: balance; }
.os-status.flash { animation: os-flash 0.5s var(--ease); }
@keyframes os-flash { from { opacity: 0; transform: translate3d(0, 4px, 0); } }

/* De kop en de stappen staan in de rechterkolom. */
.os-head, .os-scene { position: relative; z-index: 1; display: grid; grid-template-columns: var(--os-col) minmax(0, 1fr); width: min(100%, 84rem); margin: 0 auto; padding: 0 var(--gutter); }
.os-head { min-height: 86vh; align-items: center; padding-top: var(--bar-h); }
.os-hin, .os-in { grid-column: 2; display: grid; justify-items: start; gap: 16px; padding-left: clamp(20px, 4vw, 64px); }
.os-head .h2 { font-size: clamp(34px, 3.8vw, 60px); }
.os-lede { margin: 0; max-width: 32rem; color: var(--soft); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }
.os-scene { min-height: 88vh; align-items: center; padding-top: 6vh; padding-bottom: 6vh; }
.os-in { gap: clamp(14px, 2.4vh, 24px); transition: opacity 0.5s var(--ease); }
.os-scene:not(.on) .os-in { opacity: 0.3; }
.os-in > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.os-scene.in .os-in > * { opacity: 1; transform: none; }
.os-scene.in .os-in > :nth-child(2) { transition-delay: 0.12s; }
.os-scene.in .os-in > :nth-child(3) { transition-delay: 0.24s; }
.os-scene.in .os-in > :nth-child(4) { transition-delay: 0.36s; }
.os-t { margin: 0; color: var(--ink); font-size: clamp(26px, 2.6vw, 42px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.os-s { margin: -6px 0 0; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); }

/* Wie er aan het werk is, staat bovenaan de stap; daar komt de straal van Orbit binnen. */
.os-actors { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(18px, 3vw, 44px); }
.os-ag { display: grid; justify-items: center; gap: 5px; text-align: center; }
.os-fig { display: grid; place-items: center; width: clamp(78px, 6.4vw, 100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #15263a, #0a121c); border: 1px solid rgba(137, 208, 255, 0.25); transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.os-fig img { width: 80%; height: 80%; object-fit: contain; }
.os-fig--you svg { width: 46%; height: 46%; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-ag b { color: var(--ink); font-size: 16px; font-weight: 700; }
.os-ag small { max-width: 13rem; color: var(--muted); font-size: 13.5px; }
.os-scene.on .os-fig { border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(108, 209, 250, 0.12), 0 0 34px rgba(108, 209, 250, 0.45); }

.os-card { position: relative; display: grid; gap: 12px; width: min(100%, 27rem); padding: 18px 20px; border-radius: 22px; text-align: left; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), var(--glass-shadow); }
.os-tag { justify-self: start; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--cyan); background: rgba(108, 209, 250, 0.08); border: 1px solid rgba(108, 209, 250, 0.3); }
.os-tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.os-note { color: var(--dim); font-size: 12px; }

/* 1 · de intake */
.os-intake dl { display: grid; gap: 8px; margin: 0; }
.os-intake dl div { display: grid; grid-template-columns: 8.4em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 12px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.os-scene.in .os-intake dl div { opacity: 1; transform: none; }
.os-scene.in .os-intake dl div:nth-child(1) { transition-delay: 0.45s; } .os-scene.in .os-intake dl div:nth-child(2) { transition-delay: 0.6s; } .os-scene.in .os-intake dl div:nth-child(3) { transition-delay: 0.75s; } .os-scene.in .os-intake dl div:nth-child(4) { transition-delay: 0.9s; }
.os-intake dt { color: var(--muted); font-size: 13px; }
.os-intake dd { margin: 0; color: var(--ink); font-size: 14.5px; font-weight: 600; }

/* 2 · Research en Resultaten: elk met wat ze vinden eronder */
.os-actors--two, .os-two { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: clamp(20px, 3.4vw, 52px); width: 100%; }
.os-actors--two .os-ag { justify-self: center; }
.os-two { align-items: start; }
.os-side { display: grid; justify-items: center; }
.os-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
.os-src li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 5px; border-radius: 999px; color: var(--ink); font-size: 13.5px; font-weight: 600; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(108, 209, 250, 0.25); opacity: 0; transform: scale(0.9); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.os-src li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(108, 209, 250, 0.1); }
.os-src svg { width: 15px; height: 15px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.os-scene.in .os-src li { opacity: 1; transform: none; }
.os-scene.in .os-src li:nth-child(1) { transition-delay: 0.45s; } .os-scene.in .os-src li:nth-child(2) { transition-delay: 0.6s; } .os-scene.in .os-src li:nth-child(3) { transition-delay: 0.75s; } .os-scene.in .os-src li:nth-child(4) { transition-delay: 0.9s; } .os-scene.in .os-src li:nth-child(5) { transition-delay: 1.05s; }
.os-bars { width: 100%; padding: 15px 16px; }
.os-bars ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.os-bars li { position: relative; display: grid; gap: 6px; }
.os-bars li span { color: var(--soft); font-size: 13px; font-weight: 600; padding-right: 52px; }
.os-bars li i { display: block; width: var(--w); height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s var(--ease); }
.os-scene.in .os-bars li i { transform: none; }
.os-scene.in .os-bars li:nth-child(1) i { transition-delay: 0.5s; } .os-scene.in .os-bars li:nth-child(2) i { transition-delay: 0.65s; } .os-scene.in .os-bars li:nth-child(3) i { transition-delay: 0.8s; }
.os-bars li.hit span { color: var(--ink); }
.os-bars li.hit i { background: linear-gradient(90deg, rgba(108, 209, 250, 0.5), var(--cyan)); box-shadow: 0 0 16px -4px rgba(108, 209, 250, 0.7); }
.os-bars li em { position: absolute; right: 0; top: -1px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: #06131f; background: var(--cyan); }

/* 3 · de Raad van Vier en het plan */
.os-raad { display: grid; grid-template-columns: repeat(4, minmax(0, 7.4rem)); gap: clamp(8px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.os-raad li { display: grid; justify-items: center; gap: 5px; text-align: center; }
.os-face { position: relative; width: 64px; height: 64px; }
.os-face img { width: 100%; height: 100%; border-radius: 50%; transition: box-shadow 0.5s var(--ease); }
.os-scene.on .os-face img { box-shadow: 0 0 0 3px rgba(108, 209, 250, 0.16), 0 0 24px rgba(108, 209, 250, 0.4); }
.os-face i { position: absolute; right: -6px; top: -4px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #378fe9; box-shadow: 0 0 0 2px #0b1520; transform: scale(0); transition: transform 0.35s var(--ease); }
.os-face i svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.os-scene.in .os-face i { transform: none; }
.os-scene.in .os-raad li:nth-child(1) .os-face i { transition-delay: 0.5s; } .os-scene.in .os-raad li:nth-child(2) .os-face i { transition-delay: 0.7s; } .os-scene.in .os-raad li:nth-child(3) .os-face i { transition-delay: 0.9s; } .os-scene.in .os-raad li:nth-child(4) .os-face i { transition-delay: 1.1s; }
.os-raad b { color: var(--ink); font-size: 14px; font-weight: 700; }
.os-raad small { color: var(--muted); font-size: 12px; }
.os-plan ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.os-plan li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.07); }
.os-plan li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.os-plan li i svg { width: 15px; height: 15px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os-plan .ok i { background: rgba(108, 209, 250, 0.12); } .os-plan .ok svg { stroke: var(--cyan); }
.os-plan .no i { background: rgba(255, 139, 139, 0.12); } .os-plan .no svg { stroke: #ff8b8b; }
.os-plan .go { border-color: rgba(108, 209, 250, 0.35); }
.os-plan .go i { background: rgba(255, 255, 255, 0.08); } .os-plan .go svg { stroke: var(--ink); }
.os-plan li span { display: grid; color: var(--soft); font-size: 14.5px; font-weight: 600; }
.os-plan li small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.os-plan .go span { color: var(--ink); }

/* 4 · Ideeën en de Schrijver maken de post */
.os-pair { align-items: center; gap: 18px; }
.os-arrow { align-self: center; margin-bottom: 24px; }
.os-arrow svg { width: 28px; height: 28px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.os-post { width: min(100%, 30rem); }
.os-ph { display: flex; align-items: center; gap: 10px; }
.os-ph > span:nth-child(2) { display: grid; }
.os-ph b { color: var(--ink); font-size: 15px; }
.os-ph small { color: var(--muted); font-size: 12px; }
.os-pill { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--soft); border: 1px solid var(--hair-2); }
.os-pb p { margin: 0 0 5px; color: var(--soft); font-size: 14.5px; line-height: 1.5; }
.os-pb p:first-child { color: var(--ink); font-weight: 600; }
.os-draft .os-pb p { opacity: 0; transition: opacity 0.4s var(--ease); }
.os-scene.in .os-draft .os-pb p { opacity: 1; }
.os-scene.in .os-draft .os-pb p:nth-child(1) { transition-delay: 0.6s; } .os-scene.in .os-draft .os-pb p:nth-child(2) { transition-delay: 1s; } .os-scene.in .os-draft .os-pb p:nth-child(3) { transition-delay: 1.4s; }
.os-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.os-chips i { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--soft); background: rgba(108, 209, 250, 0.06); border: 1px solid rgba(108, 209, 250, 0.28); }

/* 5 · jij keurt goed: de cursor klikt als de post door het midden gaat */
.os-scene--ok { --ok: 0; --mv: 0; --lp: 0; }
.os-approve { box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 0 calc(var(--ok) * 1px) rgba(255, 255, 255, 0.22); }
.os-btns { padding-top: 6px; }

/* 6 · op LinkedIn */
.os-feed { display: grid; gap: 12px; width: min(100%, 30rem); }
.os-ghost { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); }
.os-ghost i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
.os-ghost i.s { width: 55%; }
.os-live { width: 100%; border-color: rgba(108, 209, 250, 0.4); box-shadow: var(--glass-rim), var(--glass-shadow), 0 0 44px -12px rgba(108, 209, 250, 0.5); }
.os-li { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #0a66c2; }
.os-li svg { width: 20px; height: 20px; fill: #fff; }
.os-pf { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.os-pf .zf-rx i { transform: scale(0); transition: transform 0.35s var(--ease); }
.os-scene.in .os-pf .zf-rx i { transform: none; }
.os-scene.in .os-pf .zf-rx i:nth-child(1) { transition-delay: 0.8s; } .os-scene.in .os-pf .zf-rx i:nth-child(2) { transition-delay: 1s; } .os-scene.in .os-pf .zf-rx i:nth-child(3) { transition-delay: 1.2s; }

/* 7 · Resultaten kijkt, Orbit leert */
.os-bars--post { width: min(100%, 24rem); }

@media (max-height: 820px) and (min-width: 761px) {
  .os { --os-orb: clamp(120px, 11vw, 160px); }
  .os-fig { width: clamp(68px, 5.6vw, 84px); }
  .os-t { font-size: clamp(24px, 2.3vw, 34px); }
  .os-scene { min-height: 92vh; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .os { --os-col: 32%; }
  .os-boss { width: calc((100% - 2 * var(--gutter)) * 0.32); }
  .os-actors--two, .os-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-raad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .os-face { width: 54px; height: 54px; }
  .os-raad b { font-size: 12.5px; }
}
/* Telefoon: Orbit staat bovenaan, de stappen schuiven eronder door. */
@media (max-width: 760px) {
  .os { --os-orb: 64px; --os-col: 0; }
  .os-shade { display: block; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bar-h) + var(--os-orb) + 96px); background: linear-gradient(var(--sc-canvas) 74%, transparent); }
  .os-frame { padding: 0; }
  .os-boss { left: 50%; top: calc(var(--bar-h) + 8px); width: auto; translate: -50% 0; gap: 2px; }
  .os-name b { font-size: 13.5px; }
  .os-status { font-size: 12.5px; white-space: nowrap; }
  .os-head, .os-scene { grid-template-columns: 1fr; }
  .os-hin, .os-in { grid-column: 1; justify-items: center; padding-left: 0; text-align: center; }
  .os-head { min-height: 70vh; padding-top: calc(var(--bar-h) + var(--os-orb) + 70px); align-items: start; }
  .os-head .h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .os-scene { min-height: 84vh; padding-top: calc(var(--os-orb) + 60px); padding-bottom: 3vh; align-items: start; }
  .os-t { font-size: 24px; }
  .os-actors { justify-content: center; gap: 22px; }
  .os-fig { width: 62px; }
  .os-ag b { font-size: 14px; } .os-ag small { font-size: 12px; }
  .os-actors--two, .os-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .os-src li { height: 30px; padding: 0 10px 0 4px; font-size: 12px; }
  .os-src li span { width: 22px; height: 22px; } .os-src svg { width: 13px; height: 13px; }
  .os-bars { padding: 12px; } .os-bars li span { font-size: 11.5px; padding-right: 0; } .os-bars li em { display: none; }
  .os-card { padding: 14px 15px; }
  .os-intake dl div { grid-template-columns: 1fr; gap: 2px; padding: 7px 11px; }
  .os-raad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .os-face { width: 46px; height: 46px; }
  .os-face i { width: 20px; height: 20px; } .os-face i svg { width: 11px; height: 11px; }
  .os-raad b { font-size: 11.5px; } .os-raad small { font-size: 10px; }
  .os-plan li span { font-size: 13.5px; }
  .os-pb p { font-size: 13.5px; }
  .os-pair { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-in, .os-in > *, .os-intake dl div, .os-src li, .os-bars li i, .os-face i, .os-draft .os-pb p, .os-pf .zf-rx i, .os-fig, .os-face img { transition: none !important; }
  .os-status.flash { animation: none; }
}
/* Elke agent staat links in de kolom, met zijn werk ernaast. De straal van Orbit komt van links binnen en loopt
   dus alleen door de lege ruimte tussen Orbit en de stap, nooit over tekst. */
.os-in { width: 100%; }
.os-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; width: 100%; }
.os-row .os-fig { width: clamp(72px, 5.6vw, 92px); }
.os-rc { display: grid; justify-items: start; gap: 8px; padding-top: 4px; }
.os-rc > b { color: var(--ink); font-size: 17px; font-weight: 700; }
.os-rc > small { margin-top: -5px; color: var(--muted); font-size: 14px; }
.os-rc .os-src { justify-content: flex-start; max-width: 30rem; }
.os-rc .os-card { margin-top: 4px; }
.os-split { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; width: 100%; }
.os-stack { display: grid; gap: 22px; }
.os-stack .os-row { align-items: center; }
.os-stack .os-rc { padding-top: 0; gap: 2px; }
.os-stack .os-rc > small { margin-top: 0; }
.os-raad { grid-template-columns: 1fr; gap: 12px; }
.os-raad li { justify-items: stretch; text-align: left; }
.os-row--raad { align-items: center; gap: 14px; }
.os-row--raad .os-rc { padding-top: 0; gap: 0; }
.os-row--raad .os-rc b { font-size: 15.5px; }
.os-row--raad .os-rc small { margin-top: 0; font-size: 12.5px; }
.os-face { width: 54px; height: 54px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .os-split { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .os-face { width: 46px; height: 46px; }
}
@media (max-width: 760px) {
  .os-beams { display: none; }
  .os-in { justify-items: start; text-align: left; }
  .os-row { gap: 12px; }
  .os-row .os-fig { width: 54px; }
  .os-rc > b { font-size: 15px; } .os-rc > small { font-size: 12.5px; }
  .os-split { grid-template-columns: 1fr; gap: 16px; }
  .os-stack { grid-template-columns: 1fr 1fr; gap: 10px; }
  .os-raad { grid-template-columns: 1fr 1fr; gap: 10px; }
  .os-face { width: 42px; height: 42px; }
  .os-row--raad .os-rc b { font-size: 13.5px; } .os-row--raad .os-rc small { font-size: 11px; }
  .os-head .os-hin { text-align: center; justify-items: center; }
}
.os-row--raad { gap: 20px; }
.os-rc .os-card { width: min(100%, 27rem); }
/* De cursor komt van rechts aanvliegen; niets mag de pagina breder maken. clip houdt Orbit wel vast bovenaan. */
.os { overflow-x: clip; }
/* De zin onder Orbit blijft smal, zodat de stralen er nooit overheen lopen. */
.os-status { max-width: 12.5em; white-space: normal; }
@media (max-width: 760px) {
  .os-status { max-width: none; white-space: nowrap; }
  .os-shade { height: calc(var(--bar-h) + var(--os-orb) + 140px); background: linear-gradient(var(--sc-canvas) 66%, transparent); }
}
@media (max-width: 760px) {
  .os-shade { height: calc(var(--bar-h) + var(--os-orb) + 150px); background: linear-gradient(var(--sc-canvas) calc(var(--bar-h) + var(--os-orb) + 76px), transparent); }
  .os-head { padding-top: calc(var(--bar-h) + var(--os-orb) + 120px); }
}
/* Orbit zit in een laag zo groot als het hele stuk; daarin blijft hij vast in beeld en stopt hij precies waar het stuk stopt. */
.os-over { position: absolute; inset: 0; height: auto; margin: 0; }
.os-pin { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* ---------------------------------------- herziening 44: glazen balk en voettekst, tijdelijk beeldmerk, een vloot in de ruimte --- */
/* De balk is een zwevende glazen pil boven de pagina. Bovenaan licht, bij scrollen iets dichter. */
.bar {
  inset: 10px max(var(--gutter), calc(50% - 42rem)) auto; height: 56px; padding: 0 7px 0 16px; border-radius: 999px;
  grid-template-columns: auto 1fr auto; gap: 14px;
  background: linear-gradient(172deg, rgba(22, 34, 48, 0.55), rgba(7, 13, 21, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 44px -24px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.bar.is-glass { background: linear-gradient(172deg, rgba(22, 34, 48, 0.9), rgba(7, 13, 21, 0.94)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 20px 48px -22px rgba(0, 0, 0, 0.95); }
.bar-brand { gap: 9px; letter-spacing: 0; text-transform: none; }
.mark { width: 34px; height: 34px; flex: none; overflow: visible; }
.brand-word { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.brand-word span { font-weight: 500; color: var(--muted); }
.bar-links { justify-self: center; gap: 2px; padding: 4px; border-radius: 999px; }
.bar-links a { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { color: var(--ink); background: rgba(108, 209, 250, 0.08); } }
.bar-cta { height: 42px; padding: 0 8px 0 16px; gap: 10px; background: rgba(255, 208, 120, 0.05); border-color: rgba(255, 208, 120, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.bar-cta svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; color: var(--amber-ink); background: linear-gradient(180deg, #ffe4a6, #f7c35c 70%, #efb64a); }
.bar-menu { height: 42px; background: rgba(255, 255, 255, 0.05); }
.sheet { inset: calc(var(--bar-h) + 4px) max(var(--gutter), calc(50% - 42rem)) auto; background: linear-gradient(172deg, rgba(22, 34, 48, 0.96), rgba(7, 13, 21, 0.98)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
@media (max-width: 760px) {
  .bar { inset: 8px 10px auto; height: 50px; padding: 0 5px 0 12px; }
  .mark { width: 30px; height: 30px; }
  .brand-word { font-size: 16px; }
  .bar-menu { height: 40px; padding: 0 14px; }
  .sheet { inset: calc(var(--bar-h) + 2px) 10px auto; }
}

/* De voettekst: één glazen paneel met een dunne horizon bovenaan, de kleine lettertjes eronder. */
.foot { background: transparent; border-top: 0; padding: clamp(24px, 4vw, 48px) 0 26px; }
.foot-grid { position: relative; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.4vw, 48px); border-radius: 28px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--glass-rim), var(--glass-shadow); overflow: hidden; }
.foot-grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(108, 209, 250, 0.7), transparent); }
.foot-grid::after { content: ""; position: absolute; left: 20%; right: 20%; top: -60px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(108, 209, 250, 0.12), transparent); pointer-events: none; }
.foot-brand .bar-brand { min-height: 0; }
.foot-brand .mark { width: 40px; height: 40px; }
.foot-brand .brand-word { font-size: 20px; }
.foot-brand p { margin-top: 14px; }
.foot-legal { margin-top: 18px; padding-top: 0; border-top: 0; text-align: center; }
.foot-legal p { font-size: 12px; }

/* Resultaten: jouw post die achterblijft, staat zacht rood, zodat je ziet waar het beter kan. */
.os-bars li.low span { color: var(--soft); }
.os-bars li.low i { background: rgba(255, 139, 139, 0.55); }
/* Resultaten: jouw post die achterblijft, staat zacht rood, zodat je ziet waar het beter kan. */
.os-bars li.low i { background: rgba(255, 139, 139, 0.55); }

/* ---------------------------------------- herziening 45: één doorlopende ruimte achter het probleem en de aanpak --- */
/* Een vaste laag achter de pagina. De stukken met een eigen ruimte (hero, LinkedIn-stuk, contact) liggen eroverheen. */
.deep { --na: 1; --nb: 0; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0; }
.deep-neb { position: absolute; inset: -10%; }
/* het probleem: een koele, wat donkere nevel, met het meeste licht achter het beeld rechts */
.deep-neb--a { opacity: var(--na); background: radial-gradient(ellipse 36% 32% at 72% 50%, rgba(80, 95, 200, 0.2), transparent 70%), radial-gradient(ellipse 30% 26% at 20% 26%, rgba(46, 120, 190, 0.14), transparent 70%), radial-gradient(ellipse 50% 40% at 50% 100%, rgba(46, 120, 190, 0.1), transparent 70%); }
/* de aanpak: licht achter Orbit, en een zachte gloed rechtsboven achter de stappen */
.deep-neb--b { opacity: var(--nb); background: radial-gradient(ellipse 28% 36% at 24% 52%, rgba(108, 209, 250, 0.17), transparent 70%), radial-gradient(ellipse 42% 30% at 72% 26%, rgba(46, 120, 190, 0.16), transparent 70%), radial-gradient(ellipse 40% 26% at 66% 78%, rgba(80, 95, 200, 0.12), transparent 70%); }
.deep-stars { position: absolute; inset: -6% 0; opacity: 0.85; will-change: transform; }
.deep-earth { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; -webkit-mask: linear-gradient(to bottom, transparent var(--m0, 40%), #000 var(--m1, 48%)); mask: linear-gradient(to bottom, transparent var(--m0, 40%), #000 var(--m1, 48%)); }
.deep-earth img { display: block; width: 100%; height: auto; }

/* Orbit in de aanpak staat op een glazen vloer: een zachte lichtvlek recht onder hem. */
.os-orb::after { content: ""; position: absolute; left: -30%; right: -30%; bottom: -26%; height: 30%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(108, 209, 250, calc(0.22 + var(--rx, 0) * 0.25)), rgba(108, 209, 250, 0.05) 60%, transparent); }
@media (max-width: 760px) { .os-orb::after { display: none; } }
/* Het probleem mag iets meer licht hebben: een koele nevel achter het beeld en een zachte gloed onder de kop. */
.deep-neb--a { background: radial-gradient(ellipse 38% 34% at 72% 50%, rgba(80, 95, 200, 0.28), transparent 70%), radial-gradient(ellipse 32% 28% at 22% 30%, rgba(46, 120, 190, 0.2), transparent 70%), radial-gradient(ellipse 60% 34% at 50% 108%, rgba(46, 120, 190, 0.16), transparent 70%); }
/* Baanringen, zoals dunne lijntekeningen in de ruimte: drie ringen met een paar lichtjes, die heel traag draaien. */
.deep-orbits { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.do-tilt { position: absolute; left: -560px; top: -560px; width: 1120px; height: 1120px; transform: rotate(-14deg) scaleY(0.34); }
.do-spin { display: block; width: 100%; height: 100%; overflow: visible; animation: do-spin 320s linear infinite; }
.do-spin circle { fill: none; stroke: #6cd1fa; stroke-opacity: 0.12; stroke-width: 1; vector-effect: non-scaling-stroke; }
.do-spin .do-dash { stroke-dasharray: 2 10; stroke-opacity: 0.16; }
.do-spin .do-dot { fill: #edf3fb; fill-opacity: 0.55; stroke: none; }
.do-spin .do-dot--a { fill: #6cd1fa; fill-opacity: 0.7; }
@keyframes do-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .do-spin { animation: none; } }

/* ---------------------------------------- herziening 46: de aanpak als glazen regiekamer --- */
/* Het probleem houdt zijn sterren. In de aanpak verdwijnen ze (--nb) en sta je in een lichtere, blauwgrijze kamer. */
.deep-stars { opacity: calc(0.85 * (1 - var(--nb, 0))); }
.deep-neb--b { display: none; }
.deep-studio { position: absolute; inset: 0; opacity: var(--nb, 0); }
/* het licht van de kamer: minder zwart, met de meeste gloed rond Orbit en een zachte gloed rechtsboven achter de stappen */
.ds-light { position: absolute; inset: 0; background:
  radial-gradient(ellipse 34% 42% at var(--vx, 25%) 46%, rgba(108, 209, 250, 0.16), transparent 70%),
  radial-gradient(ellipse 46% 36% at 74% 24%, rgba(62, 110, 170, 0.18), transparent 72%),
  linear-gradient(180deg, #091420 0%, #0c1a28 var(--hz, 60%), #0a1520 100%); }
/* de vloer: dunne lijnen die naar de horizon toe vervagen */
.ds-floor { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; -webkit-mask: linear-gradient(to bottom, transparent var(--hz, 60%), rgba(0, 0, 0, 0.35) calc(var(--hz, 60%) + 4%), #000 calc(var(--hz, 60%) + 34%)); mask: linear-gradient(to bottom, transparent var(--hz, 60%), rgba(0, 0, 0, 0.35) calc(var(--hz, 60%) + 4%), #000 calc(var(--hz, 60%) + 34%)); }
.ds-floor path { fill: none; stroke: #8fcdea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ds-rays { stroke-opacity: 0.1; }
.ds-rows { stroke-opacity: 0.12; }
/* de horizon: een dunne lichtende lijn, het helderst recht onder Orbit, met een zachte gloed erboven */
.ds-horizon { position: absolute; left: 0; right: 0; top: var(--hz, 60%); height: 1px; background: radial-gradient(ellipse 50% 100% at var(--vx, 25%) 50%, rgba(170, 228, 255, 0.85), rgba(108, 209, 250, 0.25) 45%, transparent 80%); }
.ds-horizon::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26vh; background: radial-gradient(ellipse 34% 100% at var(--vx, 25%) 100%, rgba(108, 209, 250, 0.16), transparent 70%); }
.ds-horizon::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30vh; background: radial-gradient(ellipse 30% 70% at var(--vx, 25%) 0%, rgba(108, 209, 250, 0.1), transparent 70%); }
@media (max-width: 760px) {
  .ds-rays { stroke-opacity: 0.07; } .ds-rows { stroke-opacity: 0.08; }
  .ds-light { background: radial-gradient(ellipse 70% 30% at 50% 12%, rgba(108, 209, 250, 0.14), transparent 70%), linear-gradient(180deg, #091420 0%, #0c1a28 var(--hz, 68%), #0a1520 100%); }
}
/* De lichtlijn van de horizon blijft in de kolom van Orbit en loopt nooit door de tekst van de stappen. */
@media (min-width: 761px) {
  .ds-horizon { -webkit-mask: linear-gradient(90deg, #000 calc(var(--vx, 25%) + 120px), transparent calc(var(--vx, 25%) + 240px)); mask: linear-gradient(90deg, #000 calc(var(--vx, 25%) + 120px), transparent calc(var(--vx, 25%) + 240px)); }
}
@media (max-width: 760px) { .ds-horizon { background: none; } }
@media (max-width: 760px) {
  .os-shade { opacity: var(--os-in, 1); background: linear-gradient(#0a1622 calc(var(--bar-h) + var(--os-orb) + 76px), rgba(10, 22, 34, 0)); }
}

/* ---------------------------------------- herziening 47: een rustige, vaste achtergrond voor de aanpak --- */
/* Geen ruimte en niets dat meebeweegt: zacht blauw licht in een diepe, maar niet zwarte kamer, met fijne korrel
   en twee grote glazen platen aan de randen. Alleen de ring rond Orbit draait, heel traag. */
.ds-light { background:
  radial-gradient(ellipse 36% 46% at var(--vx, 25%) 52%, rgba(108, 209, 250, 0.2), transparent 70%),
  radial-gradient(ellipse 56% 46% at 88% 6%, rgba(126, 156, 226, 0.2), transparent 70%),
  radial-gradient(ellipse 64% 42% at 62% 104%, rgba(70, 140, 180, 0.2), transparent 70%),
  linear-gradient(160deg, #0d1c2b 0%, #11263a 46%, #0d1d2c 100%); }
/* twee grote glazen platen, schuin, half buiten beeld: rechtsboven en linksonder */
.ds-pane { position: absolute; border-radius: 48px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 60%); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 40px 120px -40px rgba(0, 0, 0, 0.5); }
.ds-pane--a { right: -14vw; top: -18vh; width: 52vw; height: 62vh; transform: rotate(-12deg); }
.ds-pane--b { left: -18vw; bottom: -26vh; width: 46vw; height: 56vh; transform: rotate(-12deg); background: linear-gradient(160deg, rgba(108, 209, 250, 0.05), rgba(255, 255, 255, 0.01) 60%); }
/* fijne korrel, zodat het vlak niet plastic aanvoelt */
.ds-grain { position: absolute; inset: 0; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* het licht onder Orbit blijft, als een zachte gloed waar hij boven zweeft */
.os-orb::after { background: radial-gradient(closest-side, rgba(108, 209, 250, 0.26), rgba(108, 209, 250, 0.06) 60%, transparent); }
@media (max-width: 760px) {
  .ds-light { background: radial-gradient(ellipse 80% 30% at 50% 10%, rgba(108, 209, 250, 0.18), transparent 70%), radial-gradient(ellipse 90% 40% at 70% 100%, rgba(70, 140, 180, 0.2), transparent 70%), linear-gradient(170deg, #0d1c2b 0%, #11263a 50%, #0d1d2c 100%); }
  .ds-pane--a { right: -40vw; top: -10vh; width: 90vw; height: 40vh; }
  .ds-pane--b { left: -50vw; bottom: -14vh; width: 100vw; height: 36vh; }
  .os-shade { background: linear-gradient(#0e1f30 calc(var(--bar-h) + var(--os-orb) + 76px), rgba(14, 31, 48, 0)); }
}
/* De platen liggen verder in de hoeken en hebben zachtere randen, zodat ze niet door de koppen of onder Orbit lopen. */
.ds-pane { border-color: rgba(255, 255, 255, 0.045); background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008) 60%); }
.ds-pane--a { top: -40vh; height: 62vh; }
.ds-pane--b { bottom: -38vh; background: linear-gradient(160deg, rgba(108, 209, 250, 0.045), rgba(255, 255, 255, 0.008) 60%); }
@media (max-width: 760px) { .ds-pane--a { top: -22vh; } .ds-pane--b { bottom: -24vh; } }

/* ---------------------------------------- herziening 48: de video op de plek van het scrollverhaal, en weer donker --- */
/* Het podium achter de video: donker, met alleen een zachte gloed achter de video en de ring eromheen. */
.ds-pane { display: none; }
.ds-grain { opacity: 0.05; }
.ds-light { background:
  radial-gradient(ellipse 46% 40% at var(--vx, 50%) var(--vy, 55%), rgba(108, 209, 250, 0.13), transparent 70%),
  radial-gradient(ellipse 70% 30% at var(--vx, 50%) calc(var(--vy, 55%) + 34vh), rgba(46, 120, 190, 0.1), transparent 70%),
  linear-gradient(180deg, #070b10 0%, #080d13 50%, #070a0f 100%); }
@media (max-width: 760px) { .ds-light { background: radial-gradient(ellipse 90% 30% at 50% var(--vy, 55%), rgba(108, 209, 250, 0.12), transparent 70%), linear-gradient(180deg, #070b10, #080d13 50%, #070a0f); } }

.vid { position: relative; z-index: 2; padding: clamp(110px, 16vh, 180px) 0 clamp(90px, 14vh, 160px); }
.vid-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.vid-stage { width: min(calc(100% - 2 * var(--gutter)), 66rem); margin: clamp(32px, 5vh, 56px) auto 0; }
.vid-frame { position: relative; aspect-ratio: 832 / 464; border-radius: 26px; overflow: hidden; background: #05080c; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), 0 50px 120px -40px rgba(0, 0, 0, 0.95), 0 0 90px -24px rgba(108, 209, 250, 0.3); }
.vid-video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* grote afspeelknop zolang de video stilstaat (bij minder beweging of na pauze) */
.vid-big { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; color: var(--ink); cursor: pointer; background: rgba(8, 14, 22, 0.62); border: 1px solid rgba(108, 209, 250, 0.55); box-shadow: 0 0 40px -6px rgba(108, 209, 250, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.2s var(--ease); }
.vid-big svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; stroke: none; }
.vid-frame:not(.is-playing) .vid-big { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .vid-big:hover { transform: scale(1.06); } }
/* kleine glazen knoppen rechtsonder: pauze en geluid */
.vid-ctrl { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 8px; }
.vid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; background: rgba(8, 14, 22, 0.66); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.vid-btn svg { width: 18px; height: 18px; }
.vid-btn .i-play, .vid-btn .i-on { display: none; }
.vid-btn .i-play { fill: currentColor; stroke: none; }
.vid-frame:not(.is-playing) .vid-btn .i-play { display: block; }
.vid-frame:not(.is-playing) .vid-btn .i-pause { display: none; }
.vid-btn--sound[aria-pressed="true"] .i-on { display: block; }
.vid-btn--sound[aria-pressed="true"] .i-off { display: none; }
@media (hover: hover) and (pointer: fine) { .vid-btn:hover { color: var(--cyan); border-color: rgba(108, 209, 250, 0.6); } }
.vid-btn:focus-visible, .vid-big:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vid-foot { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px var(--gutter) 0; color: var(--soft); font-size: clamp(15px, 1.2vw, 17px); text-align: center; }
.vid-ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(108, 209, 250, 0.12); border: 1px solid rgba(108, 209, 250, 0.5); }
.vid-ok svg { width: 13px; height: 13px; fill: none; stroke: var(--cyan); stroke-width: 2; }
@media (max-width: 760px) {
  .vid { padding: 90px 0 80px; }
  .vid-frame { border-radius: 16px; }
  .vid-ctrl { right: 8px; bottom: 8px; gap: 6px; }
  .vid-btn { height: 36px; min-width: 36px; padding: 0 11px; font-size: 12px; }
  .vid-btn svg { width: 16px; height: 16px; }
  .vid-big { width: 60px; height: 60px; }
  .vid-foot { font-size: 14px; align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .vid-big, .vid-btn { transition: none; } }
.vid-frame:fullscreen { border-radius: 0; border: 0; background: #000; }
.vid-frame:fullscreen .vid-video { object-fit: contain; }
/* De video past samen met de kop en de zin eronder in één scherm. */
.vid-stage { width: min(calc(100% - 2 * var(--gutter)), 66rem, calc((100vh - 330px) * 1.793)); width: min(calc(100% - 2 * var(--gutter)), 66rem, calc((100svh - 330px) * 1.793)); }
@media (max-width: 760px) { .vid-stage { width: calc(100% - 2 * var(--gutter)); } }
/* De drie regels: onzichtbaar maar wel voorgelezen; zichtbaar bij minder beweging, als de video stilstaat. */
.vid-steps { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; list-style: none; }
@media (prefers-reduced-motion: reduce) {
  .vid-steps { position: static; width: auto; height: auto; margin: 18px auto 0; overflow: visible; clip: auto; white-space: normal; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 var(--gutter); }
  .vid-steps li { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 600; background: rgba(7, 13, 21, 0.6); border: 1px solid rgba(108, 209, 250, 0.28); }
  .vid-steps b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cyan); font-size: 13px; background: rgba(108, 209, 250, 0.1); }
}
/* Telefoon: alleen pictogrammen, zodat de knoppen weinig van de kleine video afdekken. De tekst blijft voor schermlezers. */
@media (max-width: 760px) {
  .vid-btn--sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vid-btn { width: 34px; min-width: 34px; height: 34px; padding: 0; background: rgba(8, 14, 22, 0.55); }
  .vid-ctrl { right: 7px; bottom: 7px; gap: 5px; }
}

/* ---------------------------------------- herziening 49: de video zoals bij Mathew, met de hoofdknop eronder --- */
/* De kaart: een glazen lijst om het beeld, die zacht naar de muis kantelt. */
.vid { padding-bottom: clamp(70px, 11vh, 120px); }
.vid-stage { width: min(calc(100% - 2 * var(--gutter)), 56rem, calc((100vh - 360px) * 1.793)); width: min(calc(100% - 2 * var(--gutter)), 56rem, calc((100svh - 360px) * 1.793)); }
.vid-tilt { --rx: 0deg; --ry: 0deg; perspective: 900px; }
.vid-frame { position: relative; display: block; width: 100%; aspect-ratio: auto; padding: 6px; border-radius: 28px; cursor: pointer; font: inherit; color: inherit; overflow: visible; background: linear-gradient(172deg, rgba(30, 44, 60, 0.9), rgba(9, 15, 23, 0.96)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 90px -36px rgba(0, 0, 0, 0.95), 0 0 80px -28px rgba(108, 209, 250, 0.32); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.5s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.vid-tilt:hover .vid-frame { transition: transform 0.13s ease-out, border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); border-color: rgba(108, 209, 250, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 46px 100px -36px rgba(0, 0, 0, 0.95), 0 0 100px -24px rgba(108, 209, 250, 0.45); }
.vid-frame:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.vid-screen { position: relative; display: block; aspect-ratio: 832 / 464; border-radius: 22px; overflow: hidden; background: #05080c; }
.vid-poster, .vid-screen .vid-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Het voorbeeld komt zacht op over het stilstaande beeld, zodat het niet ineens begint. */
.vid-screen .vid-video { opacity: 0; transition: opacity 1s var(--ease); }
.vid-frame.is-playing .vid-video { opacity: 1; }
/* De zachte waas onderin en de afspeelknop: altijd zichtbaar, zodat je ziet dat dit een voorbeeld is en je kunt klikken. */
.vid-fade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 8, 13, 0.62), rgba(4, 8, 13, 0.12) 46%, rgba(4, 8, 13, 0.04)); transition: opacity 0.4s var(--ease); }
.vid-frame:hover .vid-fade { opacity: 0.7; }
.vid-big { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; color: #06131f; background: rgba(237, 243, 251, 0.94); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.7), 0 0 0 8px rgba(237, 243, 251, 0.12); opacity: 1; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.vid-big svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; stroke: none; }
.vid-frame:hover .vid-big { transform: scale(1.08); }
.vid-len { position: absolute; right: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; color: rgba(237, 243, 251, 0.92); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(4, 8, 13, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vid-cap { margin: 18px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; text-align: center; }
/* De hoofdknop onder de video, met één zin die je ook zonder de video snapt. */
.vid-cta { display: grid; justify-items: center; gap: 4px; margin: clamp(30px, 5vh, 52px) var(--gutter) 0; text-align: center; }
.vid-say { margin: 0 0 18px; color: var(--ink); font-size: clamp(22px, 2.1vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; }
.vid-say span { color: var(--soft); font-weight: 600; }
.vid-cta .hero-hint { margin-top: 12px; }
.vid-foot { display: none; }
/* de oude knoppen van versie 48 zijn weg */
.vid-ctrl { display: none; }

/* De speler: groot over de pagina, met een donkere achtergrond. */
.vid-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); opacity: 0; transition: opacity 0.26s var(--ease); }
.vid-modal.is-open { opacity: 1; }
.vid-modal[hidden] { display: none; }
.vm-backdrop { position: absolute; inset: 0; background: rgba(3, 6, 10, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vm-box { position: relative; width: min(100%, 72rem, calc((100vh - 200px) * 1.793)); width: min(100%, 72rem, calc((100svh - 200px) * 1.793)); transform: translate3d(0, 14px, 0) scale(0.98); transition: transform 0.3s var(--ease); }
.vid-modal.is-open .vm-box { transform: none; }
.vm-close { position: absolute; right: -6px; top: -56px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.vm-close svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .vm-close:hover { background: rgba(255, 255, 255, 0.16); } }
.vm-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vm-screen { aspect-ratio: 832 / 464; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95); }
.vm-video { display: block; width: 100%; height: 100%; background: #000; }
.vm-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 20px; }
.vm-title { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; }
.vm-sub { margin: 6px 0 0; color: var(--soft); font-size: 14px; }
.vm-act { display: grid; justify-items: end; gap: 8px; flex: none; }
.vm-act .btn-amber { margin: 0; }
.vm-act span { color: var(--muted); font-size: 12.5px; }
html.vm-open, html.vm-open body { overflow: hidden; }
@media (max-width: 760px) {
  .vid-stage { width: calc(100% - 2 * var(--gutter)); }
  .vid-frame { padding: 4px; border-radius: 18px; }
  .vid-screen { border-radius: 14px; }
  .vid-big { width: 60px; height: 60px; } .vid-big svg { width: 24px; height: 24px; }
  .vid-len { right: 9px; bottom: 9px; font-size: 10px; padding: 4px 9px; }
  .vid-say { font-size: 22px; }
  .vm-box { width: 100%; }
  .vm-close { top: -54px; right: 0; }
  .vm-screen { border-radius: 12px; }
  .vm-foot { flex-direction: column; }
  .vm-act { justify-items: stretch; width: 100%; } .vm-act .btn-amber { justify-content: center; } .vm-act span { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .vid-frame, .vid-screen .vid-video, .vid-big, .vid-modal, .vm-box { transition: none; }
}
.vid-modal { z-index: 2147483000; }
/* herziening 50: zonder het bijschrift onder de video; de vraag bij de knop staat groot. */
.vid-cta { margin-top: clamp(34px, 5.5vh, 56px); }
.vid-say { margin-bottom: 20px; font-size: clamp(24px, 2.4vw, 36px); }
@media (max-width: 760px) { .vid-say { font-size: 24px; } .vid-head .h2 { font-size: clamp(28px, 8vw, 36px); } }

/* ---------------------------------------- herziening 52: het slot kort en rustig, de knop "Plan een gesprek" --- */
/* Eén kop, één zin en één glazen formulierregel in het midden, boven de aarde. */
.slot { min-height: clamp(760px, 128vh, 1240px); padding-top: calc(var(--bar-h) + clamp(60px, 12vh, 140px)); }
.slot-grid { grid-template-columns: 1fr; justify-items: center; gap: clamp(26px, 4vh, 40px); text-align: center; }
.slot-left { display: grid; justify-items: center; gap: 14px; }
.slot-title { font-size: clamp(44px, 6vw, 104px); line-height: 1; }
.slot-sub { margin: 4px 0 0; max-width: 34rem; font-size: clamp(17px, 1.35vw, 21px); }
.slot-next, .slot-av { display: none; }
/* het formulier: een glazen pil met twee velden en de knop */
.composer { grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 6px; width: min(100%, 46rem); padding: 7px; border-radius: 999px; }
.cp-field { display: block; min-width: 0; }
.cp-field input { width: 100%; height: 52px; padding: 0 20px; border-radius: 999px; color: var(--ink); font: inherit; font-size: 15.5px; background: rgba(4, 9, 15, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.cp-field input::placeholder { color: #71849a; }
.cp-field input:focus-visible { outline: none; border-color: rgba(108, 209, 250, 0.7); box-shadow: 0 0 0 3px rgba(108, 209, 250, 0.16); }
.composer .btn-amber { margin: 0; height: 52px; white-space: nowrap; }
.slot-fine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; margin: -10px 0 0; text-align: center; }
.slot-fine .link-cyan { min-height: 36px; font-size: 12.5px; }
.pin-card .pin-title { margin-bottom: 0; font-size: clamp(16px, 1.3vw, 19px); }
@media (max-width: 760px) {
  .slot { min-height: 0; padding-top: calc(var(--bar-h) + 56px); }
  .slot-title { font-size: clamp(40px, 12vw, 56px); }
  .composer { grid-auto-flow: row; grid-template-columns: 1fr; gap: 8px; padding: 10px; border-radius: 26px; }
  .cp-field input { height: 50px; }
  .composer .btn-amber { justify-content: center; width: 100%; }
}
.slot-sub { max-width: 40rem; text-wrap: balance; }

/* ---------------------------------------- herziening 53: "Plan een gesprek" zonder invulvelden, twee richtingen --- */
/* ?slot=a (standaard): Uitnodiging. ?slot=b: Gesprekskaart. De speld en de kaart bij Nederland zijn weg. */
.pin, .pin-card { display: none !important; }
html[data-slot="A"] .sl-b, html[data-slot="B"] .sl-a, html:not([data-slot]) .sl-b { display: none; }
.slot-grid { display: block; text-align: left; }

/* A · Uitnodiging */
.sl-a { display: grid; justify-items: center; gap: 16px; text-align: center; }
.sl-a .slot-title { font-size: clamp(48px, 6.6vw, 112px); }
.sl-a .slot-sub { margin-top: 2px; max-width: 40rem; }
.sl-go { margin-top: clamp(14px, 2.4vh, 24px); height: 64px; padding: 0 10px 0 30px; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 48px -12px rgba(246, 190, 80, 0.75), 0 0 0 8px rgba(255, 208, 120, 0.08); }
.sl-go .btn-dot { width: 46px; height: 46px; }
.sl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.sl-chips li { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 7px; border-radius: 999px; color: var(--soft); font-size: 14px; font-weight: 600; background: rgba(7, 13, 21, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sl-chips li span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(108, 209, 250, 0.1); }
.sl-chips svg, .slb-list svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sl-fine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; margin: 2px 0 0; }
.sl-fine .link-cyan, .slb-mail .link-cyan { min-height: 36px; font-size: 12.5px; }

/* B · Gesprekskaart */
.sl-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(32px, 6vw, 96px); align-items: center; }
.slb-copy { display: grid; justify-items: start; gap: 14px; }
.sl-b .slot-title { font-size: clamp(48px, 6.4vw, 112px); line-height: 0.95; }
.sl-b .slot-sub { margin-top: 6px; max-width: 30rem; }
.slb-card { position: relative; display: grid; gap: 18px; padding: clamp(22px, 2.2vw, 30px); border-radius: 30px; background: linear-gradient(172deg, rgba(22, 34, 48, 0.88), rgba(7, 13, 21, 0.94)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: var(--glass-rim), 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 90px -30px rgba(108, 209, 250, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.slb-card::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(108, 209, 250, 0.75), transparent); }
.slb-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.slb-orb { width: 54px; height: 54px; flex: none; border-radius: 50%; filter: drop-shadow(0 0 14px rgba(108, 209, 250, 0.5)); }
.slb-head span { display: grid; gap: 2px; }
.slb-head b { color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.slb-head small { color: var(--muted); font-size: 13.5px; }
.slb-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.slb-list li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 15.5px; font-weight: 600; }
.slb-list li span { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(108, 209, 250, 0.1); border: 1px solid rgba(108, 209, 250, 0.3); }
.slb-go { justify-content: space-between; margin: 4px 0 0; height: 58px; padding-left: 24px; font-size: 17px; }
.slb-fine { margin: -8px 0 0; text-align: center; }
.slb-mail { margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 900px) {
  .sl-b { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .sl-go { width: 100%; justify-content: space-between; height: 58px; padding-left: 22px; font-size: 17px; }
  .sl-chips { gap: 8px; }
  .sl-chips li { height: 36px; font-size: 13px; }
  .slb-copy { justify-items: center; text-align: center; }
  .slb-list li { font-size: 14.5px; }
}

/* ---------------------------------------- herziening 55: korte zin, sprong naar contact, video kantelt naar je toe --- */
/* Het doek voor de sprong naar een stuk: kort donker, dan staat de pagina op de goede plek. */
.veil { position: fixed; inset: 0; z-index: 2147482000; background: var(--sc-canvas); opacity: 0; pointer-events: none; transition: opacity 0.26s var(--ease); }
.veil.on { opacity: 1; }
/* De video is groter als hij rechtop staat. */
.vid-stage { width: min(calc(100% - 2 * var(--gutter)), 70rem, calc((100vh - 140px) * 1.793)); width: min(calc(100% - 2 * var(--gutter)), 70rem, calc((100svh - 140px) * 1.793)); }
.vid-tilt { transform-origin: 50% 50%; will-change: transform; }
.vid-head { margin-bottom: clamp(0px, 2vh, 20px); }
@media (max-width: 760px) { .vid-stage { width: calc(100% - 2 * var(--gutter)); } }
.hero-sub { text-wrap: balance; }

/* ---------------------------------------- herziening 56: nieuwe balk met het R-logo, geen "Plan een gesprek" buiten Contact --- */
/* De balk: links de R met de naam, rechts de onderdelen van de pagina. Het onderdeel waar je bent, licht op. */
.bar { grid-template-columns: auto 1fr; }
.bar-brand { gap: 10px; }
.mark-r { width: 30px; height: auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(108, 209, 250, 0.35)); }
.foot-brand .mark-r { width: 38px; }
.brand-word { font-size: 17px; }
.bar-links { justify-self: end; gap: 2px; }
.bar-links a { position: relative; min-height: 40px; padding: 0 14px; color: var(--soft); }
.bar-links a[aria-current] { color: var(--ink); background: rgba(108, 209, 250, 0.1); }
.bar-links a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(108, 209, 250, 0.9); }
.bar-links .bar-contact { margin-left: 6px; color: var(--ink); border: 1px solid rgba(108, 209, 250, 0.4); background: rgba(108, 209, 250, 0.06); }
@media (hover: hover) and (pointer: fine) { .bar-links .bar-contact:hover { border-color: rgba(108, 209, 250, 0.75); background: rgba(108, 209, 250, 0.12); } }
.bar-links .bar-contact[aria-current]::after { display: none; }
.bar-cta { display: none; }
.sheet .sheet-cta { color: var(--cyan); border-color: rgba(108, 209, 250, 0.4); }
@media (max-width: 760px) {
  .mark-r { width: 26px; }
  .bar { grid-template-columns: auto 1fr auto; }
}

/* Hero: een glazen knop om te kijken hoe het werkt, in plaats van "Plan een gesprek". */
.btn-glass { display: inline-flex; align-items: center; gap: 12px; height: 56px; margin-top: clamp(14px, 2.6vh, 26px); padding: 0 20px 0 8px; border-radius: 999px; color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none; background: linear-gradient(172deg, rgba(30, 44, 60, 0.75), rgba(9, 15, 23, 0.85)); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 44px -20px rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.bg-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #06131f; background: var(--ink); box-shadow: 0 0 0 6px rgba(237, 243, 251, 0.1); }
.bg-play svg { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; stroke: none; }
.bg-len { padding: 3px 9px; border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover { border-color: rgba(108, 209, 250, 0.6); transform: translateY(-1px); } }
.btn-glass:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.hero .hero-hint { display: none; }

/* De video: geen knop eronder; wat ruimte tot de resultaten. */
.vid { padding-bottom: clamp(60px, 10vh, 120px); }
.vm-foot { justify-content: center; }

/* Resultaten: drie plekken voor echte reviews. Werkversie, met een duidelijk label. */
.rv { position: relative; z-index: 2; padding: clamp(70px, 11vh, 130px) 0 clamp(60px, 9vh, 110px); }
.rv-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.rv-flag { display: inline-flex; align-items: center; gap: 9px; margin: 4px 0 0; padding: 7px 14px; border-radius: 999px; color: var(--amber); font-size: 13px; font-weight: 600; border: 1px dashed rgba(255, 208, 120, 0.55); background: rgba(255, 208, 120, 0.05); }
.rv-flag span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(32px, 5vh, 52px); }
.rv-card { position: relative; display: grid; gap: 18px; margin: 0; padding: 26px 24px 22px; border-radius: 24px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--glass-rim), var(--glass-shadow); }
.rv-q { position: absolute; right: 20px; top: 6px; color: rgba(108, 209, 250, 0.35); font-size: 72px; font-weight: 700; line-height: 1; }
.rv-text { display: grid; gap: 10px; margin: 0; padding-top: 10px; }
.rv-l { display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); }
.rv-l--s { width: 62%; }
.rv-who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.rv-av { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.03); }
.rv-who span:last-child { display: grid; gap: 2px; }
.rv-who b { color: var(--soft); font-size: 14.5px; }
.rv-who small { color: var(--dim); font-size: 12.5px; }
@media (max-width: 900px) { .rv-grid { grid-template-columns: 1fr; max-width: 30rem; margin-left: auto; margin-right: auto; } }

/* ---------------------------------------- herziening 57: "Wij gebruiken Orbit zelf" met Brand Evolves en mathewgroen.com --- */
.pk-sub { margin: 0; max-width: 34rem; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); }
.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 64rem; margin-top: clamp(30px, 5vh, 52px); }
.pk-card { position: relative; display: grid; align-content: start; gap: 18px; margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: 28px; background: var(--glass-core); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: var(--glass-rim), var(--glass-shadow); }
.pk-card::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(108, 209, 250, 0.6), transparent); }
.pk-co { display: flex; align-items: center; gap: 14px; }
.pk-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgba(108, 209, 250, 0.1); border: 1px solid rgba(108, 209, 250, 0.35); }
.pk-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pk-co span:last-child { display: grid; gap: 2px; }
.pk-co b { color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.pk-co small { color: var(--muted); font-size: 13.5px; }
.pk-quote { margin: 0; }
.pk-quote p { margin: 0; color: var(--ink); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.5; }
.pk-quote p::before { content: "“"; color: var(--cyan); }
.pk-quote p::after { content: "”"; color: var(--cyan); }
.pk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pk-chips em { margin-right: 4px; color: var(--dim); font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pk-chips i { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--soft); background: rgba(108, 209, 250, 0.06); border: 1px solid rgba(108, 209, 250, 0.26); }
.pk-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--hair); }
.pk-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); font-size: 12px; font-weight: 800; background: linear-gradient(170deg, #1b2c40, #0b131d); border: 1px solid rgba(137, 208, 255, 0.4); }
.pk-who span:last-child { display: grid; gap: 1px; }
.pk-who b { color: var(--ink); font-size: 15px; }
.pk-who small { color: var(--muted); font-size: 12.5px; }
.pk-draft { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; color: var(--amber); font-size: 11.5px; font-weight: 600; border: 1px dashed rgba(255, 208, 120, 0.5); }
.rv-flag, .rv-grid { display: none; }
@media (max-width: 860px) { .pk-grid { grid-template-columns: 1fr; max-width: 34rem; margin-left: auto; margin-right: auto; } }

/* ---------------------------------------- herziening 58: de Orbit-cirkel als afsluiter --- */
/* Een grote cirkel met lichtende bogen, een stippelrand en een schuine baan; in het midden de gloed van de orb en de
   uitnodiging. --p loopt bij het scrollen van 0 (alleen de orb) naar 1 (de volle cirkel). */
.slot { padding-top: calc(var(--bar-h) + clamp(30px, 6vh, 70px)); }
.oc { --p: 0; --W: min(84vw, 620px, calc(100svh - 230px)); position: relative; z-index: 2; display: grid; place-items: center; width: var(--W); aspect-ratio: 1; margin: 0 auto; }
.oc::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; opacity: var(--p); background: radial-gradient(circle at 50% 46%, rgba(108, 209, 250, 0.2), rgba(47, 127, 214, 0.1) 42%, rgba(8, 14, 22, 0.55) 70%, transparent 72%); }
.oc-ring { position: absolute; inset: 0; pointer-events: none; }
.oc-arcs { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; overflow: visible; transform: scale(calc(0.55 + 0.45 * var(--p))); opacity: calc(0.35 + 0.65 * var(--p)); }
.oc-dots { fill: none; stroke: rgba(237, 243, 251, 0.22); stroke-width: 1.4; stroke-dasharray: 1 8; stroke-linecap: round; opacity: var(--p); }
.oc-spin { transform: rotate(-90deg); animation: oc-spin 90s linear infinite; }
.oc-spin--rev { animation-duration: 140s; animation-direction: reverse; }
@keyframes oc-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.oc-arc { fill: none; stroke: var(--cyan); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(108, 209, 250, 0.85)); }
.oc-arc--a { stroke-dasharray: calc(var(--p) * 20 + 2) 100; stroke-dashoffset: -2; stroke: #bfeaff; }
.oc-arc--b { stroke-dasharray: calc(var(--p) * 7 + 1) 100; stroke-dashoffset: -29; stroke-width: 1.8; opacity: 0.8; }
.oc-arc--c { stroke-dasharray: calc(var(--p) * 30 + 3) 100; stroke-dashoffset: -50; stroke-width: 3.6; stroke: #6cd1fa; filter: drop-shadow(0 0 9px rgba(108, 209, 250, 0.95)); }
.oc-arc--d { stroke-dasharray: calc(var(--p) * 15 + 1) 100; stroke-dashoffset: -63; stroke: #3d8de0; stroke-width: 2.2; }
.oc-arc--e { stroke-dasharray: calc(var(--p) * 5 + 0.5) 100; stroke-dashoffset: -12; stroke: #8fcdea; stroke-width: 2; }
/* de schuine baan, zoals de ring van een planeet: alleen links en rechts zichtbaar */
.oc-orbit { position: absolute; left: -26%; top: 31%; width: 152%; height: auto; overflow: visible; transform: rotate(-11deg); opacity: calc(var(--p) * var(--p)); }
.oc-ell { fill: none; stroke: rgba(108, 209, 250, 0.5); stroke-width: 1.6; stroke-dasharray: 12 26 24 26 12 0; filter: drop-shadow(0 0 4px rgba(108, 209, 250, 0.5)); }
/* de orb: eerst groot in beeld, daarna de gloed achter de tekst */
.oc-orb { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; transform: scale(calc(1 + 0.35 * var(--p))); opacity: calc(1 - 0.84 * var(--p)); }
/* de uitnodiging in het midden */
.oc-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(10px, 1.8vh, 18px); text-align: center; opacity: clamp(0, calc((var(--p) - 0.5) * 2.4), 1); transform: translate3d(0, calc((1 - var(--p)) * 26px), 0); }
.oc-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--amber-eyebrow); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.oc-eyebrow i { width: 30px; height: 1px; background: currentColor; opacity: 0.7; }
.oc-title { margin: 0; color: var(--ink); font-size: clamp(38px, calc(var(--W) * 0.11), 70px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
.oc-title span { display: block; color: #9fe0fb; }
.oc-go { margin-top: 6px; height: 58px; padding: 0 8px 0 26px; font-size: 17px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 18px 48px -12px rgba(246, 190, 80, 0.75), 0 0 0 8px rgba(255, 208, 120, 0.08); }
.oc-under { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; margin: clamp(10px, 2vh, 24px) var(--gutter) 0; text-align: center; opacity: clamp(0, calc((var(--p, 1) - 0.6) * 2.5), 1); }
.oc-sub { margin: 0; max-width: 36rem; color: var(--soft); font-size: clamp(16px, 1.3vw, 19px); }
.oc-fine { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 12px; margin: 0; }
.oc-fine .link-cyan { min-height: 36px; font-size: 12.5px; }
@media (max-width: 760px) {
  .oc { --W: min(94vw, 420px); }
  .oc-title { font-size: clamp(32px, 10vw, 44px); }
  .oc-eyebrow { font-size: 10.5px; letter-spacing: 0.24em; }
  .oc-eyebrow i { width: 18px; }
  .oc-go { height: 50px; padding-left: 20px; font-size: 15.5px; }
  .oc-go .btn-dot { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .oc-spin { animation: none; } }
.oc-ell { stroke-dasharray: none; }
.oc-ell--l { stroke: rgba(108, 209, 250, 0.32); }
.oc-orbit, .oc-arcs { max-width: none; }
/* De balk heeft op elke breedte een weg naar de onderdelen: links tot 900 px breed, daaronder het menu. */
@media (max-width: 1100px) and (min-width: 901px) { .bar-links { display: flex; } .bar-links a { padding: 0 11px; font-size: 13.5px; } }
@media (max-width: 900px) { .bar-links { display: none; } .bar-menu { display: inline-flex; } .bar { grid-template-columns: auto 1fr auto; } }

/* ---------------------------------------- herziening 59: inzoomen in de orb, tekst in het midden, nettere afspeelknop --- */
/* --z de grootte van de orb, --o zijn zichtbaarheid, --a de cirkel, --t de tekst. */
.oc { --z: 1; --o: 1; --a: 0; --t: 0; }
.oc::before { opacity: var(--a); }
.oc-arcs { left: -4%; top: -4%; width: 108%; height: 108%; max-width: none; transform: scale(calc(0.62 + 0.38 * var(--a))); opacity: var(--a); }
.oc-dots { opacity: var(--a); }
.oc-arc--a { stroke-dasharray: calc(var(--a) * 20 + 0.01) 100; }
.oc-arc--b { stroke-dasharray: calc(var(--a) * 7 + 0.01) 100; }
.oc-arc--c { stroke-dasharray: calc(var(--a) * 30 + 0.01) 100; }
.oc-arc--d { stroke-dasharray: calc(var(--a) * 15 + 0.01) 100; }
.oc-arc--e { stroke-dasharray: calc(var(--a) * 5 + 0.01) 100; }
.oc-orbit { max-width: none; opacity: calc(var(--a) * var(--a)); }
/* Bol rendert groot (120% i.p.v. 46%) en begint verkleind: scherp tijdens het inzoomen. */
.oc-orb { width: 120%; transform: scale(calc(var(--z) * 0.3833)); opacity: var(--o); will-change: transform, opacity; }
.oc-in { opacity: var(--t); transform: scale(calc(0.92 + 0.08 * var(--t))); }
.oc-under { opacity: var(--t, 1); }
@media (prefers-reduced-motion: reduce) { .oc-orb { display: none; } }

/* In de praktijk: één korte regel onder de kaarten. */
.pk-note { margin: clamp(18px, 3vh, 28px) var(--gutter) 0; color: var(--muted); font-size: 13.5px; text-align: center; }

/* De afspeelknop in de hero: een glazen pil met een lichtend rond knopje, ruim binnen de rand. */
.btn-glass { gap: 14px; height: 58px; padding: 0 24px 0 9px; }
.bg-play { position: relative; width: 40px; height: 40px; color: #06131f; background: radial-gradient(circle at 34% 28%, #ffffff 0%, #dff4fe 45%, #9fdcf7 100%); box-shadow: inset 0 -2px 5px rgba(6, 19, 31, 0.18), 0 0 18px -2px rgba(108, 209, 250, 0.65); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.bg-play svg { width: 15px; height: 15px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { .btn-glass:hover .bg-play { transform: scale(1.08); box-shadow: inset 0 -2px 5px rgba(6, 19, 31, 0.18), 0 0 26px 0 rgba(108, 209, 250, 0.85); } }
.bg-len { display: none; }
/* De groeiende orb mag boven het contactstuk uitsteken; de aarde blijft binnen het stuk. */
.slot { overflow-x: clip; overflow-y: visible; }
.slot-earth { overflow: clip; }
/* De ringen van de orb raken de rand van zijn vlak; een zachte rand voorkomt een rechte snede als hij groot wordt. */
.oc-orb { -webkit-mask: radial-gradient(closest-side, #000 76%, transparent 99%); mask: radial-gradient(closest-side, #000 76%, transparent 99%); }

/* De balk zoals op Luciano's site: plat over de hele breedte, logo links, onderdelen in het midden, rechts de knop. */
.bar { inset: 0 0 auto 0; height: 72px; padding: 0 var(--gutter); border-radius: 0; grid-template-columns: 1fr auto 1fr; gap: 24px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: linear-gradient(180deg, rgba(5, 8, 12, 0.82), rgba(5, 8, 12, 0.6)); box-shadow: none; -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
.bar.is-glass { background: rgba(5, 8, 12, 0.88); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9); }
.bar::before { content: ""; position: absolute; left: 50%; top: 0; width: min(46rem, 60vw); height: 100%; translate: -50% 0; z-index: -1; background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(108, 209, 250, 0.06), transparent 70%); pointer-events: none; }
:root { --bar-h: 72px; }
.bar-brand { justify-self: start; }
.mark-r { width: 32px; }
.brand-word { font-size: 18px; }
.bar-links { justify-self: center; align-items: center; gap: 4px; padding: 0; background: none; }
.bar-links a { min-height: 40px; padding: 0 13px; border-radius: 10px; color: rgba(201, 214, 227, 0.8); font-size: 14.5px; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .bar-links a:hover { color: var(--ink); background: none; } }
.bar-links a[aria-current] { color: var(--ink); background: none; }
.bar-links a[aria-current]::after { bottom: 3px; }
.bar-links .bar-contact { display: none; }
/* NL / EN */
.lang { display: inline-flex; align-items: center; gap: 4px; margin-left: 14px; }
.lang button { min-width: 32px; min-height: 40px; padding: 0 4px; border: 0; background: none; color: var(--dim); font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: color 0.2s var(--ease); }
.lang button[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lang button:hover { color: var(--soft); } .lang button[aria-pressed="true"]:hover { color: var(--ink); } }
.lang button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.lang span { color: var(--dim); font-size: 13px; }
/* rechts de knop: amber omlijnd, met een amber bolletje */
.bar-cta { display: inline-flex; justify-self: end; align-items: center; gap: 12px; height: 46px; padding: 0 6px 0 18px; border-radius: 14px; color: var(--amber); font-size: 14.5px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid rgba(255, 208, 120, 0.5); background: linear-gradient(180deg, rgba(255, 208, 120, 0.1), rgba(255, 208, 120, 0.03)); box-shadow: 0 0 24px -10px rgba(255, 208, 120, 0.6); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
.bar-cta-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--amber-ink); background: linear-gradient(180deg, #ffe4a6, #f7c35c 70%, #efb64a); }
.bar-cta-dot svg { width: 16px; height: 16px; padding: 0; background: none; }
@media (hover: hover) and (pointer: fine) { .bar-cta:hover { border-color: rgba(255, 208, 120, 0.85); background: rgba(255, 208, 120, 0.12); } }
.bar-cta:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sheet { inset: calc(var(--bar-h) + 6px) var(--gutter) auto; }
.lang--sheet { justify-content: center; margin: 8px 0 2px; }
@media (max-width: 1240px) and (min-width: 901px) { .bar-links a { padding: 0 9px; font-size: 13.5px; } .lang { margin-left: 6px; } .bar-cta { padding-left: 14px; font-size: 13.5px; } }
@media (max-width: 1100px) and (min-width: 901px) { .bar { grid-template-columns: auto 1fr auto; } .brand-word span { display: none; } }
@media (max-width: 900px) {
  .bar-links { display: none; }
  .bar { grid-template-columns: auto 1fr auto auto; gap: 10px; }
  .bar-cta { padding: 0 5px 0 14px; height: 42px; font-size: 13.5px; }
  .bar-menu { justify-self: end; }
}
@media (max-width: 560px) {
  :root { --bar-h: 64px; }
  .bar { height: 64px; grid-template-columns: auto 1fr auto; }
  .bar-cta { display: none; }
}

/* ---------------------------------------- herziening 61: blauw lijntje onder de balk, voettekst zoals de balk, geen streepje --- */
/* Het lijntje: licht blauw zoals de rand van de aarde, sterkst in het midden, en het stopt net voor de randen. */
.bar { border-bottom: 0; }
.bar::after, .foot::before { content: ""; position: absolute; left: 2.5%; right: 2.5%; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(47, 127, 214, 0.45) 9%, rgba(108, 209, 250, 0.8) 32%, rgba(210, 241, 255, 0.95) 50%, rgba(108, 209, 250, 0.8) 68%, rgba(47, 127, 214, 0.45) 91%, transparent); filter: drop-shadow(0 0 3px rgba(108, 209, 250, 0.75)) drop-shadow(0 0 9px rgba(47, 127, 214, 0.45)); }
.bar::after { bottom: -1px; }
.foot::before { top: 0; }
/* "Orbit staat klaar" zonder streepje; de letterafstand rechts compenseren zodat hij echt in het midden staat. */
.oc-eyebrow { padding-left: 0.3em; }
/* De voettekst is dezelfde balk als bovenaan: plat, logo links, onderdelen in het midden, rechts de knop. */
.foot { position: relative; z-index: 2; padding: 0 0 24px; border-top: 0; background: linear-gradient(180deg, rgba(5, 8, 12, 0.6), rgba(5, 8, 12, 0.88)); }
.foot-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 72px; padding: 0 var(--gutter); }
.foot-bar .bar-brand { justify-self: start; }
.foot-links { display: flex; align-items: center; gap: 4px; justify-self: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; color: rgba(201, 214, 227, 0.8); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--ink); } }
.foot-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
.foot-cta { justify-self: end; }
.foot-info { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin: 4px var(--gutter) 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.05); color: var(--dim); font-size: 13px; }
.foot-info > * { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; color: var(--muted); text-decoration: none; }
.foot-info > * + *::before { content: ""; width: 3px; height: 3px; margin-right: 14px; margin-left: -14px; border-radius: 50%; background: var(--dim); translate: -1.5px 0; }
@media (hover: hover) and (pointer: fine) { .foot-info a:hover { color: var(--cyan); } }
.foot-legal { margin: 10px var(--gutter) 0; padding: 0; border-top: 0; text-align: center; }
.foot-legal p { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.55; }
@media (max-width: 1240px) and (min-width: 901px) { .foot-links a { padding: 0 9px; font-size: 13.5px; } .foot-links .lang { margin-left: 6px; } .foot-cta { padding-left: 14px; font-size: 13.5px; } }
@media (max-width: 1100px) and (min-width: 901px) { .foot-bar { grid-template-columns: auto 1fr auto; } .foot-bar .brand-word span { display: none; } }
@media (max-width: 900px) {
  .foot-bar { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding-top: 26px; padding-bottom: 14px; }
  .foot-bar .bar-brand, .foot-cta { justify-self: center; }
  .foot-links { flex-wrap: wrap; justify-content: center; }
  .foot-links .lang { margin-left: 4px; }
  .foot-cta { display: inline-flex; }
}
@media (max-width: 560px) { .foot-links a { padding: 0 9px; font-size: 13.5px; } .foot-info { flex-direction: column; gap: 0; } .foot-info > * + *::before { display: none; } }

/* ---------------------------------------- herziening 62: de oude voettekst-inhoud, in de stijl van de balk --- */
/* Geen afgerond glazen paneel: plat over de hele breedte, dezelfde donkere achtergrond en het blauwe lijntje erboven. */
.foot { padding: clamp(44px, 5vw, 64px) 0 26px; }
.foot-grid { padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.foot-grid::before, .foot-grid::after { display: none; }
.foot-brand p { color: var(--muted); font-size: 14px; }
.foot-col h3 { color: var(--dim); }
.foot-col a { min-height: 34px; color: rgba(201, 214, 227, 0.8); font-size: 14.5px; font-weight: 500; transition: color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover { color: var(--ink); } }
.foot-col a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.foot-col span { color: var(--muted); }
.foot-legal { margin: clamp(32px, 4vw, 44px) auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
/* Zelfde marges als de balk: het logo onderaan staat recht onder het logo bovenaan. */
.foot .wrap { max-width: none; }
.foot-grid { padding: 0 var(--gutter); }
.foot-legal { width: auto; margin-inline: var(--gutter); padding-inline: 0; }

/* ---------------------------------------- herziening 63: de herozin --- */
/* "Jij runt je bedrijf." rustig, "Wij schrijven je posts." licht op: daar zit de opluchting. */
.hero-sub { font-size: clamp(17px, 1.45vw, 21px); }
.hero-sub b { color: var(--ink); font-weight: 600; }
/* herziening 64: wat we doen op regel één, waarvoor op regel twee. */
.hero-sub { max-width: 40rem; }
.hero-sub b { display: block; text-wrap: balance; }

/* ---------------------------------------- herziening 65: "Wij maken het zichtbaar." linksboven, geen voorbeeldlabel --- */
/* Op groot scherm staat de zin linksboven, als kop boven het beeld (Mathew). Op de telefoon blijft hij onderaan,
   want bovenaan draait daar een kaartje langs. */
@media (min-width: 761px) {
  .zicht-cap { top: calc(var(--bar-h) + clamp(24px, 5vh, 56px)); bottom: auto; }
}
/* Ruimte voor de zin: zodra het beeld opengaat, zakt het midden (logo, ringen, kaartjes) 9vh, zodat geen
   rondzwevend kaartje de zin bovenaan raakt. Tijdens "Van jouw kennis ... naar hun feed." staat het logo nog in het midden. */
@media (min-width: 761px) {
  .zicht-stage { --zy: calc(var(--g, 0) * 9vh); }
  .zf-glow, .zf-dots, .zf-hud, .zf-pulse, .zf-core, .zf-card { top: calc(50% + var(--zy, 0px)); }
  .zf-scene { -webkit-mask: linear-gradient(#000 64%, rgba(0, 0, 0, 0.3) 100%); mask: linear-gradient(#000 64%, rgba(0, 0, 0, 0.3) 100%); }
}

/* ---------------------------------------- herziening 66: de herozin wisselt --- */
/* Vijf zinnen op dezelfde plek (grid), zodat de regel nooit verspringt; alleen de actieve is zichtbaar. */
.hero-sub .hero-rot { display: grid; justify-items: center; }
.rot-stack { display: grid; }
.rot-line { grid-area: 1 / 1; visibility: hidden; text-wrap: balance; }
.rot-line.is-on, .rot-line.is-out { visibility: visible; }
/* Binnenkomen: woord voor woord van onder, uit de waas, eerst cyaan en dan wit. */
.rw { display: inline-block; opacity: 0; filter: blur(7px); transform: translate3d(0, 0.5em, 0); color: var(--cyan);
  transition: opacity 0.5s var(--ease), filter 0.6s var(--ease), transform 0.6s var(--ease), color 0.9s var(--ease); }
.rot-line.is-on .rw { opacity: 1; filter: blur(0); transform: none; color: var(--ink);
  transition-delay: calc(0.18s + var(--i) * 55ms), calc(0.18s + var(--i) * 55ms), calc(0.18s + var(--i) * 55ms), calc(0.55s + var(--i) * 55ms); }
/* Weggaan: omhoog en in de waas, sneller dan het binnenkomen. */
.rot-line.is-out .rw { opacity: 0; filter: blur(7px); transform: translate3d(0, -0.45em, 0); color: var(--ink);
  transition-duration: 0.38s; transition-delay: calc(var(--i) * 28ms); }
/* De eerste zin staat er bij het laden gewoon, zonder animatie. */
.rot-line.is-still .rw { transition: none; }
/* herziening 67: rustiger. Wissel elke 6 s (was 3,6 s); binnenkomen en weggaan ongeveer twee keer zo traag. */
.rw { transition-duration: 0.9s, 1.1s, 1.1s, 1.4s; }
.rot-line.is-on .rw { transition-delay: calc(0.35s + var(--i) * 90ms), calc(0.35s + var(--i) * 90ms), calc(0.35s + var(--i) * 90ms), calc(1s + var(--i) * 90ms); }
.rot-line.is-out .rw { transition-duration: 0.7s; transition-delay: calc(var(--i) * 45ms); }

/* Agendavenster van Cal.com ("Plan een gesprek"). Zonder deze regel tekent de browser bij een donker systeemthema
   een wit vlak achter de agenda, omdat het venster en de pagina een ander kleurschema hebben. */
cal-modal-box { color-scheme: light; }

/* ---------------------------------------- herziening 70: inloggen voor klanten, naast de hoofdknop --- */
/* Voor wie al klant is: een rustige cyaan knop naar Orbit (orbit.rizonastudio.com). Amber blijft voor de ene hoofdactie. */
.bar-end { display: inline-flex; justify-self: end; align-items: center; gap: 8px; }
.bar-login { display: inline-flex; align-items: center; height: 46px; padding: 0 16px; border-radius: 14px; color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid rgba(108, 209, 250, 0.3); background: rgba(108, 209, 250, 0.04); transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .bar-login:hover { border-color: rgba(108, 209, 250, 0.65); background: rgba(108, 209, 250, 0.1); } }
.bar-login:active { transform: scale(0.97); }
.bar-login:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sheet .sheet-login { justify-content: space-between; margin-top: 6px; border: 1px solid rgba(108, 209, 250, 0.3); }
.sheet .sheet-login svg { width: 18px; height: 18px; color: var(--cyan); }
@media (max-width: 1240px) and (min-width: 901px) { .bar-login { padding: 0 12px; font-size: 13.5px; } }
@media (max-width: 900px) { .bar-login { height: 42px; padding: 0 12px; font-size: 13.5px; } }
@media (max-width: 560px) { .bar-end { display: none; } }