/* «Покрутите сами» — живые 3D-модели МЕРАКОМ на странице кейса. Всё под .m3d, остальную страницу не задевает. */
.m3d {
  --m3d-ink: #042d50;
  --m3d-blue: #0e78cb;
  --m3d-line: rgba(4, 45, 80, 0.12);
  --m3d-bg: #f3f5f8;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) 16px;
  color: var(--m3d-ink);
}
@media (min-width: 768px) { .m3d { padding-left: 32px; padding-right: 32px; } } /* края — как у .wrap страницы */
.m3d *, .m3d *::before, .m3d *::after { box-sizing: border-box; }
.m3d__title {
  margin: 0 0 10px;
  font-family: var(--display, Impact, sans-serif);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.02;
  text-wrap: balance;
}
.m3d__sub { margin: 0 0 clamp(18px, 2.6vw, 30px); max-width: 760px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.4; color: rgba(4, 45, 80, 0.8); }
.m3d__grid { display: grid; gap: clamp(12px, 1.8vw, 22px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .m3d__grid { grid-template-columns: minmax(0, 1fr); } }
.m3d__card {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--m3d-line);
  border-radius: 16px;
  overflow: hidden;
}
.m3d__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--m3d-bg);
  touch-action: pan-y;
  cursor: grab;
}
.m3d__stage:active { cursor: grabbing; }
.m3d__poster, .m3d__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m3d__poster { object-fit: cover; transition: opacity 0.6s ease; }
.m3d__cv { opacity: 0; transition: opacity 0.6s ease; }
.m3d__card.is-live .m3d__cv { opacity: 1; }
.m3d__card.is-live .m3d__poster { opacity: 0; }
.m3d__load {
  position: absolute; left: 16px; right: 16px; bottom: 14px; height: 3px; border-radius: 3px;
  background: rgba(4, 45, 80, 0.1); overflow: hidden; opacity: 0; transition: opacity 0.3s;
}
.m3d__load::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--m3d-blue); transition: width 0.2s; }
.m3d__card.is-loading .m3d__load { opacity: 1; }
.m3d figcaption { padding: 14px clamp(14px, 1.8vw, 20px) 18px; display: flex; flex-direction: column; gap: 6px; }
.m3d__name { font-family: var(--display, Impact, sans-serif); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; }
.m3d__line { font-size: clamp(14px, 1.25vw, 16px); line-height: 1.35; color: rgba(4, 45, 80, 0.8); }
.m3d__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.m3d__chips button {
  font: inherit; font-size: 13px; line-height: 1.2; padding: 6px 11px; border-radius: 999px;
  border: 1.5px solid var(--m3d-line); background: #fff; color: var(--m3d-ink); cursor: pointer;
}
.m3d__chips button:hover { border-color: var(--m3d-blue); }
.m3d__chips button.is-on { background: var(--m3d-blue); border-color: var(--m3d-blue); color: #fff; }
.m3d__card:not(.is-live) .m3d__chips button:not(.is-on) { opacity: 0.55; }