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

:root{
    --bg-900: #030406;
    --bg-800: #0b0f12;
    --brand: #00A6E6;    
    --brand-dark: #0079B0;
    --muted: #9fb6c6;
    --text: #e6f2f8;
    --glass-opa: 0.14;
}

body{
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg-900);
    color: var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
}

.site-navbar{
    background: transparent;
    padding: .8rem 0;
    transition: all 220ms ease;
}
.site-navbar.scrolled{
    background: linear-gradient(180deg, rgba(2,6,10,0.88), rgba(2,6,10,0.75));
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    padding: .45rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.site-navbar .brand-logo{
    height:44px;
    width:auto;
    object-fit:contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.brand-text-wrap { display:flex; flex-direction:column; line-height:1; }
.brand-text { font-weight:700; color:var(--text); letter-spacing:1px; font-size:1.05rem; }
.brand-sub { font-size:0.65rem; color:var(--muted); margin-top:-4px; }

.site-navbar .nav-link{
    color:var(--muted);
    margin: 0 .25rem;
    padding: .35rem .6rem;
    border-radius:6px;
    transition: all 140ms ease;
    font-weight:600;
}
.site-navbar .nav-link:hover{ color:var(--text); background: rgba(255,255,255,0.02); text-decoration:none; }
.site-navbar .nav-link.active{
    color:var(--text);
    position:relative;
}
.site-navbar .nav-link.active::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg,var(--brand),var(--brand-dark));
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,166,230,0.08);
}

.hero{
    position: relative;
    background-image: url('/images/hero-bg.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 420px;
    display:flex;
    align-items:center;
    color:var(--text);
}
.hero-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(3,6,9,0.65), rgba(3,6,9,0.65));
    backdrop-filter: blur(3px) saturate(120%);
    opacity: 1;
}
.hero-content{
    position: relative;
    z-index: 2;
    padding: 4rem 0;
}
.hero-title{
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: .6rem;
    text-shadow: 0 6px 30px rgba(0,0,0,0.6);
}
.hero-sub{
    color: var(--muted);
    font-size: 1.05rem;
}

.text-muted-tna {
    color: var(--muted);
}

.glass-card{
    background: linear-gradient(180deg, rgba(7,10,12,var(--glass-opa)), rgba(11,14,16,0.06));
    border: 1px solid rgba(255,255,255,0.04);
    padding: 1.2rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(2,6,10,0.6);
    backdrop-filter: blur(6px) saturate(120%);
    color: var(--text);
}
.glass-card .card-title{
    font-weight:700;
    margin-bottom:.6rem;
}
.glass-meta{
    color:var(--muted);
    font-size:0.95rem;
}

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

.badge-accent {
    display:inline-block;
    padding:.25rem .6rem;
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    color: white;
    border-radius: 999px;
    font-weight:700;
    box-shadow: 0 6px 14px rgba(0,166,230,0.12);
}

.btn-accent{
    background: linear-gradient(90deg, var(--brand), var(--brand-dark));
    border: none;
    color: white;
    box-shadow: 0 8px 22px rgba(0,166,230,0.12);
    padding: .6rem 1.05rem;
    border-radius: 10px;
    font-weight:700;
}
.btn-accent:hover{ filter: brightness(0.98); }
.btn-outline-light{
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    padding: .55rem .95rem;
    border-radius: 10px;
}

.content-wrapper{
    padding: 3.5rem 1.25rem 2.5rem; 
    min-height: calc(100vh - 160px);
}

.table td, .table th {
    vertical-align: middle;
    color: #dbeff9;
}

.site-footer{
    padding: 1.25rem 0;
    color: var(--muted);
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    border-top: 1px solid rgba(255,255,255,0.02);
    font-size: 0.95rem;
}

.footer-logo{
    height: 40px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5));
}

.social-icons{
    gap: 0.5rem;
}

.social-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: #ffffff; 
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    font-size: 1.15rem;
    backdrop-filter: blur(4px) saturate(120%);
}

.stats-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #ffffff; 
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    font-size: 1.15rem;
    backdrop-filter: blur(4px) saturate(120%);
}

.stats-link i {
    color: #ffffff;
    font-size: 0.90rem;
}

.social-link i{
    color: #ffffff;
    font-size: 1.05rem;
}

.social-link:hover,
.social-link:focus,
.stats-link:hover,
.stats-link:focus {
    transform: translateY(-4px);
    outline: none;
    opacity: 1;
}

.social-link.instagram,
.social-link.discord,
.social-link.youtube {
    background: linear-gradient(120deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.03);
}

.member-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;           
    object-position: center 22%; 
    border: 1px solid rgba(255,255,255,0.04);
    display: inline-block;
}

@media (min-width: 992px) {
    .member-avatar { width: 72px; height: 72px; object-position: center 20%; }
}

@media (max-width: 575px){
    .site-footer .row { text-align: center; }
    .site-footer .col-md-6 { margin-bottom: .5rem; }
    .social-link { width: 40px; height: 40px; font-size: 1rem; }
}
@media (max-width: 991px){
    .hero { min-height: 360px; }
    .hero-content { padding: 3rem 0; }
}
@media (max-width: 767px){
    .brand-text { font-size: .95rem; }
    .content-wrapper { padding-top: 7.5rem; }
    .hero-title { font-size: 1.6rem; }
    .brand-sub { display:none; }

    .hero .row {
        margin-top: 5rem; 
    }

    .hero .col-lg-8 {
        display: flex;             
        flex-direction: column;
        justify-content: center;   
        align-items: center;       
        text-align: center;        
    }

    .hero .col-lg-8 > .mt-4 {
        display: flex;
        justify-content: center;
        gap: .5rem;
        width: 100%;
    }

    .hero .col-lg-4 {
        margin-top: 1.5rem;
    }
}

@media (max-width: 767px){

}

@media (max-width: 575px){
    .hero .row { margin-top: 3.5rem; }
}