/* Malta 360 — 02 why Malta. Figma 228:4075 (py 160, gap 96) + stats band 228:4076 (pb 160). */

.m360-why { background: var(--m360-surface); }

.m360-why__main { padding-block: 160px; }

/* "Overlay": orange 15% ellipse, 1476 wide (left 50%, right −52.5%), aspect 1007/686.92,
   centred 7.43px above the band's middle. */
.m360-why__glow {
  position: absolute;
  left: 50%;
  top: calc(50% - 7.43px - 503.425 * var(--u));
  width: calc(1476 * var(--u));
  height: calc(1006.85 * var(--u));
  border-radius: 50%;
  background: rgba(230, 95, 52, .15);
  pointer-events: none;
}

.m360-why__pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px;
  margin-top: 96px;
  padding-bottom: 32px;
}

.m360-why__pillar { display: flex; flex-direction: column; gap: 24px; }

.m360-why__bar { display: block; width: 64px; height: 4px; }

.m360-why__pillar-heading { padding-top: 8px; color: var(--m360-text); }

.m360-why__pillar-body { font-size: 16px; line-height: 26px; color: var(--m360-text-2); }

/* ---- stats band ------------------------------------------------------------ */

.m360-why__band { padding-bottom: 160px; }

.m360-why__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  padding-top: 128px;
  border-top: 1px solid #2D2D30;
  text-align: center;
}

.m360-why__stat { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.m360-why__value {
  font-family: var(--m360-font-hero);
  font-size: clamp(56px, 6.67vw, 96px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.m360-why__label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--m360-text-2);
}

.m360-why__source { font-size: 11px; line-height: 1.5; color: var(--m360-text-3); }

@media (max-width: 1024px) {
  .m360-why__main { padding-block: 96px; }
  .m360-why__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; }
  .m360-why__band { padding-bottom: 96px; }
  .m360-why__stats { padding-top: 72px; gap: 40px; }
}

@media (max-width: 640px) {
  .m360-why__pillars { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .m360-why__stats { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* Figma mobile 228:4337: px 24, py 48, gap 48; 438 ellipse at (264, 130); stats stacked, 50/54. */
@media (max-width: 640px) {
  .m360-why__main { padding-block: 48px 0; }
  .m360-why__glow { left: 264px; top: 130px; width: 438px; height: 438px; }
  .m360-why__pillars { margin-top: 48px; gap: 48px; }
  .m360-why__band { padding-bottom: 48px; }
  .m360-why__stats { padding-block: 48px 0; gap: 64px; }
  .m360-why__value { font-family: var(--m360-font-display); font-size: 50px; line-height: 54px; letter-spacing: -3px; }
}