/* ============================================================
   16 · Premium homepage extras — credibility stats band,
   hero stat chip, case-study metric badges (homepage only)
   Loaded after 14-responsive, before 15-reduced-motion.
   ============================================================ */

/* ---------- Credibility stats band ---------- */
.stats-band {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-900), var(--ink-950));
  padding: clamp(40px, 6vw, 64px) 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-cell { position: relative; text-align: center; padding: 6px 12px; }
.stat-cell + .stat-cell::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: var(--line);
}
.stat-num {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -.03em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-value { display: inline-block; min-width: 1ch; }
.stat-suffix { font-size: .72em; vertical-align: baseline; }
.stat-label { margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--white); }
.stat-sub {
  margin-top: 4px; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--slate-500);
}

/* ---------- Hero stat chip ("100+ projects") ---------- */
.stat-chip { padding: 13px 18px; min-width: 132px; }
.stat-chip-num {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-chip-num span { font-size: 1.05rem; }
.stat-chip-label {
  display: block; margin-top: 7px; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; color: var(--slate-100);
}
.stat-chip-sub {
  display: block; margin-top: 3px; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500);
}
.chip-a.stat-chip { top: auto; bottom: 6%; left: -2%; }
.chip-c { top: 3%; left: 2%; bottom: auto; }

/* ---------- Case study metric badges ---------- */
.case-metric {
  position: absolute; z-index: 2; top: clamp(16px, 3vw, 28px); right: clamp(16px, 3vw, 28px);
  min-width: 118px; text-align: center; padding: 13px 16px; border-radius: 16px;
  background: rgba(8, 13, 24, .78); border: 1px solid rgba(34, 211, 238, .5);
  backdrop-filter: blur(8px); box-shadow: 0 16px 40px -16px rgba(2, 6, 16, .85);
}
.slide.active .case-metric { animation: caption-in .6s var(--ease); }
.case-metric-value {
  display: block; font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.02em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.case-metric-label {
  display: block; margin-top: 7px; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--slate-300);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
  .stat-cell:nth-child(3)::before { display: none; }
}
@media (max-width: 600px) {
  .stats-grid { gap: 22px 14px; }
  .stat-num { font-size: clamp(2rem, 9vw, 2.6rem); }
}
@media (max-width: 480px) {
  .case-metric { min-width: 96px; padding: 10px 12px; }
  .case-metric-label { font-size: .52rem; }
  .stat-chip { min-width: 118px; padding: 11px 14px; }
}