/* JOYN homepage — sections below the hero. Product-led system: centred headers, surfaces with a pointer-follow spotlight,
   horizontal rail, expandable panels, stacked cards. Colours come from the shared tokens in styles.css. */
.j-sec{position:relative;padding:clamp(80px,10vw,140px) 0}
.j-dk{background:var(--ink);color:#fff}.j-lt{background:var(--paper)}.j-wh{background:#fff}
.j-wrap{width:min(1200px,100% - clamp(32px,6vw,80px));margin-inline:auto}
.j-head{text-align:center;max-width:800px;margin:0 auto clamp(44px,6vw,80px)}
.j-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;font:700 12px var(--f);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:rgba(255,255,255,.7);color:#55544f}
.j-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--acc)}
.j-dk .j-badge{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#c9c9c3}.j-dk .j-badge::before{background:var(--acc);box-shadow:0 0 0 3px rgba(200,242,61,.22)}
.j-h{font-size:clamp(32px,4.8vw,62px);line-height:1.04;letter-spacing:-.042em;font-weight:700;margin:20px 0 0}
.j-h .mu{color:#9a9992}.j-dk .j-h .mu{color:#6f6f78}
.j-sub{font-size:clamp(16px,1.4vw,19px);color:var(--mut);max-width:58ch;margin:20px auto 0}.j-dk .j-sub{color:#a3a39d}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* motion primitives */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform .95s var(--ease);transition-delay:calc(var(--i)*45ms)}
.js [data-split].in .w>span{transform:none}
.stg>.rv:nth-child(2){--d:.08s}.stg>.rv:nth-child(3){--d:.16s}.stg>.rv:nth-child(4){--d:.24s}.stg>.rv:nth-child(5){--d:.32s}.stg>.rv:nth-child(6){--d:.4s}.stg>.rv:nth-child(7){--d:.48s}
/* surfaces */
.j-card{position:relative;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px -38px rgba(9,9,11,.4);transition:transform .5s var(--ease),box-shadow .5s,border-color .5s}
.j-dk .j-card{background:#111115;border-color:rgba(255,255,255,.09);box-shadow:none}
.sf::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(440px circle at var(--mx,50%) var(--my,0%),rgba(200,242,61,.16),transparent 62%)}
.sf:hover::before{opacity:1}.sf>*{position:relative;z-index:1}
.j-card:hover{transform:translateY(-4px);border-color:#cfcdc5}.j-dk .j-card:hover{border-color:rgba(200,242,61,.28)}
.j-card h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.025em;font-weight:700;margin:0 0 8px}.j-card p{margin:0;color:var(--mut);font-size:15px}.j-dk .j-card p{color:#a3a39d}
.j-tag{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.j-tag span{font:700 11px var(--f);padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mut)}.j-dk .j-tag span{border-color:rgba(255,255,255,.12);color:#b9b9b3}
/* mini-UI atoms */
.j-vis{position:relative;display:grid;place-items:center;height:190px;margin-bottom:24px;border-radius:14px;overflow:hidden;background:#0c0c0f;border:1px solid rgba(255,255,255,.07)}
.j-vis::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.2px);background-size:20px 20px}
.j-vis>*{position:relative}
.j-sk{display:block;height:7px;border-radius:4px;background:#2b2b32}.j-card:not(.j-dkc) .j-sk{}
.j-flow{display:flex;align-items:center}.j-nd{display:flex;gap:8px;align-items:center;padding:9px 13px;border-radius:10px;background:#1b1b21;border:1px solid #2c2c33;font:700 12px var(--f);color:#ececE6}
.j-nd i{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.j-ln{position:relative;width:34px;height:2px;background:#2f2f36;overflow:hidden}.j-ln::after{content:"";position:absolute;inset:0;background:var(--acc);transform:translateX(-101%)}
.in .j-ln::after{animation:jline 3.2s ease-in-out infinite}.in .j-ln:nth-of-type(2)::after{animation-delay:.6s}
@keyframes jline{0%{transform:translateX(-101%)}45%,60%{transform:translateX(0)}100%{transform:translateX(101%)}}
.j-bars{display:flex;gap:8px;align-items:flex-end;height:110px;width:72%}.j-bars i{flex:1;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--acc),#8fb52a);transform-origin:bottom;transform:scaleY(.1);transition:transform 1.1s var(--ease)}
.in .j-bars i{transform:none}.j-bars i:nth-child(1){height:42%}.j-bars i:nth-child(2){height:64%;transition-delay:.06s}.j-bars i:nth-child(3){height:52%;transition-delay:.12s}.j-bars i:nth-child(4){height:84%;transition-delay:.18s}.j-bars i:nth-child(5){height:70%;transition-delay:.24s}.j-bars i:nth-child(6){height:96%;transition-delay:.3s}
.j-list{display:grid;gap:8px;width:80%}.j-li{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:9px;background:#1b1b21;border:1px solid #2c2c33;font:700 12px var(--f);color:#ececE6;opacity:0;transform:translateX(-10px);transition:opacity .6s,transform .6s var(--ease)}
.in .j-li{opacity:1;transform:none}.j-li:nth-child(2){transition-delay:.12s}.j-li:nth-child(3){transition-delay:.24s}.j-li b{font-size:10px;padding:3px 8px;border-radius:99px;background:rgba(200,242,61,.14);color:var(--acc)}
.j-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:86%}.j-pills span{display:flex;gap:7px;align-items:center;padding:8px 12px;border-radius:99px;background:#1b1b21;border:1px solid #2c2c33;font:700 12px var(--f);color:#ececE6}
.j-pills span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);animation:jpulse 3s ease-in-out infinite}.j-pills span:nth-child(2)::before{animation-delay:.4s}.j-pills span:nth-child(3)::before{animation-delay:.8s}.j-pills span:nth-child(4)::before{animation-delay:1.2s}.j-pills span:nth-child(5)::before{animation-delay:1.6s}.j-pills span:nth-child(6)::before{animation-delay:2s}
@keyframes jpulse{0%,100%{box-shadow:0 0 0 0 rgba(200,242,61,0)}40%{box-shadow:0 0 0 5px rgba(200,242,61,.28)}}
/* 01 Why JOYN — bento of unique mini-UIs */
.j-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}.j-b7{grid-column:span 7}.j-b5{grid-column:span 5}.j-bento .j-card{padding:clamp(20px,2.4vw,28px)}
/* 02 Challenges — chaos to clarity */
.j-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}
.j-tab{padding:11px 18px;border-radius:99px;border:1px solid var(--line);background:#fff;font:700 14px var(--f);color:#6d6c66;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.j-tab:hover{border-color:#b9b7ae;color:var(--ink)}.j-tab[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.j-cmp{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);align-items:stretch;gap:0}
.j-side{position:relative;border-radius:22px;padding:clamp(22px,2.6vw,32px);min-height:380px;display:flex;flex-direction:column;overflow:hidden}
.j-bad{background:repeating-linear-gradient(135deg,#ecebe5,#ecebe5 12px,#f1f0ea 12px,#f1f0ea 24px);border:1px dashed #c5c3ba}.j-good{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.j-lab{font:800 11px var(--f);letter-spacing:.14em;text-transform:uppercase;color:#7c7b75}.j-good .j-lab{color:var(--acc)}
.j-scat{position:relative;flex:1;min-height:200px}.j-scat span{position:absolute;padding:9px 14px;border-radius:9px;background:#fff;border:1px solid #cfcdc5;font:700 13px var(--f);color:#55544f;box-shadow:0 12px 20px -14px rgba(0,0,0,.35);animation:jin .6s var(--ease) both,jfloat 7s ease-in-out .6s infinite alternate}
.j-scat span:nth-child(1){left:4%;top:8%;rotate:-6deg}.j-scat span:nth-child(2){left:46%;top:2%;rotate:4deg;animation-delay:-2s}.j-scat span:nth-child(3){left:12%;top:46%;rotate:5deg;animation-delay:-4s}.j-scat span:nth-child(4){left:52%;top:52%;rotate:-4deg;animation-delay:-1s}
@keyframes jfloat{to{transform:translateY(-8px)}}@keyframes jin{from{opacity:0}}
.j-ord{display:grid;gap:8px;align-content:start;flex:1;margin-top:18px}.j-or{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;background:#17171b;border:1px solid #26262c;font:700 14px var(--f)}
.j-or::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.j-swap>*{animation:jup .6s var(--ease) both}.j-swap .j-or:nth-child(2){animation-delay:.07s}.j-swap .j-or:nth-child(3){animation-delay:.14s}.j-swap .j-or:nth-child(4){animation-delay:.21s}
@keyframes jup{from{opacity:0;transform:translateY(12px)}}
.j-cap{margin:18px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:#55544f;min-height:3em}.j-good .j-cap{color:#e4e4df}
.j-mid{display:grid;place-items:center}.j-mid span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--ink)}
/* 03 Features — horizontal rail */
.j-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(16px,calc((100% - 1200px)/2)) 28px;scroll-padding-inline:max(16px,calc((100% - 1200px)/2));scrollbar-width:none;overscroll-behavior-x:contain}
.j-rail::-webkit-scrollbar{display:none}.j-rail:focus-visible{outline-offset:-4px}
.j-fc{flex:0 0 min(390px,84vw);scroll-snap-align:start;min-height:470px;padding:22px;display:flex;flex-direction:column}.j-fc .j-vis{height:230px}
.j-fc .n{font:800 12px var(--f);letter-spacing:.08em;color:#6e6e78;margin-bottom:10px}
.j-ctl{display:flex;align-items:center;gap:28px;margin-top:8px}.j-prog{position:relative;flex:1;height:2px;background:#2a2a30;overflow:hidden}.j-prog i{position:absolute;left:0;top:0;bottom:0;width:var(--tw,25%);background:var(--acc);transform:translateX(var(--tx,0px))}
.j-nav{display:flex;gap:10px}.j-nav button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:transparent;color:#fff;cursor:pointer;transition:background .3s,color .3s,border-color .3s,opacity .3s}
.j-nav button:hover:not(:disabled){background:var(--acc);color:var(--ink);border-color:var(--acc)}.j-nav button:disabled{opacity:.3;cursor:default}
.j-inv{width:74%;padding:14px;border-radius:12px;background:#17171b;border:1px solid #2a2a31;display:grid;gap:10px}.j-ih{display:flex;justify-content:space-between;align-items:center;font:800 13px var(--f);color:#fff}.j-ih em{font:800 10px var(--f);font-style:normal;padding:3px 9px;border-radius:99px;background:var(--acc);color:var(--ink)}
.j-tot{display:flex;justify-content:space-between;padding-top:10px;border-top:1px solid #2a2a31;font:700 12px var(--f);color:#b9b9b3}.j-tot b{color:var(--acc)}
.j-av{display:flex;align-items:center;gap:10px}.j-av::before{content:"";width:22px;height:22px;border-radius:50%;background:#2f2f37;flex:none}.j-av:nth-child(odd)::before{background:var(--acc)}.j-av .j-sk{flex:1}
.j-hb{display:grid;gap:10px;width:74%}.j-hb div{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center;font:700 11px var(--f);color:#b9b9b3}.j-hb i{display:block;height:8px;border-radius:4px;background:#2b2b32;position:relative;overflow:hidden}.j-hb i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#d6d6d0;border-radius:4px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)}
.in .j-hb i::after{transform:none}.j-hb div:nth-child(1) i{--w:82%}.j-hb div:nth-child(2) i{--w:58%}.j-hb div:nth-child(3) i{--w:30%}.j-hb div:nth-child(3) i::after{background:var(--acc)}.j-hb div:nth-child(4) i{--w:66%}
.j-pay{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:78%}.j-pay div{padding:12px;border-radius:12px;background:#17171b;border:1px solid #2a2a31;display:grid;gap:9px;font:800 11px var(--f);color:#fff;letter-spacing:.08em}.j-pay div:first-child{color:var(--acc)}
.j-codes{display:flex;gap:22px;align-items:center}.j-barc{width:96px;height:64px;background:repeating-linear-gradient(90deg,#f1f1ec 0 3px,transparent 3px 6px,#f1f1ec 6px 7px,transparent 7px 11px);border-radius:3px}
.j-qr{width:68px;height:68px;border-radius:6px;background:conic-gradient(#f1f1ec 25%,#0c0c0f 0 50%,#f1f1ec 0 75%,#0c0c0f 0) 0 0/14px 14px;border:5px solid #f1f1ec}
.j-svg{width:82%;height:auto}.j-svg .g{stroke:#26262c;stroke-width:1}.j-svg .a{fill:rgba(200,242,61,.18)}.j-svg .l{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}.in .j-svg .l{stroke-dashoffset:0}
/* 04 Product showcase */
.j-show{background:var(--paper);background-image:radial-gradient(rgba(9,9,11,.07) 1px,transparent 1.2px);background-size:24px 24px}
.j-ptabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.j-pt{position:relative;overflow:hidden;padding:12px 20px;border-radius:99px;border:1px solid var(--line);background:#fff;font:700 14px var(--f);color:#6d6c66;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.j-pt:hover{color:var(--ink);border-color:#b9b7ae}.j-pt[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.j-pt::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px;background:var(--acc);transform:scaleX(0);transform-origin:left}
.j-pt[aria-selected=true]::after{animation:jprog 6s linear forwards}.j-show.pause .j-pt::after{animation-play-state:paused}@keyframes jprog{to{transform:scaleX(1)}}
.js .j-wind.rv{transform:perspective(1500px) rotateX(7deg) translateY(44px) scale(.97);transform-origin:50% 0}.js .j-wind.rv.in{transform:none}
.j-wind{max-width:1060px;margin:0 auto}.j-wind .win{box-shadow:0 60px 110px -50px rgba(9,9,11,.55),0 0 0 1px rgba(9,9,11,.08)}
.j-note{text-align:center;margin:22px 0 0;font-size:13px;color:var(--mut)}
/* 05 How it works */
.j-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:68px 0 0}
.j-steps::before,.j-steps::after{content:"";position:absolute;top:21px;left:16.66%;right:16.66%;height:2px}.j-steps::before{background:#2f2f36}
.j-steps::after{background:linear-gradient(90deg,var(--acc),#f6ffcf 50%,var(--acc));background-size:200% 100%;animation:shine 3.4s linear infinite}@keyframes shine{to{background-position:-200% 0}}
.j-step{position:relative;padding:24px;list-style:none}.j-dot{position:absolute;left:50%;top:-68px;z-index:2;display:grid;place-items:center;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--ink);border:2px solid var(--acc);color:var(--acc);font:800 15px var(--f)}
.j-dot::after{content:"";position:absolute;inset:-2px;border:2px solid var(--acc);border-radius:50%;opacity:0;animation:ring 3s ease-out infinite}.j-step:nth-child(2) .j-dot::after{animation-delay:1s}.j-step:nth-child(3) .j-dot::after{animation-delay:2s}
@keyframes ring{0%{transform:scale(1);opacity:.7}60%,100%{transform:scale(1.8);opacity:0}}
.j-step .j-vis{height:150px}.j-form{display:grid;gap:9px;width:70%}.j-form .j-sk{height:26px;border-radius:7px;background:#1f1f25;border:1px solid #2c2c33}.j-form b{justify-self:start;padding:7px 12px;border-radius:7px;background:var(--acc);color:var(--ink);font:800 11px var(--f)}
@media(max-width:860px){.j-steps{grid-template-columns:1fr;padding:0 0 0 64px;gap:20px}.j-steps::before,.j-steps::after{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}.j-steps::after{background:linear-gradient(180deg,var(--acc),#f6ffcf 50%,var(--acc));background-size:100% 200%;animation:shinev 3.4s linear infinite}@keyframes shinev{to{background-position:0 -200%}}.j-dot{left:-64px;top:24px;margin-left:0}}
/* 06 Who it's for — expandable panels */
.j-ind{display:flex;gap:12px;height:440px}
.j-pn{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:22px;background:#fff;border:1px solid var(--line);transition:flex .65s var(--ease),border-color .4s,background .4s}
.j-pn.on{flex:3.2;background:var(--ink);border-color:var(--ink);color:#fff}
.j-pb{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;height:100%;padding:24px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.j-pi{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#efede7;color:var(--ink);flex:none;transition:background .4s,color .4s}.j-pn.on .j-pi{background:var(--acc)}
.j-pt2{font-size:clamp(20px,2vw,28px);font-weight:700;letter-spacing:-.03em;margin:0}.j-pn:not(.on) .j-pt2{writing-mode:vertical-rl;transform:rotate(180deg);margin-top:auto;white-space:nowrap}
.j-pd{max-width:36ch;margin:0;color:#a3a39d;font-size:16px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ease)}.j-pn.on .j-pd{opacity:1;transform:none;transition-delay:.2s}
.j-pn .j-tag{margin-top:auto;opacity:0;transition:opacity .5s}.j-pn.on .j-tag{opacity:1;transition-delay:.25s}.j-pn .j-tag span{border-color:rgba(255,255,255,.2);color:#d6d6d0}
.j-pn:not(.on):hover{border-color:#bdbbb2}
@media(max-width:860px){.j-ind{flex-direction:column;height:auto}.j-pn,.j-pn.on{flex:none}.j-pb{height:auto;display:grid;grid-template-columns:46px 1fr;align-items:center;gap:14px 16px;padding:18px 20px}.j-pn:not(.on) .j-pt2{writing-mode:horizontal-tb;transform:none;margin:0}.j-pd,.j-pn .j-tag{grid-column:2;display:none;opacity:1;transform:none;margin-top:0}.j-pn.on .j-pd,.j-pn.on .j-tag{display:flex}.j-pn.on .j-pd{display:block}}
/* 07 In depth — stacked sticky cards */
.j-stack{display:grid;gap:28px}
.j-sc{position:sticky;top:calc(92px + var(--k,0)*22px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(22px,3vw,44px);min-height:min(520px,76vh)}
.j-sc:nth-child(2){--k:1}.j-sc:nth-child(3){--k:2}.j-sc:hover{transform:none}
.j-sc .n{font:800 12px var(--f);letter-spacing:.1em;color:var(--mut)}.j-sc h3{font-size:clamp(26px,3vw,42px);letter-spacing:-.04em;line-height:1.05;margin:14px 0}.j-sc p{font-size:17px}
.j-ck{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:10px}.j-ck li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:15px}.j-ck li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.j-pv{display:grid;place-items:center;min-height:380px;padding:clamp(16px,2.4vw,32px);border-radius:16px;background:#0f0f12;overflow:hidden;position:relative}
.j-pv::before{content:"";position:absolute;right:-18%;top:-30%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(200,242,61,.2),transparent 72%);pointer-events:none}
.hub{position:relative;width:100%;max-width:360px;aspect-ratio:1;--r:clamp(84px,24vw,140px)}.hub::before{content:"";position:absolute;inset:calc(50% - var(--r));border:1px dashed #3a3a42;border-radius:50%;animation:spin 70s linear infinite}
.hc{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:#17171b;border:1px solid #34343a;display:grid;place-items:center}
.hn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1));background:#fff;color:var(--ink);border-radius:99px;padding:7px 13px;font:800 12px var(--f);white-space:nowrap}
.hn:nth-child(2){--a:0deg}.hn:nth-child(3){--a:60deg}.hn:nth-child(4){--a:120deg}.hn:nth-child(5){--a:180deg}.hn:nth-child(6){--a:240deg}.hn:nth-child(7){--a:300deg}
.js .j-pv .hn{opacity:0;transition:opacity .6s}.js .j-sc.in .hn{opacity:1}.js .j-sc.in .hn:nth-child(3){transition-delay:.2s}.js .j-sc.in .hn:nth-child(4){transition-delay:.35s}.js .j-sc.in .hn:nth-child(5){transition-delay:.5s}.js .j-sc.in .hn:nth-child(6){transition-delay:.65s}.js .j-sc.in .hn:nth-child(7){transition-delay:.8s}
.j-sc .win{width:100%;max-width:520px}
@media(max-width:900px){.j-sc{position:relative;top:auto;grid-template-columns:1fr;min-height:0}}
/* 08 Why choose */
.j-vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.j-col{position:relative;border-radius:24px;padding:clamp(22px,3vw,36px);border:1px solid rgba(255,255,255,.09);background:#101014}
.j-col.joyn{border-color:rgba(200,242,61,.38);background:linear-gradient(180deg,#14160d,#0f0f12 60%);box-shadow:0 0 0 1px rgba(200,242,61,.08),0 50px 90px -60px rgba(200,242,61,.55)}
.j-col h3{font:800 12px var(--f);letter-spacing:.14em;text-transform:uppercase;color:#7f7f89;margin:0 0 8px}.j-col.joyn h3{color:var(--acc)}
.j-rw{display:grid;grid-template-columns:30px 1fr;gap:6px 14px;padding:22px 0;border-top:1px solid rgba(255,255,255,.08)}.j-rw:first-of-type{border-top:0}
.j-rw::before{content:"";width:22px;height:22px;border-radius:50%;margin-top:2px;border:1px solid #3a3a42;background:linear-gradient(45deg,transparent 46%,#6f6f78 46% 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,#6f6f78 46% 54%,transparent 54%);background-size:10px 10px;background-position:center;background-repeat:no-repeat}
.joyn .j-rw::before{border:0;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.j-rw b{font-size:clamp(17px,1.6vw,21px);letter-spacing:-.02em;color:#8d8d97}.joyn .j-rw b{color:#fff}.j-rw span{grid-column:2;color:#76767f;font-size:15px}.joyn .j-rw span{color:#a9a9a3}
.js .j-rw{opacity:0;transform:translateX(-12px);transition:opacity .6s,transform .7s var(--ease)}.js .j-col.in .j-rw{opacity:1;transform:none}.js .j-col.in .j-rw:nth-of-type(2){transition-delay:.1s}.js .j-col.in .j-rw:nth-of-type(3){transition-delay:.2s}.js .j-col.in .j-rw:nth-of-type(4){transition-delay:.3s}.js .j-col.in .j-rw:nth-of-type(5){transition-delay:.4s}
/* 09 FAQ */
.j-faq{max-width:860px;margin:0 auto;border-radius:26px;background:#fff;border:1px solid var(--line);padding:6px clamp(20px,3vw,36px);box-shadow:0 30px 60px -44px rgba(9,9,11,.4)}
.fq{border-bottom:1px solid var(--line)}.fq:last-child{border:0}.fq h3{margin:0}
.fq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;background:none;border:0;font:700 clamp(17px,1.6vw,20px) var(--f);text-align:left;cursor:pointer;color:var(--ink);letter-spacing:-.02em}
.pm{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:background .35s,color .35s,transform .45s var(--ease),border-color .35s}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;border-radius:2px}.pm::after{transform:rotate(90deg)}
.fq button:hover .pm{border-color:var(--ink)}.fq button[aria-expanded=true] .pm{background:var(--ink);color:var(--acc);border-color:var(--ink);transform:rotate(45deg)}
.fa{display:grid;grid-template-rows:1fr}.fa>div{overflow:hidden}.fa p{margin:0;padding:0 56px 26px 0;color:var(--mut);font-size:16px;max-width:62ch}
.js .fa{grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s .5s}.js .fq.open .fa{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--ease),visibility 0s}
/* 10 CTA */
.j-cta{position:relative;overflow:hidden;border-radius:34px;padding:1px;background:#1d1d22}
.j-beam{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(200,242,61,.95) 82%,transparent 92%);animation:jspin 9s linear infinite}@keyframes jspin{to{transform:rotate(360deg)}}
.j-cin{position:relative;overflow:hidden;border-radius:33px;background:radial-gradient(70% 90% at 50% 0%,#1a1b14,var(--ink) 70%);padding:clamp(60px,10vw,128px) clamp(24px,6vw,80px);text-align:center;color:#fff}
.j-cin::before{content:"";position:absolute;inset:0;opacity:.06;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%)}
.j-cin>*{position:relative}.j-cin .j-h{font-size:clamp(36px,6.4vw,88px);max-width:18ch;margin:22px auto 0;letter-spacing:-.05em;line-height:.98}
.js .j-cin .j-h .w.mu>span{transition:transform .95s var(--ease) calc(var(--i)*45ms),color 1.2s ease 1s}.js .j-cin .j-h.in .w.mu>span{color:var(--acc)}
.j-cin .j-sub{margin-top:24px}.j-cta .ctas{justify-content:center;margin-top:36px}
.j-cta .b-acc{position:relative;overflow:hidden;isolation:isolate}.j-cta .b-acc::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);transition:transform .45s var(--ease)}.j-cta .b-acc:hover::before{transform:none}
.j-cin .tlink{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:#fff;border-bottom:1px solid #55555d;padding-bottom:3px;align-self:center;transition:color .3s,border-color .3s}.j-cin .tlink:hover{color:var(--acc);border-color:var(--acc)}.j-cin .tlink [data-lucide]{width:16px;height:16px}
.j-wm{position:absolute!important;right:-6%;bottom:-18%;width:min(50vw,640px);opacity:.04;pointer-events:none}
/* footer */
footer{background:var(--ink);color:#fff;padding:72px 0 30px}
.fg2{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:40px}.fg2 p{color:#8d8d87;max-width:340px;font-size:14px;margin:16px 0 0}
.fg2 nav{display:grid;gap:11px;align-content:start}.fg2 h4{margin:0 0 6px;font:800 12px var(--f);letter-spacing:.14em;text-transform:uppercase;color:#6e6e68}
.fg2 nav a{color:#cfcfca;font-weight:600;font-size:14px;transition:color .2s}.fg2 nav a:hover{color:var(--acc)}#sup{display:grid;gap:8px}#sup[hidden]{display:none}
.copy{color:#6e6e68;font-size:13px;border-top:1px solid #1f1f24;margin-top:56px;padding-top:22px}
/* responsive */
@media(max-width:1000px){.j-b7,.j-b5{grid-column:span 12}.fg2{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.j-cmp{grid-template-columns:1fr}.j-mid{padding:10px 0;transform:rotate(90deg)}.j-vs{grid-template-columns:1fr}.j-side{min-height:0}}
@media(max-width:560px){.fg2{grid-template-columns:1fr}.fa p{padding-right:4px}}
@media(prefers-reduced-motion:reduce){.js [data-split] .w>span{transform:none}.j-bars i{transform:none}.j-li{opacity:1;transform:none}.j-hb i::after{transform:none}.j-svg .l{stroke-dashoffset:0}.js .j-pv .hn,.js .j-rw{opacity:1;transform:none}.js .j-cin .j-h .w.mu>span{color:var(--acc)}.js .j-wind.rv{transform:none}.chart .ln{stroke-dashoffset:0}.chart .ar{opacity:1}.j-pt[aria-selected=true]::after{animation:none;transform:scaleX(1)}}
/* product window internals (shared by showcase and in-depth) */
.win{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;text-align:left;box-shadow:0 50px 100px -40px #000,0 0 0 1px rgba(255,255,255,.1)}
.win-top{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f1f0ec;border-bottom:1px solid var(--line)}.win-top i{width:9px;height:9px;border-radius:50%;background:#cfcdc5}.win-top span{margin-left:10px;font:600 11px var(--f);color:var(--mut)}
.win-b{display:grid;grid-template-columns:164px minmax(0,1fr);height:480px}
.wside{background:#0c0c0f;padding:16px 12px;display:flex;flex-direction:column;gap:3px}.wside img{height:20px;width:auto;align-self:flex-start;margin:2px 8px 18px}
.wi{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:#8f8f89;font:600 12px var(--f);transition:background .35s,color .35s}.wi::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;opacity:.55;transition:background .35s}.wi.on{background:#1a1a1f;color:#fff}.wi.on::before{background:var(--acc);opacity:1}
.wmain{position:relative;overflow:hidden;background:#fbfaf7}
.scr{position:absolute;inset:0;padding:20px 22px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s,transform .6s var(--ease),visibility 0s .45s}
.scr.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s .1s,transform .6s var(--ease) .1s,visibility 0s}
.wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.wh h4{margin:0;font-size:17px;letter-spacing:-.02em}.bt{font:700 11px var(--f);background:var(--ink);color:#fff;padding:8px 12px;border-radius:7px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.stt{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px}.stt small{display:block;font:600 10px var(--f);color:var(--mut);margin-bottom:10px}
.sk{display:block;height:8px;border-radius:4px;background:#e4e2da}.sk.big{height:14px;background:#d9d7cf}
.tbl{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden}.th,.tr{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px;align-items:center;padding:0 14px}
.th{height:34px;background:#f4f3ee;border-bottom:1px solid var(--line)}.th span{font:700 10px var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}.tr{height:42px;border-bottom:1px solid #efede7}.tr:last-child{border:0}
.scr.on .tr,.vz.in .win.wsm .tr{animation:rowin .55s var(--ease) both;animation-delay:calc(var(--r)*70ms + 180ms)}.js .win.wsm .tr{opacity:0}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.pl{display:block;height:18px;width:54px;border-radius:99px;background:#e4e2da}.pl.a{background:var(--acc)}.pl.c{background:transparent;border:1px solid #cfcdc5}
.bc{display:block;height:16px;width:70%;background:repeating-linear-gradient(90deg,#09090b 0 2px,transparent 2px 4px,#09090b 4px 5px,transparent 5px 8px)}
.chipsr{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.chipsr span{font:700 11px var(--f);padding:6px 11px;border-radius:99px;border:1px solid var(--line);color:var(--mut);background:#fff}.chipsr .on{background:var(--ink);color:#fff;border-color:var(--ink)}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two2 h5{margin:0 0 8px;font:800 11px var(--f);letter-spacing:.08em;text-transform:uppercase}
.sbar{display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 12px;margin-bottom:12px;font:600 12px var(--f);color:var(--mut)}
.chart{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff;border-radius:10px;margin-bottom:12px}.chart .gl line{stroke:#ecebe5;stroke-width:1}
.chart .ar{fill:rgba(200,242,61,.3);opacity:0}.chart .ln{fill:none;stroke:#09090b;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.scr.on .ln,.vz.in .win.wsm .ln{animation:draw 1.6s var(--ease) .2s forwards}.scr.on .ar,.vz.in .win.wsm .ar{animation:fin .8s ease .9s forwards}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fin{to{opacity:1}}
.win-b{height:520px}.win.wsm{width:100%;max-width:520px}.win.wsm .win-b{grid-template-columns:1fr;height:auto}.win.wsm .wside{display:none}.win.wsm .scr{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;padding:18px}
button.wi{width:100%;border:0;background:none;text-align:left;cursor:pointer}.wi.dim{opacity:.4}button.wi:hover{color:#fff}
@media(max-width:900px){.win-b{grid-template-columns:1fr;height:300px}.wside,.stats{display:none}.scr{padding:14px}.win-top span{display:none}.win.wsm .win-b{height:auto}}

.j-rail{cursor:grab}.j-rail.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}.j-ctl{margin-top:8px}.j-hide{display:none}
.j-steps .j-step{overflow:visible}.j-step .j-vis{overflow:hidden}.j-scat{margin-top:16px}
.j-pn:not(.on) .j-pt2{font-size:18px}.j-pn{min-width:92px}
@media(max-width:560px){.j-nd{padding:8px 10px;font-size:11px;gap:6px}.j-ln{width:16px}.j-scat{min-height:250px}.j-scat span{font-size:12px;padding:8px 11px}
.j-scat span:nth-child(1){left:2%;top:2%}.j-scat span:nth-child(2){left:36%;top:24%}.j-scat span:nth-child(3){left:3%;top:50%}.j-scat span:nth-child(4){left:34%;top:76%}}