/* =========================================================
   Section: Hero (#hero)
   ========================================================= */
#hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: clamp(64px, 9vw, 110px);
  overflow: hidden;
}

#hero .hero-inner {
  max-width: 880px;
  position: relative;
  z-index: 1;
}

/* Decorative soft glowing orb + faint grid — lightweight, non-interactive */
#hero::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -8%;
  width: min(620px, 70vw);
  height: min(620px, 70vw);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.28), rgba(99,102,241,.14) 45%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

#hero .hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
  max-width: 15ch;
}
#hero .hero-title .text-grad { display: inline; }

#hero .hero-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  max-width: 640px;
  margin: 0 0 2rem;
}

#hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 2.4rem;
}

#hero .hero-trust {
  color: var(--muted);
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  #hero {
    min-height: 88vh;
    padding-top: 112px;
    text-align: left;
  }
  #hero .hero-title { max-width: 100%; }
  #hero .hero-actions { gap: 12px; }
  #hero .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  #hero .hero-trust { font-size: .82rem; }
}
