:root {
    --pink: #ff007f;
    --pink-glow: rgba(255, 0, 127, 0.3);
    --bg: #050505;
    --card-bg: rgba(18, 18, 18, 0.9);
    --nav-bg: rgba(5, 5, 5, 0.95);
    --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }
body {
    margin: 0; padding: 0; background-color: var(--bg); color: #fff;
    font-family: 'Inter', sans-serif; line-height: 1.6; overflow-x: hidden;
}

/* Nav Bar */
nav {
    position: fixed; top: 0; width: 100%; height: 80px;
    background: var(--nav-bg); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border); display: flex;
    align-items: center; justify-content: center; z-index: 1000;
}
nav a {
    color: #fff; text-decoration: none; margin: 0 15px;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px;
    transition: 0.3s; opacity: 0.6; font-weight: 600;
}
nav a:hover, nav a.active { opacity: 1; color: var(--pink); }

/* Layouts */
.header-section {
    padding: 160px 20px 80px; text-align: center;
    background: radial-gradient(circle at top, #1a000d 0%, var(--bg) 100%);
}
h1 { font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: 12px; text-transform: uppercase; font-weight: 200; margin: 0; }
h1 b { color: var(--pink); font-weight: 900; text-shadow: 0 0 30px var(--pink-glow); }
.container { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }
p.subtitle { color: #666; letter-spacing: 4px; text-transform: uppercase; font-size: 0.9rem; margin-top: 10px; }

/* Cards & Buttons */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card {
    background: var(--card-bg); padding: 50px 30px; border-radius: 15px;
    border: 1px solid var(--border); text-align: center; transition: 0.4s ease;
}
.card:hover { border-color: var(--pink); transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.btn {
    display: inline-block; padding: 14px 35px; border: 1px solid var(--pink);
    color: #fff; text-decoration: none; font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2px; border-radius: 4px; transition: 0.3s;
}
.btn.filled { background: var(--pink); }
.btn:hover { background: var(--pink); box-shadow: 0 0 20px var(--pink); transform: scale(1.05); }

/* Legal Text Area */
.text-block { background: var(--card-bg); padding: 40px; border-radius: 12px; border: 1px solid var(--border); }
.text-block h2 { color: var(--pink); letter-spacing: 2px; }

/* Discord Floating */
.discord-btn {
    position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
    background: #5865F2; color: white; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; text-decoration: none; z-index: 1000; transition: 0.3s;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}
.discord-btn:hover { transform: scale(1.1) rotate(-5deg); background: #4752c4; }

@media (max-width: 768px) { nav { flex-wrap: wrap; height: auto; padding: 20px; } nav a { margin: 5px 10px; } }