/* ============================================================
   NOBODY'S LAND — EU PvP SCUM Server — design system
   ============================================================ */
:root{
  --bg:#0a0b0e; --bg2:#0e1015; --panel:#13151c; --panel2:#181b24;
  --line:#23262f; --line2:#2e3340;
  --acc:#ff5a1f; --acc2:#ffb454; --ok:#2ecc71; --danger:#e74c3c;
  --txt:#d7dae0; --mut:#83899a;
  --mono:'Share Tech Mono',monospace; --disp:'Orbitron',sans-serif;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--mono);
  line-height:1.6;overflow-x:hidden}
::selection{background:var(--acc);color:#000}
img{max-width:100%}
a{color:var(--acc2)}
code{color:var(--acc2);background:rgba(0,0,0,.5);padding:1px 6px;
  border:1px solid var(--line);font-size:.92em}
main{position:relative;z-index:2}

/* ---------- backdrop ---------- */
#bg{position:fixed;inset:0;z-index:0}
.scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 2px 4px);
  mix-blend-mode:multiply}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,transparent 50%,rgba(0,0,0,.72) 100%)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(10,11,14,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:14px 24px}
.logo{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:2px;
  color:#fff;text-decoration:none}
.logo b{color:var(--acc)}
.logo .sub{display:block;font-family:var(--mono);font-weight:400;font-size:9px;
  color:var(--mut);letter-spacing:4px}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{color:var(--mut);text-decoration:none;font-size:12px;letter-spacing:1px;
  text-transform:uppercase;padding:8px 13px;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--txt)}
.nav-links a.active{color:var(--acc)}
.nav-links a.active::after{content:"";position:absolute;left:13px;right:13px;
  bottom:2px;height:2px;background:var(--acc)}
.nav-links a.dc{border:1px solid var(--acc);color:var(--acc);margin-left:10px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.nav-links a.dc:hover{background:var(--acc);color:#000}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--txt);
  font-family:var(--mono);font-size:18px;padding:6px 12px;cursor:pointer}

/* lang switcher */
.lang-switch{position:relative;margin-left:8px}
.lang-btn{background:none;border:1px solid var(--line2);color:var(--txt);
  font-family:var(--mono);font-size:12px;padding:8px 13px;cursor:pointer;letter-spacing:1px}
.lang-btn:hover{border-color:var(--acc);color:var(--acc)}
.lang-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);
  background:var(--panel);border:1px solid var(--line2);min-width:120px;z-index:60}
.lang-menu.open{display:block}
.lang-menu button{display:block;width:100%;background:none;border:0;color:var(--mut);
  font-family:var(--mono);font-size:12px;padding:10px 14px;text-align:left;cursor:pointer}
.lang-menu button:hover,.lang-menu button.active{color:var(--acc);background:rgba(255,90,31,.07)}
@media(max-width:900px){
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--bg2);border-bottom:1px solid var(--line);
    padding:12px;gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px}
  .nav-links a.dc{margin:8px 0 0;text-align:center}
}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:130px 20px 70px;position:relative}
.hero-sub{min-height:auto;padding:150px 20px 80px}
.badge{display:inline-block;border:1px solid var(--line);color:var(--acc);
  padding:6px 18px;font-size:11px;letter-spacing:4px;text-transform:uppercase;
  margin-bottom:26px;background:rgba(255,90,31,.06);animation:flicker 4s infinite}
@keyframes flicker{0%,94%,100%{opacity:1}95%{opacity:.4}96%{opacity:1}98%{opacity:.5}}
h1{font-family:var(--disp);font-weight:900;font-size:clamp(38px,7.5vw,88px);
  line-height:.98;color:#fff;text-shadow:0 0 50px rgba(255,90,31,.3)}
.hero-sub h1{font-size:clamp(32px,5.5vw,60px)}
h1 .o{color:var(--acc)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;
  width:100%;height:100%;color:var(--acc)}
.glitch::before{color:#0ff;animation:gl-a 2.7s infinite linear alternate-reverse;
  clip-path:inset(0 0 65% 0);transform:translateX(-2px)}
.glitch::after{color:#f0f;animation:gl-b 3.1s infinite linear alternate-reverse;
  clip-path:inset(65% 0 0 0);transform:translateX(2px)}
@keyframes gl-a{0%{clip-path:inset(10% 0 80% 0)}25%{clip-path:inset(60% 0 10% 0)}
  50%{clip-path:inset(30% 0 55% 0)}75%{clip-path:inset(80% 0 5% 0)}100%{clip-path:inset(45% 0 40% 0)}}
@keyframes gl-b{0%{clip-path:inset(75% 0 5% 0)}25%{clip-path:inset(15% 0 70% 0)}
  50%{clip-path:inset(55% 0 30% 0)}75%{clip-path:inset(5% 0 85% 0)}100%{clip-path:inset(35% 0 50% 0)}}
.tagline{margin-top:22px;color:var(--mut);font-size:clamp(14px,1.8vw,17px);
  max-width:660px;line-height:1.8}
.tagline em{color:var(--acc2);font-style:normal}
.chips{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line2);background:var(--panel);padding:8px 16px;
  font-size:12px;letter-spacing:1px;color:var(--txt)}
.chip b{color:var(--acc)}
.cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;font-family:var(--disp);font-weight:700;letter-spacing:2px;
  font-size:13px;padding:15px 32px;text-decoration:none;text-transform:uppercase;
  transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer;border:0;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.btn.p{background:var(--acc);color:#0a0b0e}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(255,90,31,.45)}
.btn.s{border:1px solid var(--line2);color:var(--txt);background:rgba(19,21,28,.7)}
.btn.s:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- connect box ---------- */
.connect{margin-top:56px;width:min(640px,92vw);background:var(--panel);
  border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.connect .top{display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;border-bottom:1px solid var(--line);font-size:11px;
  letter-spacing:2px;color:var(--mut);text-transform:uppercase}
.connect .dot{color:var(--ok)}
.connect .row{display:flex;align-items:center;gap:14px;padding:20px 22px}
.connect .addr{flex:1;text-align:left;font-size:clamp(14px,2.4vw,19px);
  color:#fff;word-break:break-all}
.connect .addr small{display:block;color:var(--mut);font-size:11px;margin-top:2px}
.copy{background:var(--acc);border:0;color:#000;font-family:var(--disp);
  font-weight:700;font-size:12px;letter-spacing:1px;padding:12px 18px;
  cursor:pointer;transition:background .15s}
.copy:hover{background:var(--acc2)}

/* ---------- terminal ---------- */
.term{width:min(700px,92vw);margin:70px auto 0;background:var(--panel);
  border:1px solid var(--line);text-align:left;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.term .bar{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}
.term .bar i{width:11px;height:11px;border-radius:50%;background:#3a3f4b}
.term .bar i:first-child{background:var(--acc)}
.term .bar span{margin-left:8px;font-size:11px;color:var(--mut)}
.term .body{padding:18px 20px;min-height:180px;font-size:13.5px;line-height:1.9}
.term .ln{white-space:pre-wrap;word-break:break-all}
.term .cmd{color:#fff}.term .out{color:var(--mut)}
.term .ok{color:var(--ok)}.term .dim{color:#565d6f}
.caret{display:inline-block;width:9px;height:15px;background:var(--acc);
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- sections ---------- */
section,.wrap{max-width:var(--max);margin:0 auto;padding:96px 24px}
.wrap.tight{padding:60px 24px}
.kicker{color:var(--acc);letter-spacing:5px;font-size:11px;text-transform:uppercase}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(26px,4vw,42px);
  color:#fff;margin:10px 0 14px;line-height:1.1}
h3{font-family:var(--disp);color:#fff;font-size:16px;letter-spacing:1px}
.sub{color:var(--mut);max-width:620px;line-height:1.8}
.split{height:1px;background:var(--line);max-width:var(--max);margin:0 auto}

/* ---------- cards & grids ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:18px;margin-top:46px}
.card{background:var(--panel);border:1px solid var(--line);padding:28px 24px;
  position:relative;transition:transform .25s,border-color .25s;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.card:hover{transform:translateY(-5px);border-color:var(--acc)}
.card::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,90,31,.08),transparent 55%);
  opacity:0;transition:opacity .25s}
.card:hover::before{opacity:1}
.card .ic{font-size:26px;margin-bottom:14px}
.card h3{margin-bottom:10px}
.card p{color:var(--mut);font-size:13px;line-height:1.75}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;margin-top:50px;counter-reset:st}
.step{border-left:2px solid var(--line);padding:6px 0 6px 24px;position:relative}
.step::before{counter-increment:st;content:"0" counter(st);
  font-family:var(--disp);font-weight:900;font-size:32px;color:var(--acc);
  position:absolute;left:-2px;top:-14px;background:var(--bg);padding-right:10px}
.step h3{margin:26px 0 8px;font-size:14px}
.step p{color:var(--mut);font-size:13px;line-height:1.75}

/* ---------- feature rows (detail pages) ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  padding:44px 0;border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:0}
@media(max-width:820px){.feat{grid-template-columns:1fr}}
.feat .n{font-family:var(--disp);color:var(--acc);font-size:13px;letter-spacing:3px}
.feat h3{font-size:20px;margin:8px 0 12px}
.feat p{color:var(--mut);font-size:14px;line-height:1.85;margin-bottom:12px}
.feat ul{list-style:none;margin-top:10px}
.feat li{color:var(--txt);font-size:13.5px;padding:7px 0 7px 24px;position:relative;
  border-bottom:1px dashed var(--line)}
.feat li::before{content:"▸";position:absolute;left:0;color:var(--acc)}
.feat li small{color:var(--mut)}
.featbox{background:var(--panel);border:1px solid var(--line);padding:26px}
.featbox table{width:100%}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--disp);font-size:11px;letter-spacing:2px;color:var(--acc);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--line2);
  text-transform:uppercase}
td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--txt)}
td.dim{color:var(--mut);font-size:12.5px}
tr:hover td{background:rgba(255,90,31,.04)}
td.price{color:var(--acc);font-weight:700;white-space:nowrap}

/* ---------- callouts & rules ---------- */
.note{border-left:3px solid var(--acc);background:rgba(255,90,31,.06);
  padding:16px 20px;margin:22px 0;font-size:13.5px;color:var(--txt)}
.note.warn{border-color:var(--danger);background:rgba(231,76,60,.07)}
.note.ok{border-color:var(--ok);background:rgba(46,204,113,.07)}
.rule{background:var(--panel);border:1px solid var(--line);padding:26px 26px;
  margin-bottom:16px}
.rule h3{font-size:15px;margin-bottom:10px;display:flex;gap:12px;align-items:baseline}
.rule h3 .rn{color:var(--acc);font-size:12px}
.rule p{color:var(--mut);font-size:13.5px;line-height:1.8}
.rule ul{margin-top:8px}
.rule li{color:var(--txt);font-size:13px;line-height:1.7;margin-left:18px;margin-top:4px}

/* ---------- accordion (faq) ---------- */
.acc{border:1px solid var(--line);background:var(--panel);margin-bottom:12px}
.acc summary{cursor:pointer;padding:18px 22px;font-family:var(--disp);
  font-size:14px;color:#fff;list-style:none;display:flex;justify-content:space-between;
  align-items:center;transition:color .15s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--acc);font-size:20px;font-family:var(--mono)}
.acc[open] summary::after{content:"–"}
.acc summary:hover{color:var(--acc2)}
.acc .body{padding:0 22px 20px;color:var(--mut);font-size:13.5px;line-height:1.8}

/* ---------- packlist ---------- */
.packlist{display:flex;flex-direction:column;gap:10px}
.pack{display:flex;justify-content:space-between;align-items:center;
  background:var(--panel);border:1px solid var(--line);padding:16px 20px;
  transition:border-color .2s,transform .2s}
.pack:hover{border-color:var(--acc);transform:translateX(6px)}
.pack .nm{color:#fff;font-family:var(--disp);font-size:13px}
.pack .ds{color:var(--mut);font-size:11.5px;margin-top:3px}
.pack .pr{color:var(--acc);font-weight:700;white-space:nowrap;margin-left:14px}

/* ---------- stats strip ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.strip .cell{background:var(--bg2);padding:26px 18px;text-align:center}
.strip .n{font-family:var(--disp);font-weight:900;font-size:30px;color:#fff}
.strip .n b{color:var(--acc)}
.strip .l{color:var(--mut);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  margin-top:6px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:50px 24px 40px;text-align:center;
  color:var(--mut);font-size:12px;line-height:2;position:relative;z-index:2;
  background:var(--bg2)}
footer .big{font-family:var(--disp);color:#fff;letter-spacing:4px;font-size:16px;
  margin-bottom:10px}
footer .big b{color:var(--acc)}
footer .fl{display:flex;gap:22px;justify-content:center;margin:14px 0 18px;
  flex-wrap:wrap}
footer .fl a{color:var(--mut);text-decoration:none;font-size:11px;letter-spacing:1px;
  text-transform:uppercase}
footer .fl a:hover{color:var(--acc)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.rv.vis{opacity:1;transform:none}

/* ---------- media-kit integration ---------- */
.logo{display:flex;align-items:center;gap:12px}
.logo-ic{height:38px;width:auto;flex:0 0 auto}
.ic-img{width:36px;height:36px;margin-bottom:14px;display:block}
.card:hover .ic-img{filter:drop-shadow(0 0 8px rgba(255,90,31,.55))}
.mk-badges{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.mk-badges img{width:104px;height:104px;opacity:.92;transition:transform .25s,opacity .25s}
.mk-badges img:hover{transform:translateY(-5px);opacity:1}
.bg-topo{background-image:url('../../media-kit/backgrounds/bg-topo.svg');
  background-size:cover;background-position:center}
.bg-grid{background-image:url('../../media-kit/backgrounds/bg-grid.svg');
  background-size:cover;background-position:center}
@media(max-width:900px){.logo-ic{height:30px}.mk-badges img{width:80px;height:80px}}

/* ---------- live status bar ---------- */
.livebar{display:flex;justify-content:center;gap:0;margin-top:26px;width:min(640px,92vw);
  background:var(--panel);border:1px solid var(--line);font-family:'Share Tech Mono',monospace}
.lb-cell{flex:1;padding:14px 10px;text-align:center;border-right:1px solid var(--line);
  font-size:11px;color:var(--mut);text-decoration:none}
.lb-cell:last-child{border-right:none}
.lb-cell b{display:block;font-size:15px;color:var(--txt);margin-bottom:3px}
.lb-vote:hover{background:rgba(255,90,31,.08)}
.lb-vote b{color:var(--acc)}
@media(max-width:600px){.livebar{flex-direction:column}.lb-cell{border-right:none;border-bottom:1px solid var(--line)}}