/* ============================================
   БАЗОВЫЕ ШРИФТЫ И ПЕРЕМЕННЫЕ
   ============================================ */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/mont/montserrat.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/o-sans/opensans.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Основная цветовая палитра */
  --sp-primary: #597884;
  --primary-light: rgba(89, 120, 132, 0.08);
  --primary-lighter: rgba(89, 120, 132, 0.03);
  --accent: #84cf9d;
  --accent-dark: #7bc893;
  --sp-accent-red: #f26061;
  --bg-sp-light: #faf9f9;

  /* Цвета для CTA */
  --cta-bg: #3a5c6b;
  --cta-button: #8fdca4;
  --cta-button-hover: #7bc893;

  /* Системные цвета */
  --success: #198754;
  --danger: #dc3545;

  /* Цвета текста */
  --sp-text-dark: #2d3748;
  --sp-text-medium: #597884;
  --sp-text-light: #808c9e;
  --text-white: #ffffff;

  /* Цвета футера */
  --footer-text: #e8f4f8;
  --footer-link: #b8e0f0;
  --footer-link-hover: #ffffff;

  /* Границы */
  --border-color: #e2e8f0;
  --border-radius: 12px;

  /* Тени */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.1);

  /* Анимации */
  --transition: all 0.3s ease;
  --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Шрифты */
  --font-sans: 'Open Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

/* ============================================
   ОСНОВНЫЕ СТИЛИ ДЛЯ ТЕЛА
   ============================================ */
body {
  font-family: var(--font-sans);
  overflow-x: hidden;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sp-text-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--sp-primary);
  margin-top: 0;
}


h1,
h2,
h3 {
  font-weight: 600;
}

h4,
h5,
h6 {
  font-weight: 500;
}

h1 {
  margin-bottom: 1.75rem;
}

h2 {
  margin-bottom: 1.5rem;
}

h3 {
  margin-bottom: 1.25rem;
}

h4,
h5,
h6 {
  margin-bottom: 1rem;
}


/* ============================================
   ПРЕЛОАДЕР
   ============================================ */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e0e0e0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loaded_hiding .preloader {
  transition: opacity 0.3s;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}

/* ============================================
   ШАПКА САЙТА
   ============================================ */
.site-info-section {
  padding: 3rem 0 2.5rem;
  position: relative;
  background-color: #f8f9fa;
  background-image:
    linear-gradient(to top,
      rgba(252, 247, 243, 0.97) 0%,
      rgba(236, 232, 229, 0.97) 100%),
    var(--header-bg-image, url('../assets/images/hed-fon.jpg'));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

.site-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.6rem);
  color: #5f6d7c;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  position: relative;
}

.site-title a {
  text-decoration: none;
  color: #597884;
}

.site-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: var(--sp-primary);
  border-radius: 2px;
}

.site-description {
  font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--sp-text-medium);
  margin: 1.25rem 0 1.75rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--cta-button);
  font-weight: 400;
  max-width: 36rem;
}

.msacwl-carousel-wrap {
  margin-bottom: 1.5rem;
}

/*-- текс для CTA  --*/
.cta-text-glare {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  color: #de4b4b;
  position: relative;
  display: inline-block;
  overflow: hidden;
  letter-spacing: 0.5px;
}

.cta-text-glare::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(236, 228, 228, 0.7),
      transparent);
  animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }

  35% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

/* ===== Общие стили ===== */
ul.wp-block-list {
  padding-left: 2rem;
  /* ≈28px — достаточно места для маркера + отступ */
  margin-top: 0;
  margin-bottom: 1.25rem;
  /* лёгкий отступ снизу для разделения от следующего блока */
  color: #373c41;
  line-height: 1.6;
  /* если не задан глобально — улучшает читаемость */
}

ul.wp-block-list li {
  margin-bottom: 0.5rem;
  /* небольшой отступ между пунктами */
  padding-left: 0;
  /* убираем лишнее */
  position: relative;
  /* если вдруг понадобится кастомный маркер позже */
}

/* Необязательно, но полезно: уточнение маркера */
ul.wp-block-list li::marker {
  color: #5a6268;
  /* чуть мягче основного текста — снижает визуальный шум */
}

.sitemap a {
  text-decoration: none;
}

/* ===== / общие стили ===== */

/* ===== БЛОК УТП (оптимизированный под ваш бренд) ===== */
.front-utp {
  margin-bottom: 2rem;
}

/* Уровень 1: Имя (brand) */
.utp-name {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  line-height: 1.05;
  color: var(--sp-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.03);
}

/* Уровень 2: Специализация */
.utp-specialization {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 1.6rem);
  line-height: 1.3;
  color: #43535a;
  margin: 1rem 0 0.75rem;
  position: relative;
  display: inline-block;
}

.utp-specialization::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Уровень 3: Ценностное предложение */
.utp-value {
  font-family: var(--font-sans);
  font-size: clamp(1.15rem, 3vw, 1.35rem);
  line-height: 1.5;
  color: var(--sp-text-medium);
  margin-bottom: 1.25rem;
  max-width: 580px;
  padding-left: 0.5rem;
  border-left: 3px solid rgba(89, 120, 132, 0.15);
}

/* Бейдж локации (упрощенный) */
.meta-item-header-front {
  margin-top: 1.5rem;
}

.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: rgba(89, 120, 132, 0.06);
  border-radius: 30px;
  font-size: 0.95rem;
  color: var(--sp-text-medium);
  border: 1px solid rgba(89, 120, 132, 0.12);
  font-weight: 500;
}

.location-badge i {
  font-size: 1rem;
  color: var(--sp-primary);
  opacity: 0.8;
}

/* Адаптивность */
@media (max-width: 768px) {
  .utp-name {
    font-size: clamp(2.2rem, 6.5vw, 3rem);
    margin-bottom: 0.4rem;
  }

  .utp-specialization {
    font-size: clamp(1.3rem, 3.5vw, 1.7rem);
    margin: 0.75rem 0 0.5rem;
  }

  .utp-specialization::after {
    width: 45px;
    height: 1.5px;
  }

  .utp-value {
    font-size: clamp(1rem, 2.8vw, 1.2rem);
    padding-left: 0.4rem;
    border-left-width: 2px;
  }

  .location-badge {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* Плавное появление */
.utp-name {
  animation: fadeSlideUp 0.5s ease-out forwards;
  opacity: 0;
}

.utp-specialization {
  animation: fadeSlideUp 0.5s ease-out 0.1s forwards;
  opacity: 0;
}

.utp-value {
  animation: fadeSlideUp 0.5s ease-out 0.2s forwards;
  opacity: 0;
}

.location-badge {
  animation: fadeSlideUp 0.5s ease-out 0.3s forwards;
  opacity: 0;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* ============================================
   НАВИГАЦИЯ - БОЛЕЕ ПРОСТОЙ ПОДХОД
   ============================================ */

/* Общие стили для всех устройств */
.sp-logo,
.custom-logo a,
.custom-logo {
  max-height: 60px;
  width: auto;
}

#mainNavbar {
  z-index: 1030;
  background-color: var(--sp-primary) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Десктоп (>= 992px) - фиксированное меню */
@media (min-width: 992px) {
  #mainNavbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--shadow-sm);
  }

  body {
    padding-top: 80px !important;
    transition: padding-top 0.3s ease;
  }

  /* Сжатое меню */
  #mainNavbar.navbar-scrolled {
    padding-top: 0.5rem !important;
    /* padding-bottom: 0.5rem !important;*/
    box-shadow: var(--shadow-md);
  }

  body.navbar-scrolled {
    padding-top: 60px !important;
  }

  /* Логотип */
  .navbar-brand img {
    height: 50px;
    transition: height 0.3s ease;
  }

  #mainNavbar.navbar-scrolled .navbar-brand img {
    height: 40px;
  }
}

/* Мобильные (< 992px) - sticky с hide-on-scroll */
@media (max-width: 991.98px) {
  #mainNavbar {
    position: fixed !important;
    /* Используем fixed для мобильных */
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.3s ease;
  }

  /* Скрытое состояние */
  #mainNavbar.mobile-nav-hidden {
    transform: translateY(-100%);
  }

  /* Показанное состояние */
  #mainNavbar.mobile-nav-visible {
    transform: translateY(0);
    box-shadow: var(--shadow-md);
    background-color: var(--sp-primary) !important;
  }

  /* Убираем отступ body на мобильных */
  body {
    padding-top: 0 !important;
  }

  /* Добавляем верхний отступ для контента */
  .mobile-nav-spacer {
    height: 60px;
    display: block;
  }
}









/* Навигационные ссылки */
.navbar-nav .nav-link {
  position: relative;
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0.5rem 1rem !important;
  transition: var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: var(--text-white) !important;
  transform: translateY(-2px);
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: var(--text-white);
  transition: var(--transition-smooth);
  transform: translateX(-50%);
  opacity: 0;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 80%;
  opacity: 1;
}

/* Пункты меню */
.post-nav li,
.offcanvas-menu li,
.top-menu li,
.footer-menu li {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 0.9rem;
}

.offcanvas-menu li a {
  margin-bottom: 0.7rem;
  color: var(--text-white);
  text-decoration: none;
}

.offcanvas-menu li {
  margin-bottom: 0.7rem;
}

/* Выпадающее меню */
.dropdown-menu {
  animation: dropdownFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  border: none;
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dropdown-item {
  transition: var(--transition);
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  margin: 2px 0.5rem;
  width: calc(100% - 1rem);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  transform: translateX(5px);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



/* Кнопка меню */
.navbar-toggler {
  border: 0;
  border-radius: 8px;
  padding: 10px;
  transition: var(--transition);
  background: transparent;
  color: #e2dfdf;
}

.navbar-toggler:focus {
  background: rgba(254, 254, 254, 0.1);
}

.navbar-toggler[aria-expanded="true"] {
  background: rgba(89, 120, 132, 0.1);
}

.menu-icon {
  transition: transform 0.3s ease;
}

.navbar-toggler[aria-expanded="true"] .menu-icon {
  transform: rotate(90deg);
}

/* ============================================
   OFF-CANVAS МЕНЮ
   ============================================ */
.offcanvas {
  background-color: var(--sp-primary);
  transition: transform 0.3s ease-in-out;
  color: var(--text-white);
}

.offcanvas-end {
  border-left: 1px solid rgba(125, 124, 124, 0.1);
}

.offcanvas-header {
  color: #f7f6f6;
  padding: 1rem 1.5rem;
}

.offcanvas-title {
  color: #f7f6f6;
  font-weight: 500;
  font-family: var(--font-heading);
}

.offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
  background-size: 0.8rem;
}

.offcanvas-header .btn-close:hover {
  opacity: 1;
}

.offcanvas-body .nav-link {
  padding: 1rem 0 !important;
  font-size: 1.05rem;
  color: #f1f3f4 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: var(--transition);
  position: relative;
  font-family: var(--font-heading);
}

.offcanvas-body .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: #4a6fa5;
  border-radius: 0 2px 2px 0;
}

/* ============================================
   HERO СЕКЦИЯ С ВИДЕО
   ============================================ */
.hero-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

.video-container {
  aspect-ratio: 16/10;
  background: #000;
  transition: transform 0.3s ease;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.video-container:hover {
  transform: translateY(-5px);
}

.video-poster {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(0.95);
}

.video-play-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  transition: var(--transition);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.video-play-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* ============================================
   КАРТОЧКИ КЕЙСОВ
   ============================================ */
.case-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  height: 100%;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.case-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.case-tag {
  display: inline-block;
  background: var(--bg-sp-light);
  color: var(--sp-primary);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.case-title {
  font-size: 1.3rem;
  font-family: var(--font-heading);
  color: var(--sp-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* кнопка читать далее в кейсах на главной */
.btn-case {
  background: transparent;
  border: 1.5px solid #c7d6dc;
  color: #3f5862;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
  border-radius: 0;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-case:hover {
  background: var(--sp-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(89, 120, 132, 0.2);
}

.btn-case::after {
  content: '→';
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.btn-case:hover::after {
  transform: translateX(3px);
}

.sp-btn-primary {
  border-radius: 0;
  background: #597884;
  color: #fff;
}

.sp-btn-primary:hover {
  background: #f26061;
  color: #fff;
}

/* ============================================
   БЛОК КОНТАКТОВ
   ============================================ */
.contact-method {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  transition: var(--transition);
  border: 2px solid transparent;
  text-decoration: none;
  color: inherit;
}

.contact-method:hover {
  background: white;
  border-color: var(--sp-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.contact-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5rem;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: white;
}

.icon-phone {
  background: linear-gradient(135deg, #4a6fa5, #6a8fc9);
}

.icon-whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
}

.icon-telegram {
  background: linear-gradient(135deg, #0088cc, #34AADF);
}

.icon-max {
  background: linear-gradient(135deg, #07f, #4C75A3);
}

.contact-info {
  flex-grow: 1;
}

.contact-name {
  font-weight: 600;
  color: var(--sp-text-dark);
  margin-bottom: 0.3rem;
}

/* ============================================
   МЕССЕНДЖЕРЫ
   ============================================ */
.messenger-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.messenger-icon-link,
.cta-messenger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: var(--transition);
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  text-decoration: none;
  color: inherit;
}

.messenger-icon-link:hover,
.cta-messenger-icon:hover {
  background: #e9ecef;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Специфичные стили для иконок в CTA */
.cta-messenger-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  font-size: 36px;
}

.cta-icon-whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25D366;
  border: 2px solid rgba(37, 211, 102, 0.2);
}

.cta-icon-telegram {
  background: rgba(0, 136, 204, 0.12);
  color: #0088cc;
  border: 2px solid rgba(0, 136, 204, 0.2);
}

/* ============================================
     zebra-list оффер на главной
   ============================================ */
ul.zebra-list {
  padding-left: 1rem;
}

.zebra-list {
  list-style: none;
  margin: 1.5em 0;
  font-size: 1.05em;
  line-height: 1.6;
  color: #333;
}

/* Чередование фона — очень мягко */
.zebra-list li:nth-child(even) {
  background-color: #f7f7f7;
  padding: 0.8em 1em;
  margin: 0 -1em;
  border-radius: 4px;
}

.wp-block-media-text>.wp-block-media-text__content {
  padding: 0 4%;
}

/* ============================================
   CTA БЛОК (GLASSMORPHISM)
   ============================================ */
.cta-glass-section {
  margin: 80px 0;
}

.cta-glass-block {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  overflow: hidden;
  transition: var(--transition-smooth);
  position: relative;
  z-index: 1;
}

.cta-glass-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 100%);
  border-radius: 24px;
  z-index: -1;
  pointer-events: none;
}

.cta-glass-content {
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 2;
}

.cta-glass-title {
  color: var(--sp-text-dark);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #4a6fa5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-glass-description {
  color: var(--sp-text-light);
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 35px;
}

.cta-messenger-icons {
  display: flex;
  gap: 20px;
  margin-bottom: 35px;
}

@keyframes messenger-float {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

.cta-icon-whatsapp {
  animation: messenger-float 3s ease-in-out infinite;
}

.cta-icon-telegram {
  animation: messenger-float 3s ease-in-out infinite 0.5s;
}

.cta-messenger-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.cta-icon-whatsapp:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.4);
}

.cta-icon-telegram:hover {
  background: rgba(0, 136, 204, 0.2);
  border-color: rgba(0, 136, 204, 0.4);
}

.cta-main-button {
  background: linear-gradient(135deg, #4a6fa5 0%, #6a93cb 100%);
  border: none;
  border-radius: 16px;
  padding: 18px 40px;
  font-weight: 600;
  font-size: 1.1rem;
  color: white;
  transition: var(--transition);
  box-shadow:
    0 8px 20px rgba(74, 111, 165, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-heading);
}

.cta-main-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transition: left 0.6s ease;
}

.cta-main-button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 15px 30px rgba(74, 111, 165, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: white;
}

.cta-main-button:hover::before {
  left: 100%;
}

.cta-glass-image {
  height: 100%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}

.cta-image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 30px;
}

.call-text {
  font-family: var(--font-heading);
  text-transform: uppercase;
  color: #de4b4b;
  font-weight: 600;
}

.cta-note {
  color: #6c757d;
  font-size: 0.9rem;
  margin-top: 20px;
  padding: 15px;
  border-radius: 10px;
  background: rgba(248, 249, 250, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* ============================================
   КНОПКА "НАВЕРХ"
   ============================================ */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: none;
  z-index: 999;
  opacity: 0.6;
  transition: opacity 0.3s;
  align-items: center;
  justify-content: center;
  color: #252424;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
}

#backToTop.show {
  display: flex;
}

#backToTop:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================================
   ПОДВАЛ САЙТА
   ============================================ */
.footer-copyright a,
.footer-copyright {
  color: var(--footer-text);
  font-size: 0.95rem;
  margin-top: .5rem;
}

.footer-seo {
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.5rem;
}

.footer-seo span {
  font-family: var(--font-heading);
  color: white;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  display: block;
}

.footer-seo p {
  opacity: 0.9;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

.footer-cta {
  background-color: var(--cta-bg);
  border-radius: var(--border-radius);
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
  border-left: 5px solid var(--cta-button);
  box-shadow: var(--shadow-sm);
}

.footer-cta h4 {
  color: white;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-family: var(--font-heading);
}

.footer-cta p {
  opacity: 0.9;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}

.tg-subscribe-btn {
  background-color: var(--cta-button);
  color: #2c3e50;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: var(--transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  font-family: var(--font-heading);
}

.tg-subscribe-btn:hover {
  background-color: var(--cta-button-hover);
  color: #1a252f;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.footer-menu-horizontal {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-menu-horizontal ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-menu-horizontal a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  padding: 0.5rem 0;
  position: relative;
  font-family: var(--font-heading);
}

.footer-menu-horizontal a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--cta-button);
  transition: width 0.3s ease;
}

.footer-menu-horizontal a:hover::after {
  width: 100%;
}

.bg-sp-primary {
  background: var(--sp-primary);
}

/*====== Блок СЕО мета в подвале ===*/
.meta-descript {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  padding: 5px;
  border-radius: 8px;
}

.meta-descript span {
  vertical-align: middle;
  margin: 0;
  font-size: 1rem;
}

/* ============================================
   СТРАНИЦА ЦЕН
   ============================================ */
.pricing-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  height: 100%;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
  border: 2px solid rgba(132, 207, 157, 0.8);
  position: relative;
  overflow: hidden;
}

.featured-badge {
  position: absolute;
  top: 20px;
  right: -35px;
  background: var(--accent);
  color: white;
  padding: 6px 40px;
  font-size: 0.85rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 3px 10px rgba(255, 154, 118, 0.3);
}

.plan-name {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--sp-primary);
  font-family: var(--font-heading);
}

.plan-description {
  color: var(--sp-text-light);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.price {
  font-size: 2rem;
  font-weight: 800;
  color: #f05f60;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.price-period {
  color: var(--sp-text-light);
  font-size: 1rem;
  font-weight: 500;
}

.savings-badge {
  display: inline-block;
  background-color: #e1f7e9;
  color: #27ae60;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2.5rem;
  flex-grow: 1;
  text-align: left;
}

.features-list li {
  padding: 0.6rem 0;
  position: relative;
  padding-left: 2rem;
}

.features-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--sp-primary);
  font-weight: bold;
  font-size: 1.1rem;
}

.features-list li.disabled {
  color: #bbb;
}

.features-list li.disabled::before {
  content: '–';
  color: #ddd;
}

.btn-choose {
  background: linear-gradient(135deg, var(--sp-primary), #4a6771);
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: var(--border-radius);
  width: 100%;
  transition: var(--transition);
  box-shadow: 0 5px 15px rgba(89, 120, 132, 0.3);
  cursor: pointer;
  font-family: var(--font-heading);
}

.btn-choose:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(89, 120, 132, 0.4);
  color: white;
}

/* Блок бронирования в карточках цен */
.booking-section {
  padding-top: 1.5rem;
  margin-top: auto;
  border-top: 1px solid #eee;
}

.booking-title {
  color: var(--sp-text-medium);
  margin-bottom: 1.2rem;
  line-height: 1.3;
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
}

/* Иконки мессенджеров в карточках */
.messengers-row {
  margin-bottom: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.messenger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  text-decoration: none;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.messenger-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0.1;
  z-index: 1;
}

.messenger-btn i {
  font-size: 1.3rem;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.messenger-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.messenger-btn:hover i {
  transform: scale(1.1);
}

/* Цвета мессенджеров */
.whatsapp-btn {
  color: #25D366;
}

.whatsapp-btn:hover {
  color: #128C7E;
}

.telegram-btn {
  color: #0088cc;
}

.telegram-btn:hover {
  color: #34AADF;
}

.max-btn {
  color: #07f;
}

.max-btn:hover {
  color: #4C75A3;
}

/* Телефон */
.phone-row {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.phone-link {
  color: #526c76;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: var(--transition);
  background-color: rgba(89, 120, 132, 0.05);
}

.phone-link:hover {
  color: var(--sp-primary);
  background-color: rgba(89, 120, 132, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phone-subtitle {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

/* ============================================
   КОМПАКТНАЯ ВЕРСИЯ КАРТОЧЕК ЦЕН (ГЛАВНАЯ)
   ============================================ */
.pricing-card-compact {
  background: white;
  border-radius: var(--border-radius);
  padding: 2rem 1.5rem;
  height: 100%;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.pricing-card-compact:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: rgba(89, 120, 132, 0.2);
}

/* Рекомендуемая карточка */
.pricing-card-compact.featured {
  border: 2px solid var(--accent);
  background: linear-gradient(to bottom, white 0%, rgba(132, 207, 157, 0.03) 100%);
}

/* Декоративный элемент */
.pricing-card-decor {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.decor-primary {
  background: linear-gradient(90deg, var(--sp-primary), #7da0ad);
}

.decor-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

/* Бейдж "Рекомендуется" */
.featured-badge {
  position: absolute;
  top: 20px;
  right: -30px;
  background: var(--accent);
  color: white;
  padding: 5px 35px;
  font-size: 0.8rem;
  font-weight: 600;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(132, 207, 157, 0.3);
  z-index: 2;
}

/* Заголовок карточки */
.pricing-compact-header {
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.pricing-icon {
  font-size: 2.5rem;
  color: var(--sp-primary);
}

.pricing-card-compact.featured .pricing-icon {
  color: var(--accent);
}

.price-compact {
  font-size: 1.8rem;
  font-weight: 800;
  color: #f05f60;
  line-height: 1;
  margin: 0.5rem 0;
}

/* Список цен  компактный */
.features-list-compact {
  list-style: none;
  padding: 0 1rem;
  margin: 0;
  flex-grow: 1;
  text-align: left;
}

.features-list-compact li {
  padding: 0.5rem 0;
  position: relative;
  color: var(--sp-text-medium);
  font-size: 0.95rem;
}

.features-list-compact li::before {
  content: '✓';
  color: var(--accent);
  font-weight: bold;
  margin-right: 8px;
}

/* Бейдж экономии */
.saving-badge {
  background-color: rgba(37, 211, 102, 0.1);
  color: #128C7E;
  border: 1px solid rgba(37, 211, 102, 0.2);
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-icon {
  vertical-align: middle;
}

/* Футер карточки */
.pricing-compact-footer {
  margin-top: auto;
}

.btn-pricing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
  width: 100%;
  text-decoration: none;
  font-family: var(--font-heading);
}

.btn-outline-primary {
  border: 2px solid #ced7da;
  color: var(--sp-primary);
  text-transform: uppercase;
  font-size: .8rem;
}

.btn-outline-primary:hover {
  color: var(--sp-text-medium);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(89, 120, 132, 0.2);
}

/* Блок записи для рекомендуемой карточки */
.booking-heading {
  color: var(--sp-text-medium);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-color);
}

/* Иконки мессенджеров в компактной версии */
.messengers-row.compact {
  margin-bottom: 1rem;
}

.messengers-row.compact .messenger-btn {
  width: 44px;
  height: 44px;
}

.messengers-row.compact .messenger-btn i {
  font-size: 1.2rem;
}

/* Телефон в компактной версии */
.phone-compact {
  margin-bottom: 1rem;
}

.phone-link-compact {
  color: var(--sp-text-dark);
  font-size: 1rem;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  transition: var(--transition);
  background-color: rgba(89, 120, 132, 0.05);
}

.phone-link-compact:hover {
  color: var(--sp-primary);
  background-color: rgba(89, 120, 132, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Гарантийный бейдж внизу */
.guarantee-badge {
  background: rgba(132, 207, 157, 0.1);
  border: 1px solid rgba(132, 207, 157, 0.2);
  color: #2a6b3f;
}

/* ============================================
   ПРОЦЕСС НА СТРАНИЦЕ ЦЕН
   ============================================ */
.process-step-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.process-step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.step-number-wrapper {
  position: relative;
  width: 50px;
  height: 50px;
}

.process-step {
  text-align: center;
  padding: 1.5rem;
}

.step-number {
  width: 50px;
  height: 50px;
  background: var(--sp-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 1.5rem;
  font-size: 1.3rem;
}

.process-step-card:hover .step-number {
  transform: scale(1.1);
}

.step-icon-wrapper {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--accent);
  z-index: 3;
}

.step-icon {
  color: var(--accent);
  font-size: 0.9rem;
}

/* Соединительные линии (только для десктопа) */
.process-connector {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: calc(100% - 50px);
  pointer-events: none;
}

.horizontal-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      rgba(89, 120, 132, 0.2),
      transparent);
  transform: translate(-50%, -50%);
}

.vertical-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
      transparent,
      rgba(89, 120, 132, 0.2),
      transparent);
  transform: translateX(-50%);
}

/*==========   гарантии на странице цен   ======== */
.guarantee-card {
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--sp-primary);
  margin-bottom: 2rem;
}

.guarantee-icon {
  width: 80px;
  height: 80px;
  color: #f26061;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

/* ============================================
   FAQ (ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ)
   ============================================ */
.faq-item {
  background: var(--primary-lighter);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

/* Зебра-эффект для четных элементов */
.faq-item:nth-child(even) {
  background: var(--primary-light);
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  border-color: rgba(132, 207, 157, 0.3);
}

.faq-question {
  padding: 1.5rem 1.5rem 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--sp-primary);
  font-size: 1.1rem;
  line-height: 1.3;
  position: relative;
  padding-left: 2rem;
}

/* Акцентная линия перед вопросом */
.faq-question::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  width: 4px;
  height: 1.5rem;
  background: var(--accent);
  border-radius: 2px;
}

.faq-answer {
  padding: 0.75rem 1.5rem 1.5rem;
  color: var(--sp-text-medium);
  line-height: 1.6;
  border-top: 1px dashed rgba(89, 120, 132, 0.15);
  margin-top: 0.75rem;
  padding-left: 2rem;
}

.faq-item:hover .faq-question {
  color: var(--sp-text-dark);
}

.faq-item:hover .faq-question::before {
  background: var(--accent-dark);
}

.faq-item:hover .faq-answer {
  color: var(--sp-text-dark);
}

/* ============================================
   МЕТА ИНФОРМАЦИЯ
   ============================================ */
.meta-item-header.mt-2 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.12) 0%,
      rgba(89, 120, 132, 0.08) 100%);
  padding: 0.85rem 1.75rem;
  border-radius: 2rem;
  margin-top: 1.5rem;
  border: 1px solid rgba(89, 120, 132, 0.15);
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.meta-item-header.mt-2:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(89, 120, 132, 0.1);
}


.meta-item-header.mt-2 span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #3a494f;
  font-weight: 500;
}

.meta-item-header-front {
  font-size: 1.1rem;
  color: #3a494f;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.meta-item-header-front i,
.meta-item-header.mt-2 i {
  font-size: 1.1rem;
  color: #8fdca4;
}

.meta-section {
  margin-bottom: 70px;
}

.meta-title {
  color: var(--sp-primary);
  font-weight: 600;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  display: inline-block;
  font-family: var(--font-heading);
}

.meta-container {
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
}

.avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: var(--shadow-sm);
}

.avatar-lg {
  width: 70px;
  height: 70px;
}

.avatar-sm {
  width: 40px;
  height: 40px;
}

.meta-tag {
  background-color: rgba(89, 120, 132, 0.1);
  color: var(--sp-primary);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.meta-tag-accent {
  background-color: rgba(132, 207, 157, 0.2);
  color: #2a6b3f;
}

.meta-item {
  color: var(--sp-text-medium);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-item i {
  color: var(--accent);
}

.author-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  padding: 8px 12px;
  border-radius: 8px;
}

.author-link:hover {
  background-color: rgba(89, 120, 132, 0.08);
  transform: translateY(-1px);
}

.author-link:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   ХЛЕБНЫЕ КРОШКИ
   ============================================ */
.sp-breadcrumbs {
  background: var(--bg-sp-light);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #716c6c;
}

.sp-breadcrumbs p {
  margin-bottom: 0;
}

.sp-breadcrumbs a {
  color: #1c51a3;
  text-decoration: none;
}

.sp-breadcrumbs a:hover {
  text-decoration: underline;
}

/* ============================================
   МОЙ ПОДХОД
   ============================================ */
.approach-card {
  background: white;
  border-radius: var(--border-radius);
  padding: 2.5rem 2rem;
  height: 100%;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.approach-icon {
  width: 70px;
  height: 70px;
  background: #f26061;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #fff;
  font-size: 1.8rem;
}

/* ============================================
   БЛОК ОБРАЗОВАНИЯ - ВАРИАНТ 3 (КОМПАКТНЫЙ)
   ============================================ */
.education-badge {
  background: linear-gradient(135deg,
      var(--primary-light) 0%,
      var(--primary-lighter) 100%);
  border-radius: var(--border-radius);
  padding: 2rem;
  text-align: center;
  border: 2px solid rgba(89, 120, 132, 0.1);
  transition: var(--transition);
}

.education-badge:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.education-compact-card {
  background: white;
  border-radius: calc(var(--border-radius) - 4px);
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.education-compact-card:hover {
  background: var(--primary-lighter);
  border-color: var(--accent);
  transform: translateX(5px);
  box-shadow: var(--shadow-sm);
}

.compact-icon {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Вспомогательные классы */
.bg-accent {
  background-color: var(--accent) !important;
}

.bg-primary-light {
  background-color: var(--primary-light) !important;
}

.education-practic-card {
  font-size: 2rem;
  color: var(--sp-primary);
  font-weight: 600;
}

.education-meta {
  color: #4c545c;
  font-size: .9rem;
  font-weight: normal;
}

/* ============================================
   РАЗДЕЛИТЕЛИ СЕКЦИЙ
   ============================================ */
.section-divider-corners {
  position: relative;
  height: 30px;
  margin: 3.5rem 0;
}

.section-divider-corners::before,
.section-divider-corners::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg,
      var(--sp-primary) 0%,
      transparent 100%);
}

.section-divider-corners::before {
  left: 0;
}

.section-divider-corners::after {
  right: 0;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--sp-primary) 100%);
}

.section-divider-corners .corner-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--sp-text-light);
  font-size: 1.2rem;
  opacity: 0.5;
}

/* ============================================
   КНОПКИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ
   ============================================ */
.cta-compact-wrapper {
  max-width: 500px;
}

/* WhatsApp кнопка */
.btn-whatsapp {
  background: linear-gradient(135deg,
      rgba(37, 211, 102, 0.45) 0%,
      rgba(18, 140, 126, 0.30) 100%);
  color: #0a6e4f !important;
  border: 2px solid rgba(37, 211, 102, 0.5);
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-weight: 700;
  transition: var(--transition);
  flex: 1;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.15);
}

.btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(37, 211, 102, 0.25) 0%,
      rgba(18, 140, 126, 0.15) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-whatsapp:hover {
  background: linear-gradient(135deg,
      rgba(37, 211, 102, 0.55) 0%,
      rgba(18, 140, 126, 0.35) 100%);
  color: #084734 !important;
  border-color: rgba(37, 211, 102, 0.7);
  transform: translateY(-3px);
  box-shadow:
    0 8px 25px rgba(37, 211, 102, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-whatsapp:hover::before {
  opacity: 1;
}

.btn-whatsapp i {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  filter: brightness(1.1);
}

/* Телефон кнопка */
.btn-phone {
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.28) 0%,
      rgba(89, 120, 132, 0.18) 100%);
  color: #2A4859 !important;
  border: 2px solid rgba(89, 120, 132, 0.5);
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-weight: 700;
  transition: var(--transition);
  flex: 1;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(89, 120, 132, 0.12);
}

.btn-phone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.2) 0%,
      rgba(89, 120, 132, 0.12) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-phone:hover {
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.35) 0%,
      rgba(89, 120, 132, 0.25) 100%);
  color: #1C2E3F !important;
  border-color: rgba(89, 120, 132, 0.7);
  transform: translateY(-3px);
  box-shadow:
    0 8px 25px rgba(89, 120, 132, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.btn-phone:hover::before {
  opacity: 1;
}

.btn-phone i {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  filter: brightness(1.1);
}

/* Анимации для кнопок */
@keyframes subtle-pulse {
  0% {
    box-shadow: 0 8px 25px rgba(89, 120, 132, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  50% {
    box-shadow: 0 10px 30px rgba(89, 120, 132, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  100% {
    box-shadow: 0 8px 25px rgba(89, 120, 132, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

@keyframes subtle-pulse-whatsapp {
  0% {
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  50% {
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }

  100% {
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

.btn-whatsapp:hover {
  animation: subtle-pulse-whatsapp 2s ease-in-out infinite;
}

.btn-phone:hover {
  animation: subtle-pulse 2s ease-in-out infinite;
}

/* Декоративный контур для кнопок */
.btn-whatsapp::after,
.btn-phone::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: calc(var(--border-radius) + 4px);
  background: linear-gradient(135deg,
      rgba(37, 211, 102, 0.2),
      rgba(18, 140, 126, 0.1),
      rgba(37, 211, 102, 0.2));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-phone::after {
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.2),
      rgba(89, 120, 132, 0.1),
      rgba(89, 120, 132, 0.2));
}

.btn-whatsapp:hover::after,
.btn-phone:hover::after {
  opacity: 1;
}

/* ============================================
   БЛОК СВЯЗАННОГО КЕЙСА
   ============================================ */
.related-case-block {
  background-color: #f8fafc;
  border-radius: 12px;
}

.case-preview-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(89, 120, 132, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.case-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(89, 120, 132, 0.12);
}

.case-excerpt {
  color: #4a5568;
  line-height: 1.6;
  font-size: 1.05rem;
}

.case-meta {
  color: #718096;
  font-size: 0.9rem;
}

.case-meta .fas {
  color: #48bb78;
}

.case-read-btn {
  background-color: #597884;
  color: white !important;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  transition: all 0.3s ease;
}

.case-read-btn:hover {
  background-color: #4a6771;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(89, 120, 132, 0.2);
}

/* ============================================
   CSS ДЛЯ МОДУЛЬНОГО ШАБЛОНА КЕЙСА
   ============================================ */
.case-article {
  max-width: 900px;
  margin: 0 auto;
}

.case-block {
  background: white;
  border-radius: var(--border-radius);
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: var(--transition);
}

.case-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.block-title {
  color: var(--sp-primary) !important;
  font-size: 1.5rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary-light);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

.block-title i {
  font-size: 1.3rem;
  color: var(--sp-primary);
}

/* Шапка кейса */
.case-header {
  text-align: center;
  padding: 3rem 0;
  background: linear-gradient(135deg, var(--primary-lighter) 0%, transparent 100%);
  border-radius: var(--border-radius);
  margin-bottom: 2.5rem;
  border: 1px solid var(--border-color);
}

.case-category {
  display: inline-block;
  background: var(--sp-primary);
  color: white;
  padding: 0.5rem 1.75rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--font-heading);
}

.case-title a,
.case-title {
  font-family: var(--font-heading);
  color: var(--sp-primary);
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

.case-subtitle {
  font-size: 1.25rem;
  color: var(--sp-text-light);
  font-weight: 400;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  font-family: var(--font-sans);
}

/* Блок "Было-Стало" */
.case-was-now {
  position: relative;
  overflow: hidden;
}

.was-now-title {
  text-align: center;
  color: var(--sp-primary);
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
  position: relative;
  padding-bottom: 1rem;
  font-family: var(--font-heading);
  font-weight: 600;
}

.was-now-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--sp-primary), transparent);
}

.was-title {
  color: var(--sp-accent-red);
  font-family: var(--font-heading);
}

.now-title {
  color: var(--accent-dark);
  font-family: var(--font-heading);
}

.column-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
}

.was-content ul,
.now-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.was-content li,
.now-content li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  transition: var(--transition);
  font-family: var(--font-sans);
  color: var(--sp-text-dark);
}

.was-content li {
  border-left: 3px solid var(--sp-accent-red);
  background-color: rgba(240, 95, 96, 0.05);
}

.now-content li {
  border-left: 3px solid var(--accent);
  background-color: rgba(132, 207, 157, 0.05);
}

.was-content li:hover {
  background-color: rgba(240, 95, 96, 0.1);
}

.now-content li:hover {
  background-color: rgba(132, 207, 157, 0.1);
}

.was-content li::before {
  content: "•";
  color: var(--sp-accent-red);
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  font-size: 1.2rem;
}

.now-content li::before {
  content: "✓";
  color: var(--accent);
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Основной контент */
.case-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--sp-text-dark);
  font-family: var(--font-sans);
}

.case-content h2,
.case-content h3 {
  color: var(--sp-primary);
  margin: 2rem 0 1rem;
  font-weight: 600;
  font-family: var(--font-heading);
}

.case-content h2 {
  font-size: 1.8rem;
  border-bottom: 1px solid var(--primary-light);
  padding-bottom: 0.5rem;
}

.case-content h3 {
  font-size: 1.5rem;
  color: var(--sp-text-medium);
}

/* Дополнительные блоки */
.extra-block {
  background: rgb(164, 186, 194, 8%);
  border-left: 4px solid var(--sp-primary);
  padding: 2rem;
  border-radius: var(--border-radius);
}

.extra-block .block-title {
  font-size: 1.4rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
  color: var(--sp-primary);
  font-family: var(--font-heading);
}

/* Цитата-блок */
.quote-block {
  background: linear-gradient(135deg, rgba(89, 120, 132, 0.1) 0%, rgba(89, 120, 132, 0.05) 100%);
  border-radius: var(--border-radius);
  padding: 2.5rem;
  font-size: 1.1rem;
  color: var(--sp-text-dark);
  position: relative;
  border: 1px solid var(--border-color);
  margin: 3rem 0;
  font-family: var(--font-sans);
  line-height: 1.6;
}

.quote-block::before {
  content: '❝';
  position: absolute;
  top: -15px;
  left: 25px;
  font-size: 4rem;
  color: var(--sp-primary);
  opacity: 0.2;
  font-family: var(--font-heading);
}

.quote-block blockquote {
  margin: 0;
  position: relative;
  z-index: 1;
  padding-left: 1.5rem;
}

.quote-block blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* ============================================
   СТИЛЬ ДЛЯ БЛОКЦИТАТ WORDPRESS
   ============================================ */
blockquote {
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.05) 0%,
      rgba(89, 120, 132, 0.02) 100%);
  border-left: 4px solid var(--accent);
  padding: 1.75rem 2rem 1.75rem 3.5rem;
  margin: 2.5rem 0;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  position: relative;
  font-style: normal;
  color: var(--sp-text-dark);
  font-size: 1.1rem;
  line-height: 1.7;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

blockquote:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg,
      rgba(89, 120, 132, 0.08) 0%,
      rgba(89, 120, 132, 0.04) 100%);
}

blockquote::before {
  content: '❝';
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-size: 2.5rem;
  color: var(--accent);
  opacity: 0.7;
  font-family: var(--font-heading);
  line-height: 1;
}

blockquote cite,
blockquote .wp-block-quote__citation {
  display: block;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--sp-text-light);
  font-style: normal;
  font-weight: 500;
  padding-left: 1.5rem;
  position: relative;
}

blockquote cite::before,
blockquote .wp-block-quote__citation::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--sp-primary);
}

/* ============================================
   Прогресс бар в меню
   ============================================ */
#cont {
  width: 100%;
  position: fixed;
  height: 2px;
  z-index: 1031;
  /* Должен быть ВЫШЕ навигации (1030) */
  top: 0;
  left: 0;
  pointer-events: none;
  /* Чтобы не мешал кликам */
}

#progress {
  width: 0%;
  height: 4px;
  background: var(--accent);
  transition: width 0.1s ease;
}

/* ============================================
  СТРАНИЦА КОНТАКТЫ
   ============================================ */
/* Плавные hover-эффекты для карточек контактов  */
.contact-method {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.contact-method::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.05), transparent);
  transition: width 0.4s ease;
  z-index: 1;
}

.contact-method:hover::before {
  width: 100%;
}

.contact-method:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--bs-primary) !important;
}

/* Мягкая анимация для CTA стрелки */
.contact-cta {
  transition: transform 0.3s ease, color 0.3s ease;
}

.contact-method:hover .contact-cta {
  transform: translateX(5px);
}

/* Для разных типов контактов */
.icon-phone.bg-primary:hover {
  background: linear-gradient(135deg, #4a6fa5, #6a8fc9) !important;
}

.icon-whatsapp.bg-success:hover {
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

.icon-telegram.bg-info:hover {
  background: linear-gradient(135deg, #0088cc, #34AADF) !important;
}

.icon-max.bg-primary:hover {
  background: linear-gradient(135deg, #07f, #4C75A3) !important;
}

.carousel-image {
  height: 300px;
  object-fit: cover;
  width: 100%;
}

/* ============================================
   МЕДИА-ЗАПРОСЫ (АДАПТИВНОСТЬ)
   ============================================ */
/* Планшеты (от 768px до 992px) */
@media (max-width: 992px) {
  .hero-section {
    padding: 3rem 0;
  }

  .video-container {
    aspect-ratio: 16/9;
    max-width: 600px;
    margin: 0 auto;
  }

  .video-play-btn {
    width: 70px;
    height: 70px;
  }

  .cta-glass-content {
    padding: 40px 30px;
  }

  .cta-glass-title {
    font-size: 2.2rem;
  }

  .cta-glass-description {
    font-size: 1.1rem;
  }

  .cta-glass-image {
    min-height: 350px;
  }

  .site-info-section {
    padding: 2.5rem 0 2rem;
    background-attachment: scroll;
  }

  .footer-cta {
    text-align: center;
    padding: 1.5rem;
  }

  .sp-logo,
  .sp-logo a,
  img.custom-logo a,
  img.custom-logo {
    max-height: 45px;
    width: auto;

  }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
  .hero-section {
    padding: 2rem 0;
  }

  .sp-logo,
  .sp-logo a,
  img.custom-logo a,
  img.custom-logo {
    max-height: 45px;
    width: auto;

  }

  .video-container {
    aspect-ratio: 4/3;
    margin-top: 1.5rem;
  }

  .cta-glass-section {
    margin: 60px 0;
  }

  .cta-glass-content {
    padding: 25px 15px;
    text-align: center;
  }

  .cta-glass-title {
    font-size: 1.9rem;
  }

  .cta-glass-description {
    font-size: 1rem;
  }

  .cta-messenger-icons {
    justify-content: center;
    gap: 15px;
  }

  .cta-messenger-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .cta-main-button {
    padding: 16px 30px;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }

  .cta-glass-image {
    min-height: 300px;
  }

  .site-info-section {
    padding: 2rem 0 1.75rem;
    background-position: center 30%;
  }



  .site-description {
    margin: 1rem 0 1.5rem;
    padding-left: 1rem;
    font-size: 1.15rem;
  }

  .messenger-container {
    gap: 0.875rem;
    justify-content: center;
  }

  .messenger-icon-link {
    width: 56px;
    height: 56px;
  }

  .footer-menu-horizontal ul {
    gap: 1.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .pricing-card {
    padding: 2rem 1.5rem;
  }

  .pricing-card.featured {
    transform: none;
  }

  .cta-main-button {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 1rem;
  }

  /* Кейс модуль */
  .case-article {
    padding: 0 1rem;
  }

  .case-block {
    padding: 1.75rem;
    margin-bottom: 2rem;
  }

  .case-header {
    padding: 2rem 0;
  }

  .case-title {
    font-size: 1.8rem;
  }

  .case-subtitle {
    font-size: 1.1rem;
  }

  .was-now-title {
    font-size: 1.5rem;
  }

  .block-title {
    font-size: 1.3rem;
  }

  .case-content {
    font-size: 1rem;
  }

  .quote-block {
    padding: 1.75rem;
    font-size: 1.15rem;
  }

  .extra-block {
    padding: 1.5rem;
  }

  /* Образование */
  .education-badge {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .education-compact-card {
    padding: 1.25rem !important;
  }

  /* Процесс */
  .process-step-card {
    padding: 1.25rem;
  }

  .step-number-wrapper {
    width: 45px;
    height: 45px;
  }

  .step-number {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .step-icon-wrapper {
    width: 24px;
    height: 24px;
    top: -6px;
    right: -6px;
  }

  .step-icon {
    font-size: 0.8rem;
  }

  /* FAQ */
  .faq-item {
    margin-bottom: 1.25rem;
  }

  .faq-question {
    padding: 1.25rem 1.25rem 0.75rem;
    font-size: 1.05rem;
    padding-left: 1.75rem;
  }

  .faq-question::before {
    left: 1.25rem;
    top: 1.25rem;
    height: 1.25rem;
  }

  .faq-answer {
    padding: 0.75rem 1.25rem 1.25rem;
    padding-left: 1.75rem;
    font-size: 0.95rem;
  }
}

/* Маленькие мобильные устройства (до 576px) */
@media (max-width: 576px) {
  .cta-glass-block {
    border-radius: 20px;
  }

  .cta-glass-content {
    padding: 5px;
  }

  .cta-glass-title {
    font-size: 1.7rem;
  }

  .cta-messenger-icon {
    width: 50px;
    height: 50px;
    font-size: 22px;
  }

  .site-info-section {
    padding: 1.75rem 0 1.5rem;
  }

  .site-title {
    font-size: 1.9rem;
    padding-bottom: 0.5rem;
  }

  .footer-menu-horizontal ul {
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
  }

  /* Кейс модуль */
  .case-block {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .case-title {
    font-size: 1.6rem;
  }

  .was-now-title {
    font-size: 1.3rem;
  }

  .block-title {
    font-size: 1.2rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .column-title {
    font-size: 1.1rem;
  }

  .was-content li,
  .now-content li {
    padding: 0.6rem 0 0.6rem 1.75rem;
  }

  .quote-block {
    padding: 1.5rem;
    font-size: 1.1rem;
  }

  .quote-block::before {
    font-size: 3rem;
    top: -10px;
    left: 15px;
  }

  /* FAQ */
  .faq-item {
    margin-bottom: 1rem;
    border-radius: calc(var(--border-radius) - 2px);
  }

  .faq-question {
    padding: 1rem 1rem 0.5rem;
    font-size: 1rem;
    padding-left: 1.5rem;
  }

  .faq-question::before {
    left: 1rem;
    width: 3px;
    height: 1rem;
    top: 1rem;
  }

  .faq-answer {
    padding: 0.5rem 1rem 1rem;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
  }

  /* Pricing компакт */
  .pricing-card-compact {
    padding: 1.5rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  .pricing-icon {
    font-size: 2.2rem;
  }

  .price-compact {
    font-size: 1.6rem;
  }

  .features-list-compact li {
    font-size: 0.9rem;
  }

  .btn-pricing {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }

  .featured-badge {
    top: 12px;
    right: -28px;
    padding: 4px 30px;
    font-size: 0.75rem;
  }

  .guarantee-badge {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  /* Кнопки */
  .btn-whatsapp,
  .btn-phone {
    padding: 1rem 2rem !important;
    font-size: 1rem;
    min-height: 64px;
  }

  .btn-whatsapp span,
  .btn-phone .d-flex {
    font-size: 0.95rem;
  }

  .btn-phone .small {
    font-size: 0.85rem;
  }

  /* Messenger кнопки */
  .messenger-btn {
    width: 44px;
    height: 44px;
  }

  .messenger-btn i {
    font-size: 1.2rem;
  }

  .phone-link {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }

  .booking-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .messengers-row {
    gap: 0.5rem;
  }

  /* Связанный кейс */
  .related-case-block {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .case-read-btn {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
  }

  .case-meta {
    text-align: center;
    width: 100%;
  }
}

/* Для очень узких экранов (до 400px) */
@media (max-width: 400px) {

  .btn-whatsapp,
  .btn-phone {
    padding: 0.85rem 1.75rem !important;
    min-height: 60px;
  }

  .btn-whatsapp i,
  .btn-phone i {
    font-size: 1.3rem !important;
  }
}

/* Высокое разрешение (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .site-info-section {
    --header-bg-image: url('../assets/images/hed-fon@2x.jpg');
  }
}

/* Плавная загрузка (если пользователь не предпочитает уменьшенное движение) */
@media (prefers-reduced-motion: no-preference) {
  .site-info-section {
    animation: fadeIn 0.6s ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0.8;
      transform: translateY(-10px);
    }

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

/* Дополнительные утилиты */
.bg-wave {
  background: #f9f9f9;
}

.link-education {
  padding: 0.5rem 1rem;
}


/* Прогресс бар Для десктопа - учитываем высоту навбара */
@media (min-width: 992px) {
  #cont {
    top: 80px;
    /* Высота десктопной навигации */
  }

  /* Когда меню сжато (после скролла) */
  body.navbar-scrolled #cont {
    top: 60px;
  }
}

/* Скрываем прогресс-бар на мобильных */
@media (max-width: 768px) {
  #cont {
    display: none !important;
  }
}

/* прогресс бар для меню - финиш */




/* ============================================
   СТИЛИ ДЛЯ CTA ТАБЛИЦЫ (SERVICES CTA)
   ============================================ */
/* ============================================
     СТИЛИ ДЛЯ CTA ТАБЛИЦЫ (SERVICES CTA) - МИНИМАЛИСТИЧНЫЕ
     ============================================ */

/* 1. Контейнер таблицы с легкой воздушной рамкой */
.table-responsive.bg-ptz-cta-container {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin: 2rem 0;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* 2. Заголовок таблицы */
.table>thead.bg-ptz-cta {
  background-color: var(--sp-primary) !important;
}

.table>thead.bg-ptz-cta tr th {
  border: none;
  padding: 1.25rem 1rem;
  text-align: center;
  font-family: var(--font-heading);
  color: var(--sp-primary);
  border-bottom: 2px solid #aedabd;
  border-top: 2px solid #aedabd;
  text-align: left;
  text-transform: uppercase;
}

.table-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--text-white);
  margin: 0;
}