diff --git a/docs/src/content/docs/index.md b/docs/src/content/docs/index.md
index afd9672..7c004db 100644
--- a/docs/src/content/docs/index.md
+++ b/docs/src/content/docs/index.md
@@ -5,46 +5,76 @@ template: splash
 next: false
 hero:
   title: execbox
-  tagline: Portable code execution for MCP tools and wrapped MCP servers, with runtime boundaries you choose.
+  tagline: Run guest JavaScript against host-defined tools and wrapped MCP servers with one portable execution contract.
   actions:
     - text: Getting Started
       link: /getting-started/
       variant: primary
 ---
 
-## What execbox does
+<section class="execbox-start">
+  <div>
+    <p class="execbox-eyebrow">Node.js 22+ library for tool-backed JavaScript execution</p>
+    <h2>Start with one provider and one guest call.</h2>
+    <p>
+      Execbox turns host tool catalogs into scoped guest namespaces. Begin with
+      the QuickJS package, execute a small provider flow, then move into examples
+      or MCP wrapping when the contract is clear.
+    </p>
+  </div>
+  <div class="execbox-command" aria-label="Install execbox">
+    <div class="execbox-command__bar">
+      <span>Install</span>
+      <code>npm</code>
+    </div>
+    <pre><code>npm install @execbox/core @execbox/quickjs</code></pre>
+  </div>
+</section>
 
-Execbox is a Node.js library for running guest JavaScript against host-defined tools and wrapped MCP servers. It separates:
+<section class="execbox-paths" aria-labelledby="start-building">
+  <div class="execbox-section-heading">
+    <p class="execbox-eyebrow">Start building</p>
+    <h2 id="start-building">Follow the shortest path into the docs.</h2>
+  </div>
+  <div class="execbox-path-grid">
+    <a class="execbox-path execbox-path--primary" href="/getting-started/">
+      <span class="execbox-path__step">01</span>
+      <h3>Run the smallest example</h3>
+      <p>Install the packages, define one host tool, and call it from guest JavaScript.</p>
+      <strong>Open Getting Started</strong>
+    </a>
+    <a class="execbox-path" href="/examples/">
+      <span class="execbox-path__step">02</span>
+      <h3>Try the runnable flows</h3>
+      <p>Compare the basic, worker, remote, MCP provider, and MCP server examples.</p>
+      <strong>Browse Examples</strong>
+    </a>
+    <a class="execbox-path" href="/architecture/execbox-mcp-and-protocol/">
+      <span class="execbox-path__step">03</span>
+      <h3>Wrap MCP tools</h3>
+      <p>Expose upstream MCP catalogs as callable guest namespaces through the execbox protocol.</p>
+      <strong>Read MCP Provider</strong>
+    </a>
+  </div>
+</section>
 
-- what tools are available
-- where guest code runs
-- how calls cross boundaries
-
-That split gives you one execution contract across inline QuickJS, worker-hosted QuickJS, and remote transport-backed execution.
-
-<div class="execbox-card-grid">
-  <a class="execbox-card" href="/getting-started/">
-    <h3>Install and run</h3>
-    <p>Start with the smallest QuickJS example and one provider flow.</p>
-  </a>
-  <a class="execbox-card" href="/runtime-choices/">
-    <h3>Choose a runtime</h3>
-    <p>Pick inline QuickJS, worker-hosted QuickJS, or a remote runner.</p>
-  </a>
-  <a class="execbox-card" href="/architecture/execbox-mcp-and-protocol/">
-    <h3>Wrap MCP tools</h3>
-    <p>Expose upstream MCP catalogs as callable guest namespaces.</p>
-  </a>
-  <a class="execbox-card" href="/security/">
-    <h3>Review boundaries</h3>
-    <p>Understand the provider capability surface before production use.</p>
-  </a>
-</div>
-
-## Runtime packages
-
-| Backend               | Package            | Start here when                                                                      |
-| --------------------- | ------------------ | ------------------------------------------------------------------------------------ |
-| In-process QuickJS    | `@execbox/quickjs` | You want the easiest install and the default development path.                       |
-| Worker-backed QuickJS | `@execbox/quickjs` | You want the runtime off the main thread with pooled worker reuse.                   |
-| Remote transport      | `@execbox/remote`  | Your application owns the process, container, VM, or network boundary for a runtime. |
+<section class="execbox-contract" aria-labelledby="contract">
+  <div class="execbox-section-heading">
+    <p class="execbox-eyebrow">What stays consistent</p>
+    <h2 id="contract">A small contract between host tools and guest code.</h2>
+  </div>
+  <div class="execbox-contract-grid">
+    <div>
+      <h3>Host-owned capabilities</h3>
+      <p>Applications decide which tools exist and how each call is executed.</p>
+    </div>
+    <div>
+      <h3>Scoped guest namespaces</h3>
+      <p>Guest code calls named providers instead of reaching into host internals.</p>
+    </div>
+    <div>
+      <h3>JSON-only transport shape</h3>
+      <p>Inputs, outputs, logs, and tool calls stay serializable across boundaries.</p>
+    </div>
+  </div>
+</section>
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 9881d1c..a4d6b1e 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -1,15 +1,23 @@
 :root {
-  --sl-color-accent-low: #082f49;
-  --sl-color-accent: #38bdf8;
-  --sl-color-accent-high: #bae6fd;
-  --sl-color-white: #f8fafc;
-  --sl-color-gray-1: #e5e7eb;
-  --sl-color-gray-2: #cbd5e1;
-  --sl-color-gray-3: #94a3b8;
-  --sl-color-gray-4: #64748b;
-  --sl-color-gray-5: #334155;
-  --sl-color-gray-6: #1e293b;
-  --sl-color-black: #0b1120;
+  --sl-color-accent-low: #0f2d4a;
+  --sl-color-accent: #5cc8ff;
+  --sl-color-accent-high: #d7efff;
+  --sl-color-white: #fbfdff;
+  --sl-color-gray-1: #eef3f8;
+  --sl-color-gray-2: #d5dee9;
+  --sl-color-gray-3: #a6b4c4;
+  --sl-color-gray-4: #728195;
+  --sl-color-gray-5: #394657;
+  --sl-color-gray-6: #1d2632;
+  --sl-color-black: #0c1017;
+  --execbox-surface: #111821;
+  --execbox-surface-soft: #171f2b;
+  --execbox-border: #2b394a;
+  --execbox-warm: #f2b56b;
+  --execbox-command-bg: #0c1220;
+  --execbox-command-bar: #101a2a;
+  --execbox-command-chip: #233247;
+  --execbox-command-text: #dce7f5;
 }
 
 :root[data-theme="light"] {
@@ -25,41 +33,215 @@
   --sl-color-gray-6: #eef2f7;
   --sl-color-gray-7: #f8fafc;
   --sl-color-black: #ffffff;
+  --execbox-surface: #ffffff;
+  --execbox-surface-soft: #f4f7fb;
+  --execbox-border: #d8dee8;
+  --execbox-warm: #b45309;
+  --execbox-command-bg: #101828;
+  --execbox-command-bar: #172235;
+  --execbox-command-chip: #263449;
+  --execbox-command-text: #e5edf8;
 }
 
 .hero {
   align-items: center;
+  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
 }
 
-.execbox-card-grid {
+.execbox-start,
+.execbox-paths,
+.execbox-contract {
+  margin-block: 2rem;
+}
+
+.execbox-start {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
-  gap: 1rem;
-  margin-block: 1.5rem 2rem;
+  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
+  gap: 1.25rem;
+  align-items: stretch;
+  border: 1px solid var(--execbox-border);
+  border-radius: 0.75rem;
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--sl-color-accent-low) 34%, transparent),
+      transparent 55%
+    ),
+    var(--execbox-surface);
+  padding: clamp(1rem, 3vw, 1.5rem);
+}
+
+.execbox-start h2,
+.execbox-section-heading h2 {
+  margin-block: 0 0.6rem;
+  color: var(--sl-color-white);
+  font-size: 1.75rem;
+  letter-spacing: 0;
+  line-height: 1.12;
+}
+
+.execbox-start p,
+.execbox-section-heading {
+  max-width: 46rem;
 }
 
-.execbox-card {
-  border: 1px solid var(--sl-color-gray-5);
+.execbox-start p,
+.execbox-path p,
+.execbox-contract p {
+  color: var(--sl-color-gray-2);
+}
+
+.execbox-eyebrow {
+  margin-block: 0 0.65rem;
+  color: var(--execbox-warm);
+  font-size: var(--sl-text-sm);
+  font-weight: 650;
+  letter-spacing: 0;
+}
+
+.execbox-command {
+  display: grid;
+  align-content: center;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid
+    color-mix(in srgb, var(--sl-color-accent) 34%, var(--execbox-border));
   border-radius: 0.5rem;
-  background: color-mix(in srgb, var(--sl-color-gray-6) 72%, transparent);
+  background: var(--execbox-command-bg);
+  box-shadow: 0 1rem 2.4rem
+    color-mix(in srgb, var(--sl-color-black) 24%, transparent);
+}
+
+.execbox-command__bar {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--execbox-border);
+  background: var(--execbox-command-bar);
+  padding: 0.65rem 0.8rem;
+  color: var(--execbox-command-text);
+  font-size: var(--sl-text-sm);
+}
+
+.execbox-command__bar code {
+  background: var(--execbox-command-chip);
+  color: var(--execbox-command-text);
+}
+
+.execbox-command pre {
+  margin: 0;
+  overflow-x: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--execbox-command-text);
+  padding: 1rem;
+  font-size: var(--sl-text-sm);
+}
+
+.execbox-command code {
+  overflow-wrap: normal;
+  white-space: pre;
+}
+
+.execbox-section-heading {
+  margin-block-end: 1rem;
+}
+
+.execbox-path-grid,
+.execbox-contract-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.execbox-path {
+  display: grid;
+  min-height: 15rem;
+  align-content: start;
+  border: 1px solid var(--execbox-border);
+  border-radius: 0.625rem;
+  background: var(--execbox-surface);
   padding: 1rem;
   text-decoration: none;
   transition:
     border-color 140ms ease,
-    background-color 140ms ease;
+    background-color 140ms ease,
+    transform 140ms ease;
 }
 
-.execbox-card:hover {
+.execbox-path:hover {
   border-color: var(--sl-color-accent);
-  background: color-mix(in srgb, var(--sl-color-accent-low) 36%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--sl-color-accent-low) 24%,
+    var(--execbox-surface)
+  );
+  transform: translateY(-1px);
+}
+
+.execbox-path--primary {
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--sl-color-accent-low) 28%, transparent),
+      transparent
+    ),
+    var(--execbox-surface);
+}
+
+.execbox-path__step {
+  color: var(--sl-color-accent);
+  font-size: var(--sl-text-sm);
+  font-weight: 700;
 }
 
-.execbox-card h3 {
-  margin-block: 0 0.5rem;
+.execbox-path h3,
+.execbox-contract h3 {
+  margin-block: 0.75rem 0.5rem;
+  color: var(--sl-color-white);
   font-size: var(--sl-text-lg);
+  letter-spacing: 0;
 }
 
-.execbox-card p {
-  margin: 0;
-  color: var(--sl-color-gray-2);
+.execbox-path p,
+.execbox-contract p {
+  margin-block: 0;
+}
+
+.execbox-path strong {
+  margin-block-start: 1.25rem;
+  color: var(--sl-color-accent-high);
+  font-size: var(--sl-text-sm);
+}
+
+.execbox-contract-grid > div {
+  border-left: 2px solid
+    color-mix(in srgb, var(--sl-color-accent) 45%, var(--execbox-border));
+  background: color-mix(in srgb, var(--execbox-surface-soft) 80%, transparent);
+  padding: 0.2rem 0 0.2rem 1rem;
+}
+
+@media (max-width: 50rem) {
+  .execbox-start,
+  .execbox-path-grid,
+  .execbox-contract-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .execbox-command code {
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  .execbox-path {
+    min-height: 0;
+  }
+}
+
+@media (min-width: 50rem) {
+  .execbox-start h2,
+  .execbox-section-heading h2 {
+    font-size: 2rem;
+  }
 }