/* Ambient Background Mesh: Moody deep blues, slate, and subtle violet */
:root {
  --bg-color: transparent !important;
}

html,
body,
#__next,
#main,
main,
div[class*="min-h-screen"],
div[class*="bg-slate-"],
div[class*="bg-zinc-"],
div[class*="bg-neutral-"] {
  background-color: #0b0d13 !important;
  background-image: 
    radial-gradient(at 15% 15%, rgba(56, 189, 248, 0.12) 0px, transparent 50%),
    radial-gradient(at 85% 10%, rgba(129, 140, 248, 0.14) 0px, transparent 55%),
    radial-gradient(at 50% 90%, rgba(236, 72, 153, 0.08) 0px, transparent 60%),
    radial-gradient(at 10% 80%, rgba(30, 41, 59, 0.4) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: #f8fafc !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif !important;
  letter-spacing: -0.015em;
}

/* Category Headers: Sleek visionOS-style pill label */
.service-group-title,
h2 {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 0.85rem !important;
  border-bottom: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Liquid Glass Cards */
.service-card,
.widget-card,
div[class*="ServiceCard"],
div[class*="group-item"] {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.22),  /* Specular top light rim */
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.2),        /* Soft bottom shadow */
    0 16px 32px -8px rgba(0, 0, 0, 0.45),         /* Ambient float shadow */
    0 4px 12px -2px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 15px 18px !important;
}

/* Floating Hover: Dynamic specular glow + subtle lift */
.service-card:hover,
div[class*="ServiceCard"]:hover {
  transform: translateY(-3px) scale(1.01) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.45),
    0 24px 40px -10px rgba(0, 0, 0, 0.6),
    0 8px 18px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Card Titles */
.service-card .title,
div[class*="ServiceCard"] h3 {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Card Descriptions */
.service-card .description,
div[class*="ServiceCard"] p {
  font-size: 0.76rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 3px !important;
}

/* App Icons: iOS rounded squircle style with subtle drop-depth */
.service-card img,
div[class*="ServiceCard"] img {
  border-radius: 10px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Ping Dot: Glowing status indicator */
.ping-dot {
  width: 7px !important;
  height: 7px !important;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}