/* TopSpinIQ - Professional AI Tennis Platform Design System */

/* ============================================
   GLOBAL TENNIS THEME CONSISTENCY & READABILITY
   ============================================ */

/* Global Tennis Green Theme Application */
.btn-primary, .btn-success, .btn-tennis {
  background: linear-gradient(135deg, var(--tennis-green), var(--tennis-dark-green)) !important;
  border-color: var(--tennis-green) !important;
  color: white !important;
}

.btn-primary:hover, .btn-success:hover, .btn-tennis:hover {
  background: linear-gradient(135deg, var(--tennis-light-green), var(--tennis-green)) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(48, 209, 88, 0.4);
}

/* Global Link Colors */
a {
  color: var(--tennis-green);
}

a:hover {
  color: var(--tennis-dark-green);
}

/* Global Focus States */
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--tennis-green) !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 209, 88, 0.25) !important;
}

/* Global Badge/Label Colors */
.badge-primary, .label-primary {
  background: var(--tennis-green) !important;
}

/* Global Alert Success */
.alert-success {
  background-color: rgba(48, 209, 88, 0.1) !important;
  border-color: var(--tennis-green) !important;
  color: var(--tennis-dark-green) !important;
}

/* ============================================
   GLOBAL NAVIGATION CONSISTENCY
   ============================================ */

/* Ensure navigation has consistent styling across all pages */
.modern-nav {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

.modern-nav.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Navigation text colors - consistent across all pages */
.modern-nav .nav-link,
.modern-nav .nav-brand,
.modern-nav .dropdown-item,
.modern-nav .user-name,
.modern-nav .user-tier,
.modern-nav a {
  color: var(--tennis-navy) !important;
  text-shadow: none !important;
}

.modern-nav .nav-brand {
  color: var(--tennis-navy) !important;
  font-weight: 700 !important;
}

.modern-nav .nav-link:hover {
  color: var(--tennis-green) !important;
}

.modern-nav .dropdown-item:hover {
  background: rgba(48, 209, 88, 0.1) !important;
  color: var(--tennis-green) !important;
}

/* Premium/Signup buttons in navigation */
.modern-nav .btn,
.modern-nav .nav-link[style*="background"] {
  background: linear-gradient(135deg, var(--tennis-green), var(--tennis-dark-green)) !important;
  color: white !important;
  border-radius: 18px !important;
  font-weight: 600 !important;
}

/* ============================================
   GLOBAL DARK SECTION CONSISTENCY  
   ============================================ */

/* Ensure all dark sections have proper white text contrast */
.hero-section,
.hero-section *,
.bg-primary,
.bg-primary *,
.bg-dark,
.bg-dark *,
.dark-bg,
.dark-bg *,
.final-cta,
.final-cta *,
.players-hub-hero,
.players-hub-hero *,
section[style*="background: linear-gradient"][style*="#1A1B3C"],
section[style*="background: linear-gradient"][style*="#1A1B3C"] * {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Exception: Preserve tennis green and gold accents on dark backgrounds */
.hero-section .btn,
.hero-section .badge,
.final-cta .btn,
.final-cta .badge,
.dark-bg .btn-primary,
.dark-bg .badge-primary {
  background: var(--tennis-green) !important;
  color: white !important;
  text-shadow: none !important;
}

.hero-section .text-accent,
.final-cta .text-accent,
.dark-bg .text-accent {
  color: var(--tennis-gold) !important;
}

/* ============================================
   GLOBAL FOOTER CONSISTENCY
   ============================================ */

.modern-footer {
  background: var(--tennis-navy) !important;
  color: white !important;
}

.modern-footer * {
  color: white !important;
}

.modern-footer a {
  color: var(--tennis-light-green) !important;
}

.modern-footer a:hover {
  color: var(--tennis-green) !important;
}

/* LANDING PAGE SPECIFIC RULES - Maximum Specificity */
.quick-start *,
.quick-start h1,
.quick-start h2, 
.quick-start h3,
.quick-start h4,
.quick-start .display-5,
.step-card *,
.step-card h1,
.step-card h2,
.step-card h3,
.step-card h4,
.step-number {
  text-shadow: none !important;
  color: var(--gray-900) !important;
}

/* Override any container inheritance */
.container *, .container-fluid *, .row *, .col *, [class*="col-"] * {
  text-shadow: none !important;
}

/* Ensure proper text contrast for readability */
.display-4, .display-3, .display-2, .display-1,
h1, h2, h3, h4, h5, h6 {
  text-shadow: none !important;
  color: var(--gray-900) !important;
}

/* EXCEPTION: CTA section needs white text on dark background */
.final-cta .display-4, 
.final-cta .display-3, 
.final-cta .display-2, 
.final-cta .display-1,
.final-cta h1, 
.final-cta h2, 
.final-cta h3, 
.final-cta h4, 
.final-cta h5, 
.final-cta h6,
section.final-cta .display-4, 
section.final-cta .display-3, 
section.final-cta .display-2, 
section.final-cta .display-1,
section.final-cta h1, 
section.final-cta h2, 
section.final-cta h3, 
section.final-cta h4, 
section.final-cta h5, 
section.final-cta h6 {
  color: white !important;
  text-shadow: none !important;
}

/* Fix white text readability in light backgrounds */
.text-white, .text-light {
  color: var(--gray-900) !important;
}

/* Dark background contexts - white text, no shadows */
.hero-section *, 
.profile-hero *, 
.players-hub-hero *,
.dark-bg *,
.bg-dark *,
.bg-primary * {
  color: white !important;
  text-shadow: none !important;
}

/* Specific fix for Players Hub Command Center text */
.players-hub-hero h1,
.players-hub-hero .display-5,
.players-hub-hero p,
.players-hub-hero .lead {
  color: white !important;
  text-shadow: none !important;
}

/* ============================================
   1. CSS Variables & Theme
   ============================================ */
:root {
  /* Professional Tennis Theme - Matching Landing Page */
  --primary: #1A1B3C;        /* Deep Navy - Professional & Trust */
  --primary-light: #2D2E5F;
  --primary-dark: #0F1023;
  --accent: #30D158;         /* Tennis Green - Energy & Growth */
  --accent-light: #5DDC6C;
  --accent-dark: #26A85B;
  
  /* Tennis Theme Variables for Consistency */
  --tennis-green: #30D158;
  --tennis-light-green: #5DDC6C;
  --tennis-dark-green: #26A85B;
  --tennis-gold: #FFD700;
  --tennis-navy: #1A1B3C;
  --tennis-light: #e9ecef;
  --tennis-dark: #1A1B3C;
  --primary-color: #1A1B3C;
  --success-color: #30D158;
  --warning-color: #FFD700;
  --danger-color: #DC2626;
  --dark-gray: #666;
  --light-gray: #f8f9fa;
  --secondary: #4ECDC4;      /* Teal - Balance & Innovation */
  --secondary-light: #7ED8D1;
  --secondary-dark: #26ABA1;
  --warning: #FFD700;        /* Premium Gold */
  --danger: #FF3B30;         /* Modern Red */
  --success: #30D158;        /* Tennis Green */
  --info: #007AFF;           /* Trust Blue */
  
  /* Premium Brand Colors */
  --premium: #FFD700;        /* Premium Gold */
  --premium-light: #FFE55C;
  --premium-gradient: linear-gradient(135deg, #FFD700 0%, #30D158 50%, #1A1B3C 100%);
  
  /* Sophisticated Neutrals */
  --white: #FFFFFF;
  --off-white: #FAFBFC;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  
  /* Typography - Modern Font Stack */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif;
  
  /* Spacing System - 4px Base Scale */
  --space-px: 1px;
  --space-0: 0;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */
  --space-32: 8rem;        /* 128px */
  
  /* Border Radius - Refined Scale */
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-base: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-3xl: 2rem;       /* 32px */
  --radius-full: 9999px;
  
  /* AI Premium Shadows - Depth System */
  --shadow-xs: 0 1px 2px 0 rgba(11, 20, 38, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(11, 20, 38, 0.05), 0 1px 2px 0 rgba(11, 20, 38, 0.03);
  --shadow: 0 4px 6px -1px rgba(11, 20, 38, 0.08), 0 2px 4px -1px rgba(11, 20, 38, 0.05);
  --shadow-md: 0 10px 15px -3px rgba(11, 20, 38, 0.10), 0 4px 6px -2px rgba(11, 20, 38, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(11, 20, 38, 0.12), 0 10px 10px -5px rgba(11, 20, 38, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(11, 20, 38, 0.15);
  --shadow-2xl: 0 50px 100px -20px rgba(11, 20, 38, 0.20);
  --shadow-inner: inset 0 2px 4px 0 rgba(11, 20, 38, 0.06);
  
  /* Modern Premium Glows */
  --glow-accent: 0 0 20px rgba(255, 107, 107, 0.4);
  --glow-premium: 0 0 30px rgba(139, 95, 191, 0.5);
  --glow-secondary: 0 0 25px rgba(78, 205, 196, 0.4);
  --glow-success: 0 0 20px rgba(48, 209, 88, 0.3);
  --glow-ai: 0 0 40px rgba(255, 107, 107, 0.3);
  
  /* Modern Gradient Definitions */
  --ai-gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  --hero-gradient: linear-gradient(135deg, #1A1B3C 0%, #2D2E5F 50%, #4ECDC4 100%);
  --card-gradient: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
  --premium-overlay: linear-gradient(135deg, rgba(139, 95, 191, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
  
  /* Smooth Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* AI Professional Enhancements */
  --ai-gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  --ai-text-glow: 0 0 10px rgba(0, 245, 255, 0.6);
  --ai-border: 1px solid rgba(0, 245, 255, 0.3);
  --neural-grid: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 245, 255, 0.03) 2px, rgba(0, 245, 255, 0.03) 4px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(124, 58, 237, 0.03) 2px, rgba(124, 58, 237, 0.03) 4px);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --primary: #00D4AA;
  --primary-light: #2DDDC0;
  --accent: #6366F1;
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-color: #334155;
  --white: #1E293B;
  --off-white: #0F172A;
}

/* Glass Morphism Effect Variables */
:root {
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-backdrop: blur(16px);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

[data-theme="dark"] {
  --glass-bg: rgba(15, 23, 42, 0.1);
  --glass-border: rgba(248, 250, 252, 0.1);
  --glass-backdrop: blur(16px);
  --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.3);
}

/* ============================================
   2. Global Contrast Protection & Accessibility
   ============================================ */

/* AGGRESSIVE Site-wide contrast protection for navy/primary backgrounds */
*[style*="var(--primary)"],
*[style*="var(--primary)"] *,
*[style*="var(--primary)"] h1,
*[style*="var(--primary)"] h2,
*[style*="var(--primary)"] h3,
*[style*="var(--primary)"] h4,
*[style*="var(--primary)"] h5,
*[style*="var(--primary)"] h6,
*[style*="var(--primary)"] p,
*[style*="var(--primary)"] span,
*[style*="var(--primary)"] div,
*[style*="var(--primary)"] a,
*[style*="#0B1426"] *,
*[style*="#1E3A8A"] *,
.bg-primary,
.bg-primary *,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary p,
.bg-primary span,
.bg-primary div,
.bg-primary a,
.bg-navy *,
[class*="primary"],
[class*="primary"] *,
[class*="primary"] h1,
[class*="primary"] h2,
[class*="primary"] h3,
[class*="primary"] h4,
[class*="primary"] h5,
[class*="primary"] h6,
[class*="primary"] p,
[class*="primary"] span,
[class*="primary"] div,
[class*="primary"] a,
[class*="navy"] *,
.players-hub-hero,
.players-hub-hero *,
.players-hub-hero h1,
.players-hub-hero h2,
.players-hub-hero h3,
.players-hub-hero h4,
.players-hub-hero h5,
.players-hub-hero h6,
.players-hub-hero p,
.players-hub-hero span,
.players-hub-hero div,
.players-hub-hero a {
  color: white !important;
  text-shadow: none !important;
}

/* Ensure buttons maintain proper contrast */
.btn-primary *,
.btn-secondary *,
[class*="btn-primary"] *,
[class*="btn-secondary"] * {
  text-shadow: none !important;
}

/* Protection for gradient backgrounds */
*[style*="gradient"] *,
[class*="gradient"] * {
  text-shadow: none !important;
}

/* Specific protection for common problematic combinations */
.hero-section *,
.hero *,
[class*="hero"] * {
  color: white !important;
  text-shadow: none !important;
}

/* Exception for light backgrounds where dark text should be used */
.bg-white *,
.bg-light *,
[style*="background: white"] *,
[style*="background-color: white"] *,
[style*="background: #ffffff"] *,
[style*="background: #fff"] * {
  color: var(--gray-800) !important;
  text-shadow: none !important;
}

/* FINAL FAIL-SAFE - Maximum specificity for common problematic selectors */
.players-hub-hero h1,
.players-hub-hero .display-4,
.players-hub-hero p.lead,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="hero"] h3,
[class*="hero"] h4,
[class*="hero"] p,
[class*="hero"] .lead,
[class*="hero"] .display-1,
[class*="hero"] .display-2,
[class*="hero"] .display-3,
[class*="hero"] .display-4 {
  color: white !important;
  text-shadow: none !important;
}

/* ============================================
   3. Global Styles & Premium Reset
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: var(--font-primary);
  color: var(--gray-700);
  background-color: var(--off-white);
  background-image: var(--neural-grid);
  line-height: 1.7;  /* Improved readability */
  overflow-x: hidden;
  position: relative;
}

/* Global text readability protection */
body * {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Removed problematic global section color overrides - components should define their own colors */

/* Base typography settings */
body {
  font-size: 0.9375rem;  /* 15px base font */
  font-weight: 400;
  letter-spacing: -0.01em;  /* Subtle letter spacing */
  min-height: 100%;
  -webkit-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
}

/* Typography Hierarchy - Fluid & Sophisticated */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;  /* Slightly lighter for elegance */
  line-height: 1.1;   /* Tighter line height for headings */
  color: var(--primary);
  margin-bottom: var(--space-4);
  letter-spacing: -0.025em;  /* Improved spacing */
}

/* Fluid Typography Scale - Elegant & Responsive */
h1 { 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

h2 { 
  font-size: clamp(1.5rem, 4vw, 2.25rem); 
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h3 { 
  font-size: clamp(1.25rem, 3vw, 1.75rem); 
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h4 { 
  font-size: clamp(1.125rem, 2.5vw, 1.375rem); 
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

h5 { 
  font-size: clamp(1rem, 2vw, 1.125rem); 
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h6 { 
  font-size: clamp(0.9375rem, 1.8vw, 1rem); 
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Enhanced Link Styles */
a {
  color: var(--accent);
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

a:hover {
  color: var(--accent-dark);
}

a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Subtle underline animation */
a.link-underline {
  position: relative;
}

a.link-underline::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: var(--accent);
  transition: width var(--transition-base);
}

a.link-underline:hover::after {
  width: 100%;
}

/* ============================================
   3. Premium Navigation with Glass Morphism
   ============================================ */
.modern-nav {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-bottom: 1px solid var(--glass-border);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.modern-nav.scrolled {
  background: rgba(248, 250, 252, 0.8);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid rgba(0, 245, 255, 0.1);
  backdrop-filter: blur(10px);
  background: rgba(11, 20, 38, 0.95);
}

.nav-container {
  max-width: 1440px;  /* Wider container */
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;  /* Slightly taller for premium feel */
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  transition: all var(--transition-fast);
}

.nav-brand:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav-brand img {
  height: 40px;
  width: auto;
  transition: transform var(--transition-fast);
}

.nav-brand:hover img {
  transform: scale(1.05);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--space-1);
  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  padding: var(--space-2-5) var(--space-4);
  color: var(--gray-600);
  font-weight: 500;
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.1), transparent);
  transition: left var(--transition-base);
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  background: rgba(0, 212, 170, 0.08);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.nav-link.active {
  background: var(--accent);
  color: var(--white);
  box-shadow: var(--glow-accent);
}

.nav-link i {
  font-size: 0.875rem;
}

/* Professional AI Dropdown with Enhanced Glass Morphism */
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(26, 27, 60, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(48, 209, 88, 0.2) !important;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl), 0 0 40px rgba(48, 209, 88, 0.15) !important;
  padding: var(--space-6);
  min-width: 320px;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-slow);
  z-index: 100;
  overflow: hidden;
}

.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(0, 245, 255, 0.1), rgba(124, 58, 237, 0.1));
  border-radius: var(--radius-2xl);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-item:hover .nav-dropdown::before {
  opacity: 1;
}

/* Professional dropdown arrow indicator */
.nav-link.has-dropdown::after {
  content: '▼';
  font-size: 0.625rem;
  margin-left: var(--space-1);
  transition: all var(--transition-fast);
  color: var(--accent);
}

.nav-item:hover .nav-link.has-dropdown::after {
  transform: rotate(180deg);
  color: var(--accent-light);
}

/* Enhanced dropdown entrance animation */
@keyframes dropdownFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-12px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  color: #30D158 !important;
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid transparent;
}

/* Ensure dropdown text is always visible on dark backgrounds */
.nav-dropdown .dropdown-item,
.nav-dropdown .dropdown-item *,
.nav-dropdown a,
.nav-dropdown a *,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item *,
.dropdown-menu a,
.dropdown-menu a * {
  color: #30D158 !important;
}

/* Override any black or dark text in navigation dropdowns */
.nav-dropdown [style*="color: black"],
.nav-dropdown [style*="color: #000"],
.nav-dropdown [style*="color:black"],
.nav-dropdown [style*="color:#000"],
.dropdown-menu [style*="color: black"],
.dropdown-menu [style*="color: #000"],
.dropdown-menu [style*="color:black"],
.dropdown-menu [style*="color:#000"] {
  color: #30D158 !important;
}

/* Bootstrap dropdown overrides for visibility */
.dropdown-menu {
  background: rgba(26, 27, 60, 0.95) !important;
  border: 1px solid rgba(48, 209, 88, 0.2) !important;
}

.dropdown-menu .dropdown-item {
  color: #30D158 !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: rgba(48, 209, 88, 0.1) !important;
  color: #26A85B !important;
}

/* Ensure all text elements in dropdowns are visible */
.nav-dropdown span,
.nav-dropdown div,
.nav-dropdown p,
.nav-dropdown strong,
.nav-dropdown em,
.nav-dropdown h1,
.nav-dropdown h2,
.nav-dropdown h3,
.nav-dropdown h4,
.nav-dropdown h5,
.nav-dropdown h6,
.nav-dropdown label,
.nav-dropdown small,
.dropdown-menu span,
.dropdown-menu div,
.dropdown-menu p,
.dropdown-menu strong,
.dropdown-menu em,
.dropdown-menu h1,
.dropdown-menu h2,
.dropdown-menu h3,
.dropdown-menu h4,
.dropdown-menu h5,
.dropdown-menu h6,
.dropdown-menu label,
.dropdown-menu small {
  color: #30D158 !important;
}

/* Specific overrides for any header-like elements in dropdowns */
.nav-dropdown .dropdown-header,
.nav-dropdown [class*="header"],
.nav-dropdown [class*="title"],
.nav-dropdown [class*="label"],
.dropdown-menu .dropdown-header,
.dropdown-menu [class*="header"],
.dropdown-menu [class*="title"],
.dropdown-menu [class*="label"] {
  color: #30D158 !important;
}

/* Force all text content in dropdowns to be tennis green */
.nav-dropdown *:not(i):not(.fas):not(.far):not(.fal):not(.fab),
.dropdown-menu *:not(i):not(.fas):not(.far):not(.fal):not(.fab) {
  color: #30D158 !important;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(48, 209, 88, 0.2), transparent);
  transition: left var(--transition-base);
}

.dropdown-item:hover::before {
  left: 100%;
}

.dropdown-item:hover {
  background: rgba(48, 209, 88, 0.1) !important;
  color: #26A85B !important;
  transform: translateX(var(--space-2));
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(48, 209, 88, 0.3);
  border-color: rgba(48, 209, 88, 0.3);
  text-decoration: none !important;
}

.dropdown-item:last-child {
  margin-bottom: 0;
}

.dropdown-item i {
  font-size: 1.125rem;
  width: 24px;
  text-align: center;
  color: #30D158 !important;
  transition: all var(--transition-fast);
}

.dropdown-item:hover i {
  color: #26A85B !important;
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(48, 209, 88, 0.6));
}

.dropdown-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48, 209, 88, 0.4), transparent);
  margin: var(--space-3) 0;
  opacity: 0.8;
  position: relative;
}

.dropdown-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48, 209, 88, 0.3), transparent);
  transform: translateY(1px);
}

.dropdown-header {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #30D158 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-2) var(--space-5);
  margin: var(--space-1) 0 var(--space-3);
  position: relative;
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.05), rgba(48, 209, 88, 0.05));
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
}

/* Professional AI Mobile Menu Toggle */
.mobile-toggle {
  display: none;
  background: rgba(0, 245, 255, 0.1);
  border: 1px solid rgba(0, 245, 255, 0.2);
  border-radius: var(--radius-lg);
  cursor: pointer;
  padding: var(--space-3);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.mobile-toggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.2), transparent);
  transition: left var(--transition-base);
}

.mobile-toggle:hover::before {
  left: 100%;
}

.mobile-toggle:hover {
  background: rgba(0, 212, 170, 0.15);
  transform: scale(1.05);
  box-shadow: var(--shadow-sm);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
  z-index: 2;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: all var(--transition-bounce);
}

.mobile-toggle.active .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
  background: var(--accent);
}

.mobile-toggle.active .hamburger span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.mobile-toggle.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
  background: var(--accent);
}

/* ============================================
   4. Hero Section
   ============================================ */
.hero-modern {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
  padding-top: 70px;
}

.hero-bg-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.6rem);  /* Reduced by ~20% */
  font-weight: 700;  /* Slightly lighter weight */
  margin-bottom: 1.2rem;
  color: var(--white);
  animation: fadeInUp 0.8s ease;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.3rem);  /* Reduced subtitle */
  margin-bottom: 1.8rem;
  opacity: 0.9;
  animation: fadeInUp 0.8s ease 0.2s both;
  font-weight: 400;  /* Lighter weight for readability */
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s ease 0.4s both;
}

/* ============================================
   5. Premium Button System with Micro-Interactions
   ============================================ */
.btn {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-xl);
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: all var(--transition-base);
  font-size: 0.9375rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-family: var(--font-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-base);
}

.btn:hover::before {
  left: 100%;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primary Button - Accent Color */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.3);
  border: 1px solid rgba(48, 209, 88, 0.2);
  font-weight: 600;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(48, 209, 88, 0.4);
  border-color: var(--accent);
}

/* AI Premium Button - Special Effects */
.btn-ai {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glow-ai);
  border: 1px solid var(--accent);
}

.btn-ai::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(0, 245, 255, 0.2), transparent);
  transform: rotate(45deg);
  transition: all 0.6s;
  opacity: 0;
}

.btn-ai:hover::before {
  animation: shimmer 1.5s infinite;
  opacity: 1;
}

.btn-ai:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-ai), 0 0 60px rgba(124, 58, 237, 0.4);
  border-color: var(--accent-light);
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Secondary Button - Indigo */
.btn-secondary {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-dark) 100%);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  box-shadow: none;
}

.btn-outline:hover {
  background: var(--accent);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 212, 170, 0.3);
}

/* Ghost Button */
.btn-ghost {
  background: rgba(0, 212, 170, 0.1);
  color: var(--accent);
  border: 1px solid rgba(0, 212, 170, 0.2);
  box-shadow: none;
}

.btn-ghost:hover {
  background: rgba(0, 212, 170, 0.2);
  color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Premium Button */
.btn-premium {
  background: var(--premium-gradient);
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(255, 184, 0, 0.3);
  font-weight: 700;
}

.btn-premium:hover {
  background: linear-gradient(135deg, #FF8A00 0%, #FFB800 100%);
  transform: translateY(-2px);
  box-shadow: var(--glow-premium);
}

/* Danger Button */
.btn-danger {
  background: linear-gradient(135deg, var(--danger) 0%, #EF4444 100%);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(248, 113, 113, 0.3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #EF4444 0%, var(--danger) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(248, 113, 113, 0.4);
}

/* Button Sizes */
.btn-xs {
  padding: var(--space-1-5) var(--space-3);
  font-size: 0.8125rem;
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  border-radius: var(--radius-lg);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: 1.125rem;
  border-radius: var(--radius-2xl);
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: 1.25rem;
  border-radius: var(--radius-2xl);
}

/* Button States */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn:disabled::before,
.btn.disabled::before {
  display: none;
}

/* Floating Action Button */
.btn-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  padding: 0;
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 40;
  box-shadow: var(--shadow-lg);
  background: var(--accent);
  color: var(--white);
}

.btn-fab:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: var(--glow-accent);
}

.btn-fab i {
  font-size: 1.25rem;
}

/* ============================================
   6. Premium Card System
   ============================================ */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--secondary), var(--premium));
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--accent);
}

/* Card Variants */
.card-elevated {
  background: var(--white);
  border: none;
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-base);
}

.card-elevated:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-2xl);
}

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-base);
}

.card-glass:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.card-premium {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.1) 0%, rgba(255, 138, 0, 0.1) 100%);
  border: 2px solid var(--premium);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  position: relative;
}

.card-premium::after {
  content: '✨';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 1.25rem;
  opacity: 0.7;
}

.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-premium);
}

/* Card Content Components */
.card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.card-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--transition-base);
}

.card:hover .card-icon::before {
  left: 100%;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
  color: var(--primary);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.card-subtitle {
  font-size: 0.9375rem;
  color: var(--gray-500);
  margin-bottom: var(--space-3);
  font-weight: 500;
}

.card-description {
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
  font-size: 0.9375rem;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.875rem;
  color: var(--gray-500);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.card-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.card-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--accent);
  color: var(--white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-features {
  list-style: none;
  margin-bottom: 1.5rem;
}

.card-features li {
  padding: 0.5rem 0;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: bold;
  font-size: 1.2rem;
}

/* ============================================
   7. Modern Grid System
   ============================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--space-2xl) 0; /* Reduced from 4rem to 2rem */
}

.section-compact {
  padding: var(--space-xl) 0; /* Even more compact sections */
}

.grid {
  display: grid;
  gap: var(--space-xl); /* Reduced from 2rem to 1.5rem */
}

.grid-compact {
  display: grid;
  gap: var(--space-lg); /* Even more compact grid */
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly smaller min width */
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ============================================
   8. Animations
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.animate-fadeIn {
  animation: fadeIn 0.6s ease;
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

/* ============================================
   9. Modern Features Section
   ============================================ */
.features-section {
  background: var(--gray-50);
  position: relative;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);  /* Smaller radius */
  padding: 1.5rem;  /* More compact padding */
  text-align: center;
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);  /* Gentler hover */
  box-shadow: var(--shadow-lg);  /* Softer shadow */
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--white);
}

/* ============================================
   10. Stats Section
   ============================================ */
.stats-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  padding: 3rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
}

.stat-item {
  padding: 1rem;
}

.stat-number {
  font-size: 3rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 0.5rem;
  display: block;
}

.stat-label {
  font-size: 1rem;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ============================================
   9. Mobile-First Responsive Design
   ============================================ */

/* Tablet Styles */
@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .nav-container {
    padding: 0 var(--space-4);
  }
  
  .masonry-grid {
    columns: 2;
  }
  
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section {
    padding: var(--space-12) 0;
  }
}

/* Mobile Styles */
@media (max-width: 768px) {
  html {
    font-size: 14px; /* Smaller base size for mobile */
  }
  
  .mobile-toggle {
    display: block !important;
    position: relative !important;
    z-index: 10000 !important;
    background: rgba(48, 209, 88, 0.1) !important;
    border: 2px solid rgba(48, 209, 88, 0.3) !important;
    border-radius: var(--radius-lg) !important;
    cursor: pointer !important;
    padding: var(--space-3) !important;
    transition: all var(--transition-fast) !important;
    min-width: 44px !important; /* Ensure minimum touch target */
    min-height: 44px !important;
  }
  
  .mobile-toggle:hover {
    background: rgba(48, 209, 88, 0.2) !important;
    border-color: rgba(48, 209, 88, 0.5) !important;
    transform: scale(1.05) !important;
  }
  
  .mobile-toggle:active {
    background: rgba(48, 209, 88, 0.3) !important;
    transform: scale(0.98) !important;
  }
  
  .nav-menu {
    position: fixed;
    top: 64px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 64px);
    background: transparent !important; /* Remove gray background */
    backdrop-filter: none !important; /* Remove backdrop blur */
    -webkit-backdrop-filter: none !important;
    border-right: none !important; /* Remove border */
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6);
    transition: left var(--transition-base);
    overflow-y: auto;
    box-shadow: none !important; /* Remove shadow that causes gray effect */
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-item {
    width: 100%;
    margin-bottom: var(--space-2);
  }
  
  .nav-link {
    width: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    font-size: 1rem; /* Larger for touch */
    justify-content: flex-start;
    color: #1A1B3C !important; /* Ensure text is visible */
    text-decoration: none !important;
    font-weight: 500 !important;
    background: rgba(255, 255, 255, 0.95) !important; /* Individual item backgrounds */
    margin-bottom: var(--space-2) !important;
    border: 1px solid rgba(48, 209, 88, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }
  
  .nav-link:hover,
  .nav-link:focus,
  .nav-link:active {
    color: #ffffff !important;
    background: #30D158 !important;
    border-color: #26A85B !important;
    transform: translateX(4px) !important;
  }
  
  .nav-dropdown {
    position: fixed !important;
    top: 80px !important; /* Below the nav header with more space */
    left: 0.5rem !important;
    right: 0.5rem !important;
    width: calc(100vw - 1rem) !important;
    max-width: 100vw !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    background: #ffffff !important; /* Solid white background */
    border: 3px solid #30D158 !important;
    margin: 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
    display: none;
    z-index: 999999 !important; /* Even higher z-index */
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
  }

  /* Mobile dropdown text colors for readability */
  .nav-dropdown .dropdown-item,
  .nav-dropdown .nav-link {
    color: #000000 !important; /* Pure black text for maximum visibility */
    text-decoration: none !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    font-size: 18px !important; /* Even larger for mobile readability */
    font-weight: 600 !important; /* Bolder text */
    min-height: 56px !important; /* Larger touch target */
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    background: rgba(248, 249, 250, 0.8) !important; /* Light background for each item */
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-dropdown .dropdown-item:hover,
  .nav-dropdown .dropdown-item:active,
  .nav-dropdown .nav-link:hover,
  .nav-dropdown .nav-link:active {
    color: #ffffff !important;
    background: #30D158 !important; /* Solid tennis green background */
    border-color: #26A85B !important;
    transform: scale(1.02) !important;
  }

  .nav-dropdown .dropdown-item:focus,
  .nav-dropdown .nav-link:focus {
    color: #ffffff !important;
    background: #30D158 !important;
    outline: 3px solid #26A85B !important;
    outline-offset: 2px !important;
  }

  .nav-dropdown .dropdown-header {
    color: #30D158 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    padding: 10px 24px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    background: rgba(48, 209, 88, 0.1) !important;
    border-radius: 10px !important;
  }

  .nav-dropdown .dropdown-divider {
    margin: 16px 0 !important;
    border: none !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #30D158, transparent) !important;
    border-radius: 2px !important;
  }

  .nav-dropdown i {
    margin-right: 20px !important;
    width: 24px !important;
    text-align: center !important;
    color: #30D158 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }

  .nav-dropdown .dropdown-item:hover i,
  .nav-dropdown .dropdown-item:active i,
  .nav-dropdown .nav-link:hover i,
  .nav-dropdown .nav-link:active i {
    color: #ffffff !important;
  }

  /* Ensure user menu dropdown shows properly */
  .nav-item.user-menu .nav-dropdown,
  .user-menu-trigger + .nav-dropdown {
    display: none !important;
  }

  .nav-item.user-menu:hover .nav-dropdown,
  .nav-item.user-menu.active .nav-dropdown,
  .user-menu-trigger.active + .nav-dropdown {
    display: block !important;
  }

  /* Fix for user menu visibility */
  .nav-item:last-child .nav-dropdown {
    bottom: auto !important;
    top: 70px !important;
  }
  
  .nav-item:hover .nav-dropdown,
  .nav-item.active .nav-dropdown {
    display: block;
  }

  /* Force text visibility in mobile nav */
  .nav-menu .nav-item .nav-link,
  .nav-menu .nav-item .nav-link *,
  .nav-menu .nav-link,
  .nav-menu .nav-link * {
    color: #1A1B3C !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav-menu .nav-item .nav-link i,
  .nav-menu .nav-link i {
    color: #30D158 !important;
    opacity: 1 !important;
  }

  /* Override any transparent/invisible styles on mobile */
  @media (max-width: 768px) {
    .nav-menu * {
      opacity: 1 !important;
      visibility: visible !important;
    }
    
    .nav-menu .nav-link,
    .nav-menu .nav-item a {
      color: #1A1B3C !important;
      text-shadow: none !important;
      opacity: 1 !important;
    }

    /* User info visibility on mobile */
    .user-info,
    .user-details,
    .user-name,
    .user-tier {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      color: #1A1B3C !important;
    }

    .user-info {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }

    .user-details {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    .user-name {
      font-size: 16px !important;
      font-weight: 600 !important;
      color: #1A1B3C !important;
      line-height: 1.2 !important;
    }

    .user-tier {
      font-size: 14px !important;
      color: #666 !important;
      margin-top: 2px !important;
    }

    /* Ensure nav menu has higher z-index than any overlays */
    .nav-menu {
      z-index: 10000 !important;
    }

    /* Prevent body overlay during dropdown */
    .nav-menu.active {
      z-index: 10001 !important;
    }
  }
  
  /* Mobile Typography */
  h1 { 
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    margin-bottom: var(--space-3);
  }
  
  h2 { 
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: var(--space-3);
  }
  
  /* Mobile Layout */
  .container {
    padding: 0 var(--space-4);
  }
  
  .section {
    padding: var(--space-10) 0;
  }
  
  .section-sm {
    padding: var(--space-8) 0;
  }
  
  .section-lg {
    padding: var(--space-12) 0;
  }
  
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .masonry-grid {
    columns: 1;
    gap: var(--space-4);
  }
  
  /* Mobile Cards */
  .card {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
  }
  
  .card-elevated {
    padding: var(--space-6);
  }
  
  /* Mobile Buttons */
  .btn {
    padding: var(--space-3-5) var(--space-6);
    font-size: 1rem; /* Larger for touch */
  }
  
  .btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1.125rem;
  }
  
  /* Mobile Forms */
  .form-input,
  .form-select,
  .form-textarea {
    padding: var(--space-4);
    font-size: 1rem; /* Prevent zoom on iOS */
    border-radius: var(--radius-lg);
  }
  
  /* Mobile FAB */
  .btn-fab {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 48px;
    height: 48px;
  }
  
  .btn-fab i {
    font-size: 1.125rem;
  }
}

/* Small Mobile Styles */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-3);
  }
  
  .nav-container {
    padding: 0 var(--space-3);
    height: 56px; /* Smaller on small screens */
  }
  
  .nav-brand {
    font-size: 1.25rem;
  }
  
  .nav-brand img {
    height: 32px;
  }
  
  .section {
    padding: var(--space-8) 0;
  }
  
  .card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  
  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: 0.9375rem;
  }
  
  .main-content {
    padding-top: 64px;
    min-height: calc(100vh - 64px);
  }
  
  .nav-menu {
    top: 64px;
    height: calc(100vh - 64px);
    padding: var(--space-4);
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .nav-link,
  .dropdown-item,
  .btn {
    padding: var(--space-4) var(--space-6); /* Larger touch targets */
  }
  
  .card:hover {
    transform: none; /* Disable hover effects on touch devices */
    box-shadow: var(--shadow);
  }
  
  .btn:hover {
    transform: none;
  }
  
  .nav-link:hover {
    background: none;
    transform: none;
  }
}

/* Dark Mode Mobile Adjustments */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
  .nav-menu {
    background: rgba(15, 23, 42, 0.95);
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;  /* Smaller base size for mobile */
  }
  
  .container {
    padding: 0 0.75rem;
  }
  
  .hero-title {
    font-size: 1.8rem;  /* Further reduced for mobile */
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .card {
    padding: 0.9rem;  /* More compact mobile cards */
  }
  
  .btn {
    padding: 0.6rem 1.1rem;  /* Compact mobile buttons */
    font-size: 0.85rem;
  }
}

/* ============================================
   12. Utility Classes
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 3rem; }

.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.bg-primary { background-color: var(--primary); }
.bg-accent { background-color: var(--accent); }
.bg-white { background-color: var(--white); }
.bg-gray { background-color: var(--gray-100); }

.text-white { color: var(--white); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-gray { color: var(--gray-600); }

/* Fix for white text on light backgrounds */
.bg-white .text-white,
.bg-gray .text-white,
section[style*="background: white"] .text-white,
section[style*="background: #fff"] .text-white,
section[style*="background-color: white"] .text-white {
    color: var(--primary) !important;
    text-shadow: none !important;
}

/* Ensure sections with light backgrounds use dark text */
section[style*="background: var(--white)"],
section[style*="background: var(--gray-50)"],
section[style*="background: var(--off-white)"] {
    color: var(--primary);
}

section[style*="background: var(--white)"] h1,
section[style*="background: var(--white)"] h2,
section[style*="background: var(--white)"] h3,
section[style*="background: var(--gray-50)"] h1,
section[style*="background: var(--gray-50)"] h2,
section[style*="background: var(--gray-50)"] h3 {
    color: var(--primary) !important;
}

/* Additional contrast fixes for light sections */
.section-light,
.bg-light,
.container-light {
    background: var(--white);
    color: var(--primary);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4,
.section-light p,
.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light p {
    color: var(--primary) !important;
}

/* Removed global white text override - components should control their own text colors */

/* But allow white text on dark backgrounds */
[style*="background: var(--primary)"] [style*="color: white"],
[style*="background: var(--primary)"] [style*="color: #fff"],
[style*="background: #"] [style*="color: white"],
.pricing-hero [style*="color: white"],
.cta-section [style*="color: white"] {
    color: var(--white) !important;
}

/* ============================================
   13. Loading & Transitions
   ============================================ */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--gray-200);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-enter {
  opacity: 0;
  transform: translateY(20px);
}

.fade-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all var(--transition-base);
}

/* ============================================
   8. Premium Form System
   ============================================ */
.form-group {
  margin-bottom: var(--space-6);
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 600;
  color: var(--gray-700);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-4) var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  font-size: 0.9375rem;
  transition: all var(--transition-base);
  background: var(--white);
  font-family: var(--font-primary);
  color: var(--gray-700);
  position: relative;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.1);
  transform: translateY(-1px);
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
  color: var(--gray-300);
  transform: translateY(-2px);
}

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

/* Floating Label Inputs */
.form-floating {
  position: relative;
}

.form-floating .form-input {
  padding: var(--space-5) var(--space-4) var(--space-3);
}

.form-floating .form-label {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  color: var(--gray-400);
  background: var(--white);
  padding: 0 var(--space-1);
  transition: all var(--transition-base);
  pointer-events: none;
  margin: 0;
}

.form-floating .form-input:focus + .form-label,
.form-floating .form-input:not(:placeholder-shown) + .form-label {
  top: -8px;
  left: var(--space-3);
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 600;
}

/* Input Groups */
.input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.input-group .form-input {
  border-radius: 0;
  border-right: none;
}

.input-group .form-input:first-child {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.input-group .form-input:last-child {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  border-right: 2px solid var(--gray-200);
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  background: var(--gray-100);
  border: 2px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 0.9375rem;
}

.input-group-text:first-child {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  border-right: none;
}

.input-group-text:last-child {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  border-left: none;
}

/* Form Validation */
.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
  border-color: var(--success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
}

.valid-feedback {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--success);
  font-weight: 500;
}

.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  color: var(--danger);
  font-weight: 500;
}

/* ============================================
   15. Badges & Tags
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all var(--transition-fast);
}

.badge-primary {
  background: var(--primary);
  color: var(--white);
}

.badge-accent {
  background: var(--accent);
  color: var(--white);
}

.badge-secondary {
  background: var(--secondary);
  color: var(--white);
}

.badge-outline {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* ============================================
   16. Main Content & Subpages
   ============================================ */
/* ============================================
   7. Main Content Layout
   ============================================ */
.main-content {
  padding-top: 64px; /* Updated to match new navbar height */
  min-height: calc(100vh - 64px);
  background: var(--off-white);
  width: 100%;
  overflow-x: hidden;
}

/* Homepage specific - no top padding for hero */
.main-content.hero-page {
  padding-top: 0;
  background: transparent;
}

/* Container System */
.container {
  max-width: 1200px;  /* More reasonable max width */
  margin: 0 auto;
  padding: 0 var(--space-4);
  width: 100%;
}

.container-narrow {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  width: 100%;
}

.container-wide {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  width: 100%;
}

/* Section System - Reduced padding to prevent cut-off */
.section {
  padding: var(--space-12) 0;  /* Reduced from 16 */
}

.section-sm {
  padding: var(--space-8) 0;   /* Reduced from 12 */
}

.section-lg {
  padding: var(--space-16) 0;  /* Reduced from 20 */
}

.section-xl {
  padding: var(--space-20) 0;  /* Reduced from 24 */
}

/* Fix for sections being cut off */
.section:not(:last-child) {
  margin-bottom: var(--space-4);
}

/* Ensure full width sections */
.section-full-width {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Premium Grid System */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Enhanced Masonry Grid for Marketplace */
.masonry-grid {
  columns: 3;
  column-gap: var(--space-6);
  break-inside: avoid;
}

.masonry-grid > * {
  break-inside: avoid;
  margin-bottom: var(--space-6);
  transition: all var(--transition-base);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-6);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.masonry-item:hover {
  transform: scale(1.02);
  z-index: 10;
}

/* Product Cards for Marketplace */
.product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
  position: relative;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--secondary), var(--premium));
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-2xl);
  border-color: var(--accent);
}

.product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-info {
  padding: var(--space-6);
}

.product-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}

.product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.product-description {
  color: var(--gray-600);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.product-actions {
  display: flex;
  gap: var(--space-3);
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--premium-gradient);
  color: var(--primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Subpage sections */
.subpage-header {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: var(--white);
  padding: 2rem 0;
  margin-bottom: 3rem;
}

.subpage-title {
  font-size: clamp(1.6rem, 4vw, 2rem);  /* Reduced by ~20% */
  font-weight: 600;  /* Lighter weight */
  margin-bottom: 0.4rem;
}

.subpage-subtitle {
  font-size: 1rem;  /* Slightly smaller */
  opacity: 0.9;
  max-width: 600px;
  font-weight: 400;
}

.subpage-content {
  padding: 2rem 0;
}

/* ============================================
   17. Marketplace Specific Styles
   ============================================ */
.marketplace-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.category-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
  border: 2px solid transparent;
}

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

.category-icon {
  width: 50px;
  height: 50px;
  background: var(--accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--white);
  font-size: 1.2rem;
}

.category-name {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.category-count {
  color: var(--gray-600);
  font-size: 0.9rem;
}

/* Product/Service Cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.product-image {
  width: 100%;
  height: 200px;
  background: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--gray-400);
}

.product-info {
  padding: 1.5rem;
}

.product-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.product-description {
  color: var(--gray-600);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.product-actions {
  display: flex;
  gap: 0.5rem;
}

/* Service Provider Cards */
.provider-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
}

.provider-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.provider-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.provider-avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  font-weight: bold;
}

.provider-info h4 {
  margin: 0 0 0.25rem 0;
  color: var(--primary);
}

.provider-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-600);
  font-size: 0.9rem;
}

.stars {
  color: var(--warning);
}

.provider-services {
  margin-bottom: 1rem;
}

.service-tag {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ============================================
   18. Enhanced Footer
   ============================================ */
.modern-footer {
  background: var(--primary);
  color: var(--white);
  padding: 3rem 0 1rem;
  margin-top: 4rem;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-brand img {
  height: 40px;
  width: auto;
}

.footer-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.footer-section h5 {
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.social-links a {
  display: inline-block;
  margin-left: 1rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  transition: color var(--transition-fast);
}

.social-links a:hover {
  color: var(--accent);
}

/* ============================================
   19. Advanced Search & Filters
   ============================================ */
.advanced-filters {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 1rem;
  box-shadow: var(--shadow-sm);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-weight: 600;
  color: var(--gray-700);
  font-size: 0.9rem;
}

.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.price-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: var(--white);
  transition: all var(--transition-base);
}

.price-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.price-input::placeholder {
  color: var(--gray-400);
}

.price-separator {
  color: var(--gray-400);
  font-weight: 500;
  font-size: 1.1rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  background: var(--white);
  color: var(--gray-700);
  transition: all var(--transition-base);
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.filter-buttons {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.btn-clear {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-600);
  border-radius: var(--radius-md);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-clear:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-700);
}

.btn-apply {
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: var(--white);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-apply:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.toggle-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
  margin-top: 1rem;
}

.toggle-filters-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.toggle-filters-btn i {
  font-size: 0.8rem;
  transition: transform var(--transition-base);
}

.toggle-filters-btn.active i {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .price-range-inputs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .filter-buttons {
    flex-direction: column;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .social-links a {
    margin: 0 0.5rem;
  }
}

/* ============================================
   20. Tennis-Specific Enhancements
   ============================================ */

/* Tennis Ball Animation */
@keyframes bounce-tennis {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.tennis-bounce {
  animation: bounce-tennis 2s ease-in-out infinite;
}

/* Tennis Court Pattern Background */
.tennis-court-bg {
  background-image: 
    linear-gradient(90deg, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(16, 185, 129, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Tennis Green Accents */
.tennis-green {
  color: var(--accent) !important;
}

.bg-tennis-green {
  background-color: var(--accent) !important;
}

.border-tennis-green {
  border-color: var(--accent) !important;
}

/* Energetic Gradient Backgrounds */
.bg-energy-gradient {
  background: linear-gradient(135deg, #10B981 0%, #3B82F6 50%, #8B5CF6 100%);
}

.bg-tennis-gradient {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
}

/* Modern Glassmorphism Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Tennis Ball Icon Enhancement */
.tennis-ball-icon {
  position: relative;
  display: inline-block;
}

.tennis-ball-icon::before {
  content: '🎾';
  font-size: 1.2em;
  margin-right: 0.5rem;
}

/* Compact Stats Display */
.stat-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-lg);
  text-align: center;
}

.stat-item-compact {
  padding: var(--space-lg);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.stat-item-compact:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-number-compact {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: var(--space-xs);
  display: block;
}

.stat-label-compact {
  font-size: 0.8rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Enhanced Button Variants */
.btn-tennis {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-tennis:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-compact {
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.875rem;
}

/* Modern Badge System */
.badge-modern {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--gray-100);
  color: var(--gray-700);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--accent-dark);
}

.badge-premium {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #8B4513;
}

/* Micro-interactions */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Compact Form Elements */
.form-compact .form-group {
  margin-bottom: var(--space-lg);
}

.form-compact .form-input,
.form-compact .form-select,
.form-compact .form-textarea {
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
}

/* Loading States */
.skeleton {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Modern Spacing Utilities */
.space-y-compact > * + * {
  margin-top: var(--space-md);
}

.space-y-normal > * + * {
  margin-top: var(--space-lg);
}

.space-y-relaxed > * + * {
  margin-top: var(--space-xl);
}

/* Responsive Text Scaling */
.text-responsive {
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.heading-responsive {
  font-size: clamp(1.25rem, 4vw, 2rem);
}

/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
  .nav-menu {
    top: 58px; /* Updated for new navbar height */
    height: calc(100vh - 58px);
  }
  
  .section {
    padding: var(--space-xl) 0; /* More compact on mobile */
  }
  
  .section-compact {
    padding: var(--space-lg) 0;
  }
}

/* ============================================
   10. Premium Micro-Interactions & Animations
   ============================================ */

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.3);
  transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Pulse Animation */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 212, 170, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0);
  }
}

/* Shimmer Loading Effect */
.shimmer {
  background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Parallax Cards */
.parallax-card {
  transform-style: preserve-3d;
  transition: all var(--transition-base);
}

.parallax-card:hover {
  transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

.parallax-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 212, 170, 0.1) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}

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

/* Stagger Animation */
.stagger-fade-in > * {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

.stagger-fade-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-fade-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-fade-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-fade-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-fade-in > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-fade-in > *:nth-child(6) { animation-delay: 0.6s; }

/* Morphing Shapes */
.morph-circle {
  transition: all var(--transition-slow);
  border-radius: var(--radius-full);
}

.morph-circle:hover {
  border-radius: var(--radius-lg);
  transform: scale(1.1) rotate(5deg);
}

/* Text Reveal Animation */
.text-reveal {
  position: relative;
  overflow: hidden;
}

.text-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.text-reveal.animate::after {
  transform: translateX(100%);
}

/* Floating Elements */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Magnetic Buttons */
.magnetic-btn {
  transition: all var(--transition-base);
  cursor: pointer;
}

.magnetic-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.4);
}

/* Glitch Effect */
.glitch {
  position: relative;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch:hover::before {
  animation: glitch-1 0.3s ease-in-out;
  color: var(--accent);
  z-index: -1;
}

.glitch:hover::after {
  animation: glitch-2 0.3s ease-in-out;
  color: var(--secondary);
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); opacity: 0; }
  20% { transform: translate(-2px, 2px); opacity: 1; }
  40% { transform: translate(-2px, -2px); opacity: 1; }
  60% { transform: translate(2px, 2px); opacity: 1; }
  80% { transform: translate(2px, -2px); opacity: 1; }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); opacity: 0; }
  20% { transform: translate(2px, -2px); opacity: 1; }
  40% { transform: translate(2px, 2px); opacity: 1; }
  60% { transform: translate(-2px, -2px); opacity: 1; }
  80% { transform: translate(-2px, 2px); opacity: 1; }
}

/* Tennis Court Line Animation */
@keyframes draw-line {
  from { width: 0; }
  to { width: 100%; }
}

.tennis-line {
  position: relative;
  overflow: hidden;
}

.tennis-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  animation: draw-line 0.8s ease forwards;
}

/* Progress Indicators */
.progress-tennis {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-tennis-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--secondary));
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
  position: relative;
}

.progress-tennis-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(45deg, 
    rgba(255,255,255,0.2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255,255,255,0.2) 50%, 
    rgba(255,255,255,0.2) 75%, 
    transparent 75%, 
    transparent);
  background-size: 20px 20px;
  animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

/* FINAL CTA SECTION FIX - Override conflicting display-4 and lead rules */
section.final-cta h2.display-4,
section.final-cta p.lead,
.final-cta h2.display-4,
.final-cta p.lead,
.final-cta .display-4,
.final-cta .lead,
.final-cta h1,
.final-cta h2,
.final-cta h3,
.final-cta h4,
.final-cta h5,
.final-cta h6,
.final-cta p {
  color: white !important;
  text-shadow: none !important;
  -webkit-text-shadow: none !important;
  -moz-text-shadow: none !important;
  -ms-text-shadow: none !important;
}