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/landing-sections.css

@@ -1,6 +1,6 @@
 /* --- Use Cases / Anwendungsszenarien Section --- */
 .use-cases-section {
-    padding: 6rem 0;
+    padding: clamp(3.5rem, 6.5vh, 5rem) 0;
     position: relative;
     border-bottom: 0;
 }
@@ -12,6 +12,18 @@
     margin-top: 1rem;
 }
 
+/* Sub-heading that separates the use-case scenarios from the feature tiles so
+   the two card types read as intentional groups (and gives the "Features" nav
+   link a real target). */
+.section-subheading {
+    text-align: center;
+    font-size: 1.55rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    margin: 3.25rem 0 1.5rem;
+    scroll-margin-top: 96px;
+}
+
 .use-cases-feature-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -63,13 +75,9 @@
 .use-case-card:nth-child(3) { --card-accent-border: oklch(0.75 0.10 150); }
 
 
-.use-case-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
-    border-color: rgba(255, 255, 255, 0.15);
-}
-
-.use-case-card:hover::before {
+/* Use-case cards are static content, not links — no hover lift so they don't
+   read as clickable. The top accent bar (::before) stays visible instead. */
+.use-case-card::before {
     opacity: 1;
 }
 
@@ -91,30 +99,30 @@
     margin: 1.5rem auto;
 }
 
+/* Shared framing so the section mascots read as one set even though the
+   underlying illustrations differ slightly in style (a consistent, soft ground
+   shadow — true art-direction alignment needs the assets themselves redrawn). */
+.compat-mascot,
+.features-questions-mascot,
+.comparison-mascot,
+.selfhost-mascot {
+    filter: drop-shadow(0 6px 14px oklch(0.15 0.02 145 / 0.22));
+}
+
 .features-questions-mascot {
     display: block;
     width: 100%;
-    max-width: 250px;
+    max-width: 185px;
     height: auto;
-    margin: -1.5rem auto 0.2rem auto;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.features-questions-mascot:hover {
-    transform: scale(1.05) translateY(-4px) rotate(-1.5deg);
+    margin: -1rem auto 0.4rem auto;
 }
 
 .comparison-mascot {
     display: block;
     width: 100%;
-    max-width: 260px;
+    max-width: 195px;
     height: auto;
-    margin: -2.2rem auto 0.2rem auto;
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.comparison-mascot:hover {
-    transform: scale(1.05) translateY(-4px) rotate(1deg);
+    margin: -1.4rem auto 0.4rem auto;
 }
 
 .use-case-icon {
@@ -141,7 +149,7 @@
 
 /* --- Comparison Section --- */
 .comparison-section {
-    padding: 6rem 0;
+    padding: clamp(3.5rem, 6.5vh, 5rem) 0;
     background: transparent;
     border-bottom: 0;
 }