.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px){
  .cards-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .cards-grid{ grid-template-columns: 1fr; }
}

.svc-card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.svc-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  border-color: rgba(0,0,0,.16);
}

.svc-media{
  position: relative;
  aspect-ratio: 16/10;
  background: rgba(0,0,0,.03);
}

.svc-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.svc-icon{
  position:absolute;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.svc-icon img{
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.svc-body{
  padding: 14px;
}

.svc-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(34,34,34,.80);
  font-size: 13px;
}

.svc-actions{
  margin-top: 12px;
  display:flex;
  justify-content:flex-start;
}

.cta-band{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(216,201,180,.25);
}

@media (max-width: 720px){
  .cta-band{ flex-direction: column; align-items: stretch; }
  .cta-right{ display:flex; gap:10px; }
  .cta-right a{ width: 100%; text-align:center; }
}