diff --git a/.changeset/dark-sidebar-contrast.md b/.changeset/dark-sidebar-contrast.md
new file mode 100644
index 00000000..648216b3
--- /dev/null
+++ b/.changeset/dark-sidebar-contrast.md
@@ -0,0 +1,6 @@
+---
+"@pymodel/pythinker-code": patch
+"@pymodel/pythinker-desktop": patch
+---
+
+Make the workspace header, session timestamps, and the settings row legible in dark mode on the translucent desktop sidebar.
diff --git a/.changeset/desktop-dedicated-update-channel.md b/.changeset/desktop-dedicated-update-channel.md
new file mode 100644
index 00000000..92f79f0f
--- /dev/null
+++ b/.changeset/desktop-dedicated-update-channel.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-desktop": patch
+---
+
+Publish desktop releases to a dedicated update channel so update checks resolve a desktop build instead of an unrelated release, and fail the release when a packaged build carries no update feed.
diff --git a/.changeset/desktop-pin-host-port.md b/.changeset/desktop-pin-host-port.md
new file mode 100644
index 00000000..58497f40
--- /dev/null
+++ b/.changeset/desktop-pin-host-port.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-desktop": patch
+---
+
+Pin the Host port so the desktop app reconnects to its own Host, and stop reporting builds that cannot self-update as update errors.
diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index adea503d..6710701f 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -195,28 +195,17 @@ async function createMainWindow(): Promise<BrowserWindow> {
     autoHideMenuBar: true,
     frame: process.platform === 'win32',
     titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'hidden',
-    ...(process.platform === 'darwin' ? {} : {
-      titleBarOverlay: {
-        color: '#00000000',
-        symbolColor: '#7f858f',
-        height: 44,
-      },
-    }),
-    ...(process.platform === 'darwin' ? {
-      trafficLightPosition: { x: 16, y: 18 },
-      vibrancy: 'sidebar' as const,
-      visualEffectState: 'followWindow' as const,
-    } : {}),
-    // Windows uses an opaque window so theme colors do not blend with desktop wallpaper.
-    ...(process.platform === 'win32' ? {
-      backgroundColor: '#0d1117',
-      hasShadow: true,
-      roundedCorners: true,
-      thickFrame: true,
-    } : {
-      transparent: true,
-      backgroundColor: '#00000000',
-    }),
+    titleBarOverlay: process.platform === 'darwin' ? undefined : {
+      color: '#00000000',
+      symbolColor: '#7f858f',
+      height: 44,
+    },
+    trafficLightPosition: process.platform === 'darwin' ? { x: 16, y: 18 } : undefined,
+    // Use an opaque window so theme colors do not blend with desktop wallpaper.
+    backgroundColor: '#0d1117',
+    hasShadow: process.platform === 'win32' ? true : undefined,
+    roundedCorners: process.platform === 'win32' ? true : undefined,
+    thickFrame: process.platform === 'win32' ? true : undefined,
     title: APP_NAME,
     webPreferences: {
       contextIsolation: true,
diff --git a/apps/desktop/tests/packaging-config.spec.ts b/apps/desktop/tests/packaging-config.spec.ts
index 62c764ce..0e02b922 100644
--- a/apps/desktop/tests/packaging-config.spec.ts
+++ b/apps/desktop/tests/packaging-config.spec.ts
@@ -86,9 +86,10 @@ describe('desktop packaging configuration', () => {
     expect(siteSource).toContain('releases/download/v${DESKTOP_VERSION}')
     expect(siteSource).not.toContain('releases/download/v0.1.0')
 
-    const desktopShowcaseMatch = siteSource.match(/<section id="desktop"[\s\S]*?<\/section>/)
-    expect(desktopShowcaseMatch).not.toBeNull()
-    expect(desktopShowcaseMatch![0]).toContain('/brand/windows11.svg')
+    expect(siteSource).toContain('id="desktop"')
+    expect(siteSource).toMatch(
+      /\{[^}]*icon: '\/brand\/windows11\.svg', href: desktopDownloads\.windows[^}]*\}/,
+    )
   })
 
   it('maps the staged Host node_modules directory as the copy root', () => {
diff --git a/apps/desktop/tests/window-appearance.spec.ts b/apps/desktop/tests/window-appearance.spec.ts
index 0a3b5fc9..dade733c 100644
--- a/apps/desktop/tests/window-appearance.spec.ts
+++ b/apps/desktop/tests/window-appearance.spec.ts
@@ -8,36 +8,48 @@ const desktopRoot = resolve(import.meta.dirname, '..')
 const mainSource = readFileSync(resolve(desktopRoot, 'src', 'main.ts'), 'utf8')
 
 describe('desktop window appearance configuration', () => {
-  it('keeps Windows opaque and non-Windows windows transparent', () => {
+  it('keeps the main window opaque on every platform', () => {
     const backgroundMaterialMatches = [...mainSource.matchAll(/backgroundMaterial/gu)]
-    const win32BranchMatches = [...mainSource.matchAll(
-      /\.\.\.\(process\.platform === 'win32' \? \{([\s\S]*?)\} : \{\s*transparent: true,/gu,
-    )]
-    const nonWin32BranchMatches = [...mainSource.matchAll(
-      /\} : \{\s*transparent: true,[\s\S]*?\}\),\s*title:/gu,
+    const mainWindowOptionMatches = [...mainSource.matchAll(
+      /const window = new BrowserWindow\(\{([\s\S]*?)\n  \}\)/gu,
     )]
 
     expect(backgroundMaterialMatches).toHaveLength(0)
-    expect(win32BranchMatches).toHaveLength(1)
-    expect(nonWin32BranchMatches).toHaveLength(1)
+    expect(mainWindowOptionMatches).toHaveLength(1)
 
-    const win32Branch = win32BranchMatches[0]![1]!
-    const opaqueColorMatches = [...win32Branch.matchAll(/backgroundColor:\s*'#[0-9a-fA-F]{6}'/gu)]
-    const alphaColorMatches = [...win32Branch.matchAll(/#[0-9a-fA-F]{8}/gu)]
-    const hasShadowMatches = [...win32Branch.matchAll(/hasShadow:\s*true/gu)]
-    const roundedCornersMatches = [...win32Branch.matchAll(/roundedCorners:\s*true/gu)]
-    const thickFrameMatches = [...win32Branch.matchAll(/thickFrame:\s*true/gu)]
+    const mainWindowOptions = mainWindowOptionMatches[0]![1]!
+    const vibrancyMatches = [...mainWindowOptions.matchAll(/vibrancy\s*:/gu)]
+    const visualEffectStateMatches = [...mainWindowOptions.matchAll(/visualEffectState\s*:/gu)]
+    const transparentMatches = [...mainWindowOptions.matchAll(/transparent:\s*true/gu)]
+    const backgroundColorMatches = [...mainWindowOptions.matchAll(
+      /backgroundColor:\s*'(#[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?)'/gu,
+    )]
+    const transparentBackgroundMatches = backgroundColorMatches.filter(
+      (match) => match[1]!.length === 9 && match[1]!.endsWith('00'),
+    )
+    const hasShadowMatches = [...mainWindowOptions.matchAll(
+      /hasShadow:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
+    const roundedCornersMatches = [...mainWindowOptions.matchAll(
+      /roundedCorners:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
+    const thickFrameMatches = [...mainWindowOptions.matchAll(
+      /thickFrame:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
 
-    expect(opaqueColorMatches).toHaveLength(1)
-    expect(alphaColorMatches).toHaveLength(0)
+    expect(vibrancyMatches).toHaveLength(0)
+    expect(visualEffectStateMatches).toHaveLength(0)
+    expect(transparentMatches).toHaveLength(0)
+    expect(backgroundColorMatches).toHaveLength(1)
+    expect(backgroundColorMatches[0]![1]).not.toBe('#00000000')
+    expect(transparentBackgroundMatches).toHaveLength(0)
     expect(hasShadowMatches).toHaveLength(1)
     expect(roundedCornersMatches).toHaveLength(1)
     expect(thickFrameMatches).toHaveLength(1)
 
-    expect(win32Branch).toContain('backgroundColor')
-    expect(nonWin32BranchMatches[0]![0]).toContain('transparent: true')
-    expect(win32Branch).toContain('hasShadow')
-    expect(win32Branch).toContain('roundedCorners')
-    expect(win32Branch).toContain('thickFrame')
+    expect(mainWindowOptions).toContain('backgroundColor')
+    expect(mainWindowOptions).toContain('hasShadow')
+    expect(mainWindowOptions).toContain('roundedCorners')
+    expect(mainWindowOptions).toContain('thickFrame')
   })
 })
diff --git a/apps/pythinker-web/src/components/Composer.vue b/apps/pythinker-web/src/components/Composer.vue
index d7092026..35f1aef7 100644
--- a/apps/pythinker-web/src/components/Composer.vue
+++ b/apps/pythinker-web/src/components/Composer.vue
@@ -735,12 +735,18 @@ const hasUpload = computed(() => !!props.uploadImage);
 // ---------------------------------------------------------------------------
 
 const dropdownOpen = ref(false);
+const modelPillRef = ref<HTMLElement | null>(null);
+const modelDropdownStyle = ref<Record<string, string>>({});
 const permDropdownOpen = ref(false);
 const toolbarRef = ref<HTMLElement | null>(null);
 
 function toggleDropdown(): void {
   dropdownOpen.value = !dropdownOpen.value;
   if (dropdownOpen.value) {
+    const rect = modelPillRef.value?.getBoundingClientRect();
+    modelDropdownStyle.value = rect
+      ? { maxHeight: `${Math.max(160, rect.top - 4 - 12)}px` }
+      : {};
     permDropdownOpen.value = false;
     document.addEventListener('click', onDocClick, true);
   } else {
@@ -1179,6 +1185,7 @@ function selectModel(modelId: string): void {
           <!-- Model pill — click to open quick-switch dropdown -->
           <span
             v-if="status"
+            ref="modelPillRef"
             class="model-pill"
             :class="{ open: dropdownOpen }"
             role="button"
@@ -1195,7 +1202,7 @@ function selectModel(modelId: string): void {
         </div>
 
         <!-- Model dropdown — current provider models + controls + more -->
-        <div v-if="dropdownOpen && status" class="model-dropdown" role="menu" @click.stop>
+        <div v-if="dropdownOpen && status" class="model-dropdown" :style="modelDropdownStyle" role="menu" @click.stop>
           <!-- Starred models from other providers -->
           <div v-if="starredOtherModels.length > 0" class="md-section">{{ t('status.starredModels') }}</div>
           <button
@@ -1719,6 +1726,7 @@ function selectModel(modelId: string): void {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  overflow-y: auto;
 }
 
 .md-section {
diff --git a/apps/pythinker-web/src/components/NewSessionDialog.vue b/apps/pythinker-web/src/components/NewSessionDialog.vue
index b55bc93b..653d4b60 100644
--- a/apps/pythinker-web/src/components/NewSessionDialog.vue
+++ b/apps/pythinker-web/src/components/NewSessionDialog.vue
@@ -166,6 +166,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   border: 1px solid var(--line);
   border-top: 2px solid var(--blue);
   border-radius: 4px;
+  overflow: hidden;
   width: 520px;
   max-width: calc(100vw - 32px);
   height: 360px;
@@ -210,6 +211,8 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   flex-direction: column;
   gap: 12px;
   flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 }
 
 .form-row {
@@ -349,7 +352,6 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
     max-height: calc(100dvh - 24px);
   }
   .form-body {
-    overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
   .form-row {
diff --git a/apps/pythinker-web/src/style.css b/apps/pythinker-web/src/style.css
index ff1be664..ada44c30 100644
--- a/apps/pythinker-web/src/style.css
+++ b/apps/pythinker-web/src/style.css
@@ -73,9 +73,9 @@ html[data-color-scheme="dark"] {
   color-scheme: dark;
   --ink: #e8eaed;
   --text: #c9cdd4;
-  --dim: #9aa0a8;
-  --muted: #727983;
-  --faint: #525960;
+  --dim: #c2c8d0;
+  --muted: #aab1ba;
+  --faint: #8b939c;
   --line: #2d333b;
   --line2: #22272e;
   --panel: #1c2128;
@@ -99,9 +99,9 @@ html[data-color-scheme="dark"] {
   html[data-color-scheme="system"] {
     --ink: #e8eaed;
     --text: #c9cdd4;
-    --dim: #9aa0a8;
-    --muted: #727983;
-    --faint: #525960;
+    --dim: #c2c8d0;
+    --muted: #aab1ba;
+    --faint: #8b939c;
     --line: #2d333b;
     --line2: #22272e;
     --panel: #1c2128;
diff --git a/apps/pythinker-web/test/composer.test.ts b/apps/pythinker-web/test/composer.test.ts
index 0d8d6353..c8f21629 100644
--- a/apps/pythinker-web/test/composer.test.ts
+++ b/apps/pythinker-web/test/composer.test.ts
@@ -319,6 +319,30 @@ describe('Composer model dropdown', () => {
 
     expect(wrapper.emitted('selectModel')).toEqual([['openai/gpt-5']]);
   });
+
+  it('bounds the quick-switch dropdown to the measured space above its pill', async () => {
+    const wrapper = mountComposer({
+      status: { model: 'Model 0', modelId: 'pythinker/model-0', ctxUsed: 0, ctxMax: 128000, permission: 'manual' },
+      models: Array.from({ length: 17 }, (_, index) => ({
+        id: `pythinker/model-${index}`,
+        provider: 'pythinker',
+        model: `model-${index}`,
+        displayName: `Model ${index}`,
+        maxContextSize: 128000,
+      })),
+    });
+    const pill = wrapper.get('.model-pill');
+    const rect = vi.spyOn(pill.element, 'getBoundingClientRect');
+
+    rect.mockReturnValue({ top: 20 } as DOMRect);
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('160px');
+
+    rect.mockReturnValue({ top: 300 } as DOMRect);
+    await pill.trigger('click');
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('284px');
+  });
 });
 
 describe('Composer context indicator', () => {
diff --git a/apps/site/src/App.vue b/apps/site/src/App.vue
index f11a78c9..45bb75f8 100644
--- a/apps/site/src/App.vue
+++ b/apps/site/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import AgentLoop from './components/AgentLoop.vue';
-import InstallCommand from './components/InstallCommand.vue';
+
 import LegacyDownloadsPopup from './components/LegacyDownloadsPopup.vue';
 import ParticleField from './components/ParticleField.vue';
 import PythinkerMascot from './components/PythinkerMascot.vue';
@@ -86,6 +86,7 @@ const terminalDemos = [
 const vscodeInstallCommand = 'code --install-extension pymodel.pythinker';
 
 const copiedCommand = ref('');
+const scrolled = ref(false);
 const mobileMenu = ref(null);
 const menuButton = ref(null);
 const menuOpen = ref(false);
@@ -195,9 +196,15 @@ function onDocumentKeydown(event) {
   if (event.key === 'Escape') closeMenu();
 }
 
+function onScroll() {
+  scrolled.value = window.scrollY > 40;
+}
+
 onMounted(() => {
   document.addEventListener('pointerdown', onDocumentPointerdown);
   document.addEventListener('keydown', onDocumentKeydown);
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
   reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
   playTerminalDemo();
   if (reducedMotionQuery.matches) return;
@@ -220,12 +227,13 @@ onUnmounted(() => {
   revealObserver?.disconnect();
   document.removeEventListener('pointerdown', onDocumentPointerdown);
   document.removeEventListener('keydown', onDocumentKeydown);
+  window.removeEventListener('scroll', onScroll);
 });
 </script>
 
 <template>
   <ParticleField />
-  <nav class="site-nav" aria-label="Primary navigation">
+  <nav class="site-nav" :class="{ 'is-scrolled': scrolled }" aria-label="Primary navigation">
     <div class="container nav-inner">
       <a href="/" class="nav-brand"><PythinkerMascot :width="26" :height="32" /><span>Pythinker Code</span></a>
       <div class="nav-actions">
@@ -254,63 +262,46 @@ onUnmounted(() => {
   </nav>
 
   <main id="top">
-    <header class="hero container">
-      <div class="hero-copy">
-        <PythinkerMascot class="hero-mascot" :width="164" :height="205" />
-        <h1>Pythinker Code</h1>
-        <p class="hero-accent">Think first, then code.</p>
-        <p class="hero-lead">Pythinker Code is an open-source AI engineering agent. It reads your repo, edits files, runs commands, and iterates until the job is done &mdash; in a native desktop app, your terminal, or VS Code.</p>
-        <div class="hero-download">
-          <div class="hero-download-actions">
-            <a
-              v-for="(download, index) in heroDownloads"
-              :key="download.id"
-              :class="index === 0 ? 'button button-primary' : 'button button-secondary'"
-              :href="download.href"
-              rel="noopener"
-            >
-              <img :src="download.icon" alt="" aria-hidden="true" class="button-platform-icon" />
-              {{ download.label }}
+    <div id="desktop" class="hero-dark">
+      <header class="hero container">
+        <div class="hero-copy">
+          <h1>Pythinker<br>Code<br>Desktop</h1>
+          <p class="hero-lead">A native AI engineering agent for macOS and Windows. It reads your repo, edits files, runs commands, and iterates until the job is done.</p>
+          <div class="hero-download">
+            <div class="hero-download-actions">
+              <a
+                v-for="download in heroDownloads"
+                :key="download.id"
+                class="button button-hero"
+                :href="download.href"
+                rel="noopener"
+              >
+                <img :src="download.icon" alt="" aria-hidden="true" class="button-platform-icon" />
+                {{ download.label }}
+              </a>
+            </div>
+          </div>
+          <div class="hero-meta">
+            <a class="button button-ghost" href="https://github.com/PyModel/pythinker-code" target="_blank" rel="noopener">
+              <img src="/brand/github.svg" alt="" width="16" height="16" />
+              View on GitHub
             </a>
+            <span class="hero-install-hint">or <a href="#install">install the CLI</a></span>
           </div>
-          <p class="hero-download-note">
-            {{ heroDownloads.map((download) => download.note).join(' · ') }} ·
-            <a :href="heroDownloadsPage" target="_blank" rel="noopener">All downloads</a>
-          </p>
-        </div>
-        <p class="hero-install-label">Or install the CLI</p>
-        <div class="hero-install">
-          <InstallCommand />
+          <p class="hero-caption">Free and open source. MIT licensed. macOS, Linux, and Windows.</p>
         </div>
-        <p class="hero-caption">Free and open source. MIT licensed. macOS, Linux, and Windows.</p>
-      </div>
-    </header>
-
-    <section id="desktop" class="section container desktop-showcase" aria-labelledby="desktop-title">
-      <div class="desktop-showcase-media reveal">
-        <video autoplay muted loop playsinline preload="metadata" poster="/pythinker_desktop.png" aria-label="Pythinker Desktop app">
-          <source src="/pythinker_desktop.webm" type="video/webm" />
-          <img src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" />
-        </video>
-        <img class="desktop-showcase-still" src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" />
-      </div>
-      <div class="desktop-showcase-copy reveal">
-        <p class="eyebrow">Desktop app</p>
-        <h2 id="desktop-title" class="display-md">Pythinker Desktop</h2>
-        <p class="desktop-showcase-lead">The agent in native macOS and Windows apps, with sidebar sessions, live activity, and auto-updates.</p>
-        <div class="desktop-showcase-actions">
-          <a class="button button-primary" :href="desktopDownloads.mac" rel="noopener">
-            <img src="/brand/apple.svg" alt="" aria-hidden="true" class="button-platform-icon" />
-            Download for macOS
-          </a>
-          <a class="button button-secondary" :href="desktopDownloads.windows" rel="noopener">
-            <img src="/brand/windows11.svg" alt="" aria-hidden="true" class="button-platform-icon" />
-            Download for Windows
-          </a>
-          <span class="desktop-showcase-note">Auto-updates included · Apple Silicon and Windows x64</span>
+        <div class="hero-preview">
+          <div class="hero-preview-window">
+            <div class="hero-preview-titlebar">
+              <span class="hero-preview-light"></span>
+              <span class="hero-preview-light"></span>
+              <span class="hero-preview-light"></span>
+            </div>
+            <img src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" width="2048" height="1300" loading="eager" />
+          </div>
         </div>
-      </div>
-    </section>
+      </header>
+    </div>
 
     <div class="works-with" aria-label="Works with leading AI models">
       <span class="works-with-label">Works with</span>
@@ -569,15 +560,62 @@ onUnmounted(() => {
 
 <style scoped>
 .site-nav {
-  position: sticky;
+  position: fixed;
   z-index: 10;
   top: 0;
+  right: 0;
+  left: 0;
   height: 64px;
-  border-bottom: 1px solid var(--hairline);
-  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
+}
+
+.site-nav.is-scrolled {
+  border-bottom-color: var(--hairline);
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
 }
 
+.site-nav:not(.is-scrolled) .nav-brand {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.site-nav:not(.is-scrolled) .nav-brand :deep(svg) {
+  filter: brightness(0) invert(1);
+}
+
+.site-nav:not(.is-scrolled) .nav-links a {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.site-nav:not(.is-scrolled) .nav-links a:hover {
+  color: #ffffff;
+}
+
+.site-nav:not(.is-scrolled) .nav-links img {
+  filter: brightness(0) invert(1);
+}
+
+.site-nav:not(.is-scrolled) .nav-cta {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.site-nav:not(.is-scrolled) .nav-cta:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.site-nav:not(.is-scrolled) .menu-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.site-nav:not(.is-scrolled) .menu-button:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
 .nav-inner {
   display: flex;
   height: 100%;
@@ -708,168 +746,190 @@ onUnmounted(() => {
   transform: translateY(-4px);
 }
 
+/* ---- Dark hero ---- */
+
+.hero-dark {
+  position: relative;
+  padding-top: 64px; /* nav height offset (nav is now fixed) */
+  overflow: hidden;
+  background: transparent;
+}
+
 .hero {
   position: relative;
-  isolation: isolate;
-  padding-top: 24px;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 520px) 1fr;
+  align-items: center;
+  gap: 48px;
+  padding-top: 72px;
+  padding-bottom: 80px;
 }
 
 .hero-copy {
-  max-width: 780px;
-  margin-inline: auto;
-  text-align: center;
+  text-align: left;
 }
 
 .hero h1 {
-  margin-top: 18px;
-  color: var(--ink);
-  font-size: clamp(52px, 9vw, 88px);
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-}
-
-.hero-accent {
-  margin-top: 8px;
-  color: var(--ink-muted);
-  font-size: clamp(24px, 3.4vw, 34px);
-  font-style: italic;
+  color: #f1f5fa;
+  font-size: clamp(48px, 8vw, 80px);
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
 }
 
 .hero-lead {
-  max-width: 640px;
+  max-width: 480px;
   margin-top: 24px;
-  margin-inline: auto;
-  color: var(--ink-muted);
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1.5;
+  color: rgba(241, 245, 250, 0.55);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.6;
 }
 
 .hero-download {
-  margin-top: 24px;
+  margin-top: 32px;
 }
 
 .hero-download-actions {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
+  gap: 12px;
 }
 
-.hero-install {
-  max-width: 720px;
-  margin: 10px auto 0;
+.button-hero {
+  gap: 10px;
+  min-height: 52px;
+  padding: 12px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: var(--r-pill);
+  background: rgba(255, 255, 255, 0.95);
+  color: #111113;
+  font-size: 15px;
+  font-weight: 600;
+  transition: background-color 150ms ease, transform 150ms ease;
 }
 
-.milestone-footnote {
-  display: flex;
-  justify-content: center;
-  margin-block: 48px;
+.button-hero:hover {
+  background: #ffffff;
+  transform: translateY(-1px);
 }
 
-.hero-download-note,
-.hero-install-label,
-.hero-caption {
-  color: var(--ink-subtle);
-  font-size: 13px;
+.button-hero .button-platform-icon {
+  width: 18px;
+  height: 18px;
 }
 
-.hero-download-note {
-  margin-top: 10px;
-  line-height: 1.38;
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 20px;
 }
 
-.hero-install-label {
-  margin-top: 20px;
+.button-ghost {
+  gap: 8px;
+  min-height: 44px;
+  padding: 10px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: var(--r-pill);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  font-weight: 600;
+  transition: background-color 150ms ease, border-color 150ms ease;
 }
 
-.hero-caption {
-  margin-top: 12px;
-  line-height: 1.38;
+.button-ghost:hover {
+  border-color: rgba(255, 255, 255, 0.32);
+  background: rgba(255, 255, 255, 0.06);
 }
 
-.hero-mascot {
-  display: block;
-  width: clamp(128px, 12vw, 164px);
-  height: auto;
-  margin-inline: auto;
+.button-ghost img {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1);
+  opacity: 0.7;
 }
 
-.desktop-showcase {
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  align-items: center;
-  gap: 48px;
+.hero-install-hint {
+  color: rgba(241, 245, 250, 0.4);
+  font-size: 14px;
 }
 
-.desktop-showcase-media {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  aspect-ratio: 2048 / 1300;
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-lg);
-  background: var(--terminal-bg);
-  box-shadow: var(--shadow-terminal);
+.hero-install-hint a {
+  color: rgba(241, 245, 250, 0.65);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
-.desktop-showcase-media video,
-.desktop-showcase-media video > img,
-.desktop-showcase-media > img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  object-fit: cover;
+.hero-install-hint a:hover {
+  color: rgba(241, 245, 250, 0.9);
 }
 
-.desktop-showcase-still {
-  display: none !important;
+.hero-caption {
+  margin-top: 20px;
+  color: rgba(241, 245, 250, 0.3);
+  font-size: 13px;
+  line-height: 1.38;
 }
 
-.desktop-showcase-copy {
+.milestone-footnote {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: flex-start;
+  justify-content: center;
+  margin-block: 48px;
 }
 
-.desktop-showcase-lead {
-  color: var(--ink-muted);
-  font-size: 16px;
-  line-height: 1.6;
+/* ---- Hero app preview ---- */
+
+.hero-preview {
+  position: relative;
+  margin-right: calc(-48px - 40px); /* bleed past container */
 }
 
-.desktop-showcase-actions {
+.hero-preview-window {
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px 0 0 12px;
+  background: #1a1a2e;
+  box-shadow:
+    0 48px 100px -24px rgba(0, 0, 0, 0.7),
+    0 24px 48px -12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.hero-preview-titlebar {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(180deg, #3a3a4a 0%, #2e2e3e 100%);
 }
 
-.button-platform-icon {
-  width: 16px;
-  height: 16px;
+.hero-preview-light {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
 }
 
-.desktop-showcase-actions .button,
-.hero-download-actions .button {
-  gap: 8px;
+.hero-preview-light:nth-child(1) {
+  background: #ff5f57;
 }
 
-.desktop-showcase-actions .button-primary .button-platform-icon,
-.hero-download-actions .button-primary .button-platform-icon {
-  filter: brightness(0) invert(1);
+.hero-preview-light:nth-child(2) {
+  background: #febc2e;
 }
 
-.desktop-showcase-note {
-  color: var(--ink-subtle);
-  font-size: 13px;
-  line-height: 1.5;
+.hero-preview-light:nth-child(3) {
+  background: #28c840;
+}
+
+.hero-preview-window img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
 .works-with {
@@ -1804,10 +1864,20 @@ onUnmounted(() => {
 }
 
 @media (max-width: 899px) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    padding-top: 48px;
+    padding-bottom: 56px;
+  }
+
+  .hero-preview {
+    margin-right: calc(-24px - 20px);
+  }
+
   .quickstart-grid,
   .docs-grid,
-  .vscode-grid,
-  .desktop-showcase {
+  .vscode-grid {
     grid-template-columns: 1fr;
   }
 
@@ -1898,11 +1968,28 @@ onUnmounted(() => {
 
 @media (max-width: 640px) {
   .hero {
-    padding-top: 0;
+    padding-top: 32px;
+    padding-bottom: 40px;
+  }
+
+  .hero h1 {
+    font-size: clamp(36px, 10vw, 48px);
   }
 
   .hero-lead {
-    font-size: 18px;
+    font-size: 16px;
+  }
+
+  .hero-download-actions {
+    flex-direction: column;
+  }
+
+  .hero-preview {
+    margin-right: -24px;
+  }
+
+  .hero-preview-window {
+    border-radius: 10px 0 0 10px;
   }
 
   .terminal-header {
@@ -1967,14 +2054,6 @@ onUnmounted(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .desktop-showcase-media video {
-    display: none;
-  }
-
-  .desktop-showcase-media .desktop-showcase-still {
-    display: block !important;
-  }
-
   .works-with-track {
     animation: none;
   }
diff --git a/apps/site/src/components/ParticleField.vue b/apps/site/src/components/ParticleField.vue
index e5622b84..4b856dd7 100644
--- a/apps/site/src/components/ParticleField.vue
+++ b/apps/site/src/components/ParticleField.vue
@@ -4,107 +4,301 @@ import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 const canvas = ref(null);
 const enabled = ref(false);
 
-let context;
-let animationFrame;
-let particles = [];
+let gl = null;
+let ctx2d = null;
+let animationFrame = null;
+let program = null;
+let buffer = null;
+let uniformLocations = {};
+let startTime = 0;
 let viewportWidth = 0;
 let viewportHeight = 0;
 let mounted = false;
+let isWebGL = false;
 
-const pointer = { x: Infinity, y: Infinity };
-const pointerRadius = 120;
-
-function createParticles() {
-  const count = Math.max(40, Math.min(90, Math.round((viewportWidth * viewportHeight) / 16000)));
-  particles = Array.from({ length: count }, () => {
-    const homeX = Math.random() * viewportWidth;
-    const homeY = Math.random() * viewportHeight;
-    return {
-      homeX,
-      homeY,
-      x: homeX,
-      y: homeY,
-      velocityX: 0,
-      velocityY: 0,
-      driftX: (Math.random() - 0.5) * 0.08,
-      driftY: (Math.random() - 0.5) * 0.08,
-      radius: 0.8 + Math.random(),
-      color: Math.random() < 0.06 ? 'rgba(43, 137, 255, 0.35)' : 'rgba(17, 17, 19, 0.22)',
-    };
-  });
+// 2D Canvas fallback dots state
+let fallbackDots = [];
+
+const vsSource = `
+  attribute vec2 a_position;
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+  }
+`;
+
+const fsSource = `
+  precision highp float;
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform float u_dpr;
+
+  // High quality pseudo-random hashes
+  float hash21(vec2 p) {
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+  float hash22(vec2 p) {
+    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);
+  }
+
+  void main() {
+    vec2 st = gl_FragCoord.xy;
+    vec2 center = u_resolution * 0.5;
+
+    // Uniform grid spacing (~28 physical px scaled by DPR for consistent density)
+    float gridPitch = 26.0 * u_dpr;
+    float dotRadius = (6.0 * 0.5) * u_dpr; // 6px dot diameter
+
+    // Grid cell identification
+    vec2 cellIndex = floor(st / gridPitch);
+    vec2 cellCenter = (cellIndex + 0.5) * gridPitch;
+
+    // Distance to dot center in current cell
+    vec2 delta = st - cellCenter;
+    float distToDot = length(delta);
+
+    // Sharp dot shape with subtle sub-pixel anti-aliasing
+    float dotMask = 1.0 - smoothstep(dotRadius - 0.75 * u_dpr, dotRadius + 0.75 * u_dpr, distToDot);
+
+    if (dotMask <= 0.001) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+      return;
+    }
+
+    // Distance from viewport center (normalized 0.0 at center to 1.0+ at corners)
+    float maxDim = length(center);
+    float distFromCenter = length(cellCenter - center) / maxDim;
+
+    // Random seeds per cell for organic timing & opacity variation
+    float cellHash = hash21(cellIndex);
+    float cellHash2 = hash22(cellIndex);
+
+    // Subtle, technical, randomized base opacity (monochrome white/gray)
+    float baseOpacity = 0.12 + 0.42 * cellHash;
+
+    // Organic timing offset per dot for non-uniform wave front
+    float organicDist = distFromCenter + (cellHash - 0.5) * 0.26;
+
+    // Layer 1: Forward radial reveal wave (expanding outward from center)
+    float speed1 = 0.22;
+    float cycle1 = 7.0;
+    float t1 = mod(u_time * speed1, cycle1);
+    float waveProgress1 = (t1 / cycle1) * 2.2 - 0.2;
+    float forwardWave = smoothstep(waveProgress1 - 0.55, waveProgress1, organicDist)
+                      * (1.0 - smoothstep(waveProgress1, waveProgress1 + 0.55, organicDist));
+
+    // Layer 2: Reverse exit wave (disappearing toward outward regions with different speed)
+    float speed2 = 0.16;
+    float cycle2 = 8.5;
+    float t2 = mod(u_time * speed2 + 3.2, cycle2);
+    float waveProgress2 = (t2 / cycle2) * 2.2 - 0.2;
+    float reverseWave = smoothstep(waveProgress2 - 0.65, waveProgress2, organicDist)
+                      * (1.0 - smoothstep(waveProgress2, waveProgress2 + 0.65, organicDist));
+
+    // Subtle atmospheric baseline presence
+    float ambientPresence = 0.06 * (0.5 + 0.5 * sin(u_time * 0.4 + cellHash2 * 6.2831));
+
+    // Combined animated intensity
+    float waveAlpha = clamp(forwardWave * 0.85 + reverseWave * 0.60 + ambientPresence, 0.0, 1.0);
+    float dotAlpha = baseOpacity * waveAlpha * dotMask;
+
+    // Atmospheric Masking (pure black base):
+    // 1. Strong black radial gradient centered on viewport:
+    //    keeps center dark, allows dot texture to emerge away from center
+    float centerMask = smoothstep(0.08, 0.50, distFromCenter);
+
+    // 2. Top-to-bottom black gradient covering roughly upper third (fades upper area to pure black)
+    float yNorm = st.y / u_resolution.y; // 0.0 at bottom, 1.0 at top in WebGL
+    float topMask = smoothstep(0.96, 0.62, yNorm);
+    float bottomMask = smoothstep(0.02, 0.15, yNorm);
+
+    // Final monochrome white dot on pure black canvas
+    float finalAlpha = dotAlpha * centerMask * topMask * bottomMask;
+
+    gl_FragColor = vec4(vec3(finalAlpha), 1.0);
+  }
+`;
+
+function createShader(glCtx, type, source) {
+  const shader = glCtx.createShader(type);
+  glCtx.shaderSource(shader, source);
+  glCtx.compileShader(shader);
+  if (!glCtx.getShaderParameter(shader, glCtx.COMPILE_STATUS)) {
+    console.warn('WebGL shader compile error:', glCtx.getShaderInfoLog(shader));
+    glCtx.deleteShader(shader);
+    return null;
+  }
+  return shader;
 }
 
-function resize() {
-  viewportWidth = window.innerWidth;
-  viewportHeight = window.innerHeight;
-  const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+function initWebGL() {
+  const cvs = canvas.value;
+  if (!cvs) return false;
+
+  gl = cvs.getContext('webgl', { antialias: false, alpha: false, depth: false, stencil: false })
+    || cvs.getContext('experimental-webgl');
+  if (!gl) return false;
+
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
+  if (!vs || !fs) return false;
+
+  program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.warn('WebGL program link error:', gl.getProgramInfoLog(program));
+    return false;
+  }
+
+  gl.useProgram(program);
+
+  // Full screen quad (-1 to 1)
+  const vertices = new Float32Array([
+    -1.0, -1.0,
+     1.0, -1.0,
+    -1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+     1.0,  1.0,
+  ]);
 
-  context.setTransform(1, 0, 0, 1, 0, 0);
-  canvas.value.width = Math.round(viewportWidth * pixelRatio);
-  canvas.value.height = Math.round(viewportHeight * pixelRatio);
-  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-  createParticles();
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+  const positionLocation = gl.getAttribLocation(program, 'a_position');
+  gl.enableVertexAttribArray(positionLocation);
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+  uniformLocations = {
+    resolution: gl.getUniformLocation(program, 'u_resolution'),
+    time: gl.getUniformLocation(program, 'u_time'),
+    dpr: gl.getUniformLocation(program, 'u_dpr'),
+  };
+
+  return true;
 }
 
-function moveParticles() {
-  for (const particle of particles) {
-    particle.homeX += particle.driftX;
-    particle.homeY += particle.driftY;
-    if (particle.homeX < 0 || particle.homeX > viewportWidth) particle.driftX *= -1;
-    if (particle.homeY < 0 || particle.homeY > viewportHeight) particle.driftY *= -1;
-
-    const deltaX = particle.x - pointer.x;
-    const deltaY = particle.y - pointer.y;
-    const distance = Math.hypot(deltaX, deltaY);
-
-    if (distance < pointerRadius) {
-      const force = ((pointerRadius - distance) / pointerRadius) * 0.8;
-      const safeDistance = Math.max(distance, 0.01);
-      particle.velocityX += (deltaX / safeDistance) * force;
-      particle.velocityY += (deltaY / safeDistance) * force;
-    } else {
-      particle.velocityX += (particle.homeX - particle.x) * 0.008;
-      particle.velocityY += (particle.homeY - particle.y) * 0.008;
-    }
+function init2DFallback() {
+  const cvs = canvas.value;
+  if (!cvs) return;
+  ctx2d = cvs.getContext('2d');
+  createFallbackGrid();
+}
 
-    particle.velocityX *= 0.92;
-    particle.velocityY *= 0.92;
-    particle.x += particle.velocityX;
-    particle.y += particle.velocityY;
+function createFallbackGrid() {
+  const gridPitch = 26;
+  const cols = Math.ceil(viewportWidth / gridPitch);
+  const rows = Math.ceil(viewportHeight / gridPitch);
+  const cx = viewportWidth / 2;
+  const cy = viewportHeight / 2;
+  const maxDim = Math.hypot(cx, cy);
+
+  fallbackDots = [];
+  for (let c = 0; c < cols; c++) {
+    for (let r = 0; r < rows; r++) {
+      const x = (c + 0.5) * gridPitch;
+      const y = (r + 0.5) * gridPitch;
+      const dist = Math.hypot(x - cx, y - cy) / maxDim;
+      const hash = Math.abs(Math.sin(c * 12.9898 + r * 78.233) * 43758.5453) % 1;
+      fallbackDots.push({
+        x,
+        y,
+        dist,
+        hash,
+        baseAlpha: 0.12 + 0.42 * hash,
+        noiseDist: dist + (hash - 0.5) * 0.26,
+      });
+    }
   }
 }
 
-function drawParticles() {
-  context.clearRect(0, 0, viewportWidth, viewportHeight);
-  moveParticles();
+function resize() {
+  viewportWidth = window.innerWidth;
+  viewportHeight = window.innerHeight;
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
 
-  for (const particle of particles) {
-    context.beginPath();
-    context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
-    context.fillStyle = particle.color;
-    context.fill();
+  if (canvas.value) {
+    canvas.value.width = Math.round(viewportWidth * dpr);
+    canvas.value.height = Math.round(viewportHeight * dpr);
+  }
+
+  if (isWebGL && gl && program) {
+    gl.viewport(0, 0, canvas.value.width, canvas.value.height);
+    gl.useProgram(program);
+    gl.uniform2f(uniformLocations.resolution, canvas.value.width, canvas.value.height);
+    gl.uniform1f(uniformLocations.dpr, dpr);
+  } else if (ctx2d) {
+    createFallbackGrid();
   }
 }
 
-function animate() {
-  drawParticles();
-  animationFrame = window.requestAnimationFrame(animate);
+function render(timestamp) {
+  const timeSec = (timestamp - startTime) * 0.001;
+
+  if (isWebGL && gl && program) {
+    gl.useProgram(program);
+    gl.uniform1f(uniformLocations.time, timeSec);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  } else if (ctx2d) {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx2d.fillStyle = '#000000';
+    ctx2d.fillRect(0, 0, viewportWidth, viewportHeight);
+
+    const speed1 = 0.22;
+    const cycle1 = 7.0;
+    const t1 = (timeSec * speed1) % cycle1;
+    const waveProgress1 = (t1 / cycle1) * 2.2 - 0.2;
+
+    const speed2 = 0.16;
+    const cycle2 = 8.5;
+    const t2 = (timeSec * speed2 + 3.2) % cycle2;
+    const waveProgress2 = (t2 / cycle2) * 2.2 - 0.2;
+
+    for (const dot of fallbackDots) {
+      const d1 = dot.noiseDist;
+      let fw = 0;
+      if (d1 >= waveProgress1 - 0.55 && d1 <= waveProgress1 + 0.55) {
+        fw = Math.sin(((d1 - (waveProgress1 - 0.55)) / 1.1) * Math.PI);
+      }
+      let rw = 0;
+      if (d1 >= waveProgress2 - 0.65 && d1 <= waveProgress2 + 0.65) {
+        rw = Math.sin(((d1 - (waveProgress2 - 0.65)) / 1.3) * Math.PI);
+      }
+      const anim = Math.max(0, Math.min(1, fw * 0.85 + rw * 0.60 + 0.05));
+      const centerMask = Math.max(0, Math.min(1, (dot.dist - 0.08) / 0.42));
+      const yNorm = 1.0 - dot.y / viewportHeight;
+      const topMask = Math.max(0, Math.min(1, (yNorm - 0.62) / 0.34));
+      const alpha = dot.baseAlpha * anim * centerMask * (1.0 - topMask * 0.85);
+
+      if (alpha > 0.01) {
+        ctx2d.fillStyle = `rgba(255, 255, 255, ${alpha.toFixed(3)})`;
+        ctx2d.beginPath();
+        ctx2d.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
+        ctx2d.fill();
+      }
+    }
+  }
+
+  animationFrame = window.requestAnimationFrame(render);
 }
 
 function startAnimation() {
-  if (animationFrame !== undefined || document.hidden) return;
-  animationFrame = window.requestAnimationFrame(animate);
+  if (animationFrame !== null || document.hidden) return;
+  startTime = performance.now();
+  animationFrame = window.requestAnimationFrame(render);
 }
 
 function stopAnimation() {
-  if (animationFrame === undefined) return;
+  if (animationFrame === null) return;
   window.cancelAnimationFrame(animationFrame);
-  animationFrame = undefined;
-}
-
-function onPointerMove(event) {
-  pointer.x = event.clientX;
-  pointer.y = event.clientY;
+  animationFrame = null;
 }
 
 function onVisibilityChange() {
@@ -114,45 +308,97 @@ function onVisibilityChange() {
 
 onMounted(async () => {
   mounted = true;
-  if (
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    || !window.matchMedia('(pointer: fine)').matches
-  ) return;
-
   enabled.value = true;
   await nextTick();
   if (!mounted) return;
 
-  context = canvas.value?.getContext('2d');
-  if (!context) return;
+  isWebGL = initWebGL();
+  if (!isWebGL) {
+    init2DFallback();
+  }
 
   resize();
-  window.addEventListener('pointermove', onPointerMove, { passive: true });
-  window.addEventListener('resize', resize);
+  window.addEventListener('resize', resize, { passive: true });
   document.addEventListener('visibilitychange', onVisibilityChange);
-  startAnimation();
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    // Render single static frame for reduced motion
+    render(performance.now());
+    stopAnimation();
+  } else {
+    startAnimation();
+  }
 });
 
 onUnmounted(() => {
   mounted = false;
   stopAnimation();
-  window.removeEventListener('pointermove', onPointerMove);
   window.removeEventListener('resize', resize);
   document.removeEventListener('visibilitychange', onVisibilityChange);
+  if (gl && program) {
+    gl.deleteProgram(program);
+    gl.deleteBuffer(buffer);
+  }
 });
 </script>
 
 <template>
-  <canvas v-if="enabled" ref="canvas" class="particle-field" aria-hidden="true"></canvas>
+  <div class="dot-matrix-bg-container" aria-hidden="true">
+    <canvas v-if="enabled" ref="canvas" class="dot-matrix-canvas"></canvas>
+    <!-- Atmospheric Masking Layers -->
+    <div class="atmospheric-mask atmospheric-mask--radial"></div>
+    <div class="atmospheric-mask atmospheric-mask--gradient"></div>
+  </div>
 </template>
 
 <style scoped>
-.particle-field {
+.dot-matrix-bg-container {
   position: fixed;
-  z-index: -1;
+  z-index: 0;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000000;
+  overflow: hidden;
+  pointer-events: none;
+  contain: strict;
+}
+
+.dot-matrix-canvas {
+  position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
+  display: block;
+}
+
+/* Atmospheric masking over particles */
+.atmospheric-mask {
+  position: absolute;
+  inset: 0;
   pointer-events: none;
 }
+
+/* 1. Strong black radial gradient keeping center dark */
+.atmospheric-mask--radial {
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 0, 0, 0.94) 0%,
+    rgba(0, 0, 0, 0.70) 30%,
+    rgba(0, 0, 0, 0.20) 65%,
+    rgba(0, 0, 0, 0.85) 100%
+  );
+}
+
+/* 2. Top-to-bottom black gradient covering upper third */
+.atmospheric-mask--gradient {
+  background: linear-gradient(
+    180deg,
+    #000000 0%,
+    rgba(0, 0, 0, 0.90) 18%,
+    rgba(0, 0, 0, 0.0) 38%,
+    rgba(0, 0, 0, 0.0) 75%,
+    rgba(0, 0, 0, 0.95) 100%
+  );
+}
 </style>
diff --git a/apps/site/src/style.css b/apps/site/src/style.css
index 60c968a4..801407d7 100644
--- a/apps/site/src/style.css
+++ b/apps/site/src/style.css
@@ -52,83 +52,13 @@ body {
   min-width: 320px;
   min-height: 100vh;
   overflow-x: clip;
-  background-color: var(--canvas);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23111113' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
+  background-color: #000000;
   color: var(--ink);
   font-size: 17px;
   font-weight: 400;
   line-height: 1.55;
 }
 
-body::before,
-body::after {
-  position: fixed;
-  z-index: 0;
-  width: clamp(340px, 34vw, 520px);
-  border: 1px solid rgba(43, 137, 255, 0.1);
-  border-radius: 50%;
-  aspect-ratio: 1;
-  content: '';
-  pointer-events: none;
-  will-change: transform;
-}
-
-body::before {
-  top: 12vh;
-  left: clamp(-300px, -18vw, -190px);
-  background:
-    radial-gradient(circle at 64% 32%, rgba(255, 255, 255, 0.78) 0 4%, transparent 5%),
-    radial-gradient(circle at 58% 46%, var(--bubble-cyan), var(--bubble-blue) 42%, rgba(43, 137, 255, 0.035) 67%, transparent 72%);
-  box-shadow:
-    112px 300px 0 -190px rgba(92, 206, 255, 0.13),
-    188px -38px 0 -214px rgba(43, 137, 255, 0.12),
-    32px 30px 100px rgba(43, 137, 255, 0.08);
-  animation: bubble-drift-left 26s ease-in-out -8s infinite;
-}
-
-body::after {
-  right: clamp(-310px, -19vw, -200px);
-  bottom: 8vh;
-  background:
-    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.72) 0 3.5%, transparent 4.5%),
-    radial-gradient(circle at 42% 44%, rgba(92, 206, 255, 0.16), rgba(43, 137, 255, 0.16) 44%, rgba(43, 137, 255, 0.03) 68%, transparent 73%);
-  box-shadow:
-    -128px -236px 0 -202px rgba(92, 206, 255, 0.12),
-    -194px 54px 0 -218px rgba(43, 137, 255, 0.12),
-    -28px 30px 100px rgba(43, 137, 255, 0.08);
-  animation: bubble-drift-right 31s ease-in-out -17s infinite;
-}
-
-@keyframes bubble-drift-left {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-
-  36% {
-    transform: translate3d(14px, -18px, 0) rotate(1.5deg);
-  }
-
-  72% {
-    transform: translate3d(-8px, 12px, 0) rotate(-1deg);
-  }
-}
-
-@keyframes bubble-drift-right {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-
-  42% {
-    transform: translate3d(-16px, 14px, 0) rotate(-1.4deg);
-  }
-
-  76% {
-    transform: translate3d(10px, -16px, 0) rotate(0.9deg);
-  }
-}
-
 #app {
   position: relative;
   z-index: 1;
@@ -263,11 +193,6 @@ code {
 }
 
 @media (max-width: 640px) {
-  body::before,
-  body::after {
-    opacity: 0.72;
-  }
-
   .section {
     margin-top: 48px;
   }