/* =====================================================
   ALTERNATE UNIVERSE — SCPSL Platform
   Complete Design System
   ===================================================== */

/* ---- THEME DEFINITIONS ---- */
[data-theme="void"] {
    --clr-bg:        #07070f;
    --clr-bg2:       #0d0d1c;
    --clr-card:      #0f0f20;
    --clr-card-b:    #161628;
    --clr-accent:    #7c3aed;
    --clr-accent2:   #a78bfa;
    --clr-accent3:   #c4b5fd;
    --clr-glow:      rgba(124,58,237,0.35);
    --clr-glow2:     rgba(124,58,237,0.12);
    --clr-border:    rgba(124,58,237,0.25);
    --clr-border2:   rgba(124,58,237,0.5);
    --grad-accent:   linear-gradient(135deg,#7c3aed,#a78bfa);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(124,58,237,0.15) 0%,transparent 60%);
    --particle-clr:  124,58,237;
    --loader-clr:    #7c3aed;
}
[data-theme="cyber"] {
    --clr-bg:        #050d14;
    --clr-bg2:       #091520;
    --clr-card:      #0a1828;
    --clr-card-b:    #0e2035;
    --clr-accent:    #0ea5e9;
    --clr-accent2:   #38bdf8;
    --clr-accent3:   #7dd3fc;
    --clr-glow:      rgba(14,165,233,0.35);
    --clr-glow2:     rgba(14,165,233,0.1);
    --clr-border:    rgba(14,165,233,0.25);
    --clr-border2:   rgba(14,165,233,0.5);
    --grad-accent:   linear-gradient(135deg,#0ea5e9,#38bdf8);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(14,165,233,0.15) 0%,transparent 60%);
    --particle-clr:  14,165,233;
    --loader-clr:    #0ea5e9;
}
[data-theme="neon"] {
    --clr-bg:        #020f09;
    --clr-bg2:       #051a0f;
    --clr-card:      #071a0f;
    --clr-card-b:    #0a2218;
    --clr-accent:    #10b981;
    --clr-accent2:   #34d399;
    --clr-accent3:   #6ee7b7;
    --clr-glow:      rgba(16,185,129,0.35);
    --clr-glow2:     rgba(16,185,129,0.1);
    --clr-border:    rgba(16,185,129,0.25);
    --clr-border2:   rgba(16,185,129,0.5);
    --grad-accent:   linear-gradient(135deg,#10b981,#34d399);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(16,185,129,0.12) 0%,transparent 60%);
    --particle-clr:  16,185,129;
    --loader-clr:    #10b981;
}
[data-theme="crimson"] {
    --clr-bg:        #0f0505;
    --clr-bg2:       #190808;
    --clr-card:      #1a0808;
    --clr-card-b:    #220c0c;
    --clr-accent:    #ef4444;
    --clr-accent2:   #f87171;
    --clr-accent3:   #fca5a5;
    --clr-glow:      rgba(239,68,68,0.35);
    --clr-glow2:     rgba(239,68,68,0.1);
    --clr-border:    rgba(239,68,68,0.25);
    --clr-border2:   rgba(239,68,68,0.5);
    --grad-accent:   linear-gradient(135deg,#ef4444,#f87171);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(239,68,68,0.12) 0%,transparent 60%);
    --particle-clr:  239,68,68;
    --loader-clr:    #ef4444;
}
[data-theme="solar"] {
    --clr-bg:        #0d0700;
    --clr-bg2:       #180d00;
    --clr-card:      #1a0e00;
    --clr-card-b:    #231400;
    --clr-accent:    #f97316;
    --clr-accent2:   #fb923c;
    --clr-accent3:   #fdba74;
    --clr-glow:      rgba(249,115,22,0.35);
    --clr-glow2:     rgba(249,115,22,0.1);
    --clr-border:    rgba(249,115,22,0.25);
    --clr-border2:   rgba(249,115,22,0.5);
    --grad-accent:   linear-gradient(135deg,#f97316,#fb923c);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(249,115,22,0.15) 0%,transparent 60%);
    --particle-clr:  249,115,22;
    --loader-clr:    #f97316;
}
[data-theme="aurora"] {
    --clr-bg:        #0f050f;
    --clr-bg2:       #190819;
    --clr-card:      #1a0a1a;
    --clr-card-b:    #220d22;
    --clr-accent:    #ec4899;
    --clr-accent2:   #f472b6;
    --clr-accent3:   #f9a8d4;
    --clr-glow:      rgba(236,72,153,0.35);
    --clr-glow2:     rgba(236,72,153,0.1);
    --clr-border:    rgba(236,72,153,0.25);
    --clr-border2:   rgba(236,72,153,0.5);
    --grad-accent:   linear-gradient(135deg,#ec4899,#f472b6);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(236,72,153,0.15) 0%,transparent 60%);
    --particle-clr:  236,72,153;
    --loader-clr:    #ec4899;
}
[data-theme="arctic"] {
    --clr-bg:        #020c10;
    --clr-bg2:       #05141c;
    --clr-card:      #071620;
    --clr-card-b:    #0a1e2c;
    --clr-accent:    #06b6d4;
    --clr-accent2:   #22d3ee;
    --clr-accent3:   #67e8f9;
    --clr-glow:      rgba(6,182,212,0.35);
    --clr-glow2:     rgba(6,182,212,0.1);
    --clr-border:    rgba(6,182,212,0.25);
    --clr-border2:   rgba(6,182,212,0.5);
    --grad-accent:   linear-gradient(135deg,#06b6d4,#22d3ee);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(6,182,212,0.15) 0%,transparent 60%);
    --particle-clr:  6,182,212;
    --loader-clr:    #06b6d4;
}
[data-theme="gold"] {
    --clr-bg:        #0c0800;
    --clr-bg2:       #170f00;
    --clr-card:      #1a1100;
    --clr-card-b:    #221700;
    --clr-accent:    #f59e0b;
    --clr-accent2:   #fbbf24;
    --clr-accent3:   #fcd34d;
    --clr-glow:      rgba(245,158,11,0.35);
    --clr-glow2:     rgba(245,158,11,0.1);
    --clr-border:    rgba(245,158,11,0.25);
    --clr-border2:   rgba(245,158,11,0.5);
    --grad-accent:   linear-gradient(135deg,#f59e0b,#fbbf24);
    --grad-hero:     radial-gradient(ellipse at 60% 40%,rgba(245,158,11,0.15) 0%,transparent 60%);
    --particle-clr:  245,158,11;
    --loader-clr:    #f59e0b;
}


/* ---- GLOBALS ---- */
:root {
    --clr-text:      #f1f5f9;
    --clr-text2:     #94a3b8;
    --clr-text3:     #475569;
    --clr-green:     #10b981;
    --clr-red:       #ef4444;
    --radius:        12px;
    --radius-lg:     18px;
    --transition:    all .3s cubic-bezier(.4,0,.2,1);
    --font-head:     'Orbitron', monospace;
    --font-body:     'Inter', sans-serif;
    --font-mono:     'Share Tech Mono', monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;max-width:100vw;}
body{
    font-family:var(--font-body);
    background:var(--clr-bg);
    color:var(--clr-text);
    overflow-x:hidden;
    max-width:100vw;
    min-height:100vh;
    transition:background .4s ease,color .4s ease;
}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--clr-bg);}
::-webkit-scrollbar-thumb{background:var(--clr-accent);border-radius:3px;}
::selection{background:var(--clr-glow);color:#fff;}

/* ---- LOADER ---- */
#loader{
    position:fixed;inset:0;z-index:9999;
    background:var(--clr-bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease, visibility .6s ease;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-inner{text-align:center;}
.loader-logo{
    font-family:var(--font-head);
    font-size:3rem;font-weight:900;
    margin-bottom:2rem;letter-spacing:4px;
    animation:loader-pulse 1.5s ease-in-out infinite;
}
.loader-bracket{color:var(--clr-text3);}
.loader-au{color:var(--clr-accent);}
@keyframes loader-pulse{
    0%,100%{opacity:1;text-shadow:0 0 20px var(--clr-glow);}
    50%{opacity:.6;text-shadow:none;}
}
.loader-bar-wrap{
    width:200px;height:2px;
    background:rgba(255,255,255,.08);
    border-radius:2px;margin:0 auto 1.2rem;overflow:hidden;
}
.loader-bar{
    height:100%;width:0;
    background:var(--grad-accent);
    border-radius:2px;
    transition:width .1s linear;
}
.loader-label{
    font-family:var(--font-mono);
    font-size:.65rem;letter-spacing:3px;
    color:var(--clr-text3);
}

/* ---- CANVAS & NOISE ---- */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
.noise-overlay{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:200px 200px;
}

/* ---- BACK TO TOP ---- */
#back-to-top{
    position:fixed;bottom:5rem;right:1.5rem;z-index:90;
    width:42px;height:42px;border-radius:10px;border:1px solid var(--clr-border2);
    background:var(--clr-card);color:var(--clr-accent2);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    opacity:0;pointer-events:none;
    transition:var(--transition);box-shadow:0 4px 20px var(--clr-glow2);
}
#back-to-top.show{opacity:1;pointer-events:all;}
#back-to-top:hover{background:var(--clr-accent);color:#fff;transform:translateY(-3px);}

/* ---- NAVBAR ---- */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(7,7,15,.7);
    backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:var(--transition);
}
.navbar.scrolled{
    background:rgba(7,7,15,.92);
    border-bottom-color:var(--clr-border);
    box-shadow:0 4px 30px rgba(0,0,0,.4);
}
.nav-inner{
    max-width:1280px;margin:0 auto;padding:0 2rem;
    height:68px;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
    display:flex;align-items:center;gap:3px;
    font-family:var(--font-head);font-size:1.25rem;font-weight:900;
    text-decoration:none;color:var(--clr-text);letter-spacing:2px;
    flex-shrink:0;
}
.logo-bracket{color:var(--clr-text3);font-weight:400;}
.logo-text{background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-sub{
    font-size:.6rem;letter-spacing:3px;color:var(--clr-text3);
    align-self:flex-end;padding-bottom:3px;margin-left:2px;font-weight:400;
}
.nav-links{
    display:flex;align-items:center;list-style:none;gap:.25rem;
}
.nav-link{
    padding:.45rem .9rem;color:var(--clr-text2);text-decoration:none;
    font-size:.875rem;font-weight:500;letter-spacing:.5px;
    border-radius:8px;transition:var(--transition);border:1px solid transparent;
    position:relative;
}
.nav-link::after{
    content:'';position:absolute;bottom:4px;left:50%;right:50%;
    height:1px;background:var(--clr-accent);
    transition:left .2s ease,right .2s ease;
}
.nav-link:hover,.nav-link.active{color:var(--clr-text);}
.nav-link:hover::after,.nav-link.active::after{left:20%;right:20%;}
.nav-actions{display:flex;align-items:center;gap:.75rem;}
.btn-discord{
    display:flex;align-items:center;gap:7px;
    padding:.5rem 1.1rem;
    background:rgba(88,101,242,.12);
    border:1px solid rgba(88,101,242,.35);
    color:#7289da;border-radius:9px;text-decoration:none;
    font-size:.875rem;font-weight:600;transition:var(--transition);
}
.btn-discord:hover{background:rgba(88,101,242,.25);border-color:#7289da;color:#fff;box-shadow:0 0 20px rgba(88,101,242,.3);}
.nav-progress{
    position:absolute;bottom:0;left:0;height:2px;width:0;
    background:var(--grad-accent);transition:width .05s linear;
}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--clr-accent2);transition:var(--transition);border-radius:2px;}

/* Mobile menu */
.mobile-menu{
    position:fixed;top:68px;left:0;right:0;z-index:99;
    background:rgba(7,7,15,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--clr-border);
    display:flex;flex-direction:column;padding:.75rem;gap:.25rem;
    transform:translateY(-100%);opacity:0;
    transition:transform .3s ease,opacity .3s ease;pointer-events:none;
}
.mobile-menu.open{transform:translateY(0);opacity:1;pointer-events:all;}
.mob-link{
    padding:.8rem 1rem;color:var(--clr-text2);text-decoration:none;
    font-size:.95rem;border-radius:8px;transition:var(--transition);
    font-weight:500;
}
.mob-link:hover,.mob-discord{color:var(--clr-text);}
.mob-discord{color:#7289da!important;}

/* ---- HERO ---- */
.hero{
    position:relative;z-index:2;
    min-height:100vh;
    display:flex;align-items:center;justify-content:space-between;
    padding:110px 2rem 5rem;
    max-width:1280px;margin:0 auto;gap:3rem;
    overflow:hidden;
}
.hero-bg-glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}
.glow-1{width:500px;height:500px;left:-10%;top:10%;background:var(--clr-glow2);animation:drift1 12s ease-in-out infinite;}
.glow-2{width:400px;height:400px;right:-5%;bottom:20%;background:var(--clr-glow2);animation:drift2 15s ease-in-out infinite;}
.glow-3{width:300px;height:300px;left:40%;top:50%;background:rgba(var(--particle-clr),.04);animation:drift1 18s ease-in-out infinite reverse;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,-15px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-15px,20px);}}

.hero-content{flex:1;max-width:640px;z-index:2;}
.reveal-hero{animation:heroIn .9s cubic-bezier(.22,1,.36,1) forwards;}
@keyframes heroIn{from{opacity:0;transform:translateY(50px);}to{opacity:1;transform:none;}}

.hero-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:3px;
    color:var(--clr-accent2);margin-bottom:1.5rem;
    border:1px solid var(--clr-border);background:var(--clr-glow2);
    padding:.4rem 1rem;border-radius:100px;
}
.eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--clr-accent);display:inline-block;animation:pulseDot 2s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.3);}}

.hero-title{font-family:var(--font-head);line-height:1.05;margin-bottom:1.25rem;user-select:none;}
.hero-title-alt{
    display:block;font-weight:900;
    font-size:clamp(3.2rem,7vw,5.5rem);letter-spacing:4px;
    background:var(--grad-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-title-uni{
    display:block;font-weight:300;
    font-size:clamp(1.6rem,3.5vw,2.8rem);letter-spacing:14px;
    color:var(--clr-text2);margin-top:.2rem;
}
.hero-subtitle{
    font-size:1.15rem;color:var(--clr-text2);margin-bottom:2.5rem;
    font-weight:300;letter-spacing:.5px;line-height:1.6;
    word-break:break-word;overflow-wrap:break-word;max-width:100%;
}
.typewriter{
    color:var(--clr-accent2);font-weight:600;
    border-right:2px solid var(--clr-accent);
    padding-right:2px;
    animation:cursor-blink .8s step-end infinite;
}
@keyframes cursor-blink{0%,100%{border-color:var(--clr-accent);}50%{border-color:transparent;}}

.hero-stats-strip{
    display:flex;align-items:center;gap:0;
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius);padding:.2rem 0;margin-bottom:2.5rem;
    overflow:hidden;
}
.hstat{flex:1;text-align:center;padding:.9rem .5rem;}
.hstat-val{
    font-family:var(--font-head);font-size:1.5rem;font-weight:700;
    color:var(--clr-accent2);
}
.hstat-unit{font-family:var(--font-head);font-size:.9rem;color:var(--clr-accent2);}
.hstat-lbl{display:block;font-size:.72rem;color:var(--clr-text3);letter-spacing:1.5px;margin-top:2px;text-transform:uppercase;font-family:var(--font-mono);}
.hstat-divider{width:1px;height:40px;background:var(--clr-border);flex-shrink:0;}

.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;width:100%;max-width:100%;}

/* ---- HERO VISUAL ---- */
.hero-visual{flex-shrink:0;display:flex;align-items:center;justify-content:center;z-index:2;}
.orbit-system{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center;}
.orbit{
    position:absolute;border-radius:50%;
    border:1px solid var(--clr-border);
}
.orbit-1{width:300px;height:300px;animation:spin-slow 25s linear infinite;}
.orbit-2{width:220px;height:220px;animation:spin-slow 18s linear infinite reverse;}
.orbit-3{width:140px;height:140px;animation:spin-slow 12s linear infinite;}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.orbit-node{
    width:10px;height:10px;border-radius:50%;
    background:var(--clr-accent);
    box-shadow:0 0 12px var(--clr-accent);
    position:absolute;top:-5px;left:50%;margin-left:-5px;
}

.core-badge{
    width:90px;height:90px;border-radius:50%;
    border:2px solid var(--clr-accent);
    background:radial-gradient(circle,var(--clr-glow2) 0%,var(--clr-bg) 70%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 40px var(--clr-glow),inset 0 0 20px var(--clr-glow2);
    animation:core-pulse 3s ease-in-out infinite;
    z-index:1;
}
@keyframes core-pulse{
    0%,100%{box-shadow:0 0 30px var(--clr-glow),inset 0 0 20px var(--clr-glow2);}
    50%{box-shadow:0 0 60px var(--clr-glow),inset 0 0 30px var(--clr-glow2);}
}
.core-inner{text-align:center;}
.core-label{display:block;font-family:var(--font-head);font-size:.85rem;font-weight:700;color:var(--clr-accent2);letter-spacing:2px;}
.core-sub{display:block;font-family:var(--font-mono);font-size:.4rem;color:var(--clr-text3);letter-spacing:2px;margin-top:2px;}

/* Scroll cue */
.scroll-cue{
    position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
    color:var(--clr-text3);animation:bounce 2s ease-in-out infinite;
    z-index:2;display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    border:1px solid rgba(255,255,255,.1);
    transition:var(--transition);
}
.scroll-cue:hover{color:var(--clr-accent2);border-color:var(--clr-border2);}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(6px);}}

/* ---- CONTAINER ---- */
.container{max-width:1200px;margin:0 auto;padding:0 2rem;}

/* ---- SECTION COMMON ---- */
.section{position:relative;z-index:2;padding:6rem 0;}
.section-head{text-align:center;margin-bottom:3.5rem;}
.section-tag{
    display:inline-block;
    font-family:var(--font-mono);font-size:.68rem;letter-spacing:4px;
    color:var(--clr-accent2);
    border:1px solid var(--clr-border);background:var(--clr-glow2);
    padding:.35rem 1rem;border-radius:100px;margin-bottom:1rem;
}
.section-title{
    font-family:var(--font-head);
    font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:700;
    letter-spacing:2px;text-transform:uppercase;margin-bottom:.8rem;
    background:linear-gradient(180deg,var(--clr-text) 0%,var(--clr-text2) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.section-sub{color:var(--clr-text2);font-size:1rem;font-weight:300;max-width:520px;margin:0 auto;line-height:1.6;}

/* ---- BUTTONS ---- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:.85rem 1.8rem;border-radius:10px;
    font-weight:600;font-size:.95rem;letter-spacing:.5px;
    text-decoration:none;border:none;cursor:pointer;
    transition:var(--transition);position:relative;overflow:hidden;
}
.btn::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.1),transparent);
    opacity:0;transition:opacity .3s;
}
.btn:hover::before{opacity:1;}
.btn-primary{
    background:var(--grad-accent);color:#fff;
    box-shadow:0 4px 24px var(--clr-glow);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 36px var(--clr-glow);}
.btn-ghost{
    background:rgba(255,255,255,.05);color:var(--clr-text2);
    border:1px solid rgba(255,255,255,.1);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:var(--clr-text);transform:translateY(-2px);}

/* ---- SERVERS ---- */
.servers-section{
    background:linear-gradient(180deg,transparent 0%,var(--clr-glow2) 50%,transparent 100%);
}
.servers-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:1.5rem;margin-bottom:2rem;
}
.server-skeleton{
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius-lg);padding:2rem;
    animation:skeleton 1.5s ease-in-out infinite;
}
@keyframes skeleton{
    0%,100%{opacity:.4;}50%{opacity:.7;}
}
.skel-line{height:12px;border-radius:6px;background:var(--clr-border);margin-bottom:.8rem;}
.skel-line.short{width:60%;}

/* Server Card */
.server-card{
    background:var(--clr-card);
    border:1px solid var(--clr-border);
    border-radius:var(--radius-lg);
    overflow:hidden;transition:var(--transition);
    position:relative;
    animation:cardIn .5s cubic-bezier(.22,1,.36,1) forwards;
    opacity:0;transform:translateY(20px);
}
.server-card:nth-child(1){animation-delay:.05s;}
.server-card:nth-child(2){animation-delay:.15s;}
.server-card:nth-child(3){animation-delay:.25s;}
@keyframes cardIn{to{opacity:1;transform:none;}}

.server-card::after{
    content:'';position:absolute;inset:0;border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--clr-glow2) 0%,transparent 60%);
    opacity:0;transition:opacity .3s;pointer-events:none;
}
.server-card:hover{
    border-color:var(--clr-border2);
    transform:translateY(-8px) scale(1.01);
    box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 40px var(--clr-glow2);
}
.server-card:hover::after{opacity:1;}

.sc-top-bar{
    height:3px;
    background:linear-gradient(90deg,transparent,var(--clr-accent),transparent);
}
.server-card.sc-online .sc-top-bar{background:linear-gradient(90deg,transparent,var(--clr-green),transparent);}
.server-card.sc-offline .sc-top-bar{background:linear-gradient(90deg,transparent,var(--clr-red),transparent);}

.sc-header{
    padding:1.5rem 1.5rem 1rem;
    display:flex;justify-content:space-between;align-items:flex-start;
}
.sc-name{
    font-family:var(--font-head);font-size:1.15rem;font-weight:700;
    color:var(--clr-text);letter-spacing:2px;
}
.sc-desc{font-size:.82rem;color:var(--clr-text3);margin-top:.25rem;}
.sc-badge{
    display:flex;align-items:center;gap:5px;
    padding:.25rem .75rem;border-radius:100px;
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:1px;
    flex-shrink:0;
}
.sc-badge.online{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);color:var(--clr-green);}
.sc-badge.offline{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:var(--clr-red);}
.sc-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.sc-badge.online .sc-dot{animation:pulseDot 2s ease-in-out infinite;}

.sc-body{padding:.75rem 1.5rem 1.5rem;}

.sc-players-bar{
    background:rgba(255,255,255,.05);
    border-radius:4px;height:4px;margin-bottom:1rem;overflow:hidden;
}
.sc-players-fill{
    height:100%;border-radius:4px;
    background:var(--grad-accent);
    transition:width .8s cubic-bezier(.22,1,.36,1);
}
.sc-online .sc-players-fill{background:linear-gradient(90deg,var(--clr-green),rgba(16,185,129,.5));}

.sc-stats{display:flex;gap:.75rem;margin-bottom:1.25rem;}
.sc-stat{
    flex:1;background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;padding:.65rem;text-align:center;
}
.sc-stat-lbl{
    display:block;font-family:var(--font-mono);font-size:.6rem;
    letter-spacing:2px;color:var(--clr-text3);text-transform:uppercase;margin-bottom:3px;
}
.sc-stat-val{
    font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--clr-text);
}
.sc-online .sc-stat-val.players{color:var(--clr-green);}

.sc-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;padding:.8rem;border-radius:9px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--clr-border);
    color:var(--clr-accent2);text-decoration:none;
    font-weight:600;font-size:.9rem;letter-spacing:1px;
    transition:var(--transition);font-family:var(--font-body);
}
.sc-btn:hover{background:var(--clr-accent);color:#fff;border-color:var(--clr-accent);box-shadow:0 4px 20px var(--clr-glow);}
.sc-btn.disabled{opacity:.35;pointer-events:none;cursor:not-allowed;}

.servers-footer{
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    font-family:var(--font-mono);font-size:.72rem;color:var(--clr-text3);letter-spacing:1px;
}
.live-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--clr-green);box-shadow:0 0 8px var(--clr-green);
    animation:pulseDot 2s ease-in-out infinite;
}
.live-sep{color:var(--clr-border);}

/* ---- FEATURES ---- */
.features-section{
    background:linear-gradient(180deg,transparent,var(--clr-bg2) 30%,var(--clr-bg2) 70%,transparent);
}
.features-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:1.25rem;
}
.feat-card{
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius-lg);padding:2rem;
    transition:var(--transition);position:relative;overflow:hidden;
    cursor:default;
}
.feat-card::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,var(--clr-glow2),transparent);
    opacity:0;transition:opacity .3s;border-radius:var(--radius-lg);
}
.feat-card:hover{border-color:var(--clr-border2);transform:translateY(-6px);}
.feat-card:hover::before{opacity:1;}
.feat-card:hover .feat-icon{box-shadow:0 0 30px var(--clr-glow);}

.feat-icon{
    width:52px;height:52px;border-radius:12px;
    background:var(--clr-glow2);border:1px solid var(--clr-border);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:1.2rem;transition:var(--transition);
}
.feat-icon svg{width:24px;height:24px;color:var(--clr-accent2);}
.feat-card h3{
    font-family:var(--font-head);font-size:.95rem;font-weight:700;
    letter-spacing:1.5px;color:var(--clr-text);margin-bottom:.65rem;
    text-transform:uppercase;
}
.feat-card p{color:var(--clr-text2);font-size:.9rem;line-height:1.65;font-weight:300;}

/* ---- STATS ---- */
.stats-section{padding:4rem 0;position:relative;z-index:2;overflow:hidden;}
.stats-bg-line{
    position:absolute;left:0;right:0;top:50%;height:1px;
    background:linear-gradient(90deg,transparent 0%,var(--clr-border) 20%,var(--clr-border) 80%,transparent 100%);
}
.stats-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--clr-border);border-radius:var(--radius-lg);overflow:hidden;
    border:1px solid var(--clr-border);
}
.stat-card{
    background:var(--clr-card);padding:2.5rem 1.5rem;text-align:center;
    transition:var(--transition);
}
.stat-card:hover{background:var(--clr-card-b);}
.stat-num{
    display:block;font-family:var(--font-head);
    font-size:clamp(2rem,4vw,2.8rem);font-weight:900;
    color:var(--clr-accent2);margin-bottom:.4rem;
    text-shadow:0 0 30px var(--clr-glow);
}
.stat-name{
    font-size:.78rem;color:var(--clr-text3);
    letter-spacing:2px;text-transform:uppercase;font-family:var(--font-mono);
}

/* ---- MODES ---- */
.modes-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
    gap:1.5rem;align-items:start;
}
.mode-card{
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius-lg);padding:2rem;
    transition:var(--transition);position:relative;overflow:hidden;
}
.mode-card-featured{
    border-color:var(--clr-accent);
    box-shadow:0 0 40px var(--clr-glow2);
    background:linear-gradient(145deg,var(--clr-card),var(--clr-card-b));
}
.mode-ribbon{
    position:absolute;top:1rem;right:-2.5rem;
    background:var(--grad-accent);color:#fff;
    font-family:var(--font-mono);font-size:.6rem;letter-spacing:2px;
    padding:.3rem 3.5rem;transform:rotate(35deg);
    text-transform:uppercase;
}
.mode-card:hover{border-color:var(--clr-border2);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.4);}
.mode-card-featured:hover{box-shadow:0 20px 50px rgba(0,0,0,.4),0 0 50px var(--clr-glow);}

.mode-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;}
.mode-badge{font-size:2rem;}
.mode-tag{
    font-family:var(--font-mono);font-size:.65rem;letter-spacing:3px;
    color:var(--clr-accent2);background:var(--clr-glow2);
    border:1px solid var(--clr-border);padding:.3rem .75rem;border-radius:100px;
}
.mode-name{
    font-family:var(--font-head);font-size:1.4rem;font-weight:700;
    letter-spacing:2px;color:var(--clr-text);margin-bottom:.8rem;
}
.mode-desc{color:var(--clr-text2);font-size:.9rem;line-height:1.6;font-weight:300;margin-bottom:1.25rem;}
.mode-features{
    list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem;
}
.mode-features li{
    font-size:.85rem;color:var(--clr-text2);padding-left:1.2rem;position:relative;
}
.mode-features li::before{
    content:'◆';position:absolute;left:0;
    color:var(--clr-accent);font-size:.5rem;top:.2rem;
}
.mode-port{
    font-family:var(--font-mono);font-size:.78rem;color:var(--clr-text3);
    letter-spacing:1px;margin-bottom:1rem;
}
.mode-port strong{color:var(--clr-accent2);}
.btn-mode{
    display:flex;align-items:center;justify-content:center;
    width:100%;padding:.8rem;border-radius:9px;
    background:rgba(255,255,255,.04);border:1px solid var(--clr-border);
    color:var(--clr-accent2);text-decoration:none;
    font-weight:600;font-size:.9rem;letter-spacing:1px;
    transition:var(--transition);
}
.btn-mode:hover{background:var(--clr-accent);color:#fff;border-color:transparent;box-shadow:0 4px 20px var(--clr-glow);}
.mode-card-featured .btn-mode{background:var(--grad-accent);color:#fff;border-color:transparent;}
.mode-card-featured .btn-mode:hover{box-shadow:0 8px 30px var(--clr-glow);}

/* ---- COMMUNITY ---- */
.community-section{position:relative;z-index:2;padding:6rem 0;}
.community-bg{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at center,var(--clr-glow2) 0%,transparent 70%);
    pointer-events:none;
}
.community-inner{
    max-width:600px;margin:0 auto;text-align:center;
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius-lg);padding:4rem 3rem;
    position:relative;overflow:hidden;
}
.community-inner::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(88,101,242,.7),transparent);
}
.community-icon{
    width:80px;height:80px;border-radius:20px;
    background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.3);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.5rem;color:#7289da;
}
.community-inner h2{
    font-family:var(--font-head);font-size:1.7rem;font-weight:700;
    letter-spacing:1px;margin-bottom:.8rem;
}
.community-inner p{color:var(--clr-text2);font-size:1rem;line-height:1.6;margin-bottom:2rem;font-weight:300;}
.btn-discord-big{
    display:inline-flex;align-items:center;gap:10px;
    padding:1rem 2.2rem;border-radius:10px;
    background:rgba(88,101,242,.15);border:1px solid rgba(88,101,242,.4);
    color:#7289da;text-decoration:none;font-weight:600;font-size:1rem;
    transition:var(--transition);
}
.btn-discord-big:hover{background:#5865f2;color:#fff;border-color:#5865f2;box-shadow:0 8px 30px rgba(88,101,242,.4);transform:translateY(-3px);}

/* ---- ACCORDION ---- */
.accordion{display:flex;flex-direction:column;gap:.5rem;}
.acc-item{
    background:var(--clr-card);border:1px solid var(--clr-border);
    border-radius:var(--radius);overflow:hidden;transition:border-color .3s;
}
.acc-item.open{border-color:var(--clr-border2);}
.acc-header{
    display:flex;align-items:center;gap:1rem;width:100%;
    background:none;border:none;padding:1.2rem 1.5rem;cursor:pointer;
    text-align:left;transition:var(--transition);color:var(--clr-text);
}
.acc-header:hover{background:rgba(255,255,255,.03);}
.acc-num{
    font-family:var(--font-mono);font-size:.75rem;color:var(--clr-accent);
    flex-shrink:0;letter-spacing:1px;min-width:28px;
}
.acc-title{flex:1;font-size:.95rem;font-weight:500;}
.acc-icon{
    flex-shrink:0;color:var(--clr-text3);transition:transform .3s ease;
}
.acc-item.open .acc-icon{transform:rotate(180deg);}
.acc-body{
    max-height:0;overflow:hidden;
    transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.acc-body p{
    padding:.25rem 1.5rem 1.5rem;
    color:var(--clr-text2);font-size:.9rem;line-height:1.7;font-weight:300;
}
.acc-body p strong{color:var(--clr-accent2);}

/* ---- RULES ---- */
.rules-section{background:linear-gradient(180deg,transparent,var(--clr-bg2) 20%,var(--clr-bg2) 80%,transparent);}

/* ---- FAQ ---- */
.faq-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
    gap:1.5rem;align-items:start;
}

/* ---- FOOTER ---- */
.footer{
    overflow:hidden;
    position:relative;z-index:2;
    background:var(--clr-bg2);
    border-top:1px solid var(--clr-border);
    padding:4rem 0 2rem;
}
.footer-glow{
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:min(600px,100%);height:1px;
    background:linear-gradient(90deg,transparent,var(--clr-accent),transparent);
}
.footer-top{
    display:flex;justify-content:space-between;gap:3rem;
    flex-wrap:wrap;margin-bottom:3rem;
    padding-bottom:3rem;border-bottom:1px solid var(--clr-border);
}
.footer-brand{flex:1;min-width:220px;}
.footer-logo{
    display:flex;align-items:center;gap:3px;
    font-family:var(--font-head);font-size:1.2rem;font-weight:900;
    color:var(--clr-text);letter-spacing:2px;margin-bottom:.8rem;
}
.footer-brand p{color:var(--clr-text3);font-size:.875rem;line-height:1.6;font-weight:300;}
.footer-nav{display:flex;gap:4rem;}
.footer-nav-col{display:flex;flex-direction:column;gap:.6rem;}
.footer-nav-title{
    font-family:var(--font-mono);font-size:.65rem;letter-spacing:3px;
    color:var(--clr-text3);text-transform:uppercase;margin-bottom:.3rem;
}
.footer-nav-col a{
    color:var(--clr-text2);text-decoration:none;font-size:.9rem;
    transition:var(--transition);
}
.footer-nav-col a:hover{color:var(--clr-accent2);}
.footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    flex-wrap:wrap;gap:1rem;
    font-size:.8rem;color:var(--clr-text3);
}
.footer-classified{
    font-family:var(--font-mono);font-size:.65rem;letter-spacing:2px;
    color:var(--clr-border2);
}

/* ---- REVEAL ANIMATION ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.visible{opacity:1;transform:none;}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
    .hero{flex-direction:column;text-align:center;padding-top:100px;}
    .hero-cta{justify-content:center;}
    .hero-visual{display:none;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .faq-grid{grid-template-columns:1fr;}
    /* На мобиле hero-content должен быть строго в ширину родителя */
    .hero-content{width:100%;max-width:100%;min-width:0;}
}
@media(max-width:768px){
    .nav-links{display:none;}
    .hamburger{display:flex;}
    .nav-discord-btn{display:none !important;}
    .nav-actions{gap:.4rem;}
    #idx-user-block .idx-balance-chip{display:none;}

    .hstat-divider{display:none;}
    .hero-stats-strip{flex-wrap:wrap;}
    .hstat{min-width:50%;}
    .modes-grid{grid-template-columns:1fr;}
    .footer-top{flex-direction:column;}
    .footer-nav{gap:2rem;}
    .container{padding:0 1.25rem;}
    .section{padding:4rem 0;}
    .hero{padding:100px 1.25rem 4rem;}
    .hero-title-uni{letter-spacing:8px;}
    .features-grid{gap:.75rem;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .modes-inner{padding:0 1rem;}
    .rules-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .community-inner{margin:0 1rem;}
    .footer-legal{font-size:.75rem;}
    .theme-toggle-btn span{display:none;}
    #back-to-top{right:.75rem;}
}
@media(max-width:480px){
    .hero-title-alt{font-size:clamp(2.2rem,8vw,2.8rem);}
    .hero-title-uni{letter-spacing:5px;font-size:clamp(1.1rem,4vw,1.6rem);}
    .btn{padding:.75rem 1.4rem;font-size:.875rem;}
    .stats-grid{grid-template-columns:1fr 1fr;}
    .community-inner{padding:2.5rem 1.25rem;}
    #theme-switcher{bottom:1rem;right:.75rem;}
    #back-to-top{bottom:4.5rem;}
    .hero-eyebrow{font-size:.65rem;letter-spacing:2px;padding:.35rem .75rem;}
    .hero-subtitle{font-size:.95rem;}
    .hero-stats-strip{flex-direction:column;gap:0;}
    .hstat{width:100%;border-bottom:1px solid var(--clr-border);}
    .hstat:last-child{border-bottom:none;}
    .hstat-val{font-size:1.3rem;}
    .hero-cta{flex-direction:column;align-items:stretch;}
    .hero-cta .btn{width:100%;max-width:100%;text-align:center;justify-content:center;box-sizing:border-box;}
    .section-title{font-size:clamp(1.5rem,5vw,2rem);}
    .server-card{padding:1.25rem;}
    .modes-grid{gap:.75rem;}
    .footer-bottom{flex-direction:column;text-align:center;gap:.75rem;}
}
@media(max-width:360px){
    .hero{padding:100px 1rem 4rem;}
    .container{padding:0 .9rem;}
    .hero-title-alt{font-size:2rem;letter-spacing:2px;}
    .hero-title-uni{letter-spacing:3px;}
    .theme-panel{right:auto;left:0;min-width:160px;}
    .stats-grid{grid-template-columns:1fr;}
}

/* ---- BANNER SECTION ---- */
.banner-section {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
}
.banner-wrap {
    position: relative;
    width: 100%;
    max-height: 520px;
    overflow: hidden;
    display: block;
}
.banner-img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    border: none;
}
.banner-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            var(--clr-bg) 0%,
            transparent 18%,
            transparent 80%,
            var(--clr-bg) 100%),
        linear-gradient(to right,
            var(--clr-bg) 0%,
            transparent 10%,
            transparent 90%,
            var(--clr-bg) 100%);
    pointer-events: none;
}
@media (max-width: 768px) {
    .banner-wrap,
    .banner-img { max-height: 280px; }
}
@media (max-width: 480px) {
    .banner-wrap,
    .banner-img { max-height: 200px; }
    .banner-img  { object-position: center center; }
}