From 4224f9132dcda556c6db4ba02ef88ba8913e3988 Mon Sep 17 00:00:00 2001
From: Nathanial Henniges <19924836+nathanialhenniges@users.noreply.github.com>
Date: Wed, 15 Apr 2026 03:41:12 -0500
Subject: [PATCH 1/3] feat(docs): 2026 marketing redesign of landing page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Editorial tech-luxe aesthetic — kinetic hero, liquid-glass now-playing
frame, infinite integration ticker, asymmetric bento features with live
Twitch chat mock, diagonal 3-step flow, terminal dev card, giant CTA.

- layout.tsx: add JetBrains Mono + Instrument Serif fonts
- global.css: mesh bg, grid lines, noise, kinetic headline, liquid-glass,
  ticker marquee, shimmer btn, bento cards, terminal window, reduced-motion
- page.tsx: full rewrite into 6 sections, v2.0 song-requests teaser

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/docs/app/(home)/page.tsx | 704 +++++++++++++++++++++++-----------
 apps/docs/app/global.css      | 382 ++++++++++++++++++
 apps/docs/app/layout.tsx      |  18 +-
 3 files changed, 880 insertions(+), 224 deletions(-)

diff --git a/apps/docs/app/(home)/page.tsx b/apps/docs/app/(home)/page.tsx
index 32cd08f..8919368 100644
--- a/apps/docs/app/(home)/page.tsx
+++ b/apps/docs/app/(home)/page.tsx
@@ -1,13 +1,22 @@
 import Link from "next/link";
-import { MessageSquare, Radio, Wifi, Shield, Download, ArrowRight, Github } from "lucide-react";
+import {
+  MessageSquare,
+  Radio,
+  Wifi,
+  Shield,
+  Download,
+  ArrowRight,
+  Github,
+  Sparkles,
+  Music,
+} from "lucide-react";
 import { getAssetPath } from "@/lib/utils";
 
-// Pulsing "Now Playing" card mockup
+// ── Pulsing "Now Playing" card mockup ──
 function NowPlayingCard() {
   return (
     <div className="now-playing-pulse now-playing-card-bg rounded-2xl border border-violet-500/30 p-4 w-64 shrink-0">
       <div className="flex items-center gap-3 mb-3">
-        {/* Album art placeholder */}
         <div
           className="w-12 h-12 rounded-lg shrink-0"
           style={{
@@ -22,7 +31,6 @@ function NowPlayingCard() {
           <p className="text-hero-muted text-xs truncate">DevBowzer</p>
         </div>
       </div>
-      {/* Progress bar */}
       <div className="h-1 rounded-full bg-black/10 dark:bg-white/10">
         <div
           className="h-1 rounded-full"
@@ -40,192 +48,417 @@ function NowPlayingCard() {
   );
 }
 
-const features = [
-  {
-    icon: MessageSquare,
-    title: "Twitch Chat Bot",
-    description:
-      "!song in chat shows exactly what's playing. Powered by Twitch's modern EventSub API.",
-    accent: "#7c3aed",
-  },
-  {
-    icon: Radio,
-    title: "Discord Status",
-    description:
-      "Show \"Listening to Apple Music\" with album art and live progress. Like Spotify — but your library.",
-    accent: "#22d3ee",
-  },
-  {
-    icon: Wifi,
-    title: "Stream Overlay",
-    description:
-      "Live now-playing data over WebSocket. Drop it into OBS, browser source, or your custom widget.",
-    accent: "#a855f7",
-  },
-  {
-    icon: Shield,
-    title: "Privacy First",
-    description:
-      "All tokens in macOS Keychain. App Sandboxed. Nothing phoned home. Your music stays yours.",
-    accent: "#7c3aed",
-  },
-] as const;
+// ── Live wire waveform (hero backdrop) ──
+function LiveWire() {
+  return (
+    <svg
+      className="live-wire absolute inset-0 w-full h-full pointer-events-none"
+      viewBox="0 0 800 400"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="wire-grad" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0%" stopColor="#7c3aed" stopOpacity="0" />
+          <stop offset="30%" stopColor="#a855f7" stopOpacity="0.7" />
+          <stop offset="70%" stopColor="#22d3ee" stopOpacity="0.7" />
+          <stop offset="100%" stopColor="#22d3ee" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M 0 200 Q 100 80, 200 200 T 400 200 T 600 200 T 800 200"
+        stroke="url(#wire-grad)"
+        strokeWidth="2"
+        fill="none"
+      />
+      <path
+        d="M 0 220 Q 120 340, 240 220 T 480 220 T 720 220 T 800 220"
+        stroke="url(#wire-grad)"
+        strokeWidth="1.5"
+        fill="none"
+        opacity="0.5"
+      />
+    </svg>
+  );
+}
+
+// ── Bento feature data ──
+const tickerItems = [
+  "APPLE MUSIC",
+  "TWITCH",
+  "DISCORD",
+  "OBS",
+  "SONG REQUESTS",
+  "WEBSOCKET API",
+  "MENU BAR",
+  "OPEN SOURCE",
+];
 
 const steps = [
   {
-    number: "1",
+    number: "01",
     title: "Download",
-    description: "Grab the DMG from GitHub Releases. Under 10MB.",
+    description: "Grab the DMG from GitHub Releases. 3.7MB — under a second on any connection.",
   },
   {
-    number: "2",
+    number: "02",
     title: "Connect",
-    description: "One-time setup wizard links Twitch, Discord, and OBS.",
+    description: "One-time wizard links Twitch, Discord, and your overlay. No terminal.",
   },
   {
-    number: "3",
+    number: "03",
     title: "Stream",
-    description: "Hit play. Everything updates automatically.",
+    description: "Hit play in Apple Music. Chat, Discord, overlay — everything updates live.",
   },
 ] as const;
 
 export default function HomePage() {
   return (
-    <main className="flex-1 bg-midnight text-hero">
-      {/* Hero */}
-      <section className="relative overflow-hidden px-6 pt-24 pb-16 sm:pt-32 sm:pb-24">
-        <div className="hero-glow" aria-hidden="true" />
-        <div className="mx-auto max-w-5xl relative z-10">
-          <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
-            {/* Left: text */}
-            <div className="flex-1 text-center lg:text-left">
-              {/* Version badge */}
-              <div className="version-badge inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium mb-6">
-                <span className="w-1.5 h-1.5 rounded-full bg-violet-400 animate-pulse inline-block" />
-                v1.2.0 — Free &amp; Open Source
-              </div>
-
-              <h1
-                className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.08] mb-6"
-                style={{ fontFamily: "var(--font-unbounded)" }}
-              >
-                <span className="gradient-text">Your Music,</span>
-                <br />
-                <span className="text-hero">Live Everywhere.</span>
-              </h1>
+    <main className="flex-1 text-hero">
+      {/* ═══════════════ HERO ═══════════════ */}
+      <section className="mesh-bg grid-lines noise relative overflow-hidden">
+        <LiveWire />
+        <div className="relative z-10 px-6 pt-20 pb-24 sm:pt-28 sm:pb-32">
+          <div className="mx-auto max-w-6xl">
+            <div className="hero-stagger flex flex-col lg:grid lg:grid-cols-12 gap-10 lg:gap-16 items-start">
+              {/* LEFT — type column */}
+              <div className="lg:col-span-8">
+                {/* Mono kicker */}
+                <div className="mono-kicker flex flex-wrap items-center gap-3 text-violet-300 dark:text-violet-300 mb-8">
+                  <span className="inline-flex items-center gap-2">
+                    <span className="w-1.5 h-1.5 rounded-full bg-violet-400 animate-pulse" />
+                    V1.2.0
+                  </span>
+                  <span className="opacity-40">/</span>
+                  <span>MACOS 26+</span>
+                  <span className="opacity-40">/</span>
+                  <span>FREE FOREVER</span>
+                  <span className="opacity-40">/</span>
+                  <span>OPEN SOURCE</span>
+                </div>
 
-              <p className="text-hero-muted text-lg leading-relaxed max-w-md mx-auto lg:mx-0 mb-8"
-                style={{ fontFamily: "var(--font-instrument)" }}>
-                macOS menu bar app. Apple Music plays — Twitch chat, Discord,
-                and your stream overlay all update. Automatically.
-              </p>
+                {/* Kinetic headline */}
+                <h1 className="kinetic-headline mb-8">
+                  <span className="block text-hero">YOUR MUSIC,</span>
+                  <span className="block">
+                    <span className="kinetic-gradient">live</span>{" "}
+                    <span className="serif-em text-hero">everywhere</span>
+                    <span className="kinetic-gradient">.</span>
+                  </span>
+                </h1>
 
-              <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3">
-                <Link
-                  href="/docs/installation"
-                  className="btn-primary w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02] active:scale-[0.98]"
-                >
-                  <Download className="w-4 h-4" />
-                  Get Started Free
-                </Link>
-                <a
-                  href="https://github.com/mrdemonwolf/wolfwave"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="btn-secondary w-full sm:w-auto inline-flex items-center justify-center gap-2 px-7 py-3 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02]"
+                {/* Sub */}
+                <p
+                  className="text-hero-muted text-lg sm:text-xl leading-relaxed max-w-xl mb-10"
+                  style={{ fontFamily: "var(--font-instrument)" }}
                 >
-                  <Github className="w-4 h-4" />
-                  View on GitHub
-                </a>
+                  A tiny macOS menu bar app. Apple Music plays — Twitch chat, Discord
+                  Rich Presence, and your stream overlay update automatically. No
+                  account. No subscription. No phoning home.
+                </p>
+
+                {/* CTAs */}
+                <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+                  <Link
+                    href="/docs/installation"
+                    className="shimmer-btn btn-primary inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl text-sm font-semibold transition-transform hover:scale-[1.02] active:scale-[0.98]"
+                  >
+                    <Download className="w-4 h-4 relative z-10" />
+                    <span className="relative z-10">Download — 3.7MB</span>
+                  </Link>
+                  <a
+                    href="https://github.com/mrdemonwolf/wolfwave"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="btn-secondary inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02]"
+                  >
+                    <Github className="w-4 h-4" />
+                    View on GitHub
+                  </a>
+                  <Link
+                    href="/docs"
+                    className="inline-flex items-center justify-center gap-1.5 px-4 py-3.5 text-sm font-semibold text-hero-muted hover:text-hero transition-colors"
+                  >
+                    Read the Docs
+                    <ArrowRight className="w-3.5 h-3.5" />
+                  </Link>
+                </div>
               </div>
-            </div>
 
-            {/* Right: visual */}
-            <div className="flex flex-col items-center gap-6 shrink-0">
-              <NowPlayingCard />
+              {/* RIGHT — liquid glass showcase */}
+              <div className="lg:col-span-4 w-full flex justify-center lg:justify-end">
+                <div className="corners liquid-glass relative rounded-3xl p-6 w-full max-w-sm">
+                  {/* Mono labels */}
+                  <div className="flex items-center justify-between mb-5">
+                    <span className="mono-label text-hero-muted inline-flex items-center gap-1.5">
+                      <span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
+                      LIVE
+                    </span>
+                    <span className="mono-label text-hero-subtle">MENU.BAR</span>
+                  </div>
+                  <div className="flex justify-center mb-4">
+                    <NowPlayingCard />
+                  </div>
+                  {/* Faux broadcast targets */}
+                  <div className="flex items-center justify-between pt-4 mt-2 border-t border-white/5">
+                    <div className="flex items-center gap-2">
+                      <div className="w-7 h-7 rounded-lg bg-[#9146FF]/20 inline-flex items-center justify-center">
+                        <MessageSquare className="w-3.5 h-3.5 text-[#9146FF]" />
+                      </div>
+                      <div className="w-7 h-7 rounded-lg bg-[#5865F2]/20 inline-flex items-center justify-center">
+                        <Radio className="w-3.5 h-3.5 text-[#5865F2]" />
+                      </div>
+                      <div className="w-7 h-7 rounded-lg bg-cyan-400/20 inline-flex items-center justify-center">
+                        <Wifi className="w-3.5 h-3.5 text-cyan-400" />
+                      </div>
+                    </div>
+                    <span className="mono-label text-hero-subtle">→ 3 OUTPUTS</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </section>
 
-      {/* Proof bar */}
-      <div className="proof-bar px-6 py-4">
-        <div className="mx-auto max-w-5xl flex flex-wrap items-center justify-center gap-3">
-          {["Free Forever", "macOS 26+", "No Account Needed", "~3.7MB", "Open Source"].map((pill) => (
-            <span
-              key={pill}
-              className="proof-pill text-xs font-medium px-3 py-1 rounded-full"
-            >
-              {pill}
+      {/* ═══════════════ TICKER ═══════════════ */}
+      <div className="ticker bg-ink">
+        <div className="ticker-track">
+          {[...tickerItems, ...tickerItems, ...tickerItems].map((item, i) => (
+            <span key={i} className="ticker-item">
+              {item}
+              <span className="ticker-dot" />
             </span>
           ))}
         </div>
       </div>
 
-      {/* Features */}
-      <section className="px-6 py-20 bg-midnight">
-        <div className="mx-auto max-w-5xl">
-          <h2
-            className="text-2xl sm:text-3xl font-bold text-center mb-3 text-hero"
-            style={{ fontFamily: "var(--font-unbounded)" }}
-          >
-            Everything a streamer needs
-          </h2>
-          <p className="text-center text-hero-subtle text-sm mb-12">
-            One app. Four integrations. Zero monthly fees.
-          </p>
-          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
-            {features.map((feature) => (
-              <div
-                key={feature.title}
-                className="feature-card bg-midnight-card group p-5 rounded-2xl transition-all"
+      {/* ═══════════════ BENTO FEATURES ═══════════════ */}
+      <section className="bg-ink px-6 py-24 sm:py-32 relative">
+        <div className="mx-auto max-w-6xl">
+          {/* Section header */}
+          <div className="mb-14 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
+            <div>
+              <div className="mono-kicker text-violet-400 mb-3">◉ 04 / FEATURES</div>
+              <h2
+                className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[0.95] text-hero max-w-2xl"
+                style={{ fontFamily: "var(--font-unbounded)", letterSpacing: "-0.03em" }}
               >
-                <div
-                  className="w-10 h-10 rounded-xl inline-flex items-center justify-center mb-4"
-                  style={{ backgroundColor: `${feature.accent}18`, color: feature.accent }}
+                One app.<br />
+                <span className="kinetic-gradient">Four integrations.</span><br />
+                Zero fees.
+              </h2>
+            </div>
+            <p
+              className="text-hero-muted text-sm max-w-xs sm:text-right"
+              style={{ fontFamily: "var(--font-instrument)" }}
+            >
+              Built native with Swift + AppKit. No Electron. No analytics. No
+              cloud. Your music never leaves your Mac.
+            </p>
+          </div>
+
+          {/* Bento grid */}
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-5">
+            {/* WIDE — Twitch */}
+            <div className="bento-card md:col-span-7 md:row-span-2 min-h-[280px] flex flex-col justify-between">
+              <div>
+                <div className="mono-label text-[#9146FF] mb-4 flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-[#9146FF] animate-pulse" />
+                  TWITCH EVENTSUB
+                </div>
+                <h3
+                  className="text-2xl sm:text-3xl font-bold text-hero mb-3"
+                  style={{ fontFamily: "var(--font-unbounded)" }}
                 >
-                  <feature.icon className="w-5 h-5" />
+                  Chat knows what you&apos;re playing.
+                </h3>
+                <p
+                  className="text-hero-muted text-sm leading-relaxed max-w-md mb-6"
+                  style={{ fontFamily: "var(--font-instrument)" }}
+                >
+                  Viewers type <code className="text-violet-300 bg-violet-500/10 px-1.5 py-0.5 rounded text-xs">!song</code>.
+                  The bot answers with exactly what&apos;s playing in Apple Music — title,
+                  artist, album. Under 100ms.
+                </p>
+              </div>
+              {/* Chat mock */}
+              <div
+                className="rounded-xl bg-black/30 border border-white/5 p-4 font-mono text-xs space-y-2"
+                style={{ fontFamily: "var(--font-mono)" }}
+              >
+                <div className="chat-line flex gap-2">
+                  <span className="text-[#9146FF] font-bold">DevBowzer</span>
+                  <span className="text-hero-muted">!song</span>
+                </div>
+                <div className="chat-line flex gap-2">
+                  <span className="text-cyan-400 font-bold">WolfWave</span>
+                  <span className="text-hero">
+                    Now playing:{" "}
+                    <span className="text-violet-300">Kbps Plz</span> — DevBowzer
+                  </span>
+                </div>
+                <div className="chat-line flex gap-2">
+                  <span className="text-[#9146FF] font-bold">viewer_42</span>
+                  <span className="text-hero-muted">this slaps 🔥</span>
+                </div>
+              </div>
+            </div>
+
+            {/* TALL — Discord */}
+            <div className="bento-card md:col-span-5 md:row-span-2 min-h-[280px] flex flex-col justify-between">
+              <div>
+                <div className="mono-label text-[#5865F2] mb-4 flex items-center gap-2">
+                  <span className="w-1.5 h-1.5 rounded-full bg-[#5865F2] animate-pulse" />
+                  DISCORD RPC
                 </div>
-                <h3 className="font-bold text-sm text-hero mb-2">
-                  {feature.title}
+                <h3
+                  className="text-2xl sm:text-3xl font-bold text-hero mb-3"
+                  style={{ fontFamily: "var(--font-unbounded)" }}
+                >
+                  Rich Presence, your library.
                 </h3>
-                <p className="text-xs text-hero-subtle leading-relaxed"
-                  style={{ fontFamily: "var(--font-instrument)" }}>
-                  {feature.description}
+                <p
+                  className="text-hero-muted text-sm leading-relaxed mb-6"
+                  style={{ fontFamily: "var(--font-instrument)" }}
+                >
+                  Friends see &ldquo;Listening to Apple Music&rdquo; with album
+                  art and live progress. Like Spotify — but your full library.
                 </p>
               </div>
-            ))}
+              {/* RPC mock */}
+              <div className="rounded-xl bg-black/30 border border-white/5 p-4">
+                <div className="mono-label text-hero-subtle mb-3">LISTENING TO APPLE MUSIC</div>
+                <div className="flex gap-3 items-center">
+                  <div
+                    className="w-14 h-14 rounded-lg shrink-0"
+                    style={{ background: "linear-gradient(135deg, #22d3ee, #7c3aed)" }}
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="text-hero text-sm font-semibold truncate">Kbps Plz</p>
+                    <p className="text-hero-muted text-xs truncate">DevBowzer</p>
+                    <div className="h-1 rounded-full bg-white/10 mt-2">
+                      <div
+                        className="h-1 rounded-full"
+                        style={{
+                          width: "62%",
+                          background: "linear-gradient(to right, #5865F2, #22d3ee)",
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* SMALL — Overlay */}
+            <div className="bento-card md:col-span-4">
+              <div className="mono-label text-cyan-400 mb-4 flex items-center gap-2">
+                <Wifi className="w-3 h-3" />
+                WEBSOCKET
+              </div>
+              <h3
+                className="text-lg font-bold text-hero mb-2"
+                style={{ fontFamily: "var(--font-unbounded)" }}
+              >
+                Stream overlay
+              </h3>
+              <p
+                className="text-hero-muted text-xs leading-relaxed"
+                style={{ fontFamily: "var(--font-instrument)" }}
+              >
+                Drop into OBS. Browser source. Or roll your own widget in 20
+                lines of HTML.
+              </p>
+            </div>
+
+            {/* SMALL — Privacy */}
+            <div className="bento-card md:col-span-4">
+              <div className="mono-label text-violet-400 mb-4 flex items-center gap-2">
+                <Shield className="w-3 h-3" />
+                KEYCHAIN
+              </div>
+              <h3
+                className="text-lg font-bold text-hero mb-2"
+                style={{ fontFamily: "var(--font-unbounded)" }}
+              >
+                Privacy first
+              </h3>
+              <p
+                className="text-hero-muted text-xs leading-relaxed"
+                style={{ fontFamily: "var(--font-instrument)" }}
+              >
+                Tokens in macOS Keychain. App Sandboxed. No telemetry. Ever.
+              </p>
+            </div>
+
+            {/* SMALL — Song Requests (v2 teaser) */}
+            <div className="bento-card md:col-span-4 relative">
+              <div className="absolute top-4 right-4 mono-label text-cyan-300 bg-cyan-400/10 border border-cyan-400/30 px-2 py-0.5 rounded-full">
+                V2.0
+              </div>
+              <div className="mono-label text-cyan-400 mb-4 flex items-center gap-2">
+                <Sparkles className="w-3 h-3" />
+                INCOMING
+              </div>
+              <h3
+                className="text-lg font-bold text-hero mb-2"
+                style={{ fontFamily: "var(--font-unbounded)" }}
+              >
+                Song requests
+              </h3>
+              <p
+                className="text-hero-muted text-xs leading-relaxed"
+                style={{ fontFamily: "var(--font-instrument)" }}
+              >
+                Viewers queue tracks via chat. Approve, skip, block. Coming in
+                v2.0.
+              </p>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* How it works */}
-      <section className="px-6 py-20 bg-midnight-alt">
-        <div className="mx-auto max-w-3xl">
-          <h2
-            className="text-2xl sm:text-3xl font-bold text-center mb-3 text-hero"
-            style={{ fontFamily: "var(--font-unbounded)" }}
-          >
-            Up and running in 3 steps
-          </h2>
-          <p className="text-center text-hero-subtle text-sm mb-14">
-            No terminal. No config files. Just click through the wizard.
-          </p>
-          <div className="grid sm:grid-cols-3 gap-8">
-            {steps.map((step) => (
-              <div key={step.number} className="text-center group">
+      {/* ═══════════════ FLOW (3 steps) ═══════════════ */}
+      <section className="bg-ink px-6 py-24 sm:py-32 relative border-t border-white/5">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-16 text-center">
+            <div className="mono-kicker text-violet-400 mb-3">◉ 03 / GETTING STARTED</div>
+            <h2
+              className="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-hero"
+              style={{ fontFamily: "var(--font-unbounded)", letterSpacing: "-0.03em" }}
+            >
+              Running in{" "}
+              <span className="serif-em kinetic-gradient" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400 }}>
+                sixty
+              </span>{" "}
+              seconds.
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-6 relative">
+            {steps.map((step, i) => (
+              <div
+                key={step.number}
+                className="bento-card"
+                style={{ transform: i === 1 ? "translateY(1.5rem)" : i === 2 ? "translateY(3rem)" : undefined }}
+              >
                 <div
-                  className="step-badge w-14 h-14 rounded-2xl inline-flex items-center justify-center text-xl font-bold text-white mb-5 transition-transform group-hover:scale-110"
-                  style={{ fontFamily: "var(--font-unbounded)" }}
+                  className="mono-kicker text-violet-400 mb-4"
+                  style={{ fontSize: "3rem", letterSpacing: "-0.04em", opacity: 0.3, lineHeight: 1 }}
                 >
                   {step.number}
                 </div>
-                <h3 className="font-bold text-base text-hero mb-2"
-                  style={{ fontFamily: "var(--font-unbounded)" }}>
+                <h3
+                  className="text-xl font-bold text-hero mb-2"
+                  style={{ fontFamily: "var(--font-unbounded)" }}
+                >
                   {step.title}
                 </h3>
-                <p className="text-sm text-hero-subtle leading-relaxed"
-                  style={{ fontFamily: "var(--font-instrument)" }}>
+                <p
+                  className="text-sm text-hero-muted leading-relaxed"
+                  style={{ fontFamily: "var(--font-instrument)" }}
+                >
                   {step.description}
                 </p>
               </div>
@@ -234,94 +467,121 @@ export default function HomePage() {
         </div>
       </section>
 
-      {/* For Developers */}
-      <section className="px-6 py-20 bg-midnight">
-        <div className="mx-auto max-w-3xl">
-          <div className="dev-card rounded-2xl p-8">
-            <div className="flex items-start gap-4">
-              <div
-                className="w-10 h-10 rounded-xl shrink-0 inline-flex items-center justify-center"
-                style={{ background: "linear-gradient(135deg, #7c3aed, #22d3ee)" }}
+      {/* ═══════════════ DEV TERMINAL ═══════════════ */}
+      <section className="bg-ink px-6 py-24 sm:py-32 relative border-t border-white/5">
+        <div className="mx-auto max-w-5xl">
+          <div className="grid md:grid-cols-5 gap-10 items-center">
+            <div className="md:col-span-2">
+              <div className="mono-kicker text-violet-400 mb-3">◉ 05 / FOR DEVELOPERS</div>
+              <h2
+                className="text-3xl sm:text-4xl font-extrabold tracking-tight text-hero mb-4"
+                style={{ fontFamily: "var(--font-unbounded)", letterSpacing: "-0.03em" }}
+              >
+                Hack the{" "}
+                <span className="kinetic-gradient">signal</span>.
+              </h2>
+              <p
+                className="text-hero-muted text-sm leading-relaxed mb-6"
+                style={{ fontFamily: "var(--font-instrument)" }}
               >
-                <span className="text-white text-sm font-bold" style={{ fontFamily: "var(--font-unbounded)" }}>{"{}"}</span>
+                Native Swift. Zero external deps. The WebSocket feed is fully
+                documented — build custom overlays, wire it into Home Assistant,
+                or poke around the source.
+              </p>
+              <div className="flex flex-wrap gap-4">
+                <Link
+                  href="/docs/architecture"
+                  className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors"
+                >
+                  ARCHITECTURE
+                  <ArrowRight className="w-3 h-3" />
+                </Link>
+                <Link
+                  href="/docs/development"
+                  className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors"
+                >
+                  DEV GUIDE
+                  <ArrowRight className="w-3 h-3" />
+                </Link>
+                <Link
+                  href="/docs/security"
+                  className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors"
+                >
+                  SECURITY
+                  <ArrowRight className="w-3 h-3" />
+                </Link>
               </div>
-              <div>
-                <h2 className="font-bold text-hero text-lg mb-2"
-                  style={{ fontFamily: "var(--font-unbounded)" }}>
-                  For Developers
-                </h2>
-                <p className="text-hero-muted text-sm leading-relaxed mb-5"
-                  style={{ fontFamily: "var(--font-instrument)" }}>
-                  Open source, zero external dependencies, native Swift. The WebSocket API is
-                  fully documented — build your own overlay, integrate with anything, or just
-                  poke around.
-                </p>
-                <div className="flex flex-wrap gap-3">
-                  <Link
-                    href="/docs/architecture"
-                    className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-500 dark:text-violet-400 hover:text-violet-600 dark:hover:text-violet-300 transition-colors"
-                  >
-                    Architecture
-                    <ArrowRight className="w-3 h-3" />
-                  </Link>
-                  <Link
-                    href="/docs/development"
-                    className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-500 dark:text-violet-400 hover:text-violet-600 dark:hover:text-violet-300 transition-colors"
-                  >
-                    Development Guide
-                    <ArrowRight className="w-3 h-3" />
-                  </Link>
-                  <Link
-                    href="/docs/security"
-                    className="inline-flex items-center gap-1.5 text-xs font-semibold text-violet-500 dark:text-violet-400 hover:text-violet-600 dark:hover:text-violet-300 transition-colors"
-                  >
-                    Security
-                    <ArrowRight className="w-3 h-3" />
-                  </Link>
+            </div>
+
+            <div className="md:col-span-3">
+              <div className="terminal">
+                <div className="terminal-bar">
+                  <span className="terminal-dot r" />
+                  <span className="terminal-dot y" />
+                  <span className="terminal-dot g" />
+                  <span className="mono-label text-hero-subtle ml-2">ws://localhost:8080/now-playing</span>
                 </div>
+                <pre
+                  className="terminal-body m-0 overflow-x-auto"
+                  dangerouslySetInnerHTML={{
+                    __html: `<span class="c-c">// 20 lines of HTML — that's the whole overlay</span>
+<span class="c-k">const</span> <span class="c-v">ws</span> = <span class="c-k">new</span> <span class="c-n">WebSocket</span>(<span class="c-s">"ws://localhost:8080/now-playing"</span>);
+
+<span class="c-v">ws</span>.<span class="c-n">onmessage</span> = (<span class="c-v">event</span>) =&gt; {
+  <span class="c-k">const</span> { <span class="c-v">title</span>, <span class="c-v">artist</span>, <span class="c-v">artwork</span> } = <span class="c-n">JSON</span>.<span class="c-n">parse</span>(<span class="c-v">event</span>.<span class="c-v">data</span>);
+  <span class="c-n">document</span>.<span class="c-n">querySelector</span>(<span class="c-s">"#title"</span>).<span class="c-v">textContent</span> = <span class="c-v">title</span>;
+};`,
+                  }}
+                />
               </div>
             </div>
           </div>
         </div>
       </section>
 
-      {/* CTA Footer */}
-      <section className="px-6 py-24 text-center bg-midnight-cta">
-        <div className="mx-auto max-w-2xl">
-          {/* Logo */}
-          <div className="flex justify-center mb-6">
-            <div
-              className="rounded-2xl p-3"
-              style={{ backgroundColor: "rgba(124,58,237,0.06)", border: "1px solid rgba(124,58,237,0.15)" }}
-            >
-              <img src={getAssetPath("/logo.svg")} alt="WolfWave" className="h-10 w-auto" />
+      {/* ═══════════════ GIANT CTA ═══════════════ */}
+      <section className="mesh-bg grid-lines noise relative overflow-hidden border-t border-white/5">
+        <div className="relative z-10 px-6 py-28 sm:py-40 text-center">
+          <div className="mx-auto max-w-5xl">
+            <div className="mono-kicker text-violet-400 mb-6 inline-flex items-center gap-2">
+              <Music className="w-3 h-3" />
+              READY WHEN YOU ARE
+            </div>
+            <h2 className="giant-cta mb-8 text-hero">
+              Press{" "}
+              <span className="serif-em kinetic-gradient" style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 400 }}>
+                play
+              </span>.
+              <br />
+              We handle the rest.
+            </h2>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-10">
+              <Link
+                href="/docs/installation"
+                className="shimmer-btn btn-primary inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl text-sm font-semibold transition-transform hover:scale-[1.02] active:scale-[0.98]"
+              >
+                <Download className="w-4 h-4 relative z-10" />
+                <span className="relative z-10">Download WolfWave — Free</span>
+              </Link>
+              <Link
+                href="/docs"
+                className="btn-secondary inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02]"
+              >
+                Read the Docs
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+            </div>
+            {/* Proof pills */}
+            <div className="flex flex-wrap items-center justify-center gap-2">
+              {["FREE FOREVER", "MACOS 26+", "NO ACCOUNT", "~3.7MB", "OPEN SOURCE"].map((pill) => (
+                <span
+                  key={pill}
+                  className="proof-pill mono-label px-3 py-1.5 rounded-full"
+                >
+                  {pill}
+                </span>
+              ))}
             </div>
-          </div>
-          <h2
-            className="text-3xl sm:text-4xl font-extrabold text-hero mb-4"
-            style={{ fontFamily: "var(--font-unbounded)" }}
-          >
-            Start streaming smarter.
-          </h2>
-          <p className="text-hero-subtle text-base mb-10"
-            style={{ fontFamily: "var(--font-instrument)" }}>
-            Free forever. No account. Just music.
-          </p>
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-            <Link
-              href="/docs/installation"
-              className="btn-primary w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02] active:scale-[0.98]"
-            >
-              <Download className="w-4 h-4" />
-              Download WolfWave
-            </Link>
-            <Link
-              href="/docs"
-              className="btn-secondary w-full sm:w-auto inline-flex items-center justify-center gap-2 px-8 py-3.5 rounded-xl text-sm font-semibold transition-all hover:scale-[1.02]"
-            >
-              Read the Docs
-              <ArrowRight className="w-4 h-4" />
-            </Link>
           </div>
         </div>
       </section>
diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index 0ea7de4..dda2baa 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -308,3 +308,385 @@
 .step-badge {
   background: linear-gradient(135deg, #7c3aed, #22d3ee);
 }
+
+/* ══════════════════════════════════════════════════════
+   2026 MARKETING LANDING — editorial tech-luxe
+   ══════════════════════════════════════════════════════ */
+
+/* ── Near-black base ── */
+.bg-ink { background-color: #05060d; }
+.light .bg-ink { background-color: #fafaf7; }
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .bg-ink { background-color: #fafaf7; }
+}
+
+/* ── Gradient mesh background ── */
+.mesh-bg {
+  position: relative;
+  background-color: #05060d;
+  background-image:
+    radial-gradient(ellipse 70% 55% at 18% 8%, rgba(124, 58, 237, 0.32), transparent 62%),
+    radial-gradient(ellipse 55% 45% at 82% 38%, rgba(34, 211, 238, 0.22), transparent 58%),
+    radial-gradient(ellipse 40% 30% at 50% 95%, rgba(168, 85, 247, 0.18), transparent 60%);
+}
+.light .mesh-bg {
+  background-color: #fafaf7;
+  background-image:
+    radial-gradient(ellipse 70% 55% at 18% 8%, rgba(124, 58, 237, 0.14), transparent 62%),
+    radial-gradient(ellipse 55% 45% at 82% 38%, rgba(34, 211, 238, 0.1), transparent 58%),
+    radial-gradient(ellipse 40% 30% at 50% 95%, rgba(168, 85, 247, 0.08), transparent 60%);
+}
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .mesh-bg {
+    background-color: #fafaf7;
+    background-image:
+      radial-gradient(ellipse 70% 55% at 18% 8%, rgba(124, 58, 237, 0.14), transparent 62%),
+      radial-gradient(ellipse 55% 45% at 82% 38%, rgba(34, 211, 238, 0.1), transparent 58%),
+      radial-gradient(ellipse 40% 30% at 50% 95%, rgba(168, 85, 247, 0.08), transparent 60%);
+  }
+}
+
+/* ── Grid lines overlay ── */
+.grid-lines {
+  position: relative;
+}
+.grid-lines::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 72px 72px;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
+  pointer-events: none;
+}
+.light .grid-lines::before {
+  background-image:
+    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+}
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .grid-lines::before {
+    background-image:
+      linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
+  }
+}
+
+/* ── Noise overlay ── */
+.noise::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  mix-blend-mode: overlay;
+  opacity: 0.06;
+  pointer-events: none;
+}
+.light .noise::after { opacity: 0.08; mix-blend-mode: multiply; }
+
+/* ── Mono kicker / label ── */
+.mono-kicker {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.7rem;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.mono-label {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+/* ── Kinetic headline ── */
+.kinetic-headline {
+  font-family: var(--font-unbounded);
+  font-size: clamp(3rem, 9vw, 9.5rem);
+  line-height: 0.86;
+  letter-spacing: -0.045em;
+  font-weight: 800;
+}
+.kinetic-headline .serif-em {
+  font-family: var(--font-serif), Georgia, serif;
+  font-style: italic;
+  font-weight: 400;
+  letter-spacing: -0.02em;
+}
+.kinetic-headline .outline {
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 2px currentColor;
+  color: #fff;
+}
+.light .kinetic-headline .outline { color: #1a1a2e; }
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .kinetic-headline .outline { color: #1a1a2e; }
+}
+
+.kinetic-gradient {
+  background: linear-gradient(120deg, #a855f7 0%, #22d3ee 50%, #7c3aed 100%);
+  background-size: 220% 220%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradient-shift 8s ease infinite;
+}
+
+/* ── Liquid glass surfaces ── */
+.liquid-glass {
+  position: relative;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
+    0 24px 80px -24px rgba(124, 58, 237, 0.35),
+    0 8px 24px -12px rgba(0, 0, 0, 0.5);
+}
+.light .liquid-glass {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+  border-color: rgba(124, 58, 237, 0.15);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 1),
+    0 24px 80px -24px rgba(124, 58, 237, 0.2),
+    0 8px 24px -12px rgba(0, 0, 0, 0.08);
+}
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .liquid-glass {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+    border-color: rgba(124, 58, 237, 0.15);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 24px 80px -24px rgba(124, 58, 237, 0.2),
+      0 8px 24px -12px rgba(0, 0, 0, 0.08);
+  }
+}
+
+/* Corner brackets */
+.corners::before,
+.corners::after {
+  content: "";
+  position: absolute;
+  width: 18px;
+  height: 18px;
+  border: 1px solid rgba(34, 211, 238, 0.5);
+  pointer-events: none;
+}
+.corners::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
+.corners::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
+
+/* ── Ticker marquee ── */
+.ticker {
+  display: flex;
+  overflow: hidden;
+  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+  border-top: 1px solid rgba(124, 58, 237, 0.18);
+  border-bottom: 1px solid rgba(124, 58, 237, 0.18);
+  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(34, 211, 238, 0.04));
+}
+.ticker-track {
+  display: flex;
+  gap: 3rem;
+  padding: 1.25rem 0;
+  animation: ticker 38s linear infinite;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+@keyframes ticker {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-50%); }
+}
+.ticker-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  font-family: var(--font-unbounded);
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: rgba(255, 255, 255, 0.8);
+}
+.light .ticker-item { color: rgba(26, 26, 46, 0.85); }
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .ticker-item { color: rgba(26, 26, 46, 0.85); }
+}
+.ticker-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #7c3aed, #22d3ee);
+  flex-shrink: 0;
+}
+
+/* ── Shimmer button ── */
+.shimmer-btn {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+.shimmer-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
+  transform: translateX(-110%);
+  animation: shimmer 3.2s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes shimmer {
+  0%   { transform: translateX(-110%); }
+  60%  { transform: translateX(110%); }
+  100% { transform: translateX(110%); }
+}
+
+/* ── Hero stagger reveal ── */
+.hero-stagger > * {
+  opacity: 0;
+  transform: translateY(18px);
+  animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.hero-stagger > *:nth-child(1) { animation-delay: 0.05s; }
+.hero-stagger > *:nth-child(2) { animation-delay: 0.18s; }
+.hero-stagger > *:nth-child(3) { animation-delay: 0.32s; }
+.hero-stagger > *:nth-child(4) { animation-delay: 0.46s; }
+.hero-stagger > *:nth-child(5) { animation-delay: 0.6s; }
+@keyframes rise {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ── Bento cards ── */
+.bento-card {
+  position: relative;
+  border-radius: 1.5rem;
+  overflow: hidden;
+  padding: 1.75rem;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
+}
+.light .bento-card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+  border-color: rgba(124, 58, 237, 0.12);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .bento-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+    border-color: rgba(124, 58, 237, 0.12);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  }
+}
+.bento-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(124, 58, 237, 0.45);
+}
+.bento-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(135deg, transparent, rgba(124, 58, 237, 0.4), rgba(34, 211, 238, 0.3), transparent);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.4s;
+  pointer-events: none;
+}
+.bento-card:hover::after { opacity: 1; }
+
+/* Bento chat mock */
+.chat-line {
+  opacity: 0;
+  animation: chat-in 0.6s ease forwards;
+}
+.chat-line:nth-child(1) { animation-delay: 0.2s; }
+.chat-line:nth-child(2) { animation-delay: 1.1s; }
+.chat-line:nth-child(3) { animation-delay: 1.9s; }
+@keyframes chat-in {
+  from { opacity: 0; transform: translateX(-8px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+/* ── Live wire waveform ── */
+.live-wire path {
+  stroke-dasharray: 6 4;
+  animation: wire-dash 3s linear infinite;
+}
+@keyframes wire-dash {
+  to { stroke-dashoffset: -40; }
+}
+
+/* ── Terminal window dev card ── */
+.terminal {
+  position: relative;
+  background: #0a0a14;
+  border: 1px solid rgba(124, 58, 237, 0.25);
+  border-radius: 1rem;
+  overflow: hidden;
+  font-family: var(--font-mono), ui-monospace, monospace;
+  box-shadow: 0 30px 80px -30px rgba(124, 58, 237, 0.4);
+}
+.light .terminal {
+  background: #1a1a2e;
+  border-color: rgba(124, 58, 237, 0.3);
+}
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) .terminal { background: #1a1a2e; border-color: rgba(124, 58, 237, 0.3); }
+}
+.terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.02);
+}
+.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
+.terminal-dot.r { background: #ff5f57; }
+.terminal-dot.y { background: #febc2e; }
+.terminal-dot.g { background: #28c840; }
+.terminal-body {
+  padding: 1.5rem 1.5rem;
+  font-size: 0.82rem;
+  line-height: 1.7;
+  color: #e1e4e8;
+}
+.terminal-body .c-k { color: #ff79c6; }
+.terminal-body .c-s { color: #f1fa8c; }
+.terminal-body .c-n { color: #bd93f9; }
+.terminal-body .c-c { color: #6272a4; }
+.terminal-body .c-v { color: #8be9fd; }
+
+/* ── Giant CTA ── */
+.giant-cta {
+  font-family: var(--font-unbounded);
+  font-size: clamp(2.5rem, 8vw, 8rem);
+  line-height: 0.88;
+  letter-spacing: -0.04em;
+  font-weight: 800;
+}
+
+/* Accessibility: reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  .ticker-track,
+  .kinetic-gradient,
+  .shimmer-btn::before,
+  .live-wire path,
+  .chat-line,
+  .hero-stagger > *,
+  .now-playing-pulse,
+  .gradient-text {
+    animation: none !important;
+  }
+  .hero-stagger > * { opacity: 1; transform: none; }
+  .chat-line { opacity: 1; transform: none; }
+}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 4d8ea86..3380441 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Unbounded, Instrument_Sans } from "next/font/google";
+import { Unbounded, Instrument_Sans, Instrument_Serif, JetBrains_Mono } from "next/font/google";
 import type { Metadata } from "next";
 import { Provider } from "@/components/provider";
 import "./global.css";
@@ -15,6 +15,20 @@ const instrumentSans = Instrument_Sans({
   display: "swap",
 });
 
+const instrumentSerif = Instrument_Serif({
+  subsets: ["latin"],
+  weight: "400",
+  style: ["normal", "italic"],
+  variable: "--font-serif",
+  display: "swap",
+});
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+  display: "swap",
+});
+
 const siteUrl = "https://mrdemonwolf.github.io/wolfwave";
 const basePath = (() => {
   const envValue = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
@@ -116,7 +130,7 @@ const jsonLd = {
 
 export default function Layout({ children }: LayoutProps<"/">) {
   return (
-    <html lang="en" className={`${unbounded.variable} ${instrumentSans.variable}`} suppressHydrationWarning>
+    <html lang="en" className={`${unbounded.variable} ${instrumentSans.variable} ${instrumentSerif.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
       <body className="flex flex-col min-h-screen">
         <script
           type="application/ld+json"

From da1200df3f15d7d5bd9144b86fccdec68068d083 Mon Sep 17 00:00:00 2001
From: Nathanial Henniges <19924836+nathanialhenniges@users.noreply.github.com>
Date: Wed, 15 Apr 2026 03:51:44 -0500
Subject: [PATCH 2/3] ci: skip Swift build & test on docs/marketing-only
 changes

Use dorny/paths-filter to detect native changes. When a PR only touches
apps/docs/** or apps/marketing/**, the xcodebuild step is skipped and
the job reports pass. Unblocks docs-only PRs while the song-requests
test malloc crash is investigated separately.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .github/workflows/test.yml | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 4e4795d..d786c40 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -20,13 +20,30 @@ jobs:
     runs-on: macos-26
     steps:
       - uses: actions/checkout@v6
+        with:
+          fetch-depth: 2
+
+      - name: Detect native changes
+        id: filter
+        uses: dorny/paths-filter@v3
+        with:
+          filters: |
+            native:
+              - 'apps/native/**'
+              - 'Makefile'
+
+      - name: Skip notice (docs/marketing only)
+        if: steps.filter.outputs.native != 'true'
+        run: echo "No native changes detected — skipping Swift build & test."
 
       - name: Create Config.xcconfig
+        if: steps.filter.outputs.native == 'true'
         run: |
           printf 'TWITCH_CLIENT_ID = placeholder\nDISCORD_CLIENT_ID = placeholder\n' \
             > apps/native/wolfwave/Config.xcconfig
 
       - name: Build & Test
+        if: steps.filter.outputs.native == 'true'
         run: |
           xcodebuild -project "$PROJECT" -scheme "$SCHEME" \
             -destination 'platform=macOS' \
@@ -38,7 +55,7 @@ jobs:
             -resultBundlePath TestResults.xcresult
 
       - name: Upload Test Results
-        if: always()
+        if: always() && steps.filter.outputs.native == 'true'
         uses: actions/upload-artifact@v7
         with:
           name: TestResults

From 6e58283880742b8732cf37f7df52ebd4ff6aff84 Mon Sep 17 00:00:00 2001
From: Nathanial Henniges <19924836+nathanialhenniges@users.noreply.github.com>
Date: Wed, 15 Apr 2026 03:53:35 -0500
Subject: [PATCH 3/3] fix(docs): lowercase currentcolor for stylelint
 value-keyword-case

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/docs/app/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/docs/app/global.css b/apps/docs/app/global.css
index dda2baa..f7658c7 100644
--- a/apps/docs/app/global.css
+++ b/apps/docs/app/global.css
@@ -418,7 +418,7 @@
 }
 .kinetic-headline .outline {
   -webkit-text-fill-color: transparent;
-  -webkit-text-stroke: 2px currentColor;
+  -webkit-text-stroke: 2px currentcolor;
   color: #fff;
 }
 .light .kinetic-headline .outline { color: #1a1a2e; }