:root {
  --bg: #07070c;
  --panel: #0d0d15;
  --panel-2: #11111c;
  --line: rgba(255,255,255,.10);
  --text: #f3f0ff;
  --muted: #9f9aad;
  --cyan: #67e8f9;
  --violet: #9b8cff;
  --magenta: #e58cff;
  --acid: #b8ff6a;
  --shadow: 0 20px 70px rgba(0,0,0,.45);
  --radius: 18px;
  --wrap: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); background:
    radial-gradient(circle at 72% 4%, rgba(155,140,255,.12), transparent 28%),
    radial-gradient(circle at 10% 16%, rgba(103,232,249,.08), transparent 22%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events:none;
  background: 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, black, transparent 80%);
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%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='.6'/%3E%3C/svg%3E"); }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(7,7,12,.82); backdrop-filter: blur(18px); }
.header-inner { min-height: 76px; display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.brand { display:flex; align-items:center; gap: 12px; text-decoration:none; letter-spacing:.02em; }
.brand-mark { width: 38px; height:38px; display:grid; place-items:center; font-weight:900; font-size:12px; border:1px solid rgba(103,232,249,.42); color:var(--cyan); background:linear-gradient(135deg, rgba(103,232,249,.08), rgba(155,140,255,.18)); box-shadow: 0 0 30px rgba(103,232,249,.08); }
.brand strong { display:block; font-size: 13px; }
.brand small { display:block; font-size: 9px; color:var(--muted); letter-spacing:.18em; margin-top:3px; }
.top-nav { display:flex; gap: 24px; align-items:center; font-size:13px; color:var(--muted); }
.top-nav a { text-decoration:none; }
.top-nav a:hover { color:var(--text); }
.contact-pill { padding:9px 13px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--text) !important; border-radius:999px; }
.hero { min-height: 430px; display:grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items:center; padding: 74px 0 60px; }
.eyebrow, .section-kicker, .card-kicker { font-size: 10px; letter-spacing: .18em; color: var(--cyan); font-weight: 800; }
.pulse { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow: 0 0 16px var(--acid); margin-right:8px; }
h1 { font-size: clamp(44px, 7vw, 82px); line-height:.95; margin: 18px 0 22px; letter-spacing:-.06em; max-width: 790px; }
h1 em { font-style:normal; color:var(--violet); text-shadow: 0 0 45px rgba(155,140,255,.18); }
.hero-lede { max-width: 720px; color: var(--muted); line-height: 1.7; font-size: 16px; }
.hero-actions { display:flex; gap: 12px; margin-top: 28px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height: 44px; padding: 0 16px; border-radius: 12px; border:1px solid var(--line); text-decoration:none; font-weight:700; font-size:13px; }
.btn-primary { background:linear-gradient(135deg, rgba(103,232,249,.18), rgba(155,140,255,.18)); border-color: rgba(103,232,249,.35); }
.btn-primary:hover { border-color:var(--cyan); box-shadow: 0 0 26px rgba(103,232,249,.08); }
.btn-ghost { background: rgba(255,255,255,.025); color:var(--muted); }
.hero-stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; align-self:end; }
.stat-card { padding:18px; border:1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); box-shadow: var(--shadow); }
.stat-card span, .stat-card small { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; }
.stat-card strong { display:block; font-size:28px; margin:8px 0 4px; }
.collection-section { padding: 30px 0 90px; }
.section-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:22px; }
h2 { font-size:34px; margin: 7px 0 0; letter-spacing:-.04em; }
.data-status { color:var(--muted); font-size:11px; }
.controls { display:grid; grid-template-columns: minmax(260px,1.7fr) 180px 180px 220px; gap:10px; }
.searchbox { display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:12px; }
.searchbox svg { width:17px; stroke:var(--muted); fill:none; stroke-width:2; }
.searchbox input, select { width:100%; border:0; outline:0; color:var(--text); background:transparent; font:inherit; font-size:13px; }
select { min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
option { background:var(--panel); }
.filters-row { display:flex; align-items:center; gap:8px; margin:12px 0 22px; flex-wrap:wrap; }
.filter-chip { border:1px solid var(--line); background:rgba(255,255,255,.025); color:var(--muted); border-radius:999px; padding:8px 12px; font-size:11px; cursor:pointer; }
.filter-chip.active { color:var(--text); border-color: rgba(155,140,255,.45); background:rgba(155,140,255,.10); }
.result-count { margin-left:auto; color:var(--muted); font-size:11px; }
.grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:14px; }
.card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius: 16px; background: var(--panel); min-width:0; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; cursor:pointer; }
.card:hover { transform:translateY(-3px); border-color:rgba(103,232,249,.32); box-shadow:0 20px 45px rgba(0,0,0,.28); }
.card-media { aspect-ratio:63/88; overflow:hidden; background:linear-gradient(135deg,#13131d,#08080d); position:relative; }
.card-media img { width:100%; height:100%; object-fit:cover; display:block; }
.card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 72%, rgba(0,0,0,.35)); pointer-events:none; }
.foil-badge, .qty-badge { position:absolute; top:8px; z-index:2; font-size:9px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; padding:5px 7px; border-radius:999px; background:rgba(7,7,12,.78); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(8px); }
.foil-badge { left:8px; color:var(--magenta); }
.qty-badge { right:8px; color:var(--acid); }
.card-body { padding:12px; }
.card-name { font-size:13px; font-weight:800; line-height:1.25; min-height:32px; }
.card-meta { color:var(--muted); font-size:10px; margin-top:4px; }
.card-price { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:11px; }
.price { font-weight:900; font-size:16px; color:var(--cyan); }
.price.missing { color:var(--muted); font-weight:700; font-size:11px; }
.cm-date { color:var(--muted); font-size:9px; }
.tag { display:inline-flex; margin-top:9px; font-size:9px; padding:5px 7px; border-radius:999px; background:rgba(184,255,106,.08); border:1px solid rgba(184,255,106,.14); color:var(--acid); }
.empty { padding:50px; text-align:center; border:1px dashed var(--line); border-radius:18px; color:var(--muted); }
.empty strong, .empty span { display:block; }
.empty strong { color:var(--text); margin-bottom:5px; }
.info-section { padding: 0 0 80px; }
.info-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:14px; }
.info-card { min-height: 220px; border:1px solid var(--line); border-radius:18px; padding:24px; background:rgba(255,255,255,.022); }
.info-card h3 { font-size:21px; margin:12px 0; }
.info-card p { color:var(--muted); line-height:1.65; font-size:13px; }
.info-card .btn { margin-top:12px; }
.highlight-card { background: radial-gradient(circle at 80% 20%, rgba(103,232,249,.08), transparent 36%), radial-gradient(circle at 10% 100%, rgba(155,140,255,.10), transparent 38%), rgba(255,255,255,.022); }
.muted { color: #737080 !important; font-size:11px !important; }
.note-strip { display:flex; align-items:flex-start; gap:12px; padding:15px 17px; margin-top:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.018); }
.note-icon { flex: 0 0 auto; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(103,232,249,.3); color:var(--cyan); font-size:11px; font-weight:900; }
.note-strip p { margin:0; font-size:11px; line-height:1.6; color:var(--muted); }
.footer { padding:25px 0 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:#6f6c7a; font-size:9px; letter-spacing:.12em; }
.footer a { text-decoration:none; color:var(--muted); }
.card-dialog { width:min(880px, calc(100vw - 28px)); border:1px solid rgba(103,232,249,.22); border-radius:20px; padding:0; color:var(--text); background:#090911; box-shadow:0 30px 100px rgba(0,0,0,.72); }
.card-dialog::backdrop { background:rgba(2,2,5,.72); backdrop-filter:blur(5px); }
.dialog-close { position:absolute; right:12px; top:12px; z-index:3; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.55); color:var(--text); font-size:23px; cursor:pointer; }
.dialog-inner { display:grid; grid-template-columns: 300px 1fr; gap:26px; padding:28px; }
.dialog-image { border-radius:15px; overflow:hidden; border:1px solid var(--line); background:#111; }
.dialog-image img { display:block; width:100%; }
.dialog-title { font-size:30px; letter-spacing:-.04em; line-height:1.05; margin:0 0 10px; }
.dialog-sub { color:var(--muted); font-size:12px; margin-bottom:20px; }
.dialog-price { font-size:32px; color:var(--cyan); font-weight:900; }
.dialog-label { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-size:9px; margin-top:18px; }
.dialog-contact { margin-top:22px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(5, minmax(0,1fr)); } .controls { grid-template-columns: 1fr 1fr; } .info-grid { grid-template-columns:1fr 1fr; } .highlight-card { grid-column: 1/-1; } }
@media (max-width: 820px) { .hero { grid-template-columns:1fr; gap:30px; padding-top:54px; } .hero-stats { max-width:620px; } .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .top-nav a:not(.contact-pill) { display:none; } }
@media (max-width: 580px) { .wrap { width:min(var(--wrap), calc(100% - 22px)); } .header-inner { min-height:64px; } .hero-stats { grid-template-columns:1fr; } .controls { grid-template-columns:1fr; } .grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } .section-heading { align-items:start; flex-direction:column; } .info-grid { grid-template-columns:1fr; } .highlight-card { grid-column:auto; } .dialog-inner { grid-template-columns: 1fr; } .dialog-image { max-width:240px; margin:auto; } h1 { font-size:48px; } }