feat(design): atmosphere + WhyUs editorial 3-AM treatment

TopographicBg now actually reads:
- Per-line stroke width varies (triangle wave — contour-interval feel)
- Per-line opacity varies by vertical depth (darker mid-section, lighter
  edges)
- One line in four rendered in cyan (echo of cross-route correlation)
- Radial-mask soft edge fade so lines dissolve into the section boundary
- Default opacity bumped from 0.12 to 0.35; section callers still scale it
  down via the opacity prop, but the new internal variation makes the
  atmosphere visible where before it was invisible

WhyUs second tile: 3-AM storytelling moment now lands typographically:
- Decorative 03:00 glyph (amber/4% alpha) in the top-right corner
- Eyebrow log-entry treatment: pulsing amber dot + mono 03:00:47.218
  timestamp + OPS DESK label — reads like a product UI log row
- The rest of the tile unchanged

ProductShowcase figure: figcaption moved to last child (HTML spec
requires figcaption to be first or last in a figure; a div after it was
a validation error).

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>