/* ============================================================
   BAULYNQ — v2 (storytelling)
   Editorial, minimal, scroll-driven. Same brand system as v1:
   oxblood accent, mono ink/bg, gold only in the footer flag.
   Inspiration: Adobe "Running on Experience" (scroll-told story,
   side index, milestone numbering) + okalpha.co (massive kinetic
   type, scroll word-fill, big editorial list rows, long-shadow
   geometry). All motion gated behind prefers-reduced-motion.
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --ink: #0a0a0a;
  --ink2: #5a5a5a;
  --ink3: #a8a8a8;
  --line: rgba(0,0,0,.09);
  --line-strong: rgba(0,0,0,.18);

  --accent: #8E2222;          /* German red (Schwarz-Rot-Gold) */
  --accent-soft: rgba(142,34,34,.10);
  --err: #ff1a1a;
  --ok: #14d05a;

  --fs: 'Manrope Variable', 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --fm: 'Geist Mono Variable', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gx: clamp(22px, 6vw, 120px);   /* page gutter */
  --w: 1320px;                      /* content max-width */
  --hdr-h: 70px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0a0a0b;
  --bg-soft: #111113;
  --ink: #ffffff;
  --ink2: #9a9a9c;
  --ink3: #55555a;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.22);
  --accent: #C9554D;          /* brighter red for dark backgrounds */
  --accent-soft: rgba(201,85,77,.14);
  --accent-btn: #B84840;      /* darker red for filled buttons — ≥5.2:1 on white */
  color-scheme: dark;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fs);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .35s var(--ease), color .35s var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: none; }
::selection { background: var(--ink); color: var(--bg); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 999;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: var(--r-sm);
  font-family: var(--fm); font-size: .8rem; letter-spacing: .04em;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding-inline: var(--gx);
}

.mono { font-family: var(--fm); }

/* ----- Top scroll-progress hairline ----- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200;
  background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transform-origin: left;
}

/* ----- First-load intro curtain (GSAP two-phase cinematic reveal) -----
   Phase 1: BAULYNQ letters zoom in one by one → SRG bar wipes in → phase
   zooms away. Phase 2: B mark zooms in → SRG bar wipes in → curtain
   slides up. GSAP drives ALL states; nothing here uses CSS animation.   */
.introscreen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg); overflow: hidden;
}
/* Both phases stack in the same full-screen layer */
.intro-phase {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Hide phase 2 from first paint — GSAP animates it in.
   Without this the B mark flashes visible for one frame before
   gsap.set() fires (defer means GSAP loads after first paint). */
.intro-phase-logo { opacity: 0; }
/* Inline column — chars/mark on top, flag bar below, both auto-sized
   so the bar exactly matches the width of its sibling above it. */
.intro-unit {
  display: inline-flex; flex-direction: column; align-items: stretch;
  gap: clamp(14px, 2.5vw, 22px);
}
/* Letter row for BAULYNQ */
.intro-chars {
  display: flex; align-items: baseline;
  font-family: var(--fs); font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
}
.intro-char { display: inline-block; }
.intro-char.ix { color: var(--accent); }   /* LYNQ in German red */
/* Three-segment flag bar — flex makes each segment equal width */
.intro-flag-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; }
.ifb { flex: 1; }
.ifb-k { background: #131318; }
[data-theme="dark"] .ifb-k { background: #4a4a55; }
.ifb-r { background: var(--accent); }
.ifb-g { background: #F6C500; }
/* B mark (Phase 2) — large and centred, no bar */
.intro-bmark {
  height: clamp(140px, 28vw, 220px); width: auto; display: block;
  filter: drop-shadow(0 12px 48px rgba(0,0,0,.28));
}
.intro-bmark-d { display: none; }
[data-theme="dark"] .intro-bmark-l { display: none; }
[data-theme="dark"] .intro-bmark-d { display: block; }
@media (prefers-reduced-motion: reduce) { .introscreen { display: none; } }

/* ----- Header (blended — no bar/card, borderless controls) ----- */
.hdr {
  position: fixed; inset: 0 0 auto 0; height: var(--hdr-h); z-index: 150;
  pointer-events: none;
  /* Fade from page-bg at top → transparent — prevents a hard dark-band
     in dark mode and softens the header edge in light mode. */
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 55%,
    transparent 100%);
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.hdr.is-hidden { transform: translateY(-115%); opacity: 0; }
.hdr-inner {
  max-width: var(--w); margin: 0 auto; height: 100%;
  padding-inline: var(--gx);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.hdr-inner > * { pointer-events: auto; }
/* Compact navbar CTA — sized to sit flush with lang-switch and icon-btn */
.hdr-cta {
  display: inline-flex; align-items: center;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--accent-btn, var(--accent)); color: #fff;
  font-family: var(--fs); font-weight: 600; font-size: .72rem; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .25s var(--ease), transform .3s var(--ease);
}
.hdr-cta:hover { background: var(--accent); transform: translateY(-1px); }

/* Brand: separate mark image + wordmark text for proportional control. */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { height: 20px; width: 20px; display: block; flex-shrink: 0; transition: transform .35s var(--ease); }
.brand-mark-d { display: none; }
[data-theme="dark"] .brand-mark-l { display: none; }
[data-theme="dark"] .brand-mark-d { display: block; }
.brand-text {
  font-family: var(--fs); font-weight: 700; font-size: .95rem;
  letter-spacing: -.03em; color: var(--ink); line-height: 1;
  transition: color .25s var(--ease);
}
.brand-text strong { font-weight: 800; letter-spacing: -.04em; }
.brand:hover .brand-mark { transform: translateY(-1px); }

.hdr-actions { display: inline-flex; align-items: center; gap: 20px; }
.lang-switch { display: inline-flex; align-items: center; gap: 11px; }
.lang-switch button {
  padding: 0; font-family: var(--fm); font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  color: var(--ink3); position: relative; transition: color .25s var(--ease);
}
.lang-switch button:hover { color: var(--ink2); }
.lang-switch button.is-active { color: var(--ink); }
.lang-switch button.is-active::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.lang-sep { width: 1px; height: 12px; background: var(--line-strong); }
.icon-btn {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; background: none; padding: 0; color: var(--ink2);
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.icon-btn:hover { color: var(--ink); transform: rotate(15deg); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .i-moon { display: none; }

/* ----- Side rail (desktop section index) ----- */
.rail {
  position: fixed; right: clamp(16px, 2.4vw, 40px); top: 50%; transform: translateY(-50%);
  z-index: 120; display: none;
}
@media (min-width: 1180px) { .rail { display: block; } }
.rail-list { display: grid; gap: 15px; }
/* Fixed 3-column grid — [label | number | dot]. Every row is the same width,
   so the number and dot columns line up perfectly down the whole rail. The
   label reveals via opacity only (no layout shift); the dot is the link's
   ::after, which becomes the third grid item. */
.rail-list a {
  display: grid;
  grid-template-columns: 1fr 24px 9px;
  align-items: center;
  column-gap: 12px;
  width: 168px;
  font-family: var(--fm); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); transition: color .3s var(--ease);
}
.rail-t {
  order: 1; text-align: right; white-space: nowrap;
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.rail-n { order: 2; text-align: right; }
.rail-list a::after {
  order: 3; content: ""; justify-self: end;
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--line-strong);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.rail-list a:hover { color: var(--ink); }
.rail-list a:hover .rail-t { opacity: 1; transform: none; }
.rail-list a.is-active { color: var(--ink); }
.rail-list a.is-active .rail-t { opacity: 1; transform: none; }
.rail-list a.is-active::after { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }

/* ----- Buttons ----- */
.btn {
  --tx: 0px; --ty: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px;
  font-family: var(--fs); font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  transform: translate(var(--tx), var(--ty));
  transition: transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  will-change: transform; overflow: hidden; isolation: isolate;
}
.btn svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-a { background: var(--accent-btn, var(--accent)); color: #fff; }
.btn-a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.32), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.btn-a:hover::after { opacity: 1; }
.btn-l { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-l:hover { border-color: var(--ink); background: var(--bg-soft); }
.btn-sm { padding: 9px 18px; font-size: .82rem; min-height: 38px; }

/* ----- Kicker ----- */
.kicker {
  font-family: var(--fm); font-size: clamp(.7rem, .85vw, .78rem); font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink2);
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 currentColor; animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Shared accent emphasis (single-word) */
.accent { color: var(--accent); font-style: italic; font-weight: 600; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--hdr-h) + clamp(24px, 5vw, 60px));
  padding-bottom: clamp(64px, 9vw, 130px);
}
.hero::before {     /* faint accent glow */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px circle at 18% 30%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    radial-gradient(700px circle at 88% 60%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%);
}
.hero::after {      /* faint technical grid, masked away from the headline */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center;
  -webkit-mask-image: radial-gradient(120% 100% at 82% 50%, #000 0%, transparent 66%);
          mask-image: radial-gradient(120% 100% at 82% 50%, #000 0%, transparent 66%);
  opacity: .55;
}
.hero-wrap {
  position: relative; z-index: 1;
  display: grid; gap: clamp(36px, 6vw, 64px); align-items: center;
}
@media (min-width: 980px) {
  .hero-wrap {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    column-gap: clamp(32px, 4vw, 64px);
  }
}
.hero-copy { min-width: 0; }
.hero-kicker { margin-bottom: clamp(22px, 3vw, 34px); }

.hero-h {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.04; letter-spacing: -.05em;
}
.hero-h .ln { display: block; }
/* padding/margin-bottom: leave room for descenders (g, p, y) so
   overflow:hidden doesn't clip them during the slide-up reveal. */
.hero-h .w { display: inline-block; overflow: hidden; vertical-align: top; padding-right: .14em; padding-bottom: .2em; margin-bottom: -.2em; }
.hero-h .w > i {
  display: inline-block; font-style: normal;
  transform: translateY(106%); opacity: 0;
  transition: transform .9s var(--ease), opacity .9s var(--ease);
}
.hero-h.is-in .w > i { transform: none; opacity: 1; }
.hero-h .w > i.accent { color: var(--accent); font-style: italic; }

.hero-sub {
  margin: clamp(26px, 3.5vw, 40px) 0 0;
  color: var(--ink2);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.45; max-width: 44ch;
}

/* ===== Hero graphic: Schwarz-Rot-Gold bars streaming into the B ===== */
.hero-art { position: relative; width: 100%; max-width: 560px; justify-self: center; }
@media (min-width: 980px) { .hero-art { justify-self: end; max-width: none; } }
@media (max-width: 980px) { .hero-art { margin-top: clamp(16px, 5vw, 36px); max-width: 460px; } }

.scroll-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(40px, 7vw, 84px);
  font-family: var(--fm); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink2);
}
.scroll-cue svg { width: 16px; height: 16px; animation: cueBob 2s var(--ease) infinite; }
@keyframes cueBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   STORY BEATS
   ============================================================ */
.beat, .close {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line);
  padding-block: clamp(96px, 16vh, 220px);
}
.ghost {
  position: absolute; top: clamp(20px, 4vw, 60px); right: clamp(-10px, 2vw, 40px);
  font-weight: 800; font-size: clamp(140px, 30vw, 420px); line-height: .8;
  letter-spacing: -.06em; color: color-mix(in srgb, var(--ink) 6%, transparent);
  z-index: 0; pointer-events: none; user-select: none;
}
.beat .wrap, .close .wrap { position: relative; z-index: 1; }

.beat-h {
  margin: clamp(22px, 3vw, 36px) 0 0;
  font-weight: 800; font-size: clamp(2rem, 6.5vw, 5.2rem);
  line-height: .98; letter-spacing: -.05em; max-width: 18ch;
}
.beat-sub {
  margin: clamp(24px, 3vw, 36px) 0 0; color: var(--ink2);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 56ch;
}

/* 01 — micro lines */
.micro {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid; gap: 0; max-width: 760px;
  border-top: 1px solid var(--line);
}
.micro li {
  font-weight: 600; font-size: clamp(1.3rem, 3.2vw, 2.2rem); letter-spacing: -.03em;
  color: var(--ink); padding: clamp(18px, 2.4vw, 30px) 0 clamp(18px, 2.4vw, 30px) 34px;
  border-bottom: 1px solid var(--line); position: relative;
}
.micro li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}

/* 02 — connecting chain */
.chain { margin-top: clamp(48px, 7vw, 96px); }
/* chain-body wraps only the rail + nodes so the absolute rail can't
   bleed into the chain-spine below it on mobile vertical layout. */
.chain-body { position: relative; }
.chain-rail {
  position: absolute; left: 0; right: 0; top: 9px; height: 2px;
  background: var(--line-strong); border-radius: 2px; overflow: hidden;
}
.chain-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.chain.is-drawn .chain-fill { width: 100%; transition: width 1.5s var(--ease); }
.chain-nodes { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); }
.chain-node { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-inline: 4px; }
.cn-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.chain.is-drawn .cn-dot { background: var(--accent); border-color: var(--accent); }
.chain.is-drawn .chain-node:nth-child(1) .cn-dot { transition-delay: .12s; }
.chain.is-drawn .chain-node:nth-child(2) .cn-dot { transition-delay: .42s; }
.chain.is-drawn .chain-node:nth-child(3) .cn-dot { transition-delay: .72s; }
.chain.is-drawn .chain-node:nth-child(4) .cn-dot { transition-delay: 1.02s; }
.chain.is-drawn .chain-node:nth-child(5) .cn-dot { transition-delay: 1.32s; }
.cn-l {
  font-family: var(--fm); font-size: clamp(.76rem, 1.1vw, .82rem);
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink2);
}
.chain-spine {
  margin: clamp(28px, 4vw, 48px) 0 0; text-align: center;
  font-family: var(--fm); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 10px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease) 1.5s, transform .5s var(--ease) 1.5s;
}
.chain.is-drawn .chain-spine { opacity: 1; transform: none; }
.chain-spine::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .chain-spine { opacity: 1; transform: none; transition: none; } }
@media (max-width: 620px) {
  /* vertical chain on phones */
  .chain-rail { left: 9px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .chain.is-drawn .chain-fill { width: 100%; height: 100%; }
  .chain-fill { width: 100%; height: 0; }
  .chain.is-drawn .chain-fill { height: 100%; transition: height 1.5s var(--ease); }
  .chain-nodes { grid-template-columns: 1fr; gap: 22px; padding-left: 0; }
  .chain-node { flex-direction: row; align-items: center; gap: 16px; text-align: left; padding-left: 0; }
  .cn-l { font-size: .82rem; }
}

/* 03 — module rows (okalpha big list) */
.mods { margin-top: clamp(48px, 7vw, 90px); border-top: 1px solid var(--line); }
.mod {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(20px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--line);
  position: relative;
}
.mod-n { font-family: var(--fm); font-size: .72rem; letter-spacing: .12em; color: var(--ink3); }
.mod-name {
  font-weight: 700; font-size: clamp(1.9rem, 5.4vw, 3.6rem); letter-spacing: -.045em; line-height: 1;
  color: var(--ink); transition: color .35s var(--ease);
}
.mod-d { font-size: clamp(.86rem, 1.1vw, 1rem); color: var(--ink2); text-align: right; max-width: 30ch; }
@media (hover: hover) and (pointer: fine) {
  .mod { transition: transform .45s var(--ease); }
  .mod:hover { transform: translateX(18px); }
  .mod:hover .mod-name { color: var(--accent); }
}
@media (max-width: 720px) {
  .mod { grid-template-columns: auto 1fr; row-gap: 8px; }
  .mod-d { grid-column: 1 / -1; text-align: left; max-width: none; }
}

.hw {
  margin: clamp(40px, 5vw, 64px) 0 0; max-width: 64ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--ink2);
}
.hw strong { color: var(--accent); font-weight: 600; font-style: italic; }

/* 04 — standards + marquee */
.std {
  margin-top: clamp(40px, 5vw, 72px);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.std li {
  font-family: var(--fm); font-size: clamp(.78rem, 1vw, .92rem); letter-spacing: .08em;
  color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 10px 18px; background: var(--bg-soft);
}
.std-note { margin-top: clamp(24px, 3vw, 36px); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }

.strip {
  margin-top: clamp(64px, 9vw, 130px);
  border-block: 1px solid var(--line); background: var(--bg-soft);
  padding-block: 24px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip-track {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); width: max-content;
  font-family: var(--fm); font-size: clamp(.9rem, 1.4vw, 1.1rem); letter-spacing: .04em; color: var(--ink2);
  animation: strip 48s linear infinite;
}
.strip-track:hover { animation-play-state: paused; }
.strip-track .sep { color: var(--accent); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ============================================================
   CLOSE / CONTACT
   ============================================================ */
.close { border-top: 1px solid var(--line); }
/* Two-column grid on desktop: promise copy left, form right */
.close-grid { display: grid; gap: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) {
  .close-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .close-right {
    border-left: 1px solid var(--line);
    padding-left: clamp(40px, 5vw, 72px);
  }
  /* Form fills the right column — remove its own spacing/borders */
  .close-right .demo {
    max-width: none; margin-top: 0;
    padding-top: 0; border-top: 0;
  }
}
.close .kicker { margin-bottom: clamp(26px, 4vw, 44px); }
.manifesto {
  margin: 0; font-weight: 800;
  font-size: clamp(2rem, 5.6vw, 4.8rem); line-height: 1.08; letter-spacing: -.045em;
  max-width: 20ch;
}
.fill { display: inline; }
.fill .fw { color: var(--ink3); transition: color .45s var(--ease); }
.fill .fw.is-filled { color: var(--ink); }
.fill .fw.accent { font-style: italic; color: color-mix(in srgb, var(--accent) 36%, var(--ink3)); }
.fill .fw.accent.is-filled { color: var(--accent); }
[data-lang="de"] .fill-en { display: none; }
[data-lang="en"] .fill-de { display: none; }

.close-cta { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.close-or { font-family: var(--fm); font-size: .82rem; letter-spacing: .02em; color: var(--ink3); margin: 0; }

/* demo form */
.demo {
  margin-top: clamp(44px, 6vw, 72px); max-width: 620px;
  display: grid; gap: 16px;
  padding-top: clamp(36px, 4vw, 52px); border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--hdr-h) + 24px);
}
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .demo-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--fm); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
}
.field input, .field textarea {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 15px; font-size: 1rem; transition: border-color .25s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 116px; resize: vertical; }
.field.is-invalid input, .field.is-invalid textarea,
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); }
.form-status { margin: 0; font-family: var(--fm); font-size: .72rem; letter-spacing: .04em; min-height: 1em; }
.form-status[data-kind="err"] { color: var(--err); }
.form-status[data-kind="ok"]  { color: var(--ok); }
.demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 4px; }
.demo-foot p {
  margin: 0; font-family: var(--fm); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3);
}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px); }
.ftr-inner {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: 1.4fr 1fr; align-items: start;
}
@media (max-width: 760px) { .ftr-inner { grid-template-columns: 1fr; } }
.ftr-logo { height: 30px; width: auto; mix-blend-mode: multiply; }
[data-theme="dark"] .ftr-logo { filter: invert(1); mix-blend-mode: screen; }
.ftr-brand p { color: var(--ink2); max-width: 40ch; font-size: .95rem; margin: 18px 0 0; }
.flag-rule { display: inline-flex; width: 60px; height: 4px; margin-top: 22px; border-radius: 2px; overflow: hidden; }
.flag-rule span { flex: 1; }
/* Hardcode the Schwarz band — never var(--ink) which becomes white in dark mode. */
.flag-rule span:nth-child(1) { background: #131318; }
[data-theme="dark"] .flag-rule span:nth-child(1) { background: #4a4a55; }
.flag-rule span:nth-child(2) { background: var(--accent); }
.flag-rule span:nth-child(3) { background: #F6C500; }
.ftr-meta { display: grid; gap: 28px; }
.ftr-direct { display: grid; gap: 8px; }
.ftr-direct a { font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; width: max-content; transition: color .25s var(--ease); }
.ftr-direct a:hover { color: var(--accent); }
.ftr-base {
  display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 24px; border-top: 1px solid var(--line);
}
.ftr-base, .ftr-base * {
  font-family: var(--fm); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3);
}
.ftr-base a { transition: color .25s var(--ease); }
.ftr-base a:hover { color: var(--ink); }

/* ============================================================
   REVEAL + MOTION
   ============================================================ */
[data-rv] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-rv].is-rv { opacity: 1; transform: none; }
[data-rv-delay="1"].is-rv { transition-delay: .08s; }
[data-rv-delay="2"].is-rv { transition-delay: .16s; }
[data-rv-delay="3"].is-rv { transition-delay: .24s; }
[data-rv-delay="4"].is-rv { transition-delay: .32s; }
[data-rv-delay="5"].is-rv { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv] { opacity: 1; transform: none; }
  .hero-h .w > i { transform: none; opacity: 1; }
  .chain-fill { width: 100% !important; }
  .fill .fw { color: var(--ink); }
  .fill .fw.accent { color: var(--accent); }
  .scroll-cue svg, .dot { animation: none; }
  .strip-track { animation: none; }
}

/* ============================================================
   HERO ANIMATION — Stacked Record
   Five translucent phase-panes fan out, then glide into perfect
   registration to become ONE shared record that reveals the B mark;
   the Schwarz-Rot-Gold spine aligns. Gated by prefers-reduced-motion.
   ============================================================ */
.hero-anims { position: relative; width: 100%; }
.hanim-stack { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 1/1; }
.hanim-stack .st-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1200px; perspective-origin: 50% 42%; }
.hanim-stack .st-deck { position: relative; width: 64%; aspect-ratio: 5/6; transform-style: preserve-3d; transform: rotateX(18deg) rotateZ(-2deg); }
.hanim-stack .st-pane {
  position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 70%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
  border: 1px solid var(--line); box-shadow: 0 10px 26px -16px rgba(0,0,0,.45);
  backdrop-filter: blur(.5px); transform-style: preserve-3d; will-change: transform, opacity;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1.2s cubic-bezier(.2,.8,.2,1), box-shadow 1.2s cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"] .hanim-stack .st-pane { box-shadow: 0 12px 30px -16px rgba(0,0,0,.7); border-color: var(--line-strong); }
.hanim-stack .st-pane-1 { transform: translate3d(-13%,-9%,-72px) rotateZ(-7deg) rotateX(5deg); opacity: .5; }
.hanim-stack .st-pane-2 { transform: translate3d(-6%,-4.5%,-36px) rotateZ(-3.5deg) rotateX(3deg); opacity: .62; }
.hanim-stack .st-pane-3 { transform: translate3d(0,0,0) rotateZ(0deg); opacity: .74; }
.hanim-stack .st-pane-4 { transform: translate3d(6%,4.5%,36px) rotateZ(3.5deg) rotateX(-3deg); opacity: .86; }
.hanim-stack .st-pane-5 { transform: translate3d(13%,9%,72px) rotateZ(7deg) rotateX(-5deg); opacity: 1; }
.hanim-stack:not(.st-set) .st-deck { animation: st-breathe 8s ease-in-out infinite; }
@keyframes st-breathe { 0%,100% { transform: rotateX(18deg) rotateZ(-2deg) translateY(0); } 50% { transform: rotateX(20deg) rotateZ(-2.6deg) translateY(-1.5%); } }
.hanim-stack.st-set .st-pane { transform: translate3d(0,0,0) rotateZ(0deg) rotateX(0deg); opacity: 1; }
.hanim-stack.st-set .st-pane:not(.st-pane-front) { opacity: 0; }
.hanim-stack.st-set .st-pane-front {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent));
  border-color: var(--line-strong); box-shadow: 0 22px 50px -22px rgba(0,0,0,.5);
}
.hanim-stack .st-tab {
  position: absolute; left: 8px; top: 14%; bottom: 14%; width: 5px; border-radius: 3px;
  background: linear-gradient(180deg, #111 0%, #111 33%, #C9101C 33%, #C9101C 66%, #F6C500 66%, #F6C500 100%);
  opacity: .55; transition: opacity 1.2s cubic-bezier(.2,.8,.2,1);
}
.hanim-stack.st-set .st-tab { opacity: 1; }
[data-theme="dark"] .hanim-stack .st-tab { background: linear-gradient(180deg, #2a2a2a 0%, #2a2a2a 33%, #C9554D 33%, #C9554D 66%, #F6C500 66%, #F6C500 100%); }
/* The record's LV table: an accent header row, three columns and ruled rows,
   proportioned so the cells read as a table (no stretched squares). Revealed
   via opacity — no scaling — so nothing distorts. */
.hanim-stack .st-grid {
  position: absolute; left: 18px; right: 14px; top: 21%; bottom: 13%;
  border: 1px solid var(--line); border-radius: 3px;
  opacity: .38; background-repeat: no-repeat;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 13%, transparent)),
    linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line)),
    linear-gradient(var(--line), var(--line)), linear-gradient(var(--line), var(--line));
  background-position: left top, 30% top, 68% top, left 19%, left 39%, left 59%, left 79%;
  background-size: 100% 19%, 1px 100%, 1px 100%, 100% 1px, 100% 1px, 100% 1px, 100% 1px;
  transition: opacity .7s ease, border-color .6s ease;
}
.hanim-stack.st-set .st-grid { opacity: .92; border-color: var(--line-strong); }
.hanim-stack .st-bwrap {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0;
  transform: translateZ(2px) scale(.92);
  transition: opacity .7s ease .25s, transform .9s cubic-bezier(.2,.8,.2,1) .25s; pointer-events: none;
}
.hanim-stack.st-set .st-bwrap { opacity: 1; transform: translateZ(2px) scale(1); }
.hanim-stack .st-bmark { width: 46%; height: auto; max-width: 180px; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.hanim-stack .st-bmark-d { display: none; }
[data-theme="dark"] .hanim-stack .st-bmark-l { display: none; }
[data-theme="dark"] .hanim-stack .st-bmark-d { display: inline; }
.hanim-stack .st-sweep { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; opacity: 0; pointer-events: none; }
.hanim-stack .st-sweep::before { content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 35%; transform: skewX(-18deg) translateX(0); background: linear-gradient(90deg, transparent, color-mix(in srgb, #F6C500 65%, transparent), transparent); }
.hanim-stack.st-sweepon .st-sweep { opacity: 1; }
.hanim-stack.st-sweepon .st-sweep::before { animation: st-sweep 1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes st-sweep { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(420%); } }
@media (prefers-reduced-motion: reduce) {
  .hanim-stack:not(.st-set) .st-deck { animation: none; }
  .hanim-stack .st-deck { transform: rotateX(14deg) rotateZ(-2deg); }
  .hanim-stack .st-pane { transform: translate3d(0,0,0) rotateZ(0deg) rotateX(0deg); transition: none; opacity: 0; }
  .hanim-stack .st-pane-front { opacity: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 96%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)); border-color: var(--line-strong); box-shadow: 0 22px 50px -22px rgba(0,0,0,.5); }
  .hanim-stack .st-tab { opacity: 1; transition: none; }
  .hanim-stack .st-grid { transition: none; opacity: .92; border-color: var(--line-strong); }
  .hanim-stack .st-bwrap { opacity: 1; transform: translateZ(2px) scale(1); transition: none; }
  .hanim-stack .st-sweep { display: none; }
}
@media (max-width: 600px) { .hanim-stack .st-deck { width: 72%; } }