diff --git a/apps/web/app/concepts/page.tsx b/apps/web/app/concepts/page.tsx
new file mode 100644
index 0000000..dda1f9b
--- /dev/null
+++ b/apps/web/app/concepts/page.tsx
@@ -0,0 +1,724 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+import {
+  Bebas_Neue,
+  DM_Serif_Display,
+  Manrope,
+  Newsreader,
+  Oswald,
+  Sora,
+  Special_Elite
+} from "next/font/google";
+
+const brutal = Bebas_Neue({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-concept-brutal"
+});
+
+const editorialDisplay = DM_Serif_Display({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-concept-editorial-display"
+});
+
+const conceptSans = Manrope({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-concept-sans"
+});
+
+const editorialBody = Newsreader({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  variable: "--font-concept-editorial-body"
+});
+
+const condensed = Oswald({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  variable: "--font-concept-condensed"
+});
+
+const future = Sora({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-concept-future"
+});
+
+const notebook = Special_Elite({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-concept-notebook"
+});
+
+const feedStates = [
+  { label: "Opt", tone: "positive", value: "Live" },
+  { label: "Eq", tone: "positive", value: "Live" },
+  { label: "Flow", tone: "accent", value: "Dense" },
+  { label: "Alert", tone: "negative", value: "9 high" }
+];
+
+const overviewMetrics = [
+  { label: "Options", value: "284" },
+  { label: "Equities", value: "142" },
+  { label: "Flow", value: "36" },
+  { label: "Alerts", value: "9" },
+  { label: "Rules", value: "14" },
+  { label: "Dark", value: "3" }
+];
+
+const alertRows = [
+  {
+    title: "Stealth Accumulation",
+    meta: "Bullish  |  Score 92  |  NVDA",
+    note: "Repeated bid-side sweeps with dark follow-through.",
+    tone: "positive"
+  },
+  {
+    title: "Distribution Cluster",
+    meta: "Bearish  |  Score 81  |  SPY",
+    note: "Offer-heavy packets rolling across three expiries.",
+    tone: "negative"
+  },
+  {
+    title: "Gamma Pressure",
+    meta: "Neutral  |  Score 74  |  QQQ",
+    note: "Market makers pinned near intraday resistance.",
+    tone: "neutral"
+  }
+] as const;
+
+const flowRows = [
+  {
+    title: "SPY 2026-06-21 C605",
+    meta: "18 prints  |  $2.8M notional  |  Agg 78%",
+    note: "Window 640ms with ask-side urgency.",
+    tone: "accent"
+  },
+  {
+    title: "AAPL 2026-05-17 P185",
+    meta: "11 prints  |  $1.1M notional  |  Spread $0.07",
+    note: "Sweeps split across ARCA and CBOE.",
+    tone: "negative"
+  },
+  {
+    title: "TSLA 2026-07-19 C240",
+    meta: "8 prints  |  $980k notional  |  In 33%",
+    note: "Late acceleration after lit print burst.",
+    tone: "positive"
+  }
+] as const;
+
+const equityRows = [
+  {
+    title: "NVDA",
+    meta: "$972.44  |  28,400x  |  Off-Ex",
+    note: "Dark ratio lifting into midday highs.",
+    tone: "positive"
+  },
+  {
+    title: "SPY",
+    meta: "$604.12  |  91,300x  |  Lit",
+    note: "Index tape absorbing after alert burst.",
+    tone: "neutral"
+  },
+  {
+    title: "AAPL",
+    meta: "$214.77  |  18,100x  |  Off-Ex",
+    note: "Block prints clustering beneath ask.",
+    tone: "accent"
+  }
+] as const;
+
+const conceptSummary = [
+  {
+    id: "concept-1",
+    index: "01",
+    title: "Mission Control",
+    style: "Dark command center"
+  },
+  {
+    id: "concept-2",
+    index: "02",
+    title: "Market Journal",
+    style: "Editorial financial desk"
+  },
+  {
+    id: "concept-3",
+    index: "03",
+    title: "Aurora Glass",
+    style: "Futurist glass cockpit"
+  },
+  {
+    id: "concept-4",
+    index: "04",
+    title: "Tape Wall",
+    style: "Brutalist signal board"
+  },
+  {
+    id: "concept-5",
+    index: "05",
+    title: "Field Notebook",
+    style: "Analyst workbench"
+  }
+] as const;
+
+type ConceptSectionProps = {
+  id: string;
+  index: string;
+  title: string;
+  label: string;
+  summary: string;
+  designChoices: string[];
+  responsive: string[];
+  className: string;
+  children: ReactNode;
+};
+
+function ConceptSection({
+  id,
+  index,
+  title,
+  label,
+  summary,
+  designChoices,
+  responsive,
+  className,
+  children
+}: ConceptSectionProps) {
+  return (
+    <section className={`concept-section ${className}`} id={id}>
+      <div className="concept-copy">
+        <div className="concept-copy-head">
+          <div className="concept-kicker">
+            <span>{`Concept ${index}`}</span>
+            <span>{label}</span>
+          </div>
+          <h2 className="concept-name">{title}</h2>
+          <p className="concept-summary">{summary}</p>
+        </div>
+
+        <div className="concept-detail">
+          <h3 className="concept-detail-title">Key Design Choices</h3>
+          <ul className="concept-bullet-list">
+            {designChoices.map((choice) => (
+              <li key={choice}>{choice}</li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="concept-detail">
+          <h3 className="concept-detail-title">Responsive Considerations</h3>
+          <ul className="concept-bullet-list">
+            {responsive.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className="concept-preview">{children}</div>
+    </section>
+  );
+}
+
+function MockTopbar({ brand, kicker }: { brand: string; kicker: string }) {
+  return (
+    <div className="mock-topbar">
+      <div className="mock-brand">
+        <span className="mock-brand-kicker">{kicker}</span>
+        <span className="mock-brand-name">{brand}</span>
+      </div>
+
+      <div className="mock-status-cluster">
+        {feedStates.map((feed) => (
+          <div className={`mock-chip mock-chip-${feed.tone}`} key={feed.label}>
+            <span>{feed.label}</span>
+            <strong>{feed.value}</strong>
+          </div>
+        ))}
+      </div>
+
+      <div className="mock-actions">
+        <div className="mock-filter">Filter: SPY, NVDA, AAPL</div>
+        <button className="mock-button" type="button">
+          Replay
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function MetricRack() {
+  return (
+    <div className="mock-metric-rack">
+      {overviewMetrics.map((metric) => (
+        <div className="mock-metric" key={metric.label}>
+          <span>{metric.label}</span>
+          <strong>{metric.value}</strong>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Module({
+  title,
+  subtitle,
+  children,
+  className = ""
+}: {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={`mock-module ${className}`.trim()}>
+      <div className="mock-module-head">
+        <div>
+          <p className="mock-module-kicker">{subtitle ?? "Core module"}</p>
+          <h3 className="mock-module-title">{title}</h3>
+        </div>
+        <span className="mock-module-meta">Live</span>
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function ChartModule({ label }: { label: string }) {
+  return (
+    <div className="mock-chart">
+      <div className="mock-chart-labels">
+        <span>{label}</span>
+        <span>Signals layered on price</span>
+      </div>
+      <svg
+        aria-hidden="true"
+        className="mock-chart-svg"
+        preserveAspectRatio="none"
+        viewBox="0 0 520 220"
+      >
+        <path
+          className="mock-chart-area"
+          d="M0 180 L46 170 L92 150 L138 158 L184 136 L230 144 L276 115 L322 126 L368 92 L414 104 L460 70 L520 84 L520 220 L0 220 Z"
+        />
+        <polyline
+          className="mock-chart-line"
+          fill="none"
+          points="0,180 46,170 92,150 138,158 184,136 230,144 276,115 322,126 368,92 414,104 460,70 520,84"
+        />
+        <circle className="mock-chart-marker" cx="184" cy="136" r="7" />
+        <circle className="mock-chart-marker mock-chart-marker-alt" cx="368" cy="92" r="7" />
+        <circle className="mock-chart-marker" cx="460" cy="70" r="7" />
+      </svg>
+      <div className="mock-chart-axis">
+        <span>09:30</span>
+        <span>11:00</span>
+        <span>12:30</span>
+        <span>14:00</span>
+        <span>15:30</span>
+      </div>
+    </div>
+  );
+}
+
+type MockRow = {
+  title: string;
+  meta: string;
+  note: string;
+  tone: string;
+};
+
+function ListModule({
+  title,
+  subtitle,
+  rows
+}: {
+  title: string;
+  subtitle: string;
+  rows: readonly MockRow[];
+}) {
+  return (
+    <Module subtitle={subtitle} title={title}>
+      <div className="mock-row-list">
+        {rows.map((row) => (
+          <article className={`mock-row mock-row-${row.tone}`} key={`${title}-${row.title}`}>
+            <div className="mock-row-head">
+              <h4>{row.title}</h4>
+              <span className={`mock-tone-dot mock-tone-dot-${row.tone}`} />
+            </div>
+            <p className="mock-row-meta">{row.meta}</p>
+            <p className="mock-row-note">{row.note}</p>
+          </article>
+        ))}
+      </div>
+    </Module>
+  );
+}
+
+function MissionControlMockup() {
+  return (
+    <div className="mockup-frame mission-frame">
+      <MockTopbar brand="Islandflow / Mission" kicker="Overview redesign" />
+      <MetricRack />
+
+      <div className="mission-command">
+        <div className="mission-main">
+          <Module className="mission-chart-module" subtitle="Primary chart" title="Price + signal map">
+            <ChartModule label="NVDA in focus" />
+          </Module>
+          <Module subtitle="Session summary" title="Execution notes">
+            <div className="mock-summary-grid">
+              <div className="mock-summary-card">
+                <span>Highest urgency</span>
+                <strong>Stealth accumulation in NVDA</strong>
+              </div>
+              <div className="mock-summary-card">
+                <span>Replay readiness</span>
+                <strong>Databento and Alpaca aligned</strong>
+              </div>
+            </div>
+          </Module>
+        </div>
+
+        <div className="mission-side">
+          <ListModule rows={alertRows} subtitle="Alert queue" title="Alerts" />
+          <ListModule rows={flowRows} subtitle="Packet tape" title="Flow" />
+        </div>
+      </div>
+
+      <div className="mission-footer">
+        <ListModule rows={equityRows} subtitle="Equity tape" title="Equities" />
+        <Module subtitle="Focus" title="Operator panel">
+          <div className="mock-operator-grid">
+            <div className="mock-operator-item">
+              <span>Mode</span>
+              <strong>Live</strong>
+            </div>
+            <div className="mock-operator-item">
+              <span>Source</span>
+              <strong>Auto</strong>
+            </div>
+            <div className="mock-operator-item">
+              <span>Dark hits</span>
+              <strong>03</strong>
+            </div>
+            <div className="mock-operator-item">
+              <span>Focus ticker</span>
+              <strong>NVDA</strong>
+            </div>
+          </div>
+        </Module>
+      </div>
+    </div>
+  );
+}
+
+function MarketJournalMockup() {
+  return (
+    <div className="mockup-frame editorial-frame">
+      <div className="editorial-masthead">
+        <div>
+          <span className="editorial-volume">Vol. 27</span>
+          <h3>The Islandflow Market Journal</h3>
+        </div>
+        <div className="editorial-meta">
+          <span>Overview page redesign</span>
+          <span>Same trading intelligence, calmer reading flow</span>
+        </div>
+      </div>
+
+      <div className="editorial-toolbar">
+        <span>Filter: SPY, NVDA, AAPL</span>
+        <span>Mode: Live</span>
+        <span>Replay ready</span>
+      </div>
+
+      <div className="editorial-hero">
+        <Module className="editorial-hero-chart" subtitle="Lead story" title="Signals gather around NVDA">
+          <ChartModule label="Narrative chart" />
+        </Module>
+
+        <Module subtitle="Editor note" title="Why this layout works">
+          <div className="editorial-copy">
+            <p>
+              The page reads like a market front page: chart first, context second, then secondary
+              feeds as supporting columns.
+            </p>
+            <p>
+              The same terminal content feels more analytical and less mechanical, which suits
+              review sessions and replay mode.
+            </p>
+          </div>
+        </Module>
+      </div>
+
+      <div className="editorial-columns">
+        <ListModule rows={alertRows} subtitle="Column A" title="Alerts" />
+        <ListModule rows={flowRows} subtitle="Column B" title="Flow" />
+        <ListModule rows={equityRows} subtitle="Column C" title="Equities" />
+      </div>
+    </div>
+  );
+}
+
+function AuroraGlassMockup() {
+  return (
+    <div className="mockup-frame glass-frame">
+      <MockTopbar brand="Islandflow Horizon" kicker="Aurora glass shell" />
+
+      <div className="glass-overview">
+        <Module subtitle="Ambient snapshot" title="Feed health">
+          <MetricRack />
+        </Module>
+        <Module className="glass-chart-module" subtitle="Floating center" title="Signal cockpit">
+          <ChartModule label="QQQ in focus" />
+        </Module>
+        <ListModule rows={alertRows} subtitle="Action stack" title="Alerts" />
+      </div>
+
+      <div className="glass-secondary">
+        <ListModule rows={flowRows} subtitle="Liquidity map" title="Flow" />
+        <ListModule rows={equityRows} subtitle="Market tape" title="Equities" />
+      </div>
+    </div>
+  );
+}
+
+function TapeWallMockup() {
+  return (
+    <div className="mockup-frame brutal-frame">
+      <div className="brutal-banner">
+        <div className="brutal-banner-copy">
+          <span>Islandflow Overview</span>
+          <h3>Watch the tape before the tape watches you.</h3>
+        </div>
+        <div className="brutal-badges">
+          <span>Live mode</span>
+          <span>Filter: SPY, NVDA, AAPL</span>
+          <span>Replay hotkey ready</span>
+        </div>
+      </div>
+
+      <div className="brutal-main">
+        <Module subtitle="Count wall" title="Session totals">
+          <MetricRack />
+        </Module>
+
+        <Module className="brutal-chart-module" subtitle="Center stage" title="Price pressure">
+          <ChartModule label="SPY in focus" />
+        </Module>
+      </div>
+
+      <div className="brutal-ribbons">
+        <ListModule rows={alertRows} subtitle="Ribbon one" title="Alerts" />
+        <ListModule rows={flowRows} subtitle="Ribbon two" title="Flow" />
+        <ListModule rows={equityRows} subtitle="Ribbon three" title="Equities" />
+      </div>
+    </div>
+  );
+}
+
+function FieldNotebookMockup() {
+  return (
+    <div className="mockup-frame notebook-frame">
+      <div className="notebook-topbar">
+        <div className="notebook-title">
+          <span>Islandflow Research Board</span>
+          <h3>Overview page as an analyst workbench</h3>
+        </div>
+        <div className="notebook-tabs">
+          <span>Live</span>
+          <span>Replay</span>
+          <span>Filtered: NVDA / SPY / AAPL</span>
+        </div>
+      </div>
+
+      <div className="notebook-layout">
+        <div className="notebook-main">
+          <Module className="notebook-chart-module" subtitle="Pinned chart" title="Price and events">
+            <ChartModule label="AAPL in focus" />
+          </Module>
+          <Module subtitle="Margin notes" title="What to notice">
+            <div className="notebook-callouts">
+              <div className="notebook-callout">
+                <span>Alert bias</span>
+                <strong>Bullish momentum concentrated in tech.</strong>
+              </div>
+              <div className="notebook-callout">
+                <span>Flow quality</span>
+                <strong>Packet clustering suggests institutional pacing.</strong>
+              </div>
+              <div className="notebook-callout">
+                <span>Replay use</span>
+                <strong>Good for post-close annotation and handoff.</strong>
+              </div>
+            </div>
+          </Module>
+        </div>
+
+        <div className="notebook-notes">
+          <ListModule rows={alertRows} subtitle="Sticky note A" title="Alerts" />
+          <ListModule rows={flowRows} subtitle="Sticky note B" title="Flow" />
+          <ListModule rows={equityRows} subtitle="Sticky note C" title="Equities" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ConceptsPage() {
+  const fontVariables = [
+    brutal.variable,
+    editorialDisplay.variable,
+    conceptSans.variable,
+    editorialBody.variable,
+    condensed.variable,
+    future.variable,
+    notebook.variable
+  ].join(" ");
+
+  return (
+    <div className={`${fontVariables} page-shell concepts-page`}>
+      <header className="page-header concepts-header">
+        <div>
+          <p className="concepts-eyebrow">Frontend redesign study</p>
+          <h1 className="page-title">Five Overview concepts for Islandflow</h1>
+          <p className="concepts-lead">
+            Each concept keeps the same product story intact: filter controls, live or replay mode,
+            chart context, alerts, flow packets, and equities tape. What changes is the visual
+            system, layout logic, and the feeling of operating the page.
+          </p>
+        </div>
+        <div className="page-actions">
+          <Link className="terminal-button" href="/">
+            Current overview
+          </Link>
+        </div>
+      </header>
+
+      <section className="concepts-intro">
+        <div className="concepts-intro-card">
+          <h2 className="concepts-intro-title">What stays consistent</h2>
+          <p>
+            Every direction below preserves the same core modules and the same analyst workflow.
+            These are presentation explorations, not product scope changes.
+          </p>
+        </div>
+
+        <div className="concept-anchors">
+          {conceptSummary.map((concept) => (
+            <a className="concept-anchor" href={`#${concept.id}`} key={concept.id}>
+              <span>{concept.index}</span>
+              <strong>{concept.title}</strong>
+              <small>{concept.style}</small>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <ConceptSection
+        className="concept-mission"
+        designChoices={[
+          "Dark industrial palette with amber accents, condensed headings, and mono metadata to feel like a serious command surface.",
+          "Chart-first asymmetry gives the overview page a clear hierarchy: monitor price action, then scan alerts and packets, then glance at equities.",
+          "Compact operator panels keep high-density content readable without flattening everything into identical cards."
+        ]}
+        id="concept-1"
+        index="01"
+        label="Dark command center"
+        responsive={[
+          "Desktop uses a wide mission grid where the chart owns the left side and secondary queues stack on the right for fast peripheral scanning.",
+          "Mobile collapses into a single priority stack with metrics first, chart second, and action feeds grouped by urgency so the screen never feels cramped."
+        ]}
+        summary="A sharper, more cinematic take on the existing terminal metaphor. This is the closest to a pro desk, but with stronger hierarchy and fewer visually equal surfaces."
+        title="Mission Control"
+      >
+        <MissionControlMockup />
+      </ConceptSection>
+
+      <ConceptSection
+        className="concept-editorial"
+        designChoices={[
+          "A light editorial theme reframes the dashboard as a readable market briefing rather than a pure execution console.",
+          "Serif display typography, column structure, and calmer spacing make replay sessions and post-market reviews feel more thoughtful.",
+          "The same modules are presented like lead story plus supporting columns, which helps users understand importance at a glance."
+        ]}
+        id="concept-2"
+        index="02"
+        label="Editorial financial desk"
+        responsive={[
+          "Desktop treats the chart as the front-page hero with three supporting columns below, preserving scanning order without overwhelming the user.",
+          "Mobile turns those columns into a clean reading sequence: hero chart, editor note, alerts, flow, then equities, with generous spacing for thumb scrolling."
+        ]}
+        summary="A newsroom-inspired redesign that makes Islandflow feel like a premium market publication. It is calmer, brighter, and easier to read over long review sessions."
+        title="Market Journal"
+      >
+        <MarketJournalMockup />
+      </ConceptSection>
+
+      <ConceptSection
+        className="concept-glass"
+        designChoices={[
+          "Layered translucent panels and atmospheric gradients create a future-facing cockpit without sacrificing legibility.",
+          "The chart floats at the center of the layout, while feed health and alert context orbit around it like instrumentation.",
+          "Rounded geometry and softer contrast make this direction feel premium and modern, especially for demos or investor-facing moments."
+        ]}
+        id="concept-3"
+        index="03"
+        label="Futurist glass cockpit"
+        responsive={[
+          "Desktop uses a three-part aerial composition with the chart in the middle and support modules to either side, reinforcing a central command feel.",
+          "Mobile turns the floating modules into stacked glass cards with larger touch targets and reduced translucency so readability holds up outdoors and on glare-heavy screens."
+        ]}
+        summary="A more aspirational interface direction built around depth, blur, and glowing instrumentation. The product feels advanced without drifting into novelty."
+        title="Aurora Glass"
+      >
+        <AuroraGlassMockup />
+      </ConceptSection>
+
+      <ConceptSection
+        className="concept-brutal"
+        designChoices={[
+          "Oversized headlines, hard borders, and high-contrast color blocks turn the page into a signal board with attitude.",
+          "The layout is intentionally loud: totals hit first, the chart becomes a billboard, and the queues read like tape ribbons.",
+          "This direction favors decisiveness and memorability over subtlety, making it the boldest concept in the set."
+        ]}
+        id="concept-4"
+        index="04"
+        label="Brutalist signal board"
+        responsive={[
+          "Desktop keeps the giant headline and billboard chart while turning the lower ribbons into equal-width scan lanes for alerts, flow, and equities.",
+          "Mobile preserves the graphic energy but reduces typographic scale, converts ribbons into stacked slabs, and keeps high contrast for quick glanceability."
+        ]}
+        summary="A poster-like redesign with aggressive typography and rigid modularity. It is meant to feel unmistakable and high-energy the moment it loads."
+        title="Tape Wall"
+      >
+        <TapeWallMockup />
+      </ConceptSection>
+
+      <ConceptSection
+        className="concept-notebook"
+        designChoices={[
+          "Warm neutrals, paper textures, and typewriter accents make the interface feel like a strategist's annotated desk instead of a machine room.",
+          "Pinned callouts and note-card modules support interpretation, which is useful when the page is used for research, teaching, or end-of-day handoff.",
+          "The chart remains central, but the surrounding content is framed as observations and evidence rather than alerts alone."
+        ]}
+        id="concept-5"
+        index="05"
+        label="Analyst workbench"
+        responsive={[
+          "Desktop behaves like a split research spread with one side for chart analysis and the other for callouts and modular notes.",
+          "Mobile turns each pinned note into a full-width card and preserves the annotation feel by keeping short labeled sections rather than dense control strips."
+        ]}
+        summary="A softer research-oriented direction that makes Islandflow feel deeply human and collaborative. This one is the best fit for annotation-heavy workflows."
+        title="Field Notebook"
+      >
+        <FieldNotebookMockup />
+      </ConceptSection>
+    </div>
+  );
+}
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 0769f2a..1bd2be9 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -1079,3 +1079,823 @@ h3 {
     margin-top: 14px;
   }
 }
+
+.concepts-page {
+  display: grid;
+  gap: 28px;
+  padding-bottom: 56px;
+}
+
+.concepts-header {
+  align-items: flex-start;
+}
+
+.concepts-eyebrow {
+  margin: 0 0 8px;
+  color: var(--accent);
+  font-size: 0.78rem;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}
+
+.concepts-lead {
+  max-width: 78ch;
+  margin: 14px 0 0;
+  color: var(--text-dim);
+  line-height: 1.7;
+}
+
+.concepts-intro {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
+}
+
+.concepts-intro-card {
+  padding: 22px 24px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
+}
+
+.concepts-intro-card p {
+  margin: 0;
+  color: var(--text-dim);
+  line-height: 1.7;
+}
+
+.concepts-intro-title {
+  margin: 0 0 10px;
+  font-size: 1.15rem;
+}
+
+.concept-anchors {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.concept-anchor {
+  display: grid;
+  gap: 6px;
+  padding: 18px;
+  border-radius: 18px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.02);
+  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
+}
+
+.concept-anchor:hover {
+  transform: translateY(-2px);
+  border-color: rgba(245, 166, 35, 0.3);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.concept-anchor span,
+.concept-anchor small {
+  color: var(--text-dim);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.concept-anchor strong {
+  font-size: 0.96rem;
+}
+
+.concept-section {
+  display: grid;
+  gap: 22px;
+  padding: 24px;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  background:
+    radial-gradient(circle at top right, rgba(245, 166, 35, 0.08), transparent 28%),
+    rgba(8, 11, 16, 0.94);
+}
+
+.concept-copy {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+}
+
+.concept-copy-head {
+  display: grid;
+  gap: 10px;
+}
+
+.concept-kicker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  color: var(--text-dim);
+  font-size: 0.72rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.concept-name {
+  font-size: clamp(2rem, 2.2vw, 2.7rem);
+}
+
+.concept-summary {
+  margin: 0;
+  color: var(--text-dim);
+  line-height: 1.75;
+}
+
+.concept-detail {
+  display: grid;
+  gap: 10px;
+}
+
+.concept-detail-title {
+  font-size: 0.9rem;
+  color: var(--text);
+}
+
+.concept-bullet-list {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--text-dim);
+  display: grid;
+  gap: 10px;
+  line-height: 1.6;
+}
+
+.concept-preview {
+  min-width: 0;
+}
+
+.mockup-frame {
+  --mock-bg: #0d141c;
+  --mock-surface: rgba(10, 16, 22, 0.86);
+  --mock-surface-2: rgba(255, 255, 255, 0.06);
+  --mock-border: rgba(255, 255, 255, 0.1);
+  --mock-text: #eff6ff;
+  --mock-dim: #8d9fb2;
+  --mock-accent: #ffb13c;
+  --mock-accent-soft: rgba(255, 177, 60, 0.16);
+  --mock-positive: #76e7aa;
+  --mock-negative: #ff7f79;
+  --mock-neutral: #83beff;
+  position: relative;
+  overflow: hidden;
+  padding: 20px;
+  border-radius: 26px;
+  border: 1px solid var(--mock-border);
+  color: var(--mock-text);
+  background: var(--mock-bg);
+  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
+}
+
+.mock-topbar,
+.mock-metric-rack,
+.mission-command,
+.mission-footer,
+.editorial-hero,
+.editorial-columns,
+.glass-overview,
+.glass-secondary,
+.brutal-main,
+.brutal-ribbons,
+.notebook-main,
+.notebook-notes,
+.mock-summary-grid,
+.mock-operator-grid,
+.notebook-callouts {
+  display: grid;
+  gap: 16px;
+}
+
+.mock-topbar {
+  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) minmax(220px, auto);
+  align-items: center;
+  padding: 16px 18px;
+  border-radius: 20px;
+  border: 1px solid var(--mock-border);
+  background: var(--mock-surface);
+  backdrop-filter: blur(20px);
+}
+
+.mock-brand {
+  display: grid;
+  gap: 4px;
+}
+
+.mock-brand-kicker,
+.mock-module-kicker,
+.mock-metric span,
+.mock-row-meta,
+.editorial-volume,
+.editorial-toolbar,
+.notebook-title span {
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 0.72rem;
+}
+
+.mock-brand-kicker,
+.mock-module-kicker,
+.mock-metric span,
+.mock-module-meta,
+.mock-filter,
+.mock-row-meta,
+.mock-chart-labels,
+.mock-chart-axis,
+.editorial-volume,
+.editorial-meta,
+.editorial-toolbar,
+.notebook-title span {
+  color: var(--mock-dim);
+}
+
+.mock-brand-name {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.mock-status-cluster,
+.mock-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.mock-status-cluster {
+  justify-content: center;
+}
+
+.mock-actions {
+  justify-content: flex-end;
+}
+
+.mock-chip,
+.mock-button,
+.mock-filter,
+.notebook-tabs span,
+.brutal-badges span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--mock-border);
+  background: var(--mock-surface-2);
+  font-size: 0.74rem;
+}
+
+.mock-chip strong {
+  color: var(--mock-text);
+}
+
+.mock-chip-positive {
+  border-color: rgba(118, 231, 170, 0.35);
+  background: rgba(118, 231, 170, 0.12);
+}
+
+.mock-chip-negative {
+  border-color: rgba(255, 127, 121, 0.35);
+  background: rgba(255, 127, 121, 0.12);
+}
+
+.mock-chip-accent {
+  border-color: rgba(255, 177, 60, 0.35);
+  background: rgba(255, 177, 60, 0.14);
+}
+
+.mock-button {
+  color: var(--mock-text);
+}
+
+.mock-filter {
+  min-width: 220px;
+}
+
+.mock-metric-rack {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.mock-metric {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid var(--mock-border);
+  background: var(--mock-surface);
+}
+
+.mock-metric strong {
+  font-size: 1.2rem;
+}
+
+.mock-module {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  padding: 18px;
+  border-radius: 22px;
+  border: 1px solid var(--mock-border);
+  background: var(--mock-surface);
+}
+
+.mock-module-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.mock-module-kicker {
+  margin: 0 0 6px;
+}
+
+.mock-module-title,
+.mock-row-head h4,
+.editorial-masthead h3,
+.brutal-banner h3,
+.notebook-topbar h3 {
+  margin: 0;
+}
+
+.mock-module-title {
+  font-size: 1.05rem;
+  line-height: 1.2;
+}
+
+.mock-module-meta {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.mock-chart {
+  display: grid;
+  gap: 12px;
+}
+
+.mock-chart-labels,
+.mock-chart-axis {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.mock-chart-svg {
+  width: 100%;
+  height: 250px;
+  border-radius: 18px;
+  border: 1px solid var(--mock-border);
+  background:
+    linear-gradient(0deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+    rgba(6, 10, 14, 0.45);
+  background-size: 100% 25%, 12.5% 100%;
+}
+
+.mock-chart-area {
+  fill: var(--mock-accent-soft);
+}
+
+.mock-chart-line {
+  stroke: var(--mock-accent);
+  stroke-width: 4;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.mock-chart-marker {
+  fill: var(--mock-positive);
+  stroke: rgba(0, 0, 0, 0.35);
+  stroke-width: 2;
+}
+
+.mock-chart-marker-alt {
+  fill: var(--mock-negative);
+}
+
+.mock-row-list {
+  display: grid;
+  gap: 12px;
+}
+
+.mock-row {
+  display: grid;
+  gap: 8px;
+  padding: 14px 15px;
+  border-radius: 18px;
+  border: 1px solid var(--mock-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.mock-row-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.mock-row-head h4 {
+  font-size: 0.96rem;
+}
+
+.mock-row-meta,
+.mock-row-note,
+.editorial-copy p,
+.concept-anchors small {
+  margin: 0;
+}
+
+.mock-row-note,
+.editorial-copy p {
+  line-height: 1.55;
+}
+
+.mock-tone-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.mock-tone-dot-positive {
+  background: var(--mock-positive);
+}
+
+.mock-tone-dot-negative {
+  background: var(--mock-negative);
+}
+
+.mock-tone-dot-neutral {
+  background: var(--mock-neutral);
+}
+
+.mock-tone-dot-accent {
+  background: var(--mock-accent);
+}
+
+.mock-summary-grid,
+.mock-operator-grid,
+.notebook-callouts {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mock-summary-card,
+.mock-operator-item,
+.notebook-callout {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid var(--mock-border);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.mock-summary-card span,
+.mock-operator-item span,
+.notebook-callout span {
+  color: var(--mock-dim);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+.mission-frame {
+  font-family: var(--font-concept-sans), sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(255, 177, 60, 0.14), transparent 25%),
+    linear-gradient(145deg, #0a1118, #101923 60%, #081018);
+}
+
+.mission-frame .mock-brand-name,
+.mission-frame .mock-module-title {
+  font-family: var(--font-concept-condensed), sans-serif;
+  letter-spacing: 0.03em;
+}
+
+.mission-command {
+  margin-top: 16px;
+  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.95fr);
+}
+
+.mission-main,
+.mission-side {
+  display: grid;
+  gap: 16px;
+}
+
+.mission-footer {
+  margin-top: 16px;
+  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.9fr);
+}
+
+.editorial-frame {
+  --mock-bg: linear-gradient(180deg, #f4eedf, #ece3cf);
+  --mock-surface: rgba(255, 252, 245, 0.85);
+  --mock-surface-2: rgba(130, 100, 56, 0.08);
+  --mock-border: rgba(98, 81, 53, 0.18);
+  --mock-text: #2d2418;
+  --mock-dim: #77624a;
+  --mock-accent: #95622a;
+  --mock-accent-soft: rgba(149, 98, 42, 0.16);
+  --mock-positive: #2f8454;
+  --mock-negative: #a14d4b;
+  --mock-neutral: #4c6f97;
+  font-family: var(--font-concept-editorial-body), serif;
+  box-shadow: 0 28px 70px rgba(35, 24, 12, 0.16);
+}
+
+.editorial-frame .mock-module-title,
+.editorial-masthead h3 {
+  font-family: var(--font-concept-editorial-display), serif;
+  letter-spacing: 0;
+}
+
+.editorial-masthead {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  padding-bottom: 16px;
+  margin-bottom: 14px;
+  border-bottom: 1px solid rgba(98, 81, 53, 0.18);
+}
+
+.editorial-masthead h3 {
+  font-size: clamp(2rem, 3vw, 3.2rem);
+  line-height: 0.95;
+}
+
+.editorial-meta {
+  display: grid;
+  gap: 6px;
+  justify-items: end;
+  text-align: right;
+  font-size: 0.8rem;
+}
+
+.editorial-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  padding-bottom: 16px;
+  margin-bottom: 16px;
+  border-bottom: 1px dashed rgba(98, 81, 53, 0.24);
+}
+
+.editorial-hero {
+  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
+}
+
+.editorial-columns {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 16px;
+}
+
+.editorial-copy {
+  display: grid;
+  gap: 12px;
+}
+
+.glass-frame {
+  --mock-bg: linear-gradient(145deg, rgba(7, 12, 18, 0.96), rgba(21, 45, 69, 0.94));
+  --mock-surface: rgba(255, 255, 255, 0.08);
+  --mock-surface-2: rgba(255, 255, 255, 0.06);
+  --mock-border: rgba(180, 220, 255, 0.18);
+  --mock-text: #f4fbff;
+  --mock-dim: #b2c8dc;
+  --mock-accent: #93d8ff;
+  --mock-accent-soft: rgba(147, 216, 255, 0.17);
+  --mock-positive: #8effc2;
+  --mock-negative: #ff93ad;
+  --mock-neutral: #b8cfff;
+  font-family: var(--font-concept-future), sans-serif;
+  background:
+    radial-gradient(circle at 15% 18%, rgba(125, 222, 255, 0.28), transparent 20%),
+    radial-gradient(circle at 88% 12%, rgba(180, 122, 255, 0.22), transparent 22%),
+    radial-gradient(circle at 55% 82%, rgba(126, 255, 201, 0.18), transparent 24%),
+    linear-gradient(145deg, rgba(7, 12, 18, 0.98), rgba(21, 45, 69, 0.94));
+}
+
+.glass-overview {
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(260px, 0.92fr);
+  margin-top: 16px;
+}
+
+.glass-secondary {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 16px;
+}
+
+.glass-frame .mock-module,
+.glass-frame .mock-topbar,
+.glass-frame .mock-metric {
+  backdrop-filter: blur(24px);
+}
+
+.brutal-frame {
+  --mock-bg: #f0dd53;
+  --mock-surface: rgba(255, 250, 207, 0.92);
+  --mock-surface-2: rgba(13, 14, 16, 0.08);
+  --mock-border: rgba(13, 14, 16, 0.9);
+  --mock-text: #111318;
+  --mock-dim: rgba(17, 19, 24, 0.7);
+  --mock-accent: #111318;
+  --mock-accent-soft: rgba(17, 19, 24, 0.12);
+  --mock-positive: #208b4d;
+  --mock-negative: #bf3730;
+  --mock-neutral: #2b66c7;
+  font-family: var(--font-concept-sans), sans-serif;
+  box-shadow: 0 28px 70px rgba(36, 28, 7, 0.22);
+}
+
+.brutal-banner {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+  border: 2px solid rgba(13, 14, 16, 0.92);
+  border-radius: 22px;
+  background: rgba(255, 250, 207, 0.92);
+}
+
+.brutal-banner-copy span,
+.brutal-badges span,
+.brutal-frame .mock-module-kicker,
+.brutal-frame .mock-metric span {
+  font-family: var(--font-concept-brutal), sans-serif;
+  letter-spacing: 0.12em;
+}
+
+.brutal-banner h3 {
+  font-family: var(--font-concept-brutal), sans-serif;
+  font-size: clamp(2.5rem, 4vw, 4.3rem);
+  line-height: 0.9;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.brutal-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.brutal-main {
+  grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.4fr);
+  margin-top: 16px;
+}
+
+.brutal-ribbons {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 16px;
+}
+
+.brutal-frame .mock-module,
+.brutal-frame .mock-metric,
+.brutal-frame .mock-row,
+.brutal-frame .mock-chart-svg {
+  border-width: 2px;
+  box-shadow: 8px 8px 0 rgba(17, 19, 24, 0.18);
+}
+
+.notebook-frame {
+  --mock-bg: linear-gradient(180deg, #efe5d1, #e5d7bc);
+  --mock-surface: rgba(255, 248, 235, 0.85);
+  --mock-surface-2: rgba(118, 92, 54, 0.08);
+  --mock-border: rgba(124, 101, 67, 0.22);
+  --mock-text: #2d261d;
+  --mock-dim: #6e5d47;
+  --mock-accent: #8a6233;
+  --mock-accent-soft: rgba(138, 98, 51, 0.14);
+  --mock-positive: #4d8f60;
+  --mock-negative: #a45a53;
+  --mock-neutral: #607996;
+  font-family: var(--font-concept-editorial-body), serif;
+  box-shadow: 0 28px 70px rgba(50, 38, 23, 0.18);
+}
+
+.notebook-topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  border-bottom: 1px dashed rgba(124, 101, 67, 0.3);
+}
+
+.notebook-title h3,
+.notebook-frame .mock-module-title {
+  font-family: var(--font-concept-notebook), serif;
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+
+.notebook-title h3 {
+  font-size: clamp(1.8rem, 2.3vw, 2.4rem);
+  line-height: 1.1;
+}
+
+.notebook-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.notebook-layout {
+  display: grid;
+  gap: 16px;
+}
+
+.notebook-main {
+  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.9fr);
+}
+
+.notebook-notes {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.notebook-callouts {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 1181px) {
+  .concept-section {
+    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 1180px) {
+  .concepts-intro,
+  .concept-anchors,
+  .glass-overview,
+  .mission-command,
+  .mission-footer,
+  .editorial-hero,
+  .editorial-columns,
+  .glass-secondary,
+  .brutal-main,
+  .brutal-ribbons,
+  .notebook-main,
+  .notebook-notes {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .concept-anchors {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .mock-topbar,
+  .mock-metric-rack,
+  .mock-summary-grid,
+  .mock-operator-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .mock-status-cluster,
+  .mock-actions,
+  .editorial-meta,
+  .notebook-tabs {
+    justify-content: flex-start;
+    text-align: left;
+  }
+
+  .editorial-masthead,
+  .notebook-topbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 720px) {
+  .concepts-page {
+    gap: 22px;
+  }
+
+  .concept-section,
+  .mockup-frame {
+    padding: 18px;
+  }
+
+  .concept-anchors {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .mock-filter {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .brutal-banner h3,
+  .editorial-masthead h3 {
+    font-size: 2.2rem;
+  }
+
+  .mock-chart-svg {
+    height: 220px;
+  }
+}
diff --git a/apps/web/app/terminal.tsx b/apps/web/app/terminal.tsx
index 8f1c2e0..a5b09d3 100644
--- a/apps/web/app/terminal.tsx
+++ b/apps/web/app/terminal.tsx
@@ -3223,7 +3223,8 @@ const NAV_ITEMS = [
   { href: "/tape", label: "Tape" },
   { href: "/signals", label: "Signals" },
   { href: "/charts", label: "Charts" },
-  { href: "/replay", label: "Replay" }
+  { href: "/replay", label: "Replay" },
+  { href: "/concepts", label: "Concepts" }
 ];
 
 type PageFrameProps = {