refactor: remove ProductMonoliths from home page

## What Changed

- Removed ProductMonoliths import and <monolith-container> from +page.svelte
- Removed unused .monolith-container CSS selector (caught by Svelte lint)
- Updated README.md and CLAUDE.md to note ProductMonoliths is unused

## Rationale

The three wireframe rectangle panels behind the product cards created too much
visual noise when combined with the background 3D scene (cube, grid, particles).
Removing them gives the product section cleaner readability while the ambient
3D elements still provide cinematic depth.

## What Was Not Changed

ProductMonoliths.svelte file itself is preserved in src/lib/three/ — it can be
re-enabled if the design direction changes or if a different placement is found.

Author: ccross2

CLAUDE.md

@@ -187,11 +187,7 @@ A cinematic Three.js background renders behind all page content on every route.
             ├── GridHelper (100×100, scroll-linked drift)
             └── Particle system (500 dust particles)
 
-+page.svelte (home only)
-  └── <ProductMonoliths />         # Three wireframe panels behind product cards
-       ├── Augmentum monolith
-       ├── Visage monolith
-       └── MrHaven monolith
+ProductMonoliths.svelte exists but is currently unused (removed for visual clarity).
 ```
 
 ### Key Files
@@ -200,7 +196,7 @@ A cinematic Three.js background renders behind all page content on every route.
 |------|---------------|
 | `src/lib/three/Scene.svelte` | Canvas element creation, SceneManager lifecycle (mount/destroy) |
 | `src/lib/three/SceneManager.js` | Camera, renderer, scene objects, animation loop, resize/scroll/mouse handlers, theme color updates, cleanup |
-| `src/lib/three/ProductMonoliths.svelte` | Three interactive wireframe panels on home page, hover effects (tilt, glow, color), theme-aware materials |
+| `src/lib/three/ProductMonoliths.svelte` | Interactive wireframe panels with hover effects — currently unused, removed from home page for visual clarity |
 
 ### CSS Layering
 
@@ -225,7 +221,7 @@ All page sections must have transparent backgrounds. Do **not** add `background-
 | Grid primary | `0x888888` | `0x444444` |
 | Grid secondary | `0xcccccc` | `0x222222` |
 | Particle color | `0x000000` (opacity 0.2) | `0xffffff` (opacity 0.4) |
-| Monolith wireframe | `0x333333` | `0xffffff` |
+| Monolith wireframe | `0x333333` | `0xffffff` | *(unused — monoliths removed)* |
 
 ### Modifying the 3D Scene
 

README.md

@@ -107,7 +107,7 @@ A full-viewport 3D background renders behind all page content:
 - **Theme-aware:** Materials, fog color/density, and particle opacity adapt to light/dark mode
 - **Lifecycle:** `Scene.svelte` mounts/unmounts the canvas; `SceneManager.js` handles the animation loop and cleanup
 
-The home page also renders `ProductMonoliths.svelte` — three interactive wireframe panels positioned behind the product cards that respond to hover with tilt, glow, and color transitions.
+`ProductMonoliths.svelte` exists as an interactive wireframe panel component but is currently unused — it was removed from the home page to reduce visual clutter.
 
 ### Shared Components
 

src/routes/+page.svelte

@@ -7,8 +7,6 @@
 </svelte:head>
 
 <script>
-  import ProductMonoliths from '$lib/three/ProductMonoliths.svelte';
-
   const asciiArt = `      _______________
      /              /|
     /              / |
@@ -56,9 +54,6 @@
   </section>
 
   <section class="products">
-    <div class="monolith-container">
-      <ProductMonoliths {products} />
-    </div>
     <div class="product-grid">
       {#each products as p}
         <a href={p.href} class="product-card">
@@ -139,13 +134,6 @@
     position: relative;
   }
 
-  .monolith-container {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    pointer-events: none;
-    z-index: -1;
-  }
-
   .product-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);