/* Non-Critical CSS - Below the fold styles */
/* Loaded asynchronously to prevent render blocking */

/* Floating elements */
.floating-element{position:absolute;opacity:.1;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}

/* Particle effect background */
.hero-particles{position:absolute;width:100%;height:100%;overflow:hidden;z-index:1}
.particle{position:absolute;background:rgba(255,255,255,.1);border-radius:50%;animation:particleFloat 15s infinite linear}
@keyframes particleFloat{0%{transform:translateY(100vh) translateX(0) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) translateX(100px) rotate(360deg);opacity:0}}

/* Trust bar icons */
.trust-icon{transition:transform .3s ease}
.trust-icon:hover{transform:translateY(-5px)}

/* Service cards hover effect */
.service-card{transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.service-card-content{display:flex;flex-direction:column;flex:1}
.service-card-button{margin-top:auto}
.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.15)}

/* How It Works Animation */
.how-it-works-step{opacity:0;transform:translateY(30px);transition:opacity .6s ease-out,transform .6s ease-out}
.how-it-works-step.visible{opacity:1;transform:translateY(0)}
.how-it-works-arrow{opacity:0;transform:translateX(-20px);transition:opacity .6s ease-out .3s,transform .6s ease-out .3s}
.how-it-works-arrow.visible{opacity:1;transform:translateX(0)}

/* Why Choose section hover effects */
.why-choose-card{transition:all .3s ease}
.why-choose-card:hover{transform:scale(1.05)}
.why-choose-card:hover h3,.why-choose-card:hover p{color:#fff}
.why-choose-card img{transition:filter .3s ease}
.why-choose-card:hover img{filter:brightness(0) invert(1)}

/* Stats counter animation */
.stat-number{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#fff 0%,#f0f0f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Custom animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate-fade-in-up{animation:fadeInUp .8s ease-out}

/* Modern badge/pill styles */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);padding:8px 20px;border-radius:50px;font-size:.875rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* Primary CTA Button - ORDER NOW */
.btn-order-now{background-color:#E31E24;color:#fff;font-weight:700;padding:.625rem 1.5rem;border-radius:.5rem;transition:all .3s ease;box-shadow:0 4px 6px rgba(227,30,36,.3);position:relative;z-index:1}
.btn-order-now:hover{background-color:#C11A1F;color:#fff;box-shadow:0 6px 12px rgba(227,30,36,.4);transform:translateY(-2px)}
.btn-order-now:active{transform:translateY(0);box-shadow:0 2px 4px rgba(227,30,36,.3)}

/* FAQ Accordion styles */
.faq-item{border-bottom:1px solid #e5e7eb}
.faq-item:last-child{border-bottom:none}
.faq-question{cursor:pointer;transition:all .3s ease}
.faq-question:hover{color:#E31E24}
.faq-answer{max-height:0;overflow:hidden;padding:0 1.5rem;transition:max-height .3s ease-out,padding-top .3s ease-out,padding-bottom .3s ease-out}
.faq-item.active .faq-answer{max-height:500px;padding-top:1rem;padding-bottom:1.5rem}
.faq-item:not(.active) .faq-answer{max-height:0!important;padding-top:0!important;padding-bottom:0!important}
.faq-icon{transition:transform .3s ease}
.faq-item.active .faq-icon{transform:rotate(180deg)}