@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/clean-saas-ui-website.html ADDED
@@ -0,0 +1,1202 @@
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>Runbook — Incident Management Landing / Clean SaaS UI Preview</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg-gray: #F9FAFB;
15
+ --bg-white: #FFFFFF;
16
+ --border: #E5E7EB;
17
+ --accent: #2563EB;
18
+ --accent-hover: #1D4ED8;
19
+ --text-heading: #111827;
20
+ --text-body: #374151;
21
+ --text-secondary: #6B7280;
22
+ --text-muted: #9CA3AF;
23
+ --green: #16A34A;
24
+ --red: #DC2626;
25
+ --yellow: #D97706;
26
+ }
27
+
28
+ html { scroll-behavior: smooth; }
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ font-size: 15px;
33
+ line-height: 1.6;
34
+ color: var(--text-body);
35
+ background: var(--bg-gray);
36
+ }
37
+
38
+ /* ── NAV ── */
39
+ nav {
40
+ position: sticky;
41
+ top: 0;
42
+ z-index: 100;
43
+ background: var(--bg-white);
44
+ border-bottom: 1px solid var(--border);
45
+ padding: 0 32px;
46
+ height: 60px;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-between;
50
+ }
51
+
52
+ .nav-logo {
53
+ font-size: 18px;
54
+ font-weight: 700;
55
+ color: var(--text-heading);
56
+ display: flex;
57
+ align-items: center;
58
+ gap: 8px;
59
+ text-decoration: none;
60
+ }
61
+
62
+ .nav-logo-icon {
63
+ width: 28px;
64
+ height: 28px;
65
+ background: var(--accent);
66
+ border-radius: 6px;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ color: white;
71
+ font-size: 13px;
72
+ font-weight: 700;
73
+ }
74
+
75
+ .nav-links {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 28px;
79
+ list-style: none;
80
+ }
81
+
82
+ .nav-links a {
83
+ font-size: 14px;
84
+ font-weight: 500;
85
+ color: var(--text-body);
86
+ text-decoration: none;
87
+ }
88
+
89
+ .nav-links a:hover { color: var(--text-heading); }
90
+
91
+ .nav-actions {
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 12px;
95
+ }
96
+
97
+ .btn-ghost {
98
+ font-family: 'Inter', sans-serif;
99
+ font-size: 14px;
100
+ font-weight: 500;
101
+ color: var(--text-body);
102
+ background: none;
103
+ border: 1px solid var(--border);
104
+ border-radius: 6px;
105
+ padding: 7px 16px;
106
+ cursor: pointer;
107
+ text-decoration: none;
108
+ display: inline-flex;
109
+ align-items: center;
110
+ }
111
+
112
+ .btn-primary {
113
+ font-family: 'Inter', sans-serif;
114
+ font-size: 14px;
115
+ font-weight: 600;
116
+ color: white;
117
+ background: var(--accent);
118
+ border: none;
119
+ border-radius: 6px;
120
+ padding: 8px 18px;
121
+ cursor: pointer;
122
+ text-decoration: none;
123
+ display: inline-flex;
124
+ align-items: center;
125
+ }
126
+
127
+ .btn-primary:hover { background: var(--accent-hover); }
128
+
129
+ .btn-primary-lg {
130
+ font-family: 'Inter', sans-serif;
131
+ font-size: 15px;
132
+ font-weight: 600;
133
+ color: white;
134
+ background: var(--accent);
135
+ border: none;
136
+ border-radius: 6px;
137
+ padding: 12px 24px;
138
+ cursor: pointer;
139
+ text-decoration: none;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ }
144
+
145
+ .btn-ghost-lg {
146
+ font-family: 'Inter', sans-serif;
147
+ font-size: 15px;
148
+ font-weight: 500;
149
+ color: var(--text-body);
150
+ background: none;
151
+ border: 1px solid var(--border);
152
+ border-radius: 6px;
153
+ padding: 12px 24px;
154
+ cursor: pointer;
155
+ text-decoration: none;
156
+ display: inline-flex;
157
+ align-items: center;
158
+ gap: 8px;
159
+ }
160
+
161
+ /* ── SECTIONS ── */
162
+ section { padding: 80px 32px; }
163
+
164
+ .container { max-width: 1120px; margin: 0 auto; }
165
+
166
+ /* ── HERO ── */
167
+ .hero {
168
+ background: var(--bg-white);
169
+ padding: 80px 32px 60px;
170
+ }
171
+
172
+ .hero-inner {
173
+ max-width: 1120px;
174
+ margin: 0 auto;
175
+ }
176
+
177
+ .overline {
178
+ font-family: 'JetBrains Mono', monospace;
179
+ font-size: 11px;
180
+ font-weight: 500;
181
+ letter-spacing: 0.12em;
182
+ text-transform: uppercase;
183
+ color: var(--accent);
184
+ display: inline-block;
185
+ margin-bottom: 20px;
186
+ }
187
+
188
+ .hero h1 {
189
+ font-size: 52px;
190
+ font-weight: 700;
191
+ color: var(--text-heading);
192
+ line-height: 1.12;
193
+ letter-spacing: -0.02em;
194
+ max-width: 700px;
195
+ margin-bottom: 20px;
196
+ }
197
+
198
+ .hero-sub {
199
+ font-size: 18px;
200
+ color: var(--text-secondary);
201
+ max-width: 560px;
202
+ margin-bottom: 36px;
203
+ line-height: 1.6;
204
+ }
205
+
206
+ .hero-ctas {
207
+ display: flex;
208
+ gap: 12px;
209
+ margin-bottom: 56px;
210
+ flex-wrap: wrap;
211
+ }
212
+
213
+ /* Dashboard mock */
214
+ .dashboard-mock {
215
+ background: var(--bg-white);
216
+ border: 1px solid var(--border);
217
+ border-radius: 8px;
218
+ box-shadow: 0 4px 24px rgba(0,0,0,0.08);
219
+ overflow: hidden;
220
+ }
221
+
222
+ .mock-topbar {
223
+ background: var(--bg-gray);
224
+ border-bottom: 1px solid var(--border);
225
+ padding: 10px 16px;
226
+ display: flex;
227
+ align-items: center;
228
+ gap: 8px;
229
+ }
230
+
231
+ .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
232
+ .mock-dot.red { background: #FC5F5A; }
233
+ .mock-dot.yellow { background: #FDBC40; }
234
+ .mock-dot.green { background: #35C759; }
235
+
236
+ .mock-bar {
237
+ background: var(--bg-white);
238
+ border: 1px solid var(--border);
239
+ border-radius: 4px;
240
+ height: 22px;
241
+ flex: 1;
242
+ margin-left: 8px;
243
+ padding: 0 10px;
244
+ display: flex;
245
+ align-items: center;
246
+ }
247
+
248
+ .mock-bar-text {
249
+ font-family: 'JetBrains Mono', monospace;
250
+ font-size: 10px;
251
+ color: var(--text-muted);
252
+ }
253
+
254
+ .mock-body {
255
+ display: flex;
256
+ }
257
+
258
+ .mock-sidebar {
259
+ width: 200px;
260
+ border-right: 1px solid var(--border);
261
+ padding: 16px 0;
262
+ flex-shrink: 0;
263
+ }
264
+
265
+ .mock-sidebar-item {
266
+ padding: 7px 16px;
267
+ font-size: 12px;
268
+ font-weight: 500;
269
+ color: var(--text-secondary);
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 8px;
273
+ }
274
+
275
+ .mock-sidebar-item.active {
276
+ color: var(--accent);
277
+ background: #EFF6FF;
278
+ border-left: 3px solid var(--accent);
279
+ }
280
+
281
+ .mock-sidebar-icon {
282
+ width: 14px;
283
+ height: 14px;
284
+ border-radius: 3px;
285
+ background: currentColor;
286
+ opacity: 0.3;
287
+ }
288
+
289
+ .mock-main {
290
+ flex: 1;
291
+ padding: 20px;
292
+ }
293
+
294
+ .mock-table-header {
295
+ display: flex;
296
+ justify-content: space-between;
297
+ align-items: center;
298
+ margin-bottom: 16px;
299
+ }
300
+
301
+ .mock-table-title {
302
+ font-size: 13px;
303
+ font-weight: 600;
304
+ color: var(--text-heading);
305
+ }
306
+
307
+ .mock-badge {
308
+ font-family: 'JetBrains Mono', monospace;
309
+ font-size: 10px;
310
+ background: #EFF6FF;
311
+ color: var(--accent);
312
+ border: 1px solid #BFDBFE;
313
+ border-radius: 4px;
314
+ padding: 2px 8px;
315
+ }
316
+
317
+ .mock-table { width: 100%; border-collapse: collapse; }
318
+
319
+ .mock-table th {
320
+ font-family: 'JetBrains Mono', monospace;
321
+ font-size: 10px;
322
+ font-weight: 500;
323
+ color: var(--text-muted);
324
+ text-transform: uppercase;
325
+ letter-spacing: 0.06em;
326
+ text-align: left;
327
+ padding: 6px 10px;
328
+ border-bottom: 1px solid var(--border);
329
+ }
330
+
331
+ .mock-table td {
332
+ padding: 9px 10px;
333
+ font-size: 12px;
334
+ color: var(--text-body);
335
+ border-bottom: 1px solid var(--bg-gray);
336
+ }
337
+
338
+ .status-dot {
339
+ display: inline-flex;
340
+ align-items: center;
341
+ gap: 5px;
342
+ }
343
+
344
+ .status-dot::before {
345
+ content: '';
346
+ display: inline-block;
347
+ width: 7px;
348
+ height: 7px;
349
+ border-radius: 50%;
350
+ }
351
+
352
+ .status-dot.critical::before { background: var(--red); }
353
+ .status-dot.warning::before { background: var(--yellow); }
354
+ .status-dot.resolved::before { background: var(--green); }
355
+ .status-dot.monitoring::before { background: var(--accent); }
356
+
357
+ .severity-tag {
358
+ font-family: 'JetBrains Mono', monospace;
359
+ font-size: 10px;
360
+ padding: 2px 7px;
361
+ border-radius: 4px;
362
+ font-weight: 500;
363
+ }
364
+
365
+ .sev-p1 { background: #FEF2F2; color: var(--red); }
366
+ .sev-p2 { background: #FFFBEB; color: var(--yellow); }
367
+ .sev-p3 { background: #EFF6FF; color: var(--accent); }
368
+
369
+ /* ── TRUSTED BY ── */
370
+ .trusted { background: var(--bg-gray); padding: 48px 32px; }
371
+
372
+ .trusted-label {
373
+ font-size: 13px;
374
+ font-weight: 500;
375
+ color: var(--text-muted);
376
+ text-align: center;
377
+ margin-bottom: 28px;
378
+ }
379
+
380
+ .logos-row {
381
+ display: flex;
382
+ justify-content: center;
383
+ align-items: center;
384
+ gap: 48px;
385
+ flex-wrap: wrap;
386
+ }
387
+
388
+ .logo-name {
389
+ font-size: 15px;
390
+ font-weight: 600;
391
+ color: var(--text-muted);
392
+ letter-spacing: -0.01em;
393
+ }
394
+
395
+ /* ── FEATURES ── */
396
+ .features { background: var(--bg-white); }
397
+
398
+ .section-label {
399
+ font-family: 'JetBrains Mono', monospace;
400
+ font-size: 11px;
401
+ font-weight: 500;
402
+ letter-spacing: 0.12em;
403
+ text-transform: uppercase;
404
+ color: var(--accent);
405
+ display: block;
406
+ margin-bottom: 12px;
407
+ }
408
+
409
+ .section-heading {
410
+ font-size: 36px;
411
+ font-weight: 700;
412
+ color: var(--text-heading);
413
+ line-height: 1.2;
414
+ letter-spacing: -0.02em;
415
+ margin-bottom: 12px;
416
+ }
417
+
418
+ .section-sub {
419
+ font-size: 16px;
420
+ color: var(--text-secondary);
421
+ max-width: 480px;
422
+ margin-bottom: 52px;
423
+ }
424
+
425
+ .features-grid {
426
+ display: grid;
427
+ grid-template-columns: repeat(3, 1fr);
428
+ gap: 24px;
429
+ }
430
+
431
+ .feature-card {
432
+ background: var(--bg-white);
433
+ border: 1px solid var(--border);
434
+ border-radius: 8px;
435
+ padding: 28px;
436
+ position: relative;
437
+ transition: box-shadow 0.2s;
438
+ }
439
+
440
+ .feature-card:hover {
441
+ box-shadow: 0 4px 16px rgba(0,0,0,0.08);
442
+ }
443
+
444
+ .feature-card.featured {
445
+ border-top: 3px solid var(--accent);
446
+ }
447
+
448
+ .feature-icon {
449
+ width: 40px;
450
+ height: 40px;
451
+ background: #EFF6FF;
452
+ border-radius: 8px;
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ margin-bottom: 16px;
457
+ color: var(--accent);
458
+ font-size: 18px;
459
+ }
460
+
461
+ .feature-card h3 {
462
+ font-size: 15px;
463
+ font-weight: 600;
464
+ color: var(--text-heading);
465
+ margin-bottom: 8px;
466
+ }
467
+
468
+ .feature-card p {
469
+ font-size: 14px;
470
+ color: var(--text-secondary);
471
+ line-height: 1.55;
472
+ }
473
+
474
+ /* ── METRICS ── */
475
+ .metrics { background: var(--bg-gray); padding: 60px 32px; }
476
+
477
+ .metrics-row {
478
+ display: grid;
479
+ grid-template-columns: repeat(3, 1fr);
480
+ gap: 2px;
481
+ max-width: 1120px;
482
+ margin: 0 auto;
483
+ background: var(--border);
484
+ border: 1px solid var(--border);
485
+ border-radius: 8px;
486
+ overflow: hidden;
487
+ }
488
+
489
+ .metric-cell {
490
+ background: var(--bg-white);
491
+ padding: 40px 36px;
492
+ text-align: center;
493
+ }
494
+
495
+ .metric-value {
496
+ font-size: 42px;
497
+ font-weight: 700;
498
+ color: var(--accent);
499
+ letter-spacing: -0.02em;
500
+ line-height: 1;
501
+ margin-bottom: 8px;
502
+ }
503
+
504
+ .metric-label {
505
+ font-size: 15px;
506
+ font-weight: 500;
507
+ color: var(--text-heading);
508
+ margin-bottom: 4px;
509
+ }
510
+
511
+ .metric-sub {
512
+ font-family: 'JetBrains Mono', monospace;
513
+ font-size: 11px;
514
+ color: var(--text-muted);
515
+ }
516
+
517
+ /* ── TESTIMONIAL ── */
518
+ .testimonial-section { background: var(--bg-white); }
519
+
520
+ .testimonial-card {
521
+ max-width: 760px;
522
+ margin: 0 auto;
523
+ background: var(--bg-white);
524
+ border: 1px solid var(--border);
525
+ border-radius: 8px;
526
+ padding: 44px 48px;
527
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
528
+ }
529
+
530
+ .testimonial-quote {
531
+ font-size: 20px;
532
+ font-weight: 400;
533
+ color: var(--text-heading);
534
+ line-height: 1.55;
535
+ margin-bottom: 28px;
536
+ font-style: italic;
537
+ }
538
+
539
+ .testimonial-author {
540
+ display: flex;
541
+ align-items: center;
542
+ gap: 14px;
543
+ }
544
+
545
+ .author-avatar {
546
+ width: 44px;
547
+ height: 44px;
548
+ border-radius: 50%;
549
+ background: #DBEAFE;
550
+ display: flex;
551
+ align-items: center;
552
+ justify-content: center;
553
+ font-weight: 700;
554
+ font-size: 16px;
555
+ color: var(--accent);
556
+ flex-shrink: 0;
557
+ }
558
+
559
+ .author-name {
560
+ font-size: 14px;
561
+ font-weight: 600;
562
+ color: var(--text-heading);
563
+ margin-bottom: 2px;
564
+ }
565
+
566
+ .author-role {
567
+ font-family: 'JetBrains Mono', monospace;
568
+ font-size: 11px;
569
+ color: var(--text-muted);
570
+ }
571
+
572
+ /* ── PRICING ── */
573
+ .pricing { background: var(--bg-gray); }
574
+
575
+ .pricing-grid {
576
+ display: grid;
577
+ grid-template-columns: repeat(3, 1fr);
578
+ gap: 24px;
579
+ margin-bottom: 40px;
580
+ }
581
+
582
+ .pricing-card {
583
+ background: var(--bg-white);
584
+ border: 1px solid var(--border);
585
+ border-radius: 8px;
586
+ overflow: hidden;
587
+ box-shadow: 0 1px 3px rgba(0,0,0,0.06);
588
+ }
589
+
590
+ .pricing-card.featured {
591
+ border-color: var(--accent);
592
+ box-shadow: 0 4px 20px rgba(37,99,235,0.12);
593
+ }
594
+
595
+ .pricing-header {
596
+ padding: 28px 28px 24px;
597
+ border-bottom: 1px solid var(--border);
598
+ }
599
+
600
+ .pricing-card.featured .pricing-header {
601
+ background: var(--accent);
602
+ border-color: var(--accent);
603
+ }
604
+
605
+ .pricing-tier {
606
+ font-size: 12px;
607
+ font-weight: 600;
608
+ letter-spacing: 0.06em;
609
+ text-transform: uppercase;
610
+ color: var(--text-secondary);
611
+ margin-bottom: 12px;
612
+ }
613
+
614
+ .pricing-card.featured .pricing-tier { color: rgba(255,255,255,0.8); }
615
+
616
+ .pricing-price {
617
+ font-size: 36px;
618
+ font-weight: 700;
619
+ color: var(--text-heading);
620
+ letter-spacing: -0.02em;
621
+ display: flex;
622
+ align-items: baseline;
623
+ gap: 4px;
624
+ }
625
+
626
+ .pricing-card.featured .pricing-price { color: white; }
627
+
628
+ .pricing-price-unit {
629
+ font-size: 14px;
630
+ font-weight: 500;
631
+ color: var(--text-muted);
632
+ }
633
+
634
+ .pricing-card.featured .pricing-price-unit { color: rgba(255,255,255,0.7); }
635
+
636
+ .pricing-desc {
637
+ font-size: 13px;
638
+ color: var(--text-secondary);
639
+ margin-top: 8px;
640
+ }
641
+
642
+ .pricing-card.featured .pricing-desc { color: rgba(255,255,255,0.8); }
643
+
644
+ .pricing-body {
645
+ padding: 24px 28px;
646
+ }
647
+
648
+ .pricing-feature-list {
649
+ list-style: none;
650
+ margin-bottom: 24px;
651
+ }
652
+
653
+ .pricing-feature-list li {
654
+ font-size: 13px;
655
+ color: var(--text-body);
656
+ padding: 6px 0;
657
+ display: flex;
658
+ align-items: center;
659
+ gap: 8px;
660
+ border-bottom: 1px solid var(--bg-gray);
661
+ }
662
+
663
+ .pricing-feature-list li::before {
664
+ content: '✓';
665
+ color: var(--green);
666
+ font-weight: 700;
667
+ font-size: 12px;
668
+ flex-shrink: 0;
669
+ }
670
+
671
+ .pricing-feature-list li.unavailable {
672
+ color: var(--text-muted);
673
+ }
674
+
675
+ .pricing-feature-list li.unavailable::before {
676
+ content: '–';
677
+ color: var(--text-muted);
678
+ font-weight: 400;
679
+ }
680
+
681
+ .pricing-cta {
682
+ display: block;
683
+ text-align: center;
684
+ padding: 10px 20px;
685
+ border-radius: 6px;
686
+ font-size: 14px;
687
+ font-weight: 600;
688
+ text-decoration: none;
689
+ cursor: pointer;
690
+ }
691
+
692
+ .pricing-cta.primary {
693
+ background: var(--accent);
694
+ color: white;
695
+ border: none;
696
+ }
697
+
698
+ .pricing-cta.secondary {
699
+ background: var(--bg-white);
700
+ color: var(--accent);
701
+ border: 1px solid var(--accent);
702
+ }
703
+
704
+ .pricing-cta.ghost {
705
+ background: var(--bg-white);
706
+ color: var(--text-body);
707
+ border: 1px solid var(--border);
708
+ }
709
+
710
+ /* Comparison table */
711
+ .compare-table { width: 100%; border-collapse: collapse; background: var(--bg-white); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
712
+
713
+ .compare-table th {
714
+ padding: 12px 20px;
715
+ text-align: center;
716
+ font-size: 13px;
717
+ font-weight: 600;
718
+ color: var(--text-heading);
719
+ background: var(--bg-gray);
720
+ border-bottom: 1px solid var(--border);
721
+ }
722
+
723
+ .compare-table th:first-child { text-align: left; }
724
+
725
+ .compare-table td {
726
+ padding: 12px 20px;
727
+ font-size: 13px;
728
+ color: var(--text-body);
729
+ border-bottom: 1px solid var(--bg-gray);
730
+ text-align: center;
731
+ }
732
+
733
+ .compare-table td:first-child { text-align: left; font-weight: 500; color: var(--text-heading); }
734
+
735
+ .check { color: var(--green); font-weight: 700; }
736
+ .cross { color: var(--text-muted); }
737
+
738
+ /* ── CTA SECTION ── */
739
+ .cta-section {
740
+ background: var(--accent);
741
+ padding: 80px 32px;
742
+ text-align: center;
743
+ }
744
+
745
+ .cta-section h2 {
746
+ font-size: 36px;
747
+ font-weight: 700;
748
+ color: white;
749
+ letter-spacing: -0.02em;
750
+ margin-bottom: 16px;
751
+ }
752
+
753
+ .cta-section p {
754
+ font-size: 17px;
755
+ color: rgba(255,255,255,0.8);
756
+ margin-bottom: 36px;
757
+ }
758
+
759
+ .btn-white {
760
+ font-family: 'Inter', sans-serif;
761
+ font-size: 15px;
762
+ font-weight: 600;
763
+ color: var(--accent);
764
+ background: white;
765
+ border: none;
766
+ border-radius: 6px;
767
+ padding: 13px 28px;
768
+ cursor: pointer;
769
+ text-decoration: none;
770
+ display: inline-flex;
771
+ align-items: center;
772
+ gap: 8px;
773
+ }
774
+
775
+ /* ── FOOTER ── */
776
+ footer {
777
+ background: var(--bg-white);
778
+ border-top: 1px solid var(--border);
779
+ padding: 60px 32px 32px;
780
+ }
781
+
782
+ .footer-inner {
783
+ max-width: 1120px;
784
+ margin: 0 auto;
785
+ }
786
+
787
+ .footer-grid {
788
+ display: grid;
789
+ grid-template-columns: 1.5fr 1fr 1fr 1fr;
790
+ gap: 48px;
791
+ margin-bottom: 48px;
792
+ }
793
+
794
+ .footer-brand p {
795
+ font-size: 13px;
796
+ color: var(--text-secondary);
797
+ margin-top: 12px;
798
+ line-height: 1.6;
799
+ max-width: 240px;
800
+ }
801
+
802
+ .footer-col h4 {
803
+ font-size: 12px;
804
+ font-weight: 600;
805
+ color: var(--text-heading);
806
+ letter-spacing: 0.04em;
807
+ text-transform: uppercase;
808
+ margin-bottom: 16px;
809
+ }
810
+
811
+ .footer-col ul { list-style: none; }
812
+
813
+ .footer-col li { margin-bottom: 10px; }
814
+
815
+ .footer-col a {
816
+ font-size: 14px;
817
+ color: var(--text-secondary);
818
+ text-decoration: none;
819
+ }
820
+
821
+ .footer-col a:hover { color: var(--text-heading); }
822
+
823
+ .footer-bottom {
824
+ border-top: 1px solid var(--border);
825
+ padding-top: 24px;
826
+ display: flex;
827
+ justify-content: space-between;
828
+ align-items: center;
829
+ }
830
+
831
+ .footer-bottom-text {
832
+ font-family: 'JetBrains Mono', monospace;
833
+ font-size: 11px;
834
+ color: var(--text-muted);
835
+ }
836
+
837
+ /* MISC */
838
+ .text-center { text-align: center; }
839
+ .mb-8 { margin-bottom: 8px; }
840
+ .mb-16 { margin-bottom: 16px; }
841
+ .mb-24 { margin-bottom: 24px; }
842
+ .mb-48 { margin-bottom: 48px; }
843
+ </style>
844
+ </head>
845
+ <body>
846
+
847
+ <!-- NAV -->
848
+ <nav>
849
+ <a href="#" class="nav-logo">
850
+ <div class="nav-logo-icon">R</div>
851
+ Runbook
852
+ </a>
853
+ <ul class="nav-links">
854
+ <li><a href="#">Product</a></li>
855
+ <li><a href="#">Integrations</a></li>
856
+ <li><a href="#">Pricing</a></li>
857
+ <li><a href="#">Docs</a></li>
858
+ </ul>
859
+ <div class="nav-actions">
860
+ <a href="#" class="btn-ghost">Sign in</a>
861
+ <a href="#" class="btn-primary">Start free</a>
862
+ </div>
863
+ </nav>
864
+
865
+ <!-- HERO -->
866
+ <div class="hero">
867
+ <div class="hero-inner">
868
+ <span class="overline">Incident Management / For Engineering Teams</span>
869
+ <h1>Resolve incidents faster. Ship with confidence.</h1>
870
+ <p class="hero-sub">Runbook gives on-call engineers a single pane of glass — from alert to postmortem, without the chaos.</p>
871
+ <div class="hero-ctas">
872
+ <a href="#" class="btn-primary-lg">Start free trial →</a>
873
+ <a href="#" class="btn-ghost-lg">View live demo</a>
874
+ </div>
875
+
876
+ <!-- Dashboard mock -->
877
+ <div class="dashboard-mock">
878
+ <div class="mock-topbar">
879
+ <div class="mock-dot red"></div>
880
+ <div class="mock-dot yellow"></div>
881
+ <div class="mock-dot green"></div>
882
+ <div class="mock-bar"><span class="mock-bar-text">app.runbook.io/incidents</span></div>
883
+ </div>
884
+ <div class="mock-body">
885
+ <div class="mock-sidebar">
886
+ <div class="mock-sidebar-item active">
887
+ <div class="mock-sidebar-icon"></div>
888
+ Incidents
889
+ </div>
890
+ <div class="mock-sidebar-item">
891
+ <div class="mock-sidebar-icon"></div>
892
+ On-call
893
+ </div>
894
+ <div class="mock-sidebar-item">
895
+ <div class="mock-sidebar-icon"></div>
896
+ Runbooks
897
+ </div>
898
+ <div class="mock-sidebar-item">
899
+ <div class="mock-sidebar-icon"></div>
900
+ Postmortems
901
+ </div>
902
+ <div class="mock-sidebar-item">
903
+ <div class="mock-sidebar-icon"></div>
904
+ Integrations
905
+ </div>
906
+ <div class="mock-sidebar-item">
907
+ <div class="mock-sidebar-icon"></div>
908
+ Analytics
909
+ </div>
910
+ </div>
911
+ <div class="mock-main">
912
+ <div class="mock-table-header">
913
+ <span class="mock-table-title">Active Incidents</span>
914
+ <span class="mock-badge">3 open</span>
915
+ </div>
916
+ <table class="mock-table">
917
+ <thead>
918
+ <tr>
919
+ <th>Status</th>
920
+ <th>Title</th>
921
+ <th>Severity</th>
922
+ <th>Assignee</th>
923
+ <th>Duration</th>
924
+ </tr>
925
+ </thead>
926
+ <tbody>
927
+ <tr>
928
+ <td><span class="status-dot critical">Critical</span></td>
929
+ <td>API gateway latency spike — prod</td>
930
+ <td><span class="severity-tag sev-p1">P1</span></td>
931
+ <td>Sarah K.</td>
932
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--red)">00:14:33</span></td>
933
+ </tr>
934
+ <tr>
935
+ <td><span class="status-dot warning">Monitoring</span></td>
936
+ <td>Elevated error rate — payment service</td>
937
+ <td><span class="severity-tag sev-p2">P2</span></td>
938
+ <td>Marcus L.</td>
939
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--yellow)">01:02:17</span></td>
940
+ </tr>
941
+ <tr>
942
+ <td><span class="status-dot monitoring">Investigating</span></td>
943
+ <td>CDN cache miss ratio above threshold</td>
944
+ <td><span class="severity-tag sev-p3">P3</span></td>
945
+ <td>Priya M.</td>
946
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent)">00:28:05</span></td>
947
+ </tr>
948
+ <tr>
949
+ <td><span class="status-dot resolved">Resolved</span></td>
950
+ <td>Database connection pool exhausted</td>
951
+ <td><span class="severity-tag sev-p2">P2</span></td>
952
+ <td>James T.</td>
953
+ <td><span style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green)">Resolved</span></td>
954
+ </tr>
955
+ </tbody>
956
+ </table>
957
+ </div>
958
+ </div>
959
+ </div>
960
+ </div>
961
+ </div>
962
+
963
+ <!-- TRUSTED BY -->
964
+ <div class="trusted">
965
+ <p class="trusted-label">Trusted by 1,200+ engineering teams worldwide</p>
966
+ <div class="logos-row">
967
+ <span class="logo-name">Streamline</span>
968
+ <span class="logo-name">Northvault</span>
969
+ <span class="logo-name">Cascadeio</span>
970
+ <span class="logo-name">Meridian</span>
971
+ <span class="logo-name">Apertive</span>
972
+ </div>
973
+ </div>
974
+
975
+ <!-- FEATURES -->
976
+ <section class="features">
977
+ <div class="container">
978
+ <span class="section-label">Product</span>
979
+ <h2 class="section-heading">Everything you need during an incident</h2>
980
+ <p class="section-sub">Built for speed and clarity when pressure is highest.</p>
981
+
982
+ <div class="features-grid">
983
+ <div class="feature-card featured">
984
+ <div class="feature-icon">⚡</div>
985
+ <h3>Instant Alert Routing</h3>
986
+ <p>Connect PagerDuty, Datadog, or Grafana. Alerts land in Slack in seconds with full context attached.</p>
987
+ </div>
988
+ <div class="feature-card">
989
+ <div class="feature-icon">📋</div>
990
+ <h3>Runbook Automation</h3>
991
+ <p>Auto-surface the right runbook for each incident type. Reduce time-to-action from minutes to seconds.</p>
992
+ </div>
993
+ <div class="feature-card">
994
+ <div class="feature-icon">🧭</div>
995
+ <h3>Incident Commander</h3>
996
+ <p>Assign roles, track actions, and maintain a clean timeline — all from one command center.</p>
997
+ </div>
998
+ <div class="feature-card">
999
+ <div class="feature-icon">📊</div>
1000
+ <h3>Postmortem Generator</h3>
1001
+ <p>One-click postmortems with a full incident timeline, action log, and customizable templates.</p>
1002
+ </div>
1003
+ <div class="feature-card">
1004
+ <div class="feature-icon">🔔</div>
1005
+ <h3>On-Call Scheduling</h3>
1006
+ <p>Visual schedules, overrides, and escalation policies. No spreadsheet needed.</p>
1007
+ </div>
1008
+ <div class="feature-card">
1009
+ <div class="feature-icon">📈</div>
1010
+ <h3>MTTR Analytics</h3>
1011
+ <p>Track MTTA, MTTR, and incident frequency. Spot patterns before they become outages.</p>
1012
+ </div>
1013
+ </div>
1014
+ </div>
1015
+ </section>
1016
+
1017
+ <!-- METRICS -->
1018
+ <div class="metrics">
1019
+ <div class="metrics-row">
1020
+ <div class="metric-cell">
1021
+ <div class="metric-value">99.9%</div>
1022
+ <div class="metric-label">Uptime SLA</div>
1023
+ <div class="metric-sub">Guaranteed reliability</div>
1024
+ </div>
1025
+ <div class="metric-cell">
1026
+ <div class="metric-value">&lt; 5 min</div>
1027
+ <div class="metric-label">Median MTTR</div>
1028
+ <div class="metric-sub">Across all customers</div>
1029
+ </div>
1030
+ <div class="metric-cell">
1031
+ <div class="metric-value">10,000+</div>
1032
+ <div class="metric-label">Incidents resolved</div>
1033
+ <div class="metric-sub">In the last 30 days</div>
1034
+ </div>
1035
+ </div>
1036
+ </div>
1037
+
1038
+ <!-- TESTIMONIAL -->
1039
+ <section class="testimonial-section">
1040
+ <div class="container">
1041
+ <div class="testimonial-card">
1042
+ <p class="testimonial-quote">"Runbook cut our mean time to resolution in half. The runbook automation feature alone is worth the subscription — our junior engineers can handle incidents that used to require senior escalation."</p>
1043
+ <div class="testimonial-author">
1044
+ <div class="author-avatar">SK</div>
1045
+ <div>
1046
+ <div class="author-name">Sarah Kim</div>
1047
+ <div class="author-role">Director of Engineering @ Streamline</div>
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </section>
1053
+
1054
+ <!-- PRICING -->
1055
+ <section class="pricing">
1056
+ <div class="container">
1057
+ <div class="text-center mb-48">
1058
+ <span class="section-label">Pricing</span>
1059
+ <h2 class="section-heading">Simple, transparent pricing</h2>
1060
+ <p class="section-sub" style="margin: 0 auto;">Start free. Scale as your team grows.</p>
1061
+ </div>
1062
+
1063
+ <div class="pricing-grid">
1064
+ <div class="pricing-card">
1065
+ <div class="pricing-header">
1066
+ <div class="pricing-tier">Free</div>
1067
+ <div class="pricing-price">$0 <span class="pricing-price-unit">/ month</span></div>
1068
+ <div class="pricing-desc">For small teams getting started</div>
1069
+ </div>
1070
+ <div class="pricing-body">
1071
+ <ul class="pricing-feature-list">
1072
+ <li>Up to 5 users</li>
1073
+ <li>50 incidents / month</li>
1074
+ <li>Basic runbooks</li>
1075
+ <li>Slack integration</li>
1076
+ <li class="unavailable">Custom escalation policies</li>
1077
+ <li class="unavailable">Analytics dashboard</li>
1078
+ <li class="unavailable">Postmortem templates</li>
1079
+ </ul>
1080
+ <a href="#" class="pricing-cta ghost">Get started free</a>
1081
+ </div>
1082
+ </div>
1083
+
1084
+ <div class="pricing-card featured">
1085
+ <div class="pricing-header">
1086
+ <div class="pricing-tier">Pro</div>
1087
+ <div class="pricing-price">$29 <span class="pricing-price-unit">/ user / mo</span></div>
1088
+ <div class="pricing-desc">For growing engineering teams</div>
1089
+ </div>
1090
+ <div class="pricing-body">
1091
+ <ul class="pricing-feature-list">
1092
+ <li>Unlimited users</li>
1093
+ <li>Unlimited incidents</li>
1094
+ <li>Advanced runbooks</li>
1095
+ <li>All integrations</li>
1096
+ <li>Custom escalation policies</li>
1097
+ <li>Analytics dashboard</li>
1098
+ <li>Postmortem templates</li>
1099
+ </ul>
1100
+ <a href="#" class="pricing-cta primary">Start free trial</a>
1101
+ </div>
1102
+ </div>
1103
+
1104
+ <div class="pricing-card">
1105
+ <div class="pricing-header">
1106
+ <div class="pricing-tier">Enterprise</div>
1107
+ <div class="pricing-price">Custom</div>
1108
+ <div class="pricing-desc">For large orgs with specific needs</div>
1109
+ </div>
1110
+ <div class="pricing-body">
1111
+ <ul class="pricing-feature-list">
1112
+ <li>Everything in Pro</li>
1113
+ <li>SSO / SAML</li>
1114
+ <li>Audit logs</li>
1115
+ <li>SLA guarantees</li>
1116
+ <li>Dedicated CSM</li>
1117
+ <li>Custom integrations</li>
1118
+ <li>On-prem deployment</li>
1119
+ </ul>
1120
+ <a href="#" class="pricing-cta secondary">Contact sales</a>
1121
+ </div>
1122
+ </div>
1123
+ </div>
1124
+
1125
+ <table class="compare-table">
1126
+ <thead>
1127
+ <tr>
1128
+ <th>Feature</th>
1129
+ <th>Free</th>
1130
+ <th>Pro</th>
1131
+ <th>Enterprise</th>
1132
+ </tr>
1133
+ </thead>
1134
+ <tbody>
1135
+ <tr><td>Incident tracking</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
1136
+ <tr><td>Slack / Teams alerts</td><td class="check">✓</td><td class="check">✓</td><td class="check">✓</td></tr>
1137
+ <tr><td>Custom runbooks</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
1138
+ <tr><td>MTTR analytics</td><td class="cross">—</td><td class="check">✓</td><td class="check">✓</td></tr>
1139
+ <tr><td>SSO / SAML</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
1140
+ <tr><td>Dedicated support</td><td class="cross">—</td><td class="cross">—</td><td class="check">✓</td></tr>
1141
+ </tbody>
1142
+ </table>
1143
+ </div>
1144
+ </section>
1145
+
1146
+ <!-- CTA -->
1147
+ <div class="cta-section">
1148
+ <div class="container">
1149
+ <h2>Ready to stop firefighting?</h2>
1150
+ <p>Join 1,200+ engineering teams that resolve incidents faster with Runbook.</p>
1151
+ <a href="#" class="btn-white">Start your free trial — no credit card required →</a>
1152
+ </div>
1153
+ </div>
1154
+
1155
+ <!-- FOOTER -->
1156
+ <footer>
1157
+ <div class="footer-inner">
1158
+ <div class="footer-grid">
1159
+ <div class="footer-brand">
1160
+ <a href="#" class="nav-logo" style="display:inline-flex;">
1161
+ <div class="nav-logo-icon">R</div>
1162
+ Runbook
1163
+ </a>
1164
+ <p>Incident management built for engineering teams who care about reliability.</p>
1165
+ </div>
1166
+ <div class="footer-col">
1167
+ <h4>Product</h4>
1168
+ <ul>
1169
+ <li><a href="#">Features</a></li>
1170
+ <li><a href="#">Integrations</a></li>
1171
+ <li><a href="#">Changelog</a></li>
1172
+ <li><a href="#">Roadmap</a></li>
1173
+ </ul>
1174
+ </div>
1175
+ <div class="footer-col">
1176
+ <h4>Resources</h4>
1177
+ <ul>
1178
+ <li><a href="#">Documentation</a></li>
1179
+ <li><a href="#">API Reference</a></li>
1180
+ <li><a href="#">Status Page</a></li>
1181
+ <li><a href="#">Blog</a></li>
1182
+ </ul>
1183
+ </div>
1184
+ <div class="footer-col">
1185
+ <h4>Company</h4>
1186
+ <ul>
1187
+ <li><a href="#">About</a></li>
1188
+ <li><a href="#">Careers</a></li>
1189
+ <li><a href="#">Security</a></li>
1190
+ <li><a href="#">Privacy</a></li>
1191
+ </ul>
1192
+ </div>
1193
+ </div>
1194
+ <div class="footer-bottom">
1195
+ <span class="footer-bottom-text">© 2024 Runbook, Inc. All rights reserved.</span>
1196
+ <span class="footer-bottom-text">Clean SaaS UI — Design Skill Preview</span>
1197
+ </div>
1198
+ </div>
1199
+ </footer>
1200
+
1201
+ </body>
1202
+ </html>