<?php header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aptum — $A Investor Deck</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
:root {
  --bg:      #F4F5F7;
  --card:    #FFFFFF;
  --border:  #DCDFE6;
  --border2: #C8CBD4;
  --ink:     #0A0C10;
  --muted:   #5A6070;
  --dim:     #9BA3B0;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; cursor: none; }
body {
  font-family: 'DM Mono', monospace;
  background: #0A0C10;
}

/* Custom cursor */
#cursor { position: fixed; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .15s, height .15s; }
#cursor-ring { position: fixed; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width .2s, height .2s, border-color .2s; }

/* Deck shell */
#deck {
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Slide */
.slide {
  position: absolute;
  width: min(177.78vh, 100vw);
  height: min(56.25vw, 100vh);
  flex-shrink: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
  transform: translateX(40px);
  overflow: hidden;
}
.slide.active { opacity: 1; pointer-events: all; transform: translateX(0); }
.slide.exit { opacity: 0; transform: translateX(-40px); }

/* Grid bg */
.slide-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,12,16,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,12,16,0.028) 1px, transparent 1px);
  background-size: 5.333% 9.481%;
  pointer-events: none;
}
.slide-grid.dark {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

/* Slide number */
.slide-num {
  position: absolute; bottom: 1.8%; right: 1.5%;
  font-family: 'DM Mono', monospace;
  font-size: clamp(8px, 1.1vh, 12px);
  letter-spacing: .15em; color: var(--dim);
}
.dark .slide-num { color: rgba(255,255,255,0.25); }

/* ── NAV BAR ── */
#nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: rgba(10,12,16,0.95);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.nav-logo {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: .14em; color: #fff; text-decoration: none;
}
.nav-center { display: flex; align-items: center; gap: 10px; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.2); cursor: pointer;
  transition: background .2s, transform .2s;
}
.dot.on { background: #fff; transform: scale(1.3); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-btn {
  width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.15);
  background: transparent; color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s; font-family: inherit;
}
.nav-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.nav-counter {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.35); letter-spacing: .1em; min-width: 36px; text-align: center;
}
.nav-dl {
  font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.15); padding: 6px 16px;
  transition: color .2s, border-color .2s;
}
.nav-dl:hover { color: #fff; border-color: rgba(255,255,255,0.5); }

/* Progress */
#progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--ink); z-index: 200;
  transition: width .4s ease;
}

/* ────────────────────────────────────────
   SLIDE 1 — COVER (dark)
──────────────────────────────────────── */
#s1 { background: #0A0C10; }
.s1-watermark {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(180px, 28vw, 380px); line-height: 1;
  color: rgba(255,255,255,0.04); letter-spacing: -.05em;
  pointer-events: none; user-select: none;
}
.s1-bar {
  position: absolute; left: 5.5%; top: 19.5%; width: .3%; height: 53%;
  background: rgba(255,255,255,0.18);
}
.s1-eyebrow {
  position: absolute; left: 7%; top: 19.5%;
  font-size: clamp(8px,1.15vh,13px); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.s1-title {
  position: absolute; left: 6.8%; top: 25%;
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(60px, 11vw, 120px); line-height: .9;
  letter-spacing: -.03em; color: #fff;
}
.s1-ticker {
  position: absolute; left: 6.8%; top: 58%;
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(26px, 4.5vw, 52px); line-height: 1;
  letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.4);
}
.s1-tagline {
  position: absolute; left: 6.8%; top: 70%;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(11px, 1.8vh, 18px); color: rgba(255,255,255,0.4);
  max-width: 52%;
}
.s1-strip {
  position: absolute; bottom: 8.5%; left: 0; right: 0;
  height: 8%; background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(7px,.95vh,11px); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); font-family: 'DM Mono', monospace;
  gap: clamp(16px, 3vw, 40px);
}
.s1-strip span { color: rgba(255,255,255,0.5); font-weight: 500; }

/* ────────────────────────────────────────
   SLIDE 2 — PROBLEM (light)
──────────────────────────────────────── */
#s2 { background: var(--bg); }
.sec-label {
  position: absolute; left: 5.5%; top: 6.5%;
  font-size: clamp(7px,.9vh,10px); letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); font-family: 'DM Mono', monospace;
}
.slide-title {
  position: absolute; left: 5.5%; top: 13%;
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(22px, 4vw, 42px); letter-spacing: -.02em; color: var(--ink);
}
.problem-cards {
  position: absolute; left: 5.5%; right: 5.5%; top: 35%; bottom: 18%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5%;
}
.pcard {
  background: var(--card); border: 1px solid var(--border);
  padding: 6% 8%; display: flex; flex-direction: column; gap: 4%;
  box-shadow: 0 1px 3px rgba(10,12,16,.05), 0 4px 14px rgba(10,12,16,.04);
  transition: border-color .2s;
}
.pcard:hover { border-color: var(--border2); }
.pcard-num { font-size: clamp(7px,.85vh,9px); letter-spacing: .15em; color: var(--dim); }
.pcard-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(12px,1.7vh,17px); color: var(--ink); }
.pcard-body { font-size: clamp(9px,1.25vh,13px); color: var(--muted); line-height: 1.65; }
.problem-bar {
  position: absolute; left: 5.5%; right: 5.5%; bottom: 4.5%;
  height: 7.5%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.problem-bar-text {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(9px, 1.35vh, 14px); color: rgba(255,255,255,.85);
}

/* ────────────────────────────────────────
   SLIDE 3 — SOLUTION (split)
──────────────────────────────────────── */
#s3 { background: var(--bg); }
.s3-right {
  position: absolute; right: 0; top: 0; bottom: 0; width: 43%;
  background: var(--ink);
  display: flex; flex-direction: column; padding: 6.5% 7%;
}
.s3-loop-label {
  font-size: clamp(7px,.88vh,10px); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: 4%;
}
.s3-loop-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(18px, 3.2vw, 34px); line-height: 1.05;
  letter-spacing: -.02em; color: #fff; margin-bottom: 8%;
}
.s3-pillars { display: flex; flex-direction: column; gap: 5%; flex: 1; justify-content: center; }
.s3-pillar { display: flex; align-items: flex-start; gap: 5%; }
.s3-pillar-icon {
  width: clamp(28px,4vh,44px); height: clamp(28px,4vh,44px); flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(13px,2vh,20px); color: #fff;
}
.s3-pillar-text {}
.s3-pillar-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(11px,1.55vh,16px); color: #fff; }
.s3-pillar-desc { font-size: clamp(8px,1.1vh,12px); color: rgba(255,255,255,.38); margin-top: 2%; line-height: 1.55; }

/* Left side of slide 3 */
.s3-body {
  position: absolute; left: 5.5%; top: 13%; width: 52%;
}
.s3-body-title {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(18px, 3vw, 32px); letter-spacing: -.02em; color: var(--ink);
  line-height: 1.15; margin-bottom: 6%;
}
.s3-body-p { font-size: clamp(9px, 1.3vh, 13px); color: var(--muted); line-height: 1.75; margin-bottom: 4%; }

/* ────────────────────────────────────────
   SLIDE 4 — TRACTION (split)
──────────────────────────────────────── */
#s4 { background: var(--bg); }
.s4-stats {
  position: absolute; left: 5.5%; top: 37%; width: 41%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5%;
}
.sstat {
  background: var(--card); border: 1px solid var(--border);
  padding: 7% 8%; box-shadow: 0 1px 3px rgba(10,12,16,.05), 0 4px 14px rgba(10,12,16,.04);
}
.sstat-n {
  font-family: 'Syne', sans-serif; font-weight: 800;
  font-size: clamp(22px, 4vw, 42px); color: var(--ink); line-height: 1;
}
.sstat-l { font-size: clamp(7px,.85vh,9px); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-top: 4%; }
.s4-note {
  position: absolute; left: 5.5%; top: 29%;
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(8px, 1.2vh, 13px); color: var(--muted); max-width: 42%;
}
.s4-right {
  position: absolute; right: 5.5%; top: 6%; bottom: 6%; width: 39%;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(10,12,16,.05), 0 4px 14px rgba(10,12,16,.04);
  padding: 5% 6%;
}
.s4-right-label {
  font-size: clamp(7px,.85vh,9px); letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 5%;
}
.s4-vert { padding: 4.5% 0; border-top: 1px solid var(--border); display: flex; gap: 5%; align-items: flex-start; }
.s4-vert-num { font-size: clamp(7px,.85vh,9px); color: var(--dim); flex-shrink: 0; margin-top: 2%; min-width: 2em; }
.s4-vert-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(10px,1.5vh,15px); color: var(--ink); }
.s4-vert-desc { font-size: clamp(8px,1.1vh,11px); color: var(--muted); margin-top: 2%; line-height: 1.55; }

/* ────────────────────────────────────────
   SLIDE 5 — TOKENOMICS (light)
──────────────────────────────────────── */
#s5 { background: var(--bg); }
.s5-specs {
  position: absolute; left: 5.5%; right: 5.5%; top: 28%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1%;
}
.spec-cell {
  background: var(--card); border: 1px solid var(--border); padding: 5% 6%;
  box-shadow: 0 1px 3px rgba(10,12,16,.04), 0 4px 12px rgba(10,12,16,.03);
}
.spec-key { font-size: clamp(6px,.8vh,9px); text-transform: uppercase; letter-spacing: .14em; color: var(--dim); margin-bottom: 5%; }
.spec-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(13px,2vh,20px); color: var(--ink); }
.s5-mechs {
  position: absolute; left: 5.5%; right: 5.5%; top: 48%; bottom: 5%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1%;
}
.mech {
  background: var(--ink); padding: 6% 7%;
  box-shadow: 0 2px 8px rgba(10,12,16,.1);
}
.mech-sym { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(20px,3.2vh,32px); color: #fff; margin-bottom: 5%; }
.mech-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: clamp(11px,1.6vh,17px); color: #fff; margin-bottom: 4%; }
.mech-desc { font-size: clamp(8px,1.1vh,12px); color: rgba(255,255,255,.38); line-height: 1.65; }

/* ────────────────────────────────────────
   SLIDE 6 — ROADMAP (dark)
──────────────────────────────────────── */
#s6 { background: #0A0C10; }
.s6-phases {
  position: absolute; left: 3.5%; right: 3.5%; top: 32%; bottom: 14%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1%;
}
.phase {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  padding: 5% 6%;
  display: flex; flex-direction: column; gap: 4%;
  position: relative; overflow: hidden;
  transition: background .2s;
}
.phase:hover { background: rgba(255,255,255,.07); }
.phase::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,.15);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease;
}
.phase:hover::before { transform: scaleX(1); }
.phase-tag { font-size: clamp(7px,.85vh,9px); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.3); }
.phase-period { font-size: clamp(8px,1.05vh,11px); color: rgba(255,255,255,.5); font-weight: 500; }
.phase-name { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(16px,2.5vh,24px); color: #fff; }
.phase-divider { height: 1px; background: rgba(255,255,255,.1); }
.phase-items { list-style: none; display: flex; flex-direction: column; gap: 5%; }
.phase-items li {
  font-size: clamp(8px,1.1vh,11px); color: rgba(255,255,255,.35); line-height: 1.45;
  display: flex; gap: 6%; align-items: flex-start;
}
.phase-items li::before { content: ''; width: 3px; height: 3px; background: rgba(255,255,255,.25); border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.s6-cta {
  position: absolute; bottom: 2%; left: 3.5%; right: 3.5%; height: 9%;
  background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center; gap: 3%;
}
.s6-cta a {
  font-family: 'DM Mono', monospace; font-size: clamp(8px,1.1vh,11px);
  letter-spacing: .1em; color: rgba(255,255,255,.4); text-decoration: none;
  transition: color .2s;
}
.s6-cta a:hover { color: rgba(255,255,255,.85); }
.s6-cta-dot { color: rgba(255,255,255,.15); }

/* ── KEYBOARD HINT ── */
#hint {
  position: fixed; bottom: 62px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.2);
  pointer-events: none; transition: opacity .5s;
}
</style>
</head>
<body>

<div id="cursor"></div>
<div id="cursor-ring"></div>
<div id="progress"></div>
<div id="hint">← → ARROW KEYS TO NAVIGATE</div>

<div id="deck">

  <!-- ── SLIDE 1: COVER ── -->
  <div class="slide active" id="s1">
    <div class="slide-grid dark"></div>
    <div class="s1-watermark">$A</div>
    <div class="s1-bar"></div>
    <div class="s1-eyebrow">INVESTOR DECK &nbsp;·&nbsp; 2026</div>
    <div class="s1-title">APTUM</div>
    <div class="s1-ticker">$A</div>
    <div class="s1-tagline">The First Self-Sustaining AI Economy</div>
    <div class="s1-strip">
      <span>Built on Base</span>
      &nbsp;·&nbsp; 1B Supply &nbsp;·&nbsp;
      <span>Real Revenue</span>
      &nbsp;·&nbsp; Buyback / Burn / Airdrop &nbsp;·&nbsp;
      <span>Autonomous Agent</span>
    </div>
    <div class="slide-num dark">1 / 6</div>
  </div>

  <!-- ── SLIDE 2: PROBLEM ── -->
  <div class="slide" id="s2">
    <div class="slide-grid"></div>
    <div class="sec-label">01 &nbsp;&nbsp; THE PROBLEM</div>
    <div class="slide-title">The market is broken in three ways.</div>
    <div class="problem-cards">
      <div class="pcard">
        <div class="pcard-num">01</div>
        <div class="pcard-title">No real revenue</div>
        <div class="pcard-body">Most AI tokens generate nothing. Price runs on narrative and speculation alone.</div>
      </div>
      <div class="pcard">
        <div class="pcard-num">02</div>
        <div class="pcard-title">Agents don't earn</div>
        <div class="pcard-body">AI agents are capable but uneconomic. The intelligence exists. The infrastructure does not.</div>
      </div>
      <div class="pcard">
        <div class="pcard-num">03</div>
        <div class="pcard-title">Holders just wait</div>
        <div class="pcard-body">No mechanism routes earned income back to holders. Holding means hoping.</div>
      </div>
    </div>
    <div class="problem-bar">
      <div class="problem-bar-text">Most AI tokens speculate on future value — Aptum earns it today.</div>
    </div>
    <div class="slide-num">2 / 6</div>
  </div>

  <!-- ── SLIDE 3: SOLUTION ── -->
  <div class="slide" id="s3">
    <div class="slide-grid"></div>
    <div class="sec-label">02 &nbsp;&nbsp; THE SOLUTION</div>
    <div class="s3-body">
      <div class="s3-body-title">Aptum is the foundation of a new economic primitive.</div>
      <div class="s3-body-p">An AI agent that earns, compounds, and distributes value back to those who believe in it earliest.</div>
      <div class="s3-body-p">The future of AI is not tools that wait to be used. It is agents that work, earn, and grow without pause and without a ceiling.</div>
      <div class="s3-body-p">Aptum is that agent. And $A is your stake in what it builds.</div>
    </div>
    <div class="s3-right">
      <div class="s3-loop-label">THE LOOP</div>
      <div class="s3-loop-title">Earn. Buyback.<br>Burn. Distribute.</div>
      <div class="s3-pillars">
        <div class="s3-pillar">
          <div class="s3-pillar-icon">↩</div>
          <div class="s3-pillar-text">
            <div class="s3-pillar-name">Buybacks</div>
            <div class="s3-pillar-desc">Revenue purchases $A from open market</div>
          </div>
        </div>
        <div class="s3-pillar">
          <div class="s3-pillar-icon">∅</div>
          <div class="s3-pillar-text">
            <div class="s3-pillar-name">Burns</div>
            <div class="s3-pillar-desc">Tokens permanently removed, supply falls</div>
          </div>
        </div>
        <div class="s3-pillar">
          <div class="s3-pillar-icon">◆</div>
          <div class="s3-pillar-text">
            <div class="s3-pillar-name">Airdrops</div>
            <div class="s3-pillar-desc">Earnings redistributed to $A holders</div>
          </div>
        </div>
      </div>
    </div>
    <div class="slide-num">3 / 6</div>
  </div>

  <!-- ── SLIDE 4: TRACTION ── -->
  <div class="slide" id="s4">
    <div class="slide-grid"></div>
    <div class="sec-label">03 &nbsp;&nbsp; TRACTION</div>
    <div class="slide-title">Real numbers. Day one.</div>
    <div class="s4-note">48 hours. Social growth vertical only. Zero original posts. Zero ads. Zero paid promotion.</div>
    <div class="s4-stats">
      <div class="sstat">
        <div class="sstat-n" data-target="100" data-suffix="K">0K</div>
        <div class="sstat-l">Impressions</div>
      </div>
      <div class="sstat">
        <div class="sstat-n" data-target="1500" data-suffix="+">0</div>
        <div class="sstat-l">Engagements</div>
      </div>
      <div class="sstat">
        <div class="sstat-n" data-target="730">0</div>
        <div class="sstat-l">Likes Generated</div>
      </div>
      <div class="sstat">
        <div class="sstat-n">$0</div>
        <div class="sstat-l">Paid Promotion</div>
      </div>
    </div>
    <div class="s4-right">
      <div class="s4-right-label">Active Verticals</div>
      <div class="s4-vert">
        <div class="s4-vert-num">01</div>
        <div>
          <div class="s4-vert-name">Skill Creation</div>
          <div class="s4-vert-desc">Build and sell AI automation skills. Revenue per sale.</div>
        </div>
      </div>
      <div class="s4-vert">
        <div class="s4-vert-num">02</div>
        <div>
          <div class="s4-vert-name">Game Development</div>
          <div class="s4-vert-desc">AI-built games sold and monetized directly.</div>
        </div>
      </div>
      <div class="s4-vert">
        <div class="s4-vert-num">03</div>
        <div>
          <div class="s4-vert-name">Social Growth</div>
          <div class="s4-vert-desc">Automated account growth as a service. Proven day one.</div>
        </div>
      </div>
      <div class="s4-vert">
        <div class="s4-vert-num">04+</div>
        <div>
          <div class="s4-vert-name">More Coming</div>
          <div class="s4-vert-desc">New verticals activated each phase.</div>
        </div>
      </div>
    </div>
    <div class="slide-num">4 / 6</div>
  </div>

  <!-- ── SLIDE 5: TOKENOMICS ── -->
  <div class="slide" id="s5">
    <div class="slide-grid"></div>
    <div class="sec-label">04 &nbsp;&nbsp; TOKENOMICS</div>
    <div class="slide-title">$A Token Structure</div>
    <div class="s5-specs">
      <div class="spec-cell"><div class="spec-key">Token</div><div class="spec-val">Aptum</div></div>
      <div class="spec-cell"><div class="spec-key">Ticker</div><div class="spec-val">$A</div></div>
      <div class="spec-cell"><div class="spec-key">Chain</div><div class="spec-val">Base (L2)</div></div>
      <div class="spec-cell"><div class="spec-key">Supply</div><div class="spec-val">1B</div></div>
    </div>
    <div class="s5-mechs">
      <div class="mech">
        <div class="mech-sym">↩</div>
        <div class="mech-name">Buybacks</div>
        <div class="mech-desc">Revenue purchases $A from open market. Consistent buy pressure tied directly to agent earnings.</div>
      </div>
      <div class="mech">
        <div class="mech-sym">∅</div>
        <div class="mech-name">Burns</div>
        <div class="mech-desc">Bought-back tokens permanently destroyed. Supply falls as the agent earns more. Scarcity compounds.</div>
      </div>
      <div class="mech">
        <div class="mech-sym">◆</div>
        <div class="mech-name">Airdrops</div>
        <div class="mech-desc">A share of revenue goes to $A holders periodically. Long-term participation is rewarded directly.</div>
      </div>
    </div>
    <div class="slide-num">5 / 6</div>
  </div>

  <!-- ── SLIDE 6: ROADMAP ── -->
  <div class="slide" id="s6">
    <div class="slide-grid dark"></div>
    <div class="sec-label" style="color:rgba(255,255,255,.3)">05 &nbsp;&nbsp; ROADMAP</div>
    <div class="slide-title" style="color:#fff; top:13%">Q1 2026 — Q2 2027</div>
    <div class="s6-phases">
      <div class="phase">
        <div class="phase-tag">Phase 01</div>
        <div class="phase-period">Q1 2026</div>
        <div class="phase-name">Launch</div>
        <div class="phase-divider"></div>
        <ul class="phase-items">
          <li>Token live on Base</li>
          <li>Core agent deployed</li>
          <li>Skill marketplace</li>
          <li>First buyback and burn</li>
        </ul>
      </div>
      <div class="phase">
        <div class="phase-tag">Phase 02</div>
        <div class="phase-period">Q3 2026</div>
        <div class="phase-name">Build</div>
        <div class="phase-divider"></div>
        <ul class="phase-items">
          <li>New revenue verticals</li>
          <li>Third-party skill sales</li>
          <li>Games in ecosystem</li>
        </ul>
      </div>
      <div class="phase">
        <div class="phase-tag">Phase 03</div>
        <div class="phase-period">Q1 2027</div>
        <div class="phase-name">Scale</div>
        <div class="phase-divider"></div>
        <ul class="phase-items">
          <li>Partnerships and integrations</li>
          <li>Sustained burn cycle</li>
        </ul>
      </div>
      <div class="phase">
        <div class="phase-tag">Phase 04</div>
        <div class="phase-period">Q2 2027</div>
        <div class="phase-name">Expand</div>
        <div class="phase-divider"></div>
        <ul class="phase-items">
          <li>New DEX listings</li>
          <li>CEX pursuit and negotiations</li>
          <li>Roadmap V2 released</li>
        </ul>
      </div>
    </div>
    <div class="s6-cta">
      <a href="https://x.com/aptum_" target="_blank">x.com/aptum_</a>
      <span class="s6-cta-dot">·</span>
      <a href="https://t.me/aptum" target="_blank">t.me/aptum</a>
      <span class="s6-cta-dot">·</span>
      <a href="aptum_whitepaper.php">Whitepaper</a>
      <span class="s6-cta-dot">·</span>
      <a href="index.php">aptum.fun</a>
    </div>
    <div class="slide-num dark">6 / 6</div>
  </div>

</div>

<!-- NAV -->
<nav id="nav">
  <a href="index.php" class="nav-logo">APTUM</a>
  <div class="nav-center">
    <div class="dot on" data-i="0"></div>
    <div class="dot" data-i="1"></div>
    <div class="dot" data-i="2"></div>
    <div class="dot" data-i="3"></div>
    <div class="dot" data-i="4"></div>
    <div class="dot" data-i="5"></div>
  </div>
  <div class="nav-right">
    <button class="nav-btn" id="prevBtn">←</button>
    <span class="nav-counter" id="counter">1 / 6</span>
    <button class="nav-btn" id="nextBtn">→</button>
    <a href="aptum_pitchdeck.pptx" class="nav-dl" download>↓ PPTX</a>
  </div>
</nav>

<script>
// Cursor
const cur = document.getElementById('cursor');
const ring = document.getElementById('cursor-ring');
let mx = -100, my = -100, rx = -100, ry = -100;
const isDark = (i) => i === 0 || i === 5;
function updateCursorTheme(i) {
  const c = isDark(i) ? 'rgba(255,255,255,0.9)' : '#0A0C10';
  const r = isDark(i) ? 'rgba(255,255,255,0.25)' : 'rgba(10,12,16,0.22)';
  cur.style.background = c;
  ring.style.border = `1.5px solid ${r}`;
}
document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
(function loop() {
  rx += (mx - rx) * 0.13; ry += (my - ry) * 0.13;
  cur.style.left = mx + 'px'; cur.style.top = my + 'px';
  ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
  requestAnimationFrame(loop);
})();
document.addEventListener('mouseover', e => {
  if (e.target.closest('a,button,.dot,.pcard,.phase')) {
    cur.style.width = '14px'; cur.style.height = '14px';
    ring.style.width = '44px'; ring.style.height = '44px';
  } else {
    cur.style.width = '8px'; cur.style.height = '8px';
    ring.style.width = '30px'; ring.style.height = '30px';
  }
});

// Slides
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
const counter = document.getElementById('counter');
const progress = document.getElementById('progress');
const hint = document.getElementById('hint');
let cur_i = 0;
let animating = false;

function goTo(n) {
  if (n === cur_i || animating) return;
  animating = true;
  const prev = cur_i;
  slides[prev].classList.add('exit');
  slides[prev].classList.remove('active');
  cur_i = n;
  slides[cur_i].classList.add('active');
  slides[cur_i].classList.remove('exit');
  dots.forEach((d, i) => d.classList.toggle('on', i === cur_i));
  counter.textContent = `${cur_i + 1} / 6`;
  progress.style.width = ((cur_i + 1) / 6 * 100) + '%';
  updateCursorTheme(cur_i);
  // trigger stat counters on slide 4
  if (cur_i === 3) triggerStats();
  setTimeout(() => {
    slides[prev].classList.remove('exit');
    animating = false;
  }, 600);
}

document.getElementById('nextBtn').addEventListener('click', () => goTo(Math.min(cur_i + 1, 5)));
document.getElementById('prevBtn').addEventListener('click', () => goTo(Math.max(cur_i - 1, 0)));
dots.forEach(d => d.addEventListener('click', () => goTo(+d.dataset.i)));

document.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') goTo(Math.min(cur_i + 1, 5));
  if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') goTo(Math.max(cur_i - 1, 0));
});

// Touch swipe
let tx = 0;
document.addEventListener('touchstart', e => { tx = e.touches[0].clientX; }, { passive: true });
document.addEventListener('touchend', e => {
  const dx = tx - e.changedTouches[0].clientX;
  if (Math.abs(dx) > 50) goTo(dx > 0 ? Math.min(cur_i+1,5) : Math.max(cur_i-1,0));
}, { passive: true });

// Stat counters
let statsTriggered = false;
function triggerStats() {
  if (statsTriggered) return;
  statsTriggered = true;
  document.querySelectorAll('.sstat-n[data-target]').forEach(el => {
    const target = parseFloat(el.dataset.target);
    const suffix = el.dataset.suffix || '';
    const dec = el.dataset.target.includes('.');
    let start = null;
    const anim = ts => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / 1300, 1);
      const ease = 1 - Math.pow(1 - p, 3);
      el.textContent = (dec ? (ease*target).toFixed(1) : Math.floor(ease*target)) + suffix;
      if (p < 1) requestAnimationFrame(anim);
    };
    requestAnimationFrame(anim);
  });
}

// Init
updateCursorTheme(0);
progress.style.width = (1/6*100) + '%';

// Hide hint after 4s
setTimeout(() => { hint.style.opacity = '0'; }, 4000);
</script>
</body>
</html>