Hero: preload city image, left-to-right clip-path reveal, label slide-in

- Preloads the best server's city image via new Image() before showing
- Reveal overlay uses clip-path: inset(0 100% ...) → inset(0) for smooth
  left-to-right slide over the default Amsterdam background
- Label 'Our <City> server fits your location' slides in from right
  simultaneously with backdrop-blur and brass border
- Both animations start and end together via requestAnimationFrame

style.css

@@ -377,11 +377,58 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
   }
 }
 
+.hero-city-reveal {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.12;
+  z-index: 0;
+  clip-path: inset(0 100% 0 0);
+  will-change: clip-path;
+  pointer-events: none;
+}
+.hero-city-reveal.open {
+  clip-path: inset(0 0 0 0);
+}
+.hero-city-label {
+  position: absolute;
+  bottom: 2rem;
+  right: 2rem;
+  background: rgba(13,27,46,0.88);
+  border: 1px solid var(--line-brass);
+  border-radius: var(--radius);
+  padding: 0.7rem 1.25rem;
+  color: rgba(255,255,255,0.8);
+  font-family: Marcellus, Georgia, serif;
+  font-size: 0.9rem;
+  z-index: 2;
+  transform: translateX(150%);
+  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
+  white-space: nowrap;
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+}
+.hero-city-label.visible {
+  transform: translateX(0);
+}
+.hero-city-label strong {
+  color: var(--brass-bright);
+  font-weight: 400;
+}
+
 @media (max-width: 768px) {
   .hero { min-height: auto; padding: 3rem 0 0; }
   .hero-actions { flex-direction: column; }
   .hero-actions .btn { width: 100%; text-align: center; }
   .hero-stats { gap: 0.75rem; }
+  .hero-city-label {
+    bottom: 1rem;
+    right: 1rem;
+    font-size: 0.78rem;
+    padding: 0.5rem 0.9rem;
+  }
 }
 
 /* ---- Trust Bar ---- */