/* Layout: one dark storefront page. Slanted brand bands frame the hero, a three-step strip, what-we-buy tiles, then the offer form. Square edges, blue→cyan only on action. */
:root{
  --bg:#03070A; --panel:#0A0F14; --raise:#111820; --line:#1D2329; --line2:#2A323B;
  --fg:#F3F6FA; --muted:#8F9AA8; --faint:#5E6874;
  --blue:#1729F9; --cyan:#00D3E7; --grad:linear-gradient(100deg,#1729F9 0%,#1E5BEF 45%,#00D3E7 100%);
  --good:#3DDC97;
  --display:"Saira","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
[hidden]{display:none!important}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
.eyebrow{font:italic 700 .78rem var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:italic 800 1rem var(--display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .15s,filter .15s}
.btn.primary{background:var(--grad);color:#fff}
.btn.ghost{background:var(--raise);color:var(--fg)}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(3,7,10,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.top img{height:20px;width:auto;display:block}
.top a.link{font:italic 700 .82rem var(--display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--muted)}
.top a.link:hover{color:var(--fg)}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:-30% -20% auto auto;width:80%;height:120%;background:radial-gradient(closest-side,rgba(23,41,249,.38),transparent);pointer-events:none}
.hero::after{content:"";position:absolute;right:-6%;top:0;bottom:0;width:38%;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.035) 22px 24px);pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(56px,10vw,120px) clamp(48px,8vw,96px);display:grid;gap:26px}
.hero img.logo{width:min(560px,92%);height:auto;display:block}
.hero h1{font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(2.5rem,8.5vw,5.6rem);line-height:.92;letter-spacing:-.01em;max-width:13ch}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero p.lede{font-size:clamp(1.02rem,2.2vw,1.2rem);color:#C4CCD6;max-width:52ch;margin:0}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.games{display:flex;gap:8px;flex-wrap:wrap}
.games span{font:italic 700 .8rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--line2);color:#C4CCD6}

/* sections */
section.band{padding-block:clamp(56px,9vw,104px);border-bottom:1px solid var(--line)}
.head{display:grid;gap:10px;margin-bottom:34px;max-width:640px}
.head h2{font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(1.8rem,5vw,3rem);line-height:1}
.head p{margin:0;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line)}
.step{background:var(--panel);padding:28px 26px 30px;display:grid;gap:12px;align-content:start;position:relative}
.step .n{font:italic 900 3.4rem/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.step h3{font:italic 800 1.3rem var(--display);text-transform:uppercase;letter-spacing:.02em}
.step p{margin:0;color:var(--muted)}
.buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--blue);padding:22px;display:grid;gap:8px;align-content:start}
.tile:nth-child(even){border-top-color:var(--cyan)}
.tile h3{font:italic 800 1.15rem var(--display);text-transform:uppercase}
.tile p{margin:0;color:var(--muted);font-size:.95rem}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 28px;margin:0;padding:0;list-style:none}
.tips li{display:grid;grid-template-columns:22px 1fr;gap:12px;color:#C4CCD6}
.tips li::before{content:"";width:12px;height:12px;margin-top:7px;background:var(--grad);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}

/* form */
.formwrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start}
form{background:var(--panel);border:1px solid var(--line);border-top:3px solid transparent;border-image:var(--grad) 1;padding:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
label{display:grid;gap:7px;font:600 .8rem var(--sans);color:var(--muted);min-width:0;align-content:start}
label.wide,.f-actions{grid-column:1/-1}
input,select,textarea{font:16px var(--sans);color:var(--fg);background:var(--raise);border:1px solid var(--line2);padding:12px 14px;min-height:48px;width:100%;min-width:0;border-radius:0}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:120px;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line2);background:var(--raise);color:var(--fg);font-weight:500;cursor:pointer}
.checks input{width:auto;min-height:0;accent-color:var(--cyan)}
.f-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.f-actions .note{font-size:.84rem;color:var(--faint)}
.side{display:grid;gap:14px}
.out{background:var(--panel);border:1px solid var(--line);padding:22px;display:grid;gap:12px}
.out h3{font:italic 800 1.1rem var(--display);text-transform:uppercase}
.out pre{white-space:pre-wrap;word-break:break-word;margin:0;font:14px/1.55 var(--sans);color:#C4CCD6;background:var(--raise);padding:14px;border:1px solid var(--line2);max-height:340px;overflow:auto}
.out .row{display:flex;gap:10px;flex-wrap:wrap}
.out p{margin:0;color:var(--muted);font-size:.9rem}
.ok{color:var(--good)!important}
/* faq */
.faq{display:grid;gap:2px;background:var(--line)}
details{background:var(--panel);padding:0 22px}
summary{cursor:pointer;list-style:none;padding:20px 0;font:italic 800 1.08rem var(--display);text-transform:uppercase;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--cyan);font-style:normal}
details[open] summary::after{content:"–"}
details p{margin:0 0 20px;color:var(--muted);max-width:68ch}
footer{padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--faint);font-size:.88rem}
footer img{height:18px;width:auto}
footer nav{display:flex;gap:18px}footer a{text-decoration:none;color:var(--muted)}footer a:hover{color:var(--fg)}
@media (max-width:820px){.steps{grid-template-columns:1fr}.formwrap{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr;padding:20px}.btn{width:100%}.top a.link{display:none}.hero::after{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.photos{display:grid;gap:10px}
.drop{display:flex;align-items:center;justify-content:center;gap:10px;min-height:96px;border:1px dashed var(--line2);background:var(--raise);color:var(--muted);cursor:pointer;text-align:center;padding:14px;font-weight:500}
.drop:hover,.drop.over{border-color:var(--cyan);color:var(--fg)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.thumb{position:relative;aspect-ratio:1;background:var(--raise);border:1px solid var(--line2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb button{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;background:rgba(3,7,10,.85);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.done{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--good);padding:28px;display:grid;gap:12px}
.done h3{font:italic 800 1.5rem var(--display);text-transform:uppercase}
.done p{margin:0;color:#C4CCD6}
.sending{opacity:.6;pointer-events:none}
#cf{grid-column:1/-1;min-height:0}

/* ---------- shared nav ---------- */
.topnav{display:flex;gap:22px}
.top a.link.on{color:var(--fg)}
.top a.link.on::after{content:"";display:block;height:2px;margin-top:4px;background:var(--grad)}
@media (max-width:520px){.top a.link{display:inline;font-size:.72rem;letter-spacing:.08em}.topnav{gap:14px}.top img{height:18px}}

/* ---------- live auctions ---------- */
.livehero .wrap{padding-block:clamp(40px,7vw,84px) clamp(28px,5vw,56px)}
.livehero h1{font-size:clamp(2.2rem,7vw,4.6rem);max-width:16ch}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats div{display:grid;gap:2px}
.stats b{font:italic 900 clamp(1.6rem,4vw,2.4rem)/1 var(--display)}
.stats span{font:600 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 53px);z-index:4;background:rgba(3,7,10,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding-block:12px}
.search{flex:1 1 260px;position:relative}
.search input{padding-left:40px;min-height:44px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills button{font:italic 700 .8rem var(--display);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);cursor:pointer}
.pills button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sortsel{min-height:44px;width:auto;flex:0 0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding-block:24px 64px}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s;min-width:0}
.card:hover{border-color:var(--line2);transform:translateY(-2px)}
.card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.card .img{position:relative;aspect-ratio:1;background:#0E141B;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:contain;display:block}
.card .img .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font:italic 800 .9rem var(--display);letter-spacing:.1em}
.badge{position:absolute;left:10px;top:10px;font:italic 800 .7rem var(--display);letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;background:rgba(3,7,10,.85);color:var(--fg)}
.badge.hot{background:#FF4D5E;color:#fff}.badge.buy{background:var(--good);color:#03070A}
.card .body{padding:14px 14px 16px;display:grid;gap:10px;flex:1;align-content:start}
.card h3{font:600 .95rem/1.35 var(--sans);text-transform:none;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:auto}
.card .price{font:italic 800 1.45rem/1 var(--display)}
.card .sub{font-size:.78rem;color:var(--muted)}
.card .cd{font:600 .82rem var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.card .cd.soon{color:#FF6E7A}.card .cd.today{color:#F7B955}
.card .go{font:italic 800 .78rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.empty-state{grid-column:1/-1;text-align:center;padding:72px 16px;color:var(--muted);display:grid;gap:14px;justify-items:center}
.empty-state h3{font:italic 800 1.4rem var(--display);text-transform:uppercase;color:var(--fg)}
.skel{background:linear-gradient(90deg,var(--panel),var(--raise),var(--panel));background-size:200% 100%;animation:sh 1.2s infinite;border:1px solid var(--line);aspect-ratio:.72}
@keyframes sh{to{background-position:-200% 0}}
.updated{font-size:.8rem;color:var(--faint);padding-bottom:12px}
@media (max-width:520px){.grid{grid-template-columns:1fr 1fr;gap:10px}.card .body{padding:10px 10px 12px;gap:8px}.card h3{font-size:.84rem}.card .price{font-size:1.15rem}.bar{top:calc(env(safe-area-inset-top,0px) + 47px)}.pills{width:100%}.pills button{flex:1;padding:9px 6px}.sortsel{flex:1}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.card{transition:none}}