#hero-rebuild{position:absolute;right:0;top:110px;width:43%;height:min(62vh,580px);display:grid;place-items:center;perspective:1100px;z-index:0;pointer-events:none}#hero-rebuild .rb-scale{width:600px;height:520px;position:absolute;transform:scale(var(--rb-scale,.85));transform-style:preserve-3d}#hero-rebuild .rb-world{width:600px;height:520px;transform-style:preserve-3d;transform:rotateX(var(--rb-x,0deg)) rotateY(var(--rb-y,0deg));transition:transform .7s cubic-bezier(.2,.7,.3,1)}#hero-rebuild .composition{position:relative;width:600px;height:520px;transform-style:preserve-3d}.hero-title{z-index:2}
#hero-rebuild .browser-shell{position:absolute;border-radius:12px;overflow:hidden;border:1px solid #fff9;box-shadow:2px 2px 0 #8b97b3,4px 4px 0 #4d5c7d,6px 6px 0 #29354c,20px 28px 50px #0005;transform-style:preserve-3d;background:#f1f2f7;color:#24324a}
#hero-rebuild .browser-bar{height:27px;border-bottom:1px solid #26375020;display:flex;align-items:center;gap:4px;padding:0 12px;background:#f5f7fb}
#hero-rebuild .browser-bar i{width:4px;height:4px;border-radius:50%;background:#a8b3c9}
#hero-rebuild .browser-bar span{font:5px var(--mono);flex:1;text-align:center;letter-spacing:.1em}
#hero-rebuild .browser-bar b{font-size:7px}
#hero-rebuild .finished-browser,#hero-rebuild .wire-browser{left:90px;top:92px;width:440px;height:320px;transform:rotateY(-18deg) rotateX(12deg) rotateZ(-5deg)}
#hero-rebuild .site-nav{display:flex;justify-content:space-between;padding:17px 20px;align-items:center}
#hero-rebuild .site-nav b{font-weight:700;font-size:13px;letter-spacing:-.06em}
#hero-rebuild .site-nav span{font-size:5px}
#hero-rebuild .site-content{height:205px;padding:12px 20px;position:relative}
#hero-rebuild .site-content>small{font:5px var(--mono);letter-spacing:.06em}
#hero-rebuild .site-content h3{font:500 39px/.9 var(--sans);letter-spacing:-.07em;margin:12px 0}
#hero-rebuild .site-content h3 em{font-weight:400;font-style:normal;color:#727d9e}
#hero-rebuild .site-content p{font-size:6px;line-height:1.7;margin:10px 0}
#hero-rebuild .mini-button{display:inline-block;padding:9px 12px;background:#293658;color:white;font:5px var(--mono);border-radius:3px}
#hero-rebuild .site-bottom{padding:15px 20px;display:flex;justify-content:space-between;border-top:1px solid #283c6322;font:5px var(--mono)}
#hero-rebuild .design-object{position:absolute;right:20px;top:5px;width:160px;height:180px;perspective:500px}
#hero-rebuild .arch{position:absolute;width:100px;height:150px;border:28px solid #91a4dd;border-bottom:0;border-radius:80px 80px 0 0;right:10px;top:10px;transform:rotateY(-20deg) rotateZ(-5deg);box-shadow:8px 8px 0 #6d7eaf,inset 5px 7px 7px #cdd8ff,15px 25px 20px #32436d30}
#hero-rebuild .object-ball{position:absolute;width:65px;height:65px;background:radial-gradient(circle at 30% 25%,white,#dee5f6 40%,#818da9 80%);border-radius:50%;bottom:5px;left:5px;box-shadow:10px 16px 18px #3c456d30}
#hero-rebuild .wire-browser{background:transparent;border:1px solid var(--accent);box-shadow:none;opacity:.5;animation:rb-wireOut 8s both}
#hero-rebuild .wire-browser .browser-bar{background:none;border-color:var(--accent)}
#hero-rebuild .wire-browser .browser-bar span{color:var(--accent)}
#hero-rebuild .wire-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:28px;height:275px}
#hero-rebuild .wire-layout div{border:1px dashed var(--accent);border-radius:4px;background:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--accent) 10%,transparent) 10px 11px)}
#hero-rebuild .finished-browser{animation:rb-browserBuild 8s cubic-bezier(.16,1,.3,1) both}
#hero-rebuild .design-layer{position:absolute;border:1px solid #bdccff88;background:#e7edff;color:#2a3d6b;padding:14px;border-radius:9px;box-shadow:3px 5px 0 #7384ac,15px 25px 40px #0003;transform-style:preserve-3d;z-index:4}
#hero-rebuild .design-layer small{font:6px var(--mono);display:block;letter-spacing:.05em}
#hero-rebuild .type-layer{width:130px;left:50px;top:105px;transform:rotateY(-18deg) rotateZ(-9deg) translateZ(130px);animation:rb-typeBuild 8s both}
#hero-rebuild .type-layer>b{display:flex;justify-content:space-between;font:500 53px var(--sans);letter-spacing:-.08em;margin:10px 0}
#hero-rebuild .type-layer>b span{font-size:20px;margin-top:13px}
#hero-rebuild .type-line{height:3px;background:#a1afd0;width:90%;margin:5px 0}
#hero-rebuild .type-line.short{width:65%}
#hero-rebuild .color-layer{width:180px;right:15px;top:45px;transform:rotateY(-18deg) rotateZ(5deg) translateZ(110px);animation:rb-colorBuild 8s both}
#hero-rebuild .colors{display:flex;height:40px;margin-top:12px;border-radius:4px;overflow:hidden}
#hero-rebuild .colors i{flex:1;background:#273554}
#hero-rebuild .colors i:nth-child(2){background:#879cda}
#hero-rebuild .colors i:nth-child(3){background:#c1cff5}
#hero-rebuild .colors i:nth-child(4){background:#f1f2f7}
#hero-rebuild .action-layer{width:210px;bottom:55px;right:5px;transform:rotateY(-18deg) rotateZ(-5deg) translateZ(150px);animation:rb-actionBuild 8s both}
#hero-rebuild .action-layer span{display:block;background:#293658;color:white;padding:13px;font:7px var(--mono);margin-top:10px;border-radius:3px}
#hero-rebuild .blueprint-grid{position:absolute;left:25px;top:60px;width:550px;height:400px;border:1px solid var(--line);background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:30px 30px;transform:rotateY(-18deg) rotateX(12deg) rotateZ(-5deg) translateZ(-70px);mask-image:radial-gradient(#000,transparent 70%)}
#hero-rebuild .rb-scan-beam{position:absolute;left:70px;top:100px;width:460px;height:3px;box-shadow:0 0 18px var(--accent);background:var(--accent);transform:rotateZ(-5deg);animation:rb-scan 8s both;z-index:5}
#hero-rebuild .journey-site .site-nav{padding:15px}
@keyframes rb-wireOut{0%,22%{opacity:.7}55%,100%{opacity:0}}
@keyframes rb-browserBuild{0%,18%{opacity:0;filter:grayscale(1);transform:rotateY(-18deg) rotateX(12deg) rotateZ(-5deg) translateZ(-100px)}42%{opacity:.8;filter:grayscale(1)}68%,100%{opacity:1;filter:grayscale(0);transform:rotateY(-18deg) rotateX(12deg) rotateZ(-5deg)}}
@keyframes rb-typeBuild{0%,8%{opacity:0;transform:translate3d(-80px,80px,200px) rotateY(-35deg)}25%,38%{opacity:1;transform:rotateY(-18deg) rotateZ(-9deg) translateZ(130px)}68%,100%{opacity:0;transform:translate3d(85px,45px,0) rotateY(-18deg) rotateZ(-5deg)}}
@keyframes rb-colorBuild{0%,12%{opacity:0;transform:translate3d(80px,-80px,180px) rotateY(-35deg)}30%,42%{opacity:1;transform:rotateY(-18deg) rotateZ(5deg) translateZ(110px)}72%,100%{opacity:0;transform:translate3d(-40px,90px,0) rotateY(-18deg) rotateZ(-5deg)}}
@keyframes rb-actionBuild{0%,15%{opacity:0;transform:translate3d(80px,70px,220px) rotateY(-35deg)}33%,45%{opacity:1;transform:rotateY(-18deg) rotateZ(-5deg) translateZ(150px)}75%,100%{opacity:0;transform:translate3d(-120px,-80px,0) rotateY(-18deg) rotateZ(-5deg)}}
@keyframes rb-scan{0%,25%{opacity:0;transform:translateY(0) rotateZ(-5deg)}32%{opacity:.9}65%{opacity:.9;transform:translateY(290px) rotateZ(-5deg)}70%,100%{opacity:0;transform:translateY(300px) rotateZ(-5deg)}}
#hero-rebuild .composition *{animation-delay:.8s}
body:not(.ready) #hero-rebuild *,#hero-rebuild.rb-paused *{animation-play-state:paused!important}
@media(min-width:1700px){#hero-rebuild{width:47%;height:650px;top:130px}}
@media(min-width:761px) and (max-width:1100px){#hero-rebuild{width:49%;top:85px;height:430px}}
@media(max-width:760px){#hero-rebuild{position:relative;inset:auto;width:calc(100% + 2 * var(--gutter));margin-left:calc(-1 * var(--gutter));height:320px;flex:none}.hero-title{margin-top:18px}.hero{padding-top:85px}}
@media(max-width:380px){#hero-rebuild{height:290px}.hero-title{margin-top:12px}}
@media(prefers-reduced-motion:reduce){#hero-rebuild .wire-browser,#hero-rebuild .design-layer,#hero-rebuild .scan-beam{display:none}#hero-rebuild .finished-browser{opacity:1;filter:none}#hero-rebuild .rb-world{transform:none!important}}