/* Промо-сайт «пРОСТо Финансы».
   Значения взяты из макета Figma: цвета, кегли и размеры блоков сняты
   с векторного экспорта (docs/figma/1200_Main.txt), а не подобраны на глаз.
   Палитра та же, что в кабинете, — это одна дизайн-система. */

:root {
  --primary: #063e36;        /* заголовки */
  --accent-1: #00916e;       /* главные кнопки */
  --accent-2: #197765;       /* акцент, «Войти», иконки */
  --ink: #2b2f2e;            /* основной текст */
  --bg-card: #f5f7f6;        /* карточки */
  --link: #005bbd;           /* ссылки «Подробнее» */
  --input: #d0d5d4;          /* рамки полей */
  --input-text: #a3acaa;     /* подсказки в полях */
  --ramka: #c9c9c9;          /* рамка тихой кнопки */
  --zvezda: #ffc107;         /* звёзды и цифры */
  --wb: #671da6;             /* фиолетовый Wildberries */

  --shirina: 1080px;         /* контейнер при 1200; на 1440 — 1142 */
  --polya: 60px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ─────────── общие блоки ─────────── */

.obolochka {
  max-width: calc(var(--shirina) + var(--polya) * 2);
  margin: 0 auto;
  padding: 0 var(--polya) 95px;   /* шаг между секциями из макета */
}

.obolochka > h2,
.po-centru-tekst {
  font-size: 28px; line-height: 1.2; font-weight: 600;
  color: var(--primary); margin-bottom: 28px;
}
.po-centru-tekst { text-align: center; }

.podzagolovok {
  text-align: center; font-size: 18px; color: var(--ink);
  max-width: 720px; margin: 0 auto 34px;
}

.po-centru { display: flex; justify-content: center; }
.shirina-vsya { grid-column: 1 / -1; }

/* ─────────── кнопки ─────────── */

.knopka {
  display: inline-flex; align-items: center; justify-content: center;
  height: 56px; padding: 0 28px; border: none; border-radius: 10px;
  background: var(--accent-1); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 19px; font-weight: 500; white-space: nowrap;
}
.knopka:hover { background: #017a5d; }
.knopka.tihaya {
  background: #fff; color: var(--primary); border: 1px solid var(--ramka);
}
.knopka.tihaya:hover { background: var(--bg-card); }
.knopka.bolshaya { padding: 0 34px; }

/* ─────────── шапка ─────────── */

.shapka {
  border-bottom: 1px solid #eef1f0;
  position: sticky; top: 0; background: #fff; z-index: 20;
}
.shapka .ryad {
  max-width: calc(var(--shirina) + var(--polya) * 2);
  margin: 0 auto; padding: 18px var(--polya);
  display: flex; align-items: center; gap: 40px;
}
.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo span { font-size: 18px; font-weight: 600; color: var(--ink); }

.menyu { display: flex; gap: 34px; font-size: 16px; color: var(--primary); }
.menyu a:hover { color: var(--accent-2); }

.shapka-knopki { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.voyti { font-size: 19px; font-weight: 500; color: var(--accent-2); }
.shapka-knopki .knopka { height: 56px; font-size: 19px; }

.burger { display: none; background: none; border: none; cursor: pointer;
          align-items: center; padding: 4px; margin-left: auto; }
.burger img { display: block; }

/* ─────────── первый экран ─────────── */

.geroy {
  max-width: calc(var(--shirina) + var(--polya) * 2);
  margin: 0 auto; padding: 90px var(--polya) 95px; text-align: center;
}
.geroy h1 {
  font-size: 40px; line-height: 1.2; font-weight: 600;
  color: var(--accent-2); margin-bottom: 26px;
}
.lid { font-size: 20px; color: var(--ink); margin-bottom: 42px; }

.geroy-knopki { display: flex; justify-content: center; gap: 22px; margin-bottom: 40px; }

.doverie { display: flex; justify-content: center; align-items: center; gap: 14px; }
.avatary { display: flex; }
.avatary img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; margin-left: -12px;
}
.avatary img:first-child { margin-left: 0; }
.ocenka { text-align: left; }
.zvyozdy { color: var(--zvezda); font-size: 14px; letter-spacing: 1px; }
.zvyozdy b { color: var(--ink); font-size: 16px; margin-left: 4px; }
.ocenka a { display: block; font-size: 14px; color: var(--ink);
            text-decoration: underline; }

/* ─────────── как это работает ─────────── */

.shagi { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
         gap: 38px; margin-bottom: 46px; }
.shagi li { position: relative; overflow: hidden; }
/* В макете от кружка вправо до края колонки идёт тонкая линия. */
.shagi .krug::after {
  content: ""; position: absolute; top: 32px; left: 80px; right: 0; height: 1px;
  background: #d7dedc;
}
.shagi .krug {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--primary); margin-bottom: 26px;
}
.shagi h3 { font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.shagi p { font-size: 18px; color: var(--ink); }

/* ─────────── команда ─────────── */

.komanda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 39px;
           margin-bottom: 44px; }
.komanda article { background: var(--bg-card); border-radius: 16px; overflow: hidden; }
.komanda img { width: 100%; height: 236px; object-fit: cover; }
.komanda .telo { padding: 22px 24px 26px; }
.komanda h3 { font-size: 26px; font-weight: 500; color: var(--primary); }
.komanda .rol { font-size: 20px; color: var(--ink); margin: 4px 0 14px; }
.komanda p { font-size: 18px; color: var(--ink); }

/* ─────────── функции ─────────── */

.funkcii { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.funkcii article {
  background: var(--bg-card); border-radius: 16px; padding: 24px 28px 26px;
  display: flex; flex-direction: column; min-height: 269px; text-align: center;
  align-items: center;
}
/* Иконки выгружены из макета в SVG — размеры и цвет уже внутри файла. */
.ikonka { width: 40px; height: 40px; margin-bottom: 18px; display: block; }
.funkcii h3 { font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
.funkcii p { font-size: 16px; color: var(--ink); margin-bottom: 16px; }
.funkcii a { margin-top: auto; font-size: 16px; color: var(--link); }

/* ─────────── интеграция ─────────── */

.wb { color: var(--wb); }
.integraciya { display: grid; grid-template-columns: 1fr 380px; gap: 60px;
               align-items: center; }
.preimushchestva { list-style: none; display: grid; gap: 34px; }
.preimushchestva li { display: flex; align-items: center; gap: 18px;
                      font-size: 24px; color: var(--ink); }
/* Зелёный круг нарисован в самой иконке — обёртка больше не нужна. */
.znachok { width: 48px; height: 48px; flex: 0 0 48px; display: block; }

/* В макете содержимое карточки выровнено по центру. */
.karta-podklyucheniya {
  background: var(--bg-card); border-radius: 16px; padding: 26px 28px 30px;
  display: grid; gap: 14px; text-align: center;
}
.karta-podklyucheniya h3 { font-size: 20px; font-weight: 600; color: var(--primary); }
.karta-podklyucheniya p { font-size: 16px; color: var(--ink); }
.karta-podklyucheniya input {
  height: 44px; border: 1px solid var(--input); border-radius: 10px;
  padding: 0 14px; font-family: inherit; font-size: 16px; background: #fff;
}
.karta-podklyucheniya input::placeholder { color: var(--input-text); }
.predosterezhenie { display: flex; gap: 8px; font-size: 12px; color: var(--input-text);
                    text-align: center; justify-content: center; }

/* ─────────── тарифы ─────────── */

.garantii { list-style: none; display: flex; justify-content: center; gap: 34px;
            font-size: 14px; color: var(--ink); margin-bottom: 34px; flex-wrap: wrap; }
.garantii li::before { content: "✓"; color: var(--accent-2); margin-right: 8px; }

.tarify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
          align-items: start; margin-bottom: 46px; }
.tarify article {
  border: 1px solid #eef1f0; border-radius: 16px; padding: 28px 26px 30px;
  display: flex; flex-direction: column; position: relative; background: #fff;
}
.tarify .populyarnyy, .tarify article.populyarnyy {
  background: var(--bg-card); border-color: transparent;
  box-shadow: 4px 4px 22px rgba(0, 0, 0, .1);
}
.badzh {
  position: absolute; top: -14px; right: 22px; background: var(--zvezda);
  color: var(--primary); font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 8px;
}
.tarify .znak { width: 40px; height: 40px; display: block; margin-bottom: 12px; }
.tarify h3 { font-size: 24px; font-weight: 600; color: var(--primary); }
.tarify .dlya { font-size: 16px; color: var(--ink); margin: 4px 0 18px; }
.tarify .cena { font-size: 18px; color: var(--ink); margin-bottom: 20px; }
.tarify .cena b { font-size: 32px; font-weight: 600; color: var(--primary); }
.tarify .knopka { width: 100%; margin-bottom: 20px; }
.tarify .glavnoe { font-size: 16px; color: var(--ink); padding-bottom: 16px;
                   border-bottom: 1px solid #e6eae9; margin-bottom: 16px; }
.spisok { list-style: none; display: grid; gap: 12px; font-size: 16px;
          margin-bottom: 20px; }
.spisok li::before { content: "✓"; color: var(--accent-2); margin-right: 10px; }
.spisok li.net::before { content: "—"; color: var(--input-text); }
.podrobnee { font-size: 16px; color: var(--link); margin-top: auto; }

/* ─────────── гармошка ─────────── */

.garmoshka { display: grid; gap: 14px; }
.garmoshka details { background: var(--bg-card); border-radius: 12px; }
.garmoshka summary {
  list-style: none; cursor: pointer; padding: 20px 26px;
  font-size: 20px; color: var(--primary); display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.garmoshka summary::-webkit-details-marker { display: none; }
/* Стрелка гармошки — иконка из макета, а не типографский знак. */
.garmoshka summary::after {
  content: ""; width: 20px; height: 20px; flex: 0 0 20px;
  background: url("img/icons/chevron-down.svg") center / contain no-repeat;
}
.garmoshka details[open] summary::after {
  background-image: url("img/icons/chevron-up.svg");
}
.garmoshka .otvet { padding: 0 26px 22px; }
.garmoshka .otvet p { font-size: 16px; color: var(--ink); margin-bottom: 12px;
                      border-left: 3px solid var(--accent-2); padding-left: 16px; }
.garmoshka.nomera .otvet p { border-left-color: var(--accent-2); }

/* ─────────── формы ─────────── */

.forma { display: grid; gap: 16px; }
.forma label { display: grid; gap: 6px; font-size: 14px; color: var(--primary); }
.forma input, .forma textarea {
  height: 46px; border: 1px solid var(--input); border-radius: 10px;
  padding: 0 14px; font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff;
}
.forma textarea { height: 336px; padding: 14px; resize: vertical; }
.forma input::placeholder, .forma textarea::placeholder { color: var(--input-text); }

/* Поле телефона в макете начинается с флага — он лежит внутри рамки. */
.pole-s-flagom { position: relative; display: block; }
.pole-s-flagom img {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  border-radius: 3px; pointer-events: none;
}
.pole-s-flagom input { width: 100%; padding-left: 44px; }
.forma .knopka { justify-self: start; margin-top: 8px; }

/* Ширины из макета: поля 323, карточка эксперта 367x450, зазор 125.
   Вся пара центрирована в контейнере, а не растянута по нему. */
.podbor { display: grid; grid-template-columns: 323px 367px; gap: 125px;
          justify-content: center; align-items: start; }
.ekspert { background: var(--bg-card); border-radius: 16px; overflow: hidden; }
.ekspert img { width: 100%; height: 260px; object-fit: cover; }
.ekspert figcaption { padding: 20px 24px 26px; }
.ekspert h3 { font-size: 22px; font-weight: 500; color: var(--primary); }
.ekspert .rol { font-size: 16px; color: var(--ink); margin: 4px 0 12px; }
.ekspert p { font-size: 16px; color: var(--ink); }

/* Обратная связь: в макете две колонки по 390 с зазором 62, пара центрирована. */
.forma.shirokaya { grid-template-columns: 390px 390px; gap: 62px;
                   justify-content: center; align-items: start; }
.forma.shirokaya .levo { display: grid; gap: 16px; }
.forma.shirokaya .pravo { align-content: start; }
.forma.shirokaya .po-centru { margin-top: 8px; }

/* ─────────── отзывы ─────────── */

.otzyvy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
          margin-bottom: 40px; }
.otzyvy article { background: var(--bg-card); border-radius: 16px; padding: 24px 26px 26px; }
/* В макете подпись слева, портрет справа, и вся группа прижата к правому краю. */
.otzyvy header { display: flex; flex-direction: row-reverse; align-items: center;
                 gap: 14px; margin-bottom: 16px; text-align: right; }
.otzyvy header img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.otzyvy header b { display: block; font-size: 16px; color: var(--primary); }
.otzyvy header span { font-size: 13px; color: var(--ink); }
.otzyvy blockquote { font-size: 16px; color: var(--ink); margin-bottom: 16px; }
.otzyvy blockquote::before { content: "“"; color: var(--accent-2); font-size: 40px;
                             line-height: 0; margin-right: 6px; vertical-align: -10px; }
.otzyvy .zvyozdy { font-size: 20px; letter-spacing: 3px; }

/* ─────────── цифры ─────────── */

.cifry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
         text-align: center; }
.cifry b { display: block; font-size: 40px; font-weight: 600; color: var(--zvezda);
           margin-bottom: 10px; }
.cifry span { font-size: 16px; color: var(--primary); }

/* ─────────── подвал ─────────── */

.podval { border-top: 1px solid #eef1f0; padding: 34px 0 40px; }
.podval .ryad {
  max-width: calc(var(--shirina) + var(--polya) * 2);
  margin: 0 auto; padding: 0 var(--polya);
  display: flex; align-items: center; flex-wrap: wrap; gap: 24px 40px;
}
.podval .menyu { font-size: 16px; }
.socseti { margin-left: auto; display: flex; gap: 22px; }
.socseti a { width: 48px; height: 48px; border-radius: 12px; display: flex;
             align-items: center; justify-content: center; }
.socseti svg { width: 28px; height: 28px; fill: #fff; }
.socseti .vk { background: #0077ff; }
.socseti .yt { background: #d52b1e; }
.socseti .wa { background: #25d366; }
.socseti .tg { background: #2aabee; }
.kopirayt { text-align: center; font-size: 14px; color: var(--ink); margin-top: 26px; }

/* ─────────── адаптив: точки из макета ─────────── */

@media (max-width: 1200px) {
  :root { --polya: 40px; }
}

/* Планшет — раскладка макета «768»: функции по два, команда и тарифы
   остаются в три узких столбца, формы делятся пополам. */
@media (max-width: 1024px) {
  :root { --polya: 32px; }
  /* Шапка мельчает уже здесь: в полном размере строка перестаёт
     помещаться около 1000 px и кнопка уезжала за край. */
  .shapka .ryad { gap: 16px; }
  .menyu { gap: 16px; font-size: 12px; }
  .menyu a { white-space: nowrap; }
  .shapka-knopki { gap: 14px; }
  .voyti { font-size: 16px; }
  .shapka-knopki .knopka { height: 48px; font-size: 16px; padding: 0 16px; }
  .shapka .logo img { width: 30px; height: auto; }
  .shapka .logo span { font-size: 13px; }
  .shapka .logo { gap: 8px; }
  .funkcii { grid-template-columns: repeat(2, 1fr); }
  .integraciya { grid-template-columns: 1fr 320px; gap: 34px; }
  .podbor { grid-template-columns: 1fr 321px; gap: 44px; }
  .forma.shirokaya { grid-template-columns: 1fr 1fr; gap: 30px; }
  .forma textarea { height: 300px; }
  .tarify { gap: 8px; }
  .tarify article { padding: 22px 18px 24px; }
  .komanda { gap: 22px; }
  .otzyvy { grid-template-columns: repeat(2, 1fr); }
  .preimushchestva li { font-size: 20px; }
}

/* На «768» макет ещё показывает всё меню целиком, только мельче. */
@media (max-width: 768px) {
  :root { --polya: 24px; }
  .geroy { padding-top: 56px; }
  .geroy h1 { font-size: 32px; }
  .lid { font-size: 16px; }
  /* Колонки те же, что на десктопе, только текст и круги мельче. */
  .shagi { gap: 24px; }
  .shagi .krug { width: 50px; height: 50px; font-size: 24px; margin-bottom: 20px; }
  .shagi .krug::after { top: 25px; left: 64px; }
  .shagi h3 { font-size: 16px; }
  .shagi p { font-size: 12px; }
  .komanda h3 { font-size: 18px; }
  .komanda .rol, .komanda p { font-size: 13px; }
  .funkcii h3 { font-size: 18px; }
  .funkcii p, .funkcii a { font-size: 13px; }
  .integraciya, .podbor { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .cifry { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .forma.shirokaya { grid-template-columns: minmax(0, 1fr); }
  .forma textarea { height: 220px; }
  .obolochka > h2, .po-centru-tekst { font-size: 24px; }
  .podval .ryad { flex-direction: column; align-items: flex-start; gap: 22px; }
  .socseti { margin-left: 0; }
}

/* Ниже 768 (последней ширины, где макет ещё рисует меню целиком)
   строка шапки перестаёт помещаться — прячем её под бургер. */
@media (max-width: 767px) {
  .menyu, .shapka-knopki { display: none; }
  .burger { display: flex; }
  /* Открытое меню разворачивает саму шапку вниз: меню и кнопки идут в потоке,
     иначе два всплывающих блока накладываются друг на друга. */
  .shapka.otkryto .ryad { flex-wrap: wrap; row-gap: 20px; padding-bottom: 24px; }
  .shapka.otkryto .menyu {
    display: flex; flex-direction: column; gap: 18px; width: 100%;
    order: 3; font-size: 16px;
  }
  .shapka.otkryto .shapka-knopki {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    width: 100%; order: 4; margin-left: 0;
  }
  .shapka.otkryto .voyti { text-align: center; }
  /* Меню ушло под бургер — логотипу снова есть место. */
  .shapka .logo img { width: 38px; }
  .shapka .logo span { font-size: 15px; }
}

/* Ниже 640 макет уходит в мобильный фрейм: сетки в один столбец,
   а функции держатся в два столбца до самого узкого экрана. */
@media (max-width: 640px) {
  :root { --polya: 20px; }
  .shagi, .komanda, .tarify { grid-template-columns: minmax(0, 1fr); }
  .shagi .krug::after { display: none; }
  .shagi h3, .komanda h3, .funkcii h3 { font-size: 20px; }
  .shagi p, .komanda .rol, .komanda p, .funkcii p, .funkcii a { font-size: 16px; }
  .cifry { grid-template-columns: minmax(0, 1fr); }
  .otzyvy { grid-template-columns: minmax(0, 1fr); }
  .garmoshka summary { font-size: 17px; padding: 16px 18px; }
  .preimushchestva li { font-size: 18px; }
}

@media (max-width: 560px) {
  .funkcii { grid-template-columns: minmax(0, 1fr); }
  /* Ручной перенос строки задаёт минимальную ширину строки и распирает
     список на узком экране — на телефоне переносим по месту. */
  .preimushchestva br { display: none; }
  .geroy h1 { font-size: 24px; }
  .lid { font-size: 14px; }
  .geroy-knopki { flex-direction: column; align-items: center; }
  /* На узком экране кегль кнопок из макета — 16, иначе подпись не влезает. */
  .knopka { font-size: 16px; height: 48px; padding: 0 20px; }
  .geroy-knopki .knopka { width: 245px; }
}