/* ==========================================================================
   PEEK — Shared Design System (peek.family)
   "Versta" clean-minimal LIGHT paint job: white paper canvas, near-black ink,
   peek green #0ba05c accent, bold Cabinet Grotesk headings, SOFT subtle shadows
   (blurred, no hard offsets), hairline 1px borders, pill buttons. Money
   green/red stay muted TEXT ONLY, never backgrounds/pills — only the
   palette/shadow/type language changed.
   One stylesheet reused by every page — page-specific tweaks live only in
   that page's own <style> block, never redefine these tokens/classes.
   ========================================================================== */

:root{
  /* ---- surfaces & ink: versta white paper ---- */
  --canvas:#ffffff;
  --panel:#ffffff;
  --panel-2:#f4f4f5;
  --ink:#101013;
  --ink-muted:#4d4d4d;
  --ink-faint:#8f8f8f;
  --border:rgba(16,8,44,.12);
  --border-soft:rgba(16,8,44,.06);

  /* ---- accent: peek green (#0ba05c / rgb 11,160,92). Logo, one primary CTA,
     live dot, the candle chart, focus rings. ---- */
  --accent:#0ba05c;
  --accent-hover:#088f52;
  --accent-soft:rgba(11,160,92,.10);
  --accent-deep:#067544;
  --accent-ink:#087a45;
  --accent-bar:#0ba05c;

  /* ---- muted money colors: text only, never fills ---- */
  --up:#16a34a;
  --down:#dc2626;

  /* ---- chart-only candle colors: deliberately vivid, unlike --up/--down.
     Muted text reads expensive for a "+12.6%" label but is wrong for a
     candlestick fill, where instant up/down legibility at ~4px width is the
     whole job. Text/pills/rows use --up/--down, never these. ---- */
  --chart-up:#16a34a;
  --chart-down:#dc2626;

  /* ---- pop palette: secondary accents, left defined for any lingering
     reference but no longer used for shadows/fills — versta keeps this
     surface strictly neutral+purple. ---- */
  --yellow:#ffd21f;
  --yellow-deep:#e3a900;
  --blue:#3b6fe0;
  --red:#dc2626;
  --teal:#17786a;
  --teal-deep:#10082c;
  --band:#e2cb79;

  /* ---- shadows: SOFT & subtle, purple-tinted like versta. No hard offsets,
     no zero-blur "sticker" look — every component using these tokens reads
     as a gentle elevation instead. ---- */
  --hard:0 1px 2px rgba(16,8,44,.06), 0 12px 32px -18px rgba(16,8,44,.22);
  --hard-sm:0 1px 2px rgba(16,8,44,.07);

  /* ---- elevation: every component that used the glass shadow now gets the
     same soft, purple-tinted lift. ---- */
  --glass-shadow:var(--hard);
  --shadow-sm:var(--hard-sm);

  /* ---- radii: versta is pill-happy. Buttons/tabs/viral-launch all use a
     full pill, not a rounded-rect. ---- */
  --r-panel:16px;
  --r-card:12px;
  --r-pill:999px;
  --r-btn:999px;

  /* Type: Satoshi (body/UI) + Cabinet Grotesk (display/headings) via Fontshare,
     JetBrains Mono via Google Fonts — loaded in each page's <head>. --font-serif
     is the DISPLAY token (name kept for back-compat; it's Cabinet Grotesk, not a serif). */
  --font-ui:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --font-serif:'Cabinet Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;

  /* ---- bare R,G,B triplets read by the canvas hero JS each frame ---- */
  --chart-grid:16,8,44;
  --chart-fade-1:255,255,255;
  --fade-strength:0.55;
}

/* Make the UA `hidden` attribute authoritative — a component rule like
   `.step-panel{display:flex}` would otherwise silently beat it and break
   every show/hide on the site. */
[hidden]{display:none !important;}


/* ================= DARK THEME ================= */
html[data-theme="dark"]{
  /* --panel is the brighter/raised surface, --panel-2 the darker/recessed
     one, both lifted off --canvas — a coherent near-black counterpart to the
     white light theme so the toggle still works. --border becomes a soft
     white hairline (a lightness delta alone doesn't read at these darks).
     --teal-deep is overridden here too, which keeps any lingering shadow-tint
     reference dark-appropriate. Accent stays the same peek green in both
     themes — consistent brand. These vars exist only inside this selector; the
     :root light theme above is untouched. */
  --canvas:#0b0b0c;
  --panel:#17171b;
  --panel-2:#16161a;
  --ink:#ececea;
  --ink-muted:#b8b8be;
  --ink-faint:#8f8f8f;
  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.06);

  --accent-soft:rgba(11,160,92,.22);
  --accent-ink:#8fe3bd;

  --up:#22c55e;
  --down:#ef4444;

  --teal-deep:#000000;

  /* dark-mode shadows swap the purple tint for a black one — same soft,
     blurred elevation, just recalibrated for a near-black surface. */
  --hard:0 1px 2px rgba(0,0,0,.5), 0 20px 48px -24px rgba(0,0,0,.7);
  --hard-sm:0 1px 2px rgba(0,0,0,.5);

  /* own candle pair for the dark panel — nudged brighter to hold the same
     instant legibility against near-black. */
  --chart-up:#22c55e;
  --chart-down:#ef4444;

  --chart-grid:236,236,234;
  --chart-fade-1:11,11,12;
  --fade-strength:0.35;
}

/* ================= RESET / BASE ================= */
*{margin:0;padding:0;box-sizing:border-box;}
/* overflow-x:clip on html and body — belt-and-braces against a fixed layer
   slipping past. The real 390px-overflow fix was the 100% width on those
   fixed layers (see #chartCanvas/.canvas-fade). */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;}
html,body{transition:background .4s ease,color .4s ease;}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-ui);
  /* `clip`, not `hidden`: overflow on body alone propagates to the viewport
     instead of clipping, so `hidden` did nothing; and `hidden` would create
     a scroll container that breaks the sticky nav. `clip` clips without one. */
  overflow-x:clip;
  position:relative;
  min-height:100vh;
  cursor:crosshair; /* trading-terminal feel; interactive elements override below */
}
a,button,input,textarea,select,.no-crosshair,.no-crosshair *{cursor:auto;}
a,button,summary{cursor:pointer;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img{max-width:100%;display:block;}

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

:focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:3px;
}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.serif{font-family:var(--font-serif);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ================= LAYOUT ================= */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px;}
.page{position:relative;z-index:2;}
.section{padding:64px 0;}

@media (max-width:768px){
  .wrap{padding:0 20px;}
  .section{padding:44px 0;}
}
@media (max-width:390px){
  .wrap{padding:0 16px;}
}

/* ================= CANVAS HERO BACKGROUND ================= */
/* The cursor-paints-candles engine. Both fixed layers use width:100% (NOT
   100vw) so they exclude the vertical scrollbar gutter — vw includes it,
   which pushed these full-page fixed layers ~15px wide and forced document
   overflow past 390px. 100% on a fixed element resolves against the viewport
   like vw but correctly drops the scrollbar width. */
#chartCanvas{
  position:fixed;top:0;left:0;
  width:100%;height:100vh;
  z-index:0;
  pointer-events:none;
}
.canvas-fade{
  position:fixed;top:0;left:0;
  width:100%;height:100vh;
  z-index:1;
  pointer-events:none;
  /* two-gradient vignette that fades the chart into the page: a vertical
     bottom-fade to --canvas, plus soft horizontal edge masks. */
  background:
    linear-gradient(180deg, rgba(var(--chart-fade-1),0.10) 0%, rgba(var(--chart-fade-1),var(--fade-strength)) 62%, var(--canvas) 94%),
    linear-gradient(90deg, rgba(var(--chart-fade-1),0.85) 0%, rgba(var(--chart-fade-1),0) 14%, rgba(var(--chart-fade-1),0) 86%, rgba(var(--chart-fade-1),0.85) 100%);
  transition:background .4s ease;
}
.cross-tag{
  position:fixed;z-index:5;pointer-events:none;
  right:14px;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:#fff;background:var(--accent);padding:2px 7px;border-radius:5px;
  border:1px solid var(--accent);
  opacity:0;transition:opacity .18s ease;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}

/* ================= NAV (identical markup every page) ================= */
.nav{position:sticky;top:0;z-index:50;padding:18px 0;}
.nav-inner{
  max-width:1320px;margin:0 auto;
  padding:10px 14px 10px 18px;
  display:flex;align-items:center;gap:28px;
  /* Clean floating nav: translucent white + blur is the one deliberate
     backdrop-filter in the whole system — everywhere else stays flat. */
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
html[data-theme="dark"] .nav-inner{background:rgba(23,23,27,.8);}
.brand{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-ui);font-weight:800;font-size:18px;letter-spacing:-0.01em;
  padding-right:6px;margin-right:2px;flex-shrink:0;
}
.brand-logo{
  height:34px;width:auto;display:block;
  filter:drop-shadow(0 2px 6px rgba(16,8,44,.18));
}
.nav-links{display:flex;align-items:center;gap:4px;flex:1;}
.nav-links a{
  font-size:14px;font-weight:700;color:var(--ink-muted);
  padding:8px 14px;border-radius:var(--r-pill);
  transition:background .18s ease,color .18s ease;
}
.nav-links a:hover{background:rgba(16,8,44,0.06);color:var(--ink);}
.nav-links a.active{color:var(--ink);background:var(--panel-2);}
html[data-theme="dark"] .nav-links a:hover{background:rgba(255,255,255,0.08);}

.nav-search{
  display:flex;align-items:center;gap:8px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:8px 12px 8px 14px;
  width:230px;color:var(--ink-faint);
}
.nav-search svg{width:14px;height:14px;flex-shrink:0;}
.nav-search input{
  border:none;background:none;outline:none;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink);width:100%;
}
.nav-search input::placeholder{color:var(--ink-faint);}
/* Placeholders render at reduced opacity beyond the CSS color in most
   engines — bump to --ink-muted in dark so the search hint stays legible. */
html[data-theme="dark"] .nav-search input::placeholder{color:var(--ink-muted);}
.kbd{
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);
  border:1px solid var(--border);background:var(--panel);
  border-radius:6px;padding:2px 6px;flex-shrink:0;
}

.theme-toggle{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--border);
  color:var(--ink-muted);flex-shrink:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-faint);}
.theme-toggle svg{width:16px;height:16px;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
html:not([data-theme="dark"]) .theme-toggle .icon-moon{display:none;}

/* Desktop-only right-edge cluster: theme toggle + Connect read as one tight
   unit anchored at the wrap edge. margin-right:-16px tightens only the gap to
   the next sibling (.btn-connect); every other nav gap keeps its rhythm. */
@media (min-width:901px){
  .theme-toggle{margin-left:auto;margin-right:-16px;}
}

/* 901-1100px: nothing collapses yet, so give the row breathing space —
   smaller link gap/padding/font, and the search field steps aside first
   (Cmd-K still reaches it) so five links keep clean room down to 901px. */
@media (max-width:1100px) and (min-width:901px){
  .nav-search{display:none;}
  .nav-inner{gap:14px;}
  .nav-links{gap:1px;}
  .nav-links a{padding:7px 10px;font-size:13px;}
}

@media (max-width:900px){
  .nav-links{display:none;}
  .nav-search{display:none;}
  /* Tighten the row and cluster controls right: brand left, then toggle /
     Connect / hamburger. Hamburger is injected before .theme-toggle, so the
     visual order is set with flex: theme starts the cluster (auto margin),
     burger flexes last via order. */
  .nav-inner{gap:8px;}
  .theme-toggle{margin-left:auto;margin-right:0;}
  .nav-toggle{order:10;}
  /* Pin Connect to 38px so it matches the two 38x38 control circles. */
  .btn-connect{height:38px;}
}

/* "Connect Wallet" -> "Connect" from 640px so the right cluster stays tidy
   through the whole <=900px tier. Scoped to .btn-connect so it always wins
   on specificity over the plain .btn-connect-label-short rule below. */
@media (max-width:640px){
  .btn-connect .btn-connect-label-full{display:none;}
  .btn-connect .btn-connect-label-short{display:inline;}
}

/* Very small screens: keep the nav on ONE line. Tighten gaps; the wordmark
   drops at 400px (the cut-out glass mark carries the brand). */
@media (max-width:480px){
  .nav{padding:12px 0;}
  .nav-inner{gap:10px;padding:8px 10px 8px 12px;}
  .brand{gap:7px;padding-right:0;margin-right:0;font-size:16px;}
  .brand-logo{height:28px;}
  .btn-connect{padding:9px 13px;font-size:12.5px;}
}
@media (max-width:400px){
  .brand span{display:none;}
}

/* ---- mobile nav toggle + dropdown panel (injected by js/peek.js) ---- */
.nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--panel-2);border:1px solid var(--border);
  color:var(--ink-muted);flex-shrink:0;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.nav-toggle:hover{color:var(--ink);border-color:var(--ink-faint);}
.nav-toggle svg{width:17px;height:17px;}
@media (max-width:900px){
  .nav-toggle{display:flex;}
}

.mobile-nav{
  display:none;
  position:absolute;top:calc(100% + 10px);left:14px;right:14px;
  z-index:60;
  background:var(--panel);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  border:1px solid var(--border);
  padding:10px;
  flex-direction:column;gap:2px;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  font-size:15px;font-weight:500;color:var(--ink-muted);
  padding:14px 14px;border-radius:14px;
  min-height:44px;box-sizing:border-box;display:flex;align-items:center;
  transition:background .18s ease,color .18s ease;
}
.mobile-nav a:hover,
.mobile-nav a:focus-visible{background:var(--panel-2);color:var(--ink);}
.mobile-nav a.active{color:var(--ink);background:var(--panel-2);}
.mobile-nav .nav-search{
  display:flex;width:100%;margin-top:6px;
}
@media (min-width:901px){
  .mobile-nav{display:none !important;}
}

/* ================= CONTRACT ADDRESS (CA) PILL ================= */
/* Built entirely by js/ca.js, only once window.PEEK_CA (that file's single
   source of truth) is a non-empty string. Zero DOM footprint and zero layout
   cost while PEEK_CA is empty — these rules only take effect after the owner
   sets the real address and redeploys. */
.ca-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:7px 9px 7px 12px;
  flex-shrink:0;
  transition:background .18s ease,border-color .18s ease;
}
.ca-pill:hover{border-color:var(--ink-faint);}
.ca-label{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
}
.ca-addr-btn{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  background:none;border:none;padding:0;cursor:pointer;
}
.ca-addr-btn svg{width:12px;height:12px;color:var(--ink-faint);flex-shrink:0;}
.ca-addr-btn:hover svg{color:var(--ink-muted);}
.ca-pill.is-copied{background:var(--accent-soft);border-color:transparent;}
.ca-pill.is-copied .ca-label,
.ca-pill.is-copied .ca-addr-btn,
.ca-pill.is-copied .ca-addr-btn svg{color:var(--accent-ink);}
.ca-link{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;color:var(--ink-faint);
  border-left:1px solid var(--border);padding-left:8px;margin-left:1px;
}
.ca-link:hover{color:var(--ink);}
.ca-link svg{width:12px;height:12px;}

/* Nav placement: js/ca.js appends the pill as the LAST child of .nav-inner,
   after the control cluster, so it never reorders those controls. */
.nav-inner > .ca-pill{margin-left:10px;}
@media (max-width:900px){
  /* Doesn't fit the tight one-line mobile nav — moves below it (.ca-bar). */
  .nav-inner > .ca-pill{display:none;}
}

/* Mobile below-nav bar: only in the DOM if js/ca.js built it (PEEK_CA set),
   visible <=900px, matching where the nav pill hides. */
.ca-bar{display:none;}
@media (max-width:900px){
  .ca-bar{display:flex;justify-content:center;padding-top:10px;}
}

/* Footer placement: compact, sits under "Powered by Pons" without stretching
   to the column's full width (the column flexbox would otherwise stretch it). */
.ca-pill--footer{align-self:flex-start;padding:5px 7px 5px 10px;margin-top:2px;}
.ca-pill--footer .ca-label{font-size:9px;}
.ca-pill--footer .ca-addr-btn{font-size:11.5px;}
.ca-pill--footer .ca-link{width:18px;height:18px;}
.ca-pill--footer .ca-link svg{width:10px;height:10px;}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-ui);font-size:14.5px;font-weight:700;
  padding:14px 24px;border-radius:var(--r-btn);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
}
/* Subtle lift, never a press-down: a small translateY + a touch more shadow. */
.btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--glass-shadow);
}
.btn:active{transform:translateY(0);}
.btn svg{width:14px;height:14px;flex-shrink:0;}
.btn-primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
/* Accent stays purple in both themes and the fill always gets white text, so
   this is a no-op pin — kept for parity/documentation, not because the value
   needs to differ from the base rule above. */
html[data-theme="dark"] .btn-primary{color:#fff;}
.btn-ghost{
  background:var(--panel);
  color:var(--ink);
}
.btn-ghost:hover{background:var(--panel-2);}
.btn-sm{padding:10px 16px;font-size:13px;}

.btn-connect{
  background:var(--ink);color:var(--canvas);
  font-family:var(--font-ui);font-weight:700;
  font-size:13.5px;
  padding:10px 18px;border-radius:var(--r-btn);
  border:1px solid var(--ink);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn-connect:hover{
  transform:translateY(-1px);
  box-shadow:var(--glass-shadow);
  opacity:.92;
}
/* Second short-label span, hidden by default, shown only <=640px (see the NAV
   media rule, scoped to .btn-connect so it outranks this plain-class rule). */
.btn-connect-label-short{display:none;}
.btn-connect .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ================= PANEL / CARD ================= */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  box-shadow:var(--glass-shadow);
  padding:22px 24px 24px;
  /* As a grid/flex item, min-width defaults to min-content and refuses to
     shrink below the un-wrapped table width. min-width:0 lets it shrink; its
     own .table-scroll's overflow-x:auto does the clipping. */
  min-width:0;
  /* Lets an unbreakable mono string (e.g. a contract address) break instead
     of forcing the panel wide; a no-op for ordinary prose. */
  overflow-wrap:anywhere;
}
.panel-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.panel-title{
  font-family:var(--font-serif);font-size:24px;font-weight:800;color:var(--ink);
  letter-spacing:-0.01em;
  display:flex;align-items:center;gap:10px;
}
.panel-title .count{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--ink-faint);background:var(--panel-2);
  border-radius:var(--r-pill);padding:3px 9px;
}
.panel-sub{font-size:12.5px;color:var(--ink-faint);}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--border);box-shadow:var(--glass-shadow);}

/* ---- section head (above card grids across pages) ---- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:32px;
  /* Anchors the absolutely-positioned .fx-accent illustration on some pages. */
  position:relative;
}
.section-title{
  font-family:var(--font-serif);font-size:36px;font-weight:800;letter-spacing:-0.02em;
  color:var(--ink);
}
.section-sub{font-size:14.5px;color:var(--ink-faint);margin-top:6px;}
.link-all{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--accent-ink);padding:10px 4px;
}
.link-all svg{width:14px;height:14px;transition:transform .2s ease;}
.link-all:hover svg{transform:translateX(3px);}

@media (max-width:768px){
  .section-title{font-size:28px;}
}

/* ================= STAT ================= */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.stat{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--shadow-sm);
}
.stat-label{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);display:flex;align-items:center;gap:6px;
}
.stat-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:600;color:var(--ink);}
.stat-sub{font-size:11.5px;color:var(--ink-faint);}
.stat-sub.up{color:var(--up);}
.stat-sub.down{color:var(--down);}

.live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent-deep);
  box-shadow:0 0 0 3px var(--accent-soft);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}

@media (max-width:1080px){.stats{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr);}}

/* ================= TABS ================= */
.tabs{
  display:flex;align-items:center;gap:2px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);padding:3px;
  width:fit-content;
  overflow-x:auto;
  /* fit-content sizes to the unshrunk nowrap row, so overflow-x:auto never
     engaged and the row pushed the page wide. max-width:100% clamps to the
     available space so it scrolls instead; min-width:0 removes the shrink
     refusal on pages where .tabs sits inside another flex row. */
  max-width:100%;
  min-width:0;
}
.tab{
  font-size:13px;font-weight:700;color:var(--ink-muted);
  padding:8px 16px;border-radius:var(--r-btn);
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.tab.active{background:var(--panel);color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-weight:700;}
.tab:not(.active):hover{color:var(--ink);}
/* Disabled tabs carry an inline opacity:.4 that composites to ~invisible on
   dark --panel-2; bump to .62 !important to keep them dimmed-but-legible. */
html[data-theme="dark"] .tab:disabled{opacity:.62 !important;color:var(--ink-muted);}

/* ================= BADGE ================= */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-ui);
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:4px 9px;
  white-space:nowrap;
}
.badge svg{width:11px;height:11px;}
/* Soft tinted chip, not a solid punchy fill — versta's clean-minimal badge. */
.badge-accent{color:var(--accent-ink);background:var(--accent-soft);border-color:transparent;}
.badge-dark{color:var(--panel);background:var(--ink);border-color:var(--ink);}

/* ================= BOND BAR ================= */
.bond-bar{display:flex;flex-direction:column;gap:6px;}
.bond-track{height:6px;background:var(--panel-2);border-radius:var(--r-pill);overflow:hidden;}
.bond-fill{height:100%;background:var(--accent-bar);border-radius:var(--r-pill);}
.bond-labels{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--ink-faint);font-family:var(--font-mono);
}
.bond-labels b{color:var(--ink-muted);font-weight:600;}

/* ================= COIN CARD ================= */
.coin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.coin-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  box-shadow:var(--glass-shadow);
  padding:22px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .15s ease,box-shadow .15s ease;
}
/* Gentle lift, not a press: nudge up and deepen the soft shadow slightly. */
.coin-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--glass-shadow);
}
.coin-top{display:flex;align-items:center;gap:12px;}
/* Monogram fallback: Satoshi 700 (a capital O/I/l reads as a digit inside a
   rounded square). overflow:hidden clips a real logo <img> to the tile's
   rounded corners; a bare monogram never overflows. */
.coin-tile{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative; /* anchors the ::after glass-P mark below */
  font-family:var(--font-ui);font-size:19px;font-weight:700;color:#fff;
}
.coin-tile img{width:100%;height:100%;object-fit:cover;display:block;}
/* ---- glass-P fallback ----
   Paints assets/mark-p.svg only when there is genuinely no logo. :has(img) is
   the JS-independent signal for "a real logo is present"; .has-logo covers the
   one builder that sets a background-image on the tile itself instead of a
   child <img>. The deterministic per-coin gradient underneath is untouched —
   the bare letter is only made invisible (color:transparent), not removed, so
   any later fallback logic still degrades safely. */
.coin-tile:not(:has(img)):not(.has-logo){color:transparent;}
.coin-tile:not(:has(img)):not(.has-logo) span{text-shadow:none;} /* neutralize the explore-grid avatar span's inline text-shadow so no ghost outline shows */
.coin-tile:not(:has(img)):not(.has-logo)::after{
  content:'';
  position:absolute;inset:16%;
  background-image:url('../assets/mark-p.svg');
  background-size:contain;background-position:center;background-repeat:no-repeat;
  pointer-events:none;
}

/* ---- RESOLVING state ----
   The glass-P mark means "this coin genuinely has no artwork", so it must only
   paint once that's known. A tile that carries .is-resolving from its first
   HTML frame suppresses the mark and runs a calm shimmer over its own gradient
   until the real answer settles. Placed AFTER the ::after rule to win the
   equal-specificity tie. */
.coin-tile.is-resolving:not(:has(img))::after{content:none;}
.coin-tile.is-resolving::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);
  background-size:220% 100%;
  animation:coinTileShimmer 1.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes coinTileShimmer{
  0%{background-position:120% 0;}
  100%{background-position:-20% 0;}
}
.coin-id{flex:1;min-width:0;}
.coin-name{font-size:15px;font-weight:700;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coin-ticker{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);}
.coin-chg{
  font-family:var(--font-mono);font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:3px;flex-shrink:0;
}
.coin-chg svg{width:10px;height:10px;}
.coin-chg.up{color:var(--up);}
.coin-chg.down{color:var(--down);}

/* Uneven-thirds grid (Liquidity/Kind/Creator). A flex row shrank items to
   min-content — and .panel's inherited overflow-wrap:anywhere shrank that to a
   single char, slicing words mid-letter. minmax(0,Nfr) tracks give each third
   a predictable width; overflow-wrap:normal here breaks the inheritance so
   words never split; white-space:nowrap + ellipsis on .k/.v is the correct
   fallback for a too-wide value. Widths reflect real content: Liquidity most
   (21), Creator next (17), Kind least (12). Always minmax(0,...) so the row
   can never force the card wider. */
.coin-stats{display:grid;grid-template-columns:minmax(0,21fr) minmax(0,12fr) minmax(0,17fr);gap:8px;overflow-wrap:normal;}
.coin-stats>div{min-width:0;}
.coin-stats .k{font-size:11px;color:var(--ink-faint);margin-bottom:4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.coin-stats .v{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width:1080px){.coin-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.coin-grid{grid-template-columns:1fr;}}

/* ================= MARKET CARD — HERO ART =================
   explore.html's "Live market" grid card only (marketCardHTML() into
   #marketGridView): a large square image at the top, full card width, then
   name / $ticker / market-cap / supporting numbers underneath — same light-
   glass language (--panel/--border/--r-panel), not a dark theme switch.
   Deliberately does NOT touch .coin-card/.coin-tile/.coin-top/.coin-name/
   .coin-ticker/.coin-stats; other boards keep their small-thumbnail anatomy.
   .coin-name/.coin-ticker are reused inside .mk-id with their global rules. */
.mk-art{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);
  font-family:var(--font-ui);font-weight:700;color:#fff;
  font-size:clamp(24px,6vw,44px);
}
.mk-art-top{
  position:absolute;top:10px;left:10px;right:10px;
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:6px;z-index:3;min-width:0;
}
.mk-art-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;}
.mk-body{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.mk-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
/* Market cap is the card's headline number, monospace and prominent. .empty is
   the honest "DexScreener returned no market cap" case — never a fabricated $0. */
.mk-cap-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;flex-wrap:wrap;}
.mk-cap-main{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap;}
.mk-cap-label{font-size:11px;color:var(--ink-faint);font-weight:500;flex-shrink:0;}
.mk-cap-value{font-family:var(--font-mono);font-size:21px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.mk-cap-value.empty{color:var(--ink-faint);font-weight:600;font-size:15px;}
/* Supporting numbers (24h volume, holders) — demoted below the cap, faint. */
.mk-sub-row{display:flex;align-items:center;gap:16px;min-width:0;flex-wrap:wrap;}
.mk-sub-item{display:flex;align-items:baseline;gap:5px;min-width:0;font-size:12px;}
.mk-sub-k{color:var(--ink-faint);flex-shrink:0;}
.mk-sub-v{font-family:var(--font-mono);color:var(--ink-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}

/* ---- launch age ---- Real elapsed time since a coin's on-chain launch tx,
   from window.PeekChainIndex (js/chainindex.js). Quieter than .mk-sub-v — an
   age is a supporting fact — so placed after it to win the tie on the same
   element. Never fabricated: no known launch tx renders no age at all. */
.coin-age{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--ink-faint);white-space:nowrap;flex-shrink:0;}

/* ================= VIRAL CARD ================= */
.viral-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.viral-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--glass-shadow);
  padding:20px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.viral-card:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow);}
.viral-plat{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.04em;
}
.viral-plat svg{width:15px;height:15px;color:var(--ink-muted);}
.viral-trend{font-size:16px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;}
.viral-meta{
  font-family:var(--font-mono);font-size:12px;color:var(--accent-ink);
  display:flex;align-items:center;gap:6px;
}
.viral-meta svg{width:10px;height:10px;}
.viral-spark{width:100%;height:28px;color:var(--accent-deep);}
.viral-launch{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--panel);border:1px solid var(--border);color:var(--ink);
  font-family:var(--font-ui);font-size:13px;font-weight:700;padding:11px;border-radius:var(--r-btn);
  box-shadow:var(--shadow-sm);
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.viral-launch svg{width:14px;height:14px;flex:0 0 14px;}
.viral-launch:hover,
.viral-launch:focus-visible{
  background:var(--accent);color:#fff;border-color:var(--accent);
  transform:translateY(-1px);box-shadow:var(--glass-shadow);
}
/* The #1 trend card keeps the accent fill at rest — the one place the accent
   marks something permanently, not just on interaction. */
.viral-top .viral-launch{background:var(--accent);color:#fff;border-color:var(--accent);}
/* Defensive: a bare <svg viewBox> stretches to fill its flex parent. Every
   icon slot sets its own size; this caps any missed one. */
button svg, a svg, .badge svg, .chip svg{max-width:22px;max-height:22px;}
/* Widened to loose SVGs in table cells / list rows, the other homes this
   bug finds. A rule with explicit width/height still wins on specificity. */
td svg, li svg{max-width:22px;max-height:22px;}

@media (max-width:1080px){.viral-row{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.viral-row{grid-template-columns:1fr;}}

/* ================= TICKER =================
   Flex row: the scrolling track lives in .ticker-scroll (owns overflow +
   vertical padding), with .ticker-pons pinned as a flex-shrink:0 sibling at
   the end — visible on every page without scrolling. #tickerTrack keeps its
   id and DOM shape one level deeper. */
.ticker{
  position:relative;z-index:10;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
  margin-top:6px;
  display:flex;align-items:stretch;
}
.ticker-scroll{flex:1;min-width:0;overflow:hidden;padding:13px 0;}
.ticker-track{display:flex;width:max-content;animation:tickerScroll 38s linear infinite;}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-item{
  display:flex;align-items:center;gap:8px;
  padding:0 26px;font-family:var(--font-mono);font-size:13px;white-space:nowrap;
  border-right:1px solid var(--border-soft);
}
.ticker-item .sym{font-weight:600;color:var(--ink);}
.ticker-item .chg{display:flex;align-items:center;gap:3px;font-weight:600;}
.ticker-item .chg.up{color:var(--up);}
.ticker-item .chg.down{color:var(--down);}
.ticker-item .chg svg{width:9px;height:9px;}
.ticker-item .badge{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);
  padding:2px 6px;border-radius:5px;font-family:var(--font-ui);border:none;
}
/* Pinned "Powered by Pons" chip — persistent on every page, outside the
   scroll overflow so it never animates or clips with the track. */
.ticker-pons{
  flex-shrink:0;display:flex;align-items:center;gap:5px;
  padding:0 22px;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);
  border-left:1px solid var(--border-soft);
  text-decoration:none;white-space:nowrap;
  transition:color .18s ease;
}
.ticker-pons:hover{color:var(--ink);}
.ticker-pons-name{color:var(--accent-ink);font-weight:700;}
@media (max-width:480px){
  .ticker-pons{padding:0 14px;font-size:11px;gap:0;}
  .ticker-pons-label{display:none;}
}

/* ================= TABLE ================= */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{
  text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-faint);padding:0 14px 10px;white-space:nowrap;
}
.table td{
  padding:14px;border-top:1px solid var(--border-soft);
  color:var(--ink);white-space:nowrap;
}
.table tbody tr{transition:background .15s ease;}
.table tbody tr:hover{background:var(--panel-2);}
.table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.table .up{color:var(--up);}
.table .down{color:var(--down);}

/* ================= FIELD / INPUT ================= */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-muted);}
.field-hint{font-size:11.5px;color:var(--ink-faint);}
.input{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:13px 15px;
  font-family:var(--font-ui);font-size:14px;color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder{color:var(--ink-faint);}
.input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--accent-soft);}
textarea.input{resize:vertical;min-height:96px;}

/* ================= MODAL ================= */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(16,8,44,0.45);
}
.modal-overlay.open{display:flex;}
.modal{
  width:100%;max-width:420px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-panel);
  box-shadow:var(--glass-shadow);
  padding:24px;
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-family:var(--font-serif);font-size:22px;font-weight:800;color:var(--ink);}
.modal-close{
  width:32px;height:32px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-faint);background:var(--panel-2);
  border:1px solid var(--border);
}
.modal-close:hover{color:var(--ink);}
.modal-close svg{width:15px;height:15px;}
.modal-body{display:flex;flex-direction:column;gap:12px;}
.modal-foot{margin-top:18px;display:flex;gap:10px;}

/* ================= HERO =================
   .hero-inner is a named-area grid at every width, not block flow. Below
   1240px this drives the two-column layout without touching the DOM — the art
   keeps its source position (between .hero-cta and .hero-stats) at every tier;
   only the grid-area assignment moves it. Base (<640px) is a single column
   with the art banner between eyebrow and h1, never after the CTA/stats.
   >=1240px keeps the original template (art goes position:absolute). */
.hero{position:relative;padding:96px 0 76px;}
.hero-inner{
  max-width:860px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"eyebrow" "art" "h1" "sub" "cta" "stats";
  row-gap:0;
}
.hero-inner .hero-badges{grid-area:eyebrow;}
.hero-inner h1{grid-area:h1;}
.hero-inner .hero-sub{grid-area:sub;}
.hero-inner .hero-cta{grid-area:cta;}
.hero-inner .hero-art{grid-area:art;}
.hero-inner .hero-stats{grid-area:stats;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-deep);
  padding:6px 13px 6px 11px;border-radius:var(--r-pill);
  font-weight:600;
}
/* Above-the-fold "Powered by Pons" credential — a second credential chip next
   to the eyebrow, same shape/weight. .hero-badges carries the margin-bottom;
   wraps to its own line on narrow widths rather than shrinking either pill. */
.hero-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.pons-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ink-muted);
  background:var(--accent-soft);border:1px solid var(--accent-deep);
  padding:6px 13px;border-radius:var(--r-pill);
  font-weight:600;text-decoration:none;transition:border-color .18s ease;
}
.pons-badge:hover{border-color:var(--ink);}
.pons-badge-name{color:var(--accent-ink);font-weight:700;}
@media (max-width:360px){
  .pons-badge-label{display:none;}
}
/* Bare h1 stays fixed (viral/token hero titles inherit it and only override
   font-size). All responsive hero sizing is scoped to .hero-inner h1 so those
   pages render unchanged. */
h1{
  font-family:var(--font-serif);
  font-size:76px;line-height:0.98;letter-spacing:-0.02em;font-weight:800;
  margin-bottom:26px;
  color:var(--ink);
}
/* Mobile-first single-column tier; wider tiers override below, >=1240px
   restores 76px explicitly. */
.hero-inner h1{
  font-size:clamp(32px,9vw,44px);margin-bottom:20px;
}
h1 em{
  font-family:var(--font-serif);font-style:normal;font-weight:800;
  color:var(--accent-ink);
}
/* Solid-fill accent word, no stroke/shadow — versta's clean treatment. */
h1 .outline{color:var(--accent);}
.hero-sub{font-size:15.5px;line-height:1.55;font-weight:700;color:var(--ink-muted);max-width:560px;margin-bottom:30px;}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
.hero-stats{display:flex;gap:24px;padding-top:28px;border-top:1px solid var(--border);max-width:640px;flex-wrap:wrap;}
.hero-stats .stat{
  background:none;border:none;box-shadow:none;padding:0;gap:6px;
}
.hero-stats .num{
  font-family:var(--font-serif);font-size:22px;font-weight:800;letter-spacing:-0.02em;
  color:var(--ink);line-height:1;
}
.hero-stats .lbl{font-size:12px;color:var(--ink-faint);font-weight:500;}

/* ---- 640-1239px: true two-column hero (copy left, art right). h1 shrinks
   per tier so the text column breathes next to the art column. ---- */
@media (min-width:640px) and (max-width:1239px){
  .hero-inner{
    max-width:none;
    grid-template-columns:1fr var(--hero-art-w, 300px);
    grid-template-areas:
      "eyebrow eyebrow"
      "h1      art"
      "sub     art"
      "cta     art"
      "stats   stats";
    column-gap:28px;
  }
  .hero-inner .hero-art{align-self:center;}
}
@media (min-width:640px) and (max-width:767px){
  .hero-inner{--hero-art-w:260px;column-gap:20px;}
  .hero-inner h1{font-size:32px;margin-bottom:16px;}
  .hero-sub{font-size:14.5px;margin-bottom:24px;}
  .hero-cta{margin-bottom:32px;}
}
@media (min-width:768px) and (max-width:899px){
  .hero{padding:64px 0 52px;}
  .hero-inner{--hero-art-w:300px;column-gap:28px;}
  .hero-inner h1{font-size:42px;margin-bottom:18px;}
  .hero-sub{font-size:16px;margin-bottom:26px;}
}
@media (min-width:900px) and (max-width:1023px){
  .hero{padding:76px 0 56px;}
  .hero-inner{--hero-art-w:360px;column-gap:32px;}
  .hero-inner h1{font-size:50px;margin-bottom:20px;}
  .hero-sub{font-size:17px;margin-bottom:30px;}
  .hero-stats .num{font-size:26px;}
}
@media (min-width:1024px) and (max-width:1151px){
  .hero{padding:84px 0 64px;}
  .hero-inner{--hero-art-w:400px;column-gap:36px;}
  .hero-inner h1{font-size:58px;margin-bottom:22px;}
  .hero-sub{font-size:18px;margin-bottom:34px;}
  .hero-stats{gap:36px;}
  .hero-stats .num{font-size:30px;}
}
@media (min-width:1152px) and (max-width:1239px){
  .hero{padding:90px 0 70px;}
  .hero-inner{--hero-art-w:460px;column-gap:40px;}
  .hero-inner h1{font-size:66px;margin-bottom:24px;}
  .hero-sub{font-size:18.5px;margin-bottom:36px;}
  .hero-stats{gap:40px;}
  .hero-stats .num{font-size:32px;}
}
/* ---- >=1240px: original desktop tier; art goes position:absolute (own rule
   below) so it needs no grid track. ---- */
@media (min-width:1240px){
  .hero-inner{
    max-width:860px;
    grid-template-columns:1fr;
    grid-template-areas:"eyebrow" "h1" "sub" "cta" "stats";
  }
  .hero-inner h1{font-size:76px;margin-bottom:26px;}
  .hero-sub{font-size:19px;margin-bottom:38px;}
  .hero-cta{margin-bottom:56px;}
  .hero-stats{gap:44px;padding-top:36px;}
  .hero-stats .num{font-size:34px;}
  .hero-stats .lbl{font-size:12.5px;}
}

/* ================= CTA STRIP ================= */
.cta-strip{
  margin:16px 0 24px;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:var(--r-panel);padding:64px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  position:relative;overflow:hidden;
  box-shadow:var(--glass-shadow);
}
.cta-strip::before{
  content:'';position:absolute;top:-40%;right:-10%;
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.cta-text h3{
  font-family:var(--font-serif);font-size:38px;font-weight:800;color:#fff;
  margin-bottom:12px;letter-spacing:-0.02em;
}
.cta-text p{color:#fff;opacity:.82;font-size:15.5px;max-width:420px;}
/* Inverse CTA: white pill on the solid purple strip. */
.cta-strip .btn-primary{
  background:#fff;color:var(--accent);
  border-color:#fff;
  box-shadow:var(--shadow-sm);flex-shrink:0;
}
.cta-strip .btn-primary:hover{background:#fff;color:var(--accent-hover);opacity:.92;}

@media (max-width:800px){
  .cta-strip{flex-direction:column;align-items:flex-start;padding:44px 32px;}
  .cta-text h3{font-size:28px;}
}

/* ================= STEPS (how it works) ================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.step{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-card);padding:22px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:8px;
}
.step-num{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:6px;
}
.step-title{font-size:17px;font-weight:700;letter-spacing:-0.01em;}
.step-desc{font-size:13.5px;color:var(--ink-muted);line-height:1.5;}

@media (max-width:960px){.steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.steps{grid-template-columns:1fr;}}

/* ================= TRUST GRID ================= */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.trust-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--r-card);padding:22px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:12px;
}
.trust-icon{
  width:38px;height:38px;border-radius:11px;
  background:var(--accent-soft);color:var(--accent-ink);
  border:1px solid var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
}
.trust-icon svg{width:19px;height:19px;}
.trust-title{font-size:16px;font-weight:700;letter-spacing:-0.01em;}
.trust-desc{font-size:13.5px;color:var(--ink-muted);line-height:1.5;}
.trust-tag{
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:.06em;margin-top:auto;padding-top:8px;
}

@media (max-width:960px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr;}}

/* ================= FAQ ================= */
.faq{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-panel);box-shadow:var(--glass-shadow);overflow:hidden;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;font-size:15.5px;font-weight:600;color:var(--ink);
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .chev{width:16px;height:16px;color:var(--ink-faint);transition:transform .2s ease;flex-shrink:0;}
.faq-item[open] .faq-q .chev{transform:rotate(180deg);}
.faq-a{padding:0 24px 22px;font-size:14px;line-height:1.6;color:var(--ink-muted);max-width:680px;}

/* ================= FOOTER ================= */
/* index uses .footer-top; the subpages use .footer-inner as the top wrapper
   with the same children — both are styled identically here so the footer
   normalizes to one consistent wrapper across every page. */
.footer{border-top:1px solid var(--border);padding:64px 0 32px;}
.footer-top,
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink-muted);max-width:340px;}
.footer-brand img{height:20px;width:auto;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(16,8,44,.16));}
.footer-cols{display:grid;grid-template-columns:repeat(4,auto);gap:40px;}
.footer-col{display:flex;flex-direction:column;gap:10px;min-width:120px;}
.footer-col-h{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);
}
.footer-col a{font-size:13.5px;color:var(--ink-muted);}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--border);
}
.footer-copy{font-size:12px;color:var(--ink-faint);}
.footer-note{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-faint);
  text-align:right;max-width:520px;
}
@media (max-width:640px){
  .footer{padding:48px 0 28px;}
  .footer-top,
  .footer-inner{flex-direction:column;align-items:flex-start;gap:28px;}
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px;width:100%;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;}
  .footer-note{text-align:left;max-width:none;}
}
@media (max-width:420px){
  .footer-cols{grid-template-columns:1fr;}
}
.data-note{
  display:flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--ink-faint);
}
.data-note svg{width:12px;height:12px;flex-shrink:0;}

/* ---- empty state (page-scoped fallback for board/list sections) ---- */
.empty-state{padding:48px 0;text-align:center;color:var(--ink-faint);font-size:14px;}

/* ================= POWERED BY PONS =================
   Quiet attribution, not a headline: Pons (PonsLaunchFactory) is the single
   largest source of coins on the board, alongside lemon.fun, DexScreener and
   Blockscout — each named honestly in every page's own sourcing lines. This is
   an addition, never a replacement. .footer-brand-block wraps the existing
   .footer-brand so the tagline and this line stack in the same footer slot. */
.footer-brand-block{display:flex;flex-direction:column;gap:6px;max-width:340px;}
.powered-by-pons{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink-muted);
}
.powered-by-pons a{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-decoration-color:rgba(74,31,208,0.35);text-underline-offset:2px;}
.powered-by-pons a:hover{text-decoration-color:currentColor;}

/* ================= RESPONSIVE (global) ================= */
@media (max-width:1024px){
  .wrap{padding:0 24px;}
}

/* ================= MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;}
  .live-dot{animation:none;}
  *{scroll-behavior:auto !important;}
  /* Resolving shimmer becomes a static, calm tint — still distinct from the
     resolved gradient, never moving. */
  .coin-tile.is-resolving::before{animation:none;background-position:50% 0;}
}

/* ================= FX ILLUSTRATIONS (3D clay set) =================
   Decorative, art-directed: the launch-pad hero scene on index.html, small
   header accents on the other pages. Never over interactive controls or data,
   pointer-events:none, z-index below .nav's 50, one shared contact shadow,
   entrance is opacity/transform only. */
:root{
  --fx-shadow:drop-shadow(0 12px 24px rgba(16,8,44,.18));
}
html[data-theme="dark"]{
  --fx-shadow:drop-shadow(0 12px 24px rgba(0,0,0,.55));
}

@keyframes fxRise{
  from{opacity:0;transform:translateY(10px) scale(.97);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
/* Idle float, layered over fxRise's one-time entrance — lives on the image/
   model one level inside the fxRise wrapper so the two transform animations
   never fight over the same property on the same element. Symmetric ease so
   the loop never snaps back. */
@keyframes fxFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}

/* The art is not selectable content — lock select/drag on the wrappers AND
   their img/model-viewer children. model-viewer's auto-rotate is a time-based
   loop, so it keeps spinning fine with pointer-events:none. */
.hero-art,.hero-art-static,.fx-accent,
.hero-art img,.hero-art-3d,.hero-art-static,.fx-accent img{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* ---- hero scene, index.html only.
   Base (<640px): a compact right-aligned banner ABOVE the headline (grid-area
   places it between eyebrow and h1, never after CTA/stats), bleeding off the
   wrap's 24px edge padding (margin-right cancels it exactly; overflow-x:clip
   sitewide means the bleed can never create horizontal scroll). ---- */
.hero-art{
  position:relative;
  width:210px;
  margin:0 -24px 22px auto;
  display:flex;
  justify-content:center;
  z-index:1;
  animation:fxRise .7s cubic-bezier(0.16,1,0.3,1) .08s both;
}
.hero-art img,.hero-art-3d,.hero-art-static{
  display:block;width:100%;height:auto;
  filter:var(--fx-shadow);
  animation:fxFloat 7s cubic-bezier(0.65,0,0.35,1) infinite;
}
/* Single static hero rocket (assets/fx-hero.svg) at every width. The former
   <model-viewer> 3D path was removed (no .glb authored; it only duplicated this
   same SVG at >=1240px, rendering the rocket twice on desktop). */
.hero-art-static{display:block;}
/* 640-1239px two-column tier: art fills its grid column (--hero-art-w, set per
   breakpoint on .hero-inner), dropping the banner's right-bleed/float. */
@media (min-width:640px) and (max-width:1239px){
  .hero-art{width:100%;margin:0;animation-delay:.15s;}
}
@media (min-width:1240px){
  .hero-art{
    position:absolute;top:54px;right:-6px;
    width:500px;margin:0;
    display:block;
    animation-delay:.15s;
  }
}
@media (min-width:1440px){ .hero-art{width:560px;top:44px;} }

/* ---- small header accents shared by explore/leaderboard/viral/portfolio/
   create. Visible at every width; scaled down through a tablet tier, then
   handled per page at phone width since the header shapes differ. ---- */
.fx-accent{
  display:block;
  pointer-events:none;
  z-index:1;
  animation:fxRise .6s cubic-bezier(0.16,1,0.3,1) both;
}
.fx-accent img{
  display:block;width:100%;height:auto;
  filter:var(--fx-shadow);
  animation:fxFloat 6.5s cubic-bezier(0.65,0,0.35,1) infinite;
}

/* explore/leaderboard/portfolio host their accent inside the shared flex
   .section-head. Kept as a real flex item (not absolute) so the row reserves
   space for it and a width squeeze wraps it onto its own line. The title+sub
   block gets a capped max-width so the accent can sit beside it. */
.section-head .fx-accent{flex:none;align-self:flex-start;}
.fx-accent.fx-explore{width:140px;}
.fx-accent.fx-leaderboard{width:130px;}
.fx-accent.fx-portfolio{width:150px;}
@media (min-width:901px){
  .section-head .sh-text{max-width:calc(100% - 180px);}
}
/* tablet: still beside/above the heading, sized down. */
@media (max-width:900px){
  .fx-accent.fx-explore,.fx-accent.fx-leaderboard,.fx-accent.fx-portfolio{width:104px;margin:0 0 10px auto;}
}
/* phone: wraps onto its own line above the sub copy — kept small, not hidden. */
@media (max-width:640px){
  .fx-accent.fx-explore,.fx-accent.fx-leaderboard,.fx-accent.fx-portfolio{width:80px;}
}

/* viral's and create's headers aren't flex rows — their copy is capped/short
   at desktop so an absolute top-right accent never reaches the text. At <=640
   the copy is full width, so the accent switches to static/centered below it. */
.fx-accent.fx-viral,.fx-accent.fx-create{position:absolute;}
.fx-accent.fx-viral{top:-2px;right:0;width:130px;}
.fx-accent.fx-create{top:-16px;right:0;width:150px;}
@media (max-width:900px){
  .fx-accent.fx-viral{width:100px;}
  .fx-accent.fx-create{width:110px;}
}
@media (max-width:640px){
  .fx-accent.fx-viral,.fx-accent.fx-create{
    position:static;
    width:80px;
    margin:14px auto 0;
  }
}

/* ================= MOTION: hero text/CTA entrance (index.html only) ============= */
@keyframes heroEnter{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-inner .hero-badges,.hero-inner h1,.hero-inner .hero-sub,.hero-inner .hero-cta{
  animation:heroEnter .6s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-inner .hero-badges{animation-delay:.05s;}
.hero-inner h1{animation-delay:.15s;}
.hero-inner .hero-sub{animation-delay:.25s;}
.hero-inner .hero-cta{animation-delay:.35s;}

/* ================= MOTION: gentle hover lift where a card/button didn't
   already have one (.coin-card/.card/.viral-card/.btn/.btn-connect had
   theirs) — nudge up and deepen the soft shadow, never a press-down. === */
.step{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.step:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow);border-color:var(--border);}
.trust-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.trust-card:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow);border-color:var(--border);}

@media (prefers-reduced-motion:reduce){
  .hero-art,.hero-art img,.hero-art-3d,.hero-art-static,.fx-accent,.fx-accent img{animation:none;}
  .hero-inner .hero-badges,.hero-inner h1,.hero-inner .hero-sub,.hero-inner .hero-cta{animation:none;}
  .btn:hover,.btn:active,.btn-connect:hover,.viral-launch:hover,.step:hover,.trust-card:hover,
  .card:hover,.coin-card:hover,.viral-card:hover{transform:none;}
}

/* ==========================================================================
   $PEEK CA — hero placement (built by js/ca.js, variant 'hero').
   Full-length address in a full-width glowing bar under the two CTAs. The
   glow breathes on a slow loop and a gloss sweep crosses the bar; both sit
   BEHIND the characters and both stop under reduced-motion.
   ========================================================================== */
.ca-pill--hero{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; max-width:640px; margin:18px 0 4px;
  padding:12px 16px; border-radius:14px;
  background:var(--accent-soft);
  border:1px solid var(--accent-deep);
  box-shadow:var(--shadow-sm);
  overflow:hidden; isolation:isolate;
  animation:ca-hero-glow 3.2s ease-in-out infinite;
}
.ca-pill--hero > *{ position:relative; z-index:2; }
.ca-pill--hero::before{
  content:""; position:absolute; z-index:1; top:-60%; bottom:-60%; left:-30%;
  width:34%; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-180%) rotate(16deg);
  animation:ca-hero-shine 3.2s cubic-bezier(.5,0,.35,1) infinite;
}
.ca-pill--hero .ca-label{
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:11px; font-weight:700; letter-spacing:0.14em;
  color:var(--accent-ink); flex:none;
}
.ca-pill--hero .ca-addr-btn{
  display:inline-flex; align-items:center; gap:10px; flex:1; min-width:0;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-mono, ui-monospace, monospace);
  font-size:14px; letter-spacing:0.02em; color:var(--ink, inherit);
}
.ca-pill--hero .ca-addr-btn [data-slot="addr"]{
  overflow-wrap:anywhere; text-align:left;
}
.ca-pill--hero .ca-addr-btn svg{ width:15px; height:15px; flex:none; opacity:.75; }
.ca-pill--hero .ca-link svg{ width:15px; height:15px; display:block; }
.ca-pill--hero .ca-link{ color:var(--accent-ink); flex:none; }
.ca-pill--hero.is-copied{ border-color:var(--accent); }
/* Soft glow "breathe" instead of a hard-shadow pulse — a blurred purple-tinted
   shadow that gently deepens, never a zero-blur offset. */
@keyframes ca-hero-glow{
  0%,100%{ box-shadow:0 1px 2px rgba(16,8,44,.07); }
  50%    { box-shadow:0 4px 18px -6px rgba(11,160,92,.35); }
}
@keyframes ca-hero-shine{
  0%  { transform:translateX(-180%) rotate(16deg); }
  60% { transform:translateX(680%)  rotate(16deg); }
  100%{ transform:translateX(680%)  rotate(16deg); }
}
@media (prefers-reduced-motion: reduce){
  .ca-pill--hero{ animation:none; box-shadow:var(--shadow-sm); }
  .ca-pill--hero::before{ animation:none; opacity:0; }
}
@media (max-width: 560px){
  .ca-pill--hero .ca-addr-btn{ font-size:11.5px; }
}
html[data-theme="dark"] .ca-pill--hero{ background:rgba(11,160,92,0.16); }
