/* Critical Base Styles - Load First */
body{background-color:#fff;color:#202124;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}
h1,h2,h3{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;line-height:1.2}
.font-outfit{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.font-inter{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}

/* Accessibility improvements */
*:focus{outline:2px solid #0056b3;outline-offset:2px}
button:focus,a:focus{outline:2px solid #0056b3;outline-offset:2px}

/* Hero Section Styles */
.hero-section{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-content{position:relative;z-index:10;text-align:center;color:white}

/* Smooth scroll behavior */
html{scroll-behavior:smooth}

/* Responsive hero adjustments */
@media (max-width: 768px) {
    .hero-content h1{font-size:2.5rem}
    .hero-content p{font-size:1.125rem}
}

/* Header Styles - Updated for better accessibility */
.header-primary{background-color:#01458d}

/* Color Palette Classes - Updated with more accessible colors */
.bg-dominant{background-color:#01458d}
.bg-hover{background-color:#013369}
.bg-accent{background-color:#FFC107}
.bg-neutral-white{background-color:#FFFFFF}
.bg-text-body{background-color:#202124}
.bg-text-muted{background-color:#6b7280}

/* Demo/Showcase Styles */
.video-responsive{padding-top:56.25%}
.audio-custom{height:40px;background-color:#e6f0ff}
.wizard-step-active{background-color:#0056b3;color:white}
.wizard-step-inactive{background-color:white;border:2px solid #e5e7eb;color:#9ca3af}
.wizard-progress-line{background-color:#e6f0ff}

/* Performance-optimized Button Styles */
.btn-primary{background-color:#0056b3;color:#fff;transition:background-color .2s ease-in-out,box-shadow .2s ease-in-out,transform .1s ease-in-out;will-change:background-color,box-shadow}
.btn-primary:hover{background-color:#004494;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-1px)}
.btn-secondary{border-color:#0056b3;color:#0056b3;transition:background-color .2s ease-in-out,color .2s ease-in-out;will-change:background-color,color}
.btn-secondary:hover{background-color:#e6f0ff}

/* Optimized Card Styles */
.demo-card{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;will-change:transform,box-shadow}
.demo-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}

/* Utility Classes */
.bg-primary-light{background-color:#e6f0ff}

/* Hardware-accelerated Carousel Styles */
.carousel-container{position:relative;overflow:hidden}
.carousel-slides{display:flex;transition:transform .5s ease-in-out;width:100%;will-change:transform}
.carousel-slide{flex:0 0 100%;width:100%}

/* Improved Language Dropdown Styles */
.language-dropdown{position:relative;display:inline-block}
.language-dropdown-content{display:none;position:absolute;right:0;background-color:#fff;min-width:140px;box-shadow:0 10px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);z-index:1000;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}
.language-dropdown-content a{color:#0056b3;padding:12px 16px;text-decoration:none;display:flex;align-items:center;transition:background-color .2s ease-in-out;will-change:background-color;font-weight:500}
.language-dropdown-content a:hover{background-color:#f3f4f6}
.language-dropdown:hover .language-dropdown-content,.language-dropdown:focus-within .language-dropdown-content{display:block}

/* Improved Blog Dropdown Styles */
.blog-dropdown{position:relative;display:inline-block}
.blog-dropdown-content{display:none;position:absolute;left:0;background-color:#fff;min-width:160px;box-shadow:0 10px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);z-index:1000;border-radius:8px;overflow:hidden;margin-top:4px;border:1px solid #e5e7eb}
.blog-dropdown-content a{color:#374151;padding:12px 16px;text-decoration:none;display:block;transition:background-color .2s ease-in-out;will-change:background-color;font-weight:500}
.blog-dropdown-content a:hover{background-color:#f3f4f6;color:#0056b3}
.blog-dropdown:hover .blog-dropdown-content,.blog-dropdown:focus-within .blog-dropdown-content{display:block}

/* WhatsApp Floating Button - Improved accessibility */
.whatsapp-float{position:fixed;width:60px;height:60px;bottom:25px;right:25px;background-color:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 4px 12px rgba(37,211,102,.3);z-index:1000;transition:all .3s ease;will-change:transform,box-shadow;text-decoration:none}
.whatsapp-float:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(37,211,102,.4)}
.whatsapp-float:focus{outline:2px solid #25d366;outline-offset:4px}
.whatsapp-float svg{display:block}

/* Mobile menu improvements */
.mobile-menu{transition:all .3s ease-in-out}
.mobile-menu.hidden{opacity:0;visibility:hidden}
.mobile-menu:not(.hidden){opacity:1;visibility:visible}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
    html{scroll-behavior:auto}
}