Hugging Face's logo

Spaces:
Matrix-Corp
/
Orenthal
Running

App Files Community
Zandy-Wandy commited on
Commit
d33622d
·
verified ·
1 Parent(s): c7adbd8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1509 -19
index.html CHANGED
@@ -1,19 +1,1509 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Orenthal — Matrix.Corp | Frontier Intelligence</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300&family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
8
+ <style>
9
+ /* ═══════════════════════════════════════
10
+ ROOT & RESET
11
+ ═══════════════════════════════════════ */
12
+ :root {
13
+ --void: #020308;
14
+ --deep: #050812;
15
+ --space: #080d1e;
16
+ --panel: rgba(255,255,255,.025);
17
+ --edge: rgba(255,255,255,.06);
18
+ --edge2: rgba(255,255,255,.12);
19
+ --text: #5a6880;
20
+ --bright: #c8d8f0;
21
+ --ghost: #2a3450;
22
+
23
+ --echo: #00d4ff;
24
+ --echo2: #0090cc;
25
+ --vexa: #a855f7;
26
+ --vexa2: #7c3aed;
27
+ --gold: #fbbf24;
28
+ --lime: #86efac;
29
+ --rose: #f472b6;
30
+
31
+ --crystal1: #50b4ff;
32
+ --crystal2: #a080ff;
33
+ --crystal3: #ffd050;
34
+ }
35
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
36
+ html{scroll-behavior:smooth;font-size:16px}
37
+ body{
38
+ background:var(--void);
39
+ font-family:'Raleway',sans-serif;
40
+ color:var(--text);
41
+ overflow-x:hidden;
42
+ cursor:none;
43
+ }
44
+ ::-webkit-scrollbar{width:2px}
45
+ ::-webkit-scrollbar-track{background:var(--void)}
46
+ ::-webkit-scrollbar-thumb{background:linear-gradient(var(--echo),var(--vexa))}
47
+
48
+ /* ═══════════════════════════════════════
49
+ CUSTOM RETICLE CURSOR
50
+ ═══════════════════════════════════════ */
51
+ #reticle{
52
+ position:fixed;pointer-events:none;z-index:99999;
53
+ width:36px;height:36px;
54
+ transform:translate(-50%,-50%);
55
+ transition:width .2s,height .2s;
56
+ }
57
+ #reticle svg{width:100%;height:100%;animation:reticleSpin 8s linear infinite}
58
+ @keyframes reticleSpin{to{transform:rotate(360deg)}}
59
+ #reticle-dot{
60
+ position:fixed;pointer-events:none;z-index:99999;
61
+ width:4px;height:4px;border-radius:50%;
62
+ background:var(--echo);
63
+ box-shadow:0 0 8px var(--echo);
64
+ transform:translate(-50%,-50%);
65
+ }
66
+
67
+ /* ═══════════════════════════════════════
68
+ WARP INTRO SEQUENCE
69
+ ═══════════════════════════════════════ */
70
+ #warp-overlay{
71
+ position:fixed;inset:0;z-index:9000;
72
+ background:var(--void);
73
+ display:flex;align-items:center;justify-content:center;
74
+ flex-direction:column;gap:20px;
75
+ animation:warpExit 0.6s ease 3.8s forwards;
76
+ }
77
+ @keyframes warpExit{
78
+ 0%{opacity:1;transform:scale(1)}
79
+ 100%{opacity:0;transform:scale(1.08);pointer-events:none}
80
+ }
81
+ #warp-overlay.gone{display:none}
82
+
83
+ #warp-canvas{position:absolute;inset:0;z-index:0}
84
+ .warp-label{
85
+ position:relative;z-index:1;
86
+ font-family:'Orbitron',monospace;font-size:11px;font-weight:500;
87
+ letter-spacing:8px;color:rgba(0,212,255,.6);
88
+ animation:labelPulse 1s ease-in-out infinite alternate;
89
+ }
90
+ @keyframes labelPulse{0%{opacity:.4}100%{opacity:1}}
91
+ .warp-progress{
92
+ position:relative;z-index:1;
93
+ width:200px;height:1px;
94
+ background:rgba(255,255,255,.06);
95
+ overflow:hidden;
96
+ }
97
+ .warp-bar{
98
+ height:100%;width:0%;
99
+ background:linear-gradient(90deg,var(--echo),var(--vexa));
100
+ box-shadow:0 0 12px var(--echo);
101
+ animation:warpLoad 3.5s cubic-bezier(.4,0,.6,1) forwards;
102
+ }
103
+ @keyframes warpLoad{0%{width:0%}100%{width:100%}}
104
+
105
+ /* ═══════════════════════════════════════
106
+ SPACE BACKGROUND + PARALLAX
107
+ ═══════════════════════════════════════ */
108
+ #space-canvas{
109
+ position:fixed;top:0;left:0;width:100%;height:100%;
110
+ z-index:0;pointer-events:none;
111
+ }
112
+
113
+ /* Atmosphere entry glow — top of page */
114
+ .atmo-glow{
115
+ position:fixed;top:-80px;left:50%;transform:translateX(-50%);
116
+ width:900px;height:260px;
117
+ background:radial-gradient(ellipse 70% 100% at 50% 0%,rgba(0,212,255,.06) 0%,transparent 70%);
118
+ pointer-events:none;z-index:1;
119
+ animation:atmoBreath 6s ease-in-out infinite alternate;
120
+ }
121
+ @keyframes atmoBreath{
122
+ 0%{opacity:.7;transform:translateX(-50%) scaleX(1)}
123
+ 100%{opacity:1;transform:translateX(-50%) scaleX(1.12)}
124
+ }
125
+
126
+ /* Planet glow far below — parallax anchor */
127
+ .planet-glow{
128
+ position:fixed;bottom:-300px;left:50%;transform:translateX(-50%);
129
+ width:1400px;height:700px;
130
+ background:radial-gradient(ellipse 60% 80% at 50% 100%,rgba(80,90,200,.08) 0%,rgba(0,212,255,.04) 40%,transparent 70%);
131
+ pointer-events:none;z-index:1;
132
+ }
133
+
134
+ /* Noise */
135
+ body::after{
136
+ content:'';position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.025;
137
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
138
+ }
139
+
140
+ /* ═══════════════════════════════════════
141
+ PAGE LAYOUT
142
+ ═══════════════════════════════════════ */
143
+ .page{position:relative;z-index:2;opacity:0;animation:pageReveal .8s ease 4.2s forwards}
144
+ @keyframes pageReveal{to{opacity:1}}
145
+
146
+ /* ═══════════════════════════════════════
147
+ NAV
148
+ ═══════════════════════════════════════ */
149
+ nav{
150
+ position:fixed;top:0;left:0;right:0;z-index:500;
151
+ padding:22px 52px;
152
+ display:flex;align-items:center;justify-content:space-between;
153
+ transition:all .4s;
154
+ }
155
+ nav.scrolled{
156
+ background:rgba(2,3,8,.88);
157
+ backdrop-filter:blur(24px);
158
+ border-bottom:1px solid var(--edge);
159
+ }
160
+ .nav-left{display:flex;align-items:center;gap:14px}
161
+ .nav-badge{
162
+ font-family:'Fira Code',monospace;font-size:8px;letter-spacing:3px;
163
+ color:rgba(0,212,255,.5);border:1px solid rgba(0,212,255,.2);
164
+ padding:4px 10px;
165
+ }
166
+ .nav-brand{
167
+ font-family:'Orbitron',monospace;font-size:13px;font-weight:700;
168
+ letter-spacing:5px;
169
+ background:linear-gradient(135deg,var(--crystal1),var(--crystal2));
170
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
171
+ }
172
+ .nav-right{display:flex;gap:32px;align-items:center}
173
+ .nav-links{display:flex;gap:28px;list-style:none}
174
+ .nav-links a{
175
+ font-family:'Orbitron',monospace;font-size:8px;letter-spacing:3px;
176
+ color:var(--ghost);text-decoration:none;transition:color .2s;text-transform:uppercase;
177
+ }
178
+ .nav-links a:hover{color:var(--echo)}
179
+ .nav-hf{
180
+ font-family:'Fira Code',monospace;font-size:8px;letter-spacing:2px;
181
+ color:var(--echo);border:1px solid rgba(0,212,255,.25);
182
+ padding:8px 18px;text-decoration:none;transition:all .2s;
183
+ }
184
+ .nav-hf:hover{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.5)}
185
+
186
+ /* ═══════════════════════════════════════
187
+ HERO — SPACE LANDING
188
+ ═══════════════════════════════════════ */
189
+ .hero{
190
+ min-height:100vh;
191
+ display:flex;flex-direction:column;
192
+ align-items:center;justify-content:center;
193
+ padding:140px 52px 80px;
194
+ position:relative;text-align:center;
195
+ overflow:hidden;
196
+ }
197
+
198
+ /* Descent grid lines — perspective grid rushing up */
199
+ .descent-grid{
200
+ position:absolute;inset:0;pointer-events:none;overflow:hidden;
201
+ perspective:600px;
202
+ }
203
+ .grid-plane{
204
+ position:absolute;bottom:-60%;left:-40%;right:-40%;height:160%;
205
+ background-image:
206
+ linear-gradient(to right,rgba(0,212,255,.05) 1px,transparent 1px),
207
+ linear-gradient(to bottom,rgba(0,212,255,.05) 1px,transparent 1px);
208
+ background-size:80px 80px;
209
+ transform:rotateX(72deg);
210
+ animation:gridRush 8s linear infinite;
211
+ }
212
+ @keyframes gridRush{
213
+ from{background-position:0 0}
214
+ to{background-position:0 160px}
215
+ }
216
+
217
+ /* Atmosphere rings coming up from below */
218
+ .atmo-ring{
219
+ position:absolute;
220
+ border-radius:50%;
221
+ border:1px solid;
222
+ pointer-events:none;
223
+ animation:ringAscend linear infinite;
224
+ opacity:0;
225
+ }
226
+ @keyframes ringAscend{
227
+ 0% {transform:translateY(120vh) scale(.2);opacity:0}
228
+ 10% {opacity:.4}
229
+ 80% {opacity:.15}
230
+ 100%{transform:translateY(-20vh) scale(2.5);opacity:0}
231
+ }
232
+
233
+ /* Logo wrapper */
234
+ .hero-logo-wrap{
235
+ position:relative;
236
+ margin-bottom:52px;
237
+ animation:logoLand 1.2s cubic-bezier(.22,1,.36,1) 4.4s both;
238
+ }
239
+ @keyframes logoLand{
240
+ from{opacity:0;transform:translateY(-60px) scale(.7)}
241
+ to {opacity:1;transform:translateY(0) scale(1)}
242
+ }
243
+ /* Impact shockwave on land */
244
+ .hero-logo-wrap::after{
245
+ content:'';
246
+ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
247
+ width:0;height:0;border-radius:50%;
248
+ border:2px solid rgba(0,212,255,.6);
249
+ animation:shockwave 1.4s ease-out 5.4s forwards;
250
+ pointer-events:none;
251
+ }
252
+ @keyframes shockwave{
253
+ 0% {width:0;height:0;opacity:.9}
254
+ 100%{width:600px;height:600px;opacity:0}
255
+ }
256
+
257
+ .hero-eyebrow{
258
+ font-family:'Fira Code',monospace;font-size:9px;letter-spacing:6px;
259
+ color:rgba(0,212,255,.55);margin-bottom:24px;
260
+ display:flex;align-items:center;justify-content:center;gap:16px;
261
+ animation:fadeUp .8s ease 4.8s both;
262
+ }
263
+ .hero-eyebrow::before,.hero-eyebrow::after{
264
+ content:'';width:40px;height:1px;
265
+ background:linear-gradient(90deg,transparent,var(--echo));
266
+ }
267
+ .hero-eyebrow::after{transform:scaleX(-1)}
268
+
269
+ .hero-h1{
270
+ font-family:'Orbitron',monospace;
271
+ font-size:clamp(48px,8vw,110px);
272
+ font-weight:900;line-height:.95;
273
+ letter-spacing:-2px;
274
+ color:var(--bright);
275
+ margin-bottom:18px;
276
+ animation:fadeUp .9s ease 5s both;
277
+ }
278
+ .hero-h1 .o-glow{
279
+ background:linear-gradient(135deg,var(--crystal1) 0%,#fff 35%,var(--crystal2) 65%,var(--crystal3) 100%);
280
+ background-size:300% 100%;
281
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
282
+ animation:nameShimmer 5s linear infinite 5.2s;
283
+ filter:drop-shadow(0 0 30px rgba(80,180,255,.4));
284
+ }
285
+ @keyframes nameShimmer{
286
+ 0%{background-position:300% 0}100%{background-position:-300% 0}
287
+ }
288
+
289
+ .hero-tagline{
290
+ font-family:'Raleway',sans-serif;font-size:clamp(13px,1.6vw,18px);
291
+ font-weight:200;font-style:italic;letter-spacing:4px;
292
+ color:var(--ghost);margin-bottom:56px;
293
+ animation:fadeUp .8s ease 5.2s both;
294
+ }
295
+
296
+ .hero-pillars{
297
+ display:flex;gap:2px;margin-bottom:64px;
298
+ animation:fadeUp .8s ease 5.4s both;
299
+ }
300
+ .pillar-chip{
301
+ padding:12px 32px;
302
+ font-family:'Orbitron',monospace;font-size:10px;font-weight:600;letter-spacing:4px;
303
+ border:1px solid;position:relative;overflow:hidden;
304
+ transition:all .3s;
305
+ }
306
+ .pillar-chip::before{
307
+ content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
308
+ }
309
+ .pillar-chip:hover::before{opacity:1}
310
+ .pillar-chip:hover{transform:translateY(-3px)}
311
+ .chip-echo{
312
+ color:var(--echo);border-color:rgba(0,212,255,.3);
313
+ background:rgba(0,212,255,.04);
314
+ }
315
+ .chip-echo::before{background:linear-gradient(135deg,rgba(0,212,255,.08),transparent)}
316
+ .chip-echo:hover{box-shadow:0 0 30px rgba(0,212,255,.15),0 8px 32px rgba(0,212,255,.1)}
317
+ .chip-vexa{
318
+ color:var(--vexa);border-color:rgba(168,85,247,.3);
319
+ background:rgba(168,85,247,.04);
320
+ }
321
+ .chip-vexa::before{background:linear-gradient(135deg,rgba(168,85,247,.08),transparent)}
322
+ .chip-vexa:hover{box-shadow:0 0 30px rgba(168,85,247,.15),0 8px 32px rgba(168,85,247,.1)}
323
+
324
+ .hero-desc{
325
+ font-size:15px;font-weight:300;line-height:2.2;color:var(--text);
326
+ max-width:620px;margin:0 auto 52px;
327
+ animation:fadeUp .8s ease 5.6s both;
328
+ }
329
+ .hero-desc strong{color:var(--bright);font-weight:500}
330
+
331
+ .hero-cta{
332
+ display:flex;gap:14px;justify-content:center;
333
+ animation:fadeUp .8s ease 5.8s both;
334
+ }
335
+ .btn-primary{
336
+ padding:14px 40px;
337
+ background:linear-gradient(135deg,var(--echo),var(--vexa));
338
+ border:none;cursor:none;
339
+ font-family:'Orbitron',monospace;font-size:9px;font-weight:700;letter-spacing:4px;
340
+ color:var(--void);text-transform:uppercase;
341
+ position:relative;overflow:hidden;transition:all .3s;
342
+ clip-path:polygon(10px 0%,100% 0%,calc(100% - 10px) 100%,0% 100%);
343
+ }
344
+ .btn-primary::after{
345
+ content:'';position:absolute;inset:0;
346
+ background:linear-gradient(135deg,var(--gold),var(--lime));
347
+ opacity:0;transition:opacity .3s;
348
+ }
349
+ .btn-primary span{position:relative;z-index:1}
350
+ .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,212,255,.22)}
351
+ .btn-primary:hover::after{opacity:1}
352
+ .btn-ghost{
353
+ padding:14px 32px;background:transparent;
354
+ border:1px solid var(--edge);cursor:none;
355
+ font-family:'Orbitron',monospace;font-size:9px;font-weight:500;letter-spacing:3px;
356
+ color:var(--ghost);text-transform:uppercase;transition:all .2s;
357
+ }
358
+ .btn-ghost:hover{border-color:var(--edge2);color:var(--bright)}
359
+
360
+ /* Scroll indicator */
361
+ .scroll-ind{
362
+ position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
363
+ display:flex;flex-direction:column;align-items:center;gap:8px;
364
+ animation:fadeUp .8s ease 6.2s both;
365
+ }
366
+ .scroll-line{
367
+ width:1px;height:48px;
368
+ background:linear-gradient(to bottom,transparent,var(--echo),transparent);
369
+ animation:scrollPulse 2s ease-in-out infinite;
370
+ }
371
+ @keyframes scrollPulse{
372
+ 0%,100%{opacity:.3;transform:scaleY(1)}
373
+ 50%{opacity:.8;transform:scaleY(1.3)}
374
+ }
375
+ .scroll-txt{
376
+ font-family:'Fira Code',monospace;font-size:7px;letter-spacing:4px;
377
+ color:var(--ghost);transform:rotate(90deg);white-space:nowrap;margin-top:8px;
378
+ }
379
+
380
+ @keyframes fadeUp{
381
+ from{opacity:0;transform:translateY(20px)}
382
+ to{opacity:1;transform:translateY(0)}
383
+ }
384
+
385
+ /* ═══════════════════════════════════════
386
+ SECTION BASE
387
+ ═══════════════════════════════════════ */
388
+ .wrap{max-width:1160px;margin:0 auto;padding:0 52px}
389
+ .section{
390
+ padding:140px 0;
391
+ opacity:0;transform:translateY(40px);
392
+ transition:opacity .9s ease,transform .9s ease;
393
+ }
394
+ .section.vis{opacity:1;transform:translateY(0)}
395
+
396
+ .s-tag{
397
+ font-family:'Fira Code',monospace;font-size:8.5px;letter-spacing:6px;
398
+ color:var(--ghost);margin-bottom:14px;text-transform:uppercase;
399
+ display:flex;align-items:center;gap:14px;
400
+ }
401
+ .s-tag::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
402
+ .s-title{
403
+ font-family:'Orbitron',monospace;
404
+ font-size:clamp(32px,4vw,56px);
405
+ font-weight:800;color:var(--bright);
406
+ line-height:1.1;margin-bottom:20px;letter-spacing:-1px;
407
+ }
408
+ .s-title .acc-echo{color:var(--echo);text-shadow:0 0 30px rgba(0,212,255,.3)}
409
+ .s-title .acc-vexa{color:var(--vexa);text-shadow:0 0 30px rgba(168,85,247,.3)}
410
+ .s-intro{
411
+ font-size:14px;font-weight:300;line-height:2.1;
412
+ color:var(--text);max-width:560px;margin-bottom:64px;
413
+ }
414
+
415
+ /* ═══════════════════════════════════════
416
+ ECHO SECTION
417
+ ═══════════════════════════════════════ */
418
+ .echo-grid{
419
+ display:grid;grid-template-columns:1fr 440px;
420
+ gap:80px;align-items:start;
421
+ }
422
+
423
+ .echo-visual{
424
+ position:relative;width:440px;height:440px;
425
+ flex-shrink:0;
426
+ }
427
+ /* Waveform rings for Echo */
428
+ .echo-ring{
429
+ position:absolute;top:50%;left:50%;
430
+ border-radius:50%;border:1px solid rgba(0,212,255,.2);
431
+ transform:translate(-50%,-50%);
432
+ animation:echoRingPulse linear infinite;
433
+ }
434
+ @keyframes echoRingPulse{
435
+ 0%{transform:translate(-50%,-50%) scale(.6);opacity:.6}
436
+ 100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}
437
+ }
438
+ .echo-core{
439
+ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
440
+ width:140px;height:140px;border-radius:50%;
441
+ background:radial-gradient(circle,rgba(0,212,255,.15) 0%,rgba(0,212,255,.04) 50%,transparent 70%);
442
+ border:1px solid rgba(0,212,255,.35);
443
+ display:flex;align-items:center;justify-content:center;
444
+ animation:echoCorePulse 3s ease-in-out infinite;
445
+ }
446
+ @keyframes echoCorePulse{
447
+ 0%,100%{box-shadow:0 0 20px rgba(0,212,255,.15),0 0 60px rgba(0,212,255,.06)}
448
+ 50%{box-shadow:0 0 40px rgba(0,212,255,.3),0 0 100px rgba(0,212,255,.12)}
449
+ }
450
+ .echo-waveform{
451
+ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
452
+ width:300px;height:60px;overflow:hidden;
453
+ }
454
+ .echo-bars{
455
+ display:flex;gap:3px;align-items:center;justify-content:center;height:100%;
456
+ }
457
+ .echo-bar{
458
+ width:3px;border-radius:2px;
459
+ background:linear-gradient(to top,rgba(0,212,255,.2),rgba(0,212,255,.8));
460
+ animation:barDance linear infinite;
461
+ }
462
+ @keyframes barDance{
463
+ 0%,100%{height:8px;opacity:.4}
464
+ 50%{height:var(--h,30px);opacity:1}
465
+ }
466
+
467
+ .echo-features{display:flex;flex-direction:column;gap:2px}
468
+ .feat-row{
469
+ display:grid;grid-template-columns:48px 1fr;
470
+ gap:20px;align-items:start;padding:24px 28px;
471
+ background:var(--panel);border:1px solid var(--edge);
472
+ position:relative;overflow:hidden;transition:all .3s;
473
+ }
474
+ .feat-row::before{
475
+ content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
476
+ background:linear-gradient(to bottom,transparent,var(--echo),transparent);
477
+ transform:scaleY(0);transform-origin:center;transition:transform .4s;
478
+ }
479
+ .feat-row::after{
480
+ content:'';position:absolute;inset:0;
481
+ background:linear-gradient(90deg,rgba(0,212,255,.025),transparent 40%);
482
+ opacity:0;transition:opacity .3s;
483
+ }
484
+ .feat-row:hover{border-color:rgba(0,212,255,.14)}
485
+ .feat-row:hover::before{transform:scaleY(1)}
486
+ .feat-row:hover::after{opacity:1}
487
+ .feat-icon{
488
+ font-family:'Orbitron',monospace;font-size:22px;font-weight:700;
489
+ color:rgba(0,212,255,.4);line-height:1;padding-top:2px;
490
+ }
491
+ .feat-title{
492
+ font-family:'Orbitron',monospace;font-size:12px;font-weight:700;
493
+ color:var(--bright);letter-spacing:1px;margin-bottom:7px;
494
+ }
495
+ .feat-body{font-size:12px;font-weight:300;line-height:1.9;color:var(--text)}
496
+ .feat-tag{
497
+ font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:3px;
498
+ color:rgba(0,212,255,.5);margin-top:8px;
499
+ }
500
+
501
+ /* ═══════════════════════════════════════
502
+ VEXA SECTION
503
+ ═══════════════════════════════════════ */
504
+ .vexa-grid{
505
+ display:grid;grid-template-columns:440px 1fr;
506
+ gap:80px;align-items:start;
507
+ }
508
+
509
+ /* Crystal formation animation for Vexa */
510
+ .vexa-visual{
511
+ position:relative;width:440px;height:440px;
512
+ display:flex;align-items:center;justify-content:center;
513
+ }
514
+ .vexa-crystal-wrap{
515
+ animation:vexaCrystalBreath 5s ease-in-out infinite;
516
+ filter:drop-shadow(0 0 30px rgba(168,85,247,.2)) drop-shadow(0 0 80px rgba(168,85,247,.08));
517
+ }
518
+ @keyframes vexaCrystalBreath{
519
+ 0%,100%{filter:drop-shadow(0 0 25px rgba(168,85,247,.18)) drop-shadow(0 0 70px rgba(168,85,247,.07))}
520
+ 50%{filter:drop-shadow(0 0 50px rgba(168,85,247,.3)) drop-shadow(0 0 120px rgba(168,85,247,.12))}
521
+ }
522
+ /* Orbiting particle ring for Vexa (CSS not SVG) */
523
+ .vexa-orbit{
524
+ position:absolute;top:50%;left:50%;
525
+ transform:translate(-50%,-50%);
526
+ width:380px;height:380px;
527
+ border-radius:50%;
528
+ border:1px solid rgba(168,85,247,.08);
529
+ animation:vexaOrbit 20s linear infinite;
530
+ }
531
+ @keyframes vexaOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
532
+ .vexa-orbit-dot{
533
+ position:absolute;top:-3px;left:50%;transform:translateX(-50%);
534
+ width:6px;height:6px;border-radius:50%;
535
+ background:var(--vexa);
536
+ box-shadow:0 0 10px var(--vexa),0 0 20px rgba(168,85,247,.4);
537
+ }
538
+ .vexa-orbit2{
539
+ position:absolute;top:50%;left:50%;
540
+ transform:translate(-50%,-50%);
541
+ width:310px;height:310px;
542
+ border-radius:50%;
543
+ border:1px solid rgba(168,85,247,.06);
544
+ animation:vexaOrbit 14s linear infinite reverse;
545
+ }
546
+ .vexa-orbit2-dot{
547
+ position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
548
+ width:5px;height:5px;border-radius:50%;
549
+ background:var(--crystal3);
550
+ box-shadow:0 0 8px var(--crystal3);
551
+ }
552
+
553
+ .vexa-phases{display:flex;flex-direction:column;gap:2px}
554
+ .phase-row{
555
+ display:grid;grid-template-columns:80px 1fr;
556
+ gap:20px;align-items:start;padding:22px 28px;
557
+ background:var(--panel);border:1px solid var(--edge);
558
+ position:relative;overflow:hidden;transition:all .3s;
559
+ }
560
+ .phase-row::before{
561
+ content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
562
+ background:linear-gradient(to bottom,transparent,var(--vexa),transparent);
563
+ transform:scaleY(0);transform-origin:center;transition:transform .4s;
564
+ }
565
+ .phase-row::after{
566
+ content:'';position:absolute;inset:0;
567
+ background:linear-gradient(90deg,rgba(168,85,247,.025),transparent 40%);
568
+ opacity:0;transition:opacity .3s;
569
+ }
570
+ .phase-row:hover{border-color:rgba(168,85,247,.14)}
571
+ .phase-row:hover::before{transform:scaleY(1)}
572
+ .phase-row:hover::after{opacity:1}
573
+ .phase-num{
574
+ font-family:'Orbitron',monospace;font-size:28px;font-weight:900;
575
+ color:rgba(168,85,247,.25);line-height:1;
576
+ }
577
+ .phase-title{
578
+ font-family:'Orbitron',monospace;font-size:11px;font-weight:700;
579
+ color:var(--bright);letter-spacing:1px;margin-bottom:7px;
580
+ }
581
+ .phase-body{font-size:12px;font-weight:300;line-height:1.9;color:var(--text)}
582
+ .phase-meta{
583
+ font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:3px;
584
+ color:rgba(168,85,247,.5);margin-top:8px;
585
+ }
586
+
587
+ /* ═══════════════════════════════════════
588
+ ORENTHAL VISION PANEL
589
+ ═══════════════════════════════════════ */
590
+ .vision-wrap{
591
+ position:relative;
592
+ background:var(--panel);border:1px solid var(--edge);
593
+ overflow:hidden;
594
+ }
595
+ .vision-wrap::before{
596
+ content:'';position:absolute;top:0;left:0;right:0;height:1px;
597
+ background:linear-gradient(90deg,transparent,var(--echo),var(--vexa),var(--crystal3),transparent);
598
+ animation:topRuleShimmer 4s linear infinite;
599
+ }
600
+ @keyframes topRuleShimmer{
601
+ 0%{background-position:0% 0}
602
+ 100%{background-position:200% 0}
603
+ }
604
+ /* Animated constellation bg */
605
+ .vision-wrap::after{
606
+ content:'';position:absolute;inset:0;
607
+ background:
608
+ radial-gradient(ellipse 45% 60% at 5% 50%,rgba(0,212,255,.03) 0%,transparent 60%),
609
+ radial-gradient(ellipse 45% 60% at 95% 50%,rgba(168,85,247,.03) 0%,transparent 60%);
610
+ pointer-events:none;
611
+ }
612
+ .vision-inner{
613
+ display:grid;grid-template-columns:1fr 1fr 1fr;
614
+ gap:0;
615
+ }
616
+ .vision-col{
617
+ padding:60px 48px;
618
+ position:relative;
619
+ }
620
+ .vision-col:not(:last-child)::after{
621
+ content:'';position:absolute;top:40px;right:0;bottom:40px;width:1px;
622
+ background:linear-gradient(to bottom,transparent,var(--edge),transparent);
623
+ }
624
+ .v-icon{font-size:28px;margin-bottom:18px}
625
+ .v-title{
626
+ font-family:'Orbitron',monospace;font-size:14px;font-weight:700;
627
+ color:var(--bright);letter-spacing:1px;margin-bottom:12px;
628
+ line-height:1.3;
629
+ }
630
+ .v-body{font-size:12.5px;font-weight:300;line-height:2;color:var(--text)}
631
+ .v-stat{
632
+ font-family:'Orbitron',monospace;font-size:36px;font-weight:900;
633
+ margin-top:18px;line-height:1;
634
+ }
635
+
636
+ /* ═══════════════════════════════════════
637
+ MATRIX.CORP LINEAGE
638
+ ═══════════════════════════════════════ */
639
+ .lineage-table{
640
+ width:100%;border-collapse:separate;border-spacing:0 2px;
641
+ }
642
+ .lineage-row{
643
+ transition:all .2s;
644
+ }
645
+ .lineage-row td{
646
+ padding:16px 22px;
647
+ background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
648
+ font-size:12px;font-weight:300;color:var(--text);
649
+ transition:all .2s;
650
+ }
651
+ .lineage-row td:first-child{
652
+ border-left:1px solid var(--edge);
653
+ font-family:'Orbitron',monospace;font-size:12px;font-weight:700;color:var(--bright);
654
+ border-right:none;
655
+ }
656
+ .lineage-row td:last-child{border-right:1px solid var(--edge)}
657
+ .lineage-row:hover td{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
658
+ .lineage-row:hover td:first-child{color:var(--echo)}
659
+ .badge{
660
+ display:inline-flex;align-items:center;gap:6px;
661
+ font-family:'Fira Code',monospace;font-size:7.5px;letter-spacing:2px;
662
+ padding:3px 10px;border:1px solid;
663
+ }
664
+ .b-live{color:var(--echo);border-color:rgba(0,212,255,.3)}
665
+ .b-preview{color:var(--gold);border-color:rgba(251,191,36,.3)}
666
+ .b-planned{color:var(--vexa);border-color:rgba(168,85,247,.3)}
667
+ .b-road{color:var(--text);border-color:var(--edge)}
668
+ .bdot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:bdot 2s ease-in-out infinite}
669
+ @keyframes bdot{0%,100%{opacity:1}50%{opacity:.3}}
670
+
671
+ /* ═══════════════════════════════════════
672
+ CLOSING
673
+ ═══════════════════════════════════════ */
674
+ .closing{
675
+ padding:140px 0 120px;text-align:center;
676
+ position:relative;
677
+ }
678
+ .closing::before{
679
+ content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
680
+ width:700px;height:700px;
681
+ background:radial-gradient(circle,rgba(0,212,255,.035) 0%,rgba(168,85,247,.02) 40%,transparent 70%);
682
+ pointer-events:none;
683
+ }
684
+ .closing-pre{
685
+ font-family:'Fira Code',monospace;font-size:9px;letter-spacing:6px;
686
+ color:var(--ghost);margin-bottom:20px;
687
+ }
688
+ .closing-h{
689
+ font-family:'Orbitron',monospace;
690
+ font-size:clamp(40px,5.5vw,72px);
691
+ font-weight:900;color:var(--bright);
692
+ line-height:1.05;margin-bottom:22px;letter-spacing:-1px;
693
+ }
694
+ .closing-h .ce{
695
+ background:linear-gradient(135deg,var(--echo),#fff 35%,var(--vexa));
696
+ background-size:200% 100%;
697
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
698
+ animation:nameShimmer 4s linear infinite;
699
+ }
700
+ .closing-sub{
701
+ font-size:14px;font-weight:300;line-height:2;color:var(--text);
702
+ max-width:480px;margin:0 auto 52px;
703
+ }
704
+ .closing-acts{display:flex;gap:14px;justify-content:center}
705
+
706
+ /* ═══════════════════════════════════════
707
+ FOOTER
708
+ ═══════════════════════════════════════ */
709
+ footer{
710
+ border-top:1px solid var(--edge);
711
+ padding:48px 52px;
712
+ display:grid;grid-template-columns:220px 1fr auto;
713
+ align-items:start;gap:48px;
714
+ }
715
+ .foot-name{
716
+ font-family:'Orbitron',monospace;font-size:13px;font-weight:800;
717
+ letter-spacing:4px;color:var(--bright);margin-bottom:6px;
718
+ }
719
+ .foot-sub{font-family:'Fira Code',monospace;font-size:8px;letter-spacing:3px;color:var(--ghost);margin-bottom:14px}
720
+ .foot-copy{font-family:'Fira Code',monospace;font-size:7.5px;color:var(--ghost);letter-spacing:1px;line-height:2}
721
+ .foot-links{display:flex;gap:28px;flex-wrap:wrap;padding-top:3px}
722
+ .foot-links a{font-size:9.5px;letter-spacing:2px;color:var(--ghost);text-decoration:none;font-weight:300;transition:color .2s}
723
+ .foot-links a:hover{color:var(--bright)}
724
+ .foot-hf{
725
+ font-family:'Fira Code',monospace;font-size:9px;letter-spacing:3px;
726
+ color:var(--ghost);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:color .2s;
727
+ }
728
+ .foot-hf:hover{color:var(--echo)}
729
+
730
+ @media(max-width:900px){
731
+ .echo-grid,.vexa-grid{grid-template-columns:1fr}
732
+ .echo-visual,.vexa-visual{display:none}
733
+ .vision-inner{grid-template-columns:1fr}
734
+ .vision-col::after{display:none}
735
+ footer{grid-template-columns:1fr}
736
+ nav .nav-links{display:none}
737
+ .closing-acts{flex-direction:column;align-items:center}
738
+ }
739
+ </style>
740
+ </head>
741
+ <body>
742
+
743
+ <!-- RETICLE CURSOR -->
744
+ <div id="reticle">
745
+ <svg viewBox="0 0 36 36" fill="none">
746
+ <circle cx="18" cy="18" r="14" stroke="rgba(0,212,255,.35)" stroke-width="1" stroke-dasharray="4 8"/>
747
+ <line x1="18" y1="2" x2="18" y2="8" stroke="rgba(0,212,255,.7)" stroke-width="1"/>
748
+ <line x1="18" y1="28" x2="18" y2="34" stroke="rgba(0,212,255,.7)" stroke-width="1"/>
749
+ <line x1="2" y1="18" x2="8" y2="18" stroke="rgba(0,212,255,.7)" stroke-width="1"/>
750
+ <line x1="28" y1="18" x2="34" y2="18" stroke="rgba(0,212,255,.7)" stroke-width="1"/>
751
+ <circle cx="18" cy="18" r="1.5" fill="rgba(0,212,255,.6)"/>
752
+ <polygon points="18,5 19.2,7.5 18,7 16.8,7.5" fill="rgba(0,212,255,.5)"/>
753
+ </svg>
754
+ </div>
755
+ <div id="reticle-dot"></div>
756
+
757
+ <!-- WARP INTRO -->
758
+ <div id="warp-overlay">
759
+ <canvas id="warp-canvas"></canvas>
760
+ <div class="warp-label">APPROACHING ORENTHAL SYSTEM</div>
761
+ <div class="warp-progress"><div class="warp-bar"></div></div>
762
+ </div>
763
+
764
+ <!-- SPACE BACKGROUND -->
765
+ <canvas id="space-canvas"></canvas>
766
+ <div class="atmo-glow"></div>
767
+ <div class="planet-glow"></div>
768
+
769
+ <div class="page">
770
+
771
+ <!-- NAV -->
772
+ <nav id="mainNav">
773
+ <div class="nav-left">
774
+ <div class="nav-badge">MATRIX.CORP</div>
775
+ <div class="nav-brand">ORENTHAL</div>
776
+ </div>
777
+ <div class="nav-right">
778
+ <ul class="nav-links">
779
+ <li><a href="#echo">ECHO</a></li>
780
+ <li><a href="#vexa">Vexa</a></li>
781
+ <li><a href="#lineage">Models</a></li>
782
+ <li><a href="#vision">Vision</a></li>
783
+ </ul>
784
+ <a class="nav-hf" href="https://huggingface.co/Matrix-Corp" target="_blank">HuggingFace ↗</a>
785
+ </div>
786
+ </nav>
787
+
788
+ <!-- ═══════ HERO ═══════ -->
789
+ <section class="hero" id="top">
790
+ <!-- Descent grid -->
791
+ <div class="descent-grid">
792
+ <div class="grid-plane"></div>
793
+ </div>
794
+
795
+ <!-- Atmosphere rings rising up -->
796
+ <div class="atmo-ring" style="width:300px;height:300px;border-color:rgba(0,212,255,.15);bottom:-10%;left:calc(50% - 150px);animation-duration:6s;animation-delay:0s"></div>
797
+ <div class="atmo-ring" style="width:500px;height:500px;border-color:rgba(0,212,255,.1);bottom:-10%;left:calc(50% - 250px);animation-duration:7s;animation-delay:1.5s"></div>
798
+ <div class="atmo-ring" style="width:700px;height:700px;border-color:rgba(168,85,247,.08);bottom:-10%;left:calc(50% - 350px);animation-duration:8s;animation-delay:3s"></div>
799
+ <div class="atmo-ring" style="width:900px;height:900px;border-color:rgba(0,212,255,.05);bottom:-10%;left:calc(50% - 450px);animation-duration:9s;animation-delay:4.5s"></div>
800
+
801
+ <!-- LOGO -->
802
+ <div class="hero-logo-wrap">
803
+ <svg width="160" height="175" viewBox="0 0 500 520" fill="none" xmlns="http://www.w3.org/2000/svg">
804
+ <defs>
805
+ <linearGradient id="hcg1" x1="0%" y1="0%" x2="100%" y2="100%">
806
+ <stop offset="0%" stop-color="#50b4ff" stop-opacity=".95"/>
807
+ <stop offset="28%" stop-color="#a080ff" stop-opacity=".85"/>
808
+ <stop offset="62%" stop-color="#ffd050" stop-opacity=".75"/>
809
+ <stop offset="100%" stop-color="#50b4ff" stop-opacity=".55"/>
810
+ </linearGradient>
811
+ <linearGradient id="hcg2" x1="100%" y1="0%" x2="0%" y2="100%">
812
+ <stop offset="0%" stop-color="#f080a0" stop-opacity=".65"/>
813
+ <stop offset="100%" stop-color="#a0d4ff" stop-opacity=".7"/>
814
+ </linearGradient>
815
+ <linearGradient id="hcg3" x1="50%" y1="0%" x2="50%" y2="100%">
816
+ <stop offset="0%" stop-color="#a0f0b0" stop-opacity=".48"/>
817
+ <stop offset="100%" stop-color="#ffd050" stop-opacity=".22"/>
818
+ </linearGradient>
819
+ <linearGradient id="hcgE" x1="0%" y1="0%" x2="100%" y2="100%">
820
+ <stop offset="0%" stop-color="#50b4ff"/>
821
+ <stop offset="100%" stop-color="#a080ff"/>
822
+ </linearGradient>
823
+ <radialGradient id="hcgA" cx="50%" cy="46%" r="48%">
824
+ <stop offset="0%" stop-color="#50b4ff" stop-opacity=".07"/>
825
+ <stop offset="100%" stop-color="transparent"/>
826
+ </radialGradient>
827
+ <radialGradient id="hcgB" cx="50%" cy="44%" r="28%">
828
+ <stop offset="0%" stop-color="white" stop-opacity=".92"/>
829
+ <stop offset="32%" stop-color="#50b4ff" stop-opacity=".42"/>
830
+ <stop offset="100%" stop-color="transparent"/>
831
+ </radialGradient>
832
+ <radialGradient id="hcgP" cx="50%" cy="50%" r="50%">
833
+ <stop offset="0%" stop-color="#50b4ff" stop-opacity=".58">
834
+ <animate attributeName="stop-opacity" values=".58;1;.58" dur="3.8s" repeatCount="indefinite"/>
835
+ </stop>
836
+ <stop offset="100%" stop-color="transparent"/>
837
+ <animate attributeName="r" values="35%;62%;35%" dur="3.8s" repeatCount="indefinite"/>
838
+ </radialGradient>
839
+ <filter id="hcglow" x="-40%" y="-40%" width="180%" height="180%">
840
+ <feGaussianBlur stdDeviation="5" result="b"/>
841
+ <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
842
+ </filter>
843
+ <filter id="hcsoft" x="-18%" y="-18%" width="136%" height="136%">
844
+ <feGaussianBlur stdDeviation="4.5" result="b"/>
845
+ <feComposite in="b" in2="SourceGraphic" operator="over"/>
846
+ </filter>
847
+ <filter id="hvg" x="-60%" y="-60%" width="220%" height="220%">
848
+ <feGaussianBlur stdDeviation="3" result="b"/>
849
+ <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
850
+ </filter>
851
+ <linearGradient id="hshim" x1="0" y1="0" x2="500" y2="440" gradientUnits="userSpaceOnUse">
852
+ <stop offset="0%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values="-.35;1.15" dur="3.6s" repeatCount="indefinite"/></stop>
853
+ <stop offset="20%" stop-color="white" stop-opacity=".2"><animate attributeName="offset" values="-.15;1.35" dur="3.6s" repeatCount="indefinite"/></stop>
854
+ <stop offset="40%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values=".05;1.55" dur="3.6s" repeatCount="indefinite"/></stop>
855
+ </linearGradient>
856
+ <clipPath id="hcc"><polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90"/></clipPath>
857
+ <style>
858
+ .hlf-a{animation:hbf 4s ease-in-out infinite}
859
+ .hlf-b{animation:hbf 4s ease-in-out infinite .7s}
860
+ .hlf-c{animation:hbf 4s ease-in-out infinite 1.4s}
861
+ .hlf-d{animation:hbf 4s ease-in-out infinite 2.1s}
862
+ .hlf-e{animation:hbf 4s ease-in-out infinite 2.8s}
863
+ .hlf-f{animation:hbf 4s ease-in-out infinite 3.5s}
864
+ @keyframes hbf{0%,100%{opacity:.7}50%{opacity:1}}
865
+ .hir{animation:hrf 5s ease-in-out infinite}
866
+ @keyframes hrf{0%,100%{opacity:.28}40%{opacity:.55}70%{opacity:.22}}
867
+ .hcd{animation:hcb 3.8s ease-in-out infinite}
868
+ @keyframes hcb{0%,100%{r:5;opacity:.92}50%{r:7.5;opacity:1}}
869
+ .hfa{animation:hfA 5.8s ease-in-out infinite}
870
+ .hfb{animation:hfB 7.4s ease-in-out infinite}
871
+ .hfc{animation:hfA 6.6s ease-in-out infinite 1.3s}
872
+ .hfd{animation:hfB 8.2s ease-in-out infinite 2.2s}
873
+ .hfe{animation:hfA 9.3s ease-in-out infinite .7s}
874
+ .hff{animation:hfB 7.8s ease-in-out infinite 1.9s}
875
+ @keyframes hfA{0%,100%{transform:translateY(0) rotate(0deg);opacity:.42}50%{transform:translateY(-9px) rotate(14deg);opacity:.72}}
876
+ @keyframes hfB{0%,100%{transform:translateY(0) rotate(0deg);opacity:.36}50%{transform:translateY(8px) rotate(-11deg);opacity:.62}}
877
+ .hsp{animation:hspf 6s ease-in-out infinite}
878
+ .hsp2{animation:hspf 6s ease-in-out infinite 2s}
879
+ @keyframes hspf{0%,100%{opacity:.14}50%{opacity:.28}}
880
+ </style>
881
+ </defs>
882
+ <circle cx="250" cy="195" r="195" fill="url(#hcgA)" filter="url(#hcglow)"/>
883
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#hcg1)" opacity=".075"/>
884
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="none" stroke="url(#hcg1)" stroke-width="1.6" filter="url(#hcglow)"/>
885
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#hshim)" opacity=".55" clip-path="url(#hcc)"/>
886
+ <line x1="250" y1="18" x2="250" y2="354" stroke="rgba(80,180,255,.22)" stroke-width=".7"/>
887
+ <line x1="90" y1="198" x2="410" y2="198" stroke="rgba(255,255,255,.075)" stroke-width=".65"/>
888
+ <line x1="118" y1="90" x2="372" y2="308" stroke="rgba(255,255,255,.06)" stroke-width=".6"/>
889
+ <line x1="382" y1="90" x2="128" y2="308" stroke="rgba(255,255,255,.06)" stroke-width=".6"/>
890
+ <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="url(#hcg2)" opacity=".06"/>
891
+ <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="none" stroke="url(#hcg2)" stroke-width="1" opacity=".44" class="hir"/>
892
+ <polygon points="250,88 318,126 338,198 314,268 250,290 186,268 162,198 182,126" fill="none" stroke="rgba(255,210,80,.16)" stroke-width=".8" class="hir"/>
893
+ <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="url(#hcg3)" opacity=".32"/>
894
+ <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="none" stroke="white" stroke-width=".8" opacity=".26" class="hir"/>
895
+ <polygon points="250,122 304,154 250,193" fill="white" opacity=".065" class="hlf-a"/>
896
+ <polygon points="250,122 196,154 250,193" fill="rgba(80,180,255,.13)" class="hlf-b"/>
897
+ <polygon points="250,193 304,154 304,232" fill="rgba(160,128,255,.08)" class="hlf-c"/>
898
+ <polygon points="250,193 196,154 196,232" fill="rgba(255,210,80,.065)" class="hlf-d"/>
899
+ <polygon points="250,193 304,232 250,264" fill="rgba(240,128,160,.07)" class="hlf-e"/>
900
+ <polygon points="250,193 196,232 250,264" fill="rgba(160,240,176,.065)" class="hlf-f"/>
901
+ <line x1="250" y1="122" x2="250" y2="264" stroke="rgba(80,180,255,.3)" stroke-width=".65"/>
902
+ <line x1="196" y1="154" x2="304" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/>
903
+ <line x1="304" y1="154" x2="196" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/>
904
+ <circle cx="250" cy="193" r="46" fill="url(#hcgP)" filter="url(#hcglow)"/>
905
+ <circle cx="250" cy="193" r="60" fill="url(#hcgB)" filter="url(#hcsoft)" opacity=".75"/>
906
+ <circle cx="250" cy="193" fill="white" opacity=".97" filter="url(#hcglow)" class="hcd">
907
+ <animate attributeName="r" values="5;7.5;5" dur="3.8s" repeatCount="indefinite"/>
908
+ </circle>
909
+ <circle cx="250" cy="18" r="4.2" fill="#50b4ff" opacity=".95" filter="url(#hvg)"/>
910
+ <circle cx="382" cy="90" r="3.2" fill="#a080ff" opacity=".84"/>
911
+ <circle cx="410" cy="198" r="3.2" fill="#ffd050" opacity=".8"/>
912
+ <circle cx="372" cy="308" r="3.2" fill="#f080a0" opacity=".76"/>
913
+ <circle cx="250" cy="354" r="4.2" fill="#50b4ff" opacity=".9" filter="url(#hvg)"/>
914
+ <circle cx="128" cy="308" r="3.2" fill="#a0f0b0" opacity=".72"/>
915
+ <circle cx="90" cy="198" r="3.2" fill="#a0d4ff" opacity=".78"/>
916
+ <circle cx="118" cy="90" r="3.2" fill="#a080ff" opacity=".74"/>
917
+ <line x1="250" y1="18" x2="382" y2="90" stroke="#50b4ff" stroke-width="2.2" opacity=".54" filter="url(#hvg)"/>
918
+ <line x1="250" y1="18" x2="118" y2="90" stroke="#a0d4ff" stroke-width="1.3" opacity=".38"/>
919
+ <g class="hfa"><polygon points="406,58 412,67 406,76 400,67" fill="none" stroke="#50b4ff" stroke-width=".85" opacity=".44"/></g>
920
+ <g class="hfb"><polygon points="40,68 46,77 40,86 34,77" fill="none" stroke="#a080ff" stroke-width=".85" opacity=".38"/></g>
921
+ <g class="hfc"><polygon points="424,308 430,317 424,326 418,317" fill="none" stroke="#ffd050" stroke-width=".75" opacity=".35"/></g>
922
+ <g class="hfd"><polygon points="24,300 30,309 24,318 18,309" fill="none" stroke="#f080a0" stroke-width=".75" opacity=".32"/></g>
923
+ <g class="hfe"><polygon points="200,4 206,13 200,22 194,13" fill="none" stroke="#a0f0b0" stroke-width=".75" opacity=".36"/></g>
924
+ <g class="hff"><polygon points="296,375 302,384 296,393 290,384" fill="none" stroke="#a0d4ff" stroke-width=".75" opacity=".3"/></g>
925
+ <text x="250" y="408" text-anchor="middle" font-family="'Orbitron', monospace" font-size="26" font-weight="800" letter-spacing="10" fill="url(#hcgE)" opacity=".9">ORENTHAL</text>
926
+ <text x="250" y="430" text-anchor="middle" font-family="monospace" font-size="8" font-weight="300" letter-spacing="6" fill="rgba(160,180,255,.28)">FRONTIER INTELLIGENCE</text>
927
+ </svg>
928
+ </div>
929
+
930
+ <div class="hero-eyebrow">MATRIX.CORP PRESENTS</div>
931
+
932
+ <h1 class="hero-h1">
933
+ <span class="o-glow">ORENTHAL</span>
934
+ </h1>
935
+ <div class="hero-tagline">specialised intelligence · built from the frontier up</div>
936
+
937
+ <div class="hero-pillars">
938
+ <div class="pillar-chip chip-echo">🩸 ECHO — Living Error Memory</div>
939
+ <div class="pillar-chip chip-vexa">◈ VEXA — Crystalline Substrate</div>
940
+ </div>
941
+
942
+ <p class="hero-desc">
943
+ Orenthal is a <strong>closed-source frontier AI lab</strong> and API platform — the commercial flagship of Matrix.Corp.
944
+ Where Matrix.Corp publishes open research, Orenthal ships the edge.
945
+ Built on <strong>Matrix Lattice</strong> — shipped. Powered by <strong>ECHO</strong> — the model that learns from its own mistakes.
946
+ </p>
947
+
948
+ <div class="hero-cta">
949
+ <button class="btn-primary"><span>Request API Access</span></button>
950
+ <button class="btn-ghost">Read the Docs</button>
951
+ </div>
952
+
953
+ <div class="scroll-ind">
954
+ <div class="scroll-line"></div>
955
+ <div class="scroll-txt">SCROLL TO DESCEND</div>
956
+ </div>
957
+ </section>
958
+
959
+ <!-- ═══════ ECHO ═══════ -->
960
+ <div class="wrap">
961
+ <section class="section" id="echo">
962
+ <div class="s-tag">// PRODUCT ONE · BUILD IN PROGRESS</div>
963
+ <h2 class="s-title"><span class="acc-echo">ECHO</span> — Living Error Memory</h2>
964
+ <p class="s-intro">ECHO is not a code assistant. It is a 27B coding LLM that remembers every mistake it has ever made — and gets harder to fool with every correction. Built entirely in Rust. Running on <code style="font-family:'Fira Code',monospace;font-size:12px;color:var(--echo)">candle</code>. The model that learns from its own scars.</p>
965
+
966
+ <div class="echo-grid">
967
+ <div class="echo-features">
968
+ <div class="feat-row">
969
+ <div class="feat-icon">🩸</div>
970
+ <div>
971
+ <div class="feat-title">Scars — Crystallised Mistakes</div>
972
+ <div class="feat-body">Every correction ECHO receives forms a <strong style="color:var(--bright)">Scar</strong> — a typed, weighted memory object stored in a live petgraph lattice. Factual. Logical. Contextual. Hallucination. Overconfidence. Mistakes are not erased. They become assets.</div>
973
+ <div class="feat-tag">SCAR TYPES: FACTUAL · LOGICAL · CONTEXTUAL · HALLUCINATION · OVERCONFIDENCE</div>
974
+ </div>
975
+ </div>
976
+ <div class="feat-row">
977
+ <div class="feat-icon">⟡</div>
978
+ <div>
979
+ <div class="feat-title">Pre-Scan Before Every Response</div>
980
+ <div class="feat-body">Before generating a single token, ECHO scans its Scar lattice for similar past mistakes and injects caution context into the prompt. The core loop: <strong style="color:var(--bright)">prompt → scan lattice → inject caution → generate → correction → new Scar</strong>.</div>
981
+ <div class="feat-tag">PRE-SCAN · CAUTION INJECTION · LATTICE LOOKUP</div>
982
+ </div>
983
+ </div>
984
+ <div class="feat-row">
985
+ <div class="feat-icon">◎</div>
986
+ <div>
987
+ <div class="feat-title">Domain Weakness Map</div>
988
+ <div class="feat-body">ECHO tracks which topics it is systematically weak in and automatically suppresses confidence in high-risk domains. The more it's corrected in a domain, the more it warns before it speaks. Intelligence that knows its own limits.</div>
989
+ <div class="feat-tag">DOMAIN RISK TRACKING · AUTO CONFIDENCE SUPPRESSION</div>
990
+ </div>
991
+ </div>
992
+ <div class="feat-row">
993
+ <div class="feat-icon">▲</div>
994
+ <div>
995
+ <div class="feat-title">Built in Rust · Runs on Candle</div>
996
+ <div class="feat-body">ECHO is built entirely in Rust using HuggingFace <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">candle</code> for inference. No Python. No PyTorch overhead. Fast, safe, and statically compiled. Base model: Qwen3.5-27B distilled from Claude Opus 4.6.</div>
997
+ <div class="feat-tag">RUST · CANDLE · 27B · QWEN3.5 BASE · OPUS 4.6 DISTILLED</div>
998
+ </div>
999
+ </div>
1000
+ <div class="feat-row">
1001
+ <div class="feat-icon">⬡</div>
1002
+ <div>
1003
+ <div class="feat-title">OpenAI-Compatible API</div>
1004
+ <div class="feat-body">Drop-in replacement via <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">POST /v1/chat/completions</code>. Corrections submitted via <code style="font-family:'Fira Code',monospace;font-size:11px;color:var(--echo)">POST /v1/echo/correct</code>. Every correction you send makes ECHO permanently smarter — for you and the model.</div>
1005
+ <div class="feat-tag">OPENAI-COMPATIBLE · /v1/chat/completions · /v1/echo/correct</div>
1006
+ </div>
1007
+ </div>
1008
+ </div>
1009
+
1010
+ <!-- Echo visual -->
1011
+ <div class="echo-visual">
1012
+ <!-- Rings -->
1013
+ <div class="echo-ring" style="width:380px;height:380px;animation-duration:5s;animation-delay:0s"></div>
1014
+ <div class="echo-ring" style="width:300px;height:300px;animation-duration:5s;animation-delay:1.5s"></div>
1015
+ <div class="echo-ring" style="width:220px;height:220px;animation-duration:5s;animation-delay:3s"></div>
1016
+ <div class="echo-ring" style="width:160px;height:160px;animation-duration:5s;animation-delay:4.2s"></div>
1017
+
1018
+ <!-- Waveform -->
1019
+ <div class="echo-waveform">
1020
+ <div class="echo-bars" id="echoBars"></div>
1021
+ </div>
1022
+
1023
+ <!-- Core -->
1024
+ <div class="echo-core">
1025
+ <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
1026
+ <text x="30" y="38" text-anchor="middle" font-family="'Orbitron',monospace" font-size="11" font-weight="800" fill="rgba(0,212,255,.8)" letter-spacing="2">ECHO</text>
1027
+ </svg>
1028
+ </div>
1029
+
1030
+ <!-- Floating code tokens -->
1031
+ <div style="position:absolute;inset:0;pointer-events:none;overflow:hidden">
1032
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:9px;color:rgba(0,212,255,.25);animation:floatToken 7s ease-in-out infinite;top:15%;left:5%">async fn</div>
1033
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(0,212,255,.2);animation:floatToken 9s ease-in-out infinite 2s;top:25%;right:8%">import {</div>
1034
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:9px;color:rgba(80,180,255,.2);animation:floatToken 6s ease-in-out infinite 1s;bottom:20%;left:8%">useState</div>
1035
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(0,212,255,.18);animation:floatToken 8s ease-in-out infinite 3s;bottom:30%;right:5%">class Model</div>
1036
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:7px;color:rgba(0,212,255,.15);animation:floatToken 10s ease-in-out infinite .5s;top:10%;left:30%">return</div>
1037
+ <div style="position:absolute;font-family:'Fira Code',monospace;font-size:8px;color:rgba(80,180,255,.18);animation:floatToken 7.5s ease-in-out infinite 4s;bottom:12%;left:35%">def train</div>
1038
+ </div>
1039
+ </div>
1040
+ </div>
1041
+ </section>
1042
+
1043
+ <!-- ═══════ VEXA ═══════ -->
1044
+ <section class="section" id="vexa">
1045
+ <div class="s-tag">// PARADIGM · PAUSED — WILL RESUME</div>
1046
+ <h2 class="s-title"><span class="acc-vexa">Vexa</span> — Crystalline Intelligence</h2>
1047
+ <p class="s-intro">Vexa is not a language model. It is a completely new computational paradigm — a crystalline intelligence substrate that acquires knowledge through crystallisation, not training. No gradients. No backprop. No GPU required. Build paused. The idea is intact. It will resume.</p>
1048
+
1049
+ <div class="vexa-grid">
1050
+ <!-- Vexa visual -->
1051
+ <div class="vexa-visual">
1052
+ <div class="vexa-orbit"><div class="vexa-orbit-dot"></div></div>
1053
+ <div class="vexa-orbit2"><div class="vexa-orbit2-dot"></div></div>
1054
+ <div class="vexa-crystal-wrap">
1055
+ <svg width="260" height="280" viewBox="0 0 500 520" fill="none">
1056
+ <defs>
1057
+ <linearGradient id="vcg1" x1="0%" y1="0%" x2="100%" y2="100%">
1058
+ <stop offset="0%" stop-color="#a855f7" stop-opacity=".95"/>
1059
+ <stop offset="40%" stop-color="#7c3aed" stop-opacity=".85"/>
1060
+ <stop offset="80%" stop-color="#fbbf24" stop-opacity=".6"/>
1061
+ <stop offset="100%" stop-color="#a855f7" stop-opacity=".5"/>
1062
+ </linearGradient>
1063
+ <linearGradient id="vcg2" x1="100%" y1="0%" x2="0%" y2="100%">
1064
+ <stop offset="0%" stop-color="#f472b6" stop-opacity=".6"/>
1065
+ <stop offset="100%" stop-color="#818cf8" stop-opacity=".65"/>
1066
+ </linearGradient>
1067
+ <linearGradient id="vcgE" x1="0%" y1="0%" x2="100%" y2="100%">
1068
+ <stop offset="0%" stop-color="#a855f7"/>
1069
+ <stop offset="100%" stop-color="#7c3aed"/>
1070
+ </linearGradient>
1071
+ <radialGradient id="vcgB" cx="50%" cy="44%" r="28%">
1072
+ <stop offset="0%" stop-color="white" stop-opacity=".88"/>
1073
+ <stop offset="35%" stop-color="#a855f7" stop-opacity=".4"/>
1074
+ <stop offset="100%" stop-color="transparent"/>
1075
+ </radialGradient>
1076
+ <radialGradient id="vcgP" cx="50%" cy="50%" r="50%">
1077
+ <stop offset="0%" stop-color="#a855f7" stop-opacity=".58">
1078
+ <animate attributeName="stop-opacity" values=".58;1;.58" dur="4.2s" repeatCount="indefinite"/>
1079
+ </stop>
1080
+ <stop offset="100%" stop-color="transparent"/>
1081
+ <animate attributeName="r" values="30%;58%;30%" dur="4.2s" repeatCount="indefinite"/>
1082
+ </radialGradient>
1083
+ <filter id="vglow" x="-40%" y="-40%" width="180%" height="180%">
1084
+ <feGaussianBlur stdDeviation="5" result="b"/>
1085
+ <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
1086
+ </filter>
1087
+ <filter id="vsoft" x="-18%" y="-18%" width="136%" height="136%">
1088
+ <feGaussianBlur stdDeviation="4" result="b"/>
1089
+ <feComposite in="b" in2="SourceGraphic" operator="over"/>
1090
+ </filter>
1091
+ <linearGradient id="vshim" x1="0" y1="0" x2="500" y2="440" gradientUnits="userSpaceOnUse">
1092
+ <stop offset="0%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values="-.35;1.15" dur="4s" repeatCount="indefinite"/></stop>
1093
+ <stop offset="20%" stop-color="white" stop-opacity=".18"><animate attributeName="offset" values="-.15;1.35" dur="4s" repeatCount="indefinite"/></stop>
1094
+ <stop offset="40%" stop-color="white" stop-opacity="0"><animate attributeName="offset" values=".05;1.55" dur="4s" repeatCount="indefinite"/></stop>
1095
+ </linearGradient>
1096
+ <clipPath id="vcc"><polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90"/></clipPath>
1097
+ </defs>
1098
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#vcg1)" opacity=".075"/>
1099
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="none" stroke="url(#vcg1)" stroke-width="1.6" filter="url(#vglow)"/>
1100
+ <polygon points="250,18 382,90 410,198 372,308 250,354 128,308 90,198 118,90" fill="url(#vshim)" opacity=".5" clip-path="url(#vcc)"/>
1101
+ <line x1="250" y1="18" x2="250" y2="354" stroke="rgba(168,85,247,.22)" stroke-width=".7"/>
1102
+ <line x1="90" y1="198" x2="410" y2="198" stroke="rgba(255,255,255,.075)" stroke-width=".65"/>
1103
+ <line x1="118" y1="90" x2="372" y2="308" stroke="rgba(255,255,255,.055)" stroke-width=".6"/>
1104
+ <line x1="382" y1="90" x2="128" y2="308" stroke="rgba(255,255,255,.055)" stroke-width=".6"/>
1105
+ <polygon points="250,52 338,100 360,198 330,294 250,328 170,294 140,198 162,100" fill="none" stroke="url(#vcg2)" stroke-width="1" opacity=".4"/>
1106
+ <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="rgba(168,85,247,.06)"/>
1107
+ <polygon points="250,122 304,154 304,232 250,264 196,232 196,154" fill="none" stroke="white" stroke-width=".8" opacity=".22"/>
1108
+ <polygon points="250,122 304,154 250,193" fill="rgba(168,85,247,.12)"/>
1109
+ <polygon points="250,122 196,154 250,193" fill="white" opacity=".055"/>
1110
+ <polygon points="250,193 304,154 304,232" fill="rgba(124,58,237,.08)"/>
1111
+ <polygon points="250,193 196,154 196,232" fill="rgba(251,191,36,.055)"/>
1112
+ <polygon points="250,193 304,232 250,264" fill="rgba(244,114,182,.07)"/>
1113
+ <polygon points="250,193 196,232 250,264" fill="rgba(129,140,248,.06)"/>
1114
+ <line x1="250" y1="122" x2="250" y2="264" stroke="rgba(168,85,247,.3)" stroke-width=".65"/>
1115
+ <line x1="196" y1="154" x2="304" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/>
1116
+ <line x1="304" y1="154" x2="196" y2="232" stroke="rgba(255,255,255,.08)" stroke-width=".55"/>
1117
+ <circle cx="250" cy="193" r="46" fill="url(#vcgP)" filter="url(#vglow)"/>
1118
+ <circle cx="250" cy="193" r="60" fill="url(#vcgB)" filter="url(#vsoft)" opacity=".72"/>
1119
+ <circle cx="250" cy="193" fill="white" opacity=".97" filter="url(#vglow)">
1120
+ <animate attributeName="r" values="5;7.5;5" dur="4.2s" repeatCount="indefinite"/>
1121
+ </circle>
1122
+ <circle cx="250" cy="18" r="4.2" fill="#a855f7" opacity=".95" filter="url(#vglow)"/>
1123
+ <circle cx="382" cy="90" r="3.2" fill="#7c3aed" opacity=".84"/>
1124
+ <circle cx="410" cy="198" r="3.2" fill="#fbbf24" opacity=".8"/>
1125
+ <circle cx="372" cy="308" r="3.2" fill="#f472b6" opacity=".76"/>
1126
+ <circle cx="250" cy="354" r="4.2" fill="#a855f7" opacity=".9" filter="url(#vglow)"/>
1127
+ <circle cx="128" cy="308" r="3.2" fill="#86efac" opacity=".72"/>
1128
+ <circle cx="90" cy="198" r="3.2" fill="#818cf8" opacity=".78"/>
1129
+ <circle cx="118" cy="90" r="3.2" fill="#7c3aed" opacity=".74"/>
1130
+ <line x1="250" y1="18" x2="382" y2="90" stroke="#a855f7" stroke-width="2.2" opacity=".52" filter="url(#vglow)"/>
1131
+ <line x1="250" y1="18" x2="118" y2="90" stroke="#818cf8" stroke-width="1.3" opacity=".38"/>
1132
+ <text x="250" y="408" text-anchor="middle" font-family="'Orbitron', monospace" font-size="26" font-weight="800" letter-spacing="10" fill="url(#vcgE)" opacity=".9">VEXA</text>
1133
+ <text x="250" y="430" text-anchor="middle" font-family="monospace" font-size="8" font-weight="300" letter-spacing="6" fill="rgba(180,160,255,.28)">CRYSTALLINE SUBSTRATE</text>
1134
+ </svg>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div>
1139
+ <div class="vexa-phases">
1140
+ <div class="phase-row">
1141
+ <div class="phase-num">01</div>
1142
+ <div>
1143
+ <div class="phase-title">Crystallisation, not Training</div>
1144
+ <div class="phase-body">Vexa acquires knowledge through a 5-phase crystallisation process — 10 minutes, CPU only, no GPU, no gradient descent. Knowledge forms into Glyphs: structured meaning objects that replace weights. The paradigm is different at the root.</div>
1145
+ <div class="phase-meta">10 MIN CRYSTALLISE · CPU ONLY · NO BACKPROP</div>
1146
+ </div>
1147
+ </div>
1148
+ <div class="phase-row">
1149
+ <div class="phase-num">02</div>
1150
+ <div>
1151
+ <div class="phase-title">Glyphs — Structured Meaning</div>
1152
+ <div class="phase-body">The primitive unit of Vexa intelligence is the Glyph — a structured meaning object, not a weight. Glyphs encode relationships, context, and semantics explicitly. No hallucination from interpolation. No forgetting from compression.</div>
1153
+ <div class="phase-meta">NANO ~1M GLYPHS · MAX ~10B GLYPHS · 5 DENSITY TIERS</div>
1154
+ </div>
1155
+ </div>
1156
+ <div class="phase-row">
1157
+ <div class="phase-num">03</div>
1158
+ <div>
1159
+ <div class="phase-title">Live Learning Threads</div>
1160
+ <div class="phase-body">Three persistent threads run continuously: the Web Crystalliser, the Interaction Crystalliser, and the Decay Monitor. Vexa grows in real time. Knowledge that stops being referenced fades. Knowledge that is reinforced deepens. Intelligence that actually lives.</div>
1161
+ <div class="phase-meta">WEB CRYSTALLISER · INTERACTION CRYSTALLISER · DECAY MONITOR</div>
1162
+ </div>
1163
+ </div>
1164
+ <div class="phase-row">
1165
+ <div class="phase-num">04</div>
1166
+ <div>
1167
+ <div class="phase-title">Lume — The Substrate Language</div>
1168
+ <div class="phase-body">Vexa operates through Lume, a declarative-relational language built for crystalline knowledge systems. Not Python. Not SQL. Something built specifically for the way Vexa thinks — and expressive enough for you to shape it.</div>
1169
+ <div class="phase-meta">DECLARATIVE · RELATIONAL · LUME LANGUAGE SPEC ON HF</div>
1170
+ </div>
1171
+ </div>
1172
+ <div class="phase-row">
1173
+ <div class="phase-num">05</div>
1174
+ <div>
1175
+ <div class="phase-title">Full Inference Bridge</div>
1176
+ <div class="phase-body">Vexa ships with a bridge layer compatible with Ollama, vLLM, and HuggingFace pipelines. Drop it into any existing inference stack. Nano tier (2GB) runs on any laptop. Max tier (40GB) runs on a single workstation.</div>
1177
+ <div class="phase-meta">OLLAMA · vLLM · HUGGINGFACE · FASTAPI · 2GB–40GB</div>
1178
+ </div>
1179
+ </div>
1180
+ </div>
1181
+ </div>
1182
+ </div>
1183
+ </section>
1184
+
1185
+ <!-- ═══════ VISION PANEL ═══════ -->
1186
+ <section class="section" id="vision">
1187
+ <div class="s-tag">// THE ORENTHAL THESIS</div>
1188
+ <h2 class="s-title">Why Orenthal<br>exists.</h2>
1189
+ <p class="s-intro">The general intelligence race is already won by the labs with billions. Orenthal plays a different game — and wins it.</p>
1190
+
1191
+ <div class="vision-wrap">
1192
+ <div class="vision-inner">
1193
+ <div class="vision-col">
1194
+ <div class="v-icon">🩸</div>
1195
+ <div class="v-title">A model that grows from its mistakes</div>
1196
+ <div class="v-body">Every other model forgets its failures. ECHO crystallises them into Scars — typed, weighted memory objects in a live lattice. The more you correct it, the harder it is to fool. Intelligence that doesn't just learn — it remembers how it was wrong.</div>
1197
+ <div class="v-stat" style="background:linear-gradient(135deg,var(--echo),var(--crystal2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">ECHO</div>
1198
+ </div>
1199
+ <div class="vision-col">
1200
+ <div class="v-icon">◈</div>
1201
+ <div class="v-title">The next paradigm is not another transformer</div>
1202
+ <div class="v-body">Every major lab is scaling the same architecture. Vexa bets that the next leap isn't scale — it's structure. Crystalline knowledge that doesn't hallucinate because it doesn't interpolate. The idea is early. The build is paused. The bet is permanent.</div>
1203
+ <div class="v-stat" style="background:linear-gradient(135deg,var(--vexa),var(--rose));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Vexa</div>
1204
+ </div>
1205
+ <div class="vision-col">
1206
+ <div class="v-icon">◎</div>
1207
+ <div class="v-title">Southeast Asia is the next frontier</div>
1208
+ <div class="v-body">Singapore-based. SEA-first. The developer ecosystem in Southeast Asia is underserved by every major AI lab. Orenthal is built by the region, for the region first — then the world. Boutique, focused, and operating where the incumbents aren't looking.</div>
1209
+ <div class="v-stat" style="background:linear-gradient(135deg,var(--gold),var(--lime));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">SEA↗</div>
1210
+ </div>
1211
+ </div>
1212
+ </div>
1213
+ </section>
1214
+
1215
+ <!-- ═══════ MATRIX.CORP LINEAGE ═══════ -->
1216
+ <section class="section" id="lineage">
1217
+ <div class="s-tag">// THE RESEARCH FOUNDATION</div>
1218
+ <h2 class="s-title">Built on<br><span style="color:var(--bright);opacity:.5">Matrix.Corp</span></h2>
1219
+ <p class="s-intro">Orenthal's closed systems sit above a full open-source research stack. Matrix Lattice is shipped. ECHO is building. The entire foundation is public, auditable, and open.</p>
1220
+
1221
+ <table class="lineage-table">
1222
+ <tr class="lineage-row">
1223
+ <td>Matrix Lattice</td>
1224
+ <td>120B · 430B · 671B — Frontier MoE · 17 modules · 1M context · EQ Engine V2 · MACL · HCCE</td>
1225
+ <td><span class="badge b-live"><span class="bdot"></span>RELEASED</span></td>
1226
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟣 Closed Source</td>
1227
+ </tr>
1228
+ <tr class="lineage-row">
1229
+ <td>Matrix ECHO</td>
1230
+ <td>27B · Rust + candle · Scar lattice · Living Error Memory · OpenAI-compatible API</td>
1231
+ <td><span class="badge b-preview"><span class="bdot"></span>BUILD IN PROGRESS</span></td>
1232
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Open Source</td>
1233
+ </tr>
1234
+ <tr class="lineage-row">
1235
+ <td>Zenith</td>
1236
+ <td>7B · 28B · 32B · 70B — Reasoning + EQ Engine · Ring Attention 32K · MoE 12 experts · Tenstorrent Blackhole p300a</td>
1237
+ <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td>
1238
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td>
1239
+ </tr>
1240
+ <tr class="lineage-row">
1241
+ <td>Vortex Scientific</td>
1242
+ <td>7B · 13B — Built from scratch · Custom 50K science tokeniser · Hybrid SSM+Attention · 4 domain modules</td>
1243
+ <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td>
1244
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td>
1245
+ </tr>
1246
+ <tr class="lineage-row">
1247
+ <td>Touch Grass</td>
1248
+ <td>3B · 7B — Music AI · Tab &amp; Chord · Music Theory · Ear Training · EQ Adapter · Songwriting · Qwen3.5 base</td>
1249
+ <td><span class="badge b-preview"><span class="bdot"></span>PREVIEW</span></td>
1250
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td>
1251
+ </tr>
1252
+ <tr class="lineage-row">
1253
+ <td>Matrix Voxel</td>
1254
+ <td>3D generation · Flow-matching DiT ~2.3B · Atlas · Forge · Cast · Lens · Prime · A100 40GB target</td>
1255
+ <td><span class="badge b-road">PLANNED</span></td>
1256
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Open / 🟣 Prime closed</td>
1257
+ </tr>
1258
+ <tr class="lineage-row">
1259
+ <td>Matrix Vexa</td>
1260
+ <td>Crystalline Intelligence Substrate · Glyph knowledge objects · Lume language · CPU only · No training</td>
1261
+ <td><span class="badge b-road">PAUSED</span></td>
1262
+ <td style="font-family:'Fira Code',monospace;font-size:10px;color:var(--ghost)">🟢 Apache 2.0</td>
1263
+ </tr>
1264
+ </table>
1265
+ </section>
1266
+
1267
+ <!-- ═══════ CLOSING ═══════ -->
1268
+ <section class="section closing">
1269
+ <div class="closing-pre">// ORENTHAL · MATRIX.CORP · SINGAPORE</div>
1270
+ <h2 class="closing-h">
1271
+ The frontier<br><span class="ce">just landed.</span>
1272
+ </h2>
1273
+ <p class="closing-sub">Matrix Lattice is shipped — 120B, 430B, 671B, closed source, live now. ECHO is building. The frontier didn't wait. Neither should you.</p>
1274
+ <div class="closing-acts">
1275
+ <button class="btn-primary"><span>Request Early Access</span></button>
1276
+ <a class="btn-ghost" href="https://huggingface.co/Matrix-Corp" target="_blank">Matrix.Corp on HuggingFace</a>
1277
+ </div>
1278
+ </section>
1279
+
1280
+ </div><!-- /wrap -->
1281
+
1282
+ <footer>
1283
+ <div>
1284
+ <div class="foot-name">ORENTHAL</div>
1285
+ <div class="foot-sub">A MATRIX.CORP COMPANY · SINGAPORE</div>
1286
+ <div class="foot-copy">
1287
+ © 2026 Orenthal / Matrix.Corp<br>
1288
+ All rights reserved<br>
1289
+ ECHO and Matrix Lattice are Orenthal products
1290
+ </div>
1291
+ </div>
1292
+ <div class="foot-links">
1293
+ <a href="#">ECHO API</a>
1294
+ <a href="#">Lattice Docs</a>
1295
+ <a href="#">Pricing</a>
1296
+ <a href="#">Status</a>
1297
+ <a href="#">Blog</a>
1298
+ <a href="#">Careers</a>
1299
+ <a href="https://huggingface.co/Matrix-Corp">Research</a>
1300
+ <a href="#">Privacy</a>
1301
+ </div>
1302
+ <div>
1303
+ <a class="foot-hf" href="https://huggingface.co/Matrix-Corp" target="_blank">
1304
+ Matrix-Corp on HuggingFace ↗
1305
+ </a>
1306
+ </div>
1307
+ </footer>
1308
+
1309
+ </div><!-- /page -->
1310
+
1311
+ <style>
1312
+ @keyframes floatToken{
1313
+ 0%,100%{transform:translateY(0);opacity:.18}
1314
+ 50%{transform:translateY(-12px);opacity:.4}
1315
+ }
1316
+ </style>
1317
+
1318
+ <script>
1319
+ /* ���══════════════════════
1320
+ CURSOR
1321
+ ═══════════════════════ */
1322
+ const ret = document.getElementById('reticle');
1323
+ const dot = document.getElementById('reticle-dot');
1324
+ let mx=0,my=0,rx=0,ry=0;
1325
+ document.addEventListener('mousemove',e=>{mx=e.clientX;my=e.clientY});
1326
+ (function animCursor(){
1327
+ ret.style.left=mx+'px';ret.style.top=my+'px';
1328
+ rx+=(mx-rx)*.1;ry+=(my-ry)*.1;
1329
+ dot.style.left=rx+'px';dot.style.top=ry+'px';
1330
+ requestAnimationFrame(animCursor);
1331
+ })();
1332
+ document.querySelectorAll('button,a,.pillar-chip,.feat-row,.phase-row,.lineage-row').forEach(el=>{
1333
+ el.addEventListener('mouseenter',()=>{
1334
+ ret.style.width='52px';ret.style.height='52px';
1335
+ dot.style.background='var(--vexa)';
1336
+ dot.style.boxShadow='0 0 10px var(--vexa)';
1337
+ });
1338
+ el.addEventListener('mouseleave',()=>{
1339
+ ret.style.width='36px';ret.style.height='36px';
1340
+ dot.style.background='var(--echo)';
1341
+ dot.style.boxShadow='0 0 8px var(--echo)';
1342
+ });
1343
+ });
1344
+
1345
+ /* ═══════════════════════
1346
+ WARP CANVAS
1347
+ ═══════════════════════ */
1348
+ const wc=document.getElementById('warp-canvas');
1349
+ const wctx=wc.getContext('2d');
1350
+ wc.width=window.innerWidth;wc.height=window.innerHeight;
1351
+ const stars=[];
1352
+ for(let i=0;i<400;i++){
1353
+ stars.push({
1354
+ x:(Math.random()-.5)*wc.width,
1355
+ y:(Math.random()-.5)*wc.height,
1356
+ z:Math.random()*wc.width,
1357
+ pz:0
1358
+ });
1359
+ }
1360
+ let warpRunning=true;
1361
+ function drawWarp(){
1362
+ if(!warpRunning)return;
1363
+ wctx.fillStyle='rgba(2,3,8,.25)';
1364
+ wctx.fillRect(0,0,wc.width,wc.height);
1365
+ const cx=wc.width/2,cy=wc.height/2;
1366
+ const speed=18;
1367
+ for(const s of stars){
1368
+ s.pz=s.z;
1369
+ s.z-=speed;
1370
+ if(s.z<=0){s.z=wc.width;s.x=(Math.random()-.5)*wc.width;s.y=(Math.random()-.5)*wc.height;s.pz=s.z}
1371
+ const sx=(s.x/s.z)*wc.width+cx;
1372
+ const sy=(s.y/s.z)*wc.height+cy;
1373
+ const px=(s.x/s.pz)*wc.width+cx;
1374
+ const py=(s.y/s.pz)*wc.height+cy;
1375
+ const sz=Math.max(.3,(1-s.z/wc.width)*3.5);
1376
+ const op=Math.min(1,(1-s.z/wc.width)*1.8);
1377
+ const hue=180+Math.random()*60;
1378
+ wctx.beginPath();
1379
+ wctx.moveTo(px,py);wctx.lineTo(sx,sy);
1380
+ wctx.strokeStyle=`hsla(${hue},90%,75%,${op*0.8})`;
1381
+ wctx.lineWidth=sz;wctx.stroke();
1382
+ }
1383
+ requestAnimationFrame(drawWarp);
1384
+ }
1385
+ drawWarp();
1386
+ setTimeout(()=>{
1387
+ warpRunning=false;
1388
+ document.getElementById('warp-overlay').classList.add('gone');
1389
+ },4500);
1390
+
1391
+ /* ═══════════════════════
1392
+ SPACE BACKGROUND
1393
+ ═══════════════════════ */
1394
+ const sc=document.getElementById('space-canvas');
1395
+ const sctx=sc.getContext('2d');
1396
+ let SW=sc.width=window.innerWidth,SH=sc.height=window.innerHeight;
1397
+ window.addEventListener('resize',()=>{SW=sc.width=window.innerWidth;SH=sc.height=window.innerHeight});
1398
+
1399
+ const bgStars=[];
1400
+ for(let i=0;i<280;i++){
1401
+ bgStars.push({
1402
+ x:Math.random()*SW,y:Math.random()*SH,
1403
+ r:Math.random()*1.1+.15,
1404
+ a:Math.random()*.6+.1,
1405
+ p:Math.random()*Math.PI*2,
1406
+ sp:Math.random()*.008+.003,
1407
+ c:['#a0d4ff','#ffffff','#ffd080','#c0a0ff','#a0ffcc'][Math.floor(Math.random()*5)]
1408
+ });
1409
+ }
1410
+ // Nebula nodes for connection lines
1411
+ const nebNodes=[];
1412
+ for(let i=0;i<50;i++){
1413
+ nebNodes.push({
1414
+ x:Math.random()*SW,y:Math.random()*SH,
1415
+ vx:(Math.random()-.5)*.12,vy:(Math.random()-.5)*.12,
1416
+ c:['#00d4ff','#a855f7','#fbbf24','#86efac','#f472b6'][Math.floor(Math.random()*5)],
1417
+ r:Math.random()*.8+.3,
1418
+ a:Math.random()*.25+.06
1419
+ });
1420
+ }
1421
+ let mouseX=-999,mouseY=-999;
1422
+ document.addEventListener('mousemove',e=>{mouseX=e.clientX;mouseY=e.clientY});
1423
+
1424
+ function hex2(v){return Math.round(Math.min(v,1)*255).toString(16).padStart(2,'0')}
1425
+
1426
+ function drawSpace(){
1427
+ sctx.clearRect(0,0,SW,SH);
1428
+ // Stars
1429
+ bgStars.forEach(s=>{
1430
+ s.p+=s.sp;
1431
+ const a=s.a+Math.sin(s.p)*.06;
1432
+ sctx.beginPath();sctx.arc(s.x,s.y,s.r,0,Math.PI*2);
1433
+ sctx.fillStyle=s.c+hex2(a);sctx.fill();
1434
+ });
1435
+ // Nebula node connections
1436
+ for(let i=0;i<nebNodes.length;i++){
1437
+ const n=nebNodes[i];
1438
+ n.x+=n.vx;n.y+=n.vy;
1439
+ if(n.x<0||n.x>SW)n.vx*=-1;
1440
+ if(n.y<0||n.y>SH)n.vy*=-1;
1441
+ for(let j=i+1;j<nebNodes.length;j++){
1442
+ const m=nebNodes[j];
1443
+ const dx=n.x-m.x,dy=n.y-m.y,d=Math.sqrt(dx*dx+dy*dy);
1444
+ if(d<160){
1445
+ const a=(1-d/160)*.06;
1446
+ const g=sctx.createLinearGradient(n.x,n.y,m.x,m.y);
1447
+ g.addColorStop(0,n.c+hex2(a));g.addColorStop(1,m.c+hex2(a));
1448
+ sctx.beginPath();sctx.moveTo(n.x,n.y);sctx.lineTo(m.x,m.y);
1449
+ sctx.strokeStyle=g;sctx.lineWidth=.5;sctx.stroke();
1450
+ }
1451
+ }
1452
+ // Mouse connection
1453
+ const mdx=n.x-mouseX,mdy=n.y-mouseY,md=Math.sqrt(mdx*mdx+mdy*mdy);
1454
+ if(md<200){
1455
+ const a=(1-md/200)*.25;
1456
+ sctx.beginPath();sctx.moveTo(n.x,n.y);sctx.lineTo(mouseX,mouseY);
1457
+ sctx.strokeStyle=n.c+hex2(a);sctx.lineWidth=.7;sctx.stroke();
1458
+ }
1459
+ // Node dot
1460
+ const g2=sctx.createRadialGradient(n.x,n.y,0,n.x,n.y,n.r*3);
1461
+ g2.addColorStop(0,n.c+hex2(n.a));g2.addColorStop(1,'transparent');
1462
+ sctx.beginPath();sctx.arc(n.x,n.y,n.r*3,0,Math.PI*2);sctx.fillStyle=g2;sctx.fill();
1463
+ }
1464
+ requestAnimationFrame(drawSpace);
1465
+ }
1466
+ drawSpace();
1467
+
1468
+ /* ═══════════════════════
1469
+ ECHO WAVEFORM BARS
1470
+ ═══════════════════════ */
1471
+ const barsWrap=document.getElementById('echoBars');
1472
+ for(let i=0;i<38;i++){
1473
+ const b=document.createElement('div');
1474
+ b.className='echo-bar';
1475
+ const h=8+Math.random()*44;
1476
+ b.style.setProperty('--h',h+'px');
1477
+ b.style.animationDuration=(0.4+Math.random()*0.8)+'s';
1478
+ b.style.animationDelay=(Math.random()*1.2)+'s';
1479
+ barsWrap.appendChild(b);
1480
+ }
1481
+
1482
+ /* ═══════════════════════
1483
+ SCROLL REVEALS
1484
+ ═══════════════════════ */
1485
+ const obs=new IntersectionObserver(entries=>{
1486
+ entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis')});
1487
+ },{threshold:.06});
1488
+ document.querySelectorAll('.section').forEach(s=>obs.observe(s));
1489
+
1490
+ /* ═══════════════════════
1491
+ NAV SCROLL
1492
+ ═══════════════════════ */
1493
+ window.addEventListener('scroll',()=>{
1494
+ document.getElementById('mainNav').classList.toggle('scrolled',window.scrollY>60);
1495
+ });
1496
+
1497
+ /* ═══════════════════════
1498
+ PARALLAX PLANET GLOW
1499
+ ═══════════════════════ */
1500
+ window.addEventListener('scroll',()=>{
1501
+ const y=window.scrollY;
1502
+ document.querySelector('.planet-glow').style.transform=
1503
+ `translateX(-50%) translateY(${-y*.15}px)`;
1504
+ document.querySelector('.atmo-glow').style.transform=
1505
+ `translateX(-50%) translateY(${y*.08}px)`;
1506
+ });
1507
+ </script>
1508
+ </body>
1509
+ </html>