/* page */
body{overflow-x:hidden}
#main{position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero{--cell:calc((100vw - 2 * var(--pad)) / 29);padding:max(calc(var(--cell) * 2.4),76px) var(--pad) calc(var(--cell) * 1)}
.bigmark svg{width:100%;height:auto;display:block}
.bigmark rect{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.bigmark.on rect{animation:bm .55s cubic-bezier(.2,.8,.3,1.3) forwards,shine 7s ease-in-out infinite;animation-delay:var(--bd),calc(var(--bx) * .05s + 2s)}
@keyframes bm{to{opacity:1;transform:none}}
@keyframes shine{0%,88%,100%{filter:none}93%{filter:brightness(1.6)}}
.bigby{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--cell) * .3);margin:calc(var(--cell) * .55) 0 0;opacity:0;transition:opacity .8s .9s}
.bigmark.on+.bigby{opacity:1}
.bigby span{font:500 calc(var(--cell) * .42)/1 var(--mono);color:var(--mute)}
.bigby img{height:max(calc(var(--cell) * 1),22px);width:auto;display:block}
.intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:5vw;align-items:center;padding:6vh var(--pad) 10vh}
.lede{font:700 clamp(36px,4.4vw,78px)/1.02 var(--display);letter-spacing:-.025em;margin:0 0 24px}
.lede .nw{white-space:nowrap}
@media (max-width:520px){.lede{font-size:8.2vw}}
.intro-text p:not(.lede){font-size:clamp(19px,1.75vw,25px);line-height:1.5;color:#C4C2CB;max-width:42ch;margin:0}
.intro-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn.big{min-height:52px;padding:0 24px;font-size:16px;border-radius:12px;display:inline-flex;align-items:center;text-decoration:none}
.works{padding:6vh var(--pad) 8vh}
.works h2,.why-head h2,.faq h2,.join h2{font-size:clamp(32px,4.4vw,64px);line-height:1}
.short{font-size:clamp(17px,1.5vw,21px);color:#C4C2CB;max-width:60ch;margin:18px 0 0}
.outs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:6vh}
.out{margin:0;background:rgba(28,26,42,.75);border:1px solid var(--rule);border-radius:16px;padding:18px 18px 22px}
.out .ill{aspect-ratio:320/240}
.out figcaption{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.out b{font:600 18px var(--display)}
.out span{color:var(--mute);font-size:14.5px}
@media (max-width:1000px){.outs{grid-template-columns:1fr 1fr}.intro{grid-template-columns:1fr}}
.video{margin:10vh auto 0;max-width:1600px}
.video .frame{position:relative;aspect-ratio:16/9;background:#1A1828;border:1px solid var(--rule);border-radius:18px;display:grid;place-items:center;overflow:hidden}
.video .vmark{position:absolute;left:28px;top:28px;width:min(24%,200px);opacity:.55}
.video .vmark svg{width:100%;height:auto;display:block}
.video .play{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.video .play:before{content:"";border-left:26px solid rgba(255,255,255,.6);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:8px}
.video figcaption{font:400 13px var(--mono);color:var(--mute);margin-top:14px}
/* why: one step per screen, one drawing at a time */
.why{padding:10vh var(--pad) 0}
.why-body{margin-top:-8vh}
.why-head p{font-size:clamp(17px,1.5vw,21px);color:#C4C2CB;max-width:56ch;margin:18px 0 0}
.why-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:5vw}
.why-steps{list-style:none;margin:0;padding:0}
.why-steps li{min-height:66vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.25;transition:opacity .5s}
.why-steps li.on{opacity:1}
.why-steps .n{font:500 14px var(--mono);color:#8E86FF}
.why-steps b{font:700 clamp(28px,3.2vw,46px)/1.06 var(--display);letter-spacing:-.02em}
.why-steps .t{color:#B9B6C2;font-size:clamp(16px,1.3vw,19px);max-width:42ch}
.why-stage{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.why-stage .ws{grid-area:1/1;opacity:0;transform:translateY(20px);transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.why-stage .ws.vis{opacity:1;transform:none}
@media (max-width:860px){.why-body{grid-template-columns:1fr}.why-stage{order:-1;top:56px;height:44vh;z-index:2;background:linear-gradient(180deg,var(--bg) 85%,rgba(20,19,31,0))}.why-steps li{min-height:56vh}}
/* questions */
.faq{padding:12vh var(--pad) 8vh}
.qa{margin-top:5vh;max-width:1000px;border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 4px;font:600 clamp(18px,1.6vw,22px)/1.3 var(--display)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:#fff}
.qa .qi{width:22px;height:22px;flex:0 0 auto}
.qa .qx{margin-left:auto;width:14px;height:14px;position:relative;flex:0 0 auto}
.qa .qx:before,.qa .qx:after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--mute);transition:transform .25s}
.qa .qx:after{transform:rotate(90deg)}
.qa details[open] .qx:after{transform:rotate(0)}
.qa details p{margin:0;padding:0 4px 24px 42px;color:#B9B6C2;max-width:64ch;font-size:16px}
.join{padding:6vh var(--pad) 12vh}
.join p{color:var(--mute);max-width:50ch;margin:12px 0 26px;font-size:18px}
.join form{display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
.join input{flex:1 1 260px;font:400 16px var(--body);color:var(--text);background:var(--plate);border:1px solid var(--rule);border-radius:10px;padding:10px 14px;min-height:48px}
.join .btn{min-height:48px;padding:0 20px}
.join .msg{min-height:1.6em;font:400 14px var(--mono);margin-top:14px}
.join .msg.ok{color:var(--text)}.join .msg.err{color:#FF8A8A}
@media (min-width:1000px){.intro,.works,.why,.faq,.join{padding-right:calc(var(--pad) + 130px)}}

/* v0.8 */
p,h1,h2,h3,figcaption,summary,li{text-wrap:pretty}
h1,h2,.lede,.why-steps b{text-wrap:balance}
.why-left{position:relative;padding-left:42px}
.why-line{position:absolute;left:8px;top:var(--y0,0);bottom:var(--y1,0);width:3px;background:#2C2A3E;border-radius:2px}
.why-line i{position:absolute;inset:0;background:linear-gradient(180deg,var(--violet),var(--blue));transform-origin:top;transform:scaleY(0);border-radius:2px}
.why-steps li{position:relative}
.why-steps li:after{content:"";position:absolute;left:-41px;top:50%;width:18px;height:18px;margin-top:-9px;background:#2C2A3E;transition:background .3s,box-shadow .3s}
.why-steps li.done:after{background:linear-gradient(135deg,var(--violet),var(--blue));box-shadow:0 0 18px rgba(91,92,255,.6)}
.why-steps li.done .n{color:#fff}
.qa{columns:2;column-gap:4vw;max-width:none;border-top:0}
.qa details{border-top:1px solid var(--rule);border-bottom:0;break-inside:avoid}
@media (max-width:860px){.qa{columns:1}}
.out a{color:#C9C3FF}