From 9add5e57f323e707de2b974c53f11f2c0a164f19 Mon Sep 17 00:00:00 2001
From: jvaught01 <juliovaught@yahoo.com>
Date: Thu, 10 Sep 2026 14:11:26 -0700
Subject: [PATCH] feat(landing): redesign as a Windows 11 desktop, light mode +
 dark toggle

The page is now a desktop: dotted wallpaper with a blue bloom, a
bottom taskbar as the nav (start, flicky.exe, GitHub, releases, theme
toggle, live clock), desktop icons top-left as section links, and every
content block in a Windows-11 window. Hero is a plain lowercase
wordmark surrounded by parallax desktop clutter (sticky note, toast,
overlay replica, walkthrough window, kaomoji, files). The blue Flicky
cursor flies to and points at page elements on scroll, mirroring the
app's own overlay.

Light mode default with a persisted, flash-free dark toggle. Copy
updated for v1.2.1 (local models, auto-type, stream window, setup
wizard), repo links moved to pango07/flicky, demo uses the mp4. Clicky
/ Farza attribution kept verbatim in credit.md and the footer.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XSbPaf2fxjrLNjNnn68bXW
---
 landing/README.md                       |    2 +-
 landing/app/components/Clock.tsx        |   31 +
 landing/app/components/DesktopIcons.tsx |   40 +
 landing/app/components/HeroClutter.tsx  |   79 ++
 landing/app/components/HeroVideo.tsx    |   49 +
 landing/app/components/Icons.tsx        |  149 +++
 landing/app/components/Mockups.tsx      |   86 ++
 landing/app/components/Parallax.tsx     |   44 +
 landing/app/components/PointAt.tsx      |  132 +++
 landing/app/components/Taskbar.tsx      |   58 +
 landing/app/components/ThemeToggle.tsx  |   80 ++
 landing/app/components/Win.tsx          |   44 +
 landing/app/globals.css                 | 1448 ++++++++++++++++++-----
 landing/app/layout.tsx                  |   30 +-
 landing/app/page.tsx                    |  516 +++++---
 15 files changed, 2336 insertions(+), 452 deletions(-)
 create mode 100644 landing/app/components/Clock.tsx
 create mode 100644 landing/app/components/DesktopIcons.tsx
 create mode 100644 landing/app/components/HeroClutter.tsx
 create mode 100644 landing/app/components/HeroVideo.tsx
 create mode 100644 landing/app/components/Icons.tsx
 create mode 100644 landing/app/components/Mockups.tsx
 create mode 100644 landing/app/components/Parallax.tsx
 create mode 100644 landing/app/components/PointAt.tsx
 create mode 100644 landing/app/components/Taskbar.tsx
 create mode 100644 landing/app/components/ThemeToggle.tsx
 create mode 100644 landing/app/components/Win.tsx

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 />
+    </>
   );
 }