/* Точечные доработки лендинга (палитра/типографика сайта сохранены) */

/* --- Блок кейсов: глобальные стили app3.css задают `header { height }` для шапки — заголовок секции — через div.results-block__header --- */
#results-block .results-block__header .results-block__title {
  text-align: center;
}

/* --- Виджет: Telegram как нижний круг, ссылка на @belovfashion --- */
.vidjet__item:first-child {
  min-width: 26px;
  min-height: 26px;
}

.vidjet__item:first-child img,
.vidjet__item:first-child picture {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.vidjet__item:first-child:active {
  opacity: 0.88;
}

/* WhatsApp: только картинка 26px; контейнер .vidjet__item не трогаем — слот 34px, ничего не съезжает */
.vidjet__item:nth-child(2) img,
.vidjet__item:nth-child(2) picture {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- «Что изменится…»: все 6 иконок золотые --- */
.change .change__item svg,
.change .change__item svg * {
  fill: #c5a059 !important;
  stroke: #c5a059 !important;
  color: #c5a059;
}

/* --- Блог / «1 млн»: первая строка уже, декоративные линии как у «Варианты работы» --- */
.blog .simple-title.simple-title_blog-decor h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.blog .simple-title_blog-decor .simple-title_blog-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 32px);
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
}

.blog .simple-title_blog-decor .simple-title_blog-line {
  flex: 1;
  max-width: 132px;
  height: 1px;
  background: #e1c393;
  opacity: 0.95;
}

.blog .simple-title_blog-decor .simple-title_blog-text {
  text-align: center;
}

.blog .simple-title_blog-decor .simple-title__mobile1 {
  font-size: clamp(1.85rem, 2.8vw, 2.65rem) !important;
/*   line-height: 1.15; */
}

@media (max-width: 580px) {
  .blog .simple-title_blog-decor .simple-title_blog-line {
    max-width: 48px;
  }
}

/* --- «1000 человек»: строка «за 20 лет» уже по ширине --- */
.more .simple-title h2 > span:last-child.simple-title_more-years {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem) !important;
  line-height: 1.12;
}

/* --- Блок Fashion TV под каруселью ТВ --- */
.tw__fashiontv {
  margin-top: 3.5rem;
  padding: 0 1rem 2rem;
  text-align: center;
  /*
   * Размер превью (ширина и высота) — правьте только эти две переменные.
   * Картинка внутри с object-fit: cover, пропорции превью не ломаются.
   */
  --tw-ftv-width: 700px;
  --tw-ftv-height: 400px;
}

.tw__fashiontv-title {
  margin: 0 0 1.25rem;
  font-family: Tragan, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5f2ed;
}

.tw__fashiontv .gq__video-embed {
  /* width: min(100%, var(--tw-ftv-width)); */
  max-width: min(100%, var(--tw-ftv-width));
  /* height: var(--tw-ftv-height); */
  padding-bottom: 0;
  margin: 30px auto 0;
  width: 374px;
  height: 225px;
}

/* Кнопка play пропорционально меньшему превью */
.tw__fashiontv .gq__video-play {
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
}

.tw__fashiontv .gq__video-play::after {
  margin: -0.325rem 0 0 -0.18rem;
  border-width: 0.375rem 0 0.375rem 0.625rem;
}

/* Карусель ТВ: стрелки слева/справа от слайда (не под блоком Fashion TV) */
.tw__slider-viewport {
  position: relative;
  width: 100%;
}

/* Десктоп: те же золотые круглые кнопки, что и в модалке кейсов (в app.css — пунктир и пустой круг) */
@media only screen and (min-width: 581px) {
  /* .swiper-container в теме с z-index:1 — без этого стрелки оказываются под слайдами */
  .tw__slider-btn {
    z-index: 25;
    border: none !important;
    background: linear-gradient(145deg, #f4d9a6 0%, #e2bb7c 45%, #c9a056 100%) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  }

  .tw__slider-btn_prev {
    left: -6.75rem;
  }

  .tw__slider-btn_next {
    right: -6.75rem;
  }

  .tw__slider-btn:hover {
    filter: brightness(1.08);
    background: linear-gradient(145deg, #f8e4b8 0%, #e8c88f 45%, #d4aa5c 100%) !important;
  }
}

/* Мобилка: навигация ТВ — как в теме (тонкие стрелки + точки под текстом слайда), без золотых кругов поверх видео */

/* --- Форма после портфолио: те же классы и метрики, что у блока .calc (app3.css) --- */
.results-cta {
  padding: 0;
  background: transparent;
}

/* Панель = .calc__wrap без margin-top:-20rem (у секции «расчёт» он уходит под hero) */
.results-cta__panel {
  box-sizing: border-box;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  /*-----*/
  margin-top: -200px;
  margin-bottom: -260px;
  /*-----*/
  background: #f6f5f4;
  padding: 8rem 6rem 2.5rem;
  box-shadow: 0 49px 106px rgba(0, 4, 7, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

@media only screen and (max-width: 1024px) {
  .results-cta__panel {
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
    min-height: 0;
  }
}

@media only screen and (max-width: 768px) {
  .results-cta__panel {
    margin-top: 0;
    background: transparent;
    padding: 8rem 1.75rem 6rem;
    box-shadow: none;
  }
}

@media only screen and (max-width: 580px) {
  .results-cta__panel {
    padding: 4rem 1.25rem 2rem;
  }
}

/* Заголовок: дублируем .calc .simple-title h2 (+ те же брейкпоинты, что в app3.css) */
.results-cta .simple-title {
  margin-bottom: 0;
  width: 100%;
}

.results-cta .simple-title h2 {
  font-size: 3.6rem;
  max-width: 1100px;
  margin: 0 auto 5rem;
  font-weight: 300;
  color: #333;
  text-align: center;
}

@media only screen and (max-width: 1024px) {
  .results-cta .simple-title h2 {
    font-size: 3rem;
  }

  .results-cta .simple-title h2 span {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .results-cta .simple-title__mobile1,
  .results-cta .simple-title__mobile2 {
    display: none;
  }
}

/* Моб./планшет: золотой заголовок; перебить .safari-tal и wsnw (nowrap) из app3 */
@media only screen and (max-width: 768px) {
  .results-cta .simple-title {
    padding: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Переносы вместо одной строки «вправо до обрезки» */
  .results-cta .simple-title wsnw {
    white-space: normal !important;
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .results-cta .simple-title h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #e2bb7c;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.02;
    box-sizing: border-box;
  }

  .results-cta .simple-title em.safari-tal {
    line-height: 1.06 !important;
    padding-top: 0 !important;
    text-align: justify;
  }

  .results-cta .simple-title em.safari-tal::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Две строки по центру; кегль ужат на узких экранах, чтобы «Работу над вашим стилем» не рвалась посередине */
  .results-cta .simple-title__mobile1 {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(2.65rem, 7.7vw, 5.75rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin: 0;
    font-weight: 400;
  }

  .results-cta .simple-title__mobile2 {
    align-self: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: clamp(2.28rem, 6.25vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: 0.025em;
    margin: 0.15rem 0 0;
  }

  .results-cta .calc__form {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    align-items: center;
  }

  .results-cta .calc__form .inputs__field-wrap {
    width: 100%;
    max-width: 100%;
    /* text-align: center; */
  }
}

@media only screen and (max-width: 580px) {
  .results-cta .simple-title h2 {
    margin-bottom: 2rem;
  }

  .results-cta .simple-title__mobile1 {
    font-size: clamp(1.46rem, 4.0vw, 3.9rem);
    text-align: justify !important;
  }

  .results-cta .simple-title__mobile2 {
    font-size: clamp(0.5rem, 3.75vw, 3.25rem);
    margin-top: 0.12rem;
  }
}

/* На светлой панели подписи и согласие не белые (перебить .calc__form @768 из app3) */
.results-cta .calc__form .inputs__personal {
  opacity: 1 !important;
}

@media only screen and (max-width: 768px) {
  .results-cta .calc__form .inputs__personal {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  .results-cta .calc__form .inputs__content {
    color: #fff !important;
  }
}

@media only screen and (max-width: 1024px) {
  .results-cta .calc__form .btn {
    padding-left: 0;
    padding-right: 0;
  }
}

.results-cta .results-cta__req-star {
  color: #fff;
  font-weight: 600;
  margin-left: 0.06em;
}

/* --- «за 1 день…»: меньше пустоты сверху после вставки формы --- */
section.types {
  padding-top: 12rem !important;
}

@media only screen and (max-width: 768px) {
  section.types {
    padding-top: 7rem !important;
  }
}

@media only screen and (max-width: 580px) {
  section.types {
    padding-top: 5.5rem !important;
  }
}

/* Popup2: поправки по типографике */
/* Белый подзаголовок (step__sub-title) — чуть левее */
#popup2 .step__sub-title {
  max-width: 36rem; /* как было задумано */
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* popup2: мобильный заголовок — перебиваем .step из app3 */
@media only screen and (max-width: 768px) {
  #popup2 .simple-title h2 {
    text-align: left !important;
    -moz-text-align-last: left;
    text-align-last: left;
    letter-spacing: 0.03em;
    line-height: 1.05 !important;
    word-spacing: normal !important;
  }

  #popup2 .step .simple-title__mobile1,
  #popup2 .step .simple-title__mobile2,
  #popup2 .step .simple-title__mobile3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    line-height: 1 !important;
  }

  /* Меньше кегль, чем в .step по умолчанию (2.3rem / 2.2rem / 1.45rem) */
  #popup2 .step .simple-title__mobile1 {
    font-size: clamp(2.2rem, 6.1vw, 3.6rem) !important;
  }

  #popup2 .step .simple-title__mobile2 {
    font-size: clamp(2.2rem, 4.9vw, 2.05rem) !important;
  }

  #popup2 .step .simple-title__mobile3 {
    font-size: clamp(1.4rem, 4.1vw, 1.75rem) !important;
  }

  #popup2 .simple-title h2 em {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
    -moz-text-align-last: left;
    text-align-last: left;
    word-spacing: normal !important;
  }

  /* «чтобы связаться» + «с Александром Беловым» — по центру */
  #popup2 .step .simple-title__mobile2,
  #popup2 .step .simple-title__mobile3 {
    text-align: center !important;
    -moz-text-align-last: center !important;
    text-align-last: center !important;
  }

  #popup2 .simple-title h2 .safari-tal,
  #popup2 .simple-title h2 wsnw {
    line-height: 1 !important;
  }

  #popup2 .simple-title h2 wsnw {
    white-space: normal !important;
  }

  #popup2 .simple-title h2 span {
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit;
  }
}

.popup_step .step {
  position: relative;
}

.popup_step .popup__close {
  z-index: 3;
}

.popup_step .step__sub-title {
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- 404 --- */
.page-404 {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background: #0e0e1a;
  color: #f7f7f7;
  font-family: FuturaPT, -apple-system, sans-serif;
  text-align: center;
}

.page-404 h1 {
  font-family: Tragan, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e2bb7c;
  margin: 0 0 1rem;
}

.page-404 p {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 28rem;
  color: #d8d8d8;
}

body.page-404-body {
  background: #0e0e1a;
}

.page-404 .btn {
  display: inline-block;
  cursor: pointer;
  padding: 1rem 2.25rem;
  font-family: FuturaPT, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1a1a;
  background: #e2bb7c;
  border: 1px solid #e2bb7c;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.page-404 .btn:hover {
  background: #f0d4a8;
  border-color: #f0d4a8;
  color: #111;
}

.page-404 .btn:active {
  transform: translateY(1px);
}

/* --- Слайдеры на мобилке: блок «Клиенты» (peoples_main / peoples_bot) ---
   В app3 при max-width: 768px скрыты .peoples__slider и .peoples__btn, показывается .peoples__list.
   Swiper при этом всё равно вешается на .swiper-container внутри скрытого слайдера — размеры 0,
   свайп и стрелки не работают. Возвращаем карусель и прячем дублирующую сетку из четырёх карточек. */
@media only screen and (max-width: 768px) {
  .peoples:not(.peoples_popup) .peoples__slider {
    display: none !important;
  }

  .peoples:not(.peoples_popup) .peoples__btn {
    display: none !important;
  }

/*   .peoples:not(.peoples_popup) .peoples__list {
    display: none !important;
  } */
  .gq__reward:nth-child(3) br {
    display: block;
  }
  .blog .simple-title_blog-decor .simple-title_blog-text {
    text-align: justify;
  }
  #popup2 .simple-title h2 .safari-tal, #popup2 .simple-title h2 wsnw {
    line-height: 15.5px !important;
    text-align: justify !important;
  }
  #popup2 .step .simple-title__mobile1, #popup2 .step .simple-title__mobile2, #popup2 .step .simple-title__mobile3 {
    line-height: 0.5px !important;
  }
  #popup2 .simple-title h2 em {
    line-height: 0.5px !important;
  }
  .simple-title__mobile1 .safari-tal {
    text-align: justify !important;
  }
}

/* Отзывы: стрелки/точки снаружи .swiper-container — поднимаем слой на случай перекрытия */
.reviews__slider > .slider-nav {
  position: relative;
  z-index: 4;
}