<?php
/**
 * Unified site header — include at the top of every page.
 *
 * Set these variables BEFORE including this file:
 *   $page          — 'home' | 'product' | 'whitepaper' | '' (controls active nav tab)
 *   $pageTitle     — <title> string
 *   $pageDesc      — meta description (optional)
 *   $pageExtraHead — raw HTML injected inside <head> before </head> (optional)
 */
$page          = $page          ?? '';
$pageTitle     = $pageTitle     ?? 'Aptum — $A';
$pageDesc      = $pageDesc      ?? 'Aptum is an autonomous AI agent on Base generating real revenue. Every dollar earned flows back to $A holders via buybacks, burns, and airdrops.';
$pageExtraHead = $pageExtraHead ?? '';
?><!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></title>
<meta name="description" content="<?= htmlspecialchars($pageDesc, ENT_QUOTES, 'UTF-8') ?>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet">
<?= $pageExtraHead ?>
<style>
/* ══════════════════════════════════════
   SHARED DESIGN TOKENS — LIGHT MODE
══════════════════════════════════════ */
:root {
  --bg:        #F4F5F8;
  --bg1:       #ECEEF3;
  --bg2:       #FFFFFF;
  --bg3:       #F8F9FB;
  --bdr:       rgba(9,11,16,0.10);
  --bdr2:      rgba(9,11,16,0.18);
  --bdr3:      rgba(9,11,16,0.28);
  --ink:       #0A0C12;
  --ink2:      rgba(10,12,18,0.80);
  --ink3:      rgba(10,12,18,0.58);
  --ink4:      rgba(10,12,18,0.40);
  --ink5:      rgba(10,12,18,0.18);
  --green:     #0B7A42;
  --green-bg:  rgba(11,122,66,0.07);
  --green-hi:  rgba(11,122,66,0.14);
  --red:       #B91C1C;
  --mono:      'IBM Plex Mono', monospace;
  --disp:      'Syne', sans-serif;
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --t-xs:      80ms;
  --t-sm:      140ms;
  --t-md:      240ms;
  --t-lg:      420ms;
}

/* ── Dark mode tokens ── */
html[data-theme="dark"] {
  --bg:        #0D0F14;
  --bg1:       #141720;
  --bg2:       #1A1D26;
  --bg3:       #1F2330;
  --bdr:       rgba(255,255,255,0.07);
  --bdr2:      rgba(255,255,255,0.12);
  --bdr3:      rgba(255,255,255,0.22);
  --ink:       #EFF1F8;
  --ink2:      rgba(239,241,248,0.82);
  --ink3:      rgba(239,241,248,0.58);
  --ink4:      rgba(239,241,248,0.38);
  --ink5:      rgba(239,241,248,0.16);
  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,0.10);
  --green-hi:  rgba(34,197,94,0.18);
  --red:       #f87171;
}

/* ── Smooth theme transition (only while switching) ── */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color 220ms ease,
    color            220ms ease,
    border-color     220ms ease,
    box-shadow       220ms ease !important;
}

/* ══ RESET ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light dark; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(9,11,16,0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,11,16,0.042) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
html[data-theme="dark"] body::after {
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
}

/* ══ KEYFRAMES ══ */
@keyframes blink         { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes scroll        { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fade-up       { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in       { from{opacity:0} to{opacity:1} }
@keyframes scale-up      { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
@keyframes pulse-ring    {
  0%  { transform:scale(.9); box-shadow:0 0 0 0 rgba(11,122,66,.5); }
  70% { transform:scale(1);  box-shadow:0 0 0 6px rgba(11,122,66,0); }
  100%{ transform:scale(.9); box-shadow:0 0 0 0 rgba(11,122,66,0); }
}
@keyframes float-wm      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer       { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes bar-grow      { from{width:0} to{width:var(--w,100%)} }
@keyframes slide-in-left { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes riseIn        { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ══ CURSOR ══ */
#cursor {
  position: fixed; z-index: 9999; pointer-events: none;
  transform: translate(-50%,-50%);
  transition: transform var(--t-xs) linear;
}
#cursor-dot {
  width: 7px; height: 7px; background: var(--ink); border-radius: 50%;
  transition: transform var(--t-md) var(--ease-out), background var(--t-sm);
}
#cursor-x-h {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:18px; height:1px; background:rgba(9,11,16,.26);
}
#cursor-x-v {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1px; height:18px; background:rgba(9,11,16,.26);
}
html[data-theme="dark"] #cursor-x-h,
html[data-theme="dark"] #cursor-x-v { background: rgba(239,241,248,.26); }
body:has(a:hover) #cursor-dot,
body:has(button:hover) #cursor-dot { transform: scale(2.2); background: var(--ink); }

/* ══ STATUS BAR ══ */
.statusbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: 26px; background: #080A10;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center;
}
.sb-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 26px;
  border-right: 1px solid rgba(255,255,255,0.07);
  font-size: 9.5px; letter-spacing: 0.07em; white-space: nowrap;
}
.sb-cell:first-child { padding-left: 14px; }
.sb-lbl { color: rgba(255,255,255,0.32); text-transform: uppercase; font-size: 8.5px; letter-spacing: .11em; }
.sb-val { color: rgba(255,255,255,0.88); font-weight: 600; }
.sb-val.pos { color: #4ade80; }
.sb-val.neg { color: #f87171; }
.sb-dot {
  width: 5px; height: 5px; border-radius: 50%; background: #4ade80;
  animation: pulse-ring 2.4s ease-in-out infinite;
}
.sb-right {
  margin-left: auto; padding-right: 14px;
  font-size: 9.5px; color: rgba(255,255,255,.34);
  letter-spacing: .09em; font-variant-numeric: tabular-nums;
}

/* ══ NAVBAR ══ */
.navbar {
  position: fixed; top: 26px; left: 0; right: 0; z-index: 500;
  height: 42px; background: var(--bg2);
  border-bottom: 1px solid var(--bdr2);
  display: flex; align-items: stretch;
  box-shadow: 0 2px 14px rgba(9,11,16,.06);
}
html[data-theme="dark"] .navbar { box-shadow: 0 2px 14px rgba(0,0,0,.30); }

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  padding: 0 18px; border-right: 1px solid var(--bdr2);
  font-family: var(--disp); font-size: 14px; font-weight: 800;
  letter-spacing: .12em; color: var(--ink); cursor: none; white-space: nowrap;
  flex-shrink: 0; transition: opacity var(--t-sm);
}
.nav-logo:hover { opacity: .72; }
.nav-logo-badge {
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  background: var(--ink); color: var(--bg2);
  padding: 2px 6px; letter-spacing: .08em; border-radius: 3px;
}
html[data-theme="dark"] .nav-logo-badge { color: var(--bg); }

.nav-tabs { display: flex; align-items: stretch; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  display: flex; align-items: center; padding: 0 15px;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink4); border-right: 1px solid var(--bdr);
  cursor: none; transition: color var(--t-sm), background var(--t-sm);
  background: none; border-top: none; border-bottom: none; border-left: none;
  font-family: var(--mono); font-weight: 500; white-space: nowrap;
  position: relative;
}
.nav-tab:hover { color: var(--ink2); background: var(--bg3); }
.nav-tab.active { color: var(--ink); font-weight: 700; background: var(--bg3); }
.nav-tab.active::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: var(--ink);
  animation: scale-up var(--t-md) var(--ease-out);
}

.nav-right { display: flex; align-items: center; margin-left: auto; }
.nav-ghost {
  display: flex; align-items: center; gap: 5px;
  padding: 0 13px; height: 100%;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink4); border-left: 1px solid var(--bdr);
  cursor: none; transition: color var(--t-sm), background var(--t-sm);
  font-family: var(--mono); white-space: nowrap;
}
.nav-ghost:hover { color: var(--ink); background: var(--bg3); }
.nav-ghost svg { flex-shrink: 0; }
.nav-ghost.active { color: var(--ink); font-weight: 600; }

/* ── Dark mode toggle button ── */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; height: 100%;
  background: none; border: none; border-left: 1px solid var(--bdr);
  color: var(--ink4); cursor: none;
  transition: color var(--t-sm), background var(--t-sm);
}
.theme-toggle:hover { color: var(--ink); background: var(--bg3); }
.theme-icon-sun  { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun  { display: block; }

/* ── Buy dropdown ── */
.buy-wrap { position: relative; }
.buy-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 100%;
  background: var(--ink); color: rgba(255,255,255,.88);
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  border: none; cursor: none;
  transition: background var(--t-sm);
  border-left: 1px solid var(--bdr2);
}
.buy-trigger:hover { background: #1c1f2e; }
html[data-theme="dark"] .buy-trigger { background: #22c55e; color: #0D0F14; }
html[data-theme="dark"] .buy-trigger:hover { background: #16a34a; }

.buy-trigger .chev { transition: transform var(--t-md) var(--ease-out); }
.buy-wrap:hover .buy-trigger .chev { transform: rotate(180deg); }

.buy-menu {
  position: absolute; top: calc(100% + 6px); right: 0; width: 272px;
  background: var(--bg2); border: 1px solid var(--bdr2);
  box-shadow: 0 20px 56px rgba(9,11,16,.13), 0 4px 14px rgba(9,11,16,.07);
  border-radius: 10px; overflow: hidden;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.98);
  transition: opacity var(--t-md) var(--ease-out), transform var(--t-md) var(--ease-out);
  z-index: 700;
}
html[data-theme="dark"] .buy-menu {
  box-shadow: 0 20px 56px rgba(0,0,0,.44), 0 4px 14px rgba(0,0,0,.24);
}
.buy-wrap:hover .buy-menu { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); }
.buy-menu-hd {
  padding: 9px 14px; border-bottom: 1px solid var(--bdr);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink4); background: var(--bg3);
}
.buy-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-bottom: 1px solid var(--bdr);
  transition: background var(--t-sm); cursor: none;
}
.buy-opt:last-child { border-bottom: none; }
.buy-opt:hover { background: var(--bg3); }
.buy-opt-ico {
  width: 34px; height: 34px; background: var(--bg1); border: 1px solid var(--bdr2);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; font-weight: 700; font-family: var(--mono);
}
.buy-opt strong { display: block; font-size: 12px; color: var(--ink); font-weight: 600; }
.buy-opt span   { font-size: 10px; color: var(--ink4); margin-top: 1px; display: block; }

/* ══ TICKER TAPE ══ */
.tape {
  height: 28px; background: var(--bg1); border-bottom: 1px solid var(--bdr);
  overflow: hidden; display: flex; align-items: center; position: relative;
}
.tape::before, .tape::after {
  content:''; position:absolute; top:0; bottom:0; width:72px; z-index:2; pointer-events:none;
}
.tape::before { left:0; background: linear-gradient(to right, var(--bg1), transparent); }
.tape::after  { right:0; background: linear-gradient(to left, var(--bg1), transparent); }
.tape-track { display:flex; align-items:center; animation: scroll 32s linear infinite; white-space:nowrap; }
.tape-track:hover { animation-play-state: paused; }
.tape-item {
  display:inline-flex; align-items:center; gap:7px;
  padding:0 18px; border-right:1px solid var(--bdr);
  font-size:9.5px; color:var(--ink4); height:28px;
}
.tape-item .sym { color:var(--ink); font-weight:700; letter-spacing:.1em; }
.tape-item .up  { color:var(--green); font-weight:600; }
.tape-item .dn  { color:var(--red); font-weight:600; }
.tape-item .neu { color:var(--ink3); font-weight:500; }

/* ══ SCROLL PROGRESS ══ */
#progress {
  position: fixed; bottom: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--green), var(--ink));
  z-index: 10000; transition: width .06s linear;
}

/* ══ RESPONSIVE — header elements only ══ */
@media (max-width: 760px) {
  .statusbar { display: none; }
  .navbar { top: 0; }
}
@media (max-width: 500px) {
  .theme-toggle { display: none; }
}
</style>
</head>
<body>

<div id="cursor">
  <div id="cursor-x-h"></div>
  <div id="cursor-x-v"></div>
  <div id="cursor-dot"></div>
</div>
<div id="progress"></div>

<!-- STATUS BAR -->
<div class="statusbar">
  <div class="sb-cell">
    <div class="sb-dot"></div>
    <span style="color:rgba(255,255,255,.84);font-weight:700;font-size:10px;letter-spacing:.1em;">AGENT ACTIVE</span>
  </div>
  <div class="sb-cell"><span class="sb-lbl">PRICE</span><span class="sb-val" id="sb-price">—</span></div>
  <div class="sb-cell"><span class="sb-lbl">24H</span><span class="sb-val" id="sb-chg24">—</span></div>
  <div class="sb-cell"><span class="sb-lbl">MCAP</span><span class="sb-val" id="sb-mcap">—</span></div>
  <div class="sb-cell"><span class="sb-lbl">LIQ</span><span class="sb-val" id="sb-liq">—</span></div>
  <div class="sb-cell"><span class="sb-lbl">VOL 24H</span><span class="sb-val" id="sb-vol">—</span></div>
  <div class="sb-right" id="sbTime">--:--:-- UTC</div>
</div>

<!-- NAVBAR -->
<nav class="navbar">
  <a href="home.php" class="nav-logo">APTUM <span class="nav-logo-badge">$A</span></a>
  <div class="nav-tabs">
    <a href="home.php"            class="nav-tab<?= $page==='home'       ? ' active' : '' ?>">Overview</a>
    <a href="home.php#stats"      class="nav-tab<?= $page==='stats'      ? ' active' : '' ?>">Reach / Stats</a>
    <a href="home.php#verticals"  class="nav-tab<?= $page==='verticals'  ? ' active' : '' ?>">Verticals</a>
    <a href="product.php"         class="nav-tab<?= $page==='product'    ? ' active' : '' ?>">Skills / Products</a>
    <a href="home.php#tokenomics" class="nav-tab<?= $page==='tokenomics' ? ' active' : '' ?>">Tokenomics</a>
    <a href="home.php#roadmap"    class="nav-tab<?= $page==='roadmap'    ? ' active' : '' ?>">Roadmap</a>
    <a href="home.php#community"  class="nav-tab<?= $page==='community'  ? ' active' : '' ?>">Community</a>
  </div>
  <div class="nav-right">
    <button class="theme-toggle" id="themeToggle" title="Toggle dark mode">
      <svg class="theme-icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
      </svg>
      <svg class="theme-icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="5"/>
        <line x1="12" y1="1" x2="12" y2="3"/>
        <line x1="12" y1="21" x2="12" y2="23"/>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
        <line x1="1" y1="12" x2="3" y2="12"/>
        <line x1="21" y1="12" x2="23" y2="12"/>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
      </svg>
    </button>
    <a href="whitepaper.php" class="nav-ghost<?= $page==='whitepaper' ? ' active' : '' ?>">Whitepaper</a>
    <a href="https://x.com/aptum_" target="_blank" rel="noopener" class="nav-ghost">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.258 5.63 5.906-5.63z"/></svg>
      X / Twitter
    </a>
    <a href="https://t.me/aptum" target="_blank" rel="noopener" class="nav-ghost">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>
      Telegram
    </a>
    <div class="buy-wrap">
      <button class="buy-trigger" type="button">
        BUY $A
        <svg class="chev" width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
      </button>
      <div class="buy-menu">
        <div class="buy-menu-hd">SELECT EXCHANGE · BASE</div>
        <a href="https://clanker.world/clanker/0xaa681b1D3dE076f2524c94Ceb2Db712878Bb6b07" target="_blank" rel="noopener" class="buy-opt">
          <div class="buy-opt-ico">CL</div>
          <div><strong>Clanker</strong><span>Recommended · Base</span></div>
        </a>
        <a href="https://dexscreener.com/base/0x23e52ed0f63f3663bc5a8b688ac0e1dbafabe928c5a2de552f5f67ac1b33cd4d" target="_blank" rel="noopener" class="buy-opt">
          <div class="buy-opt-ico">DX</div>
          <div><strong>DEX Screener</strong><span>Charts &amp; liquidity</span></div>
        </a>
      </div>
    </div>
  </div>
</nav>

<script>
'use strict';

/* ── Cursor (lerp RAF) ── */
(function() {
  const c = document.getElementById('cursor');
  if (!c) return;
  let x = 0, y = 0, tx = 0, ty = 0;
  document.addEventListener('mousemove', e => { tx = e.clientX; ty = e.clientY; });
  function loop() {
    x += (tx - x) * 0.14; y += (ty - y) * 0.14;
    c.style.left = x + 'px'; c.style.top = y + 'px';
    requestAnimationFrame(loop);
  }
  loop();
})();

/* ── UTC Clock ── */
(function() {
  const el = document.getElementById('sbTime');
  if (!el) return;
  const p = n => String(n).padStart(2, '0');
  const tick = () => {
    const d = new Date();
    el.textContent = p(d.getUTCHours()) + ':' + p(d.getUTCMinutes()) + ':' + p(d.getUTCSeconds()) + ' UTC';
  };
  tick(); setInterval(tick, 1000);
})();

/* ── Scroll progress bar ── */
(function() {
  const bar = document.getElementById('progress');
  if (!bar) return;
  window.addEventListener('scroll', () => {
    const s = document.documentElement;
    bar.style.width = Math.min(window.scrollY / (s.scrollHeight - window.innerHeight) * 100, 100) + '%';
  }, { passive: true });
})();

/* ── Dark mode toggle ── */
(function() {
  const html   = document.documentElement;
  const toggle = document.getElementById('themeToggle');
  const saved  = localStorage.getItem('aptum-theme');
  if (saved) {
    html.setAttribute('data-theme', saved);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    html.setAttribute('data-theme', 'dark');
  }
  if (!toggle) return;
  toggle.addEventListener('click', () => {
    html.classList.add('theme-switching');
    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
    html.setAttribute('data-theme', next);
    localStorage.setItem('aptum-theme', next);
    setTimeout(() => html.classList.remove('theme-switching'), 400);
  });
})();

/* ── Statusbar DEX feed (exposes window._dexReady for page callbacks) ── */
(function() {
  const CA = '0xaa681b1D3dE076f2524c94Ceb2Db712878Bb6b07';
  function set(id, v) { const e = document.getElementById(id); if (e) e.textContent = v; }
  function fmtP(p) {
    if (!p && p !== 0) return '—';
    const n = parseFloat(p);
    if (isNaN(n) || n === 0) return '$0';
    if (n >= 1) return '$' + n.toFixed(4);
    if (n >= 0.001) return '$' + n.toFixed(6);
    const str = n.toFixed(20), m = str.match(/^0\.(0*)([1-9]\d*)/);
    if (!m) return '$' + n.toExponential(3);
    const z = m[1].length, sig = m[2].slice(0, 4);
    const S = '\u2080\u2081\u2082\u2083\u2084\u2085\u2086\u2087\u2088\u2089';
    if (z >= 4) return '$0.0' + String(z).split('').map(d => S[+d]).join('') + sig;
    return '$' + n.toFixed(z + 4);
  }
  function fmtU(n) {
    if (!n && n !== 0) return '—';
    if (n >= 1e9) return '$' + (n / 1e9).toFixed(2) + 'B';
    if (n >= 1e6) return '$' + (n / 1e6).toFixed(2) + 'M';
    if (n >= 1e3) return '$' + (n / 1e3).toFixed(1) + 'K';
    return '$' + n.toFixed(2);
  }
  function fmtC(n) { if (n == null) return '—'; return (n >= 0 ? '+' : '') + n.toFixed(2) + '%'; }

  async function fetchDex() {
    try {
      const r = await fetch('https://api.dexscreener.com/tokens/v1/base/' + CA);
      if (!r.ok) return;
      const d = await r.json();
      const pairs = Array.isArray(d) ? d : (d.pairs || []);
      if (!pairs.length) return;
      const pair = pairs.reduce((b, p) => (p.liquidity?.usd || 0) > (b.liquidity?.usd || 0) ? p : b, pairs[0]);
      const pr = pair.priceUsd, mc = pair.marketCap, liq = pair.liquidity?.usd, vol = pair.volume?.h24;
      const c24 = pair.priceChange?.h24 ?? null;
      set('sb-price', fmtP(pr));
      const sc = document.getElementById('sb-chg24');
      if (sc) { sc.textContent = fmtC(c24); sc.className = 'sb-val ' + (c24 >= 0 ? 'pos' : 'neg'); }
      set('sb-mcap', mc  ? fmtU(mc)  : '—');
      set('sb-liq',  liq ? fmtU(liq) : '—');
      set('sb-vol',  vol ? fmtU(vol) : '—');
      if (typeof window._dexReady === 'function') window._dexReady(pair);
    } catch (e) { console.warn('DEX:', e.message); }
  }
  fetchDex();
  setInterval(fetchDex, 30000);
  window._dexFetch = fetchDex;
})();

/* ── Button click sound ── */
(function() {
  const snd = new Audio('/sounds/button.mp3');
  snd.preload = 'auto';
  document.addEventListener('click', e => {
    const el = e.target.closest('a, button');
    if (!el) return;
    const s = snd.cloneNode();
    s.volume = 0.45;
    s.play().catch(() => {});
  }, { passive: true });
})();
</script>
