/* ═══════════════════════════════════════════════════════════════════════════
   coinmidco.com — marketing site
   "Obsidian & Champagne" — the same design tokens as the Coinmidco wallet.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── Tokens (mirrors the wallet's src/index.css) ────────────────────────── */
:root {
  --bg:        #0b0a08;
  --bg-2:      #100e0b;
  --s1:        #14110e;
  --s2:        #1c1815;
  --s3:        #26201a;
  --border:    #2f2922;
  --border-2:  #453c31;

  --txt:       #f7f2e6;
  --txt-2:     #b3a894;
  --txt-3:     #8e8371;   /* muted, but still ≥5:1 on --s1 */

  --up:        #5fd3a0;
  --dn:        #e2736a;

  --gold:      #d9b65e;
  --gold-2:    #f3e2ac;
  --gold-3:    #8b6e24;
  --gold-soft: rgba(217, 182, 94, .10);
  --gold-line: rgba(217, 182, 94, .22);

  --grad-gold:      linear-gradient(135deg, #f6e7b4 0%, #d9b65e 44%, #a8873a 76%, #7c6320 100%);
  --grad-gold-text: linear-gradient(135deg, #f6e7b4 0%, #d9b65e 46%, #a8873a 100%);
  --grad-card:      linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,0) 48%);

  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .85);
  --nav-h: 74px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ── Ambient background ─────────────────────────────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.aurora::after {
  /* fine grain so the flat dark never bands */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .035;
  mix-blend-mode: overlay;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}
.orb-a { width: 620px; height: 620px; top: -240px; left: -160px; background: radial-gradient(circle, rgba(217,182,94,.34), transparent 68%); }
.orb-b { width: 520px; height: 520px; top: 120px; right: -200px; background: radial-gradient(circle, rgba(139,110,36,.30), transparent 70%); }
.orb-c { width: 720px; height: 720px; bottom: -320px; left: 30%; background: radial-gradient(circle, rgba(95,211,160,.09), transparent 70%); }
.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(217,182,94,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,182,94,.045) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section { padding: 104px 0; position: relative; }
.section--tight { padding: 74px 0; }
.center { text-align: center; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: #23180a; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 800;
}
.skip:focus { left: 0; }

/* ── Eyebrow / headings ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(95,211,160,.18); }
.h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.1vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.h3 { font-size: 1.075rem; font-weight: 800; letter-spacing: -.01em; }
.lede { font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--txt-2); line-height: 1.72; }
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head .h2 { margin: 20px 0 14px; }
/* One line per heading. The longest ("Nothing proprietary, everything verifiable") measures
   16.07 × font-size, which clears the .wrap width from 640px up; below that a single line would
   only fit at unreadable size, so it wraps normally on phones. Centred nowrap text overflows its
   box evenly on both sides, so widening past the 720px block keeps the heading centred. */
@media (min-width: 640px) {
  .section-head .h2 { white-space: nowrap; }
}
.gold-text {
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mono-meta {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3);
}

/* ── Brand mark ─────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand svg { flex-shrink: 0; }
.brand-word {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.brand-word em { font-style: normal; }
.brand-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; color: var(--txt-3); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px;
  border-radius: 13px;
  border: 1px solid transparent;
  font-size: 14.5px; font-weight: 800; letter-spacing: -.01em;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), opacity .18s, background .18s, border-color .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-gold {
  background: var(--grad-gold);
  color: #241a07;
  box-shadow: 0 10px 30px -10px rgba(217,182,94,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(217,182,94,.62), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost {
  background: rgba(255,255,255,.035);
  border-color: var(--border-2);
  color: var(--txt);
}
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: var(--gold-line); transform: translateY(-2px); }
.btn-sm { padding: 11px 18px; font-size: 13px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(11,10,8,.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav .wrap { display: flex; align-items: center; gap: 26px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 9px 13px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--txt-2);
  transition: color .16s, background .16s;
}
.nav-links a:hover { color: var(--txt); background: rgba(255,255,255,.05); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border-2);
  align-items: center; justify-content: center;
}
.drawer {
  position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 99;
  background: rgba(11,10,8,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px 22px;
  display: none;
}
.drawer.is-open { display: block; }
.drawer a {
  display: block; padding: 14px 12px; border-radius: 11px;
  font-size: 15px; font-weight: 700; color: var(--txt);
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 14px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: calc(var(--nav-h) + 76px) 0 84px; position: relative; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 60px; align-items: center; }
/* Headline: exactly two lines at every width. The longer line ("Your keys. Every chain.")
   measures 8.62 × font-size, so the sizes below keep it inside the column — full width while the
   hero is stacked, then ~0.47vw once it splits into two columns at 1041px. nowrap means it can
   physically never break onto a third line. */
.hero .h1 { margin: 22px 0 20px; font-size: clamp(1.75rem, 9.2vw, 4.5rem); white-space: nowrap; }
.hero .lede { max-width: 30em; }
.hero .btn-row { margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 12.5px; color: var(--txt-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-note svg { flex-shrink: 0; }

/* Four facts under the hero — 2-across so no value or label is split mid-line.
   The hero column is only ~520px wide once the phone mockup takes the right half,
   which is too narrow for four 115px cells ("BIP39 · BIP44" needs ~155px). */
.trust-strip {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px;
}
.trust-strip .k { font-size: 1.45rem; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.trust-strip .l { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); margin-top: 3px; }

/* ── Phone mockup ───────────────────────────────────────────────────────── */
.stage { position: relative; display: flex; justify-content: center; }
.stage-glow {
  position: absolute; inset: 8% 4% 4% 4%;
  background: radial-gradient(circle at 50% 40%, rgba(217,182,94,.22), transparent 62%);
  filter: blur(30px); z-index: 0;
}
.phone {
  position: relative; z-index: 1;
  width: min(330px, 84vw);
  border-radius: 44px;
  padding: 12px;
  background: linear-gradient(165deg, #3a3226 0%, #17130f 42%, #0d0b09 100%);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08);
  animation: float 7s ease-in-out infinite;
}
.phone::before {
  content: '';
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; border-radius: 0 0 14px 14px;
  background: #080706; z-index: 3;
}
.phone-screen {
  border-radius: 34px;
  background: radial-gradient(120% 60% at 50% 0%, #1a1511 0%, #0f0d0a 52%, #0b0a08 100%);
  padding: 34px 16px 18px;
  overflow: hidden;
  min-height: 560px;
  display: flex; flex-direction: column; gap: 13px;
}
.phone-status {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9.5px; font-weight: 800; color: var(--txt-3); letter-spacing: .06em;
}
.mini-card {
  border-radius: 18px;
  background: linear-gradient(150deg, #f7f2e6 0%, #e6dcc4 55%, #cfc3a4 100%);
  color: #241a07;
  padding: 16px 16px 18px;
  position: relative; overflow: hidden;
}
.mini-card .mini-label { font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .62; }
.mini-card .mini-bal { font-size: 25px; font-weight: 900; letter-spacing: -.03em; margin-top: 4px; }
.mini-card .mini-gain { font-size: 11px; font-weight: 800; color: #10532f; margin-top: 2px; }
.mini-card .mini-chip {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 900; letter-spacing: .1em;
  padding: 4px 8px; border-radius: 999px; background: rgba(36,26,7,.12);
}
.mini-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-action {
  border-radius: 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07);
  padding: 9px 4px; text-align: center;
}
.mini-action .ic {
  width: 24px; height: 24px; margin: 0 auto 5px; border-radius: 8px;
  background: var(--gold-soft); border: 1px solid var(--gold-line);
  display: flex; align-items: center; justify-content: center; color: var(--gold);
}
.mini-action .lb { font-size: 8.5px; font-weight: 800; color: var(--txt-2); letter-spacing: .04em; }
.mini-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.032); border: 1px solid rgba(255,255,255,.055);
}
.mini-row .coin {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
}
.mini-row .nm { font-size: 11.5px; font-weight: 800; }
.mini-row .sub { font-size: 9.5px; color: var(--txt-3); font-weight: 600; }
.mini-row .amt { margin-left: auto; text-align: right; }
.mini-row .amt .v { font-size: 11.5px; font-weight: 800; }
.mini-row .amt .c { font-size: 9.5px; font-weight: 700; }
.up { color: var(--up); }
.dn { color: var(--dn); }
.mini-spark { margin-top: auto; display: flex; align-items: flex-end; gap: 3px; height: 44px; opacity: .9; }
.mini-spark i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(217,182,94,.85), rgba(217,182,94,.12)); }
/* Floating badges used to sit over the phone mockup here ("Recovery phrase", "+12.0% APY").
   They were removed deliberately: an overlay that names a seed phrase on top of a wallet UI is the
   exact pattern phishing classifiers look for, so the hero now shows the mockup on its own. */

/* ── Asset marquee ──────────────────────────────────────────────────────── */
.marquee {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 20px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 12px; width: max-content; }
/* the loop is only perfect once main.js has duplicated the set — until then, hold still */
.marquee.is-ready .marquee-track { animation: slide 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.asset-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 9px; border-radius: 999px;
  background: rgba(255,255,255,.032); border: 1px solid var(--border);
  white-space: nowrap;
}
.asset-pill .coin { width: 24px; height: 24px; border-radius: 50%; }
.asset-pill .sym { font-size: 12.5px; font-weight: 800; }
.asset-pill .nm { font-size: 11.5px; color: var(--txt-3); font-weight: 600; }

/* ── Cards / features ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  position: relative;
  background: var(--s1);
  background-image: var(--grad-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px 24px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--gold-line); box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.card .ic {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold);
  margin-bottom: 18px;
}
.card h3 { margin-bottom: 9px; }
.card p { color: var(--txt-2); font-size: 14px; line-height: 1.68; }
.card .tag {
  position: absolute; top: 20px; right: 20px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-soft); border: 1px solid var(--gold-line);
  padding: 4px 9px; border-radius: 999px;
}
.card--feature { grid-column: span 2; }
.card--feature h3 { font-size: 1.3rem; }
.card--feature p { font-size: 14.5px; }

/* ── Stats band ─────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(217,182,94,.055), rgba(255,255,255,0) 55%), var(--s1);
  overflow: hidden;
}
.stat { padding: 30px 26px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
.stat .v { font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight: 700; letter-spacing: -.01em; }
.stat .l { font-size: 12px; color: var(--txt-2); font-weight: 600; margin-top: 4px; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { position: relative; padding: 28px 24px 26px; background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-lg); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step h3 { margin: 12px 0 8px; }
.step p { color: var(--txt-2); font-size: 14px; }

/* ── Comparison table ───────────────────────────────────────────────────── */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s1); }
table.compare { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare th, .compare td { padding: 17px 22px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
.compare thead th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); font-weight: 800; }
.compare thead th.hl { color: var(--gold-2); background: var(--gold-soft); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.hl { background: rgba(217,182,94,.055); font-weight: 700; }
.compare td:first-child { color: var(--txt-2); }
.compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.compare .yes { color: var(--up); }
.compare .no { color: var(--txt-3); }

/* ── Earn table ─────────────────────────────────────────────────────────── */
.earn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.earn-card {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 20px 18px; text-align: left;
  transition: border-color .2s, transform .2s var(--ease);
}
.earn-card:hover { border-color: var(--gold-line); transform: translateY(-3px); }
.earn-card .top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.earn-card .coin { width: 30px; height: 30px; border-radius: 50%; }
.earn-card .apy { font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; color: var(--gold-2); }
.earn-card .meta { font-size: 11.5px; color: var(--txt-3); font-weight: 600; margin-top: 2px; }

/* ── Security split ─────────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.checklist li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 0; }
.checklist .ic { width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; background: rgba(95,211,160,.12); border: 1px solid rgba(95,211,160,.28); color: var(--up); }
.checklist b { display: block; font-size: 14.5px; font-weight: 800; }
.checklist span { font-size: 13.5px; color: var(--txt-2); }
.vault {
  position: relative; border-radius: var(--r-xl); border: 1px solid var(--gold-line);
  background: radial-gradient(120% 80% at 50% 0%, rgba(217,182,94,.14), transparent 60%), var(--s1);
  padding: 34px 28px;
}
.vault-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px dashed rgba(217,182,94,.18); }
.vault-row:last-child { border-bottom: 0; }
.vault-row .n { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); width: 96px; flex-shrink: 0; }
.vault-row .bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.vault-row .bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad-gold); width: 0; transition: width 1.2s var(--ease); }
.vault.is-visible .vault-row .bar i { width: var(--w); }
.vault-key { margin-top: 22px; padding: 15px 16px; border-radius: 14px; background: rgba(11,10,8,.6); border: 1px solid var(--border); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; color: var(--txt-2); word-spacing: 4px; }
.vault-key b { color: var(--gold-2); }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.quote { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; }
.quote .stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 14px; }
.quote p { font-size: 14.5px; color: var(--txt); line-height: 1.7; }
.quote .who { display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.quote .av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 900; color: #241a07; background: var(--grad-gold); }
.quote .who b { display: block; font-size: 13px; }
.quote .who span:not(.av) { font-size: 11.5px; color: var(--txt-3); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details {
  background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .2s, background .2s;
}
.faq details[open] { border-color: var(--gold-line); background: var(--s2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 19px 22px; display: flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; margin-left: auto; flex-shrink: 0;
  width: 11px; height: 11px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .a { padding: 0 22px 21px 22px; color: var(--txt-2); font-size: 14px; line-height: 1.72; }

/* ── App / download band ────────────────────────────────────────────────── */
.band {
  position: relative; overflow: hidden;
  border: 1px solid var(--gold-line); border-radius: var(--r-xl);
  background: radial-gradient(130% 100% at 12% 0%, rgba(217,182,94,.16), transparent 58%), var(--s1);
  padding: 54px 46px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center;
}
.band .h2 { margin: 16px 0 14px; }
.soft-cta { display: grid; gap: 12px; }
.platform {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; border-radius: var(--r-md);
  background: rgba(11,10,8,.55); border: 1px solid var(--border);
  transition: border-color .2s, transform .2s var(--ease);
}
.platform:hover { border-color: var(--gold-line); transform: translateX(3px); }
.platform .ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); flex-shrink: 0; }
.platform b { display: block; font-size: 14px; }
.platform span { font-size: 11.5px; color: var(--txt-3); }
.platform .soon { margin-left: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-line); background: var(--gold-soft); padding: 4px 9px; border-radius: 999px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 62px 0 34px; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.footer h4 { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 14px; }
.footer li { margin-bottom: 10px; }
.footer a { font-size: 13.5px; color: var(--txt-2); transition: color .16s; }
.footer a:hover { color: var(--gold-2); }
.footer .blurb { font-size: 13.5px; color: var(--txt-2); max-width: 34ch; margin: 14px 0 20px; }
.socials { display: flex; gap: 9px; }
.socials a {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--txt-2);
  transition: color .16s, border-color .16s, transform .16s;
}
.socials a:hover { color: var(--gold); border-color: var(--gold-line); transform: translateY(-2px); }
.legal { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; font-size: 11.5px; color: var(--txt-3); }
.disclaimer { margin-top: 16px; font-size: 11.5px; color: var(--txt-3); line-height: 1.7; max-width: 100ch; }

/* ── Mobile sticky CTA ──────────────────────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: none; gap: 10px;
  padding: 10px; border-radius: 18px;
  background: rgba(11,10,8,.9); border: 1px solid var(--gold-line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.95);
}
.sticky-cta .btn { flex: 1; padding: 13px 16px; font-size: 13.5px; }

/* ── Reveal on scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse { animation: pulse-dot 1.8s ease-in-out infinite; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 52px; }
  .hero .lede { max-width: 42em; }
  .split { grid-template-columns: 1fr; gap: 38px; }
  .band { grid-template-columns: 1fr; padding: 42px 30px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Two-column hero only: the text column is ~47vw wide, so the headline ceiling drops to match */
@media (min-width: 1041px) {
  .hero .h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .section { padding: 78px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .card--feature { grid-column: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-bottom: 1px solid var(--border); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n+3) { border-bottom: 0; }
  .sticky-cta { display: flex; }
  .footer { padding-bottom: 92px; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .wrap { padding: 0 16px; }
  .section { padding: 64px 0; }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grid-4, .earn-grid { grid-template-columns: 1fr; }
  .card { padding: 22px 20px; }
  .btn-row .btn { width: 100%; }
  .band { padding: 34px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .quote { padding: 22px 20px; }
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   Coin icons — real brand logos served from assets/coins/ (32×32 circular
   badges, so the chip shape comes from the artwork). Sizes are set per context
   above; the artwork scales crisply at any size because it is SVG.
   ═══════════════════════════════════════════════════════════════════════════ */
img.coin {
  display: block; flex-shrink: 0; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES — page headers, prose, data tables, notes, tiles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Current-page state in the header nav */
.nav-links a.is-active { color: var(--gold-2); background: var(--gold-soft); }
.drawer a.is-active { color: var(--gold-2); }

/* Compact hero used by every page except the home page */
.page-hero { padding: calc(var(--nav-h) + 62px) 0 52px; }
.page-hero .h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); margin: 20px 0 16px; }
.page-hero .lede { max-width: 46em; }
.page-hero .btn-row { margin-top: 28px; }
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: var(--txt-3); margin-bottom: 20px;
}
.breadcrumb a { color: var(--txt-2); transition: color .16s; }
.breadcrumb a:hover { color: var(--gold-2); }
.breadcrumb span[aria-hidden] { opacity: .5; }

/* Long-form copy (security, earn, about, legal) */
.prose { max-width: 800px; }
.prose h2 {
  font-family: var(--font-display); font-size: clamp(1.55rem, 3vw, 2.05rem);
  font-weight: 600; margin: 46px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.02rem; font-weight: 800; margin: 30px 0 10px; }
.prose p { color: var(--txt-2); font-size: 15px; line-height: 1.78; margin: 0 0 15px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; color: var(--txt-2); font-size: 15px; line-height: 1.75; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--txt); font-weight: 700; }
.prose a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-line); }
.prose a:hover { text-decoration-color: var(--gold); }
.prose code, .step code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 7px; color: var(--gold-2);
}
.step code { font-size: 12.5px; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }

/* Panels & notes */
.panel { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px 26px; }
.panel--gold {
  border-color: var(--gold-line);
  background: radial-gradient(120% 90% at 8% 0%, rgba(217,182,94,.13), transparent 58%), var(--s1);
}
.panel h3 { margin-bottom: 10px; }
.note {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 17px 19px; border-radius: var(--r-md);
  background: rgba(217,182,94,.07); border: 1px solid var(--gold-line);
  font-size: 13.5px; line-height: 1.7; color: var(--txt-2);
}
.note svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.note--risk { background: rgba(226,115,106,.07); border-color: rgba(226,115,106,.28); }
.note--risk svg { color: var(--dn); }
.note b { color: var(--txt); }

/* Two-column layout for side-by-side panels */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* Generic data table (rates, requirements, standards) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--s1); }
table.data { width: 100%; border-collapse: collapse; min-width: 520px; }
table.data th, table.data td { padding: 15px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--border); }
table.data thead th { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); font-weight: 800; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td:first-child { color: var(--txt-2); }
table.data td b { color: var(--txt); }
table.data .num { font-weight: 900; color: var(--gold-2); font-size: 15px; }
table.data .pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold-2);
}

/* Compact highlight tiles (home page teasers) */
.tile { display: flex; gap: 15px; align-items: flex-start; }
.tile .ic {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--gold);
}
.tile h3 { margin-bottom: 7px; }
.tile p { color: var(--txt-2); font-size: 14px; }
.tile a { color: var(--gold-2); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.tile a:hover { gap: 10px; }

/* Cross-links at the end of a section or block */
.link-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(255,255,255,.035); border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--txt-2);
  transition: color .16s, border-color .16s, transform .16s;
}
.link-chip:hover { color: var(--gold-2); border-color: var(--gold-line); transform: translateY(-2px); }

/* 404 */
.notfound { text-align: center; padding: calc(var(--nav-h) + 96px) 0 96px; }
.notfound .code {
  font-family: var(--font-display); font-size: clamp(5rem, 16vw, 9rem); line-height: 1;
  background: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .page-hero { padding: calc(var(--nav-h) + 42px) 0 38px; }
}

/* Very narrow phones (320–380px): the two trust-strip columns get too small for the nowrap values,
   so step the type down rather than letting "Self-custody" spill out of its cell. */
@media (max-width: 380px) {
  .trust-strip { gap: 16px 14px; }
  .trust-strip .k { font-size: 1.2rem; }
}