@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Manrope:wght@400;500;600&display=swap');

:root { color-scheme: light; --ink: #182123; --muted: #566168; --blue: #2449d8; --paper: #e8edf1; }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 8px; }
::selection { background: #2449d8; color: white; }
.scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.artwork { position: absolute; inset: 9% -4% 5%; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); }
.artwork img { width: 100%; height: 100%; object-fit: contain; object-position: right center; mix-blend-mode: multiply; animation: levitate 14s ease-in-out infinite; }
.light { position: absolute; inset: -50%; opacity: .28; mix-blend-mode: soft-light; background: linear-gradient(110deg, transparent 40%, #fff 47%, transparent 55%); animation: light-pass 12s ease-in-out infinite; }
.page { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 38px 5.2vw 28px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: 'Manrope', sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -1.5px; }
.brand svg { width: 30px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; }
.brand-rails { font-weight: 400; }
.sign-in { display: inline-flex; gap: 28px; align-items: center; padding: 12px 0; font-size: 14px; border-bottom: 1px solid #18212360; transition: color .25s, border-color .25s; }
.sign-in span { font-size: 22px; line-height: 1; transition: transform .3s; }
.sign-in:hover { color: var(--blue); border-color: var(--blue); }
.sign-in:hover span { transform: translate(3px, -3px); }
main { align-self: center; padding: clamp(40px, 7vh, 84px) 0 clamp(50px, 8vh, 96px); max-width: 60%; }
.eyebrow { display: flex; gap: 10px; align-items: center; color: #3d4a51; font-size: 14px; letter-spacing: .03em; animation: appear 1.3s both; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px #2449d80a; }
h1 { margin: 29px 0 31px -5px; font-size: clamp(72px, 8.25vw, 150px); letter-spacing: -.07em; font-weight: 450; line-height: .98; }
h1 span { display: block; animation: appear 1.5s .15s both; }
h1 .italic { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; letter-spacing: -.075em; animation-delay: .3s; }
.intro { font-size: 18px; line-height: 1.6; letter-spacing: -.025em; color: var(--muted); animation: appear 1.5s .45s both; }
.coming { display: flex; align-items: center; gap: 14px; margin-top: 42px; color: var(--blue); font-size: 15px; animation: appear 1.5s .6s both; }
.coming-line { position: relative; display: block; height: 1px; width: 44px; background: #2449d840; overflow: hidden; }
.coming-line::after { content: ''; position: absolute; inset: 0; background: var(--blue); animation: line-run 3s ease-in-out infinite; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #18212325; padding-top: 23px; font-size: 12px; color: var(--muted); }
.footer-brand { font-size: 11px; letter-spacing: .19em; }
.motion-control { display: flex; align-items: center; gap: 16px; }
.motion-control button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 8px 0; font-size: 12px; }
.motion-control button span { padding-left: 7px; }
.rail-signal { display: grid; gap: 3px; width: 32px; overflow: hidden; }
.rail-signal i { position: relative; height: 1px; background: #56616840; }
.rail-signal i::after { content: ''; position: absolute; inset: 0; background: #566168; animation: line-run 3s ease-in-out infinite; }
.rail-signal i:nth-child(2)::after { animation-delay: .25s; }
.rail-signal i:nth-child(3)::after { animation-delay: .5s; }
@keyframes appear { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes levitate { 0%, 100% { transform: scale(1.025) translateY(0) rotate(-.4deg); } 50% { transform: scale(1.055) translateY(-12px) rotate(.65deg); } }
@keyframes light-pass { 0%, 100% { transform: translateX(-20%); } 50% { transform: translateX(30%); } }
@keyframes line-run { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
body.paused *, body.paused *::after { animation-play-state: paused !important; }
body.paused .artwork { transform: none; }
@media (min-aspect-ratio: 17/9) { .artwork img { object-position: center 42%; } main { padding: 64px 0; } h1 { font-size: min(8.1vw, 140px); } }
@media (max-width: 760px) {
  .page { min-height: 100svh; padding: 25px 26px 20px; }
  .brand { font-size: 23px; gap: 8px; }
  .brand svg { width: 24px; height: 30px; }
  .sign-in { font-size: 12px; gap: 10px; }
  .sign-in span { font-size: 20px; }
  .artwork { inset: 20% -22% -3% -22%; }
  .artwork img { object-fit: cover; object-position: 65% center; }
  .scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 4%, #e8edf1eb 21%, #e8edf180 39%, #e8edf100 61%); }
  main { align-self: start; max-width: 100%; padding: 65px 0 290px; }
  .eyebrow { font-size: 12px; gap: 9px; }
  h1 { margin-top: 26px; margin-bottom: 23px; font-size: clamp(66px, 12.8vw, 97px); }
  .intro { font-size: 16px; line-height: 1.5; }
  .coming { margin-top: 29px; font-size: 14px; }
  .footer { font-size: 11px; padding-top: 15px; gap: 16px; align-items: end; }
  .footer > span:first-child { max-width: 125px; line-height: 1.5; }
  .footer-brand { display: none; }
  .motion-control { gap: 10px; }
}
@media (max-width: 380px) { .page { padding-inline: 20px; } main { padding-top: 50px; } h1 { font-size: 62px; } }
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } .artwork { transform: none; } .motion-control { display: none; } }