:root{
  --bg:#05070b;
  --bg2:#070a12;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --faint:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);
  --blue:#156aff;
  --blue2:#156aff;
  --blue3:#156aff;
  --danger:#ff3d6e;
  --max:1160px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html{height:100%; width:100%; overflow-x:clip;}
body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(21,106,255,.22), transparent 62%),
    radial-gradient(900px 550px at 90% 10%, rgba(21,106,255,.16), transparent 60%),
    radial-gradient(900px 520px at 45% 110%, rgba(21,106,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:clip;
  line-height:1.35;
}

/* subtle grain */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.04), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.03), transparent 30%),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.03), transparent 35%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
  opacity:.18;
}

@supports not (overflow:clip){
  body{overflow-x:hidden;}
}

img, video, canvas, svg{max-width:100%;}

a{color:inherit}
.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;
}

/* Layout */
.wrap{width:100%}
.inner{max-width:var(--max); margin:0 auto; padding:0 22px}

.header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,7,11,.86), rgba(5,7,11,.56));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:760;
  font-size:13px;
}
.brand img{
  height:44px;
  width:auto;
  max-width:240px;
  object-fit:contain;
}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav a, .nav button{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  color:inherit;
  cursor:pointer;
}
.nav a:hover{border-color:rgba(21,106,255,.32); box-shadow: 0 0 0 6px rgba(21,106,255,.08)}
.nav button:hover{border-color:rgba(21,106,255,.32); box-shadow: 0 0 0 6px rgba(21,106,255,.08)}
.nav button{appearance:none}

.cart-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  margin-left:8px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.10em;
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: 0 0 18px rgba(21,106,255,.12);
}

.section{position:relative; padding:84px 0}
.section-tight{padding:58px 0}
.section + .section{border-top:1px solid rgba(255,255,255,.06)}

/* Checkout */
.checkout-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:start;
}
@media (max-width: 980px){.checkout-grid{grid-template-columns:1fr}}
.checkout-card{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(21,106,255,.16), transparent 70%),
    radial-gradient(520px 320px at 80% 25%, rgba(21,106,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 84px rgba(0,0,0,.55);
  overflow:hidden;
}
.checkout-items{padding:14px 20px 6px}
.checkout-line{padding:12px 0; border-top:1px solid rgba(255,255,255,.08)}
.checkout-line:first-child{border-top:none}
.checkout-line-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.checkout-line-name{font-weight:900; letter-spacing:-.02em}
.checkout-line-price{font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.78)}
.checkout-line-sub{margin-top:8px; display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.66)}
.checkout-line-qty{font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.60)}
.checkout-totals{padding:8px 20px 18px}
.checkout-form{padding:14px 20px 20px}
.checkout-row{margin-top:14px}
.checkout-label{
  display:block;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.60);
  margin-bottom:8px;
}
.checkout-split{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 520px){.checkout-split{grid-template-columns:1fr}}
.checkout-cardbox{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  padding:12px 12px;
}
.checkout-optin{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
  line-height:1.55;
}
.checkout-optin input{
  margin-top:2px;
  width:18px;
  height:18px;
  flex:0 0 auto;
}
.checkout-actions{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.checkout-actions .btn{flex:1 1 180px}

.split-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}

.kicker{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

h1,h2,h3{margin:0}
.h1{
  font-size:clamp(44px, 6vw, 84px);
  line-height:0.98;
  letter-spacing:-.03em;
  margin-top:12px;
}
.h2{
  font-size:clamp(26px, 2.4vw, 40px);
  letter-spacing:-.02em;
}
.sub{
  margin-top:14px;
  max-width:72ch;
  color:var(--muted);
  font-size:clamp(15px, 1.4vw, 18px);
}

/* Hero */
.hero{
  padding:96px 0 90px;
  min-height:70vh;
}
.hero:after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(600px 280px at 20% 35%, rgba(21,106,255,.30), transparent 70%),
    radial-gradient(520px 260px at 68% 30%, rgba(21,106,255,.20), transparent 70%),
    radial-gradient(620px 320px at 45% 78%, rgba(21,106,255,.16), transparent 72%);
  filter: blur(1px);
  opacity:.95;
}

.hero-grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:30px; align-items:end}
@media (max-width: 920px){.hero-grid{grid-template-columns:1fr; align-items:start}}

.hero-callout{
  border-left:2px solid rgba(21,106,255,.35);
  padding-left:18px;
  color:rgba(255,255,255,.78);
  max-width:52ch;
}

.cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:999px;
  text-decoration:none;
  font-weight:760;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.10);
}
.btn.ghost{color:rgba(255,255,255,.9)}
.btn.primary{
  color:rgba(255,255,255,.96);
  text-shadow: 0 0 18px rgba(21,106,255,.28);
  border-color:rgba(21,106,255,.48);
  background: linear-gradient(135deg, rgba(21,106,255,.48), rgba(21,106,255,.20));
  box-shadow:
    0 18px 42px rgba(0,0,0,.55),
    0 0 0 10px rgba(21,106,255,.08),
    0 0 54px rgba(21,106,255,.10);
}
.btn.primary:hover{
  box-shadow: 0 18px 42px rgba(0,0,0,.55), 0 0 0 12px rgba(21,106,255,.11), 0 0 42px rgba(21,106,255,.12);
  text-shadow: 0 0 22px rgba(21,106,255,.34);
}
.btn.ghost:hover{border-color:rgba(21,106,255,.38); box-shadow: 0 0 0 10px rgba(21,106,255,.08)}

.hero-meta{display:flex; flex-direction:column; gap:12px;}
.meta-row{display:flex; gap:12px; flex-wrap:wrap}
.tag{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.70);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.08);
}
.pulse{
  display:inline-block;
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.9));
  box-shadow: 0 0 18px rgba(21,106,255,.34);
  margin-right:10px;
}

/* How it works loop */
.loop{
  margin-top:26px;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 980px){
  .loop{grid-template-columns:1fr; gap:14px}
  .loop-arrow{display:none}
}

.loop-card{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(280px 160px at 20% 20%, rgba(21,106,255,.24), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 20px 54px rgba(0,0,0,.40);
  padding:18px 18px 16px;
  overflow:hidden;
}
.loop-card:before{
  content:"";
  position:absolute;
  inset:-60px;
  background: conic-gradient(from 210deg at 60% 40%, rgba(21,106,255,.20), transparent, rgba(21,106,255,.20), transparent);
  opacity:.55;
  filter: blur(6px);
}
.loop-card--final{
  border-color:rgba(21,106,255,.18);
  background:
    radial-gradient(340px 180px at 20% 20%, rgba(21,106,255,.20), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.loop-top{position:relative; z-index:2; display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.loop-num{font-family:var(--mono); letter-spacing:.18em; color:rgba(21,106,255,.82); font-size:12px; text-transform:uppercase}
.loop-title{font-weight:820; letter-spacing:-.02em; font-size:18px}
.loop-body{position:relative; z-index:2; margin-top:10px; color:var(--muted)}
.loop-pill{
  position:relative;
  z-index:2;
  margin-top:14px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.loop-arrow{
  width:56px;
  align-self:center;
  height:2px;
  background: linear-gradient(90deg, rgba(21,106,255,.10), rgba(21,106,255,.55), rgba(21,106,255,.10));
  position:relative;
  opacity:.85;
}
.loop-arrow:after{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:10px; height:10px;
  border-right:2px solid rgba(21,106,255,.55);
  border-top:2px solid rgba(21,106,255,.55);
}
.loop-foot{margin-top:16px; color:rgba(255,255,255,.60); font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; font-size:12px}

/* Drop track */
.drop-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}
.drop-note{color:var(--muted); max-width:64ch}
.track{
  margin-top:24px;
  display:grid;
  /* Tile grid: keep merch items from stretching full-width when there are only 1–2 products. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  gap:14px;
  overflow:visible;
  padding:4px 2px 6px;
  justify-content:start;
}
.track::-webkit-scrollbar{height:0}
.track::-webkit-scrollbar-thumb{background:transparent}
.poster{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(420px 220px at 20% 20%, rgba(21,106,255,.55), transparent 65%),
    radial-gradient(520px 280px at 85% 28%, rgba(21,106,255,.26), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 64px rgba(0,0,0,.55);
  text-decoration:none;
}
.poster:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(280px 180px at 30% 55%, rgba(21,106,255,.20), transparent 65%),
    conic-gradient(from 220deg at 70% 40%, rgba(21,106,255,.22), transparent, rgba(21,106,255,.16), transparent);
  opacity:.75;
  filter: blur(2px);
}
.poster:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.55) 100%);
}
.poster:hover{border-color:rgba(21,106,255,.28)}

.poster-inner{position:relative; z-index:2; padding:16px; min-height:unset; display:flex; flex-direction:column; gap:14px}
.poster-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.badge{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
}
.price{font-weight:820; letter-spacing:-.02em; font-size:16px}
.poster-name{font-size:clamp(20px, 2.2vw, 28px); letter-spacing:-.03em; line-height:1.03; margin-top:0}
.poster-desc{margin-top:8px; max-width:none; color:rgba(255,255,255,.72)}
.poster-cta{margin-top:12px; display:flex; gap:12px; flex-wrap:wrap}

.poster-photo{
  --poster-photo-size: cover;
  --poster-photo-pos: 50% 22%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background-image:
    var(--poster-photo, none),
    radial-gradient(520px 280px at 30% 25%, rgba(21,106,255,.26), transparent 70%),
    radial-gradient(520px 280px at 80% 30%, rgba(21,106,255,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size: var(--poster-photo-size), auto, auto, auto;
  background-position: var(--poster-photo-pos), 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  /* Match the homepage drop tile photo feel (taller, merch-first). */
  aspect-ratio: 5 / 4;
  min-height:200px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
.poster-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.52) 100%);
  pointer-events:none;
}
.poster-photo:before{
  content:"";
  position:absolute;
  inset:-70px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
  opacity:.10;
  transform: translateY(-10px);
  pointer-events:none;
}
.poster:hover .poster-photo:before{opacity:.16}

@media (max-width: 520px){
  .track{grid-template-columns:1fr}
}

/* Coming pillars */
.pillars{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-top:26px}
@media (max-width: 980px){.pillars{grid-template-columns:1fr}}
.pillar{padding:18px 0; border-top:1px solid rgba(255,255,255,.10);}
.pillar h3{font-size:22px; letter-spacing:-.02em;}
.pillar p{margin:10px 0 0; color:var(--muted)}
.pnum{font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(21,106,255,.78); margin-bottom:10px;}

/* Vault */
.vault-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:24px}
@media (max-width: 980px){.vault-grid{grid-template-columns:1fr}}
.vault{
  text-decoration:none;
  position:relative;
  border-radius:26px;
  padding:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(340px 180px at 15% 20%, rgba(21,106,255,.22), transparent 70%),
    radial-gradient(320px 180px at 85% 25%, rgba(21,106,255,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 28px 64px rgba(0,0,0,.45);
  overflow:hidden;
}
.vault:before{
  content:"";
  position:absolute;
  inset:-60px;
  background: conic-gradient(from 200deg at 55% 45%, rgba(21,106,255,.18), transparent, rgba(21,106,255,.12), transparent);
  opacity:.7;
  filter: blur(10px);
}
.vault:hover{border-color:rgba(21,106,255,.24)}
.vault-k{position:relative; z-index:2; font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); font-size:12px}
.vault-t{position:relative; z-index:2; margin-top:10px; font-weight:860; letter-spacing:-.03em; font-size:28px; line-height:1.05}
.vault-d{position:relative; z-index:2; margin-top:10px; color:var(--muted); max-width:48ch}

/* Sellers */
.seller-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:24px}
@media (max-width: 980px){.seller-grid{grid-template-columns:1fr}}
.seller{
  border-top:1px solid rgba(255,255,255,.10);
  padding:18px 0;
}
.seller-h{font-weight:860; letter-spacing:-.02em; font-size:20px}
.seller-p{margin-top:10px; color:var(--muted)}
.seller-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}

/* Email capture */
.capture{
  border-top:1px solid rgba(21,106,255,.18);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(21,106,255,.24), transparent 62%),
    radial-gradient(720px 420px at 75% 20%, rgba(21,106,255,.14), transparent 60%);
}
.capture-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:center}
@media (max-width: 980px){.capture-grid{grid-template-columns:1fr}}
.form{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.input{
  flex:1 1 280px;
  min-width:220px;
  padding:16px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:var(--text);
  font-size:14px;
}
.input::placeholder{color:rgba(255,255,255,.45)}
.help{margin-top:10px; color:var(--faint); font-size:13px}
.status{margin-top:12px; font-size:13px; color:rgba(255,255,255,.76)}

/* Footer */
.footer{padding:38px 0; color:rgba(255,255,255,.55); font-size:13px}
.footer .row{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.footer a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14)}
.footer a:hover{border-bottom-color:rgba(21,106,255,.36)}

/* Product Page */
.product-hero{padding:64px 0 42px}
.product-hero-grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:26px; align-items:start}
@media (max-width: 980px){.product-hero-grid{grid-template-columns:1fr}}

.product-photo{
  --product-photo: none;
  --product-photo-size: cover;
  position:relative;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  min-height:520px;
  background:
    var(--product-photo),
    radial-gradient(420px 260px at 30% 25%, rgba(21,106,255,.42), transparent 66%),
    radial-gradient(520px 320px at 82% 24%, rgba(21,106,255,.22), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: var(--product-photo-size), auto, auto, auto;
  background-position: center, 30% 25%, 82% 24%, center;
  background-repeat: no-repeat;
  box-shadow: 0 34px 84px rgba(0,0,0,.55);
}
.product-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.58));
}
.product-photo .label{
  position:absolute;
  z-index:2;
  left:18px;
  bottom:18px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.14);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.product-photo.has-photo .label{opacity:0; transform:translateY(6px); pointer-events:none}
.product-photo.has-photo{
  /* Keep full product visible (no awkward crop) even for tall/wide images. */
  --product-photo-size: contain;
  background-color: rgba(0,0,0,.18);
}
.product-photo.has-photo:after{
  /* Let the photo read a bit more while keeping cinematic depth. */
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.38));
}

.pmeta{padding-top:4px}
.plabel{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.10); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.pname{margin-top:14px; font-weight:900; letter-spacing:-.04em; font-size:clamp(34px,4.4vw,62px); line-height:1.0}
.prow{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:10px}
.pprice{font-weight:900; letter-spacing:-.02em; font-size:22px}
.plimited{font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(21,106,255,.82); font-size:12px}
.pdesc{margin-top:12px; color:var(--muted); max-width:60ch; font-size:16px}
.product-variants{margin-top:18px}
.variant-block{display:grid; gap:10px}
.variant-label{font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); font-size:12px}
.variant-options{display:flex; flex-wrap:wrap; gap:10px}
.variant-option{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:#fff;
  border-radius:999px;
  padding:12px 16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.variant-option:hover,
.variant-option.is-active{
  border-color:rgba(21,106,255,.42);
  background:rgba(21,106,255,.14);
  box-shadow:0 0 0 4px rgba(21,106,255,.10);
}

.card{
  border-top:1px solid rgba(255,255,255,.10);
  padding:18px 0;
}
.card-title{font-weight:900; letter-spacing:-.02em; font-size:20px}
.card-text{margin-top:10px; color:var(--muted); max-width:72ch}

.detail-list{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.detail-list li{display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,.78)}
.detail-list li:before{
  content:"";
  width:10px; height:10px;
  margin-top:5px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.85));
  box-shadow: 0 0 16px rgba(21,106,255,.22);
  flex:0 0 10px;
}

.visual-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:16px}
@media (max-width: 820px){.visual-grid{grid-template-columns:1fr}}
.visual{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(320px 220px at 20% 20%, rgba(21,106,255,.30), transparent 70%),
    radial-gradient(340px 240px at 80% 25%, rgba(21,106,255,.16), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  min-height:220px;
  overflow:hidden;
  position:relative;
}
.visual:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%)}
.visual .vlabel{position:absolute; z-index:2; left:18px; bottom:18px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72)}

.pcta{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}

.minihelp{margin-top:10px; color:rgba(255,255,255,.55); font-size:13px}

/* Hero Moment (dominant brand composition) */
.hero-moment{min-height:72vh}
.hero-moment:before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(21,106,255,.08) 18%, transparent 36%),
    linear-gradient(115deg, transparent 0%, rgba(21,106,255,.10) 22%, transparent 44%),
    repeating-linear-gradient(95deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px);
  mix-blend-mode:screen;
  opacity:.22;
  filter: blur(.2px);
  transform: translateX(-18%) translateY(-6%);
  animation: heroStreak 9.5s linear infinite;
}
@keyframes heroStreak{
  0%{transform: translateX(-22%) translateY(-8%)}
  50%{transform: translateX(8%) translateY(-2%)}
  100%{transform: translateX(-22%) translateY(-8%)}
}

.moment{
  max-width: 880px;
  padding-top: 12px;
}

.systemline{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.60);
  margin-bottom:18px;
}

.moment-h{
  margin:0;
  font-weight:950;
  letter-spacing:-.05em;
  font-size:clamp(54px, 7vw, 96px);
  line-height:.92;
}

.moment-sub{
  margin:18px 0 0;
  color:rgba(255,255,255,.76);
  font-size:clamp(16px, 1.6vw, 20px);
  max-width: 44ch;
}

.hero-moment .cta{margin-top:22px}

/* Stadium Landing */
.stadium-page .section + .section{border-top:none}
.stadium-page .section{padding:84px 0}

.hud{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  background: linear-gradient(180deg, rgba(5,7,11,.86), rgba(5,7,11,.32));
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hud-bar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0}
.hud-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.hud-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.70);
  padding:10px 12px;
  min-height:42px;
  box-sizing:border-box;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.08);
}
.hud-link:hover{border-color:rgba(21,106,255,.30); box-shadow:0 0 0 10px rgba(21,106,255,.08)}

.stadium-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:120px 0 86px;
  overflow:hidden;
}
.stadium-hero:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 560px at 22% 30%, rgba(21,106,255,.34), transparent 62%),
    radial-gradient(780px 520px at 74% 28%, rgba(21,106,255,.18), transparent 62%),
    radial-gradient(900px 600px at 50% 90%, rgba(21,106,255,.14), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.70) 100%);
  opacity:1;
}

/* jumbotron energy lines */
.stadium-hero:after{
  content:"";
  position:absolute;
  inset:-10px;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(21,106,255,.10) 18%, transparent 34%),
    linear-gradient(110deg, transparent 0%, rgba(21,106,255,.10) 22%, transparent 44%),
    repeating-linear-gradient(95deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px);
  mix-blend-mode:screen;
  opacity:.22;
  transform: translateX(-18%) translateY(-6%);
  animation: stadiumStreak 10.5s linear infinite;
}
@keyframes stadiumStreak{
  0%{transform: translateX(-24%) translateY(-10%)}
  50%{transform: translateX(8%) translateY(-3%)}
  100%{transform: translateX(-24%) translateY(-10%)}
}

/* ambient particles */
.stadium-page .wrap:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(21,106,255,.10), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(21,106,255,.10), transparent 26%),
    radial-gradient(circle at 35% 75%, rgba(21,106,255,.08), transparent 30%),
    radial-gradient(circle at 65% 62%, rgba(255,255,255,.06), transparent 32%);
  opacity:.20;
  filter: blur(0.5px);
  animation: particleDrift 12s ease-in-out infinite;
}
@keyframes particleDrift{
  0%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(14px,-10px,0)}
  100%{transform: translate3d(0,0,0)}
}

.hero-stack{max-width:980px}
.hero-title{
  margin:0;
  font-weight:980;
  letter-spacing:-.06em;
  font-size:clamp(72px, 10vw, 140px);
  line-height:.86;
  text-transform:uppercase;
  text-shadow:
    0 24px 70px rgba(0,0,0,.65),
    0 0 42px rgba(21,106,255,.10);
}
.hero-sub{
  margin:18px 0 0;
  font-size:clamp(16px, 1.7vw, 22px);
  color:rgba(255,255,255,.78);
  max-width:50ch;
}

.signal-row{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap}
.chip, .chip-live{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.72);
}
.chip-live{border-color:rgba(21,106,255,.26)}
.chip-live .dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.95));
  box-shadow: 0 0 18px rgba(21,106,255,.32);
  animation: livePulse 1.1s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{transform:scale(1); opacity:1}50%{transform:scale(1.18); opacity:.78}}

.stadium-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap}

/* Replay frames */
.replay-flow{
  margin-top:22px;
  display:flex;
  gap:14px;
  align-items:stretch;
  overflow-x:auto;
  padding:4px 2px 14px;
  scroll-snap-type:x mandatory;
}
.replay-flow::-webkit-scrollbar{height:10px}
.replay-flow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:999px}
.frame{
  flex:0 0 min(340px, 78vw);
  scroll-snap-align:start;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(320px 180px at 20% 20%, rgba(21,106,255,.22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 30px 70px rgba(0,0,0,.50);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.frame:before{
  content:"";
  position:absolute;
  inset:-60px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 14px);
  opacity:.12;
  animation: scan 2.7s linear infinite;
}
@keyframes scan{0%{transform:translateY(-10px)}100%{transform:translateY(10px)}}
.frame-hot{border-color:rgba(21,106,255,.22)}
.frame-k{position:relative; z-index:2; font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; color:rgba(21,106,255,.78); font-size:12px}
.frame-t{position:relative; z-index:2; margin-top:10px; font-weight:920; letter-spacing:-.03em; font-size:26px; line-height:1.02}
.frame-d{position:relative; z-index:2; margin-top:10px; color:rgba(255,255,255,.72)}
.frame-arrow{width:58px; align-self:center; height:2px; background:linear-gradient(90deg, rgba(21,106,255,.10), rgba(21,106,255,.55), rgba(21,106,255,.10)); position:relative; opacity:.85}
.frame-arrow:after{content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%) rotate(45deg); width:10px; height:10px; border-right:2px solid rgba(21,106,255,.55); border-top:2px solid rgba(21,106,255,.55)}

/* Platform slabs */
.triad{margin-top:22px; display:grid; grid-template-columns:1fr; gap:16px}
.pillar-slab{
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 84px rgba(0,0,0,.55);
  padding:22px;
  position:relative;
  overflow:hidden;
}
.pillar-slab:before{
  content:"";
  position:absolute;
  inset:-70px;
  opacity:.70;
  filter: blur(10px);
}
.pillar-slab[data-accent="1"]:before{background: radial-gradient(520px 280px at 20% 30%, rgba(21,106,255,.22), transparent 70%)}
.pillar-slab[data-accent="2"]:before{background: radial-gradient(520px 280px at 35% 30%, rgba(21,106,255,.24), transparent 70%)}
.pillar-slab[data-accent="3"]:before{background: radial-gradient(520px 280px at 70% 30%, rgba(21,106,255,.16), transparent 70%)}
.p-top{position:relative; z-index:2; display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.p-k{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; color:rgba(255,255,255,.62); font-size:12px}
.p-s{font-weight:980; letter-spacing:-.04em; color:rgba(21,106,255,.72); font-size:18px}
.p-t{position:relative; z-index:2; margin-top:14px; font-weight:940; letter-spacing:-.04em; font-size:clamp(22px, 2.6vw, 34px); line-height:1.05}

/* Drop preview */
.drop-preview{
  margin-top:18px;
  display:grid;
  /* Tile grid: keeps cards from stretching full-width when there are only 1–2 items. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  gap:14px;
  align-items:stretch;
  justify-content:start;
}
.drop-item{
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 280px at 20% 20%, rgba(21,106,255,.30), transparent 68%),
    radial-gradient(520px 280px at 80% 25%, rgba(21,106,255,.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 84px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
}
.drop-item:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.62) 100%)}
.drop-in{position:relative; z-index:2; padding:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.drop-left{min-width:240px}
.drop-labels{display:flex; gap:10px; flex-wrap:wrap}
.smalltag{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:11px; color:rgba(255,255,255,.70); padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.10)}
.drop-name{margin-top:12px; font-weight:980; letter-spacing:-.05em; font-size:clamp(28px, 3.6vw, 46px); line-height:1.02}
.drop-desc{margin-top:10px; color:rgba(255,255,255,.72); max-width:60ch}
.drop-right{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.drop-price{font-weight:980; letter-spacing:-.02em; font-size:18px; color:rgba(255,255,255,.92)}
.drop-foot{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* Drop tiles: smaller cards so more products can show */
.drop-item--tile .drop-in{
  padding:12px;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
}
.drop-item--tile{justify-self:start}
.drop-item--tile .drop-left{min-width:auto}
.drop-item--tile .drop-labels{
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.drop-item--tile .drop-labels::-webkit-scrollbar{display:none}
.drop-item--tile .smalltag{padding:7px 9px; font-size:10px}
.drop-item--tile .drop-signals .sig{padding:7px 9px; font-size:10px}
.drop-item--tile .drop-signals{
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.drop-item--tile .drop-signals::-webkit-scrollbar{display:none}

.drop-item--tile .drop-photo{
  --drop-photo-size: cover;
  --drop-photo-pos: 50% 22%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background-image:
    var(--drop-photo, none),
    radial-gradient(520px 280px at 30% 25%, rgba(21,106,255,.26), transparent 70%),
    radial-gradient(520px 280px at 80% 30%, rgba(21,106,255,.12), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-size: var(--drop-photo-size), auto, auto, auto;
  background-position: var(--drop-photo-pos), 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  aspect-ratio: 5 / 4;
  min-height:200px;
  overflow:hidden;
  position:relative;
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}
.drop-item--tile .drop-photo:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.26) 100%);
  pointer-events:none;
}
.drop-item--tile .drop-photo{background-color:rgba(0,0,0,.12)}
.drop-item--tile .drop-photo:before{
  content:"";
  position:absolute;
  inset:-70px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
  opacity:.03;
  transform: translateY(-10px);
  pointer-events:none;
}
.drop-item--tile:hover .drop-photo:before{opacity:.05}

.drop-item--tile .drop-name{
  margin-top:0;
  font-size:clamp(18px, 1.8vw, 24px);
  letter-spacing:-.04em;
  line-height:1.05;
}
.drop-item--tile .drop-desc{
  max-width:none;
  font-size:13px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.drop-item--tile .drop-right{
  width:100%;
  justify-content:space-between;
  align-items:center;
}
.drop-item--tile .drop-price{font-size:17px}
.drop-item--link{
  cursor:pointer;
}
.drop-item--link:focus-visible{
  outline:2px solid rgba(21,106,255,.75);
  outline-offset:4px;
}
.drop-item--link .drop-hint{
  font-family:var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:10px 12px;
  background:rgba(255,255,255,.04);
}
.drop-item--link:hover .drop-hint{
  border-color:rgba(21,106,255,.28);
  color:rgba(255,255,255,.92);
  background:rgba(21,106,255,.10);
}

@media (max-width: 520px){
  .drop-preview{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(220px, 62vw);
    grid-template-columns:none;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 2px 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .drop-preview::-webkit-scrollbar{display:none}
  .drop-item--tile{
    width:100%;
    min-width:0;
    scroll-snap-align:start;
  }
  .drop-item--tile .drop-photo{
    min-height:150px;
  }
  .drop-item--tile .drop-in{
    padding:10px;
    gap:8px;
  }
  .drop-item--tile .drop-name{
    font-size:clamp(16px, 5vw, 20px);
  }
  .drop-item--tile .drop-desc{
    font-size:12px;
    min-height:0;
  }
  .drop-item--tile .drop-price{
    font-size:16px;
  }
}

/* Sellers */
.seller-slab{
  margin-top:18px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 300px at 20% 20%, rgba(21,106,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 84px rgba(0,0,0,.55);
  padding:22px;
}
.seller-lines{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
@media (max-width: 820px){.seller-lines{grid-template-columns:1fr}}
.seller-line{display:flex; align-items:center; gap:10px; padding:14px 0; border-top:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.78)}
.seller-line:first-child{border-top:none}
.s-dot{width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.85)); box-shadow:0 0 16px rgba(21,106,255,.22)}

/* spacing for fixed HUD */
.stadium-page main{padding-top:74px}

/* Stadium Hero Upgrade */

/* Extra depth + vertical arena streaks */
.stadium-hero.hero-upgrade{
  isolation:isolate;
}

.stadium-hero.hero-upgrade .inner{position:relative}

.stadium-hero.hero-upgrade .inner:before{
  content:"";
  position:absolute;
  inset:-40px -20px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 44px
    );
  opacity:.08;
  mix-blend-mode:screen;
  transform: translateX(-8%);
  animation: arenaBars 7.5s linear infinite;
  z-index:0;
}
@keyframes arenaBars{
  0%{transform: translateX(-10%)}
  100%{transform: translateX(10%)}
}

/* Faint electric texture */
.stadium-hero.hero-upgrade .inner:after{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  background:
    radial-gradient(420px 220px at 18% 40%, rgba(21,106,255,.12), transparent 72%),
    radial-gradient(520px 260px at 78% 34%, rgba(21,106,255,.14), transparent 74%),
    conic-gradient(from 210deg at 55% 40%, rgba(21,106,255,.08), transparent, rgba(21,106,255,.10), transparent);
  opacity:.55;
  filter: blur(10px);
  animation: electricDrift 9.5s ease-in-out infinite;
  z-index:0;
}
@keyframes electricDrift{
  0%,100%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(14px,-10px,0)}
}

/* Subtle micro-flash on load */
.stadium-hero.hero-upgrade:focus-within{}
.stadium-hero.hero-upgrade{position:relative}
.stadium-hero.hero-upgrade:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 520px at 52% 42%, rgba(255,255,255,.22), rgba(21,106,255,.14), transparent 62%);
  opacity:0;
  animation: microFlash 900ms ease-out 1;
  z-index:1;
}
@keyframes microFlash{
  0%{opacity:0}
  10%{opacity:.22}
  30%{opacity:.08}
  100%{opacity:0}
}

/* Break the perfect grid */
.hero-stack--offset{
  position:relative;
  z-index:2;
  transform: translateX(10px);
}
@media (max-width: 920px){.hero-stack--offset{transform:none}}

/* Headline split + impact only on HIT */
.hero-title{display:flex; flex-direction:column; gap:6px}
.hero-title-top{
  display:block;
  font-weight:980;
  letter-spacing:-.05em;
  font-size:clamp(56px, 7.5vw, 112px);
  line-height:.90;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow: 0 24px 70px rgba(0,0,0,.65);
  opacity:0;
  transform: translateY(10px);
  animation: titleIn 720ms ease-out 1 forwards;
}

.hero-title-hit{
  display:block;
  font-weight:990;
  letter-spacing:-.07em;
  font-size:clamp(84px, 12vw, 170px);
  line-height:.78;
  text-transform:uppercase;
  color:rgba(255,255,255,.98);
  text-shadow:
    0 26px 86px rgba(0,0,0,.70),
    0 0 56px rgba(21,106,255,.16);
  position:relative;
  opacity:0;
  transform: translateY(12px) scale(.985);
  animation:
    titleIn 720ms ease-out 1 forwards,
    hitImpact 820ms cubic-bezier(.12,.9,.22,1) 1 70ms;
}

@keyframes titleIn{
  to{opacity:1; transform: translateY(0)}
}

@keyframes hitImpact{
  0%{transform: translateY(12px) scale(.985)}
  35%{transform: translateY(0) scale(1.06)}
  62%{transform: translateY(0) scale(.995)}
  100%{transform: translateY(0) scale(1)}
}

/* Glow pulse behind the hit word */
.hero-title-hit:after{
  content:"";
  position:absolute;
  left:18%;
  top:42%;
  width:520px;
  height:260px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 30% 30%, rgba(21,106,255,.26), rgba(21,106,255,.14), transparent 70%);
  filter: blur(22px);
  opacity:.55;
  z-index:-1;
  animation: hitGlow 2.6s ease-in-out infinite;
}
@keyframes hitGlow{
  0%,100%{opacity:.48; transform: translate(-50%,-50%) scale(.98)}
  50%{opacity:.72; transform: translate(-50%,-50%) scale(1.04)}
}

/* CTA upgrade (hero only) */
.stadium-hero .hero-primary{
  border-color:rgba(21,106,255,.58);
  box-shadow:
    0 18px 46px rgba(0,0,0,.58),
    0 0 0 12px rgba(21,106,255,.10),
    0 0 44px rgba(21,106,255,.10);
  animation: ctaPulse 2.8s ease-in-out infinite;
  transform-origin:center;
}
@keyframes ctaPulse{
  0%,100%{box-shadow: 0 18px 46px rgba(0,0,0,.58), 0 0 0 12px rgba(21,106,255,.10), 0 0 44px rgba(21,106,255,.10)}
  50%{box-shadow: 0 18px 46px rgba(0,0,0,.58), 0 0 0 14px rgba(21,106,255,.12), 0 0 58px rgba(21,106,255,.14)}
}
.stadium-hero .hero-primary:hover{transform: scale(1.03)}

/* Live momentum ticker */
.ticker{
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:12px 0;
  overflow:hidden;
  position:relative;
}
.ticker:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,11,1) 0%, rgba(5,7,11,0) 12%, rgba(5,7,11,0) 88%, rgba(5,7,11,1) 100%);
  pointer-events:none;
}
.ticker-track{
  display:flex;
  gap:18px;
  align-items:center;
  width:max-content;
  animation: tickerMove 18s linear infinite;
  will-change: transform;
}
@keyframes tickerMove{from{transform: translateX(0)}to{transform: translateX(-50%)}}

.titem{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  letter-spacing:.20em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.70);
  white-space:nowrap;
}
.titem + .titem:before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 18px rgba(21,106,255,.08);
  margin-right:8px;
}
.t-dot{
  width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.95));
  box-shadow: 0 0 18px rgba(21,106,255,.30);
  animation: livePulse 1.1s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .ticker-track, .stadium-hero.hero-upgrade:after, .stadium-hero.hero-upgrade .inner:before, .stadium-hero.hero-upgrade .inner:after,
  .hero-title-top, .hero-title-hit, .hero-title-hit:after, .stadium-hero .hero-primary{animation:none !important}
}

/* Launch Experience Upgrades */

/* Section rhythm: vary lighting so it doesn't feel like repeated blocks */
.launch .stadium-feed{position:relative}
.launch .stadium-feed:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(800px 420px at 15% 20%, rgba(21,106,255,.10), transparent 62%);
  opacity:.75;
}
.launch .stadium-replay{position:relative}
.launch .stadium-replay:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(820px 440px at 80% 30%, rgba(21,106,255,.12), transparent 64%);
  opacity:.7;
}
.launch .stadium-platform{position:relative}
.launch .stadium-platform:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(900px 520px at 45% 18%, rgba(21,106,255,.08), transparent 66%);
  opacity:.65;
}
.launch .stadium-drop{position:relative}
.launch .stadium-drop:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(880px 520px at 30% 30%, rgba(21,106,255,.12), transparent 66%);
  opacity:.75;
}
.launch .stadium-sellers{position:relative}
.launch .stadium-sellers:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(880px 520px at 78% 30%, rgba(21,106,255,.10), transparent 66%);
  opacity:.7;
}

/* Live feed board */
.feed-board{
  --board-bg: none;
  margin-top:18px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.10);
  background-image:
    var(--board-bg),
    radial-gradient(520px 320px at 20% 20%, rgba(21,106,255,.18), transparent 70%),
    radial-gradient(520px 320px at 80% 25%, rgba(21,106,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: cover, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 40px 110px rgba(0,0,0,.62);
  overflow:hidden;
}
.feed-top{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08)}
.feed-title{font-weight:920; letter-spacing:-.03em; font-size:18px}
.feed-meta{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.68); display:flex; align-items:center; gap:10px}
.feed-dot{width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.95)); box-shadow: 0 0 18px rgba(21,106,255,.30); animation: livePulse 1.1s ease-in-out infinite}

.feed-grid{display:grid; grid-template-columns: 1fr 320px; gap:0}
@media (max-width: 980px){.feed-grid{grid-template-columns:1fr}}

.feed-list{padding:12px 10px 14px 20px}
.feed-row{
  display:grid;
  grid-template-columns: 1.4fr 1.1fr .7fr;
  gap:12px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.80);
}
.feed-row:first-child{border-top:none}
.feed-left{font-weight:860; letter-spacing:-.02em}
.feed-right{font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:rgba(21,106,255,.78)}
.feed-meta2{color:rgba(255,255,255,.55); text-align:right}
.feed-row--hot .feed-right{color:rgba(255,255,255,.86)}
.feed-row--hot{position:relative}
.feed-row--hot:before{content:""; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:rgba(21,106,255,.75); box-shadow:0 0 18px rgba(21,106,255,.28)}

.feed-pulse .feed-row--hot{animation: feedHot 520ms ease-out 1}
@keyframes feedHot{0%{transform:translateY(-2px)}100%{transform:translateY(0)}}

.feed-side{border-left:1px solid rgba(255,255,255,.08); padding:16px 18px; display:grid; gap:12px}
@media (max-width: 980px){.feed-side{border-left:none; border-top:1px solid rgba(255,255,255,.08); grid-template-columns:repeat(3,1fr)}
  .feed-meta2{text-align:left}
}
@media (max-width: 700px){.feed-side{grid-template-columns:1fr}}

.side-stat{border-top:1px solid rgba(255,255,255,.08); padding:12px 0}
.side-stat:first-child{border-top:none}
.side-k{font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.62)}
.side-v{margin-top:8px; font-weight:960; letter-spacing:-.04em; font-size:24px}
.side-b{margin-top:6px; color:rgba(255,255,255,.56)}

.feed-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 20px; border-top:1px solid rgba(255,255,255,.08)}

/* Replay media cards */
.clip-track{
  margin-top:20px;
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding:4px 2px 14px;
  scroll-snap-type:x mandatory;
}
.clip-track::-webkit-scrollbar{height:10px}
.clip-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:999px}

.clip{
  flex:0 0 min(420px, 82vw);
  scroll-snap-align:start;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 34px 90px rgba(0,0,0,.58);
  overflow:hidden;
  position:relative;
}
.clip:hover{border-color:rgba(21,106,255,.22)}

.thumb{
  aspect-ratio: 16 / 9;
  --thumb-bg: none;
  background-image:
    var(--thumb-bg),
    radial-gradient(520px 280px at 30% 25%, rgba(21,106,255,.34), transparent 70%),
    radial-gradient(520px 280px at 80% 30%, rgba(21,106,255,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: cover, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}
.thumb:before{
  content:"";
  position:absolute;
  inset:-60px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px);
  opacity:.12;
  transform: translateY(-8px);
}
.clip:hover .thumb:before{opacity:.18}
.thumb:after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.58) 100%)}
.thumb-label{position:absolute; left:14px; bottom:14px; z-index:2; font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.76)}

.clip-body{padding:16px 16px 18px}
.clip-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.clip-title{font-weight:960; letter-spacing:-.03em; font-size:22px}
.clip-meta{font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; font-size:11px; color:rgba(255,255,255,.58)}
.clip-desc{margin-top:10px; color:rgba(255,255,255,.70)}
.clip-btn{margin-top:14px}

.clip-hot{border-color:rgba(21,106,255,.16)}
.clip-hot .thumb{
  background-image:
    var(--thumb-bg),
    radial-gradient(520px 280px at 30% 25%, rgba(21,106,255,.20), transparent 70%),
    radial-gradient(520px 280px at 80% 30%, rgba(21,106,255,.26), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  background-size: cover, auto, auto, auto;
  background-position: center, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

/* Platform slabs: light sweep on hover */
.slab-sweep:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(21,106,255,.10) 18%, transparent 36%);
  opacity:0;
  transform: translateX(-22%);
  transition: opacity 220ms ease;
}
.slab-sweep:hover:after{
  opacity:.55;
  animation: sweep 1.3s ease-in-out 1;
}
@keyframes sweep{from{transform: translateX(-26%)}to{transform: translateX(26%)}}

/* Drop signals */
.drop-signals{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}
.sig{
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.70);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
}
.sig-hot{border-color:rgba(21,106,255,.22); color:rgba(21,106,255,.82)}

/* Seller slab emphasis */
.seller-money{
  background:
    radial-gradient(620px 360px at 20% 20%, rgba(21,106,255,.16), transparent 70%),
    radial-gradient(560px 340px at 80% 20%, rgba(21,106,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.seller-money strong{color:rgba(255,255,255,.92)}

@media (prefers-reduced-motion: reduce){
  .slab-sweep:hover:after{animation:none}
}

/* Live Environment Layer */

/* Stronger impact behind HIT (shockwave pulse) */
.hero-title-hit:before{
  content:"";
  position:absolute;
  left:22%;
  top:46%;
  width:560px;
  height:560px;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(21,106,255,.20), rgba(21,106,255,.10), transparent 60%);
  filter: blur(18px);
  opacity:0;
  z-index:-2;
  animation: gvShock 2.9s ease-in-out infinite;
}
@keyframes gvShock{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.88)}
  12%{opacity:.55; transform: translate(-50%,-50%) scale(1.02)}
  44%{opacity:.18; transform: translate(-50%,-50%) scale(1.10)}
  100%{opacity:0; transform: translate(-50%,-50%) scale(1.18)}
}

/* LIVE BREAK STRIP */
.live-break-strip{padding:18px 0 10px; margin-top:-8px}
.lbs{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center}
@media (max-width: 980px){.lbs{grid-template-columns:1fr; align-items:stretch}}
.lbs-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(21,106,255,.22);
  background:rgba(0,0,0,.12);
  font-family:var(--mono);
  letter-spacing:.20em; text-transform:uppercase; font-size:12px;
  color:rgba(255,255,255,.76);
  width:max-content;
}
.lbs-dot{width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, rgba(21,106,255,.95)); box-shadow:0 0 18px rgba(21,106,255,.30); animation: livePulse 1.1s ease-in-out infinite}
.lbs-bar{
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:12px 0;
  overflow:hidden;
  position:relative;
  border-radius:14px;
  background: rgba(0,0,0,.10);
}
.lbs-bar:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,7,11,1) 0%, rgba(5,7,11,0) 10%, rgba(5,7,11,0) 90%, rgba(5,7,11,1) 100%);
  pointer-events:none;
}
.lbs-track{display:flex; gap:18px; align-items:center; width:max-content; animation: gvLbsMove 16s linear infinite; will-change: transform}
@keyframes gvLbsMove{from{transform: translateX(0)}to{transform: translateX(-50%)}}
.lbs-item{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.70); white-space:nowrap}
.lbs-item.hot{color:rgba(21,106,255,.82)}
.lbs-item + .lbs-item:before{content:""; width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.18); box-shadow: 0 0 18px rgba(21,106,255,.08); margin-right:10px; display:inline-block}
.lbs-cta{justify-self:end}
@media (max-width: 980px){.lbs-cta{justify-self:start}}

/* Hero ticker: more rhythm */
.ticker-track{animation-duration:22s}
.titem.hot{color:rgba(255,255,255,.84); position:relative}
.titem.hot:after{
  content:"";
  position:absolute;
  inset:-8px -10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(21,106,255,.10), transparent 70%);
  opacity:0;
  animation: gvHotPing 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes gvHotPing{0%,100%{opacity:0}50%{opacity:.55}}

/* Break alert micro-component */
.break-alert{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:70;
  width:min(360px, calc(100vw - 44px));
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(420px 260px at 20% 20%, rgba(21,106,255,.12), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding:14px 14px 12px;
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}
.ba-k{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:11px; color:rgba(21,106,255,.80)}
.ba-t{margin-top:8px; font-weight:920; letter-spacing:-.02em; color:rgba(255,255,255,.86)}
.ba-show{opacity:1; transform: translateY(0); animation: gvBaInOut 3.6s ease-in-out 1}
@keyframes gvBaInOut{0%{opacity:0; transform:translateY(10px)}12%{opacity:1; transform:translateY(0)}78%{opacity:1}100%{opacity:0; transform:translateY(10px)}}

/* Feed + drop micro-motion hooks */
.feed-blip{position:relative}
.feed-blip:after{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:rgba(21,106,255,.75); box-shadow:0 0 18px rgba(21,106,255,.20); margin-left:10px}
.feed-pulse .side-v{animation: gvStatPulse 420ms ease-out 1}
@keyframes gvStatPulse{0%{transform:translateY(-2px)}100%{transform:translateY(0)}}

.sig-pop{animation: gvSigPop 420ms ease-out 1}
@keyframes gvSigPop{0%{transform: translateY(-2px)}100%{transform: translateY(0)}}
.sig-flash{animation: gvSigFlash 820ms ease-in-out 1}
@keyframes gvSigFlash{0%{box-shadow:none}30%{box-shadow:0 0 0 10px rgba(21,106,255,.10), 0 0 40px rgba(21,106,255,.10)}100%{box-shadow:none}}

/* Clickability polish */
.clip{cursor:pointer}
.clip{transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease}
.clip:hover{transform: translateY(-6px); box-shadow: 0 42px 110px rgba(0,0,0,.66)}
.clip:hover .thumb{transform: scale(1.02)}
.thumb{transition: transform 220ms ease}

.pillar-slab{transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease}
.pillar-slab:hover{transform: translateY(-4px); border-color: rgba(21,106,255,.16); box-shadow: 0 44px 130px rgba(0,0,0,.64)}

.seller-slab{transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease}
.seller-slab:hover{transform: translateY(-3px); border-color: rgba(21,106,255,.14); box-shadow: 0 44px 120px rgba(0,0,0,.64)}

@media (prefers-reduced-motion: reduce){
  .lbs-track, .hero-title-hit:before, .titem.hot:after, .break-alert{animation:none !important}
}

/* Live Drop Enhancements */

/* One clear hot item */
.drop-item--hot{
  border-color: rgba(21,106,255,.22) !important;
  box-shadow: 0 44px 120px rgba(0,0,0,.64), 0 0 0 12px rgba(21,106,255,.10), 0 0 56px rgba(21,106,255,.10);
}
.drop-item--hot:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(21,106,255,.12) 18%, transparent 36%);
  opacity:.0;
  transform: translateX(-26%);
  pointer-events:none;
}
.drop-item--hot:hover:before{
  opacity:.55;
  animation: dropSweep 1.25s ease-in-out 1;
}
@keyframes dropSweep{from{transform:translateX(-26%)}to{transform:translateX(26%)}}

.smalltag-hot{
  border-color: rgba(21,106,255,.26) !important;
  color: rgba(255,255,255,.86) !important;
  box-shadow: 0 0 0 8px rgba(21,106,255,.08);
}
.smalltag-hot{animation: tagPulse 2.8s ease-in-out infinite}
@keyframes tagPulse{0%,100%{opacity:.92}50%{opacity:1}}

/* Status badges feel alive */
.sig-live{border-color: rgba(21,106,255,.18)}
.sig-live{animation: liveTag 2.4s ease-in-out infinite}
@keyframes liveTag{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 10px rgba(21,106,255,.08), 0 0 40px rgba(21,106,255,.08)}}

.sig-urgent{border-color: rgba(255,61,110,.30) !important; color: rgba(255,255,255,.88) !important}
.sig-urgent{animation: urgentPulse 2.2s ease-in-out infinite}
@keyframes urgentPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 10px rgba(255,61,110,.07), 0 0 38px rgba(255,61,110,.08)}}

.sig-fast{border-color: rgba(21,106,255,.20) !important; color: rgba(21,106,255,.86) !important}

/* Subtle live energy across the card */
.drop-item{position:relative}
.drop-item:before{
  content:"";
  position:absolute;
  inset:-30px;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.06) 14%, rgba(21,106,255,.08) 18%, transparent 34%);
  opacity:.0;
  transform: translateX(-28%);
  pointer-events:none;
  filter: blur(10px);
}
.drop-item:hover:before{opacity:.24; animation: dropSweep 1.55s ease-in-out 1}

/* Buy button = primary action (drop only) */
.drop-item .btn.primary{
  box-shadow: 0 18px 46px rgba(0,0,0,.58), 0 0 0 10px rgba(21,106,255,.09), 0 0 46px rgba(21,106,255,.10);
  animation: buyPulse 3.2s ease-in-out infinite;
}
.drop-item .btn.primary:hover{transform: scale(1.03)}
@keyframes buyPulse{0%,100%{filter:none}50%{filter:brightness(1.04)}}

@media (prefers-reduced-motion: reduce){
  .smalltag-hot, .sig-live, .sig-urgent, .drop-item--hot:hover:before, .drop-item:hover:before, .drop-item .btn.primary{animation:none !important}
}

/* Cart Drawer */
body.cart-open{overflow:hidden}

.gv-cart-backdrop{
  position:fixed;
  inset:0;
  z-index:80;
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(10px);
  opacity:0;
  pointer-events:none;
  transition: opacity 220ms ease;
}
body.cart-open .gv-cart-backdrop{opacity:1; pointer-events:auto}

.gv-cart{
  position:fixed;
  top:0;
  right:0;
  z-index:90;
  height:100vh;
  height:100dvh;
  max-height:100dvh;
  width:min(480px, 94vw);
  transform: translateX(102%);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  border-left:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 360px at 30% 20%, rgba(21,106,255,.14), transparent 70%),
    radial-gradient(520px 340px at 85% 25%, rgba(21,106,255,.16), transparent 70%),
    linear-gradient(180deg, rgba(10,14,22,.92), rgba(6,8,13,.92));
  box-shadow: -28px 0 90px rgba(0,0,0,.66);
}
body.cart-open .gv-cart{transform: translateX(0)}

.gv-cart-in{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.gv-cart-h{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.gv-cart-title{font-weight:960; letter-spacing:-.03em; font-size:20px}
.gv-cart-sub{margin-top:8px; font-family:var(--mono); letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.62)}

.gv-cart-x{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  color:rgba(255,255,255,.88);
  width:42px;
  height:42px;
  border-radius:999px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.gv-cart-x:hover{border-color:rgba(21,106,255,.26); box-shadow:0 0 0 10px rgba(21,106,255,.08)}

.gv-cart-b{
  padding:12px 18px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  flex:1 1 auto;
}

.gv-line{padding:14px 0; border-top:1px solid rgba(255,255,255,.08)}
.gv-line:first-child{border-top:none}
.gv-line-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.gv-line-name{font-weight:920; letter-spacing:-.02em}
.gv-line-price{font-weight:920; letter-spacing:-.01em; color:rgba(255,255,255,.86)}
.gv-line-desc{margin-top:8px; color:rgba(255,255,255,.64); font-size:13px}

.gv-line-controls{margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

.gv-qty{display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.10); border-radius:999px; overflow:hidden}
.gv-qtybtn{
  appearance:none;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.86);
  width:40px;
  height:36px;
  cursor:pointer;
  font-size:18px;
}
.gv-qtybtn:hover{background:rgba(255,255,255,.06)}
.gv-qtyin{
  width:52px;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.86);
  text-align:center;
  font-weight:860;
  font-family:var(--mono);
  letter-spacing:.10em;
}

.gv-remove{
  appearance:none;
  border:none;
  background:transparent;
  color:rgba(255,255,255,.60);
  cursor:pointer;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
}
.gv-remove:hover{color:rgba(255,255,255,.86)}

.gv-cart-s{
  border-top:1px solid rgba(255,255,255,.08);
  padding:14px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18));
}
.gv-sumrow{display:flex; justify-content:space-between; gap:12px; padding:8px 0; color:rgba(255,255,255,.70)}
.gv-sumrow.total{color:rgba(255,255,255,.90); font-weight:920}

.gv-cues{margin-top:10px; color:rgba(255,255,255,.56); font-size:13px}
.gv-cues div + div{margin-top:6px}

.gv-cart-cta{margin-top:14px; display:flex; gap:12px; flex-wrap:wrap}
.gv-cart-cta .btn{flex:1 1 160px}

.gv-cart-empty{padding:26px 2px 10px}
.gv-cart-empty-title{font-weight:960; letter-spacing:-.03em; font-size:22px}
.gv-cart-empty-sub{margin-top:10px; color:rgba(255,255,255,.66)}
.gv-cart-empty .btn{margin-top:16px}

/* Toast */
.gv-toast{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:95;
  width:min(360px, calc(100vw - 36px));
  opacity:0;
  transform: translateY(10px);
  pointer-events:none;
}
.gv-toast.show{animation: gvToast 2.6s ease-in-out 1}
@keyframes gvToast{0%{opacity:0; transform:translateY(10px)}12%{opacity:1; transform:translateY(0)}78%{opacity:1}100%{opacity:0; transform:translateY(10px)}}
.gv-toast-in{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(420px 260px at 20% 20%, rgba(21,106,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding:14px 14px 12px;
}
.gv-toast-k{font-family:var(--mono); letter-spacing:.20em; text-transform:uppercase; font-size:11px; color:rgba(21,106,255,.80)}
.gv-toast-t{margin-top:8px; font-weight:900; letter-spacing:-.02em; color:rgba(255,255,255,.86)}

@media (prefers-reduced-motion: reduce){
  .gv-cart{transition:none}
  .gv-cart-backdrop{transition:none}
  .gv-toast.show{animation:none}
}

/* Cart Drawer Enhancements */
.gv-cart-lock{
  margin-top:8px;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.62);
}
.gv-cart-id{
  margin-top:6px;
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(21,106,255,.72);
}

.gv-momentum{
  margin:2px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(255,255,255,.70);
}
.gv-momentum.ping{animation: gvPing 360ms ease-out 1}
@keyframes gvPing{0%{transform:translateY(-1px)}100%{transform:translateY(0)}}

/* Qty controls: responsive feedback */
.gv-qty{transition: box-shadow 160ms ease, border-color 160ms ease}
.gv-qty:hover{border-color:rgba(21,106,255,.18); box-shadow:0 0 0 10px rgba(21,106,255,.06)}
.gv-qtybtn{transition: transform 120ms ease, background 120ms ease, filter 120ms ease}
.gv-qtybtn:hover{filter:brightness(1.08)}
.gv-qtybtn:active{transform: scale(.94)}
.gv-qtyin:focus{outline:none}

/* Remove: softer by default, intentional on hover */
.gv-remove{opacity:.55; transition: opacity 140ms ease, color 140ms ease}
.gv-remove:hover{opacity:1; color:rgba(255,255,255,.86)}

/* Checkout: dominant */
.gv-cart-cta .btn.primary{
  box-shadow: 0 18px 46px rgba(0,0,0,.58), 0 0 0 12px rgba(21,106,255,.10), 0 0 56px rgba(21,106,255,.12);
  animation: gvCheckoutPulse 3.2s ease-in-out infinite;
  transition: transform 160ms ease, filter 160ms ease;
}
.gv-cart-cta .btn.primary:hover{transform: translateY(-2px) scale(1.02); filter:brightness(1.05)}
@keyframes gvCheckoutPulse{0%,100%{filter:none}50%{filter:brightness(1.04)}}

/* Keep Shopping: de-emphasize */
.gv-cart-cta button.btn.ghost{opacity:.70; transition: opacity 160ms ease, transform 160ms ease}
.gv-cart-cta button.btn.ghost:hover{opacity:1; transform: translateY(-1px)}

/* Cart open micro-animation (glow sweep + soft overshoot) */
.gv-cart-in{position:relative}
body.cart-open .gv-cart-in{animation: gvCartIn 360ms cubic-bezier(.18,.9,.22,1) 1}
@keyframes gvCartIn{0%{transform:translateX(14px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}}

body.cart-open .gv-cart-in:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(110deg, transparent 0%, rgba(21,106,255,.14) 18%, transparent 36%);
  opacity:.0;
  transform: translateX(-24%);
  animation: gvCartSweep 720ms ease-out 1;
}
@keyframes gvCartSweep{0%{opacity:0; transform:translateX(-26%)}35%{opacity:.35}100%{opacity:0; transform:translateX(26%)}}

@media (prefers-reduced-motion: reduce){
  .gv-momentum.ping, .gv-cart-cta .btn.primary, body.cart-open .gv-cart-in, body.cart-open .gv-cart-in:before{animation:none !important}
}

/* Mobile HUD */
.hud-bar{position:relative}
.hud-menu{display:none}
.hud-menu > summary{list-style:none}
.hud-menu > summary::-webkit-details-marker{display:none}

.hud-menu-panel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(320px, calc(100vw - 44px));
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(420px 260px at 20% 20%, rgba(21,106,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(10,14,22,.92), rgba(6,8,13,.92));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding:10px;
}

.hud-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.08);
  font-family:var(--mono);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.76);
}
.hud-menu-item + .hud-menu-item{margin-top:10px}
.hud-menu-item:hover{border-color:rgba(21,106,255,.22); box-shadow:0 0 0 10px rgba(21,106,255,.08)}

@media (max-width: 820px){
  .hud-links{display:none}
  .hud-menu{display:block}
  .hud-actions{gap:10px}
  .hud-link{padding:10px 12px}
}


/* Launch polish: flat shipping, gallery support, tighter merch previews */
.poster-desc,
.drop-desc {
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.poster-desc {
  -webkit-line-clamp:2;
  min-height:2.8em;
}

.drop-desc {
  -webkit-line-clamp:2;
  max-width:52ch;
  min-height:2.9em;
}

.product-media-stack {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.product-gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit, 88px);
  justify-content:flex-start;
  gap:12px;
}

.product-gallery[hidden] {
  display:none;
}

.product-thumb {
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.product-thumb:hover,
.product-thumb.is-active {
  border-color:rgba(21,106,255,.34);
  box-shadow:0 0 0 6px rgba(21,106,255,.10), 0 18px 42px rgba(0,0,0,.32);
}

.product-thumb-image {
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@media (max-width: 640px) {
  .stadium-page main{padding-top:62px}

  .stadium-hero{
    min-height:auto;
    padding:84px 0 40px;
  }

  .hero-stack{
    max-width:100%;
  }

  .systemline{
    margin-bottom:10px;
    font-size:11px;
    letter-spacing:.18em;
  }

  .hero-sub{
    margin-top:12px;
  }

  .signal-row{
    margin-top:16px;
  }

  .live-break-strip{
    padding:10px 0 4px;
    margin-top:0;
  }

  .lbs{
    gap:10px;
  }

  .lbs-bar{
    padding:10px 0;
  }

  .lbs-cta{
    width:100%;
  }

  .lbs-cta .btn{
    width:100%;
    justify-content:center;
  }

  .drop-item--tile .drop-labels,
  .drop-item--tile .drop-signals{
    flex-wrap:wrap;
    justify-content:center;
    overflow:visible;
  }

  .drop-item--tile .drop-right{
    justify-content:center;
  }

  .drop-item--tile .drop-price{
    text-align:center;
    width:100%;
  }

  .gv-cart{
    width:100vw;
    max-width:100vw;
  }

  .gv-cart-h{
    padding:16px 16px 12px;
  }

  .gv-cart-b{
    padding:10px 16px 14px;
  }

  .gv-cart-s{
    padding:12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .gv-cart-cta{
    gap:10px;
  }

  .gv-cart-cta .btn{
    flex:1 1 100%;
  }

  .product-photo {
    min-height:400px;
  }

  .product-gallery {
    grid-template-columns:repeat(3, 72px);
    gap:10px;
  }
}