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

html,body{
    width:100%;
    height:100%;
}

body{

    font-family:'Inter',sans-serif;
    color:white;
    background:#0d0f12;

}

.hero{

    position:relative;

    width:100%;
    min-height:100vh;

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

    background:url("../images/hero.jpg") center center;
    background-size:cover;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(10,10,10,.72),
        rgba(10,10,10,.88)
    );

}

.container{

    position:relative;

    z-index:2;

    width:min(900px,92%);

    text-align:center;

}

h1{

    font-family:'Orbitron',sans-serif;

    font-size:clamp(48px,8vw,90px);

    letter-spacing:8px;

    color:#ff7b00;

    text-shadow:0 0 25px rgba(255,123,0,.4);

}

.subtitle{

    margin-top:15px;

    color:#ddd;

    font-size:22px;

    margin-bottom:60px;

}

.statusgrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:50px;

}

.statuscard{

    backdrop-filter:blur(12px);

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

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

    border-radius:18px;

    padding:28px;

    transition:.25s;

}

.statuscard:hover{

    transform:translateY(-6px);

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

}

.label{

    display:block;

    font-size:13px;

    letter-spacing:2px;

    color:#999;

    margin-bottom:15px;

}

.value{

    font-size:28px;

    font-weight:700;

}

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    text-decoration:none;

    border:none;

    cursor:pointer;

    padding:18px 34px;

    border-radius:14px;

    font-size:17px;

    font-weight:700;

    transition:.25s;

    background:#ff7b00;

    color:white;

    box-shadow:0 10px 35px rgba(255,123,0,.35);

}

.btn:hover{

    transform:translateY(-4px);

    background:#ff8e1a;

}

.secondary{

    background:#2b2f37;

    box-shadow:none;

}

.secondary:hover{

    background:#3a404a;

}

.serverip{

    margin-top:30px;

    font-size:22px;

    font-weight:600;

    color:#d0d0d0;

    letter-spacing:1px;

}

@media(max-width:700px){

    h1{

        letter-spacing:4px;

    }

    .subtitle{

        font-size:18px;

    }

    .value{

        font-size:22px;

    }

    .btn{

        width:100%;

    }

}

.hero{overflow:hidden;}

.hero::before{
content:"";
position:absolute;
inset:0;
background:inherit;
background-size:cover;
background-position:center;
animation:kenburns 40s linear infinite;
z-index:-1;
}

.hero-title{
opacity:0;
transform:translateY(40px);
filter:blur(10px);
transition:opacity .8s ease,transform .8s ease,filter .8s ease;
}

.hero-title.show{
opacity:1;
transform:translateY(0);
filter:blur(0);
animation:glow 3s ease-in-out infinite alternate;
}

@keyframes glow{
from{text-shadow:0 0 15px rgba(255,123,0,.35),0 0 25px rgba(255,123,0,.25);}
to{text-shadow:0 0 25px rgba(255,123,0,.75),0 0 45px rgba(255,123,0,.45);}
}

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