feat: redesign landing page — dark amber aesthetic with revolving 3D globe

Cipher-inspired dark cybersecurity aesthetic:
- Three.js wireframe globe with latitude/longitude lines and dot particles
- Dark black + amber/gold color scheme
- Monospace uppercase typography throughout
- Grid overlay background pattern
- Mission/Vision section
- Terminal demo with syntax-colored output
- Full 22-rule table
- Integration grid (GitHub Action, Claude Code MCP, npm, config)
- Trust bar footer
- Framer Motion scroll animations

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

Author: Manavarya09

website/package-lock.json

@@ -8,10 +8,12 @@
     "start": "next start"
   },
   "dependencies": {
+    "@types/three": "^0.183.1",
     "framer-motion": "^12.38.0",
     "next": "^16.2.1",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react-dom": "^19.2.4",
+    "three": "^0.183.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.2",

website/package.json

@@ -1,62 +1,48 @@
 @import "tailwindcss";
 
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-}
-
-.dark {
-  --radius: 0.625rem;
-  --background: oklch(0.07 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.12 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.145 0 0);
-  --secondary: oklch(0.2 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.2 0 0);
-  --muted-foreground: oklch(0.6 0 0);
-  --accent: oklch(0.2 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+:root {
+  --bg: #0a0a0a;
+  --fg: #d4a012;
+  --fg-dim: #8a6b0a;
+  --fg-muted: #5a4a0a;
+  --white: #fafafa;
+  --border: #d4a01230;
+  --card-bg: #0f0f0f;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
 html {
   scroll-behavior: smooth;
 }
 
 body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+::selection {
+  background: var(--fg);
+  color: var(--bg);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--fg-dim);
+  border-radius: 3px;
 }

website/src/app/globals.css

@@ -4,7 +4,7 @@ import "./globals.css";
 export const metadata: Metadata = {
   title: "Guardrail — The safety layer for AI-generated code",
   description:
-    "Scan and fix security issues, performance problems, and AI-specific anti-patterns before they ship. 19 built-in rules. AST-based auto-fix. Zero config.",
+    "Scan and fix security issues, performance problems, and AI-specific anti-patterns before they ship. 22 built-in rules. AST-based auto-fix. Zero config.",
 };
 
 export default function RootLayout({