/* Containers, grids e estrutura macro do layout. */
.container {
  width: var(--container);
  margin: 0 auto;
}

.section {
  padding: 5.5rem 0;
}

.section-surface {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(245, 248, 252, 0.96));
}

.section-dark {
  background:
    radial-gradient(circle at top right, rgba(255, 179, 33, 0.16), transparent 18%),
    radial-gradient(circle at bottom left, rgba(122, 214, 234, 0.1), transparent 16%),
    linear-gradient(135deg, var(--color-primary-900), #102d6a 65%, #103581 100%);
}

.hero-grid,
.contact-grid,
.footer-grid,
.about-grid,
.service-grid,
.solution-grid,
.tech-grid,
.differentials-grid,
.trust-grid,
.hero-metrics {
  display: grid;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  gap: 1rem;
}