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

script.js

@@ -504,6 +504,15 @@ var si = 0,
                 }
               }
 
+              var heroImages = {
+                'meppel.odoo4projects.com': 'images/holland.webp',
+                'boston.odoo4projects.com': 'images/city-boston.jpg',
+                'manchester.odoo4projects.com': 'images/england.webp',
+                'mumbai.odoo4projects.com': 'images/india.webp',
+                'saopaulo.odoo4projects.com': 'images/brazil.webp',
+                'sydney.odoo4projects.com': 'images/city-sydney.jpg'
+              };
+
               function markBest() {
                 var valid = results.filter(function(r) { return r.time >= 0; });
                 if (valid.length === 0) return;
@@ -514,6 +523,11 @@ var si = 0,
                     c.el.classList.add('server-best');
                   }
                 });
+                /* Swap hero background to best server's city */
+                var hero = document.querySelector('.hero');
+                if (hero && heroImages[best.host]) {
+                  hero.style.setProperty('--hero-bg', "url('" + heroImages[best.host] + "')");
+                }
                 /* Update banner status */
                 bannerStatus.innerHTML =
                   '<span class="status-dot" style="animation:none;background:#4ade80;opacity:1;transform:scale(1)"></span> Fastest route found';

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 {