/* ============================================================================
   FastGamesAPI — "House Edge" design system  (Casino-Luxe Fintech)
   A single committed visual world: warm ink ground, one brass accent,
   oxblood for depth. Geist for display + body (matched to the portal) + Geist
   Mono for code. No italic. No neon, no grid-hero, no gradients
   as decoration. Everything painted explicitly so it holds on any host ground.
   ========================================================================== */

:root {
  /* light ground + panels */
  --ink:        #F7F8F6;   /* page bg — soft warm white */
  --ink-2:      #FFFFFF;   /* raised / cards */
  --ink-3:      #F0F2EE;   /* sunk card */
  --ink-4:      #E7EAE4;   /* hover */
  --oxblood:    #E9F3EE;   /* faint accent tint */

  /* accent — emerald (replaces gold) */
  --brass:      #0E8A5F;   /* primary */
  --brass-2:    #0B7350;   /* darker — accent text/links, readable on light */
  --brass-deep: #0A5F42;   /* deepest — gradient bottom */

  /* text — near-black on light */
  --bone:       #14181A;   /* headings */
  --bone-2:     #39423E;   /* body */
  --muted:      #6B726D;   /* secondary */
  --faint:      #9BA29C;   /* faint */

  /* lines — neutral, subtle */
  --line:       rgba(20,32,26,0.10);
  --line-2:     rgba(20,32,26,0.17);
  --hair:       rgba(20,32,26,0.07);

  /* semantic */
  --live:       #0E8A5F;
  --warn:       #C0872A;

  --serif: 'Geist', system-ui, sans-serif;
  --sans:  'Geist', system-ui, -apple-system, sans-serif;
  --mono:  'Geist Mono', ui-monospace, monospace;

  --wrap: 1160px;
  --r: 3px;              /* sharp, not rounded-lg */
  --r-card: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--bone-2);
  line-height: 1.6;
  font-size: 17px;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  /* warm oxblood vignette from the top, painted explicitly */
  background-image:
    radial-gradient(120% 70% at 82% -12%, rgba(14,138,95,0.055), transparent 58%),
    radial-gradient(90% 50% at 8% 0%, rgba(14,138,95,0.05), transparent 55%);
  background-attachment: fixed;
}

::selection { background: var(--brass); color: var(--ink); }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* type -------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); color: var(--bone); font-weight: 650;
  line-height: 1.04; letter-spacing: -0.028em; text-wrap: balance; }

/* emphasis accent — replaces italic; brass-toned, never slanted */
em, i, .accent { font-style: normal; color: var(--brass-2); font-weight: 650; }

.serif-num { font-family: var(--serif); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum"; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brass); opacity: 0.7; }

code, .mono { font-family: var(--sans); font-size: 0.85em; }
p code { color: var(--brass-2); background: rgba(14,138,95,0.08);
  padding: 1px 6px; border-radius: var(--r); border: 1px solid var(--line); }

/* nav --------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand {
  font-family: var(--serif); font-weight: 600; font-size: 1.12rem;
  color: var(--bone); letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px;
}
.brand .mark {
  width: 22px; height: 22px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--brass-2), var(--brass) 45%, var(--brass-deep) 100%);
  box-shadow: 0 0 0 1px rgba(14,138,95,0.4), inset 0 0 4px rgba(0,0,0,0.4);
  position: relative; flex: none;
}
.brand .mark::after { content: ""; position: absolute; inset: 6px;
  border-radius: 50%; border: 1px solid rgba(14,11,12,0.55); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 0.92rem; color: var(--bone-2); transition: color 0.18s; }
.nav-links a:hover { color: var(--brass-2); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-signin { font-size: 0.92rem; color: var(--muted); }
.nav-signin:hover { color: var(--bone); }

/* buttons ----------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  padding: 12px 22px; border-radius: var(--r); border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s; }
.btn-brass {
  color: #ffffff;
  background: linear-gradient(180deg, var(--brass-2), var(--brass) 55%, var(--brass-deep));
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -10px rgba(14,138,95,0.6);
}
.btn-brass:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 12px 30px -8px rgba(14,138,95,0.7); }
.btn-ghost { color: var(--bone); border-color: var(--line-2); background: rgba(20,32,26,0.02); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-2); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }

/* hero -------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(56px, 9vw, 110px) 0 clamp(50px, 7vw, 92px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-2); padding: 6px 12px 6px 10px;
  border: 1px solid var(--line); border-radius: 40px; background: rgba(14,138,95,0.05);
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 3px rgba(91,167,132,0.2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} }

.hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.7rem); font-weight: 640; margin-bottom: 22px; letter-spacing: -0.035em; }
.hero h1 .settle { display: block; color: var(--brass-2);
  font-style: normal; font-weight: 640; }
.hero h1 .rule { display: block; width: 92px; height: 2px; margin: 20px 0 0;
  background: linear-gradient(90deg, var(--brass), transparent); }
.hero-sub { font-size: 1.14rem; color: var(--bone-2); max-width: 30em; margin-bottom: 32px; line-height: 1.55; }
.hero-sub b { color: var(--bone); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-trust { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust span::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brass); flex: none; }

/* hero showcase (playable cards) */
.showcase { position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; }
.showcase::before { content: ""; position: absolute; inset: -8% -6%;
  background: radial-gradient(60% 60% at 60% 30%, rgba(14,138,95,0.14), transparent 70%);
  filter: blur(10px); z-index: 0; }
.game-showcase-card { position: relative; z-index: 1; border-radius: var(--r-card);
  overflow: hidden; border: 1px solid var(--line); background: var(--ink-3);
  aspect-ratio: 4 / 5; cursor: default; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.game-showcase-card:nth-child(2) { transform: translateY(22px); }
.game-showcase-card:nth-child(3) { transform: translateY(-22px); }
.game-showcase-card img { width: 100%; height: 100%; object-fit: cover; }
.game-showcase-card:hover { transform: translateY(-4px) scale(1.015); border-color: var(--brass);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,0.8); }
.game-showcase-card:nth-child(2):hover { transform: translateY(18px) scale(1.015); }
.game-showcase-card:nth-child(3):hover { transform: translateY(-26px) scale(1.015); }
.game-showcase-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(10,7,8,0.95), transparent); }
.game-showcase-name { font-family: var(--serif); font-size: 1rem; color: #F4EFE6; font-weight: 600; }
.game-showcase-type { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); margin-top: 2px; }
.game-showcase-payout { position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700; color: #E9C87E;
  background: rgba(10,7,8,0.72); border: 1px solid rgba(255,255,255,0.14); padding: 3px 8px; border-radius: var(--r); }

/* ledger / metrics bar ---------------------------------------------------- */
.ledger { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(14,138,95,0.03); }
.ledger .wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.ledger-cell { padding: 30px 20px; text-align: center; border-left: 1px solid var(--hair); }
.ledger-cell:first-child { border-left: none; }
.ledger-val { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 600;
  color: var(--bone); line-height: 1; font-variant-numeric: tabular-nums; }
.ledger-val .u { color: var(--brass); font-size: 0.6em; }
.ledger-label { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-top: 10px; }

/* sections ---------------------------------------------------------------- */
section { position: relative; }
.section { padding: clamp(64px, 9vw, 116px) 0; }
.section-head { max-width: 40em; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 640; margin-bottom: 16px; }
.section-head p { font-size: 1.08rem; color: var(--muted); line-height: 1.55; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* game portfolio ---------------------------------------------------------- */
.count-bar { text-align: center; font-family: var(--sans); font-size: 0.86rem; color: var(--muted);
  margin: 8px 0 40px; }
.count-bar b { color: var(--brass-2); font-weight: 700; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }
.tab { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 40px; cursor: pointer; transition: all 0.18s; }
.tab:hover { color: var(--bone); border-color: var(--line-2); }
.tab.active { color: var(--ink); background: var(--brass); border-color: var(--brass); font-weight: 700; }

.cat { display: none; }
.cat.active { display: block; animation: fade 0.4s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
/* 4/5, not 3/4: the artwork is 365×452 (0.807) and every title is drawn nearly
   edge to edge, so a 0.75 box shaved 7% off the sides and took the first and
   last letter of the long ones with it — BLACKJAC[K], [V]IDEO POKE[R]. */
.library-thumb { position: relative; border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-3); aspect-ratio: 4 / 5;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s; }
.library-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.library-thumb:hover { transform: translateY(-3px); border-color: var(--brass);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.85); }
.library-thumb:hover img { transform: scale(1.06); }
.library-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 22px 12px 11px; font-family: var(--serif); font-weight: 600; font-size: 0.92rem; color: #F4EFE6;
  background: linear-gradient(to top, rgba(10,7,8,0.96) 15%, rgba(10,7,8,0.55) 60%, transparent); }

/* feature list (editorial) ------------------------------------------------ */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); }
.feature { padding: 34px 30px; border-bottom: 1px solid var(--line); position: relative;
  transition: background 0.2s; }
.feature:nth-child(odd) { border-right: 1px solid var(--line); }
.feature:hover { background: rgba(14,138,95,0.03); }
.feature-n { font-family: var(--sans); font-size: 0.72rem; color: var(--brass); letter-spacing: 0.1em; }
.feature h3 { font-size: 1.4rem; font-weight: 600; margin: 12px 0 10px; }
.feature p { font-size: 0.98rem; color: var(--muted); line-height: 1.6; }
.feature p b { color: var(--bone-2); font-weight: 600; }

/* integration ------------------------------------------------------------- */
.integrate { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 0; }
.step { padding: 22px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n { font-family: var(--serif); font-size: 1.5rem; color: var(--brass); font-weight: 600; line-height: 1; }
.step h4 { font-family: var(--sans); font-size: 1.05rem; color: var(--bone); font-weight: 600; margin-bottom: 5px; }
.step p { font-size: 0.94rem; color: var(--muted); }

.code-block { background: #0A0708; border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; font-family: var(--sans); font-size: 0.82rem; line-height: 1.85; }
.code-head { display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--hair); background: rgba(14,138,95,0.03); }
.code-head .d { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); }
.code-head .d:nth-child(1) { background: #C8524B; } .code-head .d:nth-child(2) { background: var(--brass); }
.code-head .d:nth-child(3) { background: var(--live); }
.code-head .f { margin-left: 10px; font-size: 0.72rem; color: var(--faint); letter-spacing: 0.05em; }
.code-body { padding: 20px 22px; overflow-x: auto; color: #B9AE9C; white-space: pre; }
.code-body .cm { color: var(--faint); font-style: normal; }
.code-body .kw { color: var(--brass-2); }
.code-body .st { color: #8FB89C; }
.code-body .pr { color: var(--bone); }
.code-body .fn { color: var(--brass); }

/* fairness ledger (receipt motif) ----------------------------------------- */
.fair-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.fair-card { padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--ink-2); position: relative; }
.fair-card .fn { position: absolute; top: 22px; right: 24px; font-family: var(--serif);
  font-size: 2.4rem; color: rgba(14,138,95,0.16); font-weight: 600; line-height: 1; }
.fair-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.fair-card p { font-size: 0.94rem; color: var(--muted); }
.receipt { max-width: 640px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-card);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(14,138,95,0.05) 27px, rgba(14,138,95,0.05) 28px),
    var(--ink-2);
  padding: 28px 30px; font-family: var(--sans); font-size: 0.84rem; }
.receipt-head { text-align: center; color: var(--brass); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 0.7rem; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--line-2); }
.receipt-row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; color: var(--bone-2); }
.receipt-row .frac { color: var(--brass-2); }
.receipt-foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2);
  color: var(--muted); font-size: 0.76rem; text-align: center; }

/* commercial models ------------------------------------------------------- */
.models { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.model { padding: 34px 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ink-2); }
.model .eyebrow { margin-bottom: 16px; }
.model h3 { font-size: 1.5rem; margin-bottom: 10px; }
.model p { font-size: 0.98rem; color: var(--muted); margin-bottom: 18px; }
.model ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.model li { font-size: 0.94rem; color: var(--bone-2); padding-left: 24px; position: relative; }
.model li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }

/* CTA --------------------------------------------------------------------- */
.cta { text-align: center; padding: clamp(70px, 10vw, 130px) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(14,138,95,0.06), transparent 65%),
    radial-gradient(50% 80% at 50% 100%, rgba(14,138,95,0.07), transparent);
  border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 640; margin-bottom: 18px; }
.cta h2 em { color: var(--brass-2); font-style: normal; }
.cta p { font-size: 1.1rem; color: var(--muted); max-width: 34em; margin: 0 auto 34px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* footer ------------------------------------------------------------------ */
.footer { border-top: 1px solid var(--hair); padding: 46px 0 40px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.footer .brand { margin-bottom: 14px; }
.footer-tag { font-size: 0.86rem; color: var(--faint); max-width: 26em; }
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 0.9rem; color: var(--bone-2); padding: 4px 0; transition: color 0.16s; }
.footer-col a:hover { color: var(--brass-2); }
.footer-legal { width: 100%; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hair);
  font-size: 0.8rem; color: var(--faint); }

/* live badge injected by app.js — override its inline default to brand it */
.library-thumb span, .game-showcase-card span { font-family: var(--sans) !important; }

/* A term that must never be split across lines. "custody-safety" was breaking
   at its own hyphen, leaving "custody-" hanging at the end of a line. */
.nb { white-space: nowrap; }
/* Long code tokens in prose: break them at a sensible point instead of letting
   the line run, and never mid-identifier where a reader would misread it. */
.feature p b, .fair-card p b { overflow-wrap: anywhere; word-break: normal; }

/* responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .showcase { max-width: 420px; }
  .ledger .wrap { grid-template-columns: repeat(2, 1fr); }
  .ledger-cell:nth-child(3), .ledger-cell:nth-child(5) { border-left: none; }
  .ledger-cell { border-top: 1px solid var(--hair); }
  .ledger-cell:nth-child(1), .ledger-cell:nth-child(2) { border-top: none; }
  .features { grid-template-columns: 1fr; }
  .feature:nth-child(odd) { border-right: none; }
  .integrate { grid-template-columns: 1fr; gap: 32px; }
  .fair-steps { grid-template-columns: 1fr; }
  .models { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .ledger .wrap { grid-template-columns: 1fr 1fr; }
  .ledger-val { font-size: 1.7rem; }
  .hero-cta .btn { flex: 1; justify-content: center; }

  /* The bar ran out of room: "Sign in" wrapped onto two lines and landed on
     top of the wordmark, and the brass button broke mid-label. Below 560px the
     header keeps the mark and one CTA, both on a single line. */
  .nav .wrap { gap: 12px; }
  .brand { font-size: 1rem; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
  .nav-signin { display: none; }
  .nav-right .btn { white-space: nowrap; padding: 9px 13px; font-size: 0.84rem; }

  /* A tile is a full column here, so 4/5 cropped the artwork's own title off
     both edges. A wider box shows the art as it was drawn. */
  .game-showcase-card { aspect-ratio: 5 / 4; }
  .game-showcase-card:nth-child(2),
  .game-showcase-card:nth-child(3) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}

/* ===== living characters — hero mascot + gallery ========================== */
.hero-seelive { font-family: var(--sans); font-size: 0.76rem; color: var(--muted); margin: -14px 0 26px; }
.hero-seelive a { color: var(--brass-2); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; margin-left: 4px; }
.hero-seelive a:hover { border-color: var(--brass); }

.hero-stage { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: end center; }
.hero-stage-glow { position: absolute; inset: 0;
  background: radial-gradient(52% 46% at 52% 44%, rgba(14,138,95,0.16), transparent 68%); filter: blur(8px); }
.stage-shadow { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  width: 54%; height: 20px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,0.6), transparent);
  animation: shadowBreathe 3.8s ease-in-out infinite; z-index: 1; }
.mascot-parallax { position: relative; width: 70%; margin-bottom: 11%; z-index: 2;
  transition: transform 0.3s cubic-bezier(.2,.7,.2,1); will-change: transform; cursor: pointer; }
.mascot-idle { position: relative; transform-origin: 50% 100%;
  animation: float 3.8s ease-in-out infinite, sway 8s ease-in-out infinite; }
.mascot-idle .flow { position: relative; opacity: 0; }            /* holds intrinsic height */
.mascot-idle .pose { position: absolute; inset: 0; width: 100%;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55)); transition: opacity 0.25s; }
.mascot-idle .pose-win { opacity: 0; }
.hero-stage.cheer .pose-default { opacity: 0; }
.hero-stage.cheer .pose-win { opacity: 1; }
.hero-stage.cheer .mascot-idle { animation: hop 0.65s ease, sway 8s ease-in-out infinite; }
.stage-tag { position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%);
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); z-index: 3; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.char-card { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--r-card);
  background: radial-gradient(62% 56% at 50% 42%, var(--ink-3), var(--ink-2));
  display: grid; place-items: center; overflow: hidden; transition: border-color 0.25s, transform 0.25s; }
.char-card::after { content: attr(data-name); position: absolute; bottom: 12px; left: 0; right: 0; text-align: center;
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.char-card img { width: 58%; margin-top: -8%;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5)); animation: float 4s ease-in-out infinite; transition: filter 0.3s; }
.char-card:nth-child(2) img { animation-delay: -0.6s } .char-card:nth-child(3) img { animation-delay: -1.1s }
.char-card:nth-child(4) img { animation-delay: -1.7s } .char-card:nth-child(5) img { animation-delay: -2.2s }
.char-card:nth-child(6) img { animation-delay: -2.8s } .char-card:nth-child(7) img { animation-delay: -3.3s }
.char-card:hover { border-color: var(--brass); transform: translateY(-3px); }
.char-card:hover img { filter: drop-shadow(0 16px 24px rgba(14,138,95,0.42)); }
.char-card.emote img { position: absolute; width: 58%; }
.char-card.emote .pose-win { opacity: 0; transition: opacity 0.2s; }
.char-card.emote:hover .pose-default { opacity: 0; }
.char-card.emote:hover .pose-win { opacity: 1; }

@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4%) } }
@keyframes sway  { 0%,100% { rotate: -1.1deg } 50% { rotate: 1.1deg } }
@keyframes hop   { 0% { transform: translateY(0) scale(1,1) } 25% { transform: translateY(-11%) scale(0.98,1.03) }
  55% { transform: translateY(0) scale(1.04,0.96) } 75% { transform: translateY(-3%) scale(1,1) }
  100% { transform: translateY(0) scale(1,1) } }
@keyframes shadowBreathe { 0%,100% { opacity: 0.85; width: 54% } 50% { opacity: 0.55; width: 48% } }

@media (max-width: 900px) { .hero-stage { max-width: 380px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .mascot-idle, .stage-shadow, .char-card img { animation: none !important; } }

/* ===== premium hero mascot stage (overrides the basic version above) ====== */
.hero-stage { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: end center; isolation: isolate; }
/* soft studio backdrop so the subject reads as a deliberate portrait, not a floating cutout */
.hero-stage::before { content: ""; position: absolute; inset: 4% 9% 9%; z-index: 0; border-radius: 50%;
  background: radial-gradient(58% 54% at 50% 38%, rgba(14,138,95,0.05), rgba(20,32,26,0.018) 56%, transparent 78%);
  filter: blur(3px); }
.stage-spot { position: absolute; inset: 14% 16% 22%; border-radius: 50%; z-index: 0; will-change: transform;
  background: radial-gradient(52% 46% at 50% 38%, rgba(255,255,255,0.85), rgba(14,138,95,0.05) 52%, transparent 74%);
  filter: blur(9px); opacity: 0.75; }
.stage-dais { position: absolute; bottom: 12.5%; left: 50%; width: 52%; height: 13%; transform: translateX(-50%);
  z-index: 1; will-change: transform; }
.stage-dais::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(50% 72% at 50% 44%, rgba(20,32,26,0.045), transparent 70%);
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px -14px rgba(20,32,26,0.38); }
.stage-dais::after { content: ""; position: absolute; left: 32%; right: 32%; top: 46%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity: 0.32; }
.stage-shadow { position: absolute; bottom: 15.5%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 11px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,32,26,0.42), transparent);
  animation: shadowBreathe 4s ease-in-out infinite; z-index: 2; }
.stage-motes { display: none; }
.mascot-parallax { position: relative; width: 80%; margin-bottom: 15%; z-index: 3;
  will-change: transform; cursor: pointer; transform: none; }
.mascot-idle { position: relative; transform-origin: 50% 100%;
  animation: floatY 4s ease-in-out infinite, sway 9s ease-in-out infinite; }
.mascot-breathe { display: block; transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite;
  -webkit-box-reflect: below -14px linear-gradient(transparent 60%, rgba(20,32,26,0.09)); }
.mascot-idle .flow { position: relative; opacity: 0; }
.mascot-idle .pose { position: absolute; inset: 0; width: 100%;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.6)); transition: opacity 0.2s; }
.mascot-idle .pose-win { opacity: 0; }
.hero-stage.cheer .pose-default { opacity: 0; }
.hero-stage.cheer .pose-win { opacity: 1; }
.hero-stage.cheer .mascot-idle { animation: hop 0.62s ease, sway 9s ease-in-out infinite; }
.hero-stage.blink .mascot-breathe { animation: breathe 3.4s ease-in-out infinite, blink 0.2s ease; }
.cheer-ring { position: absolute; bottom: 15%; left: 50%; width: 44%; aspect-ratio: 1;
  transform: translate(-50%, 50%) scale(0.3); border: 2px solid var(--brass-2); border-radius: 50%;
  opacity: 0; z-index: 2; pointer-events: none; }
.hero-stage.cheer .cheer-ring { animation: ring 0.7s ease-out; }
.stage-tag { position: absolute; bottom: 1.5%; left: 50%; transform: translateX(-50%);
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); z-index: 4; }

@keyframes floatY  { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3.4%) } }
@keyframes breathe { 0%,100% { transform: scale(1,1) } 50% { transform: scale(1.012,1.02) } }
@keyframes blink   { 0%,100% { scale: 1 1 } 50% { scale: 1 0.93 } }
@keyframes mote    { 0% { transform: translateY(0) scale(0.5); opacity: 0 } 16% { opacity: 0.8 }
  84% { opacity: 0.5 } 100% { transform: translateY(-165px) scale(1); opacity: 0 } }
@keyframes ring    { 0% { transform: translate(-50%,50%) scale(0.3); opacity: 0.9 }
  100% { transform: translate(-50%,50%) scale(1.55); opacity: 0 } }

@media (max-width: 900px) { .hero-stage { max-width: 400px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) {
  .mascot-idle, .mascot-breathe, .stage-shadow, .stage-motes i, .char-card img { animation: none !important; }
}
.char-card:nth-child(8) img { animation-delay: -0.9s } .char-card:nth-child(9) img { animation-delay: -1.6s }
.char-card:nth-child(10) img { animation-delay: -2.4s } .char-card:nth-child(11) img { animation-delay: -3.1s }
.char-card:nth-child(12) img { animation-delay: -1.3s }

/* code stays monospaced; labels/eyebrows use the sans (Geist) per request */
code, .code-block, .code-body, .code-head .f { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; }

/* ===== crypto-friendly rubber stamp ====================================== */
.hero .wrap { position: relative; }
/* Anchored inside .hero-stage, upper-right: part of the character composition
   instead of a mark floating in the column gap. */
.crypto-stamp { position: absolute; top: 3%; right: 1%; left: auto; width: clamp(104px, 11vw, 150px);
  transform: rotate(-13deg); z-index: 6; color: #2B4C8F; opacity: 0.82; pointer-events: none;
  mix-blend-mode: multiply; }
.crypto-stamp svg { width: 100%; height: auto; display: block; overflow: visible; }
.crypto-stamp .cs-arc { font-family: 'Geist', system-ui, sans-serif; font-size: 15px; font-weight: 800;
  letter-spacing: 2.5px; text-transform: uppercase; }
.crypto-stamp .cs-arc-b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.7px; }
/* Stacked layout: the stage is a square below the copy, so the stamp keeps the
   same upper-right corner — clear of the mascot, which stands at the bottom.
   right is never 0: the mark is rotated 13°, so its box is ~1.2× its own width
   and a flush edge pushed the whole page sideways. */
@media (max-width: 900px) { .crypto-stamp { top: 2%; bottom: auto; left: auto; right: 3%; width: 96px; } }
@media (max-width: 560px) { .crypto-stamp { width: 80px; right: 4%; } }