/* Alternative. Light grey canvas, square components, geometric rails outside the page width. */
:root{
  --bg:#E4E4E4; --bg-2:#DCDCDC; --paper:#F4F4F4; --white:#FFF; --ink:#0A0A0A; --ink-2:rgba(10,10,10,.6); --ink-3:rgba(10,10,10,.4); --ink-4:rgba(10,10,10,.18);
  --line:rgba(10,10,10,.12); --line-2:rgba(10,10,10,.22); --eth:#627EEA;
  --font:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --w:1120px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--ink);color:#fff} :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button,input,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono)} .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px} @media (max-width:640px){.wrap{padding:0 16px}}
.c2{color:var(--ink-2)} .c3{color:var(--ink-3)}

/* dot grid on the canvas + geometric rails outside the page width */
.canvas{position:relative;background-image:radial-gradient(rgba(10,10,10,.14) 1px,transparent 1.5px);background-size:44px 44px;background-position:22px 22px}
.rails{position:fixed;inset:0;pointer-events:none;z-index:0}
.rails::before,.rails::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.rails::before{left:max(16px,calc(50% - var(--w)/2 - 1px))} .rails::after{right:max(16px,calc(50% - var(--w)/2 - 1px))}
.rails i{position:absolute;top:0;bottom:0;width:1px;background:repeating-linear-gradient(to bottom,var(--line-2) 0 10px,transparent 10px 34px)}
.rails i.l1{left:max(8px,calc(50% - var(--w)/2 - 56px))} .rails i.r1{right:max(8px,calc(50% - var(--w)/2 - 56px))}
.rails i.l2{left:max(0px,calc(50% - var(--w)/2 - 112px));background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 20px)} .rails i.r2{right:max(0px,calc(50% - var(--w)/2 - 112px));background:repeating-linear-gradient(to bottom,var(--line) 0 4px,transparent 4px 20px)}
@media (max-width:1300px){.rails i{display:none}}
main,header,footer{position:relative;z-index:1}

/* type */
.d1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
.d2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.d3{font-size:1.35rem;letter-spacing:-.02em;font-weight:700} .lead{font-size:1.05rem;line-height:1.6;color:var(--ink-2)}

/* square controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:0;font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:background 140ms,color 140ms,transform 140ms}
.btn:hover{background:var(--ink);color:#fff} .btn:active{transform:translateY(1px)}
.btn-solid{background:var(--ink);color:#fff} .btn-solid:hover{background:#2a2a2a}
.btn-sm{height:36px;padding:0 14px;font-size:13px} .btn-lg{height:52px;padding:0 26px;font-size:15px}
.field{height:44px;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);width:100%;border-radius:0} .field:focus{outline:none;border-color:var(--ink)}
.tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--line-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:var(--paper)}
.eth{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-weight:700;letter-spacing:-.01em} .eth img{width:.85em;height:.85em}
.sq{border:1px solid var(--line-2);background:var(--paper)}
.bar{height:6px;background:var(--bg-2);border:1px solid var(--line);position:relative} .bar i{position:absolute;inset:0;right:auto;background:var(--ink)}

/* loader */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:transform 700ms var(--ease);will-change:transform}
.loader.done{transform:translateY(-100%)}
.loader .m{width:72px;height:72px;position:relative;margin:0 auto}
.loader .m img{width:100%;height:100%;animation:mark 1000ms var(--ease) both}
@keyframes mark{0%{transform:scale(.6);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
.loader .word{margin-top:18px;font-weight:700;letter-spacing:-.03em;font-size:20px;opacity:0;animation:fade 500ms var(--ease) 700ms forwards} @keyframes fade{to{opacity:1}}
.loader .ln{position:absolute;left:50%;bottom:64px;width:120px;height:1px;background:var(--line-2);transform:translateX(-50%);overflow:hidden} .loader .ln::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:load 1600ms var(--ease) forwards} @keyframes load{to{transform:none}}
body.loading{overflow:hidden}

/* header: full width */
.top{position:sticky;top:0;z-index:40;background:rgba(228,228,228,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:20px;height:64px;padding:0 24px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em;font-size:17px} .wordmark img{width:26px;height:26px}
.top ul{display:none;gap:22px;margin-left:24px} @media (min-width:900px){.top ul{display:flex}} .top ul a{font-size:14px;color:var(--ink-2)} .top ul a:hover,.top ul a[aria-current]{color:var(--ink)}
.top .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* pinned hero */
.pin{position:relative;height:420vh}
.pin-stage{position:sticky;top:64px;height:calc(100vh - 64px);display:grid;place-items:center;overflow:hidden}
.pin-card{width:min(520px,calc(100% - 32px));height:min(78vh,700px);background:#fff;border:1px solid var(--line-2);position:relative;overflow:hidden}
.pin-card .step{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;opacity:0;transition:opacity 500ms var(--ease);pointer-events:none}
.pin-card .step.on{opacity:1;pointer-events:auto}
.pin-card .step .n{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--ink-3)} .pin-card .step .n i{flex:1;height:1px;background:var(--line-2);position:relative} .pin-card .step .n i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,25%);background:var(--ink)}
.pin-card .step h2{margin-top:22px;font-size:1.7rem;letter-spacing:-.03em;line-height:1.1}
.pin-card .step p{margin-top:10px;color:var(--ink-2);font-size:14px;max-width:34ch}
.pin-card .step .img{flex:1;min-height:0;margin:18px 0 64px;display:grid;place-items:center} .pin-card .step .img img{max-height:100%;object-fit:contain;transition:transform 900ms var(--ease);transform:translateY(12px) scale(.98)} .pin-card .step.on .img img{transform:none}
.pin-card .step .price{position:absolute;left:32px;bottom:28px;display:grid;gap:2px} .pin-card .step .price small{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.pin-card .step .go{position:absolute;right:32px;bottom:28px}
.float{position:absolute;width:190px;padding:10px 10px 30px;background:#fff;border:1px solid var(--line-2);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);will-change:transform;display:none} @media (min-width:1100px){.float{display:block}}
.float img{aspect-ratio:1;object-fit:cover;background:#fff} .float span{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:10px;color:var(--ink-3)}
.float.f1{left:calc(50% - 560px);top:16%} .float.f2{right:calc(50% - 560px);top:10%} .float.f3{left:calc(50% - 520px);bottom:12%} .float.f4{right:calc(50% - 540px);bottom:16%}
.hero-copy{text-align:center;padding:0 0 32px} .hero-copy .lead{margin:14px auto 0;max-width:56ch}
.scrolldown{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:6px} .scrolldown i{width:1px;height:28px;background:var(--ink-3);animation:drop 1.6s var(--ease) infinite} @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}}

/* sections */
.section{padding:96px 0} .section-h{text-align:center;max-width:60ch;margin:0 auto 48px} .section-h .lead{margin-top:14px}
.grid4{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media (min-width:800px){.grid4{grid-template-columns:repeat(2,1fr)}} @media (min-width:1100px){.grid4{grid-template-columns:repeat(4,1fr)}}
.asset{background:var(--paper);padding:0;display:flex;flex-direction:column;transition:background 160ms} .asset:hover{background:#fff}
.asset .ph{aspect-ratio:1;background:#fff;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)} .asset .ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)} .asset:hover .ph img{transform:scale(1.03)}
.asset .body{padding:18px 18px 20px;display:grid;gap:10px}
.asset .brand{display:flex;align-items:center;gap:8px;height:22px} .asset .brand img{height:20px;width:auto;max-width:120px;opacity:.9}
.asset h3{font-size:1.15rem;letter-spacing:-.02em} .asset .sub{font-size:12.5px;color:var(--ink-2)}
.asset .row{display:flex;justify-content:space-between;align-items:end;margin-top:6px} .asset .row small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.asset .eth{font-size:1.05rem}
.asset .prog{display:grid;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.steps{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media (min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps>div{background:var(--paper);padding:28px 24px 30px} .steps .n{font-family:var(--mono);font-size:12px;color:var(--ink-3)} .steps h3{margin-top:40px;font-size:1.15rem;letter-spacing:-.02em} .steps p{margin-top:10px;color:var(--ink-2);font-size:14px}
.why{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media (min-width:640px){.why{grid-template-columns:1fr 1fr}} @media (min-width:1000px){.why{grid-template-columns:repeat(3,1fr)}}
.why>div{background:var(--paper);padding:24px} .why h3{font-size:1rem;letter-spacing:-.015em} .why p{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.split{display:grid;gap:40px} @media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.kv{display:grid} .kv>div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-top:1px solid var(--line-2)} .kv>div:last-child{border-bottom:1px solid var(--line-2)} .kv b{font-weight:500} .kv span{color:var(--ink-3);font-size:12.5px;display:block} .kv em{font-style:normal;font-family:var(--mono);font-size:13px}
details{border-top:1px solid var(--line-2)} details:last-child{border-bottom:1px solid var(--line-2)} summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:16px} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-family:var(--mono);color:var(--ink-3)} details[open] summary::after{content:"–"} details p{padding-bottom:18px;color:var(--ink-2);max-width:64ch}
.cta{text-align:center;padding:96px 0} .cta .lead{margin:12px auto 26px;max-width:46ch}
footer{border-top:1px solid var(--line);padding:48px 0 36px;font-size:13px;color:var(--ink-2)} .foot{display:grid;gap:28px} @media (min-width:800px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}} .foot h4{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .foot li{margin:6px 0} .foot a:hover{color:var(--ink)}
.legal{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--ink-3);max-width:100ch}
.rise{opacity:0;transform:translateY(12px);animation:rise 700ms var(--ease) forwards;animation-delay:var(--d,0ms)} @keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.loader{display:none}.scrolldown i{animation:none}.pin{height:auto}.pin-stage{position:static;height:auto;padding:24px 0}.pin-card .step{position:static;opacity:1;display:none}.pin-card .step:first-child{display:flex}}

/* listing page */
.listing-hero{display:grid;gap:32px;padding:48px 0 0} @media (min-width:960px){.listing-hero{grid-template-columns:1.15fr 1fr;gap:48px;align-items:start}}
.ph-big{background:#fff;border:1px solid var(--line-2);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden} .ph-big img{width:100%;height:100%;object-fit:cover}
.buy{background:var(--paper);border:1px solid var(--line-2);padding:22px;display:grid;gap:14px;position:sticky;top:88px}
.buy .price{font-size:2rem} .buy .price small{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:400;letter-spacing:0;margin-top:4px}
.qty{display:grid;grid-template-columns:44px 1fr 44px;border:1px solid var(--line-2);background:#fff} .qty button{border:0;background:transparent;height:44px;cursor:pointer;font-size:18px} .qty input{border:0;text-align:center;font-family:var(--mono);height:44px;background:transparent;width:100%} .qty input:focus{outline:none}
.tot{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-2)} .tot b{font-family:var(--mono);color:var(--ink);font-size:15px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media (max-width:640px){.spec{grid-template-columns:1fr}} .spec>div{background:var(--paper);padding:12px 14px} .spec small{display:block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .spec b{font-weight:500;display:block;margin-top:3px;font-size:13.5px}
.tl{display:grid} .tl>div{display:grid;grid-template-columns:110px 90px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line-2);font-size:13.5px} .tl>div:last-child{border-bottom:1px solid var(--line-2)} .tl .t{font-family:var(--mono);font-size:12px;color:var(--ink-3)} .tl b{font-weight:500}
.srcs li{margin:6px 0;font-size:13px} .srcs a{text-decoration:underline;text-underline-offset:3px;color:var(--ink-2)} .srcs a:hover{color:var(--ink)}
.modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:rgba(10,10,10,.5);padding:16px} .modal.open{display:grid} .modal .box{width:min(420px,100%);padding:22px;display:grid;gap:12px;background:var(--paper);border:1px solid var(--line-2)}
.wallets{display:grid;gap:6px} .wallets button{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;background:#fff;border:1px solid var(--line-2);cursor:pointer;text-align:left} .wallets button:hover{border-color:var(--ink)} .wallets img{width:22px;height:22px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;padding:10px 16px;font-size:13px;background:var(--ink);color:#fff;transition:all 200ms var(--ease);z-index:80;pointer-events:none} .toast.show{opacity:1;transform:translate(-50%,0)}
.other{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2)} @media (min-width:800px){.other{grid-template-columns:repeat(3,1fr)}}

.nopin .pin{height:auto}.nopin .pin-stage{position:static;height:auto;padding:40px 0}.nopin .loader{display:none}