:root {
  --bg: #07110d;
  --bg-soft: #0a1711;
  --panel: #0d1d16;
  --panel-strong: #10251b;
  --line: rgba(198, 247, 219, .12);
  --line-strong: rgba(198, 247, 219, .22);
  --text: #f4fbf6;
  --muted: #9ab0a1;
  --green: #49f58a;
  --green-dark: #16bb5b;
  --green-pale: #bdffd6;
  --orange: #ffb86b;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  --shell: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 83% 5%, rgba(45, 232, 117, .07), transparent 25rem),
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
code { font-family: var(--mono); }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: .75rem 1rem;
  background: var(--green);
  color: var(--bg);
  border-radius: .4rem;
}
.skip-link:focus { top: 1rem; }
.ambient { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .08; pointer-events: none; }
.ambient-one { width: 30rem; height: 30rem; background: var(--green); top: 20rem; right: -20rem; }
.ambient-two { width: 22rem; height: 22rem; background: #58dfff; top: 70rem; left: -18rem; }

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 13, .72);
  backdrop-filter: blur(16px);
}
.nav { min-height: 76px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.32rem; letter-spacing: -.04em; }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid rgba(73, 245, 138, .45);
  background: rgba(73, 245, 138, .09);
  color: var(--green);
  border-radius: .55rem;
  font: 500 .9rem var(--mono);
  box-shadow: inset 0 0 20px rgba(73, 245, 138, .06);
}
.nav-links { display: flex; align-items: center; gap: 2rem; margin-left: auto; color: var(--muted); font-size: .86rem; font-weight: 600; }
.nav-links a, footer nav a, .text-link { transition: color .2s ease; }
.nav-links a:hover, footer nav a:hover, .text-link:hover { color: var(--green); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 50px;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: .55rem;
  font-size: .9rem;
  font-weight: 700;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button svg { width: 1.1rem; fill: currentColor; }
.button-small { min-height: 40px; padding: .5rem 1rem; font-size: .78rem; }
.button-ghost { border-color: var(--line-strong); background: rgba(255,255,255,.02); }
.button-primary { background: var(--green); color: #041109; box-shadow: 0 10px 38px rgba(73, 245, 138, .16); }
.button-primary:hover { background: #72ffa5; }
.button-secondary { border-color: var(--line-strong); background: rgba(255,255,255,.025); }
.button-secondary:hover, .button-ghost:hover { border-color: rgba(73, 245, 138, .55); background: rgba(73, 245, 138, .06); }
.button-block { width: 100%; }

.hero { min-height: 730px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 5vw; padding-block: 6rem; position: relative; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--green-pale);
  border: 1px solid var(--line);
  background: rgba(73, 245, 138, .045);
  border-radius: 99px;
  padding: .38rem .75rem;
  font: 500 .69rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pulse { width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(73,245,138,.1), 0 0 16px var(--green); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.2rem, 5.25vw, 5.25rem); line-height: .98; letter-spacing: -.07em; margin: 1.55rem 0 1.6rem; font-weight: 700; }
h1 span { color: var(--green); }
.hero-lede { color: #b7c9bd; max-width: 620px; font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.hero-actions { display: flex; gap: .75rem; margin-top: 2rem; }
.proof-row { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; margin-top: 2.4rem; color: #71887a; font: 500 .69rem var(--mono); text-transform: uppercase; letter-spacing: .075em; }
.proof-row span { display: inline-flex; align-items: center; gap: .45rem; }
.proof-row span::before { content: "✓"; color: var(--green); }

.terminal-wrap { position: relative; perspective: 1100px; }
.terminal-glow { position: absolute; inset: 10% -4%; background: rgba(73,245,138,.18); filter: blur(70px); opacity: .35; }
.terminal {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: .85rem;
  background: #08110d;
  box-shadow: 0 30px 90px rgba(0,0,0,.5);
  transform: rotateY(-3deg) rotateX(1deg);
}
.terminal-bar, .terminal-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: .75rem 1rem; color: #71877a; font: .63rem var(--mono); }
.terminal-bar > span:nth-child(2) { text-align: center; }
.window-dots { display: flex; gap: .35rem; }
.window-dots i { display: block; width: .58rem; height: .58rem; border-radius: 50%; background: #ff6b68; }
.window-dots i:nth-child(2) { background: #f5bd4f; }
.window-dots i:nth-child(3) { background: #61c454; }
.terminal-status { justify-self: end; color: var(--green); text-transform: uppercase; letter-spacing: .08em; }
.terminal-body { min-height: 385px; padding: 1.4rem 1.5rem 1.8rem; font: .77rem/1.75 var(--mono); color: #d7e7dc; }
.terminal-body p { margin-bottom: .4rem; }
.prompt, .success, .remote { color: var(--green); }
.muted { color: #6f8376; }
.server-table { margin: .75rem 0 1.6rem; border: 1px solid var(--line); border-radius: .35rem; overflow: hidden; }
.server-table > div { display: grid; grid-template-columns: 1.2fr 1fr .8fr; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.server-table > div:last-child { border-bottom: 0; }
.server-table .table-head { color: #5e7366; font-size: .58rem; letter-spacing: .09em; }
.server-table b { color: #eef8f1; font-weight: 500; }
.online { color: var(--green); }
.command-line { margin-top: 1rem; }
.cursor { display: inline-block; width: .48rem; height: .9rem; vertical-align: -.13rem; background: var(--green); margin-left: .18rem; animation: blink 1s steps(1) infinite; }
.terminal-foot { grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 0; padding-block: .55rem; color: #5f7767; }
.terminal-foot span:last-child { text-align: right; }
@keyframes blink { 50% { opacity: 0; } }

.ticker { border-block: 1px solid var(--line); overflow: hidden; background: #08140f; }
.ticker > div { min-width: max-content; display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 1rem; color: #789082; font: 500 .66rem var(--mono); letter-spacing: .13em; }
.ticker i { color: var(--green); font-style: normal; font-size: .55rem; opacity: .55; }
.section { padding-block: 8rem; }
.section-heading { display: grid; grid-template-columns: 1fr .72fr; column-gap: 3rem; margin-bottom: 3.5rem; align-items: end; }
.section-heading .kicker { grid-column: 1 / -1; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p:last-child { color: var(--muted); margin-bottom: .35rem; }
.section-heading.compact { display: block; text-align: center; }
.kicker { color: var(--green); font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1.1rem; }
h2 { font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.08; letter-spacing: -.055em; font-weight: 600; }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -.035em; }

.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.feature-card {
  position: relative;
  min-height: 460px;
  padding: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: linear-gradient(145deg, rgba(16,37,27,.82), rgba(9,22,16,.82));
}
.feature-card::after { content: ""; position: absolute; width: 17rem; height: 17rem; border-radius: 50%; background: var(--green); filter: blur(100px); opacity: .035; right: -8rem; bottom: -8rem; }
.feature-card > p:not(.feature-label) { max-width: 550px; color: var(--muted); }
.feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(73,245,138,.28); background: rgba(73,245,138,.06); border-radius: .5rem; color: var(--green); font: 500 .8rem var(--mono); margin-bottom: 2.8rem; }
.feature-label { color: var(--green); font: 500 .67rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mini-terminal, .progress-demo {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: rgba(4,13,8,.8);
  border-radius: .45rem;
  font: .75rem var(--mono);
}
.mini-result { float: right; color: var(--green); }
.fleet-visual { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 2.5rem 2rem 3rem; align-items: center; text-align: center; }
.fleet-source { grid-column: 1/-1; justify-self: center; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green); color: var(--bg); font: .68rem var(--mono); }
.fleet-visual i { height: 2rem; border-left: 1px solid rgba(73,245,138,.3); justify-self: center; }
.fleet-visual span:not(.fleet-source) { margin: 0 .25rem; padding: .6rem; border: 1px solid var(--line); border-radius: .4rem; background: #08140e; color: #b4c7ba; font: .68rem var(--mono); }
.progress-demo div { display: flex; justify-content: space-between; }
.progress-demo b { color: var(--green); font-weight: 500; }
.progress-demo > i { display: block; height: .28rem; background: #173024; border-radius: 99px; margin: .7rem 0; overflow: hidden; }
.progress-demo > i b { display: block; height: 100%; width: 100%; background: var(--green); }
.progress-demo small { color: #657c6d; }
.feature-card-wide { grid-column: 1/-1; min-height: 500px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 4rem; }
.feature-card-wide .feature-icon { margin-bottom: 2rem; }
.text-link { display: inline-flex; gap: .55rem; align-items: center; color: var(--green-pale); font-size: .83rem; font-weight: 700; }
.text-link span { color: var(--green); transition: transform .2s ease; }
.text-link:hover span { transform: translateX(.2rem); }
.vault-visual { min-height: 380px; display: grid; place-items: center; position: relative; }
.vault-ring, .vault-core { position: absolute; border-radius: 50%; }
.vault-ring { border: 1px solid rgba(73,245,138,.18); }
.vault-ring-outer { width: 330px; height: 330px; border-style: dashed; animation: spin 40s linear infinite; }
.vault-ring-middle { width: 240px; height: 240px; box-shadow: inset 0 0 70px rgba(73,245,138,.025); }
.vault-core { width: 140px; height: 140px; display: grid; place-items: center; align-content: center; background: radial-gradient(circle, #153c27, #0a1d13); border: 1px solid rgba(73,245,138,.45); box-shadow: 0 0 55px rgba(73,245,138,.1); }
.vault-core svg { width: 3.2rem; fill: var(--green); }
.vault-core span { font: .58rem var(--mono); color: var(--green-pale); letter-spacing: .15em; margin-top: .4rem; }
.orbit-label { position: absolute; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: #90a799; font: .59rem var(--mono); }
.orbit-one { top: 3rem; right: 4rem; }
.orbit-two { left: 2rem; bottom: 6rem; }
.orbit-three { right: 3rem; bottom: 4rem; }
@keyframes spin { to { transform: rotate(360deg); } }

.workflow-section { border-block: 1px solid var(--line); background: rgba(13,29,22,.45); }
.steps { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.steps li { min-height: 230px; padding: 1.8rem; border-right: 1px solid var(--line); position: relative; }
.steps li:last-child { border-right: 0; }
.step-number { color: #43594b; font: .7rem var(--mono); }
.steps div { margin-top: 3.2rem; }
.steps code { color: var(--green); font-size: 1.05rem; }
.steps p { color: var(--muted); font-size: .85rem; margin: .8rem 0 0; max-width: 260px; }

.install-panel { padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid var(--line); border-radius: .9rem; background: linear-gradient(135deg, #0e2118, #09150f); display: grid; grid-template-columns: .82fr 1.18fr; gap: 6vw; align-items: center; }
.install-copy > p:not(.kicker) { color: var(--muted); }
.install-terminal { border: 1px solid var(--line-strong); border-radius: .6rem; overflow: hidden; background: #07100c; box-shadow: 0 25px 65px rgba(0,0,0,.3); }
.install-tabs { display: flex; border-bottom: 1px solid var(--line); }
.install-tabs button { cursor: pointer; border: 0; border-right: 1px solid var(--line); padding: .75rem 1rem; background: transparent; color: #698073; font: .66rem var(--mono); }
.install-tabs button.active { color: var(--green); background: rgba(73,245,138,.06); }
.copy-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; min-height: 100px; padding: 1.2rem; }
.copy-row code { color: #d5e8da; font-size: .71rem; overflow-wrap: anywhere; }
.copy-row code::before { content: "$ "; color: var(--green); }
.copy-button { border: 1px solid var(--line); border-radius: .35rem; background: rgba(255,255,255,.02); color: #89a093; padding: .45rem .65rem; cursor: pointer; font: .62rem var(--mono); }
.copy-button:hover { color: var(--green); border-color: rgba(73,245,138,.35); }
.install-result { display: grid; grid-template-columns: auto 1fr; gap: 0 .55rem; align-items: center; padding: .9rem 1.2rem; border-top: 1px solid var(--line); color: #a9beaf; font: .67rem var(--mono); }
.install-result small { grid-column: 2; color: #536b5b; }

.open-source-section { padding-top: 1rem; }
.open-source-panel { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 7vw; padding: clamp(2.3rem, 6vw, 5rem); border: 1px solid var(--line); border-radius: .9rem; background: radial-gradient(circle at 10% 30%, rgba(73,245,138,.08), transparent 32rem), #0a1811; }
.open-source-panel > div:first-child > p:last-child { color: var(--muted); max-width: 640px; }
.repo-card { border: 1px solid var(--line-strong); background: #07120c; border-radius: .65rem; padding: 1.4rem; }
.repo-head { display: flex; gap: .8rem; align-items: center; }
.repo-head div { display: flex; flex-direction: column; }
.repo-head b { font-size: .82rem; }
.repo-head small { color: #607568; font: .59rem var(--mono); }
.repo-card > p { color: var(--muted); font-size: .78rem; margin: 1.3rem 0; }
.repo-meta { display: flex; gap: 1rem; color: #789081; font: .62rem var(--mono); margin-bottom: 1.2rem; }
.go-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #00add8; }

footer { margin-top: 5rem; border-top: 1px solid var(--line); background: #050d09; }
.footer-grid { min-height: 150px; display: grid; grid-template-columns: .6fr 1fr 1fr; align-items: center; gap: 2rem; }
.footer-grid > p { margin: 0; color: #71877a; font-size: .8rem; }
footer nav { display: flex; justify-content: flex-end; gap: 1.5rem; color: #8ca092; font-size: .74rem; }
.footer-bottom { min-height: 58px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: #465d4e; font: .59rem var(--mono); }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav .button { margin-left: auto; }
  .hero { grid-template-columns: 1fr; gap: 4rem; padding-block: 5rem; }
  .hero-copy { text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-actions, .proof-row { justify-content: center; }
  .terminal { transform: none; max-width: 650px; margin-inline: auto; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading > p:last-child { margin-top: 1.5rem; }
  .feature-card-wide { grid-template-columns: 1fr; }
  .install-panel, .open-source-panel { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; padding-block: 2rem; gap: 1rem; }
  footer nav { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --shell: min(100% - 28px, 1180px); }
  .nav { min-height: 66px; }
  .nav .button { display: none; }
  .hero { min-height: auto; padding-block: 4rem; }
  h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .hero-actions { flex-direction: column; }
  .terminal-body { padding: 1rem; font-size: .64rem; min-height: 350px; }
  .terminal-bar { grid-template-columns: 1fr 1fr; }
  .terminal-bar > span:nth-child(2) { display: none; }
  .server-table > div { grid-template-columns: 1.1fr 1fr .8fr; padding-inline: .45rem; }
  .section { padding-block: 5.5rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card, .feature-card-wide { grid-column: auto; min-height: 470px; padding: 1.4rem; }
  .feature-card-wide { gap: 1rem; }
  .mini-terminal, .progress-demo, .fleet-visual { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
  .vault-visual { min-height: 320px; transform: scale(.82); }
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
  .steps div { margin-top: 2rem; }
  .install-section { width: 100%; }
  .install-panel { border-radius: 0; padding: 3.5rem 1.2rem; }
  .copy-row { grid-template-columns: 1fr; }
  .copy-button { justify-self: start; }
  .open-source-panel { padding: 2.2rem 1.3rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: .25rem; }
  footer nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}