:root {
  --sintez-primary: #1abc9c;
  --sintez-dark: #2c3e50;
  /* --sintez-bg: #f9fbfd;  <-- УБРАЛИ СЕРЫЙ ЦВЕТ */
  --sintez-card-bg: #ffffff;
  --sintez-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  --sintez-shadow-hover: 0 20px 40px rgba(26, 188, 156, 0.15);
}

.sintez-contact-section {
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  padding: 60px 20px; /* Чуть уменьшили отступы */
  background-color: transparent !important; /* ПРОЗРАЧНЫЙ ФОН */
  position: relative;
  overflow: hidden;
}

/* Убираем фоновый круг, если он был */
.sintez-contact-section::before {
  display: none !important;
}

.sintez-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ЗАГОЛОВКИ */
.sintez-header {
  text-align: center;
  margin-bottom: 40px;
}

/* Скрываем H2, если он вдруг остался в коде */
.sintez-header h2 {
  display: none !important; 
}

.sintez-header p {
  color: #000000 !important; /* Был серый, стал чисто черный */
  font-size: 18px;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Остальные стили сетки и карточек оставляем те же */
.sintez-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

/* КАРТОЧКА */
.sintez-card {
  background-color: var(--sintez-card-bg);
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: var(--sintez-shadow);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Пружинистый эффект */
  border: 1px solid rgba(0,0,0,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.sintez-card:hover {
  transform: translateY(-10px); /* Всплытие */
  box-shadow: var(--sintez-shadow-hover);
  border-color: rgba(26, 188, 156, 0.2);
}

/* ИКОНКА В КРУГЕ */
.card-icon-wrapper {
  margin-bottom: 25px;
  position: relative;
}
.card-icon {
  width: 70px;
  height: 70px;
  background-color: rgba(26, 188, 156, 0.1);
  color: var(--sintez-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.card-icon svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.sintez-card:hover .card-icon {
  background-color: var(--sintez-primary);
  color: white;
  transform: rotate(10deg) scale(1.1);
}

/* ТЕКСТ ВНУТРИ КАРТОЧКИ */
.sintez-card h3 {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sintez-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-content {
  flex-grow: 1; /* Чтобы кнопка всегда была внизу */
  width: 100%;
}

.sintez-link {
  text-decoration: none;
  color: #2c3e50;   /* Темный цвет */
  font-size: 16px;  /* Обычный размер */
  margin-bottom: 8px;
  display: block;
  transition: color 0.2s;
  font-weight: 400; /* Обычная толщина (не жирный) */
}
.sintez-link.big-link {
  font-size: 16px !important;   /* Принудительно уменьшаем, если класс остался */
  font-weight: 400 !important;  /* Убираем жирность */
  color: #2c3e50 !important;
}
.sintez-link:hover { 
  color: #1abc9c !important; 
  text-decoration: none; 
}

.card-desc {
  color: #2c3e50 !important; /* Основной темный цвет текста */
  margin-bottom: 15px;
  font-size: 16px !important; /* Увеличили с 14px до 16px (стандарт) */
  line-height: 1.5;
}
.email-link {
  font-size: 18px;
  font-weight: 700;
  color: var(--sintez-primary);
  border-bottom: 1px dashed var(--sintez-primary);
  display: inline-block;
}
.email-link:hover { border-bottom-style: solid; }

.sintez-address {
  font-style: normal;
  color: #57606f;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.sintez-hours {
  background: #f8f9fa;
  padding: 10px 15px;
  border-radius: 8px;
  color: var(--sintez-dark);
  font-weight: 600;
  display: inline-block;
}
.hours-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #95a5a6;
  margin-bottom: 4px;
  font-weight: 400;
}

/* КНОПКА TELEGRAM */
.tg-button {
  margin-top: 25px;
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  color: white;
  padding: 12px 25px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  box-shadow: 0 5px 15px rgba(42, 171, 238, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.tg-button svg {
  margin-right: 10px;
  width: 20px;
  height: 20px;
  transition: transform 0.3s;
}

.tg-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(42, 171, 238, 0.4);
  color: white;
}

.tg-button:hover svg {
  transform: translateX(3px) rotate(-10deg);
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ (Fade In Up) */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* АДАПТИВНОСТЬ */
@media (max-width: 768px) {
  .sintez-contact-section { padding: 50px 15px; }
  .sintez-header h2 { font-size: 28px; }
  .sintez-header p { font-size: 16px; }
  .sintez-grid { grid-template-columns: 1fr; gap: 20px; }
  .sintez-card { padding: 30px 20px; }
}

/* === СТИЛИ ДЛЯ АДМИН-ПАНЕЛИ === */

/* 1. Обертка панели */
#bitrix-panel-wrapper {
    position: relative; /* Или fixed, если хотите чтобы она всегда висела сверху */
    z-index: 9999;      /* Самый высокий приоритет, выше модальных окон */
    width: 100%;
    background: #fff;   /* Чтобы не просвечивал фон сайта */
}

/* 2. Если у вас ФИКСИРОВАННАЯ шапка (sticky header) */
/* Битрикс сам добавляет класс .bx-panel-fixed к body, если панель закреплена. 
   Используем это, чтобы сдвинуть вашу шапку вниз */

body.bx-panel-fixed .glass-header, 
body.bx-panel-fixed .navbar {
    top: auto !important; /* Сбрасываем top: 0 */
    margin-top: 0 !important;
    /* Битрикс сам сдвигает body, но иногда фиксированные шапки нужно лечить JS-ом.
       Если шапка наезжает, попробуйте вариант ниже. */
}

/* ==================================================================
   ЧИСТАЯ СЕТКА ВОЗМОЖНОСТЕЙ PWA
   ================================================================== */
.pwa-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 60px;
    margin: 40px 0 60px 0; /* Добавил нижний отступ для отбивки от следующего блока */
}

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

.feature-icon {
    flex: 0 0 22px;
    font-size: 22px;
    color: #1abc9c;
    margin-top: 2px;
}

.feature-title {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    font-family: 'Roboto Condensed', sans-serif; /* Поддерживаем стиль заголовков сайта */
}

.feature-text {
    color: #667085;
    line-height: 1.65;
    font-size: 15px;
    margin: 0;
}

@media(max-width: 768px) {
    .pwa-features {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .feature-title {
        font-size: 19px;
    }
}
/* ==================================================================
   ФИКС КАРТОЧЕК "ЧТО МЫ СОЗДАЕМ" (Выравнивание и чистые списки)
   ================================================================== */

/* Базовый сброс глобальных списков */
.clean-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

/* ЖЕСТКО убиваем глобальные маркеры темы (двойные точки) */
.clean-list li::before,
.clean-list li::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.clean-list li {
    position: relative !important;
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
    padding-left: 0 !important;
}

/* --- Левый список (только текст и правильная точка) --- */
.clean-list.left-list li {
    color: #ecf0f1 !important; /* Светлый текст для темной карточки */
    font-size: 16px !important;
    padding-left: 18px !important; /* Отступ для точки */
}

/* Рисуем свою собственную, не конфликтующую точку */
.clean-list.left-list li::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 8px !important; /* Центровка относительно текста */
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #1abc9c !important; 
}

/* --- Правый список (только текст и галочка, БЕЗ ТОЧЕК) --- */
.clean-list.right-list li {
    color: #57606f !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

/* Настройка иконки галочки */
.clean-list.right-list li .fui-check {
    color: #1abc9c !important;
    font-size: 14px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
}

/* На мобильных устройствах отключаем flex-row, чтобы карточки встали друг под другом */
@media (max-width: 991px) {
    .row[style*="align-items: stretch"] {
        display: block !important;
    }
}

/* ==================================================================
   ФИКС МАРКЕРОВ В БЛОКЕ "РЕАЛЬНЫЙ КЕЙС"
   ================================================================== */
.case-list-fix {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.case-list-fix li {
    position: relative !important;
    padding-left: 0 !important;
    margin-bottom: 14px !important; /* Чуть увеличил отступ между строками для "воздуха" */
    display: flex !important;
    align-items: center !important; /* ФИКС: Выравниваем иконку строго по центру текста */
    gap: 10px !important;
}

/* Принудительно отключаем двойные зеленые точки темы */
.case-list-fix li::before,
.case-list-fix li::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Настройка самой галочки */
.case-list-fix li .fui-check {
    color: #1abc9c !important;
    font-size: 15px !important; /* Сделал иконку на 1px крупнее для баланса */
    margin-top: 0 !important;   /* ФИКС: Убрали лишний сдвиг вниз */
    flex-shrink: 0 !important;
}