/* =========================================================
   CultureX — Design System
   Black / neon purple-magenta, matching the CultureX app
   ========================================================= */

:root {
  --bg: #060608;
  --bg-elevated: #101014;
  --bg-card: #131318;
  --bg-card-2: #17171e;
  --border: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(196, 88, 247, 0.55);

  --neon-1: #b026ff;
  --neon-2: #ff2ee6;
  --neon-grad: linear-gradient(135deg, var(--neon-1) 0%, var(--neon-2) 100%);
  --neon-grad-soft: linear-gradient(135deg, rgba(176,38,255,0.18) 0%, rgba(255,46,230,0.18) 100%);

  --purple: #a855f7;
  --purple-2: #9333ea;

  --green: #22c55e;
  --green-soft: rgba(34,197,94,0.15);
  --red: #ef4444;
  --red-soft: rgba(239,68,68,0.15);

  --text: #ffffff;
  --text-dim: #b4b4bf;
  --text-mute: #82828d;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-pill: 999px;

  --ff: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--neon-1); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a33; border-radius: 10px; }

/* ---------- Preloader (cinematic intro) ---------- */
/* True scroll lock for the preloader window, not just overflow:hidden — iOS Safari in
   particular will still let touch scrolls bleed through to the page underneath a fixed
   overlay with only overflow:hidden on body, which is what could leave the page scrolled
   partway down by the time the preloader lifts. Pinning html+body to position:fixed blocks
   that at the source. */
html.preloading, body.preloading {
  overflow: hidden;
  height: 100%;
}
body.preloading {
  position: fixed;
  inset: 0;
  width: 100%;
}

.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  cursor: pointer;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s ease;
}
.preloader.exit { opacity: 0; transform: scale(1.04); visibility: hidden; pointer-events: none; }

.preloader__mark {
  width: 64px; height: 64px; border-radius: 18px; overflow: hidden;
  opacity: 0;
  animation: preMarkIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
  box-shadow: 0 0 40px rgba(176,38,255,0.6);
}
.preloader__mark img { width: 100%; height: 100%; object-fit: cover; }
@keyframes preMarkIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

.preloader__word { font-size: clamp(26px, 5vw, 42px); font-weight: 900; letter-spacing: 0.1em; color: #fff; }
.preloader__word span { opacity: 0; display: inline-block; animation: pwLetter 0.5s ease forwards; }
.preloader__word span:nth-child(1) { animation-delay: 0.35s; }
.preloader__word span:nth-child(2) { animation-delay: 0.40s; }
.preloader__word span:nth-child(3) { animation-delay: 0.45s; }
.preloader__word span:nth-child(4) { animation-delay: 0.50s; }
.preloader__word span:nth-child(5) { animation-delay: 0.55s; }
.preloader__word span:nth-child(6) { animation-delay: 0.60s; }
.preloader__word span:nth-child(7) { animation-delay: 0.65s; }
.preloader__word span:nth-child(8) { animation-delay: 0.70s; }
@keyframes pwLetter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Hero entrance is gated behind the preloader via body.intro-ready */
.hero__ring, .hero-in { animation-play-state: paused; }
body.intro-ready .hero__ring, body.intro-ready .hero-in { animation-play-state: running; }

/* ---------- Cursor-reactive ambient glow (site-wide) ---------- */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,38,255,0.16), transparent 70%);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.cursor-glow.active { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------- Film grain (site-wide texture) ---------- */
.grain-overlay {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Tilt cards ---------- */
/* will-change is toggled in JS only while hovered, not applied statically here */
.tilt { transition: transform 0.15s ease-out; }

/* ---------- Background glow ---------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(176,38,255,0.20), transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(255,46,230,0.14), transparent 38%),
    radial-gradient(circle at 50% 90%, rgba(147,51,234,0.16), transparent 45%);
}

/* ---------- Layout shell ---------- */
.app { position: relative; z-index: 1; }

.view { display: none; min-height: 100vh; }
.view.active { display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- Top ribbon nav ---------- */
.topnav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Extra side padding (was 6px) exists purely to give the active tab's glow (see
     .topnav__tab.active below, a 22px box-shadow blur) somewhere to bleed into. With
     overflow:hidden on this container and the pill auto-sizing tight to its content, the
     last tab sits flush against the container's own edge with zero clearance -- so
     whichever tab is active AND happens to be the rightmost (Sign Up, on the sign-up page)
     had its own glow clipped clean off on that side, reading as lopsided/cramped compared
     to the breathing room every other tab's glow gets against the pill's interior. */
  padding: 6px 14px;
  max-width: calc(100vw - 20px);
  background: rgba(10,10,14,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196,88,247,0.35);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 16px rgba(176,38,255,0.12);
  box-sizing: border-box;
  /* Safety net: flex items in here are flex-shrink:0 on purpose (labels/icons must never
     get visually squashed), which means if some width regime the breakpoints above didn't
     anticipate ever lets the row's natural content width exceed max-width, the overflowing
     tab(s) would render outside the pill's rounded background with no clipping -- visually
     breaking out of the pill shape rather than just looking tight. overflow:hidden means the
     absolute worst case is a cleanly clipped edge (still inside the rounded pill), never
     text/icons spilling out past it onto the raw page background. */
  overflow: hidden;
}

.topnav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px clamp(8px, 2vw, 14px) 6px 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: clamp(12px, 1.6vw, 14px);
  color: var(--text);
  border-right: 1px solid var(--border);
  margin-right: 2px;
  white-space: nowrap;
  flex-shrink: 0;
}
.topnav__brand img { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }

.topnav__tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  /* Bumped from clamp(8px,1.6vw,10px) clamp(10px,2.4vw,18px) -- the old max (18px
     horizontal) is what's active in practice at every width the labelled nav ever shows at
     (it caps out around 750px viewport width, well before the 860px breakpoint where labels
     disappear entirely), so this was never actually shrinking down from that value. Sizing
     it up directly instead of arguing with the math further. */
  padding: clamp(10px, 1.8vw, 12px) clamp(16px, 2.8vw, 24px);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: clamp(11.5px, 1.6vw, 13.5px);
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .25s ease;
}
.topnav__tab svg { width: 16px; height: 16px; opacity: .8; flex-shrink: 0; }
.topnav__tab:hover { color: #fff; }
.topnav__tab.active {
  color: #fff;
  background: var(--neon-grad);
  box-shadow: 0 0 22px rgba(176,38,255,0.55), 0 0 4px rgba(255,46,230,0.6) inset;
}

/* Tiered collapse: shrink padding/type first, then drop the brand mark AND the text
   labels together — never let the pill overflow.
   These two used to be separate breakpoints (brand gone at 860px, labels not gone until
   460px), which left a wide "no brand, but still 5 full text labels" zone in between.
   Every tab has flex-shrink:0 (so the row can never compress below its content's natural
   width) and the clamp()'d font/padding bottom out at a fixed floor well above 0, so once
   the window narrowed enough within that zone, five real labels ("Exchange", "Sign Up",
   etc.) plus icons plus gaps genuinely didn't fit — and with no wrap and no shrink, the
   pill just spilled off the edge of the screen instead of shrinking. Collapsing to
   icon-only at the same point the brand disappears removes that zone entirely: the row
   only ever has to fit either "brand + 5 full labels" (comfortably true above 860px) or
   "5 icons" (trivially true at any width), never anything in between. */
@media (max-width: 860px) {
  .topnav__brand { display: none; }
  .topnav__tab span.full { display: none; }
  .topnav__tab { padding: 10px; }
  .topnav__tab svg { width: 18px; height: 18px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 15px 28px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--solid {
  background: var(--neon-grad);
  color: #fff;
  box-shadow: 0 8px 24px -6px rgba(176,38,255,0.4);
}
.btn--solid:hover { box-shadow: 0 10px 34px -4px rgba(176,38,255,0.65); transform: translateY(-1px); }

.btn--outline {
  background: rgba(255,255,255,0.03);
  color: #fff;
  border-color: var(--border-glow);
  box-shadow: none;
}
.btn--outline:hover { background: rgba(176,38,255,0.12); box-shadow: 0 8px 24px -8px rgba(176,38,255,0.35); }

.btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.btn--ghost:hover { color: #fff; border-color: #444; }

.btn--sm { padding: 9px 16px; font-size: 12.5px; }
.btn--full { width: 100%; }
.btn--green { background: var(--green); box-shadow: 0 0 26px rgba(34,197,94,0.4); color: #04160a; }
.btn--red { background: var(--red); box-shadow: 0 0 26px rgba(239,68,68,0.35); }
.btn--sell.active, .btn--buy.active {}

/* ---------- Section basics ---------- */
.section { padding: clamp(64px, 11vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(48px, 8vw, 80px) 0; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: transparent;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 14px;
}
.h2 {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  max-width: 640px;
  margin: 0 0 8px;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ================= HERO ================= */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 60px;
  position: relative;
}

.hero__ring {
  width: 92px;
  height: 92px;
  border-radius: 24px;
  margin-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(176,38,255,0.55), 0 0 90px rgba(255,46,230,0.25);
  animation: heroPopIn 1.1s cubic-bezier(.2,.9,.25,1) both, floaty 5s ease-in-out 1.1s infinite;
}
.hero__ring img { width: 100%; height: 100%; object-fit: cover; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes heroPopIn {
  0% { opacity: 0; transform: scale(0.6); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Cinematic hero entrance sequence ---------- */
.hero-in {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-in--1 { animation-delay: 0.05s; }
.hero-in--2 { animation-delay: 0.55s; }
.hero-in--3 { animation-delay: 0.85s; }
.hero-in--4 { animation-delay: 1.15s; }
.hero-in--5 { animation-delay: 1.45s; }
.hero-in--6 { animation-delay: 1.85s; }
h1.hero__word.hero-in--1 { animation-delay: 0.05s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
  opacity: 0.97;
  transform: scale(1.08);
}
.hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 380px 260px at 50% 40%, rgba(6,6,8,.68) 0%, rgba(6,6,8,.24) 60%, transparent 88%),
    radial-gradient(ellipse 700px 540px at 50% 42%, rgba(6,6,8,.20) 0%, transparent 85%),
    linear-gradient(180deg, rgba(6,6,8,.18) 0%, rgba(6,6,8,.02) 20%, rgba(6,6,8,.02) 62%, rgba(6,6,8,.60) 100%),
    linear-gradient(120deg, rgba(176,38,255,.18), rgba(255,46,230,.10));
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 40%), rgba(176,38,255,0.16), transparent 60%);
  transition: background 0.15s ease-out;
}

/* ---------- Reveal stagger ---------- */
.reveal-stagger {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stats.in .reveal-stagger { opacity: 1; transform: translateY(0); }
.stats.in .reveal-stagger--1 { transition-delay: 0.05s; }
.stats.in .reveal-stagger--2 { transition-delay: 0.16s; }
.stats.in .reveal-stagger--3 { transition-delay: 0.27s; }
.stats.in .reveal-stagger--4 { transition-delay: 0.38s; }

/* ---------- Cohort banner (honest waitlist framing) ---------- */
.cohort-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 30px auto 0;
  padding: 12px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  box-shadow: 0 0 20px rgba(176,38,255,0.15);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  flex-shrink: 0;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}
#cohortRotator { transition: opacity 0.35s ease; }

/* ---------- Ticker (brand marquee) ---------- */
.ticker { display: flex; align-items: center; gap: 18px; padding: 18px 0; }

.hero__word {
  font-size: clamp(58px, 13vw, 148px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 60px rgba(176,38,255,0.35);
}

.hero__tagline {
  margin-top: 18px;
  font-size: clamp(17px, 2.6vw, 24px);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: transparent;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(176,38,255,0.45));
}

.hero__pitch {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dim);
}

.hero__desc {
  margin-top: 22px;
  max-width: 600px;
  color: var(--text-dim);
  font-size: 16.5px;
  line-height: 1.7;
}

.hero__cta {
  margin-top: 38px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-mute);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  /* it's a <button> now, not a plain div, so undo the browser's default button chrome */
  background: none; border: none; padding: 10px 16px; margin: 0;
  font-family: inherit; cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.hero__scroll:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
.hero__scroll svg { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
@media (max-width: 640px) {
  /* On phones the hero's own content (logo, wordmark, tagline, pitch, desc, both CTA
     buttons) is often tall enough to sit right where this cue is pinned, so it ends up
     overlapping the "Explore the Exchange" button instead of floating clear below it.
     Simplest fix: it's a nice-to-have affordance, not a page-critical control, so it's
     dropped on small screens rather than chased into a position that only holds up on
     some phones and not others. */
  .hero__scroll { display: none; }
}

/* ---------- Ticker marquee ---------- */
.ticker {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
  padding: 16px 0;
  overflow: hidden;
  white-space: nowrap;
}
.ticker__track {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 40px;
  animation: scroll-left 32s linear infinite;
  padding-left: 40px;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker__item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-dim); }
.ticker__item b { color: #fff; }
.ticker__up { color: var(--green); }
.ticker__down { color: var(--red); }

/* ---------- Showcase (full-bleed creator photography) ---------- */
.showcase {
  position: relative;
  width: 100%;
  height: 78vh;
  min-height: 460px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin: 10px 0;
}
.showcase__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
/* Default center-crop cuts the subject out of frame on narrow (mobile) viewports, where
   cover crops the wide source photo down to a slim vertical slice — anchor each photo to
   where its subject actually sits so that slice still contains them. */
#showcaseSection .showcase__bg { object-position: 74% 62%; }
#showcaseArtSection .showcase__bg { object-position: 22% 38%; }
.showcase__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,8,.10) 0%, rgba(6,6,8,.35) 45%, rgba(6,6,8,.94) 100%),
    linear-gradient(90deg, rgba(6,6,8,.5) 0%, rgba(6,6,8,0) 55%);
}
.showcase__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.showcase__headline {
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 800;
  max-width: 560px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.showcase__card {
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-l);
  padding: 22px 26px;
  min-width: 240px;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.showcase__card-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px;
}
.showcase__card-stat {
  font-size: 30px; font-weight: 800; color: #fff;
  display: flex; flex-direction: column; gap: 2px;
}
.showcase__card-stat span {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: none; letter-spacing: 0;
}
.showcase__card-tag {
  margin-top: 14px; font-size: 11.5px; font-weight: 700; color: var(--purple);
  background: rgba(168,85,247,.12); display: inline-block; padding: 6px 12px;
  border-radius: var(--radius-pill);
}
@media (max-width: 860px) {
  .showcase { height: auto; min-height: 560px; }
  .showcase__content { flex-direction: column; align-items: flex-start; padding: 0 22px 40px; }
  .showcase__headline { max-width: 100%; }
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-top: 10px;
}
.stat {
  background: var(--bg-elevated);
  padding: 36px 28px;
  text-align: center;
  transition: background .25s ease;
}
.stat:hover { background: var(--bg-card); }
.stat__num {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__label { margin-top: 9px; font-size: 13.5px; color: var(--text-mute); line-height: 1.55; max-width: 240px; margin-left: auto; margin-right: auto; }

/* ---------- Pillars (Bank) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 54px;
}
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }

.pillar {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -32px rgba(0,0,0,.7);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.pillar::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--neon-grad-soft);
  opacity: 0;
  transition: opacity .3s ease;
}
.pillar:hover {
  transform: translateY(-5px);
  border-color: var(--border-glow);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 26px 54px -24px rgba(176,38,255,0.28);
}
.pillar:hover::before { opacity: 1; }
.pillar__num { position: relative; font-size: 12px; font-weight: 800; color: var(--text-mute); letter-spacing: 0.12em; }
.pillar__icon {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neon-grad);
  margin: 18px 0 22px;
  box-shadow: 0 10px 24px -8px rgba(176,38,255,0.55);
}
.pillar__icon svg { width: 24px; height: 24px; color: #fff; }
.pillar h3 { position: relative; font-size: 20px; margin: 0 0 11px; font-weight: 800; letter-spacing: -0.01em; }
.pillar p { position: relative; color: var(--text-dim); font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; }
.pillar__tags { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
  transition: border-color .2s ease, color .2s ease;
}
.pillar:hover .tag { border-color: rgba(255,255,255,0.16); color: #fff; }

/* ---------- Lifecycle stepper ---------- */
.lifecycle {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .lifecycle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lifecycle { grid-template-columns: 1fr; } }

.step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 24px 20px;
  box-shadow: 0 16px 32px -26px rgba(0,0,0,.7);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor: default;
}
.step:hover { border-color: var(--border-glow); transform: translateY(-3px); box-shadow: 0 20px 40px -20px rgba(176,38,255,.22); }
.step__index {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--neon-grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  margin-bottom: 16px;
  box-shadow: 0 6px 16px -4px rgba(176,38,255,.5);
}
.step h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 800; letter-spacing: -0.005em; }
.step p { margin: 0; font-size: 12.5px; color: var(--text-mute); line-height: 1.6; }

/* ---------- Gap / Exchange preview ---------- */
.gapgrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 900px) { .gapgrid { grid-template-columns: 1fr; gap: 36px; } }

.quote {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 26px 30px 26px 32px;
  font-size: 18.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.55;
  margin: 28px 0;
  box-shadow: 0 20px 40px -30px rgba(0,0,0,.7);
  overflow: hidden;
}
.quote::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--neon-grad);
}

.gapstats { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.gapstat {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 17px 22px;
  box-shadow: 0 14px 30px -26px rgba(0,0,0,.7);
  transition: border-color .25s ease, transform .25s ease;
}
.gapstat:hover { border-color: var(--border-glow); transform: translateX(2px); }
.gapstat b {
  font-size: 23px;
  font-weight: 900;
  background: var(--neon-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  min-width: 88px;
  letter-spacing: -0.01em;
}
.gapstat span { color: var(--text-dim); font-size: 13.5px; line-height: 1.45; }

.previewcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px;
}
.previewcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.previewcard__head h4 { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }

/* ---------- Generic list rows (trending / leaderboard) ---------- */
.rowlist { display: flex; flex-direction: column; }
.rowitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s ease;
  border-radius: 10px;
}
.rowitem:last-child { border-bottom: none; }
.rowitem:hover { background: rgba(255,255,255,0.03); }
.rowitem__rank { width: 20px; font-size: 12px; font-weight: 800; color: var(--text-mute); text-align: center; }
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff;
  flex-shrink: 0;
}
.rowitem__name { flex: 1; min-width: 0; }
.rowitem__name b { display: block; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowitem__name small { color: var(--text-mute); font-size: 11.5px; font-weight: 700; }
.pct {
  font-size: 12.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pct--up { color: var(--green); background: var(--green-soft); }
.pct--down { color: var(--red); background: var(--red-soft); }
.medal { font-size: 16px; }

/* ================= EXCHANGE LOCK SCREEN ================= */
.lockscreen {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 120px 24px 60px;
}
.lockscreen::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 38% at 20% 28%, rgba(176,38,255,0.55), transparent 60%),
    radial-gradient(42% 42% at 82% 18%, rgba(255,46,230,0.42), transparent 60%),
    radial-gradient(48% 48% at 50% 88%, rgba(147,51,234,0.48), transparent 60%),
    #030304;
  filter: blur(70px);
  animation: lockDrift 20s ease-in-out infinite alternate;
  z-index: 0;
  will-change: transform;
}
@keyframes lockDrift {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(3%, -3%, 0) scale(1.03); }
}
.lockscreen > * { position: relative; z-index: 1; }

.lockscreen__mark {
  width: 80px; height: 80px;
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 0 50px rgba(176,38,255,0.55), 0 0 90px rgba(255,46,230,0.25);
  animation: floaty 5s ease-in-out infinite;
}
.lockscreen__mark img { width: 100%; height: 100%; object-fit: cover; }

.lockscreen__title {
  font-size: clamp(44px, 10vw, 108px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
  color: #fff;
  text-shadow: 0 0 60px rgba(176,38,255,0.4);
}
.lockscreen__sub {
  max-width: 520px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
}

/* "Stand" variant — the market-stall render sits pinned to the bottom of the viewport, like
   it's standing on the floor of the screen. The image itself is a soft-edged PNG (feathered
   alpha on the top/left/right, baked in — see market_stand.webp) so it dissolves into the
   page's own purple hue instead of showing as a hard-edged rectangle. Everything else — the
   "Exchange" subtitle and the waitlist CTA — is overlaid directly on the render (positioned as
   percentages of the image so it holds up responsively) rather than living in a separate text
   block above it, so the stand reads as the whole page rather than a photo someone pasted in. */
.lockscreen--stand {
  justify-content: flex-start;
  padding: 120px 24px 0;
}
.lockscreen--stand .lockscreen__sub--slim {
  max-width: 460px;
  margin: 0 auto 8px;
  font-size: 13.5px;
  color: var(--text-mute);
}

.lockscreen__stand-floor {
  position: relative;
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
}
.lockscreen__stand-wrap {
  position: relative;
  width: min(760px, 100%);
  line-height: 0; /* kill the inline-image baseline gap so the image sits flush at the bottom */
}
.lockscreen__stand {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
}
/* Label + button sit side by side, inset directly into the counter's dark front wall panel
   (measured via pixel-brightness sampling of the render: the panel runs ~63%-88% of the image's
   height and ~16%-84% of its width, between the countertop's glow lip above and the base's neon
   trim below). Anchored with a true center transform and kept to one line — a wrap here would
   push content past the panel's edge and read as floating off the stand. */
.lockscreen__stand-panel {
  position: absolute;
  z-index: 2;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 2.4vw, 20px);
  white-space: nowrap;
  max-width: 90%;
}
.lockscreen__stand-label {
  font-size: clamp(17px, 4vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 0 10px rgba(176,38,255,0.85), 0 0 24px rgba(176,38,255,0.55);
  white-space: nowrap;
  flex: none;
}
.lockscreen__stand-panel .btn {
  font-size: clamp(9px, 1.8vw, 13px);
  padding: clamp(6px, 1.3vw, 10px) clamp(11px, 2.4vw, 18px);
  white-space: nowrap;
  flex: none;
}
/* The bank render's front wall sits lower in-frame than the market stand's —
   push the label/button panel down to match instead of sharing one fixed
   percentage across two different renders. */
#view-bank .lockscreen__stand-panel { top: 80.5%; }
/* Desktop stays untouched — the disco ball (and, on the Bank tab, the cash waterfall) only
   appear on phones, filling the gap left by packing the stand toward the bottom of the screen
   (see the max-width:640px block below). */
.lockscreen__discoball, .lockscreen__cashfall { display: none; }
@media (max-width: 640px) {
  /* Keep the section at a full, unbroken 100vh so the purple glow background covers the whole
     screen with no seam — shrinking the box (previous attempt) just let the plain page
     background show through below, which read as two mismatched backgrounds stitched together.
     Center the content block within that full-height glow instead, with enough top clearance to
     clear the fixed pill nav. */
  .lockscreen--stand { min-height: 100vh; justify-content: flex-end; padding: 104px 20px 28px; }
  .lockscreen__stand-floor { margin-top: 28px; }
  .lockscreen__stand-panel { width: 74%; gap: 6px; }
  /* Packing the stand toward the bottom (above) leaves the top of the screen empty under the
     nav pill — fill it with a disco ball hanging down into that space, phone-only, centered
     above the stand. */
  /* This asset (discoball_extended.webp) is the original ball padded into a larger canvas
     so its light-ray spikes have room to taper all the way to transparent instead of
     getting hard-clipped at the old image's edge (that clipping was the "looks stuck on"
     complaint). Because the ball itself is now a smaller fraction of a bigger image, the
     display width is scaled up by the same ratio (new canvas / old canvas, ~1.696x) so the
     ball reads at its original on-screen size — only the glow around it got bigger. The rod
     tip that used to sit exactly at the image's top edge (old transform-origin: 50% 0%) is
     now 19.4% down into the padded canvas, so both the resting position (translateY) and
     the swing pivot (transform-origin) are shifted by that same 19.4% to keep the ball
     hanging from the same spot as before. */
  .lockscreen__discoball {
    display: block;
    position: absolute;
    top: 86px;
    left: 50%;
    width: 40.7vw;
    max-width: 220px;
    min-width: 156px;
    height: auto;
    transform: translate(-50%, -19.4%) rotate(-6deg);
    transform-origin: 50% 19.4%;
    animation: discoSwing 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  /* Bank tab: same principle, a waterfall of cash hanging above the stand — except this one
     actually flows. The source art is split into a static ring (the "chute" it pours from)
     and a tall strip of the falling bills/coins below it; the strip is shown twice back to
     back and scrolled by exactly one copy's height on a loop, so the real notes and coins in
     the artwork keep sliding downward and out of frame continuously, like a waterfall, rather
     than hanging there as a still image. */
  /* The chute stays a fixed decorative cap; the actual falling cash is now individual
     note/coin sprites spawned + animated by JS (js/main.js, initCashfall), because the
     real distance from the chute down to the bank roofline isn't a fixed number — it
     depends on the viewport height and has to be measured at runtime, the same way the
     'overlap the subtitle' bug taught us not to hardcode this gap. */
  .lockscreen__cashfall {
    display: block;
    position: absolute;
    top: 74px;
    left: 50%;
    width: 68px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
  }
  .lockscreen__cash-ring {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 24px 46px rgba(176,38,255,0.4));
  }
  .lockscreen__cash-particles {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 1px;
    overflow: visible;
  }
  .cash-particle {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    /* The real bug: the site has a global `img { max-width: 100% }` reset (so photos never
       overflow their container). Percentages resolve against the containing block, and this
       particle's containing block (.lockscreen__cash-particles) is a deliberate 1x1px anchor
       point -- so every particle's max-width was capping out at ~1px regardless of the
       explicit pixel width JS was setting inline. The images were loading and animating the
       whole time, just rendering invisibly small. max-width: none here removes that cap so
       the inline width JS sets is what actually renders. */
    max-width: none;
    filter: drop-shadow(0 6px 14px rgba(176,38,255,0.45));
    will-change: transform, opacity;
    pointer-events: none;
  }
}
@keyframes discoSwing {
  0%, 100% { transform: translate(-50%, -19.4%) rotate(-6deg); }
  50% { transform: translate(-50%, -19.4%) rotate(6deg); }
}

.countdown { display: flex; align-items: flex-start; gap: clamp(8px, 2vw, 18px); margin: 42px 0 34px; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.countdown__unit b {
  font-size: clamp(32px, 7vw, 60px);
  font-weight: 900;
  line-height: 1;
  background: var(--neon-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.countdown__unit span { margin-top: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.countdown__sep { font-size: clamp(26px, 5vw, 46px); font-weight: 900; color: var(--text-mute); transform: translateY(2px); }

/* "Unlocking Soon" — a playful stand-in for a real countdown. There's no confirmed launch
   date yet, so instead of ticking toward a fake deadline (which would be exactly the kind of
   fake-precision the live ticker got called out for), the digits spin like slot-machine reels
   that never quite land — reads as "something's coming" and "fun" without implying a date we
   don't actually have. */
.unlock-soon { margin: 26px 0 4px; }
.unlock-soon__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--neon-grad-soft); border: 1px solid var(--border-glow);
  color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.unlock-soon__lock { display: inline-block; animation: lockWiggle 2.6s ease-in-out infinite; }
@keyframes lockWiggle {
  0%, 80%, 100% { transform: rotate(0deg); }
  83% { transform: rotate(-14deg); }
  86% { transform: rotate(11deg); }
  89% { transform: rotate(-8deg); }
  92% { transform: rotate(5deg); }
  95% { transform: rotate(0deg); }
}
.countdown--soon .cd-slot {
  font-variant-numeric: tabular-nums;
  transition: filter .15s ease;
}
.countdown--soon .cd-slot.spinning { filter: blur(2px); opacity: .85; }
.unlock-soon__caption { margin-top: 16px; max-width: 480px; color: var(--text-mute); font-size: 13px; line-height: 1.6; }

/* ================= EXCHANGE TAB ================= */
.exchange-head {
  padding: 128px 0 20px;
}
.exchange-head h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 900; margin: 0 0 6px; }
.exchange-head p { color: var(--text-mute); font-size: 14.5px; margin: 0; }

.exsection { padding: 34px 0; }
.exsection__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.exsection__head h2 { font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.exsection__head a { font-size: 12.5px; font-weight: 700; color: var(--text-mute); display: flex; align-items: center; gap: 4px; }

/* Featured carousel */
.carousel-wrap { position: relative; }
.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 4px 20px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-glow);
  background: rgba(10,10,14,0.85);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.carousel-wrap:hover .carousel-arrow { opacity: 1; }
.carousel-arrow.left { left: -6px; }
.carousel-arrow.right { right: -6px; }
.carousel-arrow:hover { background: var(--purple); }
@media (max-width: 760px) { .carousel-arrow { display: none; } }

.feature-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 250px;
  height: 340px;
  border-radius: var(--radius-l);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: transform .2s ease;
}
.feature-card:hover { transform: translateY(-6px); }
.feature-card__bg {
  position: absolute; inset: 0;
}
.feature-card__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.feature-card__mono {
  position: absolute;
  right: -10px;
  bottom: -30px;
  font-size: 130px;
  font-weight: 900;
  color: rgba(255,255,255,0.1);
  letter-spacing: -0.05em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.feature-card__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.92) 100%);
}
.feature-card__play {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
}
.feature-card__body { position: absolute; bottom: 16px; left: 16px; right: 16px; }
.feature-card__ticker { font-size: 11.5px; font-weight: 800; color: var(--neon-2); letter-spacing: 0.06em; }
.feature-card__name { font-size: 17px; font-weight: 800; color: #fff; margin: 2px 0 12px; }

/* Two-column lists */
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .cols2 { grid-template-columns: 1fr; } }
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 20px;
}

/* Picks */
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .picks { grid-template-columns: 1fr; } }
.pick-card {
  border-radius: var(--radius-l);
  height: 220px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
}
.pick-card:hover .feature-card__bg { transform: scale(1.05); }
.pick-card .feature-card__bg { transition: transform .4s ease; }

/* Indexes */
.indexes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 720px) { .indexes { grid-template-columns: 1fr; } }
.index-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.index-card:hover { border-color: var(--border-glow); transform: translateY(-4px); }
.index-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.index-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--neon-grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(176,38,255,0.4);
}
.index-icon svg { width: 22px; height: 22px; color: #fff; }
.index-card h4 { margin: 0; font-size: 15.5px; font-weight: 800; }
.index-card small { color: var(--neon-2); font-weight: 700; font-size: 12px; }
.index-card__price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 2px; }
.index-card__price-row .price { font-size: 22px; font-weight: 900; line-height: 1; white-space: nowrap; }
.index-card__stats { display: flex; gap: 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.index-card__stats div { font-size: 11.5px; color: var(--text-mute); }
.index-card__stats b { display: block; color: #fff; font-size: 14px; margin-top: 2px; }

/* Sparkline */
.spark { width: 100%; height: 40px; margin-top: 4px; }

/* ---------- Index detail overlay ---------- */
.detail {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  overflow-y: auto;
  display: none;
  padding-bottom: 120px;
}
.detail.open { display: block; }
.detail__top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px;
  background: rgba(6,6,8,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.detail__price-card {
  margin: 24px 28px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 30px;
  text-align: center;
}
.price-big { font-size: 44px; font-weight: 900; }
.detail__chartcard {
  margin: 20px 28px 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 24px;
}
.tf-tabs { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.tf-tab {
  border: none; background: transparent;
  color: var(--text-mute); font-weight: 700; font-size: 12.5px;
  padding: 8px 14px; border-radius: var(--radius-pill);
}
.tf-tab.active { background: var(--purple-2); color: #fff; }
.detail__statrow {
  display: flex; justify-content: space-around;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.detail__statrow div { font-size: 11px; color: var(--text-mute); letter-spacing: .06em; text-transform: uppercase; }
.detail__statrow b { display: block; font-size: 16px; color: #fff; margin-top: 4px; }
.detail__constituents { margin: 30px 28px 0; }
.detail__constituents h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; }
.const-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.const-row__rank { width: 18px; color: var(--text-mute); font-weight: 800; font-size: 13px; }
.const-row__info { flex: 1; min-width: 0; }
.const-row__info b { display: block; font-size: 14px; }
.const-row__info small { color: var(--text-mute); }
.const-bar { height: 3px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-top: 6px; width: 100%; }
.const-bar i { display: block; height: 100%; background: var(--neon-grad); border-radius: 3px; }
.const-row__right { text-align: right; }
.const-row__right b { display: block; font-size: 14px; }

.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 210;
  background: rgba(10,10,14,0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.sticky-bar.hidden { display: none; }
.sticky-bar__price { font-size: 22px; font-weight: 900; }

/* ---------- Trade page (full-screen, Polymarket-style) ---------- */
.trade-page {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg);
  overflow-y: auto;
  display: none;
  padding-bottom: 80px;
}
.trade-page.open { display: block; animation: fadeInPage 0.25s ease; }
@keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } }

.trade-page__idbar { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.trade-page__idbar small { color: var(--neon-2); font-weight: 700; margin-left: 4px; }
.trade-page__wrap { max-width: 1040px; padding-top: 26px; }
.trade-page__pricehead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.trade-page__pricehead b { font-size: 34px; font-weight: 900; }

.trade-page__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; align-items: flex-start; }
@media (max-width: 860px) { .trade-page__grid { grid-template-columns: 1fr; } }

.trade-page__side { position: relative; }
.trade-panel {
  position: sticky;
  top: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 22px;
}

.quick-amounts { display: flex; gap: 8px; margin-top: 12px; }
.quick-amounts button {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-dim);
  font-weight: 700;
  font-size: 12.5px;
  padding: 9px 4px;
  border-radius: var(--radius-s);
  transition: border-color .15s ease, color .15s ease;
}
.quick-amounts button:hover { border-color: var(--border-glow); color: #fff; }

/* ---------- Live trading simulation ---------- */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--green);
  padding: 5px 10px;
  border: 1px solid rgba(34,197,94,0.35);
  border-radius: var(--radius-pill);
  background: rgba(34,197,94,0.08);
}
@keyframes flashGreen {
  0% { color: var(--green); text-shadow: 0 0 18px rgba(34,197,94,0.9); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes flashRed {
  0% { color: var(--red); text-shadow: 0 0 18px rgba(239,68,68,0.9); }
  100% { color: inherit; text-shadow: none; }
}
.flash-up { animation: flashGreen 0.7s ease; }
.flash-down { animation: flashRed 0.7s ease; }

.trade-row--new {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.trade-row--new.show { opacity: 1; transform: translateY(0); }

.segmented { display: flex; background: var(--bg-elevated); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 16px; }
.segmented button {
  flex: 1; border: none; background: transparent; color: var(--text-dim);
  font-weight: 800; font-size: 14px; padding: 12px; border-radius: var(--radius-pill);
}
.segmented button.buy-active { background: var(--purple); color: #fff; }
.segmented button.sell-active { background: #262633; color: #fff; }

.orderbook-toggle { text-align: center; color: var(--text-mute); font-size: 12.5px; font-weight: 700; margin-bottom: 10px; cursor: pointer; }
.ob-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; padding: 4px 0; }
.ob-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 4px 0; position: relative; font-size: 13.5px; font-weight: 700; }
.ob-row .depth { height: 16px; border-radius: 3px; justify-self: end; width: 100%; }
.ob-row.ask .price { color: var(--red); }
.ob-row.bid .price { color: var(--green); }
.ob-row .depth.ask-d { background: rgba(239,68,68,0.18); }
.ob-row .depth.bid-d { background: rgba(34,197,94,0.18); }
.ob-spread { text-align: center; color: var(--text-mute); font-size: 12px; padding: 6px 0; }

.recent-head { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 6px; }
.trade-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; padding: 5px 0; color: var(--text-dim); }
.trade-row .g { color: var(--green); }
.trade-row .r { color: var(--red); }

.invest-row { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 8px; }
.invest-row span { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; }
.unit-toggle { display: flex; background: var(--bg-elevated); border-radius: var(--radius-pill); padding: 3px; }
.unit-toggle button { border: none; background: transparent; color: var(--text-mute); font-weight: 700; font-size: 11.5px; padding: 6px 12px; border-radius: var(--radius-pill); }
.unit-toggle button.active { background: var(--purple); color: #fff; }

.amount-box {
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-l);
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 0 30px rgba(176,38,255,0.15) inset;
}
.amount-box span { font-size: 30px; font-weight: 800; color: var(--text-mute); }
.amount-box input {
  border: none; background: transparent; outline: none;
  font-size: 34px; font-weight: 800; color: #fff; width: 100%;
  font-family: inherit;
}
.amount-help { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mute); margin-top: 10px; }

/* ---------- Sign up ---------- */
.signup-hero { padding: 150px 0 20px; text-align: center; }
.role-toggle {
  display: inline-flex; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 5px; margin: 26px auto 0;
}
.role-toggle button {
  border: none; background: transparent; color: var(--text-dim);
  font-weight: 800; font-size: 13.5px; padding: 12px 26px; border-radius: var(--radius-pill);
}
.role-toggle button.active { background: var(--neon-grad); color: #fff; box-shadow: 0 0 20px rgba(176,38,255,0.5); }

.waitlist-stats { display: flex; justify-content: center; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.waitlist-stats div { text-align: center; }
.waitlist-stats b { display: block; font-size: 26px; font-weight: 900; background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.waitlist-stats span { font-size: 12px; color: var(--text-mute); }

.gauge-wrap { max-width: 480px; margin: 34px auto 0; }
.gauge-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-mute); margin-bottom: 8px; font-weight: 700; }
.gauge-track { height: 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.gauge-fill { height: 100%; background: var(--neon-grad); border-radius: var(--radius-pill); box-shadow: 0 0 14px rgba(176,38,255,0.6); transition: width 1.2s ease; }

/* auto-fit instead of a fixed breakpoint: a hardcoded "2 columns until 900px viewport"
   rule doesn't account for windows that are narrower than full-screen but wider than
   900px in absolute pixels never happening to hit that number cleanly, or — the actual
   bug — for the *columns themselves* getting squeezed well before the viewport crosses
   any single fixed threshold. auto-fit drops to one column the moment two 300px columns
   genuinely no longer fit, whatever the exact width. */
.signup-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 60px; align-items: flex-start; }

.checklist { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 28px; }
.checklist h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.checklist p.hint { color: var(--text-mute); font-size: 13px; margin: 0 0 20px; }
.check-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.check-item:last-child { border-bottom: none; }
.check-box {
  position: relative; overflow: hidden;
  width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #444;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
  transition: border-color .15s ease;
}
.check-item.checked .check-box { border-color: transparent; }
.check-item b { display: block; font-size: 14px; font-weight: 700; }
.check-item p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-mute); }
.checklist-progress { margin-top: 18px; }

/* container-type here is what actually fixes the "half-screen window" bug: the name/email
   row below used to collapse based on VIEWPORT width, so at a mid-size window where the
   two-column layout above (.signup-body) already had this card squeezed into ~300-400px,
   the row still tried to force two inputs side by side because the *viewport* was still
   wide enough — even though this card, the row's actual container, wasn't. Sizing off the
   card itself instead of the viewport keeps it correct at any window width. */
.form-card { container-type: inline-size; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-l); padding: 30px; box-shadow: 0 30px 60px -36px rgba(0,0,0,.75); }
.field { margin-bottom: 17px; }
.field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-mute); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .05em; }
.field input, .field select {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  color: #fff; padding: 13.5px 15px; border-radius: var(--radius-s); font-size: 14px; font-family: inherit;
  outline: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus {
  border-color: var(--border-glow);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(196,88,247,.14);
}
.field input::placeholder { color: var(--text-mute); opacity: .7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@container (max-width: 380px) { .field-row { grid-template-columns: 1fr; } }
/* Fallback for browsers without container query support: same collapse, keyed off the
   viewport instead. Redundant on modern browsers (the container query above already
   applies there) but keeps old browsers from being stuck two-column forever. */
@supports not (container-type: inline-size) {
  @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
}

/* Reusable "disco ball flips into a checkmark" component — two stacked faces, the ball
   squashes/rotates away while the checkmark squashes in right behind it. Pure transform +
   opacity (no box-shadow), so it stays smooth even fired back-to-back. */
.flip-badge__ball, .flip-badge__check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.flip-badge__ball { background: conic-gradient(from 0deg, #b026ff, #ff2ee6, #22c55e, #9333ea, #b026ff); }
.flip-badge__check { background: var(--neon-grad); }
@keyframes flipBadgeBallOut {
  0% { transform: scaleY(1) rotate(0deg); opacity: 1; }
  100% { transform: scaleY(.05) rotate(150deg); opacity: 0; }
}
@keyframes flipBadgeCheckIn {
  0% { transform: scaleY(.05); opacity: 0; }
  55% { transform: scaleY(1.18); opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}
.check-item.checked .check-box .flip-badge__ball { animation: flipBadgeBallOut .38s ease forwards; }
.check-item.checked .check-box .flip-badge__check { animation: flipBadgeCheckIn .38s ease .2s forwards; }

/* Marketing consent checkbox above the submit button. */
.consent-check {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px;
  cursor: pointer; user-select: none;
}
.consent-check input { margin-top: 3px; width: 15px; height: 15px; accent-color: #ff2ee6; flex-shrink: 0; cursor: pointer; }
.consent-check span { font-size: 11.5px; line-height: 1.5; color: var(--text-mute); }

/* Submit stays disabled (visibly inert) until name + email are actually filled in. */
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover { box-shadow: none; transform: none; }

.form-success { display: none; text-align: center; padding: 20px 0; }
.form-success.show { display: block; }

/* Success checkmark: a spinning "disco ball" with a soft rainbow halo for the first 3s
   (only starts counting once .form-success becomes visible — CSS animations on
   display:none elements don't run), then flips into a solid checkmark, which settles into
   a quiet resting glow that "beats" — a brief extra burst of rainbow light — every 5s. */
.form-success .badge { position: relative; width: 76px; height: 76px; margin: 0 auto 18px; }
.badge__ring {
  position: absolute; inset: -16px; border-radius: 50%;
  background: conic-gradient(from 0deg, #b026ff, #ff2ee6, #22c55e, #9333ea, #ffcc00, #b026ff);
  filter: blur(14px); opacity: .35;
  animation: badgeRingSpin 2.2s linear infinite, badgeRingPulse .9s ease-in-out 3, badgeRingBeat 5s ease-in-out 3.4s infinite;
}
@keyframes badgeRingSpin { to { transform: rotate(360deg); } }
@keyframes badgeRingPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@keyframes badgeRingBeat {
  0%, 85% { opacity: .18; filter: blur(14px); }
  92%     { opacity: .6; filter: blur(18px); }
  100%    { opacity: .18; filter: blur(14px); }
}
.badge__face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.badge__face svg { width: 36px; height: 36px; color: #fff; }
.badge__ball {
  background: conic-gradient(from 0deg, #b026ff, #ff2ee6, #22c55e, #9333ea, #ffcc00, #b026ff);
  box-shadow: 0 0 40px rgba(176,38,255,.6);
  animation: badgeBallSpin 1.1s linear infinite, flipBadgeBallOut .4s ease 3s forwards;
}
@keyframes badgeBallSpin { to { transform: rotate(360deg); } }
.badge__check {
  background: var(--neon-grad);
  box-shadow: 0 0 40px rgba(176,38,255,.6);
  opacity: 0;
  animation: flipBadgeCheckIn .4s ease 3s forwards, badgeHeartbeat 5s ease-in-out 3.4s infinite;
}
@keyframes badgeHeartbeat {
  0%, 85% { box-shadow: 0 0 40px rgba(176,38,255,.6); filter: saturate(1); }
  92%     { box-shadow: 0 0 55px rgba(255,46,230,.85), 0 0 85px rgba(34,197,94,.5); filter: saturate(1.5); }
  100%    { box-shadow: 0 0 40px rgba(176,38,255,.6); filter: saturate(1); }
}
.position-num { font-size: 40px; font-weight: 900; margin: 6px 0; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 60px 0 40px; margin-top: 60px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.footer__brand img { width: 32px; height: 32px; border-radius: 9px; }
.footer__quote { max-width: 480px; color: var(--text-dim); font-size: 14px; font-style: italic; line-height: 1.6; }
.footer__team { display: flex; gap: 30px; margin-top: 14px; }
.footer__team div b { display: block; font-size: 13.5px; }
.footer__team div span { font-size: 12px; color: var(--text-mute); }
.footer__bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-mute); line-height: 1.6; }

/* ---------- Explorer progress widget ---------- */
.explorer {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(10,10,14,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(176,38,255,0.2);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.explorer:hover { transform: translateY(-3px); }
.explorer__ring { width: 34px; height: 34px; flex-shrink: 0; }
.explorer__text { font-size: 11.5px; font-weight: 700; color: var(--text-dim); line-height: 1.3; }
.explorer__text b { color: #fff; display: block; font-size: 12.5px; }

@media (max-width: 640px) {
  .explorer__text { display: none; }
}

/* Being fixed to the bottom-right corner, this widget floats on top of whatever page
   content happens to scroll underneath it -- and on the sign-up page specifically, that's
   sometimes the submit button or a checklist item's text, which made the widget genuinely
   block content rather than just decorate a corner. js/main.js (watchExplorerCollisions)
   toggles this class whenever the widget's own box actually overlaps a clickable/readable
   element in the active view, so it steps out of the way instead of sitting on top. */
.explorer.explorer--dim {
  opacity: 0.15;
  pointer-events: none;
}

.toast {
  position: fixed;
  bottom: 90px;
  right: 22px;
  max-width: 300px;
  z-index: 160;
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-dim);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all .35s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast b { color: #fff; display: block; margin-bottom: 4px; }

/* confetti */
.confetti-piece {
  position: fixed;
  top: -10px;
  z-index: 400;
  border-radius: 2px;
  pointer-events: none;
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* cascading stagger for grouped cards */
.pillars .pillar:nth-child(1) { transition-delay: 0s; }
.pillars .pillar:nth-child(2) { transition-delay: 0.1s; }
.pillars .pillar:nth-child(3) { transition-delay: 0.2s; }
.pillars .pillar:nth-child(4) { transition-delay: 0.3s; }
.lifecycle .step:nth-child(1) { transition-delay: 0s; }
.lifecycle .step:nth-child(2) { transition-delay: 0.08s; }
.lifecycle .step:nth-child(3) { transition-delay: 0.16s; }
.lifecycle .step:nth-child(4) { transition-delay: 0.24s; }
.lifecycle .step:nth-child(5) { transition-delay: 0.32s; }
.gapstats .gapstat:nth-child(1) { transition-delay: 0s; }
.gapstats .gapstat:nth-child(2) { transition-delay: 0.1s; }
.gapstats .gapstat:nth-child(3) { transition-delay: 0.2s; }
.gapstats .gapstat:nth-child(4) { transition-delay: 0.3s; }

/* ---------- Ticker brand marquee (replaces fake live-price feed) ---------- */
.ticker__brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 28px;
}
.ticker__dot {
  color: var(--text-mute);
  margin-right: 28px;
  font-size: 12px;
  vertical-align: middle;
}

/* ---------- Big Polymarket-style charts ---------- */
.detail__chartcard--big { padding: 26px 26px 22px; }
.spark--big { width: 100%; height: 260px; display: block; }
#tradeChart.spark--big { height: 340px; }
.chart-grid line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.chart-grid text { fill: var(--text-mute); font-size: 11px; font-weight: 600; }
#tradeChartDot { filter: drop-shadow(0 0 6px rgba(34,197,94,0.8)); }

/* ---------- Exchange page background wordmark ---------- */
#view-exchange-full { position: relative; overflow: hidden; }
#view-exchange-full > .wrap { position: relative; z-index: 1; }
.exchange-bg-mark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: clamp(140px, 26vw, 420px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ---------- Trade panel: custom / limit price selector ---------- */
.price-mode-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-2);
  text-transform: none;
  letter-spacing: 0;
}
.price-slider-wrap { margin-top: 6px; }
.price-slider-wrap input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(239,68,68,0.35), rgba(255,255,255,0.15) 50%, rgba(34,197,94,0.35));
  outline: none;
  cursor: pointer;
}
.price-slider-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--neon-grad);
  box-shadow: 0 0 10px rgba(176,38,255,0.7);
  cursor: pointer;
  border: 2px solid #fff;
}
.price-slider-wrap input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--neon-grad);
  box-shadow: 0 0 10px rgba(176,38,255,0.7);
  cursor: pointer;
  border: 2px solid #fff;
}
.price-slider-marks {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--text-mute); font-weight: 700;
  margin-top: 6px;
}
.custom-price-box {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elevated);
}
.custom-price-box span { font-size: 16px; font-weight: 800; color: var(--text-mute); }
.custom-price-box input {
  border: none; background: transparent; outline: none;
  font-size: 16px; font-weight: 700; color: #fff; width: 100%;
  font-family: inherit;
}
.custom-price-box button {
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-mute);
  font-size: 10.5px; font-weight: 700;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.custom-price-box button:hover { border-color: var(--border-glow); color: #fff; }
.price-hint { margin-top: 8px; font-size: 11px; line-height: 1.5; }

@media (max-width: 640px) {
  .exchange-bg-mark { display: none; }
}

/* ---------- Waitlist "pop factor": disco-hue success glow + mini confetti cannons ---------- */

/* One-shot flourish: plays once when a field/checklist row goes from empty/invalid to filled/valid.
   Cycles through the brand's neon palette (purple -> pink -> green -> pink -> purple) rather than a
   single static color, to read as "disco" instead of a plain validation checkmark glow. */
@keyframes discoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(176,38,255,0), 0 0 0 0 rgba(255,46,230,0); }
  15%  { box-shadow: 0 0 0 3px rgba(176,38,255,.55), 0 0 26px 6px rgba(176,38,255,.55); }
  40%  { box-shadow: 0 0 0 3px rgba(255,46,230,.55), 0 0 30px 8px rgba(255,46,230,.55); }
  65%  { box-shadow: 0 0 0 3px rgba(34,197,94,.5), 0 0 28px 7px rgba(34,197,94,.5); }
  85%  { box-shadow: 0 0 0 2px rgba(255,46,230,.35), 0 0 18px 4px rgba(255,46,230,.35); }
  100% { box-shadow: 0 0 0 0 rgba(176,38,255,0), 0 0 0 0 rgba(176,38,255,0); }
}
@keyframes discoPop {
  0% { transform: scale(1); }
  20% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.pop-glow {
  border-radius: var(--radius-s);
  animation: discoPulse .85s ease, discoPop .85s ease;
}
.checklist .check-item.pop-glow { border-radius: var(--radius-s); }

/* Steady state once a field holds a valid value — a soft resting neon ring so the "success" feeling
   persists after the one-shot pulse fades, instead of the field going back to looking neutral. */
.field.field--valid input,
.field.field--valid select {
  border-color: rgba(255,46,230,.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(176,38,255,.16), 0 0 16px rgba(255,46,230,.18);
}
.check-item.checked {
  border-radius: var(--radius-s);
  box-shadow: 0 0 0 1px rgba(176,38,255,.25) inset;
}

/* Mini confetti cannon bursts — smaller, faster pieces that pop from the field itself rather than
   falling from the top of the whole viewport, so it reads as "this field just celebrated." */
.confetti-piece--burst {
  position: fixed;
  z-index: 400;
  border-radius: 2px;
  pointer-events: none;
  top: 0; left: 0;
}

/* =========================================================
   ABOUT PAGE — founder story
   A small world of tiny neon silhouettes living inside the UI, not a
   sticker sheet stapled on top of it. See "scene" figures below: each
   one is deliberately anchored to a specific edge/boundary of a real
   layout element (a card's top border, a section's bottom seam, etc).
   ========================================================= */

.about { position: relative; }

/* Base for every little neon silhouette placed around the page */
.scene {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  filter: drop-shadow(0 0 14px rgba(176,38,255,0.35));
  opacity: 0.94;
}
.scene--xs { width: 56px; }
.scene--sm { width: 78px; }

/* ---------- About hero ---------- */
.about-hero {
  position: relative;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 150px 24px 96px;
}
.about-hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(620px circle at 50% 18%, rgba(176,38,255,0.20), transparent 62%),
    radial-gradient(480px circle at 84% 86%, rgba(255,46,230,0.14), transparent 60%);
}
.about-hero > .wrap { position: relative; z-index: 1; }
.about-h1 {
  font-size: clamp(32px, 5.6vw, 62px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.about-hero__lede { margin-left: auto; margin-right: auto; }
.about-taglist { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

.scene--headphones {
  top: 158px; left: 7%; width: 72px;
  animation: sceneBob 5s ease-in-out infinite;
}
.scene--skyline {
  bottom: -8px; right: 6%; width: 210px;
  animation: sceneBob 6.5s ease-in-out infinite 0.4s;
}
@keyframes sceneBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Transit divider — a traveler walking Paris -> New York ---------- */
.about-transit {
  position: relative;
  height: 92px;
  overflow: hidden;
}
.about-transit__line {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-glow) 50%, transparent);
  opacity: 0.4;
}
.about-transit__label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 4px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
}
.scene--traveler {
  position: absolute; bottom: 14px; width: 60px;
  left: 34%;
}

/* ---------- Founder story ---------- */
.founder-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; gap: 56px; } }

.founder-card {
  position: relative;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 32px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 48px -32px rgba(0,0,0,.7);
}
.founder-card__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 22px;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(176,38,255,.25), 0 24px 54px -22px rgba(176,38,255,.45);
}
.founder-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-card__meta b { display: block; font-size: 18.5px; font-weight: 800; letter-spacing: -0.01em; }
.founder-card__meta span { font-size: 12.5px; color: var(--text-mute); }

.scene--founder-plane {
  top: -20px; right: -8px; width: 58px;
  transform: rotate(16deg);
}
/* ---------- Why CultureX — culture grid ---------- */
#culture { position: relative; }
.culture-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 52px;
}
@media (max-width: 900px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .culture-grid { grid-template-columns: 1fr; } }

.culture-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-l);
  padding: 30px 26px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.culture-card:hover { transform: translateY(-4px); border-color: var(--border-glow); }
.culture-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.01em; }
.culture-card p { font-size: 13.5px; color: var(--text-dim); line-height: 1.65; margin: 0; }

.scene--card-dj {
  top: -44px; left: 50%; width: 96px;
  transform: translateX(-50%);
  animation: djPulse 2.8s ease-in-out infinite;
}
@keyframes djPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(176,38,255,.5)); }
  50% { filter: drop-shadow(0 0 22px rgba(255,46,230,.7)); }
}
.scene--card-dance {
  top: -50px; left: 20px; width: 88px;
  transform-origin: bottom center;
  animation: sceneSway 3.6s ease-in-out infinite;
}
@keyframes sceneSway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-3deg); }
}
.scene--card-film { top: auto; bottom: -32px; right: -22px; width: 88px; }
.scene--card-highfive { bottom: -36px; right: 8px; width: 86px; }

/* ---------- Founder insight — "We ARE the target users" ---------- */
.insight {
  position: relative;
  padding: clamp(90px, 14vw, 150px) 0;
  text-align: center;
  overflow: hidden;
}
.insight__glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(720px circle at 50% 28%, rgba(176,38,255,0.22), transparent 65%),
    radial-gradient(600px circle at 14% 92%, rgba(255,46,230,0.14), transparent 60%);
}
.insight__wrap { position: relative; z-index: 1; max-width: 840px; }
.insight__line {
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 12px 0 22px;
}
.insight__payoff {
  font-size: clamp(38px, 7vw, 74px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: transparent;
  background: var(--neon-grad);
  -webkit-background-clip: text;
  background-clip: text;
  animation: insightPulse 4.2s ease-in-out infinite;
}
@keyframes insightPulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(176,38,255,.4)); }
  50% { filter: drop-shadow(0 0 40px rgba(255,46,230,.6)); }
}
.insight__sub {
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
}
.scene--insight-laptop { bottom: 18px; left: 5%; width: 104px; opacity: 0.85; }

/* ---------- Finale — where we're going ---------- */
.finale { position: relative; text-align: center; overflow: visible; }
.finale .wrap { text-align: center; position: relative; }
.finale-scene { position: relative; height: 0; }

.scene--finale-disco {
  top: -128px; left: 50%; width: 150px;
  transform: translateX(-50%);
  animation: discoGlow 3.2s ease-in-out infinite;
}
@keyframes discoGlow {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(176,38,255,.45)); }
  50% { filter: drop-shadow(0 0 30px rgba(255,46,230,.65)); }
}

/* ---------- Mobile: reposition/curate, don't just shrink ---------- */
@media (max-width: 640px) {
  .about-hero { min-height: 0; padding: 130px 20px 60px; }
  .scene--headphones,
  .scene--traveler,
  .scene--founder-plane,
  .scene--card-dj,
  .scene--card-dance,
  .scene--card-film,
  .scene--card-highfive,
  .scene--insight-laptop {
    display: none;
  }
  .scene--skyline {
    position: static;
    display: block;
    width: 150px;
    margin: 30px auto 0;
    animation: none;
  }
  .about-transit { height: 64px; }
  .about-transit__label { font-size: 10px; padding: 3px 10px; }
  .founder-card { padding: 26px 22px; }
  .finale-scene { height: 0; }
  .scene--finale-disco { top: -92px; width: 110px; }
}

/* ---------- Home page stand teasers (Exchange / Bank entry cards) ---------- */
.stands { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
@media (max-width: 760px) { .stands { grid-template-columns: 1fr; } }

.standcard {
  position: relative;
  display: block;
  width: 100%;
  min-height: 380px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #030304;
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease;
}
.standcard:hover { transform: translateY(-4px); border-color: var(--border-glow); }
.standcard::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 40% at 25% 25%, rgba(176,38,255,.5), transparent 60%),
    radial-gradient(40% 40% at 80% 20%, rgba(255,46,230,.35), transparent 60%),
    radial-gradient(45% 45% at 50% 92%, rgba(147,51,234,.4), transparent 60%),
    #030304;
  filter: blur(50px);
  z-index: 0;
}
.standcard__img {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 76%; max-width: 320px;
  display: block;
}
.standcard__meta {
  position: absolute; z-index: 2;
  top: 22px; left: 24px; right: 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.standcard__title {
  font-size: 19px; font-weight: 900; color: #fff;
  text-shadow: 0 0 18px rgba(176,38,255,.6);
}
.standcard__arrow {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid var(--border-glow);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px;
  transition: transform .25s ease, background .25s ease;
}
.standcard:hover .standcard__arrow { transform: translateX(3px); background: var(--neon-grad); }
@media (max-width: 640px) { .standcard { min-height: 320px; } }

/* ---------- "More Information" scroll cue (Exchange / Bank lockscreens) ---------- */
.stand-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 24px 0 28px;
  background: none;
  border: none;
  padding: 8px 16px;
  color: var(--text-mute);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, transform .2s ease;
}
.stand-more:hover { color: #fff; transform: translateY(2px); }
.stand-more svg { animation: bob 1.8s ease-in-out infinite; }

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene--headphones,
  .scene--skyline,
  .scene--traveler,
  .scene--card-dj,
  .scene--card-dance,
  .scene--finale-disco,
  .insight__payoff,
  .stand-more svg,
  .lockscreen__discoball {
    animation: none !important;
  }
}