diff --git a/website/app/layout.tsx b/website/app/layout.tsx
index 8da52c0..91e39f6 100644
--- a/website/app/layout.tsx
+++ b/website/app/layout.tsx
@@ -1,23 +1,167 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import './globals.css';
 import { SiteHeader } from '../components/site-header';
+import { SiteFooter } from '../components/site-footer';
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1.0,
+};
 
 export const metadata: Metadata = {
   title: 'MotorSignal | The ride intelligence platform',
   description: 'Motorcycle telemetry, ride history, and connected rider tools.',
 };
 
+const tailwindConfigScript = `
+  tailwind.config = {
+    darkMode: "class",
+    theme: {
+      extend: {
+        colors: {
+          "brand": {
+            "bg": "#080c13",
+            "card": "#0f1420",
+            "cardAlt": "#141c2c",
+            "border": "#1f2a3f",
+            "borderLight": "#2c3b57",
+            "cyan": "#00f2fe",
+            "emerald": "#10b981",
+            "neonYellow": "#f59e0b",
+            "glow": "rgba(0, 242, 254, 0.15)"
+          },
+          "tertiary-fixed-dim": "#7bd0ff",
+          "surface": "#0f131c",
+          "on-secondary-fixed-variant": "#005227",
+          "primary-fixed": "#6ff6ff",
+          "surface-container-low": "#181c24",
+          "on-primary-container": "#006a70",
+          "on-background": "#dfe2ee",
+          "inverse-on-surface": "#2c3039",
+          "secondary-fixed": "#60ff98",
+          "primary": "#e0fdff",
+          "background": "#0f131c",
+          "secondary": "#f5fff3",
+          "primary-container": "#00f2fe",
+          "on-primary-fixed-variant": "#004f53",
+          "on-tertiary-fixed-variant": "#004c69",
+          "error": "#ffb4ab",
+          "tertiary-container": "#b2e1ff",
+          "surface-bright": "#353942",
+          "surface-container-highest": "#31353e",
+          "on-secondary-container": "#007239",
+          "surface-container": "#1c2028",
+          "primary-fixed-dim": "#00dce6",
+          "surface-variant": "#31353e",
+          "surface-container-high": "#262a33",
+          "surface-dim": "#0f131c",
+          "tertiary": "#f1f8ff",
+          "inverse-primary": "#00696f",
+          "on-primary-fixed": "#002022",
+          "tertiary-fixed": "#c4e7ff",
+          "on-error": "#690005",
+          "secondary-container": "#34ff8c",
+          "on-error-container": "#ffdad6",
+          "surface-tint": "#00dce6",
+          "on-tertiary-fixed": "#001e2c",
+          "on-tertiary-container": "#00678c",
+          "on-primary": "#00373a",
+          "on-tertiary": "#00354a",
+          "outline-variant": "#3a494b",
+          "outline": "#849495",
+          "on-secondary-fixed": "#00210c",
+          "inverse-surface": "#dfe2ee",
+          "surface-container-lowest": "#0a0e16",
+          "error-container": "#93000a",
+          "on-surface": "#dfe2ee",
+          "on-secondary": "#003919",
+          "secondary-fixed-dim": "#00e478",
+          "on-surface-variant": "#b9cacb"
+        },
+        borderRadius: {
+          "DEFAULT": "0.125rem",
+          "lg": "0.25rem",
+          "xl": "0.5rem",
+          "full": "0.75rem"
+        },
+        spacing: {
+          "space-lg": "1.5rem",
+          "gutter-desktop": "2rem",
+          "space-xl": "2rem",
+          "container-max": "1280px",
+          "gutter-tablet": "1.5rem",
+          "space-sm": "0.75rem",
+          "space-4xl": "6rem",
+          "space-xs": "0.5rem",
+          "space-2xs": "0.25rem",
+          "space-3xl": "4rem",
+          "gutter-mobile": "1rem",
+          "space-2xl": "3rem",
+          "space-md": "1rem"
+        },
+        fontFamily: {
+          "telemetry-metric-md": ["Space Grotesk"],
+          "body-lg": ["Plus Jakarta Sans"],
+          "label-md": ["Plus Jakarta Sans"],
+          "code-mono": ["Space Grotesk"],
+          "body-sm": ["Plus Jakarta Sans"],
+          "label-caps": ["Space Grotesk"],
+          "body-md": ["Plus Jakarta Sans"],
+          "headline-xl": ["Space Grotesk"],
+          "headline-lg": ["Space Grotesk"],
+          "headline-sm": ["Space Grotesk"],
+          "display-hero-mobile": ["Space Grotesk"],
+          "headline-md": ["Space Grotesk"],
+          "headline-xl-mobile": ["Space Grotesk"],
+          "telemetry-metric-xl": ["Space Grotesk"],
+          "display-hero": ["Space Grotesk"]
+        },
+        fontSize: {
+          "telemetry-metric-md": ["32px", { lineHeight: "36px", letterSpacing: "-0.03em", fontWeight: "700" }],
+          "body-lg": ["18px", { lineHeight: "28px", letterSpacing: "0em", fontWeight: "400" }],
+          "label-md": ["13px", { lineHeight: "18px", letterSpacing: "0.01em", fontWeight: "600" }],
+          "code-mono": ["12px", { lineHeight: "16px", letterSpacing: "0.04em", fontWeight: "500" }],
+          "body-sm": ["13px", { lineHeight: "20px", letterSpacing: "0.005em", fontWeight: "400" }],
+          "label-caps": ["11px", { lineHeight: "14px", letterSpacing: "0.12em", fontWeight: "700" }],
+          "body-md": ["15px", { lineHeight: "24px", letterSpacing: "0em", fontWeight: "400" }],
+          "headline-xl": ["40px", { lineHeight: "48px", letterSpacing: "-0.02em", fontWeight: "700" }],
+          "headline-lg": ["28px", { lineHeight: "36px", letterSpacing: "-0.015em", fontWeight: "600" }],
+          "headline-sm": ["18px", { lineHeight: "26px", letterSpacing: "-0.005em", fontWeight: "600" }],
+          "display-hero-mobile": ["36px", { lineHeight: "44px", letterSpacing: "-0.02em", fontWeight: "700" }],
+          "headline-md": ["22px", { lineHeight: "30px", letterSpacing: "-0.01em", fontWeight: "600" }],
+          "headline-xl-mobile": ["28px", { lineHeight: "36px", letterSpacing: "-0.01em", fontWeight: "700" }],
+          "telemetry-metric-xl": ["48px", { lineHeight: "48px", letterSpacing: "-0.04em", fontWeight: "700" }],
+          "display-hero": ["56px", { lineHeight: "64px", letterSpacing: "-0.03em", fontWeight: "700" }]
+        }
+      }
+    }
+  };
+`;
+
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <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@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Space+Grotesk:wght@300..700&display=swap"
+          rel="stylesheet"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+          rel="stylesheet"
+        />
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script dangerouslySetInnerHTML={{ __html: tailwindConfigScript }} />
+      </head>
       <body>
         <SiteHeader />
         <main>{children}</main>
-        <footer className="site-footer">
-          <span>MotorSignal</span>
-          <span>Ride smarter. Know more. <a href="/privacy">Privacy</a> · <a href="/terms">Terms</a></span>
-        </footer>
+        <SiteFooter />
       </body>
     </html>
   );
 }
+
diff --git a/website/components/site-footer.tsx b/website/components/site-footer.tsx
new file mode 100644
index 0000000..24293be
--- /dev/null
+++ b/website/components/site-footer.tsx
@@ -0,0 +1,91 @@
+'use client';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+export function SiteFooter() {
+  const pathname = usePathname();
+  if (pathname?.includes('/manage') || pathname?.startsWith('/admin') || pathname?.startsWith('/ops')) return null;
+
+  return (
+    <footer className="flagship-footer">
+      <div className="flagship-container">
+        <div className="footer-columns-grid">
+          {/* Brand Column */}
+          <div className="footer-brand-col">
+            <Link className="brand" href="/" aria-label="MotorSignal home">
+              <span className="brand-mark">
+                <span className="material-symbols-outlined" style={{ fontSize: '18px', fontWeight: 'bold' }}>
+                  show_chart
+                </span>
+              </span>
+              <span style={{ fontFamily: 'Space Grotesk', fontWeight: 700, letterSpacing: '0.04em' }}>MOTORSIGNAL</span>
+            </Link>
+            <p className="footer-desc">
+              High-performance precision telemetry and tactical ride intelligence for modern racers, track engineers,
+              and two-wheeled enthusiasts worldwide.
+            </p>
+            <div className="footer-status-pill">
+              <span className="status-dot" />
+              <span className="font-label-caps" style={{ color: '#b9cacb' }}>
+                Grid Network 99.98% Available
+              </span>
+            </div>
+          </div>
+
+          {/* Product Links */}
+          <div className="footer-link-group">
+            <h4>PRODUCT</h4>
+            <ul>
+              <li><Link href="/features">Live Cockpit</Link></li>
+              <li><Link href="/features">Telemetry Trace</Link></li>
+              <li><Link href="/features">Lean Angle HUD</Link></li>
+              <li><Link href="/pricing">Pricing Tiers</Link></li>
+            </ul>
+          </div>
+
+          {/* Hardware Links */}
+          <div className="footer-link-group">
+            <h4>HARDWARE</h4>
+            <ul>
+              <li><Link href="/pricing">OBD-II CAN Link</Link></li>
+              <li><Link href="/features">10Hz GPS Module</Link></li>
+              <li><Link href="/features">6-Axis IMU Unit</Link></li>
+              <li><Link href="/pricing">Mount Specs</Link></li>
+            </ul>
+          </div>
+
+          {/* Ecosystem Links */}
+          <div className="footer-link-group">
+            <h4>ECOSYSTEM</h4>
+            <ul>
+              <li><Link href="/group-rides">Group Rides</Link></li>
+              <li><Link href="/download">Mobile App</Link></li>
+              <li><Link href="/features">Telemetry API</Link></li>
+              <li><Link href="/features">Webhooks</Link></li>
+            </ul>
+          </div>
+
+          {/* Compliance Links */}
+          <div className="footer-link-group">
+            <h4>COMPLIANCE</h4>
+            <ul>
+              <li><Link href="/privacy">Privacy Policy</Link></li>
+              <li><Link href="/terms">Terms of Service</Link></li>
+              <li><Link href="/privacy">Security &amp; Trust</Link></li>
+              <li><Link href="/features">FIM Data Standard</Link></li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Baseline Bar */}
+        <div className="footer-bottom-bar">
+          <p>© 2025 MotorSignal Technologies Inc. All machine rights reserved.</p>
+          <div className="footer-sys-info font-code-mono">
+            <span>LATENCY: 18ms</span>
+            <span>APEX-CORE: v3.4.1</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/website/components/site-header-client.tsx b/website/components/site-header-client.tsx
new file mode 100644
index 0000000..4caefce
--- /dev/null
+++ b/website/components/site-header-client.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface SiteHeaderProps {
+  signedIn: boolean;
+  role: string;
+}
+
+export function SiteHeaderClient({ signedIn, role }: SiteHeaderProps) {
+  const pathname = usePathname();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    setMobileMenuOpen(false);
+  }, [pathname]);
+
+  if (pathname?.includes('/manage') || pathname?.startsWith('/admin') || pathname?.startsWith('/ops')) return null;
+
+  const navItems = [
+    { label: 'Live Cockpit', href: '/' },
+    { label: 'Features', href: '/features' },
+    { label: 'Group Rides', href: '/group-rides' },
+    { label: 'Pricing', href: '/pricing' },
+    { label: 'Hardware & App', href: '/pricing#hardware' },
+  ];
+
+  return (
+    <header className="fixed top-0 w-full z-50 bg-surface-container-lowest/80 backdrop-blur-xl border-b border-outline-variant/30 shadow-[0_1px_8px_rgba(0,0,0,0.04)]">
+      <div className="h-20 max-w-container-max mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-space-sm sm:gap-space-md">
+        {/* Left: Brand + Navigation */}
+        <div className="flex items-center gap-space-sm sm:gap-space-lg min-w-0">
+          <Link className="flex items-center gap-2 sm:gap-space-sm group shrink-0" href="/" aria-label="MotorSignal home">
+            <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-gradient-to-tr from-primary-container via-surface-tint to-tertiary-container flex items-center justify-center shadow-[0_0_16px_rgba(0,242,254,0.35)] shrink-0">
+              <span className="material-symbols-outlined text-on-primary-container text-[20px] sm:text-[22px] font-bold">show_chart</span>
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="font-headline-sm text-sm sm:text-headline-sm text-on-surface tracking-tight uppercase group-hover:text-primary-container transition-colors truncate">MotorSignal</span>
+              <span className="font-label-caps text-[10px] sm:text-label-caps text-primary-fixed-dim uppercase tracking-widest hidden xs:block">PRO TELEMETRY</span>
+            </div>
+          </Link>
+
+          <nav className="hidden xl:flex items-center gap-space-lg whitespace-nowrap" aria-label="Primary navigation">
+            {navItems.map((item) => {
+              const isActive =
+                item.href === '/' ? pathname === '/' : pathname.startsWith(item.href);
+              return (
+                <Link
+                  key={item.label}
+                  href={item.href}
+                  className={`transition-colors whitespace-nowrap ${
+                    isActive
+                      ? 'text-primary-container font-headline-sm border-b-2 border-primary-container pb-0.5'
+                      : 'font-label-md text-label-md text-on-surface-variant hover:text-on-surface'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+
+        {/* Right: Telemetry Grid pill + Auth actions + Mobile Hamburger */}
+        <div className="flex items-center gap-1.5 sm:gap-space-md whitespace-nowrap shrink-0">
+          {/* Telemetry Grid: Online Badge */}
+          <div className="hidden md:flex items-center gap-space-xs px-space-sm py-1 rounded-full bg-surface-container-low border border-outline-variant/40">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-secondary-fixed-dim"></span>
+            </span>
+            <span className="font-label-caps text-label-caps text-on-surface-variant uppercase">
+              Telemetry Grid: Online
+            </span>
+          </div>
+
+          {signedIn ? (
+            <div className="flex items-center gap-space-xs">
+              <Link
+                className="w-9 h-9 sm:w-11 sm:h-11 rounded-full bg-surface-container-high border border-outline-variant/40 flex items-center justify-center hover:ring-2 hover:ring-primary-container transition-all shrink-0"
+                href="/account"
+                title="Rider Account"
+              >
+                <span className="material-symbols-outlined text-primary-container text-[20px] sm:text-[22px]">
+                  person
+                </span>
+              </Link>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1.5 sm:gap-space-sm">
+              <Link
+                className="hidden sm:inline-flex items-center justify-center px-space-md py-2.5 rounded-xl bg-surface-container-low hover:bg-surface-container-high border border-outline-variant/40 text-on-surface hover:text-primary transition-all font-label-md text-label-md min-h-[44px]"
+                href="/login"
+              >
+                Sign In
+              </Link>
+              <Link
+                className="inline-flex items-center justify-center px-2.5 sm:px-space-lg py-2 sm:py-2.5 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-xs sm:text-headline-sm hover:shadow-[0_0_24px_rgba(0,242,254,0.45)] transition-all whitespace-nowrap min-h-[38px] sm:min-h-[44px]"
+                href="/register"
+              >
+                <span className="hidden sm:inline">Get Started Free</span>
+                <span className="sm:hidden">Get Started</span>
+              </Link>
+              <Link
+                className="sm:hidden w-9 h-9 rounded-full bg-primary flex items-center justify-center hover:ring-2 hover:ring-primary-container transition-all shrink-0"
+                href="/login"
+                title="Account"
+                aria-label="Sign in"
+              >
+                <span className="material-symbols-outlined text-on-primary text-[18px]">
+                  person
+                </span>
+              </Link>
+            </div>
+          )}
+
+          {/* Mobile Menu Hamburger Button */}
+          <button
+            type="button"
+            className="xl:hidden w-9 h-9 sm:w-11 sm:h-11 rounded-xl bg-surface-container-low hover:bg-surface-container-high border border-outline-variant/40 flex items-center justify-center text-on-surface hover:text-primary transition-colors cursor-pointer shrink-0"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label={mobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
+            aria-expanded={mobileMenuOpen}
+          >
+            <span className="material-symbols-outlined text-[20px] sm:text-[24px]">
+              {mobileMenuOpen ? 'close' : 'menu'}
+            </span>
+          </button>
+        </div>
+      </div>
+
+      {/* Mobile Menu Drawer */}
+      {mobileMenuOpen && (
+        <div className="xl:hidden bg-surface-container-lowest/95 backdrop-blur-2xl border-b border-outline-variant/40 px-4 sm:px-gutter-desktop py-space-md shadow-2xl flex flex-col gap-space-sm animate-in slide-in-from-top-2">
+          <nav className="flex flex-col gap-1" aria-label="Mobile navigation">
+            {navItems.map((item) => {
+              const isActive =
+                item.href === '/' ? pathname === '/' : pathname.startsWith(item.href);
+              return (
+                <Link
+                  key={item.label}
+                  href={item.href}
+                  onClick={() => setMobileMenuOpen(false)}
+                  className={`px-space-md py-3 rounded-xl font-label-md text-label-md transition-colors min-h-[44px] flex items-center ${
+                    isActive
+                      ? 'bg-surface-container-high text-primary-container font-semibold border-l-4 border-primary-container'
+                      : 'text-on-surface-variant hover:text-on-surface hover:bg-surface-container'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+          <div className="pt-space-sm border-t border-outline-variant/30 flex items-center justify-between text-xs">
+            <div className="flex items-center gap-space-xs">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-secondary-fixed-dim"></span>
+              </span>
+              <span className="font-label-caps text-label-caps text-on-surface-variant uppercase">
+                Telemetry Grid: Online
+              </span>
+            </div>
+            {!signedIn && (
+              <Link
+                href="/login"
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-primary font-label-md text-label-md hover:underline py-1.5 px-2"
+              >
+                Sign In →
+              </Link>
+            )}
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}
diff --git a/website/components/site-header.tsx b/website/components/site-header.tsx
index 991eb43..7509c5d 100644
--- a/website/components/site-header.tsx
+++ b/website/components/site-header.tsx
@@ -1,22 +1,20 @@
-import Link from 'next/link';
+import { cookies } from 'next/headers';
+import { SiteHeaderClient } from './site-header-client';
 
-export function SiteHeader() {
-  return (
-    <header className="site-header">
-      <Link className="brand" href="/" aria-label="MotorSignal home">
-        <span className="brand-mark">M</span>
-        <span>MotorSignal</span>
-      </Link>
-      <nav aria-label="Primary navigation">
-        <Link href="/features">Features</Link>
-        <Link href="/pricing">Pricing</Link>
-        <Link href="/download">Download</Link>
-        <Link href="/support">Support</Link>
-      </nav>
-      <div className="header-actions">
-        <Link className="quiet-link" href="/login">Sign in</Link>
-        <Link className="button button-small" href="/register">Create account</Link>
-      </div>
-    </header>
-  );
+export async function SiteHeader() {
+  const token = (await cookies()).get('motorsignal_access_token')?.value;
+  let signedIn = false;
+  let role = 'user';
+  if (token) {
+    try {
+      const response = await fetch(`${process.env.MOTORSIGNAL_API_BASE_URL ?? 'https://api.motorsignal.app'}/api/v1/me`, {
+        headers: { authorization: `Bearer ${token}` }, cache: 'no-store',
+      });
+      signedIn = response.ok;
+      if (response.ok) role = (await response.json() as { role?: string }).role ?? 'user';
+    } catch { /* Navigation remains available during an API outage. */ }
+  }
+
+  return <SiteHeaderClient signedIn={signedIn} role={role} />;
 }
+
diff --git a/website/public/images/motorsignal-hero.jpg b/website/public/images/motorsignal-hero.jpg
new file mode 100644
index 0000000..dae4411
Binary files /dev/null and b/website/public/images/motorsignal-hero.jpg differ