.topbar{transition:background-color .3s ease,border-color .3s ease,transform .3s ease;border-bottom:1px solid transparent}
.topbar.is-solid{background:rgba(15,16,19,.85);border-bottom-color:transparent;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.topbar-inner{height:76px}
.logo{gap:12px;font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:-.06em}
.logo img{height:24px;transition:transform .2s ease}
.logo:hover img{filter:brightness(0) invert(1);transform:rotate(-6deg)}
.logo:hover .logo-char{color:inherit}
.logo .logo-char:nth-child(n+4){color:var(--dim)}
.logo.is-playing img{animation:none}

.hero{position:relative;padding:150px 0 0;overflow:hidden}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:var(--noise)}
.hero>.container,.page-hero>.container{position:relative;z-index:1}
.hero .display{font-size:clamp(1.9rem,4.8vw,3.9rem);line-height:1.42;margin:0 auto 26px}
.typeline{max-width:520px;margin:0 auto 34px;font-size:15.5px;line-height:1.7;color:var(--dim)}
.caret{width:.55em;height:1.1em;border-radius:0;background:var(--accent);opacity:.9}
.hero-actions{gap:12px;margin-bottom:84px}
.shots{-webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
.shot{border-radius:0;box-shadow:0 0 0 1px var(--line-2),var(--shot-shadow)}

.feature{position:relative;padding:110px 0;border-top:none}
.feature-text .display{margin-bottom:22px}
.feature-grid{gap:72px}

.privacy{padding:110px 0;border-top:none}
.privacy .lead{margin:0 auto 72px}
.facts{gap:12px;border:none;background:transparent}
.fact{padding:30px 28px;border-right:none;transition:background-color .2s ease}
.fact:last-child{border-right:none}
.fact{background:var(--bg-elev)}
.fact:hover{background:var(--bg-elev-2)}
.fact-icon{width:28px;height:28px;margin-bottom:22px}
.fact-title{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:10px}
.fact-text{font-size:14px;line-height:1.65}

.cta{position:relative;padding:110px 0;border-top:none}
.cta .display{margin-bottom:18px}
.cta .lead{margin:0 auto 36px}

.footer{padding:0;border-top:none;font-size:14px}
.footer-inner{min-height:88px;padding-top:24px;padding-bottom:24px}
.footer-links{gap:28px}
.footer-links a{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:-.02em;color:rgba(238,241,246,.45);transition:color .2s ease}
.footer-links a:hover{color:var(--text)}
.footer-inner>span{font-family:var(--font-mono);font-size:11px;color:var(--dim)}

.page-hero{position:relative;padding:160px 0 80px;overflow:hidden}
.platforms{width:min(calc(var(--maxw) - 64px),calc(100% - 40px));gap:12px;padding:0;border:none;background:transparent;margin-bottom:120px}
.platform{border:none;border-radius:0;background:var(--bg-elev);padding:28px 24px;transition:background-color .2s ease}
.platform:last-child{border-right:none}
.platform:hover{transform:none;border-color:var(--line);background:var(--bg-elev-2)}
.platform.is-featured{background:var(--bg-elev-2);box-shadow:inset 0 2px 0 var(--accent)}
.platform-icon{color:var(--accent)}
.platform-name{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:8px}
.platform-text{font-size:14px;line-height:1.6}
.platform-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.specs{border-top:none}
.spec-title{font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.spec-list{font-size:14px}
.spec-list li::before{border-radius:0;width:6px;height:6px}

.auth{position:relative;overflow:hidden}
.auth-box{position:relative;z-index:1;max-width:460px}
.auth-title{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.3rem);font-weight:800;line-height:1.45;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:14px}
.auth-sub{font-size:15px;line-height:1.6;color:var(--dim);margin-bottom:34px}
.auth-step{display:inline-block;padding:4px 10px;background:var(--bone);color:var(--bone-ink);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;transform:rotate(-2deg)}
.auth-links{font-size:14px}

@media (max-width:900px){
  .facts{grid-template-columns:1fr}
}
@media (max-width:500px){
  .hero{padding-top:120px}
  .page-hero{padding:120px 0 56px}
}

.logo-mark{width:20px;height:18px;flex-shrink:0;fill:currentColor}
.logo-eyes-open{opacity:0}
.logo.is-playing .logo-char{animation:none}
.logo.is-playing .logo-eyes-open{animation:logo-peek 1.1s linear}
.logo.is-playing .logo-eyes-closed{animation:logo-shut 1.1s linear}
@keyframes logo-peek{0%,39.9%{opacity:1}40%,54.9%{opacity:0}55%,89.9%{opacity:1}90%,100%{opacity:0}}
@keyframes logo-shut{0%,39.9%{opacity:0}40%,54.9%{opacity:1}55%,89.9%{opacity:0}90%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.logo.is-playing :is(.logo-eyes-open,.logo-eyes-closed){animation:none}}