/* ══════════════════════════════════════════════════════════════════════════
   traqx — globales Stylesheet (SEO-013, extrahiert 2026-06-11).
   Quelle der Wahrheit: src/site.css → build.py schreibt assets/site.css und
   versioniert den <link> in base.html.j2 per Inhalts-Hash (?v=). Vorher lebte
   dieser Block inline in base.html.j2 (~245 KB pro Seite, unkacheable — HTML
   ist no-cache, /assets/* cached Kinsta 1 Jahr). verify_visual.py prüft diese
   Datei wie zuvor den Inline-Block (11px-Floor + WCAG-AA).
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Self-hosted Fonts (2026-06-11): vorher blocking fonts.googleapis.com-CSS.
   Dateien: assets/fonts/*.woff2 (latin + latin-ext Subsets, unicode-range —
   Browser laedt nur benoetigte). Neue Gewichte: Liste in base.html.j2-Kommentar
   + tools-Abruf der css2-URL wiederholen. font-display:swap wie zuvor. ── */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-tight-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/inter-tight-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-tight-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-tight-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-tight-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-tight-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/jetbrains-mono-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/jetbrains-mono-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --bg: #050810;
  --bg-2: #0A0F1C;
  --bg-3: #111729;
  --rule: #2A3147;
  --rule-soft: #1A2033;
  --rule-strong: #3B4361;

  --ink: #F2F4F8;
  --ink-2: #C8CDD8;
  --ink-3: #8B92A4;
  --ink-4: #5A6178;
  --ink-5: #3A4055;

  /* ── Cool Silver Variant C · electric blue → pearl silver → cyan (no green) ──
     Brand refresh May 2026: Variant C keeps the energetic blue/cyan data-flow,
     but restores the visible pearl-silver midpoint for brand moments. Legacy
     token NAMES are kept as aliases while production code is migrated toward
     semantic brand/data-flow tokens. */
  --electric:    #1252F5;   /* brand primary — anchor, CTA, logo brackets + T */
  --royal:       #4090FA;   /* shine peak / second accent (replaces legacy green) */
  --sky:         #5BA3E0;
  --pearl:       #C9D6E8;   /* pearl silver — gradient middle */
  --cyan:        #7CD0E8;   /* brand accent — bright cyan, legible on dark */
  --luminous:    #B0E5F0;
  --tip:         #EAF1FB;   /* near-white gradient tip */
  --silver:      var(--pearl);

  --cyan-deep:   #4090FA;   /* legacy alias: deeper flow blue → royal */
  --blue-accent:        #4090FA;   /* remapped to royal blue (formerly green) */
  --blue-accent-deep:   #1252F5;   /* remapped → electric blue */
  --gold:        #C9D6E8;   /* remapped → pearl silver (was gold) */
  --warn:        oklch(0.66 0.05 250);  /* cool slate — calm friction, no red/orange */

  --accent: var(--cyan);
  --accent2: var(--royal);
  --accent-soft: color-mix(in oklab, var(--cyan) 18%, transparent);
  --accent2-soft: color-mix(in oklab, var(--royal) 18%, transparent);

  /* Variant C split:
     - brand fill: richer blue→silver→cyan shimmer for dark hero words,
       logo highlights and high-value dots.
     - light fill: no pearl/near-white stops; blue→cyan only for paper/ink tiers.
     - CTA fill dark: visibly Cool Silver, but without near-white edge stops.
     - CTA fill light: stricter blue→cyan, no pearl/silver on white sections.
     - data flow: tighter cyan→royal gradient for SVG paths, particles and
       technical diagrams. */
  --brand-fill: linear-gradient(135deg, #1252F5 0%, #4090FA 14%, #5BA3E0 32%, #C9D6E8 55%, #7CD0E8 78%, #B0E5F0 92%, #EAF1FB 100%);
  --brand-fill-rev: linear-gradient(135deg, #EAF1FB 0%, #B0E5F0 12%, #7CD0E8 30%, #C9D6E8 52%, #5BA3E0 72%, #4090FA 88%, #1252F5 100%);
  --brand-fill-light: linear-gradient(120deg, var(--electric) 0%, var(--royal) 48%, var(--flow-from) 100%);
  --brand-fill-light-rev: linear-gradient(120deg, var(--flow-from) 0%, var(--royal) 52%, var(--electric) 100%);
  --cta-fill-dark: linear-gradient(108deg, #1252F5 0%, #4090FA 24%, #7FAFE6 45%, #C9D6E8 62%, #7CD0E8 82%, #B0E5F0 100%);
  --cta-fill-light: linear-gradient(105deg, #1252F5 0%, #2F7DF9 48%, #5BA3E0 74%, #7CD0E8 100%);
  --cta-fill: var(--cta-fill-dark);
  --cta-border: color-mix(in oklab, var(--electric) 72%, var(--flow-from) 28%);
  --cta-glow: color-mix(in oklab, var(--luminous) 20%, transparent);
  --grad-by: var(--brand-fill);
  --grad-by-rev: var(--brand-fill-rev);
  --logo-primary: #1252F5;
  --logo-accent:  #7CD0E8;

  --display: "Inter Tight", system-ui, sans-serif;
  --text: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --page-max: 1320px;
  --page-pad: 56px;

  /* ════════════════════════════════════════════════════════════════════════
     THREE-TIER THEME CONTRACT  (Visual-Konzept §1/§2/§13/§14 — Welle 1)
     :root holds the DARK tier (default, on <html data-theme="dark">).
     [data-theme="paper"] / [data-theme="ink"] below switch the COMPLETE set,
     so a designer CANNOT put cyan body-text on dark or a dark panel-body.
     ════════════════════════════════════════════════════════════════════════ */

  /* ── Data-flow token: strict 2-stop cyan→royal, directional. The ONE
     technical flow accent. NOT the brand shimmer --grad-by. ── */
  --flow-from: #7CD0E8;                 /* cyan (shared across tiers) */
  --flow-to:   #4090FA;                 /* royal blue — DARK tier */
  --flow:    linear-gradient(90deg, var(--flow-from) 0%, var(--flow-to) 100%);
  --flow-v:  linear-gradient(180deg, var(--flow-from) 0%, var(--flow-to) 100%);

  /* ── Effective minimum visual font (P1 floor) — DOM/SVG text only, never canvas ── */
  --visual-min-font: 11px;

  /* ── Motion tokens (§7) — only transform/opacity animate; no bounce/spring ── */
  --dur-reveal: 600ms;
  --ease-reveal: cubic-bezier(.22, 1, .36, 1);

  /* ── Light-tier raw palette (Cool Silver — §2/§13/§14). Consumed by paper/ink.
     Cool-tinted, never pure white (the "silver" lives in the surface tone). ── */
  --paper-base:     #F2F4F8;            /* cool page base */
  --paper-100:      #EDF1F8;            /* paper reading surface */
  --paper-50:       #FAFBFD;            /* ink-card surface (~16:1) */
  --ink-900:        #0A0F1C;            /* deep ink — text/structure */
  --ink-700:        #2A3142;            /* secondary ink — roadmap labels MUST stay legible */
  --ink-500:        #5B6577;            /* tertiary ink */
  --hairline-light: #C8D0DE;            /* silver hairline (§14 — reads on paper) */
  --hairline-soft:  #DCE2EC;            /* softer light hairline */
  --flow-ink-to:    #1252F5;            /* blue end on LIGHT (deeper — cyan washes out on white) */
  --elev-1: 0 1px 2px rgba(10,15,28,.06), 0 8px 24px rgba(10,15,28,.04);  /* soft elevation, not glow */
  --elev-2: 0 1px 2px rgba(10,15,28,.08), 0 18px 48px rgba(10,15,28,.10);
}

/* ── PAPER tier — long-form reading on cool silver ── */
[data-theme="paper"] {
  --bg:          var(--paper-100);
  --bg-2:        var(--paper-50);
  --bg-3:        #E4EAF3;
  --ink:         var(--ink-900);
  --ink-2:       var(--ink-700);
  --ink-3:       var(--ink-500);
  --ink-4:       #7E8798;
  --ink-5:       #AEB6C4;
  --rule:        var(--hairline-light);
  --rule-soft:   var(--hairline-soft);
  --rule-strong: #B4BECE;
  --flow-to:     var(--flow-ink-to);    /* blue-weighted ink-flow on light */
  --flow:        linear-gradient(90deg, var(--flow-from) 0%, var(--flow-to) 100%);
  --grad-by:     var(--brand-fill-light);
  --grad-by-rev: var(--brand-fill-light-rev);
  --cta-fill:    var(--cta-fill-light);
  --cta-border:  color-mix(in oklab, var(--electric) 26%, var(--hairline-light));
  --cta-glow:    color-mix(in oklab, var(--electric) 12%, transparent);
}

/* ── INK-on-light tier — regulated proof (the 5 mechanisms, ledger, matrices) ── */
[data-theme="ink"] {
  --bg:          var(--paper-50);       /* #FAFBFD card-like base */
  --bg-2:        #FFFFFF;
  --bg-3:        var(--paper-100);
  --ink:         var(--ink-900);
  --ink-2:       var(--ink-700);
  --ink-3:       var(--ink-500);
  --ink-4:       #7E8798;
  --ink-5:       #AEB6C4;
  --rule:        var(--hairline-light);
  --rule-soft:   var(--hairline-soft);
  --rule-strong: #B4BECE;
  --flow-to:     var(--flow-ink-to);
  --flow:        linear-gradient(90deg, var(--flow-from) 0%, var(--flow-to) 100%);
  --grad-by:     var(--brand-fill-light);
  --grad-by-rev: var(--brand-fill-light-rev);
  --cta-fill:    var(--cta-fill-light);
  --cta-border:  color-mix(in oklab, var(--electric) 26%, var(--hairline-light));
  --cta-glow:    color-mix(in oklab, var(--electric) 12%, transparent);
}

/* Any element flipped to a light tier paints its own surface (the dark page
   bg lives on <body>; light tiers must opt in). Dark tier is unaffected. */
[data-theme="paper"], [data-theme="ink"] {
  background: var(--bg);
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  background-image:
    radial-gradient(1000px 620px at 18% 4%, color-mix(in oklab, var(--pearl) 16%, transparent), transparent 62%),
    radial-gradient(1100px 700px at 18% 8%, color-mix(in oklab, var(--cyan) 11%, transparent), transparent 60%),
    radial-gradient(1000px 700px at 84% 18%, color-mix(in oklab, var(--royal) 11%, transparent), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, color-mix(in oklab, var(--cyan) 6%, transparent), transparent 70%);
  background-attachment: fixed;
}
::selection { background: var(--accent); color: var(--bg); }

body::before {
  content: ""; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ───── AI Data Flow (decorative streams + traveling particles) ───── */
.ai-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.ai-flow .stream {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.45;
}
.ai-flow .stream.thick { stroke-width: 1.5; opacity: 0.55; }
.ai-flow .stream.thin { stroke-width: 0.6; opacity: 0.3; }
.ai-flow .glow {
  fill: none;
  stroke-width: 6;
  filter: blur(10px);
  opacity: 0.35;
}
.ai-flow .particle {
  fill: var(--cyan);
  filter: drop-shadow(0 0 4px var(--cyan)) drop-shadow(0 0 10px var(--cyan));
}
.ai-flow .particle.blue {
  fill: var(--flow-to);
  filter: drop-shadow(0 0 4px var(--flow-to)) drop-shadow(0 0 10px var(--flow-to));
}
.ai-flow .particle.travel {
  animation: flow-travel 6s linear infinite;
}
.ai-flow .particle.travel.d1 { animation-duration: 7s; animation-delay: -1s; }
.ai-flow .particle.travel.d2 { animation-duration: 5s; animation-delay: -2.5s; }
.ai-flow .particle.travel.d3 { animation-duration: 9s; animation-delay: -4s; }
.ai-flow .particle.travel.d4 { animation-duration: 6.5s; animation-delay: -0.5s; }
.ai-flow .particle.travel.d5 { animation-duration: 8s; animation-delay: -3s; }

@keyframes flow-travel {
  from { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

.ai-flow-host { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ai-flow-host.masked .ai-flow {
  -webkit-mask-image: radial-gradient(circle at 50% 55%, transparent 150px, black 300px);
  mask-image: radial-gradient(circle at 50% 55%, transparent 150px, black 300px);
}
@media (max-width: 760px) {
  .ai-flow-host {
    display: none;
  }
}

/* Section flow band */
.flow-band {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
section > .section-shell, section > .hero { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .ai-flow .particle.travel { animation: none; opacity: 0; }
}

/* ───── Top nav ───── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 14px var(--page-pad);
  display: flex; align-items: center; gap: 28px;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.brand-lockup .mark { width: 28px; height: 28px; }
.brand-lockup .wm {
  font-family: var(--display); font-size: 20px; font-weight: 500;
  letter-spacing: -0.04em; color: var(--ink); text-transform: lowercase;
}
.topbar nav { margin-left: 24px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.topbar nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 8px 12px; border-radius: 100px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .2s, background .2s, border-color .2s;
  border: 1px solid transparent;
}
.topbar nav a:hover { color: var(--ink); background: var(--bg-3); border-color: var(--rule); }
.topbar .actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.lang-switch {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); padding: 9px 12px;
  border: 1px solid var(--rule); border-radius: 100px;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.lang-switch:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--bg-3); }
.btn {
  font-family: var(--display); font-weight: 500; font-size: 13px;
  letter-spacing: -0.005em;
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--rule);
  background: transparent; color: var(--ink);
  transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
}
.btn:hover { border-color: var(--rule-strong); transform: translateY(-1px); }
.btn.primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border-color: var(--cta-border); color: var(--bg);
  font-weight: 600;
  box-shadow: none;
}
.btn.primary::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--cta-fill);
  z-index: -1;
}
.btn.primary .arrow {
  position: relative;
  z-index: 1;
}
.btn.primary:hover {
  box-shadow:
    0 8px 28px var(--cta-glow);
}
.btn[disabled],
.btn.is-disabled {
  opacity: .58;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(.7);
  box-shadow: none;
}
.btn[disabled]:hover,
.btn.is-disabled:hover { transform: none; box-shadow: none; }
.btn .arrow { font-family: var(--mono); }

/* ───── Page sections ───── */
section { position: relative; z-index: 1; }
.section-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px var(--page-pad);
}
.section-shell.tight { padding-top: 56px; padding-bottom: 56px; }
.section-shell.compact { padding-top: 64px; padding-bottom: 64px; }
section + section .section-shell { border-top: 1px solid var(--rule-soft); }

/* Pill / chip */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  background: color-mix(in oklab, var(--bg-2) 80%, transparent);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 12px var(--accent); }
.pill.alt .dot { background: var(--accent2); box-shadow: 0 0 0 3px var(--accent2-soft), 0 0 12px var(--accent2); }
.pill.gold .dot { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 22%, transparent), 0 0 12px var(--gold); }
.pill.warn .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 22%, transparent), 0 0 12px var(--warn); }

h1.display, h2.display {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(48px, 6.5vw, 96px);
  letter-spacing: -0.04em; line-height: 0.95;
  margin: 24px 0 24px;
  text-transform: lowercase;
}
h2.section-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.035em; line-height: 0.98;
  margin: 24px 0 24px; max-width: 22ch;
}
.gradient-text {
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-text.rev { background: var(--grad-by-rev); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
  display: inline-block;
}
.kicker .gradient-text { letter-spacing: 0.32em; }
.lead {
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
  max-width: 60ch; margin: 0;
}
.section-kicker {
  font-size: 17px; line-height: 1.55; color: var(--ink-3);
  max-width: 60ch; margin: 0;
}
.lbl {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
}

/* ───── Hero ───── */
.hero {
  padding: 28px var(--page-pad) 32px;
  position: relative; overflow: hidden;
  max-width: var(--page-max); margin: 0 auto;
}
.hero-center-wrap {
  position: relative;
  padding: 12px 0 18px;
}
.hero-center {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero-flow-host {
  position: absolute; inset: -24px;
  pointer-events: none; z-index: 0;
}

/* Benefits row — placed BELOW the headline (per design feedback). */
.hero-benefits {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin: 28px 0 8px;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule-soft);
  position: relative; z-index: 2;
}
.hero-side { display: flex; flex-direction: column; gap: 10px; position: relative; }
.hero-side .head {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.hero-side .head .dot { width: 8px; height: 8px; border-radius: 50%; }
.hero-side.cy .head .dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.hero-side.lm .head .dot { background: var(--blue-accent); box-shadow: 0 0 10px var(--blue-accent); }
.hero-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule-soft);
  border-radius: 100px;
  font-size: 13.5px; color: var(--ink); font-weight: 400;
  transition: border-color .25s, transform .25s, background .25s;
}
.hero-side.cy .hero-row:hover { border-color: color-mix(in oklab, var(--cyan) 60%, transparent); transform: translateY(-1px); background: color-mix(in oklab, var(--cyan) 6%, var(--bg-2)); }
.hero-side.lm .hero-row:hover { border-color: color-mix(in oklab, var(--blue-accent) 60%, transparent); transform: translateY(-1px); background: color-mix(in oklab, var(--blue-accent) 6%, var(--bg-2)); }
.hero-row .ico {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
}
.hero-side.cy .hero-row .ico { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); }
.hero-side.lm .hero-row .ico { color: var(--blue-accent); border-color: color-mix(in oklab, var(--blue-accent) 50%, var(--rule)); }
/* Pulse keyframe kept in case other elements use it later. */
@keyframes pulse { 0%,100%{opacity:.7;transform:scale(1);} 50%{opacity:1;transform:scale(1.06);} }

.hero-h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  letter-spacing: -0.035em; line-height: 1.0;
  position: relative; z-index: 2;
  max-width: 22ch;
  margin: 0;
}
.hero-h1 em { font-style: normal; }
.hero-tagline {
  margin-top: 22px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(15px, 1.4vw, 19px);
  color: var(--ink-2); letter-spacing: -0.005em;
  text-align: center; max-width: 56ch;
  position: relative; z-index: 2;
  line-height: 1.55;
}
.hero-tagline b { color: var(--ink); font-weight: 500; }
.hero-antithesis {
  margin: 16px auto 0; max-width: 46ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 24px); letter-spacing: -0.015em;
  line-height: 1.35; color: var(--ink-2);
  text-align: center; position: relative; z-index: 2;
}
.hero-antithesis b { color: var(--ink); font-weight: 600; }
.hero-cta {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px; position: relative; z-index: 2;
}
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 14px 0 6px; border-top: 1px solid var(--rule-soft);
  margin-top: 14px;
}
.hero-stat {
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  padding: 10px 14px;
}
.hero-stat .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 3px; }
.hero-stat .v { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }

/* ───── Connector logos band ───── */
.connectors {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 10px 0 0;
  margin-top: 0;
  opacity: 0.85;
}
.connectors .lbl { flex-shrink: 0; font-size: 11px; }
.connectors .row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.connectors .conn {
  font-family: var(--display); font-weight: 500; font-size: 13px;
  letter-spacing: -0.01em; color: var(--ink-3);
  padding: 4px 10px; border-radius: 6px;
  transition: color .2s, background .2s;
}
.connectors .conn:hover { color: var(--ink); background: var(--bg-3); }

/* ───── Hero redesign — asymmetric split + product proof card ───── */
.hero.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 56px; align-items: center;
  padding-top: 44px; padding-bottom: 52px;
}
/* Use-case spokes: give the dense evidence graphic more render width (legibility) — DESKTOP only. */
@media (min-width: 981px) {
  .hero.hero-split:has(.hero-visual--journey) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; }
}
.hero-split .hero-flow-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; text-align: left; }
.hero-eyebrow { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.hero-audience-line {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px;
}
.hero-offer-name {
  font-family: var(--display); font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.42; font-weight: 500; color: var(--ink-2);
  max-width: 46ch; margin: -8px 0 18px;
}
.hero-pain {
  margin: 0 0 18px; max-width: 46ch; padding-left: 14px;
  border-left: 2px solid var(--warn);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(14.5px, 1.55vw, 16.5px); line-height: 1.42; color: var(--ink-2);
}
.hero-pain b { color: #fff; font-weight: 600; }
.hero-copy .hero-h1 {
  text-align: left; max-width: none; margin: 0 0 20px;
  font-size: clamp(34px, 3.4vw, 52px); line-height: 1.05;
}
.hero-lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.42;
  color: var(--ink); letter-spacing: -0.01em;
  max-width: 44ch; margin: 0 0 14px;
}
.hero-sub {
  font-size: 15px; line-height: 1.6; color: var(--ink-3);
  max-width: 52ch; margin: 0 0 22px;
}
.hero-sub b { color: var(--ink-2); font-weight: 500; }
.hero-micro { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: -6px 0 26px; max-width: 48ch; }
.hero-micro b { color: var(--ink-2); font-weight: 500; }
/* Standards/regulatory microcopy under the subline (use-case spokes) — one sparse line,
   sits tight under the sub and above the value-bullets. */
.hero-standards { margin: -12px 0 22px; }
/* Hero value-bullets — scannable Value-Equation beats in the header (replaces the dense
   second paragraph). Cyan→blue check matches the modal risk-reversal + proof-strip. */
.hero-bullets { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 54ch; }
.hero-bullets li { position: relative; padding-left: 27px; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.hero-bullets li b { color: var(--ink-2); font-weight: 600; }
.hero-bullets li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--grad-by); }
.hero-bullets li::after { content: ""; position: absolute; left: 5px; top: 6.5px; width: 6px; height: 3.5px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.hero-copy .hero-cta { justify-content: flex-start; margin: 0; flex-wrap: wrap; }
.hero-antithesis-cap {
  font-size: 13px; color: var(--ink-4); font-style: italic;
  margin: 16px 0 0; max-width: 48ch;
}
.hero-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.hero-foot .kicker { margin: 0; }

.fit-strip {
  position: relative;
  z-index: 3;
  max-width: var(--page-max);
  margin: -26px auto 0;
  padding: 0 var(--page-pad) 22px;
}
.fit-strip__inner {
  display: grid;
  grid-template-columns: minmax(160px, .82fr) minmax(320px, 1.65fr) minmax(220px, .98fr);
  gap: 18px;
  align-items: center;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--bg-2) 92%, transparent), color-mix(in oklab, var(--bg) 88%, transparent)),
    color-mix(in oklab, var(--bg-2) 88%, transparent);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.fit-strip__micro,
.fit-strip__heading,
.fit-strip__context {
  margin: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.35;
}
.fit-strip__micro {
  color: var(--ink-4);
}
.fit-strip__heading {
  color: var(--ink-2);
  font-weight: 600;
  margin-bottom: 7px;
}
.fit-strip__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fit-strip__labels span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid color-mix(in oklab, var(--cyan) 24%, var(--rule-soft));
  border-radius: 6px;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--cyan) 6%, transparent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
}
.fit-strip__context {
  color: var(--ink-4);
}

/* Product proof card (echoes the cockpit) */
.hero-visual { position: relative; z-index: 2; }
.proof-card {
  border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  background: #050810;
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--cyan) 14%, transparent);
}
.proof-card .pc-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); background: var(--bg-2);
}
.pc-dots { display: flex; gap: 6px; }
.pc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); display: block; }
.pc-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; color: var(--ink-3); }
.pc-title b { color: var(--ink); font-weight: 500; }
.pc-status {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cyan);
}
.pc-status .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 30%, transparent), 0 0 12px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.pc-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.proof-line { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: start; }
.proof-line .tick {
  width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--cyan); font-size: 11px;
  border: 1px solid color-mix(in oklab, var(--cyan) 45%, var(--rule));
  background: color-mix(in oklab, var(--cyan) 10%, transparent);
}
.proof-line .ptext { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.proof-line .cite {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.01em;
  color: var(--cyan); white-space: nowrap;
  border: 1px solid color-mix(in oklab, var(--cyan) 30%, var(--rule));
  border-radius: 100px; padding: 1px 8px; margin-left: 6px;
  background: color-mix(in oklab, var(--cyan) 8%, transparent);
}
.pc-foot {
  border-top: 1px solid var(--rule-soft); padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-2);
}
.pc-sign { display: flex; flex-direction: column; gap: 2px; }
.pc-sign .lab { font-family: var(--mono); font-size: var(--visual-min-font); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-4); }
.pc-sign .nm { font-family: var(--display); font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.pc-stamp {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--bg); background: var(--grad-by); font-weight: 600;
  padding: 6px 12px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ───── Hero slider (auto-rotating product mockups) ───── */
.hero-slider { position: relative; }
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99); transition: opacity .55s ease, transform .55s ease; pointer-events: none; cursor: pointer; }
.hero-slide.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hero-dot { width: 8px; height: 8px; border-radius: 100px; border: 0; padding: 0; cursor: pointer; background: var(--rule-strong); transition: width .3s, background .3s; }
.hero-dot.is-active { width: 22px; background: var(--cyan); box-shadow: 0 0 10px color-mix(in oklab, var(--cyan) 55%, transparent); }
.hero-dot:hover { background: var(--ink-3); }

/* Mockup · review & accept (diff) */
.diff-row { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.diff-tag { font-family: var(--mono); font-size: var(--visual-min-font); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; white-space: nowrap; margin-top: 1px; }
.diff-tag.add { color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 35%, var(--rule)); background: color-mix(in oklab, var(--cyan) 9%, transparent); }
.diff-tag.mod { color: var(--ink-3); border: 1px solid var(--rule); background: color-mix(in oklab, var(--bg-3) 55%, transparent); }
.pc-changes { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.pc-actions { display: inline-flex; gap: 8px; }
.pc-btn { font-family: var(--display); font-weight: 600; font-size: 11.5px; padding: 6px 13px; border-radius: 100px; display: inline-flex; align-items: center; gap: 5px; }
.pc-btn.accept { color: var(--bg); background: var(--grad-by); }
.pc-btn.reject { color: var(--ink-3); border: 1px solid var(--rule); }

/* Mockup · sources verified (deterministic) */
.ans-snippet { border-left: 2px solid color-mix(in oklab, var(--cyan) 50%, var(--rule)); padding-left: 14px; }
.ans-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4); display: block; margin-bottom: 6px; }
.ans-snippet p { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.ans-snippet p b { color: var(--ink); font-weight: 500; }
.verify-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; padding: 12px 14px; border: 1px dashed color-mix(in oklab, var(--cyan) 28%, var(--rule)); border-radius: 10px; background: color-mix(in oklab, var(--cyan) 5%, transparent); }
.verify-note b { color: var(--cyan); font-weight: 600; }
.pc-sources { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.pc-sources b { color: var(--cyan); }

/* lean-hero additions (To-Be v2.3 — one CTA, proof-strip) */
.hero-audience-line { display: inline-flex; align-items: center; gap: 9px; }
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 22%, transparent), 0 0 12px var(--cyan); flex-shrink: 0; }
.hero-copy .hero-h1 { font-size: clamp(34px, 2.95vw, 50px); line-height: 1.06; margin-bottom: 20px; }
.hero-cta-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 0 26px; }
.btn.primary.lg { padding: 14px 26px; font-size: 14.5px; }
.text-link { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 6px; transition: color .2s, gap .2s; }
.text-link .arrow { font-family: var(--mono); color: var(--cyan); }
.text-link:hover { color: var(--ink); gap: 9px; }
/* Mobile touch-target floor (≥44px primary CTAs, ≥40px footer nav) — added 2026-06-07 per mobile-upgrade-brief P0-2. */
@media (max-width: 760px) {
  .foot-col a, .foot-bottom a, .foot-legal a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* Blog-illustration label legibility — added 2026-06-07 per mobile-upgrade-brief P0-1.
   The 800×320 diagrams are reused as small card thumbnails (home teaser + /blog/ index,
   ~290–325px → internal labels ≈3–4px on EVERY device) and as the large single-article
   hero. On a thumbnail the labels can't be made legible without breaking the diagram —
   and don't need to be: the HTML badge + caption carry the message. So show the graphic
   as clean iconographic texture in cards (and on phone-width article heroes), and keep
   the full detailed diagram labels only on the large desktop article hero. */
.bl-card .bl-hero text { display: none; }
@media (max-width: 560px) { .art-hero .bl-hero text { display: none; } }
/* ───────── Modern mobile: sticky-stacking card sections — added 2026-06-07 per mobile-upgrade-brief #1.
   Add class "stack-cards" to a 1-column card grid; its children pin under the header and the next
   card slides over the previous one (Apple/Stripe-style scroll choreography). Depth (the covered card
   scales down + dims) is driven by JS below. Desktop layout is untouched. */
@media (max-width: 760px) {
  .stack-cards { display: block !important; }
  .stack-cards > * {
    position: sticky !important;
    top: 88px !important;
    min-height: 38vh;
    margin: 0 0 22px !important;
    border-radius: 22px;
    box-shadow: 0 -14px 38px rgba(5,8,16,.38), 0 26px 64px rgba(5,8,16,.55);
    will-change: transform, filter;
    backface-visibility: hidden;
  }
  .stack-cards > *:nth-child(2) { top: 100px !important; }
  .stack-cards > *:nth-child(3) { top: 112px !important; }
  .stack-cards > *:nth-child(4) { top: 124px !important; }
  .stack-cards > *:nth-child(5) { top: 136px !important; }
  .stack-cards > *:last-child { margin-bottom: 6px !important; }
}
/* ───────── Modern mobile: horizontal swipe-slider — added 2026-06-07 per mobile-upgrade-brief #F.
   Add class "swipe-row" to a card grid; on phones it becomes an edge-to-edge horizontal
   scroll-snap rail (next card peeks → clear swipe affordance). Dots are added by JS below. */
@media (max-width: 760px) {
  .swipe-row {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 26px calc(var(--page-pad) * -1) 0;
    padding: 6px var(--page-pad) 10px;
    scroll-padding-left: var(--page-pad);
  }
  .swipe-row::-webkit-scrollbar { display: none; }
  .swipe-row > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-height: auto;
    border-radius: 20px;
  }
  .swipe-dots {
    display: flex; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none;
  }
  .swipe-dots button {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; cursor: pointer; position: relative;
  }
  .swipe-dots button::before {
    content: ""; position: absolute; inset: 50% auto auto 50%;
    width: 8px; height: 8px; transform: translate(-50%,-50%);
    border-radius: 50%; background: var(--rule-strong, #2A3550);
    transition: width .28s var(--ease-reveal), background .28s;
  }
  .swipe-dots button[aria-current="true"]::before { width: 18px; border-radius: 4px; background: var(--cyan); }
}
@media (min-width: 761px) { .swipe-dots { display: none; } }
.hero-proof-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.hero-proof-strip span { display: inline-flex; align-items: center; }
.hero-proof-strip span:not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--ink-5); }
.hero-proof-strip span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); margin-right: 7px; opacity: .85; }

/* Trust-Pillars — drei sichtbare Job-to-be-done-Zusagen im Hero (Trust-Seite).
   Ruhige horizontale Row, cyan-Check, restrained: kein Card-Chrome, nur eine
   trennende Hairline oben. Reuse der Brand-Tokens (--cyan / --grad-by / --rule). */
.trust-pillars {
  list-style: none; margin: 0 0 22px; padding: 18px 0 0;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: 12px 28px; max-width: 56ch;
}
.trust-pillars li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-2); font-weight: 500;
}
.trust-pillars .tp-check {
  position: relative; flex-shrink: 0;
  width: 17px; height: 17px; border-radius: 50%; background: var(--grad-by);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 14%, transparent);
}
.trust-pillars .tp-check::after {
  content: ""; position: absolute; left: 5px; top: 5.5px;
  width: 6px; height: 3.5px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}
/* Founder-Credential im Hero — mono, zurückgenommen, sitzt unter den Pillars. */
.hero-founder {
  margin: 0 0 24px; max-width: 52ch;
  font-family: var(--mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.04em; color: var(--ink-4);
}

/* topbar category tagline */
.brand-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--rule); white-space: nowrap; align-self: center; }
@media (max-width: 1180px) { .brand-tag { display: none; } }

@media (max-width: 980px) {
  .hero.hero-split { grid-template-columns: 1fr; gap: 30px; padding-top: 28px; }
  .hero-copy { text-align: center; }
  .hero-copy .hero-h1, .hero-sub, .hero-micro, .hero-pain, .hero-offer-name, .hero-founder { margin-left: auto; margin-right: auto; }
  .hero-pain { border-left: 0; padding-left: 0; max-width: 52ch; }
  .hero-audience-line, .hero-cta-wrap, .hero-proof-strip, .trust-pillars { justify-content: center; }
  .trust-pillars { margin-left: auto; margin-right: auto; }
  .hero-founder { text-align: center; }
  .hero-visual { max-width: 540px; margin: 0 auto; width: 100%; }
  .fit-strip { margin-top: -18px; padding-bottom: 18px; }
  .fit-strip__inner {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
  }
  .fit-strip__labels { justify-content: center; }
}
@media (max-width: 560px) {
  .hero-copy .hero-h1 { font-size: clamp(31px, 9.4vw, 38px); line-height: 1.08; }
  .fit-strip { margin-top: -12px; padding-bottom: 14px; }
  .fit-strip__inner { padding: 12px; border-radius: 9px; }
  .fit-strip__micro,
  .fit-strip__heading,
  .fit-strip__context { font-size: 12px; }
  .fit-strip__labels span { font-size: 11px; min-height: 23px; }
}
@media (max-width: 760px) {
  .hero.hero-split {
    gap: 24px;
    padding-top: 24px;
  }
  .hero-split > .hero-copy,
  .hero-split > .hero-visual {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .hero-copy {
    text-align: left;
    min-width: 0;
    max-width: 100%;
  }
  .hero-copy .hero-h1,
  .hero-sub,
  .hero-micro,
  .hero-pain,
  .hero-offer-name,
  .hero-founder {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    overflow-wrap: anywhere;
  }
  .hero-audience-line,
  .hero-cta-wrap,
  .hero-proof-strip,
  .trust-pillars {
    justify-content: flex-start;
  }
  .hero-audience-line {
    max-width: 100%;
    white-space: normal;
  }
  .hero-bullets {
    max-width: 100%;
    margin-bottom: 20px;
  }
  .hero-cta-wrap {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
  }
  .hero-cta-wrap .btn.primary.lg {
    width: min(100%, 280px);
    justify-content: center;
  }
  .hero-cta-wrap .text-link {
    margin-left: 0;
  }
  .hero-visual {
    margin: 0;
    overflow: visible;
  }
  .h2,
  .eyebrow,
  .kicker,
  .ps2-head,
  .ink-head {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* ───── Pain anchor section ───── */
.pain-section { background: color-mix(in oklab, var(--bg-2) 35%, transparent); }
.pain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 48px;
}
.pain-card {
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 28px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.pain-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--warn) 40%, var(--rule)); }
.pain-card .moment {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.pain-card .moment .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 22%, transparent), 0 0 12px var(--warn);
}
.pain-card .scene {
  font-family: var(--display); font-weight: 400;
  font-size: 18px; letter-spacing: -0.012em; line-height: 1.45;
  color: var(--ink-2); margin: 0 0 22px;
}
.pain-card .scene b { color: var(--ink); font-weight: 500; }
/* Solution must read at least as big as the problem (Matthias feedback) — */
/* this is the take-away of the card, so it carries the visual weight. */
.pain-card .reframe {
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--display); font-weight: 500;
  font-size: 19px; letter-spacing: -0.015em; line-height: 1.4;
  color: var(--ink); max-width: none; margin: 0;
}
.pain-card .reframe b {
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
}
.pain-card .reframe::before {
  content: "with traqx"; display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue-accent); margin-bottom: 10px;
}
.pain-card .scene:last-child { margin-bottom: 0; }
.pain-closer {
  text-align: center; margin: 44px auto 0; max-width: 40ch;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.02em;
  line-height: 1.25; color: var(--ink-2);
}

/* ───── Enablement (§8b) ───── */
.enable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin-top: 44px; }
.enable-item { border: 1px solid var(--rule-soft); border-radius: 16px; padding: 24px 26px; background: color-mix(in oklab, var(--bg-2) 60%, transparent); transition: border-color .25s, transform .25s; }
.enable-item:hover { border-color: color-mix(in oklab, var(--cyan) 38%, var(--rule)); transform: translateY(-2px); }
.enable-item .en-h { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; }
.en-num { font-family: var(--mono); font-size: 11px; color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 35%, var(--rule)); border-radius: 8px; padding: 3px 7px; flex-shrink: 0; background: color-mix(in oklab, var(--cyan) 8%, transparent); }
.enable-item p { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }
.enable-frame { text-align: center; margin: 42px auto 0; max-width: 54ch; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2vw, 25px); letter-spacing: -0.015em; line-height: 1.3; color: var(--ink-2); }
.enable-frame b { color: var(--ink); }
.cta-reassure { margin: 16px auto 0; max-width: 58ch; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

/* ───── Compliance Triangle ───── */
.triangle-section { background: color-mix(in oklab, var(--bg-2) 50%, transparent); }
.triangle-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 56px; align-items: center;
}
.triangle-vis {
  position: relative;
  aspect-ratio: 1.05/1;
  background:
    radial-gradient(500px 300px at 50% 50%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 65%);
  display: flex; align-items: center; justify-content: center;
}
.triangle-svg { width: 100%; max-width: 560px; }
.triangle-vis .pivot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.03em;
  color: var(--ink); text-transform: lowercase;
  background: var(--bg);
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 100px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--cyan) 10%, transparent);
}
.triangle-vis .pivot .t { color: var(--cyan); }
.triangle-vis .pivot .q { background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; }
.triangle-vis .pivot .x { color: var(--blue-accent); }

.tri-table {
  width: 100%; border-collapse: collapse;
  margin-top: 24px;
  font-size: 14px;
}
.tri-table tr { border-bottom: 1px solid var(--rule-soft); }
.tri-table td { padding: 22px 0; vertical-align: top; }
/* Labels are the entry-point to each row — make them obvious (Matthias feedback) */
.tri-table td:first-child {
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.018em;
  color: var(--ink);
  width: 130px; padding-right: 20px;
  display: flex; align-items: baseline; gap: 8px;
}
.tri-table td:first-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--grad-by);
  flex-shrink: 0; margin-top: 8px;
}
.tri-table td:nth-child(2) { color: var(--ink-3); padding-right: 16px; }
.tri-table td:last-child { color: var(--ink); font-weight: 500; }
.tri-table td:last-child em {
  font-style: normal;
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
}

/* ───── What you won't need ───── */
.barriers-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; margin-top: 40px;
}
.barrier {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 22px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-2) 85%, transparent), color-mix(in oklab, var(--bg) 70%, transparent));
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s;
  min-height: 220px;
  display: flex; flex-direction: column;
}
.barrier:hover { border-color: color-mix(in oklab, var(--blue-accent) 50%, var(--rule)); transform: translateY(-3px); }
/* Strikethrough sits at the top, on its own — represents the pain that goes away. */
.barrier .strike {
  font-family: var(--display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.2;
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--blue-accent) 80%, transparent);
  text-decoration-thickness: 2px;
  color: var(--ink-3);
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}
/* Check + explanation are paired below — green tick belongs to what traqx delivers,
   not to the crossed-out item (Matthias feedback). */
.barrier .resolved {
  display: flex; align-items: flex-start; gap: 12px;
  flex: 1;
}
.barrier .check {
  width: 24px; height: 24px; border-radius: 50%;
  background: color-mix(in oklab, var(--blue-accent) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--blue-accent) 60%, transparent);
  color: var(--blue-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0; margin-top: 1px;
}
.barrier p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.barrier p b { color: var(--ink); font-weight: 500; }
.closer {
  margin-top: 32px; padding: 32px;
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--blue-accent) 35%, var(--rule));
  background:
    radial-gradient(400px 200px at 0% 0%, color-mix(in oklab, var(--blue-accent) 10%, transparent), transparent 70%),
    var(--bg-2);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em; line-height: 1.35;
  text-align: center;
  color: var(--ink);
}
.closer em { font-style: normal; background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

/* ───── Why now (3 Forces) ───── */
.why-now-section { background: color-mix(in oklab, var(--bg-2) 30%, transparent); }
.forces-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 40px;
}
.force {
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
  display: flex; flex-direction: column;
}
.force:hover { transform: translateY(-3px); border-color: var(--rule-strong); }
.force.f1:hover { border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule)); }
.force.f2:hover { border-color: color-mix(in oklab, var(--gold) 35%, var(--rule)); }
.force.f3:hover { border-color: color-mix(in oklab, var(--blue-accent) 35%, var(--rule)); }
.force .fnum {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.force .fnum .dot { width: 6px; height: 6px; border-radius: 50%; }
.force.f1 .fnum .dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.force.f2 .fnum .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.force.f3 .fnum .dot { background: var(--blue-accent); box-shadow: 0 0 10px var(--blue-accent); }
.force h3 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.25;
}
.force p {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  margin: 0 0 16px; max-width: none;
}
.force ul {
  list-style: none; padding: 0; margin: 0 0 0;
  font-size: 12.5px; color: var(--ink-3);
}
.force ul li {
  padding: 7px 0 7px 18px;
  border-top: 1px solid var(--rule-soft);
  position: relative;
  line-height: 1.5;
}
.force ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 8px; height: 1px; background: currentColor;
  opacity: 0.55;
}
.force.f1 ul li::before { background: var(--cyan); opacity: 1; }
.force.f2 ul li::before { background: var(--gold); opacity: 1; }
.force.f3 ul li::before { background: var(--blue-accent); opacity: 1; }
.force ul li b { color: var(--ink); font-weight: 500; }
.why-closer {
  margin-top: 32px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.012em; line-height: 1.4;
  color: var(--ink); max-width: 70ch;
  padding-left: 18px;
  border-left: 2px solid;
  border-image: var(--grad-by) 1;
}

/* ───── Numbers (proof) ───── */
.numbers-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 36px;
}
.numbers-card {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: var(--bg-2);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 180px;
}
.numbers-card.total {
  background:
    radial-gradient(380px 200px at 0% 0%, color-mix(in oklab, var(--cyan) 14%, transparent), transparent 70%),
    radial-gradient(380px 200px at 100% 100%, color-mix(in oklab, var(--blue-accent) 14%, transparent), transparent 70%),
    var(--bg-2);
  border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule));
}
.numbers-card .nlbl {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
.numbers-card .nrole {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.numbers-card .nbig {
  font-family: var(--display); font-weight: 500;
  font-size: 30px; letter-spacing: -0.025em; line-height: 1;
  margin-bottom: 6px;
  color: var(--ink);
}
.numbers-card.total .nbig {
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600; font-size: 36px;
}
.numbers-card .nbefore {
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--ink-4) 50%, transparent);
  margin-bottom: 4px;
}
.numbers-card .nsave {
  font-family: var(--display); font-weight: 500; font-size: 14px;
  color: var(--blue-accent); letter-spacing: -0.01em;
}
.numbers-card.total .nsave { color: var(--ink); }
.numbers-disclaimer {
  margin-top: 24px; padding: 18px 22px;
  border: 1px solid var(--rule-soft); border-radius: 14px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  font-size: 13px; color: var(--ink-3); line-height: 1.55;
  max-width: none;
}
.numbers-disclaimer b { color: var(--ink-2); font-weight: 500; }

/* ───── FAQ ───── */
.faq-section { background: color-mix(in oklab, var(--bg-2) 25%, transparent); }
.faq-list { margin: 32px auto 0; max-width: 920px; padding: 0 var(--page-pad); }
@media (max-width: 700px) { .faq-list { padding: 0 24px; } }
.faq-item {
  border-bottom: 1px solid var(--rule-soft);
  padding: 0;
}
.faq-item:first-child { border-top: 1px solid var(--rule-soft); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 22px 4px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  font-family: var(--display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.012em; line-height: 1.35;
  color: var(--ink);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cyan); }
.faq-item summary::after {
  content: "+"; font-family: var(--mono); font-size: 22px;
  color: var(--ink-3); font-weight: 300;
  transition: transform .2s, color .2s;
}
.faq-item[open] summary::after { content: "−"; color: var(--cyan); }
.faq-item .faq-body {
  padding: 0 4px 24px;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
}
.faq-item .faq-body p { max-width: none; margin: 0 0 12px; }
.faq-item .faq-body p:last-child { margin: 0; }
.faq-item .faq-body b { color: var(--ink); font-weight: 500; }
.faq-item .faq-body ul { padding-left: 18px; margin: 8px 0 12px; }
.faq-item .faq-body ul li { margin-bottom: 6px; }

/* ───── Generate-Verify-Monitor ───── */
.gvm-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 48px;
}
.gvm-card {
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.gvm-card:hover { transform: translateY(-3px); }
.gvm-card.cy { border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--cyan) 18%, transparent), 0 0 32px color-mix(in oklab, var(--cyan) 10%, transparent); }
.gvm-card.lm { border-color: color-mix(in oklab, var(--blue-accent) 35%, var(--rule)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue-accent) 18%, transparent), 0 0 32px color-mix(in oklab, var(--blue-accent) 10%, transparent); }
.gvm-card.gd { border-color: color-mix(in oklab, var(--gold) 35%, var(--rule)); }
.gvm-card .step {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px;
}
.gvm-card .step b { color: var(--ink-2); font-weight: 400; }
.gvm-card h3 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 500;
  font-size: 36px; letter-spacing: -0.025em; line-height: 1; text-transform: lowercase;
}
.gvm-card.cy h3 .icn { color: var(--cyan); }
.gvm-card.lm h3 .icn { color: var(--blue-accent); }
.gvm-card.gd h3 .icn { color: var(--gold); }
.gvm-card p.lead-sm { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; }
.gvm-card ul { list-style: none; padding: 0; margin: 0; }
.gvm-card ul li {
  font-size: 13px; color: var(--ink-3); line-height: 1.55;
  padding: 8px 0;
  border-top: 1px solid var(--rule-soft);
  display: flex; align-items: flex-start; gap: 10px;
}
.gvm-card ul li::before {
  content: "›"; font-family: var(--mono); color: var(--ink-4);
  flex-shrink: 0;
}
.gvm-card.cy ul li::before { color: var(--cyan); }
.gvm-card.lm ul li::before { color: var(--blue-accent); }
.gvm-card.gd ul li::before { color: var(--gold); }

/* ───── Personas ───── */
.persona-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 24px;
}
.persona {
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--bg-2);
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
}
.persona:hover { transform: translateY(-3px); border-color: var(--rule-strong); }
.persona .ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.persona.p1 .ribbon { background: linear-gradient(90deg, var(--cyan), transparent); }
.persona.p2 .ribbon { background: linear-gradient(90deg, var(--blue-accent), transparent); }
.persona.p3 .ribbon { background: var(--grad-by); }
.persona.p4 .ribbon { background: linear-gradient(90deg, var(--blue-accent), var(--cyan)); }
.persona .role {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.persona .role .dot { width: 6px; height: 6px; border-radius: 50%; }
.persona.p1 .role .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.persona.p2 .role .dot { background: var(--blue-accent); box-shadow: 0 0 8px var(--blue-accent); }
.persona.p3 .role .dot { background: var(--grad-by); }
.persona.p4 .role .dot { background: var(--blue-accent); box-shadow: 0 0 8px var(--blue-accent); }
.persona h3 {
  margin: 0 0 3px; font-family: var(--display); font-weight: 500;
  font-size: 20px; letter-spacing: -0.018em; line-height: 1.15;
}
.persona .motive {
  font-size: 12.5px; color: var(--ink-3); margin: 0 0 14px;
  font-style: italic; line-height: 1.4;
}
.persona .benefits-h {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 8px;
}
.persona ul { list-style: none; padding: 0; margin: 0; }
.persona ul li {
  font-size: 12px; color: var(--ink-2); line-height: 1.45;
  padding: 7px 0 7px 24px;
  border-top: 1px solid var(--rule-soft);
  position: relative;
}
.persona ul li b { color: var(--ink); font-weight: 500; }

/* ── Personas as tabs (readability) ── */
.persona-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 22px; }
.ptab { font-family: var(--display); font-weight: 500; font-size: 13.5px; color: var(--ink-3); padding: 9px 18px; border-radius: 100px; border: 1px solid var(--rule); background: color-mix(in oklab, var(--bg-2) 55%, transparent); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.ptab:hover { color: var(--ink); border-color: var(--rule-strong); }
.ptab.is-active { color: var(--bg); background: var(--grad-by); border-color: transparent; font-weight: 600; }
.persona-panel { display: none; }
.persona-panel.is-active { display: block; animation: ppfade .4s ease; }
@keyframes ppfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.persona-panel.is-active ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 20px; }
@media (max-width: 820px) { .persona-panel.is-active ul { grid-template-columns: 1fr; gap: 14px; } }

/* ── Nav friendliness ── */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
.topbar nav a.is-active { color: var(--ink); background: var(--bg-3); border-color: var(--rule); }
.persona ul li .num {
  position: absolute; left: 0; top: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  width: 18px;
}

/* ───── Modules ───── */
.modules-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 40px;
}
.module {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 24px 22px;
  background: var(--bg-2);
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
  display: flex; flex-direction: column;
  min-height: 240px;
}
.module:hover { transform: translateY(-3px); border-color: var(--rule-strong); }
.module .phase {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.module .phase .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); }
.module.live .phase { color: var(--cyan); }
.module.live .phase .dot { background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 24%, transparent), 0 0 10px var(--cyan); }
.module h3 {
  margin: 0 0 4px; font-family: var(--display); font-weight: 500;
  font-size: 30px; letter-spacing: -0.025em; line-height: 1; text-transform: lowercase;
}
.module h3 .accent { background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; }
.module .domain {
  font-size: 13px; color: var(--ink-3); margin: 0 0 16px;
}
.module .reg {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-4); line-height: 1.6;
}

/* ───── Use Cases (Beyond CSV) ───── */
/* Kicker variant — the bridge between section title and the 4 cards.
   Per design feedback: it was being skipped because the eye jumps straight to the
   cards. Bigger size, stronger contrast, more breathing room above + below. */
.uc-kicker {
  font-size: 19px; line-height: 1.55; color: var(--ink-2);
  max-width: 64ch; margin: 24px 0 0;
  padding-left: 14px;
  border-left: 2px solid;
  border-image: var(--grad-by) 1;
}
.uc-kicker b { color: var(--ink); font-weight: 500; }
.usecase-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 56px;
}
.usecase {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
  display: flex; flex-direction: column;
  min-height: 360px;
}
.usecase:hover { transform: translateY(-3px); }
.usecase.uc1:hover { border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--cyan) 12%, transparent); }
.usecase.uc2:hover { border-color: color-mix(in oklab, var(--blue-accent) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--blue-accent) 12%, transparent); }
.usecase.uc3:hover { border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--cyan) 12%, transparent); }
.usecase.uc4:hover { border-color: color-mix(in oklab, var(--gold) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--gold) 12%, transparent); }
.usecase .ucn {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.usecase .ucn .dot { width: 6px; height: 6px; border-radius: 50%; }
.usecase.uc1 .ucn .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.usecase.uc2 .ucn .dot { background: var(--blue-accent); box-shadow: 0 0 8px var(--blue-accent); }
.usecase.uc3 .ucn .dot { background: var(--grad-by); }
.usecase.uc4 .ucn .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.usecase .ico-box {
  width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; color: var(--ink-2);
}
.usecase.uc1 .ico-box { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule)); }
.usecase.uc2 .ico-box { color: var(--blue-accent); border-color: color-mix(in oklab, var(--blue-accent) 35%, var(--rule)); }
.usecase.uc3 .ico-box { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule)); background: linear-gradient(135deg, color-mix(in oklab, var(--cyan) 14%, transparent), color-mix(in oklab, var(--blue-accent) 14%, transparent)); }
.usecase.uc4 .ico-box { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 35%, var(--rule)); }
.usecase h3 {
  margin: 0 0 6px; font-family: var(--display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.012em; line-height: 1.2;
  color: var(--ink);
}
.usecase .uc-tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 10px;
}
.usecase .uc-pitch {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  margin: 0 0 14px; max-width: none;
}
.usecase .uc-pitch b { color: var(--ink); font-weight: 500; }
.usecase ul { list-style: none; padding: 0; margin: 0 0 14px; }
.usecase ul li {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.45;
  padding: 5px 0; padding-left: 14px;
  position: relative;
}
.usecase ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 1px;
  background: var(--ink-4);
}
.usecase.uc1 ul li::before { background: var(--cyan); }
.usecase.uc2 ul li::before { background: var(--blue-accent); }
.usecase.uc3 ul li::before { background: var(--grad-by); }
.usecase.uc4 ul li::before { background: var(--gold); }
.usecase .uc-stat {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  line-height: 1.45;
}
.usecase .uc-stat b {
  display: block;
  font-family: var(--display);
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 2px;
}

/* ───── Cockpit / Spotlight ───── */
.spotlight {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: center;
  margin-top: 40px;
}
.spotlight .text { max-width: 50ch; }
.spotlight .text h3 {
  margin: 16px 0; font-family: var(--display); font-weight: 500;
  font-size: 36px; letter-spacing: -0.025em; line-height: 1.05;
}
.spotlight .text h3 em { font-style: normal; background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }

.cockpit {
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  background: #050810;
  display: grid; grid-template-rows: auto 1fr;
  box-shadow: 0 24px 80px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--cyan) 14%, transparent);
}
.cockpit .uibar {
  padding: 14px 18px; border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 16px; background: var(--bg-2);
}
.cockpit .uibar .logo { display: flex; align-items: center; gap: 8px; }
.cockpit .uibar .logo .mark { width: 18px; height: 18px; }
.cockpit .uibar .logo span { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: -0.025em; color: var(--ink); text-transform: lowercase; }
.cockpit .uibar .crumb { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.cockpit .uibar .crumb b { color: var(--ink); font-weight: 500; }
.cockpit .uibar .status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.cockpit .uibar .status .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 30%, transparent), 0 0 12px var(--cyan);
  animation: pulse 2s ease-in-out infinite;
}
.cockpit-body { padding: 22px; display: grid; grid-template-columns: 2fr 1fr; gap: 14px; background: var(--bg); }
.cockpit-pane { border: 1px solid var(--rule-soft); border-radius: 10px; padding: 18px; background: var(--bg-2); }
.cockpit-pane .h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cockpit-pane .h .ai-tag {
  padding: 3px 9px; border-radius: 100px;
  background: color-mix(in oklab, var(--cyan) 18%, transparent);
  color: var(--cyan); font-size: 11px; letter-spacing: 0.14em;
  border: 1px solid color-mix(in oklab, var(--cyan) 40%, transparent);
}
.cockpit-pane .draft { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.cockpit-pane .draft .cite {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11px;
  padding: 2px 7px; border-radius: 4px;
  background: color-mix(in oklab, var(--cyan) 18%, transparent);
  color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 40%, transparent);
  vertical-align: middle; margin: 0 2px;
}
.cockpit-pane .evidence { font-family: var(--mono); font-size: 11px; color: var(--ink-3); line-height: 1.9; }
.cockpit-pane .evidence .id { color: var(--ink); }
.cockpit-pane .evidence .ok { color: var(--blue-accent); display: block; margin-top: 10px; }
.cockpit-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--rule-soft); margin-top: 14px; }
.cockpit-actions button {
  flex: 1; padding: 9px 14px; border-radius: 100px;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  font-family: var(--display); font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  transition: all .2s;
}
.cockpit-actions button.primary {
  background: var(--grad-by);
  border-color: transparent; color: var(--bg); font-weight: 600;
}
.cockpit-actions button:hover { transform: translateY(-1px); }

/* ───── 4 Feinde / Abgrenzung ───── */
.foes-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 40px;
}
.foe {
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 32px 28px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg-2) 90%, transparent), var(--bg));
  position: relative; overflow: hidden;
}
.foe .foe-h {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.foe .foe-h .x {
  width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in oklab, var(--warn) 22%, transparent);
  border: 1px solid color-mix(in oklab, var(--warn) 50%, transparent);
  color: var(--warn);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.foe h4 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em; line-height: 1.3;
}
.foe .quote {
  font-size: 14px; color: var(--ink-3); line-height: 1.7;
  padding-left: 16px;
  border-left: 2px solid color-mix(in oklab, var(--warn) 50%, transparent);
  margin: 0 0 20px;
  max-width: none;
}
.foe .answer {
  padding-top: 18px; border-top: 1px solid var(--rule-soft);
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
}
.foe .answer::before {
  content: "traqx"; display: inline-block;
  font-family: var(--display); font-weight: 500;
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-right: 8px;
}

/* ───── Authority / Founders ───── */
.authority-card {
  border: 1px solid var(--rule);
  border-radius: 28px;
  padding: 56px 48px;
  background:
    radial-gradient(700px 320px at 0% 0%, color-mix(in oklab, var(--cyan) 10%, transparent), transparent 65%),
    radial-gradient(600px 320px at 100% 100%, color-mix(in oklab, var(--blue-accent) 10%, transparent), transparent 65%),
    var(--bg-2);
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 56px; align-items: center;
  margin-top: 40px;
  position: relative; overflow: hidden;
}
.authority-headline {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.03em; line-height: 0.98;
  margin: 0 0 16px;
  text-transform: lowercase;
}
.authority-headline em { font-style: normal; background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.authority-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}
.authority-stat .v {
  font-family: var(--display); font-weight: 500;
  font-size: 32px; letter-spacing: -0.025em; line-height: 1;
  background: var(--grad-by);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 6px;
}
.authority-stat .k {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4);
}
.founders-list { display: flex; flex-direction: column; gap: 16px; }
.founder {
  display: grid; grid-template-columns: 112px 1fr;
  gap: 22px; align-items: center;
  padding: 16px;
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
}
.founder .avatar {
  width: 112px; height: 112px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, color-mix(in oklab, var(--cyan) 25%, var(--bg)), color-mix(in oklab, var(--blue-accent) 25%, var(--bg)));
  display: flex; align-items: center; justify-content: center;
}
.founder .avatar img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.founder .avatar.initials {
  font-family: var(--display); font-weight: 600; font-size: 28px;
  color: var(--ink); letter-spacing: -0.02em;
}
.founder .name {
  font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 4px;
}
.founder .role-text {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
}
.founder .pitch {
  font-size: 13px; color: var(--ink-3);
  line-height: 1.5; margin: 0;
}

/* ───── Trust ───── */
.trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 40px;
}
.trust-card {
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 26px;
  background: var(--bg-2);
}
.trust-card .ico {
  width: 36px; height: 36px; border-radius: 100px;
  background: color-mix(in oklab, var(--cyan) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--cyan) 40%, transparent);
  color: var(--cyan);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.trust-card.gold .ico {
  background: color-mix(in oklab, var(--gold) 18%, transparent);
  border-color: color-mix(in oklab, var(--gold) 40%, transparent);
  color: var(--gold);
}
.trust-card.blue .ico {
  background: color-mix(in oklab, var(--blue-accent) 18%, transparent);
  border-color: color-mix(in oklab, var(--blue-accent) 40%, transparent);
  color: var(--blue-accent);
}
.trust-card h4 { margin: 0 0 8px; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.015em; }
.trust-card p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: none; }
.trust-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-top: 24px; margin-top: 24px;
  border-top: 1px solid var(--rule-soft);
}
.trust-extras {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 32px;
}
.trust-extra {
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 24px 22px;
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
}
.trust-extra .te-h {
  font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.012em; line-height: 1.3;
  color: var(--ink); margin-bottom: 12px;
}
.trust-extra p {
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
  margin: 0 0 8px; max-width: none;
}
.trust-extra p:last-child { margin-bottom: 0; }
.trust-extra p b { color: var(--ink); font-weight: 500; }
.trust-extra ul { padding-left: 16px; margin: 4px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.trust-extra ul li { margin-bottom: 6px; }
.trust-extra ul li b { color: var(--ink); font-weight: 500; }
.trust-row .badge {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 100px;
}

/* ───── Case Studies (no gate) ───── */
.cs-section { background: color-mix(in oklab, var(--bg-2) 35%, transparent); }
.cs-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 32px;
}
.cs-card {
  border: 1px solid var(--rule);
  border-radius: 22px;
  padding: 28px 26px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  position: relative; overflow: hidden;
  transition: transform .3s, border-color .3s;
  display: flex; flex-direction: column;
  min-height: 380px;
}
.cs-card:hover { transform: translateY(-3px); }
.cs-card.cs1:hover { border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--cyan) 14%, transparent); }
.cs-card.cs2:hover { border-color: color-mix(in oklab, var(--blue-accent) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--blue-accent) 14%, transparent); }
.cs-card.cs3:hover { border-color: color-mix(in oklab, var(--gold) 50%, var(--rule)); box-shadow: 0 0 32px color-mix(in oklab, var(--gold) 14%, transparent); }
.cs-card .cs-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.cs-card .cs-num .dot { width: 6px; height: 6px; border-radius: 50%; }
.cs-card.cs1 .cs-num .dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.cs-card.cs2 .cs-num .dot { background: var(--blue-accent); box-shadow: 0 0 8px var(--blue-accent); }
.cs-card.cs3 .cs-num .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.cs-card .cs-stat-big {
  font-family: var(--display); font-weight: 500;
  font-size: 38px; letter-spacing: -0.025em; line-height: 1;
  margin: 18px 0 6px;
}
.cs-card.cs1 .cs-stat-big { background: var(--grad-by-rev); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-card.cs2 .cs-stat-big { background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-card.cs3 .cs-stat-big { background: linear-gradient(135deg, var(--gold), color-mix(in oklab, var(--gold) 60%, var(--blue-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-card .cs-stat-sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 16px;
}
.cs-card h3 {
  margin: 6px 0 8px; font-family: var(--display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.25;
}
.cs-card .cs-pitch {
  font-size: 13px; color: var(--ink-2); line-height: 1.55;
  margin: 0 0 16px; max-width: none;
}
.cs-card .cs-actions {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.cs-card .cs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 100px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  background: var(--grad-by);
  color: var(--bg);
  cursor: pointer;
  transition: all .2s;
  flex: 0 0 auto;
}
.cs-card .cs-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 18px color-mix(in oklab, var(--blue-accent) 28%, transparent); }
.cs-card .cs-cta-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  text-decoration: none;
}
.cs-card .cs-cta-secondary:hover { border-color: var(--rule-strong); color: var(--ink); }
.cs-card .cs-meta-tag {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-4);
}

/* ───── Case Study Modal ───── */
.cs-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  align-items: center; justify-content: center;
}
.cs-modal[data-open="true"] { display: flex; animation: cs-fade .22s ease-out; }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
.cs-modal-overlay {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.cs-modal-frame {
  position: relative; z-index: 1;
  width: 96vw; height: 92vh;
  max-width: 1100px;
  border-radius: 18px; overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--rule);
  box-shadow: 0 32px 100px rgba(0,0,0,.6);
  display: grid; grid-template-rows: auto 1fr;
}
.cs-modal-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: color-mix(in oklab, var(--bg-2) 90%, transparent);
  border-bottom: 1px solid var(--rule-soft);
}
.cs-modal-bar .modal-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
}
.cs-modal-bar .modal-title {
  font-family: var(--display); font-weight: 500; font-size: 14px;
  color: var(--ink); letter-spacing: -0.005em;
}
.cs-modal-bar .modal-spacer { flex: 1; }
.cs-modal-bar button, .cs-modal-bar a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 100px;
  font-family: var(--display); font-size: 12px; font-weight: 500;
  border: 1px solid var(--rule); background: transparent;
  color: var(--ink-2); cursor: pointer; transition: all .2s;
  text-decoration: none;
}
.cs-modal-bar button:hover, .cs-modal-bar a:hover { color: var(--ink); border-color: var(--rule-strong); }
.cs-modal-bar .modal-pdf {
  background: var(--grad-by);
  color: var(--bg); border-color: transparent; font-weight: 600;
}
.cs-modal-bar .modal-pdf:hover { box-shadow: 0 4px 18px color-mix(in oklab, var(--blue-accent) 28%, transparent); transform: translateY(-1px); }
.cs-modal-bar .modal-close {
  width: 32px; height: 32px; padding: 0; justify-content: center;
  font-size: 16px;
}
.cs-modal-iframe {
  width: 100%; height: 100%; border: 0;
  background: var(--bg);
}
body.cs-modal-open { overflow: hidden; }

/* ───── CTA Final ───── */
.final-cta {
  background:
    radial-gradient(700px 320px at 30% 20%, color-mix(in oklab, var(--cyan) 14%, transparent), transparent 65%),
    radial-gradient(700px 320px at 70% 80%, color-mix(in oklab, var(--blue-accent) 14%, transparent), transparent 65%),
    var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 28px;
  padding: 80px 56px;
  margin: 80px var(--page-pad);
  max-width: calc(var(--page-max) - 2 * var(--page-pad));
  margin-left: auto; margin-right: auto;
  text-align: center;
  position: relative; overflow: hidden;
}
.final-cta .cta-flow { position: absolute; inset: 0; z-index: 0; opacity: 0.6; }
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2 {
  margin: 0 0 16px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.035em; line-height: 0.98;
}
.final-cta p { margin: 0 auto 28px; font-size: 18px; color: var(--ink-2); max-width: 56ch; }
.final-cta .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.final-cta .scarcity {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 28px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.final-cta .cta-timeline {
  margin-top: 32px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: left;
}
.final-cta .ct-step {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  background: color-mix(in oklab, var(--bg) 60%, transparent);
}
.final-cta .ct-when {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
.final-cta .ct-what {
  font-family: var(--display); font-weight: 500;
  font-size: 16px; letter-spacing: -0.012em; color: var(--ink);
  margin-bottom: 6px;
}
.final-cta .ct-detail {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.final-cta .scarcity .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); animation: pulse 2.5s ease-in-out infinite; }
.final-cta.compact {
  padding: clamp(48px, 5vw, 64px) clamp(28px, 4vw, 48px);
  margin-top: clamp(52px, 6vw, 72px);
  margin-bottom: clamp(52px, 6vw, 72px);
}
.final-cta.compact .cta-flow { opacity: .42; }
.final-cta.compact h2 {
  font-size: clamp(30px, 3.7vw, 48px);
  line-height: 1.07;
  letter-spacing: -0.028em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.final-cta.compact p {
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.56;
  max-width: 54ch;
}
.final-cta.compact .scarcity { margin-top: 20px; }

/* ───── Footer ───── */
/* ── Footer (osapiens-Struktur, traqx cyan→blau Brand-Flächen) ── */
.site-footer {
  position: relative; isolation: isolate;
  border-top: 1px solid var(--rule-soft);
  padding: 0 var(--page-pad) 30px; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--flow-to) 12%, transparent), transparent 58%),
    radial-gradient(70% 120% at 0% 100%, color-mix(in oklab, var(--flow-from) 9%, transparent), transparent 60%);
}
.site-footer .shell { max-width: var(--page-max); margin: 0 auto; }
.foot-cta {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  margin: 48px 0 52px; padding: clamp(26px, 3.5vw, 42px);
  border-radius: 22px;
  background:
    radial-gradient(130% 170% at 0% 0%, color-mix(in oklab, var(--flow-from) 16%, transparent), transparent 52%),
    linear-gradient(135deg, color-mix(in oklab, var(--flow-to) 14%, var(--bg-2)), var(--bg-2));
}
.foot-cta::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px; padding: 1px;
  background: linear-gradient(120deg, var(--flow-from), var(--flow-to));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none;
}
.foot-cta-h { margin: 0 0 6px; font-family: var(--display); font-weight: 600; font-size: clamp(21px, 2.5vw, 30px); letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.foot-cta-accent { background: linear-gradient(90deg, var(--flow-from), var(--flow-to)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-cta-tx p { margin: 0; color: var(--ink-2); font-size: 15px; }
.foot-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.foot-cta-micro { flex: 1 0 100%; margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-4); }
.btn.ghost { background: none; border: 1px solid var(--rule); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--cyan); color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
.foot-brand .wm { font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: -.04em; color: var(--ink); text-transform: lowercase; }
.foot-tag { margin: 14px 0 12px; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; max-width: 40ch; }
.foot-made { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-4); }
.foot-flag { display: inline-block; border-radius: 2px; flex: 0 0 auto; }
.foot-guides { margin-top: 22px; max-width: 36ch; }
.foot-guides-heading {
  display: block; margin: 0 0 9px;
  font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan);
}
.foot-guide-actions { display: grid; gap: 9px; }
.foot-guide-btn {
  appearance: none;
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in oklab, var(--cyan) 34%, var(--rule-soft));
  border-radius: 8px;
  background: color-mix(in oklab, var(--bg-2) 70%, transparent);
  color: var(--ink-2);
  font-family: var(--display);
  font-size: 13.5px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.foot-guide-btn:hover,
.foot-guide-btn:focus-visible {
  border-color: var(--cyan);
  background: color-mix(in oklab, var(--cyan) 9%, var(--bg-2));
  color: var(--ink);
  transform: translateY(-1px);
}
.foot-guide-btn .arrow { flex: 0 0 auto; color: var(--cyan); }
.foot-toggle {
  appearance: none; border: 0; background: none; padding: 0; width: 100%;
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); margin: 0 0 14px; font-weight: 400; text-align: left;
  pointer-events: none;
}
.foot-devnote{font-size:11.5px;color:var(--ink-4);letter-spacing:.01em;margin-top:6px}
.foot-toggle-icon { display: none; margin-left: auto; font-family: var(--display); font-size: 18px; line-height: 1; color: var(--cyan); transition: transform .18s; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin: 0 0 11px; }
.foot-col li a, .foot-col li button { font-size: 14px; color: var(--ink-2); transition: color .15s; }
.foot-col li button { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--display); }
.foot-col li a:hover, .foot-col li button:hover { color: var(--cyan); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
.foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { color: var(--ink-3); }
.foot-legal a:hover { color: var(--ink); }
.foot-legal-btn {
  appearance: none;
  border: 0;
  padding: 10px 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.foot-legal-btn:hover,
.foot-legal-btn:focus-visible { color: var(--ink); }
.foot-disabled {
  color: var(--ink-4);
  cursor: default;
}
.foot-disabled small {
  margin-left: 5px;
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: none;
}
@media (max-width: 1000px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) {
  /* Centered single-column footer on phones (redesigned 2026-06-07) — the 2-col grid left
     huge gaps (Produkte 3 vs Use-Cases 9 links) and the Made-in-Germany line was barely visible. */
  .foot-grid { grid-template-columns: 1fr; text-align: left; gap: 0; }
  .foot-brand { display: flex; flex-direction: column; align-items: center; }
  .foot-brand .brand-lockup { justify-content: center; }
  .foot-tag { margin: 14px auto 14px; max-width: 36ch; text-align: center; }
  .foot-made { justify-content: center; white-space: nowrap; color: var(--ink-2); font-size: 11px; letter-spacing: 0; border: 1px solid var(--hairline-light); border-radius: 999px; padding: 8px 16px; width: -moz-fit-content; width: fit-content; margin: 0 auto; }
  .foot-guides { width: 100%; max-width: 34ch; margin: 18px auto 24px; text-align: left; }
  .foot-guides-heading { text-align: center; }
  .foot-col { border-top: 1px solid var(--rule-soft); }
  .foot-col:last-of-type { border-bottom: 1px solid var(--rule-soft); }
  .foot-toggle { min-height: 54px; margin: 0; justify-content: space-between; color: var(--ink-2); pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .foot-toggle-icon { display: inline-flex; }
  .foot-col.is-open .foot-toggle-icon { transform: rotate(45deg); }
  .foot-col ul { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 16px; }
  .site-footer.is-accordion-ready .foot-col ul { display: none; }
  .site-footer.is-accordion-ready .foot-col.is-open ul { display: flex; }
  .foot-col li { margin: 0; width: 100%; }
  .foot-col li a, .foot-col li button, .foot-col li .is-soon { display: block; min-height: 42px; padding: 10px 0; font-size: 15px; }
  .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .foot-legal { justify-content: center; }
  .foot-cta { flex-direction: column; align-items: flex-start; }
  .foot-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ───── Small viewport ───── */
@media (max-width: 1100px) {
  .hero-benefits { gap: 18px; }
  .forces-grid, .numbers-grid, .trust-extras { grid-template-columns: 1fr; }
  .final-cta .cta-timeline { grid-template-columns: 1fr; gap: 10px; }
  .triangle-grid { grid-template-columns: 1fr; gap: 32px; }
  .gvm-grid, .barriers-grid, .persona-grid, .modules-grid, .trust-grid, .pain-grid, .foes-grid, .usecase-grid, .cs-grid, .trust-extras { grid-template-columns: 1fr 1fr; }
  .barriers-grid { grid-template-columns: 1fr; }
  .pain-grid, .foes-grid { grid-template-columns: 1fr; }
  .spotlight { grid-template-columns: 1fr; }
  .authority-card { grid-template-columns: 1fr; padding: 40px 32px; gap: 32px; }
  .authority-stats { grid-template-columns: 1fr 1fr 1fr; }
  .site-footer-top { grid-template-columns: 1fr 1fr; }
  .topbar-inner > nav { display: none; }
  .topbar .nav-burger { display: inline-flex; }
  /* Keep the bar (brand + close button) clickable above the open overlay. */
  .topbar-inner { position: relative; z-index: 2; }
  /* Open menu = fixed, full-screen, internally-scrollable overlay. It lives OUTSIDE the
     topbar (see nav.html.j2) so it isn't trapped by the topbar's backdrop-filter on iOS.
     z-index sits BELOW the sticky topbar (z-index 40) so brand + close button stay clickable. */
  .mobile-nav.is-open {
    display: flex; position: fixed; top: 0; left: 0; right: 0;
    height: 100vh; height: 100dvh; z-index: 50;   /* ABOVE the topbar (40): full-screen modal with its own ✕ */
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    max-height: none; padding: 78px var(--page-pad) 48px; background: var(--bg);
  }
}
@media (max-width: 700px) {
  :root { --page-pad: 24px; }
  .gvm-grid, .barriers-grid, .persona-grid, .modules-grid, .trust-grid, .pain-grid, .foes-grid, .usecase-grid, .cs-grid { grid-template-columns: 1fr; }
  .cs-modal-frame { width: 98vw; height: 96vh; }
  .cs-modal-bar { padding: 10px 14px; }
  .cs-modal-bar .modal-eyebrow { display: none; }
  .hero-stats, .authority-stats { grid-template-columns: 1fr 1fr; }
  .hero-benefits { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; margin-top: 22px; }
  .forces-grid, .numbers-grid { grid-template-columns: 1fr; }
  .site-footer-top { grid-template-columns: 1fr; }
  .tri-table td:first-child { font-size: 18px; width: 100px; }

  /* Documentation Cockpit — stack vertically + simplify chrome on small screens */
  .spotlight .text h3 { font-size: 24px; line-height: 1.15; }
  .spotlight .text h3 br { display: none; }
  .spotlight .text h3 em { display: inline; }
  .cockpit { min-height: 0; }
  .cockpit .uibar { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
  .cockpit .uibar .crumb { font-size: 11px; flex-basis: 100%; order: 3; }
  .cockpit .uibar .status { font-size: 11px; letter-spacing: 0.08em; }
  .cockpit-body { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .cockpit-pane { padding: 14px; }
  .cockpit-pane .draft { font-size: 12.5px; line-height: 1.6; }
  .cockpit-actions button { font-size: 11px; padding: 8px 10px; }
}

/* ════════ v4.0 REBUILD CSS ════════ */

/* ═══════════════════════════════════════════════════════════════════
   v4.0 REBUILD — component CSS for the configurable-platform structure.
   Reuses existing tokens (--bg, --cyan, --royal, --electric, --grad-by,
   --rule*, --ink*, --display, --mono). Additive — appended into the style block.
   ═══════════════════════════════════════════════════════════════════ */

/* ── shared section rhythm + scroll reveal ── */
.shell { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); position: relative; z-index: 1; }
.sec { padding: clamp(52px, 5.5vw, 90px) 0; position: relative; border-top: 1px solid var(--rule-soft); }
.sec.tight { padding: clamp(42px, 4.5vw, 70px) 0; }
.sec.band { background: color-mix(in oklab, var(--bg-2) 38%, transparent); }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cyan) 20%, transparent), 0 0 12px var(--cyan); }
.eyebrow.warn .dot { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 22%, transparent), 0 0 12px var(--warn); }
.h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.3vw, 52px); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 18px; color: var(--ink); }
.kicker { font-family: var(--text); font-weight: 400; text-transform: none; letter-spacing: normal; display: block; font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.62; color: var(--ink-2); max-width: 66ch; margin: 0; }
.kicker.lead b { color: var(--ink); font-weight: 600; }
.afterline { margin: 26px 0 0; font-family: var(--display); font-style: italic; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.45; color: var(--ink-3); max-width: 60ch; }
.afterline b { color: var(--ink-2); font-weight: 500; }

.reveal { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; }

/* ════ Added 2026-06-02 · "relief" (was wegfällt) + "transformation" (future pacing) ════ */
.wf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 36px 0 0; }
.wf-card { border: 1px solid var(--rule-soft); border-radius: 14px; padding: 20px 18px; background: color-mix(in oklab, var(--bg-2) 42%, transparent); transition: border-color .2s, transform .2s; }
.wf-card:hover { border-color: var(--rule-strong); transform: translateY(-3px); }
.wf-struck { display: block; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: -0.01em; color: var(--ink-3); opacity: .8; text-decoration: line-through; text-decoration-color: var(--ink-4); text-decoration-thickness: 1.5px; margin: 0 0 11px; }
.wf-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.wf-check { color: var(--cyan); font-weight: 700; margin-right: 6px; }
.wf-closer { text-align: center; max-width: 60ch; margin: 32px auto 0; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.02em; line-height: 1.35; color: var(--ink); }
@media (max-width: 1080px) { .wf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .wf-grid { grid-template-columns: 1fr; } }

.tx-bridge { display: none; }
.tx-bridge.is-active { display: block; animation: ppfade .4s ease; }
.tx-bridge > h3 { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 4px 0 22px; }
.tx-pairs { display: grid; gap: 12px; }
.tx-pair { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: stretch; gap: 10px; }
.tx-before, .tx-after { border-radius: 12px; padding: 15px 17px; font-size: 14.5px; line-height: 1.5; border: 1px solid var(--rule-soft); display: flex; align-items: center; }
.tx-before { color: var(--ink-3); background: color-mix(in oklab, var(--bg-2) 30%, transparent); }
.tx-after { color: var(--ink); background: color-mix(in oklab, var(--cyan) 8%, transparent); border-color: color-mix(in oklab, var(--cyan) 30%, var(--rule)); }
.tx-arrow { display: flex; align-items: center; justify-content: center; color: var(--cyan); font-family: var(--mono); font-size: 17px; }
.tx-closer { text-align: center; max-width: 56ch; margin: 30px auto 0; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; line-height: 1.4; color: var(--ink); }
.tx-closer a { color: var(--cyan); white-space: nowrap; }
@media (max-width: 760px) { .tx-pair { grid-template-columns: 1fr; gap: 6px; } .tx-arrow { transform: rotate(90deg); height: 22px; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── §3 Scope — point → fan axis ── */
.scope-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 40px; }
.scope-fan { position: relative; aspect-ratio: 1.15 / 1; width: 100%; }
.scope-fan svg { width: 100%; height: 100%; overflow: visible; }
.scope-fan .axis { stroke: var(--rule-strong); stroke-width: 1.5; }
.scope-fan .ray { stroke: color-mix(in oklab, var(--cyan) 55%, var(--rule)); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease; }
.scope-fan.in .ray { opacity: .9; animation: dashIn .9s ease forwards; }
@keyframes dashIn { from { stroke-dasharray: 4 200; } to { stroke-dasharray: 4 6; } }
.scope-fan .seed { fill: var(--electric); }
.scope-fan .seed-ring { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: .5; transform-origin: center; animation: seedPulse 3.4s ease-in-out infinite; }
@keyframes seedPulse { 0%,100% { opacity: .25; r: 16px; } 50% { opacity: .6; r: 22px; } }
.scope-fan .node { fill: var(--bg-2); stroke: color-mix(in oklab, var(--cyan) 45%, var(--rule)); stroke-width: 1.5; }
.scope-fan .nlabel { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); letter-spacing: .04em; }
.scope-fan .seedlabel { font-family: var(--mono); font-size: 11px; fill: var(--cyan); letter-spacing: .08em; text-transform: uppercase; }
.scope-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.scope-list li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; color: var(--ink-2); }
.scope-list li b { color: var(--ink); font-weight: 600; }
.scope-list .mk { font-family: var(--mono); font-size: 11px; color: var(--cyan); flex-shrink: 0; }

/* ── §4 Pain — horizontal scroll-snap rail ── */
.pain-wrap { margin-top: 38px; position: relative; }
.pain-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(82%, 560px), 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 22px; -ms-overflow-style: none; scrollbar-width: none; }
.pain-rail::-webkit-scrollbar { display: none; }
.pain-v { scroll-snap-align: center; border: 1px solid var(--rule); border-radius: 20px; padding: 34px 34px 30px; background: linear-gradient(165deg, color-mix(in oklab, var(--bg-2) 92%, transparent), var(--bg)); position: relative; overflow: hidden; min-height: 240px; display: flex; flex-direction: column; }
.pain-v::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--warn), transparent 70%); opacity: .6; }
.pain-v .vnum { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--warn); margin-bottom: 16px; }
.pain-v h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.3vw, 27px); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 12px; color: var(--ink); }
.pain-v p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 52ch; }
.pain-nav { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.pain-dots { display: flex; gap: 8px; }
.pain-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--rule-strong); cursor: pointer; transition: background .25s, transform .25s; padding: 0; }
.pain-dot.is-active { background: var(--cyan); transform: scale(1.25); }
.pain-arrows { margin-left: auto; display: flex; gap: 8px; }
.pain-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: color-mix(in oklab, var(--bg-2) 70%, transparent); color: var(--ink-2); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .25s, color .25s, background .25s; }
.pain-arrow:hover { border-color: color-mix(in oklab, var(--cyan) 45%, var(--rule)); color: var(--ink); }
.pain-closer { margin: 30px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 70ch; }
.pain-closer b { color: var(--ink); font-weight: 600; }

/* ── §5 Platform — four clickable building-block cards ── */
.bb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.bb-card { text-align: left; border: 1px solid var(--rule); border-radius: 18px; padding: 24px 22px 26px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); cursor: pointer; transition: border-color .3s, transform .3s, box-shadow .3s, background .3s; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 184px; color: inherit; font: inherit; }
.bb-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--grad-by); opacity: 0; transition: opacity .3s; }
.bb-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--cyan) 42%, var(--rule)); box-shadow: 0 20px 50px rgba(0,0,0,.42); background: color-mix(in oklab, var(--bg-2) 80%, transparent); }
.bb-card:hover::after { opacity: .9; }
.bb-card .bbn { font-family: var(--mono); font-size: 12px; color: var(--cyan); letter-spacing: .1em; }
.bb-card h3 { font-family: var(--display); font-weight: 500; font-size: 18px; letter-spacing: -.01em; line-height: 1.22; margin: 2px 0 0; color: var(--ink); }
.bb-card p { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.bb-card .bbgo { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-4); transition: color .3s; }
.bb-card:hover .bbgo { color: var(--cyan); }
.bb-foot { margin: 26px 0 0; font-size: 14.5px; color: var(--ink-3); }
.bb-foot b { color: var(--ink-2); font-weight: 600; }

/* ── building-block sections — shared 2-col split ── */
.bb-split { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(34px, 5vw, 70px); align-items: center; margin-top: 8px; }
.bb-split.rev { grid-template-columns: 1.02fr 1fr; }
.bb-split > * { min-width: 0; }
.bb-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 14px; }
.bb-h { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.025em; line-height: 1.08; margin: 0 0 16px; color: var(--ink); }
.bb-lead { font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; color: var(--ink); margin: 0 0 18px; letter-spacing: -.01em; }
.bb-body { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0 0 18px; }
.bb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bb-list li { padding-left: 0; }
.bb-list li b { color: var(--ink); font-weight: 600; }
.bb-list .li-h { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.bb-list .li-h .mk { font-family: var(--mono); font-size: 11px; color: var(--cyan); }
.bb-list p { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }

/* ── §6 Layers — interactive 3-layer stack ── */
.layers-vis { display: grid; gap: 14px; }
.layer { border: 1px solid var(--rule); border-radius: 16px; padding: 20px 22px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); cursor: pointer; transition: border-color .3s, background .3s, transform .3s; position: relative; }
.layer:hover { transform: translateX(4px); }
.layer.is-active { border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); background: linear-gradient(110deg, color-mix(in oklab, var(--cyan) 10%, var(--bg-2)), var(--bg) 78%); }
.layer .lh { display: flex; align-items: center; gap: 12px; }
.layer .lk { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); border: 1px solid var(--rule); border-radius: 100px; padding: 3px 10px; }
.layer.is-active .lk { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 40%, var(--rule)); }
.layer h4 { font-family: var(--display); font-weight: 500; font-size: 17px; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.layer .ldetail { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 12px 0 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin .4s ease; }
.layer.is-active .ldetail { max-height: 220px; opacity: 1; }
.layer .ldetail b { color: var(--ink); font-weight: 600; }
.precedence { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); border-top: 1px solid var(--rule-soft); padding-top: 16px; }
.precedence b { color: var(--cyan); font-weight: 600; }

/* ── §7 Templates — ingest → structure → export morph ── */
.tpl-stage { position: relative; aspect-ratio: 1.25 / 1; border: 1px solid var(--rule); border-radius: 20px; background: radial-gradient(120% 120% at 50% 0%, color-mix(in oklab, var(--cyan) 7%, transparent), transparent 60%), color-mix(in oklab, var(--bg-2) 60%, transparent); overflow: hidden; display: grid; place-items: center; }
.tpl-stage svg { width: 86%; height: 86%; overflow: visible; }
.tpl-doc-line { fill: color-mix(in oklab, var(--ink-4) 60%, transparent); transition: opacity .5s ease; }
.tpl-frame { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.tpl-node { fill: var(--bg-3); stroke: var(--cyan); stroke-width: 1.4; opacity: 0; transition: opacity .5s ease; }
.tpl-edge { stroke: color-mix(in oklab, var(--cyan) 55%, var(--rule)); stroke-width: 1.2; opacity: 0; transition: opacity .5s ease; }
.tpl-stage[data-phase="structure"] .tpl-doc-line, .tpl-stage[data-phase="export"] .tpl-doc-line { opacity: .25; }
.tpl-stage[data-phase="structure"] .tpl-node, .tpl-stage[data-phase="structure"] .tpl-edge { opacity: 1; }
.tpl-stage[data-phase="export"] .tpl-node { opacity: .35; }
.tpl-steps { display: flex; gap: 8px; margin-top: 18px; }
.tpl-step { flex: 1; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--bg-2) 50%, transparent); cursor: pointer; transition: border-color .3s, background .3s; }
.tpl-step.is-active { border-color: color-mix(in oklab, var(--cyan) 45%, var(--rule)); background: color-mix(in oklab, var(--cyan) 8%, transparent); }
.tpl-step .tsk { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.tpl-step .tst { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--ink); margin-top: 3px; }
.tpl-step p { font-size: 12px; line-height: 1.45; color: var(--ink-3); margin: 5px 0 0; }

/* ── §8 Brain — network graph ── */
.brain-stage { position: relative; aspect-ratio: 1.2 / 1; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; background: radial-gradient(90% 90% at 50% 45%, color-mix(in oklab, var(--cyan) 8%, transparent), transparent 62%), color-mix(in oklab, var(--bg-2) 55%, transparent); }
.brain-stage svg { width: 100%; height: 100%; overflow: visible; }
.brain-edge { stroke: color-mix(in oklab, var(--cyan) 40%, var(--rule)); stroke-width: 1; opacity: .35; transition: opacity .35s, stroke .35s; }
.brain-edge.lit { stroke: var(--cyan); opacity: .95; }
.bnode { cursor: pointer; }
.bnode circle { fill: var(--bg-3); stroke: color-mix(in oklab, var(--cyan) 45%, var(--rule)); stroke-width: 1.4; transition: stroke .3s, fill .3s, r .3s; }
.bnode.core circle { fill: color-mix(in oklab, var(--electric) 30%, var(--bg-3)); stroke: var(--cyan); }
.bnode.is-active circle { stroke: var(--cyan); fill: color-mix(in oklab, var(--cyan) 22%, var(--bg-3)); }
.bnode text { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); text-anchor: middle; pointer-events: none; }
.brain-cap { margin-top: 16px; border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); min-height: 64px; }
.brain-cap .bck { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.brain-cap p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 5px 0 0; }
.brain-cap p b { color: var(--ink); font-weight: 600; }
/* ── Home hero fit-microstrip + recognition band (Viewport-Audit 2026-06-07) ──
   Sub-industry recognition as a calm narrow strip INSIDE the hero (not a big block
   below it); the pain moves to a centered recognition band as the first section. */
.hero-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.hero-fit span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--pearl); white-space: nowrap; padding: 5px 10px; border: 1px solid color-mix(in oklab, var(--cyan) 24%, var(--rule)); border-radius: 999px; background: color-mix(in oklab, var(--cyan) 7%, transparent); }
@media (max-width: 700px) {
  .hero-fit { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; margin-left: calc(var(--page-pad) * -1); margin-right: calc(var(--page-pad) * -1); padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .hero-fit::-webkit-scrollbar { display: none; }
}
.recognition { padding: clamp(26px, 3.6vw, 46px) var(--page-pad); border-bottom: 1px solid var(--rule-soft); }
.recognition__copy { max-width: 720px; margin: 0 auto; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.42; letter-spacing: -.01em; color: var(--ink-3); }
.recognition__copy b { color: var(--ink); font-weight: 600; }
/* Mobile Brain side-slider — added 2026-06-07: the desktop orbit is too wide for phone
   gutters, so the building-block texts become a swipeable slider instead. Hidden on desktop. */
.brain-slider { display: none; }
@media (max-width: 760px) {
  #brainCap { display: none; }
  .hub-in-panel { display: none; }
  .brain-slider.swipe-row { display: flex !important; width: 100%; max-width: 100%; min-width: 0; margin: 16px 0 4px; padding: 0; }
  .brain-slide { flex: 0 0 90% !important; min-height: auto; border: 0; background: none; padding: 0 16px 0 0; }
  .brain-slide .bs-label { display: block; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -.01em; color: var(--cyan); margin: 0 0 6px; }
  .brain-slide p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; overflow-wrap: anywhere; }
}

/* ── §9 Agents — card grid ── */
.agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.agent-card { border: 1px solid var(--rule); border-radius: 16px; padding: 22px 22px 24px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); transition: border-color .3s, transform .3s, box-shadow .3s; position: relative; }
.agent-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--cyan) 40%, var(--rule)); box-shadow: 0 16px 42px rgba(0,0,0,.4); }
.agent-card .aico { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 35%, var(--rule)); background: color-mix(in oklab, var(--cyan) 8%, transparent); margin-bottom: 14px; }
.agent-card h4 { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 7px; letter-spacing: -.01em; }
.agent-card p { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.agent-card.config { background: linear-gradient(135deg, color-mix(in oklab, var(--cyan) 9%, var(--bg-2)), var(--bg) 80%); border-style: dashed; border-color: color-mix(in oklab, var(--cyan) 30%, var(--rule)); display: flex; flex-direction: column; justify-content: center; }
.agent-card.config .aico { background: color-mix(in oklab, var(--cyan) 14%, transparent); }
.agent-card.config h4 { font-size: 17px; }

/* ── §10 Configurable — maturity matrix ── */
.matrix { margin-top: 40px; border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; }
.matrix-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--rule-soft); transition: background .25s; }
.matrix-row:last-child { border-bottom: none; }
.matrix-row:hover { background: color-mix(in oklab, var(--bg-2) 55%, transparent); }
.matrix-row .uc { font-size: 15.5px; color: var(--ink-2); }
.matrix-row .uc b { color: var(--ink); font-weight: 600; }
.badge { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; white-space: nowrap; border: 1px solid var(--rule); }
.badge.live { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 45%, var(--rule)); background: color-mix(in oklab, var(--cyan) 10%, transparent); }
.badge.cfg { color: var(--ink-2); border-color: var(--rule-strong); background: color-mix(in oklab, var(--bg-3) 60%, transparent); }
.badge.prep { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, var(--rule)); background: color-mix(in oklab, var(--warn) 10%, transparent); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 12.5px; color: var(--ink-3); }
.matrix-legend span { display: inline-flex; align-items: center; gap: 7px; }
.matrix-legend i { width: 9px; height: 9px; border-radius: 50%; }
.matrix-legend .il { background: var(--cyan); } .matrix-legend .ic { background: var(--rule-strong); } .matrix-legend .ip { background: var(--warn); }

/* ── §11 Verify micro-demo ── */
.verify-demo { margin-top: 18px; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; background: color-mix(in oklab, var(--bg-2) 60%, transparent); }
.vd-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.vd-bar .vstatus { margin-left: auto; color: var(--cyan); display: inline-flex; align-items: center; gap: 7px; }
.vd-bar .vstatus i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.vd-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--rule-soft); transition: background .3s; }
.vd-item:last-child { border-bottom: none; }
.vd-item .vstate { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--rule-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-4); flex-shrink: 0; transition: all .3s; margin-top: 1px; }
.vd-item.approved .vstate { background: color-mix(in oklab, var(--cyan) 18%, transparent); border-color: var(--cyan); color: var(--cyan); }
.vd-item .vtext { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.vd-item .vcite { display: inline-block; margin-top: 5px; font-family: var(--mono); font-size: 11px; color: var(--cyan); border: 1px solid color-mix(in oklab, var(--cyan) 35%, var(--rule)); border-radius: 6px; padding: 2px 7px; }
.vd-item .vapprove { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; border: 1px solid var(--rule); border-radius: 8px; padding: 6px 12px; background: transparent; color: var(--ink-2); transition: all .25s; }
.vd-item .vapprove:hover { border-color: var(--cyan); color: var(--cyan); }
.vd-item.approved .vapprove { border-color: color-mix(in oklab, var(--cyan) 40%, var(--rule)); color: var(--cyan); background: color-mix(in oklab, var(--cyan) 10%, transparent); pointer-events: none; }
.method-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.method-sub { border: 1px solid var(--rule); border-radius: 16px; padding: 24px 26px; background: color-mix(in oklab, var(--bg-2) 50%, transparent); }
.method-sub h4 { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0 0 10px; }
.method-sub p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.method-sub p b { color: var(--ink); font-weight: 600; }
.method-sub .em { font-style: italic; color: var(--ink-3); }
.method-quote { margin: 22px 0 0; border-left: 2px solid var(--cyan); padding: 6px 0 6px 20px; font-family: var(--display); font-size: clamp(16px,1.8vw,20px); line-height: 1.45; color: var(--ink); letter-spacing: -.01em; }

/* ── §12 Differentiation — Not X, but Y strips ── */
.diff-strips { display: grid; gap: 12px; margin-top: 40px; }
.diff-strip { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; border: 1px solid var(--rule); border-radius: 14px; padding: 20px 24px; background: color-mix(in oklab, var(--bg-2) 50%, transparent); transition: border-color .3s, transform .3s; }
.diff-strip:hover { border-color: color-mix(in oklab, var(--cyan) 35%, var(--rule)); transform: translateX(4px); }
.diff-strip .dno { font-family: var(--mono); font-size: 12px; color: var(--ink-4); padding-top: 2px; }
.diff-strip h4 { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--ink); margin: 0 0 6px; letter-spacing: -.01em; }
.diff-strip h4 .no { color: var(--warn); }
.diff-strip p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.diff-strip p b { color: var(--ink); font-weight: 600; }
.diff-closer { margin: 26px 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(17px,2vw,22px); line-height: 1.4; color: var(--ink-2); letter-spacing: -.01em; max-width: 64ch; }
.diff-closer b { color: var(--ink); font-weight: 600; }

/* ── §14 Why us — founders + track record ── */
.why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(34px,5vw,64px); align-items: center; margin-top: 8px; }
.track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 0; }
.track-stat { border: 1px solid var(--rule); border-radius: 14px; padding: 20px 18px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); text-align: center; }
.track-stat .tv { font-family: var(--display); font-weight: 600; font-size: clamp(26px,3.2vw,38px); letter-spacing: -.03em; background: var(--grad-by); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.track-stat .tl { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.4; }
.founders { display: grid; gap: 14px; }
.founder { display: flex; align-items: center; gap: 15px; border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; background: color-mix(in oklab, var(--bg-2) 50%, transparent); }
.founder .favatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; object-fit: cover; object-position: center; border: 1px solid var(--rule-strong); }
.founder .ftext { min-width: 0; }
.founder .fn { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.founder p { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 4px 0 0; }
.why-note { font-size: 12px; line-height: 1.55; color: var(--ink-4); margin: 16px 0 0; font-style: italic; }

/* ── §15 Trust — principles + inspection list ── */
.trust-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,52px); margin-top: 12px; align-items: start; }
.tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.tlist li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.tlist li b { color: var(--ink); font-weight: 600; }
.tlist .tk { color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
.principles { border: 1px solid var(--rule); border-radius: 18px; padding: 28px 30px; background: linear-gradient(150deg, color-mix(in oklab, var(--cyan) 7%, var(--bg-2)), var(--bg) 82%); }
.principles h3 { font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 18px; }
.principles ol { list-style: none; counter-reset: pr; margin: 0; padding: 0; display: grid; gap: 14px; }
.principles li { counter-increment: pr; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.principles li::before { content: counter(pr,decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--cyan); }
.principles li b { color: var(--ink); font-weight: 600; }

/* ── final CTA reuse / scaffolding ── */
.cta-final { text-align: center; max-width: 760px; margin: 0 auto; }
.cta-final .h2 { margin-bottom: 16px; }
.cta-final .kicker { margin: 0 auto 28px; }
.cta-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.cta-note { margin: 22px auto 0; max-width: 60ch; font-size: 12.5px; color: var(--ink-4); font-style: italic; }

/* ── responsive ── */
@media (max-width: 1040px) {
  .scope-grid, .bb-split, .bb-split.rev, .why-grid, .trust-grid2, .method-subs { grid-template-columns: 1fr; gap: 32px; }
  .bb-grid { grid-template-columns: 1fr 1fr; }
  .agent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .bb-grid, .agent-grid, .track { grid-template-columns: 1fr; }
  .pain-rail { grid-auto-columns: 88%; }
  .matrix-row { grid-template-columns: 1fr; gap: 12px; }
  .diff-strip { grid-template-columns: 1fr; gap: 8px; }
  .sec { padding: 64px 0; }
}


/* ── Pain accordion (v4 directive update) ── */
.pain-list { display: grid; gap: 10px; margin-top: 38px; }
.pain-item { border: 1px solid var(--rule); border-radius: 14px; background: color-mix(in oklab, var(--bg-2) 50%, transparent); overflow: hidden; transition: border-color .25s, background .25s; }
.pain-item[open] { border-color: color-mix(in oklab, var(--warn) 42%, var(--rule)); background: color-mix(in oklab, var(--bg-2) 78%, transparent); }
.pain-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 19px 24px; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.9vw, 21px); letter-spacing: -.015em; color: var(--ink); }
.pain-item summary::-webkit-details-marker { display: none; }
.pain-item summary:hover { background: color-mix(in oklab, var(--bg-2) 68%, transparent); }
.pain-item .pnum { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--warn); flex-shrink: 0; }
.pain-item summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 20px; color: var(--ink-4); transition: color .25s; line-height: 1; }
.pain-item[open] summary::after { content: "−"; color: var(--warn); }
.pain-item .pain-detail { padding: 0 24px 20px 56px; }
.pain-item .pain-detail p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 72ch; }

/* ── Building-blocks sticky anchor-nav (v4 directive update) ── */
.blocks { position: relative; padding-top: 6px; }
.blocks .sec { scroll-margin-top: 124px; }
.bb-nav { position: sticky; top: 54px; z-index: 40; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; display: flex; gap: 5px; padding: 6px; border: 1px solid var(--rule); border-radius: 100px; background: color-mix(in oklab, var(--bg-2) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0,0,0,.34); }
.bb-nav a { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 8px 14px; border-radius: 100px; white-space: nowrap; transition: background .25s, color .25s; }
.bb-nav a:hover { color: var(--ink); }
.bb-nav a.is-active { background: color-mix(in oklab, var(--cyan) 16%, transparent); color: var(--cyan); }
@media (max-width: 680px) { .bb-nav { position: static; max-width: 100%; overflow-x: auto; justify-content: flex-start; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .blocks .sec { scroll-margin-top: 80px; } }

/* ── Platform hub-and-spoke explorer (v4.2) ── */
.hub-explorer { margin-top: 46px; }
.hub { position: relative; width: min(500px, 94%); margin: 0 auto; aspect-ratio: 1; overflow: visible; }
.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-ring { fill: none; stroke: var(--rule); stroke-width: 1; opacity: .55; }
.hub-line { stroke: url(#hubgrad); stroke-width: 1.7; opacity: .6; stroke-dasharray: 3 5; animation: hubdash 7s linear infinite; transition: opacity .3s, stroke-width .3s; }
.hub-line.lit { opacity: 1; stroke-width: 2.6; }
@keyframes hubdash { to { stroke-dashoffset: -80; } }
@media (prefers-reduced-motion: reduce) { .hub-line { animation: none; } }
.hub-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 128px; height: 128px; border-radius: 50%; cursor: pointer; border: 1px solid color-mix(in oklab, var(--cyan) 42%, var(--rule)); background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--cyan) 28%, var(--bg-2)), var(--bg-2) 72%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 0 40px color-mix(in oklab, var(--cyan) 20%, transparent), inset 0 0 28px color-mix(in oklab, var(--cyan) 12%, transparent); transition: transform .25s, box-shadow .25s, border-color .25s; z-index: 3; }
.hub-center::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--cyan) 28%, transparent); animation: hubpulse 3.6s ease-in-out infinite; }
@keyframes hubpulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.09); opacity: .12; } }
.hub-center:hover, .hub-center.is-active { transform: translate(-50%,-50%) scale(1.05); border-color: var(--cyan); box-shadow: 0 0 60px color-mix(in oklab, var(--cyan) 32%, transparent), inset 0 0 32px color-mix(in oklab, var(--cyan) 18%, transparent); }
.hub-center .hc-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.hub-center .hc-title { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
.hub-node { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; width: 116px; z-index: 2; padding: 0; }
.hub-node .hn-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--bg-3); border: 1.5px solid color-mix(in oklab, var(--cyan) 48%, var(--rule)); transition: background .25s, border-color .25s, box-shadow .25s, transform .25s; }
/* §4/§12 legibility fix — the "verschwimmt"-Grund: 13px Inter Sentence-Case on a
   label-chip so text never sits directly on grid/glow. */
.hub-node .hn-label { font-family: var(--display); font-size: 13px; font-weight: 500; letter-spacing: -.005em; text-transform: none; color: var(--ink-2); line-height: 1.2; text-align: center; transition: color .25s, background .25s, border-color .25s; background: color-mix(in oklab, var(--bg-2) 84%, transparent); border: 1px solid var(--rule-soft); padding: 4px 10px; border-radius: 8px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hub-node:hover .hn-label, .hub-node.is-active .hn-label { color: var(--ink); border-color: color-mix(in oklab, var(--cyan) 40%, var(--rule)); }
.hub-node:hover .hn-dot, .hub-node.is-active .hn-dot { background: color-mix(in oklab, var(--cyan) 32%, var(--bg-3)); border-color: var(--cyan); transform: scale(1.15); box-shadow: 0 0 0 4px color-mix(in oklab, var(--cyan) 13%, transparent), 0 0 14px color-mix(in oklab, var(--cyan) 55%, transparent); }
.hub-panels { margin-top: 40px; position: relative; }
.hub-panel { display: none; }
.hub-panel.is-open { display: block; animation: panelIn .4s cubic-bezier(.22,.61,.36,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hub-panel.is-open { animation: none; } }
.pw-flow { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 24px; align-items: center; }
.pw-flow span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 100px; padding: 7px 14px; background: color-mix(in oklab, var(--bg-2) 55%, transparent); position: relative; }
.pw-flow span:not(:last-child)::after { content: "\2192"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); color: var(--ink-4); }
.wm-list .li-h .mk { color: var(--cyan); }
@media (max-width: 680px) {
  .hub { width: 100%; }
  .hub-node { width: 96px; }
  .hub-node .hn-label { font-size: 12px; padding: 3px 7px; }
  .hub-center { width: 104px; height: 104px; }
}

/* hub explicit menu + brain-panel hub (v4.2 fix) */
.hub-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 32px auto 0; }
.hub-mtab { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: color-mix(in oklab, var(--bg-2) 55%, transparent); border: 1px solid var(--rule); border-radius: 100px; padding: 9px 16px; cursor: pointer; transition: color .25s, border-color .25s, background .25s; white-space: nowrap; }
.hub-mtab:hover { color: var(--ink); border-color: color-mix(in oklab, var(--cyan) 38%, var(--rule)); }
.hub-mtab.is-active { color: var(--cyan); border-color: color-mix(in oklab, var(--cyan) 50%, var(--rule)); background: color-mix(in oklab, var(--cyan) 12%, transparent); }
.hub-in-panel { width: min(380px, 100%); margin: 0 auto; }
/* §4 radial→linear: the radial orbit is the desktop selector; the tab bar is hidden
   on desktop (redundant) and becomes the linear selector on mobile (touch ≥44px). */
.hub-menu { display: none; }
@media (max-width: 680px) {
  #hub.hub { display: none; }
  .hub-menu { display: flex; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .hub-mtab { min-height: 44px; padding: 12px 16px; }
}

/* ── final-cta: base rules live ONCE in "CTA Final" above (de-duplicated, Welle 1).
   Only the .kicker addition + the responsive override remain here. ── */
.final-cta .kicker { display: inline-block; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; white-space: nowrap; }
.final-cta .kicker .gradient-text { letter-spacing: 0.22em; }
@media (max-width: 760px) { .final-cta { padding: 54px 24px; margin: 52px 14px; } .final-cta .kicker { white-space: normal; } .final-cta .cta-timeline { grid-template-columns: 1fr; } .final-cta .row { flex-direction: column; align-items: stretch !important; } }

/* ── .lm-body — Typo-System der Rechtstexte. Früher Modal-Inhalt, seit
   2026-06-11 von den eigenständigen Rechtsseiten genutzt (pages/legal.html.j2);
   die Modal-Shell (.legal-modal/.lm-panel/.lm-close) ist entfernt. ── */
.lm-body{padding:6px clamp(24px,4vw,52px) 48px}
.lm-body .eyebrow{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.lm-body h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,40px);letter-spacing:-.025em;line-height:1.06;color:var(--ink);margin:0 0 10px}
.lm-body h2{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink);margin:38px 0 12px;padding-top:22px;border-top:1px solid var(--rule-soft)}
.lm-body h2.legal-title{font-size:clamp(28px,4vw,40px);letter-spacing:-.025em;line-height:1.06;margin:0 0 10px;padding-top:0;border-top:none}
.lm-body h3{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--ink);margin:26px 0 8px}
.lm-body p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--ink-2)}
.lm-body ul,.lm-body ol{margin:0 0 16px;padding-left:22px}
.lm-body li{margin:0 0 7px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.lm-body b{color:var(--ink);font-weight:600}
.lm-body a{color:var(--cyan)}
.lm-body .addr-block{border:1px solid var(--rule);border-radius:14px;padding:18px 22px;background:color-mix(in oklab,var(--bg) 45%,transparent);margin:0 0 16px;color:var(--ink);line-height:1.75;font-style:normal}
.lm-body .kv{line-height:1.9}
.lm-body .kv .k{display:inline-block;min-width:78px;color:var(--ink-4);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.lm-body .tool{border:1px solid var(--rule-soft);border-radius:14px;padding:16px 20px;background:color-mix(in oklab,var(--bg) 40%,transparent);margin:0 0 4px}
.lm-body .tool p{margin:0 0 8px;font-size:14px;line-height:1.58}
.lm-body .tool p:last-child{margin-bottom:0}
.lm-body .tool .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan);display:inline-block;min-width:128px;vertical-align:top}
.lm-body table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:13.5px}
.lm-body th,.lm-body td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.lm-body th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.lm-body td:first-child{color:var(--ink);font-weight:600}
.lm-body td:nth-child(2){white-space:nowrap;color:var(--ink-2)}
.lm-body .note{border-left:2px solid var(--cyan);padding:6px 0 6px 18px;margin:18px 0}
.lm-body .note b{color:var(--ink)}
@media (max-width:680px){.lm-body .tool .lbl{display:block;min-width:0;margin-bottom:1px}.lm-panel{margin:0;max-height:100vh;min-height:100vh;border-radius:0;width:100%}}

/* ════════════════════════════════════════════════════════════════════════
   FORM MODALS — Newsletter / Lead-Magnet / Pilot-Callback (src/partials/modals)
   Same shell mechanics as the legal modals (.legal-modal/.lm-panel) but with a
   form chrome. Dark tier, traqx tokens only, AA contrast, 11px floor.
   ════════════════════════════════════════════════════════════════════════ */
.form-modal{position:fixed;inset:0;z-index:240;display:none}
.form-modal.is-open{display:block}
.fm-backdrop{position:absolute;inset:0;background:rgba(2,4,10,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fm-panel{position:relative;width:min(520px,calc(100% - 32px));margin:6vh auto;max-height:88vh;overflow-y:auto;background:var(--bg-2);border:1px solid var(--rule);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.fm-head{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:14px 14px 0;background:linear-gradient(var(--bg-2),color-mix(in oklab,var(--bg-2) 78%,transparent))}
.fm-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:color-mix(in oklab,var(--bg) 50%,transparent);color:var(--ink-2);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.fm-close:hover{border-color:var(--cyan);color:var(--ink)}
.fm-body{padding:2px clamp(22px,4vw,40px) 36px}
.fm-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:0 0 10px}
.fm-title{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,30px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);margin:0 0 8px}
.fm-lead{margin:0 0 20px;font-size:14.5px;line-height:1.56;color:var(--ink-2)}
.fm-form{display:flex;flex-direction:column;gap:14px}
.fm-row.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fm-field{display:flex;flex-direction:column;gap:6px}
.fm-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fm-form input[type=text],.fm-form input[type=email],.fm-form input[type=tel],.fm-form textarea{width:100%;min-height:44px;font-family:var(--text);font-size:15px;color:var(--ink);background:color-mix(in oklab,var(--bg) 55%,transparent);border:1px solid var(--rule);border-radius:11px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
.fm-form textarea{resize:vertical;min-height:74px;line-height:1.5}
.fm-form input::placeholder,.fm-form textarea::placeholder{color:var(--ink-4)}
.fm-form input:focus,.fm-form textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in oklab,var(--cyan) 22%,transparent)}
.fm-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.fm-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--electric);flex:0 0 auto}
.fm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;pointer-events:none}
.fm-hp *{pointer-events:none}
.fm-error{font-size:13.5px;line-height:1.5;color:var(--ink);border-left:2px solid var(--warn);padding:8px 0 8px 14px;background:color-mix(in oklab,var(--warn) 8%,transparent)}
.fm-success{font-size:14px;line-height:1.55;color:var(--ink);border:1px solid color-mix(in oklab,var(--cyan) 45%,var(--rule));border-radius:12px;padding:14px 16px;background:color-mix(in oklab,var(--cyan) 7%,transparent)}
.fm-success b{display:block;color:var(--ink);margin-bottom:2px}
.fm-submit{justify-content:center;margin-top:2px}
.fm-fallback{margin:2px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center}
.fm-fallback a{color:var(--cyan)}
.fm-next{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0 0 2px;padding:10px 14px;border:1px solid color-mix(in oklab,var(--cyan) 42%,var(--rule));border-radius:12px;background:color-mix(in oklab,var(--cyan) 8%,transparent);font-size:13.5px;font-weight:650;color:var(--cyan);text-align:center}
.fm-next[hidden]{display:none}
.fm-next:hover{border-color:var(--cyan);background:color-mix(in oklab,var(--cyan) 12%,transparent)}
.fm-form.has-submitted .fm-submit{display:none}
.fm-rr{margin:2px 0 18px;padding:13px 15px;border:1px solid var(--rule);border-radius:12px;background:color-mix(in oklab,var(--cyan) 7%,var(--bg-2))}
.fm-rr-k{margin:0 0 9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.fm-rr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.fm-rr li{position:relative;padding-left:23px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.fm-rr li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;background:var(--grad-by)}
.fm-rr li::after{content:"";position:absolute;left:4.5px;top:5px;width:5px;height:3px;border-left:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(-45deg)}
.fm-rr-micro{margin:11px 0 0;font-size:12px;font-style:italic;color:var(--ink-3)}
.fm-soft{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);text-align:center}
.fm-soft p{margin:0 0 7px;font-size:12.5px;color:var(--ink-3)}
.fm-soft-link{font:600 13px/1.3 var(--text);color:var(--cyan);background:transparent;border:0;padding:4px 6px;cursor:pointer;text-decoration:none}
.fm-soft-link:hover{text-decoration:underline;text-underline-offset:3px}
.fm-soft-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
@media (max-width:560px){.fm-row.two{grid-template-columns:1fr}.fm-panel{margin:0;max-height:100vh;min-height:100vh;border-radius:0;width:100%}}

/* ════════════════════════════════════════════════════════════════════════
   BLOG INDEX EXTRAS — subscribe bar (hero glass) + cluster filter chips
   Used by src/pages/blog.html.j2. The card grid reuses .bl-card (insights band).
   ════════════════════════════════════════════════════════════════════════ */
.bsb-tx{display:flex;flex-direction:column;gap:3px}
.bsb-k{font-family:var(--mono);font-size:var(--visual-min-font);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.bsb-t{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink)}
.bsb-d{font-size:13px;color:var(--ink-3)}
.cluster-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:920px;margin:0 auto clamp(24px,3vw,34px)}
.cluster-chip{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-700);background:linear-gradient(180deg,#fff,var(--paper-50) 70%);border:1px solid var(--hairline-light);border-radius:100px;padding:8px 16px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s,background .2s}
.cluster-chip:hover{border-color:color-mix(in oklab,var(--flow-from) 40%,var(--hairline-light))}
.cluster-chip.is-active{color:#fff;background:var(--grad-by);border-color:transparent;box-shadow:var(--elev-1)}
.bl-card[data-hidden]{display:none}
.ins-honesty{max-width:920px;margin:clamp(22px,3vw,30px) auto 0;font-size:12.5px;line-height:1.5;color:var(--ink-500);font-style:italic;text-align:center}

/* ════════════════════════════════════════════════════════════════════════
   SINGLE ARTICLE — paper reading column (src/pages/blog_article.html.j2)
   Light tier (data-theme="ink" host band). ~720px reading width, sticky back,
   cluster badge cyan→blau, prose typo, takeaways, sources, author box, inline
   newsletter card. traqx tokens only, AA, 11px floor.
   ════════════════════════════════════════════════════════════════════════ */
.article-back{position:sticky;top:0;z-index:30;display:block;background:color-mix(in oklab,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule-soft)}
.article-back .shell{display:flex;align-items:center;padding-top:13px;padding-bottom:13px}
.article-back a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .2s}
.article-back a:hover{color:var(--cyan)}
.article-back a .arrow{transform:rotate(180deg);transition:transform .2s}
.art-subscribe{max-width:720px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;padding:13px 20px;border:1px solid var(--rule);border-radius:14px;background:color-mix(in oklab,var(--bg-2) 70%,transparent)}
.art-subscribe .bsb-k{margin-bottom:0}
.art-subscribe-tx{display:flex;flex-direction:column;gap:2px}
.art-subscribe .bsb-t{font-size:15px}
.article-shell{max-width:720px;margin:0 auto;background:linear-gradient(180deg,#fff,var(--paper-50) 80%);border:1px solid var(--hairline-light);border-radius:22px;box-shadow:var(--elev-1);padding:clamp(30px,5vw,56px) clamp(22px,5vw,56px)}
.art-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--grad-by);border-radius:100px;padding:6px 14px;margin:0 0 16px}
.article-shell h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.6vw,42px);line-height:1.1;letter-spacing:-.025em;color:var(--ink-900);margin:0 0 14px}
.art-meta{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-500);margin:0 0 24px}
.art-hero{width:100%;border:1px solid var(--hairline-light);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#0A1530,#0E2348);margin:0 0 28px;box-shadow:var(--elev-1)}
.art-hero .bl-hero{display:block;width:100%;height:auto;aspect-ratio:800/320}
.art-hero-cap{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#C8CDD8;padding:0 16px 14px}
.art-direct{font-family:var(--display);font-weight:400;font-size:clamp(17px,2.2vw,19.5px);line-height:1.55;color:var(--ink-900);border-left:3px solid transparent;border-image:var(--flow-v) 1;padding:2px 0 2px 20px;margin:0 0 30px}
.art-body{font-size:16px;line-height:1.62;color:var(--ink-700)}
.art-body h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.8vw,25px);line-height:1.2;letter-spacing:-.015em;color:var(--ink-900);margin:34px 0 12px}
.art-body h3{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.3;color:var(--ink-900);margin:24px 0 8px}
.art-body p{margin:0 0 15px}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:22px}
.art-body li{margin:0 0 8px;line-height:1.56}
.art-body b,.art-body strong{color:var(--ink-900);font-weight:600}
.art-body a{color:var(--electric);text-decoration:underline;text-underline-offset:2px}
.art-takeaways{margin:32px 0 0;border:1px solid var(--hairline-light);border-radius:16px;padding:22px 24px;background:color-mix(in oklab,var(--flow-from) 5%,#fff)}
.art-takeaways h2{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--ink-900);margin:0 0 12px}
.art-takeaways ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.art-takeaways li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--ink-700)}
.art-takeaways li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--flow);box-shadow:0 0 0 3px color-mix(in oklab,var(--flow-from) 18%,transparent)}
.art-sources{margin:30px 0 0}
.art-sources h2{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-900);margin:0 0 12px}
.art-sources ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.art-sources li{font-size:13.5px;line-height:1.5;color:var(--ink-700);border-left:2px solid var(--hairline-soft);padding-left:14px}
.art-sources .src-l{display:block;font-weight:600;color:var(--ink-900)}
.art-authorbox{margin:30px 0 0;border:1px solid var(--hairline-light);border-radius:16px;padding:20px 22px;background:linear-gradient(180deg,#fff,var(--paper-50) 70%)}
.art-authorbox .ab-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:6px}
.art-authorbox .ab-name{font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-900);margin:0 0 6px}
.art-authorbox p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-700)}
.art-news{margin:28px 0 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;border:1px solid var(--hairline-light);border-radius:16px;padding:20px 24px;background:linear-gradient(180deg,#fff,var(--paper-50) 60%);box-shadow:var(--elev-1)}
.art-news-tx{display:flex;flex-direction:column;gap:3px;max-width:46ch}
.art-news-k{font-family:var(--mono);font-size:var(--visual-min-font);letter-spacing:.1em;text-transform:uppercase;color:var(--electric)}
.art-news h4{margin:0;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-900)}
.art-news p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-700)}
@media (max-width:680px){.article-shell{border-radius:16px}.art-news,.art-subscribe{flex-direction:column;align-items:flex-start}}

/* ── Q4 blog upgrade: TOC sidebar · reading-progress · pull-quote · callouts · branded tables · lead-magnet CTA ── */
/* Article cluster-color top-border (DHC mechanic, cyan→blau). */
.article-shell[data-category]{--cluster-fg:#2F9FE0;border-top:3px solid var(--cluster-fg)}
.article-shell[data-category="pillar"]{--cluster-fg:var(--flow-to)}
.article-shell[data-category="how-to"]{--cluster-fg:var(--flow-from)}
.article-shell[data-category="position-paper"]{--cluster-fg:#2F9FE0}
.article-shell[data-category="regulatory-update"]{--cluster-fg:#1E6FE0}
.article-shell[data-category="case-snapshot"]{--cluster-fg:#5BC8E8}
/* Reading-progress bar. */
.read-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad-by);z-index:60;transition:width .08s linear;pointer-events:none}
/* Two-column layout: sticky TOC + paper card (collapses < 1120px). */
.art-layout{max-width:720px;margin:0 auto}
@media(min-width:1120px){.art-layout{display:grid;grid-template-columns:208px minmax(0,720px);gap:44px;max-width:972px;align-items:start}}
.art-toc{margin:0 0 26px}
@media(min-width:1120px){.art-toc{position:sticky;top:96px;margin:0}}
.art-toc-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);margin:0 0 12px}
.art-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--hairline-light)}
.art-toc li{margin:0}
.art-toc a{display:flex;align-items:center;min-height:44px;font-size:13px;line-height:1.38;color:var(--ink-500);text-decoration:none;padding:6px 0 6px 14px;border-left:2px solid transparent;margin-left:-1px;transition:color .2s,border-color .2s}
.art-toc a:hover{color:var(--ink-900)}
.art-toc a.is-active{color:var(--cyan);font-weight:600;border-image:var(--flow-v) 1}
@media(max-width:1119px){.art-toc{border:1px solid var(--hairline-light);border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,#fff,var(--paper-50) 70%)}.art-toc ol{border-left:none}.art-toc a{padding-left:0;border-left:none;margin-left:0}.art-toc a.is-active{border-image:none}}
/* Pull-quote. */
.art-pq{margin:30px 0;padding:2px 0 2px 22px;border-left:4px solid transparent;border-image:var(--flow-v) 1;font-family:var(--display);font-weight:600;font-size:clamp(20px,2.6vw,25px);line-height:1.34;letter-spacing:-.01em;color:var(--ink-900)}
/* Callouts — note (cyan) · warn (amber, neutral) · tip (blue). */
.art-callout{margin:22px 0;border:1px solid var(--hairline-light);border-left:4px solid var(--cyan);border-radius:14px;padding:15px 18px;background:color-mix(in oklab,var(--flow-from) 6%,#fff)}
.art-callout__t{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink-900);margin:0 0 5px;display:flex;align-items:center;gap:8px}
.art-callout__t svg{width:16px;height:16px;flex:none;color:var(--cyan)}
.art-callout p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-700)}
.art-callout--warn{border-left-color:var(--warn);background:color-mix(in oklab,var(--warn) 8%,#fff)}
.art-callout--warn .art-callout__t svg{color:var(--warn)}
.art-callout--tip{border-left-color:var(--flow-to);background:color-mix(in oklab,var(--flow-to) 6%,#fff)}
.art-callout--tip .art-callout__t svg{color:var(--flow-to)}
/* Branded tables (DHC adapted → cyan→blau). */
.art-body table{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0;font-size:14px;line-height:1.5;border:1px solid var(--hairline-light);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--elev-1)}
.art-body thead{background:var(--grad-by);color:#fff}
.art-body th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:11px 14px;color:#fff}
.art-body td{padding:10px 14px;border-bottom:1px solid var(--hairline-light);vertical-align:top;color:var(--ink-700)}
.art-body tbody tr:nth-child(even){background:color-mix(in oklab,var(--flow-from) 4%,#fff)}
.art-body tbody tr:last-child td{border-bottom:none}
.art-body table strong{color:var(--ink-900)}
/* Lead-magnet CTA box (lm_cta macro). */
.lm-cta{margin:28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;border:1px solid var(--hairline-light);border-radius:18px;padding:21px 24px 21px 26px;background:linear-gradient(180deg,#fff,var(--paper-50) 70%);box-shadow:var(--elev-1);position:relative;overflow:hidden}
.lm-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-by)}
.lm-cta__copy{flex:1 1 280px;min-width:0}
.lm-cta__eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--electric);margin:0 0 6px}
.lm-cta__title{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.28;color:var(--ink-900);margin:0 0 5px}
.lm-cta__sub{font-size:13.5px;line-height:1.5;color:var(--ink-700);margin:0}
.lm-cta__btn{flex:none;white-space:nowrap;min-height:44px}
.lm-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1120px;margin:28px auto 0}
.lm-duo .lm-cta{height:100%;margin:0;align-content:space-between}
@media(max-width:560px){.lm-cta{flex-direction:column;align-items:flex-start}.lm-cta__btn{width:100%;justify-content:center}}
@media(max-width:860px){.lm-duo{grid-template-columns:1fr}}
/* Validation-objection Q&A panel (vqa macro). */
.vqa{max-width:780px;margin:0 auto;border:1px solid var(--hairline-light);border-radius:18px;padding:clamp(20px,2.6vw,28px);background:linear-gradient(180deg,#fff,var(--paper-50) 70%);box-shadow:var(--elev-1)}
.vqa-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--electric);margin:0 0 6px}
.vqa-q{font-family:var(--display);font-weight:600;font-size:clamp(17px,2vw,20px);line-height:1.3;color:var(--ink-900);margin:0 0 18px}
.vqa-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vqa-col{border-radius:12px;padding:14px 16px;border:1px solid var(--hairline-light)}
.vqa-col--yes{background:color-mix(in oklab,var(--flow-from) 5%,#fff)}
.vqa-col--you{background:var(--paper-50)}
.vqa-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px}
.vqa-col--yes .vqa-k{color:var(--flow-from)}
.vqa-col--you .vqa-k{color:var(--ink-500)}
.vqa-col p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-700)}
@media(max-width:560px){.vqa-cols{grid-template-columns:1fr}}
/* Sticky icon back-button (DHC-style floating circle). */
.article-back.is-icon{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:none;pointer-events:none}
.article-back.is-icon .shell{padding-top:0}
.article-back.is-icon a{pointer-events:auto;position:relative;top:12px;width:44px;height:44px;justify-content:center;gap:0;border-radius:50%;background:color-mix(in oklab,var(--bg) 86%,transparent);border:1px solid var(--rule-soft);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--elev-1)}
.article-back.is-icon a .bk-label{position:absolute;left:54px;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;background:color-mix(in oklab,var(--bg) 86%,transparent);padding:6px 12px;border-radius:100px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.article-back.is-icon a:hover .bk-label{opacity:1;transform:translateX(0)}

/* ════════════════════════════════════════════════════════════════════════
   GHOST-VALUES PROOF BAND — INK-on-light  (Visual-Konzept §14 Ink-Drawn Inverse)
   Welle-1 step 3: the FIRST "extrem gut auf White" component. Once approved this
   is the pattern for every INK visual (the 5 mechanisms, ledger, matrices).
   Premium on light = precision + restraint: cool-silver paper, soft elevation
   (no glow), deep-ink text, silver hairlines, ONE saturated ink-flow stroke.
   ════════════════════════════════════════════════════════════════════════ */
.ink-band {
  /* cool silver field with a top-light: the near-white card floats on silver
     (the "silver" lives in the surface tone — cool, not gray-muddy, §14) */
  background: radial-gradient(135% 82% at 50% -12%, #F6F9FC 0%, #E8EDF5 62%);
  padding: clamp(64px, 7vw, 104px) var(--page-pad);
  border-top: 1px solid var(--hairline-soft);
  position: relative;
}
/* Tier-transition (§14 rule 6): the dark section above "lands" into light —
   the cyan glow-flow becomes a crisp ink-stripe. The signature moment. */
.ink-band::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(210px, 42%); height: 3px; border-radius: 0 0 3px 3px;
  background: var(--flow); opacity: .92;
}
.ink-shell { max-width: 920px; margin: 0 auto; }
.ink-head { text-align: center; max-width: 680px; margin: 0 auto clamp(36px, 4vw, 56px); }
.ink-head .eyebrow { color: var(--ink-500); }
.ink-head .eyebrow .dot { background: var(--flow-from); box-shadow: none; }
.ink-head h2 { color: var(--ink-900); margin: 0; }
/* The ONE gradient word — blue-weighted so every glyph stays legible on white
   (§14 rule 3: blaues Ende schwerer; reines Cyan auf Weiß zu blass für Text). */
.ink-flow-word { background: linear-gradient(90deg, #2B82E8 0%, var(--flow-ink-to) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ink-head p { color: var(--ink-700); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; max-width: 60ch; margin: 16px auto 0; }

/* ── The product window (vite-lesson: realistic app-window chrome) ── */
.ghost-card {
  max-width: 680px; margin: 0 auto;
  /* layered cool-silver surface: faint top-light → paper. A light-catch, not a
     metallic gradient (§14 hard-don't). The inset top edge reads as a machined
     silver lip; the silver hairline + soft elevation carry the depth. */
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-50) 58%);
  border: 1px solid var(--hairline-light);
  border-radius: 16px;
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
}
.gc-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  /* cool brushed-light toolbar: top inner highlight + crisp silver groove below */
  background: linear-gradient(180deg, #FCFDFF 0%, #E9EEF6 100%);
  border-bottom: 1px solid var(--hairline-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.6);
}
.gc-dots { display: inline-flex; gap: 7px; flex: none; }
.gc-dots i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FCFDFE 0%, #C3CCDB 78%); box-shadow: inset 0 0 0 1px rgba(10,15,28,.07), inset 0 1px 1px rgba(255,255,255,.85); }
.gc-file { font-family: var(--mono); font-size: 12px; letter-spacing: .01em; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-file b { color: var(--ink-900); font-weight: 500; }
.gc-env { margin-left: auto; flex: none; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .14em; color: var(--ink-500); border: 1px solid var(--hairline-light); border-radius: 6px; padding: 3px 9px; }

.gc-body { padding: clamp(22px, 3vw, 32px); }
.gc-doc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gc-tag { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.gc-tag.current { color: var(--ink-700); background: var(--paper-100); border: 1px solid var(--hairline-light); }
.gc-field { font-family: var(--mono); font-size: 12px; color: var(--ink-500); }
.gc-current { margin: 0 0 18px; font-size: 15px; line-height: 1.62; color: var(--ink-900); }

/* the pending AI suggestion — "ghost": reads as not-yet-committed, stays legible.
   (§3 calls for .55 translucency; legibility is Prio 1, so the "pending" signal is
   carried by the dashed cyan hairline + tint + label, while the text holds ≥AA.) */
.gc-ghost {
  position: relative; margin: 0; padding: 16px 18px 18px 24px;
  border: 1px dashed color-mix(in oklab, var(--flow-from) 60%, var(--hairline-light));
  border-radius: 12px;
  background: color-mix(in oklab, var(--flow-from) 5%, var(--paper-50));
}
.gc-ghost-spine { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--flow-v); }
.gc-ghost-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.gc-tag.ghost { color: var(--electric); background: color-mix(in oklab, var(--flow-from) 14%, #fff); border: 1px solid color-mix(in oklab, var(--flow-from) 45%, transparent); }
.gc-suggestion { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-700); }
.gc-suggestion ins { text-decoration: none; color: var(--ink-900); font-weight: 500; background: color-mix(in oklab, var(--flow-from) 16%, transparent); border-radius: 3px; padding: 0 2px; }

/* Binary source check — pass/unverified, no score-like confidence bar. */
.gc-conf { display: inline-flex; align-items: center; gap: 7px; }
.gc-conf .lab { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .1em; color: var(--ink-500); }
.gc-conf .check { width: 18px; height: 18px; border-radius: 999px; display: inline-grid; place-items: center; background: color-mix(in oklab, var(--flow-from) 18%, #fff); border: 1px solid color-mix(in oklab, var(--flow-from) 52%, transparent); color: var(--electric); font-size: 12px; line-height: 1; }
.gc-conf .val { font-family: var(--mono); font-size: var(--visual-min-font); font-weight: 500; letter-spacing: .05em; color: var(--electric); }

/* Citation peek — cyan edge chip + hover/focus source popover (§3) */
.gc-cite { position: relative; display: inline-block; margin-left: 5px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .01em; color: var(--electric); border-bottom: 1px solid color-mix(in oklab, var(--flow-from) 60%, transparent); cursor: help; white-space: nowrap; }
.gc-cite .src { position: absolute; right: 0; bottom: 150%; width: 248px; padding: 11px 13px; background: var(--ink-900); color: #E7EEF8; border-radius: 9px; font-family: var(--text); font-size: 12px; line-height: 1.5; letter-spacing: normal; text-transform: none; box-shadow: 0 14px 34px rgba(10,15,28,.30); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .18s, transform .18s; z-index: 4; }
.gc-cite .src b { color: #fff; font-weight: 600; }
.gc-cite:hover .src, .gc-cite:focus-visible .src { opacity: 1; transform: translateY(0); }

/* Accept / Reject — accept = the ONE human-decision moment (blue-weighted flow fill) */
.gc-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.gc-friction { margin-right: auto; font-size: 12px; color: var(--ink-500); display: inline-flex; align-items: center; gap: 7px; }
.gc-friction::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--ink-500); transform: rotate(45deg); }
.gc-btn { font-family: var(--display); font-size: 14px; font-weight: 500; padding: 10px 18px; min-height: 44px; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.gc-btn.reject { color: var(--ink-700); background: #fff; border: 1px solid var(--hairline-light); }
.gc-btn.reject:hover { border-color: var(--rule-strong); }
.gc-btn.accept { color: #fff; border: 1px solid transparent; background: linear-gradient(115deg, var(--flow-from) -25%, var(--flow-to) 58%); box-shadow: 0 1px 2px rgba(18,82,245,.22), 0 6px 16px rgba(18,82,245,.16); }
.gc-btn.accept:hover { box-shadow: 0 1px 2px rgba(18,82,245,.28), 0 10px 22px rgba(18,82,245,.22); }

/* Friction-as-a-feature: reject opens a mandatory reason (height transition, no shift) */
.gc-reason { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease-reveal); margin-top: 0; }
.gc-reason.open { grid-template-rows: 1fr; margin-top: 16px; }
.gc-reason > div { overflow: hidden; }
.gc-reason label { display: block; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 7px; }
.gc-reason textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--text); font-size: 14px; line-height: 1.55; color: var(--ink-900); background: #fff; border: 1px solid var(--hairline-light); border-radius: 10px; padding: 10px 12px; }
.gc-reason textarea:focus { outline: none; border-color: color-mix(in oklab, var(--flow-from) 60%, var(--hairline-light)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--flow-from) 18%, transparent); }

/* accepted end-state */
.ghost-card.is-accepted .gc-ghost { border-style: solid; border-color: color-mix(in oklab, var(--flow-to) 30%, var(--hairline-light)); background: color-mix(in oklab, var(--flow-to) 5%, var(--paper-50)); }
.ghost-card.is-accepted .gc-tag.ghost { color: var(--ink-700); background: var(--paper-100); border-color: var(--hairline-light); }

.gc-honesty { margin: 0; padding: 14px clamp(22px,3vw,32px) 20px; font-size: var(--visual-min-font); font-style: italic; color: var(--ink-500); border-top: 1px solid var(--hairline-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-honesty .demo-id { font-family: var(--mono); font-style: normal; letter-spacing: .04em; color: var(--ink-700); }

@media (max-width: 680px) {
  .gc-actions { justify-content: stretch; }
  .gc-btn { flex: 1 1 auto; text-align: center; }
  .gc-friction { width: 100%; margin: 0 0 2px; }
  .gc-cite .src { width: 200px; }
}

/* ════════════════════════════════════════════════════════════════════════
   v1.17 HOMEPAGE-DIÄT — neue Bänder (§22): Proof-Strip · Ergebnisse · Produkt-
   Shot · Use-Case-Orbit. Rhythmus: DARK Hero → INK Proof/Ergebnisse → DARK
   Produkt-Shot → INK Router → DARK Orbit → DARK Final.
   ════════════════════════════════════════════════════════════════════════ */
.ps-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 760px; margin: 0 auto clamp(24px,3vw,36px); }
.ps-stat { text-align: center; background: linear-gradient(180deg,#fff,var(--paper-50) 60%); border: 1px solid var(--hairline-light); border-radius: 14px; box-shadow: var(--elev-1); padding: 22px 16px; }
.ps-num { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(34px,5vw,52px); letter-spacing: -.03em; line-height: 1; background: linear-gradient(120deg,#2B82E8,var(--flow-ink-to) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-num .ps-star { -webkit-text-fill-color: var(--ink-500); color: var(--ink-500); font-size: 18px; vertical-align: super; }
.ps-lab { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-700); line-height: 1.35; }
.ps-rows { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ps-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--hairline-soft); }
.ps-rlab { flex: 0 0 130px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chip { font-family: var(--mono); font-size: 12px; color: var(--ink-700); background: var(--paper-100); border: 1px solid var(--hairline-light); border-radius: 7px; padding: 5px 11px; }
.ps-disclaimer { max-width: 820px; margin: 18px auto 0; font-size: var(--visual-min-font); font-style: italic; color: var(--ink-500); line-height: 1.5; }

.erg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 920px; margin: 0 auto; }
.erg-card { position: relative; background: linear-gradient(180deg,#fff,var(--paper-50) 60%); border: 1px solid var(--hairline-light); border-radius: 16px; box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9); padding: 26px 24px 22px 28px; overflow: hidden; }
.erg-spine { position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--flow-v); opacity: .9; }
.erg-metric { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: clamp(28px,3.6vw,40px); letter-spacing: -.03em; line-height: 1; color: var(--ink-900); }
.erg-arrow { color: var(--flow-from); font-family: var(--mono); font-weight: 400; padding: 0 2px; }
.erg-lab { margin: 0 0 12px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-500); }
.erg-detail { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-700); }
.erg-foot { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: clamp(24px,3vw,34px) auto 0; }
.erg-honesty { font-size: var(--visual-min-font); font-style: italic; color: var(--ink-500); }
.erg-link { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--electric); display: inline-flex; align-items: center; gap: 6px; }
.erg-link .arrow { font-family: var(--mono); }
.ps-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 880px; margin: 0 auto clamp(28px,3vw,40px); }
.ps-tcard { background: linear-gradient(180deg,#fff,var(--paper-50) 60%); border: 1px solid var(--hairline-light); border-radius: 16px; box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9); padding: 24px 22px; }
.ps-ticon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in oklab,var(--flow-from) 12%,var(--paper-100)); border: 1px solid var(--hairline-light); color: var(--electric); margin-bottom: 14px; }
.ps-tcard h4 { margin: 0 0 7px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink-900); }
.ps-tcard p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
@media (max-width: 820px) { .ps-stats, .erg-grid, .ps-trust { grid-template-columns: 1fr; } }
.ws-value-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  max-width: 1060px;
}
.ws-value-shell { max-width: 1100px; }
.ws-value-grid .erg-card {
  grid-column: span 2;
  min-height: 230px;
}
.ws-value-grid .erg-card:nth-child(4) { grid-column: 2 / span 2; }
.ws-value-grid .erg-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 1050px) {
  .ws-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .ws-value-grid .erg-card,
  .ws-value-grid .erg-card:nth-child(4) { grid-column: auto; }
  .ws-value-grid .erg-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; max-width: 370px; }
}
@media (max-width: 820px) {
  /* Workspace value cards become an interactive scroll-stack on mobile: each card
     sticks under the header and the next slides over it — clearer than a flat list. */
  .ws-value-grid { display: block; }
  .ws-value-grid .erg-card {
    grid-column: auto; max-width: none; min-height: 0;
    position: sticky; margin: 0 0 22px;
    box-shadow: 0 -20px 48px rgba(5,8,16,.62), var(--elev-1);
    transition: transform .2s ease;
  }
  /* Larger stagger → each pinned card peeks ~22px, so the deck/overlap is clearly visible. */
  .ws-value-grid .erg-card:nth-child(1) { top: 78px; }
  .ws-value-grid .erg-card:nth-child(2) { top: 100px; }
  .ws-value-grid .erg-card:nth-child(3) { top: 122px; }
  .ws-value-grid .erg-card:nth-child(4) { top: 144px; }
  .ws-value-grid .erg-card:nth-child(5) { top: 166px; margin-bottom: 0; }
}

/* ───── Mobile refinements (Daniel feedback 2026-06) ───── */
/* Two-up grids (Reifegrad „heute live / in Vorbereitung", Suite-Maturity) collapse to one
   column on phones. Driven by a class so a media query can override it (inline style can't). */
.erg-grid--duo { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) {
  .erg-grid--duo { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr !important; }   /* pilot buying-committee grid */
}
@media (max-width: 560px) {
  /* Proof strip: tidy vertical layout on phones — trust items one per line, the two badge
     groups stacked, each group's label above its centered chips (was a wrapping jumble).
     !important because the base .ts-* rules sit later in source order. */
  /* Redesigned 2026-06-07: trust points as centered badge pills, standards as a tight
     wrapping chip cluster (not one-per-row), group label on its own centered line. */
  .trust-strip .ink-shell { max-width: 366px; }
  .ts-trust { flex-direction: column; align-items: stretch; gap: 10px !important; margin-bottom: 24px; }
  .ts-titem { justify-content: center; gap: 10px; padding: 13px 16px; background: color-mix(in oklab, #fff 65%, transparent); border: 1px solid var(--hairline-light); border-radius: 14px; font-size: 14.5px; }
  .ts-rows { flex-direction: column; gap: 22px !important; }
  .ts-group { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
  .ts-glab { width: 100%; text-align: center; margin: 0; }
  .ps-chip { font-size: 12.5px; padding: 7px 13px; }
  /* Impressum/legal: the boxed address was double-indented vs. the surrounding headings */
  .lm-body .addr-block { padding: 14px 16px; }
  /* Wide tables (blog articles, legal) scroll instead of squeezing on a phone */
  .art-body table, .lm-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 820px) and (max-height: 640px) {
  /* Short / landscape phones: don't sticky-stack the workspace cards (too little vertical room) */
  .ws-value-grid .erg-card { position: static; }
}
@media (max-width: 980px) {
  /* Hero value-bullets: left-align the text inside the centered column (centered bullets read awkwardly) */
  .hero-bullets { text-align: left; margin-left: auto; margin-right: auto; width: -moz-fit-content; width: fit-content; max-width: 380px; }
}

/* ── Slim Trust-Band (osapiens-Band-Stil: Mitgliedschaften + „Gebaut für", keine Kunden-Logos) ── */
.trust-strip { padding: clamp(34px,4vw,54px) 0; background: var(--paper-base); border-top: 1px solid var(--hairline-soft); }
.ts-eyebrow { text-align: center; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 22px; }
.ts-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0 auto 20px; max-width: 940px; }
.ts-titem { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--ink-900); }
.ts-titem svg { color: var(--electric); flex: none; }
.ts-rows { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; max-width: 960px; margin: 0 auto; }
.ts-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.ts-glab { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-right: 4px; }
.ts-div { width: 1px; height: 20px; background: var(--hairline-light); }
.ts-note { text-align: center; font-size: var(--visual-min-font); font-style: italic; color: var(--ink-500); margin: 18px auto 0; max-width: 740px; line-height: 1.5; }
@media (max-width: 720px) { .ts-div { display: none; } }

/* ── Band: Insights / Blog (§22 Band 8, INK light) ── */
.ins-band { background: radial-gradient(135% 82% at 50% -12%, #F6F9FC 0%, #E8EDF5 62%); }
.ins-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; max-width: 920px; margin: 0 auto clamp(26px,3vw,38px); }
.ins-head h2 { margin: 0; }
.ins-head .eyebrow { color: var(--ink-500); }
.ins-head .eyebrow .dot { background: var(--flow-from); box-shadow: none; }
.ins-all { white-space: nowrap; }
.ins-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 920px; margin: 0 auto; }
.ins-sub { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-700); max-width: 52ch; }
.ins-card { display: flex; flex-direction: column; background: linear-gradient(180deg,#fff,var(--paper-50) 65%); border: 1px solid var(--hairline-light); border-radius: 16px; box-shadow: var(--elev-1); overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; }
.ins-card:hover { box-shadow: var(--elev-2); transform: translateY(-3px); border-color: color-mix(in oklab,var(--flow-from) 30%,var(--hairline-light)); }
.ins-thumb { position: relative; height: 112px; display: flex; align-items: flex-end; padding: 14px; overflow: hidden; }
.ins-thumb.t1 { background: linear-gradient(135deg,#1252F5,var(--flow-from)); }
.ins-thumb.t2 { background: linear-gradient(140deg,var(--bg-2),var(--flow-to)); }
.ins-thumb.t3 { background: linear-gradient(135deg,var(--electric),#5BA3E0); }
.ins-thumb::before { content:""; position:absolute; inset:0; background: radial-gradient(150px 90px at 82% -20%, rgba(255,255,255,.28), transparent 70%); }
.ins-thumb-ic { position:absolute; top:14px; right:14px; color: rgba(255,255,255,.9); }
.ins-cat { position: relative; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(8,14,28,.28); border: 1px solid rgba(255,255,255,.32); border-radius: 7px; padding: 4px 10px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ins-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ins-card h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.36; letter-spacing: -.01em; color: var(--ink-900); }
.ins-ex { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.ins-meta { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .02em; color: var(--ink-500); }
.ins-news-k { display: inline-block; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .1em; text-transform: uppercase; color: var(--electric); margin-bottom: 6px; }
.ins-btn .arrow { font-family: var(--mono); }
/* ── DH-Konzept Blog-Cards: Format-Badge + code-native Illustration (dunkler Header) + Body ── */
.bl-card { display: flex; flex-direction: column; background: linear-gradient(180deg,#fff,var(--paper-50) 65%); border: 1px solid var(--hairline-light); border-radius: 18px; box-shadow: var(--elev-1); overflow: hidden; transition: box-shadow .25s, transform .25s, border-color .25s; }
.bl-card:hover { box-shadow: var(--elev-2); transform: translateY(-3px); border-color: color-mix(in oklab,var(--flow-from) 30%,var(--hairline-light)); }
.bl-card.is-soon-card { cursor: default; }
.bl-card.is-soon-card:hover { box-shadow: var(--elev-1); transform: none; border-color: var(--hairline-light); }
.ins-all.is-soon { color: var(--ink-500); cursor: default; }
/* Cluster-color map (DHC mechanic, in cyan→blau) — drives card accent-border, badge tint, article top-border. */
.bl-card[data-category]{--cluster-fg:#2F9FE0}
.bl-card[data-category="pillar"]{--cluster-fg:var(--flow-to)}
.bl-card[data-category="how-to"]{--cluster-fg:var(--flow-from)}
.bl-card[data-category="position-paper"]{--cluster-fg:#2F9FE0}
.bl-card[data-category="regulatory-update"]{--cluster-fg:#1E6FE0}
.bl-card[data-category="case-snapshot"]{--cluster-fg:#5BC8E8}
.bl-head { position: relative; height: 158px; padding: 0; overflow: hidden; border-bottom: 2px solid var(--cluster-fg,rgba(124,208,232,.5)); background: #0A1530; }
.bl-head.h1 { background: linear-gradient(160deg,#0A1530,#0E2348); }
.bl-head.h2c { background: linear-gradient(160deg,#0C1A2E,#102A4D); }
.bl-head.h3c { background: linear-gradient(160deg,#0A1428,#0F2A52); }
.bl-head .bl-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bl-head::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(8,17,31,.44) 0%, rgba(8,17,31,0) 24%, rgba(8,17,31,0) 54%, rgba(8,17,31,.82) 100%); }
.bl-top { position: absolute; top: 12px; left: 14px; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bl-badge { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 100px; padding: 5px 12px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bl-badge.howto { color: #0A1530; background: #fff; border-color: #fff; }
.bl-ed { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9FE4F4; text-shadow: 0 1px 4px rgba(8,17,31,.6); }
.bl-cap { position: absolute; left: 15px; right: 15px; bottom: 11px; z-index: 2; display: block; font-family: var(--display); font-weight: 500; font-size: 12px; color: #EAF1F6; line-height: 1.35; text-shadow: 0 1px 6px rgba(8,17,31,.72); }
.bl-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bl-body h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.32; letter-spacing: -.015em; color: var(--ink-900); }
.bl-ex { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.bl-meta { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .02em; color: var(--ink-500); }
.bl-art { color: var(--electric); }
@media (max-width: 820px) { .ins-grid { grid-template-columns: 1fr; } }
/* Newsletter signup — light, airy (DHC-style): no heavy card, just a top divider + inline form. */
.ins-news { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; max-width: 920px; margin: clamp(30px,3.4vw,46px) auto 0; padding: clamp(24px,2.8vw,32px) 0 0; border-top: 1px solid var(--hairline-light); }
.ins-news-tx { flex: 1 1 320px; }
.ins-news h4 { margin: 0 0 4px; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink-900); }
.ins-news p { margin: 0; font-size: 13.5px; color: var(--ink-700); max-width: 52ch; line-height: 1.5; }
.ins-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 0 1 auto; }
.ins-input { flex: 1 1 210px; max-width: 280px; }
.ins-news-ok.fm-success { flex-basis: 100%; margin: 6px 0 0; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13px; font-weight: 500; color: var(--cyan); line-height: 1.5; }
.fm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; pointer-events: none !important; }
.fm-hp * { pointer-events: none !important; }
.ins-form input { min-height: 44px; font-family: var(--text); font-size: 14px; color: var(--ink-900); background: #fff; border: 1px solid var(--hairline-light); border-radius: 10px; padding: 11px 14px; min-width: 200px; }
.ins-form input:focus { outline: none; border-color: color-mix(in oklab,var(--flow-from) 60%,var(--hairline-light)); box-shadow: 0 0 0 3px color-mix(in oklab,var(--flow-from) 16%,transparent); }
.ins-btn { font-family: var(--display); font-weight: 500; font-size: 14px; color: #fff; background: linear-gradient(115deg,var(--flow-from) -25%,var(--flow-to) 58%); border: 1px solid transparent; border-radius: 10px; padding: 11px 20px; cursor: pointer; white-space: nowrap; }
.ins-btn[disabled],
.ins-btn.is-disabled { opacity: .58; cursor: not-allowed; filter: saturate(.7); }
@media (max-width: 820px) { .ins-grid { grid-template-columns: 1fr; } }

.produkt-shot-band { padding: clamp(64px,7vw,104px) 0; border-top: 1px solid var(--rule-soft); }
.ps2-head { text-align: center; max-width: 680px; margin: 0 auto clamp(36px,4vw,52px); }
/* Compact blog page header — slim so the post grid is visible above the fold. */
.blog-hero-compact { padding: clamp(28px,3vw,46px) 0 clamp(22px,2.4vw,32px); }
.blog-hero-compact .ps2-head { margin: 0 auto; }
.blog-hero-compact .ps2-head .h2 { font-size: clamp(28px,3vw,40px); line-height: 1.08; margin: 6px 0 10px; }
.blog-hero-compact .ps2-head .kicker { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); margin: 0 auto; max-width: 56ch; }
.shot-window { max-width: 660px; margin: 0 auto; background: linear-gradient(180deg,var(--bg-2),var(--bg) 80%); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.sw-chrome { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: color-mix(in oklab,var(--bg-3) 70%,transparent); border-bottom: 1px solid var(--rule); }
.sw-dots { display: inline-flex; gap: 7px; }
.sw-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-strong); }
.sw-file { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.sw-env { margin-left: auto; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .14em; color: var(--ink-4); border: 1px solid var(--rule); border-radius: 6px; padding: 3px 9px; }
.sw-body { padding: clamp(22px,3vw,30px); display: flex; flex-direction: column; gap: 0; }
.sw-step { display: flex; align-items: flex-start; gap: 16px; padding: 4px 0; }
.sw-badge { flex: 0 0 104px; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; text-align: center; }
.sw-badge.gen { color: var(--cyan); border: 1px solid color-mix(in oklab,var(--cyan) 40%,var(--rule)); background: color-mix(in oklab,var(--cyan) 8%,transparent); }
.sw-badge.ver { color: #fff; background: linear-gradient(115deg,var(--flow-from) -20%,var(--flow-to) 60%); border: 1px solid transparent; }
.sw-badge.aud { color: var(--ink-2); border: 1px solid var(--rule); background: color-mix(in oklab,var(--bg-3) 60%,transparent); }
.sw-step p { margin: 5px 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sw-flowline { width: 2px; height: 22px; margin: 2px 0 2px 51px; background: var(--flow-v); opacity: .7; border-radius: 2px; }
.sw-cap { margin: 0; padding: 12px clamp(22px,3vw,30px) 18px; font-size: var(--visual-min-font); font-style: italic; color: var(--ink-4); border-top: 1px solid var(--rule-soft); }
@media (max-width: 560px) { .sw-step { flex-direction: column; gap: 6px; } .sw-flowline { display: none; } .sw-badge { flex: none; align-self: flex-start; } }

/* ── Band 4: Core Principles explorer (osapiens-Stil: Tab-Rail + Stage) ── */
.cp-band { padding: clamp(64px,7vw,104px) 0; border-top: 1px solid var(--rule-soft); }
.cp-explorer { display: grid; grid-template-columns: 300px 1fr; gap: 30px; max-width: 1020px; margin: 0 auto; align-items: start; }
.cp-rail { display: flex; flex-direction: column; gap: 6px; }
.cp-tab { display: flex; align-items: flex-start; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; transition: background .2s, border-color .2s; }
.cp-tab:hover { background: color-mix(in oklab,var(--bg-2) 50%,transparent); }
.cp-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cp-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 8px; }
.cp-tab.is-active { background: color-mix(in oklab,var(--cyan) 9%,var(--bg-2)); border-color: color-mix(in oklab,var(--cyan) 35%,var(--rule)); }
.cp-tnum { font-family: var(--mono); font-size: var(--visual-min-font); color: var(--ink-4); padding-top: 2px; }
.cp-tab.is-active .cp-tnum { color: var(--cyan); }
.cp-tx { display: flex; flex-direction: column; gap: 2px; }
.cp-tt { font-family: var(--display); font-weight: 500; font-size: 15px; color: var(--ink-2); }
.cp-tab.is-active .cp-tt { color: var(--ink); }
.cp-td { font-size: 12px; color: var(--ink-4); }
.cp-stage { position: relative; min-height: 340px; }
.cp-panel { display: none; }
.cp-panel.is-open { display: block; animation: panelIn .35s var(--ease-reveal); }
.cp-panel h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(22px,2.6vw,30px); letter-spacing: -.02em; color: var(--ink); }
.cp-panel > p { margin: 0 0 22px; font-size: 16px; line-height: 1.62; color: var(--ink-2); max-width: 58ch; }
.cp-panel em { font-style: normal; color: var(--cyan); }
.cp-vis { background: linear-gradient(180deg,var(--bg-2),var(--bg) 85%); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.cp-flowrow { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.cp-flowrow + .cp-flowrow { border-top: 1px solid var(--rule-soft); }
.cp-frtxt { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.cp-ghost, .cp-cite, .cp-det { display: flex; flex-direction: column; gap: 12px; }
.cp-gv-cur, .cp-gv-new { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); padding: 12px 14px; border-radius: 10px; }
.cp-gv-cur { background: color-mix(in oklab,var(--bg-3) 50%,transparent); border: 1px solid var(--rule); }
.cp-gv-new { position: relative; padding-left: 18px; border: 1px dashed color-mix(in oklab,var(--cyan) 50%,var(--rule)); background: color-mix(in oklab,var(--cyan) 7%,transparent); }
.cp-gv-spine { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--flow-v); }
.cp-gv-tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.cp-gv-tag.pend { color: var(--cyan); }
.cp-gv-new ins { text-decoration: none; color: var(--ink); font-weight: 500; background: color-mix(in oklab,var(--cyan) 18%,transparent); border-radius: 3px; padding: 0 3px; }
.cp-gv-act { display: inline-flex; gap: 8px; margin-left: 6px; }
.cp-gv-x { color: var(--ink-3); border: 1px solid var(--rule); border-radius: 7px; padding: 2px 8px; font-size: 12px; }
.cp-gv-ok { color: #fff; background: linear-gradient(115deg,var(--flow-from) -20%,var(--flow-to) 60%); border-radius: 7px; padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.cp-h-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cp-h-friction { font-size: 12px; color: var(--ink-3); }
.cp-h-btn { font-size: 13px; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 9px; padding: 7px 14px; white-space: nowrap; }
.cp-h-lab { display: block; font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px; }
.cp-h-field { font-size: 13px; color: var(--ink-4); background: color-mix(in oklab,var(--bg-3) 45%,transparent); border: 1px solid color-mix(in oklab,var(--cyan) 30%,var(--rule)); border-radius: 10px; padding: 11px 13px; box-shadow: 0 0 0 3px color-mix(in oklab,var(--cyan) 12%,transparent); }
.cp-c-claim { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); padding: 12px 14px; border-radius: 10px; background: color-mix(in oklab,var(--bg-3) 50%,transparent); border: 1px solid var(--rule); }
.cp-c-claim.warn { border-color: color-mix(in oklab,var(--warn) 45%,var(--rule)); }
.cp-c-chip { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--cyan); border-bottom: 1px solid color-mix(in oklab,var(--cyan) 55%,transparent); white-space: nowrap; }
.cp-c-chip.unv { color: var(--warn); border: 1px dashed color-mix(in oklab,var(--warn) 55%,var(--rule)); border-radius: 6px; padding: 2px 7px; }
.cp-d-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-radius: 10px; background: color-mix(in oklab,var(--bg-3) 50%,transparent); border: 1px solid var(--rule); }
.cp-d-lab { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); flex: 0 0 150px; }
.cp-d-bar { display: inline-flex; gap: 3px; }
.cp-d-bar i { width: 7px; height: 13px; border-radius: 2px; background: var(--rule); }
.cp-d-bar i.on { background: var(--cyan); }
.cp-d-val { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--cyan); }
.cp-d-check { font-size: 13px; color: var(--ink-2); }
.cp-d-check.pass { color: var(--cyan); }
.cp-d-check.fail { color: var(--warn); }
@media (max-width: 760px) {
  .cp-explorer { grid-template-columns: 1fr; gap: 20px; }
  .cp-stage { min-height: 0; }
  /* Rail reads as a deliberate premium selector, not a flat text list */
  .cp-rail { gap: 9px; }
  .cp-tab {
    position: relative; align-items: center; gap: 13px; padding: 14px 16px 14px 17px;
    border-radius: 13px; overflow: hidden;
    border: 1px solid color-mix(in oklab,var(--rule) 70%,transparent);
    background: linear-gradient(180deg, color-mix(in oklab,var(--bg-2) 58%,transparent), color-mix(in oklab,var(--bg) 86%,transparent));
    transition: border-color .22s var(--ease-reveal), background .22s var(--ease-reveal), box-shadow .22s var(--ease-reveal);
  }
  /* crisp cyan edge-accent that lights up on the active tab */
  .cp-tab::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--flow-v);
    transition: height .28s var(--ease-reveal);
  }
  .cp-tab.is-active {
    border-color: color-mix(in oklab,var(--cyan) 50%,var(--rule));
    background: linear-gradient(180deg, color-mix(in oklab,var(--cyan) 14%,var(--bg-2)), color-mix(in oklab,var(--bg) 90%,transparent));
    box-shadow: 0 1px 0 color-mix(in oklab,var(--cyan) 24%,transparent) inset,
                0 10px 30px rgba(0,0,0,.32),
                0 0 26px color-mix(in oklab,var(--cyan) 16%,transparent);
  }
  .cp-tab.is-active::before { height: calc(100% - 18px); }
  .cp-tnum { padding-top: 0; font-size: 12px; }
  .cp-tab.is-active .cp-tnum { text-shadow: 0 0 12px color-mix(in oklab,var(--cyan) 55%,transparent); }
  .cp-tt { font-size: 15.5px; }
  .cp-td { font-size: 12px; }
  /* deeper glass on the visual frame */
  .cp-vis {
    padding: 18px; border-radius: 15px;
    background: linear-gradient(180deg, color-mix(in oklab,var(--bg-2) 92%,transparent), var(--bg) 92%);
    border-color: color-mix(in oklab,var(--cyan) 14%,var(--rule));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 1px 0 color-mix(in oklab,var(--cyan) 12%,transparent) inset, 0 16px 40px rgba(0,0,0,.42);
  }
  /* GVM badges: crisper, equal-width, premium chips */
  .cp-flowrow { gap: 13px; padding: 11px 0; }
  .cp-vis .sw-badge { flex: 0 0 96px; padding: 7px 9px; box-shadow: 0 2px 8px rgba(0,0,0,.28); }
  .cp-vis .sw-badge.gen { box-shadow: 0 0 0 1px color-mix(in oklab,var(--cyan) 16%,transparent) inset, 0 2px 8px rgba(0,0,0,.28); }
  .cp-vis .sw-badge.ver { box-shadow: 0 3px 14px color-mix(in oklab,var(--flow-to) 36%,transparent); }
  /* ghost-value diff: tighter, more product-like */
  .cp-gv-cur, .cp-gv-new { padding: 13px 15px; }
  .cp-gv-new { padding-left: 19px; box-shadow: 0 0 0 1px color-mix(in oklab,var(--cyan) 14%,transparent), 0 8px 22px rgba(0,0,0,.3); }
  .cp-gv-ok { box-shadow: 0 3px 12px color-mix(in oklab,var(--flow-to) 38%,transparent); }
  /* citation chips: ✓ verified glows cyan, ⚠ unverified reads as calm slate flag */
  .cp-c-claim { padding: 13px 15px; }
  .cp-c-chip { color: var(--cyan); border-bottom-color: color-mix(in oklab,var(--cyan) 65%,transparent); text-shadow: 0 0 10px color-mix(in oklab,var(--cyan) 35%,transparent); }
  .cp-c-claim.warn {
    border-color: color-mix(in oklab,var(--warn) 50%,var(--rule));
    background: color-mix(in oklab,var(--warn) 7%,color-mix(in oklab,var(--bg-3) 50%,transparent));
  }
  .cp-c-chip.unv { padding: 3px 8px; background: color-mix(in oklab,var(--warn) 10%,transparent); }
  /* deterministic pass/fail: accent-tinted rows + status chip → crisp product UI */
  .cp-d-row { padding: 12px 14px; flex-wrap: nowrap; }
  .cp-d-lab { flex: 1 1 auto; min-width: 0; }
  .cp-d-row:has(.cp-d-check.pass) { border-color: color-mix(in oklab,var(--cyan) 32%,var(--rule)); background: color-mix(in oklab,var(--cyan) 7%,color-mix(in oklab,var(--bg-3) 50%,transparent)); }
  .cp-d-row:has(.cp-d-check.fail) { border-color: color-mix(in oklab,var(--warn) 38%,var(--rule)); background: color-mix(in oklab,var(--warn) 8%,color-mix(in oklab,var(--bg-3) 50%,transparent)); }
  .cp-d-check { margin-left: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
  .cp-d-check.pass {
    background: color-mix(in oklab,var(--cyan) 14%,transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab,var(--cyan) 42%,transparent) inset, 0 0 12px color-mix(in oklab,var(--cyan) 18%,transparent);
  }
  .cp-d-check.fail {
    background: color-mix(in oklab,var(--warn) 13%,transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab,var(--warn) 48%,transparent) inset;
  }
  /* HITL approve field: clearer focus-ring depth */
  .cp-h-field { box-shadow: 0 0 0 3px color-mix(in oklab,var(--cyan) 14%,transparent), 0 6px 18px rgba(0,0,0,.28); }
  .cp-h-btn { background: linear-gradient(180deg, color-mix(in oklab,var(--bg-3) 60%,transparent), transparent); }
}
/* ── Agent Library explorer uses (reuses cp-explorer rail/stage) + Custom-Agents grid ── */
.ag-uses { display: flex; flex-direction: column; gap: 9px; }
.ag-uses-lab { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.ag-use { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); padding: 10px 13px; border-radius: 9px; background: color-mix(in oklab, var(--bg-3) 45%, transparent); border: 1px solid var(--rule-soft); }
.ag-note { max-width: 72ch; margin: 24px auto 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.ca-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 18px; max-width: 900px; margin: 8px auto 0; align-items: stretch; justify-content: center; }
.ca-card { min-height: 178px; padding: 20px 20px 22px; border-radius: 14px; border: 1px solid var(--hairline-light); background: linear-gradient(180deg, #fff, var(--paper-50) 70%); box-shadow: var(--elev-1); }
.ca-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--ink-900); margin: 0 0 6px; }
.ca-desc { font-size: 13px; line-height: 1.5; color: var(--ink-700); margin: 0; }
.ca-benefits { list-style: none; padding: 0; margin: 30px auto 0; max-width: 780px; display: flex; flex-direction: column; gap: 11px; }
.ca-benefits li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.ca-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--flow-from); font-weight: 700; }
.ca-benefits b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 900px) { .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; } }
@media (max-width: 560px) { .ca-grid { grid-template-columns: 1fr; } }

.orbit-band { padding: clamp(70px,8vw,120px) 0; border-top: 1px solid var(--rule-soft); position: relative; overflow: hidden; }
.orbit-head { text-align: center; max-width: 640px; margin: 0 auto clamp(40px,5vw,64px); }
.orbit-head h2 { color: var(--ink); }
.uco { position: relative; max-width: 720px; margin: 0 auto; }
/* Desktop: full donut wheel (generated SVG, _uco_wheel.html) */
.uco-wheel-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.uco-wheel { width: 100%; height: auto; display: block; overflow: visible; }
.uco-seg { stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.uco-seg.live { fill: color-mix(in oklab, var(--cyan) 24%, var(--bg-2)); stroke: var(--cyan); stroke-width: 1.6; }
.uco-seg.soon { fill: color-mix(in oklab, var(--bg-3) 50%, var(--bg)); stroke: var(--rule); stroke-dasharray: 3 4; }
.uco-seg.dev { fill: color-mix(in oklab, var(--cyan) 13%, var(--bg-2)); stroke: var(--cyan); stroke-width: 1.4; stroke-dasharray: 5 4; }
.uco-seg.dev:hover { fill: color-mix(in oklab, var(--cyan) 20%, var(--bg-2)); }
.uco-slabel.dev { fill: color-mix(in oklab, var(--cyan) 72%, var(--ink-3)); }
.uco-wheel a { cursor: pointer; }
.uco-wheel a:hover .uco-seg.live { fill: color-mix(in oklab, var(--cyan) 26%, var(--bg-2)); stroke: var(--cyan); }
.uco-slabel { font-family: var(--display); font-weight: 600; font-size: 14px; pointer-events: none; }
.uco-slabel.live { fill: var(--cyan); }
.uco-slabel.soon { fill: var(--ink-3); }
.uco-slabel.is-secondary { font-size: 12px; opacity: .84; }
.uco-slabel.soon.is-secondary { display: none; }
.uco-arclabel { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; fill: var(--ink-4); text-transform: uppercase; }
.uco-engine-ring { fill: none; stroke: url(#ucoLive); stroke-width: 1.4; stroke-dasharray: 2 6; opacity: .45; animation: hubdash 22s linear infinite; }
.uco-engine-dot { fill: #6FE0F2; stroke: var(--bg); stroke-width: 2; }
/* foreground: bright cyan + dark halo (paint-order) so the engine labels sit ON TOP */
.uco-engine-lab { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; fill: #6FE0F2; text-transform: uppercase; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.uco-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 40%, color-mix(in oklab,var(--cyan) 18%,var(--bg-2)), var(--bg) 76%); border: 1px solid color-mix(in oklab,var(--cyan) 32%,var(--rule)); box-shadow: 0 0 0 8px color-mix(in oklab,var(--cyan) 6%,transparent), 0 0 50px color-mix(in oklab,var(--cyan) 24%,transparent); z-index: 2; pointer-events: none; }
.uco-core .ucc-k { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.uco-core .ucc-t { font-family: var(--display); font-weight: 500; font-size: 21px; color: var(--ink); letter-spacing: -.01em; }
.uco-mobile-core,
.uco-connector { display: none; }
.uco-clabel { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: color-mix(in oklab,var(--bg-2) 82%,transparent); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 11px; display: inline-block; margin-bottom: 10px; }
.uco-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.uco-chip { font-family: var(--display); font-weight: 500; font-size: 13px; padding: 6px 12px; border-radius: 100px; white-space: nowrap; border: 1px solid var(--rule); }
a.uco-chip.live { color: var(--cyan); background: color-mix(in oklab,var(--cyan) 12%,transparent); border-color: color-mix(in oklab,var(--cyan) 45%,var(--rule)); transition: background .2s, border-color .2s; }
a.uco-chip.live:hover { background: color-mix(in oklab,var(--cyan) 22%,transparent); border-color: var(--cyan); }
.uco-chip.soon { color: var(--ink-4); background: color-mix(in oklab,var(--bg-3) 40%,transparent); border-style: dashed; cursor: default; }
.uco-chip.dev { color: color-mix(in oklab, var(--cyan) 78%, var(--ink-3)); background: color-mix(in oklab,var(--cyan) 7%,transparent); border-style: dashed; border-color: color-mix(in oklab,var(--cyan) 45%,var(--rule)); transition: background .2s, border-color .2s; }
.uco-chip.dev:hover { background: color-mix(in oklab,var(--cyan) 16%,transparent); border-color: var(--cyan); }
.uco-chip.soon::after { content: " · bald"; font-family: var(--mono); font-size: 11px; opacity: .8; }
html[lang="en"] .uco-chip.soon::after { content: " · soon"; }
.uco-list { display: none; }
@media (max-width: 980px) {   /* swap the wheel for the cluster list whenever the hero stacks (was 760px → wheel looked cramped on large phones/tablets) */
  .uco-wheel-wrap { display: none; }
  .uco-list { display: flex; flex-direction: column; align-items: stretch; gap: 16px; max-width: 430px; margin: 0 auto; }
  .uco-mobile-core { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 128px; min-height: 82px; margin: 0 auto; border-radius: 28px; text-align: center; background: radial-gradient(circle at 50% 35%, color-mix(in oklab,var(--cyan) 20%,var(--bg-2)), var(--bg) 78%); border: 1px solid color-mix(in oklab,var(--cyan) 34%,var(--rule)); box-shadow: 0 0 0 7px color-mix(in oklab,var(--cyan) 6%,transparent), 0 0 42px color-mix(in oklab,var(--cyan) 22%,transparent); }
  .uco-mobile-core .ucc-k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
  .uco-mobile-core .ucc-t { font-family: var(--display); font-weight: 500; font-size: 23px; line-height: 1; color: var(--ink); letter-spacing: 0; }
  .uco-connector { display: block; width: 1px; height: 28px; margin: -4px auto -2px; background: linear-gradient(180deg, color-mix(in oklab,var(--cyan) 70%,transparent), color-mix(in oklab,var(--grad-by) 48%,transparent) 72%, transparent); opacity: .7; }
  .uco-lcluster { position: relative; text-align: left; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in oklab,var(--bg-2) 58%,transparent), color-mix(in oklab,var(--bg) 84%,transparent)); border: 1px solid color-mix(in oklab,var(--rule) 78%,transparent); }
  .uco-clabel { margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-size: 11px; letter-spacing: .12em; }
  .uco-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; justify-content: stretch; }
  .uco-chip { display: flex; align-items: center; min-height: 60px; width: 100%; padding: 11px 12px; border-radius: 10px; white-space: normal; font-size: clamp(12px, 3.35vw, 13px); line-height: 1.22; letter-spacing: 0; }
  a.uco-chip.live { color: var(--ink); background: linear-gradient(180deg, color-mix(in oklab,var(--cyan) 13%,var(--bg-2)), color-mix(in oklab,var(--bg) 92%,transparent)); border-color: color-mix(in oklab,var(--cyan) 48%,var(--rule)); box-shadow: inset 0 1px 0 color-mix(in oklab,var(--cyan) 22%,transparent); }
  a.uco-chip.live:hover { background: linear-gradient(180deg, color-mix(in oklab,var(--cyan) 18%,var(--bg-2)), color-mix(in oklab,var(--bg) 88%,transparent)); border-color: var(--cyan); }
  .uco-chip.soon { align-items: flex-start; flex-direction: column; gap: 8px; color: var(--ink-4); background: color-mix(in oklab,var(--bg-3) 38%,transparent); border-color: color-mix(in oklab,var(--ink-4) 32%,var(--rule)); }
  .uco-chip.soon::after { content: "bald"; display: inline-flex; align-items: center; align-self: flex-start; min-height: 18px; padding: 3px 7px; border-radius: 999px; font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); background: color-mix(in oklab,var(--bg-2) 70%,transparent); border: 1px dashed color-mix(in oklab,var(--ink-4) 36%,var(--rule)); opacity: .9; }
  html[lang="en"] .uco-chip.soon::after { content: "soon"; }
}
@media (max-width: 380px) {
  .uco-list { max-width: 100%; }
  .uco-lcluster { padding: 10px; }
  .uco-chips { gap: 7px; }
  .uco-chip { min-height: 58px; padding: 10px; }
}
@media (max-width: 760px) {
  #hero .hero-uco {
    max-width: 100%;
    width: 100%;
  }
  #hero .hero-uco .uco-list {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    width: auto;
    max-width: none;
    margin: 0 calc(var(--page-pad) * -1);
    padding: 4px var(--page-pad) 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--page-pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #hero .hero-uco .uco-list::-webkit-scrollbar { display: none; }
  #hero .hero-uco .uco-mobile-core,
  #hero .hero-uco .uco-connector {
    display: none;
  }
  #hero .hero-uco .uco-lcluster {
    flex: 0 0 84%;
    min-height: 190px;
    padding: 16px;
    border-radius: 18px;
    scroll-snap-align: start;
  }
  #hero .hero-uco .uco-chips {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  #hero .hero-uco .uco-chip {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* v1.17 Hero — Explore-Routing-Link unter den CTAs (Navigation, nie Conversion). */
.hero-explore { margin: 14px 0 0; font-size: 13px; }
.hero-explore a { color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.hero-explore a:hover { color: var(--ink); }
.hero-explore .arrow { font-family: var(--mono); }

/* ════════════════════════════════════════════════════════════════════════
   "EINE PLATTFORM. ZWEI EINSTIEGE." — Produkt-Router  (Notion §21.10)
   Zwei gleichwertige Türen (Workspace / Suite), Routing-CTAs (NICHT Conversion).
   Helle INK-Insel; reuse des bestätigten Silver-/INK-Musters.
   ════════════════════════════════════════════════════════════════════════ */
.two-doors {
  background: radial-gradient(135% 82% at 50% -12%, #F6F9FC 0%, #E8EDF5 62%);
  padding: clamp(64px, 7vw, 100px) var(--page-pad);
  border-top: 1px solid var(--hairline-soft);
}
.two-doors .ink-head { margin-bottom: clamp(30px, 3.5vw, 46px); }
.doors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 880px; margin: 0 auto; }
.door {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--paper-50) 60%);
  border: 1px solid var(--hairline-light); border-radius: 16px;
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9);
  padding: 28px 28px 24px; overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.door:hover { box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.9); transform: translateY(-2px); border-color: color-mix(in oklab, var(--flow-from) 32%, var(--hairline-light)); }
.door::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: var(--flow-v); opacity: .92; }
.door-name { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--ink-900); margin: 0 0 5px; }
.door-lead { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 14px; }
.door-body { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.door-price { font-family: var(--mono); font-size: 12px; color: var(--ink-700); margin: 0 0 20px; }
.door-cta { margin-top: auto; align-self: flex-start; font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--electric); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 6px; }
.door-cta .arrow { font-family: var(--mono); transition: transform .2s; }
.door:hover .door-cta .arrow { transform: translateX(3px); }
/* Roadmap doors (route_status == 'soon'): present, clearly not yet clickable. */
.door.is-soon-door { cursor: default; }
.door.is-soon-door::before { background: var(--rule); opacity: .5; }
.door.is-soon-door:hover { box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9); transform: none; border-color: var(--hairline-light); }
.door.is-soon-door .door-cta { color: var(--ink-4); font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
/* Text-link bridges to a soon route: muted, non-interactive. */
.text-link.is-soon { color: var(--ink-4); cursor: default; }
.text-link.is-soon:hover { color: var(--ink-4); gap: 6px; }
@media (max-width: 760px) { .doors-grid { grid-template-columns: 1fr; } }

/* §6/P0 readability — reading sections flipped to a light tier paint a SOLID light
   surface (override the dark .band tint + transparent default) so the dark page
   never shows through. A thin top flow-stripe marks the dark→light transition. */
.sec[data-theme="paper"], .sec[data-theme="ink"],
.sec.band[data-theme="paper"], .sec.band[data-theme="ink"] { background: var(--bg); position: relative; }
.sec[data-theme="paper"]::after, .sec[data-theme="ink"]::after {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: min(200px, 40%); height: 3px; border-radius: 0 0 3px 3px; background: var(--flow); opacity: .85;
}

/* §4 Brain-Hub panel bodies → INK-on-light: dark orbit above, light proof card
   below (the Tier-Kontrast on-screen, §5). One light card holds the active panel. */
.hub-panels[data-theme="ink"] { background: var(--paper-50); border: 1px solid var(--hairline-light); border-radius: 20px; padding: clamp(28px, 4vw, 52px); box-shadow: var(--elev-1); }

/* §4 double-hub → ONE orbit: the in-panel mini-orbit (#brainHub) duplicates the
   main #hub orbit above. Collapse the brain panel to a single text column so only
   one orbit is ever shown. (JS for #brainHub is guarded — harmless when hidden.) */
.hub-panel[data-panel="brain"] .bb-split { grid-template-columns: 1fr; max-width: 840px; }
.hub-panel[data-panel="brain"] .bb-split > div:last-child { display: none; }

/* ── Nav dropdown "Plattform ▾" (§21.10). Desktop only (.topbar nav hides < ~960px). ── */
.topbar .nav-dd { position: relative; display: inline-flex; }
.topbar .nav-dd .nav-caret { font-size: 11px; opacity: .75; transition: transform .2s; }
.topbar .nav-dd:hover .nav-caret, .topbar .nav-dd:focus-within .nav-caret { transform: rotate(180deg); }
.topbar .nav-dd-panel {
  position: absolute; top: calc(100% + 12px); left: -8px; min-width: 322px;
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in oklab, var(--bg-2) 90%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--rule); border-radius: 14px; padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s; z-index: 60;
}
.topbar .nav-dd-panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } /* hover bridge */
.topbar .nav-dd:hover .nav-dd-panel, .topbar .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.topbar .nav-dd-panel a, .topbar .nav-dd-panel button, .topbar .nav-dd-panel .is-soon { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; background: none; text-transform: none; letter-spacing: normal; }
.topbar .nav-dd-panel button { width: 100%; appearance: none; cursor: pointer; text-align: left; font: inherit; }
.topbar .nav-dd-panel a:hover, .topbar .nav-dd-panel button:hover { background: color-mix(in oklab, var(--cyan) 9%, transparent); border-color: color-mix(in oklab, var(--cyan) 22%, var(--rule)); }
.topbar .nav-dd-panel a .ndl, .topbar .nav-dd-panel button .ndl { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--ink); }
.topbar .nav-dd-panel a .ndd, .topbar .nav-dd-panel button .ndd { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .01em; color: var(--ink-3); }
.topbar .nav-dd-heading { margin: 8px 12px 2px; padding-top: 9px; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
/* ── Mobile-Menü: Burger + Slide-Down-Panel (≤1100px; Desktop-Nav blendet dort aus) ── */
.nav-burger { display: none; flex-direction: column; gap: 4px; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-burger span { width: 17px; height: 1.8px; background: var(--ink-2); border-radius: 2px; transition: transform .26s cubic-bezier(.4,0,.2,1), opacity .18s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 1px; margin: 0; padding: 10px var(--page-pad) 22px; border-top: 1px solid var(--rule-soft); background: color-mix(in oklab, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); animation: mn-in .28s cubic-bezier(.16,1,.3,1); }
@keyframes mn-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mobile-nav .mn-actions { display: grid; gap: 10px; margin: 4px 0 22px; }
.mobile-nav .mn-action-primary { width: 100%; justify-content: center; min-height: 50px; }
.mobile-nav .mn-action-secondary {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 18px;
  border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font-weight: 600;
  background: color-mix(in oklab, var(--bg-2) 82%, transparent);
}
.mobile-nav .mn-action-secondary .arrow { margin-left: 7px; }
.mobile-nav .mn-action-secondary:hover, .mobile-nav .mn-action-secondary:active { border-color: color-mix(in oklab, var(--cyan) 46%, var(--rule-strong)); background: var(--bg-3); }
.mobile-nav .mn-sections { border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.mobile-nav .mn-section + .mn-section { border-top: 1px solid var(--rule-soft); }
.mobile-nav .mn-toggle {
  appearance: none; border: 0; background: none; width: 100%; min-height: 58px; padding: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav .mn-toggle-icon { font-family: var(--display); font-size: 21px; line-height: 1; color: var(--cyan); transition: transform .18s; }
.mobile-nav .mn-section.is-open .mn-toggle { color: var(--ink-2); }
.mobile-nav .mn-section.is-open .mn-toggle-icon { transform: rotate(45deg); }
.mobile-nav .mn-panel { display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 0 0 14px; }
.mobile-nav .mn-section.is-open .mn-panel { display: flex; }
/* ── 'soon' (unbuilt) links — greyed, non-clickable (F03) ── */
.is-soon { color: var(--ink-4); cursor: default; }
.soon-badge { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .04em; text-transform: uppercase; color: color-mix(in oklab, var(--cyan) 75%, var(--ink-3)); margin-left: 6px; }
.foot-col .is-soon { color: var(--ink-4); }
.topbar .nav-dd-panel .is-soon .ndl { font-family: var(--display); font-weight: 500; font-size: 14px; color: var(--ink-3); }
.topbar .nav-dd-panel .is-soon .ndd { font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .01em; color: var(--ink-4); }
.mobile-nav .is-soon { display: block; text-align: left; padding: 11px 12px; color: var(--ink-4); font-family: var(--display); font-weight: 500; font-size: 16px; }
/* ── Hash anchors clear the sticky topbar (F10) ── */
section[id] { scroll-margin-top: 88px; }
@media (max-width: 700px) { section[id] { scroll-margin-top: 72px; } }
.mobile-nav .mn-panel a, .mobile-nav .mn-panel button { text-align: left; font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--ink-2); padding: 11px 12px; border-radius: 11px; border: 1px solid transparent; transition: background .16s, color .16s; }
.mobile-nav .mn-panel button { appearance: none; width: 100%; background: none; cursor: pointer; }
.mobile-nav .mn-panel a:hover, .mobile-nav .mn-panel a:active, .mobile-nav .mn-panel button:hover, .mobile-nav .mn-panel button:active { color: var(--ink); background: var(--bg-3); }
.mobile-nav .mn-panel a.is-active { color: var(--ink); background: var(--bg-3); border-color: var(--rule); }
.mobile-nav .mn-heading { display: block; margin: 8px 12px 2px; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
/* Explicit close ✕ inside the full-screen menu (independent of the burger). */
.mobile-nav .mn-close { position: absolute; top: 16px; right: var(--page-pad); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--rule); border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobile-nav .mn-close:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--bg-3); }

/* ── Use-Case-Hero-Journey — domänenspezifische Milestone-Leiste (DHC-Technik, traqx-Design) ── */
.hero-visual--journey { display: flex; align-items: center; }
.uc-journey { width: 100%; background: var(--paper-50); border: 1px solid var(--hairline-soft); border-radius: 16px; padding: clamp(20px,2.4vw,30px) clamp(18px,2.4vw,28px); box-shadow: var(--elev-2); }
.uc-journey__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(22px,2.6vw,30px); font-family: var(--mono); font-size: var(--visual-min-font); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-700); }
.uc-journey__cap-sep { color: var(--hairline-light); }
.uc-journey__cap-sub { color: var(--flow-from); }
.uc-journey__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--uc-steps,5),1fr); position: relative; align-items: start; }
.uc-journey__track::before { content: ""; position: absolute; top: 9px; left: calc(50% / var(--uc-steps,5)); right: calc(50% / var(--uc-steps,5)); height: 2px; border-radius: 999px; z-index: 0; background: var(--flow); }
.uc-journey__step { position: relative; z-index: 1; display: flex; justify-content: center; }
.uc-journey__node { display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; margin: 0; padding: 4px 2px 2px; font: inherit; color: inherit; cursor: pointer; width: 100%; border-radius: 10px; -webkit-tap-highlight-color: transparent; transition: transform .2s; }
.uc-journey__node:hover { transform: translateY(-1px); }
.uc-journey__node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.uc-journey__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--paper-100); border: 3px solid var(--flow-from); box-shadow: 0 1px 4px rgba(18,82,245,.10); transition: box-shadow .2s, transform .2s, border-color .2s; }
.uc-journey__node:hover .uc-journey__dot { border-color: var(--cyan); }
.uc-journey__node.is-active .uc-journey__dot { transform: scale(1.16); box-shadow: 0 0 0 4px color-mix(in oklab, var(--cyan) 16%, transparent), 0 3px 12px color-mix(in oklab, var(--cyan) 42%, transparent); }
.uc-journey__node:hover .uc-journey__label { color: var(--ink-700); }
.uc-journey__node.is-active .uc-journey__label { color: var(--electric); font-weight: 600; }
.uc-journey__step:nth-child(n+3) .uc-journey__dot { border-color: var(--cyan-deep); }
.uc-journey__step:nth-child(n+5) .uc-journey__dot { border-color: var(--electric); }
.uc-journey__dot--check { width: 22px; height: 22px; background: var(--flow); border-color: transparent; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px color-mix(in oklab, var(--cyan) 30%, transparent); }
.uc-journey__dot--check svg { width: 12px; height: 12px; }
.uc-journey__label { font-family: var(--mono); font-size: var(--visual-min-font); font-weight: 500; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-500); text-align: center; }
.uc-journey__label--final { color: var(--electric); font-weight: 600; }
.uc-journey__reveal { margin: clamp(18px,2.2vw,26px) 0 0; padding-top: clamp(13px,1.7vw,17px); border-top: 1px solid var(--hairline-light); display: flex; align-items: baseline; gap: 10px; min-height: 3.1em; }
.uc-journey__reveal-k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--flow-from); flex: none; transform: translateY(-1px); }
.uc-journey__reveal-t { font-family: var(--display); font-weight: 500; font-size: clamp(13.5px,1.55vw,15px); line-height: 1.45; color: var(--ink-900); transition: opacity .18s; }
/* ── Value slider — product-page carousel of up to 3 "massive value" graphics (dark premium). ── */
.vslider { max-width: 1080px; margin: 0 auto; }
.vslider__head { text-align: center; max-width: 680px; margin: 0 auto clamp(26px,3vw,40px); }
.vslider__viewport { overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vslider__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.vslide { flex: 0 0 100%; min-width: 100%; display: grid; grid-template-columns: 1fr; gap: clamp(20px,3vw,40px); align-items: center; padding: 4px; }
@media (min-width: 880px) { .vslide { grid-template-columns: 0.82fr 1.18fr; } }
.vslide__copy { padding: 0 clamp(4px,2vw,18px); }
.vslide__k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--cyan); margin: 0 0 12px; }
.vslide__h { font-family: var(--display); font-weight: 600; font-size: clamp(22px,2.8vw,30px); line-height: 1.16; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.vslide__s { font-size: clamp(14px,1.6vw,16px); line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 46ch; }
.vslide__gfx { width: 100%; }
.vslide__gfx svg { width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(124,208,232,.10), 0 0 48px rgba(64,144,250,.12); }
.vslider__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: clamp(22px,3vw,34px); }
.vslider__arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in oklab, var(--bg-2) 70%, transparent); border: 1px solid var(--rule); color: var(--ink-2); transition: border-color .2s, color .2s, transform .2s; }
.vslider__arrow:hover { border-color: var(--cyan); color: var(--ink); transform: translateY(-1px); }
.vslider__arrow svg { width: 18px; height: 18px; }
.vslider__dots { display: flex; gap: 4px; align-items: center; }
.vslider__dot {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  cursor: pointer; background: transparent; position: relative;
}
.vslider__dot::before {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 9px; height: 9px; transform: translate(-50%,-50%);
  border-radius: 50%; background: var(--rule);
  transition: background .25s, width .25s;
}
.vslider__dot.is-active::before { width: 26px; border-radius: 100px; background: var(--grad-by); }
.vslider__dot:focus-visible, .vslider__arrow:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Hero-integrated value carousel — the value graphics sit IN the product-page header (hero visual slot). */
.hero-vslider { max-width: 100%; }
.hero-vslider .vslider__viewport { overflow: hidden; }
.hero-vslider .vslider__track {
  display: grid;
  transform: none !important;
}
.hero-vslider .vslide {
  grid-area: 1 / 1;
  width: 100%;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
.hero-vslider .vslide[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hero-vslide { display: block; padding: 2px; }
.hero-vslide__gfx svg { width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, var(--cyan) 16%, transparent); }
.hero-vslide__cap { margin: 16px 4px 0; font-family: var(--display); font-weight: 500;
  font-size: 15px; line-height: 1.4; color: var(--ink-2); min-height: 2.8em; }
.hero-vslide__k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 7px; }
.hero-vslider__nav { margin-top: 14px; justify-content: flex-start; gap: 14px; }
.hero-vslider .vslider__arrow { width: 44px; height: 44px; }
.hero-vslider .vslider__arrow svg { width: 16px; height: 16px; }

/* ── Bespoke per-domain use-case hero graphics (uc_graphic) — DARK premium theme (matches the platform wheel). ── */
.uc-gfx { width: 100%; margin: 0; border-radius: 18px; padding: clamp(12px,1.4vw,16px);
  background: radial-gradient(620px 280px at 76% 18%, rgba(124,208,232,.16), transparent 62%), linear-gradient(180deg,#08111f 0%,#050810 92%);
  border: 1px solid rgba(124,208,232,.22);
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(124,208,232,.08), 0 0 48px rgba(64,144,250,.10); }
.uc-gfx__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(14px,1.8vw,20px); font-family: var(--mono); font-size: var(--visual-min-font); text-transform: uppercase; letter-spacing: .16em; color: #8B92A4; }
.uc-gfx__cap b { color: var(--flow-from); font-weight: 500; }
.uc-gfx__cap .sep { color: rgba(124,208,232,.3); }
.uc-gfx__svg { width: 100%; height: auto; display: block; overflow: visible; }
.uc-hot { cursor: pointer; }
.uc-hot__tap { fill: transparent; stroke: none; pointer-events: all; }
.uc-hot__shape { transition: fill .2s, stroke .2s, opacity .2s, transform .2s; }
.uc-hot:hover .uc-hot__shape, .uc-hot.is-active .uc-hot__shape { stroke: #7CD0E8; }
.uc-hot.is-active .uc-hot__shape { filter: drop-shadow(0 2px 10px rgba(124,208,232,.5)); }
.uc-hot__lab { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; fill: #C8CDD8; paint-order: stroke; stroke: #050810; stroke-width: 3.5px; stroke-linejoin: round; transition: fill .2s; }
.uc-hot:hover .uc-hot__lab, .uc-hot.is-active .uc-hot__lab { fill: #FFFFFF; }
.uc-hot:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.uc-gfx__reveal { margin: clamp(14px,1.8vw,20px) 0 0; padding-top: clamp(12px,1.6vw,16px); border-top: 1px solid rgba(124,208,232,.18); display: flex; align-items: baseline; gap: 10px; min-height: 3em; }
.uc-gfx__reveal-k { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--flow-from); flex: none; }
.uc-gfx__reveal-t { font-family: var(--display); font-weight: 500; font-size: clamp(13.5px,1.5vw,15px); line-height: 1.45; color: #F2F4F8; }
.uc-gfx__stage { width: 100%; }
.uc-gfx__swipe { display: none; }
/* ── Use-case hero graphic — responsive (iPad bigger; iPhone = swipeable evidence card) ── */
@media (min-width: 641px) and (max-width: 980px) {
  .hero-visual--journey { max-width: 700px; }   /* iPad/tablet: large, fully legible */
}
@media (max-width: 640px) {
  .hero-visual--journey { max-width: 100%; }
  .uc-gfx { padding: 14px; position: relative; }
  .uc-gfx__stage {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; border-radius: 10px;
    scrollbar-width: none;
  }
  .uc-gfx__stage::-webkit-scrollbar { display: none; }
  .uc-gfx__stage .uc-gfx__svg { min-width: 640px; scroll-snap-align: start; }  /* 0.89 scale on iPhone — readability floor */
  .uc-gfx__swipe { display: block; text-align: right; margin: 8px 2px 0 0;
    font-family: var(--mono); font-size: var(--visual-min-font); letter-spacing: .14em; text-transform: uppercase; color: #8B92A4; }
}
@media (max-width: 720px) { .uc-journey__cap { letter-spacing: .10em; } .uc-journey__track::before { top: 7px; } .uc-journey__dot { width: 14px; height: 14px; border-width: 2px; } .uc-journey__dot--check { width: 18px; height: 18px; } .uc-journey__dot--check svg { width: 10px; height: 10px; } .uc-journey__label { font-size: 11px; letter-spacing: .06em; } }
@media (max-width: 460px) { .uc-journey__track { grid-template-columns: repeat(3,1fr); gap: 24px 0; } .uc-journey__track::before { display: none; } }
/* ── P5 audit polish (Chrome 3-res pass) ── */
.topbar .btn.primary { white-space: nowrap; }
@media (max-width: 560px) { .topbar-inner { gap: 16px; } .topbar .actions { gap: 8px; } .topbar .actions > .btn.primary { display: none; } }
.topbar .nav-dd-panel { transition-duration: .13s; }
@media (max-width: 760px) { .article-back .shell { padding-top: 8px; padding-bottom: 8px; } }
.ink-band + .ink-band::before { display: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1200; background: var(--electric); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; font-family: var(--display); font-weight: 600; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 0; outline: 2px solid #fff; outline-offset: 2px; }
/* ── Comparison matrix (.wmx) — workspace #vergleich band; salvaged from parked rebuild.
   Token-based so it adapts to the paper theme; accent uses --royal (cool-silver rule).
   Stacks to cards below 860px so it never clips/overflows on tablet/mobile. ── */
.wmx-wrap { overflow-x:auto; margin:clamp(22px,2.6vw,34px) 0 0; -webkit-overflow-scrolling:touch; }
.wmx { width:100%; border-collapse:collapse; font-size:13px; min-width:680px; }
.wmx th, .wmx td { padding:11px 12px; text-align:left; border-bottom:1px solid var(--rule); vertical-align:top; }
.wmx thead th { font-family:var(--mono); font-size:var(--visual-min-font); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--rule-strong); }
.wmx .wmx-crit { font-weight:600; color:var(--ink); font-family:var(--display); font-size:13px; max-width:210px; }
.wmx .wmx-own { background:color-mix(in oklab,var(--royal) 8%,transparent); }
.wmx thead .wmx-own { color:var(--royal); }
.wmx td { color:var(--ink-2); overflow-wrap:anywhere; }
@media (max-width:860px){
  .wmx, .wmx thead, .wmx tbody, .wmx tr, .wmx th, .wmx td { display:block; }
  .wmx { min-width:0; }
  .wmx thead { display:none; }
  .wmx tr { border:1px solid var(--rule); border-radius:12px; padding:8px 10px; margin-bottom:12px; }
  .wmx th.wmx-crit { border:0; padding:4px 6px 8px; font-size:15px; max-width:none; }
  .wmx td { border:0; padding:5px 6px; display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
  .wmx td::before { content:attr(data-col); font-family:var(--mono); font-size:var(--visual-min-font); letter-spacing:.03em; color:var(--ink-4); flex:0 0 42%; }
  .wmx td.wmx-own { border-radius:8px; }
}
/* ── Vision / fit band (salvaged from parked rebuild) — used by home #vision and Suite #champion ── */
.fit-band { text-align: center; max-width: 880px; }
.fit-band__h { margin: 0 auto; max-width: 22ch; }
.vision-band { text-align: center; max-width: 880px; margin-left: auto; margin-right: auto; }
.vision-band__line { margin: 0 auto; max-width: 62ch; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2.3vw, 28px); letter-spacing: -.01em; line-height: 1.34; }
.vision-band__sub { margin: 16px auto 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.vision-band .fit-band__h { margin: 0 auto 18px; }
/* Founder credential line under the shared trust band (Daniel: "gebaut von Compliance-/GxP-Experten"). */
.ts-founder { margin: 18px auto 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
/* Workspace use-cases: 5 cluster cards — flex-centered so the 3+2 wrap stays balanced (not a lopsided grid). */
.uc-cluster-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 980px; margin: 0 auto; }
.uc-cluster-grid .erg-card { flex: 1 1 280px; max-width: 300px; }
@media (max-width: 620px) { .uc-cluster-grid .erg-card { flex-basis: 100%; max-width: none; } }