Replace hero mockup with auto-rotating screenshot carousel

- Swap static dashboard card for 3-slide image carousel in hero section
- Slides auto-advance every 4.5s, pause on hover, support manual prev/next and dot navigation
- Add carousel CSS with fade transition, dot indicators, and glow border treatment
- Add carousel JS with goTo/prev/next/auto-rotate logic
- Images expected at img/screenshot-dashboard.png, img/screenshot-cashflow.png, img/screenshot-capital.png

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -70,43 +70,33 @@
       </div>
     </div>
 
-    <!-- Floating dashboard mockup -->
+    <!-- Screenshot Carousel -->
     <div class="hero-visual">
-      <div class="dashboard-card">
-        <div class="dash-header">
-          <span class="dash-dot red"></span>
-          <span class="dash-dot yellow"></span>
-          <span class="dash-dot green"></span>
-          <span class="dash-title">LedgerIQ Dashboard</span>
+      <div class="screenshot-carousel" id="screenshotCarousel">
+        <div class="carousel-frame">
+          <div class="carousel-slides">
+            <div class="carousel-slide active">
+              <img src="img/screenshot-dashboard.png" alt="HOA LedgerIQ Dashboard — Fund health scores, operating and reserve balances" />
+              <div class="slide-caption">Dashboard — Fund Health &amp; At-a-Glance Metrics</div>
+            </div>
+            <div class="carousel-slide">
+              <img src="img/screenshot-cashflow.png" alt="HOA LedgerIQ Cash Flow — Projected balances with forward forecasting chart" />
+              <div class="slide-caption">Cash Flow — Actuals &amp; Forward Projections</div>
+            </div>
+            <div class="carousel-slide">
+              <img src="img/screenshot-capital.png" alt="HOA LedgerIQ Capital Planning — Multi-year project timeline and budget view" />
+              <div class="slide-caption">Capital Planning — 5-Year Project Pipeline</div>
+            </div>
+          </div>
         </div>
-        <div class="dash-body">
-          <div class="dash-stat">
-            <div class="stat-label">Total Collected YTD</div>
-            <div class="stat-value green-text">$412,850</div>
-            <div class="stat-delta">↑ 8.2% vs last year</div>
-          </div>
-          <div class="dash-stat">
-            <div class="stat-label">Delinquency Rate</div>
-            <div class="stat-value amber-text">3.4%</div>
-            <div class="stat-delta">↓ 1.1% this quarter</div>
-          </div>
-          <div class="dash-stat">
-            <div class="stat-label">Reserve Fund Health</div>
-            <div class="stat-value green-text">92%</div>
-            <div class="stat-delta">AI Forecast: On Track</div>
-          </div>
-          <div class="dash-chart">
-            <div class="chart-bar" style="height:55%"></div>
-            <div class="chart-bar" style="height:70%"></div>
-            <div class="chart-bar" style="height:60%"></div>
-            <div class="chart-bar" style="height:85%"></div>
-            <div class="chart-bar active" style="height:92%"></div>
-            <div class="chart-bar" style="height:80%"></div>
-          </div>
-          <div class="dash-ai-chip">
-            <span class="ai-icon">✦</span>
-            AI Insight: Reserve funding on pace for full replenishment by Q3.
+        <div class="carousel-controls">
+          <button class="carousel-btn carousel-prev" aria-label="Previous screenshot">&#8592;</button>
+          <div class="carousel-dots">
+            <span class="carousel-dot active" data-index="0"></span>
+            <span class="carousel-dot" data-index="1"></span>
+            <span class="carousel-dot" data-index="2"></span>
           </div>
+          <button class="carousel-btn carousel-next" aria-label="Next screenshot">&#8594;</button>
         </div>
       </div>
     </div>