/* Секции главной — по макету Figma, размеры взяты числами.
   Контентная колонка 1440 внутри кадра 1920: поля --side. */

.sec { max-width: var(--wrap); margin: 0 auto; padding-left: var(--side); padding-right: var(--side); }

/* ─── Банки ───────────────────────────────────────────────────────────────
   187:193: полоса 158, фон #F4F5F7, поля 32 сверху, зазор 14, плитки 170×64. */
.banks { background: var(--bg-soft); }
.banks__in {
  max-width: var(--wrap); margin: 0 auto; padding: 32px var(--side);
  display: flex; flex-direction: column; gap: 14px;
}
.banks__cap {
  font-size: 13px; font-weight: 600; line-height: 15.6px;
  letter-spacing: 1.04px; text-transform: uppercase; color: var(--ink-3);
}
.banks__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.banks__item {
  flex: 1 1 0; min-width: 140px; max-width: 170px; height: 64px;
  display: grid; place-items: center; padding: 8px 16px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-fld);
}
.banks__item img { max-height: 100%; width: auto; object-fit: contain; }

/* ─── Калькулятор ─────────────────────────────────────────────────────────
   194:193: поля 80/0, зазор 32; колонки 960 + 460, зазор 20, поля 32. */
.mort { background: #fff; }
.mort__in {
  max-width: var(--wrap); margin: 0 auto; padding: 80px var(--side);
  display: flex; flex-direction: column; gap: 32px;
}
.mort__head { display: flex; flex-direction: column; gap: 8px; }
.mort__h { font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -1px; }
.mort__sub { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink-2); }

.mort__cols { display: grid; grid-template-columns: minmax(0, 960fr) 460px; gap: 20px; align-items: start; }

.mort__calc {
  padding: 32px; background: #fff; border-radius: var(--r-card);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 20px;
}
/* Вкладки программ: 42 высотой, поля 11/18, скруглены полностью. */
.mort__progs { display: flex; gap: 8px; flex-wrap: wrap; }
.mort__prog { position: relative; }
.mort__prog input { position: absolute; opacity: 0; width: 0; height: 0; }
.mort__prog span {
  display: inline-block; padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 20.5px; cursor: pointer;
}
.mort__prog input:checked + span { background: var(--accent); color: #fff; }
.mort__prog input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.mort__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Поля переиспользуют .ff из hero.css: в макете это один компонент
   Filter Field, и разводить два одинаковых стиля незачем. */
.mort__fields .ff__c {
  background-image: none; padding-right: 0;
  appearance: textfield; -moz-appearance: textfield;
}
.mort__fields .ff__c::-webkit-outer-spin-button,
.mort__fields .ff__c::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mort__note { font-size: 13px; font-weight: 500; line-height: 18.85px; color: var(--ink-3); }
.mort__recalc {
  align-self: flex-start; padding: 12px 20px; box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-fld); background: #fff; font-weight: 600; cursor: pointer;
}

/* Результат: фон #FFF4EE, поля 32, зазор 10. */
.mort__res {
  padding: 32px; background: var(--accent-bg); border-radius: var(--r-card);
  display: flex; flex-direction: column; gap: 10px;
}
.mort__cap { font-size: 12px; font-weight: 600; line-height: 16.4px; color: var(--accent-2); }
.mort__sum { font-size: 52px; font-weight: 800; line-height: 71px; letter-spacing: -1.5px; }
.mort__alt { font-size: 15px; font-weight: 500; line-height: 21.75px; color: var(--ink-2); }
.mort__terms { font-size: 12px; font-weight: 500; line-height: 17.4px; color: var(--ink-3); }
.mort__cta {
  padding: 16px 24px; border-radius: var(--r-fld);
  background: var(--accent); color: #fff; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 20.5px;
}
.mort__cta:hover { background: var(--accent-2); }

/* ─── Планшет ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mort__cols { grid-template-columns: minmax(0, 1fr); }
  .mort__h { font-size: 32px; line-height: 1.15; }
}

/* ─── Телефон 390 ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .banks__in { padding: 24px var(--side); }
  .banks__row { gap: 8px; }
  .banks__item { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; height: 56px; }

  .mort__in { padding: 48px var(--side); gap: 24px; }
  .mort__h { font-size: 28px; letter-spacing: -0.6px; }
  .mort__calc { padding: 16px; gap: 16px; }
  .mort__fields { grid-template-columns: 1fr; }
  .mort__res { padding: 20px; }
  .mort__sum { font-size: 40px; line-height: 1.1; }
  .mort__progs { gap: 6px; }
  .mort__prog span { padding: 9px 14px; font-size: 14px; }
}

/* ─── Индекс новостроек (33:31) ───────────────────────────────────────────
   Секция 1920×575 на белом; внутри полоса #FFF4EE с радиусом 20, поля
   32/32/118/32 — снизу больше из-за силуэта города. Заголовок и кнопка
   по центру, три метрики 448 с зазором 16. */
.idx { background: #fff; }
.idx__wrap { max-width: var(--wrap); margin: 0 auto; padding: 40px var(--side); }
.idx__band {
  position: relative; overflow: hidden;
  padding: 32px 32px 118px; border-radius: var(--r-card);
  background: var(--accent-bg);
  display: flex; flex-direction: column; gap: 24px;
}
.idx__head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.idx__title { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.idx__h { font-size: 28px; font-weight: 800; line-height: 38.25px; color: var(--ink); }
.idx__sub { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-2); }
.idx__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r-fld);
  background: #fff; font-size: 15px; font-weight: 600; line-height: 20.49px;
}
.idx__btn i { font-style: normal; color: var(--accent-2); }
.idx__btn:hover { box-shadow: inset 0 0 0 1px var(--accent); }

.idx__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.idx__m {
  padding: 24px; background: #fff; border-radius: var(--r-fld);
  display: flex; flex-direction: column; gap: 6px;
}
.idx__l { font-size: 14px; font-weight: 500; line-height: 19.12px; color: var(--ink-3); }
.idx__v { font-size: 40px; font-weight: 800; line-height: 54.64px; letter-spacing: -0.8px; color: var(--ink); }
/* Рост показываем зелёным, как в макете; падение — акцентным. */
.idx__v.is-up { color: #1F8A5B; }
.idx__v.is-down { color: var(--accent-2); }
.idx__n { font-size: 13px; font-weight: 500; line-height: 17.76px; color: var(--ink-3); }

/* Силуэт города по нижнему краю полосы. */
.idx__skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 118px;
  background: url("/static/img/skyline.svg") bottom center / auto 100% no-repeat;
  pointer-events: none;
}

@media (max-width: 1180px) {
  .idx__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .idx__wrap { padding: 24px var(--side); }
  .idx__band { padding: 24px 20px 80px; }
  .idx__h { font-size: 22px; line-height: 1.2; }
  .idx__metrics { grid-template-columns: 1fr; }
  .idx__v { font-size: 32px; line-height: 1.15; }
  .idx__skyline { height: 80px; }
}