/* ═══════════════════════════════════════════════════════════

       ABOUT SECTION
    ═══════════════════════════════════════════════════════════ */
#about {
  padding: var(--section-pad-y) var(--section-pad-x);
  padding-top: calc(var(--section-pad-y) + var(--diag-h));
  padding-bottom: calc(var(--section-pad-y) + var(--diag-h));
  background: var(--color-black);
  /* Top: right starts at 0, left starts at diag-h (mirrors hero bottom).
     Bottom: left at full height, right rises by diag-h. */
  clip-path: polygon(0 var(--diag-h), 100% 0, 100% 100%, 0 calc(100% - var(--diag-h)));
  margin-top: calc(var(--diag-h) * -1);
  margin-bottom: calc(var(--diag-h) * -1);
  position: relative;
  z-index: 1;
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-width);
  margin: 0 auto;
}

.about__left {
  padding-right: 2rem;
}

.about__right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ─── TYPOGRAPHY ─── */

.about__title-block {
  margin-bottom: 2.5rem;
}

.about__title-block .section-title {
  color: var(--color-white);
}

.about__accent {
  display: block;
  color: var(--color-purple);
  line-height: .9;
}

.about__body {
  font-size: 0.82rem;
  line-height: 1.95;
  color: var(--color-steel);
  max-width: 460px;
}

.about__body + .about__body {
  margin-top: 1.2rem;
}

.about__body strong {
  color: var(--color-ice);
  font-weight: 700;
}

/* ─── STAT CARDS ─── */

.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 3.5rem;
  border: var(--border-dim);
  box-shadow: var(--shadow-purple);
}

.stat-card {
  padding: 1.4rem;
  border-right: var(--border-dim);
  border-bottom: var(--border-dim);
  transition: background .25s;
}

.stat-card:nth-child(even) {
  border-right: none;
}

.stat-card:nth-child(3),
.stat-card:nth-child(4) {
  border-bottom: none;
}

.stat-card:hover {
  background: rgba(111, 97, 192, .07);
}

.stat-card__number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--color-purple);
  line-height: 1;
}

.stat-card__label {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin-top: .25rem;
}