<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APTUM — News Skill Online</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
:root {
  --bg:      #F4F5F7;
  --surface: #ECEEF2;
  --card:    #FFFFFF;
  --border:  #DCDFE6;
  --border2: #C8CBD4;
  --ink:     #0A0C10;
  --ink2:    #1C1F26;
  --muted:   #5A6070;
  --dim:     #9BA3B0;
  --shadow:  0 1px 3px rgba(10,12,16,0.06), 0 4px 16px rgba(10,12,16,0.04);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--ink);font-family:'DM Mono',monospace;font-size:14px;line-height:1.8;cursor:none;}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(10,12,16,0.026) 1px,transparent 1px),linear-gradient(90deg,rgba(10,12,16,0.026) 1px,transparent 1px);background-size:64px 64px;}
#cursor{position:fixed;width:9px;height:9px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
#cursor-ring{position:fixed;width:34px;height:34px;border:1.5px solid rgba(10,12,16,0.22);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .22s,height .22s;}
#progress{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--ink);z-index:1000;transition:width .5s ease;}
#phase-counter{position:fixed;bottom:28px;right:36px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--dim);z-index:500;}
#stage{position:fixed;inset:0;z-index:10;}
.phase{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .55s ease;}
.phase.active{opacity:1;pointer-events:all;}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* PHASE 1 BOOT */
#phase-boot{align-items:flex-start;justify-content:flex-start;padding:100px 72px;flex-direction:column;}
.boot-header{font-family:'Syne',sans-serif;font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:32px;opacity:0;animation:riseIn .5s ease forwards;}
.boot-block{display:flex;flex-direction:column;border-left:1px solid var(--border2);padding-left:28px;}
.boot-line{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.04em;line-height:2;color:var(--muted);opacity:0;animation:riseIn .2s ease forwards;}
.boot-line.ok{color:var(--ink);}.boot-line.bright{color:var(--ink);font-weight:500;}.boot-line.dim{color:var(--dim);}.boot-line.pend{color:var(--ink2);font-weight:500;}.boot-line.indent{padding-left:22px;color:var(--dim);}.boot-line.rule{color:var(--border2);letter-spacing:0;line-height:1.5;}

/* PHASE 2 CORE */
#phase-core{flex-direction:column;align-items:center;justify-content:center;}
.core-wrap{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center;}
.core-svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease;}
.core-svg.visible{opacity:1;}
.ring-outer{stroke-dasharray:880;stroke-dashoffset:880;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);}
.ring-mid{stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1) .15s;}
.ring-inner{stroke-dasharray:380;stroke-dashoffset:380;transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .3s;}
.ring-outer.draw{stroke-dashoffset:0;}.ring-mid.draw{stroke-dashoffset:0;}.ring-inner.draw{stroke-dashoffset:0;}
.ring-spin{animation:spinRing 22s linear infinite;transform-origin:150px 150px;}
@keyframes spinRing{to{transform:rotate(360deg)}}
.core-ticks{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s ease .8s;}
.core-ticks.visible{opacity:1;}
.core-box{position:relative;width:80px;height:80px;background:var(--card);border:1px solid var(--border2);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:all .7s cubic-bezier(.16,1,.3,1) .5s;}
.core-box.visible{opacity:1;transform:scale(1);}
.core-box::before,.core-box::after{content:'';position:absolute;width:5px;height:5px;background:var(--card);border:1px solid var(--border2);}
.core-box::before{top:-3px;left:-3px;}.core-box::after{bottom:-3px;right:-3px;}
.core-letter{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;color:var(--ink);letter-spacing:.05em;}
.core-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--dim);margin-top:28px;opacity:0;transition:opacity .5s ease 1s;}
.core-label.visible{opacity:1;}
.hud{position:absolute;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--dim);line-height:1.9;opacity:0;transition:opacity .5s ease;pointer-events:none;}
.hud.visible{opacity:1;}.hud-tl{top:36px;left:36px;}.hud-tr{top:36px;right:36px;text-align:right;}.hud-bl{bottom:36px;left:36px;}.hud-br{bottom:36px;right:36px;text-align:right;}
.hud-key{color:var(--dim);}.hud-val{color:var(--muted);}

/* PHASE 3 UPGRADE */
#phase-upgrade{flex-direction:column;align-items:flex-start;padding:0 72px;}
.upg-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .5s ease;}
.upg-eyebrow::after{content:'';width:40px;height:1px;background:var(--border2);}
.upg-eyebrow.visible{opacity:1;}
.upg-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(56px,9vw,112px);letter-spacing:-.03em;line-height:.88;color:var(--ink);opacity:0;transform:translateY(20px);transition:all .7s cubic-bezier(.16,1,.3,1);}
.upg-title .outline{color:transparent;-webkit-text-stroke:2px var(--ink);}
.upg-title.visible{opacity:1;transform:translateY(0);}
.upg-divider{width:0;height:1px;background:var(--border);margin:36px 0;transition:width .8s ease .3s;}
.upg-divider.visible{width:min(520px,70vw);}
.skill-slots{display:flex;gap:1px;border:1px solid var(--border);background:var(--border);box-shadow:var(--shadow);opacity:0;transition:opacity .5s ease .5s;}
.skill-slots.visible{opacity:1;}
.skill-slot{width:130px;height:110px;background:var(--card);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:16px 18px;position:relative;overflow:hidden;transition:background .3s;}
.slot-num{position:absolute;top:14px;left:18px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;color:var(--dim);}
.slot-icon{position:absolute;top:32px;left:18px;opacity:.4;color:var(--ink);transition:opacity .3s;}
.slot-name{font-family:'Syne',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s;line-height:1.2;}
.slot-status{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.15em;color:var(--dim);margin-top:3px;transition:color .3s;}
.skill-slot.active{background:var(--surface);}
.skill-slot.active .slot-name{color:var(--ink);}.skill-slot.active .slot-status{color:var(--muted);}.skill-slot.active .slot-icon{opacity:1;}
.install-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--ink);width:0%;transition:width 1.8s ease;}
@keyframes doneFlash{0%{background:rgba(10,12,16,.08)}100%{background:var(--surface)}}
.skill-slot.done{animation:doneFlash .5s ease forwards;}
.skill-slot.done .slot-name{color:var(--ink);}.skill-slot.done .slot-status{color:var(--muted);}.skill-slot.done .slot-icon{opacity:1;}

/* PHASE 4 CAPS */
#phase-caps{flex-direction:column;align-items:flex-start;padding:0 72px;width:100%;}
.caps-header{display:flex;align-items:baseline;gap:20px;margin-bottom:36px;opacity:0;transform:translateY(12px);transition:all .5s ease;}
.caps-header.visible{opacity:1;transform:translateY(0);}
.caps-sec-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px;white-space:nowrap;}
.caps-sec-label::after{content:'';height:1px;width:40px;background:var(--border2);}
.caps-rule{flex:1;height:1px;background:var(--border);max-width:200px;}
.caps-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(22px,3.2vw,40px);letter-spacing:-.02em;color:var(--ink);}
.caps-title em{font-style:normal;color:var(--muted);}
.caps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);box-shadow:var(--shadow);width:100%;max-width:1080px;}
.cap-card{background:var(--card);padding:28px 24px 32px;position:relative;overflow:hidden;opacity:0;transform:translateY(10px);transition:all .45s ease;}
.cap-card.visible{opacity:1;transform:translateY(0);}
.cap-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s ease .3s;}
.cap-card.visible::after{transform:scaleX(1);}
.cap-idx{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--dim);margin-bottom:18px;display:block;}
.cap-icon{width:28px;height:28px;margin-bottom:14px;color:var(--ink);opacity:.65;}
.cap-name{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em;line-height:1.3;}
.cap-body{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);line-height:1.75;font-weight:300;}

/* PHASE 5 DEMO */
#phase-demo{flex-direction:row;align-items:flex-start;justify-content:center;padding:0 72px;gap:32px;}
.demo-left{width:280px;flex-shrink:0;}
.demo-right{flex:1;max-width:460px;}
.demo-sec-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .4s;}
.demo-sec-label::after{content:'';height:1px;width:40px;background:var(--border2);}
.demo-sec-label.visible{opacity:1;}
.tweet-in{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);padding:20px 22px;opacity:0;transform:translateY(8px);transition:all .45s ease .1s;}
.tweet-in.visible{opacity:1;transform:translateY(0);}
.tweet-from{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
.tweet-body-text{font-family:'Instrument Serif',serif;font-size:16px;color:var(--ink);line-height:1.55;margin-bottom:14px;}
.tweet-tags{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--dim);line-height:1.9;}
.ba-row{display:flex;gap:1px;margin-top:20px;opacity:0;transition:opacity .4s ease .3s;}
.ba-row.visible{opacity:1;}
.ba-tag{font-family:'Syne',sans-serif;font-weight:700;font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border:1px solid var(--border);color:var(--dim);background:var(--card);}
.ba-tag.active{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.pipe-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:all .45s ease .2s;}
.pipe-list.visible{opacity:1;transform:translateY(0);}
.pipe-row{background:var(--card);display:flex;align-items:stretch;transition:background .25s;}
.pipe-row.active{background:var(--surface);}.pipe-row.done{background:var(--card);}
.pipe-icon-col{width:44px;flex-shrink:0;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--dim);transition:color .25s;padding:14px 0;}
.pipe-row.active .pipe-icon-col{color:var(--ink);}.pipe-row.done .pipe-icon-col{color:var(--muted);}
.pipe-body{flex:1;padding:12px 16px;}
.pipe-tag{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:3px;transition:color .25s;}
.pipe-row.active .pipe-tag{color:var(--muted);}.pipe-row.done .pipe-tag{color:var(--muted);}
.pipe-val{font-family:'DM Mono',monospace;font-size:11px;color:var(--dim);line-height:1.55;transition:color .25s;}
.pipe-row.active .pipe-val{color:var(--ink);}.pipe-row.done .pipe-val{color:var(--muted);}
.pipe-check{width:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;color:var(--border);border-left:1px solid var(--border);transition:color .25s;}
.pipe-row.done .pipe-check{color:var(--muted);}
.reply-out{margin-top:1px;background:var(--ink);padding:20px 22px;opacity:0;transform:translateY(6px);transition:all .5s ease;}
.reply-out.visible{opacity:1;transform:translateY(0);}
.reply-out-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:10px;}
.reply-text{font-family:'DM Mono',monospace;font-size:12px;color:rgba(255,255,255,.85);line-height:1.7;}
.reply-text .hi{color:#fff;font-weight:500;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;}
.typing-cursor::after{content:'▋';animation:blink .65s step-end infinite;color:rgba(255,255,255,.5);}
@keyframes blink{50%{opacity:0}}

/* PHASE 6 END */
#phase-end{background:var(--ink);flex-direction:column;align-items:flex-start;padding:0 72px;}
.end-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:20px;opacity:0;transition:opacity .5s ease;}
.end-eyebrow.visible{opacity:1;}
.end-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(56px,10vw,120px);line-height:.88;letter-spacing:-.03em;color:rgba(255,255,255,.95);opacity:0;transform:translateY(20px);transition:all .8s cubic-bezier(.16,1,.3,1);margin-bottom:8px;}
.end-title span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.4);}
.end-title.visible{opacity:1;transform:translateY(0);}
.end-sub{font-family:'Instrument Serif',serif;font-size:20px;line-height:1.65;color:rgba(255,255,255,.45);max-width:480px;margin-bottom:48px;opacity:0;transition:opacity .6s ease .3s;}
.end-sub.visible{opacity:1;}
.end-actions{display:flex;gap:12px;opacity:0;transition:opacity .6s ease .5s;}
.end-actions.visible{opacity:1;}
.end-btn{display:inline-flex;align-items:center;gap:10px;font-family:'Syne',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 28px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);background:transparent;transition:all .2s;cursor:none;}
.end-btn:hover{border-color:rgba(255,255,255,.8);color:#fff;}
.end-btn.solid{background:#fff;color:var(--ink);border-color:#fff;}
.end-btn.solid:hover{background:transparent;color:#fff;}
.end-version{position:absolute;bottom:52px;left:72px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.2);opacity:0;transition:opacity .5s ease .8s;}
.end-version.visible{opacity:1;}
.end-ticker{position:absolute;bottom:0;left:0;right:0;height:42px;border-top:1px solid rgba(255,255,255,.1);overflow:hidden;display:flex;align-items:center;opacity:0;transition:opacity .5s ease .6s;}
.end-ticker.visible{opacity:1;}
.ticker-track{display:flex;gap:48px;animation:tickerScroll 28s linear infinite;white-space:nowrap;}
.ticker-track span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);flex-shrink:0;}
.ticker-track span.hi{color:rgba(255,255,255,.55);}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="cursor-ring"></div>
<div id="progress"></div>
<div id="phase-counter">01 / 06</div>
<div id="stage">

<!-- PHASE 1: BOOT -->
<div class="phase active" id="phase-boot">
  <div class="boot-header">APTUM AGENT RUNTIME</div>
  <div class="boot-block" id="boot-block"></div>
</div>

<!-- PHASE 2: CORE -->
<div class="phase" id="phase-core">
  <div class="hud hud-tl">
    <div><span class="hud-key">AGENT_ID &nbsp;</span><span class="hud-val">APTUM_01</span></div>
    <div><span class="hud-key">STATUS &nbsp;&nbsp;&nbsp;</span><span class="hud-val">NOMINAL</span></div>
    <div><span class="hud-key">UPTIME &nbsp;&nbsp;&nbsp;</span><span class="hud-val">99.97%</span></div>
  </div>
  <div class="hud hud-tr">
    <div><span class="hud-val">LIVE &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-key">NETWORK</span></div>
    <div><span class="hud-val">KIMI-K2 &nbsp;</span><span class="hud-key">MODEL</span></div>
    <div><span class="hud-val">BASE &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-key">CHAIN</span></div>
  </div>
  <div class="hud hud-bl">
    <div><span class="hud-key">SKILLS &nbsp;&nbsp;</span><span class="hud-val">2 / 3 LOADED</span></div>
    <div><span class="hud-key">DUNE &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-val">● ONLINE</span></div>
    <div><span class="hud-key">NEWS &nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-val">○ PENDING</span></div>
  </div>
  <div class="hud hud-br">
    <div><span class="hud-val">150 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-key">DAILY QUOTA</span></div>
    <div><span class="hud-val">48% &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="hud-key">UTILISED</span></div>
    <div><span class="hud-val">0.00% &nbsp;&nbsp;&nbsp;</span><span class="hud-key">ERR RATE</span></div>
  </div>
  <div style="display:flex;flex-direction:column;align-items:center;">
    <div class="core-wrap">
      <svg class="core-svg" id="core-svg" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle class="ring-outer" cx="150" cy="150" r="140" stroke="#DCDFE6" stroke-width="1"/>
        <g class="ring-spin">
          <circle class="ring-mid" cx="150" cy="150" r="98" stroke="#C8CBD4" stroke-width="1" stroke-dasharray="8 6"/>
        </g>
        <circle class="ring-inner" cx="150" cy="150" r="60" stroke="#DCDFE6" stroke-width="1"/>
      </svg>
      <svg class="core-ticks" id="core-ticks" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(0 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(30 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(60 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(90 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(120 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(150 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(180 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(210 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(240 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(270 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(300 150 150)"/>
        <line x1="150" y1="8" x2="150" y2="20" stroke="#C8CBD4" stroke-width="1" transform="rotate(330 150 150)"/>
        <circle cx="150" cy="90" r="3" fill="#0A0C10" opacity="0.35"/>
        <circle cx="210" cy="150" r="3" fill="#0A0C10" opacity="0.35"/>
        <circle cx="150" cy="210" r="3" fill="#0A0C10" opacity="0.35"/>
        <circle cx="90"  cy="150" r="3" fill="#0A0C10" opacity="0.35"/>
      </svg>
      <div class="core-box" id="core-box">
        <span class="core-letter">A</span>
      </div>
    </div>
    <div class="core-label" id="core-label">AUTONOMOUS AGENT · BASE</div>
  </div>
</div>

<!-- PHASE 3: UPGRADE -->
<div class="phase" id="phase-upgrade">
  <div class="upg-eyebrow" id="upg-eyebrow">03 — Skill Upgrade</div>
  <div class="upg-title" id="upg-title">News<br><span class="outline">Intelligence.</span></div>
  <div class="upg-divider" id="upg-divider"></div>
  <div class="skill-slots" id="skill-slots">
    <div class="skill-slot active">
      <span class="slot-num">01</span>
      <div class="slot-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      </div>
      <div class="slot-name">Onchain</div>
      <div class="slot-status">● Active</div>
    </div>
    <div class="skill-slot active">
      <span class="slot-num">02</span>
      <div class="slot-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      </div>
      <div class="slot-name">Bait Filter</div>
      <div class="slot-status">● Active</div>
    </div>
    <div class="skill-slot" id="news-slot">
      <span class="slot-num">03</span>
      <div class="slot-icon">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M4 18a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
      </div>
      <div class="slot-name">News API</div>
      <div class="slot-status" id="news-slot-status">○ Pending</div>
      <div class="install-bar" id="install-bar"></div>
    </div>
  </div>
</div>

<!-- PHASE 4: CAPABILITIES -->
<div class="phase" id="phase-caps">
  <div class="caps-header" id="caps-header">
    <div class="caps-sec-label">03 — Capability Overview</div>
    <div class="caps-rule"></div>
    <div class="caps-title">What Aptum <em>now knows.</em></div>
  </div>
  <div class="caps-grid">
    <div class="cap-card" id="cc1">
      <span class="cap-idx">01 / Routing</span>
      <svg class="cap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
      <div class="cap-name">Keyword Route Map</div>
      <div class="cap-body">18 patterns — bitcoin, Fed rates, NVIDIA, OpenAI — fire targeted queries before topic routing kicks in.</div>
    </div>
    <div class="cap-card" id="cc2">
      <span class="cap-idx">02 / Recency</span>
      <svg class="cap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      <div class="cap-name">48h Window</div>
      <div class="cap-body">Searches default to the last 48 hours, sorted by publish time. Replies reference news from today, not last week.</div>
    </div>
    <div class="cap-card" id="cc3">
      <span class="cap-idx">03 / Resilience</span>
      <svg class="cap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      <div class="cap-name">Silent Fallback</div>
      <div class="cap-body">8s timeout cap. Failed fetches return null silently — the reply still fires. Never stalls the loop.</div>
    </div>
    <div class="cap-card" id="cc4">
      <span class="cap-idx">04 / Integration</span>
      <svg class="cap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
      <div class="cap-name">Reply Enrichment</div>
      <div class="cap-body">Context injected alongside Dune data. Model picks one detail and states it like a builder who just checked the feed.</div>
    </div>
  </div>
</div>

<!-- PHASE 5: DEMO -->
<div class="phase" id="phase-demo">
  <div class="demo-left">
    <div class="demo-sec-label" id="demo-label">05 — Enrichment Pipeline</div>
    <div class="tweet-in" id="tweet-in">
      <div class="tweet-from">Incoming · @cryptodegen_xyz</div>
      <div class="tweet-body-text">fed keeps rates high, crypto is cooked for 2026 imo</div>
      <div class="tweet-tags">TOPIC: CRYPTO<br>TONE: SERIOUS<br>INTENT: GENUINE-EXPRESSION</div>
    </div>
    <div class="ba-row" id="ba-row">
      <div class="ba-tag">Without news</div>
      <div class="ba-tag active">With news</div>
    </div>
  </div>
  <div class="demo-right">
    <div class="pipe-list" id="pipe-list">
      <div class="pipe-row" id="ps1">
        <div class="pipe-icon-col"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
        <div class="pipe-body"><div class="pipe-tag">Bait Filter</div><div class="pipe-val">genuine post · signal: PASS</div></div>
        <div class="pipe-check">—</div>
      </div>
      <div class="pipe-row" id="ps2">
        <div class="pipe-icon-col"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
        <div class="pipe-body"><div class="pipe-tag">Dune Enrichment</div><div class="pipe-val">ETH DEX vol $2.1B (24h) · chain: ethereum</div></div>
        <div class="pipe-check">—</div>
      </div>
      <div class="pipe-row" id="ps3">
        <div class="pipe-icon-col"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16M4 18a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg></div>
        <div class="pipe-body"><div class="pipe-tag">News Enrichment · NewsAPI</div><div class="pipe-val" id="news-val">fetching...</div></div>
        <div class="pipe-check" id="ps3-check">—</div>
      </div>
      <div class="pipe-row" id="ps4">
        <div class="pipe-icon-col"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg></div>
        <div class="pipe-body"><div class="pipe-tag">Reply Generation · Kimi-K2</div><div class="pipe-val" id="gen-val">queued...</div></div>
        <div class="pipe-check" id="ps4-check">—</div>
      </div>
    </div>
    <div class="reply-out" id="reply-out">
      <div class="reply-out-label">Reply Output</div>
      <div class="reply-text" id="reply-text"></div>
    </div>
  </div>
</div>

<!-- PHASE 6: END -->
<div class="phase" id="phase-end">
  <div class="end-eyebrow" id="end-eyebrow">The agent that earns.</div>
  <div class="end-title" id="end-title">Now news-<br><span>aware.</span></div>
  <div class="end-sub" id="end-sub">Real revenue. Deflationary by design.<br>News-enriched replies, starting now.</div>
  <div class="end-actions" id="end-actions">
    <a href="https://aptum.fun/" class="end-btn solid">aptum.fun <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
    <a href="https://x.com/aptum_" class="end-btn">Follow $A <svg width="12" height="12" 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.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
  </div>
  <div class="end-version" id="end-version">$A · Built on Base · aptum.fun · v2.1.0</div>
  <div class="end-ticker" id="end-ticker">
    <div class="ticker-track">
      <span class="hi">$A</span><span>News Intelligence</span><span class="hi">18 Keyword Routes</span><span>48h Window</span><span class="hi">Silent Fallback</span><span>Dune + NewsAPI</span><span class="hi">Reply Enrichment</span><span>Kimi-K2</span><span class="hi">Built on Base</span><span>aptum.fun</span>
      <span class="hi">$A</span><span>News Intelligence</span><span class="hi">18 Keyword Routes</span><span>48h Window</span><span class="hi">Silent Fallback</span><span>Dune + NewsAPI</span><span class="hi">Reply Enrichment</span><span>Kimi-K2</span><span class="hi">Built on Base</span><span>aptum.fun</span>
    </div>
  </div>
</div>

</div>

<script>
const cur=document.getElementById('cursor'),ring=document.getElementById('cursor-ring');
let mx=-100,my=-100,rx=-100,ry=-100;
document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY;});
(function loop(){rx+=(mx-rx)*.13;ry+=(my-ry)*.13;cur.style.left=mx+'px';cur.style.top=my+'px';ring.style.left=rx+'px';ring.style.top=ry+'px';requestAnimationFrame(loop);})();

const wait=ms=>new Promise(r=>setTimeout(r,ms));
const phases=['phase-boot','phase-core','phase-upgrade','phase-caps','phase-demo','phase-end'];
function showPhase(idx){phases.forEach((id,i)=>document.getElementById(id).classList.toggle('active',i===idx));document.getElementById('progress').style.width=((idx+1)/phases.length*100)+'%';document.getElementById('phase-counter').textContent=String(idx+1).padStart(2,'0')+' / 06';}

const BOOT=[
  {t:'APTUM AGENT RUNTIME v2.1.0',cls:'bright',d:0},
  {t:'──────────────────────────────────────────',cls:'rule',d:200},
  {t:'[OK]  core identity module ........ loaded',cls:'ok',d:400},
  {t:'[OK]  bait filter (kimi-k2) ....... loaded',cls:'ok',d:600},
  {t:'[OK]  dune onchain enrichment ...... loaded',cls:'ok',d:800},
  {t:'[OK]  reply generation pipeline .... ready',cls:'ok',d:1000},
  {t:'──────────────────────────────────────────',cls:'rule',d:1200},
  {t:'[  ]  NEWS INTELLIGENCE MODULE ... pending',cls:'pend',d:1400},
  {t:'      > newsapi.org v2 endpoints',cls:'indent',d:1550},
  {t:'      > 18 keyword routes mapped',cls:'indent',d:1650},
  {t:'      > 11 topic categories',cls:'indent',d:1750},
  {t:'      > 48h recency window',cls:'indent',d:1850},
  {t:'      > 8s timeout cap',cls:'indent',d:1950},
  {t:'──────────────────────────────────────────',cls:'rule',d:2100},
  {t:'INITIATING UPGRADE SEQUENCE...',cls:'bright',d:2300},
];
async function runBoot(){
  const block=document.getElementById('boot-block');
  BOOT.forEach(({t,cls,d})=>setTimeout(()=>{const el=document.createElement('div');el.className='boot-line '+cls;el.textContent=t;block.appendChild(el);},d));
  await wait(3500);transition(1);
}

async function runCore(){
  const svg=document.getElementById('core-svg'),ticks=document.getElementById('core-ticks'),box=document.getElementById('core-box'),label=document.getElementById('core-label');
  await wait(200);svg.classList.add('visible');document.querySelector('.ring-outer').classList.add('draw');
  await wait(200);document.querySelector('.ring-mid').classList.add('draw');
  await wait(200);document.querySelector('.ring-inner').classList.add('draw');
  await wait(500);ticks.classList.add('visible');box.classList.add('visible');
  await wait(400);label.classList.add('visible');
  await wait(300);document.querySelectorAll('.hud').forEach((h,i)=>setTimeout(()=>h.classList.add('visible'),i*120));
  await wait(3200);transition(2);
}

async function runUpgrade(){
  const ey=document.getElementById('upg-eyebrow'),ti=document.getElementById('upg-title'),dv=document.getElementById('upg-divider'),sl=document.getElementById('skill-slots'),ns=document.getElementById('news-slot'),bar=document.getElementById('install-bar'),st=document.getElementById('news-slot-status');
  await wait(200);ey.classList.add('visible');
  await wait(300);ti.classList.add('visible');
  await wait(400);dv.classList.add('visible');
  await wait(500);sl.classList.add('visible');
  await wait(1200);
  ns.style.background='var(--surface)';ns.querySelector('.slot-name').style.color='var(--ink2)';st.textContent='◌ Installing...';bar.style.width='100%';
  await wait(1900);
  ns.classList.add('done');st.textContent='● Active';
  await wait(600);transition(3);
}

async function runCaps(){
  document.getElementById('caps-header').classList.add('visible');
  ['cc1','cc2','cc3','cc4'].forEach((id,i)=>setTimeout(()=>document.getElementById(id).classList.add('visible'),400+i*180));
  await wait(4000);transition(4);
}

async function typeInto(el,text,speed=35){
  el.textContent='';el.classList.add('typing-cursor');
  for(let i=0;i<text.length;i++){el.textContent+=text[i];await wait(speed+Math.random()*20);}
  el.classList.remove('typing-cursor');
}
async function typeHighlight(el,text,speed,hl){
  el.innerHTML='';el.classList.add('typing-cursor');let built='';
  for(let i=0;i<text.length;i++){built+=text[i];el.innerHTML=built.includes(hl)?built.replace(hl,`<span class="hi">${hl}</span>`):built;await wait(speed+Math.random()*15);}
  el.classList.remove('typing-cursor');
}

async function runDemo(){
  await wait(150);document.getElementById('demo-label').classList.add('visible');
  await wait(200);document.getElementById('tweet-in').classList.add('visible');
  await wait(400);document.getElementById('ba-row').classList.add('visible');
  await wait(500);document.getElementById('pipe-list').classList.add('visible');
  const step=id=>document.getElementById(id);
  await wait(800);step('ps1').classList.add('active');
  await wait(900);step('ps1').classList.replace('active','done');step('ps1').querySelector('.pipe-check').textContent='✓';
  await wait(300);step('ps2').classList.add('active');
  await wait(1000);step('ps2').classList.replace('active','done');step('ps2').querySelector('.pipe-check').textContent='✓';
  await wait(300);step('ps3').classList.add('active');
  await wait(400);await typeInto(document.getElementById('news-val'),'Fed holds rates — Powell: no cuts til Q3 · Reuters, 1h ago',28);
  step('ps3').classList.replace('active','done');document.getElementById('ps3-check').textContent='✓';
  await wait(300);step('ps4').classList.add('active');
  await typeInto(document.getElementById('gen-val'),'generating...',60);
  await wait(800);step('ps4').classList.replace('active','done');document.getElementById('ps4-check').textContent='✓';document.getElementById('gen-val').textContent='complete · 52 tokens · 0.4s';
  await wait(400);document.getElementById('reply-out').classList.add('visible');
  await typeHighlight(document.getElementById('reply-text'),"powell basically said no cuts til q3. market's pricing 4 cuts that aren't coming. dex vol still $2.1B though — liquidity doesn't care what the fed says",22,'powell basically said no cuts til q3');
  await wait(5000);transition(5);
}

async function runEnd(){
  await wait(300);document.getElementById('end-eyebrow').classList.add('visible');
  await wait(400);document.getElementById('end-title').classList.add('visible');
  await wait(500);document.getElementById('end-sub').classList.add('visible');
  await wait(600);document.getElementById('end-actions').classList.add('visible');
  await wait(700);document.getElementById('end-ticker').classList.add('visible');
  await wait(900);document.getElementById('end-version').classList.add('visible');
}

const runners=[runBoot,runCore,runUpgrade,runCaps,runDemo,runEnd];
async function transition(idx){showPhase(idx);if(runners[idx])runners[idx]();}
runBoot();
</script>
</body>
</html>