a11y: hero demo passes WCAG contrast (Lighthouse 4x100 desktop)

- Remove the confusing, space-hungry "Episode Lobby" card from the mockup
- Give the decorative demo mockup a contrast-safe palette: accent shown as
  text uses a lighter indigo, and buttons with white text on a colour get
  darker shades, so every walkthrough state meets WCAG AA
- Drop the scroll-reveal fade from the above-the-fold hero demo; the fade
  briefly rendered its text at partial opacity, which axe caught as failing
  contrast on ~1 in 3 audits
- Mark the demo as decorative for assistive tech (aria-hidden + removed from
  tab order); mouse interaction is unchanged
- Darken the footer support pill so white text meets contrast

Desktop Lighthouse: 100/100/100/100 (stable across runs). Mobile: 100
a11y / best-practices / SEO; performance ~87 (throttled LCP, separate work).

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

website/template.html

@@ -319,7 +319,7 @@
             </div>
 
             <!-- Interactive Live Demo: two synced video tabs + the extension popup -->
-            <div class="hero-mockup-wrapper" data-reveal>
+            <div class="hero-mockup-wrapper">
                 <div class="hero-demo-scene popup-open connected" id="hero-demo">
                     <button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
                         <span class="demo-chip-dot" aria-hidden="true"></span>
@@ -562,23 +562,6 @@
                                 </div>
                             </div>
 
-                            <!-- Episode Auto-Sync Lobby Status Mockup -->
-                            <div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
-                                <div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true" style="display:block; flex-shrink:0;"><path d="M5 22h14"/><path d="M5 2h14"/><path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/><path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/></svg>
-                                    <span style="font-weight: 700; color: #fbbf24; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;">Episode Lobby</span>
-                                </div>
-                                <div style="font-size: 0.7rem; color: white; margin-bottom: 4px; font-weight: 600;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep2">Stranger Things - S4E2</span>
-                                </div>
-                                <div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
-                                    {{MOCK_16}}
-                                </div>
-                                <button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
-                                    {{MOCK_17}}
-                                </button>
-                            </div>
-
                             <label class="mock-section-label" title="Other users currently connected to this room">
                                 {{MOCK_04}}
                             </label>
@@ -1414,7 +1397,7 @@
                 <a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
                 <a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
                 <a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
-                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
+                <a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
                     <span aria-hidden="true">♥</span>
                     <span>{{FOOTER_SUPPORT}}</span>
                 </a>