/* =============================================================================
   Стили новых блоков. Подключается ПОСЛЕ оригинального index-ByBq984l.css.
   Всё своё — с префиксом fs-, чтобы не пересекаться с боевыми классами
   и чтобы правки было видно в диффе одним куском.

   Палитра взята из оригинала:
     текст          #1c1c1c
     приглушённый   #1c1c1c94 / #1c1c1c85
     фон страницы   #fafafa,  фон секции #f3f3f1
     карточка       #f7f4ed
     акцент         #2aabee (наведение #229ed9)
   ============================================================================= */

/* --- общая обёртка секции: та же сетка, что у styles-section__inner --------- */
.fs-section       { padding: 104px 0; }
.fs-section--tint { background: #f3f3f1; }
.fs-section__inner{ width: min(1320px, 100% - 64px); margin: 0 auto; }
.fs-section__intro{ max-width: 760px; margin-bottom: 52px; }
.fs-eyebrow{
  color:#1c1c1c85; letter-spacing:.13em; text-transform:uppercase;
  margin-bottom:14px; font-size:12px; font-weight:600;
}
.fs-title{
  letter-spacing:-.045em; text-wrap:balance;
  font-size:clamp(36px,4.25vw,62px); font-weight:600; line-height:.98; margin:0;
}
.fs-lead{
  color:#1c1c1c94; max-width:62ch; margin:18px 0 0;
  font-size:16px; line-height:1.5;
}

/* --- 1. Подсказки под полем ввода ------------------------------------------
   Главный барьер первого экрана — пустое поле. Чип подставляет готовый текст. */
.fs-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  width:min(608px,100%); margin:14px auto 0;
}
.fs-chips__label{
  flex-basis:100%; text-align:center; margin:0 0 2px;
  font-size:12px; font-weight:500; color:#1c1c1c85;
}
.fs-chip{
  font:inherit; font-size:13px; font-weight:500; color:#1c1c1c;
  background:#fffffff0; border:1px solid #1c1c1c1f; border-radius:999px;
  padding:7px 13px; cursor:pointer;
  transition:border-color .16s, background-color .16s, transform .16s;
}
.fs-chip:hover{ border-color:#2aabee; background:#fff; transform:translateY(-1px); }
.fs-chip:focus-visible{ outline:2px solid #2aabee; outline-offset:2px; }

/* --- 2. Условие сделки на первом экране ------------------------------------ */
.fs-hero-terms{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 18px; margin:22px auto 0; padding:0; list-style:none;
  font-size:13px; color:#1c1c1c94;
}
.fs-hero-terms li{ display:flex; align-items:center; gap:7px; }
.fs-hero-terms li::before{
  content:""; width:5px; height:5px; border-radius:999px; background:#2aabee; flex:none;
}

/* --- 3. Бейдж «пример» на мокапе -------------------------------------------
   Без него мокап читают как отзывы и форму самого freesite.io. */
.fs-preview-badge{
  position:absolute; z-index:3; top:14px; left:14px;
  background:#1c1c1cd9; color:#fff; border-radius:999px;
  padding:5px 11px; font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; pointer-events:none;
}

/* --- 4. «Как это работает» -------------------------------------------------- */
.fs-steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
  counter-reset:fs-step;
}
.fs-step{
  position:relative; background:#fff; border:1px solid #1c1c1c14;
  border-radius:22px; padding:24px; counter-increment:fs-step;
}
.fs-step::before{
  content:counter(fs-step);
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:16px;
  background:#2aabee; color:#fff; border-radius:12px;
  font-size:15px; font-weight:650; font-variant-numeric:tabular-nums;
}
.fs-step h3{
  margin:0; font-size:19px; font-weight:600; letter-spacing:-.025em; line-height:1.15;
}
.fs-step p{ margin:8px 0 0; font-size:14px; line-height:1.45; color:#1c1c1c94; }
.fs-step__when{
  display:inline-block; margin-top:14px; padding:4px 9px;
  background:#f3f3f1; border-radius:999px;
  font-size:11px; font-weight:600; color:#1c1c1c8a;
}

/* --- 5. «Что входит и что платно» ------------------------------------------ */
.fs-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.fs-panel{ background:#fff; border:1px solid #1c1c1c14; border-radius:22px; padding:28px; }
.fs-panel--muted{ background:#f7f4ed; border-color:#1c1c1c0f; }
.fs-panel h3{ margin:0 0 6px; font-size:21px; font-weight:600; letter-spacing:-.03em; }
.fs-panel > p{ margin:0 0 18px; font-size:13px; color:#1c1c1c8a; }
.fs-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.fs-list li{ position:relative; padding-left:26px; font-size:15px; line-height:1.4; }
.fs-list li::before{
  content:""; position:absolute; left:0; top:.35em; width:16px; height:16px;
  border-radius:999px; background:#2aabee1f;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232aabee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.fs-list--paid li::before{
  background-color:#1c1c1c14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c8a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.fs-list small{ display:block; margin-top:2px; font-size:13px; color:#1c1c1c8a; }

/* --- 6. Вопросы и ответы ---------------------------------------------------- */
.fs-faq{ max-width:860px; }
.fs-faq details{ border-bottom:1px solid #1c1c1c17; }
.fs-faq details:first-of-type{ border-top:1px solid #1c1c1c17; }
.fs-faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.3;
}
.fs-faq summary::-webkit-details-marker{ display:none; }
.fs-faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:13px; height:13px;
  margin-top:-6px; transition:transform .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c1c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.fs-faq details[open] summary::after{ transform:rotate(180deg); }
.fs-faq summary:focus-visible{ outline:2px solid #2aabee; outline-offset:3px; border-radius:8px; }
.fs-faq__answer{ margin:0; padding:0 44px 22px 0; font-size:15px; line-height:1.55; color:#1c1c1c94; }
.fs-faq__answer a{ color:#1c1c1c; text-decoration:underline; }

/* --- 7. Контакты в шапке ---------------------------------------------------- */
.fs-header-contacts{ display:flex; align-items:center; gap:14px; margin-right:4px; }
.fs-header-contacts a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:550; color:#1c1c1c; white-space:nowrap;
}
.fs-header-contacts a:hover{ color:#229ed9; }
.fs-header-contacts svg{ width:17px; height:17px; flex:none; }
.fs-header-contacts .fs-phone{ font-variant-numeric:tabular-nums; }

/* --- 8. Выбор банка в форме заявки ------------------------------------------ */
.fs-bank-field{ grid-area:bank; border:0; margin:0; padding:0; min-width:0; }
.fs-bank-field legend{ color:#1c1c1ca3; font-size:12px; font-weight:550; }
.fs-bank-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:8px; }
.fs-bank-grid label{
  display:grid; place-items:center; height:42px; padding:0 6px; cursor:pointer;
  background:#f8f8f6; border:1px solid #1c1c1c14; border-radius:11px;
  font-size:12px; font-weight:550; color:#1c1c1c94; text-align:center;
  transition:border-color .16s, color .16s, background-color .16s;
}
.fs-bank-grid label:hover{ border-color:#1c1c1c33; color:#1c1c1c; }
.fs-bank-grid label.is-selected{ border-color:#2aabee; background:#fff; color:#1c1c1c; box-shadow:0 0 0 1px #2aabee; }
.fs-bank-grid input{ position:absolute; opacity:0; pointer-events:none; }

/* --- адаптив ---------------------------------------------------------------- */
@media (max-width:1023px){
  .fs-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .fs-section{ padding:72px 0; }
  .fs-section__inner{ width:calc(100% - 40px); }
  .fs-section__intro{ margin-bottom:32px; }
  .fs-title{ font-size:34px; }
  .fs-steps{ grid-template-columns:1fr; gap:12px; }
  .fs-step{ padding:20px; }
  .fs-cols{ grid-template-columns:1fr; }
  .fs-panel{ padding:22px; }
  .fs-faq summary{ font-size:16px; padding-right:36px; }
  .fs-header-contacts .fs-phone{ display:none; }
  .fs-bank-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fs-chips{ gap:6px; }
  .fs-chip{ font-size:12px; padding:6px 11px; }
}
@media (prefers-reduced-motion:reduce){
  .fs-chip, .fs-faq summary::after{ transition:none; }
}

/* --- сетка формы: добавилась строка с выбором банка ------------------------- */
.lead-inline__fields{ grid-template-areas:"name phone" "email messenger" "bank bank"; }
@media (max-width:767px){
  .lead-inline__fields{ grid-template-areas:"name" "phone" "messenger" "email" "bank"; }
}

/* --- полоса банков на первом экране -----------------------------------------
   Поверх насыщенной части градиента логотипы не читаются, поэтому
   подкладываем светлую карточку. На втором экране такого не требовалось —
   там фон был ровный #fafafa. */
#screen-1 .bank-partners{
  width:min(1180px,100%); margin-left:auto; margin-right:auto;
  margin-top:32px; padding:18px 0 22px;
  background:#fffffff2; border:1px solid #fff; border-radius:26px;
  box-shadow:0 18px 48px #1c1c1c1f;
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
}
#screen-1 .bank-partners > p{ color:#1c1c1c94; }
#screen-1 .bank-marquee{ margin-top:12px; }
#screen-1 .bank-marquee__item{ height:56px; }
.fs-hero-terms{ margin-top:26px; }
@media (max-width:767px){
  #screen-1 .bank-partners{ margin-top:24px; padding:14px 0 16px; border-radius:20px; }
  #screen-1 .bank-marquee__item{ height:46px; }
}

/* --- ИСПРАВЛЕНИЯ ПОСЛЕ ПРОСМОТРА -------------------------------------------
   1. Шапка была прозрачной и наезжала на текст. В оригинальном CSS фон
      появляется по классу .is-scrolled — его вешал React, а при переносе
      на обычный JS обработчик потерялся. Добавлен в app.js.
   2. Шапка тесная: .site-header__inner — это min(1120px, 100% - 48px)
      с gap 56px. Добавленный пункт меню и контакты туда не помещались,
      «Примеры работ» наезжали на Telegram. Уменьшаем зазор и прячем
      контакты на узких экранах — в мобильном меню они всё равно есть.
   3. Якорные переходы прятали заголовки под фиксированной шапкой. */

.site-header__inner{ gap:28px; }
.site-header__nav{ gap:2px; flex:0 1 auto; overflow:hidden; }
.site-header__actions{ gap:12px; flex:none; }
.fs-header-contacts{ gap:12px; margin-right:2px; }

@media (max-width:1279px){
  .fs-header-contacts .fs-phone{ display:none; }
}
@media (max-width:1119px){
  .fs-header-contacts{ display:none; }
}

/* Заголовок раздела не должен уезжать под шапку при переходе по якорю */
/* Шапка фиксированная, поэтому у каждой секции-якоря должен быть отступ
   сверху — иначе заголовок уезжает под неё. #cases сюда забыли добавить
   вместе с остальными, нашлось при прогоне QA. */
#screen-1,#screen-2,#how,#included,#cases,#screen-3,#screen-4,#faq{ scroll-margin-top:76px; }

/* --- 9. Реальные работы ------------------------------------------------------ */
/* Работ стало семь, а не четыре: в сетке 4×N последний ряд из трёх карточек
   прижимался влево и оставлял дыру справа. Flex с центрированием кладёт
   остаток по центру, ширина карточки при этом остаётся как в полном ряду. */
.fs-cases{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.fs-cases > .fs-case{ flex:0 1 calc(25% - 15px); }
.fs-case{
  display:flex; flex-direction:column; background:#fff; border:1px solid #1c1c1c14;
  border-radius:22px; padding:24px; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.fs-case:hover{ transform:translateY(-3px); box-shadow:0 22px 48px #1c1c1c1a; border-color:#2aabee; }
.fs-case__niche{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#2aabee; margin-bottom:14px;
}
.fs-case h3{ margin:0; font-size:19px; font-weight:600; letter-spacing:-.025em; line-height:1.15; }
.fs-case p{ margin:8px 0 0; font-size:14px; line-height:1.45; color:#1c1c1c94; flex:1; }
.fs-case__link{
  margin-top:18px; font-size:13px; font-weight:550; color:#1c1c1c8a;
  display:inline-flex; align-items:center; gap:6px;
}
.fs-case__link::after{ content:"↗"; font-size:12px; }
.fs-case:hover .fs-case__link{ color:#229ed9; }

@media (max-width:1023px){ .fs-cases > .fs-case{ flex:0 1 calc(50% - 10px); } }
@media (max-width:767px){ .fs-cases{ gap:12px; } .fs-cases > .fs-case{ flex:1 1 100%; } .fs-case{ padding:20px; } }