@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/cognitive-core-ui-website.html ADDED
@@ -0,0 +1,1009 @@
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>SynapseAI โ€” AI Platform Landing / Cognitive Core 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;800&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: #0B0F15;
15
+ --surface: #111827;
16
+ --elevated: #1A2332;
17
+ --border: rgba(255,255,255,0.06);
18
+ --border-accent: rgba(34,211,238,0.30);
19
+ --accent: #22D3EE;
20
+ --accent-dim: rgba(34,211,238,0.12);
21
+ --accent-glow: 0 0 40px rgba(34,211,238,0.12);
22
+ --text-heading: #F9FAFB;
23
+ --text-body: #E5E7EB;
24
+ --text-secondary: #9CA3AF;
25
+ --text-muted: #6B7280;
26
+ --void: #060910;
27
+ }
28
+
29
+ html { scroll-behavior: smooth; }
30
+
31
+ body {
32
+ font-family: 'Inter', sans-serif;
33
+ font-size: 15px;
34
+ line-height: 1.6;
35
+ color: var(--text-body);
36
+ background: var(--bg);
37
+ }
38
+
39
+ /* โ”€โ”€ NAV โ”€โ”€ */
40
+ nav {
41
+ position: sticky;
42
+ top: 0;
43
+ z-index: 100;
44
+ background: rgba(11,15,21,0.92);
45
+ backdrop-filter: blur(12px);
46
+ border-bottom: 1px solid var(--border);
47
+ padding: 0 40px;
48
+ height: 64px;
49
+ display: flex;
50
+ align-items: center;
51
+ justify-content: space-between;
52
+ }
53
+
54
+ .nav-logo {
55
+ font-size: 18px;
56
+ font-weight: 800;
57
+ color: var(--text-heading);
58
+ text-decoration: none;
59
+ display: flex;
60
+ align-items: center;
61
+ gap: 10px;
62
+ letter-spacing: -0.02em;
63
+ }
64
+
65
+ .nav-logo-mark {
66
+ width: 30px;
67
+ height: 30px;
68
+ background: var(--accent);
69
+ border-radius: 8px;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ font-size: 14px;
74
+ font-weight: 800;
75
+ color: #0B0F15;
76
+ box-shadow: 0 0 16px rgba(34,211,238,0.4);
77
+ }
78
+
79
+ .live-dot {
80
+ width: 7px;
81
+ height: 7px;
82
+ border-radius: 50%;
83
+ background: var(--accent);
84
+ box-shadow: 0 0 8px rgba(34,211,238,0.8);
85
+ animation: pulse 2s ease-in-out infinite;
86
+ }
87
+
88
+ @keyframes pulse {
89
+ 0%, 100% { opacity: 1; }
90
+ 50% { opacity: 0.4; }
91
+ }
92
+
93
+ .nav-links {
94
+ display: flex;
95
+ align-items: center;
96
+ gap: 32px;
97
+ list-style: none;
98
+ }
99
+
100
+ .nav-links a {
101
+ font-size: 14px;
102
+ font-weight: 500;
103
+ color: var(--text-secondary);
104
+ text-decoration: none;
105
+ transition: color 0.2s;
106
+ }
107
+
108
+ .nav-links a:hover { color: var(--text-heading); }
109
+
110
+ .btn-teal {
111
+ font-family: 'Inter', sans-serif;
112
+ font-size: 14px;
113
+ font-weight: 600;
114
+ color: #0B0F15;
115
+ background: var(--accent);
116
+ border: none;
117
+ border-radius: 6px;
118
+ padding: 9px 20px;
119
+ cursor: pointer;
120
+ text-decoration: none;
121
+ display: inline-flex;
122
+ align-items: center;
123
+ gap: 6px;
124
+ }
125
+
126
+ /* โ”€โ”€ SECTIONS โ”€โ”€ */
127
+ section { padding: 96px 40px; }
128
+ .container { max-width: 1140px; margin: 0 auto; }
129
+
130
+ /* โ”€โ”€ HERO โ”€โ”€ */
131
+ .hero {
132
+ padding: 100px 40px 0;
133
+ text-align: center;
134
+ position: relative;
135
+ overflow: hidden;
136
+ }
137
+
138
+ .hero::before {
139
+ content: '';
140
+ position: absolute;
141
+ top: -200px;
142
+ left: 50%;
143
+ transform: translateX(-50%);
144
+ width: 800px;
145
+ height: 600px;
146
+ background: radial-gradient(ellipse, rgba(34,211,238,0.07) 0%, transparent 70%);
147
+ pointer-events: none;
148
+ }
149
+
150
+ .mono-overline {
151
+ font-family: 'JetBrains Mono', monospace;
152
+ font-size: 11px;
153
+ font-weight: 500;
154
+ letter-spacing: 0.14em;
155
+ text-transform: uppercase;
156
+ color: var(--accent);
157
+ display: inline-flex;
158
+ align-items: center;
159
+ gap: 10px;
160
+ margin-bottom: 28px;
161
+ border: 1px solid var(--border-accent);
162
+ padding: 5px 14px;
163
+ border-radius: 999px;
164
+ background: rgba(34,211,238,0.06);
165
+ }
166
+
167
+ .hero h1 {
168
+ font-size: 56px;
169
+ font-weight: 800;
170
+ color: var(--text-heading);
171
+ line-height: 1.08;
172
+ letter-spacing: -0.03em;
173
+ max-width: 800px;
174
+ margin: 0 auto 24px;
175
+ }
176
+
177
+ .hero h1 span {
178
+ color: var(--accent);
179
+ }
180
+
181
+ .hero-sub {
182
+ font-size: 18px;
183
+ color: var(--text-secondary);
184
+ max-width: 560px;
185
+ margin: 0 auto 44px;
186
+ line-height: 1.65;
187
+ }
188
+
189
+ .hero-ctas {
190
+ display: flex;
191
+ gap: 14px;
192
+ justify-content: center;
193
+ margin-bottom: 72px;
194
+ }
195
+
196
+ .btn-teal-lg {
197
+ font-family: 'Inter', sans-serif;
198
+ font-size: 15px;
199
+ font-weight: 600;
200
+ color: #0B0F15;
201
+ background: var(--accent);
202
+ border: none;
203
+ border-radius: 6px;
204
+ padding: 13px 28px;
205
+ cursor: pointer;
206
+ text-decoration: none;
207
+ display: inline-flex;
208
+ align-items: center;
209
+ gap: 8px;
210
+ }
211
+
212
+ .btn-ghost-dark-lg {
213
+ font-family: 'Inter', sans-serif;
214
+ font-size: 15px;
215
+ font-weight: 500;
216
+ color: var(--text-secondary);
217
+ background: none;
218
+ border: 1px solid var(--border);
219
+ border-radius: 6px;
220
+ padding: 13px 28px;
221
+ cursor: pointer;
222
+ text-decoration: none;
223
+ display: inline-flex;
224
+ align-items: center;
225
+ gap: 8px;
226
+ transition: border-color 0.2s, color 0.2s;
227
+ }
228
+
229
+ .btn-ghost-dark-lg:hover {
230
+ border-color: rgba(255,255,255,0.2);
231
+ color: var(--text-heading);
232
+ }
233
+
234
+ /* Graph mock */
235
+ .graph-mock {
236
+ max-width: 900px;
237
+ margin: 0 auto;
238
+ background: var(--surface);
239
+ border: 1px solid var(--border);
240
+ border-radius: 12px;
241
+ padding: 32px;
242
+ position: relative;
243
+ }
244
+
245
+ .graph-mock-header {
246
+ display: flex;
247
+ justify-content: space-between;
248
+ align-items: center;
249
+ margin-bottom: 32px;
250
+ }
251
+
252
+ .graph-mock-title {
253
+ font-size: 13px;
254
+ font-weight: 600;
255
+ color: var(--text-heading);
256
+ }
257
+
258
+ .graph-mock-meta {
259
+ font-family: 'JetBrains Mono', monospace;
260
+ font-size: 11px;
261
+ color: var(--text-muted);
262
+ display: flex;
263
+ gap: 16px;
264
+ }
265
+
266
+ .graph-meta-item {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 6px;
270
+ }
271
+
272
+ .graph-meta-dot {
273
+ width: 7px;
274
+ height: 7px;
275
+ border-radius: 50%;
276
+ }
277
+
278
+ .graph-bars {
279
+ display: flex;
280
+ align-items: flex-end;
281
+ gap: 6px;
282
+ height: 140px;
283
+ padding-bottom: 1px;
284
+ border-bottom: 1px solid var(--border);
285
+ position: relative;
286
+ }
287
+
288
+ .graph-bar-wrap {
289
+ flex: 1;
290
+ display: flex;
291
+ flex-direction: column;
292
+ justify-content: flex-end;
293
+ height: 100%;
294
+ gap: 3px;
295
+ }
296
+
297
+ .graph-bar {
298
+ border-radius: 3px 3px 0 0;
299
+ background: linear-gradient(180deg, var(--accent) 0%, rgba(34,211,238,0.3) 100%);
300
+ transition: opacity 0.2s;
301
+ }
302
+
303
+ .graph-bar-secondary {
304
+ border-radius: 3px 3px 0 0;
305
+ background: rgba(34,211,238,0.15);
306
+ }
307
+
308
+ .graph-gridlines {
309
+ position: absolute;
310
+ inset: 0;
311
+ display: flex;
312
+ flex-direction: column;
313
+ justify-content: space-between;
314
+ pointer-events: none;
315
+ }
316
+
317
+ .graph-gridline {
318
+ border-top: 1px dashed rgba(255,255,255,0.04);
319
+ width: 100%;
320
+ }
321
+
322
+ .graph-x-labels {
323
+ display: flex;
324
+ gap: 6px;
325
+ margin-top: 10px;
326
+ }
327
+
328
+ .graph-x-label {
329
+ flex: 1;
330
+ text-align: center;
331
+ font-family: 'JetBrains Mono', monospace;
332
+ font-size: 9px;
333
+ color: var(--text-muted);
334
+ }
335
+
336
+ /* โ”€โ”€ STATS ROW โ”€โ”€ */
337
+ .stats-section {
338
+ padding: 48px 40px;
339
+ background: var(--bg);
340
+ }
341
+
342
+ .stats-grid {
343
+ display: grid;
344
+ grid-template-columns: repeat(3, 1fr);
345
+ gap: 20px;
346
+ max-width: 1140px;
347
+ margin: 0 auto;
348
+ }
349
+
350
+ .stat-card {
351
+ background: var(--surface);
352
+ border: 1px solid var(--border);
353
+ border-radius: 8px;
354
+ padding: 32px;
355
+ position: relative;
356
+ }
357
+
358
+ .stat-mono-label {
359
+ font-family: 'JetBrains Mono', monospace;
360
+ font-size: 10px;
361
+ font-weight: 500;
362
+ letter-spacing: 0.12em;
363
+ text-transform: uppercase;
364
+ color: var(--text-muted);
365
+ margin-bottom: 12px;
366
+ }
367
+
368
+ .stat-value {
369
+ font-size: 38px;
370
+ font-weight: 800;
371
+ color: var(--accent);
372
+ letter-spacing: -0.03em;
373
+ line-height: 1;
374
+ margin-bottom: 6px;
375
+ }
376
+
377
+ .stat-desc {
378
+ font-size: 13px;
379
+ color: var(--text-secondary);
380
+ }
381
+
382
+ /* โ”€โ”€ ARCHITECTURE โ”€โ”€ */
383
+ .arch-section { background: var(--bg); }
384
+
385
+ .section-label-mono {
386
+ font-family: 'JetBrains Mono', monospace;
387
+ font-size: 11px;
388
+ font-weight: 500;
389
+ letter-spacing: 0.12em;
390
+ text-transform: uppercase;
391
+ color: var(--accent);
392
+ display: block;
393
+ margin-bottom: 16px;
394
+ }
395
+
396
+ .section-heading {
397
+ font-size: 38px;
398
+ font-weight: 800;
399
+ color: var(--text-heading);
400
+ letter-spacing: -0.03em;
401
+ margin-bottom: 14px;
402
+ line-height: 1.15;
403
+ }
404
+
405
+ .section-sub {
406
+ font-size: 16px;
407
+ color: var(--text-secondary);
408
+ max-width: 480px;
409
+ margin-bottom: 56px;
410
+ line-height: 1.65;
411
+ }
412
+
413
+ .arch-diagram {
414
+ background: var(--surface);
415
+ border: 1px solid var(--border);
416
+ border-radius: 12px;
417
+ padding: 48px 40px;
418
+ display: flex;
419
+ align-items: center;
420
+ justify-content: center;
421
+ gap: 0;
422
+ position: relative;
423
+ }
424
+
425
+ .arch-node {
426
+ background: var(--elevated);
427
+ border: 1px solid var(--border);
428
+ border-radius: 8px;
429
+ padding: 24px 32px;
430
+ text-align: center;
431
+ min-width: 180px;
432
+ position: relative;
433
+ }
434
+
435
+ .arch-node.accent-node {
436
+ border-color: var(--border-accent);
437
+ box-shadow: var(--accent-glow);
438
+ }
439
+
440
+ .arch-node-icon {
441
+ width: 40px;
442
+ height: 40px;
443
+ border-radius: 8px;
444
+ margin: 0 auto 12px;
445
+ display: flex;
446
+ align-items: center;
447
+ justify-content: center;
448
+ font-size: 18px;
449
+ }
450
+
451
+ .arch-node-icon.teal { background: rgba(34,211,238,0.15); }
452
+ .arch-node-icon.dim { background: rgba(255,255,255,0.06); }
453
+
454
+ .arch-node-label {
455
+ font-family: 'JetBrains Mono', monospace;
456
+ font-size: 10px;
457
+ font-weight: 500;
458
+ letter-spacing: 0.1em;
459
+ text-transform: uppercase;
460
+ color: var(--text-muted);
461
+ margin-bottom: 6px;
462
+ }
463
+
464
+ .arch-node-name {
465
+ font-size: 15px;
466
+ font-weight: 700;
467
+ color: var(--text-heading);
468
+ margin-bottom: 4px;
469
+ }
470
+
471
+ .arch-node-sub {
472
+ font-size: 12px;
473
+ color: var(--text-muted);
474
+ }
475
+
476
+ .arch-connector {
477
+ display: flex;
478
+ flex-direction: column;
479
+ align-items: center;
480
+ gap: 4px;
481
+ min-width: 80px;
482
+ }
483
+
484
+ .arch-line {
485
+ width: 100%;
486
+ height: 1px;
487
+ background: linear-gradient(90deg, var(--border-accent), rgba(34,211,238,0.6), var(--border-accent));
488
+ position: relative;
489
+ }
490
+
491
+ .arch-arrow {
492
+ font-size: 12px;
493
+ color: var(--accent);
494
+ }
495
+
496
+ .arch-flow-label {
497
+ font-family: 'JetBrains Mono', monospace;
498
+ font-size: 9px;
499
+ color: var(--text-muted);
500
+ letter-spacing: 0.06em;
501
+ text-transform: uppercase;
502
+ }
503
+
504
+ /* โ”€โ”€ FEATURES โ”€โ”€ */
505
+ .features-dark { background: var(--surface); }
506
+
507
+ .features-grid {
508
+ display: grid;
509
+ grid-template-columns: repeat(3, 1fr);
510
+ gap: 24px;
511
+ }
512
+
513
+ .feature-card-dark {
514
+ background: var(--elevated);
515
+ border: 1px solid var(--border);
516
+ border-radius: 8px;
517
+ padding: 32px;
518
+ position: relative;
519
+ transition: border-color 0.2s;
520
+ }
521
+
522
+ .feature-card-dark:hover { border-color: rgba(255,255,255,0.12); }
523
+
524
+ .feature-card-dark.glow {
525
+ border-color: var(--border-accent);
526
+ box-shadow: var(--accent-glow);
527
+ }
528
+
529
+ .feature-icon-circle {
530
+ width: 44px;
531
+ height: 44px;
532
+ border-radius: 50%;
533
+ background: rgba(34,211,238,0.12);
534
+ border: 1px solid rgba(34,211,238,0.2);
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: center;
538
+ font-size: 20px;
539
+ margin-bottom: 20px;
540
+ }
541
+
542
+ .feature-card-dark .card-mono-label {
543
+ font-family: 'JetBrains Mono', monospace;
544
+ font-size: 10px;
545
+ font-weight: 500;
546
+ letter-spacing: 0.1em;
547
+ text-transform: uppercase;
548
+ color: var(--text-muted);
549
+ margin-bottom: 8px;
550
+ }
551
+
552
+ .feature-card-dark h3 {
553
+ font-size: 16px;
554
+ font-weight: 700;
555
+ color: var(--text-heading);
556
+ margin-bottom: 10px;
557
+ letter-spacing: -0.01em;
558
+ }
559
+
560
+ .feature-card-dark p {
561
+ font-size: 14px;
562
+ color: var(--text-secondary);
563
+ line-height: 1.6;
564
+ }
565
+
566
+ /* โ”€โ”€ TESTIMONIAL โ”€โ”€ */
567
+ .testimonial-dark { background: var(--bg); }
568
+
569
+ .testimonial-card-dark {
570
+ max-width: 760px;
571
+ margin: 0 auto;
572
+ background: var(--surface);
573
+ border: 1px solid var(--border);
574
+ border-radius: 12px;
575
+ padding: 52px 56px;
576
+ position: relative;
577
+ }
578
+
579
+ .quote-mark {
580
+ font-family: Georgia, serif;
581
+ font-size: 80px;
582
+ line-height: 0.6;
583
+ color: var(--accent);
584
+ opacity: 0.4;
585
+ margin-bottom: 24px;
586
+ display: block;
587
+ }
588
+
589
+ .testimonial-quote-dark {
590
+ font-family: Georgia, serif;
591
+ font-size: 20px;
592
+ font-style: italic;
593
+ color: var(--text-body);
594
+ line-height: 1.65;
595
+ margin-bottom: 32px;
596
+ }
597
+
598
+ .testimonial-author-dark {
599
+ display: flex;
600
+ align-items: center;
601
+ gap: 14px;
602
+ }
603
+
604
+ .author-avatar-dark {
605
+ width: 44px;
606
+ height: 44px;
607
+ border-radius: 50%;
608
+ background: rgba(34,211,238,0.15);
609
+ border: 1px solid var(--border-accent);
610
+ display: flex;
611
+ align-items: center;
612
+ justify-content: center;
613
+ font-weight: 700;
614
+ font-size: 14px;
615
+ color: var(--accent);
616
+ flex-shrink: 0;
617
+ }
618
+
619
+ .author-name-dark {
620
+ font-size: 14px;
621
+ font-weight: 600;
622
+ color: var(--text-heading);
623
+ margin-bottom: 3px;
624
+ }
625
+
626
+ .author-role-dark {
627
+ font-family: 'JetBrains Mono', monospace;
628
+ font-size: 11px;
629
+ color: var(--text-muted);
630
+ }
631
+
632
+ /* โ”€โ”€ CTA โ”€โ”€ */
633
+ .cta-dark {
634
+ background: linear-gradient(135deg, #0B0F15 0%, #0d1e24 50%, #0B0F15 100%);
635
+ border-top: 1px solid var(--border);
636
+ border-bottom: 1px solid var(--border);
637
+ padding: 96px 40px;
638
+ text-align: center;
639
+ position: relative;
640
+ overflow: hidden;
641
+ }
642
+
643
+ .cta-dark::before {
644
+ content: '';
645
+ position: absolute;
646
+ top: 50%;
647
+ left: 50%;
648
+ transform: translate(-50%, -50%);
649
+ width: 700px;
650
+ height: 400px;
651
+ background: radial-gradient(ellipse, rgba(34,211,238,0.09) 0%, transparent 70%);
652
+ pointer-events: none;
653
+ }
654
+
655
+ .cta-dark h2 {
656
+ font-size: 44px;
657
+ font-weight: 800;
658
+ color: var(--text-heading);
659
+ letter-spacing: -0.03em;
660
+ margin-bottom: 16px;
661
+ position: relative;
662
+ }
663
+
664
+ .cta-dark p {
665
+ font-size: 17px;
666
+ color: var(--text-secondary);
667
+ margin-bottom: 40px;
668
+ position: relative;
669
+ }
670
+
671
+ /* โ”€โ”€ FOOTER โ”€โ”€ */
672
+ footer {
673
+ background: var(--void);
674
+ padding: 60px 40px 32px;
675
+ }
676
+
677
+ .footer-inner {
678
+ max-width: 1140px;
679
+ margin: 0 auto;
680
+ }
681
+
682
+ .footer-grid {
683
+ display: grid;
684
+ grid-template-columns: 1.6fr 1fr 1fr 1fr;
685
+ gap: 48px;
686
+ margin-bottom: 48px;
687
+ }
688
+
689
+ .footer-brand p {
690
+ font-size: 13px;
691
+ color: var(--text-muted);
692
+ margin-top: 14px;
693
+ line-height: 1.65;
694
+ max-width: 240px;
695
+ }
696
+
697
+ .footer-col-heading {
698
+ font-family: 'JetBrains Mono', monospace;
699
+ font-size: 10px;
700
+ font-weight: 500;
701
+ letter-spacing: 0.12em;
702
+ text-transform: uppercase;
703
+ color: var(--text-muted);
704
+ margin-bottom: 18px;
705
+ }
706
+
707
+ .footer-links { list-style: none; }
708
+ .footer-links li { margin-bottom: 10px; }
709
+
710
+ .footer-links a {
711
+ font-size: 14px;
712
+ color: var(--text-secondary);
713
+ text-decoration: none;
714
+ transition: color 0.2s;
715
+ }
716
+
717
+ .footer-links a:hover { color: var(--text-heading); }
718
+
719
+ .footer-bottom {
720
+ border-top: 1px solid var(--border);
721
+ padding-top: 24px;
722
+ display: flex;
723
+ justify-content: space-between;
724
+ align-items: center;
725
+ }
726
+
727
+ .footer-bottom-mono {
728
+ font-family: 'JetBrains Mono', monospace;
729
+ font-size: 11px;
730
+ color: var(--text-muted);
731
+ }
732
+
733
+ .footer-accent { color: var(--accent); }
734
+
735
+ .text-center { text-align: center; }
736
+ .mb-48 { margin-bottom: 48px; }
737
+ </style>
738
+ </head>
739
+ <body>
740
+
741
+ <!-- NAV -->
742
+ <nav>
743
+ <a href="#" class="nav-logo">
744
+ <div class="nav-logo-mark">S</div>
745
+ SynapseAI
746
+ <div class="live-dot"></div>
747
+ </a>
748
+ <ul class="nav-links">
749
+ <li><a href="#">Platform</a></li>
750
+ <li><a href="#">Developers</a></li>
751
+ <li><a href="#">Enterprise</a></li>
752
+ <li><a href="#">Pricing</a></li>
753
+ </ul>
754
+ <a href="#" class="btn-teal">Start building โ†’</a>
755
+ </nav>
756
+
757
+ <!-- HERO -->
758
+ <div class="hero">
759
+ <div class="container" style="padding:0;">
760
+ <div class="mono-overline">
761
+ <div class="live-dot"></div>
762
+ AI Operations Platform
763
+ </div>
764
+ <h1>The <span>cognitive core</span> for enterprise AI.</h1>
765
+ <p class="hero-sub">Orchestrate AI agents, pipelines, and operations at scale. Real-time intelligence. Zero guesswork.</p>
766
+ <div class="hero-ctas">
767
+ <a href="#" class="btn-teal-lg">Deploy now โ†’</a>
768
+ <a href="#" class="btn-ghost-dark-lg">Read the docs</a>
769
+ </div>
770
+
771
+ <!-- Graph mock -->
772
+ <div class="graph-mock">
773
+ <div class="graph-mock-header">
774
+ <span class="graph-mock-title">Operations Throughput โ€” Last 24h</span>
775
+ <div class="graph-mock-meta">
776
+ <span class="graph-meta-item">
777
+ <span class="graph-meta-dot" style="background:var(--accent);box-shadow:0 0 6px rgba(34,211,238,0.6)"></span>
778
+ Processed
779
+ </span>
780
+ <span class="graph-meta-item">
781
+ <span class="graph-meta-dot" style="background:rgba(34,211,238,0.25)"></span>
782
+ Queued
783
+ </span>
784
+ <span style="color:var(--accent)">โ†‘ 18.4% vs yesterday</span>
785
+ </div>
786
+ </div>
787
+ <div class="graph-bars">
788
+ <div class="graph-gridlines">
789
+ <div class="graph-gridline"></div>
790
+ <div class="graph-gridline"></div>
791
+ <div class="graph-gridline"></div>
792
+ <div class="graph-gridline"></div>
793
+ </div>
794
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:55%"></div></div>
795
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:62%"></div></div>
796
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:25%"></div><div class="graph-bar" style="height:48%"></div></div>
797
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:15%"></div><div class="graph-bar" style="height:71%"></div></div>
798
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:59%"></div></div>
799
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:80%"></div></div>
800
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:66%"></div></div>
801
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:35%"></div><div class="graph-bar" style="height:72%"></div></div>
802
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:58%"></div></div>
803
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:88%"></div></div>
804
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:18%"></div><div class="graph-bar" style="height:76%"></div></div>
805
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:22%"></div><div class="graph-bar" style="height:92%"></div></div>
806
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:14%"></div><div class="graph-bar" style="height:84%"></div></div>
807
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:26%"></div><div class="graph-bar" style="height:70%"></div></div>
808
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:32%"></div><div class="graph-bar" style="height:95%"></div></div>
809
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:20%"></div><div class="graph-bar" style="height:78%"></div></div>
810
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:28%"></div><div class="graph-bar" style="height:63%"></div></div>
811
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:16%"></div><div class="graph-bar" style="height:100%"></div></div>
812
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:24%"></div><div class="graph-bar" style="height:87%"></div></div>
813
+ <div class="graph-bar-wrap"><div class="graph-bar-secondary" style="height:30%"></div><div class="graph-bar" style="height:73%"></div></div>
814
+ </div>
815
+ <div class="graph-x-labels">
816
+ <span class="graph-x-label">00:00</span>
817
+ <span class="graph-x-label">02:00</span>
818
+ <span class="graph-x-label">04:00</span>
819
+ <span class="graph-x-label">06:00</span>
820
+ <span class="graph-x-label">08:00</span>
821
+ <span class="graph-x-label">10:00</span>
822
+ <span class="graph-x-label">12:00</span>
823
+ <span class="graph-x-label">14:00</span>
824
+ <span class="graph-x-label">16:00</span>
825
+ <span class="graph-x-label">18:00</span>
826
+ <span class="graph-x-label">20:00</span>
827
+ <span class="graph-x-label">22:00</span>
828
+ <span class="graph-x-label">now</span>
829
+ <span class="graph-x-label"></span>
830
+ <span class="graph-x-label"></span>
831
+ <span class="graph-x-label"></span>
832
+ <span class="graph-x-label"></span>
833
+ <span class="graph-x-label"></span>
834
+ <span class="graph-x-label"></span>
835
+ <span class="graph-x-label"></span>
836
+ </div>
837
+ </div>
838
+ </div>
839
+ </div>
840
+
841
+ <!-- STATS -->
842
+ <div class="stats-section">
843
+ <div class="stats-grid">
844
+ <div class="stat-card">
845
+ <div class="stat-mono-label">Total operations</div>
846
+ <div class="stat-value">2.4B+</div>
847
+ <div class="stat-desc">Operations orchestrated this quarter across all customers</div>
848
+ </div>
849
+ <div class="stat-card">
850
+ <div class="stat-mono-label">Model accuracy</div>
851
+ <div class="stat-value">98.7%</div>
852
+ <div class="stat-desc">Average intent resolution accuracy across all pipelines</div>
853
+ </div>
854
+ <div class="stat-card">
855
+ <div class="stat-mono-label">Response latency</div>
856
+ <div class="stat-value">&lt; 50ms</div>
857
+ <div class="stat-desc">P99 end-to-end latency for production agent calls</div>
858
+ </div>
859
+ </div>
860
+ </div>
861
+
862
+ <!-- ARCHITECTURE -->
863
+ <section class="arch-section">
864
+ <div class="container">
865
+ <span class="section-label-mono">How it works</span>
866
+ <h2 class="section-heading">Purpose-built orchestration<br>for AI at scale.</h2>
867
+ <p class="section-sub">SynapseAI connects your models, agents, and outputs through a unified orchestration layer โ€” with full observability at every step.</p>
868
+
869
+ <div class="arch-diagram">
870
+ <div class="arch-node">
871
+ <div class="arch-node-icon dim">๐Ÿค–</div>
872
+ <div class="arch-node-label">Layer 1</div>
873
+ <div class="arch-node-name">AI Agents</div>
874
+ <div class="arch-node-sub">GPT-4 ยท Claude ยท Custom</div>
875
+ </div>
876
+
877
+ <div class="arch-connector">
878
+ <div class="arch-flow-label">route</div>
879
+ <div class="arch-line"></div>
880
+ <div class="arch-arrow">โ†’</div>
881
+ </div>
882
+
883
+ <div class="arch-node accent-node">
884
+ <div class="arch-node-icon teal">โšก</div>
885
+ <div class="arch-node-label">Core Layer</div>
886
+ <div class="arch-node-name">Orchestrator</div>
887
+ <div class="arch-node-sub">SynapseAI Engine</div>
888
+ </div>
889
+
890
+ <div class="arch-connector">
891
+ <div class="arch-flow-label">emit</div>
892
+ <div class="arch-line"></div>
893
+ <div class="arch-arrow">โ†’</div>
894
+ </div>
895
+
896
+ <div class="arch-node">
897
+ <div class="arch-node-icon dim">๐Ÿ“ค</div>
898
+ <div class="arch-node-label">Layer 3</div>
899
+ <div class="arch-node-name">Output</div>
900
+ <div class="arch-node-sub">APIs ยท Webhooks ยท Store</div>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ </section>
905
+
906
+ <!-- FEATURES -->
907
+ <section class="features-dark">
908
+ <div class="container">
909
+ <div class="text-center mb-48">
910
+ <span class="section-label-mono">Features</span>
911
+ <h2 class="section-heading">Built for cognitive workloads.</h2>
912
+ </div>
913
+ <div class="features-grid">
914
+ <div class="feature-card-dark glow">
915
+ <div class="feature-icon-circle">๐Ÿง </div>
916
+ <div class="card-mono-label">Intelligence</div>
917
+ <h3>Multi-Model Routing</h3>
918
+ <p>Route requests to the optimal model based on cost, latency, and capability. Automatic fallbacks included.</p>
919
+ </div>
920
+ <div class="feature-card-dark">
921
+ <div class="feature-icon-circle">๐Ÿ”</div>
922
+ <div class="card-mono-label">Orchestration</div>
923
+ <h3>Pipeline Composer</h3>
924
+ <p>Build complex agent pipelines with branching, retries, and parallel execution โ€” no infrastructure to manage.</p>
925
+ </div>
926
+ <div class="feature-card-dark">
927
+ <div class="feature-icon-circle">๐Ÿ“ก</div>
928
+ <div class="card-mono-label">Observability</div>
929
+ <h3>Real-Time Tracing</h3>
930
+ <p>Full span-level visibility into every agent call, token, and decision. Debug production AI like a pro.</p>
931
+ </div>
932
+ </div>
933
+ </div>
934
+ </section>
935
+
936
+ <!-- TESTIMONIAL -->
937
+ <section class="testimonial-dark">
938
+ <div class="container">
939
+ <div class="testimonial-card-dark">
940
+ <span class="quote-mark">"</span>
941
+ <p class="testimonial-quote-dark">SynapseAI replaced three different tools we were stitching together. The orchestration engine is genuinely remarkable โ€” we went from prototype to production in 11 days, and the latency improvements were immediate.</p>
942
+ <div class="testimonial-author-dark">
943
+ <div class="author-avatar-dark">TR</div>
944
+ <div>
945
+ <div class="author-name-dark">Thomas Reinhardt</div>
946
+ <div class="author-role-dark">VP Engineering @ Meridian Labs</div>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ </div>
951
+ </section>
952
+
953
+ <!-- CTA -->
954
+ <div class="cta-dark">
955
+ <div class="container">
956
+ <h2>Deploy your cognitive core today.</h2>
957
+ <p>Start with the free tier. Scale to billions of operations. No commitment required.</p>
958
+ <a href="#" class="btn-teal-lg">Get started โ€” it's free โ†’</a>
959
+ </div>
960
+ </div>
961
+
962
+ <!-- FOOTER -->
963
+ <footer>
964
+ <div class="footer-inner">
965
+ <div class="footer-grid">
966
+ <div class="footer-brand">
967
+ <a href="#" class="nav-logo">
968
+ <div class="nav-logo-mark">S</div>
969
+ SynapseAI
970
+ </a>
971
+ <p>The orchestration layer for production AI โ€” built for teams who move fast and need to trust their systems.</p>
972
+ </div>
973
+ <div>
974
+ <div class="footer-col-heading">Platform</div>
975
+ <ul class="footer-links">
976
+ <li><a href="#">Orchestration</a></li>
977
+ <li><a href="#">Model Router</a></li>
978
+ <li><a href="#">Pipeline Builder</a></li>
979
+ <li><a href="#">Observability</a></li>
980
+ </ul>
981
+ </div>
982
+ <div>
983
+ <div class="footer-col-heading">Developers</div>
984
+ <ul class="footer-links">
985
+ <li><a href="#">Documentation</a></li>
986
+ <li><a href="#">API Reference</a></li>
987
+ <li><a href="#">SDKs</a></li>
988
+ <li><a href="#">Status</a></li>
989
+ </ul>
990
+ </div>
991
+ <div>
992
+ <div class="footer-col-heading">Company</div>
993
+ <ul class="footer-links">
994
+ <li><a href="#">About</a></li>
995
+ <li><a href="#">Blog</a></li>
996
+ <li><a href="#">Careers</a></li>
997
+ <li><a href="#">Security</a></li>
998
+ </ul>
999
+ </div>
1000
+ </div>
1001
+ <div class="footer-bottom">
1002
+ <span class="footer-bottom-mono">ยฉ 2024 <span class="footer-accent">SynapseAI</span>, Inc. All rights reserved.</span>
1003
+ <span class="footer-bottom-mono">Cognitive Core UI โ€” Design Skill Preview</span>
1004
+ </div>
1005
+ </div>
1006
+ </footer>
1007
+
1008
+ </body>
1009
+ </html>