/* ============================================================
   ORBIT LABS — layout: nav, hero, sections, footer
   ============================================================ */

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem clamp(1rem,4vw,3rem);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,7,15,.78);backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav-logo{display:flex;align-items:center;gap:.7rem;font-family:var(--sans);font-weight:700;letter-spacing:.05em;font-size:1rem;text-transform:uppercase}
.nav-logo .orbit-mark{width:34px;height:34px;position:relative;flex:none;transition:transform .6s var(--ease)}
.nav-logo:hover .orbit-mark{transform:rotate(90deg)}
.nav-wordmark{font-weight:700}
.nav-links{display:flex;gap:2rem;font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.nav-links a{color:var(--ink-dim);position:relative;padding:.3rem 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--signal);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:99px;color:var(--signal);
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.nav-cta:hover{border-color:var(--signal);background:var(--signal-soft);box-shadow:0 0 24px rgba(34,211,238,.25)}
@media (max-width:820px){.nav-links{display:none}}

/* ---- hero ---- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:7rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2rem}}
.hero-copy > *{margin-bottom:1.3rem}

/* ---- mission-patch badge (mini art, top-left of hero copy) ---- */
.patch-badge{
  width:clamp(96px,11vw,128px);
  margin-bottom:1.6rem;
  position:relative;
  filter:drop-shadow(0 0 18px rgba(34,211,238,.22));
  animation:patch-float 7s ease-in-out infinite;
}
.patch-badge svg{width:100%;height:auto;display:block}
@keyframes patch-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-7px) rotate(1.2deg)}}
/* spacecraft rides the halo orbit — pure CSS rotate, transform-box so the
   origin lands on the planet centre inside the SVG viewBox */
.patch-badge .pb-craft{
  animation:pb-orbit 6s linear infinite;
  transform-box:view-box;
  transform-origin:60px 60px;
}
@keyframes pb-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.pb-text{opacity:.85}
@media (max-width:900px){.patch-badge{width:88px}}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow .blip{width:7px;height:7px;border-radius:50%;background:var(--signal);animation:blip 2.4s infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--signal-soft)}50%{opacity:.5;box-shadow:0 0 0 7px transparent}}
.hero-display{max-width:14ch}
.hero-display .accent{color:var(--signal);position:relative;display:inline-block}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:99px;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--signal);color:var(--void);font-weight:700;box-shadow:0 0 32px rgba(34,211,238,.3)}
.btn-primary:hover{box-shadow:0 0 52px rgba(34,211,238,.55);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(125,211,252,.4);color:var(--ink)}
.btn-ghost:hover{border-color:var(--signal);color:var(--ink);transform:translateY(-2px);background:var(--signal-soft)}
.hero-telemetry{display:flex;gap:2.5rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line-soft)}
.tele-item{min-width:0}
.tele-num{font-family:var(--mono);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.tele-num .unit{font-size:.55em;color:var(--signal);margin-left:.2em}
.tele-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-top:.5rem}

/* orbital visual — brighter rings, stronger planet, orbiting dots read clearly */
.hero-visual{position:relative;aspect-ratio:1;max-width:520px;margin-inline:auto;width:100%}
.orbit-stage{position:absolute;inset:0}
.orbit-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1.5px solid;border-radius:50%}
.orbit-ring.r1{width:42%;height:42%;border-color:rgba(34,211,238,.55)}
.orbit-ring.r2{width:68%;height:68%;border-color:rgba(34,211,238,.3)}
.orbit-ring.r3{width:94%;height:94%;border-style:dashed;border-color:rgba(125,211,252,.2)}
.sat{position:absolute;top:50%;left:50%;width:0;height:0}
.sat .dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--signal);box-shadow:0 0 18px var(--signal),0 0 4px #fff}
.sat.s1{animation:orbit 9s linear infinite}
.sat.s2{animation:orbit 16s linear infinite reverse}
.sat.s2 .dot{background:var(--burn);box-shadow:0 0 18px var(--burn),0 0 4px #fff}
.sat.s3{animation:orbit 26s linear infinite}
.sat.s3 .dot{width:7px;height:7px;margin:-3.5px;background:var(--ink-dim);box-shadow:0 0 12px var(--ink-dim)}
/* radius scales with the stage via % of its own width */
.sat.s1{--rad:105px}.sat.s2{--rad:170px}.sat.s3{--rad:235px}
@keyframes orbit{from{transform:rotate(0deg) translateX(var(--rad))}to{transform:rotate(360deg) translateX(var(--rad))}}
@media (max-width:520px){.sat.s1{--rad:70px}.sat.s2{--rad:118px}.sat.s3{--rad:164px}}
.planet-core{
  position:absolute;top:50%;left:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#1de9ff66, transparent 46%),
             radial-gradient(circle at 50% 50%,#0d1f3a 0%,#04070f 80%);
  border:1.5px solid rgba(125,211,252,.5);
  box-shadow:0 0 90px rgba(34,211,238,.3), inset 0 0 50px rgba(34,211,238,.18);
}
.planet-core::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px dashed rgba(125,211,252,.4);opacity:.8}
.hero-glow{position:absolute;top:50%;left:50%;width:80%;height:80%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.14),transparent 62%);pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-faint);font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-hint .line-v{width:1px;height:38px;background:linear-gradient(var(--signal),transparent);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}