:root {
  color-scheme: dark;
  --ink: #edf5f7;
  --muted: #8e9ca3;
  --line: rgba(202, 226, 230, .15);
  --aqua: #7cffdb;
  --blue: #77b8ff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  background: #070b12;
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
}

main {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px clamp(26px, 6vw, 96px) 25px;
}

.grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, black, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, black, transparent 80%);
}

.glow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  filter: blur(8px);
  border-radius: 50%;
}

.glow-one {
  top: 18%; left: 46%; width: min(60vw, 820px); height: min(60vw, 820px);
  background: radial-gradient(circle, rgba(63, 179, 168, .18), transparent 65%);
  transform: translate(-50%, -20%);
  animation: breathe 7s ease-in-out infinite;
}

.glow-two {
  right: -18%; bottom: -35%; width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(67, 106, 198, .15), transparent 62%);
}

nav, footer { display: flex; justify-content: space-between; align-items: center; }

.brand { color: var(--ink); display: inline-flex; gap: 11px; align-items: center; font-size: 14px; font-weight: 800; letter-spacing: .12em; text-decoration: none; }
.brand-muted { color: var(--aqua); margin: 0 2px; }
.mark { display: flex; gap: 3px; align-items: flex-end; height: 20px; }
.mark i { width: 4px; border-radius: 4px; display: block; background: linear-gradient(180deg, var(--aqua), #4d8bff); box-shadow: 0 0 12px rgba(124, 255, 219, .55); }
.mark i:nth-child(1) { height: 9px; }.mark i:nth-child(2) { height: 15px; }.mark i:nth-child(3) { height: 20px; }

.status, footer, .eyebrow, .soon { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .14em; }
.status { color: #a8babd; display: flex; align-items: center; gap: 8px; }
.status b { width: 6px; height: 6px; display: block; background: var(--aqua); border-radius: 50%; box-shadow: 0 0 12px var(--aqua); animation: blink 2.4s ease-in-out infinite; }

.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 60px 0 52px; }
.eyebrow { color: var(--aqua); margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.eyebrow span { height: 1px; width: 28px; background: var(--aqua); box-shadow: 0 0 10px var(--aqua); }
h1 { max-width: 850px; margin: 0; font-size: clamp(3.65rem, 9.5vw, 8.8rem); letter-spacing: -.075em; line-height: .92; font-weight: 800; }
h1 em { font-style: normal; color: transparent; background: linear-gradient(105deg, var(--aqua) 0%, #a8f2e3 40%, var(--blue) 100%); background-clip: text; -webkit-background-clip: text; }
.intro { color: #b5c1c5; font-size: clamp(1rem, 1.7vw, 1.2rem); letter-spacing: -.02em; margin: 29px 0 39px; }
.divider { width: min(410px, 78vw); height: 1px; background: rgba(202, 226, 230, .28); position: relative; overflow: hidden; }
.divider i { position: absolute; inset: 0; width: 26%; background: linear-gradient(90deg, transparent, var(--aqua), transparent); animation: scan 3.2s linear infinite; }
.soon { margin: 15px 0 0; color: var(--ink); font-weight: 500; }

footer { color: #829198; }
footer span:last-child { color: #62747d; }

@keyframes scan { from { transform: translateX(-120%); } to { transform: translateX(390%); } }
@keyframes blink { 50% { opacity: .35; box-shadow: none; } }
@keyframes breathe { 50% { opacity: .68; transform: translate(-50%, -20%) scale(1.08); } }

@media (max-width: 540px) {
  main { padding: 23px 22px 20px; }
  .status { font-size: 8px; letter-spacing: .1em; }
  .hero { padding: 35px 0; }
  footer { font-size: 8px; letter-spacing: .08em; }
}