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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Roboto,sans-serif;

    background:#1d130d;

    color:#f7ead4;

    overflow-x:hidden;

}

#backgroundOverlay{

    position:fixed;

    inset:0;

    background:
        linear-gradient(rgba(18,10,5,.82),rgba(18,10,5,.92)),
        url("assets/bg.png");

    background-size:cover;

    background-position:center;

    z-index:-2;

}

header{

    min-height:95vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:40px;

}

.logo{

    width:220px;

    margin-bottom:25px;

    filter:drop-shadow(0 0 18px rgba(255,170,70,.45));

}

.logoArea h1{

    font-family:Oswald,sans-serif;

    font-size:70px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#ffcf73;

    text-shadow:

        0 0 18px rgba(255,170,0,.35),

        4px 4px 0 #432716;

}

.logoArea p{

    margin-top:25px;

    font-size:22px;

    color:#ffe7c3;

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

    line-height:1.7;

}

.heroButtons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    margin-top:-70px;

    margin-bottom:80px;

}

.mainButton{

    text-decoration:none;

    padding:20px 50px;

    border-radius:8px;

    background:

        linear-gradient(#d38a28,#a15b17);

    color:white;

    font-size:22px;

    font-weight:bold;

    letter-spacing:1px;

    border:2px solid #ffcc72;

    transition:.25s;

    box-shadow:

        0 10px 25px rgba(0,0,0,.5),

        0 0 20px rgba(255,160,50,.25);

}

.mainButton:hover{

    transform:translateY(-4px);

    box-shadow:

        0 16px 35px rgba(0,0,0,.7),

        0 0 35px rgba(255,175,40,.55);

}

.serverBox{

    width:90%;

    max-width:950px;

    margin:auto;

    padding:40px;

    border-radius:14px;

    background:rgba(55,33,20,.90);

    border:2px solid #8d5b32;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.serverBox h2{

    font-family:Oswald;

    text-align:center;

    margin-bottom:35px;

    font-size:42px;

    color:#ffc86b;

}

.infoRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 0;

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

}

.infoRow span{

    font-size:22px;

}

.infoRow strong{

    color:#ffd88b;

    font-size:22px;

}

.infoRow input{

    background:#24160f;

    color:white;

    border:none;

    padding:12px;

    width:260px;

    border-radius:6px;

    font-size:18px;

}

.infoRow button{

    margin-left:10px;

    padding:12px 18px;

    cursor:pointer;

    border:none;

    border-radius:6px;

    background:#d18a25;

    color:white;

    transition:.2s;

}

.infoRow button:hover{

    background:#ecad44;

}

.features{

    width:92%;

    max-width:1350px;

    margin:90px auto;

    display:grid;

    gap:30px;

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

}

.card{

    background:rgba(70,44,27,.88);

    border:2px solid #82522e;

    border-radius:12px;

    padding:35px;

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.5);

}

.card h3{

    font-family:Oswald;

    color:#ffc76b;

    margin-bottom:18px;

    font-size:34px;

}

.card p{

    line-height:1.8;

    color:#ead9c0;

}

.status{

    width:90%;

    max-width:900px;

    margin:auto;

    text-align:center;

}

.status h2{

    font-family:Oswald;

    font-size:42px;

    color:#ffc86f;

    margin-bottom:30px;

}

#statusBox{

    background:#362113;

    border:2px solid #9f6538;

    padding:35px;

    border-radius:12px;

    font-size:22px;

}

.join{

    margin:120px auto;

    width:85%;

    text-align:center;

}

.join h2{

    font-family:Oswald;

    font-size:58px;

    color:#ffd06d;

    margin-bottom:20px;

}

.join p{

    font-size:22px;

    line-height:1.8;

    max-width:900px;

    margin:auto;

}

footer{

    margin-top:100px;

    background:#120a06;

    padding:30px;

    text-align:center;

    color:#cda875;

    border-top:2px solid #6d4222;

}

@media(max-width:850px){

.logoArea h1{

    font-size:42px;

}

.logoArea p{

    font-size:18px;

}

.heroButtons{

    flex-direction:column;

}

.infoRow{

    flex-direction:column;

    gap:20px;

}

}
.toast{

    position:fixed;

    bottom:35px;

    right:35px;

    background:#d38d2f;

    color:#fff;

    padding:16px 28px;

    border-radius:8px;

    font-weight:bold;

    opacity:0;

    transform:translateY(20px);

    transition:.35s;

    z-index:999999;

    pointer-events:none;

    box-shadow:0 12px 30px rgba(0,0,0,.45);

}

.toastVisible{

    opacity:1;

    transform:translateY(0);

}