diff --git a/src/components/TopographicBg.astro b/src/components/TopographicBg.astro
index b67228e..60998e6 100644
--- a/src/components/TopographicBg.astro
+++ b/src/components/TopographicBg.astro
@@ -3,24 +3,66 @@ interface Props {
   opacity?: number;
   lines?: number;
 }
-const { opacity = 0.12, lines = 8 } = Astro.props;
+const { opacity = 0.35, lines = 9 } = Astro.props;
 
-const paths: string[] = [];
+interface Line {
+  d: string;
+  width: number;       // stroke width in CSS px (non-scaling)
+  lineOpacity: number; // per-line opacity (0..1) — varies depth
+  tone: 'amber' | 'cyan';
+}
+
+const out: Line[] = [];
 const stepY = 100 / (lines + 1);
 for (let i = 1; i <= lines; i++) {
   const y = i * stepY;
-  const amp = 4 + (i % 3) * 2;
-  paths.push(`M0,${y} Q25,${y - amp} 50,${y + amp * 0.6} T100,${y}`);
+  // Mix two frequencies so adjacent lines don't read parallel.
+  const amp = 3 + (i % 3) * 2 + Math.sin(i * 1.7) * 1.2;
+  const phase = (i * 13) % 25; // shift crests horizontally
+  const d = `M0,${y} Q${25 + phase / 3},${y - amp} ${50 + phase / 5},${y + amp * 0.6} T100,${y + (i % 2 ? 1 : -1)}`;
+  // Vary stroke weight with a triangle wave — gives the feel of cartographic contour intervals.
+  const triangle = Math.abs(((i + 2) % 4) - 2) / 2;
+  const width = 0.6 + triangle * 0.9;
+  // Depth: middle lines darker, edges lighter.
+  const depth = 1 - Math.abs((i - (lines + 1) / 2)) / ((lines + 1) / 2);
+  const lineOpacity = 0.35 + depth * 0.65;
+  // One cyan line roughly every 4th — echo of the cross-route correlation color.
+  const tone: 'amber' | 'cyan' = i % 4 === 2 ? 'cyan' : 'amber';
+  out.push({ d, width, lineOpacity, tone });
 }
 ---
-<svg
-  class="absolute inset-0 w-full h-full pointer-events-none"
-  viewBox="0 0 100 100"
-  preserveAspectRatio="none"
+<div
+  class="topo-wrap absolute inset-0 pointer-events-none"
   aria-hidden="true"
-  style={`opacity:${opacity}`}
+  style={`--topo-opacity:${opacity}`}
 >
-  <g fill="none" stroke="#f0b429" stroke-width="0.15" vector-effect="non-scaling-stroke">
-    {paths.map((d) => <path d={d} />)}
-  </g>
-</svg>
+  <svg
+    class="topo-svg absolute inset-0 w-full h-full"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="none"
+  >
+    <g fill="none" vector-effect="non-scaling-stroke" stroke-linecap="round">
+      {out.map((l) => (
+        <path
+          d={l.d}
+          stroke={l.tone === 'cyan' ? '#5cc8ff' : '#f0b429'}
+          stroke-width={l.width}
+          stroke-opacity={l.lineOpacity}
+        />
+      ))}
+    </g>
+  </svg>
+</div>
+
+<style>
+  .topo-wrap {
+    opacity: var(--topo-opacity, 0.35);
+    /* Soft edge fade — lines should feel like they dissolve at the section
+       boundaries rather than hit them hard. */
+    -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
+            mask-image: radial-gradient(ellipse at 50% 45%, black 55%, transparent 95%);
+  }
+  .topo-svg {
+    filter: blur(0.15px);
+  }
+</style>
diff --git a/src/components/sections/ProductShowcase.astro b/src/components/sections/ProductShowcase.astro
index b0b6b7c..e600a54 100644
--- a/src/components/sections/ProductShowcase.astro
+++ b/src/components/sections/ProductShowcase.astro
@@ -48,8 +48,8 @@ const callouts: Callout[] = [
           />
           <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>
+        <figcaption class="sr-only">Screenshot of a failed exchange in Cameleer, showing the full execution graph, fallback path, and exception context.</figcaption>
       </figure>
 
       <ul class="lg:col-span-4 space-y-7 lg:pt-4">
diff --git a/src/components/sections/WhyUs.astro b/src/components/sections/WhyUs.astro
index 68463be..d4ffc88 100644
--- a/src/components/sections/WhyUs.astro
+++ b/src/components/sections/WhyUs.astro
@@ -20,14 +20,31 @@
           So when you ask "why did this exchange fail?", you get an answer, not a log tail. And you can reach back into a running app to replay a message, deep-trace a correlation ID, or toggle recording — observability that does things, not just shows them.
         </p>
       </div>
-      <div class="rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
-        <h3 class="text-xl font-bold text-text mb-4">Built by people who know what 3 AM looks like.</h3>
-        <p class="text-text-muted leading-relaxed mb-4">
-          We spent years building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing. We know what integration teams actually need then, and what they never use.
-        </p>
-        <p class="text-text-muted leading-relaxed">
-          Cameleer is what we would build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
-        </p>
+      <div class="relative overflow-hidden rounded-lg border border-border bg-bg-elevated p-8 transition-all duration-200 ease-out hover:-translate-y-0.5 hover:border-accent/40 hover:shadow-[0_12px_32px_-12px_rgba(240,180,41,0.18)]">
+        <div
+          aria-hidden="true"
+          class="pointer-events-none select-none absolute -top-6 -right-4 font-mono font-bold leading-none tracking-tight text-accent/[0.04] text-[7rem] md:text-[9rem]"
+        >
+          03:00
+        </div>
+        <div class="relative">
+          <div class="flex items-center gap-2.5 mb-5 font-mono text-xs">
+            <span aria-hidden="true" class="relative inline-flex w-1.5 h-1.5">
+              <span class="absolute inset-0 rounded-full bg-accent"></span>
+              <span class="absolute inset-0 rounded-full bg-accent/60 animate-ping [animation-duration:2.4s]"></span>
+            </span>
+            <span class="text-accent tabular-nums tracking-wide">03:00:47.218</span>
+            <span class="text-text-faint">·</span>
+            <span class="text-text-faint uppercase tracking-[0.2em]">ops desk</span>
+          </div>
+          <h3 class="text-xl font-bold text-text mb-4">Built by people who know what 3 AM looks like.</h3>
+          <p class="text-text-muted leading-relaxed mb-4">
+            We spent years building integration monitoring for banks, insurers, and logistics operators — the kind of shops where a stuck exchange at 3 AM means someone's phone is ringing. We know what integration teams actually need then, and what they never use.
+          </p>
+          <p class="text-text-muted leading-relaxed">
+            Cameleer is what we would build today, purpose-built for Apache Camel. No legacy, no retrofit, no assumptions about a generic middleware platform.
+          </p>
+        </div>
       </div>
     </div>
   </div>