/* Surgewave marketing site stylesheet.
 * Design tokens: surgewave-cyan primary, violet accent, lightning-yellow, slate neutrals.
 * Theme: data-theme="auto|light|dark" stores preference; data-theme-resolved="light|dark"
 * carries the resolved choice (auto resolves via prefers-color-scheme).
 *
 * Token naming follows the Bowire convention (centralised, unprefixed) so the same
 * mental model works across both sister sites; values diverge so Surgewave and Bowire
 * stay visually distinct.
 */

:root,
:root[data-theme-resolved="light"] {
  /* Surfaces — alt-sections (--bg-elevated) sit slightly grayer than
     the off-white base, matching Bowire's zigzag convention. White
     stays reserved for cards (--surface) so the cards lift visually
     against both base and elevated section backgrounds. */
  --bg: #fafaff;
  --bg-elevated: #f4f4fa;
  --bg-footer: color-mix(in srgb, #fafaff 97%, black);
  --surface: #ffffff;
  --border: #e2e8f0;

  /* Text */
  --text: #0f172a;
  --text-secondary: #475569;

  /* Brand */
  --accent: #0ea5e9;          /* Surgewave cyan (sky-500) */
  --accent-strong: #0369a1;   /* darker cyan for primary-button hover */
  --accent-hover: #38bdf8;    /* sky-400 for ghost-button border hover */
  --accent-light: #7dd3fc;    /* sky-300 for text links on dark surfaces */
  --accent-secondary: #a78bfa;/* Surgewave violet for gradient + dark-mode eyebrow */
  --lightning: #facc15;       /* Surgewave yellow accent (amber-300) */

  /* Status */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Code */
  --code-bg: #0f172a;
  --code-text: #e2e8f0;

  /* Typography & geometry */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-sm: 8px;
}

:root[data-theme-resolved="dark"] {
  --bg: #0b1020;
  --bg-elevated: #0f172a;
  --bg-footer: color-mix(in srgb, #0b1020 70%, black);
  --surface: #0f172a;
  --border: #1e293b;
  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --code-bg: #020617;
  --code-text: #f1f5f9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.container {
  /* Aligned to the docs surgewave-theme container (1120px) so the header
     logo and content rails sit at the same horizontal position when
     navigating between site (Jekyll) and docs (DocFX). The earlier
     1160-px value was a 40-px drift that shifted everything 20px
     left/right on transition. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow { max-width: 780px; }

/* Header — transparent by default so the dark hero canvas behind reads
 * cleanly; gets a translucent backdrop only after the user has scrolled
 * past the hero. The .scrolled class is toggled by site/_layouts/default.html
 * when window.scrollY exceeds 20px (mirrors the Bowire pattern). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background 220ms ease, backdrop-filter 220ms ease, border-color 220ms ease;
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: var(--border);
}
/* While the dark hero is in view (hero-fg present on body via JS toggle),
 * keep the header text light so the logo + nav read against the dark canvas. */
body.has-dark-hero:not(.scrolled-past-hero) .site-header {
  color: #e6ecf5;
}
body.has-dark-hero:not(.scrolled-past-hero) .logo,
body.has-dark-hero:not(.scrolled-past-hero) .header-nav a {
  color: #e6ecf5;
}
/* Hover on the brand logo while the dark hero is in view. Earlier we tinted to
 * pure white but the default logo color is already #e6ecf5, so the hover
 * transition was invisible. Use the accent-light shade — same Sky-300 hover
 * that the post-hero state uses, just bright enough to show on the dark
 * canvas. */
body.has-dark-hero:not(.scrolled-past-hero) .logo:hover {
  color: var(--accent-light, #7dd3fc);
}
body.has-dark-hero:not(.scrolled-past-hero) .header-nav a:hover {
  color: #ffffff;
}
body.has-dark-hero:not(.scrolled-past-hero) .theme-toggle,
body.has-dark-hero:not(.scrolled-past-hero) .nav-github,
body.has-dark-hero:not(.scrolled-past-hero) .nav-home,
body.has-dark-hero:not(.scrolled-past-hero) .surgewave-search-trigger {
  color: rgba(230, 236, 245, 0.85);
}
/* Restore the hover transition on the dark hero — without this, the
 * fixed rgba colour above wins over .theme-toggle:hover { color: accent }
 * because of the extra body-class specificity, leaving the buttons
 * "dead" to hover until the hero scrolls past. White on the dark canvas
 * stays high-contrast where the cyan accent washes out. */
body.has-dark-hero:not(.scrolled-past-hero) .theme-toggle:hover,
body.has-dark-hero:not(.scrolled-past-hero) .nav-github:hover,
body.has-dark-hero:not(.scrolled-past-hero) .nav-home:hover,
body.has-dark-hero:not(.scrolled-past-hero) .surgewave-search-trigger:hover {
  color: #ffffff;
}
.header-inner {
  /* 3-column grid (1fr | auto | 1fr) keeps the nav perfectly centred on
     the page regardless of how wide the logo block on the left or the
     actions cluster on the right grow. flex+space-between would only
     centre the nav when the side blocks happen to be equally wide,
     which they aren't (search-trigger + theme-toggle + GH icon on the
     right outweighs mark + "Surgewave" on the left). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.header-inner > .logo { justify-self: start; }
.header-inner > .header-nav { justify-self: center; }
.header-inner > .header-actions { justify-self: end; }
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.1rem;
  transition: color 0.15s;
  color: var(--text);
}
.logo:hover {
  /* Brand wordmark tints to accent on hover, mirroring the docs
     surgewave-theme .surgewave-docs-logo:hover behaviour. text-decoration:none
     keeps the link-underline off when the wordmark inherits link
     colour. */
  text-decoration: none;
  color: var(--accent);
}
.logo-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

/* Inlined surgewave-mark — used in the site header via {% include surgewave-mark.svg %}.
 * Lives next to the wordmark; sizing matches .logo-icon for consistency.
 * Class-only fills so the surrounding stylesheet drives the colours (the
 * Surgewave site's manual theme toggle sets data-theme-resolved on <html>;
 * <img>-loaded SVGs cannot see that, so we inline). */
.surgewave-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}
.surgewave-wave { fill: #33bcff; }
.surgewave-ink  { fill: #003e60; }
:root[data-theme-resolved="dark"] .surgewave-wave { fill: #66cfff; }
:root[data-theme-resolved="dark"] .surgewave-ink  { fill: #ffffff; }
/* On the dark hero canvas (before the user has scrolled past it) the
 * HEADER mark is forced to the dark palette so it stays legible — but
 * scoped to .site-header only so the page-wide theme toggle still
 * controls everything else (including the marks in the footer / docs). */
body.has-dark-hero:not(.scrolled-past-hero) .site-header .surgewave-wave { fill: #66cfff; }
body.has-dark-hero:not(.scrolled-past-hero) .site-header .surgewave-ink  { fill: #ffffff; }
/* The hero centre lockup always renders on the dark canvas, so it
 * always uses the dark-mode tones regardless of theme state. The
 * Surgewave wordmark text inherits the same treatment via .surgewave-text-bold. */
.hero-fg-logo-slot .surgewave-wave { fill: #66cfff; }
.hero-fg-logo-slot .surgewave-ink  { fill: #ffffff; }
.hero-fg-logo-slot .surgewave-text-bold { fill: #ffffff; }
.header-nav {
  display: flex;
  gap: 28px;
  font-size: 0.95rem;
}
.header-nav a {
  color: var(--text-secondary);
  font-weight: 500;
}
.header-nav a:hover {
  color: var(--text);
  text-decoration: none;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Header action buttons — borderless icon-only chips, Bowire pattern.
 * Square 32-px hit-area, no border, no background, just a colour
 * transition on hover (text-secondary → accent). The icon inherits via
 * currentColor. Transition matches the docs surgewave-theme's 0.15s. */
.theme-toggle,
.nav-github,
.nav-home,
.surgewave-search-trigger {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.theme-toggle:hover,
.nav-github:hover,
.nav-home:hover,
.surgewave-search-trigger:hover {
  color: var(--accent);
}
.theme-toggle:focus-visible,
.nav-github:focus-visible,
.nav-home:focus-visible,
.surgewave-search-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hero */
.hero {
  padding: 96px 0 64px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg);
}
.hero-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  font-weight: 600;
}
:root[data-theme-resolved="dark"] .hero-eyebrow {
  color: var(--accent-secondary);
}
.hero-title {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.hero-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 0 32px;
}
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
/* Reassurance-Microcopy unter den CTA-Buttons — kleinere Schrift,
   reduzierte Auffaelligkeit, dient als "trust-anchor" (Estuary-Pattern:
   "No credit card required / 30-day free trial"; bei uns:
   "Single binary. No JVM. Runs in 30 seconds.") */
.hero-reassurance {
  margin: 0 0 48px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.hero-fg-content .hero-reassurance {
  color: rgba(230, 236, 245, 0.7);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-primary:hover {
  background: var(--accent-strong);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bowire-Style Secondary-Button — solid surface mit Border + Lift-on-Hover.
   Anders als ghost: hat einen sichtbaren Background, damit der Button auch
   ohne Hover als "Button" erkennbar ist (nicht wie ein Text-Link). */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.btn-secondary:hover svg {
  color: var(--accent);
  transition: color 0.15s;
}

/* Disabled-Variante fuer Buttons die noch nicht fertig sind (z.B.
   Bootcamp-CTA pre-Launch). Visuell gedaempft, kein Hover-Lift, Click
   funktioniert nicht (pointer-events: none). Bleibt als Anchor im DOM,
   damit die "Upcoming"-Banderole drueber liegen kann und Screen-Reader
   das aria-disabled vorlesen. */
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--surface);
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.btn-disabled svg { color: var(--text-secondary); }

/* Hero-Badges (Apache 2.0 / .NET 10 etc.) — Bowire-Pattern: Pill-Form,
   Icon + Label + Value, hover-lift. Eingesetzt im Hero unter den CTAs
   anstelle der vorherigen middot-separierten Reassure-Zeile. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
/* Override globaler a:hover { text-decoration: underline } — Badges sollen
   Pill-Buttons bleiben, kein Link-Style mit Unterstreichung. */
.hero-badge:hover,
.hero-badge:focus,
.hero-badge:active {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--surface);
  color: var(--text);
  transform: translateY(-1px);
}
.hero-badge-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.hero-badge:hover .hero-badge-icon { color: var(--accent); }
.hero-badge-label {
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hero-badge-value {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.8125em;
  font-variant-numeric: tabular-nums;
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}
/* Pre-launch: Live-Badges (data-badge="nuget-version" / "nuget-downloads"
   / "gh-stars") komplett verstecken, solange main.js noch keinen Wert
   via API gesetzt hat (kein [data-badge-loaded]-Attribut). Sonst stehen
   bare "Downloads" / "NuGet"-Labels ohne Wert im Hero rum. Sobald JS
   die Antwort verarbeitet, setzt es data-badge-loaded=true und der Chip
   wird sichtbar.

   :has() ist Baseline-CSS (Chrome 105+, Safari 15.4+, Firefox 121+) —
   bewusst kein Fallback noetig: Worst-Case ist ein leerer Whitespace
   im Hero, kein Layout-Bruch. */
.hero-badge[data-badge]:not(:has([data-badge-value][data-badge-loaded])) {
  display: none;
}

/* Dark-Hero-Scope: auf dem dunklen Force-Graph-Canvas brauchen Badges
   einen anderen Background damit sie nicht im Schwarz verschwinden,
   und die Border-Mid-Tone-Variante (was es im Light-Theme ist) wirkt
   im Dark-Hero zu dunkel. */
.hero-fg-content .hero-badges { justify-content: flex-start; }
.hero-fg-content .hero-badge {
  background: rgba(230, 236, 245, 0.06);
  border-color: rgba(230, 236, 245, 0.18);
  color: rgba(230, 236, 245, 0.78);
}
.hero-fg-content .hero-badge:hover,
.hero-fg-content .hero-badge:focus,
.hero-fg-content .hero-badge:active {
  text-decoration: none;
  background: rgba(230, 236, 245, 0.12);
  border-color: rgba(102, 207, 255, 0.55);
  color: #ffffff;
}
.hero-fg-content .hero-badge-icon { color: rgba(230, 236, 245, 0.6); }
.hero-fg-content .hero-badge:hover .hero-badge-icon { color: #66cfff; }
.hero-fg-content .hero-badge-label { color: rgba(230, 236, 245, 0.7); }
.hero-fg-content .hero-badge-value {
  color: #ffffff;
  border-left-color: rgba(230, 236, 245, 0.2);
}
@media (max-width: 720px) {
  .hero-fg-content .hero-badges { justify-content: center; }
}

/* Hero terminal */
.hero-terminal {
  max-width: 680px;
  background: var(--code-bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.terminal-chrome {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: #1e293b;
}
.terminal-chrome span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #334155;
}
.terminal-chrome span:nth-child(1) { background: #ef4444; }
.terminal-chrome span:nth-child(2) { background: #f59e0b; }
.terminal-chrome span:nth-child(3) { background: #10b981; }
.hero-terminal pre {
  margin: 0;
  padding: 18px 20px;
  color: var(--code-text);
  font-size: 0.92rem;
  line-height: 1.7;
}
.hero-terminal .prompt { color: var(--accent-secondary); margin-right: 8px; }
.hero-terminal .muted { color: #64748b; display: block; margin-top: 8px; }

/* Sections */
.features, .cta {
  padding: 80px 0;
}
.section-title {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 16px;
}
.section-lede {
  text-align: center;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 48px;
  font-size: 1.05rem;
}

/* Metrics-strip — hard numbers between hero and features. Visually
 * distinct from the feature cards (no border, no hover lift, denser
 * grid, mono numerals) so the page rhythm stays Hero → Numbers → Cards
 * rather than blurring all three modes together. */
.metrics-strip {
  padding: 56px 0 32px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
/* Eyebrow + Headline — kompakter als die "section-title"-Variante der
   anderen Sections, damit der Strip noch als Bridge zwischen Hero und
   Features liest und nicht als eigenstaendige Section konkurriert. */
.metrics-strip-eyebrow {
  margin: 0 0 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.metrics-strip-title {
  margin: 0 0 32px;
  text-align: center;
  font-size: clamp(1.4rem, 1.5vw + 0.8rem, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.metrics-strip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Clickable tile — opens metric-detail-modal with chart + methodology.
   Reset native <button> styles, lean on .metric-* children for layout. */
.metric-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 16px 12px 14px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.metric-tile:hover,
.metric-tile:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-2px);
  outline: none;
}
.metric-hint {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
}
.metric-tile:hover .metric-hint,
.metric-tile:focus-visible .metric-hint {
  opacity: 1;
}
.metrics-strip-footnote-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.7;
}

/* === Metric-Detail-Modal (Bowire bowire-feature-modal-Pattern) ====
   Single overlay, body gets filled per clicked tile. Backdrop dims the
   page, panel centered, accent-bordered close-button top-right. */
.metric-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.metric-detail-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.metric-detail-panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 28px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(8px);
  transition: transform 0.2s;
}
.metric-detail-overlay.is-open .metric-detail-panel {
  transform: translateY(0);
}
.metric-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.metric-detail-close:hover,
.metric-detail-close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
}
.metric-detail-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.metric-detail-lede {
  margin: 0 0 18px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.metric-detail-figure {
  margin: 0 0 20px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.metric-detail-figure svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text);
}
.metric-detail-figure figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.metric-detail-sub {
  margin: 18px 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.metric-detail-body p,
.metric-detail-body ul {
  margin: 0 0 12px;
  line-height: 1.6;
  font-size: 0.95rem;
}
.metric-detail-body ul {
  padding-left: 22px;
}
.metric-detail-body li {
  margin-bottom: 6px;
}
.metric-detail-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}
.metric-detail-body a {
  color: var(--accent);
  font-weight: 500;
}
.metric-value {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(2.2rem, 3.4vw + 0.6rem, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.metric-unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.metric-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
}
.metric-note {
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.metrics-strip-footnote {
  margin: 28px 0 0;
  font-size: 0.9rem;
  text-align: center;
}
.metrics-strip-footnote a {
  color: var(--accent);
  font-weight: 500;
}

/* === Kafka-Migration-Section ===========================================
   Bridge zwischen Numbers/Proof und Screenshots. Sitzt direkt nach
   metrics-strip in index.html; betont den Wire-Compat-Hook ohne den
   Hero damit zu monopolisieren. Pattern: Redpanda /platform "Migrate
   without application code changes" als eigene Section.
*/
.kafka-migration {
  padding: 56px 0 64px;
  background: var(--bg);
}
.kafka-migration .container.narrow {
  max-width: 760px;
  margin: 0 auto;
}
.kafka-migration-eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.kafka-migration-title {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.kafka-migration-title code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.kafka-migration-lede {
  margin: 0 0 24px;
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.kafka-migration-lede code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--text);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
}
.kafka-migration-snippet {
  margin: 0 0 24px;
}
.kafka-migration-snippet pre {
  margin: 0;
  padding: 20px 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
}
.kafka-migration-comment {
  color: var(--text-secondary);
  opacity: 0.7;
}
.kafka-migration-cta {
  text-align: left;
}

/* "Built to learn from"-Section — Tile-Grid mit Bootcamp/Samples/CLI+MCP.
   Hover-Lift, Accent-CTA-Arrow, gleicher Spacing-Beat wie .kafka-migration
   damit die zwei Sections visuell zusammen lesen. */
.learn {
  padding: 56px 0 64px;
  background: var(--bg);
}
.learn-eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.learn-title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.learn-lede {
  margin: 0 0 32px;
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 720px;
}
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.learn-tile {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.learn-tile:hover,
.learn-tile:focus,
.learn-tile:active {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.learn-tile-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 16px;
}
.learn-tile-icon svg { width: 22px; height: 22px; }
.learn-tile-title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.learn-tile-body {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-secondary);
  flex-grow: 1;
}
.learn-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
}
.learn-tile-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}
.learn-tile:hover .learn-tile-cta svg { transform: translateX(3px); }

/* "Sovereign by design"-Section — adressiert die EU-Tech-Souveraenitaets-
   Debatte. Etwas dezenter als der Kafka-Migration-Beat: leicht abgedunkelt,
   damit der Frame seriose Trust-Story-Wirkung entfaltet, nicht Marketing-Sale. */
.sovereign {
  padding: 56px 0 64px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sovereign-eyebrow {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.sovereign-title {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2.2vw + 0.6rem, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.sovereign-lede {
  margin: 0 0 24px;
  font-size: 1.025rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.sovereign-lede em {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}
.sovereign-points {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.sovereign-points li {
  position: relative;
  padding: 14px 16px 14px 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.sovereign-points li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  /* Inset checkmark via box-shadow trick — kein extra SVG-Inline noetig. */
  box-shadow: inset 0 0 0 4px var(--bg-elevated), 0 0 0 0 transparent;
}
.sovereign-points li strong {
  color: var(--text);
  font-weight: 700;
}
.sovereign-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}

/* a11y helper for the visually-hidden section heading */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.feature-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 150ms ease, transform 150ms ease;
}
.feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-2px);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.feature-card h3 {
  font-size: 1.1rem;
  margin: 0 0 10px;
}
.feature-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* CTA */
.cta {
  background:
    radial-gradient(ellipse 50% 30% at 50% 100%, color-mix(in srgb, var(--accent-secondary) 16%, transparent), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--border);
  text-align: center;
}
.cta h2 {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cta p {
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto 32px;
  font-size: 1.05rem;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Reassurance-Microcopy direkt unter den CTA-Buttons — Trust-Anchor
   gegenueber Skepsis ("nochmal eine neue Infrastruktur?"). Subtil
   sekundaer in Typografie. */
.cta-reassurance {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
/* Sekundaerer Kontakt-Block — fuer Enterprise-Plugins, paid support etc.
   Liegt unter der primaeren OSS-CTA-Gruppe, deutlich kleiner. */
.cta-talk {
  margin: 24px 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.cta-talk a {
  color: var(--accent);
  font-weight: 500;
}

/* Page hero + body (for features.html, legal, privacy etc.) */
.page-hero {
  padding: 80px 0 32px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.6rem);
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.page-hero .lede {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 0;
}
.page-body {
  padding: 48px 0 80px;
}
.page-body h2 {
  margin: 40px 0 16px;
  font-size: 1.4rem;
  font-weight: 700;
}
.page-body ul {
  padding-left: 24px;
}
.page-body li {
  margin: 8px 0;
}
.page-body code {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent-strong);
}
:root[data-theme-resolved="dark"] .page-body code {
  color: var(--accent-secondary);
}

/* Footer */
.site-footer {
  padding: 64px 0 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-footer);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer-col h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin: 6px 0; }
.footer-col a {
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--accent); }
.footer-brand {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.footer-tag {
  color: var(--text-secondary);
  font-size: 0.92rem;
  max-width: 280px;
  margin: 0;
}
.footer-bottom {
  padding-top: 24px;
  margin-top: 32px;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ============================================================
 * Pagefind search — ported wholesale from Bowire's site/style.css
 * (lines 5180-5740) with `bowire-` → `surgewave-` class rename. The
 * widget rules use Pagefind's documented CSS custom properties and
 * BEM-style internal classes; both are identical between Bowire and
 * Surgewave so no further adaptation is needed beyond the wrapper rename.
 * ============================================================ */

/* Pagefind overlay — dimmed backdrop, centred panel containing the
   PagefindUI widget. Shared visual between marketing site and docs. */
.surgewave-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(12vh, 120px);
  background: rgba(15, 15, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
:root[data-theme-resolved="light"] .surgewave-search-overlay,
:root[data-theme="light"] .surgewave-search-overlay {
  background: rgba(200, 200, 220, 0.55);
}
.surgewave-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.surgewave-search-overlay-panel {
  width: min(680px, calc(100% - 48px));
  max-height: 80vh;
  /* Flex column so <form> and hint stay fixed while only the results
     drawer scrolls — the scroll thumb then tracks the results
     length, not the (form + count + drawer + hint) total. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  transform: translateY(-8px);
  transition: transform 0.2s ease;
}
.surgewave-search-overlay.is-open .surgewave-search-overlay-panel {
  transform: translateY(0);
}

/* Hint row under the input — centred text on a subtle tertiary tint,
   kbd glyphs styled as physical keys (sans-serif + 2-px bottom border
   for depth). */
.surgewave-search-hint {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text-secondary);
  font-size: 0.75rem;
  text-align: center;
}
.surgewave-search-hint kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  margin: 0 2px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--text);
  line-height: 1.4;
}

/* Theme the Pagefind UI widget to the Surgewave palette via its
   documented CSS custom properties. Bound to both dark and light theme
   attributes so the widget switches synchronously with the rest of the
   site when the user toggles the theme. Attribute selectors (0,2,0)
   beat Pagefind's default :root (0,1,0). */
html[data-theme-resolved="dark"],
html[data-theme="dark"],
html[data-theme-resolved="light"],
html[data-theme="light"] {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--text);
  --pagefind-ui-background: var(--bg-elevated);
  --pagefind-ui-border: var(--border);
  --pagefind-ui-tag: var(--surface);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 10px;
  --pagefind-ui-image-border-radius: 6px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: inherit;
}

/* Form/drawer flex split — the form (input + magnifier ::before icon
   + count) stays fixed at the top, only the results drawer scrolls. */
.surgewave-search-overlay .pagefind-ui__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px;
}
.surgewave-search-overlay .pagefind-ui__search-input {
  flex: 0 0 auto;
}
.surgewave-search-overlay .pagefind-ui__drawer {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 16px -20px -20px;
  padding: 16px 20px 20px;
}
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar { width: 10px; }
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-track { background: transparent; }
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* PagefindUI internal tweaks — applied at the global scope so the
   dedicated /search.html and the overlay both pick them up. */
.pagefind-ui {
  padding-top: 0 !important;
}
.pagefind-ui__drawer {
  gap: 24px !important;
}
.pagefind-ui__results-area {
  margin-top: 8px !important;
}
.pagefind-ui__message {
  color: var(--text-secondary) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  height: auto !important;
}
.pagefind-ui__result {
  /* Pagefind's Svelte build uses flex (not grid) and reserves a
     30 %-wide thumbnail column on every result via .pagefind-ui__
     result-thumb. Surgewave results never carry images, so the column
     leaves a phantom indent that pushes the title + excerpt right
     by ~30 %. Hide the thumb and let .result-inner take the row. */
  padding: 18px 0 20px !important;
  border-top: 1px solid var(--border) !important;
  cursor: pointer;
}
.pagefind-ui__result .pagefind-ui__result-thumb {
  display: none !important;
}
.pagefind-ui__result .pagefind-ui__result-inner {
  flex: 1 !important;
  margin-top: 0 !important;
  width: 100% !important;
}
.pagefind-ui__result:first-child {
  border-top: none !important;
  padding-top: 0 !important;
}
.pagefind-ui__result-title {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}
.pagefind-ui__result-excerpt {
  font-size: 0.9375rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.55 !important;
}
.pagefind-ui__result-tags {
  margin-top: 10px !important;
}
.pagefind-ui__result-tag {
  font-size: 0.75rem !important;
  padding: 3px 8px !important;
  color: var(--text-secondary) !important;
}

/* Input typography + the asymmetric padding that leaves room for
   Pagefind's ::before magnifier glyph (left) and clear button
   (right). Without these the input renders cramped and the magnifier
   sits at the wrong spot. */
.pagefind-ui__search-input {
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 0.9375rem !important;
  padding: 0 52px 0 44px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}
/* Pagefind draws the magnifier as a ::before mask on the <form>. The
   exact centring depends on the form's padding + input height, which
   differ between the overlay (20 px padding, 52 px input) and the
   dedicated search page. Scope each. */
.surgewave-search-overlay .pagefind-ui__form::before {
  top: 38px !important;
  left: 34px !important;
  width: 16px !important;
  height: 16px !important;
}
#search-page-results .pagefind-ui__form::before {
  top: 18px !important;
  left: 20px !important;
  width: 16px !important;
  height: 16px !important;
}
.pagefind-ui__search-input::placeholder {
  color: var(--text-secondary) !important;
  opacity: 0.6 !important;
  font-weight: 400 !important;
}
.pagefind-ui__search-input:focus-visible {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
.surgewave-search-overlay-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.surgewave-search-overlay-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.surgewave-search-overlay-panel::-webkit-scrollbar-track {
  background: transparent;
}
.surgewave-search-overlay-panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.surgewave-search-overlay-panel::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
  background-clip: padding-box;
}

/* === PagefindUI Result-Hover, Clear-Button, Highlight (ported from Bowire) ===
   Bowire's site/assets/css/style.css Zeilen 5933-6120, mit Bowire-Accent
   (#6366f1 Indigo) ersetzt durch Surgewave-Accent (var(--accent), Cyan). */

.pagefind-ui__search-input:focus-visible {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15) !important;
}

.pagefind-ui__result-link {
    color: var(--text) !important;
}
.pagefind-ui__result-link:hover {
    color: var(--accent) !important;
}
.pagefind-ui mark {
    color: var(--accent);
    background: rgba(14, 165, 233, 0.14);
    padding: 0 2px;
    border-radius: 3px;
}

/* Arrow-key / hover highlight on the currently selected result. */
.pagefind-ui__result.is-highlighted {
    background: rgba(14, 165, 233, 0.08);
    border-radius: 8px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: -12px;
    margin-right: -12px;
}
.pagefind-ui__result.is-highlighted .pagefind-ui__result-link {
    color: var(--accent) !important;
}

/* Pagefind <form> wraps everything — make it a flex column so the input
   stays sticky at the top, drawer scrolls, hint footer fixed at bottom. */
.surgewave-search-overlay #search {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.surgewave-search-overlay .pagefind-ui {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.surgewave-search-overlay .pagefind-ui__form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    background: var(--bg-elevated);
}
.surgewave-search-overlay .pagefind-ui__search-input {
    flex: 0 0 auto;
}
.surgewave-search-overlay .pagefind-ui__drawer {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 12px -20px -20px;
    padding: 0 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar { width: 10px; }
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-track { background: transparent; }
.surgewave-search-overlay .pagefind-ui__drawer::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Overlay is a Suggest popup, no Load-More button. */
.surgewave-search-overlay .pagefind-ui__button {
    display: none !important;
}

.pagefind-ui__button {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius, 8px) !important;
    font-weight: 600 !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s !important;
    cursor: pointer !important;
}
.pagefind-ui__button:hover {
    background: var(--bg-elevated) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    transform: translateY(-1px);
}
.pagefind-ui__button:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* Clear-query button — circular 28x28 with X icon, positioned absolutely
   relative to the .pagefind-ui__form. Pinned to input-right with explicit
   pixel offsets that account for form-padding-top (20) + input-vs-button
   height delta. */
.pagefind-ui__search-clear {
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    top: 32px !important;
    right: 28px !important;
    transform: none !important;
    border-radius: 8px !important;
    background: var(--border) !important;
    color: transparent !important;
    border: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.pagefind-ui__search-clear::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background-color: var(--text);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path stroke='black' stroke-width='1.6' stroke-linecap='round' d='M1 1l8 8M9 1l-8 8'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.15s;
}
.pagefind-ui__search-clear:hover {
    background: var(--accent) !important;
    transform: scale(1.05) !important;
}
.pagefind-ui__search-clear:hover::before {
    background-color: #fff;
}
.pagefind-ui__search-clear:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
}

/* Keyboard-shortcut hint at the bottom of the overlay panel — sits outside
   the scrollable drawer so it stays visible as the results scroll. */
.surgewave-search-hint {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}
.surgewave-search-hint kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    margin: 0 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text);
    line-height: 1.4;
}

/* Dedicated /search.html */
.search-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.search-page-title {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.search-page-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin: 0 0 32px;
}

/* Protocols section */
.protocols, .use-cases, .comparison, .install, .launch {
  padding: 80px 0;
}
/* "We wrote the framework" services section — Petabridge-style
 * positioning. Sits between launch and cta on the index page; same
 * markup powers the standalone /services.html. Visual treatment is
 * a calm card grid with accent icon-glyphs, no card hover lift so the
 * tone reads "credibility" rather than "buy now". */
.services {
  padding: 96px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.service-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.service-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.services-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 48px 0 0;
}

/* Standalone /services.html — long-form "how an engagement works"
 * carries the same surface as the include above so the page reads
 * as a continuous block, not two stitched sections. */
.services-detail {
  padding: 64px 0 96px;
  background: var(--bg);
}
.services-detail h2 {
  font-size: 1.75rem;
  margin: 48px 0 16px;
}
.services-detail h2:first-child { margin-top: 0; }
.services-detail h3 {
  font-size: 1.05rem;
  margin: 24px 0 8px;
}
.services-detail p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.services-detail hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 56px 0;
}

/* Sections alternate between --bg and --bg-elevated for a calm visual
 * rhythm down the page. Order under the hero:
 *   metrics-strip (alt) → features (base) → protocols (alt) →
 *   use-cases (base) → comparison (alt) → install (base) →
 *   launch (alt) → cta (base)
 * Decorative gradients on install / cta layer over their --bg base
 * so the gradient still reads against the lighter alt sections too. */
.protocols  { background: var(--bg-elevated); }
.use-cases  { background: color-mix(in srgb, var(--bg) 96%, var(--accent-secondary)); }
.comparison { background: var(--bg-elevated); }
.install {
  background:
    radial-gradient(ellipse 50% 30% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg);
}
.launch { background: var(--bg-elevated); }

.protocol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.protocol-card {
  display: block;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.protocol-card:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--accent) 30%, transparent);
}
.protocol-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.protocol-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px;
  color: var(--accent-strong);
}
:root[data-theme-resolved="dark"] .protocol-badge {
  color: var(--accent-light);
}
.protocol-badge-strong {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.protocol-badge-accent {
  background: color-mix(in srgb, var(--lightning) 18%, transparent);
  border-color: color-mix(in srgb, var(--lightning) 40%, transparent);
  color: #92400e;
}
:root[data-theme-resolved="dark"] .protocol-badge-accent {
  color: var(--lightning);
}
.protocol-card h3 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  font-weight: 700;
}
.protocol-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Use-cases section */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.use-case-card {
  display: block;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 150ms ease, transform 150ms ease;
}
.use-case-card:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent-secondary) 50%, var(--border));
  transform: translateY(-2px);
}
.use-case-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: #fff;
  border-radius: var(--radius-sm);
}
.use-case-icon svg { width: 22px; height: 22px; }
.use-case-card h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
  font-weight: 700;
}
.use-case-tag {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.use-case-card p {
  margin: 0 0 10px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}
.use-case-card p:last-child { margin-bottom: 0; }
/* Pain → fix → go-next narrative inside each card. The pain leads with
 * a muted strong-tag, the fix follows with a dense neutral paragraph,
 * the "go" line is a one-line accent CTA-style link affordance so the
 * card feels resolved instead of trailing off. */
.use-case-pain strong,
.use-case-fix strong {
  color: var(--text);
  font-weight: 600;
}
.use-case-go {
  margin-top: 4px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
.use-case-card:hover .use-case-go {
  text-decoration: underline;
}

/* ============================================================
 * Use-case pair layout — replaces the .use-case-grid card grid for
 * the index page. Each pair has a full-width header (icon + title)
 * above a 2-column body: pain (red-tinted) on the left, Surgewave fix
 * (cyan-tinted) on the right. Even pairs flip the inner direction
 * so the eye zigzags down the page rather than scanning a column.
 * Mobile collapses to a single column (pain above fix).
 * ============================================================ */
.use-case-pairs {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}
.use-case-pair {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.use-case-pair-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.use-case-pair-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: #fff;
  border-radius: var(--radius-sm);
}
.use-case-pair-icon svg { width: 22px; height: 22px; }
.use-case-pair-head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.use-case-pair-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.use-case-pair:nth-child(even) .use-case-pair-body {
  /* Flip column order on even pairs so pain ↔ fix sides alternate
     down the page. The DOM order stays pain-then-fix for sensible
     screen-reader narration; only the visual ordering swaps. */
  direction: rtl;
}
.use-case-pair:nth-child(even) .use-case-pair-pain,
.use-case-pair:nth-child(even) .use-case-pair-fix {
  direction: ltr;
}
.use-case-pair-pain,
.use-case-pair-fix {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.use-case-pair-pain {
  background: color-mix(in srgb, var(--danger, #ef4444) 7%, transparent);
  border-right: 1px solid var(--border);
}
.use-case-pair-fix {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.use-case-pair-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.use-case-pair-pain .use-case-pair-label {
  color: var(--danger, #ef4444);
}
.use-case-pair-fix .use-case-pair-label {
  color: var(--accent);
}
.use-case-pair-pain p,
.use-case-pair-fix p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.use-case-pair-go {
  margin-top: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  align-self: flex-start;
}
.use-case-pair-go:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .use-case-pair-body,
  .use-case-pair:nth-child(even) .use-case-pair-body {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .use-case-pair-pain {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .use-case-pair-head {
    padding: 16px 20px;
  }
  .use-case-pair-pain,
  .use-case-pair-fix {
    padding: 20px;
  }
}

/* Comparison table */
.comparison-table-wrap {
  margin-top: 32px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.comparison-table th, .comparison-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.comparison-table thead th {
  background: var(--bg);
  font-weight: 700;
  color: var(--text);
  border-bottom: 2px solid var(--border);
}
.comparison-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.comparison-col-self {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.comparison-cell-self {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  font-weight: 500;
  color: var(--text);
}
/* Group-Header-Zeilen — visuell als Section-Separator zwischen den 5 Bloecken
   (Admin / Performance / Cost / Reliability / Capability). Linksbuendig,
   Uppercase, accent-Eyebrow-Style. */
.comparison-group-header th {
  background: var(--surface);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
  border-top: 2px solid var(--accent);
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-footnote {
  margin: 24px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Install grid */
/* Tabbed install block — single chrome with a tab strip on top and
 * one visible code panel below. Replaces the previous .install-grid
 * of 4 parallel cards. JS toggles .is-active between tabs/panels. */
.install-tabbed {
  margin: 32px auto 0;
  max-width: 720px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.install-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.install-tab {
  flex: 0 0 auto;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.install-tab:hover {
  color: var(--text);
}
.install-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.install-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.install-panels {
  position: relative;
}
.install-panel {
  margin: 0;
  padding: 20px 22px;
  background: var(--code-bg);
  color: var(--code-text);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
}
.install-panel[hidden] { display: none; }
.install-panel code {
  font-family: var(--font-mono);
  white-space: pre;
}
.install-comment { color: #64748b; }
.install-footnote {
  margin: 24px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.install-footnote code {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent-strong);
}
:root[data-theme-resolved="dark"] .install-footnote code {
  color: var(--accent-light);
}

/* Launch steps */
/* Vertical numbered timeline — big accent circles on a continuous
 * dashed guideline, content sits to the right of each circle. The
 * circle column is fixed-width; the body column flexes to fill the
 * remainder. The connecting line is drawn as a ::before on the
 * timeline element so a single dash strip spans all steps and never
 * extends past the last circle. */
/* === Up-and-running wizard — horizontal stepper (Bowire-Pattern) ===
   Three steps: Choose -> Install -> Run. Step 1 holds a checkbox list
   for picking components; steps 2+3 render dynamic snippets based on
   the picker. JS lives inline at the bottom of launch.html. */

.launch-stepper {
  max-width: 880px;
  margin: 40px auto 0;
}

/* Indicator row: 3 circles + 2 connectors, horizontally centred. */
.launch-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  gap: 0;
}
.launch-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: color 0.15s;
}
.launch-step[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.launch-step:not([aria-disabled="true"]):hover {
  color: var(--text);
}
.launch-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.15s;
}
.launch-step.is-active .launch-step-num {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.launch-step.is-active .launch-step-label {
  color: var(--text);
  font-weight: 600;
}
.launch-step.is-completed .launch-step-num {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}
.launch-step.is-completed .launch-step-num-digit { display: none; }
.launch-step.is-completed .launch-step-num::after {
  content: "✓";
  font-size: 16px;
  line-height: 1;
}
.launch-step.is-completed .launch-step-label { color: #10b981; }
.launch-step-label {
  font-size: 0.95rem;
  font-weight: 500;
}
.launch-step-connector {
  flex: 0 0 60px;
  height: 2px;
  background: var(--border);
  margin: 0 4px;
}

/* Panels — only the active panel is visible. */
.launch-panel {
  display: none;
  animation: launch-fade-in 0.22s ease;
}
.launch-panel.is-active { display: block; }
@keyframes launch-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.launch-prompt {
  text-align: center;
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 0.98rem;
}

/* Step 1 — component picker (checkbox cards) */
.launch-components {
  list-style: none;
  padding: 0;
  margin: 0 auto 24px;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.launch-component label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.launch-component label:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.launch-component input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
}
.launch-component input[type="checkbox"]:disabled {
  cursor: not-allowed;
}
.launch-component label:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elevated));
}
.launch-component-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.launch-component-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.launch-component-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.launch-component-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}
.launch-component.is-required label {
  border-style: dashed;
}

/* Snippet block — Step 2 + 3 */
.launch-snippet {
  margin: 0 auto 24px;
  max-width: 720px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.launch-snippet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.launch-snippet-copy {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.launch-snippet-copy:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--accent);
}
.launch-snippet-copy.is-copied {
  color: #10b981;
}
.launch-snippet pre {
  margin: 0;
  padding: 18px 20px;
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.6;
  overflow-x: auto;
  color: var(--text);
}

/* Step 3 — next-steps follow-up list */
.launch-next-steps {
  margin: 24px auto 0;
  max-width: 720px;
}
.launch-next-steps-title {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.launch-next-steps ul {
  margin: 0;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.launch-next-steps a {
  color: var(--accent);
  font-weight: 500;
}

/* Navigation buttons (Next / Back / Change selection) */
.launch-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px auto 0;
  max-width: 720px;
}
.launch-nav-end { justify-content: flex-end; }
.launch-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.launch-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.launch-nav-next {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.launch-nav-next:hover {
  background: color-mix(in srgb, var(--accent) 85%, #000);
  border-color: color-mix(in srgb, var(--accent) 85%, #000);
  color: #fff;
}

/* Old grid still referenced by older markup (kept for compatibility
 * with any external embed) — unused on index.html since launch.html
 * now ships the timeline. Remove after a release cycle. */
.launch-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.launch-step {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.launch-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 700;
  border-radius: 50%;
}
.launch-step h3 {
  font-size: 1.05rem;
  margin: 0 0 12px;
  font-weight: 700;
}
.launch-step .install-snippet {
  font-size: 0.82rem;
  padding: 12px 14px;
}
.launch-footnote {
  margin: 24px auto 0;
  max-width: 600px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* ============================================================
 * Force-graph hero — full-bleed dark canvas with a live physics
 * simulation rendered via SVG. Markup + script live in
 * site/_includes/hero.html. Keep the styles centralised here so the
 * cascade resolves predictably with the rest of the site.
 *
 * Forced-dark on purpose — the cluster glow + reticle palette were
 * tuned for a near-black backdrop; light mode would defeat them.
 * Sections below the hero remain theme-aware.
 * ============================================================ */
.hero-fg {
  position: relative;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  padding: 0;
  margin-top: -64px; /* pull under the sticky header so canvas runs to the top edge */
  background:
    /* Halo anchors at the eye-dot position (33% / 50%) plus the same
       translate offset that the canvas SVG carries (translate(-17px,
       -39px) on .hero-fg-canvas). Without the offset, the halo
       stays at the un-translated section centre and drifts away from
       the now-shifted force-graph cluster. Mobile recentres in the
       breakpoint below where layout collapses to one column. */
    radial-gradient(circle at calc(33% - 19px) calc(50% - 38px), rgba(56, 189, 248, 0.10) 0%, transparent 45%),
    #080d1a;
  color: #e6ecf5;
}
@media (max-width: 720px) {
  .hero-fg {
    background:
      radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.10) 0%, transparent 45%),
      #080d1a;
  }
}
.hero-fg-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Fine visual nudge so the cluster centre and the lockup centre
     stay aligned after the lockup's grid placement (left column).
     Mobile resets this in the breakpoint below since lockup recenters. */
  transform: translate(-19px, -38px);
}
@media (max-width: 720px) {
  .hero-fg-canvas { transform: none; }
}
.hero-fg-canvas svg { width: 100%; height: 100%; }

/* Eye glow — driven by SVG content + a CSS keyframe pulse. The transform
   anchors on its own bounding box so the breathing effect doesn't shift
   the eye position. */
.hero-fg-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-fg-eye 6s ease-in-out infinite;
}
@keyframes hero-fg-eye {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.06); }
}

/* Data-flow on the force-graph edges. The dashes are short relative
 * to the typical edge length so each line carries 6-12 visible
 * "packets" at once; stroke-dashoffset animates one full
 * dash+gap cycle (8 px) per period, producing a steady left-to-right
 * crawl that reads as data flowing toward the surgewave-eye. Eyelinks
 * (feature → eye) get a faster cycle so the central feeds feel
 * higher-bandwidth than the inter-node mesh. */
.hero-fg-edge {
  stroke-dasharray: 3 5;
  animation: hero-fg-flow 1.6s linear infinite;
}
.hero-fg-eyelink {
  stroke-dasharray: 2 4;
  animation: hero-fg-flow 0.9s linear infinite;
}
@keyframes hero-fg-flow {
  to { stroke-dashoffset: -8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fg-edge,
  .hero-fg-eyelink {
    animation: none;
    stroke-dasharray: none;
  }
}

/* Sun layers — three independent breathing animations stacked at the
 * eye centre. Periods (3.7s / 5.1s / 7.3s) are deliberately co-prime
 * so the corona, disc, and core never re-sync; the eye reads as
 * organically alive instead of a single keyframe pulse. */
.hero-fg-sun-corona,
.hero-fg-sun-disc,
.hero-fg-sun-core {
  transform-origin: center;
  transform-box: fill-box;
}
.hero-fg-sun-corona { animation: hero-fg-sun-corona 7.3s ease-in-out infinite; }
.hero-fg-sun-disc   { animation: hero-fg-sun-disc   5.1s ease-in-out infinite; }
.hero-fg-sun-core   { animation: hero-fg-sun-core   3.7s ease-in-out infinite; }
@keyframes hero-fg-sun-corona {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.18); opacity: 0.55; }
}
@keyframes hero-fg-sun-disc {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(0.94); opacity: 0.92; }
}
@keyframes hero-fg-sun-core {
  0%, 100% { transform: scale(1);    opacity: 1; }
  35%      { transform: scale(1.10); opacity: 0.95; }
  70%      { transform: scale(0.95); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fg-eye,
  .hero-fg-sun-corona,
  .hero-fg-sun-disc,
  .hero-fg-sun-core { animation: none; }
}

.hero-fg-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: rgba(230, 236, 245, 0.78);
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Two-column hero layout — Petabridge-style: lockup on the left
 * over the canvas eye-dot (which the JS positions at viewBox x=528
 * = ~33% of width), headline / lede / CTAs stack on the right. The
 * grid collapses to a single column under 720 px so phones get the
 * stacked centred layout instead of a squeezed two-column. */
.hero-fg-content {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 80px);
  display: grid;
  grid-template-columns: minmax(280px, 40%) 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  color: #e6ecf5;
}

/* Logo slot — vertical lockup as the first grid child, vertically
 * centred in its column over the canvas eye-dot. No more absolute
 * positioning; the grid does the placement. */
.hero-fg-logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(280px, 44vh, 460px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-fg-logo-slot img,
.hero-fg-logo-slot svg { height: 100%; width: auto; }

/* Mobile — collapse to single centred column, lockup on top, text
 * stack below. Same shape the previous centred layout had. */
@media (max-width: 720px) {
  .hero-fg-content {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 24px;
    text-align: center;
  }
  .hero-fg-logo-slot {
    height: clamp(220px, 32vh, 320px);
  }
}

/* Hero text overrides — light typography against the dark canvas. */
.hero-fg-content .hero-eyebrow {
  color: rgba(230, 236, 245, 0.85);
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(230, 236, 245, 0.18);
  margin-bottom: 18px;
}
.hero-fg-content .hero-title {
  color: #f6f9ff;
  max-width: 720px;
  /* In the two-column layout the headline can scale up — there's no
     longer a horizontal column constraint from the centred-stack
     layout. Allow it to wrap naturally over 2 lines on the right
     column; text-wrap:balance keeps the lines roughly equal length. */
  font-size: clamp(1.8rem, 2.8vw + 0.8rem, 3.2rem);
  text-wrap: balance;
  line-height: 1.15;
  text-shadow: 0 2px 28px rgba(8, 13, 26, 0.85);
  margin: 0 0 20px;
}
@media (max-width: 720px) {
  .hero-fg-content .hero-title {
    font-size: clamp(1.4rem, 5.2vw, 2rem);
  }
}
.hero-fg-content .hero-accent {
  /* Hold the accent line at the previous H1 size so only "Your Stream."
     grows when the headline cap is bumped. The accent reads as the
     supporting punchline, kept proportionally smaller than the lead. */
  font-size: clamp(1.5rem, 2.2vw + 0.6rem, 2.6rem);
  background: linear-gradient(135deg, #7dd3fc, #c4b5fd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* .hero-fg-text ist der eigentliche Text-Container (H1 + Lede + CTA +
   Badges) in Spalte 2 des Hero-Grids. Ohne max-width hier nimmt er die
   volle 1fr-Spaltenbreite ein und die per-Element max-widths (.hero-lede,
   .hero-title) bleiben wirkungslos solange sie groesser sind als der
   verfuegbare Spalten-Platz. Mit 560px wird der ganze Text-Block enger
   gefasst und die laengeren Lede-Saetze brechen kompakter um. */
.hero-fg-content .hero-fg-text {
  max-width: 560px;
}
.hero-fg-content .hero-lede {
  color: rgba(230, 236, 245, 0.78);
  font-size: 1rem;
  text-wrap: pretty;
  margin: 0 0 32px;
}
.hero-fg-content .hero-cta { justify-content: flex-start; margin-bottom: 0; }
@media (max-width: 720px) {
  .hero-fg-content .hero-cta { justify-content: center; }
}

/* Reassurance micro-copy under the CTA row — tiny, low-contrast, sits
   close enough to the buttons that it reads as a footnote on the
   "Get started" promise rather than another paragraph. Middot-separated
   list matches the Redpanda hero pattern. */
.hero-fg-content .hero-reassure {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: rgba(230, 236, 245, 0.55);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .hero-fg-content .hero-reassure { text-align: center; }
}

.hero-fg-content .btn-ghost {
  color: rgba(230, 236, 245, 0.92);
  border-color: rgba(230, 236, 245, 0.30);
}
.hero-fg-content .btn-ghost:hover {
  border-color: #7dd3fc;
  color: #7dd3fc;
}

@media (max-width: 720px) {
  .header-nav { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .protocols, .use-cases, .comparison, .install, .launch {
    padding: 64px 0;
  }
  .hero-fg { min-height: 100vh; }
  .hero-fg-content { padding-top: 100px; }
}


/* ===== Screenshots + Demo Videos + Theme-aware Images (copied from Bowire) ===== */

.screenshot-hero {
    margin: 32px auto 24px;
    max-width: 1200px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(99, 102, 241, 0.15),
                0 0 80px rgba(99, 102, 241, 0.08);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.screenshot-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(99, 102, 241, 0.25),
                0 0 100px rgba(99, 102, 241, 0.12);
    border-color: var(--accent);
}

.screenshot-hero a {
    display: block;
    line-height: 0;
}

.screenshot-hero img,
.screenshot-hero video.demo-video {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-hero video.demo-video {
    background: var(--bg);
}

/* Video hero as a button — click anywhere to go fullscreen. Hint overlay
   fades in on hover so the affordance is discoverable without crowding
   the demo when idle. */
.demo-video-expand {
    padding: 0;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
    position: relative;
    display: block;
}

.demo-video-expand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.demo-video-hint {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 15, 23, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.demo-video-expand:hover .demo-video-hint,
.demo-video-expand:focus-visible .demo-video-hint {
    opacity: 1;
    transform: translateY(0);
}

.screenshot-caption {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 720px;
    margin: 0 auto 64px;
}

.screenshot-grid-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.screenshot-grid-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 640px;
    margin: 0 auto 40px;
}

/* Legacy 2-column grid kept as a fallback for pages that still use it. */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---- Carousel wrapper: holds prev/next buttons on the flanks + the
       scrolling strip in the middle. Keeps the buttons at the viewport
       edge so they don't cover the cards. ---- */
.screenshot-carousel-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 1100px;
    margin: 0 auto;
}

.screenshot-nav-btn {
    flex: 0 0 40px;
    width: 40px;
    align-self: center;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.screenshot-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.screenshot-nav-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---- Dot indicators row ---- */
.screenshot-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.screenshot-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.screenshot-dot:hover {
    background: var(--text-secondary);
    transform: scale(1.2);
}

.screenshot-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

.screenshot-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tooltip label above each dot — mirrors the section-nav dots on the
   right edge. Hidden by default, appears on hover / keyboard focus. */
.screenshot-dot-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.screenshot-dot:hover .screenshot-dot-label,
.screenshot-dot:focus-visible .screenshot-dot-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Horizontal carousel — auto-scroll with hover / focus pause ---- */
.screenshot-carousel {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    /* Soft edge-fade so cards scroll out under a gradient instead of
       hitting a hard clip — reads like a continuous film strip.
       Kept narrow (20px) so it hints at "more cards coming" without
       swallowing a meaningful slice of the last visible card. */
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    /* scroll-snap-type was x-mandatory, but that cancelled every 1-pixel
       auto-drift step ("snap back to the nearest card"). Using none here
       lets the JS drift accumulate and also keeps programmatic scrollTo
       smoothly animated without getting clamped to snap points. */
    scroll-snap-type: none;
    /* Hide the native scrollbar — it breaks the clean film-strip look.
       Manual horizontal scroll still works via mouse-wheel-with-shift,
       trackpad / touch gestures, or keyboard arrows (tabindex on the
       section makes it focusable). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.screenshot-carousel::-webkit-scrollbar {
    display: none;
}

.screenshot-carousel-track {
    display: flex;
    gap: 20px;
    /* Horizontal padding is set dynamically by main.js so the first and
       last cards can be centred inside the viewport — it depends on the
       actual carousel width, which CSS calc can't reliably observe. */
    padding: 6px 0 16px;
    width: max-content;
}

/* The drift used to be a CSS keyframe animation, but that made pausing /
   resuming painful — every resume snapped to animation-start. The JS
   controller in main.js now increments carousel.scrollLeft directly,
   which preserves position across pause/resume cycles. */

.screenshot-card {
    display: block;
    flex: 0 0 340px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    /* snap-align left here for completeness even though scroll-snap-type is
       currently 'none' — lets us re-enable proximity snap later with one flip. */
    scroll-snap-align: center;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.screenshot-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.screenshot-card img {
    width: 100%;
    height: 192px;
    object-fit: cover;
    object-position: top left;
    display: block;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

/* Placeholder slot for cards whose final screenshot has not been captured yet.
   Wave-mark on a flat surface keeps the grid visually balanced and obviously
   intentional — no missing-image icon flicker. */
.screenshot-card-placeholder {
    width: 100%;
    height: 192px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px;
    background:
        radial-gradient(circle at 25% 30%, rgba(51, 188, 255, 0.14), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(51, 188, 255, 0.08), transparent 55%),
        var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    color: var(--accent);
}

.screenshot-card-placeholder-mark {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    opacity: 0.85;
}

.screenshot-card-placeholder-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.screenshot-card-placeholder-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}

.screenshot-card-placeholder-caption {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.screenshot-card kbd {
    font-family: var(--font-mono);
    font-size: 0.85em;
    padding: 1px 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.screenshot-card-body {
    padding: 18px 20px 22px;
}

.screenshot-card-body h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.screenshot-card-body p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* "More details →" affordance — the whole card is already a link, but the
   pseudo element makes it obvious *that* it is. Nudges forward on hover to
   telegraph the click target. */
.screenshot-card-body::after {
    content: 'More details →';
    display: inline-block;
    margin-top: 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.01em;
    transition: transform 0.2s, color 0.2s;
}

.screenshot-card:hover .screenshot-card-body::after {
    color: var(--accent-hover);
    transform: translateX(3px);
}

/* ==========================================================
   Theme-aware screenshots — paired <img>/<video> elements,
   one for dark and one for light. The site theme attribute
   on <html> hides the wrong one. Using `display:none` keeps
   layout calc cheap; modern browsers also skip fetching the
   hidden <img> when `loading="lazy"` is set.
   ========================================================== */
:root[data-theme="dark"] .theme-img-light,
:root[data-theme="dark"] .theme-video-light {
    display: none !important;
}

:root[data-theme="light"] .theme-img-dark,
:root[data-theme="light"] .theme-video-dark {
    display: none !important;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] .theme-img-light,
    :root[data-theme="auto"] .theme-video-light,
    :root:not([data-theme]) .theme-img-light,
    :root:not([data-theme]) .theme-video-light {
        display: none !important;
    }
}

@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .theme-img-dark,
    :root[data-theme="auto"] .theme-video-dark,
    :root:not([data-theme]) .theme-img-dark,
    :root:not([data-theme]) .theme-video-dark {
        display: none !important;
    }
}

/* ===========================================================
   Section-Rail + Page-Outline-Modal (Bowire-Port, Welle C.2)

   .section-rail sits on the right edge, vertical-centred. It carries:
     1. .section-nav — one .section-nav-dot per top-level <section>,
        scrollspy-active. Hover reveals a tooltip-style label.
     2. .section-tools — single .section-tools-trigger pill that opens
        the .surgewave-page-overlay modal with the full (un-sampled)
        section list. Dot-nav samples down to MAX_DOTS=8 entries when
        the page has more sections than fit; the outline modal always
        shows the complete list.

   Both pills sit on the same right-edge axis as separate flex children
   so each can grow/shrink independently. JS-Setup happens in main.js
   (Section-Rail-Builder); the modal target is in _includes/page-outline-
   overlay.html.
   =========================================================== */
.section-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 90;
}
.section-rail[hidden] { display: none; }

.section-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 6px;
    background: rgba(15, 15, 23, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    border: 1px solid var(--border);
}
:root[data-theme="light"] .section-nav,
:root[data-theme="light"] .section-tools {
    background: rgba(250, 250, 255, 0.7);
}
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .section-nav,
    :root[data-theme="auto"] .section-tools {
        background: rgba(250, 250, 255, 0.7);
    }
}

.section-tools {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 6px;
    background: rgba(15, 15, 23, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    border: 1px solid var(--border);
}
.section-tools[hidden] { display: none; }
.section-tools-trigger {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.section-tools-trigger:hover,
.section-tools-trigger:focus-visible,
.section-tools-trigger[aria-expanded="true"] {
    color: var(--accent);
    background: rgba(14, 165, 233, 0.12);
    outline: none;
}

.section-nav-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
.section-nav-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.4;
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
}
.section-nav-dot:hover::before,
.section-nav-dot:focus-visible::before {
    opacity: 0.85;
    transform: scale(1.25);
}
.section-nav-dot.is-active::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.35);
}
.section-nav-dot:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.section-nav-dot-label {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
    white-space: nowrap;
    padding: 4px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.section-nav-dot:hover .section-nav-dot-label,
.section-nav-dot:focus-visible .section-nav-dot-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.section-nav-gap {
    width: 24px;
    height: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}
.section-nav-gap::before,
.section-nav-gap::after {
    content: '';
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.35;
}

@media (max-width: 768px) {
    /* Mobile: floating rail kollidiert mit Article-Text auf der rechten
       Kante (kein fester Gutter). Mobile-Nutzer bekommen Outline-Funktion
       ueber den Burger-Menue + Anchor-Links im Article. */
    .section-rail { display: none; }
}

/* Page-Outline-Modal — geoeffnet vom .section-tools-trigger.
   Same idiom wie das Search-Overlay (translucent backdrop, three-band
   panel: title cap / scrollable nav / hint footer). Listet alle
   <section>s (full, nicht sampled) so dass der Modal die Dot-Nav
   komplementiert. */
.surgewave-page-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(12vh, 120px);
    background: rgba(15, 15, 23, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
:root[data-theme="light"] .surgewave-page-overlay {
    background: rgba(200, 200, 220, 0.55);
}
@media (prefers-color-scheme: light) {
    :root[data-theme="auto"] .surgewave-page-overlay {
        background: rgba(200, 200, 220, 0.55);
    }
}
.surgewave-page-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.surgewave-page-overlay-panel {
    width: min(560px, calc(100% - 48px));
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    transform: translateY(-8px);
    transition: transform 0.2s ease;
}
.surgewave-page-overlay.is-open .surgewave-page-overlay-panel {
    transform: translateY(0);
}
.surgewave-page-overlay-title {
    flex-shrink: 0;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.surgewave-page-overlay nav.page-outline {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    margin: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}
.surgewave-page-overlay nav.page-outline::-webkit-scrollbar { width: 6px; }
.surgewave-page-overlay nav.page-outline::-webkit-scrollbar-track { background: transparent; }
.surgewave-page-overlay nav.page-outline::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}
.surgewave-page-overlay nav.page-outline a {
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    display: block;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: 4px;
    line-height: 1.45;
    transition: color 0.15s, background 0.15s;
}
.surgewave-page-overlay nav.page-outline a:hover,
.surgewave-page-overlay nav.page-outline a:focus-visible {
    color: var(--accent);
    background: var(--bg-elevated);
    outline: none;
}
.surgewave-page-overlay nav.page-outline a.is-active {
    color: var(--accent);
    font-weight: 600;
    background: var(--bg-elevated);
}
/* Keyboard / Hover-Highlight — separat vom "you are here"-Marker
   damit beide koexistieren. Selber Idiom wie .pagefind-ui__result.
   is-highlighted im Search-Overlay. */
.surgewave-page-overlay nav.page-outline a.is-highlighted {
    color: var(--accent);
    background: rgba(14, 165, 233, 0.08);
}
.surgewave-page-overlay-hint {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: center;
}
.surgewave-page-overlay-hint kbd {
    display: inline-block;
    min-width: 20px;
    padding: 1px 5px;
    margin: 0 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    color: var(--text);
    line-height: 1.4;
}

/* ===========================================================
   Section banner (Bowire-Port) — a themed maritime photo that melts
   into the section background via a bottom-fade mask, instead of
   clipping at a hard edge. Reusable across sections via
   _includes/section-banner.html. The ::after layer lays a subtle
   Surgewave-blue tint over the (desaturated) photo so it reads as
   part of the brand rather than a stock image. Top corners rounded;
   bottom feathers out so the content below feels continuous.

   Images are supplied later (Surge/Wave-themed); the include renders
   nothing until an `image` is passed, so there's no broken-image
   placeholder in the meantime.
   =========================================================== */
.section-banner {
    position: relative;
    overflow: hidden;
    margin: 0 0 12px;
    background: transparent;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.section-banner img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: cover;
    filter: grayscale(0.50) saturate(0.88) brightness(0.94);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.30) 80%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.30) 80%, rgba(0,0,0,0) 100%);
}
.section-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(51, 188, 255, 0.16), rgba(0, 62, 96, 0.10));
    mix-blend-mode: multiply;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.30) 80%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.30) 80%, rgba(0,0,0,0) 100%);
}

/* ===========================================================
   FAQ section (landing page) — native <details> accordion, no JS.
   `.section-eyebrow` is the generic eyebrow (the metrics-strip has its
   own scoped one); defined here so any section can use it.
   =========================================================== */
.section-eyebrow {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.faq {
  padding: 80px 0;
}
.faq .section-lede {
  margin-bottom: 32px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--surface);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: color 0.15s, background 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Chevron — rotates when the item is open. */
.faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s;
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);
}
.faq-item summary:hover {
  color: var(--accent);
  background: var(--bg-elevated);
}
.faq-item summary:hover::after {
  border-color: var(--accent);
}
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.faq-answer {
  padding: 0 20px 18px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.faq-answer p { margin: 0 0 8px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--accent); }
.faq-answer pre {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.85rem;
}

/* ===========================================================
   Roadmap section (Bowire-Port) — shipped grid (green ✓ coins) +
   "Up next" divider + numbered backlog grid. Cards are links.
   Uses the shared .section-banner for the optional themed header.
   =========================================================== */
.roadmap {
  padding: 100px 0;
  background: var(--bg-elevated);
}
.roadmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}
.roadmap-section-label {
  max-width: 800px;
  margin: 0 auto 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.roadmap-divider {
  max-width: 800px;
  margin: 32px auto 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.roadmap-divider-line { height: 1px; background: var(--border); }
.roadmap-divider-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.roadmap-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  transition: border-color 0.2s, transform 0.2s;
  color: inherit;
  text-decoration: none;
}
.roadmap-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.roadmap-card:hover h3 { color: var(--accent); transition: color 0.2s; }
.roadmap-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.roadmap-number.roadmap-number-shipped { background: var(--success, #22c55e); color: #fff; }
.roadmap-number.roadmap-number-shipped svg { width: 22px; height: 22px; }
.roadmap-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  align-self: stretch;
}
.roadmap-card h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; color: var(--text); }
.roadmap-card p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.roadmap-card code { font-size: 0.85em; }
.roadmap-card-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
  vertical-align: 2px;
}
.roadmap-cta {
  text-align: center;
  margin: 32px 0 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}
.roadmap-cta a { color: var(--accent); font-weight: 600; }
.roadmap-cta a:hover { color: var(--accent-hover); text-decoration: underline; }