Fix tunnel animation icon and add missing localizations

Replace non-existent "tunnel.circle" SF Symbol with "circle.dashed" for
the tunnel vote animation. Add missing translations for haptic feedback
strings and "Close" across all 6 languages.

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

landing_page/index.html

@@ -440,6 +440,63 @@
     .bento-item--watch { background: transparent; padding: 0; }
     .bento-item--watch .watch { width: 100%; }
 
+    /* ────────────────────────────────────
+       SUPPORT
+    ──────────────────────────────────── */
+    .support { text-align: center; }
+    .support h2 {
+      font-size: clamp(1.45rem, 2.8vw, 2.1rem);
+      margin-bottom: 18px;
+    }
+    .support-sub {
+      color: var(--text-muted);
+      max-width: 480px;
+      margin: 0 auto 52px;
+      font-size: clamp(0.88rem, 1vw, 0.98rem);
+      line-height: 1.7;
+    }
+    .support-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      max-width: 700px;
+      margin: 0 auto 56px;
+      text-align: left;
+    }
+    .support-card {
+      background: var(--bg-alt);
+      border-radius: 20px;
+      padding: 28px 28px 24px;
+    }
+    .support-card h3 {
+      font-family: var(--sans);
+      font-weight: 600;
+      font-size: 0.92rem;
+      margin-bottom: 8px;
+      color: var(--text);
+    }
+    .support-card p {
+      color: var(--text-muted);
+      font-size: 0.86rem;
+      line-height: 1.7;
+    }
+    .support-contact {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 36px;
+      background: var(--bg-alt);
+      border-radius: 100px;
+      font-size: 0.88rem;
+      font-weight: 500;
+      color: var(--accent);
+      transition: background 0.3s ease;
+    }
+    .support-contact:hover { background: #ddd8cf; }
+    @media (max-width: 600px) {
+      .support-grid { grid-template-columns: 1fr; max-width: 400px; }
+    }
+
     /* ────────────────────────────────────
        CTA
     ──────────────────────────────────── */
@@ -565,7 +622,10 @@
   <nav class="nav" role="navigation" aria-label="Main">
     <div class="container">
       <a href="#" class="nav-logo">reflect</a>
-      <a href="https://example.com/reflect-download" class="btn">download</a>
+      <div style="display:flex;align-items:center;gap:28px;">
+        <a href="#support" style="font-size:0.88rem;font-weight:500;color:var(--text-muted);transition:color 0.3s;">support</a>
+        <a href="https://example.com/reflect-download" class="btn">download</a>
+      </div>
     </div>
   </nav>
 
@@ -695,6 +755,39 @@
     </div>
   </section>
 
+  <!-- ═══════════════════════════════════
+       SUPPORT
+  ════════════════════════════════════ -->
+  <section id="support" class="support" aria-label="Support">
+    <div class="container">
+      <span class="label reveal">support</span>
+      <h2 class="reveal d1">we're here to help</h2>
+      <p class="support-sub reveal d1">Have a question or need assistance? Check the common topics below, or reach out directly.</p>
+      <div class="support-grid">
+        <div class="support-card reveal d1">
+          <h3>Getting Started</h3>
+          <p>Download reflect from the App Store, open the app, and tap to log your first mood. It only takes a second.</p>
+        </div>
+        <div class="support-card reveal d1">
+          <h3>Syncing Across Devices</h3>
+          <p>reflect syncs via iCloud. Make sure you're signed in to the same Apple Account on all your devices.</p>
+        </div>
+        <div class="support-card reveal d2">
+          <h3>Subscriptions & Billing</h3>
+          <p>Manage your subscription in Settings &gt; Apple Account &gt; Subscriptions on your iPhone. Changes take effect at the next billing cycle.</p>
+        </div>
+        <div class="support-card reveal d2">
+          <h3>Privacy & Data</h3>
+          <p>Your mood data stays on your devices and in your personal iCloud. We never see or sell your data. <a href="privacy.html" style="color: var(--accent); text-decoration: underline;">Read our privacy policy.</a></p>
+        </div>
+      </div>
+      <a href="mailto:support@88oakapps.com" class="support-contact reveal d3">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+        support@88oakapps.com
+      </a>
+    </div>
+  </section>
+
   <!-- ═══════════════════════════════════
        CTA
   ════════════════════════════════════ -->
@@ -709,7 +802,8 @@
   <footer>
     <div class="container">
       <div class="f-logo">reflect</div>
-      <p>&copy; 2026 reflect. all rights reserved.</p>
+      <p style="margin-bottom:8px;">&copy; 2026 reflect. all rights reserved.</p>
+      <p><a href="#support" style="color:var(--text-muted);text-decoration:underline;margin-right:16px;">support</a><a href="privacy.html" style="color:var(--text-muted);text-decoration:underline;margin-right:16px;">privacy</a><a href="eula.html" style="color:var(--text-muted);text-decoration:underline;">terms</a></p>
     </div>
   </footer>