/************************************************

Stylesheet: Global Stylesheet

*************************************************/
/*********************
POSTS & CONTENT STYLES
*********************/
.page-title .vcard {
  border: 0px;
  padding: 0px; }

.byline {
  color: #999; }

.entry-content img {
  max-width: 100%;
  height: auto; }

.entry-content .alignleft, .entry-content img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left; }

.entry-content .alignright, .entry-content img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right; }

.entry-content .aligncenter, .entry-content img.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both; }

.entry-content video, .entry-content object {
  max-width: 100%;
  height: auto; }

.entry-content pre {
  background: #eee;
  border: 1px solid #cecece;
  padding: 10px; }

.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px; }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

.post-password-form input[type="submit"] {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  font-family: inherit;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #1779ba;
  color: #fefefe; }
  [data-whatinput='mouse'] .post-password-form input[type="submit"] {
    outline: 0; }
  .post-password-form input[type="submit"]:hover, .post-password-form input[type="submit"]:focus {
    background-color: #14679e;
    color: #fefefe; }

/*********************
IMAGE GALLERY STYLES
*********************/
.gallery {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-right: -15px;
  margin-left: -15px; }

.gallery::before, .gallery::after {
  content: ' ';
  display: table; }

.gallery::after {
  clear: both; }

.gallery.gallery-columns-1 > dl {
  width: 100%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-1 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-1 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-2 > dl {
  width: 50%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-2 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-2 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-3 > dl {
  width: 33.33333%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-3 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-3 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-4 > dl {
  width: 25%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-4 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-4 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-5 > dl {
  width: 20%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-5 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-5 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-6 > dl {
  width: 16.66667%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-6 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-6 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-7 > dl {
  width: 14.28571%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-7 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-7 > dl:last-child:not(:first-child) {
    float: right; }

.gallery.gallery-columns-8 > dl {
  width: 12.5%;
  float: left;
  padding-right: 0.625rem;
  padding-left: 0.625rem; }
  @media print, screen and (min-width: 40em) {
    .gallery.gallery-columns-8 > dl {
      padding-right: 0.9375rem;
      padding-left: 0.9375rem; } }
  .gallery.gallery-columns-8 > dl:last-child:not(:first-child) {
    float: right; }

.gallery dl {
  width: 100%;
  float: left;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem; }

.gallery dl:last-child:not(:first-child) {
  float: right; }

/*********************
PAGE NAVI STYLES
*********************/
.page-navigation {
  margin-top: 1rem; }

/*********************
COMMENT STYLES
*********************/
#comments .commentlist {
  margin-left: 0px; }

#respond ul {
  margin-left: 0px; }

.commentlist li {
  position: relative;
  clear: both;
  overflow: hidden;
  list-style-type: none;
  margin-bottom: 1.5em;
  padding: 0.7335em 10px; }
  .commentlist li:last-child {
    margin-bottom: 0; }
  .commentlist li ul.children {
    margin: 0; }

.commentlist li[class*=depth-] {
  margin-top: 1.1em; }

.commentlist li.depth-1 {
  margin-left: 0;
  margin-top: 0; }

.commentlist li:not(.depth-1) {
  margin-left: 10px;
  margin-top: 0;
  padding-bottom: 0; }

.commentlist .vcard {
  margin-left: 50px; }
  .commentlist .vcard cite.fn {
    font-weight: 700;
    font-style: normal; }
  .commentlist .vcard time {
    float: right; }
    .commentlist .vcard time a {
      color: #999;
      text-decoration: none; }
      .commentlist .vcard time a:hover {
        text-decoration: underline; }
  .commentlist .vcard img.avatar {
    position: absolute;
    left: 10px;
    padding: 2px;
    border: 1px solid #cecece;
    background: #fff; }

.commentlist .comment_content p {
  margin: 0.7335em 0 1.5em;
  font-size: 1em;
  line-height: 1.5em; }

.commentlist .comment-reply-link {
  float: right; }

/*********************
COMMENT FORM STYLES
*********************/
.respond-form {
  margin: 1.5em 10px;
  padding-bottom: 2.2em; }
  .respond-form form {
    margin: 0.75em 0; }
    .respond-form form li {
      list-style-type: none;
      clear: both;
      margin-bottom: 0.7335em; }
      .respond-form form li label,
      .respond-form form li small {
        display: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url],
    .respond-form form textarea {
      padding: 3px 6px;
      background: #efefef;
      border: 2px solid #cecece;
      line-height: 1.5em; }
      .respond-form form input[type=text]:focus,
      .respond-form form input[type=email]:focus,
      .respond-form form input[type=url]:focus,
      .respond-form form textarea:focus {
        background: #fff; }
      .respond-form form input[type=text]:invalid,
      .respond-form form input[type=email]:invalid,
      .respond-form form input[type=url]:invalid,
      .respond-form form textarea:invalid {
        outline: none;
        border-color: #fbc2c4;
        background-color: #f6e7eb;
        -ms-box-shadow: none;
        box-shadow: none; }
    .respond-form form input[type=text],
    .respond-form form input[type=email],
    .respond-form form input[type=url] {
      max-width: 400px;
      min-width: 250px; }
    .respond-form form textarea {
      resize: none;
      width: 97.3%;
      height: 150px; }

#comment-form-title {
  margin: 0 0 1.1em; }

#allowed_tags {
  margin: 1.5em 10px 0.7335em 0; }

.nocomments {
  margin: 0 20px 1.1em; }

/*********************
SIDEBARS & ASIDES
*********************/
.sidebar li {
  list-style: none; }

.widget ul {
  margin: 0; }

/*********************
FOOTER STYLES
*********************/
.footer {
  clear: both;
  margin-top: 1em; }

/*********************
VISUAL EDITOR STYLES
*********************/
body#tinymce {
  margin: 20px; }

/*********************
PLUGIN STYLES
*********************/
.gform_body ul {
  list-style: none outside none;
  margin: 0; }
.row{
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;
}
/*# sourceMappingURL=style.css.map */


/* Home 1st screen */

/* ==========================================================================
   1. ОБЩИЙ КОНТЕЙНЕР СЕКЦИИ (Объединяет левую и правую части)
   ========================================================================== */
.marketing-section {
  display: flex;
  flex-direction: column; /* На мобильных: всё строго в один вертикальный ряд */
  gap: 24px;
  padding: 16px;
  background-color: #111111; /* Базовый темный фон всей страницы */
  font-family: Involve, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      /* Ставим общую фоновую картинку */
    background-image: url('/wp-content/uploads/2026/09/bg-scaled.webp');
 background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* КРИТИЧЕСКИ ВАЖНО: картинка застывает на экране при скролле */
}

/* ==========================================================================
   2. СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (По умолчанию)
   ========================================================================== */

/* Блок с главным заголовком */
.main-title-block {
  display: flex;
  flex-direction: column;
}
.main-title-block h2 {
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
}

/* Стрелочка "Все услуги", видимая только на мобильных */
.mobile-only-arrow {
  margin: 16px 0;
  text-align: center;
  color: #888888;
  font-size: 0.9rem;
}

/* Ссылки (Блог, Календарь) — на мобильных уходят в самый низ страницы */
.bottom-links-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.bottom-links-block a {
  color: #ffffff;
  text-decoration: underline;
  font-size: 0.95rem;
  opacity: 0.8;
}
.bottom-links-block a:hover {
  opacity: 1;
}

/* Контейнер с карточками услуг на мобильных */
.right-services-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ==========================================================================
   3. СТИЛИ УНИВЕРСАЛЬНОЙ КАРТОЧКИ УСЛУГ (Для всех устройств)
   ========================================================================== */
.service-card {
  --accent-color: #ff3b30; /* Цвет по умолчанию (красный) */
  
  /* Эффект матового стекла (размывает фоновую картинку за собой) */
  background-color: rgba(26, 26, 26, 0.8); 
  -webkit-backdrop-filter: blur(12px); 
  backdrop-filter: blur(12px);
  
  color: #ffffff;
  padding: 30px; 
  box-sizing: border-box;
  height: 100%;
}

/* Заголовок внутри карточки */
.service-card .service-title {
  font-size: 1.4rem;
  font-weight: 400;
  margin: 0 0 20px 0;
  position: relative;
  padding-bottom: 25px;
}

/* Квадратный маркер под заголовком */
.service-card .service-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background-color: var(--accent-color);
}

/* Сужающийся конус-линия под заголовком */
.service-card .service-title::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: 3px;
  width: 140px;
  height: 4px;
  background: linear-gradient(to right, var(--accent-color), transparent); 
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Список элементов */
.service-card .service-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Пункт списка */
.service-card .service-list li {
  font-size: 0.95rem;
  line-height: 1.4;
  position: relative;
  padding-left: 18px;
  color: #e0e0e0;
  break-inside: avoid;
}

/* Точка у каждого пункта */
.service-card .service-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: -1px;
  color: #ffffff;
  font-size: 1.2rem;
}


/* ==========================================================================
   4. ДЕСКТОПНАЯ ВЕРСИЯ: ПЛАНШЕТЫ И СРЕДНИЕ ЭКРАНЫ (От 640px / 40em)
   ========================================================================== */
@media screen and (min-width: 40em) { 
  
  /* Главная сетка: левая колонка 5 частей (5/12), правая — 7 частей (7/12) */
  .marketing-section {
    display: grid;
    grid-template-columns: 5fr 7fr; 
    grid-template-rows: auto 1fr; /* Строка для заголовка и строка для ссылок */
    align-items: start;
    gap: 40px;
    padding: 0;
	padding-left: 40px;
  }
	.main-title-block{
		margin-bottom: 100px;
	}
  /* Скрываем мобильную стрелочку */
  .mobile-only-arrow {
    display: none;
  }

  /* --- ПОЗИЦИОНИРОВАНИЕ И ПРИЛИПАНИЕ ЛЕВОЙ ЧАСТИ --- */

  /* Главный заголовок залипает при скролле */
  .main-title-block {
    grid-column: 1;
    grid-row: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Минимальный отступ от верхнего края экрана при залипании */
    z-index: 10;
  }

  /* Нижние ссылки прижимаются к низу левой части и тоже залипают */
  .bottom-links-block {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    align-self: end; 
    position: -webkit-sticky;
    position: sticky;
    bottom: 40px; /* Отступ от нижнего края экрана */
    z-index: 10;
  }

  /* --- СЕТКА ДЛЯ КАРТОЧЕК СПРАВА (Для промежутка 640px - 1024px) --- */
  
  .right-services-column {
    grid-column: 2;
    grid-row: 1 / span 2; /* Занимает обе строки справа */
    display: grid;
    /* НА ПЛАНШЕТАХ: карточки идут строго по 1 в ряд (в одну широкую колонку) */
    grid-template-columns: 1fr; 
    /* 1px рамки между карточками за счет gap и фонового цвета разделителя */
    gap: 1px; 
    background-color: rgba(255, 255, 255, 0.15); 
    /* Внешний контур всей правой плитки */
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden; 
  }

  /* Внутренние списки карточек на планшетах тоже пока держим в 1 колонку, 
     чтобы текст не сжимался слишком сильно */
  .service-card .service-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

/* ==========================================================================
   4.1. ДЕСКТОПНАЯ ВЕРСИЯ: БОЛЬШИЕ МОНИТОРЫ (От 1024px / 64em)
   ========================================================================== */
@media screen and (min-width: 64em) { 
  
  /* Переключаем правую колонку в режим плитки: теперь карточки встают по 2 в ряд */
  .right-services-column {
    grid-template-columns: 1fr 1fr; 
  }

  /* Вот теперь, на больших экранах, внутренние списки услуг 
     внутри карточек красиво делим на 2 текстовые колонки */
  .service-card .service-list {
    display: block; 
    column-count: 2;
    column-gap: 30px;
  }
  
  .service-card .service-list li {
    margin-bottom: 16px;
  }
}


/* ==========================================================================
   5. КЛАССЫ-МОДИФИКАТОРЫ ДЛЯ СМЕНЫ ЦВЕТА ПОЛОСОК
   ========================================================================== */
.service-card._red     { --accent-color: #ff3b30; } /* Реклама */
.service-card._blue    { --accent-color: #2f80ed; } /* Разработка */
.service-card._green   { --accent-color: #27ae60; } /* Продвижение */
.service-card._orange  { --accent-color: #f2994a; } /* SMM */
.service-card._purple  { --accent-color: #9b51e0; } /* Дизайн */
.service-card._yellow  { --accent-color: #f2c94c; } /* Консалтинг *

/* Отмена двухколоночного режима для списков с флагом "в одну колонку" */
@media screen and (min-width: 64em) {
  .service-card .service-list._single-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    column-count: auto; /* Сбрасываем разделение на колонки */
  }
  
  .service-card .service-list._single-col li {
    margin-bottom: 0; /* Возвращаем стандартные отступы флексбокса */
  }
}

/* ==========================================================================
   1. ОБЩИЕ СТИЛИ БЛОКА ЦИФР И КОНТЕЙНЕРА
   ========================================================================== */
.digits-section {
  background-color: #0b0b0b;
  padding: 60px 0;
  width: 100%;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.digits-header {
  color: #888;
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 40px;
  text-transform: uppercase;
  text-align: center;
}
.digits-header .dot { 
  color: #1FA9A0; 
  margin-right: 6px; 
}

/* Декоративная линейка-шкала под карточками */
.digits-ruler {
  width: 100%;
  height: 28px; /* Точная высота SVG из макета */
  margin-top: 50px;
  
  /* 
     ЧИСТЫЙ ВЕКТОРНЫЙ ПАТТЕРН ИЗ FIGMA:
     Мы взяли один шаг шкалы шириной 16px и высотой 28px.
     - Первая линия (низкая): x=0.5, высота от 4.25px до 23.75px
     - Вторая линия (высокая): x=8.5, полная высота от 0 до 28px
     Цвет оригинального штриха (#5D5D5D) переведен в безопасный код %235D5D5D.
     Если захотите сделать линейку ярче, замените %235D5D5D на %23aaaaaa или %23ffffff
  */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28' viewBox='0 0 16 28' fill='none'%3E%3Cpath d='M0.5 4.25V23.75' stroke='%235D5D5D'/%3E%3Cpath d='M8.5 0V28' stroke='%235D5D5D'/%3E%3C/svg%3E");
  
  /* Бесконечно зацикливаем шкалу по горизонтали на всю ширину экрана */
  background-repeat: repeat-x; 
  
  /* Шаг повторения паттерна строго равен его физической ширине */
  background-size: 16px 28px; 
}

/* Базовые стили карточек (для всех разрешений) */
.digit-card {
  color: #ffffff;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 220px;
  box-sizing: border-box;
}

.digit-num {
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

.digit-text {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #ffffff; /* Белый цвет текста как на макете */
  font-weight: 400;
  
  /* Внутренние отступы, чтобы текст не прижимался к краям плашки */
  padding: 12px 16px; 
  border-radius: 2px;
  
  /* Расширяем плашку на всю ширину карточки, но за счет margin ужимаем правый край, 
     чтобы градиент красиво затухал до конца строки */
  width: 100%;
  box-sizing: border-box;
  margin-top: 15px; /* Зазор между крупной цифрой и плашкой подписи */

  /* 
     МАГИЯ ГРАДИЕНТА:
     Стартует со свежего бирюзово-изумрудного цвета (#0c736f) с плотностью 90%,
     к середине плавно переходит в 45% плотности,
     а к правому краю полностью растворяется в прозрачности (transparent).
  */
  background: linear-gradient(
    to right, 
    rgba(12, 115, 111, 0.9) 0%, 
    rgba(12, 115, 111, 0.45) 60%, 
    transparent 100%
  );
}


/* ==========================================================================
   2. ТОЧНАЯ ОТРИСОВКА ГРАФИЧЕСКИХ КВАДРАТОВ (GRID)
   ========================================================================== */
.digit-card .digit-dots {
  display: grid;
  gap: 6px 5px; /* 12px отступ между строками квадратов, 10px между ними в ряду */
  width: max-content;
  margin-bottom: auto; /* Прижимает цифры к низу карточки */
}

/* Базовый стиль для каждого квадратика */
.digit-card .digit-dots span {
  display: block;
  width: 14px;  /* Размер стандартного квадрата */
  height: 14px; /* Размер стандартного квадрата */
  background-color: #555555; /* Серый цвет по макету */
  border-radius: 2px; /* Мягкое скругление углов */
  box-sizing: border-box;
}

/* Управление строками и колонками для каждой карточки */
._card-1 .digit-dots { grid-template-columns: repeat(1, 1fr); }
._card-2 .digit-dots { grid-template-columns: repeat(2, 1fr); }
._card-3 .digit-dots { grid-template-columns: repeat(2, 1fr); }
._card-4 .digit-dots { grid-template-columns: repeat(2, 1fr); }
._card-5 .digit-dots { grid-template-columns: repeat(3, 1fr); }
._card-6 .digit-dots { grid-template-columns: repeat(3, 1fr); }

/* Эффект маленькой первой точки (начиная с 3-й карточки) */
._card-3 .digit-dots span:first-child,
._card-4 .digit-dots span:first-child,
._card-5 .digit-dots span:first-child,
._card-6 .digit-dots span:first-child {
  width: 6px;  /* Уменьшенный размер для самого первого квадратика */
  height: 6px;
  border-radius: 1px;
  align-self: center;
  justify-self: center;
}

/* ==========================================================================
   3. МОБИЛЬНАЯ ВЕРСИЯ (По умолчанию для экранов меньше 640px)
   ========================================================================== */
@media screen and (max-width: 39.99em) {
  .digits-track {
    display: flex;
    flex-wrap: nowrap;     /* Запрещаем перенос, выстраиваем в линию */
    overflow-x: auto;      /* Включаем горизонтальную прокрутку пальцем */
    padding: 0 20px 20px;  /* Отступы по бокам */
    gap: 30px;
    scroll-snap-type: x mandatory; /* Мягкий магнит при листании */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    scrollbar-width: none; /* Прячем дефолтный системный скроллбар */
  }
  
  .digits-track::-webkit-scrollbar {
    display: none; 
  }

  .digit-card {
    width: 75vw;    /* Каждая карточка занимает 75% ширины экрана телефона */
    flex-shrink: 0; /* Запрещаем им сжиматься */
    scroll-snap-align: start;
  }
}

/* ==========================================================================
   4. АДАПТИВНАЯ СЕТКА (ПЛАНШЕТЫ И НОУТБУКИ ОТ 640px ДО 1399px)
   ========================================================================== */
@media screen and (min-width: 40em) {
  .digits-section {
    padding: 80px 0;
  }

  .digits-track {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    gap: 40px 30px; /* 40px между строками, 30px между колонками */
    
    /* До 800px: 3 строки по 2 элемента */
    grid-template-columns: repeat(2, 1fr); 
  }

  .digit-card {
    width: 100%;
    height: 200px;
  }
}

/* Изменение на 800px: Сетка перестраивается в 2 строки по 3 элемента */
@media screen and (min-width: 50em) { /* 50em = 800px */
  .digits-track {
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px 30px; 
  }
}

/* ==========================================================================
   5. ДЕСКТОПНАЯ ВЕРСИЯ (МОНИТОРЫ ОТ 1400px): Все 6 блоков в 1 ряд
   ========================================================================== */
@media screen and (min-width: 103.125em) { /* 103.125em = 1650px */
  .digits-section {
    padding: 100px 0;
  }

  .digits-track {
    max-width: 1640px; /* Расширяем контейнер для 6 блоков в ряд */
    padding: 0 60px;
    grid-template-columns: repeat(6, 1fr); /* 6 колонок в один ряд */
    gap: 24px; 
  }

  .digit-card {
    height: 240px; /* Немного увеличиваем высоту для идеальной пропорции */
  }
  
  .digit-num {
    font-size: 3.8rem; 
  }
}


/* ==========================================================================
   1. ОБЩИЕ СТИЛИ СЕКЦИИ ЛОГОТИПОВ (ДЛЯ ВСЕХ ЭКРАНОВ)
   ========================================================================== */
.clients-section {
  background-color: #0b0b0b;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Заголовок "Наши клиенты" — строго 28px по высоте, как SVG из макета */
.clients-header {
  color: #F7F8FA;
  font-size: 0.95rem; 
  line-height: 28px;  /* Фиксируем высоту строки */
  height: 28px;       /* Задаем жесткую высоту текстового блока */
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-left: 20px;
  display: flex;
  align-items: center; /* Центрируем текст по вертикали внутри 28 пикселей */
  box-sizing: border-box;
}

.clients-header .dot { 
  color: #1FA9A0; 
  margin-right: 8px;
  line-height: 1; /* Предотвращает смещение квадратика-маркера вверх */
}

/* Обертка для бегущей строки */
.clients-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 40px;
  width: 100%;
}

/* Контейнер-лента с логотипами */
.clients-track {
  display: flex;
  flex-shrink: 0;
  justify-content: space-around;
  align-items: center;
  min-width: 100%;
  gap: 40px;
}

/* Элемент логотипа — строго 28px по высоте под макет */
.client-logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px; 
  box-sizing: border-box;
}

/* Стилизация и автоматическое перекрашивание SVG картинок */
.client-logo-item img {
  max-height: 28px; /* Ограничиваем высоту логотипов макетным шагом */
  width: auto;
  max-width: 160px;
  object-fit: contain;
  
  /* АВТО-ПЕРЕКРАШИВАНИЕ: превращает любой цветной SVG в чистый белый монохром */
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   2. МОБИЛЬНАЯ ВЕРСИЯ (Автоматическая бесконечная бегущая строка)
   ========================================================================== */
@media screen and (max-width: 39.99em) {
  .clients-track {
    /* Запуск бесконечного циклического движения */
    animation: scroll-marquee 20s linear infinite;
  }
  
  @keyframes scroll-marquee {
    from { transform: translateX(0%); }
    to { transform: translateX(calc(-100% - 40px)); } /* Сдвиг с учетом gap */
  }
}

/* ==========================================================================
   3. ДЕСКТОПНАЯ ВЕРСИЯ (От 640px и выше — ровный фиксированный ряд)
   ========================================================================== */
@media screen and (min-width: 40em) {
  .clients-section {
    flex-direction: row; /* Заголовок и логотипы встают в одну линию */
    align-items: center;
    padding: 24px 40px;
    justify-content: space-between;
    height: 76px; /* Фиксированная высота всей горизонтальной плашки */
  }
  
  .clients-header {
    padding-left: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .clients-marquee {
    width: auto;
    flex-grow: 1;
    justify-content: space-around;
    gap: 0;
  }

  /* Скрываем дублирующий трек на десктопе, так как строка статична */
  .clients-track._duplicate {
    display: none;
  }
  
  .clients-track {
    min-width: auto;
    width: 100%;
    justify-content: space-around;
  }
}


/* ==========================================================================
   1. ОБЩИЕ СТИЛИ СЕКЦИИ И ТЕКСТОВОЙ ШАПКИ
   ========================================================================== */
.work-steps-section {
  position: relative;
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* --- НАСТРОЙКИ ОТОБРАЖЕНИЯ КАРТИНКИ --- */
  background-size: cover;      /* Картинка автоматически заполнит всю площадь секции */
  background-position: center; /* Центрируем изображение по горизонтали и вертикали */
  background-repeat: no-repeat;/* Запрещаем картинке размножаться плиткой */
  background-color: #0b0b0b; 
}

.work-steps-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.work-steps-header {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 55px auto; /* Уменьшили отступ, так как линий больше нет */
  text-align: center;
  padding: 0 20px; 
  box-sizing: border-box;
}

/* Главный заголовок: бирюзовый, крупный, без маркеров */
.work-main-title {
  color: #1FA9A0; 
  font-size: 1.6rem; /* Крупный масштаб строго по макету */
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 25px 0;
}

/* Подзаголовок: белый, плотный, читаемый */
.work-subtitle {
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  max-width: 900px; /* Ограничиваем ширину, чтобы строка не растягивалась слишком сильно */
  margin: 0 auto 20px auto;
}

/* Вводный абзац: аккуратный серый текст, выровненный красивой пирамидой */
.work-intro-text {
	color: #D9D9D9;
	font-size: 0.95rem;
	line-height: 1.6;
	max-width: 620px;
	margin: 0 auto;	
}

/* --- Адаптивность для мобильных экранов --- */
@media screen and (max-width: 39.99em) {
  .work-main-title {
    font-size: 1.3rem;
  }
  .work-subtitle {
    font-size: 1.2rem;
  }
  .work-steps-header {
    margin-bottom: 40px;
  }
}


/* ==========================================================================
   2. УНИВЕРСАЛЬНЫЕ СТИЛИ КАРТОЧЕК (ИДЕАЛЬНЫЙ СТЕКЛЯННЫЙ ЭФФЕКТ)
   ========================================================================== */
.work-step-card {
  /* Базовый легкий фон всей карточки */
  background: rgba(22, 22, 22, 0.2); /* Это эквивалент вашего #16161633 */
  
  /* МАГИЯ МАТОВОСТИ: прописывается строго ОДИН РАЗ на весь родительский блок */
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  
  /* Тонкий, благородный контур карточки */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  
  color: #ffffff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden; 
  height: 100%;
}

/* --- ВЕРХНЯЯ ЗОНА: ШАПКА КАРТОЧКИ (БОЛЕЕ ТЕМНЫЙ ТОН БЕЗ ДУБЛИРОВАНИЯ BLUR) --- */
.work-step-card .card-header-zone {
  /* Задаем только цвет фона, который накладывается вторым слоем и делает верхнюю треть темнее */
  background: rgba(22, 22, 22, 0.4); /* Это эквивалент вашего #16161666 */
  
  /* УБРАЛИ ОТСЮДА backdrop-filter, ЧТОБЫ УБРАТЬ ГРЯЗНЫЕ СТЫКИ И ОРЕОЛЫ */
  
  padding: 35px 30px 25px 30px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); /* Линия-разделитель */
}

.step-number {
  color: #ffffff; /* Номер всегда белый */
  opacity: 0.4;   /* По умолчанию приглушен (40% яркости) для создания глубины */
  font-size: 1.8rem; /* КРИТИЧЕСКИ ВАЖНО: делаем номер крупным и акцентным */
  font-family: monospace;
  margin-bottom: 12px;
  letter-spacing: 1px;
}
.step-title {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 1px;
}

/* --- НИЖНЯЯ ЗОНА: КОНТЕНТ (ПРОЗРАЧНОЕ ТЕЛО КАРТОЧКИ) --- */
.work-step-card .card-body-zone {
  flex-grow: 1; 
  display: flex;
  align-items: center; 
  justify-content: center;
  padding: 35px;
  box-sizing: border-box;
  background: transparent; /* Полностью прозрачный блок, забирает фон карточки */
}

.step-descr {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

//* ==========================================================================
   ИСПРАВЛЕННАЯ ИНТЕРАКТИВНОСТЬ: НОМЕР БЕЛЫЙ, ЗАГОЛОВОК БИРЮЗОВЫЙ
   ========================================================================== */

/* Плавность перехода для всех элементов */
.work-step-card,
.work-step-card .card-header-zone,
.work-step-card .step-number,
.work-step-card .step-title {
  transition: all 0.3s ease;
}

/* Эффект для всей карточки при наведении или у активной */
.work-step-card:hover,
.work-step-card._active {
  border-color: #1FA9A0; /* Рамка вспыхивает вашим фирменным цветом */
  box-shadow: 0 0 20px rgba(31, 169, 160, 0.15); /* Мягкое неоновое свечение вокруг */
}

/* Номер этапа загорается на 100% белым */
.work-step-card:hover .step-number,
.work-step-card._active .step-number {
  opacity: 1; 
}

/* ТОЛЬКО название этапа перекрашивается в #1FA9A0 */
.work-step-card:hover .step-title,
.work-step-card._active .step-title {
  color: #1FA9A0;
}

/* Линия-разделитель и легкий отблеск в шапке */
.work-step-card:hover .card-header-zone,
.work-step-card._active .card-header-zone {
  /* Разделитель загорается цветом морской волны */
  border-bottom-color: rgba(31, 169, 160, 0.4);
  
  /* Мягко подмешиваем новый оттенок в верхний градиент шапки */
  background: linear-gradient(
    to bottom, 
    rgba(31, 169, 160, 0.05) 0%, 
    rgba(22, 22, 22, 0.4) 100%
  );
}

/* ==========================================================================
   3. МОБИЛЬНАЯ ВЕРСИЯ СЕТКИ (До 640px)
   ========================================================================== */
.work-steps-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Свободный зазор между рамками на телефонах */
  padding: 0 16px;
}

.center-3d-cube {
  display: none;
}

/* ==========================================================================
   4. ДЕСКТОПНАЯ ВЕРСИЯ СЕТКИ СО СДВИГОМ (От 640px / 40em)
   ========================================================================== */
@media screen and (min-width: 40em) {
  .work-steps-section {
    padding: 100px 0 160px 0; /* Место снизу для опущенного блока 05 */
  }

  .work-steps-grid {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    
    /* Сетка в 3 колонки с воздушными зазорами во все стороны */
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 24px; /* Зазор по горизонтали */
    row-gap: 24px;    /* Зазор по вертикали (просвет для шаров) */
    background-color: transparent;
    border: none;
  }

  /* Четкое позиционирование карточек по колонкам Grid-сетки */
  .work-step-card:nth-child(1) { grid-column: 1; grid-row: 1; }
  .work-step-card:nth-child(4) { grid-column: 1; grid-row: 2; }

  /* Исправлено: точный селектор nth-child(5) */
  .work-step-card:nth-child(2) { grid-column: 2; grid-row: 1; }
  .work-step-card:nth-child(5) { grid-column: 2; grid-row: 2; }

  .work-step-card:nth-child(3) { grid-column: 3; grid-row: 1; }
  .work-step-card:nth-child(6) { grid-column: 3; grid-row: 2; }

  /* Сдвиг всей центральной колонки вниз */
  .work-steps-grid .work-step-card:nth-child(2),
  .work-steps-grid .work-step-card:nth-child(5) {
    transform: translateY(35px);
  }

  /* Позиционирование 3D куба строго на перекрестке смещенных рамок */
  .center-3d-cube {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 35px)); 
    
    width: 140px;
    height: 140px;
    z-index: 5;
    background-image: url('images/center-cube.png'); /* Путь к вашему WebP/PNG кубу */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.8));
  }
}

/* Ноутбуки и экраны от 1400px */
@media screen and (min-width: 87.5em) {
  .work-steps-grid {
    max-width: 1360px;
    column-gap: 32px;
    row-gap: 32px; 
  }
  .work-steps-grid .work-step-card:nth-child(2),
  .work-steps-grid .work-step-card:nth-child(5) {
    transform: translateY(45px);
  }
  .center-3d-cube {
    transform: translate(-50%, calc(-50% + 45px));
    width: 160px;
    height: 160px;
  }
}

/* Мониторы от 1650px */
@media screen and (min-width: 103.125em) {
  .work-steps-section {
    padding: 120px 0 200px 0;
  }
  .work-steps-grid {
    max-width: 1600px;
  }
}

/* ==========================================================================
   1. ОБЩИЕ СТИЛИ СЕКЦИИ КЕЙСОВ И ФОНА (ДЛЯ ВСЕХ ЭКРАНОВ)
   ========================================================================== */
.cases-section {
  position: relative;
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0b0b0b;
}

.cases-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.cases-main-title {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 60px;
}

.cases-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ==========================================================================
   2. МОБИЛЬНАЯ ВЕРСИЯ (ЦЕНТРИРОВАНИЕ КОМПОНЕНТОВ И ПОРЯДОК ЭЛЕМЕНТОВ)
   ========================================================================== */
.case-row-item {
  display: flex;
  flex-direction: column; /* Элементы выстраиваются строго сверху вниз на смартфонах */
  gap: 24px;
  padding: 40px 20px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: -1px; 
  box-sizing: border-box;
}

/* 
   Раскрываем левую колонку на мобильных, чтобы её внутренние элементы 
   (заголовок, лого, кнопка) участвовали в общем порядке (order) всей карточки.
*/
.case-col-brand {
  display: contents; 
}

/* Идеальное центрирование названия бренда на смартфонах */
.case-brand-title {
  order: 1;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center; /* Центрируем по горизонтали */
  text-align: center;
}
.case-brand-title .dot          { margin-right: 8px; font-size: 0.85rem; }
.case-brand-title .dot._blue    { color: #2f80ed; }
.case-brand-title .dot._green   { color: #27ae60; }
.case-brand-title .dot._red     { color: #ff3b30; }
.case-brand-title .dot._orange  { color: #f2994a; }
.case-brand-title .dot._purple  { color: #9b51e0; }
.case-brand-title .dot._yellow  { color: #f2c94c; }

/* Идеальное центрирование плашки логотипа на смартфонах */
.case-logo-box {
  order: 2;
  width: 72px;  
  height: 72px;
  background-color: rgba(255, 255, 255, 0.04); 
  border: 1px solid rgba(255, 255, 255, 0.12); 
  border-radius: 8px; 
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto; /* Авто-отступы центрируют блок */
}
.case-logo-box img {
  max-height: 50%; 
  max-width: 50%;
  object-fit: contain;
  filter: brightness(0) invert(1); 
  opacity: 0.6;
}

.case-col-works {
  order: 3;
}

/* Центрируем заголовок "ЧТО СДЕЛАЛИ:" на смартфонах */
.case-works-title {
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin: 0 0 20px 0;
  font-weight: 500;
  text-transform: uppercase;
  opacity: 0.5;
  text-align: center; /* Центрируем текст */
}

/* Сам список удерживаем выровненным по левому краю для аккуратности маркеров-точек */
.case-works-list {
  list-style: none; 
  padding: 0;
  margin: 0;
}
.case-works-list li {
  color: #b3b3b3;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 12px;
  position: relative;
  padding-left: 14px; 
}
.case-works-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.4);
}

.case-col-image {
  order: 4;
}
.case-image-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.case-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кнопка на смартфонах улетает в самый низ всей карточки кейса */
.case-more-btn {
  order: 5; 
  display: block;
  width: 100%;
  padding: 14px 0;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
  transition: all 0.3s ease;
  margin-top: 10px;
}
.case-more-btn:not(._disabled):hover {
  border-color: #1FA9A0;
  background-color: rgba(31, 169, 160, 0.05);
  color: #1FA9A0;
}
.case-more-btn._disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Большая нижняя кнопка всей секции */
.cases-bottom-actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.cases-all-btn {
  display: inline-block;
  background-color: #1FA9A0;
  color: #ffffff;
  padding: 16px 45px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}
.cases-all-btn:hover { background-color: #167e77; }

/* ==========================================================================
   3. ДЕСКТОПНАЯ ВЕРСИЯ (АДАПТИВНОСТЬ ОТ 40em / 640px И ВЫШЕ)
   ========================================================================== */
@media screen and (min-width: 40em) {
  .cases-section { padding: 100px 0; }
  .cases-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

  /* На ПК перестраиваем строку обратно в жесткую трехколоночную Grid-сетку */
  .case-row-item {
    display: grid;
    grid-template-columns: 2.5fr 5.5fr 4fr; 
    gap: 0; 
    padding: 35px 0; 
    align-items: stretch; 
  }

  /* Восстанавливаем блочность и flex-поведение левой колонки на ПК */
  .case-col-brand {
    display: flex !important; 
    padding: 0 40px 0 0; 
    flex-direction: column;
    align-items: center; 
    justify-content: space-between; 
    gap: 25px;
    position: relative;
    box-sizing: border-box;
  }
  
  .case-col-works {
    display: block;
    padding: 0 40px; 
    position: relative;
    box-sizing: border-box;
  }

  /* Тонкие парящие вертикальные разделительные линии из макета */
  .case-col-brand::after,
  .case-col-works::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px; 
    background-color: rgba(255, 255, 255, 0.15); 
  }

  /* На ПК возвращаем строгое левое выравнивание заголовков и логотипа */
  .case-brand-title {
    width: 100%;
    justify-content: flex-start; /* Прижимаем влево */
    text-align: left;
    order: 0;
  }
  
  .case-logo-box {
    order: 0;
    margin: 0; /* Сбрасываем мобильное авто-центрирование */
  }

  /* На ПК кнопка возвращается на свое законное место под логотип */
  .case-more-btn {
    order: 0; 
    margin-top: 0;
  }

  .case-col-works {
    order: 0;
  }
  .case-works-title {
    text-align: left; /* Текст заголовка списка на ПК уходит влево */
  }
  .case-works-list {
    column-count: 2; /* Плоский список услуг бьется на два ровных вертикальных столбца */
    column-gap: 30px;
  }

  .case-col-image {
    order: 0;
    padding: 0 0 0 40px; 
    box-sizing: border-box;
    display: flex;
    align-items: stretch; 
  }
  .case-image-wrapper {
    width: 100%;
    height: 100%;
  }
  .case-image-wrapper img {
    transition: transform 0.4s ease;
  }
  .case-row-item:hover .case-image-wrapper img {
    transform: scale(1.03); 
  }
}

/* Оптимизация под экраны ноубуков и ПК (1400px и 1650px) */
@media screen and (min-width: 87.5em) {
  .cases-container { max-width: 1360px; }
  .case-col-brand { padding-right: 50px; }
  .case-col-works { padding: 0 50px; }
  .case-col-image { padding-left: 50px; }
}
@media screen and (min-width: 103.125em) {
  .cases-container { max-width: 1600px; }
}



/* ==========================================================================
   1. ОБЩИЕ СТИЛИ СЕКЦИИ ОТЗЫВОВ И КОНТЕЙНЕРА
   ========================================================================== */
.reviews-section {
  position: relative;
  width: 100%;
  padding: 60px 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  
  /* --- НАСТРОЙКИ СВОЙСТВ ОТОБРАЖЕНИЯ КАРТИНКИ ИЗ ACF --- */
  background-size: cover;      /* Картинка заполнит всю площадь секции */
  background-position: center; /* Центрируем изображение */
  background-repeat: no-repeat;/* Запрещаем дублирование плиткой */
  background-color: #0b0b0b;   /* Запасной цвет на время загрузки картинки */
}

.reviews-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.reviews-main-title {
  color: #1FA9A0; /* Наш благородный цвет морской волны */
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 60px;
}

/* Контейнер слайдера Swiper */
.reviews-slider {
  padding-bottom: 90px !important; /* Свободное место снизу под кнопки управления */
  overflow: visible !important;   /* Предотвращает некрасивое обрезание карточек по бокам */
}

/* ==========================================================================
   2. СТИЛИЗАЦИЯ СТЕКЛЯННОЙ КАРТОЧКИ ОТЗЫВА
   ========================================================================== */
.review-card-inner {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(22, 22, 22, 0.2); /* Чистый легкий фон под стекло */
  -webkit-backdrop-filter: blur(40px); /* Мощное размытие 40px строго по макету */
  backdrop-filter: blur(40px);
  display: flex;
  flex-direction: column;
  height: 520px; /* Оптимальная высота, чтобы длинные тексты не вылезали наружу */
  box-sizing: border-box;
}

/* --- ВЕРХНЯЯ ЗОНА: СОДЕРЖИМОЕ И ТЕКСТЫ --- */
.review-card-body {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: rgba(22, 22, 22, 0.4); /* Накладываемый фон шапки за счет паддинга карточки */
}

/* КРУПНЫЙ МАРКЕР-ИГЛА НАД ЗАГОЛОВКОМ */
.review-card-body .review-marker {
  display: block; 
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  margin-bottom: 25px; 
  flex-shrink: 0;
  box-sizing: border-box;
  background-color: currentColor; 
}

/* КЛИНИДНОЕ СУЖЕНИЕ ШЛЕЙФА */
.review-card-body .review-marker::after {
  content: '';
  position: absolute;
  left: 17px; /* 14px кубик + 3px зазор */
  top: 50%;
  transform: translateY(-50%);
  width: 75px; 
  height: 4px; /* Плотная толщина у основания */
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.review-card-headline {
  color: #ffffff;
  font-size: 1.25rem; 
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 25px 0;
  display: block; 
  letter-spacing: 0.5px;
}

.review-card-text {
  color: #a6a6a6;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 25px 0;
  display: -webkit-box;
  -webkit-line-clamp: 7; /* Аккуратно прячем избыточный текст, если отзыв слишком длинный */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.review-card-link {
  color: #ffffff;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: auto; /* Намертво прижимает ссылку вниз к разделительной черте */
  width: max-content;
  transition: color 0.3s ease;
}
.review-card-link:hover {
  color: #1FA9A0;
}

/* --- НИЖНЯЯ ЗОНА: ПОДВАЛ КАРТОЧКИ (ПЛОТНЫЙ ТЕМНЫЙ ФОН) --- */
.review-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.12); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.12); 
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background-color: rgba(11, 11, 11, 0.93); /* Глухой темный цвет для идеального чтения */
  box-sizing: border-box;
}

.review-author-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 15px;
}

.review-author-name {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
}

.review-author-meta {
  color: #666666; /* Серый цвет для должности */
  font-size: 0.9rem;
  line-height: 1.3;
}

.review-card-date {
  color: #444444; /* Темно-серый цвет для даты */
  font-size: 0.9rem;
  font-family: monospace;
  flex-shrink: 0;
}

/* ==========================================================================
   3. КВАДРАТНЫЕ КНОПКИ НАВИГАЦИИ И ОДИНОЧНАЯ ЦИФРА ПО ЦЕНТРУ
   ========================================================================== */
.reviews-controls-grid {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; 
  z-index: 10;
  box-sizing: border-box;
}

.reviews-prev-btn,
.reviews-next-btn {
  position: static !important; 
  width: 44px !important;      
  height: 44px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem !important; 
  font-weight: 300;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

.reviews-prev-btn::after,
.reviews-next-btn::after {
  display: none !important; /* Вырезаем встроенный хлам Swiper */
}

/* Кнопка НАЗАД */
.reviews-prev-btn {
  background-color: rgba(22, 22, 22, 0.6);
  border: 1px solid #1FA9A0;
  color: rgba(255, 255, 255, 0.4); 
}
.reviews-prev-btn:not(.swiper-button-disabled):hover {
  background-color: #1FA9A0;
  color: #ffffff;
}

/* Кнопка ВПЕРЕД */
.reviews-next-btn {
  background-color: #1FA9A0;
  border: 1px solid #1FA9A0;
  color: #ffffff;
}
.reviews-next-btn:not(.swiper-button-disabled):hover {
  background-color: #167e77;
  border-color: #167e77;
}

/* Блокировка кнопок в крайних положениях слайдера */
.reviews-prev-btn.swiper-button-disabled,
.reviews-next-btn.swiper-button-disabled {
  opacity: 0.25 !important;
  cursor: not-allowed;
  background-color: rgba(22, 22, 22, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.2) !important;
}

/* Крупная одиночная цифра */
.reviews-single-number {
  position: static !important;
  width: auto !important;
  color: #ffffff; 
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.5rem; 
  font-weight: 400;
  user-select: none;
  min-width: 35px; 
  text-align: center;
}

/* ==========================================================================
   4. ТАБЛИЦА ЦВЕТОВЫХ ГРАДИЕНТОВ ДЛЯ ИГЛЫ (ПО КЛАССАМ ИЗ ACF)
   ========================================================================== */
.review-card-body .review-marker._green { color: #1FA9A0; }
.review-card-body .review-marker._green::after {
  background: linear-gradient(to right, rgba(31, 169, 160, 1) 0%, rgba(31, 169, 160, 0.2) 70%, transparent 100%);
}

.review-card-body .review-marker._blue { color: #2f80ed; }
.review-card-body .review-marker._blue::after {
  background: linear-gradient(to right, rgba(47, 128, 237, 1) 0%, rgba(47, 128, 237, 0.2) 70%, transparent 100%);
}

.review-card-body .review-marker._red { color: #ff3b30; }
.review-card-body .review-marker._red::after {
  background: linear-gradient(to right, rgba(255, 59, 48, 1) 0%, rgba(255, 59, 48, 0.2) 70%, transparent 100%);
}

.review-card-body .review-marker._orange { color: #f2994a; }
.review-card-body .review-marker._orange::after {
  background: linear-gradient(to right, rgba(242, 153, 74, 1) 0%, rgba(242, 153, 74, 0.2) 70%, transparent 100%);
}

.review-card-body .review-marker._purple { color: #9b51e0; }
.review-card-body .review-marker._purple::after {
  background: linear-gradient(to right, rgba(155, 81, 224, 1) 0%, rgba(155, 81, 224, 0.2) 70%, transparent 100%);
}

/* ==========================================================================
   5. ЦЕПОЧКА ЦЕЛИКОВОЙ АДАПТИВНОСТИ ДЛЯ РАЗНЫХ МОНИТОРОВ
   ========================================================================== */
@media screen and (min-width: 40em) { /* От 640px (Планшеты): 2 слайда */
  .reviews-section { padding: 100px 0; }
  .reviews-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
}

@media screen and (min-width: 64em) { /* От 1024px (Ноутбуки): 3 слайда */
  .reviews-container { max-width: 1200px; }
}

@media screen and (min-width: 87.5em) { /* От 1400px (ПК мониторы) */
  .reviews-container { max-width: 1360px; }
}

@media screen and (min-width: 103.125em) { /* От 1650px (Огромные экраны) */
  .reviews-container { max-width: 1600px; }
}


/* ==========================================================================
   1. ОБЩИЕ СТИЛИ СЕКЦИИ НАГРАД И ФОНА
   ========================================================================== */
.awards-section {
  position: relative;
  width: 100%;
  padding: 80px 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Свойства фонового изображения */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #0b0b0b;
  overflow: hidden;
}

.awards-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Шапка блока */
.awards-header {
  width: 100%;
  max-width: 100%;
  margin-bottom: 60px;
  padding: 0 20px;
  box-sizing: border-box;
}

.awards-main-title {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  
  /* Выравниваем точку и текст строго на одной горизонтальной оси по центру */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ПРОСТОЙ ФИРМЕННЫЙ КВАДРАТНЫЙ МАРКЕР #1FA9A0 */
.awards-main-title .awards-dot {
  display: inline-block;
  width: 10px;        /* Физический размер квадратика */
  height: 10px;
  background-color: #1FA9A0; /* Наш точный цвет морской волны */
  border-radius: 1px;        /* Едва заметное скругление углов */
  margin-right: 14px;        /* Зазор между квадратом и первой буквой текста */
  flex-shrink: 0;
}

/* ==========================================================================
   2. ЛЕНТА НАГРАД И ИХ МАСШТАБИРОВАНИЕ
   ========================================================================== */
.awards-track {
  display: flex;
  align-items: center; /* Центрируем все награды строго по горизонтальной оси */
  justify-content: flex-start;
  gap: 24px;
  padding: 0 20px 20px 20px;
  
  /* На смартфонах включаем плавный горизонтальный скролл пальцем */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Прячем системный скроллбар */
}
.awards-track::-webkit-scrollbar {
  display: none;
}

/* Базовый бокс для бэджа наград */
.award-item-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.award-item-box img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- МОДИФИКАТОРЫ РАЗМЕРОВ ПО МАКЕТУ --- */

/* Маленькие бэджи (1, 3, 4, 6 элементы) */
.award-item-box._small {
  width: 130px; /* Компактный базовый масштаб */
}

/* Крупные бэджи (2 и 5 элементы — Top Company) */
.award-item-box._large {
  width: 180px; /* Заметно крупнее, доминируют в сетке */
}

/* Интерактивный эффект легкого приподнимания при наведении */
.award-item-box:hover {
  transform: translateY(-5px);
}

/* ==========================================================================
   3. ДЕСКТОПНАЯ АДАПТИВНОСТЬ (СТАТИЧНЫЙ КРАСИВЫЙ РЯД)
   ========================================================================== */
@media screen and (min-width: 48em) { /* От 768px */
  .awards-track {
    justify-content: center; /* На компьютерах выстраиваем строго по центру экрана */
    overflow: hidden;
    padding: 0 40px;
    gap: 30px; /* Оптимальный зазор между шестиугольниками */
  }
}

@media screen and (min-width: 87.5em) { /* От 1400px */
  .awards-track {
    max-width: 1360px;
    margin: 0 auto;
    gap: 40px; /* Раздвигаем элементы шире на больших мониторах */
  }
  .award-item-box._small { width: 150px; }
  .award-item-box._large { width: 210px; }
}

@media screen and (min-width: 103.125em) { /* От 1650px */
  .awards-track {
    max-width: 1600px;
    gap: 50px;
  }
}