/* Hero — opening statement with the orbit illustration beside it */

.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 7rem);
}

/* A violet glow behind the orbit, so the night has depth */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10% auto auto;
  width: min(70vw, 820px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(124, 58, 237, 0.42), transparent);
  filter: blur(20px);
}

.hero__grid {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

.hero__title {
  max-width: 11ch;
  text-wrap: balance;
}
.hero__lede {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.25rem);
}
.hero__lede strong {
  color: var(--text);
  font-weight: 600;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}