/* Hero — opening statement over a glowing grid */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
}
/* Two soft glows and a fading grid give the page depth without a single image request */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 78% 40%, var(--glow-teal), transparent 70%),
    radial-gradient(ellipse 45% 40% at 10% 10%, var(--glow-gold), transparent 70%);
}
.hero::after {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, #000 20%, transparent 75%);
}

.hero__title {
  max-width: 18ch;
  margin-top: 1.75rem;
  font-size: clamp(2.75rem, 9vw + 0.5rem, 8.5rem);
  line-height: 0.98;
}
.hero__lede {
  margin-top: 2rem;
  max-width: 50ch;
  font-size: clamp(1.02rem, 0.5vw + 0.92rem, 1.18rem);
}
.hero__lede strong {
  color: var(--ink);
  font-weight: 600;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .hero {
    min-height: calc(100svh - 4.25rem);
    display: flex;
    align-items: center;
  }
}