:root {
    --main-text-color: #4F3B44;
    --orange-text-color: #DFAB47;
    --montserrat-alternates: 'Montserrat Alternates', sans-serif;
    --play : 'Play', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
}
  
a {
    color: #000;
    text-decoration: none;
}

*:focus {
    outline: none;
}

.container {
    max-width: 1200px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (max-width: 1200px) {
    .container {
        max-width: 1200px;
        width: 100%;
    }
}
@media (max-width: 992px) {
    .container {
        max-width: 970px;
    }
}
@media (max-width: 768px) {
    .container {
        max-width: 750px;
    }
}
@media (max-width: 480px) {
    .container {
        max-width: 100%;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--main-text-color);
    background: url('../img/bg-one.png') no-repeat,
                url('../img/bg-two.png') right 600px no-repeat,
                url('../img/bg-three.png') left 1000px / 1000px no-repeat,
                url('../img/bg-four.png') right 1850px no-repeat,
                url('../img/bg-five.png') left bottom no-repeat
    ;
    margin: 0 auto;
    overflow-x: hidden;
    max-width: 1920px;
}
html {
  scroll-behavior: smooth;
}
body,
textarea {
    font-family: var(--montserrat-alternates);
}
/* Глобальная защита от горизонтального скролла */
html, body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}
@media (max-width: 400px) {
    /* 1. Глобальная защита страницы от горизонтального скролла */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 2. Делаем контейнеры гибкими, чтобы они не выпирали */
    .container, 
    .header__row.container, 
    .sub-header.container {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. Чиним блок с часами и иконками под шапкой */
    .sub-header.container {
        flex-wrap: wrap; /* Разрешаем перенос на новую строку */
        gap: 10px;
        justify-content: space-between;
    }

    /* Чуть уменьшаем шрифт времени работы, чтобы сэкономить место */
    .sub-header__working-hours p {
        font-size: 12px;
        line-height: 1.4;
    }

    /* 4. Защита для главного заголовка H1 (если слово слишком длинное) */
    h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}
.header {
    background: linear-gradient(158.99deg, rgba(79, 59, 68, 0.5) 19.62%, rgba(79, 59, 68, 0) 91.9%), rgba(79, 59, 68, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.5px);
    height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.header__top {
    background: #2b120e;
    width: 100%;
}
.container__top {
    display: flex;
    justify-content: space-between;
}
.header__social {
  display: flex;           /* ссылки стоят в ряд */
  gap: 15px;               /* расстояние между ними */
}

.header__social-item {
  display: flex;           /* внутри каждой ссылки — иконка и текст */
  align-items: center;     /* выравнивание по вертикали */
  gap: 8px;                /* отступ между иконкой и текстом */
  text-decoration: none;   /* убираем подчёркивание */
  color: inherit;          /* цвет текста как у родителя */
}

.header__social img {
    width: 25px;
}
.header__social span{
    color: #f0e8e878;
    font-size: 13px;
    transition: color 0.3s ease;
}
.header__social span:hover{
    color: #dfab47;
}
.header__row {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.header__button {
    width: 158px;
    height: 25px;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    border: solid #ffffff80 1px;
}
.header__button a {
    color: #fbf6f6b0;
    font-size: 13px;
    padding: 0 5px;
}
.header__button a:hover {
    color: #c7a05b;
}
.header__nav {
    display: flex;
}

.header__nav ul {
    display: flex;
}

.header__nav li {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.header__nav a {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
    user-select: none;
}

.header__nav a:hover {
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.header__phone-num {
    color: #fff;
    margin-right: 15px;
}

.header__phone {
    display: flex;
    align-items: center;
    min-width: 222px;
}

.header__phone-icon {
    width: 60px;
    height: 50px;
    background: url('../img/icon-phone.svg') no-repeat center / 20px,linear-gradient(180deg, rgba(223, 171, 71, 0.4) 0%, rgba(223, 171, 71, 0.048) 100%), rgba(223, 171, 71, 0.6);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.header__phone-icon:hover {
	background: url('../img/icon-phone.svg') no-repeat center / 20px, #2b120e;

}
.menu-toggle {
    display: none;
}

.sub-header {
    display: flex;
    justify-content: right;
    margin-top: 29px;
}

.sub-header__search {
    position: relative;
    margin-right: 111px;
}

.sub-header__search input {
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    width: 370px;
    height: 60px;
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 0 20px;
}

.sub-header__search::after {
    content: '';
    background: url('../img/icon-search.svg') no-repeat;
    width: 28px;
    height: 28px;
    display: block;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    background-size: contain;
}

.btn-mobile-search,
.btn-mobile-phone {
    display: none;
}

.sub-header__working-hours {
    
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--main-text-color);
}

.sub-header__working-hours p:first-child {
    margin-bottom: 10px;
}

.section-first__row {
    display: flex;
    justify-content: center;
    margin-top: 71px;
}

.site-title {
    color: var(--orange-text-color);
    letter-spacing: 0.1em;
    font-weight: 700;
    line-height: 90px;
    font-size: 90px;
    text-align: center;
    font-family: var(--play);
    text-align: center;
}

.site-description {
    color: var(--main-text-color);
    
    font-weight: 500;
    font-size: 30px;
    line-height: 37px;
}

.site-sub-description {
    text-align: center;
    font-weight: 300;
    font-size: 28px;
    line-height: 34px;
    color: var(--main-text-color);
    margin-top: 63px;
}

.btn-popup-form, .btn-popup-chek, .btn-popup-zakaz {
    width: 350px;
    height: 70px;
    border-radius: 10px;
    background: var(--orange-text-color);
    opacity: 0.8;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    margin: 33px auto 0;
    color: #EAE8E5;
    font-weight: 400;
    font-size: 24px;
    line-height: 70px;
    text-align: center;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
}
.btn-popup-form:hover {
     background: #96898F;
}

/* обычная заявка */
.btn-request {
  background-color: #dfab47; /* золотой */
}
.btn-request:hover {
  background-color: #c28f32;
}

/* аудит бесплатно */
.btn-audit {
  background-color: #2b120e;
}
.btn-audit:hover {
  background-color: #2b120eb2;
}

/* эффекты затухания */
.btn-popup-form.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.btn-popup-form.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease;
}


.popup-director.active,
.popup-phone.active {
    top: 95px;
}
.popup__links {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;          /* Весь список тоже делаем флексом */
  flex-direction: column; /* Элементы строго друг под другом */
  align-items: center;    /* Центрируем элементы li по горизонтали */
}
.popup__links li {
  margin: 10px 0;
  width: 100%;            /* li занимает всю ширину для удобства выравнивания */
}
.popup__links a {
  font-weight: bold;
  color: #e8eef2;
  text-decoration: none;
  margin-left: 0;
}
.popup__links a:hover {
    color: #c59e5b;
    text-decoration: underline;
}
.contacts__links .form__socials {
    margin: 0;
}
.contacts__links .form__socials a{
    color: #353636;
}  
.contacts__links .form__socials a:hover{
    color: #6e5b04;
} 
/* Сама строка с иконкой и ссылкой */
.form__socials {
  display: flex !important;
  align-items: center;
  justify-content: flex-start; /* Внутри флекса прижимаем к началу */
  width: fit-content;          /* Контейнер схлопывается по контенту */
  margin: 0 auto;             /* И этот контейнер центрируем в li */
}
/* Выравниваем иконки, чтобы текст шел ровно */
.form__socials img {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  display: block;
  flex-shrink: 0;
}
.popup__links a {
  font-weight: bold;
  color: #e8eef2;
  text-decoration: none;
  margin-left: 0 !important; /* Убираем старый отступ, если он мешает */
  text-align: left;
  min-width: 80px;           /* Опционально: выравнивает текст по левому краю */
}
.popup__close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
}

section {
    margin-top: 100px;
}

.section-first__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section-first__item img {
    padding-right: 30px;
}

.section-title,
h1 {
    color: var(--main-text-color);
    font-family: var(--play);
    font-style: normal;
    font-weight: 400;
    font-size: 50px;
    line-height: 58px;
    text-align: center;
}
.section-title,
h2 {
    color: var(--main-text-color);
    font-family: var(--play);
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 58px;
    text-align: center;
}
.section-services__row {
    margin-top: 62px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 70px;
}

.section-services__bg {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 34px;
    color: #FFFFFF;
}

.section-services__bg::before,
.section-working__item::before,
.section-cases__row::before,
.section-form__block::before,
.popup__form::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    border-top: 1px solid #4F3B44;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4F3B44), to(transparent));
    background-image: -webkit-linear-gradient(#4F3B44, transparent);
    background-image:
        -moz-linear-gradient(#4F3B44, transparent),
        -moz-linear-gradient(#4F3B44, transparent);
    background-image:
        -o-linear-gradient(#4F3B44, transparent),
        -o-linear-gradient(#4F3B44, transparent);
    background-image: 
        linear-gradient(#4F3B44, transparent),
        linear-gradient(#4F3B44, transparent);
    -moz-background-size: 1px 100%;
    background-size: 1px 100%;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat; 
    z-index: -1;
}

.section-services__title {
    height: 80px;
    padding-right: 30px;
    padding-left: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.section-services__title::after {
    content: '';
    display: block;
    background: url('../img/arrow-right.svg') no-repeat;
    width: 10px;
    height: 20px;
    width: 10px;
    height: 20px;
    position: absolute;
    right: 11px;
    transition: all .1s ease-in;
}

.section-services__item.active .section-services__title::after {
    transform: rotate(90deg);
    right: 20px;
}

.section-services__item.active .section-services__bg {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(162, 103, 79, 0.7);
}

.section-services__item:not(.active) .section-services__bg:hover{
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(162, 103, 79, 0.7);
    transition: all 0.3s;
}

.section-services__sub-title {
    display: flex;
    justify-content: flex-end;
}

.section-services__sub-title span {
    display: block;
    color: #FFDFC8;
    font-weight: 300;
    font-size: 18px;
    line-height: 22px;
    width: 270px;
    text-align: right;
}

.section-services__drop-down {
    display: none;
    padding-left: 11px;
    padding-right: 20px;
    padding-bottom: 31px;
}

.section-services__item.active .section-services__drop-down {
    display: block;
}

.section-services__list {
    margin-top: 19px;
}

.section-services__list li{
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    color: #FFFCFC;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}
.section-services__list li a:hover {
    color: #DCA851;
}
.section-services__list li::before {
    content: '';
    width: 10px;
    min-width: 10px;
    height: 10px;
    background: #DFAB47;
    border-radius: 50%;
    margin-right: 17px;
}

.section-working__row {
    display: grid;
    gap: 30px;
    margin-top: 52px;
}

.section-working__item {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    line-height: 29px;
    color: var(--main-text-color);
    padding: 15px 22px;
    position: relative;
    margin: 0 30px;
    
}
.section-working__item-week {
    background: linear-gradient(5.4deg, rgba(79, 59, 68, 0.4) 4.32%, rgba(79, 59, 68, 0.04) 96.5%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 5px;
    width: 100%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.section-working__item span {
    font-weight: 600;
}

.tab__main-etap {
    margin-top: 70px;
    margin-left: 30px;
    display: flex;
    justify-content: center;
    gap: 50px;
}
.tab-pane { 
    display: none; 
}
.tab-pane.active { 
    display: block; 
}

@media (max-width: 768px)  {
    .tab__main-etap {
        flex-direction: column;
    }
}

/* Block STOCKS Main  */

.stocks__main-text h3 {
    padding-bottom: 20px;
    padding-top: 30px;    
}
.stocks__main-text p {
    padding-bottom: 10px;
    line-height: 24px;    
}
.stocks__main-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 50px;
}

.stocks__main-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 50px;
}

/* Контейнер для картинки + overlay заголовка */
.stocks__main-item-media {
  position: relative;       /* важно — от этого зависит относительная позиция h3 */
  flex: 0 0 500px;
  max-width: 500px;
  height: 300px;
  overflow: hidden;
  border-radius: 6px;
  background: #2B120E;
  display: block;
}

/* Изображение занимает весь контейнер */
.stocks__main-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px; /* если нужно, чтобы картинка скругляла углы */
}

/* Заголовок поверх картинки, центр по обеим осям */
.stocks__main-item-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff; /* белый — чтобы было видно на тёмной картинке */
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  padding: 18px 12px;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  z-index: 2;
  width: 100%;
  min-height: 70px;
}

/* Контент справа от картинки */
.stocks__main-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Текст карточки */
.stocks__main-item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 800px;
}
.stocks__main-item-text { margin: 0; font-size: 16px; line-height: 1.5; color: #333; white-space: pre-wrap; }
.stocks__main-item-date { font-size: 14px; color: #777; margin-top: 6px; }

/* Адаптив */
@media (max-width: 768px) {
  .stocks__main-item { flex-direction: column; align-items: stretch; }
  .stocks__main-item-media { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .stocks__main-item-media img { height: 100%; }
  .stocks__main-item-content { padding: 12px 0 0; }
}









/* END Block STOCKS Main  */







/* Block Tag Main  */

.tag__main {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.tag__main.collapsed {
    max-height: 40px; 
}

/* кнопка */
.tag__main__more-btn,
.clients__show-more,
.other-services-toggle,
.stocks__main__more-btn {
    display: block;
    margin: 45px auto -60px; 
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
    transition: background 0.3s ease;
    text-transform: uppercase;
}
.tag__main__more-btn:hover,
.clients__show-more:hover,
.other-services-toggle:hover,
.stocks__main__more-btn:hover {
    background: #E5BB6B;
}





/* End Block Tag Main  */

/* Block Problems*/

.problems-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.problems-table th,
.problems-table td {
  border: 1px solid #ddd;
  padding: 12px 16px;
  vertical-align: top;
}

.problems-table th {
  background: #f5f5f5;
  font-weight: 600;
  text-align: left;
}

.problems-table tr:nth-child(even) {
  background-color: #fafafa;
}

/* End Block Problems*/


/* Block About Main*/

.about__main-text--text p {
    margin-top: 20px;
    line-height: 25px;
}
.about__main-socials {
    display: flex;
    justify-content: space-between;
    max-width: 700px;
    margin: 30px auto;
}
.about__main-socials img {
    width: 37px;
}

/* End Block About Main*/

/* Block Team Main  */

.section-comanda {
    
} 
.main__comanda {
    margin-top: 70px;
    
}
.main__comanda-items {
    
}
.main__comanda-item {
    
}
.main__comanda-item-img img {
    
}
.main__comanda-item-img,
.main__comanda-item-img img {
    max-width: 360px;
    margin: 0 auto;
}
.main__comanda-item-name {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}
.main__comanda-item-post {
    font-size: 18px;
    text-align: center;
    margin-top: 5px;
    font-weight: 600;
}
.main__comanda-item-specialization,
.main__comanda-item-experience {
    margin: 10px auto;
    text-align: center;
    font-size: 17px;
    color: #0000007d;
    max-width: 360px;
}
.main__comanda-item-specialization span,
.main__comanda-item-experience span {
    color: var(--main-text-color);
    font-size: 16px;
}
/* Стрелки Slick Slider */

 
.main__comanda-items .slick-prev,
.main__comanda-items .slick-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;           
    background: #DCA851;    
    position: absolute;
    top: 34%;                     
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: white;                
    font-size: 20px;
    z-index: 10;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.main__comanda-items .slick-prev:hover,
.main__comanda-items .slick-next:hover {
    background: #2b120e;
}
.main__comanda-items .slick-prev { left: -8px; }      
.main__comanda-items .slick-next { right: -8px; }     

/* Убираем стандартные стрелки Slick */
.main__comanda-items .slick-prev:before,
.main__comanda-items .slick-next:before {
    content: '';
}

/* Точки под слайдером */
/* Контейнер с точками */
.main__comanda-items .slick-dots {
    position: absolute;
    bottom: -45px; /* можно подвинуть ниже/выше */
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px; /* расстояние между точками */
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto;
}

/* Элементы списка */
.main__comanda-items .slick-dots li {
    display: inline-block;
}

/* Кнопки внутри точек */
.main__comanda-items .slick-dots li button {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    width: 18px;
    height: 18px;
    position: relative;
}

/* Визуальные точки */
.main__comanda-items .slick-dots li button::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #DCA851 !important; /* неактивная */
    opacity: 1;
    transition: all 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Активная */
.main__comanda-items .slick-dots li.slick-active button::before {
    background: #8B5E3C !important;
    transform: translate(-50%, -50%) scale(1.2);
}

/* По умолчанию (на больших экранах) — показываем стрелки, скрываем точки */
.main__comanda-items .slick-dots {
    display: none !important;
}

.main__comanda-items .slick-arrow {
    display: flex !important;
}

/* На экранах до 1200px — наоборот */
@media (max-width: 1200px) {
    .main__comanda-items .slick-dots {
        display: flex !important;
    }

    .main__comanda-items .slick-arrow {
        display: none !important;
    }
}


/* End Team Main  */


/* Sertificates Main  */

.section-certificates__row {
    margin-top: 33px;
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    position: relative;
}

.section-certificates__item {
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
}

.section-certificates__img {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%), rgba(162, 103, 79, 0.75);
    padding: 20px 22px;
    border-radius: 10px;
    margin: 0 15px;
    /* max-width: 305px; */
}

.section-certificates__img img {
    width: 100%;
    border-radius: 10px;
    height: auto;
}

.section-certificates .slick-arrow {
    position: absolute;
    border: none;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    font-size: 0;
    border-radius: 10px;
    width: 50px;
    height: 58px;
    cursor: pointer;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s;
}

.section-certificates .slick-prev {
    left: -60px;
    background: url('../img/arrow-left-slider.svg') no-repeat center, linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
}

.section-certificates .slick-next {
    right: -60px;
    background: url('../img/arrow-rigth-slider.svg') no-repeat center, linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
}

.section-certificates .slick-prev:hover {
    user-select: none;
    background: url('../img/arrow-left-slider.svg') no-repeat center, linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%), rgba(162, 103, 79, 0.75);
}

.section-certificates .slick-next:hover {
    user-select: none;
    background: url('../img/arrow-rigth-slider.svg') no-repeat center, linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%), rgba(162, 103, 79, 0.75);
}

/* End Sertificates Main  */


/* Cases Main  */
.section-cases__slider {
    margin-top: 32px;
    border-radius: 10px;
}

.section-cases__row {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%);
    box-shadow: 0px 19.8734px 79.4937px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.46519px);
    padding: 20px 32px;
    border-radius: 10px;
}

.section-cases__img {
    margin-top: 31px;
}

.section-cases__img img {
    width: 100%;
    border-radius: 15px;
    filter: drop-shadow(0px 20px 80px rgba(0, 0, 0, 0.15));
    backdrop-filter: blur(30px);
}

.section-cases__item-title {
    font-weight: 400;
    font-size: 28px;
    line-height: 34px;
    text-align: center;
    color: var(--main-text-color);
    text-align: center;
}

.section-cases__age,
.section-cases__task {
    margin-top: 33px;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    color: #A2674F;
}

.section-cases__age span,
.section-cases__task span {
    margin-left: 13px;
    font-size: 28px;
    line-height: 34px;
    color: #714736;
}

.section-cases__task {
    margin-top: 17px;
}

.section-cases__btn-row {
    display: flex;
    justify-content: flex-end;
}

.section-cases__btn {
    margin-top: 43px;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    font-weight: 300;
    font-size: 28px;
    line-height: 64px;
    color: #FFFFFF;
    padding: 0 16px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s;
}

.section-cases__btn:hover{
    background: rgba(223, 171, 71, 0.88);
    box-shadow: 0px 20px 80px rgba(40, 11, 5, 0.12);
    backdrop-filter: blur(5.5px);
}

.section-cases__row::before,
.section-form__block::before,
.popup__form::before {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4F3B44), to(rgba(79, 59, 68, 0.1)));
    background-image: -webkit-linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1));
    background-image:
        -moz-linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1)),
        -moz-linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1));
    background-image:
        -o-linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1)),
        -o-linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1));
    background-image: 
        linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1)),
        linear-gradient(#4F3B44, rgba(79, 59, 68, 0.1));
        border-bottom: 1px solid rgba(79, 59, 68, 0.1);
        height: calc(100% - 2px);
}

.section-cases .slick-list {
    border-radius: 10px;
}

.section-cases .slick-dots {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.section-cases .slick-dots li {
    background: rgba(143, 125, 133, 0.6);
    border-radius: 4px;
    height: 20px;
    width: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.section-cases .slick-dots li:hover,
.section-cases .slick-dots li.slick-active {
    background: #8D787A;
}

.section-cases .slick-dots button {
    display: none;
}

/* End Cases Main  */

/* Form Main  */
.section-form__block {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(162, 103, 79, 0.6);
    box-shadow: 0px 19.8734px 79.4937px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.46519px);
    border-radius: 10px;
    padding: 28px 26px 37px;
    margin-top: 42px;
}

.section-form__title {
    max-width: 882px;
    font-weight: 300;
    font-size: 30px;
    line-height: 37px;
    text-align: center;
    color: var(--main-text-color);
    margin: auto;
}

.section-form__block form {
    margin-top: 22px;
}

.section-form__block legend {
    text-align: center;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: #fff;
}

.form-checkbox {
    display: grid;
    grid-template-columns: 1fr 300px 250px;
    margin-top: 44px;
    margin-bottom: 55px;
}

.form-checkbox label {
    width: 300px;
    height: 30px;
    white-space: nowrap;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.form-checkbox label input {
    margin-right: 8px;
}

.form-checkbox label:hover .checkmark,
.form-checkbox input:checked ~ .checkmark {
    color: #DFAB47;
}

.form-checkbox input:checked,
.privacy-policy input:checked {
    accent-color: #DFAB47;
    background-color: #DFAB47;
}

.form-personal {
    margin-top: 34px;
    /*display: grid;*/
    grid-template-columns: 1fr 1fr;
    gap: 40px 50px;
    max-width: 50%;
    margin: 0 auto;
    margin-top: 34px;
}
@media (max-width: 992px) {
    .form-personal {
        max-width: 100%;
    }
}
.form-personal label {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    user-select: none;
}

.form-personal input,
.form-personal select,
.form-personal textarea {
    height: 60px;
    background: rgba(255, 213, 199, 0.8);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    padding: 0 10px;
    color: #A2674F;
}

.form-personal input::placeholder,
.form-personal select::placeholder,
.form-personal textarea::placeholder { 
    color: #A2674F;
}

.form-personal label:last-child {
    grid-column: span 2;
}

.form-personal textarea {
    padding: 19px 10px;
    height: 100px;
}

.privacy-policy {
    max-width: 435px;
    margin: auto;
    display: flex;
    align-items: flex-start;
    margin-top: 13px;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
    cursor: pointer;
    user-select: none;
}

.privacy-policy input {
    margin-right: 6px;
    position: relative;
    top: 2px;
    cursor: pointer;
}

.section-form__block input[type="submit"] {
    background: #DFAB47;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    border: none;
    height: 60px;
    padding: 0 50px;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #FFFFFF;
    margin: auto;
    margin-top: 28px;
    display: block;
    cursor: pointer;
}

/* End Form Main  */


/* Clients Main  */

.cliets__main {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    max-height: 100px; /* высота одной строки (примерно) */
    transition: max-height 0.4s ease;
    margin-top: 50px;
}
.cliets__main.expanded {
    max-height: 1000px; /* увеличиваем для показа всех элементов */
}
.cliets__main-item {
    width: 225px;
}
.cliets__main-img img {
    height: 70px;
    width: 225px;
    border-radius: 10px;
    display: block;
    border: 1px solid #2B120E;
}
/* Кнопка */
/*.clients__show-more {
    margin: 20px auto 0;
    display: block;
    background: #2B120E;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}*/
/*.clients__show-more:hover {
    background: #4a201a;
}
*/
/* End Clients Main  */


/* Revievs Main  */

.main__revievs {
    margin-top: 50px;
}
.main__revievs .slick-slide {
    display: flex !important;
    height: 100%;
}
.main__revievs-item{
    display: flex;
    border: 1px solid #2B120E2E;
    width: 100%;
    height: 100%;
}
.main__revievs-item-left-block {
    width: 60%;
    box-sizing: border-box;
}
.main__revievs-item-right-block {
    width: 40%;
    text-align: center;
    margin-top: 20px;
}
.main__revievs-item-right-block-img {
    margin-bottom: 30px;
}
.main__revievs-item-right-block-img img {
    max-width: 250px;
    max-height: 70px;
    margin: 0 auto
}
.main__revievs-item-right-block-name span {
    font-size: 20px;
}
.main__revievs-item-right-block-post {
    margin-top: 10px;
}
.main__revievs-item-right-block-post span {
    font-size: 18px;
    font-weight: 600;
}
.main__revievs-item-left-block-title span {
    font-size: 20px;
    margin: 20px 0 20px 20px;
    display: block
}
.main__revievs-item-left-block-text span {
    font-size: 16px;
    margin: 20px 0 20px 20px;
    display: block;
    line-height: 25px;
}
.main__revievs .slick-prev, 
.main__revievs .slick-next {
    background: #2b120e;
    color: #fff;
    border: none;
    font-size: 25px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 45%;
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.main__revievs .slick-prev:hover, 
.main__revievs .slick-next:hover {
    background: #DCA851;
}
.main__revievs .slick-dots {
    display: none!important;
}



.popular-services-items .slick-prev,
.popular-services-items .slick-next {
    background: #2b120e;
    color: #fff;
    border: none;
    font-size: 25px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 10%;
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.popular-services-items .slick-prev:hover,
.popular-services-items .slick-next:hover {
    background: #DCA851;
}
.slick-prev { left: -50px; }
.slick-next { right: -50px; }

.slick-dots li button:before {
    color: #2b120e;
}
.main__revievs-item,
.main__revievs-item-left-block,
.main__revievs-item-right-block {
    transition: all 0.4s ease-in-out;
}

@media (min-width: 1200px) and (max-width: 1280px) {
    .slick-prev {
        left: -15px;
    }
    .slick-next {
        right: -15px;
    }
}

@media (max-width: 992px) {
    .main__revievs .slick-slide > div {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: all 0.4s ease-in-out;
    }

    .main__revievs-item {
        display: flex;
        flex-direction: column;
        border: 1px solid #2B120E2E;
        transition: all 0.4s ease-in-out;
    }

    .main__revievs-item-right-block {
        order: -1; /* сверху */
        width: 100%;
        margin-top: 0;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
        transition: all 0.4s ease-in-out;
    }

    .main__revievs-item-left-block {
        order: 1; /* снизу */
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        transition: all 0.4s ease-in-out;
    }

    .main__revievs-item-right-block-img img {
        max-width: 200px;
        height: auto;
        transition: all 0.4s ease-in-out;
    }
}

@media (max-width: 768px) {
    .slick-prev { left: -15px; }
    .slick-next { right: -15px; }

}



/* End Revievs Main  */


/* Acall Main  */

.section-acall {
    background: #2B120E;
    height: 200px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.section-title-acall a {
    color: #f2eae9;
    text-transform: uppercase;
    transition: color 0.3s ease;
    
}
.section-title-acall a:hover {
    color: #DCA851;
    
}
.recent__articles-main-items .slick-prev, 
.recent__articles-main-items .slick-next {
    background: #2b120e;
    color: #fff;
    border: none;
    font-size: 25px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 45%;
    z-index: 10;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.recent__articles-main-items .slick-prev:hover, 
.recent__articles-main-items .slick-next:hover {
    background: #DCA851;
}
/* End Acall Main  */


/* Article Main  */

.main__article div,
.main__article p {
   margin-bottom: 10px;
   line-height: 25px; 
}
.main__article ul {
   padding: 0 9px;
   font-size: 17px;
   line-height: 24px;
   margin-top: 30px;
   margin-bottom: 35px;
}
.main__article ul li::before {
   content: '';
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(223, 171, 71, 0.8);
   margin-right: 13px;
}
.main__article a {
    color: #CC8A53;
}
.main__article a:hover {
    color: #E60D0D;
    text-decoration: underline;
}
/* End Article Main  */

/* FAQ Main  */

.main__faq-btn a {
   text-transform: uppercase; 
   color: #fff;
   font-size: 18px;
}

/* End FAQ Main  */


/* Recentarticles Main  */

.recent__articles-main-items {
    margin-top: 50px;
    
}
.recent__articles-main-item {
    
    background: #2B120E;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    margin: 0 15px;
    
}
.recent__articles-main-items .slick-slide {
    height: 485px!important;
}
.recent__articles-main-item-img {
    position: relative;
    display: inline-block;
    margin: 15px auto;
    width: 100%;
    overflow: hidden;
    padding-right: 30px;
}

.recent__articles-main-item-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin-left: 15px;
    object-fit: cover;
}

.recent__articles-main-item-img span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 22px;
    text-align: center;
    width: 100%; /* чтобы текст не выходил за края */
    background: rgba(0, 0, 0, 0.5); /* затемнение для читаемости */
    padding: 8px 12px;
}
.recent__articles-main-item-time {
    background: rgb(225, 178, 88);
    width: 250px;
    border-radius: 10px;
    margin-left: 15px;
    height: 25px;
    padding-top: 4px;
    box-sizing: border-box
}
.recent__articles-main-item-data span,
.recent__articles-main-item-time span,
.recent__articles-main-item-text a {
    margin-left: 15px;
    margin-bottom: 10px;
    display: block;
} 
.recent__articles-main-item-data span {
    color: #ffffffa1;
}
.recent__articles-main-item-text {
    margin-bottom: 70px;
    margin-top: 20px;
}
.recent__articles-main-item-text a {
    color: #fff;
}
.recent__articles-main-item-time span:before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(../img/clock.svg) no-repeat center;
    background-size: 18px;
    margin-right: 10px;
}
.recent__articles-main-item-time span {
    color: #00000082;
    font-size: 13px;
    display: flex;
}



/* кастомные стрелки */
.custom-prev, .custom-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.custom-prev:hover, .custom-next:hover {
    background: #E1B258;
}
.custom-prev:hover svg,
.custom-next:hover svg {
    stroke: #2B120E;
}

.custom-prev {
    left: -15px;
}
.custom-next {
    right: -15px;
}

/* адаптив */
@media (max-width: 1024px) {
    .custom-prev { left: -40px; }
    .custom-next { right: -40px; }
}
@media (max-width: 768px) {
    .custom-prev, .custom-next {
        width: 38px;
        height: 38px;
    }
    .custom-prev { left: 4px; }
    .custom-next { right: 7px; }
}


/* End Recentarticles Main  */

/* Popular Services Main  */

.popular-services-items {
    display: flex!important;
    margin-top: 50px;
}
.popular-services-item {
    border: 1px solid #dfab47;
    border-radius: 25px;
    height: 50px!important;
    display: flex!important;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.popular-services-item a {
    cursor: pointer;
}
.popular-services-item:hover {
    background: #c98244;
}

/* End Popular Services Main  */


/* Other Services Main  */

.other-services-items {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    flex-wrap: wrap;
    max-height: 190px; 
    overflow: hidden;
    transition: max-height 0.4s ease;
    justify-content: center;
    display: flex;
}

.other-services-item {
    position: relative;
    display: inline-block;
    text-align: center;
}
.other-services-item:hover {
    background: #c98244;
    border-radius: 25px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.other-services-item img {
    display: block;
}
.other-services-item a {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    color: #0d0d0d;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 0 10px;
    cursor: pointer;
}
.other-services-item a:hover {
    color: #fff;
    transition: color 0.3s ease;
    
}
.other-services.open .other-services-items {
    max-height: 1000px;
}

/* BLOG  */
.blog__catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
}
.section__blog-title {
    margin-top: 70px;
}
.recent__articles-blog-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 50px;
    max-width: 1200px;
    width: 100%;
    margin: 50px auto;
}
.recent__articles-blog-items .recent__articles-main-item {
    max-width: 360px;
    width: 100%;
    margin-bottom: 30px;
}
.blog-sub-description {
    margin-top: 30px;
    line-height: 25px;
}
.blog-sub-description ul {
  padding: 0 9px;
  font-size: 17px;
  line-height: 24px;
  margin-top: 30px;
  margin-bottom: 35px;
}
.blog-sub-description ul li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(223, 171, 71, 0.8);
  margin-right: 13px;
}
.blog-description {
    margin-top: 50px;
} 
.section_image {
  width: 100vw;              
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;         
}

.section-image {
  width: 100%;
  height: 550px;              
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-image .detail_img {
  width: 100%;
  height: 100%;
  object-fit: cover;          
  object-position: center;   
  display: block;
}
.blog__content_text div,
.blog__content_text p,
.blog__content_text {
   line-height: 25px; 
}
.section-bonus {
   background: #2B120E;
   height: auto;
   align-items: center;
   display: flex;
   justify-content: center;
   flex-direction: column; 
   padding-top: 30px;
   padding-bottom: 30px;
}
.section__bonus-title {
   color: var(--main-text-color);
   font-family: var(--play);
   font-style: normal;
   font-weight: 400;
   font-size: 40px;
   line-height: 58px;
   text-align: center; 
}
.section__bonus-title span {
    color: #f2eae9;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.section__bonus-text p {
    color: #D69C4D;
    font-family: var(--play);
    font-size: 22px;
    line-height: 58px;
    text-align: center; 
    transition: color 0.3s ease;
}
.section__bonus-text strong {
    border: 1px solid #deb061;
    padding: 5px;
}
.btn-blog-form {
   max-width: 350px;
   width: 100%;
   height: 70px;
   border-radius: 10px;
   background: var(--orange-text-color);
   opacity: 0.8;
   box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
   backdrop-filter: blur(5.5px);
   margin: 33px auto 0;
   color: #EAE8E5;
   font-weight: 400;
   font-size: 24px;
   line-height: 70px;
   text-align: center;
   user-select: none;
   cursor: pointer;
   transition: background-color 0.5s ease, color 0.5s ease, opacity 0.5s ease;
}
.btn-blog-form:hover {
    background: #96898F;
}
.blog__category {
    margin-top: 100px;
}
.blog__category-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}
.blog__category-item {
    text-align: center;
    background: linear-gradient(94.78deg, rgba(79, 59, 68, 0.4) 4.13%, rgba(211, 191, 182, 0.4) 96.42%), rgba(143, 125, 133, 0.6);
    border: 1px solid #A2674F;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    padding: 30px 36px;
    cursor: pointer;
}
.blog__detail-info {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog__detail-info span {
    color: #000;
}
.blog__detail-share {
    padding-right: 30px;
}
.blog__detail-info-autor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.blog__detail-info-autor img {
    border-radius: 50%;
}
.blog__content_text {
    padding-left: 15px;
    padding-right: 15px;
}
.blog__category-item:hover {
    background: linear-gradient(94.78deg, rgba(162, 103, 79, 0.4) 4.13%, rgba(211, 191, 182, 0.4) 96.42%), rgba(223, 171, 71, 0.8);
}

@media (max-width: 500px) {
    .blog__detail-info {
      flex-direction: column;
      margin-top: 20px;
    }
    .blog__detail-share {
      margin-top: 20px;
    }
}

/* End BLOG  */


/* BLOCK SEO  */

.seo-list-utp {
    padding: 50px 15px 100px 15px;
}
.seo-list-utp-title,
.seo-list-utp-calltoaction-text,
.dev-btn-presentation {
    padding-bottom: 15px;
    font-size: 22px;
    line-height: 25px;
}
.seo-list-utp-text ul {
    padding: 0 9px;
    font-size: 17px;
    line-height: 24px;
    margin-top: 30px;
    margin-bottom: 35px;
}
.seo-list-utp-text ul li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(43, 18, 14);
    margin-right: 13px;
}
.seo-list-utp-calltoaction-btn {
    display: block;
    margin: 45px auto -60px;
    background: #e4bc7a;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.3s;
    transition: background 0.3s ease;
    text-transform: uppercase;
}
.seo-list-utp-calltoaction-btn:hover {
    background: #d0c9cb;
}
.seo_tr-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 40px;
    counter-reset: test;
    margin-top: 54px;
}
.seo_tr-content {
    display: flex;
    background: linear-gradient(360deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%);
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
    gap: 10px;
}
.seo_tr-content-item {
    display: flex;
    flex-direction: column;
}
.seo_tr-content-title {
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    margin-top: 3px;
}
.seo_tr-content-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 18px;
    margin-top: 12px;
    margin-right: 15px;
}
.seo_tr-content-img {
    align-items: center;
    display: flex;
}
.seo_tr-icon {
    width: 100px;
    height: 100px;
}
.section--seo-advantages { position: relative; }
.seo-adv__title { margin: 0 0 20px; font-weight: 700; font-size: 28px; }

.seo-adv__slider { 
    margin: 0 -10px; 
    margin-top: 50px;
}
.seo-adv__item {
  padding: 16px 12px; margin: 0 10px;
  background: #fff; border: 1px solid #eee; border-radius: 12px;
  min-height: 140px; display: flex; gap: 14px; align-items: flex-start;
}
.seo-adv__icon {
    display: flex;
    justify-content: center; 
}
.seo-adv__icon img { }
.seo-adv__item-title { font-weight: 600; margin: 0 0 4px; }
.seo-adv__text { line-height: 1.45; }

.seo-adv__slider .slick-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #DCA851;
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  z-index: 10;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.seo-adv__slider .slick-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #DCA851;
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  z-index: 10;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.seo__price-content {
    display: flex;
    gap: 50px;
    margin-top: 50px;
    line-height: 25px;
}
.seo__price-text,
.seo__price-content-mess--text {
    border: 3px solid #C78A5A;
    padding: 10px;
    width: 50%;
}
.seo__promotion-content {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 70px;
}
.seo__promotion-content-item {
    width: 47%;
    background: linear-gradient(360deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 13.3px 53.2px;
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
}
.seo__promotion-title {
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    margin-top: 3px;
    padding: 12px 15px 0 15px;;
}
.seo__promotion-text {
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    margin-top: 3px;
    padding: 15px;
}
/* центрируем секцию, заголовок по центру */
.section__seo-advantag {
   --brand: #2B120E;
   padding: 40px 0;
}
/* внутренний контейнер – фиксируем ширину и центрируем */
.seo__advantag {
   width: 100%;
   max-width: 900px;     /* можно подправить */
   margin: 0 auto;       /* центр по горизонтали */
   display: flex;
   flex-direction: column;
   gap: 0;               /* линии рисуем псевдоэлементами, поэтому gap не нужен */
   text-align: left;     /* текст внутри слева */
   margin-top: 70px;
}

/* пункт */
.seo__advantag-item {
  position: relative;
  padding-left: 44px;   /* место под маркер */
  padding-bottom: 25px; /* отступ до линии */
  margin-bottom: 25px;  /* отступ после линии (визуально 25px) */
  color: var(--brand);
  line-height: 1.5;
  font-size: 18px;
}

/* маркер слева (аккуратный ромб) */
.seo__advantag-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;           /* вертикальная привязка к первой строке текста */
  width: 14px;
  height: 14px;
  transform: rotate(45deg);          /* ромб */
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(43,18,14,.12); /* мягкое кольцо вокруг */
  border-radius: 2px;
}

/* линия под КАЖДЫМ пунктом, кроме последнего */
.seo__advantag-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: 0;                          /* линия идёт под пунктом */
  background: linear-gradient(
      90deg,
      rgba(43,18,14,.08) 0%,
      rgba(43,18,14,.35) 50%,
      rgba(43,18,14,.08) 100%
  );
}

/* скрытые пункты до раскрытия */
.seo__advantag-item.is-hidden{ display:none; }
.seo__advantag.is-expanded .seo__advantag-item.is-hidden{ display:block; }

/* кнопка */
.seo__advantag-toggle{
   display: block;
   margin: 8px auto 0;
   color: var(--brand);
   background: #e4bc7a;
   border: 1px solid #ccc;
   border-radius: 6px;
   padding: 10px 25px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s ease;
   text-transform: uppercase;
}
.seo__advantag-toggle:hover{ border-color:var(--brand); }
.seo__promotion-items {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 70px;
    flex-wrap: wrap;
}
.seo__promotion-item {
    
}
.seo__promotion-bg {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
    line-height: 34px;
    color: #FFFFFF;
    padding-bottom: 20px;
    max-width: 550px;
}
.seo__promotion-item-title {
    height: 80px;
    padding-right: 30px;
    padding-left: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.seo__promotion-item-title::after {
  content: '';
  display: block;
  background: url('../img/arrow-right.svg') no-repeat;
  width: 10px;
  height: 20px;
  position: absolute;
  right: 11px;
  transition: all .1s ease-in;
}
.seo__promotion-item-price {
    display: flex;
    justify-content: flex-end;
}
.seo__promotion-item-price span {
    font-size: 28px;
    line-height: 34px;
    color: #FFF;
    font-size: 25px;
    line-height: 34px;
    color: #2B120E;
    padding-right: 20px;
    font-weight: 600;
}
.seo__promotion-item-text {
    line-height: 19px;
    font-size: 16px;
    padding: 15px;
}
.seo__promotion-toggle {
  display: block;
  margin: 8px auto 0;
  color: var(--brand);
  background: none;
  border: 2px solid #C78A5A;
  border-radius: 6px;
  padding: 10px 25px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
  text-transform: uppercase;
}
.seo__promotion-toggle:hover {
   border: 2px solid #fff; 
}
.seo__promotion-item-drop-down {
    display: none;
    padding-left: 11px;
    padding-right: 20px;
    padding-bottom: 31px;
}
.seo__promotion-item-list li {
    font-size: 16px;
    line-height: 12px;
    color: #FFFCFC;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}
.seo__promotion-item-list li::before {
  content: '';
  width: 10px;
  min-width: 10px;
  height: 10px;
  background: #DFAB47;
  border-radius: 50%;
  margin-right: 17px;
}
.seo__promotion-item.active .seo__promotion-item-drop-down {
  display: block;
}
.seo__promotion-item:not(.active) .seo__promotion-bg:hover {
  background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(162, 103, 79, 0.7);
  transition: all 0.3s;
}
.seo__promotion-item-list a:hover {
    color: #E5BB6B;
}
.seo__promotion-sity-items {
  display: flex!important;
  margin-top: 50px;
  gap: 30px;
}
.seo__promotion-sity-item {
  border: 1px solid #dfab47;
  border-radius: 25px;
  height: 50px !important;
  display: flex !important;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
  width: 390px;
}
.seo__promotion-sity-item a {
  cursor: pointer;
}
.seo__promotion-sity-items .slick-prev, .seo__promotion-sity-items .slick-next {
  background: #2b120e;
  color: #fff;
  border: none;
  font-size: 25px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 10%;
  z-index: 10;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.seo__promotion-sity-items .slick-prev:hover, .seo__promotion-sity-items .slick-next:hover {
  background: #DCA851;
}
.seo__promotion-sity-item:hover {
  background: #c98244;
}



.section-seo-areas-parties {
  margin: 60px auto;
}

.section-seo-areas-parties h2 {
  text-align: center;
  margin-bottom: 20px;
}

.seo-areas-parties-text {
  line-height: 20px;
  margin-bottom: 30px;
  font-size: 16px;
  color: #444;
}
.seo-areas-parties-text p {
    padding-bottom: 10px;
}
.seo-areas-parties-legend {
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 20px;
  font-weight: 600;
  color: #222;
}
.seo-areas-parties-agency {
    text-transform: uppercase;
    color: #2563eb;
}
.seo-areas-parties-customer {
    text-transform: uppercase;
    color: #ef4444;
}
.seo__areas-parties-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 4 в ряд адаптивно */
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch; /* все карточки одинаковой высоты */
}

.seo__areas-parties-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* текст сверху, шкала внизу */
  padding: 20px 15px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  min-height: 180px; /* фиксированная минимальная высота */
}
.seo__areas-parties-item-text {
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}
.seo__areas-parties-item-text span {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--brand);
  line-height: 1.4;
}

/* Шкала */
.seo__areas-parties-item-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: #eee;
  margin-top: 20px;
}

/* Проценты */
.resp-label {
  position: absolute;
  top: -22px;
  font-size: 13px;
  font-weight: 600;
  color: #111;
}
.resp-label--left { left: 0; }
.resp-label--right { right: 0; text-align: right; }
/* Ховер-эффект карточек */
.seo__areas-parties-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: default;
}

.seo__areas-parties-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15); /* синяя мягкая тень */
  border-color: #dfab47; /* подчёркиваем фирменным цветом */
}

/* лёгкая подсветка шкалы при ховере */
.seo__areas-parties-item:hover .seo__areas-parties-item-bar {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}
.seo-areas-parties-bottom-text {
    padding: 30px;
    border: 1px solid #dfab47;
    border-radius: 5px;
    margin-top: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
}
@media (max-width: 768px) {
  .seo__areas-parties-items {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
  }
 .seo__areas-parties-item {
    min-height: 160px;
    padding: 15px 10px;
  }
  .seo__areas-parties-item-text span { font-size: 14px; }
}

.seo__promotion-results-descr {
    margin-top: 70px;
    font-size: 25px;
    margin-bottom: 30px;
}
.seo__promotion-results-text {
    margin-bottom: 30px;
    font-size: 20px;
}
.seo__promotion-results-bottom-content {
    margin-bottom: 30px;
    font-size: 18px;
}
.seo__promotion-results-items {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.seo__promotion-results-item {
    width: 30%;
    border: 1px solid #2B120E;
    padding: 15px;
    border-radius: 5px; 
}
.seo__promotion-results-toggle {
    display: block;
    margin: 8px auto 0;
    color: var(--brand);
    background: #e4bc7a;
    border: 1px solid #e40b0b;
    border-radius: 6px;
    padding: 25px 25px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease;
    text-transform: uppercase;
}
.seo__promotion-results-toggle:hover {
    border-color: var(--brand);
}
.seo__services-get-title {
    font-weight: 300;
    font-size: 24px;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    line-height: 29px;
    padding: 15px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
}
.seo__services-get-title:hover {
    background: linear-gradient(0deg, rgba(79, 59, 68, 0.2) 0%, rgba(79, 59, 68, 0.02) 100%);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 20px 80px;
    backdrop-filter: blur(5.5px);
    border-radius: 10px 10px 0px 0px;
}
.seo__guarantee-text,
.seo__guarantee-bottom-text {
    margin-top: 30px;
    font-size: 22px;
    text-align: center;
    
}

.section-services__accordion {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  padding: 0 15px;
  font-family: 'Arial', sans-serif;
}

.section-services__item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}

.section-services__titl {
  background-color: #2B120E;
  color: #ffffffba;
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}

.section-services__titl:hover {
  background-color: #63352C;  /* Более светлый оттенок при наведении */
}

.section-services__titl span {
  font-size: 18px;
  font-weight: 600;
}

.section-services__icon {
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.section-services__content {
  display: none;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  color: #333;
  line-height: 1.6;
}

/* Активное состояние: раскрытие */
.section-services__item.active .section-services__content {
  display: block;
}

.section-services__item.active .section-services__icon {
  transform: rotate(45deg);  /* Поворот символа + на крестик */
}

/* Анимация для плавного раскрытия */
.section-services__item .section-services__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.section-services__item.active .section-services__content {
  max-height: 500px;  /* Для этого элемента максимальная высота */
}

/* Адаптив */
@media (max-width: 768px) {
  .section-services__titl {
    font-size: 16px;
    padding: 12px;
  }

  .section-services__content {
    padding: 12px;
  }
}

.seo__article {
    margin-bottom: 10px;
    line-height: 25px;
    margin-top: 40px;
}
.seo__article p {
    margin-bottom: 10px;
}
.seo__article h2,
.seo__article h3,
.seo__article h4,
.seo__article h5,
.seo__article h6 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.seo__article a {
    color: #CC8A53;
}
.seo__article a:hover {
    color: #E60D0D;
    text-decoration: underline;
}
.seo__article ul {
    padding: 0 9px;
    font-size: 17px;
    line-height: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.seo__article ul li {
    position: relative;
    padding-left: 19px;
}
.seo__article ul li::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(223, 171, 71, 0.8);
  margin-right: 13px;
  position: absolute;
  left: 0;
  top: 11px;
}
.seo__article table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.seo__article table th {
  background: rgba(212, 175, 55, 0.1);
  font-weight: 600;
}

.seo__article table td {
  border: 1px solid #eaeaea;
  padding: 12px 15px;
  text-align: left;
}
.section-article {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  color: #333;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.section__faq-seo {
  width: 100%;
  max-width: 900px;
  margin: 30px auto;
  padding: 0 15px;
  font-family: 'Arial', sans-serif;
}
.faq-seo__item {
  border-bottom: 1px solid #ddd;
  margin-bottom: 15px;
}
.faq-seo__item-title {
  background-color: #2B120E;
  color: #ffffffba;
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: background-color 0.3s ease;
}
.faq-seo__item-title span {
  font-size: 18px;
  font-weight: 600;
}
.faq-seo__item-title:hover {
  background-color: #63352C;
}
.faq-seo__item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.faq-seo__item-content {
  display: none;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  color: #333;
  line-height: 1.6;
}
.faq-seo__item.active .faq-seo__item-content {
  max-height: 500px;
  display: block;
}
.faq-seo__item-icon {
  font-size: 20px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.faq-seo__item.active .faq-seo__item-icon {
  transform: rotate(45deg);
}

.table-responsive {
  padding-left: 20px;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
.table-bordered {
  border: 1px solid #96898F;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead:first-child > tr:first-child > th {
  border-top: 0;
}
.table-bordered > thead > tr > th {
  border-bottom-width: 2px;
}
.table-bordered > thead > tr > th {
  border: 1px solid #96898F;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(221, 221, 221);
    border-bottom-width: 1px;
}
.table > thead > tr > th {
  vertical-align: bottom;
}
.table > thead > tr > th {
  padding: 8px;
  line-height: 1.42857143;
}
th {
  text-align: left;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
  background-color: #E5BB6B;
}
.table-bordered > tbody > tr > td {
  border: 1px solid #96898F;
}
.table > tbody > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
}
.bold_tr {
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}















/* адаптив */
@media (max-width: 768px) {
    .seo__advantag-item {
      font-size: 16px; 
      padding-left: 38px; 
      }
    .seo__advantag-item::before { width: 12px; height: 12px; }
}
@media (max-width: 1200px){ .seo-adv__title{font-size:24px;} }
@media (max-width: 576px){ .seo-adv__title{font-size:20px;} }



/* End BLOCK SEO  */

footer {
    background: linear-gradient(158.99deg, rgba(79, 59, 68, 0.5) 19.62%, rgba(79, 59, 68, 0) 91.9%), rgba(79, 59, 68, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.5px);
    border-radius: 10px 10px 0px 0px;
    margin-top: auto;
    width: 100%; /* Гарантирует, что подвал займет всю ширину экрана */
    padding: 28px 0 40px;
}

.footer__row {
    display: grid;
    grid-template-columns: 350px 180px 1fr 295px;
}

.footer__desc {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
}

.footer__desc {
    margin-top: 37px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-nav ul {
    display: grid;
    gap: 8px;
}

.footer-nav a {
    font-weight: 300;
    font-size: 19px;
    line-height: 24px;
    color: #FFFFFF;
    user-select: none;
    transition: all 0.3s;
}

.footer-nav a:hover {
    color: #DFAB47;
}

.footer__social-item {
    display: flex;
    align-items: center;
}

a.footer__social-item {
    font-weight: 300;
    font-size: 19px;
    line-height: 24px;
    color: #FFFFFF;
    user-select: none;
    transition: all 0.3s;
}

a.footer__social-item:hover {
    color: #DFAB47;
}

a.footer__addres-item {
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    color: #FFFFFF;
    transition: all 0.3s;
}

a.footer__addres-item:hover {
    color: #DFAB47;
}

.footer__social-row {
    display: grid;
    gap: 11px;
}

.footer__social-item img,
.footer__addres-item img {
    margin-right: 9px;
}

.footer__addres-item {
    display: flex;
    align-items: center;
    height: max-content;
}

.footer__item:not(:first-child) {
    margin-top: 51px;
    color: #fff;
}

/* Кнпка НАВЕРХ  */

.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 65px;
  height: 80px;
  border: none;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  background: linear-gradient(180deg, #DCA851 0%, #C78A5A 100%);
  color: #2B120E;
  box-shadow: 0 8px 16px rgba(43, 18, 14, 0.25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.9);
  transition: all 0.4s ease;
  z-index: 9999;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.scroll-top-btn svg {
  width: 26px;
  height: 26px;
  margin-top: 10px;
  transition: transform 0.4s ease;
}

.scroll-top-btn:hover {
  background: linear-gradient(180deg, #E5BB6B 0%, #DCA851 100%);
  color: #fff;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 10px 20px rgba(43, 18, 14, 0.35);
}

.scroll-top-btn:hover svg {
  transform: translateY(-4px);
}

.scroll-top-btn:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 5px 10px rgba(43, 18, 14, 0.2);
}


/* END Кнпка НАВЕРХ  */

.popup {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.9);
    box-shadow: 0px 19.8734px 79.4937px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.46519px);
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    visibility: hidden;
    opacity: 0;
    height: 0;
    -webkit-transition: visibility 0.2s, opacity 0.2s linear;
    -moz-transition: visibility 0.2s, opacity 0.2s linear;
    -o-transition: visibility 0.2s, opacity 0.2s linear;
    -ms-transition: visibility 0.2s, opacity 0.2s linear;
    transition: visibility 0.2s, opacity 0.2s linear;
}

.popup.active {
    visibility: visible;
    opacity: 1;
    height: 100%;
}

.popup__form {
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(162, 103, 79, 0.6);
    box-shadow: 0px 19.8734px 79.4937px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(5.46519px);
    border-radius: 10px;
    max-width: 400px;
    width: 100%;
    padding: 16px 0 24px;
    margin: 0 auto;
    margin-top: calc(50vh - 250px);
    /*margin-top: calc(30vh - 250px);*/
}

.popup__form-title {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
}

.popup__form label {
    display: flex;
    flex-direction: column;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    user-select: none;
}

.popup__form input,
.popup__form select {
    height: 40px;
    background: rgba(255, 213, 199, 0.8);
    box-shadow: 0px 20px 80px rgb(0 0 0 / 12%);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    border: none;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    padding: 0 10px;
    color: #A2674F;
}

.popup__form input::placeholder {
    color: #A2674F;
}

.popup__form-title {
    font-weight: 500;
    font-size: 26px;
    line-height: 32px;
    text-align: center;
    color: #FFFFFF;
    margin-top: 20px;
    padding: 0 10px;
}

.popup__form form {
    max-width: 300px;
    margin: auto;
}
.popup__form-text {
    color: #ffffffb2;
    padding: 20px;
    text-align: center;
}
.popup__form form label {
    margin-bottom: 16px;
}

.popup__form form {
    margin-top: 38px;
}

.popup__form .privacy-policy {
    display: flex;
    flex-direction: row;
    margin: 12px 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #FFFFFF;
}

.popup__form .privacy-policy input {
    height: auto;
}

.popup__form form input[type="submit"] {
    width: 100%;
    background: #DFAB47;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    height: 60px;
    color: #fff;
    cursor: pointer;
    margin-top: 37px;
}

.seo-list__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px 40px;
    counter-reset: test;
    margin-top: 54px;
}

.seo-list__item {
    display: flex;
    background: linear-gradient(360deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%);
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
    gap:10px;
}

.seo-list__number {
    background: linear-gradient(5.4deg, rgba(79, 59, 68, 0.4) 4.32%, rgba(79, 59, 68, 0.04) 96.5%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px 0px 0px 10px;
    width: 100%;
    max-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-list__number::before {
    counter-increment: test;
	content: counter(test);
    background: linear-gradient(180deg, #4F3B44 0%, rgba(79, 59, 68, 0.13) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 400;
    font-size: 50px;
    line-height: 61px;
}

.seo-list__item-title {
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    margin-top: 3px;
    
}
.seo-list__item-title--main {
	text-align: center;
}
.seo-list__content {
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 18px;
    margin-top: 12px;
    margin-right: 15px;
}
.seo-list__content-main {
	text-align: center;
}
.seo-list__text {
	width: 100%;
}
.section-seo-info__row {
    margin-top: 77px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 153px;
    margin-bottom: 58px;
}

.section-seo-info__item {
    background: linear-gradient(360deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%);
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
    font-weight: 300;
    font-size: 26px;
    line-height: 32px;
    padding: 40px;
    text-align: center;
    display: flex;
    align-items: center;
}

.section-seo-info p {
    margin-top: 30px;
    text-align: center;
    font-weight: 300;
    font-size: 26px;
    line-height: 32px;
}

.tarifs__desc {
    margin-top: 52px;
    text-align: center;
    font-weight: 300;
    font-size: 26px;
    line-height: 32px;
}

.tarifs__row {
    margin-top: 65px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 62px 55px;
}

.tarifs__item {
    background: linear-gradient(180deg, rgba(162, 103, 79, 0.4) 0%, rgba(162, 103, 79, 0.112) 100%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    padding-bottom: 35px;
}

.tarifs__title {
    line-height: 50px;
    text-align: center;
    font-weight: 500;
    font-size: 28px;
    border-bottom: 1px solid #A2674F;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px 10px 0 0;
}

.tarifs__sum {
    margin-top: 23px;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    font-weight: 300;
}

.tarifs__item ul {
    padding: 0 9px;
    font-weight: 300;
    font-size: 18px;
    line-height: 24px;
    display: grid;
    gap: 13px;
    margin-top: 32px;
    margin-bottom: 35px;
}

.tarifs__item ul li::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(223, 171, 71, 0.8);
    margin-right: 13px;
    margin-left: 8px;
    
}

.tarifs__btn {
    display: block;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);url("E:/Закачки/Whatsapp_icon-icons.png")
    backdrop-filter: blur(5.5px);
    border-radius: 10px;url("E:/Закачки/Whatsapp_icon-icons.png")
    font-weight: 300;
    font-size: 24px;
    line-height: 50px;
    color: #FFFFFF;
    width: 200px;
    text-align: center;
    margin: auto;
    margin-top: 20px;
    user-select: none; 
}
.svg_img img {
    top: 5px;
    position: relative;
    left: 16px;
}
.seo-description__row {
    display: grid; 
    gap: 30px;
    margin-top: 52px;
}

.seo-description_item {
    text-align: center;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(162, 103, 79, 0.04) 100%);
    box-shadow: 0px 13.3px 53.2px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(3.6575px);
    border-radius: 10px;
    transition: all 0.3s;
}

.seo-description__title {
    font-weight: 300;
    font-size: 24px;
    color: #FFFFFF;
    background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    line-height: 29px;
    padding: 15px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
}

.seo-description_item.active .seo-description__title,
.seo-description__title:hover,
.tarifs__btn:hover {
    background: linear-gradient(0deg, rgba(79, 59, 68, 0.2) 0%, rgba(79, 59, 68, 0.02) 100%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px 10px 0px 0px;
}

.seo-description__text {
    padding: 13px 72px 55px;
    display: none;
}

.seo-description_item.active .seo-description__text {
    display: block;
}

.tarif-nav{
    margin-top: 100px;
}

.tarif-nav__row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.tarif-nav__item {
    text-align: center;
    background: linear-gradient(94.78deg, rgba(79, 59, 68, 0.4) 4.13%, rgba(211, 191, 182, 0.4) 96.42%), rgba(143, 125, 133, 0.6);
    border: 1px solid #A2674F;
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    padding: 30px 36px;
    cursor: pointer;
}

.tarif-nav__item.active,
.tarif-nav__item:hover {
    background: linear-gradient(94.78deg, rgba(162, 103, 79, 0.4) 4.13%, rgba(211, 191, 182, 0.4) 96.42%), rgba(223, 171, 71, 0.8);
}

.section-tarif__sum {
    margin-top: 57px;
    text-align: center;
    font-weight: 700;
    font-size: 40px;
    line-height: 46px;
    color: #DFAB47;
    font-family: var(--play);
}

.section-tarif__row {
    margin-top: 50px;
    display: flex;
}

.section-tarif__item_text {
    background: linear-gradient(180deg, rgba(162, 103, 79, 0.4) -11.57%, rgba(162, 103, 79, 0.112) 74.86%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    font-weight: 300;
    font-size: 22px;
    line-height: 27px;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 75px;
    padding-right: 30px;
    padding-left: 30px;
    height: max-content;
}

.section-tarif__item_text p{
    padding-bottom: 40px;
}

.seo-description__text ul li {
    color: var(--main-text-color);
}

.seo-description__text ul li::before {
    background: #4F3B44;
}

.cases-page__title {
    font-weight: 400;
    font-size: 50px;
    line-height: 58px;
    text-align: center;
    color: #4F3B44;
    font-family: var(--play);
}

.cases-page__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    margin-top: 55px;
}

.cases-page__item {
    background: linear-gradient(180deg, rgba(162, 103, 79, 0.4) 0%, rgba(162, 103, 79, 0.112) 100%);
    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5.5px);
    border-radius: 10px;
    padding: 18px 20px;
}

.cases-page__item-title {
    font-family: var(--play);
    font-weight: 400;
    font-size: 30px;
    line-height: 35px;
}

.cases-page__item-text {
    margin-top: 31px;
    font-weight: 300;
    font-size: 28px;
    line-height: 34px;
    color: #714736;
}

.cases-page__item-text p {
    margin-bottom: 21px;
}

.cases-page__item-text p span {
    color: #A2674F;
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
}

.cases-page__des {
    font-weight: 300;
    font-size: 24px;
    line-height: 29px;
    margin-top: 48px;
}

@media (max-width: 1200px) {
    .header__nav li {
        margin-right: 20px;
    }
    .header__nav a {
        font-size: 14px;
    }
    .slick-prev {
        left: -14px;
    }
    .slick-next {
        right: -14px;
    }
}

@media (max-width: 1099px) {
    body {
        background: url('../img/bg-one.png') left top / 400px no-repeat,
                    url('../img/bg-two.png') right 600px / 500px no-repeat,
                    url('../img/bg-three.png') left 1000px / 700px no-repeat,
                    url('../img/bg-four.png') right 2300px / 700px no-repeat,
                    url('../img/bg-five.png') left bottom / 800px no-repeat
        ;
    }
    .header__row img {
        width: 200px;
        margin-top: 10px;
    }
    .header__nav a {
        font-size: 14px;
    }
    .header__nav li {
        margin-right: 20px;
    }
    .header__phone-icon {
        width: 50px;
        height: 40px;
    }
    .sub-header__search input {
        width: 280px;
        height: 50px;
    }
    .sub-header__search::after {
        width: 25px;
    }
    .section-first__item img{
        width: 360px;
    }

    .section-first,
    .section-first__row {
        margin-top: 30px;
    }

    .site-title {
        font-size: 70px;
        line-height: 73px;
    }
    .site-description {
        font-size: 24px;
        line-height: 29px;
    }
    .site-sub-description {
        font-size: 22px;
        line-height: 27px;
    }
    .btn-popup-form {
        font-size: 20px;
        width: 250px;
        height: 60px;
        line-height: 60px;
    }
    .section-title {
        font-size: 45px;
        line-height: 47px;
    }

    .section-certificates__row {
        max-width: 800px;
        width: 100%;
        margin: auto;
        margin-top: 30px;
    }
    .footer__row {
        grid-template-columns: 260px 161px 229px 250px;
    }
    .section-seo-info__row {
        gap: 30px;
    }
}

@media (max-width: 1023px) {

    .sub-header__working-hours {
        font-size: 16px;
        line-height: 20px;
    }
    .sub-header__search input {
        width: 250px;
        height: 45px;
    }
    .sub-header__search::after {
        width: 25px;
    }
    .sub-header__search {
        margin-right: 73px;
    }
    /*.header__nav {
        position: absolute;
        flex-direction: column;
        background: #D0E7FF;
        top: 95px;
        width: 100%;
        left: 0;
        z-index: 99;
        max-height: 0;
        overflow: hidden;
        -webkit-transition: opacity 230ms ease, visability 230ms ease, max-height 230ms ease;
        -moz-transition: opacity 230ms ease, visability 230ms ease, max-height 230ms ease;
        -ms-transition: opacity 230ms ease, visability 230ms ease, max-height 230ms ease;
        -o-transition: opacity 230ms ease, visability 230ms ease, max-height 230ms ease;
        transition: opacity 230ms ease, visability 230ms ease, max-height 230ms ease;
        background: linear-gradient(158.99deg, rgba(79, 59, 68, 0.5) 19.62%, rgba(79, 59, 68, 0) 91.9%), rgba(79, 59, 68, 1);
        box-shadow: 0px 20px 80px rgb(0 0 0 / 15%);
        backdrop-filter: blur(5.5px);
    }*/
    .header__social-item {
       /* display: none;*/
    }
    .header__row {
        /*position: static;*/
        /*margin-top: 15px;*/
    }

    .header__nav.active {
        max-height: 9999px;
    }
    .menu-toggle {
        display: none;
        width: 50px;
        height: 40px;
        background: linear-gradient(180deg, rgba(223, 171, 71, 0.4) 0%, rgba(223, 171, 71, 0.048) 100%), rgba(223, 171, 71, 0.6);
        border-radius: 10px;
        border: none;
        cursor: pointer;
    }
    .menu-icon {
        width: 27px;
        display: inline-block;
        vertical-align: middle;
        height: 1px;
        background-color: #fff;
        line-height: 67px;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
        position: relative;
        border-radius: 5px;
    }
    .menu-icon:after, .menu-icon:before {
        content: '';
        position: absolute;
        border-radius: 5px;
    }
    .menu-icon:before {
        width: 27px;
        top: -10px;
        left: 0;
        height: 1px;
        background-color: #fff;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
    }
    .menu-icon:after {
        width: 27px;
        bottom: -10px;
        height: 1px;
        left: 0;
        background-color: #fff;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
    }
    .menu-toggle.active .menu-icon {
        width: 0;
    }
    .menu-toggle.active .menu-icon:before {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 0;
        left: -13px;
    }
    .menu-toggle.active .menu-icon:after {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        bottom: 0;
        left: -13px;
    }
    .header__nav a {
        margin: auto;
        font-size: 14px;
    }
    .header__nav li {
        margin-right: 0;
    }
    .header__phone  {
        justify-content: center;
    }
    .header__phone a {
        margin: 0;
        justify-content: center;
    }
    .header__phone-icon {
        width: 40px;
        height: 30px;
        margin-left: 20px;
    }
    .header__nav ul {
        gap: 5px;
        /*flex-direction: column;
        margin-top: 20px;*/
    }
    .header__phone {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .header__phone-icon {
        background-size: 15px;
    }
    .site-title {
        font-size: 55px;
        line-height: 57px;
    }
    .site-description {
        font-size: 22px;
        line-height: 27px;
        text-align: center;
        margin-top: 16px;
    }
    .site-sub-description {
        margin-top: 20px;
        font-size: 18px;
        line-height: 22px;
    }
    .section-services__title {
        font-size: 20px;
        line-height: 24px;
    }
    .section-services__sub-title {
        font-size: 16px;
        line-height: 20px;
        text-align: right;
    }
    .section-services__list li {
        font-size: 18px;
        line-height: 22px;
    }
    .section-services__row {
        gap: 30px;
    }
    .section-cases__item-title {
        font-size: 22px;
        line-height: 27px;
    }
    .section-cases__age,
    .section-cases__task {
        display: none;
    }
    .section-form__title {
        font-size: 26px;
        line-height: 32px;
    }
    .section-form__block legend {
        font-size: 20px;
        line-height: 24px;
    }
    .form-checkbox {
        grid-template-columns: 1fr 1fr;
    }
    .form-checkbox label{
        white-space: normal;
    }
    .form-checkbox label {
        height: auto;
        height: auto;
        display: flex;
        align-items: flex-start;
    }
    .form-checkbox {
        margin-bottom: 28px;
        margin-top: 18px;
    }
    .form-personal {
        margin-top: 27px;
    }
    .footer__row {
        grid-template-columns: 200px 161px 239px;
        gap: 0 29px;
    }
    .footer__addres-item {
        grid-column: 3 / span 1;
    }
    .footer__logo img {
        width: 200px;
    }
    .tarifs__row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
     .header__top .header__nav,
     .header__row .header__nav ul{
        display: none;
     }
     .header__social {
        margin: 0 auto;
    }
    .header__row .header__nav {
        margin: 0 auto;
    }
    .menu-toggle {
        display: block;
        margin-top: 10px;
    }
    section {
        margin-top: 80px;
    }
}

@media (max-width: 767px) {
    .btn-mobile-search,
    .btn-mobile-phone {
        display: block;
    }
    .sub-header__search input{
        display: none;
    }
    .sub-header__working-hours {
        font-size: 14px;
        line-height: 17px;
    }
    .sub-header__working-hours p:first-child {
        margin-bottom: 4px;
    }
    .btn-mobile-search,
    .btn-mobile-phone {
        margin-right: 0;
        background: linear-gradient(180deg, rgba(79, 59, 68, 0.4) 0%, rgba(79, 59, 68, 0.04) 100%), rgba(143, 125, 133, 0.6);
        box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(5.5px);
        border-radius: 10px;
        width: 40px;
        height: 35px;
        order: 1;
    }
    .sub-header__search::after {
        display: none;
    }
    .btn-mobile-search::after,
    .btn-mobile-phone::after {
        content: '';
        background: url('../img/icon-search.svg') no-repeat;
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background-size: contain;
        width: 20px;
        right: 0;
        left: 0;
        height: 20px;
        margin: auto;
    }
    .btn-mobile-phone::after {
        background: url('../img/icon-phone.svg') no-repeat;
        width: 15px;
        height: 20px;
        background-size: contain;
    }
    .sub-header {
        justify-content: space-between;
    }
    .sub-header__search {
        margin-right: 0;
        order: 1;
        display: flex;
        gap: 20px;
    }
    .section-first__row {
        flex-direction: column;
    }
    .section-first__item img {
        padding: 0;
        margin: auto;
    }
    .section-first__item:first-child {
        display: none;
    }
    .section-first__row {
        margin-top: 52px;
    }
    .site-title {
        font-weight: 700;
        font-size: 55px;
        line-height: 57px;
        color: #dfd1c5;
    }
    .site-description {
        max-width: 293px;
        width: 100%;
        margin: auto;
        margin-top: 20px;
    }
    .site-description::after {
        content: '';
        background: url(../img/lion.png) no-repeat;
        width: 100%;
        height: 300px;
        display: block;
        background-size: contain;
        margin-top: 16px;
    }
    .section-services__row {
        grid-template-columns: 1fr;
    }
    .section-services__title {
        height: 60px;
    }

    .section-certificates__row {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 80px;
    }
    
    .section-certificates__row li {
        background: rgba(143, 125, 133, 0.6);
        border-radius: 4px;
        height: 20px;
        width: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .section-certificates__row li:hover,
    .section-certificates__row li.slick-active {
        background: #8D787A;
    }
    
    .section-certificates__row button {
        display: none;
    }

    .section-certificates__row .slick-dots {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        gap: 20px;
        position: absolute;
        left: 0;
        right: 0;
    }

    .section-cases__item-title {
        font-size: 14px;
        line-height: 17px;
    }
    .section-cases__img {
        display: none;
    }
    .section-cases__age, .section-cases__task {
        display: block;
        font-size: 12px;
        line-height: 15px;
    }
    .section-cases__age span, .section-cases__task span {
        font-size: 12px;
        line-height: 15px;
        margin-left: 0;
    }
    .section-cases__btn-row {
        justify-content: center;
    }
    .section-cases__btn {
        margin-top: 22px;
        /*width: 130px;
        height: 30px;*/
        font-size: 16px;
        /*line-height: 30px;*/
    }
    .section-form__title,
    .section-form__block legend,
    .form-checkbox {
        display: none;
    }
    .form-personal {
        grid-template-columns: 1fr;
    }
    .form-personal label:last-child {
        grid-column: 1;
    }
    .form-personal {
        grid-template-columns: 1fr;
    }
/*
    .form-personal::before {
        content: 'Заказ обратного звонка';
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #fff;
        text-align: center;
    }
    */
    .form-personal label {
        font-size: 12px;
        line-height: 15px;
    }
    .form-personal input {
        height: 40px;
        margin-top: 3px;
    }
    .form-personal {
        gap: 13px;
    }
    .form-personal label:nth-child(2),
    .form-personal label:nth-child(4),
    .form-personal label:nth-child(6),
    


    .privacy-policy {
        font-size: 8px;
        line-height: 10px;
        width: 100%;
    }

    .section-form__block input[type="submit"] {
        font-size: 18px;
        line-height: 22px;
    }
    .section-form__block {
        padding-bottom: 24px;
    }
    .footer__logo img {
        width: 100px;
    }
    .footer__row {
        grid-template-columns: 160px 1fr;
    }
    .footer__desc {
        margin-top: 18px;
        font-size: 10px;
        line-height: 12px;
    }
    .footer__item:not(:first-child) {
        margin-top: 0;
    }
    .footer-nav a {
        font-size: 14px;
        line-height: 17px;
    }
    .footer__social-item span,
    .footer__addres-item span {
        display: none;
    }
    .footer__addres-item,
    .footer__item:nth-child(3) {
        grid-column: 2 / span 1;
    }
    .footer__social-row {
        display: flex;
        margin-top: 8px;
    }
    .footer__addres-item {
        display: none;
    }
    .section-form__block {
        padding-top: 0;
    }
    .section-form__block form {
        padding-top: 1px;
    }
    .seo-list__row {
        grid-template-columns: 1fr;
    }
    .section-seo-info__row {
        grid-template-columns: 1fr;
    }
    .tarifs__row {
        grid-template-columns: 1fr;
    }
    .tarif-nav__row {
        grid-template-columns: 1fr 1fr;
    }
    .section-tarif__item:first-child {
        display: none;
    }
    .cases-page__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    .header__social,
    .header__phone-num {
        display:none;
    }
    .header__button {
        margin: 5px auto;
    }
    .header__phone-icon {
        margin: 0 auto;
    }
}


@media (max-width: 479px) {
    .header__row img {
        width: 120px;
        margin-top: 0;
    }
    .header {
        height: 95px;
    }
    .menu-toggle {
        height: 35px;
        width: 40px;
        margin-left: -85px;
    }
    .menu-icon,
    .menu-icon:before,
    .menu-icon:after {
        width: 20px;
        height: 2px;
    }
    .menu-icon:before {
        top: -8px;
    }
    .menu-icon:after {
        bottom: -8px;
    }
    .menu-toggle.active .menu-icon:before {
        left: -10px;
    }
    .menu-toggle.active .menu-icon:after{
        left: -11px;
    }
    .menu-toggle.active .menu-icon:after {
        bottom: 1px;
    }
    .menu-toggle.active .menu-icon:before {
        top: -1px;
    }
    .header__nav {
        top: 55px;
    }
      .header__row {
        /*margin-top: 8px;*/
   }
    .header__logo {
        display: flex;
        align-items: center;
    }
    .section-working__item {
        margin: 0;
    }
    .section-title {
        font-size: 30px;
        line-height: 31px;
    }
    .section-services__row {
        margin-top: 30px;
    }

    .section-services__list li {
        font-size: 14px;
        line-height: 17px;
    }

    .section-services__sub-title {
        font-size: 12px;
        line-height: 15px;
        color: #FFDFC8;
    }
    .section-services__list li {
        margin-bottom: 12px;
    }
    .section-form__block input[type="submit"] {
        width: 100%;
        padding: 0;
    }

    .footer__row {
        grid-template-columns: 1fr;
    }

    .tarif-nav__row {
        grid-template-columns: 1fr;
    }

    .cases-page__title {
        font-size: 32px;
        line-height: 38px;
    }

    .cases-page__item-title {
        font-size: 22px;
        line-height: 25px;
    }

    .cases-page__item-text {
        font-size: 20px;
        line-height: 24px;
    }

    .cases-page__item-text p {
        margin-bottom: 10px;
    }

    .cases-page__item-text p span {
        font-size: 20px;
        line-height: 22px;
    }
    
    .cases-page__des {
        font-size: 20px;
        line-height: 26px;
        text-align: center;
    }
    .seo-description__text {
        text-align: left;
        padding: 20px;
    }
    .form-personal input {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .footer__social-row {
        gap: 0;
    }
    .footer-nav ul {
        text-align: right;
    }
    .section-title, h1 {
        font-size: 38px;
        line-height: 44px;
    }
    .section-seo-info__item {
        font-size: 18px;
        line-height: 24px;
    }
    .section-tarif__item_text {
        padding-bottom: 0;
    }
}
.bx-breadcrumb {
    margin-left: 21% !important;
}

.contact_text {
    font-size: 130%;
}

/* Базовая стилизация */
.utp_cont {
    margin-top: 35px;
}
.dev-utp-block { font-family: sans-serif; }
.dev-utp-header { text-align: center; margin-bottom: 30px; }
.dev-utp-header h1 { margin: 0 0 10px 0; font-size: 2.5rem; }
.dev-utp-subtitle { font-size: 1.2rem; color: #555; }
.dev-utp-main-text { text-align: center;  margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }
.dev-utp-block .section-tarif__row {
  margin-top: 0;
}
/* Стили для списка с КАСТОМНЫМИ маркерами */
.dev-utp-features-list {
    max-width: 800px;
    margin: 30px auto;
    padding: 0; /* Убираем стандартные отступы браузера */
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style: none !important; /* Принудительно отключаем дефолтные маркеры, если они где-то пытаются вылезти */
}

.dev-utp-features-list li {
    font-size: 1.05rem;
    line-height: 1.5;
    position: relative; /* Для позиционирования маркера */
    padding-left: 20px; /* Освобождаем место слева под маркер */
}

/* Рисуем свой собственный маркер */
.dev-utp-features-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px; /* Смещаем вниз, чтобы выровнять по центру первой строки */
    width: 8px; /* Ширина точки */
    height: 8px; /* Высота точки */
    background-color: #dc3129; /* Красный цвет как у рамки кнопки */
    border-radius: 50%; /* Делаем маркер круглым */
}

.dev-utp-side { text-align: center; margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; }
.side-description { margin: 0 auto 20px auto; line-height: 1.5; }

/* Стили кнопки из макета */
.dev-btn-presentation { 
    display: inline-block; 
    padding: 15px 30px; 
    background-color: #dfbc7e; 
    color: #394452; 
    border: 1px solid #dc3129; 
    text-decoration: none; 
    border-radius: 4px; 
    transition: all 0.3s ease; 
    text-transform: uppercase;
    margin-top: 50px;
}

/* Эффект наведения (hover) */
.dev-btn-presentation:hover { 
    background-color: #d1ad6e; 
    color: #1a2027; 
    border-color: #b5261f; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}
/* ==========================================================================
   Блок "Какие сайты мы разрабатываем"
   ========================================================================== */
/*
.section-dev-types {
    padding: 60px 0;
}
*/
.section-dev-types__title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #4a423d; /* Темно-коричневый оттенок под стиль сайта */
    margin-bottom: 50px;
}

/* Сетка карточек: 4 в ряд на десктопе */
.section-dev-types__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* Карточка */
.dev-type-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Почти непрозрачный белый фон (можно использовать просто #ffffff) */
    padding: 35px 25px; /* Внутренние отступы, чтобы текст не прилипал к краям */
    border-radius: 12px; /* Аккуратное скругление углов */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Легкая тень для объема */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 2; /* Гарантированно держим поверх фоновых волн */
}

/* Усиливаем тень при наведении */
.dev-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Слегка корректируем отступ у иконки, так как теперь есть padding у самой карточки */
.dev-type-card__icon {
    margin-bottom: 20px;
    height: 90px; 
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.dev-type-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Тело карточки (заголовок + текст) */
.dev-type-card__body {
    flex-grow: 1; /* Растягиваем, чтобы прижать цену и кнопку к низу */
    display: flex;
    flex-direction: column;
}

.dev-type-card__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
    line-height: 1.3;
}

.dev-type-card__text {
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 20px;
}

/* Цена */
.dev-type-card__price {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.dev-type-card__price span {
    font-weight: 700;
    font-size: 16px;
}

/* Кнопка "Заказать" */
.dev-type-card__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #e2b781; /* Песочно-золотистый цвет из макета */
    border: 1px solid #c79c66;
    border-radius: 4px; /* Легкое скругление углов */
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 600;
    color: #3a322d; /* Темно-коричневый текст */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start; /* Кнопка не будет растягиваться на всю ширину */
}

/* Эффект при наведении на кнопку */
.dev-type-card__button:hover {
    background-color: #3a322d; /* Фон становится темно-коричневым */
    color: #e2b781; /* Текст становится золотистым */
    border-color: #3a322d;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Появляется мягкая тень */
    transform: translateY(-2px); /* Кнопка визуально приподнимается */
}

/* Для мобильной версии (внутри @media (max-width: 576px)) 
   можно добавить растягивание кнопки на всю ширину, если вам так больше нравится: */
@media (max-width: 576px) {
    .dev-type-card__button {
        align-self: center;
        width: 100%; /* На телефонах кнопка будет широкой и удобной для нажатия */
    }
}

/* ==========================================================================
   Адаптивность (Mobile & Tablet)
   ========================================================================== */

/* Планшеты (до 1024px) - 2 колонки */
@media (max-width: 1024px) {
    .section-dev-types__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

/* Мобильные телефоны (до 576px, включая 320px) - 1 колонка */
@media (max-width: 576px) {
    .section-dev-types {
        padding: 40px 0;
    }

    .section-dev-types__title {
        font-size: 26px;
        margin-bottom: 35px;
    }

    .section-dev-types__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* На мобилках лучше центрировать контент */
    .dev-type-card {
        align-items: center;
        text-align: center;
    }

    .dev-type-card__icon {
        justify-content: center;
        align-items: center;
        height: auto;
        min-height: 90px;
    }
    
    .dev-type-card__button {
        text-align: center;
    }
}
/* ==========================================================================
   Блок "Наш подход к разработке" (Bento Style)
   ========================================================================== */

.section-approach {
    padding: 80px 0;
}

.approach__main-title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #4a423d;
    margin-bottom: 80px;
}

/* Модульная сетка для десктопа */
.approach__bento-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr; /* Правая часть чуть шире */
    gap: 30px;
    margin-bottom: 40px;
}

/* Базовый стиль карточки */
.approach__card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach__card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

/* Левая карточка SEO */
.approach__card--highlight {
    border-top: 4px solid #e2b781; /* Золотистый акцент сверху */
}

.approach__card-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.approach__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.approach__list-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.approach__list-item:last-child {
    margin-bottom: 0;
}

.approach__list-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}

/* Цвета для плюсов и минусов */
.approach__list-item--pro .approach__list-icon {
    color: #3ebd60; /* Мягкий зеленый для галочек */
}
.approach__list-item--con .approach__list-icon {
    color: #e74c3c; /* Мягкий красный для крестиков */
}

.approach__list-text strong {
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 6px;
}

.approach__list-text span {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    display: block;
}

/* Правая часть с сеткой 2х2 */
.approach__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.approach__feature-card {
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.approach__feature-icon {
    width: 40px;
    height: 40px;
    color: #c79c66; /* Золотисто-песочный цвет иконок */
    margin-bottom: 20px;
}

.approach__feature-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.approach__feature-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Кнопка */
.approach__cta {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.approach__btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #e2b781;
    border: 1px solid #c79c66;
    border-radius: 6px;
    padding: 18px 45px;
    font-size: 15px;
    font-weight: 700;
    color: #3a322d;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.approach__btn:hover {
    background-color: #3a322d;
    color: #e2b781;
    border-color: #3a322d;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* ==========================================================================
   Адаптивность (Mobile & Tablet)
   ========================================================================== */

/* Планшеты (до 1024px) */
@media (max-width: 1024px) {
    .approach__bento-grid {
        grid-template-columns: 1fr; /* Блоки встают друг под друга */
    }
    
    .approach__features {
        grid-template-columns: 1fr 1fr;
    }
}

/* Мобильные телефоны (до 768px) */
@media (max-width: 768px) {
    .section-approach {
        padding: 50px 0;
    }

    .approach__main-title {
        font-size: 28px;
        margin-bottom: 35px;
    }

    .approach__features {
        grid-template-columns: 1fr; /* Фичи встают в одну колонку */
    }

    .approach__card {
        padding: 25px;
    }
}

/* Маленькие экраны (вплоть до 320px) */
@media (max-width: 480px) {
    .approach__main-title {
        font-size: 24px;
    }

    .approach__btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 14px;
    }
}
/* ==========================================================================
   Блок Тарифов (Glassmorphism Style)
   ========================================================================== */
.section-tariffs {
    padding: 80px 0 30px 0;
}

.section-tariffs__title {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    color: #4a423d;
    margin-bottom: 55px;
}

/* --- Табы (Фильтры 2 ряда) --- */
.tariffs-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Отступ между рядами */
    margin-bottom: 50px;
    align-items: center;
}

.tariffs-filter-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 900px; /* Чтобы ряды не разъезжались слишком широко */
}

.tariffs-filter-label {
    font-size: 15px;
    font-weight: 500;
    color: #4a423d;
    min-width: 130px; /* Фиксируем ширину текста, чтобы кнопки шли ровно друг под другом */
    text-align: right;
}

.tariffs-tabs-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tariffs-tab {
    background: transparent;
    border: 1px solid #c79c66;
    color: #4a423d;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tariffs-tab:hover {
    background: rgba(199, 156, 102, 0.1);
}

.tariffs-tab.active {
    background: #c79c66;
    color: #fff;
    box-shadow: 0 4px 15px rgba(199, 156, 102, 0.4);
}

/* Класс для скрытия карточек через JS */
.tariff-card.hidden {
    display: none !important;
}

/* Адаптив для двух рядов фильтров */
@media (max-width: 768px) {
    .tariffs-filter-row {
        flex-direction: column;
        align-items: center;
    }
    .tariffs-filter-label {
        text-align: center;
        min-width: auto;
        margin-bottom: 5px;
    }
    .tariffs-tabs-group {
        justify-content: center;
    }
}

/* --- Контент и Сетка --- */
.tariffs-pane {
    display: none; /* Скрываем все табы */
    animation: fadeIn 0.5s ease;
}

.tariffs-pane.active {
    display: block; /* Показываем активный */
}

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

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

/* --- Карточки (Glassmorphism) --- */
.tariff-card {
    display: flex;
    flex-direction: column;
    /* Эффект матового стекла */
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 8px 32px rgba(121, 98, 77, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tariff-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(121, 98, 77, 0.15);
}

/* Выделение центрального (популярного) тарифа */
.tariff-card--popular {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #e2b781;
    position: relative;
}
.tariff-card--popular::before {
    content: 'ХИТ ПРОДАЖ';
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #e2b781;
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.tariff-card__header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(199, 156, 102, 0.3);
}

.tariff-card__name {
    font-size: 24px;
    font-weight: 700;
    color: #4a423d;
    margin-bottom: 10px;
}

.tariff-card__desc {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    min-height: 40px; /* Выравнивание заголовков */
}

/* Список с галочками */
.tariff-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1; /* Прижимает футер с ценой к низу */
}

.tariff-card__list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #4a423d;
    line-height: 1.5;
}

.tariff-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    /* Красивая золотистая SVG галочка */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c79c66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Цена и Кнопка */
.tariff-card__footer {
    text-align: center;
}

.tariff-card__price-box {
    margin-bottom: 25px;
}

.tariff-card__old-price {
    display: block;
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.tariff-card__price {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #4a423d;
}

.tariff-card__btn {
    display: block;
    width: 100%;
    background-color: #a88a7b; /* Цвет кнопок с вашего макета */
    border: none;
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tariff-card__btn:hover {
    background-color: #8c7163;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.tariff-card--popular .tariff-card__btn {
    background-color: #e2b781; /* Выделяем кнопку у хита продаж */
    color: #3a322d;
}
.tariff-card--popular .tariff-card__btn:hover {
    background-color: #c79c66;
}

/* ==========================================================================
   Адаптивность
   ========================================================================== */
@media (max-width: 1024px) {
    .tariffs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .section-tariffs { padding: 50px 0; }
    .tariffs-filter { flex-direction: column; text-align: center; }
    .tariffs-filter__tabs { justify-content: center; }
    .tariffs-grid { grid-template-columns: 1fr; }
    .tariff-card { padding: 30px 20px; }
}
/* Базовые настройки секции */
.development-stages {
    padding: 80px 20px;
    font-family: 'Inter', sans-serif; /* Замени на свой основной шрифт */
    color: #333333;
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
}

.section-title {
    font-size: 36px;
    margin-bottom: 50px;
    text-align: center;
    color: #333333;
    font-weight: normal;
}

.stages-wrapper {
    display: flex;
    gap: 50px;
    align-items: stretch;
}

/* Навигация (Левая колонка) */
.stages-navigation {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stage-tab {
    background: transparent;
    border: 1px solid transparent; /* Подготовка под hover */
    border-radius: 50px; /* Скругление как у кнопок тарифов */
    padding: 18px 25px;
    color: #666666;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stage-tab:hover {
    color: #c59c6c;
}

.stage-number {
    font-size: 16px;
    color: inherit;
}

/* Активный таб: Повторяет стиль кнопки "ИНТЕРНЕТ-МАГАЗИН" из референса */
.stage-tab.active {
    background: #c59c6c; /* Песочно-коричневый цвет сайта */
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.3);
}

.stage-tab.active:hover {
    color: #ffffff;
}

/* Контейнер контента (Правая колонка) - Светлая парящая карточка */
.stages-content-container {
    flex: 1;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 20px; /* Скругление как у карточек тарифов */
    padding: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04); /* Очень мягкая тень */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stage-content {
    display: none;
    animation: fadeInLight 0.4s ease forwards;
}

.stage-content.active {
    display: block;
}

.stage-title {
    font-size: 26px;
    color: #333333;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stage-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 30px;
}

.stage-subtitle {
    font-size: 18px;
    color: #333333;
    margin-bottom: 20px;
}

/* Списки для акцентов (строго ul/li) */
.team-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-list li {
    position: relative;
    padding-left: 30px;
    color: #555555;
    font-size: 15px;
}

/* Кастомный маркер списка в цвет акцента */
.team-list li::before {
    content: "✓"; /* Галочка, как в тарифах */
    position: absolute;
    left: 0;
    top: -2px;
    color: #c59c6c;
    font-size: 18px;
    font-weight: normal;
}

@keyframes fadeInLight {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Адаптив */
@media (max-width: 900px) {
    .stages-wrapper {
        flex-direction: column;
    }
    .stages-navigation {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .stage-tab {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Базовые настройки секции */
.advantages-section {
    padding: 20px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 36px;
    margin-bottom: 50px;
    text-align: center;
    color: #333333;
    font-weight: normal;
}

/* Сетка Bento Grid */
.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

/* Стили карточки (Светлое стекло) */
.advantage-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(197, 156, 108, 0.15); /* Едва заметная золотистая рамка */
    border-radius: 24px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Декоративный градиентный блик при наведении */
.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 100% 0%, rgba(197, 156, 108, 0.08) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(197, 156, 108, 0.12);
    border-color: rgba(197, 156, 108, 0.4);
}

.advantage-card:hover::before {
    opacity: 1;
}

/* Шапка карточки (Иконка + Заголовок) */
.advantage-card__header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.advantage-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #fdfaf5; /* Очень светлый песочный фон */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c59c6c; /* Основной золотистый акцент */
    font-size: 24px;
    box-shadow: inset 0 0 0 1px rgba(197, 156, 108, 0.2);
    transition: all 0.4s ease;
}

.advantage-card:hover .advantage-icon {
    background: #c59c6c;
    color: #ffffff;
}

.advantage-title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    line-height: 1.3;
}

/* Тело карточки */
.advantage-intro {
    font-size: 15px;
    color: #666666;
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Списки (Строго по правилам ТЗ) */
.advantage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.advantage-list li {
    position: relative;
    padding-left: 24px;
    color: #555555;
    font-size: 14px;
    line-height: 1.5;
}

.advantage-list li::before {
    content: "—"; /* Минималистичный тире-маркер */
    position: absolute;
    left: 0;
    top: 0;
    color: #c59c6c;
    font-weight: bold;
}

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

.calculator-section {
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

.calc-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.calc-subtitle {
    font-size: 18px;
    color: #333333;
    margin-bottom: 15px;
    font-weight: 500;
}

/* Чипсы (Переключатели тарифов и типов) */
.calc-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-chip {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 15px 20px;
    color: #555555;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
}

.calc-chip:hover {
    border-color: rgba(197, 156, 108, 0.4);
    color: #c59c6c;
}

.calc-chip.active {
    background: #c59c6c;
    border-color: #c59c6c;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.25);
}

/* Списки опций */
.calc-options-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calc-options-list li {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 15px;
    gap: 15px; /* Управляем отступом между элементами через flex gap */
}

.calc-options-list li:hover {
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.calc-option-name {
    flex-grow: 1; /* Название занимает всё доступное место */
    flex-shrink: 1; /* Позволяет названию сжиматься, если не хватает места */
    font-size: 15px;
    color: #333333;
    line-height: 1.4;
}

.calc-option-price {
    flex-shrink: 0; /* Цена НИКОГДА не сжимается */
    width: 90px;    /* Жесткая ширина для блока с ценой */
    text-align: right;
    font-size: 15px;
    color: #888888;
    font-weight: 500;
}

/* Кастомный Toggle (Переключатель iOS стиля) */
.calc-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.calc-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.calc-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e4e4e4;
    transition: .4s;
    border-radius: 24px;
}

.calc-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.calc-toggle input:checked + .calc-toggle-slider {
    background-color: #c59c6c; /* Золотистый акцент */
}

.calc-toggle input:checked + .calc-toggle-slider:before {
    transform: translateX(20px);
}

/* Итоговая карточка (Стекло) */
.calc-result-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 40px;
}

.calc-result-label {
    font-size: 14px;
    color: #666666;
    margin-bottom: 5px;
}

.calc-result-value {
    font-size: 32px;
    color: #c59c6c;
    margin-bottom: 25px;
}

.calc-result-time {
    font-size: 20px;
    color: #333333;
    margin-bottom: 30px;
}

.calc-result-divider {
    height: 1px;
    background: rgba(0,0,0,0.05);
    margin: 25px 0;
}

.calc-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #c59c6c 0%, #b08757 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 18px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(197, 156, 108, 0.3);
}

.calc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(197, 156, 108, 0.4);
}

/* Адаптив */
@media (max-width: 1200px) {
    .calc-option-name {
        font-size: 14px;
    }
    .calc-option-price {
        width: 80px;
        font-size: 14px;
    }
}
@media (max-width: 992px) {
    .calculator-grid {
        grid-template-columns: 1fr;
    }
    .calc-result-card {
        position: static;
    }
}

/* Оверлей матового стекла */
.calc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.calc-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Карточка модального окна */
.calc-modal-content {
    background: #ffffff;
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 20px;
    padding: 40px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    max-height: 90vh;
    overflow-y: auto;
}

.calc-modal-overlay.active .calc-modal-content {
    transform: translateY(0);
}

.calc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: #888888;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.calc-modal-close:hover {
    color: #333333;
}

.calc-modal-title {
    font-size: 24px;
    color: #333333;
    margin-bottom: 25px;
    text-align: center;
}

/* Список выбранных опций */
.calc-summary-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-summary-list li {
    font-size: 15px;
    color: #555555;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
}

.calc-summary-list li:last-child {
    border-bottom: none;
}

.calc-modal-total {
    font-size: 22px;
    color: #c59c6c;
    text-align: center;
    margin-bottom: 30px;
}

/* Кнопки мессенджеров */
.calc-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.calc-modal-actions a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 16px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.calc-btn-tg {
    background: #2AABEE; /* Цвет Telegram */
}

.calc-btn-tg:hover {
    background: #2298D6;
    box-shadow: 0 5px 15px rgba(42, 171, 238, 0.3);
}

/* Кнопка отправки Максу (Фирменный цвет) */
.calc-btn-maks {
    background: #c59c6c; 
}

.calc-btn-maks:hover {
    background: #b08757;
    box-shadow: 0 5px 15px rgba(197, 156, 108, 0.3);
}

.tech-stack-section {
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 36px;
    margin-bottom: 50px;
    text-align: center;
    color: #333333;
    font-weight: normal;
}

/* Сетка для трех колонок */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* Карточка колонки (Light Glassmorphism) */
.tech-column {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 156, 108, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(197, 156, 108, 0.08);
}

.tech-category-title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(197, 156, 108, 0.2);
}

/* Строгий список технологий */
.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tech-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s ease;
}

.tech-list li:hover {
    transform: translateX(5px);
}

/* Иконки технологий */
.tech-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    /* Убираем возможные искажения загруженных картинок */
    display: block; 
}

.tech-name {
    font-size: 16px;
    color: #555555;
}

.tech-list li:hover .tech-name {
    color: #c59c6c; /* Золотисто-песочный акцент при наведении */
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 900px) {
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tech-grid {
        grid-template-columns: 1fr;
    }
    .tech-column {
        padding: 30px 20px;
    }
}

.other-services-section {
    padding: 20px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 36px;
    color: #333333;
    font-weight: normal;
    margin: 0;
}

/* Кнопки навигации слайдера */
.slider-controls {
    display: flex;
    gap: 15px;
}

.slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(197, 156, 108, 0.3);
    color: #c59c6c;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.slider-btn:hover {
    background: #c59c6c;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.25);
}

/* Обертка для скрытия скроллбара */
.services-slider-wrapper {
    overflow: hidden;
    margin: 0 -20px; /* Компенсация паддингов для красивого вылета за края */
    padding: 20px;
}

/* Список-слайдер */
.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* Скрываем скроллбар IE/Edge */
    scrollbar-width: none; /* Скрываем скроллбар Firefox */
}

.services-list::-webkit-scrollbar {
    display: none; /* Скрываем скроллбар Chrome/Safari */
}

/* Карточка услуги (Стекло) */
.service-card {
    flex: 0 0 calc(25% - 22.5px); /* 4 карточки в ряд. Отнимаем gap */
    min-width: 250px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    scroll-snap-align: start;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

/* Градиентный бордер при наведении (эффект SEO LEV) */
.service-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 156, 108, 0.4);
    box-shadow: 0 15px 40px rgba(197, 156, 108, 0.12);
}

.service-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 30px;
    text-decoration: none;
    color: inherit;
}

/* Блок иконки */
.service-icon-wrap {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-icon-wrap {
    opacity: 1;
    transform: scale(1.05);
}

.service-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Заголовок без H3 */
.service-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.service-card:hover .service-title {
    color: #c59c6c;
}

/* Адаптив */
@media (max-width: 1024px) {
    .service-card {
        flex: 0 0 calc(33.333% - 20px);
    }
}

@media (max-width: 768px) {
    .service-card {
        flex: 0 0 calc(50% - 15px);
    }
}

@media (max-width: 480px) {
    .service-card {
        flex: 0 0 85%; /* На мобильных оставляем кусочек следующей карточки для подсказки свайпа */
    }
}

.popular-dev-section {
    padding: 60px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.popular-dev-section .section-title {
    font-size: 36px;
    color: #333333;
    margin-bottom: 30px;
    font-weight: normal;
}

.tags-slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* Боковые стрелки */
.tag-slider-btn {
    background: transparent;
    border: none;
    color: #c59c6c;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tag-slider-btn:hover {
    color: #b08757;
    transform: scale(1.1);
}

/* Обертка для скрытия скроллбара и создания градиентного затухания по краям */
.tags-slider-wrapper {
    flex-grow: 1;
    overflow: hidden;
    /* Эффект растворения тегов по краям (только для Webkit) */
    mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

/* Список тегов */
.tags-list {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 15px 20px; /* Отступы, чтобы тень от ховера не обрезалась */
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.tags-list::-webkit-scrollbar {
    display: none;
}

.tag-item {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Дизайн самой кнопки (Стекло) */
.tag-link {
    display: block;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 156, 108, 0.4);
    border-radius: 50px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
}

.tag-link:hover {
    background: #c59c6c;
    color: #ffffff;
    border-color: #c59c6c;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.3);
    transform: translateY(-2px);
}

/* Адаптив */
@media (max-width: 768px) {
    .tag-slider-btn {
        display: none; /* На мобилках скрываем стрелки, оставляем свайп */
    }
    .tags-slider-wrapper {
        mask-image: none;
        -webkit-mask-image: none;
        margin: 0 -20px; /* Растягиваем на всю ширину экрана */
    }
}
.reviews-section {
    padding: 20px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.reviews-section .section-title {
    font-size: 36px;
    color: #333333;
    margin-bottom: 40px;
    text-align: center;
    font-weight: normal;
}

.reviews-slider-container {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

/* Кнопки навигации */
.review-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(197, 156, 108, 0.3);
    color: #c59c6c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.review-nav-btn:hover {
    background: #c59c6c;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.25);
    transform: scale(1.05);
}

/* Область видимости слайдера */
.reviews-slider-wrapper {
    flex-grow: 1;
    overflow: hidden;
    border-radius: 20px;
}

/* Список-слайдер */
.reviews-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.reviews-list::-webkit-scrollbar {
    display: none;
}

/* Карточка отзыва (Стекло) */
.review-slide {
    flex: 0 0 100%; /* Один отзыв занимает 100% ширины контейнера */
    scroll-snap-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 20px;
    padding: 50px;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
}

/* Левая часть: Текст отзыва */
.review-content-left {
    flex: 1;
    padding-right: 50px;
}

.review-title {
    font-size: 22px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 20px;
}

.review-text {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
}

/* Правая часть: Автор */
.review-content-right {
    flex-shrink: 0;
    width: 250px;
    text-align: center;
    padding-left: 50px;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.review-author {
    font-size: 18px;
    color: #333333;
    /* Заменяем тег <strong> на CSS свойство */
    font-weight: 600; 
    margin-bottom: 8px;
}

.review-position {
    font-size: 14px;
    color: #888888;
    /* Заменяем тег <strong> на CSS свойство, как на референсе */
    font-weight: 600;
}

/* Адаптив */
@media (max-width: 900px) {
    .review-slide {
        flex-direction: column;
        padding: 40px 30px;
        text-align: center;
    }
    
    .review-content-left {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .review-content-right {
        width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 30px;
    }
}

@media (max-width: 600px) {
    .review-nav-btn {
        display: none; /* На мобильных свайпаем */
    }
} 

.faq-section {
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1000px; /* Делаем блок чуть уже для комфортного чтения текста */
    margin: 0 auto;
}

.faq-section .section-title {
    font-size: 36px;
    color: #333333;
    margin-bottom: 40px;
    font-weight: normal;
}

/* Строгий список */
.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Карточка вопроса */
.faq-item {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(197, 156, 108, 0.15);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Состояние открытой карточки */
.faq-item.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(197, 156, 108, 0.4);
    box-shadow: 0 10px 30px rgba(197, 156, 108, 0.08);
}

/* Шапка вопроса (кликабельная) */
.faq-header {
    display: flex;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    gap: 25px;
    user-select: none;
}

.faq-number {
    font-size: 18px;
    color: #c59c6c; /* Фирменный цвет для нумерации */
    font-weight: 600;
    min-width: 24px;
}

.faq-question {
    flex-grow: 1;
    font-size: 18px;
    color: #333333;
    font-weight: 500;
    transition: color 0.3s ease;
}

.faq-header:hover .faq-question {
    color: #c59c6c;
}

/* Иконка Плюс/Минус на чистом CSS */
.faq-toggle {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}

.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    background: #c59c6c;
    transition: transform 0.3s ease, opacity 0.3s ease;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
}

.faq-toggle::before {
    width: 16px;
    height: 2px; /* Горизонтальная линия */
}

.faq-toggle::after {
    width: 2px;
    height: 16px; /* Вертикальная линия */
}

/* При открытии вертикальная линия исчезает (превращаясь в минус) */
.faq-item.active .faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

/* Тело ответа */
.faq-body {
    max-height: 0; /* Скрыто по умолчанию */
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 30px;
}

.faq-item.active .faq-body {
    max-height: 800px; /* Достаточное значение для длинного текста */
    /* Отступ слева 79px = padding шапки (30) + ширина номера (24) + gap (25) */
    padding: 0 30px 30px 79px; 
}

.faq-answer {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
}

/* Адаптив */
@media (max-width: 768px) {
    .faq-header {
        padding: 20px;
        gap: 15px;
    }
    
    .faq-item.active .faq-body {
        padding: 0 20px 20px 20px; /* На мобильных выравниваем текст по левому краю без сильного отступа */
    }
}

/* Контейнер для сетки клиентов */
.cliets__main {
    /* Задаем высоту для одной строки (примерно 120-140px в зависимости от твоих логотипов) */
    max-height: 75px; 
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Класс, который будет добавлять JS при клике */
.cliets__main.expanded {
    max-height: 1500px; /* С запасом для всех логотипов */
}

/* Стилизация кнопки "Показать все" */
.clients__show-more {
    display: block;
    margin: 40px auto 0;
    padding: 15px 40px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(197, 156, 108, 0.4);
    border-radius: 50px;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.clients__show-more:hover {
    background: #c59c6c;
    color: #ffffff;
    border-color: #c59c6c;
    box-shadow: 0 8px 20px rgba(197, 156, 108, 0.3);
    transform: translateY(-2px);
}

.seo-text-section {
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

.seo-text-section .section-title {
    font-size: 36px;
    color: #333333;
    margin-bottom: 50px;
    text-align: center;
    font-weight: normal;
}

/* Сетка для блоков текст/картинка */
.text-grid-row {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

/* Реверс блоков для шахматного порядка */
.text-grid-row.reverse {
    flex-direction: row-reverse;
}

/* Стеклянная карточка для текста */
.text-content.glass-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(197, 156, 108, 0.15);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.image-content {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.image-content img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-content:hover img {
    transform: scale(1.03);
}

/* Типографика внутри текстового блока */
.text-paragraph {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Замена заголовкам H3/H4 */
.text-subtitle {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
    margin: 30px 0 20px 0;
}

/* Списки */
.text-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.text-list > li {
    font-size: 16px;
    color: #555555;
    line-height: 1.5;
    position: relative;
    padding-left: 25px;
}

/* Кастомный золотистый маркер списка */
.text-list > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background-color: #c59c6c;
    border-radius: 50%;
}

/* Вложенный список */
.text-sublist {
    list-style: none;
    padding: 0 0 0 20px;
    margin: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text-sublist li {
    font-size: 15px;
    color: #666666;
    position: relative;
    padding-left: 15px;
}

/* Маркер вложенного списка (черточка) */
.text-sublist li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: #c59c6c;
}

/* Замена тегу <strong> */
.text-highlight {
    font-weight: 600;
    color: #333333;
}

/* Ссылка (CTA) внизу текста */
.text-cta-wrap {
    margin-top: 35px;
}

.text-cta-link {
    display: inline-block;
    color: #c59c6c;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px dashed rgba(197, 156, 108, 0.5);
    transition: all 0.3s ease;
}

.text-cta-link:hover {
    color: #b08757;
    border-bottom-color: transparent;
}

/* Адаптив */
@media (max-width: 992px) {
    .text-grid-row, 
    .text-grid-row.reverse {
        flex-direction: column;
        gap: 30px;
    }
    
    .image-content {
        width: 100%;
    }
    
    .text-content.glass-card {
        padding: 30px 20px;
    }
}

.margin-top {
    margin-top: 0px;
}
.margin-bottom {
    margin-bottom: 100px;
}

/* Общие стили для обоих попапов (Презентация и Заказ) */
.popup.popup-dev-utp,
.popup#popup-order-service {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Скрываем второй попап по умолчанию */
.popup#popup-order-service {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup#popup-order-service.active {
    opacity: 1;
    visibility: visible;
}

/* Карточки внутри попапов */
.popup-dev-utp .popup__form,
#popup-order-service .popup__form {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 24px;
    padding: 50px 40px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
    position: relative;
    text-align: center;
    font-family: 'Inter', sans-serif;
    transform: translateY(20px);
    animation: popupFadeIn 0.4s ease forwards;
}

@keyframes popupFadeIn {
    to { transform: translateY(0); }
}

/* Кнопки закрытия */
.popup-dev-utp .popup__close,
#popup-order-service .popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: #aaaaaa;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
}

.popup-dev-utp .popup__close:hover,
#popup-order-service .popup__close:hover {
    color: #c59c6c;
}

/* Типографика */
.popup-dev-utp .popup__form-title,
#popup-order-service .popup__form-title {
    font-size: 24px;
    color: #333333;
    margin-bottom: 15px;
    font-weight: 500;
}

.popup-dev-utp .popup__form-text,
#popup-order-service .popup__form-text {
    font-size: 15px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 35px;
}

/* Список кнопок */
.popup-dev-utp .popup__links,
#popup-order-service .popup__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Дизайн кнопок соцсетей (с ровным центрированием иконок) */
.popup-dev-utp .social-btn,
#popup-order-service .social-btn {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    text-decoration: none;
    color: #333333;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.popup-dev-utp .social-btn img,
#popup-order-service .social-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-left: auto; 
}

.popup-dev-utp .social-name,
#popup-order-service .social-name {
    width: 90px; 
    text-align: left;
    margin-left: 15px; 
    margin-right: auto;
}

.popup-dev-utp .social-btn:hover,
#popup-order-service .social-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(197, 156, 108, 0.4);
    box-shadow: 0 10px 25px rgba(197, 156, 108, 0.15);
    color: #c59c6c;
}

/* Специфичные стили для предпросмотра во втором попапе */
#popup-order-service .popup__order-summary {
    background: rgba(197, 156, 108, 0.05);
    border: 1px dashed rgba(197, 156, 108, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}

#popup-order-service .popup__summary-title {
    font-size: 18px;
    color: #333333;
    font-weight: 600;
    margin-bottom: 8px;
}

#popup-order-service .popup__summary-price {
    font-size: 16px;
    color: #c59c6c;
    font-weight: 500;
}
.js-order-btn {
    outline: none !important;
    box-shadow: none !important;
    /* Убедись, что нет никаких переходов, меняющих высоту при наведении */
    transition: transform 0.2s ease !important; 
}

.js-order-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Стили для нового попапа запроса КП */
#popup-offer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#popup-offer.active {
    opacity: 1;
    visibility: visible;
}

#popup-offer .popup__form {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 24px;
    padding: 40px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
}

#popup-offer .popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: #aaa;
    cursor: pointer;
}

#popup-offer .popup__form-title {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Стили для кнопок-ссылок внутри этого попапа */
#popup-offer .popup__links {
    list-style: none;
    padding: 0;
    margin: 25px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#popup-offer .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

#popup-offer .social-btn:hover {
    border-color: #c59c6c;
    color: #c59c6c;
    box-shadow: 0 5px 15px rgba(197, 156, 108, 0.1);
}
#popup-offer .social-btn {
    display: flex;
    align-items: center;
    padding: 16px 20px;
}
#popup-offer .social-btn img {
    width: 24px;
    height: 24px;
    margin-left: auto;
}
#popup-offer .social-name {
    width: 90px;
    text-align: left;
    margin-left: 15px;
    margin-right: auto;
}

#popup-tariff {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#popup-tariff.active {
    opacity: 1;
    visibility: visible;
}

#popup-tariff .popup__form {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(197, 156, 108, 0.2);
    border-radius: 24px;
    padding: 40px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
}

#popup-tariff .popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 32px;
    color: #aaa;
    cursor: pointer;
}

#popup-tariff .popup__form-title {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 600;
}

#popup-tariff .popup__form-text {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
}

/* Блок предпросмотра тарифа */
#popup-tariff .popup__order-summary {
    background: rgba(197, 156, 108, 0.05);
    border: 1px dashed rgba(197, 156, 108, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
}

#popup-tariff .popup__summary-title {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

#popup-tariff .popup__summary-price {
    font-size: 18px;
    color: #c59c6c;
    font-weight: 700;
}

/* Кнопки соцсетей */
#popup-tariff .popup__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#popup-tariff .social-btn {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

#popup-tariff .social-btn img {
    width: 24px;
    height: 24px;
    margin-left: auto;
}

#popup-tariff .social-name {
    width: 90px;
    text-align: left;
    margin-left: 15px;
    margin-right: auto;
}

#popup-tariff .social-btn:hover {
    border-color: #c59c6c;
    color: #c59c6c;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(197, 156, 108, 0.15);
}

/* Сетка для карточек (2 колонки) */
.approaches-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Дизайн карточки */
.approach-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 40px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.approach-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 156, 108, 0.4);
    box-shadow: 0 20px 40px rgba(197, 156, 108, 0.1);
}

/* Иконка */
.approach-card__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 156, 108, 0.05);
    border-radius: 16px;
}

.approach-card__icon img {
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
}

/* Типографика */
.approach-card__title {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.approach-card__text {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
}

/* Адаптив */
@media (max-width: 991px) {
    .approaches-grid {
        grid-template-columns: 1fr;
    }
}
/* Сетка для карточек (2 колонки) */
.approaches-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Дизайн карточки с эффектом стекла */
.approach-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 45px 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1; /* Чтобы текст был поверх цифры */
}

/* Ховер карточки */
.approach-card:hover {
    transform: translateY(-5px);
    border-color: rgba(197, 156, 108, 0.3);
    box-shadow: 0 20px 40px rgba(197, 156, 108, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

/* Стилизованная цифра-водяной знак */
.approach-card__number {
    position: absolute;
    top: -15px;
    right: 15px;
    font-size: 140px;
    font-weight: 800;
    line-height: 1;
    color: transparent; /* Делаем заливку цифры прозрачной */
    -webkit-text-stroke: 1px rgba(197, 156, 108, 0.25); /* Песочно-золотистая обводка */
    z-index: -1;
    transition: all 0.5s ease;
    user-select: none;
    pointer-events: none;
}

/* Анимация цифры при наведении на карточку */
.approach-card:hover .approach-card__number {
    -webkit-text-stroke: 1px rgba(197, 156, 108, 0.5);
    transform: scale(1.05) translate(-5px, 5px) rotate(-3deg);
}

/* Типографика */
.approach-card__title {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 15px;
    line-height: 1.3;
}

.approach-card__text {
    font-size: 15px;
    color: #666666;
    line-height: 1.6;
}

/* Адаптив для мобильных и планшетов */
@media (max-width: 991px) {
    .approaches-grid {
        grid-template-columns: 1fr;
    }
    .approach-card {
        padding: 35px 25px;
    }
    .approach-card__number {
        font-size: 110px;
    }
}

/* Сетка для дополнительных услуг */
.additional-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 35px;
}

/* Дизайн мини-карточки (эффект стекла) */
.additional-service-card {
    display: flex;
    align-items: center;
    gap: 20px; /* Увеличили отступ от новой крупной иконки */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

/* Эффект при наведении */
.additional-service-card:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(197, 156, 108, 0.4);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(197, 156, 108, 0.1);
}

.additional-service-card:hover .additional-service-card__title {
    color: #c59c6c;
}
.additional-service-card:hover .additional-service-card__icon img {
    transform: scale(1.1); /* Легкое увеличение иконки при наведении */
}
/* Увеличенная иконка с фоном */
.additional-service-card__icon {
    flex-shrink: 0;
    width: 75px;  /* Было 36px, сделали крупно */
    height: 75px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 156, 108, 0.05); /* Легкий песочный фон под иконкой */
    border-radius: 14px;
    padding: 10px; /* Воздух внутри рамки */
}

.additional-service-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Если иконки все равно кажутся мелкими, можно добавить scale(1.1) */
    transition: transform 0.3s ease;
}

/* Название услуги */
.additional-service-card__title {
    font-size: 16px; /* Чуть увеличили шрифт, чтобы соответствовал иконке */
    font-weight: 500;
    line-height: 1.3;
    color: #333333;
    transition: color 0.3s ease;
}

/* Адаптив */
@media (max-width: 1199px) {
    .additional-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .additional-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .additional-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Сетка для этапов разработки (2 колонки) */
.stages-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
}

/* Дизайн карточки этапа */
.stage-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

.stage-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(197, 156, 108, 0.3);
    box-shadow: 0 15px 35px rgba(197, 156, 108, 0.08);
}

/* Красивый номер этапа */
.stage-card__number {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(197, 156, 108, 0.1);
    color: #c59c6c;
    font-size: 18px;
    font-weight: 700;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
}

/* Текстовый блок */
.stage-card__content {
    display: flex;
    flex-direction: column;
}

.stage-card__title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 10px;
    line-height: 1.3;
}

.stage-card__text {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
}

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

@media (max-width: 575px) {
    .stage-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 25px 20px;
    }
}

/* Сетка (3 колонки) */
.site-types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Карточка сайта */
.site-type-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    height: 100%;
}

.site-type-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(197, 156, 108, 0.3);
    box-shadow: 0 20px 40px rgba(197, 156, 108, 0.08);
}

/* Заголовок */
.site-type-card__title {
    font-size: 22px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 25px;
    line-height: 1.3;
    text-align: center;
}

/* Стилизация чистых списков из визуального редактора */
.site-type-card__text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.site-type-card__text ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.site-type-card__text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c59c6c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Цена */
.site-type-card__price {
    font-size: 20px;
    font-weight: 700;
    color: #c59c6c;
    text-align: center;
    margin-bottom: 25px;
    padding-top: 20px;
    border-top: 1px dashed rgba(197, 156, 108, 0.3);
}

/* Кнопки */
.site-type-card__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-type-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
}

/* Кнопка "Подробнее" (прозрачная с обводкой) */
.site-type-btn--outline {
    background: transparent;
    border: 1px solid rgba(197, 156, 108, 0.5);
    color: #333333;
}

.site-type-btn--outline:hover {
    border-color: #c59c6c;
    color: #c59c6c;
    background: rgba(197, 156, 108, 0.05);
}

/* Кнопка "Заказать" (акцентная) */
.site-type-btn--primary {
    background: #c59c6c;
    border: 1px solid #c59c6c;
    color: #ffffff;
}

.site-type-btn--primary:hover {
    background: #b38b5c;
    border-color: #b38b5c;
    box-shadow: 0 5px 15px rgba(197, 156, 108, 0.3);
}

/* Адаптив */
@media (max-width: 1199px) {
    .site-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .site-types-grid {
        grid-template-columns: 1fr;
    }
}

/* Стеклянная выноска (Callout) */
.section-price-info {
    padding: 20px 0;
}

.glass-callout {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    max-width: 900px;
    margin: 0 auto; /* Центрируем блок по центру контейнера */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Стилизация текста, который подтягивается из файла */
.glass-callout__content h2,
.glass-callout__content h3,
.glass-callout__content .section-title {
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    line-height: 1.3;
}

.glass-callout__content p {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Кнопка "Связаться с менеджером" */
.glass-callout__btn {
    margin-top: 30px;
    background: #c59c6c;
    border: none;
    color: #ffffff;
    padding: 16px 36px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.glass-callout__btn:hover {
    background: #b38b5c;
    box-shadow: 0 5px 15px rgba(197, 156, 108, 0.3);
    transform: translateY(-2px);
}

/* Адаптив */
@media (max-width: 767px) {
    .glass-callout {
        padding: 35px 20px;
    }
    .glass-callout__content h2,
    .glass-callout__content h3 {
        font-size: 24px;
    }
}

/* Контейнер аккордеона */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 900px;
    margin: 40px auto 0;
}

/* Элемент вопроса */
.faq-item {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(197, 156, 108, 0.4);
    box-shadow: 0 10px 30px rgba(197, 156, 108, 0.08);
}

/* Шапка с вопросом */
.faq-item__header {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-item__title {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    padding-right: 20px;
    transition: color 0.3s ease;
}

.faq-item.active .faq-item__title {
    color: #c59c6c;
}

/* Иконка плюсика */
.faq-item__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: '';
    position: absolute;
    background: #c59c6c;
    border-radius: 2px;
    transition: transform 0.3s ease;
}

/* Вертикальная линия */
.faq-item__icon::before {
    top: 0;
    left: 11px;
    width: 2px;
    height: 24px;
}

/* Горизонтальная линия */
.faq-item__icon::after {
    top: 11px;
    left: 0;
    width: 24px;
    height: 2px;
}

/* Анимация крестика в минус при открытии */
.faq-item.active .faq-item__icon::before {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-item.active .faq-item__icon::after {
    transform: rotate(180deg);
}

/* Скрытый контент ответа */
.faq-item__content {
    max-height: 0; /* JS будет менять это значение */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item__inner {
    padding: 0 30px 30px;
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
}

.faq-item__inner p:last-child,
.faq-item__inner ul:last-child {
    margin-bottom: 0;
}

/* Стилизация списков внутри ответа (согласно твоим стандартам) */
.faq-item__inner ul {
    list-style: none;
    padding-left: 0;
}

.faq-item__inner ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
}

.faq-item__inner ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #c59c6c;
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 767px) {
    .faq-item__header {
        padding: 20px;
    }
    .faq-item__title {
        font-size: 16px;
    }
    .faq-item__inner {
        padding: 0 20px 20px;
    }
}

.pop_tit {
    color: #333333;
}
.title-bottom {
    margin-bottom: 80px;
}

/*ДЕТАЛЬНАЯ СТРАНИЦА РАЗРАБОТКИ */
/* Главный экран - чистая верстка */
/* Настройка Hero-блока для твоей верстки */
.dev-hero {
    margin: 40px auto;
}

.dev-hero__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    padding: 40px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dev-hero__content {
    flex: 1;
    min-width: 0; /* Чтобы текст не раздвигал блок */
}

.dev-hero__image {
    flex: 0 0 350px;
    text-align: center;
}

.dev-hero__image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    opacity: 0.85;
    filter: brightness(0.95) saturate(0.85);
    transition: all 0.4s ease;
}
.dev-hero__image img:hover {
    opacity: 1;
    filter: brightness(1) saturate(1);
}
.dev-hero__title {
    font-size: 32px;
    color: #4F3B44;
    margin-bottom: 20px;
    line-height: 1.2;
}

.dev-hero__desc {
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
    color: #4F3B44;
}

.dev-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dev-hero__btn {
    padding: 15px 30px;
    background: #DFAB47;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

.dev-hero__price {
    display: flex;
    flex-direction: column;
}

.dev-hero__price span {
    font-size: 12px;
    color: #888;
}

.dev-hero__price-val {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

/* Адаптив, чтобы на мобилках лев не улетал */
@media (max-width: 768px) {
    .dev-hero__wrapper {
        flex-direction: column;
        text-align: center;
    }
    .dev-hero__image {
        flex: 0 0 100%;
        margin-top: 20px;
    }
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.sector-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sector-card:hover {
    transform: translateY(-5px);
}

.sector-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 15px;
}

.sector-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

.sector-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sector-card li {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
}

.sector-card li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: #ffd700; /* Ваш фирменный цвет */
}

/* Контейнер для детального описания */
.dev-content__wrapper {
    margin-top: 40px;
}

/* Так как у нас идет H3 -> UL, мы делаем контейнер сеткой.
   Чтобы каждый блок H3+UL стал карточкой, мы используем 
   flex-контейнер для всего блока контента.
*/

/* Превращаем DETAIL_TEXT в гибкую сетку */
.dev-content__wrapper {
    display: block; 
    
}

/* Стилизация каждого блока (H3 и следующий за ним UL) */
/* ВАЖНО: В CSS нет селектора "родитель по дочернему", 
   поэтому, если нужно именно карточки, 
   лучше использовать небольшой JS-скрипт (ниже). */

/* Если хочешь просто стилизовать как карточки без JS: */
.dev-content__wrapper h3 {
    color: #fff;
    margin: 30px 0 15px;
    font-size: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.dev-content__wrapper ul {
    background: rgba(0, 0, 0, 0.3); /* Темнее для контраста */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    list-style: none;
}

.dev-content__wrapper li {
    color: #fff; /* Белый текст для читаемости */
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-size: 15px;
}

.dev-content__wrapper li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #ffcc00; /* Яркий акцент */
}
.sector-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
}
/* Контейнер для списка карточек, чтобы они стояли рядом */
/* Мы используем Flexbox, чтобы они не разваливались */
.sector-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px; /* Отступ между карточками */
    display: inline-block; /* Или flex, если хочешь рядом */
    width: 100%;
    max-width: 48%; /* Чтобы поместились 2 в ряд */
    vertical-align: top;
}

/* На случай, если хочешь 3 в ряд (как в макете) */
@media (min-width: 768px) {
    .sector-card {
        max-width: 32%;
        margin-right: 1.3%;
    }
}

.sector-card h3 {
    margin-top: 0;
    color: #fff;
    font-size: 18px;
}

.sector-card ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.sector-card li {
    margin-bottom: 8px;
    padding-left: 15px;
    position: relative;
}
/* 1. Стилизация списка преимуществ */
.dev-hero__desc ul {
    list-style: none; /* Убираем стандартные точки */
    padding: 0;
    margin: 20px 0;
}

/* Исправленный стиль для списка — теперь текст читается */
.dev-hero__desc li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    line-height: 1.4;
    color: #2b2b2b; /* Насыщенный тёмный цвет вместо белого */
    font-weight: 500; /* Добавили веса для четкости */
}

/* Маркеры оставляем золотыми, они контрастны */
.dev-hero__desc li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: #d4af37; 
    font-size: 14px;
}

/* 2. Стилизация блока цены (выделяем его) */
.dev-hero__price {
    margin: 25px 0;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05); /* Легкий эффект подложки */
    border-left: 4px solid #d4af37; /* Акцентная линия слева */
    border-radius: 4px;
    display: inline-block; /* Чтобы блок был по ширине контента */
    min-width: 250px;
}

.dev-hero__price-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
}

.dev-hero__price-val {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

/* 3. Отступ для кнопки, чтобы она не "прилипала" */
.dev-hero__btn {
    margin-top: 10px;
}

/* Принудительно белый фон для этого конкретного попапа */
#popup-discuss .popup__form {
    background: #fff !important;
    color: #333 !important;
    max-width: 450px !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

#popup-discuss .popup__form-title {
    color: #333 !important;
    margin-bottom: 20px;
}

/* Блок консультации с пунктирной рамкой */
.consultation-block {
    border: 1px dashed #d4af37 !important;
    padding: 15px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

.consultation-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.consultation-price {
    color: #d4af37;
}

/* Карточки мессенджеров */
.social-btn-white {
    display: block !important;
    border: 1px solid #eee !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
    color: #333 !important;
    text-decoration: none !important;
}

.social-btn-white:hover {
    border-color: #d4af37 !important;
}

.popup-desc {
    font-size: 14px;
    margin-bottom: 20px;
    color: #666 !important;
}
/* Выстраиваем список кнопок в столбик по центру */
#popup-discuss .popup__links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Расстояние между кнопками */
    margin-top: 25px !important;
}

/* Делаем сами кнопки аккуратными белыми карточками */
#popup-discuss .social-btn {
    display: flex !important;
    flex-direction: row !important; /* Иконка и текст в одну линию */
    align-items: center !important;
    justify-content: center !important; /* Центрируем содержимое */
    background: #fff !important;
    border: 1px solid #eaeaea !important; /* Светло-серая рамка */
    border-radius: 12px !important;
    padding: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Эффект при наведении на кнопку */
#popup-discuss .social-btn:hover {
    border-color: #d4af37 !important; /* Золотистая рамка при наведении */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* ОЧЕНЬ ВАЖНО: Делаем текст темным, чтобы его было видно на белом фоне */
#popup-discuss .social-name {
    color: #333 !important; 
    font-weight: 500 !important;
    font-size: 16px !important;
    margin-left: 12px !important; /* Отступ от иконки до текста */
}

/* Настраиваем размер иконок */
#popup-discuss .social-btn img {
    margin-bottom: 0 !important; /* Убираем лишние отступы, если они были */
    width: 24px !important;
    height: 24px !important;
}

/* Гарантируем, что заголовок и описание тоже темные */
#popup-discuss .popup__form-title,
#popup-discuss p {
    color: #333 !important;
}
/* Жестко фиксируем одинаковую ширину для всех кнопок */
#popup-discuss .popup__links {
    align-items: stretch !important; /* Заставляет все кнопки растянуться по ширине самой большой или на 100% контейнера */
    padding: 0 !important; /* Убираем стандартные отступы браузера для списков, если они есть */
    width: 100% !important;
}

#popup-discuss .social-btn-white {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* 1. Светлый фон затемнения (как на скрине 4) */
.popup#popup-discuss {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px) !important;
}

/* 2. Сама белая карточка попапа */
#popup-discuss .popup__form {
    background: #ffffff !important;
    color: #333 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    max-width: 420px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    text-align: center !important;
}

/* 3. Список кнопок (Скрин 3) */
#popup-discuss .popup__links {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Растягиваем элементы списка (Скрин 4) */
#popup-discuss .popup__links li {
    width: 100% !important;
    margin: 0 !important;
}

/* 4. Стили самой кнопки (Скрин 5) */
#popup-discuss .social-btn {
    display: flex !important;
    align-items: center !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    color: #333333 !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#popup-discuss .social-btn:hover {
    border-color: #d4af37 !important;
}

/* 5. Выравнивание иконки (Скрин 6) */
#popup-discuss .social-btn img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    margin-left: auto !important; /* Центрирует группу влево */
}

/* 6. Выравнивание текста (Скрин 7) */
#popup-discuss .social-name {
    width: 90px !important;
    text-align: left !important;
    margin-left: 15px !important;
    margin-right: auto !important; /* Центрирует группу вправо */
}

#popup-discuss .popup__form-title {
    color: #333 !important;
    margin-bottom: 20px !important;
}
/* Жестко возвращаем выравнивание списка по левому краю */
.dev-hero__desc ul,
.dev-hero__desc li,
.dev-hero__desc p {
    text-align: left !important;
}

/* Адаптив для мобилок (до 768px) */
@media (max-width: 768px) {
    .dev-hero__desc ul {
        /* Добавляем небольшой безопасный отступ слева, чтобы пули не уходили за край экрана */
        padding-left: 5px !important; 
        margin: 20px auto !important; /* Центрируем сам блок списка, если родитель по центру */
        max-width: 100%; 
    }
    
    .dev-hero__desc li {
        font-size: 14px; /* На мобилке можно чуть уменьшить шрифт списка для аккуратности */
        margin-bottom: 10px;
    }
}

/* Отступы для секции */
.dev-text-section {
    padding: 40px 0;
}

/* Стеклянная подложка для текста, чтобы он читался и был в стиле */
.dev-text-content.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    color: #333; /* Темный текст на случай, если фон сайта светлый */
    background: #fff; /* Если стеклянный эффект тут мешает чтению, оставим чистый белый */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Красивая типографика для контента из редактора */
.dev-text-content h2, .dev-text-content h3 {
    color: #222;
    margin: 30px 0 15px;
    font-weight: 600;
}

.dev-text-content h2:first-child {
    margin-top: 0;
}

.dev-text-content p {
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 16px;
    color: #444;
}

/* Стилизация списков из редактора */
.dev-text-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.dev-text-content ul li {
    margin-bottom: 10px;
    line-height: 1.5;
    position: relative;
    padding-left: 10px;
}

.dev-text-content ul li::before {
    content: "■";
    color: #d4af37;
    position: absolute;
    left: -10px;
    font-size: 12px;
    top: 3px;
}

/* Стилизация таблиц из редактора */
.dev-text-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.dev-text-content table th, .dev-text-content table td {
    border: 1px solid #eaeaea;
    padding: 12px 15px;
    text-align: left;
}

.dev-text-content table th {
    background: rgba(212, 175, 55, 0.1);
    font-weight: 600;
}
/* Блок Сферы применения */
.dev-spheres {
    padding: 50px 0;
}

.dev-spheres__title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 700;
    color: #333; /* Поменяй на #fff, если фон секции темный */
}

/* Сетка карточек */
.dev-spheres__grid {
    display: grid;
    /* Карточки сами подстроятся под ширину, минимум 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Сама карточка "стекло" */
.dev-spheres__card.glass-panel {
    background: #ffffff; /* Белый фон */
    border: 1px solid #eaeaea; /* Легкая рамка */
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Эффект при наведении */
.dev-spheres__card.glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: #d4af37; /* Твой фирменный цвет */
}

/* Блок иконки */
.dev-spheres__icon {
    width: 65px;
    height: 65px;
    background: rgba(212, 175, 55, 0.1); /* Легкий золотистый фон под иконку */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.dev-spheres__icon img {
    max-width: 35px;
    max-height: 35px;
    object-fit: contain;
}

/* Заголовок карточки */
.dev-spheres__card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

/* Список особенностей внутри карточки */
.dev-spheres__card-list ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.dev-spheres__card-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.4;
}

/* Кастомный маркер-галочка */
.dev-spheres__card-list li::before {
    content: "✓"; 
    color: #d4af37;
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 16px;
}
/* Стили ТОЛЬКО для списков внутри карточек "Сферы применения" */
.dev-spheres__card-list ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 15px 0 0 0 !important;
}

.dev-spheres__card-list li {
    position: relative !important;
    padding-left: 18px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #444 !important;
}

/* Аккуратный золотой маркер-точка (как в верхнем тексте) */
.dev-spheres__card-list li::before {
    content: "•" !important;
    color: #d4af37 !important;
    position: absolute !important;
    left: 0 !important;
    top: 0px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* На всякий случай: стили для обычных абзацев внутри карточки, чтобы они тоже выглядели чисто */
.dev-spheres__card-list p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #444 !important;
    margin-bottom: 10px !important;
}

.padding__top {
    padding-top: 20px;
}
.padding__top-50 {
    padding-top: 50px;
}

/* Блок FAQ */
.dev-faq {
    padding: 20px 0 60px;
}

.dev-faq__list {
    max-width: 900px;
    margin: 0 auto; /* Центрируем список, чтобы он не был слишком широким */
}

/* Карточка вопроса */
.dev-faq__item {
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden; /* Важно для обрезки контента при закрытии */
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
}

.dev-faq__item:hover {
    border-color: #d4af37;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

/* Шапка вопроса (кликабельная) */
.dev-faq__header {
    padding: 25px 30px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.dev-faq__question {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0;
    padding-right: 20px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.dev-faq__item.active .dev-faq__question {
    color: #d4af37; /* Вопрос становится золотым при открытии */
}

/* Иконка плюсика */
.dev-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.dev-faq__icon::before,
.dev-faq__icon::after {
    content: "";
    position: absolute;
    background: #d4af37;
    transition: transform 0.3s ease;
}

/* Горизонтальная линия плюса */
.dev-faq__icon::before {
    top: 11px;
    left: 0;
    width: 24px;
    height: 2px;
}

/* Вертикальная линия плюса */
.dev-faq__icon::after {
    top: 0;
    left: 11px;
    width: 2px;
    height: 24px;
}

/* Анимация плюсика в крестик (минус) при активном классе */
.dev-faq__item.active .dev-faq__icon::after {
    transform: rotate(90deg); /* Схлопываем в минус */
    opacity: 0;
}

/* Блок с ответом */
.dev-faq__content {
    max-height: 0; /* Изначально скрыто */
    overflow: hidden;
    transition: max-height 0.4s ease-out; /* Плавное открытие (работает с JS) */
}

/* Внутренний контейнер ответа (чтобы анимация высоты не дергалась из-за паддингов) */
.dev-faq__inner {
    padding: 0 30px 30px 30px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* Стилизация списков в ответах FAQ */
.dev-faq__inner ul {
    margin: 15px 0;
    padding-left: 0;
    list-style: none;
}

.dev-faq__inner li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
}

.dev-faq__inner li::before {
    content: "•";
    color: #d4af37;
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 18px;
}

/* МАКРОС ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ (до 768px) */
@media (max-width: 768px) {
    
    /* 1. Выстраиваем контейнер с карточками в одну колонку */
    .seo_tr-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important; /* Отступ между карточками */
    }

    /* 2. Перестраиваем саму карточку */
    .seo_tr-content {
        display: flex !important;
        flex-direction: column !important; /* Иконка над текстом */
        align-items: center !important;    /* Центрируем элементы по горизонтали */
        text-align: center !important;     /* Текст по центру */
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }

    /* 3. Настраиваем обертку для иконки */
    .seo_tr-content-img {
        margin: 0 0 15px 0 !important; /* Отступ только вниз, к заголовку */
        display: flex !important;
        justify-content: center !important;
        flex-shrink: 0 !important; /* Чтобы обертка не сплющивалась */
    }

    /* 4. Задаем жесткий размер самой картинке/иконке, чтобы не искажалась */
    .seo_tr-icon {
        width: 50px !important; 
        height: auto !important;
        object-fit: contain !important;
    }

    /* 5. Убираем лишние боковые отступы у текста (если они наследовались от десктопа) */
    .seo_tr-content-item {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Центрируем заголовок блока (опционально, чтобы всё смотрелось гармонично) */
    .seo_tr-title h2 {
        text-align: center !important;
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }
}

/* МАКРОС ДЛЯ ПЛАНШЕТОВ И МОБИЛОК (до 991px) */
@media (max-width: 991px) {
    
    /* 1. Выстраиваем общий контейнер в одну колонку на всю ширину */
    .seo__price-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* 2. Растягиваем сплющенные текстовые блоки (плашки) на все 100% */
    .seo__price-text,
    .seo__price-content-mess--text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Центрируем контент в блоке с мессенджерами */
    .seo__price-content-mess--text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 4. Центрируем главный заголовок блока */
    .section__seo-price h2 {
        text-align: center !important;
        font-size: 26px !important;
        margin-bottom: 20px !important;
        line-height: 1.3 !important;
    }

    /* 5. На планшетах соцсети ставим по центру */
    .about__main-socials {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 15px !important;
        margin-top: 15px !important;
    }
}

/* ДОПОЛНИТЕЛЬНО: ТОЛЬКО ДЛЯ ТЕЛЕФОНОВ (до 768px) */
@media (max-width: 768px) {
    /* На узких экранах растягиваем кнопки соцсетей на всю ширину */
    .about__main-socials {
        flex-direction: column !important;
    }

    .price-social-btn {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
    
    .section__seo-price h2 {
        font-size: 22px !important;
    }
}

/* МАКРОС ДЛЯ ЭКРАНОВ 862px И МЕНЬШЕ */
@media (max-width: 862px) {
    
    /* 1. Заставляем контейнер занимать всю ширину и выстраиваем в колонку */
    .seo__promotion-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important; /* Воздух между карточками */
    }

    /* 2. Жестко растягиваем сами карточки на 100% экрана */
    .seo__promotion-content-item {
        width: 100% !important;
        max-width: 100% !important; /* Убиваем десктопное ограничение */
        box-sizing: border-box !important;
    }

    /* 3. Выравниваем главный заголовок по центру для красоты */
    .section__seo-promotion h2 {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
}

/* МАКРОС ДЛЯ ПЛАНШЕТОВ И МОБИЛОК (до 930px) */
@media (max-width: 930px) {
    
    /* Возвращаем видимость и добавляем боковые отступы */
    .section__seo-advantag {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: visible !important; /* Убираем обрезку! */
        height: auto !important;      /* Заставляем блок растянуться по высоте контента */
    }

    .seo__advantag {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .section__seo-advantag h2 {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
}

/* МАКРОС ДЛЯ ПЛАНШЕТОВ И МОБИЛОК (до 991px) */
@media (max-width: 991px) {
    
    /* 1. Бьем наверняка: жестко задаем Grid из одной колонки */
    .seo__promotion-items {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Строго 1 колонка на всю ширину */
        width: 100% !important;
        gap: 20px !important;
    }

    /* 2. Убиваем любые ограничения Flexbox у карточек */
    .seo__promotion-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important; /* Заставляем тянуться до конца */
        flex: 1 1 100% !important;  /* Перебиваем настройки флексов темы */
        margin: 0 !important;       /* Сносим внешние отступы, если они смещали блок */
        box-sizing: border-box !important;
    }

    /* 3. Гарантируем, что сама белая плашка внутри тоже растянется */
    .seo__promotion-bg,
    .service-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4. Заголовок по центру */
    .section__seo-promotion h2 {
        text-align: center !important;
        margin-bottom: 25px !important;
    }
}

/* МАКРОС ДЛЯ УЗКИХ ЭКРАНОВ (смартфоны до 480px) */
@media (max-width: 480px) {
    
    /* 1. Обвязка кнопки должна быть гибкой */
    .seo-hero-utp__action-row {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Настраиваем саму кнопку */
    .seo-hero-utp__btn {
        width: 100% !important;          /* Растягиваем на всю доступную ширину */
        max-width: 100% !important;
        box-sizing: border-box !important;
        
        /* Главная магия для длинного текста: */
        white-space: normal !important;  /* Разрешаем тексту переноситься на 2 строки */
        height: auto !important;         /* Сбрасываем жесткую высоту, если она была */
        min-height: 50px !important;     /* Оставляем комфортную минимальную высоту для пальца */
        
        padding: 12px 10px !important;   /* Чуть уменьшаем боковые отступы */
        font-size: 14px !important;      /* Слегка уменьшаем шрифт, чтобы слово влезло */
        line-height: 1.3 !important;     /* Аккуратный межстрочный интервал, если строк будет две */
        text-align: center !important;
    }
}

/* МАКРОС ДЛЯ МОБИЛЬНОГО МЕНЮ (до 991px) */
@media (max-width: 991px) {
    
    .header__row { position: relative !important; }
    
    /* Скрываем строго тег nav, чтобы не убить список ul с таким же классом */
    .header__row > nav.header__nav { display: none !important; }

    /* 1. Главный контейнер (строго nav) */
    .header__row > nav.header__nav.active {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important; 
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        z-index: 9999 !important; 
        padding: 20px !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
        box-sizing: border-box !important;
        max-height: 80vh !important; 
        overflow-y: auto !important;
    }

    /* 2. Гарантируем видимость самого списка ul */
    .header__row > nav.header__nav.active > ul,
    .header__row > nav.header__nav.active ul#horizontal-multilevel-menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 3. Элементы списка */
    .header__row > nav.header__nav.active li {
        display: block !important;
        width: 100% !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 4. Все ссылки навигации */
    .header__row > nav.header__nav.active a {
        display: block !important;
        padding: 15px 0 !important;
        color: #333333 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-align: left !important;
        text-decoration: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        white-space: normal !important;
    }

    /* 5. Подменю (лесенка) */
    .header__row > nav.header__nav.active ul ul {
        position: static !important;
        display: block !important;
        padding-left: 20px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Ссылки внутри подменю */
    .header__row > nav.header__nav.active ul ul a {
        font-size: 14px !important;
        font-weight: 400 !important;
        color: #555555 !important;
        padding: 12px 0 !important;
        border-bottom: 1px dashed #e8e8e8 !important;
    }

    /* 6. Телефон в самый низ */
    .header__row > nav.header__nav.active .header__phone {
        margin-top: 58px;
        padding-top: 20px;
        border-top: 2px solid #d4af37;
    }

    .header__row > nav.header__nav.active .header__phone-num {
        border-bottom: none !important; 
        padding: 0 !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #333333 !important;
    }
    
    .header__row > nav.header__nav.active .header__phone-icon {
        display: none !important;
    }
}

@media (max-width: 991px) {
    /* 1. ГЛАВНЫЙ КОНТЕЙНЕР */
    nav.header__nav.active {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 30px !important;
    }

    #horizontal-multilevel-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. ПУНКТЫ И ССЫЛКИ (Убиваем обтекания и кирпичные фоны) */
    #horizontal-multilevel-menu li {
        width: 100% !important;
        display: block !important;
        position: relative !important;
    }

    #horizontal-multilevel-menu a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Текст и стрелка будут рядом */
        width: 100% !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Разделитель для удобства тапа */
        background: transparent !important;
        color: #333333 !important;
    }

    /* Отменяем коричневые фоны Битрикса */
    #horizontal-multilevel-menu li.selected > a,
    #horizontal-multilevel-menu li.active > a,
    #horizontal-multilevel-menu li:hover > a {
        background: transparent !important;
        color: #d4af37 !important;
    }

    /* 3. СТРЕЛКИ (Жестко привязаны к тексту через flex) */
    #horizontal-multilevel-menu li.parent > a::after {
        content: "▼" !important;
        font-size: 12px !important;
        margin-left: 10px !important;
        transition: transform 0.3s ease !important;
        position: static !important;
    }

    #horizontal-multilevel-menu li.parent.js-opened > a::after {
        transform: rotate(180deg) !important;
    }

    /* 4. ПОДМЕНЮ (Толкают контент вниз) */
    #horizontal-multilevel-menu li ul {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        padding-left: 20px !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Показываем подменю при клике (когда JS вешает класс) */
    #horizontal-multilevel-menu li.js-opened > ul {
        display: flex !important;
    }

    /* Ссылки внутри подменю делаем чуть аккуратнее */
    #horizontal-multilevel-menu li ul a {
        font-size: 14px !important;
        padding: 12px 0 !important;
        border-bottom: 1px dashed #eaeaea !important;
    }

    /* 5. ИДЕАЛЬНЫЙ ТЕЛЕФОН */
    .header__row > nav.header__nav.active .header__phone {
        position: relative;
        border-top: 2px solid #d4af37; /* Сама линия */
        width: 100% !important;
        margin-bottom: 0;
    }
}

/* МАКРОС ДЛЯ ДЕСКТОПНОГО ГЛАВНОГО МЕНЮ (от 992px) */
@media (min-width: 992px) {
    
    /* 1. Позиционируем родителя */
    .header__row > nav.header__nav ul > li {
        position: relative !important;
    }
/* Принудительно поднимаем всю шапку над остальным сайтом */
    .header, 
    .header__row {
        position: relative !important;
        /*z-index: 9999 !important;*/
    }
    /* 2. ЖЕСТКО ПЕРЕБИВАЕМ ИНЛАЙН-СТИЛИ БИТРИКСА */
    .header__row > nav.header__nav ul > li > ul {
        position: absolute !important;
        top: 100% !important;
        left: -20px !important;
        width: 700px !important; /* Принудительно расширяем меню */
        max-width: 90vw !important;
        
        background: #ffffff !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
        border-radius: 8px !important;
        padding: 30px 40px !important;
        z-index: 1000 !important;
        
        /* Скрываем по умолчанию */
        display: none !important;
    }

    /* 3. Показываем при наведении, используем flex для надежности колонок */
    .header__row > nav.header__nav ul > li:hover > ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px 30px !important; /* Отступы между колонками и строками */
        
        /* Плавное появление */
        animation: menuFadeIn 0.3s ease forwards;
    }

    /* 4. УБИВАЕМ КОРИЧНЕВЫЙ ФОН И СТРОИМ 2 КОЛОНКИ */
    .header__row > nav.header__nav ul > li > ul > li {
        width: calc(50% - 15px) !important; /* Строго две колонки */
        background: transparent !important; /* Сносим коричневый фон Битрикса */
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        height: auto !important;
    }

    /* 5. Настраиваем сами ссылки (убиваем фоны и выравниваем текст) */
    .header__row > nav.header__nav ul > li > ul > li > a {
        display: block !important;
        background: transparent !important; /* Сносим фон у активной ссылки */
        color: #333333 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        padding: 8px 0 !important;
        text-align: left !important;
        white-space: normal !important; /* Разрешаем тексту переноситься на новую строку */
        border: none !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
    }

    /* 6. Премиальный эффект наведения */
    .header__row > nav.header__nav ul > li > ul > li > a:hover {
        color: #d4af37 !important; /* Фирменный золотой */
        background: transparent !important;
        transform: translateX(5px) !important; /* Текст стильно отъезжает вправо */
    }
}

/* Ключевые кадры анимации (оставляем без изменений) */
@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* МАКРОС ДЛЯ ВЕРХНЕГО МЕНЮ ДЕСКТОП (от 992px) */
@media (min-width: 992px) {
    
    /* 1. Делаем родительские пункты точкой отсчета */
    .header__top .header__nav ul > li {
        position: relative !important;
    }

    /* 2. Скрываем стандартную битриксовую выпадашку */
    .header__top .header__nav ul > li > ul {
        display: none !important;
    }

    /* 3. Показываем аккуратную плашку при наведении */
    .header__top .header__nav ul > li:hover > ul {
        display: flex !important;
        flex-direction: column !important; /* Строго в одну колонку */
        position: absolute !important;
        top: 100% !important; /* Сразу под темной полосой */
        left: 0 !important;
        
        width: 240px !important; /* Фиксированная ширина для компактности */
        
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
        border-radius: 6px !important;
        padding: 15px 0 !important; /* Отступы только сверху и снизу */
        z-index: 10000 !important;
        
        /* Та же плавная анимация появления */
        animation: menuFadeIn 0.2s ease forwards;
    }

    /* 4. Сбрасываем лишние стили темы для пунктов списка */
    .header__top .header__nav ul > li > ul > li {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* 5. Оформляем сами ссылки внутри выпадашки */
    .header__top .header__nav ul > li > ul > li > a {
        display: block !important;
        background: transparent !important;
        color: #333333 !important; /* Темно-серый текст для контраста */
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 10px 25px !important; /* Просторные зоны для клика */
        text-align: left !important;
        text-decoration: none !important;
        border: none !important;
        white-space: normal !important;
        transition: all 0.2s ease !important;
    }

    /* 6. Эффект наведения: меняем цвет на золотой и слегка сдвигаем текст */
    .header__top .header__nav ul > li > ul > li > a:hover {
        color: #d4af37 !important;
       /* background: #fcfcfc !important;*//* Едва заметный серый фон для выделения строки */
        padding-left: 32px !important; /* Текст стильно отъезжает вправо */
    }
}

/* МАКРОС: ЖЕСТКО УБИРАЕМ ФОН АКТИВНОГО ПУНКТА ВЕРХНЕГО МЕНЮ */
@media (min-width: 992px) {
    
    /* 1. Снимаем фон с родительского li во всех состояниях Битрикса */
    .header__top .header__nav > ul > li,
    .header__top .header__nav > ul > li:hover,
    .header__top .header__nav > ul > li.selected,
    .header__top .header__nav > ul > li.active,
    .header__top .header__nav > ul > li.item-selected,
    .header__top .header__nav > ul > li.root-item-selected {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* 2. Снимаем фон с самой ссылки <a> внутри этого li */
    .header__top .header__nav > ul > li > a,
    .header__top .header__nav > ul > li > a:hover,
    .header__top .header__nav > ul > li.selected > a,
    .header__top .header__nav > ul > li.active > a,
    .header__top .header__nav > ul > li.item-selected > a,
    .header__top .header__nav > ul > li.root-item-selected > a {
        background: transparent !important;
        background-color: transparent !important;
    }

    /* 3. Подсвечиваем текст золотым, если мы навели мышку или находимся на этой странице */
    .header__top .header__nav > ul > li:hover > a,
    .header__top .header__nav > ul > li.selected > a,
    .header__top .header__nav > ul > li.active > a,
    .header__top .header__nav > ul > li.item-selected > a,
    .header__top .header__nav > ul > li.root-item-selected > a {
        color: #d4af37 !important;
        
    }
}
@media (max-width: 1200px) {
  .section-comanda {
  margin-bottom: 80px;
    }   
}

@media (max-width: 420px) {
    
    .dev-text-content.glass-panel h2 {
        font-size: 30px;
    }
}



/* ===== БЛОК УТП: РАЗРАБОТКА САЙТОВ ===== */
.dev-utp-hero {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0 50px 0;
    text-align: center;
}

.dev-utp-hero__header {
    margin-bottom: 50px;
}

.dev-utp-hero__title {
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

.dev-utp-hero__subtitle {
    font-size: 20px;
    color: #555555;
    margin-bottom: 30px;
    font-weight: 500;
}

.dev-utp-hero__desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
}

/* Сетка карточек преимуществ */
.dev-utp-hero__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 50px;
    text-align: left;
}

.dev-utp-feature {
    display: flex;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.65); /* Легкий эффект стекла */
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dev-utp-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.dev-utp-feature__icon {
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.15); /* Мягкая золотая тень */
}

.dev-utp-feature__text {
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
}

.dev-utp-feature__text strong {
    display: block;
    font-size: 17px;
    color: #333333;
    margin-bottom: 6px;
}

/* Подвал с кнопкой */
.dev-utp-hero__footer {
    background: #ffffff;
    padding: 35px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.dev-utp-hero__footer p {
    font-size: 16px;
    color: #444444;
    margin: 0;
    max-width: 750px;
    line-height: 1.5;
}

.dev-utp-btn {
    background: #d4af37;
    color: #ffffff;
    border: none;
    padding: 18px 45px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dev-utp-btn:hover {
    background: #c19b2d;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .dev-utp-hero__features {
        grid-template-columns: 1fr;
    }
    .dev-utp-hero__title {
        font-size: 32px !important;
    }
    .dev-utp-hero__footer {
        padding: 30px 20px;
    }
}

/* ===== СТРАНИЦА КОНТАКТЫ (BENTO GRID) ===== */
.contacts-grid-section {
    margin-top: 60px;
    margin-bottom: 80px;
}

.contacts-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.contact-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.contact-card--full {
    grid-column: 1 / -1; /* Растягиваем на всю ширину сетки */
}

/* Иконки в карточках */
.contact-card__icon {
    width: 50px;
    height: 50px;
    background: #fdfaf2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.15);
}

.contact-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 20px;
    margin-top: 0;
}

.contact-card__body {
    flex-grow: 1;
}

/* Блок с телефонами */
.contact-item {
    margin-bottom: 15px;
}

.contact-item--margin {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #e8e8e8;
}

.contact-link {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #d4af37;
}

.contact-hint {
    display: block;
    font-size: 13px;
    color: #888888;
}

/* Текст адреса */
.contact-address {
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* Сетка мессенджеров */
.contact-socials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.contact-socials-grid .social-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 15px;
    background: #fcfcfc;
    border-radius: 8px;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid #f0f0f0;
}

.contact-socials-grid .social-btn:hover {
    background: #ffffff;
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

.contact-socials-grid .social-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Реквизиты */
.req-wrapper {
    display: flex;
    flex-direction: column;
}

.req-name {
    font-size: 18px;
    color: #333333;
    margin-bottom: 20px;
}

.req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки для реквизитов */
    gap: 15px 25px;
}

.req-list li {
    font-size: 14px;
    color: #555555;
    position: relative;
    padding-left: 18px;
}

.req-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: #d4af37;
    border-radius: 50%;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .contacts-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .req-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .contacts-bento {
        grid-template-columns: 1fr;
    }
    .req-list {
        grid-template-columns: 1fr;
    }
    .contact-socials-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== БЛОК УСЛУГ (СТРАНИЦА КОНТАКТЫ) ===== */
.services-premium-section {
    margin-bottom: 80px;
}

.services-premium-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Сама карточка */
.service-premium-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Эффект наведения на карточку */
.service-premium-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
}

/* Декоративная золотая линия сверху (появляется при наведении) */
.service-premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #d4af37;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.service-premium-card:hover::before {
    transform: scaleX(1);
}

/* Шапка карточки */
.service-premium-card__header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* Декоративные цифры 01, 02... */
.service-premium-card__icon {
    font-size: 38px;
    font-weight: 800;
    color: rgba(212, 175, 55, 0.15); /* Полупрозрачный золотой */
    line-height: 1;
    font-family: Arial, sans-serif; 
}

/* Контейнер заголовков */
.service-premium-card__titles {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.service-premium-card__title,
.service-premium-card__title p { /* Подстраховка от оберток Битрикса */
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.service-premium-card__subtitle,
.service-premium-card__subtitle p,
.service-premium-card__subtitle span {
    font-size: 13px !important;
    color: #d4af37 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Тело карточки со списком */
.service-premium-card__body {
    flex-grow: 1;
}

.service-premium-card__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Оформление каждого пункта списка */
.service-premium-card__list li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 12px !important;
    font-size: 15px !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    background: transparent !important;
}

.service-premium-card__list li:last-child {
    margin-bottom: 0 !important;
}

/* Кастомные золотые галочки вместо точек */
.service-premium-card__list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 15px !important;
    height: 15px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 991px) {
    .services-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-premium-grid {
        grid-template-columns: 1fr;
    }
    .service-premium-card {
        padding: 25px 20px;
    }
}

/* ===== ПРЕМИАЛЬНЫЙ ПОПАП (ОСТАВИТЬ ЗАЯВКУ) ===== */

/* 1. Затемнение фона и размытие сайта (Glassmorphism) */
.popup {
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* 2. Само модальное окно */
.popup__form {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 40px 35px !important;
    max-width: 480px !important;
    width: 90% !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important; /* Легкая золотая окантовка */
    position: relative !important;
    text-align: center !important;
}

/* 3. Крестик закрытия */
.popup__close {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    font-size: 32px !important;
    color: #aaaaaa !important;
    cursor: pointer !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    line-height: 1 !important;
    font-weight: 300 !important;
}

.popup__close:hover {
    color: #d4af37 !important; /* Золотой при наведении */
    transform: rotate(90deg) !important; /* Стильная прокрутка крестика */
}

/* 4. Заголовки и текст */
.popup__form-title,
.popup .pop_tit {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.popup__form-text,
.popup__form p {
    font-size: 15px !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    padding: 0 10px !important;
}

/* Блок с ценой для калькулятора (если попап вызывается оттуда) */
.popup__order-summary {
    background: #fdfaf2 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 25px !important;
    border: 1px dashed rgba(212, 175, 55, 0.4) !important;
}
.popup__summary-title { color: #555555 !important; font-size: 14px !important; margin-bottom: 5px !important; }
.popup__summary-price { color: #333333 !important; font-size: 20px !important; font-weight: 700 !important; }

/* 5. Сетка кнопок-мессенджеров */
.popup__links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* Ровные 2 колонки */
    gap: 15px !important;
}

.popup__links li {
    width: 100% !important;
    margin: 0 !important;
}

/* Оформление самих кнопок (универсально для разных шаблонов) */
.form__socials,
.popup__links .social-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    border-radius: 10px !important;
    padding: 14px 10px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Иконки мессенджеров */
.form__socials img,
.popup__links .social-btn img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

/* Текст кнопок */
.form__socials a,
.popup__links .social-btn .social-name {
    text-decoration: none !important;
    color: #333333 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: color 0.3s ease !important;
    margin: 0 !important;
}

/* Эффект наведения на кнопку */
.form__socials:hover,
.popup__links .social-btn:hover {
    background: #ffffff !important;
    border-color: #d4af37 !important;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.15) !important;
    transform: translateY(-3px) !important;
}

.form__socials:hover a,
.popup__links .social-btn:hover .social-name {
    color: #d4af37 !important;
}

.form__socials:hover img,
.popup__links .social-btn:hover img {
    transform: scale(1.1) !important;
}

/* 6. Адаптивность для телефонов */
@media (max-width: 480px) {
    .popup__links {
        grid-template-columns: 1fr !important; /* На смартфонах выстраиваем в 1 колонку */
    }
    .popup__form {
        padding: 35px 25px !important;
    }
    .popup__form-title {
        font-size: 22px !important;
    }
}

/* ===== СТРАНИЦА "О КОМПАНИИ" ===== */

/* 1. Блок с информацией (превращаем в премиум-карточку) */
.section-seo-info.container {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 50px 60px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    margin: 60px auto 80px auto !important;
    max-width: 900px !important;
}

/* Делаем из обычных абзацев красивый список с галочками */
.section-seo-info.container p {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    margin-bottom: 25px !important;
    padding-left: 35px !important;
    position: relative !important;
    text-align: left !important; /* Убираем выравнивание по центру */
}

.section-seo-info.container p:last-child {
    margin-bottom: 0 !important;
}

/* Золотые галочки слева от каждого абзаца */
.section-seo-info.container p::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* 2. Очистка блока Сертификатов от коричневого фона */
.section-certificates {
    margin-bottom: 80px !important;
}

/* Убиваем фон и рамки, если они заданы контейнеру элемента в Битриксе */
.section-certificates__row .news-item,
.section-certificates__row > div {
    background: transparent !important;
    border: none !important;
    padding: 10px !important;
}

/* Красивое оформление самих картинок сертификатов */
.section-certificates__row img {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid #f5f5f5 !important;
    background: #fff !important; /* Оставляем белый фон под сам сертификат */
}

/* Эффект "поднятия" сертификата при наведении */
.section-certificates__row img:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2) !important;
}

/* 3. Адаптивность для смартфонов */
@media (max-width: 768px) {
    .section-seo-info.container {
        padding: 35px 25px !important;
        margin-top: 40px !important;
    }
    .section-seo-info.container p {
        font-size: 16px !important;
    }
}
/* ===== ОФОРМЛЕНИЕ ТЕКСТА "О КОМПАНИИ" (БЕЛЫЙ ЛИСТ С ГАЛОЧКАМИ) ===== */

/* Создаем премиальную белую карточку (подложку) */
.section-seo-info.container {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 50px 70px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    margin: 60px auto 80px auto !important;
    max-width: 900px !important;
}

/* Оформляем список */
.about-company-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.about-company-list li {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    margin-bottom: 20px !important;
    padding-left: 35px !important;
    position: relative !important;
    text-align: left !important;
}

.about-company-list li:last-child {
    margin-bottom: 0 !important;
}

/* Золотые галочки */
.about-company-list li::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 4px !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Акценты в тексте */
.about-company-list li strong {
    color: #222222 !important;
    font-weight: 700 !important;
}

/* Адаптивность для смартфонов */
@media (max-width: 768px) {
    .section-seo-info.container {
        padding: 35px 25px !important;
        margin-top: 40px !important;
    }
    .about-company-list li {
        font-size: 16px !important;
    }
}

/* Стили для табов калькулятора */
.calc-page-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
    justify-content: center;
}

.lev-btn {
    padding: 12px 24px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.lev-btn--primary {
    background-color: #d4a770;
    color: #ffffff;
    box-shadow: 0 10px 30px rgba(212, 167, 112, 0.3);
}

.lev-btn--outline {
    background-color: transparent;
    color: #1a1a1a;
    border: 1px solid #d4a770;
}

.lev-btn--outline:hover {
    background-color: #fcf8f3;
}

/* --- БЛОК: КАЛЬКУЛЯТОР --- */
.seo-calculator-section {
    padding: 60px 0;
}

.seo-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.seo-calc-info .section-title {
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.seo-calc-desc {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
}

/* Карточка калькулятора */
.seo-calc-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #eaeaea;
}

/* Вкладки (Табы) */
.seo-calc-tabs {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    margin-bottom: 30px;
}

.seo-calc-tab {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 800;
    color: #888888;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.seo-calc-tab.active {
    color: #222222;
}

.seo-calc-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #d4af37;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.seo-calc-tab.active::after {
    transform: scaleX(1);
}

/* Формы и инпуты */
.seo-calc-panel {
    display: none;
    animation: fadeIn 0.4s ease;
}
.seo-calc-panel.active {
    display: block;
}

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

.seo-calc-label {
    display: block;
    font-size: 14px;
    color: #555555;
    margin-bottom: 10px;
    margin-top: 25px;
}
.seo-calc-label .req { color: #d4af37; }

.seo-calc-select,
.seo-calc-input {
    width: 100%;
    padding: 15px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    font-size: 16px;
    color: #222222;
    background: #fdfdfd;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.seo-calc-select:focus,
.seo-calc-input:focus {
    outline: none;
    border-color: #d4af37;
}

/* Чекбоксы */
.seo-calc-checkbox {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 15px;
    color: #222222;
    user-select: none;
    padding-left: 30px;
    margin-top: 25px;
}

.seo-calc-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.seo-calc-checkbox .checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.seo-calc-checkbox:hover input ~ .checkmark {
    border-color: #d4af37;
}

.seo-calc-checkbox input:checked ~ .checkmark {
    background-color: #d4af37;
    border-color: #d4af37;
}

.seo-calc-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.seo-calc-checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Иконка 'i' */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #a58a77;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    margin-left: 8px;
    cursor: help;
}

/* Стилизация ползунка (Range) */
.seo-calc-range-wrap {
    margin-top: 15px;
}

.seo-calc-range {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: #eaeaea;
    border-radius: 2px;
    outline: none;
    margin: 15px 0;
}

.seo-calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #d4af37;
    cursor: pointer;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.1s ease;
}

.seo-calc-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.seo-calc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888888;
}

/* Кнопка отправки */
.seo-calc-submit {
    display: block;
    width: 100%;
    margin-top: 40px;
    background: transparent;
    color: #222222;
    border: 2px solid #222222;
    padding: 20px;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.seo-calc-submit:hover {
    background: #222222;
    color: #ffffff;
    border-color: #222222;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(34,34,34,0.15);
}

.mt-20 { margin-top: 20px; }

/* Адаптив */
@media (max-width: 991px) {
    .seo-calc-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .seo-calc-info {
        text-align: center;
    }
    .seo-calc-info .section-title {
        font-size: 32px;
    }
}
@media (max-width: 575px) {
    .seo-calc-box {
        padding: 25px 20px;
    }
    .seo-calc-tab {
        font-size: 11px;
        padding: 15px 5px;
    }
}

/* Hero блок калькулятора */
.lev-calc-hero {
    padding: 60px 0 20px;
    text-align: center;
}

.lev-calc-hero__title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
    line-height: 1.2;
}

.lev-calc-hero__desc {
    font-size: 18px;
    color: #555555;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .lev-calc-hero {
        padding: 40px 0 10px;
    }
    
    .lev-calc-hero__title {
        font-size: 32px;
    }
    
    .lev-calc-hero__desc {
        font-size: 16px;
    }
}

/* Отступы всей секции */
.lev-text-page {
    padding-bottom: 80px;
}

/* Заголовок H1 */
.lev-text-page__title {
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
    text-align: center;
    line-height: 1.2;
}

/* Белая карточка с контентом */
.lev-text-page__content {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    padding: 48px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    max-width: 1000px;
    margin: 0 auto;
}

/* Базовый текст из редактора */
.lev-text-page__content p {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Заголовки разделов в тексте */
.lev-text-page__content h2,
.lev-text-page__content h3,
.lev-text-page__content .lev-text-h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 32px 0 16px;
    line-height: 1.3;
}

/* Списки с золотой галочкой */
.lev-text-page__content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.lev-text-page__content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
}

.lev-text-page__content ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 6px;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #d4a770;
    border-right: 2px solid #d4a770;
    transform: rotate(45deg);
}

/* Обертка блока */
.lev-cases-wrapper {
    margin-bottom: 60px;
    margin-top: 80px;
}

.lev-cases-title {
    font-size: 36px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 40px;
}

/* Компенсация отступов для слайдера */
.lev-cases-slider {
    margin: 0 -15px;
}

.lev-cases-slide {
    padding: 15px;
    height: auto; /* Позволяет карточкам тянуться на всю высоту слайда */
}

/* Сама карточка */
.lev-case-card {
    background-color: #ffffff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.lev-case-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* Картинка с эффектом zoom при наведении */
.lev-case-card__img-wrap {
    display: block;
    width: 100%;
    height: 240px; /* Фиксированная высота картинки */
    overflow: hidden;
    background-color: #f9f9f9;
}

.lev-case-card__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.lev-case-card:hover .lev-case-card__img-wrap img {
    transform: scale(1.05);
}

/* Контентная часть */
.lev-case-card__body {
    padding: 24px 24px 0 24px;
    flex-grow: 1; /* Растягивает тело, прижимая футер к низу */
    display: flex;
    flex-direction: column;
}

.lev-case-card__title {
    font-size: 20px;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.lev-case-card__title:hover {
    color: #d4a770;
}

/* Полоса с возрастом сайта */
.lev-case-card__age {
    font-size: 14px;
    color: #555555;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.lev-case-card__label {
    font-weight: 600;
    color: #d4a770;
    margin-right: 4px;
}

.lev-case-card__task {
    font-size: 14px;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Обрезаем длинный текст задачи (максимум 4 строки) */
.lev-case-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
}

/* Подвал карточки с кнопкой */
.lev-case-card__footer {
    padding: 0 24px 24px 24px;
    margin-top: auto; /* Жестко прижимает кнопку к низу карточки */
}

.lev-case-card__btn {
    display: flex;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
}

@media (max-width: 400px) {
    .stage-title {
        font-size: 18px;
    }
}

@media (max-width: 400px) {
    /* 1. Глобально зажимаем внутренние контейнеры калькулятора */
    .calculator-section .calculator-grid,
    .calculator-section .calc-column,
    .calculator-section .calc-options-list {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* 2. Адаптируем кнопки типов сайта и тарифов */
    .calculator-section .calc-chip {
        padding: 12px 15px;
        font-size: 13px;
        white-space: normal; /* Разрешаем тексту переноситься на 2 строки */
        width: 100%; /* Растягиваем на всю ширину для удобства нажатия */
        box-sizing: border-box;
    }

    /* 3. Главный фикс: Список опций с тумблерами */
    .calculator-section .calc-options-list li {
        width: 100%;
        box-sizing: border-box;
        padding: 15px; 
        display: flex;
        flex-wrap: wrap; /* Разрешаем цене спрыгнуть вниз, если название слишком длинное */
        align-items: center;
        gap: 10px;
    }

    /* 4. Текст опции (например, "1С-Битрикс...") */
    .calculator-section .calc-option-name {
        flex: 1; /* Занимает всё доступное место */
        min-width: 0; /* Критически важно: не дает длинному тексту распирать флекс-контейнер */
        font-size: 13px;
        line-height: 1.4;
        word-wrap: break-word; /* Жесткий перенос длинных слов */
        white-space: normal;
    }

    /* 5. Цена (прижимаем ее вправо) */
    .calculator-section .calc-option-price {
        font-size: 13px;
        margin-left: auto;
        white-space: nowrap; /* Цена всегда в одну строчку */
    }
}

@media screen and (max-width: 768px) {
    /* Скрываем стандартную шапку таблицы */
    table thead {
        display: none;
    }
    
    /* Делаем строки блоками-карточками */
    table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid #e1c8a9; /* Цвет обводки под твой дизайн */
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Делаем ячейки блоками и выравниваем текст вправо */
    table td {
        display: block;
        text-align: right;
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
    }
    
    table td:last-child {
        border-bottom: 0;
    }
    
    /* Выводим содержимое data-label слева */
    table td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-align: left;
        padding-right: 15px;
        color: #333;
    }
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* =====================================================================
   Блок "Прозрачный цикл работ" на главной (под первым экраном)
   ===================================================================== */
.seo-lev-transparency-box {
    width: 100%; /* Вытягиваем на всю ширину контейнера */
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 40px 50px; /* Просторные отступы, чтобы плашка "дышала" */
    border-radius: 12px; /* Современное скругление углов */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); /* Мягкая эстетичная тень */
    margin: 20px auto 40px auto;
}

.seo-lev-transparency-box__title {
    font-size: 22px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 15px;
    display: block;
    padding-left: 0; 
    background: none;
}

/* Принудительно глушим любые псевдоэлементы (галочки), 
   если они вдруг глобально наследуются от других классов */
.seo-lev-transparency-box__title::before,
.seo-lev-transparency-box__title::after {
    display: none !important;
}

.seo-lev-transparency-box__desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .seo-lev-transparency-box {
        padding: 25px 20px;
    }
    .seo-lev-transparency-box__title {
        font-size: 18px;
        margin-bottom: 10px;
    }
    .seo-lev-transparency-box__desc {
        font-size: 15px;
    }
}

/* =====================================================================
   Блок "Статистика (10+ лет, 30+ клиентов)" на главной
   ===================================================================== */
.seo-lev-stats-box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    max-width: 1200px; /* Растягиваем на всю ширину */
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); /* Такая же мягкая тень */
    margin: 0 auto 40px auto;
    gap: 30px;
}

.seo-lev-stats-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fafafa; /* Очень легкий свежий фон вместо грязного градиента */
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 30px 20px;
    transition: all 0.3s ease;
}

.seo-lev-stats-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    background: #ffffff;
    border-color: #e5e5e5;
}

/* Стили для самих цифр (10+, 30+) */
.seo-lev-stats-val {
    font-size: 46px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 10px;
    line-height: 1;
}

/* Стили для подписей */
.seo-lev-stats-desc {
    font-size: 16px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* Адаптив для мобилок */
@media (max-width: 768px) {
    .seo-lev-stats-box {
        flex-direction: column;
        padding: 25px 20px;
        gap: 20px;
    }
    .seo-lev-stats-val {
        font-size: 36px;
    }
    .seo-lev-stats-desc {
        font-size: 15px;
    }
}

/* =====================================================================
   Блок тегов (Продвижение сайтов, На Битриксе и т.д.)
   ===================================================================== */
.seo-lev-tags-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); /* Единая тень с прошлыми блоками */
    margin: 0 auto 40px auto;
}

/* Ломаем старую сетку компонента и выстраиваем ровный Flexbox */
.seo-lev-tags-box .tarif-nav__row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* Очищаем кнопки от грязных градиентов и делаем их чистыми */
.seo-lev-tags-box .tarif-nav__row a {
    background: #f8f9fa !important; /* Светло-серый, свежий фон */
    border: 1px solid #e9ecef !important;
    color: #333333 !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important; /* Убиваем старые тени */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex: 1 1 calc(33.333% - 15px) !important; /* 3 колонки */
    max-width: calc(33.333% - 15px) !important;
    min-width: 220px !important;
    min-height: 60px !important; /* Единая высота для всех кнопок */
    box-sizing: border-box !important;
}

/* Ховер-эффект с фирменным акцентом */
.seo-lev-tags-box .tarif-nav__row a:hover {
    background: #ffffff !important;
    border-color: #d4af37 !important; /* Ваш золотой/бронзовый цвет */
    color: #d4af37 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15) !important;
}

/* Стилизация кнопки "СКРЫТЬ / ПОКАЗАТЬ ВСЕ" */
.seo-lev-tags-btn {
    background: transparent !important;
    border: 1px solid #cccccc !important;
    color: #666666 !important;
    padding: 12px 35px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    box-shadow: none !important;
}

.seo-lev-tags-btn:hover {
    border-color: #333333 !important;
    color: #333333 !important;
    background: #f5f5f5 !important;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 768px) {
    .seo-lev-tags-box {
        padding: 25px 20px;
    }
    .seo-lev-tags-box .tarif-nav__row a {
        flex: 1 1 100% !important; /* На мобилках по 1 в ряд */
        max-width: 100% !important;
    }
}

/* =====================================================================
   Блок "Наши преимущества" (8 карточек)
   ===================================================================== */
.seo-lev-adv-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 0 auto 50px auto;
}

.seo-lev-adv-header h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin-top: 0;
    margin-bottom: 40px;
}

/* Настраиваем CSS-сетку и инициализируем счетчик для цифр */
.seo-lev-adv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 0;
    counter-reset: adv-counter;
}

/* Сама карточка */
.seo-lev-adv-item {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.seo-lev-adv-item:hover {
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border-color: #e5e5e5;
}

/* Генерация и оформление фоновых цифр 1, 2, 3... */
.seo-lev-adv-number {
    position: absolute;
    left: 20px;
    bottom: -15px; /* Сдвигаем цифру немного вниз для эффекта */
    z-index: 1;
}

.seo-lev-adv-number::before {
    counter-increment: adv-counter;
    content: counter(adv-counter);
    font-size: 140px;
    font-weight: 700;
    color: #222222;
    opacity: 0.04; /* Полупрозрачность, чтобы не мешала тексту */
    line-height: 1;
}

/* Обертка для текста, чтобы текст был поверх цифры */
.seo-lev-adv-text {
    position: relative;
    z-index: 2;
}

.seo-lev-adv-title {
    font-size: 19px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 12px;
    line-height: 1.3;
}

.seo-lev-adv-content {
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 768px) {
    .seo-lev-adv-box {
        padding: 30px 20px;
    }
    .seo-lev-adv-header h2 {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .seo-lev-adv-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Блок "Услуги" (Аккордеон на главной)
   ===================================================================== */
.seo-lev-services-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 0 auto 50px auto;
}

.seo-lev-services-header h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin-top: 0;
    margin-bottom: 40px;
}

/* Сетка в 2 колонки */
.seo-lev-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start; /* Запрещает соседним блокам растягиваться по высоте */
}

/* Оформление самой карточки (убираем градиент) */
.seo-lev-services-item {
    background: #f8f9fa; /* Свежий светло-серый фон */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.seo-lev-services-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Шапка аккордеона (кликабельная) */
.seo-lev-services-title {
    list-style: none; /* Убирает стандартный треугольник */
    cursor: pointer;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    user-select: none;
}

/* Убираем дефолтный маркер для Safari */
.seo-lev-services-title::-webkit-details-marker,
.seo-lev-services-title::marker {
    display: none;
}

.seo-lev-services-name {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
}

/* Красивая стрелочка вместо стандартного треугольника */
.seo-lev-services-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* Когда аккордеон открыт — переворачиваем стрелочку и добавляем бордер */
.seo-lev-services-item[open] .seo-lev-services-icon {
    transform: rotate(-135deg);
    margin-top: 5px;
}

.seo-lev-services-item[open] .seo-lev-services-title {
    border-bottom: 1px solid #e9ecef;
}

/* Выпадающее содержимое */
.seo-lev-services-dropdown {
    padding: 25px;
    background: #ffffff;
}

/* Подпись "От 50 000 руб." выравниваем вправо */
.seo-lev-services-subtitle {
    font-size: 15px;
    font-weight: 600;
    color: #d4af37; /* Акцентный золотой цвет */
    margin-bottom: 15px;
    text-align: right;
}

/* Оформление буллитов (списка) */
.seo-lev-services-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.seo-lev-services-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 16px;
    color: #555555;
    line-height: 1.5;
}

/* Золотые кружочки-маркеры для списка */
.seo-lev-services-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #d4af37;
}
/* Эффект наведения на шапку аккордеона */
.seo-lev-services-title:hover {
    background-color: #f1f3f5; /* Делаем фон чуть плотнее */
    color: #d4af37; /* Текст подсвечивается золотым */
}

/* Подсветка стрелочки при наведении */
.seo-lev-services-title:hover .seo-lev-services-icon {
    border-color: #d4af37;
}

/* Возвращаем темный цвет тексту, если аккордеон уже открыт, чтобы не пестрило */
.seo-lev-services-item[open] .seo-lev-services-title {
    border-bottom: 1px solid #e9ecef;
    color: #333333; 
}
/* Базовые стили для ссылок в списке */
.seo-lev-services-list li a {
    color: #555555; 
    text-decoration: none; 
    transition: color 0.3s ease; 
}

/* Ховер-эффект для ссылок */
.seo-lev-services-list li a:hover {
    color: #d4af37; /* Подсветка фирменным акцентным цветом */
}
/* Адаптив для телефонов */
@media (max-width: 768px) {
    .seo-lev-services-box {
        padding: 30px 20px;
    }
    .seo-lev-services-grid {
        grid-template-columns: 1fr;
    }
    .seo-lev-services-name {
        font-size: 18px;
    }
}

/* =====================================================================
   Блок "Как мы работаем" (Табы и карточки этапов)
   ===================================================================== */
.seo-lev-work-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 0 auto 50px auto;
}

.seo-lev-work-header h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 15px 0;
}

/* Оформление подзаголовка */
.seo-lev-work-subtitle p,
.seo-lev-work-subtitle {
    text-align: center;
    font-size: 18px;
    color: #555555;
    margin: 0 0 35px 0;
}

/* Выстраиваем кнопки табов */
.seo-lev-work-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

/* Изящно перебиваем старые стили tarif-nav__item за счет веса селектора */
div.seo-lev-work-box .seo-lev-work-tabs a.tarif-nav__item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #333333;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: none;
    display: inline-block;
    margin: 0;
}

div.seo-lev-work-box .seo-lev-work-tabs a.tarif-nav__item:hover {
    background: #ffffff;
    border-color: #d4af37;
    color: #d4af37;
}

/* Активная вкладка */
div.seo-lev-work-box .seo-lev-work-tabs a.tarif-nav__item.active {
    background: #d4af37;
    border-color: #d4af37;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

/* Сетка для карточек (выстроены друг под другом) */
.seo-lev-work-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Сама карточка */
.seo-lev-work-card {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 30px;
    transition: all 0.3s ease;
}

.seo-lev-work-card:hover {
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
    border-color: #e5e5e5;
}

/* Шапка карточки ("1 неделя: Погружение...") */
.seo-lev-work-card-header {
    font-size: 20px;
    font-weight: 700;
    color: #222222;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e9ecef;
}

/* Сброс тегов <p>, если они прилетают из визуального редактора Битрикса */
.seo-lev-work-card-header p {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

/* Текст этапа */
.seo-lev-work-card-body {
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
}

.seo-lev-work-card-body p {
    margin-bottom: 10px;
}

.seo-lev-work-card-body p:last-child {
    margin-bottom: 0;
}

/* Выделение слова "Результат" жирным */
.seo-lev-work-card-body strong, 
.seo-lev-work-card-body b {
    color: #222222;
    font-weight: 600;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .seo-lev-work-box {
        padding: 30px 20px;
    }
    .seo-lev-work-header h2 {
        font-size: 26px;
    }
    .seo-lev-work-subtitle p, 
    .seo-lev-work-subtitle {
        font-size: 16px;
    }
    div.seo-lev-work-box .seo-lev-work-tabs a.tarif-nav__item {
        width: 100%;
        text-align: center;
    }
    .seo-lev-work-card {
        padding: 20px;
    }
}

/* =====================================================================
   Блок "Разбор трудностей и решения" (Вместо старой таблицы)
   ===================================================================== */
.seo-lev-problem-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 0 auto 50px auto;
}

/* Заголовок (сброс тега <p> из инклуда) */
.seo-lev-problem-header h2,
.seo-lev-problem-header h2 p {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 40px 0;
}

.seo-lev-problem-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Строка с проблемой и решением */
.seo-lev-problem-item {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    transition: box-shadow 0.3s ease;
}

.seo-lev-problem-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* Левая часть (Проблема) */
.seo-lev-problem-bad {
    flex: 0 0 40%;
    background: #f8f9fa; /* Светло-серый фон */
    padding: 25px;
    border-right: 1px solid #e9ecef;
    position: relative;
}

/* Правая часть (Решение) */
.seo-lev-problem-good {
    flex: 1;
    background: #ffffff;
    padding: 25px;
    position: relative;
}

/* Мелкие подписи над текстом (Проблема / Решение) */
.seo-lev-problem-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
}

.seo-lev-problem-bad .seo-lev-problem-label {
    color: #999999;
}

.seo-lev-problem-good .seo-lev-problem-label {
    color: #d4af37; /* Акцентный золотой */
}

/* Основной текст */
.seo-lev-problem-text {
    font-size: 16px;
    line-height: 1.5;
    color: #333333;
}

/* Легкий акцент на решение */
.seo-lev-problem-good .seo-lev-problem-text {
    font-weight: 500;
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .seo-lev-problem-box {
        padding: 30px 20px;
    }
    .seo-lev-problem-header h2,
    .seo-lev-problem-header h2 p {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .seo-lev-problem-item {
        flex-direction: column;
    }
    .seo-lev-problem-bad {
        flex: auto;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        padding: 20px;
    }
    .seo-lev-problem-good {
        padding: 20px;
    }
}

/* =====================================================================
   Блок "О компании" (Текст и соцсети)
   ===================================================================== */
.seo-lev-about-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); /* Единая тень для всех новых блоков */
    margin: 0 auto 50px auto;
    text-align: center; 
}

/* Надзаголовок ("О компании") */
.seo-lev-about-label p,
.seo-lev-about-label {
    font-size: 20px;
    color: #555555;
    margin: 0 0 15px 0;
}

/* Главный заголовок H2 (сброс стилей тега <p>, если он летит из инклуда) */
.seo-lev-about-title h2,
.seo-lev-about-title h2 p {
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 30px 0;
    line-height: 1.3;
}

/* Текстовое описание */
.seo-lev-about-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #444444;
    max-width: 1000px; /* Немного ограничиваем ширину строки текста для читаемости */
    margin: 0 auto 40px auto;
}

.seo-lev-about-desc p {
    margin-bottom: 15px;
}

.seo-lev-about-desc p:last-child {
    margin-bottom: 0;
}

/* Блок с социальными сетями */
.seo-lev-about-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* Оформление ссылок на соцсети */
.seo-lev-about-social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #555555;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.seo-lev-about-social-link img {
    width: 32px;
    height: 32px;
    transition: transform 0.3s ease;
}

/* Эффекты при наведении */
.seo-lev-about-social-link:hover {
    color: #d4af37; /* Подсветка фирменным золотым */
}

.seo-lev-about-social-link:hover img {
    transform: scale(1.1); /* Легкое увеличение иконки */
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .seo-lev-about-box {
        padding: 30px 20px;
    }
    .seo-lev-about-label p,
    .seo-lev-about-label {
        font-size: 16px;
    }
    .seo-lev-about-title h2,
    .seo-lev-about-title h2 p {
        font-size: 24px;
    }
    .seo-lev-about-desc {
        font-size: 15px;
    }
    .seo-lev-about-socials {
        gap: 15px;
        flex-direction: column;
        align-items: flex-start; /* Выравниваем сами иконки по левому краю */
        width: fit-content;      /* Ограничиваем ширину контейнера по самому длинному слову */
        margin: 0 auto;          /* Ровно центрируем весь этот блок по середине экрана */
    }
}

/* =====================================================================
   Блок-полоса "ХОЧУ ТАКЖЕ" (Увеличение высоты)
   ===================================================================== */
.section-acall {
    /* Добавляем внутренние отступы, чтобы растянуть темный фон по высоте */
    padding-top: 40px; 
    padding-bottom: 40px; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Убираем дефолтные отступы у обертки заголовка, если они есть */
.section-title-acall {
    margin: 0;
    padding: 0;
}

/* Делаем саму кликабельную зону чуть больше для удобства */
.section-title-acall #acall {
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px; /* При необходимости здесь же можно чуть увеличить шрифт */
}
/* =====================================================================
   Стили для текста "ХОЧУ ТАКЖЕ"
   ===================================================================== */
.section-title-acall #acall {
    display: inline-block;
    font-size: 36px; /* Значительно увеличиваем размер шрифта */
    font-weight: 700; /* Делаем текст жирным */
    letter-spacing: 2px; /* Слегка раздвигаем буквы для читаемости */
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff; /* Убеждаемся, что цвет белый */
    transition: opacity 0.3s ease;
}

/* Легкий эффект при наведении */
.section-title-acall #acall:hover {
    opacity: 0.8;
}

/* Адаптив, чтобы на мобильных телефонах текст не был слишком огромным */
@media (max-width: 768px) {
    .section-title-acall #acall {
        font-size: 24px;
        letter-spacing: 1px;
    }
}

/* =====================================================================
   Блок "FAQ / Вопрос-ответ" 
   ===================================================================== */
.seo-lev-faq-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 0 auto 50px auto;
}

.seo-lev-faq-header h2,
.seo-lev-faq-header h2 p {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 40px 0;
}

/* Список вопросов */
.seo-lev-faq-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Аккуратное расстояние между вопросами */
    margin-bottom: 40px;
}

/* Плашка отдельного вопроса */
.seo-lev-faq-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.seo-lev-faq-item:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border-color: #d4af37; /* Легкая золотая подсветка при наведении */
}

/* Кликабельный заголовок (вопрос) */
.seo-lev-faq-title {
    list-style: none;
    cursor: pointer;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    user-select: none;
    transition: color 0.3s ease;
}

/* Скрываем стандартный треугольник аккордеона */
.seo-lev-faq-title::-webkit-details-marker,
.seo-lev-faq-title::marker {
    display: none;
}

.seo-lev-faq-title:hover {
    color: #d4af37;
}

/* Кастомная иконка "плюс" */
.seo-lev-faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 20px;
}

.seo-lev-faq-icon::before,
.seo-lev-faq-icon::after {
    content: "";
    position: absolute;
    background-color: #999999;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Вертикальная палочка плюса */
.seo-lev-faq-icon::before {
    top: 0;
    bottom: 0;
    left: 7px;
    width: 2px;
}

/* Горизонтальная палочка плюса */
.seo-lev-faq-icon::after {
    left: 0;
    right: 0;
    top: 7px;
    height: 2px;
}

/* Подсветка плюса при наведении */
.seo-lev-faq-title:hover .seo-lev-faq-icon::before,
.seo-lev-faq-title:hover .seo-lev-faq-icon::after {
    background-color: #d4af37;
}

/* Анимация плюса в минус при открытии */
.seo-lev-faq-item[open] .seo-lev-faq-icon::before {
    transform: rotate(90deg); /* Схлопываем вертикальную палочку */
}

.seo-lev-faq-item[open] .seo-lev-faq-title {
    border-bottom: 1px solid #e9ecef;
    color: #222222;
}

/* Текст ответа */
.seo-lev-faq-content {
    padding: 25px;
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
    background: #ffffff;
}

/* Кнопка "ОСТАЛИСЬ ВОПРОСЫ?" (Усилили селектор, чтобы перебить старый белый цвет) */
.seo-lev-faq-btn-wrap {
    text-align: center;
}

div.seo-lev-faq-btn-wrap a.seo-lev-faq-btn {
    display: inline-block;
    background: transparent;
    border: 2px solid #333333;
    color: #333333;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

div.seo-lev-faq-btn-wrap a.seo-lev-faq-btn:hover {
    background: #333333;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Адаптив для телефонов */
@media (max-width: 768px) {
    .seo-lev-faq-box {
        padding: 30px 20px;
    }
    .seo-lev-faq-header h2,
    .seo-lev-faq-header h2 p {
        font-size: 24px;
        margin-bottom: 25px;
    }
    .seo-lev-faq-title {
        font-size: 16px;
        padding: 15px 20px;
    }
    .seo-lev-faq-content {
        padding: 20px;
        font-size: 15px;
    }
    .seo-lev-faq-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =====================================================================
   Блок "Другие услуги" (Управление через существующую кнопку)
   ===================================================================== */

/* Центрируем кнопку внутри блока */
.other-services {
    text-align: center;
}

/* Скрываем все элементы внутри .other-services-items начиная с 4-го */
.other-services-items > *:nth-child(n+4) {
    display: none;
}

/* Когда появляется класс .is-expanded, показываем скрытые карточки */
.other-services-items.is-expanded > *:nth-child(n+4) {
    display: flex; /* Поменяй на block, если элементы блочные */
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Стилизация твоей кнопки .other-services-toggle в едином стиле сайта */
.other-services-toggle {
    display: inline-block;
    background: transparent;
    border: 2px solid #333333;
    color: #333333;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.other-services-toggle:hover {
    background: #333333;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* =====================================================================
   Страница "Регионы" (Сетка городов из инфоблока №43)
   ===================================================================== */
.seo-lev-regions-box {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 12px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05);
    margin: 40px auto;
}

.seo-lev-regions-header {
    text-align: center;
    margin-bottom: 40px;
}

.seo-lev-regions-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #222222;
    margin: 0 0 15px 0;
}

.seo-lev-regions-header p {
    font-size: 17px;
    color: #666666;
    margin: 0;
}

/* Сетка элементов списка Битрикс (.news-list по умолчанию) */
.seo-lev-regions-box .news-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки городов */
    gap: 20px;
}

/* Карточка отдельного города */
.seo-lev-regions-box .news-item {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.seo-lev-regions-box .news-item:hover {
    background: #ffffff;
    border-color: #d4af37; /* Фирменная золотая рамка при наведении */
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.12);
    transform: translateY(-3px);
}

/* Название города */
.seo-lev-regions-box .news-item .news-item-title a,
.seo-lev-regions-box .news-item h3 a {
    font-size: 19px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.seo-lev-regions-box .news-item:hover .news-item-title a,
.seo-lev-regions-box .news-item:hover h3 a {
    color: #d4af37;
}

/* Текст / описание в карточке (если заполнено) */
.seo-lev-regions-box .news-item .preview_text {
    font-size: 14px;
    color: #666666;
    margin-top: 10px;
    line-height: 1.5;
}

/* Адаптив для планшетов и телефонов */
@media (max-width: 1024px) {
    .seo-lev-regions-box .news-list {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на планшетах */
    }
}

@media (max-width: 768px) {
    .seo-lev-regions-box {
        padding: 30px 20px;
    }
    .seo-lev-regions-header h1 {
        font-size: 26px;
    }
    .seo-lev-regions-box .news-list {
        grid-template-columns: 1fr; /* 1 колонка на смартфонах */
    }
}

/* 1. Добавляем ссылке внутренний отступ справа, чтобы текст не доходил до края */
#horizontal-multilevel-menu li ul a {
  position: relative!important;
  padding-right: 15px!important;
}

/* 2. Корректируем позицию самой стрелки */
.header__nav li.parent > a::after {
    right: 0!important; /* Прижимаем стрелку к правому краю ссылки, а не используем -2% */
}
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2b231f; /* Тёмный оттенок в тон дизайну сайта */
    color: #ffffff;
    padding: 16px 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    display: none; /* Скрыто по умолчанию, пока не сработает скрипт */
    font-family: inherit;
    box-sizing: border-box;
}

.cookie-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cookie-banner p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1;
}

.cookie-banner a {
    color: #d4af37; /* Фирменный золотистый цвет */
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cookie-banner a:hover {
    color: #ffffff;
}

.cookie-btn {
    background-color: #d4af37;
    color: #2b231f;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.cookie-btn:hover {
    background-color: #ffffff;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .cookie-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .cookie-btn {
        width: 100%;
        text-align: center;
    }
}