/* Fomo Yield.
   Layout grammar is resolv.xyz: a hairline column grid, one oversized serif
   headline, a coloured notice block riding the hero, product cards with a
   accent rule across the top, and a centred footer standing in the artwork.
   Palette and type are Fomo ETF's, so the two products read as one family:
   navy ground, periwinkle accent, Satoshi.
   Resolv is cream. This is not, deliberately: the family colour wins over the
   reference's ground. */

:root {
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #07061a;
  --navy: #0c0a20;
  --panel: #100e29;
  --panel-2: #171436;
  --line: rgba(243, 243, 255, 0.10);
  --line-soft: rgba(243, 243, 255, 0.055);

  --ink: #f3f3ff;
  --ink-2: rgba(243, 243, 255, 0.62);
  --dim: rgba(243, 243, 255, 0.40);

  --accent: #9d9dff;
  --accent-2: #6f6ff0;
  --accent-soft: rgba(157, 157, 255, 0.14);
  --coral: #ff8b83;
  --amber: #e0a05a;

  --pad: clamp(20px, 5vw, 56px);
  --max: 1280px;
  --r: 16px;
  --ease: cubic-bezier(.22, .8, .26, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` is a UA rule at the lowest specificity, so any class that sets its
   own display (.btn does) silently defeats it. Make the attribute win. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* The hairline rules that bracket every band are the reference's strongest
   structural tic: they make the page read as one ruled sheet. */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.ruled { border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }
.band { border-bottom: 1px solid var(--line-soft); }

/* ── nav ─────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(7, 6, 26, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 9px; font-size: 14.5px; font-weight: 500;
  border: 1px solid transparent; background: transparent; color: var(--ink);
  font-family: var(--font); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .18s var(--ease), border-color .18s var(--ease); }
.btn-primary { background: var(--accent-2); color: #fff; }
.btn-primary:hover { background: var(--accent); color: var(--navy); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: rgba(243, 243, 255, .06); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ── hero ────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 9vw, 118px) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .72fr);
  gap: clamp(32px, 6vw, 90px); align-items: start; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 6.1vw, 79px); line-height: 1.0; letter-spacing: -0.028em;
  text-wrap: balance;
}
.lede { margin: 22px 0 0; max-width: 30ch; font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.45; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }

/* The reference parks a coloured advisory in the hero. Ours carries the
   finding that shaped the product, which is the honest use of that slot. */
.notice { background: var(--accent-2); color: #fff; padding: 26px 26px 24px; border-radius: 2px; }
.notice h3 { margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.notice p { margin: 0; font-size: 16.5px; line-height: 1.36; }
.notice a { display: inline-block; margin-top: 18px; font-size: 16.5px;
  border-bottom: 1px solid rgba(255,255,255,.55); padding-bottom: 1px; }
.notice a:hover { border-bottom-color: #fff; }

/* ── artwork ─────────────────────────────────────────── */
.scape { position: relative; width: 100%; display: block; margin-top: clamp(28px, 5vw, 60px); }
.scape canvas { width: 100%; height: auto; display: block; }

/* ── sections ────────────────────────────────────────── */
.sec { padding: clamp(56px, 7vw, 96px) 0; }
.sec-head { margin-bottom: clamp(34px, 4vw, 52px); }
.sec-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 33px); font-weight: 500; letter-spacing: -0.024em; }
.sec-head p { margin: 6px 0 0; max-width: 46ch; font-size: clamp(16px, 1.7vw, 21px);
  color: var(--dim); line-height: 1.32; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: rgba(243, 243, 255, .022); padding: 34px clamp(22px, 3vw, 40px) 44px;
  border-top: 3px solid var(--bar); border-left: 1px solid var(--line-soft); }
.card:last-child { border-right: 1px solid var(--line-soft); }
@media (max-width: 860px) { .card:last-child { border-right: 0; } }
.card-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--bar);
  display: grid; place-items: center; margin-bottom: 42px; }
.card-ico svg { width: 20px; height: 20px; }
.card h3 { margin: 0 0 20px; font-size: clamp(19px, 2vw, 25px); font-weight: 400; letter-spacing: -0.02em; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.card li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); line-height: 1.35; }
.card li svg { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--dim); }
.card li > span { min-width: 0; }
.card li b { font-weight: 500; color: var(--ink); }

/* ── measured numbers ────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stat { padding: 26px 24px 30px; border-left: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.stat:first-child { border-left: 0; }
.stat .k { font-family: var(--mono); font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -0.03em; }
.stat .l { margin-top: 7px; font-size: 13.5px; color: var(--dim); line-height: 1.35; }
.stat .n { margin-top: 3px; font-size: 12.5px; color: rgba(243,243,255,.28); }

/* ── steps ───────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { background: var(--bg); padding: 30px 28px 34px; }
.step .num { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.step h4 { margin: 14px 0 8px; font-size: 19px; font-weight: 500; letter-spacing: -0.018em; }
.step p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }

/* ── limits ──────────────────────────────────────────── */
.limits { display: grid; gap: 0; }
.limit { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.limit .i { font-family: var(--mono); font-size: 13px; color: var(--coral); padding-top: 2px; }
.limit p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.limit b { color: var(--ink); font-weight: 500; }

/* ── footer ──────────────────────────────────────────── */
.foot { position: relative; padding: clamp(60px, 8vw, 96px) 0 0; text-align: center; overflow: hidden; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700;
  font-size: 19px; letter-spacing: -0.02em; }
.foot-brand img { width: 26px; height: 26px; border-radius: 7px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px;
  margin-top: 30px; font-size: 15px; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }
.foot-note { margin: 26px auto 0; max-width: 62ch; font-size: 13px; color: var(--dim); line-height: 1.5; }
.foot .scape { margin-top: clamp(34px, 5vw, 64px); }

/* ── motion ──────────────────────────────────────────────
   One curve and one distance for the whole page. Everything enters the same
   way, which is what keeps a lot of movement feeling like one deliberate
   gesture rather than a set of separate effects. Nothing loops, nothing
   re-animates on the way back up, nothing moves more than 18px. */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

/* The hero is not observed: it is above the fold on arrival, so it plays on
   load instead of waiting for an intersection that already happened. The app
   is the same situation, and it has no hero to scope to. */
.hero [data-reveal], .app [data-reveal] { transition-delay: calc(var(--d, 0ms) + 90ms); }
body.is-ready .hero [data-reveal],
body.is-ready .app [data-reveal] { opacity: 1; transform: none; }

/* The advisory arrives from the side, so it reads as a separate object landing
   on the page rather than another line of the headline. */
.hero .notice[data-reveal] { transform: translateY(16px) translateX(14px); }
body.is-ready .hero .notice[data-reveal] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Nav earns its rule only once the page has moved under it. */
.nav { border-bottom-color: transparent; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--line-soft); }

.nav-links a { position: relative; transition: color .2s var(--ease); }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.btn { transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.btn:active { transform: translateY(1px); }

/* Cards lift by a hair and their accent rule brightens. Any more and a page
   with two cards starts to feel like a toy. */
.card { transition: background-color .35s var(--ease); }
.card:hover { background: rgba(243, 243, 255, .045); }
.card-ico { transition: transform .35s var(--ease); }
.card:hover .card-ico { transform: translateY(-2px) scale(1.04); }

.stat { transition: background-color .3s var(--ease); }
.stat:hover { background: rgba(243, 243, 255, .022); }

.step { transition: background-color .3s var(--ease); }
.step:hover { background: #0b0920; }

.limit { transition: border-color .3s var(--ease); }
.limit:hover { border-bottom-color: var(--line); }

.foot-links a { transition: color .2s var(--ease); }

/* The counters are tabular so a number does not jitter while it counts. */
.stat .k { font-variant-numeric: tabular-nums; }

/* ── app ─────────────────────────────────────────────────
   Same tokens as the landing page. One type scale: 13 for meta rows, 15 for
   controls and body, 20 for the entered figure, mono reserved for numbers and
   identifiers only. Mono was previously carrying placeholder prose, which is
   what made the panel read as slop. */
.app { padding: clamp(40px, 7vw, 84px) 0 120px; }
.app-h1 { margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.026em; }
.app .lede { margin-top: 14px; max-width: 46ch; }

.acct { display: flex; align-items: center; gap: 8px; }
.pill { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  background: transparent; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.pill:hover { color: var(--ink); border-color: var(--accent); }

.pending { margin-top: 34px; padding: 20px 22px; border-radius: 2px;
  background: var(--accent-2); color: #fff; font-size: 15.5px; line-height: 1.45; max-width: 62ch; }

.vault-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-soft); margin: 38px 0 0; border: 1px solid var(--line-soft); }
@media (max-width: 760px) { .vault-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vault-stats > div { background: var(--bg); padding: 17px 18px 19px; display: grid; gap: 6px; }
.vs-k { font-family: var(--mono); font-size: clamp(16px, 1.9vw, 21px); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.vs-l { font-size: 12.5px; color: var(--dim); letter-spacing: -0.002em; }

.card-box { margin-top: 24px; max-width: 440px; border: 1px solid var(--line-soft);
  background: rgba(243, 243, 255, .022); padding: 20px; border-radius: 2px; }

/* One pill slides between the tabs rather than two backgrounds cross-fading. */
.tabs { position: relative; display: flex; gap: 4px; margin-bottom: 18px;
  border: 1px solid var(--line-soft); padding: 4px; border-radius: 11px; }
.tabs::before { content: ""; position: absolute; top: 4px; left: 4px; height: 34px;
  width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0));
  background: var(--accent-soft); border-radius: 8px;
  transition: transform .32s var(--ease), width .32s var(--ease); }
.tab { position: relative; z-index: 1; flex: 1; height: 34px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; color: var(--dim);
  font: 500 15px var(--font); letter-spacing: -0.01em; transition: color .2s var(--ease); }
.tab.is-on { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .tabs::before { transition: none; } }

.warn { margin-bottom: 14px; padding: 10px 12px; border-radius: 9px; font-size: 14px;
  background: rgba(255, 139, 131, .12); color: var(--coral); }

/* The unit sits in the field so the input holds only a number. */
.field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: 11px; padding: 0 8px 0 14px; height: 58px;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.field:focus-within { border-color: var(--accent); background: rgba(157, 157, 255, .04); }
.field-unit { font-size: 13px; font-weight: 500; color: var(--dim); letter-spacing: .01em; flex: none; }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink);
  font: 400 20px var(--mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: right; }
.field input::placeholder { color: rgba(243, 243, 255, .22); }
.mini { border: 1px solid var(--line); background: none; color: var(--ink-2); cursor: pointer;
  border-radius: 8px; height: 30px; padding: 0 11px; font: 500 12.5px var(--font); flex: none;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.mini:hover { color: var(--ink); border-color: var(--accent); }

.rows { margin-top: 12px; display: grid; gap: 7px; }
.row { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); }
.row span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
#preview-row span:last-child { color: var(--accent); }

.act { width: 100%; height: 50px; margin-top: 18px; font-size: 15px; border-radius: 11px; }
.act:disabled { opacity: .4; cursor: not-allowed; }
.fineprint { margin: 13px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.fineprint a { color: var(--ink-2); border-bottom: 1px solid var(--line); }

/* ── wallet modal ────────────────────────────────────────
   Choosing a wallet is a decision of its own, not a step inside the deposit
   form. It belongs in front of the page, launched from the header. */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-back { position: absolute; inset: 0; background: rgba(4, 3, 15, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s var(--ease); }
.modal.is-on .modal-back { opacity: 1; }
.modal-card { position: relative; width: 100%; max-width: 400px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .28s var(--ease), transform .28s var(--ease); }
.modal.is-on .modal-card { opacity: 1; transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -0.018em; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); cursor: pointer; font-size: 17px; line-height: 1;
  font-family: var(--font); transition: color .2s var(--ease), border-color .2s var(--ease); }
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }
.modal-note { margin: 16px 0 0; font-size: 12px; color: var(--dim); line-height: 1.55; }

.wallets { display: grid; gap: 8px; }
.wallet { justify-content: flex-start; height: 52px; gap: 12px; padding: 0 14px;
  border-radius: 11px; font-size: 15px; }
.wallet img { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.wallet .rdns { margin-left: auto; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.wallet:hover { border-color: var(--accent); }
.wallets .muted { color: var(--dim); font-size: 14px; margin: 0; }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  padding: 12px 16px; border-radius: 11px; font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 120; max-width: 90vw; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.bad { border-color: rgba(255, 139, 131, .5); color: var(--coral); }
.toast a { color: var(--accent); border-bottom: 1px solid var(--accent); margin-left: 6px; }