Dynamic server count on home page

WHAT WAS DONE:
- '13+ Active Servers' now pulls from servers API
- Fallback to '7+' if API fails

Signed-off-by: Claude (Chronicler #60) <claude@firefrostgaming.com>

index.njk

@@ -184,7 +184,7 @@ description: Fire + Frost + Foundation = Where Love Builds Legacy
   
   <div style="display: flex; justify-content: space-around; margin-bottom: 70px; flex-wrap: wrap; gap: 50px;">
     <div style="text-align: center;">
-      <div style="font-size: 4.5rem; font-weight: 700; color: #4ecdc4; margin-bottom: 10px;">13+</div>
+      <div id="home-server-count" style="font-size: 4.5rem; font-weight: 700; color: #4ecdc4; margin-bottom: 10px;">...</div>
       <div style="color: #a8dadc;">Active Servers</div>
     </div>
     <div style="text-align: center;">
@@ -229,3 +229,18 @@ description: Fire + Frost + Foundation = Where Love Builds Legacy
     <p style="margin-top: 30px; color: #a8dadc;">Or browse our <a href="/servers" style="color: #4ecdc4; text-decoration: underline; font-weight: 600;">server list</a> first</p>
   </div>
 </div>
+
+<script>
+document.addEventListener("DOMContentLoaded", () => {
+  fetch('https://servers-api.michael-b25.workers.dev')
+    .then(res => res.json())
+    .then(data => {
+      if (data.servers && data.servers.length > 0) {
+        document.getElementById('home-server-count').textContent = data.servers.length;
+      }
+    })
+    .catch(() => {
+      document.getElementById('home-server-count').textContent = '7+';
+    });
+});
+</script>