@jaimevalasek/aioson 1.5.1 โ†’ 1.7.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 (341) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/README.md +729 -226
  3. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  4. package/docs/design-previews/aurora-command-ui.html +682 -0
  5. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  6. package/docs/design-previews/bold-editorial-ui.html +717 -0
  7. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  8. package/docs/design-previews/clean-saas-ui.html +549 -0
  9. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  10. package/docs/design-previews/cognitive-core-ui.html +463 -0
  11. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  12. package/docs/design-previews/glassmorphism-ui.html +886 -0
  13. package/docs/design-previews/index.html +699 -0
  14. package/docs/design-previews/interface-design-website.html +1187 -0
  15. package/docs/design-previews/interface-design.html +513 -0
  16. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  17. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  18. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  19. package/docs/design-previews/premium-command-center-ui.html +552 -0
  20. package/docs/design-previews/pt.squarespace.com-homepage.html +889 -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/integrations/sdlc-genius-boundary.md +76 -0
  25. package/docs/integrations/sdlc-genius-eval-matrix.md +75 -0
  26. package/docs/integrations/sdlc-genius-install-checklist.md +93 -0
  27. package/docs/integrations/sdlc-genius-review-samples.md +86 -0
  28. package/docs/pt/README.md +10 -0
  29. package/docs/pt/agent-sharding.md +132 -0
  30. package/docs/pt/agentes.md +9 -2
  31. package/docs/pt/busca-de-contexto.md +129 -0
  32. package/docs/pt/cache-de-contexto.md +156 -0
  33. package/docs/pt/comandos-cli.md +915 -1
  34. package/docs/pt/design-hybrid-forge.md +356 -0
  35. package/docs/pt/devlog-pipeline.md +270 -0
  36. package/docs/pt/fluxo-artefatos.md +178 -0
  37. package/docs/pt/hooks-session-guard.md +454 -0
  38. package/docs/pt/inicio-rapido.md +54 -3
  39. package/docs/pt/inteligencia-adaptativa.md +324 -0
  40. package/docs/pt/monitor-de-contexto.md +158 -0
  41. package/docs/pt/recuperacao-de-sessao.md +125 -0
  42. package/docs/pt/sandbox.md +125 -0
  43. package/docs/pt/sdd-automation-scripts.md +557 -0
  44. package/docs/pt/site-forge.md +309 -0
  45. package/docs/pt/skills.md +98 -6
  46. package/docs/pt/spec-learnings-pipeline.md +265 -0
  47. package/package.json +1 -1
  48. package/src/a2a/client.js +165 -0
  49. package/src/a2a/server.js +223 -0
  50. package/src/agent-loader.js +280 -0
  51. package/src/cli.js +329 -1
  52. package/src/commands/agent-audit.js +397 -0
  53. package/src/commands/agent-export-skill.js +229 -0
  54. package/src/commands/agent-loader.js +85 -0
  55. package/src/commands/artifact-validate.js +189 -0
  56. package/src/commands/brief-gen.js +405 -0
  57. package/src/commands/brief-validate.js +65 -0
  58. package/src/commands/classify.js +256 -0
  59. package/src/commands/context-cache.js +90 -0
  60. package/src/commands/context-compact.js +49 -0
  61. package/src/commands/context-health.js +175 -0
  62. package/src/commands/context-monitor.js +163 -0
  63. package/src/commands/context-search.js +66 -0
  64. package/src/commands/context-trim.js +177 -0
  65. package/src/commands/design-hybrid-options.js +385 -0
  66. package/src/commands/detect-test-runner.js +55 -0
  67. package/src/commands/devlog-export-brains.js +27 -0
  68. package/src/commands/devlog-process.js +292 -0
  69. package/src/commands/devlog-watch.js +131 -0
  70. package/src/commands/feature-close.js +165 -0
  71. package/src/commands/gate-check.js +228 -0
  72. package/src/commands/health.js +214 -0
  73. package/src/commands/hooks-emit.js +253 -0
  74. package/src/commands/hooks-install.js +347 -0
  75. package/src/commands/init.js +54 -13
  76. package/src/commands/install.js +52 -13
  77. package/src/commands/learning-auto-promote.js +195 -0
  78. package/src/commands/learning-evolve.js +364 -0
  79. package/src/commands/learning-export.js +103 -0
  80. package/src/commands/learning-rollback.js +164 -0
  81. package/src/commands/live.js +59 -1
  82. package/src/commands/pattern-detect.js +33 -0
  83. package/src/commands/preflight-context.js +30 -0
  84. package/src/commands/preflight.js +208 -0
  85. package/src/commands/pulse-update.js +130 -0
  86. package/src/commands/recovery.js +43 -0
  87. package/src/commands/runner-daemon.js +274 -0
  88. package/src/commands/runner-plan.js +70 -0
  89. package/src/commands/runner-queue-from-plan.js +166 -0
  90. package/src/commands/runner-queue.js +189 -0
  91. package/src/commands/runner-run.js +129 -0
  92. package/src/commands/runtime.js +47 -1
  93. package/src/commands/sandbox.js +37 -0
  94. package/src/commands/self-implement-loop.js +256 -0
  95. package/src/commands/session-guard.js +218 -0
  96. package/src/commands/setup-context.js +22 -2
  97. package/src/commands/setup.js +178 -0
  98. package/src/commands/sizing.js +165 -0
  99. package/src/commands/skill.js +144 -32
  100. package/src/commands/spec-checkpoint.js +177 -0
  101. package/src/commands/spec-status.js +79 -0
  102. package/src/commands/spec-sync.js +190 -0
  103. package/src/commands/spec-tasks.js +288 -0
  104. package/src/commands/squad-autorun.js +1220 -0
  105. package/src/commands/squad-bus.js +217 -0
  106. package/src/commands/squad-card.js +149 -0
  107. package/src/commands/squad-daemon.js +134 -0
  108. package/src/commands/squad-dependency-graph.js +164 -0
  109. package/src/commands/squad-review.js +106 -0
  110. package/src/commands/squad-scaffold.js +55 -0
  111. package/src/commands/squad-tool-register.js +157 -0
  112. package/src/commands/state-save.js +122 -0
  113. package/src/commands/tool-registry-cmd.js +232 -0
  114. package/src/commands/update.js +9 -0
  115. package/src/commands/verify-gate.js +572 -0
  116. package/src/commands/workflow-execute.js +241 -0
  117. package/src/constants.js +18 -0
  118. package/src/context-cache.js +159 -0
  119. package/src/context-search.js +326 -0
  120. package/src/design-variation-catalog.js +503 -0
  121. package/src/i18n/messages/en.js +32 -2
  122. package/src/i18n/messages/es.js +30 -2
  123. package/src/i18n/messages/fr.js +30 -2
  124. package/src/i18n/messages/pt-BR.js +32 -2
  125. package/src/install-animation.js +260 -0
  126. package/src/install-profile.js +143 -0
  127. package/src/install-wizard.js +475 -0
  128. package/src/installer.js +44 -10
  129. package/src/lib/health-check.js +158 -0
  130. package/src/lib/hook-protocol.js +76 -0
  131. package/src/mcp/apps/squad-dashboard/app.js +163 -0
  132. package/src/mcp/apps/squad-dashboard/index.html +261 -0
  133. package/src/mcp/apps/squad-dashboard/mcp-manifest.json +23 -0
  134. package/src/mcp/resources/squad-state.js +130 -0
  135. package/src/parser.js +7 -1
  136. package/src/preflight-engine.js +443 -0
  137. package/src/recovery-context-session.js +154 -0
  138. package/src/runner/cascade.js +97 -0
  139. package/src/runner/cli-launcher.js +109 -0
  140. package/src/runner/plan-importer.js +63 -0
  141. package/src/runner/queue-store.js +159 -0
  142. package/src/runtime-store.js +158 -4
  143. package/src/sandbox.js +177 -0
  144. package/src/squad/agent-teams-adapter.js +264 -0
  145. package/src/squad/brief-validator.js +350 -0
  146. package/src/squad/bus-bridge.js +140 -0
  147. package/src/squad/context-compactor.js +265 -0
  148. package/src/squad/cross-ai-synthesizer.js +250 -0
  149. package/src/squad/hooks-generator.js +196 -0
  150. package/src/squad/inter-squad-events.js +175 -0
  151. package/src/squad/intra-bus.js +345 -0
  152. package/src/squad/learning-extractor.js +213 -0
  153. package/src/squad/pattern-detector.js +365 -0
  154. package/src/squad/preflight-context.js +296 -0
  155. package/src/squad/recovery-context.js +242 -71
  156. package/src/squad/reflection.js +365 -0
  157. package/src/squad/squad-scaffold.js +177 -0
  158. package/src/squad/state-manager.js +310 -0
  159. package/src/squad/task-decomposer.js +652 -0
  160. package/src/squad/verify-gate.js +303 -0
  161. package/src/tool-executor.js +94 -0
  162. package/src/updater.js +10 -3
  163. package/src/worker-runner.js +186 -1
  164. package/template/.aioson/agents/analyst.md +119 -3
  165. package/template/.aioson/agents/architect.md +98 -0
  166. package/template/.aioson/agents/design-hybrid-forge.md +141 -0
  167. package/template/.aioson/agents/dev.md +335 -14
  168. package/template/.aioson/agents/deyvin.md +117 -2
  169. package/template/.aioson/agents/discovery-design-doc.md +44 -0
  170. package/template/.aioson/agents/genome.md +14 -0
  171. package/template/.aioson/agents/neo.md +78 -1
  172. package/template/.aioson/agents/orache.md +50 -4
  173. package/template/.aioson/agents/orchestrator.md +197 -1
  174. package/template/.aioson/agents/pm.md +93 -0
  175. package/template/.aioson/agents/product.md +77 -4
  176. package/template/.aioson/agents/profiler-enricher.md +14 -0
  177. package/template/.aioson/agents/profiler-forge.md +14 -0
  178. package/template/.aioson/agents/profiler-researcher.md +14 -0
  179. package/template/.aioson/agents/qa.md +249 -19
  180. package/template/.aioson/agents/setup.md +144 -12
  181. package/template/.aioson/agents/sheldon.md +237 -11
  182. package/template/.aioson/agents/site-forge.md +1753 -0
  183. package/template/.aioson/agents/squad.md +162 -0
  184. package/template/.aioson/agents/tester.md +209 -0
  185. package/template/.aioson/agents/ux-ui.md +34 -1
  186. package/template/.aioson/brains/README.md +128 -0
  187. package/template/.aioson/brains/_index.json +16 -0
  188. package/template/.aioson/brains/scripts/query.js +103 -0
  189. package/template/.aioson/brains/site-forge/visual-patterns.brain.json +205 -0
  190. package/template/.aioson/config.md +158 -13
  191. package/template/.aioson/constitution.md +33 -0
  192. package/template/.aioson/context/forensics/.gitkeep +0 -0
  193. package/template/.aioson/context/project-pulse.md +34 -0
  194. package/template/.aioson/context/seeds/seed-example.md +27 -0
  195. package/template/.aioson/context/user-profile.md +42 -0
  196. package/template/.aioson/docs/LAYERS.md +79 -0
  197. package/template/.aioson/docs/README.md +76 -0
  198. package/template/.aioson/docs/example-external-api-context.md +72 -0
  199. package/template/.aioson/locales/en/agents/architect.md +17 -0
  200. package/template/.aioson/locales/en/agents/dev.md +79 -13
  201. package/template/.aioson/locales/en/agents/orache.md +6 -0
  202. package/template/.aioson/locales/en/agents/orchestrator.md +24 -0
  203. package/template/.aioson/locales/en/agents/product.md +50 -0
  204. package/template/.aioson/locales/en/agents/setup.md +33 -1
  205. package/template/.aioson/locales/en/agents/sheldon.md +115 -0
  206. package/template/.aioson/locales/en/agents/squad.md +14 -0
  207. package/template/.aioson/locales/en/agents/tester.md +6 -0
  208. package/template/.aioson/locales/es/agents/analyst.md +2 -0
  209. package/template/.aioson/locales/es/agents/architect.md +19 -0
  210. package/template/.aioson/locales/es/agents/dev.md +64 -4
  211. package/template/.aioson/locales/es/agents/deyvin.md +2 -0
  212. package/template/.aioson/locales/es/agents/discovery-design-doc.md +2 -0
  213. package/template/.aioson/locales/es/agents/genome.md +2 -0
  214. package/template/.aioson/locales/es/agents/neo.md +2 -0
  215. package/template/.aioson/locales/es/agents/orache.md +2 -0
  216. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  217. package/template/.aioson/locales/es/agents/pair.md +2 -0
  218. package/template/.aioson/locales/es/agents/pm.md +2 -0
  219. package/template/.aioson/locales/es/agents/product.md +52 -0
  220. package/template/.aioson/locales/es/agents/profiler-enricher.md +2 -0
  221. package/template/.aioson/locales/es/agents/profiler-forge.md +2 -0
  222. package/template/.aioson/locales/es/agents/profiler-researcher.md +2 -0
  223. package/template/.aioson/locales/es/agents/qa.md +2 -0
  224. package/template/.aioson/locales/es/agents/setup.md +35 -1
  225. package/template/.aioson/locales/es/agents/sheldon.md +117 -0
  226. package/template/.aioson/locales/es/agents/squad.md +16 -0
  227. package/template/.aioson/locales/es/agents/tester.md +9 -0
  228. package/template/.aioson/locales/es/agents/ux-ui.md +2 -0
  229. package/template/.aioson/locales/fr/agents/analyst.md +2 -0
  230. package/template/.aioson/locales/fr/agents/architect.md +19 -0
  231. package/template/.aioson/locales/fr/agents/dev.md +64 -4
  232. package/template/.aioson/locales/fr/agents/deyvin.md +2 -0
  233. package/template/.aioson/locales/fr/agents/discovery-design-doc.md +2 -0
  234. package/template/.aioson/locales/fr/agents/genome.md +2 -0
  235. package/template/.aioson/locales/fr/agents/neo.md +2 -0
  236. package/template/.aioson/locales/fr/agents/orache.md +2 -0
  237. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  238. package/template/.aioson/locales/fr/agents/pair.md +2 -0
  239. package/template/.aioson/locales/fr/agents/pm.md +2 -0
  240. package/template/.aioson/locales/fr/agents/product.md +52 -0
  241. package/template/.aioson/locales/fr/agents/profiler-enricher.md +2 -0
  242. package/template/.aioson/locales/fr/agents/profiler-forge.md +2 -0
  243. package/template/.aioson/locales/fr/agents/profiler-researcher.md +2 -0
  244. package/template/.aioson/locales/fr/agents/qa.md +2 -0
  245. package/template/.aioson/locales/fr/agents/setup.md +35 -1
  246. package/template/.aioson/locales/fr/agents/sheldon.md +117 -0
  247. package/template/.aioson/locales/fr/agents/squad.md +16 -0
  248. package/template/.aioson/locales/fr/agents/tester.md +9 -0
  249. package/template/.aioson/locales/fr/agents/ux-ui.md +2 -0
  250. package/template/.aioson/locales/pt-BR/agents/analyst.md +64 -3
  251. package/template/.aioson/locales/pt-BR/agents/architect.md +42 -0
  252. package/template/.aioson/locales/pt-BR/agents/dev.md +147 -14
  253. package/template/.aioson/locales/pt-BR/agents/deyvin.md +47 -0
  254. package/template/.aioson/locales/pt-BR/agents/neo.md +62 -1
  255. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +158 -2
  256. package/template/.aioson/locales/pt-BR/agents/pm.md +95 -1
  257. package/template/.aioson/locales/pt-BR/agents/product.md +145 -18
  258. package/template/.aioson/locales/pt-BR/agents/qa.md +16 -0
  259. package/template/.aioson/locales/pt-BR/agents/setup.md +134 -19
  260. package/template/.aioson/locales/pt-BR/agents/sheldon.md +132 -1
  261. package/template/.aioson/locales/pt-BR/agents/squad.md +14 -0
  262. package/template/.aioson/locales/pt-BR/agents/tester.md +449 -0
  263. package/template/.aioson/rules/README.md +69 -0
  264. package/template/.aioson/rules/data-format-convention.md +136 -0
  265. package/template/.aioson/rules/example-monetary-values.md +30 -0
  266. package/template/.aioson/schemas/squad-manifest.schema.json +124 -3
  267. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  268. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  269. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  270. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  271. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  272. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  273. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  274. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  275. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  276. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  277. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  278. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  279. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  280. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  281. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  282. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  283. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  284. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  285. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  286. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  287. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  288. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  289. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  290. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  291. package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json +31 -0
  292. package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md +66 -0
  293. package/template/.aioson/skills/design/pt.squarespace.com/references/components.md +368 -0
  294. package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md +150 -0
  295. package/template/.aioson/skills/design/pt.squarespace.com/references/motion.md +270 -0
  296. package/template/.aioson/skills/design/pt.squarespace.com/references/patterns.md +189 -0
  297. package/template/.aioson/skills/design/pt.squarespace.com/references/websites.md +165 -0
  298. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +46 -0
  299. package/template/.aioson/skills/process/aioson-spec-driven/references/analyst.md +30 -0
  300. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  301. package/template/.aioson/skills/process/aioson-spec-driven/references/architect.md +23 -0
  302. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  303. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  304. package/template/.aioson/skills/process/aioson-spec-driven/references/dev.md +47 -0
  305. package/template/.aioson/skills/process/aioson-spec-driven/references/deyvin.md +27 -0
  306. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  307. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +101 -0
  308. package/template/.aioson/skills/process/aioson-spec-driven/references/product.md +25 -0
  309. package/template/.aioson/skills/process/aioson-spec-driven/references/qa.md +30 -0
  310. package/template/.aioson/skills/process/aioson-spec-driven/references/sheldon.md +25 -0
  311. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  312. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +147 -0
  313. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  314. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  315. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +306 -0
  316. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +149 -0
  317. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +208 -0
  318. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  319. package/template/.aioson/skills/process/simplify/SKILL.md +173 -0
  320. package/template/.aioson/skills/static/context-budget-guide.md +46 -0
  321. package/template/.aioson/skills/static/harness-sensors.md +74 -0
  322. package/template/.aioson/skills/static/multi-agent-patterns.md +43 -0
  323. package/template/.aioson/skills/static/react-motion-patterns.md +22 -0
  324. package/template/.aioson/skills/static/static-html-patterns/checklists.md +43 -0
  325. package/template/.aioson/skills/static/static-html-patterns/css-tokens.md +609 -0
  326. package/template/.aioson/skills/static/static-html-patterns/motion.md +193 -0
  327. package/template/.aioson/skills/static/static-html-patterns/premium.md +711 -0
  328. package/template/.aioson/skills/static/static-html-patterns/structure.md +209 -0
  329. package/template/.aioson/skills/static/static-html-patterns/utilities.md +190 -0
  330. package/template/.aioson/skills/static/static-html-patterns.md +58 -1913
  331. package/template/.aioson/skills/static/threejs-patterns.md +929 -0
  332. package/template/.aioson/skills/static/web-research-cache.md +112 -0
  333. package/template/.aioson/tasks/implementation-plan.md +21 -1
  334. package/template/.claude/commands/aioson/agent/design-hybrid-forge.md +5 -0
  335. package/template/.claude/commands/aioson/agent/orache.md +5 -0
  336. package/template/.claude/commands/aioson/agent/sheldon.md +5 -0
  337. package/template/.claude/commands/aioson/agent/site-forge.md +5 -0
  338. package/template/AGENTS.md +75 -1
  339. package/template/CLAUDE.md +31 -0
  340. package/template/OPENCODE.md +4 -0
  341. package/template/researchs/.gitkeep +0 -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>