/* ============================================================
   GUM — git user manager · "Pastel Cyberpunk"
   Hubba Bubba powder palette · dark + light themes
   ------------------------------------------------------------
   Theming model:
   - :root              → shared tokens + DARK theme (default)
   - :root[data-theme=light] → light "powder" overrides
   - --scr-*            → the dark "screen" palette (terminal &
                          code blocks) — FIXED in both themes so
                          syntax colours stay vivid.
   ============================================================ */

:root {
  /* ---- Powder palette → neon (DARK defaults) ---- */
  --bubblegum: #ff6fb5;
  --bubblegum-soft: #ffb3d9;
  --bubblegum-glow: rgba(255, 111, 181, 0.55);

  --cyan: #6cf0ff;
  --cyan-soft: #b3f1ff;
  --cyan-glow: rgba(108, 240, 255, 0.5);

  --lavender: #c8a2ff;
  --lavender-soft: #e2cdff;
  --lavender-glow: rgba(200, 162, 255, 0.5);

  --mint: #9af5d0;
  --mint-soft: #c8fae6;
  --mint-glow: rgba(154, 245, 208, 0.45);

  /* ---- Canvas (DARK) ---- */
  --bg: #120a24;
  --bg-2: #1a0e36;
  --bg-3: #241248;
  --ink: #fbeefc;
  --ink-dim: #c9b6da;
  --ink-faint: #8c7aa6;

  --surface: rgba(40, 22, 70, 0.55);
  --surface-line: rgba(200, 162, 255, 0.18);

  --nav-bg: linear-gradient(to bottom, rgba(18, 10, 36, 0.85), rgba(18, 10, 36, 0.2));
  --grid-line: rgba(200, 162, 255, 0.10);
  --scan: rgba(255, 255, 255, 0.03);
  --aurora-opacity: 1;
  --bubble-opacity: 0.5;
  --ico-bg: rgba(255, 255, 255, 0.04);
  --tab-active-bg: rgba(255, 255, 255, 0.05);

  /* glitch fringe colours */
  --glitch-1: #5ef0ff;
  --glitch-2: #ff5ad6;

  /* ---- Screen palette (FIXED — terminal & code) ---- */
  --scr-bg: rgba(12, 6, 26, 0.92);
  --scr-bg-solid: #0c061a;
  --scr-border: rgba(200, 162, 255, 0.20);
  --scr-ink: #fbeefc;
  --scr-dim: #c9b6da;
  --scr-faint: #8c7aa6;
  --scr-pink: #ffb3d9;
  --scr-cyan: #6cf0ff;
  --scr-lav: #c8a2ff;
  --scr-mint: #9af5d0;
  --scr-cyan-glow: rgba(108, 240, 255, 0.5);
  --scr-pink-glow: rgba(255, 111, 181, 0.5);
  --scr-mint-glow: rgba(154, 245, 208, 0.45);

  /* ---- Shared tokens ---- */
  --maxw: 1120px;
  --radius: 18px;
  --font-brand: "Fredoka", system-ui, sans-serif;
  --font-head: "Chakra Petch", system-ui, sans-serif;
  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ===================== LIGHT "POWDER" THEME ===================== */
:root[data-theme="light"] {
  --bubblegum: #ff3d99;
  --bubblegum-soft: #ff86c4;
  --bubblegum-glow: rgba(255, 61, 153, 0.28);

  --cyan: #0e9fc4;
  --cyan-soft: #4fc1e4;
  --cyan-glow: rgba(14, 159, 196, 0.26);

  --lavender: #8a54f0;
  --lavender-soft: #b48bf2;
  --lavender-glow: rgba(138, 84, 240, 0.24);

  --mint: #0fae7e;
  --mint-soft: #4fd1a8;
  --mint-glow: rgba(15, 174, 126, 0.22);

  --bg: #fdf1f8;
  --bg-2: #f4e9ff;
  --bg-3: #ffffff;
  --ink: #38184a;
  --ink-dim: #5f4470;
  --ink-faint: #a98bb5;

  --surface: rgba(255, 255, 255, 0.72);
  --surface-line: rgba(138, 84, 240, 0.20);

  --nav-bg: linear-gradient(to bottom, rgba(253, 241, 248, 0.92), rgba(253, 241, 248, 0.35));
  --grid-line: rgba(138, 84, 240, 0.10);
  --scan: rgba(90, 40, 100, 0.045);
  --aurora-opacity: 0.55;
  --bubble-opacity: 0.4;
  --ico-bg: rgba(138, 84, 240, 0.08);
  --tab-active-bg: rgba(255, 61, 153, 0.10);

  --glitch-1: #00b8d4;
  --glitch-2: #ff1f8f;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

a { color: inherit; text-decoration: none; }
code { font-family: var(--font-mono); }

/* ---------- Background layers ---------- */
.bg-aurora,
.bg-grid,
.bg-scanlines,
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-aurora {
  background:
    radial-gradient(60% 50% at 15% 0%, var(--bubblegum-glow), transparent 70%),
    radial-gradient(55% 45% at 85% 5%, var(--cyan-glow), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--lavender-glow), transparent 75%),
    radial-gradient(40% 40% at 90% 80%, var(--mint-glow), transparent 70%);
  opacity: var(--aurora-opacity);
  filter: saturate(1.1);
  animation: drift 22s ease-in-out infinite alternate;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(0, -3%, 0) scale(1.08); }
}

/* Perspective grid floor */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, transparent 60%, #000 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 92%);
  opacity: 0.7;
}

.bg-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    var(--scan) 0,
    var(--scan) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* Floating gum bubbles */
.bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.4px);
  opacity: var(--bubble-opacity);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), var(--bubblegum-soft) 40%, var(--bubblegum) 100%);
  box-shadow: 0 0 36px var(--bubblegum-glow);
  animation: float 18s ease-in-out infinite;
}
.bubble.b1 { width: 120px; height: 120px; left: 6%;  top: 22%; animation-delay: 0s; }
.bubble.b2 { width: 70px;  height: 70px;  left: 80%; top: 14%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), var(--cyan-soft) 40%, var(--cyan) 100%);
  box-shadow: 0 0 30px var(--cyan-glow); animation-delay: -3s; }
.bubble.b3 { width: 48px;  height: 48px;  left: 42%; top: 8%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), var(--lavender-soft) 40%, var(--lavender) 100%);
  box-shadow: 0 0 26px var(--lavender-glow); animation-delay: -7s; }
.bubble.b4 { width: 90px;  height: 90px;  left: 88%; top: 60%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), var(--mint-soft) 40%, var(--mint) 100%);
  box-shadow: 0 0 30px var(--mint-glow); animation-delay: -11s; }
.bubble.b5 { width: 34px;  height: 34px;  left: 22%; top: 70%; animation-delay: -5s; }
.bubble.b6 { width: 58px;  height: 58px;  left: 60%; top: 78%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.9), var(--lavender-soft) 40%, var(--lavender) 100%);
  box-shadow: 0 0 28px var(--lavender-glow); animation-delay: -9s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50%      { transform: translateY(-28px) translateX(10px); }
}

/* ---------- Layout shell ---------- */
main, .nav, .footer { position: relative; z-index: 1; }
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px 24px;
}

/* ---------- Nav ---------- */
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: var(--nav-bg);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-bubble { font-size: 1.5rem; filter: drop-shadow(0 0 8px var(--bubblegum-glow)); }
.brand-word {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1px;
  background: linear-gradient(120deg, var(--bubblegum), var(--lavender) 50%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-family: var(--font-head); font-weight: 500; color: var(--ink-dim); font-size: 0.95rem; transition: color .2s, text-shadow .2s; }
.nav-links a:hover { color: var(--ink); text-shadow: 0 0 12px var(--cyan-glow); }
.nav-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--surface-line);
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface);
}
.nav-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan-glow); }

/* Theme toggle */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.theme-toggle:hover { border-color: var(--lavender); box-shadow: 0 0 18px var(--lavender-glow); transform: rotate(-12deg); }
.theme-toggle .ico { width: 18px; height: 18px; }
[data-theme="dark"] .ico-sun  { display: block; }
[data-theme="dark"] .ico-moon { display: none; }
[data-theme="light"] .ico-sun  { display: none; }
[data-theme="light"] .ico-moon { display: block; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px 24px 60px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: 0.4px;
}
.pill-mint { color: var(--mint); box-shadow: 0 0 14px var(--mint-glow) inset, 0 0 8px var(--mint-glow); }
.pill-cyan { color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow) inset, 0 0 8px var(--cyan-glow); }
.pill-lav  { color: var(--lavender); box-shadow: 0 0 14px var(--lavender-glow) inset, 0 0 8px var(--lavender-glow); }
a.pill { cursor: pointer; transition: filter .2s ease, transform .2s ease; }
a.pill:hover { filter: brightness(1.25); transform: translateY(-1px); }

.hero-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 22px;
}
.grad-pink {
  background: linear-gradient(120deg, var(--bubblegum-soft), var(--bubblegum));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px var(--bubblegum-glow));
}
.grad-cyan {
  background: linear-gradient(120deg, var(--cyan-soft), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px var(--cyan-glow));
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--ink-dim);
  max-width: 38ch;
  margin-bottom: 32px;
}
.hero-sub strong { color: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600;
  padding: 13px 22px; border-radius: 12px;
  font-size: 1rem; cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, background .2s;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  color: #1a0e36;
  background: linear-gradient(120deg, var(--bubblegum), var(--lavender));
  box-shadow: 0 6px 30px var(--bubblegum-glow);
}
.btn-primary:hover { box-shadow: 0 8px 40px var(--bubblegum-glow), 0 0 24px var(--lavender-glow); transform: translateY(-2px); }
.btn-ghost {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--surface-line);
}
.btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 20px var(--cyan-glow); transform: translateY(-2px); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }

.cta-note { font-size: 0.85rem; color: var(--ink-faint); }
.cta-note code { color: var(--mint); font-size: 0.8rem; }

/* ---------- Glitch (brand wordmark — subtle) ---------- */
.glitch { position: relative; display: inline-block; isolation: isolate; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  z-index: -1;
  background: none;
  pointer-events: none;
}
.glitch::before { color: var(--glitch-1); transform: translate(-2px, 0); animation: glitch-x 3.5s infinite linear alternate; }
.glitch::after  { color: var(--glitch-2); transform: translate(2px, 0); animation: glitch-x 2.7s infinite linear alternate-reverse; }
@keyframes glitch-x {
  0%, 92%, 100% { transform: translate(0,0); }
  93% { transform: translate(-3px, 1px); }
  96% { transform: translate(3px, -1px); }
}

/* ---------- Glitch (titles — stronger, datamosh bursts) ----------
   Two neon ghosts sit BEHIND the gradient text (z-index:-1), so they
   peek out as constant RGB fringe, then slice + jump in periodic bursts. */
.gx { position: relative; display: inline-block; isolation: isolate; }
.gx::before, .gx::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  z-index: -1;
  background: none;
  pointer-events: none;
}
.gx::before { color: var(--glitch-1); animation: gx-a 4.5s infinite; }
.gx::after  { color: var(--glitch-2); animation: gx-b 4.5s infinite; }

@keyframes gx-a {
  0%, 8%, 46%, 56%, 100% { transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  2%  { transform: translate(-4px, -1px); clip-path: inset(0 0 68% 0); }
  4%  { transform: translate(-1px, 1px);  clip-path: inset(40% 0 25% 0); }
  6%  { transform: translate(-5px, 0);    clip-path: inset(72% 0 0 0); }
  48% { transform: translate(3px, 1px);   clip-path: inset(20% 0 50% 0); }
  50% { transform: translate(-5px, -1px); clip-path: inset(60% 0 8% 0); }
  52% { transform: translate(-1px, 0);    clip-path: inset(35% 0 35% 0); }
}
@keyframes gx-b {
  0%, 8%, 46%, 56%, 100% { transform: translate(2px, 0); clip-path: inset(0 0 0 0); }
  2%  { transform: translate(4px, 1px);   clip-path: inset(0 0 55% 0); }
  4%  { transform: translate(1px, -1px);  clip-path: inset(45% 0 20% 0); }
  6%  { transform: translate(5px, 0);     clip-path: inset(65% 0 0 0); }
  48% { transform: translate(-3px, -1px); clip-path: inset(25% 0 45% 0); }
  50% { transform: translate(5px, 1px);   clip-path: inset(55% 0 10% 0); }
  52% { transform: translate(1px, 0);     clip-path: inset(30% 0 40% 0); }
}

/* ---------- Terminal (dark screen — fixed palette) ---------- */
.terminal {
  background: linear-gradient(180deg, rgba(26,14,54,0.94), var(--scr-bg));
  border: 1px solid var(--scr-border);
  border-radius: var(--radius);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 60px rgba(200,162,255,0.12);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--scr-border);
  background: rgba(255,255,255,0.02);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-pink { background: var(--scr-pink); box-shadow: 0 0 8px var(--scr-pink-glow); }
.dot-yellow { background: #ffd86f; box-shadow: 0 0 8px rgba(255,216,111,.5); }
.dot-mint { background: var(--scr-mint); box-shadow: 0 0 8px var(--scr-mint-glow); }
.term-title {
  margin-left: 10px; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--scr-faint);
}
.term-body {
  padding: 22px 20px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.85;
  min-height: 280px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--scr-ink);
}
.term-body .t-prompt { color: var(--scr-mint); }
.term-body .t-cmd { color: var(--scr-cyan); }
.term-body .t-flag { color: var(--scr-lav); }
.term-body .t-str { color: var(--scr-pink); }
.term-body .t-ok { color: var(--scr-mint); }
.term-body .t-out { color: var(--scr-dim); }
.term-body .t-comment { color: var(--scr-faint); font-style: italic; }
.cursor {
  display: inline-block; width: 9px; height: 1.05em;
  background: var(--scr-cyan); margin-left: 2px;
  vertical-align: text-bottom;
  box-shadow: 0 0 10px var(--scr-cyan-glow);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Strip ---------- */
.strip {
  max-width: var(--maxw);
  margin: 10px auto 0;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 28px; flex-wrap: wrap;
  font-family: var(--font-head);
  color: var(--ink-dim);
}
.strip-item { display: flex; align-items: center; gap: 12px; font-size: 1rem; }
.strip-num {
  font-family: var(--font-brand); font-weight: 700; font-size: 1.7rem;
  background: linear-gradient(120deg, var(--bubblegum), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.strip-divider { width: 1px; height: 28px; background: var(--surface-line); }

/* ---------- Section heads ---------- */
.section-head { max-width: 620px; margin-bottom: 52px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--cyan); letter-spacing: 1px;
  text-shadow: 0 0 12px var(--cyan-glow);
}
.section-head h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.12; margin: 12px 0 14px; letter-spacing: -0.5px;
}
.section-head p { color: var(--ink-dim); font-size: 1.05rem; }

/* ---------- Features ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px 24px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, var(--glow), transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 30px var(--glow);
}
.card:hover::before { opacity: 0.5; }
.card > * { position: relative; z-index: 1; }
.card-ico {
  font-size: 1.8rem; width: 54px; height: 54px;
  display: grid; place-items: center; border-radius: 14px;
  background: var(--ico-bg);
  border: 1px solid var(--surface-line);
  margin-bottom: 16px;
  box-shadow: 0 0 18px var(--glow) inset;
}
.card h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.22rem; margin-bottom: 8px; color: var(--ink);
}
.card p { color: var(--ink-dim); font-size: 0.96rem; }
.card code { color: var(--accent); font-size: 0.86em; }

/* ---------- Steps ---------- */
.steps { display: flex; flex-direction: column; gap: 22px; }
.step {
  display: grid; grid-template-columns: 90px 1fr; gap: 24px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 28px;
}
.step-num {
  font-family: var(--font-brand); font-weight: 700; font-size: 2.4rem;
  background: linear-gradient(150deg, var(--bubblegum), var(--lavender) 60%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.step-body h3 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 6px; }
.step-body > p { color: var(--ink-dim); margin-bottom: 16px; max-width: 56ch; }

/* ---------- Code blocks (dark screen — fixed palette) ---------- */
.code-block {
  position: relative;
  background: var(--scr-bg);
  border: 1px solid var(--scr-border);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
}
.code-block-lg { padding: 22px 22px; }
.code-block pre { font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.7; color: var(--scr-ink); }
.code-block code { white-space: pre; }
.c-prompt { color: var(--scr-mint); }
.c-cmd { color: var(--scr-cyan); font-weight: 700; }
.c-flag { color: var(--scr-lav); }
.c-str { color: var(--scr-pink); }
.c-ok { color: var(--scr-mint); }
.c-out { color: var(--scr-dim); }
.c-comment { color: var(--scr-faint); font-style: italic; }

.copy {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 0.7rem;
  color: var(--scr-dim);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--scr-border);
  border-radius: 7px; padding: 4px 10px; cursor: pointer;
  transition: all .18s ease;
}
.copy:hover { color: var(--scr-bg-solid); background: var(--scr-cyan); border-color: var(--scr-cyan); box-shadow: 0 0 14px var(--scr-cyan-glow); }
.copy.copied { color: var(--scr-bg-solid); background: var(--scr-mint); border-color: var(--scr-mint); }

/* ---------- Install tabs ---------- */
.install {
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: 10px;
}
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.tab {
  font-family: var(--font-head); font-weight: 500; font-size: 0.92rem;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px; padding: 9px 16px; cursor: pointer;
  transition: all .2s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  color: var(--ink);
  background: var(--tab-active-bg);
  border-color: var(--bubblegum);
  box-shadow: 0 0 18px var(--bubblegum-glow);
}
.tab-panels { padding: 8px; }
.panel { display: none; }
.panel.is-active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- CTA band ---------- */
.cta-band {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 72px 24px;
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  margin-bottom: 14px; letter-spacing: -0.5px;
}
.cta-band p { color: var(--ink-dim); font-size: 1.1rem; margin-bottom: 28px; }

/* ---------- Footer ---------- */
.footer {
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding: 40px 24px 60px;
  border-top: 1px solid var(--surface-line);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); }
.footer-note { color: var(--ink-faint); font-size: 0.88rem; }
.footer a { color: var(--cyan); font-family: var(--font-mono); font-size: 0.82rem; }
.footer a:hover { text-shadow: 0 0 12px var(--cyan-glow); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 40px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .nav-links a:not(.nav-ghost) { display: none; }
}
@media (max-width: 620px) {
  .feature-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
  .step-num { font-size: 1.8rem; }
  .section { padding: 64px 20px; }
  .strip-divider { display: none; }
  .footer { flex-direction: column; text-align: center; }
  .nav-ghost span { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}