.hero{position:relative;isolation:isolate;overflow:hidden}.hero:before{position:absolute;z-index:-2;content:"";inset:0;background:radial-gradient(circle at 8% 12%,transparent 0 95px,rgba(124,223,255,.055) 96px 97px,transparent 98px 152px,rgba(124,223,255,.035) 153px 154px,transparent 155px),radial-gradient(circle at 34% 82%,transparent 0 130px,rgba(124,223,255,.045) 131px 132px,transparent 133px 205px,rgba(124,223,255,.028) 206px 207px,transparent 208px),radial-gradient(circle at 67% 18%,transparent 0 110px,rgba(124,223,255,.05) 111px 112px,transparent 113px 178px,rgba(124,223,255,.03) 179px 180px,transparent 181px),radial-gradient(circle at 94% 76%,transparent 0 145px,rgba(124,223,255,.052) 146px 147px,transparent 148px 225px,rgba(124,223,255,.03) 226px 227px,transparent 228px),radial-gradient(circle at 53% 48%,rgba(33,117,156,.12),transparent 42%)}.hero:after{position:absolute;z-index:-1;content:"";inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(157,238,255,.025) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(157,238,255,.025) 50%,transparent 50.2%);background-size:92px 92px;mask-image:linear-gradient(black,transparent 94%)}.hero-grid{position:relative}.hero-motion-card{position:relative;isolation:isolate;display:grid;min-height:500px;overflow:visible;place-items:center;border:0;background:transparent;box-shadow:none;outline:none;perspective:900px}.hero-motion-card:focus-visible:before{position:absolute;content:"";inset:8%;border:1px solid rgba(157,238,255,.25);border-radius:50%}.hero-motion-field{position:absolute;inset:-12%;width:124%;height:124%;mask-image:radial-gradient(circle,black,transparent 72%)}.hero-motion-mark{position:relative;z-index:3;width:min(54%,270px);overflow:visible;filter:drop-shadow(0 20px 34px rgba(0,0,0,.5));transform:rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg));transition:transform .3s ease-out}.hero-motion-core{opacity:0;animation:hm-core 1.4s 2.25s ease forwards}.hero-motion-ghost path{fill:none;stroke:rgba(157,238,255,.08);stroke-width:1}.hero-motion-geometry path{fill:none;stroke:url(#hero-ice);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hm-draw 1.35s cubic-bezier(.7,0,.3,1) forwards;animation-delay:calc(.45s + var(--i)*.11s)}.hero-motion-geometry path:first-child{stroke-width:3}.hero-motion-nodes circle{fill:#d8faff;opacity:0;filter:drop-shadow(0 0 7px #9deeff);animation:hm-node .4s cubic-bezier(.2,1.7,.4,1) forwards}.hero-motion-nodes circle:nth-child(1){animation-delay:.35s}.hero-motion-nodes circle:nth-child(2){animation-delay:.65s}.hero-motion-nodes circle:nth-child(3){animation-delay:.78s}.hero-motion-nodes circle:nth-child(4){animation-delay:1.12s}.hero-motion-nodes circle:nth-child(5){animation-delay:1.48s}.hero-motion-nodes circle:nth-child(6){animation-delay:1.6s}.hero-motion-nodes circle:nth-child(7){animation-delay:1.9s}.hero-motion-spark{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:.035 .965;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 12px #6edfff);animation:hm-spark 2.2s 2.2s ease-in-out forwards}.hero-motion-halo{position:absolute;width:min(72%,360px);aspect-ratio:1;border:1px solid rgba(135,232,255,.1);border-radius:50%;opacity:0;animation:hm-halo 1.3s 1.9s ease forwards}.hero-motion-halo-a:before,.hero-motion-halo-a:after{position:absolute;content:"";inset:15%;border:1px dashed rgba(135,232,255,.11);border-radius:50%;animation:hm-spin 28s linear infinite}.hero-motion-halo-a:after{inset:31%;border-style:solid}.hero-motion-halo-b{width:min(98%,490px);border-style:dashed;animation:hm-halo 1.3s 2.1s ease forwards,hm-spin 45s linear infinite}.hero-motion-mandalas{position:absolute;width:min(84%,420px);aspect-ratio:1}.hero-motion-mandalas span{position:absolute;width:70%;aspect-ratio:1;border:1px solid rgba(135,232,255,.07);border-radius:50%;opacity:0;background:radial-gradient(circle,transparent 0 22%,rgba(124,223,255,.08) 22.4% 22.8%,transparent 23.2% 44%,rgba(124,223,255,.06) 44.4% 44.8%,transparent 45.2% 68%,rgba(124,223,255,.04) 68.4% 68.8%,transparent 69.2%);animation:hm-mandala 1.3s ease forwards}.hero-motion-mandalas span:nth-child(1){top:-28%;right:-28%;animation-delay:2.05s}.hero-motion-mandalas span:nth-child(2){right:-28%;bottom:-28%;animation-delay:2.2s}.hero-motion-mandalas span:nth-child(3){bottom:-28%;left:-28%;animation-delay:2.35s}.hero-motion-mandalas span:nth-child(4){top:-28%;left:-28%;animation-delay:2.5s}.hero-build-bar{grid-column:1/-1;display:grid;grid-template-columns:minmax(150px,.55fr) repeat(3,minmax(190px,1fr));gap:10px;align-items:stretch;margin-top:4px;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:26px;background:rgba(9,12,25,.76);box-shadow:0 24px 70px rgba(0,0,0,.25);backdrop-filter:blur(18px)}.hero-build-label{display:flex;padding:14px 16px;flex-direction:column;justify-content:center;color:var(--faint);font-size:.75rem}.hero-build-label strong{margin-top:5px;color:var(--text);font-size:.95rem}.hero-build-bar .mini-card{height:100%;min-height:104px;margin:0;padding:14px;grid-template-columns:40px 1fr;gap:11px;border-radius:18px;transition:transform .25s,border-color .25s,background .25s}.hero-build-bar .mini-card:hover{border-color:rgba(61,242,255,.3);background:rgba(61,242,255,.09);transform:translateY(-3px)}.hero-build-bar .mini-card i{width:40px;height:40px;border-radius:12px;font-size:1.2rem}.hero-build-bar .mini-card strong{font-size:.9rem}.hero-build-bar .mini-card p{font-size:.75rem;line-height:1.45}
@keyframes hm-draw{to{stroke-dashoffset:0}}@keyframes hm-core{to{opacity:1}}@keyframes hm-node{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.7)}100%{opacity:.72;transform:scale(1)}}@keyframes hm-spark{0%{opacity:0;stroke-dashoffset:1}15%,70%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}@keyframes hm-halo{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}@keyframes hm-mandala{from{opacity:0;scale:.72}to{opacity:1;scale:1}}@keyframes hm-spin{to{transform:rotate(360deg)}}
.hero-motion-card.hm-restarting .hero-motion-core,.hero-motion-card.hm-restarting .hero-motion-geometry path,.hero-motion-card.hm-restarting .hero-motion-nodes circle,.hero-motion-card.hm-restarting .hero-motion-spark,.hero-motion-card.hm-restarting .hero-motion-halo,.hero-motion-card.hm-restarting .hero-motion-mandalas span{animation:none!important;opacity:0}.hero-motion-card.hm-restarting .hero-motion-geometry path{stroke-dashoffset:1}
@media(max-width:980px){.hero-build-bar{grid-template-columns:repeat(3,1fr)}.hero-build-label{grid-column:1/-1;flex-direction:row;justify-content:space-between}.hero-motion-card{min-height:460px}}
@media(max-width:700px){.hero-motion-card{min-height:430px}.hero-build-bar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.hero-build-label{display:none}.hero-build-bar .mini-card{min-width:min(82vw,290px);scroll-snap-align:start}.hero-motion-mark{width:min(54vw,240px)}}
@media(prefers-reduced-motion:reduce){.hero-motion-card *,.nav-motion-logo *{animation-duration:.01ms!important;animation-delay:0ms!important}.hero-motion-mark{transition:none}}
.hero-grid:before{position:absolute;z-index:-1;content:"";inset:-110px -8vw;pointer-events:none;background:radial-gradient(circle at 19% 52%,transparent 0 62px,rgba(124,223,255,.04) 63px 64px,transparent 65px 102px,rgba(124,223,255,.022) 103px 104px,transparent 105px),radial-gradient(circle at 47% 4%,transparent 0 72px,rgba(124,223,255,.038) 73px 74px,transparent 75px 118px,rgba(124,223,255,.021) 119px 120px,transparent 121px),radial-gradient(circle at 78% 65%,transparent 0 74px,rgba(124,223,255,.042) 75px 76px,transparent 77px 124px,rgba(124,223,255,.024) 125px 126px,transparent 127px),radial-gradient(circle at 6% 94%,transparent 0 78px,rgba(124,223,255,.035) 79px 80px,transparent 81px 132px,rgba(124,223,255,.02) 133px 134px,transparent 135px)}
.nav-motion-logo{position:relative;display:grid;width:44px;height:46px;flex:0 0 44px;place-items:center}.nav-motion-logo svg{position:relative;z-index:2;width:35px;height:44px;overflow:visible;filter:drop-shadow(0 0 5px rgba(104,247,255,.55)) drop-shadow(0 0 11px rgba(104,247,255,.18))}.nav-motion-logo path{fill:none;stroke:#e5fcff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:nav-mark-draw 1.25s cubic-bezier(.7,0,.3,1) forwards;animation-delay:calc(.12s + var(--i)*.13s)}.nav-motion-logo path:first-child{stroke-width:10}@keyframes nav-mark-draw{to{stroke-dashoffset:0}}
.product-motion{min-height:520px;cursor:pointer}.product-motion-grid{position:absolute;inset:5%;border-radius:50%;opacity:.55;background:linear-gradient(rgba(110,247,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(110,247,255,.055) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle,#000 20%,transparent 72%);animation:pm-grid 12s linear infinite}.product-motion-map{position:relative;z-index:3;width:min(100%,560px);overflow:visible;filter:drop-shadow(0 24px 38px rgba(0,0,0,.5));transform:rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg));transition:transform .3s ease-out}.product-links path{fill:none;stroke:url(#product-line);stroke-width:1.6;stroke-dasharray:7 9;opacity:.55;animation:pm-link 2.2s linear infinite}.product-pulses circle{r:4;fill:#fff;filter:drop-shadow(0 0 8px #6ef7ff)}.product-node>circle{fill:rgba(8,17,35,.88);stroke:rgba(139,218,255,.4);stroke-width:1.5}.product-node>path,.product-node>rect{fill:none;stroke:#dffcff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.product-node .gamepad-shell{fill:rgba(110,247,255,.035);stroke-width:2.7}.product-node .gamepad-detail{stroke-width:2.5}.gamepad-buttons circle{fill:#dffcff;stroke:none;filter:drop-shadow(0 0 4px rgba(110,247,255,.8))}.product-node text{fill:#aeeeff;font:800 13px Inter,Arial,sans-serif;letter-spacing:2px;text-anchor:middle}.product-node{opacity:0;animation:pm-node .8s cubic-bezier(.2,1.4,.35,1) forwards}.product-node-game{animation-delay:.35s}.product-node-app{animation-delay:.6s}.product-node-auto{animation-delay:.85s}.product-node-game>circle{stroke:#76f4ff}.product-node-app>circle{stroke:#8ca4ff}.product-node-auto>circle{stroke:#c68cff}.product-core>circle:first-child{fill:rgba(78,205,255,.04);stroke:rgba(110,247,255,.28);stroke-width:1;stroke-dasharray:5 8;animation:pm-ring 13s linear infinite;transform-box:fill-box;transform-origin:center}.product-core>circle:nth-child(2){fill:rgba(5,10,25,.96);stroke:url(#product-line);stroke-width:2.5}.product-core text{fill:#fff;font:900 19px Inter,Arial,sans-serif;letter-spacing:2.5px;text-anchor:middle}.product-core .product-core-sub{fill:#79dff3;font-size:7px;letter-spacing:2px}.product-chip{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid rgba(110,247,255,.22);border-radius:999px;color:#bdf7ff;background:rgba(7,13,28,.82);font-size:.62rem;font-weight:900;letter-spacing:.1em;box-shadow:0 10px 30px rgba(0,0,0,.28);animation:pm-float 3.6s ease-in-out infinite}.product-chip-build{top:20%;left:3%}.product-chip-launch{right:2%;bottom:22%;animation-delay:-1.8s}.product-motion.pm-restarting .product-node{animation:none;opacity:0}.product-motion.pm-restarting .product-links,.product-motion.pm-restarting .product-chip{opacity:0}
@keyframes pm-link{to{stroke-dashoffset:-32}}@keyframes pm-node{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}@keyframes pm-ring{to{transform:rotate(360deg)}}@keyframes pm-grid{50%{transform:scale(1.045);opacity:.8}}@keyframes pm-float{50%{transform:translateY(-8px)}}
@media(max-width:700px){.hero-grid{gap:26px}.hero-copy{position:relative;z-index:3}.hero-motion-card{width:calc(100% + 28px);min-height:370px;margin-inline:-14px;overflow:clip}.hero-motion-field{inset:-5%;width:110%;height:110%}.hero-motion-halo{width:min(76vw,330px)}.hero-motion-halo-b{width:min(108vw,450px)}.hero-motion-mandalas{width:min(90vw,380px)}.hero-build-bar{position:relative;width:100%;gap:9px;padding:9px 9px 12px;overflow-x:auto;overflow-y:hidden;border-color:rgba(124,223,255,.13);border-radius:22px;background:linear-gradient(110deg,rgba(12,19,35,.94),rgba(9,12,25,.82));box-shadow:0 18px 52px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035);scroll-padding-inline:9px;scrollbar-width:thin;scrollbar-color:rgba(104,247,255,.38) transparent;overscroll-behavior-inline:contain;touch-action:pan-x;scroll-snap-type:x mandatory}.hero-build-bar::-webkit-scrollbar{height:4px}.hero-build-bar::-webkit-scrollbar-track{margin-inline:18px;background:rgba(255,255,255,.035);border-radius:99px}.hero-build-bar::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(90deg,rgba(104,247,255,.22),rgba(104,247,255,.65));box-shadow:0 0 8px rgba(104,247,255,.35)}.hero-build-bar .mini-card{min-width:min(76vw,280px);min-height:96px;padding:13px;scroll-snap-align:start;scroll-snap-stop:always}.hero-build-bar .mini-card:last-child{margin-right:2px}.hero-build-bar .mini-card p{font-size:.72rem}.hero:before{opacity:.82}.hero:after{background-size:68px 68px}}
@media(max-width:420px){.hero-motion-card{min-height:330px}.hero-motion-mark{width:min(50vw,205px)}.hero-motion-halo{width:72vw}.hero-motion-halo-b{width:104vw}.hero-motion-mandalas{width:86vw}.hero-build-bar .mini-card{min-width:78vw}.nav-motion-logo{width:38px;height:42px;flex-basis:38px}.nav-motion-logo svg{width:31px;height:39px}}
@media(max-width:700px){.product-motion{min-height:390px}.product-motion-map{width:min(112%,520px)}.product-chip{font-size:.55rem}.product-chip-build{top:14%;left:0}.product-chip-launch{right:0;bottom:17%}}

/* Keep the complete build selector visible on small screens. */
@media(max-width:700px){.hero-build-bar{display:grid;width:100%;grid-template-columns:1fr;gap:9px;padding:12px;overflow:visible;scroll-snap-type:none;touch-action:auto}.hero-build-label{display:flex;grid-column:auto;padding:10px 8px 14px;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(124,223,255,.12)}.hero-build-bar .mini-card{width:100%;min-width:0;min-height:98px;padding:14px;scroll-snap-align:none}.hero-build-bar .mini-card:last-child{margin-right:0}.hero-build-bar .mini-card p{font-size:.74rem}}
@media(max-width:420px){.hero-build-bar .mini-card{min-width:0}}

@media(min-width:981px){.hero-build-bar{grid-template-columns:minmax(150px,.55fr) repeat(3,minmax(180px,1fr))}.hero-build-label{grid-row:1/3}}
