:root {
  --bg: #090a0f;
  --bg2: #0d0f16;
  --panel: rgba(18, 19, 28, .72);
  --panel-solid: #11131b;
  --line: rgba(255,255,255,.09);
  --muted: #85899a;
  --text: #f4f3f8;
  --purple: #8b5cf6;
  --violet: #c084fc;
  --green: #4ade80;
  --red: #fb7185;
  --shadow: 0 24px 80px rgba(0,0,0,.45);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 12%, rgba(139,92,246,.10), transparent 28%),
    radial-gradient(circle at 12% 58%, rgba(192,132,252,.05), transparent 24%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  min-height: 100vh;
}
body:before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.noise { position: fixed; inset:0; opacity:.025; pointer-events:none; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.ambient { position:fixed; width:500px; height:500px; border-radius:50%; filter:blur(120px); opacity:.12; pointer-events:none; }
.ambient-a { background:#8b5cf6; right:-220px; top:240px; }
.ambient-b { background:#c084fc; left:-280px; bottom:100px; }

.nav-shell { position:sticky; top:0; z-index:15; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(9,10,15,.78); backdrop-filter:blur(22px); }
.nav { height:82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:11px; min-width:max-content; }
.brand-logo { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 0 13px rgba(139,92,246,.45)); }
.brand-word { font-weight:800; letter-spacing:.08em; font-size:13px; }
.brand-word b { color:var(--violet); font-size:10px; margin-left:5px; }
.nav-links { display:flex; gap:30px; margin-left:auto; margin-right:10px; }
.nav-links a { color:#9699a8; font-size:11px; font-weight:800; letter-spacing:.14em; transition:.2s; }
.nav-links a:hover { color:#fff; }
.account-slot { min-width:175px; display:flex; justify-content:flex-end; }
.steam-login, .account-button {
  display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:rgba(255,255,255,.04);
  padding:9px 12px; border-radius:13px; font-size:10px; font-weight:800; letter-spacing:.08em; cursor:pointer; transition:.2s;
}
.steam-login:hover, .account-button:hover { border-color:rgba(192,132,252,.45); background:rgba(139,92,246,.09); }
.steam-mark { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:#fff; color:#101216; font-weight:900; }
.account-button img { width:29px; height:29px; border-radius:9px; object-fit:cover; }
.account-button .online { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.hero { min-height:680px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; padding:76px 0 70px; }
.eyebrow { color:#a4a6b5; font-size:10px; font-weight:800; letter-spacing:.22em; display:flex; align-items:center; gap:9px; }
.eyebrow span { width:6px; height:6px; border-radius:50%; background:var(--purple); box-shadow:0 0 14px var(--purple); }
.hero h1, h2 { font-family:"Barlow Condensed", sans-serif; margin:17px 0 13px; line-height:.82; letter-spacing:-.035em; font-size:clamp(74px, 9vw, 122px); font-weight:800; }
h2 { font-size:clamp(52px, 6vw, 78px); }
em { font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.72); text-shadow:0 0 35px rgba(139,92,246,.17); }
.hero-copy > p { max-width:520px; color:#999cab; font-size:15px; line-height:1.75; }
.hero-actions { display:flex; gap:11px; margin-top:28px; }
.btn { border:1px solid transparent; border-radius:13px; padding:13px 18px; font-size:10px; font-weight:900; letter-spacing:.13em; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:14px; }
.btn-primary { background:linear-gradient(135deg,#9b6bff,#6f42df); box-shadow:0 12px 40px rgba(139,92,246,.22); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 50px rgba(139,92,246,.33); }
.btn-ghost { border-color:var(--line); background:rgba(255,255,255,.025); color:#d8d8df; }
.btn-ghost:hover { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); }
.btn.small { padding:11px 14px; }
.micro-stats { display:flex; gap:30px; margin-top:48px; }
.micro-stats div { display:flex; flex-direction:column; gap:3px; }
.micro-stats strong { font-family:"Barlow Condensed"; font-size:25px; }
.micro-stats span { color:#626675; font-size:8px; font-weight:800; letter-spacing:.16em; }
.hero-logo-wrap { position:relative; min-height:480px; display:grid; place-items:center; }
.hero-logo { width:min(580px, 90%); position:relative; z-index:2; filter:drop-shadow(0 0 18px rgba(139,92,246,.32)) drop-shadow(0 35px 55px rgba(0,0,0,.7)); animation:float 6s ease-in-out infinite; }
.hero-ring { position:absolute; border:1px solid rgba(139,92,246,.17); border-radius:50%; transform:rotate(-18deg); }
.ring-one { width:430px; height:430px; }
.ring-two { width:570px; height:180px; }
.hero-tag { position:absolute; right:5%; bottom:45px; color:#5d606e; font-size:9px; letter-spacing:.2em; }
@keyframes float { 50% { transform:translateY(-9px) scale(1.01); } }
.server-section, .store-section, .about-section { padding:65px 0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.section-heading h2 { margin-bottom:0; }
.server-card {
  display:grid; grid-template-columns:1.55fr .75fr .85fr auto; align-items:center; gap:28px;
  padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  backdrop-filter:blur(20px); box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.server-card:before { content:""; position:absolute; width:280px; height:280px; background:rgba(139,92,246,.12); filter:blur(90px); right:15%; top:-190px; }
.server-status { display:flex; align-items:center; gap:8px; color:#a8abb9; font-size:9px; font-weight:900; letter-spacing:.16em; }
.server-status i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 13px var(--green); animation:pulse 1.8s infinite; }
.server-status i.offline { background:var(--red); box-shadow:0 0 13px var(--red); animation:none; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.75); } }
.server-main h3 { margin:12px 0 5px; font-family:"Barlow Condensed"; font-size:31px; letter-spacing:.02em; }
.server-main h3 span { font-family:Inter; color:#6f7280; font-size:8px; letter-spacing:.17em; vertical-align:middle; }
.server-main p { margin:0; color:#666a79; font-size:9px; font-weight:700; letter-spacing:.1em; }
.ip-line { display:flex; align-items:center; gap:8px; margin-top:20px; color:#bbbcc6; font-family:monospace; font-size:12px; }
.ip-line button { border:0; color:#858797; background:none; cursor:pointer; }
.server-metric { position:relative; z-index:1; }
.server-metric > span, .server-metric > small { display:block; color:#626675; font-size:8px; font-weight:800; letter-spacing:.15em; }
.server-metric strong { display:block; margin:7px 0 5px; font-family:"Barlow Condensed"; font-size:38px; }
.server-metric strong small { color:#6d7080; font-size:17px; }
.meter { height:3px; width:100%; max-width:130px; background:#252631; border-radius:4px; overflow:hidden; }
.meter i { display:block; height:100%; width:0%; background:linear-gradient(90deg,#6f42df,#c084fc); box-shadow:0 0 10px #8b5cf6; }
.join-button { padding:15px 17px; border-radius:12px; background:#f2f1f5; color:#101116; font-size:9px; font-weight:900; letter-spacing:.12em; white-space:nowrap; }
.join-button:hover { background:#fff; transform:translateY(-1px); }
.section-lede { color:#777b8b; max-width:620px; font-size:13px; line-height:1.7; margin-top:-5px; margin-bottom:26px; }
.store-state { color:#686b7b; font-size:9px; font-weight:800; letter-spacing:.16em; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product {
  border:1px solid var(--line); border-radius:20px; padding:22px; min-height:285px; display:flex; flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); position:relative; overflow:hidden; transition:.25s;
}
.product:hover { transform:translateY(-4px); border-color:rgba(139,92,246,.4); box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 35px rgba(139,92,246,.08); }
.product.featured { border-color:rgba(139,92,246,.5); box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 45px rgba(139,92,246,.08); }
.product .product-glow { position:absolute; width:180px; height:180px; right:-90px; top:-90px; border-radius:50%; background:rgba(139,92,246,.15); filter:blur(50px); }
.product-tag { color:#a879ff; font-size:8px; font-weight:900; letter-spacing:.18em; }
.product h3 { font-family:"Barlow Condensed"; font-size:35px; margin:10px 0 7px; }
.product p { color:#777b8a; font-size:11px; line-height:1.65; min-height:54px; margin:0; }
.product-price { margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:12px; }
.product-price strong { font-family:"Barlow Condensed"; font-size:34px; }
.product-price small { color:#626675; font-size:8px; letter-spacing:.1em; }
.buy { width:100%; justify-content:center; margin-top:16px; }
.product-image { width:100%; height:88px; object-fit:contain; border-radius:13px; margin-bottom:5px; }
.empty-store { grid-column:1/-1; border:1px dashed rgba(255,255,255,.12); padding:38px; border-radius:18px; color:#6c6f7e; text-align:center; font-size:12px; }
.about-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; align-items:start; padding-top:95px; padding-bottom:110px; }
.about-copy h2 { margin-top:18px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.about-grid article { background:#0e1017; padding:25px; min-height:170px; }
.about-grid b { color:#6d7180; font-family:monospace; font-size:10px; }
.about-grid h3 { font-family:"Barlow Condensed"; font-size:25px; margin:24px 0 7px; }
.about-grid p { color:#707484; font-size:11px; line-height:1.6; margin:0; }
.footer { border-top:1px solid var(--line); background:#07080c; }
.footer-inner { min-height:150px; display:flex; align-items:center; gap:35px; }
.footer-brand { display:flex; align-items:center; gap:11px; margin-right:auto; }
.footer-brand img { width:55px; height:55px; object-fit:contain; }
.footer-brand div { display:flex; flex-direction:column; gap:5px; }
.footer-brand strong { font-size:11px; letter-spacing:.12em; }
.footer-brand span, .copyright { color:#505360; font-size:8px; letter-spacing:.13em; }
.footer-links { display:flex; gap:17px; flex-wrap:wrap; justify-content:flex-end; }
.footer-links a { color:#747785; font-size:9px; }
.footer-links a:hover { color:#fff; }
.copyright { margin-left:auto; }
.modal-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; background:rgba(2,2,5,.72); backdrop-filter:blur(12px); padding:20px; }
.modal-backdrop[hidden] { display:none; }
.account-panel { width:min(450px,100%); background:#10121a; border:1px solid rgba(255,255,255,.11); border-radius:24px; box-shadow:0 35px 120px rgba(0,0,0,.7),0 0 50px rgba(139,92,246,.12); padding:30px; position:relative; }
.modal-close { position:absolute; right:16px; top:13px; border:0; background:none; color:#777b89; font-size:28px; cursor:pointer; }
.account-head { display:flex; gap:18px; align-items:center; padding-bottom:24px; border-bottom:1px solid var(--line); }
.account-head img { width:76px; height:76px; object-fit:cover; border-radius:18px; border:1px solid rgba(255,255,255,.1); }
.account-head h3 { margin:0 0 5px; font-family:"Barlow Condensed"; font-size:31px; }
.account-head p { margin:0; color:#686c7b; font-size:10px; }
.link-row { display:flex; justify-content:space-between; align-items:center; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.link-row > div:first-child { display:flex; flex-direction:column; gap:5px; }
.link-row strong { font-size:10px; letter-spacing:.1em; }
.link-row span { color:#6c7080; font-size:9px; }
.linked { color:var(--green); font-size:9px; font-weight:900; letter-spacing:.1em; }
.unlinked { color:#fbbf24; font-size:9px; font-weight:900; letter-spacing:.1em; }
.account-actions { display:flex; gap:9px; margin-top:22px; }
.account-actions .btn { flex:1; justify-content:center; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; z-index:50; padding:12px 16px; border-radius:12px; background:#171923; border:1px solid rgba(139,92,246,.35); box-shadow:0 15px 45px rgba(0,0,0,.5); color:#eee; font-size:10px; font-weight:800; letter-spacing:.08em; transition:.25s; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) {
  .nav-links { display:none; }
  .account-slot { min-width:0; }
  .hero { grid-template-columns:1fr; padding-top:55px; }
  .hero-logo-wrap { min-height:370px; margin-top:-20px; }
  .server-card { grid-template-columns:1fr 1fr; }
  .join-button { text-align:center; }
  .product-grid { grid-template-columns:1fr 1fr; }
  .about-section { grid-template-columns:1fr; gap:35px; }
}
@media (max-width:620px) {
  .container { width:min(100% - 28px,1180px); }
  .brand-word { display:none; }
  .nav { height:70px; }
  .hero h1 { font-size:70px; }
  .hero-logo { width:100%; }
  .hero-ring.ring-one { width:300px; height:300px; }
  .hero-ring.ring-two { width:350px; height:120px; }
  .server-card { grid-template-columns:1fr; }
  .server-metric { padding-top:6px; }
  .product-grid, .about-grid { grid-template-columns:1fr; }
  .section-heading { align-items:start; flex-direction:column; }
  .footer-inner { flex-direction:column; align-items:flex-start; padding:30px 0; }
  .footer-links { justify-content:flex-start; }
  .copyright { margin-left:0; }
}