:root {
  color-scheme: dark;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --bg: #050507;
  --text: #ffffff;
  --muted: rgba(255,255,255,.55);
  --purple: #8f62ff;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

.coming-soon{

  position:relative;

  min-height:100vh;

  overflow:hidden;

  background:
  radial-gradient(circle at 72% 22%,rgba(126,89,255,.16),transparent 19%),
  radial-gradient(circle at 25% 8%,rgba(90,40,255,.08),transparent 18%),
  linear-gradient(135deg,#050507 0%,#09090d 55%,#050507 100%);
}

.hero-stage{

  position:relative;

  min-height:100vh;

  display:grid;
  grid-template-columns:1fr 1fr;

  align-items:center;

  gap:80px;

  padding:72px;

  overflow:hidden;
}

.hero-stage::before{

  content:"";

  position:absolute;
  inset:0;

  opacity:.20;

  pointer-events:none;

  background-image:
  linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

  background-size:80px 80px;

  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

.background-glow{

  position:absolute;

  right:8%;
  top:50%;

  transform:translateY(-50%);

  width:620px;
  height:620px;

  border-radius:50%;

  background:rgba(128,86,255,.20);

  filter:blur(150px);

  pointer-events:none;
}

.content{

  position:relative;

  z-index:2;

  max-width:680px;
}

.eyebrow{

  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-bottom:30px;

  padding:9px 15px;

  border-radius:999px;

  border:1px solid rgba(143,98,255,.28);

  background:rgba(143,98,255,.06);

  color:#c6b2ff;

  font-size:12px;

  letter-spacing:.25em;

  font-weight:700;
}

.eyebrow::before{

  content:"✦";
}

h1{

  font-size:clamp(88px,12vw,180px);

  font-weight:700;

  line-height:.82;

  letter-spacing:.12em;

  color:transparent;

  background:
  linear-gradient(
  180deg,
  #fff 0%,
  #d7d7df 55%,
  #868191 100%);

  -webkit-background-clip:text;
  background-clip:text;

  text-shadow:
  0 10px 70px rgba(120,70,255,.14);
}

.tagline{

  margin-top:34px;

  font-size:clamp(24px,3vw,44px);

  line-height:1.08;

  font-weight:500;

  letter-spacing:-.03em;
}

.description{

  margin-top:26px;

  max-width:560px;

  color:var(--muted);

  font-size:20px;

  line-height:1.75;
}

.actions{

  margin-top:42px;

  display:flex;

  width:100%;
}

.primary-button{

  display:flex;

  align-items:center;

  justify-content:center;

  height:56px;

  padding:0 28px;

  border-radius:999px;

  background:white;

  color:black;

  font-weight:700;

  transition:.25s;

  border:0;

  font:inherit;

  cursor:pointer;
}

.primary-button:hover{

  transform:translateY(-3px);

  box-shadow:
  0 16px 38px rgba(115,70,255,.25);
}

.primary-button:focus-visible,
.waitlist-input:focus-visible,
.waitlist-submit:focus-visible{

  outline:2px solid #c6b2ff;

  outline-offset:4px;
}

.visually-hidden{

  position:absolute;

  width:1px;
  height:1px;

  padding:0;
  margin:-1px;

  overflow:hidden;

  clip:rect(0,0,0,0);
  white-space:nowrap;

  border:0;
}

.waitlist{

  width:min(100%,620px);
}

.waitlist-trigger{

  min-width:256px;
}

.waitlist-trigger.is-leaving{

  opacity:0;

  transform:translateY(-4px);
}

.waitlist-panel{

  opacity:0;

  transform:translateY(10px);

  transition:
  opacity .32s ease,
  transform .32s ease;
}

.waitlist-panel.is-visible{

  opacity:1;

  transform:translateY(0);
}

.waitlist-heading{

  font-size:19px;

  line-height:1.4;

  font-weight:650;
}

.waitlist-copy{

  margin-top:6px;

  color:rgba(255,255,255,.55);

  font-size:14px;

  line-height:1.55;
}

.waitlist-form{

  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  gap:10px;

  margin-top:18px;

  padding:5px;

  border:1px solid rgba(198,178,255,.19);

  border-radius:999px;

  background:rgba(255,255,255,.045);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.055),
  0 18px 54px rgba(40,16,88,.12);

  transition:
  border-color .2s ease,
  box-shadow .2s ease;
}

.waitlist-form:focus-within{

  border-color:rgba(198,178,255,.48);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,.07),
  0 0 0 4px rgba(143,98,255,.08),
  0 18px 54px rgba(40,16,88,.18);
}

.waitlist-form[aria-busy="true"]{

  opacity:.72;
}

.waitlist-input{

  width:100%;

  min-width:0;

  height:46px;

  padding:0 17px;

  border:0;

  border-radius:999px;

  background:transparent;

  color:white;

  font:inherit;

  font-size:16px;
}

.waitlist-input::placeholder{

  color:rgba(255,255,255,.32);
}

.waitlist-input:focus{

  outline:0;
}

.waitlist-submit{

  min-width:104px;

  height:46px;

  padding:0 20px;

  border:0;

  border-radius:999px;

  background:white;

  color:#08070a;

  font:inherit;

  font-size:14px;

  font-weight:750;

  cursor:pointer;

  transition:
  transform .2s ease,
  box-shadow .2s ease,
  opacity .2s ease;
}

.waitlist-submit:hover:not(:disabled){

  transform:translateY(-1px);

  box-shadow:0 8px 22px rgba(143,98,255,.24);
}

.waitlist-submit:disabled{

  cursor:wait;

  opacity:.62;
}

.waitlist-privacy{

  margin-top:11px;

  max-width:570px;

  color:rgba(255,255,255,.32);

  font-size:11px;

  line-height:1.55;
}

.waitlist-privacy a{

  color:rgba(228,217,255,.78);

  text-decoration:underline;
  text-decoration-color:rgba(198,178,255,.32);
  text-underline-offset:3px;
}

.waitlist-privacy a:hover{

  color:white;
}

.waitlist-status{

  min-height:0;

  color:rgba(255,255,255,.68);

  font-size:14px;

  line-height:1.5;
}

.waitlist-status:not(:empty){

  margin-top:14px;
}

.waitlist-status.is-error{

  color:#f4c7d4;
}

.waitlist.is-complete .waitlist-form,
.waitlist.is-complete .waitlist-privacy{

  display:none;
}

.waitlist.is-complete .waitlist-status{

  margin-top:20px;

  padding:17px 19px;

  border:1px solid rgba(165,132,255,.22);

  border-radius:18px;

  background:rgba(143,98,255,.07);

  color:white;

  font-size:16px;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.waitlist-status strong{

  display:block;

  margin-bottom:4px;

  color:#e4d9ff;

  font-size:18px;
}

.planet-visual{

  position:relative;

  width:min(640px,44vw);

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:2;
}

.planet-visual::before{

  content:"";

  position:absolute;

  width:560px;

  height:560px;

  border-radius:50%;

  background:rgba(124,76,255,.12);

  filter:blur(120px);
}

.nite-symbol-3d{

  position:relative;

  z-index:2;

  width:min(426.667px,29.333vw);

  aspect-ratio:1;

  overflow:visible;

  filter:

  drop-shadow(0 0 30px rgba(170,200,255,.18))

  drop-shadow(0 0 100px rgba(120,70,255,.14));
}

.nite-symbol-canvas{

  position:absolute;

  inset:0;

  z-index:3;

  display:block;

  width:100%;
  height:100%;

  border:0;
  outline:0;

  opacity:0;

  background:transparent;

  pointer-events:none;

  filter:drop-shadow(0 0 18px rgba(116,66,255,.26));

  transition:opacity 650ms ease;
}

.nite-symbol-3d.is-ready .nite-symbol-canvas{

  opacity:1;
}

.product-film-section{

  position:relative;

  z-index:2;

  padding:clamp(92px,11vw,168px) 72px clamp(105px,12vw,184px);

  border-top:1px solid rgba(255,255,255,.055);

  background:
  radial-gradient(circle at 50% 55%,rgba(94,53,188,.15),transparent 34%),
  linear-gradient(180deg,rgba(5,5,7,.28),rgba(3,3,5,.94));
}

.product-film-heading{

  width:min(1180px,100%);

  margin:0 auto 42px;
}

.product-film-eyebrow{

  color:#c6b2ff;

  font-size:12px;

  font-weight:750;

  letter-spacing:.24em;
}

.product-film-heading h2{

  margin-top:15px;

  font-size:clamp(42px,6.5vw,92px);

  line-height:.96;

  letter-spacing:-.055em;
}

.product-film-heading p:last-child{

  margin-top:20px;

  color:rgba(255,255,255,.52);

  font-size:clamp(17px,2vw,22px);

  line-height:1.5;
}

.product-film-frame{

  position:relative;

  width:min(1180px,100%);

  aspect-ratio:16/9;

  margin:0 auto;

  overflow:hidden;

  border:1px solid rgba(222,211,255,.16);

  border-radius:clamp(20px,2.5vw,34px);

  background:#000;

  box-shadow:
  0 45px 140px rgba(24,7,57,.48),
  inset 0 1px 0 rgba(255,255,255,.08);
}

.product-film-frame::after{

  content:"";

  position:absolute;

  inset:0;

  z-index:2;

  pointer-events:none;

  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.28));

  transition:opacity .35s ease;
}

.product-film-video{

  display:block;

  width:100%;

  height:100%;

  object-fit:cover;

  background:#000;
}

.product-film-play{

  position:absolute;

  left:50%;

  top:50%;

  z-index:4;

  display:flex;

  align-items:center;

  gap:13px;

  min-height:58px;

  padding:0 24px 0 18px;

  border:1px solid rgba(255,255,255,.28);

  border-radius:999px;

  background:rgba(5,4,8,.76);

  color:white;

  font:inherit;

  font-size:12px;

  font-weight:750;

  letter-spacing:.16em;

  cursor:pointer;

  backdrop-filter:blur(18px);

  transform:translate(-50%,-50%);

  transition:
  opacity .3s ease,
  transform .3s ease,
  background .2s ease;
}

.product-film-play:hover{

  background:rgba(32,20,57,.88);

  transform:translate(-50%,-53%);
}

.product-film-play:focus-visible{

  outline:2px solid #c6b2ff;

  outline-offset:5px;
}

.product-film-play-icon{

  width:36px;

  height:36px;

  border-radius:50%;

  background:white;

  box-shadow:0 0 32px rgba(190,167,255,.32);
}

.product-film-play-icon::after{

  content:"";

  display:block;

  width:0;

  height:0;

  margin:11px 0 0 14px;

  border-top:7px solid transparent;

  border-bottom:7px solid transparent;

  border-left:10px solid #0b0810;
}

.product-film-duration{

  position:absolute;

  right:20px;

  bottom:18px;

  z-index:4;

  padding:7px 10px;

  border:1px solid rgba(255,255,255,.13);

  border-radius:999px;

  background:rgba(5,4,8,.68);

  color:rgba(255,255,255,.72);

  font-size:11px;

  font-variant-numeric:tabular-nums;

  letter-spacing:.12em;

  pointer-events:none;

  backdrop-filter:blur(12px);
}

.product-film-frame.is-playing::after,
.product-film-frame.is-playing .product-film-play,
.product-film-frame.is-playing .product-film-duration{

  opacity:0;

  pointer-events:none;
}

footer{

  display:flex;

  justify-content:space-between;

  align-items:center;

  color:rgba(255,255,255,.35);

  font-size:13px;

  margin:0 72px;

  border-top:1px solid rgba(255,255,255,.07);

  padding:22px 0 28px;
}

.footer-links{

  display:flex;

  flex-wrap:wrap;

  justify-content:flex-end;

  gap:26px;
}

.footer-links a{

  transition:.2s;
}

.footer-links a:hover{

  color:white;
}

@keyframes floatPlanet{

  0%{

    transform:
    translateY(0px)
    rotate(0deg);
  }

  50%{

    transform:
    translateY(-14px)
    rotate(1deg);
  }

  100%{

    transform:
    translateY(0px)
    rotate(0deg);
  }
}

@media(max-width:1050px){

  .hero-stage{

    grid-template-columns:1fr;

    gap:30px;

    padding:42px 28px 120px;
  }

  .product-film-section{

    padding-right:28px;

    padding-left:28px;
  }

  .content{

    text-align:center;

    margin:auto;
  }

  .description{

    margin-left:auto;

    margin-right:auto;
  }

  .actions{

    justify-content:center;
  }

  .planet-visual{

    width:min(560px,90vw);

    margin-left:auto;
    margin-right:auto;
  }

  .nite-symbol-3d{

    width:min(373.333px,60vw);
  }

  footer{

    margin:0 28px;

    flex-direction:column;

    gap:18px;
  }

  .footer-links{

    justify-content:center;
  }
}

@media(max-width:640px){

  .product-film-section{

    padding:82px 20px 108px;
  }

  .product-film-heading{

    margin-bottom:28px;
  }

  .product-film-heading h2{

    font-size:42px;
  }

  .product-film-frame{

    border-radius:20px;
  }

  .product-film-play{

    min-height:52px;

    padding:0 18px 0 13px;

    font-size:10px;
  }

  .product-film-play-icon{

    width:32px;

    height:32px;
  }

  .product-film-play-icon::after{

    margin:9px 0 0 12px;
  }

  .product-film-duration{

    right:12px;

    bottom:11px;
  }

  h1{

    letter-spacing:.08em;
  }

  .tagline{

    font-size:28px;
  }

  .description{

    font-size:17px;
  }

  .nite-symbol-3d{

    width:60vw;
  }

  .waitlist-trigger{

    margin-inline:auto;
  }

  .waitlist-form{

    grid-template-columns:1fr;

    padding:6px;

    border-radius:24px;
  }

  .waitlist-input{

    height:48px;
  }

  .waitlist-submit{

    width:100%;

    height:48px;
  }

  .waitlist-heading,
  .waitlist-copy,
  .waitlist-privacy{

    margin-left:auto;

    margin-right:auto;
  }
}

@media(prefers-reduced-motion:reduce){

  html{

    scroll-behavior:auto;
  }

  .primary-button,
  .waitlist-panel,
  .waitlist-submit,
  .waitlist-form,
  .footer-links a,
  .nite-symbol-canvas{

    transition:none;
  }

  .product-film-frame::after,
  .product-film-play{

    transition:none;
  }
}