@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #fff5ff;
  --muted: #d3c3db;
  --pink: #ff85db;
  --gold: #ffc377;
  --line: #51305e;
  --heading: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse at 70% 4%, #391643, transparent 34rem), #130b20; color: var(--ink); font: 1rem/1.55 'DM Sans', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
h2, h3, p { margin: 0; }
.wrap { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.top, .launch, .brand, nav, .socials, .hero-bottom, .footer-row { display: flex; align-items: center; gap: 14px; }
.top, .launch, .hero-bottom, .footer-row { justify-content: space-between; }
.top { min-height: 76px; border-bottom: 1px solid var(--line); }
.brand { font: 900 1.45rem/1 var(--heading); letter-spacing: .05em; gap: 9px; }
.brand img { border-radius: 50%; border: 1px solid var(--line); }
nav, .footer-row .socials { color: var(--muted); font-size: .9rem; font-weight: 700; }
.hero { padding-block: 23px 36px; }
.ticker, .label { color: var(--gold); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ticker span { color: var(--pink); }
.launch { margin-bottom: 16px; }
.banner { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid #ba528f; box-shadow: 0 14px 40px #ea41a92e; }
.hero-bottom { margin-top: 20px; }
.stars { color: var(--gold); letter-spacing: .12em; line-height: 1; }
.tagline { font: 800 clamp(1.85rem, 5vw, 3.4rem)/1.08 var(--heading); }
.socials { flex-wrap: wrap; gap: 10px; }
.primary, .link, button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 13px; border-radius: 8px; font: 700 .86rem/1.25 'DM Sans', system-ui, sans-serif; }
.primary, button { color: #210c24; background: var(--pink); border: 1px solid transparent; }
.primary:hover, button:not(:disabled):hover { color: #210c24; background: var(--gold); }
.link { border: 1px solid #875387; }
.ca { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 13px; min-width: 255px; border: 1px solid var(--line); background: #22132e; padding: 9px 11px; border-radius: 10px; }
.ca strong, .ca code { display: block; font-size: .8rem; }
.ca code { color: var(--muted); overflow-wrap: anywhere; }
button { cursor: pointer; }
button:disabled { cursor: default; background: #463050; color: #eeddf0; }
[data-status] { grid-column: 1 / -1; color: var(--gold); font-size: .8rem; }
[data-status]:empty { display: none; }
.story { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 24px; padding-block: 48px; border-top: 1px solid var(--line); }
h2 { font: 900 clamp(2.65rem, 7vw, 5rem)/.96 var(--heading); }
h2 em { color: var(--pink); font-style: normal; }
.copy, .muted, .commitments p { color: var(--muted); }
.copy p + p { margin-top: 14px; }
.exchange { background: linear-gradient(110deg,#421a4a,#26132f); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px,4vw,34px); margin-bottom: 34px; }
.exchange h2 { margin-top: 8px; font-size: clamp(2.2rem,5vw,3.6rem); }
.muted { margin-top: 10px; }
.road-art img { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: 14px; }
.commitments { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding-block: 42px; }
.commitments article { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: #21142c; }
.commitments h3 { font: 800 1.8rem/1.05 var(--heading); color: var(--pink); }
.commitments p { margin-top: 8px; }
.footer { padding-block: 22px 34px; border-top: 1px solid var(--line); }
.footer-row { margin-bottom: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .wrap { width: calc(100% - 30px); }
  .top nav { display: none; }
  .hero-bottom, .launch { align-items: stretch; flex-direction: column; }
  .ca { min-width: 0; }
  .story, .commitments { grid-template-columns: 1fr; padding-block: 31px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root { --pink: #ffa0e6; --gold: #ffd48e; --line: #483657; }
body { background: radial-gradient(ellipse at 70% 6%, #37204f, transparent 42rem), #100b1c; }
.banner { border-color: #a662a8; box-shadow: 0 10px 42px #ea41a936; }
.hero-bottom { padding-bottom: 8px; }
.tagline { text-transform: uppercase; }
.stars { margin-bottom: 5px; }
.copy strong { color: var(--gold); }
@media (max-width: 370px) {
  .footer-row { flex-wrap: wrap; }
}

:root { --pink: #ff90d5; --gold: #ffd88c; --line: #624067; }
body { background: radial-gradient(ellipse at 68% 0, #4e2046, transparent 41rem), #190e20; }
.banner { border-color: #d8847a; box-shadow: 0 12px 38px #ea41a93a; }
.story h2 em { display: block; margin-top: .25em; font-size: .66em; }
.exchange { background: linear-gradient(115deg, #532348, #2c182e); }