Hero bg swaps to best server's city image on ping complete

- Maps each server to a city image (holland, brazil, india, england,
  boston/sydney from Wikimedia Commons CC-BY-SA)
- CSS var --hero-bg controls ::after background, falls back to Amsterdam
- 0.8s ease-out transition when the image swaps
- Uses local webp for Odoo-sourced images, JPG for Wikimedia imports

style.css

@@ -112,9 +112,10 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
   content: '';
   position: absolute;
   inset: 0;
-  background: url('images/city-amsterdam.jpg') center/cover no-repeat;
+  background: var(--hero-bg, url('images/city-amsterdam.jpg')) center/cover no-repeat;
   opacity: 0.12;
   z-index: 0;
+  transition: background-image 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }
 .hero .container { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; }
 .hero-kicker {