/* css/services.css */
.services { padding-block: var(--space-32); border-top: 1px solid var(--color-border); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--color-border);
  margin-top: var(--space-12);
}
.services__item {
  background-color: var(--color-bg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: background-color var(--transition-base);
}
.services__item--recommended { background-color: var(--color-surface); }
@media (hover: hover) { .services__item:hover { background-color: var(--color-surface); } }
.services__number { font-family: var(--font-display); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.15em; }
.services__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: var(--color-text); line-height: 1.1; }
.services__item--recommended .services__name { color: var(--color-accent); }
.services__includes { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.services__feature { font-size: var(--text-sm); color: var(--color-text-muted); padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); }
.services__price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-top: var(--space-4); }
.services__badge { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-bg); background-color: var(--color-accent); padding: var(--space-1) var(--space-3); width: fit-content; }
.services__cta { text-align: center; margin-top: var(--space-12); color: var(--color-text-muted); font-size: var(--text-sm); }
.services__cta a { color: var(--color-accent); border-bottom: 1px solid var(--color-accent); transition: color var(--transition-fast), border-color var(--transition-fast); }
@media (hover: hover) { .services__cta a:hover { color: var(--color-accent-hover); border-color: var(--color-accent-hover); } }
@media (max-width: 1024px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } }