*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:system-ui;
background:#060a12;
color:white;
overflow-x:hidden;
}

/* grid background */

.bg-grid{
position:fixed;
width:100%;
height:100%;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size:40px 40px;
z-index:-5;
}

/* neural canvas */

#neural{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-4;
}

#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-3;
}

/* glowing orbs */

.glow{
position:fixed;
width:600px;
height:600px;
filter:blur(180px);
opacity:.6;
animation:float 14s ease-in-out infinite;
}

.glow1{
background:#00ff9d;
top:-200px;
right:-200px;
}

.glow2{
background:#4c6fff;
bottom:-200px;
left:-200px;
}

.glow3{
background:#7b4dff;
top:40%;
left:40%;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-80px)}
100%{transform:translateY(0)}
}

/* mouse light */

.mouse-light{
position:fixed;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(0,255,157,0.18),transparent 60%);
pointer-events:none;
mix-blend-mode:screen;
z-index:-2;
}

/* navbar */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:26px 8%;
backdrop-filter:blur(10px);
}

.logo{
font-size:22px;
font-weight:600;
}

/* buttons */

.btn{
padding:10px 20px;
border-radius:12px;
text-decoration:none;
transition:.3s;
}

.primary{
background:linear-gradient(135deg,#00ff9d,#00d9ff);
color:black;
font-weight:600;
}

.primary:hover{
transform:translateY(-3px);
box-shadow:0 12px 40px rgba(0,255,157,0.35);
}

.glass{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.15);
backdrop-filter:blur(14px);
color:white;
}

.big{
font-size:18px;
padding:14px 28px;
}

/* hero */

.hero{
padding:140px 20px;
display:flex;
justify-content:center;
text-align:center;
}

.hero-glass{
max-width:800px;
background:linear-gradient(
145deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);
border:1px solid rgba(255,255,255,0.15);
backdrop-filter:blur(24px);
padding:70px;
border-radius:28px;
box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

.hero h1{
font-size:56px;
margin-bottom:20px;
}

.hero span{
background:linear-gradient(90deg,#00ff9d,#00d9ff,#7b4dff);
-webkit-background-clip:text;
color:transparent;
}

.hero p{
color:#9aa4b2;
font-size:18px;
margin-bottom:40px;
}

.hero-actions{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

/* demo */

.demo{
padding:120px 20px;
text-align:center;
}

.chat-demo{
max-width:720px;
margin:auto;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
backdrop-filter:blur(18px);
padding:40px;
border-radius:24px;
}

.msg{
margin:15px 0;
padding:16px;
border-radius:12px;
}

.user{
background:#1b2432;
}

.ai{
background:#111827;
}

pre{
background:#0d1117;
padding:15px;
border-radius:10px;
overflow:auto;
}

/* models */

.models{
padding:100px 8%;
text-align:center;
}

.models h2{
font-size:34px;
margin-bottom:60px;
}

.models-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
}

/* cards */

.card{
background:linear-gradient(
145deg,
rgba(255,255,255,0.08),
rgba(255,255,255,0.02)
);
border:1px solid rgba(255,255,255,0.15);
border-radius:22px;
padding:40px 30px;
backdrop-filter:blur(18px);
transition:all .35s ease;
position:relative;
overflow:hidden;
}

.card:hover{
transform:translateY(-10px) scale(1.03);
border-color:#00ff9d;
box-shadow:
0 20px 60px rgba(0,255,157,0.25),
0 0 40px rgba(0,255,157,0.15);
}

.icon{
font-size:28px;
margin-bottom:15px;
}

.card p{
color:#a5adbb;
}

/* features */

.features{
padding:110px 8%;
text-align:center;
}

.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
}

.feature-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
padding:35px;
border-radius:20px;
transition:.35s;
}

.feature-card:hover{
transform:translateY(-10px);
box-shadow:0 20px 60px rgba(0,255,157,0.2);
}

/* use cases */

.usecases{
padding:110px 8%;
text-align:center;
}

.use-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
}

.use-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
padding:35px;
border-radius:18px;
font-size:18px;
transition:.35s;
}

.use-card:hover{
transform:translateY(-8px);
border-color:#00ff9d;
}

/* thinking */

.thinking{
padding:100px 20px;
display:flex;
justify-content:center;
}

.thinking-box{
max-width:700px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.12);
backdrop-filter:blur(18px);
padding:60px;
border-radius:26px;
text-align:center;
}

/* faq */

.faq{
padding:120px 20px;
text-align:center;
}

.faq-box{
max-width:700px;
margin:auto;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
backdrop-filter:blur(18px);
padding:50px;
border-radius:24px;
}

.faq-item{
margin-bottom:25px;
}

.faq-item p{
color:#9aa4b2;
}

/* cta */

.cta{
padding:110px 20px;
text-align:center;
}

.cta h2{
font-size:36px;
margin-bottom:40px;
}

/* footer */

footer{
padding:60px 8%;
border-top:1px solid rgba(255,255,255,0.08);
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
}

footer a{
display:block;
margin-top:10px;
color:#aaa;
text-decoration:none;
}

/* reveal */

.reveal{
opacity:0;
transform:translateY(40px);
transition:all .9s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}
/* canvas */

#neural,#particles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-3;

}

/* demo */

.demo{

padding:100px 8%;
text-align:center;

}

.chat-demo{

max-width:700px;
margin:auto;

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.12);

border-radius:18px;

padding:30px;

backdrop-filter:blur(16px);

}

.msg{

padding:14px 16px;
border-radius:12px;
margin-bottom:16px;
max-width:85%;

}

.msg.user{

background:#1e293b;
margin-left:auto;

}

.msg.ai{

background:#111827;

}

pre{

background:#0d1117;
padding:18px;
border-radius:10px;
overflow:auto;

}

/* features */

.features{

padding:100px 8%;
text-align:center;

}

.features-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:26px;

}

.feature-card{

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

padding:30px;

border-radius:18px;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

border-color:#00ff9d;

}

/* usecases */

.usecases{

padding:100px 8%;
text-align:center;

}

.use-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:26px;

}

.use-card{

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

border-radius:18px;

padding:28px;

transition:.35s;

}

.use-card:hover{

transform:translateY(-6px);

border-color:#00ff9d;

}

/* faq */

.faq{

padding:100px 8%;
text-align:center;

}

.faq-box{

max-width:700px;
margin:auto;

}

.faq-item{

background:rgba(255,255,255,0.05);

border:1px solid rgba(255,255,255,0.1);

padding:20px;

border-radius:14px;

margin-bottom:14px;

}

/* footer */

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

}

footer a{

display:block;
margin-top:10px;
color:#aaa;
text-decoration:none;

}

/* 3D hover */

.tilt{

transform-style:preserve-3d;
transition:transform .2s;

}