.pochemu { padding: var(--blok) 0 0; }
.pochemu__zag { font: 400 40px/1.12 var(--zag); letter-spacing: -.01em; color: var(--tekst); text-wrap: balance; }
.pochemu__akcent { color: inherit; }
.pochemu__rjad { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; margin-top: 32px; }
.pochemu__karta { min-width: 0; border-radius: var(--r-karta); background: var(--karta); box-shadow: var(--ramka), var(--ten-1); }
.pochemu__sborka { padding: 26px 24px; }
.pochemu__karta-zag { margin: 0; font: 500 19px/1.3 var(--zag); color: var(--tekst); }
.pochemu__sborka-telo { display: grid; grid-template-columns: 342px minmax(0, 1fr); gap: 28px; margin-top: 18px; align-items: start; }
.pochemu__roliki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pochemu__rolik {
  position: relative; display: block; width: 100%; aspect-ratio: 165 / 188; padding: 0; border: 0;
  border-radius: var(--r-foto); overflow: hidden; background: var(--fon-2); color: #fff; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pochemu__rolik video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pochemu__rolik::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(28, 26, 20, 0) 32%, rgba(28, 26, 20, .78));
}
.pochemu__rolik:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.pochemu__rolik-dlit {
  position: absolute; z-index: 2; right: 11px; bottom: 11px; padding: 1px 7px; border-radius: 7px;
  background: rgba(0, 0, 0, .45); color: #fff; font: 500 11px/15px var(--osn);
}
.pochemu__rolik-play {
  position: absolute; z-index: 2; right: 11px; top: 11px; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: rgba(252, 251, 248, .92); color: var(--tekst);
  transition: transform .2s ease;
}
.pochemu__rolik-play svg { width: 13px; height: 13px; margin-left: 2px; }
.pochemu__rolik:hover .pochemu__rolik-play { transform: scale(1.08); }
.pochemu__rolik-podp {
  position: absolute; z-index: 2; left: 11px; right: 11px; bottom: 11px; height: 34px;
  display: flex; align-items: flex-end; font: 600 13.5px/17px var(--osn); color: #fff;
}
.pochemu__rolik-podp span { display: block; }
.pochemu__rolik-hod {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3);
  opacity: 0; transition: opacity .2s ease;
}
.pochemu__rolik-hod i {
  display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%;
}
.pochemu__rolik.is-igraet .pochemu__rolik-hod { opacity: 1; }
.pochemu__punkty { display: grid; gap: 8px; }
.pochemu__punkty li {
  display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 10px;
  font: 400 14px/1.55 var(--osn); color: var(--tekst-2);
}
.pochemu__tochka { width: 6px; height: 6px; margin-top: 7.85px; border-radius: 50%; background: var(--akcent); }
.pochemu__punkty b { font-weight: 600; color: var(--tekst); white-space: nowrap; }
.pochemu__cta { display: flex; flex-direction: column; padding: 28px; }
.pochemu__vvod { font: 400 15px/1.6 var(--osn); color: var(--tekst-2); }
.pochemu__vvod b { font-weight: 600; color: var(--tekst); }
.pochemu__cifry {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; padding: 16px 0;
  border-top: 1px solid var(--linija); border-bottom: 1px solid var(--linija);
}
.pochemu__cifry b { display: block; font: 400 30px/1.1 var(--zag); color: var(--tekst); }
.pochemu__cifry span { display: block; margin-top: 4px; font: 400 12.5px/1.35 var(--osn); color: var(--tekst-3); }
.pochemu__detali { font: 400 14px/1.6 var(--osn); color: var(--tekst-2); }
.pochemu__prizyv { margin-top: auto; padding-top: 21px; }
.pochemu__prizyv-t { font: 400 19px/1.25 var(--zag); color: var(--tekst); }
.pochemu__prizyv-t > span { position: relative; display: inline-block; }
.pochemu__strelka {
  position: absolute; left: calc(100% + 10px); top: 20px; width: 40px; height: 34px;
  color: var(--pesok); pointer-events: none;
}
.pochemu__knopka { display: flex; width: 100%; height: 58px; margin-top: 18px; padding: 0 24px; border-radius: 999px; font-size: 16px; }
@media (min-width: 1200px) {
  .pochemu__sborka-telo { grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; }
  .pochemu__rolik { aspect-ratio: 144 / 180; }
  .pochemu__punkty { align-content: space-between; }
}
@media (max-width: 1199px) {
  .pochemu__rjad { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pochemu__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .pochemu__o-nas { grid-row: 1 / span 2; }
  .pochemu__cifry { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .pochemu__detali, .pochemu__prizyv { grid-column: 2; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .pochemu__sborka-telo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pochemu__roliki { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pochemu__punkty { display: block; columns: 2; column-gap: 32px; }
  .pochemu__punkty li { break-inside: avoid; margin-bottom: 10px; }
}
@media (max-width: 899px) {
  .pochemu__zag { font-size: 32px; }
  .pochemu__rjad { margin-top: 28px; }
}
@media (max-width: 699px) {
  .pochemu__sborka-telo { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pochemu__cta { display: flex; align-items: stretch; }
  .pochemu__cifry { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--linija); }
}
@media (max-width: 599px) {
  .pochemu__zag { font-size: 28px; }
  .pochemu__rjad { margin-top: 22px; gap: 16px; }
  .pochemu__karta { border-radius: 18px; }
  .pochemu__sborka { padding: 20px 16px; }
  .pochemu__karta-zag { font-size: 18px; text-wrap: balance; }
  .pochemu__roliki { gap: 10px; }
  .pochemu__cta { padding: 20px 16px; }
  .pochemu__punkty li, .pochemu__detali { font-size: 15px; }
  .pochemu__tochka { margin-top: 8.6px; }
}
@media (max-width: 374px) {
  .pochemu__strelka { left: calc(100% + 4px); top: 19px; width: 34px; height: 29px; }
}
@media (max-width: 359px) {
  .pochemu__rolik-dlit { right: 9px; bottom: 9px; padding: 1px 5px; border-radius: 6px; font-size: 10px; line-height: 14px; }
  .pochemu__rolik-podp { left: 9px; right: 9px; bottom: 9px; height: 32px; font-size: 12.5px; line-height: 16px; }
  .pochemu__strelka { display: none; }
  .pochemu__cifry b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pochemu__rolik-play, .pochemu__rolik-hod { transition: none; }
}
