/* === msyx.fr cockpit — custom polish === */

#services .service {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.65) 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  backdrop-filter: blur(6px);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

#services .service:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.35), 0 0 0 1px rgba(59, 130, 246, 0.25);
}

#services .service img,
#services .service svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
  transition: transform 200ms ease, filter 200ms ease;
}

#services .service:hover img,
#services .service:hover svg {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.45));
}

.services-group h2,
#services h2 {
  background: linear-gradient(90deg, #e2e8f0 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}

#information-widgets h1,
.header h1 {
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

#services [data-group="Apps Legacy"] .service {
  opacity: 0.88;
}

#services [data-group="Apps Legacy"] .service:hover {
  opacity: 1;
}