diff --git a/landing/README.md b/landing/README.md
index d69fd6d..be1a5dd 100644
--- a/landing/README.md
+++ b/landing/README.md
@@ -1,6 +1,6 @@
 # Flicky landing page
 
-Next.js 15 static site for [flicky](https://github.com/jvaught01/flicky).
+Next.js 16 static site for [flicky](https://github.com/pango07/flicky).
 Built as a static export so it can be dropped onto GitHub Pages, Vercel,
 Netlify, Cloudflare Pages, or any plain static host.
 
diff --git a/landing/app/components/Clock.tsx b/landing/app/components/Clock.tsx
new file mode 100644
index 0000000..542608b
--- /dev/null
+++ b/landing/app/components/Clock.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Taskbar tray clock. Renders placeholder dashes until mounted so the
+ * static export and the first client render agree.
+ */
+export function Clock() {
+  const [now, setNow] = useState<Date | null>(null);
+
+  useEffect(() => {
+    setNow(new Date());
+    const id = setInterval(() => setNow(new Date()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
+  const time = now
+    ? now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+    : '--:--';
+  const date = now
+    ? now.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric', year: 'numeric' })
+    : '--/--/----';
+
+  return (
+    <div className="tb-clock" title="it is, in fact, right now">
+      <span>{time}</span>
+      <span>{date}</span>
+    </div>
+  );
+}
diff --git a/landing/app/components/DesktopIcons.tsx b/landing/app/components/DesktopIcons.tsx
new file mode 100644
index 0000000..cbe65fc
--- /dev/null
+++ b/landing/app/components/DesktopIcons.tsx
@@ -0,0 +1,40 @@
+import { Mark } from './Mark';
+import { FolderIcon, InstallerIcon, TextFileIcon, ZipIcon } from './Icons';
+
+const REPO = 'https://github.com/pango07/flicky';
+
+/**
+ * The desktop icon column, top-left, exactly where Windows puts them.
+ * Doubles as the section nav on wide screens; hidden under 1100px
+ * because the taskbar is enough there.
+ */
+export function DesktopIcons() {
+  return (
+    <div className="desk-icons" aria-hidden="false">
+      <a className="desk-icon" href="#top">
+        <span className="desk-art"><Mark className="desk-mark" /></span>
+        <span className="desk-label">flicky.exe</span>
+      </a>
+      <a className="desk-icon" href="#how">
+        <span className="desk-art"><FolderIcon /></span>
+        <span className="desk-label">how it works</span>
+      </a>
+      <a className="desk-icon" href="#features">
+        <span className="desk-art"><FolderIcon /></span>
+        <span className="desk-label">features</span>
+      </a>
+      <a className="desk-icon" href="#get">
+        <span className="desk-art"><InstallerIcon /></span>
+        <span className="desk-label">get flicky</span>
+      </a>
+      <a className="desk-icon" href="#faq">
+        <span className="desk-art"><TextFileIcon /></span>
+        <span className="desk-label">questions</span>
+      </a>
+      <a className="desk-icon" href={REPO} target="_blank" rel="noopener noreferrer">
+        <span className="desk-art"><ZipIcon /></span>
+        <span className="desk-label">source.zip</span>
+      </a>
+    </div>
+  );
+}
diff --git a/landing/app/components/HeroClutter.tsx b/landing/app/components/HeroClutter.tsx
new file mode 100644
index 0000000..59a4a60
--- /dev/null
+++ b/landing/app/components/HeroClutter.tsx
@@ -0,0 +1,79 @@
+import { Mark } from './Mark';
+import { RecycleIcon, ImageFileIcon, JsonFileIcon } from './Icons';
+
+/**
+ * The stuff lying around on the desktop behind the wordmark: a sticky
+ * note, a toast, a mini replica of the Flicky overlay, a tiny window,
+ * some kaomoji and a couple of files. Each drifts a little with the
+ * mouse (see Parallax) and is hidden on narrow screens.
+ */
+export function HeroClutter() {
+  return (
+    <div className="clutter" aria-hidden="true">
+      {/* --- left --- */}
+      <div className="cl cl-note">
+        <div className="note">
+          <div className="note-bar" />
+          <div className="note-body">
+            hold ctrl+alt+x
+            <br />
+            and just talk
+          </div>
+        </div>
+      </div>
+
+      <div className="cl cl-kao1 kao">( ^ ω ^ )</div>
+
+      <div className="cl cl-overlay">
+        <div className="mini-overlay">
+          <span className="mini-halo" />
+          <Mark className="mini-mark" />
+          <span className="mini-bubble">right here!</span>
+        </div>
+      </div>
+
+      <div className="cl cl-bin">
+        <span className="desk-art"><RecycleIcon /></span>
+        <span className="desk-label">recycle bin</span>
+      </div>
+
+      <div className="cl cl-file1">
+        <span className="desk-art"><ImageFileIcon /></span>
+        <span className="desk-label">screenshot.png</span>
+      </div>
+
+      {/* --- right --- */}
+      <div className="cl cl-toast">
+        <div className="toast">
+          <Mark className="toast-mark" />
+          <div className="toast-txt">
+            <strong>Flicky</strong>
+            <span>Copied — press Ctrl+V to paste</span>
+          </div>
+          <span className="toast-time">now</span>
+        </div>
+      </div>
+
+      <div className="cl cl-walk">
+        <div className="mini-win">
+          <div className="mini-bar">
+            <span>walkthrough</span>
+            <span className="mini-x">✕</span>
+          </div>
+          <div className="mini-body">
+            <span className="mini-btn">Continue</span>
+            <span className="mini-badge">2/3 · click Continue</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="cl cl-kao2 kao">{'¯\_(ツ)_/¯'}</div>
+      <div className="cl cl-kao3 kao">{'{ ^-^ }'}</div>
+
+      <div className="cl cl-file2">
+        <span className="desk-art"><JsonFileIcon /></span>
+        <span className="desk-label">chat-history.json</span>
+      </div>
+    </div>
+  );
+}
diff --git a/landing/app/components/HeroVideo.tsx b/landing/app/components/HeroVideo.tsx
new file mode 100644
index 0000000..84b6b68
--- /dev/null
+++ b/landing/app/components/HeroVideo.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { Win } from './Win';
+
+/**
+ * The demo clip, inside the Windows-11 window frame. Autoplays muted
+ * and looping, but stops for anyone who asked for reduced motion (and
+ * shows controls instead so they can still play it themselves).
+ */
+export function HeroVideo() {
+  const ref = useRef<HTMLVideoElement | null>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const apply = () => {
+      if (mq.matches) {
+        el.autoplay = false;
+        el.loop = false;
+        el.controls = true;
+        el.pause();
+      } else {
+        el.controls = false;
+        el.loop = true;
+        void el.play().catch(() => {});
+      }
+    };
+    apply();
+    mq.addEventListener('change', apply);
+    return () => mq.removeEventListener('change', apply);
+  }, []);
+
+  return (
+    <Win title="flicky-demo.mp4" className="video-win" flush>
+      <video
+        ref={ref}
+        src="/flicky-hero2-1776235182036.mp4"
+        autoPlay
+        muted
+        loop
+        playsInline
+        preload="metadata"
+        aria-label="Flicky answering a question about what's on screen"
+      />
+    </Win>
+  );
+}
diff --git a/landing/app/components/Icons.tsx b/landing/app/components/Icons.tsx
new file mode 100644
index 0000000..d3b2106
--- /dev/null
+++ b/landing/app/components/Icons.tsx
@@ -0,0 +1,149 @@
+/* Small inline SVG glyph set for the Windows-desktop landing page.
+   Everything is currentColor so the taskbar / window chrome can tint
+   them from CSS variables. */
+
+type P = { className?: string };
+
+export function WinLogo({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 20 20" aria-hidden="true">
+      <rect x="1" y="1" width="8" height="8" rx="1.4" fill="currentColor" />
+      <rect x="11" y="1" width="8" height="8" rx="1.4" fill="currentColor" />
+      <rect x="1" y="11" width="8" height="8" rx="1.4" fill="currentColor" />
+      <rect x="11" y="11" width="8" height="8" rx="1.4" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function AppleGlyph({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
+      <path d="M16.4 12.7c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.9-1.4-.2-2.8.8-3.5.8-.7 0-1.8-.8-3-.8-1.5 0-2.9.9-3.7 2.3-1.6 2.7-.4 6.8 1.1 9 .8 1.1 1.7 2.3 2.9 2.3 1.2 0 1.6-.7 3-.7s1.8.7 3 .7c1.3 0 2.1-1.1 2.8-2.2.9-1.3 1.3-2.5 1.3-2.6-.1 0-2.5-1-2.5-3.4zM14.2 5.8c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.9 1 .1 2.1-.5 2.8-1.3z" />
+    </svg>
+  );
+}
+
+export function GitHubGlyph({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
+      <path d="M12 1.8a10.2 10.2 0 0 0-3.2 19.9c.5.1.7-.2.7-.5v-1.9c-2.8.6-3.4-1.3-3.4-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.4 1.1 3 .8.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10.2 10.2 0 0 0 12 1.8z" />
+    </svg>
+  );
+}
+
+export function DownloadGlyph({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" fill="none"
+      stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M12 3.5v11" />
+      <path d="m7.5 10.5 4.5 4.5 4.5-4.5" />
+      <path d="M4.5 19.5h15" />
+    </svg>
+  );
+}
+
+export function WifiGlyph({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" fill="none"
+      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+      <path d="M2.6 8.9a14.5 14.5 0 0 1 18.8 0" />
+      <path d="M5.8 12.4a9.7 9.7 0 0 1 12.4 0" />
+      <path d="M9 15.9a5 5 0 0 1 6 0" />
+      <circle cx="12" cy="19.2" r="1.1" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+export function SpeakerGlyph({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" aria-hidden="true" fill="none"
+      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 9.3h3.2L12 5.4v13.2l-4.8-3.9H4z" />
+      <path d="M15.6 9.6a3.6 3.6 0 0 1 0 4.8" />
+      <path d="M18.1 7a7.2 7.2 0 0 1 0 10" />
+    </svg>
+  );
+}
+
+export function FolderIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M4 12.5A2.5 2.5 0 0 1 6.5 10h11l4 4.5H41.5A2.5 2.5 0 0 1 44 17v20a2.5 2.5 0 0 1-2.5 2.5h-35A2.5 2.5 0 0 1 4 37z" fill="#e8b23a" />
+      <path d="M4 18.5A2.5 2.5 0 0 1 6.5 16h35A2.5 2.5 0 0 1 44 18.5V37a2.5 2.5 0 0 1-2.5 2.5h-35A2.5 2.5 0 0 1 4 37z" fill="#ffd166" />
+    </svg>
+  );
+}
+
+export function TextFileIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M10 5h19l9 9v29a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" fill="#fff" stroke="#b9c0cc" strokeWidth="1.4" />
+      <path d="M29 5l9 9h-9z" fill="#dbe2ec" />
+      <g stroke="#7f8a9c" strokeWidth="1.6" strokeLinecap="round">
+        <path d="M14 21h20M14 26h20M14 31h14" />
+      </g>
+    </svg>
+  );
+}
+
+export function ZipIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M10 5h19l9 9v29a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" fill="#eef1f6" stroke="#b9c0cc" strokeWidth="1.4" />
+      <path d="M29 5l9 9h-9z" fill="#d3dae6" />
+      <rect x="20" y="5" width="8" height="4" fill="#8fa3bf" />
+      <rect x="20" y="9" width="8" height="4" fill="#c7d2e2" />
+      <rect x="20" y="13" width="8" height="4" fill="#8fa3bf" />
+      <rect x="19" y="18" width="10" height="12" rx="1.6" fill="#5b7ba8" />
+      <rect x="22.5" y="22" width="3" height="5" rx="1" fill="#eef1f6" />
+    </svg>
+  );
+}
+
+export function InstallerIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <rect x="6" y="8" width="36" height="32" rx="3" fill="#2f6fe4" />
+      <rect x="6" y="8" width="36" height="8" rx="3" fill="#1f55bd" />
+      <path d="M24 20v10M19 26l5 5 5-5" fill="none" stroke="#fff" strokeWidth="2.6"
+        strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M17 35h14" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function RecycleIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M12 14h24l-2.2 26.2a2 2 0 0 1-2 1.8H16.2a2 2 0 0 1-2-1.8z" fill="#c9d6e6" opacity=".75" />
+      <path d="M12 14h24l-2.2 26.2a2 2 0 0 1-2 1.8H16.2a2 2 0 0 1-2-1.8z" fill="none" stroke="#7b8ba3" strokeWidth="1.6" />
+      <g stroke="#7b8ba3" strokeWidth="1.6" strokeLinecap="round">
+        <path d="M19 20.5v15M24 20.5v15M29 20.5v15" />
+      </g>
+      <rect x="9" y="9.5" width="30" height="4.6" rx="2.3" fill="#93a3ba" />
+      <path d="M19.5 9.5V7.4a1.6 1.6 0 0 1 1.6-1.6h5.8a1.6 1.6 0 0 1 1.6 1.6v2.1" fill="none" stroke="#93a3ba" strokeWidth="2" />
+    </svg>
+  );
+}
+
+export function ImageFileIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M10 5h19l9 9v29a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" fill="#fff" stroke="#b9c0cc" strokeWidth="1.4" />
+      <path d="M29 5l9 9h-9z" fill="#dbe2ec" />
+      <rect x="13" y="20" width="22" height="15" rx="1.6" fill="#cfe6ff" />
+      <circle cx="19" cy="25" r="2.2" fill="#f5c451" />
+      <path d="m14 33 6-6 4.5 4.5L28 28l6 5z" fill="#5aa469" />
+    </svg>
+  );
+}
+
+export function JsonFileIcon({ className }: P) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" aria-hidden="true">
+      <path d="M10 5h19l9 9v29a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" fill="#fff" stroke="#b9c0cc" strokeWidth="1.4" />
+      <path d="M29 5l9 9h-9z" fill="#dbe2ec" />
+      <text x="24" y="34" textAnchor="middle" fontSize="13" fontFamily="monospace" fill="#5b7ba8">{'{}'}</text>
+    </svg>
+  );
+}
diff --git a/landing/app/components/Mockups.tsx b/landing/app/components/Mockups.tsx
new file mode 100644
index 0000000..e690e41
--- /dev/null
+++ b/landing/app/components/Mockups.tsx
@@ -0,0 +1,86 @@
+import { Mark } from './Mark';
+import { SpeakerGlyph } from './Icons';
+
+const BARS = Array.from({ length: 14 }, (_, i) => i);
+
+/** 01 — hold to talk: a live waveform and the hotkey. */
+export function MockListen() {
+  return (
+    <div className="mock mock-listen">
+      <div className="wave">
+        {BARS.map((i) => (
+          <i key={i} style={{ animationDelay: `${(i % 7) * 0.11}s` }} />
+        ))}
+      </div>
+      <div className="kbd-row">
+        <kbd>Ctrl</kbd>
+        <span>+</span>
+        <kbd>Alt</kbd>
+        <span>+</span>
+        <kbd>X</kbd>
+        <span className="mock-note">listening…</span>
+      </div>
+    </div>
+  );
+}
+
+/** 02 — a screenshot goes with every question. */
+export function MockSee() {
+  return (
+    <div className="mock mock-see">
+      <div className="fake-browser">
+        <div className="fake-url"><span /></div>
+        <div className="skel">
+          <i style={{ width: '78%' }} />
+          <i style={{ width: '92%' }} />
+          <i style={{ width: '60%' }} />
+          <i style={{ width: '84%' }} />
+          <i style={{ width: '44%' }} />
+        </div>
+      </div>
+      <div className="shot-toast">
+        <span className="shot-dot" />
+        screenshot captured
+      </div>
+    </div>
+  );
+}
+
+/** 03 — the floating stream window mirrors the live Q&A. */
+export function MockSpeak() {
+  return (
+    <div className="mock mock-speak">
+      <div className="stream">
+        <div className="stream-head">
+          <SpeakerGlyph />
+          <span>stream</span>
+        </div>
+        <p className="stream-you"><b>you:</b> what am i looking at?</p>
+        <p className="stream-fl">
+          <b>flicky:</b> that&apos;s the vercel deploy log — the red line is a missing env var.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/** 04 — the cursor parks on the thing you should click. */
+export function MockPoint() {
+  return (
+    <div className="mock mock-point">
+      <div className="dialog">
+        <div className="dialog-title">Settings</div>
+        <div className="dialog-row">
+          <span className="dlg-btn">Cancel</span>
+          <span className="dlg-btn primary">Save</span>
+          <span className="dlg-btn">Apply</span>
+        </div>
+      </div>
+      <div className="mini-overlay pinned">
+        <span className="mini-halo" />
+        <Mark className="mini-mark" />
+        <span className="mini-bubble">1/2 · click Save</span>
+      </div>
+    </div>
+  );
+}
diff --git a/landing/app/components/Parallax.tsx b/landing/app/components/Parallax.tsx
new file mode 100644
index 0000000..e4fcef7
--- /dev/null
+++ b/landing/app/components/Parallax.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Publishes normalised pointer position (-1..1) as --mx / --my on its
+ * parent element, so the scattered desktop clutter can drift with the
+ * mouse. Does nothing at all under prefers-reduced-motion.
+ */
+export function Parallax() {
+  const ref = useRef<HTMLSpanElement | null>(null);
+
+  useEffect(() => {
+    const host = ref.current?.parentElement as HTMLElement | undefined;
+    if (!host) return;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
+
+    let raf = 0;
+    let mx = 0;
+    let my = 0;
+
+    const apply = () => {
+      raf = 0;
+      host.style.setProperty('--mx', mx.toFixed(3));
+      host.style.setProperty('--my', my.toFixed(3));
+    };
+
+    const onMove = (e: MouseEvent) => {
+      const r = host.getBoundingClientRect();
+      mx = Math.max(-1, Math.min(1, ((e.clientX - r.left) / r.width) * 2 - 1));
+      my = Math.max(-1, Math.min(1, ((e.clientY - r.top) / r.height) * 2 - 1));
+      if (!raf) raf = requestAnimationFrame(apply);
+    };
+
+    window.addEventListener('mousemove', onMove, { passive: true });
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, []);
+
+  return <span ref={ref} className="parallax-probe" aria-hidden="true" />;
+}
diff --git a/landing/app/components/PointAt.tsx b/landing/app/components/PointAt.tsx
new file mode 100644
index 0000000..70a925f
--- /dev/null
+++ b/landing/app/components/PointAt.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Mark } from './Mark';
+
+interface PointAtProps {
+  /** CSS selector, resolved inside the nearest positioned ancestor. */
+  target: string;
+  label: string;
+  /** Fire on a timer instead of waiting for the section to scroll in. */
+  delay?: number;
+  /** Which side of the cursor the bubble sits on. */
+  side?: 'right' | 'left';
+}
+
+/**
+ * The page pointing at itself. A blue Flicky cursor parks in the
+ * bottom-right of its section, then flies to `target` with the same
+ * springy easing the real overlay uses and pops a little bubble.
+ */
+export function PointAt({ target, label, delay, side = 'right' }: PointAtProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [pos, setPos] = useState<{ l: number; t: number } | null>(null);
+  const [fired, setFired] = useState(false);
+  const [instant, setInstant] = useState(false);
+  const firedRef = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    const host = el?.parentElement as HTMLElement | undefined;
+    if (!el || !host) return;
+
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    let alive = true;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let io: IntersectionObserver | undefined;
+
+    // Keep the cursor + its bubble inside the section so nothing ever
+    // pushes the document sideways on a narrow screen.
+    const clamp = (l: number) => {
+      const w = host.clientWidth;
+      const lead = side === 'right' ? 150 : 34;
+      const trail = side === 'right' ? 34 : 150;
+      return Math.min(Math.max(l, trail), Math.max(trail, w - lead));
+    };
+
+    const aim = () => {
+      const t = host.querySelector(target) as HTMLElement | null;
+      if (!t) return null;
+      const hr = host.getBoundingClientRect();
+      const tr = t.getBoundingClientRect();
+      return {
+        l: clamp(tr.left - hr.left + tr.width * 0.72),
+        t: tr.top - hr.top + tr.height * 0.8,
+      };
+    };
+
+    const park = () => ({
+      l: clamp(host.clientWidth - 74),
+      t: Math.max(40, host.clientHeight - 70),
+    });
+
+    if (reduce) {
+      setInstant(true);
+      const a = aim();
+      if (a) setPos(a);
+      firedRef.current = true;
+      setFired(true);
+      return;
+    }
+
+    setPos(park());
+
+    const go = () => {
+      if (!alive) return;
+      const a = aim();
+      if (!a) return;
+      setPos(a);
+      firedRef.current = true;
+      setFired(true);
+    };
+
+    if (typeof delay === 'number') {
+      timer = setTimeout(go, delay);
+    } else {
+      io = new IntersectionObserver(
+        (entries) => {
+          if (entries.some((e) => e.isIntersecting)) {
+            io?.disconnect();
+            timer = setTimeout(go, 320);
+          }
+        },
+        { threshold: 0.5 },
+      );
+      io.observe(host);
+    }
+
+    // Keep the cursor glued to the target when the layout reflows.
+    const resync = () => {
+      if (!alive) return;
+      setPos(() => (firedRef.current ? aim() ?? park() : park()));
+    };
+
+    const ro = new ResizeObserver(resync);
+    ro.observe(host);
+
+    const onResize = resync;
+    window.addEventListener('resize', onResize);
+
+    return () => {
+      alive = false;
+      if (timer) clearTimeout(timer);
+      io?.disconnect();
+      ro.disconnect();
+      window.removeEventListener('resize', onResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [target, delay, side]);
+
+  return (
+    <div
+      ref={ref}
+      className={`pointat${fired ? ' on' : ''}${instant ? ' instant' : ''} side-${side}`}
+      style={pos ? { left: `${pos.l}px`, top: `${pos.t}px` } : { left: '-999px', top: '-999px' }}
+      aria-hidden="true"
+    >
+      <span className="pointat-halo" />
+      <Mark className="pointat-mark" />
+      <span className="pointat-bubble">{label}</span>
+    </div>
+  );
+}
diff --git a/landing/app/components/Taskbar.tsx b/landing/app/components/Taskbar.tsx
new file mode 100644
index 0000000..77ddbb0
--- /dev/null
+++ b/landing/app/components/Taskbar.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { Mark } from './Mark';
+import { Clock } from './Clock';
+import { ThemeToggle } from './ThemeToggle';
+import { WinLogo, GitHubGlyph, DownloadGlyph, WifiGlyph, SpeakerGlyph } from './Icons';
+
+const REPO = 'https://github.com/pango07/flicky';
+const RELEASES = `${REPO}/releases/latest`;
+
+/**
+ * The page nav, disguised as a Windows 11 taskbar pinned to the bottom
+ * of the viewport. Centre cluster = launcher icons, right cluster = the
+ * system tray (theme toggle, fake wifi/volume, live clock).
+ */
+export function Taskbar() {
+  return (
+    <div className="taskbar" role="navigation" aria-label="Main">
+      <div className="tb-center">
+        <a className="tb-btn" href="#top" title="start">
+          <WinLogo className="tb-glyph" />
+        </a>
+        <a className="tb-btn running" href="#top" title="flicky.exe — running">
+          <Mark className="tb-mark" />
+        </a>
+        <a
+          className="tb-btn"
+          href={REPO}
+          target="_blank"
+          rel="noopener noreferrer"
+          title="source on github"
+        >
+          <GitHubGlyph className="tb-glyph" />
+        </a>
+        <a
+          className="tb-btn"
+          href={RELEASES}
+          target="_blank"
+          rel="noopener noreferrer"
+          title="releases"
+        >
+          <DownloadGlyph className="tb-glyph" />
+        </a>
+      </div>
+
+      <div className="tb-tray">
+        <ThemeToggle />
+        <span className="tb-tray-glyph" title="connected (probably)" aria-hidden="true">
+          <WifiGlyph />
+        </span>
+        <span className="tb-tray-glyph" title="volume" aria-hidden="true">
+          <SpeakerGlyph />
+        </span>
+        <Clock />
+      </div>
+    </div>
+  );
+}
diff --git a/landing/app/components/ThemeToggle.tsx b/landing/app/components/ThemeToggle.tsx
new file mode 100644
index 0000000..899540e
--- /dev/null
+++ b/landing/app/components/ThemeToggle.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+const KEY = 'flicky-theme';
+
+function current(): Theme {
+  if (typeof document === 'undefined') return 'light';
+  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+}
+
+/**
+ * Small round sun/moon button. The initial attribute is set by the
+ * blocking script in layout.tsx, so this component only mirrors and
+ * flips it — it never causes a flash of the wrong theme.
+ */
+export function ThemeToggle() {
+  const [theme, setTheme] = useState<Theme>('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setTheme(current());
+    setMounted(true);
+
+    // Follow the OS only while the visitor hasn't picked a side.
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    const onSystem = () => {
+      let stored: string | null = null;
+      try {
+        stored = localStorage.getItem(KEY);
+      } catch {
+        /* storage blocked — treat as "no explicit choice" */
+      }
+      if (stored === 'light' || stored === 'dark') return;
+      const next: Theme = mq.matches ? 'dark' : 'light';
+      document.documentElement.setAttribute('data-theme', next);
+      setTheme(next);
+    };
+    mq.addEventListener('change', onSystem);
+    return () => mq.removeEventListener('change', onSystem);
+  }, []);
+
+  const toggle = () => {
+    const next: Theme = current() === 'dark' ? 'light' : 'dark';
+    document.documentElement.setAttribute('data-theme', next);
+    try {
+      localStorage.setItem(KEY, next);
+    } catch {
+      /* ignore */
+    }
+    setTheme(next);
+  };
+
+  const isDark = mounted && theme === 'dark';
+
+  return (
+    <button
+      type="button"
+      className="theme-toggle"
+      onClick={toggle}
+      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      {isDark ? (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
+          strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="4.2" />
+          <path d="M12 2.4v2.2M12 19.4v2.2M2.4 12h2.2M19.4 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
+          strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M20.5 14.4A8.6 8.6 0 1 1 9.6 3.5a7 7 0 0 0 10.9 10.9Z" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/landing/app/components/Win.tsx b/landing/app/components/Win.tsx
new file mode 100644
index 0000000..f208e70
--- /dev/null
+++ b/landing/app/components/Win.tsx
@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+
+interface WinProps {
+  title: string;
+  icon?: ReactNode;
+  /** Any max-width CSS value, e.g. "620px". */
+  width?: string;
+  className?: string;
+  /** Removes the body padding — for video / edge-to-edge content. */
+  flush?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * A Windows 11 style window frame. Title bar carries a small icon and
+ * the title on the left, and minimise / maximise / close glyphs on the
+ * right (the close one turns red on hover, like the real thing).
+ * Purely decorative — the controls are spans, not buttons.
+ */
+export function Win({ title, icon, width, className, flush, children }: WinProps) {
+  return (
+    <div
+      className={`win${className ? ` ${className}` : ''}`}
+      style={width ? { maxWidth: width } : undefined}
+    >
+      <div className="win-bar">
+        {icon ? <span className="win-ico" aria-hidden="true">{icon}</span> : null}
+        <span className="win-title">{title}</span>
+        <span className="win-ctrls" aria-hidden="true">
+          <span className="win-ctrl">
+            <svg viewBox="0 0 10 10"><path d="M0 5h10" /></svg>
+          </span>
+          <span className="win-ctrl">
+            <svg viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" /></svg>
+          </span>
+          <span className="win-ctrl close">
+            <svg viewBox="0 0 10 10"><path d="M0 0l10 10M10 0L0 10" /></svg>
+          </span>
+        </span>
+      </div>
+      <div className={`win-body${flush ? ' flush' : ''}`}>{children}</div>
+    </div>
+  );
+}
diff --git a/landing/app/globals.css b/landing/app/globals.css
index efbae03..cfd064f 100644
--- a/landing/app/globals.css
+++ b/landing/app/globals.css
@@ -1,444 +1,1310 @@
-/* ── Flicky landing ───────────────────────────────────────────────── */
+/* =========================================================================
+   flicky landing — the page is a Windows 11 desktop.
+   wallpaper + dots + bloom on <body>, a taskbar for nav, desktop icons
+   for section links, and every content block lives in a window frame.
+   ========================================================================= */
+
+/* ------------------------------------------------------------- tokens */
 
 :root {
-  --bg:           #0b0b0d;
-  --bg-2:         #111115;
-  --ink:          #eeeeef;
-  --ink-dim:      #a5a5ad;
-  --ink-faint:    #6a6a73;
-  --rule:         rgba(255, 255, 255, 0.08);
-  --rule-strong:  rgba(255, 255, 255, 0.18);
-  --accent:       #7dd3fc;
-  --accent-deep:  #2563eb;
+  --wall: #eef1f6;
+  --wall-2: #e6eaf2;
+  --dot: rgba(15, 23, 42, 0.09);
+  --bloom-a: rgba(56, 152, 255, 0.42);
+  --bloom-b: rgba(125, 211, 252, 0.28);
+
+  --surface: #ffffff;
+  --surface-2: #f6f8fb;
+  --surface-3: #eceff5;
+  --bar: #f3f5f9;
+
+  --ink: #14161c;
+  --ink-2: #3c414c;
+  --muted: #6a707c;
+  --faint: #979dab;
+
+  --line: rgba(15, 23, 42, 0.12);
+  --line-soft: rgba(15, 23, 42, 0.07);
 
-  --maxw: 1200px;
-  --gutter: clamp(18px, 4vw, 48px);
+  --accent: #2563eb;
+  --accent-2: #38bdf8;
+  --accent-ink: #ffffff;
+  --accent-soft: #e7f0ff;
+  --accent-line: rgba(37, 99, 235, 0.28);
 
-  --display: var(--font-display), "Inter", system-ui, -apple-system, sans-serif;
-  --sans:    var(--font-sans), system-ui, -apple-system, "Segoe UI", sans-serif;
-  --mono:    var(--font-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --glass: rgba(248, 250, 253, 0.78);
+  --shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.35);
+  --shadow-sm: 0 8px 22px -12px rgba(15, 23, 42, 0.35);
 
-  font-synthesis: none;
+  --note: #fdf3a8;
+  --note-bar: #f6e06a;
+  --note-ink: #4a4321;
+
+  --radius: 8px;
 }
 
-* { box-sizing: border-box; }
+:root[data-theme='dark'] {
+  --wall: #0f0f10;
+  --wall-2: #131317;
+  --dot: rgba(255, 255, 255, 0.075);
+  --bloom-a: rgba(49, 78, 190, 0.4);
+  --bloom-b: rgba(30, 64, 140, 0.3);
+
+  --surface: #1c1c1e;
+  --surface-2: #232326;
+  --surface-3: #2b2b2f;
+  --bar: #202024;
+
+  --ink: #eceef2;
+  --ink-2: #c6cad3;
+  --muted: #9aa0ac;
+  --faint: #767c88;
+
+  --line: rgba(255, 255, 255, 0.09);
+  --line-soft: rgba(255, 255, 255, 0.055);
 
-html, body {
+  --accent: #5b9bff;
+  --accent-2: #67e8f9;
+  --accent-ink: #08131f;
+  --accent-soft: rgba(91, 155, 255, 0.14);
+  --accent-line: rgba(91, 155, 255, 0.32);
+
+  --glass: rgba(24, 24, 27, 0.76);
+  --shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.85);
+  --shadow-sm: 0 10px 26px -14px rgba(0, 0, 0, 0.8);
+
+  --note: #f2e089;
+  --note-bar: #e2c94f;
+  --note-ink: #3a3315;
+}
+
+/* -------------------------------------------------------------- base */
+
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 24px;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
   margin: 0;
-  padding: 0;
-  background: var(--bg);
+  min-height: 100dvh;
+  overflow-x: hidden;
+  background: var(--wall);
   color: var(--ink);
-  font-family: var(--sans);
-  font-feature-settings: "cv11", "ss01", "ss03";
-  line-height: 1.55;
+  font-family: var(--font-sans), system-ui, sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }
 
-body::before {
-  content: "";
+/* wallpaper: dotted grid + a windows-y bloom behind the hero */
+body::before,
+body::after {
+  content: '';
   position: fixed;
   inset: 0;
+  z-index: -1;
   pointer-events: none;
+}
+
+body::before {
+  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
+  background-size: 22px 22px;
+  background-position: -1px -1px;
+}
+
+body::after {
   background:
-    radial-gradient(1200px 600px at 20% -10%, rgba(37, 99, 235, 0.18), transparent 60%),
-    radial-gradient(800px 400px at 100% 0%, rgba(125, 211, 252, 0.10), transparent 55%),
-    linear-gradient(180deg, #0b0b0d 0%, #0a0a0c 100%);
-  z-index: -1;
+    radial-gradient(1100px 620px at 50% -6%, var(--bloom-a), transparent 68%),
+    radial-gradient(760px 520px at 84% 8%, var(--bloom-b), transparent 70%),
+    linear-gradient(180deg, transparent 30%, var(--wall-2) 100%);
+  z-index: -2;
 }
 
 a { color: inherit; }
 
+h1, h2, h3 {
+  margin: 0;
+  font-family: var(--font-sans), system-ui, sans-serif;
+  letter-spacing: -0.02em;
+  line-height: 1.12;
+}
+
+p { margin: 0; }
+
+.kao {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  color: var(--faint);
+  white-space: nowrap;
+}
+
+.mono { font-family: var(--font-mono), ui-monospace, monospace; }
+
 main {
-  max-width: var(--maxw);
+  position: relative;
+  padding-bottom: 72px;
+}
+
+.section {
+  position: relative;
+  max-width: 1120px;
   margin: 0 auto;
-  padding: 0 var(--gutter) 80px;
+  padding: 110px 24px;
 }
 
-/* ── Top nav ──────────────────────────────────────────────────────── */
+.sec-head {
+  font-size: clamp(30px, 4vw, 42px);
+  font-weight: 800;
+  letter-spacing: -0.035em;
+  text-align: center;
+  margin-bottom: 52px;
+}
+
+.center { margin-left: auto; margin-right: auto; }
+
+/* ------------------------------------------------------- window chrome */
 
-.top {
+.win {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.win-bar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 22px 0 28px;
-  border-bottom: 1px solid var(--rule);
+  gap: 8px;
+  height: 36px;
+  padding-left: 11px;
+  background: var(--bar);
+  border-bottom: 1px solid var(--line-soft);
+  user-select: none;
 }
 
-.brand {
+.win-ico {
+  display: inline-flex;
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+.win-ico svg { width: 100%; height: 100%; display: block; }
+
+.win-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.win-ctrls {
+  margin-left: auto;
+  display: flex;
+  align-self: stretch;
+}
+
+.win-ctrl {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
-  font-weight: 650;
-  font-size: 17px;
+  justify-content: center;
+  width: 44px;
+  align-self: stretch;
+  color: var(--muted);
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.win-ctrl svg {
+  width: 10px;
+  height: 10px;
+  stroke: currentColor;
+  stroke-width: 1.1;
+  fill: none;
+}
+.win:hover .win-ctrl:hover { background: var(--surface-3); }
+.win:hover .win-ctrl.close:hover { background: #e81123; color: #fff; }
+
+.win-body { padding: 20px; }
+.win-body.flush { padding: 0; }
+
+/* ------------------------------------------------------------ taskbar */
+
+.taskbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 60;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background: var(--glass);
+  backdrop-filter: blur(18px) saturate(150%);
+  -webkit-backdrop-filter: blur(18px) saturate(150%);
+  border-top: 1px solid var(--line);
+}
+
+.tb-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 4px;
+}
+
+.tb-btn {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  color: var(--ink-2);
+  transition: background 0.14s ease;
+}
+.tb-btn:hover { background: var(--surface-3); }
+.tb-glyph { width: 18px; height: 18px; display: block; }
+.tb-mark { width: 19px; height: 19px; display: block; }
+
+.tb-btn.running::after {
+  content: '';
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 16px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+
+.tb-tray {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.tb-tray-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 34px;
+  border-radius: 5px;
+  color: var(--muted);
+}
+.tb-tray-glyph svg { width: 16px; height: 16px; display: block; }
+.tb-tray-glyph:hover { background: var(--surface-3); }
+
+.tb-clock {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 1px;
+  padding: 0 10px;
+  height: 38px;
+  border-radius: 5px;
+  font-size: 11px;
+  line-height: 1.25;
+  color: var(--ink-2);
+  font-variant-numeric: tabular-nums;
+}
+.tb-clock:hover { background: var(--surface-3); }
+
+.theme-toggle {
+  width: 30px;
+  height: 34px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+.theme-toggle:hover { background: var(--surface-3); color: var(--ink); }
+.theme-toggle svg { width: 16px; height: 16px; display: block; }
+
+/* ------------------------------------------------------ desktop icons */
+
+.desk-icons {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.desk-icon,
+.cl-bin,
+.cl-file1,
+.cl-file2 {
+  width: 76px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 4px;
   text-decoration: none;
-  letter-spacing: -0.01em;
 }
-.brand-mark { width: 22px; height: 22px; overflow: visible; }
-.brand-mark.sm { width: 18px; height: 18px; }
 
-nav { display: flex; gap: 22px; font-size: 13.5px; color: var(--ink-dim); }
-nav a { text-decoration: none; transition: color 0.15s ease; }
-nav a:hover { color: var(--ink); }
+.desk-icon:hover {
+  background: rgba(120, 170, 255, 0.18);
+  border-color: var(--accent-line);
+}
 
-/* ── Hero ─────────────────────────────────────────────────────────── */
+.desk-art {
+  width: 44px;
+  height: 44px;
+  display: block;
+}
+.desk-art svg { width: 100%; height: 100%; display: block; }
+.desk-mark { width: 38px; height: 38px; display: block; margin: 3px auto; }
+
+.desk-label {
+  font-size: 11px;
+  line-height: 1.25;
+  text-align: center;
+  color: var(--ink);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
+  word-break: break-word;
+}
+:root[data-theme='dark'] .desk-label {
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
+}
+
+/* --------------------------------------------------------------- hero */
 
 .hero {
+  position: relative;
+  padding: 0 24px 40px;
+}
+
+.stage {
+  position: relative;
+  min-height: 78vh;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  max-width: 1360px;
+  margin: 0 auto;
+}
+
+.parallax-probe { display: none; }
+
+.hero-copy {
+  position: relative;
+  z-index: 5;
+  max-width: 760px;
   text-align: center;
-  gap: clamp(36px, 5vw, 64px);
-  padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 7vw, 80px);
+  padding: 40px 0;
 }
 
 .eyebrow {
-  font-family: var(--mono);
+  font-family: var(--font-mono), ui-monospace, monospace;
   font-size: 12px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
-  color: var(--accent);
-  margin: 0 0 18px;
+  color: var(--muted);
+  margin-bottom: 18px;
 }
 
-.hero-copy {
-  max-width: 720px;
-}
-.hero-copy .eyebrow,
-.hero-copy .tiny {
-  /* Eyebrow + meta line stay small-caps feeling; center-aligned. */
-}
-.hero-copy h1 {
-  font-family: var(--display);
-  font-weight: 600;
-  font-size: clamp(40px, 6.8vw, 80px);
-  line-height: 1.0;
-  letter-spacing: -0.035em;
-  margin: 0 0 22px;
-}
-.hero-copy h1 .accent {
-  color: var(--accent);
+.wordmark {
+  font-size: clamp(64px, 11vw, 132px);
+  font-weight: 800;
+  letter-spacing: -0.05em;
+  color: var(--ink);
+  line-height: 0.95;
 }
 
 .lead {
-  font-size: clamp(16px, 1.55vw, 20px);
-  color: var(--ink-dim);
-  max-width: 52ch;
-  margin: 0 auto 28px;
+  margin-top: 16px;
+  font-size: 20px;
+  color: var(--muted);
 }
 
 .cta {
-  display: inline-flex;
-  gap: 10px;
+  margin-top: 30px;
+  display: flex;
   flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
   justify-content: center;
-  margin-bottom: 16px;
 }
 
 .btn {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  height: 42px;
-  padding: 0 18px;
+  gap: 9px;
+  height: 46px;
+  padding: 0 22px;
   border-radius: 999px;
-  font-size: 14px;
-  font-weight: 550;
-  text-decoration: none;
-  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
   border: 1px solid transparent;
-  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
 }
+.btn-glyph { width: 15px; height: 15px; display: block; flex: none; }
+
 .btn.primary {
-  background: var(--ink);
-  color: #0a0a0c;
+  background: var(--accent);
+  color: var(--accent-ink);
+  box-shadow: 0 10px 24px -12px var(--accent);
 }
-.btn.primary:hover { transform: translateY(-1px); }
+.btn.primary:hover { transform: translateY(-2px); }
+
 .btn.ghost {
-  background: transparent;
+  background: var(--surface);
   color: var(--ink);
-  border-color: var(--rule-strong);
+  border-color: var(--line);
+  box-shadow: var(--shadow-sm);
 }
-.btn.ghost:hover { border-color: var(--ink-dim); }
-.arr { opacity: 0.7; }
+.btn.ghost:hover { transform: translateY(-2px); }
 
-.tiny {
-  font-size: 12.5px;
-  color: var(--ink-faint);
-  margin-top: 2px;
-  font-family: var(--mono);
-  letter-spacing: 0.01em;
+.btn.text {
+  height: auto;
+  padding: 0 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--muted);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-color: var(--line);
 }
+.btn.text:hover { color: var(--ink); }
 
-/* ── Hero visual: demo video ──────────────────────────────────────── */
+.btn.sm { height: 38px; font-size: 14px; padding: 0 20px; }
 
-.hero-visual {
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: center;
+.tiny {
+  margin-top: 18px;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--faint);
 }
 
 .hero-video {
-  width: 100%;
-  /* Full hero-row width — the hero is stacked (text above, gif below)
-     so the gif gets the entire content column to itself. */
-  border-radius: 16px;
-  overflow: hidden;
-  border: 1px solid var(--rule-strong);
-  background: #0f0f12;
-  box-shadow:
-    0 40px 80px rgba(0, 0, 0, 0.55),
-    inset 0 1px 0 rgba(255, 255, 255, 0.04);
-}
-.hero-video video,
-.hero-video img {
+  max-width: 960px;
+  margin: 0 auto;
+  padding-top: 8px;
+}
+.video-win video {
   display: block;
   width: 100%;
   height: auto;
-  background: #0f0f12;
+  background: #000;
 }
 
-/* ── What ─────────────────────────────────────────────────────────── */
+/* ------------------------------------------------------ hero clutter */
 
-.what {
-  padding: 60px 0 30px;
-  border-top: 1px solid var(--rule);
+.clutter {
+  position: absolute;
+  inset: 0 0 0 96px; /* stay clear of the desktop icon column */
+  z-index: 1;
+  pointer-events: none;
 }
-.what h2,
-.get h2 {
-  font-family: var(--display);
-  font-weight: 600;
-  font-size: clamp(28px, 4vw, 44px);
-  letter-spacing: -0.025em;
-  margin: 0 0 36px;
+
+.cl {
+  position: absolute;
+  --d: 10px;
+  --r: 0deg;
+  transform: translate(calc(var(--mx, 0) * var(--d)), calc(var(--my, 0) * var(--d)))
+    rotate(var(--r));
+  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.what-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px 40px;
+.cl-note   { left: 0;    top: 11%; --d: 16px; --r: -5deg; }
+.cl-kao1   { left: 15%;  top: 4%;  --d: 9px;  --r: 4deg; }
+.cl-overlay{ left: 4%;   top: 46%; --d: 13px; --r: 0deg; }
+.cl-bin    { left: 1%;   top: 66%; --d: 7px;  --r: -2deg; }
+.cl-file1  { left: 13%;  top: 80%; --d: 11px; --r: 3deg; }
+
+.cl-toast  { right: 1%;  top: 11%; --d: 15px; --r: 3deg; }
+.cl-kao2   { right: 15%; top: 4%;  --d: 8px;  --r: -4deg; }
+.cl-walk   { right: 2%;  top: 44%; --d: 12px; --r: -3deg; }
+.cl-kao3   { right: 5%;  top: 72%; --d: 10px; --r: 5deg; }
+.cl-file2  { right: 13%; top: 80%; --d: 9px;  --r: -3deg; }
+
+.kao.cl { font-size: 22px; }
+
+.cl-bin, .cl-file1, .cl-file2 { width: 96px; }
+.cl-bin .desk-label,
+.cl-file1 .desk-label,
+.cl-file2 .desk-label { white-space: nowrap; word-break: normal; }
+
+/* sticky note */
+.note {
+  width: 168px;
+  background: var(--note);
+  border-radius: 3px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
 }
-@media (max-width: 720px) {
-  .what-grid { grid-template-columns: 1fr; }
+.note-bar { height: 12px; background: var(--note-bar); }
+.note-body {
+  padding: 14px 14px 18px;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--note-ink);
+}
+
+/* toast notification */
+.toast {
+  width: 236px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 13px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
 }
-.what-grid article {
+.toast-mark { width: 18px; height: 18px; flex: none; margin-top: 1px; }
+.toast-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.toast-txt strong { font-size: 12.5px; }
+.toast-txt span { font-size: 12px; color: var(--muted); line-height: 1.4; }
+.toast-time { margin-left: auto; font-size: 10.5px; color: var(--faint); }
+
+/* mini overlay replica (the product's signature) */
+.mini-overlay {
   position: relative;
-  padding-top: 14px;
-  border-top: 1px solid var(--rule);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 4px;
 }
-.what-grid h3 {
-  font-family: var(--sans);
-  font-size: 18px;
-  font-weight: 570;
-  margin: 6px 0 6px;
-  letter-spacing: -0.005em;
+.mini-mark { width: 26px; height: 26px; display: block; filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.35)); }
+.mini-halo {
+  position: absolute;
+  left: 3px;
+  top: 3px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  transform: translate(-50%, -50%);
+  animation: halo 2.1s ease-out infinite;
 }
-.what-grid p {
-  margin: 0;
-  color: var(--ink-dim);
-  font-size: 14.5px;
-  max-width: 44ch;
+.mini-bubble,
+.pointat-bubble {
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+  box-shadow: 0 8px 18px -10px var(--accent);
+}
+
+@keyframes halo {
+  0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.85; }
+  70%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
+  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
+}
+
+/* mini walkthrough window */
+.mini-win {
+  width: 194px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
 }
-.step {
-  font-family: var(--mono);
+.mini-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 26px;
+  padding: 0 9px;
+  background: var(--bar);
+  border-bottom: 1px solid var(--line-soft);
   font-size: 11px;
-  letter-spacing: 0.15em;
+  color: var(--muted);
+}
+.mini-x { font-size: 10px; }
+.mini-body {
+  padding: 14px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  align-items: flex-start;
+}
+.mini-btn {
+  padding: 6px 16px;
+  border-radius: 5px;
+  background: var(--accent);
+  color: var(--accent-ink);
+  font-size: 12px;
+  font-weight: 600;
+}
+.mini-badge {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 10.5px;
+  color: var(--muted);
+}
+
+/* ---------------------------------------------------- pointed-at demo */
+
+.pointat {
+  position: absolute;
+  z-index: 20;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  pointer-events: none;
+  opacity: 0;
+  transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
+    top 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
+}
+.pointat.on { opacity: 1; }
+.pointat.instant { transition: none; }
+.pointat.side-left {
+  flex-direction: row-reverse;
+  /* keep the cursor tip on the anchor point, bubble trailing to its left */
+  transform: translateX(calc(-100% + 30px));
+}
+
+.pointat-mark {
+  width: 30px;
+  height: 30px;
+  display: block;
+  flex: none;
+  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.4));
+}
+.pointat-bubble {
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.25s ease 0.55s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s;
+}
+.pointat.on .pointat-bubble { opacity: 1; transform: scale(1); }
+
+.pointat-halo {
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+}
+.pointat.side-left .pointat-halo { left: auto; right: 26px; }
+.pointat.on .pointat-halo { animation: halo 2.1s ease-out 0.65s infinite; }
+
+/* -------------------------------------------------------- the dream */
+
+.dream { padding-top: 40px; }
+
+.notepad .win-body {
+  padding: 26px 28px 30px;
+  background: var(--surface);
+}
+.notepad p {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 14px;
+  line-height: 1.75;
+  color: var(--ink-2);
+}
+.notepad p + p { margin-top: 16px; }
+.notepad a,
+.faq a,
+.credit a,
+.foot-note a {
   color: var(--accent);
-  text-transform: uppercase;
+  text-decoration: underline;
+  text-underline-offset: 3px;
 }
 
-/* ── Rail ─────────────────────────────────────────────────────────── */
+.float-kao {
+  position: absolute;
+  font-size: 22px;
+}
+.float-kao.a { left: 8%; top: 26%; transform: rotate(-6deg); }
+.float-kao.b { right: 9%; bottom: 24%; transform: rotate(5deg); }
 
-.rail {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 28px;
-  padding: 60px 0;
-  border-top: 1px solid var(--rule);
-  margin-top: 40px;
+/* ----------------------------------------------------- how it works */
+
+.rows {
+  display: flex;
+  flex-direction: column;
+  gap: 92px;
 }
-@media (max-width: 780px) {
-  .rail { grid-template-columns: 1fr; }
+
+.row {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+  gap: 48px;
+  align-items: center;
 }
-.rail-col h3 {
-  font-family: var(--display);
+.row.flip .row-win { order: 2; }
+.row.flip .row-say { order: 1; }
+
+.row-say { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 13px 5px 9px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  font-size: 13px;
   font-weight: 600;
-  font-size: 22px;
-  letter-spacing: -0.02em;
-  margin: 0 0 10px;
+  color: var(--accent);
 }
-.rail-col p {
-  margin: 0;
-  color: var(--ink-dim);
-  font-size: 14.5px;
-  max-width: 38ch;
+.chip-mark { width: 15px; height: 15px; display: block; }
+
+.bubble {
+  position: relative;
+  padding: 20px 24px;
+  border-radius: 14px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
 }
-.mono {
-  font-family: var(--mono);
-  font-size: 0.88em;
-  color: var(--ink);
-  background: rgba(255,255,255,0.05);
-  border: 1px solid var(--rule);
-  padding: 1px 6px;
+.bubble::after {
+  content: '';
+  position: absolute;
+  left: 26px;
+  top: -6px;
+  width: 12px;
+  height: 12px;
+  background: var(--accent-soft);
+  border-left: 1px solid var(--accent-line);
+  border-top: 1px solid var(--accent-line);
+  transform: rotate(45deg);
+}
+.bubble h3 {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+.bubble p {
+  margin-top: 9px;
+  font-size: 15px;
+  color: var(--muted);
+  line-height: 1.65;
+}
+.row-n {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 14px;
+  color: var(--accent);
+  vertical-align: 3px;
+}
+
+/* ---------------------------------------------------------- mockups */
+
+.mock { min-height: 190px; }
+
+/* 01 waveform */
+.mock-listen {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  justify-content: center;
+}
+.wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  height: 96px;
+  padding: 0 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+}
+.wave i {
+  display: block;
+  width: 6px;
+  height: 54px;
+  border-radius: 3px;
+  background: linear-gradient(180deg, var(--accent-2), var(--accent));
+  transform-origin: center;
+  animation: bar 1.15s ease-in-out infinite;
+}
+@keyframes bar {
+  0%, 100% { transform: scaleY(0.22); }
+  50%      { transform: scaleY(1); }
+}
+.kbd-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 13px;
+  color: var(--muted);
+}
+kbd {
+  display: inline-block;
+  padding: 4px 10px;
   border-radius: 5px;
+  border: 1px solid var(--line);
+  border-bottom-width: 2px;
+  background: var(--surface-2);
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--ink);
+}
+.mock-note {
+  margin-left: auto;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--accent);
 }
 
-/* ── Get ─────────────────────────────────────────────────────────── */
+/* 02 screenshot */
+.mock-see { position: relative; }
+.fake-browser {
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.fake-url {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  background: var(--surface-3);
+  border-bottom: 1px solid var(--line-soft);
+}
+.fake-url span {
+  display: block;
+  height: 12px;
+  width: 58%;
+  border-radius: 6px;
+  background: var(--line);
+}
+.skel { padding: 18px; display: flex; flex-direction: column; gap: 11px; }
+.skel i {
+  display: block;
+  height: 11px;
+  border-radius: 5px;
+  background: var(--line-soft);
+}
+.shot-toast {
+  position: absolute;
+  right: 10px;
+  bottom: -10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-sm);
+  font-size: 12.5px;
+  color: var(--ink-2);
+}
+.shot-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #22c55e;
+}
 
-.get {
-  padding: 60px 0 30px;
-  border-top: 1px solid var(--rule);
+/* 03 stream window */
+.mock-speak {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
 }
-.get-lead {
-  max-width: 56ch;
-  color: var(--ink-dim);
-  margin: 0 0 32px;
+.stream {
+  width: 100%;
+  padding: 16px 18px 18px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: var(--shadow-sm);
+}
+.stream-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 12px;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+.stream-head svg { width: 14px; height: 14px; }
+.stream p { font-size: 14px; line-height: 1.6; }
+.stream p + p { margin-top: 10px; }
+.stream-you { color: var(--muted); }
+.stream-you b, .stream-fl b {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12.5px;
 }
+.stream-fl { color: var(--ink); }
+.stream-fl b { color: var(--accent); }
 
-.downloads {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 14px;
-  margin-bottom: 28px;
+/* 04 pointing */
+.mock-point {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px 0 44px;
 }
-@media (max-width: 720px) {
-  .downloads { grid-template-columns: 1fr; }
+.dialog {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+.dialog-title {
+  padding: 9px 14px;
+  background: var(--surface-3);
+  border-bottom: 1px solid var(--line-soft);
+  font-size: 12.5px;
+  color: var(--muted);
 }
-.dl {
+.dialog-row {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 20px 22px;
-  border-radius: 12px;
-  border: 1px solid var(--rule-strong);
-  background: rgba(255,255,255,0.02);
-  text-decoration: none;
-  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+  gap: 10px;
+  padding: 26px 14px;
+  justify-content: center;
+}
+.dlg-btn {
+  padding: 8px 20px;
+  border-radius: 5px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  font-size: 13px;
+  color: var(--ink-2);
 }
-.dl:hover {
-  transform: translateY(-2px);
+.dlg-btn.primary {
+  background: var(--accent);
   border-color: var(--accent);
-  background: rgba(125, 211, 252, 0.05);
+  color: var(--accent-ink);
+  font-weight: 600;
 }
-.dl .os {
-  font-family: var(--display);
-  font-size: 22px;
+.mini-overlay.pinned {
+  position: absolute;
+  left: 50%;
+  bottom: 6px;
+  transform: translateX(-34%);
+}
+
+/* --------------------------------------------------------- marquee */
+
+.marq {
+  position: relative;
+  overflow: hidden;
+  padding: 20px 0;
+  border-top: 1px solid var(--line-soft);
+  border-bottom: 1px solid var(--line-soft);
+  background: color-mix(in srgb, var(--surface) 45%, transparent);
+}
+.marq-track {
+  display: flex;
+  width: max-content;
+  animation: marq 34s linear infinite;
+}
+.marq:hover .marq-track { animation-play-state: paused; }
+.marq-run { display: flex; }
+.marq-run > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 22px;
+  padding-right: 22px;
+  font-family: var(--font-display), var(--font-sans), sans-serif;
+  font-size: 28px;
   font-weight: 600;
   letter-spacing: -0.02em;
+  color: var(--ink-2);
+  white-space: nowrap;
 }
-.dl .sub {
-  font-family: var(--mono);
-  font-size: 11.5px;
-  letter-spacing: 0.02em;
-  color: var(--ink-faint);
+.marq-run i { color: var(--accent); font-style: normal; }
+@keyframes marq {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
 }
-.dl .arr-lg {
-  margin-top: auto;
-  font-family: var(--mono);
-  font-size: 13px;
+
+/* -------------------------------------------------------- features */
+
+.feat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 22px;
+}
+.feat .win-body { padding: 22px 22px 24px; }
+.feat-n {
+  display: block;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 22px;
+  font-weight: 700;
   color: var(--accent);
+  margin-bottom: 12px;
+}
+.feat h3 { font-size: 18px; font-weight: 700; }
+.feat p {
+  margin-top: 8px;
+  font-size: 14.5px;
+  line-height: 1.62;
+  color: var(--muted);
 }
 
-.keys {
-  font-size: 13.5px;
-  color: var(--ink-faint);
-  max-width: 68ch;
-  line-height: 1.65;
+/* ------------------------------------------------------- get flicky */
+
+.getcard {
+  position: relative;
+  border-radius: 24px;
+  padding: 56px;
+  text-align: center;
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, #bfdcff 0%, #e8f2ff 46%, var(--surface) 100%);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+:root[data-theme='dark'] .getcard {
+  background: linear-gradient(180deg, #2b3a86 0%, #1a2148 44%, #121216 100%);
 }
 
-/* ── Credit ─────────────────────────────────────────────────────── */
+.free-tag {
+  display: inline-block;
+  padding: 4px 16px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ink-2);
+}
+.getcard h2 {
+  margin-top: 18px;
+  font-size: clamp(32px, 5vw, 44px);
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+.get-sub {
+  margin-top: 10px;
+  font-size: 16px;
+  color: var(--ink-2);
+}
+:root[data-theme='dark'] .get-sub { color: #c9d3ee; }
 
-.credit {
-  padding: 72px 0 40px;
-  border-top: 1px solid var(--rule);
-  margin-top: 40px;
+.dl-grid {
+  margin-top: 36px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+  text-align: left;
+}
+.dl-win .win-body {
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.dl-os {
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+.dl-detail {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12px;
+  color: var(--muted);
+}
+.dl-win .btn { margin-top: 12px; }
+
+.get-keys {
+  margin: 30px auto 0;
+  max-width: 720px;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 12.5px;
+  line-height: 1.75;
+  color: var(--ink-2);
+}
+:root[data-theme='dark'] .get-keys { color: #b8c2dd; }
+
+/* -------------------------------------------------------------- faq */
+
+.faq .win-body { padding: 8px 26px 14px; }
+.faq details { border-bottom: 1px solid var(--line-soft); }
+.faq details:last-child { border-bottom: 0; }
+.faq summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 17px 30px 17px 0;
+  position: relative;
+  font-size: 16px;
+  font-weight: 600;
+}
+.faq summary::-webkit-details-marker { display: none; }
+.faq summary::after {
+  content: '+';
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  font-weight: 400;
+  color: var(--faint);
+}
+.faq details[open] summary::after { content: '–'; }
+.faq details p {
+  padding: 0 0 18px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+/* ----------------------------------------------------------- credit */
+
+.credit .win-body {
+  padding: 26px 30px 30px;
+  border-left: 3px solid var(--accent);
 }
-.credit-inner { max-width: 60ch; }
 .credit-label {
-  font-family: var(--mono);
+  font-family: var(--font-mono), ui-monospace, monospace;
   font-size: 11px;
-  letter-spacing: 0.15em;
+  letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
-  margin: 0 0 12px;
+  margin-bottom: 12px;
 }
 .credit p {
-  margin: 0 0 14px;
-  color: var(--ink-dim);
-  font-size: 15.5px;
-  line-height: 1.7;
-}
-.credit a {
-  color: var(--ink);
-  text-decoration: underline;
-  text-decoration-color: var(--rule-strong);
-  text-underline-offset: 3px;
-  transition: text-decoration-color 0.15s ease;
+  font-size: 15px;
+  line-height: 1.75;
+  color: var(--ink-2);
 }
-.credit a:hover { text-decoration-color: var(--accent); }
+.credit p + p { margin-top: 14px; }
 
-/* ── Footer ─────────────────────────────────────────────────────── */
+/* ----------------------------------------------------------- footer */
 
 footer {
+  padding: 20px 24px 56px;
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  padding: 26px 0 8px;
-  border-top: 1px solid var(--rule);
-  margin-top: 40px;
-  font-size: 13px;
-  color: var(--ink-faint);
+  gap: 10px;
+  text-align: center;
 }
-.foot-brand {
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  color: var(--ink-dim);
-  font-weight: 550;
+.foot-links { display: flex; gap: 20px; }
+.foot-links a {
+  font-size: 13.5px;
+  color: var(--muted);
+  text-decoration: none;
 }
-.foot-links { display: flex; gap: 18px; }
-.foot-links a { color: var(--ink-dim); text-decoration: none; }
 .foot-links a:hover { color: var(--ink); }
-.foot-note a {
-  color: var(--ink-dim);
-  text-decoration: underline;
-  text-decoration-color: var(--rule-strong);
-  text-underline-offset: 3px;
-}
+.foot-note { font-size: 13.5px; color: var(--muted); }
+footer .kao { font-size: 15px; }
 
-::selection {
-  background: var(--accent);
-  color: #0a0a0c;
-}
-
-/* ── Page-wide Flicky cursor ────────────────────────────────────── */
+/* ------------------------------------------------------ page cursor */
 
 .flicky-cursor {
   position: fixed;
-  top: 0;
   left: 0;
-  width: 20px;
-  height: 20px;
+  top: 0;
+  z-index: 90;
   pointer-events: none;
-  z-index: 9999;
-  /* translate3d is set by JS on every frame; this just keeps the box
-     hidden behind the raf until a position arrives. */
-  transform: translate3d(-40px, -40px, 0);
-  transition: opacity 0.2s ease;
-  will-change: transform;
-  filter:
-    drop-shadow(0 4px 8px rgba(29, 78, 216, 0.45))
-    drop-shadow(0 0 14px rgba(59, 130, 246, 0.35));
+  transition: opacity 0.25s ease;
 }
 .flicky-cursor-mark {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
+  width: 26px;
+  height: 26px;
   display: block;
+  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.35));
+}
+
+/* ------------------------------------------------------ responsive */
+
+@media (max-width: 1180px) {
+  .desk-icons { display: none; }
+  .clutter { inset: 0; }
+}
+
+@media (max-width: 900px) {
+  .clutter { display: none; }
+  .stage { min-height: 62vh; }
+  .row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 22px;
+  }
+  .row.flip .row-win { order: 1; }
+  .row.flip .row-say { order: 2; }
+  .rows { gap: 64px; }
+  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 720px) {
+  .section { padding: 76px 18px; }
+  .hero { padding: 0 18px 28px; }
+  .feat-grid { grid-template-columns: minmax(0, 1fr); }
+  .dl-grid { grid-template-columns: minmax(0, 1fr); }
+  .getcard { padding: 34px 20px; border-radius: 18px; }
+  .lead { font-size: 17px; }
+  .btn { height: 44px; padding: 0 18px; font-size: 14px; }
+  .marq-run > span { font-size: 22px; gap: 16px; padding-right: 16px; }
+  .notepad .win-body { padding: 20px 18px 22px; }
+  .faq .win-body { padding: 4px 18px 10px; }
+  .credit .win-body { padding: 20px 18px 22px; }
+  .float-kao { display: none; }
+  .cta { gap: 10px; }
+}
+
+@media (max-width: 640px) {
+  .tb-tray-glyph { display: none; }
+  .taskbar { padding: 0 6px; }
+  .tb-center { gap: 2px; }
+  .tb-btn { width: 36px; height: 36px; }
+  .tb-clock { padding: 0 6px; font-size: 10.5px; }
 }
 
-@media (hover: none), (pointer: coarse) {
-  .flicky-cursor { display: none; }
+@media (max-width: 420px) {
+  .cta { flex-direction: column; align-items: stretch; }
+  .btn { justify-content: center; }
+  .sec-head { margin-bottom: 34px; }
+}
+
+/* --------------------------------------------------- reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+  .marq-track { animation: none; transform: none; }
+  .wave i { transform: scaleY(0.6); }
+  .mini-halo, .pointat-halo { animation: none; opacity: 0.5; transform: translate(-50%, -50%) scale(1.6); }
+  .btn:hover { transform: none; }
 }
diff --git a/landing/app/layout.tsx b/landing/app/layout.tsx
index 5dfffca..45f0b9b 100644
--- a/landing/app/layout.tsx
+++ b/landing/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Inter, Space_Grotesk, JetBrains_Mono } from 'next/font/google';
 import { FlickyCursor } from './components/FlickyCursor';
 import './globals.css';
@@ -23,22 +23,40 @@ const mono = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
-  title: 'Flicky — a voice companion for your computer',
+  title: 'flicky — an ai buddy that lives on your desktop',
   description:
-    "Hold a hotkey, talk, and a little blue cursor flies across your screen to point at what Flicky is talking about. Open source, cross-platform.",
+    'Hold a hotkey, talk, and a little blue cursor flies across your screen to point at what Flicky is talking about. Open source, cross-platform, bring your own keys.',
   icons: { icon: '/favicon.svg' },
   openGraph: {
     title: 'Flicky',
     description:
-      "Hold a hotkey. Talk. A little blue cursor flies to whatever Flicky is pointing at.",
-    url: 'https://github.com/jvaught01/flicky',
+      'Hold a hotkey. Talk. A little blue cursor flies to whatever Flicky is pointing at.',
+    url: 'https://github.com/pango07/flicky',
     type: 'website',
   },
 };
 
+export const viewport: Viewport = {
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#eef1f6' },
+    { media: '(prefers-color-scheme: dark)', color: '#0f0f10' },
+  ],
+};
+
+/* Runs before first paint so the right palette is on <html> immediately. */
+const themeScript = `(function(){try{var t=localStorage.getItem('flicky-theme');if(t!=='light'&&t!=='dark'){t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','light');}})();`;
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${inter.variable} ${display.variable} ${mono.variable}`}>
+    <html
+      lang="en"
+      data-theme="light"
+      suppressHydrationWarning
+      className={`${inter.variable} ${display.variable} ${mono.variable}`}
+    >
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
       <body>
         <FlickyCursor />
         {children}
diff --git a/landing/app/page.tsx b/landing/app/page.tsx
index a10768f..e3d36fb 100644
--- a/landing/app/page.tsx
+++ b/landing/app/page.tsx
@@ -1,187 +1,395 @@
 import { Mark } from './components/Mark';
+import { HeroVideo } from './components/HeroVideo';
+import { Win } from './components/Win';
+import { Taskbar } from './components/Taskbar';
+import { DesktopIcons } from './components/DesktopIcons';
+import { HeroClutter } from './components/HeroClutter';
+import { Parallax } from './components/Parallax';
+import { PointAt } from './components/PointAt';
+import { MockListen, MockSee, MockSpeak, MockPoint } from './components/Mockups';
+import {
+  WinLogo,
+  AppleGlyph,
+  TextFileIcon,
+  FolderIcon,
+  InstallerIcon,
+  ZipIcon,
+} from './components/Icons';
 
-const REPO = 'https://github.com/jvaught01/flicky';
+const REPO = 'https://github.com/pango07/flicky';
 const RELEASES = `${REPO}/releases/latest`;
+const CLICKY = 'https://www.clicky.so/';
+const FARZA = 'https://github.com/farzaa';
+const JULIO = 'https://github.com/jvaught01';
 
 const STEPS = [
   {
     n: '01',
-    t: 'Hear you.',
-    d: 'Hold a push-to-talk hotkey from anywhere in your OS. Groq Whisper transcribes in real time.',
+    t: 'hear you.',
+    d: 'hold to talk, or tap to toggle. groq whisper turns what you said into text before you finish letting go.',
+    mock: <MockListen />,
   },
   {
     n: '02',
-    t: "Think about what's on your screen.",
-    d: "A screenshot is captured every turn. Claude or GPT reasons about what you're looking at.",
+    t: 'see your screen.',
+    d: 'a screenshot goes with every question — claude, gpt, or a local model reads it, so you never describe anything twice.',
+    mock: <MockSee />,
   },
   {
     n: '03',
-    t: 'Speak back.',
-    d: 'ElevenLabs TTS — your pick of voice, stability, and speed. Ambient, not robotic.',
+    t: 'speak back.',
+    d: 'elevenlabs voice, or text-only if you would rather read. the stream window mirrors every word.',
+    mock: <MockSpeak />,
   },
   {
     n: '04',
-    t: 'Point at things.',
-    d: 'When Flicky mentions something on screen, a blue pointer flies to the exact spot.',
+    t: 'point at things.',
+    d: 'multi-step answers become numbered walkthroughs, and the blue cursor flies to the exact pixel each time.',
+    mock: <MockPoint />,
+  },
+] as const;
+
+const FEATURES = [
+  {
+    n: '01',
+    file: 'local.txt',
+    t: 'local by default',
+    d: 'chats and keys are encrypted on your own machine. nothing lives on our servers, because there aren’t any.',
+  },
+  {
+    n: '02',
+    file: 'brain.exe',
+    t: 'your choice of brain',
+    d: 'claude sonnet or opus 4.6, the gpt-5 family, or any local / openai-compatible endpoint — ollama, lm studio, whatever you run.',
+  },
+  {
+    n: '03',
+    file: 'memory.log',
+    t: 'never runs out of context',
+    d: 'long conversations auto-compact into a summary, so a single chat can just keep going all day.',
+  },
+  {
+    n: '04',
+    file: 'typing.dll',
+    t: 'types for you',
+    d: 'opt in and flicky types straight into the focused field — otherwise the answer lands on your clipboard.',
+  },
+  {
+    n: '05',
+    file: 'stream.exe',
+    t: 'stream window',
+    d: 'a floating transparent panel mirrors the live q&a. scroll it, select it, copy straight out of it.',
+  },
+  {
+    n: '06',
+    file: 'setup.exe',
+    t: 'guided setup',
+    d: 'a three-minute wizard tests each key, your shortcut and your mic before it lets you finish.',
   },
 ] as const;
 
 const DOWNLOADS = [
-  { os: 'macOS',   sub: 'Universal · Apple silicon + Intel', ext: '.dmg' },
-  { os: 'Windows', sub: 'x64 · installer',                   ext: '.exe' },
-  { os: 'Linux',   sub: 'AppImage or .deb',                  ext: '' },
+  {
+    file: 'Flicky-Setup-1.2.1.exe',
+    os: 'windows',
+    detail: 'x64 + arm64 · one installer',
+    icon: <InstallerIcon />,
+    id: 'dl-windows',
+  },
+  {
+    file: 'Flicky-1.2.1.dmg',
+    os: 'mac',
+    detail: 'apple silicon or intel',
+    icon: <FolderIcon />,
+    id: 'dl-mac',
+  },
+  {
+    file: 'Flicky-1.2.1.AppImage',
+    os: 'linux',
+    detail: 'also .deb',
+    icon: <ZipIcon />,
+    id: 'dl-linux',
+  },
 ] as const;
 
+const MARQUEE = [
+  'works on windows',
+  'works on mac',
+  'works on linux',
+  'local by default',
+  'bring your own keys',
+  'mit licensed',
+];
+
+function MarqueeRun({ k }: { k: string }) {
+  return (
+    <span className="marq-run">
+      {MARQUEE.map((m) => (
+        <span key={`${k}-${m}`}>
+          {m}
+          <i>✦</i>
+        </span>
+      ))}
+    </span>
+  );
+}
+
 export default function Page() {
   return (
-    <main>
-      <header className="top">
-        <a className="brand" href="#top">
-          <Mark className="brand-mark" />
-          <span>Flicky</span>
-        </a>
-        <nav>
-          <a href="#what">what it does</a>
-          <a href="#get">get it</a>
-          <a href={REPO} target="_blank" rel="noopener noreferrer">source</a>
-        </nav>
-      </header>
-
-      <section className="hero" id="top">
-        <div className="hero-copy">
-          <p className="eyebrow">Voice AI for your desktop</p>
-          <h1>
-            Flicky sees your screen.
-            <br />
-            <span className="accent">And talks back.</span>
-          </h1>
-          <p className="lead">
-            Hold a hotkey. Ask anything about what&apos;s on your screen.
-            Flicky answers out loud — and points.
-          </p>
-          <div className="cta">
-            <a className="btn primary" href="#get">Download</a>
-            <a className="btn ghost" href={REPO} target="_blank" rel="noopener noreferrer">
-              View on GitHub <span className="arr">↗</span>
-            </a>
+    <>
+      <DesktopIcons />
+      <main>
+        {/* ---------------------------------------------------------- hero */}
+        <section className="hero" id="top">
+          <div className="stage">
+            <Parallax />
+            <HeroClutter />
+
+            <div className="hero-copy">
+              <p className="eyebrow">windows · mac · linux</p>
+              <h1 className="wordmark">flicky</h1>
+              <p className="lead">an ai buddy that lives on your desktop.</p>
+              <div className="cta">
+                <a
+                  className="btn primary"
+                  id="cta-win"
+                  href={RELEASES}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <WinLogo className="btn-glyph" />
+                  download for windows
+                </a>
+                <a
+                  className="btn ghost"
+                  href={RELEASES}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <AppleGlyph className="btn-glyph" />
+                  download for mac
+                </a>
+                <a
+                  className="btn text"
+                  href={RELEASES}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  linux (.AppImage / .deb)
+                </a>
+              </div>
+              <p className="tiny">100% free · open source · bring your own keys</p>
+            </div>
+
+            <PointAt target="#cta-win" label="click here!" delay={1200} />
           </div>
-          <p className="tiny">Free · MIT licensed · bring your own API keys</p>
-        </div>
 
-        <div className="hero-visual" aria-hidden="true">
           <div className="hero-video">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/ezgif-4d0919e059322ece.gif" alt="Flicky demo" />
+            <HeroVideo />
           </div>
-        </div>
-      </section>
-
-      <section className="what" id="what">
-        <h2>What it actually does.</h2>
-        <div className="what-grid">
-          {STEPS.map((s) => (
-            <article key={s.n}>
-              <div className="step">{s.n}</div>
-              <h3>{s.t}</h3>
-              <p>{s.d}</p>
-            </article>
-          ))}
-        </div>
-      </section>
-
-      <section className="rail">
-        <div className="rail-col">
-          <h3>Local by default.</h3>
-          <p>
-            Every chat is stored on your machine. Keys are encrypted at rest. Nothing
-            lives on our servers — because there aren&apos;t any.
-          </p>
-        </div>
-        <div className="rail-col">
-          <h3>Your choice of brain.</h3>
-          <p>
-            Flip between <span className="mono">Claude Sonnet / Opus 4.6</span> and{' '}
-            <span className="mono">GPT-5 / GPT-5 mini / GPT-4o</span> any time. Reasoning
-            depth is a slider.
-          </p>
-        </div>
-        <div className="rail-col">
-          <h3>Won&apos;t run out of context.</h3>
-          <p>
-            As conversations get long, Flicky auto-compacts older messages into a summary.
-            A single chat can run forever.
-          </p>
-        </div>
-      </section>
-
-      <section className="get" id="get">
-        <h2>Get Flicky.</h2>
-        <p className="get-lead">
-          Downloads are built and signed from every tagged release on GitHub. Pick your
-          platform.
-        </p>
-
-        <div className="downloads">
-          {DOWNLOADS.map((d) => (
-            <a key={d.os} className="dl" href={RELEASES} target="_blank" rel="noopener noreferrer">
-              <div className="os">{d.os}</div>
-              <div className="sub">{d.sub}</div>
-              <div className="arr-lg">↓ {d.ext || 'latest'}</div>
-            </a>
-          ))}
-        </div>
+        </section>
 
-        <p className="keys">
-          You&apos;ll need your own API keys for the providers you want to use —{' '}
-          <span className="mono">Anthropic</span> or <span className="mono">OpenAI</span>,{' '}
-          <span className="mono">ElevenLabs</span>, and <span className="mono">Groq</span>.
-          Add them in the app. They never leave your machine.
-        </p>
-      </section>
-
-      <section className="credit">
-        <div className="credit-inner">
-          <p className="credit-label">Credit where it&apos;s due.</p>
-          <p>
-            Flicky is an independent, cross-platform reimagining of{' '}
-            <a href="https://www.clicky.so/" target="_blank" rel="noopener noreferrer">Clicky</a>{' '}
-            by{' '}
-            <a href="https://github.com/farzaa" target="_blank" rel="noopener noreferrer">Farza</a>{' '}
-            — the original macOS app that invented the hold-a-hotkey, get-a-pointing-cursor
-            interaction. Every bit of that vibe is his. Flicky rebuilds the same idea in
-            Electron so people on Windows and Linux can try it too.
-          </p>
-          <p>
-            If you liked Flicky, also go star{' '}
-            <a href="https://github.com/farzaa/clicky" target="_blank" rel="noopener noreferrer">
-              farzaa/clicky
-            </a>.
-          </p>
-        </div>
-      </section>
+        {/* --------------------------------------------------------- dream */}
+        <section className="section dream">
+          <span className="kao float-kao a">( ˶ˆ ᗜ ˆ˵ )</span>
+          <span className="kao float-kao b">(•_•)</span>
+          <Win title="readme.txt" icon={<TextFileIcon />} width="620px" className="notepad center">
+            <p>
+              the models got really good, and we&apos;re all still typing at them in a chat box
+              in a browser tab. that felt backwards.
+            </p>
+            <p>
+              so we put one on your screen instead. it looks at what you&apos;re doing, talks
+              back out loud, and points at the thing it&apos;s talking about — no pasting
+              screenshots, no describing where the button is.
+            </p>
+            <p>
+              flicky is a from-scratch, cross-platform take on{' '}
+              <a href={FARZA} target="_blank" rel="noopener noreferrer">farza</a>&apos;s{' '}
+              <a href={CLICKY} target="_blank" rel="noopener noreferrer">clicky</a>, built by{' '}
+              <a href={JULIO} target="_blank" rel="noopener noreferrer">julio</a> so the rest of
+              us get one too.
+            </p>
+          </Win>
+        </section>
 
-      <footer>
-        <div className="foot-brand">
-          <Mark className="brand-mark sm" />
-          <span>Flicky</span>
-        </div>
-        <div className="foot-links">
-          <a href={REPO} target="_blank" rel="noopener noreferrer">GitHub</a>
-          <a href={`${REPO}/releases`} target="_blank" rel="noopener noreferrer">Releases</a>
-          <a href={`${REPO}/issues`} target="_blank" rel="noopener noreferrer">Issues</a>
-        </div>
-        <div className="foot-note">
-          Made by{' '}
-          <a href="https://github.com/jvaught01" target="_blank" rel="noopener noreferrer">
-            Julio
-          </a>
-          . Inspired by{' '}
-          <a href="https://github.com/farzaa" target="_blank" rel="noopener noreferrer">
-            Farza
-          </a>
-          .
+        {/* -------------------------------------------------- how it works */}
+        <section className="section how" id="how">
+          <h2 className="sec-head">how it works</h2>
+          <div className="rows">
+            {STEPS.map((s, i) => (
+              <div className={`row${i % 2 ? ' flip' : ''}`} key={s.n}>
+                <div className="row-win">
+                  <Win title={`step-${s.n}`} icon={<Mark />}>
+                    {s.mock}
+                  </Win>
+                </div>
+                <div className="row-say">
+                  <span className="chip">
+                    <Mark className="chip-mark" />
+                    flicky
+                  </span>
+                  <div className="bubble">
+                    <h3>
+                      <span className="row-n">{s.n}</span> {s.t}
+                    </h3>
+                    <p>{s.d}</p>
+                  </div>
+                </div>
+                {s.n === '04' ? (
+                  <PointAt target=".dialog-title" label="this one!" side="left" />
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* ------------------------------------------------------ marquee */}
+        <div className="marq" aria-hidden="true">
+          <div className="marq-track">
+            <MarqueeRun k="a" />
+            <MarqueeRun k="b" />
+          </div>
         </div>
-      </footer>
-    </main>
+
+        {/* ------------------------------------------------------ features */}
+        <section className="section" id="features">
+          <h2 className="sec-head">what you get</h2>
+          <div className="feat-grid">
+            {FEATURES.map((f) => (
+              <Win key={f.file} title={f.file} icon={<TextFileIcon />} className="feat">
+                <span className="feat-n">{f.n}</span>
+                <h3>{f.t}</h3>
+                <p>{f.d}</p>
+              </Win>
+            ))}
+          </div>
+        </section>
+
+        {/* ----------------------------------------------------- get flicky */}
+        <section className="section" id="get">
+          <div className="getcard">
+            <span className="free-tag">free</span>
+            <h2>get flicky.</h2>
+            <p className="get-sub">
+              100% free. every tagged release is built and published on github.
+            </p>
+            <div className="dl-grid">
+              {DOWNLOADS.map((d) => (
+                <Win key={d.file} title={d.file} icon={d.icon} className="dl-win">
+                  <div className="dl-os">{d.os}</div>
+                  <div className="dl-detail">{d.detail}</div>
+                  <a
+                    className="btn primary sm"
+                    id={d.id}
+                    href={RELEASES}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    download
+                  </a>
+                </Win>
+              ))}
+            </div>
+            <p className="get-keys">
+              you&apos;ll need keys for anthropic or openai (or none, with a local model), groq
+              for speech-to-text, and optionally elevenlabs for a voice. add them in the app —
+              they never leave your machine.
+            </p>
+            <PointAt target="#dl-windows" label="over here!" />
+          </div>
+        </section>
+
+        {/* ----------------------------------------------------- questions */}
+        <section className="section" id="faq">
+          <h2 className="sec-head">questions</h2>
+          <Win title="questions.txt" icon={<TextFileIcon />} width="760px" className="faq center">
+            <details>
+              <summary>is it private?</summary>
+              <p>
+                yes. everything runs locally — your chats stay on your machine and your api keys
+                are encrypted at rest. there is no flicky backend for anything to be sent to. the
+                only network calls are the ones you configure, straight to the providers you
+                picked.
+              </p>
+            </details>
+            <details>
+              <summary>what does it cost?</summary>
+              <p>
+                nothing. flicky is free and mit licensed. you pay your model and voice providers
+                directly for what you use — and if you run a local model through ollama or lm
+                studio, that part costs nothing at all.
+              </p>
+            </details>
+            <details>
+              <summary>does it work on windows?</summary>
+              <p>
+                yes — that&apos;s the whole point of this project. hold-to-talk, the tray
+                behaviour, the mic permission flow and the setup wizard were all built and tested
+                on windows, not bolted on afterwards. linux works too.
+              </p>
+            </details>
+            <details>
+              <summary>how is this different from clicky?</summary>
+              <p>
+                <a href={CLICKY} target="_blank" rel="noopener noreferrer">clicky</a> is{' '}
+                <a href={FARZA} target="_blank" rel="noopener noreferrer">farza</a>&apos;s
+                original macos app and the whole inspiration — he invented this interaction.
+                flicky is an independent electron rebuild so windows and linux folks can have it
+                too. if you&apos;re on a mac, go use{' '}
+                <a href={`${FARZA}/clicky`} target="_blank" rel="noopener noreferrer">clicky</a>.
+              </p>
+            </details>
+            <details>
+              <summary>do i need an account?</summary>
+              <p>
+                no — no sign-up, no server, no telemetry by default. download it, add your own
+                keys, done.
+              </p>
+            </details>
+          </Win>
+        </section>
+
+        {/* -------------------------------------------------------- credit */}
+        <section className="section">
+          <Win title="★ credit.md" icon={<TextFileIcon />} width="720px" className="credit center">
+            <p className="credit-label">credit where it&apos;s due</p>
+            <p>
+              Flicky is an independent, cross-platform reimagining of{' '}
+              <a href={CLICKY} target="_blank" rel="noopener noreferrer">Clicky</a>{' '}
+              by{' '}
+              <a href={FARZA} target="_blank" rel="noopener noreferrer">Farza</a>{' '}
+              — the original macOS app that invented the hold-a-hotkey, get-a-pointing-cursor
+              interaction. Every bit of that vibe is his. Flicky rebuilds the same idea in
+              Electron so people on Windows and Linux can try it too.
+            </p>
+            <p>
+              If you liked Flicky, also go star{' '}
+              <a href={`${FARZA}/clicky`} target="_blank" rel="noopener noreferrer">
+                farzaa/clicky
+              </a>.
+            </p>
+          </Win>
+        </section>
+
+        {/* -------------------------------------------------------- footer */}
+        <footer>
+          <div className="foot-links">
+            <a href={REPO} target="_blank" rel="noopener noreferrer">GitHub</a>
+            <a href={`${REPO}/releases`} target="_blank" rel="noopener noreferrer">Releases</a>
+            <a href={`${REPO}/issues`} target="_blank" rel="noopener noreferrer">Issues</a>
+          </div>
+          <div className="foot-note">
+            made by{' '}
+            <a href={JULIO} target="_blank" rel="noopener noreferrer">Julio</a>
+            {' · '}inspired by{' '}
+            <a href={FARZA} target="_blank" rel="noopener noreferrer">Farza</a>
+            &apos;s clicky · mit licensed
+          </div>
+          <div className="kao" aria-hidden="true">( ˶ˆ ᗜ ˆ˵ )</div>
+        </footer>
+      </main>
+      <Taskbar />
+    </>
   );
 }