/**
 * CTA section: small call-to-action below services.
 * Full-bleed: gradient extends to viewport edges.
 */
.cta {
  padding: var(--space-2xl) var(--container-padding);
  background: linear-gradient(90deg, #eff6ff 0%, #fff7ed 100%);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.cta__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
}

.cta__title {
  margin: 0 0 var(--space-sm);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-title);
}

.cta__subtitle {
  margin: 0 0 var(--space-lg);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: #fff;
  text-decoration: none;
  background: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-xl);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.cta__btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #fff;
}