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">

docs/style.css

@@ -1089,3 +1089,35 @@ pre.code .prompt { color: var(--accent-hot); user-select: none; }
 /* radar logo mark in nav/footer (replaces the ◉ glyph) */
 .nav-logo { display: inline-block; vertical-align: middle; border-radius: 7px; }
 .nav-brand .nav-logo { margin-right: 3px; }
+
+/* ============================================================
+   SCREENSHOTS GALLERY
+   ============================================================ */
+.shots {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2.6rem;
+  margin-top: 2.8rem;
+  align-items: start;
+}
+.shots .shot { margin: 0; display: flex; flex-direction: column; align-items: center; }
+.shots .phone { width: 260px; max-width: 100%; }
+.shots figcaption {
+  margin-top: 1.4rem;
+  max-width: 260px;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  line-height: 1.55;
+  text-align: center;
+}
+.shots figcaption strong {
+  display: block;
+  color: var(--text);
+  font-family: var(--display);
+  font-size: 1rem;
+  margin-bottom: 0.3rem;
+}
+@media (max-width: 820px) {
+  .shots { grid-template-columns: 1fr; gap: 3rem; }
+  .shots .phone { width: 256px; }
+}