body{margin:0;background:#0F2628}
a{color:#FF9F5A}a:hover{color:#FFC9A0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{opacity:0;transform:translateY(60%) skewY(4deg)}to{opacity:1;transform:none}}
@keyframes heroOut{to{transform:translateY(-90px) scale(.93);opacity:.3}}
@keyframes tilt{from{transform:rotate(-12deg) translateY(140px) scale(.85);opacity:.2}to{transform:rotate(-1.2deg);opacity:1}}
@keyframes popNum{from{transform:scale(.3) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
@keyframes slideX{from{transform:translateX(-10%);opacity:0}to{transform:none;opacity:1}}
@keyframes slideXr{from{transform:translateX(10%);opacity:0}to{transform:none;opacity:1}}
@keyframes gridMove{to{background-position:64px 64px,64px 64px}}
@keyframes blinkOn{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes tlIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes menuIn{from{clip-path:circle(0% at 100% 0%)}to{clip-path:circle(150% at 100% 0%)}}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
@keyframes drawK{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes reveal{to{clip-path:inset(-10% -2% -20% 0)}}
@keyframes skelOut{to{opacity:0}}
@keyframes caretRun{from{left:0;opacity:1}to{left:100%;opacity:1}}
@keyframes caretOff{to{opacity:0}}
@keyframes dotPop{0%{transform:scale(0)}60%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes dotPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes hideAt{to{opacity:0;visibility:hidden}}
@keyframes showAt{to{opacity:1}}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.5}}
@keyframes detailIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.track{animation:slide 30s linear infinite}
.bar{position:fixed;top:0;left:0;width:100%;height:4px;transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
.gridbg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(243,239,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(243,239,230,.06) 1px,transparent 1px);background-size:64px 64px;animation:gridMove 6s linear infinite;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 75% 65% at 50% 35%,#000 25%,transparent 100%)}
.caret{display:inline-block;width:.6em;height:1.1em;background:var(--acc);vertical-align:-0.2em;margin-left:8px;animation:blinkOn 1s steps(1) infinite}
.tl{animation:tlIn .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.term{position:relative;overflow:hidden}
.term::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(rgba(255,159,90,0),rgba(255,159,90,.06),rgba(255,159,90,0));animation:scan 4.5s linear infinite;pointer-events:none}
.logo-txt{display:inline-block;clip-path:inset(0 100% 0 0);animation:reveal .8s steps(8) .15s forwards}
.logo-dot{display:inline-block;transform:scale(0);transform-origin:50% 80%;animation:dotPop .5s cubic-bezier(.3,1.6,.5,1) 1s forwards,dotPulse 2.4s ease-in-out 1.6s infinite}
.bl{position:relative;display:block;width:fit-content}
.bl-t{display:inline-block;clip-path:inset(0 100% 0 0);animation:reveal var(--t) steps(var(--n)) var(--d) forwards}
.bl::before{content:"";position:absolute;left:0;right:0;top:20%;bottom:12%;border-radius:.08em;background:rgba(243,239,230,.07);border:1px dashed rgba(243,239,230,.18);animation:skelOut .25s ease var(--e) forwards}
.bl::after{content:"";position:absolute;top:10%;bottom:6%;width:.06em;left:0;background:var(--acc);opacity:0;animation:caretRun var(--t) steps(var(--n)) var(--d) forwards,caretOff .01s linear var(--e) forwards}
.bl.last::after{animation:caretRun var(--t) steps(var(--n)) var(--d) forwards,blinkOn 1s steps(1) var(--e) infinite}
.st{grid-area:1/1;display:inline-flex;align-items:center;gap:8px}
.st-build{animation:hideAt .01s linear 2.9s forwards}
.st-live{opacity:0;animation:showAt .3s ease 2.9s forwards}
.st-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.st-build .st-dot{animation:pulseDot .8s ease-in-out infinite}
.navlinks{display:flex}
.burger{display:none}
@media (max-width: 1100px){.navlinks{display:none}.burger{display:inline-flex}}
@media (max-width: 520px){.logo{font-size:21px !important}}
.pi{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menuov{animation:menuIn .6s cubic-bezier(.7,0,.2,1) both}
.mlink{animation:lineIn .6s cubic-bezier(.2,.8,.2,1) both}
.mlink:nth-child(1){animation-delay:.16s}
.mlink:nth-child(2){animation-delay:.22s}
.mlink:nth-child(3){animation-delay:.28s}
.mlink:nth-child(4){animation-delay:.34s}
.mlink:nth-child(5){animation-delay:.40s}
.mlink:nth-child(6){animation-delay:.46s}
.card{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card:hover{transform:translateY(-8px);box-shadow:0 0 0 1px var(--acc),0 30px 70px -30px var(--acc)}
.detail{animation:detailIn .35s cubic-bezier(.2,.8,.2,1) both}
.shot img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.shot:hover img{transform:scale(1.02)}
@supports (animation-timeline: view()){
.bar{animation:grow linear both;animation-timeline:scroll(root)}
.hero{animation:heroOut linear both;animation-timeline:scroll(root);animation-range:0 650px}
.rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.rv:nth-child(2){animation-range:entry 8% cover 36%}
.rv:nth-child(3){animation-range:entry 16% cover 42%}
.rv:nth-child(4){animation-range:entry 24% cover 48%}
.tilt{animation:tilt linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
.pop{animation:popNum linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.sx{animation:slideX linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.sxr{animation:slideXr linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.sxe{animation:slideX linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.sxre{animation:slideXr linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
.draw{animation:drawK linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}
@media (prefers-reduced-motion: reduce){.track,.h1line,.bar,.hero,.rv,.tilt,.pop,.sx,.sxr,.sxe,.sxre,.draw,.gridbg,.caret,.tl,.menuov,.mlink,.detail,.bl::after,.bl::before,.st-build,.st-live,.st-dot,.logo-dot{animation:none !important}.bl-t,.logo-txt{animation:none !important;clip-path:none}.bl::before{display:none}.logo-dot{transform:none}.st-build{display:none}.st-live{opacity:1}.term::after{display:none}.bar{display:none}.card{transition:none}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:#F3EFE6;font-family:'Manrope',sans-serif;overflow-x:hidden}
#root{--acc:#FF9F5A;background:#0F2628;overflow:hidden}
[hidden]{display:none !important}
img{max-width:100%}
section[id]{scroll-margin-top:24px}
.mono{font-family:'JetBrains Mono',monospace}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.14em;text-transform:uppercase}
.lb{font-family:inherit;font-size:13px;font-weight:700;border:0;border-radius:999px;min-width:38px;min-height:40px;padding:0 9px;cursor:pointer;background:transparent;color:#CFDCDB}
.lb.on{background:#F3EFE6;color:#0F2628}
.round{width:48px;height:48px;border-radius:999px;border:1px solid #34585B;background:transparent;color:#F3EFE6;align-items:center;justify-content:center;cursor:pointer;padding:0;display:inline-flex}
.burger{display:none}
@media (max-width:1100px){.burger{display:inline-flex}}
.dot{width:10px;height:10px;border-radius:50%;background:#34585B;display:block}
.mini{border-radius:14px;overflow:hidden;background:#0A1D1F;border:1px solid #24474A;box-shadow:0 30px 80px rgba(0,0,0,0.35)}
.minibar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid #24474A}
.minibar .dot{width:8px;height:8px}
.card.open .pi{transform:rotate(45deg)}
.card:focus-visible,.lb:focus-visible,.round:focus-visible,a:focus-visible{outline:2px solid #FF9F5A;outline-offset:3px}