:root {
  --bg: #07080d;
  --bg2: #0d1018;
  --panel: #121722;
  --panel2: #171c27;
  --purple: #8b5cf6;
  --purple2: #a78bfa;
  --purple3: #5b21b6;
  --gold: #f5c451;
  --text: #f5f7fa;
  --muted: #9299a6;
  --line: rgba(167, 139, 250, .25);
  --danger: #ef4444;
  --ok: #22c55e;
  --shadow: 0 20px 70px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 70% 10%, rgba(107, 33, 168, .22), transparent 32%),
    linear-gradient(180deg, #05060a 0%, #090b11 55%, #06070a 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.muted { color: var(--muted); }
.eyebrow { color: var(--purple2); font-size: .77rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 900; }
.section { position: relative; padding: 92px 0; overflow: hidden; }
.section::before { content:""; position:absolute; 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: 32px 32px; mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent); }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; position:relative; z-index:1; }
.section-head h2 { margin:6px 0 0; font-size: clamp(2rem, 5vw, 4rem); line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }
.section-head p { max-width:520px; color:var(--muted); line-height:1.7; }

.site-header { position:sticky; top:0; z-index:50; backdrop-filter: blur(15px); background:rgba(4,5,9,.78); border-bottom:1px solid rgba(139,92,246,.28); }
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:flex; align-items:center; gap:12px; min-width:170px; }
.brand img { width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(139,92,246,.45)); }
.brand span { font-weight:950; letter-spacing:.08em; font-size:.88rem; }
.nav-links { display:flex; align-items:center; gap:28px; font-size:.78rem; font-weight:800; letter-spacing:.12em; }
.nav-links a { color:#cfd3db; transition:.2s ease; }
.nav-links a:hover, .nav-links a.active { color:#fff; text-shadow:0 0 18px rgba(167,139,250,.8); }
.server-pill { display:flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(167,139,250,.32); background:#0b0e15; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); cursor:pointer; }
.server-dot { width:8px; height:8px; border-radius:50%; background:#777; box-shadow:0 0 10px #777; }
.server-dot.online { background:var(--ok); box-shadow:0 0 12px var(--ok); }
.server-copy { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.server-copy strong { display:block; color:#fff; font-size:.73rem; letter-spacing:.04em; }
.menu-btn { display:none; border:1px solid var(--line); background:#0b0e15; color:white; padding:10px 12px; }

.hero { min-height:calc(100vh - 76px); display:grid; place-items:center; position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid rgba(167,139,250,.18); }
.hero::before { content:""; position:absolute; inset:0; background:url('/assets/phantom-banner.png') center/cover no-repeat; z-index:-4; transform:scale(1.03); filter:saturate(1.05) contrast(1.06) brightness(.58); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,6,10,.24), rgba(5,6,10,.62) 62%, #07080d 100%), radial-gradient(circle at 50% 35%, rgba(124,58,237,.15), transparent 37%); z-index:-3; }
.prison-bars { position:absolute; inset:0; z-index:-2; opacity:.13; background:repeating-linear-gradient(90deg, transparent 0 76px, #000 78px 88px, transparent 90px 160px); }
.hero-content { text-align:center; padding:90px 0 74px; width:min(950px,92vw); }
.hero-logo { width:min(790px, 88vw); margin:0 auto 12px; filter:drop-shadow(0 16px 18px rgba(0,0,0,.9)) drop-shadow(0 0 25px rgba(139,92,246,.35)); }
.hero-mode { font-weight:1000; letter-spacing:.48em; font-size:clamp(.82rem,1.6vw,1.05rem); color:#d8ccff; margin-left:.48em; }
.hero-tag { margin:18px 0 0; font-weight:1000; font-size:clamp(1.35rem,3vw,2.35rem); letter-spacing:.12em; text-transform:uppercase; text-shadow:0 0 28px rgba(139,92,246,.52); }
.hero-sub { width:min(670px,90%); margin:18px auto 28px; color:#c2c5ce; line-height:1.7; }
.actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 21px; font-size:.78rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; transition:.2s ease; clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:linear-gradient(135deg,#6d28d9,#8b5cf6 60%,#5b21b6); box-shadow:0 12px 35px rgba(109,40,217,.3), inset 0 0 0 1px rgba(255,255,255,.17); }
.btn-secondary { color:white; background:rgba(7,9,14,.75); border:1px solid rgba(167,139,250,.35); }
.btn-gold { background:linear-gradient(135deg,#9a6d12,#f5c451); color:#130f05; }
.hero-stats { margin-top:34px; display:flex; justify-content:center; gap:32px; flex-wrap:wrap; }
.hero-stat { min-width:140px; padding:12px 16px; border-top:1px solid rgba(167,139,250,.4); color:var(--muted); text-transform:uppercase; font-size:.69rem; letter-spacing:.12em; }
.hero-stat b { display:block; color:white; font-size:1rem; margin-top:4px; letter-spacing:.02em; }

.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative; z-index:1; }
.card { position:relative; background:linear-gradient(160deg,rgba(22,27,39,.96),rgba(10,12,19,.98)); border:1px solid rgba(167,139,250,.22); padding:24px; min-height:100%; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); box-shadow:var(--shadow), inset 0 0 40px rgba(111,61,180,.04); }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.04),transparent 35%); }
.card.featured { border-color:rgba(167,139,250,.7); box-shadow:0 0 0 1px rgba(139,92,246,.12), 0 0 45px rgba(109,40,217,.19), var(--shadow); }
.card .badge { position:absolute; top:0; right:0; background:var(--purple); color:white; padding:7px 12px; font-size:.62rem; font-weight:1000; letter-spacing:.11em; }
.rank-kicker { font-size:.66rem; color:var(--purple2); letter-spacing:.19em; font-weight:900; text-transform:uppercase; }
.card h3 { font-size:1.65rem; margin:8px 0 7px; letter-spacing:.03em; }
.card p { color:var(--muted); line-height:1.6; font-size:.9rem; }
.price { font-size:2rem; font-weight:1000; margin:20px 0; }
.price small { font-size:.75rem; color:var(--muted); font-weight:700; }
.features { list-style:none; margin:16px 0 24px; padding:0; display:grid; gap:9px; color:#d7dae1; font-size:.82rem; }
.features li { position:relative; padding-left:18px; line-height:1.45; }
.features li::before { content:"◆"; color:var(--purple2); position:absolute; left:0; top:1px; font-size:.58rem; }
.card .btn { width:100%; }

.split { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; position:relative; z-index:1; }
.souls-art { border:1px solid rgba(167,139,250,.3); background:#090b11; position:relative; overflow:hidden; clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px); }
.souls-art img { width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(1.08) contrast(1.05); }
.souls-art::after { content:"SOULS"; position:absolute; left:20px; bottom:18px; padding:8px 12px; background:rgba(5,6,10,.76); border:1px solid rgba(167,139,250,.4); font-weight:1000; letter-spacing:.18em; font-size:.72rem; }
.big-copy h2 { font-size:clamp(2.4rem,6vw,5.2rem); line-height:.9; margin:8px 0 18px; text-transform:uppercase; }
.big-copy p { color:var(--muted); line-height:1.8; font-size:1rem; }
.pill-list { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 28px; }
.pill { border:1px solid rgba(167,139,250,.25); padding:8px 10px; font-size:.68rem; letter-spacing:.08em; color:#ded8ff; text-transform:uppercase; background:rgba(139,92,246,.08); }

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; z-index:1; }
.info-box { padding:28px; border-left:2px solid var(--purple); background:linear-gradient(90deg,rgba(139,92,246,.09),rgba(18,23,34,.46)); }
.info-box b { display:block; font-size:1.05rem; margin-bottom:8px; }
.info-box p { color:var(--muted); margin:0; line-height:1.65; font-size:.9rem; }

.page-hero { padding:84px 0 54px; position:relative; overflow:hidden; border-bottom:1px solid rgba(167,139,250,.2); }
.page-hero::before { content:""; position:absolute; inset:0; background:url('/assets/phantom-banner.png') center 42%/cover no-repeat; filter:brightness(.28) saturate(1.1); z-index:-2; }
.page-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07080d 0%,rgba(7,8,13,.55) 50%,#07080d 100%); z-index:-1; }
.page-hero h1 { font-size:clamp(2.5rem,7vw,5.5rem); line-height:.9; margin:8px 0 14px; text-transform:uppercase; }
.page-hero p { color:#c5c9d3; max-width:680px; line-height:1.75; }
.category-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:34px 0 0; }
.category-tabs a { border:1px solid var(--line); padding:10px 14px; font-size:.7rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:#cbd0da; }
.category-tabs a.active { background:var(--purple); color:white; border-color:var(--purple); }
.store-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.store-grid .card { min-height:470px; display:flex; flex-direction:column; }
.store-grid .features { flex:1; }
.notice { border:1px solid rgba(245,196,81,.24); background:rgba(245,196,81,.06); padding:16px 18px; color:#e7d9aa; font-size:.84rem; line-height:1.55; margin-bottom:24px; }

.cart-fab { position:fixed; right:22px; bottom:22px; z-index:45; background:var(--purple); color:white; border:none; width:58px; height:58px; border-radius:50%; cursor:pointer; box-shadow:0 15px 35px rgba(109,40,217,.42); font-weight:1000; }
.cart-count { position:absolute; right:-3px; top:-3px; min-width:20px; height:20px; border-radius:10px; background:var(--gold); color:#111; display:grid; place-items:center; font-size:.68rem; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.68); z-index:80; display:none; }
.drawer-backdrop.open { display:block; }
.drawer { position:absolute; right:0; top:0; height:100%; width:min(440px,100%); background:#0b0e15; border-left:1px solid rgba(167,139,250,.28); padding:24px; overflow:auto; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:16px; }
.icon-btn { width:38px; height:38px; border:1px solid var(--line); background:transparent; color:white; cursor:pointer; }
.cart-items { display:grid; gap:12px; margin:20px 0; }
.cart-item { border:1px solid rgba(255,255,255,.08); background:#11151d; padding:14px; display:flex; justify-content:space-between; gap:18px; }
.cart-item b { display:block; }
.cart-item small { color:var(--muted); }
.cart-item button { background:none; border:none; color:#fca5a5; cursor:pointer; font-size:.75rem; }
.cart-total { display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); font-weight:900; }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.78); display:none; place-items:center; z-index:100; padding:20px; }
.modal-backdrop.open { display:grid; }
.modal { width:min(500px,100%); background:#0c0f17; border:1px solid rgba(167,139,250,.35); box-shadow:0 35px 80px rgba(0,0,0,.6),0 0 40px rgba(109,40,217,.12); padding:28px; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.modal h2 { margin-top:0; }
.field { display:grid; gap:8px; margin:18px 0; }
.field label { font-size:.72rem; color:#d9dbe2; text-transform:uppercase; font-weight:900; letter-spacing:.09em; }
.field input { width:100%; background:#07090e; color:white; border:1px solid rgba(167,139,250,.26); padding:13px 14px; outline:none; }
.field input:focus { border-color:var(--purple2); box-shadow:0 0 0 3px rgba(139,92,246,.1); }
.error { color:#fca5a5; font-size:.82rem; min-height:1.2em; }

.content-panel { position:relative; z-index:1; background:rgba(15,18,27,.78); border:1px solid rgba(167,139,250,.16); padding:30px; line-height:1.8; color:#c7cbd5; }
.content-panel h2, .content-panel h3 { color:white; }
.empty-state { text-align:center; padding:50px 20px; border:1px dashed rgba(167,139,250,.28); color:var(--muted); }

.admin-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:24px 0; }
.stat-card { background:#11151d; border:1px solid rgba(167,139,250,.18); padding:20px; }
.stat-card span { color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; }
.stat-card strong { display:block; font-size:1.8rem; margin-top:5px; }
.table-wrap { overflow:auto; border:1px solid rgba(255,255,255,.08); margin:18px 0 30px; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th, td { text-align:left; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.07); font-size:.8rem; }
th { color:#aaaec0; text-transform:uppercase; letter-spacing:.07em; background:#0c0f16; }
.status { display:inline-block; padding:5px 8px; font-size:.65rem; font-weight:900; text-transform:uppercase; border:1px solid rgba(255,255,255,.14); }
.status.delivered, .status.paid { color:#86efac; border-color:rgba(34,197,94,.3); }
.status.failed { color:#fca5a5; border-color:rgba(239,68,68,.3); }

.footer { border-top:1px solid rgba(167,139,250,.16); padding:34px 0; background:#05060a; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer small { color:#777f8f; line-height:1.7; max-width:720px; }
.footer-links { display:flex; gap:14px; flex-wrap:wrap; color:#a9afbb; font-size:.75rem; }

@media (max-width: 980px) {
  .cards { grid-template-columns:repeat(2,1fr); }
  .store-grid { grid-template-columns:repeat(2,1fr); }
  .split { grid-template-columns:1fr; }
  .info-grid { grid-template-columns:1fr; }
  .admin-grid { grid-template-columns:repeat(2,1fr); }
  .nav-links { display:none; position:absolute; left:0; right:0; top:76px; padding:18px; background:#080a10; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .menu-btn { display:block; }
  .server-pill { margin-left:auto; }
}
@media (max-width: 650px) {
  .container { width:min(100% - 24px,1180px); }
  .section { padding:68px 0; }
  .cards, .store-grid { grid-template-columns:1fr; }
  .section-head { display:block; }
  .hero { min-height:78vh; }
  .hero-content { padding-top:58px; }
  .hero-stats { gap:8px; }
  .hero-stat { min-width:100px; }
  .server-pill { display:none; }
  .brand { min-width:0; }
  .brand span { display:none; }
  .admin-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { display:block; }
  .footer-links { margin-top:20px; }
}

/* Phantom Realms prison systems */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative; z-index:1; }
.feature-tile { min-height:180px; padding:24px; background:linear-gradient(150deg,rgba(18,23,34,.92),rgba(8,10,16,.98)); border:1px solid rgba(167,139,250,.17); position:relative; overflow:hidden; clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.feature-tile::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,var(--purple),transparent); opacity:.6; }
.feature-tile > span { display:block; color:rgba(167,139,250,.5); font-size:.68rem; font-weight:1000; letter-spacing:.18em; margin-bottom:18px; }
.feature-tile b { display:block; font-size:1rem; letter-spacing:.08em; }
.feature-tile p { color:var(--muted); line-height:1.65; font-size:.86rem; margin:10px 0 0; }
.rank-ladder { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; position:relative; z-index:1; }
.rank-step { text-align:center; min-height:150px; padding:24px 12px; border:1px solid rgba(167,139,250,.22); background:linear-gradient(180deg,#141923,#0a0c12); clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.rank-step small { color:var(--purple2); font-size:.6rem; letter-spacing:.15em; font-weight:900; }
.rank-step b { display:block; font-size:1.2rem; margin:14px 0 8px; letter-spacing:.05em; }
.rank-step span { color:var(--muted); font-size:.73rem; }
.rank-step.baseline { border-color:rgba(255,255,255,.14); opacity:.82; }
.rank-step.featured { border-color:rgba(167,139,250,.75); box-shadow:0 0 30px rgba(109,40,217,.2); }
.leaderboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.leaderboard-card { background:#0e121a; border:1px solid rgba(167,139,250,.2); padding:24px; }
.leaderboard-card h2 { margin:8px 0 18px; }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
@media (max-width:980px) { .feature-grid { grid-template-columns:repeat(2,1fr); } .rank-ladder { grid-template-columns:repeat(3,1fr); } .leaderboard-grid { grid-template-columns:1fr; } }
@media (max-width:650px) { .feature-grid { grid-template-columns:1fr; } .rank-ladder { grid-template-columns:repeat(2,1fr); } }