:root {
  --bg: #15110d;
  --bg-soft: #1c1a15;
  --bg-deep: #0c0a07;
  --surface: #1e1915;
  --surface-2: #272019;
  --stroke: #332d24;
  --ink: #f5efe6;
  --muted: #bcb1a1;          /* AA-safe on --bg and --surface */
  --sand: #cabea9;           /* strong caption */
  --accent: #f76b1c;
  --accent-deep: #e25e12;
  --accent-soft: #ffa468;    /* AA-safe as text on dark */
  --accent-ink: #1a0c03;
  --star: #f5c451;           /* GitHub gold, distinct from brand */
  --pill-border: #2a2118;    /* hero overlay pill border (stays dark in both themes) */
  --dot: rgba(255, 255, 255, 0.06);   /* grid dots; flips with theme so visible in both */
  --nav-bg: rgba(12, 10, 7, 0.82);
  --radius: 16px;
  --maxw: 1080px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Space Grotesk", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

/* Light theme: flip the palette. Driven by an explicit [data-theme] attribute
   set by script.js (defaulting to the system preference), so the toggle works
   regardless of what the OS reports. The hero overlay pill stays dark on purpose
   (it mirrors the real app), so its border/text are not themed here. */
:root[data-theme="light"] {
  --bg: #f7f3ec;
  --bg-soft: #efe9df;
  --bg-deep: #ece5d8;
  --surface: #ffffff;
  --surface-2: #f3ede3;
  --stroke: #e0d8c9;
  --ink: #1c1712;
  --muted: #6b6256;          /* AA-safe on --surface/--bg */
  --sand: #8a7d68;
  --accent: #f76b1c;
  --accent-deep: #d9530a;
  --accent-soft: #c2410c;    /* AA-safe as text on light */
  --accent-ink: #1a0c03;
  --star: #9a6b00;           /* darker gold, legible on light */
  --pill-border: #e0d8c9;
  --dot: rgba(28, 23, 18, 0.07);   /* dark dots on light bg */
  --nav-bg: rgba(247, 243, 236, 0.82);
}

/* No-JS fallback: follow the system until JS pins an explicit theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f7f3ec;
    --bg-soft: #efe9df;
    --bg-deep: #ece5d8;
    --surface: #ffffff;
    --surface-2: #f3ede3;
    --stroke: #e0d8c9;
    --ink: #1c1712;
    --muted: #6b6256;
    --sand: #8a7d68;
    --accent: #f76b1c;
    --accent-deep: #d9530a;
    --accent-soft: #c2410c;
    --accent-ink: #1a0c03;
    --star: #9a6b00;
    --pill-border: #e0d8c9;
    --dot: rgba(28, 23, 18, 0.07);
    --nav-bg: rgba(247, 243, 236, 0.82);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  font-family: var(--sans);
  background-color: var(--bg);
  /* Subtle dotted grid for a modern, technical feel (very low-contrast white). */
  background-image:
    radial-gradient(var(--dot) 1px, transparent 1px),
    radial-gradient(120% 80% at 50% -10%, rgba(247, 107, 28, 0.10), transparent 60%);
  background-size: 12px 12px, 100% 100%;
  background-position: center top, center top;
  background-repeat: repeat, no-repeat;
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;           /* safe reflow at high zoom, no horizontal scroll */
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--mono); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px clamp(16px, 4vw, 40px);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 22px); font-size: 0.92rem; }
.nav-links > a:not(.btn) { color: var(--muted); position: relative; padding: 4px 0; transition: color 0.2s ease; }
.nav-links > a:not(.btn):hover { color: var(--ink); }
.nav-links > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.22s ease;
}
.nav-links > a:not(.btn):hover::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 11px; font-weight: 600; font-size: 0.92rem;
  font-family: var(--sans);
  transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease;
  cursor: pointer; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border: 1px solid var(--stroke); background: var(--surface-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); background: var(--surface); color: var(--accent-soft); }
.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* ---------- Layout ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(54px, 9vw, 104px) clamp(16px, 4vw, 40px); }
.section + .section { border-top: 1px solid var(--stroke); }
.section-head { text-align: center; margin-bottom: clamp(34px, 5vw, 54px); }
.section-title { font-family: var(--display); font-size: clamp(1.55rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px; }
.section-lead { color: var(--muted); max-width: 54ch; margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(44px, 8vw, 92px) clamp(16px, 4vw, 40px) clamp(28px, 4vw, 52px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 60px); align-items: center;
}
.eyebrow { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-soft); font-weight: 500; }
.hero-title { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; margin: 16px 0 20px; }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 22px; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.9rem; color: var(--muted); }
.hero-facts li { display: flex; align-items: baseline; gap: 7px; }
.hero-facts .mono { color: var(--ink); font-weight: 600; }

/* Hero visual: mirrors the real Wisper recording overlay (a floating black pill
   with a live waveform), so the hero shows what users actually see on Linux. */
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.overlay-pill {
  display: inline-flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 22px;
  background: rgba(8, 7, 6, 0.92);
  border: 1px solid var(--pill-border); border-radius: 32px;
  box-shadow: 0 22px 50px -28px rgba(0, 0, 0, 0.85);
  max-width: min(440px, 86vw);
  position: relative;
}
.overlay-pill::after {
  content: ""; position: absolute; inset: -1px; border-radius: 32px;
  border: 1px solid var(--accent); opacity: 0;
  animation: ov-pulse 2.6s ease-out infinite;
}
@keyframes ov-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}
.ov-wave { flex: 0 0 auto; overflow: visible; }
.ov-bars rect { fill: url(#ov-wave-grad); transition: y 60ms linear, height 60ms linear; }
.ov-text { font-family: var(--mono); font-size: 0.84rem; color: #f5efe6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-caption { font-size: 0.76rem; color: var(--sand); letter-spacing: 0.02em; }

/* ---------- Pipeline ---------- */
.pipeline { list-style: none; display: flex; align-items: stretch; justify-content: center; gap: 14px; flex-wrap: wrap; }
.step { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 24px 22px; max-width: 300px; flex: 1 1 220px; }
.step-num { font-family: var(--mono); color: var(--accent-soft); font-size: 0.82rem; font-weight: 600; }
.step h3 { font-family: var(--display); font-size: 1.2rem; margin: 8px 0 8px; letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Features ---------- */
.feature-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 14px; }
.card {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 24px 22px; transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.card:hover { transform: translateY(-2px); border-color: rgba(247, 107, 28, 0.55); background: var(--surface-2); }
.card h3 { font-family: var(--display); font-size: 1.08rem; margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Download ---------- */
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 820px; margin: 0 auto; }
.pkg {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.22s ease, border-color 0.22s ease; cursor: pointer; color: var(--ink);
}
.pkg:hover { transform: translateY(-2px); border-color: var(--accent); }
.pkg-ico { font-size: 1.9rem; }
.pkg h3 { font-family: var(--display); font-size: 1.05rem; }
.pkg code, .pkg .ext { font-family: var(--mono); color: var(--accent-soft); background: var(--bg-soft); padding: 2px 8px; border-radius: 6px; font-size: 0.84rem; }
.pkg-cta { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--accent-soft); }
.download-loading { color: var(--muted); text-align: center; grid-column: 1 / -1; }
.download-note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 26px; }
.download-note a { color: var(--accent-soft); }

/* ---------- Setup ---------- */
.setup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: stretch; }
.setup-card { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius); padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; }
.setup-card h3 { font-family: var(--display); font-size: 1.05rem; margin-bottom: 0; color: var(--accent-soft); display: flex; align-items: center; gap: 10px; }
.setup-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.82rem; font-weight: 700; flex: 0 0 auto; }
.setup-card p { color: var(--muted); font-size: 0.92rem; flex: 1; }
.setup-foot { font-family: var(--mono); font-size: 0.76rem; color: var(--sand, #cabea9); opacity: 0.7; border-top: 1px solid var(--stroke); padding-top: 10px; margin-top: auto; }
.setup-card code, .setup-card pre { font-family: var(--mono); }
.setup-card pre { background: var(--bg-soft); border: 1px solid var(--stroke); border-radius: 10px; padding: 14px 48px 14px 14px; margin: 0; overflow-x: auto; font-size: 0.82rem; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.cmd { position: relative; margin: 14px 0 4px; }
.cmd .cmd-copy {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;                 /* >= 24px target */
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--stroke); border-radius: 8px;
  cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.cmd .cmd-copy:hover { color: var(--accent-soft); border-color: var(--accent); }
.cmd .cmd-copy .ic-copy,
.cmd .cmd-copy .ic-check { position: absolute; transition: opacity 0.18s ease, transform 0.18s ease; }
.cmd .cmd-copy .ic-check { opacity: 0; }
.cmd .cmd-copy.copied { color: #5fae5f; border-color: #2f5f2f; background: rgba(47, 95, 47, 0.15); }
.cmd .cmd-copy.copied .ic-copy { opacity: 0; }
.cmd .cmd-copy.copied .ic-check { opacity: 1; animation: pop 0.26s ease-out; }
@keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.setup-card .muted { font-size: 0.84rem; opacity: 0.82; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--surface); border: 1px solid var(--stroke); border-radius: 12px; padding: 0 18px; }
.faq summary { font-family: var(--display); font-weight: 500; font-size: 1rem; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-soft); font-family: var(--mono); font-size: 1.3rem; line-height: 1; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-size: 0.94rem; padding: 0 0 16px; max-width: 64ch; }

/* ---------- CTA ---------- */
.cta {
  max-width: var(--maxw); margin: clamp(36px, 6vw, 72px) auto 0;
  text-align: center; padding: clamp(40px, 6vw, 64px) clamp(16px, 4vw, 40px);
  background-color: var(--bg);
  background-image: linear-gradient(160deg, rgba(247, 107, 28, 0.10), rgba(255, 164, 108, 0.03));
  border: 1px solid rgba(247, 107, 28, 0.28); border-radius: 26px;
}
.cta h2 { font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: -0.03em; margin-bottom: 22px; }
.cta-star { margin-top: 18px; display: flex; align-items: center; justify-content: center; }

/* GitHub icon + star chip (octocat + label + star + count, one aligned unit) */
.gh-ico { display: inline-block; flex: 0 0 auto; }
.gh-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.gh-link:hover { color: var(--ink); }
.stars { display: inline-flex; align-items: center; gap: 4px; color: var(--star); margin-left: 2px; }
.star-ico { flex: 0 0 auto; }
.star-count { font-family: var(--mono); font-weight: 600; font-size: 0.92rem; line-height: 1; color: var(--star); }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--stroke);
  margin-top: clamp(36px, 6vw, 72px);
  padding: 38px clamp(16px, 4vw, 40px);
  background: var(--bg-deep);
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.foot-brand { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; }
.foot p { color: var(--muted); font-size: 0.88rem; }
.foot-links { display: flex; gap: 20px; font-size: 0.9rem; }
.foot-links a { color: var(--muted); transition: color 0.2s ease; }
.foot-links a:hover { color: var(--accent-soft); }

/* ---------- Focus & motion ---------- */
a:focus-visible, summary:focus-visible, .btn:focus-visible, .cmd-copy:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions, .hero-facts { justify-content: center; }
  .hero-visual { order: -1; }
  /* On mobile: drop the scroll-anchor links, keep GitHub + Download buttons only. */
  .nav { padding: 11px clamp(16px, 4vw, 40px); }
  .nav-links a:not(.btn):not(.gh-link) { display: none; }
  .nav-links { gap: 12px; }
}
@media (max-width: 860px) {
  .cta { margin: 40px 16px 0; padding: 36px 18px; border-radius: 20px; }
}
@media (max-width: 480px) {
  .hero-facts { flex-direction: column; gap: 8px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .caret { opacity: 1; }
}

/* ---------- Theme toggle (floating, fixed on body) ---------- */
.theme-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--stroke); border-radius: 12px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover { color: var(--accent-soft); border-color: var(--accent); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }