/* ================================================
   SOULS SMP - PROFESSIONAL DESIGN SYSTEM
   ================================================ */

:root {
    --bg: #0a0610;
    --bg-card: rgba(255,255,255,.04);
    --bg-card-hover: rgba(255,255,255,.07);
    --border: rgba(255,255,255,.06);
    --border-hover: rgba(255,255,255,.12);
    --text: #fff;
    --text-dim: #888;
    --text-muted: #555;
    --accent: #ff6b9d;
    --accent-2: #c084fc;
    --gradient: linear-gradient(135deg, #ff6b9d, #c084fc);
    --cherry: #ffb7d5;
    --cherry-dark: #ff6b9d;
    --cherry-glow: rgba(255,107,157,.15);
    --radius: 16px;
    --radius-lg: 22px;
    --shadow: 0 20px 60px rgba(0,0,0,.3);
}

* { margin:0; padding:0; box-sizing:border-box; scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
section { padding:100px 8%; position:relative; }
::selection { background:#ff6b9d; color:#fff; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#0a0610; }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg, #ff6b9d, #c084fc); border-radius:20px; }

/* Background - Cherry Blossom Theme */
.background {
    position:fixed; inset:0; z-index:-3;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(255,183,213,.2) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 30%, rgba(192,132,252,.15) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(255,107,157,.18) 0%, transparent 45%),
        radial-gradient(ellipse at 30% 60%, rgba(255,183,213,.1) 0%, transparent 30%),
        linear-gradient(160deg, #0a0610 0%, #12081e 30%, #0f0a18 60%, #0a0610 100%);
    animation:bgShift 20s ease-in-out infinite alternate;
}
@keyframes bgShift {
    0% { background-position:0% 0%, 100% 0%, 50% 100%, 30% 60%, 0% 0%; }
    50% { background-position:20% 10%, 80% 20%, 60% 80%, 40% 50%, 0% 0%; }
    100% { background-position:10% 20%, 90% 10%, 40% 90%, 20% 70%, 0% 0%; }
}

#petalCanvas {
    position:fixed; inset:0; z-index:-2; pointer-events:none; width:100%; height:100%;
}

#mouseGlow {
    position:fixed; width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,107,157,.08) 0%, rgba(192,132,252,.04) 40%, transparent 70%);
    pointer-events:none; z-index:-1; transform:translate(-50%,-50%);
    transition:left .1s ease-out, top .1s ease-out;
    mix-blend-mode:screen;
}

/* ================================
   LOADER
   ================================ */
.loader {
    position:fixed; inset:0; z-index:99999;
    background:var(--bg); display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-content { text-align:center; }
.loader-logo { width:80px; margin:0 auto 24px; animation:loaderFloat 2s ease-in-out infinite; }
.loader-bar { width:200px; height:4px; border-radius:4px; background:rgba(255,255,255,.08); margin:0 auto 16px; overflow:hidden; }
.loader-fill { height:100%; width:0%; border-radius:4px; background:var(--gradient); animation:loaderFill 1.5s ease forwards; }
.loader-text { font-size:13px; color:var(--text-muted); font-weight:500; }
@keyframes loaderFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes loaderFill { 0%{width:0%;} 100%{width:100%;} }

/* ================================
   NAVBAR
   ================================ */
header {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(9,9,11,.6); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border); transition:.3s;
}
header.scrolled { background:rgba(9,9,11,.95); box-shadow:0 4px 30px rgba(0,0,0,.3); }
.navbar { max-width:1200px; margin:auto; padding:14px 8%; display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.5px; }
.logo img { width:40px; height:40px; border-radius:10px; }
.logo span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.navbar ul { display:flex; gap:4px; align-items:center; }
.navbar li a { padding:8px 16px; border-radius:10px; font-weight:500; font-size:14px; transition:.2s; color:#aaa; }
.navbar li a:hover, .navbar li a.active { color:#fff; background:rgba(255,255,255,.06); }
.nav-discord { background:var(--gradient)!important; color:#fff!important; font-weight:600!important; padding:8px 20px!important; border-radius:50px!important; }
.nav-discord:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(255,59,125,.3); }

/* ================================
   HERO
   ================================ */
.hero {
    position:relative; min-height:100vh; display:flex; align-items:center;
    overflow:hidden; padding:120px 0 80px;
}
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.05); }
.hero-overlay {
    position:absolute; inset:0; z-index:1;
    background:transparent;
}
.hero-container { position:relative; z-index:5; width:min(1200px,92%); margin:auto; display:grid; grid-template-columns:1fr 400px; gap:60px; align-items:center; }

/* Badge */
.hero-badge {
    display:inline-flex; align-items:center; gap:8px; padding:8px 18px;
    border-radius:50px; background:rgba(255,59,125,.1); border:1px solid rgba(255,59,125,.25);
    color:#ff6b9d; font-weight:700; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    margin-bottom:24px;
}

/* Title */
.hero h1 { font-size:clamp(44px,6vw,72px); font-weight:900; line-height:1; margin-bottom:12px; letter-spacing:-2px; }
.gradient { background:linear-gradient(135deg, #ffb7d5, #ff6b9d, #c084fc); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradMove 6s linear infinite; --glow-x:50%; filter:drop-shadow(0 0 20px rgba(255,107,157,.3)); }
.hero-subtitle { font-size:clamp(18px,2.5vw,26px); font-weight:600; color:#ddd; margin-bottom:12px; }
.hero-desc { font-size:15px; color:var(--text-dim); line-height:1.7; max-width:500px; margin-bottom:32px; }

/* Buttons */
.hero-buttons { display:flex; gap:12px; margin-bottom:48px; }
.btn-play, .btn-discord {
    padding:14px 28px; border:none; border-radius:12px; font-size:15px; font-weight:700;
    cursor:pointer; transition:.25s; font-family:'Inter',sans-serif; display:inline-flex; align-items:center; gap:8px;
}
.btn-play { background:linear-gradient(135deg, #ff6b9d, #c084fc); color:#fff; box-shadow:0 8px 30px rgba(255,107,157,.3); }
.btn-play:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(255,107,157,.4); }
.btn-discord { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; backdrop-filter:blur(10px); }
.btn-discord:hover { background:#5865F2; border-color:#5865F2; transform:translateY(-3px); }

/* Live Stats */
.live-stats { display:flex; gap:32px; }
.live-stat { display:flex; align-items:center; gap:10px; }
.live-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.live-dot.green { background:#22c55e; box-shadow:0 0 8px #22c55e; animation:pulse 2s infinite; }
.live-dot.purple { background:#7c3aed; box-shadow:0 0 8px #7c3aed; animation:pulse 2s infinite; }
.live-dot.blue { background:#3b82f6; box-shadow:0 0 8px #3b82f6; animation:pulse 2s infinite; }
.live-value { font-size:18px; font-weight:800; display:block; line-height:1.2; }
.live-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }

/* Hero Card */
.hero-right { display:flex; justify-content:center; }
.hero-card {
    width:100%; padding:24px; border-radius:var(--radius-lg);
    background:rgba(255,255,255,.04); backdrop-filter:blur(20px);
    border:1px solid rgba(255,183,213,.1); box-shadow:var(--shadow), 0 0 40px rgba(255,107,157,.06);
    transition:.3s; animation:floatCard 6s ease-in-out infinite;
}
.hero-card:hover { transform:translateY(-6px); border-color:rgba(255,183,213,.2); box-shadow:var(--shadow), 0 0 60px rgba(255,107,157,.1); }
.hc-header { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hc-server-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,59,125,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.hc-server-icon img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.hc-server-icon i { color:var(--accent); font-size:18px; }
.hc-status-text { flex:1; }
.hc-status { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:2px; }
.hc-status-text strong { font-size:16px; display:block; }
.hc-badge { padding:4px 12px; border-radius:50px; background:rgba(34,197,94,.1); color:#22c55e; font-size:10px; font-weight:800; letter-spacing:1px; flex-shrink:0; }
.hc-players-row { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.04); margin-bottom:14px; }
.hc-players { font-size:22px; font-weight:800; color:#22c55e; }
.hc-players-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.hc-divider { height:1px; background:var(--border); margin-bottom:14px; }
.hc-info { margin-bottom:14px; }
.hc-players-list { margin-bottom:0; }
.hc-names { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.hc-name { padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.05); font-size:11px; color:var(--text-dim); font-weight:500; }
.hc-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
.hc-row span:first-child { color:var(--text-muted); }
.hc-row span:last-child { font-weight:600; }
.hc-copy {
    display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
    background:rgba(255,59,125,.08); border:1px solid rgba(255,59,125,.15);
    cursor:pointer; transition:.2s; font-family:monospace; font-size:14px; font-weight:600;
}
.hc-copy:hover { background:rgba(255,59,125,.15); }
.hc-copy i { color:var(--accent); }
.hc-copy span:first-of-type { flex:1; color:#ffd5e6; }
.hc-copy-btn { padding:4px 12px; border-radius:8px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; font-family:'Inter',sans-serif; }

/* ================================
   NETWORK STATS BAR
   ================================ */
.network-bar { padding:0 8%; margin-top:-50px; position:relative; z-index:10; }
.nb-container {
    max-width:1100px; margin:auto; display:flex; align-items:center; justify-content:center;
    padding:28px 40px; border-radius:var(--radius-lg);
    background:linear-gradient(135deg, rgba(255,59,125,.08), rgba(124,58,237,.08));
    border:1px solid rgba(255,59,125,.15); backdrop-filter:blur(20px);
    box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.nb-item { display:flex; align-items:center; gap:12px; padding:0 24px; }
.nb-item i { font-size:20px; color:var(--accent); opacity:.7; }
.nb-value { font-size:18px; font-weight:800; display:block; }
.nb-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px; }
.nb-divider { width:1px; height:40px; background:rgba(255,255,255,.08); }

/* ================================
   SECTION HEADER
   ================================ */
.section-header { text-align:center; margin-bottom:60px; }
.section-tag {
    display:inline-block; padding:6px 16px; border-radius:50px;
    background:rgba(255,59,125,.08); border:1px solid rgba(255,59,125,.15);
    font-size:11px; font-weight:700; letter-spacing:2px; color:var(--accent);
    text-transform:uppercase; margin-bottom:16px;
}
.section-header h2 { font-size:clamp(30px,4vw,44px); font-weight:800; margin-bottom:12px; letter-spacing:-1px; }
.section-header p { max-width:550px; margin:auto; color:var(--text-dim); font-size:15px; line-height:1.7; }

/* ================================
   FEATURES
   ================================ */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:auto; }
.feature-card {
    background:var(--bg-card); border:1px solid var(--border); padding:36px 28px;
    border-radius:var(--radius-lg); text-align:center; transition:.3s; position:relative; overflow:hidden;
}
.feature-card::before {
    content:""; position:absolute; top:-60px; right:-60px; width:140px; height:140px;
    background:rgba(255,59,125,.06); border-radius:50%; transition:.4s;
}
.feature-card:hover::before { transform:scale(1.5); }
.feature-card:hover { transform:translateY(-8px); border-color:rgba(255,107,157,.2); box-shadow:0 20px 50px rgba(255,107,157,.1), 0 0 30px rgba(255,183,213,.05); }
.feature-icon { width:52px; height:52px; margin:0 auto 18px; border-radius:14px; background:rgba(255,59,125,.1); display:flex; align-items:center; justify-content:center; }
.feature-icon i { font-size:22px; color:var(--accent); }
.feature-card h3 { font-size:18px; margin-bottom:8px; font-weight:700; }
.feature-card p { color:var(--text-dim); font-size:13px; line-height:1.7; }

/* ================================
   GAMEMODES
   ================================ */
.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:auto; }
.mode-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:36px 28px; transition:.3s; position:relative; overflow:hidden;
}
.mode-card::after { content:""; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--accent); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.mode-card:hover { transform:translateY(-8px); border-color:var(--border-hover); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.mode-icon { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--accent); margin-bottom:18px; }
.mode-card h3 { font-size:20px; margin-bottom:10px; }
.mode-card p { color:var(--text-dim); font-size:13px; line-height:1.7; margin-bottom:18px; }
.mode-tags { display:flex; gap:6px; flex-wrap:wrap; }
.mode-tags span { padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.05); font-size:11px; color:#999; font-weight:600; }

/* ================================
   SERVER STATUS
   ================================ */
.server-status { padding:60px 8%; }
.status-card {
    max-width:800px; margin:auto; padding:32px; border-radius:var(--radius-lg);
    background:linear-gradient(145deg, rgba(30,15,28,.9), rgba(12,10,20,.95));
    border:1px solid rgba(255,143,196,.15); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.status-card::before { content:""; position:absolute; width:250px; height:250px; right:-120px; top:-120px; border-radius:50%; background:radial-gradient(circle, rgba(255,59,125,.15), transparent 70%); pointer-events:none; }
.sc-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.sc-header-left { display:flex; align-items:center; gap:12px; }
.sc-server-icon { width:36px; height:36px; border-radius:10px; border:2px solid rgba(255,59,125,.2); }
.sc-header h2 { font-size:16px; letter-spacing:1.5px; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.sc-header h2 i { color:var(--accent); }
.sc-live { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#22c55e; padding:6px 14px; border-radius:50px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); }
.status-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.status-box {
    padding:18px; border-radius:14px;
    background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.06); transition:.25s;
}
.status-box:hover { transform:translateY(-3px); border-color:rgba(255,59,125,.2); }
.sb-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; display:block; margin-bottom:8px; }
.status-box p { font-size:17px; font-weight:700; }
.online { display:flex; align-items:center; gap:6px; color:#22c55e; }
.online-dot { width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px #22c55e; animation:pulse 2s infinite; }
.ip-box {
    display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
    border-radius:14px; background:rgba(255,59,125,.06); border:1px solid rgba(255,59,125,.12);
}
.ip-box span { font-family:monospace; font-size:15px; font-weight:700; color:#ffd5e6; }
#copy-ip {
    border:none; padding:10px 18px; border-radius:10px;
    background:var(--gradient); color:#fff; font-weight:700; cursor:pointer;
    transition:.2s; font-family:'Inter',sans-serif; font-size:13px; display:flex; align-items:center; gap:6px;
}
#copy-ip:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,59,125,.3); }

/* ================================
   RANKS
   ================================ */
.rank-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:auto; }
.rank {
    background:var(--bg-card); border:1px solid var(--border); padding:36px 28px;
    text-align:center; border-radius:var(--radius-lg); transition:.3s; position:relative; overflow:hidden;
}
.rank::after { content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); transition:.6s; }
.rank:hover::after { left:100%; }
.rank:hover { transform:translateY(-6px); border-color:var(--border-hover); }
.rank h2 { font-size:26px; margin-bottom:8px; }
.rank h3 { font-size:30px; margin-bottom:20px; }
.rank .buy-btn, .rank button {
    padding:10px 28px; border:none; border-radius:50px; font-size:13px; font-weight:700;
    cursor:pointer; background:var(--accent); color:#fff; transition:.2s; font-family:'Inter',sans-serif;
}
.rank .buy-btn:hover, .rank button:hover { transform:scale(1.05); box-shadow:0 8px 25px rgba(255,59,125,.3); }
.btn-view-store {
    display:inline-flex; align-items:center; gap:8px; padding:14px 32px;
    border-radius:12px; background:var(--gradient); color:#fff; font-weight:700; font-size:15px;
    transition:.25s;
}
.btn-view-store:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(255,59,125,.3); }
.vip { border-top:3px solid #64ff80; }
.elite { border-top:3px solid #43b8ff; }
.titan { border-top:3px solid #ffd54d; }
.god { border-top:3px solid #6b6bff; }
.immortal { border-top:3px solid #ff4040; }
.souls { border-top:3px solid #ff4fcf; }

/* ================================
   NEWS
   ================================ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1100px; margin:auto; }
.news-card {
    background:var(--bg-card); padding:32px; border-radius:var(--radius-lg);
    border:1px solid var(--border); transition:.3s;
}
.news-card:hover { transform:translateY(-6px); border-color:rgba(255,59,125,.2); }
.news-card h3 { font-size:20px; margin-bottom:10px; }
.news-card p { color:var(--text-dim); font-size:13px; line-height:1.7; }

/* ================================
   FAQ
   ================================ */
.faq-container { max-width:750px; margin:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:.25s; }
.faq-item:hover { border-color:rgba(255,59,125,.15); }
.faq-question { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; cursor:pointer; }
.faq-question h3 { font-size:15px; font-weight:600; }
.faq-question i { color:var(--text-muted); font-size:12px; transition:.3s; }
.faq-item.active .faq-question i { transform:rotate(180deg); color:var(--accent); }
.faq-answer { max-height:0; overflow:hidden; transition:.35s ease; padding:0 24px; }
.faq-item.active .faq-answer { max-height:200px; padding:0 24px 20px; }
.faq-answer p { color:var(--text-dim); font-size:13px; line-height:1.7; }

/* ================================
   DISCORD CTA
   ================================ */
.discord-cta { padding:80px 8%; }
.discord-card {
    max-width:700px; margin:auto; text-align:center; position:relative;
    background:linear-gradient(135deg, #ff6b9d, #c084fc);
    padding:60px 40px; border-radius:var(--radius-lg); overflow:hidden;
    box-shadow:0 25px 70px rgba(255,107,157,.25);
}
.dc-glow { position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(255,255,255,.06),transparent 60%); pointer-events:none; }
.dc-icon { font-size:52px; margin-bottom:14px; position:relative; }
.discord-card h2 { font-size:clamp(26px,4vw,38px); margin-bottom:8px; position:relative; }
.dc-members { font-size:14px; color:rgba(255,255,255,.7); margin-bottom:12px; position:relative; font-weight:600; }
.discord-card > p:last-of-type { font-size:15px; line-height:1.7; margin-bottom:28px; color:rgba(255,255,255,.85); position:relative; }
.dc-button {
    display:inline-flex; align-items:center; gap:8px; padding:14px 36px;
    background:#fff; color:#ff2d6f; font-weight:700; border-radius:50px;
    transition:.25s; font-size:15px; position:relative;
}
.dc-button:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.2); }

/* ================================
   FOOTER
   ================================ */
.footer { background:#060608; border-top:1px solid var(--border); padding-top:60px; }
.footer-container { max-width:1200px; margin:auto; padding:0 8%; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-brand img { width:50px; margin-bottom:14px; border-radius:10px; }
.footer-brand h2 { font-size:24px; margin-bottom:10px; }
.footer-brand p { color:var(--text-muted); font-size:13px; line-height:1.7; margin-bottom:16px; }
.footer-social-row { display:flex; gap:10px; }
.fs-link { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; transition:.2s; color:#888; font-size:16px; }
.fs-link:hover { background:var(--accent); color:#fff; transform:translateY(-2px); }
.footer h3 { margin-bottom:16px; font-size:16px; font-weight:700; }
.footer-links, .footer-community { display:flex; flex-direction:column; gap:10px; }
.footer-links a { color:var(--text-dim); font-size:13px; transition:.2s; }
.footer-links a:hover { color:var(--accent); padding-left:4px; }
.footer-server p, .footer-community p { color:var(--text-dim); font-size:13px; margin-bottom:8px; }
.footer-bottom { margin-top:50px; padding:20px; text-align:center; border-top:1px solid var(--border); color:var(--text-muted); font-size:12px; }

/* ================================
   SCROLL TO TOP
   ================================ */
#scrollTop {
    position:fixed; right:24px; bottom:24px; width:46px; height:46px;
    border:none; border-radius:50%; background:linear-gradient(135deg, #ff6b9d, #c084fc); color:#fff;
    font-size:16px; cursor:pointer; opacity:0; visibility:hidden; transition:.3s;
    z-index:999; box-shadow:0 8px 25px rgba(255,107,157,.3);
}
#scrollTop.show { opacity:1; visibility:visible; }
#scrollTop:hover { transform:translateY(-3px); }

/* Toast */
#toast {
    position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
    background:linear-gradient(135deg, #ff6b9d, #c084fc); padding:12px 28px; border-radius:12px;
    font-weight:600; color:#fff; font-size:13px; opacity:0; pointer-events:none;
    transition:.35s; z-index:9999; box-shadow:0 10px 30px rgba(255,59,125,.3);
}
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ================================
   ANIMATIONS
   ================================ */
@keyframes gradMove { 0%{background-position:0%;} 100%{background-position:200%;} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.7;transform:scale(1.3);} }
@keyframes floatCard { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes scrollAnim { 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(8px);} }

/* Scroll reveal */
.feature-card, .mode-card, .rank, .news-card, .status-card, .discord-card, .nb-container, .faq-item {
    opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease;
}
.feature-card.visible, .mode-card.visible, .rank.visible, .news-card.visible, .status-card.visible, .discord-card.visible, .nb-container.visible, .faq-item.visible {
    opacity:1; transform:translateY(0);
}

/* Stagger */
.feature-card:nth-child(1),.mode-card:nth-child(1){transition-delay:.05s;}
.feature-card:nth-child(2),.mode-card:nth-child(2){transition-delay:.12s;}
.feature-card:nth-child(3),.mode-card:nth-child(3){transition-delay:.19s;}
.feature-card:nth-child(4){transition-delay:.26s;}
.feature-card:nth-child(5){transition-delay:.33s;}
.feature-card:nth-child(6){transition-delay:.4s;}

/* ================================
   RESPONSIVE
   ================================ */
@media(max-width:1100px){
    .hero-container{grid-template-columns:1fr;gap:40px;}
    .hero-right{display:none;}
    .live-stats{justify-content:center;flex-wrap:wrap;}
    .hero-buttons,.hero-desc{margin-left:auto;margin-right:auto;}
    .hero-left{text-align:center;}
    .nb-container{flex-wrap:wrap;gap:20px;}
    .nb-divider{display:none;}
    .feature-grid,.mode-grid,.rank-grid,.news-grid{grid-template-columns:repeat(2,1fr);}
    .footer-container{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    section{padding:70px 6%;}
    .navbar ul{display:none;}
    .section-header h2{font-size:28px;}
    .feature-grid,.mode-grid,.rank-grid,.news-grid,.stats,.status-grid{grid-template-columns:1fr;}
    .discord-card{padding:40px 24px;}
    .footer-container{grid-template-columns:1fr;text-align:center;}
    .footer-social-row{justify-content:center;}
    .nb-container{flex-direction:column;align-items:flex-start;}
}
@media(max-width:480px){
    .hero{padding-top:100px;}
    .hero h1{font-size:36px;}
    .hero-buttons{flex-direction:column;}
    .btn-play,.btn-discord{width:100%;justify-content:center;}
    .live-stats{flex-direction:column;gap:16px;align-items:center;}
}