diff --git a/docs/app/[lang]/page.tsx b/docs/app/[lang]/page.tsx
index 4a9c0557c..8e0c27b6b 100644
--- a/docs/app/[lang]/page.tsx
+++ b/docs/app/[lang]/page.tsx
@@ -3,6 +3,7 @@ import type { CSSProperties } from 'react';
 import { HeroProductStage } from '@/components/aceternity/HeroProductStage';
 import { InfiniteMovingCards } from '@/components/aceternity/InfiniteMovingCards';
 import { Spotlight } from '@/components/aceternity/Spotlight';
+import { LandingNav } from '@/components/landing/LandingNav';
 import { InstallTabs } from '@/components/landing/InstallTabs';
 import { RevealSection } from '@/components/landing/RevealSection';
 import {
@@ -349,11 +350,11 @@ const i18nText = {
     navChangelog: 'Changelog',
     navCommunity: 'Community',
     lang: '中文',
-    eyebrow: 'Open-source database workspace',
-    heroTitle: 'A focused database client for daily work.',
+    heroTitle: 'A focused database client for daily work',
     heroSubtitle:
       'DBX brings connections, SQL editing, data grids, schema tools, AI assistance, and self-hosted access into one lightweight product.',
     download: 'Download DBX',
+    downloadName: 'Download DBX',
     readDocs: 'Read the docs',
     docsStart: 'Start here',
     docsStartDesc: 'Install DBX, create your first connection, and learn the main workflow.',
@@ -375,10 +376,10 @@ const i18nText = {
     navChangelog: '更新日志',
     navCommunity: '社区',
     lang: 'English',
-    eyebrow: '开源数据库工作台',
-    heroTitle: '专注日常工作的数据库客户端。',
+    heroTitle: '专注日常工作的数据库客户端',
     heroSubtitle: 'DBX 将连接管理、SQL 编辑、数据表格、结构工具、AI 助手和自托管访问放进一个轻量产品里。',
     download: '下载 DBX',
+    downloadName: '下载 DBX',
     readDocs: '查看文档',
     docsStart: '从这里开始',
     docsStartDesc: '安装 DBX、创建第一个连接，并了解主要工作流。',
@@ -414,81 +415,90 @@ export default async function LandingPage({
 
   return (
     <main className="landing">
-      <nav className="landing-nav">
-        <div className="landing-nav-inner">
-          <Link href={`/${l}`} className="landing-logo">
-            <img src="/logo.png" alt="DBX" width={28} height={28} />
+      {/* Nav */}
+      <LandingNav>
+        <div className="flex items-center justify-between max-w-[1180px] h-16 mx-auto px-7 max-[760px]:min-h-[58px] max-[760px]:h-auto max-[760px]:px-[18px] max-[760px]:py-2.5">
+          <Link href={`/${l}`} className="flex items-center gap-2.5 text-landing-ink text-lg font-extrabold">
+            <img src="/logo.png" alt="DBX" width={28} height={28} className="rounded-[7px]" />
             <span>DBX</span>
           </Link>
-          <div className="landing-nav-links">
-            <Link href={`/${l}/docs/what-is-dbx`} target="_blank">
+          <div className="flex items-center gap-1">
+            <Link href={`/${l}/docs/what-is-dbx`} target="_blank" className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium max-[760px]:hidden">
               {t.navDocs}
             </Link>
-            <Link href={`/${l}/docs/changelog`} target="_blank">
+            <Link href={`/${l}/docs/changelog`} target="_blank" className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium max-[760px]:hidden">
               {t.navChangelog}
             </Link>
-            <Link href="https://github.com/t8y2/dbx" target="_blank">
+            <Link href="https://github.com/t8y2/dbx" target="_blank" className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium max-[760px]:hidden">
               GitHub
             </Link>
-            <Link href={l === 'cn' ? '/en' : '/cn'} className="landing-lang-switch">
+            <Link href={l === 'cn' ? '/en' : '/cn'} className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium ml-1.5 border border-landing-line">
               {t.lang}
             </Link>
           </div>
         </div>
-      </nav>
+      </LandingNav>
 
+      {/* Hero */}
       <section className="landing-hero">
         <Spotlight />
-        <div className="landing-hero-copy">
-          <div className="landing-eyebrow">{t.eyebrow}</div>
-          <h1>{t.heroTitle}</h1>
-          <p>{t.heroSubtitle}</p>
-          <div className="landing-hero-cta">
-            <Link href="https://github.com/t8y2/dbx/releases/latest" className="landing-btn-primary" target="_blank">
-              {t.download}
-              <ArrowRight size={16} />
-            </Link>
-            <Link href={`/${l}/docs/getting-started`} className="landing-btn-secondary" target="_blank">
-              {t.readDocs}
-            </Link>
+        <div className="relative z-[1] max-w-[1180px] mx-auto px-7 max-[1040px]:max-w-[920px] max-[760px]:px-[18px]">
+          <div className="landing-hero-copy relative z-[6] grid justify-items-center max-w-[900px] mx-auto text-center max-[1040px]:max-w-[760px]">
+            <h1 className="m-0 text-[clamp(36px,4.2vw,56px)] font-[820] leading-[1.06] text-landing-ink whitespace-nowrap max-[760px]:text-[clamp(26px,7vw,38px)]">
+              {t.heroTitle}
+            </h1>
+            <p className="landing-hero-subtitle mt-5 mx-auto text-[17px] font-[460] leading-[1.8] whitespace-nowrap max-[760px]:text-[15px] max-[760px]:leading-[1.68] max-[760px]:whitespace-normal max-[760px]:max-w-[320px]">
+              {t.heroSubtitle}
+            </p>
+            <div className="w-full max-w-[520px] mt-10">
+              <InstallTabs lang={l} />
+            </div>
           </div>
-          <InstallTabs lang={l} />
+          <HeroProductStage />
         </div>
-        <HeroProductStage />
       </section>
 
-      <RevealSection className="landing-metrics">
+      {/* Metrics */}
+      <RevealSection className="grid grid-cols-4 gap-3 max-w-[1180px] mx-auto px-7 pt-6 pb-11 [animation:landing-rise_0.72s_ease-out_0.1s_both] max-[760px]:grid-cols-1 max-[760px]:px-[18px] max-[760px]:pb-8">
         {metricItems.map((item) => (
-          <div key={item.label}>
-            <strong>{item.value}</strong>
-            <span>{item.label}</span>
+          <div key={item.label} data-stagger className="landing-glass-card min-h-[118px] rounded-[10px] p-[22px] max-[760px]:min-h-[96px] max-[760px]:p-[18px]">
+            <strong className="block text-landing-ink text-2xl font-[720]">{item.value}</strong>
+            <span className="block mt-1 text-landing-muted text-[13px]">{item.label}</span>
           </div>
         ))}
       </RevealSection>
 
-      <RevealSection className="landing-doc-start">
+      {/* Doc start */}
+      <RevealSection className="landing-glass-card-green flex items-center justify-between gap-[22px] max-w-[calc(1180px-56px)] mx-auto px-7 py-7 rounded-[10px] max-[760px]:block max-[760px]:px-[18px]">
         <div>
-          <h2>{t.docsStart}</h2>
-          <p>{t.docsStartDesc}</p>
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.docsStart}</h2>
+          <p className="mt-2 text-landing-muted text-sm leading-[1.65]">{t.docsStartDesc}</p>
         </div>
-        <Link href={`/${l}/docs/getting-started`} className="landing-inline-link" target="_blank">
+        <Link href={`/${l}/docs/getting-started`} className="landing-inline-link flex shrink-0 items-center gap-[7px] text-sm font-[650] max-[760px]:mt-4" target="_blank">
           {t.readDocs}
           <ArrowRight size={15} />
         </Link>
       </RevealSection>
 
-      <RevealSection className="landing-section">
-        <div className="landing-section-heading">
-          <h2>{t.workflowsTitle}</h2>
-          <p>{t.workflowsDesc}</p>
+      {/* Workflows */}
+      <RevealSection className="max-w-[1180px] mx-auto px-7 pt-[70px] pb-1 max-[760px]:px-[18px]">
+        <div className="grid grid-cols-[minmax(220px,0.42fr)_minmax(0,0.58fr)] gap-9 items-end mb-[22px] max-[760px]:block">
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.workflowsTitle}</h2>
+          <p className="mt-2 max-w-[650px] text-landing-muted text-sm leading-[1.65] justify-self-end text-right max-[760px]:max-w-none max-[760px]:text-left">{t.workflowsDesc}</p>
         </div>
-        <div className="landing-workflow-grid">
-          {workflowItems.map((item) => (
-            <Link key={item.title} href={item.href} className="landing-workflow-card" target="_blank">
-              <item.icon size={20} />
-              <h3>{item.title}</h3>
-              <p>{item.desc}</p>
-              <span>
+        <div className="landing-workflow-grid grid grid-cols-4 rounded-[10px] overflow-hidden max-[1040px]:grid-cols-2 max-[760px]:grid-cols-1">
+          {workflowItems.map((item, i) => (
+            <Link
+              key={item.title}
+              href={item.href}
+              className={`landing-workflow-card min-h-[250px] p-6 border-r border-r-landing-line max-[760px]:min-h-0 max-[760px]:border-r-0 max-[760px]:border-b max-[760px]:border-b-landing-line max-[760px]:last:border-b-0 ${i === workflowItems.length - 1 ? 'border-r-0' : ''}`}
+              target="_blank"
+              data-stagger
+            >
+              <item.icon size={20} className="text-landing-blue" />
+              <h3 className="mt-[18px] text-base font-bold">{item.title}</h3>
+              <p className="mt-2.5 text-landing-muted text-[13px] leading-[1.62]">{item.desc}</p>
+              <span className="inline-flex items-center gap-1.5 mt-[18px] text-landing-ink text-[13px] font-[650]">
                 {t.readDocs}
                 <ArrowRight size={14} />
               </span>
@@ -497,78 +507,83 @@ export default async function LandingPage({
         </div>
       </RevealSection>
 
-      <RevealSection className="landing-section landing-support">
-        <div className="landing-section-heading">
-          <h2>{t.supportTitle}</h2>
-          <p>{t.supportDesc}</p>
+      {/* Database support */}
+      <RevealSection className="relative max-w-[1180px] mx-auto px-7 pt-[70px] pb-1 max-[760px]:px-[18px]">
+        <div className="grid grid-cols-[minmax(260px,0.28fr)_minmax(0,0.72fr)] gap-9 items-end mb-[30px] max-[760px]:block">
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.supportTitle}</h2>
+          <p className="mt-2 max-w-[760px] text-landing-muted text-sm leading-[1.65] justify-self-end text-right max-[760px]:max-w-none max-[760px]:text-left">{t.supportDesc}</p>
         </div>
-        <div className="landing-db-grid">
+        <div className="grid grid-cols-8 gap-3 max-[760px]:grid-cols-2 max-[760px]:gap-2.5 max-[760px]:mt-[18px]">
           {databaseSupport.map((db) => (
-            <div className="landing-db-card" key={db.name} style={{ '--db-tone': db.tone } as CSSProperties}>
-              <div className="landing-db-icon">
-                {db.icon ? <img src={db.icon} alt="" width={42} height={42} /> : <span>{db.initials}</span>}
+            <div className="landing-db-card grid place-items-center min-h-[126px] rounded-[10px] px-2.5 py-[18px] max-[760px]:min-h-[122px] max-[760px]:py-4" key={db.name} style={{ '--db-tone': db.tone } as CSSProperties} data-stagger>
+              <div className="landing-db-icon grid place-items-center w-12 h-12 mb-[15px]">
+                {db.icon ? <img src={db.icon} alt="" width={38} height={38} className="block w-[38px] h-[38px] object-contain" /> : <span className="grid place-items-center min-w-[46px] h-8 rounded-lg px-2 text-white text-xs font-[780]">{db.initials}</span>}
               </div>
-              <strong>{db.name}</strong>
+              <strong className="text-sm font-[650] leading-[1.2] text-center text-[color-mix(in_srgb,var(--color-landing-ink)_92%,var(--color-landing-muted))]">{db.name}</strong>
             </div>
           ))}
         </div>
       </RevealSection>
 
-      <RevealSection className="landing-section landing-testimonials">
-        <div className="landing-section-heading">
-          <h2>{t.testimonialsTitle}</h2>
-          <p>{t.testimonialsDesc}</p>
+      {/* Testimonials */}
+      <RevealSection className="max-w-[1180px] mx-auto px-7 pt-[70px] pb-1 overflow-hidden max-[760px]:px-[18px]">
+        <div className="grid grid-cols-[minmax(220px,0.42fr)_minmax(0,0.58fr)] gap-9 items-end mb-[22px] max-[760px]:block">
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.testimonialsTitle}</h2>
+          <p className="mt-2 max-w-[650px] text-landing-muted text-sm leading-[1.65] justify-self-end text-right max-[760px]:max-w-none max-[760px]:text-left">{t.testimonialsDesc}</p>
         </div>
-        <div className="landing-testimonial-wall">
+        <div className="landing-testimonial-wall relative grid gap-3.5 -mx-7 py-1 max-[760px]:-mx-[18px] max-[760px]:mt-[18px]">
           <InfiniteMovingCards items={testimonialItems.slice(0, 6)} speed="slow" />
           <InfiniteMovingCards items={testimonialItems.slice(6)} direction="right" speed="slow" />
         </div>
       </RevealSection>
 
-      <RevealSection className="landing-section">
-        <div className="landing-section-heading">
-          <h2>{t.capabilitiesTitle}</h2>
+      {/* Capabilities */}
+      <RevealSection className="max-w-[1180px] mx-auto px-7 pt-[70px] pb-1 max-[760px]:px-[18px]">
+        <div className="grid grid-cols-[minmax(220px,0.42fr)_minmax(0,0.58fr)] gap-9 items-end mb-[22px] max-[760px]:block">
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.capabilitiesTitle}</h2>
         </div>
-        <div className="landing-capability-grid">
+        <div className="grid grid-cols-3 gap-2.5 max-[1040px]:grid-cols-2 max-[760px]:grid-cols-1 max-[760px]:mt-[18px]">
           {capabilityItems.map((item) => (
-            <div key={item.label} className="landing-capability">
-              <item.icon size={18} />
-              <span>{item.label}</span>
+            <div key={item.label} className="landing-capability flex items-center gap-2.5 min-h-[72px] rounded-lg px-[15px] py-3.5" data-stagger>
+              <item.icon size={18} className="shrink-0 text-landing-blue" />
+              <span className="text-landing-ink text-[13px] font-[560] leading-[1.45]">{item.label}</span>
             </div>
           ))}
         </div>
       </RevealSection>
 
-      <RevealSection className="landing-updates">
-        <div className="landing-update-version">{latest.version}</div>
-        <div className="landing-update-copy">
-          <h2>{latest.title}</h2>
-          <p>{latest.desc}</p>
+      {/* Updates */}
+      <RevealSection className="grid grid-cols-[minmax(86px,0.16fr)_minmax(210px,0.32fr)_minmax(0,0.38fr)_max-content] gap-[22px] items-center max-w-[1180px] mx-auto px-7 border-t border-b border-landing-line mt-[62px] py-6 max-[1040px]:grid-cols-[minmax(0,1fr)_max-content] max-[760px]:block max-[760px]:px-[18px]">
+        <div className="landing-update-version w-max rounded-[7px] px-2.5 py-[7px] text-[13px] font-[720]">{latest.version}</div>
+        <div className="max-[1040px]:col-span-full max-[760px]:mt-4">
+          <h2 className="m-0 text-[21px] font-[720] text-landing-ink">{latest.title}</h2>
+          <p className="mt-1.5 text-landing-muted text-[13px] leading-[1.55]">{latest.desc}</p>
         </div>
-        <ul className="landing-update-list">
+        <ul className="grid gap-2 m-0 p-0 list-none max-[1040px]:col-span-full max-[760px]:mt-4">
           {latest.items.map((item) => (
-            <li key={item}>
-              <CheckCircle2 size={14} />
+            <li key={item} className="flex gap-2 items-center text-[13px] font-[560] leading-[1.45] text-[color-mix(in_srgb,var(--color-landing-ink)_88%,var(--color-landing-muted))]" data-stagger>
+              <CheckCircle2 size={14} className="shrink-0 text-landing-green" />
               <span>{item}</span>
             </li>
           ))}
         </ul>
-        <Link href={`/${l}/docs/changelog`} className="landing-inline-link" target="_blank">
+        <Link href={`/${l}/docs/changelog`} className="landing-inline-link flex shrink-0 items-center gap-[7px] text-sm font-[650] max-[760px]:mt-4" target="_blank">
           {latest.link}
           <ArrowRight size={15} />
         </Link>
       </RevealSection>
 
-      <RevealSection className="landing-final">
+      {/* Final CTA */}
+      <RevealSection className="flex items-center justify-between gap-6 max-w-[1180px] mx-auto px-7 border border-landing-line rounded-[10px] bg-landing-panel mt-[72px] mb-14 py-[30px] max-[760px]:block max-[760px]:px-[18px]">
         <div>
-          <h2>{t.footerTitle}</h2>
-          <p>{t.footerDesc}</p>
+          <h2 className="m-0 text-[25px] font-[720] text-landing-ink">{t.footerTitle}</h2>
+          <p className="mt-2 text-landing-muted text-sm leading-[1.65]">{t.footerDesc}</p>
         </div>
-        <div className="landing-final-actions">
-          <Link href="https://github.com/t8y2/dbx/releases/latest" target="_blank">
+        <div className="flex items-center gap-2.5 flex-wrap justify-end max-[760px]:mt-[18px]">
+          <Link href="https://github.com/t8y2/dbx/releases/latest" target="_blank" className="landing-final-link inline-flex items-center justify-center min-h-[42px] rounded-[7px] px-[15px] text-sm font-[650]">
             {t.release}
           </Link>
-          <Link href={`/${l}/docs/getting-started#docker`} target="_blank">
+          <Link href={`/${l}/docs/getting-started#docker`} target="_blank" className="landing-final-link inline-flex items-center justify-center min-h-[42px] rounded-[7px] px-[15px] text-sm font-[650]">
             {t.docker}
           </Link>
         </div>
diff --git a/docs/app/global.css b/docs/app/global.css
index 45ee52ba4..7853b9e3b 100644
--- a/docs/app/global.css
+++ b/docs/app/global.css
@@ -2,6 +2,18 @@
 @import 'fumadocs-ui/css/ocean.css';
 @import 'fumadocs-ui/css/preset.css';
 
+@theme {
+  --color-landing-ink: #f7fbff;
+  --color-landing-muted: #9aa9bc;
+  --color-landing-blue: #6ea8ff;
+  --color-landing-sky: #52d5ff;
+  --color-landing-green: #44d19d;
+  --color-landing-line: rgba(155, 176, 205, 0.18);
+  --color-landing-soft: rgba(148, 163, 184, 0.1);
+  --color-landing-panel: rgba(17, 21, 29, 0.84);
+  --color-landing-panel-strong: rgba(23, 28, 38, 0.94);
+}
+
 :root {
   --color-fd-background: hsl(210 58% 98.8%);
   --color-fd-foreground: hsl(222 48% 9%);
@@ -280,22 +292,12 @@ a {
   -webkit-tap-highlight-color: transparent;
 }
 
+
 .landing {
   --landing-max: 1180px;
-  --landing-ink: #f7fbff;
-  --landing-muted: #9aa9bc;
-  --landing-panel: color-mix(in srgb, #11151d 84%, transparent);
-  --landing-panel-strong: color-mix(in srgb, #171c26 94%, transparent);
-  --landing-line: rgba(155, 176, 205, 0.18);
-  --landing-soft: rgba(148, 163, 184, 0.1);
-  --landing-blue: #6ea8ff;
-  --landing-sky: #52d5ff;
-  --landing-green: #44d19d;
   min-height: 100vh;
-  color: var(--landing-ink);
-  background:
-    linear-gradient(180deg, #07090d 0%, #0d1118 44%, #10151d 100%),
-    #0d1118;
+  color: var(--color-landing-ink);
+  background: #10151d;
   overflow: hidden;
 }
 
@@ -303,6 +305,8 @@ a {
   text-decoration: none;
 }
 
+/* Reveal animation */
+
 .landing-reveal {
   opacity: 0;
   transform: translateY(26px);
@@ -318,11 +322,7 @@ a {
   transform: translateY(0);
 }
 
-.landing-reveal .landing-workflow-card,
-.landing-reveal .landing-db-card,
-.landing-reveal .landing-capability,
-.landing-reveal .landing-update-list li,
-.landing-reveal .landing-metrics div {
+.landing-reveal [data-stagger] {
   opacity: 0;
   transform: translateY(14px);
   transition:
@@ -330,243 +330,143 @@ a {
     transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.landing-reveal.is-visible .landing-workflow-card,
-.landing-reveal.is-visible .landing-db-card,
-.landing-reveal.is-visible .landing-capability,
-.landing-reveal.is-visible .landing-update-list li,
-.landing-reveal.is-visible .landing-metrics div {
+.landing-reveal.is-visible [data-stagger] {
   opacity: 1;
   transform: translateY(0);
 }
 
-.landing-reveal.is-visible .landing-workflow-card:nth-child(2),
-.landing-reveal.is-visible .landing-db-card:nth-child(2),
-.landing-reveal.is-visible .landing-capability:nth-child(2),
-.landing-reveal.is-visible .landing-update-list li:nth-child(2),
-.landing-reveal.is-visible .landing-metrics div:nth-child(2) {
-  transition-delay: 70ms;
-}
+.landing-reveal.is-visible [data-stagger]:nth-child(2) { transition-delay: 70ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(3) { transition-delay: 120ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(4) { transition-delay: 170ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(8n+5) { transition-delay: 210ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(8n+6) { transition-delay: 250ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(8n+7) { transition-delay: 290ms; }
+.landing-reveal.is-visible [data-stagger]:nth-child(8n) { transition-delay: 330ms; }
 
-.landing-reveal.is-visible .landing-workflow-card:nth-child(3),
-.landing-reveal.is-visible .landing-db-card:nth-child(3),
-.landing-reveal.is-visible .landing-capability:nth-child(3),
-.landing-reveal.is-visible .landing-update-list li:nth-child(3),
-.landing-reveal.is-visible .landing-metrics div:nth-child(3) {
-  transition-delay: 120ms;
-}
-
-.landing-reveal.is-visible .landing-workflow-card:nth-child(4),
-.landing-reveal.is-visible .landing-db-card:nth-child(4),
-.landing-reveal.is-visible .landing-capability:nth-child(4),
-.landing-reveal.is-visible .landing-update-list li:nth-child(4),
-.landing-reveal.is-visible .landing-metrics div:nth-child(4) {
-  transition-delay: 170ms;
-}
-
-.landing-reveal.is-visible .landing-db-card:nth-child(8n + 5),
-.landing-reveal.is-visible .landing-capability:nth-child(5) {
-  transition-delay: 210ms;
-}
-
-.landing-reveal.is-visible .landing-db-card:nth-child(8n + 6),
-.landing-reveal.is-visible .landing-capability:nth-child(6) {
-  transition-delay: 250ms;
-}
-
-.landing-reveal.is-visible .landing-db-card:nth-child(8n + 7) {
-  transition-delay: 290ms;
-}
-
-.landing-reveal.is-visible .landing-db-card:nth-child(8n) {
-  transition-delay: 330ms;
-}
+/* Nav */
 
 .landing-nav {
-  position: sticky;
+  position: fixed;
   top: 0;
-  z-index: 20;
-  border-bottom: 1px solid var(--landing-line);
-  background: color-mix(in srgb, #080b10 82%, transparent);
+  left: 0;
+  right: 0;
+  z-index: 80;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  transition:
+    background 0.3s ease,
+    border-color 0.3s ease;
+}
+
+.landing-nav::before {
+  content: '';
+  position: absolute;
+  inset: 0;
   backdrop-filter: blur(18px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
 }
 
-.landing-nav-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: var(--landing-max);
-  height: 64px;
-  margin: 0 auto;
-  padding: 0 28px;
+.landing-nav.is-scrolled {
+  border-bottom-color: var(--color-landing-line);
+  background: color-mix(in srgb, #0c1120 62%, transparent);
 }
 
-.landing-logo,
-.landing-nav-links,
-.landing-hero-cta,
-.landing-inline-link,
-.landing-final-actions,
-.landing-capability {
-  display: flex;
-  align-items: center;
+.landing-nav.is-scrolled::before {
+  opacity: 1;
 }
 
-.landing-logo {
-  gap: 10px;
-  color: var(--landing-ink);
-  font-size: 15px;
-  font-weight: 700;
-}
-
-.landing-logo img {
-  border-radius: 7px;
-}
-
-.landing-nav-links {
-  gap: 4px;
-}
-
-.landing-nav-links a {
-  border-radius: 7px;
-  padding: 8px 11px;
-  color: var(--landing-muted);
-  font-size: 13px;
-  font-weight: 500;
+.landing-nav-link {
   transition:
     background 0.16s ease,
     color 0.16s ease,
     transform 0.16s ease;
 }
 
-.landing-nav-links a:hover {
-  background: var(--landing-soft);
-  color: var(--landing-ink);
+.landing-nav-link:hover {
+  background: var(--color-landing-soft);
+  color: var(--color-landing-ink);
   transform: translateY(-1px);
 }
 
-.landing-lang-switch {
-  margin-left: 6px;
-  border: 1px solid var(--landing-line);
-}
+/* Hero */
 
 .landing-hero {
   position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 470px) minmax(520px, 1fr);
-  gap: 56px;
-  align-items: start;
-  max-width: var(--landing-max);
-  min-height: 570px;
-  margin: 0 auto;
-  padding: 76px 28px 42px;
+  min-height: calc(100vh - 64px);
+  padding-top: 148px;
+  overflow: hidden;
   isolation: isolate;
 }
 
 .landing-hero::before {
   content: '';
   position: absolute;
-  inset: 0 -40px auto;
-  height: 100%;
-  border-bottom: 1px solid var(--landing-line);
+  inset: 0;
   background:
-    radial-gradient(circle at 68% 22%, rgba(82, 213, 255, 0.1), transparent 360px),
-    linear-gradient(90deg, rgba(7, 9, 13, 0.98) 0%, rgba(7, 9, 13, 0.92) 48%, rgba(7, 9, 13, 0.68) 100%),
-    linear-gradient(180deg, rgba(7, 9, 13, 0.12) 0%, #0d1118 100%);
+    radial-gradient(ellipse at 50% 34%, rgba(44, 88, 174, 0.42), transparent 46%),
+    radial-gradient(ellipse at 18% 16%, rgba(82, 213, 255, 0.13), transparent 34%),
+    radial-gradient(ellipse at 76% 22%, rgba(68, 209, 157, 0.1), transparent 30%),
+    linear-gradient(180deg, #10151d 0%, #0c1528 48%, #10151d 82%, #10151d 100%);
   z-index: -3;
 }
 
 .landing-hero::after {
   content: '';
   position: absolute;
-  inset: 86px 12px 20px;
+  inset: 134px -12vw -140px;
   background-image:
-    linear-gradient(rgba(110, 168, 255, 0.1) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(110, 168, 255, 0.1) 1px, transparent 1px);
-  background-size: 54px 54px;
-  mask-image: radial-gradient(circle at 66% 48%, black 0%, transparent 62%);
-  opacity: 0.46;
+    linear-gradient(rgba(110, 168, 255, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(110, 168, 255, 0.08) 1px, transparent 1px);
+  background-size: 58px 58px;
+  mask-image: radial-gradient(ellipse at 50% 56%, black 0%, transparent 64%);
+  opacity: 0.5;
   pointer-events: none;
-  transform: perspective(1200px) rotateX(58deg) translateY(90px);
+  transform: perspective(1200px) rotateX(60deg) translateY(84px);
   transform-origin: center bottom;
-  animation: landing-grid-drift 13s linear infinite;
+  animation: landing-grid-drift 15s linear infinite;
   z-index: -2;
 }
 
 .aceternity-spotlight {
   position: absolute;
-  inset: -18% auto auto 6%;
-  width: min(760px, 68vw);
-  height: 620px;
+  inset: -210px auto auto 50%;
+  width: min(980px, 82vw);
+  height: 720px;
   border-radius: 999px;
   background:
-    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.2), transparent 14%),
-    radial-gradient(circle at 38% 34%, rgba(82, 213, 255, 0.26), transparent 34%),
-    radial-gradient(circle at 50% 50%, rgba(110, 168, 255, 0.18), transparent 58%);
-  filter: blur(44px);
+    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.16), transparent 12%),
+    radial-gradient(circle at 46% 38%, rgba(82, 213, 255, 0.2), transparent 34%),
+    radial-gradient(circle at 58% 52%, rgba(110, 168, 255, 0.16), transparent 60%);
+  filter: blur(52px);
   mix-blend-mode: screen;
   pointer-events: none;
+  transform: translateX(-50%);
   z-index: -1;
 }
 
 .landing-hero-copy {
-  max-width: 470px;
   animation: landing-rise 0.72s ease-out both;
 }
 
+.landing-hero-subtitle {
+  color: color-mix(in srgb, var(--color-landing-muted) 86%, white);
+}
+
 .landing-eyebrow {
-  width: max-content;
-  border: 1px solid var(--landing-line);
-  border-radius: 999px;
-  margin-bottom: 18px;
-  padding: 6px 10px;
+  border: 1px solid var(--color-landing-line);
   background: rgba(255, 255, 255, 0.04);
-  color: color-mix(in srgb, var(--landing-sky) 74%, white);
-  font-size: 12px;
-  font-weight: 600;
+  color: color-mix(in srgb, var(--color-landing-sky) 74%, white);
   box-shadow:
     0 0 0 1px rgba(82, 213, 255, 0.04) inset,
     0 0 28px rgba(82, 213, 255, 0.13);
   animation: landing-pulse 3.8s ease-in-out infinite;
 }
 
-.landing-hero h1 {
-  max-width: 470px;
-  margin: 0;
-  font-size: clamp(38px, 4.2vw, 56px);
-  font-weight: 760;
-  letter-spacing: 0;
-  line-height: 1.06;
-  color: var(--landing-ink);
-}
-
-.landing-hero p {
-  max-width: 470px;
-  margin: 22px 0 0;
-  color: var(--landing-muted);
-  font-size: 17px;
-  line-height: 1.72;
-}
-
-.landing-hero-cta {
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-top: 30px;
-}
-
-.landing-btn-primary,
-.landing-btn-secondary,
-.landing-final-actions a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 42px;
-  border-radius: 7px;
-  padding: 0 15px;
-  font-size: 14px;
-  font-weight: 650;
-}
+/* Buttons */
 
 .landing-btn-primary {
-  gap: 8px;
   background: #f7fbff;
   color: #090d13;
   box-shadow:
@@ -585,149 +485,113 @@ a {
   box-shadow: 0 18px 42px rgba(110, 168, 255, 0.25);
 }
 
-.landing-btn-secondary,
-.landing-final-actions a {
-  border: 1px solid var(--landing-line);
-  background: var(--landing-panel);
-  color: var(--landing-ink);
+.landing-btn-secondary {
+  border: 1px solid var(--color-landing-line);
+  background: var(--color-landing-panel);
+  color: var(--color-landing-ink);
   transition:
     border-color 0.16s ease,
     background 0.16s ease,
     transform 0.16s ease;
 }
 
-.landing-btn-secondary:hover,
-.landing-final-actions a:hover {
+.landing-btn-secondary:hover {
   border-color: rgba(178, 200, 230, 0.34);
-  background: var(--landing-panel-strong);
+  background: var(--color-landing-panel-strong);
   transform: translateY(-1px);
 }
 
-.landing-install {
+/* Install dropdown */
+
+.landing-install::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
   display: block;
-  max-width: 540px;
-  min-height: 174px;
-  border: 1px solid var(--landing-line);
-  border-radius: 8px;
-  margin-top: 18px;
-  padding: 8px;
-  background: rgba(10, 14, 20, 0.72);
-  backdrop-filter: blur(14px);
+  width: 100%;
+  height: 24px;
 }
 
-.landing-install-tabs {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 6px;
-  margin-bottom: 8px;
+.landing-install-trigger {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 244, 250, 0.96)),
+    #fff;
+  color: #070b12;
+  box-shadow:
+    0 18px 54px rgba(0, 0, 0, 0.24),
+    0 0 0 1px rgba(255, 255, 255, 0.72) inset;
+  transition: box-shadow 0.16s ease;
 }
 
-.landing-install-tab {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 8px 6px;
-  background: transparent;
-  color: var(--landing-muted);
-  text-align: center;
-  cursor: pointer;
+.landing-install-trigger:hover,
+.landing-install[data-open='true'] .landing-install-trigger {
+  box-shadow:
+    0 24px 68px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.78) inset;
+}
+
+.landing-install-trigger > svg:first-child {
+  fill: currentColor;
+  stroke-width: 0;
+}
+
+.landing-install-trigger > svg:last-child {
+  color: #5f6876;
+  transition: transform 0.16s ease;
+}
+
+.landing-install[data-open='true'] .landing-install-trigger > svg:last-child {
+  transform: rotate(180deg);
+}
+
+.landing-install-menu {
+  background: rgba(4, 5, 8, 0.94);
+  box-shadow:
+    0 26px 64px rgba(0, 0, 0, 0.34),
+    0 0 0 1px rgba(255, 255, 255, 0.035) inset;
+  backdrop-filter: blur(18px);
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0.16s ease;
+  visibility: hidden;
+}
+
+.landing-install:hover .landing-install-menu,
+.landing-install[data-open='true'] .landing-install-menu {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+
+.landing-install-option {
+  color: color-mix(in srgb, var(--color-landing-ink) 88%, var(--color-landing-muted));
   transition:
-    border-color 0.16s ease,
     background 0.16s ease,
     color 0.16s ease;
 }
 
-.landing-install-tab:hover,
-.landing-install-tab[aria-selected='true'] {
-  border-color: rgba(178, 200, 230, 0.2);
+.landing-install-option:hover {
   background: rgba(255, 255, 255, 0.055);
-  color: var(--landing-ink);
+  color: var(--color-landing-ink);
 }
 
-.landing-install-tab span {
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.landing-install-option svg {
+  fill: currentColor;
+  stroke-width: 1.8;
 }
 
-.landing-install-tab small {
-  overflow: hidden;
-  color: var(--landing-muted);
-  font-size: 10px;
-  font-weight: 600;
-  line-height: 1.2;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.landing-install-command {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 34px;
-  gap: 8px;
-  align-items: stretch;
-}
-
-.landing-install-command code {
-  display: flex;
-  align-items: center;
-  min-height: 38px;
-  overflow: hidden;
-  border: 1px solid rgba(155, 176, 205, 0.14);
-  border-radius: 6px;
-  padding: 8px 10px;
-  background: rgba(3, 7, 12, 0.45);
-  color: var(--landing-ink);
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
-
-.landing-install-copy {
-  display: grid;
-  place-items: center;
-  border: 1px solid rgba(155, 176, 205, 0.16);
-  border-radius: 6px;
-  background: rgba(255, 255, 255, 0.045);
-  color: var(--landing-ink);
-  cursor: pointer;
-  transition:
-    border-color 0.16s ease,
-    background 0.16s ease,
-    transform 0.16s ease;
-}
-
-.landing-install-copy:hover {
-  border-color: rgba(178, 200, 230, 0.34);
-  background: rgba(255, 255, 255, 0.075);
-  transform: translateY(-1px);
-}
-
-.landing-install-release {
-  display: inline-flex;
-  gap: 6px;
-  align-items: center;
-  margin-top: 8px;
-  color: var(--landing-blue);
-  font-size: 12px;
-  font-weight: 650;
-}
+/* Product showcase */
 
 .landing-product {
-  position: relative;
-  align-self: center;
-  width: min(600px, 100%);
-  margin: 64px 0 0;
-  overflow: hidden;
-  border: 1px solid var(--landing-line);
-  border-radius: 12px;
+  border: 1px solid var(--color-landing-line);
   background: #0d1117;
   box-shadow:
-    0 34px 90px rgba(0, 0, 0, 0.38),
+    0 38px 110px rgba(0, 0, 0, 0.5),
+    0 0 80px rgba(82, 213, 255, 0.1),
     0 0 0 1px rgba(255, 255, 255, 0.03) inset;
   transform-style: preserve-3d;
   transition:
@@ -763,85 +627,61 @@ a {
   content: '';
   position: absolute;
   inset: 34px 0 0;
-  background:
-    radial-gradient(circle at 72% 18%, rgba(82, 213, 255, 0.1), transparent 18%),
-    linear-gradient(180deg, transparent 64%, rgba(68, 209, 157, 0.035));
+  background: radial-gradient(circle at 72% 18%, rgba(82, 213, 255, 0.1), transparent 18%);
   mix-blend-mode: screen;
   pointer-events: none;
   z-index: 3;
 }
 
 .landing-product:hover {
-  transform: translateY(-4px) scale(1.01);
-  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.48);
+  transform: translateY(-4px) scale(1.005);
+  box-shadow:
+    0 46px 122px rgba(0, 0, 0, 0.58),
+    0 0 100px rgba(82, 213, 255, 0.13);
 }
 
-.landing-window-bar {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  gap: 7px;
-  height: 34px;
-  align-items: center;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  padding: 0 13px;
-  background: #111827;
+.landing-product-slide {
+  opacity: 0;
+  transition: opacity 0.45s ease;
 }
 
-.landing-window-bar span {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.22);
+.landing-product-slide[data-active='true'] {
+  opacity: 1;
 }
 
-.landing-window-bar span:nth-child(1) {
-  background: #ff5f57;
+.landing-product-dots {
+  border: 1px solid rgba(155, 176, 205, 0.16);
+  background: rgba(5, 8, 13, 0.66);
+  backdrop-filter: blur(16px);
 }
 
-.landing-window-bar span:nth-child(2) {
-  background: #ffbd2e;
+.landing-product-dots button {
+  background: rgba(226, 232, 240, 0.38);
+  color: transparent;
+  transition:
+    width 0.2s ease,
+    background 0.2s ease,
+    opacity 0.2s ease;
 }
 
-.landing-window-bar span:nth-child(3) {
-  background: #28c840;
+.landing-product-dots button[aria-current='true'] {
+  width: 28px;
+  background: color-mix(in srgb, var(--color-landing-sky) 84%, white);
 }
 
-.landing-product img {
-  position: relative;
-  z-index: 1;
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
-  object-position: left top;
+.landing-product-dots span {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
 }
 
-.landing-metrics,
-.landing-doc-start,
-.landing-updates,
-.landing-section,
-.landing-final {
-  max-width: var(--landing-max);
-  margin: 0 auto;
-  padding-right: 28px;
-  padding-left: 28px;
-}
+/* Glass cards */
 
-.landing-metrics {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  padding-top: 24px;
-  padding-bottom: 44px;
-  animation: landing-rise 0.72s ease-out 0.1s both;
-}
-
-.landing-metrics div {
-  min-height: 118px;
+.landing-glass-card {
   border: 1px solid rgba(155, 176, 205, 0.14);
-  border-radius: 10px;
-  padding: 22px;
   background:
     radial-gradient(circle at 78% 12%, rgba(110, 168, 255, 0.12), transparent 44%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
@@ -851,30 +691,8 @@ a {
     0 0 0 1px rgba(255, 255, 255, 0.02) inset;
 }
 
-.landing-metrics strong {
-  display: block;
-  color: var(--landing-ink);
-  font-size: 24px;
-  font-weight: 720;
-}
-
-.landing-metrics span {
-  display: block;
-  margin-top: 4px;
-  color: var(--landing-muted);
-  font-size: 13px;
-}
-
-.landing-doc-start {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 22px;
-  max-width: calc(var(--landing-max) - 56px);
+.landing-glass-card-green {
   border: 1px solid rgba(155, 176, 205, 0.14);
-  border-radius: 10px;
-  padding-top: 28px;
-  padding-bottom: 28px;
   background:
     radial-gradient(circle at 78% 16%, rgba(68, 209, 157, 0.1), transparent 34%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
@@ -884,135 +702,29 @@ a {
     0 0 0 1px rgba(255, 255, 255, 0.02) inset;
 }
 
-.landing-doc-start h2,
-.landing-section-heading h2,
-.landing-final h2 {
-  margin: 0;
-  font-size: 25px;
-  font-weight: 720;
-  letter-spacing: 0;
-  color: var(--landing-ink);
-}
-
-.landing-doc-start p,
-.landing-section-heading p,
-.landing-final p {
-  margin: 8px 0 0;
-  color: var(--landing-muted);
-  font-size: 14px;
-  line-height: 1.65;
-}
-
-.landing-section-heading p {
-  max-width: 650px;
-  justify-self: end;
-  text-align: right;
-}
+/* Inline link */
 
 .landing-inline-link {
-  flex-shrink: 0;
-  gap: 7px;
-  color: var(--landing-blue);
-  font-size: 14px;
-  font-weight: 650;
+  color: var(--color-landing-blue);
   transition:
     color 0.16s ease,
     transform 0.16s ease;
 }
 
 .landing-inline-link:hover {
-  color: color-mix(in srgb, var(--landing-sky) 70%, white);
+  color: color-mix(in srgb, var(--color-landing-sky) 70%, white);
   transform: translateX(2px);
 }
 
-.landing-section {
-  padding-top: 70px;
-  padding-bottom: 4px;
-}
-
-.landing-updates {
-  display: grid;
-  grid-template-columns: minmax(86px, 0.16fr) minmax(210px, 0.32fr) minmax(0, 0.38fr) max-content;
-  gap: 22px;
-  align-items: center;
-  border-top: 1px solid var(--landing-line);
-  border-bottom: 1px solid var(--landing-line);
-  margin-top: 62px;
-  padding-top: 24px;
-  padding-bottom: 24px;
-}
-
-.landing-update-version {
-  width: max-content;
-  border: 1px solid var(--landing-line);
-  border-radius: 7px;
-  padding: 7px 10px;
-  background: var(--landing-panel);
-  color: var(--landing-blue);
-  font-size: 13px;
-  font-weight: 720;
-}
-
-.landing-update-copy h2 {
-  margin: 0;
-  font-size: 21px;
-  font-weight: 720;
-  letter-spacing: 0;
-}
-
-.landing-update-copy p {
-  margin: 6px 0 0;
-  color: var(--landing-muted);
-  font-size: 13px;
-  line-height: 1.55;
-}
-
-.landing-update-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.landing-update-list li {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
-  color: color-mix(in srgb, var(--landing-ink) 88%, var(--landing-muted));
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.45;
-}
-
-.landing-update-list svg {
-  flex: 0 0 auto;
-  color: var(--landing-green);
-}
-
-.landing-section-heading {
-  display: grid;
-  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 0.58fr);
-  gap: 36px;
-  align-items: end;
-  margin-bottom: 22px;
-}
+/* Workflow card */
 
 .landing-workflow-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  border: 1px solid var(--landing-line);
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--landing-panel);
+  border: 1px solid var(--color-landing-line);
+  background: var(--color-landing-panel);
 }
 
 .landing-workflow-card {
-  min-height: 250px;
-  border-right: 1px solid var(--landing-line);
-  padding: 24px;
-  color: var(--landing-ink);
+  color: var(--color-landing-ink);
   transition:
     border-color 0.16s ease,
     background 0.16s ease,
@@ -1020,195 +732,25 @@ a {
     box-shadow 0.16s ease;
 }
 
-.landing-workflow-card:last-child {
-  border-right: 0;
-}
-
 .landing-workflow-card:hover {
-  background: var(--landing-panel-strong);
+  background: var(--color-landing-panel-strong);
   border-color: rgba(110, 168, 255, 0.24);
   transform: translateY(-3px);
   box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
 }
 
-.landing-workflow-card > svg {
-  color: var(--landing-blue);
+/* Update version badge */
+
+.landing-update-version {
+  border: 1px solid var(--color-landing-line);
+  background: var(--color-landing-panel);
+  color: var(--color-landing-blue);
 }
 
-.landing-workflow-card h3 {
-  margin: 18px 0 0;
-  font-size: 16px;
-  font-weight: 700;
-}
-
-.landing-workflow-card p {
-  margin: 10px 0 0;
-  color: var(--landing-muted);
-  font-size: 13px;
-  line-height: 1.62;
-}
-
-.landing-workflow-card span {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 18px;
-  color: var(--landing-ink);
-  font-size: 13px;
-  font-weight: 650;
-}
-
-.landing-support {
-  position: relative;
-}
-
-.landing-testimonials {
-  overflow: hidden;
-}
-
-.landing-testimonial-wall {
-  position: relative;
-  display: grid;
-  gap: 14px;
-  margin-right: -28px;
-  margin-left: -28px;
-  padding: 4px 0;
-}
-
-.landing-testimonial-wall::before,
-.landing-testimonial-wall::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 2;
-  width: min(180px, 18vw);
-  pointer-events: none;
-}
-
-.landing-testimonial-wall::before {
-  left: 0;
-  background: linear-gradient(90deg, #0d1118, rgba(13, 17, 24, 0));
-}
-
-.landing-testimonial-wall::after {
-  right: 0;
-  background: linear-gradient(270deg, #0d1118, rgba(13, 17, 24, 0));
-}
-
-.landing-testimonial-marquee {
-  display: flex;
-  overflow: hidden;
-  user-select: none;
-}
-
-.landing-testimonial-marquee[data-speed='slow'] {
-  --testimonial-duration: 58s;
-}
-
-.landing-testimonial-marquee[data-speed='normal'] {
-  --testimonial-duration: 42s;
-}
-
-.landing-testimonial-track {
-  display: flex;
-  width: max-content;
-  min-width: 100%;
-  gap: 14px;
-  padding: 0 7px;
-  animation: landing-testimonial-scroll var(--testimonial-duration, 48s) linear infinite;
-  animation-play-state: running !important;
-}
-
-.landing-testimonial-marquee[data-direction='right'] .landing-testimonial-track {
-  animation-direction: reverse;
-}
-
-.landing-testimonial-wall:hover .landing-testimonial-track,
-.landing-testimonial-marquee:hover .landing-testimonial-track,
-.landing-testimonial-card:hover {
-  animation-play-state: running !important;
-}
-
-.landing-testimonial-card {
-  flex: 0 0 340px;
-  min-height: 188px;
-  border: 1px solid rgba(155, 176, 205, 0.14);
-  border-radius: 9px;
-  margin: 0;
-  padding: 22px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
-    rgba(13, 18, 26, 0.78);
-  box-shadow:
-    0 18px 45px rgba(0, 0, 0, 0.18),
-    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
-}
-
-.landing-testimonial-author {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.landing-testimonial-avatar {
-  width: 42px;
-  height: 42px;
-  flex: 0 0 auto;
-  border: 1px solid rgba(178, 200, 230, 0.18);
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.04);
-  object-fit: cover;
-}
-
-.landing-testimonial-author strong {
-  display: block;
-  color: var(--landing-ink);
-  font-size: 15px;
-  font-weight: 740;
-  line-height: 1.25;
-}
-
-.landing-testimonial-author span {
-  display: block;
-  margin-top: 3px;
-  color: var(--landing-muted);
-  font-size: 12px;
-  line-height: 1.35;
-}
-
-.landing-testimonial-card blockquote {
-  margin: 18px 0 0;
-  color: color-mix(in srgb, var(--landing-ink) 88%, var(--landing-muted));
-  font-size: 14px;
-  font-weight: 560;
-  line-height: 1.58;
-}
-
-.landing-support .landing-section-heading {
-  grid-template-columns: minmax(260px, 0.28fr) minmax(0, 0.72fr);
-  margin-bottom: 30px;
-}
-
-.landing-support .landing-section-heading p {
-  max-width: 760px;
-  justify-self: end;
-  text-align: right;
-}
-
-.landing-db-grid {
-  display: grid;
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-  gap: 12px;
-}
+/* DB card */
 
 .landing-db-card {
-  display: grid;
-  place-items: center;
-  min-height: 126px;
   border: 1px solid rgba(155, 176, 205, 0.14);
-  border-radius: 10px;
-  padding: 18px 10px;
   background:
     radial-gradient(circle at 50% 112%, color-mix(in srgb, var(--db-tone) 20%, transparent), transparent 62%),
     linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
@@ -1231,58 +773,70 @@ a {
   transform: translateY(-3px);
 }
 
-.landing-db-icon {
-  display: grid;
-  place-items: center;
-  width: 48px;
-  height: 48px;
-  margin-bottom: 15px;
-}
-
 .landing-db-icon img {
-  display: block;
-  width: 38px;
-  height: 38px;
-  object-fit: contain;
   filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--db-tone) 20%, transparent));
 }
 
 .landing-db-icon span {
-  display: grid;
-  place-items: center;
-  min-width: 46px;
-  height: 32px;
-  border-radius: 8px;
-  padding: 0 8px;
   background: color-mix(in srgb, var(--db-tone) 78%, #10151d);
-  color: #fff;
   box-shadow: 0 10px 20px color-mix(in srgb, var(--db-tone) 22%, transparent);
-  font-size: 12px;
-  font-weight: 780;
-  letter-spacing: 0;
 }
 
-.landing-db-card strong {
-  color: color-mix(in srgb, var(--landing-ink) 92%, var(--landing-muted));
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1.2;
-  text-align: center;
+/* Testimonials */
+
+.landing-testimonial-wall::before,
+.landing-testimonial-wall::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: min(180px, 18vw);
+  pointer-events: none;
 }
 
-.landing-capability-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+.landing-testimonial-wall::before {
+  left: 0;
+  background: linear-gradient(90deg, #10151d, rgba(16, 21, 29, 0));
 }
 
+.landing-testimonial-wall::after {
+  right: 0;
+  background: linear-gradient(270deg, #10151d, rgba(16, 21, 29, 0));
+}
+
+.landing-testimonial-marquee[data-speed='slow'] {
+  --testimonial-duration: 58s;
+}
+
+.landing-testimonial-marquee[data-speed='normal'] {
+  --testimonial-duration: 42s;
+}
+
+.landing-testimonial-track {
+  animation: landing-testimonial-scroll var(--testimonial-duration, 48s) linear infinite;
+  animation-play-state: running !important;
+}
+
+.landing-testimonial-marquee[data-direction='right'] .landing-testimonial-track {
+  animation-direction: reverse;
+}
+
+.landing-testimonial-card {
+  border: 1px solid rgba(155, 176, 205, 0.14);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
+    rgba(13, 18, 26, 0.78);
+  box-shadow:
+    0 18px 45px rgba(0, 0, 0, 0.18),
+    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
+}
+
+/* Capability card */
+
 .landing-capability {
-  gap: 10px;
-  min-height: 72px;
-  border: 1px solid var(--landing-line);
-  border-radius: 8px;
-  padding: 14px 15px;
-  background: var(--landing-panel);
+  border: 1px solid var(--color-landing-line);
+  background: var(--color-landing-panel);
   transition:
     border-color 0.16s ease,
     background 0.16s ease,
@@ -1291,70 +845,33 @@ a {
 
 .landing-capability:hover {
   border-color: rgba(110, 168, 255, 0.24);
-  background: var(--landing-panel-strong);
+  background: var(--color-landing-panel-strong);
   transform: translateY(-2px);
 }
 
-.landing-capability svg {
-  flex: 0 0 auto;
-  color: var(--landing-blue);
+/* Final CTA link */
+
+.landing-final-link {
+  border: 1px solid var(--color-landing-line);
+  background: var(--color-landing-panel);
+  color: var(--color-landing-ink);
+  transition:
+    border-color 0.16s ease,
+    background 0.16s ease,
+    transform 0.16s ease;
 }
 
-.landing-capability span {
-  color: var(--landing-ink);
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.45;
+.landing-final-link:hover {
+  border-color: rgba(178, 200, 230, 0.34);
+  background: var(--color-landing-panel-strong);
+  transform: translateY(-1px);
 }
 
-.landing-final {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  border: 1px solid var(--landing-line);
-  border-radius: 10px;
-  margin-top: 72px;
-  margin-bottom: 56px;
-  padding-top: 30px;
-  padding-bottom: 30px;
-  background: var(--landing-panel);
-}
-
-.landing-final-actions {
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
+/* Responsive */
 
 @media (max-width: 1040px) {
   .landing-hero {
-    display: block;
-    padding-top: 56px;
-  }
-
-  .landing-hero-copy {
-    max-width: 760px;
-  }
-
-  .landing-product {
-    width: auto;
-    max-width: 860px;
-    margin-top: 44px;
-  }
-
-  .landing-workflow-grid,
-  .landing-capability-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .landing-updates {
-    grid-template-columns: minmax(0, 1fr) max-content;
-  }
-
-  .landing-update-copy,
-  .landing-update-list {
-    grid-column: 1 / -1;
+    padding-top: 120px;
   }
 
   .landing-workflow-card:nth-child(2n) {
@@ -1362,46 +879,22 @@ a {
   }
 
   .landing-workflow-card:nth-child(-n + 2) {
-    border-bottom: 1px solid var(--landing-line);
+    border-bottom: 1px solid var(--color-landing-line);
   }
 }
 
 @media (max-width: 760px) {
-  .landing-nav-inner {
-    height: auto;
-    min-height: 58px;
-    padding: 10px 18px;
-  }
-
-  .landing-nav-links a:not(.landing-lang-switch) {
-    display: none;
-  }
-
-  .landing-hero,
-  .landing-metrics,
-  .landing-doc-start,
-  .landing-updates,
-  .landing-section,
-  .landing-final {
-    padding-right: 18px;
-    padding-left: 18px;
-  }
-
   .landing-hero {
-    padding-top: 44px;
+    padding-top: 104px;
     min-height: 0;
   }
 
-  .landing-hero h1 {
-    font-size: 42px;
-    line-height: 1.05;
-  }
-
   .landing-hero::before {
-    right: -18px;
+    right: 0;
     background:
-      radial-gradient(circle at 50% 16%, rgba(82, 213, 255, 0.12), transparent 260px),
-      linear-gradient(180deg, rgba(7, 9, 13, 0.9) 0%, #0d1118 88%);
+      radial-gradient(circle at 50% 18%, rgba(82, 213, 255, 0.18), transparent 280px),
+      radial-gradient(circle at 76% 26%, rgba(68, 209, 157, 0.08), transparent 220px),
+      linear-gradient(180deg, #10151d 0%, #0c1528 44%, #10151d 94%);
   }
 
   .landing-hero::after {
@@ -1410,83 +903,24 @@ a {
   }
 
   .aceternity-spotlight {
-    inset: -12% auto auto -20%;
-    width: 92vw;
+    inset: -18% auto auto 50%;
+    width: 96vw;
   }
 
-  .landing-product {
-    margin-top: 34px;
-  }
-
-  .landing-install {
-    grid-template-columns: 1fr;
-    gap: 5px;
-  }
-
-  .landing-metrics {
-    grid-template-columns: 1fr;
-    padding-bottom: 32px;
-  }
-
-  .landing-metrics div {
-    min-height: 96px;
-    padding: 18px;
-  }
-
-  .landing-doc-start,
-  .landing-updates,
-  .landing-section-heading,
-  .landing-support,
-  .landing-final {
-    display: block;
-  }
-
-  .landing-section-heading p {
-    max-width: none;
-    text-align: left;
-  }
-
-  .landing-inline-link {
-    margin-top: 16px;
-  }
-
-  .landing-update-copy,
-  .landing-update-list {
-    margin-top: 16px;
-  }
-
-  .landing-workflow-grid,
-  .landing-capability-grid {
-    grid-template-columns: 1fr;
+  .landing-product-dots {
+    right: 12px;
+    bottom: 11px;
   }
 
   .landing-workflow-card {
-    min-height: 0;
     border-right: 0;
-    border-bottom: 1px solid var(--landing-line);
+    border-bottom: 1px solid var(--color-landing-line);
   }
 
   .landing-workflow-card:last-child {
     border-bottom: 0;
   }
 
-  .landing-db-grid,
-  .landing-testimonial-wall,
-  .landing-capability-grid,
-  .landing-final-actions {
-    margin-top: 18px;
-  }
-
-  .landing-db-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-  }
-
-  .landing-db-card {
-    min-height: 122px;
-    padding: 16px 10px;
-  }
-
   .landing-testimonial-wall {
     margin-right: -18px;
     margin-left: -18px;
@@ -1496,20 +930,15 @@ a {
   .landing-testimonial-wall::after {
     width: 46px;
   }
-
-  .landing-testimonial-card {
-    flex-basis: 286px;
-    min-height: 210px;
-    padding: 18px;
-  }
 }
 
+/* Keyframes */
+
 @keyframes landing-rise {
   from {
     opacity: 0;
     transform: translateY(18px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -1517,24 +946,17 @@ a {
 }
 
 @keyframes landing-grid-drift {
-  from {
-    background-position: 0 0;
-  }
-
-  to {
-    background-position: 54px 54px;
-  }
+  from { background-position: 0 0; }
+  to { background-position: 54px 54px; }
 }
 
 @keyframes landing-pulse {
-  0%,
-  100% {
+  0%, 100% {
     border-color: rgba(155, 176, 205, 0.18);
     box-shadow:
       0 0 0 1px rgba(82, 213, 255, 0.04) inset,
       0 0 28px rgba(82, 213, 255, 0.13);
   }
-
   50% {
     border-color: rgba(82, 213, 255, 0.34);
     box-shadow:
@@ -1544,13 +966,11 @@ a {
 }
 
 @keyframes landing-cta-glow {
-  0%,
-  100% {
+  0%, 100% {
     box-shadow:
       0 14px 36px rgba(110, 168, 255, 0.18),
       0 0 0 1px rgba(255, 255, 255, 0.4) inset;
   }
-
   50% {
     box-shadow:
       0 18px 48px rgba(82, 213, 255, 0.32),
@@ -1559,13 +979,8 @@ a {
 }
 
 @keyframes landing-testimonial-scroll {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(calc(-50% - 7px));
-  }
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(-50% - 7px)); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1579,11 +994,7 @@ a {
   }
 
   .landing-reveal,
-  .landing-reveal .landing-workflow-card,
-  .landing-reveal .landing-db-card,
-  .landing-reveal .landing-capability,
-  .landing-reveal .landing-update-list li,
-  .landing-reveal .landing-metrics div {
+  .landing-reveal [data-stagger] {
     opacity: 1 !important;
     transform: none !important;
   }
diff --git a/docs/components/aceternity/HeroProductStage.tsx b/docs/components/aceternity/HeroProductStage.tsx
index 0b1010987..2adb4ff17 100644
--- a/docs/components/aceternity/HeroProductStage.tsx
+++ b/docs/components/aceternity/HeroProductStage.tsx
@@ -1,21 +1,76 @@
 'use client';
 
 import { motion } from 'motion/react';
+import { useEffect, useState } from 'react';
+
+const productSlides = [
+  {
+    src: '/screenshot-dark.png',
+    alt: 'DBX data grid and AI assistant screenshot',
+    label: 'Data grid',
+  },
+  {
+    src: '/screenshot-connections.jpg',
+    alt: 'DBX connection management screenshot',
+    label: 'Connections',
+  },
+  {
+    src: '/screenshot-grid.png',
+    alt: 'DBX table data grid screenshot',
+    label: 'Tables',
+  },
+  {
+    src: '/screenshot-ai.jpg',
+    alt: 'DBX AI assistant screenshot',
+    label: 'AI',
+  },
+];
 
 export function HeroProductStage() {
+  const [activeSlide, setActiveSlide] = useState(0);
+
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setActiveSlide((current) => (current + 1) % productSlides.length);
+    }, 4200);
+
+    return () => window.clearInterval(timer);
+  }, []);
+
   return (
     <motion.div
-      className="landing-product"
-      initial={{ opacity: 0, y: 28, rotateX: 4, rotateY: -6 }}
-      animate={{ opacity: 1, y: 0, rotateX: 0, rotateY: 0 }}
-      transition={{ duration: 0.9, delay: 0.12, ease: [0.16, 1, 0.3, 1] }}
+      className="landing-product relative w-full mt-16 mb-12 overflow-hidden rounded-2xl max-[1040px]:max-w-[900px] max-[1040px]:mt-14 max-[760px]:mt-10 max-[760px]:mb-7 max-[760px]:rounded-xl"
+      initial={{ opacity: 0, y: 36, scale: 0.985 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ duration: 0.9, delay: 0.18, ease: [0.16, 1, 0.3, 1] }}
     >
-      <div className="landing-window-bar">
-        <span />
-        <span />
-        <span />
+      <div className="relative aspect-[16/10] overflow-hidden">
+        {productSlides.map((slide, index) => (
+          <img
+            alt={slide.alt}
+            aria-hidden={index !== activeSlide}
+            className="landing-product-slide absolute inset-0 z-[1] w-full h-full object-cover object-left-top"
+            data-active={index === activeSlide}
+            key={slide.src}
+            src={slide.src}
+          />
+        ))}
+      </div>
+      <div className="landing-product-dots absolute right-[18px] bottom-4 z-[5] flex gap-[7px] items-center rounded-full p-1.5 max-[760px]:right-3 max-[760px]:bottom-[11px]" aria-label="DBX product screenshots">
+        {productSlides.map((slide, index) => (
+          <button
+            aria-current={index === activeSlide}
+            aria-label={`Show ${slide.label} screenshot`}
+            key={slide.src}
+            onClick={() => setActiveSlide(index)}
+            title={slide.label}
+            type="button"
+            className="block w-[9px] h-[9px] border-0 rounded-full p-0 cursor-pointer"
+          >
+            <span>{slide.label}</span>
+          </button>
+        ))}
       </div>
-      <img src="/screenshot-dark.png" alt="DBX product screenshot" />
     </motion.div>
   );
 }
diff --git a/docs/components/aceternity/InfiniteMovingCards.tsx b/docs/components/aceternity/InfiniteMovingCards.tsx
index 218e46fa6..69b040c34 100644
--- a/docs/components/aceternity/InfiniteMovingCards.tsx
+++ b/docs/components/aceternity/InfiniteMovingCards.tsx
@@ -18,22 +18,22 @@ export function InfiniteMovingCards({ items, direction = 'left', speed = 'normal
 
   return (
     <div
-      className="landing-testimonial-marquee"
+      className="landing-testimonial-marquee flex overflow-hidden select-none"
       data-direction={direction}
       data-speed={speed}
       aria-label="Testimonials"
     >
-      <div className="landing-testimonial-track">
+      <div className="landing-testimonial-track flex w-max min-w-full gap-3.5 px-[7px]">
         {repeatedItems.map((item, index) => (
-          <figure className="landing-testimonial-card" key={`${item.name}-${index}`}>
-            <div className="landing-testimonial-author">
-              <img className="landing-testimonial-avatar" src={item.avatar} alt="" width={42} height={42} />
+          <figure className="landing-testimonial-card flex-[0_0_340px] min-h-[188px] rounded-[9px] m-0 p-[22px] max-[760px]:flex-[0_0_286px] max-[760px]:min-h-[210px] max-[760px]:p-[18px]" key={`${item.name}-${index}`}>
+            <div className="flex gap-3 items-center">
+              <img className="w-[42px] h-[42px] shrink-0 border border-[rgba(178,200,230,0.18)] rounded-full bg-[rgba(255,255,255,0.04)] object-cover" src={item.avatar} alt="" width={42} height={42} />
               <figcaption>
-                <strong>{item.name}</strong>
-                <span>{item.role}</span>
+                <strong className="block text-landing-ink text-[15px] font-[740] leading-[1.25]">{item.name}</strong>
+                <span className="block mt-[3px] text-landing-muted text-xs leading-[1.35]">{item.role}</span>
               </figcaption>
             </div>
-            <blockquote>{item.quote}</blockquote>
+            <blockquote className="mt-[18px] text-sm font-[560] leading-[1.58] text-[color-mix(in_srgb,var(--color-landing-ink)_88%,var(--color-landing-muted))]">{item.quote}</blockquote>
           </figure>
         ))}
       </div>
diff --git a/docs/components/landing/InstallTabs.tsx b/docs/components/landing/InstallTabs.tsx
index 0ac828c2f..350fec9f1 100644
--- a/docs/components/landing/InstallTabs.tsx
+++ b/docs/components/landing/InstallTabs.tsx
@@ -1,127 +1,127 @@
 'use client';
 
-import { Check, Copy, ExternalLink } from 'lucide-react';
-import { useState } from 'react';
+import { ChevronDown, Download, Server } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
 
 type InstallTabsProps = {
   lang: 'en' | 'cn';
 };
 
-const releaseUrl = 'https://github.com/t8y2/dbx/releases/latest';
+type InstallOption = {
+  id: string;
+  label: string;
+  href: string;
+};
 
-const installOptions = {
+const allOptions: Record<string, InstallOption[]> = {
   en: [
-    {
-      id: 'macos',
-      label: 'macOS',
-      note: 'Homebrew',
-      command: 'brew install --cask t8y2/tap/dbx',
-      linkText: 'GitHub Releases',
-    },
-    {
-      id: 'windows',
-      label: 'Windows',
-      note: 'Scoop',
-      command: 'scoop bucket add dbx https://github.com/t8y2/scoop-bucket; scoop install dbx',
-      linkText: 'GitHub Releases',
-    },
-    {
-      id: 'linux',
-      label: 'Linux',
-      note: '.deb / AppImage',
-      command: 'chmod +x DBX*.AppImage',
-      linkText: 'Download packages',
-    },
-    {
-      id: 'docker',
-      label: 'Docker',
-      note: 'Self-hosted',
-      command: 'docker run -d --name dbx -p 4224:4224 -v dbx-data:/app/data t8y2/dbx',
-      linkText: 'Docker docs',
-      href: '/en/docs/getting-started#docker',
-    },
+    { id: 'macos-arm', label: 'For macOS (Apple Silicon)', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_aarch64.dmg' },
+    { id: 'macos-intel', label: 'For macOS (Intel)', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_x64.dmg' },
+    { id: 'windows', label: 'For Windows', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_x64-setup.exe' },
+    { id: 'linux', label: 'For Linux x64', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_amd64.AppImage' },
+    { id: 'linux-arm', label: 'For Linux ARM64', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_aarch64.AppImage' },
   ],
   cn: [
-    {
-      id: 'macos',
-      label: 'macOS',
-      note: 'Homebrew',
-      command: 'brew install --cask t8y2/tap/dbx',
-      linkText: 'GitHub Releases',
-    },
-    {
-      id: 'windows',
-      label: 'Windows',
-      note: 'Scoop',
-      command: 'scoop bucket add dbx https://github.com/t8y2/scoop-bucket; scoop install dbx',
-      linkText: 'GitHub Releases',
-    },
-    {
-      id: 'linux',
-      label: 'Linux',
-      note: '.deb / AppImage',
-      command: 'chmod +x DBX*.AppImage',
-      linkText: '下载安装包',
-    },
-    {
-      id: 'docker',
-      label: 'Docker',
-      note: '自托管',
-      command: 'docker run -d --name dbx -p 4224:4224 -v dbx-data:/app/data t8y2/dbx',
-      linkText: 'Docker 文档',
-      href: '/cn/docs/getting-started#docker',
-    },
+    { id: 'macos-arm', label: '适用于 macOS (Apple Silicon)', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_aarch64.dmg' },
+    { id: 'macos-intel', label: '适用于 macOS (Intel)', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_x64.dmg' },
+    { id: 'windows', label: '适用于 Windows', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_x64-setup.exe' },
+    { id: 'linux', label: '适用于 Linux x64', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_amd64.AppImage' },
+    { id: 'linux-arm', label: '适用于 Linux ARM64', href: 'https://dl.dbxio.com/releases/latest/DBX_0.5.9_aarch64.AppImage' },
   ],
 };
 
-export function InstallTabs({ lang }: InstallTabsProps) {
-  const options = installOptions[lang];
-  const [activeId, setActiveId] = useState(options[0].id);
-  const [copied, setCopied] = useState(false);
-  const active = options.find((item) => item.id === activeId) ?? options[0];
+const downloadLabel = { en: 'Download DBX', cn: '下载 DBX' };
 
-  async function copyCommand() {
-    await navigator.clipboard.writeText(active.command);
-    setCopied(true);
-    window.setTimeout(() => setCopied(false), 1600);
-  }
+const platformIconPaths = {
+  dark: {
+    'linux-arm': '/icons/platform/linux.svg',
+    linux: '/icons/platform/linux.svg',
+    'macos-arm': '/icons/platform/macos.png',
+    'macos-intel': '/icons/platform/macos.png',
+    windows: '/icons/platform/windows.png',
+  },
+  light: {
+    'linux-arm': '/icons/platform/linux.svg',
+    linux: '/icons/platform/linux.svg',
+    'macos-arm': '/icons/platform/macos-white.png',
+    'macos-intel': '/icons/platform/macos-white.png',
+    windows: '/icons/platform/windows.png',
+  },
+};
+
+function detectPlatformId(): string {
+  if (typeof navigator === 'undefined') return 'macos-arm';
+  const ua = navigator.userAgent.toLowerCase();
+  if (ua.includes('win')) return 'windows';
+  if (ua.includes('linux')) return ua.includes('aarch64') || ua.includes('arm') ? 'linux-arm' : 'linux';
+  return 'macos-arm';
+}
+
+function PlatformIcon({ id, size, variant }: { id: string; size: number; variant: 'dark' | 'light' }) {
+  const src = platformIconPaths[variant][id as keyof (typeof platformIconPaths)['dark']];
+  if (!src) return <Server size={size} />;
+  return <img alt="" aria-hidden="true" height={size} src={src} width={size} />;
+}
+
+export function InstallTabs({ lang }: InstallTabsProps) {
+  const options = allOptions[lang];
+  const [open, setOpen] = useState(false);
+  const [platformId, setPlatformId] = useState('macos-arm');
+
+  useEffect(() => {
+    setPlatformId(detectPlatformId());
+  }, []);
+
+  const primary = useMemo(() => options.find((o) => o.id === platformId) ?? options[0], [options, platformId]);
+  const menuOptions = useMemo(() => options.filter((o) => o.id !== platformId), [options, platformId]);
 
   return (
-    <div className="landing-install">
-      <div className="landing-install-tabs" role="tablist" aria-label={lang === 'cn' ? '安装平台' : 'Install platform'}>
-        {options.map((item) => (
-          <button
-            aria-selected={item.id === active.id}
-            className="landing-install-tab"
+    <div
+      className="landing-install relative z-20 block w-fit max-w-full mx-auto"
+      data-open={open}
+      onBlur={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setOpen(false);
+        }
+      }}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+    >
+      <a
+        aria-controls="landing-install-menu"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className="landing-install-trigger grid grid-cols-[auto_minmax(0,1fr)_auto] gap-4 items-center w-[min(400px,calc(100vw-48px))] min-h-[68px] border-0 rounded-full mx-auto px-7 cursor-pointer"
+        href={primary.href}
+        onFocus={() => setOpen(true)}
+      >
+        <PlatformIcon id={primary.id} size={30} variant="dark" />
+        <span className="grid gap-0.5 min-w-0">
+          <strong className="overflow-hidden text-[15px] font-[780] leading-[1.2] truncate">{downloadLabel[lang]}</strong>
+          <small className="overflow-hidden text-xs font-[520] leading-tight truncate text-[color-mix(in_srgb,#0f172a_48%,#94a3b8)]">{primary.label}</small>
+        </span>
+        <ChevronDown size={18} />
+      </a>
+      <div
+        className="landing-install-menu absolute z-30 top-[calc(100%+12px)] left-1/2 -translate-x-1/2 grid w-[min(360px,calc(100vw-48px))] border border-[rgba(155,176,205,0.17)] rounded-xl py-1.5"
+        id="landing-install-menu"
+        role="listbox"
+        aria-label={lang === 'cn' ? '下载选项' : 'Download options'}
+      >
+        {menuOptions.map((item) => (
+          <a
+            aria-selected="false"
+            className="landing-install-option grid grid-cols-[24px_minmax(0,1fr)_18px] gap-3 items-center min-w-0 border-0 px-[18px] py-3 bg-transparent text-left cursor-pointer"
+            href={item.href}
             key={item.id}
-            onClick={() => {
-              setActiveId(item.id);
-              setCopied(false);
-            }}
-            role="tab"
-            type="button"
+            role="option"
           >
-            <span>{item.label}</span>
-            <small>{item.note}</small>
-          </button>
+            <PlatformIcon id={item.id} size={20} variant="light" />
+            <strong className="overflow-hidden text-sm font-[640] leading-[1.2] truncate">{item.label}</strong>
+            <Download size={15} aria-hidden="true" />
+          </a>
         ))}
       </div>
-      <div className="landing-install-command">
-        <code>{active.command}</code>
-        <button
-          aria-label={lang === 'cn' ? '复制安装命令' : 'Copy install command'}
-          className="landing-install-copy"
-          onClick={copyCommand}
-          title={lang === 'cn' ? '复制安装命令' : 'Copy install command'}
-          type="button"
-        >
-          {copied ? <Check size={16} /> : <Copy size={16} />}
-        </button>
-      </div>
-      <a className="landing-install-release" href={active.href ?? releaseUrl} target="_blank">
-        {active.linkText}
-        <ExternalLink size={14} />
-      </a>
     </div>
   );
 }
diff --git a/docs/components/landing/LandingNav.tsx b/docs/components/landing/LandingNav.tsx
new file mode 100644
index 000000000..9c70927af
--- /dev/null
+++ b/docs/components/landing/LandingNav.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export function LandingNav({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+
+    function onScroll() {
+      node!.classList.toggle('is-scrolled', window.scrollY > 60);
+    }
+
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
+  return (
+    <nav ref={ref} className="landing-nav">
+      {children}
+    </nav>
+  );
+}
diff --git a/docs/public/favicon.png b/docs/public/favicon.png
index 407755f55..23c91bcfa 100644
Binary files a/docs/public/favicon.png and b/docs/public/favicon.png differ
diff --git a/docs/public/logo.png b/docs/public/logo.png
index 61508574f..23c91bcfa 100644
Binary files a/docs/public/logo.png and b/docs/public/logo.png differ