diff --git a/hosted.html b/hosted.html
index a4e7d16..513e246 100644
--- a/hosted.html
+++ b/hosted.html
@@ -8,7 +8,7 @@
     <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;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/tailwind.min.css">
+    <link rel="stylesheet" href="/vault1984.css">
     <style>
         *{box-sizing:border-box}
         body{background:#0A1628;color:#f1f5f9;font-family:Inter,sans-serif;margin:0}
@@ -24,30 +24,18 @@
 </head>
 <body>
 
-<nav class="fixed top-0 w-full z-50 bg-navy/80 backdrop-blur-md border-b border-white/5">
-        <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-            <a href="/" class="font-mono font-bold text-3xl text-white tracking-tight leading-none">vault<span class="text-accent font-mono">1984</span></a>
-            <div class="hidden md:flex items-center gap-6 text-sm">
-                <a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="text-gray-400 hover:text-white transition-colors">GitHub</a>
-                <a href="/hosted" class="font-semibold transition-colors flex items-center gap-1.5" style="color:#D4AF37"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#D4AF37;animation:hostedPulse 2s ease-in-out infinite"></span>Hosted</a>
-                <a href="/install.html" class="text-gray-400 hover:text-white transition-colors">Self-host</a>
-                <a href="#" class="border border-gray-600 text-gray-300 hover:border-gray-400 hover:text-white px-4 py-1.5 rounded-lg transition-colors text-sm">Sign in</a>
-                <a href="/hosted" class="bg-accent hover:bg-accent-hover text-black font-medium px-4 py-1.5 rounded-lg transition-colors text-sm">Get hosted &mdash; $12/yr</a>
-            </div>
-            <button id="mobile-menu-btn" class="md:hidden text-gray-400">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
-            </button>
+<nav class="nav">
+    <div class="nav-inner">
+        <a href="/" class="nav-logo">vault<span class="n">1984</span></a>
+        <div class="nav-links">
+            <a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
+            <a href="/hosted.html" class="nav-link active">Hosted</a>
+            <a href="/install.html" class="nav-link">Self-host</a>
+            <a href="#" class="nav-link btn btn-ghost" style="padding:0.375rem 1rem">Sign in</a>
+            <a href="/hosted.html" class="btn btn-primary">Get hosted &mdash; $12/yr</a>
         </div>
-        <div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-navy/95 backdrop-blur-md">
-            <div class="px-6 py-4 space-y-3">
-                <a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="block text-gray-400 hover:text-white">GitHub</a>
-                <a href="/hosted" class="block font-semibold" style="color:#D4AF37">✦ Hosted</a>
-                    <a href="/install.html" class="block text-gray-400 hover:text-white">Self-host</a>
-                <a href="#" class="block text-gray-400 hover:text-white">Sign in</a>
-                <a href="/pricing.html" class="block bg-accent hover:bg-accent-hover text-black font-medium px-4 py-2 rounded-lg text-center">Get hosted &mdash; $12/yr</a>
-            </div>
-        </div>
-    </nav>
+    </div>
+</nav>
 
     <!-- Hero -->
     <div style="padding-top:100px;padding-bottom:2.5rem;text-align:center;max-width:1100px;margin:0 auto;padding-left:2rem;padding-right:2rem">
diff --git a/styleguide.html b/styleguide.html
index 5a54e4e..df14bc7 100644
--- a/styleguide.html
+++ b/styleguide.html
@@ -19,7 +19,20 @@
 </head>
 <body>
 
-<div class="container">
+<nav class="nav">
+    <div class="nav-inner">
+        <a href="/" class="nav-logo">vault<span class="n">1984</span></a>
+        <div class="nav-links">
+            <a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
+            <a href="/hosted.html" class="nav-link active">Hosted</a>
+            <a href="/install.html" class="nav-link">Self-host</a>
+            <a href="#" class="nav-link btn btn-ghost" style="padding:0.375rem 1rem">Sign in</a>
+            <a href="/hosted.html" class="btn btn-primary">Get hosted &mdash; $12/yr</a>
+        </div>
+    </div>
+</nav>
+
+<div class="container" style="padding-top:80px">
     <div style="padding: 5rem 0 2rem">
         <p class="label accent mb-3">Design System</p>
         <h1>vault<span style="color:var(--accent)">1984</span> Styleguide</h1>
diff --git a/vault1984-web b/vault1984-web
index 6e63eac..5301c1d 100755
Binary files a/vault1984-web and b/vault1984-web differ
diff --git a/vault1984.css b/vault1984.css
index c391032..07c908d 100644
--- a/vault1984.css
+++ b/vault1984.css
@@ -6,7 +6,7 @@
 
 /* === TOKENS === */
 :root {
-  --width:        1100px;
+  --width:        1280px;
   --pad:          2rem;
   --radius:       1rem;
   --radius-sm:    0.5rem;
@@ -113,3 +113,14 @@ p.lead                 { font-size: 1.125rem; }
 
 /* === ANIMATIONS === */
 @keyframes hostedPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(1.8); } }
+
+/* === NAV === */
+.nav                   { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(10,22,40,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
+.nav-inner             { max-width: var(--width); margin: 0 auto; padding: 0 var(--pad); height: 64px; display: flex; align-items: center; justify-content: space-between; }
+.nav-logo              { font-family: var(--font-mono); font-weight: 700; font-size: 1.75rem; color: var(--text); line-height: 1; letter-spacing: -0.02em; }
+.nav-logo .n           { color: var(--accent); }
+.nav-links             { display: flex; align-items: center; gap: 1.5rem; font-size: 0.875rem; }
+.nav-link              { color: var(--muted); transition: color 0.15s; }
+.nav-link:hover        { color: var(--text); }
+.nav-link.active       { color: var(--gold); font-weight: 600; display: flex; align-items: center; gap: 0.375rem; }
+.nav-link.active::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); animation: hostedPulse 2s ease-in-out infinite; }
