feat(ui): optimize landing page and showcase for mobile (hamburger nav, 2-col grid, compact lightbox)

app/templates/index.html

@@ -3,6 +3,7 @@
 {% block nav %}
 <nav class="navbar">
     <a href="/" class="nav-brand">{{ 'brand'|t(lang) }}</a>
+    <button class="nav-hamburger" onclick="this.nextElementSibling.classList.toggle('open')">☰</button>
     <div class="nav-links">
         <div class="lang-switcher" id="langSwitcher">
             <button type="button" class="lang-globe" onclick="document.getElementById('langDropdown').classList.toggle('show')">🌐</button>
@@ -12,15 +13,15 @@
                 {% endfor %}
             </div>
         </div>
-        <a href="/login" class="btn btn-sm" style="margin-left:.5rem">{{ 'index.go_login'|t(lang) }}</a>
+        <a href="/login" class="btn btn-sm">{{ 'index.go_login'|t(lang) }}</a>
         <a href="/register" class="btn btn-primary btn-sm">{{ 'index.go_register'|t(lang) }}</a>
     </div>
 </nav>
 {% endblock %}
 {% block content %}
-<div class="section-header">
-    <h1>📮 {{ 'index.title'|t(lang) }}</h1>
-    <p style="color:var(--text-muted);margin-top:.25rem">{{ 'index.subtitle'|t(lang) }}</p>
+<div class="section-header" style="text-align:center">
+    <h1 style="font-size:1.3rem">📮 {{ 'index.title'|t(lang) }}</h1>
+    <p style="color:var(--text-muted);font-size:.85rem;margin-top:.15rem">{{ 'index.subtitle'|t(lang) }}</p>
 </div>
 
 {% set visible = [] %}