:root {
  --bg: #0a0908;
  --bg-2: #141210;
  --bg-3: #1d1916;
  --bg-4: #262119;
  --fg: #f5f1ea;
  --muted: #9c928a;
  --muted-2: #6f665e;
  --line: #2b2620;
  --line-2: #39322a;
  --accent: #ff5b3a;
  --accent-2: #ffb648;
  --accent-soft: rgba(255, 91, 58, 0.14);
  --red: #ef4444;
  --green: #6bd58a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 50px rgba(0, 0, 0, 0.5);
  --maxw: 960px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(820px 520px at 78% -8%, rgba(255, 91, 58, 0.12), transparent 60%),
    radial-gradient(720px 460px at 8% 12%, rgba(255, 182, 72, 0.07), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(10, 9, 8, 0.82);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 15px;
}
.nav-brand:hover {
  text-decoration: none;
}
.nav-brand img {
  border-radius: 6px;
}
.nav-links {
  display: flex;
  gap: 20px;
  margin-left: 10px;
  margin-right: auto;
}
.nav-links a {
  color: var(--muted);
  font-size: 13px;
}
.nav-links a:hover {
  color: var(--fg);
  text-decoration: none;
}
.gh-logo {
  fill: currentColor;
}
.gh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 640px) {
  .nav-links {
    display: none;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.btn:hover {
  background: #2a241c;
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn.sm {
  padding: 7px 13px;
  font-size: 13px;
}
.btn.primary {
  background: var(--accent);
  color: #1a0d08;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255, 91, 58, 0.28);
}
.btn.primary:hover {
  background: #ff704f;
}
.btn.ghost {
  background: transparent;
}

/* ---------- layout ---------- */
main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0 8px;
  border-top: 1px solid var(--line);
}
.section:first-of-type {
  border-top: none;
}
.section-title {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
}
.section-lead {
  margin: 0 0 28px;
  max-width: 64ch;
  color: var(--fg);
  font-size: 17px;
  line-height: 1.65;
}
.section-lead a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- hero ---------- */
.hero {
  padding: 88px 0 72px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-grid > * {
  /* prevent grid items from forcing the column to expand to fit
     intrinsic min-content of the demo (otherwise mobile overflows) */
  min-width: 0;
}
.hero-title {
  margin: 0 0 14px;
  font-size: 68px;
  letter-spacing: -2px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff7ee 0%, #f5f1ea 60%, #c9bfb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tag {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-meta {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-meta .dot {
  opacity: 0.5;
}
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 182, 72, 0.4);
  background: rgba(255, 182, 72, 0.14);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---------- free strip ---------- */
.hero-free {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 13px;
  color: var(--fg);
}
.hero-free li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.free-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(107, 213, 138, 0.16);
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- teleprompter demo ---------- */
.hero-demo {
  perspective: 1200px;
}
.demo-window {
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.85), rgba(10, 9, 8, 0.7));
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 91, 58, 0.06);
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
  animation: demo-float 6s ease-in-out infinite;
}
@keyframes demo-float {
  0%, 100% { transform: rotateY(-6deg) rotateX(2deg) translateY(0); }
  50% { transform: rotateY(-6deg) rotateX(2deg) translateY(-8px); }
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.demo-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dot.red { background: #ff5f57; }
.dot.amber { background: #febc2e; }
.dot.green { background: #28c840; }
.demo-title {
  margin-left: 10px;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
}
.demo-viewport {
  height: 280px;
  overflow: hidden;
  position: relative;
  padding: 0 26px;
}
.demo-reading-line {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-2) 20%, var(--accent-2) 80%, transparent 100%);
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 182, 72, 0.5);
}
.demo-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg-2) 0%, transparent 22%, transparent 78%, var(--bg-2) 100%);
  z-index: 1;
}
.demo-scroll {
  font: 600 22px/44px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  text-align: center;
  white-space: nowrap;
  animation: demo-scroll 24s linear infinite;
}
.demo-scroll p {
  margin: 0;
  height: 44px;
  line-height: 44px;
  color: rgba(245, 241, 234, 0.5);
  transition: color 200ms ease;
}
.demo-scroll p.active {
  color: var(--accent);
}
@keyframes demo-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-352px); }
}
.demo-hud {
  display: flex;
  gap: 8px;
  padding: 9px 13px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.hud-pill {
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted);
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 9px;
}
.hud-pill:first-child {
  color: var(--green);
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hero-demo {
    max-width: 420px;
    width: 100%;
  }
  .hero {
    padding: 56px 0 48px;
  }
  .hero-title {
    font-size: 52px;
  }
}
@media (max-width: 600px) {
  .hero-title {
    font-size: 42px;
  }
  .hero-tag {
    font-size: 16px;
  }
  .hero-demo {
    max-width: 100%;
    /* disable 3D perspective on small screens so the rotated window
       can't paint outside its parent column and trigger horizontal
       scroll on the page */
    perspective: none;
  }
  .demo-window {
    transform: none;
    animation: none;
  }
  .demo-viewport {
    height: 240px;
  }
  .demo-scroll {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .hero {
    padding: 40px 0 36px;
  }
  .hero-title {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
  .hero-tag {
    font-size: 15px;
  }
  .hero-actions {
    width: 100%;
  }
  .hero-actions .btn {
    flex: 1 1 auto;
  }
  .demo-viewport {
    height: 200px;
  }
  .demo-scroll {
    /* keep long lines on one line (the scroll effect needs it), but
       shrink enough that the longest line ("Your mouse keeps working
       on whatever is below.") fits inside the viewport on a 360px phone.
       12px + 12px padding is the smallest combo that fits all common
       phones (iPhone SE / small Android included). */
    font-size: 12px;
    line-height: 26px;
    /* min-width: 0 lets the nowrap content respect its parent's width
       instead of forcing the parent to grow */
    min-width: 0;
    max-width: 100%;
    animation-name: demo-scroll-sm;
    animation-duration: 18s;
  }
  .demo-scroll p {
    height: 26px;
    line-height: 26px;
  }
  .demo-reading-line {
    left: 12px;
    right: 12px;
  }
  .demo-viewport {
    padding: 0 12px;
  }
}
@keyframes demo-scroll-sm {
  /* 8 lines × 26px = 208px; matches the duplicated paragraph block for a seamless loop */
  0% { transform: translateY(0); }
  100% { transform: translateY(-208px); }
}
@media (max-width: 360px) {
  /* very small phones / narrow foldables: scale the whole demo down
     so the longest line still fits. At 360px width the inner is 286px;
     even at 12px the longest line is 286px so it's right at the edge.
     Scaling the window buys a little extra room. */
  .demo-window {
    transform: scale(0.9);
    transform-origin: top center;
  }
  .hero-demo {
    /* give the scaled window room vertically without overflowing the column */
    min-height: 220px;
  }
}

/* ---------- cards ---------- */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: border-color 160ms ease, transform 160ms ease;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 12px;
}

/* ---------- feature grid ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.feature-grid .card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
@media (max-width: 820px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- terminal ---------- */
.install-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .install-grid {
    grid-template-columns: 1fr;
  }
}
.terminal {
  background: #100e0c;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 140ms ease;
}
.terminal:hover {
  border-color: var(--accent);
}
.terminal.copied {
  border-color: var(--green);
}
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  background: #17130f;
}
.terminal-bar .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.terminal-title {
  margin-left: 10px;
  font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted-2);
}
.terminal-copy {
  margin-left: auto;
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.terminal:hover .terminal-copy {
  color: var(--accent);
  border-color: var(--accent);
}
.terminal.copied .terminal-copy {
  color: var(--green);
  border-color: var(--green);
}
.terminal pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font: 13.5px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg);
}
.terminal .prompt {
  color: var(--accent);
  user-select: none;
}

/* ---------- downloads ---------- */
.downloads .platform-list {
  list-style: none;
  margin: 16px 0 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .downloads .platform-list {
    grid-template-columns: 1fr;
  }
}
.downloads .platform-list li {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plat-key {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.9px;
}
.plat-val {
  font-weight: 600;
  font-size: 14px;
}

/* ---------- shortcuts ---------- */
.shortcuts table {
  width: 100%;
  border-collapse: collapse;
}
.shortcuts td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.shortcuts tr:last-child td {
  border-bottom: none;
}
.shortcuts td:first-child {
  width: 38%;
  color: var(--muted);
}
kbd {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 7px;
  font: 12px/1.6 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--fg);
}

/* ---------- community ---------- */
.community-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .community-grid {
    grid-template-columns: 1fr;
  }
}
.link-card {
  display: block;
  color: inherit;
}
.link-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  text-decoration: none;
}
.link-card h3 {
  color: var(--fg);
}
.link-card:hover h3 {
  color: var(--accent);
}

/* ---------- footer ---------- */
.footer {
  margin-top: 96px;
  padding: 30px 24px 44px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.footer a {
  color: var(--fg);
}
.footer a:hover {
  color: var(--accent);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-window,
  .demo-scroll {
    animation: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}