.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 6rem;
  background:
    radial-gradient(120% 90% at 78% 20%, var(--color-bg-soft) 0%, transparent 55%),
    var(--color-bg);
}

.hero__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

.hero__canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
}

.hero__text {
  padding-block: var(--space-xl);
}

.hero__title {
  margin-top: var(--space-sm);
  max-width: 16ch;
}

.hero__lead {
  margin-top: var(--space-md);
  max-width: 42ch;
}

.hero__actions {
  margin-top: var(--space-lg);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    padding-top: 7.5rem;
  }
}