diff --git a/packages/app/src/app/globals.css b/packages/app/src/app/globals.css
index 5b20654be..11f0a0b75 100644
--- a/packages/app/src/app/globals.css
+++ b/packages/app/src/app/globals.css
@@ -119,9 +119,15 @@
   --color-card: var(--card);
 
   /* Fonts */
-  --font-sans: var(--font-dm-sans);
+  --font-sans: var(--font-instrument-sans, var(--font-dm-sans));
   --font-mono: monospace;
 
+  /* Brand surfaces */
+  --color-mint: var(--mint);
+  --color-mint-foreground: var(--mint-foreground);
+  --color-ink: var(--ink);
+  --color-ink-foreground: var(--ink-foreground);
+
   /* Breakpoints */
   --breakpoint-2xl: 80rem;
   --breakpoint-3xl: 80rem;
@@ -139,29 +145,36 @@
 
 :root {
   /* Setup variables */
-  --radius: 0.625rem;
-
-  /* Base Theme Colors */
-  --background: #eaebec;
-  --foreground: #131416;
-  --card: #eaebec;
-  --card-foreground: #131416;
-  --popover: #fafafa;
-  --popover-foreground: #171717;
-  --primary: #f7b041;
-  --primary-foreground: #fafafa;
+  --radius: 0.75rem;
+
+  /* Base Theme Colors — clean research-institute palette: white ground,
+     near-black ink, deep-teal accent, mint call-to-action surfaces. */
+  --background: #ffffff;
+  --foreground: #090c0c;
+  --card: #ffffff;
+  --card-foreground: #090c0c;
+  --popover: #ffffff;
+  --popover-foreground: #090c0c;
+  --primary: #077463;
+  --primary-foreground: #ffffff;
   --secondary: #0b86d1;
   --secondary-foreground: #fafafa;
-  --brand: var(--secondary);
-  --muted: #b4b9bc;
-  --muted-foreground: #27272a;
-  --accent: #fafafa;
-  --accent-foreground: #1d1f21;
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: #656b72;
-  --border-alt: #c2ccd7;
-  --input: #656b72;
-  --ring: #27272a;
+  --brand: var(--primary);
+  --muted: #eef0ef;
+  --muted-foreground: #4d5754;
+  --accent: #e6fef3;
+  --accent-foreground: #090c0c;
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: #dbe0de;
+  --border-alt: #edf0ef;
+  --input: #c8cfcc;
+  --ring: #077463;
+
+  /* Mint pill CTA + dark ink band surfaces */
+  --mint: #70efd1;
+  --mint-foreground: #04211c;
+  --ink: #0e2b26;
+  --ink-foreground: #e9f4f0;
 
   /* Sidebar */
   --sidebar: oklch(0.205 0 0);
@@ -186,27 +199,34 @@
 }
 
 .dark {
-  /* Base Theme Colors */
-  --background: #131416;
-  --foreground: #eaebec;
-  --card: #131416;
-  --card-foreground: #eaebec;
-  --popover: #171717;
-  --popover-foreground: #fafafa;
-  --primary: #f7b041;
-  --primary-foreground: #131416;
+  /* Base Theme Colors — dark translation of the light palette: deep
+     teal-black ground with the mint accent carrying brand emphasis. */
+  --background: #0b1413;
+  --foreground: #e8f1ee;
+  --card: #101c1a;
+  --card-foreground: #e8f1ee;
+  --popover: #12211e;
+  --popover-foreground: #e8f1ee;
+  --primary: #70efd1;
+  --primary-foreground: #04211c;
   --secondary: #0b86d1;
   --secondary-foreground: #fafafa;
   --brand: var(--primary);
-  --muted: #27272a;
-  --muted-foreground: #b4b9bc;
-  --accent: #1d1f21;
-  --accent-foreground: #fafafa;
+  --muted: #1b2b28;
+  --muted-foreground: #9db3ad;
+  --accent: #16302a;
+  --accent-foreground: #e8f1ee;
   --destructive: oklch(0.704 0.191 22.216);
-  --border: #656b72;
-  --border-alt: #222426;
+  --border: #29403b;
+  --border-alt: #16211f;
   --input: oklch(1 0 0 / 15%);
-  --ring: #fafafa;
+  --ring: #70efd1;
+
+  /* Mint pill CTA + ink band surfaces */
+  --mint: #70efd1;
+  --mint-foreground: #04211c;
+  --ink: #0e2b26;
+  --ink-foreground: #e9f4f0;
 
   /* Sidebar */
   --sidebar-foreground: oklch(0.985 0 0);
@@ -230,6 +250,33 @@
   --overlay-run-7: oklch(0.78 0.18 60);
 }
 
+/* ── Footer ink band ──
+   Rescopes the theme tokens inside the footer so its children (links, star
+   button, share buttons) render light-on-dark without per-component edits.
+   Skipped under the minecraft theme, which owns its full-page look. */
+html:not(.minecraft) .footer-ink {
+  --background: var(--ink);
+  --foreground: var(--ink-foreground);
+  --card: #143530;
+  --card-foreground: var(--ink-foreground);
+  --popover: #143530;
+  --popover-foreground: var(--ink-foreground);
+  --primary: var(--mint);
+  --primary-foreground: var(--mint-foreground);
+  --brand: var(--mint);
+  --muted: #16332e;
+  --muted-foreground: #a4bfb8;
+  --accent: #16332e;
+  --accent-foreground: var(--ink-foreground);
+  --border: #23443d;
+  --border-alt: #1a3831;
+  --input: #23443d;
+  --ring: var(--mint);
+
+  background-color: var(--ink);
+  color: var(--ink-foreground);
+}
+
 /* ── Minecraft Theme ── */
 .minecraft {
   --background: #1e1e1e;
@@ -333,6 +380,16 @@
   border-image: linear-gradient(to right, #7fb238, #5d9b47, #7fb238, #526935, #7fb238) 1 !important;
 }
 
+/* From xl up the header is a left sidebar, so the grass strip moves to its
+   right edge and runs top-to-bottom instead of underlining a top bar. */
+@media (min-width: 80rem) {
+  .minecraft header {
+    border-bottom: 0 !important;
+    border-right: 3px solid transparent !important;
+    border-image: linear-gradient(to bottom, #7fb238, #5d9b47, #7fb238, #526935, #7fb238) 1 !important;
+  }
+}
+
 /* Sunken slot effect on cards */
 .minecraft .border-border {
   border: 2px solid;
diff --git a/packages/app/src/app/layout.tsx b/packages/app/src/app/layout.tsx
index 841db6394..d067ee086 100644
--- a/packages/app/src/app/layout.tsx
+++ b/packages/app/src/app/layout.tsx
@@ -4,13 +4,12 @@ import './globals.css';
 import { Analytics } from '@vercel/analytics/next';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
-import { DM_Sans } from 'next/font/google';
+import { DM_Sans, Instrument_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
 
 import { Footer } from '@/components/footer/footer';
 import { Header } from '@/components/header/header';
 import { JsonLd } from '@/components/json-ld';
-import { CircuitBackground } from '@/components/circuit-background';
 import { MinecraftBackgroundLazy } from '@/components/minecraft/minecraft-background-lazy';
 import { MinecraftDecorations } from '@/components/minecraft/minecraft-decorations';
 import { ThemeProvider } from '@/components/ui/theme-provider';
@@ -39,6 +38,14 @@ const dm_sans = DM_Sans({
   variable: '--font-dm-sans',
 });
 
+// Primary UI grotesque. DM Sans stays loaded for chart export rendering
+// (useChartExport resolves --font-dm-sans) and as the sans fallback.
+const instrument_sans = Instrument_Sans({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-instrument-sans',
+});
+
 const monocraft = localFont({
   src: './fonts/Monocraft.woff2',
   variable: '--font-minecraft',
@@ -190,16 +197,9 @@ export default async function RootLayout({
   const starCount = await fetchStarCount();
   return (
     <html lang="en" className={monocraft.variable} suppressHydrationWarning>
-      <head>
-        <link
-          rel="preload"
-          as="image"
-          href="/brand/left-pattern-full.svg"
-          fetchPriority="high"
-          media="(min-width: 640px)"
-        />
-      </head>
-      <body className={`${dm_sans.variable} antialiased relative min-h-screen flex flex-col`}>
+      <body
+        className={`${dm_sans.variable} ${instrument_sans.variable} antialiased relative min-h-screen flex flex-col`}
+      >
         <style
           id="landing-banner-prepaint-style"
           dangerouslySetInnerHTML={{ __html: landingBannerPrepaintStyle }}
@@ -209,7 +209,6 @@ export default async function RootLayout({
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: landingBannerPrepaintScript }}
         />
-        <CircuitBackground />
         <MinecraftBackgroundLazy />
         <MinecraftDecorations />
         <PostHogProvider>
@@ -217,7 +216,7 @@ export default async function RootLayout({
           <QueryProvider>
             <ThemeProvider
               attribute="class"
-              defaultTheme="dark"
+              defaultTheme="light"
               themes={['light', 'dark', 'minecraft']}
               enableSystem
               disableTransitionOnChange
@@ -225,8 +224,12 @@ export default async function RootLayout({
               <PostHogPageView />
               <VisitTracker />
               <Header starCount={starCount} />
-              <div className="grow flex flex-col">{children}</div>
-              <Footer starCount={starCount} />
+              {/* From xl up the header renders as a fixed 18rem left sidebar,
+                  so the content column (pages + footer) shifts right to match. */}
+              <div className="grow flex flex-col min-w-0 xl:pl-72">
+                <div className="grow flex flex-col">{children}</div>
+                <Footer starCount={starCount} />
+              </div>
             </ThemeProvider>
           </QueryProvider>
           {process.env.VERCEL && <Analytics />}
diff --git a/packages/app/src/components/compare/agentx-compare-hero.tsx b/packages/app/src/components/compare/agentx-compare-hero.tsx
index 140b07b8a..6ddf6004e 100644
--- a/packages/app/src/components/compare/agentx-compare-hero.tsx
+++ b/packages/app/src/components/compare/agentx-compare-hero.tsx
@@ -1,6 +1,5 @@
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, ArrowUpRight } from 'lucide-react';
 
-import { Card } from '@/components/ui/card';
 import { MinecraftSplash } from '@/components/minecraft/minecraft-splash';
 import { agentxDashboardHref, FEATURED_AGENTX_MODELS } from '@/lib/compare-agentx';
 
@@ -9,22 +8,24 @@ import { CompareIndexTrackedLink } from './compare-index-tracked-link';
 const STRINGS = {
   en: {
     eyebrow: 'AgentX / live results',
-    title: 'Compare Realistic Agentic Inference Perf',
+    title: 'Measuring real-world AI inference performance.',
     description:
-      'Long Context Multi Turn Inference Performance. Compare Across MI355X, GB300 NVL72, GB200 NVL72, B200, H200, H100, RTX Pro, etc.',
+      'Continuous, reproducible benchmarks of long-context, multi-turn agentic workloads across MI355X, GB300 NVL72, GB200 NVL72, B200, H200, H100, RTX Pro, and more.',
     overview: 'Overview',
     dashboard: 'Full dashboard',
     ledgerTitle: 'Models with AgentX results',
+    ledgerEyebrow: 'AgentX',
     modelAction: 'View results',
   },
   zh: {
     eyebrow: 'AgentX｜最新结果',
-    title: '真实智能体工作负载下的推理性能对比',
+    title: '衡量真实世界的 AI 推理性能。',
     description:
-      '比较不同硬件平台在长上下文、多轮智能体工作负载下的推理性能，覆盖 MI355X、GB300 NVL72、GB200 NVL72、B200、H200、H100 和 RTX Pro 等平台。',
+      '持续更新、可复现的基准测试，覆盖 MI355X、GB300 NVL72、GB200 NVL72、B200、H200、H100、RTX Pro 等平台上的长上下文、多轮智能体工作负载。',
     overview: '总览',
     dashboard: '查看完整仪表板',
     ledgerTitle: '已发布 AgentX 结果的模型',
+    ledgerEyebrow: 'AgentX',
     modelAction: '查看结果',
   },
 } as const;
@@ -48,85 +49,77 @@ export function AgentXCompareHero({
   const Heading = headingLevel;
 
   return (
-    <section data-testid="compare-agentx-primary">
-      <Card className="overflow-hidden p-0 md:p-0">
-        <div className="grid lg:grid-cols-[minmax(0,1.15fr)_minmax(19rem,0.85fr)]">
-          <div className="flex flex-col justify-center px-6 py-5 md:px-8 md:py-6 lg:px-10 lg:py-7">
-            <p className="font-mono text-xs font-semibold tracking-[0.18em] text-brand uppercase">
-              {t.eyebrow}
-            </p>
-            {/* `relative` anchors the splash, which positions itself absolutely
-                at the top right. Landing only: /compare is not the launch
-                surface, and the announcement belongs on the front page. */}
-            <div className="relative">
-              <Heading className="mt-3 max-w-2xl text-[1.5rem]/[1.8rem] font-semibold tracking-tight text-foreground lg:text-[2.4rem]/[2.4rem]">
-                {t.title}
-              </Heading>
-              {surface === 'landing' && <MinecraftSplash />}
-            </div>
-            <p className="mt-3 max-w-3xl text-base leading-7 text-muted-foreground lg:text-lg">
-              {t.description}
-            </p>
-            <div className="mt-5 flex flex-wrap gap-3">
-              <CompareIndexTrackedLink
-                data-testid="compare-agentx-overview-link"
-                href={`${prefix}/overview`}
-                analyticsEvent="compare_agentx_overview_clicked"
-                analyticsSurface={surface}
-                appNavigation
-                className="inline-flex min-h-11 items-center gap-2 rounded-md bg-brand px-5 py-2.5 font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-brand/90"
-              >
-                {t.overview}
-                <ArrowRight aria-hidden="true" className="size-4" />
-              </CompareIndexTrackedLink>
-              <CompareIndexTrackedLink
-                data-testid="compare-agentx-dashboard-link"
-                href={agentxDashboardHref(locale, FEATURED_AGENTX_MODELS[0])}
-                analyticsEvent="compare_agentx_dashboard_clicked"
-                analyticsTarget="kimi-k3"
-                analyticsSurface={surface}
-                appNavigation
-                className="inline-flex min-h-11 items-center gap-2 rounded-md border border-border px-5 py-2.5 font-semibold text-foreground transition-colors hover:bg-muted"
-              >
-                {t.dashboard}
-                <ArrowRight aria-hidden="true" className="size-4" />
-              </CompareIndexTrackedLink>
-            </div>
-          </div>
+    <section data-testid="compare-agentx-primary" className="pt-10 pb-4 md:pt-16 md:pb-6">
+      {/* Statement hero: oversized ink headline on the open page ground, no
+          card chrome. The model ledger below trades the sidebar list for a
+          row of bordered insight cards. */}
+      <p className="font-mono text-xs font-semibold tracking-[0.18em] text-brand uppercase">
+        {t.eyebrow}
+      </p>
+      <div className="relative">
+        <Heading className="mt-4 max-w-4xl text-[2.1rem]/[1.12] font-semibold tracking-[-0.015em] text-foreground md:text-[3rem]/[1.1] lg:text-[3.4rem]/[1.08]">
+          {t.title}
+        </Heading>
+        {surface === 'landing' && <MinecraftSplash />}
+      </div>
+      <p className="mt-5 max-w-2xl text-base leading-7 text-muted-foreground md:text-lg md:leading-8">
+        {t.description}
+      </p>
 
-          <div className="border-t border-border/70 bg-muted/15 lg:border-t-0 lg:border-l">
-            {/* The visible ledger header is dropped; `ledgerTitle` stays as the
-                nav's accessible name so screen readers still get the label. */}
-            <nav aria-label={t.ledgerTitle} className="divide-y divide-border/70">
-              {FEATURED_AGENTX_MODELS.map((model) => (
-                <CompareIndexTrackedLink
-                  key={model.slug}
-                  data-testid={`compare-agentx-model-${model.slug}`}
-                  href={agentxDashboardHref(locale, model)}
-                  analyticsEvent="compare_agentx_model_clicked"
-                  analyticsTarget={model.slug}
-                  analyticsSurface={surface}
-                  appNavigation
-                  className="group flex min-h-14 items-center justify-between gap-4 px-5 py-2.5 transition-colors hover:bg-brand/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-                >
-                  <span className="min-w-0">
-                    <span className="block text-sm font-semibold leading-tight text-foreground group-hover:text-brand">
-                      {model.label}
-                    </span>
-                    <span className="mt-1 block font-mono text-[10px] tracking-[0.14em] text-brand uppercase">
-                      AgentX
-                    </span>
-                  </span>
-                  <span className="inline-flex shrink-0 items-center gap-1 text-xs font-medium text-muted-foreground group-hover:text-foreground">
-                    {t.modelAction}
-                    <ArrowRight aria-hidden="true" className="size-3.5" />
-                  </span>
-                </CompareIndexTrackedLink>
-              ))}
-            </nav>
-          </div>
-        </div>
-      </Card>
+      <div className="mt-7 flex flex-wrap items-center gap-3">
+        <CompareIndexTrackedLink
+          data-testid="compare-agentx-overview-link"
+          href={`${prefix}/overview`}
+          analyticsEvent="compare_agentx_overview_clicked"
+          analyticsSurface={surface}
+          appNavigation
+          className="inline-flex min-h-12 items-center gap-2 rounded-full bg-mint px-7 py-3 font-semibold text-mint-foreground transition-[filter] hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          {t.overview}
+          <ArrowRight aria-hidden="true" className="size-4" />
+        </CompareIndexTrackedLink>
+        <CompareIndexTrackedLink
+          data-testid="compare-agentx-dashboard-link"
+          href={agentxDashboardHref(locale, FEATURED_AGENTX_MODELS[0])}
+          analyticsEvent="compare_agentx_dashboard_clicked"
+          analyticsTarget="kimi-k3"
+          analyticsSurface={surface}
+          appNavigation
+          className="inline-flex min-h-12 items-center gap-2 rounded-full border border-border bg-card px-7 py-3 font-semibold text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          {t.dashboard}
+          <ArrowRight aria-hidden="true" className="size-4" />
+        </CompareIndexTrackedLink>
+      </div>
+
+      {/* Model ledger as insight cards */}
+      <nav
+        aria-label={t.ledgerTitle}
+        className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 md:mt-12"
+      >
+        {FEATURED_AGENTX_MODELS.map((model) => (
+          <CompareIndexTrackedLink
+            key={model.slug}
+            data-testid={`compare-agentx-model-${model.slug}`}
+            href={agentxDashboardHref(locale, model)}
+            analyticsEvent="compare_agentx_model_clicked"
+            analyticsTarget={model.slug}
+            analyticsSurface={surface}
+            appNavigation
+            className="group flex min-h-36 flex-col justify-between gap-6 rounded-xl border border-border bg-card p-5 transition-[border-color,box-shadow] hover:border-brand/60 hover:shadow-[0_1px_10px_rgb(9_12_12_/_0.06)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <span className="flex items-center gap-1.5 font-mono text-[10px] font-semibold tracking-[0.14em] text-brand uppercase">
+              <span aria-hidden="true" className="size-1.5 rounded-full bg-brand" />
+              {t.ledgerEyebrow}
+            </span>
+            <span className="block text-lg/6 font-semibold text-foreground">{model.label}</span>
+            <span className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors group-hover:text-brand">
+              {t.modelAction}
+              <ArrowUpRight aria-hidden="true" className="size-3.5" />
+            </span>
+          </CompareIndexTrackedLink>
+        ))}
+      </nav>
     </section>
   );
 }
diff --git a/packages/app/src/components/footer/footer.tsx b/packages/app/src/components/footer/footer.tsx
index 03b33de30..fc0906e9f 100644
--- a/packages/app/src/components/footer/footer.tsx
+++ b/packages/app/src/components/footer/footer.tsx
@@ -87,256 +87,262 @@ export const Footer = ({ starCount }: { starCount?: number | null }) => {
   const prefix = locale === 'zh' ? '/zh' : '';
   return (
     <footer data-testid="footer" className="relative w-full overflow-visible mt-auto pt-32">
-      <div className="container mx-auto px-4 lg:px-8 py-12">
-        {/* Main grid */}
-        <div className="flex flex-col md:flex-row md:justify-between gap-10 md:gap-8 mb-10">
-          {/* Left — Brand */}
-          <div
-            data-testid="footer-brand"
-            className="flex flex-col gap-4 items-center md:items-start"
-          >
-            <Link
-              data-testid="footer-brand-link"
-              target="_blank"
-              href="https://semianalysis.com/"
-              className="inline-block w-35 h-14.5"
-            >
-              <Image
-                width={140}
-                height={58}
-                src="/brand/logo-color.webp"
-                alt="SemiAnalysis logo"
-                className="h-auto"
-              />
-            </Link>
-            <p
-              data-testid="footer-brand-description"
-              className="text-sm text-muted-foreground max-w-xs text-center md:text-left"
+      {/* Ink band: .footer-ink rescopes the theme tokens (see globals.css) so
+          every child — links, star button, share buttons — stays readable on
+          the dark teal ground without per-component changes. */}
+      <div className="footer-ink">
+        <div className="container mx-auto px-4 lg:px-8 py-14">
+          <p className="pride-wordmark text-2xl font-bold tracking-tight mb-10">InferenceX</p>
+          {/* Main grid */}
+          <div className="flex flex-col md:flex-row md:justify-between gap-10 md:gap-8 mb-10">
+            {/* Left — Brand */}
+            <div
+              data-testid="footer-brand"
+              className="flex flex-col gap-4 items-center md:items-start"
             >
-              {t.description}
-            </p>
-          </div>
-
-          {/* Center — Links */}
-          <div data-testid="footer-links" className="grid grid-cols-3 gap-x-6 gap-y-8">
-            <div data-testid="footer-links-semianalysis" className="flex flex-col gap-2.5">
-              <span className="text-sm font-medium text-foreground">{t.semianalysis}</span>
-              <a
-                data-testid="footer-link-main-site"
-                href="https://semianalysis.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.mainSite}
-              </a>
-              <a
-                data-testid="footer-link-newsletter"
-                href="https://newsletter.semianalysis.com"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.newsletter}
-              </a>
-              <a
-                data-testid="footer-link-about"
-                href="https://semianalysis.com/about/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.about}
-              </a>
-            </div>
-            <div data-testid="footer-links-legal" className="flex flex-col gap-2.5">
-              <span className="text-sm font-medium text-foreground">{t.legal}</span>
               <Link
-                data-testid="footer-link-land-acknowledgement"
-                href={`${prefix}/land-acknowledgement`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.landAcknowledgement}
-              </Link>
-              <a
-                data-testid="footer-link-privacy"
-                href="https://semianalysis.com/privacy-policy/"
+                data-testid="footer-brand-link"
                 target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                href="https://semianalysis.com/"
+                className="inline-block w-35 h-14.5"
               >
-                {t.privacyPolicy}
-              </a>
-              <a
-                data-testid="footer-link-cookies"
-                href="https://semianalysis.com/cookie-policy/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.cookiePolicy}
-              </a>
-            </div>
-            <div data-testid="footer-links-contribute" className="flex flex-col gap-2.5">
-              <span className="text-sm font-medium text-foreground">{t.contribute}</span>
-              <a
-                data-testid="footer-link-benchmarks"
-                href="https://github.com/SemiAnalysisAI/InferenceX"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.benchmarks}
-              </a>
-              <a
-                data-testid="footer-link-agentx-harness"
-                href="https://github.com/SemiAnalysisAI/agentx-harness"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.agentxHarness}
-              </a>
-              <a
-                data-testid="footer-link-visualization"
-                href="https://github.com/SemiAnalysisAI/InferenceX-app"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.visualization}
-              </a>
-            </div>
-            <div data-testid="footer-links-more" className="flex flex-col gap-2.5">
-              <span className="text-sm font-medium text-foreground">{t.more}</span>
-              <Link
-                data-testid="footer-link-supporters"
-                href={`${prefix}/quotes`}
-                onClick={() => track('footer_supporters_clicked')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.supporters}
-              </Link>
-              <Link
-                data-testid="footer-link-agentx"
-                href={`${prefix}/agentx`}
-                onClick={() => track('footer_agentx_clicked')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.agentx}
-              </Link>
-              <Link
-                data-testid="footer-link-telemetry"
-                href={`${prefix}/inference/agentic`}
-                onClick={() => track('footer_telemetry_clicked')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.telemetry}
+                <Image
+                  width={140}
+                  height={58}
+                  src="/brand/logo-color.webp"
+                  alt="SemiAnalysis logo"
+                  className="h-auto"
+                />
               </Link>
-              <Link
-                data-testid="footer-link-articles"
-                href={`${prefix}/blog`}
-                onClick={() => track('footer_articles_clicked')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.articles}
-              </Link>
-              <Link
-                data-testid="footer-link-api"
-                href={`${prefix}/api`}
-                onClick={() => track('footer_api_clicked')}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+              <p
+                data-testid="footer-brand-description"
+                className="text-sm text-muted-foreground max-w-xs text-center md:text-left"
               >
-                {t.apiReference}
-              </Link>
-              <Link
-                data-testid="footer-link-reliability"
-                href={`${prefix}/reliability`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.gpuReliability}
-              </Link>
-              <Link
-                data-testid="footer-link-compare-per-dollar"
-                href={`${prefix}/compare-per-dollar`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.perfPerDollar}
-              </Link>
-              <Link
-                data-testid="footer-link-model-architectures"
-                // English-only route (not zh-mirrored), so no locale prefix.
-                href="/model"
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.modelArchitectures}
-              </Link>
-              <Link
-                data-testid="footer-link-glossary"
-                href={`${prefix}/glossary`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.glossary}
-              </Link>
-              <Link
-                data-testid="footer-link-chips"
-                href={`${prefix}/chips`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.chipSpecs}
-              </Link>
-              <Link
-                data-testid="footer-link-rankings"
-                href={`${prefix}/rankings`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.rankings}
-              </Link>
-              <Link
-                data-testid="footer-link-run"
-                href={`${prefix}/run`}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.runPages}
-              </Link>
-              <Link
-                data-testid="footer-link-zh"
-                href={t.languageHref}
-                hrefLang={t.languageHrefLang}
-                className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-              >
-                {t.languageLink}
-              </Link>
+                {t.description}
+              </p>
             </div>
-          </div>
 
-          {/* Right — CTA + Social */}
-          <div data-testid="footer-cta" className="flex flex-col gap-4 items-center md:items-end">
-            <div data-testid="footer-social-buttons" className="flex items-center gap-1.5">
-              <div className="rounded-md bg-background/80 w-fit">
-                <StarButton starCount={starCount} />
+            {/* Center — Links */}
+            <div data-testid="footer-links" className="grid grid-cols-3 gap-x-6 gap-y-8">
+              <div data-testid="footer-links-semianalysis" className="flex flex-col gap-2.5">
+                <span className="text-sm font-medium text-foreground">{t.semianalysis}</span>
+                <a
+                  data-testid="footer-link-main-site"
+                  href="https://semianalysis.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.mainSite}
+                </a>
+                <a
+                  data-testid="footer-link-newsletter"
+                  href="https://newsletter.semianalysis.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.newsletter}
+                </a>
+                <a
+                  data-testid="footer-link-about"
+                  href="https://semianalysis.com/about/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.about}
+                </a>
+              </div>
+              <div data-testid="footer-links-legal" className="flex flex-col gap-2.5">
+                <span className="text-sm font-medium text-foreground">{t.legal}</span>
+                <Link
+                  data-testid="footer-link-land-acknowledgement"
+                  href={`${prefix}/land-acknowledgement`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.landAcknowledgement}
+                </Link>
+                <a
+                  data-testid="footer-link-privacy"
+                  href="https://semianalysis.com/privacy-policy/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.privacyPolicy}
+                </a>
+                <a
+                  data-testid="footer-link-cookies"
+                  href="https://semianalysis.com/cookie-policy/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.cookiePolicy}
+                </a>
               </div>
-              <div className="rounded-md bg-background/80 w-fit">
-                <ShareTwitterButton />
+              <div data-testid="footer-links-contribute" className="flex flex-col gap-2.5">
+                <span className="text-sm font-medium text-foreground">{t.contribute}</span>
+                <a
+                  data-testid="footer-link-benchmarks"
+                  href="https://github.com/SemiAnalysisAI/InferenceX"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.benchmarks}
+                </a>
+                <a
+                  data-testid="footer-link-agentx-harness"
+                  href="https://github.com/SemiAnalysisAI/agentx-harness"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.agentxHarness}
+                </a>
+                <a
+                  data-testid="footer-link-visualization"
+                  href="https://github.com/SemiAnalysisAI/InferenceX-app"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.visualization}
+                </a>
               </div>
-              <div className="rounded-md bg-background/80 w-fit">
-                <ShareLinkedInButton />
+              <div data-testid="footer-links-more" className="flex flex-col gap-2.5">
+                <span className="text-sm font-medium text-foreground">{t.more}</span>
+                <Link
+                  data-testid="footer-link-supporters"
+                  href={`${prefix}/quotes`}
+                  onClick={() => track('footer_supporters_clicked')}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.supporters}
+                </Link>
+                <Link
+                  data-testid="footer-link-agentx"
+                  href={`${prefix}/agentx`}
+                  onClick={() => track('footer_agentx_clicked')}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.agentx}
+                </Link>
+                <Link
+                  data-testid="footer-link-telemetry"
+                  href={`${prefix}/inference/agentic`}
+                  onClick={() => track('footer_telemetry_clicked')}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.telemetry}
+                </Link>
+                <Link
+                  data-testid="footer-link-articles"
+                  href={`${prefix}/blog`}
+                  onClick={() => track('footer_articles_clicked')}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.articles}
+                </Link>
+                <Link
+                  data-testid="footer-link-api"
+                  href={`${prefix}/api`}
+                  onClick={() => track('footer_api_clicked')}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.apiReference}
+                </Link>
+                <Link
+                  data-testid="footer-link-reliability"
+                  href={`${prefix}/reliability`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.gpuReliability}
+                </Link>
+                <Link
+                  data-testid="footer-link-compare-per-dollar"
+                  href={`${prefix}/compare-per-dollar`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.perfPerDollar}
+                </Link>
+                <Link
+                  data-testid="footer-link-model-architectures"
+                  // English-only route (not zh-mirrored), so no locale prefix.
+                  href="/model"
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.modelArchitectures}
+                </Link>
+                <Link
+                  data-testid="footer-link-glossary"
+                  href={`${prefix}/glossary`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.glossary}
+                </Link>
+                <Link
+                  data-testid="footer-link-chips"
+                  href={`${prefix}/chips`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.chipSpecs}
+                </Link>
+                <Link
+                  data-testid="footer-link-rankings"
+                  href={`${prefix}/rankings`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.rankings}
+                </Link>
+                <Link
+                  data-testid="footer-link-run"
+                  href={`${prefix}/run`}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.runPages}
+                </Link>
+                <Link
+                  data-testid="footer-link-zh"
+                  href={t.languageHref}
+                  hrefLang={t.languageHrefLang}
+                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {t.languageLink}
+                </Link>
               </div>
             </div>
-            <p className="text-sm text-muted-foreground text-center md:text-right max-w-xs">
-              {t.cta}
-            </p>
+
+            {/* Right — CTA + Social */}
+            <div data-testid="footer-cta" className="flex flex-col gap-4 items-center md:items-end">
+              <div data-testid="footer-social-buttons" className="flex items-center gap-1.5">
+                <div className="rounded-md bg-background/80 w-fit">
+                  <StarButton starCount={starCount} />
+                </div>
+                <div className="rounded-md bg-background/80 w-fit">
+                  <ShareTwitterButton />
+                </div>
+                <div className="rounded-md bg-background/80 w-fit">
+                  <ShareLinkedInButton />
+                </div>
+              </div>
+              <p className="text-sm text-muted-foreground text-center md:text-right max-w-xs">
+                {t.cta}
+              </p>
+            </div>
           </div>
-        </div>
 
-        {/* Bottom bar */}
-        <div
-          data-testid="footer-bottom-bar"
-          className="border-t border-border/40 pt-6 flex flex-col md:flex-row items-center justify-between gap-4"
-        >
-          <p data-testid="footer-copyright" className="text-xs text-muted-foreground">
-            &copy; {new Date().getFullYear()} semianalysis.com. {t.rights}
-          </p>
+          {/* Bottom bar */}
+          <div
+            data-testid="footer-bottom-bar"
+            className="border-t border-border pt-6 flex flex-col md:flex-row items-center justify-between gap-4"
+          >
+            <p data-testid="footer-copyright" className="text-xs text-muted-foreground">
+              &copy; {new Date().getFullYear()} semianalysis.com. {t.rights}
+            </p>
+          </div>
         </div>
       </div>
     </footer>
diff --git a/packages/app/src/components/header/header.tsx b/packages/app/src/components/header/header.tsx
index 4b8608df6..7d24b5ced 100644
--- a/packages/app/src/components/header/header.tsx
+++ b/packages/app/src/components/header/header.tsx
@@ -4,6 +4,23 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  BookOpen,
+  Braces,
+  ChartLine,
+  CircleDollarSign,
+  Cpu,
+  GitCompareArrows,
+  Home,
+  Info,
+  LayoutGrid,
+  Newspaper,
+  Rocket,
+  ShieldCheck,
+  Sparkles,
+  Trophy,
+  type LucideIcon,
+} from 'lucide-react';
 import { track } from '@/lib/analytics';
 
 import { ModeToggle } from '@/components/ui/mode-toggle';
@@ -14,13 +31,28 @@ import { DASHBOARD_ROUTES } from '@/lib/dashboard-routes';
 import { useClientPathname } from '@/hooks/useClientPathname';
 import { useClientSearch } from '@/hooks/useClientSearch';
 import { hasZhSibling, isZhPathname, switchLocalePath, ZH_PREFIX, zhPath } from '@/lib/i18n';
-import { NAV_LABELS_ZH, type HeaderNavHref } from '@/lib/tab-meta-zh';
+import { NAV_LABELS_ZH, TAB_LABELS_ZH, type HeaderNavHref } from '@/lib/tab-meta-zh';
 import { cn } from '@/lib/utils';
 
 import { GitHubStars } from './GithubStars';
 
 const DASHBOARD_TABS = DASHBOARD_ROUTES.map((route) => route.path);
 
+/** Dashboard tabs surfaced as a nested group beneath the Dashboard entry. */
+const PRIMARY_DASHBOARD_TABS = DASHBOARD_ROUTES.filter((route) => route.navGroup === 'primary');
+
+// Kept in sync with TAB_LABELS_EN in tab-nav.tsx; duplicated here so the shell
+// does not pull the dashboard tab bar (Select, Card, …) into its bundle.
+const DASHBOARD_TAB_LABELS_EN: Record<string, string> = {
+  inference: 'Inference Performance',
+  evaluation: 'Accuracy Evals',
+  historical: 'Historical Trends',
+  calculator: 'TCO Calculator',
+  fleet: 'Fleet Lifecycle',
+  'gpu-specs': 'Chip Specs',
+  submissions: 'Submissions',
+};
+
 interface NavLink {
   href: HeaderNavHref;
   label: string;
@@ -33,7 +65,12 @@ interface NavLink {
 }
 
 const NAV_LINKS: readonly NavLink[] = [
-  { href: '/', label: 'Home', testId: 'nav-link-home', event: 'header_home_clicked' },
+  {
+    href: '/',
+    label: 'Home',
+    testId: 'nav-link-home',
+    event: 'header_home_clicked',
+  },
   // AgentX sits directly after Home: it is the flagship benchmark, and the
   // surface every entry below it ultimately explains.
   {
@@ -67,17 +104,108 @@ const NAV_LINKS: readonly NavLink[] = [
     testId: 'nav-link-articles',
     event: 'header_articles_clicked',
   },
-  { href: '/about', label: 'About', testId: 'nav-link-about', event: 'header_about_clicked' },
+  {
+    href: '/about',
+    label: 'About',
+    testId: 'nav-link-about',
+    event: 'header_about_clicked',
+  },
 ] as const;
 
-function isActive(pathname: string, href: string): boolean {
+/** Icons shown only in the desktop sidebar; the mobile menu stays text-only. */
+const NAV_ICONS: Record<HeaderNavHref, LucideIcon> = {
+  '/': Home,
+  '/agentx': Sparkles,
+  '/overview': LayoutGrid,
+  '/inference': ChartLine,
+  '/compare': GitCompareArrows,
+  '/blog': Newspaper,
+  '/about': Info,
+};
+
+interface SecondaryLink {
+  href: `/${string}`;
+  en: string;
+  zh: string;
+  icon: LucideIcon;
+  testId: string;
+}
+
+/**
+ * Deep destinations that used to live only in the footer. The sidebar has the
+ * vertical room to keep them one click away; they deliberately use the
+ * `sidebar-link-*` testid namespace so the primary `nav-link-*` contract
+ * (order, count) stays untouched.
+ */
+const SECONDARY_LINKS: readonly SecondaryLink[] = [
+  {
+    href: '/rankings',
+    en: 'GPU Rankings',
+    zh: 'GPU 排行榜',
+    icon: Trophy,
+    testId: 'sidebar-link-rankings',
+  },
+  {
+    href: '/run',
+    en: 'Model on GPU Results',
+    zh: '模型实测结果',
+    icon: Rocket,
+    testId: 'sidebar-link-run',
+  },
+  {
+    href: '/chips',
+    en: 'Chip Specs & Pricing',
+    zh: '芯片规格与价格',
+    icon: Cpu,
+    testId: 'sidebar-link-chips',
+  },
+  {
+    href: '/reliability',
+    en: 'Chip Reliability',
+    zh: '芯片可靠性',
+    icon: ShieldCheck,
+    testId: 'sidebar-link-reliability',
+  },
+  {
+    href: '/compare-per-dollar',
+    en: 'Performance per Dollar',
+    zh: '每美元性能',
+    icon: CircleDollarSign,
+    testId: 'sidebar-link-per-dollar',
+  },
+  {
+    href: '/glossary',
+    en: 'Glossary',
+    zh: '术语表',
+    icon: BookOpen,
+    testId: 'sidebar-link-glossary',
+  },
+  {
+    href: '/api',
+    en: 'API Reference',
+    zh: 'API 文档',
+    icon: Braces,
+    testId: 'sidebar-link-api',
+  },
+] as const;
+
+const GROUP_LABELS = {
+  en: { primary: 'Navigate', data: 'Data & Reference' },
+  zh: { primary: '导航', data: '数据与参考' },
+} as const;
+
+function toEnPathname(pathname: string): string {
   // Chinese pages mirror the English tree under /zh; active state is computed
   // against the English path so both trees highlight the same nav entry.
-  const enPathname = isZhPathname(pathname)
+  return isZhPathname(pathname)
     ? pathname === ZH_PREFIX
       ? '/'
       : pathname.slice(ZH_PREFIX.length)
     : pathname;
+}
+
+function isActive(pathname: string, href: string): boolean {
+  const enPathname = toEnPathname(pathname);
   if (href === '/') return enPathname === '/';
   // Dashboard owns every tab path, including the telemetry catalog beneath
   // `/inference`, which now lives in the footer rather than the primary nav.
@@ -90,6 +218,12 @@ function isActive(pathname: string, href: string): boolean {
   return enPathname === href || enPathname.startsWith(`${href}/`);
 }
 
+/** Active state for a single dashboard tab inside the nested sidebar group. */
+function isTabActive(pathname: string, tabPath: string): boolean {
+  const enPathname = toEnPathname(pathname);
+  return enPathname === tabPath || enPathname.startsWith(`${tabPath}/`);
+}
+
 /**
  * Whether the link lands on the page already on screen. Deliberately not
  * `isActive`, which also lights up for every sibling dashboard tab and for
@@ -137,6 +271,22 @@ function LanguageToggle({
   );
 }
 
+/** Small uppercase heading above each sidebar group. */
+function GroupLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <span className="px-3 pb-1.5 text-[0.6875rem] font-semibold uppercase tracking-[0.12em] text-muted-foreground/70 select-none">
+      {children}
+    </span>
+  );
+}
+
+/**
+ * App shell navigation. Renders as a fixed left sidebar from the `xl`
+ * breakpoint up — brand on top, grouped navigation in the middle, utilities
+ * pinned to the bottom — and collapses into the previous sticky top bar with
+ * a hamburger menu below `xl`. One DOM tree serves both layouts so every
+ * testid exists exactly once.
+ */
 export const Header = ({ starCount }: { starCount?: number | null }) => {
   const pathname = usePathname() ?? '/';
   const router = useRouter();
@@ -159,6 +309,9 @@ export const Header = ({ starCount }: { starCount?: number | null }) => {
         displayHref: link.href,
       }));
 
+  const groupLabels = isZh ? GROUP_LABELS.zh : GROUP_LABELS.en;
+  const dashboardActive = isActive(pathname, '/inference');
+
   // Close menu on route change
   useEffect(() => {
     setMobileMenuOpen(false);
@@ -191,17 +344,23 @@ export const Header = ({ starCount }: { starCount?: number | null }) => {
   return (
     <header
       data-testid="header"
-      className="sticky top-0 z-50 border-b border-border/40 mb-4 bg-background/60 backdrop-blur-[2px]"
+      className={cn(
+        // Below xl: the familiar sticky top bar.
+        'sticky top-0 z-50 border-b border-border bg-background',
+        // From xl up: a fixed, full-height left rail. The content column adds
+        // matching left padding in the root layout.
+        'xl:fixed xl:inset-y-0 xl:left-0 xl:w-72 xl:border-r xl:border-b-0',
+      )}
     >
-      <div className="container mx-auto px-4 lg:px-8">
-        <div className="flex h-14 items-center gap-6">
+      <div className="container mx-auto px-4 lg:px-8 xl:m-0 xl:h-full xl:max-w-none xl:px-0">
+        <div className="flex h-16 items-center gap-6 lg:h-[4.5rem] xl:h-full xl:flex-col xl:items-stretch xl:gap-0">
           {/* Brand */}
           <Link
             href={isZh ? '/zh' : '/'}
             data-testid="header-brand"
-            className="flex items-center min-h-11 gap-2 shrink-0"
+            className="flex items-center min-h-11 gap-2 shrink-0 xl:px-6 xl:pt-6 xl:pb-5"
           >
-            <span className="pride-wordmark text-lg font-bold tracking-tight">InferenceX</span>
+            <span className="pride-wordmark text-xl font-bold tracking-tight">InferenceX</span>
             <span className="hidden sm:flex items-center gap-1.5 text-xs text-muted-foreground">
               by
               <Image
@@ -209,50 +368,134 @@ export const Header = ({ starCount }: { starCount?: number | null }) => {
                 alt="SemiAnalysis logo"
                 width={64}
                 height={27}
-                className="inline h-auto lg:w-20"
+                className="inline h-auto lg:w-16"
               />
             </span>
           </Link>
 
-          {/* Desktop nav */}
-          <nav className="hidden items-center gap-1 xl:flex">
-            {navLinks.map(({ href, displayHref, label, badgeLabel, testId, event }) => (
-              <Link
-                key={href}
-                data-testid={testId}
-                href={displayHref}
-                prefetch={isActive(pathname, href) ? false : undefined}
-                className={cn(
-                  'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
-                  isActive(pathname, href)
-                    ? 'text-brand bg-brand/10'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-muted',
-                )}
-                onClick={(e) => {
-                  track(event);
-                  // Re-entering the current page would refetch the route and
-                  // discard whatever selector state the URL already carries.
-                  if (isCurrentPage(pathname, displayHref)) {
-                    e.preventDefault();
-                    return;
-                  }
-                  if (href === '/overview' || href === '/inference') {
-                    navigateInApp(e, router, displayHref);
-                  }
-                }}
-              >
-                <span>{label}</span>
-                {badgeLabel && (
-                  <NewBadge data-nav-badge="agentx" data-new-badge="agentx-nav">
-                    {badgeLabel}
-                  </NewBadge>
-                )}
-              </Link>
-            ))}
-          </nav>
+          {/* Desktop sidebar nav — grouped vertical rails. Hidden below xl,
+              where the hamburger menu takes over. */}
+          <div className="hidden xl:flex xl:min-h-0 xl:grow xl:flex-col xl:gap-7 xl:overflow-y-auto xl:px-3 xl:pt-1 xl:pb-6">
+            <nav aria-label="Primary" className="flex flex-col gap-0.5">
+              <GroupLabel>{groupLabels.primary}</GroupLabel>
+              {navLinks.map(({ href, displayHref, label, badgeLabel, testId, event }) => {
+                const Icon = NAV_ICONS[href];
+                const active = isActive(pathname, href);
+                return (
+                  <div key={href} className="flex flex-col">
+                    <Link
+                      data-testid={testId}
+                      href={displayHref}
+                      prefetch={active ? false : undefined}
+                      className={cn(
+                        'relative flex items-center gap-2.5 rounded-md px-3 min-h-10 text-sm font-medium transition-colors',
+                        'before:absolute before:left-0 before:top-1/2 before:h-5 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:transition-colors',
+                        active
+                          ? 'text-brand bg-accent before:bg-brand'
+                          : 'text-muted-foreground hover:text-foreground hover:bg-muted before:bg-transparent',
+                      )}
+                      onClick={(e) => {
+                        track(event);
+                        // Re-entering the current page would refetch the route and
+                        // discard whatever selector state the URL already carries.
+                        if (isCurrentPage(pathname, displayHref)) {
+                          e.preventDefault();
+                          return;
+                        }
+                        if (href === '/overview' || href === '/inference') {
+                          navigateInApp(e, router, displayHref);
+                        }
+                      }}
+                    >
+                      <Icon className="size-4 shrink-0 opacity-80" aria-hidden="true" />
+                      <span className="truncate">{label}</span>
+                      {badgeLabel && (
+                        <NewBadge data-nav-badge="agentx" data-new-badge="agentx-nav">
+                          {badgeLabel}
+                        </NewBadge>
+                      )}
+                    </Link>
+
+                    {/* Dashboard tabs, nested while any dashboard route is on
+                        screen so switching tabs never requires the tab bar. */}
+                    {href === '/inference' && dashboardActive && (
+                      <div className="ml-[1.4rem] mt-0.5 flex flex-col gap-px border-l border-border pl-2.5 py-0.5">
+                        {PRIMARY_DASHBOARD_TABS.map((route) => {
+                          const tabActive = isTabActive(pathname, route.path);
+                          const tabHref =
+                            isZh && hasZhSibling(route.path) ? zhPath(route.path) : route.path;
+                          const tabLabel = isZh
+                            ? TAB_LABELS_ZH[route.key]
+                            : (DASHBOARD_TAB_LABELS_EN[route.key] ?? route.key);
+                          return (
+                            <Link
+                              key={route.key}
+                              data-testid={`sidebar-tab-${route.key}`}
+                              href={tabHref}
+                              prefetch={false}
+                              className={cn(
+                                'flex items-center rounded-md px-2.5 min-h-8 text-[0.8125rem] transition-colors',
+                                tabActive
+                                  ? 'text-brand bg-accent font-medium'
+                                  : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+                              )}
+                              onClick={(e) => {
+                                window.dispatchEvent(new CustomEvent('inferencex:tab-change'));
+                                track('sidebar_dashboard_tab_clicked', {
+                                  tab: route.key,
+                                });
+                                if (isCurrentPage(pathname, tabHref)) {
+                                  e.preventDefault();
+                                  return;
+                                }
+                                navigateInApp(e, router, tabHref);
+                              }}
+                            >
+                              <span className="truncate">{tabLabel}</span>
+                            </Link>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </nav>
+
+            <nav aria-label={groupLabels.data} className="flex flex-col gap-0.5">
+              <GroupLabel>{groupLabels.data}</GroupLabel>
+              {SECONDARY_LINKS.map(({ href, en, zh, icon: Icon, testId }) => {
+                const displayHref = isZh && hasZhSibling(href) ? zhPath(href) : href;
+                const active = isActive(pathname, href);
+                return (
+                  <Link
+                    key={href}
+                    data-testid={testId}
+                    href={displayHref}
+                    prefetch={false}
+                    className={cn(
+                      'relative flex items-center gap-2.5 rounded-md px-3 min-h-9 text-[0.8125rem] font-medium transition-colors',
+                      'before:absolute before:left-0 before:top-1/2 before:h-4 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:transition-colors',
+                      active
+                        ? 'text-brand bg-accent before:bg-brand'
+                        : 'text-muted-foreground hover:text-foreground hover:bg-muted before:bg-transparent',
+                    )}
+                    onClick={(e) => {
+                      track('sidebar_link_clicked', { href });
+                      if (isCurrentPage(pathname, displayHref)) e.preventDefault();
+                    }}
+                  >
+                    <Icon className="size-4 shrink-0 opacity-80" aria-hidden="true" />
+                    <span className="truncate">{isZh ? zh : en}</span>
+                  </Link>
+                );
+              })}
+            </nav>
+          </div>
 
-          {/* Right side */}
-          <div className="ml-auto flex items-center gap-2">
+          {/* Utilities — right-aligned in the top bar, pinned to the sidebar
+              foot from xl up. */}
+          <div className="ml-auto flex items-center gap-2 xl:ml-0 xl:mt-auto xl:shrink-0 xl:flex-wrap xl:border-t xl:border-border xl:px-4 xl:py-3.5">
             <span className="hidden sm:flex">
               <GitHubStars owner="SemiAnalysisAI" repo="InferenceX" starCount={starCount} />
             </span>
@@ -302,7 +545,7 @@ export const Header = ({ starCount }: { starCount?: number | null }) => {
                       className={cn(
                         'flex items-center min-h-11 px-3 rounded-md text-sm font-medium transition-colors',
                         isActive(pathname, href)
-                          ? 'text-brand bg-brand/10'
+                          ? 'text-brand bg-accent'
                           : 'text-muted-foreground hover:text-foreground hover:bg-muted',
                       )}
                       onClick={(e) => {
diff --git a/packages/app/src/components/inference/agentic-point/metric-source-toolbar.tsx b/packages/app/src/components/inference/agentic-point/metric-source-toolbar.tsx
index b4094adfa..a632aef69 100644
--- a/packages/app/src/components/inference/agentic-point/metric-source-toolbar.tsx
+++ b/packages/app/src/components/inference/agentic-point/metric-source-toolbar.tsx
@@ -66,7 +66,7 @@ export function MetricSourceToolbar({
 }) {
   return (
     <div
-      className="sticky top-16 z-40 flex items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/90 px-3 py-2 shadow-sm backdrop-blur"
+      className="sticky top-16 xl:top-4 z-40 flex items-center justify-between gap-2 rounded-lg border border-border/40 bg-background/90 px-3 py-2 shadow-sm backdrop-blur"
       data-testid="metric-source-toolbar"
     >
       {hasWarmup ? (
diff --git a/packages/app/src/components/intro-section.tsx b/packages/app/src/components/intro-section.tsx
index 16379eb4c..a1b80e104 100644
--- a/packages/app/src/components/intro-section.tsx
+++ b/packages/app/src/components/intro-section.tsx
@@ -1,6 +1,3 @@
-import { Quote } from 'lucide-react';
-
-import { Card } from '@/components/ui/card';
 import { QuoteCarousel } from '@/components/quote-carousel';
 import { QUOTES, CAROUSEL_ORGS, CAROUSEL_LABELS } from '@/components/quotes/quotes-data';
 import type { Locale } from '@/lib/i18n';
@@ -12,13 +9,20 @@ const CAROUSEL_OVERRIDES = {
   labels: CAROUSEL_LABELS,
 };
 
-const HEADING = {
-  en: 'Open-Source Continuous Agentic Inference Benchmark Trusted by GigaWatt Token Factories',
-  zh: 'InferenceX 提供持续更新的开源智能体推理基准测试，已获得吉瓦级 token 工厂运营方的信赖。',
+const STRINGS = {
+  en: {
+    kicker: 'Trusted by GigaWatt token factories',
+    heading: 'Open-source continuous agentic inference benchmarking.',
+  },
+  zh: {
+    kicker: '获得吉瓦级 token 工厂运营方的信赖',
+    heading: 'InferenceX 提供持续更新的开源智能体推理基准测试。',
+  },
 } as const;
 
 export function IntroSection({ locale = 'en' }: { locale?: Locale } = {}) {
   const isZh = locale === 'zh';
+  const t = STRINGS[locale];
   // Quotes fall back to the English original until a translation lands.
   const quotes = isZh
     ? carouselQuotes.map((q) => ({
@@ -28,16 +32,19 @@ export function IntroSection({ locale = 'en' }: { locale?: Locale } = {}) {
       }))
     : carouselQuotes;
   return (
-    <section>
-      <Card data-testid="intro-section">
-        {/* The splash moved to the AgentX hero, which now opens the landing
-            page — two copies of the same announcement one scroll apart read
-            as a duplicate rather than a callout. */}
-        <div className="flex items-start gap-2 mb-4">
-          <Quote className="size-5 shrink-0 mt-1 text-brand" />
-          <h2 className="text-lg font-semibold">{HEADING[locale]}</h2>
-        </div>
-        <div>
+    <section className="py-8 md:py-12">
+      {/* Mint-tinted supporters band: the quote carousel already carries the
+          org strip, so the section frames it with an editorial heading
+          instead of card chrome. */}
+      <div
+        data-testid="intro-section"
+        className="rounded-2xl bg-accent px-5 py-8 md:px-10 md:py-10 dark:bg-card dark:border dark:border-border"
+      >
+        <p className="text-sm font-medium text-muted-foreground">{t.kicker}</p>
+        <h2 className="mt-2 max-w-3xl text-2xl/8 font-semibold tracking-[-0.01em] text-foreground md:text-3xl/9">
+          {t.heading}
+        </h2>
+        <div className="mt-8">
           <QuoteCarousel
             quotes={quotes}
             overrides={CAROUSEL_OVERRIDES}
@@ -45,7 +52,7 @@ export function IntroSection({ locale = 'en' }: { locale?: Locale } = {}) {
             moreLabel={isZh ? '查看业界评价 →' : undefined}
           />
         </div>
-      </Card>
+      </div>
     </section>
   );
 }
diff --git a/packages/app/src/components/landing/landing-page.tsx b/packages/app/src/components/landing/landing-page.tsx
index a57d514b5..c84b9bb24 100644
--- a/packages/app/src/components/landing/landing-page.tsx
+++ b/packages/app/src/components/landing/landing-page.tsx
@@ -1,4 +1,4 @@
-import { ArrowRight, BarChart3, ShieldCheck, Sparkles } from 'lucide-react';
+import { ArrowRight, ArrowUpRight, Sparkles } from 'lucide-react';
 
 import { Card } from '@/components/ui/card';
 import { AgentXCompareHero } from '@/components/compare/agentx-compare-hero';
@@ -13,6 +13,7 @@ import type { Locale } from '@/lib/i18n';
 
 const STRINGS = {
   en: {
+    exploreKicker: 'Explore the data',
     exploreInferenceX: 'Explore InferenceX',
     exploreInferenceXLead:
       'Start with a concise cost overview across active models and key platforms, or open the full dashboard for every model, chip, framework, and metric. AgentX is our long-context, multi-turn coding scenario.',
@@ -21,10 +22,12 @@ const STRINGS = {
       'Compare NVIDIA GB300 NVL72, GB200 NVL72, B300, B200, H200, H100, AMD MI355X, MI325X, MI300X and soon VR200 NVL72, AMD MI455X UALoE72, TPUv7 Ironwood, etc across DeepSeekv4 Pro, Qwen, Kimi, GLM, MiniMax, gpt-oss, Llama and other models.',
     overview: 'Overview',
     browseByModel: 'Or jump straight to the benchmarks for one model:',
-    reproTitle: 'Every Result Is Transparently done through Public GitHub Actions Automation',
+    reproKicker: 'Methodology',
+    reproTitle: 'Every result is produced in public.',
     reproP1:
       'Every data point on the dashboard is produced by a public GitHub Actions workflow run. The recipe lives in the repo, the run executes on the actual target hardware, and the full logs and artifacts are publicly viewable. Click any point on a chart to jump straight to the run that produced it. All reproducible, auditable, and open source.',
-    reproStat: '1,000+ new benchmark datapoints added per week on average.',
+    reproStat: '1,000+',
+    reproStatUnit: 'new benchmark datapoints added per week on average.',
     reproStatTail: 'Browse every new model, chip, framework, and configuration as it lands.',
     actionsRunsTitle: 'Public Actions runs',
     actionsRunsDesc:
@@ -43,6 +46,7 @@ const STRINGS = {
       'Jump straight into the most popular chip inference benchmark comparisons, curated and ready to explore.',
   },
   zh: {
+    exploreKicker: '探索数据',
     exploreInferenceX: '探索 InferenceX',
     exploreInferenceXLead:
       '先从成本总览了解当前活跃的模型和主要硬件平台，也可以进入仪表板，按模型、芯片、框架和指标深入比较。AgentX 用于评测长上下文、多轮编码的工作负载。',
@@ -51,10 +55,12 @@ const STRINGS = {
       '目前覆盖 DeepSeekv4 Pro、Qwen、Kimi、GLM、MiniMax、gpt-oss、Llama 等模型，以及 NVIDIA GB300 NVL72、GB200 NVL72、B300、B200、H200、H100 和 AMD MI355X、MI325X、MI300X 等硬件。后续还将加入 VR200 NVL72、AMD MI455X UALoE72 和 TPUv7 Ironwood。',
     overview: '总览',
     browseByModel: '也可以直接查看单个模型的基准测试：',
-    reproTitle: '所有结果均通过公开的 GitHub Actions 流程生成',
+    reproKicker: '测试方法',
+    reproTitle: '所有结果都在公开环境中生成。',
     reproP1:
       '仪表板上的每个数据点都来自一次公开的 GitHub Actions 运行。测试配置保存在仓库中，并在对应的真实硬件上执行；完整日志和产物均可公开查看。点击图表中的任意数据点，即可打开生成该结果的运行记录。整个过程可复现、可审计，并完全开源。',
-    reproStat: '平均每周新增 1,000 多个基准测试数据点。',
+    reproStat: '1,000+',
+    reproStatUnit: '平均每周新增的基准测试数据点。',
     reproStatTail: '新模型、芯片、框架和配置上线后，都可以在这里查看。',
     actionsRunsTitle: '公开运行记录',
     actionsRunsDesc: '每次基准测试都通过 GitHub Actions 执行，运行期间即可查看完整日志。',
@@ -86,7 +92,7 @@ export function LandingPage({ locale = 'en' }: { locale?: Locale } = {}) {
     <main className="relative">
       <LandingPageAnalytics />
       <NudgeEngine scope="landing" />
-      <div className="container mx-auto px-4 lg:px-8 flex flex-col gap-6 lg:gap-4">
+      <div className="container mx-auto px-4 lg:px-8 flex flex-col">
         {/* Same AgentX hero that leads /compare, above the quote carousel. The
             landing page owns no h1 of its own, but keep this an h2 so the hero
             stays a section within the page rather than retitling the whole
@@ -95,117 +101,136 @@ export function LandingPage({ locale = 'en' }: { locale?: Locale } = {}) {
 
         <IntroSection locale={locale} />
 
-        {/* Split: exploration entry points vs presets */}
-        <section className="flex flex-col gap-4 pb-8">
-          {/* Primary product entry points */}
-          <Card>
-            <div className="flex items-center gap-2 mb-3">
-              <BarChart3 className="size-5 shrink-0 text-brand" />
-              <h2 className="text-lg font-semibold">{t.exploreInferenceX}</h2>
-            </div>
-            <p className="text-sm text-muted-foreground mb-2">{t.exploreInferenceXLead}</p>
-            <p className="text-sm text-muted-foreground mb-6">{t.platformCoverage}</p>
-            <div className="mt-auto flex flex-col gap-2 sm:flex-row">
-              <LandingTrackedLink
-                href={`${prefix}/overview`}
-                data-testid="landing-overview-link"
-                analyticsEvent="landing_overview_clicked"
-                appNavigation
-                className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md bg-brand px-8 text-sm font-medium text-primary-foreground transition-colors hover:bg-brand/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 motion-reduce:transition-none sm:w-auto sm:text-base"
-              >
-                {t.overview}
-                <ArrowRight aria-hidden="true" className="size-4" />
-              </LandingTrackedLink>
-              <LandingTrackedLink
-                href={`${prefix}/inference`}
-                data-testid="landing-full-dashboard-link"
-                analyticsEvent="landing_full_dashboard_clicked"
-                appNavigation
-                className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-md border border-border px-8 text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 motion-reduce:transition-none sm:w-auto sm:text-base"
-              >
-                {t.fullDashboard}
-                <ArrowRight aria-hidden="true" className="size-4" />
-              </LandingTrackedLink>
-            </div>
-            {/* Per-model entry points — crawlable links to the indexable
-                /inference/<model> pages. Only actively benchmarked models are
-                promoted here; deprecated model pages stay reachable via the
-                sitemap and dashboard selector. */}
-            <p className="text-sm text-muted-foreground mt-6 mb-2">{t.browseByModel}</p>
-            <div className="flex flex-wrap gap-2" data-testid="landing-model-links">
-              {ACTIVE_INFERENCE_MODEL_SLUGS.map((entry) => (
+        {/* Exploration entry points — editorial split: heading and lead on the
+            left rail, entry points and per-model links on the right. */}
+        <section className="border-t border-border py-12 md:py-16">
+          <div className="grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)] lg:gap-16">
+            <div>
+              <p className="font-mono text-xs font-semibold tracking-[0.18em] text-brand uppercase">
+                {t.exploreKicker}
+              </p>
+              <h2 className="mt-4 text-3xl/9 font-semibold tracking-[-0.015em] text-foreground md:text-4xl/11">
+                {t.exploreInferenceX}
+              </h2>
+              <p className="mt-5 text-base leading-7 text-muted-foreground">
+                {t.exploreInferenceXLead}
+              </p>
+              <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                 <LandingTrackedLink
-                  key={entry.slug}
-                  href={`${prefix}/inference/${entry.slug}`}
-                  data-testid={`landing-model-link-${entry.slug}`}
-                  analyticsEvent="landing_model_page_clicked"
+                  href={`${prefix}/overview`}
+                  data-testid="landing-overview-link"
+                  analyticsEvent="landing_overview_clicked"
                   appNavigation
-                  className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm hover:bg-accent transition-colors"
+                  className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full bg-mint px-7 py-3 font-semibold text-mint-foreground transition-[filter] hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none sm:w-auto"
                 >
-                  {entry.seoName}
-                  <ArrowRight aria-hidden="true" className="size-3.5" />
+                  {t.overview}
+                  <ArrowRight aria-hidden="true" className="size-4" />
                 </LandingTrackedLink>
-              ))}
+                <LandingTrackedLink
+                  href={`${prefix}/inference`}
+                  data-testid="landing-full-dashboard-link"
+                  analyticsEvent="landing_full_dashboard_clicked"
+                  appNavigation
+                  className="inline-flex min-h-12 w-full items-center justify-center gap-2 rounded-full border border-border bg-card px-7 py-3 font-semibold text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none sm:w-auto"
+                >
+                  {t.fullDashboard}
+                  <ArrowRight aria-hidden="true" className="size-4" />
+                </LandingTrackedLink>
+              </div>
             </div>
-          </Card>
+            <div>
+              <p className="text-sm leading-6 text-muted-foreground">{t.platformCoverage}</p>
+              {/* Per-model entry points — crawlable links to the indexable
+                  /inference/<model> pages. Only actively benchmarked models are
+                  promoted here; deprecated model pages stay reachable via the
+                  sitemap and dashboard selector. */}
+              <p className="mt-8 text-sm font-medium text-foreground">{t.browseByModel}</p>
+              <div className="mt-3 flex flex-wrap gap-2" data-testid="landing-model-links">
+                {ACTIVE_INFERENCE_MODEL_SLUGS.map((entry) => (
+                  <LandingTrackedLink
+                    key={entry.slug}
+                    href={`${prefix}/inference/${entry.slug}`}
+                    data-testid={`landing-model-link-${entry.slug}`}
+                    analyticsEvent="landing_model_page_clicked"
+                    appNavigation
+                    className="inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-4 py-2 text-sm font-medium text-foreground transition-colors hover:border-brand/60 hover:bg-accent"
+                  >
+                    {entry.seoName}
+                    <ArrowUpRight aria-hidden="true" className="size-3.5 text-muted-foreground" />
+                  </LandingTrackedLink>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
 
-          {/* Reproducibility callout */}
-          <Card>
-            <div className="flex items-center gap-2 mb-3">
-              <ShieldCheck className="size-5 shrink-0 text-brand" />
-              <h2 className="text-lg font-semibold">{t.reproTitle}</h2>
+        {/* Reproducibility — stat callout plus three ruled columns. */}
+        <section className="border-t border-border py-12 md:py-16">
+          <p className="font-mono text-xs font-semibold tracking-[0.18em] text-brand uppercase">
+            {t.reproKicker}
+          </p>
+          <h2 className="mt-4 max-w-3xl text-3xl/9 font-semibold tracking-[-0.015em] text-foreground md:text-4xl/11">
+            {t.reproTitle}
+          </h2>
+          <div className="mt-8 grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)] lg:gap-16">
+            <p className="text-base leading-7 text-muted-foreground">{t.reproP1}</p>
+            <div className="border-t-2 border-brand pt-4">
+              <p className="text-4xl font-semibold tracking-tight text-foreground md:text-5xl">
+                {t.reproStat}
+              </p>
+              <p className="mt-2 text-sm leading-6 text-foreground">{t.reproStatUnit}</p>
+              <p className="mt-1 text-sm leading-6 text-muted-foreground">{t.reproStatTail}</p>
             </div>
-            <p className="text-sm text-muted-foreground mb-4">{t.reproP1}</p>
-            <p className="text-sm text-muted-foreground mb-4">
-              <span className="font-semibold text-foreground">{t.reproStat}</span> {t.reproStatTail}
-            </p>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
-              <div className="rounded-md border border-border bg-card p-3">
-                <div className="text-sm font-semibold text-foreground">{t.actionsRunsTitle}</div>
-                <div className="text-xs text-muted-foreground mt-1">{t.actionsRunsDesc}</div>
-              </div>
-              <div className="rounded-md border border-border bg-card p-3">
-                <div className="text-sm font-semibold text-foreground">{t.openRecipesTitle}</div>
-                <div className="text-xs text-muted-foreground mt-1">{t.openRecipesDesc}</div>
-              </div>
-              <div className="rounded-md border border-border bg-card p-3">
-                <div className="text-sm font-semibold text-foreground">{t.dbSnapshotsTitle}</div>
-                <div className="text-xs text-muted-foreground mt-1">{t.dbSnapshotsDesc}</div>
-              </div>
+          </div>
+          <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-3">
+            <div className="border-t border-border pt-4">
+              <h3 className="text-base font-semibold text-foreground">{t.actionsRunsTitle}</h3>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">{t.actionsRunsDesc}</p>
+            </div>
+            <div className="border-t border-border pt-4">
+              <h3 className="text-base font-semibold text-foreground">{t.openRecipesTitle}</h3>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">{t.openRecipesDesc}</p>
             </div>
-            <div className="flex flex-wrap gap-3 text-sm">
-              <LandingTrackedLink
-                href={`${prefix}/submissions`}
-                data-testid="landing-submissions-link"
-                analyticsEvent="landing_submissions_clicked"
-                appNavigation
-                className="inline-flex items-center gap-1.5 rounded-md bg-brand text-primary-foreground hover:bg-brand/90 px-3 py-1.5 transition-colors font-medium"
-              >
-                {t.browseSubmissions}
-                <ArrowRight className="size-3.5" />
-              </LandingTrackedLink>
-              <LandingTrackedLink
-                href={`https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}/actions?query=branch%3Amain+event%3Apush`}
-                target="_blank"
-                rel="noopener noreferrer"
-                analyticsEvent="landing_reproducibility_actions_clicked"
-                className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 hover:bg-accent transition-colors"
-              >
-                {t.viewRuns}
-                <ArrowRight className="size-3.5" />
-              </LandingTrackedLink>
-              <LandingTrackedLink
-                href={`${prefix}/about#reproducibility`}
-                analyticsEvent="landing_reproducibility_about_clicked"
-                className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 hover:bg-accent transition-colors"
-              >
-                {t.howItWorks}
-              </LandingTrackedLink>
+            <div className="border-t border-border pt-4">
+              <h3 className="text-base font-semibold text-foreground">{t.dbSnapshotsTitle}</h3>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">{t.dbSnapshotsDesc}</p>
             </div>
-          </Card>
+          </div>
+          <div className="mt-10 flex flex-wrap items-center gap-3">
+            <LandingTrackedLink
+              href={`${prefix}/submissions`}
+              data-testid="landing-submissions-link"
+              analyticsEvent="landing_submissions_clicked"
+              appNavigation
+              className="inline-flex min-h-11 items-center gap-2 rounded-full bg-mint px-6 py-2.5 text-sm font-semibold text-mint-foreground transition-[filter] hover:brightness-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              {t.browseSubmissions}
+              <ArrowRight aria-hidden="true" className="size-4" />
+            </LandingTrackedLink>
+            <LandingTrackedLink
+              href={`https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}/actions?query=branch%3Amain+event%3Apush`}
+              target="_blank"
+              rel="noopener noreferrer"
+              analyticsEvent="landing_reproducibility_actions_clicked"
+              className="inline-flex min-h-11 items-center gap-2 rounded-full border border-border bg-card px-6 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
+            >
+              {t.viewRuns}
+              <ArrowUpRight aria-hidden="true" className="size-4" />
+            </LandingTrackedLink>
+            <LandingTrackedLink
+              href={`${prefix}/about#reproducibility`}
+              analyticsEvent="landing_reproducibility_about_clicked"
+              className="inline-flex min-h-11 items-center gap-2 rounded-full border border-border bg-card px-6 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
+            >
+              {t.howItWorks}
+              <ArrowRight aria-hidden="true" className="size-4" />
+            </LandingTrackedLink>
+          </div>
+        </section>
 
-          {/* Right - Curated Presets (temporarily hidden, see SHOW_QUICK_COMPARISONS) */}
-          {SHOW_QUICK_COMPARISONS && (
+        {/* Right - Curated Presets (temporarily hidden, see SHOW_QUICK_COMPARISONS) */}
+        {SHOW_QUICK_COMPARISONS && (
+          <section className="border-t border-border py-12 md:py-16">
             <Card data-testid="landing-quick-comparisons">
               <div className="flex items-center gap-2 mb-3">
                 <Sparkles className="size-5 shrink-0 text-brand" />
@@ -218,8 +243,8 @@ export function LandingPage({ locale = 'en' }: { locale?: Locale } = {}) {
                 ))}
               </div>
             </Card>
-          )}
-        </section>
+          </section>
+        )}
       </div>
     </main>
   );
diff --git a/packages/app/src/components/ui/card.tsx b/packages/app/src/components/ui/card.tsx
index 411dc5b55..2f584a6b3 100644
--- a/packages/app/src/components/ui/card.tsx
+++ b/packages/app/src/components/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card"
       className={cn(
-        'bg-background/20 backdrop-blur-[2px] text-card-foreground flex flex-col rounded-xl border border-border/40 p-4 md:p-8',
+        'bg-card text-card-foreground flex flex-col rounded-xl border border-border p-4 md:p-8',
         className,
       )}
       {...props}