feat: Feature 3.1 — Landing page + blog + Phase 3 specs

Next.js 14+ web app in web/ directory:
- Landing page: Hero, How It Works, Features, 3-tier Pricing with
  founder badges, Footer with email capture
- Blog system: MDX-powered, /blog index + /blog/[slug] pages,
  reading time, Open Graph tags, JSON-LD structured data
- Auth pages: /login + /signup (Supabase Auth ready)
- Design system: dark theme, grade colors (A/B/C/D), BetonBLK voice
- 1 seed blog post: "How to Read Line Movement Like a Sharp"
- Specs for 3.2 (Scan UI), 3.3 (Bet Tracker), 3.4 (Stripe)

Build passes clean: 7 static pages generated.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/components/HowItWorks.tsx

@@ -0,0 +1,36 @@
+const steps = [
+  {
+    number: '01',
+    title: 'Build your parlay',
+    description: 'Add your legs — player, stat, line, book. 2 to 12 props.',
+  },
+  {
+    number: '02',
+    title: 'Get your grade',
+    description: 'Each leg graded A through D. Overall parlay grade with correlation checks.',
+  },
+  {
+    number: '03',
+    title: 'See the edge',
+    description: 'Season averages, recent form, situational splits, cross-book line comparison. Every factor explained.',
+  },
+];
+
+export default function HowItWorks() {
+  return (
+    <section className="py-24 px-4">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-16">How It Works</h2>
+        <div className="grid md:grid-cols-3 gap-8">
+          {steps.map((step) => (
+            <div key={step.number} className="p-6 rounded-2xl bg-[var(--card)] border border-[var(--border)]">
+              <div className="font-mono text-[var(--accent)] text-sm font-bold mb-3">{step.number}</div>
+              <h3 className="text-xl font-semibold mb-2">{step.title}</h3>
+              <p className="text-[var(--text-muted)] text-sm leading-relaxed">{step.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}