feat: replace UI mockups with real netOrk screenshots

The homepage showed seven hand-built JSX imitations of the netOrk UI. They
are gone; every image is now a screenshot of netOrk v0.28.0 itself, taken
from an anonymized copy of a production database (scripts/demo) with
scripts/screenshots/capture.py and published as WebP (~630 KB for all eight).

- Hero: the device inventory. Walkthrough: device detail, VLANs, the Security
  tab, the vulnerability triage queue (replacing the config-diff row), the
  dashboard and service checks (new row 6). NIS2: the audit log, filtered to
  what people did.
- Copy follows the images: row 3 describes the security assessment, row 4 the
  triage queue; row 2 no longer claims corrections are always automatic;
  18 widgets. Alt texts in both languages.
- Also fixed on the homepage: the NIS2 teaser for Art. 21 (2e) and the
  container list of a deployment (three worker pools, plus Flower, registry,
  APT cache and the Signal gateway).
- Demo tooling hardened on the real dump: secrets inside JSON (Wi-Fi keys),
  reverse DNS zones, glued identifiers, tens of thousands of CrowdSec
  addresses, a schema newer than the release (anonymize, then downgrade),
  MFA-enforcing roles, and click steps for view filters.
- DESIGN.md: real screenshots only. PAGES.md: the six rows as they are.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/DESIGN.md

@@ -195,10 +195,16 @@ against the dark background:
 
 ```tsx
 <div className="rounded-xl border border-slate-700 overflow-hidden shadow-2xl">
-  <img src="/screenshots/device-list.png" alt="Device inventory" className="w-full" />
+  <img src="/screenshots/devices.webp" alt="Device inventory" className="w-full" />
 </div>
 ```
 
+**Only real screenshots of the running application.** No JSX mockups or
+drawn imitations of the UI. They come from an anonymized demo copy of a real
+installation and are taken with `scripts/screenshots/capture.py` (see
+`scripts/demo/README.md`), published as WebP in `public/screenshots/`.
+`Screenshot` in `src/pages/Home.tsx` is the frame.
+
 Optionally add a browser chrome header above the image:
 
 ```tsx
@@ -206,7 +212,7 @@ Optionally add a browser chrome header above the image:
   <span className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
   <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
   <span className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
-  <span className="ml-4 text-xs text-slate-500 font-mono">netork.local</span>
+  <span className="ml-4 text-xs text-slate-500 font-mono">netork / devices</span>
 </div>
 ```