.process { width:var(--page);margin:0 auto;padding:clamp(110px,14vw,220px) 0 clamp(100px,12vw,190px);position:relative;z-index:2 }
.process__heading { display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start;margin-bottom:76px }
.process__heading .eyebrow{padding-top:15px}.process__heading>div{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:end}.process__heading h2{margin:0;font-size:clamp(54px,5.8vw,100px);line-height:.9;letter-spacing:-.07em;font-weight:650}.process__heading>div>p{max-width:350px;margin:0 0 7px;color:#676b71;font-size:13px;line-height:1.72}
.process-machine{--stage-1:.25s;--stage-2:2.05s;--stage-3:3.85s;--stage-4:5.65s;position:relative;padding-top:83px}.process-rail{position:absolute;left:0;right:0;top:16px;height:58px}.process-rail__track{position:absolute;left:12.5%;right:12.5%;top:25px;height:1px;background:rgba(20,23,27,.14);overflow:hidden}.process-rail__track i{display:block;width:100%;height:100%;background:#33383e;transform:scaleX(0);transform-origin:left}.rail-node{position:absolute;top:17px;width:17px;height:17px;margin-left:-8px;border-radius:50%;background:var(--paper);border:1px solid rgba(25,28,33,.18);display:grid;place-items:center;z-index:2}.rail-node--1{left:12.5%}.rail-node--2{left:37.5%}.rail-node--3{left:62.5%}.rail-node--4{left:87.5%}.rail-node--1,.process-step--think{--stage-start:var(--stage-1)}.rail-node--2,.process-step--plan{--stage-start:var(--stage-2)}.rail-node--3,.process-step--code{--stage-start:var(--stage-3)}.rail-node--4,.process-step--test{--stage-start:var(--stage-4)}.rail-node i{width:5px;height:5px;border-radius:50%;background:#b1b4b8;transition:background .3s}.rail-node b{position:absolute;top:25px;color:#84878c;font:400 7px "IBM Plex Mono";letter-spacing:.08em}
.process-machine.is-visible .process-rail__track i{animation:railFill calc(var(--stage-4) - var(--stage-1)) linear var(--stage-1) forwards}.process-machine.is-visible .rail-node i{animation:nodeActivate .7s var(--spring) var(--stage-start) forwards}
@keyframes railFill{to{transform:scaleX(1)}}@keyframes nodeActivate{55%{transform:scale(2.2);background:#41484f;box-shadow:0 0 0 8px rgba(65,72,79,.08)}100%{transform:scale(1);background:#41484f}}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.process-step{min-width:0;min-height:550px;padding:22px 20px 18px;background:var(--paper);border:1px solid rgba(255,255,255,.62);display:flex;flex-direction:column;opacity:.42;filter:saturate(.2);transform:translateY(14px);transition:opacity .9s ease,filter .9s ease,transform 1s var(--spring),box-shadow .7s var(--spring);position:relative;overflow:hidden}.process-step:hover{z-index:5;transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.82),-10px -10px 24px rgba(255,255,255,.92),13px 17px 30px rgba(27,30,35,.12)}.process-machine.is-visible .process-step{animation:stepActivate 1s var(--spring) var(--stage-start) forwards}@keyframes stepActivate{to{opacity:1;filter:saturate(1);transform:translateY(0)}}
.process-step>header,.process-step>footer{display:flex;justify-content:space-between;align-items:center;color:#81858a;font:400 7px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.07em}.process-step>header i{font-style:normal}.process-step h3{margin:32px 0 15px;font-size:clamp(31px,2.7vw,48px);line-height:1;letter-spacing:-.055em;font-weight:650}.process-step>p{min-height:112px;margin:0;color:#70747a;font-size:11px;line-height:1.72}.process-step>footer{margin-top:auto;padding-top:17px;border-top:1px solid var(--line)}.process-step>footer b{font-weight:500;color:#54635a}.step-visual{height:210px;margin:15px -20px 22px;position:relative;overflow:hidden}
.audience-core{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border:1px solid rgba(27,30,34,.16);border-radius:50%;display:grid;place-items:center}.audience-core:before,.audience-core:after{content:"";position:absolute;border:1px solid rgba(27,30,34,.1);border-radius:50%}.audience-core:before{inset:-25px}.audience-core:after{inset:-52px;border-style:dashed}.audience-core i{width:23px;height:23px;border-radius:50%;background:#d5d8da;box-shadow:inset 4px 4px 8px rgba(27,30,34,.11),inset -4px -4px 8px white}.audience-core span,.audience-core b{position:absolute;width:5px;height:5px;border-radius:50%;background:#515b54}.audience-core span{top:-28px}.audience-core b{right:-53px}.process-machine.is-visible .audience-core{animation:audienceSpin 10s linear calc(var(--stage-start) + .25s) infinite}@keyframes audienceSpin{to{transform:rotate(360deg)}}.signal{position:absolute;padding:5px 7px;border:1px solid rgba(255,255,255,.8);background:#eceef0;box-shadow:4px 6px 12px rgba(24,27,31,.08);color:#75797e;font:400 6px "IBM Plex Mono";text-transform:uppercase;opacity:0}.signal--a{left:6%;top:20%}.signal--b{right:5%;top:34%}.signal--c{left:16%;bottom:16%}.process-machine.is-visible .signal{animation:signalIn .7s var(--spring) forwards}.process-machine.is-visible .signal--a{animation-delay:calc(var(--stage-start) + .45s)}.process-machine.is-visible .signal--b{animation-delay:calc(var(--stage-start) + .65s)}.process-machine.is-visible .signal--c{animation-delay:calc(var(--stage-start) + .85s)}@keyframes signalIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.plan-map{position:absolute;inset:21px 23px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px}.plan-map>i{position:absolute;width:27px;height:21px;border:1px solid rgba(24,27,31,.22);background:#e9ebed;opacity:0;transform:scale(.4)}.plan-map>i:nth-child(1){left:8%;top:13%}.plan-map>i:nth-child(2){left:42%;top:8%}.plan-map>i:nth-child(3){right:5%;top:27%}.plan-map>i:nth-child(4){left:18%;bottom:19%}.plan-map>i:nth-child(5){left:52%;bottom:12%}.plan-map>i:nth-child(6){right:7%;bottom:23%}.process-machine.is-visible .plan-map>i{animation:mapNode .65s var(--spring) forwards}.process-machine.is-visible .plan-map>i:nth-child(1){animation-delay:calc(var(--stage-start) + .3s)}.process-machine.is-visible .plan-map>i:nth-child(2){animation-delay:calc(var(--stage-start) + .4s)}.process-machine.is-visible .plan-map>i:nth-child(3){animation-delay:calc(var(--stage-start) + .5s)}.process-machine.is-visible .plan-map>i:nth-child(4){animation-delay:calc(var(--stage-start) + .6s)}.process-machine.is-visible .plan-map>i:nth-child(5){animation-delay:calc(var(--stage-start) + .7s)}.process-machine.is-visible .plan-map>i:nth-child(6){animation-delay:calc(var(--stage-start) + .8s)}@keyframes mapNode{to{opacity:1;transform:scale(1)}}.plan-link{position:absolute;height:1px;background:#777e85;transform:scaleX(0);transform-origin:left}.plan-link--a{width:50%;left:15%;top:24%;transform:rotate(8deg) scaleX(0)}.plan-link--b{width:55%;left:25%;top:57%;transform:rotate(-12deg) scaleX(0)}.plan-link--c{width:37%;right:12%;top:48%;transform:rotate(69deg) scaleX(0)}.process-machine.is-visible .plan-link{animation:planLinkIn .7s var(--smooth) forwards}.process-machine.is-visible .plan-link--a{animation-delay:calc(var(--stage-start) + .48s)}.process-machine.is-visible .plan-link--b{animation-delay:calc(var(--stage-start) + .62s)}.process-machine.is-visible .plan-link--c{animation-delay:calc(var(--stage-start) + .76s)}@keyframes planLinkIn{to{transform:rotate(var(--link-angle)) scaleX(1)}}.plan-link--a{--link-angle:8deg}.plan-link--b{--link-angle:-12deg}.plan-link--c{--link-angle:69deg}
.code-window{position:absolute;inset:23px 17px;padding:20px 14px;border:1px solid rgba(24,27,31,.11);background:#e6e8ea;font:400 7px/2.2 "IBM Plex Mono";color:#686d73;box-shadow:inset 4px 4px 10px rgba(29,32,36,.06),inset -4px -4px 10px white}.code-window span{display:block;opacity:0;transform:translateX(-10px)}.code-window span:nth-child(2){color:#33383d}.code-window i{position:absolute;left:14px;bottom:17px;width:5px;height:10px;background:#4c555d;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.process-machine.is-visible .code-window span{animation:codeLine .55s ease forwards}.process-machine.is-visible .code-window span:nth-child(1){animation-delay:calc(var(--stage-start) + .27s)}.process-machine.is-visible .code-window span:nth-child(2){animation-delay:calc(var(--stage-start) + .47s)}.process-machine.is-visible .code-window span:nth-child(3){animation-delay:calc(var(--stage-start) + .67s)}.process-machine.is-visible .code-window span:nth-child(4){animation-delay:calc(var(--stage-start) + .87s)}@keyframes codeLine{to{opacity:1;transform:translateX(0)}}
.test-rings{position:absolute;left:32%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);display:grid;place-items:center}.test-rings>i{position:absolute;border:1px solid rgba(27,30,34,.12);border-radius:50%}.test-rings>i:nth-child(1){inset:0}.test-rings>i:nth-child(2){inset:10px;border-style:dashed}.test-rings>i:nth-child(3){inset:22px;border-color:#69736d;border-width:2px;clip-path:polygon(0 0,100% 0,100% 79%,0 79%)}.test-rings>span{font:600 22px "Archivo";letter-spacing:-.06em}.test-rings small{font:400 7px "IBM Plex Mono"}.process-machine.is-visible .test-rings>i{animation:testSpin 3s var(--smooth) calc(var(--stage-start) + .3s) both}@keyframes testSpin{from{transform:rotate(-160deg);opacity:.2}to{transform:rotate(0);opacity:1}}.test-list{position:absolute;right:5%;top:31%;display:grid;gap:13px;color:#73777c;font:400 6px "IBM Plex Mono";text-transform:uppercase}.test-list span{opacity:0;transform:translateX(8px)}.test-list i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:#607064}.process-machine.is-visible .test-list span{animation:testItem .5s ease forwards}.process-machine.is-visible .test-list span:nth-child(1){animation-delay:calc(var(--stage-start) + .4s)}.process-machine.is-visible .test-list span:nth-child(2){animation-delay:calc(var(--stage-start) + .6s)}.process-machine.is-visible .test-list span:nth-child(3){animation-delay:calc(var(--stage-start) + .8s)}@keyframes testItem{to{opacity:1;transform:none}}
.process-finale{margin-top:clamp(100px,11vw,175px);min-height:650px;padding:clamp(50px,6vw,95px);display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:8%;position:relative;overflow:hidden;background:#e9ebed;border:1px solid rgba(255,255,255,.75)}.process-finale:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 73% 50%,white,transparent 42%);opacity:.7}.finale-copy{position:relative;z-index:2}.finale-time{margin:34px 0 23px;display:flex;align-items:center;gap:20px}.finale-time>strong{font-size:clamp(110px,13vw,210px);line-height:.72;letter-spacing:-.09em;font-weight:250}.finale-time>div{display:grid;gap:8px}.finale-time b{font-size:clamp(22px,2.2vw,38px);line-height:1;letter-spacing:-.05em;font-weight:650}.finale-time span{color:#777b80;font:400 7px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.08em}.finale-copy>p:last-child{max-width:390px;margin:0;color:#6a6e74;font-size:12px;line-height:1.75}.finale-build{position:relative;z-index:2;min-height:470px;display:grid;place-items:center;perspective:1000px}.build-halo{position:absolute;width:78%;aspect-ratio:1;border:1px solid rgba(25,28,32,.08);border-radius:50%;animation:haloSpin 15s linear infinite}.build-halo:after,.build-halo:before{content:"";position:absolute;inset:14%;border:1px dashed rgba(25,28,32,.09);border-radius:50%}.build-halo:after{inset:29%;border-style:solid}@keyframes haloSpin{to{transform:rotate(360deg)}}.build-browser{width:86%;aspect-ratio:1.26;position:relative;background:#f4f5f5;border:1px solid white;box-shadow:-12px -12px 28px white,17px 22px 38px rgba(25,28,33,.15);transform:rotateY(-7deg) rotateX(3deg)}.build-browser>header{height:8%;padding:0 3%;display:flex;align-items:center;gap:1%;border-bottom:1px solid var(--line);color:#85898e;font:400 5px "IBM Plex Mono";text-transform:uppercase}.build-browser>header i{width:4px;height:4px;border-radius:50%;background:#afb2b5}.build-browser>header span{margin:auto}.build-browser>header b{font-weight:500;color:#55685a}.build-page{position:absolute;inset:8% 0 0;padding:4%;overflow:hidden}.build-page nav{height:10%;display:flex;align-items:center;gap:5%;border-bottom:1px solid var(--line)}.build-page nav>i{width:12px;height:12px;border:1px solid #4c5055;border-radius:50%;margin-right:auto}.build-page nav>span{width:8%;height:2px;background:#c3c6c9}.build-page nav>b{width:14%;height:13px;background:#363a3f}.build-page main{height:64%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%}.build-page main small{font:400 5px "IBM Plex Mono";color:#85898e}.build-page main strong{display:block;margin:8% 0;font-size:clamp(13px,1.8vw,26px);line-height:.9;letter-spacing:-.06em}.build-page main>div:first-child>span{display:block;width:72%;height:2px;margin-top:3%;background:#c7c9cc}.build-page main>div:first-child>span+span{width:46%}.build-page button{width:44%;height:18px;margin-top:9%;padding:0 5px;border:0;background:#373b40;color:white;font:400 5px "IBM Plex Mono";display:flex;align-items:center;justify-content:space-between}.build-page button i{font-style:normal}.build-art{aspect-ratio:1;position:relative;display:grid;place-items:center}.build-art i{position:absolute;border:1px solid rgba(30,33,37,.16);border-radius:50%}.build-art i:first-child{inset:8%}.build-art i:nth-child(2){inset:23%;border-style:dashed}.build-art span{width:32%;aspect-ratio:1;border-radius:50%;background:#e1e3e5;box-shadow:inset 4px 4px 9px rgba(28,31,35,.1),inset -4px -4px 9px white}.build-page footer{height:20%;display:grid;grid-template-columns:repeat(3,1fr);gap:3%}.build-page footer i{border:1px solid var(--line);background:#eef0f1}.build-scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#4c565f,transparent);opacity:0}.process-finale.is-visible .build-browser{animation:browserBuild 1.7s var(--spring) .4s both}.process-finale.is-visible .build-scan{animation:buildScan 2.4s var(--smooth) 1.6s both}@keyframes browserBuild{from{opacity:0;transform:translateY(80px) scale(.72) rotateY(-24deg) rotateX(12deg);filter:blur(8px)}to{opacity:1;transform:rotateY(-7deg) rotateX(3deg);filter:blur(0)}}@keyframes buildScan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:.8}100%{top:100%;opacity:0}}.build-label{position:absolute;z-index:4;padding:6px 8px;background:rgba(241,243,244,.82);border:1px solid white;box-shadow:4px 6px 12px rgba(25,28,33,.09);color:#72767b;font:400 6px "IBM Plex Mono";text-transform:uppercase;opacity:0}.build-label--a{left:1%;top:24%}.build-label--b{right:0;top:48%}.build-label--c{left:7%;bottom:16%}.process-finale.is-visible .build-label{animation:labelIn .7s var(--spring) forwards}.process-finale.is-visible .build-label--a{animation-delay:2.1s}.process-finale.is-visible .build-label--b{animation-delay:2.35s}.process-finale.is-visible .build-label--c{animation-delay:2.6s}@keyframes labelIn{from{opacity:0;transform:scale(.7) translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.process-steps{grid-template-columns:repeat(2,1fr)}.process-rail{display:none}.process-machine{--stage-1:.2s;--stage-2:.7s;--stage-3:1.2s;--stage-4:1.7s;padding-top:0}.process-step{min-height:500px}}
@media(max-width:850px){.process__heading{grid-template-columns:1fr;gap:30px}.process__heading>div{grid-template-columns:1fr}.process-finale{grid-template-columns:1fr;gap:55px;padding:60px 25px}.finale-build{min-height:430px}.build-browser{width:min(90%,600px)}}
@media(max-width:620px){.process-steps{grid-template-columns:1fr;background:transparent;gap:12px}.process-step{min-height:485px;border:1px solid var(--line)}.process-step>p{min-height:80px}.process-finale{margin-left:-16px;margin-right:-16px;border-left:0;border-right:0}.finale-time>strong{font-size:38vw}.finale-build{min-height:330px}.build-browser{width:100%}.build-label{display:none}}
@media(prefers-reduced-motion:reduce){.process-step{opacity:1;filter:none;transform:none}.process-rail__track i{transform:scaleX(1)}.signal,.plan-map>i,.code-window span,.test-list span,.build-label{opacity:1;transform:none}.plan-link{transform:rotate(var(--link-angle)) scaleX(1)}.build-browser{opacity:1;transform:none}.build-scan{display:none}}
.build-main{height:64%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7%}.build-main small{font:400 5px "IBM Plex Mono";color:#85898e}.build-main strong{display:block;margin:8% 0;font-size:clamp(13px,1.8vw,26px);line-height:.9;letter-spacing:-.06em}.build-main>div:first-child>span{display:block;width:72%;height:2px;margin-top:3%;background:#c7c9cc}.build-main>div:first-child>span+span{width:46%}