feat(design): new ProductShowcase section — 'When something breaks'

Editorial section between DualValueProps and HowItWorks. Breaks the
identical-rectangle cascade with an asymmetric 8/4 grid: large
error-detail screenshot with subtle cyan/amber backlight on the left,
three numbered callout captions on the right.

The screenshot (cross-route correlation chain + circuit breaker +
fallback + Java stack trace) makes the 'deep tracing, replay, live
control' claims concrete in a way the abstract RouteDiagram never did.

Cyan kicker on this section (vs. amber elsewhere) signals 'this one is
different' and echoes the cross-route correlation color in the product.

src/components/sections/ProductShowcase.astro

@@ -0,0 +1,92 @@
+---
+import TopographicBg from '../TopographicBg.astro';
+
+interface Callout {
+  title: string;
+  body: string;
+}
+
+const callouts: Callout[] = [
+  {
+    title: 'Cross-service correlation.',
+    body: 'Every exchange carries its correlation ID forward. One click jumps to what the downstream route did with the same message — 610 ms later.',
+  },
+  {
+    title: 'Runtime detail, not guesswork.',
+    body: 'Circuit breaker tripped. Fallback path ran. The request tried to reach backend:80. The kind of pieces a 3 AM page actually needs — already captured.',
+  },
+  {
+    title: 'The whole story of a failure.',
+    body: 'Exception class, message, stack trace, headers, payload — all pinned to the exchange. No log-grepping tour. No SSH into the pod.',
+  },
+];
+---
+<section class="relative overflow-hidden border-b border-border bg-bg">
+  <TopographicBg opacity={0.14} lines={7} />
+  <div class="relative max-w-content mx-auto px-6 py-24 md:py-32">
+    <div class="max-w-3xl mb-14 md:mb-20">
+      <p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">When it breaks</p>
+      <h2 class="text-hero font-bold text-text mb-5">
+        When something breaks, the answer is already waiting.
+      </h2>
+      <p class="text-lg text-text-muted leading-relaxed">
+        Follow a single exchange from ingestion to failure. See the route it took, the fallback that ran, the stack trace, the correlated downstream work — in one place. Without writing a line of tracing code.
+      </p>
+    </div>
+
+    <div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-start">
+      <figure class="lg:col-span-8 relative">
+        <div class="showcase-shot relative rounded-lg border border-border-strong bg-bg-elevated overflow-hidden">
+          <img
+            src="/product/error-detail.png"
+            alt="Cameleer Mission Control — complex fulfillment route with circuit breaker, fallback, correlated audit route, and full error context"
+            width="1920"
+            height="945"
+            loading="lazy"
+            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>
+        <figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
+        <div aria-hidden="true" class="showcase-shot-glow"></div>
+      </figure>
+
+      <ul class="lg:col-span-4 space-y-7 lg:pt-4">
+        {callouts.map((c, i) => (
+          <li class="relative pl-10">
+            <span
+              class="absolute left-0 top-0 inline-flex items-center justify-center w-7 h-7 rounded-full border border-accent/40 bg-accent/10 text-accent font-mono text-xs"
+              aria-hidden="true"
+            >
+              {String(i + 1).padStart(2, '0')}
+            </span>
+            <h3 class="text-text font-semibold mb-1.5">{c.title}</h3>
+            <p class="text-text-muted leading-relaxed">{c.body}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </div>
+</section>
+
+<style>
+  .showcase-shot {
+    box-shadow:
+      0 1px 0 rgba(240, 180, 41, 0.08) inset,
+      0 40px 80px -30px rgba(0, 0, 0, 0.7),
+      0 15px 35px -15px rgba(0, 0, 0, 0.5);
+  }
+  .showcase-shot-glow {
+    position: absolute;
+    inset: -5% -8% -5% -8%;
+    background: radial-gradient(
+      55% 55% at 45% 50%,
+      rgba(92, 200, 255, 0.10),
+      rgba(240, 180, 41, 0.08) 40%,
+      transparent 75%
+    );
+    filter: blur(50px);
+    z-index: -1;
+  }
+</style>

src/pages/index.astro

@@ -4,6 +4,7 @@ import SiteHeader from '../components/SiteHeader.astro';
 import SiteFooter from '../components/SiteFooter.astro';
 import Hero from '../components/sections/Hero.astro';
 import DualValueProps from '../components/sections/DualValueProps.astro';
+import ProductShowcase from '../components/sections/ProductShowcase.astro';
 import HowItWorks from '../components/sections/HowItWorks.astro';
 import WhyUs from '../components/sections/WhyUs.astro';
 import PricingTeaser from '../components/sections/PricingTeaser.astro';
@@ -17,6 +18,7 @@ import FinalCTA from '../components/sections/FinalCTA.astro';
   <main>
     <Hero />
     <DualValueProps />
+    <ProductShowcase />
     <HowItWorks />
     <WhyUs />
     <PricingTeaser />