/* ══════════════════════════════════════════════════════════════
   VORG — the slowest animal alive, the fastest chart on Solana.
   Design: electric night. Sloth blue on deep jungle-navy, tracksuit
   yellow as the shout, sneaker red as the hit. Everything trails a
   motion streak, because he only looks slow.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ground */
  --night:    #04101C;
  --night-2:  #071A2C;
  --night-3:  #0C2540;
  --panel:    rgba(12, 37, 64, .62);
  --line:     rgba(120, 199, 255, .18);

  /* character */
  --sloth:    #5FB3E8;   /* his fur */
  --sloth-lt: #A9DBFF;   /* his face */
  --volt:     #29E5FF;   /* the speed trails */
  --track:    #FFD21E;   /* the tracksuit */
  --sneak:    #EF4A32;   /* the sneakers */
  --muzzle:   #C08FD4;   /* that deadpan mouth */
  --leaf:     #3FCB6A;

  --text:     #E6F4FF;
  --dim:      #93B4CE;

  --edge:     4px;
  --r:        22px;
  --shadow:   0 24px 60px rgba(0, 0, 0, .55);
  --nav-h:    64px;

  --f-disp: 'Bungee', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; height: 100vh; }

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

::selection { background: var(--volt); color: var(--night); }

/* the page sits on a jungle-night wash that never scrolls away */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% -8%,  rgba(41, 229, 255, .16), transparent 62%),
    radial-gradient(900px 700px at 6% 22%,    rgba(63, 203, 106, .10), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(255, 210, 30, .07), transparent 60%),
    linear-gradient(180deg, #04101C 0%, #061726 46%, #04101C 100%);
}

/* ══════════════ INTRO ══════════════ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity .7s ease, transform .7s ease;
}
.intro.is-out {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}
/* the source is a 560x560 square — `cover` ate his legs on any wide window,
   so the frame is shown whole and a blurred still fills the space around it */
.intro::before {
  content: '';
  position: absolute;
  inset: -8%;
  background: url('/media/intro-bg.jpg') center / cover no-repeat;
  filter: blur(54px) saturate(1.3) brightness(.42);
  transform: scale(1.12);
  pointer-events: none;
}
.intro__video {
  /* absolute, not a grid item: as a grid item the square video's intrinsic
     aspect stretched the row to 1440px tall and pushed its bottom half below
     the fold. Pinned to the fixed overlay, the box is exactly the viewport. */
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.intro__vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 56%, rgba(0, 0, 0, .6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 22%, transparent 76%, rgba(0, 0, 0, .48));
}
.intro__ui {
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  padding: 22px clamp(16px, 4vw, 40px) 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.intro__progress {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255, 255, 255, .12);
}
.intro__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--volt), var(--track));
  box-shadow: 0 0 16px var(--volt);
  transition: width .18s linear;
}

.sound-btn, .skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .34);
  background: rgba(4, 16, 28, .58);
  backdrop-filter: blur(9px);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.sound-btn:hover, .skip-btn:hover { transform: translateY(-2px); border-color: var(--volt); }
.sound-btn.is-on { border-color: var(--volt); box-shadow: 0 0 0 4px rgba(41, 229, 255, .12); }
.sound-btn:not(.is-on) { border-color: var(--track); color: var(--track); }
.sound-btn__icon { font-size: 17px; line-height: 1; }
.skip-btn { font-family: var(--f-disp); font-size: 13px; letter-spacing: .06em; }

/* ══════════════ AMBIENT FX ══════════════ */
.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.fx-dots {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(120, 199, 255, .16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(78% 62% at 50% 34%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(78% 62% at 50% 34%, #000 30%, transparent 78%);
}
.fx-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(41, 229, 255, .13), transparent 66%);
}

/* ══════════════ NAV ══════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  height: var(--nav-h);
  padding: 0 clamp(12px, 3vw, 26px);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .25, 1), background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-in { opacity: 1; transform: none; }
.nav.is-stuck {
  background: rgba(4, 16, 28, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.nav__brand { display: flex; align-items: center; gap: 11px; flex: none; }
.nav__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--volt);
  box-shadow: 0 0 0 3px rgba(41, 229, 255, .14);
  flex: none;
}
.nav__avatar img { width: 100%; height: 100%; object-fit: cover; }
.nav__name {
  font-family: var(--f-disp);
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
}

.nav__links { display: flex; gap: 4px; margin-left: 10px; }
.nav__links a {
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dim);
  transition: color .18s ease, background .18s ease;
}
.nav__links a:hover { color: #fff; background: rgba(41, 229, 255, .10); }

.nav__right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.ico-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .5);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.ico-btn:hover { transform: translateY(-2px); border-color: var(--volt); background: rgba(41, 229, 255, .12); }
.ico-btn svg { width: 17px; height: 17px; fill: currentColor; }

.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .5);
  cursor: pointer;
  font-size: 13px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  transition: border-color .18s ease, background .18s ease;
}
.ca-pill:hover { border-color: var(--volt); background: rgba(41, 229, 255, .1); }
.ca-pill__tag {
  font-family: var(--f-disp);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--night);
  background: var(--volt);
  padding: 2px 7px;
  border-radius: 999px;
}
.ca-pill__val { color: var(--sloth-lt); }
.ca-pill__copy { color: var(--dim); }
.ca-pill.is-empty .ca-pill__tag { background: var(--track); }
.ca-pill.is-empty .ca-pill__val { color: var(--track); font-family: var(--f-body); font-weight: 700; }

.buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--track);
  color: #10161B;
  font-family: var(--f-disp);
  font-size: 14px;
  letter-spacing: .04em;
  border: 2px solid #10161B;
  box-shadow: 0 5px 0 #A9820A, 0 12px 26px rgba(255, 210, 30, .24);
  transition: transform .14s ease, box-shadow .14s ease, background .18s ease;
}
.buy-btn:hover {
  transform: translateY(-3px);
  background: #FFDF52;
  box-shadow: 0 8px 0 #A9820A, 0 18px 34px rgba(255, 210, 30, .3);
}
.buy-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #A9820A; }
.buy-btn--big { padding: 16px 34px; font-size: 18px; }
.buy-btn--wide { width: 100%; padding: 15px 22px; }

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: rgba(12, 37, 64, .42);
  font-family: var(--f-disp);
  font-size: 15px;
  letter-spacing: .03em;
  transition: transform .16s ease, border-color .18s ease, color .18s ease;
}
.ghost-btn:hover { transform: translateY(-3px); border-color: var(--volt); color: var(--volt); }

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .5);
  cursor: pointer;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
}
.burger i { display: block; height: 2px; background: var(--text); border-radius: 2px; }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 89;
  padding: 16px clamp(14px, 4vw, 24px) 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  background: rgba(4, 16, 28, .96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu > a {
  padding: 13px 6px;
  font-family: var(--f-disp);
  font-size: 16px;
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(120, 199, 255, .1);
}
.mobile-menu__row { display: flex; gap: 10px; margin: 14px 0 10px; }
.mobile-menu__row a {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-weight: 600;
}
.mobile-menu .buy-btn { margin-top: 4px; }

/* ══════════════ LAYOUT ══════════════ */
.section {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) clamp(18px, 5vw, 30px);
}
.section > * { margin-left: auto; margin-right: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .5);
  font-family: var(--f-disp);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--volt);
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: 0 0 10px var(--volt);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }

h2.title {
  font-family: var(--f-disp);
  font-size: clamp(34px, 6.4vw, 66px);
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0 0 16px;
  color: #fff;
}
h2.title em {
  font-style: normal;
  color: var(--volt);
  text-shadow: 0 0 34px rgba(41, 229, 255, .5);
}
h2.title .yel { color: var(--track); }

.sub {
  max-width: 68ch;
  color: var(--dim);
  font-size: clamp(16px, 2vw, 19px);
  margin: 0 0 46px;
}

.center { text-align: center; }
.center .sub { margin-left: auto; margin-right: auto; }

/* the speed rule — a streak that doubles as a section divider */
.streak {
  height: 3px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--volt) 22%, var(--track) 55%, transparent);
  opacity: .5;
}

/* ══════════════ HERO ══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 40px) clamp(18px, 5vw, 30px) 70px;
  overflow: hidden;
}
.hero__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .5);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sloth-lt);
}
.kicker .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--leaf);
  box-shadow: 0 0 12px var(--leaf);
  animation: pulse 2.4s ease-in-out infinite;
}

/* the wordmark drags a motion trail behind it, because he only looks slow */
.wordmark {
  font-family: var(--f-disp);
  font-size: clamp(72px, 15.5vw, 168px);
  line-height: .9;
  letter-spacing: .045em;
  margin: 0 0 14px;
  color: #fff;
  display: flex;
}
.wordmark span {
  display: inline-block;
  opacity: 0;
  text-shadow: 0 0 .42em rgba(41, 229, 255, .5), 0 .05em 0 rgba(4, 16, 28, .7);
}

/* the racing stripe off his tracksuit, doubling as the speedometer under the name */
.stripe {
  height: 12px;
  width: min(100%, 460px);
  margin: 0 0 26px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  border: 2px solid #10161B;
  box-shadow: 0 4px 0 rgba(4, 16, 28, .7);
}
.stripe i { display: block; height: 100%; }
.stripe i:nth-child(1) { flex: 3; background: var(--track); }
.stripe i:nth-child(2) { flex: 1; background: #fff; }
.stripe i:nth-child(3) { flex: 2; background: var(--sneak); }
.stripe i:nth-child(4) { flex: 6; background: linear-gradient(90deg, var(--volt), rgba(41, 229, 255, 0)); }
body.is-live .wordmark span {
  animation: dash .58s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i) * .07s + .1s);
}
@keyframes dash {
  from { opacity: 0; transform: translateX(-46px) skewX(-12deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

.lede {
  font-size: clamp(17px, 2.3vw, 21px);
  color: var(--dim);
  max-width: 46ch;
  margin: 0 0 34px;
}
.lede b { color: var(--text); }
.lede .volt { color: var(--volt); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 42px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero__stats div span {
  display: block;
  font-family: var(--f-disp);
  font-size: 24px;
  color: #fff;
}
.hero__stats div small {
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* the portrait sits inside a set of speed rings */
.hero__art { position: relative; display: grid; place-items: center; }
.rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.rings i {
  position: absolute;
  border: 1.5px solid rgba(41, 229, 255, .22);
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  animation: spin 14s linear infinite;
}
.rings i:nth-child(1) { width: 86%; height: 86%; }
.rings i:nth-child(2) { width: 100%; height: 100%; animation-duration: 22s; animation-direction: reverse; }
.rings i:nth-child(3) { width: 114%; height: 114%; animation-duration: 34s; border-color: rgba(255, 210, 30, .16); border-left-color: transparent; border-bottom-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.portrait {
  position: relative;
  width: min(430px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: var(--edge) solid var(--night-3);
  box-shadow: 0 0 0 3px var(--volt), 0 30px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(41, 229, 255, .22);
  animation: bob 7s ease-in-out infinite;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
@keyframes bob { 50% { transform: translateY(-14px); } }

.badge {
  position: absolute;
  z-index: 3;
  padding: 9px 15px;
  border-radius: 999px;
  font-family: var(--f-disp);
  font-size: 12px;
  letter-spacing: .05em;
  color: #10161B;
  border: 2px solid #10161B;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  white-space: nowrap;
}
.badge--a { background: var(--track); top: 8%; right: -4%; transform: rotate(7deg); animation: bob 5.5s ease-in-out infinite .3s; }
.badge--b { background: var(--volt); bottom: 12%; left: -6%; transform: rotate(-6deg); animation: bob 6.5s ease-in-out infinite .9s; }
.badge--c { background: var(--sneak); color: #fff; bottom: -2%; right: 8%; transform: rotate(-3deg); animation: bob 8s ease-in-out infinite .6s; }

/* ══════════════ TICKER ══════════════ */
.ticker {
  position: relative;
  overflow: hidden;
  background: var(--track);
  border-top: var(--edge) solid #10161B;
  border-bottom: var(--edge) solid #10161B;
  padding: 14px 0;
  transform: rotate(-1.1deg) scale(1.03);
}
.ticker__track { display: flex; width: max-content; animation: roll 34s linear infinite; }
.ticker__unit { display: flex; align-items: center; flex: none; }
.ticker__unit span {
  font-family: var(--f-disp);
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: .04em;
  color: #10161B;
  padding: 0 22px;
  white-space: nowrap;
}
.ticker__unit b { color: var(--sneak); padding: 0 6px; font-size: 20px; }
@keyframes roll { to { transform: translateX(-16.6667%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ══════════════ CARDS ══════════════ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  padding: 30px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), border-color .3s ease, box-shadow .3s ease;
}
/* every card wears a speed bar down its left edge */
.card::before {
  content: '';
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--volt), transparent);
  opacity: .6;
  transition: opacity .3s ease, top .3s ease, bottom .3s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(41, 229, 255, .5);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(41, 229, 255, .18);
}
.card:hover::before { opacity: 1; top: 0; bottom: 0; }
.card__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 25px;
  margin-bottom: 18px;
  background: rgba(41, 229, 255, .12);
  border: 1px solid rgba(41, 229, 255, .3);
}
.card h3 {
  font-family: var(--f-disp);
  font-size: 19px;
  letter-spacing: .02em;
  margin: 0 0 10px;
  color: #fff;
}
.card p { margin: 0; color: var(--dim); font-size: 15.5px; }
.card--yel .card__ico { background: rgba(255, 210, 30, .13); border-color: rgba(255, 210, 30, .34); }
.card--yel::before { background: linear-gradient(180deg, var(--track), transparent); }
.card--red .card__ico { background: rgba(239, 74, 50, .13); border-color: rgba(239, 74, 50, .34); }
.card--red::before { background: linear-gradient(180deg, var(--sneak), transparent); }

/* ══════════════ LOCK IN BAND ══════════════ */
.band {
  position: relative;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, #061726 0%, #061726 42%, transparent 78%);
  overflow: hidden;
}
.band__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) clamp(18px, 5vw, 30px);
}
.band__copy { max-width: 30ch; }
.band__big {
  font-family: var(--f-disp);
  font-size: clamp(46px, 9vw, 104px);
  line-height: .92;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: -.05em 0 rgba(255, 210, 30, .45), -.1em 0 rgba(255, 210, 30, .18);
}
.band__copy p { color: var(--dim); font-size: clamp(16px, 2vw, 19px); margin: 0 0 26px; }
.band__img {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: 1;
}
.band__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.band__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #061726 2%, rgba(6, 23, 38, .55) 34%, rgba(6, 23, 38, .1) 74%);
}

/* ══════════════ GALLERY ══════════════ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.g-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
  aspect-ratio: 1;
  background: var(--night-2);
  transition: transform .3s cubic-bezier(.2, .9, .25, 1), border-color .3s ease, box-shadow .3s ease;
}
.g-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1), filter .35s ease;
  filter: saturate(.94);
}
.g-card:hover {
  transform: translateY(-5px);
  border-color: var(--volt);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(41, 229, 255, .3);
}
.g-card:hover img { transform: scale(1.07); filter: saturate(1.1); }
.g-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px;
  font-family: var(--f-disp);
  font-size: 12.5px;
  letter-spacing: .05em;
  color: #fff;
  background: linear-gradient(transparent, rgba(2, 10, 18, .88));
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.g-card:hover figcaption { opacity: 1; transform: none; }
.g-card--tall { grid-row: span 2; aspect-ratio: auto; }

/* ══════════════ STATS ══════════════ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 26px;
}
.stat {
  padding: 26px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.1;
  color: var(--volt);
  text-shadow: 0 0 30px rgba(41, 229, 255, .38);
}
.stat span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.stat--yel b { color: var(--track); text-shadow: 0 0 30px rgba(255, 210, 30, .32); }
.stat--grn b { color: var(--leaf); text-shadow: 0 0 30px rgba(63, 203, 106, .3); }
.stat--red b { color: var(--sneak); text-shadow: 0 0 30px rgba(239, 74, 50, .3); }

.ca-box {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px;
  border-radius: 18px;
  border: 1px dashed rgba(41, 229, 255, .42);
  background: rgba(41, 229, 255, .06);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.ca-box:hover { border-color: var(--volt); background: rgba(41, 229, 255, .12); transform: translateY(-2px); }
.ca-box__tag {
  font-family: var(--f-disp);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--volt);
  flex: none;
}
.ca-box__val {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: clamp(11px, 1.7vw, 15px);
  color: var(--sloth-lt);
  overflow-wrap: anywhere;
}
.ca-box__copy { flex: none; color: var(--dim); font-size: 13px; font-weight: 600; }
.ca-box.is-empty { border-color: rgba(255, 210, 30, .45); background: rgba(255, 210, 30, .07); }
.ca-box.is-empty .ca-box__tag { color: var(--track); }
.ca-box.is-empty .ca-box__val { color: var(--track); font-family: var(--f-disp); letter-spacing: .04em; }

/* ══════════════ ROADMAP ══════════════ */
.track {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  gap: 18px;
}
.track li {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform .3s ease, border-color .3s ease;
}
.track li:hover { transform: translateX(8px); border-color: rgba(41, 229, 255, .45); }
.track li::after {
  content: '';
  position: absolute;
  left: 62px;
  top: 100%;
  height: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--volt), transparent);
  opacity: .45;
}
.track li:last-child::after { display: none; }
.track__n {
  font-family: var(--f-disp);
  font-size: 30px;
  text-align: center;
  color: var(--volt);
  border: 2px solid rgba(41, 229, 255, .32);
  border-radius: 16px;
  padding: 8px 0;
  background: rgba(41, 229, 255, .08);
}
.track h3 {
  font-family: var(--f-disp);
  font-size: 18px;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: .02em;
}
.track p { margin: 0; color: var(--dim); font-size: 15.5px; }
.track li.done .track__n { color: var(--leaf); border-color: rgba(63, 203, 106, .38); background: rgba(63, 203, 106, .08); }
.track li.done::after { background: linear-gradient(180deg, var(--leaf), transparent); }
.track__tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  vertical-align: 3px;
  color: var(--leaf);
  border: 1px solid rgba(63, 203, 106, .4);
  background: rgba(63, 203, 106, .1);
}
.track__tag--soon { color: var(--track); border-color: rgba(255, 210, 30, .4); background: rgba(255, 210, 30, .1); }

/* ══════════════ HOW TO BUY ══════════════ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
}
.step {
  position: relative;
  padding: 30px 24px 26px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: transform .3s ease, border-color .3s ease;
}
.step:hover { transform: translateY(-6px); border-color: rgba(255, 210, 30, .45); }
.step__n {
  position: absolute;
  top: -18px;
  left: 22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--f-disp);
  font-size: 19px;
  color: #10161B;
  background: var(--track);
  border: 2px solid #10161B;
  box-shadow: 0 5px 0 #A9820A;
}
.step h3 { font-family: var(--f-disp); font-size: 17px; margin: 20px 0 9px; color: #fff; letter-spacing: .02em; }
.step p { margin: 0; color: var(--dim); font-size: 15px; }
.step a { color: var(--volt); border-bottom: 1px solid rgba(41, 229, 255, .4); }

/* ══════════════ CTA ══════════════ */
.cta {
  position: relative;
  text-align: center;
  padding: clamp(70px, 10vw, 128px) clamp(18px, 5vw, 30px);
  overflow: hidden;
}
.cta__avatar {
  width: 132px;
  height: 132px;
  margin: 0 auto 26px;
  border-radius: 50%;
  overflow: hidden;
  border: var(--edge) solid var(--night-3);
  box-shadow: 0 0 0 3px var(--track), 0 20px 50px rgba(0, 0, 0, .55);
  animation: bob 7s ease-in-out infinite;
}
.cta__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.cta__note { margin-top: 26px; color: var(--dim); font-size: 13.5px; }

/* ══════════════ FOOTER ══════════════ */
.foot {
  border-top: 1px solid var(--line);
  padding: 42px clamp(18px, 5vw, 30px) 54px;
  background: rgba(4, 16, 28, .6);
}
.foot__in {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}
.foot__brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-disp); font-size: 18px; }
.foot__brand img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--volt); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot__links a {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--dim);
  transition: color .18s ease, border-color .18s ease;
}
.foot__links a:hover { color: var(--volt); border-color: var(--volt); }
.foot__fine {
  max-width: 1180px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(120, 199, 255, .1);
  color: #6C8CA6;
  font-size: 12.5px;
  line-height: 1.7;
}

/* ══════════════ LIGHTBOX / TOAST ══════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(2, 8, 14, .93);
  backdrop-filter: blur(8px);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: min(94vw, 940px);
  max-height: 88vh;
  border-radius: 18px;
  border: 2px solid var(--volt);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(12, 37, 64, .7);
  font-size: 21px;
  cursor: pointer;
}
.lightbox__close:hover { border-color: var(--volt); color: var(--volt); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 300;
  transform: translate(-50%, 120%);
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--volt);
  color: #04101C;
  font-weight: 700;
  font-size: 14.5px;
  box-shadow: 0 16px 40px rgba(41, 229, 255, .32);
  transition: transform .38s cubic-bezier(.2, .9, .25, 1);
  pointer-events: none;
}
.toast.is-on { transform: translate(-50%, 0); }

/* ══════════════ REVEAL ══════════════ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.reveal[data-d="4"] { transition-delay: .36s; }
.reveal[data-d="5"] { transition-delay: .45s; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 980px) {
  .nav__links { display: none; }
  .burger { display: flex; }
  .nav__buy { display: none; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__copy { order: 2; }
  .hero__art { order: 1; }
  .kicker, .hero__cta, .hero__stats { justify-content: center; }
  .wordmark { justify-content: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .band { background: #061726; }
  .band__img { position: relative; width: 100%; height: 300px; inset: auto; }
  .band__img::after { background: linear-gradient(180deg, rgba(6, 23, 38, .1), #061726 92%); }
  .band__inner { padding-top: 0; }
  .band__copy { max-width: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .ca-pill { display: none; }
  .track li { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .track__n { width: 62px; }
  .track li::after { left: 30px; }
  .g-card--tall { grid-row: auto; aspect-ratio: 1; }
  .hero__stats { gap: 18px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .wordmark span { opacity: 1; }
}