:root {
  /* Modern AI Brand Colors */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #8b5cf6;
  --secondary: #06b6d4;
  --secondary-dark: #0891b2;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  
  /* Sophisticated Text Colors */
  --text: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --text-white: #ffffff;
  
  /* Modern Background System */
  --bg: #fafaff;
  --bg-secondary: #f8fafc;
  --bg-dark: #0f0f1a;
  --bg-dark-secondary: #1e1b2e;
  
  /* Glass Morphism Cards */
  --card: rgba(255, 255, 255, 0.95);
  --card-border: rgba(255, 255, 255, 0.2);
  --card-dark: rgba(30, 27, 46, 0.95);
  --card-dark-border: rgba(255, 255, 255, 0.1);
  
  /* Advanced Gradients */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
  --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-dark-glass: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  
  /* Professional Spacing & Sizing */
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --max-width: 1280px;
  --nav-height: 80px;
  
  /* Advanced Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glass: 0 8px 32px rgba(99, 102, 241, 0.15);
  --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
  
  /* Enhanced Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-Index Scale */
  --z-nav: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  
  /* Dynamic viewport height for mobile */
  --vh: 1vh;
}

.hero-header,
.cta-header {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  animation: fadeInUp 0.8s ease-out;
}

.cta-header {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 2rem;
}

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

/* Enhanced responsiveness */
@media (max-width: 900px) {
  .hero-header,
  .cta-header {
    text-align: center;
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Dark mode gradient text */
body.dark .hero-header,
body.dark .cta-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ...rest of your CSS below this (features, pricing, testimonials, etc.)... */

/* Professional Reset and Base Styles */
*, *::before, *::after { 
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body, html { 
  margin: 0; 
  padding: 0; 
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  overflow-x: hidden;
}

/* Enhanced Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

p {
  margin: 0 0 1rem 0;
  color: var(--text-muted);
  line-height: 1.7;
}

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

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

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

ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

/* Professional Container */
.container { 
  max-width: var(--max-width); 
  margin: 0 auto; 
  padding: 0 2rem;
  position: relative;
}

/* Enhanced Skip Link */
.skip-link {
  position: absolute; 
  left: -9999px; 
  top: 1rem;
  padding: 0.75rem 1.5rem; 
  background: var(--primary);
  color: var(--text-white);
  border-radius: var(--radius); 
  z-index: 10001; 
  font-weight: 600; 
  transition: var(--transition-fast);
  box-shadow: var(--shadow-lg);
}

.skip-link.visible, 
.skip-link:focus { 
  left: 1rem; 
  outline: 2px solid var(--secondary); 
  outline-offset: 2px;
}

/* Modern Glassmorphism Navigation */
.main-header {
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--card-border);
  box-shadow: var(--shadow-glass);
  position: sticky; 
  top: 0; 
  z-index: var(--z-nav);
  transition: var(--transition);
}

.nav {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  height: var(--nav-height);
  padding: 0 1rem;
}

/* Enhanced Logo Group */
.logo-group { 
  display: flex; 
  align-items: center; 
  gap: 1rem;
  font-size: 1.5rem; 
  font-weight: 800; 
  margin-right: 2rem;
  transition: var(--transition-fast);
}

.logo-group:hover {
  transform: translateY(-1px);
}

.logo, .footer-logo {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 8px;
  transition: var(--transition-fast);
}

.logo:hover {
  box-shadow: var(--shadow);
}

.site-title { 
  font-size: 1.4rem; 
  font-weight: 800; 
  letter-spacing: -0.02em;
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ai-badge { 
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%) !important;
  color: #ffffff !important; 
  border-radius: var(--radius); 
  padding: 0.3rem 0.8rem; 
  font-size: 0.75em; 
  font-weight: 900 !important;
  margin-left: 0.5rem;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
  animation: pulse 2s infinite;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 0 #fff !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  z-index: 10;
  /* Ensure text is always visible */
  -webkit-text-fill-color: #ffffff !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .ai-badge {
    padding: 0.2rem 0.6rem;
    font-size: 0.7em;
    margin-left: 0.3rem;
  }
}

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

/* Modern Navigation Links */
nav ul { 
  display: flex; 
  gap: 0.5rem; 
  align-items: center; 
}

nav a { 
  font-weight: 600; 
  padding: 0.75rem 1.25rem; 
  border-radius: var(--radius); 
  transition: var(--transition-fast); 
  display: flex; 
  align-items: center; 
  white-space: nowrap; 
  line-height: 1.2;
  text-decoration: none;
  color: var(--text-muted);
  position: relative;
  overflow: hidden;
}

nav a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: var(--transition);
  z-index: -1;
  border-radius: var(--radius);
}

nav a:hover, nav a.active { 
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

nav a:hover::before, nav a.active::before {
  left: 0;
}

/* Enhanced CTA Section */
.nav-ctas { 
  display: flex; 
  gap: 0.75rem; 
  align-items: center; 
}

#theme-toggle { 
  background: var(--card); 
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 1.1rem; 
  cursor: pointer; 
  transition: var(--transition-fast);
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  font-family: inherit;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.admin-access-btn {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
}

.admin-access-btn:hover {
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
  opacity: 1;
  text-decoration: none;
}

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

#theme-toggle:active {
  transform: translateY(0);
}

#mobile-nav-toggle { 
  display: none; 
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 1.3rem; 
  cursor: pointer;
  color: var(--text-muted);
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

/* Admin Access Button */
.admin-access-btn {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
  box-shadow: var(--shadow-sm);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7; /* Subtle by default */
}

.admin-access-btn:hover {
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
  opacity: 1;
  text-decoration: none;
}

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

/* Mobile Navigation */
@media (max-width: 900px) {
  /* Improved mobile navigation */
  .container {
    padding: 0 1rem; /* Reduce padding on small screens */
  }
  
  .nav {
    padding: 0.5rem 1rem; /* Maintain padding for mobile */
  }
  
  .logo-group {
    gap: 12px; /* Slightly smaller gap on mobile */
    font-size: 1.2rem;
    margin-right: 1rem; /* Smaller margin on mobile */
  }
  
  .logo {
    height: 35px;
  }
  
  .site-title {
    font-size: 1.1rem;
  }
  
  nav ul { 
    display: none; 
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    flex-direction: column;
    padding: 0.5rem 0;
    margin: 0.5rem;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  
  nav ul.active { 
    display: flex; 
  }
  
  nav ul li {
    margin: 0;
    padding: 0;
  }
  
  nav ul a {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    margin: 0;
    border-radius: 0;
    text-align: left;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    font-weight: 600;
    min-height: 54px; /* Larger touch targets for mobile */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  nav ul li:last-child a {
    border-bottom: none;
  }
  
  nav ul a:hover,
  nav ul a:focus,
  nav ul a:active {
    background: var(--primary);
    color: #fff;
    transform: none; /* Remove transform for mobile */
  }
  
  .nav { 
    position: relative;
  }
  
  .nav-ctas {
    gap: 0.5rem;
  }
  
  /* Make schedule call button visible on mobile with adjusted styling */
  #calendly-btn {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    min-height: 42px;
    display: inline-flex;
  }
  
  .nav-ctas .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
    min-height: 42px;
  }
  
  #theme-toggle {
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    min-height: 42px;
  }
  
  #theme-toggle {
    padding: 0.75rem;
    min-width: 44px;
    min-height: 44px;
  }
  
  #mobile-nav-toggle { 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: all 0.2s ease;
    min-width: 48px; /* Larger touch target */
    min-height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1.3rem;
  }
  
  #mobile-nav-toggle.open {
    transform: rotate(90deg);
    background: rgba(108, 71, 255, 0.1);
  }
  
  #mobile-nav-toggle:hover,
  #mobile-nav-toggle:focus,
  #mobile-nav-toggle:active {
    color: var(--primary);
    background: rgba(108, 71, 255, 0.1);
  }
}
/* Modern Hero Section */
.hero { 
  position: relative; 
  background: var(--gradient-primary); 
  color: var(--text-white); 
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
  animation: float 6s ease-in-out infinite;
}

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

.hero-bg {
  position: absolute; 
  inset: 0; 
  z-index: 0;
  opacity: 0.1; 
  pointer-events: none;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmlkKSIvPjwvc3ZnPg==');
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  min-height: 80vh;
  position: relative;
  z-index: 1;
  padding: 2rem 0;
}

.hero-left { 
  flex: 1; 
  min-width: 300px;
  animation: slideInLeft 0.8s ease-out;
}

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

.hero-right.hero-media-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  min-width: 350px;
  animation: slideInRight 0.8s ease-out 0.2s both;
}

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

.hero-video, .hero-image {
  max-width: 500px;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  background: var(--card-dark);
  border: 1px solid rgba(255, 255, 255, 0.2);
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: var(--transition);
}

.hero-video:hover, .hero-image:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow);
}

.hero-image { 
  margin-top: 0; 
}

.lottie-hero {
  width: 280px;
  height: 280px;
  margin: 1rem auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2));
}

.hero-left h1 { 
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800; 
  line-height: 1.1; 
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-contrast {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  text-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.hero-left p { 
  font-size: 1.25rem; 
  margin-bottom: 2.5rem; 
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.hero-ctas { 
  display: flex; 
  gap: 1.5rem; 
  margin-bottom: 3rem;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.hero-ctas .btn { 
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 1rem 2rem;
  min-height: 54px;
  border-radius: var(--radius);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: -0.01em;
}

.btn-gradient {
  background: var(--gradient-primary);
  color: var(--text-white);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.btn-gradient:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  filter: brightness(1.1);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-white);
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.hero-stats { 
  display: flex; 
  gap: 3rem; 
  font-size: 1.1rem;
  animation: fadeInUp 0.8s ease-out 1s both;
}

.stat-num { 
  font-size: 2.5rem; 
  font-weight: 800; 
  margin-right: 0.5rem; 
  background: var(--gradient-accent);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label { 
  font-size: 1rem; 
  color: rgba(255, 255, 255, 0.8);
}

/* Mobile Hero Optimizations */
@media (max-width: 900px) {
  .hero {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  .hero-content { 
    flex-direction: column; 
    text-align: center; 
    gap: 3rem;
    min-height: auto;
    padding: 2rem 0;
  }
  
  .hero-left { 
    width: 100%; 
    min-width: auto;
  }
  
  .hero-right.hero-media-wrapper { 
    margin-top: 0;
    min-width: auto;
  }
  
  .hero-video, .hero-image { 
    margin-left: auto; 
    margin-right: auto;
    max-width: 90%;
  }
  
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .hero-ctas .btn {
    width: 100%;
    max-width: 280px;
  }
  
  .hero-stats {
    justify-content: center;
    gap: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Mobile viewport fix */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  .hero {
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

/* Modern Gradient Text System with Better Contrast */
.gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  font-weight: 800;
  text-shadow: none;
  /* Ensure crisp rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fallback for browsers that don't support background-clip: text */
  background-color: #4f46e5;
}

/* Force sharp text rendering in light mode */
body:not(.dark) .gradient-text {
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #f59e0b 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: contrast(1.2) brightness(1.1);
}

/* Ensure text is visible on gradient backgrounds */
.gradient-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.9);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: var(--transition);
  z-index: -1;
}

/* On sections with gradient backgrounds, ensure text contrast */
.hero .gradient-text,
.features .gradient-text,
.pricing .gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #e2e8f0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.gradient-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: var(--transition);
}

.gradient-text:hover::after {
  opacity: 1;
}

/* Professional Section Headers */
.features-header, .pricing-header, .testimonials-header, .contact-header, .newsletter-header, .checkout-header {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 3rem;
  text-align: center;
  position: relative;
  animation: fadeInUp 0.6s ease-out;
}

.features-header::after,
.pricing-header::after,
.testimonials-header::after {
  content: '';
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: 2px;
}

/* Modern Features Section */
.features { 
  background: var(--bg-secondary);
  padding: 6rem 0;
  position: relative;
}

.features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.features-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(2, 1fr);
  gap: 2.5rem;
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .features-grid { 
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;
  }
}

.feature-card { 
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-glass); 
  padding: 2.5rem 2rem; 
  text-align: center; 
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: var(--transition);
}

.feature-card:focus, .feature-card:hover { 
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(99, 102, 241, 0.3);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-lottie { 
  height: 100px; 
  width: 100px; 
  margin: 0 auto 1.5rem auto;
  filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.2));
}

.feature-card h3 { 
  font-size: 1.4rem; 
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.feature-card p { 
  color: var(--text-muted); 
  font-size: 1.1rem; 
  line-height: 1.6;
}

/* Professional Pricing Section */
.pricing { 
  background: var(--bg);
  padding: 6rem 0;
  padding-top: 8rem;  /* Extra padding to accommodate badges */
  position: relative;
  overflow: visible;  /* Allow badges to be visible */
}

.pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(135deg, rgba(99, 102, 241, 0.02) 0%, rgba(6, 182, 212, 0.02) 100%);
  pointer-events: none;
}
/* Modern Billing Toggle */
.billing-toggle-row { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 1.5rem; 
  margin-bottom: 3rem; 
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

.switch { 
  position: relative; 
  display: inline-block; 
  width: 56px; 
  height: 30px;
}

.switch input { 
  opacity: 0; 
  width: 0; 
  height: 0;
}

.slider { 
  position: absolute; 
  cursor: pointer; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: var(--text-light);
  border-radius: 30px; 
  transition: var(--transition);
  border: 2px solid var(--card-border);
}

.slider:before { 
  position: absolute; 
  content: ""; 
  height: 22px; 
  width: 22px; 
  left: 2px; 
  bottom: 2px; 
  background: var(--text-white);
  border-radius: 50%; 
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.switch input:checked + .slider { 
  background: var(--primary);
  border-color: var(--primary);
}

.switch input:checked + .slider:before { 
  transform: translateX(26px);
}

/* Professional Pricing Grid */
.pricing-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 2rem; 
  justify-content: center;
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.pricing-card { 
  background: var(--card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-glass); 
  padding: 2.5rem 2rem; 
  text-align: center; 
  position: relative;
  transition: var(--transition);
  overflow: hidden;
}

.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glass);
  opacity: 0;
  transition: var(--transition);
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(99, 102, 241, 0.3);
}

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

.popular { 
  border: 2px solid var(--primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-glow);
  position: relative;
}

.popular::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0.03;
  pointer-events: none;
}

.pricing-card .badge { 
  position: absolute; 
  bottom: 6rem;  /* Moved up to create space above button */
  left: 50%; 
  transform: translateX(-50%); 
  background: var(--gradient-primary); 
  color: var(--text-white); 
  font-size: 0.9rem; 
  padding: 0.5rem 1.5rem; 
  border-radius: 20px; 
  font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 2;
}

.pricing-card h3 { 
  font-size: 1.5rem; 
  font-weight: 800; 
  margin-bottom: 1.5rem;
  color: var(--text);
  position: relative;
  z-index: 2;
}

.price { 
  font-size: 2.5rem; 
  font-weight: 800; 
  margin-bottom: 1rem;
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
}
.price .yearly { display: none; }
.price .monthly { display: inline; }
.price .interval { font-size: 1rem; color: var(--text-muted);}
.pricing-card ul { margin: 1.1rem 0 1.7rem 0; padding: 0;}
.pricing-card ul li { font-size: 1rem; padding: .37rem 0; color: var(--text-muted);}

/* Base Button Styles */
.btn {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: -0.01em;
  min-height: 44px;
  line-height: 1.2;
}

.btn.big {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  min-height: 54px;
}

/* Enhanced Pricing Button Styles */
.pricing-btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  margin-top: 1.5rem;
  letter-spacing: -0.01em;
  min-height: 50px;
  cursor: pointer;
  border: 2px solid transparent;
}

.pricing-btn.btn-primary {
  background: var(--gradient-primary);
  color: var(--text-white);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.pricing-btn.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
  filter: brightness(1.1);
}

.pricing-btn.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.pricing-btn.btn-outline:hover {
  background: var(--primary);
  color: var(--text-white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Enhanced Pricing Card Appearance */
.pricing-card h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.pricing-card .price {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 2rem;
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
}

.pricing-card ul {
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.pricing-card ul li {
  font-size: 1rem;
  padding: 0.75rem 0;
  color: var(--text-muted);
  border-bottom: 1px solid var(--card-border);
  position: relative;
  padding-left: 1.5rem;
}

.pricing-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
  font-size: 1.1rem;
}

.pricing-card ul li:last-child {
  border-bottom: none;
}

/* Popular Plan Enhancement */
.pricing-card.popular {
  border-color: var(--primary);
  box-shadow: var(--shadow-xl);
  transform: scale(1.05);
  position: relative;
}

.pricing-card.popular::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  opacity: 0.03;
  pointer-events: none;
}

.pricing-card.popular .pricing-btn {
  background: var(--gradient-secondary);
  border-color: transparent;
  color: var(--text-white);
  box-shadow: var(--shadow-glow);
}

.pricing-card.popular .pricing-btn:hover {
  filter: brightness(1.15);
  transform: translateY(-3px) scale(1.02);
}

/* Mobile Responsive Pricing */
@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .pricing-card.popular {
    transform: scale(1);
  }
  
  .pricing-card {
    padding: 2rem 1.5rem;
  }
  
  .pricing-btn {
    font-size: 1rem;
    padding: 0.9rem 1.5rem;
  }
}

/* Professional Testimonials Section */
.testimonials { background: var(--bg);}
.testimonials-carousel { 
  position: relative;
  display: flex; 
  align-items: stretch; 
  justify-content: center; 
  overflow: hidden;
  min-height: 220px;
}
.testimonial { 
  min-width: 100%; 
  max-width: 100%; 
  opacity: 0; 
  transform: scale(0.95); 
  transition: opacity 0.5s, transform 0.5s;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 1rem;
}
.testimonial.active { 
  opacity: 1; 
  transform: scale(1);
  display: flex;
}
.stars { 
  color: var(--accent); 
  font-size: 1.25rem; 
  margin-bottom: 0.7rem;
}

.testimonial p { 
  font-size: 1.25rem; 
  font-weight: 500; 
  margin-bottom: 1rem; 
  text-align: center;
}

.testimonial .user { 
  color: var(--text-muted); 
  font-size: 1rem; 
  text-align: center;
}

.carousel-controls { 
  text-align: center; 
  margin-top: 1.5rem;
}

.carousel-controls button { 
  background: var(--gradient-primary); 
  color: var(--text-white); 
  border: none; 
  border-radius: 50%; 
  width: 44px; 
  height: 44px; 
  margin: 0 0.75rem; 
  font-size: 1.2rem; 
  cursor: pointer; 
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.carousel-controls button:hover { 
  filter: brightness(0.85);
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .testimonials-carousel {
    flex-direction: column;
    gap: 1.5rem;
    min-height: unset;
  }
  .testimonial {
    min-width: 100%;
    max-width: 100%;
    opacity: 1 !important;
    transform: scale(1) !important;
    display: flex !important;
  }
}

/* Dark mode testimonial text fixes */
body.dark .testimonial p {
  color: var(--text-white) !important;
}
body.dark .testimonial .user {
  color: var(--text-light) !important;
}
body.dark .testimonials-header,
body.dark .testimonials .section-title,
body.dark .testimonials .gradient-text {
  color: var(--text-white) !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body.dark .stars {
  color: var(--accent-light) !important;
}

/* Failsafe for testimonial visibility */
.testimonial {
  color: var(--text);
}
.testimonial p {
  color: inherit;
}
.testimonial .user {
  color: var(--text-muted);
}

/* Ensure testimonials work in both light and dark modes */
body.dark .testimonial {
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-gradient { 
  background: var(--gradient-primary); 
  color: var(--text-white); 
  padding: 80px 0; 
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.cta-flex { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 2.5rem; 
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.cta-flex h2 { 
  font-size: clamp(2rem, 4vw, 2.8rem); 
  font-weight: 800;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-flex .btn { 
  font-size: 1.1rem;
  padding: 1rem 2rem;
  min-height: 54px;
}

@media (max-width:700px) { 
  .cta-flex { 
    flex-direction: column; 
    gap: 2rem;
    text-align: center;
  } 
}

.contact { background: var(--bg);}
.contact-flex { display: flex; gap: 3rem; justify-content: space-between; align-items: flex-start;}
@media (max-width:700px) { .contact-flex { flex-direction: column; gap: 2rem;} }

/* Dark Mode Forms and Contact */
body.dark .contact-form,
body.dark .newsletter {
  background: var(--card-dark);
  border-color: var(--card-dark-border);
}

body.dark .contact-form input,
body.dark .contact-form textarea,
body.dark .newsletter-form input {
  background: var(--bg-dark-secondary);
  border-color: var(--card-dark-border);
  color: var(--text-white);
}

body.dark .contact-form input::placeholder,
body.dark .contact-form textarea::placeholder,
body.dark .newsletter-form input::placeholder {
  color: var(--text-light);
}

body.dark .contact-form h3,
body.dark .newsletter h3 {
  color: var(--text-white);
}

body.dark .contact-info,
body.dark .newsletter-desc {
  color: var(--text-light);
}

body.dark .checkout {
  background: var(--bg-dark-secondary);
}

/* Professional Checkout Section */
.checkout { background: #f3f4fd;}
.stripe-checkout { display: flex; justify-content: center; margin: 2.3rem 0 1.3rem 0;}
.stripe-checkout iframe { width: 100%; max-width: 450px; height: 530px; border: none; border-radius: var(--radius); box-shadow: var(--shadow);}
.stripe-note { text-align: center; color: var(--text-muted); font-size: 1.1rem;}

.footer { 
  background: var(--gradient-primary); 
  color: var(--text-white); 
  padding: 2.5rem 0;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.footer-content { 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: space-between; 
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.footer-content > div:first-of-type {
  /* Copyright text - remove from bubble */
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  border: none !important;
  color: var(--text-white);
  font-weight: 500;
  font-size: 1rem;
}

.footer-content > div:last-of-type {
  /* Email contact div - keep in bubble */
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-content a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  transition: var(--transition);
}

.footer-content a:hover {
  text-decoration-color: #ffffff;
  color: #f8fafc !important;
}

.footer-content strong {
  color: #ffffff;
  font-weight: 700;
}
.footer-logo { 
  height: 60px; 
  margin-bottom: .5rem;
  transition: var(--transition);
}

.footer-logo:hover {
  transform: scale(1.05);
}

.footer-socials a { margin-left: 13px; color: var(--text-white); font-size: 1.24rem;}

.footer-admin-link {
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  margin-left: 1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-decoration: none;
  opacity: 0.8;
}

.footer-admin-link:hover {
  color: var(--primary) !important;
  background: rgba(99, 102, 241, 0.1);
  opacity: 1;
  text-decoration: none;
}

.footer-admin-link i {
  margin-right: 0.25rem;
}

@media (max-width:700px) { .footer-content { flex-direction: column; text-align: center; gap: 1.2rem;} }

section { padding: 80px 0;}
@media (max-width:700px) { section { padding: 40px 0;} }

/* Comprehensive Dark Mode */
body.dark {
  background: var(--bg-dark); 
  color: var(--text-white);
}

/* Dark Mode Navigation */
body.dark .main-header {
  background: var(--card-dark);
  border-bottom-color: var(--card-dark-border);
}

body.dark .site-title {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark .nav a {
  color: var(--text-light);
}

body.dark .nav a:hover,
body.dark .nav a.active {
  color: var(--text-white);
}

body.dark #theme-toggle,
body.dark #mobile-nav-toggle {
  background: var(--card-dark);
  border-color: var(--card-dark-border);
  color: var(--text-light);
}

/* Dark Mode Sections */
body.dark .features,
body.dark .pricing,
body.dark .testimonials,
body.dark .contact,
body.dark .footer {
  background: var(--bg-dark-secondary);
}

body.dark .features::before,
body.dark .pricing::before {
  background: 
    radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

/* Dark Mode Cards */
body.dark .feature-card,
body.dark .pricing-card,
body.dark .testimonial {
  background: var(--card-dark);
  border-color: var(--card-dark-border);
  box-shadow: var(--shadow-xl);
}

body.dark .feature-card:hover,
body.dark .pricing-card:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.25);
}

body.dark .popular {
  border-color: var(--primary-light);
  box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.3);
}

body.dark .popular::after {
  background: var(--gradient-secondary);
  opacity: 0.05;
}

/* Dark Mode Typography */
body.dark .feature-card h3,
body.dark .pricing-card h3,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 {
  color: var(--text-white);
}

body.dark .feature-card p,
body.dark .pricing-card ul li,
body.dark p {
  color: var(--text-light);
}

body.dark .price .interval,
body.dark .testimonial .user {
  color: var(--text-light);
}

/* Dark Mode Buttons */
body.dark .btn-outline { 
  color: var(--text-white); 
  border-color: var(--primary-light);
  background: rgba(139, 92, 246, 0.1);
}

body.dark .btn-outline:hover { 
  background: var(--primary-light); 
  color: var(--text-white);
}

/* Dark Mode Testimonials are handled above */

body.dark .carousel-controls button {
  background: var(--gradient-secondary);
}

/* Dark Mode Scrollbar */
body.dark ::-webkit-scrollbar { 
  background: var(--bg-dark);
}

body.dark ::-webkit-scrollbar-thumb { 
  background: var(--primary-light);
  border-radius: 12px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}
::-webkit-scrollbar { width: 9px; background: #eceffe;}
::-webkit-scrollbar-thumb { background: #bdb8ff; border-radius: 12px;}
body.dark ::-webkit-scrollbar-thumb { background: #635bff;}

/* Update asset paths for images, videos, and animations if referenced in CSS.
   (No changes needed if you do not reference assets in CSS using url().)
   If you do, change any url(/public/...) to url(public/...) below: */

/* Example (uncomment and update if you use background images):
.hero-bg {
  background-image: url(public/your-bg-image.png);
}
*/

/* === Professional Calendly Integration === */

/* Body scroll prevention when popup is open */
body.calendly-overlay-is-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

/* Professional overlay styling */
.calendly-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: fadeInOverlay 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Professional popup container */
.calendly-popup,
[data-calendly-popup] {
  position: relative !important;
  width: 90% !important;
  max-width: 1000px !important;
  height: 85% !important;
  max-height: 800px !important;
  min-height: 600px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 
    0 32px 64px rgba(0, 0, 0, 0.24),
    0 16px 32px rgba(0, 0, 0, 0.16),
    0 8px 16px rgba(0, 0, 0, 0.12) !important;
  animation: slideInPopup 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Professional iframe styling */
.calendly-popup iframe,
[data-calendly-popup] iframe,
iframe[src*="calendly.com"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  border: none !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  display: block !important;
  flex: 1 !important;
}

/* Ensure proper widget sizing */
.calendly-inline-widget {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Force proper iframe dimensions for all Calendly elements */
.calendly-overlay iframe,
.calendly-popup iframe,
[data-calendly-popup] iframe,
div[data-calendly] iframe,
iframe[src*="calendly"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  background: #ffffff !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
}

/* Ensure all Calendly containers are properly sized */
div[class*="calendly"],
div[data-calendly] {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  display: block !important;
  position: relative !important;
}

/* Professional close button - defined in CSS for consistency */
.calendly-close-btn {
  position: fixed !important;
  top: 25px !important;
  right: 25px !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  color: #333333 !important;
  z-index: 10010 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  outline: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.calendly-close-btn:hover {
  transform: scale(1.05) !important;
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.16),
    0 6px 12px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.calendly-close-btn:active {
  transform: scale(0.95) !important;
}

.calendly-close-btn:focus
  .calendly-popup iframe,
  [data-calendly-popup] iframe,
  iframe[src*="calendly.com"] {
    border-radius: 16px !important;
  }
}

@media (max-width: 768px) {
  .calendly-overlay {
    padding: 16px !important;
  }
  
  .calendly-popup,
  [data-calendly-popup] {
    width: 100% !important;
    height: 95% !important;
    max-height: none !important;
    border-radius: 12px !important;
  }
  
  .calendly-popup iframe,
  [data-calendly-popup] iframe,
  iframe[src*="calendly.com"] {
    border-radius: 12px !important;
  }
  
  .calendly-close-btn {
    top: 20px !important;
    right: 20px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  .calendly-overlay {
    padding: 12px !important;
  }
  
  .calendly-popup,
  [data-calendly-popup] {
    width: 100% !important;
    height: 98% !important;
    border-radius: 8px !important;
  }
  
  .calendly-popup iframe,
  [data-calendly-popup] iframe,
  iframe[src*="calendly.com"] {
    border-radius: 8px !important;
  }
  
  .calendly-close-btn {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .calendly-close-btn {
    background: rgba(45, 45, 45, 0.98) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  .calendly-close-btn:hover {
    background: rgba(45, 45, 45, 1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }

  .calendly-popup,
  [data-calendly-popup] {
    box-shadow: 
      0 32px 64px rgba(0, 0, 0, 0.4),
      0 16px 32px rgba(0, 0, 0, 0.3),
      0 8px 16px rgba(0, 0, 0, 0.2) !important;
  }
}

/* Prevent any layout issues */
body.calendly-overlay-is-open * {
  -webkit-overflow-scrolling: touch;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .calendly-close-btn {
    border-width: 3px !important;
    border-color: #000000 !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .calendly-overlay,
  .calendly-popup,
  [data-calendly-popup],
  .calendly-close-btn {
    animation: none !important;
    transition: none !important;
  }
}

/* Professional Micro-Interactions */
.feature-card, .pricing-card, .testimonial, .btn {
  will-change: transform, box-shadow;
}

/* Enhanced Hover States */
.feature-card:hover .feature-lottie {
  transform: scale(1.1);
}

.pricing-card:hover .badge {
  transform: translateX(-50%) scale(1.05);
}

/* Professional Loading States */
.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Section Animations */
@media (prefers-reduced-motion: no-preference) {
  .features-grid > .feature-card {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
  }
  
  .features-grid > .feature-card:nth-child(1) { animation-delay: 0.1s; }
  .features-grid > .feature-card:nth-child(2) { animation-delay: 0.2s; }
  .features-grid > .feature-card:nth-child(3) { animation-delay: 0.3s; }
  .features-grid > .feature-card:nth-child(4) { animation-delay: 0.4s; }
  
  .pricing-grid > .pricing-card {
    animation: slideInUp 0.6s ease-out;
    animation-fill-mode: both;
  }
  
  .pricing-grid > .pricing-card:nth-child(1) { animation-delay: 0.1s; }
  .pricing-grid > .pricing-card:nth-child(2) { animation-delay: 0.2s; }
  .pricing-grid > .pricing-card:nth-child(3) { animation-delay: 0.3s; }
}

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

/* High-End Visual Polish */
.hero::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--bg) 100%);
  pointer-events: none;
}

/* Professional Focus States */
.btn:focus-visible,
.pricing-card:focus-visible,
.feature-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Enhanced Typography Hierarchy */
.section-title.large {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 4rem;
}

.section-title.medium {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 3rem;
}

/* Professional Spacing System */
.spacing-xs { padding: 1rem 0; }
.spacing-sm { padding: 2rem 0; }
.spacing-md { padding: 4rem 0; }
.spacing-lg { padding: 6rem 0; }
.spacing-xl { padding: 8rem 0; }

/* Mobile-First Responsive Updates */
@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  
  .hero-content {
    padding: 1rem 0;
  }
  
  .features-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .feature-card,
  .pricing-card {
    padding: 1.5rem;
  }
}

/* Enhanced AI Assistant Section Styling */
.ai-assistant {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.ai-assistant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.ai-assistant-main-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--text);
  background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 50%, #8b5cf6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.02em;
}

.ai-assistant-wrapper {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ai-assistant-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
}

.ai-assistant-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ai-assistant-intro p {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.ai-input-group {
  display: flex;
  gap: 1rem;
  margin-bottom:  2rem;
  align-items: flex-end;
}

.ai-input-group textarea {
  flex: 1;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 60px;
  transition: var(--transition);
}

.ai-input-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.ai-submit-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
  margin-top: 0.5rem;
}

.contact {
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-secondary) 100%);
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.contact-flex {
  display: flex;
  gap: 3rem;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.contact-form, .newsletter {
  flex: 1 1 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 3rem 2.5rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(20px);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.contact-form::before,
.newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.contact-form:hover,
.newsletter:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glow);
}

.contact-header,
.newsletter-header {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 2rem;
  text-align: center;
}

.contact-form form,
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form input,
.contact-form textarea,
.newsletter-form input {
  border-radius: var(--radius);
  border: 2px solid var(--card-border);
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: var(--transition);
}

.contact-form input:focus,
.contact-form textarea:focus,
.newsletter-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

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

.contact-submit-btn,
.newsletter-submit-btn {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
  margin-top: 0.5rem;
}

.contact-submit-btn {
  background: var(--gradient-primary);
  color: var(--text-white);
}

.contact-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.1);
}

.newsletter-submit-btn {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.newsletter-submit-btn:hover {
  background: var(--primary);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.contact-info,
.newsletter-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 1.5rem;
  line-height: 1.6;
  text-align: center;
}

.contact-info strong {
  color: var(--text);
  font-weight: 600;
}

.contact-info a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: rgba(99, 102, 241, 0.3);
  transition: var(--transition);
}

.contact-info a:hover {
  text-decoration-color: var(--primary);
  color: var(--primary-dark);
}

/* Pulsing Robot Animation for AI Assistant */
.ai-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: robotPulse 2s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

.ai-avatar::before {
  content: '🤖';
  font-size: 20px;
  animation: robotBounce 1.5s ease-in-out infinite;
}

.ai-avatar::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  opacity: 0.3;
  animation: robotRing 2s ease-out infinite;
  z-index: -1;
}

/* Robot Animation Keyframes */
@keyframes robotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(79, 70, 229, 0.5);
  }
}

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

@keyframes robotRing {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Enhanced Memory Indicator */
#memory-indicator {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#memory-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #4f46e5);
  background-size: 200% 100%;
  animation: memoryGlow 3s ease-in-out infinite;
}

#memory-indicator:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#memory-indicator .fa-brain {
  color: #8b5cf6;
  font-size: 1.2rem;
  animation: brainPulse 2s ease-in-out infinite;
}

/* Enhanced Clear Memory Button */
.clear-memory-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  margin-left: auto;
}

.clear-memory-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.clear-memory-btn:active {
  transform: translateY(0);
}

.clear-memory-btn .fa-trash {
  margin-right: 0.5rem;
  animation: trashWiggle 2s ease-in-out infinite;
}

/* Memory Animation Keyframes */
@keyframes memoryGlow {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes brainPulse {
  0%, 100% {
    transform: scale(1);
    color: #8b5cf6;
  }
  50% {
    transform: scale(1.1);
    color: #7c3aed;
  }
}

@keyframes trashWiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

/* Dark mode support for memory indicator */
[data-theme="dark"] #memory-indicator {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  border-color: #475569;
  color: var(--text-white);
}

[data-theme="dark"] #memory-indicator:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Loading Animation Enhancement */
.ai-assistant-loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: 12px;
  border: 2px solid var(--border);
  animation: loadingPulse 2s ease-in-out infinite;
}

.loading-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.loading-avatar-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.loading-text {
  font-weight: 600;
  color: var(--text-secondary);
  animation: textPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
  0%, 100% {
    border-color: var(--border);
  }
  50% {
    border-color: var(--primary);
  }
}

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

/* Usage Limit Popup Styling */
.usage-limit-popup {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin: 1rem 0;
  position: relative;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 100%;
}

.usage-limit-popup.show {
  transform: translateY(0);
  opacity: 1;
}

.usage-limit-popup.hide {
  transform: translateY(-20px);
  opacity: 0;
}

.usage-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.usage-warning i {
  font-size: 1.2rem;
}

.usage-limit-reached {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ef4444;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.usage-limit-reached i {
  font-size: 1.2rem;
}

.usage-limit-popup p {
  margin: 0 0 1rem 0;
  color: var(--text);
  line-height: 1.5;
}

.upgrade-suggestion {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.upgrade-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.upgrade-link:hover {
  background: rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.close-usage-message {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.close-usage-message:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

/* Dark Mode Support for Usage Popup */
[data-theme="dark"] .usage-limit-popup {
  background: linear-gradient(135deg, rgba(30, 27, 46, 0.95) 0%, rgba(15, 15, 26, 0.95) 100%);
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .usage-warning {
  color: #fbbf24;
}

[data-theme="dark"] .usage-limit-reached {
  color: #f87171;
}

[data-theme="dark"] .upgrade-link {
  background: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .upgrade-link:hover {
  background: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .close-usage-message:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Mobile Responsiveness for Usage Popup */
@media (max-width: 768px) {
  .usage-limit-popup {
    padding: 1rem;
    margin: 0.8rem 0;
    border-radius: var(--radius);
  }
  
  .usage-warning,
  .usage-limit-reached {
    font-size: 1rem;
  }
  
  .upgrade-suggestion {
    font-size: 0.9rem;
  }
  
  .close-usage-message {
    top: 0.5rem;
    right: 0.5rem;
  }
}