/* ============================================================
   НОВЫЕ БЛОКИ из Figma (файл «Конструктор», сессии 830/894/850-853).
   Геометрия/типографика/цвета сняты прямо из .fig, не на глаз:
     .pcost    — «Стоимость реализации проекта»  (830:3152 / моб 830:3199)
     .msgcta   — «Расчёт сметы через мессенджер» (894:824)
     .leadform — форма «Рассчитаем стоимость…»   (853:2760)
   Токены (--accent/--navy/--card/--border/--muted) наследуются из style.css.
   ============================================================ */

/* ============================================================
   A. СТОИМОСТЬ РЕАЛИЗАЦИИ ПРОЕКТА (1552x611)
   ============================================================ */
.pcost{display:flex;flex-direction:column;gap:42px}
.pcost__head{display:flex;flex-direction:column;gap:20px}
.pcost__title{margin:0;font-weight:700;font-size:48px;line-height:50px;color:var(--navy)}
.pcost__sub{margin:0;max-width:797px;font-weight:400;font-size:20px;line-height:30px;color:var(--navy)}

.pcost__body{display:flex;flex-direction:column;gap:32px}
.pcost__cards{display:flex;gap:22px}
.pcost-card{flex:1;min-width:0;box-sizing:border-box;padding:26px 32px 32px;
  background:#fff;border:2px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;gap:20px}
.pcost-card__head{display:flex;align-items:center;justify-content:space-between;gap:32px}
.pcost-card__title{margin:0;font-weight:700;font-size:26px;line-height:30px;color:var(--navy)}
.pcost-card__ic{flex:none;width:60px;height:60px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center}
/* иконки вынуты из макета с разными исходными боксами (32x32 и 35x33) — приводим к одному */
.pcost-card__ic svg{width:32px;height:32px;display:block}
.pcost-card__rows{display:flex;flex-direction:column}
.pcost-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:8px 0 15px;border-bottom:1px solid #dae1e5}
.pcost-row:last-child{border-bottom:0;padding-bottom:0}
.pcost-row+.pcost-row{padding-top:16px}
.pcost-row__name{font-weight:400;font-size:20px;line-height:1.4;color:var(--navy)}
.pcost-row__price{flex:none;font-weight:700;font-size:18.6px;line-height:1.4;color:var(--muted)}

.pcost__total{box-sizing:border-box;width:765px;max-width:100%;height:72px;padding:0 20px;
  background:var(--card);border-radius:12px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.pcost__total-lbl{font-weight:700;font-size:21.3px;color:var(--navy)}
.pcost__total-val{font-weight:700;font-size:22px;color:var(--accent)}

@media(max-width:1024px){
  /* моб 830:3199 (артборд 390, контент 358): иконка над заголовком, шрифты мельче */
  .pcost{gap:40px}
  .pcost__head{gap:16px}
  .pcost__title{font-size:32px;line-height:36px}
  .pcost__sub{font-size:20px;line-height:26px}
  .pcost__body{gap:16px}
  .pcost__cards{flex-direction:column;gap:16px}
  .pcost-card{padding:20px;gap:32px}
  /* в макете иконка НАД заголовком (830:3228: _icons, затем текст) */
  .pcost-card__head{flex-direction:column-reverse;align-items:flex-start;gap:20px}
  .pcost-card__title{font-size:24px;line-height:28px}
  .pcost-row{padding:8px 0 16px}
  .pcost-row+.pcost-row{padding-top:16px}
  .pcost-row__name{font-size:18px}
  .pcost-row__price{font-size:18px}
  .pcost__total{width:auto}
}

/* Планшет 641–1024: в макете такой версии нет. Возвращаем две колонки и
   шапку карточки в строку — на 700–1000px одноколоночный мобильный вид
   растягивался и выглядел пустым. */
@media(min-width:641px) and (max-width:1024px){
  .pcost__title{font-size:38px;line-height:42px}
  .pcost__cards{flex-direction:row;gap:16px}
  .pcost-card__head{flex-direction:row;align-items:center;justify-content:space-between}
  .pcost-card{gap:20px}
}

/* ============================================================
   B. РАСЧЁТ СМЕТЫ ЧЕРЕЗ МЕССЕНДЖЕР (1920x774, карточка 1552x610)
   ============================================================ */
/* межблочный отступ 140px — как в макете */
.msgcta{width:100%;margin-top:140px;background:var(--card);padding:82px 0}
.msgcta__card{box-sizing:border-box;min-height:610px;padding:52px 60px;
  background:#fff;border-radius:20px;
  display:flex;align-items:center;justify-content:space-between;gap:60px}
.msgcta__left{width:594px;flex:none;display:flex;flex-direction:column;gap:52px}
.msgcta__badge{align-self:flex-start;display:inline-flex;align-items:center;height:39px;padding:0 20px;
  background:var(--card);border-radius:8px;
  font-weight:700;font-size:17px;letter-spacing:.13px;color:#0f70cf}
.msgcta__intro{display:flex;flex-direction:column;gap:20px}
/* line-height 50 при кегле 48 подрезает выносные элементы букв — добавляем воздух снизу */
.msgcta__title{margin:0;padding-bottom:8px;font-weight:700;font-size:48px;line-height:50px;color:var(--navy)}
.msgcta__sub{margin:0;font-weight:400;font-size:20px;line-height:30px;color:var(--navy)}
.msgcta__btns{display:flex;gap:10px}
.msgcta__btn{box-sizing:border-box;width:292px;height:58px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-weight:700;font-size:20px;color:#fff;text-decoration:none;cursor:pointer;
  transition:filter .2s ease,transform .2s ease}
.msgcta__btn:hover{filter:brightness(1.06)}
.msgcta__btn:active{transform:scale(.98)}
.msgcta__btn--tg{background:#2676ca}
.msgcta__btn--max{background:#5b22b8}
.msgcta__btn img{flex:none}
.msgcta__note{margin:-22px 0 0;display:flex;align-items:center;gap:6px;
  font-weight:400;font-size:16px;line-height:16px;color:var(--muted)}
.msgcta__right{width:579px;flex:none;display:flex;flex-direction:column;gap:19px}
.msgcta__shot{border-radius:12px;overflow:hidden}
.msgcta__shot img{display:block;width:100%;height:auto}
.msgcta__pledge{box-sizing:border-box;margin:0;min-height:63px;padding:10px 18px;
  background:#fff;border:2px solid var(--card);border-radius:12px;
  display:flex;align-items:center;gap:22px;
  font-weight:300;font-size:18px;line-height:1.39;color:#5f7c91}
.msgcta__pledge svg{flex:none}

@media(max-width:1024px){
  /* моб 901:1044 (артборд 390): серый фон, белая карточка 358 с полями 32,
     заголовок 32/32, кнопки в колонку 54px, заметка ПЕРЕД скриншотом,
     скриншот в белой рамке вместе с плашкой-обещанием. */
  .msgcta{padding:0}
  .msgcta__card{min-height:0;margin:0 16px;padding:32px;border-radius:12px;
    flex-direction:column;align-items:stretch;gap:40px}
  .msgcta__left,.msgcta__right{width:auto}
  .msgcta__left{gap:40px}
  .msgcta__badge{height:39px;padding:0 17px;font-size:14px}
  .msgcta__intro{gap:16px}
  .msgcta__title{font-size:32px;line-height:32px}
  .msgcta__sub{font-size:18px;line-height:26px}
  .msgcta__btns{flex-direction:column;gap:8px}
  .msgcta__btn{width:100%;height:54px;font-size:18px}
  .msgcta__note{margin:0;font-size:14px}
  .msgcta__right{gap:0;padding:1px;border:2px solid var(--card);border-radius:12px}
  .msgcta__shot{border-radius:11px}
  .msgcta__pledge{min-height:0;padding:14px 18px 16px;border:0;border-radius:0;
    font-size:16px;line-height:1.35;gap:8px;align-items:flex-start}
  .msgcta__pledge svg{margin-top:5px}
}

/* Планшет 641–1024 (в макете нет): карточку не растягиваем во всю ширину,
   кнопки снова в строку — на 700–1000px колонка выглядела разреженной. */
@media(min-width:641px) and (max-width:1024px){
  .msgcta{padding:40px 0}
  .msgcta__card{max-width:620px;margin:0 auto;padding:40px}
  .msgcta__title{font-size:36px;line-height:38px}
  .msgcta__btns{flex-direction:row;gap:10px}
  .msgcta__btn{flex:1;width:auto}
}

/* ============================================================
   C. ФОРМА «РАССЧИТАЕМ СТОИМОСТЬ ВАШЕГО ПРОЕКТА» (483x710)
   ============================================================ */
.leadform{display:flex;justify-content:center}
.leadform__card{box-sizing:border-box;width:483px;max-width:100%;padding:30px;
  background:#fff;border-radius:20px;box-shadow:0 18px 60px -30px rgba(1,46,74,.45);
  display:flex;flex-direction:column;gap:32px}
.leadform__head{display:flex;flex-direction:column;gap:24px}
.leadform__title{margin:0;font-weight:700;font-size:36px;line-height:40px;color:var(--navy)}
.leadform__lead{display:flex;align-items:center;gap:10px}
.leadform__ava{flex:none;width:54px;height:54px;border-radius:50%;object-fit:cover}
.leadform__lead p{margin:0;font-weight:400;font-size:16px;line-height:1.13;color:var(--navy)}

.leadform__fields{display:flex;flex-direction:column;gap:20px}
.leadform__field{display:flex;flex-direction:column;gap:10px}
.leadform__lbl--short,.leadform__btn-short{display:none}
.leadform__label{font-weight:700;font-size:18px;line-height:20px;color:var(--navy);opacity:.83}
.leadform__input{box-sizing:border-box;width:100%;height:56px;padding:0 18px;
  background:#fff;border:2px solid #e0e5e7;border-radius:12px;
  font-family:inherit;font-weight:400;font-size:18px;color:var(--navy);outline:none;
  transition:border-color .2s ease}
.leadform__input::placeholder{color:var(--muted)}
.leadform__input:focus{border-color:var(--accent)}

.leadform__channels{display:flex;gap:10px}
.leadform__chan{flex:1;min-width:0;height:56px;padding:0 8px;
  background:var(--card);border:2px solid transparent;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:18px;color:var(--navy);cursor:pointer;
  transition:border-color .2s ease,background-color .2s ease}
.leadform__chan svg{flex:none}
/* выбранный канал — заливка акцентом с белым текстом (в макете так подсвечен MAX) */
.leadform__chan.is-on{border-color:var(--accent);background:var(--accent);color:#fff}
.leadform__chan.is-on svg [fill]:not([fill="none"]){fill:#fff}
.leadform__chan.is-on svg [stroke]:not([stroke="none"]){stroke:#fff}

.leadform__foot{display:flex;flex-direction:column;gap:6px}
.leadform__agree{display:flex;align-items:center;gap:12px;cursor:pointer}
.leadform__agree input{position:absolute;opacity:0;width:0;height:0}
.leadform__box{flex:none;width:21px;height:21px;border:1px solid var(--muted);border-radius:3px;
  display:flex;align-items:center;justify-content:center;background:#fff;transition:.15s ease}
.leadform__box svg{opacity:0}
.leadform__agree input:checked+.leadform__box{background:var(--accent);border-color:var(--accent)}
.leadform__agree input:checked+.leadform__box svg{opacity:1}
.leadform__agree-txt{font-weight:400;font-size:14px;line-height:16px;color:var(--muted)}
.leadform__agree-txt a{color:var(--muted);text-decoration:underline}

.leadform__btn{margin-top:18px;width:100%;height:66px;background:var(--accent);border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Arial",sans-serif;font-weight:700;font-size:20px;color:#fff;cursor:pointer;
  transition:opacity .2s ease,filter .2s ease,transform .15s ease}
.leadform__btn[disabled]{opacity:.35;cursor:default}
.leadform__btn:not([disabled]):hover{filter:brightness(1.07)}
.leadform__btn:not([disabled]):active{transform:scale(.98)}
.leadform__msg{margin:8px 0 0;font-size:15px;color:var(--muted)}
.leadform__msg.is-err{color:#c0392b}

@media(max-width:1024px){
  /* моб 853:4276 (карточка 358, контент 318): заголовок 28, аватар 51,
     инпуты 58px, кнопка 63px. */
  .leadform__card{width:100%;padding:30px 20px;border-radius:20px;gap:32px}
  .leadform__head{gap:24px}
  .leadform__title{font-size:28px;line-height:32px}
  .leadform__lead{gap:10px}
  .leadform__ava{width:51px;height:51px}
  .leadform__lead p{font-size:15px;line-height:1.13}
  .leadform__input{height:58px;font-size:18px}
  .leadform__channels{gap:8px}
  .leadform__chan{height:56px;font-size:16px;gap:6px}
  .leadform__btn{height:63px;font-size:20px}
  .leadform__lbl--full{display:none}
  .leadform__lbl--short{display:inline}
  .leadform__btn-full{display:none}
  .leadform__btn-short{display:inline}
}

/* Планшет 641–1024: карточка остаётся 483px и по центру, как на десктопе. */
@media(min-width:641px) and (max-width:1024px){
  .leadform__card{width:483px;padding:30px}
  .leadform__title{font-size:32px;line-height:36px}
}

/* Форма как модалка: Fancybox добавляет свои поля и сжимал карточку до 415px,
   из-за чего заголовок ломался на три строки. Отдаём ей исходные 483px. */
.fancybox__slide:has(#js_modal_lead){padding:40px 16px 16px}
.fancybox__content:has(#js_modal_lead){padding:0;background:transparent;box-shadow:none;width:auto;max-width:100%}
/* Fancybox назначает нашему контейнеру класс .fancybox__content с padding:34px —
   он и съедал ширину (483 − 68 = 415). Обнуляем: карточка сама держит свои поля. */
#js_modal_lead{width:483px;max-width:100%;padding:0;background:transparent;box-shadow:none}
#js_modal_lead .leadform{display:block}
#js_modal_lead .leadform__card{width:100%;box-shadow:none}
/* в модалке карточка уже, чем на странице, — заголовок не должен ломаться на 3 строки */

@media(max-width:1024px){
  .fancybox__content:has(#js_modal_lead){width:100%}
  #js_modal_lead{width:100%;padding:0}
}


/* Затемнение фона под модалкой — по умолчанию у Fancybox подложка почти прозрачная. */
.fancybox__container{--fancybox-bg:rgba(1,46,74,.62);background:rgba(1,46,74,.62)}
.fancybox__backdrop{background:transparent!important}