diff --git a/site/app.js b/site/app.js
new file mode 100644
index 0000000..48ae7b7
--- /dev/null
+++ b/site/app.js
@@ -0,0 +1,349 @@
+/* CloudSQL Autoscaler — hero console animation.
+   A self-contained (no deps) canvas that streams a live CPU-utilization graph
+   and periodically "resizes" the instance: as the machine type steps up/down,
+   the graph renormalizes, a savings pill floats up, and a log line types in.
+   The demand curve is a real function of time, so utilization is a physical
+   consequence of demand / provisioned vCPUs — resizing visibly changes it. */
+(function () {
+  "use strict";
+
+  var reduce =
+    window.matchMedia &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  /* ---- scroll reveal ---- */
+  var revealables = document.querySelectorAll(".reveal");
+  if ("IntersectionObserver" in window && !reduce) {
+    var io = new IntersectionObserver(
+      function (entries) {
+        entries.forEach(function (e) {
+          if (e.isIntersecting) {
+            e.target.classList.add("in");
+            io.unobserve(e.target);
+          }
+        });
+      },
+      { threshold: 0.15 }
+    );
+    revealables.forEach(function (el) {
+      io.observe(el);
+    });
+  } else {
+    revealables.forEach(function (el) {
+      el.classList.add("in");
+    });
+  }
+
+  /* ---- console animation ---- */
+  var canvas = document.getElementById("cpu");
+  if (!canvas) return;
+  var ctx = canvas.getContext("2d");
+  var wrap = canvas.parentElement;
+
+  var SIZES = [
+    { name: "db-n2-standard-16", vcpu: 16 },
+    { name: "db-n2-standard-8", vcpu: 8 },
+    { name: "db-n2-standard-4", vcpu: 4 },
+    { name: "db-n2-standard-2", vcpu: 2 },
+  ];
+  var PER_VCPU = 46; // ~$/vCPU/month, for the savings readout
+
+  var idx = 1; // start on standard-8 (over-provisioned)
+  var N = 150; // samples on screen
+  var buf = [];
+  var util = 34; // current utilization %
+  var p95 = 34;
+  var simMin = 9 * 60; // sim clock, minutes since midnight
+  var lastSampleT = 0;
+  var lastDecisionT = 0;
+  var cooldownUntil = 0;
+  var SAMPLE_MS = 60;
+  var DECISION_MS = 2500;
+  var COOLDOWN_MS = 2600;
+  var markers = []; // {x:sampleAge, dir, age}
+
+  var W = 0,
+    H = 0,
+    dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+  var mtypeEl = document.getElementById("mtype");
+  var mnameEl = document.getElementById("mtype-name");
+  var savingsEl = document.getElementById("savings");
+  var logEl = document.getElementById("log");
+
+  function resize() {
+    W = wrap.clientWidth;
+    H = wrap.clientHeight;
+    canvas.width = Math.round(W * dpr);
+    canvas.height = Math.round(H * dpr);
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  if ("ResizeObserver" in window) new ResizeObserver(resize).observe(wrap);
+  else window.addEventListener("resize", resize);
+  resize();
+
+  function demand(tSec) {
+    // vCPU-equivalents of load, slowly wandering to create up & down pressure
+    return 4.0 + 1.95 * Math.sin(tSec * 0.34) + 0.65 * Math.sin(tSec * 0.13 + 1);
+  }
+  function percentile(arr, p) {
+    if (!arr.length) return 0;
+    var s = arr.slice().sort(function (a, b) {
+      return a - b;
+    });
+    return s[Math.min(s.length - 1, Math.floor(p * (s.length - 1)))];
+  }
+  function shortName(n) {
+    return n.replace("db-n2-", "");
+  }
+  function clk(m) {
+    var h = Math.floor(m / 60) % 24,
+      mm = m % 60;
+    return (h < 10 ? "0" + h : h) + ":" + (mm < 10 ? "0" + mm : mm);
+  }
+
+  var logs = [];
+  function pushLog(html) {
+    logs.unshift('<span class="ln">' + html + "</span>");
+    logs = logs.slice(0, 2);
+    logEl.innerHTML = logs.join("");
+  }
+  pushLog(
+    '<span class="t">' +
+      clk(simMin) +
+      '</span> monitoring <span class="id">5 instances</span> · P95 over 3d'
+  );
+
+  function resizeInstance(dir) {
+    var before = SIZES[idx];
+    idx += dir > 0 ? 1 : -1;
+    var after = SIZES[idx];
+    simMin += 30;
+    var diff = Math.abs(before.vcpu - after.vcpu) * PER_VCPU;
+
+    if (mnameEl) mnameEl.textContent = after.name;
+    if (mtypeEl) {
+      mtypeEl.classList.remove("flip");
+      void mtypeEl.offsetWidth;
+      mtypeEl.classList.add("flip");
+    }
+    if (savingsEl) {
+      savingsEl.textContent = (dir > 0 ? "−$" : "+$") + diff + "/mo";
+      savingsEl.classList.toggle("up", dir < 0);
+      savingsEl.classList.remove("show");
+      void savingsEl.offsetWidth;
+      savingsEl.classList.add("show");
+    }
+    markers.push({ age: 0, dir: dir });
+
+    if (dir > 0) {
+      pushLog(
+        '<span class="t">' +
+          clk(simMin) +
+          '</span> <span class="ok">✓ scaled down</span> <span class="id">db-01</span> ' +
+          shortName(before.name) +
+          " → " +
+          shortName(after.name) +
+          ' · <span class="ok">-$' +
+          diff +
+          "/mo</span>"
+      );
+    } else {
+      pushLog(
+        '<span class="t">' +
+          clk(simMin) +
+          '</span> <span class="up">▲ scaled up</span> <span class="id">db-01</span> ' +
+          shortName(before.name) +
+          " → " +
+          shortName(after.name) +
+          ' · <span class="up">+$' +
+          diff +
+          "/mo</span>"
+      );
+    }
+  }
+
+  function color(v) {
+    if (v < 45) return "#38bdf8"; // under-utilized
+    if (v > 80) return "#fbbf24"; // hot
+    return "#34d399"; // healthy
+  }
+
+  function draw(nowMs) {
+    var padT = 16,
+      padB = 14,
+      padR = 2,
+      padL = 2;
+    var plotH = H - padT - padB;
+    var y = function (v) {
+      return padT + (1 - v / 100) * plotH;
+    };
+    var x = function (i) {
+      return padL + (i / (N - 1)) * (W - padL - padR);
+    };
+
+    ctx.clearRect(0, 0, W, H);
+
+    // target band 50–75%
+    ctx.fillStyle = "rgba(52,211,153,0.05)";
+    ctx.fillRect(0, y(75), W, y(50) - y(75));
+
+    // gridlines
+    ctx.strokeStyle = "rgba(255,255,255,0.05)";
+    ctx.lineWidth = 1;
+    [25, 50, 75].forEach(function (g) {
+      ctx.beginPath();
+      ctx.moveTo(0, y(g));
+      ctx.lineTo(W, y(g));
+      ctx.stroke();
+    });
+
+    // resize markers
+    for (var m = markers.length - 1; m >= 0; m--) {
+      var mk = markers[m];
+      mk.age += 1;
+      var mi = N - 1 - mk.age;
+      if (mi < 0) {
+        markers.splice(m, 1);
+        continue;
+      }
+      var mx = x(mi);
+      var alpha = Math.max(0, 1 - mk.age / N) * 0.5;
+      ctx.strokeStyle =
+        (mk.dir > 0 ? "rgba(52,211,153," : "rgba(251,191,36,") + alpha + ")";
+      ctx.setLineDash([3, 4]);
+      ctx.beginPath();
+      ctx.moveTo(mx, padT);
+      ctx.lineTo(mx, H - padB);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
+    if (buf.length > 1) {
+      var stroke = color(p95);
+      var n = buf.length;
+      var off = N - n; // right-align newest
+
+      // area
+      var grad = ctx.createLinearGradient(0, padT, 0, H - padB);
+      grad.addColorStop(0, hexA(stroke, 0.28));
+      grad.addColorStop(1, hexA(stroke, 0));
+      ctx.beginPath();
+      ctx.moveTo(x(off), y(buf[0]));
+      for (var i = 1; i < n; i++) ctx.lineTo(x(off + i), y(buf[i]));
+      ctx.lineTo(x(off + n - 1), H - padB);
+      ctx.lineTo(x(off), H - padB);
+      ctx.closePath();
+      ctx.fillStyle = grad;
+      ctx.fill();
+
+      // line
+      ctx.beginPath();
+      ctx.moveTo(x(off), y(buf[0]));
+      for (var j = 1; j < n; j++) ctx.lineTo(x(off + j), y(buf[j]));
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = 2;
+      ctx.lineJoin = "round";
+      ctx.stroke();
+
+      // leading dot
+      var lx = x(off + n - 1),
+        ly = y(buf[n - 1]);
+      ctx.fillStyle = stroke;
+      ctx.beginPath();
+      ctx.arc(lx, ly, 3.2, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.fillStyle = hexA(stroke, 0.25);
+      ctx.beginPath();
+      ctx.arc(lx, ly, 6.5, 0, Math.PI * 2);
+      ctx.fill();
+
+      // P95 dashed line + label
+      var py = y(p95);
+      ctx.strokeStyle = "#a78bfa";
+      ctx.setLineDash([5, 5]);
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.moveTo(0, py);
+      ctx.lineTo(W, py);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      var label = "P95 " + Math.round(p95) + "%";
+      ctx.font =
+        '600 11px "Geist Mono", ui-monospace, monospace';
+      var tw = ctx.measureText(label).width + 12;
+      ctx.fillStyle = "#8b5cf6";
+      roundRect(ctx, W - tw - 6, py - 17, tw, 15, 4);
+      ctx.fill();
+      ctx.fillStyle = "#fff";
+      ctx.textBaseline = "middle";
+      ctx.fillText(label, W - tw, py - 9.5);
+    }
+  }
+
+  function hexA(hex, a) {
+    var r = parseInt(hex.slice(1, 3), 16),
+      g = parseInt(hex.slice(3, 5), 16),
+      b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + a + ")";
+  }
+  function roundRect(c, x, y, w, h, r) {
+    c.beginPath();
+    c.moveTo(x + r, y);
+    c.arcTo(x + w, y, x + w, y + h, r);
+    c.arcTo(x + w, y + h, x, y + h, r);
+    c.arcTo(x, y + h, x, y, r);
+    c.arcTo(x, y, x + w, y, r);
+    c.closePath();
+  }
+
+  function step(t) {
+    if (!lastSampleT) lastSampleT = lastDecisionT = t;
+
+    while (t - lastSampleT >= SAMPLE_MS) {
+      lastSampleT += SAMPLE_MS;
+      var tSec = lastSampleT / 1000;
+      var cap = SIZES[idx].vcpu;
+      var target = Math.max(3, Math.min(99, (demand(tSec) / cap) * 100));
+      util += (target - util) * 0.18 + (Math.random() - 0.5) * 2.2;
+      util = Math.max(2, Math.min(99, util));
+      buf.push(util);
+      if (buf.length > N) buf.shift();
+      p95 += (percentile(buf, 0.95) - p95) * 0.1;
+    }
+
+    if (
+      t - lastDecisionT >= DECISION_MS &&
+      t >= cooldownUntil &&
+      buf.length > 40
+    ) {
+      lastDecisionT = t;
+      if (p95 < 46 && idx < SIZES.length - 1) {
+        resizeInstance(1);
+        cooldownUntil = t + COOLDOWN_MS;
+      } else if (p95 > 82 && idx > 0) {
+        resizeInstance(-1);
+        cooldownUntil = t + COOLDOWN_MS;
+      }
+    }
+
+    draw(t);
+    requestAnimationFrame(step);
+  }
+
+  if (reduce) {
+    // static representative frame
+    for (var k = 0; k < N; k++) {
+      var v = 60 + 12 * Math.sin(k * 0.15) + (Math.random() - 0.5) * 6;
+      buf.push(Math.max(5, Math.min(95, v)));
+    }
+    p95 = percentile(buf, 0.95);
+    if (mnameEl) mnameEl.textContent = SIZES[2].name;
+    pushLog(
+      '<span class="t">09:30</span> <span class="ok">✓ scaled down</span> <span class="id">db-01</span> standard-8 → standard-4 · <span class="ok">-$184/mo</span>'
+    );
+    draw(0);
+  } else {
+    requestAnimationFrame(step);
+  }
+})();
diff --git a/site/favicon.svg b/site/favicon.svg
index 6fff6d3..dadb4a9 100644
--- a/site/favicon.svg
+++ b/site/favicon.svg
@@ -1,8 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="CloudSQL Autoscaler">
-  <rect width="64" height="64" rx="15" fill="#0b1220"/>
+  <rect width="64" height="64" rx="15" fill="#0b0b12"/>
   <rect x="13" y="35" width="8" height="15" rx="2.5" fill="#34d399"/>
   <rect x="28" y="27" width="8" height="23" rx="2.5" fill="#34d399"/>
   <rect x="43" y="17" width="8" height="33" rx="2.5" fill="#34d399"/>
-  <path d="M15 31 l12 -8 l9 6 l14 -14" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M43 15 h9 v9" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M15 31 l12 -8 l9 6 l14 -14" fill="none" stroke="#a78bfa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M43 15 h9 v9" fill="none" stroke="#a78bfa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/site/index.html b/site/index.html
index 8e6b4ff..799bda6 100644
--- a/site/index.html
+++ b/site/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>CloudSQL Autoscaler — right-size Cloud SQL automatically</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>CloudSQL Autoscaler — right-size Cloud SQL to what it actually uses</title>
     <meta
       name="description"
-      content="CloudSQL Autoscaler right-sizes Google Cloud SQL instances from real P95 utilization — downtime-aware, edition-aware, and safe by default. Run it as a CLI, a container, or a Kubernetes daemon."
+      content="CloudSQL Autoscaler right-sizes Google Cloud SQL instances from real P95 utilization — downtime-aware, edition-aware, safe by default. Watch it resize live."
     />
     <meta property="og:title" content="CloudSQL Autoscaler" />
     <meta
@@ -15,14 +15,20 @@
     />
     <meta property="og:type" content="website" />
     <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <header class="nav">
       <div class="nav-inner">
         <a class="brand" href="./index.html">
-          <img src="./favicon.svg" alt="" width="30" height="30" />
-          CloudSQL&nbsp;Autoscaler
+          <img src="./favicon.svg" alt="" width="26" height="26" />
+          CloudSQL&nbsp;·&nbsp;Autoscaler
         </a>
         <nav class="nav-links">
           <a class="hide-sm" href="#how">How it works</a>
@@ -32,12 +38,8 @@
             class="btn btn-primary"
             href="https://github.com/fraser-isbester/cloudsql-autoscaler"
           >
-            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path
-                d="M12 2C6.48 2 2 6.58 2 12.25c0 4.53 2.87 8.37 6.84 9.73.5.1.68-.22.68-.49 0-.24-.01-.87-.01-1.71-2.78.62-3.37-1.37-3.37-1.37-.45-1.18-1.11-1.5-1.11-1.5-.91-.64.07-.62.07-.62 1 .07 1.53 1.06 1.53 1.06.9 1.56 2.36 1.11 2.94.85.09-.66.35-1.11.63-1.37-2.22-.26-4.56-1.14-4.56-5.06 0-1.12.39-2.03 1.03-2.75-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05a9.36 9.36 0 0 1 5 0c1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.63 1.03 2.75 0 3.93-2.34 4.8-4.57 5.05.36.32.68.94.68 1.9 0 1.37-.01 2.48-.01 2.82 0 .27.18.6.69.49A10.26 10.26 0 0 0 22 12.25C22 6.58 17.52 2 12 2Z"
-              />
-            </svg>
             GitHub
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17 17 7M7 7h10v10"/></svg>
           </a>
         </nav>
       </div>
@@ -45,137 +47,70 @@
 
     <main>
       <!-- Hero -->
-      <section class="hero">
-        <div class="hero-grid">
-          <div>
-            <span class="eyebrow">Google Cloud SQL · autoscaling</span>
-            <h1>
-              Right-size Cloud SQL from
-              <span class="hl">real utilization.</span>
-            </h1>
-            <p class="lede">
-              CloudSQL Autoscaler reads three days of CPU and memory metrics,
-              finds the sustained load with P95 percentiles, and recommends — or
-              safely applies — the machine type your database actually needs.
-            </p>
-            <div class="hero-cta">
-              <a
-                class="btn btn-primary btn-lg"
-                href="https://github.com/fraser-isbester/cloudsql-autoscaler"
-                >Get started</a
-              >
-              <a
-                class="btn btn-lg"
-                href="https://github.com/fraser-isbester/cloudsql-autoscaler/releases"
-                >Download binaries</a
-              >
-            </div>
-            <p class="hero-note">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.4"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                aria-hidden="true"
-              >
-                <path d="M20 6 9 17l-5-5" />
-              </svg>
-              Dry-run by default — <code>go install</code> and analyze in one
-              command.
-            </p>
+      <section class="hero grid-bg">
+        <div class="hero-inner">
+          <span class="eyebrow">Google Cloud SQL · autoscaling</span>
+          <h1>
+            Right-size Cloud SQL to
+            <span class="hl">what it actually uses.</span>
+          </h1>
+          <p class="lede">
+            CloudSQL Autoscaler reads three days of CPU and memory metrics, finds
+            the sustained load with P95 percentiles, and safely resizes each
+            instance to the machine type it truly needs — up or down.
+          </p>
+          <div class="hero-cta">
+            <a
+              class="btn btn-primary btn-lg"
+              href="https://github.com/fraser-isbester/cloudsql-autoscaler"
+              >Get started</a
+            >
+            <span class="hero-aside">
+              and run
+              <span class="cmd"><span class="sig">$</span> cloudsql-autoscaler --project prod</span>
+            </span>
           </div>
 
-          <!-- Data-viz illustration: the product story in one card -->
-          <figure class="viz" aria-label="Example scaling recommendation">
-            <div class="viz-head">
-              <span class="viz-title">CPU utilization</span>
-              <span class="viz-sub">last 3 days · P95</span>
+          <!-- Live animated console: CPU graph + autoscaling events -->
+          <div class="console reveal" id="console" aria-label="Live autoscaler console">
+            <div class="console-bar">
+              <span class="dots"><i></i><i></i><i></i></span>
+              <span class="console-title">Autoscaler</span>
+              <span class="console-status"><span class="live-dot"></span> scaling</span>
             </div>
-            <svg viewBox="0 0 420 180" role="img" aria-hidden="true">
-              <defs>
-                <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stop-color="#10b981" stop-opacity="0.28" />
-                  <stop offset="100%" stop-color="#10b981" stop-opacity="0" />
-                </linearGradient>
-              </defs>
-              <!-- gridlines -->
-              <g stroke="#e4e8ee" stroke-width="1">
-                <line x1="0" y1="40" x2="420" y2="40" />
-                <line x1="0" y1="80" x2="420" y2="80" />
-                <line x1="0" y1="120" x2="420" y2="120" />
-                <line x1="0" y1="160" x2="420" y2="160" />
-              </g>
-              <!-- utilization area + line -->
-              <path
-                d="M0 150 L20 120 L40 132 L60 96 L80 108 L100 70 L120 92 L140 60 L160 84 L180 52 L200 74 L220 58 L240 88 L260 64 L280 100 L300 72 L320 110 L340 82 L360 120 L380 96 L400 128 L420 104 L420 180 L0 180 Z"
-                fill="url(#area)"
-              />
-              <path
-                d="M0 150 L20 120 L40 132 L60 96 L80 108 L100 70 L120 92 L140 60 L160 84 L180 52 L200 74 L220 58 L240 88 L260 64 L280 100 L300 72 L320 110 L340 82 L360 120 L380 96 L400 128 L420 104"
-                fill="none"
-                stroke="#059669"
-                stroke-width="2.5"
-                stroke-linejoin="round"
-                stroke-linecap="round"
-              />
-              <!-- P95 threshold -->
-              <line
-                x1="0"
-                y1="58"
-                x2="420"
-                y2="58"
-                stroke="#6d28d9"
-                stroke-width="1.75"
-                stroke-dasharray="5 5"
-              />
-              <rect x="356" y="45" width="60" height="18" rx="5" fill="#6d28d9" />
-              <text
-                x="386"
-                y="58"
-                fill="#fff"
-                font-size="11"
-                font-weight="700"
-                text-anchor="middle"
-                font-family="SF Mono, ui-monospace, monospace"
-              >
-                P95 39%
-              </text>
-            </svg>
-            <figcaption class="viz-rec">
-              <span class="viz-move">
-                <span class="from">db-n2-standard-8</span>
-                <span class="arrow" aria-label="scales down to">→</span>
-                <span class="to">db-n2-standard-4</span>
-              </span>
-              <span class="pill">
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2.6"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  aria-hidden="true"
-                >
-                  <path d="M12 5v14M19 12l-7 7-7-7" />
-                </svg>
-                ~42% / month saved
+            <div class="console-tabs">
+              <span class="tab active">db-01</span>
+              <span class="tab">db-02</span>
+              <span class="tab-more">+3 instances</span>
+              <span class="mtype" id="mtype">
+                <span class="caret">▸</span><span id="mtype-name">db-n2-standard-8</span>
               </span>
-            </figcaption>
-          </figure>
+            </div>
+            <div class="console-body">
+              <div class="chart-wrap">
+                <canvas id="cpu" aria-hidden="true"></canvas>
+                <div class="chart-legend">
+                  <span><i class="i-util"></i> CPU utilization</span>
+                  <span><i class="i-p95"></i> P95</span>
+                </div>
+                <div class="savings" id="savings">−$0/mo</div>
+              </div>
+            </div>
+            <div class="console-log" id="log"></div>
+            <div class="console-foot">
+              <span>project <b>acme-prod</b></span>
+              <span>interval <b>30m</b></span>
+              <span>profile <b>default</b></span>
+              <span>dry-run <b>off</b></span>
+            </div>
+          </div>
         </div>
       </section>
 
       <!-- How it works -->
       <section id="how">
         <div class="wrap">
-          <div class="section-head">
+          <div class="section-head reveal">
             <span class="eyebrow">How it works</span>
             <h2>Measure, decide, resize — on a loop.</h2>
             <p class="lede">
@@ -184,28 +119,28 @@ <h2>Measure, decide, resize — on a loop.</h2>
             </p>
           </div>
           <div class="steps">
-            <div class="step">
-              <span class="num">1</span>
+            <div class="step reveal">
+              <span class="num">01</span>
               <h3>Collect</h3>
               <p>
-                Pulls 3 days of CPU and memory time series from Cloud Monitoring
-                for every instance in the project.
+                Pulls three days of CPU and memory time series from Cloud
+                Monitoring for every instance in the project.
               </p>
             </div>
-            <div class="step">
-              <span class="num">2</span>
+            <div class="step reveal d1">
+              <span class="num">02</span>
               <h3>Analyze</h3>
               <p>
                 Computes P95 percentiles to separate sustained pressure from
-                short-lived spikes, then checks it against your scaling profile.
+                short-lived spikes, then checks it against your profile.
               </p>
             </div>
-            <div class="step">
-              <span class="num">3</span>
+            <div class="step reveal d2">
+              <span class="num">03</span>
               <h3>Right-size</h3>
               <p>
-                Recommends the next machine type up or down — and applies it when
-                you opt in, honoring each edition's downtime rules.
+                Steps the machine type up or down and applies it when you opt in,
+                honoring each edition's downtime rules.
               </p>
             </div>
           </div>
@@ -213,13 +148,13 @@ <h3>Right-size</h3>
       </section>
 
       <!-- Features -->
-      <section id="features" class="section-soft">
+      <section id="features">
         <div class="wrap">
-          <div class="section-head">
+          <div class="section-head reveal">
             <span class="eyebrow">Features</span>
             <h2>Built to touch production databases carefully.</h2>
           </div>
-          <div class="features">
+          <div class="features reveal">
             <div class="feature">
               <span class="ico">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></svg>
@@ -237,8 +172,8 @@ <h3>Smart P95 analysis</h3>
               <h3>Downtime aware</h3>
               <p>
                 Distinguishes <b>Enterprise Plus</b> near-zero-downtime windows
-                from <span class="cite-amber">Enterprise</span> edition restarts
-                before it changes anything.
+                from <span class="amber">Enterprise</span> edition restarts before
+                it changes anything.
               </p>
             </div>
             <div class="feature">
@@ -258,8 +193,7 @@ <h3>CLI · Docker · Kubernetes</h3>
               <h3>Scaling profiles</h3>
               <p>
                 Pick <code>conservative</code>, <code>default</code>, or
-                <code>aggressive</code> to tune how eagerly it resizes to your
-                risk appetite.
+                <code>aggressive</code> to tune how eagerly it resizes.
               </p>
             </div>
             <div class="feature">
@@ -269,8 +203,7 @@ <h3>Scaling profiles</h3>
               <h3>Observable</h3>
               <p>
                 Prometheus metrics plus <code>/health</code>, <code>/ready</code>,
-                and <code>/status</code> endpoints make daemon mode easy to
-                monitor.
+                and <code>/status</code> endpoints make daemon mode easy to watch.
               </p>
             </div>
             <div class="feature">
@@ -290,12 +223,12 @@ <h3>Safe by default</h3>
       <!-- Deploy -->
       <section id="deploy">
         <div class="wrap">
-          <div class="section-head">
+          <div class="section-head reveal">
             <span class="eyebrow">Deploy</span>
             <h2>Ship it however you run infrastructure.</h2>
           </div>
           <div class="deploy">
-            <div class="code-card">
+            <div class="code-card reveal">
               <div class="code-head">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
                 CLI
@@ -311,8 +244,7 @@ <h2>Ship it however you run infrastructure.</h2>
 cloudsql-autoscaler <span class="flag">--project</span> my-project \
   <span class="flag">--dry-run=false</span></code></pre>
             </div>
-
-            <div class="code-card">
+            <div class="code-card reveal d1">
               <div class="code-head">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M7 8V6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"/></svg>
                 Docker
@@ -325,8 +257,7 @@ <h2>Ship it however you run infrastructure.</h2>
     cloudsql-autoscaler:latest \
   <span class="flag">--daemon</span> <span class="flag">--project</span> my-project</code></pre>
             </div>
-
-            <div class="code-card">
+            <div class="code-card reveal d2">
               <div class="code-head">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 2 8 4.5v9L12 20l-8-4.5v-9L12 2Z"/><path d="M12 20v-9M20 6.5 12 11 4 6.5"/></svg>
                 Kubernetes
@@ -345,8 +276,7 @@ <h2>Ship it however you run infrastructure.</h2>
               </div>
             </div>
           </div>
-
-          <div class="endpoints" aria-label="Daemon HTTP endpoints">
+          <div class="endpoints reveal" aria-label="Daemon HTTP endpoints">
             <span>GET /health</span>
             <span>GET /ready</span>
             <span>GET /status</span>
@@ -355,16 +285,16 @@ <h2>Ship it however you run infrastructure.</h2>
         </div>
       </section>
 
-      <!-- CTA band -->
-      <section>
+      <!-- CTA -->
+      <section class="cta-sec">
         <div class="wrap">
-          <div class="cta">
+          <div class="cta reveal">
             <h2>Stop guessing at machine types.</h2>
             <p>
               Point it at a project and see what your Cloud SQL fleet should
               actually be running — no changes until you say so.
             </p>
-            <div class="hero-cta" style="justify-content: center">
+            <div class="cta-row">
               <a
                 class="btn btn-primary btn-lg"
                 href="https://github.com/fraser-isbester/cloudsql-autoscaler"
@@ -389,5 +319,7 @@ <h2>Stop guessing at machine types.</h2>
         >
       </div>
     </footer>
+
+    <script src="./app.js"></script>
   </body>
 </html>
diff --git a/site/styles.css b/site/styles.css
index 3b24d13..1e86aae 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -1,38 +1,34 @@
 /* CloudSQL Autoscaler — brand site
-   A light, editorial product design. Deliberately NOT a terminal theme:
-   real sans-serif type, generous whitespace, soft cards, one confident
-   emerald accent against slate ink. Dark mode via prefers-color-scheme. */
+   Design language adapted from keycard.ai: near-black canvas, faint grid,
+   Geist / Geist Mono type, a violet accent with a green "live" status, and a
+   signature animated console window. Motion is defined here; app.js drives it. */
 
 :root {
-  --ink: #0d1526; /* headings / primary text */
-  --body: #414b5e; /* body copy */
-  --muted: #6b7688; /* secondary copy */
-  --bg: #ffffff;
-  --bg-soft: #f5f7fa; /* alternating section wash */
-  --surface: #ffffff; /* cards */
-  --border: #e4e8ee;
-  --border-strong: #d3d9e2;
+  --bg: #08080b;
+  --bg-2: #0c0c11;
+  --panel: #101017;
+  --panel-2: #16161f;
+  --line: rgba(255, 255, 255, 0.07);
+  --line-2: rgba(255, 255, 255, 0.13);
 
-  --accent: #059669; /* emerald — primary action / brand */
-  --accent-strong: #047857;
-  --accent-soft: #ecfdf5; /* tinted fills */
-  --accent-ink: #064e3b;
-  --amber: #b45309; /* downtime / caution copy */
-  --violet: #6d28d9; /* secondary data accent */
+  --text: #f5f5f8;
+  --muted: #9a9aa8;
+  --dim: #61616d;
 
-  --shadow-sm: 0 1px 2px rgba(13, 21, 38, 0.06),
-    0 1px 3px rgba(13, 21, 38, 0.05);
-  --shadow-md: 0 6px 16px rgba(13, 21, 38, 0.08),
-    0 2px 6px rgba(13, 21, 38, 0.05);
-  --shadow-lg: 0 24px 60px rgba(13, 21, 38, 0.14);
+  --violet: #a78bfa;
+  --violet-2: #8b5cf6;
+  --violet-soft: rgba(139, 92, 246, 0.14);
+  --green: #34d399;
+  --green-2: #10b981;
+  --amber: #fbbf24;
+  --cyan: #38bdf8;
 
-  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Helvetica, Arial, "Apple Color Emoji", sans-serif;
-  --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo,
+  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Helvetica, Arial, sans-serif;
+  --mono: "Geist Mono", "SF Mono", ui-monospace, "JetBrains Mono", Menlo,
     Consolas, monospace;
-  --maxw: 1120px;
-  --radius: 16px;
-  --radius-sm: 10px;
+  --maxw: 1160px;
+  --radius: 14px;
 }
 
 * {
@@ -45,10 +41,10 @@ html {
 body {
   margin: 0;
   background: var(--bg);
-  color: var(--body);
+  color: var(--muted);
   font-family: var(--sans);
-  font-size: 17px;
-  line-height: 1.65;
+  font-size: 16px;
+  line-height: 1.6;
   letter-spacing: -0.01em;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
@@ -56,54 +52,88 @@ body {
 h1,
 h2,
 h3 {
-  color: var(--ink);
-  line-height: 1.12;
-  letter-spacing: -0.025em;
+  color: var(--text);
   margin: 0;
+  line-height: 1.08;
+  letter-spacing: -0.03em;
+  font-weight: 600;
 }
 p {
   margin: 0 0 1rem;
 }
 a {
-  color: var(--accent-strong);
+  color: var(--text);
   text-decoration: none;
 }
 a:hover {
-  text-decoration: underline;
+  color: var(--violet);
 }
 .wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 1.5rem;
 }
+.mono {
+  font-family: var(--mono);
+}
 .eyebrow {
-  display: inline-block;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
-  color: var(--accent-strong);
-  margin-bottom: 0.75rem;
+  color: var(--violet);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.eyebrow::before {
+  content: "";
+  width: 14px;
+  height: 1px;
+  background: var(--violet);
+  opacity: 0.6;
 }
 .lede {
-  font-size: 1.15rem;
+  font-size: 1.12rem;
   color: var(--muted);
-  max-width: 60ch;
+  max-width: 56ch;
+}
+
+/* ---------- Grid backdrop ---------- */
+.grid-bg {
+  position: relative;
+}
+.grid-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: linear-gradient(var(--line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--line) 1px, transparent 1px);
+  background-size: 46px 46px;
+  -webkit-mask-image: radial-gradient(
+    120% 90% at 50% 0%,
+    #000 30%,
+    transparent 78%
+  );
+  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
+  opacity: 0.6;
 }
 
 /* ---------- Nav ---------- */
 .nav {
   position: sticky;
   top: 0;
-  z-index: 20;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: saturate(180%) blur(12px);
-  border-bottom: 1px solid var(--border);
+  z-index: 30;
+  background: rgba(8, 8, 11, 0.72);
+  backdrop-filter: saturate(160%) blur(12px);
+  border-bottom: 1px solid var(--line);
 }
 .nav-inner {
   max-width: var(--maxw);
   margin: 0 auto;
-  padding: 0.85rem 1.5rem;
+  padding: 0.9rem 1.5rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -112,20 +142,21 @@ a:hover {
 .brand {
   display: inline-flex;
   align-items: center;
-  gap: 0.6rem;
-  font-weight: 700;
-  font-size: 1.05rem;
-  color: var(--ink);
-  letter-spacing: -0.02em;
+  gap: 0.65rem;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
 }
 .brand:hover {
-  text-decoration: none;
+  color: var(--text);
 }
 .brand img {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  display: block;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
 }
 .nav-links {
   display: flex;
@@ -133,16 +164,11 @@ a:hover {
   gap: 1.5rem;
 }
 .nav-links a {
-  color: var(--body);
-  font-weight: 500;
-  font-size: 0.95rem;
+  color: var(--muted);
+  font-size: 0.9rem;
 }
 .nav-links a:hover {
-  color: var(--ink);
-  text-decoration: none;
-}
-.nav-links .btn {
-  margin-left: 0.25rem;
+  color: var(--text);
 }
 
 /* ---------- Buttons ---------- */
@@ -150,265 +176,456 @@ a:hover {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.7rem 1.25rem;
-  border-radius: 999px;
-  font-weight: 600;
-  font-size: 0.95rem;
-  border: 1px solid var(--border-strong);
-  color: var(--ink);
-  background: var(--surface);
+  padding: 0.6rem 1.05rem;
+  border-radius: 9px;
+  font-family: var(--sans);
+  font-weight: 500;
+  font-size: 0.9rem;
+  border: 1px solid var(--line-2);
+  color: var(--text);
+  background: transparent;
   cursor: pointer;
-  transition: transform 0.12s ease, box-shadow 0.12s ease,
-    border-color 0.12s ease, background 0.12s ease;
+  transition: transform 0.14s ease, background 0.14s ease,
+    border-color 0.14s ease, box-shadow 0.14s ease;
 }
 .btn:hover {
-  text-decoration: none;
+  color: var(--text);
+  border-color: rgba(255, 255, 255, 0.28);
+  background: rgba(255, 255, 255, 0.04);
   transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-  border-color: var(--border-strong);
 }
 .btn svg {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
 }
 .btn-primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
+  background: #ece7ff;
+  border-color: #ece7ff;
+  color: #1a1030;
+  font-weight: 600;
 }
 .btn-primary:hover {
-  background: var(--accent-strong);
-  border-color: var(--accent-strong);
-  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.28);
+  background: #fff;
+  border-color: #fff;
+  color: #1a1030;
+  box-shadow: 0 8px 26px rgba(167, 139, 250, 0.35);
 }
 .btn-lg {
-  padding: 0.85rem 1.5rem;
-  font-size: 1rem;
+  padding: 0.75rem 1.35rem;
+  font-size: 0.95rem;
+  border-radius: 10px;
 }
 
 /* ---------- Hero ---------- */
 .hero {
-  position: relative;
+  border-bottom: 1px solid var(--line);
   overflow: hidden;
-  border-bottom: 1px solid var(--border);
-  background: radial-gradient(
-      1100px 520px at 82% -8%,
-      var(--accent-soft),
-      transparent 60%
-    ),
-    radial-gradient(900px 500px at 0% 0%, #f3f0ff, transparent 55%);
 }
-.hero-grid {
+.hero-inner {
   max-width: var(--maxw);
   margin: 0 auto;
-  padding: 5rem 1.5rem 5.5rem;
-  display: grid;
-  grid-template-columns: 1.05fr 0.95fr;
-  gap: 3.5rem;
-  align-items: center;
+  padding: 5.5rem 1.5rem 4rem;
 }
 .hero h1 {
-  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
-  margin-bottom: 1.1rem;
+  font-size: clamp(2.4rem, 6vw, 4.1rem);
+  margin: 1.2rem 0 1.3rem;
+  max-width: 15ch;
 }
 .hero h1 .hl {
-  color: var(--accent-strong);
+  color: var(--violet);
 }
 .hero .lede {
-  margin-bottom: 1.75rem;
+  margin-bottom: 2rem;
 }
 .hero-cta {
   display: flex;
+  align-items: center;
+  gap: 0.9rem;
   flex-wrap: wrap;
-  gap: 0.75rem;
+}
+.hero-aside {
+  display: inline-flex;
   align-items: center;
+  gap: 0.6rem;
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  color: var(--dim);
 }
-.hero-note {
-  margin-top: 1.25rem;
-  font-size: 0.9rem;
+.hero-aside .cmd {
   color: var(--muted);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  border: 1px solid var(--line);
+  background: var(--bg-2);
+  padding: 0.35rem 0.6rem;
+  border-radius: 7px;
 }
-.hero-note code {
-  font-family: var(--mono);
-  background: var(--bg-soft);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 0.15em 0.45em;
-  font-size: 0.85em;
-  color: var(--ink);
+.hero-aside .cmd .sig {
+  color: var(--green);
 }
 
-/* ---------- Hero illustration (data-viz card) ---------- */
-.viz {
-  background: var(--surface);
-  border: 1px solid var(--border);
+/* ---------- Console window (animated hero) ---------- */
+.console {
+  margin: 3.5rem auto 0;
+  max-width: 940px;
+  background: linear-gradient(180deg, var(--panel), var(--bg-2));
+  border: 1px solid var(--line-2);
   border-radius: var(--radius);
-  box-shadow: var(--shadow-lg);
-  padding: 1.25rem 1.35rem 1.4rem;
+  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(167, 139, 250, 0.04);
+  overflow: hidden;
 }
-.viz-head {
+.console-bar {
   display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 0.35rem;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0.7rem 0.95rem;
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.015);
 }
-.viz-title {
-  font-weight: 700;
-  color: var(--ink);
-  font-size: 0.95rem;
+.dots {
+  display: inline-flex;
+  gap: 0.4rem;
 }
-.viz-sub {
-  font-size: 0.8rem;
-  color: var(--muted);
+.dots i {
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #2a2a33;
 }
-.viz svg {
-  width: 100%;
-  height: auto;
-  display: block;
+.console-title {
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.16em;
+  color: var(--violet);
+  text-transform: uppercase;
 }
-.viz-rec {
-  margin-top: 1rem;
-  padding-top: 1rem;
-  border-top: 1px dashed var(--border-strong);
-  display: flex;
+.console-status {
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  color: var(--muted);
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+.live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--green);
+  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
+  }
+  70% {
+    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
+  }
 }
-.viz-move {
+.console-tabs {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.35rem;
+  padding: 0.5rem 0.95rem;
+  border-bottom: 1px solid var(--line);
   font-family: var(--mono);
-  font-size: 0.9rem;
-  color: var(--ink);
-  font-weight: 600;
+  font-size: 0.76rem;
 }
-.viz-move .from {
-  color: var(--muted);
-  text-decoration: line-through;
-  text-decoration-color: var(--border-strong);
+.tab {
+  padding: 0.28rem 0.6rem;
+  border-radius: 6px;
+  color: var(--dim);
+  border: 1px solid transparent;
+}
+.tab.active {
+  color: var(--text);
+  background: var(--panel-2);
+  border-color: var(--line);
+}
+.tab-more {
+  color: var(--dim);
+}
+.mtype {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text);
+  background: var(--violet-soft);
+  border: 1px solid rgba(139, 92, 246, 0.35);
+  padding: 0.26rem 0.62rem;
+  border-radius: 999px;
+  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), color 0.35s ease;
+}
+.mtype .caret {
+  color: var(--violet);
+}
+.mtype.flip {
+  animation: flip 0.55s cubic-bezier(0.2, 0.9, 0.3, 1);
+}
+@keyframes flip {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-6px);
+    opacity: 0.2;
+  }
+  60% {
+    transform: translateY(6px);
+    opacity: 0.2;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.console-body {
+  position: relative;
+  padding: 1rem 1.1rem 0.4rem;
+}
+.chart-wrap {
+  position: relative;
+  width: 100%;
+  height: 240px;
+}
+#cpu {
+  width: 100%;
+  height: 100%;
+  display: block;
 }
-.viz-move .arrow {
-  color: var(--accent);
+.chart-legend {
+  position: absolute;
+  top: 0.35rem;
+  left: 0.35rem;
+  display: flex;
+  gap: 1rem;
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  color: var(--dim);
 }
-.pill {
+.chart-legend span {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
+}
+.chart-legend i {
+  width: 10px;
+  height: 2px;
+  border-radius: 2px;
+  display: inline-block;
+}
+.i-util {
+  background: var(--green);
+}
+.i-p95 {
+  background: var(--violet);
+}
+.savings {
+  position: absolute;
+  right: 1.2rem;
+  top: 40%;
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  font-weight: 600;
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
-  font-size: 0.82rem;
-  font-weight: 700;
-  background: var(--accent-soft);
-  color: var(--accent-ink);
-  border: 1px solid #bfe9d3;
+  background: rgba(52, 211, 153, 0.14);
+  color: #6ee7b7;
+  border: 1px solid rgba(52, 211, 153, 0.4);
+  opacity: 0;
+  pointer-events: none;
+}
+.savings.up {
+  background: rgba(251, 191, 36, 0.14);
+  color: #fcd34d;
+  border-color: rgba(251, 191, 36, 0.4);
+}
+.savings.show {
+  animation: floatUp 2.2s ease forwards;
+}
+@keyframes floatUp {
+  0% {
+    opacity: 0;
+    transform: translateY(14px) scale(0.96);
+  }
+  18% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  80% {
+    opacity: 1;
+    transform: translateY(-6px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-26px);
+  }
+}
+.console-log {
+  border-top: 1px solid var(--line);
+  padding: 0.7rem 1.1rem;
+  min-height: 3.1rem;
+  font-family: var(--mono);
+  font-size: 0.76rem;
+  line-height: 1.7;
+  color: var(--muted);
+}
+.console-log .ln {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.console-log .t {
+  color: var(--dim);
+}
+.console-log .ok {
+  color: var(--green);
+}
+.console-log .up {
+  color: var(--amber);
+}
+.console-log .id {
+  color: var(--violet);
+}
+.console-foot {
+  display: flex;
+  gap: 1.4rem;
+  flex-wrap: wrap;
+  padding: 0.6rem 1.1rem;
+  border-top: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--dim);
+  background: rgba(255, 255, 255, 0.015);
+}
+.console-foot b {
+  color: var(--muted);
+  font-weight: 500;
 }
 
 /* ---------- Sections ---------- */
 section {
-  padding: 5rem 0;
-}
-.section-soft {
-  background: var(--bg-soft);
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
+  padding: 6rem 0;
+  border-bottom: 1px solid var(--line);
 }
 .section-head {
-  max-width: 62ch;
-  margin-bottom: 2.5rem;
+  max-width: 60ch;
+  margin-bottom: 3rem;
 }
 .section-head h2 {
-  font-size: clamp(1.7rem, 3vw, 2.3rem);
-  margin-bottom: 0.75rem;
+  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
+  margin: 0.9rem 0 0.8rem;
+}
+
+/* ---------- Reveal on scroll ---------- */
+.reveal {
+  opacity: 0;
+  transform: translateY(18px);
+  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.reveal.in {
+  opacity: 1;
+  transform: none;
+}
+.reveal.d1 {
+  transition-delay: 0.08s;
+}
+.reveal.d2 {
+  transition-delay: 0.16s;
+}
+.reveal.d3 {
+  transition-delay: 0.24s;
 }
 
 /* ---------- Steps ---------- */
 .steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.25rem;
-  counter-reset: step;
+  gap: 1.5rem;
 }
 .step {
-  position: relative;
-  padding: 1.5rem 1.4rem;
+  border-top: 1px solid var(--line-2);
+  padding-top: 1.2rem;
 }
 .step .num {
   font-family: var(--mono);
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--accent-strong);
-  background: var(--accent-soft);
-  border: 1px solid #bfe9d3;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 0.9rem;
+  font-size: 0.75rem;
+  color: var(--violet);
+  letter-spacing: 0.1em;
 }
 .step h3 {
-  font-size: 1.1rem;
-  margin-bottom: 0.4rem;
+  font-size: 1.15rem;
+  margin: 0.6rem 0 0.4rem;
 }
 .step p {
   color: var(--muted);
-  font-size: 0.98rem;
+  font-size: 0.96rem;
   margin: 0;
 }
 
-/* ---------- Feature cards ---------- */
+/* ---------- Features ---------- */
 .features {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 1.25rem;
+  gap: 1px;
+  background: var(--line);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  overflow: hidden;
 }
 .feature {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 1.6rem 1.5rem;
-  box-shadow: var(--shadow-sm);
-  transition: transform 0.14s ease, box-shadow 0.14s ease;
+  background: var(--bg);
+  padding: 1.9rem 1.6rem;
+  transition: background 0.18s ease;
 }
 .feature:hover {
-  transform: translateY(-3px);
-  box-shadow: var(--shadow-md);
+  background: var(--panel);
 }
 .feature .ico {
-  width: 42px;
-  height: 42px;
-  border-radius: 11px;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--accent-soft);
-  color: var(--accent-strong);
-  margin-bottom: 1rem;
+  background: var(--violet-soft);
+  color: var(--violet);
+  margin-bottom: 1.1rem;
 }
 .feature .ico svg {
-  width: 22px;
-  height: 22px;
+  width: 20px;
+  height: 20px;
 }
 .feature h3 {
-  font-size: 1.12rem;
-  margin-bottom: 0.45rem;
+  font-size: 1.08rem;
+  margin-bottom: 0.5rem;
 }
 .feature p {
   margin: 0;
   color: var(--muted);
-  font-size: 0.98rem;
+  font-size: 0.95rem;
 }
-.feature p .cite-amber {
-  color: var(--amber);
+.feature p b {
+  color: var(--text);
   font-weight: 600;
 }
+.feature p .amber {
+  color: var(--amber);
+}
+code {
+  font-family: var(--mono);
+  font-size: 0.85em;
+  color: var(--violet);
+  background: var(--panel-2);
+  border: 1px solid var(--line);
+  padding: 0.08em 0.36em;
+  border-radius: 5px;
+}
 
 /* ---------- Deploy ---------- */
 .deploy {
@@ -417,110 +634,109 @@ section {
   gap: 1.25rem;
 }
 .code-card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  background: var(--panel);
+  border: 1px solid var(--line-2);
+  border-radius: var(--radius);
   overflow: hidden;
-  box-shadow: var(--shadow-sm);
   display: flex;
   flex-direction: column;
 }
 .code-card .code-head {
-  padding: 0.85rem 1.15rem;
-  border-bottom: 1px solid var(--border);
-  font-weight: 700;
-  color: var(--ink);
-  font-size: 0.95rem;
+  padding: 0.8rem 1.1rem;
+  border-bottom: 1px solid var(--line);
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--text);
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 .code-card .code-head svg {
-  width: 18px;
-  height: 18px;
-  color: var(--accent-strong);
+  width: 16px;
+  height: 16px;
+  color: var(--violet);
 }
 .code-card pre {
   margin: 0;
-  padding: 1.15rem;
+  padding: 1.1rem;
   overflow-x: auto;
-  background: #0d1526;
   flex: 1;
 }
 .code-card code {
-  font-family: var(--mono);
-  font-size: 0.82rem;
-  line-height: 1.7;
-  color: #d6def0;
+  background: none;
+  border: none;
+  padding: 0;
+  color: #cdd0dc;
+  font-size: 0.79rem;
+  line-height: 1.75;
 }
 .code-card .cmt {
-  color: #7c88a3;
+  color: var(--dim);
 }
 .code-card .flag {
-  color: #6ee7b7;
+  color: var(--green);
 }
 .code-card .foot {
-  padding: 0.85rem 1.15rem;
-  font-size: 0.85rem;
-  color: var(--muted);
-  border-top: 1px solid var(--border);
+  padding: 0.8rem 1.1rem;
+  border-top: 1px solid var(--line);
+  font-size: 0.82rem;
+  color: var(--dim);
 }
-
-/* ---------- Endpoints strip ---------- */
 .endpoints {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.6rem;
-  margin-top: 1.5rem;
+  gap: 0.55rem;
+  margin-top: 1.6rem;
 }
 .endpoints span {
   font-family: var(--mono);
-  font-size: 0.85rem;
-  padding: 0.4rem 0.8rem;
+  font-size: 0.78rem;
+  color: var(--muted);
+  padding: 0.38rem 0.75rem;
+  border: 1px solid var(--line-2);
   border-radius: 999px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  color: var(--ink);
+  background: var(--bg-2);
 }
 
-/* ---------- CTA band ---------- */
+/* ---------- CTA ---------- */
+.cta-sec {
+  border-bottom: none;
+}
 .cta {
-  background: linear-gradient(135deg, #0d1526, #12203a 60%, #0f2e28);
-  color: #e7ecf5;
-  border-radius: var(--radius);
-  padding: 3.25rem 2rem;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line-2);
+  border-radius: 20px;
+  padding: 4rem 2rem;
   text-align: center;
+  background: radial-gradient(
+      90% 140% at 50% 0%,
+      rgba(139, 92, 246, 0.18),
+      transparent 60%
+    ),
+    var(--panel);
 }
 .cta h2 {
-  color: #fff;
-  font-size: clamp(1.6rem, 3vw, 2.15rem);
-  margin-bottom: 0.75rem;
+  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
+  margin-bottom: 0.9rem;
 }
 .cta p {
-  color: #aeb9cd;
-  max-width: 52ch;
-  margin: 0 auto 1.75rem;
-}
-.cta .btn {
-  background: rgba(255, 255, 255, 0.06);
-  border-color: rgba(255, 255, 255, 0.18);
-  color: #fff;
-}
-.cta .btn:hover {
-  background: rgba(255, 255, 255, 0.12);
-}
-.cta .btn-primary {
-  background: var(--accent);
-  border-color: var(--accent);
+  color: var(--muted);
+  max-width: 50ch;
+  margin: 0 auto 2rem;
 }
-.cta .btn-primary:hover {
-  background: var(--accent-strong);
+.cta-row {
+  display: flex;
+  gap: 0.9rem;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 /* ---------- Footer ---------- */
 .footer {
-  border-top: 1px solid var(--border);
-  padding: 2.5rem 0;
+  padding: 3rem 0;
 }
 .footer .wrap {
   display: flex;
@@ -528,82 +744,52 @@ section {
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
-  color: var(--muted);
-  font-size: 0.9rem;
+  color: var(--dim);
+  font-family: var(--mono);
+  font-size: 0.78rem;
 }
 .footer a {
-  color: var(--muted);
+  color: var(--dim);
 }
 .footer a:hover {
-  color: var(--ink);
+  color: var(--violet);
 }
 
 /* ---------- Responsive ---------- */
-@media (max-width: 900px) {
-  .hero-grid {
-    grid-template-columns: 1fr;
-    gap: 2.5rem;
-    padding-top: 3.5rem;
-    padding-bottom: 4rem;
-  }
+@media (max-width: 860px) {
   .steps,
   .features,
   .deploy {
     grid-template-columns: 1fr;
   }
-}
-@media (max-width: 620px) {
-  body {
-    font-size: 16px;
+  .hero-inner {
+    padding-top: 3.5rem;
   }
-  .nav-links {
-    gap: 1rem;
+  section {
+    padding: 4rem 0;
   }
+}
+@media (max-width: 560px) {
   .nav-links .hide-sm {
     display: none;
   }
-  section {
-    padding: 3.5rem 0;
+  .chart-wrap {
+    height: 200px;
   }
 }
 
-/* ---------- Dark mode ---------- */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --ink: #f2f5fb;
-    --body: #c2cbda;
-    --muted: #8b96a9;
-    --bg: #0b1120;
-    --bg-soft: #0f1728;
-    --surface: #121b2e;
-    --border: #223049;
-    --border-strong: #2c3d5a;
-    --accent: #10b981;
-    --accent-strong: #34d399;
-    --accent-soft: rgba(16, 185, 129, 0.14);
-    --accent-ink: #6ee7b7;
-    --amber: #fbbf24;
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-    --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.5);
-    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
-  }
-  .nav {
-    background: rgba(11, 17, 32, 0.8);
-  }
-  .hero {
-    background: radial-gradient(
-        1100px 520px at 82% -8%,
-        rgba(16, 185, 129, 0.12),
-        transparent 60%
-      ),
-      radial-gradient(900px 500px at 0% 0%, rgba(109, 40, 217, 0.14), transparent 55%);
-  }
-  .step .num,
-  .pill {
-    border-color: rgba(16, 185, 129, 0.35);
+/* ---------- Reduced motion ---------- */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
   }
-  .btn-primary,
-  .cta .btn-primary {
-    color: #04140d;
+  .reveal {
+    opacity: 1;
+    transform: none;
   }
 }