.service-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card {
  position: relative;
  min-height: 286px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(2,12,12,.84), rgba(0,0,0,.84));
  border: 1px solid rgba(0,255,204,.28);
  box-shadow: inset 0 0 32px rgba(0,255,204,.035);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.service-card::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(0,255,204,.10), transparent); transform: translateX(-120%); transition: transform .45s ease; }
.service-card:hover { transform: translateY(-5px); border-color: var(--kaspa); box-shadow: var(--shadow-kaspa), inset 0 0 36px rgba(0,255,204,.055); }
.service-card:hover::before { transform: translateX(120%); }
.service-card--featured { grid-column: span 2; }
.service-card--magenta { border-color: rgba(255,0,212,.34); }
.service-card--magenta:hover { border-color: var(--magenta); box-shadow: var(--shadow-magenta), inset 0 0 36px rgba(255,0,212,.06); }
.card-meta { display:flex; justify-content:space-between; gap:12px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--muted); }
.card-meta strong { color: var(--kaspa); }
.service-card--magenta .card-meta strong, .service-card--locked .card-meta strong { color: var(--magenta); }
.service-card h3 { margin-top: 18px; font-size: clamp(1.65rem, 3.15vw, 2.85rem); letter-spacing:.08em; overflow-wrap:anywhere; hyphens:auto; }
.service-card p { margin-top: 12px; color: #c9dfdc; line-height: 1.5; overflow-wrap:anywhere; }
.service-card .machine-btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: center; }
.progress-shell { height: 8px; margin: 22px 0 14px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); overflow:hidden; }
.progress-shell span { display:block; height:100%; background: linear-gradient(90deg, var(--magenta), var(--kaspa)); box-shadow: 0 0 16px var(--kaspa); }
@media (max-width: 980px) { .service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .service-grid { grid-template-columns: 1fr; } .service-card--featured { grid-column: span 1; } }