/* ===== Single: Разработка ===== */
.dev-single{ --c:#2A2F33; color:var(--c); position:relative; }
.dev-single .container{ position:relative; }

/* HERO */
.dev-hero{ margin:10px 0 18px; }
.dev-hero__img{
  width:100%; height:auto; display:block;
  border-radius:18px;
}

/* Заголовок */
.dev-title{
  font-weight:800;
  font-size:clamp(22px,3.6vw,32px);
  line-height:1.25;
  margin:var(--fs-xxl)0;
}

/* Вступительный блок 2 колонки */
/* Вступительный блок 2 колонки */
.dev-intro{
  display:grid;
  gap: var(--gap-xxl);
  grid-template-columns: minmax(260px, 360px) 1fr;
  /* было align-items:start; — из-за этого левая колонка не растягивалась */
  align-items: stretch;               /* важное изменение */
  margin:0 0 22px;
}

/* контейнер с картинкой должен растягиваться на всю высоту строки */
.dev-intro__img{
  display:flex;                       /* чтобы img мог занять 100% высоты */
  height:100%;
}

/* делаем саму картинку «резиновой» по высоте строки */
.dev-intro__img img{
  width:100%;
  height:100%;                        /* ключевое */
  object-fit: cover;                  /* как в макете: заполняет и может чуть обрезать */
  border-radius:12px;
  display:block;
}

.dev-intro__text{ line-height:1.6; display: flex;flex-direction: column;gap: var(--gap-md);}
.dev-intro__text ul{ padding-left:18px; margin:8px 0; }

/* Жёлтая плашка */
.dev-note{
  display:flex; align-items:center; gap:var(--fs-xxl);text-align: center;
  background:#EEC024; color:#1D2A39;
  border-radius:999px; padding:12px var(--fs-xxl); margin:var(--fs-xxl) 0 8px;
  font-weight:600; line-height:1.4;
}
.dev-note__text {margin-right:var(--fs-xxl);}
.dev-note__ico{
  inline-size:24px; block-size:24px;
  background:url("../icons/flash.svg") center/contain no-repeat;
}

/* Блок загрузки (QR слева, текст справа) */
.dev-download{
  display:grid; gap: 15%; align-items:start;justify-self: center;
  grid-template-columns: minmax(220px, 280px) 1fr;width: 80%;
  margin: 100px;
}
.dev-qr {padding:var(--fs-md);}
.dev-dl {display:flex; flex-direction: column;gap: var(--gap-sm);}
.dev-qr img{
  width:100%; height:auto; display:block;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  background:#fff;
}
.dev-dl__title{
  font-weight:800; font-size:clamp(18px,2.8vw,30px); margin:0 0 6px;
}
.dev-dl__hint{ width:70%; margin:0 0 12px; }

.dev-download .btn{
  height:63px; width: 255px; padding:0 20px; border-radius:999px;
}

/* Поддержка */
.dev-support{
  display:flex; gap:10px; align-items:flex-start; margin: 18px 0 6px;
}
.dev-support a{ color:var(--c); font-weight:700; text-decoration:none; }
.dev-support a:hover{ text-decoration:underline; }
.dev-support__ico{
  inline-size:70px; block-size:18px; margin-top:3px;
  background:url("../icons/mail.svg") center/contain no-repeat;
}

/* Декор — молекула справа */
.dev-molecule{
  position:absolute; right:5%; bottom:15%;
  inline-size:280px; block-size:210px;
  background:url("../icons/molecil.svg") center/contain no-repeat;
  pointer-events:none; opacity:.9;
}
@media (max-width: 1100px){
  .dev-molecule{ inline-size:160px; block-size:160px; right:-10%; bottom:15%; }
}

/* Адаптив */
@media (max-width: 920px){
  .dev-intro{ grid-template-columns: 1fr; align-items:start; }
  .dev-intro__img{ height:auto; }
  .dev-intro__img img{ height:auto; object-fit: contain; }
  .dev-download{ grid-template-columns: 1fr; }
  .dev-molecule{ display:none; }
}