feat(web): hero row at top of Home (For You + most recently added)

#6 — Adds a 2-up grid above the Playlists carousel:
- Today's pick: For-You playlist card with a Play button that
  invokes the system-shuffle endpoint (same path as PlaylistCard
  uses for the play overlay).
- Just added: most recently added album card with a Play button
  that fetches the album detail and queues the tracks.

Both cards share HomeHeroCard.svelte — cover left, eyebrow + title
+ subtitle + Play right, on a from-accent/15 → surface gradient so
the eye lands here before scrolling into the carousels. Each card
links to its detail page; the Play button is event-stopped so it
plays in-place. md:grid-cols-2 stacks on narrow viewports.

Only renders when at least one of the two pieces of data is
available so the page degrades cleanly on fresh installs.

web/src/routes/+page.svelte

@@ -3,6 +3,13 @@
   import { createHomeQuery } from '$lib/api/home';
   import HorizontalScrollRow from '$lib/components/HorizontalScrollRow.svelte';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import HomeHeroCard from '$lib/components/HomeHeroCard.svelte';
+  import { systemShuffle, getPlaylist } from '$lib/api/playlists';
+  import { playlistTrackToRef } from '$lib/playlists/playlistTrackToRef';
+  import { playQueue } from '$lib/player/store.svelte';
+  import { api } from '$lib/api/client';
+  import { coverUrl as albumCoverUrl } from '$lib/media/covers';
+  import type { AlbumDetail, TrackRef as TrackRefType } from '$lib/api/types';
   import ArtistCard from '$lib/components/ArtistCard.svelte';
   import CompactTrackCard from '$lib/components/CompactTrackCard.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
@@ -75,6 +82,46 @@
 
   const userPlaylists = $derived(userPlaylistsQ.data?.owned ?? []);
 
+  // Hero row: For-You + most-recently-added album. Anchors the page
+  // so the eye lands on these instead of cascading down a wall of
+  // identical tiles.
+  const latestAlbum = $derived(data?.recently_added_albums?.[0] ?? null);
+
+  function albumCoverFor(albumId: string | undefined | null): string {
+    return albumId ? albumCoverUrl(albumId) : '';
+  }
+
+  let heroStarting = $state(false);
+
+  async function playForYou(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (heroStarting || !forYouPlaylist?.system_variant) return;
+    heroStarting = true;
+    try {
+      const detail = await systemShuffle(forYouPlaylist.system_variant);
+      const refs = detail.tracks
+        .map((r) => playlistTrackToRef(r))
+        .filter((t): t is TrackRefType => t !== null);
+      if (refs.length > 0) playQueue(refs, 0, { source: forYouPlaylist.system_variant });
+    } finally {
+      heroStarting = false;
+    }
+  }
+
+  async function playLatestAlbum(e: MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (heroStarting || !latestAlbum) return;
+    heroStarting = true;
+    try {
+      const detail = await api.get<AlbumDetail>(`/api/albums/${latestAlbum.id}`);
+      if (detail.tracks.length > 0) playQueue(detail.tracks, 0);
+    } finally {
+      heroStarting = false;
+    }
+  }
+
   type PlaceholderVariant = 'building' | 'failed' | 'pending' | 'seed-needed';
   function placeholderVariant(slot: 'for-you' | 'discover' | 'songs-like'): PlaceholderVariant {
     const s = systemStatusQ.data;
@@ -134,6 +181,40 @@
 <svelte:head><title>{pageTitle('Home')}</title></svelte:head>
 
 <div class="space-y-8">
+  <!-- Hero anchors: For-You + most recently added album. Larger
+       cards on a tinted gradient so the page has a clear "land
+       here" point instead of opening on a wall of tiles. Only
+       rendered when both pieces of data exist; the page falls back
+       to the carousels cleanly when either is missing. -->
+  {#if forYouPlaylist || latestAlbum}
+    <section class="grid gap-4 md:grid-cols-2" aria-label="Featured">
+      {#if forYouPlaylist}
+        <HomeHeroCard
+          href={`/playlists/${forYouPlaylist.id}`}
+          coverUrl={forYouPlaylist.cover_url ?? ''}
+          eyebrow="Today's pick"
+          title={forYouPlaylist.name}
+          subtitle={forYouPlaylist.track_count > 0
+            ? `${forYouPlaylist.track_count} tracks for you`
+            : 'Building your mix'}
+          onPlay={playForYou}
+          playDisabled={heroStarting || forYouPlaylist.track_count === 0}
+        />
+      {/if}
+      {#if latestAlbum}
+        <HomeHeroCard
+          href={`/albums/${latestAlbum.id}`}
+          coverUrl={albumCoverFor(latestAlbum.id)}
+          eyebrow="Just added"
+          title={latestAlbum.title}
+          subtitle={latestAlbum.artist_name}
+          onPlay={playLatestAlbum}
+          playDisabled={heroStarting}
+        />
+      {/if}
+    </section>
+  {/if}
+
   <!-- Playlists: For-You + Songs-like + user playlists, single horizontal row -->
   <section class="space-y-3">
     <HorizontalScrollRow