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

@@ -0,0 +1,21 @@
+const gradeColors: Record<string, string> = {
+  A: 'bg-[var(--grade-a)]/10 border-[var(--grade-a)] text-[var(--grade-a)]',
+  B: 'bg-[var(--grade-b)]/10 border-[var(--grade-b)] text-[var(--grade-b)]',
+  C: 'bg-[var(--grade-c)]/10 border-[var(--grade-c)] text-[var(--grade-c)]',
+  D: 'bg-[var(--grade-d)]/10 border-[var(--grade-d)] text-[var(--grade-d)]',
+};
+
+export default function GradeCard({ grade, confidence, label }: { grade: string; confidence?: number; label?: string }) {
+  const colors = gradeColors[grade] || gradeColors.D;
+  return (
+    <div className={`inline-flex items-center gap-3 px-4 py-2 rounded-xl border ${colors}`}>
+      <span className="font-mono font-bold text-3xl">{grade}</span>
+      {confidence != null && (
+        <div className="text-sm">
+          <div className="font-mono font-medium">{confidence}%</div>
+          {label && <div className="text-xs opacity-70">{label}</div>}
+        </div>
+      )}
+    </div>
+  );
+}