From 4b79cda9f7dfd1dfe9b85d2ffea5d9deb626c43e Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:13:18 +1200
Subject: [PATCH 1/7] feat: modern full-width UX redesign

- Inter for UI/body with JetBrains Mono kept as accent for code/repo names
- Full-width sticky glass header and richer full-width footer
- Homepage: gradient hero with direct platform-aware download button,
  localized product screenshot showcase, refreshed library cards
- Voice section: full-width underline-tab sub-nav
- Modernized blog cards, talk CTA, download pills across all 9 locales
- Shared ConversionTracking component so download clicks track anywhere

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/components/ConversionTracking.astro |  28 ++++++
 src/components/Footer.astro             | 106 +++++++++++++-------
 src/components/Header.astro             |  49 +++++----
 src/components/LanguageSwitcher.astro   |   4 +-
 src/components/NotFound.astro           |   7 +-
 src/components/PostCard.astro           |  14 +--
 src/components/TalkCTA.astro            |  66 ++++++------
 src/components/VoiceDownload.astro      |   9 +-
 src/layouts/Base.astro                  |   4 +-
 src/layouts/Docs.astro                  |  11 +-
 src/layouts/Post.astro                  |   9 +-
 src/layouts/Voice.astro                 |  22 ++--
 src/pages/about.astro                   |   7 +-
 src/pages/blog/index.astro              |   7 +-
 src/pages/de/about.astro                |   7 +-
 src/pages/de/blog/index.astro           |   7 +-
 src/pages/de/index.astro                | 125 ++++++++++++++---------
 src/pages/docs/index.astro              |   9 +-
 src/pages/es/about.astro                |   7 +-
 src/pages/es/blog/index.astro           |   7 +-
 src/pages/es/index.astro                | 125 ++++++++++++++---------
 src/pages/fr/about.astro                |   7 +-
 src/pages/fr/blog/index.astro           |   7 +-
 src/pages/fr/index.astro                | 125 ++++++++++++++---------
 src/pages/index.astro                   | 127 +++++++++++++++---------
 src/pages/it/about.astro                |   7 +-
 src/pages/it/blog/index.astro           |   7 +-
 src/pages/it/index.astro                | 125 ++++++++++++++---------
 src/pages/ja/about.astro                |   7 +-
 src/pages/ja/blog/index.astro           |   7 +-
 src/pages/ja/index.astro                | 125 ++++++++++++++---------
 src/pages/ko/about.astro                |   7 +-
 src/pages/ko/blog/index.astro           |   7 +-
 src/pages/ko/index.astro                | 125 ++++++++++++++---------
 src/pages/zh-hant/about.astro           |   7 +-
 src/pages/zh-hant/blog/index.astro      |   7 +-
 src/pages/zh-hant/index.astro           | 125 ++++++++++++++---------
 src/pages/zh/about.astro                |   7 +-
 src/pages/zh/blog/index.astro           |   7 +-
 src/pages/zh/index.astro                | 125 ++++++++++++++---------
 src/styles/global.css                   |  69 ++++++++++++-
 41 files changed, 1045 insertions(+), 615 deletions(-)
 create mode 100644 src/components/ConversionTracking.astro

diff --git a/src/components/ConversionTracking.astro b/src/components/ConversionTracking.astro
new file mode 100644
index 0000000..a30b96e
--- /dev/null
+++ b/src/components/ConversionTracking.astro
@@ -0,0 +1,28 @@
+---
+// Google Ads conversion wiring for any `a[data-conversion]` on the page.
+// Include once per component that renders conversion links (Astro dedupes the
+// bundled script); the per-element guard keeps a link from ever being bound
+// twice even if two components include it on the same page.
+---
+
+<script>
+  // Google Ads conversion labels — the value after the slash from
+  // Google Ads → Tools → Conversions → "<name>" → Tag setup.
+  const CONVERSIONS: Record<string, string> = {
+    mailto_click: 'AW-18128547216/wIcbCOfc66QcEJDbrsRD',
+  };
+
+  function fireConversion(name: string | undefined) {
+    const sendTo = name && CONVERSIONS[name];
+    // @ts-expect-error gtag is injected globally by Base.astro
+    if (!sendTo || typeof gtag !== 'function') return;
+    // @ts-expect-error gtag is injected globally by Base.astro
+    gtag('event', 'conversion', { send_to: sendTo });
+  }
+
+  document.querySelectorAll<HTMLAnchorElement>('a[data-conversion]').forEach((el) => {
+    if (el.dataset.convBound) return;
+    el.dataset.convBound = '1';
+    el.addEventListener('click', () => fireConversion(el.dataset.conversion));
+  });
+</script>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index fb7d44c..f5435cb 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -6,7 +6,18 @@ import { resolveLocale, localesForPath, localizedPath, t } from '../lib/i18n';
 
 const { code: lang } = resolveLocale(Astro.url.pathname);
 const ui = t(lang);
-const aboutHref = localesForPath('/about/').includes(lang) ? localizedPath('/about/', lang) : '/about/';
+const localeHref = (path: string) =>
+  localesForPath(path).includes(lang) ? localizedPath(path, lang) : path;
+
+// Sitemap links reuse the localized chrome strings — no new translations needed.
+const links = [
+  { href: localeHref('/voice/'), label: ui.navVoice },
+  { href: localeHref('/voice/download/'), label: ui.subDownload },
+  { href: localeHref('/voice/changelog/'), label: ui.subChangelog },
+  { href: '/docs', label: ui.navDocs },
+  { href: localeHref('/blog/'), label: ui.navBlog },
+  { href: localeHref('/about/'), label: ui.footerAbout },
+];
 
 let siteVersion: string;
 try {
@@ -16,48 +27,67 @@ try {
 }
 ---
 
-<footer class="border-t border-gray-100 dark:border-white/10 pt-6 flex items-center justify-between text-xs text-gray-400 dark:text-gray-600">
-  <div class="flex items-center gap-3">
-    <a
-      href="https://github.com/wavekat"
-      target="_blank"
-      rel="noopener noreferrer"
-      title="GitHub"
-      class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
-    >
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-      <span class="sr-only">GitHub</span>
-    </a>
+<footer class="mt-20 border-t border-gray-100 bg-gray-50/60 dark:border-white/10 dark:bg-wk-surface/40">
+  <div class="mx-auto max-w-6xl px-6 pt-12">
+  <div class="flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between">
+    <div class="flex flex-col gap-4">
+      <a href={localizedPath('/', lang)} class="block w-fit">
+        <img src="/logos/wavekat-tight-light.svg" alt="wavekat" width="97" height="28" class="h-7 dark:hidden" />
+        <img src="/logos/wavekat-tight-dark.svg" alt="wavekat" width="97" height="28" class="h-7 hidden dark:block" />
+      </a>
+      <div class="flex items-center gap-1 text-gray-400 dark:text-gray-500">
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="GitHub"
+          class="rounded-full p-2 transition-colors hover:bg-gray-900/5 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-300"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          <span class="sr-only">GitHub</span>
+        </a>
+        <a
+          href="https://www.linkedin.com/company/wavekat/"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="LinkedIn"
+          class="rounded-full p-2 transition-colors hover:bg-gray-900/5 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-300"
+        >
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
+          <span class="sr-only">LinkedIn</span>
+        </a>
+        <a
+          href="mailto:eason@wavekat.com"
+          title={ui.footerEmail}
+          class="rounded-full p-2 transition-colors hover:bg-gray-900/5 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-300"
+        >
+          <Mail class="w-5 h-5" />
+          <span class="sr-only">{ui.footerEmail}</span>
+        </a>
+      </div>
+    </div>
+    <nav class="grid grid-cols-2 gap-x-10 gap-y-2.5 sm:text-right">
+      {links.map((link) => (
+        <a
+          href={link.href}
+          class="text-sm text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        >
+          {link.label}
+        </a>
+      ))}
+    </nav>
+  </div>
+  <div class="mt-10 flex items-center justify-between border-t border-gray-100 py-5 text-xs text-gray-400 dark:border-white/10 dark:text-gray-600">
+    <span>© {new Date().getFullYear()} WaveKat</span>
     <a
-      href="https://www.linkedin.com/company/wavekat/"
+      href="https://github.com/wavekat/wavekat.com"
       target="_blank"
       rel="noopener noreferrer"
-      title="LinkedIn"
-      class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
-    >
-      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg>
-      <span class="sr-only">LinkedIn</span>
-    </a>
-    <a
-      href="mailto:eason@wavekat.com"
-      title={ui.footerEmail}
-      class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
+      title={ui.footerSource}
+      class="font-mono transition-colors hover:text-gray-600 dark:hover:text-gray-400"
     >
-      <Mail class="w-5 h-5" />
-      <span class="sr-only">{ui.footerEmail}</span>
+      {siteVersion}
     </a>
   </div>
-  <a
-    href="https://github.com/wavekat/wavekat.com"
-    target="_blank"
-    rel="noopener noreferrer"
-    title={ui.footerSource}
-    class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
-  >
-    {siteVersion}
-  </a>
-  <div class="flex items-center gap-3">
-    <a href={aboutHref} class="hover:text-gray-600 dark:hover:text-gray-400 transition-colors">{ui.footerAbout}</a>
-    <span>© {new Date().getFullYear()} WaveKat</span>
   </div>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f8655e5..981845f 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -19,33 +19,38 @@ const localeHref = (path: string) =>
   localesForPath(path).includes(lang) ? localizedPath(path, lang) : path;
 
 // `whitespace-nowrap` keeps each label on one line — without it the flex row
-// squeezes the pills on a narrow (mobile) viewport and CJK labels (语音, 简体中文)
+// squeezes the links on a narrow (mobile) viewport and CJK labels (语音, 简体中文)
 // break between characters, since CJK text has no word boundaries. The header
 // wraps the nav group to its own line instead (flex-wrap below).
-const pillClass = (isActive: boolean) =>
+const linkClass = (isActive: boolean) =>
   isActive
-    ? 'text-xs font-bold rounded px-3 py-1 whitespace-nowrap text-gray-700 dark:text-gray-200 border border-gray-400 dark:border-white/30 transition-colors'
-    : 'text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors border border-gray-200 dark:border-white/10 rounded px-3 py-1 whitespace-nowrap';
+    ? 'text-sm font-semibold whitespace-nowrap px-2.5 py-1 rounded-full text-wk-orange bg-wk-orange/10 transition-colors'
+    : 'text-sm font-medium whitespace-nowrap px-2.5 py-1 rounded-full text-gray-500 hover:text-gray-900 hover:bg-gray-900/5 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/5 transition-colors';
 ---
 
-<header class="flex flex-wrap items-center justify-between gap-y-3 mb-12">
-  <a href={homeHref} class="block">
-    <img src="/logos/wavekat-tight-light.svg" alt="wavekat" width="125" height="36" class="h-9 dark:hidden" />
-    <img src="/logos/wavekat-tight-dark.svg" alt="wavekat" width="125" height="36" class="h-9 hidden dark:block" />
-  </a>
-  <div class="flex items-center gap-3">
-    <a href={localeHref('/voice/')} class={pillClass(active === 'voice')}>{ui.navVoice}</a>
-    <a href="/docs" class={pillClass(active === 'docs')}>{ui.navDocs}</a>
-    <a href={localeHref('/blog/')} class={pillClass(active === 'blog')}>{ui.navBlog}</a>
-    <LanguageSwitcher />
-    <button
-      id="theme-toggle"
-      aria-label="Toggle theme"
-      class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
-    >
-      <Sun class="w-4 h-4 dark:hidden" />
-      <Moon class="w-4 h-4 hidden dark:block" />
-    </button>
+<header class="sticky top-0 z-40 border-b border-gray-200/60 bg-white/80 backdrop-blur-xl dark:border-white/5 dark:bg-wk-bg/80">
+  <div
+    class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-x-4 gap-y-2 px-6 py-3"
+  >
+    <a href={homeHref} class="block shrink-0">
+      <img src="/logos/wavekat-tight-light.svg" alt="wavekat" width="111" height="32" class="h-8 dark:hidden" />
+      <img src="/logos/wavekat-tight-dark.svg" alt="wavekat" width="111" height="32" class="h-8 hidden dark:block" />
+    </a>
+    <nav class="flex flex-wrap items-center gap-1.5">
+      <a href={localeHref('/voice/')} class={linkClass(active === 'voice')}>{ui.navVoice}</a>
+      <a href="/docs" class={linkClass(active === 'docs')}>{ui.navDocs}</a>
+      <a href={localeHref('/blog/')} class={linkClass(active === 'blog')}>{ui.navBlog}</a>
+      <span class="mx-1 hidden h-4 w-px bg-gray-200 dark:bg-white/10 sm:block" aria-hidden="true"></span>
+      <LanguageSwitcher />
+      <button
+        id="theme-toggle"
+        aria-label="Toggle theme"
+        class="rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-900/5 hover:text-gray-700 dark:hover:bg-white/5 dark:hover:text-gray-200"
+      >
+        <Sun class="w-4 h-4 dark:hidden" />
+        <Moon class="w-4 h-4 hidden dark:block" />
+      </button>
+    </nav>
   </div>
 </header>
 
diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
index cf5eb67..a31913a 100644
--- a/src/components/LanguageSwitcher.astro
+++ b/src/components/LanguageSwitcher.astro
@@ -23,7 +23,7 @@ const label = t(lang).switcherLabel;
       aria-expanded="false"
       aria-label={label}
       data-lang-trigger
-      class="flex items-center gap-1.5 whitespace-nowrap rounded border border-gray-200 px-2.5 py-1 text-xs text-gray-500 transition-colors hover:text-gray-700 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-200"
+      class="flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1.5 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-900/5 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200"
     >
       <Globe class="h-3.5 w-3.5" />
       <span>{current}</span>
@@ -34,7 +34,7 @@ const label = t(lang).switcherLabel;
       data-lang-menu
       hidden
       role="menu"
-      class="absolute right-0 top-full z-40 mt-2 hidden min-w-[10rem] flex-col gap-0.5 rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-wk-surface"
+      class="absolute right-0 top-full z-40 mt-2 hidden min-w-[10rem] flex-col gap-0.5 rounded-xl border border-gray-200 bg-white/95 p-1.5 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-wk-surface/95"
     >
       {items.map((item) => (
         <a
diff --git a/src/components/NotFound.astro b/src/components/NotFound.astro
index 7e35333..e6547df 100644
--- a/src/components/NotFound.astro
+++ b/src/components/NotFound.astro
@@ -13,9 +13,9 @@ const ui = t(lang);
 ---
 
 <Base title={`${ui.notFoundTitle} — WaveKat`} description={ui.notFoundBody} noindex>
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-20 py-16 text-center">
       <p class="text-6xl font-bold mb-6" style="color: #ff6d00;">404</p>
@@ -30,6 +30,7 @@ const ui = t(lang);
       </div>
     </section>
 
-    <Footer />
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 7832e18..779a0ee 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -18,22 +18,22 @@ const formatDate = (d: Date) =>
 
 <a
   href={`${hrefBase}${slug}`}
-  class="group block rounded border border-gray-200 dark:border-white/10 p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
+  class="group block rounded-2xl border border-gray-200/80 bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-wk-orange/40 hover:shadow-lg hover:shadow-wk-orange/5 dark:border-white/10 dark:bg-wk-surface dark:hover:border-wk-orange/40"
 >
-  <time datetime={date.toISOString()} class="text-[10px] text-gray-400 dark:text-gray-600 tracking-wide uppercase">
+  <time datetime={date.toISOString()} class="font-mono text-[11px] uppercase tracking-wider text-gray-400 dark:text-gray-500">
     {formatDate(date)}
   </time>
-  <h3 class="text-sm font-bold text-gray-900 dark:text-white mt-1.5 mb-1.5 group-hover:underline underline-offset-2">
+  <h3 class="mt-2 mb-2 text-base font-semibold leading-snug text-gray-900 transition-colors group-hover:text-wk-orange dark:text-white">
     {title}
   </h3>
-  <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-3">
+  <p class="mb-4 text-sm leading-relaxed text-gray-500 dark:text-gray-400">
     {description}
   </p>
   {tags.length > 0 && (
-    <div class="flex flex-wrap gap-3">
+    <div class="flex flex-wrap gap-2">
       {tags.map((tag) => (
-        <span class="text-[10px] tracking-wider uppercase text-gray-400 dark:text-gray-600">
-          #{tag}
+        <span class="rounded-full bg-gray-900/5 px-2.5 py-0.5 font-mono text-[10px] tracking-wider text-gray-500 dark:bg-white/5 dark:text-gray-400">
+          {tag}
         </span>
       ))}
     </div>
diff --git a/src/components/TalkCTA.astro b/src/components/TalkCTA.astro
index 26ec17c..157308b 100644
--- a/src/components/TalkCTA.astro
+++ b/src/components/TalkCTA.astro
@@ -1,5 +1,6 @@
 ---
 import { Mail } from '@lucide/astro';
+import ConversionTracking from './ConversionTracking.astro';
 import { resolveLocale, t } from '../lib/i18n';
 
 interface Props {
@@ -15,49 +16,40 @@ const ui = t(lang);
 ---
 
 <section class={marginTop}>
-  <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">{ui.talkHeading}</h2>
-  <div class="rounded p-5 bg-gray-50 dark:bg-wk-surface">
-    <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-xl">
-      {ui.talkBody}
-    </p>
-
-    <a
-      href={emailHref}
-      data-conversion="mailto_click"
-      class="inline-flex items-center gap-2 rounded px-4 py-2.5 text-xs font-bold text-white transition-opacity hover:opacity-90"
-      style="background-color: #ff6d00"
+  <h2 class="mb-5 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">{ui.talkHeading}</h2>
+  <div class="relative overflow-hidden rounded-2xl border border-gray-200/80 bg-gray-50/50 p-7 dark:border-white/10 dark:bg-wk-surface">
+    <div
+      class="pointer-events-none absolute -right-20 -top-24 h-64 w-64 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
     >
-      <Mail class="w-4 h-4" />
-      {ui.talkButton}
-    </a>
+    </div>
+    <div class="relative">
+      <p class="mb-6 max-w-xl text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+        {ui.talkBody}
+      </p>
 
-    <p class="text-xs text-gray-400 dark:text-gray-600 mt-4 leading-relaxed">
-      {ui.talkWritePre}
       <a
         href={emailHref}
         data-conversion="mailto_click"
-        class="text-gray-600 dark:text-gray-300 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors"
+        class="inline-flex items-center gap-2 rounded-full bg-wk-orange px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
       >
-        eason@wavekat.com
-      </a>{ui.talkWritePost}
-    </p>
+        <Mail class="w-4 h-4" />
+        {ui.talkButton}
+      </a>
+
+      <p class="mt-5 text-xs leading-relaxed text-gray-400 dark:text-gray-500">
+        {ui.talkWritePre}
+        <a
+          href={emailHref}
+          data-conversion="mailto_click"
+          class="text-gray-600 underline underline-offset-2 transition-colors hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+        >
+          eason@wavekat.com
+        </a>{ui.talkWritePost}
+      </p>
+    </div>
   </div>
 </section>
 
-<script is:inline>
-  // Google Ads conversion label — the value after the slash from
-  // Google Ads → Tools → Conversions → "mailto click" → Tag setup.
-  const CONVERSIONS = {
-    mailto_click: 'AW-18128547216/wIcbCOfc66QcEJDbrsRD',
-  };
-
-  function fireConversion(name) {
-    const sendTo = CONVERSIONS[name];
-    if (!sendTo || sendTo.includes('REPLACE_WITH_') || typeof gtag !== 'function') return;
-    gtag('event', 'conversion', { send_to: sendTo });
-  }
-
-  document.querySelectorAll('a[data-conversion]').forEach((el) => {
-    el.addEventListener('click', () => fireConversion(el.dataset.conversion));
-  });
-</script>
+<ConversionTracking />
diff --git a/src/components/VoiceDownload.astro b/src/components/VoiceDownload.astro
index ceca43e..1b0458b 100644
--- a/src/components/VoiceDownload.astro
+++ b/src/components/VoiceDownload.astro
@@ -8,6 +8,7 @@
 // inline script promotes Linux when it detects a Linux user-agent. With JS
 // off, the native <details> still lets anyone reach the other build.
 import { Apple, Package, ChevronDown } from '@lucide/astro';
+import ConversionTracking from './ConversionTracking.astro';
 import { getMacDownload, getLinuxDownload } from '../lib/voice-download';
 import { resolveLocale, t } from '../lib/i18n';
 
@@ -36,8 +37,8 @@ const DEFAULT = 'mac';
 // lets `inline-flex` win the `display` race and `hidden` silently does nothing.
 const primaryCls =
   variant === 'cta'
-    ? 'items-center gap-2.5 rounded px-5 py-3 text-sm font-bold text-white transition-opacity hover:opacity-90'
-    : 'group items-center gap-2.5 rounded-lg px-5 py-3 text-sm font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5';
+    ? 'items-center gap-2.5 rounded-full px-6 py-3 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-[#ff6d00]/30'
+    : 'group items-center gap-2.5 rounded-full px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-[#ff6d00]/25 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/35 hover:-translate-y-0.5';
 ---
 
 <div class="inline-flex flex-wrap items-center gap-3" data-voice-download>
@@ -61,7 +62,7 @@ const primaryCls =
       {ui.dlOther}
       <ChevronDown class="h-3.5 w-3.5 transition-transform group-open:rotate-180" />
     </summary>
-    <div class="absolute left-0 top-full z-20 mt-2 flex min-w-[15rem] flex-col gap-1 rounded-lg border border-gray-200 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-wk-surface">
+    <div class="absolute left-0 top-full z-20 mt-2 flex min-w-[15rem] flex-col gap-1 rounded-xl border border-gray-200 bg-white/95 p-1.5 shadow-xl backdrop-blur-xl dark:border-white/10 dark:bg-wk-surface/95">
       {platforms.map((p) => (
         <a
           href={p.dl.url}
@@ -83,6 +84,8 @@ const primaryCls =
   </details>
 </div>
 
+<ConversionTracking />
+
 <script is:inline>
   // Promote the visitor's platform to the primary button. Runs synchronously
   // as the markup is parsed, so there's no flash of the wrong default. Only
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 38f975d..4812fe7 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -149,11 +149,11 @@ const orgSchema = {
     <link
       rel="preload"
       as="style"
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap"
       onload="this.onload=null;this.rel='stylesheet'"
     />
     <noscript>
-      <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
+      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
     </noscript>
     <!-- Google tag (GA4 + Google Ads) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-H8ZGBL04R7"></script>
diff --git a/src/layouts/Docs.astro b/src/layouts/Docs.astro
index 36910ef..1ba8581 100644
--- a/src/layouts/Docs.astro
+++ b/src/layouts/Docs.astro
@@ -25,12 +25,12 @@ const backLabel = isProductIndex ? 'all docs' : productLabel(productSlug);
 ---
 
 <Base title={`${title} — WaveKat Docs`} description={description} ogImage={ogImage}>
-  <div class="max-w-6xl mx-auto px-6 py-12">
+  <Header active="docs" />
 
-    <Header active="docs" />
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <div class="grid grid-cols-1 md:grid-cols-[200px_minmax(0,1fr)] gap-12">
-      <aside class="md:sticky md:top-8 md:self-start">
+      <aside class="md:sticky md:top-24 md:self-start">
         <DocsSidebar activeId={activeId} />
       </aside>
 
@@ -57,9 +57,8 @@ const backLabel = isProductIndex ? 'all docs' : productLabel(productSlug);
       </main>
     </div>
 
-    <div class="mt-20">
-      <Footer />
-    </div>
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index 40a889d..7139615 100644
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -43,9 +43,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
   article={{ publishedTime: date, modifiedTime: updated, author: author || 'WaveKat', tags }}
   noindex={noindex}
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Post meta -->
     <div class="mb-8">
@@ -92,12 +92,11 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       </a>
     </div>
 
-    <div class="mt-20">
-      <Footer />
-    </div>
 
   </div>
 
+  <Footer />
+
   <!-- JSON-LD structured data -->
   <script
     type="application/ld+json"
diff --git a/src/layouts/Voice.astro b/src/layouts/Voice.astro
index d19bb20..d4d059e 100644
--- a/src/layouts/Voice.astro
+++ b/src/layouts/Voice.astro
@@ -68,12 +68,11 @@ const crumbSchema = crumbLabels[basePath]
 ---
 
 <Base title={`${title} — WaveKat`} description={description}>
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="voice" />
 
-    <Header active="voice" />
-
-    <!-- Sub-nav -->
-    <nav class="flex flex-wrap items-center gap-3 mb-12">
+  <!-- Sub-nav -->
+  <div class="border-b border-gray-100 dark:border-white/10">
+    <nav class="mx-auto flex max-w-6xl items-center gap-1 overflow-x-auto px-6">
       {subNav.map((item) => {
         const active = isActive(item.href);
         return (
@@ -81,24 +80,25 @@ const crumbSchema = crumbLabels[basePath]
             href={localeHref(item.href)}
             class={
               active
-                ? 'text-xs font-bold rounded px-3 py-1 transition-colors'
-                : 'text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors border border-gray-200 dark:border-white/10 rounded px-3 py-1'
+                ? 'whitespace-nowrap border-b-2 border-wk-orange px-3 py-3 text-sm font-semibold text-wk-orange transition-colors'
+                : 'whitespace-nowrap border-b-2 border-transparent px-3 py-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-900 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-white transition-colors'
             }
-            style={active ? 'color: #ff6d00; border: 1px solid #ff6d0060;' : ''}
           >
             {item.label}
           </a>
         );
       })}
     </nav>
+  </div>
+
+  <div class="max-w-3xl mx-auto px-6 pt-12 pb-12">
 
     <slot />
 
-    <div class="mt-20">
-      <Footer />
-    </div>
 
   </div>
 
+  <Footer />
+
   {crumbSchema && <script type="application/ld+json" set:html={JSON.stringify(crumbSchema)} />}
 </Base>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 94d3f38..26021b3 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="About — WaveKat"
   description="WaveKat builds open-source, AI-powered voice tools that give small businesses the voice of a big one. What we build, why, and how to reach us."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -91,8 +91,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 137f168..5c111cc 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -14,9 +14,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="Blog — WaveKat" description="Engineering notes, announcements, and deep-dives from the WaveKat team.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -42,9 +42,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/de/about.astro b/src/pages/de/about.astro
index 0637bc6..51b317f 100644
--- a/src/pages/de/about.astro
+++ b/src/pages/de/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="Über uns — WaveKat"
   description="WaveKat baut quelloffene, KI-gestützte Sprachtools, die jedem kleinen Unternehmen die Stimme eines großen geben. Was wir bauen, warum und wie Sie uns erreichen."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/de/blog/index.astro b/src/pages/de/blog/index.astro
index 5808f7e..65f6618 100644
--- a/src/pages/de/blog/index.astro
+++ b/src/pages/de/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="Blog — WaveKat" description="Technische Notizen, Ankündigungen und Hintergrundartikel vom WaveKat-Team.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/de/index.astro b/src/pages/de/index.astro
index 4c2fb6e..ca1b110 100644
--- a/src/pages/de/index.astro
+++ b/src/pages/de/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,95 +68,126 @@ const toolsAndClients = [
   title="WaveKat — quelloffene KI-Sprachtools für kleine Unternehmen"
   description="WaveKat baut quelloffene, KI-gestützte Tools, mit denen auch kleine Unternehmen Fähigkeiten bekommen, die früher nur großen Firmen vorbehalten waren — beginnend mit Sprache: eine Desktop-App, die Ihren Computer in Ihr Geschäftstelefon verwandelt und jedes Gespräch aufzeichnet und mitschreibt."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        Geben Sie jedem kleinen Unternehmen<br />die Stimme eines großen.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/de/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        kostenlose öffentliche Beta
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        Geben Sie jedem kleinen Unternehmen<br />
+        <span class="text-gradient-brand">die Stimme eines großen.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat baut KI-gestützte Tools, mit denen auch kleine Unternehmen Fähigkeiten bekommen, die
         früher nur großen Firmen vorbehalten waren. Wir beginnen mit Sprache — eine Desktop-App, die Ihren
         Computer in Ihr Geschäftstelefon verwandelt und jedes Gespräch aufzeichnet und mitschreibt.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          Auf GitHub ansehen
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Unsere App</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Unsere App</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              kostenlose öffentliche Beta
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            Eine Telefon-App für Ihren Computer. Nehmen Sie Anrufe entgegen und tätigen Sie Anrufe direkt
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                kostenlose öffentliche Beta
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              Eine Telefon-App für Ihren Computer. Nehmen Sie Anrufe entgegen und tätigen Sie Anrufe direkt
             vom Desktop — jedes Gespräch wird für Sie aufgezeichnet und mitgeschrieben, über den
             Telefonanbieter, den Sie bereits haben. Sie können sogar einen KI-Assistenten für sich Anrufe tätigen lassen.
-          </p>
-          <a
-            href="/de/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            Mehr erfahren &amp; herunterladen
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/de/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              Mehr erfahren &amp; herunterladen
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/de.webp"
+            alt="WaveKat Voice während eines Anrufs, mit in Echtzeit mitgeschriebenem Transkript"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Bibliotheken</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliotheken</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">Sprach-Pipeline</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Sprach-Pipeline</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">Tools & Clients</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Tools & Clients</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -163,7 +195,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/docs/index.astro b/src/pages/docs/index.astro
index c680b5e..d64298e 100644
--- a/src/pages/docs/index.astro
+++ b/src/pages/docs/index.astro
@@ -29,9 +29,9 @@ const products = PRODUCTS
 ---
 
 <Base title="Docs — WaveKat" description="Documentation for the WaveKat ecosystem.">
-  <div class="max-w-6xl mx-auto px-6 py-12">
+  <Header active="docs" />
 
-    <Header active="docs" />
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <div class="grid grid-cols-1 md:grid-cols-[200px_minmax(0,1fr)] gap-12">
       <aside class="md:sticky md:top-8 md:self-start">
@@ -66,9 +66,8 @@ const products = PRODUCTS
       </main>
     </div>
 
-    <div class="mt-20">
-      <Footer />
-    </div>
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/es/about.astro b/src/pages/es/about.astro
index be0de29..228001f 100644
--- a/src/pages/es/about.astro
+++ b/src/pages/es/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="Acerca de — WaveKat"
   description="WaveKat crea herramientas de voz de código abierto con IA que dan a cada pequeño negocio la voz de uno grande. Qué construimos, por qué y cómo contactarnos."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/es/blog/index.astro b/src/pages/es/blog/index.astro
index 29ec8a0..cd9d0ad 100644
--- a/src/pages/es/blog/index.astro
+++ b/src/pages/es/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="Blog — WaveKat" description="Notas de ingeniería, anuncios y análisis en profundidad del equipo de WaveKat.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index 296f7fa..91a8a16 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,95 +68,126 @@ const toolsAndClients = [
   title="WaveKat — herramientas de voz de IA, de código abierto, para pequeñas empresas"
   description="WaveKat crea herramientas de código abierto e impulsadas por IA que dan a las pequeñas empresas capacidades que antes solo las grandes podían permitirse. Empezamos por la voz: una app de escritorio que convierte su computadora en su línea de empresa y graba y transcribe cada llamada."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        Dele a cada pequeña empresa<br />la voz de una grande.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/es/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        beta pública gratuita
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        Dele a cada pequeña empresa<br />
+        <span class="text-gradient-brand">la voz de una grande.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat crea herramientas impulsadas por IA que dan a las pequeñas empresas el tipo de
         capacidades que antes solo las grandes podían permitirse. Empezamos por la voz: una app de
         escritorio que convierte su computadora en su línea de empresa y graba y transcribe cada llamada.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          Ver en GitHub
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Nuestra app</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Nuestra app</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              beta pública gratuita
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            Una app de teléfono para su computadora. Conteste y haga llamadas desde su escritorio,
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                beta pública gratuita
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              Una app de teléfono para su computadora. Conteste y haga llamadas desde su escritorio,
             con cada conversación grabada y transcrita por usted, usando el proveedor de telefonía que ya tiene.
             Incluso puede dejar que un asistente de IA realice llamadas por usted.
-          </p>
-          <a
-            href="/es/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            Más información y descarga
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/es/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              Más información y descarga
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/es.webp"
+            alt="WaveKat Voice durante una llamada, con la transcripción escrita en tiempo real"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Librerías</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerías</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">Pipeline de voz</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline de voz</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">Herramientas y clientes</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Herramientas y clientes</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -163,7 +195,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/fr/about.astro b/src/pages/fr/about.astro
index ed73e6f..4eb302c 100644
--- a/src/pages/fr/about.astro
+++ b/src/pages/fr/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="À propos — WaveKat"
   description="WaveKat crée des outils vocaux open source dopés à l'IA qui donnent à chaque petite entreprise la voix d'une grande. Ce que nous construisons, pourquoi et comment nous joindre."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/fr/blog/index.astro b/src/pages/fr/blog/index.astro
index 6cc90c5..bf874b9 100644
--- a/src/pages/fr/blog/index.astro
+++ b/src/pages/fr/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="Blog — WaveKat" description="Notes d’ingénierie, annonces et analyses approfondies de l’équipe WaveKat.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/fr/index.astro b/src/pages/fr/index.astro
index 63e9d4f..f31c009 100644
--- a/src/pages/fr/index.astro
+++ b/src/pages/fr/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,95 +68,126 @@ const toolsAndClients = [
   title="WaveKat — des outils vocaux IA open source pour les petites entreprises"
   description="WaveKat conçoit des outils open source propulsés par l’IA qui donnent aux petites entreprises des capacités autrefois réservées aux grandes — à commencer par la voix : une application de bureau qui transforme votre ordinateur en ligne professionnelle, enregistrant et retranscrivant chaque appel."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        Donner à chaque petite entreprise<br />la voix d’une grande.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/fr/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        bêta publique gratuite
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        Donner à chaque petite entreprise<br />
+        <span class="text-gradient-brand">la voix d’une grande.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat conçoit des outils propulsés par l’IA qui donnent aux petites entreprises le genre de
         capacités autrefois réservées aux grandes. Nous commençons par la voix — une application de bureau
         qui transforme votre ordinateur en ligne professionnelle, enregistrant et retranscrivant chaque appel.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          Voir sur GitHub
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Notre application</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Notre application</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              bêta publique gratuite
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            Une application de téléphonie pour votre ordinateur. Recevez et passez des appels depuis votre
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                bêta publique gratuite
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              Une application de téléphonie pour votre ordinateur. Recevez et passez des appels depuis votre
             bureau, chaque conversation étant enregistrée et retranscrite pour vous — avec l’opérateur
             téléphonique que vous avez déjà. Vous pouvez même laisser un assistant IA passer des appels à votre place.
-          </p>
-          <a
-            href="/fr/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            En savoir plus et télécharger
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/fr/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              En savoir plus et télécharger
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/fr.webp"
+            alt="WaveKat Voice pendant un appel, avec la transcription rédigée en temps réel"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Bibliothèques</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliothèques</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">Pipeline vocal</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline vocal</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">Outils et clients</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Outils et clients</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -163,7 +195,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7e9c856..50c7cae 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,6 +2,7 @@
 import Base from '../layouts/Base.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
+import VoiceDownload from '../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -60,95 +61,126 @@ const toolsAndClients = [
 ---
 
 <Base>
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        Give every small business<br />the voice of a big one.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        free public beta
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        Give every small business<br />
+        <span class="text-gradient-brand">the voice of a big one.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat builds AI-powered tools that give small businesses the kind of capabilities only big
         companies used to afford. We start with voice — a desktop app that turns your computer into your
         business line, recording and writing down every call.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          View on GitHub
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Our app</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Our app</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              free public beta
-            </span>
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                free public beta
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              A phone app for your computer. Answer and place calls from your desktop, with every
+              conversation recorded and written down for you — using the phone provider you already have.
+              You can even let an AI assistant place calls for you.
+            </p>
+            <a
+              href="/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              Learn more &amp; download
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
           </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            A phone app for your computer. Answer and place calls from your desktop, with every
-            conversation recorded and written down for you — using the phone provider you already have.
-            You can even let an AI assistant place calls for you.
-          </p>
-          <a
-            href="/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            Learn more &amp; download
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+          <img
+            src="/screenshots/in-call/en.webp"
+            alt="WaveKat Voice during a live call, with the transcript written down in real time"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Libraries</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Libraries</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">Voice pipeline</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Voice pipeline</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">Tools & clients</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Tools &amp; clients</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -156,7 +188,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/it/about.astro b/src/pages/it/about.astro
index 6cdb18b..64b8b3d 100644
--- a/src/pages/it/about.astro
+++ b/src/pages/it/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="Chi siamo — WaveKat"
   description="WaveKat crea strumenti vocali open source basati sull'IA che danno a ogni piccola impresa la voce di una grande. Cosa costruiamo, perché e come contattarci."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/it/blog/index.astro b/src/pages/it/blog/index.astro
index 1b31885..5e2d808 100644
--- a/src/pages/it/blog/index.astro
+++ b/src/pages/it/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="Blog — WaveKat" description="Note di ingegneria, annunci e approfondimenti dal team WaveKat.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/it/index.astro b/src/pages/it/index.astro
index f51c2f3..249fd2e 100644
--- a/src/pages/it/index.astro
+++ b/src/pages/it/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,95 +68,126 @@ const toolsAndClients = [
   title="WaveKat — strumenti vocali AI open source per le piccole imprese"
   description="WaveKat crea strumenti open source basati su AI che danno alle piccole imprese capacità un tempo riservate solo alle grandi aziende — a partire dalla voce: un’app desktop che trasforma il tuo computer in un telefono aziendale, registrando e trascrivendo ogni chiamata."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        Dai a ogni piccola impresa<br />la voce di una grande.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/it/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        beta pubblica gratuita
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        Dai a ogni piccola impresa<br />
+        <span class="text-gradient-brand">la voce di una grande.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat crea strumenti basati su AI che danno alle piccole imprese le capacità un tempo
         riservate solo alle grandi aziende. Iniziamo dalla voce — un’app desktop che trasforma il
         tuo computer nella tua linea aziendale, registrando e trascrivendo ogni chiamata.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          Vedi su GitHub
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">La nostra app</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">La nostra app</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              beta pubblica gratuita
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            Un’app telefonica per il tuo computer. Rispondi ed effettua chiamate dal desktop, con ogni
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                beta pubblica gratuita
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              Un’app telefonica per il tuo computer. Rispondi ed effettua chiamate dal desktop, con ogni
             conversazione registrata e trascritta per te — usando l’operatore telefonico che hai già.
             Puoi persino lasciare che un assistente AI effettui chiamate per te.
-          </p>
-          <a
-            href="/it/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            Scopri di più e scarica
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/it/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              Scopri di più e scarica
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/it.webp"
+            alt="WaveKat Voice durante una chiamata, con la trascrizione scritta in tempo reale"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">Librerie</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerie</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">Pipeline vocale</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline vocale</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">Strumenti e client</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Strumenti e client</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -163,7 +195,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/ja/about.astro b/src/pages/ja/about.astro
index e30855f..27890bf 100644
--- a/src/pages/ja/about.astro
+++ b/src/pages/ja/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="WaveKat について"
   description="WaveKat は、小さなビジネスに大企業の声を届けるオープンソースの AI 音声ツールを開発しています。何を作り、なぜ作るのか、そしてどう連絡できるかをご紹介します。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/ja/blog/index.astro b/src/pages/ja/blog/index.astro
index e1c0695..67f4115 100644
--- a/src/pages/ja/blog/index.astro
+++ b/src/pages/ja/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="ブログ — WaveKat" description="WaveKat チームによるエンジニアリングノート、お知らせ、技術的な深掘り記事。">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/ja/index.astro b/src/pages/ja/index.astro
index 1a5a455..ff1af50 100644
--- a/src/pages/ja/index.astro
+++ b/src/pages/ja/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,93 +68,124 @@ const toolsAndClients = [
   title="WaveKat — 小規模ビジネスのためのオープンソース AI 音声ツール"
   description="WaveKat はオープンソースで AI 駆動のツールを開発し、かつては大企業しか手の届かなかった能力を小規模ビジネスにも届けます——まずは音声から。電話をかけ、すべての通話を自動で録音・書き起こすデスクトップアプリです。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        すべての小規模ビジネスに、<br />大企業の声を。
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/ja/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        free public beta
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        すべての小規模ビジネスに、<br />
+        <span class="text-gradient-brand">大企業の声を。</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat は AI 駆動のツールを開発し、かつては大企業しか手の届かなかった能力を小規模ビジネスにも届けます。まずは音声から——
         あなたのコンピューターを業務用の電話に変え、すべての通話を自動で録音・記録するデスクトップアプリです。
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          GitHub で見る
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">私たちのアプリ</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">私たちのアプリ</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              free public beta
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            あなたのコンピューターのための電話アプリ。すでにお使いの電話プロバイダーを使って、デスクトップから電話を受けたりかけたりでき——
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                free public beta
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              あなたのコンピューターのための電話アプリ。すでにお使いの電話プロバイダーを使って、デスクトップから電話を受けたりかけたりでき——
             すべての会話を自動で録音し、書き起こします。AI アシスタントに電話をかけてもらうことさえできます。
-          </p>
-          <a
-            href="/ja/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            詳しく見る・ダウンロード
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/ja/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              詳しく見る・ダウンロード
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/ja.webp"
+            alt="通話中の WaveKat Voice——会話をリアルタイムで文字起こし"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">ライブラリ</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">ライブラリ</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">音声パイプライン</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">音声パイプライン</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">ツールとクライアント</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">ツールとクライアント</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -161,7 +193,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/ko/about.astro b/src/pages/ko/about.astro
index 3aede8e..c0d56f5 100644
--- a/src/pages/ko/about.astro
+++ b/src/pages/ko/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="소개 — WaveKat"
   description="WaveKat은 모든 작은 비즈니스가 큰 기업의 목소리를 갖도록 오픈소스 AI 음성 도구를 만듭니다. 무엇을 왜 만드는지, 그리고 어떻게 연락할 수 있는지 소개합니다."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/ko/blog/index.astro b/src/pages/ko/blog/index.astro
index 2ebb508..a29189f 100644
--- a/src/pages/ko/blog/index.astro
+++ b/src/pages/ko/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="블로그 — WaveKat" description="WaveKat 팀의 엔지니어링 노트, 제품 소식, 그리고 심층 기술 글입니다.">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/ko/index.astro b/src/pages/ko/index.astro
index 5896d4d..ca8c0d8 100644
--- a/src/pages/ko/index.astro
+++ b/src/pages/ko/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,95 +68,126 @@ const toolsAndClients = [
   title="WaveKat — 소상공인을 위한 오픈소스 AI 음성 도구"
   description="WaveKat은 오픈소스 AI 도구를 만들어, 예전에는 대기업만 누릴 수 있던 역량을 소상공인에게도 제공합니다 — 음성에서 시작합니다: 컴퓨터를 업무 전화로 바꾸고 모든 통화를 자동으로 녹음·기록하는 데스크톱 앱입니다."
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        모든 소상공인에게,<br />대기업의 목소리를.
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/ko/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        무료 공개 베타
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        모든 소상공인에게,<br />
+        <span class="text-gradient-brand">대기업의 목소리를.</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat은 AI 기반 도구를 만들어, 예전에는 대기업만 누릴 수 있던 역량을 소상공인에게도 제공합니다.
         우리는 음성에서 시작합니다 — 당신의 컴퓨터를 업무 전화로 바꾸고, 모든 통화를 자동으로 녹음하고 기록하는
         데스크톱 앱입니다.
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          GitHub에서 보기
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">우리 앱</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">우리 앱</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              무료 공개 베타
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            당신의 컴퓨터에서 돌아가는 전화 앱입니다. 이미 쓰고 있는 전화 사업자를 그대로 이용해,
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                무료 공개 베타
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              당신의 컴퓨터에서 돌아가는 전화 앱입니다. 이미 쓰고 있는 전화 사업자를 그대로 이용해,
             데스크톱에서 바로 전화를 받고 걸 수 있습니다 — 모든 대화는 자동으로 녹음되고 글로 기록됩니다.
             심지어 AI 어시스턴트가 당신을 대신해 전화를 걸게 할 수도 있습니다.
-          </p>
-          <a
-            href="/ko/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            자세히 보기 및 다운로드
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/ko/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              자세히 보기 및 다운로드
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/ko.webp"
+            alt="통화 중인 WaveKat Voice — 대화를 실시간으로 받아 적는 모습"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">오픈소스 라이브러리</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">오픈소스 라이브러리</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">음성 파이프라인</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">음성 파이프라인</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">도구와 클라이언트</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">도구와 클라이언트</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -163,7 +195,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/zh-hant/about.astro b/src/pages/zh-hant/about.astro
index e22fb21..d0f2d7f 100644
--- a/src/pages/zh-hant/about.astro
+++ b/src/pages/zh-hant/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="關於 — WaveKat"
   description="WaveKat 打造開源、AI 驅動的語音工具，讓每一家小企業都擁有大企業的聲音。了解我們在做什麼、為什麼，以及如何聯絡我們。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/zh-hant/blog/index.astro b/src/pages/zh-hant/blog/index.astro
index 68bce66..e0ae4eb 100644
--- a/src/pages/zh-hant/blog/index.astro
+++ b/src/pages/zh-hant/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="部落格 — WaveKat" description="來自 WaveKat 團隊的工程筆記、產品公告與技術深度文章。">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/zh-hant/index.astro b/src/pages/zh-hant/index.astro
index 9f6098d..91e9c7e 100644
--- a/src/pages/zh-hant/index.astro
+++ b/src/pages/zh-hant/index.astro
@@ -7,6 +7,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -68,93 +69,124 @@ const toolsAndClients = [
   title="WaveKat — 面向小型企業的開源 AI 語音工具"
   description="WaveKat 打造開源、AI 驅動的工具，讓小型企業也能擁有過去只有大公司才負擔得起的能力——從語音開始：一款把電腦變成辦公電話、自動錄音並轉寫每通通話的桌面應用程式。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        讓每一家小型企業，<br />都擁有大公司的聲音。
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/zh-hant/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        免費公測
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        讓每一家小型企業，<br />
+        <span class="text-gradient-brand">都擁有大公司的聲音。</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat 打造 AI 驅動的工具，讓小型企業也能擁有過去只有大公司才負擔得起的能力。我們從語音開始——
         一款把你的電腦變成辦公電話的桌面應用程式，自動錄音並寫下每一通通話。
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          在 GitHub 上查看
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">我們的應用</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">我們的應用</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              免費公測
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            一款執行在你電腦上的電話應用程式。用你已經在用的電話電信業者，直接在桌面上接聽和撥打電話——
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                免費公測
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              一款執行在你電腦上的電話應用程式。用你已經在用的電話電信業者，直接在桌面上接聽和撥打電話——
             每通對話都自動為你錄音並寫成文字。你甚至可以讓 AI 助理替你撥打電話。
-          </p>
-          <a
-            href="/zh-hant/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            了解更多並下載
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/zh-hant/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              了解更多並下載
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/zh-Hant.webp"
+            alt="WaveKat Voice 通話進行中，即時轉寫通話內容"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">開源函式庫</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">開源函式庫</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">語音流水線</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">語音流水線</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">工具與用戶端</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">工具與用戶端</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -162,7 +194,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/pages/zh/about.astro b/src/pages/zh/about.astro
index 982c88a..119a169 100644
--- a/src/pages/zh/about.astro
+++ b/src/pages/zh/about.astro
@@ -24,9 +24,9 @@ const aboutSchema = {
   title="关于 — WaveKat"
   description="WaveKat 构建开源、AI 驱动的语音工具，让每一家小企业都拥有大企业的声音。了解我们在做什么、为什么，以及如何联系我们。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
@@ -63,8 +63,9 @@ const aboutSchema = {
       </a>
     </section>
 
-    <Footer />
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(aboutSchema)} />
 </Base>
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index 74946d0..58cf69f 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -18,9 +18,9 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 ---
 
 <Base title="博客 — WaveKat" description="来自 WaveKat 团队的工程笔记、产品公告与技术深度文章。">
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header active="blog" />
 
-    <Header active="blog" />
+  <div class="max-w-3xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -48,9 +48,10 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       )}
     </section>
 
-    <Footer />
 
   </div>
 
+  <Footer />
+
   <script type="application/ld+json" set:html={JSON.stringify(listSchema)} />
 </Base>
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index 8f0cdc7..542104f 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -6,6 +6,7 @@
 import Base from '../../layouts/Base.astro';
 import Header from '../../components/Header.astro';
 import Footer from '../../components/Footer.astro';
+import VoiceDownload from '../../components/VoiceDownload.astro';
 import { ArrowRight } from '@lucide/astro';
 
 const voicePipeline = [
@@ -67,93 +68,124 @@ const toolsAndClients = [
   title="WaveKat — 面向小企业的开源 AI 语音工具"
   description="WaveKat 打造开源、AI 驱动的工具，让小企业也能拥有过去只有大公司才负担得起的能力——从语音开始：一款把电脑变成办公电话、自动录音并转写每通通话的桌面应用。"
 >
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <Header />
 
-    <Header />
+  <div class="max-w-6xl mx-auto px-6">
 
     <!-- Hero -->
-    <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
-        让每一家小企业，<br />都拥有大公司的声音。
+    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
+      <a
+        href="/zh/voice/"
+        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
+      >
+        <span class="font-semibold">WaveKat Voice</span>
+        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+        免费公测
+        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+      </a>
+      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
+        让每一家小企业，<br />
+        <span class="text-gradient-brand">都拥有大公司的声音。</span>
       </h1>
-      <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-lg">
+      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
         WaveKat 打造 AI 驱动的工具，让小企业也能拥有过去只有大公司才负担得起的能力。我们从语音开始——
         一款把你的电脑变成办公电话的桌面应用，自动录音并写下每一通通话。
       </p>
+      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
+        <VoiceDownload />
+        <a
+          href="https://github.com/wavekat"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+        >
+          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+          在 GitHub 上查看
+        </a>
+      </div>
     </section>
 
     <!-- Featured product: WaveKat Voice -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">我们的应用</h2>
+    <section class="mb-24">
+      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">我们的应用</h2>
       <div
-        class="relative overflow-hidden rounded-lg border p-6 dark:bg-wk-surface bg-gray-50"
-        style="border-color: #ff6d0040"
+        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
       >
         <div
-          class="pointer-events-none absolute -top-20 -right-16 w-72 h-72 rounded-full opacity-20 blur-3xl"
+          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
           style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative">
-          <div class="flex items-center gap-2 mb-2">
-            <span class="text-sm font-bold" style="color: #ff6d00">WaveKat Voice</span>
-            <span class="inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[9px] font-bold tracking-wider uppercase" style="color: #ff6d00; border-color: #ff6d0040;">
-              免费公测
-            </span>
-          </div>
-          <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-5 max-w-lg">
-            一款运行在你电脑上的电话应用。用你已经在用的电话运营商，直接在桌面上接听和拨打电话——
+        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
+          <div>
+            <div class="mb-4 flex flex-wrap items-center gap-3">
+              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
+              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+                免费公测
+              </span>
+            </div>
+            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
+              一款运行在你电脑上的电话应用。用你已经在用的电话运营商，直接在桌面上接听和拨打电话——
             每通对话都自动为你录音并写成文字。你甚至可以让 AI 助手替你拨打电话。
-          </p>
-          <a
-            href="/zh/voice/"
-            class="group inline-flex items-center gap-2 rounded-lg px-4 py-2.5 text-xs font-bold text-white shadow-lg shadow-[#ff6d00]/20 transition-all hover:shadow-xl hover:shadow-[#ff6d00]/30 hover:-translate-y-0.5"
-            style="background-color: #ff6d00"
-          >
-            了解更多并下载
-            <ArrowRight class="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5" />
-          </a>
+            </p>
+            <a
+              href="/zh/voice/"
+              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
+            >
+              了解更多并下载
+              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+            </a>
+          </div>
+          <img
+            src="/screenshots/in-call/zh-Hans.webp"
+            alt="WaveKat Voice 通话进行中，实时转写通话内容"
+            width="1200"
+            height="872"
+            loading="lazy"
+            decoding="async"
+            class="w-full rounded-xl shadow-2xl shadow-black/20"
+          />
         </div>
       </div>
     </section>
 
     <!-- Libraries -->
-    <section class="mb-16">
-      <h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase mb-5">开源库</h2>
+    <section>
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">开源库</h2>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3">语音流水线</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">语音流水线</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {voicePipeline.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
         ))}
       </div>
 
-      <h3 class="text-[11px] font-semibold tracking-wider text-gray-500 dark:text-gray-500 uppercase mb-3 mt-8">工具与客户端</h3>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">工具与客户端</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         {toolsAndClients.map((lib) => (
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded border p-5 dark:bg-wk-surface bg-gray-50 hover:bg-gray-100 dark:hover:bg-[#0d1520] transition-colors"
-            style={`border-color: ${lib.color}40`}
+            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
+            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
           >
-            <span class="text-sm font-bold block mb-1.5" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed mb-4">{lib.description}</p>
-            <span class="text-xs text-gray-400 dark:text-gray-600 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">
+            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
               github.com/wavekat/{lib.name} →
             </span>
           </a>
@@ -161,7 +193,8 @@ const toolsAndClients = [
       </div>
     </section>
 
-    <Footer />
 
   </div>
+
+  <Footer />
 </Base>
diff --git a/src/styles/global.css b/src/styles/global.css
index e0482d4..cd14c4a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -5,6 +5,14 @@
 @variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Typefaces: Inter carries the UI/body; JetBrains Mono is the accent voice
+     for repo names, code, versions and badges. */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', Menlo, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+  /* Brand accent */
+  --color-wk-orange: #ff6d00;
+
   /* Library accent colors */
   --color-wk-core: #00e676;
   --color-wk-vad: #00bcd4;
@@ -18,14 +26,65 @@
 }
 
 @layer base {
-  * {
-    font-family: 'JetBrains Mono', Menlo, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  body {
+    font-family: var(--font-sans);
+    font-feature-settings: 'cv11', 'ss01';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  code, kbd, samp, pre {
+    font-family: var(--font-mono);
+  }
+
+  ::selection {
+    background-color: rgb(255 109 0 / 0.25);
+  }
+
+  :focus-visible {
+    outline: 2px solid rgb(255 109 0 / 0.6);
+    outline-offset: 2px;
   }
 
   /* Offset in-page anchor jumps (e.g. /voice/changelog/#0.0.41, docs TOC
      links) so the targeted heading isn't flush against the viewport top or
-     hidden under the occasional fixed language banner. */
+     hidden under the sticky header / occasional fixed language banner. */
   html {
-    scroll-padding-top: 4rem;
+    scroll-padding-top: 6rem;
+  }
+}
+
+@layer utilities {
+  /* Hero entrance — one gentle rise on load, skipped for reduced motion. */
+  .animate-rise {
+    animation: wk-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
   }
-}
\ No newline at end of file
+  .animate-rise-late {
+    animation: wk-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
+  }
+
+  /* Brand gradient for headline accents. */
+  .text-gradient-brand {
+    background: linear-gradient(100deg, #ff6d00 0%, #ffa040 60%, #ffd740 120%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+
+@keyframes wk-rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-rise,
+  .animate-rise-late {
+    animation: none;
+  }
+}

From 7b262969583f8a4a59f722876e61acef07a51134 Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:18:08 +1200
Subject: [PATCH 2/7] feat: widen inner page layouts

- Voice section content 3xl -> 5xl (all locales via layout)
- Blog listings 3xl -> 5xl with two-column card grid, larger heading
- About pages 3xl -> 4xl with larger heading
- Blog posts keep their reading-width column intentionally

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/layouts/Voice.astro            | 2 +-
 src/pages/about.astro              | 4 ++--
 src/pages/blog/index.astro         | 6 +++---
 src/pages/de/about.astro           | 4 ++--
 src/pages/de/blog/index.astro      | 6 +++---
 src/pages/es/about.astro           | 4 ++--
 src/pages/es/blog/index.astro      | 6 +++---
 src/pages/fr/about.astro           | 4 ++--
 src/pages/fr/blog/index.astro      | 6 +++---
 src/pages/it/about.astro           | 4 ++--
 src/pages/it/blog/index.astro      | 6 +++---
 src/pages/ja/about.astro           | 4 ++--
 src/pages/ja/blog/index.astro      | 6 +++---
 src/pages/ko/about.astro           | 4 ++--
 src/pages/ko/blog/index.astro      | 6 +++---
 src/pages/zh-hant/about.astro      | 4 ++--
 src/pages/zh-hant/blog/index.astro | 6 +++---
 src/pages/zh/about.astro           | 4 ++--
 src/pages/zh/blog/index.astro      | 6 +++---
 19 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/layouts/Voice.astro b/src/layouts/Voice.astro
index d4d059e..8b524d4 100644
--- a/src/layouts/Voice.astro
+++ b/src/layouts/Voice.astro
@@ -91,7 +91,7 @@ const crumbSchema = crumbLabels[basePath]
     </nav>
   </div>
 
-  <div class="max-w-3xl mx-auto px-6 pt-12 pb-12">
+  <div class="max-w-5xl mx-auto px-6 pt-12 pb-12">
 
     <slot />
 
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 26021b3..5a54e1f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         About WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl">
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 5c111cc..f5a1c73 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -16,11 +16,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Engineering notes, announcements, and deep-dives from the WaveKat team.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">Blog</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">Blog</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         Engineering notes, announcements, and deep-dives from the WaveKat team.
       </p>
@@ -28,7 +28,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">No posts yet. Check back soon.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/de/about.astro b/src/pages/de/about.astro
index 51b317f..44847ba 100644
--- a/src/pages/de/about.astro
+++ b/src/pages/de/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         Über WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat ist ein kleines, unabhängiges Softwareunternehmen, das quelloffene, KI-gestützte Sprachtools für kleine Unternehmen baut. Das Flaggschiff, <a href=\"/de/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a>, ist ein Desktop-Softphone für Mac und Linux, das jeden Anruf aufzeichnet und transkribiert. WaveKat wird von seinem Gründer Eason Guo entwickelt, der WaveKat Voice und die zugrunde liegenden quelloffenen Rust-Bibliotheken schreibt."} />
diff --git a/src/pages/de/blog/index.astro b/src/pages/de/blog/index.astro
index 65f6618..0e63fdc 100644
--- a/src/pages/de/blog/index.astro
+++ b/src/pages/de/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Technische Notizen, Ankündigungen und Hintergrundartikel vom WaveKat-Team.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">Blog</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">Blog</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         Technische Notizen, Ankündigungen und Hintergrundartikel vom WaveKat-Team.
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Noch keine Beiträge. Schauen Sie bald wieder vorbei.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/es/about.astro b/src/pages/es/about.astro
index 228001f..403c107 100644
--- a/src/pages/es/about.astro
+++ b/src/pages/es/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         Acerca de WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat es una pequeña empresa de software independiente que crea herramientas de voz de código abierto, impulsadas por IA, para pequeños negocios. Su producto estrella, <a href=\"/es/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a>, es un softphone de escritorio para Mac y Linux que graba y transcribe cada llamada. WaveKat está desarrollado por su fundador, Eason Guo, que crea WaveKat Voice y las bibliotecas de código abierto en Rust en las que se apoya."} />
diff --git a/src/pages/es/blog/index.astro b/src/pages/es/blog/index.astro
index cd9d0ad..8965049 100644
--- a/src/pages/es/blog/index.astro
+++ b/src/pages/es/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Notas de ingeniería, anuncios y análisis en profundidad del equipo de WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">Blog</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">Blog</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         Notas de ingeniería, anuncios y análisis en profundidad del equipo de WaveKat.
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Aún no hay publicaciones. Vuelva pronto.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/fr/about.astro b/src/pages/fr/about.astro
index 4eb302c..7892d27 100644
--- a/src/pages/fr/about.astro
+++ b/src/pages/fr/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         À propos de WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat est une petite société de logiciels indépendante qui crée des outils vocaux open source, propulsés par l'IA, pour les petites entreprises. Son produit phare, <a href=\"/fr/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a>, est un softphone de bureau pour Mac et Linux qui enregistre et transcrit chaque appel. WaveKat est développé par son fondateur, Eason Guo, qui écrit WaveKat Voice et les bibliothèques open source en Rust qui le font fonctionner."} />
diff --git a/src/pages/fr/blog/index.astro b/src/pages/fr/blog/index.astro
index bf874b9..ecb2f4e 100644
--- a/src/pages/fr/blog/index.astro
+++ b/src/pages/fr/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Notes d’ingénierie, annonces et analyses approfondies de l’équipe WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">Blog</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">Blog</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         Notes d’ingénierie, annonces et analyses approfondies de l’équipe WaveKat.
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Pas encore d’articles. Revenez bientôt.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/it/about.astro b/src/pages/it/about.astro
index 64b8b3d..e87760d 100644
--- a/src/pages/it/about.astro
+++ b/src/pages/it/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         Chi siamo
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat è una piccola software house indipendente che crea strumenti vocali open source, basati sull'IA, per le piccole imprese. Il suo prodotto di punta, <a href=\"/it/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a>, è un softphone desktop per Mac e Linux che registra e trascrive ogni chiamata. WaveKat è realizzato dal suo fondatore, Eason Guo, che sviluppa WaveKat Voice e le librerie open source in Rust su cui si basa."} />
diff --git a/src/pages/it/blog/index.astro b/src/pages/it/blog/index.astro
index 5e2d808..5e9a5c0 100644
--- a/src/pages/it/blog/index.astro
+++ b/src/pages/it/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Note di ingegneria, annunci e approfondimenti dal team WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">Blog</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">Blog</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         Note di ingegneria, annunci e approfondimenti dal team WaveKat.
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Ancora nessun articolo. Torna a trovarci presto.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/ja/about.astro b/src/pages/ja/about.astro
index 27890bf..c7045af 100644
--- a/src/pages/ja/about.astro
+++ b/src/pages/ja/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         WaveKat について
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat は、小さなビジネスのためにオープンソースの AI 音声ツールを開発する、小さな独立系ソフトウェア会社です。主力製品の <a href=\"/ja/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a> は Mac と Linux 向けのデスクトップソフトフォンで、すべての通話を自動で録音・文字起こしします。WaveKat は創業者の Eason Guo が手がけ、WaveKat Voice とその基盤となるオープンソースの Rust ライブラリを開発しています。"} />
diff --git a/src/pages/ja/blog/index.astro b/src/pages/ja/blog/index.astro
index 67f4115..71dde35 100644
--- a/src/pages/ja/blog/index.astro
+++ b/src/pages/ja/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="ブログ — WaveKat" description="WaveKat チームによるエンジニアリングノート、お知らせ、技術的な深掘り記事。">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">ブログ</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">ブログ</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         WaveKat チームによるエンジニアリングノート、お知らせ、技術的な深掘り記事。
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">まだ記事はありません。近日中にまたご確認ください。</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/ko/about.astro b/src/pages/ko/about.astro
index c0d56f5..15a4892 100644
--- a/src/pages/ko/about.astro
+++ b/src/pages/ko/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         WaveKat 소개
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat은 작은 비즈니스를 위한 오픈소스 AI 음성 도구를 만드는 작고 독립적인 소프트웨어 회사입니다. 대표 제품인 <a href=\"/ko/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a>는 Mac과 Linux용 데스크톱 소프트폰으로, 모든 통화를 자동으로 녹음하고 텍스트로 옮깁니다. WaveKat은 창립자 Eason Guo가 만들며, 그는 WaveKat Voice와 그 기반이 되는 오픈소스 Rust 라이브러리를 개발합니다."} />
diff --git a/src/pages/ko/blog/index.astro b/src/pages/ko/blog/index.astro
index a29189f..075bb97 100644
--- a/src/pages/ko/blog/index.astro
+++ b/src/pages/ko/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="블로그 — WaveKat" description="WaveKat 팀의 엔지니어링 노트, 제품 소식, 그리고 심층 기술 글입니다.">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">블로그</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">블로그</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         WaveKat 팀의 엔지니어링 노트, 제품 소식, 그리고 심층 기술 글입니다.
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">아직 글이 없습니다. 곧 다시 확인해 주세요.</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/zh-hant/about.astro b/src/pages/zh-hant/about.astro
index d0f2d7f..d39b278 100644
--- a/src/pages/zh-hant/about.astro
+++ b/src/pages/zh-hant/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         關於 WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat 是一家小而獨立的軟體公司，為小企業打造開源、AI 驅動的語音工具。旗艦產品 <a href=\"/zh-hant/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a> 是一款適用於 Mac 和 Linux 的桌面軟體電話，會自動錄音並轉寫每一通通話。WaveKat 由創辦人 Eason Guo 打造，他開發 WaveKat Voice 及其底層的開源 Rust 函式庫。"} />
diff --git a/src/pages/zh-hant/blog/index.astro b/src/pages/zh-hant/blog/index.astro
index e0ae4eb..00219be 100644
--- a/src/pages/zh-hant/blog/index.astro
+++ b/src/pages/zh-hant/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="部落格 — WaveKat" description="來自 WaveKat 團隊的工程筆記、產品公告與技術深度文章。">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">部落格</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">部落格</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         來自 WaveKat 團隊的工程筆記、產品公告與技術深度文章。
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">還沒有文章，請稍後再來看看。</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/zh/about.astro b/src/pages/zh/about.astro
index 119a169..fd91f59 100644
--- a/src/pages/zh/about.astro
+++ b/src/pages/zh/about.astro
@@ -26,10 +26,10 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-4xl mx-auto px-6 py-12">
 
     <section class="mb-16">
-      <h1 class="text-2xl font-bold leading-snug mb-5 text-gray-900 dark:text-white">
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
         关于 WaveKat
       </h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed max-w-xl" set:html={"WaveKat 是一家小而独立的软件公司，为小企业构建开源、AI 驱动的语音工具。旗舰产品 <a href=\"/zh/voice/\" class=\"text-gray-700 dark:text-gray-200 underline underline-offset-2 hover:text-gray-900 dark:hover:text-white transition-colors\">WaveKat Voice</a> 是一款适用于 Mac 和 Linux 的桌面软电话，会自动录音并转写每一通通话。WaveKat 由创始人 Eason Guo 打造，他开发 WaveKat Voice 及其底层的开源 Rust 库。"} />
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index 58cf69f..2e2ca89 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -20,11 +20,11 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="博客 — WaveKat" description="来自 WaveKat 团队的工程笔记、产品公告与技术深度文章。">
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-5xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
-      <h1 class="text-2xl font-bold leading-snug mb-3 text-gray-900 dark:text-white">博客</h1>
+      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-3 text-gray-900 dark:text-white">博客</h1>
       <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed mb-10">
         来自 WaveKat 团队的工程笔记、产品公告与技术深度文章。
       </p>
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">还没有文章，请稍后再来看看。</p>
       ) : (
-        <div class="grid gap-3">
+        <div class="grid gap-4 sm:grid-cols-2">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}

From 2b5887420079ae91e6fd8b80eb0178e47d3ed63d Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:25:17 +1200
Subject: [PATCH 3/7] feat: standardize all pages on max-w-6xl

- Voice section, blog listings, about, and 404 now share the landing
  page's 6xl container
- Blog listing cards flow three across on large screens
- Blog posts get the 6xl container with a centered reading column inside

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/components/NotFound.astro      | 2 +-
 src/layouts/Post.astro             | 7 +++++--
 src/layouts/Voice.astro            | 2 +-
 src/pages/about.astro              | 2 +-
 src/pages/blog/index.astro         | 4 ++--
 src/pages/de/about.astro           | 2 +-
 src/pages/de/blog/index.astro      | 4 ++--
 src/pages/es/about.astro           | 2 +-
 src/pages/es/blog/index.astro      | 4 ++--
 src/pages/fr/about.astro           | 2 +-
 src/pages/fr/blog/index.astro      | 4 ++--
 src/pages/it/about.astro           | 2 +-
 src/pages/it/blog/index.astro      | 4 ++--
 src/pages/ja/about.astro           | 2 +-
 src/pages/ja/blog/index.astro      | 4 ++--
 src/pages/ko/about.astro           | 2 +-
 src/pages/ko/blog/index.astro      | 4 ++--
 src/pages/zh-hant/about.astro      | 2 +-
 src/pages/zh-hant/blog/index.astro | 4 ++--
 src/pages/zh/about.astro           | 2 +-
 src/pages/zh/blog/index.astro      | 4 ++--
 21 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/src/components/NotFound.astro b/src/components/NotFound.astro
index e6547df..57b0827 100644
--- a/src/components/NotFound.astro
+++ b/src/components/NotFound.astro
@@ -15,7 +15,7 @@ const ui = t(lang);
 <Base title={`${ui.notFoundTitle} — WaveKat`} description={ui.notFoundBody} noindex>
   <Header />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-20 py-16 text-center">
       <p class="text-6xl font-bold mb-6" style="color: #ff6d00;">404</p>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
index 7139615..b5addf4 100644
--- a/src/layouts/Post.astro
+++ b/src/layouts/Post.astro
@@ -45,7 +45,10 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 >
   <Header active="blog" />
 
-  <div class="max-w-3xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
+    {/* Page container matches the sitewide 6xl width; the article itself stays
+        a centered reading column so long-form lines keep a readable measure. */}
+    <div class="mx-auto max-w-3xl">
 
     <!-- Post meta -->
     <div class="mb-8">
@@ -92,7 +95,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
       </a>
     </div>
 
-
+    </div>
   </div>
 
   <Footer />
diff --git a/src/layouts/Voice.astro b/src/layouts/Voice.astro
index 8b524d4..802bc53 100644
--- a/src/layouts/Voice.astro
+++ b/src/layouts/Voice.astro
@@ -91,7 +91,7 @@ const crumbSchema = crumbLabels[basePath]
     </nav>
   </div>
 
-  <div class="max-w-5xl mx-auto px-6 pt-12 pb-12">
+  <div class="max-w-6xl mx-auto px-6 pt-12 pb-12">
 
     <slot />
 
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 5a54e1f..333d5ac 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index f5a1c73..da95a45 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -16,7 +16,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Engineering notes, announcements, and deep-dives from the WaveKat team.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -28,7 +28,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">No posts yet. Check back soon.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/de/about.astro b/src/pages/de/about.astro
index 44847ba..c16a865 100644
--- a/src/pages/de/about.astro
+++ b/src/pages/de/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/de/blog/index.astro b/src/pages/de/blog/index.astro
index 0e63fdc..8996bf5 100644
--- a/src/pages/de/blog/index.astro
+++ b/src/pages/de/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Technische Notizen, Ankündigungen und Hintergrundartikel vom WaveKat-Team.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Noch keine Beiträge. Schauen Sie bald wieder vorbei.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/es/about.astro b/src/pages/es/about.astro
index 403c107..bd932bc 100644
--- a/src/pages/es/about.astro
+++ b/src/pages/es/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/es/blog/index.astro b/src/pages/es/blog/index.astro
index 8965049..9596f71 100644
--- a/src/pages/es/blog/index.astro
+++ b/src/pages/es/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Notas de ingeniería, anuncios y análisis en profundidad del equipo de WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Aún no hay publicaciones. Vuelva pronto.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/fr/about.astro b/src/pages/fr/about.astro
index 7892d27..a29c179 100644
--- a/src/pages/fr/about.astro
+++ b/src/pages/fr/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/fr/blog/index.astro b/src/pages/fr/blog/index.astro
index ecb2f4e..77abf4c 100644
--- a/src/pages/fr/blog/index.astro
+++ b/src/pages/fr/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Notes d’ingénierie, annonces et analyses approfondies de l’équipe WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Pas encore d’articles. Revenez bientôt.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/it/about.astro b/src/pages/it/about.astro
index e87760d..76363dc 100644
--- a/src/pages/it/about.astro
+++ b/src/pages/it/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/it/blog/index.astro b/src/pages/it/blog/index.astro
index 5e9a5c0..f3200b1 100644
--- a/src/pages/it/blog/index.astro
+++ b/src/pages/it/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="Blog — WaveKat" description="Note di ingegneria, annunci e approfondimenti dal team WaveKat.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">Ancora nessun articolo. Torna a trovarci presto.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/ja/about.astro b/src/pages/ja/about.astro
index c7045af..08d7756 100644
--- a/src/pages/ja/about.astro
+++ b/src/pages/ja/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/ja/blog/index.astro b/src/pages/ja/blog/index.astro
index 71dde35..74880f7 100644
--- a/src/pages/ja/blog/index.astro
+++ b/src/pages/ja/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="ブログ — WaveKat" description="WaveKat チームによるエンジニアリングノート、お知らせ、技術的な深掘り記事。">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">まだ記事はありません。近日中にまたご確認ください。</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/ko/about.astro b/src/pages/ko/about.astro
index 15a4892..8dd6bb2 100644
--- a/src/pages/ko/about.astro
+++ b/src/pages/ko/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/ko/blog/index.astro b/src/pages/ko/blog/index.astro
index 075bb97..fdb7934 100644
--- a/src/pages/ko/blog/index.astro
+++ b/src/pages/ko/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="블로그 — WaveKat" description="WaveKat 팀의 엔지니어링 노트, 제품 소식, 그리고 심층 기술 글입니다.">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">아직 글이 없습니다. 곧 다시 확인해 주세요.</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/zh-hant/about.astro b/src/pages/zh-hant/about.astro
index d39b278..314c72b 100644
--- a/src/pages/zh-hant/about.astro
+++ b/src/pages/zh-hant/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/zh-hant/blog/index.astro b/src/pages/zh-hant/blog/index.astro
index 00219be..04c163f 100644
--- a/src/pages/zh-hant/blog/index.astro
+++ b/src/pages/zh-hant/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="部落格 — WaveKat" description="來自 WaveKat 團隊的工程筆記、產品公告與技術深度文章。">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">還沒有文章，請稍後再來看看。</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}
diff --git a/src/pages/zh/about.astro b/src/pages/zh/about.astro
index fd91f59..a7e1e76 100644
--- a/src/pages/zh/about.astro
+++ b/src/pages/zh/about.astro
@@ -26,7 +26,7 @@ const aboutSchema = {
 >
   <Header />
 
-  <div class="max-w-4xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <section class="mb-16">
       <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-5 text-gray-900 dark:text-white">
diff --git a/src/pages/zh/blog/index.astro b/src/pages/zh/blog/index.astro
index 2e2ca89..c7dd76c 100644
--- a/src/pages/zh/blog/index.astro
+++ b/src/pages/zh/blog/index.astro
@@ -20,7 +20,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
 <Base title="博客 — WaveKat" description="来自 WaveKat 团队的工程笔记、产品公告与技术深度文章。">
   <Header active="blog" />
 
-  <div class="max-w-5xl mx-auto px-6 py-12">
+  <div class="max-w-6xl mx-auto px-6 py-12">
 
     <!-- Blog listing -->
     <section class="mb-20">
@@ -32,7 +32,7 @@ const listSchema = itemListSchema('WaveKat Blog', new URL(Astro.url.pathname, As
       {posts.length === 0 ? (
         <p class="text-sm text-gray-400 dark:text-gray-600">还没有文章，请稍后再来看看。</p>
       ) : (
-        <div class="grid gap-4 sm:grid-cols-2">
+        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           {posts.map((post) => (
             <PostCard
               title={post.data.title}

From 90be8bfa53aa413d88ebf480314746a92290a277 Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:51:14 +1200
Subject: [PATCH 4/7] feat: rethink homepage as product-first design

- Hero: two-column with the real app screenshot large, in 3D
  perspective with a glow, over a dot-grid texture
- Download CTA pinned in the header on every page
- WaveKat Voice statement: full-bleed dark band in both themes
- Libraries drawn as the signal chain they are: vad -> turn -> asr
  -> tts with connecting arrows over a core/sip foundation row
- Cards get gradient hairlines and colored hover glows, no more
  uniform box grid
- Scroll-reveal motion (reduced-motion safe, content visible sans JS)
- Giant watermark wordmark closes the footer; wave background boosted

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/components/Footer.astro         |   5 +
 src/components/Header.astro         |   6 +
 src/components/SiteBackground.astro |  10 +-
 src/pages/de/index.astro            | 283 +++++++++++++++++----------
 src/pages/es/index.astro            | 283 +++++++++++++++++----------
 src/pages/fr/index.astro            | 283 +++++++++++++++++----------
 src/pages/index.astro               | 284 ++++++++++++++++++----------
 src/pages/it/index.astro            | 283 +++++++++++++++++----------
 src/pages/ja/index.astro            | 279 +++++++++++++++++----------
 src/pages/ko/index.astro            | 283 +++++++++++++++++----------
 src/pages/zh-hant/index.astro       | 279 +++++++++++++++++----------
 src/pages/zh/index.astro            | 279 +++++++++++++++++----------
 src/styles/global.css               |  24 +++
 13 files changed, 1646 insertions(+), 935 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index f5435cb..5e73bda 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -90,4 +90,9 @@ try {
     </a>
   </div>
   </div>
+  <!-- Giant watermark wordmark peeking from the bottom edge — pure brand, no copy. -->
+  <div class="relative mx-auto h-16 max-w-6xl overflow-hidden px-6 sm:h-24 md:h-32" aria-hidden="true">
+    <img src="/logos/wavekat-tight-light.svg" alt="" class="absolute top-2 left-6 right-6 w-[calc(100%-3rem)] opacity-[0.06] dark:hidden" loading="lazy" />
+    <img src="/logos/wavekat-tight-dark.svg" alt="" class="absolute top-2 left-6 right-6 hidden w-[calc(100%-3rem)] opacity-[0.05] dark:block" loading="lazy" />
+  </div>
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 981845f..e60f22b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -50,6 +50,12 @@ const linkClass = (isActive: boolean) =>
         <Sun class="w-4 h-4 dark:hidden" />
         <Moon class="w-4 h-4 hidden dark:block" />
       </button>
+      <a
+        href={localeHref('/voice/download/')}
+        class="hidden whitespace-nowrap rounded-full bg-wk-orange px-4 py-1.5 text-xs font-semibold text-white shadow-md shadow-wk-orange/25 transition-all hover:-translate-y-px hover:shadow-lg hover:shadow-wk-orange/35 sm:inline-flex"
+      >
+        {ui.subDownload}
+      </a>
     </nav>
   </div>
 </header>
diff --git a/src/components/SiteBackground.astro b/src/components/SiteBackground.astro
index d8a18f2..e0c0b0c 100644
--- a/src/components/SiteBackground.astro
+++ b/src/components/SiteBackground.astro
@@ -35,11 +35,11 @@
     // wavelengths/speeds keep the field from ever looking like it repeats.
     // baseAmp/baseAlpha are the calm resting state — deliberately low.
     const layers = [
-      { y: 0.16, amp: 14, len: 0.0065, speed: 0.55, phase: 0.0, alpha: 0.05, width: 2 },
-      { y: 0.34, amp: 18, len: 0.0042, speed: -0.4, phase: 1.7, alpha: 0.038, width: 2.5 },
-      { y: 0.52, amp: 16, len: 0.0055, speed: 0.7, phase: 3.1, alpha: 0.045, width: 2 },
-      { y: 0.7, amp: 20, len: 0.0035, speed: -0.5, phase: 4.6, alpha: 0.035, width: 3 },
-      { y: 0.86, amp: 15, len: 0.006, speed: 0.45, phase: 5.9, alpha: 0.042, width: 2 },
+      { y: 0.16, amp: 14, len: 0.0065, speed: 0.55, phase: 0.0, alpha: 0.09, width: 2 },
+      { y: 0.34, amp: 18, len: 0.0042, speed: -0.4, phase: 1.7, alpha: 0.07, width: 2.5 },
+      { y: 0.52, amp: 16, len: 0.0055, speed: 0.7, phase: 3.1, alpha: 0.08, width: 2 },
+      { y: 0.7, amp: 20, len: 0.0035, speed: -0.5, phase: 4.6, alpha: 0.065, width: 3 },
+      { y: 0.86, amp: 15, len: 0.006, speed: 0.45, phase: 5.9, alpha: 0.075, width: 2 },
     ];
 
     let w = 0;
diff --git a/src/pages/de/index.astro b/src/pages/de/index.astro
index ca1b110..b8beaea 100644
--- a/src/pages/de/index.astro
+++ b/src/pages/de/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,133 +74,204 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/de/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        kostenlose öffentliche Beta
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        Geben Sie jedem kleinen Unternehmen<br />
-        <span class="text-gradient-brand">die Stimme eines großen.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat baut KI-gestützte Tools, mit denen auch kleine Unternehmen Fähigkeiten bekommen, die
-        früher nur großen Firmen vorbehalten waren. Wir beginnen mit Sprache — eine Desktop-App, die Ihren
-        Computer in Ihr Geschäftstelefon verwandelt und jedes Gespräch aufzeichnet und mitschreibt.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/de/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          Auf GitHub ansehen
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          kostenlose öffentliche Beta
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          Geben Sie jedem kleinen Unternehmen<br />
+          <span class="text-gradient-brand">die Stimme eines großen.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat baut KI-gestützte Tools, mit denen auch kleine Unternehmen Fähigkeiten bekommen, die
+        früher nur großen Firmen vorbehalten waren. Wir beginnen mit Sprache — eine Desktop-App, die Ihren
+        Computer in Ihr Geschäftstelefon verwandelt und jedes Gespräch aufzeichnet und mitschreibt.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            Auf GitHub ansehen
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Unsere App</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                kostenlose öffentliche Beta
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              Eine Telefon-App für Ihren Computer. Nehmen Sie Anrufe entgegen und tätigen Sie Anrufe direkt
-            vom Desktop — jedes Gespräch wird für Sie aufgezeichnet und mitgeschrieben, über den
-            Telefonanbieter, den Sie bereits haben. Sie können sogar einen KI-Assistenten für sich Anrufe tätigen lassen.
-            </p>
-            <a
-              href="/de/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              Mehr erfahren &amp; herunterladen
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/de.webp"
-            alt="WaveKat Voice während eines Anrufs, mit in Echtzeit mitgeschriebenem Transkript"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/de.webp"
+          alt="WaveKat Voice während eines Anrufs, mit in Echtzeit mitgeschriebenem Transkript"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliotheken</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Sprach-Pipeline</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">Unsere App</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          kostenlose öffentliche Beta
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        Eine Telefon-App für Ihren Computer. Nehmen Sie Anrufe entgegen und tätigen Sie Anrufe direkt
+            vom Desktop — jedes Gespräch wird für Sie aufgezeichnet und mitgeschrieben, über den
+            Telefonanbieter, den Sie bereits haben. Sie können sogar einen KI-Assistenten für sich Anrufe tätigen lassen.
+      </p>
+      <a
+        href="/de/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        Mehr erfahren &amp; herunterladen
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliotheken</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Sprach-Pipeline</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Tools & Clients</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Tools & Clients</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index 91a8a16..0f73a2d 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,133 +74,204 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/es/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        beta pública gratuita
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        Dele a cada pequeña empresa<br />
-        <span class="text-gradient-brand">la voz de una grande.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat crea herramientas impulsadas por IA que dan a las pequeñas empresas el tipo de
-        capacidades que antes solo las grandes podían permitirse. Empezamos por la voz: una app de
-        escritorio que convierte su computadora en su línea de empresa y graba y transcribe cada llamada.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/es/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          Ver en GitHub
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          beta pública gratuita
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          Dele a cada pequeña empresa<br />
+          <span class="text-gradient-brand">la voz de una grande.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat crea herramientas impulsadas por IA que dan a las pequeñas empresas el tipo de
+        capacidades que antes solo las grandes podían permitirse. Empezamos por la voz: una app de
+        escritorio que convierte su computadora en su línea de empresa y graba y transcribe cada llamada.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            Ver en GitHub
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Nuestra app</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                beta pública gratuita
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              Una app de teléfono para su computadora. Conteste y haga llamadas desde su escritorio,
-            con cada conversación grabada y transcrita por usted, usando el proveedor de telefonía que ya tiene.
-            Incluso puede dejar que un asistente de IA realice llamadas por usted.
-            </p>
-            <a
-              href="/es/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              Más información y descarga
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/es.webp"
-            alt="WaveKat Voice durante una llamada, con la transcripción escrita en tiempo real"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/es.webp"
+          alt="WaveKat Voice durante una llamada, con la transcripción escrita en tiempo real"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerías</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline de voz</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">Nuestra app</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          beta pública gratuita
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        Una app de teléfono para su computadora. Conteste y haga llamadas desde su escritorio,
+            con cada conversación grabada y transcrita por usted, usando el proveedor de telefonía que ya tiene.
+            Incluso puede dejar que un asistente de IA realice llamadas por usted.
+      </p>
+      <a
+        href="/es/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        Más información y descarga
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerías</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Pipeline de voz</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Herramientas y clientes</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Herramientas y clientes</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/fr/index.astro b/src/pages/fr/index.astro
index f31c009..5210440 100644
--- a/src/pages/fr/index.astro
+++ b/src/pages/fr/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,133 +74,204 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/fr/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        bêta publique gratuite
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        Donner à chaque petite entreprise<br />
-        <span class="text-gradient-brand">la voix d’une grande.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat conçoit des outils propulsés par l’IA qui donnent aux petites entreprises le genre de
-        capacités autrefois réservées aux grandes. Nous commençons par la voix — une application de bureau
-        qui transforme votre ordinateur en ligne professionnelle, enregistrant et retranscrivant chaque appel.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/fr/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          Voir sur GitHub
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          bêta publique gratuite
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          Donner à chaque petite entreprise<br />
+          <span class="text-gradient-brand">la voix d’une grande.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat conçoit des outils propulsés par l’IA qui donnent aux petites entreprises le genre de
+        capacités autrefois réservées aux grandes. Nous commençons par la voix — une application de bureau
+        qui transforme votre ordinateur en ligne professionnelle, enregistrant et retranscrivant chaque appel.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            Voir sur GitHub
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Notre application</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                bêta publique gratuite
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              Une application de téléphonie pour votre ordinateur. Recevez et passez des appels depuis votre
-            bureau, chaque conversation étant enregistrée et retranscrite pour vous — avec l’opérateur
-            téléphonique que vous avez déjà. Vous pouvez même laisser un assistant IA passer des appels à votre place.
-            </p>
-            <a
-              href="/fr/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              En savoir plus et télécharger
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/fr.webp"
-            alt="WaveKat Voice pendant un appel, avec la transcription rédigée en temps réel"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/fr.webp"
+          alt="WaveKat Voice pendant un appel, avec la transcription rédigée en temps réel"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliothèques</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline vocal</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">Notre application</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          bêta publique gratuite
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        Une application de téléphonie pour votre ordinateur. Recevez et passez des appels depuis votre
+            bureau, chaque conversation étant enregistrée et retranscrite pour vous — avec l’opérateur
+            téléphonique que vous avez déjà. Vous pouvez même laisser un assistant IA passer des appels à votre place.
+      </p>
+      <a
+        href="/fr/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        En savoir plus et télécharger
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Bibliothèques</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Pipeline vocal</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Outils et clients</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Outils et clients</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 50c7cae..a937a00 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -58,138 +58,214 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base>
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        free public beta
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        Give every small business<br />
-        <span class="text-gradient-brand">the voice of a big one.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat builds AI-powered tools that give small businesses the kind of capabilities only big
-        companies used to afford. We start with voice — a desktop app that turns your computer into your
-        business line, recording and writing down every call.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          View on GitHub
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          free public beta
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          Give every small business<br />
+          <span class="text-gradient-brand">the voice of a big one.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat builds AI-powered tools that give small businesses the kind of capabilities only big
+          companies used to afford. We start with voice — a desktop app that turns your computer into your
+          business line, recording and writing down every call.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            View on GitHub
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Our app</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                free public beta
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              A phone app for your computer. Answer and place calls from your desktop, with every
-              conversation recorded and written down for you — using the phone provider you already have.
-              You can even let an AI assistant place calls for you.
-            </p>
-            <a
-              href="/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              Learn more &amp; download
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/en.webp"
-            alt="WaveKat Voice during a live call, with the transcript written down in real time"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/en.webp"
+          alt="WaveKat Voice during a live call, with the transcript written down in real time"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Libraries</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Voice pipeline</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">Our app</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          free public beta
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        A phone app for your computer. Answer and place calls from your desktop, with every
+        conversation recorded and written down for you — using the phone provider you already have.
+        You can even let an AI assistant place calls for you.
+      </p>
+      <a
+        href="/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        Learn more &amp; download
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Libraries</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Voice pipeline</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Tools &amp; clients</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Tools &amp; clients</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/it/index.astro b/src/pages/it/index.astro
index 249fd2e..18b32b5 100644
--- a/src/pages/it/index.astro
+++ b/src/pages/it/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,133 +74,204 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/it/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        beta pubblica gratuita
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        Dai a ogni piccola impresa<br />
-        <span class="text-gradient-brand">la voce di una grande.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat crea strumenti basati su AI che danno alle piccole imprese le capacità un tempo
-        riservate solo alle grandi aziende. Iniziamo dalla voce — un’app desktop che trasforma il
-        tuo computer nella tua linea aziendale, registrando e trascrivendo ogni chiamata.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/it/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          Vedi su GitHub
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          beta pubblica gratuita
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          Dai a ogni piccola impresa<br />
+          <span class="text-gradient-brand">la voce di una grande.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat crea strumenti basati su AI che danno alle piccole imprese le capacità un tempo
+        riservate solo alle grandi aziende. Iniziamo dalla voce — un’app desktop che trasforma il
+        tuo computer nella tua linea aziendale, registrando e trascrivendo ogni chiamata.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            Vedi su GitHub
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">La nostra app</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                beta pubblica gratuita
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              Un’app telefonica per il tuo computer. Rispondi ed effettua chiamate dal desktop, con ogni
-            conversazione registrata e trascritta per te — usando l’operatore telefonico che hai già.
-            Puoi persino lasciare che un assistente AI effettui chiamate per te.
-            </p>
-            <a
-              href="/it/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              Scopri di più e scarica
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/it.webp"
-            alt="WaveKat Voice durante una chiamata, con la trascrizione scritta in tempo reale"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/it.webp"
+          alt="WaveKat Voice durante una chiamata, con la trascrizione scritta in tempo reale"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerie</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Pipeline vocale</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">La nostra app</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          beta pubblica gratuita
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        Un’app telefonica per il tuo computer. Rispondi ed effettua chiamate dal desktop, con ogni
+            conversazione registrata e trascritta per te — usando l’operatore telefonico che hai già.
+            Puoi persino lasciare che un assistente AI effettui chiamate per te.
+      </p>
+      <a
+        href="/it/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        Scopri di più e scarica
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">Librerie</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Pipeline vocale</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">Strumenti e client</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">Strumenti e client</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/ja/index.astro b/src/pages/ja/index.astro
index ff1af50..8c8e99d 100644
--- a/src/pages/ja/index.astro
+++ b/src/pages/ja/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,131 +74,202 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/ja/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        free public beta
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        すべての小規模ビジネスに、<br />
-        <span class="text-gradient-brand">大企業の声を。</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat は AI 駆動のツールを開発し、かつては大企業しか手の届かなかった能力を小規模ビジネスにも届けます。まずは音声から——
-        あなたのコンピューターを業務用の電話に変え、すべての通話を自動で録音・記録するデスクトップアプリです。
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/ja/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          GitHub で見る
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          free public beta
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          すべての小規模ビジネスに、<br />
+          <span class="text-gradient-brand">大企業の声を。</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat は AI 駆動のツールを開発し、かつては大企業しか手の届かなかった能力を小規模ビジネスにも届けます。まずは音声から——
+        あなたのコンピューターを業務用の電話に変え、すべての通話を自動で録音・記録するデスクトップアプリです。
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            GitHub で見る
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">私たちのアプリ</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                free public beta
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              あなたのコンピューターのための電話アプリ。すでにお使いの電話プロバイダーを使って、デスクトップから電話を受けたりかけたりでき——
-            すべての会話を自動で録音し、書き起こします。AI アシスタントに電話をかけてもらうことさえできます。
-            </p>
-            <a
-              href="/ja/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              詳しく見る・ダウンロード
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/ja.webp"
-            alt="通話中の WaveKat Voice——会話をリアルタイムで文字起こし"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/ja.webp"
+          alt="通話中の WaveKat Voice——会話をリアルタイムで文字起こし"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">ライブラリ</h2>
-
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">音声パイプライン</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">私たちのアプリ</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          free public beta
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        あなたのコンピューターのための電話アプリ。すでにお使いの電話プロバイダーを使って、デスクトップから電話を受けたりかけたりでき——
+            すべての会話を自動で録音し、書き起こします。AI アシスタントに電話をかけてもらうことさえできます。
+      </p>
+      <a
+        href="/ja/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        詳しく見る・ダウンロード
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">ツールとクライアント</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">ライブラリ</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">音声パイプライン</h3>
+
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">ツールとクライアント</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/ko/index.astro b/src/pages/ko/index.astro
index ca8c0d8..383d2e9 100644
--- a/src/pages/ko/index.astro
+++ b/src/pages/ko/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,133 +74,204 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/ko/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        무료 공개 베타
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        모든 소상공인에게,<br />
-        <span class="text-gradient-brand">대기업의 목소리를.</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat은 AI 기반 도구를 만들어, 예전에는 대기업만 누릴 수 있던 역량을 소상공인에게도 제공합니다.
-        우리는 음성에서 시작합니다 — 당신의 컴퓨터를 업무 전화로 바꾸고, 모든 통화를 자동으로 녹음하고 기록하는
-        데스크톱 앱입니다.
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/ko/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          GitHub에서 보기
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          무료 공개 베타
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          모든 소상공인에게,<br />
+          <span class="text-gradient-brand">대기업의 목소리를.</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat은 AI 기반 도구를 만들어, 예전에는 대기업만 누릴 수 있던 역량을 소상공인에게도 제공합니다.
+        우리는 음성에서 시작합니다 — 당신의 컴퓨터를 업무 전화로 바꾸고, 모든 통화를 자동으로 녹음하고 기록하는
+        데스크톱 앱입니다.
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            GitHub에서 보기
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">우리 앱</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                무료 공개 베타
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              당신의 컴퓨터에서 돌아가는 전화 앱입니다. 이미 쓰고 있는 전화 사업자를 그대로 이용해,
-            데스크톱에서 바로 전화를 받고 걸 수 있습니다 — 모든 대화는 자동으로 녹음되고 글로 기록됩니다.
-            심지어 AI 어시스턴트가 당신을 대신해 전화를 걸게 할 수도 있습니다.
-            </p>
-            <a
-              href="/ko/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              자세히 보기 및 다운로드
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/ko.webp"
-            alt="통화 중인 WaveKat Voice — 대화를 실시간으로 받아 적는 모습"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/ko.webp"
+          alt="통화 중인 WaveKat Voice — 대화를 실시간으로 받아 적는 모습"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
-
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">오픈소스 라이브러리</h2>
+    </div>
+  </section>
 
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">음성 파이프라인</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">우리 앱</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          무료 공개 베타
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        당신의 컴퓨터에서 돌아가는 전화 앱입니다. 이미 쓰고 있는 전화 사업자를 그대로 이용해,
+            데스크톱에서 바로 전화를 받고 걸 수 있습니다 — 모든 대화는 자동으로 녹음되고 글로 기록됩니다.
+            심지어 AI 어시스턴트가 당신을 대신해 전화를 걸게 할 수도 있습니다.
+      </p>
+      <a
+        href="/ko/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        자세히 보기 및 다운로드
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
+
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">오픈소스 라이브러리</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">음성 파이프라인</h3>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">도구와 클라이언트</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">도구와 클라이언트</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/zh-hant/index.astro b/src/pages/zh-hant/index.astro
index 91e9c7e..778bae0 100644
--- a/src/pages/zh-hant/index.astro
+++ b/src/pages/zh-hant/index.astro
@@ -63,6 +63,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -71,131 +75,202 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/zh-hant/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        免費公測
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        讓每一家小型企業，<br />
-        <span class="text-gradient-brand">都擁有大公司的聲音。</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat 打造 AI 驅動的工具，讓小型企業也能擁有過去只有大公司才負擔得起的能力。我們從語音開始——
-        一款把你的電腦變成辦公電話的桌面應用程式，自動錄音並寫下每一通通話。
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/zh-hant/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          在 GitHub 上查看
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          免費公測
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          讓每一家小型企業，<br />
+          <span class="text-gradient-brand">都擁有大公司的聲音。</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat 打造 AI 驅動的工具，讓小型企業也能擁有過去只有大公司才負擔得起的能力。我們從語音開始——
+        一款把你的電腦變成辦公電話的桌面應用程式，自動錄音並寫下每一通通話。
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            在 GitHub 上查看
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">我們的應用</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                免費公測
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              一款執行在你電腦上的電話應用程式。用你已經在用的電話電信業者，直接在桌面上接聽和撥打電話——
-            每通對話都自動為你錄音並寫成文字。你甚至可以讓 AI 助理替你撥打電話。
-            </p>
-            <a
-              href="/zh-hant/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              了解更多並下載
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/zh-Hant.webp"
-            alt="WaveKat Voice 通話進行中，即時轉寫通話內容"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/zh-Hant.webp"
+          alt="WaveKat Voice 通話進行中，即時轉寫通話內容"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">開源函式庫</h2>
-
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">語音流水線</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">我們的應用</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          免費公測
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        一款執行在你電腦上的電話應用程式。用你已經在用的電話電信業者，直接在桌面上接聽和撥打電話——
+            每通對話都自動為你錄音並寫成文字。你甚至可以讓 AI 助理替你撥打電話。
+      </p>
+      <a
+        href="/zh-hant/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        了解更多並下載
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">工具與用戶端</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">開源函式庫</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">語音流水線</h3>
+
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">工具與用戶端</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index 542104f..c4af1f2 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -62,6 +62,10 @@ const toolsAndClients = [
     href: 'https://github.com/wavekat/wavekat-cli',
   },
 ];
+// The pipeline reads as a signal chain; the last two crates are the foundation
+// every stage sits on. Slicing here keeps one data array per locale file.
+const pipelineFlow = voicePipeline.slice(0, 4);
+const pipelineBase = voicePipeline.slice(4);
 ---
 
 <Base
@@ -70,131 +74,202 @@ const toolsAndClients = [
 >
   <Header />
 
-  <div class="max-w-6xl mx-auto px-6">
+  <!-- Hero: product-first, screenshot front and center -->
+  <section class="relative overflow-hidden">
+    <div
+      class="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_1px_1px,rgb(0_0_0/0.07)_1px,transparent_0)] bg-[size:28px_28px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_35%,black,transparent)] dark:bg-[radial-gradient(circle_at_1px_1px,rgb(255_255_255/0.06)_1px,transparent_0)]"
+      aria-hidden="true"
+    >
+    </div>
+    <div
+      class="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[30rem] w-[50rem] -translate-x-1/2 rounded-full opacity-[0.13] blur-3xl"
+      style="background: radial-gradient(closest-side, #ff6d00, transparent);"
+      aria-hidden="true"
+    >
+    </div>
 
-    <!-- Hero -->
-    <section class="mx-auto max-w-3xl pt-14 pb-20 text-center sm:pt-20 sm:pb-24">
-      <a
-        href="/zh/voice/"
-        class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
-      >
-        <span class="font-semibold">WaveKat Voice</span>
-        <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
-        免费公测
-        <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
-      </a>
-      <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.1] tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
-        让每一家小企业，<br />
-        <span class="text-gradient-brand">都拥有大公司的声音。</span>
-      </h1>
-      <p class="animate-rise-late mx-auto mt-7 max-w-2xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
-        WaveKat 打造 AI 驱动的工具，让小企业也能拥有过去只有大公司才负担得起的能力。我们从语音开始——
-        一款把你的电脑变成办公电话的桌面应用，自动录音并写下每一通通话。
-      </p>
-      <div class="animate-rise-late mt-10 flex flex-wrap items-center justify-center gap-4">
-        <VoiceDownload />
+    <div class="mx-auto grid max-w-6xl items-center gap-14 px-6 pt-16 pb-20 sm:pt-20 sm:pb-24 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16">
+      <div>
         <a
-          href="https://github.com/wavekat"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-7 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          href="/zh/voice/"
+          class="animate-rise group inline-flex items-center gap-2 rounded-full border border-wk-orange/30 bg-wk-orange/5 py-1.5 pl-4 pr-3 text-xs font-medium text-wk-orange transition-colors hover:border-wk-orange/60 hover:bg-wk-orange/10"
         >
-          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
-          在 GitHub 上查看
+          <span class="font-semibold">WaveKat Voice</span>
+          <span class="h-3 w-px bg-wk-orange/30" aria-hidden="true"></span>
+          免费公测
+          <ArrowRight class="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </a>
+        <h1 class="animate-rise mt-7 text-4xl font-extrabold leading-[1.08] tracking-tight [text-wrap:balance] text-gray-900 dark:text-white sm:text-5xl xl:text-6xl">
+          让每一家小企业，<br />
+          <span class="text-gradient-brand">都拥有大公司的声音。</span>
+        </h1>
+        <p class="animate-rise-late mt-7 max-w-xl text-base leading-relaxed text-gray-500 dark:text-gray-400 sm:text-lg">
+          WaveKat 打造 AI 驱动的工具，让小企业也能拥有过去只有大公司才负担得起的能力。我们从语音开始——
+        一款把你的电脑变成办公电话的桌面应用，自动录音并写下每一通通话。
+        </p>
+        <div class="animate-rise-late mt-9 flex flex-wrap items-center gap-4">
+          <VoiceDownload />
+          <a
+            href="https://github.com/wavekat"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 rounded-full border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-700 transition-all hover:-translate-y-0.5 hover:border-gray-400 hover:bg-gray-900/5 dark:border-white/15 dark:text-gray-200 dark:hover:border-white/30 dark:hover:bg-white/5"
+          >
+            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
+            在 GitHub 上查看
+          </a>
+        </div>
       </div>
-    </section>
 
-    <!-- Featured product: WaveKat Voice -->
-    <section class="mb-24">
-      <h2 class="mb-6 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">我们的应用</h2>
-      <div
-        class="relative overflow-hidden rounded-3xl border border-wk-orange/25 bg-gray-50/50 dark:bg-wk-surface"
-      >
+      <div class="animate-rise-late relative">
         <div
-          class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-20 blur-3xl"
-          style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+          class="pointer-events-none absolute -inset-10 rounded-full opacity-25 blur-3xl"
+          style="background: radial-gradient(closest-side, #ff6d00, transparent);"
           aria-hidden="true"
         >
         </div>
-        <div class="relative grid items-center gap-10 p-8 sm:p-10 md:grid-cols-2">
-          <div>
-            <div class="mb-4 flex flex-wrap items-center gap-3">
-              <span class="text-2xl font-bold tracking-tight text-wk-orange">WaveKat Voice</span>
-              <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/5 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
-                免费公测
-              </span>
-            </div>
-            <p class="mb-7 text-[15px] leading-relaxed text-gray-600 dark:text-gray-300">
-              一款运行在你电脑上的电话应用。用你已经在用的电话运营商，直接在桌面上接听和拨打电话——
-            每通对话都自动为你录音并写成文字。你甚至可以让 AI 助手替你拨打电话。
-            </p>
-            <a
-              href="/zh/voice/"
-              class="group inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/35"
-            >
-              了解更多并下载
-              <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
-            </a>
-          </div>
-          <img
-            src="/screenshots/in-call/zh-Hans.webp"
-            alt="WaveKat Voice 通话进行中，实时转写通话内容"
-            width="1200"
-            height="872"
-            loading="lazy"
-            decoding="async"
-            class="w-full rounded-xl shadow-2xl shadow-black/20"
-          />
-        </div>
+        <img
+          src="/screenshots/in-call/zh-Hans.webp"
+          alt="WaveKat Voice 通话进行中，实时转写通话内容"
+          width="1200"
+          height="872"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+          class="relative w-full rounded-xl shadow-2xl shadow-black/25 ring-1 ring-gray-900/10 transition-transform duration-500 [transform:perspective(1400px)_rotateY(-8deg)_rotateX(1deg)] hover:[transform:perspective(1400px)_rotateY(0deg)_rotateX(0deg)] dark:ring-white/10"
+        />
       </div>
-    </section>
+    </div>
+  </section>
 
-    <!-- Libraries -->
-    <section>
-      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">开源库</h2>
-
-      <h3 class="mb-4 text-lg font-bold tracking-tight text-gray-900 dark:text-white">语音流水线</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {voicePipeline.map((lib) => (
-          <a
-            href={lib.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
-          >
-            <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
-          </a>
-        ))}
+  <!-- Product statement: a dark full-bleed band in both themes -->
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+    <div
+      class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
+      style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
+      aria-hidden="true"
+    >
+    </div>
+    <div class="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
+      <h2 class="mb-8 font-mono text-xs font-bold uppercase tracking-widest text-white/40">我们的应用</h2>
+      <div class="flex flex-wrap items-center gap-4">
+        <span class="text-3xl font-bold tracking-tight text-wk-orange sm:text-4xl">WaveKat Voice</span>
+        <span class="inline-flex items-center rounded-full border border-wk-orange/30 bg-wk-orange/10 px-2.5 py-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-wk-orange">
+          免费公测
+        </span>
       </div>
+      <p class="mt-6 max-w-3xl text-lg font-medium leading-relaxed text-gray-200 sm:text-2xl sm:leading-relaxed">
+        一款运行在你电脑上的电话应用。用你已经在用的电话运营商，直接在桌面上接听和拨打电话——
+            每通对话都自动为你录音并写成文字。你甚至可以让 AI 助手替你拨打电话。
+      </p>
+      <a
+        href="/zh/voice/"
+        class="group mt-9 inline-flex items-center gap-2 rounded-full bg-wk-orange px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-wk-orange/25 transition-all hover:-translate-y-0.5 hover:shadow-xl hover:shadow-wk-orange/40"
+      >
+        了解更多并下载
+        <ArrowRight class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
+      </a>
+    </div>
+  </section>
 
-      <h3 class="mb-4 mt-10 text-lg font-bold tracking-tight text-gray-900 dark:text-white">工具与客户端</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        {toolsAndClients.map((lib) => (
+  <!-- Libraries: the pipeline drawn as the signal chain it is -->
+  <section class="mx-auto max-w-6xl px-6 py-20 sm:py-24">
+    <h2 class="mb-3 font-mono text-xs font-bold uppercase tracking-widest text-gray-400">开源库</h2>
+    <h3 class="mb-10 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">语音流水线</h3>
+
+    <div class="grid gap-4 md:grid-cols-4 md:gap-8" data-reveal>
+      {pipelineFlow.map((lib, i) => (
+        <div class="relative">
           <a
             href={lib.href}
             target="_blank"
             rel="noopener noreferrer"
-            class="group block rounded-2xl border border-[color:var(--lib-soft)] bg-gray-50/50 p-6 transition-all hover:-translate-y-0.5 hover:border-[color:var(--lib)] hover:shadow-[0_12px_32px_-16px_var(--lib)] dark:bg-wk-surface"
-            style={`--lib: ${lib.color}; --lib-soft: ${lib.color}30;`}
+            class="group relative block h-full overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+            style={`--lib: ${lib.color};`}
           >
+            <span
+              class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+              style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+              aria-hidden="true"
+            ></span>
             <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
-            <p class="mb-5 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
-            <span class="font-mono text-xs text-gray-400 transition-colors group-hover:text-gray-700 dark:text-gray-600 dark:group-hover:text-gray-300">
-              github.com/wavekat/{lib.name} →
-            </span>
+            <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
           </a>
-        ))}
-      </div>
-    </section>
+          {i < 3 && (
+            <ArrowRight
+              class="absolute top-1/2 -right-6 hidden h-4 w-4 -translate-y-1/2 text-gray-300 dark:text-gray-600 md:block"
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+    </div>
 
+    <div class="mt-4 grid gap-4 md:mt-8 md:grid-cols-2 md:gap-8" data-reveal>
+      {pipelineBase.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
 
-  </div>
+    <h3 class="mb-8 mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl">工具与客户端</h3>
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8" data-reveal>
+      {toolsAndClients.map((lib) => (
+        <a
+          href={lib.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group relative block overflow-hidden rounded-2xl border border-gray-200/70 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-[0_20px_40px_-24px_var(--lib)] dark:border-white/[0.06] dark:bg-white/[0.02] dark:shadow-none"
+          style={`--lib: ${lib.color};`}
+        >
+          <span
+            class="absolute inset-x-0 top-0 h-0.5 opacity-60 transition-opacity group-hover:opacity-100"
+            style={`background: linear-gradient(90deg, transparent, ${lib.color}, transparent);`}
+            aria-hidden="true"
+          ></span>
+          <span class="mb-2 block font-mono text-sm font-bold" style={`color: ${lib.color}`}>{lib.name}</span>
+          <p class="text-sm leading-relaxed text-gray-500 dark:text-gray-400">{lib.description}</p>
+        </a>
+      ))}
+    </div>
+  </section>
 
   <Footer />
+
+  <script>
+    // Scroll reveal — content is visible without JS; motion is added on top.
+    const els = document.querySelectorAll('[data-reveal]');
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      els.forEach((el) => el.classList.add('reveal-in'));
+    } else {
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              e.target.classList.add('reveal-in');
+              io.unobserve(e.target);
+            }
+          }
+        },
+        { threshold: 0.15 },
+      );
+      els.forEach((el) => {
+        el.classList.add('reveal-init');
+        io.observe(el);
+      });
+    }
+  </script>
 </Base>
diff --git a/src/styles/global.css b/src/styles/global.css
index cd14c4a..eaf1b90 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -71,6 +71,30 @@
   }
 }
 
+/* Scroll-reveal: the script in the page adds .reveal-init to [data-reveal]
+   elements (so no-JS visitors always see content), then swaps in .reveal-in
+   as each enters the viewport. */
+.reveal-init {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.reveal-in {
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
+    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .reveal-init {
+    opacity: 1;
+    transform: none;
+  }
+  .reveal-in {
+    transition: none;
+  }
+}
+
 @keyframes wk-rise {
   from {
     opacity: 0;

From 2c0eb909abcf8abb586f9e77c3c3f1799205252a Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:55:42 +1200
Subject: [PATCH 5/7] fix: narrow voice section to a focused column

Content and sub-nav share a max-w-4xl column; header/footer stay
full width. Product pages read better narrower than the landing page.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/layouts/Voice.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/Voice.astro b/src/layouts/Voice.astro
index 802bc53..c2ea70d 100644
--- a/src/layouts/Voice.astro
+++ b/src/layouts/Voice.astro
@@ -72,7 +72,7 @@ const crumbSchema = crumbLabels[basePath]
 
   <!-- Sub-nav -->
   <div class="border-b border-gray-100 dark:border-white/10">
-    <nav class="mx-auto flex max-w-6xl items-center gap-1 overflow-x-auto px-6">
+    <nav class="mx-auto flex max-w-4xl items-center gap-1 overflow-x-auto px-6">
       {subNav.map((item) => {
         const active = isActive(item.href);
         return (
@@ -91,7 +91,7 @@ const crumbSchema = crumbLabels[basePath]
     </nav>
   </div>
 
-  <div class="max-w-6xl mx-auto px-6 pt-12 pb-12">
+  <div class="max-w-4xl mx-auto px-6 pt-12 pb-12">
 
     <slot />
 

From 9b8c3e34c1fd0849b894c4969644e8a677c1070b Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 19:57:58 +1200
Subject: [PATCH 6/7] fix: align voice sub-nav with the header bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tabs are chrome, not content — they share the header's 6xl container
while the content column stays at 4xl.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/layouts/Voice.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/Voice.astro b/src/layouts/Voice.astro
index c2ea70d..4549382 100644
--- a/src/layouts/Voice.astro
+++ b/src/layouts/Voice.astro
@@ -72,7 +72,7 @@ const crumbSchema = crumbLabels[basePath]
 
   <!-- Sub-nav -->
   <div class="border-b border-gray-100 dark:border-white/10">
-    <nav class="mx-auto flex max-w-4xl items-center gap-1 overflow-x-auto px-6">
+    <nav class="mx-auto flex max-w-6xl items-center gap-1 overflow-x-auto px-6">
       {subNav.map((item) => {
         const active = isActive(item.href);
         return (

From 8b37bc19d7ef844a4a93d4daaacce12e06a0913e Mon Sep 17 00:00:00 2001
From: Eason WaveKat <eason@wavekat.com>
Date: Wed, 8 Jul 2026 20:05:05 +1200
Subject: [PATCH 7/7] fix: make statement band visible in dark mode

The 2% white tint was indistinguishable from the page background, so
the product spotlight only existed in light mode. Raise the surface to
5% and the borders to 10% so the band reads as a distinct panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013oRLgHKazJ3wCcj7aR8LbR
---
 src/pages/de/index.astro      | 2 +-
 src/pages/es/index.astro      | 2 +-
 src/pages/fr/index.astro      | 2 +-
 src/pages/index.astro         | 2 +-
 src/pages/it/index.astro      | 2 +-
 src/pages/ja/index.astro      | 2 +-
 src/pages/ko/index.astro      | 2 +-
 src/pages/zh-hant/index.astro | 2 +-
 src/pages/zh/index.astro      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/de/index.astro b/src/pages/de/index.astro
index b8beaea..f62e20e 100644
--- a/src/pages/de/index.astro
+++ b/src/pages/de/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/es/index.astro b/src/pages/es/index.astro
index 0f73a2d..eef3989 100644
--- a/src/pages/es/index.astro
+++ b/src/pages/es/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/fr/index.astro b/src/pages/fr/index.astro
index 5210440..e1bd62b 100644
--- a/src/pages/fr/index.astro
+++ b/src/pages/fr/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a937a00..344be68 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -138,7 +138,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/it/index.astro b/src/pages/it/index.astro
index 18b32b5..36af015 100644
--- a/src/pages/it/index.astro
+++ b/src/pages/it/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/ja/index.astro b/src/pages/ja/index.astro
index 8c8e99d..0915a8b 100644
--- a/src/pages/ja/index.astro
+++ b/src/pages/ja/index.astro
@@ -143,7 +143,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/ko/index.astro b/src/pages/ko/index.astro
index 383d2e9..8e02c3d 100644
--- a/src/pages/ko/index.astro
+++ b/src/pages/ko/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/zh-hant/index.astro b/src/pages/zh-hant/index.astro
index 778bae0..b600fd7 100644
--- a/src/pages/zh-hant/index.astro
+++ b/src/pages/zh-hant/index.astro
@@ -144,7 +144,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index c4af1f2..5ab8e84 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -143,7 +143,7 @@ const pipelineBase = voicePipeline.slice(4);
   </section>
 
   <!-- Product statement: a dark full-bleed band in both themes -->
-  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/5 dark:bg-white/[0.02]" data-reveal>
+  <section class="relative overflow-hidden border-y border-gray-200/60 bg-[#070b14] dark:border-white/10 dark:bg-white/[0.05]" data-reveal>
     <div
       class="pointer-events-none absolute -top-32 -right-24 h-96 w-96 rounded-full opacity-15 blur-3xl"
       style="background: radial-gradient(circle, #ff6d00 0%, transparent 70%);"