/* FANOUT — Arc / Argus
   Dark, strong typography, colour only where it carries information.

   The page is cut into numbered BANDS, one per category of the project (how it
   works, live, your wallet, contract, the name, questions). Each band alternates
   background, has a sticky rail on the left with its number and label, and its
   content reveals as it scrolls into view. Motion is opt-out via
   prefers-reduced-motion and never hides content when JavaScript is off. */

:root {
  --bg:        #07090e;
  --bg-2:      #0c1017;
  --panel:     #111722;
  --panel-2:   #161d2b;
  --panel-3:   #1a2231;
  --line:      #1e2737;
  --line-soft: #172032;

  --ink:       #e8edf6;
  --ink-2:     #a3b0c4;
  --ink-3:     #6b7688;

  --accent:    #2775ca;   /* USDC */
  --accent-2:  #4e9bf0;
  --accent-dim:#132a46;
  --good:      #35c88a;
  --warn:      #e0a23c;

  --radius:    14px;
  --radius-sm: 9px;
  /* a largura acompanha a tela: em 1600px sobravam 260px de margem de cada lado */
  --maxw:      min(1180px, 94vw);
  --topbar-h:  72px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(.22, .61, .36, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The glow behind the hero drifts up a little slower than the page (parallax);
   --sy is the scroll offset, written by app.js, capped so it never runs away. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 70vh;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(39,117,202,.20), transparent 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(78,155,240,.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translateY(calc(var(--sy, 0) * -0.25px));
  opacity: calc(1 - var(--sy, 0) / 1400);
}

main, .nav, .foot, .sample-banner { position: relative; z-index: 1; }

img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .92em; }
.ta-r { text-align: right; }

/* ───────────────────────── reveal on scroll ─────────────────────── */

/* Only under html.js, so a page without scripts shows everything at once. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .reveal.in { opacity: 1; transform: none; }

/* Hero: reveal on LOAD, staggered top to bottom. `is-ready` is set on the first
   frame; `is-revealed` after the animation, so later transforms (parallax) win. */
.js [data-reveal]:not(.is-revealed) { opacity: 0; }
.is-ready [data-reveal]:not(.is-revealed) { animation: reveal .7s var(--ease-out) both; }
[data-reveal='badge']   { animation-delay: .05s; }
[data-reveal='slogan']  { animation-delay: .15s; }
[data-reveal='title']   { animation-delay: .25s; }
[data-reveal='sub']     { animation-delay: .40s; }
[data-reveal='doclink'] { animation-delay: .50s; }
[data-reveal='cta']     { animation-delay: .60s; }
[data-reveal='cue']     { animation-delay: .90s; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ─────────────────────── scroll progress bar ─────────────────────── */

.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 40;
  pointer-events: none;
}

/* ───────────────────────── sample banner ─────────────────── */

.sample-banner {
  background: linear-gradient(90deg, #3a2c10, #2a2113);
  border-bottom: 1px solid #4a3a18;
  color: #f0d9a8;
  font-size: 13.5px;
  padding: 11px 20px;
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
  text-align: center;
}
.sample-banner strong { color: #ffe9bd; }

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

/* The bar sticks; the .nav inside keeps its old shape so selection.html, which
   uses .nav without the wrapper, is untouched. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7,9,14,0);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.topbar.is-scrolled {
  background: rgba(7,9,14,.78);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.sample-banner:not([hidden]) + .nav { padding-top: 20px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-weight: 640;
  letter-spacing: .14em;
  font-size: 14px;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 26px; height: 26px; color: var(--accent-2); flex: none; }

.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--ink-2); position: relative; padding-bottom: 2px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .25s var(--ease-out);
}
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

/* ──────────────────────────── buttons ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }

/* o azul chapado sumia no fundo escuro: gradiente claro em cima e um brilho embaixo */
.btn-primary {
  background: linear-gradient(180deg, #5fadff, #2775ca);
  color: #fff;
  border-color: #6fb6ff;
  box-shadow: 0 2px 14px rgba(47,130,214,.38);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #7cbeff, #3a8ade);
  border-color: #8ec8ff;
  box-shadow: 0 4px 22px rgba(78,155,240,.55);
}
.btn-primary:active { box-shadow: 0 1px 8px rgba(47,130,214,.45); }

/* o da primeira tela é a ação principal do site: brilha mais que os outros */
.hero-check .btn-primary {
  box-shadow: 0 0 0 1px rgba(143,200,255,.35), 0 6px 26px rgba(63,150,240,.55);
}
.hero-check .btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(170,215,255,.5), 0 8px 34px rgba(90,175,255,.7);
}

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); border-color: #2b3a52; }

.btn-lg { padding: 14px 26px; font-size: 15px; }

.btn.is-connected {
  background: var(--accent-dim);
  border-color: #24456d;
  color: var(--accent-2);
  font-family: var(--mono);
  font-weight: 500;
}

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

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-block: 64px;
  padding-inline: 20px;
}

/* O olho da Argus: o arquivo do Twemoji (o mesmo desenho que aparece no Twitter),
   servido daqui. O caractere 👁 sozinho depende da fonte do sistema e no Windows sai
   chapado; como imagem fica igual em qualquer aparelho, e não some dentro do slogan,
   que é texto com gradiente recortado. */
.eye {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.17em;
  margin-left: .14em;
  filter: drop-shadow(0 0 6px rgba(78,155,240,.35));
}

.eyebrow {
  margin: 0 0 8px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.board__title {
  margin: 0;
  font-size: clamp(24px, 3.6vw, 34px);
  letter-spacing: -.024em;
  font-weight: 660;
  line-height: 1.15;
}

.board__sub {
  margin: 12px 0 0;
  color: var(--ink-2);
  max-width: 64ch;
  font-size: 15px;
}
.board__sub strong { color: var(--ink); font-weight: 620; }

.board__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.board__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 500 13px/1 var(--mono);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  white-space: nowrap;
}

.board__foot {
  margin: 16px 2px 0;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 70ch;
}

.pill {
  font: 500 12.5px/1 var(--mono);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  white-space: nowrap;
}

.statusdot, .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  flex: none;
}
.statusdot.on, .dot.on {
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(53,200,138,.16);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 0 5px rgba(53,200,138,.08); } }

/* ─────────────────────────────── bands ───────────────────────────── */

.band {
  position: relative;
  border-top: 1px solid var(--line-soft);
}
.band--alt { background: var(--bg-2); }

.band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 68px 20px;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* The rail sticks under the top bar while its band scrolls past — the reader
   always sees which category they are in. */
.band__rail {
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.band__n {
  font: 600 44px/1 var(--mono);
  letter-spacing: -.04em;
  color: var(--ink-3);
  opacity: .55;
}
.band__label {
  font: 600 12px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding-top: 4px;
  border-top: 2px solid var(--accent-2);
  width: fit-content;
}
.band__blurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.band__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font: 500 12.5px/1 var(--mono);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  width: fit-content;
}

.band__body { min-width: 0; }
.band__body > .section { max-width: none; margin: 0; padding: 0; }
.band__body > .section + .section {
  margin-top: 64px;
  padding-top: 64px;
  border-top: 1px dashed var(--line);
}

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

.section--hero {
  /* 291px de vazio sobrando na primeira tela viraram ~150: o topo continua arejado
     e a primeira faixa já aparece por baixo, convidando a rolar */
  padding-block: 40px 44px;
  text-align: center;
  min-height: min(760px, calc(100svh - var(--topbar-h)));
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__inner {
  /* moves at 85% of scroll speed and fades: the hero recedes as you leave it */
  transform: translateY(calc(var(--sy, 0) * .15px));
  opacity: calc(1 - var(--sy, 0) / 900);
  will-change: transform, opacity;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--line);
  background: rgba(17,23,34,.7);
  border-radius: 999px;
  font: 500 12.5px/1 var(--mono);
  color: var(--ink-2);
}

/* The slogan carries the promise; the headline under it carries the mechanism.
   Small and wide-tracked on purpose, so it reads as a tagline instead of
   competing with the H1 for the same job. */
.hero__slogan {
  margin: 30px auto 0;
  font: 700 clamp(15px, 2.4vw, 21px)/1.3 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #9fd0ff, var(--accent-2) 45%, #cfe6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(78,155,240,.45));
}

.hero__title {
  margin: 14px auto 0;
  max-width: 27ch;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 680;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* two short sentences now, not a paragraph: give them air and size */
.hero__sub {
  margin: 20px auto 0;
  max-width: 56ch;
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: -.01em;
  color: var(--ink-2);
}
.hero__sub strong { color: var(--ink); font-weight: 620; }

.hero__doclink {
  margin: 24px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid #24456d;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  font: 600 14.5px/1 var(--sans);
  transition: background .15s, border-color .15s, gap .15s;
}
.hero__doclink:hover {
  text-decoration: none;
  background: #17324f;
  border-color: #2f5a85;
  gap: 14px;
}
.hero__doclink svg { width: 16px; height: 16px; flex: none; }

.hero-cta {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* the wallet checker, right in the hero: paste, press, scroll to the answer */
.hero-check {
  display: flex;
  gap: 8px;
  flex: 0 1 520px;
  min-width: 0;
}
.hero-check__input {
  flex: 1 1 220px;
  min-width: 0;
  background: rgba(17,23,34,.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 20px;
  color: var(--ink);
  font: 400 14px/1 var(--mono);
  transition: border-color .15s, box-shadow .15s;
}
.hero-check__input:focus { outline: none; border-color: #2b4a6d; box-shadow: 0 0 0 3px rgba(39,117,202,.16); }
.hero-check__input::placeholder { color: var(--ink-3); font-family: var(--sans); }

/* a small mouse-wheel cue that bobs; disappears with the hero */
.hero__scrollcue {
  display: inline-flex;
  margin: 44px auto 0;
  width: 22px; height: 34px;
  border: 1.5px solid var(--ink-3);
  border-radius: 12px;
  justify-content: center;
  opacity: .7;
}
.hero__scrollcue:hover { text-decoration: none; opacity: 1; }
.hero__scrollcue span {
  width: 3px; height: 7px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--accent-2);
  animation: cue 1.6s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(10px); opacity: .2; }
}

/* ─────────────────────────── built on ────────────────────────── */

.trusted {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
}
.trusted__label {
  font: 600 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trusted__item { color: var(--ink); font-weight: 600; }
.trusted__item small { color: var(--ink-3); font-weight: 400; margin-left: 6px; font-size: 12.5px; }
/* separador é um traço fino, não um caractere: nenhum "·" no site */
.trusted__sep { width: 1px; height: 14px; background: var(--line); display: inline-block; }

/* ────────────────────────── how it works ────────────────────── */

.flow {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.flow__step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.flow__n {
  font: 640 12px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--accent-2);
}
.flow__step h3 {
  margin: 14px 0 9px;
  font-size: 17px;
  font-weight: 640;
  letter-spacing: -.012em;
}
.flow__step p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.flow__step strong { color: var(--ink); font-weight: 620; }
/* a way out of the card for the reader who wants the method, not the summary */
.flow__link {
  align-self: flex-start;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid #24456d;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent-2);
  font: 600 13px/1 var(--sans);
  transition: background .15s, border-color .15s, gap .15s;
}
.flow__link:hover { text-decoration: none; background: #17324f; border-color: #2f5a85; gap: 12px; }
.flow__link svg { width: 14px; height: 14px; flex: none; }

.flow__meta {
  margin-top: auto !important;
  padding-top: 16px;
  font-size: 13px !important;
  color: var(--ink-3) !important;
  border-top: 1px solid var(--line-soft);
}
.flow__meta strong { color: var(--accent-2) !important; font-family: var(--mono); font-size: .95em; }

/* A caveat the reader deserves before the pretty numbers. Amber rather than the
   accent blue: this is a "read this" box, not a feature. */
.note {
  margin: 24px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 14.5px;
  max-width: 76ch;
}
.note strong { color: var(--ink); font-weight: 620; }

.table-foot {
  margin: 14px 2px 0;
  font-size: 13px;
  color: var(--ink-3);
}

/* ──────────────────────── the name ──────────────────────────── */

.etymology {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.etym {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.etym h3 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.etym p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.etym em { color: var(--accent-2); font-style: normal; font-weight: 620; }
.etym strong { color: var(--ink); font-weight: 620; }
.etym__note {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px !important;
}

/* ─────────────────────── grid tables ─────────────────────── */

.ranking {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}

.rank__head,
.rank__row {
  display: grid;
  grid-template-columns: 38px minmax(120px, 1fr) 86px 118px 106px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}
.payouts__head,
.pay-row__top {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(120px, 1.5fr) 92px 104px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
}

.rank__head, .payouts__head {
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  font: 600 11px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.rank__row { border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.rank__row:last-child { border-bottom: 0; }
.rank__row:hover { background: rgba(255,255,255,.017); }

/* rows slide in from the left, one after the other, when a table is rendered */
.js .rank__row.reveal, .js .pay-row.reveal { transform: translateX(-14px); }
.js .rank__row.reveal.in, .js .pay-row.reveal.in { transform: none; }

.rank__n { color: var(--ink-3); font-family: var(--mono); }
.rank__sym { font-weight: 620; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank__sym a { color: var(--ink); }
.rank__sym a:hover { color: var(--accent-2); }
.rank__num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rank__empty { padding: 36px 18px; text-align: center; color: var(--ink-3); font-size: 14px; }

.tier {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10px/1.5 var(--mono);
  letter-spacing: .05em;
  flex: none;
}
.tier-core   { background: var(--accent-dim); color: var(--accent-2); }
.tier-filler { background: #1b2130; color: var(--ink-3); }

.age { color: var(--ink-2); }
.ok  { color: var(--good); }
.bad { color: var(--warn); }

/* ─────────────────── distribution stats ────────────── */

.payouts__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.payouts__stats--fees { margin-bottom: 26px; }

.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stat--countdown { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-color: #24344d; }
.stat__label { font-size: 12.5px; color: var(--ink-3); }
.stat__value {
  font: 640 25px/1.1 var(--sans);
  letter-spacing: -.022em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat--countdown .stat__value { font-family: var(--mono); font-size: 27px; }
.stat__hint { font-size: 12px; color: var(--ink-3); }

/* ───────────────────── total paid by coin ──────────────────── */

.paidtokens {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px;
  margin-bottom: 26px;
}
.paidtokens__title {
  margin: 0 0 16px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .04em;
  color: var(--ink-2);
}
.paidtokens__hint { color: var(--ink-3); font-weight: 400; margin-left: 8px; font-size: 12px; }
.paidtokens__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));   /* five a row, as asked */
  gap: 10px;
}
@media (max-width: 1000px) { .paidtokens__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .paidtokens__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.paidtoken {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  min-width: 0;
}
.paidtoken__sym { font: 620 13px/1.2 var(--sans); display: block; overflow-wrap: anywhere; }
.paidtoken__sym a { color: var(--ink); }
.paidtoken__sym a:hover { color: var(--accent-2); }
.paidtoken__usd { font: 600 16px/1.3 var(--mono); color: var(--accent-2); font-variant-numeric: tabular-nums; }
.paidtoken__amt { font-size: 11px; color: var(--ink-3); font-family: var(--mono); overflow-wrap: anywhere; }

/* ──────────────── expandable rounds (the heart) ────────────── */

.pay-row { border-bottom: 1px solid var(--line-soft); }
.pay-row:last-child { border-bottom: 0; }

.pay-row__top {
  width: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.pay-row__top:hover { background: rgba(255,255,255,.02); }

.pay-row__when { display: flex; align-items: center; gap: 9px; font-size: 14px; min-width: 0; }
.pay-row__caret {
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform .18s;
  flex: none;
  margin-right: 2px;
}
.pay-row.is-open .pay-row__caret { transform: rotate(45deg); }
.pay-row__round { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }

.pay-row__syms {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font: 500 12px/1.5 var(--mono);
  color: var(--ink-2);
  min-width: 0;
}
.pay-row__syms span {
  background: var(--panel-3);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.pay-row__more { color: var(--ink-3); }

.pay-row__holders,
.pay-row__usd {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.pay-row__usd { font-weight: 600; }

.pay-row__panel {
  background: var(--bg-2);
  border-top: 1px solid var(--line-soft);
  padding: 6px 18px 16px;
  animation: panel .22s var(--ease-out);
}
@keyframes panel { from { opacity: 0; transform: translateY(-4px); } }

.leg {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 118px 96px auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.leg:last-child { border-bottom: 0; }
.leg__sym { font-weight: 620; overflow-wrap: anywhere; }
.leg__amt, .leg__usd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-2);
}
.leg__usd { color: var(--ink); }
.leg__txs { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.tx {
  font: 500 11.5px/1 var(--mono);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--ink-2);
  white-space: nowrap;
}
.tx:hover { color: var(--accent-2); border-color: #2b4a6d; text-decoration: none; }
.tx--buy { border-color: #24456d; color: var(--accent-2); }
.tx--more { color: var(--ink-3); }

/* ──────────────────────── wallet checker ────────────────────── */

.checker { display: flex; gap: 10px; flex-wrap: wrap; }
.checker__input {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px;
  color: var(--ink);
  font: 400 14px/1 var(--mono);
}
.checker__input:focus { outline: none; border-color: #2b4a6d; box-shadow: 0 0 0 3px rgba(39,117,202,.14); }
.checker__input::placeholder { color: var(--ink-3); }

.checker__out {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 20px;
  animation: panel .25s var(--ease-out);
}
.checker__verdict { font-size: 15.5px; font-weight: 620; margin: 0 0 12px; }
.checker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 0;
}
.checker__grid div { min-width: 0; }
.checker__grid dt { font-size: 12px; color: var(--ink-3); }
.checker__grid dd { margin: 3px 0 0; font: 600 15px/1.3 var(--mono); overflow-wrap: anywhere; }

/* what the wallet received: one row per coin, live columns filled in after */
.wt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.wt__title {
  margin: 0 0 12px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  font: 600 13px/1.4 var(--sans);
  letter-spacing: .04em;
  color: var(--ink-2);
}
.wt__hint { color: var(--ink-3); font-weight: 400; font-size: 12px; font-family: var(--mono); }
.wt__table {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.wt__head, .wt__row {
  display: grid;
  grid-template-columns: minmax(120px, 1.3fr) 96px 104px minmax(120px, 1.1fr) 112px;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  font-size: 13.5px;
}
.wt__head {
  background: var(--panel-2);
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wt__row { border-top: 1px solid var(--line-soft); }
.wt__row:hover { background: rgba(255,255,255,.017); }
.wt__sym { font-weight: 620; min-width: 0; }
.wt__sym a { color: var(--ink); }
.wt__sym a:hover { color: var(--accent-2); }
.wt__num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wt__sub { display: block; font: 400 11px/1.4 var(--mono); color: var(--ink-3); }
.wt__row.is-sold .wt__hold { color: var(--ink-3); }
.wt__foot { margin: 10px 2px 0; font-size: 12px; color: var(--ink-3); max-width: 76ch; }
.wt__warn { color: var(--warn); }
.wt__again {
  border: 1px solid #2b4a6d;
  background: var(--accent-dim);
  color: var(--accent-2);
  border-radius: 999px;
  padding: 4px 12px;
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  margin-right: 6px;
}
.wt__again:hover { background: #17324f; }

/* ──────────────────────────── contract ───────────────────────── */

.contract__title {
  margin: 0 0 18px;
  font-size: clamp(22px, 3.2vw, 30px);
  letter-spacing: -.022em;
  font-weight: 660;
}
.contract__box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.contract__addr { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13.5px; }
.contract__warn { margin: 14px 2px 0; font-size: 13px; color: var(--warn); max-width: 64ch; }

.facts {
  margin: 26px 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.facts > div {
  background: var(--panel);
  padding: 17px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.facts dt { color: var(--ink-3); font-size: 13.5px; }
.facts dd { margin: 0; font-size: 14px; text-align: right; }

/* ──────────────────────────── questions ──────────────────────── */

.faq { display: grid; gap: 10px; }
.faq__empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.faq__item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.faq__item[open] { border-color: #2b3a52; }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-weight: 620;
  font-size: 15px;
  line-height: 1.45;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__q { color: var(--accent-2); }
.faq__n { font: 600 12px/1.7 var(--mono); color: var(--accent-2); flex: none; }
.faq__q { flex: 1 1 auto; min-width: 0; transition: color .15s; }
.faq__chev {
  flex: none;
  width: 9px; height: 9px;
  margin: 6px 4px 0 6px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq__item[open] .faq__chev { transform: rotate(-135deg); margin-top: 10px; }
.faq__a {
  padding: 0 20px 18px 46px;
  color: var(--ink-2);
  font-size: 14.5px;
  animation: panel .25s var(--ease-out);
}
.faq__a p { margin: 0 0 10px; }
.faq__a p:last-of-type { margin-bottom: 0; }
.faq__meta { display: block; margin-top: 10px; font: 500 11.5px/1 var(--mono); color: var(--ink-3); }

.ask {
  margin-top: 28px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.ask__label { display: block; margin: 6px 0 8px; font-size: 14px; font-weight: 600; }
.ask__text, .ask__from {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 400 14.5px/1.5 var(--sans);
  padding: 12px 14px;
  resize: vertical;
}
.ask__text:focus, .ask__from:focus { outline: none; border-color: #2b4a6d; box-shadow: 0 0 0 3px rgba(39,117,202,.14); }
.ask__text::placeholder, .ask__from::placeholder { color: var(--ink-3); }
.ask__row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.ask__from { flex: 1 1 260px; }
.ask__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask__hint { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3); max-width: 70ch; }
.ask__hint.ok { color: var(--good); }
.ask__hint.bad { color: var(--warn); }

/* ────────────────────────── back to top ──────────────────────── */

.totop {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(17,23,34,.86);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 35;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), color .15s;
}
.totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { color: var(--accent-2); }
.totop:active { transform: scale(.94); }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__track { fill: none; stroke: var(--line); stroke-width: 2; }
.totop__bar {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 138.23;   /* 2π·22 */
  stroke-dashoffset: 138.23;
  transition: stroke-dashoffset .12s linear;
}
.totop__arrow { width: 18px; height: 18px; position: relative; }

/* ───────────────────────────── footer ────────────────────────── */

.foot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px 20px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3);
  font-size: 13.5px;
  text-align: center;
}
.foot p { margin: 0 auto; max-width: 62ch; }
.foot-links { margin-top: 14px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* :empty porque só os separadores são vazios — um span com conteúdo (o olho da
   Argus) não pode virar um traço de 1px */
.foot-links span:empty { width: 1px; height: 12px; background: var(--line); display: inline-block; align-self: center; }

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

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .etymology { grid-template-columns: 1fr; }
  .payouts__stats { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }

  .band__inner { grid-template-columns: 1fr; gap: 26px; padding-block: 56px; }
  .band__rail {
    position: static;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
  }
  .band__n { font-size: 30px; }
  .band__blurb { flex-basis: 100%; }
  .band__status { margin-top: 0; }
  .band__body > .section + .section { margin-top: 48px; padding-top: 48px; }
}

@media (max-width: 720px) {
  :root { --topbar-h: 104px; }
  .nav { gap: 12px; padding: 14px 16px 10px; flex-wrap: wrap; }
  /* the section links become a scrollable strip under the brand row */
  .nav-links {
    order: 3;
    flex: 1 1 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: none; }
  #connect { margin-left: auto; }

  .section { padding-block: 46px; padding-inline: 16px; }
  .section--hero { min-height: 0; padding-block: 36px 40px; }
  .hero__scrollcue { display: none; }
  .band__inner { padding-inline: 16px; }
  .trusted { padding-inline: 16px; gap: 10px; }
  .foot { padding-inline: 16px; }
  .hero-cta .btn { width: 100%; }
  .hero-check { flex: 1 1 100%; flex-direction: column; }
  .hero-check__input { flex: 0 0 auto; width: 100%; }   /* in a column, a flex-basis is HEIGHT */
  .facts > div { flex-direction: column; gap: 4px; }

  /* the received-coins table becomes labelled cards */
  .wt__head { display: none; }
  .wt__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "sym sym"
      "recv pay"
      "hold mcap";
    row-gap: 10px;
    padding: 12px 14px;
  }
  .wt__row > span:nth-child(1) { grid-area: sym; }
  .wt__row > span:nth-child(2) { grid-area: recv; }
  .wt__row > span:nth-child(3) { grid-area: pay; }
  .wt__row > span:nth-child(4) { grid-area: hold; }
  .wt__row > span:nth-child(5) { grid-area: mcap; }
  .wt__num { text-align: left; }
  .wt__num::before {
    content: attr(data-label);
    display: block;
    font: 600 10px/1.6 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .facts dd { text-align: left; }
  .totop { right: 14px; width: 44px; height: 44px; }
  .faq__a { padding-left: 20px; }

  /* both grids become readable lists, with no sideways scroll */
  .rank__head, .payouts__head { display: none; }

  .rank__row {
    grid-template-columns: 26px 1fr auto;
    grid-template-areas:
      "n sym sym"
      ". age buy"
      ". net net";
    row-gap: 4px;
    padding: 14px 16px;
  }
  .rank__row .rank__n   { grid-area: n; align-self: start; }
  .rank__row .rank__sym { grid-area: sym; }
  .rank__row .r-age     { grid-area: age; text-align: left; font-size: 12.5px; color: var(--ink-3); }
  .rank__row .r-net     { grid-area: net; text-align: left; font-size: 12.5px; color: var(--ink-3); }
  .rank__row .r-buy     { grid-area: buy; text-align: right; }

  .pay-row__top {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "when usd"
      "syms syms"
      "hold hold";
    row-gap: 8px;
    padding: 14px 16px;
  }
  .pay-row__when    { grid-area: when; }
  .pay-row__usd     { grid-area: usd; }
  .pay-row__syms    { grid-area: syms; }
  .pay-row__holders { grid-area: hold; text-align: left; font-size: 12.5px; color: var(--ink-3); }

  .pay-row__panel { padding-inline: 16px; }
  .leg {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "sym usd"
      "amt amt"
      "txs txs";
    row-gap: 5px;
  }
  .leg__sym { grid-area: sym; }
  .leg__usd { grid-area: usd; }
  .leg__amt { grid-area: amt; text-align: left; font-size: 12px; }
  .leg__txs { grid-area: txs; justify-content: flex-start; margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .js .reveal, .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__inner, body::before { transform: none !important; opacity: 1 !important; }
}