/* =========================================================================
   Plutus Crypto — "The Mint"
   Colour is taken from the logo: imperial purple ground, struck gold accent,
   silver for headlines. Status colours sit apart from gold on purpose, so a
   payment state can never be mistaken for a decorative highlight.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ground and surfaces */
  --ink: #08010F;
  --ink-2: #0D0219;
  --imperial: #16022E;
  --imperial-2: #1F0440;
  --imperial-3: #2C0757;

  /* brand */
  --porphyry: #8B2BD9;
  --porphyry-lit: #B446FF;
  --gold: #E4B23F;
  --gold-lit: #FBEBB6;
  --gold-deep: #8A5B0C;

  /* type */
  --silver: #F2EFF8;
  --muted: #A294BC;      /* grey biased toward the purple ground */
  --faint: #6F6188;

  /* state, deliberately not gold */
  --ok: #45DE95;
  --wait: #74B8FF;
  --dead: #FF6E8E;

  --line: rgba(228, 178, 63, 0.18);
  --line-soft: rgba(162, 148, 188, 0.16);

  --sans: "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono",
          Menlo, Consolas, monospace;

  --frame: 1180px;
  --radius: 14px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ambient light: one purple bloom, one gold ember, both very slow */
body::before {
  content: "";
  position: fixed;
  inset: -30vh -20vw;
  z-index: -2;
  background:
    radial-gradient(48vw 48vw at 78% 6%, rgba(139, 43, 217, 0.30), transparent 62%),
    radial-gradient(38vw 38vw at 8% 34%, rgba(228, 178, 63, 0.10), transparent 60%),
    radial-gradient(60vw 40vw at 50% 110%, rgba(80, 20, 140, 0.28), transparent 65%);
  animation: drift 34s ease-in-out infinite alternate;
  pointer-events: none;
}

/* fine grain so the flat dark never looks like plastic */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

/* ---------------------------------------------------------------- type ---- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  line-height: 1.04;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

.display {
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* struck metal: bright face, dark edge below */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 2px 22px rgba(139, 43, 217, 0.25);
}

.gold-text {
  background: linear-gradient(178deg, var(--gold-lit) 4%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

p { margin: 0; }

.lede { font-size: 1.075rem; color: var(--muted); max-width: 62ch; }

.eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------ structure --- */

.frame {
  width: 100%;
  max-width: var(--frame);
  margin-inline: auto;
  padding-inline: 22px;
}

section { position: relative; padding-block: clamp(72px, 9vw, 128px); }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 46px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

/* the milled edge of a coin, used where sections meet */
.reeded {
  height: 3px;
  background-image: repeating-linear-gradient(90deg,
    rgba(228, 178, 63, 0.55) 0 1px, transparent 1px 6px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.5;
}

/* a struck panel: light catches the top edge, the body sinks away */
.struck {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 34%),
    linear-gradient(168deg, var(--imperial-2), var(--imperial) 62%, var(--ink-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.struck::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 235, 182, 0.6), transparent);
  border-radius: inherit;
}

/* ------------------------------------------------------------- controls --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
              border-color 0.18s ease, color 0.18s ease;
}

.btn-gold {
  background: linear-gradient(180deg, var(--gold-lit), var(--gold) 52%, #C08A1E);
  color: #2A1600;
  box-shadow: 0 10px 30px -10px rgba(228, 178, 63, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(228, 178, 63, 0.75); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-soft);
  color: var(--silver);
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(228, 178, 63, 0.09); }

.btn-quiet {
  background: transparent;
  border-color: var(--line-soft);
  color: var(--muted);
  padding: 9px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.btn-quiet:hover { color: var(--silver); border-color: var(--porphyry-lit); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-gold { color: var(--gold); border-color: rgba(228, 178, 63, 0.35); background: rgba(228, 178, 63, 0.08); }
.chip-ok   { color: var(--ok);   border-color: rgba(69, 222, 149, 0.32); background: rgba(69, 222, 149, 0.08); }
.chip-wait { color: var(--wait); border-color: rgba(116, 184, 255, 0.32); background: rgba(116, 184, 255, 0.08); }
.chip-dead { color: var(--dead); border-color: rgba(255, 110, 142, 0.32); background: rgba(255, 110, 142, 0.08); }

/* --------------------------------------------------------------- header --- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px) saturate(140%);
  background: rgba(8, 1, 15, 0.72);
  border-bottom: 1px solid var(--line-soft);
}

.masthead .frame {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 68px;
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: 6px; }
.brand img.coin { width: 34px; height: 34px; filter: drop-shadow(0 3px 10px rgba(228, 178, 63, 0.4)); }
.brand img.mark { height: 19px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  transition: color 0.16s ease, background 0.16s ease;
}
.nav a:hover, .nav a.current { color: var(--silver); background: rgba(255, 255, 255, 0.05); }


/* ----------------------------------------------------------------- hero --- */

.hero { padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.hero .lede { margin-top: 22px; font-size: 1.125rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  color: var(--muted);
}
.hero-proof b { color: var(--silver); font-variant-numeric: tabular-nums; }

.hero-stage { position: relative; }

.coin-halo {
  position: absolute;
  inset: -27% -5% auto auto;
  width: 190px;
  filter: drop-shadow(0 24px 50px rgba(228, 178, 63, 0.34));
  animation: bob 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(3deg); }
}

/* ---------------------------------------------------------------- ticker -- */

.ticker {
  border-block: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  padding-block: 13px;
}
.ticker-track { display: flex; gap: 40px; width: max-content; animation: slide 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tick { display: flex; align-items: baseline; gap: 9px; font-size: 0.8125rem; white-space: nowrap; }
.tick .sym { font-weight: 800; letter-spacing: 0.04em; }
.tick .px  { font-family: var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.tick .mv  { font-family: var(--mono); font-size: 0.75rem; }
.tick .up   { color: var(--ok); }
.tick .down { color: var(--dead); }

/* ---------------------------------------------------------------- cards --- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card { padding: 26px; }
.card h3 { font-size: 1.075rem; margin-bottom: 9px; }
.card p { color: var(--muted); font-size: 0.9375rem; }

.card-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: 16px;
  background: linear-gradient(160deg, rgba(228, 178, 63, 0.22), rgba(139, 43, 217, 0.22));
  border: 1px solid var(--line);
  color: var(--gold);
}
.card-icon svg { width: 19px; height: 19px; }

.card-link {
  display: block;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card-link:hover { transform: translateY(-3px); border-color: rgba(228, 178, 63, 0.42); }

/* --------------------------------------------------------------- steps ---- */

.steps { counter-reset: step; display: grid; gap: 2px; }
.step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  padding: 24px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--gold);
  padding-top: 4px;
  letter-spacing: 0.08em;
}
.step h3 { font-size: 1.125rem; margin-bottom: 7px; }
.step p { color: var(--muted); font-size: 0.9375rem; max-width: 66ch; }

/* --------------------------------------------------------------- tables --- */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  /* a table wider than the screen needs to say so, otherwise a phone reader
     assumes the last column simply got cut off */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
}

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(162, 148, 188, 0.09);
  color: var(--muted);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr.fresh { animation: landed 1.6s ease; }
@keyframes landed {
  0%   { background: rgba(228, 178, 63, 0.20); }
  100% { background: transparent; }
}
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td strong { color: var(--silver); font-weight: 650; }

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

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.seen { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- footer -- */

.footer { border-top: 1px solid var(--line-soft); padding-block: 56px 34px; background: rgba(0, 0, 0, 0.34); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; }
.footer h4 { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--muted); font-size: 0.875rem; }
.footer a:hover { color: var(--gold); }
.footer-note {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  color: var(--faint); font-size: 0.8125rem;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .coin-halo { width: 130px; inset: -18% -2% auto auto; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* the floating coin has nowhere to float once the hero stacks, and it lands
     on top of the checkout card, so the one in the story section carries it */
  .coin-halo { display: none; }
  .hero-proof { gap: 8px 18px; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr; }
}

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

/* =========================================================================
   Checkout, terminal and merchant dashboard.
   These screens are operated rather than read, so state is carried by shape
   and colour together: a pill, a ring, a stripe — never colour alone.
   ========================================================================= */

/* ------------------------------------------------------------- workbench -- */

.bench { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 12px;
        background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-soft);
        width: max-content; max-width: 100%; }
.tab {
  padding: 9px 16px; border-radius: 8px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.tab[aria-selected="true"] { background: linear-gradient(180deg, var(--gold-lit), var(--gold)); color: #2A1600; }
.tab:hover:not([aria-selected="true"]) { color: var(--silver); }

.panel-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.panel-title h3 { font-size: 0.9375rem; }
.panel-title .eyebrow { font-size: 0.625rem; }

.panel-body { padding: 20px; display: grid; gap: 16px; }

.field { display: grid; gap: 7px; }
.field label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }

.input, .select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--silver);
  font: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(228, 178, 63, 0.16);
}
.input.mono { font-family: var(--mono); }

.amount-field { position: relative; }
.amount-field .input { padding-left: 40px; font-family: var(--mono); font-size: 1.375rem; font-weight: 700; }
.amount-field .cur {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-weight: 800; font-size: 1.125rem; pointer-events: none;
}

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  padding: 8px 13px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.3); color: var(--muted);
  font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer;
  transition: all 0.16s ease;
}
.seg button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(228, 178, 63, 0.12); }

/* ---------------------------------------------------------------- assets -- */

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }

.asset {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: 11px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer; text-align: left;
  font: inherit; color: var(--silver);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.asset:hover { transform: translateY(-2px); border-color: rgba(228, 178, 63, 0.4); }
.asset[aria-pressed="true"] { border-color: var(--gold); background: rgba(228, 178, 63, 0.1); }

.asset .glyph {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: -0.02em;
  color: #0B0114;
}
.asset .meta { display: grid; gap: 1px; min-width: 0; }
.asset .name { font-size: 0.8125rem; font-weight: 700; }
.asset .net  { font-size: 0.6875rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------------------- checkout -- */

.checkout { display: grid; gap: 0; overflow: hidden; }

.checkout-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(228, 178, 63, 0.08), transparent);
}
.checkout-head .who { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--muted); }
.checkout-head img { width: 26px; height: 26px; }

.pay-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pay-amount .crypto {
  font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700;
  color: var(--gold-lit); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.pay-amount .fiat { color: var(--muted); font-size: 0.875rem; }

.qr-frame {
  display: grid; place-items: center; gap: 12px;
  padding: 18px; border-radius: 14px;
  background: linear-gradient(180deg, #FBF8FF, #EFE9F7);
  border: 1px solid rgba(228, 178, 63, 0.5);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
  width: max-content; margin-inline: auto;
}
.qr-frame canvas { display: block; border-radius: 6px; }
.qr-frame .hint { font-size: 0.6875rem; color: #4B3A66; font-weight: 600; letter-spacing: 0.03em; }

.addr {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-soft);
}
.addr code {
  font-family: var(--mono); font-size: 0.75rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.addr button { flex: none; }

/* rate lock */
.lock { display: grid; gap: 8px; }
.lock-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--muted); }
.lock-row b { font-family: var(--mono); color: var(--silver); font-variant-numeric: tabular-nums; }
.lock-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lock-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
  transform-origin: left;
  transition: transform 1s linear, background 0.4s ease;
}
.lock-fill.low { background: linear-gradient(90deg, var(--dead), #FFA8BC); }

/* -------------------------------------------------------------- stepper --- */

.stepper { display: grid; gap: 0; }
.stage {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 13px;
  padding: 11px 0; align-items: start;
  color: var(--faint);
  transition: color 0.3s ease;
}
.stage + .stage { border-top: 1px dashed rgba(162, 148, 188, 0.14); }
.stage .ring {
  width: 20px; height: 20px; margin-top: 2px;
  border-radius: 50%; border: 2px solid currentColor;
  display: grid; place-items: center;
  position: relative;
}
.stage .ring::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.stage .label { display: block; font-size: 0.875rem; font-weight: 600; }
.stage .sub { display: block; font-size: 0.75rem; color: var(--faint); margin-top: 2px; font-family: var(--mono); }
.stage .when { font-size: 0.6875rem; font-family: var(--mono); color: var(--faint); padding-top: 4px; }

.stage.active { color: var(--wait); }
.stage.active .ring::after { background: currentColor; animation: pulse 1.3s ease-in-out infinite; }
.stage.active .label { color: var(--silver); }
.stage.done { color: var(--ok); }
.stage.done .ring::after { background: currentColor; }
.stage.done .label { color: var(--silver); }
.stage.failed { color: var(--dead); }
.stage.failed .ring::after { background: currentColor; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* --------------------------------------------------------------- console -- */

.console {
  background: #05010A;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.65;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.console .row { display: flex; gap: 10px; }
.console .t { color: var(--faint); flex: none; }
.console .ev { color: var(--gold); }
.console .k { color: var(--porphyry-lit); }
.console .v { color: var(--muted); }
.console .ok { color: var(--ok); }

/* ------------------------------------------------------------- dashboard -- */

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { padding: 18px 20px; display: grid; gap: 6px; }
.kpi .k { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.kpi .v { font-family: var(--mono); font-size: 1.625rem; font-weight: 700; color: var(--silver); font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 0.75rem; font-family: var(--mono); }
.kpi .d.up { color: var(--ok); }
.kpi .d.down { color: var(--dead); }

.chart-card { padding: 20px; display: grid; gap: 14px; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-head h3 { font-size: 0.9375rem; }
canvas.plot { width: 100%; height: 220px; display: block; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.75rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }

/* Grid and flex children refuse to shrink below their content by default, which is
   what pushes a wide table past the edge of a phone. This lets them give way so the
   scrolling containers inside can do their job. */
.split > *, .bench > *, .hero-grid > *, .grid > * { min-width: 0; }

.split-story { grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split-price { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; }
.split-even  { grid-template-columns: 1fr 1fr; gap: 34px; }
.split-dev   { grid-template-columns: 1.25fr 1fr; }

/* ------------------------------------------------------------------ code -- */

.code {
  background: #05010A;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}
.code pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.7; color: var(--muted);
}
.code .tok-k { color: var(--porphyry-lit); }
.code .tok-s { color: var(--gold-lit); }
.code .tok-n { color: var(--ok); }
.code .tok-c { color: var(--faint); font-style: italic; }

/* ---------------------------------------------------------------- prices -- */

.tier { padding: 28px; display: grid; gap: 16px; align-content: start; }
.tier.featured { border-color: rgba(228, 178, 63, 0.55); box-shadow: 0 0 0 1px rgba(228, 178, 63, 0.18), var(--shadow); }
.tier .price { display: flex; align-items: baseline; gap: 6px; }
.tier .price .n { font-family: var(--mono); font-size: 2.25rem; font-weight: 700; color: var(--gold-lit); }
.tier .price .u { color: var(--muted); font-size: 0.8125rem; }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tier li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.875rem; color: var(--muted); align-items: start; }
.tier li svg { width: 14px; height: 14px; margin-top: 4px; color: var(--gold); }

/* -------------------------------------------------------------- sliders --- */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--porphyry) 100%);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-lit), var(--gold));
  border: 2px solid #2A1600;
  box-shadow: 0 3px 12px rgba(228, 178, 63, 0.5);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #2A1600;
  cursor: grab;
}
input[type="range"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* ------------------------------------------------------------------- faq -- */

details.faq {
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
details.faq summary {
  cursor: pointer; list-style: none; font-weight: 650; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--gold); font-size: 1.25rem; font-weight: 400; line-height: 1; }
details.faq[open] summary::after { content: "\2013"; }
details.faq p { margin-top: 12px; color: var(--muted); font-size: 0.9375rem; max-width: 72ch; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 980px) {
  .bench { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split,
  .split-story,
  .split-price,
  .split-even,
  .split-dev { grid-template-columns: 1fr; }
  .split-even { gap: 22px; }
  .split-story { gap: 30px; }
  /* the coin above the story reads as decoration once it is stacked */
  .split-story > :first-child img { width: min(220px, 52vw); }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Plutus Crypto — site chrome and the futuristic layer
   Navigation with menus, the mobile drawer and dock, the constellation sky,
   the turning coin, holographic card edges, the live feed, the progress
   rail, inner page heroes, documentation tables and long form prose.
   ========================================================================= */

/* ------------------------------------------------------------ skip link -- */

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 8px;
  background: var(--gold); color: #2A1600; font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------- navigation --- */

.masthead .frame { gap: 18px; }
.nav { gap: 2px; }
.nav > a, .has-menu > a { white-space: nowrap; }
.nav-cta { margin-left: 10px; padding: 9px 16px !important; font-size: 0.8125rem !important; color: #2A1600 !important; }
.nav-cta:hover { background: linear-gradient(180deg, var(--gold-lit), var(--gold) 52%, #C08A1E) !important; }

.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 300px;
  padding: 8px;
  display: grid; gap: 2px;
  background: rgba(14, 3, 28, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(251, 235, 182, 0.18);
  backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* the last menu sits by the right edge, so it opens leftward instead of
   poking an invisible 300px box past the viewport */
.has-menu:last-of-type .menu { left: auto; right: 0; }
.has-menu:hover .menu, .has-menu:focus-within .menu, .has-menu.open .menu {
  opacity: 1; visibility: visible; transform: none;
}
.menu a {
  display: grid; gap: 2px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--muted); font-size: 0.8125rem;
}
.menu a b { color: var(--silver); font-weight: 650; }
.menu a span { font-size: 0.75rem; color: var(--faint); }
.menu a:hover, .menu a:focus-visible { background: rgba(228, 178, 63, 0.09); color: var(--silver); }
.menu a:hover span { color: var(--muted); }

/* hamburger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 18px; height: 2px; background: var(--silver); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(4, 0, 9, 0.7); backdrop-filter: blur(4px); }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  padding: 18px 22px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, #16022E, #0A0113 70%);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  animation: drawer-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-head .mark { height: 16px; width: auto; }
.drawer-close {
  padding: 9px 13px; border-radius: 8px;
  border: 1px solid var(--line-soft); background: transparent;
  color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.drawer-link {
  padding: 13px 12px; border-radius: 10px;
  font-size: 1.0625rem; font-weight: 700; color: var(--silver);
}
.drawer-link:hover, .drawer-link.current { background: rgba(228, 178, 63, 0.09); color: var(--gold-lit); }
.drawer-group {
  margin: 14px 12px 4px;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}
.drawer-sub { padding: 10px 12px; border-radius: 8px; font-size: 0.9375rem; color: var(--muted); }
.drawer-sub:hover, .drawer-sub.current { background: rgba(255, 255, 255, 0.05); color: var(--silver); }
.drawer-foot { margin-top: auto; padding-top: 18px; font-size: 0.8125rem; color: var(--faint); }
.drawer-foot a { color: var(--gold); }
body.drawer-open { overflow: hidden; }

/* dock: fixed actions on phones once the hero has scrolled away */
.dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  background: rgba(8, 1, 15, 0.9);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock .btn { flex: 1; padding: 12px 10px; font-size: 0.875rem; }
.dock.show { transform: none; }

/* -------------------------------------------------------- constellation -- */

.sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.85;
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.hero { overflow: hidden; }
.hero .frame { position: relative; z-index: 1; }

/* a horizon grid, receding, for the deep pages */
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background-image:
    linear-gradient(rgba(228, 178, 63, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 178, 63, 0.14) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(64deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent 100%);
  pointer-events: none;
  opacity: 0.55;
}

/* ------------------------------------------------------------- 3D coin --- */

.coin3d {
  --size: 300px;
  position: relative;
  width: var(--size); height: var(--size);
  margin-inline: auto;
  perspective: 1200px;
}
.coin3d-spin {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  animation: coin-turn 14s linear infinite;
  will-change: transform;
}
.coin3d-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.coin3d-face img { width: 100%; height: 100%; display: block; }
/* faces sit in front of the edge on their own side; a filter on a face would
   flatten it out of the 3D context, so the glow is a separate disc behind */
.coin3d-face.front { transform: translateZ(7px); }
.coin3d::before {
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 178, 63, 0.45), rgba(139, 43, 217, 0.18) 55%, transparent 72%);
  filter: blur(28px);
  transform: translateY(8%);
  z-index: -1;
}
.coin3d-face.back {
  transform: rotateY(180deg) translateZ(7px);
  background:
    radial-gradient(circle at 40% 35%, #FBEBB6 0, #E4B23F 28%, #A5731A 62%, #6E4A0A 100%);
  box-shadow: inset 0 0 0 6px rgba(255, 245, 210, 0.35), inset 0 0 40px rgba(0, 0, 0, 0.35);
  display: grid; place-items: center;
}
.coin3d-face.back::before {
  content: "";
  width: 74%; height: 74%; border-radius: 50%;
  border: 2px dashed rgba(60, 35, 5, 0.45);
}
.coin3d-face.back::after {
  content: "PLUTUS";
  position: absolute;
  font-family: var(--sans); font-weight: 900; font-size: calc(var(--size) * 0.13);
  letter-spacing: 0.12em; color: rgba(70, 40, 5, 0.75);
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.5);
}
/* the milled edge: a stack of thin slices between the faces */
.coin3d-edge {
  position: absolute; inset: 0; border-radius: 50%;
  transform: translateZ(0);
  background: repeating-conic-gradient(from 0deg, #C8901A 0 3deg, #7A5210 3deg 6deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
@keyframes coin-turn {
  from { transform: rotateY(0deg) rotateX(6deg); }
  to   { transform: rotateY(360deg) rotateX(6deg); }
}
.coin3d.slow .coin3d-spin { animation-duration: 26s; }
.coin-still { filter: drop-shadow(0 16px 34px rgba(228, 178, 63, 0.4)); }

/* ---------------------------------------------------------- holographic -- */

.holo { position: relative; isolation: isolate; }
.holo::after {
  content: "";
  position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--holo-angle, 0deg),
    rgba(228, 178, 63, 0) 0%, rgba(228, 178, 63, 0.9) 12%, rgba(180, 70, 255, 0.9) 30%,
    rgba(228, 178, 63, 0) 45%, rgba(228, 178, 63, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.holo:hover::after, .holo:focus-within::after { opacity: 1; animation: holo-spin 2.4s linear infinite; }
@property --holo-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes holo-spin { to { --holo-angle: 360deg; } }

/* pointer spotlight on cards (desktop only, set by script) */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -200px) var(--my, -200px),
    rgba(251, 235, 182, 0.10), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.spot:hover::before { opacity: 1; }

/* ---------------------------------------------------------------- feed --- */

.feed {
  display: grid; gap: 0;
  max-height: 356px; overflow: hidden;
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.feed-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(162, 148, 188, 0.1);
  animation: feed-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes feed-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.feed-row .glyph {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.625rem; font-weight: 800; color: #0B0114;
}
.feed-row .what { display: grid; gap: 2px; min-width: 0; }
.feed-row .what b { font-size: 0.875rem; color: var(--silver); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row .what span { font-size: 0.75rem; color: var(--faint); font-family: var(--mono); }
.feed-row .amt { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.feed-row .amt b { display: block; color: var(--gold-lit); font-size: 0.9375rem; }
.feed-row .amt span { font-size: 0.6875rem; color: var(--faint); }

/* ----------------------------------------------------------- progress rail */

.rail { position: relative; display: grid; gap: 0; }
.rail::before, .rail-fill {
  content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px;
  background: rgba(162, 148, 188, 0.18); border-radius: 2px;
}
.rail-fill { background: linear-gradient(180deg, var(--gold-lit), var(--gold)); transform-origin: top; transform: scaleY(0); transition: transform 0.2s linear; }
.rail-step { display: grid; grid-template-columns: 24px 1fr; gap: 22px; padding: 22px 0; position: relative; }
.rail-step .dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(162, 148, 188, 0.35); background: var(--ink);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 0.625rem; color: var(--faint);
  transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.rail-step.lit .dot { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 4px rgba(228, 178, 63, 0.15), 0 0 18px rgba(228, 178, 63, 0.4); }
.rail-step h3 { font-size: 1.125rem; margin-bottom: 7px; }
.rail-step p { color: var(--muted); font-size: 0.9375rem; max-width: 64ch; }

/* ------------------------------------------------------------ page hero -- */

.page-hero { padding-block: clamp(40px, 6vw, 84px) clamp(28px, 4vw, 56px); position: relative; overflow: hidden; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
.page-hero .lede { margin-top: 18px; font-size: 1.125rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.8125rem; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--gold); }
.crumbs span::before { content: "/"; margin-right: 8px; color: var(--faint); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.stat { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.025); }
.stat .n { display: block; font-family: var(--mono); font-size: 1.5rem; font-weight: 700; color: var(--gold-lit); font-variant-numeric: tabular-nums; }
.stat .l { font-size: 0.75rem; color: var(--faint); letter-spacing: 0.04em; }

/* ---------------------------------------------------------- feature rows -- */

.feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: center;
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 90px;
}
.feature-row:first-of-type { border-top: 0; }
.feature-row.flip > :first-child { order: 2; }
.feature-row h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-top: 10px; }
.feature-row .lede { margin-top: 14px; font-size: 1rem; }
.feature-row ul.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.feature-row ul.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.9375rem; color: var(--muted); }
.feature-row ul.ticks li::before { content: "✓"; color: var(--gold); font-weight: 700; }

/* screen mockups drawn in css */
.mock {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(168deg, #1F0440, #16022E 60%, #0D0219);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(251, 235, 182, 0.25);
  padding: 18px;
  overflow: hidden;
}
.mock-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: block; }
.mock-bar i:first-child { background: rgba(255, 110, 142, 0.7); }
.mock-line { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); margin-bottom: 10px; }
.mock-line.short { width: 42%; }
.mock-line.gold { background: linear-gradient(90deg, var(--gold), rgba(228, 178, 63, 0.3)); width: 62%; }
.mock-box { border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(0, 0, 0, 0.3); padding: 12px; margin-top: 10px; }
.mock-btn { margin-top: 12px; height: 38px; border-radius: 9px; background: linear-gradient(180deg, var(--gold-lit), var(--gold)); display: grid; place-items: center; color: #2A1600; font-weight: 700; font-size: 0.8125rem; }
.mock-phone {
  width: min(280px, 82%); margin-inline: auto;
  border-radius: 32px; padding: 14px;
  background: #05010A; border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 2px rgba(255, 255, 255, 0.04);
}
.mock-phone .mock { border-radius: 22px; padding: 16px; }
.mock-qr { aspect-ratio: 1; width: 56%; margin: 12px auto; border-radius: 8px;
  background:
    linear-gradient(90deg, #14032B 25%, transparent 25% 50%, #14032B 50% 75%, transparent 75%),
    linear-gradient(#14032B 25%, transparent 25% 50%, #14032B 50% 75%, transparent 75%) #FBF8FF;
  background-size: 22% 22%; background-blend-mode: multiply; }
.mock-terminal { width: min(300px, 86%); margin-inline: auto; border-radius: 22px; padding: 22px 18px 28px;
  background: linear-gradient(180deg, #1B0538, #0B0116); border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9); }
.mock-terminal .screen { border-radius: 12px; background: #05010A; padding: 16px; border: 1px solid var(--line-soft); }
.mock-terminal .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.mock-terminal .keys i { display: block; height: 30px; border-radius: 7px; background: rgba(255, 255, 255, 0.06); }
.mock-big { font-family: var(--mono); font-size: 1.75rem; font-weight: 700; color: var(--gold-lit); }

/* ------------------------------------------------------------ cta band ---- */

.cta-band { padding-block: clamp(48px, 7vw, 96px); }
.cta-band .struck { padding: clamp(32px, 5vw, 64px); text-align: center; display: grid; gap: 20px; justify-items: center; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }

/* --------------------------------------------------------- comparison ---- */

.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.compare th, .compare td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; white-space: normal; }
.compare th { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.compare th.us { color: var(--gold); }
.compare td.us { color: var(--silver); font-weight: 600; background: rgba(228, 178, 63, 0.05); }
.compare td:first-child { color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------- doc tables ---- */

.doc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.doc-table th { text-align: left; padding: 11px 14px; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line-soft); }
.doc-table td { padding: 13px 14px; border-bottom: 1px solid rgba(162, 148, 188, 0.1); color: var(--muted); vertical-align: top; white-space: normal; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table code { font-family: var(--mono); font-size: 0.8125rem; color: var(--gold-lit); background: rgba(228, 178, 63, 0.08); padding: 2px 6px; border-radius: 5px; white-space: nowrap; }
.doc-table .verb { display: inline-block; min-width: 54px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 6px; text-align: center; }
.verb-get { background: rgba(69, 222, 149, 0.14); color: var(--ok); }
.verb-post { background: rgba(228, 178, 63, 0.16); color: var(--gold); }
.verb-del { background: rgba(255, 110, 142, 0.14); color: var(--dead); }

/* inline code in running text may break anywhere; a long URL must never widen the page */
code:not(pre code) { overflow-wrap: anywhere; }

.callout { padding: 16px 18px; border-radius: 12px; border: 1px solid rgba(228, 178, 63, 0.35); background: rgba(228, 178, 63, 0.06); color: var(--muted); font-size: 0.9375rem; }
.callout b { color: var(--gold-lit); }

.ex-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(162, 148, 188, 0.1); font-size: 0.9375rem; }
.ex-row > :first-child { color: var(--silver); font-weight: 600; }
.ex-row > :last-child { color: var(--muted); }
@media (max-width: 640px) { .ex-row { grid-template-columns: 1fr; gap: 4px; } }

/* --------------------------------------------------------------- prose --- */

.prose { max-width: 72ch; }
.prose h2 { font-size: 1.5rem; margin-top: 40px; margin-bottom: 12px; }
.prose h3 { font-size: 1.125rem; margin-top: 26px; margin-bottom: 8px; }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose ul, .prose ol { color: var(--muted); padding-left: 22px; margin: 0 0 14px; display: grid; gap: 6px; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose .callout { margin: 20px 0; }

/* ---------------------------------------------------------- principles --- */

.principle { padding: 26px; display: grid; gap: 10px; }
.principle .num { font-family: var(--mono); font-size: 0.75rem; color: var(--gold); letter-spacing: 0.1em; }
.principle h3 { font-size: 1.125rem; }
.principle p { color: var(--muted); font-size: 0.9375rem; }

/* ------------------------------------------------------- currency table --- */

.cur-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cur-card { padding: 18px; display: grid; gap: 12px; }
.cur-card .top { display: flex; align-items: center; gap: 12px; }
.cur-card .glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: #0B0114; }
.cur-card .top b { display: block; font-size: 1rem; }
.cur-card .top span { font-size: 0.75rem; color: var(--faint); }
.cur-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 0.8125rem; }
.cur-card dt { color: var(--faint); }
.cur-card dd { margin: 0; color: var(--silver); font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1040px) {
  .nav > a, .has-menu > a { padding-inline: 9px; font-size: 0.8125rem; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-row { grid-template-columns: 1fr; gap: 26px; }
  .feature-row.flip > :first-child { order: 0; }
  .coin3d { --size: 220px; }
}

@media (max-width: 760px) {
  .dock { display: flex; }
  body { padding-bottom: 72px; }
  .doc-table thead { display: none; }
  .doc-table tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid rgba(162, 148, 188, 0.12); }
  .doc-table td { display: block; padding: 2px 0; border: 0; }
  .doc-table code { white-space: normal; overflow-wrap: anywhere; }
  .doc-table td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px;
  }
  .compare { font-size: 0.8125rem; }
  .compare th, .compare td { padding: 10px 8px; }
  .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { padding: 12px 12px; }
  .stat .n { font-size: 1.25rem; }
  .cur-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .coin3d-spin { animation: none; transform: rotateY(-18deg) rotateX(6deg); }
  .holo:hover::after { animation: none; }
  .feed-row { animation: none; }
}