/* The orbital opening uses its own palette; content sections retain the paper theme. */
.brand { gap: 0; align-items: baseline; font-weight: 700; }
.brand .brand-symbol { width: .75em; height: .86em; position: relative; top: .27em; margin-right: -.03em; fill: #294ed9; stroke: none; flex-shrink: 0; }
.site-header .brand .brand-symbol { fill: #91b4f8; stroke: none; }
.site-header {
  max-width: none;
  background: #050a13;
  color: #f2f3ef;
}
.site-header .brand svg { stroke: #91b4f8; }
.site-header .brand-dot { color: #91b4f8; }
.desktop-nav a { color: #b1bdcd; }
.desktop-nav a:hover { color: #fff; }
.site-header .button.dark {
  color: #edf2fb;
  background: #122033;
  border-color: #2c3b50;
}
.site-header .button.dark:hover { background: #1d304a; }
.menu-toggle span { background: #c2d0e0; }
.mobile-nav {
  background: #08111e;
  color: #dce5f2;
  border-color: #253248;
}
.hero {
  background: #050a13;
  color: #f6f4ec;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 740px;
  background: url('assets/orbital-horizon-v1.png') center bottom / cover no-repeat;
  z-index: -2;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #050a131a 0, #050a1300 360px, #050a1333 560px, #050a13 840px);
  z-index: -1;
  pointer-events: none;
}
.hero .pill {
  color: #b6c4d7;
  border-color: #819bc345;
  background: #111c2e70;
  backdrop-filter: blur(6px);
  max-width: calc(100% - 40px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.5;
}
.hero .status-dot { background: #b6c6a2; }
.hero h1 { text-shadow: 0 3px 24px #0005; }
.hero h1 em { color: #9ab8f5; }
.hero-description { color: #b4bfce; }
.hero .button.blue { background: #4967e2; border-color: #7089ee; }
.hero .button.blue:hover { background: #5d7aed; }
.hero .button.outline {
  background: #10203880;
  color: #e0e8f5;
  border-color: #8da6cd52;
  backdrop-filter: blur(6px);
}
.hero .button.outline:hover { background: #1c3152; }
.hero .play-icon { color: #bdcdec; }
.hero-note { color: #8d9cb2; }
.hero-visual { max-width: 1200px; margin: 96px auto 64px; padding: 0 36px; }
.hero-visual a {
  background: #f8f7f2;
  border: 1px solid #b3c7ed40;
  border-radius: 10px;
  box-shadow: 0 30px 90px #0006;
}
.hero-visual img { border-radius: 9px; }
.hero-visual figcaption { color: #a4b3c8; }
.promise-strip {
  max-width: none;
  margin: 0;
  padding: 27px max(36px, calc((100vw - 1128px) / 2));
  border-top: 1px solid #243043;
  border-bottom: 0;
  background: #050a13;
  color: #92a1b7;
}
.promise-strip > div { color: #b1bfd0; }
@media (min-width: 1500px) {
  .hero::before { height: 920px; }
  .hero::after { background: linear-gradient(180deg, #050a1300 0, #050a1300 450px, #050a1340 700px, #050a13 950px); }
}
@media (max-width: 760px) {
  .hero .pill { font-size: 10px; }
  .hero::before { height: 790px; background-position: 56% bottom; }
  .hero::after { background: linear-gradient(180deg, #050a1300 0, #050a1300 440px, #050a134d 640px, #050a13 830px); }
  .hero-visual { padding: 0 14px; margin: 92px auto 35px; }
  .hero-visual a { border-radius: 6px; }
  .hero-visual img { border-radius: 5px; }
  .promise-strip { padding: 23px 20px; }
}

/* Keep the section links centered between the brand and access button. */
@media (min-width: 761px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
  .site-header > .brand { justify-self: start; }
  .desktop-nav { margin-left: 0; align-items: center; justify-content: center; }
  .desktop-nav a { display: inline-flex; align-items: center; min-height: 41px; white-space: nowrap; }
  .site-header > .button { justify-self: end; }
}

/* Keep the Earth horizon visible, then fade into the light content. */
.hero { padding-bottom: 320px; }
.hero::before { inset: 0; height: auto; background-position: center bottom; }
.hero::after {
  background: linear-gradient(180deg, #050a131a 0%, transparent 55%, #f8f7f200 68%, #f8f7f24d 80%, #f8f7f2 100%);
}
@media (max-width: 760px) {
  .hero { padding-bottom: 260px; }
  .hero::before { height: auto; background-position: 56% bottom; }
  .hero::after { background: linear-gradient(180deg, #050a131a 0%, transparent 58%, #f8f7f200 70%, #f8f7f266 84%, #f8f7f2 100%); }
}

/* Keep the short reassurance directly against the sky. */
.hero { padding-bottom: 350px; }
.hero-note {
  display: block;
  position: relative;
  z-index: 1;
  max-width: calc(100% - 40px);
  margin: 18px auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c4d1e4;
  font-size: 12px;
  line-height: 1.6;
}
@media (max-width: 760px) {
  .hero { padding-bottom: 280px; }
  .hero-note { max-width: min(330px, calc(100% - 40px)); font-size: 11px; margin-top: 16px; }
}

/* Keep the compact navigation header visible throughout the page. */
html { scroll-padding-top: calc(var(--site-header-height, 70px) + 16px); }
.sticky-site-header { position: sticky; top: 0; z-index: 50; background: #050a13; box-shadow: 0 6px 20px #02061135; }
.sticky-site-header .site-header { height: 70px; border-bottom: 1px solid #1c2939; }
.sticky-site-header .site-header .brand { font-size: 32px; }
.sticky-site-header .site-header > .button { min-height: 38px; }
.sticky-site-header .desktop-nav a { min-height: 38px; }
.sticky-site-header .mobile-nav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--site-header-height, 62px)); overflow-y: auto; }
.skip-link:focus { z-index: 60; }
@media (min-width: 761px) and (max-width: 1000px) {
  .sticky-site-header .site-header { padding-left: 24px; padding-right: 24px; gap: 16px; }
  .sticky-site-header .desktop-nav { gap: 16px; font-size: 12px; }
  .sticky-site-header .site-header .brand { font-size: 29px; }
  .sticky-site-header .site-header > .button { padding-left: 12px; padding-right: 12px; font-size: 11px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: calc(var(--site-header-height, 62px) + 16px); }
  .sticky-site-header .site-header { height: 62px; padding: 0 20px; }
  .sticky-site-header .site-header .brand { font-size: 29px; }
  .sticky-site-header .site-header > .button { min-height: 34px; margin-right: 16px; }
}