/* EQBuddy Evolved landing — tokens are ThemePalettes.cs["BlueGrey"] mapped
   onto the Founder example chrome (FABLE.md plan §3, DRA-48; uniform BlueGrey
   per the Founder T4 look, 2026-09-10). */

/* The app's own bundled face (DRA-56, salvaged from the closed #510). Three STATIC
   faces where Inter was one variable file, so every weight this sheet asks for has a
   real face behind it — 400/600/700, measured off the TTFs. There is no 650 face and
   CSS would round one UP to 700, collapsing the pills into the headings, so the seven
   650s below are mapped to 600 deliberately. */
@font-face {
  font-family: "EQBuddy Sans";
  src: url("../fonts/EQBuddySans.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EQBuddy Sans";
  src: url("../fonts/EQBuddySans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "EQBuddy Sans";
  src: url("../fonts/EQBuddySans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #181c21;
  --deep: #111317;
  --panel: rgba(32, 36, 43, 0.8);
  --panel2: rgba(36, 40, 48, 0.85);
  --line: rgba(228, 233, 239, 0.14);
  --text: #e4e9ef;
  --muted: #8b96a3;
  --accent: #5fa8d3;
  --accent2: #4e8fc2;
  --good: #6fbf7f;
  --warn: #e0a030;
  --alert: #d9634f;
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--deep);
  color: var(--text);
  font-family: "EQBuddy Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Fixed backdrop: accent radial glows over a faint grid (Ex1 chrome; BlueGrey accents) */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(720px 480px at 11% 10%, rgba(95, 168, 211, 0.14), transparent 60%),
    radial-gradient(640px 440px at 88% 30%, rgba(78, 143, 194, 0.11), transparent 60%),
    radial-gradient(760px 520px at 50% 88%, rgba(139, 150, 163, 0.08), transparent 65%),
    var(--deep);
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}

/* Scroll progress bar */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 60;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--good));
}

/* Floating pill topbar */
.topbar {
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 19, 23, 0.78);
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding-right: 10px;
  border-right: 1px solid var(--line);
  margin-right: 6px;
}
.topbar .brand img { width: 20px; height: 20px; }
.topbar a.nav {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  padding: 5px 10px;
  border-radius: 999px;
}
.topbar a.nav:hover, .topbar a.nav:focus-visible { color: var(--text); background: rgba(92, 138, 194, 0.2); }
.topbar a.gh { color: var(--accent); }
/* Quiet optional support chip (DRA-69) — top-right of the bar, not a CTA shout */
.topbar a.support {
  margin-left: 2px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.topbar a.support:hover, .topbar a.support:focus-visible {
  color: var(--accent);
  border-color: rgba(95, 168, 211, 0.45);
  background: rgba(95, 168, 211, 0.08);
}

/* Right-edge dot nav with hover labels */
.dotnav {
  position: fixed;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dotnav a {
  position: relative;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
  border: 1px solid transparent;
}
.dotnav a:hover, .dotnav a:focus-visible { background: var(--accent2); }
.dotnav a.active { background: var(--accent); box-shadow: 0 0 0 4px rgba(95, 168, 211, 0.2); }
.dotnav a span {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.dotnav a:hover span, .dotnav a:focus-visible span { opacity: 1; }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

section { padding: 88px 0 40px; scroll-margin-top: 70px; }

/* Numbered section headings */
.kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.kicker .num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.kicker .rule { flex: 1; height: 1px; background: var(--line); }
section h2 { font-size: clamp(26px, 4vw, 36px); line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; }
.sub { color: var(--muted); max-width: 62ch; margin: 0 0 34px; }

/* ---------- Hero ---------- */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 120px;
}
.herogrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}
.hero h1 {
  font-size: clamp(38px, 7vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.grad {
  background: linear-gradient(100deg, #97c6e2, #5fa8d3 55%, #a8bccb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .tagline {
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--text);
  margin: 0 0 18px;
}
.hero .lead {
  font-size: clamp(16px, 2vw, 19px);
  color: var(--muted);
  max-width: 44ch;
  margin: 0 0 8px;
}
.hero .lead strong { color: var(--text); font-weight: 600; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.heroshot { margin: 0; }
.quiet { margin: 0 0 4px; font-size: 13.5px; color: var(--muted); }
.quiet code {
  font-family: Consolas, ui-monospace, monospace;
  font-size: 12px;
  background: rgba(228, 233, 239, 0.07);
  padding: 1px 6px;
  border-radius: 5px;
}
.quiet .sep { padding: 0 8px; }

/* Honest KPI band */
.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 600px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.kpi { background: var(--panel); padding: 18px 20px; }
.kpi .n { font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: -0.01em; }
.kpi .l { font-size: 13px; color: var(--muted); margin-top: 2px; }
.kpi .note { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

/* ---------- Chain stack ---------- */
.stack { display: flex; flex-direction: column; gap: 0; }
.layer {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  position: relative;
}
.layer:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.layer + .layer { border-top: 0; }
.layer::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent2);
  opacity: 0.65;
}
.layer .stage {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.layer p { margin: 0; color: var(--muted); font-size: 14.5px; }
.layer:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.chainline { margin: 18px 0 30px; color: var(--text); font-size: 16px; }
.pair { align-items: start; }
.pair .shot { margin: 0; }
.cap.center { text-align: center; }

/* ---------- Card grids ---------- */
.grid { display: grid; gap: 20px; }
.grid.cols2 { grid-template-columns: repeat(2, 1fr); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 22px;
  box-shadow: inset 0 1px 0 rgba(228, 233, 239, 0.05);
}
.card.accent { box-shadow: inset 3px 0 0 var(--accent2); }
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.shot {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--deep);
}
.shot img { display: block; width: 100%; height: auto; }
.shot.tall img { max-height: 340px; object-fit: cover; object-position: top; }
figcaption.cap, .cap { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* Provenance badges (Ex2 cherry-pick, per plan §2) */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}
.badge.observed { background: rgba(111, 191, 127, 0.16); color: var(--good); border: 1px solid rgba(111, 191, 127, 0.4); }
.badge.estimated { background: rgba(224, 160, 48, 0.14); color: var(--warn); border: 1px solid rgba(224, 160, 48, 0.4); }

/* ---------- 02 While you play ---------- */
.shot.strip { margin: 0 0 20px; border: 0; border-radius: 0; background: none; overflow: visible; }
.shot.strip img {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.playclips { align-items: start; }
.playclips .shot { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.playclips .shot img { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cap strong { color: var(--text); font-weight: 600; }

/* ---------- 04 Built differently ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  margin-bottom: 30px;
}
.tl { background: var(--panel); padding: 18px 22px; }
.tl h3 { margin: 0 0 4px; font-size: 16px; }
.tl p { margin: 0; color: var(--muted); font-size: 14.5px; }
.getit { margin-bottom: 60px; }
.getit .btn { margin: 0 0 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
}
.btn.primary { background: var(--accent); color: #111317; }
.btn.primary:hover { background: #97c6e2; }
/* Coming soon (DRA-373 CTA variant B): a status, not a link — no hover, no pointer. */
.btn.primary.soon, .btn.primary.soon:hover { background: var(--accent); cursor: default; }
.btn.ghost { border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent2); color: var(--accent); }

footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  color: var(--muted);
  font-size: 13.5px;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
a { color: var(--accent); }

/* Reveal-on-scroll: default VISIBLE; JS adds .js and arms the transition, so the
   page reads fully with JS disabled (T1 acceptance). */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Breakpoints (Ex1: 1030 / 730) ---------- */
@media (max-width: 1030px) {
  .dotnav { display: none; }
  .herogrid { grid-template-columns: 1fr; }
}
@media (max-width: 730px) {
  .topbar { max-width: calc(100vw - 20px); overflow-x: auto; }
  .topbar a.nav { padding: 5px 7px; }
  .grid.cols2 { grid-template-columns: 1fr; }
  .layer { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .trust { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  section { padding: 64px 0 28px; }
  .hero { padding-top: 130px; min-height: 0; }
}

/* ---------- Print ---------- */
@media print {
  .backdrop, #progress, .topbar, .dotnav { display: none; }
  body { background: #fff; color: #111; }
  .card, .layer, .kpi, .tl { background: #fff; border-color: #ccc; box-shadow: none; }
  .card p, .layer p, .sub, .kpi .l, .kpi .note, .cap, .tl p, .quiet { color: #444; }
  .grad { color: #1f5c8a; -webkit-text-fill-color: #1f5c8a; }
  a { color: #1f5c8a; }
}

/* ---------- Lightbox (DRA-48 refine): click any capture or clip to expand it.
   Esc, the ✕, or a click anywhere dismisses. Built by landing.js only when JS
   runs — without it the images are plain images, per the T1 acceptance. ---------- */
.js .shot img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(8, 10, 13, 0.9);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  cursor: zoom-out;
}
.lightbox .lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  line-height: 1;
  padding: 10px 14px;
  cursor: pointer;
}
.lightbox .lb-close:hover,
.lightbox .lb-close:focus-visible { border-color: var(--accent2); color: var(--accent); }