/* ============================================================================
   Home page — page-specific composition styles. Imported on top of site.css.
   Adds the hero block, viz panel, and pillar layouts.
   ========================================================================== */

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(80px, 10vw, 128px);
  isolation: isolate;
  overflow: hidden;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.hero__inner > .pill { margin-bottom: var(--s-3); }
.hero__inner h1 { max-width: 18ch; }
.hero__inner .lead { max-width: 64ch; }
.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 var(--s-2); }
.hero__meta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin: var(--s-3) 0 0; color: var(--text-muted); font-size: 13px; }

.hero__viz {
  position: relative;
  margin-top: var(--s-7);
}
.hero__viz-panel {
  position: relative;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  border: 1px solid var(--border-strong);
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.7), 0 0 0 1px var(--border) inset;
  overflow: hidden;
}
.hero__viz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.hero__viz-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-tertiary-solid);
}
.hero__viz-dot:nth-of-type(1) { background: #ef4444aa; }
.hero__viz-dot:nth-of-type(2) { background: #f59e0baa; }
.hero__viz-dot:nth-of-type(3) { background: #22c55eaa; }
.hero__viz-title { color: var(--text-secondary); margin-left: 12px; }

.hero__viz-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
@media (max-width: 900px) { .hero__viz-body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hero__viz-body { grid-template-columns: 1fr; } }

.hero__viz-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 24px;
  background: var(--bg-secondary);
}
.hero__viz-tile small { color: var(--text-muted); font-size: 12px; letter-spacing: 0.02em; }
.hero__viz-tile strong {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.05;
}
.hero__viz-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--bg-tertiary-solid);
}
.hero__viz-bar i { display: block; height: 100%; }

/* ─── Pillars ──────────────────────────────────────────────────────────── */
.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.pillar {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7);
  align-items: center;
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar--reverse .pillar__top { order: 2; }
.pillar__top { display: flex; flex-direction: column; gap: var(--s-3); max-width: 48ch; }
.pillar__top .checks { margin: var(--s-2) 0 var(--s-3); }
.pillar__top .btn { align-self: flex-start; }

@media (max-width: 960px) {
  .pillar { grid-template-columns: 1fr; gap: var(--s-5); }
  .pillar--reverse .pillar__top { order: 0; }
}

/* ─── Agent meta (pillar 04) ──────────────────────────────────────────── */
.agent-meta {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.agent-meta > div {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}
.agent-meta > div:nth-child(odd) { border-right: 1px solid var(--border); }
.agent-meta dt {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.agent-meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
}

/* ─── Quote ────────────────────────────────────────────────────────────── */
.quote {
  margin: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.quote__mark { color: var(--accent); opacity: 0.4; }
.quote blockquote {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--text-primary);
  letter-spacing: -0.012em;
  font-weight: 500;
}
.quote figcaption { color: var(--text-muted); font-size: 13.5px; }
.quote figcaption strong { color: var(--text-primary); font-weight: 600; }

/* ─── Meet the Warden ──────────────────────────────────────────────────── */
.warden-meet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-6);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(99,102,241,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-secondary), var(--bg-primary));
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.6);
}
.warden-meet__mark {
  width: 160px; height: 160px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(34,211,238,0.10), transparent 70%),
    var(--bg-tertiary-solid);
  border: 1px solid var(--border);
}
.warden-meet__mark img { display: block; width: 128px; height: 128px; }
.warden-meet__copy { display: flex; flex-direction: column; gap: var(--s-2); }
.warden-meet__copy .eyebrow { margin: 0; }

@media (max-width: 720px) {
  .warden-meet { grid-template-columns: 1fr; text-align: left; }
  .warden-meet__mark { width: 100%; max-width: 200px; }
}