@charset "UTF-8";

:root{
color-scheme:dark;
font-family:Inter,"Aptos","Segoe UI",Arial,sans-serif;
background:#050d1a;
color:#f5f8ff;
font-synthesis:none;
font-size:16px;
--blue:#0878ff;
--cyan:#58e6ff;
--deep-blue:#065cff;
--crystal-blue:#6de7ff}

*{
box-sizing:border-box}
body{
margin:0}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
a:focus-visible,button:focus-visible{
outline:3px solid #a2f4ff;
outline-offset:6px}
button,a{
-webkit-tap-highlight-color:transparent}
.skip{
position:fixed;
top:-100px;
left:20px;
z-index:30;
background:#fff;
color:#101728;
padding:15px}
.skip:focus{
top:20px}
.portal{
position:relative;
isolation:isolate;
min-height:800px;
height:100svh;
max-height:1400px;
overflow:hidden;
background:#071527}
.scene-stage{
position:absolute;
inset:50% auto auto 0;
width:100%;
aspect-ratio:1672 / 941;
z-index:-3;
transform:translate(var(--px,0px),calc(-50% + var(--py,0px))) scale(1.012);
transition:transform 1s ease-out;
pointer-events:none}
.scene{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
object-position:50% 50%;
mask-image:linear-gradient(180deg,transparent,#000 12%,#000 85%,transparent)}
.glass-hologram{
position:absolute;
left:50%;
top:48.2%;
width:11.3%;
aspect-ratio:1;
transform:translate(-50%,-50%);
pointer-events:none;
mix-blend-mode:screen}
.glass-hologram:before{
content:"";
position:absolute;
inset:8%;
border-radius:50%;
background:radial-gradient(circle,#46caff35,#075bff1f 48%,transparent 72%);
animation:logo-pulse 4.8s ease-in-out infinite}
.glass-logo{
position:absolute;
inset:10%;
width:80%;
height:80%;
object-fit:contain;
mix-blend-mode:screen;
opacity:.86;
animation:logo-pulse 4.8s ease-in-out infinite}
.holo-wave{
position:absolute;
inset:0;
border:1.5px solid currentColor;
border-radius:50%;
color:var(--crystal-blue);
box-shadow:0 0 8px currentColor,inset 0 0 5px currentColor;
opacity:0;
transform:scale(.25);
animation:glass-ripple 4.8s cubic-bezier(.16,.5,.4,1) infinite}
.holo-wave:nth-child(2){
color:var(--deep-blue);
animation-delay:-1.2s}
.holo-wave:nth-child(3){
animation-delay:-2.4s}
.holo-wave:nth-child(4){
color:var(--deep-blue);
animation-delay:-3.6s}
.mobile-glass{
display:none}
.portal:before{
content:"";
position:absolute;
inset:0;
z-index:-2;
pointer-events:none;
background:linear-gradient(180deg,rgba(1,9,20,.30),transparent 30%,transparent 64%,rgba(1,9,20,.62))}
.atmosphere{
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:radial-gradient(ellipse at 21% 41%,rgba(57,155,255,.16),transparent 28%),radial-gradient(ellipse at 79% 41%,rgba(31,139,255,.2),transparent 28%);
animation:breathe 8s ease-in-out infinite alternate}
.top{
position:absolute;
mix-blend-mode:screen;
top:24px;
left:4%;
right:4%;
display:flex;
align-items:flex-start;
justify-content:space-between;
z-index:5}
.brand{
display:block;
width:112px;
height:120px}
.brand img{
display:block;
width:100%;
height:100%;
object-fit:contain;
mix-blend-mode:screen}
.languages{
display:flex;
gap:6px;
align-items:center;
padding-top:7px}
.languages a{
display:grid;
place-items:center;
min-width:44px;
min-height:44px;
font-size:.875rem;
font-weight:600;
letter-spacing:.04em;
color:#b4c5dc;
position:relative}
.languages a[aria-current="page"]{
color:white}
.languages a[aria-current="page"]:after{
position:absolute;
content:"";
bottom:3px;
left:10px;
right:10px;
height:2px;
background:#45d4ff;
box-shadow:0 0 10px #21b8ff}
.heading{
position:absolute;
top:12%;
left:20%;
right:20%;
text-align:center;
margin:0}
.heading h1{
font-size:clamp(2.6rem,3.8vw,4.5rem);
font-weight:450;
letter-spacing:-.045em;
line-height:1.08;
margin:0;
text-wrap:balance;
text-shadow:0 2px 30px #031325}
.heading p{
margin:17px 0 0;
letter-spacing:.26em;
text-transform:uppercase;
font-size:clamp(.75rem,.95vw,.93rem);
color:#c0e6ff;
line-height:1.6}
.destination{
position:absolute;
top:69%;
width:35%;
max-width:560px;
text-align:center;
transform:translateX(-50%);
padding:22px 24px 24px;
border:1px solid rgba(99,170,243,.15);
border-radius:24px;
background:linear-gradient(145deg,rgba(4,15,33,.78),rgba(7,23,49,.38));
backdrop-filter:blur(18px);
box-shadow:0 18px 55px #00102b26;
transition:border-color .3s,box-shadow .3s}
.destination.hardware{
left:20.5%}
.destination.software{
left:79%}
.destination:hover,.destination:focus-within{
border-color:rgba(91,209,255,.6);
box-shadow:0 15px 65px #037bff30}
.destination h2{
font-size:clamp(2rem,3.1vw,3.2rem);
line-height:1.1;
letter-spacing:-.025em;
font-weight:500;
margin:0 0 22px}
.enter{
display:inline-flex;
align-items:center;
justify-content:center;
gap:24px;
min-height:62px;
width:min(100%,370px);
padding:15px 22px;
background:linear-gradient(170deg,#0ea8ff 0%,#0572ff 55%,#0051e0 100%);
border:1px solid #53d8ff;
border-radius:17px;
box-shadow:0 0 0 1px #2ea6ff33,inset 0 1px 1px #b3f4ff88,0 7px 25px #006aff33;
font-size:1.05rem;
line-height:1.35;
font-weight:600;
text-align:center;
transition:filter .2s,transform .2s}
.enter:hover{
filter:brightness(1.13);
transform:translateY(-2px)}
.enter svg{
width:21px;
height:21px;
flex:0 0 21px}
.mobile-art{
display:none}
.footer{
position:absolute;
bottom:22px;
left:4%;
right:4%;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
font-size:.8125rem;
line-height:1.5;
color:#c8d9ed}
.footer nav{
display:flex;
gap:25px}
.footer a:hover{
text-decoration:underline;
text-underline-offset:4px}
.motion{
border:0;
color:#c8d9ed;
background:transparent;
display:inline-flex;
align-items:center;
gap:8px;
font-size:.8125rem;
cursor:pointer;
padding:10px;
min-height:44px}
.motion svg{
height:14px;
width:14px}
.motion[hidden]{
display:none}
.paused .atmosphere,.paused .glass-logo,.paused .holo-wave,.paused .glass-hologram:before{
animation-play-state:paused}
.paused .scene-stage{
transform:translateY(-50%)}
.legal{
min-height:100svh;
background:radial-gradient(ellipse at 85% 0%,#09274b,transparent 45%),#07111f}
.legal .top{
position:relative;
inset:auto;
margin:0 auto;
padding:24px 0;
max-width:1120px;
width:90%}
.legal-main{
max-width:850px;
margin:24px auto 80px;
padding:0 28px}
.back{
display:inline-flex;
align-items:center;
gap:10px;
color:#8bdcff;
padding:14px 0;
font-size:.95rem}
.legal h1{
font-size:clamp(2.4rem,5vw,4rem);
letter-spacing:-.04em;
line-height:1.15;
margin:24px 0 36px}
.legal h2{
font-size:1.25rem;
line-height:1.3;
margin:32px 0 13px;
font-weight:600}
.legal p,.legal address,.legal li{
font-size:1rem;
line-height:1.75;
color:#c8d6e9;
font-style:normal}
.legal-main a:not(.back){
color:#85d9ff;
text-decoration:underline;
text-underline-offset:4px;
overflow-wrap:anywhere}
.legal .footer{
position:relative;
bottom:auto;
left:auto;
right:auto;
width:90%;
max-width:1120px;
margin:auto;
padding:24px 0;
border-top:1px solid #8bc9ff22}
.legal .brand{
width:94px;
height:100px}
.legal-list{
padding-left:22px}
.legal .updated{
font-size:.875rem;
color:#94a9c4}
.no-motion .atmosphere{
animation:none}
.no-motion .scene-stage{
transform:translateY(-50%)}

@keyframes logo-pulse{
0%,100%{opacity:.66;transform:scale(.965);filter:brightness(1)}
50%{opacity:1;transform:scale(1.025);filter:brightness(1.24)}
}
@keyframes glass-ripple{
0%{opacity:0;transform:scale(.25)}
18%{opacity:.8}
70%{opacity:.32}
100%{opacity:0;transform:scale(1.08)}
}

@keyframes breathe{
from{
opacity:.35}
to{
opacity:1}
}

@media(min-width:1800px){
.brand{
width:140px;
height:150px}
.destination{
top:69%}
.footer{
bottom:28px}
.top{
top:32px}
}

@media(min-width:1001px) and (max-aspect-ratio:4/3){
.portal{
min-height:780px;
height:80vw;
max-height:none}
.scene{
object-fit:contain}
.heading{
top:15%;
left:18%;
right:18%}
.destination{
top:66%;
width:39%}
.destination.hardware{
left:22%}
.destination.software{
left:78%}
.destination h2{
font-size:2.3rem}
}

@media(max-width:1000px){
.portal{
min-height:100svh;
height:auto;
max-height:none;
overflow:visible;
padding-bottom:14px;
background:radial-gradient(ellipse at 80% 0%,#0b3159,transparent 40%),#071320}
.scene-stage,.atmosphere{
display:none}
.mobile-glass{
display:block;
position:relative;
height:220px;
max-width:520px;
margin:0 auto 25px;
width:calc(100% - 36px);
overflow:hidden;
background-image:url("assets/showroom.webp");
background-size:360% auto;
background-position:50% 47.5%;
background-repeat:no-repeat;
mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.mobile-glass .glass-hologram{
top:51%;
width:38%;
max-width:156px}
.portal:before{
display:none}
.top{
position:relative;
top:auto;
left:auto;
right:auto;
padding:20px 22px 0;
align-items:flex-start}
.brand{
width:76px;
height:85px}
.languages{
gap:2px;
padding-top:3px}
.languages a{
min-width:42px;
min-height:44px}
.heading{
position:relative;
top:auto;
left:auto;
right:auto;
padding:20px 24px 30px}
.heading h1{
font-size:clamp(2.3rem,8.7vw,3.5rem);
line-height:1.12}
.heading p{
font-size:.72rem;
letter-spacing:.17em;
line-height:1.7;
margin-top:14px}
.choices{
display:grid;
gap:24px;
padding:0 18px}
.destination{
position:relative;
top:auto;
left:auto!important;
transform:none;
width:100%;
max-width:none;
overflow:hidden;
padding:0 18px 23px;
border:1px solid #5389b44d;
background:linear-gradient(155deg,#0b2842,#061425);
border-radius:23px;
box-shadow:0 12px 44px #0004;
backdrop-filter:none}
.destination h2{
font-size:2rem;
margin:12px 0 19px;
font-weight:500}
.mobile-art{
display:block;
height:clamp(265px,78vw,440px);
margin:0 -18px;
background-image:url("assets/showroom.webp");
background-size:260% auto;
background-position:0% 46%;
background-repeat:no-repeat;
-webkit-mask-image:linear-gradient(#000 89%,transparent);
mask-image:linear-gradient(#000 89%,transparent)}
.software .mobile-art{
background-position:100% 46%}
.enter{
min-height:58px;
font-size:1rem;
border-radius:15px;
width:100%;
gap:16px;
max-width:400px}
.footer{
position:relative;
bottom:auto;
left:auto;
right:auto;
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:4px 22px;
margin:28px 20px 0;
text-align:center;
font-size:.75rem}
.footer nav{
gap:23px;
justify-content:center;
min-height:44px;
align-items:center}
.footer .motion{
display:inline-flex;
order:3;
width:100%;
justify-content:center}
.legal .top{
width:100%;
padding:20px 22px}
.legal .brand{
width:76px;
height:85px}
.legal-main{
padding:0 24px;
margin:5px auto 50px}
.legal .footer{
width:calc(100% - 48px);
margin:auto}
.legal h1{
font-size:2.6rem}
.legal h2{
margin-top:27px}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important}
.scene-stage{
transform:translateY(-50%)!important}
.holo-wave{
opacity:0}
.holo-wave:first-child{
opacity:.24;
transform:scale(.92)}
.glass-logo{
opacity:.9;
transform:none;
filter:none}
.enter:hover{
transform:none}
}