feat(design): click-to-enlarge on product screenshots

Lightbox.astro — reusable native HTMLDialogElement wrapper:
- Trigger: <button> wrapping the <img>, cursor: zoom-in, amber zoom-pill
  badge fades in on hover/focus.
- Dialog: showModal() opens a full-viewport modal (≤1800x1200 cap) with
  blurred amber-tinted backdrop.
- Close paths: native form[method=dialog] submit (Escape + close button),
  click on backdrop, click on the image itself.
- Accessibility: aria-labelledby + visually-hidden heading avoids both
  aria-label-misuse and no-redundant-role validator conflicts. Focus
  returns to trigger on close (native HTMLDialogElement behavior).
- Motion: 220ms fade+scale open, disabled under prefers-reduced-motion.
- CSP: <script> is Astro-bundled to an external file — script-src 'self'
  respected.

Hero and ProductShowcase now use <Lightbox> instead of a raw <img> for
the product screenshots. The existing frame styling (border, glow, ring
overlay) is untouched — the lightbox trigger is a block-level button
that fills the frame.

src/components/sections/Hero.astro

@@ -1,6 +1,7 @@
 ---
 import CTAButtons from '../CTAButtons.astro';
 import TopographicBg from '../TopographicBg.astro';
+import Lightbox from '../Lightbox.astro';
 ---
 <section class="relative overflow-hidden border-b border-border">
   <TopographicBg opacity={0.22} lines={11} />
@@ -37,14 +38,12 @@ import TopographicBg from '../TopographicBg.astro';
       </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
+          <Lightbox
             src="/product/exchange-detail.png"
             alt="Cameleer Mission Control — route execution detail with processor-level trace"
-            width="1920"
-            height="945"
+            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>

src/components/sections/ProductShowcase.astro

@@ -1,5 +1,6 @@
 ---
 import TopographicBg from '../TopographicBg.astro';
+import Lightbox from '../Lightbox.astro';
 
 interface Callout {
   title: string;
@@ -37,14 +38,12 @@ const callouts: Callout[] = [
     <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
+          <Lightbox
             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"
+            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>