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/Features.tsx

@@ -0,0 +1,47 @@
+const features = [
+  {
+    title: 'Prop Analysis',
+    description: '6-step grading pipeline. Season average, recent form, situational splits, cross-book lines, kill conditions.',
+  },
+  {
+    title: 'Correlation Detection',
+    description: 'Flags conflicting legs in your parlay. Same-game overlap, opposing players, contradictory props.',
+  },
+  {
+    title: 'Line Movement',
+    description: 'Tracks lines throughout the day. Alerts when movement hits 0.5+ points. Sharp money indicators.',
+  },
+  {
+    title: 'Kill Conditions',
+    description: '6 hard checks before you bet. Low minutes, small sample, back-to-back, blowout risk, split conflicts.',
+  },
+  {
+    title: 'Bet Tracking',
+    description: 'Log every bet. Screenshot upload, quick slip, or manual entry. Track ROI and win rate over time.',
+  },
+  {
+    title: 'Cascade Alerts',
+    description: 'Star player scratched? BetonBLK re-grades your affected parlays and alerts you instantly.',
+  },
+];
+
+export default function Features() {
+  return (
+    <section className="py-24 px-4 bg-[var(--card)]">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-4">Built for Serious Bettors</h2>
+        <p className="text-[var(--text-muted)] text-center mb-16 max-w-lg mx-auto">
+          Every feature exists because we needed it ourselves. No fluff.
+        </p>
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((f) => (
+            <div key={f.title} className="p-5 rounded-xl border border-[var(--border)] bg-[var(--bg)]">
+              <h3 className="font-semibold mb-2">{f.title}</h3>
+              <p className="text-sm text-[var(--text-muted)] leading-relaxed">{f.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}