:root { --g1:#9aa3b2; --g2:#e9ecf2; --fg:#fff; --mute:#9b9ea8; --tile:#ffffff14; --line:#ffffff24; --leave:560; --e:cubic-bezier(.2,.8,.2,1); --d:'Inter Tight','Helvetica Neue',Arial,sans-serif; --b:'Inter','Helvetica Neue',Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:#000; overflow-x:clip; }
body { background:#000; color:var(--fg); font-family:var(--b); font-size:17px; line-height:1.5; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; } button, input { font:inherit; color:inherit; }
html.has-cur, html.has-cur * { cursor:none !important; }

/* Layers: colour aura (0) < ghost type (1) < WebGL canvas (2) < copy (3) */
.aura { position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.62;
  background:radial-gradient(38% 42% at 68% 40%, var(--g1), transparent 70%), radial-gradient(34% 40% at 30% 66%, var(--g2), transparent 70%); animation:drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform:translate(4%, -3%) rotate(8deg) scale(1.08); } }
.aura { transition:filter 1s; } html.frozen .aura { filter:blur(90px) hue-rotate(-30deg) saturate(1.6) brightness(1.2); }
#c { position:fixed; inset:0; width:100%; height:100vh; height:100lvh; z-index:2; pointer-events:none; }
html.no-gl #c { display:none; }
.over { position:relative; z-index:3; } .ghost { position:relative; z-index:1; }
section { position:relative; }

.k-cur i { position:absolute; width:14px; height:14px; margin:-7px; border-radius:50%; background:#fff; mix-blend-mode:difference; transition:transform .35s var(--e); }
.k-cur.on i { transform:scale(3.6); } .k-cur.label i { transform:scale(6); }
.k-cur span { position:absolute; transform:translate(-50%,-50%); font:700 10px var(--d); letter-spacing:.04em; color:#000; white-space:nowrap; opacity:0; transition:opacity .2s; mix-blend-mode:normal; }
.k-cur.label span { opacity:1; } .k-cur.label i { mix-blend-mode:normal; }

.curtain { position:fixed; inset:0; z-index:100; background:#000; display:grid; place-items:center; transition:opacity .6s ease, transform .9s var(--e); }
html.ready .curtain { opacity:0; transform:scale(1.06); pointer-events:none; }
html.leaving .curtain { opacity:1; transform:none; transition:opacity .45s ease; pointer-events:auto; }
.curtain-in { display:flex; align-items:baseline; gap:16px; font:800 clamp(44px,8vw,110px)/1 var(--d); letter-spacing:-.045em; }
.curtain-in span { font:500 13px var(--b); letter-spacing:.02em; color:var(--mute); font-variant-numeric:tabular-nums; }
html:not(.first) .curtain-in span { visibility:hidden; }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:95; display:flex; align-items:center; gap:28px; padding:20px 4vw; transition:transform .5s var(--e); }
html.down:not(.menu-open) .nav { transform:translateY(-130%); }
.logo { font:800 26px/1 var(--d); letter-spacing:-.045em; margin-right:auto; display:flex; align-items:center; gap:10px; }
.logo small { font:500 11px var(--b); letter-spacing:0; color:var(--mute); border:1px solid var(--line); border-radius:40px; padding:4px 9px; }
.nav nav { display:flex; gap:4px; font:500 15px var(--b); }
.nav nav a { padding:9px 16px; border-radius:40px; transition:background .25s; } .nav nav a:hover, .nav nav a[aria-current] { background:var(--tile); }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:15px 26px; font:600 16px/1 var(--b); background:#fff; color:#000; transition:transform .3s var(--e), background .3s; white-space:nowrap; }
.pill:hover { transform:scale(1.045); } .pill:active { transform:scale(.97); }
.pill.glass { background:#ffffff1f; color:#fff; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .pill.glass:hover { background:#ffffff33; }
.pill.sm { padding:11px 18px; font-size:14px; }
.burger { display:none; width:44px; height:44px; border-radius:50%; background:var(--tile); border:0; position:relative; }
.burger i { position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:#fff; top:17px; transition:transform .35s var(--e), top .35s var(--e); } .burger i + i { top:25px; }
html.menu-open .burger i { top:21px; transform:rotate(45deg); } html.menu-open .burger i + i { transform:rotate(-45deg); }
.menu { position:fixed; inset:0; z-index:90; background:#000000eb; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); display:flex; flex-direction:column; justify-content:center; padding:0 7vw; opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s; }
html.menu-open .menu { opacity:1; visibility:visible; }
.menu a { font:800 clamp(52px,15vw,110px)/1.04 var(--d); letter-spacing:-.045em; translate:0 30px; opacity:0; transition:translate .6s var(--e), opacity .4s; }
html.menu-open .menu a { translate:0; opacity:1; transition-delay:calc(.08s + var(--n) * .06s); } .menu a[aria-current] { color:var(--g1); }

/* Type */
h1, h2, h3 { font-family:var(--d); font-weight:800; letter-spacing:-.045em; line-height:.92; text-wrap:balance; }
h1 { font-size:clamp(54px,8.6vw,164px); } h2 { font-size:clamp(44px,6.2vw,112px); } h3 { font-size:clamp(24px,2.2vw,34px); letter-spacing:-.03em; line-height:1.05; }
.lede { font-size:clamp(17px,1.45vw,22px); color:#d6d8de; max-width:30em; margin-top:22px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font:500 14px var(--b); background:var(--tile); border:1px solid var(--line); border-radius:40px; padding:7px 14px 7px 8px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); margin-bottom:24px; }
.eyebrow b { background:#fff; color:#000; border-radius:30px; padding:2px 8px; font-weight:600; font-size:12px; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:30px; }
.tile { background:var(--tile); border:1px solid var(--line); border-radius:30px; padding:26px; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }

.hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; text-align:center; padding:13vh 4vw 0; }
.hero h1 { font-size:clamp(54px,7.6vw,140px); }
.hero .lede { margin-inline:auto; } .hero .row { justify-content:center; }
.beat { min-height:150vh; display:flex; align-items:center; padding:0 4vw; }
.beat .copy { width:min(44%,600px); } .beat.r .copy { margin-left:auto; }
.beat.first { min-height:100vh; min-height:100svh; }
.beat.low { align-items:flex-end; padding-bottom:12vh; }
.scrim { position:relative; } .scrim::before { content:''; position:absolute; inset:-80px -120px; z-index:-1; background:radial-gradient(closest-side, #000c 30%, #0000); pointer-events:none; }

/* Mini app UI */
.rates { margin-top:30px; max-width:420px; padding:10px; }
.rates li { list-style:none; display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:20px; font-weight:500; transition:background .25s; } .rates li:hover { background:#ffffff14; }
.rates li i { font-style:normal; width:40px; height:40px; border-radius:50%; background:#ffffff1f; display:grid; place-items:center; font-size:20px; }
.rates li span { color:var(--mute); font-size:14px; display:block; } .rates li b { margin-left:auto; font:700 19px var(--d); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.toasts { margin-top:30px; display:grid; gap:10px; max-width:400px; }
.toast { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:22px; --k:clamp(0, calc((var(--p) - var(--at)) * 9), 1); opacity:var(--k); transform:translateY(calc((1 - var(--k)) * 30px)) scale(calc(.94 + var(--k) * .06)); }
.toast i { font-style:normal; width:42px; height:42px; border-radius:14px; background:#fff; color:#000; display:grid; place-items:center; font-size:20px; flex:none; }
.toast span { color:var(--mute); font-size:14px; display:block; } .toast b { margin-left:auto; font:700 19px var(--d); font-variant-numeric:tabular-nums; } .toast b.up { color:#5fe39a; }
.ripple { position:absolute; left:26%; top:50%; width:0; height:0; z-index:1; }
.ripple i { position:absolute; left:-30vmin; top:-30vmin; width:60vmin; height:60vmin; border-radius:50%; border:2px solid #ffffff55; animation:ring 2.6s ease-out infinite; opacity:0; } .ripple i:nth-child(2) { animation-delay:.85s; } .ripple i:nth-child(3) { animation-delay:1.7s; }
@keyframes ring { 0% { transform:scale(.25); opacity:.9; } 100% { transform:scale(1.2); opacity:0; } }

/* Plan carousel */
.plans { height:520vh; } .pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:3; }
.plans .top { position:absolute; top:12vh; left:0; right:0; text-align:center; } .plans .top h2 { font-size:clamp(34px,4vw,68px); }
.plan-panel { position:absolute; left:0; right:0; bottom:6vh; text-align:center; opacity:0; transform:translateY(24px); transition:opacity .45s, transform .6s var(--e); pointer-events:none; padding:0 5vw; }
.plan-panel.on { opacity:1; transform:none; pointer-events:auto; }
.plan-panel h3 { font-size:clamp(46px,6vw,104px); letter-spacing:-.05em; line-height:.9; }
.plan-panel p { color:#d6d8de; margin:10px auto 18px; max-width:32em; } .plan-panel p b { color:#fff; font:700 1.1em var(--d); }
.plan-dots { position:absolute; right:4vw; top:50%; transform:translateY(-50%); display:grid; gap:10px; }
.plan-dots i { width:8px; height:8px; border-radius:8px; background:#ffffff40; transition:height .4s var(--e), background .3s; } .plan-dots i.on { height:30px; background:#fff; }

/* Freeze switch */
.switch { display:flex; align-items:center; gap:18px; margin-top:30px; width:min(100%,420px); text-align:left; border:1px solid var(--line); }
.switch em { font-style:normal; width:64px; height:38px; border-radius:40px; background:#ffffff2e; position:relative; flex:none; transition:background .35s; }
.switch em::after { content:''; position:absolute; left:4px; top:4px; width:30px; height:30px; border-radius:50%; background:#fff; transition:transform .45s var(--e); }
.switch[aria-pressed=true] em { background:#4fb8ff; } .switch[aria-pressed=true] em::after { transform:translateX(26px); }
.switch b { display:block; font:700 19px var(--d); letter-spacing:-.02em; } .switch span { color:var(--mute); font-size:14px; }

/* Bento */
.bento { padding:12vh 4vw 16vh; } .bento h2 { max-width:12em; margin-bottom:44px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.grid .tile { min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; position:relative; transition:transform .5s var(--e), background .3s; } .grid .tile:hover { transform:translateY(-6px); background:#ffffff1f; }
.grid .tile p { color:#c9ccd4; margin-top:8px; font-size:16px; max-width:26em; }
.grid .a { grid-column:span 7; background:linear-gradient(135deg, #2f6bff, #6fd6ff); border:0; } .grid .b { grid-column:span 5; } .grid .c { grid-column:span 5; } .grid .d { grid-column:span 7; background:linear-gradient(135deg, #ff5fa8, #9a66ff); border:0; }
.grid .a p, .grid .d p { color:#fffc; }
.bars { position:absolute; left:26px; right:26px; top:26px; height:42%; display:flex; align-items:flex-end; gap:8px; }
.bars i { flex:1; border-radius:10px 10px 4px 4px; background:#ffffff66; height:calc(var(--h) * 1%); transform-origin:bottom; transform:scaleY(0); transition:transform .9s var(--e) calc(var(--n) * 60ms); } .in .bars i { transform:none; } .bars i.hi { background:#fff; }
.chips { position:absolute; left:26px; right:26px; top:26px; display:flex; flex-wrap:wrap; gap:8px; }
.chips i { font-style:normal; font:600 15px var(--b); background:#ffffff1f; border-radius:40px; padding:9px 14px; }
.vnum { position:absolute; left:26px; top:26px; font:700 clamp(20px,2vw,30px) var(--d); letter-spacing:.06em; font-variant-numeric:tabular-nums; } .vnum small { display:block; font:500 13px var(--b); letter-spacing:0; color:var(--mute); margin-top:4px; }
.bigno { position:absolute; right:22px; top:6px; font:800 clamp(90px,11vw,190px)/1 var(--d); letter-spacing:-.06em; color:#ffffff33; }

.cta { min-height:115vh; display:flex; flex-direction:column; align-items:center; text-align:center; padding:14vh 4vw 0; }
.cta h2 { font-size:clamp(60px,11vw,210px); }

/* Cards page chapters */
.chapter { min-height:160vh; display:flex; align-items:center; padding:0 4vw; }
.chapter .copy { width:min(42%,560px); } .chapter.r .copy { margin-left:auto; }
.chapter h2 { font-size:clamp(64px,9.4vw,180px); letter-spacing:-.055em; }
.chapter .from { font:700 clamp(22px,2vw,30px) var(--d); letter-spacing:-.02em; margin-top:12px; } .chapter .from small { font:400 15px var(--b); color:var(--mute); letter-spacing:0; }
.perks { list-style:none; margin-top:26px; display:grid; gap:8px; }
.perks li { display:flex; gap:12px; align-items:center; padding:13px 16px; border-radius:18px; background:var(--tile); border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-size:16px; }
.perks li::before { content:''; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg, var(--g1), var(--g2)); flex:none; }
.finishes { display:flex; gap:10px; margin-top:22px; align-items:center; flex-wrap:wrap; }
.finishes button { width:40px; height:40px; border-radius:50%; border:0; background:var(--c); box-shadow:inset 0 0 0 1px #ffffff40, inset 0 -8px 12px #0004, inset 0 8px 12px #fff3; position:relative; transition:transform .3s var(--e); }
.finishes button::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid #fff; opacity:0; transform:scale(.8); transition:opacity .25s, transform .35s var(--e); } .finishes button.on::after { opacity:1; transform:none; } .finishes button:hover { transform:scale(1.1); }
.finishes span { font-size:14px; color:var(--mute); margin-left:6px; } .finishes span b { color:#fff; font-weight:600; }

/* Metal page */
.figs { display:flex; gap:clamp(24px,5vw,70px); justify-content:center; flex-wrap:wrap; margin-top:34px; }
.figs b { display:block; font-family:var(--d); font-weight:800; font-size:clamp(54px,7vw,120px); line-height:.95; letter-spacing:-.05em; font-variant-numeric:tabular-nums; } .figs b i { font-style:normal; font-size:.4em; letter-spacing:-.02em; margin-left:4px; color:var(--g1); }
.figs div > span { font-size:14px; color:var(--mute); }
.layers { list-style:none; margin-top:28px; counter-reset:l; display:grid; gap:8px; }
.layers li { counter-increment:l; display:flex; gap:14px; align-items:baseline; padding:13px 16px; border-radius:18px; background:var(--tile); border:1px solid var(--line); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.layers li::before { content:'0' counter(l); font:700 13px var(--d); color:var(--mute); } .layers li span { margin-left:auto; color:var(--mute); font-size:14px; white-space:nowrap; }

/* Personalise */
.make { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:110px 4vw 50px; }
.make .copy { width:min(40%,480px); } .make h1 { font-size:clamp(50px,6.4vw,112px); }
.field { margin-top:22px; } .field > span, .field > label { display:flex; justify-content:space-between; font-size:14px; color:var(--mute); margin-bottom:10px; } .field b { color:#fff; font-weight:600; }
.seg { display:flex; gap:6px; background:var(--tile); border:1px solid var(--line); border-radius:999px; padding:5px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.seg button { flex:1; border:0; background:none; border-radius:999px; padding:11px 6px; font:600 14px var(--b); transition:background .3s, color .3s; } .seg button.on { background:#fff; color:#000; }
.field.metal-only { transition:opacity .4s; } html:not(.is-metal) .field.metal-only { opacity:.3; pointer-events:none; }
input.t { width:100%; background:var(--tile); border:1px solid var(--line); border-radius:18px; padding:16px 18px; font:500 17px var(--b); outline:0; text-transform:uppercase; letter-spacing:.04em; transition:border-color .3s, background .3s; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
input.t:focus { border-color:#fff; background:#ffffff24; } input.t::placeholder { color:#ffffff66; text-transform:none; letter-spacing:0; font-weight:400; }
.drag { position:absolute; right:4vw; bottom:32px; z-index:3; font-size:13px; color:var(--mute); }

footer { position:relative; z-index:3; padding:60px 4vw 34px; background:#000; border-top:1px solid var(--line); }
footer .cols { display:flex; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; font-size:14px; color:var(--mute); } footer .cols div { display:flex; gap:22px; flex-wrap:wrap; } footer a:hover { color:#fff; }
footer .legal { margin-top:26px; font-size:13px; color:#80838c; max-width:60em; line-height:1.6; }

@media (max-width:860px) {
  .nav { padding:14px 5vw; } .nav nav, .nav .pill { display:none; } .burger { display:block; } .logo small { display:none; }
  .hero { padding-top:13vh; }
  .beat, .beat.r, .chapter, .chapter.r { align-items:flex-start; padding:14vh 5vw 0; } .beat .copy, .beat.r .copy, .chapter .copy, .chapter.r .copy { width:100%; margin:0; }
  .beat.low { padding-bottom:0; }
  .rates { display:none; } .toasts { max-width:none; } .ripple { left:50%; top:72%; }
  .plans .top { top:10vh; } .plan-panel { bottom:4vh; } .plan-panel p { font-size:15px; } .plan-dots { display:none; }
  .grid { grid-template-columns:1fr; } .grid .tile { grid-column:auto !important; min-height:250px; }
  .perks li, .layers li { padding:11px 14px; font-size:15px; }
  .make { align-items:flex-end; padding:0 5vw 22px; } .make .copy { width:100%; } .make h1 { font-size:40px; } .make .lede, .make .eyebrow, .drag { display:none; } .field { margin-top:14px; } .make .row { margin-top:16px; }
  .seg button { font-size:12px; padding:10px 2px; }
  footer .cols { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .aura, .ripple i { animation:none; } .curtain, .menu { transition:none; } }