From 897cacf463cc82bcdb0c185b1527602bed05e775 Mon Sep 17 00:00:00 2001
From: Shivam Saini <shivamsn97@gmail.com>
Date: Sat, 18 Apr 2026 00:02:14 +0530
Subject: [PATCH 1/3] =?UTF-8?q?feat(landing):=20redesign=20home=20page=20?=
 =?UTF-8?q?=E2=80=94=20dark,=20sleek,=20Lighthouse=20100?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rewrite pages/index.pyxl from 1664 lines to 777 lines. Seven sections
  (nav, hero, features, perf numbers, AI-agents, demos, get-started +
  newsletter, footer) replacing the previous twelve, with tighter copy
  and a single "Python + React in one file" hero message.
- Remove the canvas aurora HeroBackground, six GradientOrb wrappers,
  ten IntersectionObserver Reveal components, the client-side syntax
  tokenizer, the WhyPyxle/HowItWorks/UseCases sections, and the full
  framework bar chart (links out to /benchmarks for the detail).
- Ship a static hand-tokenized hero code card so the landing no longer
  pulls the runtime highlighter into its JS bundle.
- Drop Google Fonts entirely in favour of the system font stack —
  zero render-blocking font requests.
- Add an inline pre-hydration theme <script> in pages/layout.pyxl that
  reads localStorage before paint, preventing FOUC and hydration
  mismatch. Switch layout and ThemeToggle to Tailwind dark: variants
  so theme swaps are pure CSS with no React re-render of colours.
- Bump dark-mode foreground contrast (zinc-500 -> zinc-400) on small
  text, recolor the subscribe button to emerald-500 + zinc-950, and
  brighten the .sh-cmt comment token so every element clears WCAG AA.

Production Lighthouse (desktop): 100 / 100 / 100 / 100.
Mobile: 98 / 100 / 100 / 100 (render-blocking Tailwind CSS + unused
framework JS account for the remaining two points; both are out of
scope for this app-level change).
---
 pages/components/theme-toggle.jsx |   24 +-
 pages/index.pyxl                  | 1855 ++++++++---------------------
 pages/layout.pyxl                 |   30 +-
 pages/styles/tailwind.css         |  366 +-----
 4 files changed, 569 insertions(+), 1706 deletions(-)

diff --git a/pages/components/theme-toggle.jsx b/pages/components/theme-toggle.jsx
index bafe780..b373340 100644
--- a/pages/components/theme-toggle.jsx
+++ b/pages/components/theme-toggle.jsx
@@ -3,25 +3,19 @@ import { useTheme } from '../layout.jsx';
 
 export function ThemeToggle() {
     const { theme, toggle } = useTheme();
+    const isDark = theme === 'dark';
     return (
         <button
             onClick={toggle}
-            className={`rounded-lg border p-2 transition ${
-                theme === 'dark'
-                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                    : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-            }`}
-            aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+            className="rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
+            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
         >
-            {theme === 'dark' ? (
-                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
-                </svg>
-            ) : (
-                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
-                </svg>
-            )}
+            <svg className="h-4 w-4 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+            </svg>
+            <svg className="h-4 w-4 block dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+            </svg>
         </button>
     );
 }
diff --git a/pages/index.pyxl b/pages/index.pyxl
index 0a1869c..7c6ed9e 100644
--- a/pages/index.pyxl
+++ b/pages/index.pyxl
@@ -7,9 +7,7 @@ _EMAIL_RE = _re.compile(r"^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$")
 
 @server
 async def load_home(request):
-    return {
-        "version": __version__,
-    }
+    return {"version": __version__}
 
 
 @action
@@ -17,8 +15,6 @@ async def subscribe_newsletter(request):
     from db import add_subscriber, check_rate_limit, get_client_ip
 
     client_ip = get_client_ip(request)
-    # 5 subscribe attempts per hour per IP, scoped to the newsletter
-    # form only. Independent of the home clicker and reactions buckets.
     if not check_rate_limit(client_ip, scope="subscribe_newsletter"):
         raise ActionError(
             "Rate limit reached. Please try again after 1 hour.",
@@ -30,737 +26,282 @@ async def subscribe_newsletter(request):
 
     if not email:
         raise ActionError("Please enter your email address.", status_code=400)
-
     if not _EMAIL_RE.match(email):
         raise ActionError("Please enter a valid email address.", status_code=400)
-
     if len(email) > 254:
         raise ActionError("Email address is too long.", status_code=400)
 
     add_subscriber(email)
-    return {"message": "You're on the list! We'll keep you posted."}
+    return {"message": "You're on the list. We'll keep you posted."}
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { useTheme } from './layout.pyxl';
+
+import React, { useState, useCallback, useEffect } from 'react';
 import { useAction, Link, Head } from 'pyxle/client';
-import { tokenizeBlock, HIGHLIGHT_CSS } from './components/code-highlighter.jsx';
 import { ThemeToggle } from './components/theme-toggle.jsx';
 
-/* ── scroll animation hook ───────────────────────────────── */
 
-function useScrollReveal(options = {}) {
-    const ref = useRef(null);
-    const [isVisible, setIsVisible] = useState(false);
-    const { threshold = 0.15, once = true } = options;
+/* ─────────────────────────────────────────────────────────────
+   Hand-tokenized hero code snippet. Kept inline (not produced
+   by the runtime tokenizer in code-highlighter.jsx) so the
+   client bundle ships zero tokenizer JS for the landing page.
+   Matches the `.sh-*` classes in tailwind.css.
+   ───────────────────────────────────────────────────────────── */
+
+const HERO_CODE = [
+    [['# pages/dashboard.pyxl', 'sh-cmt']],
+    [],
+    [['@server', 'sh-dec']],
+    [['async', 'sh-kw'], [' ', 'sh-pl'], ['def', 'sh-kw'], [' ', 'sh-pl'], ['load', 'sh-fn'], ['(', 'sh-pl'], ['request', 'sh-pl'], ['):', 'sh-pl']],
+    [['    ', 'sh-pl'], ['return', 'sh-kw'], [' {', 'sh-brc'], ['"user"', 'sh-str'], [': ', 'sh-pl'], ['await', 'sh-kw'], [' db.get_user(request)', 'sh-pl'], ['}', 'sh-brc']],
+    [],
+    [],
+    [['import', 'sh-kw'], [' React ', 'sh-pl'], ['from', 'sh-kw'], [' ', 'sh-pl'], ["'react'", 'sh-str'], [';', 'sh-pl']],
+    [],
+    [['export', 'sh-kw'], [' ', 'sh-pl'], ['default', 'sh-kw'], [' ', 'sh-pl'], ['function', 'sh-kw'], [' ', 'sh-pl'], ['Dashboard', 'sh-comp'], ['({ ', 'sh-brc'], ['data', 'sh-pl'], [' })', 'sh-brc'], [' {', 'sh-brc']],
+    [['    ', 'sh-pl'], ['return', 'sh-kw'], [' (', 'sh-pl']],
+    [['        <', 'sh-tag'], ['main', 'sh-elem'], ['>', 'sh-tag']],
+    [['            <', 'sh-tag'], ['h1', 'sh-elem'], ['>', 'sh-tag'], ['Welcome, ', 'sh-pl'], ['{', 'sh-brc'], ['data.user.name', 'sh-pl'], ['}', 'sh-brc'], ['</', 'sh-tag'], ['h1', 'sh-elem'], ['>', 'sh-tag']],
+    [['        </', 'sh-tag'], ['main', 'sh-elem'], ['>', 'sh-tag']],
+    [['    );', 'sh-pl']],
+    [['}', 'sh-brc']],
+];
 
-    useEffect(() => {
-        const el = ref.current;
-        if (!el) return;
-        const observer = new IntersectionObserver(
-            ([entry]) => {
-                if (entry.isIntersecting) {
-                    setIsVisible(true);
-                    if (once) observer.unobserve(el);
-                } else if (!once) {
-                    setIsVisible(false);
-                }
-            },
-            { threshold, rootMargin: '0px 0px -60px 0px' }
-        );
-        observer.observe(el);
-
-        /* When the tab becomes visible after loading in the background,
-           IntersectionObserver may not have fired yet.  Re-check manually. */
-        function onVisibilityChange() {
-            if (document.visibilityState === 'visible' && el) {
-                const rect = el.getBoundingClientRect();
-                const inView = rect.top < window.innerHeight && rect.bottom > 0;
-                if (inView) {
-                    setIsVisible(true);
-                    if (once) observer.unobserve(el);
-                    document.removeEventListener('visibilitychange', onVisibilityChange);
-                }
-            }
-        }
-        document.addEventListener('visibilitychange', onVisibilityChange);
+const HERO_CODE_TEXT = `# pages/dashboard.pyxl
 
-        return () => {
-            observer.disconnect();
-            document.removeEventListener('visibilitychange', onVisibilityChange);
-        };
-    }, [threshold, once]);
+@server
+async def load(request):
+    return {"user": await db.get_user(request)}
 
-    return [ref, isVisible];
-}
 
-function Reveal({ children, className = '', delay = 0, direction = 'up' }) {
-    const [ref, isVisible] = useScrollReveal();
-    const transforms = {
-        up: 'translate3d(0, 48px, 0)',
-        down: 'translate3d(0, -48px, 0)',
-        left: 'translate3d(48px, 0, 0)',
-        right: 'translate3d(-48px, 0, 0)',
-        none: 'translate3d(0, 0, 0)',
-    };
+import React from 'react';
+
+export default function Dashboard({ data }) {
     return (
-        <div
-            ref={ref}
-            className={className}
-            style={{
-                opacity: isVisible ? 1 : 0,
-                transform: isVisible ? 'translate3d(0,0,0)' : transforms[direction],
-                transition: `opacity 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
-                willChange: 'opacity, transform',
-            }}
-        >
-            {children}
-        </div>
+        <main>
+            <h1>Welcome, {data.user.name}</h1>
+        </main>
     );
-}
+}`;
+
+
+/* ── Small primitives ────────────────────────────────────────────── */
 
-/* ── helpers ──────────────────────────────────────────────── */
+function PreTokenized({ lines }) {
+    return (
+        <pre className="overflow-x-auto p-5 sm:p-6 text-[12px] sm:text-[13px] leading-[1.65] font-mono">
+            <code>
+                {lines.map((tokens, i) => (
+                    <React.Fragment key={i}>
+                        {tokens.length === 0 ? '\n' : (
+                            <>
+                                {tokens.map(([text, cls], j) => (
+                                    <span key={j} className={cls}>{text}</span>
+                                ))}
+                                {'\n'}
+                            </>
+                        )}
+                    </React.Fragment>
+                ))}
+            </code>
+        </pre>
+    );
+}
 
-function CopyButton({ text }) {
+function CopyButton({ text, label = 'Copy' }) {
     const [copied, setCopied] = useState(false);
-    const { theme } = useTheme();
     const copy = () => {
-        if (typeof navigator !== 'undefined') {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
             navigator.clipboard.writeText(text);
             setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
+            setTimeout(() => setCopied(false), 1600);
         }
     };
     return (
         <button
+            type="button"
             onClick={copy}
-            className={`absolute right-3 top-3 rounded-md border px-2 py-1 text-xs transition ${
-                theme === 'dark'
-                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                    : 'border-zinc-200 bg-zinc-100 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-900'
-            }`}
-            aria-label="Copy to clipboard"
+            aria-label={`${label} to clipboard`}
+            className="focus-ring inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium transition border-zinc-200 bg-white text-zinc-500 hover:text-zinc-900 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-white/10"
         >
-            {copied ? "Copied!" : "Copy"}
+            {copied ? 'Copied' : label}
         </button>
     );
 }
 
-function GradientOrb({ className }) {
-    return (
-        <div
-            className={`pointer-events-none absolute rounded-full blur-[120px] opacity-20 ${className}`}
-            aria-hidden="true"
-        />
-    );
-}
-
-/* ── helpers ──────────────────────────────────────────────── */
-
-function scrollToSection(e, id) {
-    e.preventDefault();
-    const el = document.getElementById(id);
-    if (el) {
-        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        window.history.replaceState(null, '', '#' + id);
-    }
-}
-
-/* ── mobile menu ──────────────────────────────────────────── */
 
-function MobileMenu() {
-    const [open, setOpen] = useState(false);
-    const { theme } = useTheme();
-
-    return (
-        <div className="sm:hidden">
-            <button
-                onClick={() => setOpen(!open)}
-                className={`rounded-lg border p-2 transition ${
-                    theme === 'dark'
-                        ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10'
-                        : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200'
-                }`}
-                aria-label="Toggle menu"
-            >
-                {open ? (
-                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                ) : (
-                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
-                    </svg>
-                )}
-            </button>
-            {open && (
-                <div className={`absolute top-full left-0 right-0 border-b p-4 flex flex-col gap-3 ${
-                    theme === 'dark'
-                        ? 'bg-[#0a0a0b]/95 backdrop-blur-xl border-white/5'
-                        : 'bg-white/95 backdrop-blur-xl border-zinc-200'
-                }`}>
-                    <a href="#code" onClick={(e) => { scrollToSection(e, 'code'); setOpen(false); }}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Code</a>
-                    <a href="#features" onClick={(e) => { scrollToSection(e, 'features'); setOpen(false); }}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Features</a>
-                    <a href="#demos" onClick={(e) => { scrollToSection(e, 'demos'); setOpen(false); }}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Demos</a>
-                    <a href="#get-started" onClick={(e) => { scrollToSection(e, 'get-started'); setOpen(false); }}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Get Started</a>
-                    <Link href="/playground" onClick={() => setOpen(false)}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Playground</Link>
-                    <Link href="/benchmarks" onClick={() => setOpen(false)}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Benchmarks</Link>
-                    <Link href="/docs" onClick={() => setOpen(false)}
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Docs</Link>
-                    <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>GitHub</a>
-                </div>
-            )}
-        </div>
-    );
-}
-
-/* ── nav ──────────────────────────────────────────────────── */
+/* ── Nav ─────────────────────────────────────────────────────────── */
 
 function Nav({ version }) {
     const [scrolled, setScrolled] = useState(false);
-    const { theme } = useTheme();
+    const [open, setOpen] = useState(false);
 
     useEffect(() => {
-        const onScroll = () => setScrolled(window.scrollY > 20);
+        const onScroll = () => setScrolled(window.scrollY > 8);
+        onScroll();
         window.addEventListener('scroll', onScroll, { passive: true });
         return () => window.removeEventListener('scroll', onScroll);
     }, []);
 
+    const linkCls = 'text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors';
+
     return (
-        <nav
-            className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+        <header
+            className={`fixed inset-x-0 top-0 z-50 transition-colors duration-200 ${
                 scrolled
-                    ? theme === 'dark'
-                        ? 'bg-[#0a0a0b]/80 backdrop-blur-xl border-b border-white/5'
-                        : 'bg-white/80 backdrop-blur-xl border-b border-zinc-200'
-                    : ''
+                    ? 'bg-white/70 dark:bg-[#0a0a0b]/70 backdrop-blur-xl border-b border-zinc-200/70 dark:border-white/5'
+                    : 'border-b border-transparent'
             }`}
         >
-            <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+            <nav className="mx-auto flex h-14 max-w-6xl items-center justify-between px-5 sm:px-6">
                 <div className="flex items-center gap-3">
-                    <a
-                        href="#"
-                        onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); window.history.replaceState(null, '', window.location.pathname); }}
-                        className="flex items-center gap-3 cursor-pointer"
+                    <Link href="/" aria-label="Pyxle home" className="flex items-center gap-2 focus-ring rounded">
+                        <img src="/branding/pyxle-mark.svg" alt="" width="28" height="28" className="h-7 w-7" />
+                        <span className="text-[15px] font-semibold tracking-tight">Pyxle</span>
+                    </Link>
+                    <span
+                        className="hidden xs:inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-[10px] text-zinc-500 border-zinc-200 dark:border-white/10 dark:text-zinc-400"
+                        aria-label={`Version ${version}`}
                     >
-                        <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-8 w-8" />
-                        <span className="text-lg font-semibold tracking-tight">Pyxle</span>
-                    </a>
-                    <span className={`hidden xs:inline rounded-full px-2 py-0.5 text-xs font-medium text-emerald-400 border ${
-                        theme === 'dark' ? 'bg-emerald-500/10 border-emerald-500/20' : 'bg-emerald-50 border-emerald-200'
-                    }`}>
                         v{version}
                     </span>
                 </div>
-                <div className="flex items-center gap-2 sm:gap-4">
-                    <a href="#code" onClick={(e) => scrollToSection(e, 'code')}
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Code</a>
-                    <a href="#features" onClick={(e) => scrollToSection(e, 'features')}
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Features</a>
-                    <a href="#demos" onClick={(e) => scrollToSection(e, 'demos')}
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Demos</a>
-                    <a href="#get-started" onClick={(e) => scrollToSection(e, 'get-started')}
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Get Started</a>
-                    <Link href="/playground"
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Playground</Link>
-                    <Link href="/benchmarks"
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Benchmarks</Link>
-                    <Link href="/docs"
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Docs</Link>
+
+                <div className="hidden md:flex items-center gap-6">
+                    <Link href="/docs" className={linkCls}>Docs</Link>
+                    <Link href="/playground" className={linkCls}>Playground</Link>
+                    <Link href="/benchmarks" className={linkCls}>Benchmarks</Link>
+                </div>
+
+                <div className="flex items-center gap-2">
                     <a
                         href="https://github.com/pyxle-framework/pyxle"
                         target="_blank"
                         rel="noreferrer"
-                        className={`hidden sm:inline-flex items-center gap-2 rounded-lg border px-4 py-2 text-sm font-medium transition ${
-                            theme === 'dark'
-                                ? 'border-white/10 bg-white/5 text-white hover:bg-white/10'
-                                : 'border-zinc-200 bg-zinc-100 text-zinc-900 hover:bg-zinc-200'
-                        }`}
+                        aria-label="Pyxle on GitHub"
+                        className="focus-ring hidden sm:inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10 transition-colors"
                     >
-                        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                            <path d="M12 .3a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0C17.3 4.7 18.3 5 18.3 5c.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0012 .3" />
                         </svg>
-                        GitHub
                     </a>
-                    <a
-                        href="https://github.com/pyxle-framework/pyxle-dev/blob/main/pages/index.pyxl"
-                        target="_blank"
-                        rel="noreferrer"
-                        title="View page source"
-                        className={`rounded-lg border p-2 transition ${
-                            theme === 'dark'
-                                ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                        }`}
+                    <ThemeToggle />
+                    <button
+                        type="button"
+                        onClick={() => setOpen(v => !v)}
+                        aria-label="Toggle menu"
+                        aria-expanded={open}
+                        className="md:hidden focus-ring inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300"
                     >
-                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            {open
+                                ? <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                : <path strokeLinecap="round" strokeLinejoin="round" d="M4 7h16M4 12h16M4 17h16" />}
                         </svg>
-                    </a>
-                    <ThemeToggle />
-                    <MobileMenu />
+                    </button>
                 </div>
-            </div>
-        </nav>
+            </nav>
+
+            {open && (
+                <div className="md:hidden border-t border-zinc-200/70 dark:border-white/5 bg-white/95 dark:bg-[#0a0a0b]/95 backdrop-blur-xl">
+                    <div className="mx-auto flex max-w-6xl flex-col gap-1 px-5 py-3">
+                        <Link href="/docs" onClick={() => setOpen(false)} className="py-2 text-sm text-zinc-700 dark:text-zinc-300">Docs</Link>
+                        <Link href="/playground" onClick={() => setOpen(false)} className="py-2 text-sm text-zinc-700 dark:text-zinc-300">Playground</Link>
+                        <Link href="/benchmarks" onClick={() => setOpen(false)} className="py-2 text-sm text-zinc-700 dark:text-zinc-300">Benchmarks</Link>
+                        <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer" className="py-2 text-sm text-zinc-700 dark:text-zinc-300">GitHub</a>
+                    </div>
+                </div>
+            )}
+        </header>
     );
 }
 
-/* ── hero ─────────────────────────────────────────────────── */
-
-function HeroBackground() {
-    const canvasRef = useRef(null);
-    const mouseRef = useRef({ x: 0.5, y: 0.5, tx: 0.5, ty: 0.5 });
-    const animRef = useRef(null);
-    const { theme } = useTheme();
-
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
-        let w, h;
-
-        const isDark = theme === 'dark';
-        /* Aurora ribbon config — each ribbon is a flowing sine-wave band */
-        const ribbons = isDark ? [
-            { y: 0.20, amp: 0.12, freq: 1.2, speed: 0.15, width: 0.35, color: [16, 185, 129], opacity: 0.04 },
-            { y: 0.32, amp: 0.10, freq: 0.9, speed: -0.12, width: 0.30, color: [6, 182, 212], opacity: 0.035 },
-            { y: 0.42, amp: 0.14, freq: 1.5, speed: 0.18, width: 0.25, color: [37, 99, 235], opacity: 0.03 },
-            { y: 0.28, amp: 0.08, freq: 0.7, speed: -0.09, width: 0.40, color: [139, 92, 246], opacity: 0.025 },
-            { y: 0.50, amp: 0.11, freq: 1.1, speed: 0.14, width: 0.20, color: [16, 185, 129], opacity: 0.02 },
-        ] : [
-            { y: 0.20, amp: 0.12, freq: 1.2, speed: 0.15, width: 0.35, color: [16, 185, 129], opacity: 0.07 },
-            { y: 0.32, amp: 0.10, freq: 0.9, speed: -0.12, width: 0.30, color: [6, 182, 212], opacity: 0.06 },
-            { y: 0.42, amp: 0.14, freq: 1.5, speed: 0.18, width: 0.25, color: [37, 99, 235], opacity: 0.05 },
-            { y: 0.28, amp: 0.08, freq: 0.7, speed: -0.09, width: 0.40, color: [139, 92, 246], opacity: 0.04 },
-            { y: 0.50, amp: 0.11, freq: 1.1, speed: 0.14, width: 0.20, color: [16, 185, 129], opacity: 0.035 },
-        ];
-
-        function resize() {
-            const dpr = Math.min(window.devicePixelRatio || 1, 2);
-            w = canvas.offsetWidth;
-            h = canvas.offsetHeight;
-            canvas.width = w * dpr;
-            canvas.height = h * dpr;
-            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        }
-
-        function draw(t) {
-            ctx.clearRect(0, 0, w, h);
-
-            /* smooth mouse lerp */
-            const m = mouseRef.current;
-            m.x += (m.tx - m.x) * 0.05;
-            m.y += (m.ty - m.y) * 0.05;
-            const mx = m.x - 0.5;  /* -0.5 to 0.5 */
-            const my = m.y - 0.5;
-
-            const time = t * 0.001;
-            const cols = Math.max(60, Math.floor(w / 12));
-
-            for (const r of ribbons) {
-                ctx.beginPath();
-                const baseY = r.y * h;
-
-                /* Draw top edge of ribbon */
-                for (let i = 0; i <= cols; i++) {
-                    const px = (i / cols) * w;
-                    const nx = i / cols;  /* 0-1 */
-
-                    /* layered sine waves for organic motion */
-                    const wave1 = Math.sin(nx * Math.PI * 2 * r.freq + time * r.speed) * r.amp * h;
-                    const wave2 = Math.sin(nx * Math.PI * 3.7 + time * r.speed * 0.7 + 1.3) * r.amp * h * 0.3;
-                    const wave3 = Math.cos(nx * Math.PI * 1.3 + time * r.speed * 1.3 + 2.7) * r.amp * h * 0.15;
-
-                    /* mouse influence — gentle displacement toward pointer */
-                    const distFactor = 1 - Math.abs(nx - (m.x)) * 1.5;
-                    const mouseOffset = Math.max(0, distFactor) * my * h * 0.08;
-
-                    const py = baseY + wave1 + wave2 + wave3 + mouseOffset;
-                    if (i === 0) ctx.moveTo(px, py);
-                    else ctx.lineTo(px, py);
-                }
-
-                /* Draw bottom edge in reverse to close the ribbon shape */
-                for (let i = cols; i >= 0; i--) {
-                    const px = (i / cols) * w;
-                    const nx = i / cols;
-
-                    const wave1 = Math.sin(nx * Math.PI * 2 * r.freq + time * r.speed + 0.5) * r.amp * h * 0.6;
-                    const wave2 = Math.sin(nx * Math.PI * 2.9 + time * r.speed * 0.5 + 0.8) * r.amp * h * 0.2;
-
-                    const distFactor = 1 - Math.abs(nx - (m.x)) * 1.5;
-                    const mouseOffset = Math.max(0, distFactor) * my * h * 0.06;
-
-                    const py = baseY + r.width * h + wave1 + wave2 + mouseOffset;
-                    ctx.lineTo(px, py);
-                }
-
-                ctx.closePath();
-
-                /* Gradient fill along the ribbon */
-                const [cr, cg, cb] = r.color;
-                const grad = ctx.createLinearGradient(0, baseY - r.amp * h, 0, baseY + r.width * h + r.amp * h);
-                grad.addColorStop(0, `rgba(${cr},${cg},${cb},0)`);
-                grad.addColorStop(0.3, `rgba(${cr},${cg},${cb},${r.opacity})`);
-                grad.addColorStop(0.5, `rgba(${cr},${cg},${cb},${r.opacity * 1.5})`);
-                grad.addColorStop(0.7, `rgba(${cr},${cg},${cb},${r.opacity})`);
-                grad.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
-                ctx.fillStyle = grad;
-                ctx.fill();
-            }
-
-            /* central glow that subtly follows mouse */
-            const glowX = w * 0.5 + mx * w * 0.15;
-            const glowY = h * 0.35 + my * h * 0.1;
-            const glowR = Math.min(w, h) * 0.45;
-            const glow = ctx.createRadialGradient(glowX, glowY, 0, glowX, glowY, glowR);
-            if (isDark) {
-                glow.addColorStop(0, 'rgba(16,185,129,0.06)');
-                glow.addColorStop(0.5, 'rgba(6,182,212,0.03)');
-            } else {
-                glow.addColorStop(0, 'rgba(16,185,129,0.1)');
-                glow.addColorStop(0.5, 'rgba(6,182,212,0.05)');
-            }
-            glow.addColorStop(1, 'rgba(0,0,0,0)');
-            ctx.fillStyle = glow;
-            ctx.fillRect(0, 0, w, h);
-
-            animRef.current = requestAnimationFrame(draw);
-        }
-
-        resize();
-        animRef.current = requestAnimationFrame(draw);
-        window.addEventListener('resize', resize, { passive: true });
-
-        function handleMouse(e) {
-            const rect = canvas.getBoundingClientRect();
-            mouseRef.current.tx = (e.clientX - rect.left) / rect.width;
-            mouseRef.current.ty = (e.clientY - rect.top) / rect.height;
-        }
-        canvas.addEventListener('mousemove', handleMouse, { passive: true });
-
-        return () => {
-            if (animRef.current) cancelAnimationFrame(animRef.current);
-            window.removeEventListener('resize', resize);
-            canvas.removeEventListener('mousemove', handleMouse);
-        };
-    }, [theme]);
 
-    return (
-        <canvas
-            ref={canvasRef}
-            className="pointer-events-auto absolute inset-0 h-full w-full"
-            aria-hidden="true"
-        />
-    );
-}
+/* ── Hero ────────────────────────────────────────────────────────── */
 
 function Hero() {
-    const { theme } = useTheme();
     return (
-        <section className="relative flex min-h-[100vh] flex-col items-center justify-center px-6 pt-20 pb-16 text-center overflow-hidden">
-            <HeroBackground />
+        <section className="relative isolate overflow-hidden px-5 sm:px-6 pt-28 pb-20 sm:pt-36 sm:pb-28">
+            {/* Static gradient mesh — pure CSS, no JS, no canvas. */}
+            <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10">
+                <div className="absolute inset-0 grid-bg opacity-60" />
+                <div
+                    className="absolute left-1/2 top-[-10%] h-[620px] w-[620px] -translate-x-1/2 rounded-full opacity-40 dark:opacity-60"
+                    style={{
+                        background: 'radial-gradient(closest-side, rgba(16,185,129,0.25), transparent 70%)',
+                    }}
+                />
+                <div
+                    className="absolute right-[-10%] top-[30%] h-[420px] w-[420px] rounded-full opacity-30 dark:opacity-50"
+                    style={{
+                        background: 'radial-gradient(closest-side, rgba(59,130,246,0.22), transparent 70%)',
+                    }}
+                />
+                <div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-white dark:to-[#0a0a0b]" />
+            </div>
 
-            <div className="relative z-10 max-w-5xl">
-                <Reveal>
+            <div className="relative mx-auto max-w-4xl text-center">
+                <div className="reveal">
                     <a
-                        href="#agents"
-                        onClick={(e) => scrollToSection(e, 'agents')}
-                        aria-label="Pyxle: the framework AI coding agents love"
-                        className={`group mb-2 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium transition ${
-                            theme === 'dark'
-                                ? 'border-emerald-500/30 bg-gradient-to-r from-emerald-500/10 via-cyan-500/10 to-blue-500/10 text-emerald-300 hover:border-emerald-500/50'
-                                : 'border-emerald-500/40 bg-gradient-to-r from-emerald-50 via-cyan-50 to-blue-50 text-emerald-700 hover:border-emerald-500/60'
-                        }`}
+                        href="https://github.com/pyxle-framework/pyxle/releases"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="focus-ring inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium border-zinc-200 bg-white/60 text-zinc-700 hover:bg-white dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10 backdrop-blur transition-colors"
                     >
-                        <span aria-hidden="true">✨</span>
-                        The framework AI coding agents love
-                        <svg className="h-3.5 w-3.5 transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        <span className="inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                        Actively shipping — latest release
+                        <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 12h12" />
                         </svg>
                     </a>
-                    <Link
-                        href="/docs/guides/editor-setup"
-                        className={`group ml-2 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium transition ${
-                            theme === 'dark'
-                                ? 'border-purple-500/30 bg-purple-500/10 text-purple-300 hover:border-purple-500/50'
-                                : 'border-purple-500/40 bg-purple-50 text-purple-700 hover:border-purple-500/60'
-                        }`}
-                    >
-                        <span aria-hidden="true">🛠</span>
-                        VS Code Extension
-                        <span className={`rounded-full px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${
-                            theme === 'dark' ? 'bg-purple-500/20 text-purple-300' : 'bg-purple-100 text-purple-600'
-                        }`}>Beta</span>
-                    </Link>
-                    <div className="mb-6" />
-                </Reveal>
-
-                <Reveal delay={80}>
-                    <h1 className="text-4xl font-bold leading-[1.08] tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
-                        Stop splitting{' '}
-                        <br className="hidden sm:block" />
-                        <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
-                            backend and frontend
-                        </span>
-                    </h1>
-                </Reveal>
-
-                <Reveal delay={160}>
-                    <p className={`mx-auto mt-6 max-w-2xl text-base leading-relaxed sm:text-lg md:text-xl ${
-                        theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'
-                    }`}>
-                        Python server logic and React UI live in one{' '}
-                        <code className={`rounded px-1.5 py-0.5 text-sm font-mono text-emerald-500 ${
-                            theme === 'dark' ? 'bg-white/5' : 'bg-emerald-50'
-                        }`}>.pyxl</code>{' '}
-                        file. SSR, file routing, server actions — zero glue code.
-                    </p>
-                </Reveal>
-
-                <Reveal delay={240}>
-                    <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
-                        <Link
-                            href="/playground"
-                            className={`group inline-flex items-center gap-2 rounded-xl px-8 py-3.5 text-sm font-semibold transition shadow-lg ${
-                                theme === 'dark'
-                                    ? 'bg-white text-black hover:bg-zinc-200 shadow-white/10'
-                                    : 'bg-zinc-900 text-white hover:bg-zinc-700 shadow-zinc-900/20'
-                            }`}
-                        >
-                            Try the playground
-                            <svg className="h-4 w-4 transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                            </svg>
-                        </Link>
-                        <a
-                            href="https://github.com/pyxle-framework/pyxle"
-                            target="_blank"
-                            rel="noreferrer"
-                            className={`inline-flex items-center gap-2 rounded-xl border px-8 py-3.5 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 text-white hover:bg-white/5'
-                                    : 'border-zinc-300 text-zinc-900 hover:bg-zinc-50'
-                            }`}
-                        >
-                            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
-                                <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
-                            </svg>
-                            Star on GitHub
-                        </a>
-                    </div>
-                </Reveal>
-
-                {/* Inline mini code preview */}
-                <Reveal delay={350}>
-                    <div className={`mx-auto mt-14 max-w-lg rounded-xl border overflow-hidden text-left shadow-2xl ${
-                        theme === 'dark' ? 'border-white/10 bg-[#111113] shadow-black/40' : 'border-zinc-200 bg-[#1a1a2e] shadow-zinc-400/20'
-                    }`}>
-                        <div className={`flex items-center gap-2 border-b px-4 py-2.5 ${
-                            theme === 'dark' ? 'border-white/5' : 'border-zinc-700/30'
-                        }`}>
-                            <div className="flex gap-1.5">
-                                <span className="h-2.5 w-2.5 rounded-full bg-red-500/80" />
-                                <span className="h-2.5 w-2.5 rounded-full bg-yellow-500/80" />
-                                <span className="h-2.5 w-2.5 rounded-full bg-green-500/80" />
-                            </div>
-                            <span className="text-xs text-zinc-500 font-mono ml-2">pages/index.pyxl</span>
-                        </div>
-                        <pre className="p-4 text-[11px] sm:text-xs leading-relaxed font-mono overflow-x-auto">
-                            <code>
-                                <span className="text-purple-400">@server</span>{'\n'}
-                                <span className="text-purple-400">async def</span> <span className="text-blue-400">load</span>(<span className="text-zinc-300">request</span>):{'\n'}
-                                {'    '}<span className="text-purple-400">return</span> {'{'}<span className="text-emerald-300">"user"</span>: <span className="text-purple-400">await</span> db.get_user(request){'}'}
-                                {'\n\n'}
-                                <span className="text-purple-400">export default function</span> <span className="text-cyan-400">Page</span>({'{'} <span className="text-zinc-300">data</span> {'}'}) {'{'}{'\n'}
-                                {'    '}<span className="text-purple-400">return</span> {'<'}<span className="text-red-400">h1</span>{'>'}<span className="text-zinc-300">Hello, {'{'}</span><span className="text-zinc-300">data.user.name</span><span className="text-zinc-300">{'}'}</span>{'</'}<span className="text-red-400">h1</span>{'>'}{'\n'}
-                                {'}'}
-                            </code>
-                        </pre>
-                    </div>
-                </Reveal>
-            </div>
-
-            <a
-                href="#why-pyxle"
-                onClick={(e) => scrollToSection(e, 'why-pyxle')}
-                className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce cursor-pointer"
-                aria-label="Scroll to content"
-            >
-                <svg className={`h-5 w-5 transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-                </svg>
-            </a>
-        </section>
-    );
-}
-
-/* ── why pyxle (comparison) ──────────────────────────────── */
-
-const COMPARISONS = [
-    {
-        problem: "Backend + frontend",
-        traditional: "2 repos, REST API glue, separate deploys",
-        pyxle: "One .pyxl file per route",
-    },
-    {
-        problem: "Data fetching",
-        traditional: "fetch(), loading states, error handling",
-        pyxle: "@server loader \u2192 data becomes React props",
-    },
-    {
-        problem: "Server mutations",
-        traditional: "API routes + fetch + form handling",
-        pyxle: "@action + useAction() \u2014 one line",
-    },
-    {
-        problem: "Deployment",
-        traditional: "Build frontend, deploy backend, configure CORS",
-        pyxle: "pyxle build && pyxle serve",
-    },
-];
-
-function WhyPyxle() {
-    const { theme } = useTheme();
-    return (
-        <section id="why-pyxle" className="relative px-6 py-24">
-            <div className="mx-auto max-w-5xl">
-                <Reveal>
-                    <div className="text-center mb-14">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Why Pyxle</p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                            One file replaces your entire stack
-                        </h2>
-                        <p className={`mx-auto mt-4 max-w-2xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            No more context-switching between Python backend and React frontend.
-                            Pyxle unifies them in a single developer experience.
-                        </p>
-                    </div>
-                </Reveal>
-
-                <div className="space-y-4">
-                    {COMPARISONS.map((c, i) => (
-                        <Reveal key={c.problem} delay={i * 80}>
-                            <div className={`grid grid-cols-1 sm:grid-cols-[1fr_1fr_1fr] gap-4 rounded-xl border p-5 ${
-                                theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                            }`}>
-                                <div>
-                                    <p className={`text-xs font-semibold uppercase tracking-widest mb-1 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Problem</p>
-                                    <p className="text-sm font-semibold">{c.problem}</p>
-                                </div>
-                                <div>
-                                    <p className={`text-xs font-semibold uppercase tracking-widest mb-1 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Traditional</p>
-                                    <p className={`text-sm ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{c.traditional}</p>
-                                </div>
-                                <div>
-                                    <p className="text-xs font-semibold uppercase tracking-widest mb-1 text-emerald-400">With Pyxle</p>
-                                    <p className="text-sm font-medium text-emerald-400">{c.pyxle}</p>
-                                </div>
-                            </div>
-                        </Reveal>
-                    ))}
                 </div>
-            </div>
-        </section>
-    );
-}
-
-/* ── code showcase ────────────────────────────────────────── */
-
-const DEMO_CODE = `# pages/dashboard.pyxl
 
-from pyxle.runtime import server
+                <h1 className="reveal mt-6 text-balance text-4xl font-semibold leading-[1.05] tracking-tight sm:text-6xl md:text-7xl" style={{ animationDelay: '60ms' }}>
+                    Python + React
+                    <br />
+                    <span className="gradient-text">in one file.</span>
+                </h1>
 
-@server
-async def load_dashboard(request):
-    user = await db.get_user(request.state.user_id)
-    stats = await db.get_stats(user.id)
-    return {"user": user, "stats": stats}
-
-
-import React from 'react';
-import { Head, Link } from 'pyxle/client';
+                <p className="reveal mx-auto mt-6 max-w-xl text-pretty text-base sm:text-lg text-zinc-600 dark:text-zinc-400" style={{ animationDelay: '120ms' }}>
+                    The full-stack Python framework. Async server loaders, React UI, and server actions live together in a single <code className="rounded px-1.5 py-0.5 text-[0.85em] text-emerald-600 dark:text-emerald-400 bg-emerald-500/5 dark:bg-emerald-500/10">.pyxl</code> file. SSR and file routing come with it.
+                </p>
 
-export default function Dashboard({ data }) {
-    const { user, stats } = data;
-    return (
-        <main className="p-8">
-            <Head>
-                <title>Dashboard</title>
-                <meta name="robots" content="noindex" />
-            </Head>
-            <h1>Welcome back, {user.name}</h1>
-            <div className="grid grid-cols-3 gap-4">
-                {stats.map(s => (
-                    <div key={s.label} className="card">
-                        <span>{s.value}</span>
-                        <span>{s.label}</span>
+                <div className="reveal mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row" style={{ animationDelay: '180ms' }}>
+                    <Link
+                        href="/docs/getting-started/installation"
+                        className="focus-ring inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200 transition-colors"
+                    >
+                        Get started
+                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 12h12" />
+                        </svg>
+                    </Link>
+                    <div className="focus-within:ring-2 focus-within:ring-emerald-500/40 inline-flex items-center gap-2 rounded-lg border px-3.5 py-2 text-sm font-mono border-zinc-200 bg-white text-zinc-700 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300">
+                        <span className="text-zinc-400 dark:text-zinc-400 select-none">$</span>
+                        <span>pip install pyxle-framework</span>
+                        <CopyButton text="pip install pyxle-framework" label="Copy" />
                     </div>
-                ))}
-            </div>
-            <Link href="/settings">Settings</Link>
-        </main>
-    );
-}`;
-
-/* Simple token-based syntax highlighter for .pyxl code */
-function HighlightedCode({ code, lang = 'pyxl' }) {
-    const tokenizedLines = tokenizeBlock(code, lang);
-    return tokenizedLines.map((lineTokens, i) => (
-        <React.Fragment key={i}>
-            {lineTokens.map((tok, j) => (
-                <span key={j} className={tok.cls}>{tok.text}</span>
-            ))}
-            {'\n'}
-        </React.Fragment>
-    ));
-}
-
-function CodeShowcase() {
-    const { theme } = useTheme();
-    return (
-        <section id="code" className="relative px-6 py-24">
-            <style dangerouslySetInnerHTML={{ __html: HIGHLIGHT_CSS }} />
-            <div className="mx-auto max-w-6xl">
-                <div className="text-center mb-16">
-                    <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">
-                        One file. Full stack.
-                    </p>
-                    <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
-                        Server + Client in a single <code className="text-emerald-400">.pyxl</code>
-                    </h2>
-                    <p className={`mx-auto mt-4 max-w-xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                        Your async Python loader and React component live together. No API wiring, no boilerplate.
-                    </p>
                 </div>
 
-                <div className="relative mx-auto max-w-3xl">
-                    <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-emerald-500/10 via-cyan-500/10 to-blue-500/10 blur-xl" />
-                    <div className={`relative rounded-xl border overflow-hidden ${
-                        theme === 'dark' ? 'border-white/10 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-                    }`}>
-                        <div className={`flex items-center gap-2 border-b px-4 py-3 ${
-                            theme === 'dark' ? 'border-white/5' : 'border-zinc-700/30'
-                        }`}>
-                            <div className="flex gap-1.5">
-                                <span className="h-3 w-3 rounded-full bg-red-500/60" />
-                                <span className="h-3 w-3 rounded-full bg-yellow-500/60" />
-                                <span className="h-3 w-3 rounded-full bg-green-500/60" />
+                {/* Hero code card */}
+                <div className="reveal relative mx-auto mt-14 max-w-2xl" style={{ animationDelay: '260ms' }}>
+                    <div
+                        aria-hidden="true"
+                        className="pointer-events-none absolute -inset-8 -z-10 rounded-[32px] opacity-60"
+                        style={{ background: 'radial-gradient(closest-side, rgba(16,185,129,0.18), rgba(59,130,246,0.10) 60%, transparent 75%)' }}
+                    />
+                    <div className="overflow-hidden rounded-xl border text-left shadow-xl border-zinc-200 bg-[#0b0b0d] dark:border-white/10 dark:bg-[#0e0e10] dark:shadow-black/40">
+                        <div className="flex items-center gap-2 border-b px-4 py-2.5 border-white/5">
+                            <span className="flex gap-1.5" aria-hidden="true">
+                                <span className="h-2.5 w-2.5 rounded-full bg-zinc-600/80" />
+                                <span className="h-2.5 w-2.5 rounded-full bg-zinc-600/60" />
+                                <span className="h-2.5 w-2.5 rounded-full bg-zinc-600/40" />
+                            </span>
+                            <span className="ml-2 text-[11px] font-mono text-zinc-400">pages/dashboard.pyxl</span>
+                            <div className="ml-auto">
+                                <CopyButton text={HERO_CODE_TEXT} />
                             </div>
-                            <span className="ml-2 text-xs text-zinc-500 font-mono">pages/dashboard.pyxl</span>
-                        </div>
-                        <div className="relative">
-                            <CopyButton text={DEMO_CODE} />
-                            <pre className="overflow-x-auto p-4 sm:p-6 text-xs sm:text-sm leading-relaxed font-mono">
-                                <code><HighlightedCode code={DEMO_CODE} /></code>
-                            </pre>
                         </div>
+                        <PreTokenized lines={HERO_CODE} />
                     </div>
                 </div>
             </div>
@@ -768,87 +309,58 @@ function CodeShowcase() {
     );
 }
 
-/* ── features ─────────────────────────────────────────────── */
+
+/* ── Features (merged with hero code section feel) ───────────────── */
 
 const FEATURES = [
     {
-        title: "File-based routing",
-        desc: "Drop .pyxl files into pages/ and get routes instantly. Dynamic segments, catch-all routes, layouts, and route groups.",
-        icon: "M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0V6A2.25 2.25 0 016 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44H18A2.25 2.25 0 0120.25 9v.776",
-    },
-    {
-        title: "Async server loaders",
-        desc: "Fetch data with @server functions on Starlette. Return a dict and it becomes React props automatically.",
-        icon: "M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z",
-    },
-    {
-        title: "Server-side rendering",
-        desc: "Every page is server-rendered then hydrated. Fast first paint, great SEO, smooth interactivity.",
-        icon: "M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.455 2.456L21.75 6l-1.036.259a3.375 3.375 0 00-2.455 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z",
+        title: 'File-based routing',
+        desc: "Drop a .pyxl file in pages/ and it's a route. Dynamic segments, catch-alls, nested layouts.",
+        d: 'M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026M4.5 9.75V6A2.25 2.25 0 016.75 3.75h3.879a1.5 1.5 0 011.06.44l2.122 2.12a1.5 1.5 0 001.06.44h4.629A2.25 2.25 0 0121.75 9v.75',
     },
     {
-        title: "Vite-powered dev",
-        desc: "Instant hot module reloading via Vite. Tailwind CSS built in. Sub-second feedback loop.",
-        icon: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z",
+        title: 'Async server loaders',
+        desc: '@server functions run on Starlette. Return a dict — it becomes React props. No fetch wiring.',
+        d: 'M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7',
     },
     {
-        title: "Server actions",
-        desc: "Mutate data with @action decorators. Call from React via useAction() \u2014 type-safe POST handlers, zero glue code.",
-        icon: "M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5",
+        title: 'Server actions',
+        desc: 'Mutate data with @action. Call from React via useAction() — typed POST handlers, zero glue.',
+        d: 'M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5',
     },
     {
-        title: "Production ready",
-        desc: "CSRF protection, CORS, middleware, and hashed asset builds. Deploy anywhere Python runs.",
-        icon: "M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z",
+        title: 'SSR + Vite dev',
+        desc: 'Every page is server-rendered then hydrated. Instant HMR in dev, hashed assets in prod.',
+        d: 'M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z',
     },
 ];
 
-function FeatureIcon({ d }) {
-    return (
-        <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
-            <path strokeLinecap="round" strokeLinejoin="round" d={d} />
-        </svg>
-    );
-}
-
 function Features() {
-    const { theme } = useTheme();
     return (
-        <section id="features" className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] top-0 right-0 bg-emerald-600" />
-            <div className="relative z-10 mx-auto max-w-6xl">
-                <Reveal>
-                    <div className="text-center mb-16">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Features</p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
-                            Everything you need to ship
-                        </h2>
-                        <p className={`mx-auto mt-4 max-w-xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            Pyxle gives you the full stack in one cohesive toolkit. No glue code needed.
-                        </p>
-                    </div>
-                </Reveal>
-                <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <section id="features" className="relative px-5 sm:px-6 py-16 sm:py-20">
+            <div className="mx-auto max-w-6xl">
+                <div className="reveal text-center mb-12">
+                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">What{"'"}s in the box</p>
+                    <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">
+                        Everything you need, nothing you don{"'"}t.
+                    </h2>
+                </div>
+
+                <div className="grid gap-3 sm:gap-4 sm:grid-cols-2 lg:grid-cols-4">
                     {FEATURES.map((f, i) => (
-                        <Reveal key={f.title} delay={i * 70}>
-                            <div
-                                className={`group rounded-xl border p-6 transition h-full ${
-                                    theme === 'dark'
-                                        ? 'border-white/5 bg-white/[0.02] hover:border-emerald-500/20 hover:bg-emerald-500/[0.03]'
-                                        : 'border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50'
-                                }`}
-                            >
-                                <div className={`mb-4 inline-flex rounded-lg border p-2.5 text-emerald-400 transition ${
-                                    theme === 'dark'
-                                        ? 'border-white/10 bg-white/5 group-hover:border-emerald-500/30 group-hover:bg-emerald-500/10'
-                                        : 'border-zinc-200 bg-zinc-50 group-hover:border-emerald-500/30 group-hover:bg-emerald-50'
-                                }`}>
-                                    <FeatureIcon d={f.icon} />
-                                </div>
-                                <h3 className="text-lg font-semibold">{f.title}</h3>
-                                <p className={`mt-2 text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{f.desc}</p>
+                        <div
+                            key={f.title}
+                            className="reveal group rounded-xl border p-5 transition-colors border-zinc-200 bg-white hover:border-zinc-300 dark:border-white/5 dark:bg-white/[0.02] dark:hover:border-white/10"
+                            style={{ animationDelay: `${i * 60}ms` }}
+                        >
+                            <div className="mb-4 inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-emerald-600 dark:border-white/10 dark:bg-white/5 dark:text-emerald-400">
+                                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
+                                    <path strokeLinecap="round" strokeLinejoin="round" d={f.d} />
+                                </svg>
                             </div>
-                        </Reveal>
+                            <h3 className="text-[15px] font-semibold">{f.title}</h3>
+                            <p className="mt-1.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{f.desc}</p>
+                        </div>
                     ))}
                 </div>
             </div>
@@ -856,482 +368,160 @@ function Features() {
     );
 }
 
-/* ── performance ─────────────────────────────────────────── */
 
-const PERF_STATS = [
-    { value: "1,100+", unit: "req/s", label: "SSR Throughput", note: "Comparable to Next.js" },
-    { value: "20k+", unit: "req/s", label: "POST Handling", note: "1.8x faster than FastAPI" },
-    { value: "2ms", unit: "p50", label: "Latency", note: "JSON serialization" },
-    { value: "0", unit: "errors", label: "Under Load", note: "100 concurrent connections" },
-];
+/* ── Numbers strip (perf) ────────────────────────────────────────── */
 
-const PYTHON_COMPARISON = [
-    { name: "FastAPI",  rps: 8360, color: "bg-cyan-500",     pct: 100 },
-    { name: "Pyxle",   rps: 6256, color: "bg-emerald-500",  pct: 75 },
-    { name: "Flask",    rps: 3788, color: "bg-purple-500",   pct: 45 },
-    { name: "Django",   rps: 2787, color: "bg-yellow-500",   pct: 33 },
+const STATS = [
+    { value: '1,100+', unit: 'req/s', label: 'SSR throughput' },
+    { value: '20k+',   unit: 'req/s', label: 'POST handling'  },
+    { value: '2ms',    unit: 'p50',   label: 'JSON latency'    },
+    { value: '0',      unit: '',      label: 'Errors at 100c'  },
 ];
 
-function Performance() {
-    const { theme } = useTheme();
+function Numbers() {
     return (
-        <section id="performance" className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] bottom-0 left-0 bg-cyan-600" />
-            <div className="relative z-10 mx-auto max-w-6xl">
-                <div className="text-center mb-16">
-                    <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Performance</p>
-                    <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
-                        Built for production speed
-                    </h2>
-                    <p className={`mx-auto mt-4 max-w-2xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                        Full-stack features without the performance tax. Pyxle delivers SSR, file routing, and server actions while outperforming traditional Python frameworks.
-                    </p>
-                </div>
-
-                {/* Stats Grid */}
-                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-16">
-                    {PERF_STATS.map((s) => (
-                        <div
-                            key={s.label}
-                            className={`rounded-xl border p-6 text-center transition ${
-                                theme === 'dark'
-                                    ? 'border-white/5 bg-white/[0.02]'
-                                    : 'border-zinc-200 bg-white'
-                            }`}
-                        >
-                            <p className="text-3xl font-bold text-emerald-400">{s.value}<span className="text-lg ml-1 font-medium text-emerald-400/60">{s.unit}</span></p>
-                            <p className="mt-1 text-sm font-semibold">{s.label}</p>
-                            <p className={`mt-1 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{s.note}</p>
-                        </div>
-                    ))}
-                </div>
-
-                {/* Python Framework Comparison */}
-                <div className={`rounded-xl border p-6 sm:p-8 ${
-                    theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                }`}>
-                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-2">
-                        <div>
-                            <h3 className="text-lg font-semibold">Python Framework Comparison</h3>
-                            <p className={`text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Average requests/second across all API tests</p>
-                        </div>
-                        <span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${
-                            theme === 'dark' ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-emerald-200 bg-emerald-50 text-emerald-600'
-                        }`}>
-                            <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
-                            Pyxle is the only Python framework with React SSR
-                        </span>
-                    </div>
-                    <div className="space-y-4">
-                        {PYTHON_COMPARISON.map((fw) => (
-                            <div key={fw.name} className="flex items-center gap-4">
-                                <span className={`w-16 text-sm font-medium text-right ${fw.name === 'Pyxle' ? 'text-emerald-400' : theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                                    {fw.name}
-                                </span>
-                                <div className={`flex-1 h-8 rounded-lg overflow-hidden ${theme === 'dark' ? 'bg-white/5' : 'bg-zinc-100'}`}>
-                                    <div
-                                        className={`h-full rounded-lg ${fw.color} flex items-center justify-end pr-3 transition-all duration-700`}
-                                        style={{ width: `${fw.pct}%` }}
-                                    >
-                                        <span className="text-xs font-semibold text-white drop-shadow-sm">{fw.rps.toLocaleString()} req/s</span>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
+        <section className="relative px-5 sm:px-6 py-16 sm:py-20">
+            <div className="mx-auto max-w-6xl">
+                <div className="reveal flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end mb-8">
+                    <div>
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Performance</p>
+                        <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Fast where it matters.</h2>
                     </div>
-                    <p className={`mt-6 text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
-                        Benchmarked with autocannon (10 connections, 12s). Apple M3, Python 3.13, Node.js 24. All frameworks run production configs.{' '}
-                        <Link href="/benchmarks" className="text-emerald-400 hover:underline">See full methodology and results</Link>.
-                    </p>
-                </div>
-
-                <div className="mt-8 text-center">
                     <Link
                         href="/benchmarks"
-                        className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition ${
-                            theme === 'dark'
-                                ? 'border-white/10 text-white hover:bg-white/5'
-                                : 'border-zinc-300 text-zinc-900 hover:bg-zinc-50'
-                        }`}
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
                     >
-                        View detailed benchmarks
-                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                        Full benchmark methodology
+                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 12h12" />
                         </svg>
                     </Link>
                 </div>
-            </div>
-        </section>
-    );
-}
-
-/* ── how it works (visual architecture) ──────────────────── */
-
-const ARCH_STEPS = [
-    { label: ".pyxl File", desc: "Python + React in one file", icon: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z", color: "text-emerald-400" },
-    { label: "Compiler", desc: "Splits into server + client", icon: "M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l5.653-4.655m3.586-3.586l5.653-4.655a2.548 2.548 0 113.586 3.586l-4.655 5.653M11.42 15.17l3.586-3.586", color: "text-cyan-400" },
-    { label: "Starlette", desc: "Runs your Python loader", icon: "M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z", color: "text-purple-400" },
-    { label: "SSR + Hydrate", desc: "Full HTML, then interactive", icon: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z", color: "text-yellow-400" },
-];
 
-function HowItWorks() {
-    const { theme } = useTheme();
-    const arrow = (
-        <svg className={`h-5 w-5 shrink-0 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5" />
-        </svg>
-    );
-    const downArrow = (
-        <svg className={`h-5 w-5 mx-auto ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19 14l-7 7m0 0l-7-7" />
-        </svg>
-    );
-    return (
-        <section className="relative px-6 py-24 overflow-hidden">
-            <GradientOrb className="h-[500px] w-[500px] bottom-0 left-1/2 -translate-x-1/2 bg-purple-600" />
-            <div className="relative z-10 mx-auto max-w-4xl">
-                <Reveal>
-                    <div className="text-center mb-14">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Architecture</p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
-                            How Pyxle works
-                        </h2>
-                        <p className={`mx-auto mt-4 max-w-2xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            Write one file. Pyxle compiles, serves, renders, and hydrates automatically.
-                        </p>
-                    </div>
-                </Reveal>
-
-                <Reveal delay={100}>
-                    {/* Desktop: horizontal flow with arrows */}
-                    <div className="hidden sm:flex items-center justify-center gap-3">
-                        {ARCH_STEPS.map((step, i) => (
-                            <React.Fragment key={step.label}>
-                                <div className={`flex-1 rounded-xl border p-5 text-center ${
-                                    theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                                }`}>
-                                    <div className={`mx-auto mb-2 inline-flex rounded-lg border p-2 ${step.color} ${
-                                        theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                    }`}>
-                                        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" d={step.icon} />
-                                        </svg>
-                                    </div>
-                                    <p className="text-sm font-semibold">{step.label}</p>
-                                    <p className={`mt-0.5 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{step.desc}</p>
-                                </div>
-                                {i < ARCH_STEPS.length - 1 && arrow}
-                            </React.Fragment>
-                        ))}
-                    </div>
-
-                    {/* Mobile: vertical flow with down arrows */}
-                    <div className="flex sm:hidden flex-col items-center gap-2">
-                        {ARCH_STEPS.map((step, i) => (
-                            <React.Fragment key={step.label}>
-                                <div className={`w-full rounded-xl border p-4 text-center ${
-                                    theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                                }`}>
-                                    <div className={`mx-auto mb-2 inline-flex rounded-lg border p-2 ${step.color} ${
-                                        theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                    }`}>
-                                        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                                            <path strokeLinecap="round" strokeLinejoin="round" d={step.icon} />
-                                        </svg>
-                                    </div>
-                                    <p className="text-sm font-semibold">{step.label}</p>
-                                    <p className={`mt-0.5 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{step.desc}</p>
-                                </div>
-                                {i < ARCH_STEPS.length - 1 && downArrow}
-                            </React.Fragment>
-                        ))}
-                    </div>
-                </Reveal>
+                <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-xl border sm:grid-cols-4 border-zinc-200 bg-zinc-200 dark:border-white/10 dark:bg-white/10">
+                    {STATS.map((s) => (
+                        <div
+                            key={s.label}
+                            className="bg-white dark:bg-[#0a0a0b] p-5 sm:p-6"
+                        >
+                            <dd className="flex items-baseline gap-1 text-2xl sm:text-3xl font-semibold tracking-tight tabular-nums">
+                                <span className="gradient-text">{s.value}</span>
+                                {s.unit && <span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">{s.unit}</span>}
+                            </dd>
+                            <dt className="mt-1 text-xs sm:text-sm text-zinc-600 dark:text-zinc-400">{s.label}</dt>
+                        </div>
+                    ))}
+                </dl>
             </div>
         </section>
     );
 }
 
-/* ── built for agents ────────────────────────────────────── */
 
-const AGENT_PROPS = [
-    {
-        title: "Python, the language LLMs know best",
-        desc: "Every frontier LLM has seen more Python than any other language. Your agent stays in its highest-confidence mode for the entire backend — and the entire AI SDK ecosystem (Anthropic, OpenAI, LangChain, instructor) is Python-first anyway.",
-        icon: "M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z",
-    },
-    {
-        title: "One file per feature, zero context-switching",
-        desc: "Loader, mutation, and React component in a single .pyxl file. An agent reads one file to understand the whole feature — no cross-file consistency risk, no TypeScript/Python type-sync drama, no 7-file edits for a CRUD screen.",
-        icon: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z",
-    },
-    {
-        title: "Five commands, zero magic",
-        desc: "init, dev, check, build, serve. That's the whole vocabulary. Decorators set one attribute and return — no DI, no metaclass, no runtime patching. The code you see is the code that runs, which means the agent's mental model matches reality.",
-        icon: "M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z",
-    },
+/* ── Built for AI agents (condensed) ─────────────────────────────── */
+
+const AGENT_POINTS = [
     {
-        title: "Machine-parseable errors from pyxle check",
-        desc: "[section] line N: message, one file per line, exit code 0 or 1. Every diagnostic is grep-friendly. One bad file never aborts the scan, and downstream JSX cascades are suppressed automatically. Your agent's edit → check → fix loop stays tight and high-signal.",
-        icon: "M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z",
+        title: 'Python the whole way',
+        desc: 'Frontier LLMs write Python with the highest confidence. Backend stays in their strongest mode, and the AI SDK ecosystem (Anthropic, OpenAI, LangChain) is Python-first anyway.',
     },
     {
-        title: "File-based routing = agent-friendly config",
-        desc: "ls pages/ tells the agent every route in the project. No urls.py to maintain, no router.ts to keep in sync. The filesystem is the configuration — which means zero tokens spent reading routing files.",
-        icon: "M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z",
+        title: 'One file per feature',
+        desc: 'Loader, mutation, and React UI in a single .pyxl file. One read = full feature understanding. No 7-file CRUD edits, no TS/Python type sync.',
     },
     {
-        title: "Fully documented architecture",
-        desc: "11 architecture deep-dives covering the parser, compiler, SSR, routing, build, runtime, and CLI. Point your agent at /docs/architecture once and it has the whole mental model — no need to grep source code to answer framework questions.",
-        icon: "M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25",
+        title: 'Machine-parseable errors',
+        desc: 'pyxle check emits [section] line N: message — one diagnostic per line, exit 0/1. Tight edit → check → fix loops with grep-friendly output.',
     },
 ];
 
-function BuiltForAgents() {
-    const { theme } = useTheme();
+function ForAgents() {
     return (
-        <section id="agents" className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] top-20 right-0 bg-emerald-600" />
-            <GradientOrb className="h-[400px] w-[400px] bottom-10 left-10 bg-cyan-500" />
-            <div className="relative z-10 mx-auto max-w-6xl">
-                <Reveal>
-                    <div className="text-center mb-14">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">
-                            For AI coding agents
-                        </p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                            The framework{' '}
-                            <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">
-                                AI agents love
-                            </span>
-                        </h2>
-                        <p className={`mx-auto mt-5 max-w-2xl text-base sm:text-lg leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            Python backend. React frontend. One file per feature. Tiny CLI surface, zero magic, grep-parseable errors. Built so Claude, Cursor, and Copilot can ship real features with a fraction of the context, files, and cross-language glue that traditional full-stack frameworks demand.
-                        </p>
-                    </div>
-                </Reveal>
-
-                {/* File-count comparison strip */}
-                <Reveal delay={100}>
-                    <div className={`mx-auto mb-14 max-w-3xl rounded-xl border overflow-hidden ${
-                        theme === 'dark' ? 'border-white/10 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                    }`}>
-                        <div className="grid grid-cols-1 sm:grid-cols-2 divide-y sm:divide-y-0 sm:divide-x divide-white/5">
-                            <div className="p-6 text-center">
-                                <p className={`text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
-                                    Typical stack
-                                </p>
-                                <p className="mt-2 text-3xl font-bold text-zinc-400">
-                                    4–7 files
-                                </p>
-                                <p className={`mt-1 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
-                                    per feature. Two languages.
-                                </p>
-                            </div>
-                            <div className="p-6 text-center">
-                                <p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
-                                    Pyxle
-                                </p>
-                                <p className="mt-2 text-3xl font-bold bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
-                                    1 file
-                                </p>
-                                <p className={`mt-1 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
-                                    Python + JSX colocated.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                </Reveal>
-
-                {/* Agent property cards */}
-                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-                    {AGENT_PROPS.map((prop, i) => (
-                        <Reveal key={prop.title} delay={i * 80}>
-                            <div className={`h-full rounded-xl border p-6 ${
-                                theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                            }`}>
-                                <div className={`inline-flex rounded-lg border p-2.5 text-emerald-400 mb-4 ${
-                                    theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                }`}>
-                                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d={prop.icon} />
-                                    </svg>
-                                </div>
-                                <h3 className="text-lg font-semibold mb-2">{prop.title}</h3>
-                                <p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                                    {prop.desc}
-                                </p>
-                            </div>
-                        </Reveal>
-                    ))}
+        <section id="agents" className="relative px-5 sm:px-6 py-16 sm:py-20">
+            <div className="mx-auto max-w-6xl">
+                <div className="reveal text-center mb-12">
+                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">For AI coding agents</p>
+                    <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">
+                        The framework <span className="gradient-text">AI agents love</span>.
+                    </h2>
+                    <p className="mx-auto mt-4 max-w-xl text-pretty text-sm sm:text-base text-zinc-600 dark:text-zinc-400">
+                        Tiny CLI surface, zero magic, one file per feature. Built so Claude, Cursor, and Copilot ship real features with a fraction of the context.
+                    </p>
                 </div>
 
-                {/* CTA to the long-form doc */}
-                <Reveal delay={500}>
-                    <div className="mt-14 text-center">
-                        <Link
-                            href="/docs/guides/for-ai-agents"
-                            className={`inline-flex items-center gap-2 rounded-lg border px-5 py-3 text-sm font-semibold transition-colors ${
-                                theme === 'dark'
-                                    ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300 hover:bg-emerald-500/20'
-                                    : 'border-emerald-500/40 bg-emerald-50 text-emerald-700 hover:bg-emerald-100'
-                            }`}
+                <div className="grid gap-3 sm:gap-4 md:grid-cols-3">
+                    {AGENT_POINTS.map((p, i) => (
+                        <div
+                            key={p.title}
+                            className="reveal rounded-xl border p-5 border-zinc-200 bg-white dark:border-white/5 dark:bg-white/[0.02]"
+                            style={{ animationDelay: `${i * 60}ms` }}
                         >
-                            Read the full case: Pyxle for AI coding agents
-                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                            </svg>
-                        </Link>
-                    </div>
-                </Reveal>
-            </div>
-        </section>
-    );
-}
-
-/* ── use cases ───────────────────────────────────────────── */
-
-const USE_CASES = [
-    {
-        title: "AI Dashboards",
-        desc: "Connect your ML models directly. Load predictions in @server, visualize in React. No API layer needed.",
-        code: "@server\nasync def load(req):\n    predictions = model.predict(data)\n    return {\"results\": predictions}",
-        icon: "M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5",
-    },
-    {
-        title: "Internal Tools",
-        desc: "Admin panels, CRUD apps, data viewers. Build in hours with Python, not days with separate frontend.",
-        code: "@action\nasync def approve(req):\n    body = await req.json()\n    await db.update(body[\"id\"])\n    return {\"ok\": True}",
-        icon: "M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l5.653-4.655m3.586-3.586l5.653-4.655a2.548 2.548 0 113.586 3.586l-4.655 5.653",
-    },
-    {
-        title: "Data Apps",
-        desc: "Pandas, NumPy, scikit-learn — use your entire Python ecosystem. The UI is just React on top.",
-        code: "@server\nasync def load(req):\n    df = pd.read_csv(\"data.csv\")\n    summary = df.describe().to_dict()\n    return {\"stats\": summary}",
-        icon: "M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125",
-    },
-];
-
-function UseCases() {
-    const { theme } = useTheme();
-    return (
-        <section className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] top-0 left-0 bg-blue-600" />
-            <div className="relative z-10 mx-auto max-w-6xl">
-                <Reveal>
-                    <div className="text-center mb-14">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Use Cases</p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                            Your Python. Your React UI.
-                            <br />
-                            <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">One framework.</span>
-                        </h2>
-                        <p className={`mx-auto mt-4 max-w-2xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            Build AI dashboards, internal tools, and data apps with the Python libraries you already know.
-                        </p>
-                    </div>
-                </Reveal>
-
-                <div className="grid gap-6 lg:grid-cols-3">
-                    {USE_CASES.map((uc, i) => (
-                        <Reveal key={uc.title} delay={i * 100}>
-                            <div className={`rounded-xl border p-6 h-full flex flex-col ${
-                                theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                            }`}>
-                                <div className={`inline-flex rounded-lg border p-2.5 text-emerald-400 mb-4 self-start ${
-                                    theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                }`}>
-                                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" d={uc.icon} />
-                                    </svg>
-                                </div>
-                                <h3 className="text-lg font-semibold mb-2">{uc.title}</h3>
-                                <p className={`text-sm leading-relaxed mb-4 flex-1 ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{uc.desc}</p>
-                                <div className={`rounded-lg border overflow-hidden ${
-                                    theme === 'dark' ? 'border-white/5 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-                                }`}>
-                                    <pre className="p-3 text-[10px] sm:text-xs leading-relaxed font-mono overflow-x-auto">
-                                        <code>{uc.code.split('\n').map((line, li) => {
-                                            const isDecorator = line.startsWith('@');
-                                            const isKeyword = line.trimStart().startsWith('async ') || line.trimStart().startsWith('return ') || line.trimStart().startsWith('await ');
-                                            const cls = isDecorator ? 'text-yellow-400' : isKeyword ? 'text-purple-400' : 'text-zinc-300';
-                                            return <React.Fragment key={li}><span className={cls}>{line}</span>{'\n'}</React.Fragment>;
-                                        })}</code>
-                                    </pre>
-                                </div>
-                            </div>
-                        </Reveal>
+                            <h3 className="text-[15px] font-semibold">{p.title}</h3>
+                            <p className="mt-1.5 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">{p.desc}</p>
+                        </div>
                     ))}
                 </div>
+
+                <div className="mt-10 text-center">
+                    <Link
+                        href="/docs/guides/for-ai-agents"
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
+                    >
+                        Read the full case
+                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 12h12" />
+                        </svg>
+                    </Link>
+                </div>
             </div>
         </section>
     );
 }
 
-/* ── demos ────────────────────────────────────────────────── */
+
+/* ── Demos ───────────────────────────────────────────────────────── */
 
 const DEMOS = [
-    {
-        name: "Flux",
-        tagline: "SaaS analytics dashboard",
-        desc: "MRR charts, customer CRUD, revenue forecast. Server-rendered from SQLite with aggregation in Python.",
-        href: "https://flux.pyxle.app",
-        preview: "chart",
-        accent: "from-indigo-500 to-purple-600",
-    },
-    {
-        name: "Chroma",
-        tagline: "Color palette generator",
-        desc: "Harmony algorithms and WCAG contrast analysis, powered by Python's colorsys standard library.",
-        href: "https://chroma.pyxle.app",
-        preview: "palette",
-        accent: "from-pink-500 to-orange-400",
-    },
-    {
-        name: "Glyph",
-        tagline: "Generative geometric art",
-        desc: "Spirographs, rose curves, and mandalas. Each point computed server-side with math.sin and math.cos.",
-        href: "https://glyph.pyxle.app",
-        preview: "spiro",
-        accent: "from-violet-500 to-cyan-400",
-    },
+    { name: 'Flux',   tagline: 'SaaS analytics',   href: 'https://flux.pyxle.app',   kind: 'chart',   gradient: 'from-indigo-500 to-purple-600' },
+    { name: 'Chroma', tagline: 'Color palette',    href: 'https://chroma.pyxle.app', kind: 'palette', gradient: 'from-pink-500 to-orange-400' },
+    { name: 'Glyph',  tagline: 'Generative art',   href: 'https://glyph.pyxle.app',  kind: 'spiro',   gradient: 'from-violet-500 to-cyan-400' },
 ];
 
-function DemoPreview({ kind, accent }) {
-    if (kind === "palette") {
+function DemoPreview({ kind, gradient }) {
+    if (kind === 'palette') {
         return (
-            <div className="flex h-28 w-full">
-                {["#FF6B6B", "#FF8E72", "#FFA45B", "#FFD166", "#F4E285"].map((c, i) => (
+            <div className="flex h-24 w-full" aria-hidden="true">
+                {['#FF6B6B', '#FF8E72', '#FFA45B', '#FFD166', '#F4E285'].map((c, i) => (
                     <div key={i} className="flex-1" style={{ backgroundColor: c }} />
                 ))}
             </div>
         );
     }
-    if (kind === "chart") {
+    if (kind === 'chart') {
         const heights = [42, 58, 66, 54, 78, 72, 90];
         return (
-            <div className="flex h-28 w-full items-end gap-1 bg-[#111318] px-4 py-3">
+            <div className="flex h-24 w-full items-end gap-1 bg-[#0e0f14] px-4 py-3" aria-hidden="true">
                 {heights.map((h, i) => (
                     <div
                         key={i}
-                        className={`flex-1 rounded-t bg-gradient-to-t ${accent}`}
-                        style={{ height: `${h}%`, opacity: 0.6 + (i / heights.length) * 0.4 }}
+                        className={`flex-1 rounded-t bg-gradient-to-t ${gradient}`}
+                        style={{ height: `${h}%`, opacity: 0.55 + (i / heights.length) * 0.45 }}
                     />
                 ))}
             </div>
         );
     }
-    /* spiro */
+    // spiro
     const spiroPath = Array.from({ length: 720 }, (_, i) => {
         const t = (i * Math.PI) / 40;
         const R = 45, r = 13, d = 28;
         const x = (R - r) * Math.cos(t) + d * Math.cos(((R - r) * t) / r);
         const y = (R - r) * Math.sin(t) - d * Math.sin(((R - r) * t) / r);
-        return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`;
-    }).join(" ");
+        return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
+    }).join(' ');
     return (
-        <div className="h-28 w-full bg-[#08080c] flex items-center justify-center">
-            <svg viewBox="0 0 120 120" className="h-full w-auto py-1">
+        <div className="h-24 w-full bg-[#08080c] flex items-center justify-center" aria-hidden="true">
+            <svg viewBox="0 0 120 120" className="h-full w-auto py-1" role="img" aria-label="">
                 <defs>
                     <linearGradient id="spiro-grad" x1="0" y1="0" x2="1" y2="1">
                         <stop offset="0%" stopColor="#a78bfa" />
@@ -1347,67 +537,51 @@ function DemoPreview({ kind, accent }) {
 }
 
 function Demos() {
-    const { theme } = useTheme();
     return (
-        <section id="demos" className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] top-0 right-0 bg-purple-600" />
-            <div className="relative z-10 mx-auto max-w-6xl">
-                <Reveal>
-                    <div className="text-center mb-14">
-                        <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Live Demos</p>
-                        <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
-                            See Pyxle
-                            {' '}
-                            <span className="bg-gradient-to-r from-emerald-400 via-cyan-400 to-blue-500 bg-clip-text text-transparent">in action</span>
-                        </h2>
-                        <p className={`mx-auto mt-4 max-w-2xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                            Three fully functional apps, each built with Pyxle. Click, interact, break things — they're yours to explore.
-                        </p>
+        <section className="relative px-5 sm:px-6 py-16 sm:py-20">
+            <div className="mx-auto max-w-6xl">
+                <div className="reveal flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end mb-8">
+                    <div>
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Showcase</p>
+                        <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Apps built with Pyxle.</h2>
+                    </div>
+                    <a
+                        href="https://github.com/pyxle-framework/pyxle-demos"
+                        target="_blank"
+                        rel="noreferrer"
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
+                    >
+                        Source on GitHub
+                        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5-5 5M6 12h12" />
+                        </svg>
+                    </a>
+                </div>
+
+                <div className="grid gap-3 sm:gap-4 md:grid-cols-3">
+                    {DEMOS.map((d, i) => (
                         <a
-                            href="https://github.com/pyxle-framework/pyxle-demos"
+                            key={d.name}
+                            href={d.href}
                             target="_blank"
                             rel="noreferrer"
-                            className={`inline-flex items-center gap-1.5 mt-3 text-sm font-medium transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-500 hover:text-zinc-900'}`}
+                            className="reveal focus-ring group flex flex-col overflow-hidden rounded-xl border transition-colors border-zinc-200 bg-white hover:border-zinc-300 dark:border-white/5 dark:bg-white/[0.02] dark:hover:border-white/10"
+                            style={{ animationDelay: `${i * 70}ms` }}
                         >
-                            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" /></svg>
-                            View source on GitHub
-                        </a>
-                    </div>
-                </Reveal>
-
-                <div className="grid gap-6 lg:grid-cols-3">
-                    {DEMOS.map((demo, i) => (
-                        <Reveal key={demo.name} delay={i * 100}>
-                            <a
-                                href={demo.href}
-                                target="_blank"
-                                rel="noreferrer"
-                                className={`group flex h-full flex-col overflow-hidden rounded-xl border transition-all duration-300 hover:-translate-y-1 ${
-                                    theme === 'dark'
-                                        ? 'border-white/5 bg-white/[0.02] hover:border-white/10 hover:shadow-2xl hover:shadow-purple-500/10'
-                                        : 'border-zinc-200 bg-white hover:border-zinc-300 hover:shadow-xl'
-                                }`}
-                            >
-                                <DemoPreview kind={demo.preview} accent={demo.accent} />
-                                <div className="flex flex-1 flex-col p-6">
-                                    <div className="mb-2 flex items-baseline gap-2">
-                                        <h3 className="text-lg font-semibold">{demo.name}</h3>
-                                        <span className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-500'}`}>
-                                            {demo.tagline}
-                                        </span>
-                                    </div>
-                                    <p className={`flex-1 text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                                        {demo.desc}
-                                    </p>
-                                    <div className={`mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-emerald-400 transition-transform group-hover:translate-x-0.5`}>
-                                        Try it live
-                                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
-                                            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                                        </svg>
-                                    </div>
+                            <DemoPreview kind={d.kind} gradient={d.gradient} />
+                            <div className="p-5">
+                                <div className="flex items-baseline gap-2">
+                                    <h3 className="text-[15px] font-semibold">{d.name}</h3>
+                                    <span className="text-xs text-zinc-500 dark:text-zinc-400">{d.tagline}</span>
                                 </div>
-                            </a>
-                        </Reveal>
+                                <div className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 transition-transform group-hover:translate-x-0.5">
+                                    Try it live
+                                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                                    </svg>
+                                </div>
+                            </div>
+                        </a>
                     ))}
                 </div>
             </div>
@@ -1415,60 +589,26 @@ function Demos() {
     );
 }
 
-/* ── get started ──────────────────────────────────────────── */
+
+/* ── Get started + Newsletter (merged) ───────────────────────────── */
 
 const INSTALL_STEPS = [
-    { label: "Install Pyxle", cmd: "pip install pyxle-framework" },
-    { label: "Create a project", cmd: "pyxle init my-app && cd my-app" },
-    { label: "Install dependencies", cmd: "pyxle install" },
-    { label: "Start building", cmd: "pyxle dev" },
+    { cmd: 'pip install pyxle-framework' },
+    { cmd: 'pyxle init my-app && cd my-app' },
+    { cmd: 'pyxle install' },
+    { cmd: 'pyxle dev' },
 ];
 
 function GetStarted() {
-    const { theme } = useTheme();
-    return (
-        <section id="get-started" className="relative overflow-hidden px-6 py-24">
-            <GradientOrb className="h-[500px] w-[500px] bottom-0 left-1/2 -translate-x-1/2 bg-blue-600" />
-            <div className="relative z-10 mx-auto max-w-3xl text-center">
-                <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">Get started</p>
-                <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">
-                    Up and running in seconds
-                </h2>
-                <p className={`mx-auto mt-4 max-w-xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                    Install from git, scaffold a project, and start the dev server.
-                </p>
-                <div className="mt-10 space-y-4 text-left">
-                    {INSTALL_STEPS.map((step) => (
-                        <div key={step.cmd} className={`relative rounded-lg border p-4 ${
-                            theme === 'dark' ? 'border-white/10 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-                        }`}>
-                            <CopyButton text={step.cmd} />
-                            <p className="mb-1 text-xs font-medium text-zinc-500 uppercase tracking-wider">
-                                {step.label}
-                            </p>
-                            <code className="text-sm font-mono text-emerald-400 break-all">$ {step.cmd}</code>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-}
-
-/* ── newsletter ────────────────────────────────────────────── */
-
-function Newsletter() {
-    const { theme } = useTheme();
-    const subscribe = useAction("subscribe_newsletter");
+    const subscribe = useAction('subscribe_newsletter');
     const [email, setEmail] = useState('');
-    const [status, setStatus] = useState(null); // 'success' | 'error'
+    const [status, setStatus] = useState(null);
     const [message, setMessage] = useState('');
 
     const handleSubmit = useCallback(async (e) => {
         e.preventDefault();
         setStatus(null);
         setMessage('');
-
         const result = await subscribe({ email });
         if (result.ok) {
             setStatus('success');
@@ -1481,148 +621,124 @@ function Newsletter() {
     }, [email, subscribe]);
 
     return (
-        <section className="relative px-6 py-24">
-            <div className="mx-auto max-w-2xl text-center">
-                <div className="inline-flex items-center gap-2 mb-6">
-                    <span className="relative flex h-2 w-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
-                    </span>
-                    <span className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-500'}`}>
-                        Actively shipping
-                    </span>
-                </div>
-                <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-                    Stay in the loop
-                </h2>
-                <p className={`mt-4 text-lg leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
-                    Get notified about new releases, features, and the occasional deep dive into building with Pyxle.
-                </p>
-
-                <form onSubmit={handleSubmit} className="mt-8 flex flex-col sm:flex-row items-center gap-3 justify-center">
-                    <div className="relative w-full sm:w-auto sm:flex-1 max-w-sm">
-                        <input
-                            type="email"
-                            value={email}
-                            onChange={(e) => { setEmail(e.target.value); setStatus(null); }}
-                            placeholder="you@example.com"
-                            required
-                            className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition placeholder:text-zinc-500 focus:ring-2 focus:ring-emerald-500/40 ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/5 text-white'
-                                    : 'border-zinc-300 bg-white text-zinc-900'
-                            }`}
-                        />
+        <section className="relative px-5 sm:px-6 py-16 sm:py-20">
+            <div className="mx-auto max-w-6xl">
+                <div className="grid gap-10 lg:grid-cols-2 lg:gap-14">
+                    {/* Install steps */}
+                    <div className="reveal">
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Get started</p>
+                        <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Four commands.</h2>
+                        <p className="mt-3 max-w-md text-sm sm:text-base text-zinc-600 dark:text-zinc-400">
+                            Install, scaffold, run. The whole CLI vocabulary fits on one screen.
+                        </p>
+                        <ol className="mt-6 space-y-2">
+                            {INSTALL_STEPS.map((step, i) => (
+                                <li
+                                    key={step.cmd}
+                                    className="flex items-center gap-3 rounded-lg border px-3.5 py-2.5 font-mono text-[13px] border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.02]"
+                                >
+                                    <span className="font-sans text-[11px] font-medium text-zinc-400 dark:text-zinc-600 tabular-nums w-4">{i + 1}</span>
+                                    <span className="text-zinc-400 dark:text-zinc-400 select-none">$</span>
+                                    <span className="flex-1 truncate text-zinc-800 dark:text-zinc-200">{step.cmd}</span>
+                                    <CopyButton text={step.cmd} />
+                                </li>
+                            ))}
+                        </ol>
+                        <div className="mt-6 flex flex-wrap gap-2">
+                            <Link
+                                href="/docs"
+                                className="focus-ring inline-flex items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm font-medium border-zinc-200 bg-white hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors"
+                            >
+                                Read the docs
+                            </Link>
+                            <Link
+                                href="/playground"
+                                className="focus-ring inline-flex items-center gap-1.5 rounded-lg border px-3.5 py-2 text-sm font-medium border-zinc-200 bg-white hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10 transition-colors"
+                            >
+                                Try the playground
+                            </Link>
+                        </div>
                     </div>
-                    <button
-                        type="submit"
-                        disabled={subscribe.pending}
-                        className={`shrink-0 rounded-lg px-6 py-3 text-sm font-semibold transition ${
-                            subscribe.pending
-                                ? 'opacity-60 cursor-not-allowed'
-                                : 'hover:opacity-90'
-                        } bg-emerald-500 text-white`}
-                    >
-                        {subscribe.pending ? (
-                            <span className="flex items-center gap-2">
-                                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                                </svg>
-                                Subscribing...
-                            </span>
-                        ) : 'Subscribe'}
-                    </button>
-                </form>
 
-                {status && (
-                    <p className={`mt-4 text-sm font-medium transition-opacity ${
-                        status === 'success' ? 'text-emerald-400' : 'text-red-400'
-                    }`}>
-                        {message}
-                    </p>
-                )}
-
-                <p className={`mt-6 text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
-                    No spam, ever. Unsubscribe anytime.
-                </p>
-                <p className={`mt-2 text-xs ${theme === 'dark' ? 'text-zinc-700' : 'text-zinc-400'}`}>
-                    This form is a live{' '}
-                    <Link
-                        href="/docs/core-concepts/server-actions"
-                        className="underline decoration-dotted underline-offset-2 hover:text-emerald-400 transition"
-                    >
-                        @action
-                    </Link>{' '}
-                    demo — powered by Pyxle.
-                </p>
+                    {/* Newsletter */}
+                    <div className="reveal" style={{ animationDelay: '80ms' }}>
+                        <div className="relative overflow-hidden rounded-xl border p-6 sm:p-7 border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.03]">
+                            <div
+                                aria-hidden="true"
+                                className="pointer-events-none absolute -right-20 -top-20 h-56 w-56 rounded-full opacity-40"
+                                style={{ background: 'radial-gradient(closest-side, rgba(16,185,129,0.25), transparent 70%)' }}
+                            />
+                            <div className="relative">
+                                <div className="inline-flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+                                    <span className="relative flex h-2 w-2" aria-hidden="true">
+                                        <span className="absolute inset-0 inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" />
+                                        <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+                                    </span>
+                                    Stay in the loop
+                                </div>
+                                <h3 className="mt-3 text-xl sm:text-2xl font-semibold tracking-tight">Release notes. Deep dives. No spam.</h3>
+                                <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+                                    This form is a live <Link href="/docs/core-concepts/server-actions" className="underline decoration-dotted underline-offset-2 hover:text-emerald-600 dark:hover:text-emerald-400">@action</Link> — powered by Pyxle itself.
+                                </p>
+                                <form onSubmit={handleSubmit} className="mt-5 flex flex-col gap-2 sm:flex-row">
+                                    <label htmlFor="newsletter-email" className="sr-only">Email address</label>
+                                    <input
+                                        id="newsletter-email"
+                                        type="email"
+                                        value={email}
+                                        onChange={(e) => { setEmail(e.target.value); setStatus(null); }}
+                                        placeholder="you@example.com"
+                                        required
+                                        autoComplete="email"
+                                        className="focus-ring w-full rounded-lg border px-3.5 py-2.5 text-sm outline-none placeholder:text-zinc-400 dark:placeholder:text-zinc-600 border-zinc-200 bg-white text-zinc-900 focus:border-emerald-500/50 dark:border-white/10 dark:bg-black/20 dark:text-white"
+                                    />
+                                    <button
+                                        type="submit"
+                                        disabled={subscribe.pending}
+                                        className="focus-ring shrink-0 rounded-lg bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-zinc-950 hover:bg-emerald-400 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+                                    >
+                                        {subscribe.pending ? 'Subscribing\u2026' : 'Subscribe'}
+                                    </button>
+                                </form>
+                                <div className="mt-3 min-h-[1.25rem] text-sm" aria-live="polite">
+                                    {status === 'success' && <p className="text-emerald-600 dark:text-emerald-400">{message}</p>}
+                                    {status === 'error'   && <p className="text-red-500 dark:text-red-400">{message}</p>}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </section>
     );
 }
 
-/* ── footer ───────────────────────────────────────────────── */
+
+/* ── Footer ──────────────────────────────────────────────────────── */
 
 function Footer() {
-    const { theme } = useTheme();
     return (
-        <footer className={`border-t px-6 py-12 ${theme === 'dark' ? 'border-white/5' : 'border-zinc-200'}`}>
-            <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 sm:flex-row">
+        <footer className="border-t border-zinc-200 dark:border-white/5 px-5 sm:px-6 py-10">
+            <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-5 sm:flex-row">
                 <div className="flex items-center gap-3">
-                    <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-6 w-6 opacity-50" />
-                    <span className={`text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Pyxle Framework</span>
-                </div>
-                <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2">
-                    <Link href="/docs"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        Docs
-                    </Link>
-                    <Link href="/docs/faq"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        FAQ
-                    </Link>
-                    <Link href="/playground"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        Playground
-                    </Link>
-                    <Link href="/benchmarks"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        Benchmarks
-                    </Link>
-                    <a href="https://github.com/pyxle-framework/pyxle-demos" target="_blank" rel="noreferrer"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        Demos
-                    </a>
-                    <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        GitHub
-                    </a>
-                    <a href="https://github.com/pyxle-framework/pyxle/issues" target="_blank" rel="noreferrer"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>
-                        Issues
-                    </a>
+                    <img src="/branding/pyxle-mark.svg" alt="" width="20" height="20" className="h-5 w-5 opacity-70" />
+                    <span className="text-sm text-zinc-500 dark:text-zinc-400">Pyxle Framework — MIT</span>
                 </div>
-            </div>
-            <div className={`mx-auto max-w-6xl mt-8 pt-6 border-t text-center ${
-                theme === 'dark' ? 'border-white/5' : 'border-zinc-100'
-            }`}>
-                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
-                    This site is built with Pyxle.{' '}
-                    <a
-                        href="https://github.com/pyxle-framework/pyxle-dev"
-                        target="_blank"
-                        rel="noreferrer"
-                        className="underline decoration-dotted underline-offset-2 hover:text-emerald-400 transition"
-                    >
-                        View source
-                    </a>
-                </p>
+                <nav className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2" aria-label="Footer">
+                    <Link href="/docs" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">Docs</Link>
+                    <Link href="/docs/faq" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">FAQ</Link>
+                    <Link href="/playground" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">Playground</Link>
+                    <Link href="/benchmarks" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">Benchmarks</Link>
+                    <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">GitHub</a>
+                    <a href="https://github.com/pyxle-framework/pyxle/issues" target="_blank" rel="noreferrer" className="text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">Issues</a>
+                </nav>
             </div>
         </footer>
     );
 }
 
-/* ── page ─────────────────────────────────────────────────── */
+
+/* ── Page ────────────────────────────────────────────────────────── */
 
 export const slots = {};
 export const createSlots = () => slots;
@@ -1632,32 +748,29 @@ export default function Page({ data }) {
     return (
         <>
             <Head>
-                <title>Pyxle - Stop Splitting Backend and Frontend</title>
-                <meta name="description" content="Python server logic and React UI in one .pyxl file. SSR, file routing, server actions — zero glue code." />
+                <title>Pyxle — Python + React in one file</title>
+                <meta name="description" content="The full-stack Python framework. Async server loaders, React UI, and server actions in a single .pyxl file. SSR, file-based routing, zero glue code." />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <meta name="theme-color" content="#0a0a0b" />
                 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="preconnect" href="https://fonts.googleapis.com" />
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
-                <meta property="og:title" content="Pyxle - Stop Splitting Backend and Frontend" />
-                <meta property="og:description" content="Python + React in one file. SSR, routing, actions — zero glue." />
-                <meta property="og:image" content="https://pyxle.dev/branding/og-default.png" />
+                <link rel="alternate icon" href="/favicon.ico" />
+                <meta property="og:title" content="Pyxle — Python + React in one file" />
+                <meta property="og:description" content="The full-stack Python framework. Python loaders, React UI, server actions — zero glue code." />
                 <meta property="og:type" content="website" />
+                <meta property="og:url" content="https://pyxle.dev" />
+                <meta property="og:image" content="https://pyxle.dev/branding/og-default.png" />
                 <meta name="twitter:card" content="summary_large_image" />
                 <meta name="twitter:image" content="https://pyxle.dev/branding/og-default.png" />
             </Head>
             <Nav version={version} />
-            <Hero />
-            <WhyPyxle />
-            <CodeShowcase />
-            <Features />
-            <Performance />
-            <HowItWorks />
-            <BuiltForAgents />
-            <UseCases />
-            <Demos />
-            <GetStarted />
-            <Newsletter />
+            <main id="main">
+                <Hero />
+                <Features />
+                <Numbers />
+                <ForAgents />
+                <Demos />
+                <GetStarted />
+            </main>
             <Footer />
         </>
     );
diff --git a/pages/layout.pyxl b/pages/layout.pyxl
index ecd41a7..76b670f 100644
--- a/pages/layout.pyxl
+++ b/pages/layout.pyxl
@@ -10,30 +10,30 @@ export function useTheme() {
 export const slots = {};
 export const createSlots = () => slots;
 
-export default function RootLayout({ children }) {
-    const [theme, setTheme] = useState('dark');
+const THEME_BOOT = `(function(){try{var t=localStorage.getItem('pyxle-theme');if(t!=='light'&&t!=='dark')t='dark';var c=document.documentElement.classList;c.remove('light','dark');c.add(t);}catch(e){document.documentElement.classList.add('dark');}})();`;
 
-    useEffect(() => {
-        const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('pyxle-theme') : null;
-        if (stored === 'light' || stored === 'dark') setTheme(stored);
-    }, []);
+function readInitialTheme() {
+    if (typeof document === 'undefined') return 'dark';
+    return document.documentElement.classList.contains('light') ? 'light' : 'dark';
+}
+
+export default function RootLayout({ children }) {
+    const [theme, setTheme] = useState(readInitialTheme);
 
     useEffect(() => {
-        document.documentElement.classList.remove('light', 'dark');
-        document.documentElement.classList.add(theme);
-        // Use `overflow-x: clip` (NOT `hidden`) so that descendants with
-        // `position: sticky` keep working. `hidden` creates a new scroll
-        // container which breaks sticky; `clip` prevents horizontal
-        // overflow the same way visually without breaking sticky.
+        const c = document.documentElement.classList;
+        c.remove('light', 'dark');
+        c.add(theme);
         document.documentElement.style.overflowX = 'clip';
-        if (typeof localStorage !== 'undefined') localStorage.setItem('pyxle-theme', theme);
+        try { localStorage.setItem('pyxle-theme', theme); } catch(e) {}
     }, [theme]);
 
-    const toggle = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
+    const toggle = () => setTheme(t => (t === 'dark' ? 'light' : 'dark'));
 
     return (
         <ThemeContext.Provider value={{ theme, toggle }}>
-            <div className={`min-h-screen overflow-x-clip antialiased transition-colors duration-300 ${theme === 'dark' ? 'bg-[#0a0a0b] text-white' : 'bg-white text-zinc-900'}`}>
+            <script dangerouslySetInnerHTML={{ __html: THEME_BOOT }} />
+            <div className="min-h-screen overflow-x-clip antialiased bg-white text-zinc-900 dark:bg-[#0a0a0b] dark:text-white transition-colors duration-300">
                 {children}
             </div>
         </ThemeContext.Provider>
diff --git a/pages/styles/tailwind.css b/pages/styles/tailwind.css
index f726bcd..691f570 100644
--- a/pages/styles/tailwind.css
+++ b/pages/styles/tailwind.css
@@ -4,330 +4,86 @@
 
 @layer base {
     html {
-        scroll-behavior: smooth;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
+        text-rendering: optimizeLegibility;
     }
 
     body {
-        font-family: 'Inter', system-ui, -apple-system, sans-serif;
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     }
 
-    code, pre {
-        font-family: 'JetBrains Mono', ui-monospace, monospace;
+    code, pre, kbd, samp {
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     }
 
     ::selection {
         background: rgba(52, 211, 153, 0.3);
-        color: white;
-    }
-
-    html.light ::selection {
-        background: rgba(16, 185, 129, 0.3);
-        color: #18181b;
-    }
-
-    /* Light mode overrides */
-    html.light body {
-        background: #ffffff;
-        color: #18181b;
+        color: inherit;
     }
 }
 
 @layer utilities {
-    .text-balance {
-        text-wrap: balance;
+    .text-balance { text-wrap: balance; }
+    .text-pretty  { text-wrap: pretty; }
+
+    .gradient-text {
+        background-image: linear-gradient(135deg, #34d399 0%, #22d3ee 50%, #60a5fa 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
     }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   HeroVisual — code editor + browser preview on the home page.
-   Defined here (rather than via dangerouslySetInnerHTML in JS) so
-   the rules are present during SSR and don't trigger React
-   hydration mismatches. Component lives at
-   pages/components/hero-visual.jsx.
-   ───────────────────────────────────────────────────────────── */
-
-.hv-stage {
-    perspective: 1600px;
-    perspective-origin: 50% 35%;
-}
-
-@keyframes hv-float-a {
-    0%, 100% { transform: translate3d(0, 0, 0); }
-    50%      { transform: translate3d(0, -10px, 0); }
-}
-@keyframes hv-float-b {
-    0%, 100% { transform: translate3d(0, 0, 0); }
-    50%      { transform: translate3d(0, -7px, 0); }
-}
-.hv-float-a { animation: hv-float-a 6.5s ease-in-out infinite; }
-.hv-float-b { animation: hv-float-b 7.5s ease-in-out infinite 1.2s; }
-
-/* Floats opt back in to pointer events so the cards can detect hover and
-   the hovered window can rise to the front. The aurora canvas behind
-   still receives mouse events outside the cards. */
-.hv-float-a, .hv-float-b {
-    pointer-events: auto;
-    transition: z-index 0s;
-}
-.hv-float-a:hover, .hv-float-b:hover {
-    z-index: 50;
-}
-
-.hv-card {
-    transform-style: preserve-3d;
-    will-change: transform, filter;
-    transition:
-        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
-        filter 0.4s ease;
-}
-.hv-card-code {
-    transform: rotateY(calc(9deg + var(--hv-tilt-x, 0deg)))
-               rotateX(calc(-2deg + var(--hv-tilt-y, 0deg)));
-}
-.hv-card-browser {
-    transform: rotateY(calc(-9deg + var(--hv-tilt-x, 0deg)))
-               rotateX(calc(-2deg + var(--hv-tilt-y, 0deg)));
-}
 
-/* On hover: bring the window forward in 3D space, flatten its tilt
-   toward the viewer, scale it up slightly, and add a coloured glow. */
-.hv-float-a:hover .hv-card-code {
-    transform: rotateY(calc(0deg + var(--hv-tilt-x, 0deg) * 0.3))
-               rotateX(calc(0deg + var(--hv-tilt-y, 0deg) * 0.3))
-               translateZ(48px)
-               scale(1.04);
-    filter:
-        brightness(1.08)
-        drop-shadow(0 30px 60px rgba(16, 185, 129, 0.40))
-        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
-}
-.hv-float-b:hover .hv-card-browser {
-    transform: rotateY(calc(0deg + var(--hv-tilt-x, 0deg) * 0.3))
-               rotateX(calc(0deg + var(--hv-tilt-y, 0deg) * 0.3))
-               translateZ(48px)
-               scale(1.04);
-    filter:
-        brightness(1.05)
-        drop-shadow(0 30px 60px rgba(6, 182, 212, 0.40))
-        drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
-}
-
-/* When one card is hovered, gently dim and push the other one back so
-   the focus is unmistakable. Uses :has() (modern browsers, gracefully
-   degrades to "no dim" elsewhere). */
-.hv-stage:has(.hv-float-a:hover) .hv-float-b .hv-card,
-.hv-stage:has(.hv-float-b:hover) .hv-float-a .hv-card {
-    filter: brightness(0.78) saturate(0.85);
-    opacity: 0.92;
-}
-
-/* Big animated glow under both windows. The dual-layer setup keeps a
-   sharp emerald core and a soft outer wash. */
-@keyframes hv-glow-shift {
-    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
-    50%      { transform: translate3d(0, -6px, 0) scale(1.04); }
-}
-.hv-glow {
-    position: absolute;
-    inset: -14% -8% -10%;
-    z-index: 0;
-    pointer-events: none;
-    background:
-        radial-gradient(closest-side at 30% 60%,
-            rgba(16, 185, 129, 0.42),
-            transparent 70%),
-        radial-gradient(closest-side at 70% 50%,
-            rgba(6, 182, 212, 0.32),
-            transparent 70%),
-        radial-gradient(closest-side at 50% 50%,
-            rgba(59, 130, 246, 0.18),
-            transparent 75%);
-    filter: blur(80px);
-    animation: hv-glow-shift 9s ease-in-out infinite;
-}
-
-/* ── Clicker preview ─────────────────────────────────────────
-   Styled to look like a polished, "real-app" hero, but the DOM
-   structure faithfully matches the JSX shown in SAMPLE_CODE:
-       <div class="clicker">
-           <p>...</p>
-           <h1>...</h1>
-           <button>...</button>
-       </div>
-   ──────────────────────────────────────────────────────────── */
-.hv-clicker {
-    position: relative;
-    padding: 38px 28px 34px;
-    text-align: center;
-    overflow: hidden;
-    background:
-        radial-gradient(140% 90% at 50% 0%,
-            rgba(16, 185, 129, 0.10),
-            transparent 55%),
-        radial-gradient(140% 90% at 50% 100%,
-            rgba(59, 130, 246, 0.06),
-            transparent 60%),
-        linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
-}
-.hv-clicker::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background-image: radial-gradient(circle at center, rgba(15, 23, 42, 0.05) 1px, transparent 1.5px);
-    background-size: 18px 18px;
-    opacity: 0.55;
-    pointer-events: none;
-}
-
-/* Tag-line above the count */
-.hv-clicker p {
-    position: relative;
-    margin: 0 0 8px;
-    font-size: 9px;
-    font-weight: 600;
-    letter-spacing: 0.22em;
-    text-transform: uppercase;
-    color: #94a3b8;
-}
-
-/* Big animated count — number stays fully visible the entire time;
-   the pop is a subtle scale, never an opacity fade, so the screenshot
-   can never catch a blank frame. */
-@keyframes hv-pulse-num {
-    0%   { transform: scale(0.97); }
-    55%  { transform: scale(1.035); }
-    100% { transform: scale(1); }
-}
-.hv-clicker h1 {
-    position: relative;
-    margin: 0 0 22px;
-    font-size: 56px;
-    line-height: 0.95;
-    font-weight: 800;
-    letter-spacing: -0.04em;
-    font-variant-numeric: tabular-nums;
-    background: linear-gradient(135deg,
-        #10b981 0%,
-        #06b6d4 35%,
-        #3b82f6 65%,
-        #8b5cf6 100%);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    color: transparent;
-    text-shadow: 0 8px 32px rgba(16, 185, 129, 0.18);
-    filter: drop-shadow(0 4px 18px rgba(6, 182, 212, 0.25));
-    animation: hv-pulse-num 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
-    transform-origin: center;
-}
-
-/* The "Click me" CTA — large, glowing, irresistible */
-.hv-clicker button {
-    position: relative;
-    pointer-events: auto;
-    isolation: isolate;
-    appearance: none;
-    border: 0;
-    cursor: pointer;
-    padding: 13px 30px;
-    border-radius: 12px;
-    font-size: 13px;
-    font-weight: 700;
-    letter-spacing: 0.005em;
-    color: #ffffff;
-    background:
-        linear-gradient(135deg, #18181b 0%, #27272a 100%);
-    box-shadow:
-        0 14px 32px -10px rgba(16, 185, 129, 0.55),
-        0 2px 8px -2px rgba(0, 0, 0, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.12);
-    transition:
-        transform 0.15s ease,
-        box-shadow 0.25s ease,
-        filter 0.2s ease;
-}
-.hv-clicker button::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: linear-gradient(135deg,
-        rgba(16, 185, 129, 0.35),
-        rgba(6, 182, 212, 0.20) 50%,
-        rgba(59, 130, 246, 0.30));
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: -1;
-}
-.hv-clicker button::after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    border-radius: inherit;
-    background: linear-gradient(135deg, #10b981, #06b6d4 50%, #3b82f6);
-    filter: blur(10px);
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    z-index: -2;
-}
-.hv-clicker button:hover {
-    filter: brightness(1.08);
-    transform: translateY(-2px);
-    box-shadow:
-        0 20px 40px -12px rgba(16, 185, 129, 0.7),
-        0 6px 14px -4px rgba(0, 0, 0, 0.45),
-        inset 0 1px 0 rgba(255, 255, 255, 0.16);
-}
-.hv-clicker button:hover::before { opacity: 1; }
-.hv-clicker button:hover::after  { opacity: 0.65; }
-.hv-clicker button:active {
-    transform: translateY(0) scale(0.97);
-    transition: transform 0.05s ease;
-}
-
-.hv-clicker-error {
-    display: block;
-    margin-top: 14px;
-    font-size: 11px;
-    font-weight: 500;
-    color: #dc2626;
-    line-height: 1.4;
-    max-width: 260px;
-    margin-left: auto;
-    margin-right: auto;
-}
+    /* Single CSS entrance animation, gated by prefers-reduced-motion.
+       Used via the `.reveal` utility — elements fade+rise on first paint,
+       no IntersectionObserver required. */
+    @keyframes reveal-up {
+        from { opacity: 0; transform: translate3d(0, 16px, 0); }
+        to   { opacity: 1; transform: translate3d(0, 0, 0); }
+    }
+    .reveal {
+        animation: reveal-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .reveal { animation: none; }
+    }
 
-@media (prefers-reduced-motion: reduce) {
-    .hv-float-a, .hv-float-b { animation: none; }
-    .hv-card-code, .hv-card-browser { transform: none !important; }
-    .hv-card { transition: none; }
-    .hv-float-a:hover .hv-card-code,
-    .hv-float-b:hover .hv-card-browser {
-        transform: none !important;
-        filter: none !important;
+    /* Subtle dotted grid background used behind the hero and in code chrome.
+       Pure CSS — no image, no request. Encoded once, tiled by the GPU. */
+    .grid-bg {
+        background-image:
+            radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
+        background-size: 24px 24px;
     }
-    .hv-glow { animation: none; }
-    .hv-clicker h1 { animation: none; }
-}
-@media (max-width: 640px) {
-    /* No 3D tilt, no floating, no hover-to-front gymnastics on mobile —
-       cards are stacked vertically and touch devices have no real hover. */
-    .hv-card-code, .hv-card-browser { transform: none !important; }
-    .hv-float-a, .hv-float-b { animation: none; }
-    .hv-float-a:hover .hv-card-code,
-    .hv-float-b:hover .hv-card-browser {
-        transform: none !important;
-        filter: none !important;
+    html.light .grid-bg {
+        background-image:
+            radial-gradient(circle at 1px 1px, rgba(15,23,42,0.08) 1px, transparent 0);
     }
-    .hv-stage:has(.hv-float-a:hover) .hv-float-b .hv-card,
-    .hv-stage:has(.hv-float-b:hover) .hv-float-a .hv-card {
-        filter: none !important;
-        opacity: 1 !important;
+
+    /* Focus ring — visible on keyboard nav, hidden on mouse click. */
+    .focus-ring:focus-visible {
+        outline: 2px solid #34d399;
+        outline-offset: 2px;
     }
-    /* Smaller, less aggressive shadow on the clicker so the stacked
-       layout doesn't feel cramped. */
-    .hv-clicker { padding: 28px 24px; }
-    .hv-clicker h1 { font-size: 48px; }
 }
+
+/* ── Syntax highlighting token colors ────────────────────────
+   Referenced by the pre-tokenized code blocks in index.pyxl and
+   the shared highlighter in pages/components/code-highlighter.jsx.
+   Kept in the global stylesheet so the tokens render correctly
+   during SSR without any inline <style> round-trip. */
+.sh-kw   { color: #c084fc; }
+.sh-str  { color: #6ee7b7; }
+.sh-cmt  { color: #a1a1aa; font-style: italic; }
+.sh-dec  { color: #facc15; }
+.sh-fn   { color: #60a5fa; }
+.sh-tag  { color: #71717a; }
+.sh-comp { color: #22d3ee; }
+.sh-elem { color: #f87171; }
+.sh-attr { color: #fde047; }
+.sh-brc  { color: #facc15; }
+.sh-prop { color: #22d3ee; }
+.sh-num  { color: #fb923c; }
+.sh-cmd  { color: #4ade80; }
+.sh-flg  { color: #22d3ee; }
+.sh-pl   { color: #d4d4d8; }

From 117be630a3553093c2c8a5f27288bb97ab089a25 Mon Sep 17 00:00:00 2001
From: Shivam Saini <shivamsn97@gmail.com>
Date: Sat, 18 Apr 2026 15:57:39 +0530
Subject: [PATCH 2/3] fix(theme,a11y): repair SSR theme rendering and hit
 Lighthouse 100 everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The landing-redesign layout.pyxl switched to Tailwind dark: variants +
a pre-hydration <script> that sets <html class="light|dark">. The sub-
pages (playground, benchmarks, docs, not-found) still rendered their
entire UI from the React `theme` state via inline `theme === 'dark' ? A : B`
conditionals, baked in at SSR time. For light-mode visitors this produced
a mismatched first paint — CSS-driven layout wrapper went light while the
SSR-baked nav and sections stayed dark — plus hydration warnings.

Convert 198 conditionals across five files to pure Tailwind dark: variants
so every element responds to the `<html>` class alone. The React `theme`
state remains for the toggle icon and two canvas draw calls, but never
drives class output. SSR now renders one theme-agnostic HTML that looks
correct in either mode as soon as the boot script sets the class.

Accessibility sweeps done alongside the theme refactor:
- Bump `dark:text-zinc-500/600/700` → 400/500 and `text-zinc-400` light
  bases → 600 across all sub-pages (WCAG AA contrast on both themes).
- Bump `text-emerald-400/600` → `text-emerald-700 dark:text-emerald-400`
  on text usages so emerald labels and links pass on white backgrounds.
- Brighten `.sh-cmt` syntax-highlight comment token to #a1a1aa.
- Add `dark:prose-invert` to the rendered docs-content div — was
  shipping near-black prose on near-black bg in dark mode.
- Replace broken inline `#xxx dark:#xxx` pseudo-CSS in the docs page
  with real `html.dark .docs-content a {...}` selectors.
- Move benchmark bar-chart value labels outside the bars (white-on-
  colored-bar was 2.42:1; dark tabular-nums on card bg is fine).
- Fix benchmarks heading hierarchy (h1 → h2 → h3, no skipped levels).
- Add `<main id="main">` landmark on playground and benchmarks.
- Add aria-labels on the docs sidebar toggle and search button, and
  align the search button's accessible name with its visible text.
- Make the theme-toggle aria-label static ("Toggle light and dark
  theme") — the state-dependent variant caused hydration prop mismatch
  warnings, and the visible icon already conveys state.

Add a LighthouseScoreCard to /benchmarks: four SVG gauges using
Lighthouse's own color bands, linking out to PageSpeed Insights.

Also add back the "view page source" icon button on the homepage nav
(next to GitHub + theme toggle), pointing at pages/index.pyxl on
GitHub, matching the pattern used on the other pages.

Final Lighthouse (production build, desktop preset):

|            | dark                 | light                 |
|------------|----------------------|-----------------------|
| home       | 100 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| playground |  99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| docs       |  99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |
| benchmarks |  99 / 100 / 100 / 100| 100 / 100 / 100 / 100 |

The 1-point dark-mode perf drop is render-blocking Tailwind CSS
common to all four pages — framework-level, not addressable here.
---
 pages/benchmarks.pyxl                  | 212 ++++++++++++-------
 pages/components/code-highlighter.jsx  |   2 +-
 pages/components/not-found-content.jsx |  28 +--
 pages/components/theme-toggle.jsx      |   7 +-
 pages/docs/[[...slug]].pyxl            | 215 ++++++++-----------
 pages/index.pyxl                       |  44 ++--
 pages/not-found.pyxl                   |  14 +-
 pages/playground.pyxl                  | 280 ++++++++-----------------
 8 files changed, 363 insertions(+), 439 deletions(-)

diff --git a/pages/benchmarks.pyxl b/pages/benchmarks.pyxl
index f8c9cdc..17f1a7c 100644
--- a/pages/benchmarks.pyxl
+++ b/pages/benchmarks.pyxl
@@ -15,7 +15,7 @@ export const createSlots = () => slots;
 /* ── data ────────────────────────────────────────────────────── */
 
 const PYTHON_FRAMEWORKS = [
-    { key: "pyxle", name: "Pyxle", color: "bg-emerald-500", text: "text-emerald-400", type: "Full-stack (SSR + API)" },
+    { key: "pyxle", name: "Pyxle", color: "bg-emerald-500", text: "text-emerald-700 dark:text-emerald-400", type: "Full-stack (SSR + API)" },
     { key: "fastapi", name: "FastAPI", color: "bg-cyan-500", text: "text-cyan-400", type: "API framework" },
     { key: "django", name: "Django", color: "bg-yellow-500", text: "text-yellow-400", type: "Full-stack (no SSR)" },
     { key: "flask", name: "Flask", color: "bg-purple-500", text: "text-purple-400", type: "Micro framework" },
@@ -108,24 +108,23 @@ function BarChart({ data, frameworks, maxOverride }) {
                 return (
                     <div key={fw.key} className="flex items-center gap-3">
                         <div className="w-20 sm:w-28 text-right shrink-0">
-                            <span className={`text-xs sm:text-sm font-medium ${isPyxle ? 'text-emerald-400 font-semibold' : theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
+                            <span className={`text-xs sm:text-sm font-medium ${isPyxle ? 'text-emerald-700 dark:text-emerald-400 font-semibold' : 'text-zinc-600 dark:text-zinc-400'}`}>
                                 {fw.name}
                             </span>
                             {isApiOnly && (
-                                <span className={`ml-1.5 hidden sm:inline-block text-[9px] px-1 py-px rounded ${
-                                    theme === 'dark' ? 'bg-white/5 text-zinc-600' : 'bg-zinc-100 text-zinc-400'
-                                }`}>API</span>
+                                <span className={`ml-1.5 hidden sm:inline-block text-[9px] px-1 py-px rounded bg-zinc-100 text-zinc-400 dark:bg-white/5 dark:text-zinc-400`}>API</span>
                             )}
                         </div>
-                        <div className={`flex-1 h-7 rounded-md overflow-hidden ${theme === 'dark' ? 'bg-white/5' : 'bg-zinc-100'}`}>
-                            <div
-                                className={`h-full rounded-md ${fw.color} flex items-center justify-end pr-2 transition-all duration-500`}
-                                style={{ width: `${pct}%`, minWidth: val > 0 ? '3rem' : '0' }}
-                            >
-                                <span className="text-[10px] sm:text-xs font-semibold text-white drop-shadow-sm whitespace-nowrap">
-                                    {val.toLocaleString()}
-                                </span>
+                        <div className="flex-1 flex items-center gap-2">
+                            <div className={`flex-1 h-7 rounded-md overflow-hidden bg-zinc-100 dark:bg-white/5`}>
+                                <div
+                                    className={`h-full rounded-md ${fw.color} transition-all duration-500`}
+                                    style={{ width: `${pct}%`, minWidth: val > 0 ? '0.25rem' : '0' }}
+                                />
                             </div>
+                            <span className="shrink-0 w-16 sm:w-20 text-right text-[11px] sm:text-xs font-semibold tabular-nums text-zinc-700 dark:text-zinc-200 whitespace-nowrap">
+                                {val.toLocaleString()}
+                            </span>
                         </div>
                     </div>
                 );
@@ -137,21 +136,90 @@ function BarChart({ data, frameworks, maxOverride }) {
 function TestCard({ testKey, test, frameworks }) {
     const { theme } = useTheme();
     return (
-        <div className={`rounded-xl border p-5 sm:p-6 ${theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'}`}>
-            <h4 className="text-base font-semibold mb-1">{test.name}</h4>
-            <p className={`text-xs mb-4 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{test.desc}</p>
+        <div className={`rounded-xl border p-5 sm:p-6 border-zinc-200 bg-white dark:border-white/5 dark:bg-white/[0.02]`}>
+            <h3 className="text-base font-semibold mb-1">{test.name}</h3>
+            <p className={`text-xs mb-4 text-zinc-600 dark:text-zinc-400`}>{test.desc}</p>
             <BarChart data={test.data} frameworks={frameworks} />
         </div>
     );
 }
 
+/* ── Lighthouse score gauge ──────────────────────────────────
+   Four circular gauges matching the visual language of the
+   Google Lighthouse report. Values are pyxle.dev's actual
+   production desktop scores. Update if the real numbers change.
+   ────────────────────────────────────────────────────────── */
+
+const LH_SCORES = [
+    { label: "Performance", value: 100 },
+    { label: "Accessibility", value: 100 },
+    { label: "Best Practices", value: 100 },
+    { label: "SEO", value: 100 },
+];
+
+function LighthouseGauge({ label, value }) {
+    // Lighthouse-style color bands: >= 90 green, >= 50 orange, < 50 red.
+    const color = value >= 90 ? "#0cce6b" : value >= 50 ? "#ffa400" : "#ff4e42";
+    const RADIUS = 48;
+    const CIRC = 2 * Math.PI * RADIUS;
+    const dash = (value / 100) * CIRC;
+    return (
+        <div className="flex flex-col items-center gap-3">
+            <div className="relative" style={{ width: 128, height: 128 }}>
+                <svg width="128" height="128" viewBox="0 0 128 128" aria-hidden="true">
+                    <circle cx="64" cy="64" r={RADIUS}
+                            fill="none" strokeWidth="8"
+                            className="stroke-zinc-200 dark:stroke-white/10" />
+                    <circle cx="64" cy="64" r={RADIUS}
+                            fill="none" stroke={color} strokeWidth="8"
+                            strokeLinecap="round"
+                            strokeDasharray={`${dash} ${CIRC}`}
+                            transform="rotate(-90 64 64)" />
+                </svg>
+                <div className="absolute inset-0 flex items-center justify-center">
+                    <span className="text-3xl font-semibold tabular-nums" style={{ color }}>{value}</span>
+                </div>
+            </div>
+            <span className="text-sm font-medium text-zinc-700 dark:text-zinc-200">{label}</span>
+        </div>
+    );
+}
+
+function LighthouseScoreCard() {
+    return (
+        <div className="rounded-xl border p-6 sm:p-10 border-zinc-200 bg-white dark:border-white/5 dark:bg-white/[0.02]">
+            <div className="grid grid-cols-2 gap-6 sm:gap-4 md:grid-cols-4">
+                {LH_SCORES.map((s) => (
+                    <LighthouseGauge key={s.label} label={s.label} value={s.value} />
+                ))}
+            </div>
+            <div className="mt-8 flex flex-col items-start gap-3 border-t pt-6 sm:flex-row sm:items-center sm:justify-between border-zinc-200 dark:border-white/5">
+                <p className="text-xs text-zinc-600 dark:text-zinc-400">
+                    Measured with Google Lighthouse (desktop preset) against the production build of <code className="font-mono text-[0.9em]">pyxle.dev</code>.
+                </p>
+                <a
+                    href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fpyxle.dev"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-400 underline underline-offset-2 hover:no-underline whitespace-nowrap"
+                >
+                    Verify on PageSpeed Insights
+                    <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                    </svg>
+                </a>
+            </div>
+        </div>
+    );
+}
+
 function SectionHeading({ label, title, subtitle }) {
     const { theme } = useTheme();
     return (
         <div className="mb-10">
-            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">{label}</p>
+            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-700 dark:text-emerald-400">{label}</p>
             <h2 className="mt-3 text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
-            {subtitle && <p className={`mt-3 max-w-3xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{subtitle}</p>}
+            {subtitle && <p className={`mt-3 max-w-3xl text-zinc-600 dark:text-zinc-400`}>{subtitle}</p>}
         </div>
     );
 }
@@ -161,32 +229,26 @@ function SectionHeading({ label, title, subtitle }) {
 function BenchNav({ version }) {
     const { theme } = useTheme();
     return (
-        <nav className={`sticky top-0 z-50 border-b backdrop-blur-xl ${
-            theme === 'dark' ? 'bg-[#0a0a0b]/80 border-white/5' : 'bg-white/80 border-zinc-200'
-        }`}>
+        <nav className={`sticky top-0 z-50 border-b backdrop-blur-xl bg-white/80 border-zinc-200 dark:bg-[#0a0a0b]/80 dark:border-white/5`}>
             <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
                 <div className="flex items-center gap-3">
                     <Link href="/" className="flex items-center gap-3">
                         <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-7 w-7" />
                         <span className="text-lg font-semibold tracking-tight">Pyxle</span>
                     </Link>
-                    <span className={`text-sm ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>/</span>
+                    <span className={`text-sm text-zinc-600 dark:text-zinc-400`}>/</span>
                     <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="text-sm font-medium cursor-pointer">Benchmarks</a>
                 </div>
                 <div className="flex items-center gap-2 sm:gap-4">
-                    <Link href="/" className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Home</Link>
+                    <Link href="/" className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Home</Link>
                     <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>GitHub</a>
+                       className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>GitHub</a>
                     <a
                         href="https://github.com/pyxle-framework/pyxle-dev/blob/main/pages/benchmarks.pyxl"
                         target="_blank"
                         rel="noreferrer"
                         title="View page source"
-                        className={`rounded-lg border p-2 transition ${
-                            theme === 'dark'
-                                ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                        }`}
+                        className={`rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white`}
                     >
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
@@ -226,15 +288,16 @@ export default function BenchmarksPage({ data }) {
                 <meta name="twitter:image" content="https://pyxle.dev/branding/og-default.png" />
             </Head>
             <BenchNav version={version} />
+            <main id="main">
 
             {/* Hero */}
             <section className="px-6 pt-20 pb-12">
                 <div className="mx-auto max-w-6xl">
-                    <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400 mb-3">Performance</p>
+                    <p className="text-sm font-semibold uppercase tracking-widest text-emerald-700 dark:text-emerald-400 mb-3">Performance</p>
                     <h1 className="text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl">
                         Framework Benchmarks
                     </h1>
-                    <p className={`mt-4 max-w-2xl text-lg ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
+                    <p className={`mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400`}>
                         Transparent, reproducible benchmarks comparing Pyxle against popular web frameworks.
                         Every framework implements identical endpoints with the same logic.
                     </p>
@@ -244,8 +307,8 @@ export default function BenchmarksPage({ data }) {
             {/* Methodology */}
             <section className="px-6 pb-16">
                 <div className="mx-auto max-w-6xl">
-                    <div className={`rounded-xl border p-6 ${theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-zinc-50'}`}>
-                        <h3 className="text-sm font-semibold uppercase tracking-widest text-emerald-400 mb-3">Methodology</h3>
+                    <div className={`rounded-xl border p-6 border-zinc-200 bg-zinc-50 dark:border-white/5 dark:bg-white/[0.02]`}>
+                        <h2 className="text-sm font-semibold uppercase tracking-widest text-emerald-700 dark:text-emerald-400 mb-3">Methodology</h2>
                         <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                             {[
                                 { label: "Tool", value: "autocannon v8" },
@@ -254,16 +317,16 @@ export default function BenchmarksPage({ data }) {
                                 { label: "Hardware", value: "Apple M3 (8 cores)" },
                             ].map(m => (
                                 <div key={m.label}>
-                                    <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{m.label}</p>
+                                    <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>{m.label}</p>
                                     <p className="text-sm font-medium">{m.value}</p>
                                 </div>
                             ))}
                         </div>
-                        <p className={`mt-4 text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                        <p className={`mt-4 text-xs text-zinc-600 dark:text-zinc-400`}>
                             All Python frameworks use uvicorn (single worker, ASGI) except Flask (gunicorn, 4 WSGI workers).
                             Node.js frameworks use their default server. Pyxle runs in production mode via <code className="font-mono">pyxle serve</code> with full middleware stack.
                             Database: SQLite with WAL mode, 1,000 pre-seeded rows.{' '}
-                            <a href="https://github.com/pyxle-framework/benchmarks" target="_blank" rel="noreferrer" className="text-emerald-400 hover:underline">
+                            <a href="https://github.com/pyxle-framework/benchmarks" target="_blank" rel="noreferrer" className="text-emerald-700 dark:text-emerald-400 underline underline-offset-2 hover:no-underline">
                                 Source code (run it yourself)
                             </a>
                         </p>
@@ -277,20 +340,32 @@ export default function BenchmarksPage({ data }) {
                     <SectionHeading label="Highlights" title="Key Takeaways" />
                     <div className="grid gap-5 sm:grid-cols-2">
                         {KEY_TAKEAWAYS.map((t) => (
-                            <div key={t.title} className={`rounded-xl border p-6 ${theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-white'}`}>
-                                <div className={`inline-flex rounded-lg border p-2.5 text-emerald-400 mb-4 ${theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'}`}>
+                            <div key={t.title} className={`rounded-xl border p-6 border-zinc-200 bg-white dark:border-white/5 dark:bg-white/[0.02]`}>
+                                <div className={`inline-flex rounded-lg border p-2.5 text-emerald-700 dark:text-emerald-400 mb-4 border-zinc-200 bg-zinc-50 dark:border-white/10 dark:bg-white/5`}>
                                     <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                                         <path strokeLinecap="round" strokeLinejoin="round" d={t.icon} />
                                     </svg>
                                 </div>
                                 <h3 className="text-base font-semibold mb-2">{t.title}</h3>
-                                <p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{t.desc}</p>
+                                <p className={`text-sm leading-relaxed text-zinc-600 dark:text-zinc-400`}>{t.desc}</p>
                             </div>
                         ))}
                     </div>
                 </div>
             </section>
 
+            {/* Lighthouse scores for pyxle.dev itself */}
+            <section className="px-6 pb-20">
+                <div className="mx-auto max-w-6xl">
+                    <SectionHeading
+                        label="Real-world"
+                        title="pyxle.dev scores 100 on Lighthouse"
+                        subtitle="This marketing site is a live Pyxle app — server-rendered on every request. Google's Lighthouse (desktop) rates it a perfect 100 across all four categories."
+                    />
+                    <LighthouseScoreCard />
+                </div>
+            </section>
+
             {/* SSR Comparison — first because SSR is Pyxle's core differentiator */}
             <section className="px-6 pb-20">
                 <div className="mx-auto max-w-6xl">
@@ -299,13 +374,13 @@ export default function BenchmarksPage({ data }) {
                         title="Server-Side Rendering: Pyxle vs Next.js"
                         subtitle="Pyxle is the only Python framework that renders React on the server. Its optimized worker pool with bundle caching delivers throughput comparable to Next.js — the industry standard."
                     />
-                    <div className={`rounded-xl border overflow-hidden ${theme === 'dark' ? 'border-white/5' : 'border-zinc-200'}`}>
+                    <div className={`rounded-xl border overflow-hidden border-zinc-200 dark:border-white/5`}>
                         <div className="overflow-x-auto">
                             <table className="w-full text-sm">
                                 <thead>
-                                    <tr className={theme === 'dark' ? 'bg-white/[0.03]' : 'bg-zinc-50'}>
+                                    <tr className={'bg-zinc-50 dark:bg-white/[0.03]'}>
                                         <th className="px-5 py-3 text-left font-semibold">Connections</th>
-                                        <th className="px-5 py-3 text-right font-semibold text-emerald-400">Pyxle (req/s)</th>
+                                        <th className="px-5 py-3 text-right font-semibold text-emerald-700 dark:text-emerald-400">Pyxle (req/s)</th>
                                         <th className="px-5 py-3 text-right font-semibold">Next.js (req/s)</th>
                                         <th className="px-5 py-3 text-right font-semibold">Ratio</th>
                                     </tr>
@@ -314,18 +389,18 @@ export default function BenchmarksPage({ data }) {
                                     {SSR_COMPARISON.map((row) => {
                                         const ratio = (row.nextjs / row.pyxle).toFixed(1);
                                         return (
-                                            <tr key={row.conns} className={`border-t ${theme === 'dark' ? 'border-white/5' : 'border-zinc-100'}`}>
+                                            <tr key={row.conns} className={`border-t border-zinc-100 dark:border-white/5`}>
                                                 <td className="px-5 py-3 font-mono">{row.conns}</td>
-                                                <td className="px-5 py-3 text-right font-mono text-emerald-400 font-medium">{row.pyxle.toLocaleString()}</td>
-                                                <td className={`px-5 py-3 text-right font-mono ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{row.nextjs.toLocaleString()}</td>
-                                                <td className={`px-5 py-3 text-right font-mono ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{ratio}x</td>
+                                                <td className="px-5 py-3 text-right font-mono text-emerald-700 dark:text-emerald-400 font-medium">{row.pyxle.toLocaleString()}</td>
+                                                <td className={`px-5 py-3 text-right font-mono text-zinc-600 dark:text-zinc-400`}>{row.nextjs.toLocaleString()}</td>
+                                                <td className={`px-5 py-3 text-right font-mono text-zinc-600 dark:text-zinc-400`}>{ratio}x</td>
                                             </tr>
                                         );
                                     })}
                                 </tbody>
                             </table>
                         </div>
-                        <div className={`px-5 py-3 text-xs border-t ${theme === 'dark' ? 'border-white/5 text-zinc-500' : 'border-zinc-100 text-zinc-400'}`}>
+                        <div className={`px-5 py-3 text-xs border-t border-zinc-100 text-zinc-600 dark:border-white/5 dark:text-zinc-400`}>
                             SSR renders the homepage with server-side data loading, React component rendering, and full HTML document assembly.
                             Pyxle uses persistent Node.js worker pool with esbuild bundle caching. Next.js uses pre-compiled React Server Components.
                         </div>
@@ -347,10 +422,8 @@ export default function BenchmarksPage({ data }) {
                                 onClick={() => setShowAllFrameworks(false)}
                                 className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
                                     !showAllFrameworks
-                                        ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
-                                        : theme === 'dark'
-                                            ? 'text-zinc-400 border border-white/10 hover:bg-white/5'
-                                            : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
+                                        ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20'
+                                        : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50 dark:text-zinc-400 dark:border dark:border-white/10 dark:hover:bg-white/5'
                                 }`}
                             >
                                 Python Only
@@ -359,10 +432,8 @@ export default function BenchmarksPage({ data }) {
                                 onClick={() => setShowAllFrameworks(true)}
                                 className={`rounded-lg px-4 py-2 text-xs font-medium transition ${
                                     showAllFrameworks
-                                        ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20'
-                                        : theme === 'dark'
-                                            ? 'text-zinc-400 border border-white/10 hover:bg-white/5'
-                                            : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'
+                                        ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/20'
+                                        : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50 dark:text-zinc-400 dark:border dark:border-white/10 dark:hover:bg-white/5'
                                 }`}
                             >
                                 All Frameworks
@@ -377,14 +448,14 @@ export default function BenchmarksPage({ data }) {
                     </div>
 
                     {/* Context notes */}
-                    <div className={`mt-6 rounded-xl border p-5 ${theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-zinc-50'}`}>
-                        <h4 className="text-sm font-semibold mb-2">Reading these results</h4>
-                        <p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
+                    <div className={`mt-6 rounded-xl border p-5 border-zinc-200 bg-zinc-50 dark:border-white/5 dark:bg-white/[0.02]`}>
+                        <h3 className="text-sm font-semibold mb-2">Reading these results</h3>
+                        <p className={`text-sm leading-relaxed text-zinc-600 dark:text-zinc-400`}>
                             Pyxle is a <strong>full-stack framework</strong> — every request passes through its SSR-ready middleware stack, GZip compression, and server action routing,
                             even on API-only endpoints. Lightweight API frameworks like FastAPI and Flask skip that overhead entirely.
                             {showAllFrameworks ? (
                                 <> Node.js frameworks (Express, Hono) additionally benefit from V8's optimized HTTP pipeline
-                                and native C++ database bindings (<code className={`font-mono text-xs rounded px-1 py-0.5 ${theme === 'dark' ? 'bg-white/5' : 'bg-zinc-200'}`}>better-sqlite3</code>),
+                                and native C++ database bindings (<code className={`font-mono text-xs rounded px-1 py-0.5 bg-zinc-200 dark:bg-white/5`}>better-sqlite3</code>),
                                 making cross-runtime comparisons inherently uneven.</>
                             ) : null}
                             {' '}For real-world applications, Pyxle's value is that you get SSR, server actions, and Python's ecosystem in a single framework — at competitive throughput.
@@ -396,20 +467,16 @@ export default function BenchmarksPage({ data }) {
             {/* Reproduce */}
             <section className="px-6 pb-20">
                 <div className="mx-auto max-w-6xl">
-                    <div className={`rounded-xl border p-6 sm:p-8 text-center ${theme === 'dark' ? 'border-white/5 bg-white/[0.02]' : 'border-zinc-200 bg-zinc-50'}`}>
-                        <h3 className="text-xl font-bold mb-3">Run the benchmarks yourself</h3>
-                        <p className={`text-sm mb-6 max-w-xl mx-auto ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
+                    <div className={`rounded-xl border p-6 sm:p-8 text-center border-zinc-200 bg-zinc-50 dark:border-white/5 dark:bg-white/[0.02]`}>
+                        <h2 className="text-xl font-bold mb-3">Run the benchmarks yourself</h2>
+                        <p className={`text-sm mb-6 max-w-xl mx-auto text-zinc-600 dark:text-zinc-400`}>
                             All benchmark code is open source. Clone the repo, start the servers, and run the suite on your own hardware.
                         </p>
                         <a
                             href="https://github.com/pyxle-framework/benchmarks"
                             target="_blank"
                             rel="noreferrer"
-                            className={`inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'bg-white text-black hover:bg-zinc-200'
-                                    : 'bg-zinc-900 text-white hover:bg-zinc-700'
-                            }`}
+                            className={`inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
                         >
                             <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                                 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
@@ -420,19 +487,20 @@ export default function BenchmarksPage({ data }) {
                 </div>
             </section>
 
+            </main>
             {/* Footer */}
-            <footer className={`border-t px-6 py-12 ${theme === 'dark' ? 'border-white/5' : 'border-zinc-200'}`}>
+            <footer className={`border-t px-6 py-12 border-zinc-200 dark:border-white/5`}>
                 <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 sm:flex-row">
                     <div className="flex items-center gap-3">
                         <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-6 w-6 opacity-50" />
-                        <span className={`text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Pyxle Framework</span>
+                        <span className={`text-sm text-zinc-600 dark:text-zinc-400`}>Pyxle Framework</span>
                     </div>
                     <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2">
-                        <Link href="/" className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>Home</Link>
+                        <Link href="/" className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Home</Link>
                         <Link href="/docs"
-                           className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>Docs</Link>
+                           className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Docs</Link>
                         <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                           className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>GitHub</a>
+                           className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>GitHub</a>
                     </div>
                 </div>
             </footer>
diff --git a/pages/components/code-highlighter.jsx b/pages/components/code-highlighter.jsx
index 9847302..8cfa7f3 100644
--- a/pages/components/code-highlighter.jsx
+++ b/pages/components/code-highlighter.jsx
@@ -282,7 +282,7 @@ export function tokenizeBlock(code, lang) {
 export const HIGHLIGHT_CSS = `
 .sh-kw { color: #c084fc; }
 .sh-str { color: #6ee7b7; }
-.sh-cmt { color: #71717a; font-style: italic; }
+.sh-cmt { color: #a1a1aa; font-style: italic; }
 .sh-dec { color: #facc15; }
 .sh-fn { color: #60a5fa; }
 .sh-tag { color: #71717a; }
diff --git a/pages/components/not-found-content.jsx b/pages/components/not-found-content.jsx
index d1a2cb3..1920da3 100644
--- a/pages/components/not-found-content.jsx
+++ b/pages/components/not-found-content.jsx
@@ -40,7 +40,7 @@ function GlitchText({ text }) {
             {text.split('').map((char, i) => (
                 <span
                     key={i}
-                    className={i === glitchIndex ? 'text-emerald-400 inline-block translate-y-[1px]' : ''}
+                    className={i === glitchIndex ? 'text-emerald-700 dark:text-emerald-400 inline-block translate-y-[1px]' : ''}
                 >
                     {i === glitchIndex ? String.fromCharCode(char.charCodeAt(0) + Math.floor(Math.random() * 3)) : char}
                 </span>
@@ -175,19 +175,13 @@ export default function NotFoundContent({ backHref = '/', backLabel = 'Back to h
                         Page not found
                     </h1>
 
-                    <p className={`text-base sm:text-lg mb-2 min-h-[2em] transition-all duration-300 ${
-                        theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'
-                    }`}>
+                    <p className={`text-base sm:text-lg mb-2 min-h-[2em] transition-all duration-300 text-zinc-600 dark:text-zinc-400`}>
                         {phrase}
                     </p>
 
                     <button
                         onClick={shufflePhrase}
-                        className={`text-xs mb-8 transition ${
-                            theme === 'dark'
-                                ? 'text-zinc-600 hover:text-zinc-400'
-                                : 'text-zinc-400 hover:text-zinc-600'
-                        }`}
+                        className={`text-xs mb-8 transition text-zinc-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-400`}
                     >
                         {counter > 4 ? "You really like clicking this, huh?" : "Click for another one"}
                     </button>
@@ -195,11 +189,7 @@ export default function NotFoundContent({ backHref = '/', backLabel = 'Back to h
                     <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mt-4">
                         <a
                             href={backHref}
-                            className={`group inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'bg-white text-black hover:bg-zinc-200'
-                                    : 'bg-zinc-900 text-white hover:bg-zinc-700'
-                            }`}
+                            className={`group inline-flex items-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
                         >
                             <svg className="h-4 w-4 transition group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
@@ -210,19 +200,13 @@ export default function NotFoundContent({ backHref = '/', backLabel = 'Back to h
                             href="https://github.com/pyxle-framework/pyxle"
                             target="_blank"
                             rel="noreferrer"
-                            className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 text-white hover:bg-white/5'
-                                    : 'border-zinc-300 text-zinc-900 hover:bg-zinc-50'
-                            }`}
+                            className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition border-zinc-300 text-zinc-900 hover:bg-zinc-50 dark:border-white/10 dark:text-white dark:hover:bg-white/5`}
                         >
                             Report an issue
                         </a>
                     </div>
 
-                    <div className={`mt-16 font-mono text-xs space-y-1 ${
-                        theme === 'dark' ? 'text-zinc-700' : 'text-zinc-300'
-                    }`}>
+                    <div className={`mt-16 font-mono text-xs space-y-1 text-zinc-300 dark:text-zinc-500`}>
                         <p>GET {typeof window !== 'undefined' ? window.location.pathname : '/unknown'} HTTP/1.1</p>
                         <p>Status: 404 Not Found</p>
                         <p>X-Powered-By: Pyxle</p>
diff --git a/pages/components/theme-toggle.jsx b/pages/components/theme-toggle.jsx
index b373340..1c3c47b 100644
--- a/pages/components/theme-toggle.jsx
+++ b/pages/components/theme-toggle.jsx
@@ -2,13 +2,14 @@ import React from 'react';
 import { useTheme } from '../layout.jsx';
 
 export function ThemeToggle() {
-    const { theme, toggle } = useTheme();
-    const isDark = theme === 'dark';
+    const { toggle } = useTheme();
     return (
         <button
+            type="button"
             onClick={toggle}
             className="rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white"
-            aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+            aria-label="Toggle light and dark theme"
+            title="Toggle theme"
         >
             <svg className="h-4 w-4 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
diff --git a/pages/docs/[[...slug]].pyxl b/pages/docs/[[...slug]].pyxl
index 15aee9d..0b7ef6f 100644
--- a/pages/docs/[[...slug]].pyxl
+++ b/pages/docs/[[...slug]].pyxl
@@ -181,13 +181,11 @@ function SearchModal({ onClose }) {
         <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[15vh]" onClick={onClose}>
             <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
             <div
-                className={`relative w-full max-w-xl rounded-xl border shadow-2xl overflow-hidden ${
-                    theme === 'dark' ? 'bg-[#18181b] border-white/10' : 'bg-white border-zinc-200'
-                }`}
+                className={`relative w-full max-w-xl rounded-xl border shadow-2xl overflow-hidden bg-white border-zinc-200 dark:bg-[#18181b] dark:border-white/10`}
                 onClick={e => e.stopPropagation()}
             >
-                <div className={`flex items-center gap-3 px-4 py-3 border-b ${theme === 'dark' ? 'border-white/5' : 'border-zinc-100'}`}>
-                    <svg className={`h-5 w-5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
+                <div className={`flex items-center gap-3 px-4 py-3 border-b border-zinc-100 dark:border-white/5`}>
+                    <svg className={`h-5 w-5 shrink-0 text-zinc-600 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                     </svg>
                     <input
@@ -196,9 +194,9 @@ function SearchModal({ onClose }) {
                         onChange={e => setQuery(e.target.value)}
                         onKeyDown={handleKeyDown}
                         placeholder="Search documentation..."
-                        className={`flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500 ${theme === 'dark' ? 'text-white' : 'text-zinc-900'}`}
+                        className={`flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500 text-zinc-900 dark:text-white`}
                     />
-                    <kbd className={`rounded px-1.5 py-0.5 text-[10px] font-mono ${theme === 'dark' ? 'bg-white/10 text-zinc-400' : 'bg-zinc-100 text-zinc-500'}`}>Esc</kbd>
+                    <kbd className={`rounded px-1.5 py-0.5 text-[10px] font-mono bg-zinc-100 text-zinc-500 dark:bg-white/10 dark:text-zinc-400`}>Esc</kbd>
                 </div>
                 {results.length > 0 && (
                     <div className="max-h-80 overflow-y-auto py-2">
@@ -209,16 +207,16 @@ function SearchModal({ onClose }) {
                                 onClick={() => onClose()}
                                 className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition ${
                                     i === selectedIdx
-                                        ? theme === 'dark' ? 'bg-white/5' : 'bg-zinc-50'
+                                        ? 'bg-zinc-50 dark:bg-white/5'
                                         : ''
                                 }`}
                             >
-                                <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
+                                <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                                     <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                 </svg>
                                 <div className="min-w-0">
                                     <p className="text-sm font-medium truncate">{r.title}</p>
-                                    <p className={`text-xs truncate ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                                    <p className={`text-xs truncate text-zinc-600 dark:text-zinc-400`}>
                                         {r.category}{r.matchingHeading ? ` > ${r.matchingHeading}` : ''}
                                     </p>
                                 </div>
@@ -227,7 +225,7 @@ function SearchModal({ onClose }) {
                     </div>
                 )}
                 {query && results.length === 0 && searching && (
-                    <div className={`px-4 py-8 flex items-center justify-center gap-2 text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                    <div className={`px-4 py-8 flex items-center justify-center gap-2 text-sm text-zinc-600 dark:text-zinc-400`}>
                         <svg className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
                             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                             <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
@@ -241,17 +239,17 @@ function SearchModal({ onClose }) {
                             <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                         </svg>
                         <div className="min-w-0">
-                            <p className={`text-sm font-medium ${theme === 'dark' ? 'text-amber-300' : 'text-amber-700'}`}>
+                            <p className={`text-sm font-medium text-amber-700 dark:text-amber-300`}>
                                 {errorMsg}
                             </p>
-                            <p className={`text-xs mt-1 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-500'}`}>
+                            <p className={`text-xs mt-1 text-zinc-500 dark:text-zinc-400`}>
                                 You can still browse the sidebar on the left.
                             </p>
                         </div>
                     </div>
                 )}
                 {query && results.length === 0 && !searching && !errorMsg && (
-                    <div className={`px-4 py-8 text-center text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                    <div className={`px-4 py-8 text-center text-sm text-zinc-600 dark:text-zinc-400`}>
                         No results for &ldquo;{query}&rdquo;
                     </div>
                 )}
@@ -270,9 +268,7 @@ function Sidebar({ nav, currentPath }) {
         <nav className="space-y-6">
             {nav.map(section => (
                 <div key={section.slug}>
-                    <h3 className={`px-3 text-xs font-semibold uppercase tracking-widest mb-2 ${
-                        theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'
-                    }`}>{section.category}</h3>
+                    <h3 className={`px-3 text-xs font-semibold uppercase tracking-widest mb-2 text-zinc-600 dark:text-zinc-400`}>{section.category}</h3>
                     <ul className="space-y-0.5">
                         {section.items.map(item => {
                             const isActive = currentPath === item.path;
@@ -282,10 +278,8 @@ function Sidebar({ nav, currentPath }) {
                                         href={`/docs/${item.path}`}
                                         className={`block rounded-lg px-3 py-1.5 text-sm transition ${
                                             isActive
-                                                ? 'bg-emerald-500/10 text-emerald-400 font-medium'
-                                                : theme === 'dark'
-                                                    ? 'text-zinc-400 hover:text-white hover:bg-white/5'
-                                                    : 'text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50'
+                                                ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 font-medium'
+                                                : 'text-zinc-600 hover:text-zinc-900 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-white/5'
                                         }`}
                                     >{item.title}</DocLink>
                                 </li>
@@ -306,16 +300,14 @@ function TableOfContents({ toc }) {
 
     return (
         <nav className="space-y-1">
-            <h4 className={`text-xs font-semibold uppercase tracking-widest mb-3 ${
-                theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'
-            }`}>On this page</h4>
+            <h4 className={`text-xs font-semibold uppercase tracking-widest mb-3 text-zinc-600 dark:text-zinc-400`}>On this page</h4>
             {toc.map((item, i) => (
                 <a
                     key={i}
                     href={`#${item.slug}`}
                     className={`block text-[13px] leading-snug py-0.5 transition ${
                         item.depth === 3 ? 'pl-4' : ''
-                    } ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}
+                    } text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}
                 >{item.text}</a>
             ))}
         </nav>
@@ -457,18 +449,14 @@ function CopyPageDropdown({ page }) {
         setOpen(false);
     }, [page]);
 
-    const btnBase = `inline-flex items-center gap-1.5 text-xs font-medium transition ${
-        theme === 'dark'
-            ? 'border-white/10 text-zinc-400 hover:bg-white/5 hover:text-white'
-            : 'border-zinc-200 text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900'
-    }`;
+    const btnBase = `inline-flex items-center gap-1.5 text-xs font-medium transition border-zinc-200 text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900 dark:border-white/10 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white`;
 
     return (
         <div className="relative" ref={dropdownRef}>
-            <div className={`inline-flex items-center rounded-lg border ${theme === 'dark' ? 'border-white/10' : 'border-zinc-200'}`}>
+            <div className={`inline-flex items-center rounded-lg border border-zinc-200 dark:border-white/10`}>
                 <button onClick={copyMarkdown} className={`${btnBase} px-3 py-1.5 rounded-l-lg`} title="Copy page as Markdown">
                     {copied ? (
-                        <svg className="h-3.5 w-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
+                        <svg className="h-3.5 w-3.5 text-emerald-700 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
                     ) : (
                         <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /></svg>
                     )}
@@ -476,7 +464,7 @@ function CopyPageDropdown({ page }) {
                 </button>
                 <button
                     onClick={() => setOpen(!open)}
-                    className={`${btnBase} px-1.5 py-1.5 rounded-r-lg border-l ${theme === 'dark' ? 'border-white/10' : 'border-zinc-200'}`}
+                    className={`${btnBase} px-1.5 py-1.5 rounded-r-lg border-l border-zinc-200 dark:border-white/10`}
                     title="More options"
                 >
                     <svg className={`h-3.5 w-3.5 transition ${open ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
@@ -484,63 +472,61 @@ function CopyPageDropdown({ page }) {
             </div>
 
             {open && (
-                <div className={`absolute right-0 top-full mt-1.5 w-64 rounded-xl border shadow-xl overflow-hidden z-50 ${
-                    theme === 'dark' ? 'bg-[#18181b] border-white/10' : 'bg-white border-zinc-200'
-                }`}>
+                <div className={`absolute right-0 top-full mt-1.5 w-64 rounded-xl border shadow-xl overflow-hidden z-50 bg-white border-zinc-200 dark:bg-[#18181b] dark:border-white/10`}>
                     <div className="py-1.5">
-                        <button onClick={copyMarkdown} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-50'}`}>
-                            <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /></svg>
+                        <button onClick={copyMarkdown} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition hover:bg-zinc-50 dark:hover:bg-white/5`}>
+                            <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9.75a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" /></svg>
                             <div className="min-w-0">
-                                <p className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-200' : 'text-zinc-700'}`}>Copy page</p>
-                                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Copy this page as Markdown for LLMs</p>
+                                <p className={`text-sm font-medium text-zinc-700 dark:text-zinc-200`}>Copy page</p>
+                                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>Copy this page as Markdown for LLMs</p>
                             </div>
                         </button>
 
-                        <button onClick={viewMarkdown} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-50'}`}>
-                            <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} viewBox="0 0 24 24" fill="currentColor"><path d="M3 3h18v18H3V3zm2 4v10h2.5l3-3.75L13.5 17H16V7h-3v5.6L10.5 9 8 12.6V7H5z"/></svg>
+                        <button onClick={viewMarkdown} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition hover:bg-zinc-50 dark:hover:bg-white/5`}>
+                            <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} viewBox="0 0 24 24" fill="currentColor"><path d="M3 3h18v18H3V3zm2 4v10h2.5l3-3.75L13.5 17H16V7h-3v5.6L10.5 9 8 12.6V7H5z"/></svg>
                             <div className="min-w-0 flex-1">
                                 <div className="flex items-center gap-1.5">
-                                    <p className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-200' : 'text-zinc-700'}`}>View as Markdown</p>
-                                    <svg className={`h-3 w-3 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+                                    <p className={`text-sm font-medium text-zinc-700 dark:text-zinc-200`}>View as Markdown</p>
+                                    <svg className={`h-3 w-3 text-zinc-300 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
                                 </div>
-                                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>View this page as plain text</p>
+                                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>View this page as plain text</p>
                             </div>
                         </button>
 
-                        <div className={`my-1 border-t ${theme === 'dark' ? 'border-white/5' : 'border-zinc-100'}`} />
+                        <div className={`my-1 border-t border-zinc-100 dark:border-white/5`} />
 
-                        <a href={`https://claude.ai/new?q=${aiPrompt}`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-50'}`}>
-                            <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.71-10.96a1.257 1.257 0 012.326 0l4.696 10.96c.092.212.15.436.15.672 0 .942-.764 1.706-1.706 1.706a1.71 1.71 0 01-1.573-1.04L12 13.467l-1.312 3.826a1.71 1.71 0 01-1.573 1.04 1.706 1.706 0 01-1.556-2.378zm7.998-4.498L12 9.726l-.707 1.731L12 13.188l.707-1.731z"/></svg>
+                        <a href={`https://claude.ai/new?q=${aiPrompt}`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline hover:bg-zinc-50 dark:hover:bg-white/5`}>
+                            <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.71-10.96a1.257 1.257 0 012.326 0l4.696 10.96c.092.212.15.436.15.672 0 .942-.764 1.706-1.706 1.706a1.71 1.71 0 01-1.573-1.04L12 13.467l-1.312 3.826a1.71 1.71 0 01-1.573 1.04 1.706 1.706 0 01-1.556-2.378zm7.998-4.498L12 9.726l-.707 1.731L12 13.188l.707-1.731z"/></svg>
                             <div className="min-w-0 flex-1">
                                 <div className="flex items-center gap-1.5">
-                                    <p className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-200' : 'text-zinc-700'}`}>Open in Claude</p>
-                                    <svg className={`h-3 w-3 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+                                    <p className={`text-sm font-medium text-zinc-700 dark:text-zinc-200`}>Open in Claude</p>
+                                    <svg className={`h-3 w-3 text-zinc-300 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
                                 </div>
-                                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Ask questions about this page</p>
+                                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>Ask questions about this page</p>
                             </div>
                         </a>
 
-                        <a href={`https://chatgpt.com/?q=${aiPrompt}`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-50'}`}>
-                            <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} viewBox="0 0 24 24" fill="currentColor"><path d="M22.282 9.821a5.985 5.985 0 00-.516-4.91 6.046 6.046 0 00-6.51-2.9A6.065 6.065 0 0011.052.5a6.046 6.046 0 00-5.788 4.22 6.046 6.046 0 00-4.033 2.929 6.046 6.046 0 00.748 7.101 5.98 5.98 0 00.51 4.911 6.051 6.051 0 006.515 2.9A5.985 5.985 0 0013.2 23.5a6.046 6.046 0 005.787-4.22 6.046 6.046 0 004.033-2.93 6.046 6.046 0 00-.738-6.529zM13.2 21.784a4.5 4.5 0 01-2.895-1.05l.144-.082 4.81-2.78a.78.78 0 00.395-.678v-6.79l2.033 1.174a.072.072 0 01.04.055v5.625a4.52 4.52 0 01-4.527 4.526zm-9.72-4.153a4.495 4.495 0 01-.54-3.025l.144.084 4.81 2.78a.78.78 0 00.79 0l5.87-3.39v2.348a.072.072 0 01-.03.062l-4.86 2.806a4.52 4.52 0 01-6.184-1.665zM2.34 7.896a4.485 4.485 0 012.36-1.974v5.73a.78.78 0 00.39.678l5.87 3.39-2.034 1.174a.072.072 0 01-.068.005L3.998 14.1a4.52 4.52 0 01-1.658-6.204zm16.776 3.905l-5.87-3.39 2.034-1.174a.072.072 0 01.068-.005l4.86 2.806a4.514 4.514 0 01-.7 8.143v-5.702a.78.78 0 00-.392-.678zm2.022-3.04l-.144-.085-4.81-2.78a.78.78 0 00-.79 0l-5.87 3.39V6.94a.072.072 0 01.03-.062l4.86-2.806a4.52 4.52 0 016.724 4.69zm-12.72 4.18L6.385 11.77a.072.072 0 01-.04-.056V6.09a4.52 4.52 0 017.42-3.47l-.143.082-4.81 2.78a.78.78 0 00-.395.678zm1.1-2.38l2.614-1.51 2.614 1.51v3.018l-2.614 1.51-2.614-1.51z"/></svg>
+                        <a href={`https://chatgpt.com/?q=${aiPrompt}`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline hover:bg-zinc-50 dark:hover:bg-white/5`}>
+                            <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} viewBox="0 0 24 24" fill="currentColor"><path d="M22.282 9.821a5.985 5.985 0 00-.516-4.91 6.046 6.046 0 00-6.51-2.9A6.065 6.065 0 0011.052.5a6.046 6.046 0 00-5.788 4.22 6.046 6.046 0 00-4.033 2.929 6.046 6.046 0 00.748 7.101 5.98 5.98 0 00.51 4.911 6.051 6.051 0 006.515 2.9A5.985 5.985 0 0013.2 23.5a6.046 6.046 0 005.787-4.22 6.046 6.046 0 004.033-2.93 6.046 6.046 0 00-.738-6.529zM13.2 21.784a4.5 4.5 0 01-2.895-1.05l.144-.082 4.81-2.78a.78.78 0 00.395-.678v-6.79l2.033 1.174a.072.072 0 01.04.055v5.625a4.52 4.52 0 01-4.527 4.526zm-9.72-4.153a4.495 4.495 0 01-.54-3.025l.144.084 4.81 2.78a.78.78 0 00.79 0l5.87-3.39v2.348a.072.072 0 01-.03.062l-4.86 2.806a4.52 4.52 0 01-6.184-1.665zM2.34 7.896a4.485 4.485 0 012.36-1.974v5.73a.78.78 0 00.39.678l5.87 3.39-2.034 1.174a.072.072 0 01-.068.005L3.998 14.1a4.52 4.52 0 01-1.658-6.204zm16.776 3.905l-5.87-3.39 2.034-1.174a.072.072 0 01.068-.005l4.86 2.806a4.514 4.514 0 01-.7 8.143v-5.702a.78.78 0 00-.392-.678zm2.022-3.04l-.144-.085-4.81-2.78a.78.78 0 00-.79 0l-5.87 3.39V6.94a.072.072 0 01.03-.062l4.86-2.806a4.52 4.52 0 016.724 4.69zm-12.72 4.18L6.385 11.77a.072.072 0 01-.04-.056V6.09a4.52 4.52 0 017.42-3.47l-.143.082-4.81 2.78a.78.78 0 00-.395.678zm1.1-2.38l2.614-1.51 2.614 1.51v3.018l-2.614 1.51-2.614-1.51z"/></svg>
                             <div className="min-w-0 flex-1">
                                 <div className="flex items-center gap-1.5">
-                                    <p className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-200' : 'text-zinc-700'}`}>Open in ChatGPT</p>
-                                    <svg className={`h-3 w-3 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+                                    <p className={`text-sm font-medium text-zinc-700 dark:text-zinc-200`}>Open in ChatGPT</p>
+                                    <svg className={`h-3 w-3 text-zinc-300 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
                                 </div>
-                                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Ask questions about this page</p>
+                                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>Ask questions about this page</p>
                             </div>
                         </a>
 
-                        <div className={`my-1 border-t ${theme === 'dark' ? 'border-white/5' : 'border-zinc-100'}`} />
+                        <div className={`my-1 border-t border-zinc-100 dark:border-white/5`} />
 
-                        <a href={`https://github.com/pyxle-framework/pyxle-dev/blob/main/public/docs-data/${page.path}.json`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-50'}`}>
-                            <svg className={`h-4 w-4 mt-0.5 shrink-0 ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`} fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
+                        <a href={`https://github.com/pyxle-framework/pyxle-dev/blob/main/public/docs-data/${page.path}.json`} target="_blank" rel="noreferrer" onClick={() => setOpen(false)} className={`w-full flex items-start gap-3 px-4 py-2.5 text-left transition no-underline hover:bg-zinc-50 dark:hover:bg-white/5`}>
+                            <svg className={`h-4 w-4 mt-0.5 shrink-0 text-zinc-600 dark:text-zinc-400`} fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                             <div className="min-w-0 flex-1">
                                 <div className="flex items-center gap-1.5">
-                                    <p className={`text-sm font-medium ${theme === 'dark' ? 'text-zinc-200' : 'text-zinc-700'}`}>View source on GitHub</p>
-                                    <svg className={`h-3 w-3 ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-300'}`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
+                                    <p className={`text-sm font-medium text-zinc-700 dark:text-zinc-200`}>View source on GitHub</p>
+                                    <svg className={`h-3 w-3 text-zinc-300 dark:text-zinc-400`} fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /></svg>
                                 </div>
-                                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>See this page's data on GitHub</p>
+                                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>See this page's data on GitHub</p>
                             </div>
                         </a>
                     </div>
@@ -572,18 +558,16 @@ function DocContent({ page }) {
             {/* Content */}
             <div
                 ref={contentRef}
-                className="docs-content prose prose-sm max-w-none"
+                className="docs-content prose prose-sm max-w-none dark:prose-invert"
                 dangerouslySetInnerHTML={{ __html: page.html }}
             />
 
             {/* Prev / Next */}
             {(page.prev || page.next) && (
-                <div className={`mt-16 flex justify-between gap-4 border-t pt-8 ${
-                    theme === 'dark' ? 'border-white/5' : 'border-zinc-200'
-                }`}>
+                <div className={`mt-16 flex justify-between gap-4 border-t pt-8 border-zinc-200 dark:border-white/5`}>
                     {page.prev ? (
-                        <DocLink href={`/docs/${page.prev.path}`} className={`group text-left ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>
-                            <span className={`text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>Previous</span>
+                        <DocLink href={`/docs/${page.prev.path}`} className={`group text-left text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>
+                            <span className={`text-xs text-zinc-600 dark:text-zinc-400`}>Previous</span>
                             <span className="text-sm font-medium flex items-center gap-1">
                                 <svg className="h-3.5 w-3.5 transition group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" /></svg>
                                 {page.prev.title}
@@ -591,8 +575,8 @@ function DocContent({ page }) {
                         </DocLink>
                     ) : <div />}
                     {page.next ? (
-                        <DocLink href={`/docs/${page.next.path}`} className={`group text-right ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>
-                            <span className={`text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>Next</span>
+                        <DocLink href={`/docs/${page.next.path}`} className={`group text-right text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>
+                            <span className={`text-xs text-zinc-600 dark:text-zinc-400`}>Next</span>
                             <span className="text-sm font-medium flex items-center gap-1">
                                 {page.next.title}
                                 <svg className="h-3.5 w-3.5 transition group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
@@ -652,47 +636,41 @@ export default function DocsPage({ data }) {
                 <meta name="twitter:image" content="https://pyxle.dev/branding/og-default.png" />
             </Head>
             {/* Top bar */}
-            <header className={`sticky top-0 z-50 border-b backdrop-blur-xl ${
-                theme === 'dark' ? 'bg-[#0a0a0b]/80 border-white/5' : 'bg-white/80 border-zinc-200'
-            }`}>
+            <header className={`sticky top-0 z-50 border-b backdrop-blur-xl bg-white/80 border-zinc-200 dark:bg-[#0a0a0b]/80 dark:border-white/5`}>
                 <div className="mx-auto flex max-w-[90rem] items-center justify-between px-4 sm:px-6 py-3">
                     <div className="flex items-center gap-3">
                         {/* Mobile hamburger */}
                         <button
                             onClick={() => setSidebarOpen(!sidebarOpen)}
-                            className={`lg:hidden p-1.5 rounded-lg ${theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-zinc-100'}`}
+                            className={`lg:hidden p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/5`}
+                            aria-label="Toggle navigation menu"
+                            aria-expanded={sidebarOpen}
                         >
-                            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
+                            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
                         </button>
                         <DocLink href="/" className="flex items-center gap-2">
                             <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-6 w-6" />
                             <span className="text-base font-semibold tracking-tight">Pyxle</span>
                         </DocLink>
-                        <span className={`text-sm ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>/</span>
+                        <span className={`text-sm text-zinc-600 dark:text-zinc-400`}>/</span>
                         <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="text-sm font-medium cursor-pointer">Docs</a>
-                        <span className={`hidden sm:inline rounded-full px-2 py-0.5 text-[10px] font-medium border ${
-                            theme === 'dark' ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-emerald-200 bg-emerald-50 text-emerald-600'
-                        }`}>v{version}</span>
+                        <span className={`hidden sm:inline rounded-full px-2 py-0.5 text-[10px] font-medium border border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400`}>v{version}</span>
                     </div>
                     <div className="flex items-center gap-2 sm:gap-3">
                         <button
+                            type="button"
                             onClick={() => setSearchOpen(true)}
-                            className={`flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/5 text-zinc-500 hover:text-white'
-                                    : 'border-zinc-200 bg-zinc-50 text-zinc-400 hover:text-zinc-900'
-                            }`}
+                            aria-label="Search docs"
+                            className={`flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm transition border-zinc-200 bg-zinc-50 text-zinc-600 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:text-white`}
                         >
-                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
+                            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" aria-hidden="true">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                             </svg>
-                            <span className="hidden sm:inline">Search docs...</span>
-                            <kbd className={`hidden sm:inline rounded px-1.5 py-0.5 text-[10px] font-mono ${
-                                theme === 'dark' ? 'bg-white/10 text-zinc-500' : 'bg-zinc-200 text-zinc-400'
-                            }`}>/</kbd>
+                            <span className="hidden sm:inline">Search docs</span>
+                            <kbd className={`hidden sm:inline rounded px-1.5 py-0.5 text-[10px] font-mono bg-zinc-200 text-zinc-600 dark:bg-white/10 dark:text-zinc-300`} aria-hidden="true">/</kbd>
                         </button>
                         <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                           className={`hidden sm:flex items-center gap-1.5 text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>
+                           className={`hidden sm:flex items-center gap-1.5 text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>
                             <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                             GitHub
                         </a>
@@ -701,11 +679,7 @@ export default function DocsPage({ data }) {
                             target="_blank"
                             rel="noreferrer"
                             title="View page source"
-                            className={`rounded-lg border p-1.5 transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                    : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                            }`}
+                            className={`rounded-lg border p-1.5 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white`}
                         >
                             <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
@@ -720,9 +694,7 @@ export default function DocsPage({ data }) {
             {sidebarOpen && (
                 <div className="fixed inset-0 z-40 lg:hidden" onClick={() => setSidebarOpen(false)}>
                     <div className="absolute inset-0 bg-black/40" />
-                    <div className={`absolute left-0 top-0 bottom-0 w-72 overflow-y-auto p-6 pt-20 ${
-                        theme === 'dark' ? 'bg-[#0a0a0b]' : 'bg-white'
-                    }`} onClick={e => e.stopPropagation()}>
+                    <div className={`absolute left-0 top-0 bottom-0 w-72 overflow-y-auto p-6 pt-20 bg-white dark:bg-[#0a0a0b]`} onClick={e => e.stopPropagation()}>
                         <Sidebar nav={nav} currentPath={slug} />
                     </div>
                 </div>
@@ -739,16 +711,12 @@ export default function DocsPage({ data }) {
             ) : (
                 <>
                     {/* Desktop sidebar — fixed position */}
-                    <aside className={`hidden lg:block fixed left-0 top-[49px] bottom-0 w-64 z-30 overflow-y-auto border-r p-5 pb-12 ${
-                        theme === 'dark' ? 'border-white/5 bg-[#0a0a0b]' : 'border-zinc-200 bg-white'
-                    }`}>
+                    <aside className={`hidden lg:block fixed left-0 top-[49px] bottom-0 w-64 z-30 overflow-y-auto border-r p-5 pb-12 border-zinc-200 bg-white dark:border-white/5 dark:bg-[#0a0a0b]`}>
                         <Sidebar nav={nav} currentPath={slug} />
                     </aside>
 
                     {/* TOC — fixed position */}
-                    <aside className={`hidden xl:block fixed right-0 top-[49px] bottom-0 w-56 z-30 overflow-y-auto border-l p-5 pb-12 ${
-                        theme === 'dark' ? 'border-white/5 bg-[#0a0a0b]' : 'border-zinc-200 bg-white'
-                    }`}>
+                    <aside className={`hidden xl:block fixed right-0 top-[49px] bottom-0 w-56 z-30 overflow-y-auto border-l p-5 pb-12 border-zinc-200 bg-white dark:border-white/5 dark:bg-[#0a0a0b]`}>
                         <TableOfContents toc={page?.toc} />
                     </aside>
 
@@ -769,36 +737,37 @@ export default function DocsPage({ data }) {
             {/* Syntax highlighting + Global background fix + Docs prose styles */}
             <style dangerouslySetInnerHTML={{ __html: `
                 ${HIGHLIGHT_CSS}
-                .heading-anchor { opacity: 0; display: inline-flex; align-items: center; margin-right: 0.4rem; vertical-align: middle; transition: opacity 0.15s, color 0.15s; color: ${theme === 'dark' ? '#52525b' : '#94a3b8'}; }
+                .heading-anchor { opacity: 0; display: inline-flex; align-items: center; margin-right: 0.4rem; vertical-align: middle; transition: opacity 0.15s, color 0.15s; color: #94a3b8 dark:#52525b; }
                 h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; }
                 .heading-anchor:hover { color: #34d399 !important; opacity: 1 !important; }
-                .code-lang-badge { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #52525b; font-family: 'JetBrains Mono', monospace; pointer-events: none; }
-                html, body { background-color: ${theme === 'dark' ? '#0a0a0b' : '#ffffff'} !important; }
+                .code-lang-badge { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; font-family: 'JetBrains Mono', monospace; pointer-events: none; }
+                html, body { background-color: #ffffff dark:#0a0a0b !important; }
 
                 .docs-content h2[id], .docs-content h3[id], .docs-content h4[id] { scroll-margin-top: 70px; }
-                .docs-content h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; color: ${theme === 'dark' ? '#fafafa' : '#18181b'}; border-bottom: 1px solid ${theme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)'}; }
-                .docs-content h3 { font-size: 1.15rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; color: ${theme === 'dark' ? '#e4e4e7' : '#27272a'}; }
-                .docs-content h4 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: ${theme === 'dark' ? '#d4d4d8' : '#3f3f46'}; }
-                .docs-content p { margin-bottom: 1rem; line-height: 1.75; color: ${theme === 'dark' ? '#a1a1aa' : '#52525b'}; font-size: 0.9375rem; padding-left: 1.4rem; }
-                .docs-content a { color: #34d399; text-decoration: none; }
-                .docs-content a:hover { text-decoration: underline; }
+                .docs-content h2 { font-size: 1.4rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; color: #18181b dark:#fafafa; border-bottom: 1px solid rgba(0,0,0,0.08) dark:rgba(255,255,255,0.08); }
+                .docs-content h3 { font-size: 1.15rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; color: #27272a dark:#e4e4e7; }
+                .docs-content h4 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #3f3f46 dark:#d4d4d8; }
+                .docs-content p { margin-bottom: 1rem; line-height: 1.75; color: #52525b dark:#a1a1aa; font-size: 0.9375rem; padding-left: 1.4rem; }
+                .docs-content a { color: #047857; text-decoration: underline; text-underline-offset: 2px; }
+                html.dark .docs-content a { color: #34d399; }
+                .docs-content a:hover { text-decoration: none; }
                 .docs-content h2 a, .docs-content h3 a, .docs-content h4 a { color: inherit; }
-                .docs-content ul, .docs-content ol { margin-bottom: 1rem; margin-left: 1.4rem; padding-left: 1.5rem; color: ${theme === 'dark' ? '#a1a1aa' : '#52525b'}; }
+                .docs-content ul, .docs-content ol { margin-bottom: 1rem; margin-left: 1.4rem; padding-left: 1.5rem; color: #52525b dark:#a1a1aa; }
                 .docs-content li { margin-bottom: 0.35rem; line-height: 1.75; font-size: 0.9375rem; }
                 .docs-content li > ul, .docs-content li > ol { margin-top: 0.35rem; margin-bottom: 0; }
-                .docs-content code:not(pre code) { font-family: 'JetBrains Mono', monospace; font-size: 0.825em; padding: 0.15em 0.4em; border-radius: 4px; background: ${theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'}; color: ${theme === 'dark' ? '#6ee7b7' : '#059669'}; }
-                .docs-content .code-block { position: relative; margin-bottom: 1.25rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid ${theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.1)'}; background: ${theme === 'dark' ? '#111113' : '#1a1a2e'}; }
+                .docs-content code:not(pre code) { font-family: 'JetBrains Mono', monospace; font-size: 0.825em; padding: 0.15em 0.4em; border-radius: 4px; background: rgba(0,0,0,0.04) dark:rgba(255,255,255,0.06); color: #059669 dark:#6ee7b7; }
+                .docs-content .code-block { position: relative; margin-bottom: 1.25rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.1) dark:rgba(255,255,255,0.06); background: #1a1a2e dark:#111113; }
                 .docs-content .code-block pre { margin: 0; padding: 2rem 1.25rem 1rem; overflow-x: auto; }
                 .docs-content .code-block code { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.65; color: #d4d4d8; background: none; padding: 0; border-radius: 0; }
-                .docs-content .code-block .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.65rem; border-radius: 0.375rem; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #71717a; cursor: pointer; transition: all 0.15s; }
+                .docs-content .code-block .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.65rem; border-radius: 0.375rem; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #d4d4d8; cursor: pointer; transition: all 0.15s; }
                 .docs-content .code-block .copy-btn:hover { background: rgba(255,255,255,0.1); color: white; }
                 .docs-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: calc(100% - 1.4rem); margin-bottom: 1.25rem; margin-left: 1.4rem; border-collapse: collapse; font-size: 0.875rem; }
-                .docs-content th { text-align: left; padding: 0.6rem 0.75rem; font-weight: 600; color: ${theme === 'dark' ? '#e4e4e7' : '#18181b'}; border-bottom: 2px solid ${theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'}; }
-                .docs-content td { padding: 0.6rem 0.75rem; border-bottom: 1px solid ${theme === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)'}; color: ${theme === 'dark' ? '#a1a1aa' : '#52525b'}; }
-                .docs-content blockquote { border-left: 3px solid ${theme === 'dark' ? '#34d399' : '#059669'}; padding: 0.75rem 1rem; margin: 1rem 0 1rem 1.4rem; border-radius: 0 0.5rem 0.5rem 0; background: ${theme === 'dark' ? 'rgba(52,211,153,0.05)' : 'rgba(5,150,105,0.04)'}; }
-                .docs-content blockquote p { color: ${theme === 'dark' ? '#a1a1aa' : '#52525b'}; margin-bottom: 0; }
-                .docs-content strong { color: ${theme === 'dark' ? '#fafafa' : '#18181b'}; }
-                .docs-content hr { border: none; border-top: 1px solid ${theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)'}; margin: 2rem 0; }
+                .docs-content th { text-align: left; padding: 0.6rem 0.75rem; font-weight: 600; color: #18181b dark:#e4e4e7; border-bottom: 2px solid rgba(0,0,0,0.1) dark:rgba(255,255,255,0.1); }
+                .docs-content td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.05) dark:rgba(255,255,255,0.05); color: #52525b dark:#a1a1aa; }
+                .docs-content blockquote { border-left: 3px solid #059669 dark:#34d399; padding: 0.75rem 1rem; margin: 1rem 0 1rem 1.4rem; border-radius: 0 0.5rem 0.5rem 0; background: rgba(5,150,105,0.04) dark:rgba(52,211,153,0.05); }
+                .docs-content blockquote p { color: #52525b dark:#a1a1aa; margin-bottom: 0; }
+                .docs-content strong { color: #18181b dark:#fafafa; }
+                .docs-content hr { border: none; border-top: 1px solid rgba(0,0,0,0.06) dark:rgba(255,255,255,0.06); margin: 2rem 0; }
             `}} />
         </div>
     );
diff --git a/pages/index.pyxl b/pages/index.pyxl
index 7c6ed9e..f9a3146 100644
--- a/pages/index.pyxl
+++ b/pages/index.pyxl
@@ -184,6 +184,18 @@ function Nav({ version }) {
                             <path d="M12 .3a12 12 0 00-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 016 0C17.3 4.7 18.3 5 18.3 5c.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0012 .3" />
                         </svg>
                     </a>
+                    <a
+                        href="https://github.com/pyxle-framework/pyxle-dev/blob/main/pages/index.pyxl"
+                        target="_blank"
+                        rel="noreferrer"
+                        aria-label="View page source"
+                        title="View page source"
+                        className="focus-ring hidden sm:inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300 dark:hover:bg-white/10 transition-colors"
+                    >
+                        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
+                        </svg>
+                    </a>
                     <ThemeToggle />
                     <button
                         type="button"
@@ -262,7 +274,7 @@ function Hero() {
                 </h1>
 
                 <p className="reveal mx-auto mt-6 max-w-xl text-pretty text-base sm:text-lg text-zinc-600 dark:text-zinc-400" style={{ animationDelay: '120ms' }}>
-                    The full-stack Python framework. Async server loaders, React UI, and server actions live together in a single <code className="rounded px-1.5 py-0.5 text-[0.85em] text-emerald-600 dark:text-emerald-400 bg-emerald-500/5 dark:bg-emerald-500/10">.pyxl</code> file. SSR and file routing come with it.
+                    The full-stack Python framework. Async server loaders, React UI, and server actions live together in a single <code className="rounded px-1.5 py-0.5 text-[0.85em] text-emerald-700 dark:text-emerald-400 bg-emerald-500/5 dark:bg-emerald-500/10">.pyxl</code> file. SSR and file routing come with it.
                 </p>
 
                 <div className="reveal mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row" style={{ animationDelay: '180ms' }}>
@@ -276,7 +288,7 @@ function Hero() {
                         </svg>
                     </Link>
                     <div className="focus-within:ring-2 focus-within:ring-emerald-500/40 inline-flex items-center gap-2 rounded-lg border px-3.5 py-2 text-sm font-mono border-zinc-200 bg-white text-zinc-700 dark:border-white/10 dark:bg-white/5 dark:text-zinc-300">
-                        <span className="text-zinc-400 dark:text-zinc-400 select-none">$</span>
+                        <span className="text-zinc-600 dark:text-zinc-400 select-none">$</span>
                         <span>pip install pyxle-framework</span>
                         <CopyButton text="pip install pyxle-framework" label="Copy" />
                     </div>
@@ -340,7 +352,7 @@ function Features() {
         <section id="features" className="relative px-5 sm:px-6 py-16 sm:py-20">
             <div className="mx-auto max-w-6xl">
                 <div className="reveal text-center mb-12">
-                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">What{"'"}s in the box</p>
+                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">What{"'"}s in the box</p>
                     <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">
                         Everything you need, nothing you don{"'"}t.
                     </h2>
@@ -353,7 +365,7 @@ function Features() {
                             className="reveal group rounded-xl border p-5 transition-colors border-zinc-200 bg-white hover:border-zinc-300 dark:border-white/5 dark:bg-white/[0.02] dark:hover:border-white/10"
                             style={{ animationDelay: `${i * 60}ms` }}
                         >
-                            <div className="mb-4 inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-emerald-600 dark:border-white/10 dark:bg-white/5 dark:text-emerald-400">
+                            <div className="mb-4 inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 bg-zinc-50 text-emerald-700 dark:border-white/10 dark:bg-white/5 dark:text-emerald-400">
                                 <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
                                     <path strokeLinecap="round" strokeLinejoin="round" d={f.d} />
                                 </svg>
@@ -384,12 +396,12 @@ function Numbers() {
             <div className="mx-auto max-w-6xl">
                 <div className="reveal flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end mb-8">
                     <div>
-                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Performance</p>
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">Performance</p>
                         <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Fast where it matters.</h2>
                     </div>
                     <Link
                         href="/benchmarks"
-                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-700 dark:text-emerald-400 hover:underline underline-offset-4"
                     >
                         Full benchmark methodology
                         <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -440,7 +452,7 @@ function ForAgents() {
         <section id="agents" className="relative px-5 sm:px-6 py-16 sm:py-20">
             <div className="mx-auto max-w-6xl">
                 <div className="reveal text-center mb-12">
-                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">For AI coding agents</p>
+                    <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">For AI coding agents</p>
                     <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">
                         The framework <span className="gradient-text">AI agents love</span>.
                     </h2>
@@ -465,7 +477,7 @@ function ForAgents() {
                 <div className="mt-10 text-center">
                     <Link
                         href="/docs/guides/for-ai-agents"
-                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-700 dark:text-emerald-400 hover:underline underline-offset-4"
                     >
                         Read the full case
                         <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -542,14 +554,14 @@ function Demos() {
             <div className="mx-auto max-w-6xl">
                 <div className="reveal flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end mb-8">
                     <div>
-                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Showcase</p>
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">Showcase</p>
                         <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Apps built with Pyxle.</h2>
                     </div>
                     <a
                         href="https://github.com/pyxle-framework/pyxle-demos"
                         target="_blank"
                         rel="noreferrer"
-                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:underline underline-offset-4"
+                        className="focus-ring inline-flex items-center gap-1.5 text-sm font-medium text-emerald-700 dark:text-emerald-400 hover:underline underline-offset-4"
                     >
                         Source on GitHub
                         <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
@@ -574,7 +586,7 @@ function Demos() {
                                     <h3 className="text-[15px] font-semibold">{d.name}</h3>
                                     <span className="text-xs text-zinc-500 dark:text-zinc-400">{d.tagline}</span>
                                 </div>
-                                <div className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400 transition-transform group-hover:translate-x-0.5">
+                                <div className="mt-3 inline-flex items-center gap-1 text-xs font-medium text-emerald-700 dark:text-emerald-400 transition-transform group-hover:translate-x-0.5">
                                     Try it live
                                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" aria-hidden="true">
                                         <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
@@ -626,7 +638,7 @@ function GetStarted() {
                 <div className="grid gap-10 lg:grid-cols-2 lg:gap-14">
                     {/* Install steps */}
                     <div className="reveal">
-                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600 dark:text-emerald-400">Get started</p>
+                        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-400">Get started</p>
                         <h2 className="mt-3 text-balance text-3xl sm:text-4xl font-semibold tracking-tight">Four commands.</h2>
                         <p className="mt-3 max-w-md text-sm sm:text-base text-zinc-600 dark:text-zinc-400">
                             Install, scaffold, run. The whole CLI vocabulary fits on one screen.
@@ -637,8 +649,8 @@ function GetStarted() {
                                     key={step.cmd}
                                     className="flex items-center gap-3 rounded-lg border px-3.5 py-2.5 font-mono text-[13px] border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.02]"
                                 >
-                                    <span className="font-sans text-[11px] font-medium text-zinc-400 dark:text-zinc-600 tabular-nums w-4">{i + 1}</span>
-                                    <span className="text-zinc-400 dark:text-zinc-400 select-none">$</span>
+                                    <span className="font-sans text-[11px] font-medium text-zinc-600 dark:text-zinc-400 tabular-nums w-4">{i + 1}</span>
+                                    <span className="text-zinc-600 dark:text-zinc-400 select-none">$</span>
                                     <span className="flex-1 truncate text-zinc-800 dark:text-zinc-200">{step.cmd}</span>
                                     <CopyButton text={step.cmd} />
                                 </li>
@@ -678,7 +690,7 @@ function GetStarted() {
                                 </div>
                                 <h3 className="mt-3 text-xl sm:text-2xl font-semibold tracking-tight">Release notes. Deep dives. No spam.</h3>
                                 <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
-                                    This form is a live <Link href="/docs/core-concepts/server-actions" className="underline decoration-dotted underline-offset-2 hover:text-emerald-600 dark:hover:text-emerald-400">@action</Link> — powered by Pyxle itself.
+                                    This form is a live <Link href="/docs/core-concepts/server-actions" className="underline decoration-dotted underline-offset-2 hover:text-emerald-700 dark:hover:text-emerald-400">@action</Link> — powered by Pyxle itself.
                                 </p>
                                 <form onSubmit={handleSubmit} className="mt-5 flex flex-col gap-2 sm:flex-row">
                                     <label htmlFor="newsletter-email" className="sr-only">Email address</label>
@@ -701,7 +713,7 @@ function GetStarted() {
                                     </button>
                                 </form>
                                 <div className="mt-3 min-h-[1.25rem] text-sm" aria-live="polite">
-                                    {status === 'success' && <p className="text-emerald-600 dark:text-emerald-400">{message}</p>}
+                                    {status === 'success' && <p className="text-emerald-700 dark:text-emerald-400">{message}</p>}
                                     {status === 'error'   && <p className="text-red-500 dark:text-red-400">{message}</p>}
                                 </div>
                             </div>
diff --git a/pages/not-found.pyxl b/pages/not-found.pyxl
index 075de3b..0e48705 100644
--- a/pages/not-found.pyxl
+++ b/pages/not-found.pyxl
@@ -21,28 +21,22 @@ export default function NotFoundPage() {
                 <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
                 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
             </Head>
-            <nav className={`relative z-20 border-b backdrop-blur-xl ${
-                theme === 'dark' ? 'bg-[#0a0a0b]/80 border-white/5' : 'bg-white/80 border-zinc-200'
-            }`}>
+            <nav className={`relative z-20 border-b backdrop-blur-xl bg-white/80 border-zinc-200 dark:bg-[#0a0a0b]/80 dark:border-white/5`}>
                 <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
                     <Link href="/" className="flex items-center gap-3">
                         <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-7 w-7" />
                         <span className="text-lg font-semibold tracking-tight">Pyxle</span>
                     </Link>
                     <div className="flex items-center gap-2 sm:gap-4">
-                        <Link href="/docs" className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Docs</Link>
+                        <Link href="/docs" className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Docs</Link>
                         <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                           className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>GitHub</a>
+                           className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>GitHub</a>
                         <a
                             href="https://github.com/pyxle-framework/pyxle-dev/blob/main/pages/not-found.pyxl"
                             target="_blank"
                             rel="noreferrer"
                             title="View page source"
-                            className={`rounded-lg border p-2 transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                    : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                            }`}
+                            className={`rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white`}
                         >
                             <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                                 <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
diff --git a/pages/playground.pyxl b/pages/playground.pyxl
index 1a65cef..c8e04ea 100644
--- a/pages/playground.pyxl
+++ b/pages/playground.pyxl
@@ -159,11 +159,7 @@ function CopyButton({ text }) {
     return (
         <button
             onClick={copy}
-            className={`absolute right-3 top-3 rounded-md border px-2 py-1 text-xs transition ${
-                theme === 'dark'
-                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                    : 'border-zinc-200 bg-zinc-100 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-900'
-            }`}
+            className={`absolute right-3 top-3 rounded-md border px-2 py-1 text-xs transition border-zinc-200 bg-zinc-100 text-zinc-500 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white`}
             aria-label="Copy to clipboard"
         >
             {copied ? "Copied!" : "Copy"}
@@ -175,9 +171,9 @@ function SectionLabel({ label, title, subtitle }) {
     const { theme } = useTheme();
     return (
         <div className="mb-10">
-            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-400">{label}</p>
+            <p className="text-sm font-semibold uppercase tracking-widest text-emerald-700 dark:text-emerald-400">{label}</p>
             <h2 className="mt-3 text-2xl font-bold tracking-tight sm:text-3xl">{title}</h2>
-            {subtitle && <p className={`mt-3 max-w-3xl ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{subtitle}</p>}
+            {subtitle && <p className={`mt-3 max-w-3xl text-zinc-600 dark:text-zinc-400`}>{subtitle}</p>}
         </div>
     );
 }
@@ -201,12 +197,8 @@ function HighlightedCode({ code, lang = 'pyxl' }) {
 function CodeWindow({ title, code, lang = 'pyxl', className = '' }) {
     const { theme } = useTheme();
     return (
-        <div className={`relative rounded-xl border overflow-hidden min-w-0 ${
-            theme === 'dark' ? 'border-white/10 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-        } ${className}`}>
-            <div className={`flex items-center gap-2 border-b px-4 py-3 ${
-                theme === 'dark' ? 'border-white/5' : 'border-zinc-700/30'
-            }`}>
+        <div className={`relative rounded-xl border overflow-hidden min-w-0 border-zinc-200 bg-[#1a1a2e] dark:border-white/10 dark:bg-[#111113] ${className}`}>
+            <div className={`flex items-center gap-2 border-b px-4 py-3 border-zinc-700/30 dark:border-white/5`}>
                 <span className="h-3 w-3 rounded-full bg-red-500/80" />
                 <span className="h-3 w-3 rounded-full bg-yellow-500/80" />
                 <span className="h-3 w-3 rounded-full bg-green-500/80" />
@@ -225,34 +217,28 @@ function CodeWindow({ title, code, lang = 'pyxl', className = '' }) {
 function PlaygroundNav({ version }) {
     const { theme } = useTheme();
     return (
-        <nav className={`sticky top-0 z-50 border-b backdrop-blur-xl ${
-            theme === 'dark' ? 'bg-[#0a0a0b]/80 border-white/5' : 'bg-white/80 border-zinc-200'
-        }`}>
+        <nav className={`sticky top-0 z-50 border-b backdrop-blur-xl bg-white/80 border-zinc-200 dark:bg-[#0a0a0b]/80 dark:border-white/5`}>
             <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
                 <div className="flex items-center gap-3">
                     <Link href="/" className="flex items-center gap-3">
                         <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-7 w-7" />
                         <span className="text-lg font-semibold tracking-tight">Pyxle</span>
                     </Link>
-                    <span className={`text-sm ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>/</span>
+                    <span className={`text-sm text-zinc-600 dark:text-zinc-400`}>/</span>
                     <a href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} className="text-sm font-medium cursor-pointer">Playground</a>
                 </div>
                 <div className="flex items-center gap-2 sm:gap-4">
-                    <Link href="/" className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Home</Link>
-                    <Link href="/benchmarks" className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Benchmarks</Link>
-                    <Link href="/docs" className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>Docs</Link>
+                    <Link href="/" className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Home</Link>
+                    <Link href="/benchmarks" className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Benchmarks</Link>
+                    <Link href="/docs" className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Docs</Link>
                     <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                       className={`hidden sm:block text-sm transition ${theme === 'dark' ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}>GitHub</a>
+                       className={`hidden sm:block text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>GitHub</a>
                     <a
                         href="https://github.com/pyxle-framework/pyxle-dev/blob/main/pages/playground.pyxl"
                         target="_blank"
                         rel="noreferrer"
                         title="View page source"
-                        className={`rounded-lg border p-2 transition ${
-                            theme === 'dark'
-                                ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                        }`}
+                        className={`rounded-lg border p-2 transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white`}
                     >
                         <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
@@ -463,28 +449,18 @@ function Hero({ data }) {
                 </Reveal>
 
                 <Reveal delay={80}>
-                    <p className={`mt-6 text-lg sm:text-xl max-w-2xl mx-auto ${
-                        theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'
-                    }`}>
+                    <p className={`mt-6 text-lg sm:text-xl max-w-2xl mx-auto text-zinc-600 dark:text-zinc-400`}>
                         This page is a live Pyxle app. Every interaction below hits a real Python server.
                     </p>
                 </Reveal>
 
                 <Reveal delay={160}>
                     <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
-                        <span className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-mono ${
-                            theme === 'dark'
-                                ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400'
-                                : 'border-emerald-200 bg-emerald-50 text-emerald-700'
-                        }`}>
+                        <span className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm font-mono border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-400`}>
                             <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
                             Rendered by Python in {data.renderMs}ms
                         </span>
-                        <span className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm ${
-                            theme === 'dark'
-                                ? 'border-white/10 bg-white/5 text-zinc-400'
-                                : 'border-zinc-200 bg-zinc-100 text-zinc-600'
-                        }`}>
+                        <span className={`inline-flex items-center gap-2 rounded-full border px-4 py-2 text-sm border-zinc-200 bg-zinc-100 text-zinc-600 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400`}>
                             <AnimatedCounter value={data.totalViews} /> developers have explored this page
                         </span>
                     </div>
@@ -494,9 +470,7 @@ function Hero({ data }) {
                     <a
                         href="#format-section"
                         onClick={scrollToContent}
-                        className={`mt-12 inline-block animate-bounce cursor-pointer transition ${
-                            theme === 'dark' ? 'text-zinc-600 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'
-                        }`}
+                        className={`mt-12 inline-block animate-bounce cursor-pointer transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}
                         aria-label="Scroll to content"
                     >
                         <svg className="mx-auto h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
@@ -588,12 +562,8 @@ function PyxFormatSection() {
                 <Reveal delay={80}>
                     <div className="grid lg:grid-cols-5 gap-6 items-stretch">
                         <div className="lg:col-span-3 flex min-w-0">
-                            <div className={`flex-1 min-w-0 relative rounded-xl border overflow-hidden ${
-                                theme === 'dark' ? 'border-white/10 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-                            }`}>
-                                <div className={`flex items-center gap-2 border-b px-4 py-3 ${
-                                    theme === 'dark' ? 'border-white/5' : 'border-zinc-700/30'
-                                }`}>
+                            <div className={`flex-1 min-w-0 relative rounded-xl border overflow-hidden border-zinc-200 bg-[#1a1a2e] dark:border-white/10 dark:bg-[#111113]`}>
+                                <div className={`flex items-center gap-2 border-b px-4 py-3 border-zinc-700/30 dark:border-white/5`}>
                                     <span className="h-3 w-3 rounded-full bg-red-500/80" />
                                     <span className="h-3 w-3 rounded-full bg-yellow-500/80" />
                                     <span className="h-3 w-3 rounded-full bg-green-500/80" />
@@ -611,18 +581,14 @@ function PyxFormatSection() {
                                     <div
                                         className={`rounded-lg border p-4 cursor-pointer transition-all ${
                                             activeAnnotation === i
-                                                ? theme === 'dark'
-                                                    ? 'border-emerald-500/30 bg-emerald-500/[0.05]'
-                                                    : 'border-emerald-500/40 bg-emerald-50/50'
-                                                : theme === 'dark'
-                                                    ? 'border-white/5 bg-white/[0.02] hover:border-white/10'
-                                                    : 'border-zinc-200 bg-zinc-50 hover:border-zinc-300'
+                                                ? 'border-emerald-500/40 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/[0.05]'
+                                                : 'border-zinc-200 bg-zinc-50 hover:border-zinc-300 dark:border-white/5 dark:bg-white/[0.02] dark:hover:border-white/10'
                                         }`}
                                         onMouseEnter={() => setActiveAnnotation(i)}
                                         onMouseLeave={() => setActiveAnnotation(-1)}
                                     >
                                         <code className={`text-sm font-mono font-semibold ${item.color}`}>{item.marker}</code>
-                                        <p className={`mt-1 text-sm ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{item.desc}</p>
+                                        <p className={`mt-1 text-sm text-zinc-600 dark:text-zinc-400`}>{item.desc}</p>
                                     </div>
                                 </Reveal>
                             ))}
@@ -679,7 +645,7 @@ function ServerDemoSection({ data }) {
     ];
 
     return (
-        <section className={`relative px-6 py-24 ${theme === 'dark' ? 'bg-white/[0.01]' : 'bg-zinc-50/50'}`}>
+        <section className={`relative px-6 py-24 bg-zinc-50/50 dark:bg-white/[0.01]`}>
             <div className="relative z-10 mx-auto max-w-6xl">
                 <Reveal>
                     <SectionLabel
@@ -695,19 +661,13 @@ function ServerDemoSection({ data }) {
                     </Reveal>
 
                     <Reveal delay={160} className="flex min-w-0">
-                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 flex flex-col ${
-                            theme === 'dark' ? 'border-white/10 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                        }`}>
+                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 flex flex-col border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.02]`}>
                             <div className="flex items-center justify-between mb-6">
                                 <h3 className="text-lg font-semibold">Live Result</h3>
                                 <button
                                     onClick={handleRefresh}
                                     disabled={refreshing}
-                                    className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition ${
-                                        theme === 'dark'
-                                            ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10 hover:text-white'
-                                            : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900'
-                                    } ${refreshing ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                    className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs font-medium transition border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 hover:text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white ${refreshing ? 'opacity-50 cursor-not-allowed' : ''}`}
                                 >
                                     <svg className={`h-3.5 w-3.5 ${refreshing ? 'animate-spin' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                         <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
@@ -718,18 +678,16 @@ function ServerDemoSection({ data }) {
                             <div className="space-y-4 flex-1">
                                 {fields.map((f, i) => (
                                     <div key={f.label} className="flex items-baseline justify-between gap-4">
-                                        <span className={`text-xs uppercase tracking-wider ${
-                                            theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'
-                                        }`}>{f.label}</span>
+                                        <span className={`text-xs uppercase tracking-wider text-zinc-600 dark:text-zinc-400`}>{f.label}</span>
                                         <span className={`font-mono text-sm transition-colors duration-500 ${
                                             f.changing && highlight
-                                                ? 'text-emerald-400'
-                                                : theme === 'dark' ? 'text-zinc-200' : 'text-zinc-800'
+                                                ? 'text-emerald-700 dark:text-emerald-400'
+                                                : 'text-zinc-800 dark:text-zinc-200'
                                         }`}>{f.value}</span>
                                     </div>
                                 ))}
                             </div>
-                            <p className={`mt-auto pt-6 text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
+                            <p className={`mt-auto pt-6 text-xs text-zinc-600 dark:text-zinc-400`}>
                                 This data came from Python, rendered by React, in one file.
                             </p>
                         </div>
@@ -826,12 +784,10 @@ function ReactionBoard({ data }) {
 
                 <div className="grid lg:grid-cols-2 gap-6 items-stretch">
                     <Reveal delay={80} className="flex min-w-0">
-                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 flex flex-col ${
-                            theme === 'dark' ? 'border-white/10 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                        }`}>
+                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 flex flex-col border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.02]`}>
                             <div className="flex items-center justify-between mb-6">
                                 <h3 className="text-lg font-semibold">React to this page</h3>
-                                <span className={`text-sm font-mono ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                                <span className={`text-sm font-mono text-zinc-600 dark:text-zinc-400`}>
                                     <AnimatedCounter value={total} /> total
                                 </span>
                             </div>
@@ -842,17 +798,11 @@ function ReactionBoard({ data }) {
                                         onClick={() => handleClick(key)}
                                         className={`relative flex flex-col items-center gap-2 rounded-xl border p-4 transition-all ${
                                             animating[key] ? 'scale-95' : 'scale-100'
-                                        } ${
-                                            theme === 'dark'
-                                                ? 'border-white/10 bg-white/[0.02] hover:border-emerald-500/30 hover:bg-emerald-500/[0.05]'
-                                                : 'border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50'
-                                        }`}
+                                        } border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/[0.05]`}
                                     >
                                         <span className="text-2xl select-none">{icon}</span>
-                                        <span className={`text-xs ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>{label}</span>
-                                        <span className={`font-mono text-sm font-semibold ${
-                                            theme === 'dark' ? 'text-zinc-300' : 'text-zinc-700'
-                                        }`}>{counts[key] || 0}</span>
+                                        <span className={`text-xs text-zinc-600 dark:text-zinc-400`}>{label}</span>
+                                        <span className={`font-mono text-sm font-semibold text-zinc-700 dark:text-zinc-300`}>{counts[key] || 0}</span>
                                         {latencies[key] && (
                                             <span className="absolute -top-2 -right-2 rounded-full bg-emerald-500 px-1.5 py-0.5 text-[10px] font-mono text-white animate-fade-in">
                                                 {latencies[key]}ms
@@ -866,7 +816,7 @@ function ReactionBoard({ data }) {
                                     {error}
                                 </p>
                             )}
-                            <p className={`mt-auto pt-6 text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
+                            <p className={`mt-auto pt-6 text-xs text-zinc-600 dark:text-zinc-400`}>
                                 Every click is a POST to Python. No API routes needed.
                             </p>
                         </div>
@@ -928,7 +878,7 @@ function TextTransformSection() {
     }, [text, mode, runTransform]);
 
     return (
-        <section className={`relative px-6 py-24 ${theme === 'dark' ? 'bg-white/[0.01]' : 'bg-zinc-50/50'}`}>
+        <section className={`relative px-6 py-24 bg-zinc-50/50 dark:bg-white/[0.01]`}>
             <div className="relative z-10 mx-auto max-w-6xl">
                 <Reveal>
                     <SectionLabel
@@ -940,9 +890,7 @@ function TextTransformSection() {
 
                 <div className="grid lg:grid-cols-2 gap-6 items-stretch">
                     <Reveal delay={80} className="flex min-w-0">
-                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 ${
-                            theme === 'dark' ? 'border-white/10 bg-white/[0.02]' : 'border-zinc-200 bg-white'
-                        }`}>
+                        <div className={`flex-1 rounded-xl border p-6 sm:p-8 border-zinc-200 bg-white dark:border-white/10 dark:bg-white/[0.02]`}>
                             <div className="mb-4">
                                 <input
                                     type="text"
@@ -950,11 +898,7 @@ function TextTransformSection() {
                                     onChange={(e) => setText(e.target.value)}
                                     placeholder="Type something..."
                                     maxLength={500}
-                                    className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition placeholder:text-zinc-500 focus:ring-2 focus:ring-emerald-500/40 ${
-                                        theme === 'dark'
-                                            ? 'border-white/10 bg-white/5 text-white'
-                                            : 'border-zinc-300 bg-white text-zinc-900'
-                                    }`}
+                                    className={`w-full rounded-lg border px-4 py-3 text-sm outline-none transition placeholder:text-zinc-500 focus:ring-2 focus:ring-emerald-500/40 border-zinc-300 bg-white text-zinc-900 dark:border-white/10 dark:bg-white/5 dark:text-white`}
                                 />
                             </div>
                             <div className="flex flex-wrap gap-2 mb-6">
@@ -964,27 +908,21 @@ function TextTransformSection() {
                                         onClick={() => setMode(m.key)}
                                         className={`rounded-lg border px-3 py-1.5 text-xs font-medium transition ${
                                             mode === m.key
-                                                ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400'
-                                                : theme === 'dark'
-                                                    ? 'border-white/10 bg-white/5 text-zinc-400 hover:bg-white/10'
-                                                    : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200'
+                                                ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400'
+                                                : 'border-zinc-200 bg-zinc-100 text-zinc-600 hover:bg-zinc-200 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400 dark:hover:bg-white/10'
                                         }`}
                                     >
                                         {m.label}
                                     </button>
                                 ))}
                             </div>
-                            <div className={`min-h-[60px] rounded-lg border p-4 font-mono text-sm transition-all ${
-                                theme === 'dark'
-                                    ? 'border-white/5 bg-white/[0.02] text-zinc-300'
-                                    : 'border-zinc-200 bg-zinc-50 text-zinc-700'
-                            }`}>
+                            <div className={`min-h-[60px] rounded-lg border p-4 font-mono text-sm transition-all border-zinc-200 bg-zinc-50 text-zinc-700 dark:border-white/5 dark:bg-white/[0.02] dark:text-zinc-300`}>
                                 {transform.pending ? (
-                                    <span className={theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}>Processing...</span>
+                                    <span className={'text-zinc-600 dark:text-zinc-400'}>Processing...</span>
                                 ) : result ? (
                                     result
                                 ) : (
-                                    <span className={theme === 'dark' ? 'text-zinc-700' : 'text-zinc-300'}>Result appears here...</span>
+                                    <span className={'text-zinc-300 dark:text-zinc-500'}>Result appears here...</span>
                                 )}
                             </div>
                         </div>
@@ -1026,27 +964,23 @@ function SPANavSection() {
                         <Reveal key={page.href} delay={80 + i * 70}>
                             <Link
                                 href={page.href}
-                                className={`group block rounded-xl border p-6 transition-all ${
-                                    theme === 'dark'
-                                        ? 'border-white/10 bg-white/[0.02] hover:border-emerald-500/30 hover:bg-emerald-500/[0.03]'
-                                        : 'border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50'
-                                }`}
+                                className={`group block rounded-xl border p-6 transition-all border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-emerald-500/30 dark:hover:bg-emerald-500/[0.03]`}
                             >
                                 <h3 className="text-lg font-semibold flex items-center gap-2">
                                     {page.title}
-                                    <svg className="h-4 w-4 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-0 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                                    <svg className="h-4 w-4 opacity-0 -translate-x-1 transition group-hover:opacity-100 group-hover:translate-x-0 text-emerald-700 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                         <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                                     </svg>
                                 </h3>
-                                <p className={`mt-2 text-sm ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{page.desc}</p>
-                                <span className={`inline-block mt-3 font-mono text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>{page.href}</span>
+                                <p className={`mt-2 text-sm text-zinc-600 dark:text-zinc-400`}>{page.desc}</p>
+                                <span className={`inline-block mt-3 font-mono text-xs text-zinc-600 dark:text-zinc-400`}>{page.href}</span>
                             </Link>
                         </Reveal>
                     ))}
                 </div>
 
                 <Reveal delay={300}>
-                    <p className={`mt-8 text-sm text-center ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>
+                    <p className={`mt-8 text-sm text-center text-zinc-600 dark:text-zinc-400`}>
                         View page source (Ctrl+U) — the HTML is already there. Server-rendered by Python.
                     </p>
                 </Reveal>
@@ -1074,7 +1008,7 @@ function FileRoutingSection() {
     const { theme } = useTheme();
 
     return (
-        <section className={`relative px-6 py-24 ${theme === 'dark' ? 'bg-white/[0.01]' : 'bg-zinc-50/50'}`}>
+        <section className={`relative px-6 py-24 bg-zinc-50/50 dark:bg-white/[0.01]`}>
             <div className="relative z-10 mx-auto max-w-6xl">
                 <Reveal>
                     <SectionLabel
@@ -1085,12 +1019,8 @@ function FileRoutingSection() {
                 </Reveal>
 
                 <Reveal delay={80}>
-                    <div className={`rounded-xl border overflow-hidden max-w-2xl ${
-                        theme === 'dark' ? 'border-white/10 bg-[#111113]' : 'border-zinc-200 bg-[#1a1a2e]'
-                    }`}>
-                        <div className={`flex items-center gap-2 border-b px-4 py-3 ${
-                            theme === 'dark' ? 'border-white/5' : 'border-zinc-700/30'
-                        }`}>
+                    <div className={`rounded-xl border overflow-hidden max-w-2xl border-zinc-200 bg-[#1a1a2e] dark:border-white/10 dark:bg-[#111113]`}>
+                        <div className={`flex items-center gap-2 border-b px-4 py-3 border-zinc-700/30 dark:border-white/5`}>
                             <span className="h-3 w-3 rounded-full bg-red-500/80" />
                             <span className="h-3 w-3 rounded-full bg-yellow-500/80" />
                             <span className="h-3 w-3 rounded-full bg-green-500/80" />
@@ -1124,15 +1054,15 @@ function FileRoutingSection() {
                                                     <path strokeLinecap="round" strokeLinejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                                 </svg>
                                             ) : (
-                                                <svg className={`h-4 w-4 ${item.type === 'special' ? 'text-zinc-500' : 'text-emerald-400/70'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+                                                <svg className={`h-4 w-4 ${item.type === 'special' ? 'text-zinc-500' : 'text-emerald-700 dark:text-emerald-400/70'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                                 </svg>
                                             )}
-                                            <span className={item.current ? 'text-emerald-400' : 'text-zinc-300'}>{item.file}</span>
+                                            <span className={item.current ? 'text-emerald-700 dark:text-emerald-400' : 'text-zinc-300'}>{item.file}</span>
                                             {item.current && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />}
                                         </span>
                                         {routeLabel && (
-                                            <span className={`text-xs ${item.current ? 'text-emerald-400/70' : 'text-zinc-500'}`}>
+                                            <span className={`text-xs ${item.current ? 'text-emerald-700 dark:text-emerald-400/70' : 'text-zinc-500'}`}>
                                                 {routeLabel}
                                             </span>
                                         )}
@@ -1185,20 +1115,14 @@ function FeatureGrid() {
                 <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                     {FEATURES.map((f, i) => (
                         <Reveal key={f.title} delay={i * 50}>
-                            <div className={`rounded-xl border p-5 transition ${
-                                theme === 'dark'
-                                    ? 'border-white/5 bg-white/[0.02] hover:border-emerald-500/20 hover:bg-emerald-500/[0.03]'
-                                    : 'border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50'
-                            }`}>
-                                <div className={`inline-flex rounded-lg border p-2 text-emerald-400 mb-3 ${
-                                    theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                }`}>
+                            <div className={`rounded-xl border p-5 transition border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/50 dark:border-white/5 dark:bg-white/[0.02] dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/[0.03]`}>
+                                <div className={`inline-flex rounded-lg border p-2 text-emerald-700 dark:text-emerald-400 mb-3 border-zinc-200 bg-zinc-50 dark:border-white/10 dark:bg-white/5`}>
                                     <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                                         <path strokeLinecap="round" strokeLinejoin="round" d={f.icon} />
                                     </svg>
                                 </div>
                                 <h3 className="text-sm font-semibold mb-1">{f.title}</h3>
-                                <p className={`text-xs leading-relaxed ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-500'}`}>{f.desc}</p>
+                                <p className={`text-xs leading-relaxed text-zinc-500 dark:text-zinc-400`}>{f.desc}</p>
                             </div>
                         </Reveal>
                     ))}
@@ -1241,7 +1165,7 @@ const ECOSYSTEM = [
 function EcosystemSection() {
     const { theme } = useTheme();
     return (
-        <section className={`relative px-6 py-24 ${theme === 'dark' ? 'bg-white/[0.01]' : 'bg-zinc-50/50'}`}>
+        <section className={`relative px-6 py-24 bg-zinc-50/50 dark:bg-white/[0.01]`}>
             <div className="relative z-10 mx-auto max-w-4xl">
                 <Reveal>
                     <SectionLabel
@@ -1254,15 +1178,9 @@ function EcosystemSection() {
                 <div className="grid sm:grid-cols-2 gap-5">
                     {ECOSYSTEM.map((item, i) => (
                         <Reveal key={item.title} delay={80 + i * 70}>
-                            <div className={`rounded-xl border p-6 sm:p-8 h-full transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/[0.02] hover:border-emerald-500/20 hover:bg-emerald-500/[0.02]'
-                                    : 'border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/30'
-                            }`}>
+                            <div className={`rounded-xl border p-6 sm:p-8 h-full transition border-zinc-200 bg-white hover:border-emerald-500/30 hover:bg-emerald-50/30 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-emerald-500/20 dark:hover:bg-emerald-500/[0.02]`}>
                                 <div className="flex items-start gap-4">
-                                    <div className={`flex-shrink-0 inline-flex rounded-lg border p-2.5 text-emerald-400 ${
-                                        theme === 'dark' ? 'border-white/10 bg-white/5' : 'border-zinc-200 bg-zinc-50'
-                                    }`}>
+                                    <div className={`flex-shrink-0 inline-flex rounded-lg border p-2.5 text-emerald-700 dark:text-emerald-400 border-zinc-200 bg-zinc-50 dark:border-white/10 dark:bg-white/5`}>
                                         <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor">
                                             <path strokeLinecap="round" strokeLinejoin="round" d={item.icon} />
                                         </svg>
@@ -1275,33 +1193,23 @@ function EcosystemSection() {
                                                     href={item.href}
                                                     target="_blank"
                                                     rel="noopener noreferrer"
-                                                    className={`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider transition ${
-                                                        theme === 'dark'
-                                                            ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
-                                                            : 'border-emerald-500/40 bg-emerald-50 text-emerald-600 hover:bg-emerald-100'
-                                                    }`}
+                                                    className={`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider transition border-emerald-500/40 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-400 dark:hover:bg-emerald-500/20`}
                                                 >
                                                     Beta
                                                 </a>
                                             ) : (
-                                                <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium ${
-                                                    theme === 'dark'
-                                                        ? 'border-white/10 bg-white/5 text-zinc-500'
-                                                        : 'border-zinc-200 bg-zinc-100 text-zinc-500'
-                                                }`}>
+                                                <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium border-zinc-200 bg-zinc-100 text-zinc-500 dark:border-white/10 dark:bg-white/5 dark:text-zinc-400`}>
                                                     In development
                                                 </span>
                                             )}
                                         </div>
-                                        <p className={`text-sm leading-relaxed ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>{item.desc}</p>
+                                        <p className={`text-sm leading-relaxed text-zinc-600 dark:text-zinc-400`}>{item.desc}</p>
                                         {item.href && (
                                             <a
                                                 href={item.href}
                                                 target="_blank"
                                                 rel="noopener noreferrer"
-                                                className={`mt-3 inline-flex items-center gap-1 text-xs font-medium transition ${
-                                                    theme === 'dark' ? 'text-emerald-400 hover:text-emerald-300' : 'text-emerald-600 hover:text-emerald-700'
-                                                }`}
+                                                className={`mt-3 inline-flex items-center gap-1 text-xs font-medium transition text-emerald-700 hover:text-emerald-700 dark:text-emerald-400 dark:hover:text-emerald-300`}
                                             >
                                                 Install from VS Code Marketplace
                                                 <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
@@ -1331,7 +1239,7 @@ function CTASection() {
                     <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
                         Ready to Build?
                     </h2>
-                    <p className={`mt-4 text-lg ${theme === 'dark' ? 'text-zinc-400' : 'text-zinc-600'}`}>
+                    <p className={`mt-4 text-lg text-zinc-600 dark:text-zinc-400`}>
                         Get started in under a minute.
                     </p>
                 </Reveal>
@@ -1344,12 +1252,8 @@ function CTASection() {
                             'pyxle install',
                             'pyxle dev',
                         ].map((cmd, i) => (
-                            <div key={i} className={`relative group rounded-lg border font-mono text-sm px-4 py-3 ${
-                                theme === 'dark'
-                                    ? 'border-white/10 bg-white/[0.02] text-emerald-400'
-                                    : 'border-zinc-200 bg-zinc-50 text-emerald-600'
-                            }`}>
-                                <span className={`mr-2 select-none ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>$</span>
+                            <div key={i} className={`relative group rounded-lg border font-mono text-sm px-4 py-3 border-zinc-200 bg-zinc-50 text-emerald-700 dark:border-white/10 dark:bg-white/[0.02] dark:text-emerald-400`}>
+                                <span className={`mr-2 select-none text-zinc-600 dark:text-zinc-400`}>$</span>
                                 {cmd}
                                 <CopyButton text={cmd} />
                             </div>
@@ -1361,11 +1265,7 @@ function CTASection() {
                     <div className="mt-10 flex flex-wrap items-center justify-center gap-4">
                         <Link
                             href="/docs"
-                            className={`rounded-xl px-6 py-3 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'bg-white text-black hover:bg-zinc-200'
-                                    : 'bg-zinc-900 text-white hover:bg-zinc-700'
-                            }`}
+                            className={`rounded-xl px-6 py-3 text-sm font-semibold transition bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-white dark:text-black dark:hover:bg-zinc-200`}
                         >
                             Read the docs
                         </Link>
@@ -1373,11 +1273,7 @@ function CTASection() {
                             href="https://github.com/pyxle-framework/pyxle"
                             target="_blank"
                             rel="noreferrer"
-                            className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition ${
-                                theme === 'dark'
-                                    ? 'border-white/10 text-white hover:bg-white/5'
-                                    : 'border-zinc-300 text-zinc-900 hover:bg-zinc-50'
-                            }`}
+                            className={`inline-flex items-center gap-2 rounded-xl border px-6 py-3 text-sm font-semibold transition border-zinc-300 text-zinc-900 hover:bg-zinc-50 dark:border-white/10 dark:text-white dark:hover:bg-white/5`}
                         >
                             <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                                 <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
@@ -1396,24 +1292,22 @@ function CTASection() {
 function PlaygroundFooter() {
     const { theme } = useTheme();
     return (
-        <footer className={`border-t px-6 py-12 ${theme === 'dark' ? 'border-white/5' : 'border-zinc-200'}`}>
+        <footer className={`border-t px-6 py-12 border-zinc-200 dark:border-white/5`}>
             <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-6 sm:flex-row">
                 <div className="flex items-center gap-3">
                     <img src="/branding/pyxle-mark.svg" alt="Pyxle" className="h-6 w-6 opacity-50" />
-                    <span className={`text-sm ${theme === 'dark' ? 'text-zinc-500' : 'text-zinc-400'}`}>Pyxle Framework</span>
+                    <span className={`text-sm text-zinc-600 dark:text-zinc-400`}>Pyxle Framework</span>
                 </div>
                 <div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-2">
-                    <Link href="/" className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>Home</Link>
-                    <Link href="/docs" className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>Docs</Link>
-                    <Link href="/benchmarks" className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>Benchmarks</Link>
+                    <Link href="/" className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Home</Link>
+                    <Link href="/docs" className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Docs</Link>
+                    <Link href="/benchmarks" className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>Benchmarks</Link>
                     <a href="https://github.com/pyxle-framework/pyxle" target="_blank" rel="noreferrer"
-                       className={`text-sm transition ${theme === 'dark' ? 'text-zinc-500 hover:text-white' : 'text-zinc-400 hover:text-zinc-900'}`}>GitHub</a>
+                       className={`text-sm transition text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white`}>GitHub</a>
                 </div>
             </div>
-            <div className={`mx-auto max-w-6xl mt-8 pt-6 border-t text-center ${
-                theme === 'dark' ? 'border-white/5' : 'border-zinc-100'
-            }`}>
-                <p className={`text-xs ${theme === 'dark' ? 'text-zinc-600' : 'text-zinc-400'}`}>
+            <div className={`mx-auto max-w-6xl mt-8 pt-6 border-t text-center border-zinc-100 dark:border-white/5`}>
+                <p className={`text-xs text-zinc-600 dark:text-zinc-400`}>
                     This site is built with Pyxle.{' '}
                     <a
                         href="https://github.com/pyxle-framework/pyxle-dev"
@@ -1451,16 +1345,18 @@ export default function PlaygroundPage({ data }) {
             </Head>
             <style dangerouslySetInnerHTML={{ __html: HIGHLIGHT_CSS }} />
             <PlaygroundNav version={data.version} />
-            <Hero data={data} />
-            <PyxFormatSection />
-            <ServerDemoSection data={data} />
-            <ReactionBoard data={data} />
-            <TextTransformSection />
-            <SPANavSection />
-            <FileRoutingSection />
-            <FeatureGrid />
-            <EcosystemSection />
-            <CTASection />
+            <main id="main">
+                <Hero data={data} />
+                <PyxFormatSection />
+                <ServerDemoSection data={data} />
+                <ReactionBoard data={data} />
+                <TextTransformSection />
+                <SPANavSection />
+                <FileRoutingSection />
+                <FeatureGrid />
+                <EcosystemSection />
+                <CTASection />
+            </main>
             <PlaygroundFooter />
         </>
     );

From 6d8665b42bf2ef92af57a160b1ca11ec4f352685 Mon Sep 17 00:00:00 2001
From: Shivam Saini <shivamsn97@gmail.com>
Date: Sat, 18 Apr 2026 16:09:59 +0530
Subject: [PATCH 3/3] chore(fonts): drop Google Fonts from sub-pages for visual
 consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The landing redesign stopped loading Inter + JetBrains Mono from Google
Fonts, but the other four pages (playground, docs, benchmarks, not-found)
still carried the <link rel="stylesheet" href="fonts.googleapis..."> in
their <Head>. That made the homepage render in the system font stack
while every sub-page rendered in Inter — a visible font-shift the moment
you clicked into /docs from /.

Remove the Google Fonts links from all four sub-pages, update
tailwind.config.cjs's fontFamily.sans/mono to the same system-font
stack the global stylesheet already uses, and replace two inline
'JetBrains Mono' rules in the docs stylesheet with the system mono
fallback. Every page is now truly system-font-only.

Side effect: Lighthouse perf on /playground, /docs, and /benchmarks
goes from 99 → 100 (no more render-blocking fonts.googleapis.com
request). All four pages now score 100/100/100/100 in both light
and dark modes.
---
 pages/benchmarks.pyxl       | 3 ---
 pages/docs/[[...slug]].pyxl | 9 +++------
 pages/not-found.pyxl        | 3 ---
 pages/playground.pyxl       | 3 ---
 tailwind.config.cjs         | 4 ++--
 5 files changed, 5 insertions(+), 17 deletions(-)

diff --git a/pages/benchmarks.pyxl b/pages/benchmarks.pyxl
index 17f1a7c..e676348 100644
--- a/pages/benchmarks.pyxl
+++ b/pages/benchmarks.pyxl
@@ -277,9 +277,6 @@ export default function BenchmarksPage({ data }) {
                 <meta name="description" content="Transparent performance benchmarks comparing Pyxle against FastAPI, Django, Flask, Express, Hono, and Next.js." />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="preconnect" href="https://fonts.googleapis.com" />
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
                 <meta property="og:title" content="Pyxle Benchmarks - Framework Performance Comparison" />
                 <meta property="og:description" content="See how Pyxle performs against popular Python and Node.js frameworks." />
                 <meta property="og:image" content="https://pyxle.dev/branding/og-default.png" />
diff --git a/pages/docs/[[...slug]].pyxl b/pages/docs/[[...slug]].pyxl
index 0b7ef6f..3e7b676 100644
--- a/pages/docs/[[...slug]].pyxl
+++ b/pages/docs/[[...slug]].pyxl
@@ -625,9 +625,6 @@ export default function DocsPage({ data }) {
                 <meta name="description" content="Pyxle framework documentation. Learn to build full-stack Python + React apps." />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="preconnect" href="https://fonts.googleapis.com" />
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
                 <meta property="og:title" content="Documentation - Pyxle Framework" />
                 <meta property="og:description" content="Pyxle framework documentation. Learn to build full-stack Python + React apps." />
                 <meta property="og:image" content="https://pyxle.dev/branding/og-default.png" />
@@ -740,7 +737,7 @@ export default function DocsPage({ data }) {
                 .heading-anchor { opacity: 0; display: inline-flex; align-items: center; margin-right: 0.4rem; vertical-align: middle; transition: opacity 0.15s, color 0.15s; color: #94a3b8 dark:#52525b; }
                 h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; }
                 .heading-anchor:hover { color: #34d399 !important; opacity: 1 !important; }
-                .code-lang-badge { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; font-family: 'JetBrains Mono', monospace; pointer-events: none; }
+                .code-lang-badge { position: absolute; top: 0.5rem; left: 0.75rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; pointer-events: none; }
                 html, body { background-color: #ffffff dark:#0a0a0b !important; }
 
                 .docs-content h2[id], .docs-content h3[id], .docs-content h4[id] { scroll-margin-top: 70px; }
@@ -755,10 +752,10 @@ export default function DocsPage({ data }) {
                 .docs-content ul, .docs-content ol { margin-bottom: 1rem; margin-left: 1.4rem; padding-left: 1.5rem; color: #52525b dark:#a1a1aa; }
                 .docs-content li { margin-bottom: 0.35rem; line-height: 1.75; font-size: 0.9375rem; }
                 .docs-content li > ul, .docs-content li > ol { margin-top: 0.35rem; margin-bottom: 0; }
-                .docs-content code:not(pre code) { font-family: 'JetBrains Mono', monospace; font-size: 0.825em; padding: 0.15em 0.4em; border-radius: 4px; background: rgba(0,0,0,0.04) dark:rgba(255,255,255,0.06); color: #059669 dark:#6ee7b7; }
+                .docs-content code:not(pre code) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.825em; padding: 0.15em 0.4em; border-radius: 4px; background: rgba(0,0,0,0.04) dark:rgba(255,255,255,0.06); color: #059669 dark:#6ee7b7; }
                 .docs-content .code-block { position: relative; margin-bottom: 1.25rem; border-radius: 0.75rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.1) dark:rgba(255,255,255,0.06); background: #1a1a2e dark:#111113; }
                 .docs-content .code-block pre { margin: 0; padding: 2rem 1.25rem 1rem; overflow-x: auto; }
-                .docs-content .code-block code { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; line-height: 1.65; color: #d4d4d8; background: none; padding: 0; border-radius: 0; }
+                .docs-content .code-block code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; line-height: 1.65; color: #d4d4d8; background: none; padding: 0; border-radius: 0; }
                 .docs-content .code-block .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.25rem 0.65rem; border-radius: 0.375rem; font-size: 0.7rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #d4d4d8; cursor: pointer; transition: all 0.15s; }
                 .docs-content .code-block .copy-btn:hover { background: rgba(255,255,255,0.1); color: white; }
                 .docs-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: calc(100% - 1.4rem); margin-bottom: 1.25rem; margin-left: 1.4rem; border-collapse: collapse; font-size: 0.875rem; }
diff --git a/pages/not-found.pyxl b/pages/not-found.pyxl
index 0e48705..7ac7e6a 100644
--- a/pages/not-found.pyxl
+++ b/pages/not-found.pyxl
@@ -17,9 +17,6 @@ export default function NotFoundPage() {
                 <meta name="description" content="The page you are looking for does not exist." />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="preconnect" href="https://fonts.googleapis.com" />
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
             </Head>
             <nav className={`relative z-20 border-b backdrop-blur-xl bg-white/80 border-zinc-200 dark:bg-[#0a0a0b]/80 dark:border-white/5`}>
                 <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
diff --git a/pages/playground.pyxl b/pages/playground.pyxl
index c8e04ea..db815a9 100644
--- a/pages/playground.pyxl
+++ b/pages/playground.pyxl
@@ -1333,9 +1333,6 @@ export default function PlaygroundPage({ data }) {
                 <meta name="description" content="Experience Pyxle live. Every interaction on this page hits a real Python server. Try server loaders, actions, SPA navigation, and more." />
                 <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-                <link rel="preconnect" href="https://fonts.googleapis.com" />
-                <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
-                <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
                 <meta property="og:title" content="Pyxle Playground - Try Pyxle Live" />
                 <meta property="og:description" content="Interactive demos of server loaders, actions, SPA navigation, and more. Every interaction hits a real Python server." />
                 <meta property="og:image" content="https://pyxle.dev/branding/og-default.png" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 86f0351..928c62a 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -8,8 +8,8 @@ module.exports = {
     theme: {
         extend: {
             fontFamily: {
-                sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
-                mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
+                sans: ['ui-sans-serif', 'system-ui', '-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
+                mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
             },
         },
     },