:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070914;
  color: #f7f6f2;
}

* { box-sizing: border-box; }

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

body {
  min-height: 100svh;
  background: #070914;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(4, 6, 18, .62), transparent 52%),
              radial-gradient(circle at 75% 25%, transparent, rgba(3, 4, 12, .34) 75%);
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.masthead, main, footer {
  position: relative;
  z-index: 1;
}

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.7rem) clamp(1.5rem, 5vw, 5rem);
}

.mark {
  color: inherit;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 760;
  letter-spacing: -.06em;
}

.mark span { color: #a9ffcb; }

.eyebrow, .kicker, footer {
  text-transform: uppercase;
  letter-spacing: .19em;
  font-size: .64rem;
  font-weight: 650;
}

.eyebrow { margin: 0; opacity: .54; }

main {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 5rem clamp(1.5rem, 9vw, 9rem);
}

.hero { max-width: 48rem; }

.kicker {
  color: #a9ffcb;
  margin: 0 0 1.4rem;
}

h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.4rem, 12vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -.075em;
  line-height: .72;
  text-wrap: balance;
}

h1 em {
  margin-left: .32em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 246, 242, .82);
  font-weight: 400;
}

.intro {
  max-width: 33rem;
  margin: clamp(2rem, 5vw, 4rem) 0 0 .45rem;
  color: rgba(247, 246, 242, .68);
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  line-height: 1.7;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.7rem) clamp(1.5rem, 5vw, 5rem);
  color: rgba(247, 246, 242, .48);
}

footer p { margin: 0; }

.pulse {
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .7rem;
  border-radius: 50%;
  background: #a9ffcb;
  box-shadow: 0 0 0 0 rgba(169, 255, 203, .5);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 .65rem rgba(169, 255, 203, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 255, 203, 0); }
}

noscript {
  position: fixed;
  z-index: 4;
  inset: auto 1rem 1rem;
  padding: 1rem;
  background: #111528;
}

@media (max-width: 620px) {
  h1 { font-size: clamp(4rem, 23vw, 7rem); }
  .hero { transform: translateY(-2vh); }
  .intro { max-width: 24rem; }
  footer p:last-child { display: none; }
  .eyebrow { letter-spacing: .12em; }
}

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