feature: Responsive mobile layout for home page

Migrate hero, section-header, and section-split to MudGrid with xs/sm/md breakpoints (Spacing=0 to keep color panels flush); add @media collapse rules for genre/features card grids and the CTA banner. Visual styling unchanged at desktop width.

DeepDrftPublic.Client/Pages/Home.razor

@@ -5,15 +5,15 @@
 <PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
 
 @* Hero - split 50/50 *@
-<section class="hero">
-    <div class="hero-left">
+<MudGrid Spacing="0" Class="hero">
+    <MudItem xs="12" md="6" Class="hero-left">
         <DeepDrftHero />
-    </div>
+    </MudItem>
 
-    <div class="hero-right">
+    <MudItem xs="12" md="6" Class="hero-right">
         <NowPlaying />
-    </div>
-</section>
+    </MudItem>
+</MudGrid>
 
 @* Divider *@
 <div class="section-divider">
@@ -24,15 +24,17 @@
 
 @* Sound section *@
 <section class="section">
-    <div class="section-header">
-        <div>
+    <MudGrid Class="section-header-grid" Style="margin-bottom: 5rem;">
+        <MudItem xs="12" md="4">
             <div class="section-label">Genres &amp; Moods</div>
             <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
-        </div>
-        <p class="section-body">
-            From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
-        </p>
-    </div>
+        </MudItem>
+        <MudItem xs="12" md="8">
+            <p class="section-body">
+                From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely.
+            </p>
+        </MudItem>
+    </MudGrid>
 
     <div class="genre-grid">
         @* TODO Phase 2.2: wire each genre to /genres/{slug} *@
@@ -103,16 +105,16 @@
 </section>
 
 @* Split: origin + connect *@
-<div class="section-split">
-    <div class="split-left">
+<MudGrid Spacing="0" Class="section-split">
+    <MudItem xs="12" md="6" Class="split-left">
         <div class="split-eyebrow">Our Origin</div>
         <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
         <p class="split-body">
             Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
         </p>
-    </div>
+    </MudItem>
 
-    <div class="split-right">
+    <MudItem xs="12" md="6" Class="split-right">
         <div class="connect-label">Stay Connected</div>
         <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
         <div class="connect-options">
@@ -138,8 +140,8 @@
         </div>
         @* TODO: subscription form lives behind this CTA *@
         <button class="btn-primary connect-cta" type="button">Subscribe Free</button>
-    </div>
-</div>
+    </MudItem>
+</MudGrid>
 
 @* CTA banner *@
 <section class="cta-banner">