*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#07070b;color:#fff}
.hero{background:radial-gradient(circle at top,#5d1d8b,#07070b 70%);padding:80px 20px;text-align:center}
h1{font-size:72px;margin:0;font-weight:800}
.subtitle{color:#c9bfd8;font-size:20px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;max-width:1100px;margin:50px auto}
.stat{background:rgba(20,20,30,.8);backdrop-filter:blur(8px);border:1px solid #4f2f8a;border-radius:20px;padding:25px}
.stat span{display:block;font-size:48px;font-weight:700;color:#ff3d7f}
.stat label{color:#bbb}
#search{width:min(1100px,100%);padding:16px 20px;border-radius:16px;border:1px solid #4f2f8a;background:#141420;color:#fff;font-size:18px}
section{max-width:1100px;margin:40px auto;padding:0 20px}
.feature-card{background:linear-gradient(135deg,#1b1b29,#24133d);border:1px solid #6d43bb;border-radius:22px;padding:30px;box-shadow:0 0 40px rgba(123,44,255,.2)}
#serverList{display:grid;gap:18px}
.server{background:#151521;border:1px solid #403060;border-radius:18px;padding:22px;transition:.25s}
.server:hover{transform:translateY(-4px);box-shadow:0 0 25px rgba(123,44,255,.25)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.name{font-size:24px;font-weight:bold}.status{color:#00ff88;font-weight:bold}
.bar{height:10px;background:#262636;border-radius:99px;margin:16px 0;overflow:hidden}.fill{height:100%;background:linear-gradient(90deg,#ff2a6d,#7b2cff)}
.meta{display:flex;justify-content:space-between;color:#bbb;flex-wrap:wrap}
footer{text-align:center;color:#777;padding:40px}