:root { color-scheme: light; --ink: #111215; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: #f5f6f8; }
body { min-height: 100svh; overflow: hidden; cursor: default; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
main {
  position: relative; isolation: isolate; display: grid; min-height: 100svh; place-items: center; overflow: hidden;
  background: linear-gradient(145deg, #fafbfc 0%, #eef1f5 100%);
}
main::before, main::after {
  content: ""; position: absolute; z-index: -1; width: 58vw; height: 42vw; min-width: 460px; min-height: 330px;
  filter: blur(105px); opacity: .3; pointer-events: none; transform: rotate(-18deg);
}
main::before { top: -24%; right: -18%; background: #aacbff; }
main::after { left: -18%; bottom: -30%; background: #d7c8ff; }
.logo-stage {
  display: flex; width: min(42vw, 230px); align-items: center; justify-content: center; flex-direction: column; text-align: center;
  opacity: 0; transform: translateY(12px); filter: blur(10px);
  animation: reveal 900ms cubic-bezier(.22, 1, .36, 1) 120ms forwards;
}
.logo-frame { position: relative; width: 100%; aspect-ratio: 471 / 241; }
.logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(17,18,21,.08)); }
.logo-stage p {
  width: 100%; margin: 24px 0 0; color: var(--ink); font-size: clamp(12px, 1.15vw, 16px); text-align: center;
  font-weight: 520; letter-spacing: .12em; text-transform: lowercase;
}
@keyframes reveal { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@media (max-width: 600px) {
  .logo-stage { width: min(46vw, 190px); }
  .logo-stage p { margin-top: 20px; font-size: 12px; }
  main::before, main::after { width: 95vw; height: 72vw; filter: blur(82px); opacity: .26; }
}
@media (prefers-reduced-motion: reduce) { .logo-stage { opacity: 1; transform: none; filter: none; animation: none; } }