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&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 & 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.