.qxp-process{--qxp-accent:#00d4ff;position:relative;overflow:hidden;background:radial-gradient(ellipse at 10% 40%,#0a273b66,transparent 60%),radial-gradient(ellipse at 95% 80%,#45103944,transparent 60%),#080912;border-block:1px solid #282737}
.qxp-process[data-step="1"]{--qxp-accent:#ff6b91}.qxp-process[data-step="2"]{--qxp-accent:#b38aff}.qxp-process[data-step="3"]{--qxp-accent:#ffab76}
.qxp-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:58px}.qxp-heading h2{font:400 clamp(38px,4.6vw,69px)/1.04 var(--display);margin:0}.qxp-heading>p{font-size:14px;line-height:1.8;color:#b6acbf;flex-shrink:0;margin:0 0 5px}.qxp-heading>p>span{display:block;color:#72dff5;font-size:12px;margin-top:12px}
.qxp-workbench{display:grid;grid-template-columns:1.35fr 1fr;gap:65px;align-items:center}.qxp-scene{position:relative;min-width:0;aspect-ratio:1.24;perspective:1400px;isolation:isolate}.qxp-scene:before{content:'';position:absolute;inset:10% 5%;background:radial-gradient(ellipse,#15566b22,transparent 70%);transition:background .8s}.qxp-coordinate{position:absolute;left:7%;top:0;color:#8a91a8;font-size:8px;letter-spacing:.19em}.qxp-guide{position:absolute;border:1px solid #3d5e742e;border-radius:50%;z-index:-1}.qxp-guide-a{width:100%;height:70%;left:0;top:12%;transform:rotate(-25deg)}.qxp-guide-b{width:88%;height:82%;left:5%;top:5%;transform:rotate(30deg);border-color:#6c417438}
.qxp-browser{position:absolute;left:7%;top:12%;width:86%;border:1px solid #6493ad78;border-radius:12px;overflow:hidden;background:#0d1724;box-shadow:0 30px 70px #0008,0 0 40px #00d4ff0a;transform:rotateY(-9deg) rotateX(6deg) rotateZ(-3deg);transition:transform 1s cubic-bezier(.2,.7,.2,1),border-color .7s,box-shadow .7s}
.qxp-browser-top{height:31px;display:flex;align-items:center;gap:5px;padding:0 13px;background:#182332;border-bottom:1px solid #334053;color:#a5b7c9}.qxp-browser-top>i{width:5px;height:5px;border-radius:50%;background:#fa6c93}.qxp-browser-top>i:nth-child(2){background:#e8b974}.qxp-browser-top>i:nth-child(3){background:#7db5b8}.qxp-browser-top>span{font-size:9px;margin-left:7px}.qxp-browser-top>b{margin-left:auto;font-size:12px;font-weight:400}.qxp-canvas{position:relative;aspect-ratio:1.7;overflow:hidden;background:#101d2a}.qxp-wireframe{position:absolute;inset:0;padding:5%;color:#b8d0dd;background:linear-gradient(130deg,#112533,#101521)}.qxp-wire-nav{display:flex;align-items:center;gap:14px;padding-bottom:5%;border-bottom:1px solid #6b8ca94f}.qxp-wire-nav>b{margin-right:auto;font-size:8px;letter-spacing:.13em}.qxp-wire-nav>span{height:2px;background:#65839a70;width:9%}.qxp-wire-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:6%}.qxp-wire-body small{font-size:6px;letter-spacing:.1em;color:#73b2ca}.qxp-wire-body strong{font:400 clamp(15px,2.4vw,36px)/1.05 var(--display);display:block;margin:5% 0}.qxp-wire-body i{display:block;height:2px;width:83%;background:#536e8059;margin:8px 0}.qxp-wire-body i+i{width:64%}.qxp-wire-body b{display:inline-block;font-size:6px;border:1px solid #5dc2e566;padding:8px 10px;margin-top:3%;color:#80d2e8}.qxp-wire-photo{display:flex;position:relative;border:1px dashed #6789a372;align-items:center;justify-content:center}.qxp-wire-photo>span{position:absolute;top:10px;left:10px;font-size:6px;letter-spacing:.15em;color:#668ca6}.qxp-wire-photo svg{width:55%;fill:none;stroke:#4b7a93;stroke-width:1}.qxp-wire-cards{display:flex;gap:12px;margin-top:5%}.qxp-wire-cards>i{width:33.333%;height:23px;border:1px solid #526a8055;background:#678ca708}.qxp-finished-site{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1),filter .8s}.qxp-measure{position:absolute;inset:0;border:1px solid #88d8f445;pointer-events:none;transition:opacity .7s}.qxp-measure>i{position:absolute;top:0;bottom:0;border-left:1px dashed #89c6e02c;left:20%}.qxp-measure>i:nth-child(2){left:40%}.qxp-measure>i:nth-child(3){left:60%}.qxp-measure>i:nth-child(4){left:80%}.qxp-measure>span{position:absolute;bottom:6px;right:8px;font-size:5px;letter-spacing:.2em;color:#83b6cf}.qxp-scan{position:absolute;inset:0 auto 0 0;width:2px;background:#00d4ff;box-shadow:0 0 20px #00d4ff;opacity:0;pointer-events:none}
.qxp-note{display:flex;align-items:center;gap:12px;position:absolute;padding:13px 16px;border:1px solid #4f6c8d88;background:linear-gradient(110deg,#111e2cf5,#1c1230f5);backdrop-filter:blur(12px);border-radius:11px;box-shadow:0 12px 40px #0006;transition:transform .8s,top .8s,left .8s,border-color .8s;z-index:2}.qxp-note-one{left:0;top:66%;transform:rotate(-3deg)}.qxp-note-icon{color:var(--qxp-accent);font-size:25px;line-height:1}.qxp-note small{display:block;font-size:8px;color:#a7a7bc;letter-spacing:.03em}.qxp-note strong{display:block;font-size:12px;font-weight:500;color:#fff;margin-top:3px}.qxp-note-two{right:0;top:5%;font-size:10px;color:#d7d3e5;transform:rotate(4deg);border-color:#92508366}.qxp-check{display:grid;place-items:center;width:21px;height:21px;color:#ffaada;border:1px solid #b1539477;border-radius:50%;font-size:11px}.qxp-build-layer{position:absolute;right:-2%;bottom:14%;width:49%;background:#10131ff5;border:1px solid #7a649496;border-radius:10px;padding:13px;box-shadow:0 15px 38px #0008;transform:translate(25px,25px) rotate(6deg);opacity:0;transition:transform .8s,opacity .5s;z-index:3;color:#ba9aef}.qxp-build-layer>div{display:flex;align-items:center;gap:4px;padding-bottom:9px;border-bottom:1px solid #463b5b;margin-bottom:10px}.qxp-build-layer i{display:block;width:4px;height:4px;border-radius:50%;background:#a389bf}.qxp-build-layer>div>span{font-size:7px;letter-spacing:.04em;color:#c1afdb;margin-left:auto}.qxp-build-layer p{font:10px/1.5 ui-monospace,monospace;margin:4px 0;white-space:nowrap}.qxp-build-layer p>span{color:#655974;margin-right:10px}.qxp-launch-mark{position:absolute;right:0;bottom:14%;display:flex;align-items:center;gap:13px;opacity:0;transform:translateY(30px) rotate(-5deg);transition:transform .8s,opacity .5s}.qxp-launch-mark>span{display:grid;place-items:center;width:66px;height:66px;border:1px solid #ff8a58;background:linear-gradient(135deg,#ff7129,#ea1a93);border-radius:50%;font-size:33px;color:#fff;box-shadow:0 0 45px #ff6b0033}.qxp-launch-mark>small{font-size:8px;line-height:1.5;letter-spacing:.12em;color:#dfb5c4}.qxp-scene-caption{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:8px;letter-spacing:.025em;color:#82758e;margin:0}
.qxp-process[data-step="1"] .qxp-finished-site,.qxp-process[data-step="2"] .qxp-finished-site,.qxp-process[data-step="3"] .qxp-finished-site{clip-path:inset(0)}.qxp-process[data-step="1"] .qxp-browser{transform:rotateY(5deg) rotateX(2deg) rotateZ(2deg);border-color:#f696c088}.qxp-process[data-step="1"] .qxp-measure,.qxp-process[data-step="3"] .qxp-measure{opacity:0}.qxp-process[data-step="1"] .qxp-note-one{transform:translate(9px,10px) rotate(3deg)}.qxp-process[data-step="2"] .qxp-browser{transform:translate(-10px,-4px) rotateY(-12deg) rotateZ(-5deg);border-color:#b68af39c}.qxp-process[data-step="2"] .qxp-build-layer{opacity:1;transform:translate(0,0) rotate(3deg)}.qxp-process[data-step="2"] .qxp-note-one{transform:translate(-5px,7px) rotate(-5deg)}.qxp-process[data-step="3"] .qxp-browser{transform:translateY(-8px) rotateY(0) rotateZ(0);border-color:#d1a7909c;box-shadow:0 30px 65px #0008,0 0 50px #f6966520}.qxp-process[data-step="3"] .qxp-launch-mark{opacity:1;transform:translateY(0) rotate(0)}.qxp-process[data-step="3"] .qxp-note-one{transform:translateY(-7px) rotate(-3deg)}
.qxp-story{position:relative;min-width:0;padding:20px 0}.qxp-big-number{position:absolute;right:0;top:-42px;font:400 170px/.9 var(--display);color:#34314350;pointer-events:none;z-index:0}.qxp-story>.eyebrow{color:var(--qxp-accent);font-size:10px;letter-spacing:.16em;position:relative}.qxp-story h3{position:relative;max-width:430px;font:500 clamp(24px,2.7vw,38px)/1.16 'Outfit',sans-serif;letter-spacing:-.035em;margin:18px 0 22px}.qxp-story>p:not(.eyebrow){font-size:15px;line-height:1.85;color:#bdb5ca;max-width:420px;margin:0}.qxp-takeaway{margin-top:25px;border-left:2px solid var(--qxp-accent);padding:2px 0 2px 16px}.qxp-takeaway>span{display:block;color:#9287a4;font-size:8px;letter-spacing:.16em;margin-bottom:8px}.qxp-takeaway>strong{display:block;font-size:13px;line-height:1.5;color:#e5daed;font-weight:400;max-width:350px}.qxp-story-actions{margin-top:25px}.qxp-next,.qxp-start{border:0;border-bottom:1px solid #68527c;background:none;border-radius:0;color:#fff;padding:10px 0;font:500 13px/1.3 'Outfit',sans-serif;display:inline-flex;gap:25px;align-items:center}.qxp-next>span,.qxp-start>span{color:var(--qxp-accent);font-size:20px}.qxp-next:hover,.qxp-start:hover{color:var(--qxp-accent)}.qxp-start[hidden],.qxp-next[hidden]{display:none}
.qxp-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 28px}.qxp-controls>p{font-size:11px;color:#9e92af;display:flex;align-items:center;gap:8px;margin:0}.qxp-status-dot{width:5px;height:5px;border-radius:50%;background:var(--qxp-accent);box-shadow:0 0 15px var(--qxp-accent)}.qxp-play{display:flex;align-items:center;gap:9px;background:#151322;border:1px solid #4e3d63;border-radius:30px;padding:12px 18px;color:#d5c9e0;font:400 11px/1 'Outfit',sans-serif;min-height:42px}.qxp-play>span:first-child{color:#ff71b9;font-size:18px}.qxp-play:hover{border-color:#b35d98}.qxp-play[aria-pressed="true"]{background:#2a1530;border-color:#c559a1}.qxp-play:disabled{opacity:.55;cursor:default}
.qxp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.qxp-step{text-align:left;position:relative;border:0;border-top:1px solid #71506b;border-radius:0;background:none;padding:23px 0 13px;color:#c5b8d0;font-family:'Outfit',sans-serif;min-width:0}.qxp-step:before{content:'';position:absolute;left:0;top:-2px;height:3px;width:100%;background:linear-gradient(90deg,#00d4ff,#aa53f0,#ff2d9b);transform:scaleX(0);transform-origin:left;transition:transform .55s,box-shadow .55s}.qxp-step.is-current:before{transform:scaleX(1);box-shadow:0 0 18px #ff2d9b55}.qxp-step.is-complete:before{transform:scaleX(1);opacity:.35}.qxp-step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.qxp-step-top>b{font-size:13px;font-weight:400;color:#877b96}.qxp-step-top>i{font-style:normal;color:#a565af;font-size:18px;opacity:0;transform:translate(-5px,5px);transition:.25s}.qxp-step>strong{display:block;font-size:19px;font-weight:500;margin-bottom:9px;letter-spacing:-.035em}.qxp-step>span:last-child{font-size:12px;line-height:1.5;display:block;color:#91849f}.qxp-step.is-current{color:#fff}.qxp-step.is-current .qxp-step-top>b{color:var(--qxp-accent)}.qxp-step.is-current .qxp-step-top>i,.qxp-step:hover .qxp-step-top>i{opacity:1;transform:translate(0)}.qxp-step:hover>strong{color:#fff}.qxp-process button:focus-visible,.qxp-process a:focus-visible{outline:2px solid #00d4ff;outline-offset:6px}
.qxp-process.is-seen .qxp-browser{animation:qxp-assemble 1s cubic-bezier(.2,.7,.2,1) both}.qxp-process.is-seen .qxp-note{animation:qxp-note-in .8s .15s ease both}@keyframes qxp-assemble{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}@keyframes qxp-note-in{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
@media(max-width:1050px){.qxp-heading{gap:30px}.qxp-heading>p{font-size:12px}.qxp-workbench{gap:30px}.qxp-story h3{font-size:29px}.qxp-story>p:not(.eyebrow){font-size:13px}.qxp-note{padding:10px;gap:8px}.qxp-note strong{font-size:10px}.qxp-note-two{font-size:8px}.qxp-step>strong{font-size:17px}}
@media(max-width:800px){.qxp-heading{display:block;margin-bottom:35px}.qxp-heading>p{margin-top:23px;font-size:14px}.qxp-workbench{grid-template-columns:1fr;gap:15px}.qxp-scene{width:min(620px,100%);margin:auto;aspect-ratio:1.42}.qxp-coordinate{top:0}.qxp-note-one{top:72%}.qxp-browser{top:10%}.qxp-story{padding:18px 0 12px}.qxp-story h3{max-width:80%;font-size:32px}.qxp-story>p:not(.eyebrow){max-width:620px;font-size:15px}.qxp-big-number{font-size:130px;top:8px}.qxp-controls{margin-top:22px}.qxp-wire-body strong{font-size:32px}.qxp-note strong{font-size:12px}.qxp-note-two{font-size:10px}.qxp-steps{gap:18px}.qxp-step>span:last-child{font-size:10px}.qxp-step-top{margin-bottom:17px}.qxp-launch-mark{bottom:10%}.qxp-build-layer{bottom:8%}}
@media(max-width:560px){.qxp-heading h2{font-size:38px}.qxp-heading>p{font-size:13px}.qxp-heading>p>span{font-size:11px}.qxp-scene{aspect-ratio:1.2;margin-top:4px}.qxp-browser{width:91%;left:4%;top:13%;border-radius:8px}.qxp-browser-top{height:24px;padding:0 8px}.qxp-browser-top>span{font-size:7px}.qxp-wire-body{gap:13px}.qxp-wire-body strong{font-size:22px}.qxp-wire-body i{margin:5px 0}.qxp-wire-body b{font-size:5px;padding:5px;margin-top:0}.qxp-wire-nav>b{font-size:6px}.qxp-wire-body small{font-size:5px}.qxp-wire-cards{gap:7px}.qxp-wire-cards>i{height:15px}.qxp-note{padding:9px;border-radius:8px;gap:7px}.qxp-note-one{top:70%}.qxp-note strong{font-size:9px}.qxp-note small{font-size:6px}.qxp-note-icon{font-size:19px}.qxp-note-two{font-size:7px;top:5%}.qxp-check{height:16px;width:16px;font-size:9px}.qxp-build-layer{padding:8px;bottom:15%;width:53%}.qxp-build-layer p{font-size:7px;margin:2px 0}.qxp-build-layer>div{padding-bottom:5px;margin-bottom:6px}.qxp-build-layer>div>span{font-size:5px}.qxp-build-layer p>span{margin-right:4px}.qxp-scene-caption{font-size:6px}.qxp-coordinate{font-size:6px;left:5%}.qxp-launch-mark{right:0;bottom:14%;gap:7px}.qxp-launch-mark>span{width:43px;height:43px;font-size:24px}.qxp-launch-mark>small{font-size:5px}.qxp-story h3{font-size:27px}.qxp-story>p:not(.eyebrow){font-size:14px;line-height:1.8}.qxp-story .eyebrow{font-size:9px}.qxp-big-number{font-size:100px;top:18px}.qxp-takeaway{margin-top:20px}.qxp-takeaway>strong{font-size:12px}.qxp-story-actions{margin-top:18px}.qxp-controls{gap:12px}.qxp-controls>p{font-size:9px;max-width:150px;line-height:1.5}.qxp-play{padding:10px 13px;white-space:nowrap;font-size:10px}.qxp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 20px}.qxp-step{padding-top:14px}.qxp-step-top{margin-bottom:12px}.qxp-step>strong{font-size:18px}.qxp-step>span:last-child{font-size:11px}.qxp-next,.qxp-start{font-size:12px}}
@media(prefers-reduced-motion:reduce){.qxp-process *,.qxp-process *:before{animation:none!important;transition:none!important}}
body.motion-paused .qxp-process *,body.motion-paused .qxp-process *:before{animation:none!important;transition:none!important}

.qxp-steps{margin-bottom:40px}.qxp-story:focus-visible{outline:1px solid #00d4ff;outline-offset:10px}
@media(max-width:560px){.qxp-steps{margin-bottom:28px}.qxp-heading{margin-bottom:24px}}