body{margin:0;font-family:sans-serif;background:#0b0f14;color:#fff}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('images/bg.webp') center/cover;padding:20px}
.hero-title{font-size:48px;opacity:0;transform:translateY(40px);animation:fadeUp 1s forwards;text-align:center}
.hero-sub{text-align:center;opacity:0;transform:translateY(40px);animation:fadeUp 1s .2s forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.buttons{margin-top:30px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.btn{padding:14px 32px;border:none;border-radius:12px;cursor:pointer;font-size:16px;transition:.3s;-webkit-tap-highlight-color:transparent}
.btn-bedrock{background:#6aff00;color:#000;text-decoration:none}
.btn-java{background:#1affc9;color:#000}
.btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 25px rgba(0,255,150,.7)}
.copied{background:#00ff88!important;box-shadow:0 0 30px #00ff88}
.cards{margin-top:30px;display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.card{min-width:200px;padding:14px;border-radius:14px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);text-align:center;box-shadow:0 0 20px rgba(0,255,150,.25)}
.online{color:#00ff88}.offline{color:#ff4d4d}
.players span{font-size:22px;font-weight:bold}
.version{margin-top:6px;font-size:13px;opacity:.85}
@media (max-width:768px){
.hero-title{font-size:32px}
.hero-sub{font-size:16px}
.buttons{flex-direction:column}
.btn{width:100%;max-width:320px}
.card{width:100%;max-width:340px}
}