:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #050c12;
  color: #f2f5f7;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; margin: 0; }
body { background: #050c12; }
.landing {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse 58% 42% at 52% 68%, #0d1d27 0%, #071017 52%, #050b10 100%);
}
.landscape { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.terrain-art { display: block; width: 100%; height: 100%; }
.content {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(11.4svh, calc(env(safe-area-inset-top) + 32px)) 24px max(8svh, calc(env(safe-area-inset-bottom) + 24px));
  text-align: center;
}
.brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.brand-mark { width: 84px; height: 52px; stroke: #8fc9f3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font-size: 27px; font-weight: 300; letter-spacing: .13em; line-height: 1; padding-left: .13em; }
.intro { margin-top: clamp(56px, 8.4svh, 86px); }
h1 { font-size: clamp(42px, 4.7vw, 78px); font-weight: 300; letter-spacing: -.045em; line-height: 1.08; margin: 0; }
.intro p { color: #a7b4c1; font-size: clamp(17px, 1.48vw, 24px); font-weight: 300; line-height: 1.5; margin: 16px 0 0; }
.status { display: flex; align-items: center; gap: 20px; margin-top: auto; color: #8194a3; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
.status::before, .status::after { content: ""; display: block; width: 42px; height: 1px; background: #5a6c78; opacity: .65; }
@media (max-width: 600px) {
  .content { padding-top: max(12svh, calc(env(safe-area-inset-top) + 32px)); padding-left: 20px; padding-right: 20px; }
  .brand-mark { width: 72px; height: 44px; }
  .brand-name { font-size: 22px; }
  .intro { margin-top: clamp(58px, 9svh, 84px); }
  h1 { font-size: clamp(39px, 9vw, 54px); }
  .intro p { font-size: 16px; }
  .status { font-size: 9px; gap: 14px; }
  .status::before, .status::after { width: 30px; }
}
@media (max-height: 580px) {
  .content { min-height: 580px; padding-top: 42px; padding-bottom: 30px; }
  .intro { margin-top: 46px; }
}