style(website): landing motion, interaction & layout polish

Feedback round (calmer, less "template/AI"):
- Dial back animated background motion globally (sway/leaf-drift halved,
  fewer falling leaves, gentler godrays/fireflies/light-sweep).
- Fire leaf confetti on click of real controls only (was pointerdown
  everywhere, which showered mobile users on every scroll).
- Remove hover lift/scale from non-interactive cards, screenshots and
  mascots so they no longer read as clickable.
- Fix mobile nav menu colours in the light theme (was a hard-coded dark
  panel with low-contrast links).
- Calm how-it-works steps 1-2 (no button pulse/shine/cursor bob); step 3
  keeps its lively sync animation. Remove the now-static "copied" toast
  from step 1 since it only made sense mid-animation.

UX audit follow-ups:
- Unify vertical rhythm with one section-padding scale; vertically centre
  the hero so space is balanced instead of pooling under the CTAs.
- Split the mixed "Why KoalaSync?" grid into use-case scenarios and a
  labelled "Features" subsection, and move the #features nav anchor there.
- Demote the hero GitHub CTA to a quiet text link (Chrome > Firefox >
  GitHub hierarchy); scale down oversized section mascots and give them a
  shared soft shadow.

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

website/template.html

@@ -960,8 +960,13 @@
                     </h3>
                     <p>{{USE_CASE_3_DESC}}</p>
                 </div>
+            </div>
+            <h3 id="features" class="section-subheading" data-reveal>
+                <span>{{NAV_FEATURES}}</span>
+            </h3>
+            <div class="use-cases-grid use-cases-feature-grid">
                 <!-- Tile 1: Instant Invites / 1-Click Join -->
-                <div id="features" class="feature-card feature-card-compact" data-reveal>
+                <div class="feature-card feature-card-compact" data-reveal>
                     <h3>
                         <span class="feature-icon-svg">
                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="bento-icon"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
@@ -1166,11 +1171,6 @@
                                     <span class="details-arrow">▶</span>
                                     <span>{{STEP_2_ILLUS_MANUAL}}</span>
                                 </div>
-                                
-                                <div class="illus-floating-success">
-                                    <span class="success-icon"><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"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span>
-                                    <span>{{STEP_2_ILLUS_COPIED}}</span>
-                                </div>
                             </div>
                         </div>
                     </div>
@@ -1510,7 +1510,7 @@
         </div>
     </section>
 
-    <section style="text-align: center; padding: 6rem 0 2rem 0;">
+    <section style="text-align: center; padding: clamp(3.5rem, 6.5vh, 5rem) 0 2rem 0;">
         <div class="container">
             <h2 data-reveal style="font-size: 2.2rem; margin-bottom: 1rem;">
                 <span>{{BOTTOM_TITLE}}</span>