*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000;color:#f8f8f6;font-family:Arial,Helvetica,sans-serif}
body{min-height:100svh;overflow-x:hidden}
header{position:absolute;z-index:5;top:0;left:0;right:0;padding:58px 5vw 0;display:flex;justify-content:space-between;align-items:center}
.wordmark{display:flex;align-items:center;gap:.31em;color:#fff;text-decoration:none;font-size:28px;font-weight:300;line-height:1}
.wordmark .a{font-size:1.12em;transform:scaleX(.76) translateY(-.02em);margin-left:-.03em;margin-right:-.04em}
.contact{color:#fff;text-decoration:none;border:1px solid #4b4b4b;border-radius:7px;padding:13px 22px;font-size:12px;letter-spacing:.08em}
.hero{min-height:100svh;padding:210px 5vw 80px}
.descriptor{font-size:15px;letter-spacing:.29em;margin-bottom:42px}
.soon{display:flex;align-items:center;gap:13px;width:max-content;border:1px solid #303030;border-radius:999px;padding:12px 20px;font-size:13px;letter-spacing:.2em;margin-bottom:72px}
.soon i{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px #fff8;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55;box-shadow:0 0 18px 5px #fff5}}
h1{margin:0;font-size:clamp(60px,8.2vw,122px);line-height:.93;letter-spacing:-.048em;font-weight:300;max-width:1050px}
h1>span{display:block}
.engine{display:flex;justify-content:space-between;width:min(100%,790px);padding-top:.07em;letter-spacing:0}
.engine b{position:relative;font-weight:300;text-shadow:0 0 9px #fff,0 0 25px #fff6;animation:film 4.8s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.engine b:after{content:"";position:absolute;left:50%;top:78%;transform:translateX(-50%);width:.18em;height:1.25em;background:linear-gradient(#fffa,transparent);filter:blur(7px);opacity:.65}
@keyframes film{50%{text-shadow:0 0 14px #fff,0 0 38px #fff9}}

@media(max-width:700px){
 header{padding:46px 24px 0;align-items:center}
 .wordmark{font-size:18px;gap:.27em;white-space:nowrap}
 .contact{font-size:9px;padding:10px 13px;border-radius:6px}
 .hero{padding:188px 24px 50px}
 .descriptor{font-size:10px;letter-spacing:.27em;margin-bottom:52px}
 .soon{font-size:9px;padding:11px 15px;margin-bottom:55px;gap:10px}
 .soon i{width:7px;height:7px}
 h1{font-size:min(13.2vw,60px);line-height:.98;letter-spacing:-.052em;width:100%}
 h1>span{width:max-content;max-width:100%}
 .engine{width:100%;max-width:100%;padding-top:.10em}
 .engine b:after{height:1.35em}
}
@media(max-width:390px){
 header{padding-left:20px;padding-right:20px}
 .wordmark{font-size:16px}
 .contact{padding:9px 11px}
 .hero{padding-left:20px;padding-right:20px}
 h1{font-size:13vw}
}