feat(website): replace screenshots with fresh 100-device fleet images

Swap 9 old screenshots for 8 new ones showing fleet dashboard, traffic,
firmware management, config templates, device detail, interface
utilization, device health, and traffic analytics. Update carousel
markup with Deep Space card styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

docs/website/index.html

@@ -293,50 +293,69 @@
     <div class="screenshots-scroll">
       <div class="screenshots-track">
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/login.png" alt="The Other Dude zero-knowledge SRP-6a login with Secret Key fields from Emergency Kit" loading="lazy" width="800" height="500">
+          <img src="assets/01-fleet-dashboard.png" alt="Fleet Dashboard showing 49 devices, 100% online with bandwidth charts and event feed" loading="lazy" width="1440" height="900">
-          <figcaption>Zero-Knowledge Login with Secret Key</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Fleet Dashboard</div>
+            <div style="color:#62627F;font-size:13px">Real-time fleet overview with events, bandwidth, and health</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/dashboard-lebowski-lanes.png" alt="Fleet dashboard showing 10 devices across Lebowski Lanes with bandwidth charts and event feed" loading="lazy" width="800" height="500">
+          <img src="assets/02-fleet-traffic.png" alt="Fleet traffic view showing CPU and memory stats with top resource consumers table" loading="lazy" width="1440" height="900">
-          <figcaption>Fleet Dashboard &mdash; Lebowski Lanes</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Fleet Traffic</div>
+            <div style="color:#62627F;font-size:13px">Top resource consumers with CPU and memory stats</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/device-list.png" alt="Device fleet list showing MikroTik models, status, uptime, and firmware versions" loading="lazy" width="800" height="500">
+          <img src="assets/03-firmware-management.png" alt="Firmware management showing version groups and device list" loading="lazy" width="1440" height="900">
-          <figcaption>Device Fleet List</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Firmware Management</div>
+            <div style="color:#62627F;font-size:13px">Version groups, upgrade tracking, and device firmware list</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/device-detail.png" alt="Device detail showing interface traffic charts and WinBox and SSH session buttons" loading="lazy" width="800" height="500">
+          <img src="assets/04-config-templates.png" alt="Configuration templates showing 6 reusable config templates" loading="lazy" width="1440" height="900">
-          <figcaption>Device Detail &mdash; gw-bowling-alley</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Config Templates</div>
+            <div style="color:#62627F;font-size:13px">Reusable configuration templates for fleet-wide deployment</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/device-health.png" alt="Device health metrics showing CPU load, memory usage, disk usage, and temperature charts" loading="lazy" width="800" height="500">
+          <img src="assets/05-device-detail.png" alt="Device detail view for gw-bowling-alley showing interface traffic and session buttons" loading="lazy" width="1440" height="900">
-          <figcaption>Device Health Metrics</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Device Detail</div>
+            <div style="color:#62627F;font-size:13px">Per-device overview with interfaces, sessions, and actions</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/alerts.png" alt="Active alerts showing CPU warnings and device offline criticals with acknowledge and silence controls" loading="lazy" width="800" height="500">
+          <img src="assets/06-interface-utilization.png" alt="Interface utilization showing RX and TX bars per interface" loading="lazy" width="1440" height="900">
-          <figcaption>Active Alerts</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Interface Utilization</div>
+            <div style="color:#62627F;font-size:13px">Per-interface RX/TX bandwidth utilization bars</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/topology.png" alt="Network topology map with automatic device discovery" loading="lazy" width="800" height="500">
+          <img src="assets/07-device-health.png" alt="Device health showing CPU, memory, disk, and temperature charts" loading="lazy" width="1440" height="900">
-          <figcaption>Network Topology Map</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Device Health</div>
+            <div style="color:#62627F;font-size:13px">CPU, memory, disk, and temperature monitoring charts</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
-          <img src="assets/config-editor.png" alt="RouterOS configuration editor with diff preview" loading="lazy" width="800" height="500">
+          <img src="assets/08-traffic-analytics.png" alt="Traffic analytics showing per-interface time series charts" loading="lazy" width="1440" height="900">
-          <figcaption>Configuration Editor</figcaption>
+          <div style="padding:12px 16px">
-        </figure>
+            <div style="color:#E4E4ED;font-weight:600">Traffic Analytics</div>
-
+            <div style="color:#62627F;font-size:13px">Per-interface traffic time series and historical analysis</div>
-        <figure class="screenshot-card">
+          </div>
-          <img src="assets/dashboard-irken-empire.png" alt="Multi-tenant dashboard showing Irken Empire with tenant switcher and device events" loading="lazy" width="800" height="500">
+        </div>
-          <figcaption>Multi-Tenant &mdash; Irken Empire</figcaption>
-        </figure>
 
       </div>
     </div>
@@ -441,7 +460,8 @@
     function openLightbox(img) {
       lbImg.src = img.src;
       lbImg.alt = img.alt;
-      var cap = img.closest('.screenshot-card').querySelector('figcaption');
+      var card = img.closest('.screenshot-card');
+      var cap = card.querySelector('figcaption') || card.querySelector('div > div:first-child');
       lbCap.textContent = cap ? cap.textContent : '';
       lb.classList.add('active');
       lbClose.focus();