/* Rundplan homepage v10 — the FULL page. Built from v9.
   Hero unchanged (hero.js conducts the orbit; the sphere; fixed ring tags).
   SEVEN cards with the final copy, no title icons. A card is one surface:
   the copy sits on the LEFT, a SCENE layer on the right may run under the
   copy and off the card's edge. All seven scenes are drawn. Cards are one
   height (--card-h), stick at --stack-top and recede from their centre to
   0.76 (hero.js). Lists: .list-ruled / .list-spine on .stack.
   v10: card 1 darkest-blue corner, card 3 bluish turquoise, the moving
   colours on card 5 (card 7 calm), the poster's sponsor strip stays inside
   the poster; below the stack: How you start · Your data stays yours · the
   Digipart outro with the footer on one sky-to-darkest-blue surface. */

:root {
  --white: #ffffff;
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-200: #bae6fd;
  --sky-300: #7dd3fc;
  --sky-400: #38bdf8;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;
  --sky-900: #0c4a6e;
  --sky-950: #082f49;         /* v10: THE darkest blue — card 1's title corner */
  --night: #141a30;           /* v12 (BG): the foot of the page — the outro's last stop, a blue-black */
  --ink: #0f172a;
  --text: #1e293b;
  --muted: #475569;
  --rim: #e2f0f5;
  --warm: #e2492f;            /* the one warm spark: roundel centre */
  --green: #15803d;           /* the approval mark */
  --card-bg: #0f172a;         /* the app's dark canvas */
  --card-bg-alt: #111c33;
  --card-bg-deep: #0b1220;
  --card-text: #e2e8f0;
  --card-muted: #cbd5e1;
  --raised: 3px 3px 6px rgba(0, 40, 60, 0.20);
  --raised-soft: 0 10px 30px rgba(0, 40, 60, 0.14);
  --card-shadow: 0 8px 24px rgba(2, 20, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --inset: inset 2px 2px 4px rgba(0, 40, 60, 0.20), inset -2px -2px 4px rgba(255, 255, 255, 0.75);
  --font: "Geist Variable", Geist, "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
  --gutter: 24px;
  --header-h: 72px;
  --hero-inset: 15px;         /* white left and right of the hero */
  --stack-top: 96px;          /* where EVERY card stops */
  --card-h: 610px;            /* pass 4: ONE height for every card = tallest copy (card 4: 501 + 96 padding = 597) + 13 reserve */
  --copy-w: 46ch;             /* the copy column on a card */
  --globe: 148px;             /* the sphere's diameter on a 600px orbit */
  --loop: 16s;                /* the story loop: proposal in, approved, published out */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--sky-700); }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

:focus-visible { outline: 3px solid var(--sky-500); outline-offset: 3px; border-radius: 999px; }
.hero :focus-visible { outline-color: var(--white); }

/* ── Pills (the app's buttons) ─────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none;
  border: 1px solid var(--rim);
  background: var(--white); color: var(--sky-700);
  box-shadow: var(--raised);
  cursor: pointer; white-space: nowrap;
}
.pill:active { box-shadow: var(--inset); }
.pill-ghost {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, 0.7); box-shadow: none;
}
.pill-ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Header: transparent over the sky, white once the page has scrolled ── */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  color: var(--white);
  background: transparent;
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
/* v12 (BG): the logo — the white-on-transparent PNG used as a MASK over
   currentColor, so the mark + wordmark follow the header's colour (white on
   the sky, ink once the header turns solid). 500×85 source → 26 px tall. */
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
/* the word "Rundplan" stands in only where CSS masks are unsupported (the logo is drawn through a mask) */
.brand-text { font-weight: 700; font-size: 1.25rem; }
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) { .brand-text { display: none; } }
.brand-logo {
  display: block; width: 153px; height: 26px; background: currentColor;
  -webkit-mask: url(rundplan-logo.png) center / contain no-repeat;
  mask: url(rundplan-logo.png) center / contain no-repeat;
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav a:not(.pill) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: inherit; text-decoration: none; font-weight: 500; border-radius: 999px;
}
.nav a:not(.pill):hover { background: rgba(255, 255, 255, 0.14); }
.nav .pill { margin-left: 8px; min-height: 44px; }
.pill-nav { background: var(--white); color: var(--sky-700); border-color: var(--white); }
.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px;
  border-radius: 999px; border: 1px solid var(--rim); background: var(--white);
  box-shadow: var(--raised); cursor: pointer; font: inherit;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; margin: 0 auto; position: relative; content: "";
}
.nav-toggle span::before { position: absolute; top: -6px; left: 0; }
.nav-toggle span::after { position: absolute; top: 6px; left: 0; }

/* v12 (BG): the language picker is a DROPDOWN — a <details>: the current
   code and a chevron on the summary, the four languages by name in a small
   white menu. Works without JS (native open/close); menu-script.html adds
   close-on-outside-click, Escape and close-on-choice. It inherits the
   header's colour, so the summary reads on the sky and on white alike; the
   menu is always ink on white. */
.lang { position: relative; margin-left: 6px; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 0 8px 0 11px; border-radius: 999px;
  color: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  border: 1.5px solid currentColor;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { background: rgba(255, 255, 255, 0.14); }
.lang summary svg { width: 12px; height: 12px; transition: transform 0.2s; }
.lang[open] summary svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 168px; padding: 6px; display: grid; gap: 2px;
  background: var(--white); color: var(--ink); border-radius: 16px;
  border: 1px solid var(--rim); box-shadow: var(--raised-soft);
}
/* `.lang .lang-menu a`: one class more than `.site-footer a`, which would
   otherwise paint the footer's menu white on white */
.lang .lang-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 38px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.lang .lang-menu a:hover { background: var(--sky-50); text-decoration: none; }
.lang .lang-menu a span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.lang .lang-menu a.is-current { font-weight: 650; color: var(--sky-800); background: var(--sky-50); }
.lang .lang-menu a.is-current span { color: var(--sky-700); }
/* the footer keeps the plain row of four codes (BG: the dropdown is for the header) */
.lang-footer { display: inline-flex; align-items: center; gap: 2px; margin-left: 0; }
.lang-footer a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 30px; padding: 0 7px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  opacity: 0.72; border: 1.5px solid transparent;
}
.lang-footer a:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); text-decoration: none; }
.lang-footer a.is-current { opacity: 1; border-color: currentColor; }

/* v11: pages without a hero (docs, legal) keep a white, sticky header */
.site-header.solid {
  position: sticky; top: 0;
  color: var(--ink); background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--sky-100);
  animation: none;
}
.site-header.solid .nav a:not(.pill):hover, .site-header.solid .lang summary:hover { background: rgba(14, 165, 233, 0.08); }
.site-header.solid .pill-nav { background: var(--sky-500); color: var(--white); border-color: var(--sky-400); animation: none; }
.site-header .nav a[aria-current="page"]:not(.pill) { font-weight: 650; }

/* Where the browser can drive an animation from scroll, the header stays and
   turns white after the hero. Elsewhere it simply scrolls away with the hero. */
@supports (animation-timeline: scroll()) {
  .site-header {
    position: sticky;
    animation: header-solid linear both;
    animation-timeline: scroll(root);
    animation-range: 0 480px;
  }
  .site-header .nav a:not(.pill):hover { background: rgba(14, 165, 233, 0.08); }
  @keyframes header-solid {
    0%   { color: var(--white); background: rgba(255, 255, 255, 0); box-shadow: none; }
    70%  { color: var(--white); background: rgba(255, 255, 255, 0); box-shadow: none; }
    100% { color: var(--ink);  background: rgba(255, 255, 255, 0.96); box-shadow: 0 1px 0 var(--sky-100); }
  }
  /* the nav pill flips with the header */
  .site-header .pill-nav { animation: pill-solid linear both; animation-timeline: scroll(root); animation-range: 0 480px; }
  @keyframes pill-solid {
    0%, 70% { background: var(--white); color: var(--sky-700); border-color: var(--white); }
    100%    { background: var(--sky-500); color: var(--white); border-color: var(--sky-400); }
  }
}
/* the sticky header sits above the hero in flow: pull the hero up under it */
@supports (animation-timeline: scroll()) {
  .hero { margin-top: calc(-1 * var(--header-h)); }
}

/* ── Hero: the sky canvas coming down from the top of the viewport ─────── */
.hero {
  position: relative;
  margin-inline: var(--hero-inset);
  background: linear-gradient(135deg, #009fff 0%, #009fff 12%, var(--sky-500) 34%, var(--sky-400) 66%, var(--sky-300) 100%); /* v11 polish (BG): deeper azure in the top-left corner */
  color: var(--white);
  border-radius: 0 0 32px 32px;
  padding: calc(var(--header-h) + clamp(20px, 3vw, 36px)) 0 clamp(32px, 5vw, 56px);
  box-shadow: var(--raised-soft);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.hero-copy h1 { color: var(--white); }
.hero-lines { margin-top: 24px; display: grid; gap: 10px; font-size: 1.2rem; line-height: 1.45; text-wrap: pretty; }
.hero-lines li:last-child { font-weight: 650; margin-top: 4px; }
/* desktop-only line breaks, so no line ends in a one-to-three-word orphan */
.br { display: none; }
@media (min-width: 900px) { .br { display: inline; } }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* The stage tilts the drawing a few degrees so the top of the orbit is the far
   side. The SVG itself is the plane; chips are barely foreshortened at 12°. */
.orbit-stage { position: relative; justify-self: end; width: 100%; max-width: 600px; perspective: 1400px; }
.hero-art {
  width: 100%; height: auto; display: block; overflow: visible;
  transform: rotateX(12deg); transform-origin: 50% 50%;
}
.hero-art .fixed-tag .tag { filter: drop-shadow(0 2px 3px rgba(0, 40, 60, 0.18)); }
.hero-art .centre-shade { fill: rgba(0, 40, 60, 0.16); filter: blur(6px); }

/* ── The sphere ─────────────────────────────────────────────────────────
   A white globe (white keeps the centre the brightest point on the sky canvas
   and matches the tags; sky-700 letters pass AA on it). The band is a cylinder
   the size of the equator: hero.js places each letter with rotateY + translateZ
   and turns the band; letters facing away are hidden by backface-visibility,
   so the text really goes round the back. */
.globe {
  position: absolute; left: 50%; top: 50%;
  width: var(--globe); height: var(--globe);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* v8: the band lives inside a clipped circle with its OWN perspective (the
   stage's perspective never reached it through the flat globe, so the letters
   rendered as a straight strip). Short perspective = visible curvature. */
.globe-clip {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  perspective: 300px; perspective-origin: 50% 50%;
}
.globe-body {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0.9) 22%, rgba(214, 238, 252, 0.95) 58%, #a9d9f5 86%, #8fcbf0 100%);
  box-shadow:
    inset -10px -14px 26px rgba(3, 105, 161, 0.22),
    inset 6px 8px 14px rgba(255, 255, 255, 0.9),
    0 12px 28px rgba(0, 40, 60, 0.22);
}
.globe-shine {
  position: absolute; left: 22%; top: 12%; width: 34%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
}
.globe-band {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  transform: rotateX(-8deg);          /* the equator seen slightly from above */
  font-family: var(--font); font-weight: 800; letter-spacing: 0.04em;
  color: var(--sky-700); text-align: center;
}
.globe-static { font-size: 15px; line-height: 1.2; }
.globe-band .ch {
  position: absolute; left: 50%; top: 50%;
  width: 16px; margin-left: -8px; margin-top: -10px;
  font-size: 15px; line-height: 20px; text-align: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* When the script conducts, the CSS animations of the orbit step aside. The
   selectors carry `.hero-art` so they OUTRANK the animation rules below (v8:
   at equal specificity the later rules won and the CSS offset-path kept
   running under the script's translate — the chip flew off the drawing). */
.hero-art.js-drive .orbit, .hero-art.js-drive .sat, .hero-art.js-drive .sat .upright,
.hero-art.js-drive .sat .depth, .hero-art.js-drive .story, .hero-art.js-drive .pulse,
.hero-art.js-drive .halo, .hero-art.js-drive .mark, .hero-art.js-drive .draw,
.hero-art.js-drive .draw-head { animation: none; }
.hero-art.js-drive .story { opacity: 0; offset-path: none; }

/* SVG line vocabulary on the gradient */
.hero-art .ring { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.hero-art .ring-public { stroke-dasharray: 6 6; stroke: rgba(255, 255, 255, 0.7); }
.hero-art .node { fill: var(--white); }
.hero-art .path { fill: none; stroke: var(--white); stroke-width: 2; }
.hero-art .track { opacity: 0.45; }
.hero-art .label { font-family: var(--font); font-size: 14px; font-weight: 600; fill: var(--white); }
.hero-art .tag { fill: var(--white); stroke: rgba(0, 40, 60, 0.12); stroke-width: 0.5; }
.hero-art .tag-text { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--sky-700); }
/* the public: white pills with a line icon, fixed just outside the dashed ring */
.hero-art .pub .tag { filter: drop-shadow(0 2px 3px rgba(0, 40, 60, 0.18)); }
.hero-art .pub .tag-text { font-size: 13.5px; }
.hero-art .ico { fill: none; stroke: var(--sky-700); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .chip { fill: var(--white); stroke: rgba(0, 40, 60, 0.12); stroke-width: 0.5; filter: drop-shadow(0 2px 3px rgba(0, 40, 60, 0.18)); }
.hero-art text { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--ink); }
.hero-art .d-green { fill: #16a34a; }
.hero-art .d-orange { fill: #ea8a1a; }
.hero-art .d-amber { fill: #f59e0b; }
.hero-art .d-violet { fill: #7c3aed; }
.hero-art .d-sky { fill: var(--sky-500); }
.hero-art .mark { fill: var(--green); transform-box: fill-box; transform-origin: center; }
.hero-art .mark-check { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .doc { fill: var(--sky-50); stroke: var(--sky-500); stroke-width: 1; }
.hero-art .doc-line { stroke: var(--sky-500); stroke-width: 1.2; }

/* ── The ground: rings and nodes turn steadily ──────────────────────────── */
.hero-art .orbit { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; }
.hero-art .orbit-1 { animation: turn 96s linear infinite; }
.hero-art .orbit-2 { animation: turn-back 72s linear infinite; }
.hero-art .orbit-3 { animation: turn 54s linear infinite; }
@keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes turn-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* nodes glow in turn (micro-life) */
.hero-art .node circle { transform-box: fill-box; transform-origin: center; animation: node-glow 7s ease-in-out infinite; }
.hero-art .orbit-2 .node circle:nth-child(1) { animation-delay: 0s; }
.hero-art .orbit-2 .node circle:nth-child(2) { animation-delay: -0.875s; }
.hero-art .orbit-2 .node circle:nth-child(3) { animation-delay: -1.75s; }
.hero-art .orbit-2 .node circle:nth-child(4) { animation-delay: -2.625s; }
.hero-art .orbit-2 .node circle:nth-child(5) { animation-delay: -3.5s; }
.hero-art .orbit-2 .node circle:nth-child(6) { animation-delay: -4.375s; }
.hero-art .orbit-2 .node circle:nth-child(7) { animation-delay: -5.25s; }
.hero-art .orbit-2 .node circle:nth-child(8) { animation-delay: -6.125s; }
.hero-art .orbit-3 .node circle:nth-child(1) { animation-delay: -0.4s; }
.hero-art .orbit-3 .node circle:nth-child(2) { animation-delay: -2.15s; }
.hero-art .orbit-3 .node circle:nth-child(3) { animation-delay: -3.9s; }
.hero-art .orbit-3 .node circle:nth-child(4) { animation-delay: -5.65s; }
@keyframes node-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
/* v9 pass 3: while the hero is off screen (hero.js adds .parked) nothing in
   the drawing ticks — the node glow used to run under every card */
.hero.parked .hero-art * { animation-play-state: paused; }

/* ── Satellites: each chip orbits on its own, eased ─────────────────────
   --sn is the rotation (degrees, unitless) at which the chip sits at the TOP of
   its ring: the far side, where it is slowest. The keyframes start there, so
   depth (smaller, softer) peaks at 0% and 100% with no extra bookkeeping. The
   negative delay spreads the satellites back to their drawn positions at load.
   Two timing curves with matching slopes at both joins keep the speed
   continuous: about 5× quicker at the bottom than at the top. */
.hero-art .sat { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; }
.hero-art .s1 { --T: 96s; --dir: 1; }
.hero-art .s2 { --T: 72s; --dir: -1; }
.hero-art .s3 { --T: 54s; --dir: 1; }
.hero-art .sat { animation: sat-turn var(--T) infinite; }
.hero-art .sat .upright { transform-box: fill-box; transform-origin: center; will-change: transform; animation: sat-back var(--T) infinite; }
.hero-art .sat .depth { transform-box: fill-box; transform-origin: center; animation: depth var(--T) ease-in-out infinite; }
/* the delay comes AFTER the shorthands (a shorthand resets it): all three
   animations of one satellite must share the same phase, or the chip tilts */
.hero-art .sat,
.hero-art .sat .upright,
.hero-art .sat .depth { animation-delay: calc(-1 * (360 - var(--sn)) / 360 * var(--T)); }
@keyframes sat-turn {
  0%   { transform: rotate(calc(var(--dir) * var(--sn) * 1deg)); animation-timing-function: cubic-bezier(0.5, 0.2, 0.8, 0.6); }
  50%  { transform: rotate(calc(var(--dir) * (var(--sn) + 180) * 1deg)); animation-timing-function: cubic-bezier(0.2, 0.4, 0.5, 0.8); }
  100% { transform: rotate(calc(var(--dir) * (var(--sn) + 360) * 1deg)); }
}
@keyframes sat-back {
  0%   { transform: rotate(calc(-1 * var(--dir) * var(--sn) * 1deg)); animation-timing-function: cubic-bezier(0.5, 0.2, 0.8, 0.6); }
  50%  { transform: rotate(calc(-1 * var(--dir) * (var(--sn) + 180) * 1deg)); animation-timing-function: cubic-bezier(0.2, 0.4, 0.5, 0.8); }
  100% { transform: rotate(calc(-1 * var(--dir) * (var(--sn) + 360) * 1deg)); }
}
@keyframes depth {
  0%, 100% { transform: scale(0.9);  opacity: 0.82; }
  50%      { transform: scale(1.02); opacity: 1; }
}

/* ── The story: one event in, approved, published out ───────────────────
   The path has two subpaths: the way in (outer ring → approval → into the
   organization) and the way out (top of the disc → website). The chip crosses
   the gap while invisible. v8: the way in starts PAST the public ring (462,462
   = r 257), where the proposal line now begins. Distances on 348.3 units:
   hold at 34.9% (just before the mark), absorbed at 55.2%, reappears at
   55.4%, lands at 100%. */
.hero-art .story {
  offset-path: path("M462 462 L348 348 L326 326 M280 216 L280 60");
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  will-change: offset-distance, opacity;
  animation: story var(--loop) linear infinite;
}
@keyframes story {
  0%   { offset-distance: 0%;    opacity: 0; }
  4%   { offset-distance: 0%;    opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  30%  { offset-distance: 34.9%; opacity: 1; }
  40%  { offset-distance: 34.9%; opacity: 1; animation-timing-function: ease-in; }
  46%  { offset-distance: 46.3%; opacity: 1; }
  50%  { offset-distance: 55.2%; opacity: 0; }
  53%  { offset-distance: 55.4%; opacity: 0; }
  57%  { offset-distance: 55.4%; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  80%  { offset-distance: 100%;  opacity: 1; }
  86%  { offset-distance: 100%;  opacity: 0; }
  100% { offset-distance: 100%;  opacity: 0; }
}

/* the approval answers the story: a pulse ring and a halo when the chip arrives,
   a small lift of the mark itself */
.hero-art .pulse { fill: none; stroke: var(--white); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse var(--loop) linear infinite; }
.hero-art .halo { fill: #22c55e; opacity: 0; animation: halo var(--loop) linear infinite; }
.hero-art .mark { animation: mark-lift var(--loop) linear infinite; }
@keyframes pulse {
  0%, 38% { transform: scale(1);   opacity: 0; }
  40%     { transform: scale(1);   opacity: 0.8; animation-timing-function: ease-out; }
  52%     { transform: scale(3.6); opacity: 0; }
  100%    { transform: scale(3.6); opacity: 0; }
}
@keyframes halo {
  0%, 36% { opacity: 0; }
  41%     { opacity: 0.55; }
  48%     { opacity: 0.55; }
  56%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes mark-lift {
  0%, 38% { transform: scale(1); }
  41%     { transform: scale(1.18); }
  47%     { transform: scale(1); }
  100%    { transform: scale(1); }
}

/* the published arrow draws itself while the chip rides it */
.hero-art .draw { stroke-dasharray: 168; stroke-dashoffset: 168; animation: draw var(--loop) linear infinite; }
.hero-art .draw-head { opacity: 0; animation: draw-head var(--loop) linear infinite; }
@keyframes draw {
  0%, 56% { stroke-dashoffset: 168; opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  79%     { stroke-dashoffset: 0;   opacity: 1; }
  90%     { stroke-dashoffset: 0;   opacity: 1; }
  96%     { stroke-dashoffset: 0;   opacity: 0; }
  100%    { stroke-dashoffset: 168; opacity: 0; }
}
@keyframes draw-head {
  0%, 76% { opacity: 0; }
  80%     { opacity: 1; }
  90%     { opacity: 1; }
  96%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* nothing moves under reduced motion: the story chip is parked at the check,
   the arrow is drawn, the satellites sit where they were drawn */
@media (prefers-reduced-motion: reduce) {
  .hero-art .orbit, .hero-art .sat, .hero-art .sat .upright, .hero-art .sat .depth,
  .hero-art .node circle, .hero-art .pulse, .hero-art .halo, .hero-art .mark,
  .hero-art .draw, .hero-art .draw-head, .hero-art .story { animation: none; }
  .hero-art .story { offset-distance: 34.9%; opacity: 1; }
  .hero-art .draw { stroke-dashoffset: 0; }
  .hero-art .draw-head { opacity: 1; }
  .hero-art .pulse { display: none; }
}

/* ── Sections on white ─────────────────────────────────────────────────── */
.section { padding: clamp(56px, 8vw, 96px) 0 0; }
.section-head { max-width: 62ch; }
.section-head p { margin-top: 12px; font-size: 1.15rem; color: var(--muted); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered p { text-wrap: balance; }

/* Made for: three statements, a thin sky rule above each, no bullets;
   more air before the cards (v7) */
.made-for { padding-bottom: 64px; }
.made-for-row {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.made-for-row p {
  padding-top: 18px; border-top: 2px solid var(--sky-500);
  font-size: 1.2rem; line-height: 1.4; color: var(--ink); font-weight: 500;
  text-wrap: pretty;
}

/* ── The stack: sticky cards, the next one scrolling over the previous ── */
.stack {
  width: min(1000px, 100% - 2 * var(--gutter));
  margin: 40px auto 0;
  display: grid;
  gap: 0;
}
.card {
  position: sticky;
  top: var(--stack-top);
  margin-bottom: 24px;
  background: var(--card-bg);
  color: var(--card-text);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 28px;
  box-shadow: var(--card-shadow);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 4vw, 48px);
  min-height: var(--card-h);
  transform-origin: 50% 50%;
  /* v9: one surface — copy on one side, the scene layer on the other */
  display: flex; align-items: center;
  overflow: hidden;                    /* the scene may run off the card's edge */
}
/* pass 4 (BG): the copy is LEFT on every card; every scene sits on the right */
.card-copy {
  position: relative; z-index: 1;
  width: 100%;
  max-width: min(var(--copy-w), 48%);
}
/* The scene: an absolutely placed layer on the far side of the copy, wider
   than its half so it runs under the copy (faded in from that edge) and a
   little off the card's outer edge. Copy sits above it. */
.scene {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 60%; z-index: 0;
  will-change: transform;   /* pass 3: its own layer, so the mask is applied at composite time */
}
.scene-right .scene { right: -3%; mask-image: linear-gradient(90deg, transparent 4%, #000 26%); -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 26%); }
.scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene svg svg { display: inline; width: auto; height: auto; overflow: hidden; } /* v11 polish: a nested viewport clips its content in every browser */
/* Seven gradients from the palette. Under the COPY the lightest stop is
   sky-700 (#0369a1, 5.9:1 on white; 4.9:1 on the body text) — card 1 is the
   hero's sky, but its dark end sits under the copy and it only reaches sky-500
   on the scene side (white on sky-500 alone would be 2.8:1). */
/* pass 2 (BG): darker toward the top-left corner under the title.
   v10 (BG): darker still, toward the DARKEST blue — sky-950 in the corner, the
   whole run stays in the sky family (no grey, nothing muddy); sky-500 at the
   scene edge as before. White on sky-950 14.6:1, on sky-900 9.9:1. */
article.card:nth-of-type(1) { background: linear-gradient(112deg, var(--sky-950) 0%, var(--sky-900) 22%, var(--sky-800) 42%, var(--sky-700) 58%, var(--sky-600) 76%, var(--sky-500) 100%); }
/* pass 2 (BG): card 2 must NOT resemble card 1 — deep ink, a faint sky glow only
   behind the scene on the left */
/* pass 4: scenes are on the RIGHT everywhere, so every glow moved to the right half */
article.card:nth-of-type(2) { background: radial-gradient(460px 340px at 74% 55%, rgba(14, 165, 233, 0.16), transparent 70%), linear-gradient(160deg, #111c33 0%, #0b1220 60%, #0b1220 100%); }
/* pass 4 (BG): card 3 in a TURQUOISE combination — deep teal ink under the copy,
   a turquoise glow behind the tree (white on #0e4a52 9.9:1; at the glow's centre 6.5:1) */
/* v10 (BG: "still too green"): a BLUISH turquoise — deep sea ink under the
   copy, a cyan-400 glow behind the tree (white on #0b4a5c 9.2:1; at the
   glow's centre ≈ 6:1) */
article.card:nth-of-type(3) { background: radial-gradient(520px 420px at 76% 50%, rgba(34, 211, 238, 0.22), transparent 70%), repeating-radial-gradient(circle at 100% 100%, rgba(103, 232, 249, 0.05) 0 1px, transparent 1px 30px), linear-gradient(160deg, #072a3a 0%, #0a3f50 55%, #0b4a5c 100%); }
article.card:nth-of-type(4) { background: radial-gradient(420px 500px at 76% 50%, rgba(249, 115, 22, 0.26), transparent 70%), linear-gradient(160deg, #141a30, #0b1220); }
/* v10 (BG): the MOVING colours belong to "Keep everyone informed" (card 5);
   the compliance card (7) gets the calm slate-violet ground the two swapped */
article.card:nth-of-type(7) { background: linear-gradient(160deg, #1e1b4b 0%, #181a38 50%, #0f1024 100%); }
article.card:nth-of-type(6) { background: radial-gradient(460px 460px at 72% 50%, rgba(56, 189, 248, 0.22), transparent 70%), linear-gradient(160deg, #0369a1 0%, #075985 50%, #0c4a6e 100%); }
/* card 5: the one card with MOVING background colours — a slow drift between
   near-black, a dark sky and a dark violet, running only on screen */
article.card:nth-of-type(5) { background: #050914; }
/* pass 3: the drift is a 3×-size gradient layer sliding on transform (no
   per-frame repaint of the card); same colours, same path as the old
   background-position 0% 50% → 100% 50% → back */
/* pass 4 (BG could not see it): a bigger swing — near-black → sky-900 → sky-700
   → indigo-950 → violet-900 → back — and 16 s. The lightest stop is sky-700
   (#0369a1): white 5.9:1, the body text (#e2e8f0) 4.8:1.
   v12 (BG): the LAST stop is the hero's azure #009fff instead of sky-700, so
   the card never settles on card 6's blue (white 2.9:1, body text 2.3:1 —
   it is one edge of a drifting 3× layer, never the ground under the copy). */
article.card:nth-of-type(5)::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -100%; left: 0; width: 300%; height: 300%;
  background: linear-gradient(120deg, #050914 0%, #0c4a6e 14%, #0369a1 26%, #0c4a6e 36%, #1e1b4b 46%, #4c1d95 56%, #1e1b4b 64%, #050914 76%, #0c4a6e 90%, #009fff 100%);
  will-change: transform;
  animation: s7-drift 16s ease-in-out infinite paused;
}
article.card:nth-of-type(5).in-view::before { animation-play-state: running; }
@keyframes s7-drift { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-66.667%, 0, 0); } 100% { transform: translate3d(0, 0, 0); } }
.card h3 { color: var(--white); font-size: 1.5rem; text-wrap: balance; }
.card ul { margin-top: 18px; display: grid; }
.card li { position: relative; color: var(--card-text); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.card li::before { content: ""; position: absolute; }
/* ── Lists (pass 4, BG: "something more interesting than bullets") ────────
   Two variants, switched by ONE class on .stack in index.html:
   .list-ruled (default) — no marker; a hairline rule between the items (the
     "Made for" ruled language); a small sky square at the start of each line.
   .list-spine — a thin sky spine down the left with a dot per item (timeline). */
.stack.list-ruled .card ul { gap: 0; }
.stack.list-ruled .card li { padding: 7px 0 7px 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.stack.list-ruled .card li::before {
  left: 0; top: calc(7px + 0.725em - 3px); width: 6px; height: 6px;
  border-radius: 1.5px; background: var(--sky-400);
}
.stack.list-spine .card ul { position: relative; padding-left: 24px; gap: 9px; margin-top: 20px; }
.stack.list-spine .card ul::before {
  content: ""; position: absolute; left: 3px; top: 0.6em; bottom: 0.6em; width: 2px;
  border-radius: 2px; background: rgba(14, 165, 233, 0.55);
}
.stack.list-spine .card li { padding-left: 0; }
.stack.list-spine .card li::before {
  left: -24px; top: calc(0.725em - 4px); width: 8px; height: 8px;
  border-radius: 999px; background: var(--sky-400);
  box-shadow: 0 0 0 3px rgba(2, 20, 40, 0.55);
}
article.card:nth-of-type(1) .card-copy { color: var(--white); }
article.card:nth-of-type(1) li { color: var(--white); }
/* on the sky card the sky accents would vanish: white there */
.stack.list-ruled article.card:nth-of-type(1) li::before, .stack.list-spine article.card:nth-of-type(1) li::before { background: var(--white); }
.stack.list-spine article.card:nth-of-type(1) ul::before { background: rgba(255, 255, 255, 0.55); }

/* ── Scene 1: the month grid ──────────────────────────────────────────────
   White line art on the sky. Event pills: a coloured edge under a white face
   (the app's colour coding). One loop of 9 s: "Big Event" lifts at 1.0 s,
   slides two days (254 units) until 3.1 s, drops; "Proposed event" pops in at
   4.1 s; the end state holds until 7.0 s; both fade, Big Event reappears on
   its first day at 7.9 s; a quiet second, then again. Paused until the card
   is on screen (.in-view from hero.js). Reduced motion: the end state. */
.scene-1 text { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--ink); }
.scene-1 .wd text { fill: var(--white); font-size: 12px; text-anchor: middle; letter-spacing: 0.04em; opacity: 0.9; }
.scene-1 .dn text { fill: var(--white); font-size: 11px; font-weight: 500; opacity: 0.85; }
.scene-1 .cells rect { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.38); stroke-width: 1; }
.scene-1 .band rect { fill: #f59e0b; opacity: 0.92; }
.scene-1 .ev .face { fill: var(--white); }
.scene-1 .ev .bar { fill: var(--sky-500); }
.scene-1 .c-amber .bar { fill: #f59e0b; }
.scene-1 .c-green .bar { fill: #16a34a; }
.scene-1 .c-sky .bar { fill: var(--sky-500); }
.scene-1 .ev { filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25)); }
.scene-1 .bold { font-weight: 700; }
.scene-1 .ghost-face { fill: rgba(255, 255, 255, 0.14); stroke: var(--white); stroke-width: 1.2; stroke-dasharray: 4 3; }
.scene-1 .proposed text { fill: var(--white); }
.scene-1 .proposed, .scene-1 .ghost { filter: none; }
.scene-1 .big, .scene-1 .proposed, .scene-1 .ghost { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; }
.scene-1 .big { animation: ev-drag 9s linear infinite paused; }
.scene-1 .ghost { opacity: 0; animation: ev-ghost 9s linear infinite paused; }
.scene-1 .proposed { opacity: 0; animation: ev-propose 9s linear infinite paused; }
.card.in-view .scene-1 .big, .card.in-view .scene-1 .ghost, .card.in-view .scene-1 .proposed { animation-play-state: running; }
@keyframes ev-drag {
  0%, 11%  { transform: translate(0, 0) scale(1);        filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25));   opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  17%      { transform: translate(0, -4px) scale(1.07);  filter: drop-shadow(0 12px 18px rgba(0, 30, 60, 0.45)); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0.05, 0.25, 1); }
  34%      { transform: translate(254px, -4px) scale(1.07); filter: drop-shadow(0 12px 18px rgba(0, 30, 60, 0.45)); opacity: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  39%, 78% { transform: translate(254px, 0) scale(1);    filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25));   opacity: 1; }
  82%      { transform: translate(254px, 0) scale(1);    filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25));   opacity: 0; }
  82.01%   { transform: translate(0, 0) scale(1);        filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25));   opacity: 0; }
  88%, 100% { transform: translate(0, 0) scale(1);       filter: drop-shadow(0 1px 2px rgba(0, 30, 60, 0.25));   opacity: 1; }
}
@keyframes ev-ghost {
  0%, 14%  { opacity: 0; }
  19%, 36% { opacity: 0.6; }
  42%, 100% { opacity: 0; }
}
@keyframes ev-propose {
  0%, 45%  { opacity: 0; transform: scale(0.85); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  51%      { opacity: 1; transform: scale(1); }
  78%      { opacity: 1; transform: scale(1); }
  82%      { opacity: 0; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-1 .big, .scene-1 .ghost, .scene-1 .proposed { animation: none; }
  .scene-1 .big { transform: translate(254px, 0); }
  .scene-1 .proposed { opacity: 1; transform: none; }
  .scene-1 .ghost { opacity: 0; }
}
/* ── Scene 2: publish everywhere (card 2) ──────────────────────────────
   The org in the centre; four channels of different length to a calendar,
   a phone, a website (browser on a stand) and the internet (a turning
   planet). Every 6 s four "event" chips leave the org TOGETHER and land
   TOGETHER (0.3 → 1.9 s), each destination glows and shows the event
   (a lit cell / a lit row) until 4.8 s, then everything rests. The planet
   turns all the time (meridians sliding under a circular clip). */
.scene-2 text { font-family: var(--font); font-weight: 600; text-anchor: middle; }
.scene-2 .lines line { stroke: rgba(255, 255, 255, 0.26); stroke-width: 1.5; stroke-linecap: round; }
.scene-2 .frame { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.scene-2 .head { fill: var(--sky-500); opacity: 0.9; }
.scene-2 .dot { fill: rgba(255, 255, 255, 0.85); }
.scene-2 .cells rect { fill: rgba(255, 255, 255, 0.22); }
.scene-2 .row { fill: rgba(255, 255, 255, 0.32); }
.scene-2 .screen { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.scene-2 .notch { fill: rgba(255, 255, 255, 0.6); }
.scene-2 .base { fill: rgba(255, 255, 255, 0.35); }
.scene-2 .cap { font-size: 11px; fill: rgba(255, 255, 255, 0.8); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.scene-2 .globe-fill { fill: rgba(14, 165, 233, 0.22); }
.scene-2 .meri ellipse, .scene-2 .para line, .scene-2 .para ellipse { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.scene-2 .globe-rim { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.4; }
.scene-2 .meri { animation: s2-spin 4s linear infinite paused; }
.scene-2 .org-halo { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.scene-2 .org-shade { fill: rgba(2, 20, 40, 0.45); filter: blur(4px); }
.scene-2 .org { fill: url(#s2-org); }
.scene-2 .org-t { font-size: 12.5px; font-weight: 700; fill: var(--sky-700); letter-spacing: 0.12em; }
.scene-2 .ring circle { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 2; }
.scene-2 .ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s2-ring 6s linear infinite paused; }
.scene-2 .chip rect { fill: var(--sky-500); stroke: rgba(255, 255, 255, 0.6); stroke-width: 1; }
.scene-2 .chip text { font-size: 11px; fill: var(--white); }
.scene-2 .chip { opacity: 0; transform-box: fill-box; transform-origin: center; will-change: transform, opacity; animation: s2-shoot 6s linear infinite paused; }
.scene-2 .dest { transform-box: fill-box; transform-origin: center; animation: s2-hit 6s linear infinite paused; }
.scene-2 .hl { fill: var(--sky-300); opacity: 0; animation: s2-lit 6s linear infinite paused; }
.scene-2 .hl-ring { fill: none; stroke: var(--sky-300); stroke-width: 3; opacity: 0; animation: s2-lit 6s linear infinite paused; }
.card.in-view .scene-2 .meri, .card.in-view .scene-2 .ring, .card.in-view .scene-2 .chip,
.card.in-view .scene-2 .dest, .card.in-view .scene-2 .hl, .card.in-view .scene-2 .hl-ring { animation-play-state: running; }
@keyframes s2-spin { from { transform: translateX(0); } to { transform: translateX(-30px); } }
@keyframes s2-shoot {
  0%     { transform: translate(0, 0) scale(0.4); opacity: 0; }
  5%     { transform: translate(0, 0) scale(1);   opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1); }
  31%    { transform: translate(var(--dx), var(--dy)) scale(1);   opacity: 1; }
  35%    { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
  100%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
}
@keyframes s2-hit {
  0%, 30% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
  35%     { transform: scale(1.09); filter: drop-shadow(0 0 12px rgba(125, 211, 252, 0.95)); }
  50%     { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.35)); }
  80%     { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.35)); }
  90%, 100% { transform: scale(1);  filter: drop-shadow(0 0 0 rgba(125, 211, 252, 0)); }
}
@keyframes s2-lit {
  0%, 31% { opacity: 0; }
  35%, 80% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
@keyframes s2-ring {
  0%, 3% { opacity: 0.8; transform: scale(1); }
  22%    { opacity: 0; transform: scale(1.45); }
  100%   { opacity: 0; transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-2 .meri, .scene-2 .ring, .scene-2 .chip, .scene-2 .dest, .scene-2 .hl, .scene-2 .hl-ring { animation: none; }
  .scene-2 .chip { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  .scene-2 .hl, .scene-2 .hl-ring { opacity: 1; }
}

/* ── Scene 3: the organization tree (card 3) ───────────────────────────
   Top seat, three regions, six units; partner / venue / sponsor dashed
   beside it; role letters on seats (P propose, C check, A approve, R read).
   7 s loop: a "request" pops out of the P unit, hops to the East checker
   (C glows), hops on to the top approver (A glows), a green check appears
   beside the top seat; hold; fade; again. */
.scene-3 text { font-family: var(--font); font-size: 12.5px; font-weight: 600; fill: var(--white); }
.scene-3 .edges path { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.4; }
.scene-3 .edges.dashed path { stroke-dasharray: 4 4; stroke: rgba(255, 255, 255, 0.3); }
.scene-3 .node rect { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.scene-3 .node.top rect { fill: rgba(255, 255, 255, 0.92); }
.scene-3 .node.top text { fill: #073042; font-weight: 700; }
.scene-3 .node text { text-anchor: middle; }
.scene-3 .node.leaf text { font-size: 11.5px; }
.scene-3 .node.ext rect { fill: rgba(255, 255, 255, 0.04); stroke-dasharray: 4 3; }
.scene-3 .node.ext text { font-size: 11.5px; fill: rgba(255, 255, 255, 0.85); }
.scene-3 .av { stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.2; }
.scene-3 .av-p { fill: #f59e0b; } .scene-3 .av-c { fill: var(--sky-500); } .scene-3 .av-a { fill: #16a34a; } .scene-3 .av-r { fill: #64748b; }
.scene-3 .av-t { font-size: 10px; font-weight: 800; text-anchor: middle; fill: var(--white); }
.scene-3 .legend .lg { font-size: 11px; font-weight: 500; fill: rgba(255, 255, 255, 0.75); }
.scene-3 .req rect { fill: #f59e0b; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; }
.scene-3 .req text { font-size: 11px; text-anchor: middle; fill: #1c1917; font-weight: 700; }
.scene-3 .req { opacity: 0; transform-box: fill-box; transform-origin: center; will-change: transform, opacity; animation: s3-req 7s linear infinite paused; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.scene-3 .glow { fill: rgba(125, 211, 252, 0.45); opacity: 0; filter: blur(6px); }
.scene-3 .glow-c { animation: s3-glow-c 7s linear infinite paused; }
.scene-3 .glow-a { animation: s3-glow-a 7s linear infinite paused; }
.scene-3 .ok circle { fill: #16a34a; stroke: var(--white); stroke-width: 1.5; }
.scene-3 .ok path { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-3 .ok { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s3-ok 7s linear infinite paused; }
.card.in-view .scene-3 .req, .card.in-view .scene-3 .glow, .card.in-view .scene-3 .ok { animation-play-state: running; }
@keyframes s3-req {
  0%      { transform: translate(0, 0) scale(0.6); opacity: 0; }
  6%      { transform: translate(0, 0) scale(1);   opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  20%     { transform: translate(35px, -124px) scale(1); opacity: 1; }
  30%     { transform: translate(35px, -124px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  44%     { transform: translate(77px, -198px) scale(1); opacity: 1; }
  48%     { transform: translate(77px, -198px) scale(0.3); opacity: 0; }
  100%    { transform: translate(0, 0) scale(0.6); opacity: 0; }
}
@keyframes s3-glow-c { 0%, 18% { opacity: 0; } 22%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes s3-glow-a { 0%, 42% { opacity: 0; } 46%, 54% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes s3-ok {
  0%, 46% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  52%, 82% { opacity: 1; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(1); }
}

/* ── Scene 4: the poster (card 4) ───────────────────────────────────────
   pass 4 (BG): the poster (unchanged drawing, 16 % bigger) on the right; in
   the space between the copy and the poster a GHOSTED calendar grid with one
   event pill in the poster's colours, joined to the poster by a pulsing data
   stream (dashes and a bright pulse travelling toward the poster). 10 s
   loop: title, date, venue and category fly FROM THE PILL into their slots
   one after another, then the logo, the sponsor strip and the QR snap in;
   hold; fade; again. */
.scene-4 text { font-family: var(--font); }
.scene-4 .grid rect { fill: rgba(255, 255, 255, 0.05); stroke: rgba(255, 255, 255, 0.30); stroke-width: 1; }
.scene-4 .grid text { font-size: 10px; font-weight: 500; fill: rgba(255, 255, 255, 0.55); }
.scene-4 .pill { filter: drop-shadow(0 4px 10px rgba(224, 68, 124, 0.45)); }
.scene-4 .pill rect { fill: url(#s4-pill); stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; }
.scene-4 .pill text { font-size: 12px; font-weight: 700; fill: var(--white); }
.scene-4 .stream-base { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.scene-4 .stream-dash { fill: none; stroke: #ff7a45; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0.85; animation: s4-dash 0.9s linear infinite paused; }
.scene-4 .stream-pulse { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 120; opacity: 0.9; animation: s4-pulse 1.5s linear infinite paused; }
.card.in-view .scene-4 .stream-dash, .card.in-view .scene-4 .stream-pulse { animation-play-state: running; }
@keyframes s4-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -14; } }
@keyframes s4-pulse { from { stroke-dashoffset: 18; } to { stroke-dashoffset: -120; } }
.scene-4 .shape { fill: rgba(255, 255, 255, 0.16); }
.scene-4 .shape2 { fill: rgba(30, 10, 60, 0.22); }
.scene-4 .logo-o { fill: none; stroke: var(--white); stroke-width: 2.5; }
.scene-4 .logo-i { fill: var(--white); }
.scene-4 .logo-t { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; fill: var(--white); }
.scene-4 .p-t1, .scene-4 .p-t2 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; fill: var(--white); }
.scene-4 .p-d1 { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; fill: var(--white); }
.scene-4 .p-d2 { font-size: 13px; font-weight: 600; fill: rgba(255, 255, 255, 0.9); }
.scene-4 .p-v { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; fill: rgba(255, 255, 255, 0.92); }
.scene-4 .p-cat { fill: var(--white); }
.scene-4 .p-cat-t { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; fill: #6d28d9; text-anchor: middle; }
.scene-4 .p-spon { fill: rgba(255, 255, 255, 0.92); }
.scene-4 .p-spon-t { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; fill: #94a3b8; }
.scene-4 .qr-bg { fill: var(--white); }
.scene-4 .qr rect { fill: #1e1b4b; } .scene-4 .qr rect.w { fill: var(--white); }
.scene-4 .f-logo, .scene-4 .f-title, .scene-4 .f-date, .scene-4 .f-venue, .scene-4 .f-cat, .scene-4 .f-spon, .scene-4 .f-qr {
  transform-box: fill-box; transform-origin: center; will-change: transform, opacity; opacity: 0;
  animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused;
}
.scene-4 .f-title { animation-name: s4-title; } .scene-4 .f-date { animation-name: s4-date; } .scene-4 .f-venue { animation-name: s4-venue; }
.scene-4 .f-cat { animation-name: s4-cat; } .scene-4 .f-logo { animation-name: s4-logo; } .scene-4 .f-spon { animation-name: s4-spon; } .scene-4 .f-qr { animation-name: s4-qr; }
.scene-4 .f-spon, .scene-4 .f-qr { will-change: auto; } /* v11 polish: inside the poster clip — Firefox drops an SVG clip-path on layered children */
.card.in-view .scene-4 .f-logo, .card.in-view .scene-4 .f-title, .card.in-view .scene-4 .f-date, .card.in-view .scene-4 .f-venue,
.card.in-view .scene-4 .f-cat, .card.in-view .scene-4 .f-spon, .card.in-view .scene-4 .f-qr { animation-play-state: running; }
/* the fields start on the PILL (poster-local ≈ (−138, 177)) and fly to their slots */
@keyframes s4-title {
  0%, 5% { transform: translate(-238px, 43px) scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  13%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
@keyframes s4-date {
  0%, 13% { transform: translate(-206px, -20px) scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  20%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
@keyframes s4-venue {
  0%, 20% { transform: translate(-233px, -47px) scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  26%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
@keyframes s4-cat {
  0%, 26% { transform: translate(-206px, -73px) scale(0.5); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  32%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
@keyframes s4-logo {
  0%, 34% { transform: translate(0px, 0px) scale(0.2); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  38%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
/* v10: the strip used to start 24 units BELOW its slot — at scale 0.2 that is
   an 8-unit white line poking out under the poster's bottom edge while it
   snaps in (BG's "thin line with movement, mirroring the poster"). It now
   starts 8 units down, inside the poster, and its parent is clipped to the
   poster as well. */
@keyframes s4-spon {
  0%, 39% { transform: translate(0px, 8px) scale(0.2); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  44%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}
@keyframes s4-qr {
  0%, 45% { transform: translate(0px, 0px) scale(0.2); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.05); }
  49%, 85% { transform: translate(0, 0) scale(1); opacity: 1; }
  90%, 100% { transform: translate(0, 0) scale(1); opacity: 1; opacity: 0; }
}

/* ── Scene 5: the circular and the inbox (card 5) ───────────────────────
   9 s loop: the circular's line draws to the recipient panel; five read
   ticks turn green one by one, one stays grey, "unread: 1" appears; below,
   the Approve button in the task-inbox row is pressed and gets its check. */
.scene-5 text { font-family: var(--font); }
.scene-5 .env { fill: rgba(255, 255, 255, 0.92); }
.scene-5 .flap { fill: none; stroke: #6366f1; stroke-width: 2; stroke-linejoin: round; }
.scene-5 .mail { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35)); }
.scene-5 .env-t { font-size: 13px; font-weight: 700; fill: var(--white); text-anchor: middle; }
.scene-5 .env-s { font-size: 11px; font-weight: 500; fill: rgba(255, 255, 255, 0.75); text-anchor: middle; }
.scene-5 .send { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.6; stroke-dasharray: 130; stroke-dashoffset: 130; animation: s5-send 9s linear infinite paused; }
.scene-5 .pn { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; }
.scene-5 .ph { font-size: 13px; font-weight: 700; fill: var(--white); }
.scene-5 .ps { font-size: 10.5px; font-weight: 500; fill: rgba(255, 255, 255, 0.65); }
.scene-5 .ava { fill: rgba(255, 255, 255, 0.18); }
.scene-5 .ini { font-size: 8px; font-weight: 700; fill: var(--white); text-anchor: middle; }
.scene-5 .nm { font-size: 12px; font-weight: 500; fill: rgba(255, 255, 255, 0.9); }
.scene-5 .tick { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.45); stroke-width: 1; }
.scene-5 .tk { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.scene-5 .badge rect { fill: #f59e0b; }
.scene-5 .badge text { font-size: 10.5px; font-weight: 700; fill: #1c1917; text-anchor: middle; }
.scene-5 .badge { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s5-badge 9s linear infinite paused; }
.scene-5 .btn rect { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.2; }
.scene-5 .btn text { font-size: 12px; font-weight: 600; fill: var(--white); text-anchor: middle; }
.scene-5 .approve rect { stroke: #22c55e; }
.scene-5 .approve { transform-box: fill-box; transform-origin: center; animation: s5-press 9s linear infinite paused; }
.scene-5 .done circle { fill: #16a34a; stroke: var(--white); stroke-width: 1.5; }
.scene-5 .done path { fill: none; stroke: var(--white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.scene-5 .done { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s5-done 9s linear infinite paused; }
.scene-5 .tick.t1, .scene-5 .tick.t2, .scene-5 .tick.t3, .scene-5 .tick.t4, .scene-5 .tick.t5 { animation: s5-tick 9s linear infinite paused; }
.scene-5 .tk.t1, .scene-5 .tk.t2, .scene-5 .tk.t3, .scene-5 .tk.t4, .scene-5 .tk.t5 { animation: s5-tk 9s linear infinite paused; }
.scene-5 .t1 { animation-delay: 0s; } .scene-5 .t2 { animation-delay: 0.55s; } .scene-5 .t3 { animation-delay: 1.1s; } .scene-5 .t4 { animation-delay: 1.65s; } .scene-5 .t5 { animation-delay: 2.2s; }
.card.in-view .scene-5 .send, .card.in-view .scene-5 .badge, .card.in-view .scene-5 .approve, .card.in-view .scene-5 .done,
.card.in-view .scene-5 .tick, .card.in-view .scene-5 .tk { animation-play-state: running; }
@keyframes s5-send { 0% { stroke-dashoffset: 130; } 10%, 88% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 130; } }
/* the ticks share one keyframe, staggered by animation-delay; the loop is
   long enough (9 s) that the 2.2 s stagger never runs into the next round */
@keyframes s5-tick { 0%, 11% { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.45); } 13%, 62% { fill: #16a34a; stroke: #16a34a; } 66%, 100% { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.45); } }
@keyframes s5-tk { 0%, 11% { opacity: 0; } 13%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes s5-badge { 0%, 42% { opacity: 0; transform: scale(0.6); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } 47%, 86% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1); } }
@keyframes s5-press {
  0%, 54% { transform: scale(1); }
  56%     { transform: scale(0.92); }
  58%     { transform: scale(1); }
  100%    { transform: scale(1); }
}
@keyframes s5-done { 0%, 57% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); } 62%, 86% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(1); } }

/* ── Scene 6: the app on a phone (card 6) ───────────────────────────────
   A phone (dark body, gradient bezel highlight, punch-hole, side buttons)
   showing the public app: top bar, a list of event cards in the app's own
   card design (date block, title, place, three round buttons, category
   badge). 13 s loop: the list scrolls down over ~5 s, a push notification
   slides in from the top, holds, slides out, the list scrolls back. */
.scene-6 text { font-family: var(--font); }
/* pass 4 (BG): a faint calendar grid behind the phone, fading toward the edges */
.scene-6 .grid rect { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; }
.scene-6 .grid text { font-size: 10px; font-weight: 500; fill: rgba(255, 255, 255, 0.5); }
.scene-6 .body { fill: #0b1220; stroke: #1f2a44; stroke-width: 1; }
.scene-6 .bezel { fill: none; stroke: url(#s6-bezel); stroke-width: 1.2; }
.scene-6 .btn-side { fill: #334155; }
.scene-6 .screen { fill: #eef2f7; }
.scene-6 .topbar { fill: #eef2f7; }
.scene-6 .sb { font-size: 9px; font-weight: 600; fill: #0f172a; }
.scene-6 .tb-title { font-size: 15px; font-weight: 700; fill: #0f172a; }
.scene-6 .tb-org { font-size: 8.5px; font-weight: 600; fill: #64748b; text-anchor: end; }
.scene-6 .hole { fill: #0b1220; }
.scene-6 .homebar { fill: #94a3b8; }
.scene-6 .corner { fill: #0b1220; }
.scene-6 .ac-bg { fill: var(--white); filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.12)); }
.scene-6 .ac-day { font-size: 17px; font-weight: 700; fill: #0f172a; }
.scene-6 .ac:first-child .ac-day { fill: #198dff; }
.scene-6 .ac-mon { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; fill: #64748b; }
.scene-6 .ac-title { font-size: 11.5px; font-weight: 600; fill: #0f172a; }
.scene-6 .ac-place { font-size: 8px; font-weight: 400; fill: #64748b; }
.scene-6 .ac-btn { fill: #e2e8f0; }
.scene-6 .ac-cat { fill: #0ea5e9; }
.scene-6 .ac-cat-t { font-size: 7.5px; font-weight: 700; fill: var(--white); text-anchor: middle; letter-spacing: 0.02em; }
.scene-6 .list { will-change: transform; animation: s6-scroll 13s ease-in-out infinite paused; }
.scene-6 .push { transform: translateY(-80px); will-change: transform; animation: s6-push 13s linear infinite paused; filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.28)); }
.scene-6 .pu-bg { fill: rgba(255, 255, 255, 0.98); }
.scene-6 .pu-ico { fill: var(--sky-500); } .scene-6 .pu-ico2 { fill: var(--white); }
.scene-6 .pu-app { font-size: 8.5px; font-weight: 600; fill: #64748b; }
.scene-6 .pu-txt { font-size: 10.5px; font-weight: 700; fill: #0f172a; }
.card.in-view .scene-6 .list, .card.in-view .scene-6 .push { animation-play-state: running; }
@keyframes s6-scroll {
  0%, 8%   { transform: translateY(0); }
  45%, 84% { transform: translateY(-160px); }
  96%, 100% { transform: translateY(0); }
}
@keyframes s6-push {
  0%, 50%  { transform: translateY(-80px); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  55%, 80% { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.8, 0.6); }
  84%, 100% { transform: translateY(-80px); }
}

/* ── Scene 7: control & compliance (card 7) ─────────────────────────────
   "Your instance · Hosted in Germany" → an arrow → "Off-site backup" with a
   key; a Made in Germany tag; an audit-trail panel with three lines and a
   fourth that types itself in (8 s loop); the backup arrow pulses once
   per loop. No shields, no padlocks. */
.scene-7 text { font-family: var(--font); }
.scene-7 .box rect { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.scene-7 .srv rect { fill: rgba(255, 255, 255, 0.22); } .scene-7 .srv circle { fill: #22c55e; }
.scene-7 .key circle { fill: none; stroke: #fbbf24; stroke-width: 2; } .scene-7 .key path { fill: none; stroke: #fbbf24; stroke-width: 2; stroke-linecap: round; }
.scene-7 .bt { font-size: 13px; font-weight: 700; fill: var(--white); }
.scene-7 .bs { font-size: 10.5px; font-weight: 500; fill: rgba(255, 255, 255, 0.7); }
.scene-7 .arrow { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.6; }
.scene-7 .arrow-glow { fill: none; stroke: var(--sky-300); stroke-width: 5; stroke-linecap: round; opacity: 0; filter: blur(2px); animation: s7-pulse 8s linear infinite paused; }
.scene-7 .made > rect { fill: rgba(255, 255, 255, 0.92); }   /* v12: the pill only — `.made rect` painted the flag's stripes white too */
.scene-7 .made text { font-size: 11.5px; font-weight: 700; fill: #0f172a; letter-spacing: 0.02em; }
.scene-7 .fl-k { fill: #111827; } .scene-7 .fl-r { fill: #dd0000; } .scene-7 .fl-g { fill: #ffce00; }
.scene-7 .pn { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.scene-7 .ph { font-size: 13px; font-weight: 700; fill: var(--white); }
.scene-7 .ps { font-size: 10.5px; font-weight: 500; fill: rgba(255, 255, 255, 0.65); }
.scene-7 .lt { font-size: 12px; font-weight: 700; fill: var(--sky-300); font-variant-numeric: tabular-nums; }
.scene-7 .lx { font-size: 12.5px; font-weight: 500; fill: rgba(255, 255, 255, 0.9); }
.scene-7 .typemask { display: none; }
.scene-7 .typewrap { clip-path: inset(-4px 100% -4px 0); animation: s7-type 8s steps(30, end) infinite paused; }
.scene-7 .caret { fill: var(--sky-300); opacity: 0; animation: s7-caret 8s steps(30, end) infinite paused; }
.card.in-view .scene-7 .typewrap, .card.in-view .scene-7 .caret, .card.in-view .scene-7 .arrow-glow { animation-play-state: running; }
@keyframes s7-type { 0%, 12% { clip-path: inset(-4px 100% -4px 0); } 40%, 86% { clip-path: inset(-4px 0% -4px 0); } 90%, 100% { clip-path: inset(-4px 100% -4px 0); } }
@keyframes s7-caret { 0%, 11% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; transform: translateX(0); } 40% { opacity: 1; transform: translateX(212px); } 44%, 100% { opacity: 0; transform: translateX(212px); } }
@keyframes s7-pulse { 0%, 52% { opacity: 0; } 57% { opacity: 0.9; } 68%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scene-3 .req, .scene-3 .glow, .scene-3 .ok { animation: none; }
  .scene-3 .req { opacity: 1; transform: translate(35px, -124px); }
  .scene-3 .ok { opacity: 1; }
  .scene-4 .f-logo, .scene-4 .f-title, .scene-4 .f-date, .scene-4 .f-venue, .scene-4 .f-cat, .scene-4 .f-spon, .scene-4 .f-qr { animation: none; opacity: 1; }
  .scene-4 .stream-dash, .scene-4 .stream-pulse { animation: none; }
  .scene-5 .send, .scene-5 .badge, .scene-5 .approve, .scene-5 .done, .scene-5 .tick, .scene-5 .tk { animation: none; }
  /* pass 3: the per-tick rules above are (0,3,0) and outranked the line before — spell them out */
  .scene-5 .tick.t1, .scene-5 .tick.t2, .scene-5 .tick.t3, .scene-5 .tick.t4, .scene-5 .tick.t5,
  .scene-5 .tk.t1, .scene-5 .tk.t2, .scene-5 .tk.t3, .scene-5 .tk.t4, .scene-5 .tk.t5 { animation: none; }
  .scene-5 .send { stroke-dashoffset: 0; }
  .scene-5 .tick.t1, .scene-5 .tick.t2, .scene-5 .tick.t3, .scene-5 .tick.t4, .scene-5 .tick.t5 { fill: #16a34a; stroke: #16a34a; }
  .scene-5 .tk, .scene-5 .badge, .scene-5 .done { opacity: 1; }
  .scene-6 .list, .scene-6 .push { animation: none; }
  .scene-6 .push { transform: translateY(0); }
  .scene-7 .typewrap, .scene-7 .caret, .scene-7 .arrow-glow { animation: none; }
  .scene-7 .typewrap { clip-path: none; }
  article.card:nth-of-type(5)::before { animation: none; }
}

/* The recede is SCRIPTED (v8, hero.js "stack"): CSS scroll-driven timelines
   exist only in Chromium, and BG reads the page in Firefox. Each card keeps a
   zero-height SENTINEL before it — the sentinel is never sticky, so its top is
   the next card's IN-FLOW position, which is what the script measures (the
   sticky card's own rect stops moving once stuck). Card N shrinks about its
   centre from 1 to 0.76 while N+1 travels from N's bottom edge to the sticky
   top (the nmore.com look: it drops back into the page, then sits entirely
   behind — a 500px card at 0.76 spans 156–536, the next one 96–596). Without
   the script: a plain sticky stack. */
.sentinel { height: 0; }
.card { will-change: transform; }
/* the receding card darkens through an OPAQUE overlay, not opacity; it sits
   above the copy AND the scene */
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 2;
  background: rgba(2, 20, 40, var(--dim, 0)); pointer-events: none;
}
/* v10: "How you start" follows the stack directly (BG) — no tail; the last
   card unsticks with the stack's end anyway */
.stack-tail { height: 0; }

/* ── How you start (v10): three numbered steps on one line ─────────────── */
.start { padding-top: clamp(72px, 10vw, 128px); }
.steps {
  position: relative; margin: 48px 0 0; padding: 0; list-style: none;   /* an <ol>: the discs carry the numbers */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
/* the thin line joining the three discs, disc centre to disc centre */
.steps::before {
  content: ""; position: absolute; top: 22px; height: 2px;
  left: calc(100% / 6); right: calc(100% / 6);
  background: linear-gradient(90deg, var(--sky-200), var(--sky-400) 50%, var(--sky-200));
}
.step { position: relative; padding-top: 70px; text-align: center; }
.step .num {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--sky-500); color: var(--white); font-weight: 700; font-size: 1.1rem;
  box-shadow: 0 0 0 6px var(--white), var(--raised);
}
.step h3 { font-size: 1.2rem; text-wrap: balance; }
.step p { margin-top: 10px; color: var(--muted); text-wrap: pretty; max-width: 34ch; margin-inline: auto; }
.steps-note { margin-top: 44px; text-align: center; font-size: 1.25rem; font-weight: 650; color: var(--sky-700); }

/* ── Your data stays yours (v10): a light panel, a lead line, six tiles ── */
.trust { padding-top: clamp(72px, 10vw, 128px); }
.trust-panel {
  position: relative; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--sky-100);
  background: linear-gradient(160deg, #f2f9fe 0%, var(--white) 55%, var(--sky-50) 100%);
  box-shadow: var(--raised-soft);
  padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
/* a ghosted plan grid, fading out toward the right and the edges (static) */
.trust-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(14, 165, 233, 0.10) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.10) 1px, transparent 1px);
  background-size: 52px 52px; background-position: -1px -1px;
  mask-image: radial-gradient(75% 110% at 22% 50%, #000 15%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 110% at 22% 50%, #000 15%, transparent 100%);
}
.trust-lead, .trust-tiles { position: relative; }
.trust-lead p {
  margin-top: 18px;
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.75rem); font-weight: 650; line-height: 1.25;
  color: var(--sky-700); text-wrap: balance;
}
.trust-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile {
  display: grid; gap: 12px; align-content: start;
  padding: 18px 16px;
  background: var(--white); border: 1px solid var(--sky-100); border-radius: 16px;
  box-shadow: var(--raised);
}
.tile svg { width: 28px; height: 28px; fill: none; stroke: var(--sky-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile .fl { stroke: none; }
.tile p { font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.35; text-wrap: pretty; }

/* ── Digipart + footer (v10): one dark surface mirroring the hero card,
   the sky at its top, sinking to the darkest blue at the foot of the page.
   The copy starts where the ground is sky-600/700 (white on sky-600 4.0:1 is
   fine for the large title; body text sits on ≥ sky-700, 5.9:1). ── */
.outro {
  position: relative; overflow: hidden;
  margin: clamp(80px, 11vw, 144px) var(--hero-inset) 0;
  border-radius: 32px 32px 0 0;
  color: var(--white);
  background: linear-gradient(180deg, var(--sky-400) 0%, var(--sky-500) 6%, var(--sky-600) 13%, var(--sky-700) 26%, var(--sky-800) 50%, var(--sky-900) 74%, var(--sky-950) 90%, var(--night) 100%);
  box-shadow: var(--raised-soft);
}
/* the orbit's rings, faint, top right — the hero's language */
.outro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.07) 0 1.5px, transparent 1.5px 56px);
  mask-image: radial-gradient(60% 60% at 92% 8%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 60% at 92% 8%, #000 30%, transparent 100%);
}
.outro-body { position: relative; padding: clamp(64px, 9vw, 112px) 0 0; }
.outro-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.outro h2, .outro h3 { color: var(--white); }
.outro-copy p { margin-top: 18px; font-size: 1.15rem; line-height: 1.5; max-width: 58ch; color: rgba(255, 255, 255, 0.94); text-wrap: pretty; }
.outro-side {
  padding: 28px;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}
.outro-side p { margin-top: 8px; color: rgba(255, 255, 255, 0.88); }
.outro-side .pill { margin-top: 20px; max-width: 100%; }
.site-footer {
  position: relative;
  margin-top: clamp(64px, 9vw, 112px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 24px 0 30px;
  font-size: 0.95rem; color: rgba(255, 255, 255, 0.78);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .soon small {
  margin-left: 7px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.32); color: rgba(255, 255, 255, 0.75);
}

/* ── Back to top (v12, BG): a round white button, bottom right, the
   nav-toggle's neumorphic language. Hidden until the reader is a viewport
   down the page (menu-script.html toggles .is-shown); it is a plain link to
   #top, so the page's smooth scroll (and its reduced-motion opt-out) does the
   moving. Every page shows it (outro.html). */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid var(--rim); background: var(--white); color: var(--ink);
  box-shadow: var(--raised); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s;
}
.to-top[hidden] { display: none; }          /* no JS: the link never appears (the attribute is cleared by the script) */
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.25s; }
.to-top:hover { background: var(--sky-50); }
.to-top:focus-visible { outline: 2px solid var(--sky-500); outline-offset: 2px; }
.to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* v12 (BG): the menu collapses where the hero stacks, not later — between
     720 and 960 the six nav items were wrapping into the title */
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: var(--gutter); right: var(--gutter); top: 72px;
    padding: 12px; background: var(--white); border-radius: 20px;
    border: 1px solid var(--rim); box-shadow: var(--raised-soft); color: var(--ink);
  }
  .nav.is-open a:not(.pill):hover { background: var(--sky-50); }
  .nav.is-open .pill { margin: 8px 0 0; background: var(--sky-500); color: var(--white); border-color: var(--sky-400); }
  /* the picker sits in the panel's flow, its menu unfolds in place */
  .nav.is-open .lang { margin: 6px 0 0 6px; }
  .nav.is-open .lang summary:hover { background: var(--sky-50); }
  .nav.is-open .lang-menu { position: static; margin-top: 6px; box-shadow: none; }
  .site-footer nav .lang-footer { flex-basis: 100%; }
  .nav-toggle { display: grid; place-items: center; }
  /* v12 (BG): stacked, the hero copy is centred over the orbit */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { max-width: none; margin-inline: auto; }
  .hero-lines { justify-items: center; }
  .hero-actions { justify-content: center; }
  .orbit-stage { justify-self: center; max-width: 440px; }
  /* the back-to-top button must not cover the footer's last row */
  .site-footer .wrap { padding-right: 64px; }
  .made-for-row { grid-template-columns: 1fr; gap: 20px; }
  /* v10: the lower sections stack */
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps::before { display: none; }
  .step { padding-top: 0; padding-left: 64px; text-align: left; }
  .step .num { left: 0; transform: none; }
  .step p { margin-inline: 0; }
  .trust-panel { grid-template-columns: 1fr; }
  .trust-tiles { grid-template-columns: repeat(2, 1fr); }
  .outro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .trust-tiles { grid-template-columns: 1fr; }
  .outro { border-radius: 24px 24px 0 0; }
  .outro-side .pill { width: 100%; }
}
@media (max-width: 720px) {
  .brand-logo { width: 129px; height: 22px; }
  .hero { border-radius: 0 0 24px 24px; }
  .hero-copy h1 { max-width: none; }
  .hero-lines { font-size: 1.1rem; }
  .hero-actions .pill { flex: 1 1 100%; }
  .orbit-stage { max-width: 360px; }
  .hero-art text, .hero-art .tag-text { font-size: 15px; }
  .hero-art .label { font-size: 16px; }
  :root { --stack-top: 76px; --globe: 96px; }
  .globe-static { font-size: 11px; }
  .globe-band .ch { font-size: 11px; width: 12px; margin-left: -6px; line-height: 14px; margin-top: -7px; }
  /* v9: on phones a card (copy + scene) is taller than the viewport, and a
     sticky card taller than the viewport freezes with its lower part out of
     reach — so here the cards simply scroll, one after the other (the recede
     script steps aside under 720px too) */
  .card { border-radius: 22px; min-height: 0; flex-direction: column; align-items: stretch; position: relative; top: auto; margin-bottom: 16px; }
  .card-copy { max-width: none; }
  /* the scene drops below the copy, full width, a fixed height: the grid is
     cropped left and right (slice) rather than shrunk to illegibility */
  .scene, .scene-right .scene {
    position: relative; top: auto; right: auto; left: auto; transform: none;
    width: 100%; height: 300px; margin-top: 24px;
    mask-image: none; -webkit-mask-image: none;
    will-change: auto;
  }
  .scene svg { width: 100%; height: 100%; }
  /* pass 4: the narrowed phone viewBoxes (hero.js) are 510×420 and 240×520 */
  .card[data-scene="4"] .scene { height: 300px; }
  .card[data-scene="6"] .scene { height: 440px; }
  .scene-1 text { font-size: 13.5px; }
  .scene-1 .wd text { font-size: 13px; }
  .scene-1 .dn text { font-size: 12px; }
}