/**
 * Herbal Green Theme CSS
 * 
 * Design Philosophy:
 * Inspired by natural herbs and anti-fungal healing properties - represents
 * nature's healing power, growth, and purification. Perfect for herbal healthcare.
 * 
 * Color Meaning:
 * - Forest Green (#047857): Primary healing, nature's strength, anti-fungal power
 * - Sage Green (#10B981): Secondary healing, herb essence, communication
 * - Mint Fresh (#6EE7B7): Freshness, cleanliness, purity
 * - Tea Green (#D1FAE5): Subtle backgrounds, natural calm
 * - Pine Deep (#064E3B): Deep trust, stability, professional authority
 * - Charcoal (#1F2937): Grounding, readability, text
 * 
 * Built for: Saaka Life Sciences - Natural Anti-Fungal Solutions
 * Performance: Optimized utilities for CDN Tailwind compatibility
 */

/* Base typography - ENHANCED READABILITY */
body{
  font-family:'Assistant',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height: 1.7;
  color: var(--herbal-charcoal);
}

/* Enhanced text readability */
p, li, span {
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  color: var(--herbal-charcoal);
}

/* Herbal Green color variables - ENHANCED CONTRAST */
:root {
  --herbal-forest: #047857;      /* Primary - Deep healing green */
  --herbal-deep: #035F46;        /* NEW: Deeper green for better contrast */
  --herbal-sage: #10B981;        /* Secondary - Herb essence */
  --herbal-mint: #6EE7B7;        /* Accent - Fresh cleanliness */
  --herbal-tea: #D1FAE5;         /* Background - Natural calm */
  --herbal-pine: #064E3B;        /* Deep - Professional authority */
  --herbal-charcoal: #111827;    /* UPDATED: Darker for better readability */

  /* Legacy Krittika mappings for compatibility */
  --krittika-saffron: #047857;   /* Map to forest green */
  --krittika-gold: #6EE7B7;      /* Map to mint fresh */
  --krittika-copper: #10B981;    /* Map to sage green */
  --krittika-sage: #10B981;      /* Keep as sage green */
  --krittika-cream: #D1FAE5;     /* Map to tea green */
  --krittika-charcoal: #111827;  /* UPDATED: Darker charcoal */
}

/* Component-level optimized styles */
.thumbnail-active{border:2px solid var(--krittika-saffron)!important}
.product-thumbnail:hover{border-color:var(--krittika-copper)}
.quantity-controls button{transition:background-color .2s}
.quantity-controls button:hover{background-color:var(--krittika-cream)}
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-radius:50%;border-top-color:var(--krittika-saffron);animation:spin 1s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* MICRO-INTERACTIONS - Button Enhancements */
button, .interactive-element {
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

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

button:active {
  transform: translateY(0) scale(0.98);
}

/* Ripple Effect on Click */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Button Pulse Effect for Primary CTAs */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(4, 120, 87, 0.25); }
  50% { box-shadow: 0 10px 40px rgba(4, 120, 87, 0.4); }
}

.hero-cta-primary {
  animation: cta-pulse 2s ease-in-out infinite;
}

.hero-cta-primary:hover {
  animation: none;
}

/* Enhanced WhatsApp button with Krittika sage green - using proper selectors */
.bg-krittika-sage{background-color:var(--krittika-sage)!important}
.hover\\:bg-green-600:hover{background-color:#059669!important}
.whatsapp-btn{background:var(--krittika-sage)!important}
.whatsapp-btn:hover{background:#48bb78!important}

/* Focus states for accessibility */
input:focus,button:focus,select:focus{outline:2px solid var(--krittika-saffron);outline-offset:2px}

/* MICRO-INTERACTIONS - Form Elements */
input, textarea, select {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--krittika-saffron);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

input:hover:not(:focus), textarea:hover:not(:focus), select:hover:not(:focus) {
  border-color: var(--herbal-sage);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Input Label Float Animation */
.input-group {
  position: relative;
}

.floating-label {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  color: #9ca3af;
  font-size: 1rem;
}

input:focus + .floating-label,
input:not(:placeholder-shown) + .floating-label,
textarea:focus + .floating-label,
textarea:not(:placeholder-shown) + .floating-label {
  top: -0.5rem;
  font-size: 0.75rem;
  color: var(--krittika-saffron);
  background: white;
  padding: 0 0.25rem;
}

/* Custom checkbox styling */
input[type="checkbox"]{appearance:none;width:1.25rem;height:1.25rem;border:2px solid #d1d5db;border-radius:.25rem;background:#fff;cursor:pointer;position:relative}
input[type="checkbox"]:checked{background:var(--krittika-saffron);border-color:var(--krittika-saffron)}
input[type="checkbox"]:checked::after{content:'✓';color:#fff;font-size:.875rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* Herbal Green gradient backgrounds */
.herbal-hero-bg{background:linear-gradient(135deg,var(--herbal-tea) 0%,#f0fdf4 100%)}
.herbal-card-bg{background:linear-gradient(135deg,#fff 0%,var(--herbal-tea) 100%)}

/* Legacy Krittika gradient backgrounds - now using herbal colors */
.krittika-hero-bg{background:linear-gradient(135deg,var(--krittika-cream) 0%,#f0fdf4 100%)}
.krittika-card-bg{background:linear-gradient(135deg,#fff 0%,var(--krittika-cream) 100%)}

/* Herbal Green utility classes - New theme colors */
.text-herbal-forest { color: var(--herbal-forest) !important; }
.text-herbal-sage { color: var(--herbal-sage) !important; }
.text-herbal-mint { color: var(--herbal-mint) !important; }
.text-herbal-tea { color: var(--herbal-tea) !important; }
.text-herbal-pine { color: var(--herbal-pine) !important; }
.text-herbal-charcoal { color: var(--herbal-charcoal) !important; }

.bg-herbal-forest { background-color: var(--herbal-forest) !important; }
.bg-herbal-sage { background-color: var(--herbal-sage) !important; }
.bg-herbal-mint { background-color: var(--herbal-mint) !important; }
.bg-herbal-tea { background-color: var(--herbal-tea) !important; }
.bg-herbal-pine { background-color: var(--herbal-pine) !important; }
.bg-herbal-charcoal { background-color: var(--herbal-charcoal) !important; }

.border-herbal-forest { border-color: var(--herbal-forest) !important; }
.border-herbal-sage { border-color: var(--herbal-sage) !important; }
.border-herbal-mint { border-color: var(--herbal-mint) !important; }
.border-herbal-tea { border-color: var(--herbal-tea) !important; }
.border-herbal-pine { border-color: var(--herbal-pine) !important; }
.border-herbal-charcoal { border-color: var(--herbal-charcoal) !important; }

.hover\\:bg-herbal-forest:hover { background-color: var(--herbal-forest) !important; }
.hover\\:bg-herbal-sage:hover { background-color: var(--herbal-sage) !important; }
.hover\\:bg-herbal-mint:hover { background-color: var(--herbal-mint) !important; }
.hover\\:bg-herbal-tea:hover { background-color: var(--herbal-tea) !important; }
.hover\\:bg-herbal-pine:hover { background-color: var(--herbal-pine) !important; }
.hover\\:bg-herbal-charcoal:hover { background-color: var(--herbal-charcoal) !important; }

.hover\\:text-herbal-forest:hover { color: var(--herbal-forest) !important; }
.hover\\:text-herbal-sage:hover { color: var(--herbal-sage) !important; }
.hover\\:text-herbal-mint:hover { color: var(--herbal-mint) !important; }
.hover\\:text-herbal-tea:hover { color: var(--herbal-tea) !important; }
.hover\\:text-herbal-pine:hover { color: var(--herbal-pine) !important; }
.hover\\:text-herbal-charcoal:hover { color: var(--herbal-charcoal) !important; }

/* Krittika custom utility classes for CDN Tailwind compatibility */
.text-krittika-saffron { color: var(--krittika-saffron) !important; }
.text-krittika-gold { color: var(--krittika-gold) !important; }
.text-krittika-copper { color: var(--krittika-copper) !important; }
.text-krittika-sage { color: var(--krittika-sage) !important; }
.text-krittika-cream { color: var(--krittika-cream) !important; }
.text-krittika-charcoal { color: var(--krittika-charcoal) !important; }

.bg-krittika-saffron { background-color: var(--krittika-saffron) !important; }
.bg-krittika-gold { background-color: var(--krittika-gold) !important; }
.bg-krittika-copper { background-color: var(--krittika-copper) !important; }
.bg-krittika-sage { background-color: var(--krittika-sage) !important; }
.bg-krittika-cream { background-color: var(--krittika-cream) !important; }
.bg-krittika-charcoal { background-color: var(--krittika-charcoal) !important; }

.border-krittika-saffron { border-color: var(--krittika-saffron) !important; }
.border-krittika-gold { border-color: var(--krittika-gold) !important; }
.border-krittika-copper { border-color: var(--krittika-copper) !important; }
.border-krittika-sage { border-color: var(--krittika-sage) !important; }
.border-krittika-cream { border-color: var(--krittika-cream) !important; }
.border-krittika-charcoal { border-color: var(--krittika-charcoal) !important; }

.hover\\:bg-krittika-saffron:hover { background-color: var(--krittika-saffron) !important; }
.hover\\:bg-krittika-gold:hover { background-color: var(--krittika-gold) !important; }
.hover\\:bg-krittika-copper:hover { background-color: var(--krittika-copper) !important; }
.hover\\:bg-krittika-sage:hover { background-color: var(--krittika-sage) !important; }
.hover\\:bg-krittika-cream:hover { background-color: var(--krittika-cream) !important; }
.hover\\:bg-krittika-charcoal:hover { background-color: var(--krittika-charcoal) !important; }

.hover\\:text-krittika-saffron:hover { color: var(--krittika-saffron) !important; }
.hover\\:text-krittika-gold:hover { color: var(--krittika-gold) !important; }
.hover\\:text-krittika-copper:hover { color: var(--krittika-copper) !important; }
.hover\\:text-krittika-sage:hover { color: var(--krittika-sage) !important; }
.hover\\:text-krittika-cream:hover { color: var(--krittika-cream) !important; }
.hover\\:text-krittika-charcoal:hover { color: var(--krittika-charcoal) !important; }

/* Enhanced gradient utilities with Krittika colors */
.from-krittika-cream { --tw-gradient-from: var(--krittika-cream); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 245, 245, 0)); }
.to-krittika-saffron { --tw-gradient-to: var(--krittika-saffron); }
.to-krittika-copper { --tw-gradient-to: var(--krittika-copper); }

/* ENHANCED VISUAL ANIMATIONS */

/* OPTIMIZED ANIMATION TIMING - Faster & Smoother */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(2deg); }
  50% { transform: translateY(-20px) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(-2deg); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Bubble Animations */
@keyframes bubble-1 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-20px) scale(1.2); opacity: 1; }
}

@keyframes bubble-2 {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 0.5; }
  33% { transform: translateY(-15px) scale(1.1) rotate(120deg); opacity: 0.8; }
  66% { transform: translateY(-25px) scale(1.3) rotate(240deg); opacity: 1; }
}

@keyframes bubble-3 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
  25% { transform: translateY(-10px) scale(1.5); opacity: 0.6; }
  75% { transform: translateY(-30px) scale(0.8); opacity: 1; }
}

@keyframes progress-ring {
  from { stroke-dashoffset: 351; }
  to { stroke-dashoffset: 0; }
}

@keyframes water-wave {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-5px) scaleY(1.1); }
}

/* OPTIMIZED Animation Classes - Faster timing */
.animate-slideUp { animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fadeInUp { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fadeInDown { animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-fadeInRight { animation: fadeInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-float { animation: float 5s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 40s linear infinite; }
.animate-gradient { animation: gradient 2.5s ease infinite; background-size: 200% 200%; }
.animate-bubble-1 { animation: bubble-1 2.5s ease-in-out infinite; }
.animate-bubble-2 { animation: bubble-2 3.5s ease-in-out infinite; }
.animate-bubble-3 { animation: bubble-3 2s ease-in-out infinite; }
.animate-progress-ring { animation: progress-ring 30s linear infinite; }

/* Simplified Floating Bubbles - Subtle & Clean */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(4, 120, 87, 0.08), rgba(16, 185, 129, 0.05));
  backdrop-filter: blur(5px);
  animation: float 8s ease-in-out infinite;
  pointer-events: none;
}

.bubble-1 { width: 80px; height: 80px; top: 15%; left: 8%; animation-delay: 0s; }
.bubble-2 { width: 60px; height: 60px; top: 50%; left: 85%; animation-delay: 1.5s; }
.bubble-3 { width: 100px; height: 100px; top: 75%; left: 15%; animation-delay: 3s; }
.bubble-4 { width: 50px; height: 50px; top: 25%; left: 75%; animation-delay: 0.7s; }
.bubble-5 { width: 70px; height: 70px; top: 65%; left: 55%; animation-delay: 2.2s; }
.bubble-6 { width: 55px; height: 55px; top: 35%; left: 25%; animation-delay: 3.5s; }

/* Water Wave Animation */
.water-wave {
  animation: water-wave 2s ease-in-out infinite;
  background: linear-gradient(45deg, 
    rgba(59, 130, 246, 0.3) 0%, 
    rgba(147, 197, 253, 0.5) 50%, 
    rgba(59, 130, 246, 0.3) 100%
  );
}

/* OPTIMIZED Delay Classes - Staggered entrance */
.delay-100 { animation-delay: 0.05s; }
.delay-200 { animation-delay: 0.1s; }
.delay-300 { animation-delay: 0.15s; }
.delay-400 { animation-delay: 0.2s; }
.delay-500 { animation-delay: 0.25s; }
.delay-1000 { animation-delay: 0.5s; }
.delay-1500 { animation-delay: 0.75s; }
.delay-2000 { animation-delay: 1s; }

/* Demo Step Hover Effects */
.demo-step {
  transition: all 0.3s ease;
}

.demo-step:hover {
  transform: translateY(-5px);
}

.demo-step:hover .bg-white\/80 {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--krittika-saffron);
}

/* STAGGERED TESTIMONIAL CARDS - Visual Interest */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  align-items: start;
}

@media (min-width: 768px) {
  .testimonial-grid > *:nth-child(3n+1) {
    transform: translateY(0);
  }

  .testimonial-grid > *:nth-child(3n+2) {
    transform: translateY(2rem);
  }

  .testimonial-grid > *:nth-child(3n+3) {
    transform: translateY(1rem);
  }
}

/* Testimonial Card Hover - Lift to same level */
.testimonial-grid > *:hover {
  transform: translateY(-0.5rem) !important;
  z-index: 10;
}

/* 3D TILT EFFECT - Product Card */
.product-card-3d {
  perspective: 1500px;
  transform-style: preserve-3d;
}

.product-card-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* 3D Layers for depth */
.product-card-layer {
  transform: translateZ(30px);
}

.product-card-shadow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%) translateZ(-50px);
  width: 80%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3) 0%, transparent 70%);
  filter: blur(15px);
  transition: all 0.1s ease-out;
  will-change: transform, opacity;
}

.product-card-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(110, 231, 183, 0.3) 0%,
    transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 2rem;
  pointer-events: none;
}

.product-card-3d:hover .product-card-glow {
  opacity: 1;
}

/* Badge 3D float */
.badge-3d {
  transform: translateZ(60px);
  transition: transform 0.1s ease-out;
}

/* PARALLAX DEPTH LAYERS */
.parallax-container {
  position: relative;
  overflow: hidden;
}

.parallax-layer {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Simplified parallax - no 3D perspective issues */

/* 3D Perspective Effects */
.perspective-1000 {
  perspective: 1000px;
}

/* Glass Morphism Effects */
.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Card Improvements - Better Spacing */
.bg-white\/80.backdrop-blur-lg.rounded-3xl,
.bg-white\/70.backdrop-blur-sm.rounded-2xl,
.bg-white.rounded-lg {
  padding: 2rem;
}

@media (min-width: 768px) {
  .bg-white\/80.backdrop-blur-lg.rounded-3xl,
  .bg-white\/70.backdrop-blur-sm.rounded-2xl {
    padding: 2.5rem;
  }
}

/* Image Enhancements - Softer Borders & Shadows */
img.rounded-xl, img.rounded-2xl, picture img {
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

img.rounded-xl:hover, img.rounded-2xl:hover, picture img:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

/* ADVANCED GRAPHICS - SVG Pattern Overlays */
.pattern-dots {
  background-image: radial-gradient(circle, rgba(4, 120, 87, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}

.pattern-grid {
  background-image:
    linear-gradient(rgba(4, 120, 87, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 120, 87, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Glassmorphism Cards - Advanced */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Neumorphism Effect */
.neuro-button {
  background: linear-gradient(145deg, #f0fdf4, #dcfce7);
  box-shadow: 8px 8px 16px #d1fae5, -8px -8px 16px #ffffff;
}

.neuro-button:active {
  box-shadow: inset 8px 8px 16px #d1fae5, inset -8px -8px 16px #ffffff;
}

/* Enhanced Hover States - IMPROVED PROMINENCE */
button:hover, .hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* CTA Button Enhancements */
.hero-cta-primary {
  position: relative;
  box-shadow: 0 10px 30px rgba(4, 120, 87, 0.25);
}

.hero-cta-primary:hover {
  box-shadow: 0 20px 50px rgba(4, 120, 87, 0.4);
}

/* SIMPLIFIED - Clean Particle Canvas */
#particles-canvas {
  background: transparent;
}

/* Removed blob shapes - they were causing visual issues */

/* Performance & Accessibility Optimizations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-float, .animate-pulse-slow, .animate-spin-slow,
  .animate-bubble-1, .animate-bubble-2, .animate-bubble-3,
  .animate-gradient, .animate-progress-ring { 
    animation: none !important; 
  }
}

/* GPU acceleration optimizations - use sparingly */
.product-card-inner,
.hero-cta-primary,
.hero-cta-secondary {
  will-change: transform;
}

/* Remove will-change after animations complete */
.animate-slideUp.animation-complete,
.animate-fadeInUp.animation-complete,
.animate-fadeInDown.animation-complete,
.animate-fadeInRight.animation-complete {
  will-change: auto;
}

/* Mobile optimizations - ENHANCED SPACING */
@media (max-width:768px){
.grid-cols-1.lg\\:grid-cols-2{gap:2rem}
.aspect-square{aspect-ratio:1/1}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}

/* Mobile Spacing Reductions */
section.py-28 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
section.py-24 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
section.py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Mobile Typography Adjustments */
h1.text-5xl, h1.text-7xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
h2.text-4xl, h2.text-5xl, h2.text-6xl { font-size: 1.875rem !important; line-height: 1.3 !important; }
.text-xl { font-size: 1rem !important; }

/* Mobile CTA Button Adjustments */
.hero-cta-primary, .hero-cta-secondary {
  padding: 1rem 1.5rem !important;
  font-size: 1rem !important;
}

/* Mobile Animation Adjustments */
.animate-float { animation-duration: 4s; }
.bubble { animation-duration: 6s; }

/* Reduced particle count and smaller bubbles on mobile */
.bubble { width: 30px !important; height: 30px !important; }
.bubble-3 { width: 40px !important; height: 40px !important; }

/* Disable 3D effects on mobile for performance */
.product-card-3d {
  perspective: none !important;
}

.product-card-inner {
  transform: none !important;
}

.product-card-glow,
.product-card-shadow {
  display: none !important;
}

/* Simplify parallax on mobile */
.parallax-layer {
  transform: none !important;
}

/* Keep bubbles subtle on mobile */
.bubble {
  opacity: 0.5 !important;
  width: 40px !important;
  height: 40px !important;
}
}