/* ===========================================================================
   Nightfall landing page
   Single stylesheet, no build step. Change the tokens in :root to rebrand.
   =========================================================================== */

:root{
  /* ---- brand tokens: edit these first ---- */
  --accent:        #7c6cff;
  --accent-soft:   #a89bff;
  --accent-glow:   rgba(124,108,255,.35);
  --accent-2:      #35d6c8;

  /* ---- surfaces ---- */
  --bg:            #08080d;
  --bg-alt:        #0d0d15;
  --surface:       #12121c;
  --surface-hi:    #191926;
  --line:          rgba(255,255,255,.09);
  --line-hi:       rgba(255,255,255,.16);

  /* ---- text ---- */
  --text:          #ecedf3;
  --text-dim:      #9ea3b5;
  --text-faint:    #6a6f82;

  /* ---- shape ---- */
  --radius:        14px;
  --radius-lg:     20px;
  --maxw:          1140px;
  --pad:           clamp(20px, 5vw, 40px);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ line-height:1.15; letter-spacing:-0.02em; margin:0; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
code{ font-family:var(--mono); font-size:.9em; background:var(--surface-hi);
      border:1px solid var(--line); border-radius:6px; padding:.1em .4em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:12px; z-index:200;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px;
}
.skip:focus{ left:12px; }

:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:760px; }

/* ------------------------------- buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; font-size:.95rem; line-height:1;
  padding:.85em 1.4em; border-radius:10px; border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn--primary{
  background:linear-gradient(180deg, var(--accent-soft), var(--accent));
  color:#fff; box-shadow:0 6px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -8px var(--accent-glow); }
.btn--ghost{ background:var(--surface); color:var(--text); border-color:var(--line-hi); }
.btn--ghost:hover{ background:var(--surface-hi); border-color:var(--accent-soft); }
.btn--lg{ font-size:1.02rem; padding:1em 1.7em; }
.btn--block{ display:flex; width:100%; }

/* --------------------------------- nav ---------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,13,.6); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(8,8,13,.88); }
.nav__inner{ display:flex; align-items:center; gap:28px; height:68px; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; }
.brand__mark{
  width:22px; height:22px; border-radius:7px; flex:none;
  background:conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--accent));
  box-shadow:0 0 18px -4px var(--accent-glow);
}
.brand__name{ font-size:1.05rem; }

.nav__links{ display:flex; gap:26px; margin-left:14px; font-size:.93rem; color:var(--text-dim); }
.nav__links a:hover{ color:var(--text); }
.nav__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav__signin{ background:transparent; border-color:transparent; color:var(--text-dim); }
.nav__signin:hover{ color:var(--text); background:transparent; }

.nav__toggle{
  display:none; margin-left:auto; background:none; border:0; cursor:pointer;
  padding:10px; flex-direction:column; gap:5px;
}
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--text); border-radius:2px; }
.nav__mobile{ display:none; flex-direction:column; gap:4px; padding:8px var(--pad) 20px; border-top:1px solid var(--line); }
.nav__mobile a{ padding:12px 2px; color:var(--text-dim); border-bottom:1px solid var(--line); }
.nav__mobile a:last-child{ border:0; margin-top:12px; color:#fff; justify-content:center; }

@media (max-width:880px){
  .nav__links, .nav__actions{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile:not([hidden]){ display:flex; }
}

/* -------------------------------- hero ---------------------------------- */
.hero{ position:relative; padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px); text-align:center; }
.hero__glow{
  position:absolute; inset:-30% 0 auto 0; height:620px; pointer-events:none; z-index:0;
  background:
    radial-gradient(600px 320px at 50% 30%, var(--accent-glow), transparent 70%),
    radial-gradient(420px 260px at 78% 12%, rgba(53,214,200,.14), transparent 70%);
  filter:blur(6px);
}
.hero__inner{ position:relative; z-index:1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.82rem; color:var(--text-dim); font-weight:500;
  background:var(--surface); border:1px solid var(--line);
  padding:6px 14px; border-radius:999px; margin-bottom:26px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); }

.hero__title{
  font-size:clamp(2.1rem, 6vw, 4rem); letter-spacing:-.035em;
  background:linear-gradient(180deg,#fff 30%, #b9bccd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Hard line break in the headline is a desktop-only nicety. */
.br-lg{ display:none; }
@media (min-width:700px){ .br-lg{ display:inline; } }

.hero__sub{
  margin:22px auto 0; max-width:620px; font-size:clamp(1rem,2.2vw,1.15rem);
  color:var(--text-dim);
}
.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px; }
.hero__note{ margin-top:16px; font-size:.85rem; color:var(--text-faint); }

/* product shot */
.shot{
  margin:clamp(44px,7vw,80px) auto 0; max-width:940px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.shot__chrome{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface-hi);
}
.shot__chrome > span{ width:11px; height:11px; border-radius:50%; background:#2c2c3d; }
.shot__url{
  margin-left:14px; font-family:var(--mono); font-size:.75rem; color:var(--text-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.shot__body{ aspect-ratio:16/9; background:
  linear-gradient(135deg, #0f0f18, #161626 50%, #0f0f18),
  var(--bg-alt); }
.shot__body img, .shot__body video, .shot__body iframe{ width:100%; height:100%; object-fit:cover; border:0; }
.shot__placeholder{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--text-faint);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:44px 44px;
}
.shot__caption{ padding:14px 16px; font-size:.82rem; color:var(--text-faint); border-top:1px solid var(--line); }

/* ------------------------------- proof ---------------------------------- */
.proof{ padding:44px 0 8px; }
.proof__label{ text-align:center; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.proof__logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,5vw,56px);
  margin-top:22px; font-weight:700; letter-spacing:.1em; font-size:.9rem;
  color:var(--text-faint); opacity:.7;
}

/* ------------------------------ sections -------------------------------- */
.section{ padding:clamp(64px,9vw,116px) 0; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:14px;
}
.section__title{ font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:20ch; }
.section__sub{ margin-top:16px; max-width:56ch; color:var(--text-dim); font-size:1.03rem; }

.grid{ display:grid; gap:20px; margin-top:44px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--3{ grid-template-columns:1fr; } }

/* cards */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover{ border-color:var(--line-hi); background:var(--surface-hi); transform:translateY(-2px); }
.card__icon{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:rgba(124,108,255,.13); border:1px solid rgba(124,108,255,.28);
  color:var(--accent-soft); font-size:1.1rem; margin-bottom:16px;
}
.card h3{ font-size:1.06rem; margin-bottom:8px; }
.tag-planned{
  display:inline-block; vertical-align:middle; margin-left:8px;
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); background:var(--surface-hi);
  border:1px solid var(--line-hi); border-radius:999px; padding:2px 7px;
}
.card p{ color:var(--text-dim); font-size:.94rem; }

/* steps */
.step{ padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.step__n{ font-family:var(--mono); font-size:.85rem; color:var(--accent-soft); }
.step h3{ font-size:1.06rem; margin:10px 0 8px; }
.step p{ color:var(--text-dim); font-size:.94rem; }

/* ------------------------------- pricing -------------------------------- */
.tiers{ align-items:start; }
.tier{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 26px 26px; display:flex; flex-direction:column;
}
.tier--featured{
  border-color:rgba(124,108,255,.45);
  background:linear-gradient(180deg, rgba(124,108,255,.10), var(--surface) 40%);
  box-shadow:0 30px 60px -40px var(--accent-glow);
}
.tier__badge{
  position:absolute; top:-11px; left:26px;
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:4px 11px; border-radius:999px;
}
.tier__name{ font-size:1.05rem; }
.tier__price{ font-size:2.9rem; font-weight:700; letter-spacing:-.04em; margin-top:10px; }
.tier__cur{ font-size:1.3rem; vertical-align:super; color:var(--text-dim); margin-right:2px; }
.tier__meta{ color:var(--text-faint); font-size:.85rem; margin-top:2px; }
.tier__rise{
  margin-top:6px; font-size:.8rem; color:var(--accent-soft);
  background:rgba(124,108,255,.10); border:1px solid rgba(124,108,255,.22);
  border-radius:999px; padding:3px 10px;
  /* .tier is a flex column, so inline-block still stretches — pin it. */
  align-self:flex-start;
}
.tier__list{ margin:22px 0 26px; display:grid; gap:11px; font-size:.93rem; color:var(--text-dim); }
.tier__list li{ display:flex; gap:10px; align-items:flex-start; }
.tier__list li::before{
  content:"✓"; color:var(--accent-2); font-weight:700; font-size:.85rem; line-height:1.55; flex:none;
}
.tier .btn{ margin-top:auto; }
.guarantee{
  margin-top:34px; text-align:center; color:var(--text-dim); font-size:.93rem;
  border:1px dashed var(--line-hi); border-radius:var(--radius); padding:18px;
}
.guarantee strong{ color:var(--text); }

/* ----------------------------- testimonials ----------------------------- */
.quote{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
}
.quote p{ font-size:1rem; }
.quote footer{
  display:flex; align-items:center; gap:10px;
  margin-top:20px; font-size:.84rem; color:var(--text-faint);
}
.avatar{
  width:28px; height:28px; border-radius:50%; flex:none;
  background:linear-gradient(140deg, var(--accent), var(--accent-2));
  opacity:.65;
}

/* --------------------------------- faq ---------------------------------- */
.faq{ margin-top:38px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 34px 20px 0; position:relative;
  font-weight:600; font-size:1.02rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--accent-soft); font-size:1.35rem; font-weight:400; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 40px 22px 0; color:var(--text-dim); font-size:.96rem; }

/* --------------------------------- cta ---------------------------------- */
.cta{
  padding:clamp(64px,9vw,110px) 0; text-align:center;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(124,108,255,.18), transparent 70%),
    var(--bg-alt);
  border-top:1px solid var(--line);
}
.cta h2{ font-size:clamp(1.7rem,3.8vw,2.5rem); }
.cta p{ margin:16px auto 30px; color:var(--text-dim); max-width:46ch; }

.signup{ margin-top:34px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.signup input{
  flex:1 1 260px; max-width:320px;
  background:var(--surface); border:1px solid var(--line-hi); color:var(--text);
  border-radius:10px; padding:.85em 1em; font:inherit; font-size:.95rem;
}
.signup input::placeholder{ color:var(--text-faint); }
.signup__note{ flex-basis:100%; font-size:.8rem; color:var(--text-faint); margin-top:4px; }

/* -------------------------------- footer -------------------------------- */
.footer{ border-top:1px solid var(--line); padding-top:56px; background:var(--bg); }
.footer__inner{ display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; }
.footer__tag{ margin-top:14px; color:var(--text-faint); font-size:.88rem; max-width:30ch; }
.footer__cols{ display:flex; gap:clamp(28px,6vw,72px); flex-wrap:wrap; }
.footer__cols h4{ font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.footer__cols a{ display:block; color:var(--text-dim); font-size:.92rem; padding:5px 0; }
.footer__cols a:hover{ color:var(--text); }
.footer__legal{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-top:52px; padding-block:22px; border-top:1px solid var(--line);
  color:var(--text-faint); font-size:.83rem;
}
.footer__legal a:hover{ color:var(--text); }


/* ------------------------ pre-order disclosure flag ----------------------- */
.preorder-flag{
  max-width:620px; margin:26px auto 0; text-align:left;
  background:rgba(53,214,200,.07); border:1px solid rgba(53,214,200,.30);
  border-left-width:3px; border-radius:var(--radius);
  padding:16px 20px; color:var(--text-dim); font-size:.92rem;
}
.preorder-flag strong{ color:var(--text); }

/* ---------------------------- test-mode banner --------------------------- */
.testbar{
  position:relative; z-index:110; text-align:center;
  background:linear-gradient(90deg, rgba(53,214,200,.16), rgba(124,108,255,.16));
  border-bottom:1px solid var(--line-hi);
  color:var(--text); font-size:.83rem; padding:9px 16px;
}
.testbar strong{ color:var(--accent-2); }

/* ------------------------- hero: the two products ------------------------ */
.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin:clamp(44px,7vw,72px) auto 0; max-width:940px; text-align:left;
}
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.duo__item{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:26px 26px 22px;
  transition:border-color .2s ease, transform .2s ease;
}
.duo__item:hover{ border-color:var(--line-hi); transform:translateY(-2px); }
.duo__tag{ font-family:var(--mono); font-size:.78rem; color:var(--accent-soft); }
.duo__item h2{ font-size:1.25rem; margin:10px 0 10px; }
.duo__item p{ color:var(--text-dim); font-size:.95rem; }
.duo__link{ display:inline-block; margin-top:16px; font-size:.9rem; font-weight:600; color:var(--accent-soft); }
.duo__link:hover{ color:var(--text); }

/* ------------------------------- products -------------------------------- */
.product__head{ max-width:none; }
.product .shot{ margin-top:clamp(34px,5vw,52px); }
.product .features{ margin-top:clamp(34px,5vw,52px); }

.inline-cta{
  margin-top:38px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.inline-cta__note{ color:var(--text-faint); font-size:.88rem; max-width:44ch; }

/* --------------------------- early-access status ------------------------- */
.status{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:38px;
}
@media (max-width:700px){ .status{ grid-template-columns:1fr; } }
.status__col{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px;
}
.status__col h3{ font-size:1rem; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.status__dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--text-faint); box-shadow:none;
}
.status__dot--on{ background:var(--accent-2); box-shadow:0 0 10px var(--accent-2); }
.status__col ul{ display:grid; gap:10px; }
.status__col li{
  color:var(--text-dim); font-size:.93rem; padding-left:18px; position:relative;
}
.status__col li::before{
  content:"—"; position:absolute; left:0; color:var(--text-faint);
}

/* ------------------------- scroll-in animation --------------------------- */
[data-reveal]{ opacity:0; transform:translateY(14px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }