*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#070A18;
color:white;
overflow-x:hidden;
}

/* ===== BACKGROUND ===== */

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%, #00D4FF33, transparent 40%),
radial-gradient(circle at 80% 30%, #7B61FF33, transparent 40%),
radial-gradient(circle at 40% 80%, #FF4FD833, transparent 40%);
z-index:-2;
animation:moveBg 12s infinite alternate;
}

@keyframes moveBg{
from{transform:scale(1);}
to{transform:scale(1.2) rotate(10deg);}
}

/* ===== BLOBS ===== */

.blob{
position:fixed;
filter:blur(120px);
z-index:-1;
opacity:.6;
border-radius:50%;
animation:float 10s infinite alternate;
}

.b1{width:250px;height:250px;background:#00D4FF;top:80px;left:-80px;}
.b2{width:300px;height:300px;background:#7B61FF;top:300px;right:-120px;}
.b3{width:220px;height:220px;background:#FF4FD8;bottom:-80px;left:40%;}

@keyframes float{
to{transform:translateY(-40px) translateX(30px);}
}

/* ===== TOP HEADER ===== */

.top-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 8%;
}

/* ===== LOGO (LEFT) ===== */

.logo-bar{
display:flex;
align-items:center;
gap:15px;
}

.logo-big{
width:90px;
height:90px;
object-fit:cover;
border-radius:18px;
border:3px solid #7B61FF;
box-shadow:0 0 40px rgba(123,97,255,.8);
transition:0.3s ease;
}

.logo-big:hover{
transform:scale(1.08);
box-shadow:0 0 70px rgba(0,212,255,.8);
}

.logo-bar h1{
font-size:26px;
background:linear-gradient(90deg,#00D4FF,#7B61FF,#FF4FD8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ===== NAVBAR (RIGHT) ===== */

.navbar ul{
display:flex;
gap:30px;
list-style:none;
}

.navbar a{
color:white;
text-decoration:none;
opacity:.8;
transition:.3s;
}

.navbar a:hover{
opacity:1;
color:#00D4FF;
}

/* ===== HERO ===== */

.hero{
min-height:90vh;
display:flex;
justify-content:space-between;
align-items:center;
padding:80px 8%;
}

.hero-text{
max-width:600px;
}

.hero h1{
font-size:64px;
line-height:1.1;
background:linear-gradient(90deg,#00D4FF,#7B61FF,#FF4FD8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
margin:20px 0;
font-size:18px;
color:#cfcfcf;
}

/* ===== BUTTON ===== */

.btn{
display:inline-block;
padding:16px 40px;
border-radius:50px;
background:linear-gradient(90deg,#00D4FF,#7B61FF);
color:white;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.btn:hover{
transform:translateY(-6px);
}

/* ===== SECTIONS ===== */

section{
padding:100px 8%;
}

section h2{
text-align:center;
font-size:42px;
margin-bottom:50px;
background:linear-gradient(90deg,#00D4FF,#7B61FF);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ===== GRID ===== */

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

.card{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
padding:35px;
border-radius:20px;
text-align:center;
transition:.3s;
}

.card:hover{
transform:translateY(-10px);
background:rgba(0,212,255,.1);
}

/* ===== ABOUT ===== */

.about{
display:flex;
flex-wrap:wrap;
gap:50px;
justify-content:space-between;
}

.stats{
display:flex;
gap:20px;
}

.stats div{
padding:25px;
border-radius:20px;
background:rgba(255,255,255,.06);
text-align:center;
}

/* ===== FEATURES ===== */

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

.feature-grid div{
padding:25px;
border-radius:15px;
background:rgba(255,255,255,.06);
transition:.3s;
}

.feature-grid div:hover{
transform:scale(1.05);
}

/* ===== FORM ===== */

form{
max-width:600px;
margin:auto;
display:flex;
flex-direction:column;
gap:15px;
}

input,textarea{
padding:15px;
border-radius:12px;
border:none;
background:rgba(255,255,255,.08);
color:white;
}

button{
padding:15px;
border:none;
border-radius:50px;
background:linear-gradient(90deg,#00D4FF,#7B61FF);
color:white;
cursor:pointer;
transition:.3s;
}

button:hover{
transform:scale(1.05);
}

/* ===== FOOTER ===== */

footer{
text-align:center;
padding:60px;
background:rgba(255,255,255,.03);
border-top:1px solid rgba(255,255,255,.1);
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px){

.top-header{
flex-direction:column;
gap:20px;
text-align:center;
}

.hero{
flex-direction:column;
text-align:center;
gap:40px;
}

.hero h1{
font-size:42px;
}
}