feat: upgrade landing page to premium dark mode

Author: jkyberneees

docs/index.html

@@ -48,7 +48,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=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles.css" />
@@ -298,7 +298,9 @@ <h2 class="section-title" id="features-heading">Everything You Need</h2>
 
           <div class="features-grid">
             <div class="feature-card">
-              <div class="feature-icon">⚡</div>
+              <div class="feature-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+              </div>
               <h3>Near-Zero Alloc Hot Path</h3>
                 <p><strong>~141k req/sec</strong> — 55% faster than Bun. Built on fasthttp with direct <code>ctx.SetBody()</code> and pre-formatted headers — no formatting allocations on cache hits.</p>
             </div>
@@ -319,7 +321,7 @@ <h3>TLS 1.2 / 1.3</h3>
               </p>
             </div>
             <div class="feature-card">
-              <div class="feature-icon">🛡️</div>
+              <div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle; margin-right:4px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></div>
               <h3>Security Hardened</h3>
               <p>
                 Path traversal prevention, dotfile blocking, CSP, HSTS, Referrer-Policy, Permissions-Policy — set on
@@ -523,7 +525,7 @@ <h3>HTTP Request</h3>
               </svg>
             </div>
             <div class="pipeline-step">
-              <div class="pipeline-icon">🛡️</div>
+              <div class="pipeline-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle; margin-right:4px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></div>
               <div class="pipeline-info">
                 <h3>Recovery Middleware</h3>
                 <p>Panic → 500, log stack trace</p>
@@ -714,7 +716,7 @@ <h2 class="section-title" id="configuration-heading">Configuration Reference</h2
                 aria-controls="cfg-panel-security"
                 id="cfg-tab-security"
               >
-                🛡️ security
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle; margin-right:4px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> security
               </button>
             </div>
 
@@ -1030,7 +1032,7 @@ <h2 class="section-title" id="security-heading">Security Model</h2>
                 📋 Headers
               </button>
               <button class="tab-btn" role="tab" aria-selected="false" aria-controls="sec-panel-dos" id="sec-tab-dos">
-                🛡️ DoS
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:inline-block; vertical-align:middle; margin-right:4px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> DoS
               </button>
               <button class="tab-btn" role="tab" aria-selected="false" aria-controls="sec-panel-cors" id="sec-tab-cors">
                 🌐 CORS

docs/styles.css

@@ -2,24 +2,24 @@
    CSS Variables & Design System
    =========================== */
 :root {
-  --color-bg: #0a0a0f;
-  --color-bg-secondary: #12121a;
-  --color-bg-tertiary: #1a1a25;
-  --color-text: #e4e4e7;
+  --color-bg: #000000;
+  --color-bg-secondary: #0a0a0a;
+  --color-bg-tertiary: #111111;
+  --color-text: #ededed;
   --color-text-secondary: #a1a1aa;
   --color-text-muted: #71717a;
-  --color-primary: #6366f1;
-  --color-primary-light: #818cf8;
+  --color-primary: #ffffff;
+  --color-primary-light: #e4e4e7;
   --color-secondary: #8b5cf6;
   --color-accent: #22d3ee;
   --color-accent-green: #34d399;
   --color-border: #27272a;
   --color-border-light: #3f3f46;
-  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+  --gradient-primary: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
   --gradient-accent: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
-  --gradient-glow: linear-gradient(135deg, rgba(99,102,241,0.3) 0%, rgba(139,92,246,0.3) 100%);
-  --shadow-glow: 0 0 60px rgba(99,102,241,0.3);
-  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --gradient-glow: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+  --shadow-glow: 0 0 60px rgba(255,255,255,0.05);
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
   --radius-sm: 6px;
   --radius-md: 12px;