:root{
  --u:1px;--en:'Inter Tight',system-ui,sans-serif;--display:var(--en);--body:var(--en);
  --mt:clamp(calc(12 * var(--u)),1.6vw,calc(20 * var(--u)));
  --bg:#000;--bg2:#1c1f25;--line:rgba(255,255,255,.13);--text:#eceef2;--mute:#8b919c;
  --acc:#9ee6ff;--acc-rgb:158,230,255;--ok:#3fbf7f
}
*{box-sizing:content-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{text-align:center;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--acc);outline-offset:4px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}

#stage{position:fixed;inset:0;z-index:0;pointer-events:none}
#stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
main,footer{position:relative;z-index:1}

section{padding:clamp(120px,16vw,240px) 0}
h1,h2,h3{font-family:var(--en)}
h1,h2,#welcome .brand{font-weight:300;font-size:clamp(calc(44 * var(--u)),7.8125vw,calc(100 * var(--u)));line-height:.96;letter-spacing:-.01em;color:var(--text);max-width:16ch;margin-inline:auto}
.cta{display:inline-block;border:1px solid var(--text);padding:15px 32px;border-radius:99px;background:none;cursor:pointer;transition:background .3s,color .3s}
.cta:hover{background:var(--text);color:var(--bg)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:none}

#welcome{position:relative;width:100%;min-height:100svh;box-sizing:border-box;overflow:hidden;display:grid;place-items:center;padding:24px}
#welcome .in{position:relative;max-width:760px}
#welcome .brand{animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both}
#welcome p{margin:var(--mt) auto 0;max-width:34ch;font-size:1.15rem;opacity:.7;animation:rise 1.4s .3s cubic-bezier(.2,.8,.2,1) both}
#welcome .pick{margin-top:44px;display:flex;justify-content:center}
#welcome .go{background:none;border:0;border-bottom:1px solid var(--text);padding:6px 2px;cursor:pointer;font-family:var(--display);font-size:1.3rem;transition:opacity .3s;animation:rise 1.4s .8s cubic-bezier(.2,.8,.2,1) both}
#welcome .go:hover{opacity:.65}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}

.hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:9vh}
.hero h1{max-width:12ch;text-transform:uppercase}
.hero-foot{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:var(--mt)}
.hero p{max-width:44ch;margin-inline:auto;color:var(--mute);font-size:1.1rem}

.split{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);justify-items:center}
.split p{color:var(--mute);font-size:1.12rem;margin:0 auto 1.2em;max-width:52ch}
.no{display:block;color:var(--acc);font-size:.82rem;letter-spacing:.14em;margin-bottom:14px}

.svc{display:grid;grid-template-columns:repeat(3,1fr);margin-top:80px;border-top:1px solid var(--line)}
.svc.two{grid-template-columns:repeat(2,1fr)}
.svc>*{padding:44px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.svc>*:nth-child(3n){border-right:0}
.svc.two>*{border-right:1px solid var(--line)}
.svc.two>*:nth-child(2n){border-right:0}
.svc>*:hover{background:rgba(var(--acc-rgb),.035)}
.svc h3{font-weight:500;font-size:1.3rem;margin-bottom:10px}
.svc p{color:var(--mute);font-size:.98rem;max-width:34ch;margin-inline:auto}

.steps{list-style:none;margin-top:80px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.steps li{position:relative;padding:44px 22px 0}
.steps li::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),.7)}
.steps .no{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:300;letter-spacing:-.02em;color:var(--text);opacity:.18;margin-bottom:6px}
.steps h3{font-weight:500;font-size:1.2rem;margin-bottom:8px}
.steps p{color:var(--mute);font-size:.95rem}

.lead{color:var(--mute);font-size:1.12rem;max-width:44ch;margin:var(--mt) auto 44px}

footer{padding:36px 0;color:var(--mute);font-size:.88rem}
footer .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}

@media(max-width:960px){
  .steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--line);margin-inline:auto;max-width:520px;text-align:left}
  .steps li{padding:0 0 40px 30px}
  .steps li::before{top:6px;left:-4px;margin-left:0}
}
@media(max-width:860px){
  .svc,.svc.two{grid-template-columns:1fr}
  .svc>*,.svc.two>*{border-right:0;padding:30px 0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}