/* ================= BLOCK: ABOUT STATS ================= */
.c-about-stats {
  position: relative;
  width: 100%;
  overflow-x: clip; 
  box-sizing: border-box;
  padding: var(--opt-d) var(--opr-d) var(--opb-d) var(--opl-d);
}

.c-about-stats * {
  box-sizing: border-box;
}

.c-about-stats__max-width {
  max-width: var(--as-mw);
  margin: 0 auto;
}

.c-about-stats__wrap {
  display: flex;
  flex-direction: column;
  background: var(--as-bg);
  border-radius: var(--rad-wrap-d);
  padding: var(--pt-d) var(--pr-d) var(--pb-d) var(--pl-d);
  box-shadow: var(--wrap-shad-d);
  
  transform: rotate(var(--rot-d));
  transition: transform 0.4s ease;
  transform-origin: center; 
}

.c-about-stats__wrap:hover {
  transform: rotate(0deg);
}

/* ================= 1. HEADER SECTION ================= */
.c-about-stats__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  order: 1;
  margin-bottom: var(--gap-head-d);
}

.c-about-stats__h-texts {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: var(--al-htxt-d);
}

.c-about-stats__h-tag {
  font-family: var(--ff-htg-d);
  font-size: var(--fs-htg-d);
  font-weight: var(--fw-htg-d);
  line-height: var(--lh-htg-d);
  color: var(--as-c-htag);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.c-about-stats__h-tit {
  font-family: var(--ff-hti-d);
  font-size: var(--fs-hti-d);
  font-weight: var(--fw-hti-d);
  line-height: var(--lh-hti-d);
  color: var(--as-c-htit);
  margin: 0;
  letter-spacing: -2px;
}
.c-about-stats__h-tit em {
  font-family: var(--font-secondary, serif);
  font-weight: 400;
  font-style: italic;
}

.c-about-stats__h-btn {
  align-self: var(--b-as-d);
  width: var(--b-w-d);
  justify-content: var(--b-jc-d);
  
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 16px 24px;
  border-radius: 800px;
  background-color: var(--as-c-bbg);
  color: var(--as-c-btxt);
  border: 1px solid var(--as-c-bbor);
  font-family: var(--ff-btn-d);
  font-size: var(--fs-btn-d);
  font-weight: var(--fw-btn-d);
  line-height: var(--lh-btn-d);
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
  text-align: center;
}
.c-about-stats__h-btn:hover { background-color: var(--as-c-bbg-h); color: var(--as-c-btxt-h); border-color: var(--as-c-bbor-h); }
.c-about-stats__h-btn:focus-visible { background-color: var(--as-c-bbg-f); color: var(--as-c-btxt-f); border-color: var(--as-c-bbor-f); outline: none; }
.c-about-stats__h-btn:focus:not(:focus-visible) { outline: none; }

.c-about-stats__h-btn--mob { display: none; }

/* ================= 2. STATS GRID ================= */
.c-about-stats__grid {
  order: 2;
  display: grid;
  grid-template-columns: repeat(var(--cs-d), 1fr);
  gap: var(--gap-main-d);
  margin-bottom: 0;
}

/* Cards */
.c-about-stats__card {
  background-color: var(--as-c-cbg);
  border-radius: var(--rad-card-d);
  padding: var(--cpt-d) var(--cpr-d) var(--cpb-d) var(--cpl-d);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-st-d);
}

.c-about-stats__cnum {
  font-family: var(--ff-cnum-d);
  font-size: var(--fs-cnum-d);
  font-weight: var(--fw-cnum-d);
  line-height: var(--lh-cnum-d);
  color: var(--as-c-cnum);
  letter-spacing: -2px;
}

.c-about-stats__clab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-clab-d);
  font-size: var(--fs-clab-d);
  font-weight: var(--fw-clab-d);
  line-height: var(--lh-clab-d);
  color: var(--as-c-clab);
}
.c-about-stats__clab svg {
  color: var(--as-c-cico);
  flex-shrink: 0;
}


/* ================= TABLET (<= 1024px) ================= */
@media (max-width: 1024px) {
  .c-about-stats { padding: var(--opt-t) var(--opr-t) var(--opb-t) var(--opl-t); }

  .c-about-stats__wrap {
    border-radius: var(--rad-wrap-t);
    padding: var(--pt-t) var(--pr-t) var(--pb-t) var(--pl-t);
    box-shadow: var(--wrap-shad-t);
    transform: rotate(var(--rot-t));
  }

  .c-about-stats__header { margin-bottom: var(--gap-head-t); }
  .c-about-stats__h-texts { text-align: var(--al-htxt-t); }
  .c-about-stats__h-btn { align-self: var(--b-as-t); width: var(--b-w-t); justify-content: var(--b-jc-t); }

  .c-about-stats__h-tag { font-size: var(--fs-htg-t); font-weight: var(--fw-htg-t); }
  .c-about-stats__h-tit { font-size: var(--fs-hti-t); font-weight: var(--fw-hti-t); }

  .c-about-stats__grid { grid-template-columns: repeat(var(--cs-t), 1fr); gap: var(--gap-main-t); }
  
  .c-about-stats__card { border-radius: var(--rad-card-t); padding: var(--cpt-t) var(--cpr-t) var(--cpb-t) var(--cpl-t); gap: var(--gap-st-t); }
  .c-about-stats__cnum { font-size: var(--fs-cnum-t); font-weight: var(--fw-cnum-t); }
  .c-about-stats__clab { font-size: var(--fs-clab-t); font-weight: var(--fw-clab-t); }
}

/* ================= MOBILE (<= 768px) ================= */
@media (max-width: 768px) {
  .c-about-stats { padding: var(--opt-m) var(--opr-m) var(--opb-m) var(--opl-m); }

  .c-about-stats__wrap {
    border-radius: var(--rad-wrap-m);
    padding: var(--pt-m) var(--pr-m) var(--pb-m) var(--pl-m);
    box-shadow: var(--wrap-shad-m);
    transform: rotate(var(--rot-m));
  }

  /* Order Reassignment for Mobile */
  .c-about-stats__header { order: 1; flex-direction: column; gap: 24px; margin-bottom: var(--gap-head-m); }
  .c-about-stats__grid { order: 2; margin-bottom: 0; }
  
  .c-about-stats__h-texts { text-align: var(--al-htxt-m); }
  
  .c-about-stats__h-btn--desk { display: none; }
  .c-about-stats__h-btn--mob {
    order: 3;
    display: inline-flex;
    align-self: var(--b-as-m); width: var(--b-w-m); justify-content: var(--b-jc-m);
    margin-top: var(--gap-main-m);
  }

  .c-about-stats__h-tag { font-size: var(--fs-htg-m); font-weight: var(--fw-htg-m); }
  .c-about-stats__h-tit { font-size: var(--fs-hti-m); font-weight: var(--fw-hti-m); }

  .c-about-stats__grid { grid-template-columns: repeat(var(--cs-m), 1fr); gap: var(--gap-main-m); }
  .c-about-stats__card { border-radius: var(--rad-card-m); padding: var(--cpt-m) var(--cpr-m) var(--cpb-m) var(--cpl-m); gap: var(--gap-st-m); }
  .c-about-stats__cnum { font-size: var(--fs-cnum-m); font-weight: var(--fw-cnum-m); }
  .c-about-stats__clab { font-size: var(--fs-clab-m); font-weight: var(--fw-clab-m); }
}