:root{color-scheme:dark;--scarlet:#e31837;--text:#f6f4f1;--muted:#97979d;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html{background:#050506}
body{min-height:100svh;margin:0;overflow-x:hidden;background:#050506;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body:before{content:"";position:fixed;z-index:-3;inset:0;background:radial-gradient(circle at 50% 35%,rgba(208,0,29,.19),transparent 33%),linear-gradient(180deg,#080708,#020203)}
body:after{content:"";position:fixed;z-index:-2;top:8%;left:50%;width:min(72vw,840px);aspect-ratio:1;transform:translateX(-50%);border:1px solid rgba(255,255,255,.045);border-radius:50%;box-shadow:0 0 0 100px rgba(255,255,255,.012),0 0 0 200px rgba(255,255,255,.007)}
a{color:inherit;text-decoration:none}
button{font:inherit}
header,footer{position:fixed;z-index:5;right:clamp(1.25rem,4vw,4rem);left:clamp(1.25rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between}
header{top:1.4rem}
.brand{display:flex;align-items:center;gap:.8rem;font-size:1rem;font-weight:650;letter-spacing:-.035em}
.brand-mark{display:grid;width:44px;height:44px;place-items:center;border:1px solid rgba(255,39,66,.42);border-radius:14px;background:#0c090a;box-shadow:0 12px 40px rgba(220,0,31,.13)}
.brand-mark img{width:36px;height:36px;object-fit:contain}
.status{display:flex;align-items:center;gap:.55rem;color:#8e8e94;font-size:.64rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase}
.status i{width:5px;height:5px;border-radius:50%;background:#ed2341;box-shadow:0 0 13px #ed2341;animation:pulse 2.4s ease-in-out infinite}
main{display:grid;min-height:100svh;place-items:center;padding:7rem 1.25rem 6rem;text-align:center}
.hero{position:relative;z-index:2;width:min(1100px,100%)}
.hero-mark{display:grid;width:72px;height:72px;place-items:center;margin:0 auto 1.6rem;border:1px solid rgba(255,39,66,.32);border-radius:23px;background:linear-gradient(145deg,rgba(28,20,22,.92),rgba(5,5,6,.92));box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 24px 80px rgba(213,0,31,.18);opacity:0;transform:translateY(16px) scale(.94)}
.hero-mark img{width:58px;height:58px;object-fit:contain}
.eyebrow{margin:0 0 1.25rem;color:#ff3d58;font-size:.65rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase}
h1{margin:0;font-size:clamp(4.2rem,10.5vw,10.5rem);font-weight:620;letter-spacing:-.085em;line-height:.8}
h1 span{background:linear-gradient(110deg,#77777d 5%,#f3f1ef 42%,#6f6f75 72%,#f3f1ef 82%,#707076 92%);background-size:220% 100%;background-clip:text;color:transparent}
.intro{max-width:680px;margin:2rem auto 0;color:var(--muted);font-size:clamp(.95rem,1.5vw,1.18rem);line-height:1.65}
.products{display:flex;align-items:center;justify-content:center;gap:.85rem;margin-top:2rem;color:#696970;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.products i{width:3px;height:3px;border-radius:50%;background:#d71920}
.build-line{position:relative;width:min(360px,72vw);height:1px;margin:1.65rem auto 0;overflow:visible;background:rgba(255,255,255,.09)}
.build-line i{position:absolute;top:0;left:0;width:38%;height:1px;background:linear-gradient(90deg,transparent,#ef2341 52%,transparent);filter:drop-shadow(0 0 5px #ef2341);animation:progress-travel 5.2s cubic-bezier(.45,0,.55,1) infinite}
.build-line span{position:absolute;top:-2px;right:0;width:5px;height:5px;border-radius:50%;background:#333338}
.progress-button{display:inline-flex;min-height:48px;align-items:center;gap:.75rem;margin-top:2.25rem;border:1px solid #f2f0ed;border-radius:999px;background:#f2f0ed;color:#09090a;padding:.8rem 1.25rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .22s,box-shadow .22s}
.progress-button:hover{transform:translateY(-2px);box-shadow:0 15px 45px rgba(255,255,255,.12)}
.progress-button:focus-visible{outline:3px solid #ff3d58;outline-offset:4px}
.progress-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .22s}
.progress-button[aria-expanded="true"] svg{transform:rotate(90deg)}
.progress-note{max-width:540px;margin:1rem auto 0;color:#74747a;font-size:.76rem;line-height:1.55}
footer{bottom:1.6rem;color:#56565c;font-size:.62rem;letter-spacing:.04em}
.ambient i{position:fixed;z-index:-1;border-radius:50%;filter:blur(1px);opacity:.3}
.ambient i:first-child{right:-10vw;bottom:-28vw;width:48vw;aspect-ratio:1;border:1px solid rgba(230,15,47,.13)}
.ambient i:nth-child(2){right:-4vw;bottom:-22vw;width:36vw;aspect-ratio:1;border:1px solid rgba(230,15,47,.09)}
.ambient i:last-child{right:7vw;bottom:13vh;width:6px;height:6px;background:#e31837;box-shadow:0 0 60px 22px rgba(227,24,55,.28)}
.orbit-system{position:fixed;z-index:-1;top:50%;left:50%;width:min(1040px,82vw);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.55;pointer-events:none}
.orbit-system>i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.035);border-radius:50%}
.orbit-system>i:nth-child(2){inset:14%;border-color:rgba(235,28,58,.055)}
.orbit-system>i:nth-child(3){inset:30%;border-color:rgba(255,255,255,.045)}
.orbit-system>span{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:#d71920;box-shadow:0 0 18px rgba(235,28,58,.65);transform-origin:0 0}
.orbit-system>span:nth-of-type(1){animation:orbit-one 24s linear infinite}
.orbit-system>span:nth-of-type(2){opacity:.5;animation:orbit-two 32s linear infinite reverse}
.orbit-system>span:nth-of-type(3){width:3px;height:3px;opacity:.45;animation:orbit-three 18s linear infinite}
.orbit-system>span:nth-of-type(4){width:3px;height:3px;opacity:.32;animation:orbit-four 40s linear infinite reverse}
.light-sweep{position:fixed;z-index:-1;top:-45%;left:50%;width:24vw;height:190%;transform:translateX(-50%) rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.018),transparent);filter:blur(18px);animation:beam-drift 14s ease-in-out infinite alternate;pointer-events:none}
.js .brand,.js .status,.js .hero-mark,.js .eyebrow,.js h1,.js .intro,.js .products,.js .build-line,.js .progress-button,.js footer{opacity:0;transform:translateY(14px)}
body.is-ready .brand,body.is-ready .status,body.is-ready .hero-mark,body.is-ready .eyebrow,body.is-ready h1,body.is-ready .intro,body.is-ready .products,body.is-ready .build-line,body.is-ready .progress-button,body.is-ready footer{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
body.is-ready .brand,body.is-ready .status{transition-delay:.08s}
body.is-ready .hero-mark{transition-delay:.18s}
body.is-ready .eyebrow{transition-delay:.28s}
body.is-ready h1{transition-delay:.38s}
body.is-ready .intro{transition-delay:.52s}
body.is-ready .products{transition-delay:.62s}
body.is-ready .build-line{transition-delay:.7s}
body.is-ready .progress-button{transition-delay:.78s}
body.is-ready footer{transition-delay:.9s}
body.is-ready h1 span{animation:headline-sheen 9s ease-in-out 1.4s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes progress-travel{0%{transform:translateX(-100%);opacity:0}14%,86%{opacity:1}100%{transform:translateX(360%);opacity:0}}
@keyframes headline-sheen{0%,56%,100%{background-position:100% 50%}76%{background-position:0 50%}}
@keyframes beam-drift{from{transform:translateX(-85%) rotate(18deg)}to{transform:translateX(25%) rotate(18deg)}}
@keyframes orbit-one{from{transform:rotate(0) translateX(min(41vw,520px))}to{transform:rotate(360deg) translateX(min(41vw,520px))}}
@keyframes orbit-two{from{transform:rotate(65deg) translateX(min(29vw,370px))}to{transform:rotate(425deg) translateX(min(29vw,370px))}}
@keyframes orbit-three{from{transform:rotate(140deg) translateX(min(20vw,250px))}to{transform:rotate(500deg) translateX(min(20vw,250px))}}
@keyframes orbit-four{from{transform:rotate(230deg) translateX(min(41vw,520px))}to{transform:rotate(590deg) translateX(min(41vw,520px))}}
@media(max-width:620px){body:after{top:16%;width:105vw}header{top:1rem}.status{font-size:.54rem}.brand{font-size:.9rem}.brand-mark{width:40px;height:40px}.brand-mark img{width:33px;height:33px}main{align-items:center;padding-top:7rem}.hero-mark{width:62px;height:62px;margin-bottom:1.25rem;border-radius:20px}.hero-mark img{width:50px;height:50px}.eyebrow{font-size:.57rem}h1{font-size:clamp(4rem,19vw,5.7rem)}.intro{max-width:340px;font-size:.9rem}.products{flex-wrap:wrap;gap:.55rem;font-size:.53rem}.orbit-system{width:115vw}footer{align-items:flex-start;gap:1rem}footer>span:last-child{max-width:170px;text-align:right}}
@media(max-height:700px){main{padding-top:6.5rem}.intro{margin-top:1.4rem}.products{margin-top:1.4rem}.progress-button{margin-top:1.5rem}footer{position:absolute}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.status i,.build-line i,.orbit-system>span,.light-sweep,body.is-ready h1 span{animation:none}.progress-button,.progress-button svg{transition:none}.brand,.status,.hero-mark,.eyebrow,h1,.intro,.products,.build-line,.progress-button,footer{opacity:1;transform:none;transition:none!important}}
