:root {
  --ink: #12110d;
  --black: #071213;
  --deep: #002d2f;
  --acid: #a8ff14;
  --gold: #dda915;
  --paper: #fff0b5;
  --cream: #fff8df;
  --red: #ce3154;
  --line: rgba(255, 240, 181, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 80% 8%, rgba(168,255,20,.1), transparent 25rem),
    radial-gradient(circle at 7% 45%, rgba(221,169,21,.1), transparent 30rem),
    var(--black);
  font-family: Arial, Helvetica, sans-serif;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .15;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(255,255,255,.025) 6px);
}

.exchange-shell {
  width: min(94vw, 1500px);
  margin: clamp(12px, 2vw, 30px) auto;
  border: 1px solid rgba(221,169,21,.32);
  background: rgba(1,22,23,.84);
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
}
.exchange-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 18px clamp(18px,4vw,60px);
  border-bottom: 1px solid var(--line);
}
.brand-mark, .exchange-nav { display: flex; align-items: center; }
.brand-mark {
  gap: 12px;
  font: 900 1.15rem Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand-arrow {
  width: 46px;
  height: 20px;
  background: var(--gold);
  clip-path: polygon(0 50%,100% 0,82% 50%,100% 100%);
}
.exchange-nav { gap: clamp(14px,2.6vw,34px); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.exchange-nav a { padding: 10px 0; border-bottom: 1px solid transparent; }
.exchange-nav a:hover { color: var(--acid); border-color: var(--acid); }

.eyebrow, .section-number {
  margin: 0 0 18px;
  color: var(--gold);
  font: 800 .7rem/1.2 "Courier New", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1, h2, h3 {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
h1 { font-size: clamp(4rem,7.5vw,8.7rem); line-height: .82; }
h2 { font-size: clamp(3rem,5.3vw,6.4rem); line-height: .88; }
.hop-brand > span {
  position: relative;
  top: -.08em;
  margin: 0 .025em;
  color: var(--acid);
  font-family: "Courier New", monospace;
  font-size: .78em;
}

.exchange-hero {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.65fr);
  gap: clamp(44px,8vw,125px);
  align-items: center;
  min-height: min(860px,calc(100vh - 105px));
  padding: clamp(64px,8vw,120px) clamp(24px,7vw,110px);
  overflow: hidden;
}
.hero-copy { min-width: 0; }
.hero-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-labels .eyebrow { margin: 0; }
.coming-badge {
  padding: 8px 10px;
  border: 1px solid var(--acid);
  color: var(--acid);
  font: 800 .61rem "Courier New", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-lede {
  max-width: 650px;
  margin: 30px 0 0;
  color: rgba(255,248,223,.76);
  font: clamp(1.05rem,1.4vw,1.28rem)/1.66 Georgia, serif;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin-top: 34px; }
.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 50px;
  overflow: hidden;
  padding: 12px 17px;
  border: 1px solid var(--gold);
  border-radius: 0;
  color: var(--ink);
  background: var(--gold);
  box-shadow: 7px 7px 0 rgba(168,255,20,.28);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.primary-cta:hover { background: var(--acid); }
.primary-cta:disabled { cursor: wait; opacity: .72; }
.text-link { padding: 10px 0; border-bottom: 1px solid var(--cream); font-size: .84rem; }
.text-link:hover { color: var(--acid); border-color: var(--acid); }

.pot-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(38vw,540px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.orbit-line {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(221,169,21,.32);
  border-radius: 50%;
  box-shadow: 0 0 70px rgba(168,255,20,.08);
}
.orbit-line::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px dashed rgba(255,240,181,.14);
  border-radius: 50%;
}
.orbit-card {
  position: absolute;
  z-index: 2;
  width: 21%;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--gold);
  background: #050b0b;
  box-shadow: 8px 9px 0 rgba(0,0,0,.38);
}
.orbit-card img { display: block; width: 100%; aspect-ratio: 5/7; object-fit: cover; }
.orbit-card-a { top: 3%; left: 22%; transform: rotate(-13deg); animation: orbit-a 6s ease-in-out infinite; }
.orbit-card-b { top: 21%; right: 2%; transform: rotate(11deg); animation: orbit-b 5.3s ease-in-out infinite; }
.orbit-card-c { bottom: 4%; left: 9%; transform: rotate(-7deg); animation: orbit-c 5.7s ease-in-out infinite; }
.hero-pot {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1.2;
  border: 3px solid var(--gold);
  color: var(--cream);
  background: #10100d;
  box-shadow: 13px 14px 0 rgba(221,169,21,.18);
  clip-path: polygon(4% 0,96% 0,84% 100%,16% 100%);
}
.hero-pot::before {
  content: "";
  position: absolute;
  top: -10%;
  width: 105%;
  height: 22%;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: #06191a;
}
.hero-pot span { position: absolute; right: 14%; top: 14%; color: var(--acid); font: 900 2rem Impact, sans-serif; transform: rotate(8deg); }
.hero-pot strong { font: 900 clamp(2rem,4.4vw,4.7rem)/.7 Impact, sans-serif; text-align: center; }
.pot-orbit > p { position: absolute; right: 2%; bottom: 9%; margin: 0; color: var(--gold); font: 800 .62rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-5deg); }
@keyframes orbit-a { 50% { transform: translate(8px,-12px) rotate(-8deg); } }
@keyframes orbit-b { 50% { transform: translate(-9px,10px) rotate(6deg); } }
@keyframes orbit-c { 50% { transform: translate(12px,-6px) rotate(-2deg); } }

.exchange-facts {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #050d0e;
}
.exchange-facts div { min-width: 0; padding: 18px clamp(18px,3vw,42px); border-right: 1px solid var(--line); }
.exchange-facts div:last-child { border-right: 0; }
.exchange-facts dt { color: rgba(255,248,223,.48); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.exchange-facts dd { margin: 8px 0 0; color: var(--acid); font: 800 .76rem/1.35 "Courier New", monospace; text-transform: uppercase; }

.ownership-section {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(300px,.65fr);
  gap: clamp(38px,8vw,125px);
  align-items: end;
  padding: clamp(70px,9vw,135px) clamp(24px,7vw,110px);
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(18,17,13,.025) 5px),
    var(--paper);
}
.ownership-section .section-number { color: #825e00; }
.ownership-copy > p { margin: 0; font: clamp(1.05rem,1.4vw,1.28rem)/1.68 Georgia, serif; }
.ownership-proof { margin-top: 32px; padding: 22px; border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--gold); }
.ownership-proof > * { display: block; }
.ownership-proof span { color: #825e00; font: 800 .6rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.ownership-proof strong { margin-top: 12px; font: 900 clamp(1.35rem,2.2vw,2.4rem)/1 Impact, sans-serif; text-transform: uppercase; }
.ownership-proof a { width: fit-content; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.ownership-proof a:hover { color: #6a4c00; border-color: var(--gold); }

.surprise-section {
  padding: clamp(70px,9vw,135px) clamp(24px,7vw,110px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(135deg,rgba(168,255,20,.055),transparent 50%),
    #07191a;
}
.section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); gap: clamp(38px,8vw,120px); align-items: end; }
.section-heading > p { margin: 0; color: rgba(255,248,223,.7); font: 1rem/1.65 Georgia, serif; }

.hop-machine {
  display: grid;
  grid-template-columns: minmax(160px,.8fr) 52px minmax(230px,1fr) 52px minmax(160px,.8fr);
  gap: clamp(10px,2vw,25px);
  align-items: center;
  margin-top: clamp(55px,7vw,90px);
  padding: clamp(24px,4vw,52px);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg,transparent 0 23px,rgba(221,169,21,.025) 24px 25px),
    #031112;
}
.machine-side { min-width: 0; text-align: center; }
.machine-label { display: block; min-height: 25px; color: var(--gold); font: 800 .6rem "Courier New", monospace; letter-spacing: .08em; text-transform: uppercase; }
.machine-side > strong { display: block; margin-top: 20px; color: var(--acid); font: 900 1.35rem Impact, sans-serif; text-transform: uppercase; }
.machine-card {
  position: relative;
  width: min(100%,180px);
  margin: 17px auto 0;
  padding: 6px;
  border: 1px solid var(--gold);
  background: #050b0b;
  box-shadow: 10px 11px 0 rgba(221,169,21,.14);
}
.machine-card img { display: block; width: 100%; aspect-ratio: 5/7; object-fit: cover; }
.machine-card figcaption { padding: 8px 2px 2px; color: rgba(255,248,223,.56); font: .54rem "Courier New", monospace; text-transform: uppercase; }
.return-card > span { position: absolute; inset: 13% 9% 17%; display: grid; place-items: center; color: var(--acid); background: rgba(0,16,17,.5); font: 900 clamp(3rem,6vw,6rem) Impact, sans-serif; text-shadow: 4px 4px 0 #061213; }
.machine-arrow { display: flex; align-items: center; gap: 6px; color: var(--gold); }
.machine-arrow span { width: 100%; height: 1px; background: rgba(221,169,21,.45); }
.machine-arrow b { font-size: 1.25rem; }
.pot-stage { position: relative; display: grid; place-items: center; min-height: 400px; }
.pot-cards { position: absolute; top: 8%; display: flex; justify-content: center; width: 100%; }
.pot-cards img { position: absolute; width: 88px; aspect-ratio: 5/7; border: 1px solid var(--gold); object-fit: cover; transform-origin: 50% 110%; }
.pot-cards img:nth-child(1) { transform: translateX(-34px) rotate(-13deg); }
.pot-cards img:nth-child(2) { z-index: 2; transform: translateY(-8px); }
.pot-cards img:nth-child(3) { transform: translateX(34px) rotate(13deg); }
.shuffle-pot {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(90%,260px);
  aspect-ratio: 1.35;
  margin-top: 100px;
  border: 3px solid var(--gold);
  background: #11100d;
  box-shadow: 14px 15px 0 rgba(221,169,21,.18);
  clip-path: polygon(3% 0,97% 0,85% 100%,15% 100%);
}
.pot-rim { position: absolute; top: -11%; width: 104%; height: 24%; border: 3px solid var(--gold); border-radius: 50%; background: #052425; }
.shuffle-pot strong { font: 900 clamp(2.4rem,4vw,4.3rem)/.72 Impact, sans-serif; text-align: center; }
.shuffle-pot small { position: absolute; bottom: 14px; color: var(--gold); font: 700 .54rem "Courier New", monospace; letter-spacing: .1em; text-transform: uppercase; }
.pot-status { position: absolute; bottom: 6px; color: rgba(255,248,223,.56); font: 700 .58rem "Courier New", monospace; text-transform: uppercase; }

.hop-machine.is-hopping .deposit-card { animation: card-in 1s ease-in forwards; }
.hop-machine.is-hopping .pot-cards { animation: pot-rattle .18s linear 6 .9s; }
.hop-machine.is-hopping .shuffle-pot { animation: pot-glow 1.2s ease-in-out 1s; }
.hop-machine.is-hopping .return-card { animation: card-out .9s cubic-bezier(.2,.75,.2,1) 1.85s both; }
.hop-machine.is-hopping .return-card > span { animation: question-pop .9s ease 1.85s both; }
@keyframes card-in { to { opacity: .15; transform: translate(120%,25%) scale(.45) rotate(18deg); } }
@keyframes pot-rattle { 25% { transform: translateX(-5px) rotate(-1deg); } 75% { transform: translateX(5px) rotate(1deg); } }
@keyframes pot-glow { 50% { color: var(--acid); box-shadow: 0 0 55px rgba(168,255,20,.4),14px 15px 0 rgba(221,169,21,.18); } }
@keyframes card-out { from { opacity: .1; transform: translate(-120%,20%) scale(.45) rotate(-18deg); } to { opacity: 1; transform: none; } }
@keyframes question-pop { 50% { color: var(--gold); transform: scale(1.12); } }

.demo-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; margin-top: 34px; }
.demo-control p { max-width: 440px; margin: 0; color: rgba(255,248,223,.5); font: .7rem/1.5 "Courier New", monospace; }
.hop-steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  margin: 58px 0 0;
  padding: 1px;
  list-style: none;
  background: var(--line);
}
.hop-steps li { min-height: 245px; padding: clamp(22px,2.7vw,38px); background: #081819; }
.hop-steps li > span { color: var(--gold); font: 700 .65rem "Courier New", monospace; }
.hop-steps h3 { margin-top: 48px; color: var(--acid); font-size: clamp(1.7rem,2.4vw,2.9rem); line-height: .9; }
.hop-steps p { margin: 14px 0 0; color: rgba(255,248,223,.66); font: .9rem/1.58 Georgia, serif; }

.gate-section {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(360px,1fr);
  gap: clamp(38px,8vw,125px);
  align-items: center;
  padding: clamp(70px,9vw,135px) clamp(24px,7vw,110px);
  color: var(--ink);
  background: var(--paper);
}
.gate-section .section-number { color: #825e00; }
.gate-copy > p:not(.section-number) { max-width: 620px; margin: 28px 0 0; font: 1.02rem/1.66 Georgia, serif; }
.gate-meter { margin-top: 34px; }
.gate-meter-secondary { margin-top: 18px; }
.gate-meter > div { height: 12px; border: 2px solid var(--ink); background: #fff7d6; }
.gate-meter div span { display: block; height: 100%; background: var(--gold); }
.gate-meter strong { display: block; margin-top: 9px; font: 800 .64rem "Courier New", monospace; text-transform: uppercase; }
.gate-deck { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0; padding: 0; list-style: none; }
.gate-deck li { display: flex; min-height: 112px; padding: 12px; border: 1px solid rgba(18,17,13,.3); flex-direction: column; justify-content: space-between; background: #fff7d6; }
.gate-deck span { color: rgba(18,17,13,.4); font: 700 .58rem "Courier New", monospace; }
.gate-deck strong { font: 900 .7rem Impact, sans-serif; text-transform: uppercase; }
.gate-deck .minted { color: var(--cream); background: var(--deep); box-shadow: 5px 5px 0 var(--gold); }
.gate-deck .minted span { color: var(--gold); }

.choice-section { padding: clamp(70px,9vw,135px) clamp(24px,7vw,110px); border-top: 1px solid var(--line); background: #052425; }
.choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 55px; background: var(--line); }
.choice-grid article { min-height: 275px; padding: clamp(24px,3vw,42px); background: #071b1c; }
.choice-grid article > span { color: var(--gold); font: 700 .65rem "Courier New", monospace; }
.choice-grid h3 { margin-top: 55px; color: var(--acid); font-size: clamp(2rem,3vw,3.7rem); }
.choice-grid p { margin: 15px 0 0; color: rgba(255,248,223,.68); font: .96rem/1.62 Georgia, serif; }

.rules-section {
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(360px,1fr);
  gap: clamp(38px,8vw,125px);
  align-items: start;
  padding: clamp(70px,9vw,135px) clamp(24px,7vw,110px);
  border-top: 1px solid var(--line);
  background: #11100d;
}
.rules-section ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rules-section li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.rules-section li span { color: var(--gold); font: 700 .62rem "Courier New", monospace; }
.rules-section li p { margin: 0; color: rgba(255,248,223,.7); font: .94rem/1.58 Georgia, serif; }

.exchange-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding: 36px clamp(24px,7vw,110px);
  border-top: 1px solid var(--line);
  background: #050d0e;
}
.exchange-footer span, .exchange-footer strong { display: block; }
.exchange-footer span { color: var(--gold); font: 700 .62rem "Courier New", monospace; letter-spacing: .14em; text-transform: uppercase; }
.exchange-footer strong { margin-top: 8px; font: 900 1.2rem Impact, sans-serif; text-transform: uppercase; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; color: rgba(255,248,223,.62); font-size: .76rem; text-transform: uppercase; }
.footer-links a:hover { color: var(--acid); }

@media (max-width: 980px) {
  .exchange-hero, .ownership-section, .gate-section, .rules-section { grid-template-columns: 1fr; }
  .pot-orbit { width: min(70vw,520px); }
  .section-heading { grid-template-columns: 1fr; align-items: start; }
  .hop-machine { grid-template-columns: 1fr 42px 1.2fr 42px 1fr; padding-inline: 22px; }
  .hop-steps { grid-template-columns: 1fr 1fr; }
  .gate-deck { max-width: 680px; }
}

@media (max-width: 680px) {
  .exchange-shell { width: 96vw; }
  .exchange-topbar { align-items: flex-start; }
  .exchange-nav { gap: 11px; font-size: .58rem; }
  .exchange-nav a:last-child { display: none; }
  .brand-mark { font-size: .88rem; }
  .brand-arrow { width: 32px; height: 15px; }
  .exchange-hero { min-height: 0; padding-top: 58px; }
  h1 { font-size: clamp(3.4rem,16.5vw,5.7rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-cta { width: 100%; }
  .text-link { align-self: flex-start; }
  .pot-orbit { width: min(86vw,430px); }
  .exchange-facts { grid-template-columns: 1fr 1fr; }
  .exchange-facts div:nth-child(2) { border-right: 0; }
  .exchange-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hop-machine { grid-template-columns: 1fr; }
  .machine-arrow { min-height: 42px; flex-direction: column; }
  .machine-arrow span { width: 1px; height: 28px; }
  .machine-arrow b { transform: rotate(90deg); }
  .pot-stage { min-height: 360px; }
  .hop-machine.is-hopping .deposit-card { animation: card-in-mobile 1s ease-in forwards; }
  .hop-machine.is-hopping .return-card { animation: card-out-mobile .9s cubic-bezier(.2,.75,.2,1) 1.85s both; }
  @keyframes card-in-mobile { to { opacity: .15; transform: translateY(90%) scale(.45) rotate(14deg); } }
  @keyframes card-out-mobile { from { opacity: .1; transform: translateY(-90%) scale(.45) rotate(-14deg); } to { opacity: 1; transform: none; } }
  .demo-control { align-items: stretch; flex-direction: column; }
  .hop-steps { grid-template-columns: 1fr; }
  .hop-steps li { min-height: 205px; }
  .hop-steps h3 { margin-top: 34px; }
  .gate-deck { grid-template-columns: repeat(2,1fr); }
  .gate-deck li { min-height: 92px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-grid article { min-height: 215px; }
  .choice-grid h3 { margin-top: 34px; }
  .exchange-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbit-card, .hop-machine.is-hopping *, .hop-machine.is-hopping .deposit-card, .hop-machine.is-hopping .return-card { animation: none !important; }
}

/* Readability floor (2026-08-16): no live text under ~13px. */
.exchange-nav{font-size:.85rem}
.eyebrow, .section-number{font-size:.85rem}
.coming-badge{font-size:.85rem}
.text-link{font-size:.85rem}
.pot-orbit > p{font-size:.85rem}
.exchange-facts dt{font-size:.85rem}
.exchange-facts dd{font-size:.85rem}
.ownership-proof span{font-size:.85rem}
.ownership-proof a{font-size:.85rem}
.machine-label{font-size:.85rem}
.machine-card figcaption{font-size:.85rem}
.shuffle-pot small{font-size:.85rem}
.pot-status{font-size:.85rem}
.demo-control p{font-size:.85rem}
.hop-steps li > span{font-size:.85rem}
.gate-meter strong{font-size:.85rem}
.gate-deck span{font-size:.85rem}
.gate-deck strong{font-size:.85rem}
.choice-grid article > span{font-size:.85rem}
.rules-section li span{font-size:.85rem}
.exchange-footer span{font-size:.85rem}
.footer-links{font-size:.85rem}
.ca-chip-value,.token-address .ca-chip-value,.footer-contract .ca-chip-value{font-size:.78rem}

/* Readability floor: keep functional labels above 12px. */
.exchange-nav,.exchange-facts dt,.pot-orbit>p,.machine-card figcaption,.shuffle-pot small,.pot-status,.hop-steps li>span,.gate-meter strong,.gate-deck span,.choice-grid article>span,.rules-section li span,.exchange-footer span{font-size:.75rem}
@media(max-width:780px){.exchange-nav{font-size:.75rem}}
.ownership-proof a{font-size:.75rem}