/* Hero-only overrides; the newer site's pricing and payment styles stay in styles.css. */
.hero {
  background:
    radial-gradient(ellipse at 26.5% 52.5%, #010405 0%, rgba(3, 8, 11, .65) 30%, transparent 58%),
    linear-gradient(145deg, #081117 0%, #060b10 52%, #04090d 100%);
}

.hero-visual[data-reveal] {
  opacity: 1;
  transform: none;
}

#heroParticleCanvas {
  visibility: hidden;
  mix-blend-mode: screen;
}

.astra-poster {
  position: absolute;
  left: 26.5%;
  top: 52.5%;
  width: var(--astra-poster-width, min(49vw, 74vh, 740px));
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle, #000 48%, transparent 72%);
  transition: opacity .3s ease;
}

[data-particle-renderer="official-astra-webgl"] .astra-poster {
  opacity: 0;
}

@media (max-width: 920px) {
  .hero-shell {
    padding-top: calc(92px + clamp(260px, 68vw, 380px));
    padding-bottom: 64px;
  }

  .hero-visual {
    top: 74px;
    bottom: auto;
    height: clamp(260px, 68vw, 380px);
    min-height: 0;
  }

  .hero-visual .particle-stage {
    min-height: 0;
  }

  .astra-poster {
    left: 50%;
    top: 50%;
    width: var(--astra-poster-width, min(78vw, 100%, 480px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .astra-poster { transition: none; }
}