feat(site): theming-morph showcase hero on /products/webshops

The 'render once, serve cheap pixels' showcase, live. A 7s reel of the same
platform themed as five real demo brands (artisan -> merch -> crypto -> yoga
-> coaching), inside a decorative browser frame, at the top of the webshops
page.

- ShowcaseVideo: poster-first, preload='none' (no download until played),
  plays only while in the viewport (IntersectionObserver), pauses offscreen,
  and prefers-reduced-motion -> poster only (video never loads). muted +
  playsInline for mobile autoplay-on-view.
- BrowserFrame: static decorative chrome so the reel reads as a real shop.
- 16:9 assets ~330-355KB (webm/mp4) + 50KB poster, all within the motion budget.

apps/web/src/app/products/webshops/page.tsx

@@ -1,6 +1,8 @@
 import { Header } from "@/components/layout/header";
 import { MobileNav } from "@/components/layout/mobile-nav";
 import { DemosGallery } from "@/components/products/demos-gallery";
+import { ShowcaseVideo } from "@/components/showcase/showcase-video";
+import { BrowserFrame } from "@/components/showcase/browser-frame";
 import { Card } from "@repo/ui/components/card";
 import { Button } from "@repo/ui/components/button";
 import { JsonLd, breadcrumbLd, faqLd } from "@/components/seo/json-ld";
@@ -110,6 +112,22 @@ export default function WebshopsPage() {
           maintain it on revenue share, so we only win when you make sales.
         </p>
 
+        {/* Theming morph: the same platform themed as five real demo brands. */}
+        <figure className="mb-16">
+          <BrowserFrame url="your-brand.com">
+            <ShowcaseVideo
+              webm="/showcase/theming-morph.webm"
+              mp4="/showcase/theming-morph.mp4"
+              poster="/showcase/theming-morph-poster.jpg"
+              label="The same commerce platform themed as five distinct brands, dissolving one into the next: an artisan shop, a merch store, a crypto shop, a yoga studio, and a coaching site."
+              className="block aspect-video w-full"
+            />
+          </BrowserFrame>
+          <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+            One platform, five real storefronts. Every shop here runs the same engine.
+          </figcaption>
+        </figure>
+
         {/* Theming spotlight, the headline story */}
         <section aria-labelledby="theming-heading" className="section-container border-l-4 border-emerald-500 mb-16">
           <h2 id="theming-heading" className="text-2xl md:text-3xl font-bold mb-4">