.hero {
  position: relative;
  padding: 46px 0 38px;
  text-align: center;
  overflow: hidden;
  background-color: #f6fafd;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
  background-size: cover, 26px 26px;
  background-image: radial-gradient(
      120% 160% at 15% -20%,
      rgba(59, 85, 154, 0.05),
      transparent 55%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%2322356b' fill-opacity='0.22'/%3E%3C/svg%3E");
}

.en {
  display: block;
  font-family: var(--font-en);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 14px;
  color: var(--en-accent);
  margin-bottom: 6px;
}

.fa {
  color: var(--heading);
  font-size: 27px;
  margin: 0;
}

.lead {
  margin: 10px auto 0;
  max-width: 560px;
  font-size: 15px;
  color: var(--muted);
  text-align: center;
  text-align-last: center;
}

@media (max-width: 720px) {
  .fa {
    font-size: 22px;
  }
  .hero {
    padding: 34px 0 28px;
  }
}