/* Smooth Theme Transitions & Prevent Scrollbar Jitter */
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Glassmorphism Classes */
.glass-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dark .glass-header {
  background-color: rgba(15, 23, 42, 0.82);
  border-bottom-color: rgba(51, 65, 85, 0.6);
}

.light .glass-header {
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(226, 232, 240, 0.8);
}

/* Card Hover Elevation & Subtle Glow (Explicit transitions prevent layout reflow shake) */
.service-card {
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.24s ease, background-color 0.24s ease;
  will-change: transform, box-shadow;
}

.service-card:hover {
  transform: translateY(-4px);
}

.dark .service-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
  border: 1px solid rgba(71, 85, 105, 0.4);
}

.dark .service-card:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(99, 102, 241, 0.15);
}

.light .service-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.light .service-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.08), 0 6px 12px -3px rgba(99, 102, 241, 0.08);
}

/* Subtle background grid pattern */
.bg-grid-pattern {
  background-size: 32px 32px;
}

.dark .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.light .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
}

/* Shimmer pulse for live badge */
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.status-dot {
  animation: live-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Scrollbar - Smooth Cross-Platform */
html.dark {
  scrollbar-color: rgba(71, 85, 105, 0.6) transparent;
}

html.light {
  scrollbar-color: rgba(203, 213, 225, 0.8) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

html.dark::-webkit-scrollbar-thumb,
.dark ::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.6);
  border-radius: 4px;
}

html.light::-webkit-scrollbar-thumb,
.light ::-webkit-scrollbar-thumb {
  background: rgba(203, 213, 225, 0.8);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6);
}