/* =========================================
   ONT STATS SECTION — institutional / premium
   Horizontal layout on all sizes
   Icon + numbers centered in card
   Global MQ structure: 576 / 768 / 992 / 1200 / 1400
========================================= */

.section-stats-ont {
  --st-font-display: "Manrope", "Avenir Next", "Avenir", sans-serif;
  --st-font-body: "Roboto", system-ui, sans-serif;

  --st-brown: #391a00;
  --st-orange: #ef8e01;
  --st-teal: #009e96;
  --st-text: #19130f;
  --st-muted: rgba(42, 30, 22, 0.78);
  --st-border: rgba(57, 26, 0, 0.09);
  --st-shadow: 0 16px 38px rgba(25, 18, 10, 0.06);

  /* internal sizing vars */
  --st-card-min-h: 118px;
  --st-card-radius: 18px;
  --st-card-pad-y: 1rem;
  --st-card-pad-x: 1rem;
  --st-card-gap: 0.9rem;
  --st-icon-size: 58px;
  --st-icon-inner: 30px;
  --st-body-col: 11.2rem;

  /* numeric alignment vars */
  --st-prefix-col: 1ch;
  --st-value-col: 3.4ch;
  --st-value-row-h: 2.5rem;

  position: relative;
  overflow: clip;
  padding-block: 4.25rem;
  background:
    radial-gradient(circle at 8% 12%, rgba(239, 142, 1, 0.08), transparent 36%),
    radial-gradient(circle at 92% 84%, rgba(0, 158, 150, 0.08), transparent 34%),
    linear-gradient(180deg, #f8f6f1 0%, #f2efe8 100%);
  color: var(--st-text);
  font-family: var(--st-font-body);
}

.section-stats-ont::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 14rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 158, 150, 0.12), transparent 70%);
  pointer-events: none;
}

.section-stats-ont::after {
  content: "";
  position: absolute;
  left: -5rem;
  bottom: -5rem;
  width: 16rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 142, 1, 0.10), transparent 72%);
  pointer-events: none;
}

.stats-ont__container {
  position: relative;
  z-index: 1;
}

/* =========================
   Head
========================= */
.stats-ont__head {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.8rem;
}

.stats-ont__head-copy {
  min-width: 0;
}

.stats-ont__eyebrow {
  margin: 0;
  font-family: var(--st-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(57, 26, 0, 0.74);
}

.stats-ont__title {
  margin: 0.35rem 0 0;
  font-family: var(--st-font-display);
  font-size: clamp(1.25rem, 1vw + 1rem, 2.15rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #15110d;
  text-wrap: balance;
  max-width: 26ch;
}

.stats-ont__lead {
  margin: 0.65rem 0 0;
  max-width: 64ch;
  color: var(--st-muted);
  line-height: 1.6;
  font-size: 0.88rem;
}

.stats-ont__mark {
  display: none;
  width: 28px;
  height: 20px;
  opacity: 0.92;
  flex: 0 0 auto;
}

.stats-ont__mark--line {
  width: 22px;
  height: 16px;
  opacity: 0.88;
}

.stats-ont__divider {
  margin-top: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.stats-ont__divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(239, 142, 1, 0.32),
    rgba(0, 158, 150, 0.18),
    rgba(57, 26, 0, 0.08)
  );
}

/* =========================
   Grid
========================= */
.stats-ont__grid {
  margin-top: 1.35rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
  align-items: stretch;
}

/* =========================
   Cards
========================= */
.stat-card {
  position: relative;
  min-width: 0;
  height: 100%;

  /* icon + body centered as one cluster */
  display: grid;
  grid-template-columns: auto minmax(0, var(--st-body-col));
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: var(--st-card-gap);

  min-height: var(--st-card-min-h);
  padding: var(--st-card-pad-y) var(--st-card-pad-x);
  border-radius: var(--st-card-radius);
  border: 1px solid var(--st-border);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  box-shadow: var(--st-shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;

  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.stat-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-card:hover {
  border-color: rgba(57, 26, 0, 0.12);
  box-shadow: 0 18px 42px rgba(22, 18, 12, 0.08);
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.40), transparent);
  pointer-events: none;
}

.stat-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--st-orange), var(--st-teal));
}

/* icon */
.stat-card__icon-wrap {
  width: var(--st-icon-size);
  height: var(--st-icon-size);
  border-radius: 15px;
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;

  background: linear-gradient(
    135deg,
    rgba(239,142,1,.15),
    rgba(0,158,150,.13),
    rgba(57,26,0,.06)
  );
  border: 1px solid rgba(57, 26, 0, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 6px 14px rgba(0,0,0,.05);
}

.stat-card__icon-wrap::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.35);
}

.stat-card__icon {
  width: var(--st-icon-inner);
  height: var(--st-icon-inner);
  object-fit: contain;
  display: block;
  opacity: 0.95;
}

/* centered body */
.stat-card__body {
  min-width: 0;
  width: 100%;
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-rows:
    minmax(var(--st-value-row-h), auto)
    minmax(1.2em, auto)
    minmax(1.05em, auto);
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* perfectly aligned numeric row */
.stat-card__value-line {
  display: grid;
  grid-template-columns: var(--st-prefix-col) var(--st-value-col);
  justify-content: center;
  align-items: baseline;
  column-gap: 0.22rem;
  line-height: 1;
  min-height: var(--st-value-row-h);
}

.stat-card__prefix {
  width: var(--st-prefix-col);
  text-align: center;
  font-family: var(--st-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--st-teal);
  transform: translateY(-2px);
}

.stat-card__value {
  width: var(--st-value-col);
  text-align: center;
  font-family: var(--st-font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--st-brown);
  font-size: clamp(2.05rem, 1vw + 1.8rem, 2.9rem);
  line-height: 0.95;
  display: inline-block;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.stat-card__label {
  margin: 0.28rem 0 0;
  max-width: 18ch;
  font-family: var(--st-font-display);
  font-weight: 700;
  color: var(--st-text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.stat-card__meta {
  margin: 0.14rem 0 0;
  max-width: 20ch;
  color: var(--st-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

/* micro chart accent */
.stat-card__accent {
  position: absolute;
  right: 0.75rem;
  bottom: 0.65rem;
  width: 56px;
  height: 16px;
  opacity: 0.75;
  pointer-events: none;
}

.stat-card__accent .line {
  position: absolute;
  inset: 7px 0 auto 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(239,142,1,.16),
    rgba(239,142,1,.42),
    rgba(0,158,150,.40),
    rgba(0,158,150,.14)
  );
}

.stat-card__accent .dot {
  position: absolute;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(239,142,1,.65);
  box-shadow: 0 0 0 2px rgba(255,255,255,.45);
}

.stat-card__accent .dot-1 { left: 12px; }
.stat-card__accent .dot-2 {
  left: 38px;
  border-color: rgba(0,158,150,.65);
}

/* =========================================
   GLOBAL BREAKPOINT STRUCTURE
========================================= */

@media (min-width: 576px) {
  .section-stats-ont {
    --st-card-min-h: 126px;
    --st-card-radius: 20px;
    --st-card-pad-y: 1.05rem;
    --st-card-pad-x: 1.05rem;
    --st-body-col: 11.8rem;

    --st-value-col: 3.45ch;
    --st-value-row-h: 2.6rem;

    padding-block: 4.5rem;
  }

  .stats-ont__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .stat-card__value {
    font-size: clamp(2.15rem, 1vw + 1.85rem, 3rem);
  }
}

@media (min-width: 768px) {
  .section-stats-ont {
    --st-card-min-h: 136px;
    --st-card-gap: 0.95rem;
    --st-body-col: 12.5rem;

    --st-value-col: 3.5ch;
    --st-value-row-h: 2.7rem;

    padding-block: 4.9rem;
  }

  .stats-ont__head {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 1rem;
  }

  .stats-ont__mark {
    display: block;
  }

  .stats-ont__lead {
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .stats-ont__grid {
    margin-top: 1.4rem;
    gap: 1.05rem;
  }

  .stat-card__value {
    font-size: clamp(2.25rem, 1vw + 1.9rem, 3.05rem);
  }

  .stat-card__label {
    font-size: 0.94rem;
  }

  .stat-card__meta {
    font-size: 0.76rem;
  }

  .stat-card__accent {
    width: 60px;
    right: 0.8rem;
  }

  .stat-card__accent .dot-1 { left: 13px; }
  .stat-card__accent .dot-2 { left: 40px; }
}

@media (min-width: 992px) {
  .section-stats-ont {
    --st-card-min-h: 160px;
    --st-card-pad-y: 1.1rem;
    --st-card-pad-x: 1rem;
    --st-card-gap: 1rem;
    --st-icon-size: 62px;
    --st-icon-inner: 32px;
    --st-body-col: 10.8rem;

    --st-prefix-col: 1.05ch;
    --st-value-col: 3.55ch;
    --st-value-row-h: 2.95rem;
  }

  .stats-ont__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .stat-card {
    border-radius: 20px;
  }

  .stat-card__prefix {
    font-size: 2.25rem;
  }

  .stat-card__value {
    font-size: clamp(2.45rem, 0.9vw + 2rem, 3.15rem);
    line-height: 0.92;
  }

  .stat-card__label {
    font-size: 0.9rem;
  }

  .stat-card__meta {
    font-size: 0.74rem;
  }

  .stat-card__accent {
    width: 66px;
    right: 0.85rem;
    bottom: 0.7rem;
  }

  .stat-card__accent .dot-1 { left: 13px; }
  .stat-card__accent .dot-2 { left: 42px; }
}

@media (min-width: 1200px) {
  .section-stats-ont {
    --st-card-min-h: 176px;
    --st-card-pad-y: 1.2rem;
    --st-card-pad-x: 1.1rem;
    --st-card-gap: 1.05rem;
    --st-icon-size: 66px;
    --st-icon-inner: 34px;
    --st-body-col: 11.6rem;

    --st-prefix-col: 1.1ch;
    --st-value-col: 3.65ch;
    --st-value-row-h: 3.1rem;

    padding-block: 5.2rem;
  }

  .stats-ont__head {
    gap: 1.2rem;
  }

  .stats-ont__grid {
    gap: 1.1rem;
  }

  .stat-card__value {
    font-size: clamp(2.65rem, 0.95vw + 2.05rem, 3.25rem);
  }

  .stat-card__label {
    font-size: 0.94rem;
  }

  .stat-card__meta {
    font-size: 0.76rem;
  }

  .stat-card__accent {
    width: 68px;
  }
}

@media (min-width: 1400px) {
  .section-stats-ont {
    --st-card-min-h: 186px;
    --st-card-pad-y: 1.25rem;
    --st-card-pad-x: 1.15rem;
    --st-body-col: 12.2rem;

    --st-value-col: 3.75ch;
    --st-value-row-h: 3.2rem;

    padding-block: 5.6rem;
  }

  .stat-card__value {
    font-size: clamp(2.8rem, 1vw + 2.1rem, 3.35rem);
  }

  .stat-card__accent {
    width: 72px;
  }
}