PageSourceSearch

https://carsandcrypto.io/

html carsandcrypto.io collected 2026-10-02 01:57:07 UTC 119,539 bytes, 2,935 lines download raw bytes

1<!doctype html>
2<html lang="en" style="background:#05070B">
3<head>
4<meta charset="utf-8" />
5<meta name="viewport" content="width=device-width,initial-scale=1" />
6<meta name="theme-color" content="#05070B" />
7<meta name="color-scheme" content="dark" />
8<title>Cars & Crypto</title>
9<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
10<link rel="shortcut icon" href="/favicon-48x48.png">
11<link rel="apple-touch-icon" href="/favicon-48x48.png">
12<link rel="preconnect" href="https://fonts.googleapis.com">
13<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
15<style>
16  :root{
17    --bg:#05070B;
18    --bg-2:#0A0E16;
19    --ink:#EAEEF5;
20    --ink-dim:#8A93A6;
21    --ink-ghost:rgba(234,238,245,.06);
22    --glow:#f0bf3d;
23    --glow-2:#dba019;
24    --edge:rgba(255,255,255,.08);
25    --chip:rgba(255,255,255,.04);
26    --home-nav-clearance:96px;
27  }
28  *{box-sizing:border-box}
29  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Inter Tight',ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;overflow-x:clip;}
30  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:0;}
31
32  /* ---- Scroll container: pinned hero ---- */
33  .hero-scroll{
34    position:relative;
35    padding-top:var(--home-nav-clearance);
36    height:calc(340vh + var(--home-nav-clearance));height:calc(340dvh + var(--home-nav-clearance)); /* drives scroll progress; dvh corrects for iOS toolbar */
37    background:transparent; /* background lives in hero-bg so it can be faded out */
38    z-index:2; /* sits above the track section so hero-pin paints on top */
39  }
40  /* Floating word reveals over the hero */
41  .hero-words{position:absolute;inset:0;pointer-events:none;z-index:6;}
42  .hero-word{
43    position:absolute;top:50%;
44    font-weight:500;font-size:clamp(72px, 12vw, 200px);
45    line-height:.95;letter-spacing:-0.045em;
46    color:var(--ink);
47    opacity:0;
48    will-change:transform,opacity,filter;
49    text-shadow:0 30px 80px rgba(0,0,0,.6);
50  }
51  .hero-word em{font-style:normal;color:var(--glow);font-weight:400;}
52  .hero-word.left{left:6vw;text-align:left;}
53  .hero-word.right{right:6vw;text-align:right;}
54  /* Closing line */
55  .hero-closer{
56    position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
57    text-align:center;padding:0 24px;
58    font-weight:500;font-size:clamp(36px, 5.6vw, 84px);
59    line-height:1.05;letter-spacing:-0.03em;
60    color:var(--ink);
61    opacity:0;
62    pointer-events:none;
63    z-index:7;
64    max-width:18ch;margin-left:auto;margin-right:auto;
65    text-wrap:balance;
66  }
67  .hero-closer em{font-style:normal;color:var(--glow);font-weight:400;}
68  .hero-pin{
69    position:sticky;top:var(--home-nav-clearance);height:calc(100vh - var(--home-nav-clearance));height:calc(100dvh - var(--home-nav-clearance));width:100%;
70    overflow:hidden;
71    background:transparent; /* background lives in hero-bg child so it can fade independently */
72  }
73  /* Separate background layer — fades out as hero exits, revealing racetrack beneath */
74  .hero-bg{
75    position:absolute;inset:0;pointer-events:none;z-index:0;
76    background:
77      radial-gradient(120% 80% at 50% 110%, rgba(219,160,25,.28) 0%, rgba(219,160,25,0) 55%),
78      radial-gradient(80% 60% at 50% -10%, rgba(240,191,61,.12) 0%, rgba(0,0,0,0) 60%),
79      linear-gradient(180deg, #05070B 0%, #03050A 100%);
80  }
81
82  /* Starfield */
83  .stars{position:absolute;inset:0;opacity:.55;pointer-events:none;}
84  .stars::before,.stars::after{
85    content:"";position:absolute;inset:0;
86    background-image:
87      radial-gradient(1px 1px at 13% 22%, #fff 50%, transparent 51%),
88      radial-gradient(1px 1px at 27% 44%, #cfd8ee 50%, transparent 51%),
89      radial-gradient(1.2px 1.2px at 44% 18%, #fff 50%, transparent 51%),
90      radial-gradient(1px 1px at 62% 33%, #aab4c8 50%, transparent 51%),
91      radial-gradient(1px 1px at 78% 20%, #fff 50%, transparent 51%),
92      radial-gradient(1px 1px at 89% 47%, #e8eefb 50%, transparent 51%),
93      radial-gradient(1px 1px at 8% 64%, #fff 50%, transparent 51%),
94      radial-gradient(1px 1px at 33% 72%, #c0cbe0 50%, transparent 51%),
95      radial-gradient(1.1px 1.1px at 55% 82%, #fff 50%, transparent 51%),
96      radial-gradient(1px 1px at 72% 68%, #cfd8ee 50%, transparent 51%),
97      radial-gradient(1px 1px at 92% 78%, #fff 50%, transparent 51%);
98    mask-image:radial-gradient(circle at 50% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
99  }
100
101  /* ---- Nav ---- */
102  .nav{
103    position:fixed;top:0;left:0;right:0;z-index:50;
104    display:flex;align-items:center;justify-content:space-between;
105    padding:22px 40px;
106    border-bottom:1px solid rgba(255,255,255,.1);
107    background:rgba(5,7,11,.9);
108    backdrop-filter:blur(18px);
109    -webkit-backdrop-filter:blur(18px);
110    box-shadow:0 12px 32px rgba(0,0,0,.22);
111    mix-blend-mode:normal;color:#fff;
112  }
113  .logo{display:flex;align-items:center;gap:10px;}
114  .logo img{height:54px;width:auto;display:block;}
115  .logo .tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;color:#fff;opacity:.7;transform:translateY(-2px);}
116  .cta{
117    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
118    padding:12px 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;text-decoration:none;
119    background:rgba(255,255,255,.02);backdrop-filter:blur(8px);
120    transition:background .25s ease, border-color .25s ease, transform .25s ease;
121  }
122  .cta:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75);transform:translateY(-1px);}
123  .nav-actions{display:flex;align-items:center;gap:10px;}
124  .nav-inventory{
125    background:linear-gradient(135deg,#f0bf3d 0%,#dba019 100%);
126    color:#1A1100;border-color:transparent;font-weight:600;
127    box-shadow:0 8px 20px rgba(240,191,61,.25);
128  }
129  .nav-inventory:hover{
130    background:linear-gradient(135deg,#ffd45c 0%,#f0bf3d 100%);
131    border-color:transparent;
132    box-shadow:0 12px 28px rgba(240,191,61,.4);
133  }
134  .nav-contact{
135    box-shadow:0 8px 20px rgba(0,0,0,.22);
136  }
137  .nav-contact:hover{
138    box-shadow:0 12px 28px rgba(0,0,0,.32);
139  }
140  @media (max-width:480px){
141    .nav-actions{gap:6px;}
142    .cta{padding:9px 12px;font-size:10px;letter-spacing:.12em;}
143    .nav{padding:18px 18px;}
144  }
145
146  /* ---- Hero stage ---- */
147  .stage{position:absolute;inset:0;display:grid;place-items:center;}
148
149  /* Ghost word behind phone (revealed at end) */
150  .ghost{
151    position:absolute;
151left:0;right:0;top:50%;
152    transform:translateY(-50%);
153    display:flex;justify-content:center;align-items:center;
154    font-weight:600;font-size:clamp(140px,22vw,340px);
155    letter-spacing:-0.06em;
156    color:transparent;
157    -webkit-text-stroke:1px rgba(255,255,255,.06);
158    pointer-events:none;
159    white-space:nowrap;
160  }
161
162  /* Top eyebrow */
163  .eyebrow{
164    position:absolute;top:14vh;left:0;right:0;text-align:center;
165    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
166  }
167
168  /* Headline that morphs with scroll */
169  .headline-wrap{
170    position:absolute;left:0;right:0;top:50%;
171    transform:translate3d(0,-50%,0);
172    display:flex;flex-direction:column;align-items:center;
173    pointer-events:none;text-align:center;padding:0 24px;
174    will-change:transform, opacity, font-size;
175  }
176  .kicker{
177    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
178    color:var(--ink-dim);margin-bottom:22px;opacity:0;transform:translateY(10px);
179  }
180  .headline{
181    font-weight:500;
182    font-size:clamp(44px,7.2vw,120px);
183    line-height:.98;letter-spacing:-0.035em;
184    color:var(--ink);
185    max-width:14ch;
186  }
187  .headline em{font-style:normal;color:var(--glow);font-weight:400;}
188  .hl-line{display:inline;}
189  .hl-line-1{white-space:nowrap;}
190  .hl-line-2{opacity:0;filter:blur(6px);transition:none;}
191  .sub{
192    margin-top:26px;max-width:52ch;
193    color:var(--ink-dim);font-size:16px;line-height:1.5;letter-spacing:-0.005em;
194    opacity:0;transform:translateY(8px);
195  }
196
197  /* Floating coin/token orbs */
198  .orbs{position:absolute;inset:0;pointer-events:none;}
199  .orb{
200    position:absolute;
201    display:grid;place-items:center;
202    will-change:transform;
203  }
204  .orb.small{width:110px;height:110px;}
205  .orb.med{width:150px;height:150px;}
206
207  /* Glossy 3D coin — shared base */
208  .coin{
209    position:relative;width:100%;height:100%;
210    border-radius:50%;
211    transform:rotate(-14deg);
212    background:
213      /* top highlight */
214      radial-gradient(ellipse 70% 30% at 50% 10%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%),
215      /* edge */
216      linear-gradient(145deg, #2a3142 0%, #0b0f18 45%, #1a1f2d 55%, #05070B 100%),
217      #0a0d14;
218    box-shadow:
219      /* outer glow */
220      0 0 40px rgba(47,107,255,.35),
221      0 30px 60px rgba(0,0,0,.55),
222      /* edge rim */
223      inset 0 0 0 1px rgba(255,255,255,.08),
224      /* bottom rim dark */
225      inset 0 -6px 18px rgba(0,0,0,.6),
226      /* top rim light */
227      inset 0 4px 10px rgba(255,255,255,.12);
228  }
229  .coin::before{
230    /* side / thickness crescent on bottom-right */
231    content:"";position:absolute;inset:0;border-radius:50%;
232    background:
233      radial-gradient(circle at 72% 78%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 42%);
234    pointer-events:none;
235  }
236  .coin-ring{
237    position:absolute;inset:6%;
238    border-radius:50%;
239    background:
240      radial-gradient(ellipse 60% 24% at 50% 8%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 70%),
241      radial-gradient(circle at 35% 30%, rgba(95,168,255,.45) 0%, rgba(95,168,255,0) 55%),
242      linear-gradient(160deg, #0f1524 0%, #05070B 100%);
243    box-shadow:
244      inset 0 0 0 2px rgba(95,168,255,.25),
245      inset 0 0 24px rgba(95,168,255,.18),
246      inset 0 -6px 14px rgba(0,0,0,.55);
247  }
248  .coin-face{
249    position:absolute;inset:14%;
250    display:grid;place-items:center;
251    border-radius:50%;
252    transform:rotate(14deg); /* cancel parent tilt so face sits upright */
253  }
254  .coin-face svg{width:70%;height:70%;display:block;
255    filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
256  }
257
258  /* Per-token accent glow */
259  .coin-eth{ box-shadow:0 0 40px rgba(140,170,255,.45), 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -6px 18px rgba(0,0,0,.6), inset 0 4px 10px rgba(255,255,255,.12); }
260  .coin-btc .coin-ring{ box-shadow: inset 0 0 0 2px rgba(247,147,26,.35), inset 0 0 24px rgba(247,147,26,.22), inset 0 -6px 14px rgba(0,0,0,.55); }
261  .coin-btc{ box-shadow:0 0 40px rgba(247,147,26,.3), 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -6px 18px rgba(0,0,0,.6), inset 0 4px 10px rgba(255,255,255,.12); }
262  .coin-sol .coin-ring{ box-shadow: inset 0 0 0 2px rgba(153,69,255,.35), inset 0 0 24px rgba(20,241,149,.2), inset 0 -6px 14px rgba(0,0,0,.55); }
263  .coin-usdc .coin-ring{ box-shadow: inset 0 0 0 2px rgba(95,168,255,.45), inset 0 0 24px rgba(95,168,255,.28), inset 0 -6px 14px rgba(0,0,0,.55); }
264  .coin-xrp .coin-ring{ box-shadow: inset 0 0 0 2px rgba(234,238,245,.3), inset 0 0 24px rgba(234,238,245,.12), inset 0 -6px 14px rgba(0,0,0,.55); }
265
266  /* ---- Phone ---- */
267  .phone-wrap{
268    position:absolute;
268left:50%;top:50%;
269    transform:translate(-50%,-50%);
270    will-change:transform;
271  }
272  .phone{
273    position:relative;
274    width:340px;height:700px;
275    border-radius:54px;
276    background:linear-gradient(160deg,#1c2333 0%, #0a0d14 50%, #11151f 100%);
277    padding:10px;
278    box-shadow:
279      0 0 0 1.5px rgba(255,255,255,.08) inset,
280      0 0 0 2px rgba(0,0,0,.7),
281      0 60px 120px rgba(219,160,25,.35),
282      0 0 160px rgba(240,191,61,.35);
283  }
284  .phone::before{
285    content:"";position:absolute;inset:-6px;border-radius:60px;
286    background:radial-gradient(60% 50% at 50% 50%, rgba(240,191,61,.55), rgba(240,191,61,0) 70%);
287    filter:blur(14px);z-index:-1;
288  }
289  .screen{
290    position:relative;width:100%;height:100%;
291    border-radius:44px;overflow:hidden;
292    background:linear-gradient(180deg,#05080F 0%, #02040A 100%);
293  }
294  .notch{
295    position:absolute;left:50%;top:14px;transform:translateX(-50%);
296    width:118px;height:34px;border-radius:20px;background:#000;
297    display:flex;align-items:center;justify-content:space-between;padding:0 10px;
298    z-index:4;
299  }
300  .notch .dot{width:8px;height:8px;border-radius:50%;background:#0a0d14;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
301  .notch .cam{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #2a3a66 0%, #000 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}
302
303  .statusbar{
304    position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;
305    padding:14px 24px 6px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#EAEEF5;
306  }
307  .statusbar .icons{display:flex;gap:6px;align-items:center;opacity:.85;}
308  .bars{display:inline-flex;gap:2px;align-items:flex-end;}
309  .bars span{width:3px;background:#EAEEF5;border-radius:1px;}
310  .bars span:nth-child(1){height:4px}.bars span:nth-child(2){height:6px}.bars span:nth-child(3){height:8px}.bars span:nth-child(4){height:10px}
311
312  .chatbar{
313    position:relative;z-index:3;display:flex;align-items:center;gap:10px;
314    padding:16px 16px 10px;border-bottom:1px solid rgba(255,255,255,.04);
315  }
316  .chatbar .back{color:var(--ink-dim);font-size:18px;}
317  .avatar{
318    width:32px;height:32px;border-radius:50%;
319    background:
320      radial-gradient(circle at 40% 30%, #c8a06b 0%, #7a5a3a 60%, #3a2a1c 100%);
321    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
322  }
323  .who{display:flex;flex-direction:column;line-height:1.1;}
324  .who b{font-weight:500;font-size:14px;color:#EAEEF5;letter-spacing:-0.01em;}
325  .who span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;color:#4BD37B;text-transform:uppercase;margin-top:3px;}
326  .who span::before{content:"● ";}
327  .more{margin-left:auto;color:var(--ink-dim);}
328
329  .messages{
330    position:relative;padding:16px 16px 100px;display:flex;flex-direction:column;gap:10px;
331    height:calc(100% - 130px);overflow:hidden;
332  }
333  .msg{
334    max-width:78%;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.35;
335    opacity:0;transform:translateY(8px);
336  }
337  .msg.them{align-self:flex-start;background:rgba(255,255,255,.06);color:#EAEEF5;border-bottom-left-radius:6px;}
338  .msg.you{align-self:flex-end;background:linear-gradient(135deg, #007AFF 0%, #0A84FF 100%);color:#fff;border-bottom-right-radius:6px;}
339  .msg .meta{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;opacity:.7;margin-top:4px;text-transform:uppercase;}
340  .typing{align-self:flex-start;background:rgba(255,255,255,.06);padding:10px 14px;border-radius:18px;border-bottom-left-radius:6px;display:flex;gap:4px;opacity:0;}
341  .typing span{width:6px;height:6px;border-radius:50%;background:var(--ink-dim);animation:blink 1.2s infinite;}
342  .typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
343  @keyframes blink{0%,60%,100%{opacity:.2;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
344
345  .composer{
346    position:absolute;left:10px;right:10px;bottom:14px;
347    display:flex;align-items:center;gap:8px;
348    padding:8px;border-radius:24px;
349    background:rgba(255,255,255,.04);
350    border:1px solid rgba(255,255,255,.06);
351  }
352  .composer .plus{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#EAEEF5;font-size:18px;font-weight:300;}
353  .composer input{flex:1;background:transparent;border:0;outline:0;color:#EAEEF5;font-family:inherit;font-size:13px;}
354  .composer input::placeholder{color:var(--ink-dim);}
355  .composer .send{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#007AFF,#0A84FF);
355display:grid;place-items:center;box-shadow:0 6px 20px rgba(10,132,255,.5);}
356  .composer .send svg{width:16px;height:16px;color:#fff;}
357
358  /* Featured bar at very bottom of hero (appears at end state) */
359  .footer-chips{
360    position:absolute;left:0;right:0;bottom:28px;
361    display:flex;justify-content:space-between;align-items:center;
362    padding:0 40px;gap:24px;
363    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
364    opacity:0;transform:translateY(10px);
365  }
366  .footer-chips .dot{width:4px;height:4px;border-radius:50%;background:var(--glow);display:inline-block;margin:0 10px;vertical-align:middle;}
367  .footer-chips .left,.footer-chips .right{display:flex;align-items:center;gap:4px;}
368
369  /* Scroll hint */
370  .scroll-hint{
371    position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
372    display:flex;flex-direction:column;align-items:center;gap:8px;
373    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
374    transition:opacity .3s ease;
375  }
376  .scroll-hint .line{width:1px;height:40px;background:linear-gradient(180deg, rgba(138,147,166,.7), rgba(138,147,166,0));animation:drop 2s ease-in-out infinite;}
377  @keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
378
379  /* Bottom fade — fades away in sync with hero-bg so track can bleed through */
380  .hero-pin::after{
381    content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
382    background:linear-gradient(180deg, rgba(5,7,11,0) 0%, #05070B 100%);
383    pointer-events:none;z-index:5;
384    opacity:var(--hero-vignette,1);
385  }
386
387  @media (max-width:720px){
388    :root{--home-nav-clearance:76px;}
389    .nav{padding:20px}
390    .phone{width:280px;height:580px;border-radius:46px}
391    .screen{border-radius:36px}
392    .footer-chips{padding:0 20px;font-size:9px}
393  }
394
395  .site-privacy-footer{
396    padding:36px 20px 56px;
397    border-top:1px solid var(--edge);
398    background:#05070B;
399    text-align:center;
400  }
401  .site-privacy-footer a{
402    display:inline-flex;
403    align-items:center;
404    justify-content:center;
405    min-height:38px;
406    padding:0 15px;
407    border:1px solid rgba(255,255,255,.12);
408    border-radius:999px;
409    color:var(--ink-dim);
410    font-family:'JetBrains Mono',monospace;
411    font-size:11px;
412    letter-spacing:.18em;
413    text-transform:uppercase;
414    transition:color .18s ease,border-color .18s ease,transform .18s ease;
415  }
416  .site-privacy-footer a:hover{
417    color:var(--glow);
418    border-color:rgba(255,255,255,.24);
419    transform:translateY(-1px);
420  }
421
422  /* ---- Racetrack section ---- */
423  .track-scroll{
424    position:relative;
425    height:220vh;height:220dvh;
426    margin-top:calc(-100vh + var(--home-nav-clearance));margin-top:calc(-100dvh + var(--home-nav-clearance)); /* pull track up so it starts the moment the hero animation ends */
427    z-index:1;         /* hero-scroll (z-index:2) sits on top during the hero exit */
428    background:linear-gradient(180deg, #05070B 0%, #02040A 60%, #05070B 100%);
429  }
430  .track-pin{
431    position:sticky;top:var(--home-nav-clearance);height:calc(100vh - var(--home-nav-clearance));height:calc(100dvh - var(--home-nav-clearance));width:100%;
432    overflow:hidden;
433    display:flex;justify-content:center;
434  }
435  .track-eyebrow{
436    position:absolute;top:42px;left:50%;transform:translateX(-50%);
437    display:flex;align-items:center;gap:14px;
438    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);
439    z-index:3;
440  }
441  .track-eyebrow .dash{display:inline-block;width:32px;height:1px;background:rgba(138,147,166,.5);}
442  .track-svg{
443    position:absolute;top:0;left:50%;transform:translateX(-50%);
444    height:100%;width:auto;max-width:100%;
445    pointer-events:none;
446  }
447  .step{
448    position:absolute;
449    transform:translateY(-50%);
450    display:flex;flex-direction:column;gap:10px;
451    z-index:2;
452    opacity:0;
453    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
454    will-change:opacity, transform;
455  }
456  .step-left{left:8%;text-align:left;align-items:flex-start;transform:translate(-20px,-50%);}
457  .step-right{right:8%;text-align:right;
457align-items:flex-end;transform:translate(20px,-50%);}
458  .step.in{opacity:1;transform:translate(0,-50%);}
459  .step-num{
460    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.28em;color:var(--glow);
461  }
462  .step-label{
463    font-weight:500;font-size:clamp(28px, 3.4vw, 56px);line-height:1;letter-spacing:-0.025em;color:var(--ink);
464    max-width:14ch;
465  }
466  .car{
467    position:absolute;left:0;top:0;
468    width:120px;height:120px;
469    transform:translate(-50%,-50%);
470    pointer-events:none;
471    z-index:4;
472    will-change:transform, left, top;
473    filter:drop-shadow(0 18px 30px rgba(240,191,61,.45)) drop-shadow(0 0 18px rgba(219,160,25,.5));
474  }
475  .car img{
476    width:100%;height:100%;display:block;
477    /* Recolor the dark Porsche silhouette into bright chrome/blue against dark bg */
478    filter:invert(1) brightness(1.05) hue-rotate(190deg) saturate(1.2);
479  }
480
481  @media (max-width:820px){
482    .step-left{left:5%}
483    .step-right{right:5%}
484    .step-label{font-size:24px}
485    .car{width:90px;height:90px}
486  }
487
488  /* Parked car at top of section 3 */
489  .parked-car{
490    position:relative;
491    width:340px;height:170px;
492    margin:0 auto 40px;
493    background-image:url('porsche.svg');
494    background-size:contain;background-repeat:no-repeat;background-position:center;
495    filter:invert(1) brightness(1.05) sepia(1) saturate(6) hue-rotate(355deg)
496           drop-shadow(0 18px 30px rgba(219,160,25,.45))
497           drop-shadow(0 0 18px rgba(240,191,61,.4));
498    /* hidden by default — JS shows it after the user passes the track */
499    opacity:0;
500    transform:translateY(20px);
501    transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
502  }
503  .parked-car.in{opacity:1;transform:translateY(0);}
504  .parked-shadow{
505    position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
506    width:70%;height:18px;border-radius:50%;
507    background:radial-gradient(ellipse, rgba(219,160,25,.4) 0%, rgba(0,0,0,0) 70%);
508    filter:blur(6px);
509  }
510  @media (max-width:720px){
511    .parked-car{width:240px;height:120px;}
512  }
513
514  /* ---- Stacking cards section ---- */
515  .stack-scroll{
516    position:relative;
517    background:#05070B;
518    padding:0;
519  }
520  .stack-intro{
521    min-height:80vh;
522    display:flex;flex-direction:column;justify-content:center;align-items:center;
523    text-align:center;padding:0 24px;
524  }
525  .stack-eyebrow{
526    display:flex;align-items:center;gap:14px;
527    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);
528    margin-bottom:32px;
529  }
530  .stack-eyebrow .dash{display:inline-block;width:32px;height:1px;background:rgba(138,147,166,.5);}
531  .stack-h2{
532    font-weight:500;font-size:clamp(48px, 8vw, 132px);
533    line-height:.95;letter-spacing:-0.04em;margin:0 0 18vh;
534    color:var(--ink);
535  }
536  /* ---- Inventory Showcase ---- */
537  .inv-showcase{
538    width:100%;
539    max-width:1400px;
540    margin:60px auto 90px;
541    padding:0 32px;
542    display:flex;flex-direction:column;align-items:center;
543    color:var(--ink);
544  }
545  .inv-eyebrow{
546    display:flex;align-items:center;gap:14px;
547    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-dim);
548    margin-bottom:18px;
549  }
550  .inv-eyebrow .dash{display:inline-block;width:32px;height:1px;background:rgba(138,147,166,.5);}
551  .inv-title{
552    font-weight:500;font-size:clamp(40px, 5.4vw, 84px);
553    line-height:.95;letter-spacing:-0.035em;margin:0 0 28px;
554    text-align:center;color:var(--ink);
555  }
556
557  /* Currency switcher */
558  .inv-ccy{
559    display:flex;align-items:center;gap:18px;
560    margin:0 0 44px;
561  }
562  .inv-ccy .ccy-label{
563    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);
564  }
565  .ccy-group{
566    position:relative;
567    display:flex;align-items:center;gap:4px;
568    padding:5px;border-radius:999px;
569    background:rgba(255,255,255,.03);
570    border:1px solid rgba(255,255,255,.08);
571    backdrop-filter:blur(6px);
572  }
573  .ccy-thumb{
574    position:absolute;top:5px;left:5px;
575    height:calc(100% - 10px);
576    border-radius:999px;
577    background:linear-gradient(180deg, rgba(240,191,61,.22) 0%, rgba(219,160,25,.18) 100%);
578    border:1px solid rgba(240,191,61,.5);
579    box-shadow:0 0 18px rgba(240,191,61,.25), inset 0 0 0 1px rgba(255,255,255,.05);
580    transition:transform .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1);
581    pointer-events:none;
582    z-index:0;
583  }
584  .ccy-opt{
585    position:relative;z-index:1;
586    display:inline-flex;align-items:center;gap:8px;
587    padding:9px 16px;border-radius:999px;
588    background:transparent;border:0;
589    color:var(--ink-dim);
590    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
591    cursor:pointer;
592    transition:color .3s ease;
593  }
594  .ccy-opt:hover{color:var(--ink);}
595  .ccy-opt.is-active{color:var(--glow);}
596  .ccy-dot{
597    width:8px;height:8px;border-radius:50%;
598    box-shadow:0 0 8px currentColor;
599  }
600  .ccy-dot.ccy-usdc{background:#2775CA;color:#2775CA;}
601  .ccy-dot.ccy-btc{background:#F7931A;color:#F7931A;}
602  .ccy-dot.ccy-eth{background:#8CAAFF;color:#8CAAFF;}
603  .ccy-dot.ccy-sol{background:#14F195;color:#14F195;}
604
605  .inv-stage{
606    position:relative;
607    width:100%;
608    height:560px;
609    display:flex;align-items:center;justify-content:center;
610    perspective:1800px;
611  }
612
613  /* Faint tech grid */
614  .inv-grid{
615    position:absolute;inset:0;
616    background-image:
617      linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
618      linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
619    background-size:64px 64px;
620    mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%);
621    pointer-events:none;
622  }
623  .inv-crosshair{
624    position:absolute;inset:0;pointer-events:none;
625    display:flex;align-items:center;justify-content:center;
626  }
627  .inv-crosshair .cx-h,.inv-crosshair .cx-v{
628    position:absolute;background:rgba(240,191,61,.18);
629  }
630  .inv-crosshair .cx-h{height:1px;left:8%;right:8%;}
631  .inv-crosshair .cx-v{width:1px;top:6%;bottom:6%;}
632
633  /* Card deck */
634  .inv-deck{
635    position:relative;
636    width:520px;height:100%;
637    transform-style:preserve-3d;
638  }
639  .inv-card{
640    position:absolute;
640left:50%;top:50%;
641    width:520px;height:340px;
642    margin-left:-260px;margin-top:-170px;
643    border-radius:18px;
644    overflow:hidden;
645    background:#0a0d14;
646    border:1px solid rgba(255,255,255,.08);
647    transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease, filter .6s ease, box-shadow .6s ease;
648    will-change:transform, opacity;
649    cursor:pointer;
650    backface-visibility:hidden;
651  }
652  .inv-card .card-img{
653    position:absolute;inset:0;
654    background-size:cover;background-position:center;
655    transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
656  }
657  .inv-card .card-shade{
658    position:absolute;inset:0;
659    background:
660      linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%),
661      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 30%);
662    pointer-events:none;
663  }
664  .inv-card .card-tape{
665    position:absolute;top:14px;left:14px;
666    display:flex;align-items:center;gap:8px;
667    padding:6px 10px;border-radius:6px;
668    background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
669    border:1px solid rgba(255,255,255,.08);
670    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
671  }
672  .inv-card .card-tape .pulse{
673    width:6px;height:6px;border-radius:50%;background:#4BD37B;
674    box-shadow:0 0 0 0 rgba(75,211,123,.6);
675    animation:pulse 1.6s ease-out infinite;
676  }
677  @keyframes pulse{
678    0%{box-shadow:0 0 0 0 rgba(75,211,123,.6);}
679    100%{box-shadow:0 0 0 8px rgba(75,211,123,0);}
680  }
681  .inv-card .card-rank{
682    position:absolute;top:14px;right:14px;
683    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;color:var(--ink-dim);
684    background:rgba(0,0,0,.45);padding:6px 10px;border-radius:6px;
685    border:1px solid rgba(255,255,255,.06);
686  }
687  .inv-card .card-bottom{
688    position:absolute;left:0;right:0;bottom:0;
689    padding:18px 20px 16px;
690    display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
691  }
692  .inv-card .card-name{
693    font-weight:500;font-size:22px;line-height:1.05;letter-spacing:-0.02em;color:#fff;
694    max-width:60%;
695  }
696  .inv-card .card-name .yr{
697    display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;color:var(--glow);text-transform:uppercase;margin-bottom:6px;font-weight:400;
698  }
699  .inv-card .card-chip{
700    display:inline-flex;align-items:center;gap:6px;
701    padding:5px 9px;border-radius:999px;
702    background:rgba(39,117,202,.15);
703    border:1px solid rgba(39,117,202,.4);
704    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7AB3F2;
705  }
706  .inv-card .card-chip::before{
707    content:"";width:6px;height:6px;border-radius:50%;background:#2775CA;
708    box-shadow:0 0 8px rgba(39,117,202,.8);
709  }
710
711  /* Center (active) glow */
712  .inv-card.is-center{
713    box-shadow:
714      0 30px 80px rgba(0,0,0,.6),
715      0 0 60px rgba(240,191,61,.18),
716      0 0 0 1px rgba(240,191,61,.25) inset;
717  }
718  .inv-card.is-center .card-img{transform:scale(1.04);}
719
720  /* Side panels */
721  .inv-meta{
722    position:absolute;top:50%;transform:translateY(-50%);
723    width:240px;
724    pointer-events:auto;
725    z-index:5;
726  }
727  .inv-meta-left{ left:24px; }
728  .inv-meta-right{ right:24px; text-align:right; }
729
730  .inv-meta .meta-label{
731    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
732    margin-top:18px;
733  }
734  .inv-meta .meta-label:first-child{margin-top:0;}
735  .inv-meta .meta-value{
736    font-weight:500;font-size:16px;letter-spacing:-0.01em;color:var(--ink);
737    margin-top:4px;
738    transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
739  }
740  .inv-meta .meta-value.swap{opacity:0;transform:translateY(6px);}
741
742  /* USDC tag */
743  .usdc-tag{
744    display:inline-flex;align-items:center;gap:8px;
745    padding:6px 10px;border-radius:999px;
746    background:rgba(39,117,202,.1);
747    border:1px solid rgba(39,117,202,.35);
748    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7AB3F2;
749  }
750  .usdc-tag .usdc-mark{width:18px;height:18px;display:inline-block;}
751  .usdc-tag .usdc-mark svg{width:100%;height:100%;display:block;}
752  .usdc-amount{
753    font-weight:500;
754    font-size:clamp(38px, 4.2vw, 56px);
755    line-height:1;letter-spacing:-0.04em;color:var(--ink);
756    margin-top:14px;
757    font-variant-numeric:tabular-nums;
758    transition:opacity .25s ease;
759  }
760  .usdc-amount .sym{
761    font-size:.5em;color:#2775CA;font-weight:600;letter-spacing:.04em;margin-right:4px;vertical-align:.18em;
762  }
763  .usdc-sub{
764    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);
765    margin-top:10px;
766  }
767  .usdc-cta{
768    margin-top:22px;
769    display:inline-flex;align-items:center;gap:10px;
770    padding:10px 16px;border-radius:999px;
771    background:#2775CA;border:1px solid #2775CA;
772    color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
773    cursor:pointer;
774    box-shadow:0 12px 30px rgba(39,117,202,.4);
775    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
776  }
777  .usdc-cta:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(39,117,202,.55);background:#1f63ad;}
778  .usdc-cta span{transition:transform .2s ease;}
779  .usdc-cta:hover span{transform:translateX(3px);}
780
781  /* Controls */
782  .inv-controls{
783    margin-top:36px;
784    display:flex;align-items:center;gap:18px;
785  }
786  .inv-btn{
787    width:44px;height:44px;border-radius:50%;
788    background:rgba(255,255,255,.04);
789    border:1px solid rgba(255,255,255,.12);
790    color:var(--ink);
791    display:grid;place-items:center;
792    cursor:pointer;
793    transition:background .2s ease, border-color .2s ease, transform .2s ease;
794  }
795  .inv-btn:hover{background:rgba(240,191,61,.1);border-color:rgba(240,191,61,.45);color:var(--glow);}
796  .inv-btn svg{width:18px;height:18px;}
797
798  .inv-scrubber{
799    display:flex;align-items:center;gap:10px;
800  }
801  .inv-tick{
802    position:relative;
803    width:40px;height:24px;
804    cursor:pointer;
805    display:grid;place-items:center;
806    border:0;background:transparent;padding:0;
807  }
808  .inv-tick::before{
809    content:"";display:block;width:100%;height:2px;border-radius:1px;
810    background:rgba(255,255,255,.12);
811    transition:background .3s ease, height .3s ease;
812  }
813  .inv-tick.is-active::before{
814    background:linear-gradient(90deg, var(--glow-2), var(--glow));
815    height:3px;
816    box-shadow:0 0 12px rgba(240,191,61,.6);
817  }
818  .inv-tick:hover::before{background:rgba(240,191,61,.5);}
819
820  .inv-counter{
821    margin-left:14px;
822    font-size:13px;letter-spacing:.2em;color:var(--ink);
823  }
824  .inv-counter .dim{color:var(--ink-dim);margin:0 4px;}
825
826  /* Browse more CTA */
827  .inv-browse{
828    margin-top:44px;
829    display:flex;flex-direction:column;align-items:center;gap:14px;
830  }
831  .inv-browse-cta{
832    display:inline-flex;align-items:center;gap:16px;
833    padding:14px 18px 14px 16px;
834    border-radius:999px;
835    background:linear-gradient(135deg, rgba(240,191,61,.14) 0%, rgba(219,160,25,.06) 100%);
836    border:1px solid rgba(240,191,61,.35);
837    color:var(--ink);text-decoration:none;
838    box-shadow:0 14px 40px rgba(219,160,25,.18), inset 0 0 0 1px rgba(255,255,255,.04);
839    backdrop-filter:blur(8px);
840    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
841  }
842  .inv-browse-cta:hover{
843    transform:translateY(-2px);
844    background:linear-gradient(135deg, rgba(240,191,61,.22) 0%, rgba(219,160,25,.1) 100%);
845    border-color:rgba(240,191,61,.7);
846    box-shadow:0 20px 50px rgba(219,160,25,.32), inset 0 0 0 1px rgba(255,255,255,.06);
847  }
848  .inv-browse-cta .bw-icon{
849    width:38px;height:38px;border-radius:50%;
850    display:grid;place-items:center;
851    background:rgba(0,0,0,.35);
852    border:1px solid rgba(240,191,61,.35);
853    color:var(--glow);
854    flex-shrink:0;
855  }
856  .inv-browse-cta .bw-icon svg{width:16px;height:16px;}
857  .inv-browse-cta .bw-text{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
858  .inv-browse-cta .bw-eye{
859    font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--glow);
860    margin-bottom:4px;
861  }
862  .inv-browse-cta .bw-main{
863    font-weight:500;font-size:15px;letter-spacing:-0.01em;color:var(--ink);
864  }
865  .inv-browse-cta .bw-arrow{
866    width:30px;height:30px;border-radius:50%;
867    display:grid;place-items:center;
868    color:var(--ink);
869    transition:transform .25s ease, color .25s ease;
870  }
871  .inv-browse-cta:hover .bw-arrow{transform:translateX(4px);color:var(--glow);}
872  .inv-browse-cta .bw-arrow svg{width:16px;height:16px;}
873  .inv-browse-meta{
874    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
875    display:flex;align-items:center;gap:8px;
876  }
877  .inv-browse-meta::before{
878    display:none;
879  }
880
881  @media (max-width:1100px){
882    .inv-stage{height:520px;}
883    .inv-meta{position:static;transform:none;width:auto;display:none;}
884  }
885  @media (max-width:720px){
886    .inv-card{width:300px;height:200px;margin-left:-150px;margin-top:-100px;}
887    .inv-deck{width:300px;}
888    .inv-stage{height:380px;}
889    .inv-card .card-name{font-size:16px;}
890  }
891
892  .stack-card{
893    position:sticky;
894    top:calc(var(--home-nav-clearance) + 8vh + (var(--i) - 1) * 18px); /* each card peeks the previous by 18px */
895    height:70vh;
896    margin:0 auto;
897    max-width:1180px;
898    padding:0 32px;
899    display:flex;
900  }
901  .card-inner{
902    position:relative;
903    width:100%;
904    border-radius:32px;
905    padding:56px 64px;
906    overflow:hidden;
907    border:1px solid rgba(255,255,255,.08);
908    background:
909      radial-gradient(120% 100% at 100% 0%, rgba(219,160,25,.18) 0%, rgba(219,160,25,0) 55%),
910      linear-gradient(165deg, #0E1320 0%, #07090F 100%);
911    box-shadow:
912      0 -1px 0 rgba(255,255,255,.04) inset,
913      0 30px 60px rgba(0,0,0,.5),
914      0 0 80px rgba(219,160,25,.08);
915    display:flex;flex-direction:column;justify-content:space-between;
916  }
917  /* Each card a slightly different accent gradient */
918  #card2 .card-inner{ background: radial-gradient(120% 100% at 0% 0%, rgba(240,191,61,.16) 0%, rgba(240,191,61,0) 55%), linear-gradient(165deg, #0B1424 0%, #06090F 100%); }
919  #card3 .card-inner{ background: radial-gradient(100% 80% at 50% 0%, rgba(75,211,123,.14) 0%, rgba(75,211,123,0) 55%), linear-gradient(165deg, #0A1118 0%, #06080D 100%); }
920  #card4 .card-inner{ background: radial-gradient(120% 100% at 100% 100%, rgba(182,110,7,.18) 0%, rgba(182,110,7,0) 55%), linear-gradient(165deg, #110D08 0%, #07060A 100%); }
921
922  .card-meta{
923    display:flex;justify-content:space-between;align-items:center;
924    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
925  }
926  .card-num{color:var(--glow);}
927  .card-title{
928    font-weight:500;
929    font-size:clamp(40px, 6vw, 96px);
930    line-height:.95;letter-spacing:-0.035em;
931    margin:36px 0 22px;
932    max-width:14ch;
933    color:var(--ink);
934  }
935  .card-body{
936    max-width:54ch;
937    color:var(--ink-dim);
938    font-size:clamp(15px, 1.2vw, 19px);
939    line-height:1.5;letter-spacing:-0.005em;
940    margin:0;
941  }
942  .card-stats{
943    display:flex;gap:48px;flex-wrap:wrap;
944    border-top:1px solid rgba(255,255,255,.08);
945    padding-top:24px;margin-top:24px;
946    max-width:60ch;
947  }
948  .card-stats > div{display:flex;flex-direction:column;gap:4px;}
949  .card-stats b{font-weight:500;font-size:clamp(18px,1.6vw,24px);color:var(--ink);letter-spacing:-0.01em;}
950  .card-stats span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);}
951
952  /* Card art (right-side decorative) */
953  .card-art{
954    position:absolute;right:48px;top:50%;transform:translateY(-50%);
955    width:280px;height:280px;
956    pointer-events:none;
957    display:grid;place-items:center;
958  }
959  .card-art-1 .badge-ring{
960    position:absolute;inset:0;border-radius:50%;
961    border:1px dashed rgba(240,191,61,.35);
962    display:flex;align-items:center;justify-content:center;
963    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.4em;color:var(--ink-dim);
964    animation:spin 30s linear infinite;
965  }
966  .card-art-1 .badge-ring span{position:absolute;}
967  .card-art-1 .badge-ring span:nth-child(1){top:6px;left:50%;transform:translateX(-50%);}
968  .card-art-1 .badge-ring span:nth-child(2){right:6px;top:50%;transform:translateY(-50%) rotate(90deg);}
969  .card-art-1 .badge-ring span:nth-child(3){bottom:6px;left:50%;transform:translateX(-50%) rotate(180deg);}
970  .card-art-1 .badge-ring span:nth-child(4){left:6px;top:50%;transform:translateY(-50%) rotate(270deg);}
971  .card-art-1 .badge-core{
972    width:140px;height:140px;border-radius:50%;
973    background:radial-gradient(circle at 30% 30%, #f0bf3d 0%, #dba019 50%, #0B1530 100%);
974    display:grid;place-items:center;color:#fff;font-size:48px;font-weight:300;
975    box-shadow:0 20px 60px rgba(219,160,25,.6), inset 0 0 0 1px rgba(255,255,255,.15);
976  }
977  @keyframes spin{to{transform:rotate(360deg);}}
978
979  .card-art-2 svg{width:100%;height:100%;}
980
981  .card-art-3{width:340px;}
982  .card-art-3 .spark{width:100%;height:140px;display:block;}
983
984  .card-art-4 .vault{
985    position:relative;width:240px;height:240px;display:grid;place-items:center;
986  }
987  .card-art-4 .vault-ring{
988    position:absolute;inset:0;border-radius:50%;
989    border:1px solid rgba(244,231,114,.25);
990  }
991  .card-art-4 .vault-ring.r2{
992    inset:30px;border-color:rgba(244,231,114,.4);
993  }
994  .card-art-4 .vault-core{
995    width:120px;height:120px;border-radius:50%;
996    background:radial-gradient(circle at 30% 30%, #FAC730 0%, #B66E07 60%, #3a1f02 100%);
997    display:grid;place-items:center;color:#fff;
998    box-shadow:0 20px 60px rgba(182,110,7,.55), inset 0 0 0 1px rgba(255,255,255,.18);
999  }
1000  .card-art-4 .vault-core svg{width:48px;height:48px;}
1001
1002  @media (max-width:900px){
1003    .stack-card{height:auto;min-height:80vh;padding:0 16px;top:calc(var(--home-nav-clearance) + 6vh + (var(--i) - 1) * 14px);}
1004    .card-inner{padding:36px 28px;}
1005    .card-art{display:none;}
1006    .card-stats{gap:24px;}
1007  }
1008
1009  /* ---- Hub / Network section ---- */
1010  .combined-scroll{
1011    position:relative;
1012    height:420vh;height:420dvh;
1013    background:#05070B;
1014  }
1015  .combined-pin{
1016    position:sticky;top:var(--home-nav-clearance);height:calc(100vh - var(--home-nav-clearance));height:calc(100dvh - var(--home-nav-clearance));width:100%;overflow:hidden;
1017    background:
1018      radial-gradient(80% 60% at 50% 60%, rgba(219,160,25,.07) 0%, rgba(0,0,0,0) 70%),
1019      #05070B;
1020  }
1021  .hub-svg{
1022    position:absolute;inset:0;width:100%;height:100%;
1023    pointer-events:none;
1024  }
1025  .conn{
1026    stroke-dasharray: 1000;
1027    stroke-dashoffset: 1000;
1028    transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1);
1029  }
1030  .conn.in{ stroke-dashoffset: 0; }
1031
1032  .hub{
1033    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.18);
1034    width:560px;height:560px;
1035    display:grid;place-items:center;
1036    will-change:transform;
1037    transition:none;
1038  }
1039  .hub-gear{
1040    position:absolute;inset:0;
1041    animation:hubSpin 80s linear infinite;
1042  }
1043  .hub-gear svg{width:100%;height:100%;display:block;
1044    filter:drop-shadow(0 0 60px rgba(219,160,25,.35));
1045  }
1046  @keyframes hubSpin{to{transform:rotate(360deg);}}
1047  .hub-content{
1048    position:relative;z-index:2;
1049    width:62%;text-align:center;
1050    color:var(--ink);
1051    opacity:0;
1052    transition:opacity .6s ease .2s;
1053  }
1054  .hub.in .hub-content{opacity:1;}
1055  .hub-eyebrow{
1056    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#dba019;
1057    margin-bottom:18px;
1058  }
1059  .hub-title{
1060    font-weight:500;font-size:clamp(20px, 2.2vw, 32px);
1061    line-height:1.15;letter-spacing:-0.02em;margin:0;color:var(--ink);
1062  }
1063  .hub-chips{
1064    margin-top:22px;
1065    display:flex;justify-content:center;gap:10px;
1066    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
1067  }
1068  .hub-chips span:nth-child(odd){color:var(--ink);}
1069
1070  /* Satellites */
1071  .sat{
1072    position:absolute;
1073    width:120px;height:120px;
1074    display:grid;place-items:center;
1075    opacity:0;
1076    transition:opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
1077    will-change:transform, opacity;
1078  }
1079  .sat img{
1080    width:100%;height:100%;display:block;object-fit:contain;
1081    filter:invert(64%) sepia(89%) saturate(458%) hue-rotate(2deg) brightness(92%) contrast(91%)
1082           drop-shadow(0 8px 20px rgba(219,160,25,.3));
1083  }
1084  /* Satellite positions match SVG line endpoints (viewBox 1600x900):
1085     (220,180) (180,450) (220,720) (1380,180) (1420,450) (1380,720) */
1086  .sat-0{ left:13.75%; top:20%; transform:translate(-50%,-50%) translate(-40px,-30px); }
1087  .sat-1{ left:11.25%; top:50%; transform:translate(-50%,-50%) translate(-50px,0); }
1088  .sat-2{ left:13.75%; top:80%; transform:translate(-50%,-50%) translate(-40px, 30px); }
1089  .sat-3{ left:86.25%; top:20%; transform:translate(-50%,-50%) translate(40px,-30px); }
1090  .sat-4{ left:88.75%; top:50%; transform:translate(-50%,-50%) translate(50px, 0); }
1091  .sat-5{ left:86.25%; top:80%; transform:translate(-50%,-50%) translate(40px, 30px); }
1092  .sat.in{ opacity:1; transform:translate(-50%,-50%); }
1093
1094  @media (max-width:900px){
1095    .hub{width:300px;height:300px;}
1096    .sat{width:72px;height:72px;}
1097    .hub-title{font-size:16px;}
1098  }
1099
1100  /* ---- Combined section CTA (end phase) ---- */
1101  .cta-copy{
1102    position:absolute;inset:0;
1103    display:flex;flex-direction:column;
1104    align-items:center;justify-content:center;
1105    gap:36px;padding:0 24px;
1106    z-index:2;pointer-events:none;
1107  }
1108  .cta-headline{
1109    font-weight:500;
1110    font-size:clamp(36px,5.6vw,84px);
1111    line-height:1.02;letter-spacing:-0.035em;
1112    color:var(--ink);text-align:center;
1113    opacity:0;
1114    will-change:transform,opacity;
1115  }
1116  .cta-headline em{font-style:normal;color:var(--glow);font-weight:400;}
1117  .cta-buttons{
1118    display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
1119  }
1120  .cta-store-btn{
1121    display:inline-flex;align-items:center;gap:14px;
1122    padding:14px 24px;border-radius:16px;
1123    background:rgba(255,255,255,.06);
1124    border:1px solid rgba(255,255,255,.14);
1125    color:var(--ink);text-decoration:none;
1126    backdrop-filter:blur(10px);
1127    opacity:0;pointer-events:none;
1128    will-change:opacity,transform;
1129    transition:background .25s ease,border-color .25s ease,
1130               transform .25s ease,box-shadow .25s ease;
1131  }
1132  .cta-store-btn:hover{
1133    background:rgba(255,255,255,.10);
1134    border-color:rgba(240,191,61,.45);
1135    transform:translateY(-2px);
1136    box-shadow:0 12px 40px rgba(219,160,25,.18);
1137  }
1138  .cta-store-icon{
1139    width:26px;height:26px;
1140    display:grid;place-items:center;flex-shrink:0;
1141  }
1142  .cta-store-icon svg{width:100%;height:100%;display:block;}
1143  .cta-store-text{
1144    display:flex;flex-direction:column;
1145    line-height:1.15;text-align:left;
1146  }
1147  .cta-store-sub{
1148    font-family:'JetBrains Mono',monospace;
1149    font-size:9px;letter-spacing:.24em;text-transform:uppercase;
1150    color:var(--ink-dim);margin-bottom:3px;
1151  }
1152  .cta-store-name{
1153    font-weight:500;font-size:16px;letter-spacing:-0.01em;
1154    color:var(--ink);
1155  }
1156  @media (max-width:560px){
1157    .cta-headline{font-size:clamp(28px,7.5vw,48px);}
1158    .cta-buttons{flex-direction:column;align-items:center;gap:12px;}
1159    .cta-store-btn{padding:12px 20px;gap:12px;width:240px;}
1160  }
1161
1162  /* ---- Dealership / Globe scroll-driven section ---- */
1163  .dealer-scroll{
1164    position:relative;
1165    height:360vh;height:360dvh;
1166    background:#05070B;
1167  }
1168  .dealer-pin{
1169    position:sticky;top:var(--home-nav-clearance);height:calc(100vh - var(--home-nav-clearance));height:calc(100dvh - var(--home-nav-clearance));width:100%;overflow:hidden;
1170    background:
1171      radial-gradient(70% 60% at 50% 50%, rgba(219,160,25,.06) 0%, rgba(0,0,0,0) 70%),
1172      #05070B;
1173  }
1174
1175  /* Dealership copy reveal */
1176  .dealer-copy{
1177    position:absolute;inset:0;display:grid;place-items:center;
1178    pointer-events:none;
1179  }
1180  .dealer-copy-inner{
1181    text-align:center;padding:0 24px;max-width:22ch;
1182  }
1183  .dealer-line{
1184    display:block;
1185    font-weight:500;
1186    font-size:clamp(40px, 6.4vw, 96px);
1187    line-height:1.05;letter-spacing:-0.035em;
1188    color:var(--ink);
1189    opacity:0;
1190    will-change:transform,opacity,filter;
1191    text-wrap:balance;
1192  }
1193  .dealer-line em{font-style:normal;color:var(--glow);font-weight:400;}
1194  .dealer-line + .dealer-line{margin-top:14px;}
1195
1196  /* Globe */
1197  .globe-wrap{
1198    position:absolute;left:50%;top:50%;
1199    transform:translate(-50%,-50%) scale(.6);
1200    width:min(620px, 78vw);
1201    aspect-ratio:1/1;
1202    opacity:0;
1203    will-change:transform,opacity;
1204    pointer-events:none;
1205  }
1206  .globe{
1207    position:absolute;inset:0;border-radius:50%;
1208    background:
1209      radial-gradient(circle at 30% 28%, rgba(95,168,255,.18) 0%, rgba(95,168,255,0) 45%),
1210      radial-gradient(circle at 70% 75%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 55%),
1211      radial-gradient(circle at 50% 50%, #0c1530 0%, #060a18 60%, #03050B 100%);
1212    box-shadow:
1213      0 30px 100px rgba(47,107,255,.18),
1214      0 0 80px rgba(219,160,25,.08),
1215      inset 0 0 0 1px rgba(255,255,255,.06),
1216      inset 0 -20px 60px rgba(0,0,0,.6),
1217      inset 0 8px 24px rgba(255,255,255,.06);
1218    overflow:hidden;
1219  }
1220  .globe-grid{
1221    position:absolute;inset:0;width:100%;height:100%;
1222    opacity:.55;
1223    mix-blend-mode:screen;
1224  }
1225  .globe-grid .lat,.globe-grid .lon{
1226    fill:none;stroke:rgba(140,180,240,.28);stroke-width:.6;
1227  }
1228  .globe-spin{
1229    position:absolute;inset:0;width:100%;height:100%;
1230    animation:globeSpin 60s linear infinite;
1231    transform-origin:50% 50%;
1232  }
1233  @keyframes globeSpin{to{transform:rotate(360deg);}}
1234  .globe-atmos{
1235    position:absolute;inset:-6%;border-radius:50%;
1236    background:radial-gradient(circle, rgba(95,168,255,0) 58%, rgba(95,168,255,.18) 66%, rgba(95,168,255,0) 78%);
1237    pointer-events:none;
1238  }
1239
1240  /* Pins */
1241  .pins{position:absolute;inset:0;}
1242  .pin{
1243    position:absolute;
1244    width:14px;
1244height:14px;
1245    transform:translate(-50%,-50%) scale(0);
1246    opacity:0;
1247    transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
1248  }
1249  .pin .dot{
1250    position:absolute;inset:0;border-radius:50%;
1251    background:radial-gradient(circle, #6F8FE8 0%, #2a3d80 70%);
1252    box-shadow:0 0 8px rgba(95,168,255,.5), inset 0 0 0 1px rgba(255,255,255,.2);
1253  }
1254  .pin .pulse{
1255    position:absolute;inset:-6px;border-radius:50%;
1256    border:1px solid rgba(95,168,255,.4);
1257    opacity:0;
1258  }
1259  .pin.in{transform:translate(-50%,-50%) scale(1);opacity:.55;}
1260
1261  .pin.us{
1262    width:22px;height:22px;
1263  }
1264  .pin.us .dot{
1265    background:radial-gradient(circle, #FAC730 0%, #dba019 50%, #6e3d04 100%);
1266    box-shadow:
1267      0 0 14px rgba(240,191,61,.85),
1268      0 0 38px rgba(240,191,61,.5),
1269      inset 0 0 0 1px rgba(255,255,255,.35);
1270  }
1271  .pin.us .pulse{
1272    inset:-10px;
1273    border:1px solid rgba(240,191,61,.5);
1274    animation:pinPulse 2.4s ease-out infinite;
1275  }
1276  .pin.us.in{opacity:1;}
1277
1278  @keyframes pinPulse{
1279    0%{transform:scale(.4);opacity:.85;}
1280    80%{transform:scale(1.6);opacity:0;}
1281    100%{transform:scale(1.6);opacity:0;}
1282  }
1283
1284  /* Globe-section copy + CTA */
1285  .globe-copy{
1286    position:absolute;left:0;right:0;bottom:9vh;
1287    text-align:center;padding:0 24px;
1288    opacity:0;transform:translateY(16px);
1289    will-change:opacity,transform;
1290    pointer-events:none;
1291  }
1292  .globe-copy.in{pointer-events:auto;}
1293  .globe-eyebrow{
1294    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
1295    color:#dba019;margin-bottom:14px;
1296  }
1297  .globe-headline{
1298    font-weight:500;font-size:clamp(28px, 3.6vw, 52px);
1299    line-height:1.1;letter-spacing:-0.025em;color:var(--ink);
1300    max-width:22ch;margin:0 auto;
1301  }
1302  .globe-headline em{font-style:normal;color:var(--glow);font-weight:400;}
1303  .globe-sub{
1304    margin-top:10px;color:var(--ink-dim);
1305    font-size:clamp(14px,1.2vw,17px);letter-spacing:-0.005em;
1306  }
1307  .globe-cta{
1308    display:inline-flex;align-items:center;gap:10px;
1309    margin-top:26px;
1310    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
1311    padding:14px 26px;border-radius:999px;
1312    color:#0a0805;background:linear-gradient(180deg,#FAC730 0%, #dba019 100%);
1313    border:1px solid rgba(255,255,255,.18);
1314    text-decoration:none;font-weight:600;
1315    box-shadow:0 14px 40px rgba(219,160,25,.35), inset 0 1px 0 rgba(255,255,255,.4);
1316    transition:transform .25s ease, box-shadow .25s ease;
1317  }
1318  .globe-cta:hover{transform:translateY(-1px);box-shadow:0 18px 50px rgba(219,160,25,.5), inset 0 1px 0 rgba(255,255,255,.5);}
1319  .globe-cta .arrow{display:inline-block;transition:transform .25s ease;}
1320  .globe-cta:hover .arrow{transform:translateX(3px);}
1321
1322  @media (max-width:900px){
1323    .dealer-line{font-size:clamp(30px,8vw,52px);}
1324    .globe-wrap{width:min(420px,84vw);}
1325    .globe-headline{font-size:clamp(22px,5.4vw,32px);}
1326  }
1327
1328  /* ---- Key-fall section ---- */
1329
1330  /* Side text */
1331  .kf-side{
1332    position:absolute;top:50%;
1333    font-weight:500;
1334    font-size:clamp(36px, 5.6vw, 80px);
1335    line-height:1;letter-spacing:-0.035em;
1336    color:var(--ink);
1337    opacity:0;
1338    will-change:transform,opacity,filter;
1339    pointer-events:none;
1340  }
1341  .kf-side em{font-style:normal;color:var(--glow);font-weight:400;}
1342  .kf-side.left{left:8vw;transform:translateY(-50%);text-align:left;}
1343  .kf-side.right{right:8vw;transform:translateY(-50%);text-align:right;}
1344
1345  /* Falling key */
1346  .kf-key{
1347    position:absolute;left:50%;top:0;
1348    width:clamp(90px, 9vw, 140px);
1349    transform:translate(-50%, -120%) rotate(-8deg);
1350    will-change:transform,opacity;
1351    filter:drop-shadow(0 30px 50px rgba(219,160,25,.45)) drop-shadow(0 0 30px rgba(240,191,61,.35));
1352    pointer-events:none;
1353  }
1354  .kf-key svg{width:100%;height:auto;display:block;}
1355
1356  /* Surface (subtle horizon at impact) */
1357  .kf-surface{
1358    position:absolute;left:50%;top:50%;
1359    transform:translate(-50%,-50%);
1360    width:140%;height:1px;
1361    background:linear-gradient(90deg, transparent 0%, rgba(219,160,25,.35) 50%, transparent 100%);
1362    opacity:0;
1363  }
1364
1365  /* Ripple rings */
1366  .kf-ripples{
1367    position:absolute;
1367left:50%;top:50%;
1368    transform:translate(-50%,-50%);
1369    width:0;height:0;pointer-events:none;
1370  }
1371  .kf-ripple{
1372    position:absolute;left:50%;top:50%;
1373    border-radius:50%;
1374    border:1px solid rgba(240,191,61,.55);
1375    transform:translate(-50%,-50%) scale(0);
1376    opacity:0;
1377    will-change:transform,opacity;
1378  }
1379
1380  /* Radiating asset rings */
1381  .kf-assets{
1382    position:absolute;left:50%;top:50%;
1383    transform:translate(-50%,-50%);
1384    width:0;height:0;
1385    pointer-events:none;
1386  }
1387  .kf-asset{
1388    position:absolute;left:50%;top:50%;
1389    transform:translate(-50%,-50%) scale(.6);
1390    width:88px;height:88px;
1391    display:grid;place-items:center;
1392    opacity:0;
1393    will-change:transform,opacity;
1394  }
1395  .kf-asset img{
1396    width:100%;height:100%;object-fit:contain;display:block;
1397    filter:drop-shadow(0 8px 18px rgba(219,160,25,.35));
1398  }
1399  .kf-asset.car   img{width:108%;height:108%;}
1400  .kf-asset.house img{width:78%;height:78%;}
1401  .kf-asset.jet   img{width:100%;height:100%;}
1402  .kf-asset.yacht img{width:108%;height:108%;}
1403
1404  @media (max-width:900px){
1405    .kf-side{font-size:clamp(24px,7vw,40px);}
1406    .kf-side.left{left:5vw;}
1407    .kf-side.right{right:5vw;}
1408    .kf-asset{width:54px;height:54px;}
1409  }
1410
1411  /* ================================================================
1412     MOBILE  ≤ 560px
1413     Desktop layout is completely untouched above this breakpoint.
1414     Goal: mirror the desktop as closely as possible on narrow screens.
1415     ================================================================ */
1416  @media (max-width:560px){
1417    :root{--home-nav-clearance:68px;}
1418
1419    /* --- Nav --- */
1420    .nav{padding:16px 18px;}
1421    .logo img{height:36px;}
1422    .cta{font-size:10px;letter-spacing:.12em;padding:9px 14px;}
1423
1424    /* --- Hero headline --- */
1425    .headline{font-size:clamp(32px,9vw,120px);}
1426    .hl-line-1{white-space:normal;}   /* remove nowrap — let it wrap on narrow screens */
1427
1428    /* --- Hero words & closer --- */
1429    .hero-word{font-size:clamp(48px,13vw,72px);}
1430    .hero-closer{font-size:clamp(26px,6.8vw,40px);}
1431    /* Scale coins down so they don't crowd the phone */
1432    .orb.med{width:90px;height:90px;}
1433    .orb.small{width:68px;height:68px;}
1434
1435    /* --- Phone --- */
1436    .phone{width:248px;height:510px;border-radius:46px;}
1437    .screen{border-radius:36px;}
1438
1439    /* --- Racetrack --- */
1440    .step-left{left:3%;}
1441    .step-right{right:3%;}
1442    .step-label{font-size:15px;max-width:11ch;}
1443    .car{width:60px;height:60px;}
1444
1445    /* --- Inventory showcase --- */
1446    .inv-showcase{padding:0 14px;margin:40px auto 56px;}
1447    .inv-title{font-size:clamp(30px,8.5vw,52px);}
1448    /* Currency switcher: let it wrap gracefully */
1449    .inv-ccy{flex-wrap:wrap;justify-content:center;gap:10px;}
1450    .ccy-opt{padding:7px 10px;font-size:9.5px;letter-spacing:.18em;}
1451    .inv-stage{height:310px;}
1452    .inv-card{width:268px;height:176px;margin-left:-134px;margin-top:-88px;}
1453    .inv-deck{width:268px;}
1454    .inv-card .card-name{font-size:14px;}
1455    .usdc-amount{font-size:clamp(24px,7.2vw,36px);}
1456    .inv-controls{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px;}
1457    .inv-scrubber{flex-wrap:wrap;justify-content:center;gap:8px;}
1458    .inv-browse-cta{padding:12px 14px 12px 12px;gap:12px;}
1459    .inv-browse-cta .bw-main{font-size:13px;}
1460
1461    /* --- Stacking cards --- */
1462    .stack-h2{font-size:clamp(34px,9.5vw,60px);margin-bottom:10vh;}
1463    .stack-card{padding:0 10px;top:calc(5vh + (var(--i) - 1) * 12px);}
1464    .card-inner{padding:26px 20px;border-radius:22px;}
1465    .card-title{font-size:clamp(26px,8vw,48px);margin:20px 0 14px;}
1466    .card-body{font-size:14px;}
1467    .card-stats{gap:20px;padding-top:16px;margin-top:16px;}
1468    .card-stats b{font-size:clamp(15px,4vw,19px);}
1469
1470    /* --- Hub / combined section --- */
1471    .hub{width:230px;height:230px;}
1472    .hub-title{font-size:12px;}
1473    /* Right-side satellites overflow a 390px viewport — hide them */
1474    .sat-3,.sat-4,.sat-5{display:none;}
1475    /* Pull left satellites slightly inward */
1476    .sat{width:58px;height:58px;}
1477    .sat-0{left:20%;}
1478    .sat-1{left:15%;}
1479    .sat-2{left:20%;}
1480
1481    /* --- Dealer / Globe --- */
1482    .globe-wrap{width:min(330px,90vw);}
1483    .globe-copy{bottom:5vh;}
1484    .globe-headline{font-size:clamp(18px,5.5vw,26px);}
1485    .globe-sub{font-size:13px;}
1486    .globe-cta{padding:12px 18px;font-size:10px;letter-spacing:.14em;margin-top:16px;}
1487    .dealer-copy-inner{max-width:20ch;}
1488
1489    /* --- Key-fall side text --- */
1490    .kf-side{font-size:clamp(16px,6vw,26px);}
1491    .kf-side.left{left:3vw;}
1492    .kf-side.right{right:3vw;}
1493  }
1494
1495  /* Extra nudge for the very smallest phones (≤ 390px) */
1496  @media (max-width:390px){
1497    .hero-word{font-size:clamp(42px,12vw,64px);}
1498    .phone{width:230px;height:475px;}
1499    .inv-card{width:248px;height:163px;margin-left:-124px;margin-top:-81px;}
1500    .inv-deck{width:248px;}
1501    .inv-stage{height:290px;}
1502    .card-title{font-size:clamp(24px,8.5vw,44px);}
1503    .globe-wrap{width:88vw;}
1504  }
1505</style>
1506<link rel="stylesheet" href="/mobile-navigation.css" />
1507<link rel="stylesheet" href="/site-chrome.css" />
1508<script src="/mobile-navigation.js" defer></script>
1508
1509</head>
1510<body style="margin:0;background:#05070B">
1511<div id="ccInitialLoading" aria-hidden="true" style="position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;background:#000">
1512  <div style="display:grid;justify-items:center;gap:18px">
1513    <img src="/cars-crypto-loading.png" alt="" width="1536" height="1024" style="display:block;width:min(56vw,640px);height:auto;max-height:70vh;object-fit:contain;filter:drop-shadow(0 0 32px rgba(240,191,61,.35));animation:ccInitPulse 1.6s ease-in-out infinite" />
1514    <span aria-hidden="true" style="display:block;width:34px;height:34px;border-radius:999px;border:3px solid rgba(240,191,61,.18);border-top-color:#f0bf3d;border-right-color:rgba(255,224,130,.85);box-shadow:0 0 18px rgba(240,191,61,.28);animation:ccInitSpin .9s linear infinite"></span>
1515  </div>
1516</div>
1517<style>
1518  @keyframes ccInitPulse{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
1519  @keyframes ccInitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
1520  @media (prefers-reduced-motion:reduce){
1521    #ccInitialLoading img,
1522    #ccInitialLoading span[aria-hidden="true"]{animation:none !important}
1523  }
1524</style>
1525<script>
1526  (function(){
1527    var overlay = document.getElementById('ccInitialLoading');
1528    var hidden = false;
1529    var safetyTimer;
1530    function hide(){
1531      if (hidden) return;
1532      hidden = true;
1533      if (safetyTimer) window.clearTimeout(safetyTimer);
1534      overlay.style.opacity = '0';
1535      overlay.style.visibility = 'hidden';
1536      overlay.style.pointerEvents = 'none';
1537    }
1538    function hideAfterStablePaint(){
1539      var fontsReady = document.fonts && document.fonts.ready
1540        ? document.fonts.ready.catch(function(){})
1541        : Promise.resolve();
1542      fontsReady.then(function(){
1543        window.requestAnimationFrame(function(){
1544          window.requestAnimationFrame(hide);
1545        });
1546      });
1547    }
1548    overlay.style.transition = 'opacity .2s ease-out,visibility 0s linear .2s';
1549    if (document.readyState === 'complete') hideAfterStablePaint();
1550    else window.addEventListener('load', hideAfterStablePaint, { once:true });
1551    safetyTimer = window.setTimeout(hide, 5000);
1552  })();
1553</script>
1553
1554
1555<nav class="nav">
1556  <div class="logo">
1557    <span class="cc-gold-logo" role="img" aria-label="Cars & Crypto"></span>
1558    <span class="tag"></span>
1559  </div>
1560  <div class="nav-actions" data-desktop-navigation>
1561    <a class="cta nav-inventory" href="/inventory">Browse Inventory</a>
1562    <a class="cta" href="/services">Services</a>
1563    <a class="cta" href="/misc">Misc</a>
1564    <a class="cta" href="/rentals">Rentals</a>
1565    <a class="cta" href="https://apps.apple.com/app/id6757994357" target="_blank" rel="noopener noreferrer">Download App</a>
1566    <a class="cta nav-contact" href="/contact">Contact</a>
1567  </div>
1568  <div data-mobile-navigation data-mobile-navigation-auto></div>
1569</nav>
1570
1571<section class="hero-scroll" id="heroScroll">
1572  <div class="hero-pin" id="heroPin">
1573    <!-- Background layer — fades to transparent to reveal racetrack as hero exits -->
1574    <div class="hero-bg" id="heroBg"></div>
1575    <div class="stars"></div>
1576
1577    <div class="eyebrow" id="eyebrow" style="opacity:0;display:none;"></div>
1578
1579    <div class="ghost" id="ghost" aria-hidden="true">Own.</div>
1580
1581    <div class="stage">
1582
1583      <!-- Floating tokenized orbs — 3D glossy coins -->
1584      <div class="orbs" id="orbs">
1585        <div class="orb med"   data-orb="eth"  style="left:8%;  top:42%;">
1586          <div class="coin coin-eth">
1587            <div class="coin-ring"></div>
1588            <div class="coin-face">
1589              <svg viewBox="0 0 32 32" aria-hidden="true"><path d="M16 3 L16 12.8 L24 16.2 Z" fill="#9CB7FF"/><path d="M16 3 L8 16.2 L16 12.8 Z" fill="#C5D4FF"/><path d="M16 17.6 L24 13.2 L16 24 Z" fill="#6F8FE8"/><path d="M16 17.6 L8 13.2 L16 24 Z" fill="#A8BEF0"/><path d="M16 19.4 L24 15 L16 29 L8 15 Z" fill="none"/></svg>
1590            </div>
1591          </div>
1592        </div>
1593        <div class="orb small" data-orb="usdc" style="left:14%; top:72%;">
1594          <div class="coin coin-usdc">
1595            <div class="coin-ring"></div>
1596            <div class="coin-face">
1597              <svg viewBox="0 0 32 32" aria-hidden="true">
1598                <circle cx="16" cy="16" r="10" fill="none" stroke="#5FA8FF" stroke-width="1.6" stroke-dasharray="14 3"/>
1599                <text x="16" y="22" text-anchor="middle" font-family="Inter Tight,sans-serif" font-weight="600" font-size="15" fill="#5FA8FF">$</text>
1600              </svg>
1601            </div>
1602          </div>
1603        </div>
1604        <div class="orb med" data-orb="btc" style="right:9%; top:38%;">
1605          <div class="coin coin-btc">
1606            <div class="coin-ring"></div>
1607            <div class="coin-face">
1608              <svg viewBox="0 0 32 32" aria-hidden="true">
1609                <text x="16" y="22" text-anchor="middle" font-family="Inter Tight,sans-serif" font-weight="700" font-size="18" fill="#F7931A">₿</text>
1610              </svg>
1611            </div>
1612          </div>
1613        </div>
1614        <div class="orb small" data-orb="sol"  style="right:16%; top:70%;">
1615          <div class="coin coin-sol">
1616            <div class="coin-ring"></div>
1617            <div class="coin-face">
1618              <svg viewBox="0 0 32 32" aria-hidden="true">
1619                <defs><linearGradient id="solG" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#14F195"/><stop offset="100%" stop-color="#9945FF"/></linearGradient></defs>
1620                <path d="M10 12 L22 12 L24 9 L8 9 Z" fill="url(#solG)"/>
1621                <path d="M8 17 L20 17 L22 14 L10 14 Z" fill="url(#solG)"/>
1622                <path d="M10 22 L22 22 L24 19 L8 19 Z" fill="url(#solG)"/>
1623              </svg>
1624            </div>
1625          </div>
1626        </div>
1627        <div class="orb small" data-orb="xrp" style="left:40%; top:14%;">
1628          <div class="coin coin-xrp">
1629            <div class="coin-ring"></div>
1630            <div class="coin-face">
1631              <svg viewBox="0 0 32 32" aria-hidden="true" stroke="#EAEEF5" stroke-width="2" stroke-linecap="round" fill="none">
1632                <path d="M9 10 L16 17 L23 10"/>
1633                <path d="M9 22 L16 15 L23 22"/>
1634              </svg>
1635            </div>
1636          </div>
1637        </div>
1638      </div>
1639
1640      <!-- Phone -->
1641      <div class="phone-wrap" id="phoneWrap">
1642        <div class="phone">
1643          <div class="screen" id="screen">
1644            <div class="notch">
1645              <span class="dot"></span>
1646              <span class="cam"></span>
1647            </div>
1648
1649            <!-- Concierge chat (visible once phone pulls back) -->
1650            <div class="statusbar" id="statusbar" style="opacity:0;">
1651              <span>9:41</span>
1652              <span class="icons">
1653                <span class="bars"><span></span><span></span><span></span><span></span></span>
1654                <span>100%</span>
1655              </span>
1656            </div>
1657
1658            <div class="chatbar" id="chatbar" style="opacity:0;">
1659              <span class="back">‹</span>
1660              <div class="avatar"></div>
1661              <div class="who"><b>Marcus Hale</b><span>Concierge</span></div>
1662              <span class="more">⋯</span>
1663            </div>
1664
1665            <div class="messages" id="messages">
1666              <div class="msg them" data-step="1">
1667                Morning, we found that Bugatti Tourbillon you were looking for. 
1668              </div>
1669              <div class="msg you"  data-step="2">
1670                amazing!!! could we do sol?
1671              </div>
1672              <div class="msg them" data-step="3">
1673                Definitely
1674              </div>
1675              <div class="typing" id="typing"><span></span><span></span><span></span></div>
1676            </div>
1677
1678            <div class="composer">
1679              <div class="plus">+</div>
1680              <input placeholder="Message Marcus…" />
1681              <div class="send">
1682                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
1683              </div>
1684            </div>
1685          </div>
1686        </div>
1687      </div>
1688
1689      <!-- Headline (layered above phone in close-up, fades out as phone reveals) -->
1690      <div class="headline-wrap" id="headlineWrap">
1691        <div class="kicker" id="kicker" style="display:none;"></div>
1692        <h1 class="headline">
1693          <span class="hl-line hl-line-1">You earned it on-chain</span>
1694          <span class="hl-line hl-line-2"><br/>So why do they make<br/>spending it <em>so hard?</em></span>
1695        </h1>
1696        <p class="sub" id="sub" style="display:none;"></p>
1697      </div>
1698    </div>
1699
1700    <!-- Floating word reveals (post-headline) -->
1701    <div class="hero-words" aria-hidden="true">
1702      <div class="hero-word left"  id="hwSimple"  style="top:36%;">Simple.</div>
1703      <div class="hero-word right" id="hwSeamless" style="top:48%;">Seamless.</div>
1704      <div class="hero-word left"  id="hwYours"   style="top:62%;"><em>Yours.</em></div>
1705    </div>
1706    <div class="hero-closer" id="heroCloser">
1707      That's how it should have <em>always worked.</em>
1708    </div>
1709    <div class="hero-closer" id="heroCloser2">
1710      And <em>now</em> it <em>does.</em>
1711    </div>
1712
1713    <!-- Footer chips -->
1714    <div class="footer-chips" id="footerChips">
1715      <div class="left">
1716        <span>SEC-aligned RWA</span><span class="dot"></span><span>Audited vaults</span>
1717      </div>
1718      <div class="right">
1719        <span>Settle ETH · USDC · BTC</span>
1720      </div>
1721    </div>
1722
1723    <div class="scroll-hint" id="scrollHint">
1724      <span>Scroll</span>
1725      <span class="line"></span>
1726    </div>
1727  </div>
1728</section>
1729
1730<!-- ============ RACETRACK JOURNEY SECTION ============ -->
1731<section class="track-scroll" id="trackScroll">
1732  <div class="track-pin" id="trackPin">
1733    <!-- Porsche follows the path; lives in track-pin so it is positioned relative to it -->
1734    <div class="car" id="car">
1735      <img src="porsche.svg" alt="" />
1736    </div>
1737    <div class="track-eyebrow" style="display:none;">
1738      <span class="dash"></span>
1739      <span>How it works</span>
1740      <span class="dash"></span>
1741    </div>
1742
1743    <svg class="track-svg" id="trackSvg" viewBox="0 950 1000 1250" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
1744      <defs>
1745        <linearGradient id="trackGrad" x1="0" y1="0" x2="0" y2="1">
1746          <stop offset="0%"  stop-color="#f0bf3d" stop-opacity="1"/>
1747          <stop offset="50%" stop-color="#dba019" stop-opacity="1"/>
1748          <stop offset="100%" stop-color="#f0bf3d" stop-opacity="0.7"/>
1749        </linearGradient>
1750        <filter id="trackGlow" x="-20%" y="-20%" width="140%" height="140%">
1751          <feGaussianBlur stdDeviation="6" result="blur"/>
1752          <feMerge>
1753            <feMergeNode in="blur"/>
1754            <feMergeNode in="SourceGraphic"/>
1755          </feMerge>
1756        </filter>
1757      </defs>
1758
1759      <!-- Ghost track (full path, faint).
1760           Starts off-canvas RIGHT, runs in horizontally to the center, curves down,
1761           then performs the original S-curve to the bottom. -->
1762      <path id="trackGhost"
1763            d="M 500 1080
1764               S 820 1280, 820 1440
1765               S 180 1640, 180 1800
1766               S 820 2000, 500 2120"
1767            fill="none" stroke="rgba(234,238,245,0.07)" stroke-width="2" stroke-dasharray="6 8"/>
1768
1769      <!-- Animated drawing path (same coords) -->
1770      <path id="trackPath"
1771            d="M 500 1080
1772               S 820 1280, 820 1440
1773               S 180 1640, 180 1800
1774               S 820 2000, 500 2120"
1775            fill="none" stroke="url(#trackGrad)" stroke-width="3" stroke-linecap="round"
1776            filter="url(#trackGlow)"/>
1777
1778      <!-- Waypoint dots -->
1779      <circle class="waypoint" id="wp0" cx="0" cy="0" r="6" fill="#f0bf3d"/>
1780      <circle class="waypoint" id="wp1" cx="0" cy="0" r="6" fill="#f0bf3d"/>
1781      <circle class="waypoint" id="wp2" cx="0" cy="0" r="6" fill="#f0bf3d"/>
1782      <circle class="waypoint" id="wp3" cx="0" cy="0" r="6" fill="#f0bf3d"/>
1783    </svg>
1784
1785    <!-- Step labels (positioned along the new path which spans 49%–96% of viewport) -->
1786    <div class="step step-left"  id="step0" style="top:22%;">
1787      <div class="step-num">01</div>
1788      <div class="step-label">Download the app</div>
1789    </div>
1790    <div class="step step-right" id="step1" style="top:39%;">
1791      <div class="step-num">02</div>
1792      <div class="step-label">Browse our inventory</div>
1793    </div>
1794    <div class="step step-left"  id="step2" style="top:65%;">
1795      <div class="step-num">03</div>
1796      <div class="step-label">Inquire</div>
1797    </div>
1798    <div class="step step-right" id="step3" style="top:89%;">
1799      <div class="step-num">04</div>
1800      <div class="step-label">Receive your keys</div>
1801    </div>
1802
1803  </div>
1804</section>
1805<!-- ============ /RACETRACK JOURNEY SECTION ============ -->
1806
1807<!-- ============ STACKING CARDS SECTION ============ -->
1808<section class="stack-scroll" id="stackScroll">
1809  <div class="stack-intro" id="stackIntro">
1810    <!-- Parked car (sits above the header in section 3) -->
1811    <div class="parked-car" id="parkedCar" aria-hidden="true">
1812      <div class="parked-shadow"></div>
1813    </div>
1814    <!-- ============ INVENTORY SHOWCASE ============ -->
1815    <div class="inv-showcase" id="invShowcase" aria-label="Featured inventory">
1816      <div class="inv-eyebrow">
1817        <span class="dash"></span>
1818        <span>Featured inventory</span>
1819        <span class="dash"></span>
1820      </div>
1821      <h3 class="inv-title">Waiting for you</h3>
1822
1823      <!-- Currency switcher -->
1824      <div class="inv-ccy" role="tablist" aria-label="Settlement currency">
1825        <span class="ccy-label">Settle in</span>
1826        <div class="ccy-group" id="invCcy">
1827          <button class="ccy-opt is-active" data-ccy="USDC" type="button" role="tab" aria-selected="true">
1828            <span class="ccy-dot ccy-usdc"></span>USDC
1829          </button>
1830          <button class="ccy-opt" data-ccy="BTC" type="button" role="tab">
1831            <span class="ccy-dot ccy-btc"></span>BTC
1832          </button>
1833          <button class="ccy-opt" data-ccy="ETH" type="button" role="tab">
1834            <span class="ccy-dot ccy-eth"></span>ETH
1835          </button>
1836          <button class="ccy-opt" data-ccy="SOL" type="button" role="tab">
1837            <span class="ccy-dot ccy-sol"></span>SOL
1838          </button>
1839          <span class="ccy-thumb" id="ccyThumb" aria-hidden="true"></span>
1840        </div>
1841      </div>
1842
1843      <div class="inv-stage" id="invStage">
1844        <!-- Decorative grid + crosshair behind the cards -->
1845        <div class="inv-grid" aria-hidden="true"></div>
1846        <div class="inv-crosshair" aria-hidden="true">
1847          <div class="cx-h"></div><div class="cx-v"></div>
1848        </div>
1849
1850        <!-- Card deck -->
1851        <div class="inv-deck" id="invDeck"></div>
1852
1853        <!-- Side meta panel (left): rotating spec readout -->
1854        <div class="inv-meta inv-meta-left" id="invMetaLeft" aria-hidden="true">
1855          <div class="meta-label">Lot</div>
1856          <div class="meta-value" id="metaLot">—</div>
1857          <div class="meta-label">Mileage</div>
1858          <div class="meta-value" id="metaMiles">—</div>
1859          <div class="meta-label">Powertrain</div>
1860          <div class="meta-value" id="metaEngine">—</div>
1861        </div>
1862
1863        <!-- Side meta panel (right): the USDC price -->
1864        <div class="inv-meta inv-meta-right" id="invMetaRight" aria-hidden="true">
1865          <div class="usdc-tag" id="usdcTag">
1866            <span class="usdc-mark" id="usdcMark"></span>
1867            <span class="usdc-label">Settle in <span id="usdcTicker">USDC</span></span>
1868          </div>
1869          <div class="usdc-amount" id="usdcAmount">0</div>
1870          <div class="usdc-sub"><span id="usdcUnit">USDC</span> · <span id="usdcUsd">$0</span></div>
1871          <button class="usdc-cta" type="button">Reserve <span>→</span></button>
1872        </div>
1873      </div>
1874
1875      <!-- Scrubber + counter -->
1876      <div class="inv-controls">
1877        <button class="inv-btn" id="invPrev" type="button" aria-label="Previous">
1878          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
1879        </button>
1880
1881        <div class="inv-scrubber" id="invScrubber"></div>
1882
1883        <button class="inv-btn" id="invNext" type="button" aria-label="Next">
1884          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>
1885        </button>
1886
1887        <div class="inv-counter mono"><span id="invIndex">01</span> <span class="dim">/</span> <span id="invTotal">05</span></div>
1888      </div>
1889
1890      <!-- Browse more CTA -->
1891      <div class="inv-browse">
1892        <a class="inv-browse-cta" href="/inventory" aria-label="Browse all inventory">
1893          <span class="bw-icon" aria-hidden="true">
1894            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
1895              <rect x="5" y="2.5" width="14" height="19" rx="3"/>
1896              <path d="M11 18.5h2"/>
1897            </svg>
1898          </span>
1899          <span class="bw-text">
1900            <span class="bw-eye">Full inventory</span>
1901            <span class="bw-main">Browse all inventory</span>
1902          </span>
1903          <span class="bw-arrow" aria-hidden="true">
1904            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
1905          </span>
1906        </a>
1907      </div>
1908    </div>
1909    <!-- ============ /INVENTORY SHOWCASE ============ -->
1910
1911    <div class="stack-eyebrow"><span class="dash"></span><span>Core capabilities</span><span class="dash"></span></div>
1912    <h2 class="stack-h2">Built for the<br/>collector class</h2>
1913  </div>
1914
1915  <article class="stack-card" id="card1" style="--i:1;">
1916    <div class="card-inner">
1917      <div class="card-meta"><span class="card-num">01</span><span class="card-tag">Marketplace</span></div>
1918      <h3 class="card-title">Supercars,<br/>verified.</h3>
1919      <p class="card-body">Every listing passes a multi-point inspection — provenance, ownership history, mechanical and cosmetic condition. We only list what we'd buy ourselves.</p>
1920      <div class="card-stats">
1921        <div><b>100%</b><span>Inspected</span></div>
1922        <div><b>3-stage</b><span>Verification</span></div>
1923        <div><b>Off-market</b><span>Access</span></div>
1924      </div>
1925      <div class="card-art card-art-1" aria-hidden="true">
1926        <div class="badge-ring"><span>VERIFIED</span><span>·</span><span>VAULTED</span><span>·</span></div>
1927        <div class="badge-core">✓</div>
1928      </div>
1929    </div>
1930  </article>
1931
1932  <article class="stack-card" id="card2" style="--i:2;">
1933    <div class="card-inner">
1934      <div class="card-meta"><span class="card-num">02</span><span class="card-tag">Concierge</span></div>
1935      <h3 class="card-title">Sourcing,<br/>off-market.</h3>
1936      <p class="card-body">Looking for something we don't have? Tell us the spec and our concierge finds it.</p>
1937      <div class="card-stats">
1938        <div><b>White-glove</b><span>End-to-end</span></div>
1939        <div><b>72 hr</b><span>Avg. first match</span></div>
1940      </div>
1941      <div class="card-art card-art-2" aria-hidden="true">
1942        <svg viewBox="0 0 200 200">
1943          <circle cx="100" cy="100" r="40" fill="none" stroke="rgba(240,191,61,.5)" stroke-width="1.5"/>
1944          <circle cx="100" cy="100" r="65" fill="none" stroke="rgba(240,191,61,.3)" stroke-width="1"/>
1945          <circle cx="100" cy="100" r="90" fill="none" stroke="rgba(240,191,61,.18)" stroke-width="1"/>
1946          <circle cx="100" cy="100" r="3" fill="#f0bf3d"/>
1947          <circle cx="140" cy="100" r="2" fill="#fff"/>
1948          <circle cx="65" cy="135" r="2" fill="#fff"/>
1949          <circle cx="100" cy="35" r="2" fill="#fff"/>
1950          <circle cx="170" cy="80" r="2" fill="#fff"/>
1951        </svg>
1952      </div>
1953    </div>
1954  </article>
1955
1956  <article class="stack-card" id="card3" style="--i:3;">
1957    <div class="card-inner">
1958      <div class="card-meta"><span class="card-num">03</span><span class="card-tag">Intel</span></div>
1959      <h3 class="card-title">Market intel,<br/>real time.</h3>
1960      <p class="card-body">Live valuations and the news that moves them- pulled into one feed so you act before the market does.</p>
1961      <div class="card-stats">
1962        <div><b>Live</b><span>Pricing</span></div>
1963        <div><b>24/7</b><span>News stream</span></div>
1964      </div>
1965      <div class="card-art card-art-3" aria-hidden="true">
1966        <svg class="spark" viewBox="0 0 200 120" preserveAspectRatio="none">
1967          <defs>
1968            <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
1969              <stop offset="0%" stop-color="rgba(240,191,61,.35)"/>
1970              <stop offset="100%" stop-color="rgba(240,191,61,0)"/>
1971            </linearGradient>
1972          </defs>
1973          <!-- Horizontal grid lines -->
1974          <line x1="0" y1="20"  x2="200" y2="20"  stroke="rgba(255,255,255,.06)" stroke-width="1"/>
1975          <line x1="0" y1="55"  x2="200" y2="55"  stroke="rgba(255,255,255,.06)" stroke-width="1"/>
1976          <line x1="0" y1="90"  x2="200" y2="90"  stroke="rgba(255,255,255,.06)" stroke-width="1"/>
1977          <!-- Area fill -->
1978          <path d="M0 95 L20 82 L40 88 L60 58 L80 66 L100 44 L120 50 L140 28 L160 34 L180 18 L200 24 L200 120 L0 120 Z"
1979                fill="url(#sparkFill)"/>
1980          <!-- Line -->
1981          <path d="M0 95 L20 82 L40 88 L60 58 L80 66 L100 44 L120 50 L140 28 L160 34 L180 18 L200 24"
1982                fill="none" stroke="#f0bf3d" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
1983          <!-- End dot -->
1984          <circle cx="200" cy="24" r="4" fill="#f0bf3d"/>
1985          <circle cx="200" cy="24" r="7" fill="rgba(240,191,61,.2)"/>
1986        </svg>
1987      </div>
1988    </div>
1989  </article>
1990
1991  <article class="stack-card" id="card4" style="--i:4;">
1992    <div class="card-inner">
1993      <div class="card-meta"><span class="card-num">04</span><span class="card-tag">
1993Infrastructure</span></div>
1994      <h3 class="card-title">Rails,<br/>installed.</h3>
1995      <p class="card-body">The assets are limited edition. Your payment system shouldn't be. We install the infrastructure so you can focus on the close.</p>
1996      <div class="card-stats">
1997        <div><b>Zero</b><span>Crypto knowledge required</span></div>
1998        <div><b>1 day</b><span>to setup</span></div>
1999      </div>
2000      <div class="card-art card-art-4" aria-hidden="true">
2001        <div class="vault">
2002          <div class="vault-ring"></div>
2003          <div class="vault-ring r2"></div>
2004          <div class="vault-core">
2005            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
2006              <rect x="4" y="10" width="16" height="11" rx="2"/>
2007              <path d="M8 10V7a4 4 0 0 1 8 0v3"/>
2008            </svg>
2009          </div>
2010        </div>
2011      </div>
2012    </div>
2013  </article>
2014</section>
2015<!-- ============ /STACKING CARDS SECTION ============ -->
2016
2017<!-- ============ COMBINED KEY-FALL + HUB SECTION ============ -->
2018<section class="combined-scroll" id="combinedScroll">
2019  <div class="combined-pin" id="combinedPin">
2020
2021    <!-- Side text -->
2022    <div class="kf-side left" id="kfSideLeft">One <em>key</em></div>
2023    <div class="kf-side right" id="kfSideRight">Every <em>door</em></div>
2024
2025    <!-- Falling key -->
2026    <div class="kf-key" id="kfKey">
2027      <img src="icons/key.svg" alt="" />
2028    </div>
2029    <svg class="hub-svg" id="hubSvg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
2030      <defs>
2031        <radialGradient id="hubFill" cx="50%" cy="50%" r="50%">
2032          <stop offset="0%"  stop-color="#1a1208" stop-opacity="1"/>
2033          <stop offset="70%" stop-color="#0a0805" stop-opacity="1"/>
2034          <stop offset="100%" stop-color="#05070B" stop-opacity="1"/>
2035        </radialGradient>
2036        <filter id="hubGlow" x="-30%" y="-30%" width="160%" height="160%">
2037          <feGaussianBlur stdDeviation="8"/>
2038        </filter>
2039      </defs>
2040
2041      <!-- Glow halo behind hub -->
2042      <circle id="hubHalo" cx="800" cy="450" r="0" fill="rgba(219,160,25,0.18)" filter="url(#hubGlow)"/>
2043    </svg>
2044
2045    <!-- Hub gear (grows with scroll) -->
2046    <div class="hub" id="hub">
2047      <div class="hub-gear">
2048        <svg viewBox="0 0 200 200" aria-hidden="true">
2049          <defs>
2050            <mask id="gearMask">
2051              <rect width="200" height="200" fill="white"/>
2052              <circle cx="100" cy="100" r="68" fill="black"/>
2053            </mask>
2054          </defs>
2055          <!-- 24 teeth via a single rotating pattern: build with paths -->
2056          <g mask="url(#gearMask)">
2057            <circle cx="100" cy="100" r="92" fill="#dba019"/>
2058          </g>
2059          <!-- gear teeth -->
2060          <g fill="#dba019">
2061            <!-- 24 teeth in a ring -->
2062            <g id="teeth"></g>
2063          </g>
2064          <!-- inner ring -->
2065          <circle cx="100" cy="100" r="68" fill="none" stroke="#dba019" stroke-width="2"/>
2066        </svg>
2067      </div>
2068      <div class="hub-content">
2069        <h3 class="hub-title">Seamless on-chain<br/>settlement for your<br/>biggest purchases.</h3>
2070      </div>
2071    </div>
2072
2073    <!-- Satellites -->
2074    <div class="sat sat-0" data-i="0"><img src="icons/private-jet.svg" alt=""/></div>
2075    <div class="sat sat-1" data-i="1"><img src="icons/house.svg" alt=""/></div>
2076    <div class="sat sat-2" data-i="2"><img src="icons/porsche-icon.svg" alt=""/></div>
2077    <div class="sat sat-3" data-i="3"><img src="icons/porsche-icon.svg" alt=""/></div>
2078    <div class="sat sat-4" data-i="4"><img src="icons/house.svg" alt=""/></div>
2079    <div class="sat sat-5" data-i="5"><img src="icons/private-jet.svg" alt=""/></div>
2080
2081    <!-- CTA — fades in after gear dissolves -->
2082    <div class="cta-copy">
2083      <h2 class="cta-headline" id="ctaHeadline">
2084        Ready to unlock <em>yours?</em>
2085      </h2>
2086      <div class="cta-buttons">
2087        <a href="https://apps.apple.com/app/id6757994357" target="_blank" rel="noopener noreferrer" class="cta-store-btn" id="ctaBtnApp" aria-label="Download on the App Store">
2088          <span class="cta-store-icon">
2089            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2090              <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
2091            </svg>
2092          </span>
2093          <span class="cta-store-text">
2094            <span class="cta-store-sub">Download on the</span>
2095            <span class="cta-store-name">App Store</span>
2096          </span>
2097        </a>
2098        <a href="https://play.google.com/store/apps/details?id=com.carsandcrypto.app&amp;hl=en_US" target="_blank" rel="noopener noreferrer" class="cta-store-btn" id="ctaBtnPlay" aria-label="Get it on Google Play">
2099          <span class="cta-store-icon">
2100            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
2101              <path d="M3.18 23.76c-.31-.17-.5-.5-.5-.87V1.11c0-.37.19-.7.5-.87l.1-.05 12.59 12.59v.3L3.28 23.81l-.1-.05zm13.72-7.87-2.91-2.91 2.91-2.91 3.29 1.9c.94.54.94 1.41 0 1.95l-3.29 1.97zM3.95 24.31l11.03-6.37-2.91-2.9L3.95 24.31zM3.95-.31 15.08 5.96 12.07 9l-8.12-9.31z"/>
2102            </svg>
2103          </span>
2104          <span class="cta-store-text">
2105            <span class="cta-store-sub">Get it on</span>
2106            <span class="cta-store-name">Google Play</span>
2107          </span>
2108        </a>
2109      </div>
2110    </div>
2111
2112  </div>
2113</section>
2114<!-- ============ /COMBINED KEY-FALL + HUB SECTION ============ -->
2115
2116<footer class="cc-site-footer">
2117  <div class="cc-site-footer__inner">
2118    <div class="cc-site-footer__brand">
2119      <span class="cc-gold-logo" role="img" aria-label="Cars & Crypto"></span>
2120      <span class="cc-site-footer__copyright">© 2026 Cars &amp; Crypto. All rights reserved.</span>
2121    </div>
2122    <div class="cc-site-footer__meta">
2123      <span>Tampa, FL</span>
2124      <span class="cc-site-footer__sep">·</span>
2125      <span>Pay in any asset, use any wallet</span>
2126    </div>
2127    <div class="cc-site-footer__actions">
2128      <a class="cc-site-footer__link" href="/newsletter-subscribe">Newsletter</a>
2129      <a class="cc-site-footer__link" href="/privacy-policy">Privacy Policy</a>
2130    </div>
2131  </div>
2132</footer>
2133
2134<script>
2135(() => {
2136  const hero = document.getElementById('heroScroll');
2137  const phoneWrap = document.getElementById('phoneWrap');
2138  const headlineWrap = document.getElementById('headlineWrap');
2139  const kicker = document.getElementById('kicker');
2140  const sub = document.getElementById('sub');
2141  const eyebrow = document.getElementById('eyebrow');
2142  const ghost = document.getElementById('ghost');
2143  const statusbar = document.getElementById('statusbar');
2144  const chatbar = document.getElementById('chatbar');
2145  const messages = [...document.querySelectorAll('.msg')];
2146  const typing = document.getElementById('typing');
2147  const footerChips = document.getElementById('footerChips');
2148  const scrollHint = document.getElementById('scrollHint');
2149  const orbs = [...document.querySelectorAll('.orb')];
2150  const headline = document.querySelector('.headline');
2151  const hwSimple = document.getElementById('hwSimple');
2152  const hwSeamless = document.getElementById('hwSeamless');
2153  const hwYours = document.getElementById('hwYours');
2154  const heroCloser = document.getElementById('heroCloser');
2155  const heroCloser2 = document.getElementById('heroCloser2');
2156  const heroBg = document.getElementById('heroBg');
2157  const heroPin = document.getElementById('heroPin');
2158  const heroStars = document.querySelector('#heroPin .stars');
2159
2160  const lerp = (a,b,t) => a + (b-a)*t;
2161  const clamp = (v,min,max) => Math.max(min, Math.min(max, v));
2162  const ease = t => t<.5 ? 2*t*t : 1-Math.pow(-2*t+2,2)/2; // easeInOutQuad
2163
2164  // Offsets for orb parallax (randomized per orb)
2165  const orbConfig = orbs.map((el,i) => ({
2166    dx: (Math.random()*2 - 1) * 260,
2167    dy: (Math.random()*2 - 1) * 240,
2168    rot: (Math.random()*2-1) * 30,
2169    scaleStart: 1.25 + Math.random()*0.4,
2170    scaleEnd:   0.55 + Math.random()*0.25,
2171    floatPhase: Math.random()*Math.PI*2,
2172  }));
2173
2174  // Helper: remap a sub-range of progress to 0..1
2175  const rng = (p, a, b) => clamp((p - a) / (b - a), 0, 1);
2176
2177  function update(){
2178    const rect = hero.getBoundingClientRect();
2179    const total = hero.offsetHeight - window.innerHeight;
2180    const raw = clamp(-rect.top / total, 0, 1);
2181    const p = ease(raw);
2182
2183    // The phone-reveal sub-progress (compressed into first 30% of total scroll)
2184    const pPhone = rng(p, 0.0, 0.30);
2185
2186    const scale = lerp(3.6, 1.0, pPhone);
2187    const ty = lerp(260, 0, pPhone);
2188    phoneWrap.style.transform = `translate(-50%, calc(-50% + ${ty}px)) scale(${scale})`;
2189
2190    const hlOpacity = 1 - rng(p, 0.20, 0.30);
2191    const hlScale = lerp(1, 0.78, rng(p, 0.0, 0.30));
2192    const hlY = lerp(0, -window.innerHeight*0.22, rng(p, 0.0, 0.30));
2193    headlineWrap.style.transform = `translate3d(0, calc(-50% + ${hlY}px), 0) scale(${hlScale})`;
2194    headlineWrap.style.opacity = hlOpacity;
2195
2196    const line1 = document.querySelector('.hl-line-1');
2197    if(line1){
2198      const l1out = rng(p, 0.03, 0.12);
2199      line1.style.opacity = 1 - l1out;
2200      line1.style.filter  = `blur(${lerp(0, 8, l1out)}px)`;
2201    }
2202
2203    const line2 = document.querySelector('.hl-line-2');
2204    if(line2){
2205      const l2 = rng(p, 0.06, 0.16);
2206      line2.style.opacity = l2;
2207      line2.style.filter = `blur(${lerp(6,0,l2)}px)`;
2208    }
2209
2210    if(kicker) kicker.style.opacity = 0;
2211    if(sub) sub.style.opacity = 0;
2212
2213    const eyeVis = rng(p, 0.30, 0.38);
2214    eyebrow.style.opacity = eyeVis * 0.9;
2215    eyebrow.style.transform = `translateY(${lerp(-8,0,eyeVis)}px)`;
2216
2217    const ghostVis = rng(p, 0.30, 0.45) * (1 - rng(p, 0.55, 0.7));
2218    ghost.style.opacity = ghostVis * 0.6;
2219
2220    const now = performance.now()/1000;
2221    orbs.forEach((el, i) => {
2222      const cfg = orbConfig[i];
2223      const op = rng(p, 0.0, 0.30);
2224      const s = lerp(cfg.scaleStart, cfg.scaleEnd, op);
2225      const x = lerp(cfg.dx, 0, op);
2226      const driftAmp = 6 + 8 * op;
2227      const y = lerp(cfg.dy, 0, op) + Math.sin(now*0.8 + cfg.floatPhase)*driftAmp;
2228      const xDrift = Math.cos(now*0.6 + cfg.floatPhase)* (3 + 6*op);
2229      const r = lerp(cfg.rot, 0, op) + Math.sin(now*0.4 + cfg.floatPhase)*2;
2230      el.style.transform = `translate(${x + xDrift}px, ${y}px) rotate(${r}deg) scale(${s})`;
2231      const orbFade = 1 - rng(raw, 0.78, 0.92);
2232      el.style.opacity = lerp(0.35, 1, op) * orbFade;
2233    });
2234
2235    const uiP = rng(p, 0.30, 0.42);
2236    statusbar.style.opacity = uiP;
2237    chatbar.style.opacity = uiP;
2238    chatbar.style.transform = `translateY(${lerp(6,0,uiP)}px)`;
2239
2240    messages.forEach((m,i) => {
2241      const start = 0.42 + i*0.04;
2242      const v = rng(p, start, start + 0.03);
2243      m.style.opacity = v;
2244      m.style.transform = `translateY(${lerp(8,0,v)}px)`;
2245    });
2246    const typeVis = rng(p, 0.55, 0.58);
2247    typing.style.opacity = typeVis;
2248
2249    const phoneFade = 1 - rng(raw, 0.55, 0.78);
2250    phoneWrap.style.opacity = phoneFade;
2251
2252    function wordAnim(el, from, sStart, sPeakA, sPeakB, sEnd){
2253      const inP  = rng(raw, sStart, sPeakA);
2254      const outP = rng(raw, sPeakB, sEnd);
2255      const vis = inP * (1 - outP);
2256      const dir = from === 'left' ? -1 : 1;
2257      const x = lerp(dir * window.innerWidth * 0.35, 0, inP) + lerp(0, dir * window.innerWidth * 0.35, outP);
2258      const yFloat = Math.sin(now*0.7) * 6;
2259      el.style.opacity = vis;
2260      el.style.transform = `translate(${x}px, ${yFloat}px)`;
2261      el.style.filter = `blur(${lerp(8, 0, inP) + lerp(0, 8, outP)}px)`;
2262    }
2263    wordAnim(hwSimple,   'left',  0.34, 0.44, 0.50, 0.58);
2264    wordAnim(hwSeamless, 'right', 0.48, 0.56, 0.62, 0.68);
2265    wordAnim(hwYours,    'left',  0.58, 0.66, 0.72, 0.78);
2266
2267    // First closer ("That's how it should have always worked.") fades in/out, then
2268    // the second closer ("And now it does.") fades in/out before the racetrack starts.
2269    const closer1In  = rng(raw, 0.74, 0.82);
2270    const closer1Out = rng(raw, 0.86, 0.92);
2271    const closer1Vis = closer1In * (1 - closer1Out);
2272    heroCloser.style.opacity = closer1Vis;
2273    heroCloser.style.transform = `translateY(calc(-50% + ${lerp(20, 0, closer1In) + lerp(0, -30, closer1Out)}px))`;
2274    heroCloser.style.filter = `blur(${lerp(10,0,closer1In) + lerp(0,4,closer1Out)}px)`;
2275
2276    const closer2In  = rng(raw, 0.92, 0.96);
2277    const closer2Out = rng(raw, 0.995, 1.0);
2278    const closer2Vis = closer2In * (1 - closer2Out);
2279    heroCloser2.style.opacity = closer2Vis;
2280    heroCloser2.style.transform = `translateY(calc(-50% + ${lerp(20, 0, closer2In) + lerp(0, -30, closer2Out)}px))`;
2281    heroCloser2.style.filter = `blur(${lerp(10,0,closer2In) + lerp(0,4,closer2Out)}px)`;
2282
2283    // Footer chips disabled (replaced by closer)
2284    footerChips.style.opacity = 0;
2285
2286    // Fade the hero background out as the hero exits so the racetrack
2287    // bleeds through from beneath — starts after closer1 peaks (raw ≈ 0.82)
2288    // and completes by the end of the hero scroll (raw = 1.0).
2289    const bgAlpha = 1 - rng(raw, 0.82, 1.0);
2290    if(heroBg) heroBg.style.opacity = bgAlpha;
2291    if(heroStars) heroStars.style.opacity = 0.55 * bgAlpha;
2292    // Also fade the ::after vignette in sync via CSS custom property
2293    if(heroPin) heroPin.style.setProperty('--hero-vignette', bgAlpha);
2294
2295    // Scroll hint
2296    scrollHint.style.opacity = 1 - clamp(p/0.05, 0, 1);
2297  }
2298
2299  let rafId;
2300  function onScroll(){
2301    if(rafId) return;
2302    rafId = requestAnimationFrame(() => { rafId = null; update(); });
2303  }
2304  // Idle animation tick so orbs float even without scroll
2305  function tick(){ update(); requestAnimationFrame(tick); }
2306
2307  window.addEventListener('scroll', onScroll, {passive:true});
2308  window.addEventListener('resize', update);
2309  requestAnimationFrame(tick);
2310})();
2311
2312/* ====== Racetrack scroll-driven journey ====== */
2313(() => {
2314  const section = document.getElementById('trackScroll');
2315  const path = document.getElementById('trackPath');
2316  const ghost = document.getElementById('trackGhost');
2317  const svg = document.getElementById('trackSvg');
2318  const car = document.getElementById('car');
2319  const steps = [
2320    document.getElementById('step0'),
2321    document.getElementById('step1'),
2322    document.getElementById('step2'),
2323    document.getElementById('step3'),
2324  ];
2325  const wps = [
2326    document.getElementById('wp0'),
2327    document.getElementById('wp1'),
2328    document.getElementById('wp2'),
2329    document.getElementById('wp3'),
2330  ];
2331  if(!section || !path || !car) return;
2332
2333  const clamp = (v,a,b) => Math.max(a, Math.min(b, v));
2334
2335  // Set up dasharray for draw-on effect
2336  const len = path.getTotalLength();
2337  path.style.strokeDasharray = len;
2338  path.style.strokeDashoffset = len;
2339
2340  // Waypoints along the new path which starts at viewport center and desce
2340nds
2341  // through three S-curves to the bottom.
2342  const wpProgress = [0.05, 0.32, 0.62, 0.92];
2343  wpProgress.forEach((t, i) => {
2344    const pt = path.getPointAtLength(len * t);
2345    wps[i].setAttribute('cx', pt.x);
2346    wps[i].setAttribute('cy', pt.y);
2347  });
2348
2349  // Hold last car angle to smooth at edges.
2350  // Path begins by curving down-left, so the car points roughly leftward (180°)
2351  // from the very first frame — no spin-up from 0.
2352  let lastAngle = 180;
2353  let angleInit = false;
2354
2355  function update(){
2356    const rect = section.getBoundingClientRect();
2357    // Start as soon as the section enters the viewport — user wants the racetrack
2358    // to start IMMEDIATELY after the hero closer disappears, with no extra head-start.
2359    const earlyStart = 0;
2360    const total = section.offsetHeight - window.innerHeight + earlyStart;
2361    const raw = clamp((-rect.top + earlyStart) / total, 0, 1);
2362
2363    // The full path is drawn as soon as the section enters view so the racetrack
2364    // is visually engaged the instant the hero closer disappears. The car driving
2365    // along the path is the scroll-driven element.
2366    path.style.strokeDashoffset = 0;
2367
2368    // Position the car along the path
2369    const svgRect = svg.getBoundingClientRect();
2370    const pinRect = section.querySelector('.track-pin').getBoundingClientRect();
2371
2372    // viewBox is "0 950 1000 1250" — figure out the rendered scale
2373    const vbW = 1000, vbH = 1250, vbY = 950;
2374    const scale = Math.min(svgRect.width / vbW, svgRect.height / vbH);
2375    const renderedW = vbW * scale;
2376    const renderedH = vbH * scale;
2377    // Offsets inside the svg element (centered)
2378    const offX = svgRect.left + (svgRect.width - renderedW)/2 - pinRect.left;
2379    const offY = svgRect.top  + (svgRect.height - renderedH)/2 - pinRect.top;
2380
2381    // Car follows just behind the drawn tip — biased so it sits near the
2382    // pre-drawn starter portion at section entry.
2383    const carT = clamp(Math.max(raw, 0.06), 0.001, 0.999);
2384    const pt = path.getPointAtLength(len * carT);
2385    // Tangent: small lookahead for angle
2386    const ahead = path.getPointAtLength(len * Math.min(carT + 0.005, 1));
2387    let angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
2388    // Porsche SVG is drawn pointing left (viewBox 1411x766, nose roughly at left).
2389    // Add 180 so it points along the direction of motion.
2390    angle += 180;
2391
2392    // Normalize to nearest equivalent so smoothing doesn't spin the long way around
2393    while(angle - lastAngle > 180) angle -= 360;
2394    while(angle - lastAngle < -180) angle += 360;
2395
2396    if(!angleInit){
2397      lastAngle = angle;
2398      angleInit = true;
2399    } else {
2400      // Smooth, but slower so micro-tangent wobble doesn't spin the car
2401      lastAngle = lastAngle + (angle - lastAngle) * 0.18;
2402    }
2403
2404    const cx = offX + pt.x * scale;
2405    const cy = offY + (pt.y - vbY) * scale;
2406    car.style.left = cx + 'px';
2407    car.style.top  = cy + 'px';
2408    car.style.transform = `translate(-50%, -50%) rotate(${lastAngle}deg)`;
2409    // Hide track-following car once user is fully past the track section,
2410    // and reveal the parked car at the top of the stacking section.
2411    const parked = document.getElementById('parkedCar');
2412    svg.style.opacity = 1;
2413
2414    if(raw >= 0.995){
2415      car.style.opacity = 0;
2416      if(parked) parked.classList.add('in');
2417    } else {
2418      car.style.opacity = 1;
2419      if(parked) parked.classList.remove('in');
2420    }
2421
2422    // Reveal steps when their waypoint is reached. Step 0 fades in slightly AFTER
2423    // section start so the porsche reads first, then the "Download" copy follows.
2424    wpProgress.forEach((t, i) => {
2425      const threshold = i === 0 ? 0.04 : t - 0.04;
2426      if(raw >= threshold){
2427        steps[i].classList.add('in');
2428        wps[i].setAttribute('r', 7);
2429        wps[i].setAttribute('fill', '#fff');
2430      } else {
2431        steps[i].classList.remove('in');
2432        wps[i].setAttribute('r', 5);
2433        wps[i].setAttribute('fill', 'rgba(240,191,61,0.4)');
2434      }
2435    });
2436  }
2437
2438  let rafId;
2439  function onScroll(){
2440    if(rafId) return;
2441    rafId = requestAnimationFrame(() => { rafId = null; update(); });
2442  }
2443  window.addEventListener('scroll', onScroll, {passive:true});
2444  window.addEventListener('resize', update);
2445  // initial
2446  requestAnimationFrame(update);
2447})();
2448
2449/* ====== Inventory Showcase: 3D rotating card deck ====== */
2450(() => {
2451  const stage = document.getElementById('invStage');
2452  const deck = document.getElementById('invDeck');
2453  if(!deck) return;
2454
2455  // Curated inventory — only the 5 cars the user requested.
2456  const CARS = [
2457    {
2458      id: '278690',
2459      year: '2022',
2460      name: 'Ferrari SF90 Stradale',
2461      price_usd: 449950,
2462      mileage: '4,599 mi',
2463      engine: '4.0L V8 PHEV · TT',
2464      img: 'https://certifiedmotorsports.com/service/picture/30338/278690/3444c340a9451064451236f38bbd7bd6bcf8947a',
2465      badge: 'Available · Tampa FL'
2466    },
2467    {
2468      id: 'A05025',
2469      year: '2016',
2470      name: 'Lamborghini Aventador SV',
2471      price_usd: 600000,
2472      mileage: '21,545 mi',
2473      engine: '6.5L V12 MPI DOHC',
2474      img: 'https://certifiedmotorsports.com/service/picture/30338/A05025/4daef5a45d0a5822d66a7e5fb4d4abcb86ce2558',
2475      badge: 'Rare colorway · Tampa FL'
2476    },
2477    {
2478      id: '500205',
2479      year: '2025',
2480      name: 'KTM X-Bow GTXR',
2481      price_usd: 599995,
2482      mileage: '3,283 mi',
2483      engine: '1 of 1 · Beluga Carbon',
2484      img: 'https://certifiedmotorsports.com/service/picture/30338/500205/c1674e71b95be112dde8
24846c468c8e26c605e1bc7e',
2485      badge: 'Street legal · Tampa FL'
2486    },
2487    {
2488      id: '278178',
2489      year: '2025',
2490      name: 'Porsche 911 GT3 RS',
2491      price_usd: 449950,
2492      mileage: '2,476 mi',
2493      engine: '4.0L H6 · Weissach',
2494      img: 'https://certifiedmotorsports.com/service/picture/30338/278178/d25660c48ee2fd837531b1bfbfd80ceb6fd5b091',
2495      badge: 'Weissach pkg · Tampa FL'
2496    },
2497    {
2498      id: 'X08106',
2499      year: '2006',
2500      name: 'Rolls-Royce Phantom',
2501      price_usd: 124995,
2502      mileage: '26,234 mi',
2503      engine: 'V12 · Bulletproof',
2504      img: 'https://certifiedmotorsports.com/service/picture/30338/X08106/9578b8908a70a6a6d43429b8a20711af3b82e768',
2505      badge: 'Armored · Tampa FL'
2506    }
2507  ];
2508
2509  // Build cards
2510  const cards = CARS.map((c, i) => {
2511    const el = document.createElement('div');
2512    el.className = 'inv-card';
2513    el.dataset.idx = i;
2514    el.innerHTML = `
2515      <div class="card-img" style="background-image:url('${c.img}')"></div>
2516      <div class="card-shade"></div>
2517      <div class="card-tape"><span class="pulse"></span><span>${c.badge}</span></div>
2518      <div class="card-rank">${String(i+1).padStart(2,'0')} / ${String(CARS.length).padStart(2,'0')}</div>
2519      <div class="card-bottom">
2520        <div class="card-name">
2521          <span class="yr">${c.year}</span>
2522          ${c.name}
2523        </div>
2524        <div class="card-chip card-chip-ccy">USDC</div>
2525      </div>
2526    `;
2527    deck.appendChild(el);
2528    el.addEventListener('click', () => goTo(i));
2529    return el;
2530  });
2531
2532  // Build scrubber ticks
2533  const scrubber = document.getElementById('invScrubber');
2534  const ticks = CARS.map((_, i) => {
2535    const t = document.createElement('button');
2536    t.className = 'inv-tick';
2537    t.type = 'button';
2538    t.setAttribute('aria-label', `Go to car ${i+1}`);
2539    t.addEventListener('click', () => goTo(i));
2540    scrubber.appendChild(t);
2541    return t;
2542  });
2543
2544  const total = CARS.length;
2545  document.getElementById('invTotal').textContent = String(total).padStart(2,'0');
2546
2547  let idx = 0;
2548  let timer = null;
2549  const HOLD_MS = 4500;
2550
2551  // Layout cards around the active index — center is 1.0 scale, neighbours fanned out
2552  function layout(){
2553    cards.forEach((el, i) => {
2554      let rel = i - idx;
2555      // Wrap to nearest signed offset (so deck moves shortest path)
2556      if(rel >  total/2) rel -= total;
2557      if(rel < -total/2) rel += total;
2558
2559      const abs = Math.abs(rel);
2560      const sign = Math.sign(rel);
2561
2562      // Translate, scale, rotate based on offset
2563      const x = sign * Math.min(abs, 3) * 220 - sign * Math.max(0, abs-1) * 30;
2564      const z = -abs * 220;
2565      const rotY = -sign * Math.min(abs, 3) * 22;
2566      const scale = abs === 0 ? 1 : Math.max(0.55, 1 - abs * 0.12);
2567      const opacity = abs > 2 ? 0 : (abs === 0 ? 1 : 0.55 - (abs-1)*0.18);
2568      const blur = abs === 0 ? 0 : Math.min(abs * 1.5, 4);
2569
2570      el.style.zIndex = String(100 - abs);
2571      el.style.transform = `translate3d(${x}px, 0, ${z}px) rotateY(${rotY}deg) scale(${scale})`;
2572      el.style.opacity = String(Math.max(0, opacity));
2573      el.style.filter = `blur(${blur}px) brightness(${abs===0?1:0.7})`;
2574      el.style.pointerEvents = abs > 1 ? 'none' : 'auto';
2575      el.classList.toggle('is-center', abs === 0);
2576    });
2577
2578    // Scrubber + counter
2579    ticks.forEach((t, i) => t.classList.toggle('is-active', i === idx));
2580    document.getElementById('invIndex').textContent = String(idx+1).padStart(2,'0');
2581    updateMeta();
2582  }
2583
2584  // Currency definitions — rough live-ish rates (1 unit of CCY = N USD)
2585  // These are display-only mocks; in production they'd be pulled from an oracle.
2586  const CCY = {
2587    USDC: { sym:'◎',  rate: 1,        decimals: 0, color:'#2775CA', glyph:'$',
2588            mark: `<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="none" stroke="#2775CA" stroke-width="1.5"/><text x="16" y="21" text-anchor="middle" font-family="Inter Tight,sans-serif" font-weight="700" font-size="14" fill="#2775CA">$</text></svg>` },
2589    BTC:  { sym:'₿',  rate: 95420,    decimals: 4, color:'#F7931A',
2590            mark: `<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="none" stroke="#F7931A" stroke-width="1.5"/><text x="16" y="22" text-anchor="middle" font-family="Inter Tight,sans-serif" font-weight="700" font-size="16" fill="#F7931A">₿</text></svg>` },
2591    ETH:  { sym:'Ξ',  rate: 3280,     decimals: 3, color:'#8CAAFF',
2592            mark: `<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="none" stroke="#8CAAFF" stroke-width="1.5"/><path d="M16 7 L16 14.2 L21 16.4 Z" fill="#8CAAFF"/><path d="M16 7 L11 16.4 L16 14.2 Z" fill="#C5D4FF"/><path d="M16 17.6 L21 15.6 L16 24 Z" fill="#8CAAFF"/><path d="M16 17.6 L11 15.6 L16 24 Z" fill="#C5D4FF"/></svg>` },
2593    SOL:  { sym:'◎',  rate: 168,      decimals: 2, color:'#14F195',
2594            mark: `<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="15" fill="none" stroke="#14F195" stroke-width="1.5"/><path d="M11 12 L21 12 L23 10 L9 10 Z" fill="#14F195"/>
2594<path d="M9 17 L19 17 L21 15 L11 15 Z" fill="#14F195"/><path d="M11 22 L21 22 L23 20 L9 20 Z" fill="#14F195"/></svg>` },
2595  };
2596  let activeCcy = 'USDC';
2597
2598  function fmtAmount(v, ccy){
2599    const d = CCY[ccy].decimals;
2600    return v.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
2601  }
2602
2603  // Animated count-up for the price + meta swap
2604  let countRAF = null;
2605  let lastShown = 0;
2606  function updateMeta(){
2607    const c = CARS[idx];
2608    const lot   = document.getElementById('metaLot');
2609    const miles = document.getElementById('metaMiles');
2610    const eng   = document.getElementById('metaEngine');
2611    const usd   = document.getElementById('usdcUsd');
2612    const unit  = document.getElementById('usdcUnit');
2613
2614    [lot, miles, eng].forEach(n => n.classList.add('swap'));
2615    setTimeout(() => {
2616      lot.textContent = '#' + c.id;
2617      miles.textContent = c.mileage;
2618      eng.textContent = c.engine;
2619      [lot, miles, eng].forEach(n => n.classList.remove('swap'));
2620    }, 180);
2621
2622    if(usd) usd.textContent = '$' + c.price_usd.toLocaleString('en-US') + ' USD';
2623    if(unit) unit.textContent = activeCcy;
2624
2625    // Animate the price in the selected currency
2626    const ccy = CCY[activeCcy];
2627    const target = c.price_usd / ccy.rate;
2628    const start = lastShown;
2629    const dur = 700;
2630    const t0 = performance.now();
2631    const amountEl = document.getElementById('usdcAmount');
2632    if(countRAF) cancelAnimationFrame(countRAF);
2633    function step(now){
2634      const k = Math.min(1, (now - t0) / dur);
2635      const e = 1 - Math.pow(1 - k, 3);
2636      const v = start + (target - start) * e;
2637      amountEl.innerHTML = `<span class="sym">${ccy.sym}</span>${fmtAmount(v, activeCcy)}`;
2638      if(k < 1) countRAF = requestAnimationFrame(step);
2639      else lastShown = target;
2640    }
2641    countRAF = requestAnimationFrame(step);
2642  }
2643
2644  // Currency switcher
2645  const ccyGroup = document.getElementById('invCcy');
2646  const ccyThumb = document.getElementById('ccyThumb');
2647  const ccyOpts  = [...ccyGroup.querySelectorAll('.ccy-opt')];
2648  const usdcMark = document.getElementById('usdcMark');
2649  const usdcTicker = document.getElementById('usdcTicker');
2650  function moveThumb(){
2651    const active = ccyGroup.querySelector('.ccy-opt.is-active');
2652    if(!active) return;
2653    const groupRect = ccyGroup.getBoundingClientRect();
2654    const r = active.getBoundingClientRect();
2655    ccyThumb.style.width = r.width + 'px';
2656    ccyThumb.style.transform = `translateX(${r.left - groupRect.left - 5}px)`;
2657  }
2658  function setCcy(name){
2659    activeCcy = name;
2660    ccyOpts.forEach(b => b.classList.toggle('is-active', b.dataset.ccy === name));
2661    moveThumb();
2662    // Card chip + USDC tag
2663    document.querySelectorAll('.card-chip-ccy').forEach(c => c.textContent = name);
2664    if(usdcMark) usdcMark.innerHTML = CCY[name].mark;
2665    if(usdcTicker) usdcTicker.textContent = name;
2666    // Recolor USDC tag to match currency hue
2667    const tag = document.getElementById('usdcTag');
2668    if(tag){
2669      const col = CCY[name].color;
2670      tag.style.background = `color-mix(in srgb, ${col} 12%, transparent)`;
2671      tag.style.borderColor = `color-mix(in srgb, ${col} 45%, transparent)`;
2672      tag.style.color = col;
2673    }
2674    // Reset count-up baseline so it animates to new value
2675    lastShown = 0;
2676    updateMeta();
2677  }
2678  ccyOpts.forEach(b => b.addEventListener('click', () => setCcy(b.dataset.ccy)));
2679  window.addEventListener('resize', moveThumb);
2680  // Initial paint of mark
2681  if(usdcMark) usdcMark.innerHTML = CCY.USDC.mark;
2682  // Defer thumb position until layout is ready
2683  requestAnimationFrame(() => requestAnimationFrame(moveThumb));
2684
2685  function goTo(n){
2686    idx = ((n % total) + total) % total;
2687    layout();
2688    schedule();
2689  }
2690  function next(){ goTo(idx + 1); }
2691  function prev(){ goTo(idx - 1); }
2692
2693  function schedule(){
2694    if(timer) clearTimeout(timer);
2695    timer = setTimeout(next, HOLD_MS);
2696  }
2697
2698  document.getElementById('invNext').addEventListener('click', next);
2699  document.getElementById('invPrev').addEventListener('click', prev);
2700
2701  // Pause auto-rotate while user is hovering the stage
2702  let hovering = false;
2703  stage.addEventListener('mouseenter', () => { hovering = true; if(timer) { clearTimeout(timer); timer = null; }});
2704  stage.addEventListener('mouseleave', () => { hovering = false; schedule(); });
2705
2706  // Pause when section out of view (perf + battery)
2707  const io = new IntersectionObserver((entries) => {
2708    entries.forEach(e => {
2709      if(e.isIntersecting){ if(!hovering) schedule(); }
2710      else { if(timer){ clearTimeout(timer); timer = null; } }
2711    });
2712  }, {threshold: 0.2});
2713  io.observe(stage);
2714
2715  // Drag / swipe to scrub
2716  let dragX = null;
2717  stage.addEventListener('pointerdown', (e) => { dragX = e.clientX; });
2718  window.addEventListener('pointerup', (e) => {
2719    if(dragX === null) return;
2720    const dx = e.clientX - dragX;
2721    if(Math.abs(dx) > 40) (dx < 0 ? next : prev)();
2722    dragX = null;
2723  });
2724
2725  layout();
2726  schedule();
2727})();
2728
2729/* ====== Combined Key-fall + Hub scroll-driven section ====== */
2730(() => {
2731  const section   = document.getElementById('combinedScroll');
2732  if (!section) return;
2733
2734  // Key-fall elements
2735  const sideLeft  = document.getElementById('kfSideLeft');
2736  const sideRight = document.getElementById('kfSideRight');
2737  const key       = document.getElementById('kfKey');
2738
2739  // Hub elements
2740  const hub       = document.getElementById('hub');
2741  const halo      = document.getElementById('hubHalo');
2742  const sats      = [...document.querySelectorAll('.sat')];
2743  const teeth     = document.getElementById('teeth');
2744
2745  if (!hub) return;
2746
2747  // CTA elements
2748  const ctaHeadline = document.getElementById('ctaHeadline');
2749  const btnApp      = document.getElementById('ctaBtnApp');
2750  const btnPlay     = document.getElementById('ctaBtnPlay');
2751
2752  // Build 24 gear teeth procedurally
2753  if (teeth && !teeth.children.length) {
2754    const cx = 100, cy = 100, ringR = 92, toothH = 14, toothW = 10, N = 24;
2755    for (let i = 0; i < N; i++) {
2756      const a = (i / N) * Math.PI * 2;
2757      const tx = cx + Math.cos(a) * (ringR + toothH/2 - 2);
2758      const ty = cy + Math.sin(a) * (ringR + toothH/2 - 2);
2759      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
2760      rect.setAttribute('x', tx - toothW/2);
2761      rect.setAttribute('y', ty - toothH/2);
2762      rect.setAttribute('width', toothW);
2763      rect.setAttribute('height', toothH);
2764      rect.setAttribute('rx', 2);
2765      rect.setAttribute('transform', `rotate(${(a * 180/Math.PI) + 90} ${tx} ${ty})`);
2766      rect.setAttribute('fill', '#dba019');
2767      teeth.appendChild(rect);
2768    }
2769  }
2770
2771  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
2772  const lerp  = (a, b, t) => a + (b - a) * t;
2773  const ease  = t => t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2, 2)/2;
2774  const rng   = (p, a, b) => clamp((p - a) / (b - a), 0, 1);
2775
2776  function update() {
2777    const rect  = section.getBoundingClientRect();
2778    const total = section.offsetHeight - window.innerHeight;
2779    const raw   = clamp(-rect.top / total, 0, 1);
2780
2781    // ── SIDE TEXT ──────────────────────────────────────────────
2782    // Fades in on entry, fades out as key approaches gear (~38-50%)
2783    const tIn   = rng(raw, 0.0, 0.06);
2784    const tOut  = rng(raw, 0.38, 0.50);
2785    const sideO = tIn * (1 - tOut);
2786    sideLeft.style.opacity  = sideO;
2787    sideRight.style.opacity = sideO;
2788    sideLeft.style.transform  = `translate(${lerp(-30, 0, tIn) + lerp(0, -30, tOut)}px, -50%)`;
2789    sideRight.style.transform = `translate(${lerp(30, 0, tIn) + lerp(0, 30, tOut)}px, -50%)`;
2790    sideLeft.style.filter   = `blur(${lerp(6, 0, tIn) + lerp(0, 6, tOut)}px)`;
2791    sideRight.style.filter  = `blur(${lerp(6, 0, tIn) + lerp(0, 6, tOut)}px)`;
2792
2793    // ── KEY FALL ───────────────────────────────────────────────
2794    // Falls from above viewport into the gear at center; fades on impact
2795    const fallP    = rng(raw, 0.0, 0.45);
2796    const keyY     = lerp(-2, 42, fallP);    // starts at viewport top (last card bottom) → center
2797    const keyRot   = lerp(-8, 4, fallP);
2798    const keyScale = lerp(0.94, 1.04, fallP);
2799    const keyO     = 1 - rng(raw, 0.38, 0.52);  // fades as it hits the gear
2800    key.style.transform = `translate(-50%, ${keyY}vh) rotate(${keyRot}deg) scale(${keyScale})`;
2801    key.style.opacity   = keyO;
2802
2803    // ── GEAR GROW then FADE OUT ───────────────────────────────
2804    // Gear grows 0.46→0.78, holds full size, then fades 0.80→0.90
2805    const gearP    = rng(raw, 0.46, 0.78);
2806    const gearE    = ease(gearP);
2807    const gScale   = lerp(0.04, 1.0, gearE);
2808    const gearFade = 1 - rng(raw, 0.80, 0.90);
2809    hub.style.transform = `translate(-50%,-50%) scale(${gScale})`;
2810    hub.style.opacity   = raw >= 0.44 ? gearFade : 0;
2811
2812    // Halo fades with gear
2813    halo.setAttribute('r', String(80 + 240 * gearE));
2814    halo.setAttribute('fill-opacity', String(0.18 * gearE * gearFade));
2815
2816    // Hub text fades in then out with gear
2817    if (raw > 0.72 && gearFade > 0.05) hub.classList.add('in');
2818    else                                hub.classList.remove('in');
2819
2820    // Satellites appear staggered, then fade with gear
2821    const satFade = 1 - rng(raw, 0.82, 0.92);
2822    sats.forEach((sat, i) => {
2823      const start = 0.78 + (i % 3) * 0.04;
2824      if (raw >= start && satFade > 0.05) sat.classList.add('in');
2825      else                                sat.classList.remove('in');
2826      sat.style.opacity = raw >= start ? satFade : 0;
2827    });
2828
2829    // ── CTA REVEAL ────────────────────────────────────────────
2830    // Headline rises in after gear is gone, buttons stagger in after
2831    const ctaIn   = rng(raw, 0.88, 0.96);
2832    const appIn   = rng(raw, 0.92, 0.99);
2833    const playIn  = rng(raw, 0.95, 1.00);
2834
2835    ctaHeadline.style.opacity   = ctaIn;
2836    ctaHeadline.style.transform = `translateY(${lerp(28, 0, ease(ctaIn))}px)`;
2837
2838    btnApp.style.opacity   = appIn;
2839    btnApp.style.transform = `translateY(${lerp(18, 0, ease(appIn))}px)`;
2840    btnPlay.style.opacity  = playIn;
2841    btnPlay.style.transform = `translateY(${lerp(18, 0, ease(playIn))}px)`;
2842
2843    // Enable pointer events once buttons are substantially visible
2844    btnApp.style.pointerEvents  = appIn  > 0.5 ? 'auto' : 'none';
2845    btnPlay.style.pointerEvents = playIn > 0.5 ? 'auto' : 'none';
2846  }
2847
2848  let rafId;
2849  function onScroll() {
2850    if (rafId) return;
2851    rafId = requestAnimationFrame(() => { rafId = null; update(); });
2852  }
2853  window.addEventListener('scroll', onScroll, { passive: true });
2854  window.addEventListener('resize', update);
2855  requestAnimationFrame(update);
2856})();
2857</script>
2857
2858
2859<!-- ─── Loading overlay (shown when navigating to /inventory) ──────────── -->
2860<style>
2861  #ccLoadingOverlay{
2862    position:fixed;inset:0;z-index:2147483647;
2863    background:#000;display:none;
2864    align-items:center;justify-content:center;
2865  }
2866  #ccLoadingOverlay.visible{display:flex;}
2867  #ccLoadingOverlay .ccLoadingOverlayStack{
2868    display:grid;
2869    justify-items:center;
2870    gap:18px;
2871  }
2872  #ccLoadingOverlay img{
2873    width:min(56vw,640px);height:auto;max-height:70vh;object-fit:contain;
2874    animation:ccPulse 1.6s ease-in-out infinite;
2875    filter:drop-shadow(0 0 32px rgba(240,191,61,.35));
2876  }
2877  #ccLoadingOverlay .ccLoadingOverlaySpinner{
2878    width:34px;height:34px;border-radius:999px;
2879    border:3px solid rgba(240,191,61,.18);
2880    border-top-color:#f0bf3d;
2881    border-right-color:rgba(255,224,130,.85);
2882    box-shadow:0 0 18px rgba(240,191,61,.28);
2883    animation:ccSpin .9s linear infinite;
2884  }
2885  @keyframes ccPulse{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
2886  @keyframes ccSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
2887  @media (prefers-reduced-motion:reduce){
2888    #ccLoadingOverlay img,
2889    #ccLoadingOverlay .ccLoadingOverlaySpinner{animation:none}
2890  }
2891</style>
2892<div id="ccLoadingOverlay" role="status" aria-live="polite" aria-label="Loading">
2893  <div class="ccLoadingOverlayStack">
2894    <img src="/cars-crypto-loading.png" alt="Cars & Crypto" />
2895    <span class="ccLoadingOverlaySpinner" aria-hidden="true"></span>
2896  </div>
2897</div>
2898<script>
2899  (function(){
2900    var overlay = document.getElementById('ccLoadingOverlay');
2901    var fallbackTimer;
2902    function hide(){
2903      overlay.classList.remove('visible');
2904      if (fallbackTimer) window.clearTimeout(fallbackTimer);
2905    }
2906    function show(){
2907      overlay.classList.add('visible');
2908      if (fallbackTimer) window.clearTimeout(fallbackTimer);
2909      fallbackTimer = window.setTimeout(hide, 8000);
2910    }
2911    // Show overlay when the user clicks any link that navigates into the
2912    // Next.js app (inventory + future routes). The browser then performs
2913    // a normal hard navigation; the overlay fills the white period.
2914    document.addEventListener('click', function(e){
2915      var a = e.target && (e.target.closest ? e.target.closest('a') : null);
2916      if (!a) return;
2917      var href = a.getAttribute('href');
2918      if (!href) return;
2919      // Only intercept same-origin nav into our app routes.
2920      if (href.charAt(0) !== '/' || href === '/' || href === '#') return;
2921      // Don't show if user explicitly opens in new tab.
2922      if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
2923      if (a.target === '_blank') return;
2924      e.preventDefault();
2925      show();
2926      requestAnimationFrame(function(){
2927        requestAnimationFrame(function(){ window.location.assign(href); });
2928      });
2929    }, true);
2930    // Hide if the user navigates back via bfcache.
2931    window.addEventListener('pageshow', hide);
2932  })();
2933</script>
2933
2934</body>
2935</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.