:root { color-scheme: dark; --paper: #eef0ed; --glow-x: 50%; --glow-y: 38%; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #030405; }
body { color: var(--paper); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; isolation: isolate; }
::selection { color: #030405; background: #dce1e2; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.atmosphere, #scene, .vignette { position: fixed; inset: 0; pointer-events: none; }
.atmosphere { z-index: 0; background: radial-gradient(ellipse 40vw 35vh at var(--glow-x) var(--glow-y), #1b2027 0%, #0c1015 35%, #030405 78%); }
#scene { z-index: 1; }
#scene canvas { display: block; width: 100%; height: 100%; }
.vignette { z-index: 2; background: radial-gradient(ellipse at 50% 42%, transparent 20%, #0008 100%); }
.page {
  width: 100%; height: 100%; height: 100svh; height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) clamp(24px, 5vw, 96px) max(24px, env(safe-area-inset-bottom));
  display: grid; grid-template-rows: minmax(0, 1fr) auto; position: relative; z-index: 3;
}
.main { min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(16px, 3vh, 32px) 0 clamp(24px, 4vh, 44px); }
.logo-space { flex: 0 1 auto; position: relative; min-height: 0; width: min(52vw, 510px); height: min(42svh, 340px); }
#logo-frame { position: absolute; inset: 0; pointer-events: none; }
.fallback { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 28px 34px #000); }
.has-webgl .fallback { visibility: hidden; }
.hero-copy { flex: 0 0 auto; max-width: 100%; margin-top: clamp(22px, 3.7vh, 38px); text-align: center; position: relative; transform: translateZ(0); }
h1 { margin: 0; position: relative; line-height: 1; }
.wordmark { display: block; width: min(70vw, 740px); max-width: 100%; height: auto; filter: drop-shadow(0 3px 10px #0008); }
.coming { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(26px, 4vh, 40px); color: #c0c8cc; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .28em; padding-left: .28em; }
.status-light { width: 4px; height: 4px; border-radius: 50%; background: #d9e4e9; box-shadow: 0 0 10px #b6d1e066; }
.footer { width: min(100%, 1000px); margin-inline: auto; position: relative; transform: translateZ(0); }
.contact { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid #c6d0d51c; padding-top: 18px; }
.contact h2 { margin: 0; color: #98a2a8; font-size: 9px; font-weight: 500; letter-spacing: .24em; line-height: 1.5; }
.contact-details { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 42px); font-style: normal; }
.contact-details a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 2px; color: #c3cbce; font-size: 12px; letter-spacing: .015em; line-height: 1.6; text-decoration: none; transition: color .2s ease; }
.contact-details svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #818e97; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.contact-details .link-arrow { width: 12px; height: 12px; margin-left: 3px; opacity: .65; transition: transform .2s ease; }
.contact-details a:hover { color: #fff; }
.contact-details a:hover .link-arrow { transform: translate(2px, -2px); }
.contact-details a:focus-visible { outline: 1px solid #b5c0c6; outline-offset: 5px; border-radius: 2px; }
.copyright { margin-top: 18px; text-align: center; color: #727b81; font-size: 8px; letter-spacing: .15em; line-height: 1.6; }
@media (min-width: 1800px) {
  .logo-space { width: 590px; height: 380px; }
  .wordmark { width: 860px; }
  .coming { font-size: 12px; }
  .contact-details a { font-size: 13px; }
  .copyright { font-size: 9px; }
}
@media (max-width: 700px) {
  .contact h2 { font-size: 8px; letter-spacing: .18em; }
  .contact-details { gap: 20px; }
  .contact-details a { font-size: 11px; }
  .contact-details .link-arrow { display: none; }
}
@media (max-width: 600px) {
  .page { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .main { padding-top: 16px; padding-bottom: 30px; }
  .logo-space { width: min(88vw, 420px); height: min(34svh, 270px); }
  .hero-copy { width: 100%; margin-top: 24px; }
  .wordmark { width: 100%; }
  .coming { font-size: 10px; letter-spacing: .25em; margin-top: 28px; }
  .atmosphere { background: radial-gradient(ellipse 72vw 32vh at var(--glow-x) var(--glow-y), #1b2027 0%, #0c1015 35%, #030405 80%); }
  .contact { display: block; padding-top: 16px; text-align: center; }
  .contact h2 { margin-bottom: 8px; }
  .contact-details { flex-direction: column; gap: 0; }
  .contact-details a { font-size: 12px; padding: 7px 2px; }
  .contact-details svg { width: 14px; height: 14px; }
  .copyright { margin-top: 16px; font-size: 7px; }
}
@media (max-height: 650px) and (max-width: 600px) {
  .page { padding-top: 16px; padding-bottom: 14px; }
  .main { padding-top: 8px; padding-bottom: 24px; }
  .hero-copy { margin-top: 20px; }
  .coming { margin-top: 22px; }
  .contact { padding-top: 12px; }
  .contact h2 { margin-bottom: 4px; }
  .contact-details a { padding: 5px 2px; font-size: 11px; }
  .copyright { margin-top: 12px; }
}
@media (max-height: 620px) and (min-width: 601px) {
  .main { padding: 8px 0 20px; }
  .logo-space { height: min(38svh, 250px); width: min(45vw, 430px); }
  .wordmark { width: min(65vw, 650px); }
  .hero-copy { margin-top: 20px; }
  .coming { margin-top: 22px; font-size: 10px; }
  .contact { padding-top: 12px; }
  .copyright { margin-top: 12px; }
}
@media (max-height: 400px) and (min-aspect-ratio: 3/2) {
  .page { padding-top: 16px; padding-bottom: 12px; }
  .main { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px; padding: 6px 0 24px; }
  .logo-space { width: 100%; height: min(62svh, 240px); max-height: 100%; }
  .hero-copy { width: 100%; margin-top: 0; }
  .wordmark { width: 100%; }
  .coming { font-size: 9px; margin-top: 22px; }
  .contact { display: flex; padding-top: 10px; gap: 16px; text-align: left; }
  .contact h2 { margin-bottom: 0; font-size: 8px; }
  .contact-details { flex-direction: row; gap: 20px; }
  .contact-details a { padding: 4px 2px; font-size: 10px; gap: 7px; }
  .contact-details svg { width: 12px; height: 12px; }
  .contact-details .link-arrow { display: none; }
  .copyright { margin-top: 10px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }