.service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: cardFadeIn 0.35s ease forwards;
}
.service-card:nth-child(1) { animation-delay: 0s; }
.service-card:nth-child(2) { animation-delay: 0.03s; }
.service-card:nth-child(3) { animation-delay: 0.06s; }
.service-card:nth-child(4) { animation-delay: 0.09s; }
.service-card:nth-child(5) { animation-delay: 0.12s; }
.service-card:nth-child(6) { animation-delay: 0.15s; }
.service-card:nth-child(7) { animation-delay: 0.18s; }
.service-card:nth-child(8) { animation-delay: 0.21s; }
.service-card:nth-child(9) { animation-delay: 0.24s; }
.service-card:nth-child(n+10) { animation-delay: 0.27s; }
@keyframes cardFadeIn {
  to { opacity: 1; }
}
.service-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--glow-mint);
}
.service-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.service-card-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.service-card-category {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(45,212,191,0.06);
  color: var(--accent-mint);
  border: 1px solid rgba(45,212,191,0.12);
  white-space: nowrap;
  flex-shrink: 0;
}
.service-card-category.media { background: rgba(139,92,246,0.08); color: var(--accent-purple); border-color: rgba(139,92,246,0.15); }
.service-card-category.infrastructure { background: rgba(6,182,212,0.08); color: var(--accent-cyan); border-color: rgba(6,182,212,0.15); }
.service-card-category.remote { background: rgba(245,158,11,0.08); color: var(--accent-orange); border-color: rgba(245,158,11,0.15); }
.service-card-purpose {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.service-card-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
}
.service-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.service-card-meta-row .label { color: var(--text-secondary); min-width: 55px; }
.service-card-meta-row .state-configured { color: var(--accent-green); }
.service-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.service-card-launch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(45,212,191,0.06);
  color: var(--accent-mint);
  border: 1px solid rgba(45,212,191,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.service-card-launch:hover {
  background: rgba(45,212,191,0.12);
  border-color: var(--accent-mint);
}
.service-card-launch svg { width: 12px; height: 12px; }
.service-card.hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  .service-card { animation: none; opacity: 1; }
}
@media (max-width: 600px) {
  .service-card-meta-row { flex-wrap: wrap; }
}