/* ==========================================================================
   DelhiFix - Devices. Care. Always On.
   Ultra-Realistic UI/UX Master Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,800&family=Caveat:wght@600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
  background-color: #fafcff;
  overflow-x: hidden !important;
  position: relative;
  max-width: 100vw;
}

/* Ambient Radial Mesh Color Splashes on white background */
.bg-ambient-mesh {
  background-image: 
    radial-gradient(at 10% 10%, rgba(37, 99, 235, 0.08) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(249, 115, 22, 0.07) 0px, transparent 50%),
    radial-gradient(at 30% 60%, rgba(16, 185, 129, 0.06) 0px, transparent 50%),
    radial-gradient(at 85% 85%, rgba(37, 99, 235, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 95%, rgba(249, 115, 22, 0.06) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Ensure all section elements are transparent and show page ambient background */
section {
  background-color: transparent !important;
}

.bg-gradient-dark-banner {
  background: linear-gradient(135deg, #091224 0%, #0f1d38 50%, #0d284f 100%) !important;
}

.splash-circle-blue {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.splash-circle-orange {
  position: absolute;
  width: 550px;
  height: 550px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.10) 0%, rgba(249, 115, 22, 0) 70%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
}

.splash-circle-emerald {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.09) 0%, rgba(16, 185, 129, 0) 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

/* Handwritten Cursive Typography */
.font-handwriting {
  font-family: 'Caveat', cursive, sans-serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Glassmorphism & Realistic Depth */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.06), 0 0 1px 1px rgba(255, 255, 255, 0.9);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.card-realistic {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-realistic:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.15), 0 0 0 1px rgba(37, 99, 235, 0.2);
  border-color: rgba(147, 197, 253, 0.8);
}

/* Smooth Interactive Glows */
.glow-blue {
  box-shadow: 0 0 35px -5px rgba(37, 99, 235, 0.35);
}

.glow-orange {
  box-shadow: 0 0 35px -5px rgba(249, 115, 22, 0.35);
}

.glow-red {
  box-shadow: 0 0 35px -5px rgba(239, 68, 68, 0.4);
}

/* Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.animate-float {
  animation: floatSlow 4s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes fadeInUpCustom {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUpCustom 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Badge & Logo Styling */
.brand-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  transition: transform 0.2s ease;
}

.brand-logo-img:hover {
  transform: scale(1.04);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   AIFix Super-AI Playground & Studio Styles
   ========================================================================== */
.bg-cyber-grid {
  background-size: 36px 36px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.bg-cyber-grid-light {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(37, 99, 235, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.04) 1px, transparent 1px);
}

.ai-studio-panel {
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(37, 99, 235, 0.25);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(37, 99, 235, 0.2);
}

.ai-glow-border {
  position: relative;
}

.ai-glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(234, 88, 12, 0.8), rgba(37, 99, 235, 0.9));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 15px;
  background-color: #38bdf8;
  animation: cursorBlink 1s infinite;
  vertical-align: middle;
  margin-left: 2px;
}

@keyframes waveOscillate {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}

.wave-bar {
  width: 4px;
  background: linear-gradient(to top, #2563eb, #ea580c);
  border-radius: 9999px;
  animation: waveOscillate 1.2s ease-in-out infinite;
}

.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; }
.wave-bar:nth-child(5) { animation-delay: 0.6s; }
.wave-bar:nth-child(6) { animation-delay: 0.2s; }
.wave-bar:nth-child(7) { animation-delay: 0.35s; }
.wave-bar:nth-child(8) { animation-delay: 0.5s; }

/* ==========================================================================
   Pill-Shaped Sticky Navigation Header (Radius 26px, Universal across all devices)
   ========================================================================== */
.menu-header-pill {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 14px !important;
  z-index: 45 !important;
  border-radius: 26px !important;
  -webkit-border-radius: 26px !important;
  width: calc(100% - 32px) !important;
  max-width: 80rem !important; /* 1280px / max-w-7xl */
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.90) !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08), 0 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

/* Scrolled state for enhanced contrast & depth */
.menu-header-pill.is-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.14), 0 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
}

/* Dark mode pill (for aifix.html) */
.menu-header-pill.pill-dark {
  background: rgba(15, 23, 42, 0.90) !important;
  border: 1px solid rgba(99, 102, 241, 0.30) !important;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7), 0 0 25px -5px rgba(99, 102, 241, 0.15) !important;
}

.menu-header-pill.pill-dark.is-scrolled {
  background: rgba(15, 23, 42, 0.97) !important;
  border-color: rgba(99, 102, 241, 0.45) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px -5px rgba(99, 102, 241, 0.25) !important;
}

/* Tablet & Mobile responsive adaptations */
@media (max-width: 1024px) {
  .menu-header-pill {
    top: 10px !important;
    width: calc(100% - 24px) !important;
  }
}

@media (max-width: 640px) {
  .menu-header-pill {
    top: 8px !important;
    width: calc(100% - 16px) !important;
    margin-top: 6px;
    border-radius: 26px !important;
    -webkit-border-radius: 26px !important;
  }
}

/* Mobile Drawer Dropdown attached under the pill */
.menu-header-pill #mobileMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 26px !important;
  -webkit-border-radius: 26px !important;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  padding: 1rem 1.25rem 1.5rem 1.25rem;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  z-index: 50;
}

.menu-header-pill.pill-dark #mobileMenu {
  background: rgba(15, 23, 42, 0.98) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 30px -10px rgba(37, 99, 235, 0.2) !important;
}

/* ========================================================================== */
/* DUAL-COLOR HEADINGS & BRAND COLOR UTILITIES                                 */
/* ========================================================================== */
.text-brand-blue {
  color: #1d4ed8 !important;
}

.text-brand-orange {
  color: #ea580c !important;
}

.text-brand-blue-light {
  color: #60a5fa !important;
}

.text-brand-orange-light {
  color: #fb923c !important;
}

.gradient-cut-text,
.gradient-delhifix {
  background: linear-gradient(135deg, #1d4ed8 0%, #ea580c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

.gradient-cut-dark,
.gradient-delhifix-dark {
  background: linear-gradient(135deg, #60a5fa 0%, #fb923c 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block;
}

.heading-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  background: linear-gradient(to right, #eff6ff, #fff7ed);
  border: 1px solid rgba(191, 219, 254, 0.7);
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   DelhiFix - Ultra-Realistic Cinematic Logo Intro Preloader
   ========================================================================== */
html.skip-intro #delhifix-intro-overlay {
  display: none !important;
}

@keyframes autoDismissIntro {
  0% { opacity: 1; pointer-events: auto; }
  99% { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; display: none !important; visibility: hidden !important; }
}

#delhifix-intro-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  background: radial-gradient(circle at 50% 48%, #ffffff 0%, #f8fafc 55%, #e2e8f0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  animation: autoDismissIntro 0.45s cubic-bezier(0.4, 0, 0.2, 1) 2.2s forwards;
  cursor: pointer;
}

#delhifix-intro-overlay.intro-fade-out {
  opacity: 0 !important;
  transform: scale(1.03) !important;
  pointer-events: none !important;
  display: none !important;
}

.intro-ambient-glow {
  position: absolute;
  width: min(650px, 120vw);
  height: min(650px, 120vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.09) 0%, rgba(249, 115, 22, 0.05) 50%, transparent 70%);
  pointer-events: none;
  animation: pulseAura 2.4s ease-in-out infinite alternate;
}

@keyframes pulseAura {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.12); opacity: 1; }
}

.intro-logo-stage {
  position: relative;
  width: min(90%, 540px);
  aspect-ratio: 1270 / 256;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  perspective: 1000px;
  filter: drop-shadow(0 14px 28px rgba(15, 23, 42, 0.12));
}

/* 1. Blue Word "Delhi" */
.intro-delhi-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 54.724%;
  height: 100%;
  opacity: 0;
  animation: enterDelhi 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  will-change: transform, opacity;
}

.intro-delhi-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes enterDelhi {
  0% {
    opacity: 0;
    transform: translate3d(-35px, 6px, 0) scale(0.88);
    filter: blur(5px);
  }
  65% {
    opacity: 1;
    transform: translate3d(3px, -1px, 0) scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0px);
  }
}

/* 2. Orange Letters "F" and "i" */
.intro-letter-f-box {
  position: absolute;
  left: 54.724%;
  top: 0;
  width: 14.173%;
  height: 100%;
  opacity: 0;
  animation: enterF 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
  will-change: transform, opacity;
}

.intro-letter-f-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes enterF {
  0% {
    opacity: 0;
    transform: translate3d(0, -35px, 0) scale(0.75) rotate(-6deg);
    filter: blur(4px);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.05) rotate(1deg);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

.intro-letter-i-box {
  position: absolute;
  left: 68.897%;
  top: 0;
  width: 5.906%;
  height: 100%;
  opacity: 0;
  animation: enterI 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both;
  will-change: transform, opacity;
}

.intro-letter-i-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@keyframes enterI {
  0% {
    opacity: 0;
    transform: translate3d(0, -35px, 0) scale(0.75) rotate(6deg);
    filter: blur(4px);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.06) rotate(-1deg);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

/* 3. Two Laptops Forming 'X' */
.intro-x-stage {
  position: absolute;
  left: 74.803%;
  top: 0;
  width: 25.197%;
  height: 100%;
  perspective: 800px;
  perspective-origin: 50% 50%;
}

.laptop-unit-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  opacity: 0;
  animation: flyInLeftLaptop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
  will-change: transform, opacity;
}

@keyframes flyInLeftLaptop {
  0% {
    opacity: 0;
    transform: translate3d(-25%, 15%, 0) rotate(-20deg) scale(0.75);
  }
  70% {
    opacity: 1;
    transform: translate3d(2%, -1%, 0) rotate(1deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.laptop-unit-right {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  opacity: 0;
  animation: flyInRightLaptop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
  will-change: transform, opacity;
  z-index: 2;
}

@keyframes flyInRightLaptop {
  0% {
    opacity: 0;
    transform: translate3d(25%, -15%, 0) rotate(20deg) scale(0.75);
  }
  70% {
    opacity: 1;
    transform: translate3d(-2%, 1%, 0) rotate(-1deg) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

.laptop-base {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  transform-origin: top center;
}

.laptop-base img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.laptop-screen-left-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transform-origin: bottom center;
  animation: openScreenLeft 0.6s cubic-bezier(0.18, 0.9, 0.3, 1.1) 0.88s both;
  will-change: transform, filter;
}

@keyframes openScreenLeft {
  0% {
    transform: rotateX(86deg) scaleY(0.7);
    filter: brightness(0.2) contrast(1.2);
  }
  45% {
    filter: brightness(1.6) drop-shadow(0 0 12px rgba(37, 99, 235, 0.7));
  }
  80% {
    transform: rotateX(-4deg) scaleY(1.02);
    filter: brightness(1.05);
  }
  100% {
    transform: rotateX(0deg) scaleY(1);
    filter: brightness(1);
  }
}

.laptop-screen-right-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  transform-origin: bottom center;
  animation: openScreenRight 0.6s cubic-bezier(0.18, 0.9, 0.3, 1.1) 0.94s both;
  will-change: transform, filter;
}

@keyframes openScreenRight {
  0% {
    transform: rotateX(86deg) scaleY(0.7);
    filter: brightness(0.2) contrast(1.2);
  }
  45% {
    filter: brightness(1.6) drop-shadow(0 0 12px rgba(249, 115, 22, 0.7));
  }
  80% {
    transform: rotateX(-4deg) scaleY(1.02);
    filter: brightness(1.05);
  }
  100% {
    transform: rotateX(0deg) scaleY(1);
    filter: brightness(1);
  }
}

.laptop-screen-left-box img,
.laptop-screen-right-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.intro-shine-sweep {
  position: absolute;
  inset: -15%;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%,
    transparent 75%
  );
  transform: translateX(-120%);
  pointer-events: none;
  animation: shineSweep 0.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;
  mix-blend-mode: overlay;
}

@keyframes shineSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

.intro-tagline {
  margin-top: 18px;
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #64748b;
  opacity: 0;
  transform: translateY(8px);
  animation: enterTagline 0.4s ease-out 1.25s both;
  display: flex;
  align-items: center;
  gap: 10px;
}

@keyframes enterTagline {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.intro-tagline-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2563eb;
}

.intro-loader-pill {
  margin-top: 24px;
  width: min(180px, 45vw);
  height: 4px;
  background: rgba(226, 232, 240, 0.85);
  border-radius: 999px;
  overflow: hidden;
  opacity: 0;
  animation: fadeInPill 0.3s ease-out 0.15s both;
}

@keyframes fadeInPill {
  to { opacity: 1; }
}

.intro-loader-progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #f97316);
  border-radius: 999px;
  animation: fillProgress 1.9s cubic-bezier(0.1, 0.5, 0.2, 1) 0.1s both;
}

@keyframes fillProgress {
  0% { width: 0%; }
  50% { width: 75%; }
  100% { width: 100%; }
}

/* ==========================================================================
   Master Uniform Seamless Footer (No top border, no harsh cuts, fully responsive)
   ========================================================================== */
footer,
.master-footer {
  background-color: transparent !important;
  background-image: none !important;
  border-top: none !important;
  border-top-width: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Ensure footer links and icons are easily tap-friendly on mobile touch devices */
footer a, footer button {
  touch-action: manipulation;
}

/* ==========================================================================
   MASTER MOBILE & TABLET RESPONSIVE SYSTEM (< 1024px)
   All Contents Center-Aligned on Mobile & Tablet
   ========================================================================== */

@media (max-width: 1023.98px) {
  /* 1. Global Viewport & Container Reset (Zero Horizontal Overflow) */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
  }

  /* Clip ambient glow spheres so they never cause horizontal scroll */
  .splash-circle-blue,
  .splash-circle-orange,
  .splash-circle-emerald {
    max-width: 85vw !important;
    transform: scale(0.7) !important;
  }

  /* 2. Master Typography & Text Centering on Mobile & Tablet */
  h1, h2, h3, h4, h5, h6 {
    text-align: center !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Dual-color headline spans wrap fluidly on mobile without breaking awkward syllables */
  h1 span, h2 span, h3 span {
    display: inline;
  }

  @media (max-width: 639px) {
    h1 {
      font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
      line-height: 1.18 !important;
      letter-spacing: -0.025em !important;
    }
    h2 {
      font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important;
      line-height: 1.22 !important;
      letter-spacing: -0.02em !important;
    }
    h3 {
      font-size: clamp(1.1rem, 4.2vw, 1.4rem) !important;
      line-height: 1.25 !important;
    }
  }

  /* Section Intro Descriptions, Leads & Paragraphs */
  section p,
  main p,
  .hero-content p,
  .section-intro p,
  .card-realistic p,
  .glass-panel p,
  .glass-panel-dark p,
  .space-y-6 > p,
  .space-y-5 > p,
  .space-y-4 > p,
  .space-y-3 > p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Keep input fields and code blocks with natural readability text alignment */
  input,
  textarea,
  select,
  pre,
  code,
  .code-block,
  .text-left-preserve {
    text-align: left !important;
  }

  /* 3. Badges, Pills & Status Tags Centering */
  .heading-pill-badge,
  .badge,
  div[class*="rounded-full"][class*="uppercase"],
  div[class*="rounded-full"][class*="tracking-wider"],
  span[class*="rounded-full"][class*="uppercase"] {
    display: inline-flex !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 4. Action Buttons & CTA Groups Centering */
  .flex-wrap,
  .btn-group,
  div:has(> button.open-booking-modal),
  div:has(> a.open-booking-modal),
  div:has(> button[data-device]),
  div:has(> .open-aifix-chat) {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mobile Touch Targets */
  button,
  .btn,
  a[class*="rounded-full"],
  a[class*="rounded-xl"],
  a[class*="rounded-2xl"] {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* 5. Hero Sections on Mobile & Tablet */
  section.pt-6,
  section.pt-8,
  section.pt-10,
  section.pt-12,
  section.pt-14,
  section.pt-16,
  .hero-section {
    text-align: center !important;
  }

  /* Hero Column Wrappers */
  section .lg\:col-span-7,
  section .lg\:col-span-6,
  section .lg\:col-span-8 {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Store location pill tags inside Hero */
  .hero-store-pills,
  div:has(> span i.fa-location-dot) {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Trust Counter Grids inside Hero */
  div[class*="grid-cols-2"][class*="border-t"],
  div[class*="grid-cols-4"][class*="border-t"],
  div[class*="grid-cols-3"][class*="border-t"] {
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  div[class*="grid-cols-2"][class*="border-t"] > div,
  div[class*="grid-cols-4"][class*="border-t"] > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* 6. Card Components (Services, Stores, Features, Reviews, Why Us) */
  .card-realistic,
  .glass-panel,
  .glass-panel-dark,
  div[class*="shadow-card"],
  div[class*="rounded-2xl"][class*="border"],
  div[class*="rounded-3xl"][class*="border"] {
    text-align: center !important;
  }

  /* Card Icons and Avatars */
  .card-realistic [class*="w-10"],
  .card-realistic [class*="w-12"],
  .card-realistic [class*="w-14"],
  .glass-panel [class*="w-10"],
  .glass-panel [class*="w-12"],
  .glass-panel [class*="w-14"],
  div[class*="shadow-card"] [class*="w-10"],
  div[class*="shadow-card"] [class*="w-12"],
  div[class*="shadow-card"] [class*="w-14"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Card Badges and Sub-elements */
  .card-realistic span[class*="rounded-full"],
  div[class*="shadow-card"] span[class*="rounded-full"],
  .glass-panel span[class*="rounded-full"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
  }

  /* Card Bullet Lists & Feature Items */
  .card-realistic ul,
  div[class*="shadow-card"] ul {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .card-realistic li,
  div[class*="shadow-card"] li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 7. Store Cards (stores.html & index.html) */
  #cp, #gurgaon, #noida,
  div[id*="store"] {
    text-align: center !important;
  }

  #cp .lg\:col-span-7,
  #gurgaon .lg\:col-span-7,
  #noida .lg\:col-span-7 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  #cp .flex.items-center.justify-between,
  #gurgaon .flex.items-center.justify-between,
  #noida .flex.items-center.justify-between {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #cp .grid,
  #gurgaon .grid,
  #noida .grid {
    text-align: center !important;
  }

  /* 8. Dual Banners (Accident Mode Banner, 60-Min Pickup Banner, AMC Banner) */
  div[class*="bg-gradient-to-r"][class*="rounded-3xl"],
  div[class*="bg-gradient-dark-banner"] {
    text-align: center !important;
  }

  div[class*="bg-gradient-to-r"][class*="rounded-3xl"] .lg\:col-span-8,
  div[class*="bg-gradient-to-r"][class*="rounded-3xl"] .lg\:col-span-7,
  div[class*="bg-gradient-dark-banner"] .lg\:col-span-8,
  div[class*="bg-gradient-dark-banner"] .lg\:col-span-7 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 9. Master Seamless Footer Centering on Mobile & Tablet */
  footer,
  .master-footer {
    text-align: center !important;
  }

  footer .max-w-7xl,
  .master-footer .max-w-7xl {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  footer .grid,
  .master-footer .grid {
    text-align: center !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  footer .grid > div,
  .master-footer .grid > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  footer ul,
  .master-footer ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding-left: 0 !important;
  }

  footer li,
  .master-footer li {
    text-align: center !important;
    justify-content: center !important;
  }

  footer form,
  .master-footer form {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  footer .flex.items-center.gap-3,
  .master-footer .flex.items-center.gap-3,
  footer .flex.items-center.gap-4,
  .master-footer .flex.items-center.gap-4 {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Footer Bottom Sub-Bar */
  footer .border-t,
  .master-footer .border-t {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }

  footer .border-t .flex,
  .master-footer .border-t .flex {
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }

  /* 10. Forms, Modals & Diagnostic Studio */
  .modal-content,
  #bookingModal .bg-white,
  #searchModal .bg-white {
    text-align: center !important;
  }

  .modal-header,
  #bookingModal h2,
  #bookingModal h3,
  #bookingModal p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Form Labels & Group Titles on Mobile */
  form label.block,
  form .form-label {
    text-align: center !important;
  }

  /* Center Submit Buttons (exclude inline playground forms) */
  form:not(#heroAiPlaygroundForm) button[type="submit"]:not(#heroAiGenerateBtn),
  #standaloneBookingForm button[type="submit"] {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 380px !important;
  }

  /* 12. Review Cards & Testimonials */
  .review-card,
  div[class*="review"] {
    text-align: center !important;
  }

  .review-card .flex.items-center.gap-3,
  div[class*="review"] .flex.items-center.gap-3 {
    justify-content: center !important;
    text-align: center !important;
  }

  /* 13. FAQ Accordion Items */
  .faq-question,
  button[data-faq] {
    text-align: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }

  .faq-answer,
  div[id^="faq-"] {
    text-align: center !important;
  }
}

/* Specific Phone Optimizations (< 640px) */
@media (max-width: 639.98px) {
  /* Fluid padding for safe screen borders */
  .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Heading scaling for small screens */
  h1:not(.hero-title-main) {
    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    line-height: 1.2 !important;
  }

  /* Full width buttons on phone */
  .open-booking-modal,
  .open-aifix-chat {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Diagnostic and Playground Tab Pill Wrapping */
  .device-tab-btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    text-align: center;
  }
}

/* ========================================================================== */
/* Ultra-Realistic 3D Animated MacBook (Homepage Hero Showcase)               */
/* ========================================================================== */
.hero-macbook-viewport {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  perspective-origin: 50% 45%;
  user-select: none;
}

.hero-macbook-rig {
  position: relative;
  width: 420px;
  height: 380px;
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(-12deg) rotateZ(2deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Hinge Axis */
.macbook-hinge-axis {
  position: absolute;
  top: 140px;
  left: 0;
  width: 420px;
  height: 12px;
  transform-style: preserve-3d;
  z-index: 20;
}

.macbook-hinge-cylinder {
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 9px;
  background: linear-gradient(180deg, #16181d 0%, #353b47 50%, #101216 100%);
  border-radius: 4.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.25);
}

/* Base Chassis (Keyboard Deck extending forward from hinge) */
.macbook-base-deck {
  position: absolute;
  top: 140px;
  left: 0;
  width: 420px;
  height: 260px;
  transform-origin: top center;
  transform: rotateX(72deg);
  transform-style: preserve-3d;
  background: linear-gradient(135deg, #2c3039 0%, #1e2128 45%, #2a2e37 100%);
  border-radius: 4px 4px 20px 20px;
  padding: 12px 18px;
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -2px 4px rgba(0, 0, 0, 0.8);
}

/* 3D Base Thickness Edge */
.macbook-base-deck::after {
  content: '';
  position: absolute;
  inset: -1px -2px -6px -2px;
  background: linear-gradient(180deg, #181b21 0%, #090b0e 100%);
  border-radius: 6px 6px 22px 22px;
  transform: translateZ(-6px);
  z-index: -1;
  box-shadow: 0 35px 55px -10px rgba(0, 0, 0, 0.6);
}

/* Keyboard Well */
.macbook-keyboard-tray {
  width: 100%;
  height: 156px;
  background: #0b0d11;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), inset 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.macbook-key-row {
  display: flex;
  gap: 3px;
  height: 100%;
}

.macbook-key {
  background: linear-gradient(180deg, #20232a 0%, #111317 100%);
  border-radius: 2.5px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 6.5px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.12);
  user-select: none;
}

.macbook-key.w-1 { flex: 1.35; }
.macbook-key.w-2 { flex: 1.7; }
.macbook-key.w-space { flex: 5.2; }

/* Force Touch Trackpad */
.macbook-trackpad {
  width: 144px;
  height: 70px;
  margin: 9px auto 0;
  background: linear-gradient(180deg, #242730 0%, #1b1d23 100%);
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Front Lip Thumb Notch */
.macbook-thumb-notch {
  width: 50px;
  height: 3.5px;
  background: #0f1115;
  border-radius: 0 0 4px 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Side Speaker Grilles */
.macbook-speaker-l, .macbook-speaker-r {
  position: absolute;
  top: 18px;
  width: 10px;
  height: 140px;
  background-image: radial-gradient(#0a0b0e 1px, transparent 1px);
  background-size: 2.8px 2.8px;
  opacity: 0.75;
}
.macbook-speaker-l { left: 4px; }
.macbook-speaker-r { right: 4px; }

/* ========================================================================= */
/* THE LID (Display extending upward from hinge)                             */
/* ========================================================================= */
.macbook-lid-deck {
  position: absolute;
  bottom: 240px;
  left: 0;
  width: 420px;
  height: 270px;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  
  /* Initial State: Closed flat on base */
  transform: rotateX(72deg);
}

/* Opened State: Tilted forward towards user */
.macbook-lid-deck.is-open {
  transform: rotateX(-12deg);
}

.macbook-bezel {
  width: 100%;
  height: 100%;
  background: #050608;
  border-radius: 18px 18px 3px 3px;
  padding: 7px;
  position: relative;
  box-shadow: 
    0 -2px 12px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1.5px #252932;
  transform-style: preserve-3d;
}

/* Aluminum Back Shell with Apple Logo */
.macbook-back-shell {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2d313b 0%, #1c1f26 45%, #2a2e37 100%);
  border-radius: 18px 18px 3px 3px;
  transform: rotateY(180deg) translateZ(1.5px);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

/* Liquid Retina Screen Surface */
.macbook-screen-surface {
  width: 100%;
  height: 100%;
  background: #040507;
  border-radius: 12px 12px 2px 2px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0.15;
  filter: brightness(0.2);
  transition: opacity 1.3s ease, filter 1.3s ease;
}

.macbook-lid-deck.is-open .macbook-screen-surface {
  opacity: 1;
  filter: brightness(1);
}

/* Camera Notch */
.macbook-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 10px;
  background: #050608;
  border-radius: 0 0 5px 5px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.macbook-lens {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #101b26;
  border: 0.5px solid #233446;
  box-shadow: inset 0 0 1px #38bdf8;
}

.macbook-led {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 3px #10b981;
}

/* Glass Specular Reflection Sweep */
.macbook-glass-glare {
  position: absolute;
  inset: -50% -50% -50% -50%;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.1) 52%,
    transparent 62%
  );
  pointer-events: none;
  z-index: 25;
  transform: translateX(-120%);
  transition: transform 1.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.macbook-lid-deck.is-open .macbook-glass-glare {
  transform: translateX(120%);
  transition-delay: 0.45s;
}

/* Ambient Floor Contact Shadow */
.macbook-ambient-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.38) 0%, rgba(15, 23, 42, 0.14) 50%, transparent 75%);
  filter: blur(14px);
  border-radius: 50%;
  pointer-events: none;
  transition: all 1.9s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.4;
}

.macbook-lid-deck.is-open ~ .macbook-ambient-shadow {
  width: 490px;
  height: 105px;
  opacity: 0.8;
  filter: blur(17px);
}

/* Responsive Scaling for Mobile Screens */
@media (max-width: 639.98px) {
  .hero-macbook-viewport {
    height: 340px;
    transform: scale(0.72);
    transform-origin: center center;
    margin: -30px 0;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero-macbook-viewport {
    height: 390px;
    transform: scale(0.85);
    transform-origin: center center;
  }
}

/* ==========================================================================
   DelhiFix - Ultra-Smooth Desktop Appear Animation & Full Motion Engine
   High-performance kinetic design with GPU acceleration & fail-safe fallbacks
   ========================================================================== */

/* 1. Global Desktop Scroll Progress Bar */
#desktopScrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 30%, #06b6d4 70%, #f97316 100%);
  z-index: 100000;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.08s ease-out;
  box-shadow: 0 1px 8px rgba(37, 99, 235, 0.45);
}

/* 2. Interactive Floating Back-to-Top Button */
#backToTopBtn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 80;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(203, 213, 225, 0.9);
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(37, 99, 235, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

#backToTopBtn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#backToTopBtn:hover {
  background: #2563eb;
  color: #ffffff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.8);
}

#backToTopBtn:active {
  transform: translateY(0) scale(0.95);
}

/* 3. Progressive Enhancement / Motion Engine Classes */
/* When motion is active via JS, initial states are prepared */
html.has-motion .reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-scale {
  opacity: 0;
  transform: scale3d(0.94, 0.94, 1);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-slide-left {
  opacity: 0;
  transform: translate3d(-38px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .reveal-slide-right {
  opacity: 0;
  transform: translate3d(38px, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Revealed States (Full Motion Triggered) */
html.has-motion .reveal-on-scroll.is-revealed,
html.has-motion .is-revealed .reveal-on-scroll,
html.has-motion .reveal-scale.is-revealed,
html.has-motion .is-revealed .reveal-scale,
html.has-motion .reveal-slide-left.is-revealed,
html.has-motion .is-revealed .reveal-slide-left,
html.has-motion .reveal-slide-right.is-revealed,
html.has-motion .is-revealed .reveal-slide-right {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) !important;
}

/* 4. Cascading Stagger for Inner Cards and Grid Items */
html.has-motion .stagger-children > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.has-motion .stagger-children.is-revealed > * {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

html.has-motion .stagger-children.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(2) { transition-delay: 0.12s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(3) { transition-delay: 0.19s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(4) { transition-delay: 0.26s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(5) { transition-delay: 0.33s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(6) { transition-delay: 0.40s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(7) { transition-delay: 0.47s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(8) { transition-delay: 0.54s; }
html.has-motion .stagger-children.is-revealed > *:nth-child(n+9) { transition-delay: 0.60s; }

/* Immediate response on card hover without waiting for stagger delay */
html.has-motion .stagger-children.is-revealed > *:hover {
  transition-delay: 0s !important;
}

/* 5. Interactive Desktop 3D Tilt & Micro-Motion (>= 1024px) */
@media (hover: hover) and (min-width: 1024px) {
  /* Smooth hardware perspective on card containers */
  .interactive-motion-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
  }

  .interactive-motion-card:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 22px 45px -12px rgba(37, 99, 235, 0.16), 0 0 0 1px rgba(37, 99, 235, 0.2);
    border-color: rgba(96, 165, 250, 0.8) !important;
  }

  /* Shimmer sweep on primary buttons */
  .btn-shimmer {
    position: relative;
    overflow: hidden;
  }

  .btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-25deg);
    transition: left 0.75s ease;
    pointer-events: none;
  }

  .btn-shimmer:hover::before {
    left: 140%;
  }

  /* Micro-interactions on buttons */
  button:active, .btn-interactive:active {
    transform: scale(0.975);
    transition: transform 0.1s ease;
  }
}

/* 6. Fail-Safe Fallbacks: Zero-Mistake Guarantee */
/* If JavaScript is disabled or fails to initialize, everything is 100% visible */
html:not(.has-motion) .reveal-on-scroll,
html:not(.has-motion) .reveal-scale,
html:not(.has-motion) .reveal-slide-left,
html:not(.has-motion) .reveal-slide-right,
html:not(.has-motion) .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 7. Accessibility - Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html.has-motion .reveal-on-scroll,
  html.has-motion .reveal-scale,
  html.has-motion .reveal-slide-left,
  html.has-motion .reveal-slide-right,
  html.has-motion .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  
  #desktopScrollProgress {
    display: none !important;
  }
}

/* ==========================================================================
   DelhiFix - 40 Reviews Infinite Kinetic Motion Slider
   Ultra-smooth GPU-accelerated dual marquee tracks with mobile swipe & pause
   ========================================================================== */

.reviews-marquee-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y pinch-zoom;
}

.reviews-marquee-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Dual directional kinetic flow */
.reviews-marquee-track.track-left {
  animation: scrollReviewsLeft 75s linear infinite;
}

.reviews-marquee-track.track-right {
  animation: scrollReviewsRight 75s linear infinite;
}

@keyframes scrollReviewsLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes scrollReviewsRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Pause animation on hover, active touch, or when explicitly paused */
.reviews-marquee-wrapper:hover .reviews-marquee-track,
.reviews-marquee-wrapper:active .reviews-marquee-track,
.reviews-marquee-wrapper.is-paused .reviews-marquee-track {
  animation-play-state: paused !important;
}

/* Individual card GPU optimization */
.review-card {
  contain: layout paint;
  will-change: transform, box-shadow;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, border-color 0.3s ease;
}

.review-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 20px 30px -10px rgba(37, 99, 235, 0.15), 0 0 0 1px rgba(37, 99, 235, 0.25);
  border-color: rgba(96, 165, 250, 0.9) !important;
  z-index: 10;
}

/* Filtering interactive state */
.review-card.is-filtered-out {
  opacity: 0.28;
  filter: grayscale(0.6);
  transform: scale(0.96);
  pointer-events: none;
}

.review-card.is-highlighted {
  border-color: #2563eb !important;
  box-shadow: 0 12px 30px -5px rgba(37, 99, 235, 0.3), 0 0 0 2px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-4px) scale(1.02);
}

/* Mobile responsive speed adjustments */
@media (max-width: 640px) {
  .reviews-marquee-track.track-left {
    animation-duration: 55s;
  }
  .reviews-marquee-track.track-right {
    animation-duration: 55s;
  }
  .reviews-marquee-track {
    gap: 0.875rem;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee-track.track-left,
  .reviews-marquee-track.track-right {
    animation: none !important;
  }
  .reviews-marquee-wrapper {
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Hero Headlines & Dynamic Typewriter Animation (15% Larger & 1-Line Desktop)
   ========================================================================== */
.hero-title-main {
  font-size: clamp(1.58rem, 4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 900;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.hero-headline-line1 {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: #2563eb;
}

@media (min-width: 1024px) {
  .hero-headline-line1 {
    white-space: nowrap !important;
  }
}

.hero-headline-line2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25em;
  text-align: center;
  color: #ea6728;
  background: linear-gradient(135deg, #f2d851 0%, #ec9a38 25%, #ea6728 50%, #e54425 75%, #dd3221 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#heroTypewriterText {
  display: inline-block;
  vertical-align: middle;
  color: #ea6728;
  background: linear-gradient(135deg, #f2d851 0%, #ec9a38 25%, #ea6728 50%, #e54425 75%, #dd3221 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-typewriter-cursor {
  display: inline-block;
  width: 4px;
  height: 0.88em;
  margin-left: 4px;
  vertical-align: -0.05em;
  background: linear-gradient(180deg, #f2d851 0%, #ea6728 50%, #dd3221 100%);
  border-radius: 2px;
  animation: heroBlink 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  box-shadow: 0 0 10px rgba(234, 103, 40, 0.65), 0 0 18px rgba(221, 50, 33, 0.35);
  -webkit-text-fill-color: initial;
}

@keyframes heroBlink {
  0%, 45% {
    opacity: 1;
    transform: scaleY(1);
  }
  50%, 100% {
    opacity: 0;
    transform: scaleY(0.95);
  }
}

@media (max-width: 640px) {
  .hero-headline-line2,
  #heroTypewriterText {
    background: linear-gradient(135deg, #f2d851 0%, #ec9a38 25%, #ea6728 50%, #e54425 75%, #dd3221 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .hero-typewriter-cursor {
    width: 2.5px;
    margin-left: 2px;
    background: linear-gradient(180deg, #f2d851 0%, #ea6728 50%, #dd3221 100%);
    box-shadow: 0 0 6px rgba(234, 103, 40, 0.6);
  }
}

/* ==========================================================================
   MASTER COLOR SPLASH ENGINE & ULTRA-MODERN VIBRANT CARD SYSTEM
   ========================================================================== */

/* Base Card Architecture: Relative positioning, hardware isolation, overflow clipping */
.color-splash-box,
.card-realistic,
.review-card,
.service-card,
.milestone-card,
.card-colored-top,
.interactive-motion-card,
.splash-card,
.triage-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.3s ease, 
              background 0.3s ease;
}

/* Ensure interactive child elements remain above background splashes */
.color-splash-box > *,
.card-realistic > *,
.review-card > *,
.service-card > *,
.milestone-card > *,
.card-colored-top > *,
.interactive-motion-card > *,
.splash-card > * {
  position: relative;
  z-index: 1;
}

/* Sleek 3.5px Top Accent Ribbon Bar (::before) */
.color-splash-box::before,
.card-realistic::before,
.review-card::before,
.service-card::before,
.milestone-card::before,
.card-colored-top::before,
.interactive-motion-card::before,
.splash-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  z-index: 2;
  pointer-events: none;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

/* Ambient Corner Radial Splash (::after) */
.color-splash-box::after,
.card-realistic::after,
.review-card::after,
.service-card::after,
.milestone-card::after,
.card-colored-top::after,
.interactive-motion-card::after,
.splash-card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -24px;
  width: 175px;
  height: 175px;
  border-radius: 9999px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  filter: blur(28px);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(56, 189, 248, 0.05) 50%, transparent 75%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.color-splash-box:hover::after,
.card-realistic:hover::after,
.review-card:hover::after,
.service-card:hover::after,
.milestone-card:hover::after,
.card-colored-top:hover::after,
.interactive-motion-card:hover::after,
.splash-card:hover::after {
  transform: scale(1.22) translate(-6px, 6px);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   THEME 1: ELECTRIC AZURE / SAPPHIRE BLUE (.splash-blue / .accent-blue)
   -------------------------------------------------------------------------- */
.splash-blue,
.accent-blue,
.card-glow-blue {
  border-color: rgba(191, 219, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(239, 246, 255, 0.85) 0%, #ffffff 42%, rgba(240, 249, 255, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08), 0 4px 6px -2px rgba(37, 99, 235, 0.04);
}
.splash-blue::before,
.accent-blue::before,
.card-glow-blue::before {
  background: linear-gradient(90deg, #2563eb, #38bdf8, #06b6d4) !important;
}
.splash-blue::after,
.accent-blue::after,
.card-glow-blue::after {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 75%) !important;
}
.splash-blue:hover,
.accent-blue:hover,
.card-glow-blue:hover {
  border-color: rgba(96, 165, 250, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(37, 99, 235, 0.24), 0 0 0 1px rgba(37, 99, 235, 0.3) !important;
}

/* --------------------------------------------------------------------------
   THEME 2: SUNSET AMBER / CORAL ORANGE (.splash-orange / .accent-orange)
   -------------------------------------------------------------------------- */
.splash-orange,
.accent-orange,
.card-glow-orange {
  border-color: rgba(254, 215, 170, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 247, 237, 0.85) 0%, #ffffff 42%, rgba(254, 243, 199, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.08), 0 4px 6px -2px rgba(249, 115, 22, 0.04);
}
.splash-orange::before,
.accent-orange::before,
.card-glow-orange::before {
  background: linear-gradient(90deg, #ea580c, #f97316, #fbbf24) !important;
}
.splash-orange::after,
.accent-orange::after,
.card-glow-orange::after {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.22) 0%, rgba(251, 191, 36, 0.08) 50%, transparent 75%) !important;
}
.splash-orange:hover,
.accent-orange:hover,
.card-glow-orange:hover {
  border-color: rgba(251, 146, 60, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(249, 115, 22, 0.24), 0 0 0 1px rgba(249, 115, 22, 0.3) !important;
}

/* --------------------------------------------------------------------------
   THEME 3: ROYAL CYBER VIOLET / PURPLE (.splash-purple / .accent-purple)
   -------------------------------------------------------------------------- */
.splash-purple,
.accent-purple,
.card-glow-purple {
  border-color: rgba(221, 214, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(245, 243, 255, 0.85) 0%, #ffffff 42%, rgba(238, 242, 255, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.08), 0 4px 6px -2px rgba(139, 92, 246, 0.04);
}
.splash-purple::before,
.accent-purple::before,
.card-glow-purple::before {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #c084fc) !important;
}
.splash-purple::after,
.accent-purple::after,
.card-glow-purple::after {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(192, 132, 252, 0.08) 50%, transparent 75%) !important;
}
.splash-purple:hover,
.accent-purple:hover,
.card-glow-purple:hover {
  border-color: rgba(167, 139, 250, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(139, 92, 246, 0.24), 0 0 0 1px rgba(139, 92, 246, 0.3) !important;
}

/* --------------------------------------------------------------------------
   THEME 4: MINT EMERALD / NEON TEAL (.splash-emerald / .accent-emerald)
   -------------------------------------------------------------------------- */
.splash-emerald,
.accent-emerald,
.card-glow-emerald {
  border-color: rgba(167, 243, 208, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 253, 245, 0.85) 0%, #ffffff 42%, rgba(204, 251, 241, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.08), 0 4px 6px -2px rgba(16, 185, 129, 0.04);
}
.splash-emerald::before,
.accent-emerald::before,
.card-glow-emerald::before {
  background: linear-gradient(90deg, #059669, #10b981, #34d399) !important;
}
.splash-emerald::after,
.accent-emerald::after,
.card-glow-emerald::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, rgba(52, 211, 153, 0.08) 50%, transparent 75%) !important;
}
.splash-emerald:hover,
.accent-emerald:hover,
.card-glow-emerald:hover {
  border-color: rgba(52, 211, 153, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(16, 185, 129, 0.24), 0 0 0 1px rgba(16, 185, 129, 0.3) !important;
}

/* --------------------------------------------------------------------------
   THEME 5: VIVID ROSE / CRIMSON PINK (.splash-rose / .accent-rose)
   -------------------------------------------------------------------------- */
.splash-rose,
.accent-rose,
.card-glow-rose {
  border-color: rgba(254, 205, 211, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 241, 242, 0.85) 0%, #ffffff 42%, rgba(253, 242, 248, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.08), 0 4px 6px -2px rgba(244, 63, 94, 0.04);
}
.splash-rose::before,
.accent-rose::before,
.card-glow-rose::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185) !important;
}
.splash-rose::after,
.accent-rose::after,
.card-glow-rose::after {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.22) 0%, rgba(251, 113, 133, 0.08) 50%, transparent 75%) !important;
}
.splash-rose:hover,
.accent-rose:hover,
.card-glow-rose:hover {
  border-color: rgba(251, 113, 133, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(244, 63, 94, 0.24), 0 0 0 1px rgba(244, 63, 94, 0.3) !important;
}

/* --------------------------------------------------------------------------
   THEME 6: ELECTRIC CYAN / POLAR SKY (.splash-cyan / .accent-cyan)
   -------------------------------------------------------------------------- */
.splash-cyan,
.accent-cyan,
.card-glow-cyan {
  border-color: rgba(165, 243, 252, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 254, 255, 0.85) 0%, #ffffff 42%, rgba(224, 242, 254, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.08), 0 4px 6px -2px rgba(6, 182, 212, 0.04);
}
.splash-cyan::before,
.accent-cyan::before,
.card-glow-cyan::before {
  background: linear-gradient(90deg, #0891b2, #06b6d4, #38bdf8) !important;
}
.splash-cyan::after,
.accent-cyan::after,
.card-glow-cyan::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.22) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 75%) !important;
}
.splash-cyan:hover,
.accent-cyan:hover,
.card-glow-cyan:hover {
  border-color: rgba(34, 211, 238, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(6, 182, 212, 0.24), 0 0 0 1px rgba(6, 182, 212, 0.3) !important;
}

/* --------------------------------------------------------------------------
   REVIEW CARDS: CATEGORY-SPECIFIC SPLASH MAPPINGS
   -------------------------------------------------------------------------- */
.review-card[data-category="screen"] {
  border-color: rgba(191, 219, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(239, 246, 255, 0.95) 0%, #ffffff 45%, rgba(240, 249, 255, 0.6) 100%) !important;
}
.review-card[data-category="screen"]::before {
  background: linear-gradient(90deg, #2563eb, #38bdf8) !important;
}
.review-card[data-category="screen"]::after {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.20) 0%, transparent 70%) !important;
}

.review-card[data-category="liquid"] {
  border-color: rgba(165, 243, 252, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 254, 255, 0.95) 0%, #ffffff 45%, rgba(224, 242, 254, 0.6) 100%) !important;
}
.review-card[data-category="liquid"]::before {
  background: linear-gradient(90deg, #0891b2, #06b6d4, #38bdf8) !important;
}
.review-card[data-category="liquid"]::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.20) 0%, transparent 70%) !important;
}

.review-card[data-category="logicboard"],
.review-card[data-category="storage"] {
  border-color: rgba(221, 214, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(245, 243, 255, 0.95) 0%, #ffffff 45%, rgba(238, 242, 255, 0.6) 100%) !important;
}
.review-card[data-category="logicboard"]::before,
.review-card[data-category="storage"]::before {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #c084fc) !important;
}
.review-card[data-category="logicboard"]::after,
.review-card[data-category="storage"]::after {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 70%) !important;
}

.review-card[data-category="battery"] {
  border-color: rgba(167, 243, 208, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 253, 245, 0.95) 0%, #ffffff 45%, rgba(204, 251, 241, 0.6) 100%) !important;
}
.review-card[data-category="battery"]::before {
  background: linear-gradient(90deg, #059669, #10b981, #34d399) !important;
}
.review-card[data-category="battery"]::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.20) 0%, transparent 70%) !important;
}

.review-card[data-category="thermal"],
.review-card[data-category="keyboard"] {
  border-color: rgba(254, 215, 170, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 247, 237, 0.95) 0%, #ffffff 45%, rgba(254, 243, 199, 0.6) 100%) !important;
}
.review-card[data-category="thermal"]::before,
.review-card[data-category="keyboard"]::before {
  background: linear-gradient(90deg, #ea580c, #f97316, #fbbf24) !important;
}
.review-card[data-category="thermal"]::after,
.review-card[data-category="keyboard"]::after {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.20) 0%, transparent 70%) !important;
}

.review-card[data-category="hinge"] {
  border-color: rgba(254, 205, 211, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 241, 242, 0.95) 0%, #ffffff 45%, rgba(253, 242, 248, 0.6) 100%) !important;
}
.review-card[data-category="hinge"]::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185) !important;
}
.review-card[data-category="hinge"]::after {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.20) 0%, transparent 70%) !important;
}

/* --------------------------------------------------------------------------
   AUTOMATIC COLOR SPLASH CYCLING FOR GRID BOXES ACROSS ALL PAGES
   -------------------------------------------------------------------------- */

/* 1st in cycle (Blue) */
.grid > .service-card:nth-child(6n + 1),
.grid > .milestone-card:nth-child(6n + 1),
.grid > .card-realistic:nth-child(6n + 1),
.grid > .interactive-motion-card:nth-child(6n + 1),
.grid > div[class*="shadow-card"]:nth-child(6n + 1):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 1):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(191, 219, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(239, 246, 255, 0.85) 0%, #ffffff 42%, rgba(240, 249, 255, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.08), 0 4px 6px -2px rgba(37, 99, 235, 0.04);
}
.grid > .service-card:nth-child(6n + 1)::before,
.grid > .milestone-card:nth-child(6n + 1)::before,
.grid > .card-realistic:nth-child(6n + 1)::before,
.grid > .interactive-motion-card:nth-child(6n + 1)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 1):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 1):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #2563eb, #38bdf8, #06b6d4) !important;
}
.grid > .service-card:nth-child(6n + 1)::after,
.grid > .milestone-card:nth-child(6n + 1)::after,
.grid > .card-realistic:nth-child(6n + 1)::after,
.grid > .interactive-motion-card:nth-child(6n + 1)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 1):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 1):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.20) 0%, rgba(56, 189, 248, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 1):hover,
.grid > .milestone-card:nth-child(6n + 1):hover,
.grid > .card-realistic:nth-child(6n + 1):hover,
.grid > .interactive-motion-card:nth-child(6n + 1):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 1):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 1):hover {
  border-color: rgba(96, 165, 250, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(37, 99, 235, 0.22), 0 0 0 1px rgba(37, 99, 235, 0.25) !important;
}

/* 2nd in cycle (Orange / Amber) */
.grid > .service-card:nth-child(6n + 2),
.grid > .milestone-card:nth-child(6n + 2),
.grid > .card-realistic:nth-child(6n + 2),
.grid > .interactive-motion-card:nth-child(6n + 2),
.grid > div[class*="shadow-card"]:nth-child(6n + 2):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 2):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(254, 215, 170, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 247, 237, 0.85) 0%, #ffffff 42%, rgba(254, 243, 199, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.08), 0 4px 6px -2px rgba(249, 115, 22, 0.04);
}
.grid > .service-card:nth-child(6n + 2)::before,
.grid > .milestone-card:nth-child(6n + 2)::before,
.grid > .card-realistic:nth-child(6n + 2)::before,
.grid > .interactive-motion-card:nth-child(6n + 2)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 2):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 2):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #ea580c, #f97316, #fbbf24) !important;
}
.grid > .service-card:nth-child(6n + 2)::after,
.grid > .milestone-card:nth-child(6n + 2)::after,
.grid > .card-realistic:nth-child(6n + 2)::after,
.grid > .interactive-motion-card:nth-child(6n + 2)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 2):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 2):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.20) 0%, rgba(251, 191, 36, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 2):hover,
.grid > .milestone-card:nth-child(6n + 2):hover,
.grid > .card-realistic:nth-child(6n + 2):hover,
.grid > .interactive-motion-card:nth-child(6n + 2):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 2):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 2):hover {
  border-color: rgba(251, 146, 60, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(249, 115, 22, 0.22), 0 0 0 1px rgba(249, 115, 22, 0.25) !important;
}

/* 3rd in cycle (Cyber Violet / Purple) */
.grid > .service-card:nth-child(6n + 3),
.grid > .milestone-card:nth-child(6n + 3),
.grid > .card-realistic:nth-child(6n + 3),
.grid > .interactive-motion-card:nth-child(6n + 3),
.grid > div[class*="shadow-card"]:nth-child(6n + 3):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 3):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(221, 214, 254, 0.85) !important;
  background: linear-gradient(155deg, rgba(245, 243, 255, 0.85) 0%, #ffffff 42%, rgba(238, 242, 255, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.08), 0 4px 6px -2px rgba(139, 92, 246, 0.04);
}
.grid > .service-card:nth-child(6n + 3)::before,
.grid > .milestone-card:nth-child(6n + 3)::before,
.grid > .card-realistic:nth-child(6n + 3)::before,
.grid > .interactive-motion-card:nth-child(6n + 3)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 3):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 3):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #7c3aed, #8b5cf6, #c084fc) !important;
}
.grid > .service-card:nth-child(6n + 3)::after,
.grid > .milestone-card:nth-child(6n + 3)::after,
.grid > .card-realistic:nth-child(6n + 3)::after,
.grid > .interactive-motion-card:nth-child(6n + 3)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 3):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 3):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, rgba(192, 132, 252, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 3):hover,
.grid > .milestone-card:nth-child(6n + 3):hover,
.grid > .card-realistic:nth-child(6n + 3):hover,
.grid > .interactive-motion-card:nth-child(6n + 3):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 3):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 3):hover {
  border-color: rgba(167, 139, 250, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(139, 92, 246, 0.22), 0 0 0 1px rgba(139, 92, 246, 0.25) !important;
}

/* 4th in cycle (Mint Emerald) */
.grid > .service-card:nth-child(6n + 4),
.grid > .milestone-card:nth-child(6n + 4),
.grid > .card-realistic:nth-child(6n + 4),
.grid > .interactive-motion-card:nth-child(6n + 4),
.grid > div[class*="shadow-card"]:nth-child(6n + 4):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 4):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(167, 243, 208, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 253, 245, 0.85) 0%, #ffffff 42%, rgba(204, 251, 241, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.08), 0 4px 6px -2px rgba(16, 185, 129, 0.04);
}
.grid > .service-card:nth-child(6n + 4)::before,
.grid > .milestone-card:nth-child(6n + 4)::before,
.grid > .card-realistic:nth-child(6n + 4)::before,
.grid > .interactive-motion-card:nth-child(6n + 4)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 4):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 4):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #059669, #10b981, #34d399) !important;
}
.grid > .service-card:nth-child(6n + 4)::after,
.grid > .milestone-card:nth-child(6n + 4)::after,
.grid > .card-realistic:nth-child(6n + 4)::after,
.grid > .interactive-motion-card:nth-child(6n + 4)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 4):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 4):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.20) 0%, rgba(52, 211, 153, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 4):hover,
.grid > .milestone-card:nth-child(6n + 4):hover,
.grid > .card-realistic:nth-child(6n + 4):hover,
.grid > .interactive-motion-card:nth-child(6n + 4):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 4):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 4):hover {
  border-color: rgba(52, 211, 153, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(16, 185, 129, 0.22), 0 0 0 1px rgba(16, 185, 129, 0.25) !important;
}

/* 5th in cycle (Vivid Rose) */
.grid > .service-card:nth-child(6n + 5),
.grid > .milestone-card:nth-child(6n + 5),
.grid > .card-realistic:nth-child(6n + 5),
.grid > .interactive-motion-card:nth-child(6n + 5),
.grid > div[class*="shadow-card"]:nth-child(6n + 5):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 5):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(254, 205, 211, 0.85) !important;
  background: linear-gradient(155deg, rgba(255, 241, 242, 0.85) 0%, #ffffff 42%, rgba(253, 242, 248, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(244, 63, 94, 0.08), 0 4px 6px -2px rgba(244, 63, 94, 0.04);
}
.grid > .service-card:nth-child(6n + 5)::before,
.grid > .milestone-card:nth-child(6n + 5)::before,
.grid > .card-realistic:nth-child(6n + 5)::before,
.grid > .interactive-motion-card:nth-child(6n + 5)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 5):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 5):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #e11d48, #f43f5e, #fb7185) !important;
}
.grid > .service-card:nth-child(6n + 5)::after,
.grid > .milestone-card:nth-child(6n + 5)::after,
.grid > .card-realistic:nth-child(6n + 5)::after,
.grid > .interactive-motion-card:nth-child(6n + 5)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 5):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 5):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(244, 63, 94, 0.20) 0%, rgba(251, 113, 133, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 5):hover,
.grid > .milestone-card:nth-child(6n + 5):hover,
.grid > .card-realistic:nth-child(6n + 5):hover,
.grid > .interactive-motion-card:nth-child(6n + 5):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 5):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 5):hover {
  border-color: rgba(251, 113, 133, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(244, 63, 94, 0.22), 0 0 0 1px rgba(244, 63, 94, 0.25) !important;
}

/* 6th in cycle (Electric Cyan) */
.grid > .service-card:nth-child(6n + 6),
.grid > .milestone-card:nth-child(6n + 6),
.grid > .card-realistic:nth-child(6n + 6),
.grid > .interactive-motion-card:nth-child(6n + 6),
.grid > div[class*="shadow-card"]:nth-child(6n + 6):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"]),
.grid > a[class*="shadow-card"]:nth-child(6n + 6):not([class*="splash-"]):not([class*="accent-"]) {
  border-color: rgba(165, 243, 252, 0.85) !important;
  background: linear-gradient(155deg, rgba(236, 254, 255, 0.85) 0%, #ffffff 42%, rgba(224, 242, 254, 0.5) 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.08), 0 4px 6px -2px rgba(6, 182, 212, 0.04);
}
.grid > .service-card:nth-child(6n + 6)::before,
.grid > .milestone-card:nth-child(6n + 6)::before,
.grid > .card-realistic:nth-child(6n + 6)::before,
.grid > .interactive-motion-card:nth-child(6n + 6)::before,
.grid > div[class*="shadow-card"]:nth-child(6n + 6):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::before,
.grid > a[class*="shadow-card"]:nth-child(6n + 6):not([class*="splash-"]):not([class*="accent-"])::before {
  background: linear-gradient(90deg, #0891b2, #06b6d4, #38bdf8) !important;
}
.grid > .service-card:nth-child(6n + 6)::after,
.grid > .milestone-card:nth-child(6n + 6)::after,
.grid > .card-realistic:nth-child(6n + 6)::after,
.grid > .interactive-motion-card:nth-child(6n + 6)::after,
.grid > div[class*="shadow-card"]:nth-child(6n + 6):not([class*="bg-slate-9"]):not([class*="bg-gray-9"]):not([class*="bg-black"]):not([class*="from-slate-9"]):not([class*="splash-"]):not([class*="accent-"])::after,
.grid > a[class*="shadow-card"]:nth-child(6n + 6):not([class*="splash-"]):not([class*="accent-"])::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.20) 0%, rgba(56, 189, 248, 0.06) 50%, transparent 75%) !important;
}
.grid > .service-card:nth-child(6n + 6):hover,
.grid > .milestone-card:nth-child(6n + 6):hover,
.grid > .card-realistic:nth-child(6n + 6):hover,
.grid > .interactive-motion-card:nth-child(6n + 6):hover,
.grid > div[class*="shadow-card"]:nth-child(6n + 6):hover,
.grid > a[class*="shadow-card"]:nth-child(6n + 6):hover {
  border-color: rgba(34, 211, 238, 0.95) !important;
  box-shadow: 0 20px 35px -10px rgba(6, 182, 212, 0.22), 0 0 0 1px rgba(6, 182, 212, 0.25) !important;
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION VIBRANT COLOR TABS
   -------------------------------------------------------------------------- */
.faq-container > div:nth-child(6n + 1) { 
  border-left: 3.5px solid #2563eb !important; 
  background: linear-gradient(90deg, rgba(239, 246, 255, 0.6) 0%, #ffffff 35%) !important; 
}
.faq-container > div:nth-child(6n + 2) { 
  border-left: 3.5px solid #f97316 !important; 
  background: linear-gradient(90deg, rgba(255, 247, 237, 0.6) 0%, #ffffff 35%) !important; 
}
.faq-container > div:nth-child(6n + 3) { 
  border-left: 3.5px solid #8b5cf6 !important; 
  background: linear-gradient(90deg, rgba(245, 243, 255, 0.6) 0%, #ffffff 35%) !important; 
}
.faq-container > div:nth-child(6n + 4) { 
  border-left: 3.5px solid #10b981 !important; 
  background: linear-gradient(90deg, rgba(236, 253, 245, 0.6) 0%, #ffffff 35%) !important; 
}
.faq-container > div:nth-child(6n + 5) { 
  border-left: 3.5px solid #f43f5e !important; 
  background: linear-gradient(90deg, rgba(255, 241, 242, 0.6) 0%, #ffffff 35%) !important; 
}
.faq-container > div:nth-child(6n + 6) { 
  border-left: 3.5px solid #06b6d4 !important; 
  background: linear-gradient(90deg, rgba(236, 254, 255, 0.6) 0%, #ffffff 35%) !important; 
}

/* --------------------------------------------------------------------------
   ACCIDENT MODE 8-INCIDENT COLORFUL BUTTONS
   -------------------------------------------------------------------------- */
.incident-btn:nth-child(1) { border-color: rgba(6, 182, 212, 0.6); background: rgba(236, 254, 255, 0.7); }
.incident-btn:nth-child(2) { border-color: rgba(37, 99, 235, 0.6); background: rgba(239, 246, 255, 0.7); }
.incident-btn:nth-child(3) { border-color: rgba(139, 92, 246, 0.6); background: rgba(245, 243, 255, 0.7); }
.incident-btn:nth-child(4) { border-color: rgba(249, 115, 22, 0.6); background: rgba(255, 247, 237, 0.7); }
.incident-btn:nth-child(5) { border-color: rgba(16, 185, 129, 0.6); background: rgba(236, 253, 245, 0.7); }
.incident-btn:nth-child(6) { border-color: rgba(99, 102, 241, 0.6); background: rgba(238, 242, 255, 0.7); }
.incident-btn:nth-child(7) { border-color: rgba(217, 70, 239, 0.6); background: rgba(253, 244, 255, 0.7); }
.incident-btn:nth-child(8) { border-color: rgba(244, 63, 94, 0.6); background: rgba(255, 241, 242, 0.7); }

.incident-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.12);
}

/* --------------------------------------------------------------------------
   AIFIX QUICK ISSUE SHORTCUT CHIPS (COMPACT 2-LINE ENTERPRISE DESIGN)
   -------------------------------------------------------------------------- */
.issue-shortcut-btn {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  line-height: 1.25 !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease-in-out !important;
}

.issue-shortcut-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1);
}

/* Individual Chip Color Themes (Category A & B) */
.chip-cyan    { border-color: rgba(6, 182, 212, 0.5) !important; color: #0891b2 !important; background: rgba(236, 254, 255, 0.95) !important; }
.chip-amber   { border-color: rgba(245, 158, 11, 0.5) !important; color: #b45309 !important; background: rgba(254, 243, 199, 0.95) !important; }
.chip-orange  { border-color: rgba(249, 115, 22, 0.5) !important; color: #c2410c !important; background: rgba(255, 237, 213, 0.95) !important; }
.chip-emerald { border-color: rgba(16, 185, 129, 0.5) !important; color: #047857 !important; background: rgba(209, 250, 229, 0.95) !important; }
.chip-rose    { border-color: rgba(244, 63, 94, 0.5) !important; color: #be123c !important; background: rgba(255, 228, 230, 0.95) !important; }
.chip-red     { border-color: rgba(239, 68, 68, 0.5) !important; color: #b91c1c !important; background: rgba(254, 226, 226, 0.95) !important; }
.chip-violet  { border-color: rgba(139, 92, 246, 0.5) !important; color: #6d28d9 !important; background: rgba(237, 233, 254, 0.95) !important; }
.chip-indigo  { border-color: rgba(99, 102, 241, 0.5) !important; color: #4338ca !important; background: rgba(224, 231, 255, 0.95) !important; }
.chip-sky     { border-color: rgba(14, 165, 233, 0.5) !important; color: #0369a1 !important; background: rgba(240, 249, 255, 0.95) !important; }

/* Legacy / fallback nth-child selectors (1-9) */
.ai-triage-chips .issue-shortcut-btn:nth-child(1) { border-color: rgba(6, 182, 212, 0.5) !important; color: #0891b2 !important; background: rgba(236, 254, 255, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(2) { border-color: rgba(245, 158, 11, 0.5) !important; color: #b45309 !important; background: rgba(254, 243, 199, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(3) { border-color: rgba(249, 115, 22, 0.5) !important; color: #c2410c !important; background: rgba(255, 237, 213, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(4) { border-color: rgba(16, 185, 129, 0.5) !important; color: #047857 !important; background: rgba(209, 250, 229, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(5) { border-color: rgba(244, 63, 94, 0.5) !important; color: #be123c !important; background: rgba(255, 228, 230, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(6) { border-color: rgba(239, 68, 68, 0.5) !important; color: #b91c1c !important; background: rgba(254, 226, 226, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(7) { border-color: rgba(139, 92, 246, 0.5) !important; color: #6d28d9 !important; background: rgba(237, 233, 254, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(8) { border-color: rgba(99, 102, 241, 0.5) !important; color: #4338ca !important; background: rgba(224, 231, 255, 0.95) !important; }
.ai-triage-chips .issue-shortcut-btn:nth-child(9) { border-color: rgba(14, 165, 233, 0.5) !important; color: #0369a1 !important; background: rgba(240, 249, 255, 0.95) !important; }

/* Scrollbar None Utility for Seamless Horizontal Pill Containers */
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.scrollbar-none {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}


/* --------------------------------------------------------------------------
   HERO AI DIAGNOSIS PLAYGROUND PILL BAR (2X HEIGHT ENHANCED)
   -------------------------------------------------------------------------- */
#heroAiPlaygroundForm {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.hero-ai-pill-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 76px !important;
  border-radius: 26px !important;
  -webkit-border-radius: 26px !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  .hero-ai-pill-bar {
    min-height: 84px !important;
  }
}

#heroAiPlaygroundInput {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;
  font-size: 1.0625rem !important;
  line-height: 1.4 !important;
}

@media (max-width: 639px) {
  #heroAiPlaygroundInput {
    font-size: 0.9375rem !important;
  }
}

#heroAiPlaygroundForm button[type="submit"],
#heroAiGenerateBtn {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  min-height: 48px !important;
}

@media (min-width: 640px) {
  #heroAiPlaygroundForm button[type="submit"],
  #heroAiGenerateBtn {
    min-height: 54px !important;
  }
}

#heroAiVoiceBtn {
  width: 2.5rem !important;
  height: 2.5rem !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  margin: 0 !important;
  font-size: 1rem !important;
}

@media (min-width: 640px) {
  #heroAiVoiceBtn {
    width: 2.875rem !important;
    height: 2.875rem !important;
    font-size: 1.125rem !important;
  }
}

/* ==========================================================================
   Voice Dictate & Speech Synthesis Audio Visualizer Styles
   ========================================================================== */
.mic-active-recording {
  background-color: #fff1f2 !important;
  border-color: #f43f5e !important;
  color: #e11d48 !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25) !important;
  animation: micPulseGlow 1.4s ease-in-out infinite !important;
}

@keyframes micPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(244, 63, 94, 0.15);
    transform: scale(1.02);
  }
}

.speaking-active-pill {
  background-color: #fdf2f8 !important;
  border-color: #f472b6 !important;
  color: #be185d !important;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2) !important;
}

.audio-equalizer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.audio-equalizer span {
  display: inline-block;
  width: 2.5px;
  background-color: currentColor;
  border-radius: 9999px;
  animation: eqBar 0.8s ease-in-out infinite alternate;
}

.audio-equalizer span:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.audio-equalizer span:nth-child(2) { height: 12px; animation-delay: 0.3s; }
.audio-equalizer span:nth-child(3) { height: 8px; animation-delay: 0.2s; }

@keyframes eqBar {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* -------------------------------------------------------------------------- */
/* Pay Now Modal & Verification Animations                                    */
/* -------------------------------------------------------------------------- */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

.animate-shake {
  animation: shakeX 0.4s ease-in-out !important;
}

#payNowModal {
  transition: opacity 0.25s ease-in-out;
}

#payNowModal.hidden {
  display: none !important;
}

#payNowModal:not(.hidden) {
  display: flex !important;
}

#payNowModal .pay-modal-dialog {
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------- */
/* Auto-Dismissing Top Announcement Bar (Mobile only: 5s after page load)      */
/* -------------------------------------------------------------------------- */
.top-announcement-bar {
  transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease,
              padding 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              margin 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
  max-height: 180px;
  overflow: hidden;
  will-change: max-height, opacity, padding;
}

/* Mobile auto-dismiss animation */
@media (max-width: 767.98px) {
  .top-announcement-bar.banner-dismissed {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-bottom-width: 0 !important;
    border-color: transparent !important;
    pointer-events: none !important;
  }
}

/* On desktop & wide screens, the header banner stays permanently visible */
@media (min-width: 768px) {
  .top-announcement-bar {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .top-announcement-bar.banner-dismissed {
    max-height: none !important;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}