/* ════════════════════════════════════════════════════════════════════
   VEXLOTEX — INSIGHTS PLATFORM (platform.html)
   One dark hero moment (audit-ledger motif) · light body
   Requires css/shared.css
   ════════════════════════════════════════════════════════════════════ */

/* ── Nav sits over the dark hero until scrolled ── */
.nav:not(.nav--scrolled) .nav-logo-img { display: none; }
.nav:not(.nav--scrolled) .nav-logo-img--light { display: block; }
.nav:not(.nav--scrolled) .nav-link { color: var(--m-muted); }
.nav:not(.nav--scrolled) .nav-link:hover,
.nav:not(.nav--scrolled) .nav-link[aria-current="page"] { color: var(--m-text); }
.nav:not(.nav--scrolled) .btn--primary { background: var(--m-ember); color: #16130F; }
.nav:not(.nav--scrolled) .nav-toggle { background: var(--m-surface); border-color: var(--m-border); }
.nav:not(.nav--scrolled) .nav-toggle span { background: var(--m-text); }
@media (max-width: 860px) {
  /* the dropdown panel itself stays light-on-light */
  .nav:not(.nav--scrolled) .nav-links { background: var(--surface); }
  .nav:not(.nav--scrolled) .nav-links .nav-link { color: var(--muted); }
  .nav:not(.nav--scrolled) .nav-links .btn--primary { background: var(--text); color: var(--bg); }
}

/* ── Dark hero moment ── */
.pf-hero {
  padding: var(--hero-pad-top-lg) 0 var(--sp-12);
}
.pf-hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--sp-8); align-items: center;
}
@media (max-width: 960px) { .pf-hero-grid { grid-template-columns: 1fr; } }
.pf-hero .t-h1 { margin: var(--sp-2) 0 var(--sp-3); max-width: 20ch; }
.pf-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* ── Included banner ── */
.pf-included {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  background: var(--surface-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-3) var(--sp-4);
  margin-top: calc(var(--sp-8) * -1 + var(--sp-2));
  position: relative; z-index: 3;
}
.pf-included .num { color: var(--ember-ink); font-size: var(--fs-lead); }

/* ── Capability cards ── */
.pf-cap { display: grid; gap: var(--sp-1); }
.pf-cap svg { stroke: var(--ember); margin-bottom: var(--sp-1); }
.pf-cap h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.pf-cap p { color: var(--muted); font-size: var(--fs-small); }

/* ── Path links ── */
.pf-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 860px) { .pf-paths { grid-template-columns: 1fr; } }
.pf-path-card { text-decoration: none; display: grid; gap: var(--sp-1); padding-top: 0; }
/* Photo band, same language as the gateway's .path-band. Rounded on the <img>
   rather than clipping the card, and pulled out through .card's --sp-4 padding. */
.pf-band {
  display: block;
  width: calc(100% + 2 * var(--sp-4));
  max-width: none;   /* see shared.css:129 img{max-width:100%} */
  margin: 0 calc(-1 * var(--sp-4)) var(--sp-2);
  aspect-ratio: 12 / 5;
  max-height: 160px;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
}
.pf-path-card .card-index { font-family: var(--font-mono); font-size: var(--fs-tiny); color: var(--ember-ink); letter-spacing: 0.12em; text-transform: uppercase; }
.pf-path-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.pf-path-card p { color: var(--muted); font-size: var(--fs-small); }

/* ── Annotated dashboard screenshots (capabilities proof) ── */
.pf-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 860px) { .pf-shots { grid-template-columns: 1fr; } }
.pf-shot-frame {
  position: relative;
  background: var(--m-bg);
  border: 1px solid var(--m-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
}
.pf-shot-img { display: block; width: 100%; height: auto; }
.pf-mark {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-ember); color: #16130F;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px rgba(255,106,43,0.22), 0 2px 10px rgba(0,0,0,0.5);
}
.pf-mark::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 14px; background: rgba(255,106,43,0.65);
  transform: translateX(-50%);
}
.pf-legend { list-style: none; display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0; padding: 0; }
.pf-legend li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-small); color: var(--muted); }
.pf-legend-num {
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  background: var(--ember-08); color: var(--ember-ink);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ════ v3 — flagship dashboard hero ════ */
.dash--flagship {
  background: #0B0A09;               /* one step deeper than the moment bg */
  border-color: rgba(233,229,225,0.12);
  transform: perspective(1200px) rotateX(4deg);
  transition: transform 0.3s ease;
  box-shadow: 0 40px 80px rgba(0,0,0,0.55), 0 0 60px rgba(255,106,43,0.10);
}
.dash--flagship:hover { transform: perspective(1200px) rotateX(0deg) translateY(-4px); }
.dash--flagship .dash-bar { background: rgba(8,7,6,0.95); }
.dash--flagship .dash-row { grid-template-columns: minmax(0,1fr) auto auto; }
@media (prefers-reduced-motion: reduce) {
  .dash--flagship { transform: none; }
}