:root {
  --hc-bg: #080d15;
  --hc-bg-soft: #0d1420;
  --hc-surface: #111a28;
  --hc-surface-2: #162131;
  --hc-fg: #f5f7fa;
  --hc-muted: #91a0b5;
  --hc-dim: #5f6f84;
  --hc-line: rgba(151, 172, 199, 0.16);
  --hc-primary: #e87722;
  --hc-primary-bright: #ff9a4b;
  --hc-blue: #58b9ee;
  --hc-green: #63d5a2;
  --font: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --shell: min(1180px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--hc-fg);
  background: var(--hc-bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 12% -10%, rgba(232, 119, 34, .18), transparent 61%),
    radial-gradient(ellipse 55% 45% at 90% 13%, rgba(60, 142, 198, .18), transparent 62%),
    linear-gradient(180deg, #0a1019 0%, #080d15 62%, #090f18 100%);
}
.grid-plane {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  height: 950px;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(126, 149, 178, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 149, 178, .075) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.7) 60%, transparent 100%);
}
.grid-plane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 30%, rgba(232,119,34,.09) 45%, transparent 58%);
  animation: gridSweep 9s ease-in-out infinite;
}

.top {
  position: relative;
  z-index: 10;
  width: var(--shell);
  min-height: 78px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--hc-fg);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.025em;
  text-decoration: none;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232,119,34,.4);
  border-radius: 8px;
  color: var(--hc-primary-bright);
  background: rgba(232,119,34,.08);
  box-shadow: inset 0 0 18px rgba(232,119,34,.08);
}
.brand-mark svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  color: #adbacb;
  font-size: .89rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease;
}
.nav a:hover { color: #fff; }
.nav-cta {
  padding: .55rem .85rem;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}
.nav-cta:hover { border-color: rgba(232,119,34,.55); }

.hero {
  min-height: calc(100vh - 78px);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  align-items: center;
  gap: 2rem;
  padding-block: 72px 88px;
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.15rem;
  color: #aebcd0;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow span {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--hc-primary), transparent);
}
.brand-hero {
  margin: 0;
  max-width: 720px;
  color: #f7f9fc;
  font-size: clamp(3.5rem, 6.4vw, 6.6rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .95;
}
.brand-hero em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(100deg, #f7f9fc 4%, #a9c9dc 46%, #f0924c 96%);
  background-clip: text;
  -webkit-background-clip: text;
}
.lede {
  max-width: 580px;
  margin: 1.7rem 0 0;
  color: var(--hc-muted);
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  line-height: 1.65;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 2rem; }
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .68rem 1.05rem;
  border-radius: 7px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  color: #160d07;
  background: linear-gradient(135deg, var(--hc-primary-bright), var(--hc-primary));
  box-shadow: 0 10px 30px rgba(232,119,34,.18);
}
.btn.primary:hover { box-shadow: 0 12px 40px rgba(232,119,34,.3); }
.btn.ghost { color: #e9eef5; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.035); }
.btn.ghost:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.055); }
.text-link {
  padding: .65rem .35rem;
  color: #bdc8d7;
  font-size: .88rem;
  text-decoration: none;
}
.text-link:hover { color: #fff; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; color: #75869b; font-family: var(--mono); font-size: .7rem; }
.hero-proof span { display: flex; align-items: center; gap: .45rem; }
.hero-proof i { width: 5px; height: 5px; border-radius: 50%; background: var(--hc-green); box-shadow: 0 0 9px rgba(99,213,162,.7); }

.architecture { position: relative; min-height: 610px; display: grid; place-items: center; }
.architecture-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70,146,194,.14), rgba(232,119,34,.06) 45%, transparent 70%);
  filter: blur(12px);
}
.architecture-svg { width: min(100%, 700px); overflow: visible; filter: drop-shadow(0 30px 80px rgba(0,0,0,.25)); }
.orbit-lines ellipse { fill: none; stroke: rgba(130,158,192,.12); stroke-width: 1; stroke-dasharray: 4 9; }
.orbit-lines ellipse:first-child { animation: orbitDash 45s linear infinite; }
.orbit-lines ellipse:last-child { animation: orbitDash 32s linear infinite reverse; }
.connectors path { fill: none; stroke: url(#lineFade); stroke-width: 1.6; }
.data-pulses circle { fill: var(--hc-primary-bright); filter: url(#softGlow); }
.service-node > circle { fill: rgba(13,21,33,.88); stroke: rgba(140,166,197,.26); stroke-width: 1.2; }
.service-node:hover > circle { stroke: rgba(232,119,34,.7); }
.service-node text { fill: #9bacc0; font-family: var(--mono); font-size: 12px; text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.node-icon { fill: none; stroke: #9bb9ce; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: iconFloat 5s ease-in-out infinite; }
.node-functions .node-icon, .node-mail .node-icon { animation-delay: -1.2s; }
.node-database .node-icon { animation-delay: -2.6s; }
.node-apps .node-icon { animation-delay: -3.4s; }
.core-halo { fill: rgba(232,119,34,.035); stroke: rgba(232,119,34,.12); stroke-width: 1; animation: corePulse 3.6s ease-in-out infinite; }
.core-body { fill: url(#coreFill); filter: drop-shadow(0 0 30px rgba(232,119,34,.28)); }
.core-cloud, .core-plus { fill: none; stroke: #1b1009; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.core-node text { fill: #2a1609; font-family: var(--mono); font-size: 8.5px; font-weight: 600; text-anchor: middle; letter-spacing: .08em; }
.arch-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  min-width: 245px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem .95rem;
  border: 1px solid rgba(140,166,197,.16);
  border-radius: 9px;
  background: rgba(9,15,24,.76);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}
.arch-caption strong, .arch-caption small { display: block; }
.arch-caption strong { font-size: .78rem; }
.arch-caption small { margin-top: .2rem; color: var(--hc-dim); font-size: .68rem; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-green); box-shadow: 0 0 12px rgba(99,213,162,.8); }

.platform-strip { border-block: 1px solid var(--hc-line); background: rgba(10,16,25,.72); }
.strip-inner {
  min-height: 82px;
  display: grid;
  grid-template-columns: 1.5fr repeat(5, auto auto);
  align-items: center;
  gap: .75rem 1rem;
  color: #66778c;
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.strip-inner strong { color: #d3dce8; font-size: .76rem; }

.story { padding-block: 160px 80px; }
.section-heading { max-width: 760px; margin-bottom: 100px; }
.section-heading h2, .final-inner h2 {
  margin: 0;
  color: #f5f7fa;
  font-size: clamp(2.5rem, 5.5vw, 4.9rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
}
.section-heading > p:last-child { max-width: 680px; margin: 1.5rem 0 0; color: var(--hc-muted); font-size: 1.05rem; line-height: 1.7; }
.product-chapter {
  min-height: 590px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  align-items: center;
  gap: clamp(3rem, 7vw, 7rem);
  padding-block: 90px;
  border-top: 1px solid var(--hc-line);
}
.product-chapter.reverse { grid-template-columns: 1.18fr .82fr; }
.product-chapter.reverse .chapter-copy { order: 2; }
.chapter-number { color: var(--hc-primary-bright); font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; }
.chapter-copy h3 { margin: 1.1rem 0 0; font-size: clamp(2.2rem, 4vw, 3.65rem); font-weight: 580; letter-spacing: -.05em; line-height: 1.04; }
.chapter-copy p { margin: 1.4rem 0; color: var(--hc-muted); font-size: 1rem; line-height: 1.72; }
.chapter-copy > a { display: inline-flex; gap: .65rem; color: #e4ebf3; font-size: .88rem; font-weight: 600; text-decoration: none; }
.chapter-copy > a span { color: var(--hc-primary-bright); transition: transform .18s ease; }
.chapter-copy > a:hover span { transform: translateX(4px); }
.product-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(138,161,190,.17);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(21,32,48,.86), rgba(10,16,25,.9));
  box-shadow: 0 34px 90px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.03);
}
.product-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.025), transparent 40%); }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(128,152,181,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(128,152,181,.07) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(circle at center, black, transparent 78%); }

.bucket-stack { position: absolute; top: 50%; left: 50%; width: 210px; height: 135px; transform: translate(-50%,-44%); }
.bucket-layer { position: absolute; inset: 0; border: 1px solid rgba(232,119,34,.5); border-radius: 50%; background: linear-gradient(180deg, rgba(232,119,34,.16), rgba(16,24,36,.95)); }
.bucket-layer::after { content: ""; position: absolute; inset: 22px 0 0; border: inherit; border-top: 0; border-radius: 0 0 50% 50%; }
.layer-3 { transform: translateY(54px) scale(.82); opacity: .32; }
.layer-2 { transform: translateY(28px) scale(.92); opacity: .58; }
.layer-1 { display: grid; place-items: center; color: var(--hc-primary-bright); font-family: var(--mono); font-weight: 600; }
.object-chip { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .62rem .75rem; color: #aebed1; border: 1px solid rgba(130,156,187,.18); border-radius: 7px; background: rgba(9,15,24,.82); font-family: var(--mono); font-size: .65rem; }
.object-chip i { width: 6px; height: 6px; border-radius: 2px; background: var(--hc-blue); }
.chip-a { left: 7%; top: 17%; }.chip-b { right: 7%; top: 19%; }.chip-c { right: 10%; bottom: 14%; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow-lines path { fill: none; stroke: rgba(88,185,238,.28); stroke-width: 1; stroke-dasharray: 4 6; }

.code-visual { display: grid; place-items: center; padding: 36px; background: radial-gradient(circle at 70% 20%, rgba(88,185,238,.11), transparent 44%), linear-gradient(145deg, #111a29, #0b111b); }
.code-window { width: min(100%, 580px); overflow: hidden; border: 1px solid rgba(140,165,194,.22); border-radius: 11px; background: #080d14; box-shadow: 0 25px 55px rgba(0,0,0,.36); transform: perspective(1000px) rotateY(2deg) rotateX(1deg); }
.window-bar { height: 42px; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #617187; border-bottom: 1px solid rgba(255,255,255,.07); background: #0e1621; font-family: var(--mono); font-size: .63rem; }
.window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #344154; }.window-bar i:first-child { background: #c46139; }.window-bar i:nth-child(2) { background: #b5903f; }.window-bar i:nth-child(3) { background: #4d9a70; }.window-bar span { margin-left: 8px; }
.code-window pre { margin: 0; padding: 28px 26px; color: #b8c5d6; font-family: var(--mono); font-size: clamp(.7rem, 1.1vw, .82rem); line-height: 1.8; white-space: pre-wrap; }
.code-purple { color: #ce9ff8; }.code-blue { color: #74c7ec; }.code-orange { color: #f29d5e; }
.deploy-line { display: flex; align-items: center; gap: .6rem; padding: 12px 16px; color: #8595a9; border-top: 1px solid rgba(255,255,255,.07); background: #0e1621; font-family: var(--mono); font-size: .62rem; }
.deploy-line i { width: 7px; height: 7px; border-radius: 50%; background: var(--hc-green); box-shadow: 0 0 10px rgba(99,213,162,.6); }.deploy-line strong { margin-left: auto; color: #627287; }

.event-visual { min-height: 430px; }
.event-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.event-visual svg path { fill: none; stroke: rgba(88,185,238,.38); stroke-width: 1.5; stroke-dasharray: 7 7; animation: flowDash 2s linear infinite; }
.event-node { position: absolute; z-index: 2; width: 110px; height: 88px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(126,155,187,.25); border-radius: 12px; background: rgba(12,19,30,.92); box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.event-node span { color: #d8e4f1; font-family: var(--mono); font-size: .9rem; font-weight: 600; }.event-node small { margin-top: .45rem; color: #64758a; font-size: .63rem; }
.event-node.source { left: 5%; top: 157px; }.event-node.queue { left: calc(50% - 55px); top: 157px; border-color: rgba(232,119,34,.5); }.event-node.function { right: 5%; top: 157px; }.event-node.db { left: calc(50% - 55px); bottom: 14px; }

.control-visual { display: grid; place-items: center; }
.control-orbit { position: absolute; border: 1px dashed rgba(121,151,184,.19); border-radius: 50%; animation: spin 28s linear infinite; }
.orbit-one { width: 300px; height: 300px; }.orbit-two { width: 410px; height: 410px; animation-direction: reverse; animation-duration: 40s; }
.shield-core { position: relative; z-index: 2; display: grid; place-items: center; }
.shield-core svg { width: 110px; fill: rgba(232,119,34,.13); stroke: var(--hc-primary-bright); stroke-width: 2; filter: drop-shadow(0 0 28px rgba(232,119,34,.22)); }
.shield-core span { margin-top: .7rem; color: #dce5f0; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; }
.principal { position: absolute; padding: .48rem .62rem; color: #899bb0; border: 1px solid rgba(126,153,184,.2); border-radius: 6px; background: #0b121c; font-family: var(--mono); font-size: .6rem; }
.principal-a { top: 17%; left: 13%; }.principal-b { top: 22%; right: 11%; }.principal-c { bottom: 13%; left: 18%; }

.final-cta { position: relative; overflow: hidden; margin-top: 70px; padding-block: 150px; border-top: 1px solid var(--hc-line); background: radial-gradient(ellipse at 50% 100%, rgba(232,119,34,.13), transparent 58%); }
.final-lines { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(127,151,181,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,151,181,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black, transparent 72%); }
.final-inner { position: relative; z-index: 1; text-align: center; }
.final-inner .eyebrow { justify-content: center; }
.final-inner > p:not(.eyebrow) { color: var(--hc-muted); }
.final-inner .cta { justify-content: center; }

.foot { width: var(--shell); min-height: 92px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; color: #5e6e82; font-family: var(--mono); font-size: .68rem; }
.foot a { color: #75869a; text-decoration: none; }.foot a:hover { color: #dfe7f1; }

/* Download and small utility pages */
body:not(.home-page) .hero {
  width: var(--shell);
  min-height: calc(100vh - 78px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 70px;
}
.download-page main { width: var(--shell); margin-inline: auto; }
.download-hero { min-height: 640px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 5rem; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.download-card { position: relative; min-height: 210px; padding: 25px; overflow: hidden; border: 1px solid var(--hc-line); border-radius: 15px; background: linear-gradient(145deg, rgba(21,32,48,.9), rgba(10,16,25,.92)); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.download-card:hover { transform: translateY(-4px); border-color: rgba(232,119,34,.55); }
.download-card svg { width: 48px; height: 48px; color: #a8bacd; }
.platform-icon { overflow: visible; transition: color .2s ease, filter .2s ease; }
.download-card:hover .platform-icon { color: #dce7f3; filter: drop-shadow(0 0 14px rgba(140,183,216,.18)); }
.apple-icon, .windows-icon { fill: currentColor; stroke: none; }
.linux-icon { stroke-linecap: round; stroke-linejoin: round; }
.linux-icon .icon-body { fill: rgba(168,186,205,.08); stroke: currentColor; stroke-width: 1.6; }
.linux-icon .icon-belly { fill: rgba(168,186,205,.18); stroke: currentColor; stroke-width: 1.25; }
.linux-icon .icon-eye { fill: currentColor; stroke: none; }
.linux-icon .icon-beak, .linux-icon .icon-feet { fill: rgba(232,119,34,.68); stroke: #e9a168; stroke-width: 1; }
.download-card h3 { margin: 1.5rem 0 .35rem; font-size: 1rem; }.download-card p { margin: 0; color: var(--hc-dim); font-size: .75rem; }.download-card span { position: absolute; right: 18px; bottom: 16px; color: var(--hc-primary-bright); }
.install-command { max-width: 760px; margin: 30px 0 100px; padding: 20px; border: 1px solid var(--hc-line); border-radius: 11px; background: #080d14; color: #aebed1; font-family: var(--mono); font-size: .8rem; }
.install-command strong { color: var(--hc-primary-bright); }

@keyframes gridSweep { 0%,100% { transform: translateX(-25%); opacity: .2; } 50% { transform: translateX(25%); opacity: .8; } }
@keyframes orbitDash { to { stroke-dashoffset: -120; } }
@keyframes iconFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes corePulse { 0%,100% { r: 92px; opacity: .7; } 50% { r: 103px; opacity: 1; } }
@keyframes flowDash { to { stroke-dashoffset: -28; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 100px; }
  .architecture { min-height: 560px; }
  .strip-inner { grid-template-columns: repeat(5, 1fr); padding-block: 22px; }
  .strip-inner > span:first-child { grid-column: 1 / -1; }
  .strip-inner strong + span { display: none; }
  .product-chapter, .product-chapter.reverse { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-chapter.reverse .chapter-copy { order: 0; }
  .download-hero { grid-template-columns: 1fr; gap: 3rem; padding-block: 100px; }
}
@media (max-width: 720px) {
  :root { --shell: min(100% - 30px, 1180px); }
  .top { min-height: 68px; }
  .nav { gap: .8rem; }.nav a:first-child { display: none; }
  .brand-hero { font-size: clamp(3rem, 14vw, 4.5rem); }
  .hero { min-height: auto; padding-block: 90px 60px; }
  .architecture { min-height: 430px; margin-inline: -10px; }.arch-caption { bottom: -10px; }
  .story { padding-top: 100px; }.section-heading { margin-bottom: 60px; }
  .product-chapter { min-height: 0; padding-block: 70px; }
  .product-visual { min-height: 360px; }
  .object-chip { transform: scale(.85); }.chip-a { left: 0; }.chip-b { right: 0; }
  .event-node { width: 86px; }.event-node.source { left: 2%; }.event-node.function { right: 2%; }
  .final-cta { padding-block: 100px; }
  .download-grid { grid-template-columns: 1fr; }
}