body.theme-cards {
  --color-primary: #2563eb;
  --color-accent: #f59e0b;
}

.hero-card-grid,
.benefit-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-lg);
}

.feature-card {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.feature-card-large {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #fff;
}

.feature-card-large p {
  color: rgba(255, 255, 255, 0.82);
}

.theme-cards .card,
.theme-cards .metric,
.theme-cards .testimonial,
.theme-cards .feature-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.theme-cards .card:hover,
.theme-cards .metric:hover,
.theme-cards .testimonial:hover,
.theme-cards .feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

@media (min-width: 1280px) {
  .hero-card-grid {
    align-items: stretch;
  }
}

@media (max-width: 980px) {
  .hero-card-grid,
  .benefit-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .feature-card {
    padding: var(--space-lg);
  }
}