/* ── Fonts ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; margin: 0; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ── Dark zone ── */
.dark-zone { background: #0a0812; color: white; }

/* ── Glow orbs ── */
.orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }

/* ── Gradient text ── */
.grad-text {
  background: linear-gradient(90deg, #c4b5fd, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navigation ── */
nav[aria-label="Site"] {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,8,18,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(139,92,246,0.2);
}
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center; height: 60px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo-mark {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: white;
}
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-link:hover { color: white; }
.nav-link.active { color: white; border-bottom: 2px solid #7c3aed; padding-bottom: 2px; }
.nav-github {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: white; font-size: 13px; font-weight: 600; padding: 7px 16px;
  border-radius: 6px; text-decoration: none;
}

/* ── Light zones ── */
.light-zone { background: #f8f7ff; color: #111; }
.light-zone-alt { background: #ffffff; color: #111; }

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  color: white; font-weight: 700; padding: 12px 28px;
  border-radius: 8px; font-size: 14px; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block;
}
.btn-secondary-dark {
  background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8);
  font-weight: 600; padding: 11px 24px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(255,255,255,0.15); cursor: pointer;
  font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block;
}
.btn-secondary-light {
  background: white; color: #4c1d95; font-weight: 600;
  padding: 11px 24px; border-radius: 8px; font-size: 14px;
  border: 1px solid #e9d5ff; cursor: pointer;
  font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block;
}

/* ── Code panels ── */
.code-panel { background: #1e1b2e; border: 1px solid rgba(139,92,246,0.25); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.code-panel-header {
  background: rgba(139,92,246,0.12); border-bottom: 1px solid rgba(139,92,246,0.2);
  padding: 10px 16px; font-size: 11px; color: rgba(255,255,255,0.5);
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.code-panel-dot { width: 8px; height: 8px; border-radius: 50%; }
.code-panel pre {
  padding: 20px; font-size: 12px; line-height: 1.7;
  margin: 0; color: #e2e8f0; overflow-x: auto;
  font-family: 'JetBrains Mono', monospace; flex: 1;
}

/* ── Feature cards (light bg) ── */
.feature-card {
  background: white; border: 1px solid #ede9fe; border-radius: 12px; padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.feature-card:hover { border-color: #a78bfa; box-shadow: 0 4px 24px rgba(139,92,246,.1); }

/* ── Section label ── */
.section-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #7c3aed; margin-bottom: 12px; }

/* ── Badge (hero) ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.4);
  border-radius: 20px; padding: 5px 14px; font-size: 11px; font-weight: 600;
  color: #c4b5fd; letter-spacing: .5px;
}

/* ── Step number ── */
.step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0; color: white;
}

/* ── Install bar (homepage hero) ── */
.install-bar {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
}

/* ── Install tabs ── */
.install-tabs {
  display: inline-flex; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 4px; gap: 4px;
}
.install-tab {
  padding: 7px 18px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: rgba(255,255,255,0.5); border: none; background: transparent;
  font-family: 'Inter', sans-serif;
}
.install-tab.active { background: rgba(139,92,246,.35); color: white; }
.install-panel { display: none; }
.install-panel.active { display: block; }

/* ── Copy button ── */
.copy-btn {
  background: rgba(139,92,246,.2); border: 1px solid rgba(139,92,246,.4);
  color: #c4b5fd; font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 5px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}
.copy-btn:hover { background: rgba(139,92,246,.4); }

/* ── Agent prompt box ── */
.agent-prompt-box {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(139,92,246,0.3);
  border-radius: 10px; padding: 16px 20px; text-align: left;
}

/* ── Page hero band (inner pages) ── */
.page-hero { background: #0a0812; position: relative; overflow: hidden; padding: 48px 24px 56px; }

/* ── Wave divider ── */
.wave-divider { position: absolute; bottom: -1px; left: 0; right: 0; height: 50px; overflow: hidden; }

/* ── Footer ── */
.site-footer { background: #0a0812; padding: 48px 24px 32px; border-top: 1px solid rgba(139,92,246,0.15); }
.footer-col-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 14px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,0.55); font-size: 13px; text-decoration: none; }
.footer-links a:hover { color: white; }

/* ── Docs / Guide sidebar ── */
.sidebar-link {
  display: block; padding: 8px 16px; color: #6b7280;
  border-left: 2px solid transparent; font-size: 14px; text-decoration: none;
}
.sidebar-link:hover, .sidebar-link.active {
  color: #7c3aed; border-left-color: #7c3aed; background: #f5f3ff;
}

/* ── Actions Library: filter pills ── */
.filter-pill {
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid #e9d5ff; color: #6b7280; background: white;
  font-family: 'Inter', sans-serif;
}
.filter-pill.active { background: #7c3aed; color: white; border-color: #7c3aed; }
.filter-pill:hover:not(.active) { border-color: #a78bfa; color: #7c3aed; }

/* ── Actions Library: action cards ── */
.action-card {
  background: white; border: 1px solid #ede9fe; border-radius: 12px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.action-card:hover { border-color: #a78bfa; box-shadow: 0 4px 24px rgba(139,92,246,.1); }
.action-card-header {
  padding: 18px 20px 14px; border-bottom: 1px solid #f5f3ff;
  display: flex; flex-direction: column; flex: 1;
}
.action-card-header p { flex: 1; margin: 6px 0 0; font-size: 13px; color: #6b7280; line-height: 1.5; }
.action-card-body { padding: 16px 20px; }

/* ── Actions Library: snippets ── */
.snippet {
  background: #1e1b2e; color: #e2e8f0; border-radius: 8px;
  padding: 12px 14px; font-size: 11px; line-height: 1.6;
  overflow-x: auto; white-space: pre; min-height: 115px;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Actions Library: category badges ── */
.cat-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
}
.cat-builtin  { background: #ede9fe; color: #6d28d9; }
.cat-docker   { background: #dbeafe; color: #1d4ed8; }
.cat-starter  { background: #d1fae5; color: #065f46; }

/* ── Syntax colours (used inside code-panel pre and .snippet) ── */
.sy-key     { color: #a78bfa; }
.sy-val     { color: #4ade80; }
.sy-num     { color: #fb923c; }
.sy-comment { color: #6b7280; }
.sy-prompt  { color: #4ade80; }
.sy-dim     { color: rgba(255,255,255,0.4); }