.services {
  background: var(--charcoal);
  color: var(--marble);
  position: relative;
}

/* Eyebrow sobre carvão: dourado-claro (igual à do hero). O vermelho-brasa não
   passa AA sobre escuro (~2.5:1); o dourado dá ~9.7:1. */
.services .section-eyebrow { color: var(--gold-bright); }

.services .section-title em { color: var(--red-bright); }

.services .section-lead { color: rgba(245, 242, 238, 0.7); }

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.service-card {
  flex: 1 1 280px;
  max-width: 440px;
  padding: 2.5rem 2rem;
  background: var(--graphite);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}

.service-card:hover {
  background: var(--graphite-light);
  transform: translateY(-6px);
}

.service-card:hover::before { transform: scaleX(1); }

.service-card--feature {
  background: var(--graphite-light);
  border-color: rgba(178, 34, 34, 0.45);
}

.service-card--feature::before { transform: scaleX(1); }

.service-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--marble);
}

.service-card p {
  font-size: 0.95rem;
  color: rgba(245, 242, 238, 0.7);
}