fix: desktop homepage responsive polish and nav tweaks

- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
  so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
  Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
  DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
  across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
  the end instead of always showing both.

All changes are md/lg/xl-scoped; mobile layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/RecommendedCard.tsx

@@ -28,7 +28,7 @@ const CARD_HOVER_SPRING = {
 } as const;
 
 const CARD_CAROUSEL_SIZE_CLASS =
-  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:w-[273px]";
 
 const CARD_GRID_SIZE_CLASS = "w-full max-w-[360px] md:max-w-none";