diff --git a/client/src/modules/landing/LandingPage.tsx b/client/src/modules/landing/LandingPage.tsx
index d84640d..ed13435 100644
--- a/client/src/modules/landing/LandingPage.tsx
+++ b/client/src/modules/landing/LandingPage.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 import { Link } from "react-router-dom";
 
 type LandingVariant = "light" | "dark";
@@ -49,275 +50,329 @@ const spotlightBoard = [
   { title: "Shipments due today", value: "9", change: "4 already packed", tone: "brand" },
 ];
 
+function getThemeVars(variant: LandingVariant): CSSProperties {
+  const vars = variant === "dark"
+    ? {
+        colorScheme: "dark",
+        "--color-brand": "88 150 255",
+        "--color-accent": "44 214 199",
+        "--color-surface-brand": "18 30 52",
+        "--color-surface": "10 20 38",
+        "--color-page": "3 10 24",
+        "--color-text": "236 241 255",
+        "--color-muted": "150 168 194",
+        "--color-line": "68 87 120",
+      }
+    : {
+        colorScheme: "light",
+        "--color-brand": "29 78 216",
+        "--color-accent": "13 148 136",
+        "--color-surface-brand": "244 247 251",
+        "--color-surface": "244 247 251",
+        "--color-page": "239 244 255",
+        "--color-text": "15 23 42",
+        "--color-muted": "92 111 139",
+        "--color-line": "196 210 233",
+      };
+
+  return vars as CSSProperties;
+}
+
+function panelClass(isDark: boolean) {
+  return isDark
+    ? "border-white/12 bg-white/[0.07] shadow-[0_30px_90px_rgba(2,6,23,0.52)]"
+    : "border-white/60 bg-white/[0.48] shadow-[0_30px_90px_rgba(37,99,235,0.14)]";
+}
+
+function softPanelClass(isDark: boolean) {
+  return isDark
+    ? "border-white/10 bg-white/[0.06] shadow-[0_20px_60px_rgba(2,6,23,0.4)]"
+    : "border-white/55 bg-white/[0.42] shadow-[0_18px_50px_rgba(37,99,235,0.1)]";
+}
+
+function chipClass(isDark: boolean) {
+  return isDark ? "border-white/15 bg-white/[0.08]" : "border-white/60 bg-white/[0.52]";
+}
+
 function LandingExperience({ variant }: { variant: LandingVariant }) {
   const isDark = variant === "dark";
-  const variantLabel = isDark ? "Dark landing" : "Landing";
+  const themeVars = getThemeVars(variant);
+  const variantLabel = isDark ? "Dark landing" : "Light landing";
   const altRoute = isDark ? "/landing" : "/darklanding";
   const altLabel = isDark ? "View light version" : "View dark version";
 
   return (
-    <div className={isDark ? "dark" : undefined}>
-      <div id="top" className="min-h-screen bg-page text-text">
-        <div className="relative overflow-hidden">
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(var(--color-brand),0.34),transparent_28%),radial-gradient(circle_at_78%_18%,rgba(var(--color-accent),0.28),transparent_24%),linear-gradient(180deg,rgba(255,255,255,0.08),transparent_45%)] dark:bg-[radial-gradient(circle_at_top_left,rgba(var(--color-brand),0.22),transparent_30%),radial-gradient(circle_at_78%_18%,rgba(var(--color-accent),0.18),transparent_26%),linear-gradient(180deg,rgba(255,255,255,0.02),transparent_45%)]" />
-          <div className="absolute left-[-12%] top-24 h-72 w-72 rounded-full bg-[rgb(var(--color-brand)/0.16)] blur-3xl dark:bg-[rgb(var(--color-brand)/0.22)]" />
-          <div className="absolute right-[-8%] top-40 h-96 w-96 rounded-full bg-[rgb(var(--color-accent)/0.14)] blur-3xl dark:bg-[rgb(var(--color-accent)/0.18)]" />
+    <div id="top" style={themeVars} className="min-h-screen bg-page text-text">
+      <div className="relative overflow-hidden">
+        <div
+          className={`absolute inset-0 ${
+            isDark
+              ? "bg-[radial-gradient(circle_at_12%_10%,rgba(88,150,255,0.28),transparent_26%),radial-gradient(circle_at_82%_18%,rgba(44,214,199,0.2),transparent_24%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent_42%)]"
+              : "bg-[radial-gradient(circle_at_12%_10%,rgba(59,130,246,0.24),transparent_28%),radial-gradient(circle_at_82%_18%,rgba(20,184,166,0.18),transparent_24%),linear-gradient(180deg,rgba(255,255,255,0.72),rgba(255,255,255,0.08)_42%,transparent_60%)]"
+          }`}
+        />
+        <div className={`absolute left-[-8%] top-20 h-80 w-80 rounded-full blur-3xl ${isDark ? "bg-sky-400/20" : "bg-blue-300/40"}`} />
+        <div className={`absolute right-[-10%] top-32 h-[28rem] w-[28rem] rounded-full blur-3xl ${isDark ? "bg-teal-300/16" : "bg-cyan-200/50"}`} />
+        <div className={`absolute left-[22%] top-[32rem] h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-indigo-400/10" : "bg-violet-200/35"}`} />
 
-          <div className="relative mx-auto flex w-full max-w-7xl flex-col gap-12 px-6 pb-20 pt-8 lg:px-8">
-            <header className="flex flex-col gap-4 rounded-[28px] border border-line/60 bg-surface/70 px-5 py-4 shadow-[0_30px_80px_rgba(15,23,42,0.12)] backdrop-blur xl:flex-row xl:items-center xl:justify-between dark:shadow-[0_30px_80px_rgba(2,6,23,0.45)]">
-              <div className="flex items-center gap-4">
-                <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] text-lg font-black tracking-[0.18em] text-white">
-                  CX
-                </div>
-                <div>
-                  <div className="text-xs font-semibold uppercase tracking-[0.34em] text-muted">CODEXIUM</div>
-                  <div className="text-sm text-muted">Manufacturing resource planning without the ERP drag.</div>
-                </div>
+        <div className="relative mx-auto flex w-full max-w-7xl flex-col gap-12 px-6 pb-20 pt-8 lg:px-8">
+          <header className={`flex flex-col gap-4 rounded-[30px] border px-5 py-4 backdrop-blur-2xl xl:flex-row xl:items-center xl:justify-between ${panelClass(isDark)}`}>
+            <div className="flex items-center gap-4">
+              <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] text-lg font-black tracking-[0.18em] text-white">
+                CX
               </div>
-              <div className="flex flex-wrap items-center gap-3">
-                <span className="rounded-2xl border border-line/70 px-4 py-2 text-sm font-semibold text-text">
-                  {variantLabel}
-                </span>
-                <Link to={altRoute} className="rounded-2xl border border-line/70 px-4 py-2 text-sm font-semibold text-text transition hover:bg-page/70">
-                  {altLabel}
-                </Link>
-                <Link to="/login" className="rounded-2xl border border-line/70 px-4 py-2 text-sm font-semibold text-text transition hover:bg-page/70">
-                  Open app
-                </Link>
-                <a
-                  href="#contact"
-                  className="rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] px-4 py-2 text-sm font-semibold text-white shadow-[0_18px_40px_rgba(24,90,219,0.28)]"
-                >
-                  Book a walkthrough
-                </a>
-              </div>
-            </header>
-
-            <section className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
               <div>
-                <div className="inline-flex items-center gap-2 rounded-full border border-line/70 bg-surface/75 px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-muted backdrop-blur">
-                  Built for discrete manufacturing teams
-                </div>
-                <h1 className="mt-6 max-w-4xl font-['Space_Grotesk','Manrope',sans-serif] text-5xl font-black leading-[0.95] tracking-[-0.05em] text-text sm:text-6xl xl:text-7xl">
-                  A sharper MRP for operators who need flow, not ERP theater.
-                </h1>
-                <p className="mt-6 max-w-2xl text-lg leading-8 text-muted">
-                  CODEXIUM connects commercial demand, inventory truth, project execution, purchasing, shipping, and manufacturing control in one system designed to move work across the floor.
-                </p>
-
-                <div className="mt-8 grid gap-3 sm:grid-cols-3">
-                  {heroMetrics.map((metric) => (
-                    <article key={metric.label} className="rounded-[24px] border border-line/70 bg-surface/80 p-4 shadow-[0_20px_50px_rgba(15,23,42,0.1)] backdrop-blur dark:shadow-[0_20px_50px_rgba(2,6,23,0.4)]">
-                      <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{metric.label}</div>
-                      <div className="mt-3 text-3xl font-black tracking-[-0.04em] text-text">{metric.value}</div>
-                      <div className="mt-2 text-sm text-muted">{metric.detail}</div>
-                    </article>
-                  ))}
-                </div>
+                <div className="text-xs font-semibold uppercase tracking-[0.34em] text-muted">CODEXIUM</div>
+                <div className="text-sm text-muted">Manufacturing resource planning without the ERP drag.</div>
               </div>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              <span className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text backdrop-blur-xl ${chipClass(isDark)}`}>
+                {variantLabel}
+              </span>
+              <Link to={altRoute} className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
+                {altLabel}
+              </Link>
+              <Link to="/login" className={`rounded-2xl border px-4 py-2 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
+                Open app
+              </Link>
+              <a
+                href="#contact"
+                className="rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] px-4 py-2 text-sm font-semibold text-white shadow-[0_18px_40px_rgba(24,90,219,0.28)]"
+              >
+                Book a walkthrough
+              </a>
+            </div>
+          </header>
 
-              <div className="relative">
-                <div className="absolute -left-8 top-10 hidden h-20 w-20 rounded-[28px] border border-white/20 bg-white/10 blur-sm lg:block" />
-                <div className="rounded-[32px] border border-line/70 bg-[linear-gradient(160deg,rgba(255,255,255,0.68),rgba(255,255,255,0.24))] p-5 shadow-[0_35px_90px_rgba(15,23,42,0.18)] backdrop-blur dark:bg-[linear-gradient(160deg,rgba(15,23,42,0.82),rgba(15,23,42,0.48))] dark:shadow-[0_35px_90px_rgba(2,6,23,0.55)]">
-                  <div className="rounded-[28px] border border-line/70 bg-page/85 p-5">
-                    <div className="flex flex-wrap items-center justify-between gap-3">
-                      <div>
-                        <div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Generated executive board</div>
-                        <div className="mt-2 text-2xl font-black tracking-[-0.04em] text-text">This week in operations</div>
+          <section className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+            <div>
+              <div className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-xs font-semibold uppercase tracking-[0.24em] text-muted backdrop-blur-2xl ${chipClass(isDark)}`}>
+                Built for discrete manufacturing teams
+              </div>
+              <h1 className="mt-6 max-w-4xl font-['Space_Grotesk','Manrope',sans-serif] text-5xl font-black leading-[0.95] tracking-[-0.05em] text-text sm:text-6xl xl:text-7xl">
+                A sharper MRP for operators who need flow, not ERP theater.
+              </h1>
+              <p className="mt-6 max-w-2xl text-lg leading-8 text-muted">
+                CODEXIUM connects commercial demand, inventory truth, project execution, purchasing, shipping, and manufacturing control in one system designed to move work across the floor.
+              </p>
+
+              <div className="mt-8 grid gap-3 sm:grid-cols-3">
+                {heroMetrics.map((metric) => (
+                  <article key={metric.label} className={`rounded-[26px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                    <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{metric.label}</div>
+                    <div className="mt-3 text-3xl font-black tracking-[-0.04em] text-text">{metric.value}</div>
+                    <div className="mt-2 text-sm text-muted">{metric.detail}</div>
+                  </article>
+                ))}
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className={`absolute -left-8 top-10 hidden h-24 w-24 rounded-[30px] border backdrop-blur-2xl lg:block ${isDark ? "border-white/10 bg-white/[0.06]" : "border-white/60 bg-white/[0.3]"}`} />
+              <div className={`rounded-[34px] border p-5 backdrop-blur-3xl ${panelClass(isDark)}`}>
+                <div className={`rounded-[30px] border p-5 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <div>
+                      <div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Generated executive board</div>
+                      <div className="mt-2 text-2xl font-black tracking-[-0.04em] text-text">This week in operations</div>
+                    </div>
+                    <div className="rounded-full border border-emerald-400/35 bg-emerald-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-300">
+                      Live-ready demo data
+                    </div>
+                  </div>
+
+                  <div className="mt-5 grid gap-3 sm:grid-cols-2">
+                    {spotlightBoard.map((card) => (
+                      <article
+                        key={card.title}
+                        className={`rounded-[24px] border p-4 backdrop-blur-2xl ${
+                          card.tone === "brand"
+                            ? isDark
+                              ? "border-blue-300/18 bg-blue-300/10"
+                              : "border-blue-400/25 bg-blue-400/10"
+                            : card.tone === "accent"
+                              ? isDark
+                                ? "border-teal-300/18 bg-teal-300/10"
+                                : "border-teal-400/25 bg-teal-400/10"
+                              : softPanelClass(isDark)
+                        }`}
+                      >
+                        <div className="text-sm font-semibold text-muted">{card.title}</div>
+                        <div className="mt-3 text-4xl font-black tracking-[-0.05em] text-text">{card.value}</div>
+                        <div className="mt-2 text-sm text-muted">{card.change}</div>
+                      </article>
+                    ))}
+                  </div>
+
+                  <div className="mt-5 grid gap-3 xl:grid-cols-[1.3fr_0.7fr]">
+                    <div className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="text-sm font-semibold text-text">Project and manufacturing pulse</div>
+                        <div className="text-xs uppercase tracking-[0.18em] text-muted">Generated snapshot</div>
                       </div>
-                      <div className="rounded-full border border-emerald-400/35 bg-emerald-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-300">
-                        Live-ready demo data
+                      <div className="mt-4 space-y-3">
+                        {[
+                          { label: "Falcon enclosure program", progress: 86, status: "Ready for final assembly" },
+                          { label: "Orion service kit launch", progress: 61, status: "Waiting on one purchased line" },
+                          { label: "Atlas retrofit release", progress: 43, status: "Routing review in progress" },
+                        ].map((row) => (
+                          <div key={row.label} className={`rounded-[20px] border p-3 backdrop-blur-2xl ${isDark ? "border-white/10 bg-white/[0.05]" : "border-white/55 bg-white/[0.35]"}`}>
+                            <div className="flex flex-wrap items-center justify-between gap-2">
+                              <div className="font-semibold text-text">{row.label}</div>
+                              <div className="text-xs uppercase tracking-[0.18em] text-muted">{row.progress}%</div>
+                            </div>
+                            <div className={`mt-3 h-2 overflow-hidden rounded-full ${isDark ? "bg-white/10" : "bg-slate-200/80"}`}>
+                              <div
+                                className="h-full rounded-full bg-[linear-gradient(90deg,rgb(var(--color-brand)),rgb(var(--color-accent)))]"
+                                style={{ width: `${row.progress}%` }}
+                              />
+                            </div>
+                            <div className="mt-2 text-sm text-muted">{row.status}</div>
+                          </div>
+                        ))}
                       </div>
                     </div>
 
-                    <div className="mt-5 grid gap-3 sm:grid-cols-2">
-                      {spotlightBoard.map((card) => (
-                        <article
-                          key={card.title}
-                          className={`rounded-[24px] border p-4 ${
-                            card.tone === "brand"
-                              ? "border-[rgb(var(--color-brand)/0.25)] bg-[rgb(var(--color-brand)/0.08)]"
-                              : card.tone === "accent"
-                                ? "border-[rgb(var(--color-accent)/0.25)] bg-[rgb(var(--color-accent)/0.08)]"
-                                : "border-line/70 bg-surface/70"
-                          }`}
-                        >
-                          <div className="text-sm font-semibold text-muted">{card.title}</div>
-                          <div className="mt-3 text-4xl font-black tracking-[-0.05em] text-text">{card.value}</div>
-                          <div className="mt-2 text-sm text-muted">{card.change}</div>
-                        </article>
-                      ))}
-                    </div>
-
-                    <div className="mt-5 grid gap-3 xl:grid-cols-[1.3fr_0.7fr]">
-                      <div className="rounded-[24px] border border-line/70 bg-surface/80 p-4">
-                        <div className="flex items-center justify-between gap-3">
-                          <div className="text-sm font-semibold text-text">Project and manufacturing pulse</div>
-                          <div className="text-xs uppercase tracking-[0.18em] text-muted">Generated snapshot</div>
-                        </div>
-                        <div className="mt-4 space-y-3">
-                          {[
-                            { label: "Falcon enclosure program", progress: 86, status: "Ready for final assembly" },
-                            { label: "Orion service kit launch", progress: 61, status: "Waiting on one purchased line" },
-                            { label: "Atlas retrofit release", progress: 43, status: "Routing review in progress" },
-                          ].map((row) => (
-                            <div key={row.label} className="rounded-[20px] border border-line/60 bg-page/75 p-3">
-                              <div className="flex flex-wrap items-center justify-between gap-2">
-                                <div className="font-semibold text-text">{row.label}</div>
-                                <div className="text-xs uppercase tracking-[0.18em] text-muted">{row.progress}%</div>
+                    <div className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                      <div className="text-sm font-semibold text-text">Supply signals</div>
+                      <div className="mt-4 space-y-3">
+                        {[
+                          { sku: "AXL-4472", action: "Build", qty: "18 EA" },
+                          { sku: "KIT-2208", action: "Buy", qty: "240 EA" },
+                          { sku: "CAB-9031", action: "Transfer", qty: "64 EA" },
+                        ].map((signal) => (
+                          <div key={signal.sku} className={`rounded-[18px] border px-3 py-3 backdrop-blur-2xl ${isDark ? "border-white/10 bg-white/[0.05]" : "border-white/55 bg-white/[0.35]"}`}>
+                            <div className="flex items-center justify-between gap-3">
+                              <div>
+                                <div className="font-semibold text-text">{signal.sku}</div>
+                                <div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted">{signal.action} recommendation</div>
                               </div>
-                              <div className="mt-3 h-2 overflow-hidden rounded-full bg-line/70">
-                                <div
-                                  className="h-full rounded-full bg-[linear-gradient(90deg,rgb(var(--color-brand)),rgb(var(--color-accent)))]"
-                                  style={{ width: `${row.progress}%` }}
-                                />
-                              </div>
-                              <div className="mt-2 text-sm text-muted">{row.status}</div>
+                              <div className="text-sm font-semibold text-text">{signal.qty}</div>
                             </div>
-                          ))}
-                        </div>
-                      </div>
-
-                      <div className="rounded-[24px] border border-line/70 bg-surface/80 p-4">
-                        <div className="text-sm font-semibold text-text">Supply signals</div>
-                        <div className="mt-4 space-y-3">
-                          {[
-                            { sku: "AXL-4472", action: "Build", qty: "18 EA" },
-                            { sku: "KIT-2208", action: "Buy", qty: "240 EA" },
-                            { sku: "CAB-9031", action: "Transfer", qty: "64 EA" },
-                          ].map((signal) => (
-                            <div key={signal.sku} className="rounded-[18px] border border-line/60 bg-page/75 px-3 py-3">
-                              <div className="flex items-center justify-between gap-3">
-                                <div>
-                                  <div className="font-semibold text-text">{signal.sku}</div>
-                                  <div className="mt-1 text-xs uppercase tracking-[0.18em] text-muted">{signal.action} recommendation</div>
-                                </div>
-                                <div className="text-sm font-semibold text-text">{signal.qty}</div>
-                              </div>
-                            </div>
-                          ))}
-                        </div>
+                          </div>
+                        ))}
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </section>
+            </div>
+          </section>
 
-            <section className="grid gap-4 rounded-[32px] border border-line/70 bg-surface/70 p-6 shadow-[0_25px_70px_rgba(15,23,42,0.14)] backdrop-blur dark:shadow-[0_25px_70px_rgba(2,6,23,0.45)] lg:grid-cols-3">
-              {proofCards.map((card) => (
-                <article key={card.label} className="rounded-[24px] border border-line/60 bg-page/70 p-4">
-                  <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.label}</div>
-                  <div className="mt-3 text-5xl font-black tracking-[-0.06em] text-text">{card.value}</div>
-                  <div className="mt-2 text-sm text-muted">{card.note}</div>
-                </article>
-              ))}
-            </section>
-          </div>
-        </div>
-
-        <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 pb-24 lg:px-8">
-          <section className="grid gap-6 lg:grid-cols-3">
-            {moduleCards.map((card) => (
-              <article key={card.title} className="rounded-[28px] border border-line/70 bg-surface/85 p-6 shadow-[0_25px_65px_rgba(15,23,42,0.1)] dark:shadow-[0_25px_65px_rgba(2,6,23,0.38)]">
-                <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.eyebrow}</div>
-                <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-2xl font-bold tracking-[-0.04em] text-text">{card.title}</h2>
-                <p className="mt-4 text-sm leading-7 text-muted">{card.copy}</p>
-                <div className="mt-6 flex flex-wrap gap-2">
-                  {card.bullets.map((bullet) => (
-                    <span key={bullet} className="rounded-full border border-line/70 bg-page/70 px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-text">
-                      {bullet}
-                    </span>
-                  ))}
-                </div>
+          <section className={`grid gap-4 rounded-[32px] border p-6 backdrop-blur-3xl lg:grid-cols-3 ${panelClass(isDark)}`}>
+            {proofCards.map((card) => (
+              <article key={card.label} className={`rounded-[24px] border p-4 backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.label}</div>
+                <div className="mt-3 text-5xl font-black tracking-[-0.06em] text-text">{card.value}</div>
+                <div className="mt-2 text-sm text-muted">{card.note}</div>
               </article>
             ))}
           </section>
+        </div>
+      </div>
 
-          <section className="grid gap-8 rounded-[32px] border border-line/70 bg-surface/80 p-6 shadow-[0_30px_75px_rgba(15,23,42,0.12)] dark:shadow-[0_30px_75px_rgba(2,6,23,0.42)] lg:grid-cols-[0.9fr_1.1fr]">
-            <div>
-              <div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">How it moves</div>
-              <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
-                One demand signal. One operating picture.
-              </h2>
-              <p className="mt-4 max-w-xl text-base leading-8 text-muted">
-                Most systems split quoting, planning, purchasing, inventory, shipping, and production into separate stories. CODEXIUM treats them as one chain, so each step inherits context instead of creating reconciliation work.
-              </p>
-            </div>
-
-            <div className="space-y-4">
-              {timeline.map((step) => (
-                <article key={step.time} className="grid gap-4 rounded-[24px] border border-line/70 bg-page/75 p-4 md:grid-cols-[92px_1fr] md:items-start">
-                  <div className="rounded-[18px] bg-[linear-gradient(135deg,rgb(var(--color-brand)/0.16),rgb(var(--color-accent)/0.18))] px-4 py-3 text-center">
-                    <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Time</div>
-                    <div className="mt-1 text-2xl font-black tracking-[-0.04em] text-text">{step.time}</div>
-                  </div>
-                  <div>
-                    <div className="text-lg font-bold text-text">{step.title}</div>
-                    <div className="mt-2 text-sm leading-7 text-muted">{step.detail}</div>
-                  </div>
-                </article>
-              ))}
-            </div>
-          </section>
-
-          <section className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
-            <article className="rounded-[32px] border border-line/70 bg-[linear-gradient(135deg,rgb(var(--color-brand)/0.1),rgb(var(--color-accent)/0.08),rgb(var(--color-surface)))] p-6 shadow-[0_30px_75px_rgba(15,23,42,0.12)] dark:shadow-[0_30px_75px_rgba(2,6,23,0.42)]">
-              <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Who this is for</div>
-              <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
-                Teams graduating from spreadsheets, generic ERPs, or disconnected point tools.
-              </h2>
-              <div className="mt-6 grid gap-4 md:grid-cols-2">
-                {[
-                  "Contract manufacturers that need real-time supply readiness before promising dates.",
-                  "OEM operations teams that need projects, BOMs, purchasing, and work orders linked end to end.",
-                  "Growing production shops that want branding, PDFs, approvals, and auditability without enterprise bloat.",
-                  "Leaders who want a system operators will actually open all day, not just during month-end cleanup.",
-                ].map((statement) => (
-                  <div key={statement} className="rounded-[22px] border border-line/60 bg-page/70 p-4 text-sm leading-7 text-text">
-                    {statement}
-                  </div>
+      <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-6 pb-24 lg:px-8">
+        <section className="grid gap-6 lg:grid-cols-3">
+          {moduleCards.map((card) => (
+            <article key={card.title} className={`rounded-[30px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
+              <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">{card.eyebrow}</div>
+              <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-2xl font-bold tracking-[-0.04em] text-text">{card.title}</h2>
+              <p className="mt-4 text-sm leading-7 text-muted">{card.copy}</p>
+              <div className="mt-6 flex flex-wrap gap-2">
+                {card.bullets.map((bullet) => (
+                  <span key={bullet} className={`rounded-full border px-3 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-text backdrop-blur-xl ${chipClass(isDark)}`}>
+                    {bullet}
+                  </span>
                 ))}
               </div>
             </article>
+          ))}
+        </section>
 
-            <article id="contact" className="rounded-[32px] border border-line/70 bg-surface/85 p-6 shadow-[0_30px_75px_rgba(15,23,42,0.12)] dark:shadow-[0_30px_75px_rgba(2,6,23,0.42)]">
-              <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Next step</div>
-              <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-3xl font-black tracking-[-0.05em] text-text">
-                Pitch the platform with a page that already looks production-grade.
-              </h2>
-              <p className="mt-4 text-sm leading-7 text-muted">
-                Use this route as a commercial front door, demo backdrop, or customer-facing preview while the core app remains focused on execution.
-              </p>
-              <div className="mt-6 space-y-3 rounded-[24px] border border-line/70 bg-page/75 p-4 text-sm text-muted">
-                <div className="flex items-center justify-between gap-3">
-                  <span>Public route</span>
-                  <span className="font-semibold text-text">{isDark ? "/darklanding" : "/landing"}</span>
+        <section className={`grid gap-8 rounded-[32px] border p-6 backdrop-blur-3xl lg:grid-cols-[0.9fr_1.1fr] ${panelClass(isDark)}`}>
+          <div>
+            <div className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">How it moves</div>
+            <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
+              One demand signal. One operating picture.
+            </h2>
+            <p className="mt-4 max-w-xl text-base leading-8 text-muted">
+              Most systems split quoting, planning, purchasing, inventory, shipping, and production into separate stories. CODEXIUM treats them as one chain, so each step inherits context instead of creating reconciliation work.
+            </p>
+          </div>
+
+          <div className="space-y-4">
+            {timeline.map((step) => (
+              <article key={step.time} className={`grid gap-4 rounded-[24px] border p-4 backdrop-blur-2xl md:grid-cols-[92px_1fr] md:items-start ${softPanelClass(isDark)}`}>
+                <div className={`rounded-[18px] px-4 py-3 text-center ${isDark ? "bg-white/[0.08]" : "bg-white/[0.55]"}`}>
+                  <div className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Time</div>
+                  <div className="mt-1 text-2xl font-black tracking-[-0.04em] text-text">{step.time}</div>
                 </div>
-                <div className="flex items-center justify-between gap-3">
-                  <span>Core positioning</span>
-                  <span className="font-semibold text-text">Modern manufacturing MRP</span>
+                <div>
+                  <div className="text-lg font-bold text-text">{step.title}</div>
+                  <div className="mt-2 text-sm leading-7 text-muted">{step.detail}</div>
                 </div>
-                <div className="flex items-center justify-between gap-3">
-                  <span>Demo style</span>
-                  <span className="font-semibold text-text">Generated commercial data</span>
+              </article>
+            ))}
+          </div>
+        </section>
+
+        <section className="grid gap-6 lg:grid-cols-[1.15fr_0.85fr]">
+          <article className={`rounded-[32px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
+            <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Who this is for</div>
+            <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-4xl font-black tracking-[-0.05em] text-text">
+              Teams graduating from spreadsheets, generic ERPs, or disconnected point tools.
+            </h2>
+            <div className="mt-6 grid gap-4 md:grid-cols-2">
+              {[
+                "Contract manufacturers that need real-time supply readiness before promising dates.",
+                "OEM operations teams that need projects, BOMs, purchasing, and work orders linked end to end.",
+                "Growing production shops that want branding, PDFs, approvals, and auditability without enterprise bloat.",
+                "Leaders who want a system operators will actually open all day, not just during month-end cleanup.",
+              ].map((statement) => (
+                <div key={statement} className={`rounded-[22px] border p-4 text-sm leading-7 text-text backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+                  {statement}
                 </div>
+              ))}
+            </div>
+          </article>
+
+          <article id="contact" className={`rounded-[32px] border p-6 backdrop-blur-3xl ${panelClass(isDark)}`}>
+            <div className="text-xs font-semibold uppercase tracking-[0.22em] text-muted">Next step</div>
+            <h2 className="mt-4 font-['Space_Grotesk','Manrope',sans-serif] text-3xl font-black tracking-[-0.05em] text-text">
+              Pitch the platform with a page that already looks production-grade.
+            </h2>
+            <p className="mt-4 text-sm leading-7 text-muted">
+              Use this route as a commercial front door, demo backdrop, or customer-facing preview while the core app remains focused on execution.
+            </p>
+            <div className={`mt-6 space-y-3 rounded-[24px] border p-4 text-sm text-muted backdrop-blur-2xl ${softPanelClass(isDark)}`}>
+              <div className="flex items-center justify-between gap-3">
+                <span>Public route</span>
+                <span className="font-semibold text-text">{isDark ? "/darklanding" : "/landing"}</span>
               </div>
-              <div className="mt-6 flex flex-wrap gap-3">
-                <Link
-                  to="/login"
-                  className="rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] px-4 py-3 text-sm font-semibold text-white shadow-[0_18px_40px_rgba(24,90,219,0.28)]"
-                >
-                  Enter the app
-                </Link>
-                <a href="#top" className="rounded-2xl border border-line/70 px-4 py-3 text-sm font-semibold text-text transition hover:bg-page/70">
-                  Back to top
-                </a>
+              <div className="flex items-center justify-between gap-3">
+                <span>Core positioning</span>
+                <span className="font-semibold text-text">Modern manufacturing MRP</span>
               </div>
-            </article>
-          </section>
-        </main>
-      </div>
+              <div className="flex items-center justify-between gap-3">
+                <span>Demo style</span>
+                <span className="font-semibold text-text">Generated commercial data</span>
+              </div>
+            </div>
+            <div className="mt-6 flex flex-wrap gap-3">
+              <Link
+                to="/login"
+                className="rounded-2xl bg-[linear-gradient(135deg,rgb(var(--color-brand)),rgb(var(--color-accent)))] px-4 py-3 text-sm font-semibold text-white shadow-[0_18px_40px_rgba(24,90,219,0.28)]"
+              >
+                Enter the app
+              </Link>
+              <a href="#top" className={`rounded-2xl border px-4 py-3 text-sm font-semibold text-text transition hover:bg-white/10 backdrop-blur-xl ${chipClass(isDark)}`}>
+                Back to top
+              </a>
+            </div>
+          </article>
+        </section>
+      </main>
     </div>
   );
 }