@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/interface-design-website.html ADDED
@@ -0,0 +1,1187 @@
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>ORBIT — General SaaS Landing / Interface Design Skill 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: #FAFAF9;
15
+ --bg-white: #FFFFFF;
16
+ --bg-dark: #1A1A1A;
17
+ --border: #E8E8E5;
18
+ --border-light: #EBEBEB;
19
+ --accent: #5B5CF6;
20
+ --accent-hover: #4A4AE0;
21
+ --accent-light: rgba(91,92,246,0.08);
22
+ --text-heading: #1A1A1A;
23
+ --text-body: #4A4A4A;
24
+ --text-secondary: #8A8A8A;
25
+ --text-muted: #B0B0B0;
26
+ }
27
+
28
+ html { scroll-behavior: smooth; }
29
+
30
+ body {
31
+ font-family: 'Inter', sans-serif;
32
+ font-size: 15px;
33
+ line-height: 1.65;
34
+ color: var(--text-body);
35
+ background: var(--bg);
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-light);
45
+ padding: 0 40px;
46
+ height: 60px;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: space-between;
50
+ }
51
+
52
+ .nav-logo {
53
+ font-size: 20px;
54
+ font-weight: 800;
55
+ color: var(--text-heading);
56
+ text-decoration: none;
57
+ letter-spacing: -0.03em;
58
+ }
59
+
60
+ .nav-logo span { color: var(--accent); }
61
+
62
+ .nav-links {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 32px;
66
+ list-style: none;
67
+ }
68
+
69
+ .nav-links a {
70
+ font-size: 14px;
71
+ font-weight: 500;
72
+ color: var(--text-secondary);
73
+ text-decoration: none;
74
+ transition: color 0.2s;
75
+ }
76
+
77
+ .nav-links a:hover { color: var(--text-heading); }
78
+
79
+ .nav-actions {
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 10px;
83
+ }
84
+
85
+ .btn-ghost {
86
+ font-family: 'Inter', sans-serif;
87
+ font-size: 14px;
88
+ font-weight: 500;
89
+ color: var(--text-body);
90
+ background: none;
91
+ border: 1px solid var(--border);
92
+ border-radius: 8px;
93
+ padding: 8px 18px;
94
+ cursor: pointer;
95
+ text-decoration: none;
96
+ }
97
+
98
+ .btn-primary {
99
+ font-family: 'Inter', sans-serif;
100
+ font-size: 14px;
101
+ font-weight: 600;
102
+ color: white;
103
+ background: var(--accent);
104
+ border: none;
105
+ border-radius: 8px;
106
+ padding: 9px 20px;
107
+ cursor: pointer;
108
+ text-decoration: none;
109
+ display: inline-flex;
110
+ align-items: center;
111
+ gap: 6px;
112
+ }
113
+
114
+ .btn-primary:hover { background: var(--accent-hover); }
115
+
116
+ /* ── LAYOUT ── */
117
+ .container { max-width: 1080px; margin: 0 auto; }
118
+
119
+ /* ── HERO ── */
120
+ .hero {
121
+ background: var(--bg-white);
122
+ padding: 88px 40px 72px;
123
+ }
124
+
125
+ .hero-inner {
126
+ max-width: 1080px;
127
+ margin: 0 auto;
128
+ display: grid;
129
+ grid-template-columns: 1fr 1fr;
130
+ gap: 80px;
131
+ align-items: center;
132
+ }
133
+
134
+ .hero-mono {
135
+ font-family: 'JetBrains Mono', monospace;
136
+ font-size: 11px;
137
+ font-weight: 500;
138
+ letter-spacing: 0.12em;
139
+ text-transform: uppercase;
140
+ color: var(--accent);
141
+ display: block;
142
+ margin-bottom: 20px;
143
+ }
144
+
145
+ .hero h1 {
146
+ font-size: 48px;
147
+ font-weight: 700;
148
+ color: var(--text-heading);
149
+ line-height: 1.1;
150
+ letter-spacing: -0.03em;
151
+ margin-bottom: 20px;
152
+ }
153
+
154
+ .hero-sub {
155
+ font-size: 18px;
156
+ color: var(--text-secondary);
157
+ line-height: 1.65;
158
+ margin-bottom: 36px;
159
+ font-weight: 400;
160
+ }
161
+
162
+ .hero-ctas {
163
+ display: flex;
164
+ gap: 10px;
165
+ }
166
+
167
+ .btn-primary-lg {
168
+ font-family: 'Inter', sans-serif;
169
+ font-size: 15px;
170
+ font-weight: 600;
171
+ color: white;
172
+ background: var(--accent);
173
+ border: none;
174
+ border-radius: 8px;
175
+ padding: 13px 26px;
176
+ cursor: pointer;
177
+ text-decoration: none;
178
+ display: inline-flex;
179
+ align-items: center;
180
+ gap: 8px;
181
+ }
182
+
183
+ .btn-ghost-lg {
184
+ font-family: 'Inter', sans-serif;
185
+ font-size: 15px;
186
+ font-weight: 500;
187
+ color: var(--text-body);
188
+ background: none;
189
+ border: 1px solid var(--border);
190
+ border-radius: 8px;
191
+ padding: 13px 26px;
192
+ cursor: pointer;
193
+ text-decoration: none;
194
+ display: inline-flex;
195
+ align-items: center;
196
+ gap: 8px;
197
+ }
198
+
199
+ /* Product mock */
200
+ .hero-mock {
201
+ background: var(--bg-white);
202
+ border: 1px solid var(--border);
203
+ border-radius: 12px;
204
+ box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 24px 64px rgba(0,0,0,0.06);
205
+ overflow: hidden;
206
+ }
207
+
208
+ .mock-header {
209
+ background: var(--bg);
210
+ border-bottom: 1px solid var(--border);
211
+ padding: 12px 16px;
212
+ display: flex;
213
+ align-items: center;
214
+ justify-content: space-between;
215
+ }
216
+
217
+ .mock-header-title {
218
+ font-size: 12px;
219
+ font-weight: 600;
220
+ color: var(--text-heading);
221
+ }
222
+
223
+ .mock-header-tag {
224
+ font-family: 'JetBrains Mono', monospace;
225
+ font-size: 10px;
226
+ color: var(--accent);
227
+ background: var(--accent-light);
228
+ border: 1px solid rgba(91,92,246,0.15);
229
+ border-radius: 4px;
230
+ padding: 2px 8px;
231
+ }
232
+
233
+ .mock-body-inner {
234
+ display: flex;
235
+ gap: 0;
236
+ }
237
+
238
+ .mock-left {
239
+ width: 160px;
240
+ border-right: 1px solid var(--border);
241
+ padding: 16px 0;
242
+ flex-shrink: 0;
243
+ }
244
+
245
+ .mock-left-item {
246
+ padding: 7px 16px;
247
+ font-size: 12px;
248
+ color: var(--text-secondary);
249
+ display: flex;
250
+ align-items: center;
251
+ gap: 8px;
252
+ cursor: pointer;
253
+ }
254
+
255
+ .mock-left-item.active {
256
+ background: var(--accent-light);
257
+ color: var(--accent);
258
+ font-weight: 600;
259
+ border-left: 2px solid var(--accent);
260
+ }
261
+
262
+ .mock-item-dot {
263
+ width: 6px;
264
+ height: 6px;
265
+ border-radius: 50%;
266
+ background: currentColor;
267
+ opacity: 0.4;
268
+ }
269
+
270
+ .mock-right {
271
+ flex: 1;
272
+ padding: 16px;
273
+ }
274
+
275
+ .mock-card {
276
+ background: var(--bg);
277
+ border: 1px solid var(--border);
278
+ border-radius: 8px;
279
+ padding: 14px;
280
+ margin-bottom: 10px;
281
+ display: flex;
282
+ align-items: center;
283
+ justify-content: space-between;
284
+ }
285
+
286
+ .mock-card:last-child { margin-bottom: 0; }
287
+
288
+ .mock-card-title {
289
+ font-size: 12px;
290
+ font-weight: 600;
291
+ color: var(--text-heading);
292
+ margin-bottom: 3px;
293
+ }
294
+
295
+ .mock-card-sub {
296
+ font-size: 11px;
297
+ color: var(--text-secondary);
298
+ }
299
+
300
+ .mock-card-status {
301
+ font-family: 'JetBrains Mono', monospace;
302
+ font-size: 10px;
303
+ padding: 3px 8px;
304
+ border-radius: 4px;
305
+ font-weight: 500;
306
+ }
307
+
308
+ .status-active { background: rgba(91,92,246,0.1); color: var(--accent); }
309
+ .status-review { background: rgba(217,119,6,0.1); color: #D97706; }
310
+ .status-done { background: rgba(22,163,74,0.1); color: #16A34A; }
311
+
312
+ /* ── FEATURES ── */
313
+ .features-section {
314
+ padding: 96px 40px;
315
+ background: var(--bg);
316
+ }
317
+
318
+ .features-inner { max-width: 1080px; margin: 0 auto; }
319
+
320
+ .features-header {
321
+ margin-bottom: 72px;
322
+ text-align: center;
323
+ }
324
+
325
+ .section-mono {
326
+ font-family: 'JetBrains Mono', monospace;
327
+ font-size: 11px;
328
+ font-weight: 500;
329
+ letter-spacing: 0.12em;
330
+ text-transform: uppercase;
331
+ color: var(--accent);
332
+ display: block;
333
+ margin-bottom: 14px;
334
+ }
335
+
336
+ .section-h2 {
337
+ font-size: 36px;
338
+ font-weight: 700;
339
+ color: var(--text-heading);
340
+ letter-spacing: -0.025em;
341
+ margin-bottom: 12px;
342
+ line-height: 1.15;
343
+ }
344
+
345
+ .section-sub {
346
+ font-size: 16px;
347
+ color: var(--text-secondary);
348
+ max-width: 480px;
349
+ margin: 0 auto;
350
+ line-height: 1.65;
351
+ }
352
+
353
+ .feature-block {
354
+ display: grid;
355
+ grid-template-columns: 1fr 1fr;
356
+ gap: 80px;
357
+ align-items: center;
358
+ padding: 56px 0;
359
+ border-top: 1px solid var(--border);
360
+ }
361
+
362
+ .feature-block:last-child { border-bottom: 1px solid var(--border); }
363
+
364
+ .feature-block.reverse { }
365
+ .feature-block.reverse .feature-text { order: 2; }
366
+ .feature-block.reverse .feature-visual { order: 1; }
367
+
368
+ .feature-text-meta {
369
+ font-family: 'JetBrains Mono', monospace;
370
+ font-size: 10px;
371
+ font-weight: 500;
372
+ letter-spacing: 0.1em;
373
+ text-transform: uppercase;
374
+ color: var(--text-muted);
375
+ margin-bottom: 16px;
376
+ }
377
+
378
+ .feature-text h3 {
379
+ font-size: 26px;
380
+ font-weight: 700;
381
+ color: var(--text-heading);
382
+ letter-spacing: -0.02em;
383
+ line-height: 1.2;
384
+ margin-bottom: 14px;
385
+ }
386
+
387
+ .feature-text p {
388
+ font-size: 15px;
389
+ color: var(--text-secondary);
390
+ line-height: 1.7;
391
+ }
392
+
393
+ .feature-visual {
394
+ background: var(--bg-white);
395
+ border: 1px solid var(--border);
396
+ border-radius: 12px;
397
+ padding: 28px;
398
+ min-height: 200px;
399
+ display: flex;
400
+ flex-direction: column;
401
+ justify-content: center;
402
+ gap: 12px;
403
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
404
+ }
405
+
406
+ .visual-row {
407
+ display: flex;
408
+ align-items: center;
409
+ gap: 12px;
410
+ }
411
+
412
+ .visual-label {
413
+ font-size: 12px;
414
+ color: var(--text-secondary);
415
+ width: 80px;
416
+ flex-shrink: 0;
417
+ }
418
+
419
+ .visual-bar-wrap {
420
+ flex: 1;
421
+ height: 8px;
422
+ background: var(--bg);
423
+ border-radius: 4px;
424
+ overflow: hidden;
425
+ }
426
+
427
+ .visual-bar {
428
+ height: 100%;
429
+ border-radius: 4px;
430
+ background: var(--accent);
431
+ }
432
+
433
+ .visual-bar.muted { background: var(--border); }
434
+
435
+ .visual-val {
436
+ font-family: 'JetBrains Mono', monospace;
437
+ font-size: 11px;
438
+ color: var(--text-secondary);
439
+ width: 36px;
440
+ text-align: right;
441
+ flex-shrink: 0;
442
+ }
443
+
444
+ /* File tree visual */
445
+ .visual-tree { gap: 8px; }
446
+
447
+ .tree-item {
448
+ display: flex;
449
+ align-items: center;
450
+ gap: 8px;
451
+ font-size: 12px;
452
+ color: var(--text-body);
453
+ padding: 5px 8px;
454
+ border-radius: 6px;
455
+ }
456
+
457
+ .tree-item.selected {
458
+ background: var(--accent-light);
459
+ color: var(--accent);
460
+ font-weight: 600;
461
+ }
462
+
463
+ .tree-item-icon {
464
+ width: 16px;
465
+ height: 16px;
466
+ border-radius: 3px;
467
+ background: var(--border);
468
+ display: inline-flex;
469
+ align-items: center;
470
+ justify-content: center;
471
+ font-size: 8px;
472
+ flex-shrink: 0;
473
+ }
474
+
475
+ .tree-item.selected .tree-item-icon { background: var(--accent); color: white; }
476
+
477
+ .tree-indent { margin-left: 16px; }
478
+
479
+ /* Comment visual */
480
+ .visual-comments { gap: 10px; }
481
+
482
+ .comment-item {
483
+ display: flex;
484
+ gap: 10px;
485
+ align-items: flex-start;
486
+ font-size: 12px;
487
+ }
488
+
489
+ .comment-avatar {
490
+ width: 28px;
491
+ height: 28px;
492
+ border-radius: 50%;
493
+ background: var(--accent-light);
494
+ border: 1px solid rgba(91,92,246,0.15);
495
+ display: flex;
496
+ align-items: center;
497
+ justify-content: center;
498
+ font-weight: 700;
499
+ font-size: 11px;
500
+ color: var(--accent);
501
+ flex-shrink: 0;
502
+ }
503
+
504
+ .comment-body {
505
+ background: var(--bg);
506
+ border: 1px solid var(--border);
507
+ border-radius: 8px;
508
+ padding: 8px 12px;
509
+ flex: 1;
510
+ }
511
+
512
+ .comment-author {
513
+ font-weight: 600;
514
+ color: var(--text-heading);
515
+ font-size: 11px;
516
+ margin-bottom: 3px;
517
+ }
518
+
519
+ .comment-text { color: var(--text-secondary); line-height: 1.4; }
520
+
521
+ /* ── SOCIAL PROOF ── */
522
+ .social-proof {
523
+ background: var(--bg-white);
524
+ padding: 48px 40px;
525
+ border-top: 1px solid var(--border-light);
526
+ border-bottom: 1px solid var(--border-light);
527
+ }
528
+
529
+ .social-proof-inner {
530
+ max-width: 1080px;
531
+ margin: 0 auto;
532
+ display: flex;
533
+ align-items: center;
534
+ gap: 48px;
535
+ flex-wrap: wrap;
536
+ justify-content: center;
537
+ }
538
+
539
+ .social-proof-label {
540
+ font-size: 13px;
541
+ font-weight: 500;
542
+ color: var(--text-muted);
543
+ flex-shrink: 0;
544
+ }
545
+
546
+ .social-divider {
547
+ width: 1px;
548
+ height: 20px;
549
+ background: var(--border);
550
+ flex-shrink: 0;
551
+ }
552
+
553
+ .company-name {
554
+ font-size: 14px;
555
+ font-weight: 500;
556
+ color: var(--text-muted);
557
+ letter-spacing: -0.01em;
558
+ }
559
+
560
+ /* ── HOW IT WORKS ── */
561
+ .how-section {
562
+ background: var(--bg);
563
+ padding: 96px 40px;
564
+ }
565
+
566
+ .how-inner { max-width: 1080px; margin: 0 auto; }
567
+
568
+ .how-steps {
569
+ display: grid;
570
+ grid-template-columns: repeat(3, 1fr);
571
+ gap: 48px;
572
+ margin-top: 56px;
573
+ }
574
+
575
+ .how-step {
576
+ position: relative;
577
+ }
578
+
579
+ .step-number {
580
+ font-size: 80px;
581
+ font-weight: 800;
582
+ color: var(--border);
583
+ line-height: 1;
584
+ letter-spacing: -0.04em;
585
+ margin-bottom: 20px;
586
+ display: block;
587
+ }
588
+
589
+ .how-step h3 {
590
+ font-size: 18px;
591
+ font-weight: 700;
592
+ color: var(--text-heading);
593
+ letter-spacing: -0.02em;
594
+ margin-bottom: 10px;
595
+ }
596
+
597
+ .how-step p {
598
+ font-size: 14px;
599
+ color: var(--text-secondary);
600
+ line-height: 1.7;
601
+ }
602
+
603
+ /* ── PRICING ── */
604
+ .pricing-section {
605
+ background: var(--bg-white);
606
+ padding: 96px 40px;
607
+ border-top: 1px solid var(--border-light);
608
+ }
609
+
610
+ .pricing-grid {
611
+ display: grid;
612
+ grid-template-columns: 1fr 1fr;
613
+ gap: 24px;
614
+ max-width: 720px;
615
+ margin: 56px auto 0;
616
+ }
617
+
618
+ .pricing-card {
619
+ background: var(--bg-white);
620
+ border: 1px solid var(--border);
621
+ border-radius: 12px;
622
+ overflow: hidden;
623
+ box-shadow: 0 2px 8px rgba(0,0,0,0.04);
624
+ }
625
+
626
+ .pricing-card.featured {
627
+ border-color: var(--accent);
628
+ box-shadow: 0 4px 24px rgba(91,92,246,0.12);
629
+ }
630
+
631
+ .pricing-head {
632
+ padding: 28px;
633
+ border-bottom: 1px solid var(--border);
634
+ }
635
+
636
+ .pricing-card.featured .pricing-head {
637
+ background: var(--accent);
638
+ border-color: var(--accent);
639
+ }
640
+
641
+ .pricing-tier-name {
642
+ font-size: 13px;
643
+ font-weight: 600;
644
+ color: var(--text-secondary);
645
+ letter-spacing: 0.04em;
646
+ text-transform: uppercase;
647
+ margin-bottom: 16px;
648
+ }
649
+
650
+ .pricing-card.featured .pricing-tier-name { color: rgba(255,255,255,0.75); }
651
+
652
+ .pricing-amount {
653
+ font-size: 42px;
654
+ font-weight: 700;
655
+ color: var(--text-heading);
656
+ letter-spacing: -0.03em;
657
+ line-height: 1;
658
+ display: flex;
659
+ align-items: baseline;
660
+ gap: 6px;
661
+ }
662
+
663
+ .pricing-card.featured .pricing-amount { color: white; }
664
+
665
+ .pricing-amount-unit {
666
+ font-size: 14px;
667
+ font-weight: 400;
668
+ color: var(--text-muted);
669
+ }
670
+
671
+ .pricing-card.featured .pricing-amount-unit { color: rgba(255,255,255,0.6); }
672
+
673
+ .pricing-head-desc {
674
+ font-size: 13px;
675
+ color: var(--text-secondary);
676
+ margin-top: 10px;
677
+ }
678
+
679
+ .pricing-card.featured .pricing-head-desc { color: rgba(255,255,255,0.75); }
680
+
681
+ .pricing-body {
682
+ padding: 24px 28px;
683
+ }
684
+
685
+ .pricing-items { list-style: none; margin-bottom: 24px; }
686
+
687
+ .pricing-items li {
688
+ font-size: 14px;
689
+ color: var(--text-body);
690
+ padding: 8px 0;
691
+ border-bottom: 1px solid var(--bg);
692
+ display: flex;
693
+ align-items: center;
694
+ gap: 10px;
695
+ }
696
+
697
+ .pricing-items li::before {
698
+ content: '→';
699
+ color: var(--accent);
700
+ font-size: 12px;
701
+ font-weight: 600;
702
+ flex-shrink: 0;
703
+ }
704
+
705
+ .pricing-btn {
706
+ display: block;
707
+ text-align: center;
708
+ padding: 11px 20px;
709
+ border-radius: 8px;
710
+ font-size: 14px;
711
+ font-weight: 600;
712
+ text-decoration: none;
713
+ cursor: pointer;
714
+ }
715
+
716
+ .pricing-btn.cta-primary {
717
+ background: var(--accent);
718
+ color: white;
719
+ border: none;
720
+ }
721
+
722
+ .pricing-btn.cta-ghost {
723
+ background: var(--bg);
724
+ color: var(--text-body);
725
+ border: 1px solid var(--border);
726
+ }
727
+
728
+ /* ── DARK STATEMENT ── */
729
+ .dark-statement {
730
+ background: var(--bg-dark);
731
+ padding: 96px 40px;
732
+ text-align: center;
733
+ }
734
+
735
+ .dark-statement h2 {
736
+ font-size: 52px;
737
+ font-weight: 800;
738
+ color: white;
739
+ letter-spacing: -0.03em;
740
+ line-height: 1.1;
741
+ max-width: 720px;
742
+ margin: 0 auto 24px;
743
+ }
744
+
745
+ .dark-statement h2 span { color: var(--accent); }
746
+
747
+ .dark-statement p {
748
+ font-size: 17px;
749
+ color: rgba(255,255,255,0.5);
750
+ max-width: 500px;
751
+ margin: 0 auto 40px;
752
+ line-height: 1.65;
753
+ }
754
+
755
+ .btn-accent-outline {
756
+ font-family: 'Inter', sans-serif;
757
+ font-size: 15px;
758
+ font-weight: 600;
759
+ color: var(--accent);
760
+ background: rgba(91,92,246,0.1);
761
+ border: 1px solid rgba(91,92,246,0.3);
762
+ border-radius: 8px;
763
+ padding: 13px 28px;
764
+ cursor: pointer;
765
+ text-decoration: none;
766
+ display: inline-flex;
767
+ align-items: center;
768
+ gap: 8px;
769
+ }
770
+
771
+ /* ── FOOTER ── */
772
+ footer {
773
+ background: var(--bg-white);
774
+ border-top: 1px solid var(--border-light);
775
+ padding: 64px 40px 32px;
776
+ }
777
+
778
+ .footer-inner { max-width: 1080px; margin: 0 auto; }
779
+
780
+ .footer-grid {
781
+ display: grid;
782
+ grid-template-columns: 1.6fr 1fr 1fr 1fr;
783
+ gap: 48px;
784
+ margin-bottom: 48px;
785
+ }
786
+
787
+ .footer-logo {
788
+ font-size: 18px;
789
+ font-weight: 800;
790
+ color: var(--text-heading);
791
+ text-decoration: none;
792
+ letter-spacing: -0.03em;
793
+ display: block;
794
+ margin-bottom: 12px;
795
+ }
796
+
797
+ .footer-logo span { color: var(--accent); }
798
+
799
+ .footer-brand-text {
800
+ font-size: 13px;
801
+ color: var(--text-secondary);
802
+ line-height: 1.65;
803
+ max-width: 240px;
804
+ }
805
+
806
+ .footer-col-title {
807
+ font-size: 12px;
808
+ font-weight: 600;
809
+ color: var(--text-heading);
810
+ text-transform: uppercase;
811
+ letter-spacing: 0.06em;
812
+ margin-bottom: 16px;
813
+ }
814
+
815
+ .footer-links { list-style: none; }
816
+ .footer-links li { margin-bottom: 10px; }
817
+
818
+ .footer-links a {
819
+ font-size: 14px;
820
+ color: var(--text-secondary);
821
+ text-decoration: none;
822
+ transition: color 0.2s;
823
+ }
824
+
825
+ .footer-links a:hover { color: var(--text-heading); }
826
+
827
+ .footer-bottom {
828
+ border-top: 1px solid var(--border-light);
829
+ padding-top: 24px;
830
+ display: flex;
831
+ justify-content: space-between;
832
+ align-items: center;
833
+ }
834
+
835
+ .footer-bottom-text {
836
+ font-size: 13px;
837
+ color: var(--text-muted);
838
+ }
839
+
840
+ .footer-bottom-mono {
841
+ font-family: 'JetBrains Mono', monospace;
842
+ font-size: 11px;
843
+ color: var(--text-muted);
844
+ }
845
+
846
+ .text-center { text-align: center; }
847
+ </style>
848
+ </head>
849
+ <body>
850
+
851
+ <!-- NAV -->
852
+ <nav>
853
+ <a href="#" class="nav-logo">ORBIT<span>.</span></a>
854
+ <ul class="nav-links">
855
+ <li><a href="#">Product</a></li>
856
+ <li><a href="#">Templates</a></li>
857
+ <li><a href="#">Pricing</a></li>
858
+ <li><a href="#">Blog</a></li>
859
+ </ul>
860
+ <div class="nav-actions">
861
+ <a href="#" class="btn-ghost">Sign in</a>
862
+ <a href="#" class="btn-primary">Get started →</a>
863
+ </div>
864
+ </nav>
865
+
866
+ <!-- HERO -->
867
+ <div class="hero">
868
+ <div class="hero-inner">
869
+ <div class="hero-text">
870
+ <span class="hero-mono">Project Collaboration</span>
871
+ <h1>Every project, one place. Always.</h1>
872
+ <p class="hero-sub">The workspace that brings your work, your team, and your decisions together — without the noise.</p>
873
+ <div class="hero-ctas">
874
+ <a href="#" class="btn-primary-lg">Start for free →</a>
875
+ <a href="#" class="btn-ghost-lg">See how it works</a>
876
+ </div>
877
+ </div>
878
+
879
+ <!-- Product mock -->
880
+ <div class="hero-mock">
881
+ <div class="mock-header">
882
+ <span class="mock-header-title">Q1 Product Launch</span>
883
+ <span class="mock-header-tag">6 tasks open</span>
884
+ </div>
885
+ <div class="mock-body-inner">
886
+ <div class="mock-left">
887
+ <div class="mock-left-item active">
888
+ <div class="mock-item-dot"></div>
889
+ All Projects
890
+ </div>
891
+ <div class="mock-left-item">
892
+ <div class="mock-item-dot"></div>
893
+ Assigned to me
894
+ </div>
895
+ <div class="mock-left-item">
896
+ <div class="mock-item-dot"></div>
897
+ Design
898
+ </div>
899
+ <div class="mock-left-item">
900
+ <div class="mock-item-dot"></div>
901
+ Engineering
902
+ </div>
903
+ <div class="mock-left-item">
904
+ <div class="mock-item-dot"></div>
905
+ Marketing
906
+ </div>
907
+ </div>
908
+ <div class="mock-right">
909
+ <div class="mock-card">
910
+ <div>
911
+ <div class="mock-card-title">Finalize landing page copy</div>
912
+ <div class="mock-card-sub">Marketing · Due Mar 15</div>
913
+ </div>
914
+ <span class="mock-card-status status-review">In review</span>
915
+ </div>
916
+ <div class="mock-card">
917
+ <div>
918
+ <div class="mock-card-title">API endpoint documentation</div>
919
+ <div class="mock-card-sub">Engineering · Due Mar 18</div>
920
+ </div>
921
+ <span class="mock-card-status status-active">In progress</span>
922
+ </div>
923
+ <div class="mock-card">
924
+ <div>
925
+ <div class="mock-card-title">Set up analytics tracking</div>
926
+ <div class="mock-card-sub">Engineering · Due Mar 20</div>
927
+ </div>
928
+ <span class="mock-card-status status-active">In progress</span>
929
+ </div>
930
+ <div class="mock-card">
931
+ <div>
932
+ <div class="mock-card-title">Brand asset export package</div>
933
+ <div class="mock-card-sub">Design · Due Mar 12</div>
934
+ </div>
935
+ <span class="mock-card-status status-done">Done</span>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ </div>
941
+ </div>
942
+
943
+ <!-- SOCIAL PROOF -->
944
+ <div class="social-proof">
945
+ <div class="social-proof-inner">
946
+ <span class="social-proof-label">Trusted by teams at</span>
947
+ <div class="social-divider"></div>
948
+ <span class="company-name">Streamline</span>
949
+ <span class="company-name">Northvault</span>
950
+ <span class="company-name">Cascadeio</span>
951
+ <span class="company-name">Meridian</span>
952
+ <span class="company-name">Apertive</span>
953
+ <span class="company-name">Helix Group</span>
954
+ </div>
955
+ </div>
956
+
957
+ <!-- FEATURES -->
958
+ <section class="features-section">
959
+ <div class="features-inner">
960
+ <div class="features-header">
961
+ <span class="section-mono">Features</span>
962
+ <h2 class="section-h2">Discipline in every detail.</h2>
963
+ <p class="section-sub">ORBIT is built on the principle that great collaboration tools get out of the way. The craft is in what we don't add.</p>
964
+ </div>
965
+
966
+ <div class="feature-block">
967
+ <div class="feature-text">
968
+ <div class="feature-text-meta">01 / Visibility</div>
969
+ <h3>See the whole picture at a glance.</h3>
970
+ <p>ORBIT gives every project a clear progress view without configuration. Status, assignee, due date — always visible, never buried under menus. Your team knows what's done, what's next, and what's stuck.</p>
971
+ </div>
972
+ <div class="feature-visual">
973
+ <div class="visual-row">
974
+ <span class="visual-label">Design</span>
975
+ <div class="visual-bar-wrap"><div class="visual-bar" style="width:88%"></div></div>
976
+ <span class="visual-val">88%</span>
977
+ </div>
978
+ <div class="visual-row">
979
+ <span class="visual-label">Engineering</span>
980
+ <div class="visual-bar-wrap"><div class="visual-bar" style="width:62%"></div></div>
981
+ <span class="visual-val">62%</span>
982
+ </div>
983
+ <div class="visual-row">
984
+ <span class="visual-label">Marketing</span>
985
+ <div class="visual-bar-wrap"><div class="visual-bar" style="width:44%"></div></div>
986
+ <span class="visual-val">44%</span>
987
+ </div>
988
+ <div class="visual-row">
989
+ <span class="visual-label">Legal</span>
990
+ <div class="visual-bar-wrap"><div class="visual-bar muted" style="width:10%"></div></div>
991
+ <span class="visual-val">10%</span>
992
+ </div>
993
+ </div>
994
+ </div>
995
+
996
+ <div class="feature-block reverse">
997
+ <div class="feature-visual visual-tree">
998
+ <div class="tree-item">
999
+ <div class="tree-item-icon">📁</div>
1000
+ Q1 Launch
1001
+ </div>
1002
+ <div class="tree-item tree-indent">
1003
+ <div class="tree-item-icon">📄</div>
1004
+ Brief.md
1005
+ </div>
1006
+ <div class="tree-item tree-indent selected">
1007
+ <div class="tree-item-icon">📋</div>
1008
+ Product spec v3
1009
+ </div>
1010
+ <div class="tree-item tree-indent">
1011
+ <div class="tree-item-icon">📄</div>
1012
+ Launch checklist
1013
+ </div>
1014
+ <div class="tree-item">
1015
+ <div class="tree-item-icon">📁</div>
1016
+ Assets
1017
+ </div>
1018
+ </div>
1019
+ <div class="feature-text">
1020
+ <div class="feature-text-meta">02 / Organization</div>
1021
+ <h3>One home for every file, doc, and decision.</h3>
1022
+ <p>Files, specs, briefs, and links — structured the way your project actually works. ORBIT's document model is flexible enough for any team, with enough structure to keep things findable six months later.</p>
1023
+ </div>
1024
+ </div>
1025
+
1026
+ <div class="feature-block">
1027
+ <div class="feature-text">
1028
+ <div class="feature-text-meta">03 / Communication</div>
1029
+ <h3>Decisions happen in context — not in threads.</h3>
1030
+ <p>Comments, approvals, and feedback attach directly to the work they're about. No more hunting through Slack for the decision made two weeks ago. The project is the record of truth.</p>
1031
+ </div>
1032
+ <div class="feature-visual visual-comments">
1033
+ <div class="comment-item">
1034
+ <div class="comment-avatar">LM</div>
1035
+ <div class="comment-body">
1036
+ <div class="comment-author">Laura M.</div>
1037
+ <div class="comment-text">Copy approved. Final version looks great.</div>
1038
+ </div>
1039
+ </div>
1040
+ <div class="comment-item">
1041
+ <div class="comment-avatar">JK</div>
1042
+ <div class="comment-body">
1043
+ <div class="comment-author">James K.</div>
1044
+ <div class="comment-text">Marking as ready for dev handoff.</div>
1045
+ </div>
1046
+ </div>
1047
+ <div class="comment-item">
1048
+ <div class="comment-avatar">AN</div>
1049
+ <div class="comment-body">
1050
+ <div class="comment-author">Ana N.</div>
1051
+ <div class="comment-text">Deployed to staging. Link in description.</div>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </div>
1056
+ </div>
1057
+ </section>
1058
+
1059
+ <!-- HOW IT WORKS -->
1060
+ <section class="how-section">
1061
+ <div class="how-inner">
1062
+ <div class="text-center">
1063
+ <span class="section-mono">Process</span>
1064
+ <h2 class="section-h2">Up and running in minutes.</h2>
1065
+ </div>
1066
+ <div class="how-steps">
1067
+ <div class="how-step">
1068
+ <span class="step-number">01</span>
1069
+ <h3>Create your workspace</h3>
1070
+ <p>Set up an ORBIT workspace for your team in under two minutes. Invite members, create your first project, and you're in.</p>
1071
+ </div>
1072
+ <div class="how-step">
1073
+ <span class="step-number">02</span>
1074
+ <h3>Organize your work</h3>
1075
+ <p>Add tasks, documents, and deadlines. Structure your project the way your team actually thinks — no forced methodology.</p>
1076
+ </div>
1077
+ <div class="how-step">
1078
+ <span class="step-number">03</span>
1079
+ <h3>Ship together</h3>
1080
+ <p>Everyone sees the same picture. Decisions are recorded. Work moves forward. That's the whole promise.</p>
1081
+ </div>
1082
+ </div>
1083
+ </div>
1084
+ </section>
1085
+
1086
+ <!-- PRICING -->
1087
+ <section class="pricing-section">
1088
+ <div class="container">
1089
+ <div class="text-center">
1090
+ <span class="section-mono">Pricing</span>
1091
+ <h2 class="section-h2">No tricks. No tiers nobody needs.</h2>
1092
+ <p class="section-sub">Two plans. Both genuinely useful. Pick the one that fits.</p>
1093
+ </div>
1094
+ <div class="pricing-grid">
1095
+ <div class="pricing-card">
1096
+ <div class="pricing-head">
1097
+ <div class="pricing-tier-name">Simple</div>
1098
+ <div class="pricing-amount">Free <span class="pricing-amount-unit">forever</span></div>
1099
+ <div class="pricing-head-desc">For individuals and small teams just getting started.</div>
1100
+ </div>
1101
+ <div class="pricing-body">
1102
+ <ul class="pricing-items">
1103
+ <li>Up to 3 projects</li>
1104
+ <li>10 members</li>
1105
+ <li>5 GB file storage</li>
1106
+ <li>Basic task management</li>
1107
+ <li>14-day history</li>
1108
+ </ul>
1109
+ <a href="#" class="pricing-btn cta-ghost">Start for free</a>
1110
+ </div>
1111
+ </div>
1112
+
1113
+ <div class="pricing-card featured">
1114
+ <div class="pricing-head">
1115
+ <div class="pricing-tier-name">Pro</div>
1116
+ <div class="pricing-amount">$12 <span class="pricing-amount-unit">/ member / mo</span></div>
1117
+ <div class="pricing-head-desc">Everything your team needs to ship real work.</div>
1118
+ </div>
1119
+ <div class="pricing-body">
1120
+ <ul class="pricing-items">
1121
+ <li>Unlimited projects</li>
1122
+ <li>Unlimited members</li>
1123
+ <li>100 GB file storage</li>
1124
+ <li>Advanced permissions</li>
1125
+ <li>Full history + exports</li>
1126
+ </ul>
1127
+ <a href="#" class="pricing-btn cta-primary">Start Pro trial</a>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ </div>
1132
+ </section>
1133
+
1134
+ <!-- DARK STATEMENT -->
1135
+ <div class="dark-statement">
1136
+ <div class="container">
1137
+ <h2>The best tool is the one your team <span>actually uses.</span></h2>
1138
+ <p>ORBIT is built to stay out of the way. No training required. No six-week rollout. Just work, organized.</p>
1139
+ <a href="#" class="btn-accent-outline">Try ORBIT free →</a>
1140
+ </div>
1141
+ </div>
1142
+
1143
+ <!-- FOOTER -->
1144
+ <footer>
1145
+ <div class="footer-inner">
1146
+ <div class="footer-grid">
1147
+ <div>
1148
+ <a href="#" class="footer-logo">ORBIT<span>.</span></a>
1149
+ <p class="footer-brand-text">The project collaboration tool for teams who want clarity, not complexity.</p>
1150
+ </div>
1151
+ <div>
1152
+ <div class="footer-col-title">Product</div>
1153
+ <ul class="footer-links">
1154
+ <li><a href="#">Features</a></li>
1155
+ <li><a href="#">Templates</a></li>
1156
+ <li><a href="#">Integrations</a></li>
1157
+ <li><a href="#">Changelog</a></li>
1158
+ </ul>
1159
+ </div>
1160
+ <div>
1161
+ <div class="footer-col-title">Resources</div>
1162
+ <ul class="footer-links">
1163
+ <li><a href="#">Documentation</a></li>
1164
+ <li><a href="#">API</a></li>
1165
+ <li><a href="#">Blog</a></li>
1166
+ <li><a href="#">Status</a></li>
1167
+ </ul>
1168
+ </div>
1169
+ <div>
1170
+ <div class="footer-col-title">Company</div>
1171
+ <ul class="footer-links">
1172
+ <li><a href="#">About</a></li>
1173
+ <li><a href="#">Careers</a></li>
1174
+ <li><a href="#">Privacy</a></li>
1175
+ <li><a href="#">Terms</a></li>
1176
+ </ul>
1177
+ </div>
1178
+ </div>
1179
+ <div class="footer-bottom">
1180
+ <span class="footer-bottom-text">© 2024 Orbit Technologies, Inc. All rights reserved.</span>
1181
+ <span class="footer-bottom-mono">Interface Design Skill Preview</span>
1182
+ </div>
1183
+ </div>
1184
+ </footer>
1185
+
1186
+ </body>
1187
+ </html>