Add Spanish and Arabic versions with a language switch

- English stays at /, Spanish at /es/ and Arabic at /ar/ (right to left)
- EN · ES · AR switch in the header and mobile menu
- Pages are written in English; the build translates them through
  src/i18n/es.json and src/i18n/ar.json, including browser-script strings
- rtl.css mirrors the layout and loads Arabic fonts on /ar/ pages
- hreflang alternates on every page and a multilingual sitemap
- scripts/i18n-extract.mjs lists strings that still need translating

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

static/assets/styles.css

@@ -889,6 +889,12 @@ h1, h2, h3, h4 { font-weight: 600; }
 .dropdown { background: var(--nav-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--bd); }
 :root[data-theme="dark"] .dropdown { background: rgba(10, 14, 26, .96); }
 .theme-btn, .menu-btn { border-radius: 10px; border-color: var(--bd); background: var(--glass); }
+.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--bd); border-radius: 10px; background: var(--glass); flex: none; }
+.lang-switch a, .lang-switch span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 7px; font: 600 11.5px/1 var(--font-sans); letter-spacing: 0.08em; color: var(--slate); transition: color .15s ease, background-color .15s ease; }
+.lang-switch a:hover { color: var(--ink); }
+.lang-switch [aria-current] { color: var(--ink); background: rgba(26, 127, 255, .22); }
+.mobile-menu .lang-switch { display: flex; width: max-content; margin-top: 20px; }
+.mobile-menu .lang-switch a { padding: 0 6px; font-size: 12.5px; border-bottom: 0; }
 
 /* Real logo on dark, vector recreation on light */
 .logo-img { display: none; height: 30px; width: auto; }
@@ -950,6 +956,7 @@ h1, h2, h3, h4 { font-weight: 600; }
   .brand-word { font-size: 12px; }
   .logo-mark { width: 38px; }
   .nav-cta { gap: 6px; }
+  .nav-cta .lang-switch { display: none; }
   .hero { padding-top: 56px; }
   .page-hero { padding-block: 48px 56px; }
   .cluster { grid-template-columns: 1fr; margin-top: 48px; }