/**
 * Card surface component — Experience V2 Visual Polish
 * Shared elevation, border, padding, and hover for section cards.
 */

.service-card,
.benefit-item,
.trust-badge,
.case-card {
  background-color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 90%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.trust-badge {
  background-color: var(--color-background);
}

.service-card:hover,
.benefit-item:hover,
.trust-badge:hover,
.case-card:hover {
  border-color: color-mix(in srgb, var(--brand-accent) 18%, var(--color-border-subtle));
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .benefit-item,
  .trust-badge,
  .case-card {
    transition: none;
  }

  .service-card:hover,
  .benefit-item:hover,
  .trust-badge:hover,
  .case-card:hover {
    transform: none;
  }
}