:root {
  color-scheme: dark;
  --ink: #effaf7;
  --muted: #91aaa3;
  --green: #58f0b4;
  --green-deep: #153c31;
  --line: rgba(170, 218, 204, 0.17);
  --panel: #0b1815;
  --panel-light: #10231e;
  --page: #06100e;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 8px 12px;
  color: #06100e;
  background: var(--green);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0;
  background: rgba(6, 16, 14, 0.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 760; letter-spacing: -0.02em; }
.brand img { border-radius: 11px; }
nav { display: flex; align-items: center; gap: 28px; color: var(--muted); font-size: 14px; }
nav a:hover, nav a:focus-visible { color: var(--ink); }
.nav-github { color: var(--green); }

.hero, .section, footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}
.hero {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  min-height: 730px;
  padding: 96px 0 80px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--green);
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.16em;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 680px;
  margin-bottom: 28px;
  font-size: clamp(54px, 6.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}
h1 span { color: var(--green); }
.hero-lede { max-width: 610px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line);
  font-weight: 700;
  transition: transform 160ms ease, background 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #04100c; background: var(--green); border-color: var(--green); }
.button-secondary { background: var(--panel); }
.platform-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 44px; color: var(--muted); font-size: 13px; }
.platform-list span::before { content: "●"; margin-right: 8px; color: var(--green); font-size: 8px; }

.hero-visual { position: relative; min-height: 500px; display: grid; place-items: center; }
.signal-grid {
  position: absolute;
  inset: 2% 0;
  opacity: 0.22;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 28%, transparent 72%);
}
.app-window {
  position: relative;
  width: min(520px, 92%);
  overflow: hidden;
  background: #091411;
  border: 1px solid rgba(88, 240, 180, 0.28);
  box-shadow: 0 42px 90px rgba(0, 0, 0, 0.45);
  transform: perspective(1100px) rotateY(-6deg) rotateX(2deg);
}
.window-bar { display: flex; align-items: center; padding: 13px 16px; color: #678079; background: #0d1c18; border-bottom: 1px solid var(--line); font: 11px ui-monospace, monospace; }
.window-bar > span { margin: auto; transform: translateX(-24px); }
.traffic-lights { display: flex; gap: 6px; }
.traffic-lights i { width: 9px; height: 9px; border-radius: 50%; background: #29433c; }
.window-body { display: grid; grid-template-columns: 72px 1fr; min-height: 330px; }
.window-body aside { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 22px 10px; background: #0b1815; border-right: 1px solid var(--line); }
.window-body aside img { border-radius: 12px; }
.window-body aside i { width: 22px; height: 3px; background: #29433c; }
.terminal-panel { padding: 28px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.terminal-panel p { font: 12px Inter, sans-serif; color: var(--muted); }
.terminal-panel p b { color: var(--ink); margin-right: 14px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.terminal-panel code { display: block; margin: 20px 0; color: #d9ebe6; font-size: 12px; }
.terminal-panel code span { color: var(--green); }
.terminal-panel code.dim { color: #526c65; }
.prompt-card { position: relative; margin-top: 36px; padding: 18px; background: #10231e; border: 1px solid var(--line); }
.prompt-card small { display: block; margin-bottom: 13px; color: var(--green); font-size: 9px; letter-spacing: 0.14em; }
.prompt-card strong { color: #8ba29c; font: 500 12px Inter, sans-serif; }
.prompt-card button { float: right; padding: 6px 10px; color: #04100c; background: var(--green); border: 0; font-size: 10px; font-weight: 800; }
.orbit-label { position: absolute; padding: 7px 10px; color: var(--green); background: #0b1815; border: 1px solid var(--green-deep); font: 700 9px ui-monospace, monospace; letter-spacing: 0.12em; }
.orbit-one { top: 70px; right: 10px; }
.orbit-two { bottom: 70px; left: 0; }

.section { padding: 120px 0; border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 0.7fr 1fr; column-gap: 80px; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
h2 { margin-bottom: 18px; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.05em; }
.section-heading > p:last-child, .feature > p, .quick-start > div > p { color: var(--muted); }
.architecture { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-top: 70px; }
.architecture article { min-height: 190px; padding: 28px; background: var(--panel); border: 1px solid var(--line); }
.architecture .step { color: var(--green); font: 700 12px ui-monospace, monospace; }
.architecture h3 { margin: 38px 0 8px; font-size: 20px; }
.architecture p { margin: 0; color: var(--muted); font-size: 14px; }
.connector { padding: 0 16px; color: var(--green); }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); padding: 1px; }
.feature { min-height: 360px; padding: 48px; background: var(--panel); }
.feature-large { grid-row: span 2; min-height: 721px; display: flex; flex-direction: column; }
.feature h2 { max-width: 500px; }
.feature h3 { max-width: 440px; font-size: 32px; line-height: 1.1; letter-spacing: -0.035em; }
.os-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.os-cards span { padding: 24px; color: var(--ink); background: var(--panel-light); border: 1px solid var(--line); }
.os-cards b { display: block; margin-bottom: 26px; color: var(--green); font-size: 30px; }
.os-cards small { color: var(--muted); }
.pulse-line { position: relative; height: 70px; margin-top: 54px; border-bottom: 1px solid var(--line); }
.pulse-line::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 45%; height: 1px; background: var(--green); }
.pulse-line span { position: absolute; left: 43%; bottom: -5px; width: 9px; height: 9px; background: var(--green); box-shadow: 0 0 16px var(--green); }
.lock-mark { position: relative; width: 78px; height: 78px; margin-top: 36px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--green-deep); font-size: 42px; }
.lock-mark i { position: absolute; width: 7px; height: 7px; background: var(--green); }

.quick-start { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
.code-block { overflow: hidden; background: #030a08; border: 1px solid var(--line); }
.code-toolbar { display: flex; justify-content: space-between; padding: 12px 16px; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); font: 12px ui-monospace, monospace; }
.code-toolbar button { padding: 0; color: var(--green); background: none; border: 0; cursor: pointer; }
pre { margin: 0; padding: 30px; overflow-x: auto; color: #8aa29b; font: 13px/2 ui-monospace, SFMono-Regular, Menlo, monospace; }
pre span { color: var(--green); }

.cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }
.cta img { border-radius: 24px; box-shadow: 0 0 50px rgba(88, 240, 180, 0.18); }
.cta h2 { margin: 0; font-size: clamp(34px, 4vw, 54px); }
footer { display: flex; justify-content: space-between; padding: 34px 0 48px; color: var(--muted); font-size: 12px; }

.sidebar-showcase .section-heading { margin-bottom: 60px; }
.sidebar-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  padding: 1px;
}
.sidebar-card {
  min-height: 220px;
  padding: 36px 32px;
  background: var(--panel);
  transition: background 200ms ease;
}
.sidebar-card:hover { background: var(--panel-light); }
.sidebar-icon {
  display: block;
  margin-bottom: 20px;
  font-size: 28px;
  filter: grayscale(0.3);
}
.sidebar-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.sidebar-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.marketplace-showcase .section-heading { margin-bottom: 60px; }
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  padding: 1px;
}
.mp-feature {
  padding: 48px 36px;
  background: var(--panel);
  transition: background 200ms ease;
}
.mp-feature:hover { background: var(--panel-light); }
.mp-icon {
  display: block;
  margin-bottom: 20px;
  font-size: 32px;
  filter: grayscale(0.3);
}
.mp-feature h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.mp-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  nav a:not(.nav-github) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-visual { margin-top: 50px; }
  .section-heading, .quick-start { grid-template-columns: 1fr; gap: 28px; }
  .architecture { grid-template-columns: 1fr; gap: 10px; }
  .connector { transform: rotate(90deg); justify-self: center; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-large { min-height: 600px; }
  .sidebar-features { grid-template-columns: repeat(2, 1fr); }
  .marketplace-grid { grid-template-columns: repeat(2, 1fr); }
  .cta { grid-template-columns: auto 1fr; }
  .cta .button { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-header, .hero, .section, footer { width: min(100% - 28px, 1180px); }
  .brand span { max-width: 160px; font-size: 13px; }
  .hero { min-height: auto; padding-top: 58px; }
  h1 { font-size: 50px; }
  .hero-actions { flex-direction: column; }
  .hero-visual { min-height: 400px; }
  .window-body { grid-template-columns: 52px 1fr; }
  .window-body aside { padding-inline: 6px; }
  .window-body aside img { width: 36px; height: 36px; }
  .terminal-panel { padding: 20px 14px; }
  .section { padding: 80px 0; }
  .feature { padding: 34px 26px; }
  .os-cards { grid-template-columns: 1fr; }
  .sidebar-features { grid-template-columns: 1fr; }
  .sidebar-card { min-height: auto; }
  .marketplace-grid { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}