.tilt-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .tilt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .tilt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tilt-card {
  position: relative;
  height: 260px;
  background: #111218;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.tilt-inner {
  position: absolute;
  inset: 0;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
  transform-style: preserve-3d;
  pointer-events: none; /* let the card capture the pointer for full-tilt */
}

.tilt-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  transform: translateZ(40px);
  pointer-events: none;
}

.tilt-title {
  font-size: 1.25rem;
  font-weight: 800;
  transform: translateZ(35px);
  pointer-events: none;
}

.tilt-desc {
  color: #A6ADBB;
  line-height: 1.7;
  transform: translateZ(30px);
  pointer-events: none;
}

/* Decorative graphic layers */
.tilt-card::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(60% 40% at 15% 15%, var(--halo-1, rgba(124,92,255,0.25)) 0%, transparent 60%),
    radial-gradient(50% 35% at 85% 25%, var(--halo-2, rgba(35,196,169,0.22)) 0%, transparent 60%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}

.tilt-card::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  background:
    radial-gradient(circle at 30% 30%, var(--blob-1, rgba(124,92,255,0.25)) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, var(--blob-2, rgba(35,196,169,0.20)) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* Variant themes */
.tilt-variant-purple { --halo-1: rgba(124,92,255,0.25); --halo-2: rgba(168,148,255,0.20); --blob-1: rgba(124,92,255,0.30); --blob-2: rgba(168,148,255,0.18); }
.tilt-variant-teal { --halo-1: rgba(35,196,169,0.25); --halo-2: rgba(125,230,214,0.18); --blob-1: rgba(35,196,169,0.28); --blob-2: rgba(125,230,214,0.18); }
.tilt-variant-indigo { --halo-1: rgba(79,70,229,0.25); --halo-2: rgba(139,135,248,0.18); --blob-1: rgba(79,70,229,0.28); --blob-2: rgba(139,135,248,0.18); }
.tilt-variant-blue { --halo-1: rgba(58,143,255,0.23); --halo-2: rgba(134,191,255,0.16); --blob-1: rgba(58,143,255,0.26); --blob-2: rgba(134,191,255,0.16); }
.tilt-variant-pink { --halo-1: rgba(255,109,179,0.25); --halo-2: rgba(255,194,224,0.18); --blob-1: rgba(255,109,179,0.28); --blob-2: rgba(255,194,224,0.18); }

/* Accent bar */
.tilt-accent {
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  width: 90px;
  border-bottom-right-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,0.95), rgba(35,196,169,0.95));
  transform: translateZ(50px);
}

/* Disable heavy transforms on mobile */
@media (max-width: 640px) {
  .tilt-card { height: 240px; }
  .tilt-inner, .tilt-title, .tilt-desc, .tilt-icon, .tilt-accent { transform: none !important; }
}