* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #050505; color: #f2ede6; font-family: Inter, "PingFang SC", sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.65)); }

.top { position: fixed; z-index: 5; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; pointer-events: none; }
.top > * { pointer-events: auto; }
.logo { display: flex; align-items: center; gap: 9px; font-family: "Instrument Serif", serif; font-style: italic; font-size: 22px; }
.mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffb27a, #e8571c 60%, #6b1d05); box-shadow: 0 0 16px rgba(255,110,40,.7); }
.pill { display: flex; gap: 2px; padding: 4px; border-radius: 99px; background: rgba(28,28,28,.6); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); font-size: 12.5px; }
.pill a { padding: 7px 14px; border-radius: 99px; color: #bdb6ad; transition: color .25s, background .25s; }
.pill a:hover { color: #fff; }
.pill a.on { background: rgba(255,255,255,.12); color: #fff; }
.signup { padding: 8px 18px; border-radius: 99px; background: rgba(28,28,28,.6); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 500; backdrop-filter: blur(12px); transition: background .25s; }
.signup:hover { background: rgba(255,255,255,.14); }
.back { position: fixed; z-index: 5; left: 30px; top: 66px; font-size: 11.5px; color: #8d857b; letter-spacing: .02em; transition: color .2s; }
.back:hover { color: #ff9a5a; }

.hero { position: fixed; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
h1 { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; text-align: center; line-height: .98; letter-spacing: -.015em;
  font-size: clamp(54px, 8.2vw, 138px); text-shadow: 0 6px 60px rgba(0,0,0,.75); }
h1 span { display: block; opacity: 0; translate: 0 .35em; filter: blur(12px); animation: up 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
h1 .l2 { animation-delay: .18s; }
@keyframes up { to { opacity: 1; translate: 0 0; filter: blur(0); } }

.bot { position: fixed; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 26px 30px; pointer-events: none; }
.bot > * { pointer-events: auto; }
.bl { font-size: 11px; line-height: 1.6; color: #8d857b; }
.hint { color: #c9a38a; }
.br { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; font-size: 11.5px; line-height: 1.5; color: #b5aca1; }
.go { padding: 10px 20px; border-radius: 99px; background: linear-gradient(180deg, #f58a4b, #d9561f); color: #1b0700; font-weight: 600; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255,170,110,.5) inset, 0 10px 36px -6px rgba(240,100,30,.7); transition: transform .25s, box-shadow .25s; }
.go:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,200,150,.7) inset, 0 14px 44px -6px rgba(255,120,40,.9); }

@media (max-width: 760px) {
  .top { padding: 16px 16px; }
  .pill { display: none; }
  .back { left: 16px; top: 56px; }
  h1 { font-size: clamp(44px, 13vw, 64px); }
  .bot { padding: 18px 16px; flex-direction: column; align-items: stretch; gap: 16px; }
  .br { align-items: stretch; text-align: left; }
  .br p br { display: none; }
  .go { text-align: center; }
}
.hero::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(1100px, 92vw); height: min(420px, 46vh); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); pointer-events: none; }
@media (max-width: 760px) {
  .bot { background: linear-gradient(transparent, rgba(5,5,5,.82) 38%); padding-top: 70px; }
}