/* ============================================================
   EFFLUX — home + shared page layout
   ============================================================ */

/* nav burger (mobile) */
.nav__burger { display: none; width: 30px; height: 24px; border: 0; background: none; cursor: pointer; position: relative; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 3px; right: 3px; height: 2px; background: var(--ink);
}
.nav__burger span { top: 11px; }
.nav__burger span::before { top: -7px; } .nav__burger span::after { top: 7px; }

/* ---------------- Hero ---------------- */
.hero { padding: 78px 0 96px; background:
  radial-gradient(120% 100% at 88% 0%, var(--teal-7) 0%, rgba(229,241,241,0) 55%),
  var(--paper); }
.hero__grid { display: grid; grid-template-columns: 1.02fr 1.18fr; gap: 64px; align-items: center; }
.hero__title { margin: 26px 0 0; }
.hero__lead { margin: 26px 0 34px; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  margin: 48px 0 0; padding-top: 30px; border-top: 1px solid var(--line);
}
.hero__stats div { display: flex; flex-direction: column; gap: 8px; }
.hero__stats dt { font: 600 26px/1 var(--font-sans); color: var(--teal-1); letter-spacing: 0.01em; }
.hero__stats dd { margin: 0; font: 400 12.5px/1.45 var(--font-sans); color: var(--ink-2); }

.hero__card { background: var(--paper); border: 1px solid var(--line); padding: 26px 28px 30px; box-shadow: 0 34px 60px -42px rgba(12,57,64,.45); }
.hero__card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hero__card-head .mono { color: var(--ink-3); }
.hero__viz-cap { margin: 22px 4px 0; font: 400 13px/1.55 var(--font-sans); color: var(--ink-2); max-width: 52ch; }

/* ---------------- Problem band ---------------- */
.problem { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.problem__lead .eyebrow { margin-bottom: 18px; }
.problem__lead h2 { color: var(--ink); }
.problem__body .lead { margin-bottom: 26px; }

/* ---------------- Pipeline section ---------------- */
.pipeline-wrap { background: var(--paper); border: 1px solid var(--line); padding: 40px 42px 36px; box-shadow: 0 30px 60px -48px rgba(12,57,64,.4); }
.section-foot { margin-top: 44px; }
.section--ink .section-foot, .section-foot { display: flex; }

/* ---------------- Leadership ---------------- */
.lead-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 64px; align-items: center; }
.lead-portrait { position: relative; }
.lead-portrait__tag {
  position: absolute; left: 0; bottom: 0; transform: translateY(50%);
  background: var(--ink); color: #fff; padding: 8px 13px; letter-spacing: 0.1em; line-height: 1.35;
  font-size: 9px; white-space: nowrap;
}
.lead-copy .eyebrow { margin-bottom: 18px; }
.lead-copy h2 { margin-bottom: 22px; }
.lead-copy p { color: var(--ink-2); max-width: 56ch; }
.lead-copy .textlink { margin-top: 12px; }

/* ---------------- CTA band ---------------- */
.cta { background: var(--teal-1); color: #fff; padding: 84px 0; }
.cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta h2 { color: #fff; }

@media (max-width: 980px) {
  .hero__grid, .problem, .lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__stats { gap: 18px; }
}
@media (max-width: 900px) {
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start;
    gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px 18px; display: none; }
  .nav__links.open { display: flex; }
  .hero__stats { grid-template-columns: 1fr; }
  .pipeline-wrap { padding: 22px 18px; overflow-x: auto; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}