:root {
  color-scheme: dark;
  font-family: "Plus Jakarta Sans", "Avenir Next", Inter, system-ui, sans-serif;
  color: #f4f4f5;
  background: #101010;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background:
    radial-gradient(circle at 42% 28%, rgba(0, 226, 232, .1), transparent 24rem),
    radial-gradient(circle at 58% 42%, rgba(93, 48, 255, .1), transparent 28rem),
    #101010;
}

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}

.hero { max-width: 52rem; text-align: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.5rem;
  padding: .45rem .9rem;
  border: 1px solid #3f3f46;
  border-radius: 999px;
  background: #18181b;
  color: #22d3ee;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.badge span {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 1rem rgba(34, 211, 238, .55);
}

h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 8vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

h1 strong {
  color: #22d3ee;
  background: linear-gradient(105deg, #20e7e0 10%, #168cf5 55%, #7048ff 95%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: inherit;
}

.summary {
  max-width: 38rem;
  margin: 1.5rem auto 0;
  color: #a1a1aa;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1.7;
}

.status {
  display: inline-block;
  margin: 2rem 0 0;
  padding: .75rem 1.15rem;
  border: 1px solid rgba(34, 211, 238, .28);
  border-radius: .75rem;
  background: linear-gradient(115deg, rgba(32, 231, 224, .09), rgba(112, 72, 255, .09));
  color: #67e8f9;
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: .04em;
}

@media (max-width: 32rem) {
  main { padding-inline: 1rem; }
  h1 { letter-spacing: -.035em; }
}