*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Inter',sans-serif;
color:white;
background:#050816;
overflow-x:hidden;
position:relative;
}

/* Animated Glow */
body::before{
content:"";
position:fixed;
inset:-30%;
background:
radial-gradient(1000px circle at 15% 20%, rgba(124,92,255,0.4), transparent 70%),
radial-gradient(1200px circle at 85% 70%, rgba(75,223,255,0.35), transparent 75%);
filter:blur(120px);
animation:glowMove 18s ease-in-out infinite alternate;
z-index:-2;
}

@keyframes glowMove{
0%{transform:translate(0,0)}
100%{transform:translate(-60px,40px)}
}

/* Floating particles */
body::after{
content:"";
position:fixed;
inset:0;
background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size:60px 60px;
opacity:.04;
z-index:-3;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
position:sticky;
top:20px;
z-index:10;
}

.nav{
background:rgba(255,255,255,0.06);
backdrop-filter:blur(30px);
padding:12px 30px;
border-radius:40px;
display:flex;
gap:30px;
border:1px solid rgba(255,255,255,0.1);
}

.nav a{color:white;text-decoration:none}

.nav-btn{
background:linear-gradient(90deg,#7c5cff,#4bdfff);
padding:8px 18px;
border-radius:20px;
}

.hero{
text-align:center;
padding:140px 20px 80px;
}

.hero h1{
font-size:52px;
margin-bottom:20px;
}

.hero p{opacity:.7;margin-bottom:30px}

.hero-btn{
background:linear-gradient(90deg,#7c5cff,#4bdfff);
padding:14px 30px;
border-radius:30px;
text-decoration:none;
color:white;
}

.section{padding:100px 10%;text-align:center}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
margin-top:50px;
}

.card{
background:rgba(255,255,255,0.05);
padding:40px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
}

.pricing{padding:100px 10%;text-align:center}

.pricing-tabs{
display:flex;
justify-content:center;
gap:20px;
margin:40px 0;
}

.pricing-tabs button{
padding:10px 25px;
border-radius:25px;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.05);
color:white;
cursor:pointer;
}

.pricing-tabs button.active{
background:linear-gradient(90deg,#7c5cff,#4bdfff);
border:none;
}

.pricing-content{display:none}
.pricing-content.active{display:block}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.pricing-card{
background:rgba(255,255,255,0.05);
padding:40px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
position:relative;
}

.pricing-card.popular{
border:1px solid #7c5cff;
}

.badge{
position:absolute;
top:-12px;
right:20px;
background:linear-gradient(90deg,#7c5cff,#4bdfff);
padding:5px 12px;
border-radius:20px;
font-size:12px;
}

.contact{padding:100px 10%}

.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
margin-top:40px;
}

form input,form textarea{
width:100%;
padding:15px;
margin-bottom:15px;
border-radius:10px;
border:none;
background:rgba(255,255,255,0.05);
color:white;
}

form button{
width:100%;
padding:14px;
border:none;
border-radius:30px;
background:linear-gradient(90deg,#7c5cff,#4bdfff);
color:white;
}

.contact-card{
background:rgba(255,255,255,0.05);
padding:40px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
}

.whatsapp{
position:fixed;
bottom:30px;
right:30px;
background:#25D366;
padding:14px 25px;
border-radius:30px;
color:white;
text-decoration:none;
}
