:root { color-scheme: dark; --ink: #090a09; --ivory: #f1ede4; --soft: #c9c4ba; --gold: #e7b65f; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); scroll-behavior: smooth; }
body.splash { margin: 0; min-height: 100svh; background: var(--ink); color: var(--ivory); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
.splash-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.splash-portrait, .splash-current, .splash-light { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.splash-content { position: relative; z-index: 1; width: 38.3%; max-width: 660px; min-height: 100svh; margin-left: 5.4vw; padding: 22.5vh 0 8vh; }
.splash h1, .splash h2, .splash h3, .splash p { margin: 0; }
.splash-wordmark { display: block; width: 100%; height: auto; }
.splash-values { margin-top: 14px !important; color: var(--soft); font-size: clamp(22px, 2.25vw, 36px); line-height: 1.3; letter-spacing: -.025em; }
.splash-coming { margin: 62px 0 44px !important; width: 58%; max-width: 390px; }
.splash-coming img { display: block; width: 100%; height: auto; }
.splash h3 { margin-bottom: 8px; color: var(--soft); font-size: 16px; line-height: 1.5; font-weight: 400; }
.splash-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 14px; }
.splash input, .splash button { min-width: 0; min-height: 58px; border: 1px solid #666152; border-radius: 8px; padding: 14px 18px; font: inherit; }
.splash input { width: 100%; color: var(--ivory); background: #151616e8; }
.splash input::placeholder { color: #b3b0a9; opacity: 1; }
.splash button { border-color: var(--gold); background: var(--gold); color: #17130c; font-weight: 600; cursor: pointer; transition: background-color .18s; }
.splash button:hover { background: #f3c978; }
.splash button:disabled { opacity: .65; cursor: wait; }
.splash button.splash-enter { border-color: #c9c4ba; background: #090a098c; color: var(--ivory); }
.splash button.splash-enter:hover { background: #2b2821; }
.splash :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.splash-consent { margin-top: 10px !important; max-width: 65ch; color: #b3afa5; font-size: 12px; line-height: 1.55; }
.splash a { color: var(--soft); text-underline-offset: 3px; }
.splash a:hover { color: var(--ivory); }
.splash-access { border-top: 1px solid #69604a99; padding-top: 32px; margin-top: 30px; }
.splash-message { color: var(--ivory); font-size: 14px; line-height: 1.5; }
.splash-message:empty { display: none; }
.splash-message:not(:empty) { margin-top: 12px; }
.splash-message--error { color: #ffcdad; }
.splash-trap, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 1800px) { .splash-content { margin-left: max(6vw, calc((100vw - 1600px) / 2)); } }
@media (max-height: 820px) and (min-width: 901px) { .splash-content { padding-top: 12vh; } .splash-coming { margin-top: 42px !important; margin-bottom: 30px !important; } .splash-access { margin-top: 22px; padding-top: 22px; } }
@media (max-width: 1100px) and (min-width: 901px) { .splash-content { width: 47%; margin-left: 4vw; } .splash-form-row { grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; } .splash-values { font-size: 26px; } }
@media (max-width: 900px) {
  .splash-scene { position: absolute; height: 680px; }
  .splash-portrait, .splash-current, .splash-light { width: 148%; max-width: none; left: -48%; object-position: right top; }
  .splash-scene { mask-image: linear-gradient(#000 55%, transparent 100%); }
  .splash-content { width: min(580px, calc(100% - 48px)); min-height: 100svh; margin: 0 auto; padding: 42px 0; }
  .splash header { max-width: 470px; }
  .splash-wordmark { width: min(100%, 470px); }
  .splash-values { font-size: clamp(22px, 4vw, 30px); }
  .splash-coming { width: 260px; max-width: 82%; margin: 380px 0 30px !important; }
  #signup, .splash-access { position: relative; }
  .splash-access { margin-top: 26px; padding-top: 26px; }
}
@media (max-width: 420px) { .splash-content { width: calc(100% - 40px); } .splash-portrait, .splash-current, .splash-light { width: 100%; left: 0; object-position: 85% top; } .splash-coming { margin-top: 340px !important; } .splash-form-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; } .splash input, .splash button { padding: 12px; min-height: 52px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .splash button { transition: none; } }