:root{
  --bg: #120f1c;
  --surface: #1c1830;
  --surface-2: #241f3d;
  --line: #322a4d;
  --text: #f1eee6;
  --text-dim: #a79fc4;
  --text-faint: #6f6790;
  --gold: #e8b34c;
  --teal: #4ce8c0;
  --red: #e35b5b;
  --purple: #9b7bff;
  --radius: 10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, #2a2050 0%, transparent 55%),
    radial-gradient(900px 500px at 90% 0%, #1c3a3a 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:'Rajdhani',sans-serif; letter-spacing:.02em; }
.mono{ font-family:'JetBrains Mono',monospace; }
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{ background:var(--gold); color:#1c1830; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.section-title{ display:flex; align-items:baseline; gap:14px; margin: 56px 0 22px; }
.section-title h2{ font-size:26px; font-weight:700; margin:0; text-transform:uppercase; }
.section-title .rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }
.section-title .tag{ font-size:12px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; }

/* Header */
header{ position:sticky; top:0; z-index:60; backdrop-filter: blur(14px); background: #120f1cd9; border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1240px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:21px; }
.logo .mark{ width:34px;height:34px;border-radius:9px; background:linear-gradient(145deg,var(--gold),#a9762c); display:flex;align-items:center;justify-content:center; color:#1c1830; font-weight:700; font-family:'Rajdhani',sans-serif; font-size:18px; box-shadow: 0 0 0 1px #ffffff22 inset, 0 4px 14px #e8b34c33; }
.logo span.brand{ text-transform:uppercase; }
.logo span.brand b{ color:var(--gold); }
.nav-links{ display:flex; gap:28px; font-size:14px; color:var(--text-dim); }
.nav-links a:hover{ color:var(--text); }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang{ font-size:13px; color:var(--text-dim); display:flex; align-items:center; gap:6px; }
.cart-btn{ position:relative; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); padding:9px 14px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text); transition:border-color .15s; }
.cart-btn:hover{ border-color:var(--gold); }
.cart-count{ background:var(--gold); color:#1c1830; font-weight:700; font-size:11px; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; }

/* Hero */
.hero{ padding:70px 24px 30px; }
.hero-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--teal); background:#4ce8c014; border:1px solid #4ce8c033; padding:6px 12px; border-radius:20px; margin-bottom:18px; }
.eyebrow .dot{ width:6px;height:6px;border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal); }
.hero h1{ font-size:52px; line-height:1.02; margin:0 0 18px; font-weight:700; text-transform:uppercase; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero p{ color:var(--text-dim); font-size:16px; max-width:480px; line-height:1.6; margin-bottom:28px; }
.hero-ctas{ display:flex; gap:14px; }
.btn{ padding:13px 24px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; transition:transform .12s, box-shadow .12s; }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:linear-gradient(145deg,var(--gold),#c8933a); color:#1c1420; box-shadow:0 8px 24px #e8b34c2e; }
.btn-gold:hover{ box-shadow:0 8px 30px #e8b34c55; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--gold); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.hero-stats{ display:flex; gap:26px; margin-top:34px; }
.hero-stats div{ font-family:'JetBrains Mono',monospace; }
.hero-stats b{ display:block; font-size:22px; color:var(--gold); }
.hero-stats span{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; }

.vault{ position:relative; aspect-ratio:1/1; max-width:420px; justify-self:center; border-radius:50%; background: radial-gradient(circle at 35% 30%, #2c2650, #171227 70%); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow: 0 0 0 10px #1c183055, 0 30px 80px -20px #00000090; }
.vault::before{ content:""; position:absolute; inset:14%; border-radius:50%; border:2px dashed #e8b34c44; animation: spin 40s linear infinite; }
.vault-core{ width:46%; aspect-ratio:1/1; border-radius:50%; background:linear-gradient(145deg,var(--gold),#8a611f); display:flex; align-items:center; justify-content:center; box-shadow:0 0 60px #e8b34c55, inset 0 0 20px #ffffff44; }
.vault-core span{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; color:#1c1420; text-transform:uppercase; text-align:center; line-height:1.2;}
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .vault::before{ animation:none; } }

/* Ticker */
.ticker-wrap{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); overflow:hidden; padding:14px 0; }
.ticker-label{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--teal); text-transform:uppercase; letter-spacing:.08em; padding:0 24px 10px; max-width:1240px; margin:0 auto; }
.ticker-track{ display:flex; gap:14px; width:max-content; animation: scroll 38s linear infinite; }
.ticker-wrap:hover .ticker-track{ animation-play-state:paused; }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.ticker-item{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 14px; white-space:nowrap; font-size:13px; }
.ticker-item .emoji{ width:26px;height:26px;border-radius:5px; display:flex;align-items:center;justify-content:center; font-size:15px; }
.ticker-item .badge-new{ color:var(--teal); font-family:'JetBrains Mono',monospace; font-size:10px; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ padding:9px 16px; border-radius:20px; border:1px solid var(--line); background:var(--surface); font-size:13px; color:var(--text-dim); cursor:pointer; transition:.15s; }
.chip:hover{ border-color:var(--gold); color:var(--text); }
.chip.active{ background:var(--gold); border-color:var(--gold); color:#1c1420; font-weight:600; }

/* Grid + cards */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:10px; }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid{ grid-template-columns:1fr; } .hero-inner{grid-template-columns:1fr;} .hero h1{font-size:38px;} }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; position:relative; display:flex; flex-direction:column; transition:transform .18s, border-color .18s, box-shadow .18s; }
.card:hover{ transform:translateY(-4px); border-color:#e8b34c55; box-shadow:0 16px 30px -14px #00000080; }
.card .rarity-edge{ position:absolute; left:0; top:0; bottom:0; width:4px; }
.r-common .rarity-edge{ background:#8b8a9b; }
.r-rare .rarity-edge{ background:var(--teal); }
.r-epic .rarity-edge{ background:var(--purple); }
.r-legendary .rarity-edge{ background:var(--gold); }

.card-media{ position:relative; aspect-ratio:1/1; background:radial-gradient(circle at 40% 30%,#26213f,#171326); display:flex; align-items:center; justify-content:center; }
.card-media .emoji-big{ font-size:64px; filter:drop-shadow(0 10px 16px #00000066); }
.stamp{ position:absolute; top:10px; right:10px; font-family:'JetBrains Mono',monospace; font-size:10px; padding:4px 9px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.stamp.hot{ background:#e35b5b22; color:var(--red); border:1px solid #e35b5b55; }
.stamp.trending{ background:#4ce8c022; color:var(--teal); border:1px solid #4ce8c055; }
.stamp.best{ background:#e8b34c22; color:var(--gold); border:1px solid #e8b34c55; }
.stock{ position:absolute; bottom:10px; left:10px; font-size:10.5px; font-family:'JetBrains Mono',monospace; padding:4px 9px; border-radius:20px; }
.stock.in{ background:#4ce8c018; color:var(--teal); }
.stock.low{ background:#e8b34c18; color:var(--gold); }
.stock.out{ background:#e35b5b18; color:var(--red); }

.card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-cat{ font-size:10.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; font-family:'JetBrains Mono',monospace; }
.card-title{ font-size:16px; font-weight:600; margin:0; line-height:1.25; }
.card-desc{ font-size:12.5px; color:var(--text-dim); line-height:1.5; flex:1; margin:2px 0 8px; }
.price-row{ display:flex; align-items:baseline; gap:8px; }
.price{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:17px; color:var(--text); }
.price-old{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-faint); text-decoration:line-through; }
.price-diff{ font-size:11px; color:var(--teal); font-family:'JetBrains Mono',monospace; }

.card-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.qty button{ background:var(--surface-2); border:none; color:var(--text); width:28px; height:32px; cursor:pointer; font-size:15px; }
.qty button:hover{ background:var(--line); }
.qty span{ width:26px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:13px; display:inline-block; }
.add-btn{ flex:1; background:var(--gold); color:#1c1420; border:none; border-radius:8px; padding:9px 10px; font-weight:700; font-size:12.5px; cursor:pointer; text-transform:uppercase; letter-spacing:.02em; transition:filter .12s; }
.add-btn:hover{ filter:brightness(1.08); }
.add-btn:disabled{ background:var(--surface-2); color:var(--text-faint); cursor:not-allowed; }

/* Top buyers */
.buyers{ display:flex; flex-direction:column; gap:8px; margin-bottom:60px; }
.buyer-row{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.buyer-rank{ font-family:'JetBrains Mono',monospace; color:var(--gold); font-weight:700; width:22px; }
.buyer-avatar{ width:34px;height:34px;border-radius:50%; background:linear-gradient(145deg,var(--purple),#4a3a8a); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:13px; }
.buyer-name{ flex:1; font-weight:600; font-size:14px; }
.buyer-total{ font-family:'JetBrains Mono',monospace; color:var(--teal); font-size:13px; }

/* Footer */
footer{ border-top:1px solid var(--line); margin-top:60px; padding:40px 24px 26px; background:var(--surface); }
.footer-inner{ max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin:0 0 12px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--text-dim); margin-bottom:8px; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ max-width:1240px; margin:26px auto 0; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px; }

/* Cart drawer */
.overlay{ position:fixed; inset:0; background:#0a0812cc; opacity:0; pointer-events:none; transition:opacity .2s; z-index:80; }
.overlay.open{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw; background:var(--surface); border-left:1px solid var(--line); z-index:90; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--line); }
.drawer-head h3{ margin:0; font-size:18px; text-transform:uppercase; }
.drawer-close{ background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; }
.drawer-body{ flex:1; overflow-y:auto; padding:14px 20px; display:flex; flex-direction:column; gap:12px; }
.drawer-empty{ color:var(--text-faint); font-size:14px; text-align:center; margin-top:40px; }
.cart-item{ display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:12px; }
.cart-item .emoji-sm{ width:44px;height:44px;border-radius:6px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:22px; }
.cart-item-info{ flex:1; }
.cart-item-info .name{ font-size:13.5px; font-weight:600; }
.cart-item-info .meta{ font-size:11.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; }
.cart-item-remove{ background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:15px; }
.cart-item-remove:hover{ color:var(--red); }
.drawer-foot{ padding:18px 20px 22px; border-top:1px solid var(--line); }
.drawer-total{ display:flex; justify-content:space-between; margin-bottom:14px; font-family:'JetBrains Mono',monospace; font-size:15px; }
.drawer-total b{ color:var(--gold); font-size:19px; }
.checkout-btn{ width:100%; padding:14px; display:block; text-align:center; }

.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface-2); border:1px solid var(--gold); color:var(--text); padding:12px 20px; border-radius:8px; font-size:13.5px; opacity:0; pointer-events:none; transition:.25s; z-index:100; display:flex; align-items:center; gap:10px; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Checkout page */
.checkout-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; margin:40px 0 80px; align-items:start; }
@media (max-width:900px){ .checkout-grid{ grid-template-columns:1fr; } }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.panel h3{ margin-top:0; text-transform:uppercase; font-size:18px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-dim); margin-bottom:6px; }
.field input{ width:100%; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--text); font-size:14px; font-family:inherit; }
.field input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.pay-methods{ display:flex; gap:10px; margin-bottom:20px; }
.pay-method{ flex:1; border:1px solid var(--line); border-radius:8px; padding:12px; text-align:center; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.pay-method.active{ border-color:var(--gold); color:var(--gold); background:#e8b34c0f; }
.summary-line{ display:flex; justify-content:space-between; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--line); }
.summary-line:last-of-type{ border-bottom:none; }
.summary-total{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:19px; padding-top:14px; margin-top:6px; border-top:1px solid var(--line); }
.summary-total b{ color:var(--gold); }
.error-box{ background:#e35b5b18; border:1px solid #e35b5b55; color:var(--red); padding:12px 16px; border-radius:8px; font-size:13.5px; margin-bottom:18px; }
.empty-state{ text-align:center; padding:80px 20px; color:var(--text-faint); }
.empty-state h3{ color:var(--text); font-size:22px; text-transform:uppercase; margin-bottom:10px; }

/* Success page */
.success-box{ max-width:560px; margin:70px auto 100px; text-align:center; }
.success-icon{ width:74px;height:74px;border-radius:50%; background:linear-gradient(145deg,var(--gold),#8a611f); display:flex;align-items:center;justify-content:center; font-size:32px; margin:0 auto 22px; box-shadow:0 0 40px #e8b34c44; }
.success-box h1{ font-size:30px; text-transform:uppercase; margin-bottom:10px; }
.order-number{ font-family:'JetBrains Mono',monospace; color:var(--gold); font-size:15px; background:var(--surface); border:1px solid var(--line); display:inline-block; padding:8px 16px; border-radius:8px; margin:10px 0 30px; }
.success-items{ text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:24px; }