Integrate 5 demo screenshots into 'How It Works' section

- Added all 5 high-quality screenshots from dev environment
- Calendar view showing breed-aware scheduling
- Appointment booking workflow with step wizard
- Client profiles with pet history and grooming records
- Services management with breed-based pricing tiers
- Customer portal dashboard for client self-service

Screenshots taken from groombook.dev.farh.net (groomer-first perspective, no admin views).
Addresses GRO-243 deliverable: demo assets for website.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

index.html

@@ -77,8 +77,11 @@
     .workflow-icon { font-size: 2.5rem; margin-bottom: 15px; }
     .workflow-card h3 { color: #1a1a2e; margin-bottom: 12px; font-size: 1.25rem; }
     .workflow-card p { color: #666; line-height: 1.7; font-size: 0.95rem; }
-    .asset-placeholder { background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%); border: 2px dashed #ccc; border-radius: 8px; padding: 60px 20px; text-align: center; color: #999; margin: 40px 0; }
-    .asset-placeholder p { margin: 0; font-size: 0.95rem; }
+    .screenshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin: 60px 0; }
+    .screenshot-item { text-align: center; }
+    .screenshot-item img { width: 100%; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); margin-bottom: 15px; }
+    .screenshot-item h4 { color: #1a1a2e; margin-bottom: 8px; font-size: 1.05rem; font-weight: 600; }
+    .screenshot-item p { color: #666; font-size: 0.9rem; line-height: 1.6; }
     footer { background: #1a1a2e; color: #fff; padding: 50px 0; text-align: center; border-top: 1px solid #333; }
     footer p { color: #c0c0c0; }
     footer strong { color: #fff; }
@@ -173,8 +176,36 @@
         </div>
       </div>
 
-      <div class="asset-placeholder">
-        <p>📸 Screenshots and walkthroughs coming soon — showing the live product in action</p>
+      <div class="screenshot-grid">
+        <div class="screenshot-item">
+          <img src="01-appointments-calendar.png" alt="Weekly appointment calendar with breed-aware scheduling">
+          <h4>📅 Appointment Calendar</h4>
+          <p>Color-coded appointments, breed-specific labels, and conflict detection at a glance.</p>
+        </div>
+
+        <div class="screenshot-item">
+          <img src="02-book-appointment.png" alt="Book an appointment workflow">
+          <h4>✏️ Book Appointment</h4>
+          <p>Intuitive step wizard for scheduling. Clients choose service, date, time, and confirm instantly.</p>
+        </div>
+
+        <div class="screenshot-item">
+          <img src="03-client-pet-history.png" alt="Client and pet profile with grooming history">
+          <h4>🐾 Pet Profiles & History</h4>
+          <p>All client and pet information in one place—grooming history, health notes, and preferences.</p>
+        </div>
+
+        <div class="screenshot-item">
+          <img src="04-services-management.png" alt="Services management with breed-based pricing">
+          <h4>💰 Service Pricing</h4>
+          <p>Manage services with breed-specific pricing tiers. Set durations and track availability.</p>
+        </div>
+
+        <div class="screenshot-item">
+          <img src="05-customer-portal.png" alt="Customer portal dashboard">
+          <h4>👥 Customer Portal</h4>
+          <p>Clients see their appointments, pets, and history. 24/7 access to manage their grooming record.</p>
+        </div>
       </div>
 
       <div style="text-align: center;">