.infra{--infra-cyan:#a5f8ff;--infra-ink:#05090d;--infra-steel:#9bb4be;position:relative;overflow:hidden;background:radial-gradient(ellipse at 68% 75%,#143d4b77,transparent 56%),linear-gradient(180deg,#071018,#05090d)}.infra-heading{max-width:680px}.infra-heading h2{font:500 clamp(37px,4.8vw,67px)/1.1 var(--display,Oxanium,sans-serif);letter-spacing:-.035em;margin:22px 0}.infra-heading h2 span{color:#78909a}.infra-heading>p:last-child{max-width:545px;color:#afc0c9}.infra-console{margin-top:54px;display:grid;grid-template-columns:minmax(190px,.31fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 40px}.infra-tabs{grid-row:1 / span 2;align-self:start;border-top:1px solid #3c515c}.infra-tab{width:100%;display:flex;align-items:center;gap:14px;padding:22px 9px;border:0;border-bottom:1px solid #31434d;background:transparent;color:#9dafb8;text-align:left;font:500 19px var(--display,Oxanium,sans-serif);transition:color .25s,background .25s,padding .25s}.infra-tab span{font:10px var(--body,Inter,sans-serif);color:#718995}.infra-tab.is-active{padding-left:17px;background:linear-gradient(90deg,#a5f8ff1c,transparent);color:var(--infra-cyan);box-shadow:inset 2px 0 var(--infra-cyan)}.infra-stage{position:relative;min-height:500px;overflow:hidden;isolation:isolate;border:1px solid #37515d;background:radial-gradient(ellipse at 50% 48%,#234a5a77,transparent 62%),linear-gradient(135deg,#101f2a,#071017 65%);cursor:grab;touch-action:pan-y;outline-offset:5px}.infra-stage:active{cursor:grabbing}.infra-stage-kicker{position:absolute;z-index:4;top:17px;left:20px;color:#a9c6d1;font:9px var(--display,Oxanium,sans-serif);letter-spacing:.15em}.infra-space{position:absolute;inset:0;transform-style:preserve-3d;perspective:900px;--infra-rotate:-8deg}.infra-aurora{position:absolute;width:70%;height:70%;left:15%;top:17%;border-radius:50%;background:radial-gradient(circle,#6ce5fa45,transparent 62%);filter:blur(12px);animation:infra-breathe 6s ease-in-out infinite}.infra-grid{position:absolute;width:95%;height:78%;left:4%;bottom:-35%;opacity:.85;background:linear-gradient(90deg,#a5f8ff24 1px,transparent 1px),linear-gradient(#a5f8ff24 1px,transparent 1px);background-size:38px 38px;transform:perspective(600px) rotateX(63deg) rotateZ(var(--infra-rotate));transform-origin:center}.infra-node{position:absolute;z-index:2;transition:left .65s cubic-bezier(.2,.75,.2,1),top .65s cubic-bezier(.2,.75,.2,1),transform .65s cubic-bezier(.2,.75,.2,1),opacity .35s}.infra-node-label{position:absolute;white-space:nowrap;border-left:1px solid #91c8d4;padding-left:9px;color:#bfecf5;font-size:8px;letter-spacing:.13em}.infra-node-label b{display:block;margin-top:3px;color:#c2d0d5;font:400 11px var(--body,Inter,sans-serif);letter-spacing:0}.infra-node--local{left:12%;top:48%;transform:rotateY(-19deg) rotateX(5deg)}.infra-node--local .infra-node-label{left:-9px;bottom:105%}.infra-machine{width:145px;height:105px;position:relative;transform-style:preserve-3d;transform:skewY(-8deg)}.infra-machine i{position:absolute;left:0;width:145px;height:27px;border:1px solid #90c7d3;background:linear-gradient(100deg,#183441,#6597a2 45%,#1a3543);box-shadow:9px 11px 14px #0006}.infra-machine i:nth-child(1){top:0}.infra-machine i:nth-child(2){top:31px}.infra-machine i:nth-child(3){top:62px}.infra-machine em{position:absolute;z-index:2;top:10px;right:13px;width:6px;height:6px;border-radius:50%;background:#a5f8ff;box-shadow:0 30px #a5f8ff,0 61px #a5f8ff,0 0 12px #a5f8ff}.infra-node--bridge{left:45%;top:28%;transform:rotateX(6deg) rotateY(16deg)}.infra-node--bridge .infra-node-label{left:9px;bottom:107%}.infra-bridge{width:106px;height:87px;position:relative;border:1px solid #a5f8ff;background:linear-gradient(135deg,#2a6372,#112b38);box-shadow:10px 13px 25px #0007}.infra-bridge::before,.infra-bridge::after{content:'';position:absolute;background:#a5f8ff33}.infra-bridge::before{inset:13px 14px;border:1px solid #b6fbff}.infra-bridge::after{height:1px;left:18px;right:18px;top:42px}.infra-bridge i{position:absolute;width:5px;height:5px;border-radius:50%;background:#b8fbff;box-shadow:0 14px #b8fbff,0 28px #b8fbff;right:9px;top:16px}.infra-bridge i:nth-child(2){left:11px;right:auto;top:22px;box-shadow:0 14px #b8fbff}.infra-bridge i:nth-child(3){width:25px;height:2px;left:30px;top:57px;border-radius:0;box-shadow:none}.infra-node--cloud{right:11%;top:43%;transform:rotateY(-16deg) rotateX(9deg)}.infra-node--cloud .infra-node-label{right:5px;bottom:105%;text-align:right;border-left:0;border-right:1px solid #91c8d4;padding:0 9px 0 0}.infra-cloud{position:relative;width:160px;height:120px;filter:drop-shadow(13px 17px 14px #0008)}.infra-cloud i{position:absolute;border:1px solid #d1fbff;background:linear-gradient(145deg,#a7e7ec,#4a7f8d 60%,#21414e);border-radius:50%;transform:skewY(-11deg)}.infra-cloud i:nth-child(1){width:72px;height:72px;left:17px;top:30px}.infra-cloud i:nth-child(2){width:85px;height:85px;left:50px;top:13px}.infra-cloud i:nth-child(3){width:67px;height:67px;right:0;top:38px}.infra-cloud i:nth-child(4){width:118px;height:35px;left:23px;top:73px;border-radius:0 0 18px 18px;background:linear-gradient(#8cc8d0,#356571)}.infra-cloud em{position:absolute;z-index:2;left:73px;top:47px;width:9px;height:9px;border-radius:50%;background:#d8ffff;box-shadow:0 0 17px #a5f8ff}.infra-link{position:absolute;z-index:1;height:2px;transform-origin:left;background:linear-gradient(90deg,#8defff,#8defff22);box-shadow:0 0 13px #7cecff;transition:width .65s,transform .65s,opacity .35s}.infra-link::after{content:'';position:absolute;right:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#c9ffff;box-shadow:0 0 12px #a5f8ff}.infra-link--local{width:37%;left:22%;top:56%;transform:rotate(-24deg)}.infra-link--cloud{width:32%;left:53%;top:43%;transform:rotate(26deg)}.infra-link--hybrid{width:61%;left:20%;top:68%;transform:rotate(0deg);opacity:.35}.infra-turn{position:absolute;z-index:5;right:20px;bottom:16px;display:flex;align-items:center;gap:9px;color:#94b6c1;font:8px var(--display,Oxanium,sans-serif);letter-spacing:.16em}.infra-turn i{width:18px;height:1px;background:#8ec8d5}.infra-caption{grid-column:2;margin:0;padding:22px 0 0;border-bottom:1px solid #3b505a;color:#afc0c8}.infra-caption-index{font:9px var(--display,Oxanium,sans-serif);letter-spacing:.16em;color:var(--infra-cyan)}.infra-caption h3{font:500 clamp(24px,2.3vw,33px)/1.15 var(--display,Oxanium,sans-serif);color:#edf7f8;margin-top:9px}.infra-caption>p:not(.infra-caption-index){max-width:760px;font-size:13px;line-height:1.65;margin-top:10px}.infra-caption .infra-limits{padding:12px 0 17px;color:#8da6b1;font-size:11px}.infra-limits b{color:#c4dce3;font-weight:600}.infra[data-infra-active="cloud"] .infra-node--local{left:7%;top:57%;opacity:.72;transform:scale(.82) rotateY(-19deg)}.infra[data-infra-active="cloud"] .infra-node--bridge{left:37%;top:42%;transform:scale(.92) rotateY(16deg)}.infra[data-infra-active="cloud"] .infra-node--cloud{right:20%;top:24%;transform:scale(1.18) rotateY(-16deg)}.infra[data-infra-active="cloud"] .infra-link--local{width:34%;left:14%;top:62%;transform:rotate(-34deg);opacity:.45}.infra[data-infra-active="cloud"] .infra-link--cloud{width:37%;left:46%;top:49%;transform:rotate(-37deg)}.infra[data-infra-active="cloud"] .infra-link--hybrid{opacity:.12}.infra[data-infra-active="hybrid"] .infra-node--local{left:10%;top:43%;transform:scale(.98) rotateY(-19deg)}.infra[data-infra-active="hybrid"] .infra-node--bridge{left:44%;top:34%;transform:scale(1.1) rotateY(16deg)}.infra[data-infra-active="hybrid"] .infra-node--cloud{right:8%;top:39%;transform:scale(.98) rotateY(-16deg)}.infra[data-infra-active="hybrid"] .infra-link--local{width:38%;left:22%;top:52%;transform:rotate(-10deg)}.infra[data-infra-active="hybrid"] .infra-link--cloud{width:31%;left:56%;top:47%;transform:rotate(9deg)}.infra[data-infra-active="hybrid"] .infra-link--hybrid{opacity:1}.infra-stage[data-infra-turn]{--infra-rotate:var(--infra-turn)}@keyframes infra-breathe{50%{opacity:.55;transform:scale(1.1)}}@media(max-width:700px){.infra{padding-top:75px;padding-bottom:75px}.infra-console{display:block;margin-top:37px}.infra-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:0;margin-bottom:14px}.infra-tab{justify-content:center;padding:14px 3px;font-size:14px;border-top:1px solid #3c515c}.infra-tab span{display:none}.infra-tab.is-active{padding-left:3px;box-shadow:inset 0 2px var(--infra-cyan)}.infra-stage{min-height:420px}.infra-stage-kicker{left:14px;font-size:7px}.infra-node--local{left:4%;top:53%;transform:scale(.78) rotateY(-19deg)}.infra-node--bridge{left:37%;top:29%;transform:scale(.78) rotateY(16deg)}.infra-node--cloud{right:-8%;top:43%;transform:scale(.76) rotateY(-16deg)}.infra-link--local{width:39%;left:13%;top:59%;transform:rotate(-32deg)}.infra-link--cloud{width:34%;left:49%;top:43%;transform:rotate(30deg)}.infra-link--hybrid{left:16%;width:65%;top:69%}.infra-node-label{font-size:7px}.infra-node-label b{font-size:9px}.infra-caption{padding-top:18px}.infra-caption>p:not(.infra-caption-index){font-size:12px}.infra[data-infra-active="cloud"] .infra-node--local{left:-5%;top:61%;transform:scale(.63) rotateY(-19deg)}.infra[data-infra-active="cloud"] .infra-node--bridge{left:27%;top:43%;transform:scale(.74) rotateY(16deg)}.infra[data-infra-active="cloud"] .infra-node--cloud{right:4%;top:25%;transform:scale(.94) rotateY(-16deg)}.infra[data-infra-active="hybrid"] .infra-node--local{left:0;top:45%;transform:scale(.73) rotateY(-19deg)}.infra[data-infra-active="hybrid"] .infra-node--bridge{left:34%;top:34%;transform:scale(.89) rotateY(16deg)}.infra[data-infra-active="hybrid"] .infra-node--cloud{right:-9%;top:41%;transform:scale(.74) rotateY(-16deg)}}@media(prefers-reduced-motion:reduce){.infra *,.infra *::before,.infra *::after{animation:none!important;transition:none!important}}body.motion-paused .infra *,body.motion-paused .infra *::before,body.motion-paused .infra *::after{animation-play-state:paused!important}
.infra-space{inset:48px 12px 64px;transform:perspective(1100px) rotateY(var(--infra-turn,0deg));transform-origin:50% 50%;transition:transform .3s ease-out}
.infra-turn button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border:1px solid #6595a5;background:#153440;color:#d5faff;font:500 20px var(--display);border-radius:0}
.infra-turn button:hover{background:#24586b;border-color:#b8f9ff}
@media(max-width:700px){.infra-node--cloud,.infra[data-infra-active="hybrid"] .infra-node--cloud{right:0}.infra-turn{right:14px;bottom:12px}}