/* Zaftrus UI layer: Orbitron, rounded buttons, glass header, interactivity */
:root{--f-mono:"Orbitron","Eurostile","Bank Gothic",ui-sans-serif,system-ui,sans-serif;--f-orb:var(--f-mono);--pill:999px}

/* ---- Orbitron everywhere the technical/mono face was used ---- */
.mono,.label,.eyebrow,.tag,.btn,.link-arrow,.dim,.dim-tag,.title-block,.scene-hint,.note,.callout span,
.graph-tag,.layer-tag,.orbit-tag span,.orbit-core,.skip-link,.hero__word,.hero__strip .x,.seg button,
.legend dd,.matrix__val,.matrix__nil,.econ__plus,.calc input[type=number],.zf-table th,.zf-steps li:before,
.zf-person .zf-mono,.hdr__nav a,.hdr__word,.mnav .mono,.zf-big,.metric__unit,.zf-timeline b,.zf-flow b,
.zf-cells .label,[class*="__idx"],.idx,.eg__idx{font-family:var(--f-orb)!important}
.mono,.label,.eyebrow,.tag,.btn,.link-arrow,.dim,.title-block,.scene-hint,.graph-tag,.layer-tag,.seg button,.hdr__nav a,.zf-table th{letter-spacing:.07em!important}
.note{letter-spacing:.02em!important;font-size:11px}
.hero__word{letter-spacing:.42em!important}
.hdr__word{letter-spacing:.2em!important;font-weight:700!important;font-stretch:100%!important;font-size:15px}
.hdr__nav a{font-size:11px!important;font-weight:500!important}
.btn{font-weight:600}

/* ---- Top bar: 70% transparent ---- */
.hdr,.hdr.is-scrolled{
  background:rgba(8,12,17,.3)!important;
  -webkit-backdrop-filter:saturate(1.3) blur(12px)!important;backdrop-filter:saturate(1.3) blur(12px)!important;
  border-bottom:1px solid rgba(234,240,246,.08)!important}
.hdr__logo{object-fit:contain;filter:drop-shadow(0 0 10px #ff5a1f40);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.hdr__brand:hover .hdr__logo{transform:rotate(-8deg) scale(1.08)}

/* ---- Round-edged buttons ---- */
.btn,.hdr__cta,.link-arrow.btn,button.btn,input[type=submit],.btn--ghost,.btn--light,.btn--night-ghost{border-radius:var(--pill)!important;overflow:hidden;position:relative;isolation:isolate}
.btn{padding-inline:26px 24px}
.hdr__cta{padding-inline:22px 20px}
.hdr__toggle{border-radius:50%!important}
.seg{border-radius:var(--pill)!important;overflow:hidden}
.seg button{border-radius:var(--pill)!important}
.tag{border-radius:var(--pill)!important}
button:not(.hdr__toggle),[role=button],input[type=submit]{border-radius:var(--pill)}
.calc input[type=number],.calc select,form input,form textarea,form select{border-radius:14px!important}
.btn .rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.35);transform:scale(0);animation:zf-rip .65s ease-out forwards;z-index:-1}
@keyframes zf-rip{to{transform:scale(1);opacity:0}}

/* ---- Interactivity ---- */
#zf-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:300;pointer-events:none}
#zf-glow{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(42,169,230,.14),rgba(63,217,201,.05) 45%,transparent 70%);opacity:0;transition:opacity .4s;will-change:transform}
#zf-glow.on{opacity:1}
main,.hero,.section{position:relative;z-index:1}
/* spotlight cards */
.zf-spot{position:relative;translate:0 0;transition:translate .35s var(--ease,cubic-bezier(.2,.7,.1,1)),border-color .3s,box-shadow .35s}
.zf-spot:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(42,169,230,.16),transparent 70%)}
.zf-spot:hover{translate:0 -5px;box-shadow:0 18px 40px -22px rgba(42,169,230,.55);border-color:var(--accent)}
.zf-spot:hover:before{opacity:1}
.zf-spot>*{position:relative;z-index:1}
.area,.zf-cells>*,.zf-three>div,.nm>div,.zf-person{border-radius:18px}
.hdr__nav a{transition:color .2s,text-shadow .25s}
.hdr__nav a:hover{text-shadow:0 0 14px rgba(42,169,230,.8)}
a.link-arrow:hover{gap:14px}
@media(max-width:860px){#zf-glow{display:none}}
@media(prefers-reduced-motion:reduce){.zf-spot,.zf-spot:hover{translate:none;transition:none}#zf-glow{display:none}}


/* Homepage hero: keep the full Earth footage visible; use only a broad, soft text-legibility wash */
.hero__stage{isolation:isolate;overflow:hidden;pointer-events:none}
.hero__video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 54%;opacity:1}
.hero__video-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* A diffuse vignette behind the copy, not a hard left-to-right curtain. */
  background:radial-gradient(ellipse 76% 112% at 7% 48%,
    rgba(7,12,17,.52) 0%,
    rgba(7,12,17,.38) 28%,
    rgba(7,12,17,.20) 49%,
    rgba(7,12,17,.07) 68%,
    rgba(7,12,17,0) 100%)}
.hero__in{z-index:2}
@media(max-width:900px){
  .hero__stage{height:clamp(280px,56vh,500px);margin-top:-10px!important;overflow:hidden}
  .hero__video-shade{background:radial-gradient(ellipse 105% 88% at 18% 48%,
    rgba(7,12,17,.48) 0%,
    rgba(7,12,17,.30) 38%,
    rgba(7,12,17,.12) 68%,
    rgba(7,12,17,0) 100%)}
}
@media(prefers-reduced-motion:reduce){.hero__video{opacity:1}}

/* Final hero correction: make the Earth footage a true full-bleed layer.
   The previous right-column stage created a hard visual edge regardless of
   how soft the text gradient was. */
.hero{isolation:isolate;position:relative;overflow:hidden}
.hero__stage{
  position:absolute!important;
  inset:0!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:100%!important;height:100%!important;
  max-width:none!important;margin:0!important;
  z-index:0!important;overflow:hidden!important;
  pointer-events:none!important;
}
.hero__video{
  position:absolute!important;inset:0!important;
  display:block!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center center!important;
  opacity:1!important;
}
/* Only a very low-opacity, broad wash behind the copy; no curtain or edge. */
.hero__video-shade{
  position:absolute!important;inset:0!important;z-index:1!important;
  pointer-events:none!important;
  background:radial-gradient(ellipse 132% 155% at 1% 48%,
    rgba(5,9,14,.15) 0%,
    rgba(5,9,14,.115) 27%,
    rgba(5,9,14,.075) 49%,
    rgba(5,9,14,.035) 70%,
    rgba(5,9,14,.01) 88%,
    rgba(5,9,14,0) 100%)!important;
}
.hero__grid{opacity:.14!important;z-index:1!important;pointer-events:none}
.hero__in{position:relative!important;z-index:2!important;background:transparent!important}
.hero__title,.hero__word,.hero__top,.hero__foot,.hero__strip{
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.hero__foot .lede{ text-shadow:0 1px 12px rgba(0,0,0,.42) }
@media(max-width:900px){
  .hero__stage{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
    margin:0!important;right:0!important;bottom:0!important;
  }
  .hero__video{object-position:center center!important}
  .hero__video-shade{
    background:radial-gradient(ellipse 132% 125% at 8% 44%,
      rgba(5,9,14,.16) 0%,rgba(5,9,14,.105) 39%,
      rgba(5,9,14,.045) 70%,rgba(5,9,14,0) 100%)!important;
  }
}
@media(prefers-reduced-motion:reduce){.hero__video{opacity:1!important}}