*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 150px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--paper);
  font: 400 16px/24px var(--font-text); overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: var(--radius-s); }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: var(--radius-s); font-weight: 700; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- progress ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 12px var(--accent); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background-color var(--dur-move) var(--ease-out), border-color var(--dur-move) var(--ease-out); }
.nav[data-stuck] { background: color-mix(in srgb, var(--ground-deep) 82%, transparent); border-color: var(--line-strong); }
.nav__bar { height: var(--nav-h); display: flex; align-items: center; gap: 16px; padding-inline: var(--gutter); max-width: 1240px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); }
.brand__mark { height: 36px; width: auto; aspect-ratio: 720 / 969; object-fit: contain; }
.brand__word { font: 800 22px/1 var(--font-display); font-stretch: 125%; letter-spacing: -0.01em; }
.nav__links { display: flex; gap: 4px; margin-left: 28px; }
.nav__links a { position: relative; min-height: var(--tap); display: inline-flex; align-items: center; padding-inline: 12px; font-weight: 600; font-size: 15px; color: var(--paper-dim); transition: color var(--dur-tick) var(--ease-out); }
.nav__links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-move) var(--ease-out); }
.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: var(--tap); height: var(--tap); display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--paper); transition: background-color var(--dur-tick) var(--ease-out), color var(--dur-tick) var(--ease-out), border-color var(--dur-tick) var(--ease-out), transform var(--dur-move) var(--ease-out); }
a.icon-btn:hover, button.icon-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.icon-btn.is-inert { color: var(--paper-mute); border-style: dashed; cursor: default; opacity: 0.7; }
.nav__menu { display: none; }
.nav__ca { border-top: 1px solid var(--line); }
.drawer { display: grid; padding: 8px var(--gutter) 16px; border-top: 1px solid var(--line); }
.drawer[hidden] { display: none; }
.drawer a { min-height: var(--tap); display: flex; align-items: center; font-weight: 700; font-size: 18px; border-bottom: 1px solid var(--line); }

/* ---------- contract address slot ---------- */
.ca { max-width: 1240px; margin-inline: auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ca__label { font: 700 12px/18px var(--font-data); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); flex: none; }
.ca__copy { flex: 1 1 280px; min-width: 0; min-height: var(--tap); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 14px; text-align: left; background: color-mix(in srgb, var(--paper) 8%, transparent); border: 1px solid var(--line-strong); border-radius: var(--radius-s); transition: background-color var(--dur-tick) var(--ease-out), border-color var(--dur-tick) var(--ease-out); }
.ca__copy:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); border-color: var(--paper); }
.ca__addr { font: 600 clamp(15px, 1.7vw, 22px)/1.25 var(--font-data); letter-spacing: 0.01em; overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.ca__addr--inert { color: var(--paper-mute); font-weight: 500; text-transform: none; padding: 4px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); }
.ca__act { flex: none; font: 700 12px/18px var(--font-data); text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); transition: background-color var(--dur-tick) var(--ease-out); }
.ca__copy[data-done] .ca__act { background: var(--paper); }
.ca.is-inert .ca__addr--inert { min-height: 30px; display: inline-flex; align-items: center; }

/* ---------- shared bits ---------- */
.card { position: relative; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--ground-raise) 70%, transparent); overflow: hidden; }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--paper) 18%, transparent), transparent 70%); transition: opacity var(--dur-move) var(--ease-out); }
[data-spot]:hover::before { opacity: 1; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding-inline: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font: 700 12px/1 var(--font-data); text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper-dim); }
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.8s var(--ease-out) infinite; }
.pill--live[data-state="offline"] .pill__dot { background: var(--paper-mute); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }
.btn { min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--radius-s); font-weight: 700; border: 1px solid transparent; transition: box-shadow var(--dur-move) var(--ease-out), background-color var(--dur-tick) var(--ease-out), color var(--dur-tick) var(--ease-out); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.eyebrow { font: 700 12px/18px var(--font-data); text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-text); margin-bottom: 12px; }
h1 { font: 800 clamp(40px, 6vw, 84px)/0.98 var(--font-display); font-stretch: 112%; letter-spacing: -0.035em; text-wrap: balance; }
h2 { font: 800 clamp(30px, 3.6vw, 48px)/1.02 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; }
h3 { font: 800 20px/26px var(--font-display); letter-spacing: -0.01em; }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--paper-dim); max-width: 520px; }
.sub { color: var(--paper-dim); font-size: 17px; line-height: 1.55; max-width: 640px; margin-top: 16px; }
[data-reveal] { will-change: transform, opacity; }
.js [data-reveal] { opacity: 0; }

/* ---------- hero ---------- */
.hero { --pad: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); position: relative; padding: 56px var(--pad) 80px; overflow: clip; }
.mesh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh__blob { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.mesh__blob--a { width: 620px; height: 620px; left: 52%; top: -140px; background: color-mix(in srgb, var(--accent) 44%, transparent); animation: drift 18s var(--ease-fold) infinite alternate; }
.mesh__blob--b { width: 560px; height: 560px; left: 8%; top: 280px; background: color-mix(in srgb, var(--ground-deep) 70%, transparent); animation: drift 22s var(--ease-fold) infinite alternate-reverse; }
.mesh__blob--c { width: 420px; height: 420px; left: 70%; top: 560px; background: color-mix(in srgb, var(--paper) 14%, transparent); animation: drift 26s var(--ease-fold) infinite alternate; }
@keyframes drift { from { translate: 0 0; scale: 1; } to { translate: 60px -40px; scale: 1.14; } }
.mesh__grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; opacity: 0.35; -webkit-mask-image: radial-gradient(60% 55% at 50% 40%, black, transparent); mask-image: radial-gradient(60% 55% at 50% 40%, black, transparent); }
.hero__top { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; min-height: 540px; }
.hero__copy { display: grid; gap: 24px; justify-items: start; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__art { display: grid; place-items: center; }
.art { position: relative; width: min(420px, 100%); aspect-ratio: 1; display: grid; place-items: center; perspective: 900px; }
.art > * { grid-area: 1 / 1; will-change: transform; }
.art__halo { width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); filter: blur(10px); }
.art__ring { border-radius: 50%; border: 1px solid var(--line-strong); }
.art__ring--one { width: 78%; aspect-ratio: 1; }
.art__ring--two { width: 98%; aspect-ratio: 1; border-style: dashed; animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.art__logo { width: 58%; height: auto; filter: drop-shadow(0 30px 40px var(--shadow)); }

/* ticket */
.ticket { margin-top: 24px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.ticket__chart { min-height: 340px; padding: 0; }
.chart { position: absolute; inset: 24px 0 56px; width: 100%; height: calc(100% - 80px); }
.chart__grid path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.chart__line { stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__strike { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart__end { fill: var(--accent); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; display: none; }
.handle { position: absolute; right: 16px; top: 0; width: var(--tap); height: var(--tap); background: transparent; border: 0; padding: 0; display: grid; place-items: center; touch-action: none; cursor: ns-resize; z-index: 2; translate: 0 -50%; }
.handle__grip { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 2px solid var(--paper); box-shadow: 0 6px 18px var(--shadow); transition: transform var(--dur-tick) var(--ease-out), background-color var(--dur-tick) var(--ease-out); }
.handle:hover .handle__grip, .handle[data-active] .handle__grip { transform: scale(1.2); background: var(--accent-hi); }
.tag { position: absolute; z-index: 1; padding: 8px 12px; border-radius: var(--radius-pill); font: 600 12px/1 var(--font-data); display: inline-flex; gap: 8px; align-items: baseline; }
.tag b { font-weight: 700; }
.tag--exit { top: 16px; left: 16px; background: var(--ground); border: 1.5px solid var(--accent); }
.tag--pay { top: 16px; right: calc(var(--tap) + 28px); background: var(--accent); color: var(--on-accent); }
.batch { position: absolute; left: 16px; bottom: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--paper); color: var(--ink); border-radius: var(--radius-s); z-index: 1; box-shadow: 0 10px 30px var(--shadow); }
.batch span { display: grid; line-height: 1.15; }
.batch b { font: 700 16px/1.1 var(--font-data); }
.batch small { font-size: 11px; color: var(--ground-raise); }
.hint { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 13px; color: var(--paper-mute); }
.ticket__side { display: grid; gap: 12px; align-content: start; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile, .stat, .cut { padding: 16px; display: grid; gap: 6px; align-content: end; min-height: 92px; }
.tile__k, .stat__k { font-size: 13px; color: var(--paper-dim); }
.tile__v { font: 600 clamp(20px, 2vw, 26px)/1.05 var(--font-data); color: var(--paper-mute); }
.tile--hot, .cut--hot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tile--hot .tile__k, .tile--hot .tile__v, .cut--hot .tile__k, .cut--hot .tile__v { color: var(--on-accent); }
.windows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.windows__k { font-size: 13px; color: var(--paper-dim); margin-right: 4px; }
.windows button, .tabs button { min-height: var(--tap); padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: transparent; font-weight: 600; transition: background-color var(--dur-tick) var(--ease-out), color var(--dur-tick) var(--ease-out), border-color var(--dur-tick) var(--ease-out); }
.windows button:hover, .tabs button:hover { border-color: var(--paper); }
.windows button[aria-checked="true"], .tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.receipts { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.receipt { padding: 16px; display: grid; gap: 14px; }
.receipt h3 { font-size: 15px; line-height: 20px; color: var(--paper-dim); font-weight: 600; }
.receipt p { display: grid; gap: 2px; }
.receipt b { font: 600 24px/1.1 var(--font-data); color: var(--paper-mute); }
.receipt small { font-size: 13px; color: var(--paper-mute); }

/* ---------- bands ---------- */
.band { padding: 102px 0; position: relative; }
.band--alt { background: var(--ground-deep); border-block: 1px solid var(--line); }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.head--solo { display: block; }
.status { display: grid; gap: 8px; justify-items: end; }
.status__note { font-size: 13px; color: var(--paper-mute); }
.stats, .cuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cuts { grid-template-columns: repeat(3, 1fr); }
.stat__v { font: 600 clamp(22px, 2.4vw, 32px)/1.05 var(--font-data); transition: color var(--dur-tick) var(--ease-out); }

/* ticker */
.ticker { margin-block: 12px; overflow: hidden; border-block: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.tick { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font: 600 14px/1 var(--font-data); white-space: nowrap; }
.tick__sym { font-weight: 700; }
.tick .up { color: var(--up); } .tick .down { color: var(--down); }
.tick--skel { width: 150px; height: 18px; margin: 14px 22px; padding: 0; border-radius: var(--radius-s); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* market table */
.market { margin-top: 12px; }
.market__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.market__err { font: 600 13px/18px var(--font-data); color: var(--accent-text); }
.cols, .row { display: grid; grid-template-columns: 36px minmax(180px, 1.6fr) 1fr 0.8fr 1fr 1fr var(--tap); gap: 12px; align-items: center; padding: 0 16px; }
.cols { min-height: 40px; font: 700 11px/1 var(--font-data); text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-mute); border-bottom: 1px solid var(--line); }
.row { position: relative; isolation: isolate; min-height: 64px; border-bottom: 1px solid var(--line); font: 600 14px/1.2 var(--font-data); }
.row:last-child { border-bottom: 0; }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--paper) 14%, transparent), transparent 70%); transition: opacity var(--dur-move) var(--ease-out); }
.row:hover::before { opacity: 1; }
.row__rank { color: var(--paper-mute); }
.row__token { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ground-deep); border: 1px solid var(--line-strong); display: grid; place-items: center; overflow: hidden; font: 800 16px/1 var(--font-display); color: var(--accent-text); }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.row__name { display: grid; gap: 3px; min-width: 0; }
.row__sym { font: 800 16px/1.1 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__full { font: 400 12px/1.1 var(--font-text); color: var(--paper-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__k { display: none; font: 700 10px/1 var(--font-data); text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-mute); margin-bottom: 4px; }
.row .up { color: var(--up); } .row .down { color: var(--down); }
.flash-up { animation: flash-up 0.9s var(--ease-out); } .flash-down { animation: flash-down 0.9s var(--ease-out); }
@keyframes flash-up { from { background: color-mix(in srgb, var(--paper) 36%, transparent); } }
@keyframes flash-down { from { background: color-mix(in srgb, var(--accent) 46%, transparent); } }
.copy { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; display: grid; place-items: center; transition: background-color var(--dur-tick) var(--ease-out), color var(--dur-tick) var(--ease-out); }
.copy:hover { background: var(--paper); color: var(--ink); }
.copy[data-done] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.skel { position: relative; overflow: hidden; background: color-mix(in srgb, var(--paper) 10%, transparent); border-radius: var(--radius-s); }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 18%, transparent), transparent); animation: shimmer 1.4s var(--ease-fold) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skel--cell { height: 16px; width: 70%; } .skel--logo { width: 40px; height: 40px; border-radius: 50%; } .skel--copy { width: 44px; height: 44px; border-radius: 50%; }
.in { animation: fade-in 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; opacity: 0; z-index: 70; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--paper); color: var(--ink); font: 700 13px/1 var(--font-data); transition: opacity var(--dur-move) var(--ease-out), translate var(--dur-move) var(--ease-out); pointer-events: none; }
.toast[data-show] { opacity: 1; translate: -50% 0; }

/* steps */
.steps { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 64px 1fr minmax(240px, 320px); gap: 24px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.step__num { font: 700 14px/1 var(--font-data); color: var(--paper-mute); transition: color var(--dur-move) var(--ease-out); }
.step__body h3 { font-size: 28px; line-height: 1.1; margin-bottom: 10px; transition: color var(--dur-move) var(--ease-out); }
.step__body p { max-width: 560px; color: var(--paper-dim); line-height: 1.55; transition: color var(--dur-move) var(--ease-out); }
.step:not([data-on]) h3, .step:not([data-on]) p { color: var(--paper-mute); }
.step[data-on] .step__num { color: var(--accent-text); }
.flow { width: 100%; height: auto; }
.flow .n { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.flow .n--c { fill: color-mix(in srgb, var(--paper) 8%, transparent); }
.flow .edge { stroke: var(--paper-mute); stroke-width: 1.5; fill: none; }
.flow .chip--paper { fill: var(--paper); } .flow .chip--accent { fill: var(--accent); } .flow .chip--ring { fill: var(--ground); stroke: var(--accent); stroke-width: 1.5; }
.step[data-on] .chip { animation: slide 2.4s var(--ease-fold) infinite alternate; }
@keyframes slide { from { translate: -48px 0; } to { translate: 48px 0; } }

/* cuts */
.split { margin-top: 12px; padding: 20px; display: grid; gap: 18px; }
.split__bar { display: flex; height: 18px; border-radius: var(--radius-pill); overflow: hidden; gap: 3px; }
.split__bar i { flex: 1; background: var(--paper-mute); transition: filter var(--dur-tick) var(--ease-out); }
.split__bar i:nth-child(2) { background: var(--accent); } .split__bar i:nth-child(3) { background: var(--line-strong); }
.split__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.split__legend li { display: grid; gap: 4px; } .split__legend small { color: var(--paper-mute); font: 500 13px/1 var(--font-data); }

/* records */
.records { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.record { padding: 20px; min-height: 92px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.record__k { font-weight: 700; }
.record__v { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.record small { color: var(--paper-mute); font-size: 13px; }
.chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); font: 600 13px/1 var(--font-data); }
.chip--link { background: var(--accent); color: var(--on-accent); border-color: var(--accent); min-height: var(--tap); padding-inline: 18px; transition: background-color var(--dur-tick) var(--ease-out); }
.chip--link:hover { background: var(--accent-hi); }
.chip--inert { color: var(--paper-mute); border-style: dashed; }
.record.is-inert { opacity: 0.8; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; background: var(--ground-deep); }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 48px; }
.foot__warn { margin-top: 16px; max-width: 520px; color: var(--paper-dim); font-size: 14px; line-height: 1.55; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; align-content: start; }
.foot__nav a { min-height: var(--tap); min-width: var(--tap); justify-content: center; display: inline-flex; align-items: center; font-weight: 600; color: var(--paper-dim); }
.foot__nav a:hover { color: var(--paper); }
.foot__ca { grid-column: 1 / -1; border-top: 1px solid var(--line); }
.foot__ca .ca { padding-inline: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ticket { grid-template-columns: 1fr; }
  .receipts { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 48px 1fr; }
  .step .flow { grid-column: 2; max-width: 320px; }
}
@media (max-width: 960px) {
  .hero__top { grid-template-columns: 1fr; min-height: 0; }
  .hero__art { order: -1; }
  .art { width: min(300px, 70%); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cuts, .split__legend { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-grid; }
  .records { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .band { padding: 72px 0; }
  .cols { display: none; }
  .row { grid-template-columns: 28px repeat(4, minmax(0, 1fr)); grid-template-areas: "rank token token token copy" ". price chg vol liq"; gap: 10px 12px; padding: 12px; align-items: start; }
  .row__rank { grid-area: rank; padding-top: 12px; }
  .row__token { grid-area: token; }
  .row__copy { grid-area: copy; justify-self: end; }
  .row__price { grid-area: price; } .row__chg { grid-area: chg; } .row__vol { grid-area: vol; } .row__liq { grid-area: liq; }
  .row__price, .row__chg, .row__vol, .row__liq { display: grid; font-size: 13px; }
  .row__k { display: block; }
}
@media (max-width: 720px) {
  .row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) var(--tap); grid-template-areas: "rank token token copy" ". price chg ." ". vol liq ."; }
  .hero { padding-top: 32px; padding-bottom: 56px; }
  .brand__word { font-size: 20px; }
  .receipts, .tiles { grid-template-columns: 1fr 1fr; }
  .tag--pay { display: none; }
  .ticket__chart { min-height: 320px; }
  .ca__copy { padding: 8px 12px; }
  .status { justify-items: start; }
}
@media (max-width: 420px) {
  .receipts { grid-template-columns: 1fr; }
  .brand__mark { height: 32px; }
  .nav__bar { gap: 8px; }
  .nav__right { gap: 4px; }
}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker__track { width: max-content; }
  .skel::after { display: none; }
  .in { opacity: 1; }
}