@jaimevalasek/aioson 1.5.1 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/README.md +6 -0
  2. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  3. package/docs/design-previews/aurora-command-ui.html +682 -0
  4. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  5. package/docs/design-previews/bold-editorial-ui.html +717 -0
  6. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  7. package/docs/design-previews/clean-saas-ui.html +549 -0
  8. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  9. package/docs/design-previews/cognitive-core-ui.html +463 -0
  10. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  11. package/docs/design-previews/glassmorphism-ui.html +886 -0
  12. package/docs/design-previews/index.html +699 -0
  13. package/docs/design-previews/interface-design-website.html +1187 -0
  14. package/docs/design-previews/interface-design.html +513 -0
  15. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  16. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  17. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  18. package/docs/design-previews/premium-command-center-ui.html +552 -0
  19. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  20. package/docs/design-previews/warm-craft-ui.html +739 -0
  21. package/docs/en/cli-reference.md +20 -9
  22. package/docs/pt/README.md +7 -0
  23. package/docs/pt/agent-sharding.md +132 -0
  24. package/docs/pt/agentes.md +8 -2
  25. package/docs/pt/busca-de-contexto.md +129 -0
  26. package/docs/pt/cache-de-contexto.md +156 -0
  27. package/docs/pt/comandos-cli.md +28 -0
  28. package/docs/pt/design-hybrid-forge.md +107 -0
  29. package/docs/pt/inicio-rapido.md +54 -3
  30. package/docs/pt/inteligencia-adaptativa.md +324 -0
  31. package/docs/pt/monitor-de-contexto.md +104 -0
  32. package/docs/pt/recuperacao-de-sessao.md +125 -0
  33. package/docs/pt/sandbox.md +125 -0
  34. package/docs/pt/skills.md +98 -6
  35. package/package.json +1 -1
  36. package/src/agent-loader.js +280 -0
  37. package/src/cli.js +94 -0
  38. package/src/commands/agent-loader.js +85 -0
  39. package/src/commands/context-cache.js +90 -0
  40. package/src/commands/context-monitor.js +92 -0
  41. package/src/commands/context-search.js +66 -0
  42. package/src/commands/design-hybrid-options.js +385 -0
  43. package/src/commands/health.js +214 -0
  44. package/src/commands/init.js +54 -13
  45. package/src/commands/install.js +52 -13
  46. package/src/commands/learning-evolve.js +355 -0
  47. package/src/commands/live.js +34 -0
  48. package/src/commands/recovery.js +43 -0
  49. package/src/commands/sandbox.js +37 -0
  50. package/src/commands/setup-context.js +22 -2
  51. package/src/commands/setup.js +178 -0
  52. package/src/commands/skill.js +79 -32
  53. package/src/commands/tool-registry-cmd.js +232 -0
  54. package/src/commands/update.js +7 -0
  55. package/src/constants.js +9 -0
  56. package/src/context-cache.js +159 -0
  57. package/src/context-search.js +326 -0
  58. package/src/design-variation-catalog.js +503 -0
  59. package/src/i18n/messages/en.js +32 -2
  60. package/src/i18n/messages/es.js +30 -2
  61. package/src/i18n/messages/fr.js +30 -2
  62. package/src/i18n/messages/pt-BR.js +32 -2
  63. package/src/install-animation.js +260 -0
  64. package/src/install-profile.js +143 -0
  65. package/src/install-wizard.js +474 -0
  66. package/src/installer.js +38 -10
  67. package/src/parser.js +7 -1
  68. package/src/recovery-context-session.js +154 -0
  69. package/src/runtime-store.js +97 -1
  70. package/src/sandbox.js +177 -0
  71. package/src/tool-executor.js +94 -0
  72. package/src/updater.js +11 -3
  73. package/template/.aioson/agents/analyst.md +58 -3
  74. package/template/.aioson/agents/architect.md +38 -0
  75. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  76. package/template/.aioson/agents/dev.md +103 -0
  77. package/template/.aioson/agents/deyvin.md +57 -0
  78. package/template/.aioson/agents/pm.md +58 -0
  79. package/template/.aioson/agents/product.md +28 -0
  80. package/template/.aioson/agents/qa.md +79 -0
  81. package/template/.aioson/agents/setup.md +65 -3
  82. package/template/.aioson/agents/sheldon.md +107 -6
  83. package/template/.aioson/agents/tester.md +156 -0
  84. package/template/.aioson/config.md +15 -0
  85. package/template/.aioson/context/forensics/.gitkeep +0 -0
  86. package/template/.aioson/context/seeds/seed-example.md +27 -0
  87. package/template/.aioson/context/user-profile.md +42 -0
  88. package/template/.aioson/locales/en/agents/setup.md +33 -1
  89. package/template/.aioson/locales/es/agents/setup.md +33 -1
  90. package/template/.aioson/locales/fr/agents/setup.md +33 -1
  91. package/template/.aioson/locales/pt-BR/agents/setup.md +33 -1
  92. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  93. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  94. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  95. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  96. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  97. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  98. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  99. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  100. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  101. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  102. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  103. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  104. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  105. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  106. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  107. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  108. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  109. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  110. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  111. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  112. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  113. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  114. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  115. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  116. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  117. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  118. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  119. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  120. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  121. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  122. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  123. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  124. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  125. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  126. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  127. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  128. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  129. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  130. package/template/AGENTS.md +23 -1
  131. package/template/CLAUDE.md +1 -0
package/docs/design-previews/glassmorphism-ui-website.html ADDED
@@ -0,0 +1,572 @@
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>LUMEX — Fintech Landing Page / Glassmorphism 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@300;400;500;600;700;800&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --violet: #7C3AED;
15
+ --blue: #3B82F6;
16
+ --gradient: linear-gradient(135deg, #7C3AED, #3B82F6);
17
+ --text-head: #1A1A2E;
18
+ --text-body: #2D2D44;
19
+ --text-muted: #6B6B8A;
20
+ --glass-bg: rgba(255,255,255,0.55);
21
+ --glass-bg-strong: rgba(255,255,255,0.70);
22
+ --glass-border: rgba(255,255,255,0.40);
23
+ --shadow: rgba(124, 58, 237, 0.10);
24
+ }
25
+
26
+ html { scroll-behavior: smooth; }
27
+
28
+ body {
29
+ font-family: 'Inter', sans-serif;
30
+ color: var(--text-body);
31
+ background: linear-gradient(135deg, #F0EEF6 0%, #E0DFF0 30%, #D8E0F0 70%, #EDE8F0 100%);
32
+ min-height: 100vh;
33
+ overflow-x: hidden;
34
+ }
35
+
36
+ /* Decorative blobs */
37
+ .blob-container {
38
+ position: fixed;
39
+ inset: 0;
40
+ pointer-events: none;
41
+ z-index: 0;
42
+ overflow: hidden;
43
+ }
44
+ .blob {
45
+ position: absolute;
46
+ border-radius: 50%;
47
+ filter: blur(80px);
48
+ opacity: 0.55;
49
+ }
50
+ .blob-violet {
51
+ width: 600px; height: 600px;
52
+ background: radial-gradient(circle, rgba(124,58,237,0.38), rgba(124,58,237,0.10));
53
+ top: -180px; left: -180px;
54
+ }
55
+ .blob-blue {
56
+ width: 700px; height: 700px;
57
+ background: radial-gradient(circle, rgba(59,130,246,0.32), rgba(59,130,246,0.08));
58
+ bottom: -220px; right: -200px;
59
+ }
60
+ .blob-indigo {
61
+ width: 400px; height: 400px;
62
+ background: radial-gradient(circle, rgba(99,102,241,0.22), transparent);
63
+ top: 50%; left: 55%;
64
+ }
65
+
66
+ /* Layout helpers */
67
+ .container {
68
+ max-width: 1160px;
69
+ margin: 0 auto;
70
+ padding: 0 24px;
71
+ position: relative;
72
+ z-index: 1;
73
+ }
74
+
75
+ /* Glass mixin */
76
+ .glass {
77
+ backdrop-filter: blur(16px);
78
+ -webkit-backdrop-filter: blur(16px);
79
+ background: var(--glass-bg);
80
+ border: 1px solid var(--glass-border);
81
+ border-radius: 20px;
82
+ box-shadow: 0 8px 32px var(--shadow), 0 1px 0 rgba(255,255,255,0.6) inset;
83
+ }
84
+
85
+ /* === NAV === */
86
+ nav {
87
+ position: sticky;
88
+ top: 0;
89
+ z-index: 100;
90
+ backdrop-filter: blur(20px);
91
+ -webkit-backdrop-filter: blur(20px);
92
+ background: rgba(255,255,255,0.70);
93
+ border-bottom: 1px solid rgba(255,255,255,0.40);
94
+ box-shadow: 0 2px 20px rgba(124,58,237,0.07);
95
+ }
96
+ .nav-inner {
97
+ display: flex;
98
+ align-items: center;
99
+ justify-content: space-between;
100
+ height: 68px;
101
+ max-width: 1160px;
102
+ margin: 0 auto;
103
+ padding: 0 24px;
104
+ }
105
+ .logo {
106
+ font-size: 1.35rem;
107
+ font-weight: 800;
108
+ background: var(--gradient);
109
+ -webkit-background-clip: text;
110
+ -webkit-text-fill-color: transparent;
111
+ background-clip: text;
112
+ letter-spacing: -0.03em;
113
+ }
114
+ .logo span {
115
+ font-weight: 300;
116
+ opacity: 0.7;
117
+ }
118
+ .nav-links {
119
+ display: flex;
120
+ gap: 36px;
121
+ list-style: none;
122
+ }
123
+ .nav-links a {
124
+ text-decoration: none;
125
+ color: var(--text-body);
126
+ font-size: 0.9rem;
127
+ font-weight: 500;
128
+ transition: color 0.2s;
129
+ }
130
+ .nav-links a:hover { color: var(--violet); }
131
+ .btn-gradient {
132
+ background: var(--gradient);
133
+ color: #fff;
134
+ border: none;
135
+ border-radius: 12px;
136
+ padding: 10px 22px;
137
+ font-size: 0.88rem;
138
+ font-weight: 600;
139
+ cursor: pointer;
140
+ font-family: 'Inter', sans-serif;
141
+ box-shadow: 0 4px 14px rgba(124,58,237,0.30);
142
+ transition: transform 0.15s, box-shadow 0.15s;
143
+ }
144
+ .btn-gradient:hover {
145
+ transform: translateY(-1px);
146
+ box-shadow: 0 6px 20px rgba(124,58,237,0.40);
147
+ }
148
+
149
+ /* === HERO === */
150
+ .hero {
151
+ padding: 100px 0 60px;
152
+ text-align: center;
153
+ position: relative;
154
+ z-index: 1;
155
+ }
156
+ .hero-badge {
157
+ display: inline-flex;
158
+ align-items: center;
159
+ gap: 8px;
160
+ backdrop-filter: blur(12px);
161
+ background: rgba(255,255,255,0.60);
162
+ border: 1px solid rgba(255,255,255,0.50);
163
+ border-radius: 100px;
164
+ padding: 6px 16px;
165
+ font-size: 0.8rem;
166
+ font-weight: 600;
167
+ color: var(--violet);
168
+ margin-bottom: 28px;
169
+ box-shadow: 0 2px 12px var(--shadow);
170
+ }
171
+ .badge-dot {
172
+ width: 6px; height: 6px;
173
+ border-radius: 50%;
174
+ background: var(--gradient);
175
+ }
176
+ .hero h1 {
177
+ font-size: clamp(44px, 6vw, 60px);
178
+ font-weight: 800;
179
+ color: var(--text-head);
180
+ line-height: 1.1;
181
+ letter-spacing: -0.03em;
182
+ margin-bottom: 20px;
183
+ }
184
+ .hero h1 .gradient-text {
185
+ background: var(--gradient);
186
+ -webkit-background-clip: text;
187
+ -webkit-text-fill-color: transparent;
188
+ background-clip: text;
189
+ }
190
+ .hero-sub {
191
+ font-size: 1.15rem;
192
+ color: var(--text-muted);
193
+ max-width: 520px;
194
+ margin: 0 auto 36px;
195
+ line-height: 1.65;
196
+ font-weight: 400;
197
+ }
198
+ .hero-ctas {
199
+ display: flex;
200
+ gap: 14px;
201
+ justify-content: center;
202
+ flex-wrap: wrap;
203
+ margin-bottom: 64px;
204
+ }
205
+ .btn-outline {
206
+ background: rgba(255,255,255,0.55);
207
+ backdrop-filter: blur(10px);
208
+ color: var(--violet);
209
+ border: 1px solid rgba(124,58,237,0.30);
210
+ border-radius: 12px;
211
+ padding: 10px 22px;
212
+ font-size: 0.88rem;
213
+ font-weight: 600;
214
+ cursor: pointer;
215
+ font-family: 'Inter', sans-serif;
216
+ transition: background 0.2s, border-color 0.2s;
217
+ }
218
+ .btn-outline:hover {
219
+ background: rgba(124,58,237,0.08);
220
+ border-color: rgba(124,58,237,0.50);
221
+ }
222
+ .hero-btn-large {
223
+ padding: 14px 32px;
224
+ font-size: 1rem;
225
+ }
226
+
227
+ /* Portfolio card */
228
+ .portfolio-card {
229
+ max-width: 760px;
230
+ margin: 0 auto;
231
+ padding: 32px;
232
+ }
233
+ .portfolio-header {
234
+ display: flex;
235
+ justify-content: space-between;
236
+ align-items: center;
237
+ margin-bottom: 28px;
238
+ }
239
+ .portfolio-title { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
240
+ .portfolio-value { font-size: 2rem; font-weight: 800; color: var(--text-head); letter-spacing: -0.03em; }
241
+ .portfolio-change { font-size: 0.85rem; font-weight: 600; color: #10B981; background: rgba(16,185,129,0.12); padding: 4px 10px; border-radius: 8px; }
242
+
243
+ /* Chart bars */
244
+ .chart {
245
+ display: flex;
246
+ align-items: flex-end;
247
+ gap: 6px;
248
+ height: 120px;
249
+ margin-bottom: 16px;
250
+ }
251
+ .bar-wrap {
252
+ flex: 1;
253
+ display: flex;
254
+ flex-direction: column;
255
+ align-items: center;
256
+ gap: 4px;
257
+ height: 100%;
258
+ justify-content: flex-end;
259
+ }
260
+ .bar {
261
+ width: 100%;
262
+ border-radius: 6px 6px 0 0;
263
+ background: var(--gradient);
264
+ opacity: 0.85;
265
+ transition: opacity 0.2s;
266
+ }
267
+ .bar:nth-child(odd) { opacity: 0.45; }
268
+ .chart-label { font-size: 0.65rem; color: var(--text-muted); font-weight: 500; }
269
+ .chart-footer {
270
+ display: flex;
271
+ justify-content: space-between;
272
+ font-size: 0.75rem;
273
+ color: var(--text-muted);
274
+ padding-top: 12px;
275
+ border-top: 1px solid rgba(255,255,255,0.50);
276
+ }
277
+
278
+ /* === STATS === */
279
+ .stats-section {
280
+ padding: 20px 0 80px;
281
+ }
282
+ .stats-row {
283
+ display: grid;
284
+ grid-template-columns: repeat(3, 1fr);
285
+ gap: 20px;
286
+ }
287
+ .stat-card {
288
+ padding: 32px;
289
+ text-align: center;
290
+ }
291
+ .stat-value {
292
+ font-size: 2.2rem;
293
+ font-weight: 800;
294
+ color: var(--text-head);
295
+ letter-spacing: -0.03em;
296
+ margin-bottom: 6px;
297
+ }
298
+ .stat-value .accent { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
299
+ .stat-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
300
+
301
+ /* === FEATURES === */
302
+ .features-section {
303
+ padding: 0 0 100px;
304
+ }
305
+ .section-label {
306
+ font-size: 0.78rem;
307
+ font-weight: 700;
308
+ text-transform: uppercase;
309
+ letter-spacing: 0.12em;
310
+ color: var(--violet);
311
+ margin-bottom: 12px;
312
+ }
313
+ .section-title {
314
+ font-size: clamp(28px, 4vw, 40px);
315
+ font-weight: 800;
316
+ color: var(--text-head);
317
+ letter-spacing: -0.025em;
318
+ margin-bottom: 16px;
319
+ line-height: 1.15;
320
+ }
321
+ .section-sub {
322
+ font-size: 1rem;
323
+ color: var(--text-muted);
324
+ max-width: 480px;
325
+ line-height: 1.65;
326
+ margin-bottom: 52px;
327
+ }
328
+ .features-grid {
329
+ display: grid;
330
+ grid-template-columns: repeat(3, 1fr);
331
+ gap: 24px;
332
+ }
333
+ .feature-card {
334
+ padding: 32px 28px;
335
+ }
336
+ .feature-icon {
337
+ font-size: 2rem;
338
+ margin-bottom: 18px;
339
+ display: block;
340
+ width: 56px; height: 56px;
341
+ display: flex; align-items: center; justify-content: center;
342
+ background: rgba(255,255,255,0.70);
343
+ border-radius: 14px;
344
+ border: 1px solid rgba(255,255,255,0.60);
345
+ box-shadow: 0 2px 8px var(--shadow);
346
+ margin-bottom: 20px;
347
+ }
348
+ .feature-title {
349
+ font-size: 1.05rem;
350
+ font-weight: 700;
351
+ color: var(--text-head);
352
+ margin-bottom: 10px;
353
+ }
354
+ .feature-desc {
355
+ font-size: 0.88rem;
356
+ color: var(--text-muted);
357
+ line-height: 1.65;
358
+ }
359
+
360
+ /* === CTA SECTION === */
361
+ .cta-section {
362
+ padding: 0 0 100px;
363
+ }
364
+ .cta-inner {
365
+ padding: 72px 48px;
366
+ text-align: center;
367
+ }
368
+ .cta-inner .section-title {
369
+ max-width: 500px;
370
+ margin: 0 auto 16px;
371
+ }
372
+ .cta-inner .section-title .gradient-text {
373
+ background: var(--gradient);
374
+ -webkit-background-clip: text;
375
+ -webkit-text-fill-color: transparent;
376
+ background-clip: text;
377
+ }
378
+ .cta-sub {
379
+ font-size: 1rem;
380
+ color: var(--text-muted);
381
+ margin-bottom: 36px;
382
+ max-width: 380px;
383
+ margin-left: auto;
384
+ margin-right: auto;
385
+ }
386
+ .btn-cta-large {
387
+ padding: 16px 40px;
388
+ font-size: 1rem;
389
+ }
390
+ .cta-note {
391
+ margin-top: 16px;
392
+ font-size: 0.78rem;
393
+ color: var(--text-muted);
394
+ }
395
+
396
+ /* === FOOTER === */
397
+ footer {
398
+ position: relative;
399
+ z-index: 1;
400
+ }
401
+ .footer-inner {
402
+ backdrop-filter: blur(16px);
403
+ -webkit-backdrop-filter: blur(16px);
404
+ background: rgba(255,255,255,0.50);
405
+ border-top: 1px solid rgba(255,255,255,0.40);
406
+ padding: 36px 24px;
407
+ }
408
+ .footer-content {
409
+ max-width: 1160px;
410
+ margin: 0 auto;
411
+ display: flex;
412
+ justify-content: space-between;
413
+ align-items: center;
414
+ flex-wrap: wrap;
415
+ gap: 16px;
416
+ }
417
+ .footer-logo { font-size: 1.1rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
418
+ .footer-links { display: flex; gap: 28px; }
419
+ .footer-links a { font-size: 0.82rem; color: var(--text-muted); text-decoration: none; font-weight: 500; }
420
+ .footer-links a:hover { color: var(--violet); }
421
+ .footer-copy { font-size: 0.78rem; color: var(--text-muted); }
422
+
423
+ @media (max-width: 768px) {
424
+ .stats-row, .features-grid { grid-template-columns: 1fr; }
425
+ .nav-links { display: none; }
426
+ }
427
+ </style>
428
+ </head>
429
+ <body>
430
+
431
+ <!-- Background blobs -->
432
+ <div class="blob-container">
433
+ <div class="blob blob-violet"></div>
434
+ <div class="blob blob-blue"></div>
435
+ <div class="blob blob-indigo"></div>
436
+ </div>
437
+
438
+ <!-- NAV -->
439
+ <nav>
440
+ <div class="nav-inner">
441
+ <div class="logo">Lumex<span>Finance</span></div>
442
+ <ul class="nav-links">
443
+ <li><a href="#">Markets</a></li>
444
+ <li><a href="#">Portfolio</a></li>
445
+ <li><a href="#">Earn</a></li>
446
+ </ul>
447
+ <button class="btn-gradient">Get Started</button>
448
+ </div>
449
+ </nav>
450
+
451
+ <!-- HERO -->
452
+ <section class="hero">
453
+ <div class="container">
454
+ <div class="hero-badge">
455
+ <span class="badge-dot"></span>
456
+ Now live on 40+ blockchains
457
+ </div>
458
+ <h1>Your Portfolio,<br /><span class="gradient-text">Crystal Clear</span></h1>
459
+ <p class="hero-sub">Invest, trade, and grow your digital assets with institutional-grade security and a beautifully simple interface.</p>
460
+ <div class="hero-ctas">
461
+ <button class="btn-gradient hero-btn-large">Start Investing Free</button>
462
+ <button class="btn-outline hero-btn-large">View Live Markets</button>
463
+ </div>
464
+
465
+ <!-- Floating portfolio card -->
466
+ <div class="glass portfolio-card">
467
+ <div class="portfolio-header">
468
+ <div>
469
+ <div class="portfolio-title">Total Portfolio Value</div>
470
+ <div class="portfolio-value">$84,291.40</div>
471
+ </div>
472
+ <div class="portfolio-change">▲ +12.4% this month</div>
473
+ </div>
474
+ <div class="chart">
475
+ <div class="bar-wrap"><div class="bar" style="height:40%"></div></div>
476
+ <div class="bar-wrap"><div class="bar" style="height:55%"></div></div>
477
+ <div class="bar-wrap"><div class="bar" style="height:38%"></div></div>
478
+ <div class="bar-wrap"><div class="bar" style="height:70%"></div></div>
479
+ <div class="bar-wrap"><div class="bar" style="height:48%"></div></div>
480
+ <div class="bar-wrap"><div class="bar" style="height:62%"></div></div>
481
+ <div class="bar-wrap"><div class="bar" style="height:52%"></div></div>
482
+ <div class="bar-wrap"><div class="bar" style="height:78%"></div></div>
483
+ <div class="bar-wrap"><div class="bar" style="height:65%"></div></div>
484
+ <div class="bar-wrap"><div class="bar" style="height:88%"></div></div>
485
+ <div class="bar-wrap"><div class="bar" style="height:72%"></div></div>
486
+ <div class="bar-wrap"><div class="bar" style="height:95%"></div></div>
487
+ </div>
488
+ <div class="chart-footer">
489
+ <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
490
+ <span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- STATS -->
497
+ <section class="stats-section">
498
+ <div class="container">
499
+ <div class="stats-row">
500
+ <div class="glass stat-card">
501
+ <div class="stat-value"><span class="accent">$2.4B+</span></div>
502
+ <div class="stat-label">Total Volume Traded</div>
503
+ </div>
504
+ <div class="glass stat-card">
505
+ <div class="stat-value"><span class="accent">180K+</span></div>
506
+ <div class="stat-label">Active Investors</div>
507
+ </div>
508
+ <div class="glass stat-card">
509
+ <div class="stat-value"><span class="accent">99.9%</span></div>
510
+ <div class="stat-label">Platform Uptime</div>
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </section>
515
+
516
+ <!-- FEATURES -->
517
+ <section class="features-section">
518
+ <div class="container">
519
+ <div class="section-label">Why Lumex</div>
520
+ <h2 class="section-title">Built for the next generation<br />of investors</h2>
521
+ <p class="section-sub">Everything you need to manage your digital wealth — from real-time data to automated strategies.</p>
522
+ <div class="features-grid">
523
+ <div class="glass feature-card">
524
+ <div class="feature-icon">💎</div>
525
+ <div class="feature-title">Real-Time Analytics</div>
526
+ <p class="feature-desc">Live price feeds across 10,000+ assets. Candlestick charts, depth maps, and volatility signals — all in one view.</p>
527
+ </div>
528
+ <div class="glass feature-card">
529
+ <div class="feature-icon">🔐</div>
530
+ <div class="feature-title">Institutional Security</div>
531
+ <p class="feature-desc">MPC cold storage, biometric auth, and 256-bit encryption keep your assets safer than any bank vault.</p>
532
+ </div>
533
+ <div class="glass feature-card">
534
+ <div class="feature-icon">⚡</div>
535
+ <div class="feature-title">Automated Strategies</div>
536
+ <p class="feature-desc">Set DCA schedules, stop-loss triggers, and portfolio rebalancing. Your wealth works while you sleep.</p>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ </section>
541
+
542
+ <!-- CTA SECTION -->
543
+ <section class="cta-section">
544
+ <div class="container">
545
+ <div class="glass cta-inner">
546
+ <div class="section-label">Get Started Today</div>
547
+ <h2 class="section-title">Ready to see your future<br /><span class="gradient-text">crystal clear?</span></h2>
548
+ <p class="cta-sub">Join 180,000+ investors who trust Lumex with their digital portfolios. No fees for the first 3 months.</p>
549
+ <button class="btn-gradient btn-cta-large">Create Free Account</button>
550
+ <p class="cta-note">No credit card required · Withdraw anytime · SOC 2 certified</p>
551
+ </div>
552
+ </div>
553
+ </section>
554
+
555
+ <!-- FOOTER -->
556
+ <footer>
557
+ <div class="footer-inner">
558
+ <div class="footer-content">
559
+ <div class="footer-logo">Lumex</div>
560
+ <div class="footer-links">
561
+ <a href="#">Privacy</a>
562
+ <a href="#">Terms</a>
563
+ <a href="#">Security</a>
564
+ <a href="#">Status</a>
565
+ </div>
566
+ <div class="footer-copy">© 2025 Lumex Technologies, Inc.</div>
567
+ </div>
568
+ </div>
569
+ </footer>
570
+
571
+ </body>
572
+ </html>