/* ==========================================================================
   SriLions Software Solutions - Enterprise Dark Design System
   Pure Vanilla CSS3 (Zero framework dependencies)
   Compliant with modern W3C HTML5 & CSS standards
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

/* Material Symbols Icon Base & FOUC/FOIT Raw Text Flash Prevention */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined', sans-serif !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  font-display: block;
}

/* CSS Custom Properties & Design Tokens */
:root {
  /* Surface & Background Hierarchy */
  --bg-base: #13131b;
  --bg-deep: #07070c;
  --bg-navy: #0b0c16;
  --surface-lowest: #0d0d15;
  --surface-low: #1b1b23;
  --surface: #13131b;
  --surface-container: #1f1f27;
  --surface-high: #292932;
  --surface-highest: #34343d;
  --surface-bright: #393841;
  --surface-header: rgba(19, 19, 27, 0.94);

  /* Primary Brand Palette */
  --primary: #c0c1ff;
  --primary-dim: #a078ff;
  --primary-container: #8083ff;
  --on-primary: #1000a9;
  --on-primary-container: #0d0096;
  --inverse-primary: #494bd6;

  /* Secondary & Tertiary Accents */
  --secondary: #adc6ff;
  --secondary-container: #0566d9;
  --on-secondary: #002e6a;
  --tertiary: #d0bcff;
  --tertiary-container: #a078ff;
  --on-tertiary: #3c0091;

  /* Brand Accents & Gradients */
  --cobalt: #494bd6;
  --cobalt-hover: #3b3dc2;
  --electric-blue: #3b82f6;
  --violet: #8b5cf6;
  --emerald: #34d399;
  --amber: #fbbf24;
  --error: #ffb4ab;

  /* Typography & Text */
  --text-main: #e4e1ed;
  --text-muted: #c7c4d7;
  --text-dim: #908fa0;
  --text-inverse: #13131b;
  --text-white: #ffffff;

  /* Borders & Outlines */
  --border: #34343d;
  --border-light: #292932;
  --border-glow: rgba(192, 193, 255, 0.25);
  --border-focus: #3b82f6;

  /* Shadows & Glows */
  --glow-primary: 0 0 25px -5px rgba(192, 193, 255, 0.18);
  --glow-cobalt: 0 10px 25px -5px rgba(73, 75, 214, 0.35);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.7);

  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Border Radii */
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Layout Spacing */
  --container-max: 1280px;
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Theme Token Overrides */
[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-deep: #f1f5f9;
  --bg-navy: #e2e8f0;
  --surface-lowest: #ffffff;
  --surface-low: #f8fafc;
  --surface: #ffffff;
  --surface-container: #f1f5f9;
  --surface-high: #e2e8f0;
  --surface-highest: #cbd5e1;
  --surface-bright: #ffffff;
  --surface-header: rgba(255, 255, 255, 0.94);

  --primary: #494bd6;
  --primary-dim: #3b3dc2;
  --primary-container: #e0e2ff;
  --on-primary: #ffffff;
  --on-primary-container: #1000a9;
  --inverse-primary: #8083ff;

  --secondary: #2563eb;
  --secondary-container: #dbeafe;
  --on-secondary: #1e3a8a;
  --tertiary: #7c3aed;
  --tertiary-container: #ede9fe;
  --on-tertiary: #4c1d95;

  --text-main: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;
  --text-inverse: #ffffff;
  --text-white: #0f172a;

  --border: #cbd5e1;
  --border-light: #e2e8f0;
  --border-glow: rgba(73, 75, 214, 0.25);
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Comprehensive Light Theme Overrides & Global Standards
   Ensures 100% readability, high contrast, clean backgrounds, and visible navbars across all 11 pages
   ========================================================================== */

[data-theme="light"],
html[data-theme="light"] {
  color-scheme: light;
}

[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* 1. All Backgrounds & Page Sections */
[data-theme="light"] main:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] section:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-background:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-brand-surface:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-brand-deep:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-brand-navy:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-dim:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-variant:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-brand-deep"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-brand-navy"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#0b0c16]"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#0f1019]"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#13131b]"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#0d0d15]"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#07070c]"]:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-[#1b1b23]"]:not(.dark-app-window):not(.dark-app-window *) {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Alternating Section Colors in Light Mode */
[data-theme="light"] section:nth-of-type(odd):not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-container-lowest:not(.dark-app-window):not(.dark-app-window *) {
  background-color: #f8fafc !important;
}

[data-theme="light"] section:nth-of-type(even):not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-container-low:not(.dark-app-window):not(.dark-app-window *) {
  background-color: #f1f5f9 !important;
}

/* 2. Neutralize All Dark Decorative Gradient & Surface Overlays */
[data-theme="light"] .pointer-events-none[class*="bg-gradient-to"],
[data-theme="light"] [class*="from-purple-950"],
[data-theme="light"] [class*="from-purple-900"],
[data-theme="light"] [class*="via-blue-950"],
[data-theme="light"] [class*="to-brand-deep"],
[data-theme="light"] [class*="from-brand-deep"],
[data-theme="light"] [class*="bg-gradient-to-b"].from-transparent,
[data-theme="light"] [class*="bg-gradient-to-b"].from-purple-900\/10,
[data-theme="light"] [class*="bg-gradient-to-t"].from-transparent,
[data-theme="light"] [class*="bg-gradient-to-b"].via-surface,
[data-theme="light"] [class*="bg-gradient-to-b"].to-surface,
[data-theme="light"] [class*="bg-gradient-to-b"].to-brand-surface,
[data-theme="light"] .pointer-events-none[class*="bg-surface"],
[data-theme="light"] .pointer-events-none[class*="backdrop-blur"],
[data-theme="light"] [class*="bg-surface/"],
[data-theme="light"] .bg-surface\/40,
[data-theme="light"] .bg-surface\/60,
[data-theme="light"] .bg-surface\/80,
[data-theme="light"] .mesh-gradient::before,
[data-theme="light"] .mesh-gradient::after {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

[data-theme="light"] .mesh-gradient {
  background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%) !important;
}

/* 3. Cards & Elevated Containers */
[data-theme="light"] .card,
[data-theme="light"] .bg-surface-container:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-container-high:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-surface-container-highest:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] .bg-brand-card:not(.dark-app-window):not(.dark-app-window *),
[data-theme="light"] [class*="bg-surface-container/"]:not(.dark-app-window):not(.dark-app-window *) {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 2px 0 rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

/* 4. Navbar & Navigation Header */
[data-theme="light"] header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] header .font-display {
  color: #0f172a !important;
}

[data-theme="light"] header .text-\[11px\].text-primary {
  color: #4f46e5 !important;
}

[data-theme="light"] nav a {
  color: #475569 !important;
}

[data-theme="light"] nav a:hover {
  color: #4338ca !important;
  background-color: #f1f5f9 !important;
}

/* Active Nav Indicator Pill in Light Mode */
[data-theme="light"] nav a[class*="bg-primary"],
[data-theme="light"] nav a.active {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
  border-color: #c7d2fe !important;
  font-weight: 600 !important;
}

[data-theme="light"] nav a[class*="bg-primary"] span.bg-primary,
[data-theme="light"] nav a.active span.bg-primary {
  background-color: #4338ca !important;
}

/* Mobile Dropdown Menu Light Theme Fix */
[data-theme="light"] #mobile-menu,
[data-theme="light"] .mobile-menu-drawer,
[data-theme="light"] .mobile-nav-drawer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #mobile-menu a,
[data-theme="light"] #mobile-menu button,
[data-theme="light"] #mobile-menu .mobile-dropdown > div,
[data-theme="light"] .mobile-menu-drawer a,
[data-theme="light"] .mobile-menu-drawer button {
  color: #334155 !important;
  background-color: transparent !important;
}

[data-theme="light"] #mobile-menu a:hover,
[data-theme="light"] #mobile-menu button:hover,
[data-theme="light"] #mobile-menu .mobile-dropdown > div:hover,
[data-theme="light"] .mobile-menu-drawer a:hover {
  background-color: #f1f5f9 !important;
  color: #4338ca !important;
}

[data-theme="light"] #mobile-menu .mobile-dropdown > div,
[data-theme="light"] #mobile-menu .mobile-dropdown > div * {
  color: #334155 !important;
  border-color: transparent !important;
}

[data-theme="light"] #mobile-menu .mobile-dropdown > div:hover,
[data-theme="light"] #mobile-menu .mobile-dropdown > div:hover * {
  background-color: #f1f5f9 !important;
  color: #4338ca !important;
}

[data-theme="light"] #mobile-menu a[class*="bg-primary/"],
[data-theme="light"] #mobile-menu a.active,
[data-theme="light"] .mobile-menu-drawer a.active {
  background-color: #eef2ff !important;
  color: #494bd6 !important;
  border-color: #c7d2fe !important;
}

[data-theme="light"] #mobile-menu .mobile-dropdown-sub {
  background-color: #f8fafc !important;
  border-radius: 0.5rem;
}

[data-theme="light"] #mobile-menu .mobile-dropdown-sub a {
  color: #475569 !important;
}

[data-theme="light"] #mobile-menu .mobile-dropdown-sub a:hover {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
}

[data-theme="light"] #mobile-menu .material-symbols-outlined {
  color: #64748b !important;
}

[data-theme="light"] #mobile-menu a:hover .material-symbols-outlined,
[data-theme="light"] #mobile-menu button:hover .material-symbols-outlined {
  color: #494bd6 !important;
}


/* 5. Typography & Headings */
[data-theme="light"] h1:not(.dark-app-window *),
[data-theme="light"] h2:not(.dark-app-window *),
[data-theme="light"] h3:not(.dark-app-window *),
[data-theme="light"] h4:not(.dark-app-window *),
[data-theme="light"] h5:not(.dark-app-window *),
[data-theme="light"] h6:not(.dark-app-window *),
[data-theme="light"] .font-headline-xl,
[data-theme="light"] .font-headline-lg,
[data-theme="light"] .font-headline-md,
[data-theme="light"] .font-headline-sm,
[data-theme="light"] .text-white:not(.dark-app-window *):not(.btn *):not(.btn-primary *):not(header a[href*="contact.html"] *):not(footer *) {
  color: #0f172a !important;
}

[data-theme="light"] .text-slate-100:not(.dark-app-window *):not(footer *),
[data-theme="light"] .text-slate-200:not(.dark-app-window *):not(footer *),
[data-theme="light"] .text-slate-300:not(.dark-app-window *):not(footer *),
[data-theme="light"] .text-on-surface:not(.dark-app-window *):not(footer *) {
  color: #334155 !important;
}

[data-theme="light"] .text-slate-400:not(.dark-app-window *):not(footer *),
[data-theme="light"] .text-slate-500:not(.dark-app-window *):not(footer *),
[data-theme="light"] .text-on-surface-variant:not(.dark-app-window *):not(footer *) {
  color: #64748b !important;
}

[data-theme="light"] .text-primary:not(.dark-app-window *):not(.theme-toggle-btn):not(footer *) {
  color: #4338ca !important;
}

[data-theme="light"] .text-secondary:not(.dark-app-window *):not(footer *) {
  color: #0284c7 !important;
}

/* Force dark overlay elements to retain bright crisp text in light theme */
.dark-app-window h1,
.dark-app-window h2,
.dark-app-window h3,
.dark-app-window h4,
.dark-app-window h5,
.dark-app-window h6,
.dark-app-window .text-white,
[data-theme="light"] .dark-app-window h1,
[data-theme="light"] .dark-app-window h2,
[data-theme="light"] .dark-app-window h3,
[data-theme="light"] .dark-app-window h4,
[data-theme="light"] .dark-app-window h5,
[data-theme="light"] .dark-app-window h6,
[data-theme="light"] .dark-app-window .text-white {
  color: #ffffff !important;
}

.dark-app-window .text-slate-200,
.dark-app-window .text-slate-300,
[data-theme="light"] .dark-app-window .text-slate-200,
[data-theme="light"] .dark-app-window .text-slate-300 {
  color: #e2e8f0 !important;
}

.dark-app-window .text-indigo-400,
[data-theme="light"] .dark-app-window .text-indigo-400 {
  color: #818cf8 !important;
}


[data-theme="light"] .text-tertiary:not(.dark-app-window *):not(footer *) {
  color: #7c3aed !important;
}

/* Gradient Text in Light Mode */
[data-theme="light"] .bg-clip-text {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 50%, #2563eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 6. Badges, Tags, Pills & Stat Indicators */
[data-theme="light"] .badge-pill,
[data-theme="light"] [class*="rounded-full"][class*="bg-surface-container"],
[data-theme="light"] [class*="label-sm"][class*="bg-surface-container"],
[data-theme="light"] [class*="bg-indigo-950"],
[data-theme="light"] [class*="bg-indigo-900"],
[data-theme="light"] [class*="bg-primary/20"],
[data-theme="light"] [class*="bg-primary/10"],
[data-theme="light"] [class*="bg-brand-deep/80"] {
  background-color: #e0e7ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

[data-theme="light"] [class*="bg-secondary-container"],
[data-theme="light"] [class*="bg-secondary/10"],
[data-theme="light"] [class*="bg-secondary/20"] {
  background-color: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0284c7 !important;
}

[data-theme="light"] [class*="bg-tertiary-container"],
[data-theme="light"] [class*="bg-tertiary/10"],
[data-theme="light"] [class*="bg-tertiary/20"] {
  background-color: #ede9fe !important;
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}

[data-theme="light"] [class*="text-secondary-fixed"],
[data-theme="light"] .text-secondary-fixed,
[data-theme="light"] [class*="text-secondary"],
[data-theme="light"] .text-secondary {
  color: #0284c7 !important;
}

[data-theme="light"] [class*="text-tertiary"],
[data-theme="light"] .text-tertiary {
  color: #7c3aed !important;
}

[data-theme="light"] [class*="text-primary-fixed"],
[data-theme="light"] .text-primary-fixed,
[data-theme="light"] [class*="text-indigo-300"],
[data-theme="light"] [class*="text-indigo-400"] {
  color: #4338ca !important;
}

[data-theme="light"] .material-symbols-outlined[class*="text-secondary-fixed"],
[data-theme="light"] .material-symbols-outlined[class*="text-secondary"] {
  color: #0284c7 !important;
}

[data-theme="light"] .material-symbols-outlined[class*="text-tertiary"] {
  color: #7c3aed !important;
}

[data-theme="light"] .material-symbols-outlined[class*="text-primary"] {
  color: #4338ca !important;
}

[data-theme="light"] .badge-pill span.bg-primary,
[data-theme="light"] [class*="rounded-full"][class*="bg-surface-container"] span.bg-primary {
  background-color: #4338ca !important;
}

/* Protected white text inside dark photo overlays */
[data-theme="light"] [class*="bg-gradient-to-t"] p,
[data-theme="light"] [class*="bg-gradient-to-t"] span,
[data-theme="light"] .aspect-video [class*="bg-gradient-to-t"] *,
[data-theme="light"] .portfolio-card [class*="bg-cover"] * {
  color: #ffffff !important;
}

/* Map Location Badge Overlay (Crisp Contrast in Both Themes) */
.map-location-badge {
  background-color: rgba(19, 19, 27, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

.map-location-badge p:first-child {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.map-location-badge p:last-child {
  color: #94a3b8 !important;
}

[data-theme="light"] .map-location-badge {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.16), 0 4px 6px -4px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .map-location-badge p:first-child {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .map-location-badge p:last-child {
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Icon containers */
[data-theme="light"] [class*="rounded-xl"][class*="bg-primary/10"],
[data-theme="light"] [class*="rounded-xl"][class*="bg-primary/20"],
[data-theme="light"] [class*="rounded-xl"][class*="bg-secondary/15"],
[data-theme="light"] [class*="rounded-xl"][class*="bg-secondary-container"],
[data-theme="light"] [class*="rounded-xl"][class*="bg-tertiary-container"] {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #4338ca !important;
}

/* Global removal of horizontal black lines inside cards across all pages */
.card [class*="border-t"],
.card [class*="border-b"],
.portfolio-card [class*="border-t"],
.portfolio-card [class*="border-b"],
[class*="rounded-2xl"] > div > [class*="border-t"],
[class*="rounded-2xl"] > div > [class*="border-b"],
[class*="rounded-2xl"] > [class*="border-t"],
[class*="rounded-2xl"] > [class*="border-b"],
[class*="rounded-xl"] > div > [class*="border-t"],
[class*="rounded-xl"] > div > [class*="border-b"],
[class*="rounded-xl"] > [class*="border-t"],
[class*="rounded-xl"] > [class*="border-b"],
.bg-surface-container [class*="border-t"],
.bg-surface-container [class*="border-b"],
.border-surface-container-highest.border-t,
.border-surface-container-highest.border-b,
.border-surface-container-high.border-t,
.border-surface-container-high.border-b {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

[data-theme="light"] [class*="border-surface-container-high"]:not(.dark-app-window *):not(footer *),
[data-theme="light"] [class*="border-surface-container-highest"]:not(.dark-app-window *):not(footer *),
[data-theme="light"] [class*="border-surface-container"]:not(.dark-app-window *):not(footer *) {
  border-color: #e2e8f0 !important;
}

/* Step Numbers Contrast in Light Theme */
[data-theme="light"] [class*="text-primary/30"]:not(.dark-app-window *),
[data-theme="light"] [class*="text-primary/20"]:not(.dark-app-window *),
[data-theme="light"] [class*="text-primary/40"]:not(.dark-app-window *) {
  color: #6366f1 !important;
  opacity: 0.85 !important;
}

/* CTA Banner Gradient Fix in Light Theme */
[data-theme="light"] [class*="bg-gradient-to-r"].via-surface-container,
[data-theme="light"] [class*="bg-gradient-to-r"].via-surface,
[data-theme="light"] [class*="bg-gradient-to-r"].from-primary\/20 {
  background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 50%, #e0f2fe 100%) !important;
}

/* 7. Borders, Outlines & Glows */
[data-theme="light"] .border-brand-border:not(.dark-app-window *):not(footer *),
[data-theme="light"] .border-outline-variant\/20:not(.dark-app-window *):not(footer *),
[data-theme="light"] .border-outline-variant\/30:not(.dark-app-window *):not(footer *),
[data-theme="light"] .border-white\/10:not(.dark-app-window *):not(footer *),
[data-theme="light"] .border-primary\/20:not(.dark-app-window *):not(footer *),
[data-theme="light"] .border-primary\/30:not(.dark-app-window *):not(footer *) {
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .glow-border,
[data-theme="light"] .glow-effect {
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
}

/* 8. Forms, Inputs & Buttons in Light Mode */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* Primary Gradient CTA Buttons (Light Mode) */
[data-theme="light"] .btn-primary,
[data-theme="light"] a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
[data-theme="light"] button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
[data-theme="light"] button[type="submit"]:not(header *) {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 45%, #6366f1 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 16px -2px rgba(67, 56, 202, 0.35), inset 0 1px 0 0 rgba(255, 255, 255, 0.35) !important;
}

[data-theme="light"] .btn-primary *,
[data-theme="light"] a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *) *,
[data-theme="light"] button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *) *,
[data-theme="light"] button[type="submit"]:not(header *) * {
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover,
[data-theme="light"] button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover,
[data-theme="light"] button[type="submit"]:not(header *):hover {
  background: linear-gradient(135deg, #312e81 0%, #4338ca 45%, #4f46e5 100%) !important;
  box-shadow: 0 8px 24px -2px rgba(67, 56, 202, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* Secondary Surface & Outline Buttons (Light Mode) */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline,
[data-theme="light"] a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):not([data-filter]),
[data-theme="light"] button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):not([data-filter]) {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):hover,
[data-theme="light"] button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):hover {
  background-color: #f8fafc !important;
  border-color: #6366f1 !important;
  color: #4338ca !important;
  box-shadow: 0 6px 18px rgba(67, 56, 202, 0.15) !important;
}

/* Card Action Buttons (Light Mode) */
[data-theme="light"] a[class*="bg-primary"]:not(header *):not(#mobile-menu *):not(.nav-link):not(.badge-pill):not([data-filter]) {
  background-color: #4338ca !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.28) !important;
}

[data-theme="light"] a[class*="bg-secondary-container"]:not(header *):not(#mobile-menu *) {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.28) !important;
}

[data-theme="light"] a[class*="bg-tertiary-container"]:not(header *):not(#mobile-menu *) {
  background-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28) !important;
}

/* Filter Buttons (Light Mode) */
[data-theme="light"] #portfolio-filters button.bg-primary {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.35) !important;
  border: 1px solid rgba(67, 56, 202, 0.25) !important;
}

[data-theme="light"] #portfolio-filters button:not(.bg-primary) {
  background-color: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #portfolio-filters button:not(.bg-primary):hover {
  background-color: #f1f5f9 !important;
  border-color: #6366f1 !important;
  color: #0f172a !important;
}

/* 9. Grounded Enterprise Footer (Consistent & Contrast-Grounded in Light Mode) */
[data-theme="light"] footer,
[data-theme="light"] .site-footer {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

[data-theme="light"] footer .font-display,
[data-theme="light"] footer h3,
[data-theme="light"] footer h4,
[data-theme="light"] footer strong {
  color: #0f172a !important;
}

[data-theme="light"] footer p,
[data-theme="light"] footer span:not([class*="bg-primary"]):not([class*="text-emerald"]):not(.material-symbols-outlined),
[data-theme="light"] footer a:not([class*="text-emerald"]),
[data-theme="light"] footer li,
[data-theme="light"] footer div {
  color: #475569 !important;
}

[data-theme="light"] footer a:hover:not([class*="text-emerald"]) {
  color: #4338ca !important;
}

[data-theme="light"] footer [class*="text-emerald"] {
  color: #059669 !important;
}

[data-theme="light"] footer .text-slate-400,
[data-theme="light"] footer .text-slate-500,
[data-theme="light"] footer .text-on-surface-variant {
  color: #64748b !important;
}

[data-theme="light"] footer .border-brand-border {
  border-color: #e2e8f0 !important;
}

[data-theme="light"] footer .material-symbols-outlined {
  color: #4338ca !important;
}

/* 10. Dedicated Dark App Window Mockup inside Light & Dark Modes */
.dark-app-window {
  background-color: #13131b !important;
  border-color: rgba(192, 193, 255, 0.3) !important;
  color: #e4e1ed !important;
}

.dark-app-window,
.dark-app-window * {
  color: #e4e1ed;
}

.dark-app-window .bg-surface-container-lowest,
.dark-app-window .bg-surface-container-low,
.dark-app-window .bg-surface-container,
.dark-app-window .bg-surface,
.dark-app-window .bg-brand-surface\/80,
.dark-app-window .bg-brand-surface\/90,
.dark-app-window .bg-brand-surface {
  background-color: #1f1f27 !important;
  color: #e4e1ed !important;
}

.dark-app-window .bg-surface-container-high {
  background-color: #292934 !important;
  color: #e4e1ed !important;
}

.dark-app-window .bg-surface-container-highest {
  background-color: #323240 !important;
  color: #e4e1ed !important;
}

.dark-app-window h1,
.dark-app-window h2,
.dark-app-window h3,
.dark-app-window h4,
.dark-app-window h5,
.dark-app-window h6,
.dark-app-window .text-white,
.dark-app-window [class*="text-white"] {
  color: #ffffff !important;
}

.dark-app-window p,
.dark-app-window span:not([class*="bg-"]):not([class*="text-primary"]):not([class*="text-secondary"]):not([class*="text-tertiary"]):not([class*="text-emerald"]):not([class*="text-green"]),
.dark-app-window .text-slate-300,
.dark-app-window .text-slate-400,
.dark-app-window .text-slate-500,
.dark-app-window .text-on-surface-variant {
  color: #94a3b8 !important;
}

.dark-app-window .border-brand-border,
.dark-app-window .border-surface-container-highest,
.dark-app-window .border-surface-container-high,
.dark-app-window .border-outline-variant,
.dark-app-window [class*="border-surface-container"] {
  border-color: #34343d !important;
}

/* Neutralize decorative blur glow blobs inside dark app windows */
.dark-app-window .pointer-events-none[class*="blur"],
.dark-app-window [class*="blur-3xl"],
.dark-app-window [class*="blur-2xl"],
.dark-app-window [class*="blur-xl"],
.dark-app-window [class*="blur-lg"],
.dark-app-window [class*="blur-md"],
.dark-app-window [class*="blur"] {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Preserve dark translucent pill badges inside dark app windows */
.dark-app-window [class*="bg-emerald-500/10"],
.dark-app-window [class*="bg-emerald-500/15"],
.dark-app-window [class*="bg-emerald-500/20"],
.dark-app-window [class*="bg-emerald-950/50"] {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #34d399 !important;
}

.dark-app-window [class*="bg-primary/10"],
.dark-app-window [class*="bg-primary/15"],
.dark-app-window [class*="bg-primary/20"] {
  background-color: rgba(192, 193, 255, 0.15) !important;
  border-color: rgba(192, 193, 255, 0.3) !important;
  color: #c0c1ff !important;
}

.dark-app-window [class*="bg-secondary/10"],
.dark-app-window [class*="bg-secondary/15"],
.dark-app-window [class*="bg-secondary/20"] {
  background-color: rgba(173, 198, 255, 0.15) !important;
  border-color: rgba(173, 198, 255, 0.3) !important;
  color: #adc6ff !important;
}

.dark-app-window [class*="bg-tertiary/10"],
.dark-app-window [class*="bg-tertiary/15"],
.dark-app-window [class*="bg-tertiary/20"] {
  background-color: rgba(208, 188, 255, 0.15) !important;
  border-color: rgba(208, 188, 255, 0.3) !important;
  color: #d0bcff !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  border: 1px solid var(--border);
  color: var(--primary);
  cursor: pointer;
  transition: var(--transition);
}

.theme-toggle-btn:hover {
  background: var(--surface-high);
  border-color: var(--primary);
  transform: translateY(-1px);
}

[data-theme="light"] .theme-toggle-btn {
  color: #d97706;
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

/* Base Reset & Standards */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--bg-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-base);
  color: var(--text-main);
  overflow-x: hidden;
}

::selection {
  background-color: var(--cobalt);
  color: #ffffff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--surface-lowest);
}
::-webkit-scrollbar-thumb {
  background: var(--surface-high);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-container);
}

/* Typography Hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-white);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.35rem); font-weight: 700; }
h3 { font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.6rem); font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.mesh-gradient {
  background: radial-gradient(at 0% 0%, rgba(73, 75, 214, 0.22) 0px, transparent 50%),
              radial-gradient(at 100% 0%, rgba(160, 120, 255, 0.18) 0px, transparent 50%),
              radial-gradient(at 50% 100%, rgba(5, 102, 217, 0.15) 0px, transparent 50%);
}

.mesh-glow-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(73, 75, 214, 0.12), transparent 70%);
  pointer-events: none;
}

/* Text Gradients */
.text-gradient {
  background: linear-gradient(135deg, #ffffff 10%, var(--primary) 50%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
  background: linear-gradient(135deg, var(--primary) 0%, #e9ddff 50%, var(--electric-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Badges & Pills */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-container);
  border: 1px solid var(--border-glow);
  color: var(--primary);
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--glow-primary);
  text-transform: uppercase;
}

.pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ==========================================================================
   Comprehensive Enterprise Buttons System (All Pages, Excluding Navbar Items)
   ========================================================================== */

/* 1. Base Button Standard */
.btn,
a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):not([data-filter]),
button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):not([data-filter]),
button[type="submit"]:not(header *),
#portfolio-filters button,
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s ease,
              border-color 0.22s ease,
              color 0.22s ease !important;
}

/* Tactile Click Press for All Buttons */
.btn:active,
a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):active,
button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):active,
a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):active,
button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):active,
button[type="submit"]:not(header *):active,
#portfolio-filters button:active,
.tab-btn:active {
  transform: scale(0.97) translateY(0) !important;
}

/* Arrow & Icon Nudge on Hover */
.btn:hover .material-symbols-outlined,
a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover .material-symbols-outlined,
button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover .material-symbols-outlined,
a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):hover .material-symbols-outlined,
button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):hover .material-symbols-outlined,
button[type="submit"]:not(header *):hover .material-symbols-outlined,
a[href*="erp.html"]:hover .material-symbols-outlined,
a[href*="distribution.html"]:hover .material-symbols-outlined,
a[href*="contact.html"]:hover .material-symbols-outlined {
  transform: translateX(3px) !important;
}

/* 2. Primary Gradient CTA Buttons (Dark Default) */
.btn-primary,
a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *),
button[type="submit"]:not(header *) {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 45%, #7c3aed 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 4px 16px -2px rgba(99, 102, 241, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.3) !important;
  letter-spacing: -0.01em;
}

.btn-primary:hover,
a[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover,
button[class*="bg-gradient-to-r"]:not(header *):not(#mobile-menu *):hover,
button[type="submit"]:not(header *):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -2px rgba(99, 102, 241, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.45) !important;
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 45%, #6d28d9 100%) !important;
  color: #ffffff !important;
}

/* 3. Secondary Glass & Surface Buttons (Dark Default) */
.btn-secondary,
.btn-outline,
a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):not([data-filter]),
button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):not([data-filter]) {
  background: rgba(30, 31, 42, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(192, 193, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.btn-secondary:hover,
.btn-outline:hover,
a[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.card):not(.portfolio-card):hover,
button[class*="bg-surface-container"]:not(header *):not(#mobile-menu *):not(.theme-toggle-btn):hover {
  background: rgba(43, 45, 60, 0.95) !important;
  border-color: rgba(192, 193, 255, 0.45) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -2px rgba(99, 102, 241, 0.25) !important;
}

/* 4. Card Action Buttons (Inside Solutions, ERP, Distribution, etc.) */
a[class*="bg-primary"]:not(header *):not(#mobile-menu *):not(.nav-link):not(.badge-pill):not([data-filter]),
a[class*="bg-secondary-container"]:not(header *):not(#mobile-menu *) {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

a[class*="bg-primary"]:not(header *):not(#mobile-menu *):not(.nav-link):not(.badge-pill):not([data-filter]):hover,
a[class*="bg-secondary-container"]:not(header *):not(#mobile-menu *):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4) !important;
  opacity: 0.96;
}

/* 5. Filter Category Tabs (Case Studies) */
#portfolio-filters button {
  border-radius: 9999px !important;
  padding: 0.5rem 1.15rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

#portfolio-filters button.bg-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 0.9rem 1.8rem;
  font-size: 1rem;
}

/* Top Information Bar */
.top-bar {
  background-color: var(--bg-deep);
  color: var(--text-dim);
  font-size: 0.775rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(192, 193, 255, 0.1);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-bar a {
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.top-bar a:hover {
  color: var(--primary);
}

.top-bar-divider {
  color: var(--surface-highest);
}

/* Header & Navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--surface-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nav-container, .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.75rem;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-logo-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glow);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: var(--transition);
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.05);
  border-color: var(--primary);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name, .brand-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.brand-sub, .brand-subtitle {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-top: 0.2rem;
}

/* Nav Menu */
.nav-menu, .desktop-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-link {
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary);
  background-color: var(--surface-container);
}

.nav-link.active {
  color: var(--primary);
  background-color: rgba(192, 193, 255, 0.1);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}

/* Nav Dropdown */
.nav-item-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.6rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 110;
}

.nav-item-dropdown:hover .dropdown-menu,
.nav-item-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: var(--transition);
}

.dropdown-link:hover {
  background-color: var(--surface-high);
  color: var(--text-white);
}

.dropdown-link .material-symbols-outlined {
  color: var(--primary);
  font-size: 1.15rem;
}

/* Mobile Toggle & Drawer */
.mobile-toggle, .mobile-toggle-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-menu-drawer, .mobile-nav-drawer {
  display: none;
  background-color: var(--surface-lowest);
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.5rem;
}

.mobile-menu-drawer.open, .mobile-nav-drawer.open {
  display: block;
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border-light);
}

.mobile-nav-link.active, .mobile-nav-link:hover {
  color: var(--primary);
  font-weight: 600;
}

/* Cards & Surfaces */
.card {
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  position: relative;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
}

.card:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.6), var(--glow-primary);
}

.card-highlight {
  border-color: rgba(192, 193, 255, 0.4);
  background: linear-gradient(180deg, var(--surface-container) 0%, var(--surface-low) 100%);
}

.card-header-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background-color: var(--surface-high);
  border: 1px solid var(--border-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: #ffffff;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Grid Layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
}

/* Hero Section */
.hero-section {
  position: relative;
  padding: 4.5rem 0 5.5rem 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-title {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 38rem;
  line-height: 1.65;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}

.hero-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.trust-item {
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: var(--transition);
}

.trust-item:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
}

.trust-item-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.trust-item-label {
  font-size: 0.775rem;
  color: var(--text-dim);
  margin-top: 0.25rem;
}

.hero-visual-card {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--border-glow);
  background-color: var(--surface-container);
  padding: 0.65rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), var(--glow-primary);
}

.hero-visual-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  display: block;
}

.hero-visual-status {
  margin-top: 0.75rem;
  padding: 0.65rem 1rem;
  background-color: var(--surface-lowest);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.775rem;
  color: var(--text-muted);
}

/* Section Header Component */
.section-header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 3.5rem auto;
}

.section-tag {
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.section-title {
  margin-bottom: 1rem;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* Feature List */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.feature-item .material-symbols-outlined {
  color: var(--emerald);
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Metric / Stat Box */
.stat-box {
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Architecture & Diagram Blocks */
.workflow-step {
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  position: relative;
  transition: var(--transition);
}

.workflow-step:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cobalt), var(--violet));
  color: #ffffff;
  font-weight: 800;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* Tab Switcher */
.tab-container {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.tab-btn:hover {
  color: #ffffff;
  border-color: var(--border-glow);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--cobalt), #6366f1);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: var(--glow-cobalt);
}

/* Forms & Inputs */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.form-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 0.8rem 1rem;
  background-color: var(--surface-lowest);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: var(--transition);
  outline: none;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* Case Study / Portfolio Item */
.case-study-card {
  background-color: var(--surface-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.case-study-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.case-study-content {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.tag-badge {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
  background-color: var(--surface-high);
  color: var(--primary);
  font-size: 0.725rem;
  font-weight: 600;
}

.case-metric {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.case-metric-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--emerald);
}

.case-metric-txt {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* CTA Banner */
.cta-banner {
  background: radial-gradient(circle at 100% 0%, rgba(128, 131, 255, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 0% 100%, rgba(73, 75, 214, 0.2) 0%, transparent 50%),
              var(--surface-container);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-2xl);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.cta-banner-content {
  max-width: 44rem;
  margin: 0 auto;
}

/* Footer */
.site-footer {
  background-color: var(--bg-deep);
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.875rem;
  padding-top: 4.5rem;
  margin-top: auto;
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--border);
}

.footer-brand p {
  font-size: 0.825rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  max-width: 22rem;
}

.footer-col-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-link {
  font-size: 0.825rem;
  color: var(--text-muted);
  transition: var(--transition);
}

.footer-link:hover {
  color: var(--primary);
  padding-left: 0.25rem;
}

.footer-bottom {
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* Enterprise Loading Screen Overlay */
.enterprise-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--surface-lowest);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
  overflow: hidden;
}

.enterprise-loader-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-glow-circle {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 75, 214, 0.25) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: pulse-glow 3s infinite alternate;
}

.loader-stage {
  position: relative;
  z-index: 10;
  max-width: 520px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-emblem-wrap {
  position: relative;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: var(--surface-container);
  border: 1px solid var(--border-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  box-shadow: 0 0 35px rgba(128, 131, 255, 0.3);
}

.loader-emblem-img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.loader-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.25em;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.loader-subtitle {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  color: var(--secondary);
  margin-bottom: 1.75rem;
}

.loader-progress-wrap {
  width: 100%;
  margin-top: 1rem;
}

.loader-telemetry {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.loader-bar-bg {
  width: 100%;
  height: 6px;
  background-color: var(--surface-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary-container), var(--cobalt), var(--primary));
  box-shadow: 0 0 12px rgba(192, 193, 255, 0.7);
  transition: width 0.15s ease-out;
}

.loader-skip-btn {
  margin-top: 1.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition);
}

.loader-skip-btn:hover {
  color: #ffffff;
  border-color: var(--primary);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  background-color: var(--surface-container);
  border: 1px solid var(--border-glow);
  color: #ffffff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--glow-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  pointer-events: auto;
  animation: slide-in-toast 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slide-in-toast {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Back to Top Floating Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 90;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--surface-container);
  border: 1px solid var(--border-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--cobalt);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: var(--glow-cobalt);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .nav-menu, .desktop-nav, .nav-item-dropdown {
    display: none !important;
  }
  .mobile-toggle, .mobile-toggle-btn {
    display: inline-flex !important;
  }
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .grid-12 {
    grid-template-columns: 1fr;
  }
  .hero-trust-grid {
    grid-template-columns: 1fr;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* ==========================================================================
   SriLions Enterprise Animation Suite
   1. Animated Number Counters
   2. Scroll-Triggered Stagger Reveals
   3. Cursor-Following Spotlight Glow
   4. Live SVG Data-Flow & Dash Animation
   5. Ambient Aurora Mesh Background Drift
   6. Micro-Interactions & Button Polish
   ========================================================================== */

/* 2. Scroll-Triggered Stagger Reveals */
.reveal-init {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 3. Cursor-Following Spotlight Glow */
.spotlight-card {
  position: relative;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(192, 193, 255, 0.16), transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 2;
}

[data-theme="light"] .spotlight-card::before {
  background: radial-gradient(400px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(99, 102, 241, 0.12), transparent 70%);
}

.spotlight-card:hover::before {
  opacity: 1;
}

/* 4. Live SVG Data-Flow Animation */
.svg-flow-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw-chart 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes draw-chart {
  to {
    stroke-dashoffset: 0;
  }
}

.pulse-node {
  animation: pulse-node-glow 2s infinite ease-in-out;
}

@keyframes pulse-node-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.4;
  }
}

/* 5. Ambient Aurora Mesh Background Drift */
@keyframes aurora-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(25px, -15px) scale(1.06);
  }
  100% {
    transform: translate(-15px, 15px) scale(0.97);
  }
}

.mesh-gradient {
  position: relative;
  overflow: hidden;
}

.mesh-gradient::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.14) 0%, transparent 45%),
              radial-gradient(circle at 75% 65%, rgba(168, 85, 247, 0.12) 0%, transparent 45%);
  animation: aurora-float 16s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] .mesh-gradient::after {
  background: radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 75% 65%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
}

/* 6. Micro-Interactions & Button Polish */
.btn,
a[class*="bg-gradient-to-r"],
button[class*="bg-gradient-to-r"] {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, opacity 0.2s ease !important;
}

.btn:active,
a[class*="bg-gradient-to-r"]:active,
button[class*="bg-gradient-to-r"]:active {
  transform: scale(0.97) !important;
}

.btn:hover .material-symbols-outlined,
a[class*="bg-gradient-to-r"]:hover .material-symbols-outlined,
button[class*="bg-gradient-to-r"]:hover .material-symbols-outlined {
  transform: translateX(4px);
}

.material-symbols-outlined {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accessibility Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-init,
  .svg-flow-path,
  .mesh-gradient::after,
  .pulse-node {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Toast Notification System (High Contrast & Clear in Both Themes)
   ========================================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  background-color: #1a1a24;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  animation: toast-slide-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast .toast-icon {
  font-size: 20px;
  color: #10b981 !important;
}

.toast .toast-message {
  color: #ffffff !important;
}

[data-theme="light"] .toast {
  background-color: #ffffff;
  color: #0f172a !important;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.16), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .toast .toast-icon {
  color: #059669 !important;
}

[data-theme="light"] .toast .toast-message {
  color: #0f172a !important;
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   Modern 'Talk to Us' Navbar Button
   ========================================================================== */
.talk-to-us-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px 0 rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  cursor: pointer;
}

.talk-to-us-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 20px 0 rgba(124, 58, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  color: #ffffff !important;
}

.talk-to-us-btn:active {
  transform: scale(0.97) translateY(0);
}

.talk-to-us-btn .talk-to-us-icon {
  font-size: 16px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #ffffff !important;
}

.talk-to-us-btn:hover .talk-to-us-icon {
  transform: translateX(3px);
}

.talk-to-us-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: pulse-beacon 2s infinite ease-in-out;
  display: inline-block;
}

@keyframes pulse-beacon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

[data-theme="light"] .talk-to-us-btn {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  box-shadow: 0 4px 14px 0 rgba(67, 56, 202, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(67, 56, 202, 0.2);
  color: #ffffff !important;
}

[data-theme="light"] .talk-to-us-btn:hover {
  background: linear-gradient(135deg, #3730a3 0%, #4f46e5 100%);
  box-shadow: 0 6px 20px 0 rgba(67, 56, 202, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
}

/* ==========================================================================
   Navigation Dropdown (BizManage-PRO Suite Menu)
   ========================================================================== */
header, .site-header, header > div, header nav {
  overflow: visible !important;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: visible !important;
}

.nav-dropdown-toggle {
  user-select: none;
}

.nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 260px !important;
  background: #191a26 !important;
  background-color: rgba(22, 23, 33, 0.98) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 18px !important;
  padding: 8px !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.7), 0 0 25px rgba(99, 102, 241, 0.25) !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s;
  z-index: 99999 !important;
}

/* Bridge hover gap so mouse can move smoothly into the menu */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu,
.group:hover .nav-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  display: block !important;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #cbd5e1 !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown-item span {
  color: #cbd5e1 !important;
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(4px);
}

.nav-dropdown-item:hover span {
  color: #ffffff !important;
}

.nav-dropdown-item .dropdown-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.nav-dropdown-item:hover .dropdown-item-icon {
  transform: scale(1.1);
}

/* Light Theme Navigation Dropdown Override - High Contrast Fix */
[data-theme="light"] .nav-dropdown-menu,
html[data-theme="light"] .nav-dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.18), 0 0 1px 1px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] .nav-dropdown-item,
[data-theme="light"] .nav-dropdown-item *,
html[data-theme="light"] .nav-dropdown-item,
html[data-theme="light"] .nav-dropdown-item * {
  color: #1e293b !important;
  background-color: transparent;
}

[data-theme="light"] .nav-dropdown-item:hover,
html[data-theme="light"] .nav-dropdown-item:hover {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .nav-dropdown-item:hover,
[data-theme="light"] .nav-dropdown-item:hover *,
html[data-theme="light"] .nav-dropdown-item:hover,
html[data-theme="light"] .nav-dropdown-item:hover * {
  color: #4338ca !important;
}

[data-theme="light"] .nav-dropdown-item .dropdown-item-icon,
html[data-theme="light"] .nav-dropdown-item .dropdown-item-icon {
  background-color: #f1f5f9 !important;
}

[data-theme="light"] .nav-dropdown-item:hover .dropdown-item-icon,
html[data-theme="light"] .nav-dropdown-item:hover .dropdown-item-icon {
  background-color: #e0e7ff !important;
}

/* Right-to-Left Infinite Card Marquee Scroll Animation */
@keyframes marqueeScrollRightToLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee-scroll {
  display: flex;
  width: max-content;
  animation: marqueeScrollRightToLeft 35s linear infinite;
  will-change: transform;
}

.animate-marquee-scroll:hover {
  animation-play-state: paused;
}

/* Navbar Search Target Highlight Animation */
@keyframes searchTargetPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(192, 193, 255, 0.8), 0 0 35px rgba(128, 131, 255, 0.7);
    border-color: rgba(192, 193, 255, 1);
    transform: scale(1.02);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(192, 193, 255, 0.25), 0 0 45px rgba(160, 120, 255, 0.9);
    border-color: rgba(160, 120, 255, 1);
    transform: scale(1.02);
  }
  100% {
    box-shadow: none;
    transform: scale(1);
  }
}

.search-target-highlight {
  animation: searchTargetPulse 2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  scroll-margin-top: 100px;
}

/* Custom Styled Select Dropdown Menus with Curved Edges */
.custom-select-wrapper {
  position: relative;
  display: block;
}

.custom-select-trigger {
  border-radius: 1rem !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.custom-select-options {
  border-radius: 1.25rem !important;
  border: 1px solid rgba(192, 193, 255, 0.25) !important;
  background-color: #191923 !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.75), 0 0 1px 1px rgba(192, 193, 255, 0.1) !important;
  overflow: hidden;
}

.custom-select-option {
  border-radius: 0.75rem !important;
}

/* Light Theme Custom Select Styling */
[data-theme="light"] .custom-select-trigger {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .custom-select-options {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.18), 0 0 1px 1px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .custom-select-option {
  color: #334155 !important;
}

[data-theme="light"] .custom-select-option:hover {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
}

[data-theme="light"] .custom-select-option.bg-primary\/20 {
  background-color: #e0e7ff !important;
  color: #4338ca !important;
}

/* ==========================================================================
   Comprehensive Mobile Layout Alignment & Anti-Overflow Engine
   Prevents horizontal scrolling, right-side white/black gaps, and mobile misalignments
   across all pages & device viewports (320px - 768px).
   ========================================================================== */

html {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box;
}

body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Force container section boundaries so fixed-width elements or background glow blobs cannot expand body width */
header,
main,
footer,
section,
.container,
div[class*="max-w-"] {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Auto-clip horizontal overflow on all major layout sections & background glow wrappers */
section,
main,
header,
footer,
.mesh-gradient {
  overflow-x: hidden;
}

/* Ensure images, svgs, videos, and tables never cause overflow */
img, svg, video, iframe {
  max-width: 100%;
}

table {
  max-width: 100%;
}

/* Top Announcement Banner Responsive Styling */
.top-announcement-banner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Mobile Header & Responsive Layout Rules (<640px) */
@media (max-width: 639px) {
  /* Prevent header items from bursting mobile screen edges */
  header .h-20 {
    height: 4.25rem !important;
  }

  /* Scale down header action buttons so Talk to Us + Theme + Hamburger fit perfectly */
  .talk-to-us-btn {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.75rem !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
  }

  .talk-to-us-btn .talk-to-us-icon {
    font-size: 14px !important;
  }

  /* Compact brand logo header text on small screens */
  header a.group.shrink-0 {
    gap: 0.5rem !important;
  }

  header .font-display.text-xl {
    font-size: 1.1rem !important;
  }

  header .text-\[11px\] {
    font-size: 9px !important;
    letter-spacing: 0.02em !important;
  }

  /* Fix grid and flex container paddings on phone screens */
  .px-4, .px-6, .px-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Ensure card grids & flex wrappers fit smoothly within 100% viewport width */
  .grid {
    max-width: 100% !important;
  }

  /* Slider cards fit within mobile width */
  .animate-marquee-scroll > div {
    max-width: 85vw !important;
  }
}





/* Mobile Menu Drawer Toggle Rule */
#mobile-menu.open,
.mobile-menu-drawer.open,
.mobile-nav-drawer.open {
  display: block !important;
}


/* ==========================================================================
   Desktop Navigation Dropdown (.nav-dropdown-menu) Complete Fix
   High-specificity rules to guarantee 100% visibility in Light & Dark Mode
   ========================================================================== */

/* DARK MODE DEFAULT */
header .nav-dropdown-menu,
.nav-dropdown-menu {
  background-color: #131420 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.8), 0 0 25px rgba(192, 193, 255, 0.12) !important;
}

header .nav-dropdown-menu a.nav-dropdown-item,
header .nav-dropdown-menu a.nav-dropdown-item *,
.nav-dropdown-menu a.nav-dropdown-item,
.nav-dropdown-menu a.nav-dropdown-item * {
  color: #e2e8f0 !important;
}

header .nav-dropdown-menu a.nav-dropdown-item:hover,
.nav-dropdown-menu a.nav-dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

header .nav-dropdown-menu a.nav-dropdown-item:hover,
header .nav-dropdown-menu a.nav-dropdown-item:hover *,
.nav-dropdown-menu a.nav-dropdown-item:hover,
.nav-dropdown-menu a.nav-dropdown-item:hover * {
  color: #ffffff !important;
}

/* LIGHT MODE OVERRIDES - High Specificity */
[data-theme="light"] header .nav-dropdown-menu,
[data-theme="light"] .nav-dropdown-menu,
html[data-theme="light"] header .nav-dropdown-menu,
html[data-theme="light"] .nav-dropdown-menu {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.2), 0 0 1px 1px rgba(15, 23, 42, 0.08) !important;
}

[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item,
[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item *,
[data-theme="light"] .nav-dropdown-menu a.nav-dropdown-item,
[data-theme="light"] .nav-dropdown-menu a.nav-dropdown-item *,
html[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item,
html[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item * {
  color: #0f172a !important;
  background-color: transparent !important;
}

[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover,
[data-theme="light"] .nav-dropdown-menu a.nav-dropdown-item:hover,
html[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover {
  background-color: #e0e7ff !important;
  background: #e0e7ff !important;
}

[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover,
[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover *,
[data-theme="light"] .nav-dropdown-menu a.nav-dropdown-item:hover,
[data-theme="light"] .nav-dropdown-menu a.nav-dropdown-item:hover *,
html[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover,
html[data-theme="light"] header .nav-dropdown-menu a.nav-dropdown-item:hover * {
  color: #3730a3 !important;
}

[data-theme="light"] .dropdown-item-icon,
html[data-theme="light"] .dropdown-item-icon {
  background-color: #eef2ff !important;
}

/* ==========================================================================
   LIGHT MODE HIGH-CONTRAST ACCENT & DARK CONTAINER PROTECTIONS
   ========================================================================== */

/* High contrast accent colors for light theme */
[data-theme="light"] body:not(.dark-app-window) .text-amber-400,
html[data-theme="light"] body:not(.dark-app-window) .text-amber-400 {
  color: #d97706 !important;
}

[data-theme="light"] body:not(.dark-app-window) .text-amber-300,
html[data-theme="light"] body:not(.dark-app-window) .text-amber-300 {
  color: #b45309 !important;
}

[data-theme="light"] body:not(.dark-app-window) .text-emerald-400,
html[data-theme="light"] body:not(.dark-app-window) .text-emerald-400 {
  color: #047857 !important;
}

/* Ensure dark application windows and CTA containers maintain dark mode legibility in light mode */
[data-theme="light"] .dark-app-window,
html[data-theme="light"] .dark-app-window {
  background-color: #0b0c16 !important;
  color: #f8fafc !important;
}

[data-theme="light"] .dark-app-window .text-amber-400,
html[data-theme="light"] .dark-app-window .text-amber-400 {
  color: #fbbf24 !important;
}

[data-theme="light"] .dark-app-window .text-amber-300,
html[data-theme="light"] .dark-app-window .text-amber-300 {
  color: #fcd34d !important;
}

[data-theme="light"] .dark-app-window .text-emerald-400,
html[data-theme="light"] .dark-app-window .text-emerald-400 {
  color: #34d399 !important;
}

[data-theme="light"] .dark-app-window .text-emerald-300,
html[data-theme="light"] .dark-app-window .text-emerald-300 {
  color: #6ee7b7 !important;
}

[data-theme="light"] .dark-app-window .text-white,
html[data-theme="light"] .dark-app-window .text-white {
  color: #ffffff !important;
}

[data-theme="light"] .dark-app-window .text-slate-200,
html[data-theme="light"] .dark-app-window .text-slate-200 {
  color: #e2e8f0 !important;
}

[data-theme="light"] .dark-app-window .text-slate-300,
html[data-theme="light"] .dark-app-window .text-slate-300 {
  color: #cbd5e1 !important;
}

[data-theme="light"] .dark-app-window .text-slate-400,
html[data-theme="light"] .dark-app-window .text-slate-400 {
  color: #94a3b8 !important;
}

/* ==========================================================================
   PRIMARY & GRADIENT CTA BUTTON TEXT CONTRAST GUARANTEE
   ========================================================================== */

/* Ensure all filled primary action buttons retain bright crisp white text in Light & Dark mode and disable default outline boxes */
a[class*="bg-gradient-to-r"],
a[class*="bg-gradient-to-r"] *,
a[class*="bg-emerald"],
a[class*="bg-emerald"] *,
a[class*="bg-amber"],
a[class*="bg-amber"] *,
a.talk-to-us-btn,
a.talk-to-us-btn *,
.btn-primary,
.btn-primary * {
  color: #ffffff !important;
  outline: none !important;
}

a[class*="bg-gradient-to-r"]:focus,
a[class*="bg-emerald"]:focus,
a[class*="bg-amber"]:focus,
a.talk-to-us-btn:focus,
.btn-primary:focus {
  outline: none !important;
}

/* Dark app window pill badges & buttons contrast guarantee */
.dark-app-window [class*="bg-amber"],
.dark-app-window [class*="text-amber-400"],
[data-theme="light"] .dark-app-window [class*="text-amber-400"] {
  color: #fbbf24 !important;
}

.dark-app-window a[class*="bg-surface-container"],
[data-theme="light"] .dark-app-window a[class*="bg-surface-container"] {
  background-color: #1f1f27 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.dark-app-window a[class*="bg-surface-container"] *,
[data-theme="light"] .dark-app-window a[class*="bg-surface-container"] * {
  color: #ffffff !important;
}

/* Navbar Dropdown Menu Vibrant Icon Colors Guarantee */
.dropdown-item-icon[class*="bg-indigo-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-indigo-500"] {
  background-color: rgba(99, 102, 241, 0.18) !important;
  color: #818cf8 !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}

.dropdown-item-icon[class*="bg-cyan-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-cyan-500"] {
  background-color: rgba(6, 182, 212, 0.18) !important;
  color: #22d3ee !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
}

.dropdown-item-icon[class*="bg-purple-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-purple-500"] {
  background-color: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.35) !important;
}

.dropdown-item-icon[class*="bg-orange-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-orange-500"] {
  background-color: rgba(249, 115, 22, 0.18) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.35) !important;
}

.dropdown-item-icon[class*="bg-emerald-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-emerald-500"] {
  background-color: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.dropdown-item-icon[class*="bg-amber-500"],
[data-theme="light"] .dropdown-item-icon[class*="bg-amber-500"] {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Mobile Navigation Toggle & Close Button Theme Standards */
#mobile-toggle,
.mobile-toggle,
.mobile-toggle-btn {
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  border: 1px solid var(--border);
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
  outline: none !important;
}

@media (min-width: 1024px) {
  #mobile-toggle,
  .mobile-toggle,
  .mobile-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  #mobile-toggle,
  .mobile-toggle,
  .mobile-toggle-btn {
    display: inline-flex !important;
  }
}

#mobile-toggle:hover,
.mobile-toggle:hover,
.mobile-toggle-btn:hover {
  background: var(--surface-high);
  color: #ffffff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

[data-theme="light"] #mobile-toggle,
[data-theme="light"] .mobile-toggle,
[data-theme="light"] .mobile-toggle-btn,
html[data-theme="light"] #mobile-toggle,
html[data-theme="light"] .mobile-toggle,
html[data-theme="light"] .mobile-toggle-btn {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #mobile-toggle .material-symbols-outlined,
[data-theme="light"] .mobile-toggle .material-symbols-outlined,
[data-theme="light"] .mobile-toggle-btn .material-symbols-outlined,
html[data-theme="light"] #mobile-toggle .material-symbols-outlined {
  color: #0f172a !important;
}

[data-theme="light"] #mobile-toggle:hover,
[data-theme="light"] .mobile-toggle:hover,
[data-theme="light"] .mobile-toggle-btn:hover,
html[data-theme="light"] #mobile-toggle:hover,
html[data-theme="light"] .mobile-toggle:hover,
html[data-theme="light"] .mobile-toggle-btn:hover {
  background-color: #e2e8f0 !important;
  color: #4338ca !important;
  border-color: #6366f1 !important;
}

[data-theme="light"] #mobile-toggle:hover .material-symbols-outlined,
[data-theme="light"] .mobile-toggle:hover .material-symbols-outlined,
[data-theme="light"] .mobile-toggle-btn:hover .material-symbols-outlined {
  color: #4338ca !important;
}

/* Guaranteed Fixed Sticky Locked Navbar Header */
html, body {
  overflow-x: clip !important;
}

header,
header.sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* -------------------------------------------------------------
 * Video Duration Timestamp Badges (Light & Dark Theme Safe)
 * ------------------------------------------------------------- */
.video-duration-badge,
[data-theme="light"] .video-duration-badge,
html[data-theme="light"] .video-duration-badge {
  background-color: rgba(15, 23, 42, 0.92) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* -------------------------------------------------------------
 * Filter Category Tab Buttons (Light & Dark Theme Safe)
 * ------------------------------------------------------------- */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.125rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  background-color: #1f1f27;
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-btn:hover {
  background-color: #292934;
  color: #ffffff;
  border-color: rgba(192, 193, 255, 0.4);
  transform: translateY(-1px);
}

.tab-btn.active,
.tab-btn.active:hover {
  background-color: #494bd6 !important;
  color: #ffffff !important;
  border-color: #6366f1 !important;
  box-shadow: 0 4px 14px rgba(73, 75, 214, 0.45) !important;
}

/* Light Mode Overrides for Filter Tabs */
[data-theme="light"] .tab-btn,
html[data-theme="light"] .tab-btn {
  background-color: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .tab-btn:hover,
html[data-theme="light"] .tab-btn:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #6366f1 !important;
}

[data-theme="light"] .tab-btn.active,
[data-theme="light"] .tab-btn.active:hover,
html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .tab-btn.active:hover {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
  color: #ffffff !important;
  border-color: #312e81 !important;
  box-shadow: 0 4px 16px rgba(67, 56, 202, 0.35) !important;
}

/* -------------------------------------------------------------
 * YouTube Subscribe & Red CTA Buttons Text Color (Light & Dark Theme Safe)
 * ------------------------------------------------------------- */
.yt-subscribe-btn,
a.yt-subscribe-btn,
button.yt-subscribe-btn,
[data-theme="light"] .yt-subscribe-btn,
[data-theme="light"] a.yt-subscribe-btn,
html[data-theme="light"] .yt-subscribe-btn,
html[data-theme="light"] a.yt-subscribe-btn,
[data-theme="light"] a[class*="bg-red-600"],
html[data-theme="light"] a[class*="bg-red-600"],
[data-theme="light"] button[class*="bg-red-600"],
html[data-theme="light"] button[class*="bg-red-600"] {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

.yt-subscribe-btn *,
[data-theme="light"] .yt-subscribe-btn *,
html[data-theme="light"] .yt-subscribe-btn *,
[data-theme="light"] a[class*="bg-red-600"] *,
html[data-theme="light"] a[class*="bg-red-600"] * {
  color: #ffffff !important;
}

.yt-subscribe-btn:hover,
[data-theme="light"] .yt-subscribe-btn:hover,
html[data-theme="light"] .yt-subscribe-btn:hover,
[data-theme="light"] a[class*="bg-red-600"]:hover,
html[data-theme="light"] a[class*="bg-red-600"]:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}





/* -------------------------------------------------------------
 * Contact Page Cards Light & Dark Mode Polish
 * ------------------------------------------------------------- */
[data-theme="light"] .contact-card,
html[data-theme="light"] .contact-card {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .contact-card h3,
html[data-theme="light"] .contact-card h3 {
  color: #0f172a !important;
}

[data-theme="light"] .contact-card p,
html[data-theme="light"] .contact-card p {
  color: #475569 !important;
}

[data-theme="light"] .contact-card .text-indigo-400,
html[data-theme="light"] .contact-card .text-indigo-400 {
  color: #4338ca !important;
}

[data-theme="light"] .contact-card .text-emerald-400,
html[data-theme="light"] .contact-card .text-emerald-400 {
  color: #047857 !important;
}

[data-theme="light"] .contact-card .text-purple-400,
html[data-theme="light"] .contact-card .text-purple-400 {
  color: #6b21a8 !important;
}

[data-theme="light"] .contact-card .text-amber-400,
html[data-theme="light"] .contact-card .text-amber-400 {
  color: #b45309 !important;
}

[data-theme="light"] .contact-card .bg-emerald-600,
html[data-theme="light"] .contact-card .bg-emerald-600 {
  background-color: #059669 !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------
 * Video Category Thumbnail Badges (Light & Dark Theme Contrast Guarantee)
 * ------------------------------------------------------------- */
.video-badge-pill,
[data-theme="light"] .video-badge-pill,
html[data-theme="light"] .video-badge-pill {
  background-color: rgba(15, 23, 42, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

.video-badge-pill *,
[data-theme="light"] .video-badge-pill *,
html[data-theme="light"] .video-badge-pill * {
  color: #ffffff !important;
}

/* Category Specific Accent Borders & Colors */
.video-badge-finance,
[data-theme="light"] .video-badge-finance,
html[data-theme="light"] .video-badge-finance {
  border-color: rgba(245, 158, 11, 0.85) !important;
}

.video-badge-finance *,
[data-theme="light"] .video-badge-finance *,
html[data-theme="light"] .video-badge-finance * {
  color: #fbbf24 !important;
}

.video-badge-erp,
[data-theme="light"] .video-badge-erp,
html[data-theme="light"] .video-badge-erp {
  border-color: rgba(129, 140, 248, 0.85) !important;
}

.video-badge-erp *,
[data-theme="light"] .video-badge-erp *,
html[data-theme="light"] .video-badge-erp * {
  color: #a5b4fc !important;
}

.video-badge-construction,
[data-theme="light"] .video-badge-construction,
html[data-theme="light"] .video-badge-construction {
  border-color: rgba(249, 115, 22, 0.85) !important;
}

.video-badge-construction *,
[data-theme="light"] .video-badge-construction *,
html[data-theme="light"] .video-badge-construction * {
  color: #fb923c !important;
}

/* -------------------------------------------------------------
 * Video Cards & Action Buttons (Light Theme Contrast Rules)
 * ------------------------------------------------------------- */
[data-theme="light"] .video-card h3,
[data-theme="light"] .video-card h3 button,
html[data-theme="light"] .video-card h3,
html[data-theme="light"] .video-card h3 button {
  color: #0f172a !important;
}

[data-theme="light"] .video-card h3:hover,
[data-theme="light"] .video-card h3 button:hover,
html[data-theme="light"] .video-card h3:hover,
html[data-theme="light"] .video-card h3 button:hover {
  color: #4338ca !important;
}

[data-theme="light"] .video-card p,
html[data-theme="light"] .video-card p {
  color: #475569 !important;
}

/* Red Play & YouTube Action Buttons (Always White Text & White Icons) */
.bg-red-600,
.bg-red-700,
.bg-red-500,
.yt-subscribe-btn,
[data-theme="light"] .bg-red-600,
[data-theme="light"] .bg-red-700,
[data-theme="light"] .bg-red-500,
[data-theme="light"] .yt-subscribe-btn,
html[data-theme="light"] .bg-red-600,
html[data-theme="light"] .bg-red-700,
html[data-theme="light"] .bg-red-500,
html[data-theme="light"] .yt-subscribe-btn {
  color: #ffffff !important;
}

.bg-red-600 *,
.bg-red-700 *,
.bg-red-500 *,
.yt-subscribe-btn *,
[data-theme="light"] .bg-red-600 *,
[data-theme="light"] .bg-red-700 *,
[data-theme="light"] .bg-red-500 *,
[data-theme="light"] .yt-subscribe-btn *,
html[data-theme="light"] .bg-red-600 *,
html[data-theme="light"] .bg-red-700 *,
html[data-theme="light"] .bg-red-500 *,
html[data-theme="light"] .yt-subscribe-btn * {
  color: #ffffff !important;
}

/* Announcement Banner YouTube Link Light Theme Fix */
[data-theme="light"] .top-announcement-banner a,
html[data-theme="light"] .top-announcement-banner a {
  color: #dc2626 !important;
}