/* Zeduno — About page. Reuses the shared lp-eyebrow/lp-h1/lp-h2/lp-lead/lp-btn
   system from landing.css; everything here is page-local layout: the hero,
   bordered card grids (agents, stats, principles) and the badge row. */

.ab-hero { padding: calc(var(--topbar-height) + 96px) 0 40px; }
.ab-hero .lp-h1 { max-width: 16ch; }
.ab-hero .lp-lead { margin-top: 22px; max-width: 62ch; }

.ab-section { padding: 64px 0; }
.ab-section .lp-eyebrow { margin-bottom: 18px; }
.ab-section .lp-h2 { max-width: 20ch; }
.ab-section .lp-lead { margin-top: 16px; max-width: 62ch; }
.ab-section .lp-lead + .lp-lead { margin-top: 14px; }

.ab-divider { border: none; border-top: 1px solid var(--border); margin: 0; }

/* ---- bordered card grid, shared shell for agents / principles ---- */
.ab-cards { display: grid; gap: 20px; margin-top: 36px; }
.ab-cards-2 { grid-template-columns: repeat(2, 1fr); }
.ab-cards-3 { grid-template-columns: repeat(3, 1fr); }

.ab-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  padding: 28px;
}
.ab-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 10px; }
.ab-card p { margin: 0; font-size: 14.5px; line-height: var(--leading-relaxed); color: var(--muted); }

.ab-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  background: var(--brand-tint); color: var(--violet-200);
  font-size: 13px; font-weight: 500;
}
.ab-chip .zdi { color: var(--brand-light); }

.ab-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--brand-tint); color: var(--brand-light);
}

/* ---- stat cards ---- */
.ab-stats { margin-top: 36px; }
.ab-stats .ab-card {
  border-color: var(--border-violet);
  background: var(--glass-fill-strong);
  box-shadow: var(--shadow-glass);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ab-stats .ab-card:hover { border-color: var(--brand-light); transform: translateY(-2px); }
/* Higher specificity than .ab-card p's muted color — that was silently
   winning the color before and flattening these to gray. */
.ab-card .ab-stat-num {
  font-family: var(--font-display); font-size: clamp(2.1rem, 2.8vw, 2.6rem);
  font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-card .ab-stat-label { margin: 0; font-size: 14px; line-height: var(--leading-relaxed); color: var(--muted); }

/* ---- founder badges ---- */
.ab-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ab-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--ink-soft);
  font-size: 13.5px; font-weight: 500;
}
.ab-badge .zdi { color: var(--brand-light); }

@media (max-width: 800px) {
  .ab-cards-2, .ab-cards-3 { grid-template-columns: 1fr; }
}