Add screenshots gallery to the OVERWATCH showcase page

New "Screens" section (3-up phone gallery: threat ring, source
drill-down, settings) with captions, plus a nav anchor and .shots CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173RhsXkdMViDR8DMNAG3ms

docs/index.html

@@ -41,6 +41,7 @@
       <a href="#detect">How it works</a>
       <a href="#sources">Sources</a>
       <a href="#tiers">Tiers</a>
+      <a href="#screens">Screens</a>
       <a href="#download">Download</a>
       <a class="nav-github" href="https://github.com/KaraZajac/OVERWATCH" aria-label="GitHub">
         <svg height="18" viewBox="0 0 16 16" width="18" fill="currentColor" aria-hidden="true">
@@ -293,6 +294,37 @@
   </div>
 </section>
 
+<!-- ──────────────── SCREENSHOTS ──────────────── -->
+<section id="screens" class="section reveal">
+  <div class="container">
+    <div class="section-head">
+      <span class="section-tag">screenshots</span>
+      <h2>The whole app, top to bottom.</h2>
+      <p class="lead">No account, no onboarding, no cloud dashboard to
+      configure — open it, hit START, and drill into any source. Three taps
+      deep is as complex as it gets.</p>
+    </div>
+
+    <div class="shots">
+      <figure class="shot">
+        <img class="phone" src="img/overwatch-main.png" width="1096" height="2560"
+          alt="OVERWATCH main screen: a live map inside a green all-clear threat ring, centered on you with a crosshair, and a STOP button." loading="lazy">
+        <figcaption><strong>The threat ring</strong>A live map centered on you, wrapped in the current tier's color. Green reads &ldquo;all clear&rdquo; at a glance.</figcaption>
+      </figure>
+      <figure class="shot">
+        <img class="phone" src="img/overwatch-sources.png" width="856" height="2000"
+          alt="Detection-sources drill-down: BLE, WiFi, DeFlock, Citizen, Waze and Commercial rows, each with a color tier dot and the observations that fired it." loading="lazy">
+        <figcaption><strong>Source drill-down</strong>Tap the ring for every source, its live tier, and the exact observation that fired it.</figcaption>
+      </figure>
+      <figure class="shot">
+        <img class="phone" src="img/overwatch-settings.png" width="856" height="2000"
+          alt="Settings screen: per-source toggles, proximity distance sliders, and the encrypted Waze proxy token field." loading="lazy">
+        <figcaption><strong>Settings</strong>Toggle each source, tune proximity distances, and paste an encrypted Waze proxy token.</figcaption>
+      </figure>
+    </div>
+  </div>
+</section>
+
 <!-- ──────────────── CAPABILITIES ──────────────── -->
 <section class="section section-bento reveal">
   <div class="container">