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

body{
min-height:100vh;
font-family:'Poppins', sans-serif;

background-image:url("Static/main.png");
background-size:cover;
background-position:center;

color:white;

display:flex;
flex-direction:column;
align-items:center;
}

/* затемнение фона */

.overlay{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.55);
backdrop-filter:blur(3px);

z-index:0;
}


/* верхняя панель */

.topbar{
position:absolute;
z-index:3;

top:20px;
left:80px;

display:flex;
align-items:center;

gap:15px;

background:linear-gradient(
145deg,
rgba(0,20,40,0.8),
rgba(0,0,0,0.6)
);

padding:12px 22px;

border-radius:16px;

backdrop-filter:blur(10px);

text-decoration:none;
color:white;

transition:all 0.35s ease;

box-shadow:0 0 25px rgba(0,0,0,0.4);
}

.topbar:hover{
transform:translateY(-3px) scale(1.04);
box-shadow:0 0 35px rgba(0,120,255,0.6);
}

.logo{
width:40px;
height:40px;

border-radius:12px;
object-fit:cover;
}

.logo-text{
font-size:22px;
font-weight:600;
}

.logo-text span{
font-weight:300;
opacity:0.8;
}


/* статус сервера */

.server-status{

position:absolute;
z-index:3;

top:20px;
right:30px;

display:flex;
align-items:center;
gap:12px;

padding:10px 18px;

background:linear-gradient(
145deg,
rgba(0,20,40,0.8),
rgba(0,0,0,0.6)
);

border-radius:14px;

backdrop-filter:blur(10px);

font-size:18px;
font-weight:500;

box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.status-dot{

width:12px;
height:12px;

border-radius:50%;
background:#ff3b3b;

}


/* главный заголовок */

.main-title{

z-index:2;

font-size:72px;
font-weight:700;

margin-top:100px;
margin-bottom:40px;

text-shadow:0 0 25px rgba(255,255,255,0.35);
}


/* основной layout */

.main-wrapper{

z-index:2;

display:flex;

align-items:center;

gap:60px;

max-width:1400px;

width:100%;

padding:40px;
}


/* левая часть */

.left-content{
max-width:600px;
}


/* стеклянный блок */

.glass-box{

background:rgba(0,0,0,0.45);

padding:30px 35px;

border-radius:20px;

backdrop-filter:blur(8px);

box-shadow:
0 0 40px rgba(0,0,0,0.4);

margin-bottom:20px;
}


/* текст */

.description{

font-size:18px;
line-height:1.7;

margin-bottom:12px;

opacity:0.95;
}

.highlight{

font-size:19px;
font-weight:600;

margin:18px 0;

color:#7fb8ff;

text-shadow:0 0 12px rgba(120,180,255,0.7);
}

.accent{
color:#7fb8ff;
}


/* блок присоединения */

.join-block{
margin-top:18px;
}

.join-block h3{

margin-bottom:10px;

font-size:20px;

color:#7fb8ff;
}


/* кнопка */

.discord-btn{

position:relative;
z-index:3;

display:inline-block;

padding:15px 45px;

background:#5865F2;

color:white;

text-decoration:none;

font-size:18px;
font-weight:500;

border-radius:40px;

transition:0.3s;

box-shadow:0 0 20px rgba(88,101,242,0.6);
}

.discord-btn:hover{

transform:scale(1.08);

box-shadow:0 0 40px rgba(88,101,242,1);

}


/* карта */

.map-container{

width:650px;
height:520px;

border-radius:20px;

overflow:hidden;

background:rgba(0,0,0,0.4);

backdrop-filter:blur(8px);

box-shadow:0 0 40px rgba(0,0,0,0.5);
}

.map-frame{

width:100%;
height:100%;

border:none;

}

/* owners section */

.owners{

margin-top:120px;

width:100%;

text-align:center;

padding-bottom:120px;

position:relative;

z-index:2;

}


/* заголовок владельцев */

.owners-title{

display:inline-block;

font-size:46px;

margin-bottom:60px;

padding:14px 28px;

border-radius:14px;

background:rgba(0,0,0,0.45);

backdrop-filter:blur(8px);

box-shadow:0 0 25px rgba(0,0,0,0.5);

text-shadow:0 0 20px rgba(255,255,255,0.4);

}


/* контейнер карточек */

.owners-container{

display:flex;

justify-content:center;

gap:120px;

flex-wrap:wrap;

}


/* карточка */

.owner-card{

background:rgba(0,0,0,0.5);

backdrop-filter:blur(10px);

padding:40px 45px;

border-radius:26px;

width:320px;

transition:0.35s;

box-shadow:0 0 40px rgba(0,0,0,0.6);

display:flex;

flex-direction:column;

align-items:center;

}

.owner-card:hover{

transform:translateY(-10px) scale(1.03);

box-shadow:0 0 45px rgba(100,180,255,0.6);

}


/* аватар */

.owner-avatar{

width:210px;
height:210px;

object-fit:cover;

border-radius:20px;

margin-bottom:22px;

box-shadow:0 0 30px rgba(0,0,0,0.7);

}


/* роль */

.owner-role{

font-size:16px;

opacity:0.75;

margin-bottom:6px;

text-align:center;

}


/* имя */

.owner-name{

font-size:26px;

font-weight:600;

color:#7fb8ff;

text-align:center;

letter-spacing:0.5px;

}

/* кнопка меню */

.menu-button{

position:absolute;
top:26px;
left:15px;

z-index:6;

font-size:20px;

background:linear-gradient(
145deg,
rgba(0,20,40,0.85),
rgba(0,0,0,0.65)
);

padding:10px 16px;

border-radius:14px;

cursor:pointer;

backdrop-filter:blur(12px);

box-shadow:0 0 25px rgba(0,0,0,0.6);

transition:0.35s;

}

.menu-button:hover{

transform:scale(1.12);

box-shadow:0 0 35px rgba(100,180,255,0.8);

}



/* overlay как у Apple */

.menu-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.35);

backdrop-filter:blur(8px);

opacity:0;
pointer-events:none;

transition:0.35s;

z-index:4;

}

.menu-overlay.active{

opacity:1;
pointer-events:auto;

}



/* боковое меню */

.side-menu{

position:fixed;

top:0;
left:-280px;

width:280px;
height:100%;

background:linear-gradient(
180deg,
rgba(0,20,40,0.92),
rgba(0,0,0,0.9)
);

backdrop-filter:blur(14px);

padding-top:130px;

display:flex;
flex-direction:column;

gap:35px;

padding-left:45px;

transition:0.45s cubic-bezier(.25,.8,.25,1);

z-index:5;

box-shadow:0 0 50px rgba(0,0,0,0.8);

}

.side-menu.active{

left:0;

}



/* ссылки */

.side-menu a{

color:white;

font-size:22px;

text-decoration:none;

opacity:0;

transform:translateX(-20px);

transition:0.4s;

}



/* плавное появление */

.side-menu.active a{

opacity:1;
transform:translateX(0);

}

.side-menu.active a:nth-child(1){
transition-delay:0.1s;
}

.side-menu.active a:nth-child(2){
transition-delay:0.2s;
}

.side-menu.active a:nth-child(3){
transition-delay:0.3s;
}



.side-menu a:hover{

color:#7fb8ff;

transform:translateX(10px);

}