:root {
  color-scheme: dark;
  --ink: #eaf5fa;
  --muted: #a8c4d3;
  --aqua: #49bfd9;
  --blue: #137aa1;
  --night: #071826;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(ellipse 70% 50% at 10% 108%, rgba(27, 124, 157, .5), transparent 72%),
    radial-gradient(ellipse 65% 45% at 88% 5%, rgba(56, 146, 177, .25), transparent 70%),
    linear-gradient(135deg, #071523 0%, #0a2234 48%, #071b2b 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image: linear-gradient(rgba(255,255,255,.027) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.027) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.shell {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 3rem;
  max-width: 1400px;
  margin: auto;
  padding: clamp(1.5rem, 5vw, 5rem);
}

.brand { display: inline-flex; align-items: center; gap: .85rem; font-size: .85rem; font-weight: 800; letter-spacing: .28em; }
.mark { width: 4.5rem; overflow: visible; fill: var(--aqua); }
.mark .baseline { stroke: var(--aqua); stroke-width: 2.5; fill: none; }

.hero { align-self: center; max-width: 900px; padding: 4rem 0 7rem; }
.eyebrow { margin: 0 0 1.3rem; color: var(--aqua); font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; max-width: 13ch; font-size: clamp(3.2rem, 8vw, 7.8rem); line-height: .94; letter-spacing: -.075em; }
h1 em { color: var(--aqua); font-style: normal; }
.intro { max-width: 38rem; margin: 2rem 0 .4rem; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.6; }
.soon { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 700; }

footer { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
.divider { width: .25rem; height: .25rem; border-radius: 50%; background: var(--aqua); }

@media (max-width: 560px) {
  .shell { gap: 2rem; }
  .hero { padding: 2.5rem 0 4rem; }
  h1 { letter-spacing: -.06em; }
}