@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root{
  --bg-main:#0a0a0a;
  --bg-card:#1a1a1a;
  --primary:#e48d41;
  --secondary:#a25f2f;
  --text-main:#fff;
  --text-soft:#ccc;
  --btn-bg:#e48d41;
  --btn-hover:#ffb95c;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Press Start 2P', cursive;background:var(--bg-main);color:var(--text-main);min-height:100vh;}

header{display:flex;justify-content:space-between;align-items:center;padding:20px 50px;background:var(--bg-card);box-shadow:0 0 15px #e48d41;}
header .logo{display:flex;align-items:center;}
header .logo img{width:50px;height:50px;margin-right:15px;}
header h1{font-size:2rem;color:var(--primary);}
nav a{margin-left:20px;text-decoration:none;color:var(--text-main);font-weight:600;position:relative;}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--secondary);transition:width .3s ease;}
nav a:hover::after{width:100%;}

.hero{background: url('../images/hero-bg.jpg') center/cover no-repeat;padding:120px 50px;text-align:center;position:relative;overflow:hidden;}
.hero::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.hero-text{position:relative; z-index:2; color:#fff;}
.hero-text h2{font-size:2.5rem; color:var(--primary); margin-bottom:15px;}
.hero-text p{margin-bottom:20px; font-size:1rem;}
.btn{background:var(--btn-bg);color:#fff;padding:12px 30px;border:none;border-radius:6px;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;transition:.3s;text-transform:uppercase;letter-spacing:1px;box-shadow:0 0 10px var(--primary);}
.btn:hover{background:var(--btn-hover);box-shadow:0 0 20px var(--primary);}

.cards-section h2,.about h2,.server-info h2{margin:40px 0 20px;text-align:center;color:var(--primary);}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;padding:20px;}
.card{background:var(--bg-card);padding:20px;border-radius:15px;box-shadow:0 0 15px #e48d41;width:300px;transition: transform .3s, box-shadow .3s;text-align:center;}
.card:hover{transform:translateY(-5px);box-shadow:0 0 25px var(--primary);}
.card h3{color:var(--secondary);margin-bottom:10px;}
.card p{color:var(--text-soft);}
.card img.card-img,.card-bg img{width:100%;border-radius:10px;margin-bottom:15px;}
.btn-card{background:var(--primary);color:#fff;padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:600;display:inline-block;margin-top:10px;transition:.3s;box-shadow:0 0 5px var(--primary);}
.btn-card:hover{background:var(--secondary);box-shadow:0 0 15px var(--primary);}

.auth-form{max-width:400px;margin:50px auto;display:flex;flex-direction:column;gap:15px;}
.auth-form input{padding:12px;border-radius:6px;border:1px solid #333;background:#111;color:#fff;}
.auth-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 10px var(--primary);}
.auth-form button{background:var(--btn-bg);color:#fff;padding:12px;border:none;border-radius:6px;cursor:pointer;font-weight:600;box-shadow:0 0 5px var(--primary);}
.auth-form button:hover{background:var(--btn-hover);box-shadow:0 0 15px var(--primary);}

footer{text-align:center;padding:30px;background:var(--bg-card);color:var(--text-soft);border-top:1px solid #333;}
footer a{color:var(--primary);text-decoration:none;margin:0 5px;}
footer a:hover{text-decoration:underline;}

@media(max-width:768px){.cards{flex-direction:column;align-items:center;}.hero{padding:80px 20px;}header{flex-direction:column;gap:15px;}}