* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; }
img { display: block; }
/* Coordinates taken directly from Figma frame 4:4 (1440 × 1119). */
.hero { position: relative; height: 1119px; width: 100%; overflow: hidden; }
.brand { position: absolute; top: 59px; left: calc(50% - 75px); width: 150px; height: 64.4089px; }
.brand img { height: 65px; }
h1 { position: absolute; top: 149px; left: calc(50% - 156px); margin: 0; width: 311px; height: 86px; }
.phone { position: absolute; top: 273.9777px; left: calc(50% - 160.0223px); width: 319.0342px; height: 633.0638px; }
.coming-soon { position: absolute; top: 946px; left: calc(50% - 131px); margin: 0; }
.beta-link { position: absolute; top: 990px; left: 50%; width: 280px; min-height: 44px; margin-left: -140px; display: flex; align-items: center; justify-content: center; border: 1px solid #292929; border-radius: 999px; padding: 8px 18px; background: #111; color: #ff213b; font-size: 15px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.beta-link:hover { background: #191919; border-color: #454545; }
.beta-link:active { transform: scale(.98); }
.page-footer { width: min(calc(100% - 32px), 820px); min-height: 68px; margin: 0 auto; padding: 18px 0 24px; border-top: 1px solid #252525; color: #a1a1a6; font-size: 13px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.page-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.page-footer a { color: #a1a1a6; text-decoration: none; }
.page-footer a:hover { color: #ff6578; }
@keyframes hero-reveal {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.brand, h1, .phone, .coming-soon, .beta-link {
  animation: hero-reveal 700ms cubic-bezier(.2, .7, .25, 1) both;
}
h1 { animation-delay: 120ms; }
.phone { animation-delay: 240ms; }
.coming-soon { animation-delay: 360ms; }
.beta-link { animation-delay: 480ms; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid #ff213b; outline-offset: 6px; }
.beta-panel { width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; background: #151515; color: white; border: 1px solid #333; border-radius: 16px; }
.beta-panel::backdrop { background: #000b; backdrop-filter: blur(8px); }
.beta-panel h2 { margin: 0 24px 16px 0; font-size: 24px; font-weight: 500; }
.beta-panel p { line-height: 1.5; color: #aaa; }
.close-dialog { position: absolute; top: 10px; right: 14px; color: white; background: none; border: none; font-size: 28px; cursor: pointer; }
.beta-form-embed { display: block; width: 100%; min-height: 251px; border: 0; }
.form-note { font-size: 13px; }
.form-note a { color: #ff6578; }
@media (max-width: 350px) { .hero { transform-origin: top center; zoom: .9; } }
@media (prefers-reduced-motion: reduce) {
  .brand, h1, .phone, .coming-soon, .beta-link {
    animation: none;
    opacity: 1;
    transform: none;
  }
}