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/hero.css

@@ -1,10 +1,13 @@
 /* --- Hero Section --- */
 .hero {
-    min-height: 100vh;
+    min-height: 100svh;
     display: flex;
-    align-items: flex-start;
-    padding-top: clamp(8rem, 12vh, 10rem);
-    padding-bottom: clamp(2rem, 5vh, 4rem);
+    /* Centre the hero content vertically so the empty space is balanced above
+       and below instead of pooling under the CTAs. Padding-top only needs to
+       clear the fixed nav. */
+    align-items: center;
+    padding-top: clamp(6rem, 9vh, 8rem);
+    padding-bottom: clamp(3rem, 6vh, 5rem);
 }
 
 .hero-grid {
@@ -20,7 +23,6 @@
     gap: 3rem;
     text-align: left;
     width: 100%;
-    min-height: calc(100svh - 12.5rem);
 }
 
 @media (min-width: 1024px) {
@@ -333,6 +335,25 @@ html.theme-light .koala-speech-bubble::after {
 .btn-install.is-detected .btn-label-short { display: none; }
 .btn-install.is-detected .btn-label-full { display: inline; }
 
+/* GitHub is the tertiary hero action. Strip the button chrome so it reads as a
+   quiet link beside the two install CTAs, keeping a clear primary → secondary →
+   tertiary hierarchy (Chrome filled → Firefox outline → GitHub text). The
+   theme-light selector matches the specificity of the light-theme .btn-secondary
+   override in foundation.css so the transparent treatment wins in both themes. */
+.hero-github-cta.btn-secondary,
+html.theme-light .hero-github-cta.btn-secondary {
+    background: transparent;
+    border-color: transparent;
+    color: var(--text-muted);
+}
+
+.hero-github-cta.btn-secondary:hover,
+html.theme-light .hero-github-cta.btn-secondary:hover {
+    background: transparent;
+    color: var(--text);
+    transform: none;
+}
+
 .version-badge {
     display: inline-block;
     background: oklch(0.68 0.13 150 / 0.1);