.hero{
height:90vh;
min-height:890px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(
180deg,
rgba(5,8,20,.2),
#050814
),
url("/img/fondofinalPA.png");
background-size:cover;
background-position:center;
}

.hero:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:220px;
background:linear-gradient(transparent,#050814);
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
width:100%;
padding:180px 20px 20px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
transform:translateY(40px);
}

.hero-title{
font-family:"Orbitron",sans-serif;
font-size:80px;
font-weight:1000;
letter-spacing:-3px;
background:linear-gradient(90deg,#fff,#64dcff,#9b7bff);
-webkit-background-clip:text;
color:transparent;
}

.hero-description{
margin-top:20px;
padding:18px 28px;
max-width:650px;
border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.18),
inset 0 -15px 30px rgba(0,0,0,.4),
0 25px 60px rgba(0,0,0,.45);
backdrop-filter:blur(25px);
color:#e4ebff;
font-size:17px;
font-weight:500;
line-height:1.5;
position:relative;
}

.hero-description:before,
.hero-description:after{
content:"";
position:absolute;
top:25px;
bottom:25px;
width:2px;
background:linear-gradient(180deg,transparent,#64dcff,#52ffe0,transparent);
}

.hero-description:before{
left:0;
}

.hero-description:after{
right:0;
}

.team-section{
padding:100px 40px 140px;
background:#050814;
}

.team-container{
max-width:1500px;
margin:auto;
}

.staff-group{
margin-bottom:110px;
}

.staff-group:last-child{
margin-bottom:0;
}

.staff-group-title{
font-family:"Orbitron",sans-serif;
font-size:44px;
font-weight:900;
text-align:center;
margin-bottom:70px;
letter-spacing:2px;
text-transform:uppercase;
}

.staff-grid{
width:100%;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:100px 35px;
}

.staff-card{
position:relative;
width:320px;
max-width:320px;
min-height:0;
padding:125px 30px 25px;
border-radius:28px;
overflow:visible;
background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.16);
box-shadow:inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35),0 30px 60px rgba(0,0,0,.4);
backdrop-filter:blur(18px);
transition:.35s;
}

.staff-card:hover{
transform:translateY(-12px);
}

.staff-glow{
position:absolute;
top:-45px;
left:50%;
transform:translateX(-50%);
width:180px;
height:180px;
border-radius:50%;
filter:blur(50px);
opacity:.4;
z-index:0;
}

.staff-skin{
position:absolute;
left:50%;
top:-40px;
transform:translateX(-50%);
width:185px;
pointer-events:none;
user-select:none;
filter:drop-shadow(0 15px 25px rgba(0,0,0,.45));
transition:.35s;
z-index:2;
-webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.85) 78%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.85) 78%,transparent 100%);
}

.staff-card:hover .staff-skin{
transform:translateX(-50%) translateY(-12px) scale(1.06);
}

.staff-divider{
width:100%;
height:2px;
margin-bottom:25px;
background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
opacity:.8;
box-shadow:0 0 15px rgba(100,220,255,.45);
}

.staff-rank{
display:block;
font-family:"Orbitron",sans-serif;
font-size:14px;
font-weight:900;
letter-spacing:3px;
text-align:center;
text-transform:uppercase;
margin-bottom:15px;
}

.staff-card h3{
font-family:"Orbitron",sans-serif;
font-size:31px;
font-weight:900;
text-align:center;
color:#fff;
margin-bottom:15px;
}

.staff-card p{
font-size:15px;
font-weight:500;
line-height:1.7;
text-align:center;
color:#bcc7e5;
}

.owner .staff-glow{
background:#ffd84d;
}

.owner .staff-rank,
.owner.staff-group-title{
color:#ffd84d;
}

.owner.staff-card:hover{
border-color:#ffd84d;
box-shadow:0 0 35px rgba(255,216,77,.25),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

.manager .staff-glow{
background:#64dcff;
}

.manager .staff-rank,
.manager.staff-group-title{
color:#64dcff;
}

.manager.staff-card:hover{
border-color:#64dcff;
box-shadow:0 0 35px rgba(100,220,255,.25),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

.admin .staff-glow{
background:#ff5252;
}

.admin .staff-rank,
.admin.staff-group-title{
color:#ff5252;
}

.admin.staff-card:hover{
border-color:#ff5252;
box-shadow:0 0 35px rgba(255,82,82,.25),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

.moderator .staff-glow{
background:#4b84ff;
}

.moderator .staff-rank,
.moderator.staff-group-title{
color:#4b84ff;
}

.moderator.staff-card:hover{
border-color:#4b84ff;
box-shadow:0 0 35px rgba(75,132,255,.25),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

.helper .staff-glow{
background:#48d96d;
}

.helper .staff-rank,
.helper.staff-group-title{
color:#48d96d;
}

.helper.staff-card:hover{
border-color:#48d96d;
box-shadow:0 0 35px rgba(72,217,109,.25),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

.developer .staff-glow{
background:linear-gradient(135deg,#5ec7ff,#9b7bff,#ff5478);
}

.developer .staff-rank,
.developer.staff-group-title{
background:linear-gradient(90deg,#5ec7ff,#9b7bff,#ff5478);
-webkit-background-clip:text;
color:transparent;
}

.developer.staff-card:hover{
border-color:#9b7bff;
box-shadow:0 0 35px rgba(155,123,255,.3),inset 0 5px 15px rgba(255,255,255,.15),inset 0 -15px 30px rgba(0,0,0,.35);
}

@media(max-width:900px){

.hero-title{
font-size:65px;
}

.hero-description{
font-size:16px;
padding:22px;
}

.team-section{
padding:70px 20px 100px;
}

.staff-group-title{
font-size:34px;
}

}

@media(max-width:600px){

.hero{
min-height:500px;
}

.hero-title{
font-size:46px;
}

.hero-description{
font-size:15px;
}

.staff-grid{
gap:90px 25px;
}

.staff-card{
max-width:340px;
min-height:390px;
}

}

.team-guide{
margin-top:25px;
width:260px;
padding:20px;
border-radius:28px;
background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 5px 15px rgba(255,255,255,.15),
inset 0 -15px 30px rgba(0,0,0,.35),
0 25px 60px rgba(0,0,0,.4);
backdrop-filter:blur(20px);
}

.team-guide-title{
font-family:"Orbitron",sans-serif;
font-size:14px;
font-weight:900;
letter-spacing:2px;
margin-bottom:18px;
background:linear-gradient(90deg,#fff,#64dcff,#9b7bff);
-webkit-background-clip:text;
color:transparent;
}

.guide-card{
padding:25px 20px;
border-radius:22px;
background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.12);
}

.guide-skin-box{
height:60px;
display:flex;
align-items:center;
justify-content:center;
font-family:"Orbitron",sans-serif;
font-size:11px;
font-weight:900;
color:#64dcff;
}

.guide-divider{
height:2px;
width:100%;
background:linear-gradient(90deg,#52ffe0,#64dcff,#9b7bff);
box-shadow:0 0 15px rgba(100,220,255,.45);
margin:15px 0;
}

.guide-rank{
display:block;
font-family:"Orbitron",sans-serif;
font-size:11px;
font-weight:900;
letter-spacing:2px;
color:#ffd84d;
}

.guide-card h3{
font-family:"Orbitron",sans-serif;
font-size:20px;
margin:12px 0;
color:white;
}

.guide-card p{
font-size:13px;
color:#bcc7e5;
line-height:1.5;
}

.guide-roles{
margin-top:18px;
padding:6px 12px;
display:inline-block;
border-radius:10px;
font-family:"Orbitron",sans-serif;
font-size:10px;
font-weight:900;
letter-spacing:1px;
color:#9b7bff;
border:1px solid #9b7bff;
}

.staff-roles{
margin-top:25px;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
}

.staff-role-tag{
padding:6px 14px;
border-radius:12px;
font-family:"Orbitron",sans-serif;
font-size:10px;
font-weight:900;
letter-spacing:1px;
color:white;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.2);
box-shadow:
inset 0 3px 10px rgba(255,255,255,.12),
0 5px 15px rgba(0,0,0,.25);
transition:.3s;
}

.owner .staff-role-tag{
border-color:#ffd84d;
color:#ffd84d;
}

.manager .staff-role-tag{
border-color:#64dcff;
color:#64dcff;
}

.admin .staff-role-tag{
border-color:#ff5252;
color:#ff5252;
}

.moderator .staff-role-tag{
border-color:#4b84ff;
color:#4b84ff;
}

.helper .staff-role-tag{
border-color:#48d96d;
color:#48d96d;
}

.developer .staff-role-tag{
border-color:#9b7bff;
background:linear-gradient(90deg,#5ec7ff,#9b7bff,#ff5478);
-webkit-background-clip:text;
color:transparent;
}