@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500&family=Manrope:wght@300;400;500&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f0efeb;background:#060709;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #e3c8a0;outline-offset:7px}html{scroll-behavior:smooth;scroll-padding-top:30px}.skip{position:absolute;top:-90px;padding:15px;background:#222;z-index:10}.skip:focus{top:10px}.header{height:112px;display:flex;align-items:center;margin:0 5.2%;gap:30px;position:relative;z-index:2}.brand img{width:90px;height:60px;object-fit:contain;filter:invert(1)}.studio-label{font-size:9px;letter-spacing:2px;line-height:1.8;color:#dedbd5}.studio-label small{font-size:8px;color:#86878a}.header nav{margin-left:auto;display:flex;gap:35px;font-size:12px;color:#c8c8cb}.header nav span{padding-left:10px;color:#b8a58b}.universe{min-height:820px;height:calc(100svh - 112px);max-height:1100px;position:relative;isolation:isolate}.intro{text-align:center;position:relative;z-index:1;pointer-events:none;padding-top:20px}.eyebrow{font-size:9px;letter-spacing:2.7px;color:#a9a49c;font-weight:400}.intro h1{font-family:'Manrope',sans-serif;font-weight:300;letter-spacing:-3px;font-size:clamp(44px,4.4vw,72px);line-height:1.12;margin:24px 0 0}.intro em{font-style:normal;color:#a6a8ad}.cosmos{position:absolute;inset:0;z-index:-1;overflow:hidden}canvas{width:100%;height:100%;display:block}.fallback-hole{position:absolute;width:25%;aspect-ratio:1;left:37.5%;top:25%;border-radius:50%;background:#020203;box-shadow:0 0 5px #f3deb6,0 0 25px #a88b5b55}.canvas-ready .fallback-hole{display:none}.horizon-caption{position:absolute;top:54%;left:70%;display:flex;flex-direction:column;gap:10px;font-size:8px;letter-spacing:2px;color:#c0b5a4}.horizon-caption i{position:absolute;right:calc(100% + 15px);top:5px;width:60px;height:1px;background:linear-gradient(90deg,transparent,#a1947c66)}.horizon-caption small{font-size:7px;letter-spacing:1.4px;color:#727272}.orbit-note{position:absolute;left:5.2%;bottom:210px;font-size:9px;letter-spacing:1.6px;color:#7c7f86}.orbit-note p{font-size:12px;letter-spacing:0;color:#b8b8bd}.orbit-note small{font-size:10px;letter-spacing:2px;color:#a69b89}.motion-note{position:absolute;right:5.2%;bottom:210px;display:flex;flex-direction:column;align-items:flex-end;gap:15px;font-size:8px;letter-spacing:1.7px;color:#65676e}.motion-note button{border:0;border-bottom:1px solid #33353a;padding:5px 0;background:none;color:#a9a9b0;font-size:10px;cursor:pointer}.statement{position:absolute;bottom:32px;text-align:center;width:100%;padding:0 22px}.statement p{font-size:15px;line-height:1.7;color:#8b8e95;letter-spacing:.1px}.statement p span{color:#d5d6d9}.discover{display:inline-flex;align-items:center;gap:24px;font-size:11px;margin-top:12px;color:#b9afa0}.discover span{font-size:18px}.apps{max-width:1200px;margin:0 auto;padding:110px 5% 100px;display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;border-top:1px solid #1b1c20}.apps h2{font-family:Manrope,sans-serif;font-size:34px;font-weight:400;letter-spacing:-1.3px;line-height:1.3}.apps h2 span{color:#7f838c}.apps-intro>p:last-child{font-size:14px;line-height:1.9;color:#9498a2;max-width:380px}.product{display:block;border:1px solid #2c2f35;border-radius:20px;padding:30px;background:radial-gradient(ellipse at top right,#252a2e66,transparent 75%);transition:border-color .3s,transform .3s}.product:hover{border-color:#857561;transform:translateY(-3px)}.product-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.niminu{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:3px}.niminu b{font-family:Arial,sans-serif;font-size:11px;letter-spacing:-.6px;line-height:1;border:1px solid #c6c9c7;padding:4px;font-weight:400}.status{font-size:7px;letter-spacing:1.3px;color:#939d95}.product h3{font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-1px;font-weight:400;margin:40px 0 18px}.product p{font-size:13px;color:#999da6;line-height:1.8;max-width:270px}.product-link{font-size:11px;display:flex;justify-content:space-between;margin-top:30px;color:#d8c9b0}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 5.2%;font-size:10px;line-height:1.9;color:#898c94}footer small{font-size:9px;color:#646872}footer a{color:#c0c2c7}@media(max-width:700px){.header{height:92px;margin:0 6%;gap:15px}.brand img{width:72px;height:52px}.studio-label{display:none}.header nav{font-size:11px;gap:24px}.universe{height:calc(100svh - 92px);min-height:680px;max-height:900px}.intro{padding-top:27px}.eyebrow{font-size:7px;letter-spacing:1.8px}.intro h1{font-size:43px;letter-spacing:-2px;margin-top:22px}.cosmos{inset:0 -35%}.horizon-caption{left:64%;top:auto;bottom:225px;font-size:7px}.horizon-caption small{display:none}.horizon-caption i{width:30px}.orbit-note{left:6%;bottom:175px;font-size:7px;letter-spacing:1px}.orbit-note p{font-size:10px}.orbit-note small{font-size:8px}.motion-note{right:6%;bottom:175px}.motion-note>span{display:none}.statement{bottom:24px}.statement p{font-size:12px}.discover{font-size:10px}.apps{padding:65px 6%;margin:0 6%;grid-template-columns:1fr;gap:30px}.apps h2{font-size:28px}.apps-intro>p:last-child{font-size:13px}.product{padding:25px}footer{flex-wrap:wrap;padding:25px 6%;font-size:9px}footer>span:last-child{width:100%;font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product{transition:none}}
.universe{overflow:clip}

.arrow-icon{width:16px;height:16px;flex:none;vertical-align:middle}.header nav a{display:inline-flex;align-items:center;gap:10px}.apps{display:flex;justify-content:center;padding:65px 6%;gap:0}.product{width:100%;max-width:470px}.statement{bottom:55px}.orbit-note small{display:block}.discover .arrow-icon{width:18px;height:18px}@media(max-width:700px){.apps{padding:44px 0;margin:0 6%}.statement{bottom:45px}.header nav{gap:25px}}

/* Hide scrollbars without disabling scrolling. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html.wheel-glide{scroll-behavior:auto!important}

/* A short cinematic approach, driven by the visitor's scroll. */
.scene{position:relative;height:100%;min-height:inherit;isolation:isolate}
.motion-ready .universe{height:165svh;min-height:1150px;max-height:1800px;overflow:visible}
.motion-ready .scene{position:sticky;top:0;height:100svh;min-height:700px;max-height:1100px;overflow:clip;--approach:0}
.motion-ready .intro{transform:translateY(calc(var(--approach)*-42px));opacity:calc(1 - var(--approach)*.85)}
.motion-ready .scene .cosmos{inset:0}
.motion-ready .horizon-caption{opacity:calc(1 - var(--approach)*.85)}
.motion-ready .orbit-note{opacity:calc(1 - var(--approach)*.55)}
.motion-ready .apps{border-top:0;padding-top:90px;padding-bottom:90px}
.motion-ready .intro .eyebrow{animation:arrival 1.2s cubic-bezier(.16,1,.3,1) both}
.motion-ready .intro h1{animation:arrival 1.5s .144s cubic-bezier(.16,1,.3,1) both}
.motion-ready .header{animation:arrival 1.2s .08s cubic-bezier(.16,1,.3,1) both}
@keyframes arrival{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.reveal{opacity:0;translate:0 22px;transition:opacity 1s ease,translate 1.2s cubic-bezier(.16,1,.3,1)}
.reveal.revealed,.reveal:focus-within{opacity:1;translate:0 0}
.product{position:relative;overflow:hidden;transition:border-color .4s,transform .6s cubic-bezier(.16,1,.3,1),opacity 1s,translate 1.2s cubic-bezier(.16,1,.3,1)}
.product::after{content:'';pointer-events:none;position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 38%,#eed4a40a 48%,#eed4a414 50%,transparent 60%);transform:translateX(-60%);transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.product:hover::after,.product:focus-visible::after{transform:translateX(55%)}
.product-link .arrow-icon,.header nav .arrow-icon{transition:transform .35s ease}
.product:hover .arrow-icon,.header nav a:hover .arrow-icon{transform:translate(2px,-2px)}
.discover .arrow-icon{animation:orbit-cue 3.8s ease-in-out infinite}
@keyframes orbit-cue{0%,70%,100%{transform:translateY(0)}35%{transform:translateY(4px)}}
.motion-paused *, .motion-paused *::after{animation-play-state:paused!important}
.motion-paused .reveal{opacity:1;translate:none;transition:none}
.motion-paused .product,.motion-paused .product::after,.motion-paused .arrow-icon{transition:none}

@media(max-width:700px){
 .motion-ready .universe{height:150svh;min-height:1020px;max-height:1400px}
 .motion-ready .scene{height:100svh;min-height:680px;max-height:900px}
 .motion-ready .scene .cosmos{inset:0 -35%}
 .motion-ready .apps{padding:44px 0 55px}
}
@media(prefers-reduced-motion:reduce){
 .motion-ready .universe{height:calc(100svh - 112px);min-height:820px;max-height:1100px;overflow:clip}
 .motion-ready .scene{position:relative;height:100%;min-height:inherit}
 .motion-ready .intro,.motion-ready .horizon-caption,.motion-ready .orbit-note{transform:none;opacity:1}
 .motion-ready *, .motion-ready *::after{animation:none!important;transition:none!important}
 .reveal{opacity:1;translate:none}
 .product:hover{transform:none}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){.motion-ready .universe{height:calc(100svh - 92px);min-height:680px;max-height:900px}}
.motion-paused .header,.motion-paused .intro h1,.motion-paused .intro .eyebrow{animation:none!important;opacity:1;translate:none}
/* Landscape and zoomed layouts remain ordinary scrolling pages. */
@media(orientation:landscape) and (max-height:699px){.motion-ready .universe{height:700px;min-height:700px;max-height:none}.motion-ready .scene{position:relative;height:700px;min-height:700px;max-height:none}}
@media(prefers-reduced-motion:reduce){.discover .arrow-icon{animation:none}.product::after,.arrow-icon,.reveal{transition:none}.reveal{opacity:1;translate:none}}

/* Let the orbital field reach the viewport edges and dissolve into the page. */
#black-hole{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 75%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 75%,transparent)}
