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

body{
font-family:'Inter',sans-serif;
background:#050507;
color:white;
overflow-x:hidden;
}

/* NAV */

.nav{
position:fixed;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 6%;
z-index:999;
backdrop-filter:blur(10px);
}

.logo{
font-weight:800;
letter-spacing:4px;
font-size:18px;
}

.nav-btn{
padding:10px 18px;
border-radius:12px;
border:1px solid rgba(255,255,255,.15);
background:transparent;
color:white;
cursor:pointer;
}

/* HERO */

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
position:relative;
overflow:hidden;
}

/* ORBS */

.orb{
position:absolute;
width:450px;
height:450px;
border-radius:50%;
filter:blur(140px);
opacity:.55;
animation:float 16s infinite ease-in-out;
}

.orb1{
background:#6a5cff;
top:-120px;
left:-100px;
}

.orb2{
background:#00d4ff;
bottom:-150px;
right:-120px;
animation-delay:5s;
}

.orb3{
background:#b06cff;
top:40%;
left:60%;
animation-delay:9s;
}

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

/* TEXT */

.hero h1{
font-size:clamp(48px,9vw,120px);
line-height:.9;
font-weight:800;
background:linear-gradient(135deg,#fff,#8f9bff);
-webkit-background-clip:text;
color:transparent;
}

.eyebrow{
letter-spacing:3px;
text-transform:uppercase;
color:#7c82ff;
margin-bottom:20px;
font-size:12px;
}

.sub{
margin-top:28px;
font-size:clamp(16px,2vw,22px);
color:#aab0ff;
line-height:1.6;
}

/* CTA */

.cta{
margin-top:40px;
padding:18px 36px;
font-size:18px;
font-weight:700;
border-radius:16px;
border:none;
cursor:pointer;
color:white;

background:linear-gradient(135deg,#6a5cff,#b06cff,#00d4ff);

box-shadow:
0 0 40px rgba(122,92,255,.6),
inset 0 0 20px rgba(255,255,255,.2);

transition:.35s;
}

.cta:hover{
transform:scale(1.06);
box-shadow:0 0 80px rgba(122,92,255,.9);
}

.big{
font-size:22px;
padding:22px 44px;
}

.micro{
margin-top:12px;
color:#7a80ff;
font-size:13px;
}

/* SOCIAL PROOF */

.proof{
text-align:center;
padding:28px 10px;
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
color:#9aa0ff;
}

.proof span{
color:white;
font-weight:700;
}

/* CARDS */

.cards{
display:flex;
justify-content:center;
gap:28px;
padding:80px 6%;
flex-wrap:wrap;
}

.card{
width:280px;
padding:32px;
border-radius:20px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(20px);
text-align:center;
}

.card h3{
margin-bottom:18px;
color:#cfd3ff;
}

.blur{
filter:blur(8px);
opacity:.7;
font-size:26px;
}

/* FINAL */

.final{
text-align:center;
padding:120px 20px;
background:linear-gradient(180deg,#050507,#0c0c18);
}

.final h2{
font-size:clamp(28px,5vw,52px);
line-height:1.2;
margin-bottom:40px;
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
color:#6b70c7;
border-top:1px solid rgba(255,255,255,.05);
}

/* MOBILE OPTIMIZATION */

@media(max-width:768px){

.nav{
padding:16px 5%;
}

.hero{
padding-top:140px;
}

.orb{
width:280px;
height:280px;
filter:blur(100px);
}

.sub{
br{display:none;}
}

.cards{
padding:60px 20px;
}

.card{
width:100%;
max-width:420px;
}

}