feat: implement AI gateway phase one runtime

apps/web/src/styles.css

@@ -1,22 +1,24 @@
 @import './styles/ui.css';
 @import './styles/pages.css';
+@import './styles/pricing.css';
+@import './styles/api-docs.css';
 @import './styles/landing.css';
 
 :root {
-  --background: #f6f7f9;
-  --foreground: #111827;
+  --background: #f7f8fa;
+  --foreground: #101318;
   --card: #ffffff;
-  --card-foreground: #111827;
-  --muted: #eef2f6;
-  --muted-foreground: #667085;
-  --border: #dde3ea;
-  --input: #cfd8e3;
-  --primary: #145388;
+  --card-foreground: #101318;
+  --muted: #f2f4f7;
+  --muted-foreground: #6b7280;
+  --border: #e4e7ec;
+  --input: #d8dee6;
+  --primary: #111827;
   --primary-foreground: #ffffff;
-  --secondary: #edf2f7;
-  --secondary-foreground: #1f2937;
+  --secondary: #f4f6f8;
+  --secondary-foreground: #202734;
   --destructive: #b42318;
-  --ring: #2f80c1;
+  --ring: #64748b;
   color: var(--foreground);
   background: var(--background);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -90,8 +92,8 @@ h1 {
   width: 38px;
   height: 38px;
   place-items: center;
-  border-radius: 8px;
-  background: #145388;
+  border-radius: 10px;
+  background: #111827;
   color: #fff;
   font-size: 13px;
   font-weight: 900;
@@ -153,10 +155,9 @@ h1 {
   align-items: center;
   gap: 2px;
   padding: 3px;
-  border: 1px solid var(--border);
+  border: 1px solid #e7ebf0;
   border-radius: 999px;
-  background: #f5f7fa;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.72);
 }
 
 .topNavItem {
@@ -168,7 +169,7 @@ h1 {
   border: 0;
   border-radius: 999px;
   background: transparent;
-  color: #475467;
+  color: #5d6675;
   font-size: 14px;
   font-weight: 800;
   white-space: nowrap;
@@ -177,8 +178,8 @@ h1 {
 .topNavItem:hover,
 .topNavItem[data-active="true"] {
   background: #ffffff;
-  color: #145388;
-  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
+  color: #111827;
+  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
 }
 
 .workspaceShell {
@@ -196,8 +197,8 @@ h1 {
   gap: 16px;
   padding: 0 28px;
   border-bottom: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.94);
-  box-shadow: 0 1px 10px rgba(16, 24, 40, 0.04);
+  background: rgba(255, 255, 255, 0.88);
+  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
   backdrop-filter: blur(12px);
 }
 
@@ -262,10 +263,10 @@ h1 {
 .notice,
 .inlineNotice {
   padding: 12px 14px;
-  border: 1px solid #f0b8b8;
+  border: 1px solid #f0d4d4;
   border-radius: 8px;
-  background: #fff1f1;
-  color: #9b2c2c;
+  background: #fff7f7;
+  color: #9f2f2f;
   font-size: 14px;
 }
 
@@ -301,17 +302,16 @@ h1 {
   min-height: 92px;
   padding: 15px;
   border: 1px solid var(--border);
-  border-top: 3px solid #64748b;
-  border-radius: 8px;
+  border-radius: 10px;
   background: var(--card);
 }
 
-.statCard[data-tone="blue"] { border-top-color: #145388; }
-.statCard[data-tone="green"] { border-top-color: #14805e; }
-.statCard[data-tone="violet"] { border-top-color: #7048b8; }
-.statCard[data-tone="amber"] { border-top-color: #b7791f; }
-.statCard[data-tone="cyan"] { border-top-color: #087f8c; }
-.statCard[data-tone="rose"] { border-top-color: #b8325f; }
+.statCard[data-tone="blue"] { border-color: #d8e0ea; }
+.statCard[data-tone="green"] { border-color: #d7e7df; }
+.statCard[data-tone="violet"] { border-color: #e0dce9; }
+.statCard[data-tone="amber"] { border-color: #ebe0cc; }
+.statCard[data-tone="cyan"] { border-color: #d5e4e8; }
+.statCard[data-tone="rose"] { border-color: #ead8df; }
 
 .statCard span {
   color: var(--muted-foreground);
@@ -336,9 +336,10 @@ h1 {
   width: 38px;
   height: 38px;
   place-items: center;
-  border-radius: 8px;
-  background: #eaf2f8;
-  color: #145388;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: #fff;
+  color: #111827;
 }
 
 .infoItem,
@@ -348,7 +349,7 @@ h1 {
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: #fbfcfe;
+  background: #fafbfc;
 }
 
 @media (max-width: 980px) {