body{

    margin:0;

    font-family:Arial;

    background:
    linear-gradient(rgba(10,25,45,.45),rgba(10,25,45,.45)),
    url("../images/bg.jpg");

    background-repeat:no-repeat;

    background-size:115%;

    background-position:center top;

    background-attachment:fixed;

}

.header{
    display:flex;
    align-items:center;
    height:70px;
    padding:0 30px;
    background:rgba(25,40,60,.88);
    backdrop-filter:blur(10px);

    position:relative;
    z-index:9999;
}

.logo img{

    height:48px;

    display:block;

}

.logo{

    margin-right:40px;

}

.menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.menu a{

    margin-left:0;

    color:white;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    transition:.25s;

}

.menu a:hover{

    color:#6ec6ff;

    text-shadow:0 0 12px #6ec6ff;

}

.hero{
    width:1200px;
    height:420px;
    margin:35px auto;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 20px 50px rgba(0,0,0,.35);

    position:relative;
    z-index:1;
}

.hero img{
    width:100%;
    height:auto;
    display:block;
}



.container{

    width:1200px;

    margin:30px auto;

}

.box{

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

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

    border-radius:18px;

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

    padding:25px;

    color:#000;

    font-weight:600;

}

.btn{
    display:inline-block;
    padding:12px 20px;
    text-align:center;
    background:#3498db;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
    font-size:18px;
    font-weight:bold;
    transition:.2s;
    position:relative;
    z-index:10;
}

.btn:hover{

    background:#2980b9;

    transform:translateY(-2px);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,0,0,.35);

}

.box:hover{

    transform:translateY(-8px);

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

}

input{

width:320px;

padding:10px;

font-size:16px;

border:1px solid #ccc;

border-radius:5px;

}

button{

border:0;

cursor:pointer;

font-size:16px;

}

.grid{

    display:grid;

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

    gap:20px;

    margin-top:25px;

}

.box h2{

    text-align:center;

    font-size:26px;

    margin:0 0 18px 0;

    padding-bottom:12px;

    border-bottom:2px solid #ececec;

}

.box{
    min-height:320px;
    padding:22px;
}

.box{

    font-size:18px;

    line-height:2;

}

.news{
    list-style:none;
    padding:0;
    margin:0;
}

.news li{
    margin-bottom:10px;
}

.status-row{

    display:flex;

    align-items:center;

    padding:8px 0;

    border-bottom:1px solid #f1f1f1;

}

.quick-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:20px;

}

.quick-buttons .btn{
    width:100%;
    box-sizing:border-box;
    margin:0;
}

.box-news{
    position:relative;
    overflow:hidden;
}

.box-news::after{
    content:"";
    position:absolute;
    right:-0px;
    bottom:-40px;

    width:300px;
    height:400px;

    background:url("../images/news.png") no-repeat;

    background-size:contain;

    opacity:0.40;
   
    pointer-events:none;
}

.box-server{
    position:relative;
    overflow:hidden;
}

.box-server::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-40px;

    width:300px;
    height:400px;

    background:url("../images/kinght.png") no-repeat;

    background-size:contain;

    opacity:0.40;

   pointer-events:none;
}

.box-feature{
    position:relative;
    overflow:hidden;
}

.box-feature::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-40px;

    width:300px;
    height:400px;

    background:url("../images/assassin.png") no-repeat;

    background-size:contain;

    opacity:0.40;

    pointer-events:none;
}

.box-quick{
    position:relative;
    overflow:hidden;
}

.box-quick::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-40px;

    width:300px;
    height:400px;

    background:url("../images/hunter.png") no-repeat;

    background-size:contain;

    opacity:0.40;

    pointer-events:none;
}

.btn,
.btn:link,
.btn:visited{

    color:#fff; !important;

    text-decoration:none;

}

.download-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:50px;

}

.download-buttons .btn{
    width:220px;
    box-sizing:border-box;
}

.login-box{

    width:500px;

    margin:0 auto;

}

.member-box{

    width:650px;

    margin:0 auto;

}

.member-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin-top:25px;

}

.member-buttons .btn{

    width:100%;

    box-sizing:border-box;

}