Server status banner: live ping times, best-server highlight, optimal location badge

- Replaced city placards with a full server status banner
- Grid of 6 server cards (Amsterdam, Boston, Manchester, Mumbai, São Paulo, Sydney)
- JS pings each server via Image() timing, shows ms latency
- Best server highlighted with brass glow, shadow, and 'Best' badge
- 'Your optimal server location: <city> (<ms> ms)' with bounce animation
- Staggered card entrance animation on page load
- Responsive: 6-col -> 3-col -> 2-col grid

index.html

@@ -60,39 +60,19 @@
       </div>
     </section>
 
-    <!-- City Placards -->
-    <div class="city-placards">
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-amsterdam.jpg" alt="Amsterdam" loading="lazy" />
-        <span class="city-name">Amsterdam</span>
-        <span class="city-region">Netherlands</span>
-      </a>
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-boston.jpg" alt="Boston" loading="lazy" />
-        <span class="city-name">Boston</span>
-        <span class="city-region">United States</span>
-      </a>
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-london.jpg" alt="London" loading="lazy" />
-        <span class="city-name">London</span>
-        <span class="city-region">United Kingdom</span>
-      </a>
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-mumbai.jpg" alt="Mumbai" loading="lazy" />
-        <span class="city-name">Mumbai</span>
-        <span class="city-region">India</span>
-      </a>
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-saopaulo.jpg" alt="São Paulo" loading="lazy" />
-        <span class="city-name">S&atilde;o Paulo</span>
-        <span class="city-region">Brazil</span>
-      </a>
-      <a href="#pricing" class="city-placard">
-        <img src="images/city-sydney.jpg" alt="Sydney" loading="lazy" />
-        <span class="city-name">Sydney</span>
-        <span class="city-region">Australia</span>
-      </a>
-    </div>
+    <!-- Server Status Banner -->
+    <section class="server-banner" id="serverBanner">
+      <div class="container">
+        <div class="server-banner-header">
+          <span class="server-banner-kicker">Global Server Network</span>
+          <span class="server-banner-status" id="bannerStatus">
+            <span class="status-dot"></span> Testing all locations...
+          </span>
+        </div>
+        <div class="server-grid" id="serverGrid"></div>
+        <div class="server-optimal" id="serverOptimal"></div>
+      </div>
+    </section>
 
     <!-- Trust Bar -->
     <section class="trust-bar">