/* shengenhub.ru — свои стили. Размеры повторяют прежний вид сайта на ширинах 1920…375.
   Ступени ширины: >1200, ≤1200, ≤960 (телефонная вёрстка), ≤640, ≤480. */

@font-face {
  font-family: 'TildaSans'; /* Tilda Sans, лицензия SIL OFL 1.1 */
  src: url('/assets/fonts/TildaSans-VF.woff2') format('woff2'), url('/assets/fonts/TildaSans-VF.woff') format('woff');
  font-weight: 250 1000;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; font-family: 'TildaSans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
/* главная кончается чёрным подвалом: фон под страницей того же цвета, чтобы Safari не показывал белую полосу
   у нижнего края и при оттягивании; все блоки главной закрашены сами */
html.home, html.home body { background: #111; }
h1, h2, h3, h4, p { margin: 0; font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
ul { margin: 0 0 10px; padding-left: 20px; }
strong { font-weight: 700; }
img { border: 0; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible { outline: 2px solid #4da3ff; outline-offset: 3px; }

/* сетка */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; margin: 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }

/* кнопка */
.btn {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  padding: 18.8px 60px; border: 0; border-radius: 32px; background: #007bff; color: #fff;
  font: 600 16px/1.4 'TildaSans', Arial, sans-serif; text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none; transition: opacity .2s;
}

/* полоса прокрутки сверху: main.js растягивает её от 0 до 1 по доле прочитанного */
.progress { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 4px; background: #007bff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease-out; }

/* ---------- шапка ---------- */
.header { background: #292929; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.header__bar { display: none; }
/* на компьютере списки делят место поровну (логотип ровно по центру); если пункты при этом не влезают в строку,
   main.js снимает .menu--even и ширина списков идёт по содержимому */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 50px; min-height: 80px; padding: 0 40px; }
.menu__list { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.logo--center { flex: 0 0 auto; }
@media (min-width: 961px) { .menu--even .menu__list { flex-basis: 0; } }
.menu__list--right { justify-content: flex-end; }
.menu__list li { font-size: 16px; white-space: nowrap; }
.menu__list a { display: block; color: #fff; }
.logo { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 24px; font-weight: 400; white-space: nowrap; }
.logo img { display: block; width: 34px; height: auto; }
/* три полоски нарисованы фоном кнопки */
.burger {
  width: 22px; height: 14px; padding: 0; border: 0; cursor: pointer; transition: opacity .2s;
  background: linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat, linear-gradient(#fff, #fff) 0 6px / 100% 2px no-repeat,
              linear-gradient(#fff, #fff) 0 12px / 100% 2px no-repeat;
}
@media (hover: hover) { .burger:hover { opacity: .75; } }

/* ---------- первый экран ---------- */
.hero { padding: 120px 0 45px; background: #292929; color: #fff; text-align: center; }
.hero__inner { max-width: 960px; margin: 0 auto; }
.hero__title { padding-bottom: 35px; font-size: 52px; line-height: 1.23; font-weight: 600; }
.hero__descr { padding-bottom: 50px; font-size: 22px; line-height: 1.55; font-weight: 300; }
.hero__btns { display: flex; justify-content: center; padding-bottom: 70px; }
.hero__photo { height: 730px; padding: 0 40px; }
.hero__img {
  height: 100%; border-radius: 20px; background: url('/assets/hero.jpg') center / cover no-repeat;
  background-image: image-set(url('/assets/hero.webp') type('image/webp'), url('/assets/hero.jpg') type('image/jpeg'));
}

/* ---------- кому подходим ---------- */
.suitable { padding: 150px 0; background: #292929; color: #fff; }
.suitable__title { font-size: 52px; line-height: 1.23; font-weight: 600; }
.suitable__list { margin: 24px 0 10px; font-size: 24px; line-height: 32px; font-weight: 600; }
.suitable__text { font-size: 20px; line-height: 1.55; font-weight: 300; }
.suitable__text strong { font-size: 24px; }

/* ---------- заголовки секций ---------- */
.sec-title { margin-bottom: 40px; font-size: 42px; line-height: 1.23; font-weight: 600; text-align: center; overflow-wrap: break-word; }
.sec-descr { max-width: 560px; margin: 0 auto 90px; font-size: 24px; line-height: 1.5; font-weight: 300; text-align: center; overflow-wrap: break-word; }

/* ---------- как проходит работа ---------- */
.process { padding: 75px 0 135px; background: #fff; color: #000; }
.steps { padding: 0; list-style: none; }
.step { display: flex; align-items: flex-start; }
.step + .step { margin-top: 70px; }
.step__icon { flex: none; display: block; width: 65px; height: 65px; }
.step__body { padding-left: 30px; }
.step__title { margin-bottom: 14px; font-size: 22px; line-height: 1.35; font-weight: 600; }
.step__descr { font-size: 18px; line-height: 1.55; font-weight: 300; }

/* ---------- цены ---------- */
.prices { padding: 75px 0 135px; background: #292929; color: #fff; }
.prices .sec-descr { margin-bottom: 105px; }
.price + .price { margin-top: 30px; }
.price__row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; }
.price__title { max-width: 90%; font-size: 18px; line-height: 1.35; font-weight: 600; }
.price__value { padding-left: 20px; font-size: 18px; line-height: 1.35; font-weight: 600; text-align: right; white-space: nowrap; }
.price__line { border-top: 1px solid #fff; opacity: .1; }
.price__descr { padding-top: 8px; font-size: 16px; line-height: 1.55; font-weight: 300; }

/* ---------- точная стоимость ---------- */
.note { padding: 0 0 75px; background: #292929; color: #fff; text-align: center; }
.note__title { margin-bottom: 25px; font-size: 24px; line-height: 1.17; font-weight: 600; }
.note__descr { max-width: 700px; margin: 0 auto; font-size: 22px; line-height: 1.5; font-weight: 300; }
.note__btns { display: flex; justify-content: center; margin-top: 70px; }
.note__btn { background: #3390ff; border-radius: 60px; }

/* ---------- раскрывашки: вопросы и кейсы ---------- */
.acc__head { margin: 0; }
.acc__btn { position: relative; display: block; width: 100%; padding: 27px 50px 27px 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.acc__q { display: inline-block; font-family: 'TildaSans', Arial, sans-serif; font-size: 24px; line-height: 1.35; font-weight: 600; }
.acc__q--sm { font-size: 20px; }
/* значок «+» из двух полосок; у открытого пункта поворачивается в «×» */
.acc__plus { position: absolute; right: 9px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: #222; transition: transform .25s ease, opacity .2s; }
.acc__plus::before, .acc__plus::after { content: ''; position: absolute; background: currentColor; }
.acc__plus::before { left: 0; right: 0; top: 10px; height: 2px; }
.acc__plus::after { top: 0; bottom: 0; left: 10px; width: 2px; }
.acc__btn[aria-expanded="true"] .acc__plus { transform: rotate(45deg); }
.acc__body { overflow: hidden; }
.acc__text { font-size: 18px; line-height: 1.55; font-weight: 300; }

.faq { padding: 75px 0 135px; background: #007bff; color: #fff; }
.faq .sec-title { margin-bottom: 90px; }
.acc--faq { border-bottom: 1px solid #fff; }
.acc--faq .acc__head { border-top: 1px solid #fff; }
.acc--faq .acc__plus { color: #fff; }
@media (hover: hover) { .acc__btn:hover .acc__plus { opacity: .7; } }
.acc--faq .acc__text { margin-bottom: 40px; } /* в эталоне 20px отступ текста + 20px снизу блока */

.cases { padding: 60px 0 90px; background: #fff; color: #000; }
.cases__title { font-size: 42px; line-height: 1.23; font-weight: 600; }
.cases__descr { margin-top: 40px; font-size: 24px; line-height: 1.5; font-weight: 300; }
.acc--cases { border-bottom: 1px solid #eee; }
.acc--cases .acc__head { border-top: 1px solid #eee; }
.acc--cases .acc__text { margin-bottom: 40px; }
.acc--cases .acc__text strong, .acc--cases .acc__text span { font-size: 16px; }
.acc--cases .accent { color: #007bff; }

/* ---------- заявка ---------- */
.lead { padding: 135px 0; background: #292929; color: #fff; }
.lead__cols { display: grid; grid-template-columns: 460px 460px; column-gap: 40px; justify-content: center; }
.lead__text { margin-bottom: 40px; font-size: 30px; line-height: 1.45; font-weight: 300; }
.socials { display: flex; margin: 0; padding: 0; list-style: none; }
.socials a { display: block; }
.socials svg { display: block; width: 100%; height: 100%; }
.socials--30 { gap: 4px; margin-top: 20px; }
.socials--30 li { height: 34px; margin: 4px 1px 0; }
.socials--30 a { width: 30px; height: 30px; }
.socials--30 .ico-bg { fill: #007bff; }
.socials--30 .ico-fg { fill: #292929; }
.socials--25 { gap: 10px; }
.socials--25 a { transition: opacity .15s; }
.socials--25 a:hover { opacity: .8; }
.socials--25 a { width: 32px; height: 32px; }
.socials--25 .ico-bg { fill: #525252; }
.socials--25 .ico-fg { fill: #111; }

.lead-form { font-size: 16px; }
.field { margin-bottom: 25px; }
.input, .phone {
  display: block; width: 100%; height: 60px; margin: 0; padding: 0 20px; border: 1px solid #c7c7c7; border-radius: 0;
  background: transparent; color: #fff; font: 400 16px/1.33 'TildaSans', Arial, sans-serif; outline: none; -webkit-appearance: none; appearance: none;
}
.input::placeholder, .phone__input::placeholder { color: rgba(255, 255, 255, .45); opacity: 1; }
.input--area { height: 170px; padding-top: 17px; resize: vertical; }
.field--area { padding-bottom: 4px; }
.phone { display: flex; align-items: center; cursor: text; }
.phone__flag { flex: none; width: 18px; height: 13px; background: linear-gradient(#fff 0 33.4%, #0039a6 0 66.7%, #d52b1e 0); }
.phone__code { flex: none; margin: 0 5px 0 10px; }
.phone__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; outline: none; }
.field__error { display: none; margin-top: 6px; color: #ff6b6b; font-size: 14px; line-height: 1.3; }
.has-error .field__error { display: block; }
.has-error .phone { border-color: #ff6b6b; }
.has-error .check { outline: 1px solid #ff6b6b; outline-offset: 3px; }

.check { display: flex; align-items: flex-start; gap: 10px; color: #fff; font-size: 15px; line-height: 1.2; font-weight: 300; cursor: pointer; }
.check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { flex: none; width: 20px; height: 20px; border: 2px solid #fff; opacity: .6; transition: opacity .2s; }
.check__text { padding-top: calc(10px - .6em); } /* середина первой строки — на середине квадратика */
.check__input:checked + .check__box {
  opacity: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.check__input:focus-visible + .check__box { outline: 2px solid #4da3ff; outline-offset: 2px; }
.check__text a { color: #fff; }
.check__text u { text-decoration: underline; }
.trap { display: none; }
.field--check { margin-bottom: 30px; }
.lead-form__btn { display: flex; width: fit-content; }
.lead-form.is-sending .lead-form__btn { opacity: .6; }

/* ---------- подвал ---------- */
/* подвал: логотип и значки, три колонки ссылок, внизу за линией — мелкий юридический текст */
.footer { padding: 64px 0 40px; background: #111; color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; column-gap: 40px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; align-self: start; gap: 24px; }
.footer__logo { display: block; }
.footer__logo img { display: block; width: 120px; height: auto; aspect-ratio: 1284 / 1164; } /* пропорции исходного SH3.png */
.footer__legal {
  display: flex; justify-content: space-between; gap: 40px; margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12); color: #6b6b6b; font-size: 12px; line-height: 1.55; font-weight: 300;
}
.footer__legal p { max-width: 520px; }
.footer__title { margin: 0 0 14px; color: #525252; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.footer__list { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.55; font-weight: 300; }
.footer__list li { margin-bottom: 10px; }
.footer__list li:last-child { margin-bottom: 0; }


/* ---------- кнопка «наверх» и плашка cookie ---------- */
/* кнопка «наверх»: светлый круг, стрелка-уголок из двух сторон повёрнутого квадрата */
.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: 99990; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); cursor: pointer; transition: background-color .2s, opacity .2s;
  animation: to-top-in .4s ease-out both;
}
.to-top::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -4px 0 0 -7px;
  border-top: 1px solid #000; border-left: 1px solid #000; transform: rotate(45deg); transition: border-color .2s;
}
.to-top.is-hiding { opacity: 0; }
@keyframes to-top-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (min-width: 981px) {
  .to-top:hover { background: #007bff; }
  .to-top:hover::before { border-color: #fff; }
}

.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 12px; background: #111; color: #fff; box-shadow: rgba(0, 0, 0, .4) 0 10px 30px;
  font-size: 13px; line-height: 1.4;
}
.cookie a { color: #4da3ff; }
.cookie__btn { padding: 10px; border: 0; border-radius: 8px; background: #2b7cff; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* ---------- документы ---------- */
.doc main { padding-top: 68px; padding-bottom: 66px; }
.doc__text { color: #000; font-size: 20px; line-height: 1.55; font-weight: 300; }
.doc__text .center { text-align: center; }

/* ---------- «Спасибо» ---------- */
body.thanks { background: #0f0f0f; }
.thanks__box { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; overflow: hidden; }
.thanks__content { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 20px; color: #fff; }
/* текст и кнопка живут в тёмной левой части (40% ширины): не ближе 32px к фото */
.thanks__content > * { max-width: calc(580px - 10vw - 32px); }
.thanks__title { font-size: 40px; line-height: 1.23; font-weight: 600; }
.thanks__descr { padding: 40px 0 20px; font-size: 18px; line-height: 1.55; font-weight: 300; }
.thanks__note { padding: 0 0 32px; }
.thanks__btn { display: flex; width: fit-content; background: #1f5bff; border-radius: 30px; white-space: normal; }
.thanks__alt { margin-top: 16px; color: rgba(255, 255, 255, .6); font-size: 15px; }
.thanks__alt a { color: #fff; text-decoration: underline; }
.thanks__photo {
  position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: url('/assets/hero.jpg') center / cover no-repeat;
  background-image: image-set(url('/assets/hero.webp') type('image/webp'), url('/assets/hero.jpg') type('image/jpeg'));
}

/* ===================== ≤1200 ===================== */
@media (max-width: 1200px) {
  .wrap { max-width: 960px; padding: 0 10px; }
  .narrow { max-width: 620px; }
  .grid2 { column-gap: 20px; }
  .btn { padding-left: 45px; padding-right: 45px; }
  .hero__inner { max-width: 780px; }
  .hero__title, .suitable__title { font-size: 48px; }
  .hero__descr { font-size: 20px; }
  .suitable__text { font-size: 18px; }
  .sec-title, .cases__title { font-size: 38px; }
  .sec-descr, .cases__descr { font-size: 22px; }
  .step__title { font-size: 20px; }
  .step__descr { font-size: 16px; }
  .price__title, .price__value { font-size: 16px; }
  .price__descr { font-size: 14px; }
  .acc__q { font-size: 22px; }
  .acc__q--sm { font-size: 20px; }
  .acc__text { font-size: 16px; }
  .lead__cols { grid-template-columns: 380px 380px; column-gap: 20px; }
  .lead__text { font-size: 26px; }
  .check { font-size: 14px; }
  .footer__grid { column-gap: 20px; }
  .footer__title { font-size: 14px; }
  .footer__list { font-size: 12px; }
  .doc__text { font-size: 18px; }
  .thanks__content { max-width: 960px; padding-left: 10px; padding-right: 10px; }
  .thanks__content > * { max-width: calc(470px - 10vw - 32px); }
}

/* ===================== ≤960: телефонная вёрстка ===================== */
@media (max-width: 960px) {
  .wrap { max-width: 640px; padding: 0 20px; }
  .narrow { max-width: none; }
  .grid2 { display: block; }

  .header { border-bottom: 0; }
  .header__bar { display: flex; align-items: center; justify-content: space-between; min-height: 65px; padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .menu { display: none; padding: 30px 20px 40px; }
  .menu.is-open { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .menu .logo--center { display: none; }
  .menu__list { flex-direction: column; flex-wrap: nowrap; gap: 20px; width: 100%; }
  .menu__list li { width: 100%; text-align: center; white-space: normal; }

  .hero__inner { max-width: none; }
  .hero__photo { height: 270px; padding: 0 20px; }
  .suitable__top { margin-bottom: 30px; }
  .sec-title { margin-bottom: 20px; }
  .sec-descr, .prices .sec-descr { margin-bottom: 45px; }
  .faq .sec-title { margin-bottom: 45px; }
  .step + .step { margin-top: 40px; }
  .step__icon { width: 60px; height: 60px; }
  .step__body { padding-left: 20px; }
  .prices__col:first-child { margin-bottom: 30px; }
  .note__btns { margin-top: 30px; margin-bottom: 20px; }
  .cases .grid2 > * + * { margin-top: 45px; }
  .cases__descr { margin-top: 20px; }
  .lead__cols { display: block; }
  .lead__contacts { padding-bottom: 40px; text-align: center; }
  .socials--30 { justify-content: center; }

  .footer { padding: 48px 0 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__brand { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__logo img { width: 88px; }
  .footer__col--docs { grid-column: 1 / -1; order: 3; }
  .footer__legal { display: block; margin-top: 32px; }
  .footer__legal p + p { margin-top: 10px; }


  .thanks__box { min-height: 0; }
  .thanks__content { max-width: 640px; padding: 70px 20px; }
  .thanks__content > * { max-width: none; }
  .thanks__descr { padding: 30px 0 20px; }
  .thanks__note { padding: 0 0 32px; }
  .thanks__photo { position: relative; width: 100%; height: 270px; }
}

/* ===================== ≤650 / ≤640 ===================== */
@media (max-width: 650px) {
  .acc--faq .acc__btn { padding-top: 15px; padding-bottom: 14px; }
  .acc--faq .acc__text { margin-bottom: 25px; }
}
@media (max-width: 640px) {
  .btn { padding-left: 30px; padding-right: 30px; white-space: normal; }
  .hero__title, .suitable__title, .sec-title, .cases__title { font-size: 30px; }
  .hero__descr { font-size: 18px; line-height: 1.45; }
  .hero__btns { flex-wrap: wrap; }
  .hero__btn { width: 100%; }
  .suitable__text { font-size: 16px; line-height: 1.45; }
  .sec-descr, .cases__descr { font-size: 20px; line-height: 1.4; }
  .step__title { font-size: 18px; }
  .step__descr { font-size: 14px; line-height: 1.45; }
  .step__icon { width: 50px; height: 50px; }
  .price__title, .price__value { font-size: 14px; }
  .price__descr { font-size: 12px; line-height: 1.45; }
  .note__descr { line-height: 1.4; }
  .note__btn { width: 100%; margin-bottom: 10px; }
  .acc__q { font-size: 20px; }
  .acc__text { font-size: 14px; line-height: 1.45; }
  .acc--cases .acc__btn { padding-top: 15px; padding-bottom: 14px; }
  .acc--cases .acc__text { margin-bottom: 25px; }
  .lead__text { font-size: 22px; }
  .input--area { padding-top: 12px; }
  .check { font-size: 12px; }
  .lead-form__btn { width: 100%; margin-bottom: 20px; }
  .footer__title { font-size: 12px; }
  .doc__text { font-size: 16px; line-height: 1.45; }
  .thanks__descr { line-height: 1.45; }
  .to-top { right: 25px; bottom: 29px; width: 40px; height: 40px; }
  .to-top::before { width: 11px; height: 11px; margin: -3px 0 0 -5.5px; }
}
@media (max-width: 480px) {
  .hero { padding: 90px 0 15px; }
  .suitable { padding: 75px 0 90px; }
  .process { padding: 75px 0 90px; }
  .prices { padding: 60px 0 75px; }
  .faq { padding: 60px 0 90px; }
  .lead { padding: 75px 0 90px; }
  .lead__text { font-size: 18px; }
}