*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:Inter,sans-serif;
background:#080b12;color:#fff;overflow-x:hidden;
}
.nav{
position:fixed;top:0;left:0;width:100%;
display:flex;justify-content:space-between;align-items:center;
padding:18px 6%;
backdrop-filter:blur(16px);
background:rgba(15,18,28,.45);
border-bottom:1px solid rgba(255,255,255,.08);
z-index:1000;
}
.logo img{height:56px}
nav a{color:#fff;text-decoration:none;margin:0 14px}
.hero{
height:100vh;
display:flex;
align-items:center;
padding:0 8%;
position:relative;
background:radial-gradient(circle at top,#1a2033,#07090f 60%);
}
.content{max-width:700px;z-index:2}
h1{
font-family:Manrope,sans-serif;
font-size:clamp(3rem,7vw,5.5rem);
line-height:1.05;
}
h1 span{
background:linear-gradient(90deg,#00c8ff,#ff008c,#ffd400);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
p{margin:24px 0;font-size:1.15rem;color:#d7dbe5}
.btn{
display:inline-block;
padding:15px 30px;
border-radius:14px;
text-decoration:none;
font-weight:700;
color:#fff;
background:linear-gradient(90deg,#00c8ff,#ff008c,#ffd400);
background-size:200% 100%;
animation:grad 6s linear infinite;
margin-right:12px;
box-shadow:0 12px 35px rgba(0,0,0,.35);
}
.secondary{
background:transparent;
border:1px solid rgba(255,255,255,.3)
}
.blob{
position:absolute;
border-radius:50%;
filter:blur(80px);
opacity:.6;
animation:float 8s ease-in-out infinite;
}
.b1{width:300px;height:300px;background:#00c8ff;top:8%;right:10%}
.b2{width:260px;height:260px;background:#ff008c;bottom:10%;right:20%;animation-delay:2s}
@keyframes grad{0%{background-position:0}100%{background-position:200%}}
@keyframes float{50%{transform:translateY(-25px)}}
@media(max-width:900px){
nav{display:none}
.logo img{height:46px}
h1{font-size:3rem}
}