.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 8vw, 104px) 0 clamp(48px, 7vw, 80px);
  background:
    linear-gradient(90deg, rgba(253, 254, 255, 0.98) 0%, rgba(253, 254, 255, 0.92) 58%, rgba(228, 244, 249, 0.74) 100%),
    var(--color-primary-soft);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 24px max(16px, calc((100vw - var(--container)) / 2)) 24px auto;
  z-index: -1;
  width: min(42vw, 520px);
  min-width: 260px;
  background: url("../../img/logo-divenire-insieme.png") center / contain no-repeat;
  opacity: 0.16;
}

.hero-content {
  max-width: 790px;
}

.hero-text {
  max-width: 760px;
  color: var(--color-muted);
  font-size: clamp(1.04rem, 2vw, 1.28rem);
}

.section-muted {
  background: var(--color-bg);
}

.card-grid,
.feature-list {
  display: grid;
  gap: 18px;
}

.five-cols {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.value-card,
.feature-list article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.value-card {
  min-height: 210px;
  padding: 22px;
  border-top: 5px solid var(--color-primary);
}

.value-card:nth-child(2) {
  border-top-color: var(--color-secondary);
}

.value-card:nth-child(3) {
  border-top-color: var(--color-teal);
}

.value-card:nth-child(4) {
  border-top-color: var(--color-accent);
}

.value-card p,
.feature-list p {
  color: var(--color-muted);
}

.split-section {
  background: var(--color-white);
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.feature-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.feature-list article {
  padding: 26px;
}

.section-action {
  margin-top: 28px;
}

.support-band {
  color: var(--color-white);
  background: var(--color-primary-dark);
}

.support-band .eyebrow,
.support-band h2,
.support-band p {
  color: var(--color-white);
}

.support-band .button-secondary {
  color: var(--color-text);
  background: var(--color-accent);
}

@media (max-width: 1180px) {
  .five-cols,
  .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hero {
    padding: 54px 0 48px;
  }

  .hero::after {
    inset: auto 10px 10px auto;
    width: 260px;
    height: 190px;
    opacity: 0.11;
  }

  .five-cols,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .value-card {
    min-height: auto;
  }
}