@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box;font-family:'Unbounded',sans-serif;}
html{scroll-behavior:smooth;}
body{background:#0a0a0a;color:#fff;line-height:1.6;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.container{max-width:1100px;margin:0 auto;padding:0 24px;}

/* Nav */
.navbar{position:fixed;top:0;left:0;right:0;height:64px;z-index:100;background:rgba(10,10,10,0.85);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);}
.nav-container{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:100%;}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;}
.logo-icon{font-size:18px;opacity:0.7;}
.accent{color:#888;}
.nav-links{display:flex;gap:24px;}
.nav-links a{font-size:12px;color:#555;transition:0.2s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.live-indicator{display:flex;align-items:center;gap:6px;font-size:11px;color:#22c55e;padding:6px 14px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:20px;}
.live-dot{width:6px;height:6px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* Hero */
.hero{position:relative;padding:140px 24px 80px;text-align:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:60px 60px;}
.hero-content{position:relative;z-index:1;max-width:650px;margin:0 auto;}
.hero h1{font-size:clamp(24px,4vw,38px);font-weight:800;margin-bottom:16px;line-height:1.3;}
.highlight{color:#60a5fa;}
.hero p{color:#888;font-size:14px;margin-bottom:32px;}
.hero-counters{display:flex;justify-content:center;align-items:center;gap:32px;margin-bottom:40px;}
.counter{text-align:center;}
.counter-num{display:block;font-size:24px;font-weight:700;}
.counter-label{font-size:11px;color:#555;}
.counter-divider{width:1px;height:36px;background:rgba(255,255,255,0.08);}

/* Search */
.search-bar{display:flex;align-items:center;gap:10px;max-width:500px;margin:0 auto;padding:12px 20px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;transition:0.3s;}
.search-bar:focus-within{border-color:rgba(96,165,250,0.3);background:rgba(255,255,255,0.06);}
.search-bar svg{color:#555;flex-shrink:0;}
.search-bar input{background:none;border:none;color:#fff;font-family:inherit;font-size:13px;outline:none;flex:1;}
.search-bar input::placeholder{color:#444;}

/* Section */
.section{padding:60px 0;}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.section-header h2{font-size:20px;font-weight:700;}
.section-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:32px;}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;}
.stats-card{padding:24px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;}
.stats-card.wide{grid-column:span 1;}
.stats-card h3{font-size:12px;color:#555;margin-bottom:12px;}
.big-num{font-size:28px;font-weight:800;margin-bottom:4px;}
.stats-sub{font-size:11px;color:#444;}
.chart-area{height:100px;margin-bottom:8px;}
.line-svg{width:100%;height:100%;}
.chart-labels{display:flex;justify-content:space-between;font-size:9px;color:#333;}

/* Sort */
.sort-options{display:flex;gap:4px;}
.sort-btn{padding:6px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:#555;font-family:inherit;font-size:11px;cursor:pointer;transition:0.2s;}
.sort-btn.active{background:rgba(255,255,255,0.08);color:#fff;}

/* Server List */
.servers-list{display:flex;flex-direction:column;gap:6px;}
.server-row{display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:12px;transition:0.3s;cursor:pointer;}
.server-row:hover{border-color:rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);}
.server-rank{font-size:14px;font-weight:700;color:#444;min-width:30px;}
.server-info{flex:1;}
.server-name-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.server-flag{font-size:16px;}
.server-name-row strong{font-size:14px;}
.server-badge{padding:2px 8px;border-radius:6px;font-size:9px;font-weight:600;}
.server-badge.featured{background:rgba(234,179,8,0.15);color:#eab308;border:1px solid rgba(234,179,8,0.3);}
.server-badge.hot{background:rgba(249,115,22,0.15);color:#f97316;border:1px solid rgba(249,115,22,0.3);}
.server-badge.new{background:rgba(59,130,246,0.15);color:#3b82f6;border:1px solid rgba(59,130,246,0.3);}
.server-info p{font-size:10px;color:#444;}
.server-online{min-width:140px;}
.online-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:4px;}
.online-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px;transition:width 0.5s;}
.server-online span{font-size:11px;color:#888;}
.server-uptime{text-align:center;min-width:60px;}
.uptime-value{display:block;font-size:14px;font-weight:700;color:#22c55e;}
.uptime-label{font-size:9px;color:#444;}

/* Top Grid */
.top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end;}
.top-card{padding:28px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:16px;text-align:center;transition:0.3s;}
.top-card:hover{transform:translateY(-4px);}
.top-place{font-size:32px;font-weight:800;margin-bottom:8px;}
.top-card h3{font-size:15px;margin-bottom:8px;}
.top-avg{font-size:11px;color:#555;}
.top-card.gold{border-color:rgba(234,179,8,0.3);background:rgba(234,179,8,0.04);}
.top-card.gold .top-place{color:#eab308;}
.top-card.silver .top-place{color:#94a3b8;}
.top-card.bronze .top-place{color:#b45309;}
.top-card.gold{order:0;padding:36px 28px;}
.top-card.silver{order:-1;}
.top-card.bronze{order:1;}

/* Footer */
.footer{padding:40px 0;border-top:1px solid rgba(255,255,255,0.06);text-align:center;color:#444;font-size:12px;}
.footer a{color:#888;transition:0.2s;}
.footer a:hover{color:#fff;}

@media(max-width:768px){
    .nav-links{display:none;}
    .stats-grid{grid-template-columns:1fr;}
    .server-row{flex-wrap:wrap;gap:10px;}
    .server-online{width:100%;}
    .server-uptime{margin-left:auto;}
    .top-grid{grid-template-columns:1fr;gap:12px;}
    .top-card.gold,.top-card.silver,.top-card.bronze{order:unset;padding:24px;}
    .hero-counters{gap:20px;}
}