/* ─────────────────────────────────────────────
   STATS — Editorial impact blocks
   Each card has: badge, big number, label,
   trend indicator, hover sticker.
   Diagonal staircase: alternating heights.
─────────────────────────────────────────────  */
.stats-wrap {
  padding:64px 0 80px;
  position:relative;
}

/* Section header */
.stats-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:36px;
  gap:32px;
  flex-wrap:wrap;
}
.stats-head-left {
  display:flex;
  flex-direction:column;
  gap:14px;
}
.stats-head .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--ink);
  padding:6px 12px 6px 8px;
  background:var(--yellow);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--ink);
  align-self:flex-start;
}
.stats-head .eyebrow::before {
  content:'';
  width:9px; height:9px;
  border-radius:50%;
  background:var(--orange);
  border:1.5px solid var(--ink);
}
.stats-head h2 {
  font-family:var(--font-display);
  font-size:clamp(20px, 4vw, 44px);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.8px;
  color:var(--ink);
  text-transform:uppercase;
  max-width:560px;
}
.stats-head h2 em {
  font-style:normal;
  color:var(--orange-d);
  position:relative;
  display:inline-block;
}
.stats-head h2 em::after {
  content:'';
  position:absolute;
  left:-0.07em; right:-0.07em; bottom:0.34em;
  height:0.36em;
  background:var(--yellow);
  border-radius:0.07em;
  z-index:-1;
  transform:rotate(-1.5deg);
}
.stats-head-right {
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:7px;
  box-shadow: 0 2px 0 var(--ink);
}
.stats-head-right::before {
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  animation:livepulse 2s infinite;
}

.stats {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.stat {
  display:flex;
  flex-direction:column;
  padding:28px 24px 24px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:16px;
  box-shadow: 0 5px 0 var(--ink);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .25s;
  position:relative;
  z-index:1;
  min-height:220px;
}
.stat:hover {
  transform:translate(-2px,-4px);
  box-shadow: 0 9px 0 var(--ink);
}

/* Diagonal staircase positioning */
.stat:nth-child(1) { transform:translateY(0) }
.stat:nth-child(2) { transform:translateY(-16px); background:var(--yellow) }
.stat:nth-child(3) { transform:translateY(0); background:var(--ink); color:var(--white) }
.stat:nth-child(4) { transform:translateY(-16px); background:var(--orange); color:var(--white) }

.stat:nth-child(1):hover { transform:translate(-2px,-4px) }
.stat:nth-child(2):hover { transform:translate(-2px,-20px) }
.stat:nth-child(3):hover { transform:translate(-2px,-4px) }
.stat:nth-child(4):hover { transform:translate(-2px,-20px) }

/* Studs on top of each stat */
.stat-studs {
  position:absolute;
  top:-8px;
  left:22px;
  display:flex;
  gap:6px;
  z-index:30;
}
.stat-studs .stud { width:11px; height:11px; border-width:1.5px }

/* Top row: label badge + trend */
.stat-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:32px;
  position:relative;
  z-index:1;
}
.stat-label {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  padding:4px 9px 4px 6px;
  background:var(--white);
  border:1.5px solid var(--ink);
  border-radius:6px;
  box-shadow: 0 2px 0 var(--ink);
}
.stat-label::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background:var(--orange);
}
.stat:nth-child(3) .stat-label,
.stat:nth-child(4) .stat-label {
  background:var(--white);
  color:var(--ink);
}

.stat-trend {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  color:var(--green);
  padding:3px 8px;
  background:rgba(6,167,125,.12);
  border-radius:5px;
  border:1px solid rgba(6,167,125,.3);
}
.stat-trend svg { width:10px; height:10px }
.stat:nth-child(3) .stat-trend {
  background:rgba(6,167,125,.2);
  border-color:rgba(6,167,125,.5);
  color:#3FDDA7;
}
.stat:nth-child(4) .stat-trend {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  color:var(--white);
}

/* Big number */
.stat-n {
  font-family:var(--font-display);
  font-size:68px;
  font-weight:400;
  letter-spacing:-2.5px;
  line-height:.92;
  color:inherit;
  margin-bottom:14px;
  position:relative;
  z-index:1;
  display:flex;
  align-items:baseline;
  gap:2px;
}
.stat-n em {
  font-style:normal;
  color:var(--orange-d);
  font-size:48px;
  letter-spacing:-1.5px;
}
.stat:nth-child(2) .stat-n em { color:var(--ink) }
.stat:nth-child(3) .stat-n em { color:var(--orange) }
.stat:nth-child(4) .stat-n em { color:var(--yellow) }
.stat-n sup {
  font-size:24px;
  vertical-align:top;
  letter-spacing:0;
  margin-left:1px;
  color:var(--orange-d);
}
.stat:nth-child(2) .stat-n sup { color:var(--ink) }
.stat:nth-child(3) .stat-n sup { color:var(--orange) }
.stat:nth-child(4) .stat-n sup { color:var(--yellow) }

/* Label */
.stat-l {
  font-family:var(--font-ui);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  letter-spacing:-0.1px;
  padding-top:14px;
  border-top:1px dashed rgba(21,21,26,.2);
  position:relative;
  z-index:1;
}
.stat:nth-child(3) .stat-l {
  color:rgba(255,255,255,.85);
  border-top-color:rgba(255,255,255,.2);
}
.stat:nth-child(4) .stat-l {
  color:rgba(255,255,255,.92);
  border-top-color:rgba(255,255,255,.25);
}
.stat:nth-child(2) .stat-l { color:var(--ink); border-top-color:rgba(21,21,26,.3) }

.stat-l strong {
  font-weight:700;
  display:block;
  font-family:var(--font-display);
  font-size:11px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  margin-bottom:3px;
  color:inherit;
  opacity:.7;
}

/* Ghost number background */
.stat-ghost {
  position:absolute;
  right:14px;
  bottom:14px;
  font-family:var(--font-display);
  font-size:140px;
  line-height:.8;
  color:var(--ink);
  opacity:.04;
  pointer-events:none;
  z-index:0;
  text-transform:uppercase;
  letter-spacing:-4px;
}
.stat:nth-child(2) .stat-ghost { color:var(--ink); opacity:.07 }
.stat:nth-child(3) .stat-ghost { color:var(--white); opacity:.05 }
.stat:nth-child(4) .stat-ghost { color:var(--white); opacity:.08 }