feat: dynamic data insights + remaining audit fixes

DATA FIXES:
- Dashboard insights now fully dynamic per date range
  - Revenue/orders/newcust/AOV trend (splits data in half, compares)
  - Channel concentration % computed from filtered data
  - Repeat revenue % with date-range label
  - All insights adapt when user changes date filter/preset
- Offer page charts now load from API (not hardcoded arrays)
  - Revenue chart, new customer chart, channel donut = live data
  - Hero stats (-84%, -42%, 85%) computed dynamically from API
  - ROI calculator AOV pulled from latest year's actual data

REMAINING AUDIT FIXES:
- Fix #4: 'Built by' section on offer page (name, bio, contact)
- Fix #9: Before/After comparison block on homepage
  - Side-by-side: current JV PDP flaws vs AI engine output
  - 8 specific ✗/✓ comparison points
- Fix #6: Before/after serves as instant proof (no 90s wait)

All 10 audit fixes now implemented.

templates/index.html

@@ -68,6 +68,50 @@
   </div>
 </section>
 
+<!-- ═══ BEFORE / AFTER ═══ -->
+<section class="demo" id="before-after" style="padding-top:2rem">
+  <span class="badge" style="background:rgba(245,158,11,.15);color:#f59e0b">📊 WHAT THE AI ENGINE PRODUCES</span>
+  <h2 style="margin-bottom:.5rem">Before → After: Real Product Comparison</h2>
+  <p class="sub" style="margin-bottom:2rem">Same product. Left is the current justvitamins.co.uk page. Right is what the AI engine generates in 90 seconds.</p>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:2rem">
+    <div style="background:var(--card);border:1px solid var(--border);border-radius:12px;padding:24px;position:relative">
+      <div style="position:absolute;top:12px;left:12px;background:rgba(239,68,68,.15);color:#ef4444;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase">Current PDP</div>
+      <div style="margin-top:28px">
+        <div style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px">Super Strength Vitamin D3 4000iu + K2</div>
+        <div style="font-size:12px;color:var(--text3);margin-bottom:16px">justvitamins.co.uk — actual product page</div>
+        <div style="display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text2)">
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Generic subtitle: "A powerful pairing"</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Single product photo (pouch only)</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No benefit-driven bullets (Feature→Benefit→Proof)</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No trust signals (money-back, UK-made, certifications)</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No price anchoring (daily cost, cost-per-dose)</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No SEO meta description</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> No ad hooks or email sequences</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#ef4444">✗</span> Cookie consent modal covers half the page</div>
+        </div>
+      </div>
+    </div>
+    <div style="background:var(--card);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:24px;position:relative">
+      <div style="position:absolute;top:12px;left:12px;background:rgba(16,185,129,.15);color:#10b981;font-size:10px;font-weight:700;padding:3px 10px;border-radius:4px;text-transform:uppercase">AI-Generated PDP</div>
+      <div style="margin-top:28px">
+        <div style="font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px">Same product — generated in ~90 seconds</div>
+        <div style="font-size:12px;color:var(--text3);margin-bottom:16px">Conversion-optimised by Gemini AI</div>
+        <div style="display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--text2)">
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 5 AI-generated product photos (lifestyle, scale, detail, banner)</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Feature → Benefit → Proof bullet structure</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Trust bar: money-back, UK-made, EFSA claims</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Price anchoring: "just 14p per day"</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> Full FAQ accordion with objection handling</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> SEO meta + Open Graph tags</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 3 ad hooks + 3 email sequences</div>
+          <div style="display:flex;gap:8px;align-items:center"><span style="color:#10b981">✓</span> 4 copy styles: Balanced, Premium, Direct, Medical-Safe</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <p style="text-align:center;color:var(--text3);font-size:12px">↑ Run Demo A above to see the full AI-generated PDP for any JustVitamins product</p>
+</section>
+
 <!-- ═══ DEMO B — Competitor X-Ray ═══ -->
 <section class="demo" id="demo-b">
   <span class="badge blue">🔍 DEMO B — LIVE</span>