/* index.html — the home page.

   Loaded after styles.css, which it deliberately does not modify. Everything
   shared (the rail, the mark, the method list, the nav, the readout, the hero
   type) comes from styles.css unchanged. This file only carries the four things
   that are true of this page and no other:

     1. the particle field and its ground
     2. a scrolling document, because this page is taller than the viewport
     3. a static layout, because the old page placed its blocks with JS against
        the radar's golden-section construction and this page has no radar
     4. the one call to action

   Kept separate from styles.css so the other pages (team, legal) are not
   touched by anything here. */

/* ---------- the field ---------- */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* The one thing styles.css must be overridden on: it locks the viewport to stop
   the old single-screen layout from scrolling. This page is a document. */
.page-home {
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------- layout ----------
   Rail on the left, one content column beside it. Static grid rather than the
   old JS placement, so nothing has to run for the page to be laid out. */

.page-home .stage {
  position: relative;
  inset: auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "rail hero"
    "rail hero"
    "rail readout";
  gap: 34px 55px;
  padding: 34px 55px 34px 0;
}

.page-home .nav { position: fixed; z-index: 4; }

.page-home .rail {
  grid-area: rail;
  position: static;
  width: auto;
  padding: 0 34px 0 55px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 62%, transparent);
}

.page-home .hero {
  grid-area: hero;
  position: static;
  max-width: 760px;
  padding-top: 110px;
  /* Clears the field's crest so the statement never fights it. */
  text-shadow: var(--halo);
}

.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -55px -89px -55px -55px;
  z-index: -1;
  background: radial-gradient(120% 95% at 22% 40%, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.4) 55%, transparent 80%);
}

.page-home .readout {
  grid-area: readout;
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  align-self: end;
  padding-top: 21px;
  border-top: 1px solid rgba(242, 239, 233, 0.12);
}

/* ---------- the call to action ----------
   One ask on the whole page, so it is given weight: a full card, the product
   name set large, and an arrow that moves on hover. Nothing else on the page is
   a link except the nav and the legal line. */

.hero__cta {
  display: flex;
  align-items: center;
  gap: 21px;
  margin-top: 55px;
  padding: 26px 34px;
  max-width: 34em;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(242, 239, 233, 0.22);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  border-color: var(--burn);
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
}

.hero__cta-kicker {
  display: block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cold);
  margin-bottom: 7px;
}

.hero__cta-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero__cta-text { flex: 1; min-width: 0; }

.hero__cta-arrow {
  flex: none;
  font-size: 26px;
  color: var(--burn);
  transition: transform 220ms ease;
}

.hero__cta:hover .hero__cta-arrow { transform: translateX(7px); }

/* ---------- small screens ----------
   One column: rail, then hero, then the legal line. Same reading order the old
   page used when it went compact. */

@media (max-width: 900px) {
  .page-home .stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rail"
      "hero"
      "readout";
    gap: 34px;
    padding: 89px 21px 21px;
  }
  .page-home .rail {
    padding: 0;
    background: none;
    gap: 34px;
  }
  .page-home .hero { padding-top: 0; }
  .page-home .hero::before { inset: -21px; }
  .page-home .readout { flex-wrap: wrap; gap: 13px 21px; justify-content: flex-start; }
  .hero__cta { padding: 21px 21px; gap: 13px; margin-top: 34px; }

  /* One cold wash over the whole column, so the flow cannot wash out small
     type on a narrow screen where the rail's own gradient is gone. */
  .page-home .stage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.55));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta, .hero__cta-arrow { transition: none; }
}

/* ---------- the surface ----------
   Black ground, cream dust, one accent. The green the radar page was built
   on is gone from this page, and so is its scanline; styles.css still
   carries them for the pages that use the radar. */

:root {
  /* The cold green becomes a quiet grey, so eyebrows, indices and the status
     labels read as ink on paper rather than as instrument readouts. */
  --cold: #a7a39b;
  --text: #f2efe9;
  --haze: rgba(242, 239, 233, 0.66);
  --halo: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 0, 0, 0.85);
}

body.page-home {
  background: #000;
}
/* No scanline. The field is the texture. */
body.page-home::after { display: none; }


/* The mark's dot was a green lamp. Now it is the accent, small and unlit. */
.page-home .mark__dot {
  background: var(--burn);
  box-shadow: none;
}

/* The signal link in the nav kept a green border. */
.page-home .nav .nav__signal {
  color: var(--text);
  border-color: rgba(242, 239, 233, 0.3);
  background: rgba(242, 239, 233, 0.04);
}
.page-home .nav .nav__signal:hover {
  color: var(--burn);
  border-color: var(--burn);
  background: rgba(255, 102, 0, 0.08);
}