/* =============================================================
   PEACOCK MARKETING v3 — DARK STARTUP MODERN
   Inspired by Linear, Vercel, Resend, Anthropic — peacock palette
   on a near-black canvas with aurora mesh gradients.
   ============================================================= */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------- */
:root {
  /* Dark surfaces */
  --bg: #050810;            /* near-black with teal undertone */
  --bg-card: #0c111c;        /* card surface */
  --bg-elevated: #131929;    /* elevated surface */
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-hover: rgba(255, 255, 255, 0.05);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-bright: rgba(255, 255, 255, 0.18);

  /* Foreground text — high contrast on dark */
  --fg: #f5f5f7;
  --fg-soft: #d4d4d8;
  --fg-mute: #9a9aa3;
  --fg-faint: #5d5d68;

  /* Peacock brand accents (vibrant on dark) */
  --accent: #2db5b9;         /* teal bright */
  --accent-hover: #4dcfd3;
  --accent-dim: rgba(45, 181, 185, 0.15);
  --gold: #f0cc8c;
  --gold-warm: #e6b76a;
  --gold-dim: rgba(240, 204, 140, 0.12);
  --emerald: #5cd699;
  --plum: #b478d8;
  --rose: #ff8a8a;

  /* Gradients */
  --gradient-text: linear-gradient(120deg, #2db5b9 0%, #4dcfd3 30%, #f0cc8c 70%, #f5f5f7 100%);
  --gradient-card: linear-gradient(135deg, rgba(45, 181, 185, 0.08), rgba(240, 204, 140, 0.04));
  --gradient-iridescent: conic-gradient(from 200deg at 50% 50%, #2db5b9, #5cd699, #f0cc8c, #b478d8, #2db5b9);

  /* CTA */
  --signal-bg: #ffffff;
  --signal-fg: #050810;
  --signal-hover: #f5f5f7;

  /* Type */
  --font-display: 'Geist', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans: var(--font-display);
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  /* Type scale (more confident) */
  --t-tiny: 0.75rem;
  --t-small: 0.8125rem;
  --t-body: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --t-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  --t-h3: clamp(1.375rem, 1rem + 1.3vw, 1.875rem);
  --t-h2: clamp(2.25rem, 1.4rem + 4vw, 4rem);
  --t-h1: clamp(3rem, 1.5rem + 7vw, 7rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --col-max: 80rem;
  --col-narrow: 58rem;
  --measure: 36rem;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 32px -8px rgba(0, 0, 0, 0.5), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.6), 0 12px 24px -8px rgba(0, 0, 0, 0.3);
  --shadow-glow-teal: 0 0 60px -10px rgba(45, 181, 185, 0.4);
  --shadow-glow-gold: 0 0 60px -10px rgba(240, 204, 140, 0.3);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'cv02' 1;
  scroll-behavior: smooth;
  scrollbar-color: var(--border-strong) var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

html { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  min-height: 100vh;
  /* Use hidden (not clip) — hidden establishes a containing scroll
     context so descendant scroll containers (install__tabs, <pre>) do
     not push the document's scrollWidth past the viewport. */
  overflow-x: hidden;
  position: relative;
}

/* Aurora — fixed mesh gradient behind everything */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 30% at 20% 0%, rgba(45, 181, 185, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 25% at 80% 5%, rgba(240, 204, 140, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 90%, rgba(180, 120, 216, 0.08) 0%, transparent 60%);
  filter: blur(40px);
  opacity: 0.85;
  animation: aurora 30s linear infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate(-2%, -1%); }
  100% { transform: translate(2%, 1%); }
}

/* Grain texture for organic feel */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color 200ms var(--ease); }
button { font: inherit; }

::selection { background: var(--accent); color: var(--bg); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: 0;
  background: var(--fg); color: var(--bg);
  padding: var(--space-3) var(--space-5);
  font-size: var(--t-small); font-weight: 500;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease);
  z-index: 100;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   --------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); line-height: 1.05; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.02em; }

em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.005em;
}

/* Gradient-text helper used on key words in headlines.
   Replaces the v2 Instrument-Serif-italic treatment — gradient sans
   reads modern-startup (Linear/Vercel) instead of editorial. */
.grad {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
  /* Inherit weight + font from the parent heading so the gradient word
     keeps the same typographic rhythm as the surrounding text. */
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.section-head { max-width: var(--col-narrow); margin: 0 auto var(--space-8); }
.section-head--center { text-align: center; }
.section-head h2 { margin-top: var(--space-2); }
.section-lede {
  margin: var(--space-4) 0 0;
  max-width: 38rem;
  font-size: var(--t-lead);
  color: var(--fg-mute);
  line-height: 1.55;
  font-weight: 400;
}
.section-head--center .section-lede { margin-inline: auto; }

/* ---------------------------------------------------------------
   4. CTAs
   --------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--t-body);
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 200ms var(--ease);
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
}
/* Tiny phones: let primary CTA wrap so the phase-pin doesn't clip. */
@media (max-width: 400px) {
  .hero__ctas .cta {
    white-space: normal;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.cta svg { width: 22px; height: 12px; transition: transform 200ms var(--ease); }
.cta:hover svg { transform: translateX(3px); }
.cta--sm { padding: var(--space-2) var(--space-4); font-size: var(--t-small); }
.cta--primary {
  background: var(--signal-bg);
  color: var(--signal-fg);
  border-color: var(--signal-bg);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), var(--shadow-glow-teal);
}
.cta--primary:hover {
  background: var(--signal-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 60px -10px rgba(45, 181, 185, 0.6);
}
.cta--ghost {
  background: var(--bg-glass);
  color: var(--fg);
  border-color: var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cta--ghost:hover {
  border-color: var(--border-bright);
  background: var(--bg-glass-hover);
}

/* Small phase-marker inside CTAs ("Ab Phase 0.5") */
.phase-pin {
  display: inline-block;
  padding: 2px 8px;
  margin-left: var(--space-1);
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.85;
}
.cta--primary .phase-pin { background: rgba(5, 8, 16, 0.10); border-color: rgba(5, 8, 16, 0.20); }

/* Mockup-Tag — corner sticker on visual mockups */
.mockup-tag {
  position: absolute;
  z-index: 3;
  top: -14px;
  right: var(--space-4);
  padding: var(--space-1) var(--space-3);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}
.mockup-tag--inset {
  top: var(--space-3);
  right: var(--space-3);
}
.hero__visual, .builder__visual, .aidemo__stage {
  position: relative;
}

/* ---------------------------------------------------------------
   5. HEADER + PHASE BANNER
   --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 16, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg);
}
.brand__mark {
  width: 26px; height: 26px;
  filter: drop-shadow(0 0 10px rgba(45, 181, 185, 0.5));
  animation: irisShimmer 18s linear infinite;
}
.brand__word { font-weight: 600; letter-spacing: -0.02em; }
.brand__badge {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  font: 500 0.6875rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(45, 181, 185, 0.25);
  border-radius: 999px;
  vertical-align: middle;
}

@keyframes irisShimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .brand__mark { animation: none; }
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-3), 1.6vw, var(--space-5));
  font-size: 0.875rem;
  flex-wrap: nowrap;
}
.site-nav a {
  color: var(--fg-mute);
  padding: var(--space-2) 0;
  position: relative;
  white-space: nowrap;
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
.site-nav a:hover { color: var(--fg); }
.site-nav a:hover::after { transform: scaleX(1); }

.site-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-self: end;
}
.github-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--t-small);
  color: var(--fg-mute);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 200ms var(--ease);
}
.github-link:hover {
  color: var(--fg);
  border-color: var(--border-strong);
  background: var(--bg-glass-hover);
}

@media (max-width: 940px) {
  /* Don't HIDE the nav on tablet/mobile — that orphans every in-page
     anchor (Integration / Anleitung / Für wen / Builder / Funktionen /
     Preise / Dokumentation). Drop it to a horizontal-scroll strip
     under the brand row so it stays reachable without needing a
     full hamburger drawer for what is essentially a TOC. */
  .brand__badge { display: none; }
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-1);
  }
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: var(--space-2);
    padding: 0 0 var(--space-1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
@media (max-width: 440px) {
  .site-meta .cta--primary { display: none; }
}

/* Persistent Phase Banner — honest expectation strip.
   Contrast tuning (WCAG-AA fix): bumped text color from --fg-mute
   to --fg-muted (one step stronger) and made the background gradient
   ~3x more opaque so it provides real visual separation instead of
   bleeding into the hero. SEO-agent flagged the previous variant
   at contrast ratio 1.09; this lifts it above the 4.5:1 threshold. */
.phase-banner {
  position: sticky;
  top: 60px;
  z-index: 49;
  background: linear-gradient(90deg, rgba(45, 181, 185, 0.18) 0%, rgba(240, 204, 140, 0.12) 100%);
  border-bottom: 1px solid var(--border-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg-muted);
}
.phase-banner__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: var(--space-2) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: 0.01em;
}
.phase-banner strong { color: var(--gold); font-weight: 600; }
.phase-banner__dot { color: var(--fg-faint); }
.phase-banner a {
  margin-left: auto;
  color: var(--fg);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.phase-banner a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 760px) {
  .phase-banner__inner { gap: var(--space-1) var(--space-2); }
  .phase-banner a { margin-left: 0; }
}

/* ---------------------------------------------------------------
   6. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(var(--space-8), 9vw, var(--space-10)) var(--gutter) var(--space-9);
  overflow: visible;
}
/* Spotlight glow behind hero content */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 90rem;
  height: 60rem;
  background: radial-gradient(ellipse at center,
    rgba(45, 181, 185, 0.10) 0%,
    rgba(45, 181, 185, 0.03) 30%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
.hero__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}
.hero__copy, .hero__visual { min-width: 0; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-2) var(--space-4);
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: var(--t-small);
  color: var(--fg-mute);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.kicker__link {
  color: var(--fg);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
}
.kicker__link:hover { color: var(--accent); }
@media (max-width: 380px) {
  .kicker {
    width: 100%;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(92, 214, 153, 0.15), 0 0 12px rgba(92, 214, 153, 0.4);
  flex-shrink: 0;
}
.dot--live {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(45, 181, 185, 0.18), 0 0 12px rgba(45, 181, 185, 0.5);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.hero__headline {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 var(--space-5);
  max-width: 18ch;
}
.hero__italic {
  /* Gradient instead of italic serif — more modern startup vibe */
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  display: inline;
}

.hero__sub {
  max-width: 36rem;
  margin: 0 0 var(--space-5);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--fg-mute);
  font-weight: 400;
}
.hero__sub strong { color: var(--fg); font-weight: 500; }
.hero__sub--accent {
  padding-left: var(--space-4);
  border-left: 2px solid var(--gold);
}

/* "Drop-in" eyebrow that surfaces the existing-site story above the
   fold. Sits between <h1> and the marketing-copy paragraph. */
.hero__dropin {
  max-width: 38rem;
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border));
  border-radius: 12px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-mute);
}
.hero__dropin strong { color: var(--fg); font-weight: 500; }
.hero__dropin code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--accent);
}
.hero__dropin-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: var(--space-2);
  margin-bottom: 0.15em;
  vertical-align: 1px;
}

/* Embed-copy button feedback line — populated by JS when the user
   clicks "Embed-Snippet kopieren". */
.hero__copy-feedback {
  margin: calc(var(--space-3) * -0.5) 0 var(--space-5);
  min-height: 1.2em;
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.hero__copy-feedback:empty { margin-bottom: var(--space-5); }
.hero__copy-feedback[data-state="error"] { color: #dc3545; }
.cta--copy {
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg);
}
.cta--copy svg { flex-shrink: 0; }
.cta--copy[data-copied="1"] {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-6);
}

.hero__signals {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-size: var(--t-small);
  color: var(--fg-mute);
}
.hero__signals strong { color: var(--fg); font-weight: 500; }

/* Hero visual — admin-editor mockup window */
.window {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
  overflow: hidden;
  font-size: 0.8rem;
  max-width: 100%;
  position: relative;
}
.window::before {
  /* subtle gradient border */
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(45, 181, 185, 0.3), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.window__bar > span:not(.window__title) {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.window__bar > span:not(.window__title):nth-child(1) { background: #ff5f57; opacity: 0.85; }
.window__bar > span:not(.window__title):nth-child(2) { background: #ffbd2e; opacity: 0.85; }
.window__bar > span:not(.window__title):nth-child(3) { background: #28c940; opacity: 0.85; }
.window__title {
  margin-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-faint);
}

.window__body {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  height: 22rem;
}
@media (max-width: 380px) {
  .window__body { grid-template-columns: 1fr; height: auto; }
  .window__sidebar { display: none; }
}

.window__sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: var(--space-3);
  overflow: hidden;
}
.window__tree-section {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}
.window__tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin: 1px 0;
  font-size: 0.75rem;
  color: var(--fg-mute);
  border-radius: 4px;
}
.window__tree-row svg { width: 11px; height: 11px; }
.window__tree-row--active {
  background: rgba(45, 181, 185, 0.08);
  color: var(--fg);
  font-weight: 500;
}

.window__main {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  overflow: hidden;
  background: var(--bg-card);
}
.window__block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  position: relative;
}
.window__block-tag {
  position: absolute;
  top: -8px;
  left: var(--space-3);
  padding: 2px 8px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 4px;
}
.window__block-h {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
}
.window__block-p {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 0.78rem;
  color: var(--fg-mute);
}
.window__block-cta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
}
.window__block-skel {
  background: var(--bg-glass);
  height: 8px;
  border-radius: 4px;
  margin: var(--space-2) 0;
}
.window__block-skel--short { width: 65%; }
.window__block--add {
  text-align: center;
  background: rgba(45, 181, 185, 0.04);
  border: 1px dashed rgba(45, 181, 185, 0.3);
  color: var(--fg-mute);
  font-size: 0.75rem;
  padding: var(--space-4);
}
.window__block--hover {
  background: rgba(45, 181, 185, 0.10);
  border-color: var(--accent);
  color: var(--accent);
}

/* Hero AI bubble */
.hero__ai-bubble {
  position: absolute;
  bottom: -1.5rem;
  left: -1rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 22rem;
  padding: var(--space-3) var(--space-4);
  background: rgba(13, 18, 28, 0.85);
  color: var(--fg);
  font-size: 0.8rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--shadow-md);
}
.hero__ai-bubble strong { color: var(--gold); font-weight: 600; }
.hero__ai-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: var(--bg);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--shadow-glow-gold);
}
@media (max-width: 980px) {
  .hero__ai-bubble {
    position: static;
    margin-top: var(--space-4);
    max-width: none;
  }
}

/* ---------------------------------------------------------------
   7. STATS BAR (new — under trust row)
   --------------------------------------------------------------- */
.stats {
  padding: var(--space-7) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(45, 181, 185, 0.02) 50%, transparent);
}
.stats__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 720px) { .stats__inner { grid-template-columns: repeat(2, 1fr); } }
.stat {
  text-align: center;
}
.stat__value {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}
/* Accent variant for the headline stat — used for "~30 s / in
   bestehende Seite" to draw the eye to the drop-in proof point. */
.stat--accent .stat__value {
  background: linear-gradient(120deg, var(--accent), var(--gold));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.stat--accent .stat__label {
  color: var(--accent);
}

/* ---------------------------------------------------------------
   8. TRUST ROW
   --------------------------------------------------------------- */
.trust {
  padding: var(--space-7) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.trust__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
}
.trust__lede {
  margin: 0;
  font-size: var(--t-small);
  color: var(--fg-mute);
  max-width: 22rem;
}
.trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--space-4), 4vw, var(--space-7));
  justify-content: flex-end;
}
.trust__logo {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--fg-mute);
  letter-spacing: -0.005em;
  transition: color 200ms var(--ease);
}
.trust__logo:hover { color: var(--fg); }
@media (max-width: 760px) {
  .trust__inner { grid-template-columns: 1fr; }
  .trust__row { justify-content: flex-start; }
}

/* ---------------------------------------------------------------
   8.5 HOW TO START — onboarding ladder
   --------------------------------------------------------------- */
.howto {
  padding: var(--space-10) var(--gutter);
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(45, 181, 185, 0.05) 0%, transparent 60%),
    transparent;
}
.howto__inner {
  max-width: var(--col-max);
  margin: 0 auto;
}

.howto__steps {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 var(--space-7);
  display: grid;
  gap: var(--space-4);
  counter-reset: howto;
  position: relative;
}
/* Vertical hairline running through the numbers, anchored to the
   number circles. Drawn behind the cards so it doesn't break the
   click-shadow layering. */
.howto__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) + 28px);
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(240, 204, 140, 0.18) 8%,
    rgba(240, 204, 140, 0.18) 92%,
    transparent
  );
  pointer-events: none;
}

.howto__step {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: start;
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-4);
  background: linear-gradient(
    180deg,
    rgba(13, 19, 32, 0.6) 0%,
    rgba(13, 19, 32, 0.35) 100%
  );
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    border-color 240ms var(--ease),
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease);
}
.howto__step:hover {
  border-color: rgba(45, 181, 185, 0.45);
  transform: translateX(2px);
  box-shadow: 0 20px 40px -28px rgba(45, 181, 185, 0.4);
}

.howto__num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.howto__num span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font: 600 1.15rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--accent);
  background:
    radial-gradient(circle at 35% 30%, rgba(45, 181, 185, 0.18) 0%, rgba(5, 8, 16, 0.9) 75%);
  border: 1px solid rgba(45, 181, 185, 0.45);
  box-shadow:
    inset 0 0 12px rgba(45, 181, 185, 0.08),
    0 0 0 4px rgba(5, 8, 16, 0.9);
  position: relative;
  z-index: 1;
}

.howto__body { min-width: 0; }
.howto__title {
  margin: 0 0 var(--space-2);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--fg);
  line-height: 1.15;
}
.howto__lede {
  margin: 0 0 var(--space-3);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 62ch;
}
.howto__lede a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 181, 185, 0.4);
  transition: border-color 180ms var(--ease);
}
.howto__lede a:hover { border-bottom-color: var(--accent); }
.howto__lede strong { color: var(--fg); font-weight: 600; }

.howto__code {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: rgba(5, 8, 16, 0.75);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--fg-mute);
  overflow-x: auto;
  max-width: 100%;
}
.howto__code code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.howto__meta {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font: 500 0.6875rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 204, 140, 0.62);
}
.howto__meta span {
  white-space: nowrap;
}

.howto__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-7);
}

@media (max-width: 640px) {
  .howto__steps::before {
    left: calc(var(--space-3) + 24px);
  }
  .howto__step {
    grid-template-columns: 64px 1fr;
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
    gap: var(--space-3);
  }
  .howto__num span {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------
   9. INSTALL TABS
   --------------------------------------------------------------- */
.install {
  padding: var(--space-10) var(--gutter);
}
.install__inner { max-width: var(--col-max); margin: 0 auto; }

.install__phase-banner {
  max-width: 52rem;
  margin: var(--space-5) auto var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: rgba(240, 204, 140, 0.06);
  border: 1px solid rgba(240, 204, 140, 0.25);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-m);
  font-size: var(--t-small);
  color: var(--fg-soft);
  line-height: 1.55;
}
.install__phase-banner strong { color: var(--fg); }

/* Three-mode comparison strip (Phase-10 close-out) */
.install__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.install__mode {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.install__mode-tag {
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.install__mode h3 {
  margin: 0;
  font-size: 1.4em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em;
}
.install__mode-time {
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0.05em;
}
.install__mode > p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.95em;
  line-height: 1.5;
}
.install__mode pre {
  margin: 0;
  padding: 0.75em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8em;
  overflow-x: auto;
  line-height: 1.45;
}
.install__mode pre code { background: transparent; border: none; padding: 0; }
.install__mode-note {
  font-size: 0.78em;
  color: var(--fg-dim);
  font-style: italic;
  margin-top: auto;
}
@media (max-width: 900px) {
  .install__modes { grid-template-columns: 1fr; }
}

/* ─── Eat-your-own-dogfood live embed (#install Mode A) ─────────────── */
/*
 * The .install__live-demo container holds a Peacock CDN-served block.
 * Until the embed-script hydrates it, we show a soft skeleton — once
 * hydrated the .peacock-* renderer classes inside take over (see
 * apps/api/public/embed.js for the class names that get inserted).
 */
.install__live-demo-wrap {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed color-mix(in oklab, var(--accent) 40%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 6%, transparent) 0%,
    transparent 80%
  );
}
.install__live-demo-tag {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-3);
  opacity: 0.85;
}
.install__live-demo-tag code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--accent);
}
.install__live-demo {
  min-height: 7rem;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}
.install__live-demo-noscript {
  font-size: 0.85em;
  color: var(--fg-dim);
  font-style: italic;
  margin: 0;
}

/* Graceful fallback when the CDN returns 404 (i.e. the
   marketing-demo space hasn't been seeded yet on the current
   environment). Same dashed-tag visual language as the wrapper
   so visitors recognise it as "this slot is intentional, not
   broken". */
.install__live-demo-fallback {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: color-mix(in oklab, var(--bg-elevated) 92%, var(--accent) 8%);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
}
.install__live-demo-fallback p {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.55;
  color: var(--fg-mute);
}
.install__live-demo-fallback p strong { color: var(--fg); }
.install__live-demo-fallback code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--accent);
}
.install__live-demo-fallback-tag {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.9;
}
.install__live-demo-fallback-note {
  font-size: 0.82em !important;
  color: var(--fg-dim) !important;
  font-style: italic;
}

/* Loading skeleton — emitted by embed.js as <div class="peacock-loading">. */
.install__live-demo .peacock-loading {
  display: block;
  min-height: 5rem;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--fg) 4%, transparent) 0%,
    color-mix(in oklab, var(--fg) 10%, transparent) 50%,
    color-mix(in oklab, var(--fg) 4%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: peacockShimmer 1.4s ease-in-out infinite;
  color: transparent;
}
@keyframes peacockShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Once hydrated, the renderer classes appear inside .install__live-demo.
   We give them an editorial framing so the demo blends with the page. */
.install__live-demo .peacock-hero {
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: color-mix(in oklab, var(--bg-elevated) 92%, var(--accent) 8%);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--border));
  border-radius: 12px;
}
.install__live-demo .peacock-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--fg);
}
.install__live-demo .peacock-hero__lead {
  margin: 0 0 var(--space-3);
  color: var(--fg-dim);
  line-height: 1.55;
}
.install__live-demo .peacock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.9em;
}
.install__live-demo .peacock-cta:hover {
  filter: brightness(1.08);
}
.install__live-demo .peacock-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--accent);
  background: color-mix(in oklab, var(--bg-elevated) 95%, transparent);
  border-radius: 0 8px 8px 0;
}
.install__live-demo .peacock-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05em;
  line-height: 1.45;
  margin: 0 0 var(--space-2);
  color: var(--fg);
}
.install__live-demo .peacock-quote__cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.78em;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}

.install__phase-banner code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--accent);
}

.install__tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--space-7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-x: auto;
  scrollbar-width: none;
  /* Subtle right-edge fade hints at scrollable content on mobile */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.install__tabs::-webkit-scrollbar { display: none; }
@media (min-width: 720px) {
  /* Fade only when actually scrollable (= narrow viewports) */
  .install__tabs {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.install__tab {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-5);
  font: 500 var(--t-small)/1 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--fg-mute);
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.install__tab:hover { color: var(--fg); }
.install__tab.is-active {
  background: var(--fg);
  color: var(--bg);
}
.install__tab-phase {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--gold-dim);
  color: var(--gold);
  border: 1px solid rgba(240, 204, 140, 0.25);
  border-radius: 999px;
  vertical-align: middle;
}
.install__tab.is-active .install__tab-phase {
  background: rgba(5, 8, 16, 0.15);
  color: var(--bg);
  border-color: rgba(5, 8, 16, 0.25);
}

.install__panels { max-width: 52rem; margin: 0 auto; }
.install__panel {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.install__panel.is-active { display: grid; gap: var(--space-5); }

.install__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
/* The inner <div> in the second grid column also needs min-width:0 so its
   <pre><code> child can shrink and use its own overflow-x:auto.  Without
   this, a long install command pushes the whole grid past the viewport
   at mobile widths. */
.install__step > div { min-width: 0; }
.install__panel pre { max-width: 100%; }
@media (max-width: 480px) {
  .install__panel { padding: var(--space-5); }
  .install__panel pre { font-size: 0.8rem; padding: var(--space-3) var(--space-4); }
}
.install__num {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50%;
  flex-shrink: 0;
}
.install__lead {
  margin: 0 0 var(--space-2);
  font-size: var(--t-small);
  color: var(--fg-mute);
}
.install__panel pre {
  margin: 0;
  background: #02050b;
  color: #e8e8ec;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.65;
}
.install__panel code { font-family: inherit; }
.install__done {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--border);
  font-size: var(--t-small);
  color: var(--emerald);
  font-weight: 500;
}
.install__done::before { content: "✓ "; }
.install__footnote {
  margin: var(--space-7) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--t-small);
  color: var(--fg-mute);
}
.install__footnote a {
  color: var(--fg);
  border-bottom: 1px solid currentColor;
}
.install__footnote a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------
   10. PERSONAS
   --------------------------------------------------------------- */
.personas {
  padding: var(--space-10) var(--gutter);
  border-top: 1px solid var(--border);
}
.personas__inner { max-width: var(--col-max); margin: 0 auto; }
.personas__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1080px) { .personas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .personas__grid { grid-template-columns: 1fr; } }

.persona {
  padding: var(--space-6);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms var(--ease);
  position: relative;
  overflow: hidden;
}
.persona::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(45, 181, 185, 0.4), transparent);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.persona:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background: var(--bg-glass-hover);
}
.persona:hover::before { opacity: 1; }

.persona__icon {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: var(--space-4);
  line-height: 1;
}
.persona h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--space-2);
}
.persona__pitch {
  margin: 0 0 var(--space-4);
  color: var(--fg-mute);
  font-size: var(--t-small);
  font-style: italic;
}
.persona ul {
  list-style: none;
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px dashed var(--border);
  display: grid;
  gap: var(--space-2);
  font-size: var(--t-small);
  color: var(--fg-mute);
}
.persona ul li::before {
  content: "→  ";
  color: var(--accent);
  font-family: var(--font-mono);
}
.persona--featured {
  background: linear-gradient(165deg, rgba(45, 181, 185, 0.12), rgba(240, 204, 140, 0.06));
  border-color: rgba(45, 181, 185, 0.4);
}
.persona--featured .persona__icon { color: var(--gold); }
.persona--featured .persona__pitch { color: var(--fg-soft); }
.persona--featured ul li::before { color: var(--gold); }

/* ---------------------------------------------------------------
   11. BUILDER
   --------------------------------------------------------------- */
.builder {
  padding: var(--space-10) var(--gutter);
}
.builder__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 980px) {
  .builder__inner { grid-template-columns: 1fr; }
}
.builder__copy h2 { margin-top: var(--space-2); margin-bottom: var(--space-4); }

.builder__phase-hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--gold-dim);
  border: 1px solid rgba(240, 204, 140, 0.25);
  border-radius: var(--radius-s);
  font-size: var(--t-small);
  color: var(--fg-soft);
}
.phase-pin--inline {
  flex-shrink: 0;
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  font-weight: 600;
  opacity: 1;
}

.builder__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.builder__list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--t-body);
  color: var(--fg-soft);
}
.builder__text { display: block; line-height: 1.55; }
.builder__list strong { color: var(--fg); font-weight: 600; }
.builder__check {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  background: var(--emerald);
  color: var(--bg);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  margin-top: 2px;
}

.window__split {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  height: 18rem;
}
@media (max-width: 380px) {
  .window__split { grid-template-columns: 1fr; height: auto; }
  .window__palette { display: none; }
}
.window__palette {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: var(--space-3);
}
.window__palette-h {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}
.window__palette-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  margin: 2px 0;
  font-size: 0.75rem;
  color: var(--fg-soft);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: grab;
}
.window__palette-row--drag {
  background: var(--accent);
  color: var(--bg);
  transform: rotate(-1deg) translateX(8px) translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.window__drag { color: var(--fg-faint); font-size: 0.6rem; }
.window__palette-row--drag .window__drag { color: var(--bg); opacity: 0.5; }
.window__canvas {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: var(--bg-card);
}
.window__block--sm {
  padding: var(--space-3) var(--space-4);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-mute);
}
.window__block--drop {
  background: rgba(45, 181, 185, 0.08);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-s);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent);
}
.window__drop-arrow {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.window__block--ghost { opacity: 0.4; }

/* ---------------------------------------------------------------
   12. PILLARS
   --------------------------------------------------------------- */
.pillars {
  padding: var(--space-10) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pillars__inner { max-width: var(--col-max); margin: 0 auto; }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 980px) { .pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pillars__grid { grid-template-columns: 1fr; } }

.pillar-card {
  padding: var(--space-6);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms var(--ease);
  position: relative;
}
.pillar-card:hover {
  border-color: rgba(45, 181, 185, 0.4);
  transform: translateY(-2px);
  background: var(--bg-glass-hover);
}
.pillar-card__num {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--accent);
}
.pillar-card h3 {
  font-size: 1.125rem;
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pillar-card__phase {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(45, 181, 185, 0.3);
}
.pillar-card p {
  margin: 0;
  color: var(--fg-mute);
  font-size: var(--t-small);
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   13. AI DEMO
   --------------------------------------------------------------- */
.aidemo { padding: var(--space-10) var(--gutter); }
.aidemo__inner { max-width: var(--col-max); margin: 0 auto; }
.aidemo__phase {
  margin-top: var(--space-4) !important;
  font-size: var(--t-small) !important;
  color: var(--fg-mute) !important;
}
.aidemo__phase strong { color: var(--fg); }

.aidemo__stage {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  position: relative;
}
.aidemo__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
  padding: 1px;
  background: var(--gradient-iridescent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.25;
  pointer-events: none;
}
.aidemo__field { display: grid; gap: var(--space-3); position: relative; }
.aidemo__field label {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
}
.aidemo__input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--fg);
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 2px;
}
.aidemo__caret {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--gold);
  animation: caret 1s steps(2) infinite;
}
@keyframes caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.aidemo__spark {
  position: absolute;
  right: var(--space-3);
  top: 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--gold), var(--gold-warm));
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: default;
  box-shadow: var(--shadow-glow-gold);
  font-weight: 600;
}
.aidemo__provider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--fg-mute);
}
.aidemo__provider code { color: var(--accent); }
.aidemo__cost { margin-left: auto; color: var(--fg-faint); }

/* ---------------------------------------------------------------
   14. COMPARE
   --------------------------------------------------------------- */
.compare {
  padding: var(--space-10) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.compare__inner { max-width: 64rem; margin: 0 auto; }
.compare__table {
  margin-top: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.7fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-small);
  align-items: baseline;
  transition: background 200ms var(--ease);
}
.compare__row:hover { background: var(--bg-glass); }
.compare__row:last-child { border-bottom: 0; }
.compare__row span:first-child {
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}
.compare__row span:nth-child(2) { color: var(--fg-mute); }
.compare__row span:nth-child(3) { color: var(--fg); font-weight: 500; }
.compare__row--head {
  background: var(--bg-elevated) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--t-tiny) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.compare__row--head span { color: var(--fg-mute) !important; font: inherit; }
.compare__row--head span:nth-child(3) { color: var(--accent) !important; }
.compare__mobile-label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.compare__row span:nth-child(2) .compare__mobile-label { color: var(--fg-faint); }
.compare__row span:nth-child(3) .compare__mobile-label { color: var(--accent); }
@media (max-width: 700px) {
  .compare__row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5); }
  .compare__mobile-label {
    position: static; width: auto; height: auto;
    padding: 0; margin: 0; overflow: visible; clip: auto;
    white-space: normal; display: inline;
  }
  .compare__row--head { display: none; }
}

/* ---------------------------------------------------------------
   15. PRICING
   --------------------------------------------------------------- */
.pricing { padding: var(--space-10) var(--gutter); }
.pricing__inner { max-width: var(--col-max); margin: 0 auto; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 900px) { .pricing__grid { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 250ms var(--ease);
}
.plan:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  background: var(--bg-glass-hover);
}
.plan--featured {
  background: linear-gradient(165deg, rgba(45, 181, 185, 0.12), rgba(240, 204, 140, 0.05));
  border-color: rgba(45, 181, 185, 0.4);
  box-shadow: var(--shadow-glow-teal);
}
.plan--featured .plan__name { color: var(--gold); }
.plan--featured .plan__lede { color: var(--fg-soft); }

.plan__ribbon {
  position: absolute;
  top: 0; right: var(--space-5);
  padding: var(--space-2) var(--space-3);
  background: var(--gold);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-weight: 600;
}
.plan__ribbon--phase {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(45, 181, 185, 0.3);
  border-top: 0;
  text-transform: none;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.plan__name {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.plan__price {
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.plan__amount {
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__unit {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--fg-faint);
}
.plan__lede {
  margin: 0 0 var(--space-6);
  color: var(--fg-mute);
}
.plan ul {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: var(--space-3);
  color: var(--fg-soft);
  font-size: var(--t-small);
  flex: 1;
}
.plan ul li {
  position: relative;
  padding-left: var(--space-5);
}
.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--emerald);
  font-weight: 700;
}
.plan--featured ul li { color: var(--fg); }
.plan__cta {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: var(--t-body);
  color: var(--fg);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.plan__cta:hover { color: var(--accent); }
.plan--featured .plan__cta { color: var(--gold); }
.plan--featured .plan__cta:hover { color: var(--gold-warm); }

/* ---------------------------------------------------------------
   16. WEBHOCH PROMO
   --------------------------------------------------------------- */
.webhoch {
  padding: var(--space-10) var(--gutter);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, transparent 0%, rgba(45, 181, 185, 0.03) 50%, transparent 100%);
}
.webhoch__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 980px) {
  .webhoch__inner { grid-template-columns: 1fr; }
}
.webhoch__intro h2 { margin: var(--space-2) 0 var(--space-5); }
.webhoch__bio {
  margin: 0 0 var(--space-4);
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg-soft);
}
.webhoch__bio a {
  color: var(--fg);
  border-bottom: 1px solid var(--fg);
  font-weight: 500;
}
.webhoch__bio a:hover { color: var(--accent); border-color: var(--accent); }
.webhoch__bio strong { color: var(--fg); font-weight: 600; }
.webhoch__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.webhoch__products {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.webhoch__products-h {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
}
.webhoch__products ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
}
.webhoch__products ul li a {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--border);
  transition: padding 200ms var(--ease);
}
.webhoch__products ul li:last-child a { border-bottom: 0; }
.webhoch__products ul li a strong { font-weight: 600; color: var(--fg); }
.webhoch__products ul li a span { font-size: var(--t-small); color: var(--fg-mute); }
.webhoch__products ul li a:hover {
  padding-left: var(--space-3);
  background: var(--bg-glass-hover);
}
.webhoch__products ul li a:hover strong { color: var(--accent); }
@media (max-width: 540px) {
  .webhoch__products ul li a { grid-template-columns: 1fr; gap: var(--space-1); }
}
.webhoch__products-note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--t-tiny);
  color: var(--fg-mute);
  line-height: 1.5;
}
.webhoch__products-note a {
  color: var(--fg);
  border-bottom: 1px solid currentColor;
}
.webhoch__products-note a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------------------------------------------------------
   17. SIGNUP
   --------------------------------------------------------------- */
.signup { padding: var(--space-10) var(--gutter); }
.signup__inner {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-9) var(--space-7);
  text-align: center;
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.signup__inner::before {
  content: "";
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: var(--gradient-iridescent);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.18;
  pointer-events: none;
}
.signup h2 { margin: 0 0 var(--space-3); position: relative; }
.signup p { color: var(--fg-mute); margin: 0 0 var(--space-6); position: relative; }
.signup__form {
  display: flex; gap: var(--space-3); margin: 0 auto;
  position: relative;
}
.signup__form input {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--fg);
  font: 400 var(--t-body)/1 var(--font-sans);
  outline: none;
  transition: border-color 200ms var(--ease);
}
.signup__form input::placeholder { color: var(--fg-faint); }
.signup__form input:focus-visible { border-color: var(--accent); }
.signup__form button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--fg);
  color: var(--bg);
  border: 0;
  border-radius: 999px;
  font: 500 var(--t-body)/1 var(--font-sans);
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.signup__form button:hover { background: var(--accent); color: var(--bg); }
.signup__form button svg { width: 20px; height: 12px; }
.signup__success {
  margin-top: var(--space-5) !important;
  min-height: 1.5rem;
  color: var(--emerald) !important;
  font-style: italic;
  position: relative;
}
@media (max-width: 480px) { .signup__form { flex-direction: column; } }

/* ---------------------------------------------------------------
   18. FOOTER — light inverse moment
   --------------------------------------------------------------- */
.site-footer {
  background: var(--fg);
  color: #2a2a2a;
  position: relative;
  z-index: 1;
}
.site-footer__inner {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: var(--space-9) var(--gutter) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: var(--space-8);
}
@media (max-width: 780px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}
.site-footer__brand {
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.site-footer__brand .brand__mark {
  width: 34px; height: 34px; flex-shrink: 0; animation: none; filter: none;
}
.site-footer__brand-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #050810;
  letter-spacing: -0.01em;
}
.site-footer__brand-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--t-small);
  color: #6b6b6b;
  max-width: 22rem;
}
.site-footer__brand-sub a { color: #050810; border-bottom: 1px solid var(--accent); }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 600px) { .site-footer__nav { grid-template-columns: repeat(2, 1fr); } }
.site-footer__nav section { display: grid; gap: var(--space-2); align-content: start; }
.site-footer__nav h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--t-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #888;
}
.site-footer__nav a { font-size: var(--t-small); color: #2a2a2a; }
.site-footer__nav a:hover { color: var(--accent); }

/* Mobile tap-target baseline (2026-05-27) — footer + legal links
   were measured at 15–21 px tall on a 390-wide viewport, well under
   the Apple HIG min (44) and Google's recommended 48. Pad them up
   without disturbing the dense desktop layout. Block-level so the
   whole row, not just the text, becomes tappable.

   Two-tier strategy:
   - STANDALONE CTAs (button-ish links that stand on their own line):
     min-height 44 + inline-block. Includes phase-banner, plan__cta,
     install__phase-banner mailto, github-link, .cta, .howto__meta
     callouts where the link is the only thing in the box.
   - INLINE links within prose (peacock@webhoch.com mid-sentence in
     howto__lede / quickstart__body / pillar-card): we don't inflate
     the visible height — would wreck the line-height. Instead, give
     them a healthy vertical tap radius via padding (the browser still
     extends the hit-test area outside the visual box). */
@media (max-width: 600px) {
  .site-footer__nav a,
  .site-footer__legal a,
  .site-footer__brand-sub a,
  .phase-banner__inner > a,
  .install__phase-banner a,
  .github-link,
  .plan__cta,
  .cta,
  .howto__meta--callout a {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding: 0.5rem 0;
  }
  .site-footer__nav section { gap: var(--space-1); }

  /* Inline mailto / inline-anchors inside prose — keep visual height,
     widen the hit-test via vertical padding + negative margin so the
     surrounding line-box layout doesn't shift. */
  .howto__lede a[href^="mailto:"],
  .quickstart__body p a[href^="mailto:"],
  .pillar-card a[href^="mailto:"] {
    padding: 0.5rem 0.125rem;
    margin: -0.5rem -0.125rem;
    display: inline-block;
  }
}

.site-footer__legal {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter);
  border-top: 1px solid rgba(5, 8, 16, 0.08);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--t-tiny);
  font-family: var(--font-mono);
  color: #888;
  flex-wrap: wrap;
}
.site-footer__legal a { color: inherit; }
.site-footer__legal a:hover { color: var(--accent); }

/* ============================================================
   LEGAL PAGES — Impressum / Datenschutz / Widerruf
   Shared "prose" surface so the three Astro pages render
   uniformly without each duplicating inline styles.
   ============================================================ */
.legal {
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  font-family: 'Geist', system-ui, sans-serif;
  color: rgba(245, 245, 250, 0.92);
  line-height: 1.7;
}
.legal__eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 245, 250, 0.45);
  margin: 0 0 0.75rem;
}
.legal__title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}
.legal__lede {
  margin: 0 0 2.5rem;
  color: rgba(245, 245, 250, 0.7);
  font-size: 1.05rem;
}
.legal section {
  margin-bottom: 2.25rem;
}
.legal h2 {
  font-family: 'Instrument Serif', serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0 0 0.65rem;
  color: rgba(255, 255, 255, 0.98);
}
.legal p {
  margin: 0 0 0.85rem;
  color: rgba(245, 245, 250, 0.82);
}
.legal p strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 600;
}
.legal a {
  color: #7cdcff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal a:hover {
  color: #bfeaff;
}
.legal code {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.875em;
  padding: 0.05em 0.35em;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(245, 245, 250, 0.92);
}
.legal ul {
  margin: 0.25rem 0 0.85rem;
  padding-left: 1.25rem;
}
.legal ul li {
  margin: 0.25rem 0;
  color: rgba(245, 245, 250, 0.82);
}
.legal__callout {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: rgba(124, 220, 255, 0.08);
  border-left: 3px solid rgba(124, 220, 255, 0.55);
  border-radius: 0.35rem;
  color: rgba(245, 245, 250, 0.9);
}
.legal__address {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  color: rgba(245, 245, 250, 0.88);
}
.legal__form {
  margin-top: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.35rem;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
  color: rgba(245, 245, 250, 0.88);
  overflow-x: auto;
}
/* ── QUICKSTART (Schritt-für-Schritt) ─────────────────────────────────
   Mirrors the install-section design language: dark elevated cards
   with a teal-accent num plaque, mono code blocks, italic tip footer.
   Big-number plaques use the same gradient as the hero's `grad` span
   so the section reads as part of the same brand voice. */
.quickstart {
  padding: var(--space-5) var(--space-3);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.quickstart__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.quickstart__steps {
  list-style: none;
  margin: var(--space-4) 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.quickstart__step {
  display: grid;
  grid-template-columns: clamp(72px, 10vw, 110px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
  /* `minmax(0, 1fr)` above is the critical bit — without it, a code
     block wider than the grid cell forces the cell to grow beyond
     the parent, which `body { overflow-x:hidden }` then silently
     clips. With min-width:0 the cell may shrink and the inner `pre`
     gets its own overflow:auto. */
  max-width: 100%;
  box-sizing: border-box;
}
.quickstart__step pre,
.quickstart__step code {
  overflow-x: auto;
  max-width: 100%;
  word-break: break-word;
}
.quickstart__step:hover {
  border-color: var(--border-strong);
}
.quickstart__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 0.95;
  font-weight: 300;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  /* Big enough that mobile users immediately see the step number. */
}
.quickstart__body h3 {
  margin: 0 0 0.5em;
  font-size: 1.4em;
  line-height: 1.15;
  font-family: var(--font-display);
}
.quickstart__body p {
  margin: 0 0 0.75em;
  color: var(--fg-muted);
  line-height: 1.55;
}
.quickstart__body p:last-child { margin-bottom: 0; }
.quickstart__list {
  margin: 0 0 0.75em;
  padding: 0 0 0 1.2em;
  color: var(--fg-muted);
  line-height: 1.55;
}
.quickstart__list li { margin-bottom: 0.3em; }
.quickstart__body pre {
  margin: 0 0 0.75em;
  padding: 0.85em 1em;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82em;
  line-height: 1.5;
  overflow-x: auto;
}
.quickstart__body pre code { background: transparent; border: none; padding: 0; }
.quickstart__tip {
  font-size: 0.85em;
  color: var(--fg-dim);
  font-style: italic;
  padding-top: 0.5em;
  border-top: 1px dashed var(--border);
  margin-top: 0.75em;
}
.quickstart__finish {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}
.quickstart__finish p {
  margin: 0 0 0.75em;
  color: var(--fg-muted);
  line-height: 1.55;
}
.quickstart__finish strong { color: var(--fg); }
.quickstart__next {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.quickstart__cta {
  display: inline-block;
  padding: 0.75em 1.4em;
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
  border-radius: 10px;
  font-size: 0.95em;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.quickstart__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px -8px rgba(45, 181, 185, 0.4);
}
.quickstart__cta--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border-strong);
}
.quickstart__cta--ghost:hover {
  background: var(--bg-glass-hover);
}

@media (max-width: 640px) {
  .quickstart__step {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .quickstart__num {
    font-size: 3rem;
  }
}

.legal__nav {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95rem;
  color: rgba(245, 245, 250, 0.6);
}
.legal__nav a + a::before {
  content: "·";
  margin: 0 0.6rem;
  color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 640px) {
  .legal { padding: 2.5rem 1.25rem; }
  .legal h2 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .legal a { transition: none; }
}