/* =========================================================
   Страница «Технологии». Схема масштаба обычная:
   1rem = 1px при ширине 320 · 540 · 1560 · 1920.
   Раскладки: телефон до 767px, планшет 768–991px, десктоп от 992px.
   ========================================================= */

/* ---------- Верх страницы: крошки, заголовок, подзаголовок ---------- */
.technologies-top { display: flex; margin: 22rem 0 20rem; }
@media (min-width: 768px) and (max-width: 991px) { .technologies-top { margin: 22rem 0 32rem; } }
@media (min-width: 992px) { .technologies-top { margin: 22rem 0 44rem; } }

.technologies-title {
  font-family: var(--font-text);
  font-weight: 300;
  line-height: 120%;
  color: var(--c-text);
  font-size: 22rem;
  max-width: 100%;
  margin: 0 0 20rem;
  padding: 0 10rem;
}
.technologies-lead {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 140%;
  color: var(--c-text);
  max-width: 660rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 14rem;
  margin-bottom: 40rem;
  padding: 0 10rem;
}
@media (min-width: 768px) and (max-width: 991px) {
  .technologies-title { font-size: 40rem; line-height: 48rem; margin: 0 0 16rem; text-align: center; }
  .technologies-lead { font-size: 16rem; line-height: 24rem; text-align: center; margin-bottom: 32rem; }
}
@media (min-width: 992px) {
  .technologies-title { font-size: 60rem; max-width: none; margin: 0 0 40rem; text-align: center; padding: 0; }
  .technologies-lead { font-size: 20rem; margin-bottom: 80rem; text-align: center; padding: 0; }
}

/* ---------- Общие части карточек ---------- */
.technologies-btn { width: 100%; justify-content: center; }
@media (min-width: 768px) { .technologies-btn { margin: auto auto 0; max-width: 314rem; } }
@media (min-width: 992px) { .technologies-btn { margin: auto auto 0 0; } }

.technologies-list { padding: 0; margin: 0 0 32rem; list-style: none; }
.technologies-list li {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 15.170l9.190-9.190 1.420 1.410L10 18l-6.360-6.360 1.410-1.420z' fill='%2323D192'/%3E%3C/svg%3E") left top / 24rem no-repeat;
  padding-left: 40rem;
}
.technologies-list li span { font-weight: 600; font-size: 16rem; line-height: 125%; }
.technologies-list li p { font-weight: 400; font-size: 14rem; line-height: 140%; margin: 1em 0 16rem; }
.technologies-list li + li { margin-top: 20rem; }
@media (min-width: 768px) {
  .technologies-list li span { font-size: 20rem; }
  .technologies-list li p { font-size: 16rem; }
}

/* ---------- Экосистема ---------- */
.technologies-eco { margin: 0 0 80rem; }
.technologies-eco__wrapper { background: #fff; border-radius: 10rem; padding: 20rem 20rem 32rem; }
.technologies-eco__heading { margin-bottom: 20rem; }
.technologies-eco__title { text-align: center; margin-top: 0; margin-bottom: 8rem; font-weight: 400; font-size: 18rem; line-height: 140%; }
.technologies-eco__text { font-weight: 400; font-size: 14rem; line-height: 140%; text-align: center; display: block; }
.technologies-eco__block { width: 100%; }
.technologies-eco__media {
  width: 100%;
  height: 230rem;
  margin-bottom: 20rem;
  border-radius: 20rem;
  overflow: hidden;
  background: radial-gradient(120% 90% at 62% 48%, #2b2f3d 0%, #14161d 46%, #07080b 100%);
}
.technologies-eco__media svg { width: 100%; height: 100%; }
.technologies-eco__body { display: flex; flex-direction: column; }
.technologies-eco__subtitle { font-weight: 700; font-size: 18rem; line-height: 140%; margin-bottom: 16rem; text-align: center; }
@media (min-width: 768px) and (max-width: 991px) { .technologies-eco { margin: 0 0 100rem; } }
@media (min-width: 768px) {
  .technologies-eco__wrapper { padding: 32rem; border-radius: 20rem; }
  .technologies-eco__title { font-size: 30rem; margin-bottom: 12rem; }
  .technologies-eco__text { font-size: 16rem; }
  .technologies-eco__media { height: 290rem; flex-shrink: 0; }
  .technologies-eco__subtitle { font-size: 24rem; margin-bottom: 24rem; }
}
@media (min-width: 992px) {
  .technologies-eco { margin: 0 0 160rem; }
  .technologies-eco__wrapper { border-radius: 30rem; }
  .technologies-eco__heading { display: flex; gap: 56rem; margin-bottom: 50rem; }
  .technologies-eco__title { width: calc(50% - 56rem); text-align: left; padding-right: 200rem; }
  .technologies-eco__text { width: calc(50% - 56rem); text-align: left; }
  .technologies-eco__block { display: flex; gap: 56rem; margin: auto; }
  .technologies-eco__media { width: calc(50% - 56rem); height: 540rem; margin-bottom: 0; border-radius: 30rem; }
  .technologies-eco__body { width: calc(50% - 12rem); }
  .technologies-eco__body .technologies-list { margin-bottom: 0; }
  .technologies-eco__body .technologies-list li + li { margin-top: 28rem; }
  .technologies-eco__subtitle { font-size: 30rem; margin-bottom: 32rem; text-align: left; }
}

/* ---------- Ultra-Dez ---------- */
.technologies-dez { margin: 0 0 80rem; }
.technologies-dez__wrapper { background: #fff; border-radius: 10rem; padding: 20rem 20rem 32rem; }
.technologies-dez__title { text-align: center; margin-top: 0; margin-bottom: 36rem; font-weight: 400; font-size: 18rem; line-height: 140%; }
.technologies-dez__title strong { font-weight: 700; }
.technologies-dez__block { width: 100%; }
.technologies-dez__media { background: #31333c; width: 100%; height: 230rem; margin-bottom: 20rem; border-radius: 10rem; position: relative; }
.technologies-dez__media img {
  width: 230rem;
  height: 246rem;
  max-width: none;
  object-fit: cover;
  object-position: center;
  bottom: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.technologies-dez__body { display: flex; flex-direction: column; }
.technologies-dez__body p { font-weight: 400; font-size: 14rem; line-height: 140%; margin: 0 0 32rem; text-align: center; }
@media (min-width: 768px) and (max-width: 991px) { .technologies-dez { margin: 0 0 100rem; } }
@media (min-width: 768px) {
  .technologies-dez__wrapper { padding: 32rem; border-radius: 20rem; }
  .technologies-dez__title { max-width: 400rem; font-size: 30rem; margin: 0 auto 52rem; }
  .technologies-dez__media { height: 290rem; flex-shrink: 0; border-radius: 20rem; }
  .technologies-dez__media img { width: 302rem; height: 322rem; }
}
@media (min-width: 992px) {
  .technologies-dez { margin: 0 0 160rem; }
  .technologies-dez__wrapper { border-radius: 30rem; padding: 50rem; }
  .technologies-dez__title { font-size: 40rem; max-width: none; }
  .technologies-dez__block { display: flex; gap: 56rem; margin: auto; }
  .technologies-dez__media { width: calc(50% - 56rem); height: 354rem; margin-bottom: 0; border-radius: 30rem; }
  .technologies-dez__media img { width: 358rem; height: 386rem; }
  .technologies-dez__body { width: calc(50% - 12rem); }
  .technologies-dez__body p { font-size: 16rem; line-height: 150%; text-align: left; }
}

/* ---------- Технологии в основе ---------- */
.technologies-inn { margin: 80rem 0; }
.technologies-inn__block { width: 100%; }
.technologies-inn__media {
  width: 100%;
  height: 260rem;
  margin-bottom: 8rem;
  border-radius: 20rem;
  overflow: hidden;
  position: relative;
  background: radial-gradient(90% 80% at 50% 30%, #6b6e78 0%, #3a3c45 45%, #17181d 100%);
}
.technologies-inn__media img { position: absolute; bottom: -6%; height: 88%; width: auto; max-width: none; }
.technologies-inn__media img:nth-child(1) { left: 50%; transform: translateX(-110%); height: 74%; opacity: .92; }
.technologies-inn__media img:nth-child(2) { left: 50%; transform: translateX(16%); height: 74%; opacity: .92; }
.technologies-inn__media img:nth-child(3) { left: 50%; transform: translateX(-52%); }
.technologies-inn__card { background: #31333c; color: #fff; border-radius: 20rem; padding: 20rem 20rem 32rem; display: flex; flex-direction: column; }
.technologies-inn__subtitle { font-weight: 700; font-size: 18rem; line-height: 140%; margin-bottom: 20rem; }
@media (min-width: 768px) and (max-width: 991px) { .technologies-inn { margin: 100rem 0; } }
@media (min-width: 768px) {
  .technologies-inn__media { height: 370rem; flex-shrink: 0; }
  .technologies-inn__card { padding: 32rem; }
  .technologies-inn__card .technologies-list li span { font-size: 18rem; }
  .technologies-inn__subtitle { font-size: 24rem; margin-bottom: 24rem; text-align: center; }
}
@media (min-width: 992px) {
  .technologies-inn { margin: 160rem 0; }
  .technologies-inn__block { display: flex; gap: 12rem; margin: auto; }
  .technologies-inn__media { width: calc(50% - 12rem); height: 646rem; border-radius: 30rem; }
  .technologies-inn__card { width: calc(50% - 12rem); height: 646rem; padding: 50rem; border-radius: 30rem; }
  .technologies-inn__card .technologies-list li span { font-size: 20rem; }
  .technologies-inn__card .technologies-list li + li { margin-top: 32rem; }
  .technologies-inn__subtitle { font-size: 30rem; margin-bottom: 56rem; text-align: left; }
}