/* ══════════════════════════════════
   ROOT & RESET
══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c:#0bf1ff;--c2:#00c6d4;--cdim:rgba(11,241,255,.12);--cg:rgba(11,241,255,.06);
  --gold:#ffc53d;--red:#ff3d57;--grn:#22c55e;--pur:#a855f7;
  --bg:#07090e;--bg2:#0d1117;--bg3:#111827;--bg4:#1a2235;
  --txt:#e8f0f8;--mut:rgba(232,240,248,.45);--brd:rgba(11,241,255,.14);
  --glow:0 0 30px rgba(11,241,255,.45);
  --ff:'Barlow',sans-serif;--ffc:'Barlow Condensed',sans-serif;--ffm:'Share Tech Mono',monospace;
  --r:3px;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--ff);overflow-x:hidden;cursor:none}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--c2);border-radius:2px}
.container{max-width:1380px;margin:0 auto;padding:0 48px}

/* ══════════════════════════════════
   CUSTOM CURSOR
══════════════════════════════════ */
#cursor-outer{position:fixed;width:36px;height:36px;border:1.5px solid var(--c);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .15s,height .15s,opacity .15s;mix-blend-mode:normal}
#cursor-inner{position:fixed;width:5px;height:5px;background:var(--c);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 8px var(--c)}
#cursor-outer.hover{width:56px;height:56px;border-color:var(--gold);opacity:.7}
#cursor-outer.click{width:20px;height:20px;opacity:1}
/* crosshair lines */
#cursor-outer::before,#cursor-outer::after{content:'';position:absolute;background:var(--c);opacity:.5}
#cursor-outer::before{width:1px;height:8px;left:50%;top:-10px;transform:translateX(-50%)}
#cursor-outer::after{width:8px;height:1px;top:50%;left:-10px;transform:translateY(-50%)}

/* ══════════════════════════════════
   SCROLL PROGRESS
══════════════════════════════════ */
#scroll-prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--c),var(--pur),var(--gold));z-index:300;transition:width .1s;width:0%}



/* ══════════════════════════════════
   NAV
══════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 5%;height:76px;display:flex;align-items:center;justify-content:space-between;background:rgba(7,9,14,.85);backdrop-filter:blur(24px);border-bottom:1px solid rgba(11,241,255,.06);transition:background .3s}
.nav.scrolled{background:rgba(7,9,14,.96)}
.nav-right{display:flex;align-items:center;gap:40px}
.nav-right a{font-family:var(--ffc);font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut);position:relative;transition:color .2s}
.nav-right a::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:1.5px;background:var(--c);transition:width .25s}
.nav-right a:hover{color:var(--c)}
.nav-right a:hover::after{width:100%}
.nav-cta{padding:8px 22px;border:1.5px solid var(--c)!important;border-radius:var(--r);color:var(--c)!important;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:all .2s!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--c)!important;color:var(--bg)!important;box-shadow:var(--glow)!important}
.ham{display:none;flex-direction:column;gap:5px;cursor:none}
.ham span{display:block;width:24px;height:2px;background:var(--txt);border-radius:1px;transition:.3s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{display:none;position:fixed;inset:0;z-index:190;background:rgba(7,9,14,.98);backdrop-filter:blur(24px);flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mnav.open{display:flex}
.mnav a{font-family:var(--ffc);font-size:2rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:var(--txt);transition:color .2s}
.mnav a:hover{color:var(--c)}

/* ══════════════════════════════════
   DOTS
══════════════════════════════════ */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:150}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(11,241,255,.2);border:1px solid rgba(11,241,255,.25);cursor:none;transition:all .25s}
.dot.act{background:var(--c);box-shadow:0 0 10px rgba(11,241,255,.6);transform:scale(1.5)}
.dot:hover{background:var(--c)}

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:flex-end;background:#070a10}
/* Particle canvas */
#pCanvas{position:absolute;inset:0;z-index:1;opacity:.6}
/* Grid overlay */
.hero-grid{position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(11,241,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,241,255,.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent)}
/* Bg gradient */
.hero-vign{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 60% 70% at 20% 60%,rgba(11,241,255,.07),transparent 60%),linear-gradient(to top,var(--bg) 0%,rgba(7,9,14,.55) 60%,rgba(7,9,14,.1) 100%)}
/* Scanlines */
.hero-scan{position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px);animation:scanMove 8s linear infinite}
@keyframes scanMove{0%{background-position:0 0}100%{background-position:0 100px}}
/* Floating city SVG */
.hero-city{position:absolute;bottom:0;left:0;right:0;z-index:5;opacity:.18}
/* Character */
.hero-char{position:absolute;bottom:0;left:50%;transform:translateX(-14%);height:96vh;z-index:8;filter:drop-shadow(0 0 40px rgba(11,241,255,.3)) drop-shadow(0 0 80px rgba(11,241,255,.12));animation:hfloat 8s ease-in-out infinite}
@keyframes hfloat{0%,100%{transform:translateX(-14%) translateY(0)}50%{transform:translateX(-14%) translateY(-18px)}}
/* Watermark title */
.hero-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);z-index:6;font-family:var(--ffc);font-size:clamp(9rem,25vw,22rem);font-weight:900;letter-spacing:-6px;color:transparent;-webkit-text-stroke:1px rgba(11,241,255,.08);text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none;animation:glitchWM 8s infinite}
@keyframes glitchWM{0%,92%,100%{text-shadow:none;transform:translate(-50%,-52%)}93%{text-shadow:2px 0 var(--c);transform:translate(calc(-50% + 2px),-52%)}94%{text-shadow:-2px 0 var(--red);transform:translate(calc(-50% - 2px),-52%)}95%{text-shadow:none;transform:translate(-50%,-52%)}}
/* Bottom bar */
.hero-bot{position:relative;z-index:9;width:100%;padding-bottom:52px}
.hero-bot .container{display:flex;justify-content:space-between;align-items:flex-end}
.h-online{flex:0 0 auto}
.h-center{position:absolute;left:50%;transform:translateX(-50%);bottom:52px;display:flex;flex-direction:column;align-items:center;gap:16px}
.h-online{background:var(--c);color:#050709;font-family:var(--ffc);font-weight:700;padding:14px 22px;min-width:180px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);position:relative;overflow:hidden}
.h-online::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 3s infinite}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}
.h-online-lbl{font-size:.68rem;letter-spacing:3px;text-transform:uppercase;color:rgba(0,0,0,.55);margin-bottom:2px;font-family:var(--ffm)}
.h-online-num{font-size:3rem;line-height:1;display:block}
.h-center{display:flex;flex-direction:column;align-items:center;gap:16px}
.h-actions{display:flex;align-items:center;gap:30px}
.h-lbl{font-family:var(--ffc);font-size:1rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.h-play{width:80px;height:80px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(11,241,255,.5);animation:playPulse 2.5s ease-in-out infinite;transition:transform .2s,box-shadow .2s}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 0 rgba(11,241,255,.5)}50%{box-shadow:0 0 0 14px rgba(11,241,255,0)}}
.h-play:hover{transform:scale(1.12);box-shadow:0 0 40px rgba(11,241,255,.7),0 0 0 0 transparent!important;animation:none}
.h-play svg{width:28px;height:28px;fill:#050709;margin-left:4px}
.h-social{display:flex;gap:10px;align-items:flex-end;flex:0 0 auto}
.h-social a{width:42px;height:42px;border:1px solid var(--brd);border-radius:var(--r);display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative;overflow:hidden}
.h-social a::before{content:'';position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:transform .2s}
.h-social a:hover{border-color:var(--c)}
.h-social a:hover::before{transform:scaleY(1)}
.h-social img{width:20px;height:20px;filter:brightness(0) invert(1);position:relative;z-index:1}
/* Join server badge */
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border:1px solid rgba(11,241,255,.2);border-radius:100px;font-family:var(--ffm);font-size:.72rem;color:var(--c);letter-spacing:2px;text-transform:uppercase;background:rgba(11,241,255,.06);backdrop-filter:blur(8px)}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px var(--grn);animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ══════════════════════════════════
   BUTTONS
══════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;font-family:var(--ffc);font-size:.95rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;border-radius:var(--r);transition:all .25s;border:none;cursor:none;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);transform:translateX(-110%) skewX(-15deg);transition:transform .4s}
.btn:hover::before{transform:translateX(110%) skewX(-15deg)}
.btn-c{background:var(--c);color:#050709;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.btn-c:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.btn-o{background:transparent;border:1.5px solid var(--brd);color:var(--txt);clip-path:none}
.btn-o:hover{border-color:var(--c);color:var(--c);background:var(--cdim)}

/* ══════════════════════════════════
   SECTION HELPERS
══════════════════════════════════ */
.sec{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center}
.stag{display:inline-flex;align-items:center;gap:8px;font-family:var(--ffm);font-size:.68rem;color:var(--c);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.stag::before{content:'// '}
.stit{font-family:var(--ffc);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:900;letter-spacing:1px;text-transform:uppercase;line-height:1;margin-bottom:6px}
.stit span{color:var(--c)}
/* glitch on titles */
.stit.glitch{position:relative}
.stit.glitch::before,.stit.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;right:0;overflow:hidden}
.stit.glitch::before{color:var(--c);animation:glitch1 4s infinite;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);opacity:0}
.stit.glitch::after{color:var(--red);animation:glitch2 4s infinite;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);opacity:0}
.stit.glitch:hover::before,.stit.glitch:hover::after{opacity:1}
@keyframes glitch1{0%,100%{transform:none}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:none}}
@keyframes glitch2{0%,100%{transform:none}20%{transform:translate(2px,-1px)}40%{transform:translate(-2px,1px)}60%{transform:none}}
.sline{width:60px;height:2px;background:linear-gradient(90deg,var(--c),var(--pur),transparent);margin:14px 0 28px;position:relative}
.sline::after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,var(--c),transparent);animation:linePulse 2s ease-in-out infinite}
@keyframes linePulse{0%,100%{opacity:1;width:100%}50%{opacity:.4;width:60%}}
.sdesc{color:var(--mut);font-size:.95rem;font-weight:300;line-height:1.75;max-width:500px}

/* ══════════════════════════════════
   SECTION DIVIDER SVG
══════════════════════════════════ */
.sec-divider{width:100%;overflow:hidden;line-height:0;margin-bottom:-2px}
.sec-divider svg{display:block;width:100%}

/* ══════════════════════════════════
   ABOUT
══════════════════════════════════ */
#about{background:linear-gradient(135deg,var(--bg) 0%,#0a1020 100%)}
#about::before{content:'';position:absolute;inset:0;background:url('images/aboutus-bg.png') center/cover no-repeat;opacity:.12}
.about-in{position:relative;z-index:2;display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center;padding:110px 0;width:100%}
/* Video card */
.about-vid-wrap{position:relative}
.about-vid{border:1px solid var(--brd);border-radius:4px;overflow:hidden;aspect-ratio:16/9;position:relative;cursor:none;background:var(--bg3)}
.about-vid img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(1.2)}
.about-vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,241,255,.05);transition:background .25s}
.about-vplay:hover{background:rgba(11,241,255,.15)}
.about-vplay svg{width:56px;height:56px;fill:var(--c);filter:drop-shadow(0 0 16px rgba(11,241,255,.7));transition:transform .2s}
.about-vplay:hover svg{transform:scale(1.15)}
/* Corner decorators */
.corner{position:absolute;width:20px;height:20px;border-color:var(--c);border-style:solid;z-index:2}
.corner-tl{top:-1px;left:-1px;border-width:2px 0 0 2px}
.corner-tr{top:-1px;right:-1px;border-width:2px 2px 0 0}
.corner-bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.corner-br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
/* Stats pills */
.about-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.about-pill{padding:6px 16px;border:1px solid var(--brd);border-radius:100px;font-family:var(--ffc);font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c);background:var(--cg);transition:all .2s}
.about-pill:hover{background:var(--c);color:var(--bg);border-color:var(--c);box-shadow:var(--glow)}
.about-char-bg{position:absolute;bottom:0;right:-120px;height:80vh;z-index:1;opacity:.55;filter:drop-shadow(0 0 30px rgba(11,241,255,.15));pointer-events:none}

/* ══════════════════════════════════
   STATS — LIVE CHART
══════════════════════════════════ */
#stats{background:var(--bg2);position:relative;min-height:auto}
#stats::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(11,241,255,.04),transparent)}
.stats-inner{position:relative;z-index:2;padding:80px 0;width:100%}
/* server selector (used if multiple servers) */
.srv-selector{display:flex;gap:6px;margin-bottom:36px;flex-wrap:wrap}
.srv-tab{display:flex;align-items:center;gap:10px;padding:11px 26px;background:rgba(17,24,39,.8);border:1px solid rgba(11,241,255,.13);border-radius:var(--r);font-family:var(--ffc);font-size:.9rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);cursor:none;transition:all .2s}
.srv-tab.active{background:var(--c);color:#050709;border-color:var(--c)}
.srv-tab:hover:not(.active){border-color:var(--c);color:var(--c);background:var(--cdim)}
.srv-tab-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.srv-tab.active .srv-tab-dot{animation:blink 1.5s infinite}
/* Info bar */
.srv-bar{background:rgba(13,17,23,.8);border:1px solid var(--brd);border-radius:4px;padding:18px 26px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;backdrop-filter:blur(8px)}
.srv-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.srv-dot.online{background:var(--grn);box-shadow:0 0 10px var(--grn);animation:blink 2s infinite}
.srv-dot.offline{background:var(--red)}
.srv-dot.loading{background:var(--gold);animation:blink 1s infinite}
.srv-name{font-family:var(--ffc);font-size:1.2rem;font-weight:900;letter-spacing:1px;color:#fff}
.srv-host{font-family:var(--ffm);font-size:.76rem;color:var(--c);background:rgba(11,241,255,.08);padding:3px 10px;border-radius:2px;border:1px solid rgba(11,241,255,.15)}
.srv-ref{display:flex;align-items:center;gap:7px;font-family:var(--ffm);font-size:.68rem;color:var(--mut);cursor:none;transition:color .2s;user-select:none}
.srv-ref:hover{color:var(--c)}
.srv-ref svg{width:14px;height:14px}
.srv-ref.spinning svg{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}
.srv-upd{font-family:var(--ffm);font-size:.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
/* Error/help */
.srv-err{background:rgba(255,61,87,.05);border:1px solid rgba(255,61,87,.2);border-radius:4px;padding:18px 24px;display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.srv-err svg{width:18px;height:18px;color:var(--red);flex-shrink:0;margin-top:2px}
.srv-err strong{display:block;font-family:var(--ffc);font-size:.88rem;font-weight:700;color:var(--red);margin-bottom:3px}
.srv-err p{color:var(--mut);font-size:.82rem;line-height:1.5}
.srv-hlp{background:rgba(255,197,61,.05);border:1px solid rgba(255,197,61,.2);border-radius:4px;padding:14px 20px;margin-bottom:14px;font-size:.8rem;color:rgba(232,240,248,.6);line-height:1.7}
.srv-hlp strong{color:var(--gold)}
.srv-hlp code{font-family:var(--ffm);background:rgba(255,197,61,.1);padding:1px 6px;border-radius:2px;font-size:.76rem;color:var(--gold)}
/* Chart + counters layout */
.chart-layout{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:stretch;margin-bottom:24px}
/* Chart */
.chart-wrap{background:rgba(10,14,20,.7);border:1px solid rgba(11,241,255,.1);border-radius:6px;padding:28px 24px 14px;display:flex;flex-direction:column;backdrop-filter:blur(8px);overflow:visible}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.chart-title{font-family:var(--ffc);font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.chart-peak{font-family:var(--ffm);font-size:.72rem;color:var(--grn);letter-spacing:1px}
.chart-bars{display:flex;align-items:flex-end;gap:5px;flex:1;min-height:150px;overflow:visible;position:relative}
.chart-bar-col{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;overflow:visible}
.chart-bar-wrap{width:100%;flex:1;display:flex;align-items:flex-end;overflow:visible}
.chart-bar{width:100%;border-radius:3px 3px 0 0;background:linear-gradient(to top,rgba(34,197,94,.9) 0%,rgba(134,239,172,.65) 100%);box-shadow:0 0 6px rgba(34,197,94,.2);transition:height .9s cubic-bezier(.4,0,.2,1);position:relative;cursor:default;min-height:3px}
.chart-bar:hover{opacity:.85;box-shadow:0 0 14px rgba(34,197,94,.4)}

/* Floating tooltip — urmărește cursorul, nu se suprapune cu nimic */
#chartTooltip{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  background:rgba(7,9,14,.96);
  border:1px solid rgba(34,197,94,.6);
  border-radius:4px;
  padding:6px 12px;
  font-family:var(--ffm);
  font-size:.68rem;
  color:#fff;
  letter-spacing:.5px;
  white-space:nowrap;
  opacity:0;
  transition:opacity .12s;
  box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 8px rgba(34,197,94,.15);
}
.chart-bar.is-current{background:linear-gradient(to top,rgba(34,197,94,1) 0%,rgba(134,239,172,.95) 100%);box-shadow:0 0 12px rgba(34,197,94,.5)}
.chart-bar.is-current::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:7px;height:7px;background:var(--grn);border-radius:50%;box-shadow:0 0 8px var(--grn);animation:blink 1.5s infinite}
.chart-bar.zero{background:rgba(34,197,94,.1);box-shadow:none}
.chart-axis{display:flex;gap:5px;margin-top:5px}
.chart-axis-lbl{flex:1;text-align:center;font-family:var(--ffm);font-size:.55rem;color:var(--mut);letter-spacing:.5px}
.chart-axis-lbl.is-current{color:var(--grn)}
/* Counters */
.counters-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.counter-item{background:rgba(10,14,20,.7);border:1px solid rgba(11,241,255,.08);border-radius:6px;padding:20px 18px;display:flex;flex-direction:column;backdrop-filter:blur(8px);transition:border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.counter-item::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,.4),transparent);opacity:0;transition:opacity .25s}
.counter-item:hover{border-color:rgba(34,197,94,.3);box-shadow:0 8px 28px rgba(34,197,94,.08)}
.counter-item:hover::after,.counter-item.hi::after{opacity:1}
.counter-item.hi{border-color:rgba(34,197,94,.25)}
.counter-val{font-family:'Barlow Condensed',sans-serif;font-size:2.6rem;font-weight:900;line-height:1;color:#fff;display:block;transition:color .3s}
.counter-item.hi .counter-val{color:var(--grn);text-shadow:0 0 18px rgba(34,197,94,.25)}
.counter-lbl{font-family:var(--ffm);font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--mut);margin-top:8px;display:block}
.prg{margin-top:10px;height:3px;background:rgba(34,197,94,.1);border-radius:1px;overflow:hidden}
.prg-fill{height:100%;background:linear-gradient(90deg,var(--grn),rgba(134,239,172,.8));border-radius:1px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}
/* Players list */
.pls-wrap{background:rgba(13,17,23,.6);border:1px solid var(--brd);border-radius:4px;overflow:hidden}
.pls-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--brd)}
.pls-title{font-family:var(--ffc);font-size:.82rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:8px}
.pl-badge{background:var(--cdim);border:1px solid rgba(11,241,255,.2);border-radius:100px;padding:1px 10px;font-size:.72rem;color:var(--c);font-weight:700}
.pl-srch{background:rgba(7,9,14,.6);border:1px solid rgba(11,241,255,.13);border-radius:2px;padding:6px 12px;color:var(--txt);font-family:var(--ff);font-size:.82rem;outline:none;width:190px;transition:border-color .2s}
.pl-srch:focus{border-color:var(--c)}
.pl-srch::placeholder{color:var(--mut)}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:240px;overflow-y:auto}
.pl-row{display:flex;align-items:center;gap:10px;padding:9px 20px;border-bottom:1px solid rgba(11,241,255,.04);transition:background .15s}
.pl-row:hover{background:rgba(11,241,255,.04)}
.pl-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--bg4),#1e3a5f);display:flex;align-items:center;justify-content:center;font-family:var(--ffc);font-size:.72rem;font-weight:700;color:var(--c);flex-shrink:0}
.pl-name{font-size:.82rem;color:var(--txt);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-id{font-family:var(--ffm);font-size:.66rem;color:var(--mut);margin-left:auto;flex-shrink:0}
.pl-empty{text-align:center;padding:28px;color:var(--mut);font-family:var(--ffc);font-size:.82rem;letter-spacing:2px;text-transform:uppercase;grid-column:1/-1}
.pl-loading{text-align:center;padding:22px;color:var(--c);font-family:var(--ffc);font-size:.82rem;letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:10px;grid-column:1/-1}
.spin-i{animation:spin .8s linear infinite;display:inline-block}

/* ══════════════════════════════════
   HOW TO
══════════════════════════════════ */
#howto{background:linear-gradient(180deg,var(--bg) 0%,#0b1220 100%)}
#howto::before{content:'';position:absolute;inset:0;background:url('images/start-bg.png') center/cover;opacity:.08}
.howto-in{position:relative;z-index:2;width:100%;padding:110px 0;display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:start}
.howto-char{position:absolute;top:0;right:-60px;height:100%;object-fit:contain;object-position:bottom;z-index:1;filter:drop-shadow(0 0 40px rgba(11,241,255,.15));opacity:.4;pointer-events:none}
.steps{display:flex;flex-direction:column;gap:16px}
.step{background:rgba(13,17,23,.8);border:1px solid rgba(11,241,255,.09);border-radius:4px;padding:24px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;backdrop-filter:blur(8px);transition:border-color .25s,transform .25s,box-shadow .25s;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);position:relative;overflow:hidden}
.step::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--c),transparent);opacity:0;transition:opacity .25s}
.step:hover{border-color:var(--c);transform:translateX(8px);box-shadow:-4px 0 20px rgba(11,241,255,.1)}
.step:hover::before{opacity:1}
.step-n{font-family:var(--ffm);font-size:.68rem;color:var(--c);padding-top:3px}
.step-b strong{display:block;font-family:var(--ffc);font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:4px}
.step-b p{color:var(--mut);font-size:.84rem;line-height:1.55}
.step-lnk{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-family:var(--ffc);font-size:.76rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c);transition:gap .2s}
.step-lnk:hover{gap:9px}
.step-lnk::after{content:'→'}
.step-ico{width:40px;height:40px;object-fit:contain;filter:brightness(0) invert(1);opacity:.5}

/* ══════════════════════════════════
   RULES
══════════════════════════════════ */
#rules{background:var(--bg2)}
#rules::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 70% at 80% 50%,rgba(11,241,255,.03),transparent)}
.rules-in{position:relative;z-index:2;width:100%;padding:110px 0}
.rtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px}
.rtab{padding:9px 20px;background:transparent;border:1px solid var(--brd);color:var(--mut);border-radius:2px;font-family:var(--ffc);font-size:.84rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:none;transition:all .2s}
.rtab.active,.rtab:hover{background:var(--c);color:#050709;border-color:var(--c)}
.rpan{display:none;animation:fslide .3s ease}
.rpan.active{display:flex;flex-direction:column;gap:9px}
@keyframes fslide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rrow{display:flex;gap:14px;align-items:flex-start;background:rgba(13,17,23,.6);border:1px solid rgba(11,241,255,.07);border-left:3px solid transparent;border-radius:2px;padding:14px 18px;backdrop-filter:blur(4px);transition:border-color .2s,transform .2s,background .2s}
.rrow:hover{border-left-color:var(--c);transform:translateX(5px);background:rgba(11,241,255,.03)}
.rrow.rw{border-left-color:rgba(255,197,61,.4)}.rrow.rk{border-left-color:rgba(255,149,0,.4)}.rrow.rb{border-left-color:rgba(255,61,87,.45)}
.rid{font-family:var(--ffm);font-size:.68rem;color:var(--c);min-width:38px;flex-shrink:0;padding-top:2px}
.rt strong{display:block;font-family:var(--ffc);font-size:.9rem;font-weight:700;color:#fff;margin-bottom:2px}
.rt p{color:var(--mut);font-size:.8rem;line-height:1.5}
.rsev{margin-left:auto;flex-shrink:0;font-family:var(--ffm);font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border-radius:2px;align-self:flex-start;white-space:nowrap}
.sw{background:rgba(255,197,61,.1);color:var(--gold);border:1px solid rgba(255,197,61,.25)}
.sk{background:rgba(255,149,0,.1);color:#ff9500;border:1px solid rgba(255,149,0,.25)}
.sb2{background:rgba(255,61,87,.1);color:var(--red);border:1px solid rgba(255,61,87,.25)}

/* ══════════════════════════════════
   STAFF
══════════════════════════════════ */
#staff{background:linear-gradient(135deg,var(--bg) 0%,#0a0f1a 100%)}
#staff::before{content:'';position:absolute;inset:0;background:url('images/aboutus-bg.png') center/cover;opacity:.1}
.staff-in{position:relative;z-index:2;width:100%;padding:110px 0}
.staff-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(192px,1fr));gap:12px}
.sc{background:rgba(13,17,23,.8);border:1px solid rgba(11,241,255,.08);border-radius:4px;overflow:hidden;transition:all .3s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);position:relative}
.sc::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(11,241,255,.05),transparent);opacity:0;transition:opacity .3s}
.sc:hover{transform:translateY(-8px);border-color:var(--c);box-shadow:0 20px 50px rgba(11,241,255,.15),inset 0 0 0 1px rgba(11,241,255,.15)}
.sc:hover::after{opacity:1}
.sc-av{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--bg) 0%,var(--bg4) 100%);display:flex;align-items:center;justify-content:center;font-family:var(--ffc);font-size:2.8rem;font-weight:900;color:var(--c);text-shadow:0 0 20px rgba(11,241,255,.5);border-bottom:1px solid var(--brd);position:relative;overflow:hidden}
.sc-av::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(11,241,255,.08) 0%,transparent 60%)}
.sc-av::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c),transparent)}
.sc-av img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.sc-info{padding:14px}
.sc-role{font-family:var(--ffm);font-size:.64rem;color:var(--c);letter-spacing:2px;text-transform:uppercase;margin-bottom:3px}
.sc-name{font-family:var(--ffc);font-size:1rem;font-weight:900;letter-spacing:1px;color:#fff}
.sc-desc{font-size:.76rem;color:var(--mut);margin-top:5px;line-height:1.45}
.sbadge{display:inline-block;margin-top:8px;padding:2px 9px;border-radius:2px;font-family:var(--ffm);font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase}
.bo{background:rgba(255,197,61,.1);color:var(--gold);border:1px solid rgba(255,197,61,.25)}
.ba{background:rgba(255,61,87,.1);color:var(--red);border:1px solid rgba(255,61,87,.25)}
.bm{background:rgba(11,241,255,.1);color:var(--c);border:1px solid rgba(11,241,255,.2)}
.bd{background:rgba(167,139,250,.1);color:#a78bfa;border:1px solid rgba(167,139,250,.25)}
.bs{background:rgba(52,211,153,.1);color:#34d399;border:1px solid rgba(52,211,153,.25)}

/* ══════════════════════════════════
   WHITELIST — WITH DISCORD WEBHOOK
══════════════════════════════════ */
#whitelist{background:var(--bg)}
#whitelist::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 5% 50%,rgba(11,241,255,.04),transparent)}
.wl-in{position:relative;z-index:2;width:100%;padding:110px 0}
.wl-g{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start}
.wl-steps{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.wls{display:flex;gap:14px;align-items:flex-start}
.wls-n{width:36px;height:36px;flex-shrink:0;border:1.5px solid var(--c);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--ffm);font-size:.7rem;color:var(--c);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.wls-t strong{display:block;color:#fff;font-size:.9rem;font-weight:600}
.wls-t span{color:var(--mut);font-size:.8rem}
/* Form card */
.wl-card{background:rgba(13,17,23,.8);border:1px solid var(--brd);border-radius:4px;backdrop-filter:blur(16px);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);position:relative;overflow:hidden}
.wl-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c),var(--pur),transparent)}
.wl-card-inner{padding:36px}
.wl-head{display:flex;align-items:center;gap:14px;margin-bottom:28px}
/* SVG shield icon */
.wl-shield{width:44px;height:44px;flex-shrink:0}
.wl-ftit{font-family:var(--ffc);font-size:1.3rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#fff}
.wl-ftit span{color:var(--c)}
/* form fields */
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{margin-bottom:15px;position:relative}
.fg label{display:block;font-family:var(--ffm);font-size:.66rem;color:var(--c);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;background:rgba(7,9,14,.8);border:1px solid rgba(11,241,255,.13);border-radius:2px;color:var(--txt);font-family:var(--ff);font-size:.88rem;padding:10px 13px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(11,241,255,.07)}
.fg.err input,.fg.err select,.fg.err textarea{border-color:var(--red)}
.fg-msg{font-family:var(--ffm);font-size:.62rem;color:var(--red);margin-top:4px;display:none}
.fg.err .fg-msg{display:block}
.fg select option{background:#111827}
.fg textarea{resize:vertical;min-height:88px}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(232,240,248,.2)}
/* Char counter */
.char-count{font-family:var(--ffm);font-size:.62rem;color:var(--mut);text-align:right;margin-top:3px}
/* Submit button */
.wl-sub-wrap{position:relative;margin-top:8px}
.wl-sub{width:100%;padding:14px;background:var(--c);color:#050709;font-family:var(--ffc);font-size:1rem;font-weight:900;letter-spacing:3px;text-transform:uppercase;border:none;border-radius:2px;cursor:none;transition:all .25s;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);position:relative;overflow:hidden}
.wl-sub::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);transform:translateX(-110%) skewX(-15deg);transition:transform .4s}
.wl-sub:hover::before{transform:translateX(110%) skewX(-15deg)}
.wl-sub:hover{box-shadow:0 0 30px rgba(11,241,255,.4);transform:translateY(-1px)}
.wl-sub:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* Sending spinner */
.wl-sending{display:none;text-align:center;padding:30px;color:var(--c);font-family:var(--ffc);font-size:.9rem;letter-spacing:2px;text-transform:uppercase;flex-direction:column;align-items:center;gap:16px}
.wl-sending.show{display:flex}
.send-ring{width:48px;height:48px;border:2px solid rgba(11,241,255,.2);border-top-color:var(--c);border-radius:50%;animation:spin .8s linear infinite}
/* Success */
.wl-ok{display:none;text-align:center;padding:40px 20px}
.wl-ok.show{display:block;animation:fslide .5s ease}
.wl-ok-icon{width:64px;height:64px;margin:0 auto 16px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
.wl-ok h4{font-family:var(--ffc);font-size:1.8rem;font-weight:900;letter-spacing:2px;margin-bottom:8px;color:#fff}
.wl-ok p{color:var(--mut);line-height:1.6}
/* Error state */
.wl-fail{display:none;background:rgba(255,61,87,.08);border:1px solid rgba(255,61,87,.25);border-radius:4px;padding:16px 18px;margin-top:12px}
.wl-fail.show{display:block;animation:fslide .3s ease}
.wl-fail p{font-family:var(--ffm);font-size:.76rem;color:var(--red);letter-spacing:1px}
.wl-note{font-family:var(--ffm);font-size:.68rem;color:var(--mut);text-align:center;margin-top:10px;letter-spacing:1px}

/* ══════════════════════════════════
   COMMUNITY
══════════════════════════════════ */
#community{background:var(--bg);min-height:auto}
.com-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;width:100%}
.cc{background:rgba(13,17,23,.7);border:1px solid rgba(11,241,255,.08);padding:36px 28px;transition:background .25s,border-color .25s;position:relative;overflow:hidden}
.cc::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--c),transparent);transform:scaleX(0);transition:transform .3s}
.cc:hover{background:rgba(13,17,23,.95);border-color:rgba(11,241,255,.2)}
.cc:hover::before{transform:scaleX(1)}
.cc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.cc-title{font-family:var(--ffc);font-size:1.1rem;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.cc-ico{width:34px;height:34px;object-fit:contain;filter:brightness(0) invert(1);opacity:.35;transition:opacity .25s}
.cc:hover .cc-ico{opacity:.65}
.cc-sub{color:var(--mut);font-size:.82rem;line-height:1.65;margin-bottom:18px}
.cc-lnk{font-family:var(--ffc);font-size:.76rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c);display:inline-flex;align-items:center;gap:5px;border-bottom:1px solid rgba(11,241,255,.3);padding-bottom:2px;transition:gap .2s,border-color .2s}
.cc-lnk:hover{gap:10px;border-color:var(--c)}
.cc-lnk::after{content:'→'}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
footer{background:var(--bg);border-top:1px solid var(--brd);padding:60px 5% 28px}
.ft-in{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--brd)}
.ft-brand img{height:36px;margin-bottom:14px;filter:drop-shadow(0 0 6px rgba(11,241,255,.3))}
.ft-brand p{color:var(--mut);font-size:.82rem;line-height:1.7}
.ft-col h5{font-family:var(--ffc);font-size:.74rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:#fff;margin-bottom:14px}
.ft-col ul{display:flex;flex-direction:column;gap:9px}
.ft-col ul a{color:var(--mut);font-size:.82rem;transition:color .2s;display:flex;align-items:center;gap:6px}
.ft-col ul a:hover{color:var(--c)}
.ft-col ul a::before{content:'›';color:var(--c);opacity:0;transition:opacity .2s}
.ft-col ul a:hover::before{opacity:1}
.ft-bot{max-width:1380px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-family:var(--ffm);font-size:.7rem;color:var(--mut);flex-wrap:wrap;gap:10px}

/* ══════════════════════════════════
   VIDEO MODAL
══════════════════════════════════ */
#vModal{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.95);align-items:center;justify-content:center}
.vmodal-inner{position:relative;width:90%;max-width:900px}
.vmodal-close{position:absolute;top:-40px;right:0;color:#fff;font-size:1.1rem;background:none;border:none;cursor:none;font-family:var(--ffc);letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:8px;transition:color .2s}
.vmodal-close:hover{color:var(--c)}
#ytFrame{position:absolute;inset:0;width:100%;height:100%}

/* ══════════════════════════════════
   REVEAL
══════════════════════════════════ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.rv.vis{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media(max-width:1100px){.about-in{grid-template-columns:1fr}.about-char-bg{display:none}.howto-in{grid-template-columns:1fr}.howto-char{display:none}.wl-g{grid-template-columns:1fr;gap:36px}.ft-in{grid-template-columns:1fr 1fr}.chart-layout{grid-template-columns:1fr}}
@media(max-width:768px){.container{padding:0 20px}.nav-right{display:none}.ham{display:flex}.hero-char{left:50%;transform:translateX(-50%);opacity:.3}.hero-bot .container{flex-direction:column;align-items:center;gap:20px;padding-bottom:40px;position:relative}.h-center{position:static;transform:none;bottom:auto;order:-1}.staff-g{grid-template-columns:1fr 1fr}.fr2{grid-template-columns:1fr}.ft-in{grid-template-columns:1fr}.dots{display:none}.com-g{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.staff-g{grid-template-columns:1fr}.h-online{display:none}.stats-grid{grid-template-columns:1fr}.hero-wm{font-size:6rem}#cursor-outer,#cursor-inner{display:none}body{cursor:auto}.btn{cursor:pointer}.ham,.rtab,.srv-tab,.dot,.h-play,.about-vplay,.step-lnk,.cc,.wl-sub,.nav-cta{cursor:pointer}}
@keyframes howtoRing{to{transform:rotate(360deg) scale(1.05)}}

/* ══════════════════════════════════
   JOBS / FACȚIUNI
══════════════════════════════════ */
#jobs{background:var(--bg);position:relative}
#jobs::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 100%,rgba(11,241,255,.03),transparent)}
.jobs-in{position:relative;z-index:2;width:100%;padding:110px 0}
.jobs-header{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:48px;flex-wrap:wrap}
.jobs-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:8px}
.jleg{display:flex;align-items:center;gap:7px;font-family:var(--ffm);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.jleg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.jleg-legal .jleg-dot{background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}
.jleg-order .jleg-dot{background:#3b82f6;box-shadow:0 0 8px rgba(59,130,246,.5)}
.jleg-illegal .jleg-dot{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.5)}

/* Category label */
.jobs-category{margin-bottom:40px}
.jcat-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--ffm);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;padding:5px 14px;border-radius:100px}
.jcat-label.order{color:#3b82f6;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25)}
.jcat-label.legal{color:#22c55e;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25)}
.jcat-label.illegal{color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25)}

/* Cards grid */
.jobs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.job-card{background:rgba(10,14,20,.75);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:24px;display:flex;gap:18px;align-items:flex-start;backdrop-filter:blur(8px);transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden}
.job-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:3px 0 0 3px;transition:opacity .25s}
.job-card.order::before{background:linear-gradient(to bottom,#3b82f6,transparent)}
.job-card.legal::before{background:linear-gradient(to bottom,#22c55e,transparent)}
.job-card.illegal::before{background:linear-gradient(to bottom,#ef4444,transparent)}
.job-card:hover{transform:translateY(-5px) translateX(3px)}
.job-card.order:hover{border-color:rgba(59,130,246,.4);box-shadow:0 16px 40px rgba(59,130,246,.1)}
.job-card.legal:hover{border-color:rgba(34,197,94,.4);box-shadow:0 16px 40px rgba(34,197,94,.1)}
.job-card.illegal:hover{border-color:rgba(239,68,68,.35);box-shadow:0 16px 40px rgba(239,68,68,.1)}

/* Icon */
.job-icon-wrap{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.job-icon-wrap svg{width:24px;height:24px}
.job-icon-wrap.order{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2);color:#3b82f6}
.job-icon-wrap.legal{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2);color:#22c55e}
.job-icon-wrap.illegal{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2);color:#ef4444}

/* Body */
.job-body{flex:1;min-width:0}
.job-name{font-family:var(--ffc);font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.5px;margin-bottom:2px}
.job-tag{font-family:var(--ffm);font-size:.62rem;color:var(--mut);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px}
.job-desc{color:var(--mut);font-size:.82rem;line-height:1.55;margin-bottom:12px}
.job-slots{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.slot-open,.slot-closed,.slot-apply{font-family:var(--ffm);font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px}
.slot-open{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.slot-closed{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.25)}
.slot-apply{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.slot-count{font-family:var(--ffm);font-size:.62rem;color:var(--mut);letter-spacing:1px}

/* ══════════════════════════════════
   DISCORD WIDGET + COMMUNITY
══════════════════════════════════ */
#community{background:var(--bg2);padding:80px 5%;position:relative}
#community::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 20% 50%,rgba(88,101,242,.04),transparent)}
.community-inner{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start;position:relative;z-index:2}

/* Discord Widget */
.discord-widget{background:rgba(30,33,36,.95);border:1px solid rgba(88,101,242,.25);border-radius:8px;overflow:hidden;backdrop-filter:blur(12px);position:sticky;top:90px}
.dw-header{background:linear-gradient(135deg,rgba(88,101,242,.3),rgba(88,101,242,.12));padding:20px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(88,101,242,.15)}
.dw-logo{width:28px;height:28px;color:#7289da;flex-shrink:0}
.dw-name{font-family:var(--ffc);font-size:1rem;font-weight:900;color:#fff;letter-spacing:.5px}
.dw-invite{font-family:var(--ffm);font-size:.65rem;color:rgba(255,255,255,.45);letter-spacing:1px;margin-top:2px}
.dw-status-pill{margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.3);border-radius:100px;padding:4px 10px;font-family:var(--ffm);font-size:.62rem;color:#22c55e;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0}
.dw-pulse{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:blink 1.5s infinite}

.dw-stats{display:flex;align-items:center;padding:18px 22px;gap:0;border-bottom:1px solid rgba(88,101,242,.1)}
.dw-stat{flex:1;text-align:center}
.dw-stat-div{width:1px;height:32px;background:rgba(88,101,242,.15)}
.dw-stat-val{font-family:var(--ffc);font-size:1.8rem;font-weight:900;color:#fff;display:block;line-height:1}
.dw-stat-lbl{font-family:var(--ffm);font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;display:block;margin-top:4px}
.dw-stat:first-child .dw-stat-val{color:#22c55e}

.dw-members-wrap{padding:16px 22px;border-bottom:1px solid rgba(88,101,242,.1)}
.dw-members-title{font-family:var(--ffm);font-size:.65rem;color:rgba(255,255,255,.4);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.dw-members{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto}
.dw-members::-webkit-scrollbar{width:3px}
.dw-members::-webkit-scrollbar-thumb{background:rgba(88,101,242,.3);border-radius:2px}
.dw-member{display:flex;align-items:center;gap:10px;padding:5px 0}
.dw-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#5865f2,#3b4fe4);display:flex;align-items:center;justify-content:center;font-family:var(--ffc);font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
.dw-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.dw-avatar-online{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;background:#22c55e;border-radius:50%;border:2px solid rgba(30,33,36,.95)}
.dw-member-name{font-family:var(--ff);font-size:.82rem;color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dw-loading{font-family:var(--ffm);font-size:.72rem;color:rgba(255,255,255,.3);letter-spacing:2px;text-align:center;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px}

.dw-join-btn{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 22px 18px;padding:13px;background:#5865f2;color:#fff;border-radius:4px;font-family:var(--ffc);font-size:.88rem;font-weight:900;letter-spacing:2px;text-transform:uppercase;transition:background .2s,box-shadow .2s,transform .2s}
.dw-join-btn:hover{background:#4752c4;box-shadow:0 0 24px rgba(88,101,242,.5);transform:translateY(-1px)}

/* Community cards grid */
.com-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.com-cards .cc{border-radius:6px}

/* Responsive */
@media(max-width:1100px){.community-inner{grid-template-columns:1fr}.discord-widget{position:static}}
@media(max-width:768px){.jobs-grid{grid-template-columns:1fr}.jobs-header{flex-direction:column;gap:16px}.com-cards{grid-template-columns:1fr}}