@jaimevalasek/aioson 1.4.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/CHANGELOG.md +31 -1
  2. package/LICENSE +661 -21
  3. package/README.md +9 -1
  4. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  5. package/docs/design-previews/aurora-command-ui.html +682 -0
  6. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  7. package/docs/design-previews/bold-editorial-ui.html +717 -0
  8. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  9. package/docs/design-previews/clean-saas-ui.html +549 -0
  10. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  11. package/docs/design-previews/cognitive-core-ui.html +463 -0
  12. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  13. package/docs/design-previews/glassmorphism-ui.html +886 -0
  14. package/docs/design-previews/index.html +699 -0
  15. package/docs/design-previews/interface-design-website.html +1187 -0
  16. package/docs/design-previews/interface-design.html +513 -0
  17. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  18. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  19. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  20. package/docs/design-previews/premium-command-center-ui.html +552 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/en/squad-dashboard.md +372 -0
  25. package/docs/openclaw-bridge.md +308 -0
  26. package/docs/pt/README.md +7 -0
  27. package/docs/pt/agent-sharding.md +132 -0
  28. package/docs/pt/agentes.md +131 -11
  29. package/docs/pt/busca-de-contexto.md +129 -0
  30. package/docs/pt/cache-de-contexto.md +156 -0
  31. package/docs/pt/cenarios.md +46 -2
  32. package/docs/pt/comandos-cli.md +88 -1
  33. package/docs/pt/design-hybrid-forge.md +107 -0
  34. package/docs/pt/inicio-rapido.md +72 -5
  35. package/docs/pt/inteligencia-adaptativa.md +324 -0
  36. package/docs/pt/monitor-de-contexto.md +104 -0
  37. package/docs/pt/recuperacao-de-sessao.md +125 -0
  38. package/docs/pt/sandbox.md +125 -0
  39. package/docs/pt/skills.md +98 -6
  40. package/docs/pt/squad-dashboard.md +373 -0
  41. package/docs/testing/genome-2.0-matrix.md +5 -5
  42. package/docs/testing/genome-2.0-rollout.md +9 -9
  43. package/package.json +2 -2
  44. package/src/agent-loader.js +280 -0
  45. package/src/backup-local.js +74 -0
  46. package/src/cli.js +192 -0
  47. package/src/commands/agent-loader.js +85 -0
  48. package/src/commands/backup-local-cmd.js +25 -0
  49. package/src/commands/context-cache.js +90 -0
  50. package/src/commands/context-monitor.js +92 -0
  51. package/src/commands/context-search.js +66 -0
  52. package/src/commands/design-hybrid-options.js +385 -0
  53. package/src/commands/health.js +214 -0
  54. package/src/commands/init.js +54 -13
  55. package/src/commands/install.js +52 -13
  56. package/src/commands/learning-evolve.js +355 -0
  57. package/src/commands/live.js +34 -0
  58. package/src/commands/recovery.js +43 -0
  59. package/src/commands/runtime.js +242 -0
  60. package/src/commands/sandbox.js +37 -0
  61. package/src/commands/setup-context.js +29 -4
  62. package/src/commands/setup.js +178 -0
  63. package/src/commands/skill.js +79 -32
  64. package/src/commands/squad-daemon.js +209 -0
  65. package/src/commands/squad-dashboard.js +39 -0
  66. package/src/commands/squad-deploy.js +64 -0
  67. package/src/commands/squad-doctor.js +52 -0
  68. package/src/commands/squad-mcp.js +270 -0
  69. package/src/commands/squad-processes.js +56 -0
  70. package/src/commands/squad-recovery.js +42 -0
  71. package/src/commands/squad-roi.js +291 -0
  72. package/src/commands/squad-score.js +250 -0
  73. package/src/commands/squad-status.js +37 -1
  74. package/src/commands/squad-validate.js +62 -1
  75. package/src/commands/squad-webhook.js +160 -0
  76. package/src/commands/squad-worker.js +191 -0
  77. package/src/commands/squad-worktrees.js +75 -0
  78. package/src/commands/tool-registry-cmd.js +232 -0
  79. package/src/commands/update.js +7 -0
  80. package/src/commands/web-map.js +70 -0
  81. package/src/commands/web-scrape.js +71 -0
  82. package/src/constants.js +17 -0
  83. package/src/context-cache.js +159 -0
  84. package/src/context-search.js +326 -0
  85. package/src/context-writer.js +45 -1
  86. package/src/design-variation-catalog.js +503 -0
  87. package/src/i18n/messages/en.js +159 -3
  88. package/src/i18n/messages/es.js +147 -2
  89. package/src/i18n/messages/fr.js +147 -2
  90. package/src/i18n/messages/pt-BR.js +158 -3
  91. package/src/install-animation.js +260 -0
  92. package/src/install-profile.js +143 -0
  93. package/src/install-wizard.js +474 -0
  94. package/src/installer.js +38 -10
  95. package/src/lib/webhook-server.js +328 -0
  96. package/src/mcp-connectors/registry.js +602 -0
  97. package/src/parser.js +7 -1
  98. package/src/recovery-context-session.js +154 -0
  99. package/src/runtime-store.js +355 -2
  100. package/src/sandbox.js +177 -0
  101. package/src/squad/external-session.js +180 -0
  102. package/src/squad/inter-squad.js +74 -0
  103. package/src/squad/recovery-context.js +201 -0
  104. package/src/squad/worktree-manager.js +114 -0
  105. package/src/squad-daemon.js +490 -0
  106. package/src/squad-dashboard/api.js +223 -0
  107. package/src/squad-dashboard/attachment-handler.js +93 -0
  108. package/src/squad-dashboard/context-monitor.js +157 -0
  109. package/src/squad-dashboard/execution-logs.js +115 -0
  110. package/src/squad-dashboard/hunk-review.js +209 -0
  111. package/src/squad-dashboard/metrics.js +133 -0
  112. package/src/squad-dashboard/process-monitor.js +125 -0
  113. package/src/squad-dashboard/renderer.js +858 -0
  114. package/src/squad-dashboard/server.js +232 -0
  115. package/src/squad-dashboard/styles.js +525 -0
  116. package/src/squad-dashboard/token-tracker.js +99 -0
  117. package/src/tool-executor.js +94 -0
  118. package/src/updater.js +11 -3
  119. package/src/web.js +284 -0
  120. package/src/worker-runner.js +339 -0
  121. package/template/.aioson/agents/analyst.md +62 -3
  122. package/template/.aioson/agents/architect.md +42 -0
  123. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  124. package/template/.aioson/agents/dev.md +223 -11
  125. package/template/.aioson/agents/deyvin.md +65 -0
  126. package/template/.aioson/agents/neo.md +152 -0
  127. package/template/.aioson/agents/orache.md +17 -0
  128. package/template/.aioson/agents/orchestrator.md +26 -0
  129. package/template/.aioson/agents/pm.md +58 -0
  130. package/template/.aioson/agents/product.md +88 -12
  131. package/template/.aioson/agents/qa.md +80 -0
  132. package/template/.aioson/agents/setup.md +128 -22
  133. package/template/.aioson/agents/sheldon.md +704 -0
  134. package/template/.aioson/agents/squad.md +191 -0
  135. package/template/.aioson/agents/tester.md +410 -0
  136. package/template/.aioson/agents/ux-ui.md +12 -0
  137. package/template/.aioson/config.md +21 -0
  138. package/template/.aioson/context/forensics/.gitkeep +0 -0
  139. package/template/.aioson/context/seeds/seed-example.md +27 -0
  140. package/template/.aioson/context/user-profile.md +42 -0
  141. package/template/.aioson/locales/en/agents/analyst.md +8 -0
  142. package/template/.aioson/locales/en/agents/architect.md +8 -0
  143. package/template/.aioson/locales/en/agents/dev.md +66 -7
  144. package/template/.aioson/locales/en/agents/deyvin.md +8 -0
  145. package/template/.aioson/locales/en/agents/neo.md +8 -0
  146. package/template/.aioson/locales/en/agents/orchestrator.md +26 -0
  147. package/template/.aioson/locales/en/agents/qa.md +49 -0
  148. package/template/.aioson/locales/en/agents/setup.md +35 -2
  149. package/template/.aioson/locales/en/agents/sheldon.md +340 -0
  150. package/template/.aioson/locales/en/agents/ux-ui.md +8 -0
  151. package/template/.aioson/locales/es/agents/analyst.md +8 -0
  152. package/template/.aioson/locales/es/agents/architect.md +8 -0
  153. package/template/.aioson/locales/es/agents/dev.md +66 -7
  154. package/template/.aioson/locales/es/agents/deyvin.md +8 -0
  155. package/template/.aioson/locales/es/agents/neo.md +48 -0
  156. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  157. package/template/.aioson/locales/es/agents/qa.md +26 -0
  158. package/template/.aioson/locales/es/agents/setup.md +35 -2
  159. package/template/.aioson/locales/es/agents/sheldon.md +192 -0
  160. package/template/.aioson/locales/es/agents/squad.md +63 -0
  161. package/template/.aioson/locales/es/agents/ux-ui.md +8 -0
  162. package/template/.aioson/locales/fr/agents/analyst.md +8 -0
  163. package/template/.aioson/locales/fr/agents/architect.md +8 -0
  164. package/template/.aioson/locales/fr/agents/dev.md +66 -7
  165. package/template/.aioson/locales/fr/agents/deyvin.md +8 -0
  166. package/template/.aioson/locales/fr/agents/neo.md +48 -0
  167. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  168. package/template/.aioson/locales/fr/agents/qa.md +26 -0
  169. package/template/.aioson/locales/fr/agents/setup.md +35 -2
  170. package/template/.aioson/locales/fr/agents/sheldon.md +192 -0
  171. package/template/.aioson/locales/fr/agents/squad.md +63 -0
  172. package/template/.aioson/locales/fr/agents/ux-ui.md +8 -0
  173. package/template/.aioson/locales/pt-BR/agents/analyst.md +19 -0
  174. package/template/.aioson/locales/pt-BR/agents/architect.md +19 -0
  175. package/template/.aioson/locales/pt-BR/agents/dev.md +75 -12
  176. package/template/.aioson/locales/pt-BR/agents/deyvin.md +8 -0
  177. package/template/.aioson/locales/pt-BR/agents/neo.md +147 -0
  178. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +26 -0
  179. package/template/.aioson/locales/pt-BR/agents/product.md +8 -3
  180. package/template/.aioson/locales/pt-BR/agents/qa.md +60 -0
  181. package/template/.aioson/locales/pt-BR/agents/setup.md +35 -2
  182. package/template/.aioson/locales/pt-BR/agents/sheldon.md +192 -0
  183. package/template/.aioson/locales/pt-BR/agents/squad.md +105 -0
  184. package/template/.aioson/locales/pt-BR/agents/ux-ui.md +8 -0
  185. package/template/.aioson/schemas/squad-blueprint.schema.json +21 -0
  186. package/template/.aioson/schemas/squad-manifest.schema.json +178 -1
  187. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  188. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  189. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  190. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  191. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  192. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  193. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  194. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  195. package/template/.aioson/skills/design/bold-editorial-ui/SKILL.md +205 -0
  196. package/template/.aioson/skills/design/bold-editorial-ui/references/art-direction.md +338 -0
  197. package/template/.aioson/skills/design/bold-editorial-ui/references/components.md +977 -0
  198. package/template/.aioson/skills/design/bold-editorial-ui/references/dashboards.md +218 -0
  199. package/template/.aioson/skills/design/bold-editorial-ui/references/design-tokens.md +326 -0
  200. package/template/.aioson/skills/design/bold-editorial-ui/references/motion.md +461 -0
  201. package/template/.aioson/skills/design/bold-editorial-ui/references/patterns.md +293 -0
  202. package/template/.aioson/skills/design/bold-editorial-ui/references/websites.md +352 -0
  203. package/template/.aioson/skills/design/clean-saas-ui/SKILL.md +210 -0
  204. package/template/.aioson/skills/design/clean-saas-ui/references/art-direction.md +319 -0
  205. package/template/.aioson/skills/design/clean-saas-ui/references/components.md +365 -0
  206. package/template/.aioson/skills/design/clean-saas-ui/references/dashboards.md +196 -0
  207. package/template/.aioson/skills/design/clean-saas-ui/references/design-tokens.md +244 -0
  208. package/template/.aioson/skills/design/clean-saas-ui/references/motion.md +235 -0
  209. package/template/.aioson/skills/design/clean-saas-ui/references/patterns.md +215 -0
  210. package/template/.aioson/skills/design/clean-saas-ui/references/websites.md +295 -0
  211. package/template/.aioson/skills/design/cognitive-core-ui/SKILL.md +55 -9
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/art-direction.md +339 -0
  213. package/template/.aioson/skills/design/cognitive-core-ui/references/components.md +1 -1
  214. package/template/.aioson/skills/design/cognitive-core-ui/references/dashboards.md +100 -0
  215. package/template/.aioson/skills/design/cognitive-core-ui/references/design-tokens.md +43 -9
  216. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +40 -0
  217. package/template/.aioson/skills/design/cognitive-core-ui/references/patterns.md +1 -1
  218. package/template/.aioson/skills/design/cognitive-core-ui/references/websites.md +99 -12
  219. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  220. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  221. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  222. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  223. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  224. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  225. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  226. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  227. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  228. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  229. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  230. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  231. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  232. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  233. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  234. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  235. package/template/.aioson/skills/design/warm-craft-ui/SKILL.md +209 -0
  236. package/template/.aioson/skills/design/warm-craft-ui/references/art-direction.md +324 -0
  237. package/template/.aioson/skills/design/warm-craft-ui/references/components.md +508 -0
  238. package/template/.aioson/skills/design/warm-craft-ui/references/dashboards.md +223 -0
  239. package/template/.aioson/skills/design/warm-craft-ui/references/design-tokens.md +374 -0
  240. package/template/.aioson/skills/design/warm-craft-ui/references/motion.md +356 -0
  241. package/template/.aioson/skills/design/warm-craft-ui/references/patterns.md +288 -0
  242. package/template/.aioson/skills/design/warm-craft-ui/references/websites.md +289 -0
  243. package/template/.aioson/skills/premium-visual-design/SKILL.md +83 -0
  244. package/template/.aioson/skills/premium-visual-design/components/agent-badge.md +92 -0
  245. package/template/.aioson/skills/premium-visual-design/components/dependency-node.md +102 -0
  246. package/template/.aioson/skills/premium-visual-design/components/mention-autocomplete.md +136 -0
  247. package/template/.aioson/skills/premium-visual-design/components/notification-center.md +136 -0
  248. package/template/.aioson/skills/premium-visual-design/components/review-action-bar.md +188 -0
  249. package/template/.aioson/skills/premium-visual-design/components/team-switcher.md +131 -0
  250. package/template/.aioson/skills/premium-visual-design/patterns/agent-message-thread.md +198 -0
  251. package/template/.aioson/skills/premium-visual-design/patterns/notification-panel.md +275 -0
  252. package/template/.aioson/skills/premium-visual-design/patterns/review-workflow-ui.md +234 -0
  253. package/template/.aioson/skills/premium-visual-design/patterns/task-dependency-graph.md +147 -0
  254. package/template/.aioson/skills/premium-visual-design/tokens/status-extended.md +142 -0
  255. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  256. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  257. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  258. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  259. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  260. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  261. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  262. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  263. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  264. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  265. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  266. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  267. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  268. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  269. package/template/.aioson/skills/squad/formats/catalog.json +15 -0
  270. package/template/.aioson/skills/squad/formats/content/blog-post.md +47 -0
  271. package/template/.aioson/skills/squad/formats/content/newsletter.md +47 -0
  272. package/template/.aioson/skills/squad/formats/creative/podcast-script.md +43 -0
  273. package/template/.aioson/skills/squad/formats/creative/video-script.md +41 -0
  274. package/template/.aioson/skills/squad/formats/social/instagram-feed.md +42 -0
  275. package/template/.aioson/skills/squad/formats/social/linkedin-post.md +42 -0
  276. package/template/.aioson/skills/squad/formats/social/tiktok.md +39 -0
  277. package/template/.aioson/skills/squad/formats/social/twitter-thread.md +39 -0
  278. package/template/.aioson/skills/squad/formats/social/youtube-long.md +47 -0
  279. package/template/.aioson/skills/squad/formats/social/youtube-shorts.md +39 -0
  280. package/template/.aioson/skills/squad/patterns/multi-platform-pattern.md +108 -0
  281. package/template/.aioson/skills/squad/patterns/persona-based-pattern.md +98 -0
  282. package/template/.aioson/skills/squad/patterns/pipeline-pattern.md +106 -0
  283. package/template/.aioson/skills/squad/patterns/review-loop-pattern.md +81 -0
  284. package/template/.aioson/skills/squad/references/checklist-templates.md +122 -0
  285. package/template/.aioson/skills/squad/references/executor-archetypes.md +123 -0
  286. package/template/.aioson/skills/squad/references/workflow-templates.md +169 -0
  287. package/template/.aioson/skills/static/debugging-protocol.md +42 -0
  288. package/template/.aioson/skills/static/git-worktrees.md +36 -0
  289. package/template/.aioson/tasks/implementation-plan.md +19 -0
  290. package/template/.aioson/tasks/squad-design.md +28 -0
  291. package/template/.aioson/tasks/squad-profile.md +48 -0
  292. package/template/.aioson/tasks/squad-review.md +61 -0
  293. package/template/.aioson/tasks/squad-task-decompose.md +66 -0
  294. package/template/.claude/commands/aioson/agent/neo.md +5 -0
  295. package/template/.claude/commands/aioson/agent/tester.md +5 -0
  296. package/template/.gemini/GEMINI.md +1 -0
  297. package/template/.gemini/commands/aios-neo.toml +4 -0
  298. package/template/.gemini/commands/aios-tester.toml +6 -0
  299. package/template/AGENTS.md +26 -1
  300. package/template/CLAUDE.md +6 -2
  301. package/template/OPENCODE.md +2 -0
package/docs/design-previews/premium-command-center-ui-website.html ADDED
@@ -0,0 +1,1217 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CTRL — Operational SaaS Landing / Premium Command Center UI Preview</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #0b1015;
15
+ --surface: #10161d;
16
+ --elevated: #151c24;
17
+ --border: rgba(255,255,255,0.08);
18
+ --border-accent: rgba(99,179,237,0.30);
19
+ --accent: #63b3ed;
20
+ --accent-muted: #4a90a4;
21
+ --accent-bg: rgba(99,179,237,0.10);
22
+ --accent-bg-solid: rgba(99,179,237,0.15);
23
+ --fg: #f3f7fb;
24
+ --fg-secondary: #b7c2cf;
25
+ --fg-muted: #7f8b99;
26
+ --green: #38a169;
27
+ --amber: #d97706;
28
+ --red: #e53e3e;
29
+ --green-bg: rgba(56,161,105,0.12);
30
+ --amber-bg: rgba(217,119,6,0.12);
31
+ --red-bg: rgba(229,62,62,0.12);
32
+ }
33
+
34
+ html { scroll-behavior: smooth; }
35
+
36
+ body {
37
+ font-family: 'Inter', sans-serif;
38
+ font-size: 14px;
39
+ line-height: 1.5;
40
+ color: var(--fg-secondary);
41
+ background: var(--bg);
42
+ /* Aurora effect */
43
+ background-image: radial-gradient(ellipse 800px 600px at 60% 20%, rgba(99,179,237,0.04) 0%, transparent 100%);
44
+ background-attachment: fixed;
45
+ }
46
+
47
+ /* ── NAV ── */
48
+ nav {
49
+ position: sticky;
50
+ top: 0;
51
+ z-index: 100;
52
+ background: rgba(11,16,21,0.94);
53
+ backdrop-filter: blur(16px);
54
+ border-bottom: 1px solid var(--border);
55
+ padding: 0 36px;
56
+ height: 56px;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: space-between;
60
+ }
61
+
62
+ .nav-logo {
63
+ font-family: 'JetBrains Mono', monospace;
64
+ font-size: 17px;
65
+ font-weight: 500;
66
+ color: var(--fg);
67
+ text-decoration: none;
68
+ letter-spacing: 0.08em;
69
+ }
70
+
71
+ .nav-logo span { color: var(--accent); }
72
+
73
+ .nav-center {
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 8px;
77
+ background: var(--surface);
78
+ border: 1px solid var(--border);
79
+ border-radius: 6px;
80
+ padding: 6px 14px;
81
+ width: 240px;
82
+ }
83
+
84
+ .nav-search-icon {
85
+ color: var(--fg-muted);
86
+ font-size: 12px;
87
+ flex-shrink: 0;
88
+ }
89
+
90
+ .nav-search-text {
91
+ font-family: 'JetBrains Mono', monospace;
92
+ font-size: 12px;
93
+ color: var(--fg-muted);
94
+ }
95
+
96
+ .nav-search-kbd {
97
+ margin-left: auto;
98
+ font-family: 'JetBrains Mono', monospace;
99
+ font-size: 10px;
100
+ color: var(--fg-muted);
101
+ background: var(--elevated);
102
+ border: 1px solid var(--border);
103
+ border-radius: 3px;
104
+ padding: 1px 6px;
105
+ }
106
+
107
+ .nav-links {
108
+ display: flex;
109
+ align-items: center;
110
+ gap: 24px;
111
+ list-style: none;
112
+ }
113
+
114
+ .nav-links a {
115
+ font-size: 13px;
116
+ font-weight: 500;
117
+ color: var(--fg-secondary);
118
+ text-decoration: none;
119
+ transition: color 0.2s;
120
+ }
121
+
122
+ .nav-links a:hover { color: var(--fg); }
123
+
124
+ .nav-actions {
125
+ display: flex;
126
+ align-items: center;
127
+ gap: 10px;
128
+ }
129
+
130
+ .btn-ghost-nav {
131
+ font-family: 'Inter', sans-serif;
132
+ font-size: 13px;
133
+ font-weight: 500;
134
+ color: var(--fg-secondary);
135
+ background: none;
136
+ border: 1px solid var(--border);
137
+ border-radius: 6px;
138
+ padding: 6px 14px;
139
+ cursor: pointer;
140
+ text-decoration: none;
141
+ transition: border-color 0.2s, color 0.2s;
142
+ }
143
+
144
+ .btn-ghost-nav:hover { border-color: var(--border-accent); color: var(--fg); }
145
+
146
+ .btn-solid-nav {
147
+ font-family: 'Inter', sans-serif;
148
+ font-size: 13px;
149
+ font-weight: 600;
150
+ color: var(--bg);
151
+ background: var(--accent);
152
+ border: none;
153
+ border-radius: 6px;
154
+ padding: 7px 16px;
155
+ cursor: pointer;
156
+ text-decoration: none;
157
+ }
158
+
159
+ /* ── LAYOUT ── */
160
+ section { padding: 80px 36px; }
161
+ .container { max-width: 1120px; margin: 0 auto; }
162
+
163
+ /* ── HERO ── */
164
+ .hero { padding: 72px 36px 0; }
165
+
166
+ .hero-inner { max-width: 1120px; margin: 0 auto; }
167
+
168
+ .hero-overline {
169
+ font-family: 'JetBrains Mono', monospace;
170
+ font-size: 10px;
171
+ font-weight: 500;
172
+ letter-spacing: 0.14em;
173
+ text-transform: uppercase;
174
+ color: var(--fg-muted);
175
+ margin-bottom: 18px;
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 8px;
179
+ }
180
+
181
+ .hero-overline::before {
182
+ content: '';
183
+ display: block;
184
+ width: 24px;
185
+ height: 1px;
186
+ background: var(--accent);
187
+ opacity: 0.5;
188
+ }
189
+
190
+ .hero h1 {
191
+ font-size: 44px;
192
+ font-weight: 700;
193
+ color: var(--fg);
194
+ line-height: 1.1;
195
+ letter-spacing: -0.02em;
196
+ max-width: 680px;
197
+ margin-bottom: 18px;
198
+ }
199
+
200
+ .hero-sub {
201
+ font-size: 16px;
202
+ color: var(--fg-secondary);
203
+ max-width: 520px;
204
+ margin-bottom: 36px;
205
+ line-height: 1.65;
206
+ }
207
+
208
+ .hero-ctas {
209
+ display: flex;
210
+ gap: 10px;
211
+ margin-bottom: 60px;
212
+ }
213
+
214
+ .btn-solid-lg {
215
+ font-family: 'Inter', sans-serif;
216
+ font-size: 14px;
217
+ font-weight: 600;
218
+ color: var(--bg);
219
+ background: var(--accent);
220
+ border: none;
221
+ border-radius: 6px;
222
+ padding: 11px 24px;
223
+ cursor: pointer;
224
+ text-decoration: none;
225
+ display: inline-flex;
226
+ align-items: center;
227
+ gap: 6px;
228
+ }
229
+
230
+ .btn-ghost-lg {
231
+ font-family: 'Inter', sans-serif;
232
+ font-size: 14px;
233
+ font-weight: 500;
234
+ color: var(--fg-secondary);
235
+ background: var(--accent-bg-solid);
236
+ border: 1px solid var(--border-accent);
237
+ border-radius: 6px;
238
+ padding: 11px 24px;
239
+ cursor: pointer;
240
+ text-decoration: none;
241
+ display: inline-flex;
242
+ align-items: center;
243
+ gap: 6px;
244
+ color: var(--accent);
245
+ }
246
+
247
+ /* Dashboard mock */
248
+ .product-mock {
249
+ background: var(--surface);
250
+ border: 1px solid var(--border);
251
+ border-radius: 8px;
252
+ overflow: hidden;
253
+ box-shadow: 0 24px 80px rgba(0,0,0,0.5);
254
+ }
255
+
256
+ .mock-chrome {
257
+ background: var(--elevated);
258
+ border-bottom: 1px solid var(--border);
259
+ padding: 10px 14px;
260
+ display: flex;
261
+ align-items: center;
262
+ gap: 6px;
263
+ }
264
+
265
+ .chrome-dot { width: 9px; height: 9px; border-radius: 50%; }
266
+ .chrome-dot.r { background: rgba(229,62,62,0.6); }
267
+ .chrome-dot.y { background: rgba(217,119,6,0.6); }
268
+ .chrome-dot.g { background: rgba(56,161,105,0.6); }
269
+
270
+ .chrome-url {
271
+ margin-left: 10px;
272
+ flex: 1;
273
+ background: rgba(255,255,255,0.04);
274
+ border: 1px solid var(--border);
275
+ border-radius: 4px;
276
+ padding: 3px 10px;
277
+ display: flex;
278
+ align-items: center;
279
+ }
280
+
281
+ .chrome-url-text {
282
+ font-family: 'JetBrains Mono', monospace;
283
+ font-size: 10px;
284
+ color: var(--fg-muted);
285
+ }
286
+
287
+ .mock-layout {
288
+ display: flex;
289
+ height: 380px;
290
+ }
291
+
292
+ /* Left nav rail */
293
+ .mock-rail-left {
294
+ width: 52px;
295
+ border-right: 1px solid var(--border);
296
+ display: flex;
297
+ flex-direction: column;
298
+ align-items: center;
299
+ padding: 14px 0;
300
+ gap: 6px;
301
+ background: var(--bg);
302
+ flex-shrink: 0;
303
+ }
304
+
305
+ .rail-icon {
306
+ width: 32px;
307
+ height: 32px;
308
+ border-radius: 6px;
309
+ display: flex;
310
+ align-items: center;
311
+ justify-content: center;
312
+ font-size: 14px;
313
+ color: var(--fg-muted);
314
+ }
315
+
316
+ .rail-icon.active {
317
+ background: var(--accent-bg-solid);
318
+ color: var(--accent);
319
+ border: 1px solid var(--border-accent);
320
+ }
321
+
322
+ /* Center workspace */
323
+ .mock-workspace {
324
+ flex: 1;
325
+ display: flex;
326
+ flex-direction: column;
327
+ overflow: hidden;
328
+ }
329
+
330
+ .workspace-header {
331
+ padding: 12px 16px;
332
+ border-bottom: 1px solid var(--border);
333
+ display: flex;
334
+ align-items: center;
335
+ justify-content: space-between;
336
+ }
337
+
338
+ .workspace-title {
339
+ font-size: 13px;
340
+ font-weight: 600;
341
+ color: var(--fg);
342
+ display: flex;
343
+ align-items: center;
344
+ gap: 8px;
345
+ }
346
+
347
+ .ws-badge {
348
+ font-family: 'JetBrains Mono', monospace;
349
+ font-size: 10px;
350
+ background: var(--accent-bg-solid);
351
+ color: var(--accent);
352
+ border: 1px solid var(--border-accent);
353
+ border-radius: 4px;
354
+ padding: 1px 7px;
355
+ }
356
+
357
+ .workspace-actions {
358
+ display: flex;
359
+ gap: 6px;
360
+ }
361
+
362
+ .ws-btn {
363
+ font-size: 11px;
364
+ font-family: 'JetBrains Mono', monospace;
365
+ color: var(--fg-muted);
366
+ background: var(--elevated);
367
+ border: 1px solid var(--border);
368
+ border-radius: 4px;
369
+ padding: 3px 10px;
370
+ cursor: pointer;
371
+ }
372
+
373
+ .workspace-body {
374
+ flex: 1;
375
+ overflow: hidden;
376
+ padding: 12px;
377
+ }
378
+
379
+ .ws-table { width: 100%; border-collapse: collapse; }
380
+
381
+ .ws-table th {
382
+ font-family: 'JetBrains Mono', monospace;
383
+ font-size: 9px;
384
+ font-weight: 500;
385
+ letter-spacing: 0.08em;
386
+ text-transform: uppercase;
387
+ color: var(--fg-muted);
388
+ text-align: left;
389
+ padding: 6px 8px;
390
+ border-bottom: 1px solid var(--border);
391
+ }
392
+
393
+ .ws-table td {
394
+ padding: 8px 8px;
395
+ font-size: 11px;
396
+ color: var(--fg-secondary);
397
+ border-bottom: 1px solid rgba(255,255,255,0.03);
398
+ vertical-align: middle;
399
+ }
400
+
401
+ .status-pill {
402
+ display: inline-flex;
403
+ align-items: center;
404
+ gap: 5px;
405
+ font-family: 'JetBrains Mono', monospace;
406
+ font-size: 9px;
407
+ font-weight: 500;
408
+ border-radius: 4px;
409
+ padding: 2px 8px;
410
+ }
411
+
412
+ .status-pill::before {
413
+ content: '';
414
+ display: block;
415
+ width: 5px;
416
+ height: 5px;
417
+ border-radius: 50%;
418
+ background: currentColor;
419
+ }
420
+
421
+ .status-pill.green { color: var(--green); background: var(--green-bg); }
422
+ .status-pill.amber { color: var(--amber); background: var(--amber-bg); }
423
+ .status-pill.red { color: var(--red); background: var(--red-bg); }
424
+ .status-pill.accent { color: var(--accent); background: var(--accent-bg); }
425
+
426
+ .mono-id {
427
+ font-family: 'JetBrains Mono', monospace;
428
+ font-size: 10px;
429
+ color: var(--fg-muted);
430
+ }
431
+
432
+ .mono-ts {
433
+ font-family: 'JetBrains Mono', monospace;
434
+ font-size: 9px;
435
+ color: var(--fg-muted);
436
+ }
437
+
438
+ /* Right rail */
439
+ .mock-rail-right {
440
+ width: 220px;
441
+ border-left: 1px solid var(--border);
442
+ display: flex;
443
+ flex-direction: column;
444
+ flex-shrink: 0;
445
+ background: var(--bg);
446
+ }
447
+
448
+ .rail-section-header {
449
+ font-family: 'JetBrains Mono', monospace;
450
+ font-size: 9px;
451
+ font-weight: 500;
452
+ letter-spacing: 0.1em;
453
+ text-transform: uppercase;
454
+ color: var(--fg-muted);
455
+ padding: 10px 12px 6px;
456
+ border-bottom: 1px solid var(--border);
457
+ }
458
+
459
+ .rail-metric {
460
+ padding: 10px 12px;
461
+ border-bottom: 1px solid rgba(255,255,255,0.03);
462
+ display: flex;
463
+ justify-content: space-between;
464
+ align-items: center;
465
+ }
466
+
467
+ .rail-metric-label {
468
+ font-size: 11px;
469
+ color: var(--fg-muted);
470
+ }
471
+
472
+ .rail-metric-value {
473
+ font-family: 'JetBrains Mono', monospace;
474
+ font-size: 12px;
475
+ font-weight: 500;
476
+ color: var(--fg);
477
+ }
478
+
479
+ .rail-metric-value.green { color: var(--green); }
480
+ .rail-metric-value.amber { color: var(--amber); }
481
+ .rail-metric-value.accent { color: var(--accent); }
482
+
483
+ /* ── WHY SECTION ── */
484
+ .why-section { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
485
+
486
+ .section-label-mono {
487
+ font-family: 'JetBrains Mono', monospace;
488
+ font-size: 10px;
489
+ font-weight: 500;
490
+ letter-spacing: 0.14em;
491
+ text-transform: uppercase;
492
+ color: var(--accent);
493
+ display: block;
494
+ margin-bottom: 14px;
495
+ }
496
+
497
+ .section-heading {
498
+ font-size: 28px;
499
+ font-weight: 700;
500
+ color: var(--fg);
501
+ letter-spacing: -0.02em;
502
+ margin-bottom: 12px;
503
+ line-height: 1.2;
504
+ }
505
+
506
+ .section-sub {
507
+ font-size: 15px;
508
+ color: var(--fg-secondary);
509
+ max-width: 440px;
510
+ margin-bottom: 48px;
511
+ line-height: 1.65;
512
+ }
513
+
514
+ .feature-rows { display: flex; flex-direction: column; gap: 0; }
515
+
516
+ .feature-row {
517
+ display: flex;
518
+ align-items: flex-start;
519
+ gap: 24px;
520
+ padding: 28px 0;
521
+ border-bottom: 1px solid var(--border);
522
+ }
523
+
524
+ .feature-row:last-child { border-bottom: none; }
525
+
526
+ .feature-row-icon {
527
+ width: 40px;
528
+ height: 40px;
529
+ border-radius: 6px;
530
+ background: var(--accent-bg-solid);
531
+ border: 1px solid var(--border-accent);
532
+ display: flex;
533
+ align-items: center;
534
+ justify-content: center;
535
+ font-size: 16px;
536
+ flex-shrink: 0;
537
+ position: relative;
538
+ }
539
+
540
+ .feature-row-icon::before {
541
+ content: '';
542
+ position: absolute;
543
+ left: -25px;
544
+ top: 50%;
545
+ transform: translateY(-50%);
546
+ width: 3px;
547
+ height: 100%;
548
+ background: var(--accent);
549
+ border-radius: 0 2px 2px 0;
550
+ opacity: 0.6;
551
+ }
552
+
553
+ .feature-row-body { flex: 1; }
554
+
555
+ .feature-row h3 {
556
+ font-size: 15px;
557
+ font-weight: 600;
558
+ color: var(--fg);
559
+ margin-bottom: 6px;
560
+ }
561
+
562
+ .feature-row p {
563
+ font-size: 13px;
564
+ color: var(--fg-secondary);
565
+ line-height: 1.6;
566
+ max-width: 600px;
567
+ }
568
+
569
+ /* ── LIVE METRICS ── */
570
+ .live-section { background: var(--bg); }
571
+
572
+ .live-grid {
573
+ display: grid;
574
+ grid-template-columns: 1fr 1fr;
575
+ gap: 20px;
576
+ }
577
+
578
+ .live-panel {
579
+ background: var(--surface);
580
+ border: 1px solid var(--border);
581
+ border-radius: 8px;
582
+ overflow: hidden;
583
+ }
584
+
585
+ .live-panel-header {
586
+ padding: 12px 16px;
587
+ border-bottom: 1px solid var(--border);
588
+ display: flex;
589
+ align-items: center;
590
+ justify-content: space-between;
591
+ }
592
+
593
+ .live-panel-title {
594
+ font-size: 12px;
595
+ font-weight: 600;
596
+ color: var(--fg);
597
+ display: flex;
598
+ align-items: center;
599
+ gap: 8px;
600
+ }
601
+
602
+ .live-indicator {
603
+ width: 6px;
604
+ height: 6px;
605
+ border-radius: 50%;
606
+ background: var(--green);
607
+ box-shadow: 0 0 6px rgba(56,161,105,0.8);
608
+ animation: pulse-green 2s ease-in-out infinite;
609
+ }
610
+
611
+ @keyframes pulse-green {
612
+ 0%, 100% { opacity: 1; }
613
+ 50% { opacity: 0.5; }
614
+ }
615
+
616
+ .live-ts {
617
+ font-family: 'JetBrains Mono', monospace;
618
+ font-size: 10px;
619
+ color: var(--fg-muted);
620
+ }
621
+
622
+ .live-panel-body { padding: 16px; }
623
+
624
+ .live-row {
625
+ display: flex;
626
+ align-items: center;
627
+ justify-content: space-between;
628
+ padding: 8px 0;
629
+ border-bottom: 1px solid rgba(255,255,255,0.03);
630
+ }
631
+
632
+ .live-row:last-child { border-bottom: none; }
633
+
634
+ .live-row-label {
635
+ display: flex;
636
+ align-items: center;
637
+ gap: 8px;
638
+ font-size: 12px;
639
+ color: var(--fg-secondary);
640
+ }
641
+
642
+ .live-row-label::before {
643
+ content: '';
644
+ display: block;
645
+ width: 6px;
646
+ height: 6px;
647
+ border-radius: 50%;
648
+ }
649
+
650
+ .live-row-label.green::before { background: var(--green); }
651
+ .live-row-label.amber::before { background: var(--amber); }
652
+ .live-row-label.red::before { background: var(--red); }
653
+ .live-row-label.accent::before { background: var(--accent); }
654
+
655
+ .live-row-val {
656
+ font-family: 'JetBrains Mono', monospace;
657
+ font-size: 13px;
658
+ font-weight: 500;
659
+ color: var(--fg);
660
+ display: flex;
661
+ align-items: center;
662
+ gap: 8px;
663
+ }
664
+
665
+ .live-row-delta {
666
+ font-size: 10px;
667
+ font-family: 'JetBrains Mono', monospace;
668
+ padding: 1px 5px;
669
+ border-radius: 3px;
670
+ }
671
+
672
+ .delta-up { color: var(--green); background: var(--green-bg); }
673
+ .delta-down { color: var(--red); background: var(--red-bg); }
674
+
675
+ /* ── INTEGRATIONS ── */
676
+ .integrations-section { background: var(--surface); border-top: 1px solid var(--border); }
677
+
678
+ .integrations-grid {
679
+ display: grid;
680
+ grid-template-columns: repeat(8, 1fr);
681
+ gap: 14px;
682
+ margin-top: 40px;
683
+ }
684
+
685
+ .integration-tile {
686
+ background: var(--elevated);
687
+ border: 1px solid var(--border);
688
+ border-radius: 8px;
689
+ aspect-ratio: 1;
690
+ display: flex;
691
+ align-items: center;
692
+ justify-content: center;
693
+ font-weight: 700;
694
+ font-size: 15px;
695
+ color: var(--accent);
696
+ transition: border-color 0.2s;
697
+ cursor: pointer;
698
+ }
699
+
700
+ .integration-tile:hover { border-color: var(--border-accent); }
701
+
702
+ /* ── QUOTE ── */
703
+ .quote-section { background: var(--bg); }
704
+
705
+ .quote-card {
706
+ max-width: 720px;
707
+ margin: 0 auto;
708
+ background: var(--surface);
709
+ border: 1px solid var(--border);
710
+ border-radius: 8px;
711
+ padding: 40px 44px;
712
+ position: relative;
713
+ }
714
+
715
+ .quote-card::before {
716
+ content: '';
717
+ position: absolute;
718
+ top: 0;
719
+ left: 0;
720
+ right: 0;
721
+ height: 1px;
722
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
723
+ opacity: 0.3;
724
+ border-radius: 8px 8px 0 0;
725
+ }
726
+
727
+ .quote-text {
728
+ font-size: 16px;
729
+ color: var(--fg);
730
+ line-height: 1.65;
731
+ margin-bottom: 24px;
732
+ font-style: italic;
733
+ }
734
+
735
+ .quote-author {
736
+ display: flex;
737
+ align-items: center;
738
+ gap: 12px;
739
+ }
740
+
741
+ .quote-avatar {
742
+ width: 38px;
743
+ height: 38px;
744
+ border-radius: 50%;
745
+ background: var(--accent-bg-solid);
746
+ border: 1px solid var(--border-accent);
747
+ display: flex;
748
+ align-items: center;
749
+ justify-content: center;
750
+ font-size: 13px;
751
+ font-weight: 700;
752
+ color: var(--accent);
753
+ flex-shrink: 0;
754
+ }
755
+
756
+ .quote-name {
757
+ font-size: 13px;
758
+ font-weight: 600;
759
+ color: var(--fg);
760
+ margin-bottom: 2px;
761
+ }
762
+
763
+ .quote-role {
764
+ font-family: 'JetBrains Mono', monospace;
765
+ font-size: 10px;
766
+ color: var(--fg-muted);
767
+ }
768
+
769
+ /* ── CTA ── */
770
+ .cta-section {
771
+ background: var(--surface);
772
+ border-top: 1px solid var(--border);
773
+ padding: 80px 36px;
774
+ text-align: center;
775
+ }
776
+
777
+ .cta-section h2 {
778
+ font-size: 32px;
779
+ font-weight: 700;
780
+ color: var(--fg);
781
+ letter-spacing: -0.02em;
782
+ margin-bottom: 14px;
783
+ }
784
+
785
+ .cta-section p {
786
+ font-size: 15px;
787
+ color: var(--fg-secondary);
788
+ margin-bottom: 36px;
789
+ }
790
+
791
+ /* ── FOOTER ── */
792
+ footer {
793
+ background: #080d11;
794
+ border-top: 1px solid var(--border);
795
+ padding: 56px 36px 28px;
796
+ }
797
+
798
+ .footer-inner { max-width: 1120px; margin: 0 auto; }
799
+
800
+ .footer-grid {
801
+ display: grid;
802
+ grid-template-columns: 1.5fr 1fr 1fr 1fr;
803
+ gap: 48px;
804
+ margin-bottom: 44px;
805
+ }
806
+
807
+ .footer-brand-sub {
808
+ font-size: 13px;
809
+ color: var(--fg-muted);
810
+ margin-top: 12px;
811
+ line-height: 1.6;
812
+ max-width: 240px;
813
+ }
814
+
815
+ .footer-col-title {
816
+ font-family: 'JetBrains Mono', monospace;
817
+ font-size: 9px;
818
+ font-weight: 500;
819
+ letter-spacing: 0.14em;
820
+ text-transform: uppercase;
821
+ color: var(--fg-muted);
822
+ margin-bottom: 16px;
823
+ }
824
+
825
+ .footer-links { list-style: none; }
826
+ .footer-links li { margin-bottom: 9px; }
827
+
828
+ .footer-links a {
829
+ font-size: 13px;
830
+ color: var(--fg-secondary);
831
+ text-decoration: none;
832
+ transition: color 0.2s;
833
+ }
834
+
835
+ .footer-links a:hover { color: var(--fg); }
836
+
837
+ .footer-bottom {
838
+ border-top: 1px solid var(--border);
839
+ padding-top: 20px;
840
+ display: flex;
841
+ justify-content: space-between;
842
+ align-items: center;
843
+ flex-wrap: wrap;
844
+ gap: 8px;
845
+ }
846
+
847
+ .footer-mono {
848
+ font-family: 'JetBrains Mono', monospace;
849
+ font-size: 10px;
850
+ color: var(--fg-muted);
851
+ }
852
+
853
+ .footer-mono .accent { color: var(--accent); }
854
+
855
+ .text-center { text-align: center; }
856
+ .mb-48 { margin-bottom: 48px; }
857
+ </style>
858
+ </head>
859
+ <body>
860
+
861
+ <!-- NAV -->
862
+ <nav>
863
+ <a href="#" class="nav-logo">C<span>T</span>RL</a>
864
+
865
+ <div class="nav-center">
866
+ <span class="nav-search-icon">⌕</span>
867
+ <span class="nav-search-text">Search CTRL...</span>
868
+ <span class="nav-search-kbd">⌘K</span>
869
+ </div>
870
+
871
+ <ul class="nav-links">
872
+ <li><a href="#">Platform</a></li>
873
+ <li><a href="#">Integrations</a></li>
874
+ <li><a href="#">Enterprise</a></li>
875
+ <li><a href="#">Pricing</a></li>
876
+ </ul>
877
+
878
+ <div class="nav-actions">
879
+ <a href="#" class="btn-ghost-nav">Sign in</a>
880
+ <a href="#" class="btn-solid-nav">Request access</a>
881
+ </div>
882
+ </nav>
883
+
884
+ <!-- HERO -->
885
+ <div class="hero">
886
+ <div class="hero-inner">
887
+ <div class="hero-overline">Real-Time Operations Platform</div>
888
+ <h1>Command every layer of your infrastructure.</h1>
889
+ <p class="hero-sub">CTRL gives engineering organizations a unified control plane — live metrics, incident management, and deployment orchestration in one premium interface.</p>
890
+ <div class="hero-ctas">
891
+ <a href="#" class="btn-solid-lg">Request access →</a>
892
+ <a href="#" class="btn-ghost-lg">See the platform</a>
893
+ </div>
894
+
895
+ <!-- Product screenshot mock -->
896
+ <div class="product-mock">
897
+ <div class="mock-chrome">
898
+ <div class="chrome-dot r"></div>
899
+ <div class="chrome-dot y"></div>
900
+ <div class="chrome-dot g"></div>
901
+ <div class="chrome-url"><span class="chrome-url-text">app.ctrl.io/operations</span></div>
902
+ </div>
903
+ <div class="mock-layout">
904
+ <!-- Left nav rail -->
905
+ <div class="mock-rail-left">
906
+ <div class="rail-icon active">⚡</div>
907
+ <div class="rail-icon">📊</div>
908
+ <div class="rail-icon">🔔</div>
909
+ <div class="rail-icon">📋</div>
910
+ <div class="rail-icon">⚙</div>
911
+ </div>
912
+
913
+ <!-- Center workspace -->
914
+ <div class="mock-workspace">
915
+ <div class="workspace-header">
916
+ <div class="workspace-title">
917
+ Operations Feed
918
+ <span class="ws-badge">Live</span>
919
+ </div>
920
+ <div class="workspace-actions">
921
+ <button class="ws-btn">Filter</button>
922
+ <button class="ws-btn">Group by</button>
923
+ </div>
924
+ </div>
925
+ <div class="workspace-body">
926
+ <table class="ws-table">
927
+ <thead>
928
+ <tr>
929
+ <th>Status</th>
930
+ <th>Service</th>
931
+ <th>Event</th>
932
+ <th>Environment</th>
933
+ <th>Timestamp</th>
934
+ <th>ID</th>
935
+ </tr>
936
+ </thead>
937
+ <tbody>
938
+ <tr>
939
+ <td><span class="status-pill red">Critical</span></td>
940
+ <td>api-gateway</td>
941
+ <td>P99 latency &gt; 2s threshold</td>
942
+ <td><span class="mono-id">prod-us-east-1</span></td>
943
+ <td><span class="mono-ts">14:02:31</span></td>
944
+ <td><span class="mono-id">OPS-4821</span></td>
945
+ </tr>
946
+ <tr>
947
+ <td><span class="status-pill amber">Warning</span></td>
948
+ <td>db-primary</td>
949
+ <td>Connection pool at 89% capacity</td>
950
+ <td><span class="mono-id">prod-us-east-1</span></td>
951
+ <td><span class="mono-ts">14:01:08</span></td>
952
+ <td><span class="mono-id">OPS-4820</span></td>
953
+ </tr>
954
+ <tr>
955
+ <td><span class="status-pill accent">Deploying</span></td>
956
+ <td>user-service</td>
957
+ <td>Release v2.14.1 rollout 40%</td>
958
+ <td><span class="mono-id">prod-eu-west-1</span></td>
959
+ <td><span class="mono-ts">13:58:44</span></td>
960
+ <td><span class="mono-id">OPS-4819</span></td>
961
+ </tr>
962
+ <tr>
963
+ <td><span class="status-pill green">Healthy</span></td>
964
+ <td>auth-service</td>
965
+ <td>Deployment v3.2.0 complete</td>
966
+ <td><span class="mono-id">prod-us-east-1</span></td>
967
+ <td><span class="mono-ts">13:47:19</span></td>
968
+ <td><span class="mono-id">OPS-4818</span></td>
969
+ </tr>
970
+ <tr>
971
+ <td><span class="status-pill green">Healthy</span></td>
972
+ <td>billing-service</td>
973
+ <td>Autoscale: 3 → 6 replicas</td>
974
+ <td><span class="mono-id">prod-us-west-2</span></td>
975
+ <td><span class="mono-ts">13:39:55</span></td>
976
+ <td><span class="mono-id">OPS-4817</span></td>
977
+ </tr>
978
+ </tbody>
979
+ </table>
980
+ </div>
981
+ </div>
982
+
983
+ <!-- Right rail -->
984
+ <div class="mock-rail-right">
985
+ <div class="rail-section-header">System Health</div>
986
+ <div class="rail-metric">
987
+ <span class="rail-metric-label">API Gateway</span>
988
+ <span class="rail-metric-value red">Critical</span>
989
+ </div>
990
+ <div class="rail-metric">
991
+ <span class="rail-metric-label">Database</span>
992
+ <span class="rail-metric-value amber">Warning</span>
993
+ </div>
994
+ <div class="rail-metric">
995
+ <span class="rail-metric-label">CDN</span>
996
+ <span class="rail-metric-value green">Healthy</span>
997
+ </div>
998
+ <div class="rail-metric">
999
+ <span class="rail-metric-label">Auth</span>
1000
+ <span class="rail-metric-value green">Healthy</span>
1001
+ </div>
1002
+ <div class="rail-section-header" style="margin-top:4px">Uptime Today</div>
1003
+ <div class="rail-metric">
1004
+ <span class="rail-metric-label">P99 Latency</span>
1005
+ <span class="rail-metric-value accent">2.1s</span>
1006
+ </div>
1007
+ <div class="rail-metric">
1008
+ <span class="rail-metric-label">Error Rate</span>
1009
+ <span class="rail-metric-value amber">0.8%</span>
1010
+ </div>
1011
+ <div class="rail-metric">
1012
+ <span class="rail-metric-label">Uptime</span>
1013
+ <span class="rail-metric-value green">99.94%</span>
1014
+ </div>
1015
+ </div>
1016
+ </div>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <!-- WHY -->
1022
+ <section class="why-section">
1023
+ <div class="container">
1024
+ <span class="section-label-mono">Built different</span>
1025
+ <h2 class="section-heading">Built for operations under pressure.</h2>
1026
+ <p class="section-sub">Every design decision in CTRL was made with one question: what does an engineer need in the first 60 seconds of an incident?</p>
1027
+
1028
+ <div class="feature-rows">
1029
+ <div class="feature-row">
1030
+ <div class="feature-row-icon">⚡</div>
1031
+ <div class="feature-row-body">
1032
+ <h3>Sub-second event propagation</h3>
1033
+ <p>CTRL uses a push-based architecture — events reach your dashboard in under 200ms from source systems. No polling, no refresh buttons. When things break, you know immediately.</p>
1034
+ </div>
1035
+ </div>
1036
+ <div class="feature-row">
1037
+ <div class="feature-row-icon">🎯</div>
1038
+ <div class="feature-row-body">
1039
+ <h3>Signal over noise</h3>
1040
+ <p>Intelligent deduplication and severity routing ensures critical signals reach the right person without notification fatigue. Configurable thresholds per service, per team.</p>
1041
+ </div>
1042
+ </div>
1043
+ <div class="feature-row">
1044
+ <div class="feature-row-icon">🏗</div>
1045
+ <div class="feature-row-body">
1046
+ <h3>Multi-environment by default</h3>
1047
+ <p>Manage production, staging, and canary environments from a single control plane. Environment context is always visible — never ambiguous, never costly to switch.</p>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </section>
1053
+
1054
+ <!-- LIVE METRICS -->
1055
+ <section class="live-section">
1056
+ <div class="container">
1057
+ <span class="section-label-mono">Live data</span>
1058
+ <h2 class="section-heading" style="margin-bottom:40px">Operational intelligence in real time.</h2>
1059
+ <div class="live-grid">
1060
+ <div class="live-panel">
1061
+ <div class="live-panel-header">
1062
+ <div class="live-panel-title">
1063
+ <div class="live-indicator"></div>
1064
+ Service Health
1065
+ </div>
1066
+ <span class="live-ts">Updated 14:02:31</span>
1067
+ </div>
1068
+ <div class="live-panel-body">
1069
+ <div class="live-row">
1070
+ <div class="live-row-label green">api-gateway</div>
1071
+ <div class="live-row-val">99.1% <span class="live-row-delta delta-down">↓0.3%</span></div>
1072
+ </div>
1073
+ <div class="live-row">
1074
+ <div class="live-row-label green">auth-service</div>
1075
+ <div class="live-row-val">100% <span class="live-row-delta delta-up">↑</span></div>
1076
+ </div>
1077
+ <div class="live-row">
1078
+ <div class="live-row-label amber">db-primary</div>
1079
+ <div class="live-row-val">98.7% <span class="live-row-delta delta-down">↓1.1%</span></div>
1080
+ </div>
1081
+ <div class="live-row">
1082
+ <div class="live-row-label green">cdn</div>
1083
+ <div class="live-row-val">100% <span class="live-row-delta delta-up">↑</span></div>
1084
+ </div>
1085
+ <div class="live-row">
1086
+ <div class="live-row-label green">billing-service</div>
1087
+ <div class="live-row-val">99.9% <span class="live-row-delta delta-up">↑</span></div>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+
1092
+ <div class="live-panel">
1093
+ <div class="live-panel-header">
1094
+ <div class="live-panel-title">
1095
+ <div class="live-indicator"></div>
1096
+ Request Metrics
1097
+ </div>
1098
+ <span class="live-ts">Updated 14:02:31</span>
1099
+ </div>
1100
+ <div class="live-panel-body">
1101
+ <div class="live-row">
1102
+ <div class="live-row-label accent">Req/s (p50)</div>
1103
+ <div class="live-row-val">4,821 <span class="live-row-delta delta-up">↑12%</span></div>
1104
+ </div>
1105
+ <div class="live-row">
1106
+ <div class="live-row-label accent">P99 Latency</div>
1107
+ <div class="live-row-val">211ms <span class="live-row-delta delta-down">↑18ms</span></div>
1108
+ </div>
1109
+ <div class="live-row">
1110
+ <div class="live-row-label amber">Error rate</div>
1111
+ <div class="live-row-val">0.08% <span class="live-row-delta delta-down">↓</span></div>
1112
+ </div>
1113
+ <div class="live-row">
1114
+ <div class="live-row-label green">Cache hit</div>
1115
+ <div class="live-row-val">94.2% <span class="live-row-delta delta-up">↑</span></div>
1116
+ </div>
1117
+ <div class="live-row">
1118
+ <div class="live-row-label green">Active users</div>
1119
+ <div class="live-row-val">12,440 <span class="live-row-delta delta-up">↑</span></div>
1120
+ </div>
1121
+ </div>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+ </section>
1126
+
1127
+ <!-- INTEGRATIONS -->
1128
+ <section class="integrations-section">
1129
+ <div class="container">
1130
+ <div class="text-center">
1131
+ <span class="section-label-mono">Integrations</span>
1132
+ <h2 class="section-heading">Works with your stack.</h2>
1133
+ <p class="section-sub" style="margin: 0 auto 0;">Connect in minutes. No custom code required.</p>
1134
+ </div>
1135
+ <div class="integrations-grid">
1136
+ <div class="integration-tile">DD</div>
1137
+ <div class="integration-tile">PD</div>
1138
+ <div class="integration-tile">GH</div>
1139
+ <div class="integration-tile">SL</div>
1140
+ <div class="integration-tile">GF</div>
1141
+ <div class="integration-tile">K8</div>
1142
+ <div class="integration-tile">TF</div>
1143
+ <div class="integration-tile">AWS</div>
1144
+ </div>
1145
+ </div>
1146
+ </section>
1147
+
1148
+ <!-- QUOTE -->
1149
+ <section class="quote-section">
1150
+ <div class="container">
1151
+ <div class="quote-card">
1152
+ <p class="quote-text">"We replaced four different dashboards with CTRL. The signal-to-noise improvement alone paid for the subscription in the first week. Our MTTR dropped 60% because the right people now see the right alerts instantly."</p>
1153
+ <div class="quote-author">
1154
+ <div class="quote-avatar">AP</div>
1155
+ <div>
1156
+ <div class="quote-name">Alexei Petrov</div>
1157
+ <div class="quote-role">Head of SRE @ Northvault</div>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+ </section>
1163
+
1164
+ <!-- CTA -->
1165
+ <div class="cta-section">
1166
+ <div class="container">
1167
+ <h2>Operational excellence starts here.</h2>
1168
+ <p>Enterprise-grade platform. Ready in under a day. No vendor lock-in.</p>
1169
+ <a href="#" class="btn-solid-lg">Request access →</a>
1170
+ </div>
1171
+ </div>
1172
+
1173
+ <!-- FOOTER -->
1174
+ <footer>
1175
+ <div class="footer-inner">
1176
+ <div class="footer-grid">
1177
+ <div>
1178
+ <a href="#" style="font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:500;color:var(--fg);text-decoration:none;letter-spacing:0.08em;">C<span style="color:var(--accent)">T</span>RL</a>
1179
+ <p class="footer-brand-sub">The premium control plane for engineering organizations who demand reliability and clarity at every scale.</p>
1180
+ </div>
1181
+ <div>
1182
+ <div class="footer-col-title">Platform</div>
1183
+ <ul class="footer-links">
1184
+ <li><a href="#">Operations Feed</a></li>
1185
+ <li><a href="#">Incident Manager</a></li>
1186
+ <li><a href="#">Deploy Tracker</a></li>
1187
+ <li><a href="#">Analytics</a></li>
1188
+ </ul>
1189
+ </div>
1190
+ <div>
1191
+ <div class="footer-col-title">Enterprise</div>
1192
+ <ul class="footer-links">
1193
+ <li><a href="#">SSO & SAML</a></li>
1194
+ <li><a href="#">Audit Logs</a></li>
1195
+ <li><a href="#">SLA Agreements</a></li>
1196
+ <li><a href="#">Data Residency</a></li>
1197
+ </ul>
1198
+ </div>
1199
+ <div>
1200
+ <div class="footer-col-title">Company</div>
1201
+ <ul class="footer-links">
1202
+ <li><a href="#">About</a></li>
1203
+ <li><a href="#">Security</a></li>
1204
+ <li><a href="#">Status</a></li>
1205
+ <li><a href="#">Careers</a></li>
1206
+ </ul>
1207
+ </div>
1208
+ </div>
1209
+ <div class="footer-bottom">
1210
+ <span class="footer-mono">© 2024 <span class="accent">CTRL</span> Technologies, Inc.</span>
1211
+ <span class="footer-mono">sys_ts: <span class="accent">2024-01-15T14:02:31Z</span> · Premium Command Center UI — Design Skill Preview</span>
1212
+ </div>
1213
+ </div>
1214
+ </footer>
1215
+
1216
+ </body>
1217
+ </html>