@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════
   STRICT BRAND PALETTE — only these 10 values
═══════════════════════════════════════════ */
:root {
  /* ═══════════════════════════════════════════
     OFFICIAL BRAND LOGO PALETTE
     - Crimson Red: #E51D24 (Logo "G" & "E" stripes)
     - Deep Navy:   #0D1B3E (Logo "GYM ERP INDIA" text)
  ═══════════════════════════════════════════ */
  --red:         #E51D24;
  --red-alt:     #C51118;
  --red-soft:    #FFF1F2;
  --navy:        #0D1B3E;
  --navy-dark:   #070F26;
  
  /* Legacy alias mappings -> converted to official brand logo palette */
  --blue:        #E51D24; /* Primary Accent -> Brand Red */
  --blue-alt:    #C51118;
  --cyan:        #0D1B3E; /* Brand Deep Navy */
  --purple:      #E51D24;
  /* Brand Palette & Accent Color System */
  --blue:        #E51D24; /* Primary Brand Accent: Crimson Red */
  --blue-dark:   #C51118;
  --blue-alt:    #D0171E;
  --cyan:        #0284C7; /* Vibrant Sky Cyan */
  --purple:      #9333EA; /* Vibrant Purple Accent */
  --magenta:     #C026D3;
  --navy:        #0D1B3E; /* Base Typography & Dark Navy */
  --navy-dark:   #070E22;
  --bg-light:    #F8FAFC;
  --bg-soft:     #FFF5F5;
  --bg-dark:     #0D1B3E;
  --white:       #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F8FAFC;
  --text-dark:   #0D1B3E;
  --text-muted:  #64748B;
  --text-dim:    #94A3B8;
  --line:        #E2E8F0;
  --red:         #E51D24;
  --red-soft:    rgba(229,29,36,0.08);

  /* Theme Dynamic Variables */
  --hero-bg:           linear-gradient(145deg,#F0F4FF 0%,#F8FAFC 45%,#EEF2FF 100%);
  --card-glass:        rgba(255,255,255,0.92);
  --card-border:       rgba(226,232,240,0.9);
  --activity-card-bg:  rgba(248,250,252,0.9);

  /* Semantic aliases used throughout templates */
  --bg:          var(--bg-light);
  --accent:      var(--red);
  --accent-alt:  var(--blue-dark);
}

/* ═══════════════════════════════════════════
   DARK THEME SYSTEM ([data-theme="dark"])
═══════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-light:    #070D1B; /* Ultra deep navy black background */
  --bg-soft:     #0D172E; /* Dark navy section background */
  --bg-dark:     #040812;
  --white:       #0F192E; /* Card background in dark mode */
  --surface:     #0F192E;
  --surface-2:   #132038;
  --line:        #1E2A4A; /* Dark border line */
  --navy:        #F8FAFC; /* Headings flip to crisp white in dark mode */
  --navy-dark:   #FFFFFF;
  --text-dark:   #F8FAFC;
  --text-muted:  #CBD5E1;
  --purple:      #C084FC; /* Bright Neon Purple for dark mode visibility */
  --cyan:        #38BDF8; /* Bright Sky Cyan for dark mode */
  --red-soft:    rgba(229,29,36,0.18);
  --bg:          #070D1B;
  --text:        #F8FAFC;

  /* Theme Dynamic Variables (Dark Mode Overrides) */
  --hero-bg:           radial-gradient(circle at 50% 0%, rgba(229,29,36,0.18) 0%, rgba(7,13,27,1) 75%);
  --card-glass:        #0F192E;
  --card-border:       #1E2A4A;
  --activity-card-bg:  #132038;
}

html { 
  background-color: var(--bg-light); 
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  background-color: var(--bg-light);
  color: var(--navy);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ═══════════════════════════════════════════
   DARK THEME COMPONENT CONTRAST OVERRIDES
═══════════════════════════════════════════ */
[data-theme="dark"] body {
  background-color: #070D1B !important;
  color: #F8FAFC !important;
}

/* 1. Hero Section & Grid Background */
[data-theme="dark"] section[style*="radial-gradient"] {
  background: radial-gradient(circle at 50% 0%, rgba(229,29,36,0.18) 0%, rgba(7,13,27,1) 75%) !important;
}

[data-theme="dark"] .glass-header {
  background: rgba(7, 13, 27, 0.92) !important;
  border-bottom-color: rgba(30, 42, 74, 0.8) !important;
}

[data-theme="dark"] .glass-header.scrolled {
  background: rgba(7, 13, 27, 0.97) !important;
  border-bottom-color: #1E2A4A !important;
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

/* 2. Global Containers: All Light / White Backgrounds -> Dark Navy Cards */
[data-theme="dark"] section[style*="background:white"],
[data-theme="dark"] section[style*="background: white"],
[data-theme="dark"] section[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#FFFFFF"],
[data-theme="dark"] div[style*="background: #FFFFFF"],
[data-theme="dark"] div[style*="background:#F8FAFC"],
[data-theme="dark"] div[style*="background: #F8FAFC"],
[data-theme="dark"] article[style*="background:white"],
[data-theme="dark"] article[style*="background:#FFFFFF"],
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .card-lift {
  background-color: #0F192E !important;
  background: #0F192E !important;
  border-color: #1E2A4A !important;
  color: #F8FAFC !important;
}

/* 3. Hero Live Monitor & Activity Stream Cards */
[data-theme="dark"] div[style*="background:rgba(248,250,252"],
[data-theme="dark"] div[style*="background: rgba(248,250,252"],
[data-theme="dark"] div[style*="background:rgba(147,51,234"],
[data-theme="dark"] div[style*="background:rgba(79,70,229"] {
  background: #132038 !important;
  border-color: #1E2A4A !important;
}

/* 4. Chaos vs Control ("Standard Manual Administration") Left Card & Badges */
[data-theme="dark"] div[style*="background:#F1F5F9"],
[data-theme="dark"] div[style*="background: #F1F5F9"],
[data-theme="dark"] div[style*="background:rgba(71,85,105"] {
  background: #0F192E !important;
  border-color: #1E2A4A !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] div[style*="background:#0F172A"],
[data-theme="dark"] div[style*="background: #0F172A"] {
  background: #132038 !important;
  border-color: #1E2A4A !important;
}

/* 5. Unified Hardware & APIs (4 Right Cards) */
[data-theme="dark"] div[style*="linear-gradient(180deg, #FFFFFF"],
[data-theme="dark"] div[style*="linear-gradient(180deg,#FFFFFF"],
[data-theme="dark"] div[style*="linear-gradient(180deg, #F8FAFC"],
[data-theme="dark"] div[style*="linear-gradient(180deg,#F8FAFC"] {
  background: linear-gradient(180deg, #0F192E 0%, #132038 100%) !important;
  border-color: #1E2A4A !important;
  color: #F8FAFC !important;
}

/* "VIEW INTEGRATION GUIDES" & White Action Buttons */
[data-theme="dark"] a[style*="background:#FFFFFF"],
[data-theme="dark"] a[style*="background: #FFFFFF"],
[data-theme="dark"] button[style*="background:#FFFFFF"],
[data-theme="dark"] button[style*="background: #FFFFFF"],
[data-theme="dark"] a.bg-white,
[data-theme="dark"] button.bg-white {
  background-color: #132038 !important;
  background: #132038 !important;
  color: #F8FAFC !important;
  border: 1px solid #1E2A4A !important;
}

/* 6. Frequently Asked Questions (FAQ Accordion Items) */
[data-theme="dark"] .faq-item,
[data-theme="dark"] div[onclick*="toggleFAQ"],
[data-theme="dark"] div[style*="background:#FFFFFF"] {
  background-color: #0F192E !important;
  border-color: #1E2A4A !important;
}

[data-theme="dark"] div[onclick*="toggleFAQ"] h3,
[data-theme="dark"] div[onclick*="toggleFAQ"] span,
[data-theme="dark"] div[onclick*="toggleFAQ"] p,
[data-theme="dark"] .faq-item h3,
[data-theme="dark"] .faq-item span {
  color: #F8FAFC !important;
}

/* 7. Footer & Floating Widgets */
[data-theme="dark"] footer {
  background: #040812 !important;
  border-top-color: #1E2A4A !important;
}

[data-theme="dark"] div[style*="background:white; border:1px solid var(--line)"],
[data-theme="dark"] div[style*="background: white; border: 1px solid var(--line)"] {
  background: #0F192E !important;
  border-color: #1E2A4A !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #chatPanel,
[data-theme="dark"] #chatSuggestions,
[data-theme="dark"] #chatForm {
  background: #0F192E !important;
  border-color: #1E2A4A !important;
}

[data-theme="dark"] #chatInput {
  background: #132038 !important;
  border-color: #1E2A4A !important;
  color: #F8FAFC !important;
}

/* Global Text Colors in Dark Mode */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] .text-navy,
[data-theme="dark"] .text-slate-900,
[data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-700 {
  color: #F8FAFC !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] .text-text-dim,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-slate-500 {
  color: #CBD5E1 !important;
}

/* Maintain Bright Accents & Badges */
[data-theme="dark"] .text-red-500,
[data-theme="dark"] .text-red-600,
[data-theme="dark"] span[style*="color:var(--red)"] {
  color: #E51D24 !important;
}

[data-theme="dark"] .gradient-text-hero {
  background: linear-gradient(120deg, #FFFFFF 0%, #E2E8F0 65%, #E51D24 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="dark"] .site-logo {
  filter: drop-shadow(0 2px 10px rgba(255,255,255,0.25));
  background: rgba(255,255,255,0.92);
  padding: 4px 10px;
  border-radius: 8px;
}

/* ══════════════════════════════════
   Glassmorphic Navbar
══════════════════════════════════ */
.glass-header {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226,232,240,0.8);
  transition: all 0.3s ease;
}

.glass-header.scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 24px -4px rgba(13,27,62,0.12);
  border-bottom-color: #E2E8F0;
}

/* ══════════════════════════════════
   Mobile Menu Submenu Hover Parity
══════════════════════════════════ */
.mobile-submenu-item {
  transition: background-color 0.2s ease, transform 0.2s ease;
  border: 1px solid transparent;
}
.mobile-submenu-item:hover {
  background-color: var(--activity-card-bg);
  border-color: var(--card-border);
  transform: translateX(4px);
}
[data-theme="dark"] .mobile-submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ══════════════════════════════════
   Glow / Shadow Utilities
══════════════════════════════════ */
.glow-blue       { box-shadow: 0 0 20px rgba(229,29,36,0.30); }
.glow-blue:hover { box-shadow: 0 0 35px rgba(229,29,36,0.50); }
.glow-text-blue  { text-shadow: 0 0 18px rgba(229,29,36,0.45); }
.glow-cyan       { box-shadow: 0 0 20px rgba(13,27,62,0.30); }
.glow-text-cyan  { text-shadow: 0 0 16px rgba(13,27,62,0.55); }
.glow-purple     { box-shadow: 0 0 20px rgba(229,29,36,0.30); }

/* Red Brand Shims */
.glow-red          { box-shadow: 0 0 20px rgba(229,29,36,0.30); }
.glow-red:hover    { box-shadow: 0 0 30px rgba(229,29,36,0.50); }
.glow-text-red     { text-shadow: 0 0 15px rgba(229,29,36,0.45); }
.glow-text-gold    { text-shadow: 0 0 15px rgba(245,158,11,0.50); }

/* ══════════════════════════════════
   Gradient Text Helpers (Brand Logo Alignment)
══════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, var(--red), var(--navy));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-vivid {
  background: linear-gradient(135deg, var(--red), var(--red-alt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-hero {
  background: linear-gradient(120deg, #E51D24 0%, #C51118 60%, #0D1B3E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════
   Scroll Reveal
══════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════
   Infinite Marquee
══════════════════════════════════ */
@keyframes scroll-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll-x 30s linear infinite;
}
.marquee-container:hover .marquee-track { animation-play-state: paused; }

/* ══════════════════════════════════
   LED Scoreboard — dark inset widget
══════════════════════════════════ */
.led-scoreboard {
  background-color: #1E1B4B;
  border: 3px solid #312E81;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 8px 24px rgba(79,70,229,.20);
  border-radius: 12px;
}
.led-digit {
  font-family: 'IBM Plex Mono', monospace;
  background-color: #161241;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(6,182,212,.95);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5);
}
.led-digit::after {
  content:'';
  position:absolute; left:0; top:50%;
  width:100%; height:1px;
  background:rgba(0,0,0,.35);
}

/* ══════════════════════════════════
   Custom Scrollbars
══════════════════════════════════ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg-light); }
::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#94A3B8; }

/* ══════════════════════════════════
   Background Gradient Accents
══════════════════════════════════ */
.bg-glow-gradient {
  background-image: radial-gradient(circle 700px at 50% -80px, rgba(79,70,229,.09), transparent);
}
.bg-glow-right {
  background-image: radial-gradient(circle 550px at 115% 40%, rgba(6,182,212,.08), transparent);
}
.bg-glow-left {
  background-image: radial-gradient(circle 550px at -20% 80%, rgba(147,51,234,.07), transparent);
}

/* ══════════════════════════════════
   Before / After Comparison Slider
══════════════════════════════════ */
.comparison-slider-wrapper { position:relative; overflow:hidden; }
.comparison-slider-handle {
  position:absolute; top:0; bottom:0; width:3px;
  background:var(--blue); cursor:ew-resize; z-index:10;
  box-shadow:0 0 12px rgba(79,70,229,.70);
}
.comparison-slider-button {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:40px; height:40px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(79,70,229,.65);
  color:#fff; pointer-events:none;
}

/* ══════════════════════════════════
   Chat Panel
══════════════════════════════════ */
#chatPanel {
  transform:scale(0.9) translateY(20px);
  opacity:0; pointer-events:none;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
}
#chatPanel.open { transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }

/* ══════════════════════════════════
   Premium Card Hover
══════════════════════════════════ */
.card-lift { transition:transform .25s ease, box-shadow .25s ease; }
.card-lift:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 40px -8px rgba(79,70,229,.15);
}

/* ══════════════════════════════════
   Hero Badge
══════════════════════════════════ */
.badge-live {
  background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(6,182,212,.08));
  border:1px solid rgba(79,70,229,.22);
}

/* ══════════════════════════════════
   Responsive Logo
══════════════════════════════════ */
.site-logo {
  height:auto; width:auto; max-width:220px;
  object-fit:contain; display:block;
}
@media(max-width:768px){
  .site-logo { height:34px; max-width:150px; }
}

/* ══════════════════════════════════
   Hero Accent Line — decorative
══════════════════════════════════ */
.hero-accent-bar {
  height:4px; width:64px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}

/* ══════════════════════════════════
   Stat Card Number gradient
══════════════════════════════════ */
.stat-num-blue   { color:var(--blue); }
.stat-num-cyan   { color:var(--cyan); }
.stat-num-purple { color:var(--purple); }
.stat-num-navy   { color:var(--navy); }

/* ══════════════════════════════════
   Animated gradient button
══════════════════════════════════ */
.btn-gradient {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  background-size: 200% auto;
  transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-gradient:hover {
  background-position: right center;
  box-shadow: 0 8px 24px -4px rgba(79,70,229,.45);
  transform: translateY(-2px);
}