/* ============================================================
   pgBelayCrew — landing page
   Aesthetic mirrors modules/ui/src/routes/login (calm, atmospheric)
   ============================================================ */

:root {
  --bg-base: #0a0a0a;
  --bg-surface: #111111;
  --bg-surface-2: #161616;
  --bg-surface-3: #1c1c1c;
  --bg-grid: #1a1a1a;

  --border-subtle: #1f1f1f;
  --border-default: #2a2a2a;
  --border-strong: #3a3a3a;
  --border-bracket: #4a4a4a;

  --text-primary: #f5f5f5;
  --text-secondary: #a3a3a3;
  --text-tertiary: #6b6b6b;
  --text-disabled: #404040;

  --accent: #ff5544;
  --accent-hover: #ff6655;
  --accent-dim: #cc4435;
  --accent-glow: rgba(255, 85, 68, 0.15);

  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #3b82f6;

  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --radius-sm: 2px;
  --radius-default: 4px;

  --transition: cubic-bezier(0.16, 1, 0.3, 1);

  --container-max: 1200px;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg-base);
  font-feature-settings: 'calt' 1, 'liga' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
  scroll-behavior: smooth;
  position: relative;
  isolation: isolate;
}

html { scroll-behavior: smooth; }

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

code {
  font-family: var(--font-mono);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  color: var(--text-primary);
}

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

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

.heading { letter-spacing: -0.02em; }
.tracking-label { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.accent { color: var(--accent); }

/* ============================================================
   Constellation backdrop — full page
   ============================================================ */
.constellation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 85, 68, 0.05) 0%, transparent 70%);
}

/* ============================================================
   Bracket frame — used everywhere
   ============================================================ */
.bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-bracket);
  pointer-events: none;
  transition: border-color 200ms var(--transition);
}
.bracket-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.bracket-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.bracket-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.bracket-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
  background: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 100;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.brand-logo {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.brand-name { display: flex; align-items: baseline; gap: 1px; }
.brand-pg { color: var(--text-tertiary); font-weight: 500; }
.brand-rest { color: var(--text-primary); }
.brand-rest .crew { color: var(--accent); }

.topnav {
  display: flex;
  gap: 28px;
  font-size: 12px;
  color: var(--text-secondary);
}
.topnav a {
  position: relative;
  padding: 6px 0;
  transition: color 120ms var(--transition);
}
.topnav a:hover { color: var(--text-primary); }
.topnav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--transition);
}
.topnav a:hover::after { transform: scaleX(1); }

.topbar-spacer { flex: 1; }

@media (max-width: 900px) {
  .topnav { display: none; }
}

/* ============================================================
   Status signal pill (from login)
   ============================================================ */
.signal {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success);
}
.signal-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius-default);
  cursor: pointer;
  transition:
    background 160ms var(--transition),
    border-color 160ms var(--transition),
    transform 160ms var(--transition),
    box-shadow 160ms var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { font-size: 11px; padding: 6px 12px; }
.btn-md { font-size: 12px; padding: 9px 18px; }
.btn-lg { font-size: 13px; padding: 13px 24px; }

.btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 8px 24px -8px var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 12px 32px -6px rgba(255, 85, 68, 0.3);
}

.btn-secondary {
  background: rgba(22, 22, 22, 0.6);
  color: var(--text-primary);
  border-color: var(--border-default);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  background: var(--bg-surface-2);
  border-color: var(--border-strong);
}

/* ============================================================
   Hero — login-page atmosphere
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 96px;
  overflow: hidden;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 760px;
  animation: fade-up 700ms var(--transition) both;
}

.signal-online {
  margin-bottom: 28px;
}

/* Title with t-pg/t-belay/t-crew + animated cursor (from login) */
.hero-title {
  font-family: var(--font-mono);
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  margin: 0 0 28px;
}
.t-pg { color: var(--text-tertiary); font-weight: 500; }
.t-belay { color: var(--text-primary); }
.t-crew {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(255, 85, 68, 0.6);
  animation: glow-breathe 3.2s ease-in-out infinite;
}
.t-cursor {
  display: inline-block;
  width: 14px;
  height: clamp(40px, 5.4vw, 60px);
  margin-left: 6px;
  background: var(--accent);
  transform: translateY(4px);
  animation: cursor-blink 1.05s steps(1) infinite;
}

.hero-hook {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
}
.hook-em {
  color: var(--text-primary);
  font-weight: 500;
}

.hero-sub {
  margin: 0 0 32px;
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.7;
  max-width: 60ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-quote {
  margin: 0;
  max-width: 44ch;
  font-size: 11px;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-tertiary);
  border-top: 1px dashed var(--border-default);
  padding-top: 18px;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glow-breathe {
  0%, 100% { text-shadow: 0 0 14px rgba(255, 85, 68, 0.45); }
  50% { text-shadow: 0 0 24px rgba(255, 85, 68, 0.85); }
}
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ============================================================
   Hero — faux app window (real UI mockup)
   ============================================================ */
.hero-mockup {
  width: 100%;
  animation: fade-up 800ms var(--transition) 120ms both;
}

.app-window {
  position: relative;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.85), rgba(17, 17, 17, 0.95));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 30px 80px -20px rgba(255, 85, 68, 0.12),
    0 50px 120px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.app-window > .bracket {
  border-color: var(--accent);
  width: 18px; height: 18px;
}

/* Window topbar */
.app-topbar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-secondary);
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 700;
}
.app-brand-name { color: var(--text-primary); font-weight: 700; }
.app-brand-name .dim { color: var(--text-tertiary); font-weight: 500; }
.app-brand-name .acc { color: var(--accent); }
.app-bread {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
}
.bread-sep { color: var(--text-disabled); }
.bread-current { color: var(--text-primary); }
.app-spacer { flex: 1; }
.app-sse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--success);
  letter-spacing: 0.04em;
}
.app-sse .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.app-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  font-size: 10px;
  color: var(--text-primary);
}
.app-user .avatar {
  width: 14px; height: 14px;
  background: var(--accent-dim);
  color: #000;
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.app-user .role {
  color: var(--text-tertiary);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}

/* Window body */
.app-body {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.app-sidebar {
  padding: 12px 10px 10px;
  border-right: 1px solid var(--border-subtle);
  background: rgba(17, 17, 17, 0.7);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.side-section {
  margin-top: 14px;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
}
.side-link.active {
  color: var(--accent);
  background: rgba(255, 85, 68, 0.08);
  border-left-color: var(--accent);
}
.side-link .ico {
  width: 11px; height: 11px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}
.side-link.active .ico { opacity: 1; }

/* Inline SVG icons via data: URIs (lucide-style strokes) */
.ico-dash     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); }
.ico-db       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='5' rx='9' ry='3'/><path d='M3 5v14a9 3 0 0 0 18 0V5'/><path d='M3 12a9 3 0 0 0 18 0'/></svg>"); }
.ico-bookmark { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>"); }
.ico-shield   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='M9 12l2 2 4-4'/></svg>"); }
.ico-cog      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); }
.ico-scroll   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8 21h12a2 2 0 0 0 2-2v-2H10v2a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v3h4'/><path d='M19 17V5a2 2 0 0 0-2-2H4'/></svg>"); }
.ico-hist     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 3-6.7L3 8'/><path d='M3 3v5h5'/><path d='M12 7v5l4 2'/></svg>"); }
.ico-users    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ico-disk     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='22' y1='12' x2='2' y2='12'/><path d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/><line x1='6' y1='16' x2='6.01' y2='16'/><line x1='10' y1='16' x2='10.01' y2='16'/></svg>"); }

.kbd {
  margin-left: auto;
  font-size: 9px;
  color: var(--text-tertiary);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: 2px;
  padding: 0 4px;
  font-family: var(--font-mono);
}
.side-link.active .kbd {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(255, 85, 68, 0.06);
}

/* Cluster selector (between top nav and cluster-scoped section) */
.side-cluster {
  margin: 12px 6px;
  padding: 8px 10px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
}
.side-cluster-label {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.side-cluster-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.side-cluster-name.muted { color: var(--text-tertiary); font-weight: 400; }
.side-cluster-value .chevron {
  color: var(--text-tertiary);
  font-size: 9px;
}
.side-cluster-meta {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.side-version {
  margin-top: auto;
  padding: 10px 10px 4px;
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

/* Main */
.app-main {
  padding: 16px 18px 18px;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.page-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.page-sub {
  font-size: 10px;
  color: var(--text-tertiary);
  margin: 0;
}
.scope-toggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
}
.scope-btn {
  font-size: 10px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.scope-btn.active {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}

/* KPI tiles */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.kpi-tile {
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
}
.kpi-label {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.kpi-value.status-success { color: var(--success); }
.kpi-of, .kpi-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-left: 2px;
}
.kpi-delta {
  margin-top: 6px;
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.delta-success { color: var(--success); }
.delta-flat { color: var(--text-tertiary); }

/* Dual panel */
.dual {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8px;
}
.panel {
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.panel-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}
.panel-meta {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

/* Heatmap (7 rows × 24 cols) */
.heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 9px;
  gap: 2px;
  margin-bottom: 8px;
}
.heatmap span {
  border-radius: 1px;
  background: var(--bg-surface-3);
}
.heatmap span.ok { background: var(--success); opacity: 0.8; }
.heatmap span.delta { background: var(--info); opacity: 0.65; }
.heatmap span.warn { background: var(--warning); opacity: 0.85; }
.heatmap span.fail { background: var(--danger); opacity: 0.85; }

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--text-tertiary);
}
.legend-cell {
  width: 8px; height: 8px;
  border-radius: 1px;
}
.legend-cell.ok { background: var(--success); }
.legend-cell.delta { background: var(--info); }
.legend-cell.warn { background: var(--warning); }
.legend-cell.fail { background: var(--danger); }
.heatmap-legend span:not(.legend-cell) { margin-right: 4px; }

/* Attention list */
.attn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.attn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid;
  border-radius: var(--radius-sm);
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.attn .sev {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 9px;
  width: 30px;
}
.attn-warn { border-left-color: var(--warning); }
.attn-warn .sev { color: var(--warning); }
.attn-info { border-left-color: var(--info); }
.attn-info .sev { color: var(--info); }
.attn-ok { border-left-color: var(--success); }
.attn-ok .sev { color: var(--success); }
.attn code {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.04);
  padding: 0 4px;
  border: none;
}

.spark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-default);
  font-size: 9px;
  color: var(--text-tertiary);
}
.spark {
  flex: 1;
  height: 18px;
  color: var(--success);
}
.spark-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--success);
}

@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dual { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .app-body { grid-template-columns: 1fr; }
  .app-sidebar { display: none; }
}

/* ============================================================
   Page-head extras (criticality badge, action buttons, mode picker)
   ============================================================ */
.badge-crit {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.btn-mini {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 5px 10px;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 120ms var(--transition);
}
.btn-mini:hover { border-color: var(--border-strong); }
.btn-mini-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.btn-mini-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.mode-picker {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
}
.mode-pill {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 4px 9px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.mode-pill.active {
  background: rgba(255, 85, 68, 0.1);
  color: var(--accent);
}

.kpi-row-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   Timeline (cluster overview)
   ============================================================ */
.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 10px;
  color: var(--text-secondary);
}
.t-time {
  color: var(--text-tertiary);
  font-size: 9px;
  width: 32px;
  flex-shrink: 0;
}
.t-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-dot.ok { background: var(--success); box-shadow: 0 0 4px var(--success); }
.t-dot.info { background: var(--info); }
.t-dot.warn { background: var(--warning); }
.t-msg { flex: 1; }
.t-msg code {
  font-size: 9px;
  background: rgba(255,255,255,0.04);
  padding: 0 4px;
  border: none;
}

/* Findings list (cluster overview) */
.findings-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finding {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-left: 2px solid;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.5;
}
.finding .sev {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.06em;
  width: 30px;
}
.finding .f-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.finding .f-body code {
  font-size: 9px;
  background: rgba(255,255,255,0.04);
  border: none;
  padding: 0 4px;
  align-self: flex-start;
}
.finding .f-impact {
  color: var(--text-tertiary);
  font-size: 9px;
}
.finding-warning { border-left-color: var(--warning); }
.finding-warning .sev { color: var(--warning); }
.finding-info { border-left-color: var(--info); }
.finding-info .sev { color: var(--info); }
.finding-danger { border-left-color: var(--danger); }
.finding-danger .sev { color: var(--danger); }

/* ============================================================
   Data table (restore points, verifications, compliance)
   ============================================================ */
.data-table {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  overflow: hidden;
  font-size: 10px;
}
.dt-head, .dt-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.6fr 1fr 0.8fr;
  gap: 8px;
  padding: 7px 12px;
  align-items: center;
}
.dt-head {
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.dt-row {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10px;
}
.dt-row:first-of-type { border-top: none; }
.dt-row:hover { background: rgba(255, 255, 255, 0.015); }
.dt-row strong { color: var(--text-primary); font-weight: 600; }
.dt-col code {
  font-size: 9px;
  background: rgba(255,255,255,0.03);
  border: none;
  padding: 0 4px;
}
.col-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.data-table-tight .dt-head,
.data-table-tight .dt-row {
  grid-template-columns: 0.7fr 0.5fr 1.4fr 0.7fr 0.7fr;
  padding: 6px 12px;
}

.table-foot {
  margin: 8px 2px 0;
  font-size: 9px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Mode tags (light/enough/safe/paranoid) */
.mode-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 600;
  border: 1px solid;
}
.mode-light    { color: var(--text-tertiary); border-color: var(--border-default); background: var(--bg-surface-2); }
.mode-enough   { color: var(--info); border-color: var(--info); background: rgba(59, 130, 246, 0.08); }
.mode-safe     { color: var(--success); border-color: var(--success); background: rgba(34, 197, 94, 0.08); }
.mode-paranoid { color: var(--accent); border-color: var(--accent); background: rgba(255, 85, 68, 0.08); }

/* Status tags */
.status-tag {
  font-size: 9px;
  letter-spacing: 0.04em;
}
.status-tag.ok { color: var(--success); }
.status-tag.warn { color: var(--warning); }
.status-tag.fail { color: var(--danger); }
.status-tag.waived { color: var(--text-tertiary); }

/* Verification level tags */
.lvl-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid;
}
.lvl-1 { color: var(--info); border-color: var(--info); background: rgba(59, 130, 246, 0.08); }
.lvl-2 { color: var(--success); border-color: var(--success); background: rgba(34, 197, 94, 0.08); }
.lvl-3 { color: var(--warning); border-color: var(--warning); background: rgba(234, 179, 8, 0.08); }
.lvl-4 { color: var(--accent); border-color: var(--accent); background: rgba(255, 85, 68, 0.08); }

/* ============================================================
   Verification ladder
   ============================================================ */
.ladder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.lad-card {
  padding: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid;
  border-radius: var(--radius-default);
}
.lad-ok { border-top-color: var(--success); }
.lad-warn { border-top-color: var(--warning); }
.lad-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.lad-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 4px 0 6px;
}
.lad-meta {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.lad-status {
  font-size: 9px;
  color: var(--success);
  letter-spacing: 0.02em;
}
.lad-warn .lad-status { color: var(--warning); }

.panel-wide {
  margin-top: 12px;
}

/* ============================================================
   Compliance tabs & summary
   ============================================================ */
.comp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.comp-tab {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 6px 12px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.comp-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.comp-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
}
.comp-bar {
  flex: 1;
  display: flex;
  height: 8px;
  border-radius: 1px;
  overflow: hidden;
}
.comp-seg.ok { background: var(--success); }
.comp-seg.waived { background: var(--text-tertiary); }
.comp-seg.fail { background: var(--danger); }

.comp-legend {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--text-secondary);
}
.ll {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ld {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ld.ok { background: var(--success); }
.ld.waived { background: var(--text-tertiary); }
.ld.fail { background: var(--danger); }

/* ============================================================
   Carousel container
   ============================================================ */
.carousel {
  position: relative;
  width: 100%;
}
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.carousel-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  padding: 0 4px;
}
.slide .app-window {
  /* The app window already has its own border + shadow */
  margin: 0;
}

/* Shot frame: real screenshot wrapped with bracket corners */
.shot-frame {
  position: relative;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.85), rgba(17, 17, 17, 0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 30px 80px -20px rgba(255, 85, 68, 0.12),
    0 50px 120px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.shot-frame > .bracket {
  border-color: var(--accent);
  width: 18px;
  height: 18px;
  z-index: 2;
}
.shot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  /* The validation app uses the same dark palette so the screenshot blends
     naturally with the surrounding atmosphere. */
}

/* Controls */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.carousel-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 22, 22, 0.6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  color: var(--text-primary);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition:
    background 160ms var(--transition),
    border-color 160ms var(--transition),
    transform 160ms var(--transition);
}
.carousel-btn:hover {
  background: var(--bg-surface-2);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.carousel-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 240px;
  justify-content: center;
}
.carousel-index {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 600;
}
.carousel-label {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.cdot {
  width: 22px;
  height: 4px;
  background: var(--border-default);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition:
    background 200ms var(--transition),
    width 200ms var(--transition);
}
.cdot:hover { background: var(--border-strong); }
.cdot.active {
  background: var(--accent);
  width: 36px;
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ============================================================
   Sections
   ============================================================ */
.section {
  padding: 96px 0;
  position: relative;
}
.section + .section::before {
  content: '';
  position: absolute;
  left: 50%; top: 0;
  width: 80px; height: 1px;
  background: var(--border-default);
  transform: translateX(-50%);
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.kicker {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  margin-bottom: 14px;
  padding: 4px 12px;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: rgba(255, 85, 68, 0.04);
}

.section-title {
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 18px;
}

.section-lede {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   Cards (problem & features) — login-style bracket frames
   ============================================================ */
.grid {
  display: grid;
  gap: 16px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  padding: 32px 32px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.65), rgba(17, 17, 17, 0.85));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  backdrop-filter: blur(6px);
  transition:
    border-color 240ms var(--transition),
    transform 240ms var(--transition),
    box-shadow 240ms var(--transition);
}
.card:hover {
  border-color: var(--border-default);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(255, 85, 68, 0.12);
}
.card:hover .bracket { border-color: var(--accent); }

.card-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.card-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.card-body strong { color: var(--accent); font-weight: 600; }

/* ============================================================
   Surrounding capabilities — compact
   ============================================================ */
.surround-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
@media (max-width: 800px) { .surround-grid { grid-template-columns: 1fr; } }

.surround-card {
  padding: 20px 24px;
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  transition: border-color 200ms var(--transition);
}
.surround-card:hover { border-color: var(--border-default); }
.surround-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.surround-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(255, 85, 68, 0.3);
}
.surround-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.surround-card p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   Architecture schema — simplified (single horizontal flow)
   ============================================================ */
.schema {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: 960px;
  margin: 0 auto;
}

.schema-node {
  position: relative;
  padding: 28px 24px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.85), rgba(17, 17, 17, 0.95));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  text-align: center;
  transition:
    border-color 240ms var(--transition),
    box-shadow 240ms var(--transition);
}
.schema-node:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 16px 32px -16px rgba(255, 85, 68, 0.18);
}
.schema-node:hover .bracket { border-color: var(--accent); }

.node-tag {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 600;
}
.node-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.node-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.schema-link {
  position: relative;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schema-link::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(to right, var(--border-default), var(--accent-dim), var(--border-default));
  transform: translateY(-50%);
}
.schema-link::after {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}
.link-label {
  position: relative;
  background: var(--bg-base);
  padding: 2px 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  z-index: 1;
}

@media (max-width: 800px) {
  .schema {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 12px;
  }
  .schema-link {
    width: 100%;
    height: 40px;
  }
  .schema-link::before {
    left: 50%;
    right: auto;
    top: 0; bottom: 0;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, var(--border-default), var(--accent-dim), var(--border-default));
  }
  .schema-link::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -3px;
    transform: translateX(-50%) rotate(135deg);
  }
}

/* ============================================================
   Compliance frameworks
   ============================================================ */
.frameworks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 700px) { .frameworks { grid-template-columns: repeat(2, 1fr); } }

.framework {
  padding: 22px 12px;
  text-align: center;
  background: rgba(17, 17, 17, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  transition:
    border-color 200ms var(--transition),
    box-shadow 200ms var(--transition);
}
.framework:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 12px 24px -12px rgba(255, 85, 68, 0.15);
}
.framework-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

/* ============================================================
   Quickstart — terminal
   ============================================================ */
.terminal-frame {
  position: relative;
  padding: 0;
  max-width: 820px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.85), rgba(17, 17, 17, 0.95));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 60px -30px rgba(255, 85, 68, 0.12);
  overflow: hidden;
}
.terminal-frame > .bracket {
  border-color: var(--accent);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-tertiary);
}
.dot-rgb { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-rgb.r { background: #ff5f56; }
.dot-rgb.y { background: #ffbd2e; }
.dot-rgb.g { background: #27c93f; }
.terminal-title { margin-left: 12px; color: var(--text-secondary); }

.terminal-body {
  margin: 0;
  padding: 22px 24px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2;
  color: var(--text-primary);
  overflow-x: auto;
  white-space: pre;
}
.terminal-body code { background: transparent; border: none; padding: 0; color: inherit; }
.c-prompt  { color: var(--accent); margin-right: 6px; }
.c-cmd     { color: var(--text-primary); }
.c-comment { color: var(--text-tertiary); font-style: italic; }

.qs-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* ============================================================
   Final CTA
   ============================================================ */
.cta { padding: 64px 0 96px; }

.cta-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 40px 48px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.78), rgba(17, 17, 17, 0.92));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  text-align: center;
  backdrop-filter: blur(8px);
  box-shadow:
    0 30px 80px -20px rgba(255, 85, 68, 0.12),
    0 0 0 1px rgba(255, 85, 68, 0.02);
}
.cta-card > .bracket { border-color: var(--accent); }

.cta-title {
  font-size: clamp(24px, 3.5vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 28px;
}

.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.cta-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.cta-stats .dot-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border-strong);
}

/* ============================================================
   wal-g inline link (hero) — code element doubles as anchor to #credit
   ============================================================ */
.walg-link {
  text-decoration: none;
  display: inline-block;
}
.walg-link code {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(255, 85, 68, 0.06);
  transition:
    color 200ms var(--transition),
    border-color 200ms var(--transition),
    background 200ms var(--transition);
}
.walg-link:hover code {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: rgba(255, 85, 68, 0.14);
}
.walg-link:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   Credit — upstream acknowledgment (wal-g)
   ============================================================ */
.credit { padding: 32px 0 32px; }

.credit-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 40px 36px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.78), rgba(17, 17, 17, 0.92));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  text-align: left;
  backdrop-filter: blur(8px);
}

.credit-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 22px;
}
.credit-body:last-of-type { margin-bottom: 28px; }
.credit-body strong { color: var(--text-primary); font-weight: 600; }

.credit-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px dashed var(--border-default);
}
.credit-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

@media (max-width: 640px) {
  .credit-card { padding: 32px 22px 28px; }
}

/* ============================================================
   Manifesto — a personal note from the maintainer
   ============================================================ */
.manifesto { padding: 32px 0 96px; }

.manifesto-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 40px 36px;
  background:
    linear-gradient(180deg, rgba(22, 22, 22, 0.78), rgba(17, 17, 17, 0.92));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-default);
  text-align: left;
  backdrop-filter: blur(8px);
}

.manifesto-lede {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin: 0 0 32px;
}
.manifesto-lede strong { color: var(--text-primary); font-weight: 600; }

.manifesto-tenets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.manifesto-tenets li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: baseline;
}
.tenet-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(255, 85, 68, 0.3);
}
.tenet-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.tenet-body strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.manifesto-sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px dashed var(--border-default);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.manifesto-sign .sign-mark { color: var(--accent); }

@media (max-width: 640px) {
  .manifesto-card { padding: 32px 22px 28px; }
  .manifesto-tenets li { grid-template-columns: 36px 1fr; gap: 12px; }
  .tenet-num { font-size: 18px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .t-cursor { opacity: 1; }
  .signal-dot, .app-sse .dot { animation: none; }
}

/* ============================================================
   Mobile padding tweaks
   ============================================================ */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .topbar { padding: 0 20px; gap: 12px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 64px; }
  .cta-card { padding: 40px 24px 32px; }
  .card { padding: 24px; }
}