Homepage polish: tagline styling, icon spacing, tooltips

- Tagline: smaller font, drop shadow, 3px offset, 3px left padding
- Icons: reduced gap from gap-5 to gap-4
- Channel badge tooltips: descriptive hover text for private/public

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontends/web/templates/base.html

@@ -16,11 +16,11 @@
                 <img src="{{ url_for('static', filename='logo.svg') }}" alt="Stegasoo" height="28">
             </a>
             {% if channel_configured %}
-            <span class="badge bg-success bg-opacity-25 small" style="padding-left: 0.35rem;" title="Private Channel: {{ channel_fingerprint }}">
+            <span class="badge bg-success bg-opacity-25 small" style="padding-left: 0.35rem;" title="Private Channel Key Fingerprint: Messages encoded on this server use this shared channel key for additional encryption. Recipients must have the same channel key to decode.">
                 <i class="bi bi-shield-lock me-2" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #f0c674;">{{ channel_fingerprint }}</code>
             </span>
             {% else %}
-            <span class="badge bg-secondary bg-opacity-25 small text-muted" style="padding-left: 0.35rem;" title="No channel key configured">
+            <span class="badge bg-secondary bg-opacity-25 small text-muted" style="padding-left: 0.35rem;" title="Public Channel: No shared channel key configured. Messages use only passphrase and PIN for encryption.">
                 <i class="bi bi-globe me-1"></i>Public Channel
             </span>
             {% endif %}

frontends/web/templates/index.html

@@ -52,12 +52,12 @@
         </div>
         <div>
             <h1 class="display-5 fw-bold title-gold mb-0">Stegasoo</h1>
-            <p class="text-muted mb-0 small">Hide encrypted data in plain sight.</p>
+            <p class="text-muted mb-0 small" style="margin-top: 3px; padding-left: 3px; font-size: 0.85rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);">Hide encrypted data in plain sight.</p>
         </div>
     </div>
 
     <!-- Action Icons -->
-    <div class="d-flex gap-5">
+    <div class="d-flex gap-4">
         <a href="/encode" class="home-icon"><i class="bi bi-lock-fill"></i><span>Encode</span></a>
         <a href="/decode" class="home-icon"><i class="bi bi-unlock-fill"></i><span>Decode</span></a>
         <a href="/generate" class="home-icon"><i class="bi bi-key-fill"></i><span>Generate</span></a>