Use infrastructure screenshot in portfolio hero

css/styles.css

@@ -251,8 +251,9 @@ section { padding: 46px 0; }
 
 .hero-proof img {
   width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: contain;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  object-position: top center;
   background: #10283d;
 }
 

index.html

@@ -70,9 +70,9 @@
           </div>
 
           <figure class="hero-proof">
-            <img src="assets/images/homelab-topology.svg"
-                 alt="ByteGeist Windows Server lab topology with DC01, FILE01, OPNsense, and WIN11-01" />
-            <figcaption>Windows Server lab topology &mdash; real environment, documented and tested.</figcaption>
+            <img src="assets/screenshots/bytegeist-infrastructure-live.png"
+                 alt="ByteGeist Infrastructure Lab control plane showing service monitoring and telemetry" />
+            <figcaption>Live infrastructure visibility from the ByteGeist lab: monitoring, telemetry, and service health.</figcaption>
           </figure>
         </div>
       </div>