/* ============================================================
   HOME.CSS — home page components.
   Loaded after site.css, by index.html only.

   Two teaser sections route to the anchor pages: the destination
   (Sovereign Enterprise) and the machine (Foundry). Everything
   else on the page reuses shared components.
============================================================ */

/* ------------------------------------------------------------
   TEASER LAYOUT — copy left, visual right.
------------------------------------------------------------ */
.tease {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 72px;
  align-items: center;
}
.tease .head { margin-bottom: 0; }
.tease__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-text);
}
.tease__cta:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .tease { grid-template-columns: 1fr; gap: 40px; }
}

/* Miniature of the Sovereign Architecture — same rows as the SE
   page's stack, at teaser scale. */
.mini { display: flex; flex-direction: column; gap: 7px; }
.mini__row {
  border: 1px solid rgba(94,94,255,.24);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: linear-gradient(158deg, rgba(94,94,255,.07) 0%, rgba(94,94,255,.02) 62%, rgba(94,94,255,.008) 100%);
}
.mini__row b { font-weight: 500; color: var(--text); font-size: 14.5px; }
/* Retained but unused: the ontology row it highlighted was removed from the
   stack, because the ontology is not a layer alongside the other three. */
.mini__row--found {
  border-color: rgba(94,94,255,.5);
  background: linear-gradient(150deg, rgba(94,94,255,.17) 0%, rgba(94,94,255,.06) 70%);
}
.mini__row--found b { color: var(--accent-text); }

/* The five sovereignties cut across all three layers, so they read as a band
   under the stack rather than a fourth row — a row would put them back on the
   same footing as a layer, which is the confusion this change removes. */
.mini__sovs {
  margin-top: 5px;
  padding: 12px 16px 13px;
  border: 1px dashed rgba(94,94,255,.34);
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.mini__sov-k {
  flex: 0 0 100%;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.mini__sovs span:not(.mini__sov-k) {
  font-size: 11.5px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 99px;
  border: 1px solid rgba(94,94,255,.28);
  color: var(--accent-text);
  white-space: nowrap;
}
.mini__cap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 560px) {
  .mini__row { flex-direction: column; gap: 3px; }
}

/* ------------------------------------------------------------
   HERO SCROLL CUE — a light nudge below the fold.
------------------------------------------------------------ */
.hero__scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: rgba(255,255,255,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__scroll svg {
  width: 16px; height: 16px;
  animation: hero-scroll-bob 2.2s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg { animation: none; }
}

/* ------------------------------------------------------------
   STATEMENT — the value proposition as a piece of writing, set
   large. Carries what the old three-up said, in prose.
------------------------------------------------------------ */
/* This band is the category claim, and readers were skating past it into the
   section below. Two things hold them: a violet wash so it reads as its own
   moment between the dark hero and the grey teaser, and the claim itself lifted
   out of the paragraph onto its own line. 38px sits just under the 44px .head__h2
   — big enough to stop the eye, not so big it competes with the section heads. */
#what-we-do {
  background:
    radial-gradient(760px 380px at 50% 10%, rgba(94,94,255,.16), transparent 72%),
    linear-gradient(rgba(94,94,255,.045), rgba(94,94,255,.045)),
    var(--page-bg);
}
.statement {
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}
/* Headline over standfirst. The supporting line stays at the band's original
   27px — larger than body copy anywhere else on the site, which is the point of
   this band — and the 44px claim above it carries the hierarchy on its own. */
/* Scoped as .statement .statement__key, not .statement__key — `.statement p`
   above is one class plus one type and would otherwise win, silently holding
   this at the body's 27px. */
.statement .statement__key {
  font-size: 44px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -1.9px;
  color: var(--text);
}
/* 820px rather than the block's full 940: at 27px this always sets in three
   lines, but at 940 the third holds only "control." (95px). Pulling the measure
   in fills that line to 334px instead. */
.statement .statement__key + p { margin: 20px auto 0; max-width: 820px; }
.statement p {
  font-size: 27px;
  font-weight: 400;
  line-height: 1.52;
  letter-spacing: -.7px;
  color: var(--muted);
}
.statement p strong { color: var(--text); font-weight: 500; }
.statement p + p { margin-top: 30px; }
@media (max-width: 768px) {
  .statement p { font-size: 20px; letter-spacing: -.4px; }
  .statement p + p { margin-top: 22px; }
  .statement .statement__key { font-size: 30px; letter-spacing: -1px; }
  .statement .statement__key + p { margin-top: 14px; }
}

/* ------------------------------------------------------------
   PAPER NOTE — the white paper, quote-forward. Sits at the foot
   of the Sovereign Enterprise teaser, where the idea has just
   been introduced. Deliberately lighter than the dark paper card
   on the SE page — this is a reference, not a destination.
------------------------------------------------------------ */
/* Dark card, deliberately. This sits inside a light grey .section--alt, and a
   pale violet tint on pale grey read as more of the same page. Going dark makes
   the paper the anchor of the section, which matches its weight — it is the
   strongest asset we have.

   The colour is About's founder card (.fdr) — and reproducing it means copying
   the whole stack, not just the card's own gradient. A founder card renders as
   three layers: its violet gradient, over the .ab-dark band's radial wash, over
   --hero-bg. Take only the gradient and you get a much darker card, because the
   band wash underneath is doing half the lifting. All three are layered here,
   so this reads as the same indigo rather than as black.

   The stops are raised rather than copied verbatim: a founder card is ~350px
   wide and never reaches the tail of its own gradient, while this card is the
   full 1120px measure and would spend its right third in near-black. The tail
   is lifted so the indigo holds across the width. */
.paper-note {
  margin-top: 72px;
  border: 1px solid rgba(130,115,255,.34);
  border-radius: 5px;
  background:
    linear-gradient(112deg, rgba(130,115,255,.22) 0%, rgba(130,115,255,.13) 55%, rgba(130,115,255,.10) 100%),
    radial-gradient(1100px 420px at 32% -28%, rgba(130,115,255,.18), transparent 76%),
    var(--hero-bg, #07070c);
  padding: 38px 42px;
}
.paper-note__k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #a1a1ff;
  margin-bottom: 18px;
}
/* 32ch, not 26ch, so the quote sets in two lines rather than three. The text is
   a verbatim quotation from the paper, so the measure gives way rather than the
   wording. 30ch is the true threshold — 32 leaves headroom so a different font
   render cannot push it back to three. Mobile drops max-width entirely below. */
.paper-note__q {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.7px;
  color: #f4f4f7;
  max-width: 32ch;
}
.paper-note__q em { font-style: normal; color: #a8a8ff; }
.paper-note__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.paper-note__meta {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.66);
  max-width: 62ch;
}
.paper-note__meta b { color: #ffffff; font-weight: 500; }
/* Title and byline are two lines, not one flowing sentence. Each fits its own
   line comfortably (444px and 349px in a 635px box) — it only ever wrapped
   because the two shared a flow and the break landed mid-title. */
.paper-note__title,
.paper-note__by { display: block; }
.paper-note__title { color: #ffffff; font-weight: 500; }
.paper-note__by { margin-top: 2px; }
/* Keeps the author whole where the byline does wrap, i.e. on mobile. */
.paper-note__by b { white-space: nowrap; }
.paper-note__link {
  font-size: 14.5px;
  font-weight: 500;
  color: #a8a8ff;
  white-space: nowrap;
}
.paper-note__link:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .paper-note { margin-top: 48px; padding: 28px 24px; }
  .paper-note__q { font-size: 20px; letter-spacing: -.4px; max-width: none; }
}

/* ------------------------------------------------------------
   SNEAK PEEK — systems in production. Gradient cards, one per
   system: industry, what it is, the number it moved.
------------------------------------------------------------ */
.peek {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.peek__item {
  border: 1px solid rgba(94,94,255,.22);
  border-radius: 4px;
  padding: 26px 28px;
  background: linear-gradient(158deg, rgba(94,94,255,.08) 0%, rgba(94,94,255,.025) 62%, rgba(94,94,255,.01) 100%);
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.peek__ind {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.peek__title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--text);
}
.peek__body { font-size: 14px; line-height: 1.55; color: var(--muted); }
.peek__stat {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.peek__val {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -1.4px;
  color: var(--accent-text);
}
.peek__lbl { font-size: 13px; line-height: 1.4; color: var(--muted); max-width: 30ch; }
@media (max-width: 860px) {
  .peek { grid-template-columns: 1fr; }
}

/* The quote, folded into the outcomes section. */
.peek-quote {
  margin-top: 52px;
  max-width: 820px;
  border-left: 2px solid var(--accent);
  padding-left: 24px;
}
.peek-quote__q {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.4px;
  color: var(--text);
}
.peek-quote__attr {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 768px) {
  .peek-quote__q { font-size: 17px; }
}

/* ------------------------------------------------------------
   CONTACT MODAL — the Blueprint form, summoned from any CTA
   rather than parked at the foot of the page.
------------------------------------------------------------ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 20px 40px;
  overflow-y: auto;
  background: rgba(7,7,12,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  max-width: 640px;
  padding: 44px 44px 36px;
  position: relative;
}
.modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.modal__close:hover { color: var(--text); border-color: var(--text); }
.modal__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--text);
  margin-bottom: 10px;
}
.modal__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 28px;
}
@media (max-width: 560px) {
  .modal { padding: 32px 22px 26px; }
}

/* The factory teaser's stage strip. */
.stages-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin-top: 22px;
}
.stages-line__step {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 13px;
  white-space: nowrap;
}
.stages-line__sep { color: var(--accent-text); font-size: 12px; }