:root{
  --bg:#05070a;
  --ink:#e9f1f8;
  --mut:#a7b6c8;
  --a:#9fe9ff;
  --b:#c7caff;
  --sans:ui-sans-serif,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --s-1:clamp(.9rem,.85rem + .2vw,1rem);
  --s0:clamp(1rem,.95rem + .35vw,1.15rem);
  --s1:clamp(1.4rem,1.1rem + 1vw,1.9rem);
  --s2:clamp(2.2rem,1.6rem + 3.2vw,4rem);
  --x4:1rem;
  --x6:1.5rem;
  --x8:2rem;
  --x12:3rem;
  --x16:4rem;
  --x24:6rem;
  --x32:8rem;
  --x48:12rem;
  --content:min(1060px, calc(100vw - 2*var(--x16)));
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  color:var(--ink);
  font:400 var(--s0)/1.55 var(--sans);
  background:var(--bg);
}

a{
  color:inherit;
}

.bg-grad{
  z-index:-4;
  position:fixed;
  inset:0;
  background:
    radial-gradient(1100px 700px at 70% -30%, rgba(159,233,255,.10), transparent 60%),
    radial-gradient(900px 600px at 5% -15%, rgba(199,202,255,.09), transparent 55%);
}

.wireframe{
  z-index:-3;
  opacity:.05;
  position:fixed;
  inset:0;
}

.wireframe svg{
  width:100%;
  height:100%;
  display:block;
}

.wireframe svg path{
  stroke:#aab3bf;
}

.sunrise{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:50vh;
  pointer-events:none;
  z-index:-2;
  opacity:0;
  transition:opacity 1s ease;
  background:radial-gradient(1200px 260px at 50% 100%, rgba(200,240,255,.35), rgba(120,140,180,.18) 45%, transparent 80%);
  filter:blur(22px);
}

.sunrise.show{
  opacity:1;
}

.wrap{
  width:var(--content);
  margin:0 auto;
}

header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(8px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--x8) 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  color:var(--ink);
}

.brand img{
  height:28px;
  width:auto;
}

.word{
  letter-spacing:.14em;
  font-weight:700;
}

nav a{
  color:var(--mut);
  text-decoration:none;
  margin-left:1rem;
}

nav a:hover,
nav a[aria-current="page"]{
  color:var(--ink);
}

.hero{
  padding:var(--x48) 0 var(--x24);
}

.kicker{
  color:#d9f7ff;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:var(--s-1);
}

h1{
  font-size:var(--s2);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:.75rem 0 0;
}

.lead{
  max-width:66ch;
  color:var(--mut);
  margin-top:var(--x8);
}

.cta{
  margin-top:var(--x12);
  display:flex;
  align-items:center;
  gap:var(--x4);
  flex-wrap:wrap;
}

.link{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:.15rem;
}

.cta .link{
  margin-right:var(--x8);
}

.link:hover{
  border-bottom-color:rgba(255,255,255,.5);
}

section{
  padding:var(--x24) 0;
}

h2{
  font-size:var(--s1);
  margin:0 0 var(--x8);
}

p{
  margin:0 0 var(--x8);
}

ul{
  padding:0;
  margin:0;
  list-style:none;
}

li{
  margin:0 0 var(--x6);
}

.spacer{
  height:var(--x32);
}

footer{
  position:relative;
  z-index:1;
  padding:var(--x24) 0 var(--x32);
  color:var(--mut);
}

main{
  position:relative;
  z-index:1;
}

.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
}

#lc{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
}

body.nx .hero{
  padding:var(--x24) 0 var(--x12);
}

body.nx section{
  padding:var(--x12) 0;
}

body.nx .spacer{
  display:none;
}

@media (max-width:840px){
  :root{
    --content:calc(100vw - 2*var(--x8));
  }

  nav a{
    margin-left:.75rem;
    font-size:var(--s-1);
  }

  .hero{
    padding:var(--x32) 0 var(--x16);
  }

  body.nx .hero{
    padding:var(--x16) 0 var(--x8);
  }

  .cta .link{
    display:inline-block;
    margin-top:.5rem;
  }

  .footer-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
  }
}

@media (max-width:620px){
  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--x8);
  }

  header nav{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    padding-top:.15rem;
  }

  header nav a{
    margin-left:0;
  }

  .cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .cta .link{
    margin-right:0;
  }
}