diff --git a/.claude/scheduled_tasks.lock b/.claude/scheduled_tasks.lock
new file mode 100644
index 0000000..38a4b33
--- /dev/null
+++ b/.claude/scheduled_tasks.lock
@@ -0,0 +1 @@
+{"sessionId":"5f077efe-7838-4a44-8b13-5439c0e554a1","pid":30820,"acquiredAt":1777049469642}
\ No newline at end of file
diff --git a/public/product/error-detail.png b/public/product/error-detail.png
new file mode 100644
index 0000000..0ad801f
Binary files /dev/null and b/public/product/error-detail.png differ
diff --git a/public/product/exchange-detail.png b/public/product/exchange-detail.png
new file mode 100644
index 0000000..6637628
Binary files /dev/null and b/public/product/exchange-detail.png differ
diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
index 1b56b0d..ca8434d 100644
--- a/src/components/SiteFooter.astro
+++ b/src/components/SiteFooter.astro
@@ -4,14 +4,14 @@ const year = new Date().getFullYear();
 <footer class="border-t border-border mt-24">
   <div class="max-w-content mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
     <div class="flex items-center gap-3">
-      <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true">
-        <rect width="32" height="32" rx="6" fill="#0c111a"/>
-        <g fill="none" stroke="#f0b429" stroke-width="1.6" stroke-linecap="round">
-          <path d="M4 10 Q10 6 16 12 T28 10"/>
-          <path d="M4 16 Q10 12 16 18 T28 16"/>
-          <path d="M4 22 Q10 18 16 24 T28 22"/>
-        </g>
-      </svg>
+      <img
+        src="/cameleer-logo.svg"
+        width="24"
+        height="24"
+        alt=""
+        decoding="async"
+        class="shrink-0 opacity-80"
+      />
       <span class="text-text-muted text-sm">© {year} Cameleer</span>
     </div>
     <nav class="flex items-center gap-8 text-sm text-text-muted" aria-label="Footer">
diff --git a/src/components/sections/Hero.astro b/src/components/sections/Hero.astro
index 60dca6a..dad984c 100644
--- a/src/components/sections/Hero.astro
+++ b/src/components/sections/Hero.astro
@@ -1,58 +1,75 @@
 ---
 import CTAButtons from '../CTAButtons.astro';
-import RouteDiagram from '../RouteDiagram.astro';
 import TopographicBg from '../TopographicBg.astro';
 ---
 <section class="relative overflow-hidden border-b border-border">
-  <TopographicBg opacity={0.14} lines={10} />
-  <div class="relative max-w-content mx-auto px-6 pt-20 pb-24 md:pt-28 md:pb-32">
-    <div class="max-w-3xl">
-      <div class="flex items-center gap-3 mb-6">
+  <TopographicBg opacity={0.22} lines={11} />
+  <div class="relative max-w-content mx-auto px-6 pt-16 pb-20 md:pt-24 md:pb-24 lg:pt-28">
+    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
+      <div class="lg:col-span-5">
         <img
           src="/cameleer-logo.svg"
-          width="48"
-          height="48"
+          width="64"
+          height="64"
           alt=""
           decoding="async"
-          class="shrink-0"
+          class="shrink-0 mb-5 hero-mark"
         />
-        <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase">
+        <p
+          class="inline-flex items-center gap-2 mb-7 rounded-full border border-accent/30 bg-accent/[0.08] text-accent px-3.5 py-1 text-sm italic font-medium"
+        >
+          <span aria-hidden="true" class="text-base">✦</span>
           Your camels called. They want a GPS.
         </p>
+        <h1
+          class="font-bold text-text mb-6 hero-rotator"
+          aria-live="off"
+          data-hero-rotator
+        >
+          <span class="hero-line" data-active aria-hidden="false">Run Apache Camel without running Apache Camel.</span>
+          <span class="hero-line" aria-hidden="true">Camel integrations, minus the baggage.</span>
+          <span class="hero-line" aria-hidden="true">Your camels, our caravan. You just ride.</span>
+        </h1>
+        <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
+          The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night.
+        </p>
+        <CTAButtons size="lg" />
+      </div>
+      <div class="lg:col-span-7 relative">
+        <div class="hero-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
+          <img
+            src="/product/exchange-detail.png"
+            alt="Cameleer Mission Control — route execution detail with processor-level trace"
+            width="1920"
+            height="945"
+            loading="eager"
+            decoding="async"
+            class="block w-full h-auto"
+          />
+          <div class="absolute inset-0 ring-1 ring-inset ring-accent/10 pointer-events-none rounded-lg"></div>
+        </div>
+        <div aria-hidden="true" class="hero-shot-glow"></div>
       </div>
-      <h1
-        class="text-display font-bold text-text mb-6 hero-rotator"
-        aria-live="off"
-        data-hero-rotator
-      >
-        <span class="hero-line" data-active aria-hidden="false">Run Apache Camel without running Apache Camel.</span>
-        <span class="hero-line" aria-hidden="true">Camel integrations, minus the baggage.</span>
-        <span class="hero-line" aria-hidden="true">Your camels, our caravan. You just ride.</span>
-      </h1>
-      <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
-        The hosted home for your Camel integrations — with deep tracing, replay, and live control built in. Because you chose Camel to stay free, not to stay up all night.
-      </p>
-      <CTAButtons size="lg" />
-    </div>
-    <div class="mt-16 md:mt-20">
-      <RouteDiagram />
     </div>
   </div>
 </section>
 
 <style>
+  /* Rotating H1 — fluid size + fade transition */
   .hero-rotator {
+    font-size: clamp(2.25rem, 4.5vw, 4rem);
+    line-height: 1.05;
+    letter-spacing: -0.02em;
     position: relative;
     display: block;
-    /* Reserve height for the tallest line so no layout shift on swap.
-       Two lines at current H1 size handles all three on most viewports. */
-    min-height: 2.2em;
+    /* Reserve enough vertical space that a 2-line wrap of the longest line
+       does not push the page on swap (mobile wraps line 1 to 2 lines). */
+    min-height: 2.5em;
   }
   .hero-line {
     display: block;
     opacity: 0;
     transition: opacity 700ms ease-in-out;
-    /* Stack all lines on top of each other — only [data-active] is visible. */
     position: absolute;
     inset: 0;
   }
@@ -60,10 +77,39 @@ import TopographicBg from '../TopographicBg.astro';
     opacity: 1;
     position: relative;
   }
+
+  /* Product screenshot frame — subtle dropshadow + amber glow behind */
+  .hero-shot {
+    box-shadow:
+      0 1px 0 rgba(240, 180, 41, 0.08) inset,
+      0 30px 60px -20px rgba(0, 0, 0, 0.6),
+      0 10px 25px -10px rgba(0, 0, 0, 0.5);
+  }
+  .hero-shot-glow {
+    position: absolute;
+    inset: 10% -5% 10% -5%;
+    background: radial-gradient(
+      60% 60% at 50% 50%,
+      rgba(240, 180, 41, 0.18),
+      transparent 70%
+    );
+    filter: blur(40px);
+    z-index: -1;
+  }
+
+  /* Slow sway on the mark — tasteful, not distracting */
+  @keyframes hero-mark-sway {
+    0%, 100% { transform: translateY(0) rotate(0deg); }
+    50% { transform: translateY(-2px) rotate(-1.5deg); }
+  }
+  .hero-mark {
+    animation: hero-mark-sway 7s ease-in-out infinite;
+    transform-origin: 50% 90%;
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .hero-line {
-      transition: none;
-    }
+    .hero-line { transition: none; }
+    .hero-mark { animation: none; }
   }
 </style>