.hero {
  padding: 35px 0 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(
    120% 80% at 50% -10%,
    var(--blue-soft) 0%,
    #fff 60%
  );
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.hero-content > div:nth-of-type(2) {
  margin: -4px 0;
}
.hero h1 {
  font-size: clamp(36px, 5.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hero .gradient {
  background: linear-gradient(100deg, var(--blue), var(--blue-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink-2);
  max-width: 60ch;
}
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero-trust svg {
  color: var(--blue);
}