/* Rankfolio.
   Layout: fixed nav, tall cinematic hero with the headline on the left and a
   live card on the right, split-label sections, a horizontal "How it works"
   scroll, an allocation-style board, a table band, an FAQ accordion and a
   column footer. /ranks is a dashboard page.
   Type (user, 2026-09-18, after fomo.family; replaces Geist): Satoshi 700 and
   900 for display (hero, section and page titles, step numbers, the wordmark;
   served by Fontshare),
   Inter for everything you read and press (body, buttons, nav, labels), and
   JetBrains Mono for figures, P&L, addresses, hashes and codes, so numbers
   line up and do not shift as they change.
   Buttons: solid, with glass only over imagery. Motion: see "motion" below;
   none of it runs for prefers-reduced-motion. */

:root {
  --bg: #060510;
  --band: #0a0914;
  --surface: #12111a;
  --surface-2: #161522;
  --fill: #cbd0eb1a;
  --fill-soft: #cbd0eb0d;
  --line: #cbd0eb1a;
  --line-2: #cbd0eb2e;
  --text: #f7f7f7;
  --muted: #9899a3;
  --dim: #474b52;
  --accent: #516af6;
  --accent-2: #221d4b;
  --green: #21c95e;
  --green-soft: #21c95e1f;
  --red: #ff622e;
  --warn: #ffc74f;
  --warn-soft: #ffc74f1f;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Satoshi', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --nav-h: 60px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--text); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
b, strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 24px; }
.muted { color: var(--muted); }
.up { color: var(--green); }
.down { color: var(--red); }

/* Labels: every section label, column head and pill reads the same. */
.label, .sec__label, .th, .dt, .pill, .qa__cat, .foot__col-title, .pcard__tag {
  font-family: var(--font); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.label, .sec__label, .th, .dt, .qa__cat, .foot__col-title { font-size: 10.5px; color: var(--muted); }

.pnl, .num, .figure, .td-num, .mono, .trow .col-vol, .trow .col-hold, .alloc-row__vol { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Display: Satoshi, heavy, for the loud lines only. */
.hero h1, .sec h2, .hs h2, .dash h1, .page h1, .hs__body h3, .half__title, .empty-card h2, .hs__num, .brand__word { font-family: var(--font-display); }

/* ── buttons ───────────────────────────────────────────────────────────── */
/* Solid on the dark page (user, 2026-09-14: glass over flat dark "looks awful":
   with nothing behind it to blur, frosted glass is just a grey translucent
   wash). Real glass is kept only where there is imagery behind it: the hero
   film and the nav while it floats over the film. See "glass" below. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--text);
  background: #17162a;
  border: 1px solid #2a2940;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .5);
  transition: transform .3s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), color .2s;
}
.btn:hover { transform: scale(1.03); background: #201f36; border-color: #3a3955; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px -10px rgba(0, 0, 0, .8); }
.btn:active { transform: scale(.99); }
.btn:disabled { cursor: not-allowed; transform: none; color: #6b6d78; background: #0e0d18; border-color: #1f1e2e; box-shadow: none; }
.btn--primary { background: #f7f7f7; color: #0b0a14; border-color: #f7f7f7; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.btn--primary:hover { background: #ffffff; border-color: #ffffff; box-shadow: 0 10px 26px -10px rgba(255, 255, 255, .25); }
.btn--green { background: #15301f; color: #e6fbee; border-color: #1f5a35; }
.btn--green:hover { background: #1a3b27; border-color: #27704a; }
.btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn--quiet:hover { background: #17162a; border-color: #2a2940; color: var(--text); }
.btn--block { width: 100%; height: 44px; }
.btn--lg { height: 46px; padding: 0 20px; }
.btn small { font-size: 11px; font-weight: 500; color: var(--accent); }
.ext { width: 11px; height: 11px; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--green { background: var(--green-soft); color: var(--green); }
.pill--dim { background: var(--fill-soft); color: var(--muted); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #0e0d18; border: 1px solid #22212f; }
.toggle button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); transition: color .2s, background-color .25s var(--ease); }
.toggle button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.toggle button:hover { color: var(--text); }
.toggle button:hover { background: #17162a; }
.toggle button[aria-pressed="true"] { background: #15301f; color: #e6fbee; box-shadow: inset 0 0 0 1px #1f5a35; }
.toggle button[aria-pressed="true"]::before { opacity: 1; background: var(--green); }

/* ── shared bits ───────────────────────────────────────────────────────── */

.av { position: relative; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none; display: inline-grid; place-items: center; background: var(--surface-2); }
.av::after { content: attr(data-initial); font-size: 14px; font-weight: 600; color: var(--muted); }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.av--sm { width: 28px; height: 28px; }
.av--sm::after { font-size: 12px; }
.av--lg { width: 44px; height: 44px; }
.tick { display: inline-block; width: 14px; height: 14px; margin-left: 5px; flex: none; color: var(--accent); }
.tokens { display: inline-flex; align-items: center; }
.tokens img, .tokens__more { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--surface-2); box-shadow: 0 0 0 1.5px var(--surface); object-fit: cover; }
.tokens > * + * { margin-left: -6px; }
.tokens__more { display: inline-grid; place-items: center; width: auto; min-width: 20px; padding: 0 5px; border-radius: 10px; font-size: 10px; font-weight: 500; color: var(--muted); }
.medal { width: 26px; height: 30px; flex: none; }
.medal text { font-family: var(--font); }
.medal--sm { width: 20px; height: 23px; }
.ico { width: 30px; height: 30px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--ib); color: var(--if); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px #ffffff1f; }
.ico--tbc { --ib: var(--fill); --if: var(--muted); }
.name { display: flex; align-items: center; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handle { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who { display: flex; flex-direction: column; min-width: 0; }
a.tlink { color: inherit; min-width: 0; }
a.tlink.who:hover .name, a.tlink.winrow__who:hover .name { text-decoration: underline; text-decoration-color: #4a4968; text-underline-offset: 3px; }
a.tlink:has(> .av) { display: inline-flex; flex: none; border-radius: 50%; transition: box-shadow .2s var(--ease); }
a.tlink:has(> .av):hover { box-shadow: 0 0 0 2px #3a3955; }
a.tlink.linkbtn { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: #3a3955; text-underline-offset: 3px; }
.num { font-size: 13px; font-weight: 500; color: var(--muted); }
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--fill-soft) 25%, var(--fill) 50%, var(--fill-soft) 75%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skel.av::after { content: none; }
.skel--line { width: 120px; height: 11px; margin-bottom: 6px; }
.skel--short { width: 80px; height: 9px; }
.skel--val { width: 90px; height: 14px; margin-left: auto; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; font-size: 14px; color: var(--muted); }

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand__logo { display: block; width: auto; height: 24px; flex: none; }
.brand__word { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }

.motto { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.motto svg { width: 16px; height: 16px; }

/* ── nav ───────────────────────────────────────────────────────────────── */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.nav.is-scrolled, .nav--solid { background: rgba(6, 5, 16, .82); border-color: var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.nav__in { height: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.nav__links { display: flex; gap: 28px; }
.nav__links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__links small { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--accent); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav__ca { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: #0e0d18; border: 1px solid #22212f; white-space: nowrap; }
.nav__ca .mono { color: var(--text); font-size: 12px; }
button.nav__ca { cursor: copy; transition: border-color .2s, background-color .2s; }
button.nav__ca:hover { border-color: #3a3955; background: #12111d; }
.nav__x { width: 40px; padding: 0; justify-content: center; }
.nav__wallet .mono { font-size: 12.5px; }
.nav__menu-wallet { margin-top: 16px; }
/* the rank panel under the navbar once a wallet is connected */
.wpop { position: fixed; z-index: 60; top: calc(var(--nav-h) + 8px); right: max(16px, calc((100vw - 72rem) / 2 + 24px)); width: min(360px, calc(100vw - 32px)); display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: #0e0d18; border: 1px solid #2a2940; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); }
.wpop__who { display: flex; align-items: center; gap: 10px; }
.wpop__who > span:last-child { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.wpop__who b { font-size: 14px; color: var(--text); }
.wpop__rank { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.wpop__rank .figure { font-size: 30px; font-weight: 600; color: var(--text); }
.wpop__cut { font-size: 13.5px; color: var(--muted); }
.wpop__cut .figure { font-size: 22px; font-weight: 600; color: var(--green); margin-right: 4px; }
.wpop__msg { font-size: 14px; line-height: 1.55; }
.wpop__fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.wpop__acts { display: flex; justify-content: flex-end; gap: 8px; }
.wpop__acts .btn { height: 36px; }
.lb .trow.is-me { background: #15301f40; box-shadow: inset 3px 0 0 var(--green); }
.you { margin-left: 8px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--green-soft); }
.nav__x svg { width: 15px; height: 15px; }
.nav__menu-ca { font-size: 14px; color: var(--muted); padding: 10px 0; }
.nav__menu-ca .mono { color: var(--text); }
.nav__back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--muted); }
.nav__back:hover { color: var(--text); }
.nav__back svg { width: 14px; height: 14px; }
.nav__mobile { display: none; }
.nav__menu-btn { display: none; width: 40px; padding: 0; }
.nav__menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav__menu-close, .nav.is-open .nav__menu-open { display: none; }
.nav.is-open .nav__menu-close { display: inline; }
.nav.is-open { background: #0a0914; border-color: var(--line); }
.nav__menu { position: absolute; top: var(--nav-h); left: 0; right: 0; max-height: calc(100svh - var(--nav-h)); overflow-y: auto; display: grid; padding: 4px 24px 20px; background: #0a0914; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.nav__menu a:not(.btn) { display: flex; align-items: center; gap: 10px; min-height: 50px; font-size: 16px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line); }
.nav__menu .pill { height: 22px; font-size: 10px; }
.nav__menu-cta { margin-top: 16px; height: 46px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 28px; }
.foot__links a { font-size: 14px; color: var(--muted); transition: color .2s; }
.foot__links a:hover { color: var(--text); }
.nav__in > span:empty { min-width: 0; }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero { position: relative; isolation: isolate; min-height: max(620px, 88svh); display: flex; align-items: center; overflow: hidden; }
/* The film: original art of a planet turning under an aurora. The poster sits
   behind it as a background so the frame never flashes empty while loading. */
.hero__media { position: absolute; inset: 0; z-index: -2; background: #05040d url('../assets/hero/earth-poster.jpg') 50% 50% / cover no-repeat; }
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Darkens the left for the headline and softens the edges; the planet and
   aurora on the right stay bright. */
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 5, 16, .86) 0%, rgba(6, 5, 16, .55) 34%, rgba(6, 5, 16, .08) 58%, rgba(6, 5, 16, .18) 100%),
    linear-gradient(180deg, rgba(6, 5, 16, .45) 0%, transparent 22%);
}
.hero__fade { position: absolute; inset: auto 0 0; height: 160px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--bg)); }
.hero__in { width: 100%; max-width: 80rem; margin-inline: auto; padding: calc(var(--nav-h) + 40px) 24px 88px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: center; gap: 48px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 40rem; }
.hero__copy .label { color: #b9bccb; }
.hero h1 { font-size: clamp(36px, 4.2vw, 58px); line-height: .98; font-weight: 900; letter-spacing: -.03em; }
.hero__sub { font-size: 16px; line-height: 1.65; color: #c3c5d0; max-width: 29rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.pcard {
  padding: 16px; border-radius: 16px;
  background: rgba(14, 13, 24, .9); border: 1px solid #2a2940;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pcard__title { font-size: 14px; font-weight: 600; }
.pcard__sub { font-size: 12px; color: var(--muted); }
.pcard__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 11px; background: var(--green-soft); color: var(--green); }
.pcard__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* the focal point: #1 and their cut of today's treasury */
.pcard__lead { display: grid; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pcard__lead-who { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.pcard__lead-pnl { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: var(--muted); }
.pcard__lead-pnl .pnl { font-size: 14px; font-weight: 600; }
.pcard__lead-cut { display: flex; align-items: baseline; gap: 10px; padding-top: 12px; border-top: 1px solid #22212f; }
.pcard__lead-cut .figure { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: #aab7ff; }
.pcard__lead-cut > span:last-child { font-size: 13px; color: var(--muted); }
.pcard__rows { margin-top: 12px; border-top: 1px solid var(--line); }
.pcard__cut { font-size: 15px; font-weight: 600; color: #aab7ff; }
.pcard__row.pcard__row--rest { grid-template-columns: 60px minmax(0, 1fr) auto; font-size: 12.5px; color: var(--muted); }
.pcard__rest-rank { font-weight: 600; color: var(--text); }
.pcard__row--rest .pcard__cut { font-size: 13px; }
.pcard__row--msg { font-size: 12.5px; color: var(--muted); }
.pcard__labels { display: flex; justify-content: space-between; margin: 16px 0 6px; font-size: 12px; }
.pcard__labels span:first-child { font-weight: 600; }
.pcard__labels span:last-child { color: var(--muted); }
.pcard__value { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #09081a; border: 1px solid #22212f; }
.pcard__value .figure { font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--green); }
.pcard__unit { font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 5px; background: var(--fill); color: var(--muted); }
.pcard__who { display: flex; align-items: center; gap: 8px; margin: 8px 2px 12px; font-size: 12px; color: var(--muted); min-width: 0; }
.pcard__who .name { font-size: 12.5px; }
.pcard__row { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; }
.pcard__row + .pcard__row { border-top: 1px solid var(--line); }
.pcard__row .pnl { font-size: 14px; font-weight: 600; color: var(--green); }
.pcard .btn--block { margin-top: 12px; }
.pcard__notes { display: grid; gap: 8px; margin-top: 12px; }
.pcard__notes p { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pcard__notes svg { width: 13px; height: 13px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* ── glass: only where there is an image behind it ─────────────────────── */
.hero .btn:not(.btn--primary), .nav:not(.is-scrolled):not(.nav--solid):not(.is-open) .btn {
  background: rgba(8, 7, 20, .42);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 30px -14px rgba(0, 0, 0, .8);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease), -webkit-backdrop-filter .3s var(--ease), box-shadow .3s var(--ease);
}
.hero .btn:not(.btn--primary):hover, .nav:not(.is-scrolled):not(.nav--solid):not(.is-open) .btn:hover {
  background: rgba(20, 19, 38, .55);
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.hero .btn.btn--green { background: #15301f; border-color: #1f5a35; }
.hero .btn.btn--green:hover { background: #1a3b27; border-color: #27704a; }
.nav:not(.is-scrolled):not(.nav--solid):not(.is-open) .btn:disabled { background: rgba(8, 7, 20, .3); color: #8a8b96; }

/* ── sections ──────────────────────────────────────────────────────────── */

.sec { padding-block: 104px; }
.sec__split { display: grid; grid-template-columns: 160px minmax(0, 36rem); gap: 10px 72px; align-items: start; }
.sec__label { padding-top: 12px; }
.sec h2, .hs h2, .dash h1 { font-size: clamp(29px, 3.1vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.sec__lede { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 34rem; }
.sec__lede b { color: var(--text); font-weight: 500; }

/* The board: FOMO provides + Rankfolio adds */
.duo-card { position: relative; margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.half { display: flex; flex-direction: column; gap: 22px; padding: 24px 26px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.half--rf { border-color: #ffc74f2e; background: linear-gradient(180deg, #ffc74f08, transparent 40%), var(--surface); }
.half__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.half__head .label { color: var(--text); }
.half__hero { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.half__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.half__text { margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.half__text b { color: var(--text); font-weight: 500; }
.faces { display: flex; flex: none; padding-left: 10px; }
.faces .av { width: 48px; height: 48px; margin-left: -10px; background: #22213a; box-shadow: 0 0 0 3px var(--surface); }
.faces .av::after { font-size: 16px; }
.rf-tile { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #17162a; border: 1px solid #2a2940; flex: none; }
.rf-tile img { display: block; width: auto; height: 22px; }
.facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 8px; margin-inline: -8px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 13.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.prizes { display: grid; border-top: 1px solid var(--line); }
.prizes li { display: grid; grid-template-columns: 20px 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 8px; margin-inline: -8px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.prizes__place { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.prizes__name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.prizes__name b { font-size: 14.5px; font-weight: 600; }
.prizes__name span { font-size: 12.5px; color: var(--muted); }
.prizes__usd { font-size: 16px; font-weight: 600; }
.half__foot { margin-top: auto; font-size: 13px; color: var(--muted); }
.half__foot b { color: var(--text); font-weight: 600; }
.plus { position: absolute; left: 50%; top: 50%; z-index: 2; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid #2a2940; color: var(--text); }
.plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* How it works: horizontal scroll */
.hs { position: relative; }
.hs__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 36px; overflow: hidden; padding-top: var(--nav-h); }
.hs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hs__head .label { display: block; margin-bottom: 12px; }
.hs__steps { display: flex; gap: 4px; }
.hs__steps button { height: 32px; min-width: 42px; padding: 0 8px; border-radius: 8px; font: 600 13.5px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s var(--ease), background-color .3s var(--ease); }
.hs__steps button:hover { color: var(--text); background: #17162a; }
.hs__steps button[aria-current="step"] { color: var(--text); background: var(--accent-2); }
.hs__viewport { overflow: hidden; }
.hs__track { display: flex; gap: 20px; padding-inline: max(24px, calc((100vw - 72rem) / 2 + 24px)); will-change: transform; }
.hs__panel {
  flex: 0 0 min(820px, 64vw); min-height: min(440px, 52svh);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 40px;
  padding: 34px 36px;
  transition: border-color .5s var(--ease);
}

/* Panels fade in and out with the scroll (opacity set in src/home.js); the
   current one is always fully opaque. A faded panel ignores the pointer. */
.hs__panel.is-faded { pointer-events: none; }
.hs__num { grid-column: 1; font-size: 68px; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #6b6990; font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.hs__panel.is-current .hs__num { color: var(--accent); }
.hs__body { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.hs__body h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: clamp(25px, 2.5vw, 33px); font-weight: 900; letter-spacing: -.025em; line-height: 1.12; }
.hs__body p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: var(--muted); max-width: 34ch; }
.hs__visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.hs__progress { height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.hs__progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
/* Wide screens jump a whole step at a time (src/home.js): the track slides
   to the next panel, which fades in as the last one fades out. */
.hs--scroll .hs__track { transition: transform .75s cubic-bezier(.65, 0, .35, 1); }
.hs--scroll .hs__track.no-anim { transition: none; }
.hs--scroll .hs__panel { opacity: .35; cursor: pointer; transition: opacity .6s var(--ease), border-color .5s var(--ease); }
.hs--scroll .hs__panel.is-current { opacity: 1; cursor: auto; }
.hs--scroll .hs__progress span { transition: transform .75s cubic-bezier(.65, 0, .35, 1); }

.hs-trade { display: grid; gap: 14px; }
.hs-trade__top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; }
.hs-trade > svg { width: 100%; height: auto; overflow: visible; }
.hs-chart__grid { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.hs-chart__line { fill: none; stroke: #21c95e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(33, 201, 94, .45)); }
.hs-chart__buy { fill: var(--bg); stroke: var(--muted); stroke-width: 1.6; }
.hs-chart__sell circle:last-child { fill: #21c95e; }
.hs-chart__pulse { fill: #21c95e; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hs-chart__tag { font: 600 10px var(--font); fill: var(--muted); letter-spacing: .04em; }
.hs-chart__tag--sell { fill: #21c95e; }
.motion .hs-trade .hs-chart__area, .motion .hs-trade .hs-chart__sell, .motion .hs-trade .hs-chart__tag { opacity: 0; transition: opacity .6s var(--ease) 1s; }
.motion .hs-trade.in .hs-chart__area, .motion .hs-trade.in .hs-chart__sell, .motion .hs-trade.in .hs-chart__tag { opacity: 1; }
.motion .hs-trade.in .hs-chart__pulse { animation: chart-pulse 2.2s ease-out 1.4s infinite; }
@keyframes chart-pulse { 0% { opacity: .45; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } }
.hs-trade .btn { justify-self: start; }
/* the pictures sit on the slide itself: no box inside the box */
.hs-board ol { margin-top: 10px; display: grid; }
.hs-board li { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; }
.hs-board li + li { border-top: 1px solid #22212f; }
.hs-board .pnl { font-size: 15px; font-weight: 600; }
.hs-board__empty { font-size: 14px; color: var(--muted); }
/* Step 3: Rankfolio's fees drop into the reward pool and it fills. Nothing
   flows in from a trader. With motion off, the pool simply shows filled. */
.hs-pool { display: grid; justify-items: center; gap: 2px; }
.hs-pool__src, .hs-payout__pool { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--accent-2); border: 1px solid #3b3585; font-size: 13px; font-weight: 600; color: #e3e7ff; white-space: nowrap; }
.hs-pool__src img { width: 22px; height: auto; }
.hs-pool__svg { display: block; width: 100%; max-width: 330px; height: auto; overflow: visible; }
.pool-spout { fill: none; stroke: #3b3585; stroke-width: 2; stroke-dasharray: 2 5; }
.pool-vessel { fill: #0b0a16; stroke: #3a3955; stroke-width: 1.5; }
.pool-wave { fill: url(#pool-liquid); }
.pool-ripple { fill: none; stroke: #c9d1ff; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.coin { fill: #ffd978; stroke: #b98a1f; stroke-width: 1.2; }
.coin.c1 { transform: translateY(12px); }
.coin.c2 { transform: translateY(40px); opacity: .6; }
.coin.c3 { opacity: 0; }
.hs-pool__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.hs-pool__cap b { font-size: 14px; font-weight: 600; color: var(--text); }
.motion .hs-pool .pool-level { transform: translateY(66px); transition: transform 2.6s cubic-bezier(.22, 1, .36, 1) .5s; }
.motion .hs-pool.in .pool-level { transform: none; }
.motion .hs-pool.in .pool-wave { animation: pool-wave 3.6s linear infinite; }
.motion .hs-pool .coin { opacity: 0; transform: none; }
.motion .hs-pool.in .coin { animation: coin-fall 1.8s cubic-bezier(.55, 0, 1, .45) infinite; }
.motion .hs-pool.in .pool-ripple { animation: pool-ripple 1.8s ease-out infinite; }
.motion .hs-pool.in :is(.coin.c2, .pool-ripple.r2) { animation-delay: .6s; }
.motion .hs-pool.in :is(.coin.c3, .pool-ripple.r3) { animation-delay: 1.2s; }
@keyframes pool-wave { to { transform: translateX(-100px); } }
@keyframes coin-fall { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateY(86px); opacity: 0; } }
@keyframes pool-ripple { 0%, 80% { opacity: 0; transform: scale(.4); } 84% { opacity: .8; } 100% { opacity: 0; transform: scale(2.2); } }

/* Step 4: the pool pays the winning ranks, and only them. */
.hs-payout { display: grid; justify-items: center; }
.hs-payout__svg { display: block; width: 100%; height: auto; overflow: visible; }
.hs-payout .stream { fill: none; stroke: #3b3585; stroke-width: 2; }
.hs-payout .flow { fill: none; stroke: #8fa0ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 10; opacity: 0; }
.motion .hs-payout.in .flow { opacity: 1; transition: opacity .4s 1s; animation: payout-flow .9s linear 1s infinite; }
@keyframes payout-flow { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }
.hs-payout__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 4px; }
.hs-payout__slot { display: grid; justify-items: center; gap: 6px; text-align: center; }
.hs-payout__slot .medal { width: 30px; height: 35px; }
.hs-payout__slot b { font-size: 14px; font-weight: 600; line-height: 1.2; }
.hs-payout__slot span { font-size: 12px; color: var(--muted); line-height: 1.3; }
.motion .hs-payout .hs-payout__slot { opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease) var(--sd, .5s), translate .7s var(--ease) var(--sd, .5s); }
.motion .hs-payout.in .hs-payout__slot { opacity: 1; translate: 0 0; }

/* allocation-style board */
.board__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.board__hint { font-size: 12.5px; color: var(--muted); }
.alloc { margin-top: 44px; height: 10px; border-radius: 6px; display: flex; overflow: hidden; background: var(--fill); }
.alloc span { height: 100%; transition: width .8s var(--ease); }
.alloc__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.alloc__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.alloc__note b { color: var(--text); }
.alloc-rows { margin-top: 26px; }
.alloc-row { display: grid; grid-template-columns: 26px minmax(0, 250px) minmax(0, 1fr) 110px 230px; align-items: center; gap: 22px; padding: 20px 0; border-top: 1px solid var(--line); }
.alloc-row__trader { display: flex; align-items: center; gap: 12px; min-width: 0; }
.alloc-row__trader .name { font-size: 15px; }
.alloc-row__desc { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); min-width: 0; }
.alloc-row__vol { font-size: 12.5px; color: var(--muted); text-align: right; }
.alloc-row__money { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.alloc-row__cut { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--green); background: var(--green-soft); padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.alloc-row .pnl { font-size: 18px; font-weight: 600; text-align: right; letter-spacing: -.01em; }
.alloc-row__rank { display: flex; justify-content: center; }
.board__more { margin-top: 22px; }

/* table band */
.band { background: var(--band); border-block: 1px solid var(--line); }
.band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.band__head .label { display: block; margin-bottom: 12px; }
.band__stats { display: flex; gap: 56px; }
.band__stats div { display: flex; flex-direction: column; gap: 2px; }
.band__stats .figure { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.band__stats span:last-child { font-size: 12.5px; color: var(--muted); }

.tcard { margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.tcard__head, .trow { display: grid; align-items: center; gap: 16px; padding-inline: 24px; }
.tcard__head { padding-block: 14px; border-bottom: 1px solid var(--line); }
.rewards .tcard__head, .rewards .trow { grid-template-columns: minmax(0, 1.7fr) 1fr 1fr 96px; }
.rewards .tcard__head > :last-child, .rewards .trow > .pill { justify-self: end; }
.trow { padding-block: 16px; width: 100%; text-align: left; }
button.trow { cursor: pointer; transition: background-color .2s; }
button.trow:hover { background: var(--fill-soft); }
.trow + .trow, .tdetail + .trow { border-top: 1px solid var(--line); }
.trow__asset { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trow__title { font-size: 14px; font-weight: 600; }
.trow__sub { font-size: 12px; color: var(--muted); }
.td-num { font-size: 14px; font-weight: 500; }
.td-muted { font-size: 13.5px; color: var(--muted); }
.tdetail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 16px 24px 18px; border-top: 1px solid var(--line); background: rgba(203, 208, 235, .03); }
.dt { display: block; margin-bottom: 5px; }
.dd { font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.tcard__foot { padding: 14px 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* FAQ */
.faq__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.faq__head .label { margin-bottom: 12px; }
.faq__head .sec__lede { margin-inline: auto; }
.faq__list { max-width: 44rem; margin: 52px auto 0; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa__btn { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 16px; padding: 18px 0; text-align: left; }
.qa__cat { display: block; margin-bottom: 4px; }
.qa__q { font-size: 15px; font-weight: 600; }
.qa__icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--muted); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; }
.qa__icon svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.qa__icon .v { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease); }
.qa.is-open .qa__icon { background: var(--text); color: var(--bg); border-color: var(--text); }
.qa.is-open .qa__icon .v { transform: scaleY(0); }
.qa__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s var(--ease), visibility 0s .45s; }
.qa.is-open .qa__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease), visibility 0s; }
.qa__body { overflow: hidden; min-height: 0; }
.qa__inner { display: grid; gap: 12px; padding: 0 48px 24px 0; }
.qa__inner p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.qa__inner p:first-child { font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--text); }
.glance { margin-top: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.glance .label { display: block; margin-bottom: 8px; }
.glance dl div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
.glance dt { color: var(--muted); }
.glance dd { font-weight: 600; text-align: right; }

/* footer */
.foot { border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 40px 96px; padding-block: 64px 36px; }
.foot__desc { margin-top: 16px; max-width: 22rem; font-size: 13.5px; line-height: 1.7; color: var(--muted); }
.foot__col { display: flex; flex-direction: column; gap: 10px; }
.foot__col-title { margin-bottom: 6px; }
.foot__col a { font-size: 14px; color: var(--muted); transition: color .2s; }
.foot__col a:hover { color: var(--text); }
.foot__fine { padding-block: 20px 40px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ── ranks dashboard ───────────────────────────────────────────────────── */

.dash { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 96px; }
.dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.dash__head .label { display: block; margin-bottom: 12px; }
.dash__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; }
.search { display: flex; align-items: center; gap: 8px; height: 42px; width: min(340px, 100%); padding: 0 12px; border-radius: 10px; background: #0e0d18; border: 1px solid #22212f; color: var(--muted); }
.search:focus-within { border-color: #3a3955; background: #12111d; }
.search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; font-size: 14px; color: var(--text); }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.dash__captured { font-size: 12.5px; color: var(--muted); }
.dash__captured b { color: var(--text); font-weight: 500; }

.lb .tcard__head, .lb .trow { grid-template-columns: 40px minmax(0, 1.8fr) 1fr 0.8fr 1fr 0.8fr 28px; }
.lb .trow[data-handle] { cursor: pointer; }
.lb .trow .col-cut { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: #aab7ff; }
.lb__money { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lb__cut-sm { display: none; font-family: var(--font-mono); font-size: 11.5px; color: #aab7ff; }
.trow__toggle { display: grid; place-items: center; width: 28px; height: 28px; justify-self: end; border-radius: 8px; transition: background-color .2s; }
.trow__toggle:hover { background: #17162a; }
.lb .trow { width: 100%; text-align: left; transition: background-color .2s; }
.lb .trow:hover { background: var(--fill-soft); }
.lb .trow.is-open { background: var(--fill-soft); }
.lb .trow .pnl { font-size: 14px; font-weight: 600; }
.lb .r { text-align: right; justify-self: end; }
.trow__rank { display: flex; justify-content: center; }
.chev { width: 14px; height: 14px; justify-self: end; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.trow[aria-expanded="true"] .chev, .trow__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.tdetail .tok-list { display: flex; flex-direction: column; gap: 6px; }
.tok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.tok img, .tok i { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); object-fit: cover; flex: none; }
.win-list { display: flex; gap: 14px; flex-wrap: wrap; }
.win-list span { font-size: 13.5px; }
.win-list .label { font-size: 9.5px; margin-right: 4px; }
.linkbtn { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: underline; text-decoration-color: #3a3955; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.linkbtn:hover { text-decoration-color: var(--accent); }
.linkbtn:disabled { color: var(--muted); cursor: progress; }
.dash__more { display: flex; justify-content: center; padding: 16px; border-top: 1px solid var(--line); }

.dash__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.empty-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 44px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.empty-card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid #2a2940; background: #17162a; color: var(--text); }
.empty-card__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.empty-card h2 { font-size: 23px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.empty-card p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 26rem; }
.empty-card .fine { font-size: 12px; }

/* ── simple pages: contact, 404 ────────────────────────────────────────── */

.page { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 104px; min-height: calc(100svh - 140px); }
.page__head .label { display: block; margin-bottom: 12px; }
.page h1 { font-size: clamp(31px, 3.5vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.page__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.contact { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 40px; align-items: start; }
.contact__card { display: grid; gap: 16px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.contact__card--warn { border-color: #ffc74f2e; background: linear-gradient(180deg, #ffc74f08, transparent 45%), var(--surface); }
.contact__card h2 { font-size: 16px; font-weight: 600; }
.contact__card p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.contact__email { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--text); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: #3a3955; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.contact__email:hover { text-decoration-color: var(--accent); }
.contact__list li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.contact__list li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.contact__list a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── rewards: winners, claim, rules, admin ─────────────────────────────── */

.ico--sm { width: 22px; height: 22px; font-size: 11px; }
/* links inside running copy look like links */
:is(.sec__lede, .hs__body p, .qa__inner p, .contact__card p) a { color: var(--text); text-decoration: underline; text-decoration-color: #4a4968; text-underline-offset: 3px; transition: text-decoration-color .2s; }
:is(.sec__lede, .hs__body p, .qa__inner p, .contact__card p) a:hover { text-decoration-color: var(--accent); }
.winners { display: grid; }
.winrow { display: grid; grid-template-columns: 20px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.winrow__who { display: flex; flex-direction: column; min-width: 0; }
.winrow__prize { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.winweek + .winweek { margin-top: 20px; }
.winweek__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; }
.winweek__title { font-size: 14px; font-weight: 600; }
.winweek__meta { font-size: 12.5px; color: var(--muted); }
.rankpay { display: grid; gap: 14px; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.rankpay__title { font-family: var(--font-display); font-size: clamp(29px, 3.1vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.rankpay__past { font-size: 13px; color: var(--muted); }
.rankpay__text { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 44rem; }
.rankpay__text a { color: var(--text); text-decoration: underline; text-decoration-color: #4a4968; text-underline-offset: 3px; }
.sharegrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.sharegrid li { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); }
.sharegrid__rank { font-size: 11px; font-weight: 600; color: var(--muted); }
.sharegrid__cut { font-size: 13px; font-weight: 600; color: #aab7ff; }
.sharegrid li:nth-child(-n+3) .sharegrid__cut { color: var(--text); }
.hs-payout__more { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.hs-payout__more b { color: #aab7ff; font-weight: 600; }
.feeflow { display: grid; gap: 18px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.feeflow__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feeflow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feeflow__steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.feeflow__steps li > b { align-self: end; font-size: 14.5px; font-weight: 600; }
.feeflow__steps li > span:last-child { grid-column: 2; align-self: start; font-size: 12.5px; color: var(--muted); }
.feeflow__ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-2); color: #c9d1ff; }
.feeflow__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* the flow reads from the icons: each draws in, then a glow travels from
   fees to pool to winners and round again (not with reduced motion) */
.feeflow__ico { transition: box-shadow .4s var(--ease), color .4s var(--ease); }
.motion .feeflow:not(.in) .feeflow__ico { scale: .7; opacity: 0; }
.motion .feeflow .feeflow__ico { transition: scale .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * .2s + .1s), opacity .4s ease calc(var(--i) * .2s + .1s); }
.motion .feeflow.in .feeflow__ico { animation: flow-glow 3s ease-in-out calc(1.4s + var(--i) * 1s) infinite; }
@keyframes flow-glow {
  0%, 40%, 100% { box-shadow: 0 0 0 0 rgba(109, 130, 255, 0); color: #c9d1ff; }
  15% { box-shadow: 0 0 0 5px rgba(109, 130, 255, .2), 0 0 22px rgba(109, 130, 255, .45); color: #ffffff; }
}
.feeflow__note { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.rewards__tiers { display: block; margin-top: 40px; }
.rewards__tiers + .tcard { margin-top: 12px; }
.rewards__winners { padding-top: 8px; }
.rewards__next { margin-top: 14px; padding-block: 14px; border-top: 1px solid var(--line); }
a.pill { text-decoration: none; }
a.pill:hover { filter: brightness(1.15); }

.claim { display: grid; gap: 16px; margin-top: 40px; max-width: 46rem; }
.claim .contact__card h2 { display: flex; align-items: center; gap: 10px; }
.step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-2); color: #c9d1ff; font-size: 12px; font-weight: 600; flex: none; }
.claim__pick { display: grid; }
.claim__pick .winrow { grid-template-columns: 20px 36px minmax(0, 1fr) auto auto; }
.claim__pick .btn { height: 34px; }
.claim__code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: #0e0d18; border: 1px dashed #3a3955; }
.claim__code code { font: 600 clamp(19px, 2.8vw, 25px)/1 var(--font-mono); letter-spacing: .04em; color: var(--text); font-variant-numeric: tabular-nums; }
.claim__code .btn { margin-left: auto; }
.field { display: grid; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.field input, .field select { height: 44px; padding: 0 12px; border-radius: 10px; background: #0e0d18; border: 1px solid #2a2940; color: var(--text); font: 400 14px var(--font); width: 100%; min-width: 0; }
.field input { font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { outline: 0; border-color: var(--accent); background: #12111d; }
.field input[aria-invalid="true"] { border-color: var(--red); }
.fine { font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.fine a, .contact__card p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.checks { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.checks legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.55; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.check a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.claim__msg { font-size: 14px; line-height: 1.55; }
.claim__msg:empty { display: none; }
.claim__msg.is-error { color: var(--red); }
.claim__msg.is-ok { color: var(--green); }
.claim__done { border-color: #21c95e40; background: linear-gradient(180deg, #21c95e0d, transparent 45%), var(--surface); }

.rules { display: grid; gap: 16px; margin-top: 40px; max-width: 48rem; }
.rules ol.rules__list { display: grid; gap: 10px; counter-reset: rule; }
.rules ol.rules__list > li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.65; color: var(--muted); counter-increment: rule; }
.rules ol.rules__list > li::before { content: counter(rule); position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.rules b { color: var(--text); font-weight: 600; }

.admin { display: grid; gap: 16px; margin-top: 32px; }
.admin__bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.admin__bar .field { flex: 1 1 18rem; }
.admin__facts { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--muted); }
.admin__facts b { color: var(--text); font-weight: 500; }
.admin__win { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.admin__win .winrow { border-top: 0; padding: 0; }
.admin__kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 8px 20px; font-size: 13px; }
.admin__kv span { display: block; color: var(--muted); font-size: 11.5px; }
.admin__kv code, .admin__kv b { font: 500 13px var(--font); color: var(--text); overflow-wrap: anywhere; }
.admin__kv code { font-family: var(--font-mono); font-size: 12.5px; }
.admin__acts input:is([name="tx"], [name="wallet"]) { font-family: var(--font-mono); }
.field input.mono { font-family: var(--font-mono); font-size: 13.5px; }
.admin__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin__acts input { height: 36px; padding: 0 10px; border-radius: 8px; background: #0e0d18; border: 1px solid #2a2940; color: var(--text); font: 400 13px var(--font); flex: 1 1 14rem; min-width: 0; }
.admin__acts .btn { height: 36px; }

/* ── motion ────────────────────────────────────────────────────────────── */
/* Starting states exist only under html.motion (set in <head>, dropped if
   src/motion.js never loads, never set for reduced motion). */

.motion [data-anim] .draw {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur, .9s) cubic-bezier(.65, 0, .35, 1) calc((var(--d, 0) + var(--md, 0)) * 1s);
}
.motion [data-anim].in .draw { stroke-dashoffset: 0; }

/* the Rankfolio mark assembles bar by bar */
.motion [data-anim] .mb { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .65s cubic-bezier(.3, 1.45, .5, 1) calc(var(--d, 0) * 1s); }
.motion [data-anim].in .mb { transform: none; }

/* medals: disc pops, ring and ribbon draw, number appears */
.motion [data-anim] .md-disc { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.2); opacity: 0; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) calc(var(--md, 0) * 1s), opacity .2s calc(var(--md, 0) * 1s); }
.motion [data-anim].in .md-disc { transform: none; opacity: 1; }
.motion [data-anim] .md-num { opacity: 0; transition: opacity .35s calc((var(--md, 0) + .35) * 1s); }
.motion [data-anim].in .md-num { opacity: 1; }


/* hero copy and card rise in once */
/* The board: one choreographed reveal. The two cards slide in from opposite
   sides and meet, the + lands between them, then each card's rows settle in
   order. No blur and no scale on the cards, so edges stay crisp. */
.motion .duo-card[data-anim] .half {
  opacity: 0; translate: -48px 0;
  transition: opacity .7s var(--ease), translate 1s var(--ease), border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.motion .duo-card[data-anim] .half--rf { translate: 48px 0; transition-delay: .06s, .06s, 0s, 0s; }
.motion .duo-card.in .half { opacity: 1; translate: 0 0; }
.motion .duo-card[data-anim] .plus { opacity: 0; scale: .3; rotate: -135deg; transition: opacity .3s ease .5s, scale .7s cubic-bezier(.34, 1.56, .64, 1) .5s, rotate .7s var(--ease) .5s; }
.motion .duo-card.in .plus { opacity: 1; scale: 1; rotate: 0deg; }
.motion .duo-card[data-anim] :is(.half__head, .half__hero, .facts > div, .prizes li, .half__foot) {
  opacity: 0; translate: 0 12px;
  transition: opacity .55s var(--ease) var(--rd, .3s), translate .7s var(--ease) var(--rd, .3s), background-color .2s var(--ease);
}
.motion .duo-card.in :is(.half__head, .half__hero, .facts > div, .prizes li, .half__foot) { opacity: 1; translate: 0 0; }
.duo-card .half__head { --rd: .28s; }
.duo-card .half__hero { --rd: .38s; }
.duo-card .facts > div:nth-child(1), .duo-card .prizes li:nth-child(1) { --rd: .5s; }
.duo-card .facts > div:nth-child(2), .duo-card .prizes li:nth-child(2) { --rd: .58s; }
.duo-card .facts > div:nth-child(3), .duo-card .prizes li:nth-child(3) { --rd: .66s; }
.duo-card .facts > div:nth-child(4) { --rd: .74s; }
.duo-card .half__foot { --rd: .78s; }
/* once revealed, rows respond to hover immediately */
.motion .duo-card.in.settled :is(.facts > div, .prizes li) { transition: background-color .2s var(--ease); }
/* traders' faces arrive one after another, not in a single snap */
@keyframes face-in { from { opacity: 0; transform: translateX(-10px) scale(.8); } to { opacity: 1; transform: none; } }
.motion .duo-card.in .faces .av:not(.skel) { animation: face-in .55s var(--ease) both; }
.motion .duo-card.in .faces .av:not(.skel):nth-child(1) { animation-delay: .45s; }
.motion .duo-card.in .faces .av:not(.skel):nth-child(2) { animation-delay: .55s; }
.motion .duo-card.in .faces .av:not(.skel):nth-child(3) { animation-delay: .65s; }
.motion .duo-card.in.settled .faces .av:not(.skel) { animation-delay: 0s; }

/* Scroll reveals. "rise" fades and lifts text; "pop" also sharpens from a
   blur for cards and rows. They move with `translate`, and hover grows with
   `scale`, two separate properties, so a hover never cancels a reveal. Both
   share one transition list for the same reason. */
.motion [data-anim="rise"], .motion [data-anim="pop"] {
  --rev: calc(var(--d, 0) * 1s + var(--rd, 0s));
  transition:
    opacity .8s var(--ease) var(--rev),
    translate .9s var(--ease) var(--rev),
    filter .8s var(--ease) var(--rev),
    scale .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .3s var(--ease),
    background-color .25s var(--ease);
}
.motion [data-anim="rise"]:not(.in) { opacity: 0; translate: 0 18px; }
.motion [data-anim="pop"]:not(.in) { opacity: 0; translate: 0 28px; filter: blur(6px); }

/* Hover: things grow a touch, borders and shadows firm up. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pcard, .tcard, .empty-card, .hs-board, .hs-pool, .hs-payout, .hs-trade, .feeflow, .alloc-row, .qa, .glance, .band__stats > div, .toggle, .search {
    transition: scale .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease), background-color .25s var(--ease);
  }
  .pcard:hover, .empty-card:hover { scale: 1.02; border-color: var(--line-2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95); }
  .tcard:hover { scale: 1.01; border-color: var(--line-2); box-shadow: 0 30px 80px -44px rgba(0, 0, 0, .9); }
  .half:hover { border-color: #2f2e48; box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .9); }
  .half--rf:hover { border-color: #ffc74f52; }
  .facts > div, .prizes li { transition: background-color .2s var(--ease); }
  .facts > div:hover, .prizes li:hover { background: #17162a; }
  .alloc-row:hover { scale: 1.015; }
  .tcard .trow:hover { scale: 1.006; }
  .qa:hover { scale: 1.01; }
  .glance:hover, .band__stats > div:hover { scale: 1.03; }
  .toggle:hover, .search:hover { scale: 1.02; }
  .alloc-row, .trow { transform-origin: 50% 50%; }
}

/* external-link arrows nudge on hover */
.motion .ext path { transition: transform .3s var(--ease); }
.motion a:hover .ext path { transform: translate(1.5px, -1.5px); }

.motion .instant, .motion .instant * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .skel { animation: none; }
  .btn:hover, .btn:active { transform: none; }
  /* How it works: panels stack, nothing is driven by scrolling */
  .hs { height: auto !important; }
  .hs__sticky { position: static; height: auto; overflow: visible; padding-block: 104px 24px; gap: 28px; }
  .hs__viewport { overflow: visible; }
  .hs__track { flex-direction: column; transform: none !important; }
  .hs__panel { flex: none; min-height: 0; }
  .hs__panel .hs__num { color: var(--accent); }
  .hs__steps, .hs__progress { display: none; }
}

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* stacked cards rise instead of sliding in from the sides, so nothing starts off screen */
  .motion .duo-card[data-anim] .half, .motion .duo-card[data-anim] .half--rf { translate: 0 28px; }
  .motion .duo-card.in .half { translate: 0 0; }
  .hs__sticky { position: static; height: auto; overflow: visible; padding-block: 88px 24px; gap: 24px; }
  .hs__viewport { overflow: visible; }
  .hs__track { flex-direction: column; padding-inline: 16px; transform: none !important; }
  .hs__panel { flex: none; min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 28px 0; opacity: 1; }
  .hs__panel + .hs__panel { border-top: 1px solid var(--line); }
  .hs__num { font-size: 44px; color: var(--accent); }
  .hs__visual { grid-column: 1; grid-row: auto; }
  .hs__steps, .hs__progress { display: none; }
  .duo-card { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nav__links { display: none; }
  .nav__in { grid-template-columns: 1fr auto; }
  .nav__in > span:empty { display: none; }
  .nav__mobile, .nav__menu-btn { display: inline-flex; }
  .hero__in { grid-template-columns: minmax(0, 1fr); padding-top: 120px; gap: 36px; }
  /* stacked layout: the copy sits over the film, so darken top to bottom */
  .hero__shade { background: linear-gradient(180deg, rgba(6, 5, 16, .35) 0%, rgba(6, 5, 16, .72) 45%, rgba(6, 5, 16, .9) 100%); }
  .hero__media, .hero__video { background-position: 72% 60%; object-position: 72% 60%; }
  .pcard { max-width: 420px; }
  .sec__split { grid-template-columns: minmax(0, 1fr); }
  .sec__label { padding-top: 0; }
  .alloc-row { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; }
  .alloc-row__desc, .alloc-row__vol { display: none; }
  .lb .tcard__head, .lb .trow { grid-template-columns: 30px minmax(0, 1fr) auto 28px; }
  .lb .col-vol, .lb .col-hold, .lb .col-cut { display: none; }
  .nav:not(.nav--solid) .nav__right .nav__ca { display: none; }
  .lb__cut-sm { display: block; }
  .tdetail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__cards { grid-template-columns: minmax(0, 1fr); }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px 48px; }
}

@media (min-width: 1001px) {
  .nav__menu { display: none !important; }
}

@media (min-width: 1001px) and (max-width: 1099px) {
  .nav__links small { display: none; }
}

@media (max-width: 640px) {
  .container, .nav__in { padding-inline: 16px; }
  .nav__menu { padding-inline: 16px; }
  .nav__right .nav__fomo { display: none; }
  .nav:not(.nav--solid) .nav__right .nav__wallet { display: none; }
  .nav--solid .nav__back { font-size: 0; gap: 0; }
  .nav--solid .nav__back svg { width: 16px; height: 16px; }
  .nav--solid .nav__right .nav__ca { display: none; }
  .hero__in { padding: 110px 16px 48px; }
  .hero__sub { font-size: 15px; }
  .sec { padding-block: 72px; }
  .half { padding: 20px 18px 22px; }
  .band__stats { gap: 32px; }
  .tcard__head { display: none; }
  .rewards .trow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; padding-inline: 16px; }
  .rewards .col-chain { display: none; }
  .tdetail { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
  .lb .trow { padding-inline: 12px; gap: 10px; }
  .qa__inner { padding-right: 0; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  /* winners: the prize and its state drop under the name */
  .winrow, .claim__pick .winrow { grid-template-columns: 20px 36px minmax(0, 1fr); row-gap: 8px; }
  .winrow__prize { grid-column: 3; }
  .winrow > .pill, .winrow > .btn { grid-column: 3; justify-self: start; }
  .feeflow { padding-top: 24px; }
  .sharegrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sharegrid li { padding: 9px 8px; }
  .feeflow__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .contact__card { padding: 20px 18px; }
}