/*
 * NiteLEADS — pre-launch.
 * One cinematic page: an eclipse over the aurora, editorial serif type, film grain.
 */

:root {
  --void: #020309;
  --night: #05071a;
  --ink: #f2f1fb;
  --ink-2: #b5b6d3;
  --ink-3: #74779c;
  --line: rgba(190, 190, 255, 0.12);
  --line-2: rgba(190, 190, 255, 0.22);
  --violet: #a99bff;
  --aurora: #5eead4;
  --glow: rgba(150, 135, 255, 0.55);
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --brand: 'Syne', 'Inter Tight', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  overflow-x: clip;
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1400px 900px at 50% -10%, #0c1036 0%, var(--night) 45%, var(--void) 100%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection {
  background: rgba(169, 155, 255, 0.35);
}

a {
  color: inherit;
}

p,
h1,
h2 {
  margin: 0;
}

svg {
  display: block;
}

:focus-visible {
  outline: 1px solid var(--violet);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Atmosphere ──────────────────────────────────────────────────────────── */

.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

/* Film grain: a tiled noise texture, jittered a few times a second. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  20% {
    transform: translate(-3%, 2%);
  }
  40% {
    transform: translate(2%, -4%);
  }
  60% {
    transform: translate(-4%, -1%);
  }
  80% {
    transform: translate(3%, 3%);
  }
}

/* ─── Top bar ─────────────────────────────────────────────────────────────── */

.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 48px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 3, 9, 0.55), rgba(2, 3, 9, 0));
  transition:
    background 0.5s var(--ease),
    border-color 0.5s var(--ease),
    padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.top.is-scrolled {
  pointer-events: auto;
  padding-block: 14px;
  background: rgba(4, 5, 18, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line);
}
.top > * {
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand__tile {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0a2fe3, #2a2cf0 50%, #5a1bd8);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 24px rgba(90, 70, 255, 0.45);
}
.brand__tile svg {
  width: 60%;
  height: 60%;
}
.brand__tile--sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  box-shadow: none;
}
.brand__word {
  font-family: var(--brand);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__word b {
  font-weight: 800;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(5, 7, 26, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aurora);
}
.pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--aurora);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  from {
    transform: scale(0.4);
    opacity: 0.9;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  --size: min(56vmin, 540px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 110px 24px 130px;
  text-align: center;
  isolation: isolate;
  overflow: clip;
}
.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  margin: 10px 0 6px;
}

/* The eclipse: a black disc, a thin bright limb, a slowly turning corona and the diamond ring. */
.eclipse {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 1.2s var(--ease);
}
.eclipse__corona {
  position: absolute;
  inset: -38%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(169, 155, 255, 0) 0deg,
    rgba(169, 155, 255, 0.55) 25deg,
    rgba(169, 155, 255, 0) 60deg,
    rgba(94, 234, 212, 0.35) 110deg,
    rgba(94, 234, 212, 0) 150deg,
    rgba(130, 120, 255, 0.5) 200deg,
    rgba(130, 120, 255, 0) 240deg,
    rgba(240, 170, 255, 0.35) 290deg,
    rgba(169, 155, 255, 0) 330deg
  );
  filter: blur(34px);
  -webkit-mask: radial-gradient(circle, transparent 33%, #000 37%, #000 52%, transparent 72%);
  mask: radial-gradient(circle, transparent 33%, #000 37%, #000 52%, transparent 72%);
  animation: spin 60s linear infinite;
  opacity: 0.9;
}
.eclipse__halo {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 40%,
    rgba(230, 225, 255, 0.55) 41.5%,
    rgba(160, 150, 255, 0.28) 44%,
    rgba(110, 100, 255, 0.08) 52%,
    rgba(0, 0, 0, 0) 66%
  );
  animation: breathe 8s ease-in-out infinite;
}
.eclipse__disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #0b0d22, #020308 70%);
  box-shadow:
    0 0 0 1px rgba(235, 230, 255, 0.55),
    0 0 18px 2px rgba(220, 215, 255, 0.45),
    0 0 90px 10px var(--glow),
    0 0 220px 40px rgba(80, 60, 230, 0.35),
    inset 0 0 60px rgba(0, 0, 0, 0.9);
}
/* The mark, barely there — stealth. */
.eclipse__disc svg {
  width: 34%;
  height: 34%;
  color: #fff;
  opacity: 0.045;
  transition: opacity 1.6s var(--ease);
}
.eclipse:hover .eclipse__disc svg {
  opacity: 0.09;
}
/* Diamond ring: one blinding bead of light on the limb. */
.eclipse__diamond {
  position: absolute;
  top: 9%;
  right: 13%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 10px 4px #fff,
    0 0 40px 14px rgba(220, 215, 255, 0.85),
    0 0 110px 40px rgba(150, 135, 255, 0.55);
  animation: diamond 6s ease-in-out infinite;
}
.eclipse__diamond::before,
.eclipse__diamond::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 1.5px;
  margin: -0.75px 0 0 -90px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
}
.eclipse__diamond::after {
  transform: rotate(90deg);
  width: 110px;
  margin-left: -55px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.03);
    opacity: 0.85;
  }
}
@keyframes diamond {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.kicker,
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__title {
  position: relative;
  width: max-content;
  max-width: 92vw;
  font-family: var(--display);
  font-size: clamp(40px, calc(var(--size) * 0.16), 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-shadow: 0 0 60px rgba(5, 7, 26, 0.9);
}
.hero__title .line {
  display: block;
}
em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.hero__title em {
  padding-right: 0.06em;
  background: linear-gradient(100deg, #ffffff 10%, #cfc6ff 45%, #8ff5dc 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 560px;
  color: var(--ink-2);
  font-size: clamp(17px, 1.5vw, 19px);
  text-shadow: 0 0 30px rgba(5, 7, 26, 0.9);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding: 15px 22px 15px 26px;
  border-radius: 999px;
  border: 1px solid rgba(230, 225, 255, 0.35);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    background 0.4s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.cta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}
.cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(230, 225, 255, 0.6);
  box-shadow: 0 0 40px rgba(150, 135, 255, 0.35);
}
.cta:hover svg {
  transform: translateX(4px);
}

/* Staggered entrance: blur, rise, settle. */
.js .rise {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(18px);
  animation: rise 1.6s var(--ease) forwards;
  animation-delay: calc(0.35s + var(--i) * 0.14s);
}
@keyframes rise {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
.js .eclipse {
  animation: eclipse-in 2.6s var(--ease) both;
}
@keyframes eclipse-in {
  from {
    opacity: 0;
    scale: 0.92;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 1px;
  height: 64px;
  margin-left: -0.5px;
  background: var(--line-2);
  overflow: hidden;
}
.scroll-cue span {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #fff, transparent);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}

/* ─── Sections ────────────────────────────────────────────────────────────── */

.manifesto,
.pillars,
.readout,
.access {
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  color: var(--ink-3);
}
.eyebrow span {
  color: var(--violet);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.manifesto {
  padding: 160px 0 140px;
}
/* Four short statements with room to breathe; the last one is the turn. */
.manifesto__lines {
  display: grid;
  gap: clamp(28px, 3.6vw, 44px);
  max-width: 860px;
}
.manifesto__lines p {
  font-family: var(--display);
  font-size: clamp(23px, 2.7vw, 36px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: pretty;
}
.manifesto__lines p:not(.manifesto__turn) {
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 1px solid var(--line-2);
}
.manifesto__turn {
  margin-top: clamp(8px, 1.5vw, 20px);
}
.manifesto__turn em {
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.1;
  color: #d9d2ff;
}

.pillars {
  padding: 40px 0 140px;
}
.pillars__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}
.pillars__list li {
  padding: 40px 40px 0 0;
}
.pillars__list li + li {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
.pillars__num {
  display: block;
  margin-bottom: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--violet);
}
.pillars h2 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pillars p {
  max-width: 320px;
  color: var(--ink-2);
}

/* A quiet instrument panel. */
.readout {
  padding-bottom: 160px;
}
.readout dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 22, 60, 0.45), rgba(8, 10, 30, 0.3));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.readout dl > div {
  padding: 26px 28px;
}
.readout dl > div + div {
  border-left: 1px solid var(--line);
}
.readout dt {
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.readout dd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ─── Early access ────────────────────────────────────────────────────────── */

.access {
  position: relative;
  padding: 80px 0 180px;
  text-align: center;
  isolation: isolate;
}
.access .eyebrow {
  justify-content: center;
}
.access .eyebrow::after {
  display: none;
}
.access__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: 900px;
  height: 500px;
  margin-left: -450px;
  background: radial-gradient(closest-side, rgba(110, 90, 255, 0.28), transparent);
  filter: blur(20px);
}
.access__title {
  max-width: 900px;
  margin: 0 auto 26px;
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}
.access__title em {
  display: block;
  color: #d9d2ff;
}
.access__lede {
  max-width: 520px;
  margin: 0 auto 44px;
  color: var(--ink-2);
}

.contact {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 28px 0 32px;
  border-radius: 999px;
  background: #f2f1fb;
  color: #07081c;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 30px 80px -30px rgba(80, 60, 230, 0.9);
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.contact__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}
.contact__btn:hover {
  background: #fff;
  box-shadow:
    0 0 40px rgba(220, 215, 255, 0.55),
    0 30px 80px -30px rgba(80, 60, 230, 0.9);
}
.contact__btn:hover svg {
  transform: translateX(4px);
}
.contact__addr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 10, 32, 0.5);
  color: var(--ink-2);
  font: 400 14px var(--mono);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.contact__addr:hover {
  border-color: var(--line-2);
  color: var(--ink);
}
.contact__hint {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(169, 155, 255, 0.14);
  color: #d9d2ff;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.access__fine {
  margin-top: 64px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 30px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
}
.foot__tag {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
}

/* ─── Reveal ──────────────────────────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 1.4s var(--ease),
    transform 1.4s var(--ease),
    filter 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ─── Small screens ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .pillars__list,
  .readout dl {
    grid-template-columns: 1fr 1fr;
  }
  .pillars__list li:nth-child(3) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    margin-top: 40px;
  }
  .readout dl > div:nth-child(3) {
    border-left: 0;
  }
  .readout dl > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
  .top {
    padding: 18px 16px;
  }
  .status-pill {
    padding: 7px 11px;
    font-size: 10.5px;
  }
  .manifesto,
  .pillars,
  .readout,
  .access,
  .foot {
    width: calc(100% - 32px);
  }
  .hero {
    --size: min(88vw, 400px);
    gap: 24px;
  }
  .manifesto {
    padding: 110px 0 90px;
  }
  .pillars__list {
    grid-template-columns: 1fr;
  }
  .pillars__list li,
  .pillars__list li + li,
  .pillars__list li:nth-child(3) {
    padding: 32px 0;
    border-left: 0;
    margin-top: 0;
  }
  .pillars__list li + li {
    border-top: 1px solid var(--line);
  }
  .pillars__num {
    margin-bottom: 24px;
  }
  .readout dl {
    grid-template-columns: 1fr;
  }
  .readout dl > div + div {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .foot {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .rise,
  .js .reveal {
    opacity: 1;
    filter: none;
    transform: none;
  }
}