:root {
  color-scheme: dark;
  --text: #f3f7fb;
  --muted: #aab6c6;
  --cyan: #42d8ff;
  --gold: #ffd166;
  --rose: #ff5c8a;
  --green: #6ee7b7;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    linear-gradient(180deg, #05070d 0%, #08111d 58%, #11131d 100%);
  color: var(--text);
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 78%);
}

.page-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: clamp(2rem, 8vw, 6.5rem);
  background:
    linear-gradient(145deg, rgba(10, 17, 29, 0.92), rgba(7, 9, 15, 0.76)),
    linear-gradient(90deg, rgba(66, 216, 255, 0.16), rgba(255, 209, 102, 0.08));
}

.hero::after {
  position: absolute;
  right: -10%;
  bottom: -18%;
  width: min(720px, 92vw);
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.sky-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-visual::before,
.sky-visual::after {
  position: absolute;
  content: "";
}

.sky-visual::before {
  right: 12%;
  top: 17%;
  width: min(320px, 48vw);
  aspect-ratio: 1;
  border: 1px solid rgba(66, 216, 255, 0.23);
  border-radius: 50%;
}

.sky-visual::after {
  right: 19%;
  top: 27%;
  width: min(168px, 30vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 209, 102, 0.24);
  border-radius: 50%;
}

.drone {
  position: absolute;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 20px currentColor, 0 0 38px currentColor;
}

.drone-1 { top: 15%; right: 22%; color: var(--cyan); }
.drone-2 { top: 24%; right: 13%; color: var(--gold); }
.drone-3 { top: 32%; right: 29%; color: var(--rose); }
.drone-4 { top: 40%; right: 18%; color: var(--green); }
.drone-5 { top: 50%; right: 31%; color: var(--cyan); }
.drone-6 { top: 58%; right: 16%; color: var(--gold); }
.drone-7 { top: 20%; right: 43%; color: var(--green); }
.drone-8 { top: 36%; right: 47%; color: var(--cyan); }
.drone-9 { top: 66%; right: 39%; color: var(--rose); }
.drone-10 { top: 70%; right: 23%; color: var(--cyan); }
.drone-11 { top: 12%; right: 34%; color: var(--gold); }
.drone-12 { top: 48%; right: 8%; color: var(--green); }

.eyebrow,
.intro,
.launch-note,
h1 {
  position: relative;
  z-index: 1;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--gold);
  font-size: clamp(0.76rem, 2vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.1rem, 10vw, 7.8rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.intro {
  max-width: 40rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.7;
}

.launch-note {
  width: min(100%, 560px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-left: 1.25rem;
  border-left: 3px solid var(--cyan);
}

.status-label {
  margin: 0 0 0.35rem;
  color: var(--cyan);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
}

.status-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 720px) {
  .sky-visual {
    opacity: 0.64;
  }

  .drone {
    width: 0.54rem;
    height: 0.54rem;
  }
}