/* Zeltro landing — dark navy / electric cyan, matching the logo */

:root {
  --bg-0: #04081d;
  --bg-1: #0a1232;
  --bg-2: #0f1a45;
  --line: rgba(56, 189, 248, 0.18);
  --line-strong: rgba(56, 189, 248, 0.4);
  --text: #e6edff;
  --muted: #9ba6c4;
  --accent: #38bdf8;
  --accent-2: #67e8f9;
  --accent-3: #0ea5e9;
  --grad-a: #67e8f9;
  --grad-b: #0ea5e9;
  --max: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 60px -20px rgba(14, 165, 233, 0.45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #fff; }

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent-3); color: white; padding: 10px 14px;
  z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 8, 29, 0.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; }
.brand-name { font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-mark { display: block; }
.brand.small { font-weight: 700; }
.brand.small span { font-size: 1rem; }

.site-header nav { display: flex; gap: 22px; }
.site-header nav a {
  color: var(--muted); font-weight: 500; font-size: 0.95rem;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.site-header nav a:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 540px) {
  .site-header nav { display: none; }
}

/* Hero */
.hero {
  position: relative;
  /* Bottom padding trimmed: the GUI panel now sits directly below, and the
     original 140px left a visible void once the second CTA button was removed. */
  padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.bg-glow {
  position: absolute; inset: -10% -10% auto -10%; height: 80%;
  background: radial-gradient(ellipse at 30% 30%, rgba(14, 165, 233, 0.25), transparent 60%),
              radial-gradient(ellipse at 75% 65%, rgba(103, 232, 249, 0.15), transparent 55%);
  pointer-events: none;
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem; letter-spacing: 0.22em; font-weight: 700;
  color: var(--accent-2); margin: 0 0 18px;
}
.eyebrow.accent { color: var(--accent-2); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
}
h1 .grad {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin-top: 24px;
  max-width: 60ch;
}
.lead strong { color: var(--text); font-weight: 600; }

.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta.center { justify-content: center; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .15s, background .15s, color .15s;
  cursor: pointer;
}
.btn.primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  box-shadow: var(--shadow);
}
.btn.primary:hover { transform: translateY(-1px); color: #04081d; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn.ghost:hover { background: rgba(56, 189, 248, 0.1); border-color: var(--accent); color: #fff; }

.meta {
  margin-top: 18px; color: var(--muted); font-size: 0.92rem;
}

.hero-visual {
  display: flex; justify-content: center; align-items: center;
}
.logo-large {
  filter: drop-shadow(0 30px 60px rgba(14, 165, 233, 0.5));
  width: min(380px, 80vw); height: auto;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-large { animation: none; }
  html { scroll-behavior: auto; }
}

/* Sections */
section { padding: clamp(60px, 8vw, 110px) 0; position: relative; }
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  text-align: center;
}
.section-title.left { text-align: left; }
.section-sub {
  color: var(--muted); text-align: center; margin: 14px auto 50px;
  max-width: 60ch; font-size: 1.05rem;
}

/* Pillar cards */
.pillars { background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.4)); }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.6), rgba(10, 18, 50, 0.6));
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.18), rgba(14, 165, 233, 0.1));
  color: var(--accent-2);
  margin-bottom: 18px;
  border: 1px solid var(--line);
}
.card h3 {
  font-size: 1.18rem; font-weight: 700; margin-bottom: 12px;
  color: #fff;
}
.card p { color: var(--muted); margin: 0; font-size: 0.97rem; }
.card code, .card .cmd {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.9em;
  border: 1px solid rgba(14, 165, 233, 0.18);
}

/* Why Zeltro — compare table */
.why-zeltro {
  background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.4));
}
.eyebrow.center { display: block; text-align: center; }

.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 900px) { .compare { grid-template-columns: 1fr; } }

.compare-col {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 28px 28px;
}
.compare-col.cold {
  border-color: rgba(244, 114, 182, 0.25);
  background: linear-gradient(180deg, rgba(60, 22, 50, 0.35), rgba(10, 18, 50, 0.55));
}
.compare-col.hot {
  border-color: rgba(56, 189, 248, 0.4);
  background: linear-gradient(180deg, rgba(15, 56, 90, 0.55), rgba(10, 18, 50, 0.7));
  box-shadow: 0 12px 40px -16px rgba(14, 165, 233, 0.45);
}

.compare-tag {
  position: absolute;
  top: -12px; left: 22px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  background: #04081d;
  color: #fb7185;
  border: 1px solid rgba(244, 114, 182, 0.3);
  padding: 4px 11px;
  border-radius: 6px;
}
.compare-tag.accent {
  color: var(--accent-2);
  border-color: rgba(56, 189, 248, 0.4);
}

.compare-col h3 {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  margin-bottom: 18px;
}
.compare-col ul {
  list-style: none; padding: 0; margin: 0;
}
.compare-col ul li {
  position: relative;
  padding: 10px 0 10px 26px;
  color: var(--muted);
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.compare-col ul li:last-child { border-bottom: 0; }
.compare-col ul li::before {
  position: absolute;
  left: 0; top: 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  content: '';
}
.compare-col.cold ul li::before {
  background: rgba(244, 114, 182, 0.18);
  border: 1px solid rgba(244, 114, 182, 0.5);
}
.compare-col.hot ul li::before {
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid var(--accent);
}
.compare-col.hot ul li::after {
  position: absolute;
  left: 3px; top: 17px;
  content: '';
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}
.compare-col code {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  border: 1px solid rgba(14, 165, 233, 0.2);
}
.compare-col em { font-style: normal; color: var(--text); }

.bottom-line {
  margin: 38px auto 0;
  text-align: center;
  max-width: 70ch;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}

/* Tokens / terminal */
.tokens {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.4), transparent);
}
.tokens-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center;
}
@media (max-width: 900px) { .tokens-grid { grid-template-columns: 1fr; gap: 36px; } }

.terminal {
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: rgba(15, 26, 69, 0.6);
  border-bottom: 1px solid var(--line);
}
.terminal-bar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.dot.red { background: #ff5f57; }
.dot.yellow { background: #febc2e; }
.dot.green { background: #28c840; }
.t-title { color: var(--muted); font-size: 0.85rem; margin-left: 12px; font-family: 'JetBrains Mono', monospace; }
.terminal-body { padding: 18px 22px; }
.terminal pre { margin: 0; }
.terminal code { font-size: 0.92rem; line-height: 1.7; color: #cbd5e1; }
.prompt { color: var(--accent); user-select: none; margin-right: 6px; }
.cmd-fg { color: #fff; font-weight: 500; }
.muted { color: #6b7691; }
.ok { color: #34d399; }

/* Two-up snippets */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 12px;
}
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

.snippet {
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.snippet h3 {
  font-size: 1.1rem; color: #fff; margin-bottom: 12px;
}
.snippet h3 .kbd {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.95em;
  border: 1px solid rgba(14, 165, 233, 0.25);
  font-weight: 600;
}
.snippet p { color: var(--muted); font-size: 0.95rem; }
.snippet pre {
  margin: 16px 0;
  background: #04081d;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
}
.snippet code { font-size: 0.88rem; color: #cbd5e1; line-height: 1.85; }
.snippet .micro { color: #7a85a3; font-size: 0.85rem; margin-top: 0; }

/* Apps grid */
.apps {
  background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.35));
  /* Offset for sticky header so JS-driven scrollIntoView lands the heading
     fully in view instead of behind the nav. */
  scroll-margin-top: 80px;
}

.install-preview {
  max-width: 760px;
  margin: 0 auto 32px;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.5), rgba(10, 18, 50, 0.5));
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  padding: 22px 26px;
  text-align: center;
  transition: border-style .15s, background .15s;
}
.install-preview.has-cmd {
  border-style: solid;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.85), rgba(10, 18, 50, 0.85));
  text-align: left;
}
.preview-empty {
  color: var(--muted); font-size: 0.97rem;
}
.preview-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
}
.preview-prompt {
  color: var(--accent); font-family: 'JetBrains Mono', monospace; font-weight: 600;
  user-select: none; flex: 0 0 auto;
}
.preview-cmd {
  flex: 1 1 auto;
  color: var(--accent-2);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 1rem;
  background: transparent;
  border: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.copy-btn {
  flex: 0 0 auto;
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  border: 1px solid rgba(14, 165, 233, 0.4);
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.copy-btn:hover { background: rgba(14, 165, 233, 0.25); color: #fff; }
.preview-meta {
  margin: 14px 0 0; color: var(--muted); font-size: 0.92rem;
}
.preview-meta strong { color: var(--text); font-weight: 600; }
.preview-meta code {
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.app-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 6px;
}
.app-grid li { display: block; }
.app-grid button {
  width: 100%;
  background: rgba(15, 26, 69, 0.5);
  border: 1px solid var(--line);
  padding: 7px 8px;
  border-radius: 7px;
  text-align: center;
  font-weight: 500;
  color: #c3cee2;
  font-size: 0.78rem;
  line-height: 1.25;
  font-family: inherit;
  cursor: pointer;
  /* Long names must not widen the track or the grid loses its rhythm. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.app-grid button:hover {
  border-color: var(--accent);
  color: #fff;
}
.app-grid button.active {
  border-color: var(--accent);
  background: rgba(14, 165, 233, 0.18);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.app-grid button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Final CTA — numbered steps */
.cta-final { background: linear-gradient(180deg, transparent, rgba(15, 26, 69, 0.55)); }

.steps {
  list-style: none; padding: 0; margin: 0 auto 36px;
  max-width: 820px;
  display: grid; gap: 24px;
}
.steps li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
  background: linear-gradient(180deg, rgba(15, 26, 69, 0.55), rgba(10, 18, 50, 0.55));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
@media (max-width: 600px) {
  .steps li { grid-template-columns: 48px 1fr; gap: 16px; padding: 22px 20px; }
}
.step-num {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.55);
  flex-shrink: 0;
}
@media (max-width: 600px) { .step-num { width: 42px; height: 42px; font-size: 1.2rem; } }
.step-body h3 {
  font-size: 1.18rem; font-weight: 700; margin: 4px 0 6px; color: #fff;
}
.step-sub {
  color: var(--muted); margin: 0 0 14px; font-size: 0.95rem;
}
.install-label { color: var(--muted); margin: 14px 0 6px; font-size: 0.88rem; font-weight: 500; }
.install-label:first-child { margin-top: 0; }
.install-cmd {
  background: #04081d;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
  overflow-x: auto;
}
.install-cmd code { color: var(--accent-2); font-size: 0.9rem; line-height: 1.6; }
.install-cmd .muted-cmd { color: #7a85a3; }
.install-cmd .cmt, .snippet .cmt { color: #5e6a85; font-style: italic; }

/* Three-option layout inside step 4 */
.option-label {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.option + .or-divider, .or-divider + .option { /* spacing handled below */ }
.or-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  color: var(--accent-2);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  user-select: none;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(56, 189, 248, 0.45), transparent);
}
.or-divider span {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.4);
  padding: 5px 14px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Framework chips under zeltro new — clickable */
.framework-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
}
.fw-chip {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  border: 1px solid rgba(14, 165, 233, 0.32);
  padding: 4px 10px;
  border-radius: 7px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.fw-chip:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}
.fw-chip.active {
  background: rgba(14, 165, 233, 0.32);
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18);
}
.fw-chip:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.install-cmd .fw-value {
  color: var(--accent-2);
  font-weight: 600;
}

/* Foot note under an OR option (e.g. the "Pull in existing" explanation) */
.option-foot {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 10px 0 0;
  line-height: 1.55;
}
.option-foot code {
  background: rgba(14, 165, 233, 0.1);
  color: var(--accent-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Copy-to-clipboard button on terminal-style code blocks */
pre.has-copy {
  position: relative;
}
.code-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.28);
  color: var(--muted);
  padding: 4px 9px 4px 7px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s, background .12s, color .12s, border-color .12s;
}
pre.has-copy:hover .code-copy,
pre.has-copy:focus-within .code-copy {
  opacity: 1;
}
.code-copy:hover {
  background: rgba(14, 165, 233, 0.22);
  color: #fff;
  border-color: var(--accent);
}
.code-copy:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.code-copy.copied {
  background: rgba(52, 211, 153, 0.16);
  border-color: rgba(52, 211, 153, 0.5);
  color: #34d399;
  opacity: 1;
}
.code-copy svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.code-copy-label {
  line-height: 1;
}
@media (max-width: 600px) {
  .code-copy-label { display: none; }
  .code-copy { padding: 5px; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  margin-top: 30px;
}
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.footer-row .copy { color: var(--muted); font-size: 0.92rem; margin: 0; }
.footer-row a { color: var(--accent-2); }

/* Platform / package chooser + download button (landing page step 1 and 5) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.fw-chip.active {
  background: rgba(14, 165, 233, 0.28);
  border-color: var(--accent);
  color: #eaf7ff;
}
.btn-download {
  display: inline-block;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #04081d;
  font-weight: 650;
  padding: 10px 20px;
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.95rem;
  transition: transform .12s, box-shadow .12s;
}
.btn-download:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14,165,233,.35); }

/* GUI showcase */
.gui-showcase { padding: 64px 0; }
.shot { margin: 28px auto 18px; max-width: 1100px; }
.shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.shot figcaption {
  color: var(--muted); font-size: 0.86rem; text-align: center; margin-top: 12px;
}

/* Prominent GUI download band, directly below the hero */
.download-band {
  padding: 46px 0 52px;
  background: linear-gradient(180deg, rgba(14,165,233,.07), transparent 70%);
  border-top: 1px solid rgba(56,189,248,.14);
  border-bottom: 1px solid rgba(56,189,248,.10);
}
.band-title { font-size: clamp(1.5rem, 3vw, 2rem); text-align: center; margin: 0 0 8px; }
.band-sub { color: var(--muted); text-align: center; margin: 0 auto 26px; max-width: 640px; }
.band-beta {
  display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(14,165,233,.14); border: 1px solid rgba(56,189,248,.3);
  color: var(--accent-2); font-size: .78rem; white-space: nowrap;
}
.dl-grid {
  display: grid; gap: 14px; max-width: 980px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.dl-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, rgba(103,232,249,.10), rgba(14,165,233,.06));
  border: 1px solid rgba(56,189,248,.28);
  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
.dl-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(103,232,249,.18), rgba(14,165,233,.12));
  box-shadow: 0 10px 30px rgba(14,165,233,.22);
}
.dl-for { color: #eaf7ff; font-weight: 650; font-size: 1.02rem; }
.dl-distros { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.dl-ext {
  margin-top: 6px; color: var(--accent-2); font-size: .8rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.band-note { text-align: center; color: var(--muted); margin: 22px auto 0; max-width: 720px; font-size: .92rem; }
.band-fine { display: inline-block; margin-top: 8px; font-size: .82rem; color: #7a85a3; }
.band-note a { color: var(--accent-2); }

/* Support / donation options */
.support { padding: 60px 0; }
.give-grid {
  display: grid; gap: 14px; max-width: 980px; margin: 26px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.give-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 20px; border-radius: 12px; text-decoration: none;
  background: rgba(15, 26, 69, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.2);
  transition: transform .12s, border-color .12s, background .12s;
}
.give-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(15, 26, 69, 0.8);
}
.give-name { color: #eaf7ff; font-weight: 650; font-size: 1rem; }
.give-note { color: var(--muted); font-size: .85rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Nav donate button
   Deliberately the only nav item that reads as a control — the rest are plain
   links, so a filled pill is enough to make it the obvious action without
   competing with the hero CTA below it.
--------------------------------------------------------------------------- */
.site-header nav a.nav-donate {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: linear-gradient(135deg, rgba(103, 232, 249, 0.14), rgba(14, 165, 233, 0.14));
  color: var(--text); font-weight: 700; font-size: 0.92rem; line-height: 1;
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.site-header nav a.nav-donate:hover {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  border-color: transparent; color: #04081d; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.32);
}
.nav-donate-heart { font-size: 1rem; color: #ff6b8a; transition: color .18s; }
.site-header nav a.nav-donate:hover .nav-donate-heart { color: #04081d; }

/* The nav collapses on narrow screens, but Donate is a call to action and
   should survive — show it alone rather than losing it entirely. */
@media (max-width: 540px) {
  .site-header nav { display: flex; gap: 0; }
  .site-header nav a { display: none; }
  .site-header nav a.nav-donate { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   GUI showcase — an INSET well, not a card
   The screenshot used to sit full-width on a raised drop shadow, which made it
   read as one enormous clickable tile. Sinking it into the page, shrinking it
   and pairing it with copy makes it obviously an illustration. No hover state,
   no pointer cursor, and the image itself ignores pointer events so nothing
   about it invites a click.
--------------------------------------------------------------------------- */
/* Tight to the hero above: the hero already carries generous bottom padding,
   and stacking both left an obvious void once the second CTA button was removed. */
.gui-showcase { padding: 8px 0 8px; }
.gui-panel {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center;
  padding: 38px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(56, 189, 248, 0.14);
  background:
    radial-gradient(120% 140% at 85% 20%, rgba(14, 165, 233, 0.07), transparent 60%),
    #060c24;
  box-shadow:
    inset 0 2px 22px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.gui-panel-copy h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.18;
  letter-spacing: -0.02em; margin: 6px 0 14px;
}
.gui-panel-copy .eyebrow { margin: 0; }
.lead-sm { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 14px; }
.lead-sm strong { color: var(--text); }
.gui-panel-copy .btn { margin-top: 6px; }

.gui-panel-shot { margin: 0; justify-self: end; max-width: 560px; }
.gui-panel-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 10px;
  /* No drop shadow and no transform: a raised, animated image is what made the
     old one look like a button. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none; user-select: none;
}
.gui-panel-shot figcaption {
  color: var(--muted); font-size: 0.8rem; text-align: right; margin-top: 10px;
}

@media (max-width: 900px) {
  .gui-panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 22px; }
  .gui-panel-shot { justify-self: stretch; max-width: none; }
  .gui-panel-shot figcaption { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Donate page
--------------------------------------------------------------------------- */
.nav-donate.is-current { border-color: var(--accent); }

.donate-hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.donate-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.03em; margin: 8px 0 16px;
}
/* Centered: the page is short and the hero has no visual on the right, so
   left-hugging text left a large dead area beside it. */
.donate-hero .wrap { text-align: center; }
.donate-lead { max-width: 660px; margin-left: auto; margin-right: auto; }
.give-icon-heart { color: #ff6b8a; }

.donate-channels { padding: 24px 0 8px; }
.donate-grid { max-width: 1000px; }

/* The channel cards ARE links, so unlike the screenshot panel they should look
   clickable — icon, and an explicit action line that underlines on hover. */
.give-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 2px; }
.give-go {
  margin-top: auto; padding-top: 10px;
  color: var(--accent); font-size: .85rem; font-weight: 650;
}
.give-card:hover .give-go { color: var(--accent-2); text-decoration: underline; }

.donate-fine {
  max-width: 720px; margin: 26px auto 0; text-align: center;
  color: var(--muted); font-size: .92rem; line-height: 1.65;
}

.donate-story { padding: 56px 0 72px; }
.story-body {
  max-width: 680px; margin: 22px auto 0;
  color: #cfd8ef; font-size: 1.03rem; line-height: 1.75;
}
.story-body p { margin: 0 0 18px; }
.story-body strong { color: var(--text); }
.story-body em { color: var(--accent-2); font-style: italic; }
.story-sign { color: var(--muted); font-size: .95rem; margin-top: 26px; }

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

@media (max-width: 540px) {
  .donate-hero { padding: 48px 0 28px; }
  .story-cta .btn { width: 100%; text-align: center; }
}

/* Denser still on small screens — 217 chips at 122px would otherwise be a very
   long scroll on a phone. */
@media (max-width: 640px) {
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 5px; }
  .app-grid button { padding: 6px 6px; font-size: 0.72rem; }
}