/* =========================================

   RESET

========================================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    background: #050608;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    overflow-x: hidden;

}





/* =========================================

   NAVBAR

========================================= */



nav {

    height: 115px;

    width: 100%;



    display: flex;

    align-items: center;

    justify-content: space-between;



    padding: 0 7%;



    background: rgba(4, 5, 7, 0.96);

    border-bottom: 1px solid rgba(224, 170, 66, 0.45);



    position: relative;

    z-index: 100;

}



.logo {

    font-size: 31px;

    font-weight: 900;

    letter-spacing: 4px;



    color: #e5ae47;



    text-shadow:

        0 0 18px rgba(229, 174, 71, 0.25);

}



.logo span {

    color: #ffffff;

}



.menu {

    display: flex;

    align-items: center;

    gap: 42px;

    position: relative;

    z-index: 9999;

}



.menu a {

    color: #eeeeee;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition: 0.25s;

    position: relative;

    z-index: 10000;

    pointer-events: auto;

    cursor: pointer;

}



.menu a:hover {

    color: #e5ae47;

    text-shadow: 0 0 12px rgba(229,174,71,0.6);

}





/* =========================================

   HERO

========================================= */



.hero {

    position: relative;



    width: 100%;

    height: 670px;

    min-height: 670px;



    display: flex;

    align-items: center;

    justify-content: center;



    overflow: hidden;



    background-image:

        linear-gradient(

            to bottom,

            rgba(3,5,7,0.02) 0%,

            rgba(3,5,7,0.00) 55%,

            rgba(3,5,7,0.30) 78%,

            #050608 100%

        ),

        url('images/valdoria-hero.png');



    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

}



.hero::before {

    content: "";



    position: absolute;

    inset: 0;



    background:

        radial-gradient(

            ellipse at center,

            rgba(0,0,0,0.12) 0%,

            rgba(0,0,0,0.05) 32%,

            rgba(0,0,0,0.00) 58%

        );



    pointer-events: none;

    z-index: 1;

}



.hero::after {

    content: "";



    position: absolute;



    width: 700px;

    height: 500px;



    left: 50%;

    top: 50%;



    transform: translate(-50%, -50%);



    background:

        radial-gradient(

            ellipse,

            rgba(207,145,47,0.12) 0%,

            rgba(207,145,47,0.04) 35%,

            transparent 70%

        );



    pointer-events: none;

    z-index: 2;

}





/* =========================================

   HERO CONTENT

========================================= */



.hero-content {

    position: relative;



    z-index: 10;



    width: 650px;

    max-width: 90%;



    text-align: center;

    margin: 0 auto;

}



.hero-small {

    color: #dca643;



    font-size: 13px;

    font-weight: 600;



    letter-spacing: 7px;



    margin-bottom: 16px;



    text-shadow:

        0 0 15px rgba(220,166,67,0.45);

}



.hero h1 {

    color: #e5ae47;



    font-size: 76px;

    line-height: 0.95;



    font-weight: 900;



    letter-spacing: 8px;



    margin-bottom: 12px;



    text-shadow:

        0 3px 0 #67420d,

        0 0 25px rgba(229,174,71,0.38);

}



.hero h2 {

    color: #ffffff;



    font-size: 20px;

    font-weight: 800;



    letter-spacing: 9px;



    margin-bottom: 26px;



    text-shadow:

        0 2px 8px #000000;

}



.hero p {

    color: #d0d0d0;



    font-size: 15px;

    line-height: 1.7;



    max-width: 620px;



    margin: 0 auto 30px auto;



    text-shadow:

        0 2px 6px #000000;

}





/* =========================================

   BUTTONS

========================================= */



.buttons {

    display: flex;



    justify-content: center;

    align-items: center;



    gap: 12px;



    flex-wrap: wrap;

}



.btn {

    display: inline-flex;



    align-items: center;

    justify-content: center;



    min-width: 145px;



    padding: 15px 20px;



    border: 1px solid #c58a27;



    background:

        linear-gradient(

            180deg,

            #c38a2c,

            #9e6718

        );



    color: #ffffff;



    text-decoration: none;



    font-size: 13px;

    font-weight: 800;



    transition: 0.25s;



    box-shadow:

        0 4px 15px rgba(0,0,0,0.35);

}



.btn:hover {

    transform: translateY(-2px);



    background:

        linear-gradient(

            180deg,

            #e0aa42,

            #b4761c

        );



    box-shadow:

        0 0 22px rgba(209,151,47,0.35);

}



.btn-dark {

    background: rgba(5,7,10,0.86);

    border: 1px solid #9e6b1c;

}



.btn-dark:hover {

    background: rgba(28,20,10,0.95);

}





/* =========================================

   STATUS

========================================= */



.status-area {

    position: relative;



    z-index: 20;



    background: #050608;



    padding: 0 20px 55px 20px;

}



.status-grid {

    width: 930px;

    max-width: 100%;



    margin: 0 auto;



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 12px;

}



.status-card {

    height: 115px;



    background:

        linear-gradient(

            180deg,

            #0d1116,

            #090c10

        );



    border: 1px solid #293039;



    display: flex;



    flex-direction: column;



    align-items: center;

    justify-content: center;



    box-shadow:

        0 10px 30px rgba(0,0,0,0.22);

}



.status-card small {

    color: #9fa9b4;



    font-size: 10px;



    letter-spacing: 2px;



    font-weight: 700;



    margin-bottom: 9px;

}



.status-card strong {

    font-size: 20px;

}



.red {

    color: #ff5050;

}



.green {

    color: #42df7a;

}



.white {

    color: #ffffff;

}





/* =========================================

   DISCORD CARD

========================================= */



.discord-card {

    text-decoration: none;

    cursor: pointer;



    transition:

        transform 0.25s,

        border-color 0.25s,

        box-shadow 0.25s;

}



.discord-card:hover {

    transform: translateY(-4px);



    border-color: #e5ae47;



    box-shadow:

        0 0 25px rgba(229,174,71,0.18);

}





/* =========================================

   ABOUT

========================================= */



.about {

    position: relative;



    padding: 90px 20px;



    text-align: center;



    background:

        radial-gradient(

            circle at center,

            #15100a 0%,

            #080a0d 45%,

            #050608 80%

        );



    border-top: 1px solid #1e242a;

}



.about h2 {

    color: #e5ae47;



    font-size: 34px;



    letter-spacing: 4px;



    margin-bottom: 20px;

}



.about p {

    color: #aeb4ba;



    max-width: 750px;



    margin: auto;



    line-height: 1.8;

}





/* =========================================

   FOOTER

========================================= */



footer {

    padding: 30px 20px;



    text-align: center;



    background: #030405;



    border-top: 1px solid #171b20;



    color: #747b83;



    font-size: 13px;

}





/* =========================================

   MOBILE

========================================= */



@media (max-width: 900px) {



    nav {

        height: auto;



        padding: 22px 25px;



        flex-direction: column;



        gap: 20px;

    }



    .menu {

        gap: 18px;



        flex-wrap: wrap;



        justify-content: center;

    }



    .hero {

        height: 650px;

        min-height: 650px;



        background-position: center center;

    }



    .hero h1 {

        font-size: 54px;

    }



    .hero h2 {

        font-size: 15px;



        letter-spacing: 5px;

    }



    .status-grid {

        grid-template-columns: 1fr;

    }

}





@media (max-width: 550px) {



    .logo {

        font-size: 25px;

    }



    .menu a {

        font-size: 12px;

    }



    .hero {

        height: 620px;

        min-height: 620px;

    }



    .hero h1 {

        font-size: 42px;

        letter-spacing: 4px;

    }



    .hero-small {

        font-size: 10px;

        letter-spacing: 4px;

    }



    .hero h2 {

        font-size: 13px;

        letter-spacing: 4px;

    }



    .hero p {

        font-size: 13px;

    }



    .buttons {

        flex-direction: column;

    }



    .btn {

        width: 220px;

    }

}




nav{border-bottom-color:#a22b3c}.logo,.hero-small,.hero h1,.menu a:hover,.about h2{color:#fff}.logo span,.hero h1 span{color:#ef3650}.hero h1{text-shadow:0 4px 15px #25040c}.btn{background:linear-gradient(135deg,#b61330,#e43a53);border-color:#f9697d;color:white}.btn:hover{background:#ee4960}.btn-dark{background:#13090bd9;border-color:#db91a0}.hero{background-image:url('images/valdoria-hero.png')}.hero-content{background:radial-gradient(ellipse,#18060a77,transparent 75%)}.hero p{color:#fff}.status-card{border-color:#7a2739;background:#1d0b10}.status-card .red,.status-card .green{color:#f78196}footer{border-top:1px solid #541524}.register-box,.login-box,.content-box{border-color:#782438}.register-box h1,.login-box h1{color:#fff}button{background:#c01f3b;border-color:#fa6c82}button:hover{background:#e33d56}input:focus{border-color:#f78196}.message{border-color:#782438;color:#f4c2cb;background:#230a12}.back,.info a{color:#fa92a5}a:focus-visible,button:focus-visible{outline:2px solid #fa92a5;outline-offset:4px}.hero-content{pointer-events:auto}@media(max-width:720px){nav{height:auto;min-height:90px;flex-wrap:wrap;padding:15px 5%;gap:15px}.menu{gap:16px;flex-wrap:wrap}.menu a{font-size:11px}.hero{height:650px;min-height:650px;background-position:center top}.hero h1{font-size:48px;letter-spacing:3px}.hero p{font-size:13px;max-width:90%;margin-left:auto;margin-right:auto}.buttons{flex-wrap:wrap;gap:10px}.btn{padding:14px 17px;font-size:11px}.status-grid{grid-template-columns:1fr}.logo{font-size:24px}}

.page{max-width:1000px;margin:auto;padding:60px 24px;min-height:55vh}.panel{padding:35px;border:1px solid #70273a;background:#1b0a11dd;margin:20px 0}.panel h1{font-size:32px;margin-bottom:20px}.panel p,.panel li{line-height:1.9;color:#e4cbd1}.panel ul{margin:20px}.panel .btn{display:inline-block;margin-top:20px}.back{display:inline-block;margin-top:24px}