*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:system-ui;
}

body{
background:url('assets/aurora-bg.jpg') center/cover no-repeat fixed;
color:white;
}

#pageContainer{
max-width:1400px;
margin:auto;
}

/* HEADER */

#header{
background:linear-gradient(135deg,#0f1c2f,#1b3d6b);
position:relative;
}

#header::after{
content:"";
position:absolute;
bottom:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#00d2ff,#7a5cff,#00ffa2,#ff7ad9,#00d2ff);
background-size:400%;
animation:lineMove 8s linear infinite;
}

@keyframes lineMove{
0%{background-position:0%}
100%{background-position:400%}
}

.headerInner{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 40px;
}

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

.logo img{
width:32px;
}

#mainMenu ul{
display:flex;
gap:30px;
list-style:none;
}

#mainMenu li{
opacity:.8;
cursor:pointer;
}

#mainMenu li.active{
border-bottom:2px solid #00d2ff;
}

.userMenu{
display:flex;
gap:10px;
}

.search{
background:#1a2645;
border:none;
padding:8px 12px;
border-radius:6px;
color:white;
}

.avatar{
width:34px;
height:34px;
border-radius:50%;
background:#4c6ef5;
}

/* HERO */

.hero{
padding:80px 60px;
}

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

.heroButtons{
margin-top:20px;
display:flex;
gap:15px;
}

.btnPrimary{
background:linear-gradient(135deg,#4c6ef5,#7a5cff);
border:none;
padding:12px 22px;
border-radius:8px;
color:white;
cursor:pointer;
}

.btnSecondary{
background:white;
border:none;
padding:12px 22px;
border-radius:8px;
cursor:pointer;
}

.small{
padding:8px 14px;
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
padding:0 60px 40px;
}

.statCard{
background:linear-gradient(135deg,#4c6ef5,#7a5cff);
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.statCard span{
font-size:28px;
font-weight:600;
}

.highlight{
background:linear-gradient(135deg,#00d2ff,#7a5cff);
}

/* CONTENT */

.contentGrid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:20px;
padding:0 60px 60px;
}

.panel{
background:rgba(20,30,60,.85);
padding:25px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.panel ul{
margin-top:10px;
line-height:1.6;
}

.ok{
color:#00ffa2;
font-weight:600;
}

/* FOOTER */

#footer{
background:#0f1c2f;
padding:30px 0;
}

.footerInner{
max-width:1400px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 40px;
}

.footerBrand{
display:flex;
align-items:center;
gap:10px;
}

.footerBrand img{
width:24px;
}

.footerLinks{
display:flex;
gap:20px;
}

.footerLinks a{
opacity:.8;
cursor:pointer;
}

.footerLinks a:hover{
opacity:1;
}