:root {
  --ink: #0b1720;
  --muted: #63717b;
  --line: #d8e0e4;
  --surface: #eef2f3;
  --green: #f36d21;
  --green-hover: #d95712;
  --green-dark: #07131d;
  --mint: #71d8e5;
  --lime: #ffb45f;
  --violet: #16a8bb;
}

body {
  background:
    linear-gradient(90deg, transparent calc(50% - 590px), rgba(7, 19, 29, .035) calc(50% - 590px), rgba(7, 19, 29, .035) calc(50% - 589px), transparent calc(50% - 589px)),
    #fbfcfc;
}

.site-header {
  background: rgba(251, 252, 252, .94);
  border-color: #dce4e7;
  backdrop-filter: blur(14px);
}

.brand { gap: 12px; }
.brand > span:last-child { display: flex; flex-direction: column; }
.brand small {
  margin-top: 2px;
  color: #77858e;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .18em;
}
.brand-mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 3px;
  background: #07131d;
  border-radius: 11px;
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 5px;
  width: 8px;
  height: 3px;
  background: #f36d21;
  border-radius: 3px;
}
.brand-mark img { border-radius: 8px; box-shadow: none; }

.release-status { color: #24353f; background: #f4f7f7; border-color: #d7e0e3; }
.release-status i { background: #16b8a6; box-shadow: 0 0 0 4px rgba(22, 184, 166, .12); }

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 24%, rgba(20, 165, 184, .15), transparent 23%),
    radial-gradient(circle at 18% 94%, rgba(243, 109, 33, .12), transparent 25%),
    #07131d;
}
.hero::before {
  background: linear-gradient(110deg, rgba(255,255,255,.045), transparent 45%), linear-gradient(180deg, transparent 74%, rgba(0,0,0,.25));
}
.hero-grid {
  opacity: .08;
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.3) 60%, transparent 92%);
}
.route-lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.route-lines::before {
  content: "";
  position: absolute;
  width: 820px;
  height: 820px;
  right: -390px;
  top: -420px;
  border: 1px solid rgba(113,216,229,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 90px rgba(113,216,229,.018), 0 0 0 210px rgba(113,216,229,.012);
}
.route-lines i { position: absolute; display: block; border-radius: 50%; }
.route-lines i:nth-child(1) { width: 7px; height: 7px; top: 18%; left: 7%; background: #f36d21; box-shadow: 0 0 0 6px rgba(243,109,33,.12); }
.route-lines i:nth-child(2) { width: 5px; height: 5px; top: 66%; left: 45%; background: #71d8e5; box-shadow: 0 0 0 6px rgba(113,216,229,.1); }
.route-lines i:nth-child(3) { width: 4px; height: 4px; top: 24%; left: 52%; background: #71d8e5; }
.route-lines i:nth-child(4) { width: 5px; height: 5px; bottom: 12%; right: 8%; background: #f36d21; }

.hero-shell { min-height: 720px; padding-top: 88px; padding-bottom: 82px; }
.hero-kicker { color: #78dbe7; }
.hero-kicker span { background: #f36d21; }
.hero h1 { max-width: 720px; font-size: clamp(52px, 5.7vw, 78px); }
.hero h1 em { color: #f5f8f8; font-style: normal; }
.hero-lead { color: #a9b7bf; }
.hero-facts {
  margin: 30px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #a9b7bf;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  font-size: 11px;
}
.hero-facts b { color: #f48645; font: 700 9px/1 "SFMono-Regular", Consolas, monospace; }
.hero-secondary { border-color: rgba(243,109,33,.75); }
.hero-secondary:hover { color: #ffb45f; border-color: #ffb45f; }

.download-card {
  border-radius: 4px 24px 4px 4px;
  border: 1px solid rgba(113, 216, 229, .28);
  box-shadow: 22px 28px 0 rgba(20,165,184,.08), 0 44px 120px rgba(0,0,0,.48);
}
.download-card::before {
  content: "INTERNAL DISTRIBUTION";
  display: block;
  margin: -9px 0 20px;
  color: #99a7ae;
  font: 700 8px/1 "SFMono-Regular", Consolas, monospace;
  letter-spacing: .2em;
}
.verified-badge { color: #087c89; background: #dff5f5; }
.device-icon { color: #f36d21; background: #fff0e7; border-radius: 4px 12px 4px 4px; }
.platform-switcher { background: #e9eef0; border-radius: 4px; }
.platform-switcher button { border-radius: 3px; }
.download-button { border-radius: 3px 11px 3px 3px; box-shadow: 0 10px 24px rgba(243,109,33,.22); }
.download-button:hover { box-shadow: 0 13px 30px rgba(243,109,33,.28); }

.eyebrow { color: #d95712; font-family: "SFMono-Regular", Consolas, monospace; }
.product-window { border-radius: 4px 20px 4px 4px; border-color: #253845; box-shadow: 24px 28px 0 #e6edef, 0 38px 100px rgba(7,19,29,.2); }
.window-bar { background: #0d1b25; border-color: #253845; }
.window-bar time { margin-left: auto; color: #4d6878; font: 8px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; }
.mock-sidebar { background: #0a1720; border-color: #253845; }
.mock-main { background: #07131d; }
.mock-sidebar > span.active { color: #ffccaa; background: #2a211e; border-left: 2px solid #f36d21; }
.mock-heading button { background: #f36d21; border-radius: 3px 8px 3px 3px; }
.mock-project { background: #0c1b25; border-color: #213642; border-radius: 3px 10px 3px 3px; }
.mock-project.feature { border-color: #19798a; box-shadow: 0 10px 30px rgba(20,165,184,.09); }
.mock-avatar { color: #baf1f5; background: #123e48; border-radius: 3px 9px 3px 3px; }
.mock-avatar.violet { color: #ffd3b8; background: #4b2a20; }
.mock-people i, .mock-people em { color: #d2f2f4; background: #17434b; border-color: #0c1b25; }
.mock-project mark { color: #9becf1; background: #143740; }
.mock-activity { background: #0d202a; border-radius: 3px 9px 3px 3px; }
.mock-activity > span { background: #f36d21; box-shadow: 0 0 0 5px rgba(243,109,33,.12); }

.ai-section {
  background: radial-gradient(circle at 8% 110%, rgba(243,109,33,.11), transparent 34%), #eaf0f1;
  border-color: #d4dfe2;
  border-radius: 4px 22px 4px 4px;
}
.ai-badge { color: #087c89; border-color: #c5dcdf; border-radius: 3px 9px 3px 3px; }
.copy-button { background: #07131d; border-radius: 3px 9px 3px 3px; }
.prompt-window { border-color: #1b3643; border-radius: 3px 13px 3px 3px; background: #07131d; }
.prompt-toolbar { background: #0c1c26; border-color: #1b3643; }
.prompt-toolbar span:first-child { background: #f36d21; }
.prompt-window pre { color: #b9cbd3; }

.steps li { background: #edf2f3; border-color: #dbe4e6; border-radius: 3px 14px 3px 3px; }
.steps li > span { color: #d95712; background: #ffe9dd; border-radius: 3px 9px 3px 3px; font-family: "SFMono-Regular", Consolas, monospace; }
.steps code { color: #087c89; background: #daf1f1; border-radius: 3px 7px 3px 3px; }
footer p { color: #849199; font: 9px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .13em; }

@media (max-width: 780px) {
  .hero-shell { min-height: 0; }
  .hero-facts { justify-content: center; }
  .download-card { box-shadow: 10px 14px 0 rgba(20,165,184,.08), 0 30px 80px rgba(0,0,0,.42); }
  .window-bar time { display: none; }
  footer p { margin: 0; }
}