:root {
  color-scheme: dark;
  --bg: #02070d;
  --text: #f4f7fb;
  --muted: rgba(229, 237, 246, .68);
  --faint: rgba(183, 205, 226, .16);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow: hidden;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(23, 70, 103, .16), transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(2, 11, 20, .08), rgba(1, 5, 10, .84) 68%),
    linear-gradient(180deg, #02070d 0%, #030a11 48%, #02060b 100%);
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0, 3, 8, .18) 63%, rgba(0, 2, 6, .7) 100%);
}

.atmosphere {
  position: absolute;
  z-index: -3;
  top: 19%;
  left: 50%;
  width: min(50vw, 780px);
  aspect-ratio: 1.8;
  transform: translateX(-50%) rotate(-7deg);
  filter: blur(22px) saturate(118%);
  opacity: .82;
  background:
    radial-gradient(ellipse at 47% 50%, rgba(255, 216, 178, .64) 0 2%, rgba(242, 145, 82, .31) 4%, transparent 15%),
    radial-gradient(ellipse at 55% 38%, rgba(108, 198, 255, .42), transparent 28%),
    radial-gradient(ellipse at 38% 62%, rgba(53, 123, 184, .26), transparent 32%),
    conic-gradient(from 80deg at 50% 50%, transparent, rgba(61, 143, 205, .22), transparent 40%, rgba(239, 110, 63, .18), transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 0 36%, transparent 78%);
  animation: drift 14s ease-in-out infinite alternate;
}

.stars { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.stars::before, .stars::after {
  content: "";
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.75);
  box-shadow:
    8vw 14vh rgba(255,255,255,.45), 18vw 9vh rgba(160,210,255,.38), 28vw 21vh rgba(255,255,255,.28),
    39vw 7vh rgba(255,255,255,.34), 47vw 29vh rgba(255,218,180,.42), 58vw 12vh rgba(160,210,255,.34),
    67vw 20vh rgba(255,255,255,.28), 77vw 8vh rgba(255,255,255,.5), 88vw 23vh rgba(255,218,180,.45),
    95vw 13vh rgba(255,255,255,.3), 12vw 66vh rgba(160,210,255,.3), 25vw 74vh rgba(255,255,255,.22),
    40vw 83vh rgba(255,255,255,.34), 53vw 72vh rgba(255,218,180,.25), 66vw 87vh rgba(160,210,255,.28),
    82vw 69vh rgba(255,255,255,.34), 92vw 82vh rgba(255,255,255,.24);
}
.stars::after { transform: scale(.55) translate(18vw, 12vh); opacity: .56; }
.stars-b { transform: rotate(180deg); opacity: .44; }

.blueprint {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  fill: none;
  stroke: rgba(135, 176, 207, .18);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.blueprint-left { left: 0; bottom: 6vh; width: min(31vw, 520px); height: 78vh; opacity: .9; }
.blueprint-right { right: -1vw; bottom: 4vh; width: min(39vw, 760px); height: 72vh; opacity: .86; }
.grid-lines { stroke-dasharray: 3 8; opacity: .44; }
.plan-lines, .building-lines { stroke: rgba(152, 188, 215, .28); }
.markers text, .measurements text {
  fill: rgba(156, 194, 222, .34);
  stroke: none;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-anchor: middle;
}
.markers circle { stroke: rgba(156, 194, 222, .34); }
.tree, .terrain-lines { stroke: rgba(126, 169, 200, .18); }

.content {
  position: relative;
  z-index: 3;
  width: min(1120px, 86vw);
  text-align: center;
  transform: translateY(-1.3vh);
}

.brand {
  margin: 0 0 clamp(52px, 8vh, 92px);
  font-size: clamp(.78rem, 1.15vw, 1.08rem);
  font-weight: 400;
  letter-spacing: clamp(.34rem, .62vw, .72rem);
  text-transform: lowercase;
  color: rgba(245, 249, 253, .82);
  text-shadow: 0 0 18px rgba(123, 190, 235, .13);
}
.brand span { color: rgba(174, 218, 250, .88); }

h1 {
  margin: 0;
  font-size: clamp(3.05rem, 7.45vw, 8rem);
  line-height: .98;
  font-weight: 300;
  letter-spacing: clamp(.42rem, 1.32vw, 1.28rem);
  white-space: nowrap;
  color: #fbfdff;
  text-shadow: 0 0 7px rgba(255,255,255,.42), 0 0 34px rgba(123,182,229,.18);
}

.subtitle {
  margin: clamp(30px, 5.3vh, 54px) auto 0;
  font-size: clamp(1rem, 1.45vw, 1.55rem);
  line-height: 1.5;
  font-weight: 350;
  color: rgba(245, 248, 251, .88);
}

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(9px, 1.3vw, 22px);
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  font-size: clamp(.91rem, 1.25vw, 1.28rem);
  color: var(--muted);
  letter-spacing: .01em;
}
.features b { font-weight: 400; color: rgba(226, 238, 248, .58); }

.signal {
  position: absolute;
  left: 50%;
  width: 90px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(204,228,245,.42), transparent);
}
.signal::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(200,230,250,.8), 0 0 28px 6px rgba(242,160,102,.2);
}
.signal-top { top: clamp(74px, 11.8vh, 126px); }
.signal-bottom { bottom: clamp(82px, 12vh, 132px); }

.footer-note {
  margin: clamp(118px, 15vh, 158px) 0 0;
  font-size: clamp(.82rem, 1.02vw, 1.04rem);
  color: rgba(229, 236, 244, .68);
  letter-spacing: .01em;
}

@keyframes drift {
  from { transform: translateX(-50%) rotate(-8deg) scale(.96); opacity: .7; }
  to { transform: translateX(-50%) rotate(-4deg) scale(1.06); opacity: .9; }
}

@media (max-width: 900px) {
  .content { width: min(92vw, 720px); transform: translateY(-2vh); }
  .blueprint-left { width: 48vw; left: -13vw; opacity: .62; }
  .blueprint-right { width: 63vw; right: -25vw; opacity: .58; }
  .brand { margin-bottom: 9vh; }
  h1 { letter-spacing: clamp(.22rem, 1.6vw, .62rem); }
  .signal-top { top: 10vh; }
}

@media (max-width: 620px) {
  body { overflow: auto; }
  .coming-soon { min-height: 100svh; padding: 42px 18px 34px; }
  .content { width: 100%; transform: none; }
  .brand { margin-bottom: 15vh; font-size: .72rem; letter-spacing: .3rem; }
  h1 { font-size: clamp(2.55rem, 13vw, 4rem); letter-spacing: .22rem; white-space: normal; }
  .subtitle { margin-top: 28px; font-size: .98rem; }
  .features { margin-top: 16px; gap: 7px 10px; font-size: .85rem; }
  .features b { opacity: .7; }
  .footer-note { margin-top: 15vh; padding-inline: 14px; font-size: .78rem; line-height: 1.5; }
  .signal-top { top: 16vh; width: 62px; }
  .signal-bottom { bottom: 11.5vh; width: 62px; }
  .blueprint-left { width: 78vw; height: 55vh; left: -36vw; bottom: 7vh; opacity: .46; }
  .blueprint-right { width: 104vw; height: 48vh; right: -57vw; bottom: 4vh; opacity: .43; }
  .atmosphere { top: 25%; width: 110vw; opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere { animation: none; }
}