.hero{
height:100vh;
min-height:800px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(
180deg,
rgba(5,8,20,.15),
#050814
),
url("/img/fondofinalPA.png");
background-size:cover;
background-position:center;
}

.hero:after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:280px;
background:linear-gradient(
transparent,
#050814
);
}

.hero-content{
position:relative;
z-index:2;
max-width:1000px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
padding:20px;
}

.hero-title{
font-family:"Orbitron",sans-serif;
font-size:120px;
font-weight:1000;
letter-spacing:-4px;
background:linear-gradient(
90deg,
#ffffff,
#64dcff,
#9b7bff
);
-webkit-background-clip:text;
color:transparent;
}

.hero-description{
margin-top:25px;
padding:25px 35px;
max-width:750px;
border-radius:24px;
position:relative;
background:linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.04)
);
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.18),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(25px);
color:#e4ebff;
font-size:20px;
font-weight:500;
line-height:1.6;
}

.hero-description:before,
.hero-description:after{
content:"";
position:absolute;
top:25px;
bottom:25px;
width:2px;
background:linear-gradient(
180deg,
transparent,
#64dcff,
#52ffe0,
transparent
);
}

.hero-description:before{
left:0;
}

.hero-description:after{
right:0;
}

.hero-server-boxes{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
margin-top:25px;
}

.ip-box{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:330px;
padding:18px 25px;
border-radius:22px;
cursor:pointer;
background:linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
);
border:1pxpx solid rgba(255,255,255,.2);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 50px rgba(0,0,0,.4);
transition:.35s;
}

.ip-box:hover{
transform:translateY(-5px);
border-color:#64dcff;
}

.ip-content{
display:flex;
flex-direction:column;
align-items:flex-start;
}

.ip-content span{
font-family:"Orbitron",sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:2px;
color:#aeb8d0;
}

.ip-content strong{
margin-top:5px;
font-size:22px;
font-weight:900;
color:white;
letter-spacing:1px;
font-family:"Orbitron",sans-serif;
}

.copy-button{
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:rgba(255,255,255,.1);
color:#b9c8e8;
transition:.3s;
}

.copy-success{
position:absolute;
left:0;
bottom:100%;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(
135deg,
#52ffe0,
#64dcff
);
color:#06101d;
font-family:"Orbitron",sans-serif;
font-size:15px;
font-weight:900;
letter-spacing:2px;
transition:.5s cubic-bezier(.68,-.55,.27,1.55);
}

.ip-box.copied .copy-success{
bottom:0;
}

.players-box{
height:80px;
min-width:240px;
padding:18px 22px;
display:flex;
align-items:center;
gap:12px;
border-radius:22px;
background:linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
);
border:1pxpx solid rgba(255,255,255,.2);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 50px rgba(0,0,0,.35);
transition:.35s;
}

.players-box:hover{
transform:translateY(-5px);
border-color:#64dcff;
}

.status-circle{
width:14px;
height:14px;
border-radius:50%;
background:#777;
}

.status-circle.online{
background:#52ffe0;
box-shadow:
0 0 15px #52ffe0,
0 0 30px rgba(82,255,224,.7);
}

.players-info{
display:flex;
align-items:center;
text-align:left;
}

.players-info strong{
font-family:"Inter",sans-serif;
font-size:17px;
font-weight:500;
color:#e4ebff;
}

.players-info strong span{
font-family:"Inter",sans-serif;
font-size:20px;
font-weight:700;
color:#64dcff;
}

.player-count{
font-family:"Orbitron",sans-serif;
font-size:11px;
color:#9ba8c7;
}

@media(max-width:1000px){

.hero-title{
font-size:70px;
}

.hero-description{
font-size:15px;
padding:22px;
}

.hero-server-boxes{
flex-direction:column;
}

}

@media(max-width:600px){

.hero-title{
font-size:45px;
}

.ip-box{
width:100%;
}

.players-box{
width:100%;
min-width:0;
}

.ip-content strong{
font-size:20px;
}

}