/* AutoMashwara Modern Global Stylesheet & Design System */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,600;1,700;1,800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --brand-purple: #582B7C;
  --brand-purple-dark: #231435;
  --brand-purple-deep: #180D26;
  --brand-purple-light: #F3EEFB;
  --brand-gold: #E5A93C;
  --brand-gold-hover: #C4891E;
  --brand-cream: #FAF6EE;
  --brand-cream-light: #FCFAF5;
  --obsidian-bg: #130924;
  --obsidian-surface: #180D2B;
  --obsidian-card: #210E3B;
  --gold-accent: #E5A93C;
}

/* Critical Typography & Headings: Frame-0 Zero-Flash Font Enforcement */
h1, h2, h3, h4, .font-display, .font-heading {
  font-family: 'Outfit', sans-serif !important;
  line-height: 1.25;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Critical Button & Card Radii: Frame-0 Pill & Radius Guard */
.btn-pill, .pill-btn, [data-quiz-trigger], a.rounded-full, button.rounded-full {
  border-radius: 9999px !important;
}

.rounded-2xl {
  border-radius: 16px !important;
}

.rounded-3xl, .card {
  border-radius: 24px !important;
}

/* Protect category filter cards and container buttons from distorted oval borders */
button[onclick*="selectCategoryFilter"], .category-filter-card {
  border-radius: 18px !important;
}

/* Critical Announcement Bar Guard: Suppresses initial render when disabled */
#announcement-bar, [data-cms-section="announcement.enabled"] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* Accessibility: WCAG 2.4.7 High-Contrast Visible Focus Rings for Keyboard Navigation */
:focus-visible {
  outline: 2px solid var(--brand-gold, #E5A93C) !important;
  outline-offset: 3px !important;
}

/* Accessibility: Skip-to-Content Link for Screen Readers & Keyboard Navigation */
.skip-to-content-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 999999;
  padding: 0.625rem 1.25rem;
  background-color: var(--brand-purple, #582B7C);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-to-content-link:focus {
  top: 1rem;
  outline: 2px solid var(--brand-gold, #E5A93C);
}

/* Accessibility: Respect User Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-progress-container,
  .scroll-car-indicator,
  .hero-ambient-arc,
  .hero-ambient-arc-2 {
    display: none !important;
  }
}

/* Instant Anti-FOUC: Suppress transitions during initial page load & theme hydration */
html.theme-loading *,
html.theme-loading *::before,
html.theme-loading *::after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Italic Brand Accents */
.italic-brand, .text-italic-purple {
  font-style: italic;
  color: #582B7C;
}

.dark .italic-brand, .dark .text-italic-purple {
  color: #c084fc;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom Range Sliders */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: var(--brand-purple);
  cursor: pointer;
  margin-top: -6px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, background-color 0.15s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #451b66;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 9999px;
}

.dark input[type=range]::-webkit-slider-runnable-track {
  background: #334155;
}

/* Halftone dots for Methodology & Hero */
.halftone-dots-left {
  background-image: radial-gradient(circle, #CF992D 1.5px, transparent 1.5px), radial-gradient(circle, #5B1C6D 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,1) 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at bottom left, rgba(0,0,0,1) 20%, transparent 70%);
}

.halftone-dots-right {
  background-image: radial-gradient(circle, #5B1C6D 1.5px, transparent 1.5px), radial-gradient(circle, #CF992D 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,1) 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at bottom right, rgba(0,0,0,1) 20%, transparent 70%);
}

/* Toast Notifications (Positioned safely above floating back-to-top button) */
#toast-container {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 90vw;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: #231435;
  color: #ffffff;
  border-left: 4px solid var(--brand-gold);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  font-size: 13px;
  font-weight: 600;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.25s ease;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast.hiding {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Action Safe Z-Index */
.floating-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
}

/* Car Card Hover Effects & Clean Elevation */
.car-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.car-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(88, 43, 124, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
}

.dark .car-card:hover {
  box-shadow: 0 16px 32px -8px rgba(168, 85, 247, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.8);
}

/* Sticky Sidebar Helper (No overflow clipping) */
.sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 6rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

/* Dark Mode Overrides */
.dark body {
  background-color: #0b0713 !important;
  color: #f1f5f9 !important;
}

.dark header {
  background-color: rgba(11, 7, 19, 0.95) !important;
  border-color: #1e132e !important;
}

.dark .bg-white {
  background-color: #150e24 !important;
}

.dark .bg-gray-50, .dark .bg-slate-50, .dark .bg-\[\#fafafd\] {
  background-color: #0b0713 !important;
}

.dark .bg-gray-100 {
  background-color: #1b122c !important;
}

.dark .border-gray-100, .dark .border-gray-200, .dark .border-slate-100, .dark .border-slate-200 {
  border-color: #241838 !important;
}

.dark .text-slate-900, .dark .text-gray-900, .dark .text-gray-800 {
  color: #f8fafc !important;
}

.dark .text-slate-600, .dark .text-gray-600, .dark .text-gray-500 {
  color: #94a3b8 !important;
}

.dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.6) !important;
}

/* ========================================================
   Scroll-Driven Progress Bar with Realistic Driving Car Indicator
   (White/Purple mix at start, deepening into rich royal purple)
   ======================================================== */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 99999;
  pointer-events: none;
  overflow: visible;
}

.scroll-progress-track {
  display: none !important;
  height: 0px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dark .scroll-progress-track {
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.scroll-progress-bar {
  position: absolute;
  top: 18px;
  left: 0;
  height: 0px !important;
  width: 0%;
  border-radius: 9999px;
  background: transparent !important;
  box-shadow: none !important;
  transition: width 0.08s ease-out;
  overflow: visible;
}

.scroll-car-indicator {
  position: absolute;
  right: -30px;
  top: -24px;
  width: 64px;
  height: 29px;
  pointer-events: none;
  z-index: 100000;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45));
  transition: transform 0.15s ease-out;
  will-change: transform, right;
}

/* Dynamic realistic car animations on scroll */
.scroll-car-indicator.is-moving {
  animation: carDrivingSuspension 0.35s ease-in-out infinite alternate;
}

.scroll-car-indicator.is-moving .wheel-spokes {
  animation: spinWheel 0.28s linear infinite;
}

.scroll-car-indicator.is-moving .car-beam-cone {
  animation: headlightPulse 0.5s ease-in-out infinite alternate;
}

.scroll-car-indicator.is-moving .exhaust-smoke {
  animation: exhaustPuff 0.35s ease-out infinite;
}

@keyframes spinWheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes carDrivingSuspension {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.8px) rotate(-0.6deg);
  }
  100% {
    transform: translateY(0.4px) rotate(0.4deg);
  }
}

@keyframes headlightPulse {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

@keyframes exhaustPuff {
  0% {
    transform: translateX(0) scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: translateX(-5px) scale(1.5);
    opacity: 0;
  }
}

/* ========================================================
   Large Showcase Car Cards (Matching dev.automashwara.com)
   ======================================================== */
.showcase-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(88, 43, 124, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.05);
}

.showcase-badge-circle {
  box-shadow: 0 8px 16px -2px rgba(78, 29, 112, 0.45);
}

/* ========================================================
   Methodology Taller Step Cards & Realistic 3D Arrows
   ======================================================== */
.methodology-step-card {
  min-height: 540px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

@media (min-width: 1024px) {
  .methodology-step-card {
    min-height: 590px;
  }
}

.methodology-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(88, 43, 124, 0.18), 0 12px 24px -8px rgba(0, 0, 0, 0.06);
}

.realistic-arrow-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.realistic-3d-arrow {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
  will-change: transform, opacity;
}

.realistic-arrow-wrapper:hover .realistic-3d-arrow {
  transform: scale(1.18) translateX(4px);
  filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.6));
}

@keyframes arrowFlowPulse1 {
  0%, 100% { transform: translateX(0); opacity: 0.82; }
  25% { transform: translateX(5px); opacity: 1; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7)); }
  50% { transform: translateX(0); opacity: 0.82; }
}

@keyframes arrowFlowPulse2 {
  0%, 25%, 100% { transform: translateX(0); opacity: 0.82; }
  50% { transform: translateX(5px); opacity: 1; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7)); }
  75% { transform: translateX(0); opacity: 0.82; }
}

@keyframes arrowFlowPulse3 {
  0%, 50%, 100% { transform: translateX(0); opacity: 0.82; }
  75% { transform: translateX(5px); opacity: 1; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.7)); }
}

.arrow-pulse-1 {
  animation: arrowFlowPulse1 2.4s ease-in-out infinite;
}

.arrow-pulse-2 {
  animation: arrowFlowPulse2 2.4s ease-in-out infinite;
}

.arrow-pulse-3 {
  animation: arrowFlowPulse3 2.4s ease-in-out infinite;
}

.flow-track-pill {
  box-shadow: 0 10px 30px -5px rgba(88, 43, 124, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
}

/* ========================================================
   Global Clean Dropdowns (No Duplicate Arrows & Smooth 3D Animation)
   ======================================================== */
select,
select.appearance-none,
select:focus,
select:active {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Smooth Interactive Select Transition */
select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Chevron default position & spring transition */
.relative > i.fa-chevron-down,
.relative > i.fa-angle-down,
.relative > .dropdown-chevron {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease, opacity 0.25s ease !important;
  transform-origin: center center !important;
  pointer-events: none !important;
}

/* When dropdown is focused/clicked, smoothly flip chevron 180deg with golden accent */
.relative:focus-within > i.fa-chevron-down,
.relative:focus-within > i.fa-angle-down,
.relative:focus-within > .dropdown-chevron,
.relative.dropdown-open > i.fa-chevron-down,
.relative.dropdown-open > i.fa-angle-down,
.relative.dropdown-open > .dropdown-chevron,
select:focus ~ i.fa-chevron-down,
select:focus + i.fa-chevron-down,
select:active ~ i.fa-chevron-down {
  transform: translateY(-50%) rotate(180deg) scale(1.15) !important;
  color: #d89b27 !important;
  opacity: 1 !important;
}

/* Select hover & focus glows */
.relative select:hover {
  border-color: rgba(216, 155, 39, 0.5) !important;
}

.relative select:focus {
  outline: none !important;
  border-color: #d89b27 !important;
  box-shadow: 0 0 0 3px rgba(216, 155, 39, 0.28), 0 8px 20px -4px rgba(88, 43, 124, 0.25) !important;
}

/* ========================================================
   Admin Sidebar Realistic 3D Icon Pods & Accordion Animations
   ======================================================== */
.admin-icon-pod {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, background 0.25s ease;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}

.admin-icon-pod::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Individual Realistic Colorways */
.admin-icon-pod.pod-dashboard {
  background: linear-gradient(135deg, #F3EEFB 0%, #E9D5FF 100%);
  color: #582B7C;
}
.dark .admin-icon-pod.pod-dashboard {
  background: linear-gradient(135deg, #2D1845 0%, #1A0D2A 100%);
  color: #D8B4FE;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.admin-icon-pod.pod-users {
  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
  color: #4F46E5;
}
.dark .admin-icon-pod.pod-users {
  background: linear-gradient(135deg, #1E1B4B 0%, #15123A 100%);
  color: #A5B4FC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.admin-icon-pod.pod-vehicles {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  color: #B45309;
}
.dark .admin-icon-pod.pod-vehicles {
  background: linear-gradient(135deg, #452405 0%, #2A1402 100%);
  color: #FCD34D;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.admin-icon-pod.pod-moderation {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  color: #DC2626;
}
.dark .admin-icon-pod.pod-moderation {
  background: linear-gradient(135deg, #451010 0%, #290808 100%);
  color: #FCA5A5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.admin-icon-pod.pod-settings {
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  color: #475569;
}
.dark .admin-icon-pod.pod-settings {
  background: linear-gradient(135deg, #282433 0%, #181520 100%);
  color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.admin-icon-pod.pod-theme-customizer {
  background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
  color: #9333EA;
}
.dark .admin-icon-pod.pod-theme-customizer {
  background: linear-gradient(135deg, #3B1B54 0%, #241135 100%);
  color: #D8B4FE;
  box-shadow: 0 2px 8px rgba(147, 51, 234, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

/* Active tab badge glow */
.sidebar-tab-btn[class*="bg-[#d89b27]"] .admin-icon-pod,
.sidebar-tab-btn.active .admin-icon-pod {
  background: #FFFFFF !important;
  color: #B45309 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 1px #FFFFFF !important;
}

/* Hover micro-dynamics */
.sidebar-tab-btn:hover .admin-icon-pod {
  transform: translateY(-2px) scale(1.06);
}

/* Sub-items mini realistic pods */
.admin-sub-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(88, 43, 124, 0.08);
  color: #582B7C;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.dark .admin-sub-icon {
  background: rgba(216, 180, 254, 0.12);
  color: #D8B4FE;
}
.vehicle-sub-btn:hover .admin-sub-icon,
.vehicle-sub-btn.active .admin-sub-icon {
  background: #D89B27;
  color: #FFFFFF;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(216, 155, 39, 0.4);
}

/* Vehicles Accordion Smooth Slide-Down Animation */
#vehicles-sub-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

#vehicles-sub-menu.sub-menu-open {
  max-height: 260px;
  opacity: 1;
  overflow: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#vehicles-caret-icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
  transform-origin: center center;
}

#vehicles-caret-icon.caret-rotated {
  transform: rotate(180deg) !important;
}

/* ========================================================
   Entrance & Scroll Reveal Animation Suite (Fail-Safe)
   ======================================================== */
.reveal-fade-up,
.reveal-fade-down,
.reveal-fade-left,
.reveal-fade-right {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Revealed active state */
.reveal-fade-up.revealed,
.reveal-fade-down.revealed,
.reveal-fade-left.revealed,
.reveal-fade-right.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Stagger Delay Utilities */
.anim-delay-75 { transition-delay: 75ms !important; }
.anim-delay-100 { transition-delay: 100ms !important; }
.anim-delay-150 { transition-delay: 150ms !important; }
.anim-delay-200 { transition-delay: 200ms !important; }
.anim-delay-250 { transition-delay: 250ms !important; }
.anim-delay-300 { transition-delay: 300ms !important; }
.anim-delay-350 { transition-delay: 350ms !important; }
.anim-delay-400 { transition-delay: 400ms !important; }
.anim-delay-450 { transition-delay: 450ms !important; }
.anim-delay-500 { transition-delay: 500ms !important; }
.anim-delay-600 { transition-delay: 600ms !important; }
.anim-delay-700 { transition-delay: 700ms !important; }

/* Holographic Car Stage & Telemetry Badges */
.hero-stage-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-podium-glow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  height: 90px;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.45) 0%, rgba(229, 169, 60, 0.25) 35%, rgba(19, 9, 36, 0) 70%);
  filter: blur(14px);
  border-radius: 50%;
  pointer-events: none;
}

.hero-podium-ring {
  position: absolute;
  bottom: 11%;
  left: 50%;
  transform: translateX(-50%) rotateX(68deg);
  width: 90%;
  height: 180px;
  border: 1.5px solid rgba(229, 169, 60, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.35), inset 0 0 20px rgba(229, 169, 60, 0.2);
  pointer-events: none;
}

.telemetry-chip {
  position: absolute;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(24, 13, 43, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 169, 60, 0.35);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  animation: telemetryFloat 4s ease-in-out infinite alternate;
}

@keyframes telemetryFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* ========================================================
   Reference Screens Design Language: Pills, Badges & Docks
   ======================================================== */

/* Screen 1 & Screen 2: Luxury Pill Buttons */
.pill-btn-purple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6B21A8 0%, #582B7C 100%);
  color: #FFFFFF !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(88, 43, 124, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.pill-btn-purple:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(88, 43, 124, 0.45);
  background: linear-gradient(135deg, #7C2FB8 0%, #632A8E 100%);
}

.pill-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #F59E0B 0%, #D89B27 100%);
  color: #0F071B !important;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(216, 155, 39, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.pill-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(216, 155, 39, 0.5);
  background: linear-gradient(135deg, #FBBF24 0%, #E5A93C 100%);
}

.pill-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  backdrop-blur: 8px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.pill-btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Arrow circle inside pill buttons */
.pill-arrow-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.pill-btn-purple:hover .pill-arrow-circle,
.pill-btn-gold:hover .pill-arrow-circle {
  transform: translateX(2px);
}

/* Rank Badges (Screens 2, 4, 5) */
.badge-rank-1 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #582B7C;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(88, 43, 124, 0.3);
}

.badge-rank-2 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #D89B27;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(216, 155, 39, 0.3);
}

.badge-rank-3 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #251238;
  color: #E9D5FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Screen 1 Ambient Arc Glow */
.hero-ambient-arc {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1.5px solid rgba(216, 155, 39, 0.15);
  box-shadow: 0 0 100px rgba(107, 33, 168, 0.25);
  pointer-events: none;
}

.hero-ambient-arc-2 {
  position: absolute;
  top: -60px;
  right: -20px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px dashed rgba(168, 85, 247, 0.2);
  pointer-events: none;
}

/* Mobile Floating App Dock (Screen 6) - Strictly mobile only, hidden on tablet & desktop */
@media (min-width: 768px) {
  .mobile-app-dock,
  nav.mobile-app-dock {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .mobile-app-dock {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 380px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 9999px;
    padding: 8px 18px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 16px 36px -6px rgba(19, 9, 36, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);
    z-index: 45;
  }
}

.dark .mobile-app-dock {
  background: rgba(24, 13, 43, 0.92);
  border-color: rgba(107, 33, 168, 0.35);
  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.7);
}

.mobile-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #64748B;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 12px;
}
.dark .mobile-dock-item {
  color: #94A3B8;
}
.mobile-dock-item.active {
  color: #582B7C;
}
.dark .mobile-dock-item.active {
  color: #D8B4FE;
}
.mobile-dock-item i {
  font-size: 16px;
}

/* ========================================================
   LIGHT THEME GLOBAL & HOW-IT-WORKS COMPLETE PRECISION SYSTEM
   When documentElement does NOT have .dark (i.e. Light Mode)
   ======================================================== */
html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) body {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* Header & Nav in light mode */
html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html:not(.dark) header nav a {
  color: #475569 !important;
}

html:not(.dark) header nav a:hover,
html:not(.dark) header nav a.active {
  color: #D97706 !important;
}

html:not(.dark) [data-mobile-menu] > div {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}

html:not(.dark) [data-mobile-menu] a {
  color: #334155 !important;
}

/* --------------------------------------------------------
   COMPLETE PURE-WHITE LIGHT MODE SYSTEM ("sara white ho jaye")
   Ensures ALL cards, sections, cockpit modules, and containers
   become pure white (#FFFFFF) with high-contrast readable text.
   -------------------------------------------------------- */

/* 1. All Dark Containers & Cards become 100% Pure White in Light Mode */
html:not(.dark) #hero-section,
html:not(.dark) section.relative[class*="from-[#130924]"],
html:not(.dark) [class*="bg-[#180D2B]"],
html:not(.dark) [class*="bg-[#130924]"],
html:not(.dark) [class*="bg-[#120722]"],
html:not(.dark) [class*="bg-[#160B28]"],
html:not(.dark) [class*="bg-[#1B0E33]"],
html:not(.dark) [class*="bg-[#25123A]"],
html:not(.dark) [class*="from-[#160B28]"],
html:not(.dark) [class*="from-[#1C0F35]"],
html:not(.dark) [class*="from-[#210E3B]"],
html:not(.dark) .methodology-step-card,
html:not(.dark) #methodology {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}

/* 2. Headings inside any card or hero turn crisp dark slate */
html:not(.dark) #hero-section h1,
html:not(.dark) #hero-section h2,
html:not(.dark) #hero-section h3,
html:not(.dark) #hero-section h4,
html:not(.dark) [class*="bg-[#180D2B]"] h1,
html:not(.dark) [class*="bg-[#180D2B]"] h2,
html:not(.dark) [class*="bg-[#180D2B]"] h3,
html:not(.dark) [class*="bg-[#180D2B]"] h4,
html:not(.dark) [class*="from-[#160B28]"] h1,
html:not(.dark) [class*="from-[#160B28]"] h2,
html:not(.dark) [class*="from-[#160B28]"] h3,
html:not(.dark) [class*="from-[#160B28]"] h4,
html:not(.dark) [class*="from-[#1C0F35]"] h1,
html:not(.dark) [class*="from-[#1C0F35]"] h2,
html:not(.dark) [class*="from-[#1C0F35]"] h3,
html:not(.dark) [class*="from-[#1C0F35]"] h4,
html:not(.dark) [class*="bg-[#25123A]"] h1,
html:not(.dark) [class*="bg-[#25123A]"] h2,
html:not(.dark) [class*="bg-[#25123A]"] h3,
html:not(.dark) [class*="bg-[#25123A]"] h4,
html:not(.dark) [class*="from-[#210E3B]"] h1,
html:not(.dark) [class*="from-[#210E3B]"] h2,
html:not(.dark) [class*="from-[#210E3B]"] h3,
html:not(.dark) [class*="from-[#210E3B]"] h4,
html:not(.dark) .methodology-step-card h1,
html:not(.dark) .methodology-step-card h2,
html:not(.dark) .methodology-step-card h3,
html:not(.dark) .methodology-step-card h4,
html:not(.dark) #methodology h1,
html:not(.dark) #methodology h2,
html:not(.dark) #methodology h3,
html:not(.dark) #methodology h4 {
  color: #0F172A !important;
}

/* 3. Paragraphs & body copy inside cards & hero */
html:not(.dark) #hero-section p,
html:not(.dark) [class*="bg-[#180D2B]"] p,
html:not(.dark) [class*="from-[#160B28]"] p,
html:not(.dark) [class*="from-[#1C0F35]"] p,
html:not(.dark) [class*="bg-[#25123A]"] p,
html:not(.dark) [class*="from-[#210E3B]"] p,
html:not(.dark) .methodology-step-card p,
html:not(.dark) #methodology p {
  color: #475569 !important;
}

/* 4. Gold text accents become high-contrast amber */
html:not(.dark) [class*="text-[#E5A93C]"],
html:not(.dark) [class*="text-amber-"] {
  color: #D97706 !important;
}

/* 5. Card Inner Dividers */
html:not(.dark) [class*="border-purple-900"],
html:not(.dark) [class*="border-purple-800"],
html:not(.dark) [class*="border-purple-500"],
html:not(.dark) [class*="from-[#160B28]"] [class*="border-white"],
html:not(.dark) [class*="from-[#210E3B]"] [class*="border-white"],
html:not(.dark) .methodology-step-card ul,
html:not(.dark) .methodology-step-card .border-purple-900\/60 {
  border-color: #F1F5F9 !important;
}

/* 6. Step Card Watermark Numbers */
html:not(.dark) .methodology-step-card .text-purple-900\/50,
html:not(.dark) [class*="text-purple-900\/50"] {
  color: #E2E8F0 !important;
}

/* 7. Inner Icon Pods & Chips */
html:not(.dark) .methodology-step-card .w-16.h-16,
html:not(.dark) [class*="bg-[#180D2B]"] .w-14,
html:not(.dark) [class*="bg-[#180D2B]"] .w-12 {
  background-color: #F3EEFB !important;
  border-color: #DDD6FE !important;
  color: #582B7C !important;
}

html:not(.dark) .methodology-step-card .bg-purple-950\/80,
html:not(.dark) [class*="bg-[#180D2B]"] [class*="bg-purple-950"] {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}

/* 8. Form Controls Inside Light Mode */
html:not(.dark) select,
html:not(.dark) textarea,
html:not(.dark) input,
html:not(.dark) #input-vehicle-model,
html:not(.dark) #input-experience {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html:not(.dark) select option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}

/* 9. Methodology Hero & Showcase Cards */
html:not(.dark) #methodology-badge {
  background-color: #F3EEFB !important;
  border-color: #DDD6FE !important;
}
html:not(.dark) #methodology-badge span:first-child + span {
  color: #582B7C !important;
}
html:not(.dark) #methodology .rounded-3xl {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07) !important;
}
html:not(.dark) #methodology .rounded-xl {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* 10. Smartphone App Mockup */
html:not(.dark) .mobile-phone-chassis {
  background: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
html:not(.dark) .mobile-phone-screen {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
html:not(.dark) .telemetry-chip {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}
html:not(.dark) .telemetry-chip * {
  color: #0F172A !important;
}
html:not(.dark) .telemetry-chip i[class*="text-amber"],
html:not(.dark) .telemetry-chip i[class*="text-[#D97706]"],
html:not(.dark) .telemetry-chip i[class*="text-[#E5A93C]"] {
  color: #D97706 !important;
}

/* Inactive Car Switcher Tabs */
html:not(.dark) #hero-tab-tesla,
html:not(.dark) #hero-tab-mazda,
html:not(.dark) [id^="hero-tab-"]:not([class*="bg-[#E5A93C]"]) {
  color: #334155 !important;
}
html:not(.dark) [id^="hero-tab-"]:not([class*="bg-[#E5A93C]"]):hover {
  color: #0F172A !important;
}
html:not(.dark) #hero-tab-rav4.bg-\[\#E5A93C\],
html:not(.dark) [id^="hero-tab-"][class*="bg-[#E5A93C]"] {
  background-color: #E5A93C !important;
  color: #0F071B !important;
}

/* 11. Reliability Leaderboard in Light Mode */
html:not(.dark) .lb-tab-btn:not(.active) {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}
html:not(.dark) .lb-tab-btn:not(.active):hover {
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}
html:not(.dark) #leaderboard-body tr {
  border-color: #F1F5F9 !important;
}
html:not(.dark) #leaderboard-body tr:hover {
  background-color: #F8FAFC !important;
}
html:not(.dark) #leaderboard-body {
  color: #0F172A !important;
}
html:not(.dark) section:has(#leaderboard-body) h2 {
  color: #0F172A !important;
}
html:not(.dark) section:has(#leaderboard-body) p {
  color: #64748B !important;
}
html:not(.dark) section:has(#leaderboard-body) thead tr {
  border-color: #E2E8F0 !important;
}
html:not(.dark) section:has(#leaderboard-body) thead th {
  color: #B45309 !important;
}

/* 12. Flow Track Pill */
html:not(.dark) .flow-track-pill {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}
html:not(.dark) .flow-track-pill div {
  color: #0F172A !important;
}

/* 13. Footer */
html:not(.dark) footer {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}
html:not(.dark) footer h4 {
  color: #0F172A !important;
}
html:not(.dark) footer a {
  color: #64748B !important;
}
html:not(.dark) footer a:hover {
  color: #582B7C !important;
}
html:not(.dark) footer .border-t {
  border-color: #E2E8F0 !important;
}

/* 14. Decision Progress Section in Light Mode */
html:not(.dark) [class*="from-[#160B28]"] span#progress-gauge-percent,
html:not(.dark) [class*="from-[#160B28]"] div.font-bold.text-white {
  color: #0F172A !important;
}
html:not(.dark) [class*="from-[#160B28]"] span#progress-gauge-status {
  color: #475569 !important;
}
html:not(.dark) #progress-badge-text {
  background-color: #F3E8FF !important;
  color: #6B21A8 !important;
  border-color: #D8B4FE !important;
}
html:not(.dark) [class*="from-[#160B28]"] [id^="progress-badge-"]:not([class*="text-[#E5A93C]"]) {
  color: #64748B !important;
}
html:not(.dark) [class*="from-[#160B28]"] div.bg-white\/5 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
html:not(.dark) button[onclick="resetDecisionProgress()"] {
  color: #64748B !important;
}
html:not(.dark) button[onclick="resetDecisionProgress()"]:hover {
  color: #DC2626 !important;
}
html:not(.dark) .text-italic-purple {
  color: #582B7C !important;
  font-weight: 900 !important;
}

/* Community Forum Hero Banner in Light Mode */
html:not(.dark) [data-cms-section="communityPage.hero"],
html:not(.dark) section.relative[class*="from-[#130924]"] {
  background: linear-gradient(180deg, #FAF7FF 0%, #FFFFFF 100%) !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] h1,
html:not(.dark) section.relative[class*="from-[#130924]"] h1 {
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] p,
html:not(.dark) section.relative[class*="from-[#130924]"] p {
  color: #475569 !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] .inline-flex.rounded-full,
html:not(.dark) section.relative[class*="from-[#130924]"] .inline-flex.rounded-full {
  background-color: #F3E8FF !important;
  color: #6B21A8 !important;
  border-color: #D8B4FE !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] select,
html:not(.dark) section.relative[class*="from-[#130924]"] select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] select option,
html:not(.dark) section.relative[class*="from-[#130924]"] select option {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="communityPage.hero"] .fa-chevron-down,
html:not(.dark) section.relative[class*="from-[#130924]"] .fa-chevron-down {
  color: #64748B !important;
}

/* 15. Top-Ranked Card 2 (RAV4 Hybrid) in Light Mode */
html:not(.dark) [class*="from-[#210E3B]"] button[title="Save vehicle"] {
  background-color: #FEF3C7 !important;
  color: #D97706 !important;
}
html:not(.dark) [class*="from-[#210E3B]"] div.bg-white\/10 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}
html:not(.dark) [class*="from-[#210E3B]"] div.bg-white\/10 p.text-xs {
  color: #0F172A !important;
}
html:not(.dark) [class*="from-[#210E3B]"] div.bg-white\/10 p.text-\[9px\] {
  color: #64748B !important;
}
html:not(.dark) [class*="from-[#210E3B]"] div.bg-white\/5 {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}
/* 16. Comprehensive Light Mode Universal Text & Card Overrides */
/* 16. Comprehensive Light Mode Headings Only (White text on purple/dark badges strictly protected) */
html:not(.dark) section:not([class*="bg-[#231435]"]):not([class*="from-[#431D60]"]):not([data-cms-section="about.heatLab"]):not([data-cms-section="about.cta"]) h2.text-white,
html:not(.dark) section:not([class*="bg-[#231435]"]):not([class*="from-[#431D60]"]):not([data-cms-section="about.heatLab"]):not([data-cms-section="about.cta"]) h3.text-white,
html:not(.dark) section:not([class*="bg-[#231435]"]):not([class*="from-[#431D60]"]):not([data-cms-section="about.heatLab"]):not([data-cms-section="about.cta"]) h4.text-white,
html:not(.dark) #methodology-steps h2,
html:not(.dark) #methodology-steps h3,
html:not(.dark) #methodology-steps h4 {
  color: #0F172A !important;
}

/* Subtitles, bullet labels, and meta text inside light mode */
html:not(.dark) .methodology-step-card [class*="text-purple-200"],
html:not(.dark) [class*="bg-[#180D2B]"] [class*="text-purple-200"],
html:not(.dark) [class*="from-[#160B28]"] [class*="text-purple-200"],
html:not(.dark) #methodology [class*="text-purple-200"],
html:not(.dark) #methodology-steps [class*="text-purple-200"],
html:not(.dark) section:not([class*="bg-[#231435]"]):not([class*="from-[#431D60]"]):not([data-cms-section="about.heatLab"]):not([data-cms-section="about.cta"]) [class*="text-purple-200"] {
  color: #475569 !important;
}

/* Step card watermark numbers (01, 02, 03, 04) */
html:not(.dark) .methodology-step-card .text-purple-900\/50 {
  color: #CBD5E1 !important;
}

/* Leaderboard in Light Mode */
html:not(.dark) #leaderboard-body tr {
  border-color: #E2E8F0 !important;
}
html:not(.dark) #leaderboard-body tr:hover {
  background-color: #F8FAFC !important;
}
html:not(.dark) #leaderboard-body td div.text-white,
html:not(.dark) #leaderboard-body td div[class*="text-slate-900"] {
  color: #0F172A !important;
}
html:not(.dark) #leaderboard-body td div[class*="text-slate-500"] {
  color: #64748B !important;
}
html:not(.dark) .lb-tab-btn:not(.active) {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}
html:not(.dark) .lb-tab-btn:not(.active):hover {
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* Trust Section & Why users trust Auto Mashwara in Light Mode */
html:not(.dark) section h3.text-2xl.text-white,
html:not(.dark) section h3.font-display.text-white {
  color: #0F172A !important;
}

/* ========================================================
   ABSOLUTE HIGH-PRIORITY BUTTON & BADGE TEXT INTEGRITY ENGINE
   Runs at the bottom of CSS to guarantee that colored CTA buttons
   and avatar letters ALWAYS maintain maximum contrast and readability!
   ======================================================== */

/* Purple CTA Buttons ALWAYS have 100% pure white text */
.pill-btn-purple,
.pill-btn-purple *,
[class*="pill-btn-purple"],
[class*="pill-btn-purple"] *,
button[class*="bg-[#582B7C]"],
button[class*="bg-[#582B7C]"] *,
a[class*="bg-[#582B7C]"],
a[class*="bg-[#582B7C]"] *,
button[class*="bg-[#4A1D6E]"],
button[class*="bg-[#4A1D6E]"] *,
a[class*="bg-[#4A1D6E]"],
a[class*="bg-[#4A1D6E]"] *,
button[class*="from-[#6B21A8]"],
button[class*="from-[#6B21A8]"] *,
a[class*="from-[#6B21A8]"],
a[class*="from-[#6B21A8]"] *,
button[class*="bg-[#6B21A8]"],
button[class*="bg-[#6B21A8]"] *,
a[class*="bg-[#6B21A8]"],
a[class*="bg-[#6B21A8]"] *,
#scroll-to-top,
#scroll-to-top *,
.pill-arrow-circle,
.pill-arrow-circle * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* Sub-labels inside purple buttons */
button[class*="from-[#6B21A8]"] [class*="text-purple-"],
button[class*="bg-[#582B7C]"] [class*="text-purple-"],
.pill-btn-purple [class*="text-purple-"] {
  color: #F3E8FF !important;
}

/* Gold / Amber CTA Buttons ALWAYS have 100% crisp dark text */
.pill-btn-gold,
.pill-btn-gold *,
[data-quiz-trigger][class*="from-[#F59E0B]"],
[data-quiz-trigger][class*="from-[#F59E0B]"] *,
[class*="from-[#F59E0B]"],
[class*="from-[#F59E0B]"] *,
[class*="from-[#D89B27]"],
[class*="from-[#D89B27]"] *,
[class*="from-amber-"],
[class*="from-amber-"] *,
button[class*="bg-[#E5A93C]"],
button[class*="bg-[#E5A93C]"] *,
a[class*="bg-[#E5A93C]"],
a[class*="bg-[#E5A93C]"] *,
#progress-next-btn,
#progress-next-btn *,
.lb-tab-btn.active,
.lb-tab-btn.active * {
  color: #0F071B !important;
  fill: #0F071B !important;
}

/* Outline Pill Button ("Explore How It Works") */
.pill-btn-outline {
  border: 1.5px solid #CBD5E1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .pill-btn-outline {
  background: #FFFFFF !important;
  color: #0F172A !important;
}
html:not(.dark) .pill-btn-outline * {
  color: #0F172A !important;
}
html:not(.dark) .pill-btn-outline i {
  color: #D97706 !important;
}
html:not(.dark) .pill-btn-outline:hover {
  background: #F8FAFC !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

/* Avatar Initial Badges (U, A, M, S) ALWAYS have pure white text */
.ring-2[class*="bg-purple-800"],
.ring-2[class*="bg-amber-600"],
.ring-2[class*="bg-emerald-700"],
.ring-2[class*="bg-indigo-700"],
.ring-2.rounded-full {
  color: #FFFFFF !important;
}

/* Number Badges inside Steps & Milestones (e.g. 01, 02, 03, 04) */
span.w-8.h-8.rounded-full.bg-\[\#582B7C\],
span.w-6.h-6.rounded-lg.bg-\[\#582B7C\],
span[class*="rounded-full"][class*="bg-[#582B7C]"],
span[class*="rounded-lg"][class*="bg-[#582B7C]"] {
  color: #FFFFFF !important;
}

/* Compare Table Column Rank Badges ALWAYS maintain pure white text */
html:not(.dark) [class*="bg-[#150E24]"] .compare-rank-badge,
html:not(.dark) [class*="bg-[#180D2B]"] .compare-rank-badge,
html:not(.dark) [class*="bg-[#180D2B]"] table thead th span.w-6,
html:not(.dark) table thead th span.compare-rank-badge,
html:not(.dark) .compare-rank-badge,
html.dark .compare-rank-badge,
.compare-rank-badge,
.compare-rank-badge *,
table thead th span.w-6,
table thead th span.w-6 *,
span.compare-rank-badge,
/* Milestone Step Badges (01, 02, 03, 04) ALWAYS maintain pure white text */
.milestone-pill-badge,
.milestone-pill-badge *,
html:not(.dark) .milestone-pill-badge,
html:not(.dark) .milestone-pill-badge *,
html:not(.dark) span.milestone-pill-badge,
/* Leaderboard Rank Circles (1, 2, 3) ALWAYS maintain pure white text */
.lb-rank-badge,
.lb-rank-badge *,
#leaderboard-body .lb-rank-badge,
#leaderboard-body .lb-rank-badge *,
html:not(.dark) .lb-rank-badge,
html:not(.dark) .lb-rank-badge *,
html:not(.dark) #leaderboard-body .lb-rank-badge,
html:not(.dark) #leaderboard-body .lb-rank-badge * {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ========================================================
   PURPLE CARDS & SECTIONS WHITE TEXT INTEGRITY
   Guarantees that About Us Desert Heat (50°C), Decision Wizard CTA,
   and any cards retaining deep purple backgrounds ALWAYS have crisp white text!
   ======================================================== */
section[class*="bg-[#231435]"],
section[class*="bg-[#231435]"] *,
section[class*="from-[#431D60]"],
section[class*="from-[#431D60]"] *,
[data-cms-section="about.heatLab"],
[data-cms-section="about.heatLab"] *,
[data-cms-section="about.cta"],
[data-cms-section="about.cta"] *,
html:not(.dark) section[class*="bg-[#231435]"] h2,
html:not(.dark) section[class*="bg-[#231435]"] h3,
html:not(.dark) section[class*="bg-[#231435]"] h4,
html:not(.dark) section[class*="bg-[#231435]"] .text-white,
html:not(.dark) section[class*="from-[#431D60]"] h2,
html:not(.dark) section[class*="from-[#431D60]"] h3,
html:not(.dark) section[class*="from-[#431D60]"] h4,
html:not(.dark) section[class*="from-[#431D60]"] .text-white,
html:not(.dark) [data-cms-section="about.heatLab"] h2,
html:not(.dark) [data-cms-section="about.heatLab"] h3,
html:not(.dark) [data-cms-section="about.heatLab"] h4,
html:not(.dark) [data-cms-section="about.heatLab"] .text-white,
html:not(.dark) [data-cms-section="about.cta"] h2,
html:not(.dark) [data-cms-section="about.cta"] h3,
html:not(.dark) [data-cms-section="about.cta"] h4,
html:not(.dark) [data-cms-section="about.cta"] .text-white {
  color: #FFFFFF !important;
}

/* Subtitles/descriptions inside purple cards */
section[class*="bg-[#231435]"] p,
section[class*="from-[#431D60]"] p,
[data-cms-section="about.heatLab"] p,
[data-cms-section="about.cta"] p,
html:not(.dark) section[class*="bg-[#231435]"] p,
html:not(.dark) section[class*="from-[#431D60]"] p,
html:not(.dark) [data-cms-section="about.heatLab"] p,
html:not(.dark) [data-cms-section="about.cta"] p,
html:not(.dark) [data-cms-section="about.heatLab"] [class*="text-purple-200"],
html:not(.dark) [data-cms-section="about.cta"] [class*="text-purple-200"] {
  color: rgba(243, 232, 255, 0.9) !important;
}

/* Ambient glow subtle in light mode */
html:not(.dark) .hero-ambient-arc,
html:not(.dark) .hero-ambient-arc-2 {
  display: none !important;
}

/* ========================================================
   FLEXIBLE PLASTIC SHEET THROWN IN STRONG WIND GUST ENTRANCE
   Reference Motion (Exact 2-Second Duration & Deep S-Curve Wavy Plastic Flex):
   - Phase 1 (0–15%): Tiny card (~12-14%), far behind in deep perspective
   - Phase 2 (15–38%): Wind pulls forward; aggressive non-uniform plastic stretch
   - Phase 3 & 4 (38–65%): Deep S-curve wave contour with rippling edges & surface wave
   - Phase 5 (65–85%): Snap into shape, wave amplitude reduces, corners return to phone frame
   - Phase 6 (85–100%): Natural soft settle without cartoon bounce
   - Phase 7 (100%+): Extremely subtle floating suspended in air
   ======================================================== */

.hero-phone-stage {
  perspective: 1400px;
  perspective-origin: 55% 45%;
  transform-style: preserve-3d;
}

.hero-phone-animated {
  transform-style: preserve-3d;
  will-change: transform, opacity, filter, box-shadow, border-radius, clip-path;
  transform-origin: 50% 35%;
  animation: plasticSheetWindThrow 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both,
             plasticIdleSuspension 6.5s ease-in-out 2.05s infinite alternate;
}

/* Internal Membrane Flex: Phone screen stretches and ripples in sync with plastic chassis */
.mobile-phone-screen {
  will-change: transform, border-radius, clip-path;
  animation: plasticScreenInternalWarp 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

/* Translucent Plastic Sheet Glow Aura & Specular Wave Crests */
#hero-phone-showcase::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 44;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(168, 85, 247, 0.45) 24%,
    rgba(255, 255, 255, 0.75) 40%,
    rgba(139, 92, 246, 0.5) 54%,
    rgba(245, 158, 11, 0.35) 68%,
    transparent 85%
  );
  background-size: 250% 250%;
  mix-blend-mode: screen;
  opacity: 0;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));
  animation: plasticSheetWindRipple 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

/* Plastic Gloss Sheen: Fleeting reflection as sheet cuts through air */
#hero-phone-showcase::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 43;
  background: radial-gradient(
    ellipse at 30% 20%,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(168, 85, 247, 0.25) 45%,
    transparent 70%
  );
  mix-blend-mode: overlay;
  opacity: 0;
  animation: plasticFilmSheen 2.0s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

/* Surface Wave Crest Passing Across the Plastic Membrane */
@keyframes plasticSheetWindRipple {
  0% {
    opacity: 0;
    background-position: 0% 0%;
  }
  20% {
    opacity: 0.85;
    background-position: 30% 25%;
  }
  48% {
    opacity: 0.95;
    background-position: 80% 70%;
  }
  72% {
    opacity: 0.55;
    background-position: 150% 130%;
  }
  88% {
    opacity: 0.15;
    background-position: 210% 180%;
  }
  100% {
    opacity: 0;
    background-position: 250% 210%;
  }
}

@keyframes plasticFilmSheen {
  0% { opacity: 0; }
  25% { opacity: 0.9; }
  65% { opacity: 0.45; }
  100% { opacity: 0; }
}

/* ========================================================
   REALISTIC FLEXIBLE PLASTIC SHEET WIND THROW ENTRANCE (2.0s)
   Physics of aerodynamic flight through strong wind:
   - Smooth continuous G2 curvature (elliptical border-radius, no faceted polygons)
   - Aerodynamic non-uniform elasticity (streamlined stretch -> air-cushion expansion)
   - 3D spatial trajectory with realistic air resistance & damped settling
   ======================================================== */
@keyframes plasticSheetWindThrow {
  /* PHASE 1 (0–14%): Tiny card (~14%), far behind in deep perspective */
  0% {
    opacity: 0.15;
    filter: blur(4px);
    transform: translate3d(40px, 65px, -950px) scale(0.14) 
               rotateX(38deg) rotateY(-26deg) rotateZ(15deg) 
               skewX(-11deg) skewY(6deg);
    border-radius: 65px 22px 70px 20px / 22px 70px 20px 65px;
    box-shadow: 0 45px 90px -15px rgba(168, 85, 247, 0.45);
  }
  16% {
    opacity: 0.85;
    filter: blur(1.5px);
    /* PHASE 2 (15–35%): Wind acceleration; streamlined plastic stretch */
    transform: translate3d(22px, 30px, -550px) scaleX(0.58) scaleY(1.26) 
               rotateX(26deg) rotateY(-16deg) rotateZ(10deg) 
               skewX(-13deg) skewY(8deg);
    border-radius: 25px 75px 20px 70px / 70px 22px 75px 25px;
    box-shadow: 0 35px 80px -10px rgba(168, 85, 247, 0.4);
  }

  /* PHASE 3 & 4 (36–62%): Surface catches wind; dynamic 3D aerodynamic bow */
  45% {
    opacity: 1;
    filter: blur(0px);
    /* Dynamic bow: sheet broadens as it meets air resistance, S-curve flex */
    transform: translate3d(-14px, -14px, -110px) scaleX(1.15) scaleY(0.88) 
               rotateX(-14deg) rotateY(14deg) rotateZ(-9deg) 
               skewX(10deg) skewY(-6deg);
    border-radius: 72px 24px 68px 26px / 26px 70px 22px 74px;
    box-shadow: 0 30px 75px -8px rgba(245, 158, 11, 0.3), 0 0 50px rgba(168, 85, 247, 0.45);
  }
  64% {
    opacity: 1;
    filter: blur(0px);
    /* Forward crest overshoots slightly into near-camera space; counter-flex wave */
    transform: translate3d(8px, -16px, 35px) scaleX(0.96) scaleY(1.06) 
               rotateX(8deg) rotateY(-7deg) rotateZ(3.5deg) 
               skewX(-5deg) skewY(3deg);
    border-radius: 35px 55px 32px 54px / 54px 32px 55px 35px;
    box-shadow: 0 25px 60px -6px rgba(168, 85, 247, 0.35);
  }

  /* PHASE 5 (64–84%): Elastic restorative force dampens ripple, corners return to chassis */
  82% {
    transform: translate3d(-2px, -4px, 10px) scaleX(1.015) scaleY(0.99) 
               rotateX(-2deg) rotateY(1.5deg) rotateZ(-0.7deg) 
               skewX(1deg) skewY(-0.5deg);
    border-radius: 43px 41px 42px 40px;
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.28);
  }
  92% {
    /* PHASE 6 (85–100%): Natural soft settle without cartoon bounce */
    transform: translate3d(0.5px, 0.5px, -1.5px) scale(0.998) 
               rotateX(0.4deg) rotateY(-0.3deg) rotateZ(0.1deg) 
               skewX(-0.1deg);
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) scale(1) 
               rotateX(0deg) rotateY(0deg) rotateZ(0deg) 
               skewX(0deg) skewY(0deg);
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
}

/* Synchronized Inner Screen Elastic Wave */
@keyframes plasticScreenInternalWarp {
  0% {
    transform: scaleX(0.92) scaleY(1.10) translateY(-2px);
    border-radius: 38px 22px 40px 20px;
  }
  20% {
    transform: scaleX(0.86) scaleY(1.16) translateY(-3px);
    border-radius: 22px 42px 20px 38px;
  }
  48% {
    transform: scaleX(1.09) scaleY(0.92) translateY(2px);
    border-radius: 44px 20px 40px 24px;
  }
  68% {
    transform: scaleX(0.98) scaleY(1.02) translateY(-1px);
    border-radius: 32px 34px 30px 33px;
  }
  85% {
    transform: scale(1.002) translateY(0.3px);
    border-radius: 31px;
  }
  100% {
    transform: scale(1) translateY(0);
    border-radius: 30px;
  }
}

/* PHASE 7: Subtle Idle Floating: Card suspended in air without distracting from UI */
@keyframes plasticIdleSuspension {
  0% {
    transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: translate3d(0, -4.5px, 7px) rotateX(0.9deg) rotateY(-0.7deg) rotateZ(0.25deg);
  }
  100% {
    transform: translate3d(0, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

/* Respect Accessibility: Disable heavy deformation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-phone-animated,
  .mobile-phone-screen,
  #hero-phone-showcase::before,
  #hero-phone-showcase::after,
  .hero-burst-item {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ========================================================
   HERO TEXT ERUPTION / EMERGENCE FROM THE CARD (LEFT SIDE)
   Elements shoot out dynamically from the card position into place
   ======================================================== */
.hero-burst-item {
  opacity: 0;
  will-change: transform, opacity, filter;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elements emerge out of the card on the right and spring softly into position */
@keyframes portalEruptLeft {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(220px, 15px, 0) scale(0.68) rotate(1.6deg);
  }
  65% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(-7px, -2px, 0) scale(1.018) rotate(-0.4deg);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@media (max-width: 1023px) {
  @keyframes portalEruptLeft {
    0% {
      opacity: 0;
      filter: blur(12px);
      transform: translate3d(50px, 18px, 0) scale(0.75) rotate(1deg);
    }
    65% {
      opacity: 1;
      filter: blur(0px);
      transform: translate3d(-4px, -2px, 0) scale(1.015) rotate(-0.2deg);
    }
    100% {
      opacity: 1;
      filter: blur(0px);
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
  }
}

/* Staggered emergence cascade: starts right as the card surges forward into view */
.hero-burst-badge {
  animation-name: portalEruptLeft;
  animation-duration: 0.82s;
  animation-delay: 1.38s;
}

.hero-burst-title {
  animation-name: portalEruptLeft;
  animation-duration: 0.90s;
  animation-delay: 1.50s;
}

.hero-burst-subtitle {
  animation-name: portalEruptLeft;
  animation-duration: 0.84s;
  animation-delay: 1.62s;
}

.hero-burst-buttons {
  animation-name: portalEruptLeft;
  animation-duration: 0.84s;
  animation-delay: 1.74s;
}

.hero-burst-chips {
  animation-name: portalEruptLeft;
  animation-duration: 0.84s;
  animation-delay: 1.86s;
}

.hero-burst-social {
  animation-name: portalEruptLeft;
  animation-duration: 0.84s;
  animation-delay: 1.98s;
}

/* ========================================================
   REALISTIC CHASSIS SPECULAR RIM LIGHT & CHAMFER GLEAM
   ======================================================== */
.phone-crack-fx,
.phone-crack-fx::before,
.phone-crack-fx::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* Realistic Edge Light Sweep: Traverses smoothly down the bezel */
@keyframes phoneRimLightSweep {
  0% {
    opacity: 0;
    transform: translateY(-28%) scaleY(0.35);
  }
  24% {
    opacity: 0.95;
    transform: translateY(-4%) scaleY(0.95);
  }
  50% {
    opacity: 1;
    transform: translateY(6%) scaleY(1.04);
  }
  78% {
    opacity: 0.8;
    transform: translateY(18%) scaleY(0.98);
  }
  100% {
    opacity: 0;
    transform: translateY(32%) scaleY(0.5);
  }
}

/* Optical Flare Glint Animation */
@keyframes phoneSpecularGlint {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
  30% {
    opacity: 1;
    transform: rotate(45deg) scale(1.35);
  }
  55% {
    opacity: 0.9;
    transform: rotate(45deg) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0);
  }
}

/* Soft Sheen Ambient Glow Falloff */
@keyframes phoneSheenGlow {
  0% {
    opacity: 0;
    transform: translateY(-15%) scale(0.6);
  }
  35% {
    opacity: 0.85;
    transform: translateY(0%) scale(1.05);
  }
  70% {
    opacity: 0.45;
    transform: translateY(12%) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateY(22%) scale(0.5);
  }
}

/* Subtle Continuous Metallic Breathing: Keeps the phone feeling alive */
@keyframes phoneRimAmbientPulse {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scaleY(0.85);
  }
  50% {
    opacity: 0.32;
    transform: translateY(2%) scaleY(0.95);
  }
}

/* Interactive Cursor Physics: Mouse hover enhances depth */
@media (hover: hover) and (pointer: fine) {
  .hero-phone-stage:hover .hero-phone-animated {
    animation-play-state: paused;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 0.35s ease;
    transform: translate3d(0, -18px, 45px) rotateX(3deg) rotateY(-3deg) scale(1.025);
  }
}

/* ========================================================
   AutoMashwara Signature Luxury Dark Mode Ambience
   Restoring rich deep royal violet undertones (never harsh flat black)
   ======================================================== */
html.dark body {
  background-color: #160B28 !important;
  color: #F8FAFC !important;
}

html.dark header[data-cms-section="header"],
html.dark header.sticky,
html.dark header {
  background-color: rgba(30, 14, 56, 0.95) !important;
  border-bottom-color: rgba(168, 85, 247, 0.22) !important;
  box-shadow: 0 4px 24px -2px rgba(18, 7, 34, 0.65) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html.dark [data-cms-section="announcement.enabled"] {
  background: linear-gradient(90deg, #240B3B 0%, #431D60 50%, #240B3B 100%) !important;
  border-bottom-color: rgba(229, 169, 60, 0.3) !important;
}

/* Ensure background sections carry the rich royal purple gradient */
html.dark #hero-section,
html.dark section#methodology,
html.dark [data-cms-section="howItWorks.hero"],
html.dark [data-cms-section="hero"] {
  background-color: #160B28 !important;
  background-image: linear-gradient(180deg, #1E0E38 0%, #170B2B 65%, #120722 100%) !important;
}

html.dark footer,
html.dark footer[data-cms-section="footer"] {
  background-color: #160B28 !important;
  border-top-color: rgba(168, 85, 247, 0.18) !important;
}







/* ========================================================
   GLOBAL LIGHT & DARK THEME RECTIFICATION & INTEGRITY ENGINE
   Fixes category card pill distortion, text overlap, and badge contrast
   ======================================================== */

/* 1. Category Filter Cards: Strict Rectangular Box Retention */
button[onclick*="selectCategoryFilter"],
.category-filter-card,
[data-cms-section="browse.hero"] button {
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* 2. Catalog Title: Line-Height & Font-Size Protection (Prevents text overlap) */
[data-cms="browse.catalog.title"],
h1[data-cms="browse.catalog.title"],
#cars-grid-header h1 {
  font-size: 1.85rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.25rem !important;
  display: block !important;
}

@media (min-width: 640px) {
  [data-cms="browse.catalog.title"],
  h1[data-cms="browse.catalog.title"] {
    font-size: 2.15rem !important;
    line-height: 1.25 !important;
  }
}

/* General H1-H4 Line-Height Protection */
h1, h2, h3, h4 {
  line-height: 1.25 !important;
}

/* 3. Light Mode Header Navigation Links & Controls High Contrast */
html:not(.dark) header[data-cms-section="header"],
html:not(.dark) header.sticky,
html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: #E2E8F0 !important;
}

html:not(.dark) header nav a {
  color: #334155 !important;
  font-weight: 700 !important;
}

html:not(.dark) header nav a:hover,
html:not(.dark) header nav a.text-\[\#E5A93C\] {
  color: #D89B27 !important;
}

html:not(.dark) header button[data-purpose="theme-toggle"],
html:not(.dark) header [aria-label="Toggle theme"] {
  color: #475569 !important;
  background-color: #F1F5F9 !important;
}

html:not(.dark) header button[data-purpose="theme-toggle"]:hover {
  color: #0F172A !important;
  background-color: #E2E8F0 !important;
}

html:not(.dark) header [data-auth-container] a {
  color: #334155 !important;
  background-color: #F8FAFC !important;
  border: 1px solid #CBD5E1 !important;
}

html:not(.dark) header [data-auth-container] a:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

html:not(.dark) header button[data-mobile-menu-btn] {
  color: #334155 !important;
}

/* 4. Sidebar Ad Container Safety */
.automashwara-test-ad-box {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.automashwara-test-ad-box button {
  white-space: nowrap !important;
}

/* 5. Browse Page Dark Mode Specific Enhancements */
html.dark #cars-grid [data-match-pill="rank-1"] {
  color: #FDE68A !important;
  background-color: rgba(69, 26, 3, 0.7) !important;
  border-color: rgba(217, 119, 6, 0.5) !important;
}
html.dark #cars-grid [data-match-pill="standard"] {
  color: #D8B4FE !important;
  background-color: rgba(59, 7, 100, 0.6) !important;
  border-color: rgba(147, 51, 234, 0.4) !important;
}
html.dark #cars-grid [data-rank-badge="other"] {
  color: #DDD6FE !important;
  background-color: #2E1065 !important;
}
html.dark #cars-grid [data-pillar-label] {
  color: #94A3B8 !important;
}
html.dark #cars-grid [data-pillar-val] {
  color: #F1F5F9 !important;
}
html.dark #cars-grid .why-fits-box {
  background-color: rgba(35, 14, 55, 0.6) !important;
  border-color: rgba(88, 43, 124, 0.4) !important;
}
html.dark #cars-grid .why-fits-title {
  color: #C084FC !important;
}
html.dark #cars-grid .why-fits-body {
  color: #E2E8F0 !important;
}
html.dark #cars-grid .card-footer-box {
  background-color: rgba(24, 13, 38, 0.6) !important;
  border-color: rgba(88, 43, 124, 0.3) !important;
}
html.dark #cars-grid .starting-at-label {
  color: #94A3B8 !important;
}
html.dark #cars-grid .car-price-val {
  color: #FFFFFF !important;
}

/* 6. Site-wide Light Mode Card Readability */
html:not(.dark) .why-fits-box,
html:not(.dark) .why-fits-body {
  color: #334155 !important;
}
html:not(.dark) .why-fits-title {
  color: #582B7C !important;
}
html:not(.dark) .starting-at-label {
  color: #64748B !important;
}
html:not(.dark) .car-price-val {
  color: #0F172A !important;
}

/* 7. How It Works Page Light Mode Readability & Contrast */
html:not(.dark) .methodology-step-card {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06), 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
}
html:not(.dark) .methodology-step-card h3 {
  color: #0F172A !important;
}
html:not(.dark) .methodology-step-card p {
  color: #475569 !important;
}
html:not(.dark) .methodology-step-card ul {
  border-color: #F1F5F9 !important;
}
html:not(.dark) .methodology-step-card ul li span {
  color: #0F172A !important;
}
html:not(.dark) .methodology-step-card [class*="text-purple-400"] {
  color: #64748B !important;
}

/* Leaderboard & FAQs Section Headings */
html:not(.dark) [data-cms-section="howItWorks.leaderboard"] h2,
html:not(.dark) [data-cms-section="howItWorks.faq"] h3 {
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="howItWorks.leaderboard"] p {
  color: #64748B !important;
}
html:not(.dark) #leaderboard-body {
  color: #0F172A !important;
}
html:not(.dark) #leaderboard-body tr {
  border-color: #F1F5F9 !important;
}
html:not(.dark) #leaderboard-body tr:hover {
  background-color: #F8FAFC !important;
}
html:not(.dark) .lb-tab-btn:not(.active) {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}
html:not(.dark) .lb-tab-btn:not(.active):hover {
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* Community Input and Badges */
html:not(.dark) [data-cms-section="howItWorks.communityInput"] h3,
html:not(.dark) [data-cms-section="howItWorks.communityInput"] h4 {
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="howItWorks.communityInput"] p {
  color: #475569 !important;
}

/* 4 Pillars and FAQ Cards */
html:not(.dark) [data-cms-section="howItWorks.faq"] h4 {
  color: #0F172A !important;
}
html:not(.dark) [data-cms-section="howItWorks.faq"] p {
  color: #475569 !important;
}

/* ========================================================
   AutoMashwara Royal Purple Vehicle Card Design System
   Eliminates all harsh black styling from recommendation cards
   ======================================================== */

/* 1. AI Recommended Feed Cards (Recommended For You) */
html.dark #personalized-feed-container .group {
  background: linear-gradient(180deg, #251145 0%, #1B0C33 60%, #140728 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 12px 35px rgba(18, 5, 32, 0.5) !important;
}

html.dark #personalized-feed-container .group:hover {
  border-color: #C084FC !important;
  box-shadow: 0 16px 45px rgba(168, 85, 247, 0.22) !important;
}

/* Vehicle Studio Banner Stage in AI Feed */
html.dark #personalized-feed-container .group .relative.h-44,
html.dark #personalized-feed-container .group .relative.sm\:h-48,
html.dark #personalized-feed-container .group [class*="h-44"],
html.dark #personalized-feed-container .group [class*="h-48"] {
  background: radial-gradient(ellipse at 50% 65%, #4C1D95 0%, #2E1065 50%, #180833 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: inset 0 2px 16px rgba(168, 85, 247, 0.2) !important;
}

/* Specs Micro-Strip (POWER, DRIVE, CLIMATE) inside AI Feed */
html.dark #personalized-feed-container .grid.grid-cols-3 {
  background: #2D1452 !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark #personalized-feed-container .grid.grid-cols-3 span[class*="text-[10px]"] {
  color: #C084FC !important;
  font-weight: 800 !important;
}

html.dark #personalized-feed-container .grid.grid-cols-3 span[data-cms*="Power"],
html.dark #personalized-feed-container .grid.grid-cols-3 span[data-cms*="Drive"] {
  color: #FFFFFF !important;
}

html.dark #personalized-feed-container .grid.grid-cols-3 span[data-cms*="Climate"] {
  color: #34D399 !important;
}

/* 2. Top 3 Decision Intelligence Cards (Screen 5) */
html.dark [data-cms-section="recommendations"] .grid.grid-cols-1 > div,
html.dark #recommended-grid > div {
  background: linear-gradient(180deg, #251145 0%, #1B0C33 60%, #140728 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 12px 35px rgba(18, 5, 32, 0.5) !important;
}

html.dark [data-cms-section="recommendations"] .grid.grid-cols-1 > div:hover,
html.dark #recommended-grid > div:hover {
  border-color: #C084FC !important;
}

/* Vehicle Studio Banner Stage in Decision Cards */
html.dark [data-cms-section="recommendations"] .grid.grid-cols-1 > div > div:first-child,
html.dark #recommended-grid > div .relative.h-56,
html.dark #recommended-grid > div [class*="h-56"] {
  background: radial-gradient(ellipse at 50% 65%, #4C1D95 0%, #2E1065 50%, #180833 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: inset 0 2px 16px rgba(168, 85, 247, 0.2) !important;
}

/* ========================================================
   TOP GCC RECOMMENDATIONS DUAL THEME SYSTEM
   ======================================================== */
/* Dark Mode: Luxury Royal Obsidian-Purple */
html.dark .top-gcc-card {
  background: linear-gradient(180deg, #220F3B 0%, #17092A 60%, #120520 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 20px 50px rgba(18, 5, 32, 0.5) !important;
  color: #FFFFFF !important;
}
html.dark .top-gcc-card-featured {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 25px 60px rgba(245, 158, 11, 0.15), 0 20px 50px rgba(18, 5, 32, 0.6) !important;
}
html.dark .top-gcc-stage {
  background: radial-gradient(ellipse at 50% 65%, #381566 0%, #240C43 60%, #16062A 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .top-gcc-stage-header {
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .top-gcc-rank2-bar {
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .top-gcc-rank2-label {
  color: #D8B4FE !important;
}
html.dark .top-gcc-confidence {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}
html.dark .top-gcc-card h3 {
  color: #FFFFFF !important;
}
html.dark .top-gcc-trim {
  color: #D8B4FE !important;
}
html.dark .top-gcc-match-score {
  color: #C084FC !important;
}
html.dark .top-gcc-match-score-featured {
  color: #FBBF24 !important;
}
html.dark .top-gcc-match-label {
  color: #D8B4FE !important;
}
html.dark .top-gcc-metric-bar {
  border-bottom: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .top-gcc-pillar-chip {
  background: #281247 !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
html.dark .top-gcc-pillar-label {
  color: #C084FC !important;
}
html.dark .top-gcc-pillar-val {
  color: #FFFFFF !important;
}
html.dark .top-gcc-why-box {
  background: #240E40 !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
html.dark .top-gcc-why-title {
  color: #FBBF24 !important;
}
html.dark .top-gcc-why-body {
  color: #E9D5FF !important;
}
html.dark .top-gcc-footer {
  border-top: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .top-gcc-price-label {
  color: #C084FC !important;
}
html.dark .top-gcc-price-val {
  color: #FFFFFF !important;
}

/* Light Mode: High Contrast Luxury Crisp Pearl White */
html:not(.dark) .top-gcc-card {
  background: #FFFFFF !important;
  border: 1px solid #E9DFF7 !important;
  box-shadow: 0 15px 40px rgba(88, 43, 124, 0.08) !important;
  color: #0F172A !important;
}
html:not(.dark) .top-gcc-card-featured {
  border: 1px solid #FCD34D !important;
  box-shadow: 0 20px 45px rgba(245, 158, 11, 0.12), 0 10px 25px rgba(88, 43, 124, 0.06) !important;
}
html:not(.dark) .top-gcc-stage {
  background: radial-gradient(ellipse at 50% 65%, #F8F5FD 0%, #F1E8FB 100%) !important;
  border-bottom: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-stage-header {
  border-bottom: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-rank2-bar {
  border-bottom: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-rank2-label {
  color: #64748B !important;
}
html:not(.dark) .top-gcc-confidence {
  background: #F1E8FB !important;
  border: 1px solid #D8B4FE !important;
  color: #582B7C !important;
}
html:not(.dark) .top-gcc-card h3 {
  color: #0F172A !important;
}
html:not(.dark) .top-gcc-trim {
  color: #582B7C !important;
}
html:not(.dark) .top-gcc-match-score {
  color: #6B21A8 !important;
}
html:not(.dark) .top-gcc-match-score-featured {
  color: #D97706 !important;
}
html:not(.dark) .top-gcc-match-label {
  color: #64748B !important;
}
html:not(.dark) .top-gcc-metric-bar {
  border-bottom: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-pillar-chip {
  background: #F8F5FD !important;
  border: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-pillar-label {
  color: #6B21A8 !important;
}
html:not(.dark) .top-gcc-pillar-val {
  color: #0F172A !important;
}
html:not(.dark) .top-gcc-why-box {
  background: #FAF6FD !important;
  border: 1px solid #EDE4F7 !important;
}
html:not(.dark) .top-gcc-why-title {
  color: #582B7C !important;
}
html:not(.dark) .top-gcc-why-body {
  color: #334155 !important;
}
html:not(.dark) .top-gcc-footer {
  border-top: 1px solid #E9DFF7 !important;
}
html:not(.dark) .top-gcc-price-label {
  color: #64748B !important;
}
html:not(.dark) .top-gcc-price-val {
  color: #0F172A !important;
}

/* ========================================================
   AI PERSONALIZED FEED DUAL THEME SYSTEM
   ======================================================== */
/* Dark Mode */
html.dark .ai-rec-card {
  background: linear-gradient(180deg, #251145 0%, #1B0C33 60%, #140728 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 15px 35px rgba(20, 5, 35, 0.45) !important;
}
html.dark .ai-rec-stage {
  background: radial-gradient(ellipse at 50% 65%, #4C1D95 0%, #2E1065 55%, #180833 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
}
html.dark .ai-rec-match-pill {
  background: linear-gradient(135deg, #7C3AED 0%, #582B7C 100%) !important;
  border: 1px solid rgba(216, 180, 254, 0.4) !important;
  color: #FFFFFF !important;
}
html.dark .ai-rec-type-tag {
  background: rgba(40, 16, 75, 0.95) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #FFFFFF !important;
}
html.dark .ai-rec-make {
  color: #E5A93C !important;
}
html.dark .ai-rec-year {
  color: #D8B4FE !important;
}
html.dark .ai-rec-title {
  color: #FFFFFF !important;
}
html.dark .ai-rec-rationale {
  background: rgba(44, 20, 80, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  color: #E9D5FF !important;
}
html.dark .ai-rec-rationale i {
  color: #E5A93C !important;
}
html.dark .ai-rec-specs-box {
  background: #2D1452 !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
}
html.dark .ai-rec-spec-label {
  color: #C084FC !important;
}
html.dark .ai-rec-spec-val {
  color: #FFFFFF !important;
}
html.dark .ai-rec-spec-climate {
  color: #34D399 !important;
}
html.dark .ai-rec-footer {
  border-top: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .ai-rec-price-label {
  color: #D8B4FE !important;
}
html.dark .ai-rec-price-val {
  color: #FFFFFF !important;
}

/* Light Mode */
html:not(.dark) .ai-rec-card {
  background: #FFFFFF !important;
  border: 1px solid #E9DFF7 !important;
  box-shadow: 0 10px 30px rgba(88, 43, 124, 0.08) !important;
}
html:not(.dark) .ai-rec-stage {
  background: radial-gradient(ellipse at 50% 65%, #F8F5FD 0%, #F1E8FB 100%) !important;
  border: 1px solid #E9DFF7 !important;
}
html:not(.dark) .ai-rec-match-pill {
  background: linear-gradient(135deg, #7C3AED 0%, #582B7C 100%) !important;
  border: 1px solid rgba(216, 180, 254, 0.6) !important;
  color: #FFFFFF !important;
}
html:not(.dark) .ai-rec-type-tag {
  background: #FFFFFF !important;
  border: 1px solid #D8B4FE !important;
  color: #582B7C !important;
  box-shadow: 0 2px 6px rgba(88, 43, 124, 0.1) !important;
  font-weight: 800 !important;
}
html:not(.dark) .ai-rec-make {
  color: #B45309 !important;
}
html:not(.dark) .ai-rec-year {
  color: #64748B !important;
}
html:not(.dark) .ai-rec-title {
  color: #0F172A !important;
}
html:not(.dark) .ai-rec-rationale {
  background: #FAF6FD !important;
  border: 1px solid #EDE4F7 !important;
  color: #582B7C !important;
}
html:not(.dark) .ai-rec-rationale i {
  color: #D97706 !important;
}
html:not(.dark) .ai-rec-specs-box {
  background: #F8F5FD !important;
  border: 1px solid #E9DFF7 !important;
}
html:not(.dark) .ai-rec-spec-label {
  color: #6B21A8 !important;
}
html:not(.dark) .ai-rec-spec-val {
  color: #0F172A !important;
}
html:not(.dark) .ai-rec-spec-climate {
  color: #059669 !important;
}
html:not(.dark) .ai-rec-footer {
  border-top: 1px solid #F1E8FB !important;
}
html:not(.dark) .ai-rec-price-label {
  color: #64748B !important;
}
html:not(.dark) .ai-rec-price-val {
  color: #0F172A !important;
}

/* ========================================================
   BROWSE PAGE VEHICLE CARDS DUAL THEME SYSTEM
   ======================================================== */
/* Dark Mode */
html.dark .browse-car-card,
html.dark #browse-grid > div {
  background: linear-gradient(180deg, #210E3B 0%, #17092A 60%, #120520 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 15px 35px rgba(20, 5, 35, 0.4) !important;
}
html.dark .browse-car-stage,
html.dark #browse-grid > div .relative.h-48 {
  background: radial-gradient(ellipse at 50% 65%, #381566 0%, #240C43 60%, #16062A 100%) !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.3) !important;
}
html.dark .browse-confidence-val {
  color: #FFFFFF !important;
}
html.dark .browse-confidence-lbl {
  color: #C084FC !important;
}
html.dark .browse-pillar-chip,
html.dark #browse-grid .grid.grid-cols-2 > div {
  background: #281247 !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}
html.dark .browse-pillar-label,
html.dark #browse-grid .grid.grid-cols-2 > div [data-pillar-label] {
  color: #C084FC !important;
}
html.dark .browse-pillar-val,
html.dark #browse-grid .grid.grid-cols-2 > div [data-pillar-val] {
  color: #FFFFFF !important;
}
html.dark .browse-why-box,
html.dark #browse-grid .why-fits-box {
  background: #23103D !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}
html.dark .browse-why-title,
html.dark #browse-grid .why-fits-title {
  color: #E5A93C !important;
}
html.dark .browse-why-body,
html.dark #browse-grid .why-fits-body {
  color: #E9D5FF !important;
}
html.dark .browse-footer-box,
html.dark #browse-grid .card-footer-box {
  background: #1B0C32 !important;
  border-top: 1px solid rgba(168, 85, 247, 0.25) !important;
}
html.dark .browse-price-label,
html.dark #browse-grid .starting-at-label {
  color: #C084FC !important;
}
html.dark .browse-price-val,
html.dark #browse-grid .car-price-val {
  color: #FFFFFF !important;
}

/* Light Mode */
html:not(.dark) .browse-car-card,
html:not(.dark) #browse-grid > div {
  background: #FFFFFF !important;
  border: 1px solid #E9DFF7 !important;
  box-shadow: 0 10px 25px rgba(88, 43, 124, 0.08) !important;
}
html:not(.dark) .browse-car-stage,
html:not(.dark) #browse-grid > div .relative.h-48 {
  background: radial-gradient(ellipse at 50% 65%, #F8F5FD 0%, #F1E8FB 100%) !important;
  border-bottom: 1px solid #E9DFF7 !important;
}
html:not(.dark) .browse-confidence-val {
  color: #0F172A !important;
}
html:not(.dark) .browse-confidence-lbl {
  color: #64748B !important;
}
html:not(.dark) .browse-pillar-chip,
html:not(.dark) #browse-grid .grid.grid-cols-2 > div {
  background: #F8F5FD !important;
  border: 1px solid #E9DFF7 !important;
}
html:not(.dark) .browse-pillar-label,
html:not(.dark) #browse-grid .grid.grid-cols-2 > div [data-pillar-label] {
  color: #6B21A8 !important;
}
html:not(.dark) .browse-pillar-val,
html:not(.dark) #browse-grid .grid.grid-cols-2 > div [data-pillar-val] {
  color: #0F172A !important;
}
html:not(.dark) .browse-why-box,
html:not(.dark) #browse-grid .why-fits-box {
  background: #FAF6FD !important;
  border: 1px solid #EDE4F7 !important;
}
html:not(.dark) .browse-why-title,
html:not(.dark) #browse-grid .why-fits-title {
  color: #582B7C !important;
}
html:not(.dark) .browse-why-body,
html:not(.dark) #browse-grid .why-fits-body {
  color: #334155 !important;
}
html:not(.dark) .browse-footer-box,
html:not(.dark) #browse-grid .card-footer-box {
  background: #FAFAFC !important;
  border-top: 1px solid #F1E8FB !important;
}
html:not(.dark) .browse-price-label,
html:not(.dark) #browse-grid .starting-at-label {
  color: #64748B !important;
}
html:not(.dark) .browse-price-val,
html:not(.dark) #browse-grid .car-price-val {
  color: #0F172A !important;
}

/* ========================================================
   VIBRANT ROYAL PURPLE THEME SYSTEM & HIGH-CONTRAST BADGES
   Guarantees deep royal purple cards, no pitch-black fallbacks,
   and 100% visible high-contrast badge text & telemetry.
   ======================================================== */

/* 1. AI Recommendation Engine Hero Card */
.automashwara-ai-hero-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}
html.dark .automashwara-ai-hero-card {
  background: linear-gradient(180deg, #441766 0%, #30104B 50%, #1F0B33 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 25px 65px rgba(58, 16, 92, 0.75) !important;
}

/* 2. Floating Spec Badges on Car (50°C GCC Tested, -18% Low Depreciation, #1 Ranked) */
.hero-spec-badge {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
.hero-spec-badge span,
.hero-spec-badge div {
  color: #0F172A !important;
  font-weight: 800 !important;
}
html.dark .hero-spec-badge {
  background: #361259 !important;
  background-color: #361259 !important;
  border: 1.5px solid #A855F7 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}
html.dark .hero-spec-badge span,
html.dark .hero-spec-badge div {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* 3. Hero 4-Step Milestone Pills (01 Needs, 02 AI Filter, etc.) */
.hero-milestone-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  transition: all 0.2s ease;
}
html.dark .hero-milestone-pill {
  background: #2E0E4E !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
}
html.dark .hero-milestone-pill:hover {
  background: #42166F !important;
  border-color: #E5A93C !important;
}
html.dark .hero-milestone-pill .milestone-title {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
html.dark .hero-milestone-pill .milestone-sub {
  color: #D8B4FE !important;
  font-weight: 600 !important;
}

/* 4. 5-Pillar GCC Evaluation Model Card & Inputs */
.evaluation-model-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}
html.dark .evaluation-model-card {
  background: linear-gradient(180deg, #441766 0%, #30104B 50%, #1F0B33 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 25px 65px rgba(58, 16, 92, 0.75) !important;
}
.evaluation-input {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  color: #0F172A;
}
html.dark .evaluation-input {
  background: #280D44 !important;
  background-color: #280D44 !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
  color: #FFFFFF !important;
}
html.dark .evaluation-input option {
  background: #280D44 !important;
  background-color: #280D44 !important;
  color: #FFFFFF !important;
}
html.dark .evaluation-input::placeholder {
  color: #DDD6FE !important;
  opacity: 0.8 !important;
}

/* 5. Community Badges (Karak & Cruise, Whisperer, etc.) */
.community-badge-item {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  transition: all 0.25s ease;
}
html.dark .community-badge-item {
  background: linear-gradient(135deg, #3B1457 0%, #250C3B 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
}
html.dark .community-badge-item:hover {
  background: linear-gradient(135deg, #4B1A70 0%, #2F0E4A 100%) !important;
  border-color: #E5A93C !important;
}
html.dark .community-badge-item h4 {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
html.dark .community-badge-item p {
  color: #DDD6FE !important;
  font-weight: 500 !important;
}

/* 6. Explore by Category Showcase & Filter Cards (browse.html & index.html) */
.category-banner-container {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
}
html.dark .category-banner-container {
  background: linear-gradient(180deg, #421663 0%, #2B0D44 60%, #1D0A32 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 20px 50px rgba(50, 14, 80, 0.6) !important;
}
.category-showcase-card,
.category-filter-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  transition: all 0.25s ease;
}
html.dark .category-showcase-card,
html.dark .category-filter-card {
  background: linear-gradient(180deg, #451868 0%, #30104B 55%, #1F0B33 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.55) !important;
  box-shadow: 0 12px 30px rgba(45, 12, 70, 0.5) !important;
}
html.dark .category-showcase-card:hover,
html.dark .category-filter-card:hover {
  background: linear-gradient(180deg, #531D7D 0%, #391459 55%, #250D3D 100%) !important;
  border-color: #C084FC !important;
  box-shadow: 0 18px 45px rgba(168, 85, 247, 0.4) !important;
}
html.dark .category-showcase-card h3,
html.dark .category-filter-card span.font-extrabold {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
html.dark .category-showcase-card p {
  color: #DDD6FE !important;
}
html.dark .category-showcase-card .category-card-footer {
  border-top: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #E5A93C !important;
}