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

body{
font-family:Arial,Helvetica,sans-serif;
background:#020617;
overflow-x:hidden;
color:white;
}

.background{
position:fixed;
width:100%;
height:100%;
overflow:hidden;
z-index:-1;
background:
radial-gradient(circle at center,#0f172a,#020617 70%);
}

.core{
position:absolute;
left:50%;
top:50%;
width:120px;
height:120px;
margin-left:-60px;
margin-top:-60px;
border-radius:50%;
background:
radial-gradient(circle,#00e5ff,#0066ff,#000);
box-shadow:
0 0 40px #00ccff,
0 0 100px #0066ff;
animation:pulse 4s infinite;
}

.orbit{
position:absolute;
left:50%;
top:50%;
border:2px solid rgba(0,200,255,.4);
border-radius:50%;
transform-style:preserve-3d;
}

.orbit1{
width:300px;
height:300px;
margin-left:-150px;
margin-top:-150px;
animation:spin 12s linear infinite;
}

.orbit2{
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
border-color:#00ffff55;
animation:spinReverse 18s linear infinite;
}

.orbit3{
width:700px;
height:700px;
margin-left:-350px;
margin-top:-350px;
border-color:#3366ff55;
animation:spin 28s linear infinite;
}

@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}

@keyframes spinReverse{
from{
transform:rotate(360deg);
}
to{
transform:rotate(0deg);
}
}

@keyframes pulse{
50%{
transform:scale(1.15);
}
}

header{
text-align:center;
padding:70px 20px;
}

header h1{
font-size:64px;
color:#5ce1ff;
text-shadow:0 0 20px cyan;
}

header p{
font-size:22px;
color:#ddd;
margin-top:10px;
}

.glass{
max-width:1000px;
margin:30px auto;
padding:40px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border-radius:20px;
border:1px solid rgba(255,255,255,.15);
}

.glass h2{
color:#55d8ff;
margin-bottom:15px;
}

.glass p{
line-height:1.7;
margin-bottom:20px;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin:30px 0;
}

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

.card:hover{
transform:translateY(-6px);
box-shadow:0 0 25px cyan;
}

pre{
background:#000;
padding:15px;
border-radius:10px;
color:#00ff99;
margin-bottom:25px;
overflow:auto;
}

a{
color:#66e6ff;
text-decoration:none;
}

a:hover{
color:white;
}

footer{
text-align:center;
padding:40px;
opacity:.7;
}