/* =========================================================================
   Vaia — Next Gen Recruiting · v4 "Electric Blueprint, verdrahtet"
   One system: master grid, two schemes, one panel language, one motion set.
   See DESIGN.md. Order: tokens → base → chrome → scaffold → motion →
   components → schemes → scenes (per slide) → modals → print → breakpoints.
   ========================================================================= */

/* ---------- 1 · Tokens ---------- */
:root {
  --blue: #1300ff;
  --blue-deep: #0a00a8;
  --blue-ink: #0e0bb4;            /* headings-on-paper blue, slightly darkened for contrast */
  --lime: #c6fa02;
  --lime-deep: #a8d600;
  --hot: #ff5c41;
  --paper: #fcfcfd;
  --ink: #101018;
  --ink-2: #3c3c4e;               /* body on paper */
  --ink-3: #6a6a7e;               /* captions */
  --line: rgba(19, 0, 255, 0.16); /* panel border on paper */
  --line-soft: rgba(19, 0, 255, 0.09);
  --wash: rgba(19, 0, 255, 0.05); /* tint surface */
  --wash-2: rgba(19, 0, 255, 0.08);
  --dark: #0e0e16;                /* device props only */
  --grid-c: rgba(19, 0, 255, 0.045);
  --grid-c-drench: rgba(255, 255, 255, 0.055);
  --f-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Inter Tight", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --rail-h: 58px;
  --gutter: clamp(40px, 4.6vw, 66px);
  --z-nav: 30; --z-chrome: 40; --z-modal: 60;
}

/* ---------- 2 · Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; }
svg.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--lime); color: var(--ink); }

/* type */
.h-xl {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(44px, 4.9vw, 74px);
  line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance;
}
.h-1 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance;
}
.h-2 {
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance;
}
.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em; }

/* the hand-drawn marker: budgeted, geometry from the word itself */
.mark { position: relative; display: inline-block; white-space: nowrap; }
.mark svg { position: absolute; left: -2%; bottom: -0.13em; width: 104%; height: 0.34em; overflow: visible; pointer-events: none; }
.mark .mk-path { fill: none; stroke: var(--lime); stroke-width: 7; stroke-linecap: round; opacity: 0.92; }
.mark.mk-blue .mk-path { stroke: var(--blue); }
.js .mark .mk-path { stroke-dasharray: 320; stroke-dashoffset: 320; }
.js .slide.active .mark.is-in .mk-path { animation: markDraw 0.7s var(--ease) 0.45s forwards; }
@keyframes markDraw { to { stroke-dashoffset: 0; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
  padding: 15px 26px; border-radius: 999px;
  transition: transform 160ms var(--ease), background 160ms ease;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn .arr { transition: transform 200ms var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--lime-deep); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-ghost { border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-text { font-size: 14px; color: var(--ink-3); text-decoration: underline; }

/* chips (one system everywhere) */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-weight: 600; font-size: 14px; color: var(--ink-2);
  transition: transform 150ms var(--ease), background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip:active { transform: scale(0.96); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- 3 · Deck chrome ---------- */
.deck-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-chrome); background: transparent; }
.deck-progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width 400ms var(--ease); }
.scheme-blue .deck-progress span { background: var(--lime); }

.deck-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter) 0;
  pointer-events: none;
}
.deck-top > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand .mark-icon { width: 30px; height: 30px; border-radius: 8px; }
.brand .logo { font-family: var(--f-head); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.scheme-blue .brand .logo { color: #fff; }
.deck-meta { display: flex; align-items: center; gap: 8px; }
.deck-counter { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); padding-left: 6px; }
.deck-counter b { color: var(--ink); font-weight: 500; }
.scheme-blue .deck-counter { color: rgba(255, 255, 255, 0.6); }
.scheme-blue .deck-counter b { color: #fff; }
.deck-ov-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--ink-2); background: rgba(255, 255, 255, 0.7);
  transition: transform 150ms var(--ease), border-color 150ms ease;
}
.deck-ov-btn:hover { border-color: var(--blue); color: var(--blue); }
.deck-ov-btn:active { transform: scale(0.94); }
.scheme-blue .deck-ov-btn { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: rgba(255, 255, 255, 0.08); }

.deck-nav { display: flex; gap: 8px; margin-left: 4px; }
.deck-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: transform 150ms var(--ease), background 150ms ease, color 150ms ease;
}
.deck-arrow:hover { border-color: var(--blue); color: var(--blue); }
.deck-arrow:active { transform: scale(0.94); }
.deck-arrow:disabled { opacity: 0.3; pointer-events: none; }
.deck-arrow-next { background: var(--blue); border-color: var(--blue); color: #fff; }
.deck-arrow-next:hover { background: var(--blue-deep); color: #fff; }
.deck-arrow-next.has-steps { box-shadow: 0 0 0 4px rgba(19, 0, 255, 0.14); }
.scheme-blue .deck-arrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.scheme-blue .deck-arrow-next { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.scheme-blue .deck-arrow-next.has-steps { box-shadow: 0 0 0 4px rgba(198, 250, 2, 0.25); }

/* ---------- 4 · Slide scaffold ---------- */
.deck { position: fixed; inset: 0; }
.slide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter);
  opacity: 0; pointer-events: none;
  /* visibility gating: inactive slides are NOT painted (23 full-screen
     layers alive at once was the main perf drag); the 0s/340ms delay keeps
     the cross-fade intact. */
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
  overflow: hidden;
  background: var(--paper);
  /* blueprint grid substrate: ONE svg tile layer (was two gradient layers) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M0 0.5H44M0.5 0V44' stroke='rgba(19,0,255,0.05)' fill='none'/></svg>");
}
/* fully parked after the fade: skips style+layout+paint of the whole subtree */
.slide.parked { content-visibility: hidden; }
.slide.active { opacity: 1; pointer-events: auto; z-index: 2; visibility: visible; transition: opacity 260ms ease; }
.slide { justify-content: center; }
.slide-inner {
  width: 100%; max-width: 1240px; margin: 0 auto;
  flex: 1 1 auto; min-height: 0;
  /* presentation canvas: on very tall windows the content block stays a
     16:9-ish band, vertically centred, instead of stretching into voids */
  max-height: 950px;
  display: flex; flex-direction: column;
  padding-top: 76px; padding-bottom: 24px;
}

/* fixed header zone: rail + h2 always at the same y */
.shead { flex: 0 0 auto; margin-bottom: clamp(16px, 2.6vh, 30px); }
.rail {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--ink-3); margin-bottom: 14px; min-height: 15px;
}
.rail b { color: var(--blue); font-weight: 500; }
.rail .rail-sep { opacity: 0.45; }
.rail .rail-hint { margin-left: auto; opacity: 0.75; }
.s-blue .rail { color: rgba(255, 255, 255, 0.62); }
.s-blue .rail b { color: var(--lime); }
.shead .h-2 { max-width: 21ch; }
.shead.wide .h-2 { max-width: 30ch; }

/* content band: fills, never dies at 60% height */
.sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sfoot {
  flex: 0 0 auto; margin-top: clamp(12px, 2vh, 22px);
  font-family: var(--f-mono); font-size: 12px; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 26px;
  min-height: 16px; line-height: 1.5;
}
.sfoot .sf-l { min-width: 0; }
.sfoot .tick { margin-right: 7px; }
.sfoot .tick { color: var(--blue); }
.sfoot.strong { font-family: var(--f-body); font-size: clamp(15px, 1.25vw, 17.5px); color: var(--ink); font-weight: 600; }
.s-blue .sfoot { color: rgba(255, 255, 255, 0.66); }
.s-blue .sfoot .tick { color: var(--lime); }

/* ---------- 5 · Motion system ---------- */
.js .slide .rv { opacity: 0; transform: translateY(14px); }
.js .slide.active .rv {
  animation: rvIn 0.38s var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 32ms + 30ms);
}
/* already-seen sheets snap in: presenters go back and forth */
.js .slide.active.seen .rv {
  animation-duration: 0.18s;
  animation-delay: calc(var(--d, 0) * 10ms);
}
@keyframes rvIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .slide .rv { transform: none; }
  .js .slide.active .rv { animation-duration: 0.25s; animation-delay: 0s; }
  .js .mark .mk-path { stroke-dasharray: none; stroke-dashoffset: 0; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; }
}

/* ---------- 6 · Components ---------- */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.panel-pad { padding: clamp(18px, 2vw, 26px); }
.panel-em { border-width: 2px; box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.s-blue .panel { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); }

.stat { font-family: var(--f-head); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-xl { font-size: clamp(54px, 5.4vw, 82px); line-height: 1; }
.stat-lg { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.04; }
.stat-md { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.stat-cap { display: block; font-family: var(--f-body); font-weight: 500; font-size: 13.5px; color: var(--ink-3); white-space: normal; line-height: 1.35; margin-top: 6px; }
.s-blue .stat-cap { color: rgba(255, 255, 255, 0.68); }

/* kpi row: n stats side by side, no cards needed */
.kpis { display: flex; gap: clamp(24px, 3.4vw, 52px); align-items: flex-start; }
.kpis .kpi { min-width: 0; }
.kpi .stat { color: var(--blue); }
.s-blue .kpi .stat { color: #fff; }

/* blueprint annotation: the "insight" voice (replaces black bars / left borders) */
.annot {
  display: flex; align-items: baseline; gap: 10px;
  font-size: clamp(14.5px, 1.2vw, 16.5px); color: var(--ink-2); line-height: 1.5;
}
.annot::before { content: "→"; color: var(--blue); font-weight: 700; flex: 0 0 auto; }
.annot b, .annot strong { color: var(--ink); }

/* bars (one chart voice: solid blue ramp, lime = the win) */
.hbar { display: grid; grid-template-columns: minmax(120px, 0.9fr) 1fr auto; align-items: center; gap: 12px; }
.hbar .hb-l { font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .hb-track { height: 12px; border-radius: 6px; background: var(--wash); overflow: hidden; }
.hbar .hb-fill { height: 100%; border-radius: 6px; background: var(--blue); width: 0; transition: width 0.8s var(--ease); }
.hbar.win .hb-fill { background: var(--lime); }
.hbar.win .hb-v { color: var(--ink); }
.hbar .hb-v { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); min-width: 58px; text-align: right; }

/* phone prop (dark device, lime accents) — the ONLY dark surface family */
.phone { background: var(--dark); border-radius: 26px; padding: 14px 14px 18px; color: #eef0f6; box-shadow: 0 24px 60px -28px rgba(10, 0, 168, 0.45); }
.phone-notch { width: 74px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); margin: 2px auto 12px; }
.phone-head { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 700; font-size: 14px; }
.phone-head .mark-icon { width: 22px; height: 22px; border-radius: 6px; }
.phone-live { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--lime); }

/* figure grid (person pictograms) */
.figrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 10px; }
.figrid .tgt-fig { width: 100%; aspect-ratio: 1; fill: rgba(19, 0, 255, 0.13); transition: fill 380ms ease, transform 380ms var(--ease); transform: scale(0.86); }
.figrid .tgt-fig.on { fill: var(--blue); transform: scale(1); }

/* toggle (two options) */
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.toggle button { padding: 9px 16px; font-weight: 600; font-size: 13.5px; color: var(--ink-3); }
.toggle button.on { background: var(--blue); color: #fff; }

/* form fields (Rechner, Briefing) */
.field label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-3); margin-bottom: 7px; }
.input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff;
  font: 600 15px var(--f-body); color: var(--ink);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231300ff' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
input.input { background-image: none; }
.input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---------- 7 · DRENCH scheme ---------- */
.slide.s-blue {
  background-color: var(--blue);
  background-image:
    radial-gradient(120% 130% at 82% -10%, rgba(10, 0, 168, 0) 40%, rgba(10, 0, 168, 0.75) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M0 0.5H44M0.5 0V44' stroke='rgba(255,255,255,0.055)' fill='none'/></svg>");
  background-size: auto, 44px 44px;
  color: #fff;
}
.s-blue .lead { color: rgba(255, 255, 255, 0.85); }
.s-blue .lead strong { color: var(--lime); font-weight: 600; }
.s-blue .annot { color: rgba(255, 255, 255, 0.82); }
.s-blue .annot::before { color: var(--lime); }
.s-blue .annot b, .s-blue .annot strong { color: #fff; }

/* corner registration marks on drench slides (blueprint framing) */
.s-blue::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) left top / 14px 1.5px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) left top / 1.5px 14px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right top / 14px 1.5px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right top / 1.5px 14px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) left bottom / 14px 1.5px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) left bottom / 1.5px 14px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right bottom / 14px 1.5px,
    linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) right bottom / 1.5px 14px;
  background-repeat: no-repeat;
}

/* =========================================================================
   8 · SCENES
   ========================================================================= */

/* ----- S1 · Hero: dots assemble into Germany ----- */
.slide-hero .slide-inner { flex-direction: row; align-items: center; gap: clamp(28px, 4vw, 64px); padding-top: 56px; }
.hero-copy { flex: 1 1 57%; min-width: 0; }
.hero-h .mark .mk-path { stroke-width: 5.5; }
.hero-kick { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--lime); margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.hero-kick::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.hero-h > span { display: block; }
.slide-hero .lead { margin-top: 26px; color: rgba(255, 255, 255, 0.86); }
.slide-hero .lead strong { color: var(--lime); font-weight: 600; }
/* co-brand lockup: appears when a Briefing names the prospect */
.brief-chip { margin-top: 20px; display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 14px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.28); font-size: 15px; font-weight: 600; }
.brief-chip .cb-mark { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 800; font-size: 16px; }
.brief-chip .cb-mark svg { width: 22px; height: 22px; border-radius: 6px; }
.brief-chip .cb-x { color: rgba(255,255,255,.55); font-weight: 400; }
.brief-chip .cb-firma { font-family: var(--f-head); font-weight: 800; font-size: 16px; }
.brief-chip .cb-focus { font-family: var(--f-mono); font-size: 11.5px; color: rgba(255,255,255,.66); border-left: 1px solid rgba(255,255,255,.25); padding-left: 12px; }
.hero-map { flex: 1 1 46%; min-width: 0; position: relative; align-self: stretch; display: flex; align-items: center; }
.hero-map svg { width: 100%; height: min(66vh, 640px); }
.hero-dot { fill: rgba(255, 255, 255, 0.85); }
.hero-dot.lm { fill: var(--lime); }
.hero-dot { transform-box: fill-box; transform-origin: center; }
.js .hero-dot { opacity: 0; transform: translate(var(--sx), var(--sy)); }
.js .slide.active .hero-dot { animation: dotHome 0.85s var(--ease) forwards; animation-delay: var(--dd); }
@keyframes dotHome { to { opacity: 1; transform: none; } }
/* choreography: after the dots settle, the city hubs ripple, then the counter
   rolls (data-delay), then the marker draws (retimed below) */
.js .slide.active .hero-map.ripple .hero-dot.lm { animation: dotHome 0.85s var(--ease) var(--dd) forwards, lmPulse 1.1s var(--ease) 1.05s; }
@keyframes lmPulse { 0%, 100% { transform: none; } 40% { transform: scale(2.4); } }
.hub-ring { fill: none; stroke: var(--lime); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .slide.active .hero-map.ripple .hub-ring { animation: hubRing 1.5s var(--ease) forwards; animation-delay: var(--rd); }
@keyframes hubRing { 0% { opacity: 0.95; transform: scale(0.2); } 100% { opacity: 0; transform: scale(9); } }
.js .slide.active .hero-h .mark.is-in .mk-path { animation-delay: 1.5s; }
.plx { will-change: transform; }
.hero-map .hm-cap { position: absolute; left: 4%; bottom: 4%; font-family: var(--f-mono); font-size: 12.5px; color: rgba(255,255,255,.75); display: flex; flex-direction: column; gap: 2px; }
.hero-map .hm-cap b { font-family: var(--f-head); font-weight: 800; font-size: clamp(30px, 2.6vw, 40px); color: #fff; letter-spacing: -0.02em; }
.hero-map .hm-cap b em { font-style: normal; color: var(--lime); }
.kbd-hint { position: absolute; bottom: 28px; left: var(--gutter); font-family: var(--f-mono); font-size: 12px; color: rgba(255,255,255,.55); }
.kbd-hint kbd { font-family: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; padding: 1px 6px; margin: 0 1px; }

/* ----- S2 · Zahlen: counter wall ----- */
.zahlen-wall { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3.4vh, 34px); max-width: 1020px; }
.zrow { display: grid; grid-template-columns: minmax(280px, 460px) 1fr; align-items: center; gap: clamp(20px, 3vw, 48px); }
.zrow .stat { color: #fff; }
.zrow .stat .u { font-family: var(--f-mono); font-weight: 400; font-size: 0.32em; letter-spacing: 0.04em; color: rgba(255,255,255,.7); margin-left: 10px; }
.zrow-meta { min-width: 0; }
.zrow-meta b { display: block; font-family: var(--f-head); font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; margin-bottom: 8px; }
.zbar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); overflow: hidden; max-width: 520px; }
.zbar i { display: block; height: 100%; border-radius: 5px; background: var(--lime); width: 0; transition: width 1s var(--ease) 0.3s; }
.slide.active .zbar i { width: var(--w); }
.zrow-meta .zsub { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }

/* ----- S3 · Problem: pain diagram ----- */
.pain { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 3vw, 44px); min-height: 0; align-content: stretch; }
.pain-left { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 30px); min-width: 0; }
.pain-big .stat { color: var(--hot); }
.pain-big .stat .u { font-size: 0.34em; font-family: var(--f-mono); font-weight: 400; color: var(--ink-3); margin-left: 8px; }
.pain-big p { margin-top: 8px; font-size: clamp(15px, 1.3vw, 18px); color: var(--ink-2); max-width: 46ch; }
.pain-big p strong { color: var(--ink); }
.vak-scale { max-width: 560px; }
.vak-track { position: relative; height: 14px; border-radius: 7px; background: var(--wash); overflow: visible; }
.vak-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 7px; background: var(--hot); transition: width 1.1s var(--ease) 0.25s; }
.slide.active .vak-fill { width: var(--w); }
.vak-avg { position: absolute; top: -7px; bottom: -7px; width: 2px; background: var(--ink); left: var(--x); }
.vak-avg::after { content: attr(data-l); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.vak-caps { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.pain-facts { display: flex; gap: clamp(20px, 2.6vw, 40px); }
.pain-fact .stat { color: var(--blue); }
.pain-right { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pr-head { font-family: var(--f-head); font-weight: 700; font-size: clamp(15px, 1.35vw, 18px); margin-bottom: 14px; }
.split { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); display: flex; height: clamp(150px, 24vh, 220px); }
.split > div { display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; min-width: 0; }
.split .sp-a { background: var(--blue); color: #fff; width: 64%; }
.split .sp-b { background: #fff; color: var(--ink); width: 36%; }
.split b { font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; }
.split b * { font: inherit; }
.split .sp-cap { font-size: 12.5px; line-height: 1.35; opacity: 0.85; }
.split .sp-a .sp-cap { color: rgba(255,255,255,.85); }
.pivot { margin-top: 18px; }

/* ----- S4 · Germany map (Reichweite) ----- */
.geo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 0.9fr) 1.1fr; gap: clamp(20px, 3vw, 44px); }
.geo-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.geo-intro { font-size: 14.5px; color: var(--ink-3); max-width: 42ch; }
.geo-side .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.geo-total { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.geo-total .n { font-family: var(--f-head); font-weight: 800; font-size: clamp(40px, 3.6vw, 54px); color: var(--blue); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.geo-total .l { font-size: 13.5px; color: var(--ink-3); max-width: 20ch; }
.geo-reset { font-family: var(--f-mono); font-size: 12px; color: var(--blue); text-decoration: underline; }
.geo-panel { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 16px 18px; }
.geo-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.geo-panel-h b { font-family: var(--f-head); font-size: 16px; }
.geo-panel-h span { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.geo-panel .seg { display: grid; grid-template-columns: 118px 1fr 62px; align-items: center; gap: 10px; padding: 4.5px 0; }
.geo-panel .lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-panel .bar { height: 9px; border-radius: 5px; background: var(--wash); overflow: hidden; }
.geo-panel .fill { height: 100%; background: var(--blue); border-radius: 5px; transition: width 0.6s var(--ease); }
.geo-panel .val { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.geo-legend { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.gl-grad { flex: 0 0 150px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(19,0,255,.15), var(--blue)); }
.geo-map-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.geo-map { flex: 1; min-height: 0; }
.geo-map svg { width: 100%; height: 100%; }
.geo-svg path { stroke: #fff; stroke-width: 1.1; cursor: pointer; transition: fill 500ms ease, filter 200ms ease; }
.geo-svg path:hover { filter: brightness(1.12); }
.geo-svg path.sel { stroke: var(--lime); stroke-width: 2.4; }
.geo-lbl { font: 600 10.5px var(--f-mono); fill: rgba(35,35,35,.78); pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
.geo-lbl.sel { fill: var(--ink); }
.geo-foot { margin-top: 8px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }

/* ----- S5 · Aktiv / Passiv: split stage ----- */
.acq { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2vw, 28px); align-items: center; }
.acq-side { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; justify-content: center; gap: 13px; min-width: 0; min-height: clamp(300px, 46vh, 390px); }
.acq-tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--blue); }
.acq-passive .acq-tag { color: var(--lime-deep); }
.acq-side h3 { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -0.015em; }
.acq-side p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.acq-side p strong { color: var(--ink); }
.acq-stats { margin-top: 12px; display: flex; gap: clamp(18px, 2vw, 34px); }
.acq-stats b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); color: var(--blue); letter-spacing: -0.02em; white-space: nowrap; }
.acq-stats span { font-size: 12.5px; color: var(--ink-3); }
.acq-bridge { align-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; width: clamp(190px, 17vw, 240px); position: relative; padding: 22px 18px; border-radius: 18px; background: var(--blue); color: #fff; border: 1px solid var(--blue); }
.acq-bridge .mark-icon { width: 40px; height: 40px; border-radius: 10px; }
.acq-bridge b { font-family: var(--f-head); font-size: 15.5px; line-height: 1.3; }
.acq-bridge span { font-size: 12.5px; color: rgba(255,255,255,.75); line-height: 1.4; }
.acq-arrow { position: absolute; top: 50%; width: clamp(18px, 2vw, 30px); height: 2px; background: var(--blue); opacity: .5; }
.acq-arrow.l { right: 100%; } .acq-arrow.r { left: 100%; }

/* ----- S6 · Targeting: filter stack + figures ----- */
.tgt { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(22px, 3vw, 48px); }
.tgt-controls { display: flex; flex-direction: column; min-width: 0; }
.tgt-lead { font-size: 14.5px; color: var(--ink-3); margin-bottom: 14px; max-width: 46ch; }
.tgt-layers { display: flex; flex-direction: column; gap: 9px; }
.tgt-chip {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 12px 15px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff;
  transition: border-color 200ms ease, background 200ms ease, transform 150ms var(--ease);
}
.tgt-chip:active { transform: scale(0.985); }
.tgt-chip .tc-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 17px; transition: background 200ms ease, color 200ms ease; }
.tgt-chip .tc-main { min-width: 0; }
.tgt-chip .tc-main b { display: block; font-family: var(--f-head); font-size: 15px; font-weight: 700; }
.tgt-chip .tc-main em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.tgt-chip .tc-x { margin-left: auto; font-family: var(--f-mono); font-size: 16px; color: var(--ink-3); transition: transform 250ms var(--ease), color 200ms ease; }
.tgt-chip.on { border-color: var(--blue); background: var(--wash); }
.tgt-chip.on .tc-ic { background: var(--blue); color: #fff; }
.tgt-chip.on .tc-x { transform: rotate(45deg); color: var(--blue); }
.tgt-result { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(18px, 2.2vw, 28px); }
.tgt-people { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 6px 12px; align-self: center; width: 100%; max-width: 460px; }
.tgt-people .tgt-fig { width: 100%; height: 100%; }
.tgt-readout { margin-top: 14px; }
.reslabel { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--blue); margin-bottom: 4px; }
.resnum { font-family: var(--f-head); font-weight: 800; font-size: clamp(44px, 4.4vw, 66px); line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ressub { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tgt-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

/* ----- S7 · Zielgruppen-Rechner ----- */
.calc { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; gap: clamp(20px, 2.6vw, 40px); }
.calc-controls { display: flex; flex-direction: column; gap: 15px; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--line); border-radius: 18px; background: #fff; align-self: start; }
.calc-controls .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.calc-controls .chip { padding: 8px 13px; font-size: 13px; }
.calc-result { display: grid; grid-template-columns: minmax(170px, 0.62fr) 1fr; gap: clamp(16px, 2vw, 30px); align-items: stretch; border: 2px solid var(--line); box-shadow: 6px 6px 0 rgba(19,0,255,.08); border-radius: 18px; background: #fff; padding: clamp(18px, 2.2vw, 30px); min-height: 0; }
.calc-map-wrap { display: flex; flex-direction: column; min-height: 0; }
.calc-map { flex: 1; min-height: 0; }
.calc-map svg { width: 100%; height: 100%; }
.calc-svg path { cursor: default; }
.calc-svg path.dim { opacity: 0.55; }
.calc-map-cap { margin-top: 6px; font-family: var(--f-mono); font-size: 11.5px; color: var(--blue); text-align: center; }
.calc-readout { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.calc-readout .resnum.flash, .res-metric .rn.flash { animation: numFlash 500ms ease; }
@keyframes numFlash { 30% { color: var(--blue); } }
.res-breakdown { display: flex; gap: clamp(16px, 2vw, 34px); margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.res-metric .rn { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 1.9vw, 27px); color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-metric .rl { font-size: 12px; color: var(--ink-3); margin-top: 3px; max-width: 12ch; }
.calc-note { margin-top: 14px; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }

/* ----- S8/S12 · Product slides: phone + rail ----- */
.prod { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.06fr minmax(300px, 0.94fr); gap: clamp(24px, 3.2vw, 54px); }
.prod-copy { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px); min-width: 0; justify-content: center; }
.prod-award { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 700; font-size: 13px; }
.prod-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.prod-big b { font-family: var(--f-head); font-weight: 800; font-size: clamp(52px, 5vw, 76px); color: var(--blue); letter-spacing: -0.025em; line-height: 1; white-space: nowrap; }
.prod-big b * { font: inherit; color: inherit; }
.prod-big > span { font-size: 14.5px; color: var(--ink-3); max-width: 26ch; line-height: 1.4; }
.prod-body { font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.prod-stats { display: flex; gap: clamp(20px, 2.6vw, 42px); }
.prod-stats b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(22px, 2vw, 30px); letter-spacing: -0.02em; white-space: nowrap; }
.prod-stats span { font-size: 12.5px; color: var(--ink-3); }
.prod-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; }

/* feature rail (lernapp & careerkit): compact list, active one expands */
.feat-rail { display: flex; flex-direction: column; gap: 8px; }
.feat {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); background: #fff; border-radius: 13px;
  padding: 9px 13px; transition: border-color 200ms ease, background 200ms ease;
}
.feat .f-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 16px; }
.feat b { font-family: var(--f-head); font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.feat p { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; max-height: 0; overflow: hidden; transition: max-height 300ms var(--ease), margin-top 300ms var(--ease); }
.feat.on { border-color: var(--blue); background: var(--wash); }
.feat.on .f-ic { background: var(--blue); color: #fff; }
.feat.on p { max-height: 44px; margin-top: 3px; }
.f-neu { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; background: var(--hot); color: #fff; border-radius: 5px; padding: 2px 6px; }

/* lernapp phone screens */
.la-phone { width: min(100%, 320px); margin-inline: auto; }
.la-screen { margin-top: 12px; border-radius: 16px; background: #16161f; padding: 14px; min-height: 208px; display: flex; flex-direction: column; gap: 9px; }
.la-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.12); }
.la-line.w60 { width: 60%; } .la-line.w80 { width: 80%; }
.la-cardrow { display: flex; gap: 8px; }
.la-tile { flex: 1; border-radius: 10px; background: rgba(255,255,255,.08); padding: 10px; font-size: 11px; color: rgba(255,255,255,.8); }
.la-tile b { display: block; color: var(--lime); font-family: var(--f-mono); font-size: 13px; margin-bottom: 3px; }
.la-done { margin-top: auto; display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11.5px; color: var(--lime); }

/* ----- S9 · Job Board: growth proof + SERP proof ----- */
.jb { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr minmax(340px, 0.95fr); gap: clamp(24px, 3.2vw, 54px); }
.growth { margin-top: clamp(4px, 1vh, 10px); }
.growth-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.growth-head b { font-family: var(--f-head); font-size: 13.5px; font-weight: 700; }
.growth-head span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.growth svg { width: 100%; height: clamp(120px, 21vh, 210px); display: block; }
.growth .g-area { fill: url(#gFill); }
.growth .g-line { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; }
.js .growth .g-line { stroke-dasharray: 900; stroke-dashoffset: 900; }
.js .slide.active .growth .g-line { animation: markDraw 1.3s var(--ease) 0.35s forwards; }
.growth .g-grid { stroke: var(--line-soft); stroke-width: 1; }
.growth .g-dot { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.growth .g-endlab { font: 700 15px var(--f-head); fill: var(--ink); }
.growth .g-endcap { font: 10.5px var(--f-mono); fill: var(--ink-3); }
.growth .g-x { font: 10.5px var(--f-mono); fill: var(--ink-3); }
.js .growth .g-dot, .js .growth .g-endlab, .js .growth .g-endcap { opacity: 0; }
.js .slide.active .growth .g-dot, .js .slide.active .growth .g-endlab, .js .slide.active .growth .g-endcap { animation: rvIn 0.4s var(--ease) 1.45s forwards; }
.serp { align-self: center; border-radius: 18px; border: 1px solid var(--line); background: #fff; overflow: hidden; box-shadow: 6px 6px 0 rgba(19,0,255,.08); }
.serp-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.serp-g { font-family: var(--f-head); font-weight: 800; font-size: 15px; color: #4285f4; }
.serp-q { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 14px; font-size: 13px; color: var(--ink-2); }
.serp-q svg { width: 13px; height: 13px; stroke: var(--ink-3); }
.serp-tab { padding: 10px 16px 8px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); border-bottom: 1px solid var(--line-soft); }
.serp-tab b { color: var(--blue); font-weight: 500; border-bottom: 2px solid var(--blue); padding-bottom: 7px; }
.serp-list { padding: 6px 10px 10px; }
.serp-item { display: flex; gap: 11px; align-items: center; padding: 10px 8px; border-radius: 10px; }
.serp-item.us { background: var(--wash); outline: 2px solid var(--blue); }
.serp-logo { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; }
.serp-item.us .serp-logo { background: #fff; border: 1px solid var(--line); }
.serp-item.us .serp-logo svg { width: 24px; height: 24px; border-radius: 6px; }
.serp-item:not(.us) .serp-logo { background: #ececf2; color: var(--ink-3); font-family: var(--f-head); font-weight: 800; font-size: 13px; }
.serp-main { min-width: 0; flex: 1; }
/* result titles read as LINKS: blue, weighty, underlined on the own rows */
.serp-main b { display: block; font-size: 14px; font-weight: 700; color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serp-item.us .serp-main b { font-size: 15px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.serp-item:not(.us) .serp-main b { color: rgba(19, 0, 255, 0.52); font-weight: 600; }
.serp-main span { font-size: 11.5px; color: var(--ink-3); }
.serp-pos { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.serp-item.us .serp-pos { color: var(--blue); font-weight: 500; }
.serp-foot { padding: 9px 16px 12px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); border-top: 1px dashed var(--line-soft); }

/* ----- S10 · Jobboard in Zahlen: bar compositions ----- */
.jbz { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 40px); align-content: stretch; }
.jbz-col { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; min-width: 0; }
.jbz-col h3 { font-family: var(--f-head); font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; margin-bottom: 4px; }
.jbz-col .jbz-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.stack { display: flex; height: clamp(56px, 10vh, 88px); border-radius: 14px; overflow: hidden; margin-top: auto; margin-bottom: 22px; }
.stack i { display: grid; place-items: center; height: 100%; background: var(--seg); min-width: 2px; transition: flex-basis .8s var(--ease); }
.stack i b { font-family: var(--f-head); font-weight: 800; font-size: clamp(13px, 1.2vw, 16px); color: #fff; }
.stack i.dk b { color: var(--blue); }
.stack-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin-bottom: auto; }
.stack-legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); list-style: none; }
.stack-legend .sw { width: 13px; height: 13px; border-radius: 4px; background: var(--seg); flex: 0 0 auto; }
.stack-legend .v { margin-left: auto; font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); }
.jbz-bars { display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 24px); flex: 1; justify-content: center; }
.jbz .hbar { grid-template-columns: minmax(140px, 0.8fr) 1fr auto; }
.jbz .hbar .hb-l { font-size: 15px; }
.jbz .hbar .hb-track { height: 17px; border-radius: 9px; }
.jbz .hbar .hb-fill { border-radius: 9px; }
.jbz .hbar .hb-v { font-size: 13px; }

/* ----- S11 · House of Brands (drench) ----- */
.hob { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr minmax(280px, 0.65fr); gap: clamp(18px, 2.4vw, 38px); }
.hob-stage { position: relative; min-height: 0; display: flex; flex-direction: column; }
.hob-wall { position: relative; flex: 1; min-height: 0; }
.hob-cell {
  position: absolute; border-radius: 22%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; aspect-ratio: 1;
  transition: transform 380ms var(--ease), background 320ms ease, opacity 320ms ease;
  opacity: 0; transform: scale(0.15);
}
.hob-wall.in .hob-cell { opacity: 1; transform: scale(1); transition-delay: calc(var(--k) * 12ms); }
.hob-cell svg { width: 56%; height: 56%; }
.hob-cell:hover { background: rgba(255, 255, 255, 0.22); z-index: 2; }
.hob-cell.named.seg-on { background: linear-gradient(140deg, var(--a), var(--a2)); border-color: transparent; }
.hob-cell.flag { background: #fff; border-color: #fff; z-index: 3; }
.hob-cell .hc-logo { width: 72%; height: 72%; border-radius: 18%; }
.hob-spokes { position: absolute; inset: 0; width: 100%; height: 100%; }
.hob-edge { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; stroke-dasharray: 2 3; }
.hob-legend { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.hl-seg { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); transition: background 150ms ease; }
.hl-seg i { width: 9px; height: 9px; border-radius: 3px; }
.hl-seg:hover, .hl-seg.on { background: rgba(255, 255, 255, 0.2); }
.hob-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; justify-content: center; }
.hob-count b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(64px, 6.4vw, 104px); line-height: 0.95; letter-spacing: -0.03em; color: var(--lime); font-variant-numeric: tabular-nums; }
.hob-count span { display: block; margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.8); max-width: 26ch; line-height: 1.45; }
.hob-detail { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); border-radius: 16px; padding: 16px; display: flex; gap: 13px; min-height: 118px; }
.hd-mark { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(140deg, var(--a, #fff2), var(--a2, #fff1)); }
.hd-mark svg { width: 24px; height: 24px; }
.hd-body { min-width: 0; }
.hd-body b { font-family: var(--f-head); font-size: 15px; display: block; }
.hd-jobs { font-family: var(--f-mono); font-size: 11px; color: var(--lime); display: block; margin: 3px 0 7px; }
.hd-body p { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
.hob-note { font-family: var(--f-mono); font-size: 12px; color: var(--lime); }

/* ----- S12 · CareerKit phone screens ----- */
.ck-phone { width: min(100%, 285px); margin-inline: auto; align-self: center; }
.ck-toolname { font-family: var(--f-head); font-weight: 700; font-size: 17px; color: var(--lime); margin: 12px 2px 8px; }
.ck-screen { border-radius: 16px; background: #16161f; padding: 13px; min-height: 218px; display: flex; }
.cks { flex: 1; display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.ck-done { margin-top: auto; display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11.5px; color: var(--lime); }
.ckcv-top { display: flex; gap: 10px; align-items: center; }
.ckcv-ava { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--blue), #6f86ff); }
.ckcv-id b { display: block; font-size: 13px; }
.ckcv-id em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.6); }
.ckcv-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.ckcv-bars i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.ckcv-bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--lime); border-radius: 4px; }
.cklet-h { font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.6); }
.cklet-lines { display: flex; flex-direction: column; gap: 6px; }
.cklet-lines i { height: 8px; border-radius: 4px; background: rgba(255,255,255,.13); }
.cklet-lines i:nth-child(2n) { width: 86%; }
.cklet-lines i.sh { width: 55%; background: rgba(198,250,2,.5); }
.ckap-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.07); border-radius: 9px; padding: 8px 10px; font-size: 12px; }
.ckap-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; color: var(--lime); }
.ckiv-q { background: rgba(255,255,255,.08); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.ckiv-fb { background: rgba(198,250,2,.12); border: 1px solid rgba(198,250,2,.3); border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.ckiv-score { font-family: var(--f-mono); color: var(--lime); margin-right: 6px; }
.ckch { max-width: 88%; border-radius: 12px; padding: 9px 11px; font-size: 12px; line-height: 1.4; }
.ckch.user { align-self: flex-end; background: var(--blue); }
.ckch.ai { align-self: flex-start; background: rgba(255,255,255,.09); }
.cksk { display: flex; align-items: center; gap: 9px; }
.cksk span { flex: 0 0 96px; font-size: 11.5px; color: rgba(255,255,255,.75); }
.cksk-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.cksk-bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--lime); }

/* ----- S13 · Journey ----- */
.lj-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px); }
.lj-axislbls { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.lj-axislbls .to { color: var(--blue); }
.lj-timeline { position: relative; height: 76px; }
.lj-line { position: absolute; left: 0; right: 0; top: 26px; height: 3px; border-radius: 2px; background: var(--wash-2); }
.lj-progress { height: 100%; width: 0; border-radius: 2px; background: var(--blue); transition: width 500ms var(--ease); }
.lj-avatar { display: none !important; }
.lj-nodes { position: absolute; inset: 0; }
.lj-node { position: absolute; top: 6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; }
.lj-node .lj-nic {
  width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  border: 1.5px solid rgba(16, 16, 24, 0.28); background: var(--paper); color: var(--ink-3); font-size: 18px;
  box-shadow: 0 0 0 5px var(--paper);
  transition: background 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms var(--ease);
}
.lj-node.on .lj-nic { border-color: var(--blue); color: var(--blue); background: #eef0ff; }
.lj-node.cur .lj-nic { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--paper); }
.lj-node .lj-lab { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.lj-node.on .lj-lab { color: var(--blue); }
.lj-scene { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(16px, 2vw, 28px); }
.lj-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(18px, 2.2vw, 30px); display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); min-width: 0; justify-content: center; }
.lj-top { display: flex; gap: 16px; align-items: center; }
.lj-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 25px; }
.lj-phase { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--blue); display: block; margin-bottom: 4px; }
.lj-top h3 { font-family: var(--f-head); font-size: clamp(21px, 2vw, 28px); font-weight: 800; letter-spacing: -0.015em; }
.lj-body { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
/* what the app shows at this stage: three product chips */
.lj-mock { display: flex; flex-wrap: wrap; gap: 8px; }
.ljm-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--wash); border-radius: 11px; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ljm-chip .ic { color: var(--blue); font-size: 15px; }
.lj-product { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: 6px 14px; }
.lj-insight { border: 2px solid var(--blue); border-radius: 18px; background: var(--wash); padding: clamp(16px, 2vw, 26px); display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 18px); justify-content: center; min-width: 0; }
.lj-insight-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; color: var(--blue); }
.lj-insight-txt { font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; line-height: 1.5; color: var(--ink); }
.lj-meter .ljm-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 7px; }
.lj-meter .ljm-head b { font-family: var(--f-mono); font-weight: 500; color: var(--blue); }
.lj-meter .ljm-track { height: 12px; border-radius: 6px; background: rgba(19, 0, 255, 0.10); overflow: hidden; }
.lj-meter .ljm-track i { display: block; height: 100%; border-radius: 6px; background: var(--blue); transition: width 500ms var(--ease); }
.lj-years { display: flex; align-items: baseline; gap: 10px; border-top: 1px dashed var(--line); padding-top: 14px; }
.lj-years b { font-family: var(--f-head); font-weight: 800; font-size: clamp(30px, 2.8vw, 42px); color: var(--blue); line-height: 1; }
.lj-years span { font-size: 13px; color: var(--ink-2); line-height: 1.4; max-width: 24ch; }
/* stage change: content slides in */
.lj-scene .lj-anim { opacity: 0; transform: translateY(10px); }
.lj-scene .lj-anim.in { opacity: 1; transform: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.lj-below { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.lj-payoff { font-size: 13.5px; color: var(--ink-3); max-width: 74ch; opacity: 0.35; transition: opacity 300ms ease; }
.lj-payoff.show { opacity: 1; color: var(--ink-2); }
.demo-row { display: flex; align-items: center; gap: 14px; font-size: 13px; white-space: nowrap; }
.demo-row .demo-lead { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.demo-row a { color: var(--blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.demo-row a:hover { border-color: var(--blue); }

/* ----- S14 · Matching: funnel flows into the phone ----- */
.jm-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.jm-intro { font-size: 13.5px; color: var(--ink-3); max-width: 58ch; }
.jm-sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.jm-sig { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; background: #fff; }
.jm-sig .ic { color: var(--blue); font-size: 12px; }
.jm { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(270px, 0.55fr); gap: clamp(20px, 2.6vw, 42px); }
.jm-stage { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.jm-step { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; border-radius: 13px; border: 1px solid var(--line); background: #fff; padding: 10px 16px; width: var(--w); min-width: 320px; opacity: 0.32; transition: opacity 320ms ease, border-color 320ms ease, background 320ms ease; position: relative; }
.jm-step.shown { opacity: 1; }
.jm-step .jm-num { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 1.9vw, 27px); color: var(--blue); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jm-step .jm-l { display: block; font-weight: 700; font-size: 14px; font-family: var(--f-head); }
.jm-step .jm-note { display: block; font-size: 12px; color: var(--ink-3); }
.jm-step::after { content: ""; position: absolute; left: 46px; top: 100%; height: 8px; width: 2px; background: var(--line); }
.jm-step:last-child::after { display: none; }
.jm-step.win { border-color: var(--lime-deep); background: rgba(198, 250, 2, 0.13); }
.jm-step.win .jm-num { color: var(--ink); }
.jm-phone { align-self: center; opacity: 0.45; transform: scale(0.97); transition: opacity 400ms ease, transform 400ms var(--ease); width: min(100%, 310px); justify-self: center; }
.jm-phone.lit { opacity: 1; transform: none; }
.jm-ph-title { font-family: var(--f-head); font-weight: 700; font-size: 15.5px; color: var(--lime); margin: 12px 2px 9px; }
.jm-card { background: rgba(255,255,255,.07); border-radius: 11px; padding: 9px 11px; margin-bottom: 7px; }
.jm-card .jmc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jm-card b { font-size: 12.5px; font-weight: 600; }
.jm-card span { font-size: 11px; color: rgba(255,255,255,.6); }
.jmc-match { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink); background: var(--lime); border-radius: 5px; padding: 2px 6px; flex: 0 0 auto; }
.jm-card.more { text-align: center; font-family: var(--f-mono); font-size: 11px; color: var(--lime); background: none; border: 1px dashed rgba(198,250,2,.4); }

/* ----- S15 · Distribution hub ----- */
.dist { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr minmax(230px, 260px) 1fr; gap: clamp(14px, 1.8vw, 26px); align-items: center; align-content: center; position: relative; }
.dist-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.dist-links path { fill: none; stroke: rgba(19, 0, 255, 0.15); stroke-width: 2; stroke-dasharray: 5 9; transition: stroke 300ms ease; }
.dist-links path.on { stroke: rgba(19, 0, 255, 0.5); }
.dist-col, .dist-hub { position: relative; z-index: 1; }
.dist-col { display: flex; flex-direction: column; gap: clamp(12px, 2.2vh, 20px); min-width: 0; }
.dist-ch { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: clamp(12px, 1.9vh, 17px) 16px; opacity: 0.3; transition: opacity 300ms ease, border-color 300ms ease; }
.dist-ch.on { opacity: 1; border-color: var(--blue); }
.dist-ch .dc-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 16px; }
.dist-ch.on .dc-ic { background: var(--blue); color: #fff; }
.dist-ch b { display: block; font-family: var(--f-head); font-size: 14px; font-weight: 700; line-height: 1.2; }
.dist-ch em { font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.dist-ch.on em { color: var(--blue); }
.dist-hub { position: relative; border: 2px solid var(--blue); border-radius: 20px; background: #fff; box-shadow: 6px 6px 0 rgba(19,0,255,.08); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dist-hub .dh-doc { width: 52px; height: 52px; border-radius: 14px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 24px; }
.dist-hub b { font-family: var(--f-head); font-size: 16px; }
.dist-hub .dh-count { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.dist-hub .dh-count b { font-family: var(--f-head); font-size: 22px; color: var(--blue); }
.dist-takeaway { margin-top: clamp(10px, 1.8vh, 18px); display: flex; align-items: baseline; gap: 10px; opacity: 0.25; transition: opacity 350ms ease; font-size: clamp(14.5px, 1.3vw, 17px); }
.dist-takeaway.show { opacity: 1; }
.dist-takeaway::before { content: "→"; color: var(--blue); font-weight: 700; }
.dist-takeaway b { color: var(--ink); }
.dist-takeaway span { color: var(--ink-3); font-size: 0.88em; }

/* ----- S16 · Active Sourcing: two channel mocks ----- */
.as2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 40px); }
.as-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(16px, 2vw, 24px); display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: clamp(14px, 1.6vw, 22px); min-width: 0; align-items: start; }
.as-mock { align-self: stretch; max-height: 420px; }
.as-mock { border-radius: 16px; background: var(--dark); padding: 12px; color: #eef0f6; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.as-mock .am-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; font-family: var(--f-head); padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.as-mock .am-ava { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(140deg, var(--blue), #6f86ff); display: grid; place-items: center; font-size: 11px; }
.as-mock .am-bubble { background: rgba(255,255,255,.09); border-radius: 11px 11px 11px 3px; padding: 9px 11px; font-size: 11.5px; line-height: 1.45; max-width: 94%; }
.as-mock .am-bubble b { color: var(--lime); }
.as-mock .am-cta { align-self: flex-start; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink); background: var(--lime); border-radius: 7px; padding: 5px 9px; }
.as-mock .am-subject { font-size: 12px; font-weight: 700; }
.as-mock .am-meta { font-family: var(--f-mono); font-size: 10px; color: rgba(255,255,255,.55); }
.as-mock .am-line { height: 7px; border-radius: 4px; background: rgba(255,255,255,.13); }
.as-mock .am-line.w70 { width: 70%; }
.as-mock .am-tag { margin-top: auto; align-self: flex-start; font-family: var(--f-mono); font-size: 10px; color: var(--lime); border: 1px solid rgba(198,250,2,.4); border-radius: 6px; padding: 3px 8px; }
.as-info { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.as-info h3 { font-family: var(--f-head); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; letter-spacing: -0.01em; }
.as-stat { display: flex; align-items: baseline; gap: 10px; }
.as-stat .as-v { font-family: var(--f-head); font-weight: 800; font-size: clamp(34px, 3.2vw, 46px); color: var(--blue); letter-spacing: -0.02em; }
.as-stat .as-l { font-size: 13px; color: var(--ink-3); }
.as-vs { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.as-vs b { color: var(--blue); font-weight: 500; }
.as-body { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.as-bul { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.as-bul li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.as-bul li::before { content: "✓"; color: var(--blue); font-weight: 700; }

/* ----- S17 · CV Database (drench pipeline) ----- */
.cvdb { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr minmax(280px, 0.75fr); gap: clamp(22px, 3vw, 46px); align-items: center; }
.cvdb-flow { display: flex; flex-direction: column; gap: 0; }
.cvdb-step { display: flex; gap: 18px; align-items: flex-start; position: relative; padding: clamp(14px, 2.6vh, 24px) 0; }
.cvdb-step .cs-ic { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: var(--lime); font-size: 23px; position: relative; z-index: 1; }
.cvdb-step:not(:last-child)::before { content: ""; position: absolute; left: 26px; top: 72px; bottom: -12px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,.4) 0 4px, transparent 4px 9px); }
.cvdb-step b { display: block; font-family: var(--f-head); font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; }
.cvdb-step p { font-size: clamp(13.5px, 1.15vw, 15.5px); color: rgba(255,255,255,.75); margin-top: 4px; max-width: 46ch; }
.cvdb-cv { position: absolute; left: 20px; top: 44px; width: 13px; height: 17px; border-radius: 3px; background: #fff; opacity: 0; }
.slide.active .cvdb-cv { animation: cvFlow 2.6s linear infinite; animation-delay: var(--fd); }
@keyframes cvFlow { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 0.9; } 82% { opacity: 0.9; } 100% { transform: translateY(96px); opacity: 0; } }
.cvdb-side { display: flex; flex-direction: column; gap: 16px; }
.cvdb-pool { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.07); border-radius: 18px; padding: clamp(18px, 2vw, 26px); }
.cvdb-pool .reslabel { color: var(--lime); }
.cvdb-num { font-family: var(--f-head); font-weight: 800; font-size: clamp(44px, 4.4vw, 68px); letter-spacing: -0.025em; line-height: 1; }
.cvdb-sub { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.45; }
.cvdb-stats { display: flex; gap: 10px; }
.cvdb-stat { flex: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(255,255,255,.06); padding: 12px; }
.cvdb-stat b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(17px, 1.6vw, 22px); color: var(--lime); white-space: nowrap; }
.cvdb-stat span { font-size: 11.5px; color: rgba(255,255,255,.7); line-height: 1.3; display: block; margin-top: 3px; }

/* ----- S18 · Quality funnel (real silhouette) ----- */
.qf { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 3vw, 48px); align-items: center; }
.qf-shape { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.qf-row { display: grid; place-items: center; position: relative; width: var(--w); min-width: 150px; transition: width 600ms var(--ease); }
.qf-band { width: 100%; border-radius: 11px; background: var(--blue); opacity: calc(0.34 + var(--i) * 0.22); height: clamp(44px, 8.6vh, 66px); clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%); display: grid; place-items: center; }
.qf-row.win .qf-band { background: var(--lime); opacity: 1; }
.qf-row .qf-n { position: absolute; font-family: var(--f-head); font-weight: 800; font-size: clamp(19px, 1.9vw, 26px); color: #fff; }
.qf-row.win .qf-n { color: var(--ink); }
.qf-labels { display: grid; grid-auto-rows: calc(clamp(44px, 8.6vh, 66px) + 5px); align-content: center; align-items: center; min-width: 0; }
.qf-lab { display: flex; gap: 12px; align-items: baseline; }
.qf-lab .n { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); flex: 0 0 34px; text-align: right; }
.qf-lab b { display: block; font-family: var(--f-head); font-size: clamp(14.5px, 1.35vw, 17.5px); font-weight: 700; }
.qf-lab span { display: block; font-size: 12.5px; color: var(--ink-3); }
.qf-lab.win b { color: var(--blue); }

/* ----- S19 · Publish + ATS ----- */
.aj { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 0.8fr) 1.2fr; gap: clamp(20px, 2.6vw, 40px); }
.aj-sec-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 12px; }
.aj-publish { display: flex; flex-direction: column; min-width: 0; }
.aj-methods { display: flex; flex-direction: column; gap: 10px; }
.aj-method { display: flex; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 13px 15px; }
.aj-method .ajm-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 17px; }
.aj-method b { font-family: var(--f-head); font-size: 14.5px; font-weight: 700; }
.aj-method p { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.aj-ats { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.aj-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.aj-col { border: 1px solid var(--line); border-radius: 14px; background: var(--wash); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ajc-h { display: flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 700; font-size: 12.5px; padding: 2px 2px 4px; }
.ajc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.ajc-n { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); }
.aj-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 9px 10px; }
.aj-card b { display: block; font-size: 12.5px; font-weight: 700; }
.aj-card span { display: block; font-size: 11px; color: var(--ink-3); }
.aj-card em { display: block; font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--blue); margin-top: 4px; }
.aj-card.hot { border-color: var(--blue); box-shadow: 3px 3px 0 rgba(19,0,255,.1); }
.aj-card.ghost { opacity: 0.22; border-style: dashed; box-shadow: none; }
.aj-fly { position: fixed; z-index: 60; margin: 0; transition: transform 750ms var(--ease-io); box-shadow: 0 16px 34px -14px rgba(19, 0, 255, 0.4); background: #fff; }

/* ----- S20 · Reporting ----- */
.rep { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(14px, 1.8vw, 22px); gap: 12px; }
.rep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rep-title { display: flex; align-items: center; gap: 9px; font-family: var(--f-head); font-weight: 700; font-size: 14px; }
.rep-title .mark-icon { width: 22px; height: 22px; border-radius: 6px; }
.rep-title .rep-url { font-family: var(--f-mono); font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.rep-range { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.rep-rbtn { padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.rep-rbtn.on { background: var(--blue); color: #fff; }
.rep-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rep-kpi { border: 1px solid var(--line-soft); background: var(--wash); border-radius: 13px; padding: 11px 14px; min-width: 0; }
.rep-kpi .rk-l { font-size: 11.5px; color: var(--ink-3); }
.rep-kpi .rk-v { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 2vw, 28px); color: var(--blue); letter-spacing: -0.02em; white-space: nowrap; }
.rep-kpi .rk-d { font-family: var(--f-mono); font-size: 10.5px; color: var(--blue-ink); }
.rep-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.rep-card { border: 1px solid var(--line-soft); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rep-sec-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-head); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.rep-meta { font-family: var(--f-mono); font-weight: 400; font-size: 10.5px; color: var(--ink-3); }
.rep-bars { flex: 1; min-height: 72px; display: flex; align-items: flex-end; gap: 7px; }
.rep-bar { flex: 1; border-radius: 6px 6px 3px 3px; background: var(--blue); height: var(--h); opacity: calc(0.45 + var(--i) * 0.07); min-height: 6px; transition: height 500ms var(--ease); }
.rep-bar:last-child { background: var(--lime); opacity: 1; }
.rep-funnel-bars { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.rep-frow { display: grid; grid-template-columns: 86px 1fr 62px; gap: 9px; align-items: center; }
.rf-l { font-size: 11.5px; color: var(--ink-3); }
.rf-track { height: 10px; border-radius: 5px; background: var(--wash); overflow: hidden; }
.rf-bar { height: 100%; width: var(--w); border-radius: 5px; background: var(--blue); opacity: calc(1 - var(--i) * 0.16); transition: width 500ms var(--ease); }
.rf-v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-align: right; }
.rep-secondary { display: flex; gap: clamp(16px, 2.4vw, 40px); padding-top: 2px; }
.rep-sk b { font-family: var(--f-head); font-weight: 800; font-size: 16.5px; margin-right: 7px; }
.rep-sk span { font-size: 12px; color: var(--ink-3); }

/* ----- S21 · Vergleich ----- */
.cmp-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.cmp-bench { display: flex; gap: clamp(14px, 2vw, 30px); align-items: baseline; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 12px 18px; }
.bench-item { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.bench-item .bi-who { font-family: var(--f-head); font-weight: 700; font-size: 13.5px; }
.bench-item .bi-v { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); }
.bench-item.us { padding: 5px 12px; border-radius: 999px; background: var(--blue); color: #fff; }
.bench-item.us .bi-v { color: var(--lime); }
.bench-sep { color: var(--line); }
.cmp-scroll { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
table.cmp { width: 100%; border-collapse: collapse; height: 100%; }
.cmp th, .cmp td { padding: 6px 14px; font-size: 12.8px; text-align: center; border-top: 1px solid var(--line-soft); }
.cmp thead th { border-top: 0; font-family: var(--f-head); font-weight: 700; font-size: 13px; padding: 10px 14px; }
.cmp td:first-child, .cmp th:first-child { text-align: left; font-weight: 600; color: var(--ink-2); width: 34%; }
.cmp .me { background: var(--wash); }
.cmp thead .me { background: var(--blue); color: #fff; border-radius: 0; }
.cmp .ico { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-size: 11.5px; font-weight: 800; }
.cmp .ico.full { background: var(--blue); color: #fff; }
.cmp .ico.part { background: var(--wash-2); color: var(--blue); border: 1px solid rgba(19,0,255,.4); }
.cmp .ico.none { color: var(--ink-3); border: 1.5px solid rgba(16,16,24,.22); background: transparent; position: relative; }
.cmp .ico.none::after { content: ""; width: 8px; height: 1.5px; background: rgba(16,16,24,.35); }

/* ----- S22 · Angebots-Rechner ----- */
.bmode { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; margin-bottom: 14px; align-self: flex-start; }
.bmode button { padding: 10px 18px; font-weight: 700; font-size: 14px; font-family: var(--f-head); color: var(--ink-3); }
.bmode button.on { background: var(--blue); color: #fff; }
.builder { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr minmax(330px, 0.95fr); gap: clamp(20px, 2.8vw, 46px); }
.builder-controls { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.bgroup .blabel { font-weight: 600; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.opt-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 13.5px; color: var(--ink-2); transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.opt:hover { border-color: var(--blue); color: var(--blue); }
.opt.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt.opt-fil.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.opt:disabled { opacity: 0.55; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.qty button { width: 42px; height: 42px; font-size: 19px; color: var(--blue); }
.qty input { width: 54px; text-align: center; border: 0; font: 700 16px var(--f-head); color: var(--ink); }
.builder-rec { display: flex; gap: 10px; align-items: baseline; border: 1px solid var(--line); border-left: 0; border-radius: 14px; background: #fff; padding: 11px 16px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 12px; outline: 2px solid var(--blue); }
.builder-rec .rec-ic { color: var(--blue); }
.receipt { background: var(--dark); border-radius: 20px; color: #eef0f6; padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 9px; align-self: start; box-shadow: 0 24px 60px -28px rgba(10, 0, 168, 0.45); }
.receipt .rtag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--lime); text-transform: uppercase; }
.receipt .price { font-family: var(--f-head); font-weight: 800; font-size: clamp(38px, 3.6vw, 52px); letter-spacing: -0.02em; line-height: 1; }
.receipt .price small { font-size: 0.36em; font-weight: 600; color: rgba(255,255,255,.6); }
.receipt .pricesub { font-size: 13px; color: rgba(255,255,255,.72); }
.receipt .surcharge { font-family: var(--f-mono); font-size: 11.5px; color: var(--lime); }
.receipt .cpa { display: flex; align-items: baseline; gap: 10px; border: 1px solid rgba(198,250,2,.35); background: rgba(198,250,2,.08); border-radius: 12px; padding: 10px 14px; margin: 6px 0; }
.receipt .cpa .cn { font-family: var(--f-head); font-weight: 800; font-size: 24px; color: var(--lime); }
.receipt .cpa .cl { font-size: 12px; color: rgba(255,255,255,.75); }
.receipt .rline { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.receipt .rline .rl { color: rgba(255,255,255,.7); }
.receipt .rline .rv-val { font-family: var(--f-mono); font-size: 13px; }
.receipt .rline .rv-val.lime { color: var(--lime); }
.receipt .rroi { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; font-size: 12.5px; color: rgba(255,255,255,.75); }
.receipt .rroi-v { font-family: var(--f-head); font-weight: 700; font-size: 16px; color: #fff; }
.receipt .rroi-v small { color: rgba(255,255,255,.6); font-weight: 400; }
.receipt .rsave { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.8); border: 1px dashed rgba(255,255,255,.25); border-radius: 10px; padding: 9px 12px; }
.receipt .rsave b { color: var(--lime); }
.receipt .btn { justify-content: center; margin-top: 8px; }
.receipt .flash { animation: numFlash 500ms ease; }

/* ----- S3b · Kunden-Analyse (per-prospect, via ?kunde=) ----- */
.ku { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(22px, 3vw, 46px); align-content: center; }
.ku-left { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 24px); min-width: 0; }
.ku-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(14.5px, 1.35vw, 17px); margin-bottom: 10px; }
.ku-right { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ku-rows { display: flex; flex-direction: column; gap: clamp(10px, 1.8vh, 16px); }
.ku-row { display: grid; grid-template-columns: minmax(110px, 0.7fr) 1fr auto auto; gap: 12px; align-items: center; }
.ku-row .kr-l { font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ku-row .kr-track { height: 14px; border-radius: 7px; background: var(--wash); overflow: hidden; }
.ku-row .kr-fill { height: 100%; border-radius: 7px; background: var(--blue); width: 0; transition: width 0.7s var(--ease); }
.ku-row:first-child .kr-fill { background: var(--lime); }
.ku-row:first-child .kr-l { color: var(--ink); font-weight: 700; }
.ku-row .kr-n { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); min-width: 30px; text-align: right; }
.ku-chip { font-family: var(--f-mono); font-size: 10.5px; color: var(--hot); border: 1px solid rgba(255, 92, 65, 0.35); border-radius: 6px; padding: 3px 7px; white-space: nowrap; }
.ku-reach { margin-top: clamp(12px, 2vh, 18px); padding-top: clamp(12px, 2vh, 18px); border-top: 1px dashed var(--line); display: flex; align-items: baseline; gap: 12px; }
.ku-reach b { font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 2.4vw, 36px); color: var(--blue); white-space: nowrap; }
.ku-reach span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* ----- S23 · Close ----- */
.slide-close .slide-inner { justify-content: center; align-items: center; text-align: center; }
.close-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.close-path path { fill: none; stroke: var(--lime); stroke-width: 4.5; stroke-linecap: round; opacity: 0.65; }
.js .close-path path { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
.js .slide.active .close-path path { animation: markDraw 1.6s var(--ease) 0.2s forwards; }
.close-kick { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--lime); margin-bottom: 18px; }
.slide-close .lead { margin: 18px auto 0; }
.recap { display: flex; gap: clamp(26px, 4vw, 60px); justify-content: center; margin: clamp(22px, 4vh, 40px) 0; }
.recap-i b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(30px, 3vw, 44px); color: var(--lime); letter-spacing: -0.02em; white-space: nowrap; }
.recap-i span { font-size: 13px; color: rgba(255,255,255,.72); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hl-lime { color: var(--lime); }
/* the concrete next steps: what happens after the yes */
.steps3 { display: flex; gap: clamp(14px, 2vw, 26px); justify-content: center; margin-top: clamp(24px, 4vh, 44px); }
.steps3 .st { flex: 0 1 280px; text-align: left; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); border-radius: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: baseline; }
.steps3 .st b { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--lime); }
.steps3 .st span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.steps3 .st span strong { color: #fff; }

/* ---------- 9 · Overview + Briefing ---------- */
.overview { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(14, 14, 22, 0.55); backdrop-filter: blur(6px); display: grid; place-items: center; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 220ms ease, visibility 0s linear 220ms; }
.overview.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 220ms ease; }
.ov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ov-head .eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3); }
.ov-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); background: #fff; }
.overview:not(.brief) > .ov-head { display: none; }
.ov-grid { width: min(1080px, 92vw); max-height: 84vh; overflow: auto; background: var(--paper); border-radius: 20px; padding: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 9px; }
.ov-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 11px 13px; transition: border-color 150ms ease; }
.ov-item:hover { border-color: var(--blue); }
.ov-item.current { outline: 2px solid var(--blue); }
.ov-n { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.ov-t { font-weight: 600; font-size: 13.5px; flex: 1; }
.ov-sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line); }
.ov-sw.s-blue { background: var(--blue); }
.ov-sw.s-white { background: #fff; }

.brief-card { width: min(660px, 92vw); background: var(--paper); border-radius: 20px; padding: 26px; }
.brief-intro { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; max-width: 58ch; }
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 20px; }
.bf { display: flex; flex-direction: column; gap: 6px; }
.bf:first-child { grid-column: 1 / -1; }
.bf > span { font-weight: 600; font-size: 13px; color: var(--ink-3); }
.bf > span em { font-style: normal; opacity: 0.7; }
.bf input, .bf select { padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); font: 600 14.5px var(--f-body); color: var(--ink); background: #fff; }
.brief-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bf-copied { font-family: var(--f-mono); font-size: 12px; color: var(--blue); }

/* ---------- 10 · Print plan ---------- */
.plan-print { display: none; }
@media print {
  .deck, .deck-top, .deck-nav, .deck-progress, .overview { display: none !important; }
  .plan-print { display: block; }
  .plan-doc { font-family: var(--f-body); color: #111; padding: 40px; }
  .plan-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
  .plan-logo { font-family: var(--f-head); font-weight: 800; font-size: 24px; color: var(--blue); }
  .plan-tag { font-family: var(--f-mono); font-size: 12px; }
  .plan-doc h1 { font-family: var(--f-head); font-size: 30px; margin-bottom: 6px; }
  .plan-sub { color: #555; margin-bottom: 20px; }
  .plan-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
  .plan-stats b { display: block; font-family: var(--f-head); font-size: 22px; color: var(--blue); }
  .plan-stats span { font-size: 12px; color: #555; }
  .plan-doc h2 { font-family: var(--f-head); font-size: 19px; margin: 18px 0 8px; }
  .plan-doc p { font-size: 14px; line-height: 1.55; margin-bottom: 8px; }
  .plan-foot { margin-top: 26px; font-family: var(--f-mono); font-size: 11px; color: #777; }
}

/* ---------- 11 · Breakpoints (presenter laptops) ---------- */
@media (max-height: 760px) {
  .slide-inner { padding-top: 64px; }
  .shead { margin-bottom: 14px; }
  .h-2 { font-size: clamp(26px, 2.7vw, 36px); }
  .lead { font-size: 15px; }
  .figrid { gap: 4px 8px; }
  .lj-timeline { height: 46px; }
  .rep-kpis { gap: 8px; }
  .qf-band { height: clamp(38px, 8vh, 52px); }  .feat { padding: 6px 11px; gap: 10px; }
  .feat .f-ic { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  .feat b { font-size: 13.5px; }
  .feat-rail { gap: 6px; }
  .prod-stats b { font-size: clamp(18px, 1.8vw, 24px); }
  .prod-big b { font-size: clamp(44px, 4.2vw, 60px); }
  .ck-screen { min-height: 196px; }
  .lap-screen { min-height: 214px; }
  .cko-cta { padding: 8px; }
}
@media (max-height: 640px) {
  .slide-inner { padding-top: 56px; }
  .rail { margin-bottom: 8px; }
  .zahlen-wall { gap: 14px; }
  .prod-big b { font-size: clamp(40px, 4.4vw, 56px); }
  .stat-xl { font-size: clamp(44px, 5vw, 62px); }
  .hero-map svg { height: min(58vh, 520px); }
}
/* Large presenter screens: the whole canvas scales up via body zoom, set in
   app.js as min(vw/1500, vh/845) so the effective canvas never gets shorter
   than the designed 810px height (CSS media queries can't do this math). */

@media (max-width: 1120px) {
  .shead .h-2 { max-width: none; }
  .pain, .tgt, .calc, .jb, .jbz, .qf, .aj, .as2 { grid-template-columns: 1fr; }
  .hob { grid-template-columns: 1fr; }
  .slide { overflow-y: auto; }
  .slide-inner { padding-bottom: 90px; }
}


/* =========================================================================
   12 · DRAWING CHROME — Titelblock, Bauplan-Leiste, wipe, grain, annotations
   ========================================================================= */

/* numbers behave like a drawing everywhere */
body { font-variant-numeric: tabular-nums; }

/* ---------- Titelblock (technical drawing title block) ---------- */
.tb { display: none !important; 
  flex: 0 0 auto; display: grid; gap: 2px; text-align: right;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--ink-3); line-height: 1.35;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 6px 8px 0 18px;
}
.tb b { font-weight: 500; color: var(--ink-2); }
.tb .tb-k { color: var(--blue); }
.s-blue .tb { display: none !important;  border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.62); }
.s-blue .tb b { color: rgba(255, 255, 255, 0.85); }
.s-blue .tb .tb-k { color: var(--lime); }
.tb-free { position: absolute; right: 0; bottom: 0; }
.slide-hero .tb-free, .slide-close .tb-free { right: 0; bottom: 4px; }
.lj-below .tb { display: none !important;  margin-left: 18px; }

/* paper slides get registration corners too (drench has them already) */
.slide.s-white::after {
  content: ""; position: absolute; inset: 14px; pointer-events: none;
  background:
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) left top / 11px 1.5px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) left top / 1.5px 11px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) right top / 11px 1.5px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) right top / 1.5px 11px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) left bottom / 11px 1.5px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) left bottom / 1.5px 11px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) right bottom / 11px 1.5px,
    linear-gradient(rgba(19,0,255,.30), rgba(19,0,255,.30)) right bottom / 1.5px 11px;
  background-repeat: no-repeat;
}

/* ---------- Bauplan-Leiste (bottom thread: the deck's one continuous line) */
.thread {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 9px; height: 18px;
  z-index: var(--z-nav); pointer-events: auto;
}
.thread .th-line { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--line); }
.thread .th-fill { position: absolute; left: 0; top: 50%; height: 1.5px; width: 0; background: var(--blue); transition: width 400ms var(--ease); }
.th-tick {
  position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--paper); border: 1.5px solid var(--ink-3); border-radius: 1px; padding: 0;
  transition: background 200ms ease, border-color 200ms ease, transform 150ms var(--ease);
}
.th-tick:hover { transform: scale(1.7); border-color: var(--blue); }
.th-tick.done { background: var(--blue); border-color: var(--blue); }
.th-tick.th-act { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: rotate(45deg); }
.th-tick.th-act:hover { transform: rotate(45deg) scale(1.5); }
.th-dot {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--paper);
  transition: left 400ms var(--ease); pointer-events: none;
}
.scheme-blue .thread .th-line { background: rgba(255,255,255,.25); }
.scheme-blue .thread .th-fill { background: var(--lime); }
.scheme-blue .th-tick { background: var(--blue); border-color: rgba(255,255,255,.45); }
.scheme-blue .th-tick.done { background: var(--lime); border-color: var(--lime); }
.scheme-blue .th-dot { background: var(--lime); box-shadow: 0 0 0 3px rgba(10,0,168,.8); }

/* ---------- signature transition: blueprint wipe ---------- */
.js .slide.active.wipe { transition: none; animation: wipeIn 300ms var(--ease); }
.js .slide.active.wipe-prev { transition: none; animation: wipeInR 300ms var(--ease); }
@keyframes wipeIn { from { clip-path: inset(-1% 100% -1% -1%); } to { clip-path: inset(-1% -1% -1% -1%); } }
@keyframes wipeInR { from { clip-path: inset(-1% -1% -1% 100%); } to { clip-path: inset(-1% -1% -1% -1%); } }
.slide.was { visibility: visible; opacity: 1; transition: none; z-index: 1; content-visibility: visible; }
.wipe-edge {
  position: fixed; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--blue); z-index: 34; opacity: 0; pointer-events: none;
  transform: translateX(-6px);
}
.scheme-blue .wipe-edge { background: var(--lime); }
.wipe-edge.run-next { animation: edgeN 300ms var(--ease); }
.wipe-edge.run-prev { animation: edgeP 300ms var(--ease); }
@keyframes edgeN { 0% { opacity: 1; transform: translateX(-6px); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(100vw); } }
@keyframes edgeP { 0% { opacity: 1; transform: translateX(100vw); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .js .slide.active.wipe, .js .slide.active.wipe-prev { animation: none; }
}

/* ---------- grain on drench (printed, not vector) ---------- */
.slide.s-blue::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/png;base64,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");
  background-repeat: repeat; background-size: 96px 96px;
  opacity: 0.55;
}
.slide.s-blue > * { position: relative; z-index: 1; }

/* ---------- device screens get a slow light sweep ---------- */
.phone { position: relative; overflow: hidden; }
.phone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%);
  transform: translateX(-130%);
}
.slide.active .phone::before { animation: sweep 6s ease-in-out 1.4s 2; }
@keyframes sweep { 0% { transform: translateX(-130%); } 38% { transform: translateX(130%); } 100% { transform: translateX(130%); } }

/* ---------- oversized act numerals (outline, behind content) ---------- */
.act-num {
  position: absolute; right: -14px; top: 4px; z-index: 0;
  font-family: var(--f-head); font-weight: 800; font-size: clamp(220px, 34vh, 340px);
  line-height: 0.8; letter-spacing: -0.04em; pointer-events: none; user-select: none;
  color: transparent; -webkit-text-stroke: 2px rgba(19, 0, 255, 0.09);
}
.s-blue .act-num { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.13); }

/* ---------- marker annotation family (drawn, lime) ---------- */
.mk-loop { position: absolute; inset: -34% -26%; width: 152%; height: 168%; overflow: visible; pointer-events: none; }
.mk-loop path { fill: none; stroke: var(--lime); stroke-width: 5; stroke-linecap: round; }
.js .mk-loop path { stroke-dasharray: 460; stroke-dashoffset: 460; }
.js .slide.active .mk-loop path { animation: markDraw 0.8s var(--ease) 0.9s forwards; }
.growth .g-arrow { fill: none; stroke: var(--lime-deep); stroke-width: 2.6; stroke-linecap: round; }
.js .growth .g-arrow { stroke-dasharray: 120; stroke-dashoffset: 120; }
.js .slide.active .growth .g-arrow { animation: markDraw 0.6s var(--ease) 1.6s forwards; }

/* ---------- dimension lines (technical measure) ---------- */
.qf-shape { position: relative; }
.qf-dim {
  position: absolute; left: clamp(-46px, -3.4vw, -34px); top: 4px; bottom: 4px; width: 14px;
  border-left: 1.5px solid rgba(19, 0, 255, 0.45);
}
.qf-dim::before, .qf-dim::after { content: ""; position: absolute; left: -5.5px; width: 10px; height: 1.5px; background: rgba(19, 0, 255, 0.45); }
.qf-dim::before { top: 0; } .qf-dim::after { bottom: 0; }
.qf-dim span {
  position: absolute; top: 50%; left: -10px; transform: rotate(-90deg) translateY(-50%); transform-origin: left center;
  font-family: var(--f-mono); font-size: 11px; color: var(--blue); white-space: nowrap; background: var(--paper); padding: 0 8px;
}
.vak-track::before, .vak-track::after { content: ""; position: absolute; top: -5px; bottom: -5px; width: 1.5px; background: rgba(19, 0, 255, 0.4); }
.vak-track::before { left: 0; } .vak-track::after { right: 0; }

/* ---------- blueprint cursor readout (drench slides, decorative) ---------- */
.bp-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 44; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.bp-cursor.on { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
.bp-cursor .bpc-x { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(198, 250, 2, 0.22); }
.bp-cursor .bpc-y { position: absolute; left: 0; right: 0; height: 1px; background: rgba(198, 250, 2, 0.22); }
.bp-cursor .bpc-tag { position: absolute; font-family: var(--f-mono); font-size: 10px; color: rgba(198, 250, 2, 0.75); transform: translate(14px, 14px); white-space: nowrap; }

/* ---------- overview as act-grouped mini-map ---------- */
.ov-acth {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--ink-3);
  margin: 10px 2px 2px; padding-bottom: 6px; border-bottom: 1px dashed var(--line);
}
.ov-acth b { color: var(--blue); font-weight: 500; }
.ov-acth::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.ov-item { position: relative; padding-left: 26px; }
.ov-item::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border: 1.5px solid var(--ink-3); border-radius: 2px; background: #fff; }
.ov-item.current::before { background: var(--blue); border-color: var(--blue); }
.ov-item .ov-n { display: none; }

/* ---------- Briefing modal: Auftragszettel ---------- */
.brief-card { border: 1px solid var(--line); box-shadow: 8px 8px 0 rgba(19, 0, 255, 0.08); }
.brief-card .ov-head { border: 1px solid var(--line); background: var(--wash); padding: 9px 13px; border-radius: 10px; }
.brief-card .ov-head .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }


/* ---------- lite mode (?lite=1 · Taste L · auto bei schwacher Hardware) --- */
body.lite .slide.s-blue::before,
body.lite .phone::before,
body.lite .bp-cursor { display: none !important; }
.js body.lite .slide.active.wipe,
.js body.lite .slide.active.wipe-prev,
body.lite .wipe-edge { animation: none !important; }
.js body.lite .slide .rv { opacity: 1; transform: none; animation: none; }
.js body.lite .hero-dot { opacity: 1; transform: none; animation: none !important; }
body.lite .plx { transform: none !important; will-change: auto; }
body.lite .hub-ring { display: none; }


/* =========================================================================
   13 · STYLIZED PRODUCT MOCKS — static, composed, no auto-cycling
   ========================================================================= */

/* Lern-App phone (slide 8): the product finally shown as a product */
.prod-3 { grid-template-columns: 1.05fr minmax(232px, 264px) minmax(300px, 0.9fr); }
.la-phone { width: 100%; align-self: center; }
.lap-screen { margin-top: 12px; border-radius: 16px; background: #16161f; padding: 13px; min-height: 252px; display: flex; flex-direction: column; gap: 10px; }
.lap-chip { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--f-mono); font-size: 10.5px; color: var(--lime); border: 1px solid rgba(198, 250, 2, 0.35); border-radius: 7px; padding: 4px 9px; }
.lap-chip .ic { font-size: 12px; }
.lap-card { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 12px; }
.lap-q { display: block; font-size: 12.5px; font-weight: 600; color: #eef0f6; line-height: 1.4; }
.lap-a { margin-top: 9px; display: inline-block; font-family: var(--f-mono); font-size: 12px; color: var(--lime); border-bottom: 1.5px dashed rgba(198, 250, 2, 0.4); padding-bottom: 2px; }
.lap-dots { display: flex; gap: 5px; }
.lap-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.lap-dots i.on { background: var(--lime); }
.lap-xp { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.lap-xp i { display: block; height: 100%; width: 72%; border-radius: 4px; background: linear-gradient(90deg, #6f86ff, var(--lime)); }
.lap-xpl { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.6); }
.lap-tabs { margin-top: auto; display: flex; justify-content: space-around; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; color: rgba(255, 255, 255, 0.45); font-size: 16px; }
.lap-tabs .on { color: var(--lime); }

/* CareerKit composed overview screen (default, static) */
.cks-over { gap: 10px; }
.cko-top { display: flex; align-items: center; gap: 12px; }
.cko-score { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--lime) 338deg, rgba(255, 255, 255, 0.12) 0); display: grid; place-items: center; }
.cko-score::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #16161f; }
.cko-score b { position: relative; font-family: var(--f-head); font-weight: 800; font-size: 19px; color: #fff; }
.cko-id b { display: block; font-size: 13px; color: #eef0f6; }
.cko-id span { font-family: var(--f-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.cko-row { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 8px 11px; font-size: 12px; color: #eef0f6; }
.cko-row .ic { color: var(--lime); font-size: 14px; flex: 0 0 auto; }
.cko-row em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 10.5px; color: var(--lime); }
.cko-row.next { border: 1px solid rgba(198, 250, 2, 0.35); background: rgba(198, 250, 2, 0.08); }
.cko-cta { margin-top: auto; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: 13px; color: var(--ink); background: var(--lime); border-radius: 10px; padding: 10px; }


/* =========================================================================
   14 · ROUND 7 — Anzeige-Mock im Verteilungs-Hub, Traffic-Partikel,
        Lern-App-Screens je Auswahl, Journey-Stationen mit Icons
   ========================================================================= */

/* Verteilung: the centre is the product itself, a mini job ad */
.dh-ad { width: 100%; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); padding: 11px 12px; text-align: left; }
.dh-ad .dha-head { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); margin-bottom: 7px; }
.dh-ad .dha-head .mark-icon { width: 16px; height: 16px; border-radius: 4px; }
.dh-ad b { display: block; font-family: var(--f-head); font-size: 14.5px; font-weight: 800; color: var(--ink); }
.dh-ad span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.dh-ad .dha-cta { display: inline-block; margin-top: 9px; font-style: normal; font-family: var(--f-head); font-weight: 700; font-size: 11px; color: var(--ink); background: var(--lime); border-radius: 7px; padding: 5px 10px; }
.dh-traffic { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dh-traffic b { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); color: var(--blue); font-variant-numeric: tabular-nums; }
.dh-traffic span { display: block; font-size: 11.5px; color: var(--ink-3); }

/* traffic particles flowing the lanes into the ad */
.dp { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: 0; pointer-events: none; z-index: 0; offset-rotate: 0deg; }
.dp.on { animation: dpFlow 1.5s linear infinite; animation-delay: var(--pd, 0s); }
@keyframes dpFlow {
  0% { offset-distance: 0%; opacity: 0; }
  12% { opacity: 0.9; }
  82% { opacity: 0.9; }
  100% { offset-distance: 100%; opacity: 0; }
}
body.lite .dp { display: none; }

/* Lern-App: one screen per selected feature */
.lap-rows { display: flex; flex-direction: column; gap: 7px; }
.lap-row { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.07); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: #eef0f6; }
.lap-row .ic { color: var(--lime); font-size: 13px; flex: 0 0 auto; }
.lap-row em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 10px; color: rgba(255, 255, 255, 0.55); }
.lap-row.done em { color: var(--lime); }
.lap-wave { display: flex; align-items: flex-end; gap: 3px; height: 40px; padding: 4px 2px; }
.lap-wave i { flex: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.lap-wave i.hot { background: var(--lime); }
.lap-doclines { display: flex; flex-direction: column; gap: 6px; }
.lap-doclines i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.lap-doclines i.w70 { width: 70%; }
.lap-sum { border: 1px solid rgba(198, 250, 2, 0.35); background: rgba(198, 250, 2, 0.08); border-radius: 10px; padding: 9px 11px; font-size: 11px; color: #eef0f6; line-height: 1.45; }
.lap-sum b { color: var(--lime); font-family: var(--f-mono); font-weight: 500; font-size: 10px; display: block; margin-bottom: 3px; }
.lap-score { display: flex; align-items: baseline; gap: 10px; }
.lap-score b { font-family: var(--f-head); font-weight: 800; font-size: 34px; color: var(--lime); }
.lap-score span { font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.lap-duel { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 12px; }
.lap-duel .ld-p { text-align: center; font-size: 10.5px; color: rgba(255, 255, 255, 0.7); }
.lap-duel .ld-p i { display: block; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 5px; background: linear-gradient(140deg, var(--blue), #6f86ff); }
.lap-duel .ld-p.you i { background: linear-gradient(140deg, var(--lime), #7fae00); }
.lap-duel .ld-score { font-family: var(--f-head); font-weight: 800; font-size: 26px; color: #fff; }


/* =========================================================================
   15 · ROUND 8 — Momentum-Folie (Wachstum + Auszeichnungen statt BA-Statistik)
   ========================================================================= */
.mom { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 3.2vw, 52px); align-content: center; }
.mom-left { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 24px); min-width: 0; }
.mom-left .growth svg { height: clamp(150px, 26vh, 250px); }
.mom-stats { padding-top: clamp(10px, 1.8vh, 16px); border-top: 1px dashed var(--line); }
.mom-right { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; }
.mom-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); }
.award-rail { display: flex; flex-direction: column; gap: 10px; }
.award {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
  padding: 13px 16px;
}
.award:first-child { border: 2px solid var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.award .aw-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font-size: 20px; }
.award:not(:first-child) .aw-ic { background: var(--wash); color: var(--blue); }
.award b { display: block; font-family: var(--f-head); font-size: clamp(14.5px, 1.3vw, 17px); font-weight: 700; line-height: 1.25; }
.award span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
@media (max-height: 760px) {
  .award { padding: 10px 14px; }
  .award .aw-ic { width: 36px; height: 36px; font-size: 17px; }
  .mom-left .growth svg { height: clamp(130px, 22vh, 190px); }
}
@media (max-width: 1120px) { .mom { grid-template-columns: 1fr; } }


/* =========================================================================
   16 · ROUND 9 — Produkt-Screens wie das echte Produkt (hell, Blau-Karten,
        Lime-CTAs, Tab-Bar; Referenz: Live-CareerKit partner.studysmarter.de)
   ========================================================================= */

/* light product screen inside the dark hardware frame */
.pscr { background: #f6f6fa; border-radius: 18px; padding: 12px; color: var(--ink); display: flex; flex-direction: column; gap: 9px; min-height: 264px; }
.pscr-top { display: flex; align-items: baseline; gap: 8px; }
.pscr-top .pt-kick { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--ink-3); text-transform: uppercase; }
.pscr-top b { font-family: var(--f-head); font-weight: 800; font-size: 15px; }
.pscr-top .pt-live { margin-left: auto; font-family: var(--f-mono); font-size: 9.5px; color: var(--lime-deep); }
.pscr-tabs { margin-top: auto; display: flex; justify-content: space-around; align-items: center; background: #fff; border: 1px solid rgba(16, 16, 24, 0.07); border-radius: 12px; padding: 7px 4px 5px; }
.pscr-tabs .ptab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7.5px; font-weight: 600; color: rgba(16, 16, 24, 0.42); position: relative; }
.pscr-tabs .ptab .ic { font-size: 14px; }
.pscr-tabs .ptab.on { color: var(--blue); }
.pscr-tabs .ptab .pbadge { position: absolute; top: -5px; right: -12px; font-family: var(--f-mono); font-size: 7px; background: var(--lime); color: var(--ink); border-radius: 6px; padding: 1px 4px; }

/* the product's signature blue gradient card */
.pg-card { background: linear-gradient(155deg, #2a1bff 0%, var(--blue) 45%, var(--blue-deep) 100%); border-radius: 14px; padding: 12px; color: #fff; }
.pg-kick { display: block; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.1em; color: var(--lime); text-transform: uppercase; margin-bottom: 5px; }
.pg-card b { font-family: var(--f-head); font-weight: 800; font-size: 13.5px; line-height: 1.3; display: block; }
.pg-bar { margin-top: 9px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: 4px; background: #fff; }
.pg-sub { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: 8.5px; color: rgba(255, 255, 255, 0.75); }
.pg-cta { display: block; margin-top: 10px; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: 11.5px; color: var(--ink); background: var(--lime); border-radius: 9px; padding: 8px; box-shadow: 0 2px 0 var(--lime-deep); }

/* light rows / cards on product screens */
.pl-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); border-radius: 10px; padding: 8px 10px; font-size: 11px; color: var(--ink); }
.pl-row .ic { color: var(--blue); font-size: 13px; flex: 0 0 auto; }
.pl-row em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-3); }
.pl-row em.ok { color: var(--lime-deep); }
.pl-row.hot { border-color: var(--blue); background: var(--wash); }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-family: var(--f-mono); font-size: 9.5px; color: var(--blue); border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 4px 8px; }
.pl-chip .ic { font-size: 11px; }

/* re-skin the existing dark screen internals to the light product look */
.ck-screen, .lap-screen { background: #f6f6fa; }
.ck-toolname { color: var(--blue); }
.cks { color: var(--ink); }
.ck-done { color: var(--lime-deep); }
.ckcv-id b { color: var(--ink); }
.ckcv-id em { color: var(--ink-3); }
.ckcv-bars i { background: rgba(16, 16, 24, 0.08); }
.ckcv-bars i::after { background: var(--blue); }
.cklet-h { color: var(--ink-3); }
.cklet-lines i { background: rgba(16, 16, 24, 0.09); }
.cklet-lines i.sh { background: rgba(19, 0, 255, 0.35); }
.ckap-row { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); color: var(--ink); }
.ckap-badge { color: var(--lime-deep); }
.ckiv-q { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); color: var(--ink); }
.ckiv-fb { background: var(--wash); border-color: rgba(19, 0, 255, 0.25); color: var(--ink); }
.ckiv-score { color: var(--blue); }
.ckch.ai { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); color: var(--ink); }
.ckch.user { color: #fff; }
.cksk span { color: var(--ink-2); }
.cksk-bar { background: rgba(16, 16, 24, 0.08); }
.cksk-bar i { background: var(--blue); }
.cko-score { background: conic-gradient(var(--blue) 338deg, rgba(16, 16, 24, 0.1) 0); }
.cko-score::before { background: #f6f6fa; }
.cko-score b { color: var(--ink); }
.cko-id b { color: var(--ink); }
.cko-id span { color: var(--ink-3); }
.cko-row { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); color: var(--ink); }
.cko-row .ic { color: var(--blue); }
.cko-row em { color: var(--lime-deep); }
.cko-row.next { border-color: var(--blue); background: var(--wash); }
.cko-cta { box-shadow: 0 2px 0 var(--lime-deep); }
.lap-chip { color: var(--blue); border-color: var(--line); background: #fff; }
.lap-card { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); }
.lap-q { color: var(--ink); }
.lap-a { color: var(--blue); border-bottom-color: rgba(19, 0, 255, 0.35); }
.lap-dots i { background: rgba(16, 16, 24, 0.14); }
.lap-dots i.on { background: var(--blue); }
.lap-xp { background: rgba(16, 16, 24, 0.08); }
.lap-xp i { background: linear-gradient(90deg, var(--blue), #6f86ff); }
.lap-xpl { color: var(--ink-3); }
.lap-rows .lap-row { background: #fff; color: var(--ink); }
.lap-row .ic { color: var(--blue); }
.lap-row em { color: var(--ink-3); }
.lap-row.done em { color: var(--lime-deep); }
.lap-wave i { background: rgba(19, 0, 255, 0.25); }
.lap-wave i.hot { background: var(--blue); }
.lap-doclines i { background: rgba(16, 16, 24, 0.09); }
.lap-sum { background: var(--wash); border-color: rgba(19, 0, 255, 0.25); color: var(--ink); }
.lap-sum b { color: var(--blue); }
.lap-score b { color: var(--blue); }
.lap-score span { color: var(--ink-3); }
.lap-duel { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); }
.lap-duel .ld-p { color: var(--ink-2); }
.lap-duel .ld-score { color: var(--ink); }

/* job-alert phone (matching slide): light list like the real board */
.jm-ph-title { color: var(--ink); }
.jm-phone .pscr .jm-ph-title { font-family: var(--f-head); font-weight: 800; font-size: 14.5px; margin: 2px 2px 4px; color: var(--ink); }
.jm-card { background: #fff; border: 1px solid rgba(16, 16, 24, 0.08); }
.jm-card b { color: var(--ink); font-weight: 700; }
.jm-card span { color: var(--ink-3); }
.jmc-match { background: var(--lime); color: var(--ink); }
.jm-card.more { border: 1px dashed rgba(19, 0, 255, 0.4); color: var(--blue); background: #fff; }

/* WhatsApp + Mailing: realistic light channel mocks */
.as-mock { background: #efeef4; color: var(--ink); border: 1px solid rgba(16, 16, 24, 0.08); box-shadow: none; }
.as-mock .am-head { color: var(--ink); border-bottom-color: rgba(16, 16, 24, 0.1); }
.as-mock .am-ava { color: #fff; }
.as-mock .am-meta { color: var(--ink-3); }
.as-mock .am-bubble { background: #fff; color: var(--ink); border-radius: 3px 12px 12px 12px; box-shadow: 0 1px 1px rgba(16, 16, 24, 0.08); }
.as-mock .am-bubble b { color: var(--blue); }
.am-preview { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 1px rgba(16, 16, 24, 0.08); max-width: 94%; }
.am-preview .amp-strip { height: 4px; background: var(--blue); }
.am-preview .amp-body { padding: 8px 10px; }
.am-preview b { display: block; font-size: 11px; color: var(--ink); font-weight: 700; }
.am-preview span { display: block; font-size: 9.5px; color: var(--ink-3); margin-top: 2px; }
.am-preview .amp-link { display: block; font-family: var(--f-mono); font-size: 8.5px; color: var(--blue); margin-top: 5px; }
.as-mock .am-cta { background: #fff; color: var(--blue); border: 1px solid rgba(19, 0, 255, 0.3); font-weight: 600; }
.as-mock .am-time { align-self: flex-end; font-family: var(--f-mono); font-size: 8.5px; color: var(--ink-3); }
.as-mock .am-subject { color: var(--ink); font-size: 12.5px; }
.as-mock .am-line { background: rgba(16, 16, 24, 0.09); }
.as-mock .am-tag { color: var(--lime-deep); border-color: rgba(168, 214, 0, 0.5); }
.as-mock.mail { background: #fff; }
.as-mock.mail .pg-card b { font-size: 12.5px; }


/* round-9 micro-fixes */
.pscr-top .pt-live { white-space: nowrap; font-size: 9px; }
@media (max-height: 850px) {
  .prod .feat-rail .feat { padding: 8px 12px; }
  .prod .feat-rail { gap: 7px; }
  .prod-copy { gap: clamp(10px, 1.6vh, 16px); }
}


/* =========================================================================
   17 · V5 SCENES
   ========================================================================= */

/* zahlen: three big numbers side by side */
.ztrio { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); align-content: center; align-items: start; }
.zt { text-align: left; border-left: 2px solid rgba(255, 255, 255, 0.28); padding-left: clamp(16px, 1.8vw, 26px); }
.zt .stat { color: #fff; display: block; margin-bottom: 12px; font-size: clamp(48px, 4.6vw, 74px); }
.zt b { display: block; font-family: var(--f-head); font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; }
.zt .zsub { display: block; margin-top: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }

/* momentum y-axis */
.growth .g-y { font: 10.5px var(--f-mono); fill: var(--ink-3); }

/* hero: crowd variant */
.hero-crowd { display: grid; grid-template-columns: repeat(16, 1fr); gap: 10px 14px; align-content: center; height: min(62vh, 600px); width: 100%; }
.hero-map .hc-fig { height: auto; aspect-ratio: 1; }
.hero-map .ho-core svg { height: 74px; }
.hero-map .ho-tile .ic { width: 26px; height: 26px; }
.hc-fig { width: 100%; fill: rgba(255, 255, 255, 0.85); transform-box: fill-box; transform-origin: center; }
.hc-fig.lm { fill: var(--lime); }
.js .slide .hc-fig { opacity: 0; transform: translateY(14px) scale(0.7); }
.js .slide.active .hc-fig { animation: dotHome 0.7s var(--ease) var(--dd) forwards; }
body.lite .hc-fig { opacity: 1 !important; transform: none !important; animation: none !important; }

/* hero: orbit variant */
.hero-orbit { position: relative; height: min(62vh, 600px); }
.ho-ring { position: absolute; top: 50%; left: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); }
.ho-ring.r1 { width: 68%; aspect-ratio: 1; }
.ho-ring.r2 { width: 42%; aspect-ratio: 1; }
.ho-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 26px; background: #fff; display: grid; place-items: center; box-shadow: 0 24px 60px -20px rgba(5, 0, 90, 0.6); }
.ho-core svg { width: 74px; height: 74px; border-radius: 18px; }
.ho-spin { position: absolute; inset: 0; }
.js .slide.active .ho-spin { animation: hoSpin 60s linear infinite; }
@keyframes hoSpin { to { transform: rotate(360deg); } }
.ho-sat { position: absolute; top: 50%; left: 50%; transform: rotate(var(--a)) translateX(min(17vw, 200px)) rotate(calc(-1 * var(--a))); }
.js .slide.active .ho-sat { animation: hoSat 60s linear infinite; }
@keyframes hoSat { to { transform: rotate(calc(var(--a) + 360deg)) translateX(min(17vw, 200px)) rotate(calc(-1 * var(--a) - 360deg)); } }
.ho-tile { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 26px; margin: 0 auto; }
.ho-lab { display: block; text-align: center; margin-top: 7px; font-family: var(--f-mono); font-size: 11px; color: rgba(255, 255, 255, 0.85); }
body.lite .ho-spin, body.lite .ho-sat { animation: none !important; }

/* explorer breakdown */
.geo-side .res-breakdown { border-top: 1px dashed var(--line); padding-top: 12px; margin-top: 2px; }

/* streuverlust comparison */
.sv { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 2.6vw, 40px); align-content: center; align-items: center; }
.sv-col { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(16px, 2vw, 26px); min-width: 0; }
.sv-col:last-child { border: 2px solid var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.sv-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(14.5px, 1.35vw, 17px); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sv-grid { max-width: 420px; gap: 5px 9px; }
.sv-grid .tgt-fig { fill: rgba(16, 16, 24, 0.14); transform: scale(0.9); transition: fill 300ms ease, transform 300ms var(--ease); }
.sv-grid .tgt-fig.on { fill: var(--blue); transform: scale(1); }
.sv-grid .tgt-fig.on-hot { fill: var(--hot); transform: scale(1); }
.sv-read { margin-top: 14px; display: flex; gap: 12px; align-items: baseline; }
.sv-num { font-family: var(--f-head); font-weight: 800; font-size: clamp(22px, 2vw, 30px); white-space: nowrap; }
.sv-num.hot-n { color: var(--hot); }
.sv-num.us-n { color: var(--blue); }
.sv-read span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.sv-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sv-vs { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }
.sv-factor { text-align: center; border: 2px solid var(--blue); border-radius: 16px; background: var(--wash); padding: 14px 18px; }
.sv-factor b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(30px, 3vw, 44px); color: var(--blue); }
.sv-factor span { font-size: 12px; color: var(--ink-2); }

/* jbz pie */
.jbz-pie { position: relative; width: min(100%, 250px); margin: auto; }
.jbz-pie svg { width: 100%; height: auto; }
.jbz-pie-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.jbz-pie-c b { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 2vw, 28px); color: var(--ink); }
.jbz-pie-c span { font-size: 11.5px; color: var(--ink-3); }

/* matching machine */
.mm { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(170px, 210px) 1.15fr; gap: clamp(14px, 2vw, 30px); align-content: center; align-items: center; }
.mm-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(13.5px, 1.25vw, 16px); margin-bottom: 12px; }
.mm-profile { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(16px, 2vw, 24px); }
.mm-ava { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.mm-ava > span { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(140deg, var(--blue), #6f86ff); flex: 0 0 auto; }
.mm-ava b { display: block; font-family: var(--f-head); font-size: 15px; }
.mm-ava em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.mm-sigs { display: flex; flex-wrap: wrap; gap: 7px; }
.mm-sig { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink-3); transition: border-color 250ms ease, color 250ms ease, background 250ms ease; }
.mm-sig .ic { color: var(--ink-3); font-size: 13px; transition: color 250ms ease; }
.mm-sig.on { border-color: var(--blue); background: var(--wash); color: var(--ink); }
.mm-sig.on .ic { color: var(--blue); }
.mm-core { display: grid; place-items: center; }
.mm-node { text-align: center; border: 2px solid var(--line); border-radius: 20px; background: #fff; padding: clamp(16px, 2vw, 26px) clamp(12px, 1.6vw, 20px); transition: border-color 300ms ease, box-shadow 300ms ease; width: 100%; }
.mm-node .ic { font-size: 26px; color: var(--ink-3); transition: color 300ms ease; }
.mm-node b { display: block; font-family: var(--f-head); font-size: 15.5px; margin-top: 8px; }
.mm-node span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.mm-node.on { border-color: var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.1); }
.mm-node.on .ic { color: var(--blue); }
.mm-jobs { min-width: 0; }
.mm-job { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; padding: 12px 15px; margin-bottom: 9px; opacity: 0.45; transition: opacity 300ms ease, border-color 300ms ease; }
.mm-job.on { opacity: 1; border-color: var(--blue); }
.mm-job b { display: block; font-family: var(--f-head); font-size: 14px; font-weight: 700; }
.mm-job > div > span { font-size: 12px; color: var(--ink-3); }
.mm-job .mm-score { margin-left: auto; font-family: var(--f-head); font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); color: var(--ink); background: var(--lime); border-radius: 10px; padding: 5px 11px; white-space: nowrap; }
.mm-more { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); text-align: right; }
.mm-stats { justify-content: center; gap: clamp(30px, 4vw, 70px); margin-top: clamp(10px, 2vh, 18px); }
.mm-stats b { color: var(--blue); }

/* verteilung radar */
.dist { display: block; }
.dist-radar { position: relative; height: 100%; min-height: 0; }
.dr-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1.5px dashed rgba(19, 0, 255, 0.18); border-radius: 50%; }
.dr-ring.r1 { width: 84%; height: 88%; }
.dr-ring.r2 { width: 46%; height: 48%; }
.dist-sat { position: absolute; left: var(--sx); top: var(--sy); transform: translate(-50%, -50%); width: clamp(200px, 18vw, 250px); }
.dist-radar .dist-hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(230px, 20vw, 280px); }
@media (max-width: 1120px) { .dist-sat { position: static; transform: none; width: auto; margin-bottom: 8px; } .dist-radar .dist-hub { position: static; transform: none; margin: 12px auto; } .dr-ring { display: none; } }

/* careerkit process bar */
.ck-proc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 8px 14px; margin-bottom: clamp(8px, 1.4vh, 14px); }
.ckp-lead { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.ckp-step { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 700; font-size: 13.5px; }
.ckp-step .ic { color: var(--blue); font-size: 15px; }
.ckp-arr { color: var(--ink-3); }
.ckp-done { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--ink); background: var(--lime); border-radius: 999px; padding: 5px 11px; }
.ckp-done .ic { font-size: 12px; }

/* cvdb split */
.cv2 { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 40px); align-content: center; }
.cv2-col { border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 18px; background: rgba(255, 255, 255, 0.06); padding: clamp(16px, 2vw, 26px); min-width: 0; }
.cv2-tag { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--lime); margin-bottom: 12px; }
.cvs-bar { display: flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 11px; padding: 10px 13px; font-size: 13px; color: #fff; }
.cvs-bar .ic { color: var(--lime); }
.cvs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.cvs-chips span { font-family: var(--f-mono); font-size: 10px; color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; padding: 3px 8px; }
.cvs-row { display: flex; align-items: center; gap: 11px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.cvs-ava { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; font-family: var(--f-head); font-weight: 800; font-size: 11px; }
.cvs-row b { display: block; font-size: 12.5px; font-weight: 700; }
.cvs-row > div > span { font-size: 10.5px; color: rgba(255, 255, 255, 0.65); }
.cvs-score { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--lime); }

/* qualitaet scoring */
.qs { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px, 3vw, 48px); align-content: center; align-items: center; }
.qs-h { font-family: var(--f-head); font-weight: 700; font-size: clamp(15px, 1.4vw, 18px); margin-bottom: 14px; }
.qs-steps { display: flex; flex-direction: column; gap: 12px; }
.qs-step { display: flex; gap: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.qs-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--wash); color: var(--blue); font-size: 18px; }
.qs-step b { font-family: var(--f-head); font-size: 15px; font-weight: 700; }
.qs-step p { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.qs-card { border: 2px solid var(--blue); border-radius: 18px; background: #fff; box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); padding: clamp(16px, 2vw, 26px); }
.qs-cardh { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.qs-cardh .cvs-ava { background: var(--wash); color: var(--blue); }
.qs-cardh b { display: block; font-family: var(--f-head); font-size: 14.5px; }
.qs-cardh > div > span { font-size: 11.5px; color: var(--ink-3); }
.qs-badge { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink); background: var(--lime); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.qs-checks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.qs-check { display: flex; align-items: center; gap: 9px; background: var(--wash); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.qs-check .ic { color: var(--blue); font-size: 14px; }
.qs-check.ok .ic { color: var(--lime-deep); }
.qs-check em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.qs-score { display: flex; align-items: center; gap: 12px; }
.qs-score > span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.qs-track { flex: 1; height: 14px; border-radius: 7px; background: var(--wash); overflow: hidden; }
.qs-track i { display: block; height: 100%; width: 0; border-radius: 7px; background: var(--blue); transition: width 0.8s var(--ease); }
.qs-score b { font-family: var(--f-head); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); color: var(--blue); }

/* careerkit slide: compact phone so it clears the sfoot at 810px height */
.ck-phone .pscr { gap: 7px; min-height: 0; }
.ck-phone .pg-card { padding: 10px 12px; }
.ck-phone .pl-row { padding: 6px 10px; }
.ck-phone.phone { padding: 11px 11px 13px; }
.ck-rail { --railgap: 8px; }


/* =========================================================================
   18 · ECOSYSTEM OVERVIEW (4 variants)
   ========================================================================= */
.eco { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }

/* ---- 0 · LOOP (flywheel, default) ---- */
.eco-loop-wrap { width: 100%; }
.loop-stage { --sz: min(56vh, 496px); --r: calc(var(--sz) * 0.40); position: relative; width: var(--sz); height: var(--sz); margin: 0 auto; overflow: visible; }
.loop-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--blue); }
.lr-track { fill: none; stroke: var(--line); stroke-width: 0.8; stroke-dasharray: 1.6 2.6; }
.lr-arc { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity 550ms ease; }
.loop-stage.ring-on .lr-arc { opacity: 1; }
.lr-fb { stroke-dasharray: 4 3.2; opacity: 0; }
.loop-stage.ring-on .lr-arc.lr-fb { opacity: 0.55; }
.lr-arc.lr-fb.on { opacity: 1; color: var(--lime-deep, #7fae00); stroke-width: 2.4; }
/* orbiting particles */
.loop-parts { position: absolute; inset: 0; pointer-events: none; }
.loop-particle { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--blue); opacity: 0; box-shadow: 0 0 0 3px rgba(19, 0, 255, 0.14); }
.loop-particle.lime { background: var(--lime); box-shadow: 0 0 0 3px rgba(198, 250, 2, 0.28); }
.loop-stage.ring-on .loop-particle { opacity: 1; animation: loopOrbit 7s linear infinite; animation-delay: var(--pd); }
@keyframes loopOrbit { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } }
body.lite .loop-particle { display: none; }
/* center data core */
.loop-core { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: clamp(120px, 11.5vw, 142px); text-align: center; border: 2px solid var(--line); border-radius: 18px; background: #fff; padding: 14px 10px; opacity: 0; transition: opacity 420ms ease, transform 420ms var(--ease), border-color 420ms ease, box-shadow 420ms ease; z-index: 4; }
.loop-core.on { opacity: 1; transform: translate(-50%, -50%) scale(1); border-color: var(--blue); box-shadow: 0 18px 46px -20px rgba(19, 0, 255, 0.4); }
.loop-core .mark-icon { width: 26px; height: 26px; margin-bottom: 5px; }
.loop-core b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 12.5px; }
.loop-core .lc-n { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(19px, 1.9vw, 25px); color: var(--blue); line-height: 1.05; margin-top: 4px; }
.loop-core .lc-c { display: block; font-family: var(--f-mono); font-size: 10px; color: var(--ink-3); margin-top: 1px; }
/* product nodes on the ring */
.loop-node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(0.9); width: clamp(138px, 13.5vw, 178px); text-align: center; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 12px 11px; opacity: 0; transition: opacity 440ms var(--ease), transform 440ms var(--ease), border-color 440ms ease, box-shadow 440ms ease; z-index: 3; }
.loop-node.on { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1); border-color: var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.ln-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wash); color: var(--blue); margin: 0 auto 8px; }
.ln-ic .ic { width: 22px; height: 22px; }
.loop-node b { font-family: var(--f-head); font-weight: 800; font-size: 16px; }
.ln-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
/* arc labels */
.loop-arclab { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) * 1.12)) rotate(calc(-1 * var(--a))); white-space: nowrap; font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; opacity: 0; transition: opacity 440ms ease; z-index: 2; }
.loop-arclab.wide { transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) * 0.66)) rotate(calc(-1 * var(--a))); }
.loop-arclab.on { opacity: 1; }
.loop-arclab.fb { color: var(--ink); border-color: var(--lime-deep, #7fae00); background: #f7ffd6; font-weight: 600; }
@media (max-width: 1040px) { .loop-stage { --sz: 92vw; } .loop-arclab { display: none; } }

/* loop drill-down: per-product phase sub-loops */
.eco-loop-root { position: relative; width: 100%; --sz: min(56vh, 496px); --r: calc(var(--sz) * 0.40); }
.loop-node { font: inherit; color: inherit; }
.loop-node.drillable { cursor: pointer; }
.loop-node .ln-more { position: absolute; top: 8px; right: 9px; width: 19px; height: 19px; border-radius: 50%; background: var(--wash); color: var(--blue); font-family: var(--f-head); font-weight: 800; font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background 200ms ease, color 200ms ease; }
.loop-node.drillable.on:hover { border-color: var(--blue); box-shadow: 0 16px 34px -14px rgba(19, 0, 255, 0.45); }
.loop-node.drillable.on:hover .ln-more { background: var(--blue); color: #fff; }
.foot-hint { font-style: normal; color: var(--ink-3); }
.loop-detail { position: absolute; inset: -4% -2%; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 320ms ease; z-index: 6; background: radial-gradient(circle at 50% 46%, rgba(255,255,255,0.94) 55%, rgba(255,255,255,0.82) 100%); border-radius: 24px; }
.eco-loop-root.drilled .loop-detail { opacity: 1; pointer-events: auto; }
.eco-loop-root.drilled .loop-stage { opacity: 0.04; transform: scale(0.94); pointer-events: none; transition: opacity 320ms ease, transform 320ms ease; }
.ld-stage { position: relative; width: var(--sz); height: var(--sz); margin: 0 auto; }
.ld-stage .lr-track { fill: none; stroke: var(--line); stroke-width: 0.8; stroke-dasharray: 1.6 2.6; }
.ld-stage .lr-arc { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; color: var(--blue); opacity: 1; }
.ld-stage .lr-arc.lr-fb { color: var(--lime-deep, #7fae00); stroke-dasharray: 4 3.2; }
.ld-stage .loop-particle { opacity: 1; animation: loopOrbit 7s linear infinite; animation-delay: var(--pd); }
body.lite .ld-stage .loop-particle { display: none; }
.ld-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(150px, 15vw, 192px); text-align: center; z-index: 2; }
.ldc-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue); color: #fff; margin: 0 auto 10px; }
.ldc-ic .ic { width: 28px; height: 28px; }
.ld-core b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(18px, 1.8vw, 23px); }
.ldc-cap { display: block; font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.4; }
.loop-phase { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); width: clamp(104px, 10vw, 132px); text-align: center; z-index: 3; }
.lp-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: #fff; border: 1px solid var(--line); color: var(--blue); margin: 0 auto 8px; box-shadow: 0 10px 22px -10px rgba(19, 0, 255, 0.32); }
.lp-ic .ic { width: 26px; height: 26px; }
.lp-l { display: block; font-family: var(--f-head); font-weight: 700; font-size: 13.5px; line-height: 1.25; }
.ld-back { position: absolute; top: 0; left: 0; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; cursor: pointer; z-index: 7; transition: border-color 200ms ease, color 200ms ease; }
.ld-back:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 1040px) { .loop-phase { width: 84px; } .lp-l { font-size: 11px; } }

/* ---- 1 · FLOW ---- */
.eco-flow { width: 100%; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 34px); }
.ef-track { display: flex; align-items: stretch; gap: 0; }
.ef-card { flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(16px, 2vw, 26px); text-align: left; opacity: 0.42; transform: translateY(8px); transition: opacity 420ms var(--ease), transform 420ms var(--ease), border-color 420ms ease, box-shadow 420ms ease; }
.ef-card.on { opacity: 1; transform: none; border-color: var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.ef-stage { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-3); }
.ef-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--wash); color: var(--blue); font-size: 22px; margin: 12px 0 10px; }
.ef-ic .ic { width: 24px; height: 24px; }
.ef-name { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(18px, 1.8vw, 24px); }
.ef-role { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.ef-stat { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ef-stat b { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px, 1.9vw, 26px); color: var(--blue); }
.ef-stat span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ef-link { flex: 0 0 clamp(30px, 4vw, 64px); align-self: center; position: relative; height: 3px; background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 13px); }
.ef-link.on { background: repeating-linear-gradient(90deg, var(--blue) 0 7px, transparent 7px 13px); }
.ef-link::after { content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.ef-link.on::after { border-color: var(--blue); }
.ef-tok { position: absolute; top: 50%; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); transform: translateY(-50%); opacity: 0; box-shadow: 0 0 0 4px rgba(198, 250, 2, 0.25); }
.ef-link.on .ef-tok { opacity: 1; animation: efTok 1.4s var(--ease) infinite; }
@keyframes efTok { 0% { left: 2px; } 100% { left: calc(100% - 14px); } }
body.lite .ef-link.on .ef-tok { animation: none; left: calc(100% - 14px); }
.ef-spine { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 18px; background: var(--paper-2, #fbfbfd); opacity: 0.5; transition: opacity 420ms ease, border-color 420ms ease, background 420ms ease; }
.ef-spine.on { opacity: 1; border-color: var(--blue); background: var(--wash); }
.ef-spine-l { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-head); font-weight: 700; font-size: 14.5px; }
.ef-spine-l .mark-icon { width: 20px; height: 20px; }
.ef-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ef-chips span { font-family: var(--f-mono); font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: 7px; padding: 4px 10px; background: #fff; }
.ef-spine-r { margin-left: auto; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

/* ---- 2 · ORBIT ---- */
.eco-orbit { position: relative; width: 100%; height: min(56vh, 500px); margin-top: clamp(8px, 3vh, 30px); }
.eo-ring { position: absolute; top: 50%; left: 50%; width: clamp(360px, 37vw, 510px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px dashed var(--line); border-radius: 50%; }
.eo-spoke { position: absolute; top: 50%; left: 50%; width: clamp(185px, 19vw, 262px); height: 0; border-top: 2px dashed var(--line); transform-origin: 0 0; transform: rotate(var(--a)); opacity: 0; transition: opacity 400ms ease, border-color 400ms ease; }
.eo-spoke.on { opacity: 1; border-color: var(--blue); }
.eo-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); width: clamp(146px, 14vw, 188px); text-align: center; border: 2px solid var(--line); border-radius: 20px; background: #fff; padding: clamp(13px, 1.6vw, 20px); opacity: 0.5; transition: opacity 400ms ease, border-color 400ms ease, transform 400ms var(--ease), box-shadow 400ms ease; z-index: 3; }
.eo-core.on { opacity: 1; transform: translate(-50%, -50%) scale(1); border-color: var(--blue); box-shadow: 0 18px 46px -20px rgba(19, 0, 255, 0.4); }
.eo-ava { display: block; width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 9px; background: linear-gradient(140deg, var(--blue), #6f86ff); }
.eo-core b { font-family: var(--f-head); font-weight: 800; font-size: 15px; }
.eo-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 9px; }
.eo-chips span { font-family: var(--f-mono); font-size: 10px; color: var(--blue); border: 1px solid var(--blue); border-radius: 6px; padding: 2px 7px; }
.eo-sat { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateX(clamp(185px, 19vw, 262px)) rotate(calc(-1 * var(--a))); width: clamp(146px, 14.5vw, 194px); text-align: center; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 14px 12px; opacity: 0; transition: opacity 440ms var(--ease), border-color 440ms ease, box-shadow 440ms ease; z-index: 2; }
.eo-sat.on { opacity: 1; border-color: var(--blue); box-shadow: 6px 6px 0 rgba(19, 0, 255, 0.08); }
.eo-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--wash); color: var(--blue); margin: 0 auto 8px; }
.eo-ic .ic { width: 22px; height: 22px; }
.eo-sat b { font-family: var(--f-head); font-weight: 800; font-size: 16px; }
.eo-role { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }
@media (max-width: 1040px) { .eco-orbit { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .eo-ring, .eo-spoke { display: none; } .eo-core, .eo-sat { position: static; transform: none; opacity: 1; width: auto; } }

/* ---- 3 · STACK ---- */
.eco-stack { width: 100%; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.es-layers { position: relative; display: flex; flex-direction: column; gap: 10px; }
.es-spine { position: absolute; left: 33px; top: 8px; bottom: -14px; width: 2px; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px); opacity: 0; transition: opacity 400ms ease, background 400ms ease; }
.es-spine.on { opacity: 1; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); }
.es-band { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: clamp(13px, 1.7vh, 20px) clamp(16px, 2vw, 24px); opacity: 0.42; transform: translateX(10px); transition: opacity 420ms var(--ease), transform 420ms var(--ease), border-color 420ms ease, box-shadow 420ms ease; }
.es-band.on { opacity: 1; transform: none; border-color: var(--blue); box-shadow: 5px 5px 0 rgba(19, 0, 255, 0.07); }
.es-ic { position: relative; z-index: 1; flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--wash); color: var(--blue); }
.es-ic .ic { width: 24px; height: 24px; }
.es-txt { flex: 1 1 auto; }
.es-txt b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(16px, 1.6vw, 21px); }
.es-txt span { font-size: 12.5px; color: var(--ink-3); }
.es-stat { text-align: right; }
.es-stat b { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(17px, 1.6vw, 22px); color: var(--blue); }
.es-stat span { font-size: 11px; color: var(--ink-3); }
.es-base { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border: 2px solid var(--line); border-radius: 16px; background: var(--paper-2, #fbfbfd); padding: 14px 20px; opacity: 0.5; transition: opacity 420ms ease, border-color 420ms ease, background 420ms ease; }
.es-base.on { opacity: 1; border-color: var(--blue); background: var(--wash); }
.es-base-h { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-head); font-weight: 800; font-size: 15px; }
.es-base-h .mark-icon { width: 20px; height: 20px; }
.es-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.es-chips span { font-family: var(--f-mono); font-size: 11px; color: var(--blue); border: 1px solid var(--blue); border-radius: 7px; padding: 4px 10px; background: #fff; }
.es-base-n { margin-left: auto; font-family: var(--f-head); font-weight: 800; font-size: clamp(15px, 1.5vw, 19px); color: var(--ink); }

/* ---- 4 · VENN ---- */
.eco-venn { width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.ev-svg { width: 100%; height: auto; max-height: min(58vh, 520px); overflow: visible; }
.ev-c { fill: var(--blue); fill-opacity: 0; stroke: var(--blue); stroke-width: 2; stroke-opacity: 0.25; transition: fill-opacity 500ms ease, stroke-opacity 500ms ease; }
.ev-c.on { fill-opacity: 0.14; stroke-opacity: 0.85; }
.ev-lab { font-family: var(--f-head); font-weight: 700; font-size: 18px; fill: var(--ink); }
.ev-core circle { fill: #fff; stroke: var(--blue); stroke-width: 0; opacity: 0; transition: opacity 400ms ease, stroke-width 400ms ease; }
.ev-core.on circle { opacity: 1; stroke-width: 2.5; }
.ev-core use, .ev-core .ev-vaia { opacity: 0; transition: opacity 400ms ease; }
.ev-core.on use, .ev-core.on .ev-vaia { opacity: 1; }
.ev-vaia { font-family: var(--f-head); font-weight: 800; font-size: 17px; fill: var(--blue); }
.ev-notes { display: flex; flex-direction: column; gap: 12px; }
.ev-note { border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: 12px; background: #fff; padding: 12px 15px; opacity: 0.4; transform: translateX(8px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.ev-note.on { opacity: 1; transform: none; }
.ev-note b { display: block; font-family: var(--f-head); font-weight: 700; font-size: 14px; }
.ev-note span { font-size: 12px; color: var(--ink-3); }
@media (max-width: 980px) { .eco-venn { grid-template-columns: 1fr; } }