*{box-sizing:border-box}
body{
margin:0;
min-height:100vh;
font-family:Arial,sans-serif;
color:white;
background:
radial-gradient(circle,#16245c,#000);
overflow-x:hidden;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px;
backdrop-filter:blur(15px);
}
.logo{
font-size:55px;
font-weight:900;
background:linear-gradient(90deg,#ff9900,#ff00cc,#00eaff,#00ff88);
-webkit-background-clip:text;
color:transparent;
animation:rainbow 12s infinite linear;
}
.search{
border:1px solid #00eaff;
padding:15px 30px;
border-radius:30px;
box-shadow:0 0 20px #00eaff;
}
.hero{
text-align:center;
padding:80px 20px;
position:relative;
}
.planet{
width:260px;
height:260px;
margin:auto;
border-radius:50%;
background:radial-gradient(circle at 30% 30%,#fff,#00eaff,#4000ff,#000);
box-shadow:0 0 80px #00eaff;
animation:rotate 12s linear infinite;
}
h1{
font-size:clamp(35px,6vw,80px);
text-shadow:0 0 30px #00eaff;
}
button{
padding:15px 40px;
border-radius:40px;
background:#000;
color:#fff;
border:2px solid #ff00cc;
}
.modules{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
padding:40px;
}
.modules div{
padding:35px;
text-align:center;
border-radius:25px;
background:rgba(255,255,255,.08);
border:1px solid #00eaff;
box-shadow:0 0 25px rgba(0,234,255,.4);
transition:.4s;
}
.modules div:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 0 40px #ff00cc;
}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes rainbow{to{filter:hue-rotate(360deg)}}