/* ============================================================
   LogDoc.org — pixel-perfect static markup
   Tokens extracted from Design/LogDoc.org/untitled.pen
   ============================================================ */

:root {
  --accent-orange: #e35b28;
  --accent-purple: #6257a3;
  --bg-code: #37373f;
  --bg-primary: #16151a;
  --bg-secondary: #1e1d23;
  --bg-tertiary: #242329;
  --border: #242329;
  --text-primary: #ffffff;
  --text-secondary: #ffffff99;
  --text-tertiary: #ffffff33;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--bg-primary);
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  min-width: 1440px;
}

.page {
  width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}

a {
  text-decoration: none;
  color: inherit;
}

svg {
  display: block;
  flex-shrink: 0;
}

/* ============ Header ============ */

.header {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 64px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav a {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.2;
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--text-primary);
}

.nav a.active:hover {
  color: var(--accent-orange);
}

.nav a.active {
  color: var(--accent-orange);
  font-weight: 500;
}

.header-spacer {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 4px;
  background: var(--accent-orange);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  transition: background 0.15s ease;
}

.header-cta:hover {
  background: #ef6c3a;
}

/* ============ Hero ============ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 80px 120px;
  background: var(--bg-primary);
}

.hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 4px;
  color: var(--accent-orange);
  line-height: 1.2;
}

.hero-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  width: 680px;
  line-height: 1.2;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-terminal-primary {
  display: flex;
  padding: 14px 32px;
  background: var(--accent-orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  line-height: 1.2;
  transition: background 0.15s ease;
}

.btn-terminal-primary:hover {
  background: #ef6c3a;
}

.btn-terminal-secondary {
  display: flex;
  padding: 14px 32px;
  border: 1px solid var(--accent-orange);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  color: var(--accent-orange);
  line-height: 1.2;
  transition: background 0.15s ease;
}

.btn-terminal-secondary:hover {
  background: #e35b2815;
}

.hero-install {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.2;
  transition: border-color 0.15s ease;
}

.hero-install:hover {
  border-color: #ffffff26;
}

.hero-install-prompt {
  color: var(--accent-orange);
}

.hero-install-cmd {
  color: var(--text-secondary);
  user-select: all;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero-stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-stat-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  line-height: 1.2;
  text-transform: uppercase;
}

/* Terminal */

.terminal {
  display: flex;
  flex-direction: column;
  width: 720px;
  background: var(--bg-code);
  border: 1px solid var(--border);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.terminal-dot--red { background: #ff5f57; }
.terminal-dot--yellow { background: #febc2e; }
.terminal-dot--green { background: #28c840; }

.terminal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.terminal-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.terminal-body span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: pre;
}

.terminal-body .t-green { color: #28c840; }
.terminal-body .t-orange { color: var(--accent-orange); }

.deco-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, #00000000 0%, var(--accent-orange) 50%, #00000000 100%);
}

/* ============ Features ============ */

.features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 80px 120px;
  background: var(--bg-primary);
}

.features-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.features-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-orange);
  line-height: 1.2;
}

.features-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: var(--text-secondary);
  text-align: center;
  width: 600px;
  line-height: 1.2;
}

.features-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.feature-card:hover {
  background: var(--bg-tertiary);
  border-color: #ffffff26;
}

.feature-card .icon {
  color: var(--accent-orange);
}

.feature-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.feature-card-desc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ Deployment ============ */

.deploy {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 80px 120px;
  background: var(--bg-secondary);
}

.deploy-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.deploy-badge {
  display: flex;
  padding: 6px 16px;
  border: 1px solid var(--accent-orange);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent-orange);
  line-height: 1.2;
}

.deploy-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.deploy-sub {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  width: 700px;
  line-height: 1.6;
}

.deploy-cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

.deploy-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  padding: 32px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.deploy-card:hover {
  border-color: #ffffff26;
}

.deploy-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #e35b2820;
  color: var(--accent-orange);
}

.deploy-icon-wrap--solid {
  background: var(--accent-orange);
  color: var(--text-primary);
}

.deploy-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.deploy-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.deploy-text-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.deploy-text-block .deploy-card-desc {
  font-size: 15px;
}

.deploy-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.deploy-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.deploy-feature .icon {
  color: var(--accent-orange);
}

.deploy-spacer {
  flex: 1;
}

.deploy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 8px;
  background: var(--accent-orange);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  transition: background 0.15s ease;
}

.deploy-btn:hover {
  background: #ef6c3a;
}

.deploy-btn--github {
  gap: 8px;
  height: auto;
  padding: 12px 24px;
  color: var(--text-primary);
}

/* ============ CTA ============ */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 80px 120px;
  background: var(--bg-secondary);
}

.cta-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  width: 800px;
  line-height: 1.2;
}

.cta-title .accent {
  color: var(--accent-orange);
}

.cta-sub {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  width: 700px;
  line-height: 1.6;
}

.cta-btns {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cta-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 4px;
  background: var(--accent-orange);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  transition: background 0.15s ease;
}

.cta-btn-primary:hover {
  background: #ef6c3a;
}

.cta-btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  border: 1px solid var(--accent-orange);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-orange);
  line-height: 1.2;
  transition: background 0.15s ease;
}

.cta-btn-secondary:hover {
  background: #e35b2815;
}

.trust-row {
  display: flex;
  align-items: center;
  gap: 32px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.trust-item .icon {
  color: var(--text-tertiary);
}

/* ============ Footer ============ */

.footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 64px;
  background: var(--bg-tertiary);
}

.footer-top {
  display: flex;
  gap: 64px;
  width: 100%;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 320px;
}

.footer-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.footer-desc {
  font-size: 13px;
  color: var(--text-secondary);
  width: 280px;
  line-height: 1.6;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
  line-height: 1.2;
}

.footer-col-title {
  font-weight: 600;
  color: var(--text-primary);
}

.footer-col a {
  font-weight: 400;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-divider {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.footer-bottom {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

.footer-bottom-spacer {
  flex: 1;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-bottom-links a {
  color: var(--text-tertiary);
  transition: color 0.15s ease;
}

.footer-bottom-links a:hover {
  color: var(--text-secondary);
}

/* ============ Download page ============ */

.dl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.dl-hero-title {
  font-size: 48px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.dl-hero-sub {
  font-size: 18px;
  color: var(--text-secondary);
  text-align: center;
  width: 700px;
  line-height: 1.6;
}

.version-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.version-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
}

.platforms {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 120px;
  background: var(--bg-secondary);
}

.platforms-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.platform-cards {
  display: flex;
  gap: 24px;
  width: 100%;
}

.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1;
  padding: 32px 28px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}

.platform-card:hover {
  border-color: #ffffff26;
}

.platform-card > .icon {
  color: var(--accent-orange);
}

.platform-name-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.platform-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.platform-arch {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.platform-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.platform-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 0;
  border-radius: 8px;
  background: var(--accent-orange);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  transition: background 0.15s ease;
}

.platform-btn:hover {
  background: #ef6c3a;
}

.platform-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  width: 100%;
  font-size: 14px;
  line-height: 1.2;
}

.platform-links a {
  font-weight: 500;
  color: var(--accent-orange);
}

.platform-links .sep {
  color: var(--text-secondary);
}

.install {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.install-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.install-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
}

.install-sub {
  font-size: 16px;
  color: var(--text-secondary);
  text-align: center;
  width: 600px;
  line-height: 1.6;
}

.install-methods {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.install-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.install-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.install-card-header .icon {
  color: var(--accent-orange);
}

.code-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 8px;
  background: var(--bg-code);
}

.code-block--gap8 {
  gap: 8px;
}

.copy-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.copy-bar .spacer {
  flex: 1;
}

.code-block code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: pre;
}

.code-block code.c-green { color: #4ade80; }
.code-block code.c-tertiary { color: var(--text-tertiary); }

.code-separator {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.sysreq-row {
  display: flex;
  gap: 24px;
  width: 100%;
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 28px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.info-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.info-card-title .icon {
  color: var(--accent-orange);
}

.info-card-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.req-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.req-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.req-item .icon {
  color: var(--accent-orange);
}

.help-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.help-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--accent-orange);
  line-height: 1.2;
}

.nav a.orange { color: var(--accent-orange); }
.nav a.w500 { font-weight: 500; }

/* ============ Documentation layout ============ */

.doc-body {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.doc-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 280px;
  flex-shrink: 0;
  padding: 32px 24px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

.doc-side-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent-orange);
  line-height: 1.2;
}

.doc-side-sp16 { height: 16px; flex-shrink: 0; }
.doc-side-sp24 { height: 24px; flex-shrink: 0; }

.doc-side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.doc-side-link:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.doc-side-link .icon { color: var(--text-secondary); flex-shrink: 0; }

.doc-side-link.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 500;
}

.doc-side-link.active .icon { color: var(--accent-orange); }

.doc-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  min-width: 0;
  padding: 48px 64px;
}

.doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.doc-breadcrumb .icon { color: var(--text-tertiary); }
.doc-breadcrumb .current { color: var(--text-primary); }

.doc-title-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.doc-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-sub {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.doc-divider {
  height: 1px;
  width: 100%;
  background: var(--border);
  flex-shrink: 0;
}

.doc-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.doc-h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 16px;
}

.doc-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.doc-list-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-orange);
  flex-shrink: 0;
}

.doc-code {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: 8px;
  background: var(--bg-code);
}

.doc-code .lang {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-orange);
  line-height: 1.2;
}

.doc-code code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: pre;
}

.doc-code code.comment { color: var(--text-tertiary); }
.doc-code code:empty::before { content: "\00a0"; }

.doc-info-box {
  display: flex;
  gap: 12px;
  padding: 20px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-orange);
}

.doc-info-box .icon { color: var(--accent-orange); flex-shrink: 0; }

.doc-info-box p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.doc-pagenav {
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.doc-pagenav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 24px;
  text-decoration: none;
}

.doc-pagenav-item.next { align-items: flex-end; }

.doc-pagenav-label {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

.doc-pagenav-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-orange);
  line-height: 1.2;
}

/* ============ Doc tables ============ */

.doc-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.doc-table .tr {
  display: flex;
  padding: 12px 16px;
}

.doc-table .thead + .tr,
.doc-table .tr + .tr { border-top: 1px solid var(--border); }

.doc-table .thead {
  background: var(--bg-tertiary);
  padding: 12px 16px;
  display: flex;
}

.doc-table .col-1 { width: 180px; flex-shrink: 0; }
.doc-table .col-2 { width: 100px; flex-shrink: 0; }
.doc-table .col-3 { width: 120px; flex-shrink: 0; }
.doc-table .col-4 { flex: 1; min-width: 0; }

.doc-table .th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-table .td {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.doc-table .td.mono-orange {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-orange);
}

.doc-table .td.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ============ Pipeline flow diagram ============ */

.doc-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  border-radius: 8px;
  background: var(--bg-secondary);
}

.doc-flow-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-flow-box.orange { border: 1px solid var(--accent-orange); }
.doc-flow-box.orange .icon { color: var(--accent-orange); }
.doc-flow-box.purple { border: 1px solid var(--accent-purple); }
.doc-flow-box.purple .icon { color: var(--accent-purple); }
.doc-flow-box.green { border: 1px solid #4CAF50; }
.doc-flow-box.green .icon { color: #4CAF50; }

.doc-flow > .arrow { color: var(--text-tertiary); flex-shrink: 0; }

/* ============ Doc mini cards ============ */

.doc-cards {
  display: flex;
  gap: 16px;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 20px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.doc-card:hover {
  border-color: #ffffff26;
}

.doc-card .icon { color: var(--accent-orange); }

.doc-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============ Plugin type badges ============ */

.doc-card--gap10 { gap: 10px; }

.doc-badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  line-height: 1.2;
}

.doc-badge.orange { background: var(--accent-orange); }
.doc-badge.purple { background: var(--accent-purple); }

/* ============ Role cards / warning box ============ */

.doc-card-title--16 { font-size: 16px; }
.doc-card .icon.purple { color: var(--accent-purple); }

.doc-info-box.red { border-left-color: #F44336; }
.doc-info-box.red .icon { color: #F44336; }

/* ============ Check lists / flat pagenav ============ */

.doc-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
}

.doc-check-item .icon { color: var(--accent-orange); flex-shrink: 0; }

.doc-pagenav--flat .doc-pagenav-item { padding-top: 0; }

/* ============ Documentation hub ============ */
.dochub-hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 80px 120px;
  background: var(--bg-primary);
}

.dochub-breadcrumb {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.dochub-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--text-primary);
}

.dochub-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.dochub-sp24 { height: 24px; }

.gradient-line {
  height: 3px;
  background: linear-gradient(90deg, #e35b28 0%, #6257a3 50%, rgba(0, 0, 0, 0) 100%);
}

.dochub-section {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 80px 120px;
  background: var(--bg-primary);
}

.dochub-section.alt { background: var(--bg-secondary); }

.dochub-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dochub-h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.dochub-hsub {
  font-size: 16px;
  color: var(--text-secondary);
}

.dochub-header--center {
  align-items: center;
  text-align: center;
  gap: 12px;
}

.dochub-header--center .dochub-hsub { max-width: 700px; }

.dochub-cards {
  display: flex;
  gap: 24px;
}

.sdk-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  text-decoration: none;
}

.sdk-card > .icon { color: var(--accent-orange); }

.sdk-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.sdk-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sdk-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-orange);
}

.proto-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  text-decoration: none;
}

.proto-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.proto-icon-wrap .icon { color: var(--bg-primary); }

.proto-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.proto-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.proto-card .spacer { flex: 1; }

.proto-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-orange);
}

.fmt-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.fmt-code {
  flex: 1 1 0;
  border-radius: 12px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  overflow: hidden;
}

.fmt-code-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
}

.fmt-code-body { padding: 20px; }

.fmt-code-body pre {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.fmt-desc-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fmt-desc-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.fmt-desc-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.fmt-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fmt-field {
  display: flex;
  gap: 12px;
}

.fmt-field > .icon {
  color: var(--accent-orange);
  flex-shrink: 0;
}

.fmt-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fmt-field-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.fmt-field-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ============ Language / protocol doc pages ============ */
.langdoc-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 60px 120px;
  background: var(--bg-primary);
}

.langdoc-bc {
  font-size: 13px;
  color: var(--text-secondary);
}

.langdoc-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.langdoc-desc {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 900px;
}

.langdoc-code {
  border-radius: 12px;
  background: var(--bg-code);
  border: 1px solid var(--border);
  overflow: hidden;
}

.langdoc-code-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
}

.langdoc-code-body { padding: 20px; }

.langdoc-code-body pre {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre;
}

.langdoc-notes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.langdoc-notes-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.langdoc-note {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.langdoc-note .dot {
  color: var(--accent-orange);
  font-size: 16px;
}

.langdoc-code-body pre.inter { font-family: 'Inter', sans-serif; }

.langdoc-notelist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.langdoc-note--sm {
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.langdoc-note--sm .dot { font-size: 14px; }

/* ============ Plugins page ============ */
.plugins-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.plugins-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

.plugins-badge .icon { color: var(--accent-orange); }

.plugins-badge span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.plugins-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--text-primary);
}

.plugins-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  width: 640px;
  max-width: 100%;
}

.plugins-grid-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 64px 120px;
  background: var(--bg-secondary);
}

.plugins-tabs {
  display: flex;
  gap: 8px;
}

.plugins-tab {
  padding: 8px 18px;
  border-radius: 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.plugins-tab:hover {
  color: var(--text-primary);
  border-color: #ffffff26;
}

.plugins-tab.active:hover {
  color: var(--text-primary);
}

.plugins-tab.active {
  background: var(--accent-orange);
  border: none;
  font-weight: 600;
  color: var(--text-primary);
}

.plugins-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plugins-row {
  display: flex;
  gap: 20px;
}

.plugin-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.plugin-card:hover {
  border-color: #ffffff26;
}

.plugin-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.plugin-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plugin-tt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plugin-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.plugin-ver {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-tertiary);
}

.plugin-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.plugin-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.plugin-cat {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.plugin-dl {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-tertiary);
  font-size: 12px;
}

.plugins-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.plugins-cta-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}

.plugins-cta-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  width: 560px;
  max-width: 100%;
}

.plugins-cta-buttons {
  display: flex;
  gap: 12px;
  padding-top: 8px;
}

.plugins-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.plugins-cta-btn--orange { background: var(--accent-orange); }

.plugins-cta-btn--orange:hover { background: #ef6c3a; }

.plugins-cta-btn--gray {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

.plugins-cta-btn--gray:hover { border-color: #ffffff26; }

/* ============ Contacts page ============ */
.contacts-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.contacts-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--text-primary);
}

.contacts-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  width: 600px;
  max-width: 100%;
}

.contacts-body {
  display: flex;
  gap: 40px;
  padding: 64px 120px;
  background: var(--bg-secondary);
  align-items: flex-start;
}

.contacts-channels {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 460px;
  flex-shrink: 0;
}

.chan-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease;
}

.chan-card:hover {
  border-color: #ffffff26;
}

.chan-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #F0883E20;
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chan-tx {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chan-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.chan-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-orange);
  text-decoration: none;
  transition: color 0.15s ease;
}

a.chan-value:hover {
  color: #ef6c3a;
}

.chan-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.contacts-form {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

.contacts-form-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row .form-field { flex: 1 1 0; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-field input,
.form-field textarea {
  height: 44px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
}

.form-field textarea {
  height: 140px;
  line-height: 1.6;
  resize: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-tertiary);
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-note {
  font-size: 12px;
  color: var(--text-tertiary);
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 4px;
  background: var(--accent-orange);
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.form-submit:hover {
  background: #ef6c3a;
}

/* ============ Versions page ============ */
.versions-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 64px 120px;
  background: var(--bg-secondary);
}

.release {
  display: flex;
  gap: 40px;
}

.release-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 200px;
  flex-shrink: 0;
}

.release-vr {
  display: flex;
  align-items: center;
  gap: 10px;
}

.release-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-orange);
}

.release-badge {
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.release-date {
  font-size: 13px;
  color: var(--text-tertiary);
}

.release-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}

.release-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.release-kind {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.release-li {
  display: flex;
  gap: 10px;
  padding-left: 4px;
}

.release-li .dot {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 8px;
}

.release-li span:last-child {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.versions-older {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.versions-older a {
  font-weight: 500;
  color: var(--accent-orange);
  text-decoration: none;
  transition: color 0.15s ease;
}

.versions-older a:hover {
  color: #ef6c3a;
}

/* ============ Legal pages ============ */
.legal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 120px;
  background: var(--bg-primary);
}

.legal-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 860px;
  max-width: 100%;
}

.legal-title-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-primary);
}

.legal-updated {
  font-size: 13px;
  color: var(--text-tertiary);
}

.legal-divider {
  height: 1px;
  background: var(--border);
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal-h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
}

.legal-para {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
}

.legal-li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.legal-li .dot { color: var(--accent-orange); }

/* ============================================================
   Animations — orchestrated hero boot + scroll reveals
   Pure CSS. Signature: the hero terminal boots like a real one.
   ============================================================ */

@keyframes rise-fade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes log-append {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@keyframes typing {
  from { width: 0; }
  to   { width: 41ch; }
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* --- Page-load sequence: hero elements rise in order --- */

.hero-title-row,
.hero-subtitle,
.hero-tagline,
.hero-cta-row,
.hero-install,
.hero .terminal,
.hero-stats {
  animation: rise-fade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-subtitle { animation-delay: 0.08s; }
.hero-tagline  { animation-delay: 0.16s; }
.hero-cta-row  { animation-delay: 0.24s; }
.hero-install  { animation-delay: 0.32s; }
.hero .terminal { animation-delay: 0.4s; }
.hero-stats    { animation-delay: 0.55s; }

/* --- Signature: terminal boot --- */

/* command line types itself out */
.hero .terminal-body .boot-1 {
  overflow: hidden;
  width: 0;
  animation: typing 1.1s steps(41, end) 0.9s forwards;
}

/* log lines append one by one, like a live stream */
.hero .terminal-body .boot-2,
.hero .terminal-body .boot-3,
.hero .terminal-body .boot-4,
.hero .terminal-body .boot-5,
.hero .terminal-body .boot-6 {
  opacity: 0;
  animation: log-append 0.22s ease-out both;
}

.hero .terminal-body .boot-2 { animation-delay: 2.15s; }
.hero .terminal-body .boot-3 { animation-delay: 2.3s; }
.hero .terminal-body .boot-4 { animation-delay: 2.45s; }
.hero .terminal-body .boot-5 { animation-delay: 2.6s; }
.hero .terminal-body .boot-6 { animation-delay: 3.0s; }

/* live-tail lines appended by js */
.terminal-body .t-live {
  animation: log-append 0.25s ease-out;
}

.terminal-body .t-warn { color: #febc2e; }

/* blinking cursor lands after the ready line */
.t-cursor {
  color: var(--accent-orange);
  opacity: 0;
  animation:
    log-append 0.15s ease-out 3.25s both,
    cursor-blink 1.1s step-end 3.4s infinite;
}

/* --- Scroll reveals (IntersectionObserver adds .in-view, see js/site.js) --- */

html.js .features-header,
html.js .feature-card,
html.js .deploy-header,
html.js .deploy-card,
html.js .cta-title,
html.js .cta-sub,
html.js .cta-btns,
html.js .trust-row,
html.js .plugin-card,
html.js .doc-card,
html.js .platform-card,
html.js .chan-card,
html.js .contacts-form,
html.js .versions-older {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .in-view {
  opacity: 1;
  transform: none;
}

/* versions timeline: meta slides from the left, card from the right */
html.js .release .release-meta,
html.js .release .release-card {
  opacity: 0;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js .release .release-meta { transform: translateX(-18px); }
html.js .release .release-card { transform: translateX(18px); }

html.js .release.in-view .release-meta,
html.js .release.in-view .release-card {
  opacity: 1;
  transform: none;
}

/* --- Respect reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero .terminal-body .boot-1 { width: auto; }

  .t-cursor {
    animation: none !important;
    opacity: 1;
  }

  .hero::before { animation: none !important; }
  .marquee-track { animation: none !important; }
}

/* ============================================================
   Alive layer — ClickHouse-inspired motion (see js/site.js)
   ============================================================ */

/* --- Sticky header with blur --- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22, 21, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* --- Logo mark spins on hover --- */

.logo-group svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-group:hover svg {
  transform: rotate(360deg);
}

/* --- Ambient hero glow --- */

@keyframes glow-breathe {
  from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

.hero {
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  width: 960px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #e35b2816 0%, transparent 68%);
  animation: glow-breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}

/* --- Integrations marquee --- */

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

.marquee {
  overflow: hidden;
  padding: 26px 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-half {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}

.marquee-half span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.marquee-half .marquee-dot {
  color: var(--accent-orange);
}

/* --- Card hover lift --- */

.feature-card,
.deploy-card,
.plugin-card,
.platform-card,
.doc-card,
.chan-card {
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    background 0.2s ease;
}

.feature-card:hover,
.deploy-card:hover,
.plugin-card:hover,
.platform-card:hover,
.doc-card:hover,
.chan-card:hover {
  transform: translateY(-3px);
  border-color: #e35b2860;
}

/* --- Copy feedback --- */

.hero-install {
  cursor: pointer;
  position: relative;
}

.hero-install::after {
  content: 'copied ✓';
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent-orange);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hero-install.copied::after {
  opacity: 1;
}

.doc-code {
  position: relative;
}

.code-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid #ffffff1a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.doc-code:hover .code-copy {
  opacity: 1;
}

.code-copy.done {
  color: #3fb950;
  border-color: #3fb95040;
}

/* --- Plugin catalog filtering --- */

.plugins-grid {
  flex-direction: row;
  flex-wrap: wrap;
}

.plugins-row {
  display: contents;
}

.plugin-card {
  flex: 0 0 calc((100% - 40px) / 3);
}

.plugin-card.is-hidden {
  display: none;
}

.plugins-tab {
  cursor: pointer;
}

/* --- Latest release badge pulse --- */

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 #3fb95000; }
  50%      { box-shadow: 0 0 12px 0 #3fb95059; }
}

.release:first-child .release-badge {
  animation: badge-pulse 3s ease-in-out infinite;
}

/* --- Download platform icons float --- */

@keyframes icon-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

.platform-card > .icon {
  animation: icon-float 3.5s ease-in-out infinite alternate;
}

.platform-card:nth-child(2) > .icon { animation-delay: -1.2s; }
.platform-card:nth-child(3) > .icon { animation-delay: -2.4s; }

/* --- Contact form focus glow --- */

.contacts-form input:focus,
.contacts-form textarea:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px #e35b2820;
}