/* Moiety · design system: deep indigo, an original split mark, pastel highlights,
 * measured typography and transparent payment details.
 * Fonts are self-hosted (Google Fonts is unreachable for part of the audience); CJK falls back to system fonts. */
@font-face { font-family: "Space Grotesk"; src: url(/assets/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #05060f;
  --bg-2: rgba(255, 255, 255, .06);
  --panel: rgba(255, 255, 255, .035);
  --panel-2: rgba(255, 255, 255, .06);
  --panel-solid: #0b0d1e;
  --panel-solid-2: #111531;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .15);
  --text: #f4f4f8;
  --ink: #ffffff;
  --muted: #a3a3b8;
  --dim: #6c6c82;
  --purple: #7b8cff;
  --green: #8fe3ff;
  --cyan: #ffa6d9;
  --pink: #ffe7a3;
  --grad: linear-gradient(100deg, #7b8cff 0%, #a5b4fc 52%, #ffc6e9 100%);
  --grad-cool: linear-gradient(100deg, #7b8cff 0%, #9aa7ff 48%, #8fe3ff 100%);
  --holo: conic-gradient(from var(--ang, 0deg), #8fa8ff, #8fe3ff, #9df2cf, #ffe7a3, #ffa6d9, #c7b8ff, #8fa8ff);
  --grad-diag: linear-gradient(135deg, #7b8cff 0%, #9aa7ff 48%, #8fe3ff 100%);
  --red: #ff4d6d;
  --red-soft: rgba(255, 77, 109, .12);
  --good: #9df2cf;
  --good-soft: rgba(157, 242, 207, .12);
  --warn: #ffb547;
  --radius: 18px;
  --radius-sm: 12px;
  --display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --header-h: 68px;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
  --glow-p: 0 0 60px -12px rgba(123, 140, 255, .55);
  --glow-g: 0 0 60px -12px rgba(143, 227, 255, .45);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .07); /* light catching the top edge of a panel */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; background: var(--bg); }
body::before { /* aurora, with a faint film grain on top so the gradients never band */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .09 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(900px 620px at 8% -8%, rgba(123, 140, 255, .20), transparent 62%),
    radial-gradient(760px 560px at 102% 6%, rgba(143, 227, 255, .10), transparent 60%),
    radial-gradient(820px 520px at 50% 112%, rgba(255, 166, 217, .08), transparent 62%);
}
body::after { /* isometric diamond lattice, the Ethereum way, fading out down the page */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    repeating-linear-gradient(60deg, rgba(165, 180, 252, .07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, rgba(165, 180, 252, .07) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(ellipse 85% 62% at 68% 0%, #000 0%, transparent 74%);
          mask-image: radial-gradient(ellipse 85% 62% at 68% 0%, #000 0%, transparent 74%);
}
::selection { background: rgba(123, 140, 255, .45); color: #fff; }
a { color: inherit; }
a.link { color: var(--ink); text-decoration: none; background-image: var(--grad); background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; padding-bottom: 2px; }
a.link:hover { color: var(--green); }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.accent { color: var(--green); }
.good { color: var(--good); }
.bad { color: var(--red); }
.strike { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; color: var(--dim); }
.grad-text { background: linear-gradient(90deg, #7b8cff, #8fe3ff, #ffa6d9, #7b8cff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; }
@keyframes shine { to { background-position: 300% 0; } }
.wrap { width: min(1200px, 100%); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ header */
.hd { position: sticky; top: 0; z-index: 30; background: rgba(5, 6, 15, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); }
.hd::after { /* gradient hairline */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(123, 140, 255, .55) 28%, rgba(143, 227, 255, .45) 72%, transparent);
}
.hd.scrolled { background: rgba(5, 6, 15, .86); box-shadow: 0 14px 40px -20px rgba(0, 0, 0, .9); }
.hd { transition: background .25s, box-shadow .25s; }
.hd .wrap { height: var(--header-h); display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: 34px; height: 34px; display: block; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.brand b { font: 600 21px/1.1 var(--display); letter-spacing: -.035em; display: block; color: var(--ink); }
.brand b i { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { font: 500 9px/1.6 var(--mono); letter-spacing: .12em; color: var(--muted); }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 8px 13px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14px; white-space: nowrap; transition: color .15s, background .15s; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav a.on { color: var(--ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hd-right { display: flex; align-items: center; gap: 8px; flex: none; }
.hd .menu-btn { display: none; }
.icon { display: inline-flex; flex: none; }
.icon svg { display: block; }
.btn.icon-btn { width: 40px; padding: 0; }
@media (max-width: 940px) {
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; background: rgba(6, 7, 16, .97); border-bottom: 1px solid var(--line); padding: 10px 16px 18px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 15px; }
  .hd .menu-btn { display: inline-flex; }
  .hd .x-link { display: none; }
}

/* ------------------------------------------------------------------ buttons and inputs */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); font-weight: 600; font-size: 14.5px; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: transform .12s ease, box-shadow .2s ease, background .2s, border-color .2s, filter .2s;
}
.btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .5; cursor: not-allowed; }
.btn.primary { position: relative; overflow: hidden; border: 0; color: #05060f; background: var(--grad); box-shadow: 0 10px 34px -10px rgba(143, 227, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .15); }
.btn.primary::after { /* light sweep on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.btn.primary:hover::after { transform: translateX(120%); }
.btn.primary:hover { filter: brightness(1.08) saturate(1.1); box-shadow: 0 12px 44px -8px rgba(123, 140, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .2); transform: translateY(-1px); }
.btn.primary[disabled] { filter: grayscale(.6); box-shadow: none; transform: none; }
.btn.dark { background: #fff; color: #05060f; border-color: #fff; }
.btn.dark:hover { background: #e8e8f0; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { border-color: rgba(255, 77, 109, .5); color: var(--red); }
.btn.danger:hover { background: var(--red-soft); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn.lg { height: 54px; padding: 0 28px; font-size: 16px; }
.btn.block { width: 100%; }
.btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.label { font-size: 13px; color: var(--muted); font-weight: 500; }
.input { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 50px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(0, 0, 0, .35); transition: border-color .2s, box-shadow .2s; }
.input:focus-within { border-color: rgba(123, 140, 255, .8); box-shadow: 0 0 0 4px rgba(123, 140, 255, .18); }
.input input, .input select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 16px var(--sans); color: var(--ink); }
.input input.mono { font-family: var(--mono); }
.input input::placeholder { color: var(--dim); }
.input .unit { color: var(--muted); font: 600 12.5px var(--mono); }
.input .max { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 600; cursor: pointer; }
.input.sm { height: 42px; }
select option { background: var(--panel-solid); color: var(--text); }
.input select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.input.select { position: relative; }
.input.select select { padding-right: 26px; }
.input.select .icon, .input.search .icon { color: var(--muted); pointer-events: none; }
.input.select .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 0; }
.toolbar .search { flex: 0 1 320px; min-width: 200px; }
.toolbar .select { flex: 0 0 auto; }
textarea.input-area { width: 100%; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(0, 0, 0, .35); padding: 12px 14px; font: 15px/1.5 var(--sans); color: var(--ink); resize: vertical; outline: 0; }
textarea.input-area:focus { border-color: rgba(123, 140, 255, .8); box-shadow: 0 0 0 4px rgba(123, 140, 255, .18); }
textarea.input-area::placeholder { color: var(--dim); }

/* ------------------------------------------------------------------ layout + type */
.sec { padding: 72px 0; }
.sec.tight { padding: 26px 0 72px; }
.page-hd { padding: 56px 0 8px; }
.page-hd .h2 { margin: 12px 0 12px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); font: 600 11.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--grad-cool); box-shadow: 0 0 10px rgba(143, 227, 255, .9); }
.h1 { font: 700 clamp(42px, 5.9vw, 82px)/1 var(--display); letter-spacing: -.045em; margin: 22px 0 22px; color: var(--ink); }
.h2 { font: 700 clamp(30px, 4.2vw, 52px)/1.05 var(--display); letter-spacing: -.035em; margin: 0 0 14px; color: var(--ink); }
.h3 { font: 600 21px/1.25 var(--display); margin: 0 0 8px; letter-spacing: -.01em; color: var(--ink); }
.lead { font-size: 17.5px; color: var(--muted); max-width: 720px; margin: 0; }
.stack { display: grid; gap: 16px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 940px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3, .split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .g2 { grid-template-columns: 1fr; } .sec { padding: 52px 0; } .wrap { padding: 0 16px; } }

/* ------------------------------------------------------------------ cards */
.card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--edge), var(--shadow); min-width: 0; }
.card h3 { margin: 0 0 6px; font: 600 18px/1.3 var(--display); color: var(--ink); }
.card .sub { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.card.glow, .card.coupon { border: 1px solid transparent; background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad-diag) border-box; box-shadow: var(--edge), var(--glow-p); }
.card.ink { background: #060814; border-color: var(--line-2); padding-top: 46px; }
.card.ink::before { /* terminal title bar */
  content: ""; position: absolute; top: 18px; left: 22px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff5f57; box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.card.ink .muted, .card.ink .dim { color: var(--muted); }
.kpi { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; overflow: hidden; box-shadow: var(--edge); }
.kpi .l { font: 600 11.5px/1.3 var(--mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.kpi .v { font: 700 28px/1.2 var(--mono); font-variant-numeric: tabular-nums; margin-top: 10px; letter-spacing: -.03em; overflow-wrap: anywhere; color: var(--ink); }
.kpi .s { font-size: 12.5px; color: var(--dim); margin-top: 6px; }
.kpi.hot { border: 1px solid transparent; background: radial-gradient(120% 140% at 0% 0%, rgba(123, 140, 255, .28), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box; box-shadow: var(--edge), var(--glow-p); }
.kpi.hot .v { background: linear-gradient(90deg, #b9c4ff, #8fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi .v .dim, .kpi .v .bad { font: 500 15px var(--sans); -webkit-text-fill-color: currentColor; }
.kpi.hot .v .dim { color: var(--muted); }
@media (max-width: 600px) { .kpi { padding: 16px; } .kpi .v { font-size: 22px; } }
.rows { display: grid; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.row:last-child { border-bottom: 0; }
.row > span:first-child { color: var(--muted); }
.row > span:last-child:not(:first-child) { text-align: right; font-weight: 500; overflow-wrap: anywhere; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.n, table.t th.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t td.dim, table.t td.mono { white-space: nowrap; }
table.t tr:hover td { background: rgba(255, 255, 255, .025); }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font: 600 11.5px var(--mono); letter-spacing: .04em; border: 1px solid var(--line-2); background: var(--panel); white-space: nowrap; color: var(--muted); }
.badge.live { border-color: rgba(143, 227, 255, .45); color: var(--green); background: var(--good-soft); }
.badge.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.badge.hot { border-color: transparent; background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box; color: var(--ink); }
.badge.bad { color: var(--red); border-color: rgba(255, 77, 109, .5); background: var(--red-soft); }
.note { padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); font-size: 13.5px; color: var(--muted); }
.note.warn { background: rgba(255, 181, 71, .08); border-color: rgba(255, 181, 71, .35); color: #ffd79a; }
.skel { display: inline-block; width: 86px; height: .9em; border-radius: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: sk 1.2s infinite linear; vertical-align: middle; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: 0 0; } }
.addr { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; text-decoration-color: rgba(255, 255, 255, .25); }
a.addr:hover { color: var(--green); }
.copy { display: inline-flex; align-items: center; vertical-align: middle; border: 0; background: transparent; cursor: pointer; color: var(--dim); padding: 2px; border-radius: 6px; transition: color .15s, background .15s; }
.copy:hover { background: rgba(255, 255, 255, .06); }
.copy:hover { color: var(--green); }
.empty { padding: 28px 10px; text-align: center; color: var(--dim); font-size: 14px; }
.meter { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; margin-top: 8px; }
.meter > i { display: block; height: 100%; border-radius: 99px; background: var(--grad); box-shadow: 0 0 14px rgba(143, 227, 255, .6); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; isolation: isolate; padding: 40px 0 64px; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(110px); pointer-events: none; }
.hero::before { width: 580px; height: 580px; background: rgba(123, 140, 255, .14); top: -280px; left: -220px; }
.hero::after { width: 480px; height: 480px; background: rgba(143, 227, 255, .07); bottom: -280px; right: -160px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; min-height: 640px; }
.hero .kicker { padding: 0; border: 0; background: none; font-size: 10px; letter-spacing: .08em; }
.hero .kicker::before { width: 5px; height: 5px; border-radius: 50%; transform: none; box-shadow: none; }
.hero .h1 { font-size: clamp(46px, 5.25vw, 76px); letter-spacing: -.045em; line-height: 1.03; margin: 22px 0; }
.hero .lead { font-size: 17px; line-height: 1.65; max-width: 510px; color: #b0b2c6; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero .btn.lg { height: 48px; padding: 0 22px; font-size: 14px; }
.hero .btn.primary[disabled] { opacity: .78; filter: saturate(.5); }
.hero .token { margin-top: 22px; border-color: var(--line); border-radius: 11px; background: rgba(255, 255, 255, .02); box-shadow: none; }
.hero .token .ca { padding: 9px 11px; }
.hero .token .ca-k { padding: 4px 5px; font-size: 9px; }
.hero .token .ca-v.dim { font-size: 12px; }
.buy-slot { display: contents; }
.hero-art { position: relative; justify-self: end; width: min(460px, 100%); border: 1px solid rgba(170, 183, 235, .16); border-radius: 24px; overflow: hidden;
  background: #0b0e1e; box-shadow: 0 28px 80px -38px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
.brand-stage { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px 24px; padding: 24px 28px 26px;
  background: radial-gradient(ellipse at 28% 48%, rgba(132, 151, 255, .1), transparent 58%), linear-gradient(145deg, #11162b, #0d1020); }
.brand-stage-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; color: #8d94b2; }
.brand-stage-top > span:first-child { color: #b7c2ed; }
.brand-emblem { width: 112px; height: 112px; display: grid; place-items: center; filter: drop-shadow(0 12px 26px rgba(99, 117, 225, .1)); }
.brand-emblem svg { display: block; width: 100%; height: 100%; }
.brand-statement { margin: 0; max-width: 180px; font: 500 23px/1.25 var(--display); letter-spacing: -.035em; color: #e6e9f8; text-wrap: balance; }
.payment-split { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; margin-top: 2px; }
.payment-half { display: grid; gap: 7px; text-align: center; }
.payment-half > span { font: 500 9px/1.3 var(--mono); letter-spacing: .12em; color: #a4acc9; }
.payment-half b { font: 500 42px/1 var(--display); letter-spacing: -.055em; color: #acccff; }
.payment-half b small { font-size: 21px; letter-spacing: -.02em; margin-left: 2px; }
.payment-half.pool b { color: #d5c5ff; }
.payment-plus { align-self: end; margin-bottom: 8px; text-align: center; font: 300 24px/1 var(--display); color: #576080; }
.payment-bar { grid-column: 1 / -1; display: flex; gap: 4px; height: 4px; }
.payment-bar i { display: block; flex: 1; background: #96baff; border-radius: 99px; }
.payment-bar i:last-child { background: #c6b3f2; }
.hero-art .receipt-wrap { border-top: 1px solid rgba(170, 183, 235, .13); background: #090c18; }
/* Ambient marks remain available for the site's secondary illustrations. */
.orb { position: absolute; inset: -6%; pointer-events: none; }
.orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.orb .orb-svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; z-index: 1; filter: drop-shadow(0 0 32px rgba(123, 140, 255, .28)); animation: orbfloat 7s ease-in-out infinite alternate; }
.orb .orb-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orb-mark { display: block; width: 100%; height: 100%; }
@keyframes orbfloat { to { transform: translateY(-10px); } }
/* hero comes in once, gently */
.hero-grid > div:first-child > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-grid > div:first-child > :nth-child(2) { animation-delay: .06s; }
.hero-grid > div:first-child > :nth-child(3) { animation-delay: .12s; }
.hero-grid > div:first-child > :nth-child(4) { animation-delay: .18s; }
.hero-grid > div:first-child > :nth-child(5) { animation-delay: .24s; }
.hero-art { animation: rise .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (max-width: 980px) {
  .hero { padding: 40px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 34px; }
  .hero .h1 { font-size: clamp(46px, 7vw, 62px); }
  .hero .lead { max-width: 620px; }
  .hero-art { justify-self: start; width: min(460px, 100%); }
}
@media (max-width: 600px) {
  .hd .wrap { gap: 12px; }
  .hero { padding: 30px 0 44px; }
  .hero::after { width: 320px; height: 320px; background: rgba(143, 227, 255, .05); bottom: -200px; }
  .hero-grid { gap: 28px; }
  .hero .kicker { font-size: 8.5px; letter-spacing: .04em; gap: 7px; }
  .hero .h1 { font-size: clamp(38px, 11.3vw, 44px); margin: 20px 0; }
  .hero .lead { font-size: 16px; line-height: 1.65; }
  .hero-cta { gap: 10px; margin-top: 22px; }
  .hero .btn.lg { width: 100%; }
  .hero .token { margin-top: 16px; }
  .hero-art { width: 100%; border-radius: 20px; }
  .brand-stage { grid-template-columns: 96px minmax(0, 1fr); gap: 12px 20px; padding: 18px 20px; }
  .brand-stage-top { font-size: 8px; gap: 8px; }
  .brand-emblem { width: 96px; height: 96px; }
  .brand-statement { font-size: 21px; max-width: 150px; }
  .payment-half { gap: 5px; }
  .payment-half > span { font-size: 8px; }
  .payment-half b { font-size: 38px; }
  .payment-half b small { font-size: 18px; }
  .payment-bar { height: 3px; }
}

/* token panel under the hero buttons: contract address (copy, trade links), bonding-curve progress */
.token { margin-top: 28px; max-width: 600px; border: 1px solid var(--line-2); border-radius: 16px; background: rgba(8, 10, 24, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--edge), 0 24px 50px -30px rgba(0, 0, 0, .8); }
.token.pre { width: fit-content; }
.token .ca { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
.token .ca-k { flex: none; font: 700 11px/1 var(--mono); letter-spacing: .1em; color: #05060f; background: var(--grad); padding: 5px 7px; border-radius: 6px; }
.token .ca-v { min-width: 0; font: 600 13.5px var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.token .ca-v.short { display: none; }
.token .ca-v.dim { font: 500 14px var(--sans); color: var(--muted); }
.token .ca-links { display: flex; flex-wrap: wrap; gap: 6px; }
.token .ca-links a { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--mono); color: var(--muted); text-decoration: none; padding: 7px 9px 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: color .15s, border-color .15s; }
.token .ca-links a .icon { opacity: .7; }
.token .ca-follow { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; padding: 6px 11px; border-radius: 999px; font: 600 13px var(--sans); color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); transition: border-color .15s, background .15s; }
.token .ca-follow:hover { border-color: rgba(143, 227, 255, .5); background: rgba(143, 227, 255, .08); }
.nav .nav-x { display: none; }
@media (max-width: 940px) { .nav .nav-x { display: flex; align-items: center; gap: 8px; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 16px; } }
.token .ca-links a:hover { color: var(--ink); border-color: rgba(143, 227, 255, .5); }
.token .curve { padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.token .curve b { font: 700 13px var(--mono); color: var(--ink); }
@media (max-width: 600px) { .token .ca-v.full { display: none; } .token .ca-v.short { display: inline; } }

/* holographic 50% OFF badge */
.sticker { position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; flex: none; text-align: center; transform: rotate(-12deg);
  background: radial-gradient(circle at 30% 25%, #1d2146 0%, #0a0b18 70%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 0 60px -8px rgba(123, 140, 255, .75), 0 0 90px -20px rgba(143, 227, 255, .6); }
.sticker::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, #7b8cff, #8fe3ff, #ffa6d9, #ffe7a3, #7b8cff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 5s linear infinite; }
.sticker::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .18); }
@keyframes spin { to { transform: rotate(360deg); } }
.sticker b { display: block; font: 700 40px/.9 var(--display); letter-spacing: -.04em; background: linear-gradient(120deg, #c7b8ff, #8fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sticker span { display: block; font: 700 12px var(--mono); letter-spacing: .3em; margin-top: 6px; color: var(--ink); padding-left: .3em; }
@media (max-width: 600px) { .sticker { width: 104px; height: 104px; } .sticker b { font-size: 31px; } .sticker span { font-size: 10px; } }

/* Glass receipt for standalone illustrations. */
.receipt {
  position: relative; width: 100%; padding: 30px 26px 34px; font-family: var(--mono); font-size: 13.5px; color: var(--text);
  background: linear-gradient(180deg, rgba(22, 24, 52, .92), rgba(9, 11, 26, .94)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px 22px 0 0;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 80px -30px rgba(123, 140, 255, .55);
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, transparent 7.5px, #000 8px) 0 0 / 20px 100% repeat-x;
          mask: radial-gradient(circle 8px at 50% 100%, transparent 7.5px, #000 8px) 0 0 / 20px 100% repeat-x;
}
.receipt h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 13px var(--mono); letter-spacing: .28em; color: var(--muted); }
.rc-logo { display: block; width: 20px; height: 20px; flex: none; }
.rc-logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.receipt .meta { color: var(--dim); font-size: 11.5px; margin-bottom: 26px; }
.receipt .ln { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.receipt .ln > span:first-child { color: var(--muted); }
.receipt .ln.sep { border-top: 1px dashed rgba(255, 255, 255, .18); margin-top: 12px; padding-top: 16px; align-items: center; }
.receipt .ln.total > span:first-child { color: var(--ink); font-weight: 700; font-size: 15px; }
.receipt .ln.total b { font: 700 30px/1 var(--display); letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.receipt .pool { color: var(--green); }
.receipt .barcode { height: 30px; margin-top: 18px; opacity: .55; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 8px, #fff 8px 11px, transparent 11px 12px); }
/* The home receipt shares the panel's surface and stays compact. */
.hero-art .receipt { padding: 20px 28px; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-mask: none; mask: none; font: 12px/1.3 var(--mono); }
.hero-art .receipt h4 { gap: 8px; margin-bottom: 4px; font: 500 10px/1.3 var(--mono); letter-spacing: .16em; color: #a1a9c3; }
.hero-art .rc-logo { width: 17px; height: 17px; }
.hero-art .receipt .meta { color: #858da8; font-size: 10px; line-height: 1.4; margin-bottom: 12px; }
.hero-art .receipt .ln { align-items: baseline; padding: 5px 0; }
.hero-art .receipt .ln > span:first-child { color: #a2aac1; }
.hero-art .receipt .ln > span:last-child { text-align: right; }
.hero-art .receipt .ln.sep { border-top: 1px solid rgba(170, 183, 235, .13); margin-top: 8px; padding-top: 12px; align-items: center; }
.hero-art .receipt .ln.total > span:first-child { color: var(--ink); font-weight: 500; font-size: 12px; }
.hero-art .receipt .ln.total b { font: 600 27px/1 var(--display); letter-spacing: -.04em; color: #d6ddff; background: none; }
.hero-art .receipt .barcode { height: 12px; margin-top: 12px; opacity: .14; }
@media (max-width: 600px) { .hero-art .receipt { padding: 16px 20px; font-size: 11px; } .hero-art .receipt .meta { font-size: 9px; margin-bottom: 8px; } .hero-art .receipt .ln { padding: 4px 0; } .hero-art .receipt .ln.total b { font-size: 25px; } .hero-art .receipt .barcode { height: 10px; margin-top: 10px; } }

/* live ticker */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; font: 500 12.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ticker-item b { color: var(--ink); font-weight: 700; }
.ticker-item b.good { color: var(--green); }
.ticker-item b.bad { color: var(--red); }
.ticker-item::after { content: ""; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--grad); margin-left: 28px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* money pipeline */
.pipe { display: grid; grid-template-columns: 1fr 64px 1fr 64px 1fr 64px 1fr; align-items: stretch; margin: 34px 0 18px; }
.pipe .node { position: relative; padding: 20px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--line-2); text-align: center; box-shadow: var(--edge); }
.pipe .node b { display: block; font: 600 16px/1.3 var(--display); color: var(--ink); margin-bottom: 4px; }
.pipe .node span { font-size: 13px; color: var(--muted); }
.pipe .node .ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 13px; background: linear-gradient(180deg, rgba(123, 140, 255, .22), rgba(123, 140, 255, .08)); border: 1px solid rgba(123, 140, 255, .4); color: #d9c2ff; box-shadow: var(--edge); }
.pipe .node.end { border: 1px solid transparent; background: linear-gradient(var(--panel-solid-2), var(--panel-solid-2)) padding-box, var(--grad) border-box; box-shadow: var(--edge), var(--glow-g); }
.pipe .node.end .ic { background: linear-gradient(180deg, rgba(143, 227, 255, .22), rgba(143, 227, 255, .07)); border-color: rgba(143, 227, 255, .45); color: var(--green); }
.pipe .wire { position: relative; align-self: center; height: 2px; margin: 0 6px; background: rgba(255, 255, 255, .12); border-radius: 2px; overflow: hidden; }
.pipe .wire::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #8fe3ff, transparent); animation: flow 1.8s linear infinite; }
.pipe .wire:nth-of-type(4)::after { animation-delay: .6s; }
.pipe .wire:nth-of-type(6)::after { animation-delay: 1.2s; }
@keyframes flow { to { left: 100%; } }
@media (max-width: 940px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe .wire { width: 2px; height: 34px; margin: 0 auto; }
  .pipe .wire::after { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #8fe3ff, transparent); animation-name: flowv; }
}
@keyframes flowv { to { top: 100%; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
.step { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; box-shadow: var(--edge); transition: border-color .2s, transform .2s; }
.step:hover { border-color: rgba(123, 140, 255, .5); transform: translateY(-2px); }
.step::before { counter-increment: st; content: "0" counter(st); display: block; font: 700 30px/1 var(--display); letter-spacing: -.03em; margin-bottom: 14px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h4 { margin: 0 0 8px; font: 600 17px/1.3 var(--display); color: var(--ink); }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 940px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* model chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 7px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); font-weight: 600; font-size: 14px; transition: border-color .2s, background .2s; }
.chip:hover { border-color: rgba(143, 227, 255, .5); background: rgba(143, 227, 255, .06); }
.chip img { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: #fff; }

/* models table: vendor mark + name */
.mdl { display: flex; align-items: center; gap: 12px; }
.vmark { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.vmark.initial { display: grid; place-items: center; padding: 0; background: var(--panel-2); border: 1px solid var(--line-2); font: 700 13px var(--display); color: var(--muted); box-shadow: none; }

/* calculator */
.calc-out { font: 700 44px/1.05 var(--display); letter-spacing: -.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-out small { font: 600 16px var(--sans); letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.why .row > span:first-child { white-space: nowrap; }

/* final call to action */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 64px 24px; border-radius: 28px; border: 1px solid transparent;
  background: radial-gradient(80% 120% at 50% 0%, rgba(123, 140, 255, .35), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad) border-box; box-shadow: var(--glow-p); }
.cta-band .h2 { margin-bottom: 10px; }
.cta-band .lead { margin: 0 auto 28px; }
.cta-band .hero-cta { justify-content: center; margin-top: 0; }

/* bars (30-day subsidy) */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding-top: 10px; border-bottom: 1px solid var(--line-2); }
.bars i { flex: 1; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(0deg, #7b8cff, #8fe3ff); box-shadow: 0 0 14px -2px rgba(143, 227, 255, .45); opacity: .9; transition: opacity .15s; }
.bars i:hover { opacity: 1; }
.bars i.z { background: rgba(255, 255, 255, .08); box-shadow: none; }

/* chat */
.chatbox { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(68vh, 660px); min-height: 440px; }
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.chat-log > .empty { margin: auto; }
.msg { max-width: 86%; padding: 12px 15px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, #6a5cf0, #7b8cff); color: #fff; border-bottom-right-radius: 5px; box-shadow: 0 10px 30px -14px rgba(123, 140, 255, .9); }
.msg.ai { align-self: flex-start; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; }
.msg.ai.bad { border-color: rgba(255, 77, 109, .5); color: #ffb3c1; background: var(--red-soft); }
.msg .meta { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-2); font: 12px var(--mono); color: var(--muted); white-space: normal; }
.msg .meta .pool { color: var(--green); }
.chat-in { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .25); align-items: flex-end; }
.chat-in textarea { flex: 1; min-height: 48px; max-height: 180px; }

/* key + code + modal + toasts */
.keyshow { font: 600 14px var(--mono); padding: 14px; background: rgba(0, 0, 0, .4); border: 1px dashed rgba(143, 227, 255, .55); color: var(--green); border-radius: 12px; overflow-wrap: anywhere; }
pre.code { margin: 0; padding: 16px 18px; background: #060814; border: 1px solid var(--line); color: #e4e4ef; border-radius: 14px; font: 12.8px/1.65 var(--mono); overflow-x: auto; white-space: pre; }
pre.code .c { color: #6c6c82; }
pre.code .s { color: #8fe3ff; }
.modal-bg { position: fixed; inset: 0; z-index: 60; background: rgba(2, 2, 6, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.modal { width: min(470px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 22px; padding: 22px; border: 1px solid transparent;
  background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--grad-diag) border-box; box-shadow: var(--edge), 0 40px 100px -20px rgba(0, 0, 0, .9), var(--glow-p); }
.modal h3 { margin: 0; font: 600 19px var(--display); color: var(--ink); }
.wallets { display: grid; gap: 8px; }
.wallets button, .wallets a > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--text); font-weight: 600; cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.wallets button:hover { border-color: rgba(123, 140, 255, .7); background: rgba(123, 140, 255, .1); }
.wallets img, .wallets .wi { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.wallets .wi { background: var(--grad-diag); }
.toasts { position: fixed; z-index: 80; right: 16px; bottom: 16px; display: grid; gap: 8px; width: min(390px, calc(100vw - 32px)); }
.toast { display: flex; justify-content: space-between; gap: 10px; padding: 13px 15px; border-radius: 14px; background: rgba(12, 14, 30, .96); border: 1px solid var(--line-2); color: var(--text); font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); transition: opacity .2s; }
.toast.ok { border-left: 3px solid var(--green); }
.toast.err { border-left: 3px solid var(--red); }
.toast.warn { border-left: 3px solid var(--warn); }
.toast a { display: inline-flex; align-items: center; gap: 4px; color: var(--green); white-space: nowrap; }
.prebar { position: relative; text-align: center; font-size: 13px; padding: 9px 16px; color: var(--text); background: linear-gradient(90deg, rgba(123, 140, 255, .22), rgba(143, 227, 255, .16)); border-bottom: 1px solid var(--line); }
.prebar b { color: var(--green); font-weight: 600; }

/* faq */
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 18px/1 var(--mono); color: var(--green); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 10px 0 0; color: var(--muted); }

/* footer */
.ft { border-top: 1px solid var(--line); background: rgba(0, 0, 0, .35); padding: 44px 0 34px; margin-top: 40px; font-size: 13px; color: var(--muted); }
.ft-top { display: flex; justify-content: space-between; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.ft-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ft-nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .15s; }
.ft-nav a:hover { color: var(--ink); }
.ft .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; }
.ft .attribution p { margin: 0; }
.ft .ca-list { display: grid; gap: 9px; align-content: start; }
.ft .ca-list > div { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .ft .cols { grid-template-columns: 1fr; } }

/* 3D tilt toward the pointer (fx.js), with a soft glare that follows it */
.tilt { position: relative; transition: transform .45s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.tilt.tilting { transition: transform .08s linear; }
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .16), transparent 46%);
}
.tilt.tilting::after { opacity: 1; }
.step.tilt:hover { transform: none; }

/* sections rise into view in 3D (fx.js marks only what starts below the fold) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .95s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* the logo as a coin, spinning in 3D */
.coin3d { width: 92px; height: 92px; margin: 0 auto 24px; perspective: 700px; }
.coin3d-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: coinspin 9s linear infinite; }
.coin3d-spin i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, #2c2a72, #123e58); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.coin3d-spin .face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: radial-gradient(circle at 35% 30%, #1a1f48, #090a17 72%); box-shadow: inset 0 0 0 2px rgba(123, 140, 255, .5), 0 0 40px -6px rgba(123, 140, 255, .7); }
.coin3d-spin .front { transform: translateZ(6px); }
.coin3d-spin .back { transform: rotateY(180deg) translateZ(6px); }
.coin3d .coin-mark { display: block; width: 70%; }
.coin3d .coin-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes coinspin { to { transform: rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ Moiety extras */
/* rotating holographic border on the panels that matter */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.card.glow, .card.coupon { background: linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--holo) border-box; animation: angspin 7s linear infinite; }
.kpi.hot { background: radial-gradient(120% 140% at 0% 0%, rgba(123, 140, 255, .28), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--holo) border-box; animation: angspin 7s linear infinite; }
.cta-band { background: radial-gradient(80% 120% at 50% 0%, rgba(123, 140, 255, .32), transparent 60%) padding-box, linear-gradient(var(--panel-solid), var(--panel-solid)) padding-box, var(--holo) border-box; animation: angspin 9s linear infinite; }
@keyframes angspin { to { --ang: 360deg; } }
/* a soft light that follows the pointer across panels (fx.js sets --mx / --my) */
.card:not(.ink)::before, .kpi::before, .pipe .node::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 140, 255, .16), rgba(143, 227, 255, .05) 40%, transparent 62%);
}
.card:not(.ink):hover::before, .kpi:hover::before, .pipe .node:hover::before { opacity: 1; }
/* headline word in the holographic gradient, slowly moving */
.holo-text { background: linear-gradient(100deg, #7b8cff, #9aa7ff 30%, #8fe3ff 50%, #ffa6d9 70%, #7b8cff); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 7s linear infinite; }

/* rainbow hairline under the header, like light through a prism */
.hd::after { background: linear-gradient(90deg, transparent, #8fa8ff 18%, #8fe3ff 36%, #9df2cf 50%, #ffe7a3 64%, #ffa6d9 82%, transparent) !important; opacity: .55; }
.ticker-item::after { background: var(--holo); }

/* the call-to-action mark: the logo, flat, floating in a soft glow */
.coin-flat { width: 104px; height: 104px; margin: 0 auto 22px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 140, 255, .32), rgba(255, 166, 217, .08) 55%, transparent 72%); animation: orbfloat 6s ease-in-out infinite alternate; }
.coin-flat .coin-mark { display: block; width: 76px; }
.coin-flat .coin-mark svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(123, 140, 255, .55)); }