.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.service-card { position: relative; min-height: 310px; padding: 28px; background: rgba(255,255,255,.76); border: 1px solid rgba(32,36,39,.08); border-radius: var(--radius); overflow: hidden; transition: background .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { background: #fff; border-color: rgba(32,36,39,.18); box-shadow: 0 12px 28px rgba(32,36,39,.08); }
.service-card h3 { margin-top: 56px; }
.service-card p { color: var(--muted); }
.service-number { position: absolute; right: 24px; top: 26px; font-weight: 900; color: rgba(17,19,21,.28); }
.service-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--ink); display: grid; place-items: center; }
.service-icon span { width: 25px; height: 25px; border: 3px solid var(--accent); border-radius: 50%; }
.service-icon--group span { border-radius: 4px 15px 4px 15px; transform: rotate(20deg); }
.service-icon--recovery span { border-width: 0 3px 3px 0; transform: rotate(45deg); }
.service-icon--mobility span { width: 30px; height: 12px; border-radius: 99px; }
.service-icon--nutrition span { border-radius: 70% 10% 70% 10%; }
.service-icon--performance span { border-radius: 0; transform: rotate(45deg); }
@media (max-width: 1080px) {
  .service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .service-card { border-radius: 18px; padding: 22px; }
}