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

body{

    background:#080A13;

    color:white;

    font-family:Inter,sans-serif;
}

.logo{

    font-size:48px;

    font-weight:bold;

    color:#8A2EFF!important;

    font-family:Oswald,sans-serif;
}

.navbar{

    background:#111827;

    padding:20px;
}

.nav-link{

    color:white!important;

    margin-left:20px;

    transition:.3s;
}

.nav-link:hover{

    color:#8A2EFF!important;
}

.hero{

    padding:90px 0;

    min-height:700px;

    background:
        linear-gradient(rgba(8,10,19,.85),rgba(8,10,19,.85)),
        url("../images/hero.png") center/cover;

}

.hero-subtitle{

    color:#8A2EFF;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

}

.hero-title{

    font-size:90px;

    font-family:Oswald,sans-serif;

    font-weight:bold;

    margin:20px 0;

}

.hero-text{

    font-size:34px;

    font-weight:700;

}

.hero-description{

    color:#B8B8B8;

    font-size:18px;

    line-height:1.8;

    margin:30px 0;

}

.hero-logo{

    max-width:520px;

    filter:drop-shadow(0 0 25px #8A2EFF);

}

.btn-purple{

    background:#8A2EFF;

    color:white;

    padding:14px 35px;

    border-radius:8px;

    transition:.3s;

}

.btn-purple:hover{

    background:#6d18e6;

    color:white;

    transform:translateY(-3px);

}




.stats{

    margin-top:-45px;

    position:relative;

    z-index:10;

}

.stat-card{

    background:#101626;

    border:1px solid rgba(138,46,255,.2);

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:0 0 30px rgba(138,46,255,.4);

    border-color:#8A2EFF;

}

.stat-card i{

    font-size:40px;

    color:#8A2EFF;

}

.stat-card h2{

    margin-top:20px;

    font-family:Oswald;

    font-size:46px;

}

.stat-card p{

    color:#B7B7B7;

    text-transform:uppercase;

    margin:0;

}


.stats-section{

    padding:50px 0;

    background:#090b16;

}

.stats-section .container{

    display:grid;

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

    gap:20px;

}

.stat-card{

    background:#121728;

    border:1px solid rgba(138,43,226,.3);

    border-radius:14px;

    padding:25px;

    text-align:center;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

    border-color:#8a2be2;

}

.stat-card span{

    font-size:35px;

}

.stat-card h2{

    color:#9b4dff;

    margin-top:10px;

    font-size:34px;

}

.stat-card p{

    color:#aaa;

}



.home-grid{

padding:60px 0;

background:#0a0d18;

}

.home-grid .container{

display:grid;

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

gap:25px;

}

.card{

background:#121728;

border-radius:15px;

padding:30px;

border:1px solid rgba(138,43,226,.2);

}

.card h2{

margin-bottom:20px;

color:#fff;

}

.card p{

line-height:1.8;

color:#bbb;

}

.card li{

margin:10px 0;

color:#ddd;

}

.card a{

display:inline-block;

margin-top:20px;

padding:10px 22px;

border:1px solid #8a2be2;

border-radius:8px;

color:#fff;

text-decoration:none;

transition:.3s;

}

.card a:hover{

background:#8a2be2;

}


.news-item{

display:flex;
align-items:center;

margin-bottom:25px;

gap:20px;

padding-bottom:20px;

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

}

.news-item img{

width:150px;

height:90px;

border-radius:10px;

object-fit:cover;

}

.news-item h5{

color:white;

font-size:20px;

margin:5px 0;

}

.news-item p{

color:#a4a4a4;

margin:0;

}

.news-item small{

color:#8d44ff;

}

.match-logo{

display:flex;

justify-content:space-around;

align-items:center;

margin:40px 0;

}

.match-logo img{

width:90px;

}

.match-logo span{

font-size:45px;

font-weight:bold;

color:white;

}

.btn-purple{

background:#8d44ff;

color:white;

border-radius:10px;

padding:12px;

transition:.3s;

}

.btn-purple:hover{

background:#a45dff;

}


.auth-section{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:80vh;
}

.auth-card{

    width:500px;
    background:#151923;
    border:1px solid #6b2cff;

    border-radius:20px;

    padding:50px;

    text-align:center;
}

.auth-card h1{

    color:white;
    margin-bottom:20px;
}

.auth-card p{

    color:#bbb;
    margin-bottom:35px;
}

.steam-btn,
.discord-btn{

    display:block;

    width:100%;

    padding:16px;

    border-radius:10px;

    text-decoration:none;

    color:white;

    font-size:20px;

    margin-bottom:20px;

    transition:.3s;
}

.steam-btn{

    background:#1b2838;
}

.steam-btn:hover{

    background:#24384f;
}

.discord-btn{

    background:#5865F2;
}

.discord-btn:hover{

    background:#707cff;
}


.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Optional: make brand look better on mobile */
@media (max-width: 991.98px) {
    .navbar-brand {
        font-size: 1.5rem !important;
    }
}