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

html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:#020204;
color:white;
overflow-x:hidden;
}

/* BACKGROUND */

.animated-bg{
position:fixed;
inset:0;
z-index:-1;
background:#020204;
overflow:hidden;
}

.grid{
position:absolute;
inset:0;

background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:40px 40px;

animation:gridMove 18s linear infinite;
}

@keyframes gridMove{
0%{
transform:translateY(0);
}
100%{
transform:translateY(40px);
}
}

.orb{
position:absolute;
width:400px;
height:400px;
border-radius:50%;
filter:blur(90px);
opacity:.45;
}

.blue{
background:#36d9ff;
top:10%;
left:5%;

animation:floatBlue 8s ease-in-out infinite alternate;
}

.purple{
background:#7a43ff;
right:5%;
top:20%;

animation:floatPurple 10s ease-in-out infinite alternate;
}

@keyframes floatBlue{
from{
transform:translate(-20px,20px);
}
to{
transform:translate(80px,-50px);
}
}

@keyframes floatPurple{
from{
transform:translate(30px,-20px);
}
to{
transform:translate(-80px,60px);
}
}

/* GLASS */

.glass{
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 10px 50px rgba(0,0,0,.4);
}

/* NAVBAR */

.navbar{
width:92%;
margin:20px auto;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 24px;

border-radius:22px;
}

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

.logo h1{
font-size:34px;
font-weight:700;
}

.planet{
width:40px;
height:40px;
border-radius:50%;
background:white;

box-shadow:
0 0 25px white;

animation:pulse 3s infinite;
}

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

.nav-buttons{
display:flex;
gap:18px;
}

.nav-buttons button{
background:none;
border:none;
color:white;
cursor:pointer;
font-size:16px;
}

.nav-buttons button:hover{
color:#36d9ff;
}

.menu-btn{
display:none;
}

/* MOBILE MENU */

.mobile-menu{
display:none;
position:fixed;

top:90px;
left:20px;
right:20px;

padding:25px;
border-radius:20px;
z-index:100;
}

.mobile-menu button{
display:block;

width:100%;
margin-bottom:20px;

background:none;
border:none;

color:white;
font-size:24px;
text-align:left;
}

/* HERO */

.hero{
min-height:90vh;

display:grid;
grid-template-columns:1fr 1fr;

align-items:center;
gap:40px;

width:92%;
margin:auto;
}

.badge{
color:#36d9ff;
font-weight:700;
letter-spacing:2px;
}

.hero h1{
font-size:82px;
line-height:.95;
margin-top:12px;
}

.hero h1 span{
background:linear-gradient(
90deg,
white,
#36d9ff,
#7a43ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
margin-top:20px;
font-size:20px;
line-height:1.6;
opacity:.8;
}

.hero-buttons{
display:flex;
gap:15px;
margin-top:25px;
}

.primary-btn{
background:linear-gradient(
135deg,
#36d9ff,
#7a43ff
);

border:none;
color:white;

padding:15px 25px;

border-radius:14px;
cursor:pointer;
}

.secondary-btn{
background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.1);

color:white;

padding:15px 25px;

border-radius:14px;
cursor:pointer;
}

.hero-right{
padding:20px;
border-radius:25px;
}

.window-bar{
display:flex;
gap:8px;
margin-bottom:15px;
}

.window-bar span{
width:12px;
height:12px;
border-radius:50%;
}

.window-bar span:nth-child(1){
background:#ff5f57;
}

.window-bar span:nth-child(2){
background:#ffbd2e;
}

.window-bar span:nth-child(3){
background:#28c840;
}

.hero-right pre{
background:#040406;

padding:20px;

border-radius:20px;

min-height:250px;

color:#d8faff;
}

/* PERFORMANCE */

.performance{
width:92%;
margin:50px auto;

padding:40px;

border-radius:25px;
}

.performance h2{
font-size:42px;
}

.lightning{
font-size:60px;
text-align:center;

margin:40px 0;
}

.stat-card{
display:grid;

grid-template-columns:
50px
1fr
auto;

gap:15px;

padding:18px;

margin-top:15px;

background:rgba(255,255,255,.05);

border-radius:16px;
}

.stat-card strong{
font-size:18px;
}

/* EXECUTOR */

#executor{
width:92%;
margin:70px auto;
}

.center-title{
text-align:center;
font-size:42px;
margin-bottom:25px;
}

.executor{
border-radius:25px;
overflow:hidden;
}

.executor-top{
display:flex;
justify-content:space-between;
align-items:center;

padding:15px;
}

.actions{
display:flex;
gap:10px;
}

.actions button{
background:rgba(255,255,255,.08);

border:none;
color:white;

padding:10px 15px;
border-radius:10px;

cursor:pointer;
}

.run-btn{
background:
linear-gradient(
135deg,
#36d9ff,
#7a43ff
)!important;
}

.tabs{
display:flex;
gap:8px;

padding:12px;
background:#050507;
}

.tab{
background:#111118;
border:none;

color:white;

padding:10px 14px;
border-radius:10px;
}

.active{
color:#36d9ff;
}

#editor{
width:100%;
height:420px;

background:#030305;

border:none;
outline:none;

padding:20px;

color:white;

font-family:Consolas,monospace;
font-size:15px;
}

.editor-buttons{
padding:12px;
display:flex;
gap:10px;
}

.editor-buttons button{
padding:10px 14px;
border:none;

background:#111118;
color:white;

border-radius:10px;
}

/* USERS */

.users{
width:92%;
margin:70px auto;

padding:40px;

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;

border-radius:25px;
}

.users h2{
font-size:46px;
}

.users p{
font-size:20px;
margin-top:15px;
opacity:.8;
}

.globe{
width:450px;
height:450px;

margin:auto;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.25),
transparent
);

box-shadow:
0 0 60px white inset,
0 0 40px white;

animation:rotateGlobe 12s linear infinite;
}

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

/* FOOTER */

footer{
width:92%;
margin:auto;

padding:50px 0;

border-top:
1px solid rgba(255,255,255,.08);
}

.footer-links{
display:flex;
gap:20px;

margin-top:20px;
}

.footer-links button{
background:none;
border:none;

color:white;
font-size:18px;
cursor:pointer;
}

.footer-links button:hover{
color:#36d9ff;
}

.copyright{
margin-top:30px;
opacity:.6;
}

/* TOAST */

#toast{
position:fixed;

left:50%;
bottom:25px;

transform:
translateX(-50%)
translateY(100px);

background:#111118;

padding:14px 20px;

border-radius:12px;

opacity:0;

transition:.3s;
}

#toast.show{
opacity:1;

transform:
translateX(-50%)
translateY(0);
}

/* MOBILE */

@media(max-width:900px){

.hero{
grid-template-columns:1fr;
}

.users{
grid-template-columns:1fr;
}

.globe{
width:280px;
height:280px;
margin-top:30px;
}

.nav-buttons{
display:none;
}

.menu-btn{
display:block;

background:none;
border:none;

color:white;
font-size:30px;
}

.mobile-menu.active{
display:block;
}

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

}