:root {
  --void:#04060c; --deep:#080d18; --panel:#0b1322; --line:#16243d; --tooltip:#03060f;
  --volt:#1b6bff; --ice:#5ba8ff; --frost:#b9dcff; --gold:#ffb43d;
  --text:#dce9fb; --muted:#7f93b3;
  --pvp:#5ba8ff; --smp:#48e2b0;
  --r-vortex:#5ba8ff; --r-plus:#55ffff; --r-vip:#ffb43d;
  --display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --pixel:'Silkscreen',ui-monospace,monospace;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --shell:1180px; --gutter:clamp(20px,5vw,56px);
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--void); color:var(--text);
  font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(115% 55% at 70% -8%, rgba(27,107,255,.30), transparent 62%),
    radial-gradient(70% 45% at 8% 4%, rgba(91,168,255,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,180,255,.020) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(120,180,255,.020) 0 1px, transparent 1px 4px);
}
h1,h2,h3 { font-family:var(--display); font-weight:800; letter-spacing:-.025em; margin:0; }
p { margin:0; }
:focus-visible { outline:2px solid var(--ice); outline-offset:3px; }
.eyebrow { font-family:var(--pixel); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin:0 0 18px; }

/* topbar */
.topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:28px;
  padding:14px var(--gutter); background:rgba(4,6,12,.84); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.brand-mark { width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #cfe6ff 0 18%, var(--volt) 30% 60%, #06122c 62%);
  box-shadow:0 0 12px rgba(27,107,255,.9); }
.brand-name { font-family:var(--pixel); font-size:14px; letter-spacing:.04em; }
.topnav { display:flex; gap:22px; margin-left:auto; font-size:14.5px; }
.topnav a { color:var(--muted); text-decoration:none; }
.topnav a:hover { color:var(--text); }
.ip-copy { display:flex; flex-direction:column; align-items:flex-start; padding:7px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:4px; color:var(--text); cursor:pointer; font:inherit; }
.ip-copy:hover { border-color:var(--volt); }
.ip-label { font-family:var(--pixel); font-size:9px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.ip-value { font-family:var(--mono); font-size:13px; line-height:1.2; }
.ip-copy.copied .ip-value { color:var(--smp); }

/* hero */
.hero { max-width:var(--shell); margin:0 auto; padding:clamp(40px,6vw,72px) var(--gutter) clamp(40px,6vw,76px);
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,60px); align-items:center; }
.logo { display:block; width:min(100%,430px); margin:0 0 26px -12px; }
.hero h1 { font-size:clamp(2.4rem,4.6vw,3.5rem); line-height:.98; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--ice); }
.lead { color:var(--muted); font-size:clamp(15.5px,1.4vw,17px); max-width:46ch; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:30px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:13px 26px; border:0; border-radius:4px;
  font:600 15px var(--body); text-decoration:none; cursor:pointer; transition:transform .12s ease, background .15s ease; }
.btn-primary { background:linear-gradient(180deg,#3a86ff,#1355d6); color:#f2f8ff;
  box-shadow:0 0 0 1px rgba(91,168,255,.45), 0 12px 30px -12px rgba(27,107,255,.95); }
.btn-primary:hover { transform:translateY(-2px); }
.btn-primary:disabled { background:var(--panel); color:var(--muted); box-shadow:none; cursor:not-allowed; transform:none; }
.status-pill { display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border:1px solid var(--line);
  border-radius:999px; font-size:13.5px; color:var(--text); background:rgba(11,19,34,.6); }
.status-pill b { font-weight:600; }
.status-pill .dot { width:7px; height:7px; border-radius:50%; }
.dot.pvp { background:var(--pvp); box-shadow:0 0 0 4px rgba(91,168,255,.15); }
.dot.smp { background:var(--smp); box-shadow:0 0 0 4px rgba(72,226,176,.14); }
.status-sep { color:var(--line); }

/* console */
.console { background:linear-gradient(180deg,#0a1120,#070c16); border:1px solid var(--line); border-radius:6px;
  box-shadow:0 26px 60px -30px #000; overflow:hidden; }
.console-head { display:flex; justify-content:space-between; align-items:center; padding:11px 16px;
  border-bottom:1px solid var(--line); background:rgba(0,0,0,.35); }
.console-title { font-family:var(--pixel); font-size:10px; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.console-meta { font-family:var(--mono); font-size:11px; color:var(--smp); }
.console-feed { list-style:none; margin:0; padding:16px; font-family:var(--mono); font-size:12.5px; line-height:1.8;
  min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.console-feed li { opacity:0; animation:line-in .32s ease forwards; }
.console-feed .t { color:#41546f; margin-right:8px; }
.console-feed .cmd { color:var(--ice); }
.console-feed .ok { color:var(--smp); }
.console-feed .say { color:var(--frost); }
.console-feed .dim { color:var(--muted); }
.console-feed .tag-pvp { color:var(--pvp); }
.console-feed .tag-smp { color:var(--smp); }
@keyframes line-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }

/* shelf */
.shelf { max-width:var(--shell); margin:0 auto; padding:clamp(40px,6vw,76px) var(--gutter) 0; scroll-margin-top:80px; }
.shelf-head { margin-bottom:28px; max-width:62ch; }
.shelf-head h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:8px; }
.shelf-head p { color:var(--muted); font-size:15px; }
.grid-ranks { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }

/* rank cards, built like an item tooltip */
.card { position:relative; padding:2px; border-radius:5px; background:linear-gradient(180deg,#2f7bff,#0a2255);
  transition:transform .16s ease, filter .16s ease; }
.card[data-tier='vip'] { background:linear-gradient(180deg,#ffc55c,#7a4c05); }
.card:hover { transform:translateY(-4px); filter:brightness(1.08); }
.card-inner { display:flex; flex-direction:column; height:100%; padding:22px 22px 20px; border-radius:3px;
  background:var(--tooltip); overflow:hidden; position:relative; }
.card-inner::after { content:''; position:absolute; inset:-40%; opacity:0; transform:translateX(-30%); pointer-events:none;
  background:repeating-linear-gradient(66deg,transparent 0 14px,rgba(120,190,255,.18) 14px 20px,transparent 20px 34px);
  transition:opacity .3s ease; }
.card[data-tier='vip'] .card-inner::after { background:repeating-linear-gradient(66deg,transparent 0 14px,rgba(255,196,92,.16) 14px 20px,transparent 20px 34px); }
.card:hover .card-inner::after { opacity:1; animation:glint 2.4s linear infinite; }
@keyframes glint { from { transform:translateX(-30%); } to { transform:translateX(30%); } }
.card-icon { width:44px; height:44px; margin-bottom:14px; image-rendering:pixelated; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6)); }
.card-name { font-family:var(--pixel); font-size:17px; line-height:1.3; text-shadow:2px 2px 0 rgba(0,0,0,.7); margin-bottom:5px; }
.card[data-tier='vortex'] .card-name { color:var(--r-vortex); }
.card[data-tier='plus'] .card-name { color:var(--r-plus); }
.card[data-tier='vip'] .card-name { color:var(--r-vip); }
.card-summary { color:#93a7c4; font-size:13.5px; line-height:1.5; margin-bottom:18px; }
.pgroup { margin-bottom:15px; }
.pgroup-label { display:inline-flex; align-items:center; gap:6px; font-family:var(--pixel); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }
.pgroup-label::before { content:''; width:5px; height:5px; }
.pgroup-label.pvp { color:var(--pvp); } .pgroup-label.pvp::before { background:var(--pvp); }
.pgroup-label.smp { color:var(--smp); } .pgroup-label.smp::before { background:var(--smp); }
.pgroup-label.net { color:var(--muted); } .pgroup-label.net::before { background:var(--muted); }
.pgroup ul { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.pgroup li { position:relative; padding-left:14px; font-size:13.5px; color:#c3d5ee; line-height:1.45; }
.pgroup li::before { content:''; position:absolute; left:0; top:7px; width:4px; height:4px; background:var(--volt); }
.card[data-tier='vip'] .pgroup li::before { background:var(--gold); }
.card-foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-price { font-family:var(--display); font-weight:800; font-size:23px; }
.card-buy { padding:10px 20px; border:0; border-radius:3px; background:#12294f; color:var(--text);
  font:600 14px var(--body); cursor:pointer; transition:background .15s ease, color .15s ease; }
.card-buy:hover { background:var(--volt); color:#fff; }
.card[data-tier='vip'] .card-buy { background:#3a2a08; }
.card[data-tier='vip'] .card-buy:hover { background:var(--gold); color:#2a1c00; }
.card-flag { position:absolute; top:-9px; right:14px; z-index:2; padding:4px 10px; border-radius:3px;
  font-family:var(--pixel); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.card-flag.blue { background:var(--volt); color:#fff; }
.card-flag.gold { background:var(--gold); color:#2a1c00; }

/* steps + faq */
.steps { max-width:var(--shell); margin:0 auto; padding:clamp(52px,7vw,92px) var(--gutter) 0; scroll-margin-top:80px; }
.steps h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:28px; }
.step-list { list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.step-list li { background:var(--deep); padding:26px 24px 28px; }
.step-no { font-family:var(--pixel); font-size:11px; color:var(--ice); }
.step-list h3 { font-size:1.2rem; margin:12px 0 8px; }
.step-list p { color:var(--muted); font-size:14.5px; }
.faq { max-width:var(--shell); margin:0 auto; padding:clamp(52px,7vw,92px) var(--gutter) clamp(56px,7vw,96px); scroll-margin-top:80px; }
.faq h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:24px; }
.faq-list { display:grid; gap:10px; max-width:780px; }
.faq details { background:var(--deep); border:1px solid var(--line); border-radius:5px; padding:16px 20px; }
.faq summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--ice); font-family:var(--mono); }
.faq details[open] summary::after { content:'–'; }
.faq details p { color:var(--muted); font-size:14.5px; margin-top:12px; }

/* footer */
.foot { border-top:1px solid var(--line); padding:34px var(--gutter); display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:flex-start; max-width:var(--shell); margin:0 auto; }
.foot-brand { font-family:var(--pixel); font-size:13px; }
.foot p { color:#5a6c88; font-size:12.5px; max-width:54ch; margin-top:8px; }
.foot-links { display:flex; flex-wrap:wrap; gap:20px; font-size:14px; }
.foot-links a { color:var(--muted); text-decoration:none; }

/* checkout */
.sheet { width:min(460px,calc(100vw - 32px)); padding:30px; border:1px solid #1d3358; border-radius:8px;
  background:var(--deep); color:var(--text); box-shadow:0 40px 90px -30px #000; }
.sheet::backdrop { background:rgba(2,4,9,.78); backdrop-filter:blur(3px); }
.sheet-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border:0; border-radius:4px;
  background:transparent; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.sheet-close:hover { background:var(--panel); color:var(--text); }
.sheet-title { font-size:1.5rem; margin-bottom:22px; }
.field { display:block; margin-bottom:6px; }
.field span { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field em { font-style:normal; opacity:.7; }
.field input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  background:var(--void); color:var(--text); font:15px var(--body); }
.field input:focus { border-color:var(--volt); outline:none; }
.field-hint { font-size:12.5px; color:var(--muted); margin-bottom:18px; min-height:18px; }
.field-hint.bad { color:#ff8f6b; }
.sheet-summary { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:20px 0 16px;
  padding:14px 16px; background:var(--void); border:1px solid var(--line); border-radius:4px; }
.sum-name { display:block; font-family:var(--pixel); font-size:13px; }
.sum-player { display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.sum-price { font-family:var(--display); font-weight:800; font-size:20px; }
.sheet-legal { color:#5a6c88; font-size:12px; margin-top:14px; }
.demo-note { margin-top:18px; padding:12px 14px; border-radius:4px; border:1px solid rgba(91,168,255,.35);
  background:rgba(27,107,255,.10); color:var(--frost); font-size:13px; }

@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:34px; } .topnav { display:none; } .logo { margin-left:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } .console-feed li { opacity:1; } }

/* ---------------------------------------------- delivery tracking, per server */
.sheet-error { margin-bottom:14px; padding:10px 12px; border-radius:4px;
  background:rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.3); color:#ff9b8f; font-size:13.5px; }
.track { list-style:none; margin:6px 0 18px; padding:0; display:grid; gap:10px; }
.track li { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line);
  border-radius:5px; background:var(--void); font-size:14px; }
.track .srv { font-family:var(--pixel); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ice); min-width:34px; }
.track .state { margin-left:auto; font-size:12.5px; color:var(--muted); }
.track .dot { width:9px; height:9px; border-radius:50%; background:#22354f; flex:none; }
.track li.running .dot { background:var(--volt); animation:pulse 1.1s ease-in-out infinite; }
.track li.done .dot { background:var(--smp); }
.track li.done .state { color:var(--smp); }
.track li.failed .dot { background:#ff6b6b; }
.track li.failed .state { color:#ff9b8f; }
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(27,107,255,.55); }
  50% { box-shadow:0 0 0 7px rgba(27,107,255,0); }
}
.track-note { color:var(--muted); font-size:13.5px; margin-bottom:16px; min-height:20px; }
.status-pill.off .dot { background:#ff6b6b; box-shadow:none; }