/* =============================================================================
   AdStar landing — hero.css
   ========================================================================== */

.hero {
  padding: 0;
  min-height: 640px;
  height: 100svh;
  max-height: 820px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed background: user-provided video, with graceful fallback layers */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(195, 226, 3, 0.10), transparent 60%),
    #050505;
}
.hero__bg video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Subtle vignette so the text reads on any video */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.4), transparent 30%, transparent 70%, rgba(0,0,0,0.6));
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-inline: var(--gutter);
}
.hero__title {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--gray-25);
  white-space: nowrap;
}
.hero__subtitle {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--gray-400);
}
.hero__text { display: flex; flex-direction: column; gap: 2px; }

.hero .btn--primary { height: 48px; padding-inline: 20px; }
.hero__cta-icon { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .hero { min-height: 520px; max-height: 680px; }
}
@media (max-width: 767px) {
  .hero { min-height: 420px; height: 70svh; max-height: 560px; }
  .hero__title { white-space: normal; font-size: 34px; line-height: 42px; }
  .hero__content { gap: 32px; }
}