diff --git a/index.html b/index.html
index 7cc676c..066d3ba 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,20 @@
     />
     <meta name="twitter:image" content="https://cadviewer.xyz/og-image.png" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link
+      rel="preload"
+      href="/fonts/ibm-plex-sans-400.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/ibm-plex-sans-500.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
diff --git a/public/fonts/ibm-plex-mono-400.woff2 b/public/fonts/ibm-plex-mono-400.woff2
new file mode 100644
index 0000000..a6c77d6
Binary files /dev/null and b/public/fonts/ibm-plex-mono-400.woff2 differ
diff --git a/public/fonts/ibm-plex-mono-500.woff2 b/public/fonts/ibm-plex-mono-500.woff2
new file mode 100644
index 0000000..99c2610
Binary files /dev/null and b/public/fonts/ibm-plex-mono-500.woff2 differ
diff --git a/public/fonts/ibm-plex-sans-400.woff2 b/public/fonts/ibm-plex-sans-400.woff2
new file mode 100644
index 0000000..f0ee65d
Binary files /dev/null and b/public/fonts/ibm-plex-sans-400.woff2 differ
diff --git a/public/fonts/ibm-plex-sans-500.woff2 b/public/fonts/ibm-plex-sans-500.woff2
new file mode 100644
index 0000000..6d5527e
Binary files /dev/null and b/public/fonts/ibm-plex-sans-500.woff2 differ
diff --git a/public/hero/3d-model-render.png b/public/hero/3d-model-render.png
new file mode 100644
index 0000000..deac0b8
Binary files /dev/null and b/public/hero/3d-model-render.png differ
diff --git a/public/hero/generated-drawing.png b/public/hero/generated-drawing.png
new file mode 100644
index 0000000..0a50539
Binary files /dev/null and b/public/hero/generated-drawing.png differ
diff --git a/src/components/Accordion.module.css b/src/components/Accordion.module.css
new file mode 100644
index 0000000..f7a1a69
--- /dev/null
+++ b/src/components/Accordion.module.css
@@ -0,0 +1,89 @@
+.item {
+  position: relative;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0 1.5rem;
+  transition: border-color 0.14s ease-out;
+}
+
+.item:hover,
+.item:focus-within {
+  border-color: var(--color-blue-500);
+}
+
+.trigger {
+  width: 100%;
+  margin: 0;
+  padding: 1rem 0;
+  background: none;
+  border: none;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
+}
+
+.chevron {
+  flex: none;
+  color: var(--color-blue-500);
+  transition: transform 0.2s ease;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.plusIcon {
+  flex: none;
+  display: inline-block;
+  color: var(--color-blue-500);
+  font-size: 1.2rem;
+  line-height: 1;
+  transition: transform 0.2s ease;
+}
+
+.plusIconOpen {
+  transform: rotate(45deg);
+}
+
+.contentWrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease;
+}
+
+.contentOpen {
+  grid-template-rows: 1fr;
+}
+
+.contentInner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.answer {
+  margin: 0 0 1.25rem;
+  color: var(--color-ink-muted);
+  font-size: 0.95rem;
+  line-height: 1.65;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .contentWrap,
+  .chevron,
+  .plusIcon {
+    transition: none;
+  }
+}
diff --git a/src/components/AccordionItem.tsx b/src/components/AccordionItem.tsx
new file mode 100644
index 0000000..6a148c7
--- /dev/null
+++ b/src/components/AccordionItem.tsx
@@ -0,0 +1,77 @@
+// Shared FAQ accordion entry, used on Landing and both guide pages so the
+// open/close interaction (height transition + chevron rotation) is
+// identical everywhere instead of three copies of native <details> markup.
+// Each item opens/closes independently — no shared "only one open" state.
+import { useState, type ReactNode } from "react";
+import styles from "./Accordion.module.css";
+
+export default function AccordionItem({
+  question,
+  answer,
+  className,
+  icon = "chevron",
+  children,
+}: {
+  question: string;
+  answer: ReactNode;
+  className?: string;
+  /** "chevron" (default, used on the guide pages) rotates 180deg on open.
+   * "plus" (used on Landing) turns a + into a x at 45deg. */
+  icon?: "chevron" | "plus";
+  children?: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className={[styles.item, className].filter(Boolean).join(" ")}>
+      {children}
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-expanded={open}
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span>{question}</span>
+        {icon === "plus" ? (
+          <span
+            className={[styles.plusIcon, open ? styles.plusIconOpen : ""]
+              .filter(Boolean)
+              .join(" ")}
+            aria-hidden="true"
+          >
+            +
+          </span>
+        ) : (
+          <svg
+            className={[styles.chevron, open ? styles.chevronOpen : ""]
+              .filter(Boolean)
+              .join(" ")}
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M4 6 L8 10 L12 6"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        )}
+      </button>
+      <div
+        className={[styles.contentWrap, open ? styles.contentOpen : ""]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        <div className={styles.contentInner}>
+          <p className={styles.answer}>{answer}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/CornerMark.module.css b/src/components/CornerMark.module.css
new file mode 100644
index 0000000..07b4b8b
--- /dev/null
+++ b/src/components/CornerMark.module.css
@@ -0,0 +1,51 @@
+.mark {
+  display: block;
+  overflow: visible;
+}
+
+.stroke {
+  fill: none;
+  stroke: var(--color-blue-500);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.drawIn .stroke {
+  /* Both strokes in the mark are constructed to the same length (14 user
+   * units); 16 is a safe rounded-up dash length that fully hides the
+   * stroke before the draw-in animation starts. */
+  stroke-dasharray: 16;
+  stroke-dashoffset: 16;
+  animation: corner-draw-in 1.1s ease-out forwards;
+  animation-delay: var(--corner-mark-delay, 0ms);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawIn .stroke {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes corner-draw-in {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Hover "sharpen" state — applied by a parent card via .sharpen on hover/focus.
+ * Opacity/scale only, quick and precise, no bounce. */
+.mark {
+  opacity: 0.55;
+  transform: scale(0.94);
+  transition:
+    opacity 0.14s ease-out,
+    transform 0.14s ease-out;
+}
+
+:global(.cornerMarkSharpen):hover .mark,
+:global(.cornerMarkSharpen):focus-within .mark {
+  opacity: 1;
+  transform: scale(1);
+}
diff --git a/src/components/CornerMark.tsx b/src/components/CornerMark.tsx
new file mode 100644
index 0000000..463ca8d
--- /dev/null
+++ b/src/components/CornerMark.tsx
@@ -0,0 +1,65 @@
+import type { CSSProperties } from "react";
+import styles from "./CornerMark.module.css";
+
+export type CornerMarkCorner =
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+// Registration-mark style bracket: two strokes crossing at the corner
+// point, each overshooting slightly past the corner (into the margin)
+// the way the ISO centring marks on the generated drawing sheet cross
+// past the frame line — see GRID_REF_CENTRING_MARK_CROSS_MM in
+// drafting-rules.ts. This is a separate, decorative echo of that idea,
+// not a reproduction of the drawing sheet's own marks.
+const PATHS: Record<CornerMarkCorner, { h: string; v: string }> = {
+  "top-left": { h: "M2,6 H16", v: "M6,2 V16" },
+  "top-right": { h: "M22,6 H8", v: "M18,2 V16" },
+  "bottom-left": { h: "M2,18 H16", v: "M6,22 V8" },
+  "bottom-right": { h: "M22,18 H8", v: "M18,22 V8" },
+};
+
+const POSITION_STYLE: Record<CornerMarkCorner, CSSProperties> = {
+  "top-left": { top: 0, left: 0 },
+  "top-right": { top: 0, right: 0 },
+  "bottom-left": { bottom: 0, left: 0 },
+  "bottom-right": { bottom: 0, right: 0 },
+};
+
+export default function CornerMark({
+  size = 24,
+  corner,
+  animate = false,
+  delay = 0,
+  className,
+}: {
+  size?: number;
+  corner: CornerMarkCorner;
+  animate?: boolean;
+  delay?: number;
+  className?: string;
+}) {
+  const paths = PATHS[corner];
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      aria-hidden="true"
+      focusable="false"
+      className={[styles.mark, animate ? styles.drawIn : "", className]
+        .filter(Boolean)
+        .join(" ")}
+      style={{
+        position: "absolute",
+        ...POSITION_STYLE[corner],
+        ["--corner-mark-delay" as string]: `${delay}ms`,
+      }}
+    >
+      <path className={styles.stroke} d={paths.h} />
+      <path className={styles.stroke} d={paths.v} />
+    </svg>
+  );
+}
diff --git a/src/components/Reveal.module.css b/src/components/Reveal.module.css
new file mode 100644
index 0000000..a78181d
--- /dev/null
+++ b/src/components/Reveal.module.css
@@ -0,0 +1,19 @@
+.reveal {
+  opacity: 0;
+  transform: translateY(var(--reveal-distance, 8px));
+  transition:
+    opacity var(--reveal-duration, 0.4s) ease-out,
+    transform var(--reveal-duration, 0.4s) ease-out;
+  transition-delay: var(--reveal-delay, 0ms);
+}
+
+.reveal.revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .reveal {
+    transition: none;
+  }
+}
diff --git a/src/components/Reveal.tsx b/src/components/Reveal.tsx
new file mode 100644
index 0000000..bba6c6f
--- /dev/null
+++ b/src/components/Reveal.tsx
@@ -0,0 +1,81 @@
+// Shared scroll-reveal utility: translateY(8px) -> 0, opacity 0 -> 1, over
+// 400ms ease-out. Fires once per element (observer disconnects on first
+// intersection, never re-triggers on scroll back up). Respects
+// prefers-reduced-motion by skipping straight to the revealed state.
+//
+// For a staggered group (e.g. a grid of cards), give each instance a
+// `delayMs` a fixed step apart (~70ms) — each card observes independently,
+// so cards that enter the viewport together animate in with that stagger,
+// and a card scrolled to individually still reveals correctly on its own.
+import {
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ElementType,
+  type ReactNode,
+} from "react";
+import styles from "./Reveal.module.css";
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+export default function Reveal({
+  as,
+  delayMs = 0,
+  distancePx = 8,
+  durationMs = 400,
+  className,
+  children,
+  ...rest
+}: {
+  as?: ElementType;
+  delayMs?: number;
+  /** Starting translateY offset, in px. Default 8 (matches the sitewide utility). */
+  distancePx?: number;
+  /** Transition duration, in ms. Default 400 (matches the sitewide utility). */
+  durationMs?: number;
+  className?: string;
+  children: ReactNode;
+  [key: string]: unknown;
+}) {
+  const Tag = (as ?? "div") as ElementType;
+  const ref = useRef<HTMLElement | null>(null);
+  const [revealed, setRevealed] = useState(prefersReducedMotion);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || prefersReducedMotion()) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setRevealed(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.15 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <Tag
+      ref={ref}
+      className={[styles.reveal, revealed ? styles.revealed : "", className]
+        .filter(Boolean)
+        .join(" ")}
+      style={
+        {
+          "--reveal-delay": `${delayMs}ms`,
+          "--reveal-distance": `${distancePx}px`,
+          "--reveal-duration": `${durationMs}ms`,
+        } as CSSProperties
+      }
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
diff --git a/src/components/StatsStrip.module.css b/src/components/StatsStrip.module.css
new file mode 100644
index 0000000..3958d5e
--- /dev/null
+++ b/src/components/StatsStrip.module.css
@@ -0,0 +1,53 @@
+.strip {
+  width: min(760px, 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: clamp(1rem, 3vw, 1.5rem);
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
+  box-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.3);
+}
+
+.divider {
+  align-self: stretch;
+  width: 1px;
+  min-height: 2.25rem;
+  background: var(--color-border);
+}
+
+.stat {
+  text-align: center;
+}
+
+.value {
+  display: block;
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: clamp(1.8rem, 3vw, 2.4rem);
+  font-weight: 500;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.label {
+  display: block;
+  margin-top: 0.3rem;
+  color: var(--color-ink-muted);
+  font-size: 0.85rem;
+}
+
+@media (max-width: 860px) {
+  .strip {
+    flex-wrap: wrap;
+  }
+
+  /* Dividers only make sense between items on the same row; once the
+   * strip wraps, an orphaned divider would float before whichever stat
+   * dropped to its own line. */
+  .divider {
+    display: none;
+  }
+}
diff --git a/src/components/StatsStrip.tsx b/src/components/StatsStrip.tsx
new file mode 100644
index 0000000..a20c619
--- /dev/null
+++ b/src/components/StatsStrip.tsx
@@ -0,0 +1,77 @@
+// Stats row with count-up-on-scroll-into-view. Each number animates once,
+// from 0 to its real value, over ~1000ms with an easeOutQuad curve.
+// Respects prefers-reduced-motion by rendering the final value immediately.
+import { Fragment, useEffect, useRef, useState } from "react";
+import styles from "./StatsStrip.module.css";
+
+export type Stat = {
+  value: number;
+  prefix?: string;
+  suffix?: string;
+  label: string;
+};
+
+const COUNT_UP_MS = 1000;
+const easeOutQuad = (t: number) => t * (2 - t);
+
+const prefersReducedMotion = () =>
+  typeof window !== "undefined" &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+function StatValue({ value, prefix = "", suffix = "" }: Stat) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [display, setDisplay] = useState(() => (prefersReducedMotion() ? value : 0));
+  const started = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || prefersReducedMotion()) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting || started.current) return;
+        started.current = true;
+        observer.disconnect();
+        const start = performance.now();
+        const tick = (now: number) => {
+          const t = Math.min(1, (now - start) / COUNT_UP_MS);
+          setDisplay(Math.round(easeOutQuad(t) * value));
+          if (t < 1) requestAnimationFrame(tick);
+        };
+        requestAnimationFrame(tick);
+      },
+      { threshold: 0.4 },
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [value]);
+
+  return (
+    <span ref={ref} className={styles.value}>
+      {prefix}
+      {display}
+      {suffix}
+    </span>
+  );
+}
+
+export default function StatsStrip({
+  stats,
+  className,
+}: {
+  stats: Stat[];
+  className?: string;
+}) {
+  return (
+    <div className={[styles.strip, className].filter(Boolean).join(" ")}>
+      {stats.map((stat, index) => (
+        <Fragment key={stat.label}>
+          {index > 0 && <div className={styles.divider} aria-hidden="true" />}
+          <div className={styles.stat}>
+            <StatValue {...stat} />
+            <span className={styles.label}>{stat.label}</span>
+          </div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/cad/cad-viewer.css b/src/components/cad/cad-viewer.css
index 14ea9c0..ffcef11 100644
--- a/src/components/cad/cad-viewer.css
+++ b/src/components/cad/cad-viewer.css
@@ -27,7 +27,7 @@
   background: rgba(255, 255, 255, 0.9);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(10px);
-  color: #475569;
+  color: var(--color-ink-muted);
   font-size: 13px;
 }
 
@@ -66,17 +66,17 @@
 
 .cad-label {
   font-size: 12px;
-  font-weight: 600;
-  color: #64748b;
+  font-weight: 500;
+  color: var(--color-ink-faint);
 }
 
 .cad-btn {
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.6);
-  background: #f8fafc;
-  color: #475569;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.25;
   padding: 7px 10px;
   cursor: pointer;
@@ -85,8 +85,8 @@
 
 .cad-btn:hover {
   border-color: rgba(59, 130, 246, 0.4);
-  background: #ffffff;
-  color: #1d4ed8;
+  background: var(--color-white);
+  color: var(--color-blue-700);
 }
 
 .cad-btn--wide {
@@ -104,14 +104,14 @@
 
 .cad-btn--neutral {
   border-color: rgba(148, 163, 184, 0.45);
-  background: #f8fafc;
-  color: #475569;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
 }
 
 .cad-btn--active {
-  border-color: #2563eb;
-  background: #2563eb;
-  color: #ffffff;
+  border-color: var(--color-blue-600);
+  background: var(--color-blue-600);
+  color: var(--color-white);
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
 }
 
@@ -125,10 +125,10 @@
 .cad-input {
   border-radius: 7px;
   border: 1px solid rgba(148, 163, 184, 0.55);
-  background: #f8fafc;
-  color: #334155;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   padding: 5px 8px;
   outline: none;
 }
@@ -137,7 +137,7 @@
 .cad-input:hover,
 .cad-select:focus,
 .cad-input:focus {
-  border-color: #60a5fa;
+  border-color: var(--color-blue-500);
 }
 
 .cad-input {
@@ -151,14 +151,14 @@
   height: 20px;
   border-radius: 999px;
   border: 1px solid transparent;
-  background: #cbd5e1;
+  background: var(--color-border);
   padding: 0;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
 .cad-toggle--on {
-  background: #2563eb;
+  background: var(--color-blue-600);
 }
 
 .cad-toggle--disabled {
@@ -173,7 +173,7 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--color-white);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
   transition: transform 0.2s ease;
 }
@@ -203,7 +203,7 @@
 }
 
 .cad-color-swatch--active {
-  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
+  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
 }
 
 .cad-range-wrap {
@@ -212,7 +212,7 @@
 
 .cad-range {
   width: 100%;
-  accent-color: #2563eb;
+  accent-color: var(--color-blue-600);
 }
 
 .cad-info-box {
@@ -225,36 +225,36 @@
 .cad-info-label {
   margin-bottom: 3px;
   font-size: 10px;
-  font-weight: 700;
+  font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: #2563eb;
+  color: var(--color-blue-600);
 }
 
 .cad-info-value {
-  font-family: "SF Mono", "Menlo", "Consolas", monospace;
+  font-family: var(--font-mono);
   font-size: 12px;
-  font-weight: 700;
-  color: #1d4ed8;
+  font-weight: 500;
+  color: var(--color-blue-700);
 }
 
 .cad-status {
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 .cad-status--info {
-  color: #2563eb;
+  color: var(--color-blue-600);
 }
 
 .cad-status--error {
-  color: #e11d48;
+  color: var(--color-error-500);
 }
 
 .cad-debug {
   font-size: 10px;
-  color: #64748b;
-  font-family: "SF Mono", "Menlo", "Consolas", monospace;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
 }
 
 .cad-dims-card {
@@ -267,10 +267,10 @@
 .cad-dims-title {
   margin-bottom: 6px;
   font-size: 10px;
-  font-weight: 700;
+  font-weight: 500;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: #94a3b8;
+  color: var(--color-ink-faint);
 }
 
 .cad-dims-grid {
@@ -286,14 +286,14 @@
 
 .cad-dims-axis-label {
   font-size: 10px;
-  color: #94a3b8;
+  color: var(--color-ink-faint);
 }
 
 .cad-dims-axis-value {
-  font-family: "SF Mono", "Menlo", "Consolas", monospace;
+  font-family: var(--font-mono);
   font-size: 11px;
-  font-weight: 700;
-  color: #334155;
+  font-weight: 500;
+  color: var(--color-ink-muted);
 }
 
 .cad-dims-unit {
@@ -301,8 +301,8 @@
   font-size: 10px;
   text-transform: uppercase;
   text-align: right;
-  color: #94a3b8;
-  font-weight: 600;
+  color: var(--color-ink-faint);
+  font-weight: 500;
 }
 
 .cad-parts-panel {
@@ -322,8 +322,8 @@
 
 .cad-parts-title {
   font-size: 12px;
-  font-weight: 700;
-  color: #0f172a;
+  font-weight: 500;
+  color: var(--color-ink);
 }
 
 .cad-parts-list {
@@ -351,8 +351,8 @@
 
 .cad-compare-title {
   font-size: 12px;
-  font-weight: 700;
-  color: #0f172a;
+  font-weight: 500;
+  color: var(--color-ink);
 }
 
 .cad-compare-list {
@@ -372,10 +372,10 @@
 .cad-part-row {
   border-radius: 6px;
   border: 1px solid rgba(148, 163, 184, 0.45);
-  background: #f8fafc;
-  color: #475569;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   padding: 6px 8px;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -383,13 +383,13 @@
 
 .cad-part-row:hover {
   border-color: rgba(59, 130, 246, 0.45);
-  background: #ffffff;
+  background: var(--color-white);
 }
 
 .cad-part-row--active {
-  border-color: #2563eb;
-  background: #2563eb;
-  color: #ffffff;
+  border-color: var(--color-blue-600);
+  background: var(--color-blue-600);
+  color: var(--color-white);
   box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
 }
 
@@ -414,12 +414,12 @@
 }
 
 .cad-icon-btn--enabled {
-  color: #334155;
+  color: var(--color-ink-muted);
   cursor: pointer;
 }
 
 .cad-icon-btn--enabled:hover {
-  color: #1d4ed8;
+  color: var(--color-blue-700);
   border-color: rgba(59, 130, 246, 0.45);
 }
 
@@ -442,8 +442,8 @@
 .cad-part-message {
   border-radius: 6px;
   border: 1px solid rgba(148, 163, 184, 0.4);
-  background: #f8fafc;
-  color: #475569;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
   font-size: 11px;
   padding: 6px 8px;
 }
@@ -451,10 +451,10 @@
 .cad-part-selected {
   border-radius: 6px;
   border: 1px solid rgba(147, 197, 253, 0.8);
-  background: #eff6ff;
-  color: #1d4ed8;
+  background: var(--color-blue-50);
+  color: var(--color-blue-700);
   font-size: 11px;
-  font-weight: 600;
+  font-weight: 500;
   padding: 6px 8px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -503,7 +503,7 @@
   z-index: 1;
   width: 40px;
   height: 40px;
-  color: #2563eb;
+  color: var(--color-blue-600);
   animation: cadSpin 0.9s linear infinite;
 }
 
@@ -516,14 +516,14 @@
 
 .cad-loading-title {
   font-size: 14px;
-  font-weight: 700;
-  color: #0f172a;
+  font-weight: 500;
+  color: var(--color-ink);
 }
 
 .cad-loading-subtitle {
   font-size: 11px;
   font-weight: 500;
-  color: #64748b;
+  color: var(--color-ink-faint);
 }
 
 .cad-error-overlay {
@@ -547,7 +547,7 @@
   text-align: center;
   border-radius: 16px;
   border: 1px solid rgba(251, 113, 133, 0.35);
-  background: #ffffff;
+  background: var(--color-white);
   box-shadow: 0 24px 40px rgba(15, 23, 42, 0.22);
   padding: 24px;
 }
@@ -556,7 +556,7 @@
   width: 48px;
   height: 48px;
   border-radius: 999px;
-  background: #fef2f2;
+  background: var(--color-error-50);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -575,32 +575,32 @@
 .cad-error-title {
   margin: 0;
   font-size: 14px;
-  font-weight: 700;
-  color: #0f172a;
+  font-weight: 500;
+  color: var(--color-ink);
 }
 
 .cad-error-message {
   margin: 0;
   font-size: 12px;
   line-height: 1.45;
-  color: #64748b;
+  color: var(--color-ink-faint);
 }
 
 .cad-error-retry {
   margin-top: 2px;
   border-radius: 8px;
-  border: 1px solid #0f172a;
-  background: #0f172a;
-  color: #ffffff;
+  border: 1px solid var(--color-ink);
+  background: var(--color-ink);
+  color: var(--color-white);
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 500;
   padding: 8px 14px;
   cursor: pointer;
 }
 
 .cad-error-retry:hover {
-  background: #1e293b;
-  border-color: #1e293b;
+  background: var(--color-ink);
+  border-color: var(--color-ink);
 }
 
 .cad-sheet-modal-overlay {
@@ -653,7 +653,7 @@
   padding: 56px 20px 20px;
   border-radius: 16px;
   border: 1px solid rgba(148, 163, 184, 0.35);
-  background: #ffffff;
+  background: var(--color-white);
   box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
 }
 
@@ -669,16 +669,16 @@
   height: 32px;
   border-radius: 999px;
   border: 1px solid rgba(148, 163, 184, 0.5);
-  background: #f8fafc;
-  color: #475569;
+  background: var(--color-bg);
+  color: var(--color-ink-muted);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .cad-sheet-modal-close:hover {
-  background: #ffffff;
+  background: var(--color-white);
   border-color: rgba(59, 130, 246, 0.4);
-  color: #1d4ed8;
+  color: var(--color-blue-700);
 }
 
 .cad-sheet-modal-canvas-wrap {
@@ -702,8 +702,8 @@
      Adjust Drawing/Annotations click-drag handlers on the canvas itself. */
   overflow: auto;
   border-radius: 10px;
-  border: 1px solid #d7dce3;
-  background: #f0f2f5;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
 }
 
 /* max-width/max-height: 100% here are only the pre-measurement FALLBACK
@@ -745,23 +745,23 @@
   height: 26px;
   border-radius: 999px;
   border: 1px solid rgba(220, 38, 38, 0.4);
-  background: #fef2f2;
-  color: #dc2626;
+  background: var(--color-error-50);
+  color: var(--color-error-500);
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
   transition: all 0.15s ease;
 }
 
 .cad-sheet-delete-icon:hover {
-  background: #dc2626;
-  border-color: #dc2626;
-  color: #ffffff;
+  background: var(--color-error-500);
+  border-color: var(--color-error-500);
+  color: var(--color-white);
 }
 
 .cad-sheet-modal-hint {
   text-align: center;
   font-size: 12.5px;
-  color: #64748b;
+  color: var(--color-ink-faint);
   padding: 2px 0;
 }
 
@@ -775,21 +775,21 @@
 
 .cad-sheet-scale-busy {
   font-size: 11.5px;
-  font-weight: 600;
-  color: #64748b;
+  font-weight: 500;
+  color: var(--color-ink-faint);
 }
 
 /* Error state (task 4) - a visible red border on the Scale control exactly
    while content crosses the frame margin at the current scale/position, so
    the error is visible at the control itself, not just in the banner below. */
 .cad-select--error {
-  border-color: #dc2626 !important;
+  border-color: var(--color-error-500) !important;
   box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.25);
 }
 
 .cad-select--error:hover,
 .cad-select--error:focus {
-  border-color: #dc2626 !important;
+  border-color: var(--color-error-500) !important;
 }
 
 /* Floating toast (replaces the old in-flow scale-change banner) - absolutely
@@ -807,7 +807,7 @@
   z-index: 5;
   text-align: center;
   font-size: 12.5px;
-  color: #2563eb;
+  color: var(--color-blue-600);
   background: rgba(219, 234, 254, 0.95);
   border: 1px solid rgba(96, 165, 250, 0.45);
   border-radius: 8px;
@@ -881,7 +881,7 @@
   border: 1px solid rgba(148, 163, 184, 0.5);
   border-radius: 8px;
   padding: 4px 6px;
-  background: #f8fafc;
+  background: var(--color-bg);
 }
 
 .cad-sheet-zoom-btn {
@@ -892,8 +892,8 @@
   height: 24px;
   border-radius: 6px;
   border: 1px solid rgba(148, 163, 184, 0.5);
-  background: #ffffff;
-  color: #334155;
+  background: var(--color-white);
+  color: var(--color-ink-muted);
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
@@ -901,9 +901,9 @@
 }
 
 .cad-sheet-zoom-btn:hover:not(:disabled) {
-  background: #eff6ff;
+  background: var(--color-blue-50);
   border-color: rgba(59, 130, 246, 0.4);
-  color: #1d4ed8;
+  color: var(--color-blue-700);
 }
 
 .cad-sheet-zoom-btn:disabled {
@@ -917,8 +917,8 @@
   border: none;
   background: transparent;
   font-size: 12.5px;
-  font-weight: 600;
-  color: #1e293b;
+  font-weight: 500;
+  color: var(--color-ink);
 }
 
 .cad-sheet-zoom-input:focus {
@@ -927,7 +927,7 @@
 
 .cad-sheet-zoom-suffix {
   font-size: 12.5px;
-  color: #64748b;
+  color: var(--color-ink-faint);
   margin-right: 2px;
 }
 
@@ -938,8 +938,8 @@
   align-items: center;
   gap: 6px;
   font-size: 13px;
-  font-weight: 600;
-  color: #334155;
+  font-weight: 500;
+  color: var(--color-ink-muted);
   cursor: pointer;
 }
 
@@ -958,17 +958,17 @@
   height: 26px;
   border-radius: 999px;
   border: 1px solid rgba(37, 99, 235, 0.4);
-  background: #eff6ff;
-  color: #1d4ed8;
+  background: var(--color-blue-50);
+  color: var(--color-blue-700);
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
   transition: all 0.15s ease;
 }
 
 .cad-sheet-notes-pencil:hover {
-  background: #2563eb;
-  border-color: #2563eb;
-  color: #ffffff;
+  background: var(--color-blue-600);
+  border-color: var(--color-blue-600);
+  color: var(--color-white);
 }
 
 /* Direct in-document notes editing - one borderless input per point
@@ -985,13 +985,13 @@
   border-bottom: 1.5px solid transparent;
   background: rgba(255, 255, 255, 0.92);
   font: 15px sans-serif;
-  color: #000000;
+  color: #000000; /* intentionally pure black: matches the untouched drawing-sheet text it overlays, not brand ink */
   padding: 0 2px;
   outline: none;
 }
 
 .cad-sheet-notes-line-input:focus {
-  border-bottom-color: #2563eb;
+  border-bottom-color: var(--color-blue-600);
 }
 
 /* Static stand-in text for every title block cell NOT actively being edited
@@ -1008,7 +1008,7 @@
   overflow: hidden;
   padding: 0 8px;
   font: 11px sans-serif;
-  color: #000000;
+  color: #000000; /* intentionally pure black: matches the untouched drawing-sheet text it overlays, not brand ink */
   white-space: nowrap;
   text-overflow: ellipsis;
   pointer-events: none;
@@ -1031,7 +1031,7 @@
   background: rgba(255, 255, 255, 0.92);
   outline: 1.5px dashed transparent;
   font: 11px sans-serif;
-  color: #000000;
+  color: #000000; /* intentionally pure black: matches the untouched drawing-sheet text it overlays, not brand ink */
   padding: 0 4px;
 }
 
@@ -1040,11 +1040,11 @@
 }
 
 .cad-titleblock-cell-input:focus {
-  outline-color: #2563eb;
+  outline-color: var(--color-blue-600);
 }
 
 .cad-titleblock-cell-input::placeholder {
-  color: #94a3b8;
+  color: var(--color-ink-faint);
 }
 
 /* Contextual toolbar (task 2: SELECT/INSERT/DELETE/MERGE/SPLIT), anchored
@@ -1062,7 +1062,7 @@
   padding: 4px;
   border-radius: 8px;
   border: 1px solid rgba(148, 163, 184, 0.5);
-  background: #ffffff;
+  background: var(--color-white);
   box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
 }
 
@@ -1075,14 +1075,14 @@
   border-radius: 5px;
   border: none;
   background: transparent;
-  color: #334155;
+  color: var(--color-ink-muted);
   cursor: pointer;
   transition: all 0.15s ease;
 }
 
 .cad-titleblock-toolbar button:hover:not(:disabled) {
-  background: #eff6ff;
-  color: #1d4ed8;
+  background: var(--color-blue-50);
+  color: var(--color-blue-700);
 }
 
 .cad-titleblock-toolbar button:disabled {
@@ -1091,8 +1091,8 @@
 }
 
 .cad-titleblock-toolbar button.cad-titleblock-toolbar-danger:hover:not(:disabled) {
-  background: #fef2f2;
-  color: #dc2626;
+  background: var(--color-error-50);
+  color: var(--color-error-500);
 }
 
 .cad-titleblock-toolbar-divider {
@@ -1139,7 +1139,7 @@
   width: 22px;
   height: 22px;
   border-radius: 999px;
-  color: #ffffff;
+  color: var(--color-white);
   font: 600 11px sans-serif;
   flex-shrink: 0;
 }
@@ -1151,13 +1151,13 @@
   background: rgba(255, 255, 255, 0.9);
   outline: 1px dashed rgba(37, 99, 235, 0.35);
   font: 10px sans-serif;
-  color: #000000;
+  color: #000000; /* intentionally pure black: matches the untouched drawing-sheet text it overlays, not brand ink */
   text-align: center;
   padding: 1px 3px;
 }
 
 .cad-titleblock-logo-name-input:focus {
-  outline-color: #2563eb;
+  outline-color: var(--color-blue-600);
 }
 
 .cad-titleblock-logo-upload {
@@ -1167,14 +1167,14 @@
   width: 100%;
   border-radius: 4px;
   font: 600 10px sans-serif;
-  color: #2563eb;
+  color: var(--color-blue-600);
   text-align: center;
   cursor: pointer;
   transition: background 0.15s ease;
 }
 
 .cad-titleblock-logo-upload:hover {
-  background: #eff6ff;
+  background: var(--color-blue-50);
 }
 
 .cad-titleblock-logo-upload input[type="file"] {
@@ -1198,17 +1198,17 @@
   height: 20px;
   border-radius: 999px;
   border: 1px solid rgba(148, 163, 184, 0.5);
-  background: #ffffff;
-  color: #475569;
+  background: var(--color-white);
+  color: var(--color-ink-muted);
   cursor: pointer;
   box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
   transition: all 0.15s ease;
 }
 
 .cad-titleblock-logo-remove:hover {
-  background: #fef2f2;
+  background: var(--color-error-50);
   border-color: rgba(220, 38, 38, 0.4);
-  color: #dc2626;
+  color: var(--color-error-500);
 }
 
 @keyframes cadSpin {
diff --git a/src/components/cad/cad-viewer.tsx b/src/components/cad/cad-viewer.tsx
index 114457d..3fcbfc2 100644
--- a/src/components/cad/cad-viewer.tsx
+++ b/src/components/cad/cad-viewer.tsx
@@ -4826,7 +4826,7 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
           height: "100%",
           minHeight: "200px",
           overflow: "hidden",
-          backgroundColor: "#ffffff",
+          backgroundColor: "var(--color-white)",
           ...style,
         }}
       >
@@ -4861,7 +4861,7 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
               boxShadow: "0 6px 18px rgba(120, 53, 15, 0.14)",
               padding: "8px 12px",
               fontSize: "12px",
-              fontWeight: 600,
+              fontWeight: 500,
               lineHeight: 1.35,
               color: "#7c2d12",
               pointerEvents: "none",
@@ -4899,8 +4899,8 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
               <div
                 style={{
                   fontSize: "12px",
-                  fontWeight: 700,
-                  color: "#0f172a",
+                  fontWeight: 500,
+                  color: "var(--color-ink)",
                   letterSpacing: "0.02em",
                 }}
               >
@@ -4923,10 +4923,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                     style={{
                       borderRadius: "8px",
                       border: "1px solid rgba(148, 163, 184, 0.6)",
-                      background: showDimensions ? "#0f172a" : "#f8fafc",
-                      color: showDimensions ? "#f8fafc" : "#0f172a",
+                      background: showDimensions ? "var(--color-ink)" : "var(--color-bg)",
+                      color: showDimensions ? "var(--color-bg)" : "var(--color-ink)",
                       fontSize: "11px",
-                      fontWeight: 700,
+                      fontWeight: 500,
                       padding: "5px 8px",
                       cursor: "pointer",
                     }}
@@ -4941,10 +4941,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                     style={{
                       borderRadius: "8px",
                       border: "1px solid rgba(148, 163, 184, 0.6)",
-                      background: "#f8fafc",
-                      color: "#0f172a",
+                      background: "var(--color-bg)",
+                      color: "var(--color-ink)",
                       fontSize: "11px",
-                      fontWeight: 700,
+                      fontWeight: 500,
                       padding: "5px 8px",
                       cursor: "pointer",
                     }}
@@ -4959,10 +4959,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                     style={{
                       borderRadius: "8px",
                       border: "1px solid rgba(148, 163, 184, 0.6)",
-                      background: "#f8fafc",
-                      color: "#0f172a",
+                      background: "var(--color-bg)",
+                      color: "var(--color-ink)",
                       fontSize: "11px",
-                      fontWeight: 700,
+                      fontWeight: 500,
                       padding: "5px 8px",
                       cursor: "pointer",
                     }}
@@ -5039,10 +5039,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                 padding: "5px 10px",
                 borderRadius: "7px",
                 border: "1px solid rgba(148, 163, 184, 0.5)",
-                background: "#f8fafc",
-                color: "#0f172a",
+                background: "var(--color-bg)",
+                color: "var(--color-ink)",
                 fontSize: "12px",
-                fontWeight: 600,
+                fontWeight: 500,
                 cursor: "pointer",
               }}
             >
@@ -5057,10 +5057,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                 padding: "5px 10px",
                 borderRadius: "7px",
                 border: "1px solid rgba(148, 163, 184, 0.5)",
-                background: "#f8fafc",
-                color: "#0f172a",
+                background: "var(--color-bg)",
+                color: "var(--color-ink)",
                 fontSize: "12px",
-                fontWeight: 600,
+                fontWeight: 500,
                 cursor: "pointer",
               }}
             >
@@ -5075,10 +5075,10 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                 padding: "5px 10px",
                 borderRadius: "7px",
                 border: "1px solid rgba(148, 163, 184, 0.5)",
-                background: "#f8fafc",
-                color: "#0f172a",
+                background: "var(--color-bg)",
+                color: "var(--color-ink)",
                 fontSize: "12px",
-                fontWeight: 600,
+                fontWeight: 500,
                 cursor: "pointer",
               }}
             >
@@ -5775,6 +5775,7 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
               className="cad-sheet-modal-overlay"
               onClick={() => setDrawingSheetModalOpen(false)}
             >
@@ -5782,6 +5783,7 @@ export const CadViewer = forwardRef<CadViewerRef, CadViewerProps>(
                 initial={{ opacity: 0, scale: 0.96 }}
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.96 }}
+                transition={{ duration: 0.15 }}
                 className="cad-sheet-modal"
                 onClick={(e) => e.stopPropagation()}
               >
diff --git a/src/main.tsx b/src/main.tsx
index ede221c..cb27b0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,12 @@
 import { lazy, Suspense } from "react";
 import { ClientOnly, Head, ViteReactSSG } from "vite-react-ssg";
 import type { RouteRecord } from "vite-react-ssg";
+import "./styles/design-tokens.css";
 import About from "./pages/About";
 import Landing from "./pages/Landing";
 import SplitStepAssembly from "./pages/guides/SplitStepAssembly";
 import StepFileTo2dDrawing from "./pages/guides/StepFileTo2dDrawing";
+import MarketingLayout from "./ui/MarketingLayout";
 
 const App = lazy(() => import("./ui/App"));
 
@@ -50,12 +52,18 @@ function NotFound() {
 }
 
 export const routes: RouteRecord[] = [
-  { path: "/", element: <Landing /> },
-  { path: "/about", Component: About },
-  { path: "/guides/split-step-assembly", Component: SplitStepAssembly },
   {
-    path: "/guides/step-file-to-2d-drawing",
-    Component: StepFileTo2dDrawing,
+    path: "/",
+    Component: MarketingLayout,
+    children: [
+      { index: true, Component: Landing },
+      { path: "about", Component: About },
+      { path: "guides/split-step-assembly", Component: SplitStepAssembly },
+      {
+        path: "guides/step-file-to-2d-drawing",
+        Component: StepFileTo2dDrawing,
+      },
+    ],
   },
   {
     path: "/viewer",
diff --git a/src/pages/About.module.css b/src/pages/About.module.css
index 17cb754..2c58bfd 100644
--- a/src/pages/About.module.css
+++ b/src/pages/About.module.css
@@ -2,6 +2,7 @@
   overflow-y: auto;
   height: auto;
   min-height: 100vh;
+  font-family: var(--font-display);
 }
 
 :global(body.about-page #root) {
@@ -11,11 +12,11 @@
 
 .page {
   min-height: 100vh;
-  background: #fafafa;
-  color: #1a1a1a;
+  background: var(--color-bg);
+  color: var(--color-ink);
   display: flex;
   justify-content: center;
-  padding: 4rem 1.5rem 6rem;
+  padding: 4rem 1.5rem 0;
 }
 
 .article {
@@ -23,9 +24,11 @@
   display: flex;
   flex-direction: column;
   gap: clamp(3rem, 5vw, 4rem);
+  padding-bottom: clamp(3rem, 5vw, 4rem);
 }
 
 .section {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -34,21 +37,24 @@
 .breadcrumb {
   display: inline-flex;
   align-self: flex-start;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 0.9rem;
   text-decoration: none;
 }
 
 .breadcrumb:hover {
-  color: #3b82f6;
+  color: var(--color-blue-500);
+}
+
+.breadcrumb:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
 }
 
 .eyebrow {
   margin: 0;
-  color: #6b7280;
-  font-family:
-    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -56,34 +62,83 @@
 
 .headline {
   margin: 0.5rem 0 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 2.25rem;
   line-height: 1.2;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .sectionHeading {
   margin: 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .paragraph {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.05rem;
   line-height: 1.7;
 }
 
+.illustrationRow {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.illustrationText {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.illustration {
+  flex: none;
+}
+
 .externalLink {
-  color: #2563eb;
+  color: var(--color-blue-600);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
 .externalLink:hover {
-  color: #1d4ed8;
+  color: var(--color-blue-700);
+}
+
+.externalLink:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
+}
+
+/* The one deliberate navy accent surface on this page — closing CTA band. */
+.ctaBand {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  background: var(--color-navy-900);
+  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.ctaBandInner {
+  width: min(560px, 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  text-align: center;
+}
+
+.ctaBandHeading {
+  margin: 0;
+  color: var(--color-white);
+  font-size: 1.5rem;
+  font-weight: 500;
 }
 
 .ctaRow {
@@ -92,28 +147,33 @@
 
 .cta {
   display: inline-block;
-  background: #3b82f6;
-  color: #ffffff;
+  background: var(--color-blue-500);
+  color: var(--color-white);
   border: none;
   border-radius: 8px;
   padding: 0.85rem 2.25rem;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   text-decoration: none;
   box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45);
   transition:
-    background 0.15s ease,
-    transform 0.15s ease;
+    background 0.15s ease-out,
+    transform 0.15s ease-out;
 }
 
 .cta:hover {
-  background: #2563eb;
+  background: var(--color-blue-600);
   transform: translateY(-1px);
 }
 
+.cta:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 4px;
+}
+
 @media (max-width: 768px) {
   .page {
-    padding: 2.5rem 1.25rem 4rem;
+    padding: 2.5rem 1.25rem 0;
   }
 
   .article {
@@ -123,4 +183,9 @@
   .headline {
     font-size: 1.75rem;
   }
+
+  .illustrationRow {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 599db0c..3f5760e 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -1,6 +1,14 @@
 import { Link } from "react-router-dom";
 import { Head } from "vite-react-ssg";
 import styles from "./About.module.css";
+import CornerMark from "../components/CornerMark";
+import {
+  BoltIllustration,
+  BracketIllustration,
+  CalipersIllustration,
+} from "./illustrations";
+
+const MARK_STAGGER_MS = 130;
 
 export default function About() {
   return (
@@ -29,6 +37,12 @@ export default function About() {
       <main className={styles.page}>
         <article className={styles.article}>
           <section className={styles.section}>
+            <CornerMark corner="top-left" animate delay={0} />
+            <CornerMark
+              corner="bottom-right"
+              animate
+              delay={MARK_STAGGER_MS}
+            />
             <Link to="/" className={styles.breadcrumb}>
               ← Back to CAD Viewer
             </Link>
@@ -37,39 +51,55 @@ export default function About() {
           </section>
 
           <section className={styles.section}>
-            <h2 className={styles.sectionHeading}>Why this exists</h2>
-            <p className={styles.paragraph}>
-              Viewing a CAD file usually means installing something —
-              SolidWorks, Fusion 360, or at minimum a dedicated viewer app.
-              If you just need to look at a STEP file someone sent you, or
-              turn a 3D model into a drawing you can hand to a machine shop,
-              that's a lot of friction for an occasional task.
-            </p>
-            <p className={styles.paragraph}>
-              CADViewer is built to remove that friction: open the file in a
-              browser tab, view it, measure it, and generate a real
-              engineering drawing from it — no install, no account, no cost.
-            </p>
+            <div className={styles.illustrationRow}>
+              <div className={styles.illustrationText}>
+                <h2 className={styles.sectionHeading}>Why this exists</h2>
+                <p className={styles.paragraph}>
+                  Viewing a CAD file usually means installing something —
+                  SolidWorks, Fusion 360, or at minimum a dedicated viewer
+                  app. If you just need to look at a STEP file someone sent
+                  you, or turn a 3D model into a drawing you can hand to a
+                  machine shop, that's a lot of friction for an occasional
+                  task.
+                </p>
+                <p className={styles.paragraph}>
+                  CADViewer is built to remove that friction: open the file
+                  in a browser tab, view it, measure it, and generate a real
+                  engineering drawing from it — no install, no account, no
+                  cost.
+                </p>
+              </div>
+              <BoltIllustration size={88} className={styles.illustration} />
+            </div>
           </section>
 
           <section className={styles.section}>
-            <h2 className={styles.sectionHeading}>How it works</h2>
-            <p className={styles.paragraph}>
-              The viewer runs on OpenCascade (OCCT), the open-source CAD
-              kernel, compiled to WebAssembly so it runs directly in your
-              browser. Your file is never uploaded to a server — everything
-              from geometry parsing to drawing generation happens on your
-              own machine.
-            </p>
-            <p className={styles.paragraph}>
-              The 2D drawing generator specifically follows standard
-              drafting convention — third-angle projection, proper
-              dimension placement, correct scale selection — rather than
-              just capturing a picture of the model from three angles.
-              Getting that right took real iteration; a drawing that looks
-              plausible but is missing a dimension or duplicates one isn't
-              actually useful to whoever has to build the part from it.
-            </p>
+            <div className={styles.illustrationRow}>
+              <div className={styles.illustrationText}>
+                <h2 className={styles.sectionHeading}>How it works</h2>
+                <p className={styles.paragraph}>
+                  The viewer runs on OpenCascade (OCCT), the open-source CAD
+                  kernel, compiled to WebAssembly so it runs directly in your
+                  browser. Your file is never uploaded to a server —
+                  everything from geometry parsing to drawing generation
+                  happens on your own machine.
+                </p>
+                <p className={styles.paragraph}>
+                  The 2D drawing generator specifically follows standard
+                  drafting convention — third-angle projection, proper
+                  dimension placement, correct scale selection — rather than
+                  just capturing a picture of the model from three angles.
+                  Getting that right took real iteration; a drawing that
+                  looks plausible but is missing a dimension or duplicates
+                  one isn't actually useful to whoever has to build the part
+                  from it.
+                </p>
+              </div>
+              <CalipersIllustration
+                size={88}
+                className={styles.illustration}
+              />
+            </div>
           </section>
 
           <section className={styles.section}>
@@ -92,12 +122,20 @@ export default function About() {
           </section>
 
           <section className={styles.section}>
-            <h2 className={styles.sectionHeading}>What's next</h2>
-            <p className={styles.paragraph}>
-              Sheet-metal unfold and flattening, exploded assembly views,
-              and BOM tables are next on the list. And more unexpected
-              features to come.
-            </p>
+            <div className={styles.illustrationRow}>
+              <div className={styles.illustrationText}>
+                <h2 className={styles.sectionHeading}>What's next</h2>
+                <p className={styles.paragraph}>
+                  Sheet-metal unfold and flattening, exploded assembly
+                  views, and BOM tables are next on the list. And more
+                  unexpected features to come.
+                </p>
+              </div>
+              <BracketIllustration
+                size={88}
+                className={styles.illustration}
+              />
+            </div>
           </section>
 
           <section className={styles.section}>
@@ -113,16 +151,19 @@ export default function About() {
               .
             </p>
           </section>
-
-          <section className={styles.section}>
-            <div className={styles.ctaRow}>
-              <a className={styles.cta} href="/viewer">
-                Try CADViewer now
-              </a>
-            </div>
-          </section>
         </article>
       </main>
+
+      <div className={styles.ctaBand}>
+        <div className={styles.ctaBandInner}>
+          <h2 className={styles.ctaBandHeading}>See it on your own file</h2>
+          <div className={styles.ctaRow}>
+            <a className={styles.cta} href="/viewer">
+              Try CADViewer now
+            </a>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/pages/AnimatedBackground.tsx b/src/pages/AnimatedBackground.tsx
deleted file mode 100644
index 4a2212d..0000000
--- a/src/pages/AnimatedBackground.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-// src/pages/AnimatedBackground.tsx
-//
-// Flat 2D grid covering the full viewport.
-// A scan light sweeps top → bottom, brightening the grid lines it passes over.
-// No floating shapes. No separate glow band. The grid IS the animation.
-
-import { useEffect, useRef } from 'react'
-
-export default function AnimatedBackground() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-    const context = ctx
-
-    let rafId = 0
-    let tick  = 0
-
-    function setSize() {
-      canvas!.width  = window.innerWidth
-      canvas!.height = window.innerHeight
-    }
-    setSize()
-    window.addEventListener('resize', setSize)
-
-    function draw() {
-      const W = canvas!.width
-      const H = canvas!.height
-
-      // ── Background ───────────────────────────────────────────────────────
-      context.clearRect(0, 0, W, H)
-      context.fillStyle = '#f7f8fa'
-      context.fillRect(0, 0, W, H)
-
-      // ── Grid config ──────────────────────────────────────────────────────
-      const CELL      = 72      // px between grid lines
-      const BASE      = 0.14   // base grid line opacity — quiet idle grid
-      const PEAK      = 0.46   // opacity when scan is exactly on the line — gentle ambient shift
-      const BAND      = 110    // px radius of scan influence
-
-      // Idle grid lines are a light, low-contrast gray; lines lit by the scan
-      // shift to the brand accent blue rather than just brightening the gray.
-      const BASE_RGB: [number, number, number] = [226, 229, 234] // #e2e5ea
-      const PEAK_RGB: [number, number, number] = [59, 130, 246]  // #3b82f6
-
-      // Mix idle gray → accent blue by intensity f (0 = idle, 1 = scan center)
-      function mixColor(f: number): [number, number, number] {
-        return [
-          BASE_RGB[0] + (PEAK_RGB[0] - BASE_RGB[0]) * f,
-          BASE_RGB[1] + (PEAK_RGB[1] - BASE_RGB[1]) * f,
-          BASE_RGB[2] + (PEAK_RGB[2] - BASE_RGB[2]) * f,
-        ]
-      }
-
-      // Same mix, but derives f from an alpha value already interpolated
-      // between BASE and PEAK (used for the gradient stops below).
-      function rgbaForAlpha(alpha: number): string {
-        const f = Math.max(0, Math.min(1, (alpha - BASE) / (PEAK - BASE)))
-        const [r, g, b] = mixColor(f)
-        return `rgba(${r.toFixed(1)},${g.toFixed(1)},${b.toFixed(1)},${alpha.toFixed(3)})`
-      }
-
-      // Scan position: sweeps 0 → H, period ~7 s (420 frames @ 60 fps)
-      const PERIOD = 420
-      const scanY  = ((tick % PERIOD) / PERIOD) * H
-
-      // Linear falloff: 1.0 at scan center, 0.0 at BAND distance
-      function factor(dist: number): number {
-        return dist >= BAND ? 0 : 1 - dist / BAND
-      }
-
-      // ── Horizontal lines — brightened by proximity to scan ───────────────
-      // Each horizontal line checks how far it is from scanY.
-      // Lines near the scan are redrawn at PEAK opacity and slightly thicker.
-      for (let y = 0; y <= H; y += CELL) {
-        const f     = factor(Math.abs(y - scanY))
-        const alpha = BASE + (PEAK - BASE) * f
-        const width = 0.65 + f * 1.0   // thickens from 0.65 to 1.65 at scan center
-        const [r, g, b] = mixColor(f)
-
-        context.strokeStyle = `rgba(${r.toFixed(1)},${g.toFixed(1)},${b.toFixed(1)},${alpha.toFixed(3)})`
-        context.lineWidth   = width
-        context.beginPath()
-        context.moveTo(0, y)
-        context.lineTo(W, y)
-        context.stroke()
-      }
-
-      // ── Vertical lines — base + bright segment where scan crosses ────────
-      // Step 1: draw full vertical line at base opacity.
-      // Step 2: overdraw a gradient segment within the scan band so the
-      //         crossing point glows at PEAK opacity, fading to BASE at edges.
-      for (let x = 0; x <= W; x += CELL) {
-
-        // Full-height base line
-        context.strokeStyle = `rgba(${BASE_RGB[0]},${BASE_RGB[1]},${BASE_RGB[2]},${BASE})`
-        context.lineWidth   = 0.65
-        context.beginPath()
-        context.moveTo(x, 0)
-        context.lineTo(x, H)
-        context.stroke()
-
-        // Bright segment within the scan band
-        const segTop = Math.max(0, scanY - BAND)
-        const segBot = Math.min(H, scanY + BAND)
-
-        if (segTop < segBot) {
-          // Gradient along the segment: BASE → PEAK at scanY → BASE
-          const segH  = segBot - segTop
-          const midT  = (scanY - segTop) / segH   // 0..1 where scanY falls
-
-          const g = context.createLinearGradient(0, segTop, 0, segBot)
-          g.addColorStop(0,                       rgbaForAlpha(BASE))
-          g.addColorStop(Math.max(0, midT - 0.4), rgbaForAlpha(BASE + PEAK * 0.3))
-          g.addColorStop(midT,                    rgbaForAlpha(PEAK))
-          g.addColorStop(Math.min(1, midT + 0.4), rgbaForAlpha(BASE + PEAK * 0.3))
-          g.addColorStop(1,                       rgbaForAlpha(BASE))
-
-          context.strokeStyle = g
-          context.lineWidth   = 1.2   // slightly thicker at illuminated segment
-          context.beginPath()
-          context.moveTo(x, segTop)
-          context.lineTo(x, segBot)
-          context.stroke()
-        }
-      }
-
-      // ── Soft radial vignette — grounds the edges only ────────────────────
-      const vg = context.createRadialGradient(W / 2, H / 2, H * 0.25, W / 2, H / 2, H * 0.82)
-      vg.addColorStop(0, 'rgba(226,229,234,0)')
-      vg.addColorStop(1, 'rgba(226,229,234,0.55)')
-      context.fillStyle = vg
-      context.fillRect(0, 0, W, H)
-
-      tick++
-      rafId = requestAnimationFrame(draw)
-    }
-
-    draw()
-
-    return () => {
-      cancelAnimationFrame(rafId)
-      window.removeEventListener('resize', setSize)
-    }
-  }, [])
-
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{
-        position:      'absolute',
-        top:           0,
-        left:          0,
-        width:         '100%',
-        height:        '100%',
-        display:       'block',
-        pointerEvents: 'none',
-        zIndex:        0,
-      }}
-    />
-  )
-}
diff --git a/src/pages/Landing.module.css b/src/pages/Landing.module.css
index 1c2fc75..634a919 100644
--- a/src/pages/Landing.module.css
+++ b/src/pages/Landing.module.css
@@ -2,6 +2,7 @@
   overflow-y: auto;
   height: auto;
   min-height: 100vh;
+  font-family: var(--font-display);
 }
 
 :global(body.landing-page #root) {
@@ -10,277 +11,737 @@
 }
 
 .page {
-  width: 100vw;
-  height: 100vh;
+  position: relative;
+  background: var(--color-bg);
+  color: var(--color-ink);
+  min-height: 100vh;
+  outline: 2px solid transparent;
+  outline-offset: -4px;
+  transition: outline 0.15s ease;
+}
+
+.pageDragging {
+  outline: 2px solid var(--color-blue-500);
+}
+
+/* ---------- Nav ---------- */
+
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
+  background: transparent;
+  border-bottom: 1px solid transparent;
+  transition: all 0.25s ease;
+}
+
+.navScrolled {
+  padding: 0.7rem clamp(1.25rem, 4vw, 3rem);
+  background: rgba(247, 248, 250, 0.86);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.navBrand {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  text-decoration: none;
+}
+
+.navBrandText {
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 1.05rem;
+  color: var(--color-ink);
+}
+
+.navCta {
+  background: var(--color-blue-500);
+  color: var(--color-white);
+  text-decoration: none;
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: 0.85rem;
+  padding: 0.55rem 1.15rem;
+  border-radius: 7px;
+  transition: background 0.15s ease;
+}
+
+.navCta:hover {
+  background: var(--color-blue-600);
+}
+
+/* ---------- Hero ---------- */
+
+.heroSection {
+  position: relative;
   overflow: hidden;
-  background: #f7f8fa;
-  color: #12161c;
+  padding: 2rem clamp(1.5rem, 5vw, 4rem) 4rem;
+  min-height: 88vh;
   display: flex;
   align-items: center;
-  justify-content: center;
-  padding: 1.5rem;
 }
 
-.hero {
-  width: min(880px, 100%);
-  text-align: center;
+.heroGridBg {
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(var(--color-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
+  background-size: 44px 44px;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+.heroSpotlight {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  background: radial-gradient(620px circle at 50% 50%, rgba(59, 130, 246, 0.13), transparent 62%);
+}
+
+.heroScanline {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
+  animation: scanMove 7s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes scanMove {
+  0% {
+    transform: translateY(-120%);
+  }
+  100% {
+    transform: translateY(120%);
+  }
+}
+
+.heroContent {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  max-width: 1240px;
+  margin: 0 auto;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: clamp(2rem, 5vw, 4rem);
+}
+
+.heroTextCol {
+  flex: 1 1 520px;
+  min-width: 0;
+  text-align: left;
 }
 
 .eyebrow {
   margin: 0;
-  color: #8891a0;
-  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
 }
 
 .headline {
-  margin: 0;
-  color: #12161c;
-  font-size: 2.5rem;
-  line-height: 1.15;
-  font-weight: 700;
+  margin: 0.4rem 0 0;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
+  line-height: 1.08;
+  letter-spacing: -0.01em;
 }
 
 .subheadline {
-  margin: 0;
-  color: #5b6472;
-  font-size: 1.1rem;
-  line-height: 1.55;
-  max-width: 800px;
+  margin: 1.1rem 0 0;
+  color: var(--color-ink-muted);
+  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
+  line-height: 1.6;
+  max-width: 560px;
 }
 
-.pillRow {
+/* ---------- Dropzone ---------- */
+
+.dropzone {
+  margin-top: 1.6rem;
   display: inline-flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.75rem;
-  margin-top: 0.25rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.3rem;
+  padding: 1.4rem 1.75rem;
+  border-radius: 14px;
+  border: 2px dashed var(--color-border);
+  background: var(--color-white);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+  min-width: 360px;
 }
 
-.pill {
-  border: 1px solid #d7dce3;
-  background: #eef1f5;
-  color: #3d4451;
-  border-radius: 999px;
-  padding: 0.3rem 0.85rem;
-  font-size: 0.8rem;
+.dropzoneDragging {
+  border-color: var(--color-blue-500);
+  background: rgba(59, 130, 246, 0.07);
 }
 
-.cta {
-  margin-top: 0.25rem;
-  background: #3b82f6;
-  color: #ffffff;
-  border: none;
-  border-radius: 8px;
-  padding: 0.75rem 2rem;
+.dropzoneLabel {
+  font-family: var(--font-display);
+  font-weight: 500;
   font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.15s ease, transform 0.15s ease;
+  color: var(--color-ink);
 }
 
-.cta:hover {
-  background: #2563eb;
-  transform: translateY(-1px);
+.dropzoneHint {
+  font-family: var(--font-display);
+  font-size: 0.85rem;
+  color: var(--color-ink-faint);
 }
 
-.ghostLink {
-  margin-top: -0.1rem;
-  color: #8891a0;
-  font-size: 0.8rem;
-  text-decoration: none;
+.pillRow {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.6rem;
+  margin-top: 1.1rem;
+}
+
+.pill {
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-alt);
+  color: var(--color-ink-muted);
+  border-radius: 999px;
+  padding: 0.3rem 0.85rem;
+  font-size: 0.78rem;
+}
+
+.linkRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem 1.2rem;
+  margin-top: 1rem;
 }
 
 .guideLink {
-  margin-top: 0.5rem;
-  color: #3b82f6;
-  font-size: 0.85rem;
+  color: var(--color-blue-500);
   text-decoration: none;
+  font-size: 0.85rem;
 }
 
 .guideLink:hover {
-  color: #2563eb;
+  color: var(--color-blue-600);
 }
 
 .supported {
-  margin: 0.3rem 0 0;
-  color: #8891a0;
-  font-size: 0.75rem;
+  margin: 0.6rem 0 0;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
 }
 
-/* Below-the-fold sections */
+/* ---------- Hero visual: stacked 3D-model / 2D-drawing cards ---------- */
 
-.section {
-  background: #f7f8fa;
-  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+.heroVisualCol {
+  flex: 1 1 420px;
+  min-width: 0;
+  position: relative;
   display: flex;
   justify-content: center;
 }
 
-.sectionAlt {
-  background: #eef1f5;
-  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+.heroStack {
+  position: relative;
+  width: 100%;
+  max-width: 440px;
+  height: 400px;
+}
+
+.heroCube {
+  perspective: 900px;
+  position: absolute;
+  top: -9%;
+  right: 2%;
+  z-index: 1;
+  animation: floatY 6s ease-in-out infinite;
+}
+
+@keyframes floatY {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-12px);
+  }
+}
+
+.heroCubeInner {
+  width: 110px;
+  height: 110px;
+  position: relative;
+  transform-style: preserve-3d;
+  animation: cubeSpin 18s linear infinite;
+}
+
+@keyframes cubeSpin {
+  from {
+    transform: rotateX(-20deg) rotateY(0deg);
+  }
+  to {
+    transform: rotateX(-20deg) rotateY(360deg);
+  }
+}
+
+.heroCubeFace {
+  position: absolute;
+  inset: 0;
+  border: 1px solid rgba(59, 130, 246, 0.5);
+  background: rgba(59, 130, 246, 0.04);
+}
+
+.heroImgLabel {
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  z-index: 2;
+  background: rgba(15, 23, 42, 0.75);
+  color: var(--color-white);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+  letter-spacing: 0.08em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+}
+
+.heroCardBack,
+.heroCardFront {
+  position: absolute;
+  border-radius: 10px;
+  border: 1px solid var(--color-border);
+  background: var(--color-white);
+  overflow: hidden;
+}
+
+.heroCardBack {
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 68%;
+  box-shadow: 0 20px 45px -22px rgba(15, 23, 42, 0.35);
+  transform: rotate(-5deg);
+}
+
+.heroCardFront {
+  bottom: 0;
+  right: 0;
+  z-index: 3;
+  width: 60%;
+  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.35);
+  transform: rotate(3deg);
+}
+
+.heroCardImg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.heroConnector {
+  position: absolute;
+  top: 44%;
+  left: 42%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-blue-500);
   display: flex;
+  align-items: center;
   justify-content: center;
+  z-index: 4;
+  box-shadow: 0 8px 20px -6px rgba(59, 130, 246, 0.6);
+}
+
+@media (max-width: 860px) {
+  .heroSection {
+    padding: 2.5rem 1.25rem 3rem;
+    min-height: auto;
+  }
+
+  .heroContent {
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .heroTextCol {
+    text-align: center;
+  }
+
+  .dropzone {
+    align-items: center;
+    min-width: 100%;
+  }
+
+  .pillRow,
+  .linkRow {
+    justify-content: center;
+  }
+
+  .heroStack {
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+  }
+
+  .heroCube {
+    display: none;
+  }
+
+  .heroCardBack,
+  .heroCardFront {
+    position: relative;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    transform: none;
+  }
+
+  .heroCardBack {
+    width: 78%;
+  }
+
+  .heroCardFront {
+    width: 68%;
+  }
+
+  .heroConnector {
+    display: none;
+  }
 }
 
-.sectionInner {
-  width: min(960px, 100%);
+/* ---------- Icon tile (shared by capability cards) ---------- */
+
+.iconTile {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  border-radius: 10px;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
   display: flex;
-  flex-direction: column;
-  gap: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.iconTileLg {
+  width: 72px;
+  height: 72px;
+}
+
+.iconTileCorner {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+}
+
+.iconTileCorner[data-corner="tl"] {
+  top: 7px;
+  left: 7px;
+  border-top: 2px solid var(--color-blue-500);
+  border-left: 2px solid var(--color-blue-500);
 }
 
+.iconTileCorner[data-corner="tr"] {
+  top: 7px;
+  right: 7px;
+  border-top: 2px solid var(--color-blue-500);
+  border-right: 2px solid var(--color-blue-500);
+}
+
+.iconTileCorner[data-corner="bl"] {
+  bottom: 7px;
+  left: 7px;
+  border-bottom: 2px solid var(--color-blue-500);
+  border-left: 2px solid var(--color-blue-500);
+}
+
+.iconTileCorner[data-corner="br"] {
+  bottom: 7px;
+  right: 7px;
+  border-bottom: 2px solid var(--color-blue-500);
+  border-right: 2px solid var(--color-blue-500);
+}
+
+/* ---------- Shared section heading ---------- */
+
 .sectionHeading {
   margin: 0;
-  color: #12161c;
-  font-size: 1.75rem;
-  font-weight: 700;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
   text-align: center;
 }
 
-.sectionParagraph {
-  margin: 0 auto;
-  max-width: 720px;
-  color: #5b6472;
+/* ---------- Stats strip placement ---------- */
+
+.statsOuter {
+  display: flex;
+  justify-content: center;
+  padding: 0 1.5rem 3.5rem;
+  margin-top: -3rem;
+  position: relative;
+  z-index: 3;
+}
+
+.statsRevealWrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 860px) {
+  .statsOuter {
+    padding: 0 1.25rem 2.5rem;
+    margin-top: 0;
+  }
+}
+
+/* ---------- How it works ---------- */
+
+.howSection {
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  background: var(--color-bg);
+}
+
+.stepsRow {
+  max-width: 1000px;
+  margin: 2.5rem auto 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.75rem;
+}
+
+@media (max-width: 860px) {
+  .stepsRow {
+    grid-template-columns: 1fr;
+  }
+}
+
+.stepBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 1px solid var(--color-blue-500);
+  color: var(--color-blue-500);
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+.stepTitle {
+  margin: 0.9rem 0 0;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-weight: 500;
   font-size: 1.05rem;
-  line-height: 1.7;
-  text-align: center;
 }
 
-.capabilityGrid {
+.stepDescription {
+  margin: 0.4rem 0 0;
+  color: var(--color-ink-muted);
+  font-size: 0.92rem;
+  line-height: 1.6;
+}
+
+/* ---------- Capabilities ---------- */
+
+.capSection {
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  background: var(--color-bg);
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.capFeature {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.5rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 2rem;
+  margin-top: 2.5rem;
+}
+
+.capGrid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1.25rem;
+  margin-top: 1.25rem;
 }
 
-.capabilityCard {
-  background: #ffffff;
-  border: 1px solid #d7dce3;
-  border-radius: 12px;
-  padding: 1.5rem 1.75rem;
+@media (max-width: 860px) {
+  .capFeature {
+    flex-direction: column;
+  }
+
+  .capGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.capCard {
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  padding: 1.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.6rem;
+  position: relative;
+  transition: border-color 0.15s ease, transform 0.15s ease;
 }
 
-.capabilityTitle {
-  margin: 0;
-  color: #12161c;
+.capCard:hover {
+  border-color: var(--color-blue-500);
+  transform: translateY(-2px);
+}
+
+.capTitle {
+  margin: 0.3rem 0 0;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-weight: 500;
   font-size: 1.05rem;
-  font-weight: 700;
 }
 
-.capabilityDescription {
+.capDesc {
   margin: 0;
-  color: #5b6472;
-  font-size: 0.95rem;
+  color: var(--color-ink-muted);
+  font-size: 0.93rem;
   line-height: 1.65;
 }
 
-.faqGrid {
+.amberTag {
+  position: absolute;
+  top: 1.25rem;
+  right: 1.25rem;
+  background: var(--color-amber-50);
+  color: var(--color-amber-700);
+  border: 1px solid var(--color-amber-500);
+  border-radius: 999px;
+  padding: 0.15rem 0.6rem;
+  font-size: 0.68rem;
+  font-family: var(--font-mono);
+}
+
+/* ---------- Why it's free ---------- */
+
+.whyFreeSection {
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  background: var(--color-navy-900);
   display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
+  justify-content: center;
 }
 
-.faqItem {
-  background: #ffffff;
-  border: 1px solid #d7dce3;
-  border-radius: 12px;
-  padding: 0.35rem 1.5rem;
+.whyFreeInner {
+  width: min(980px, 100%);
+  display: flex;
+  align-items: center;
+  gap: 2.5rem;
 }
 
-.faqItem[open] {
-  padding-bottom: 1.25rem;
+.whyFreeText {
+  flex: 1 1 360px;
+  min-width: 0;
 }
 
-.faqQuestion {
+.whyFreeHeading {
   margin: 0;
-  padding: 1rem 0;
-  color: #12161c;
+  color: var(--color-white);
+  font-family: var(--font-display);
+  font-weight: 500;
+  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
+}
+
+.whyFreeParagraph {
+  margin: 1rem 0 0;
+  color: #cbd5e1;
   font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  line-height: 1.7;
+  max-width: 520px;
 }
 
-.faqQuestion::-webkit-details-marker {
-  display: none;
+.whyFreeDiagram {
+  flex: 0 0 260px;
 }
 
-.faqQuestion::after {
-  content: "+";
-  flex: none;
-  color: #3b82f6;
-  font-size: 1.3rem;
-  font-weight: 400;
-  transition: transform 0.15s ease;
+@media (max-width: 860px) {
+  .whyFreeInner {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .whyFreeParagraph {
+    max-width: none;
+  }
 }
 
-.faqItem[open] .faqQuestion::after {
-  transform: rotate(45deg);
+/* ---------- FAQ ---------- */
+
+.faqSection {
+  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
+  background: var(--color-bg);
+  display: flex;
+  justify-content: center;
 }
 
-.faqAnswer {
-  margin: 0.25rem 0 0;
-  color: #5b6472;
-  font-size: 0.95rem;
-  line-height: 1.65;
+.faqInner {
+  width: min(760px, 100%);
+}
+
+.faqList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  margin-top: 1.75rem;
 }
 
+/* ---------- Footer ---------- */
+
 .footer {
-  background: #f7f8fa;
-  padding: 2rem 1.5rem 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.75rem;
+  padding: 2.5rem 1.5rem 3rem;
+  background: var(--color-bg);
 }
 
 .footerLink {
-  color: #8891a0;
-  font-size: 0.85rem;
+  color: var(--color-ink-faint);
   text-decoration: none;
+  font-size: 0.85rem;
 }
 
 .footerLink:hover {
-  color: #3b82f6;
+  color: var(--color-blue-500);
 }
 
 .footerDivider {
-  color: #d7dce3;
+  color: var(--color-border);
   font-size: 0.85rem;
 }
-
-@media (max-width: 768px) {
-  .page {
-    padding: 1.25rem;
-  }
-
-  .headline {
-    font-size: 1.75rem;
-  }
-
-  .subheadline {
-    font-size: 1rem;
-  }
-
-  .capabilityGrid {
-    grid-template-columns: 1fr;
-  }
-
-  .sectionHeading {
-    font-size: 1.4rem;
-  }
-}
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 4bf7bc7..b1fc92a 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -1,9 +1,19 @@
-import { motion } from "framer-motion";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Head } from "vite-react-ssg";
+import AccordionItem from "../components/AccordionItem";
+import Reveal from "../components/Reveal";
+import StatsStrip, { type Stat } from "../components/StatsStrip";
 import { setPendingFile } from "../fileStore";
-import AnimatedBackground from "./AnimatedBackground";
+import {
+  AssemblyIcon,
+  ConnectorArrowIcon,
+  IconTile,
+  MeasureIcon,
+  PdfExportIcon,
+  UploadIcon,
+  ViewFormatsIcon,
+} from "./landingIcons";
 import styles from "./Landing.module.css";
 import TriangleMark from "./TriangleMark";
 
@@ -14,26 +24,21 @@ const FEATURE_PILLS = [
   "2D Drawing Export",
 ];
 
-const CAPABILITIES: { title: string; description: string }[] = [
+const STEPS: { title: string; description: string }[] = [
   {
-    title: "View any CAD format, instantly.",
+    title: "Drop a file",
     description:
-      "STEP, IGES, STL, OBJ, 3MF, BREP, and GLB open directly in the browser. Orbit, pan, section, and measure edges — no plugin, no viewer app to install separately.",
+      "STEP, IGES, STL, OBJ, 3MF, BREP, or GLB. Everything runs in your browser — nothing is uploaded.",
   },
   {
-    title: "Generate a real 2D engineering drawing.",
+    title: "Orbit, measure, section",
     description:
-      "Click Generate 2D Drawing and get Front, Top, and Right orthographic views in third-angle projection, an isometric reference view, and automatic dimensioning — hole sizes, locations, and overall dimensions placed per standard drafting convention, not just wherever fits visually. Export as a true-to-scale PDF: printed at 100%, the dimensions on the page match the real part.",
+      "Inspect the part from any angle, click edges to measure, or slice it with a section plane.",
   },
   {
-    title: "Work with assemblies.",
+    title: "Generate a 2D drawing",
     description:
-      "Explode and disassemble multi-part files, and export any individual part as its own STEP file.",
-  },
-  {
-    title: "Measure what matters.",
-    description:
-      "Click-to-measure edges, apply section planes, and compare scale against common reference objects.",
+      "Export dimensioned Front, Top, and Right views as a true-to-scale PDF.",
   },
 ];
 
@@ -64,6 +69,15 @@ const FAQS: { question: string; answer: string }[] = [
   },
 ];
 
+// Real, currently-true numbers only — no placeholder/aspirational figures.
+// "Supported" formats count matches the list in the .supported paragraph
+// below (STEP, IGES, STL, OBJ, 3MF, BREP, GLB, DXF = 8).
+const STATS: Stat[] = [
+  { value: 8, label: "File formats supported" },
+  { value: 100, suffix: "%", label: "Processed client-side" },
+  { value: 0, prefix: "$", label: "Cost to use" },
+];
+
 const FAQ_JSON_LD = {
   "@context": "https://schema.org",
   "@type": "FAQPage",
@@ -80,28 +94,66 @@ const FAQ_JSON_LD = {
 export default function Landing() {
   const navigate = useNavigate();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
+  const heroSpotlightRef = useRef<HTMLDivElement>(null);
+  const [pageDragging, setPageDragging] = useState(false);
+  const [zoneDragging, setZoneDragging] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrolled((prev) => {
+        const next = window.scrollY > 10;
+        return prev === next ? prev : next;
+      });
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  const acceptFile = (file: File) => {
+    setPendingFile(file);
+    navigate("/viewer");
+  };
 
-  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+  const onHeroMouseMove = (e: React.MouseEvent<HTMLElement>) => {
+    const el = heroSpotlightRef.current;
+    if (!el) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - rect.left) / rect.width) * 100;
+    const y = ((e.clientY - rect.top) / rect.height) * 100;
+    el.style.background = `radial-gradient(620px circle at ${x}% ${y}%, rgba(59,130,246,0.13), transparent 62%)`;
+  };
+
+  const onPageDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setIsDragging(true);
+    setPageDragging(true);
   };
 
-  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+  const onPageDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
-    setIsDragging(false);
+    setPageDragging(false);
   };
 
-  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+  const onPageDrop = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    setIsDragging(false);
+    setPageDragging(false);
+    setZoneDragging(false);
     const file = e.dataTransfer.files[0];
-    if (file) {
-      setPendingFile(file);
-      navigate("/viewer");
-    }
+    if (file) acceptFile(file);
+  };
+
+  const onZoneDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setZoneDragging(true);
+  };
+
+  const onZoneDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setZoneDragging(false);
   };
 
   return (
@@ -120,218 +172,293 @@ export default function Landing() {
           {JSON.stringify(FAQ_JSON_LD)}
         </script>
       </Head>
+
       <div
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        style={{
-          colorScheme: "light",
-          position: "relative",
-          overflow: "hidden",
-          width: "100vw",
-          height: "100vh",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          outline: isDragging ? "2px solid #3b82f6" : "2px solid transparent",
-          outlineOffset: "-4px",
-          transition: "outline 0.15s ease",
-        }}
+        className={[styles.page, pageDragging ? styles.pageDragging : ""]
+          .filter(Boolean)
+          .join(" ")}
+        onDragOver={onPageDragOver}
+        onDragLeave={onPageDragLeave}
+        onDrop={onPageDrop}
       >
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".step,.stp,.iges,.igs,.stl,.obj,.3mf,.glb,.gltf,.brep,.dxf"
-          style={{ display: "none" }}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) {
-              setPendingFile(file);
-              navigate("/viewer");
-            }
-          }}
-        />
+        <nav className={[styles.nav, scrolled ? styles.navScrolled : ""].filter(Boolean).join(" ")}>
+          <a href="/" className={styles.navBrand}>
+            <TriangleMark size={26} />
+            <span className={styles.navBrandText}>CAD Viewer</span>
+          </a>
+          <a href="/viewer" className={styles.navCta}>
+            Launch Viewer
+          </a>
+        </nav>
 
-        {/* LAYER 0: animated canvas — must be first child */}
-        <AnimatedBackground />
-
-        {/* LAYER 1: soft fog — dims the grid/scan behind the hero content, */}
-        {/* stays visible in the empty margins around it */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            background:
-              "radial-gradient(circle at 50% 50%, #f7f8fa 0%, #f7f8fa 45%, rgba(247,248,250,0) 100%)",
-            pointerEvents: "none",
-            zIndex: 1,
-          }}
-        />
+        <section className={styles.heroSection} onMouseMove={onHeroMouseMove}>
+          <div className={styles.heroGridBg} aria-hidden="true" />
+          <div ref={heroSpotlightRef} className={styles.heroSpotlight} aria-hidden="true" />
+          <div className={styles.heroScanline} aria-hidden="true" />
 
-        {/* LAYER 2: hero content — must be above canvas and fog */}
-        <main
-          style={{
-            position: "relative",
-            zIndex: 2,
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <motion.section
-            className={styles.hero}
-            initial={{ opacity: 0, y: 24 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5, ease: "easeOut" }}
-          >
-            <TriangleMark size={108} />
-
-            <p className={styles.eyebrow}>
-              Browser-based · No install · Offline-capable
-            </p>
-            <h1 className={styles.headline}>
-              View your CAD parts in the browser.
-            </h1>
-            <p className={styles.subheadline}>
-              Drop a STEP, IGES, STL, OBJ, 3MF, BREP, or GLB file and orbit,
-              measure, and snapshot in seconds — or generate a dimensioned 2D
-              engineering drawing straight from the model.
-            </p>
-
-            <div className={styles.pillRow}>
-              {FEATURE_PILLS.map((pill) => (
-                <span key={pill} className={styles.pill}>
-                  {pill}
+          <div className={styles.heroContent}>
+            <div className={styles.heroTextCol}>
+              <p className={styles.eyebrow}>
+                Browser-based · No install · Offline-capable
+              </p>
+              <h1 className={styles.headline}>
+                View your CAD parts in the browser.
+              </h1>
+              <p className={styles.subheadline}>
+                Drop a STEP, IGES, STL, OBJ, 3MF, BREP, or GLB file and orbit,
+                measure, and snapshot in seconds — or generate a dimensioned
+                2D engineering drawing straight from the model.
+              </p>
+
+              <div
+                className={[styles.dropzone, zoneDragging ? styles.dropzoneDragging : ""]
+                  .filter(Boolean)
+                  .join(" ")}
+                onDragOver={onZoneDragOver}
+                onDragLeave={onZoneDragLeave}
+                onDrop={onPageDrop}
+                onClick={() => fileInputRef.current?.click()}
+                role="button"
+                tabIndex={0}
+              >
+                <IconTile>
+                  <UploadIcon />
+                </IconTile>
+                <span className={styles.dropzoneLabel}>
+                  {zoneDragging ? "Drop it here" : "Drop your CAD file here"}
                 </span>
-              ))}
-            </div>
+                <span className={styles.dropzoneHint}>or click to browse</span>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".step,.stp,.iges,.igs,.stl,.obj,.3mf,.glb,.gltf,.brep,.dxf"
+                  style={{ display: "none" }}
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    e.target.value = "";
+                    if (file) acceptFile(file);
+                  }}
+                />
+              </div>
 
-            <button
-              type="button"
-              onClick={() => fileInputRef.current?.click()}
-              style={{
-                background: "#2563eb",
-                color: "#ffffff",
-                border: "none",
-                borderRadius: "8px",
-                padding: "0.75rem 2rem",
-                fontSize: "1rem",
-                fontWeight: 600,
-                cursor: "pointer",
-                transition: "background 0.15s ease, transform 0.15s ease",
-              }}
-              onMouseEnter={(e) => {
-                (e.currentTarget as HTMLButtonElement).style.background =
-                  "#1d4ed8";
-                (e.currentTarget as HTMLButtonElement).style.transform =
-                  "translateY(-1px)";
-              }}
-              onMouseLeave={(e) => {
-                (e.currentTarget as HTMLButtonElement).style.background =
-                  "#2563eb";
-                (e.currentTarget as HTMLButtonElement).style.transform =
-                  "translateY(0)";
-              }}
-            >
-              Upload CAD File
-            </button>
+              <div className={styles.pillRow}>
+                {FEATURE_PILLS.map((pill) => (
+                  <span key={pill} className={styles.pill}>
+                    {pill}
+                  </span>
+                ))}
+              </div>
 
-            <a className={styles.ghostLink} href="/viewer">
-              or drag a file anywhere on the page
-            </a>
+              <div className={styles.linkRow}>
+                <a className={styles.guideLink} href="/guides/split-step-assembly">
+                  Need to split an assembly into parts? Read the guide →
+                </a>
+                <a className={styles.guideLink} href="/guides/step-file-to-2d-drawing">
+                  Need a 2D drawing from a STEP file? Read the guide →
+                </a>
+              </div>
 
-            <a className={styles.guideLink} href="/guides/split-step-assembly">
-              Need to split an assembly into parts? Read the guide →
-            </a>
+              <p className={styles.supported}>
+                Supported: STEP · IGES · STL · OBJ · 3MF · BREP · GLB · DXF
+              </p>
+            </div>
 
-            <a
-              className={styles.guideLink}
-              href="/guides/step-file-to-2d-drawing"
-            >
-              Need a 2D drawing from a STEP file? Read the guide →
-            </a>
-
-            <p className={styles.supported}>
-              Supported: STEP · IGES · STL · OBJ · 3MF · BREP · GLB · DXF
-            </p>
-          </motion.section>
-        </main>
-      </div>
+            <div className={styles.heroVisualCol} aria-hidden="true">
+              <div className={styles.heroStack}>
+                <div className={styles.heroCube}>
+                  <div className={styles.heroCubeInner}>
+                    <div className={styles.heroCubeFace} style={{ transform: "translateZ(55px)" }} />
+                    <div className={styles.heroCubeFace} style={{ transform: "rotateY(180deg) translateZ(55px)" }} />
+                    <div className={styles.heroCubeFace} style={{ transform: "rotateY(90deg) translateZ(55px)" }} />
+                    <div className={styles.heroCubeFace} style={{ transform: "rotateY(-90deg) translateZ(55px)" }} />
+                    <div className={styles.heroCubeFace} style={{ transform: "rotateX(90deg) translateZ(55px)" }} />
+                    <div className={styles.heroCubeFace} style={{ transform: "rotateX(-90deg) translateZ(55px)" }} />
+                  </div>
+                </div>
 
-      <section className={styles.section}>
-        <div className={styles.sectionInner}>
-          <h2 className={styles.sectionHeading}>What you can do with it</h2>
-          <div className={styles.capabilityGrid}>
-            {CAPABILITIES.map((capability) => (
-              <div key={capability.title} className={styles.capabilityCard}>
-                <h3 className={styles.capabilityTitle}>{capability.title}</h3>
-                <p className={styles.capabilityDescription}>
-                  {capability.description}
-                </p>
+                <div className={styles.heroCardBack}>
+                  <div className={styles.heroImgLabel}>3D MODEL</div>
+                  <img src="/hero/3d-model-render.png" alt="" className={styles.heroCardImg} />
+                </div>
+
+                <div className={styles.heroConnector}>
+                  <ConnectorArrowIcon />
+                </div>
+
+                <div className={styles.heroCardFront}>
+                  <div className={styles.heroImgLabel}>2D DRAWING</div>
+                  <img
+                    src="/hero/generated-drawing.png"
+                    alt=""
+                    width={1280}
+                    height={953}
+                    className={styles.heroCardImg}
+                  />
+                </div>
               </div>
-            ))}
+            </div>
           </div>
-        </div>
-      </section>
-
-      <section className={styles.sectionAlt}>
-        <div className={styles.sectionInner}>
-          <h2 className={styles.sectionHeading}>Why it&rsquo;s free</h2>
-          <p className={styles.sectionParagraph}>
-            Every file you load is processed entirely in your browser —
-            nothing is uploaded to a server. That&rsquo;s not a privacy
-            feature bolted on top; it&rsquo;s the whole architecture, built
-            on OpenCascade compiled to WebAssembly. Because nothing runs
-            server-side, there&rsquo;s no hosting cost that scales with
-            usage, which is what makes it possible to keep this free rather
-            than metered or subscription-gated.
-          </p>
-        </div>
-      </section>
-
-      <section className={styles.section}>
-        <div className={styles.sectionInner}>
-          <h2 className={styles.sectionHeading}>
-            Frequently asked questions
-          </h2>
-          <div className={styles.faqGrid}>
-            {FAQS.map((faq) => (
-              <details className={styles.faqItem} key={faq.question}>
-                <summary className={styles.faqQuestion}>
-                  {faq.question}
-                </summary>
-                <p className={styles.faqAnswer}>{faq.answer}</p>
-              </details>
+        </section>
+
+        <section className={styles.statsOuter}>
+          <Reveal
+            as="div"
+            className={styles.statsRevealWrap}
+            distancePx={28}
+            durationMs={600}
+          >
+            <StatsStrip stats={STATS} />
+          </Reveal>
+        </section>
+
+        <section className={styles.howSection}>
+          <h2 className={styles.sectionHeading}>How it works</h2>
+          <div className={styles.stepsRow}>
+            {STEPS.map((step, index) => (
+              <Reveal
+                as="div"
+                key={step.title}
+                distancePx={28}
+                durationMs={600}
+                delayMs={index * 80}
+              >
+                <span className={styles.stepBadge}>0{index + 1}</span>
+                <h3 className={styles.stepTitle}>{step.title}</h3>
+                <p className={styles.stepDescription}>{step.description}</p>
+              </Reveal>
             ))}
           </div>
-        </div>
-      </section>
-
-      <footer className={styles.footer}>
-        <a className={styles.footerLink} href="/about">
-          About
-        </a>
-        <span className={styles.footerDivider} aria-hidden="true">
-          ·
-        </span>
-        <a
-          className={styles.footerLink}
-          href="/guides/step-file-to-2d-drawing"
-        >
-          Guides
-        </a>
-        <span className={styles.footerDivider} aria-hidden="true">
-          ·
-        </span>
-        <a
-          className={styles.footerLink}
-          href="mailto:devarajhello@gmail.com"
-        >
-          Report an issue
-        </a>
-      </footer>
+        </section>
+
+        <section className={styles.capSection}>
+          <h2 className={styles.sectionHeading}>What you can do with it</h2>
+
+          <Reveal as="div" className={styles.capFeature} distancePx={28} durationMs={600}>
+            <IconTile size="lg">
+              <ViewFormatsIcon />
+            </IconTile>
+            <div>
+              <h3 className={styles.capTitle}>View any CAD format, instantly.</h3>
+              <p className={styles.capDesc}>
+                STEP, IGES, STL, OBJ, 3MF, BREP, and GLB open directly in the
+                browser. Orbit, pan, section, and measure edges — no plugin,
+                no viewer app to install separately.
+              </p>
+            </div>
+          </Reveal>
+
+          <div className={styles.capGrid}>
+            <div className={styles.capCard}>
+              <span className={styles.amberTag}>PDF export</span>
+              <IconTile>
+                <PdfExportIcon />
+              </IconTile>
+              <h3 className={styles.capTitle}>
+                Generate a real 2D engineering drawing.
+              </h3>
+              <p className={styles.capDesc}>
+                Click Generate 2D Drawing and get Front, Top, and Right
+                orthographic views in third-angle projection, an isometric
+                reference view, and automatic dimensioning — hole sizes,
+                locations, and overall dimensions placed per standard
+                drafting convention, not just wherever fits visually. Export
+                as a true-to-scale PDF: printed at 100%, the dimensions on
+                the page match the real part.
+              </p>
+            </div>
+            <div className={styles.capCard}>
+              <IconTile>
+                <AssemblyIcon />
+              </IconTile>
+              <h3 className={styles.capTitle}>Work with assemblies.</h3>
+              <p className={styles.capDesc}>
+                Explode and disassemble multi-part files, and export any
+                individual part as its own STEP file.
+              </p>
+            </div>
+            <div className={styles.capCard}>
+              <IconTile>
+                <MeasureIcon />
+              </IconTile>
+              <h3 className={styles.capTitle}>Measure what matters.</h3>
+              <p className={styles.capDesc}>
+                Click-to-measure edges, apply section planes, and compare
+                scale against common reference objects.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.whyFreeSection}>
+          <Reveal as="div" className={styles.whyFreeInner} distancePx={28} durationMs={600}>
+            <div className={styles.whyFreeText}>
+              <h2 className={styles.whyFreeHeading}>Why it&rsquo;s free</h2>
+              <p className={styles.whyFreeParagraph}>
+                Every file you load is processed entirely in your browser —
+                nothing is uploaded to a server. That&rsquo;s not a privacy
+                feature bolted on top; it&rsquo;s the whole architecture,
+                built on OpenCascade compiled to WebAssembly. Because nothing
+                runs server-side, there&rsquo;s no hosting cost that scales
+                with usage, which is what makes it possible to keep this
+                free rather than metered or subscription-gated.
+              </p>
+            </div>
+            <svg
+              viewBox="0 0 280 110"
+              width="260"
+              height="102"
+              className={styles.whyFreeDiagram}
+              aria-hidden="true"
+            >
+              <rect x="12" y="15" width="110" height="78" rx="6" fill="none" stroke="#ffffff" strokeWidth="2" />
+              <text x="67" y="58" fill="#ffffff" fontFamily="IBM Plex Mono, monospace" fontSize="11" textAnchor="middle">
+                Your browser
+              </text>
+              <path d="M45,30 L55,20 L65,30 M55,20 L55,45" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              <path d="M75,30 L85,20 L95,30 M85,20 L85,45" fill="none" stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              <rect x="168" y="15" width="100" height="78" rx="6" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="2" strokeDasharray="5 5" />
+              <text x="218" y="58" fill="rgba(255,255,255,0.5)" fontFamily="IBM Plex Mono, monospace" fontSize="11" textAnchor="middle">
+                Server
+              </text>
+              <line x1="172" y1="19" x2="264" y2="89" stroke="rgba(255,255,255,0.45)" strokeWidth="2" />
+            </svg>
+          </Reveal>
+        </section>
+
+        <section className={styles.faqSection}>
+          <Reveal as="div" className={styles.faqInner} distancePx={28} durationMs={600}>
+            <h2 className={styles.sectionHeading}>Frequently asked questions</h2>
+            <div className={styles.faqList}>
+              {FAQS.map((faq) => (
+                <AccordionItem
+                  key={faq.question}
+                  question={faq.question}
+                  answer={faq.answer}
+                  icon="plus"
+                />
+              ))}
+            </div>
+          </Reveal>
+        </section>
+
+        <footer className={styles.footer}>
+          <a className={styles.footerLink} href="/about">
+            About
+          </a>
+          <span className={styles.footerDivider} aria-hidden="true">
+            ·
+          </span>
+          <a className={styles.footerLink} href="/guides/step-file-to-2d-drawing">
+            Guides
+          </a>
+          <span className={styles.footerDivider} aria-hidden="true">
+            ·
+          </span>
+          <a className={styles.footerLink} href="mailto:devarajhello@gmail.com">
+            Report an issue
+          </a>
+        </footer>
+      </div>
     </>
   );
 }
diff --git a/src/pages/TriangleMark.tsx b/src/pages/TriangleMark.tsx
index d863a4f..3381fac 100644
--- a/src/pages/TriangleMark.tsx
+++ b/src/pages/TriangleMark.tsx
@@ -12,7 +12,7 @@ export default function TriangleMark({ size = 108 }: { size?: number }) {
       <path
         d={TRIANGLE_PATH}
         fill="none"
-        stroke="#3b82f6"
+        style={{ stroke: "var(--color-blue-500)" }}
         strokeWidth={6}
         strokeLinejoin="round"
         strokeLinecap="round"
@@ -22,7 +22,7 @@ export default function TriangleMark({ size = 108 }: { size?: number }) {
         y1={85}
         x2={82}
         y2={85}
-        stroke="#3b82f6"
+        style={{ stroke: "var(--color-blue-500)" }}
         strokeWidth={6}
         strokeLinecap="round"
       />
diff --git a/src/pages/guides/SplitStepAssembly.module.css b/src/pages/guides/SplitStepAssembly.module.css
index 3695378..702dfa4 100644
--- a/src/pages/guides/SplitStepAssembly.module.css
+++ b/src/pages/guides/SplitStepAssembly.module.css
@@ -2,6 +2,7 @@
   overflow-y: auto;
   height: auto;
   min-height: 100vh;
+  font-family: var(--font-display);
 }
 
 :global(body.guide-page #root) {
@@ -11,11 +12,11 @@
 
 .page {
   min-height: 100vh;
-  background: #fafafa;
-  color: #1a1a1a;
+  background: var(--color-bg);
+  color: var(--color-ink);
   display: flex;
   justify-content: center;
-  padding: 4rem 1.5rem 6rem;
+  padding: 4rem 1.5rem 0;
 }
 
 .article {
@@ -23,9 +24,11 @@
   display: flex;
   flex-direction: column;
   gap: clamp(3rem, 5vw, 4rem);
+  padding-bottom: clamp(3rem, 5vw, 4rem);
 }
 
 .section {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -34,21 +37,24 @@
 .breadcrumb {
   display: inline-flex;
   align-self: flex-start;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 0.9rem;
   text-decoration: none;
 }
 
 .breadcrumb:hover {
-  color: #3b82f6;
+  color: var(--color-blue-500);
+}
+
+.breadcrumb:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
 }
 
 .eyebrow {
   margin: 0;
-  color: #6b7280;
-  font-family:
-    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -56,36 +62,36 @@
 
 .headline {
   margin: 0.5rem 0 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 2.25rem;
   line-height: 1.2;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .intro {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.1rem;
   line-height: 1.7;
 }
 
 .lede {
   margin: 0;
-  color: #1f2937;
+  color: var(--color-ink);
   font-size: 1.1rem;
   line-height: 1.7;
 }
 
 .sectionHeading {
   margin: 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .paragraph {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.05rem;
   line-height: 1.7;
 }
@@ -93,7 +99,7 @@
 .list {
   margin: 0;
   padding-left: 1.25rem;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.05rem;
   line-height: 1.7;
   display: flex;
@@ -102,13 +108,18 @@
 }
 
 .externalLink {
-  color: #2563eb;
+  color: var(--color-blue-600);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
 .externalLink:hover {
-  color: #1d4ed8;
+  color: var(--color-blue-700);
+}
+
+.externalLink:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
 }
 
 /* "Why you'd need to do this" cards */
@@ -122,13 +133,20 @@
 }
 
 .reasonCard {
-  background: #f3f4f6;
-  border: 1px solid #e5e7eb;
+  position: relative;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 1.1rem 1.4rem;
-  color: #374151;
+  color: var(--color-ink-muted);
   font-size: 1.02rem;
   line-height: 1.6;
+  transition: border-color 0.14s ease-out;
+}
+
+.reasonCard:hover,
+.reasonCard:focus-within {
+  border-color: var(--color-blue-500);
 }
 
 /* Numbered step cards */
@@ -142,13 +160,20 @@
 }
 
 .stepCard {
+  position: relative;
   display: flex;
   align-items: flex-start;
   gap: 1.1rem;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 1.25rem 1.5rem;
+  transition: border-color 0.14s ease-out;
+}
+
+.stepCard:hover,
+.stepCard:focus-within {
+  border-color: var(--color-blue-500);
 }
 
 .stepNumber {
@@ -159,10 +184,11 @@
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 999px;
-  background: #eff6ff;
-  color: #3b82f6;
+  background: var(--color-blue-50);
+  color: var(--color-blue-500);
+  font-family: var(--font-mono);
   font-size: 1.15rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .stepBody {
@@ -173,19 +199,20 @@
 
 .stepTitle {
   margin: 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 1.05rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .stepDescription {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1rem;
   line-height: 1.6;
 }
 
 .stepImageWrap {
+  position: relative;
   margin: 0.5rem 0;
 }
 
@@ -196,83 +223,65 @@
   gap: 0.75rem;
 }
 
-.faqItem {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 0.35rem 1.5rem;
-}
-
-.faqItem[open] {
-  padding-bottom: 1.25rem;
-}
-
-.faqQuestion {
-  margin: 0;
-  padding: 1rem 0;
-  color: #1a1a1a;
-  font-size: 1.05rem;
-  font-weight: 600;
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.faqQuestion::-webkit-details-marker {
-  display: none;
-}
-
-.faqQuestion::after {
-  content: "+";
-  flex: none;
-  color: #3b82f6;
-  font-size: 1.3rem;
-  font-weight: 400;
-  transition: transform 0.15s ease;
-}
-
-.faqItem[open] .faqQuestion::after {
-  transform: rotate(45deg);
-}
-
-.faqAnswer {
-  margin: 0.25rem 0 0;
-  color: #4b5563;
-  font-size: 1rem;
-  line-height: 1.65;
-}
-
 .ctaRow {
   margin-top: 0.25rem;
 }
 
 .cta {
   display: inline-block;
-  background: #3b82f6;
-  color: #ffffff;
+  background: var(--color-blue-500);
+  color: var(--color-white);
   border: none;
   border-radius: 8px;
   padding: 0.85rem 2.25rem;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   text-decoration: none;
   box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45);
   transition:
-    background 0.15s ease,
-    transform 0.15s ease;
+    background 0.15s ease-out,
+    transform 0.15s ease-out;
 }
 
 .cta:hover {
-  background: #2563eb;
+  background: var(--color-blue-600);
   transform: translateY(-1px);
 }
 
+.cta:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 4px;
+}
+
+/* The one deliberate navy accent surface on this page — closing CTA band. */
+.ctaBand {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  background: var(--color-navy-900);
+  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.ctaBandInner {
+  width: min(560px, 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  text-align: center;
+}
+
+.ctaBandHeading {
+  margin: 0;
+  color: var(--color-white);
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
 @media (max-width: 768px) {
   .page {
-    padding: 2.5rem 1.25rem 4rem;
+    padding: 2.5rem 1.25rem 0;
   }
 
   .article {
diff --git a/src/pages/guides/SplitStepAssembly.tsx b/src/pages/guides/SplitStepAssembly.tsx
index dc7fce6..de6399a 100644
--- a/src/pages/guides/SplitStepAssembly.tsx
+++ b/src/pages/guides/SplitStepAssembly.tsx
@@ -1,8 +1,15 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { Head } from "vite-react-ssg";
+import AccordionItem from "../../components/AccordionItem";
+import CornerMark from "../../components/CornerMark";
+import Reveal from "../../components/Reveal";
 import styles from "./SplitStepAssembly.module.css";
 
+const MARK_STAGGER_MS = 130;
+const cardMarkDelay = (index: number, offset: number) =>
+  index * 90 + offset;
+
 function ExternalLink({
   href,
   children,
@@ -166,6 +173,12 @@ export default function SplitStepAssembly() {
       <main className={styles.page}>
         <article className={styles.article}>
           <section className={styles.section}>
+            <CornerMark corner="top-left" animate delay={0} />
+            <CornerMark
+              corner="bottom-right"
+              animate
+              delay={MARK_STAGGER_MS}
+            />
             <Link to="/" className={styles.breadcrumb}>
               ← Back to CAD Viewer
             </Link>
@@ -208,10 +221,25 @@ export default function SplitStepAssembly() {
               Why you'd need to do this
             </h2>
             <ul className={styles.cardList}>
-              {WHY_REASONS.map((reason) => (
-                <li className={styles.reasonCard} key={reason}>
+              {WHY_REASONS.map((reason, index) => (
+                <Reveal
+                  as="li"
+                  className={`${styles.reasonCard} cornerMarkSharpen`}
+                  key={reason}
+                  delayMs={index * 70}
+                >
+                  <CornerMark
+                    corner="top-left"
+                    animate
+                    delay={cardMarkDelay(index, 0)}
+                  />
+                  <CornerMark
+                    corner="bottom-right"
+                    animate
+                    delay={cardMarkDelay(index, MARK_STAGGER_MS)}
+                  />
                   {reason}
-                </li>
+                </Reveal>
               ))}
             </ul>
           </section>
@@ -237,7 +265,22 @@ export default function SplitStepAssembly() {
             </h2>
             <ol className={styles.stepList}>
               {earlySteps.map((step, index) => (
-                <li className={styles.stepCard} key={step.title}>
+                <Reveal
+                  as="li"
+                  className={`${styles.stepCard} cornerMarkSharpen`}
+                  key={step.title}
+                  delayMs={index * 70}
+                >
+                  <CornerMark
+                    corner="top-left"
+                    animate
+                    delay={cardMarkDelay(index, 0)}
+                  />
+                  <CornerMark
+                    corner="bottom-right"
+                    animate
+                    delay={cardMarkDelay(index, MARK_STAGGER_MS)}
+                  />
                   <span className={styles.stepNumber}>{index + 1}</span>
                   <div className={styles.stepBody}>
                     <p className={styles.stepTitle}>{step.title}</p>
@@ -245,11 +288,17 @@ export default function SplitStepAssembly() {
                       {step.description}
                     </p>
                   </div>
-                </li>
+                </Reveal>
               ))}
             </ol>
 
             <div className={styles.stepImageWrap}>
+              <CornerMark corner="top-left" animate delay={0} />
+              <CornerMark
+                corner="bottom-right"
+                animate
+                delay={MARK_STAGGER_MS}
+              />
               <img
                 src="/guides/split-step-assembly-demo.png"
                 alt="CAD Viewer showing a multi-part STEP assembly disassembled into separate components, with one part selected and ready to export as its own STEP file"
@@ -262,7 +311,25 @@ export default function SplitStepAssembly() {
 
             <ol className={styles.stepList} start={earlySteps.length + 1}>
               {laterSteps.map((step, index) => (
-                <li className={styles.stepCard} key={step.title}>
+                <Reveal
+                  as="li"
+                  className={`${styles.stepCard} cornerMarkSharpen`}
+                  key={step.title}
+                  delayMs={index * 70}
+                >
+                  <CornerMark
+                    corner="top-left"
+                    animate
+                    delay={cardMarkDelay(earlySteps.length + index, 0)}
+                  />
+                  <CornerMark
+                    corner="bottom-right"
+                    animate
+                    delay={cardMarkDelay(
+                      earlySteps.length + index,
+                      MARK_STAGGER_MS,
+                    )}
+                  />
                   <span className={styles.stepNumber}>
                     {earlySteps.length + index + 1}
                   </span>
@@ -272,7 +339,7 @@ export default function SplitStepAssembly() {
                       {step.description}
                     </p>
                   </div>
-                </li>
+                </Reveal>
               ))}
             </ol>
 
@@ -284,26 +351,43 @@ export default function SplitStepAssembly() {
           <section className={styles.section}>
             <h2 className={styles.sectionHeading}>Frequently asked</h2>
             <div className={styles.faqGrid}>
-              {FAQS.map((faq) => (
-                <details className={styles.faqItem} key={faq.question}>
-                  <summary className={styles.faqQuestion}>
-                    {faq.question}
-                  </summary>
-                  <p className={styles.faqAnswer}>{faq.answer}</p>
-                </details>
+              {FAQS.map((faq, index) => (
+                <Reveal as="div" key={faq.question} delayMs={index * 70}>
+                  <AccordionItem
+                    question={faq.question}
+                    answer={faq.answer}
+                    className="cornerMarkSharpen"
+                  >
+                    <CornerMark
+                      corner="top-left"
+                      animate
+                      delay={cardMarkDelay(index, 0)}
+                    />
+                    <CornerMark
+                      corner="bottom-right"
+                      animate
+                      delay={cardMarkDelay(index, MARK_STAGGER_MS)}
+                    />
+                  </AccordionItem>
+                </Reveal>
               ))}
             </div>
           </section>
-
-          <section className={styles.section}>
-            <div className={styles.ctaRow}>
-              <a className={styles.cta} href="/viewer">
-                Try it now — upload your STEP file
-              </a>
-            </div>
-          </section>
         </article>
       </main>
+
+      <div className={styles.ctaBand}>
+        <div className={styles.ctaBandInner}>
+          <h2 className={styles.ctaBandHeading}>
+            Ready to pull that part out?
+          </h2>
+          <div className={styles.ctaRow}>
+            <a className={styles.cta} href="/viewer">
+              Try it now — upload your STEP file
+            </a>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/pages/guides/StepFileTo2dDrawing.module.css b/src/pages/guides/StepFileTo2dDrawing.module.css
index ba802fc..1a1c965 100644
--- a/src/pages/guides/StepFileTo2dDrawing.module.css
+++ b/src/pages/guides/StepFileTo2dDrawing.module.css
@@ -2,6 +2,7 @@
   overflow-y: auto;
   height: auto;
   min-height: 100vh;
+  font-family: var(--font-display);
 }
 
 :global(body.guide-page #root) {
@@ -11,11 +12,11 @@
 
 .page {
   min-height: 100vh;
-  background: #fafafa;
-  color: #1a1a1a;
+  background: var(--color-bg);
+  color: var(--color-ink);
   display: flex;
   justify-content: center;
-  padding: 4rem 1.5rem 6rem;
+  padding: 4rem 1.5rem 0;
 }
 
 .article {
@@ -23,9 +24,11 @@
   display: flex;
   flex-direction: column;
   gap: clamp(3rem, 5vw, 4rem);
+  padding-bottom: clamp(3rem, 5vw, 4rem);
 }
 
 .section {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -34,21 +37,24 @@
 .breadcrumb {
   display: inline-flex;
   align-self: flex-start;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 0.9rem;
   text-decoration: none;
 }
 
 .breadcrumb:hover {
-  color: #3b82f6;
+  color: var(--color-blue-500);
+}
+
+.breadcrumb:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
 }
 
 .eyebrow {
   margin: 0;
-  color: #6b7280;
-  font-family:
-    "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
+  color: var(--color-ink-faint);
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
@@ -56,36 +62,36 @@
 
 .headline {
   margin: 0.5rem 0 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 2.25rem;
   line-height: 1.2;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .intro {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.1rem;
   line-height: 1.7;
 }
 
 .lede {
   margin: 0;
-  color: #1f2937;
+  color: var(--color-ink);
   font-size: 1.1rem;
   line-height: 1.7;
 }
 
 .sectionHeading {
   margin: 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 1.5rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .paragraph {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.05rem;
   line-height: 1.7;
 }
@@ -93,7 +99,7 @@
 .list {
   margin: 0;
   padding-left: 1.25rem;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1.05rem;
   line-height: 1.7;
   display: flex;
@@ -102,13 +108,18 @@
 }
 
 .externalLink {
-  color: #2563eb;
+  color: var(--color-blue-600);
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
 .externalLink:hover {
-  color: #1d4ed8;
+  color: var(--color-blue-700);
+}
+
+.externalLink:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 2px;
 }
 
 /* Numbered step cards */
@@ -122,13 +133,20 @@
 }
 
 .stepCard {
+  position: relative;
   display: flex;
   align-items: flex-start;
   gap: 1.1rem;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
   border-radius: 12px;
   padding: 1.25rem 1.5rem;
+  transition: border-color 0.14s ease-out;
+}
+
+.stepCard:hover,
+.stepCard:focus-within {
+  border-color: var(--color-blue-500);
 }
 
 .stepNumber {
@@ -139,10 +157,11 @@
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 999px;
-  background: #eff6ff;
-  color: #3b82f6;
+  background: var(--color-blue-50);
+  color: var(--color-blue-500);
+  font-family: var(--font-mono);
   font-size: 1.15rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .stepBody {
@@ -153,19 +172,20 @@
 
 .stepTitle {
   margin: 0;
-  color: #1a1a1a;
+  color: var(--color-ink);
   font-size: 1.05rem;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .stepDescription {
   margin: 0;
-  color: #4b5563;
+  color: var(--color-ink-muted);
   font-size: 1rem;
   line-height: 1.6;
 }
 
 .stepImageWrap {
+  position: relative;
   margin: 0.5rem 0;
 }
 
@@ -177,7 +197,7 @@
   margin: 0.5rem 0;
   border-radius: 8px;
   overflow: hidden;
-  background: #000;
+  background: var(--color-ink);
 }
 
 .videoWrap iframe {
@@ -195,83 +215,65 @@
   gap: 0.75rem;
 }
 
-.faqItem {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 0.35rem 1.5rem;
-}
-
-.faqItem[open] {
-  padding-bottom: 1.25rem;
-}
-
-.faqQuestion {
-  margin: 0;
-  padding: 1rem 0;
-  color: #1a1a1a;
-  font-size: 1.05rem;
-  font-weight: 600;
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.faqQuestion::-webkit-details-marker {
-  display: none;
-}
-
-.faqQuestion::after {
-  content: "+";
-  flex: none;
-  color: #3b82f6;
-  font-size: 1.3rem;
-  font-weight: 400;
-  transition: transform 0.15s ease;
-}
-
-.faqItem[open] .faqQuestion::after {
-  transform: rotate(45deg);
-}
-
-.faqAnswer {
-  margin: 0.25rem 0 0;
-  color: #4b5563;
-  font-size: 1rem;
-  line-height: 1.65;
-}
-
 .ctaRow {
   margin-top: 0.25rem;
 }
 
 .cta {
   display: inline-block;
-  background: #3b82f6;
-  color: #ffffff;
+  background: var(--color-blue-500);
+  color: var(--color-white);
   border: none;
   border-radius: 8px;
   padding: 0.85rem 2.25rem;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   text-decoration: none;
   box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45);
   transition:
-    background 0.15s ease,
-    transform 0.15s ease;
+    background 0.15s ease-out,
+    transform 0.15s ease-out;
 }
 
 .cta:hover {
-  background: #2563eb;
+  background: var(--color-blue-600);
   transform: translateY(-1px);
 }
 
+.cta:focus-visible {
+  outline: 2px solid var(--color-blue-500);
+  outline-offset: 4px;
+}
+
+/* The one deliberate navy accent surface on this page — closing CTA band. */
+.ctaBand {
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  background: var(--color-navy-900);
+  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.ctaBandInner {
+  width: min(560px, 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  text-align: center;
+}
+
+.ctaBandHeading {
+  margin: 0;
+  color: var(--color-white);
+  font-size: 1.5rem;
+  font-weight: 500;
+}
+
 @media (max-width: 768px) {
   .page {
-    padding: 2.5rem 1.25rem 4rem;
+    padding: 2.5rem 1.25rem 0;
   }
 
   .article {
diff --git a/src/pages/guides/StepFileTo2dDrawing.tsx b/src/pages/guides/StepFileTo2dDrawing.tsx
index fbb018e..ea9bf3c 100644
--- a/src/pages/guides/StepFileTo2dDrawing.tsx
+++ b/src/pages/guides/StepFileTo2dDrawing.tsx
@@ -1,8 +1,15 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { Head } from "vite-react-ssg";
+import AccordionItem from "../../components/AccordionItem";
+import CornerMark from "../../components/CornerMark";
+import Reveal from "../../components/Reveal";
 import styles from "./StepFileTo2dDrawing.module.css";
 
+const MARK_STAGGER_MS = 130;
+const cardMarkDelay = (index: number, offset: number) =>
+  index * 90 + offset;
+
 function ExternalLink({
   href,
   children,
@@ -176,6 +183,12 @@ export default function StepFileTo2dDrawing() {
       <main className={styles.page}>
         <article className={styles.article}>
           <section className={styles.section}>
+            <CornerMark corner="top-left" animate delay={0} />
+            <CornerMark
+              corner="bottom-right"
+              animate
+              delay={MARK_STAGGER_MS}
+            />
             <Link to="/" className={styles.breadcrumb}>
               ← Back to CAD Viewer
             </Link>
@@ -214,7 +227,17 @@ export default function StepFileTo2dDrawing() {
           <section className={styles.section}>
             <h2 className={styles.sectionHeading}>How to do it</h2>
             <ol className={styles.stepList}>
-              <li className={styles.stepCard}>
+              <Reveal
+                as="li"
+                className={`${styles.stepCard} cornerMarkSharpen`}
+                delayMs={0}
+              >
+                <CornerMark corner="top-left" animate delay={cardMarkDelay(0, 0)} />
+                <CornerMark
+                  corner="bottom-right"
+                  animate
+                  delay={cardMarkDelay(0, MARK_STAGGER_MS)}
+                />
                 <span className={styles.stepNumber}>1</span>
                 <div className={styles.stepBody}>
                   <p className={styles.stepTitle}>{STEPS[0].title}</p>
@@ -222,9 +245,19 @@ export default function StepFileTo2dDrawing() {
                     {STEPS[0].description}
                   </p>
                 </div>
-              </li>
+              </Reveal>
 
-              <li className={styles.stepCard}>
+              <Reveal
+                as="li"
+                className={`${styles.stepCard} cornerMarkSharpen`}
+                delayMs={70}
+              >
+                <CornerMark corner="top-left" animate delay={cardMarkDelay(1, 0)} />
+                <CornerMark
+                  corner="bottom-right"
+                  animate
+                  delay={cardMarkDelay(1, MARK_STAGGER_MS)}
+                />
                 <span className={styles.stepNumber}>2</span>
                 <div className={styles.stepBody}>
                   <p className={styles.stepTitle}>{STEPS[1].title}</p>
@@ -232,10 +265,16 @@ export default function StepFileTo2dDrawing() {
                     {STEPS[1].description}
                   </p>
                 </div>
-              </li>
+              </Reveal>
             </ol>
 
-            <div className={styles.stepImageWrap}>
+            <Reveal as="div" className={styles.stepImageWrap}>
+              <CornerMark corner="top-left" animate delay={0} />
+              <CornerMark
+                corner="bottom-right"
+                animate
+                delay={MARK_STAGGER_MS}
+              />
               <img
                 src="/guides/step-file-to-2d-drawing-3d-view.png"
                 alt="CAD Viewer's 3D viewer showing an uploaded Pump Housing Face Plate STEP file with the Generate 2D Drawing button highlighted in the side panel"
@@ -244,19 +283,35 @@ export default function StepFileTo2dDrawing() {
                 loading="lazy"
                 style={{ width: "100%", height: "auto", borderRadius: "8px" }}
               />
-            </div>
+            </Reveal>
 
             <ol className={styles.stepList} start={3}>
-              <li className={styles.stepCard}>
+              <Reveal
+                as="li"
+                className={`${styles.stepCard} cornerMarkSharpen`}
+                delayMs={0}
+              >
+                <CornerMark corner="top-left" animate delay={cardMarkDelay(2, 0)} />
+                <CornerMark
+                  corner="bottom-right"
+                  animate
+                  delay={cardMarkDelay(2, MARK_STAGGER_MS)}
+                />
                 <span className={styles.stepNumber}>3</span>
                 <div className={styles.stepBody}>
                   <p className={styles.stepTitle}>{STEPS[2].title}</p>
                   {STEPS[2].description}
                 </div>
-              </li>
+              </Reveal>
             </ol>
 
-            <div className={styles.stepImageWrap}>
+            <Reveal as="div" className={styles.stepImageWrap}>
+              <CornerMark corner="top-left" animate delay={0} />
+              <CornerMark
+                corner="bottom-right"
+                animate
+                delay={MARK_STAGGER_MS}
+              />
               <img
                 src="/guides/step-file-to-2d-drawing-editor.png"
                 alt="CAD Viewer's 2D drawing editor showing a fully dimensioned Front, Top, and Right orthographic drawing with an isometric reference view, notes, and title block"
@@ -265,10 +320,20 @@ export default function StepFileTo2dDrawing() {
                 loading="lazy"
                 style={{ width: "100%", height: "auto", borderRadius: "8px" }}
               />
-            </div>
+            </Reveal>
 
             <ol className={styles.stepList} start={4}>
-              <li className={styles.stepCard}>
+              <Reveal
+                as="li"
+                className={`${styles.stepCard} cornerMarkSharpen`}
+                delayMs={0}
+              >
+                <CornerMark corner="top-left" animate delay={cardMarkDelay(3, 0)} />
+                <CornerMark
+                  corner="bottom-right"
+                  animate
+                  delay={cardMarkDelay(3, MARK_STAGGER_MS)}
+                />
                 <span className={styles.stepNumber}>4</span>
                 <div className={styles.stepBody}>
                   <p className={styles.stepTitle}>{STEPS[3].title}</p>
@@ -276,7 +341,7 @@ export default function StepFileTo2dDrawing() {
                     {STEPS[3].description}
                   </p>
                 </div>
-              </li>
+              </Reveal>
             </ol>
 
             <div className={styles.videoWrap}>
@@ -305,26 +370,43 @@ export default function StepFileTo2dDrawing() {
           <section className={styles.section}>
             <h2 className={styles.sectionHeading}>Frequently asked</h2>
             <div className={styles.faqGrid}>
-              {FAQS.map((faq) => (
-                <details className={styles.faqItem} key={faq.question}>
-                  <summary className={styles.faqQuestion}>
-                    {faq.question}
-                  </summary>
-                  <p className={styles.faqAnswer}>{faq.answer}</p>
-                </details>
+              {FAQS.map((faq, index) => (
+                <Reveal as="div" key={faq.question} delayMs={index * 70}>
+                  <AccordionItem
+                    question={faq.question}
+                    answer={faq.answer}
+                    className="cornerMarkSharpen"
+                  >
+                    <CornerMark
+                      corner="top-left"
+                      animate
+                      delay={cardMarkDelay(index, 0)}
+                    />
+                    <CornerMark
+                      corner="bottom-right"
+                      animate
+                      delay={cardMarkDelay(index, MARK_STAGGER_MS)}
+                    />
+                  </AccordionItem>
+                </Reveal>
               ))}
             </div>
           </section>
-
-          <section className={styles.section}>
-            <div className={styles.ctaRow}>
-              <a className={styles.cta} href="/viewer">
-                Try it now — upload your STEP file
-              </a>
-            </div>
-          </section>
         </article>
       </main>
+
+      <div className={styles.ctaBand}>
+        <div className={styles.ctaBandInner}>
+          <h2 className={styles.ctaBandHeading}>
+            Get a real drawing out of your model
+          </h2>
+          <div className={styles.ctaRow}>
+            <a className={styles.cta} href="/viewer">
+              Try it now — upload your STEP file
+            </a>
+          </div>
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/pages/illustrations.tsx b/src/pages/illustrations.tsx
new file mode 100644
index 0000000..a969afb
--- /dev/null
+++ b/src/pages/illustrations.tsx
@@ -0,0 +1,108 @@
+// Simple thin-line mechanical illustrations for the About page — bolt,
+// calipers, bracket. Deliberately schematic rather than photorealistic;
+// stroke-only in the brand blue to match TriangleMark's visual language.
+
+type IllustrationProps = {
+  size?: number;
+  className?: string;
+};
+
+const SHARED_PROPS = {
+  fill: "none",
+  stroke: "var(--color-blue-500)",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+  "aria-hidden": true,
+  focusable: false,
+};
+
+export function BoltIllustration({ size = 96, className }: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 120 120"
+      width={size}
+      height={size}
+      className={className}
+      {...SHARED_PROPS}
+    >
+      {/* Hex head */}
+      <path d="M60,12 L37.5,25 L37.5,51 L60,64 L82.5,51 L82.5,25 Z" />
+      <path d="M60,12 L60,38 M37.5,25 L60,38 M82.5,25 L60,38" />
+      {/* Shaft */}
+      <path d="M48,64 L48,98 M72,64 L72,98" />
+      <path d="M48,66 L72,66 M48,74 L72,74 M48,82 L72,82 M48,90 L72,90" />
+      <path d="M48,98 L60,106 L72,98" />
+    </svg>
+  );
+}
+
+export function CalipersIllustration({
+  size = 96,
+  className,
+}: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 120 120"
+      width={size}
+      height={size}
+      className={className}
+      {...SHARED_PROPS}
+    >
+      {/* Beam (scale bar) */}
+      <path d="M15,35 H100 V42 H15 Z" />
+      {/* Scale ticks */}
+      <path d="M30,35 L30,30 M45,35 L45,30 M60,35 L60,30 M75,35 L75,30 M90,35 L90,30" />
+      {/* Fixed jaw, foot pointing right */}
+      <path d="M15,42 L15,90 L32,90" />
+      {/* Sliding jaw, foot pointing left to face the fixed jaw */}
+      <path d="M75,42 L75,78 L58,78" />
+      {/* Thumbwheel on the sliding jaw */}
+      <path d="M75,35 L75,31" />
+      <circle cx="75" cy="28" r="3" />
+    </svg>
+  );
+}
+
+// Wireframe box — the viewer's true-empty-state placeholder (no file
+// loaded yet). Removed the instant a file loads; not used anywhere else.
+export function EmptyViewportIllustration({
+  size = 96,
+  className,
+}: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 0 120 120"
+      width={size}
+      height={size}
+      className={className}
+      {...SHARED_PROPS}
+    >
+      <path d="M60,15 L100,38 L100,82 L60,105 L20,82 L20,38 Z" />
+      <path d="M60,15 L60,60 M20,38 L60,60 M100,38 L60,60" />
+    </svg>
+  );
+}
+
+export function BracketIllustration({
+  size = 96,
+  className,
+}: IllustrationProps) {
+  return (
+    <svg
+      viewBox="0 30 120 70"
+      width={size}
+      height={size}
+      className={className}
+      {...SHARED_PROPS}
+    >
+      {/* Top (L-shaped) face */}
+      <path d="M60,50 L108.5,78 L96.4,85 L60,64 L23.6,85 L11.5,78 Z" />
+      {/* Thickness / side faces at the outer corner */}
+      <path d="M11.5,78 L11.5,89.2 L60,61.2 L60,50 M108.5,78 L108.5,89.2 L60,61.2" />
+      {/* Mounting holes */}
+      <ellipse cx="90.3" cy="74.5" rx="6" ry="3" />
+      <ellipse cx="29.7" cy="74.5" rx="6" ry="3" />
+    </svg>
+  );
+}
diff --git a/src/pages/landingIcons.tsx b/src/pages/landingIcons.tsx
new file mode 100644
index 0000000..8ece18e
--- /dev/null
+++ b/src/pages/landingIcons.tsx
@@ -0,0 +1,98 @@
+// Icon tiles for the Landing page hero/capability section — a rounded
+// swatch with four corner-bracket accents (a static echo of CornerMark's
+// registration-mark motif, used here since these tiles animate in as a
+// unit via Reveal rather than drawing in on their own).
+import type { ReactNode } from "react";
+import styles from "./Landing.module.css";
+
+export function IconTile({
+  size = "sm",
+  children,
+}: {
+  size?: "sm" | "lg";
+  children: ReactNode;
+}) {
+  return (
+    <div
+      className={[styles.iconTile, size === "lg" ? styles.iconTileLg : ""]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <span className={styles.iconTileCorner} data-corner="tl" />
+      <span className={styles.iconTileCorner} data-corner="tr" />
+      <span className={styles.iconTileCorner} data-corner="bl" />
+      <span className={styles.iconTileCorner} data-corner="br" />
+      {children}
+    </div>
+  );
+}
+
+const STROKE = {
+  fill: "none",
+  stroke: "var(--color-blue-500)",
+  "aria-hidden": true,
+  focusable: false,
+} as const;
+
+export function ViewFormatsIcon({ size = 34 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 120 120" width={size} height={size} {...STROKE} strokeWidth={3.5} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M60,15 L100,38 L100,82 L60,105 L20,82 L20,38 Z" />
+      <path d="M60,15 L60,60 M20,38 L60,60 M100,38 L60,60" />
+    </svg>
+  );
+}
+
+export function PdfExportIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 120 120" width={size} height={size} {...STROKE} strokeWidth={4}>
+      <rect x="20" y="15" width="35" height="30" />
+      <rect x="20" y="55" width="35" height="35" />
+      <rect x="65" y="55" width="30" height="35" />
+      <line x1="20" y1="98" x2="55" y2="98" strokeWidth={2.5} />
+      <line x1="20" y1="94" x2="20" y2="102" strokeWidth={2.5} />
+      <line x1="55" y1="94" x2="55" y2="102" strokeWidth={2.5} />
+    </svg>
+  );
+}
+
+export function AssemblyIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 120 120" width={size} height={size} {...STROKE} strokeWidth={4}>
+      <rect x="30" y="18" width="60" height="12" />
+      <rect x="30" y="54" width="60" height="12" />
+      <rect x="30" y="90" width="60" height="12" />
+      <line x1="60" y1="30" x2="60" y2="54" strokeWidth={2.5} strokeDasharray="4 4" />
+      <line x1="60" y1="66" x2="60" y2="90" strokeWidth={2.5} strokeDasharray="4 4" />
+    </svg>
+  );
+}
+
+export function MeasureIcon({ size = 28 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 120 120" width={size} height={size} {...STROKE} strokeWidth={2.5}>
+      <path d="M15,35 H100 V42 H15 Z" />
+      <path d="M30,35 L30,30 M45,35 L45,30 M60,35 L60,30 M75,35 L75,30 M90,35 L90,30" />
+      <path d="M15,42 L15,90 L32,90" />
+      <path d="M75,42 L75,78 L58,78" />
+    </svg>
+  );
+}
+
+export function UploadIcon({ size = 26 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 120 100" width={size} height={size * (22 / 26)} {...STROKE} strokeWidth={6} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M42,42 L60,20 L78,42" />
+      <path d="M60,20 L60,66" />
+      <path d="M20,75 L20,95 L100,95 L100,75" />
+    </svg>
+  );
+}
+
+export function ConnectorArrowIcon({ size = 18 }: { size?: number }) {
+  return (
+    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="#ffffff" strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" aria-hidden focusable={false}>
+      <path d="M4,12 H18 M12,6 L18,12 L12,18" />
+    </svg>
+  );
+}
diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css
new file mode 100644
index 0000000..26a0b72
--- /dev/null
+++ b/src/styles/design-tokens.css
@@ -0,0 +1,78 @@
+/* Design tokens — single source of truth for color and type across the
+ * site. Every color/font reference sitewide should resolve through these
+ * custom properties rather than a hardcoded literal. Mirrors the
+ * "one canonical file" pattern used by drafting-rules.ts for the drawing
+ * sheet — this is the equivalent file for the brand/UI layer, and is a
+ * completely separate system from that one (see drafting-rules.ts).
+ */
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("/fonts/ibm-plex-sans-400.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("/fonts/ibm-plex-sans-500.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  /* Brand blue ramp */
+  --color-blue-50: #eff6ff;
+  --color-blue-100: #dbeafe;
+  --color-blue-500: #3b82f6;
+  --color-blue-600: #2563eb;
+  --color-blue-700: #1d4ed8;
+
+  /* The one "blueprint" accent surface — used sparingly, one per page */
+  --color-navy-900: #0f2557;
+
+  /* Secondary accent — export/download actions only, at most one per page */
+  --color-amber-50: #fef3c7;
+  --color-amber-500: #f59e0b;
+  --color-amber-700: #b45309;
+
+  /* Ink / neutral ramp — consolidates the three near-duplicate grayscales
+   * that previously existed independently in Landing.module.css, the
+   * guide/About pages, and src/ui/App.css. */
+  --color-ink: #0f172a;
+  --color-ink-muted: #475569;
+  --color-ink-faint: #64748b;
+  --color-border: #d9dee5;
+  --color-bg: #f7f8fa;
+  --color-bg-alt: #eef1f5;
+  --color-white: #ffffff;
+
+  /* Destructive/error — not part of the brand ramp, kept separate on
+   * purpose so error states never get confused with brand blue/navy/amber. */
+  --color-error-500: #dc2626;
+  --color-error-50: #fef2f2;
+
+  /* Type */
+  --font-display: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
+    "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
diff --git a/src/styles/tokenValues.ts b/src/styles/tokenValues.ts
new file mode 100644
index 0000000..4f23259
--- /dev/null
+++ b/src/styles/tokenValues.ts
@@ -0,0 +1,8 @@
+// Plain JS values mirroring design-tokens.css, for the handful of
+// consumers (Three.js renderer clear color, canvas fillStyle, etc.) that
+// can't resolve a CSS custom property. Keep in sync with design-tokens.css.
+
+// Matches --color-bg. Used as the 3D viewport clear color in both the
+// SSG-only ViewerPage and the lazy-loaded App shell, which previously
+// carried two slightly different near-white literals for the same job.
+export const VIEWER_BG_COLOR = "#f7f8fa";
diff --git a/src/ui/App.css b/src/ui/App.css
index 5e7da46..ea4600b 100644
--- a/src/ui/App.css
+++ b/src/ui/App.css
@@ -1,21 +1,14 @@
 :root {
-  font-family:
-    "Inter",
-    "Segoe UI",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Helvetica Neue",
-    Arial,
-    sans-serif;
-  --bg-base: #e2e8f0;
-  --bg-soft: #f8fafc;
+  font-family: var(--font-display);
+  --bg-base: var(--color-bg-alt);
+  --bg-soft: var(--color-bg);
   --bg-panel: rgba(255, 255, 255, 0.92);
   --surface-border: rgba(148, 163, 184, 0.35);
-  --text-primary: #0f172a;
-  --text-secondary: #475569;
-  --text-muted: #64748b;
-  --brand: #1d4ed8;
-  --brand-strong: #1e40af;
+  --text-primary: var(--color-ink);
+  --text-secondary: var(--color-ink-muted);
+  --text-muted: var(--color-ink-faint);
+  --brand: var(--color-blue-700);
+  --brand-strong: var(--color-blue-700);
   --brand-soft: rgba(59, 130, 246, 0.14);
   --shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
 }
@@ -403,8 +396,8 @@ a {
   height: 100%;
   display: grid;
   grid-template-rows: auto auto 1fr;
-  background: #f7f8fa;
-  color: #0f172a;
+  background: var(--color-bg);
+  color: var(--color-ink);
 }
 
 .cad-app__header {
@@ -428,7 +421,7 @@ a {
 .cad-app__title-wrap h1 {
   margin: 0;
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .cad-app__actions {
@@ -445,15 +438,15 @@ a {
   border-radius: 8px;
   padding: 9px 14px;
   font-size: 13px;
-  font-weight: 600;
-  color: #ffffff;
+  font-weight: 500;
+  color: var(--color-white);
   border: none;
-  background: #2563eb;
+  background: var(--color-blue-600);
   cursor: pointer;
 }
 
 .cad-app__upload-btn:hover {
-  background: #1d4ed8;
+  background: var(--color-blue-700);
 }
 
 .cad-app__upload-btn input {
@@ -467,9 +460,9 @@ a {
   border-radius: 8px;
   border: none;
   background: transparent;
-  color: #64748b;
+  color: var(--color-ink-faint);
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 500;
   padding: 9px 14px;
   cursor: pointer;
 }
@@ -477,7 +470,7 @@ a {
 .cad-app__actions button:hover:not(:disabled) {
   background: rgba(100, 116, 139, 0.08);
   border-radius: 8px;
-  color: #334155;
+  color: var(--color-ink-muted);
 }
 
 .cad-app__actions button:disabled {
@@ -493,12 +486,12 @@ a {
   padding: 10px 16px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.25);
   font-size: 13px;
-  color: #334155;
+  color: var(--color-ink-muted);
 }
 
 .cad-app__error {
-  color: #b91c1c;
-  font-weight: 600;
+  color: var(--color-error-500);
+  font-weight: 500;
 }
 
 .cad-app__viewer {
@@ -511,6 +504,25 @@ a {
   height: 100%;
 }
 
+.cad-app__viewer-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  padding-bottom: 12%;
+  gap: 0.75rem;
+  pointer-events: none;
+}
+
+.cad-app__viewer-empty p {
+  margin: 0;
+  color: var(--color-ink-faint);
+  font-family: var(--font-display);
+  font-size: 0.9rem;
+}
+
 @media (max-width: 1080px) {
   .feature-grid,
   .audience-grid {
diff --git a/src/ui/App.tsx b/src/ui/App.tsx
index 588961a..62efc26 100644
--- a/src/ui/App.tsx
+++ b/src/ui/App.tsx
@@ -2,7 +2,9 @@ import { useCallback, useEffect, useMemo, useState, startTransition } from "reac
 import { Link } from "react-router-dom";
 import { consumePendingFile } from "../fileStore";
 import { CAD_EXTS, CadViewer, MESH_ASSEMBLY_EXTS } from "../components/cad/cad-viewer";
+import { EmptyViewportIllustration } from "../pages/illustrations";
 import TriangleMark from "../pages/TriangleMark";
+import { VIEWER_BG_COLOR } from "../styles/tokenValues";
 import "./App.css";
 
 const ACCEPTED_FORMATS = [
@@ -102,7 +104,7 @@ export default function App() {
       onDrop={handleViewerDrop}
       style={{
         colorScheme: "light",
-        outline: viewerDragging ? "2px solid #3b82f6" : "none",
+        outline: viewerDragging ? "2px solid var(--color-blue-500)" : "none",
         outlineOffset: "-2px",
         transition: "outline 0.12s ease",
       }}
@@ -141,9 +143,15 @@ export default function App() {
           showControls
           showViewCube
           showHomeButton
-          backgroundColor="#f0f2f5"
+          backgroundColor={VIEWER_BG_COLOR}
           className="cad-viewer-host"
         />
+        {!file && (
+          <div className="cad-app__viewer-empty" aria-hidden="true">
+            <EmptyViewportIllustration size={72} />
+            <p>Drop a CAD file to get started</p>
+          </div>
+        )}
       </main>
 
       {viewerDragging && (
@@ -167,10 +175,10 @@ export default function App() {
               border: "1px solid rgba(59,130,246,0.4)",
               borderRadius: "10px",
               padding: "0.7rem 1.6rem",
-              color: "#3b82f6",
+              color: "var(--color-blue-500)",
               fontSize: "1rem",
-              fontWeight: 600,
-              fontFamily: "monospace",
+              fontWeight: 500,
+              fontFamily: "var(--font-mono)",
               letterSpacing: "0.04em",
             }}
           >
diff --git a/src/ui/LoadingOverlay.tsx b/src/ui/LoadingOverlay.tsx
index 0519b57..ec59372 100644
--- a/src/ui/LoadingOverlay.tsx
+++ b/src/ui/LoadingOverlay.tsx
@@ -51,7 +51,7 @@ export default function LoadingOverlay({
     >
       <div
         style={{
-          background: "#ffffff",
+          background: "var(--color-white)",
           borderRadius: "16px",
           boxShadow: "0 8px 40px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06)",
           padding: "2rem 2.4rem",
@@ -59,20 +59,21 @@ export default function LoadingOverlay({
           display: "flex",
           flexDirection: "column",
           gap: "1.2rem",
+          fontFamily: "var(--font-display)",
         }}
       >
         <div style={{ display: "flex", alignItems: "center", gap: "0.9rem" }}>
           <div
             style={{
-              background: "#eff6ff",
-              border: "1px solid #bfdbfe",
+              background: "var(--color-blue-50)",
+              border: "1px solid var(--color-blue-100)",
               borderRadius: "8px",
               padding: "0.4rem 0.65rem",
               fontSize: "0.7rem",
-              fontWeight: 700,
-              color: "#2563eb",
+              fontWeight: 500,
+              color: "var(--color-blue-600)",
               letterSpacing: "0.08em",
-              fontFamily: "monospace",
+              fontFamily: "var(--font-mono)",
               flexShrink: 0,
             }}
           >
@@ -82,8 +83,8 @@ export default function LoadingOverlay({
             <div
               style={{
                 fontSize: "0.88rem",
-                fontWeight: 600,
-                color: "#111827",
+                fontWeight: 500,
+                color: "var(--color-ink)",
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -92,14 +93,24 @@ export default function LoadingOverlay({
               {fileName}
             </div>
             <div
-              style={{ fontSize: "0.75rem", color: "#6b7280", marginTop: "0.1rem" }}
+              style={{
+                fontSize: "0.75rem",
+                color: "var(--color-ink-faint)",
+                marginTop: "0.1rem",
+              }}
             >
               {fmtSize(fileSize)}
             </div>
           </div>
         </div>
 
-        <div style={{ fontSize: "0.82rem", color: "#4b5563", fontFamily: "monospace" }}>
+        <div
+          style={{
+            fontSize: "0.82rem",
+            color: "var(--color-ink-muted)",
+            fontFamily: "var(--font-mono)",
+          }}
+        >
           {stage}
           {dots}
         </div>
@@ -112,13 +123,15 @@ export default function LoadingOverlay({
               marginBottom: "0.4rem",
             }}
           >
-            <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>Loading</span>
+            <span style={{ fontSize: "0.75rem", color: "var(--color-ink-faint)" }}>
+              Loading
+            </span>
             <span
               style={{
                 fontSize: "0.75rem",
-                fontWeight: 600,
-                color: "#2563eb",
-                fontFamily: "monospace",
+                fontWeight: 500,
+                color: "var(--color-blue-600)",
+                fontFamily: "var(--font-mono)",
               }}
             >
               {Math.round(progress)}%
@@ -128,7 +141,7 @@ export default function LoadingOverlay({
             style={{
               width: "100%",
               height: "6px",
-              background: "#e5e7eb",
+              background: "var(--color-border)",
               borderRadius: "999px",
               overflow: "hidden",
             }}
@@ -137,7 +150,8 @@ export default function LoadingOverlay({
               style={{
                 height: "100%",
                 width: `${progress}%`,
-                background: "linear-gradient(90deg, #3b82f6, #60a5fa)",
+                background:
+                  "linear-gradient(90deg, var(--color-blue-500), #60a5fa)",
                 borderRadius: "999px",
                 transition: "width 0.35s ease",
               }}
@@ -148,7 +162,7 @@ export default function LoadingOverlay({
         <div
           style={{
             fontSize: "0.72rem",
-            color: "#9ca3af",
+            color: "var(--color-ink-faint)",
             textAlign: "center",
           }}
         >
diff --git a/src/ui/MarketingLayout.tsx b/src/ui/MarketingLayout.tsx
new file mode 100644
index 0000000..ae516e0
--- /dev/null
+++ b/src/ui/MarketingLayout.tsx
@@ -0,0 +1,25 @@
+// Shared layout for the marketing/content routes (Home, About, Guides) —
+// a subtle fade between them on navigation. Deliberately not used for the
+// /viewer route, which is a sibling top-level route outside this layout
+// and stays instant.
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Outlet, useLocation } from "react-router-dom";
+
+export default function MarketingLayout() {
+  const location = useLocation();
+  const prefersReducedMotion = useReducedMotion();
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={location.pathname}
+        initial={prefersReducedMotion ? false : { opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={prefersReducedMotion ? undefined : { opacity: 0 }}
+        transition={{ duration: 0.18, ease: "easeInOut" }}
+      >
+        <Outlet />
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/src/ui/ViewerPage.tsx b/src/ui/ViewerPage.tsx
index 943d00b..0d90b25 100644
--- a/src/ui/ViewerPage.tsx
+++ b/src/ui/ViewerPage.tsx
@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { CAD_EXTS, CadViewer, MESH_ASSEMBLY_EXTS } from "../components/cad/cad-viewer";
+import { EmptyViewportIllustration } from "../pages/illustrations";
 import TriangleMark from "../pages/TriangleMark";
+import { VIEWER_BG_COLOR } from "../styles/tokenValues";
 
 const ACCEPTED_FORMATS = [
   ".step",
@@ -94,9 +96,15 @@ export default function ViewerPage() {
           showControls
           showViewCube
           showHomeButton
-          backgroundColor="#f1f5f9"
+          backgroundColor={VIEWER_BG_COLOR}
           className="cad-viewer-host"
         />
+        {!file && (
+          <div className="cad-app__viewer-empty" aria-hidden="true">
+            <EmptyViewportIllustration size={72} />
+            <p>Drop a CAD file to get started</p>
+          </div>
+        )}
       </main>
     </div>
   );