/* Landing page hero background — matches otpgrove/landing.html .home-hero-mesh */
:root {
  --public-hero-gradient: linear-gradient(165deg, #151038 0%, #1e1b4b 42%, #2d1b69 100%);
  --gradient-hero: var(--public-hero-gradient);
}

.public-hero-mesh,
.home-hero-mesh,
.pricing-hero,
.about-hero,
.faq-hero,
.contact-hero-bg,
.docs-hero,
.countries-hero,
.policy-hero,
.services-hero,
.blog-featured-hero-bg,
.error-hero {
  background: var(--public-hero-gradient) !important;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.public-hero-mesh::before,
.home-hero-mesh::before,
.pricing-hero::before,
.about-hero::before,
.faq-hero::before,
.contact-hero-bg::before,
.docs-hero::before,
.countries-hero::before,
.policy-hero::before,
.services-hero::before,
.blog-featured-hero-bg::before,
.error-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(108, 63, 212, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 30%, rgba(79, 70, 229, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(167, 139, 250, 0.2) 0%, transparent 45%);
}

.public-hero-mesh > *,
.home-hero-mesh > *:not(.pointer-events-none),
.pricing-hero > *,
.about-hero > *,
.faq-hero > *,
.contact-hero-bg > *,
.docs-hero > *,
.countries-hero > *,
.policy-hero > *,
.services-hero > *,
.blog-featured-hero-bg > *,
.error-hero > * {
  position: relative;
  z-index: 1;
}

.public-hero-dots,
.home-hero-dots {
  background-image: radial-gradient(rgba(148, 163, 184, 0.35) 1px, transparent 1px);
  background-size: 24px 24px;
}