@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --accent: #a78bfa;
  --dark-950: #0a0a10;
  --dark-900: #111119;
  --dark-800: #1a1a26;
  --gradient-1: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-2: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif; background: var(--dark-950); color: #e5e7eb; overflow-x: hidden; }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--dark-950); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

.nav-link { position: relative; font-weight: 500; transition: color .3s; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%) scaleX(0); width:100%; height:2px; background:var(--gradient-1); transition:transform .3s; border-radius:2px; }
.nav-link:hover::after { transform:translateX(-50%) scaleX(1); }
.navbar-scrolled { background: rgba(10,10,16,0.96) !important; backdrop-filter: blur(20px); box-shadow: 0 4px 30px rgba(0,0,0,0.6); }

.btn-primary { display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 2rem; font-weight:600; border-radius:50px; background:var(--gradient-1); color:#fff; transition:all .3s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 40px rgba(124,58,237,0.4); }
.btn-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.875rem 2rem; font-weight:600; border-radius:50px; border:2px solid rgba(255,255,255,0.25); color:#fff; transition:all .3s; }
.btn-outline:hover { border-color:#fff; background:rgba(255,255,255,0.1); transform:translateY(-2px); }

.card-hover { transition:all .4s cubic-bezier(.25,.8,.25,1); }
.card-hover:hover { transform:translateY(-8px); box-shadow:0 20px 60px rgba(124,58,237,0.2); }
.feature-icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:16px; font-size:26px; background:var(--gradient-1); margin:0 auto 1.5rem; transition:transform .4s, box-shadow .4s; }
.card-hover:hover .feature-icon { transform:scale(1.1); box-shadow:0 10px 40px rgba(124,58,237,0.5); }

.stat-number { font-size:2.75rem; font-weight:900; background:var(--gradient-1); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; }
.stat-card { transition:all .3s; }
.stat-card:hover { border-color: var(--primary); box-shadow:0 0 40px rgba(124,58,237,0.1); }

.testimonial-card { background:var(--dark-800); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:2rem; position:relative; transition:all .4s; }
.testimonial-card:hover { transform:translateY(-6px); box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.testimonial-card::before { content:'\201C'; position:absolute; top:8px; left:18px; font-size:4.5rem; font-weight:900; line-height:1; color:var(--primary); opacity:0.12; font-family:serif; }

.faq-item { border:1px solid rgba(255,255,255,0.06); border-radius:12px; overflow:hidden; margin-bottom:12px; background:var(--dark-800); transition:all .3s; }
.faq-item.active { border-color:var(--primary); box-shadow:0 0 30px rgba(124,58,237,0.12); }
.faq-question { width:100%; padding:1.25rem 1.5rem; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:1.05rem; text-align:left; cursor:pointer; background:none; border:none; color:inherit; transition:color .3s; }
.faq-question:hover { color:#a78bfa; }
.faq-icon { font-size:1.25rem; transition:transform .4s; flex-shrink:0; margin-left:1rem; }
.faq-item.active .faq-icon { transform:rotate(180deg); color:var(--primary); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s, padding .4s; }
.faq-item.active .faq-answer { max-height:300px; }
.faq-answer-inner { padding:0 1.5rem 1.25rem; color:#94a3b8; line-height:1.7; }

.cta-section { background:var(--gradient-1); position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; width:350px; height:350px; border-radius:50%; background:rgba(255,255,255,0.05); top:-80px; right:-80px; }
.cta-section::after { content:''; position:absolute; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,0.05); bottom:-60px; left:-60px; }

.footer-link { color:#94a3b8; text-decoration:none; transition:color .3s; }
.footer-link:hover { color:#a78bfa; }

.mobile-menu { position:fixed; top:0; right:-100%; width:300px; height:100vh; background:var(--dark-900); z-index:1000; padding:5rem 2rem 2rem; transition:right .4s cubic-bezier(.4,0,.2,1); border-left:1px solid rgba(255,255,255,0.06); }
.mobile-menu.open { right:0; }
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:999; opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-overlay.open { opacity:1; pointer-events:auto; }

.animate-on-scroll { opacity:0; transform:translateY(30px); transition:opacity .7s, transform .7s; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

@media (max-width:768px) {
  .stat-number { font-size:2.25rem; }
}