fix(website): bump text contrast to pass Lighthouse accessibility >= 0.95

Lighthouse CI failed with accessibility 0.93 (threshold: 0.95).
Root cause: text-zinc-400/500 on dark backgrounds gives only ~4.3:1
contrast ratio, below WCAG AA minimum of 4.5:1.

Changes:
- MiniPlayground: inactive tabs zinc-500 → zinc-400, labels zinc-400 → zinc-300
- TrustSection: heading and labels zinc-400 → zinc-300
- DialectShowcase: subtitle zinc-400 → zinc-300
- AnimatedBars: value labels zinc-400 → zinc-300
- PerformanceSection: footnote zinc-500 → zinc-400

All text now passes WCAG AA (4.5:1 minimum contrast on dark backgrounds).

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

Author: 2 people

website/src/components/home/AnimatedBars.tsx

@@ -58,7 +58,7 @@ export function AnimatedBars({ benchmarks, maxOps }: { benchmarks: Benchmark[];
                 }}
               />
             </div>
-            <span className="w-28 sm:w-32 text-sm text-zinc-400 shrink-0 font-mono">
+            <span className="w-28 sm:w-32 text-sm text-zinc-300 shrink-0 font-mono">
               {b.label}
             </span>
           </div>

website/src/components/home/DialectShowcase.tsx

@@ -44,7 +44,7 @@ export function DialectShowcase() {
           <h2 className="text-3xl font-bold text-white text-center mb-2">
             8 SQL Dialects, One Parser
           </h2>
-          <p className="text-zinc-400 text-center mb-12 text-lg">
+          <p className="text-zinc-300 text-center mb-12 text-lg">
             From PostgreSQL to ClickHouse — parse them all
           </p>
         </FadeInCSS>

website/src/components/home/MiniPlayground.tsx

@@ -130,7 +130,7 @@ export function MiniPlayground() {
             <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/60" />
             <span className="w-2.5 h-2.5 rounded-full bg-green-500/60" />
           </div>
-          <span className="text-xs text-zinc-400 font-mono ml-2">query.sql</span>
+          <span className="text-xs text-zinc-300 font-mono ml-2">query.sql</span>
           <label htmlFor="mini-dialect" className="ml-auto flex items-center gap-1.5">
             <select
               id="mini-dialect"
@@ -173,7 +173,7 @@ export function MiniPlayground() {
                 className={`px-2 py-0.5 text-xs font-mono rounded transition-colors ${
                   activeTab === tab
                     ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
-                    : 'text-zinc-500 hover:text-zinc-300'
+                    : 'text-zinc-400 hover:text-zinc-200'
                 }`}
               >
                 {tab === 'ast' ? 'AST' : tab === 'format' ? 'Format' : 'Lint'}
@@ -200,7 +200,7 @@ export function MiniPlayground() {
               {parseError}
             </pre>
           ) : (
-            <pre className="p-4 text-[14px] leading-relaxed font-mono text-zinc-400 whitespace-pre-wrap">
+            <pre className="p-4 text-[14px] leading-relaxed font-mono text-zinc-300 whitespace-pre-wrap">
               <code>{output || (loading ? SAMPLE_AST_PLACEHOLDER : '')}</code>
             </pre>
           )}

website/src/components/home/PerformanceSection.tsx

@@ -50,7 +50,7 @@ export function PerformanceSection() {
         <FadeInCSS delay={0.5}>
           <GlassCard className="mt-12 p-6 sm:p-8" hover={false}>
             <AnimatedBars benchmarks={benchmarks} maxOps={maxOps} />
-            <p className="text-xs text-zinc-500 mt-6 text-center">
+            <p className="text-xs text-zinc-400 mt-6 text-center">
               Based on BenchmarkParse, Apple M4, Go 1.26
             </p>
           </GlassCard>

website/src/components/home/TrustSection.tsx

@@ -95,7 +95,7 @@ export function TrustSection() {
       <div className="max-w-5xl mx-auto px-4">
         {/* Heading */}
         <FadeInCSS>
-          <h2 className="text-center text-sm font-semibold uppercase tracking-widest text-zinc-400 mb-10">
+          <h2 className="text-center text-sm font-semibold uppercase tracking-widest text-zinc-300 mb-10">
             Trusted by Developers
           </h2>
         </FadeInCSS>
@@ -109,15 +109,15 @@ export function TrustSection() {
                 <span className="text-lg font-bold text-zinc-100">
                   {m.id === 'stars' ? <GitHubStarCount /> : m.value}
                 </span>
-                <span className="text-xs text-zinc-400">{m.label}</span>
+                <span className="text-xs text-zinc-300">{m.label}</span>
               </div>
             </FadeInCSS>
           ))}
         </div>
 
         {/* Integrations */}
         <FadeInCSS delay={0.4}>
-          <p className="text-center text-sm font-medium text-zinc-500 mt-12 mb-5">
+          <p className="text-center text-sm font-medium text-zinc-300 mt-12 mb-5">
             Integrates with
           </p>
         </FadeInCSS>
@@ -129,7 +129,7 @@ export function TrustSection() {
                 <span className="block text-base font-semibold text-zinc-100">
                   {item.name}
                 </span>
-                <span className="block text-xs text-zinc-400 mt-1">
+                <span className="block text-xs text-zinc-300 mt-1">
                   {item.detail}
                 </span>
               </div>