:root{
--glass:rgba(255,255,255,.10);
--border:rgba(255,255,255,.18);
--text:#fff;
}

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

html,body{height:100%}

body{
background:#000;
font-family:Oxanium,sans-serif;
color:#fff;
}

.bg{
position:fixed;
inset:0;
background:center/cover no-repeat;
transition:opacity 1.5s;
animation:zoom 10s linear forwards;
z-index:-2;
}

.bg::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.65)),
radial-gradient(circle,transparent 20%,rgba(0,0,0,.75));
}

.bg-a{opacity:1}
.bg-b{opacity:0}

@keyframes zoom{
from{transform:scale(1)}
to{transform:scale(1.08)}
}

.hero{
min-height:100dvh;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
}

.container{
width:min(760px,94vw);
text-align:center;
}

.logo img{
width:clamp(120px,18vw,170px);
filter:drop-shadow(0 0 16px rgba(255,255,255,.25));
margin-bottom:18px;
}

h1{
font-family:Orbitron,sans-serif;
font-size:clamp(2.5rem,7vw,5rem);
letter-spacing:.14em;
text-transform:uppercase;
text-shadow:0 0 18px rgba(255,255,255,.25);
}

.tagline{
margin-top:14px;
font-size:clamp(.95rem,2vw,1.3rem);
letter-spacing:.28em;
text-transform:uppercase;
opacity:.9;
}

.servers-title{
margin:42px 0 18px;
font-family:Orbitron,sans-serif;
font-size:.95rem;
letter-spacing:.35em;
text-transform:uppercase;
opacity:.8;
}

.servers{
display:grid;
gap:18px;
}

.server{
display:flex;
align-items:center;
gap:18px;
padding:20px 22px;
border-radius:22px;
background:var(--glass);
backdrop-filter:blur(18px);
border:1px solid var(--border);
text-decoration:none;
color:#fff;
transition:.25s;
}

.server:hover{
transform:translateY(-4px);
border-color:#6fe6ff;
box-shadow:0 10px 40px rgba(0,180,255,.18);
}

.icon{
width:62px;
height:62px;
border-radius:18px;
display:grid;
place-items:center;
background:rgba(255,255,255,.08);
font-size:1.7rem;
flex-shrink:0;
}

.mc .icon{color:#55e26f}
.cs .icon{color:#ffb64c}

.info{
flex:1;
text-align:left;
}

.info strong{
display:block;
font-size:1.35rem;
margin-bottom:6px;
}

.info small{
display:block;
font-size:.95rem;
opacity:.8;
margin-bottom:5px;
}

.status{
font-size:.9rem;
color:#7dff9b;
}

.arrow{
font-size:1.3rem;
opacity:.75;
transition:.25s;
}

.server:hover .arrow{
transform:translateX(8px);
opacity:1;
}

.socials{
display:flex;
justify-content:center;
gap:14px;
list-style:none;
margin-top:38px;
flex-wrap:wrap;
}

.socials a{
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fff;
text-decoration:none;
transition:.25s;
}

.socials a:hover{
transform:translateY(-4px);
border-color:#fff;
}

@media(max-width:600px){
.server{padding:18px}
.info strong{font-size:1.1rem}
.logo img{width:120px}
}