/* ============================================================
   GRID
============================================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

/* ============================================================
   CARD
============================================================ */
.service-card {
  position: relative;
  cursor: pointer;

  padding: 22px;

  border-radius: 12px;

  background: linear-gradient(160deg, rgb(90, 8, 22) 0%, rgb(28, 8, 14) 60%, #121212 100%);

  border: 3px solid rgb(255, 0, 0);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(200, 0, 30, 0.35),
    inset 0 0 40px rgba(200, 0, 30, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  transition: transform 220ms ease, border-color 220ms ease,
    background 220ms ease, box-shadow 220ms ease;

  --svcPad: 18px;
  --svcIconSize: clamp(34px, 3.2vw, 52px);
  padding-right: calc(var(--svcPad) + var(--svcIconSize) + 14px);
}

.service-card:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.85);
  outline-offset: 4px;
}

/* Hover */
.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(0, 170, 210, 0.85);
  background: linear-gradient(160deg, rgb(0, 110, 141) 0%, #0a0a0a 100%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 28px rgba(0, 110, 141, 0.55),
    0 0 60px rgba(0, 110, 141, 0.2),
    inset 0 0 40px rgba(0, 110, 141, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}