/* BANKAI Solution - Neon Futuristic Theme */
html { scroll-behavior: smooth; }
body { font-family: 'Space Grotesk','Manrope','Segoe UI', sans-serif; background:#000000; }
.font-orbitron { font-family: 'Space Grotesk','Manrope','Segoe UI', sans-serif; }
[class*="font-\\['Orbitron'\\]"] { font-family: 'Space Grotesk','Manrope','Segoe UI', sans-serif !important; }
@keyframes pulse-glow { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.75;transform:scale(1.04);} }
@keyframes float-soft { 0%{transform:translateY(0);} 50%{transform:translateY(-6px);} 100%{transform:translateY(0);} }
.animate-fade-in { animation: fade-in .8s ease-out both; }
@keyframes fade-in { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
.glow-border { box-shadow:0 0 25px rgba(175,230,7,.25); }
.glass { background:rgba(14,14,14,.7); backdrop-filter:blur(12px); border:1px solid rgba(175,230,7,.25); }
::selection { background:rgba(175,230,7,.25); color:#AFE607; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0E0E0E; }
::-webkit-scrollbar-thumb { background:rgba(175,230,7,.35); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:rgba(175,230,7,.55); }
img[loading="lazy"] { opacity:0; transition:opacity .4s ease; }
img.loaded { opacity:1; }
#mobileMenu { max-height:0; overflow:hidden; transition:max-height .3s ease; }
#mobileMenu.active { max-height:520px; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; }
.faq-item.active .faq-answer { max-height:600px; padding-bottom:1.25rem; }
.faq-item.active .faq-icon { transform:rotate(180deg); }
@media (max-width:640px){ h1{font-size:2rem;} h2{font-size:1.5rem;} }
@media print{ .fixed,.sticky{display:none!important;} }
@media (max-width:1024px) {
  .cta-section { min-height:auto!important; padding-top:3rem!important; padding-bottom:0!important; }
  .cta-section .animate-on-scroll-delay { opacity:0.4!important; z-index:0!important; }
  .cta-section .animate-on-scroll { z-index:20!important; position:relative!important; }
  .cta-section a[href*="contact"] { z-index:30!important; position:relative!important; }
}
.animate-on-scroll { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease-out,transform 0.8s ease-out; }
.animate-on-scroll-delay { opacity:0; transform:translateX(40px); transition:opacity 1s ease-out,transform 1s ease-out; transition-delay:0.2s; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }
.animate-on-scroll-delay.visible { opacity:1; transform:translateX(0); }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-60px);} to{opacity:1;transform:translateX(0);} }
@keyframes slideInRight { from{opacity:0;transform:translateX(60px);} to{opacity:1;transform:translateX(0);} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.9);} to{opacity:1;transform:scale(1);} }
.slide-in-left { animation:slideInLeft 0.8s ease-out forwards; }
.slide-in-right { animation:slideInRight 0.8s ease-out forwards; }
.fade-in-up { animation:fadeInUp 0.8s ease-out forwards; }
.scale-in { animation:scaleIn 0.8s ease-out forwards; }
.hero-section { opacity:0; }
.hero-section.loaded { opacity:1; transition:opacity 0.6s ease-in; }
.hero-badge { opacity:0; transform:translateY(20px) scale(0.9); animation:heroBadgeIn 0.8s ease-out 0.3s forwards; }
.hero-line-1 { opacity:0; transform:translateX(-50px); animation:heroTextSlide 1s ease-out 0.5s forwards; }
.hero-line-2 { opacity:0; transform:translateX(-50px); animation:heroTextSlide 1s ease-out 0.7s forwards; }
.hero-content p { opacity:0; transform:translateY(20px); animation:fadeInUp 0.8s ease-out 0.9s forwards; }
.hero-content .flex { opacity:0; transform:translateY(20px); animation:fadeInUp 0.8s ease-out 1.1s forwards; }
@keyframes heroBadgeIn { to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes heroTextSlide { to{opacity:1;transform:translateX(0);} }
@media (max-width:768px) {
  .group { text-align:center !important; }
  .group > div { justify-content:center !important; }
  .group h3, .group p { text-align:center !important; }
}