html, body {
    min-height: 100%;
    background:
        radial-gradient(circle at 50% 0%, rgba(150, 79, 255, 0.26), transparent 34%),
        linear-gradient(180deg, rgba(7, 5, 14, 0.72), rgba(7, 5, 14, 0.98) 68%, #05040a),
        url('../img/background.png') no-repeat top center #05040a;
    background-size: auto, auto, cover;
    color:#cfc8df;
    font-family:'Poppins', sans-serif;
    text-shadow: 0 2px 1px rgba(0,0,0,0.65);
}

:root {
    --fantasy-bg:#05040a;
    --fantasy-panel:#120c1f;
    --fantasy-panel-2:#1b102d;
    --fantasy-purple:#8c4dff;
    --fantasy-violet:#c08cff;
    --fantasy-pink:#ff4fd8;
    --fantasy-gold:#e8bf73;
    --fantasy-text:#ede7ff;
    --fantasy-muted:#b7aeca;
    --fantasy-border:rgba(192,140,255,.34);
}

a { font-weight:700; color:var(--fantasy-text); transition:.2s all; }
a:hover { color:var(--fantasy-violet); text-decoration:none; }

h1 { color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.45em; font-size:20px; }
h2 { font-family:'Cinzel', serif; color:#fff; font-weight:900; text-transform:uppercase; font-size:76px; letter-spacing:.04em; text-shadow:0 0 20px rgba(140,77,255,.75), 0 0 44px rgba(255,79,216,.28); }
h3 { font-family:'Cinzel', serif; font-weight:800; text-transform:uppercase; color:#fff; text-shadow:0 0 24px rgba(140,77,255,.75); margin-bottom:20px; letter-spacing:.08em; }
h4 { font-family:'Cinzel', serif; font-weight:700; color:var(--fantasy-gold); }
p { font-size:14px; line-height:30px; color:var(--fantasy-muted); }

#header__topbar { background:rgba(5,4,10,.78); border-bottom:1px solid rgba(192,140,255,.18); height:auto; min-height:48px; padding:13px 8%; backdrop-filter: blur(10px); }
.topbar-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; }
#header__topbar p { margin:0; color:#d8cff3; font-weight:300; font-size:13px; }
.players-online { font-weight:800; color:var(--fantasy-gold); }
.topbar-right span { color:var(--fantasy-purple); padding:0 8px; }

nav { position:relative; background:linear-gradient(180deg, rgba(31,16,51,.9), rgba(10,7,18,.92)); height:86px; box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 10px 35px rgba(0,0,0,.55), 0 0 32px rgba(140,77,255,.20); border-bottom:1px solid rgba(232,191,115,.18); }
nav:before { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(192,140,255,.12), transparent); pointer-events:none; }
nav ul { padding-inline-start:0; }
#nav__left, #logo, #nav__right { list-style:none; display:inline-flex; margin-bottom:0; }
#nav__right { float:right; }
#logo { margin:0 auto; display:block; position:relative; text-align:center; top:-165px; width:520px; opacity:.95; transition:.2s all; filter:drop-shadow(0 0 30px rgba(140,77,255,.5)); }
#logo:hover { opacity:1; transform:translateY(-2px); }
#nav__left a, #nav__right a { color:#fff; font-weight:800; padding:30px 54px; text-transform:uppercase; letter-spacing:.08em; font-size:13px; position:relative; z-index:2; }
#nav__left a:hover, #nav__right a:hover { box-shadow:0 -3px 0 var(--fantasy-violet) inset; color:var(--fantasy-gold); padding-top:25px; padding-bottom:35px; background:rgba(192,140,255,.05); }

#header__content { margin:120px auto 80px auto; text-align:center; max-width:1100px; padding:0 20px; }
.hero-panel { position:relative; }
.eyebrow, .section-kicker { display:inline-block; color:var(--fantasy-gold); text-transform:uppercase; font-weight:800; letter-spacing:.24em; font-size:12px; margin-bottom:12px; }
.hero-copy { max-width:720px; margin:18px auto 24px; color:#ddd4f3; font-size:16px; }
#header__content #buttons { display:inline-flex; flex-wrap:wrap; justify-content:center; }
.btn__orange, .btn__white, .btn__blurple { padding:13px 42px; color:#fff; font-weight:900; border-radius:999px; transition:.2s all; margin:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 22px rgba(140,77,255,.18); text-transform:uppercase; letter-spacing:.06em; }
.btn__orange { background:linear-gradient(135deg, rgba(140,77,255,.92), rgba(255,79,216,.66)); border:1px solid rgba(232,191,115,.55); }
.btn__orange:hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(0,0,0,.55), 0 0 32px rgba(192,140,255,.38); }
.btn__white { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.35); }
.btn__white:hover { background:rgba(192,140,255,.14); transform:translateY(-2px); }
.btn__blurple { background:linear-gradient(135deg, rgba(88,101,242,.9), rgba(140,77,255,.8)); border:1px solid rgba(255,255,255,.25); display:inline-block; }
.btn__blurple:hover { transform:translateY(-2px); }

.section { padding:64px 10%; }
.fantasy-card, #trailer { max-width:1180px; margin:0 auto 36px; border:1px solid var(--fantasy-border); border-radius:24px; background:linear-gradient(180deg, rgba(22,12,38,.91), rgba(8,6,15,.93)); box-shadow:0 24px 60px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; position:relative; }
.fantasy-card:before, #trailer:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, rgba(192,140,255,.12), transparent 42%); pointer-events:none; }
.content, .support, .security { text-align:center; padding:26px 18px; }
#features { margin-top:50px; }
.feature-card { background:rgba(9,7,17,.58); box-shadow:0 0 20px rgba(0,0,0,.28) inset; border:1px solid rgba(192,140,255,.18); border-radius:18px; margin-bottom:16px; transition:.2s all; }
.feature-card:hover { transform:translateY(-4px); border-color:rgba(232,191,115,.42); }
.feature-card img { max-height:78px; margin-bottom:12px; filter:drop-shadow(0 0 12px rgba(140,77,255,.35)); }
.security { margin:0 15px 16px; }
.video-frame { border:1px solid rgba(192,140,255,.22); border-radius:18px; overflow:hidden; box-shadow:0 18px 45px rgba(0,0,0,.35); }
.video-details { text-align:right; padding:70px 20px; }
.discord-details { padding:60px 20px; }
.discord-img img { width:100%; filter:drop-shadow(0 0 26px rgba(140,77,255,.25)); }
.copyright { font-size:13px; padding:24px 10%; text-transform:uppercase; text-align:center; color:#bdb2d6; background:rgba(5,4,10,.82); border-top:1px solid rgba(192,140,255,.20); }

@media(max-width:991px){ .topbar-inner{display:block;text-align:center}.topbar-right{display:none} .video-details{text-align:left;padding:35px 5px}.discord-details{padding:35px 5px} }