:root{
  --bg:#ffffff;
  --text:#1e2a3a;
  --muted:#5c6b7a;
  --line:rgba(20,40,60,.12);
  --blue:#3c6fa6;          /* основная синяя */
  --blue-dark:#2f5f93;
  --btn:#3c6fa6;
  --btn-hover:#2f5f93;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --r: 14px;
  --container: 1200px;
  --header-h: 82px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;
}

/* HEADER */
.header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.header__inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo__mark{
  width:56px; height:42px;
  border-radius: 6px;
  border:2px solid var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color: var(--blue);
  letter-spacing:.5px;
}
.logo__text{ display:flex; flex-direction:column; line-height:1.05; }
.logo__text b{ font-size:14px; letter-spacing:.2px; }
.logo__text span{ font-size:11px; color:var(--muted); }

.nav{ display:flex; align-items:center; gap:12px; }
.nav__toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.nav__menu{
  display:flex; align-items:center; gap:16px;
}
.nav__menu a{
  font-weight:600;
  font-size:14px;
  color: #334455;
  padding:8px 6px;
}
.nav__menu a:hover{ color: var(--blue); text-decoration:none; }

.header__contacts{
  display:flex;
  align-items:center;
  gap:16px;
}

.hero .header__phone{ color:#fff; }

/* HERO (как на скриншоте) */
.hero{
  position:relative;
  min-height: 720px;
  overflow:hidden;
  background:
    linear-gradient(90deg, #ffffff 0 72%, var(--blue) 72% 100%);
}
.hero__bg{
  position:absolute;
  left:0; top:0; bottom:0;
  width:72%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    url("../img/city.jpg");
  background-size: cover;
  background-position: center;
  opacity: 1;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:0;
  min-height: 720px;
  padding-top: 48px;
}

/* левый контент */
.hero__content{
  padding-right: 30px;
}
.hero__kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin: 18px 0 22px;
  color: var(--muted);
  font-size:14px;
}
.hero__kicker .twentyfour{
  font-size:46px;
  font-weight:900;
  color: var(--blue);
  line-height:1;
}
.hero__kicker .ico{
  width:58px; height:58px;
  border-radius:50%;
  border:2px solid rgba(60,111,166,.35);
  display:flex; align-items:center; justify-content:center;
}
.hero__kicker .ico:before{
  content:"";
  width:28px; height:28px;
  border-radius:50%;
  border:2px solid rgba(60,111,166,.75);
  display:block;
}

.hero h1{
  margin: 0 0 16px;
  font-size: 46px;
  line-height:1.08;
  letter-spacing:-.4px;
  text-transform:uppercase;
  color:#2a3a4d;
}
.hero h1 .blue{ color: var(--blue); }

.hero__lead{
  margin:0 0 26px;
  color: var(--muted);
  font-size:16px;
  line-height:1.65;
  max-width: 520px;
}
.hero__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:54px;
  padding:0 28px;
  border-radius: 6px;
  border:2px solid transparent;
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
  text-transform:uppercase;
  cursor:pointer;
}
.btn--primary{
  background: var(--btn);
  color:#fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{ background: var(--btn-hover); }

.btn--ghost{
  background: transparent;
  border-color: rgba(60,111,166,.35);
  color: var(--blue);
}
.btn--ghost:hover{
  border-color: rgba(60,111,166,.65);
  text-decoration:none;
}

/* правая колонка (синяя) и фото */
.hero__right{ position:relative; }

.hero__rightTopWrap{
  position:absolute;
  top: 16px;
  right: 18px;
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  z-index:5;
}

.hero__rightTopWrap{
  position:absolute;
  right: 0;
  top: -48px; /* под шапку */
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  padding-right: 0;
}
.hero__rightTopWrap .header__contacts{
  padding-right: 0;
}
.hero__person{
  position:absolute;
  right: 24px;
  bottom: 0;
  width: min(430px, 92%);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.20));
}

/* секции ниже – делаем светлыми и “плоскими” */
.section{
  padding: 70px 0;
  background:#fff;
}
.section--alt{
  background:#f6f8fb;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head{ margin-bottom: 18px; }
.section__head h2{
  margin:0 0 8px;
  font-size:30px;
  letter-spacing:-.2px;
}
.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* сетки */
.grid{ display:grid; gap:18px; }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }

/* карточки в светлом стиле */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:22px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.card h3{ margin:0 0 10px; font-size:18px; color:#2a3a4d; }
.hr{ border:0; border-top:1px solid var(--line); margin:18px 0; }

.form{ display:flex; flex-direction:column; gap:12px; margin-top: 8px; }
label span{
  display:block;
  font-weight:800;
  font-size:12px;
  color:#415466;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.2px;
}
input, textarea{
  width:100%;
  border-radius: 8px;
  border:1px solid rgba(20,40,60,.18);
  background:#fff;
  color:var(--text);
  padding:12px 12px;
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(60,111,166,.55);
  box-shadow: 0 0 0 4px rgba(60,111,166,.12);
}
.checkbox{ display:flex; gap:10px; align-items:flex-start; }
.checkbox input{ width:18px; height:18px; margin-top:2px; }
.checkbox span{ font-weight:600; font-size:12px; color:var(--muted); line-height:1.45; }

.list{ margin:0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 6px 0; }

.note{
  padding:12px 14px;
  border-radius:10px;
  border:1px dashed rgba(60,111,166,.35);
  color: #38506a;
  background: rgba(60,111,166,.06);
}

/* footer */
.footer{
  background:#0f2f4f;
  color:#fff;
  padding: 34px 0;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
  gap:16px;
}
.footer__brand{ font-weight:900; }
.footer__title{ font-weight:900; margin-bottom:8px; }
.footer__text{ color: rgba(255,255,255,.78); font-size:13px; line-height:1.6; }
.footer__bottom{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:16px;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 8px;
}
.footer a{ color:#fff; }

/* mobile */
@media (max-width: 980px){
  :root{ --header-h: 72px; }
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--2{ grid-template-columns: 1fr; }

  .hero{ background:#fff; }
  .hero__bg{ width:100%; opacity:.9; }
  .hero__inner{ grid-template-columns: 1fr; padding-top: 20px; min-height: 700px; }
  .hero__right{ min-height: 360px; }
  .hero__person{ position:relative; right:auto; bottom:auto; margin: 18px auto 0; display:block; }
  .header__contacts{ display:none; }
}

@media (max-width: 720px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    position:absolute;
    right: 20px;
    top: calc(var(--header-h) - 10px);
    display:none;
    flex-direction:column;
    gap:8px;
    width:min(320px, calc(100% - 40px));
    background:#fff;
    border:1px solid var(--line);
    border-radius: 12px;
    padding:12px;
    box-shadow: var(--shadow);
  }
  .nav__menu.is-open{ display:flex; }
  .hero h1{ font-size: 34px; }
}
.avatar-img{
  width: 175px;
  height: 175px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(20,40,60,.12);
}

/* ===== CTA: "Заказать звонок" (glass) ===== */
/* Берём именно первую ссылку в контактах — это и есть кнопка */
.header__contacts a:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 10px 18px;
  border-radius: 12px;

  background: rgba(39, 105, 248, 0.411);
  border: 1px solid rgba(255,255,255,.45);
  color: #0f2a44;

  text-decoration:none !important;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);

  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* На синей части (в HERO) делаем текст белым */
.hero .header__contacts a:first-child{
  color:rgb(0, 0, 0);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.65);
}

/* Hover — "живая" */
.header__contacts a:first-child:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.32);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.75);
}

/* Active — легкое нажатие */
.header__contacts a:first-child:active{
  transform: translateY(0px) scale(.98);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* ===== Контакты: центрирование формы ===== */
.section#contacts,
.section--contacts {
  text-align: center;
}

/* Правая колонка — форма */
.section#contacts .card:last-child,
.section--contacts .card:last-child {
  text-align: center;
}

/* Заголовки и текст */
.section#contacts h3,
.section#contacts p,
.section--contacts h3,
.section--contacts p {
  text-align: center;
}

/* Форма */
.section#contacts form,
.section--contacts form {
  align-items: center;
}

/* Лейблы */
.section#contacts label,
.section--contacts label {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

/* Инпуты и textarea */
.section#contacts input,
.section#contacts textarea,
.section--contacts input,
.section--contacts textarea {
  text-align: center;
  max-width: 420px;
}

/* Кнопка отправки */
.section#contacts .btn,
.section--contacts .btn {
  margin: 12px auto 0;
}

/* ===== Контакты: усиленная типографика ===== */

/* Карточка контактов */
.section#contacts .card,
.section--contacts .card {
  padding: 32px 36px;
}

/* Заголовки (Адрес / Телефон / Email) */
.section#contacts h3,
.section--contacts h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}

/* Основной текст */
.section#contacts p,
.section--contacts p {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.7;
  color: #1e2a3a;
}

/* Сам адрес — делаем акцент */
.section#contacts p strong,
.section--contacts p strong {
  font-weight: 700;
}

/* Телефон */
.section#contacts a[href^="tel"],
.section--contacts a[href^="tel"] {
  display: block;
  font-size: 20px;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: 0.3px;
}

/* Email */
.section#contacts a[href^="mailto"],
.section--contacts a[href^="mailto"] {
  display: block;
  font-size: 17px;
  font-weight: 600;
  margin-top: 6px;
  color: var(--blue);
}

/* Мелкий поясняющий текст */
.section#contacts .small,
.section--contacts .small {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

/* ===== Центрирование контента: Преимущества → Этапы ===== */

/* Заголовки секций */
.section h2,
.section h3 {
  text-align: center;
}

/* Описания под заголовками */
.section p,
.section .muted {
  text-align: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Карточки (Преимущества, Услуги, Этапы) */
.section .card {
  text-align: auto;
}

/* Иконки внутри карточек */
.section .card svg,
.section .card img {
  display: block;
  margin: 0 auto 12px;
}

/* Списки — делаем аккуратный центр */
.section ul,
.section ol {
  list-style-position: inside;
  text-align: auto;
  padding-left: 0;
}

/* Этапы работ — центрируем номера и текст */
.section .step,
.section .steps,
.section .grid {
  text-align: auto;
}

/* Ограничиваем ширину текста, чтобы не было "стены" */
.section p,
.section li {
  max-width: 720px;
}

/* ===== Блок "Что подготовить" — компактно и премиально ===== */

/* Находим секцию консультации по заголовку и правим левую карточку */
.section .grid--2 .card:first-child{
  min-height: auto !important;
  padding: 26px 28px !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
}

/* Заголовок внутри карточки */
.section .grid--2 .card:first-child h3{
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px;
}

/* Если есть абзац-описание */
.section .grid--2 .card:first-child p{
  margin: 0 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: var(--muted);
  max-width: none !important;
}

/* Список: убираем буллеты, делаем "галочки" */
.section .grid--2 .card:first-child ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

.section .grid--2 .card:first-child li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  font-size: 15px;
  font-weight: 600;
  color: #2a3a4d;
  line-height: 1.45;
}

/* Галочка */
.section .grid--2 .card:first-child li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(60,111,166,.12);
  color: var(--blue);
  font-weight: 900;
}

/* =========================
   FAQ (ВОПРОС - ОТВЕТ) v2
   ========================= */

/* ===== FAQ: уменьшение пустого пространства ===== */

.faq2{
  background:#fff;
  padding: 45px 0 25px;
}

.faq2__head{
  text-align:center;
  margin-bottom: 18px; /* было 46 */
}

.faq2__title{
  margin:0;
  font-size: 44px;
  letter-spacing: 8px;
  font-weight: 500;
  text-transform: uppercase;
  color:#1f2c3b;
}

.faq2__title span{ color: var(--blue); }

.faq2__sub{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.faq2__wrap{
  display:grid;
  grid-template-columns: 140px 1fr 140px;
  align-items: start;              /* было center — это и давало “воздух” */
  gap: 24px;
}

/* Волны по бокам — убираем фиксированную высоту */
.faq2__wave{
  height: auto;                    /* было 440px */
  min-height: 260px;               /* чтобы волны не исчезали */
  opacity:.9;
  background-repeat:no-repeat;
  background-position:center;
  background-size: 32px 100%;
}

.faq2__wave--left{
  justify-self:end;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='400' viewBox='0 0 36 400'%3E%3Cpath d='M18 0 C8 20 28 40 18 60 C8 80 28 100 18 120 C8 140 28 160 18 180 C8 200 28 220 18 240 C8 260 28 280 18 300 C8 320 28 340 18 360 C8 380 28 390 18 400' fill='none' stroke='%233c6fa6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq2__wave--right{
  justify-self:start;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='400' viewBox='0 0 36 400'%3E%3Cpath d='M18 0 C28 20 8 40 18 60 C28 80 8 100 18 120 C28 140 8 160 18 180 C28 200 8 220 18 240 C28 260 8 280 18 300 C28 320 8 340 18 360 C28 380 8 390 18 400' fill='none' stroke='%233c6fa6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.faq2__list{
  width: min(720px, 100%);
  margin: 0 auto;
}

/* карточка */
.faq2__item{
  background: #3f6fa6; /* чуть “живее”, как на скрине */
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  overflow:hidden;
}
.faq2__item + .faq2__item{ margin-top: 14px; }

/* вопрос */
.faq2__q{
  width:100%;
  border:0;
  background: transparent;
  color:#fff;
  text-align:left;
  padding: 18px 54px 18px 22px;
  font-size: 16px;
  font-weight: 800;          /* жирнее (как ты просил) */
  line-height: 1.25;
  cursor:pointer;
  position:relative;
}

/* убираем стандартный маркер summary */
.faq2__q::-webkit-details-marker{ display:none; }

/* Плюс/крестик справа */
.faq2__icon{
  position:absolute;
  right: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
}
.faq2__icon:before,
.faq2__icon:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.85);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}
.faq2__icon:after{
  width: 2px;
  height: 18px;
}

.faq2__item.is-open .faq2__icon:after{
  opacity:0; /* превращаем плюс в крест/минус как на скрине */
}

.faq2__a{
  max-height: 0;
  overflow:hidden;
  transition: max-height .35s ease; /* плавное “вниз” */
}
.faq2__aInner{
  padding: 0 22px 18px 22px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.65;
}

/* Мягкий hover */
.faq2__item:hover{
  box-shadow: 0 18px 48px rgba(0,0,0,.14);
}

/* Мобилка */
@media (max-width: 980px){
  .faq2__wrap{ grid-template-columns: 1fr; }
  .faq2__wave{ display:none; }
  .faq2__title{ font-size: 34px; letter-spacing: 5px; }
}

/* ===== SUCCESS MODAL ===== */
.modal-success {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal-success.show {
  display: block;
}

.modal-success__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 40, 0.55);
  backdrop-filter: blur(4px);
}

.modal-success__box {
  position: relative;
  max-width: 420px;
  margin: 15vh auto;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modalFade .35s ease;
}

@keyframes modalFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-success__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-success h3 {
  margin: 0 0 8px;
  font-size: 22px;
}

.modal-success p {
  margin: 0 0 22px;
  color: #5c6b7a;
  font-size: 14px;
  line-height: 1.6;
}

.modal-success__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: #9aa4b2;
}

/* ===== ADVANTAGES NEW BLOCK ===== */
.advantages-new {
  background: #fff;
}

.advantages-new__inner {
  display: grid;
  grid-template-columns: 1.2fr 1px 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* LEFT */
.advantages-new__title {
  margin: 0 0 24px;
  font-size: 46px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--blue);
  text-transform: uppercase;
}

.advantages-new__title span {
  color: #b9b9b9;
  font-weight: 300;
}

.advantages-new__desc {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.7;
  color: #48607a;
}

/* DIVIDER */
.advantages-new__divider {
  width: 1px;
  height: 100%;
  background: rgba(60,111,166,.35);
}

/* RIGHT */
.advantages-new__right {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.adv-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.adv-num {
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #2a3a4d;
}

/* MOBILE */
@media (max-width: 900px) {
  .advantages-new__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .advantages-new__divider {
    display: none;
  }

  .advantages-new__title {
    font-size: 34px;
  }
}

/* ===== SERVICES PRO (как на скриншотах) ===== */
.services-pro{
  background:#fff;
  padding: 90px 0;
}

.services-pro__head{
  text-align:center;
  margin-bottom: 52px;
}

.services-pro__title{
  margin:0 0 16px;
  font-size: 44px;
  font-weight: 300;              /* тонкий заголовок как на скрине */
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#2a3a4d;
}

.services-pro__title .blue{ color: var(--blue); }

.services-pro__sub{
  margin:0 auto;
  max-width: 720px;
  color:#6b7a88;
  font-size: 14px;
  line-height: 1.8;
}

.services-pro__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  align-items: stretch;
}

/* Карточка */
.svc-card{
  position:relative;
  height: 500px;
  border-radius: 10px;
  overflow:hidden;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  transform: translateZ(0);
}

/* Синий “фильтр” как на скрине */
.svc-card__overlay{
  position:absolute;
  inset:0;
  background: rgba(52, 98, 150, .72);
}

/* Контент внутри */
.svc-card__content{
  position:absolute;
  inset:0;
  padding: 34px 28px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;  /* по умолчанию заголовок снизу */
  color:#fff;
}

.svc-card__content--bottom{
  justify-content:flex-end;
}

.svc-card__h{
  margin:0 0 14px;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: .2px;
}

.svc-card__line{
  width: 72%;
  height: 1px;
  background: rgba(255,255,255,.65);
  margin-bottom: 14px;
}

/* Блок, который выезжает */
.svc-card__more{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}

/* список */
.svc-card__more ul{
  margin: 0 0 18px;
  padding-left: 18px;
  list-style: disc;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  line-height: 1.7;
}
.svc-card__more li{ margin: 6px 0; }

/* ссылка “подробнее” */
.svc-card__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing:.2px;
  text-transform: uppercase;
  text-decoration:none !important;
}

/* Поведение: только при hover раскрываем */
.svc-card:hover .svc-card__more{
  max-height: 340px;      /* достаточно, чтобы поместился список */
  opacity: 1;
  transform: translateY(0);
}

/* Небольшой “живой” эффект при hover */
.svc-card:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}

/* На первом скрине видно: в обычном состоянии у крайних карточек текста нет (кроме заголовка).
   У нас так и будет — список скрыт до hover. */

/* Адаптив */
@media (max-width: 980px){
  .services-pro__grid{ grid-template-columns: 1fr; gap: 22px; }
  .svc-card{ height: 460px; }
  .services-pro__title{ font-size: 34px; }
}

/* === ABOUT NEW (как на скриншоте) === */
.about-new__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.about-new__photo img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
  object-fit: cover;
}

.about-new__title {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: #2a3a4d;
}

.about-new__subtitle {
  font-size: 16px;
  color: var(--muted);
  max-width: 520px;
  margin-bottom: 18px;
}

.about-new__line {
  width: 120px;
  height: 3px;
  background: var(--blue);
  margin: 18px 0 26px;
}

.about-new__content p {
  font-size: 15px;
  line-height: 1.7;
  color: #2e3f52;
  margin-bottom: 16px;
}

.about-new__sign {
  font-style: italic;
  color: var(--muted);
  margin-top: 20px;
}

.about-new__btn {
  margin-top: 26px;
  padding: 14px 34px;
}

/* адаптив */
@media (max-width: 980px) {
  .about-new__inner {
    grid-template-columns: 1fr;
  }

  .about-new__title {
    font-size: 30px;
  }
}

/* ===== CONSULT (Оставьте заявку...) ===== */
.consult{
  background:#f6f8fb;
  padding: 90px 0;
  overflow: hidden; /* чтобы "прилипание" и наложения выглядели аккуратно */
}

.consult__grid{
  width:min(var(--container), calc(100% - 40px));
  margin:0 auto;

  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 40px;
  align-items: center;
}

/* левая часть */
.consult-main__kicker{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(30,42,58,.55);
  margin-bottom: 10px;
}

.consult-main__title{
  margin: 0 0 18px;
  font-size: 46px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--blue);
}

.consult-main__list-title{
  font-weight: 800;
  margin: 18px 0 10px;
  color:#2a3a4d;
}

.consult-main__list{
  margin: 0 0 18px;
  padding-left: 18px;
  color:#2a3a4d;
  line-height: 1.7;
}

.consult-main__form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 12px;
}

.consult-main__form input{
  height: 54px;
  border-radius: 8px;
}

.consult-main__submit{
  grid-column: 1 / -1;
  height: 56px;
  border-radius: 8px;
}

.consult-main__note{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(30,42,58,.55);
  max-width: 560px;
}

/* ===== CONSULT VISUAL (правая часть) ===== */
.consult-visual{
  position: relative;
  height: 520px;

  /* прижимаем синюю панель к правому краю ЭКРАНА */
  margin-right: calc(50% - 50vw);

  /* важно: чтобы абсолютные элементы не "выталкивали" верстку */
  overflow: visible;
}

/* синяя панель справа */
.consult-visual__panel{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 520px;
  background: var(--blue);

  border-radius: 22px 0 0 22px;
  overflow: hidden;

  z-index: 3; /* панель ВЫШЕ руки (чтобы рука "заходила под контур") */
}

/* точки на панели */
.consult-visual__panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  opacity: .7;
}

/* вертикальный текст */
.consult-visual__panelText{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);

  color: #fff;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 28px;
  white-space: nowrap;

  z-index: 4;
  pointer-events: none;
}

/* ВАЖНО: тут правильный класс (с дефисами), как в index.php */
.consult-visual__phone{
  position: absolute;

  /* двигаем руку так, чтобы она "подлезала" под левый край панели */
  right: 290px;   /* уменьшайте до 260/240 если надо ближе */
  bottom: -8px;

  width: 640px;   /* размер руки */
  height: auto;

  z-index: 2;     /* рука НИЖЕ панели */
  pointer-events: none;

  filter: drop-shadow(0 16px 36px rgba(0,0,0,.12));
}

/* адаптив */
@media (max-width: 980px){
  .consult{
    padding: 70px 0;
  }

  .consult__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .consult-main__title{
    font-size: 34px;
  }

  .consult-main__form{
    grid-template-columns: 1fr;
  }

  .consult-visual{
    height: 420px;
    margin-right: 0; /* на мобиле не "выталкиваем" за край экрана */
  }

  .consult-visual__panel{
    width: 320px;
  }

  .consult-visual__phone{
    right: 120px;
    width: 460px;
  }
}

/* ===== STEPS (ЭТАПЫ РАБОТ С НАМИ) ===== */
.steps-section{
  padding: 70px 0 70px;
  background: #f6f8fb;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.steps-title{
  text-align: center;
  letter-spacing: .08em;
  margin: 0 0 55px;
}

.steps-row{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 34px;
  flex-wrap: nowrap;
}

.step-card{
  width: 250px;
  text-align: center;
}

.step-icon{
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.step-icon img{
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
}

.step-name{
  font-weight: 600;
  font-size: 18px;
  color: #2f66a7;
  margin-bottom: 10px;
}

.step-text{
  font-size: 14px;
  line-height: 1.6;
  color: #222;
}

.step-arrow{
  font-size: 28px;
  line-height: 1;
  color: #2f66a7;
  margin-top: 18px; /* чтобы стрелка была на уровне иконок как на скрине */
  user-select: none;
}

.steps-btn-wrap{
  display: flex;
  justify-content: center;
  margin-top: 55px;
}

.steps__btn {
  text-align: center;
  margin-top: 60px;
}

/* Адаптив */
@media (max-width: 1100px){
  .steps-row{ flex-wrap: wrap; gap: 26px; }
  .step-arrow{ display: none; } /* на мобиле/планшете убираем стрелки */
  .step-card{ width: 300px; }
}

@media (max-width: 560px){
  .steps-section{ padding: 70px 0 60px; }
  .step-card{ width: 100%; max-width: 360px; }
}


/* если у тебя уже есть .btn/.btn--primary — оставь свои.
   Если нет — вот минимально, чтобы было как на скрине */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 56px;
  border-radius: 6px;
  text-decoration:none;
  font-weight: 700;
  letter-spacing: .02em;
}

.btn--primary{
  background:#3E6FA3;
  color:#fff;
}

.btn--primary:hover{
  filter: brightness(.96);
}

.btn-main {
  display: inline-block;
  background: #3f6fa7;
  color: #fff;
  padding: 16px 40px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 6px;
  transition: background 0.3s ease;
}

.btn-main:hover {
  background: #345f8f;
}

/* Адаптив */
@media (max-width: 1100px){
  .steps__row{
    flex-wrap: wrap;
    gap: 18px 22px;
  }
  .steps__arrow{
    display:none;
  }
  .steps__item{
    width: min(320px, 100%);
  }
}

/* ===== КОНТАКТЫ ===== */
.contacts-section {
  padding: 60px 0;            /* расстояние от соседних блоков */
  background: transparent;    /* ВАЖНО */
}

.contacts-inner {
  background: #ffffff;
  padding: 60px 60px;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.contacts-wrap {
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.contacts-info {
  flex: 1;
}

.contacts-title {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 35px;
  text-transform: uppercase;
  color: #1f2c3b;
}

.contacts-title span {
  color: var(--blue);
}

.contacts-item {
  font-size: 18px;
  margin-bottom: 12px;
  color: #1f2c3b;
}

.contacts-item.phone {
  font-weight: 600;
}

.contacts-item.email {
  color: var(--blue);
}

.contacts-address {
  margin: 25px 0;
  padding-left: 18px;
}

.contacts-address li {
  font-size: 16px;
  line-height: 1.6;
  color: #1f2c3b;
}

.contacts-note {
  margin-top: 30px;
  font-size: 14px;
  color: #8a8a8a;
  font-style: italic;
}

.contacts-map {
  flex: 1;
}

.contacts-map iframe {
  width: 100%;
  height: 360px;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Адаптив */
@media (max-width: 992px) {
  .contacts-wrap {
    flex-direction: column;
  }

  .contacts-map iframe {
    height: 300px;
  }
}

/* ===== ЕСТЬ ВОПРОСЫ 24/7 ===== */
.ask-section {
  padding: 70px 0;          /* воздух от контактов */
  background: transparent;  /* ВАЖНО */
}

.ask-inner {
  background: url('../img/ask-bg.jpg') center/cover no-repeat;
  padding: 90px 0;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}

/* фон-картинка */
.ask24__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(10%);
}

.ask24{
  position: relative;   /* КЛЮЧЕВОЕ */
  overflow: hidden;
  padding-top: 120px;    /* УВЕЛИЧИВАЕТ фон СВЕРХУ */
  padding-bottom: 120px; /* УВЕЛИЧИВАЕТ фон СНИЗУ */
}


/* синий оверлей */
.ask24::before{
  content:"";
  position: absolute;
  inset: 0;
  background: rgba(54, 100, 150, .72);
  z-index: 1;
}

/* контент поверх */
.ask24__wrap{
  position: relative;        /* важно для absolute у вопроса */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;    /* контент по центру */
  min-height: 520px;
}
/* контент строго по центру контейнера */
.ask24__content{
  width: min(560px, 100%);
  margin: 0 auto;            /* фикс центровки */
  text-align: center;
  color: #fff;
}

.ask24__title{
  margin: 0 0 10px;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}

.ask24__subtitle{
  font-size: 14px;
  opacity: .95;
  margin-bottom: 28px;
}

.ask24__form{
  display:flex;
  flex-direction:column;
  gap: 14px;
  align-items:center;
}

.ask24__input,
.ask24__textarea{
  width: 100%;
  background:#fff;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2px;
  padding: 14px 16px;
  font-size: 14px;
  outline: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.ask24__textarea{
  min-height: 110px;
  resize: vertical;
}

.ask24__btn{
  margin-top: 6px;
  background: var(--blue);
  color:#fff;
  border: 0;
  padding: 12px 34px;
  border-radius: 6px;
  font-weight: 600;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

.ask24__btn:hover{
  filter: brightness(1.05);
}

.ask24__note{
  margin-top: 6px;
  font-size: 11px;
  opacity: .9;
  line-height: 1.35;
  max-width: 520px;
}
/* знак вопроса уводим вправо, чтобы он не влиял на центр формы */
.ask24__mark{
  position: absolute;
  right: 60px;               /* отступ от правого края секции */
  top: 50%;
  transform: translateY(-50%);
  font-size: 220px;          /* подгони под макет */
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,.25);
  text-shadow: 0 25px 60px rgba(0,0,0,.25);
  pointer-events: none;
  user-select: none;
}

/* адаптив */
@media (max-width: 992px){
  .ask24__wrap{
    min-height: auto;
    padding: 70px 0;
  }
  .ask24__mark{
    position: static;        /* возвращаем в поток */
    transform: rotate(-10deg);
    margin-top: 22px;
    font-size: 180px;
  }

  .ask24{
    padding: 70px 0;
  }
}

/* ===== НАШИ ПАРТНЁРЫ ===== */
.partners{
  padding: 80px 0;
  background: #fff;
}

.partners__title{
  text-align: center;
  font-size: 28px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 60px;
  color: #1f2c3b;
}

.partners__grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
}

.partner{
  text-align: center;
}

.partner__logo{
  max-width: 240px;
  max-height: 120px;
  margin-bottom: 20px;
  object-fit: contain;
}

.partner__text{
  font-size: 14px;
  line-height: 1.6;
  color: #2f3e4f;
}

.partners__divider{
  width: 2px;
  height: 140px;
  background: var(--blue);
}

/* Адаптив */
@media (max-width: 900px){
  .partners__grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .partners__divider{
    width: 60px;
    height: 2px;
    margin: 0 auto;
  }
}

/* ===== CONSULT VISUAL (правая часть) — финал ===== */
.consult-visual{
  position: relative;
  height: 620px;
  margin-right: calc(50% - 50vw);
  overflow: visible;
}

/* Синий блок — ДОЛЖЕН БЫТЬ ПОВЕРХ руки */
.consult-visual__panel{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 610px;
  background: var(--blue);
  border-radius: 22px 0 0 22px;
  overflow: hidden;

  z-index: 10;          /* ключевое: панель выше */
}

.consult-visual__panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
  opacity: .7;
}

.consult-visual__panelText{
  position: absolute;
  left: -40px;                 /* ← ВОТ ЗДЕСЬ СДВИГ К ЛЕВОМУ КРАЮ */
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);

  color: #fff;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 28px;
  white-space: nowrap;

  z-index: 11;
  pointer-events: none;
}

/* Рука/телефон — НИЖЕ синего блока, и контролируем размер */
.consult-visual__phone{
  position: absolute;
  right: 600px;         /* подгон ближе/дальше к синему блоку */
  bottom: -1px;
  transform: translateY(-40px);

  width: 370px;         /* размер руки (меняй здесь) */
  height: auto;
  max-width: none;

  z-index: 5;           /* ключевое: ниже панели */
  pointer-events: none;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.12));
}

/* ===== Отступ между hero и блоком "Защита прав" ===== */

.advantages {
  padding-top: 80px;   /* отступ сверху */
  margin-top: 40px;    /* визуальный разрыв */
}

.contacts {
  padding-top: 50px;   /* отступ сверху */
  padding-bottom: 50px;
  margin-top: 40px;    /* визуальный разрыв */
}

/* ====== ASK (форма обратной связи) — современный стиль полей ====== */

/* общий стиль для инпутов/textarea */
.ask24_form input[type="text"],
.ask24_form input[type="tel"],
.ask24_form input[type="email"],
.ask24_form textarea,
.ask24_form .ask24_input,
.ask24_form .ask24_textarea {
  width: 100%;
  box-sizing: border-box;

  height: 54px;
  padding: 0 18px;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;

  font-size: 15px;
  line-height: 1.2;
  color: #0f2233;

  outline: none;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;

  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease;
}

/* textarea отдельно */
.ask24_form textarea,
.ask24_form .ask24_textarea {
  height: 140px;
  padding: 16px 18px;
  resize: vertical;
}

/* placeholder */
.ask24_form input::placeholder,
.ask24_form textarea::placeholder {
  color: rgba(15, 34, 51, 0.55);
}

/* hover */
.ask24_form input:hover,
.ask24_form textarea:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

/* focus — “дорогая” подсветка */
.ask24_form input:focus,
.ask24_form textarea:focus {
  border-color: rgba(64, 139, 255, 0.75);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.20),
    0 0 0 4px rgba(64, 139, 255, 0.18);
}

/* убираем синюю рамку/обводку у некоторых браузеров */
.ask24_form input:focus-visible,
.ask24_form textarea:focus-visible {
  outline: none;
}

/* чтобы автозаполнение хрома не делало жёлтый фон */
.ask24_form input:-webkit-autofill,
.ask24_form textarea:-webkit-autofill {
  -webkit-text-fill-color: #0f2233;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.96) inset, 0 10px 26px rgba(0,0,0,0.16);
  transition: background-color 5000s ease-in-out 0s;
}

/* если у тебя есть контейнер вокруг формы — можно сделать красиво “карточкой” */
.ask24_form {
  max-width: 640px;
  margin: 0 auto;
}

/* расстояние между полями, если нужно */
.ask24_form input,
.ask24_form textarea {
  margin-bottom: 14px;
}