Add screenshots gallery to the VIGIL showcase page

New "Screens" section (3-up phone gallery: active tracker list with
"It's mine" triage, locate-mode searching, and homing at -52 dBm /
ring), plus three optimized app screenshots, 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

@@ -40,6 +40,7 @@
     <div class="nav-links">
       <a href="#detects">What it detects</a>
       <a href="#decides">How it decides</a>
+      <a href="#screens">Screens</a>
       <a href="#clones">Clones</a>
       <a href="#download">Download</a>
       <a class="nav-github" href="https://github.com/KaraZajac/VIGIL" aria-label="GitHub">
@@ -223,6 +224,37 @@
   </div>
 </section>
 
+<!-- ──────────────── SCREENSHOTS ──────────────── -->
+<section id="screens" class="section reveal">
+  <div class="container">
+    <div class="section-head">
+      <span class="section-tag">screenshots</span>
+      <h2>Spot it, then walk it down.</h2>
+      <p class="lead">No account, no map tiles, no cloud — it all runs on the
+      phone. See what's moving with you, wave off your own gear, and when
+      something's left over, home in on it.</p>
+    </div>
+
+    <div class="shots">
+      <figure class="shot">
+        <img class="phone" src="img/vigil-active.png" width="1096" height="2560"
+          alt="VIGIL active list: an ACTIVE (6) list of nearby Apple Find My and Google Find My Device trackers, each showing places seen, signal in dBm, time since last seen, and an It's-mine button." loading="lazy">
+        <figcaption><strong>The active list</strong>Every tracker seen moving with you — signal, places, and how long ago. Tap &ldquo;It's mine&rdquo; and your own gear drops out.</figcaption>
+      </figure>
+      <figure class="shot">
+        <img class="phone" src="img/vigil-locate.png" width="1096" height="2560"
+          alt="VIGIL locate screen for an Apple Find My tracker: a large pulsing radar icon reading Searching… walk around, no signal yet, with a Make-it-ring button." loading="lazy">
+        <figcaption><strong>Locate mode</strong>Pick a suspect and walk — the ripple strengthens as you close in. No signal yet? Keep moving.</figcaption>
+      </figure>
+      <figure class="shot">
+        <img class="phone" src="img/vigil-signal.png" width="1096" height="2560"
+          alt="VIGIL locate screen for a Google Find My Device tracker reading Close, minus 52 dBm, with a Make-it-ring button and a Ringing… listen for the tracker toast." loading="lazy">
+        <figcaption><strong>Getting warmer</strong>Live signal strength as you approach — &minus;52 dBm is close. &ldquo;Make it ring&rdquo; forces a silent tracker to give itself up.</figcaption>
+      </figure>
+    </div>
+  </div>
+</section>
+
 <!-- ──────────────── CLONES ──────────────── -->
 <section id="clones" class="section section-feature reveal">
   <div class="container">

docs/style.css

@@ -1089,3 +1089,35 @@ pre.code .prompt { color: var(--accent-hot); user-select: none; }
 /* VIGIL: logo mark in nav/footer (img instead of a 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; }
+}