/* =========================================================
   Meme coin site template — stylesheet
   Colors, radius and fonts all come from config.json "theme".
   You should not need to edit this file to reskin the site.
   ========================================================= */

:root {
  /* Fallbacks only — app.js overwrites these from config.json */
  --primary: #ffc93c;
  --primary-contrast: #0a0d12;
  --secondary: #45d6e8;
  --secondary-contrast: #04141a;
  --bg: #070b11;
  --surface: #0e1620;
  --surface-alt: #131e2b;
  --border: rgba(255, 255, 255, 0.10);
  --text: #f2f6fb;
  --muted: #8ea3ba;
  --radius: 20px;
  --font-display: 'Trebuchet MS', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1120px;
  --gutter: clamp(18px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Background effects ---------- */

.bg-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-fx.is-off { display: none; }

.blob {
  position: absolute;
  width: 46vw;
  height: 46vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.20;
}

.blob--1 { top: -14vw; right: -10vw; background: var(--primary); }
.blob--2 { bottom: -18vw; left: -12vw; background: var(--secondary); opacity: 0.16; }

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

#app { position: relative; z-index: 1; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--primary);
  color: var(--primary-contrast);
  box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--primary) 85%, transparent);
}

.btn--secondary {
  background: var(--secondary);
  color: var(--secondary-contrast);
  box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--secondary) 70%, transparent);
}
.btn--secondary:hover {
  box-shadow: 0 14px 38px -8px color-mix(in srgb, var(--secondary) 85%, transparent);
}

.btn--ghost {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--secondary); color: var(--secondary); }

.btn--sm { padding: 10px 18px; font-size: 0.92rem; }

.btn.is-soon {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}
.btn.is-soon:hover { transform: none; }

/* "soon": false — looks like a live button, but has no destination yet. */
.btn.is-inert { cursor: default; }
.btn.is-inert:hover { transform: none; }

.btn__soon {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.icon { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-right: auto;
}

.nav__brand img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.nav__links { display: flex; gap: 26px; }

.nav__links a {
  font-weight: 500;
  color: var(--muted);
  transition: color 0.18s ease;
}
.nav__links a:hover { color: var(--primary); }

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  padding: 13px 0;
  background: var(--primary);
  color: var(--primary-contrast);
  border-block: 1px solid color-mix(in srgb, var(--primary) 60%, #000);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-speed, 30s) linear infinite;
}

.marquee__item {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-inline: 26px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Hero ---------- */

.hero { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 72px);
}

/* No logo configured: centre the copy instead of leaving a dead column. */
.hero__inner--solo {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.hero__inner--solo .hero__sub { margin-inline: auto; }
.hero__inner--solo .hero__actions { justify-content: center; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

.hero__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondary) 70%, transparent);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hero__title {
  font-size: clamp(3.4rem, 11vw, 6.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--primary);
  text-shadow: 0 0 48px color-mix(in srgb, var(--primary) 35%, transparent);
}

.hero__sub {
  margin: 20px 0 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.hero__art { position: relative; display: flex; justify-content: center; }

.hero__art img {
  width: min(100%, 460px);
  border: 1px solid var(--border);
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 24px 60px color-mix(in srgb, var(--primary) 30%, transparent));
}

@keyframes float {
  50% { transform: translateY(-16px); }
}

/* ---------- Contract address ---------- */

.ca { padding-bottom: clamp(40px, 6vw, 72px); }

.ca__box {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-alt) 92%, transparent));
}

.ca__meta { flex: 1 1 260px; min-width: 0; }

.ca__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.ca__value {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: clamp(0.82rem, 2.2vw, 1rem);
  color: var(--text);
  overflow-wrap: anywhere;
}

.ca__value.is-pending { color: var(--muted); font-style: italic; font-family: var(--font-body); }

.ca__badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: var(--secondary);
  vertical-align: middle;
}

.ca__actions { display: flex; gap: 10px; }

.ca__copy.is-done { background: var(--secondary); color: var(--secondary-contrast); }

/* ---------- Socials ---------- */

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-weight: 500;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.social:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.social.is-soon { opacity: 0.5; cursor: not-allowed; }
.social.is-soon:hover { transform: none; border-color: var(--border); color: inherit; }

/* ---------- Sections ---------- */

.section { padding: clamp(52px, 8vw, 96px) 0; }

.section__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }

.section__title {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  font-weight: 800;
}

.section__sub {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ---------- Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

/* Flex column with the value area flexing, so labels stay on a common
   baseline across the row even when one value wraps to two lines. */
.stat {
  display: flex;
  flex-direction: column;
  padding: 30px 22px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.stat__value {
  flex: 1;
  display: grid;
  place-items: center;
}

.stat:hover { border-color: var(--primary); transform: translateY(-4px); }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}

.stat__label {
  margin-top: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.step {
  position: relative;
  padding: 34px 26px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.step__num {
  position: absolute;
  top: -21px;
  left: 26px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-contrast);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
}

.step h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); }

/* ---------- Roadmap ---------- */

.roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.phase {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.phase__tag {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary) 15%, transparent);
  color: var(--secondary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.phase h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 14px; }

.phase ul { margin: 0; padding: 0; list-style: none; }

.phase li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 9px;
  color: var(--muted);
}

.phase li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

/* ---------- Roadmap: timeline layout + live progress ----------
   Only applies when config.json sets roadmap.layout to "timeline" and/or
   roadmap.progress.enabled. Without those the grid above is untouched. */

.phase__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* The tag carried its own spacing when it was the only thing up here. */
.phase__head .phase__tag { margin-bottom: 0; }

.phase__status {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.roadmap--timeline {
  display: block;
  padding-left: 56px;
}

.roadmap--timeline .phase {
  position: relative;
  margin-bottom: 18px;
}

.roadmap--timeline .phase:last-child { margin-bottom: 0; }

/* Rail sits at a fixed x; the node and connector are pinned to it. */
.phase__node {
  position: absolute;
  left: -45px;
  top: 30px;
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}

.phase__line {
  position: absolute;
  left: -35.5px;
  top: 52px;
  bottom: -48px;
  width: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--muted) 20%, transparent);
  overflow: hidden;
}

.phase__line > span {
  display: block;
  width: 100%;
  height: 0;
  background: var(--primary);
  transition: height 0.9s ease;
}

/* --- cleared --- */
.phase.is-done .phase__node {
  border-color: var(--primary);
  background: var(--primary);
}

.phase.is-done .phase__node::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--primary-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.phase.is-done .phase__status {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* --- in progress --- */
.phase.is-current { border-color: var(--primary); }

.phase.is-current .phase__node {
  border-color: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
  animation: pulse 2.2s ease-out infinite;
}

.phase.is-current .phase__status {
  color: var(--secondary);
  border-color: color-mix(in srgb, var(--secondary) 45%, transparent);
}

/* --- not reached yet. Dimmed with colour, not opacity, so it does not
       fight .reveal.is-in for the same property. --- */
.phase.is-locked h3 { color: var(--muted); }
.phase.is-locked li { opacity: 0.68; }
.phase.is-locked .phase__tag { opacity: 0.6; }

.phase__bar {
  display: none;
  position: relative;
  height: 6px;
  margin: 20px 0 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}

.phase.is-current .phase__bar { display: block; }

.phase__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.9s ease;
}

.phase__bar-text {
  position: absolute;
  top: 13px;
  left: 0;
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Live market cap readout above the track. */
.meter {
  width: fit-content;
  margin: 0 auto clamp(26px, 4vw, 42px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.meter__label {
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.meter__value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary);
}

.meter__value.is-loading,
.meter__value.is-error {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}

@media (max-width: 560px) {
  .roadmap--timeline { padding-left: 42px; }
  .phase__node { left: -34px; }
  .phase__line { left: -24.5px; }
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  padding: clamp(40px, 6vw, 64px) 0 40px;
  text-align: center;
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 22px;
}

.footer__brand img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.footer__disclaimer {
  max-width: 68ch;
  margin: 0 auto 22px;
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--muted);
}

.footer__copy { font-size: 0.85rem; color: var(--muted); opacity: 0.75; }

/* ---------- Logo shape helper ----------
   "circle" force-crops to a square so a wide logo file still renders as a
   round token. "rounded" / "square" keep the file's own aspect ratio, which
   is what you want for a wide wordmark or banner logo. */

.logo-shape--circle {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}
.logo-shape--rounded { border-radius: var(--radius); }
.logo-shape--square { border-radius: 0; }

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Setup / error panel ---------- */

.setup {
  max-width: 640px;
  margin: 12vh auto;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.setup h1 { font-size: 1.6rem; margin-bottom: 12px; }
.setup p { color: var(--muted); }

.setup pre {
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 80%, #000);
  color: var(--primary);
  font-size: 0.9rem;
  overflow-x: auto;
}

/* ---------- Verify page (verify.html) ----------------------------------
   Same tokens as the rest of the site. The three verdict colours are the
   only hard-coded ones — a scam warning has to read as a scam warning
   whatever the coin's palette happens to be.
------------------------------------------------------------------------ */

.vf {
  --ok: #3ddc97;
  --no: #ff5f57;
  --hmm: #ffc94a;
  position: relative;
  z-index: 1;
  padding: clamp(32px, 6vw, 64px) 0 clamp(48px, 8vw, 88px);
}

.vf__head { text-align: center; max-width: 640px; margin: 0 auto clamp(26px, 4vw, 40px); }

.vf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
}

.vf__head h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 14px; }
.vf__head p { margin: 0; color: var(--muted); font-size: 1.05rem; }

.vf__card {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vf__step {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.vf__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
}

.vf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 55%, transparent);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.vf-pill:hover { border-color: var(--secondary); transform: translateY(-1px); }

.vf-pill.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast);
}

.vf__form { display: flex; gap: 10px; }

.vf__input {
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
}

.vf__input::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.vf__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

.vf__go { flex: none; }

/* --- the answer --- */

.vf__result:empty { display: none; }

.vf__verdict {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
  padding: 20px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  animation: vf-pop 0.28s ease;
}

@keyframes vf-pop {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.vf__verdict.is-safe { --tone: var(--ok); }
.vf__verdict.is-danger { --tone: var(--no); }
.vf__verdict.is-warn { --tone: var(--hmm); }

.vf__verdict-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
  width: 84px;
  color: var(--tone);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.vf__verdict-mark .icon { width: 40px; height: 40px; }

.vf__verdict-body { flex: 1 1 260px; min-width: 0; }
.vf__verdict-body h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--tone); overflow-wrap: anywhere; }
.vf__verdict-body p { margin: 0 0 12px; color: var(--text); }
/* The button inside a verdict takes the verdict's colour — a tan "buy" button
   sitting inside a red scam warning reads as part of the warning. */
.vf__verdict-body .btn {
  margin-bottom: 4px;
  background: transparent;
  border-color: var(--tone);
  color: var(--tone);
  box-shadow: none;
}

.vf__verdict-body .btn:hover {
  background: color-mix(in srgb, var(--tone) 16%, transparent);
  box-shadow: none;
}

.vf__switched {
  font-size: 0.9rem !important;
  color: var(--muted) !important;
}

.vf__echo {
  margin: 12px 0 0 !important;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted) !important;
}

.vf__echo span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* --- the list the answer is checked against --- */

.vf__truth,
.vf__rules {
  max-width: 720px;
  margin: clamp(28px, 5vw, 44px) auto 0;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.vf__truth-title,
.vf__rules h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.vf__truth-list { margin: 0; padding: 0; list-style: none; }

.vf__truth-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.vf__truth-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.vf__truth-list a,
.vf__truth-list > li > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  overflow-wrap: anywhere;
}

.vf__truth-list a:hover { color: var(--secondary); }
.vf__truth-list .icon { width: 0.85em; height: 0.85em; opacity: 0.6; }
.vf__truth-list .is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; }
.vf__truth-list small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.88rem; }

.vf__truth-empty { margin: 0; color: var(--muted); }

.vf__truth-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

.vf__rules ul { margin: 0; padding: 0; list-style: none; }

.vf__rules li {
  position: relative;
  padding: 0 0 10px 26px;
  color: var(--muted);
}

.vf__rules li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--secondary);
}

.vf__rules li:last-child { padding-bottom: 0; }

@media (max-width: 560px) {
  .vf__form { flex-direction: column; }
  .vf__form .btn { width: 100%; }
  .vf__verdict-mark { flex-direction: row; width: auto; }
  .vf__verdict-mark .icon { width: 28px; height: 28px; }
}

/* ---------- Rewards page (rewards.html) --------------------------------
   Same tokens as the rest of the site. The three status colours are the only
   hard-coded ones, for the same reason the verify page hard-codes its
   verdicts: "rejected" has to read as rejected whatever the coin's palette
   happens to be.
------------------------------------------------------------------------ */

.rw-pill {
  --good: #3ddc97;
  --bad: #ff5f57;
  --waiting: #ffc94a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rw-pill.is-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 12%, transparent); }
.rw-pill.is-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.rw-pill.is-waiting { color: var(--waiting); border-color: color-mix(in srgb, var(--waiting) 45%, transparent); background: color-mix(in srgb, var(--waiting) 12%, transparent); }

/* A shorter hero than the front page: this one is a utility page, and the
   panel below it is what people actually came for. The front page's title
   clamp tops out at 5.5rem, which on a sentence-length headline pushed the
   join form a full screen below the fold — so it is capped harder here. */
.hero--compact { padding: clamp(30px, 6vw, 60px) 0 clamp(10px, 2vw, 20px); }
.hero--compact .hero__copy { max-width: 720px; }
.hero--compact .hero__title { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.08; }
.hero--compact .hero__sub { font-size: 1.02rem; }

/* --- the 10,000,000 cap, as a bar --- */

.rw-pool {
  max-width: 720px;
  margin-top: clamp(24px, 4vw, 34px);
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(8px);
}
.rw-pool__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rw-pool__value { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; color: var(--primary); line-height: 1; }
.rw-pool__label { color: var(--muted); font-size: 0.95rem; }
.rw-pool__bar {
  height: 10px;
  margin: 16px 0 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.rw-pool__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  /* Starts at whatever width the server reported, then eases if it changes. */
  transition: width 0.6s ease;
}
.rw-pool__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.9rem; }

/* --- the join / status panel --- */

.rw-panel {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.rw-panel--center { text-align: center; }
.rw-panel h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 10px; }
.rw-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rw-panel__head h3 { margin: 0; }

.rw-muted { color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
.rw-muted a { color: var(--secondary); }
.rw-muted .icon { vertical-align: -3px; margin-right: 4px; }

.rw-error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #ff5f57 45%, transparent);
  background: color-mix(in srgb, #ff5f57 12%, transparent);
  color: #ff5f57;
}

.rw-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.rw-actions .btn[disabled] { opacity: 0.6; cursor: progress; }

/* --- the handle form --- */

.rw-form { display: grid; gap: 14px; }
.rw-field { display: grid; gap: 7px; }
.rw-field > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.rw-field input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}
.rw-field input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent); outline-offset: 1px; }
.rw-field input::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }

/* --- registered accounts --- */

.rw-accounts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.rw-account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
}
.rw-account__handle { font-weight: 700; }
.rw-account .rw-muted { margin: 0; font-size: 0.85rem; }

/* --- the three numbers --- */

.rw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; }
.rw-stats > div {
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  text-align: center;
}
.rw-stat__value { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.rw-stat__label { display: block; margin-top: 4px; color: var(--muted); font-size: 0.82rem; }

.rw-payouts { margin-top: 18px; }
.rw-payouts summary { cursor: pointer; font-weight: 700; color: var(--secondary); }
.rw-payouts .rw-table { margin-top: 12px; }

/* --- leaderboard --- */

/* Its own scroll container: five columns will not fit a phone, and the page
   body must never scroll sideways to accommodate a table. */
.rw-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}
.rw-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rw-table th, .rw-table td { padding: 13px 16px; text-align: left; white-space: nowrap; }
.rw-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.rw-table tbody tr + tr { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rw-table td.rw-muted { white-space: normal; }
.rw-rank { font-family: var(--font-display); font-weight: 800; color: var(--primary); }
.rw-handle { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; }
.rw-table a { display: inline-flex; align-items: center; gap: 5px; color: var(--secondary); }

/* --- rules --- */

.rw-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.rw-rules li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  line-height: 1.55;
}
.rw-rules .icon { flex: none; margin-top: 3px; color: var(--primary); }

/* ---------- Roadmap page (roadmap.html) ------------------------------
   Deliberately thin: the timeline itself reuses .roadmap--timeline and the
   .phase states from the front page, so shipped/next/planned already read
   the same way here as the market-cap journey does there. What follows is
   only what that page does not already provide.
------------------------------------------------------------------------ */

.rm__timeline { padding-top: clamp(8px, 2vw, 18px); }

/* The connector below a shipped entry is filled, so the accent line runs from
   the first launch down to whatever is up next and then stops. That handover
   is the whole point of the page, and it should be visible from across the
   room rather than needing the badges to be read. */
.rm__item.is-done .phase__line > span { height: 100%; }

/* Dates carry the meaning on this page, so the tag gets the accent colour
   rather than the secondary one the front page uses for phase labels. */
.rm__item .phase__tag {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.rm__item h3 { margin-bottom: 0; }
.rm__item .rm__detail { margin: 10px 0 0; color: var(--muted); line-height: 1.55; }

/* A planned item is dimmed, but its date must stay legible — the date is the
   single thing a reader is scanning for. */
.rm__item.is-locked .phase__tag { opacity: 1; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.rm__item.is-locked h3 { color: var(--text); opacity: 0.82; }

/* --- the shipped / planned tally in the hero --- */

.rm__score {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 28px);
  padding: 14px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.rm__score-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.rm__score-label { color: var(--muted); font-size: 0.92rem; margin-right: 6px; }
.rm__score-sep {
  width: 1px;
  align-self: stretch;
  margin: 0 6px;
  background: var(--border);
}

.rm__empty {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 36px);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
}
.rm__actions { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__sub { max-width: none; margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__art { order: -1; }
  /* Keep the logo small enough that the headline and CTA stay above the fold. */
  .hero__art img { width: min(56%, 240px); }

  /* Nav links used to be hidden here. They are not, because the sticky nav is
     the only thing still on screen once the page scrolls, and on a phone the
     hero's verify button starts below the fold — which left no way to reach
     the scam checker at all. Keep this list short for the same reason. */
  .nav__links { gap: 18px; }
  .nav__links a { color: var(--text); padding: 6px 0; }

  .rw-stats { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .ca__box { flex-direction: column; align-items: stretch; }
  .ca__actions .btn { flex: 1; }
  .btn { padding: 13px 20px; }
  /* The logo mark carries the brand; the wordmark is what gives way so that
     both the link and the buy button still fit on one line. */
  .nav__brand span { display: none; }
  .nav__inner { gap: 14px; }
  .nav__links { gap: 14px; font-size: 0.95rem; }
  .roadmap--timeline { padding-left: 40px; }
  .rm__score { width: 100%; justify-content: center; }
  .rw-panel { padding: 20px 16px; }
  .rw-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}