.method-matrix {
  overflow: hidden;
  padding-block: clamp(90px, 7vw, 110px);
  background: #071b31;
}

.method-matrix::after { display: none; }

.method-matrix > .shell {
  width: min(1480px, calc(100% - 136px));
}

.method-matrix__header {
  max-width: 1320px;
  text-align: left;
}


.method-matrix__header .eyebrow {
  display: block !important;
  margin: 0;
  color: #32c5ff !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.method-matrix__header h2 {
  max-width: 1280px;
  margin: 20px 0 0;
  color: #f4f7fa;
  font-size: clamp(42px, 3.5vw, 58px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.method-matrix__header > p:last-child {
  margin: 24px 0 0;
  color: rgba(210, 224, 238, .72);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
}

.method-matrix__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: clamp(52px, 4.3vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}

.method-matrix__card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 180px;
  padding: 28px 30px;
  flex-direction: column;
  border: 1px solid rgba(108, 158, 194, .3);
  border-radius: 13px;
  background: rgba(14, 43, 72, .88);
  transition: transform 210ms cubic-bezier(.22, 1, .36, 1), border-color 210ms ease, background-color 210ms ease;
}

.method-matrix__card::before {
  position: absolute;
  top: -1px;
  left: 30px;
  width: 44px;
  height: 2px;
  background: #32c5ff;
  content: "";
  opacity: 0;
  transition: opacity 200ms ease;
}

.method-matrix__card > span {
  color: rgba(50, 197, 255, .82);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.method-matrix__card h3 {
  margin: 18px 0 0;
  color: #f4f7fa;
  font-size: clamp(22px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.35;
  transition: color 200ms ease;
}

.method-matrix__card p {
  max-width: 38ch;
  margin: 12px 0 0;
  color: rgba(210, 224, 238, .66);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
}

.method-matrix__card.is-active {
  border-color: rgba(50, 197, 255, .72);
  background: rgba(20, 52, 82, .92);
  transform: translateY(-3px);
}

.method-matrix__card.is-active::before { opacity: 1; }
.method-matrix__card.is-active h3 { color: #32c5ff; }

.method-matrix.is-motion-ready:not(.is-entered) .method-matrix__header,
.method-matrix.is-motion-ready:not(.is-entered) .method-matrix__grid {
  opacity: 0;
}

.method-matrix.is-motion-ready:not(.is-entered) .method-matrix__grid {
  transform: translate3d(0, 12px, 0);
}

.method-matrix.is-motion-ready .method-matrix__header {
  transition: opacity 400ms cubic-bezier(.22, 1, .36, 1);
}

.method-matrix.is-motion-ready .method-matrix__grid {
  transition: opacity 600ms 80ms cubic-bezier(.22, 1, .36, 1), transform 600ms 80ms cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 1099px) {
  .method-matrix > .shell { width: min(100% - 64px, 1480px); }
  .method-matrix__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 679px) {
  .method-matrix { padding-block: 72px; }
  .method-matrix > .shell { width: calc(100% - 40px); }
  .method-matrix__header h2 { font-size: clamp(36px, 10vw, 44px); }
  .method-matrix__header > p:last-child { font-size: 16px; }
  .method-matrix__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
  .method-matrix__card { min-height: 0; padding: 26px 24px 28px; }
  .method-matrix__card::before { left: 24px; }
  .method-matrix__card.is-active { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .method-matrix.is-motion-ready:not(.is-entered) .method-matrix__header,
  .method-matrix.is-motion-ready:not(.is-entered) .method-matrix__grid {
    opacity: 1;
    transform: none;
  }
  .method-matrix.is-motion-ready .method-matrix__header,
  .method-matrix.is-motion-ready .method-matrix__grid,
  .method-matrix__card {
    transition: none;
  }
}