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/styles/legal.css

@@ -101,6 +101,16 @@
     .nav-links.open {
         display: flex;
     }
+    /* The dropdown panel is dark-green by default; in the light theme that
+       hard-coded colour clashed with the pale navbar and washed out the link
+       text. Match the panel and its links to the active theme instead. */
+    .nav-links a {
+        color: var(--text);
+    }
+    html.theme-light .nav-links {
+        background: oklch(0.95 0.01 100 / 0.97);
+        border-bottom-color: oklch(0.20 0.025 140 / 0.10);
+    }
     .nav-right {
         margin-left: auto;
     }
@@ -144,12 +154,8 @@
 
 @media (min-width: 769px) and (max-height: 920px) {
     .hero {
-        padding-top: clamp(7.5rem, 10vh, 9rem);
-        padding-bottom: clamp(1.5rem, 3vh, 2.75rem);
-    }
-
-    .hero-grid {
-        min-height: calc(100svh - 9.5rem);
+        padding-top: clamp(6.5rem, 9vh, 8rem);
+        padding-bottom: clamp(2rem, 4vh, 3.5rem);
     }
 }