.hn-home {
  --hn-void: #060b17;
  --hn-night: #080f25;
  --hn-luminous: #a9baff;
  --hn-header-height: 68px;
  color: #edf1ff;
  background: var(--hn-void);
}
.hn-home :focus-visible { outline-color: #a9baff; }

.hn-scene {
  display: none;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
[data-motion-active] .hn-scene { display: block; }

.hn-hero--immersive {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-block-size: calc(100svh - var(--hn-header-height));
  padding-block: clamp(72px, 12vh, 142px);
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 55%, #25336550, transparent 52%),
    radial-gradient(ellipse at 16% 16%, #662d613c, transparent 42%),
    radial-gradient(ellipse at 85% 79%, #314c9b46, transparent 44%),
    var(--hn-void);
}
.hn-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #a0b8f104 3px 4px);
}
.hn-hero-center { position: relative; display: grid; justify-items: center; gap: 15px; }
.hn-signal-label, .hn-story-tag {
  border: 1px solid #839aff55;
  border-radius: 100px;
  color: #b5c7ff;
  background: #0b1228df;
  padding: 5px 15px;
  font-size: .82rem;
  font-weight: var(--hn-weight-medium);
}
:lang(en) :is(.hn-signal-label, .hn-story-tag) { letter-spacing: .09em; }
.hn-hero--immersive h1, :lang(fa) .hn-hero--immersive h1 {
  max-inline-size: 16ch;
  font-size: clamp(2.8rem, 7.5vw, 7rem);
  line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 2px 36px #020612;
}
:lang(fa) .hn-hero--immersive h1 { line-height: 1.35; }
.hn-hero--immersive h1 span, .hn-story-beat h3 {
  color: #b5c7ff;
  background: var(--hn-brand-gradient);
  text-shadow: none;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hn-hero--immersive .hn-lede { margin: 0; max-inline-size: 46ch; color: #d5def5; text-shadow: 0 2px 12px #020612; }
.hn-hero--immersive .hn-actions { justify-content: center; margin-block-start: 5px; }
.hn-hero--immersive .hn-link--primary {
  box-shadow: 0 8px 32px #6b8fff45;
}
.hn-journey-link {
  position: absolute;
  inset-block-end: 13px;
  min-block-size: 44px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #c5d4ff;
  font-size: .86rem;
  text-decoration: none;
}
.hn-journey-link::after { content: ""; width: 1px; height: 19px; background: #9bb3ff; }

.hn-home .hn-jump { background: #0b1226; border-color: #232e4e; }
.hn-home .hn-jump-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hn-home .hn-jump .hn-link { color: #dce6ff; border-color: #263352; }
.hn-home .hn-jump .hn-link:hover { background: #172442; }

.hn-story { position: relative; background: var(--hn-void); }
.hn-story-stage { position: relative; isolation: isolate; background: radial-gradient(ellipse at 50% 35%, #263a704a, transparent 60%); }
.hn-story-inner { position: relative; display: grid; justify-items: center; gap: 24px; padding-block: 48px; text-align: center; }
.hn-story-label { color: #d1dcfa; font-size: clamp(1.25rem, 2.4vw, 1.85rem); }
.hn-story-beats { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.hn-story-beat { display: grid; justify-items: center; align-content: start; gap: 9px; padding: 15px 9px; }
.hn-story-beat h3 { font-size: clamp(1.25rem, 2vw, 1.8rem); }
.hn-story-beat p:last-child { max-inline-size: 40ch; color: #ccd8f4; }
.hn-story-controls { display: grid; justify-items: center; gap: 6px; }
.hn-story-controls a { color: #c0cfff; }
.hn-story-progress { display: none; inline-size: 135px; block-size: 3px; border-radius: 5px; background: #3b4d79; }
.hn-story-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: #b2c3ff; transform: scaleX(0); transform-origin: left; }
:dir(rtl) .hn-story-progress span { transform-origin: right; }

.hn-story[data-pinned] {
  --hn-stage-size: calc(100svh - var(--hn-header-height));
  min-block-size: calc(var(--hn-stage-size) + 182svh);
}
[data-pinned] .hn-story-stage {
  position: sticky;
  inset-block-start: var(--hn-header-height);
  block-size: var(--hn-stage-size);
  overflow: clip;
}
[data-pinned] .hn-story-inner { height: 100%; padding-block: clamp(13px, 3vh, 30px); align-content: space-between; }
[data-pinned] .hn-story-beats {
  position: absolute;
  inset-inline: 0;
  inset-block-end: clamp(72px, 13vh, 136px);
  display: grid;
  grid-template-columns: 1fr;
}
[data-pinned] .hn-story-beat {
  grid-area: 1 / 1;
  align-content: end;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 280ms ease, transform 280ms ease;
  background: radial-gradient(ellipse at center bottom, #020612ef, transparent 75%);
}
[data-pinned] .hn-story-beat.is-active { opacity: 1; transform: translateY(0); }
[data-pinned] .hn-story-beat h3 { font-size: clamp(1.7rem, 5vw, 4.1rem); }
[data-pinned] .hn-story-progress { display: block; }

.hn-section--ecosystem > .hn-shell, .hn-security, .hn-contact-panel--orbits, .hn-globe { position: relative; isolation: isolate; }
.hn-section--ecosystem .hn-scene { z-index: -1; opacity: .78; }
.hn-trust--globe { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; }
.hn-globe {
  min-block-size: 280px;
  background: radial-gradient(circle, #33478263, transparent 64%);
}
.hn-globe::after {
  content: "";
  position: absolute;
  inset: 16% 26%;
  border-radius: 50%;
  border: 1px solid #849eff35;
  box-shadow: 0 0 30px #516aff22;
}
[data-motion-active] .hn-globe::after { content: none; }
.hn-security {
  overflow: clip;
  background: radial-gradient(ellipse, #121f42 4%, #020612 75%);
  padding-block: clamp(45px, 8vw, 95px);
  text-align: center;
}
.hn-security .hn-scene, .hn-contact-panel--orbits .hn-scene { z-index: -1; }
.hn-security .hn-shell { display: grid; justify-items: center; gap: 19px; }
.hn-security .hn-heading { text-shadow: 0 2px 18px #020612; }
.hn-contact-panel--orbits { overflow: clip; min-block-size: 270px; }

@media (max-width: 980px) {
  .hn-story-beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .hn-home { --hn-header-height: 63px; }
  .hn-home .hn-header-inner { gap: 7px; }
  .hn-home .hn-brand { font-size: 1.1rem; gap: 6px; }
  .hn-home .hn-brand img { width: 29px; }
  .hn-home :is(.hn-lang, .hn-mobile summary) { padding-inline: 8px; }
  .hn-story[data-pinned] { min-block-size: calc(var(--hn-stage-size) + 110svh); }
  .hn-trust--globe { grid-template-columns: 1fr; }
  .hn-globe { min-block-size: 200px; }
  .hn-home .hn-jump .hn-link { font-size: .84rem; }
}
@media (max-width: 350px) {
  .hn-home .hn-header .hn-brand bdi { display: none; }
}
@media (max-height: 480px) {
  .hn-story[data-pinned] { min-block-size: 0; }
  [data-pinned] .hn-story-stage { position: relative; inset-block-start: auto; block-size: auto; }
  [data-pinned] .hn-story-inner { height: auto; padding-block: 25px; }
  [data-pinned] .hn-story-beats { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-pinned] .hn-story-beat { grid-area: auto; opacity: 1; transform: none; }
  [data-pinned] .hn-story-progress, [data-pinned] .hn-scene { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-story-beat { transition: none; }
}