*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI, Arial;
}

body{
background:#0a0b10;
color:white;
overflow-x:hidden;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
}

/* HEADER */

.header{
position:fixed;
top:0;
width:100%;
height:75px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 25px;
background:rgba(10,10,15,.6);
backdrop-filter:blur(18px);
z-index:1000;
}

.logo-area{
display:flex;
align-items:center;
gap:12px;
}

.logo-img{
width:42px;
height:42px;
object-fit:contain;
}

.logo-text{
font-weight:700;
color:white;
line-height:1.1;
}

.logo-text span{
display:block;
font-weight:700;
font-size:inherit;
opacity:1;
}

.milenskiy{
color:#eb5234;
}

/* BURGER */

.burger{
font-size:30px;
cursor:pointer;
transition:.3s;
}

.burger:hover{
transform:scale(1.1);
}

/* MENU */

.menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

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

padding-top:120px;

background:rgba(5,6,10,.85);
backdrop-filter:blur(12px);

z-index:9999;

/* АНИМАЦИЯ */
transform:translateY(-100%);
transition:transform .4s ease;
}

/* само меню */
.menu-box{
position:relative;

width:320px;           /* фиксированная ширина */
max-width:90%;         /* чтобы на телефоне не ломалось */

padding:30px 35px;     /* уменьшаем внутренние отступы */
border-radius:18px;

background:rgba(20,22,30,.85);
backdrop-filter:blur(20px);

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

box-shadow:
0 0 30px rgba(16,16,24,.2);
}

.menu-box::before{
content:"";
position:absolute;
inset:-1px;
border-radius:22px;

background:linear-gradient(
45deg,
transparent,
#686b69,
#101018,
transparent
);

opacity:.35;
z-index:-1;
filter:blur(12px);
}

.menu-box a{
display:block;
margin:18px 0;
font-size:22px;
text-decoration:none;
color:white;
font-weight:600;
transition:.35s;
position:relative;
}

.menu-box a:hover{
color:#eb5234;
transform:translateY(-2px);
text-shadow:0 0 15px rgba(235,83,52,.6);
}

@keyframes menuAppear{
from{
opacity:0;
transform:translateY(40px) scale(.95);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes fadeBg{
from{opacity:0;}
to{opacity:1;}
}

@keyframes fade{
from{opacity:0;transform:translateY(40px)}
to{opacity:1}
}

/* HERO */

.hero{
position:relative;
height:520px;
overflow:hidden;
}

.hero-bg{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(.6);
position:relative;
z-index:1;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:10;
text-align:center;
width:100%;
}

.hero h1{
font-size:38px;
margin-bottom:10px;
}

.hero p{
opacity:.8;
}

@keyframes appear{
from{opacity:0;transform:translate(-50%,-40%)}
to{opacity:1;transform:translate(-50%,-50%)}
}

/* SECTIONS */

.section{
max-width:1100px;
margin:auto;
padding:80px 20px;
text-align:center;
}

.server-card{
position:relative;
background:rgba(20,20,25,.75);
backdrop-filter:blur(18px);

padding:28px;
border-radius:22px;
width:280px;
margin:30px auto;

border:1px solid rgba(235,83,52,.25);

transition:.4s;

/* красное свечение */
box-shadow:
0 0 25px rgba(235,83,52,.15);
}

.server-card::before{
content:"";
position:absolute;
inset:-2px;
border-radius:22px;

background:linear-gradient(
45deg,
transparent,
#101018,
#eb5234,
#101018,
transparent
);

opacity:.25;
filter:blur(18px);
z-index:-1;
}

.server-card:hover{
transform:translateY(-6px) scale(1.02);

box-shadow:
0 0 45px rgba(235,83,52,.45);
}

.server-card h3{
font-size:26px;
letter-spacing:2px;
margin-bottom:8px;
}

.server-card span{
opacity:.8;
font-size:18px;
}

.total-online{
opacity:.7;
}

/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:35px;
}

.grid img{
width:100%;
height:220px;
object-fit:cover;
border-radius:18px;
transition:.4s;
}

.grid img:hover{
transform:scale(1.05);
}

/* DOWNLOAD */

.download{
text-align:center;
padding:60px;
}

.download-btn{
padding:20px 60px;
border-radius:18px;
background:linear-gradient(45deg,#eb5234,#eb5234);
color:white;
text-decoration:none;
font-size:20px;
font-weight:bold;
box-shadow:0 0 40px rgba(235,83,52,.6);
animation:pulse 2.5s infinite;
transition:.3s;
}

.download-btn:hover{
transform:scale(1.08);
}

@keyframes pulse{
0%{box-shadow:0 0 20px rgba(235,83,52,.5)}
50%{box-shadow:0 0 50px rgba(235,83,52,.9)}
100%{box-shadow:0 0 20px rgba(235,83,52,.5)}
}

/* FOOTER */

footer{
background:#0e1016;
padding:60px 20px;
text-align:center;
}

.footer-logo{
width:90px;
margin-bottom:20px;
}

.footer-links a{
display:block;
margin-top:10px;
color:#eb5234;
text-decoration:none;
}

/* MOBILE */

@media(max-width:768px){

.hero{
height:420px;
}

.hero h1{
font-size:24px;
}

.download-btn{
width:90%;
display:inline-block;
}
}

/* SOCIAL CLEAN */

.social-icons{
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
margin-bottom:80px; /* ВОТ ЭТО ДОБАВЬ */
flex-wrap:wrap;
}

.social-item{
width:170px;
height:80px;

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

text-decoration:none;
color:white;
font-weight:600;
letter-spacing:2px;
font-size:15px;

background:#11131a;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);

transition:.25s;
}

/* лёгкий эффект */
.social-item:hover{
transform:translateY(-4px);
border-color:#eb5234;
color:#eb5234;
}
.social-card:last-child{
margin-bottom:60px;
}

.menu.active{
transform:translateY(0);
}

/* LEGAL PAGE STYLE */

.legal{
max-width:900px;
text-align:left;
}

.legal h1{
margin-bottom:30px;
font-size:28px;
}

.legal h2{
margin-top:30px;
margin-bottom:10px;
font-size:20px;
color:#eb5234;
}

.legal p{
margin-bottom:15px;
line-height:1.6;
opacity:.85;
}

.kb-section h2{
margin-bottom:20px;
}

body{
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
}