/* Hero and the reusable technology background system */
.hero{
  position:relative;
  min-height:min(100svh,940px);
  display:grid;
  place-items:center;
  text-align:center;
  padding-block:calc(var(--header-h) + 5rem) 5rem;
  overflow:hidden;
  isolation:isolate;
}

.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--color-bg)}
.hero-bg__image{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;opacity:.4;
}

/* Star field: layered radial gradients, no images and no JavaScript */
.hero-bg::before{
  content:"";
  position:absolute;inset:0;
  opacity:.85;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 28% 62%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1.6px 1.6px at 46% 12%,rgba(197,233,255,.9),transparent 60%),
    radial-gradient(1px 1px at 62% 44%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.3px 1.3px at 78% 22%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 88% 66%,rgba(160,220,255,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 78%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 36% 88%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 82%,rgba(200,236,255,.75),transparent 60%),
    radial-gradient(1px 1px at 94% 38%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.1px 1.1px at 20% 40%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(1.1px 1.1px at 54% 70%,rgba(255,255,255,.45),transparent 60%);
}
.hero.is-animated .hero-bg::before{animation:sails-twinkle 7s ease-in-out infinite alternate}
@keyframes sails-twinkle{from{opacity:.55}to{opacity:.95}}

/* Atmospheric horizon glow */
.hero-glow{
  position:absolute;left:50%;bottom:-58%;translate:-50% 0;
  width:min(1500px,150vw);aspect-ratio:1/1;
  z-index:-1;border-radius:50%;
  filter:blur(6px);
  background:radial-gradient(circle at 50% 42%,
    rgba(25,199,242,.30) 0%,
    rgba(27,92,255,.16) 34%,
    rgba(8,125,181,.05) 52%,
    transparent 66%);
}
.hero-arc{
  position:absolute;left:50%;bottom:-52%;translate:-50% 0;
  width:min(1320px,140vw);aspect-ratio:1/1;
  z-index:-1;border-radius:50%;
  border:1px solid rgba(122,205,255,.18);
}
.hero-arc.arc2{width:min(1600px,168vw);bottom:-64%;border-color:rgba(122,205,255,.1)}

/* Feathers the glow into the next section instead of ending on a hard line. */
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:120px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(2,5,10,0),var(--color-bg));
}

.hero-content{max-width:1080px;margin-inline:auto}
.hero-eyebrow{
  font-size:clamp(1rem,1.6vw,1.32rem);
  font-weight:600;color:#F2F7FC;
  letter-spacing:-.01em;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
}
.hero h1{
  font-size:var(--fs-h1);
  font-weight:700;
  letter-spacing:-.035em;
  margin-bottom:clamp(1.4rem,2.6vw,2rem);
}
.hero-tagline{
  font-size:clamp(.95rem,1.3vw,1.18rem);
  letter-spacing:.05em;
  color:#DDE7F1;
  margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.hero-actions{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}

.hero-scroll{
  margin-top:clamp(3rem,6vw,5rem);
  display:inline-flex;flex-direction:column;align-items:center;gap:.5rem;
  font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;
  color:var(--color-text-secondary);
}
.hero-scroll i{
  display:block;width:1px;height:44px;
  background:linear-gradient(180deg,var(--color-primary),transparent);
}
.hero.is-animated .hero-scroll i{animation:sails-drop 2.4s var(--ease) infinite}
@keyframes sails-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}
}

/* Compact hero for inner pages */
.page-hero{
  position:relative;
  padding-block:calc(var(--header-h) + clamp(3.5rem,7vw,6rem)) clamp(3rem,6vw,5rem);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--color-border);
}
.page-hero__glow{
  position:absolute;left:50%;top:-40%;translate:-50% 0;
  width:min(1100px,130vw);aspect-ratio:1/1;
  z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 62%,rgba(25,199,242,.22),rgba(27,92,255,.08) 42%,transparent 62%);
  filter:blur(10px);
}
.page-hero__inner{max-width:920px}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.8rem)}
.page-hero__subtitle{
  color:var(--color-text-secondary);
  font-size:clamp(1rem,1.3vw,1.18rem);
  max-width:64ch;
  margin:var(--space-md) auto 0;
}
.page-hero__actions{
  display:flex;gap:var(--space-sm);
  justify-content:center;flex-wrap:wrap;
  margin-top:var(--space-lg);
}
.article-meta{
  color:var(--color-text-secondary);
  font-size:.9rem;
  display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;
  margin-top:var(--space-md);
}