/* ========== CARDS ========== */
.card {
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-lg);
}

.icon i {
  color: var(--accent-color);
}

.service-card h3,
.why-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
}

.why-us .card {
  background-color: var(--light-bg);
}

/* "Learn More →" is normal-size body text on white, so 4.5:1 applies.
   --accent-color was 2.85:1 across all 8 service cards. */
.service-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--accent-color-strong);
  transition: color 0.2s ease, transform 0.2s ease;
}

.service-link:hover {
  color: var(--accent-color-strong-hover);
  transform: translateX(2px);
}