:root{
  --bg:#0f0f17;--card:#16161f;--text:#d0d0e0;--accent1:#64f4ac;--accent2:#b28cff;--glow:rgba(100,244,172,.2);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Satoshi',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:'PP Mori',sans-serif;font-weight:700}
.container{max-width:1600px;margin:0 auto;padding:0 5%}

header{position:fixed;top:0;left:0;right:0;padding:1.5rem 0;background:rgba(15,15,23,.95);backdrop-filter:blur(20px);border-bottom:1px solid rgba(100,244,172,.15);z-index:1000}
.nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:2rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-links a{color:var(--text);text-decoration:none;margin-left:3rem;font-weight:500;transition:all .4s}
.nav-links a:hover,.nav-link.active{color:var(--accent1)}
.burger{display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001}
.burger span{width:30px;height:3px;background:var(--accent1);border-radius:3px;transition:.4s}
.burger.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}

.hero{position:relative;height:100vh;overflow:hidden}
#particles-js{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;opacity:.4}
.hero-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 30%,var(--bg) 90%)}
.hero-content{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px}
.hero h1{font-size:clamp(5rem,12vw,11rem);background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.5rem}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;color:white;background:var(--bg);clip:rect(0,900px,0,0);animation:glitch-anim 3s infinite linear alternate-reverse}
.glitch::before{left:-2px;animation-delay:2s}
.glitch::after{left:2px;animation-delay:2.5s}
@keyframes glitch-anim{0%{clip:rect(20px,9999px,60px,0)}100%{clip:rect(80px,9999px,120px,0)}}

.btn{display:inline-block;padding:1.2rem 3rem;border:2px solid var(--accent1);color:white;font-weight:600;text-transform:uppercase;letter-spacing:2px;border-radius:60px;position:relative;overflow:hidden;transform:skew(-8deg);transition:all .6s}
.btn span{display:block;transform:skew(8deg)}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));transition:.7s;z-index:-1}
.btn:hover{transform:skew(-8deg) scale(1.1);box-shadow:0 0 70px var(--glow)}
.btn:hover::before{left:0}
.btn.large{padding:1.5rem 4rem;font-size:1.2rem}

.reveal{opacity:0;transform:translateY(100px)}
.reveal.active{opacity:1;transform:translateY(0);transition:all 1.4s cubic-bezier(.22,1,.36,1)}

.section{padding:160px 0}
.alt{background:var(--card)}
.section-title{font-size:5rem;text-align:center;margin-bottom:6rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.intro-text{font-size:1.2rem;text-align:center;max-width:900px;margin:0 auto 4rem;opacity:.9}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:center;margin-bottom:12rem}
.feature:nth-child(even){direction:rtl}
.feature-text{direction:ltr}
.feature-img{border-radius:32px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.feature-img img{width:100%;transition:transform 1s}
.feature:hover .feature-img img{transform:scale(1.12)}

.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:3rem}
.why-card{background:rgba(100,244,172,.06);border:1px solid rgba(100,244,172,.15);border-radius:28px;padding:3.5rem 2.5rem;text-align:center;transition:all .6s;backdrop-filter:blur(12px)}
.why-card:hover{transform:translateY(-20px);background:rgba(100,244,172,.12);border-color:var(--accent1);box-shadow:0 30px 80px rgba(100,244,172,.25)}

.contact-section{background:linear-gradient(135deg,rgba(100,244,172,.07),rgba(178,140,255,.05));padding:180px 0}
.contact-card{max-width:800px;margin:0 auto;text-align:center;background:rgba(22,22,31,.6);backdrop-filter:blur(20px);border:1px solid rgba(100,244,172,.2);border-radius:32px;padding:4rem 3rem;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.contact-card h2{font-size:3.8rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.5rem}
.contact-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;margin:4rem 0;text-align:left}
.contact-item{display:flex;gap:1.5rem;align-items:flex-start}
.contact-item .icon{width:60px;height:60px;background:rgba(100,244,172,.15);border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-item .icon i{font-size:1.8rem;color:var(--accent1)}
.contact-item strong{display:block;margin-bottom:.5rem;color:var(--accent1)}
.contact-item a{color:var(--text);text-decoration:none;transition:.3s}
.contact-item a:hover{color:var(--accent1)}

footer{background:#0a0a10;padding:120px 5% 60px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;max-width:1400px;margin:0 auto;align-items:start}
.footer-left h3{font-size:2.8rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2rem}
.footer-links a{display:block;color:var(--text);text-decoration:none;margin-bottom:1.2rem;opacity:.8;transition:.4s}
.footer-links a:hover{opacity:1;color:var(--accent1);padding-left:12px}
.footer-right{text-align:right;opacity:.9}
.footer-right a{color:var(--accent1)}
.footer-bottom{text-align:center;margin-top:8rem;opacity:.5;font-size:.9rem}

.nav-link{position:relative;transition:color .4s}
.nav-link::after{content:'';position:absolute;bottom:-10px;left:50%;width:0;height:3px;background:linear-gradient(90deg,var(--accent1),var(--accent2));border-radius:3px;transition:all .6s cubic-bezier(.165,.84,.44,1);transform:translateX(-50%)}
.nav-link.active::after,.nav-link:hover::after{width:100%}
.nav-link.active,.nav-link:hover{color:var(--accent1)}

@media (max-width:968px){
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:80%;max-width:340px;background:rgba(15,15,23,.98);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;gap:3rem;transition:right .5s cubic-bezier(.77,0,.18,1);z-index:1000}
  .nav-links.active{right:0}
  .nav-links a{font-size:2rem;margin:0}
  .burger{display:flex}
  .feature,.feature:nth-child(even){grid-template-columns:1fr;text-align:center;direction:ltr !important}
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-right{margin-top:4rem;text-align:center}
  .section-title{font-size:3.5rem}
}