@media screen and (min-width: 600px){
.pr {
margin-left: -200px;
}
}
  

.pt {
margin-top: -100px
}

.img1 {
position: absolute;
  left: -330px;
  top: -25px;
  max-width: 1000px;
  
}

.img2 {
position: absolute;
  left: 70px;
  top: 31px;
  min-width: 700px;
  
}

.img3 {
position: absolute;
  left: 367px;
  bottom: -25px;
  min-width: 450px;
  
}

p {
padding: 10px 0px;
}

h3 {
padding-bottom: 20px;
}

h5 {
padding-top: 25px;
}

.ml {
margin-left: 13px;
}


.mr {
margin-right: 13px;
}

li {
padding: 7px 0px;
}

.myli {
padding-top: 0px !important;
}

.demo {
display: none; /* Временно скрыть */
  position: absolute;
  padding-top: 0px;
  left: 500px;
  top: -200px;
  z-index: 1000;
  width: 837px;
}

@media screen and (max-width: 1024px){
  .gutter {
  margin: 0px 13px;
  }
  
}

@media screen and (max-width: 1024px){
  .gutter-left {
  margin-left: 13px;
  }
  
}

@media screen and (max-width: 1024px){
  .gutter-right {
  margin-right: 13px;
  }
  
}


@media screen and (min-width: 600px){
.price {
padding-right: -55px;
  }  
  
  }

  .ba-blog-post {
  margin-bottom:25px;
  
  } 
  
 .intro-category-author-social-wrapper a, .ba-post-author-social-wrapper a {
  
  font-size: 24px;
  }

.accordion #accordion-16031068111{
margin-right: 21px;

}

.accordion-heading {
border-radius: 10px;
}

.nav-item.item-934 {
background-color: #e04265;
border-radius: 50px;
padding: 5px 15px;  
color: #FFFFFF;
letter-spacing: 2px;
line-height: 20px;

}


.item-934:hover{
    background-color: #0772A0 !important;
}

.item-934 a {
    color: #FFFFFF !important;
    font-size: 12px !important;

}

.amoforms-footer-copyright {
display: none;
}


#item-1755159962216 ul.nav.nav-tabs {
    width: 700px!important;
      margin: 0 auto!important;
      border-radius: 15px!important;
     background-color: #E5E7EB!important;
    padding: 3px 10px;
}


#item-1755159962216 ul.nav.nav-tabs li.active a {
  background-color: #2563eb;
  border-radius: 10px ;
 
}

.ba-tabs-wrapper.tabs-top li.active a:before {
height: 0px;
}
/* Общая базовая настройка */
.ba-tabs-wrapper .nav.nav-tabs > li > a {
  display: block;
  padding: 18px 14px;
  border-radius: 10px;
}

/* Убираем стандартный фон Bootstrap */
.ba-tabs-wrapper .nav.nav-tabs > li.active > a,
.ba-tabs-wrapper .nav.nav-tabs > li.active > a:hover,
.ba-tabs-wrapper .nav.nav-tabs > li.active > a:focus {
  background-color: transparent !important;
  border-color: transparent;
  color: #fff;
}

/* === "Облако (сервис)" === */
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962217"],
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962217"]:hover,
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962217"]:focus {
  background-image: linear-gradient(90deg, #06b6d4, #3b82f6);
  color: #fff;
}

/* === "Коробка" === */
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962218"],
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962218"]:hover,
.ba-tabs-wrapper .nav.nav-tabs > li.active > a[href="#tab-1755159962218"]:focus {
  background-image: linear-gradient(90deg, #ec4899, #f43f5e);
  color: #fff;
}

/* Сбрасываем фон у самого <li> на всякий случай */
.ba-tabs-wrapper .nav.nav-tabs > li.active {
  background: transparent !important;
  border-color: transparent !important;
}

#item-1755176537419 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
}

#item-17551774836540 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
}

#item-17555884578411 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
} 

.gradient-text {
  background: linear-gradient(to right, #2563eb, #0891b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* === ТОЛЬКО для данного аккордеона === */
#accordion-1755589219051 .accordion-heading { padding: 0; }

/* Делаем сам триггер флекс-контейнером с нужными отступами */
#accordion-1755589219051 .accordion-heading .accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* заголовок слева, иконка справа */
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1.5rem 2rem;             /* py-6 px-8 */
  border-radius: 1rem;
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Сбрасываем внутренние span-ы (они могут тянуть вправо из-за своих отступов) */
#accordion-1755589219051 .accordion-heading .accordion-toggle span {
  display: block;
  margin: 0;
  padding: 0;
}

/* Контейнер заголовка занимает всю доступную ширину */
#accordion-1755589219051 .accordion-heading .accordion-toggle > span {
  flex: 1 1 auto;
  min-width: 0;                     /* чтобы длинные заголовки не выталкивали иконку */
}

/* Сам заголовок: без лишних отступов, слева */
#accordion-1755589219051 .accordion-title {
  display: block;
  margin: 0;
  padding: 0 1rem 0 0;              /* небольшой отступ справа от текста */
  font-size: 1.25rem;               /* text-xl */
  line-height: 1.75rem;
  font-weight: 600;
  color: #111827;                   /* gray-900 */
  text-align: left;
}

/* Иконка фиксированной ширины, не влияет на выравнивание заголовка */
#accordion-1755589219051 .accordion-icon {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;    /* w-6 h-6 */
  color: #6b7280;                   /* gray-500 */
  margin-left: .25rem;
  transition: transform 300ms ease;
  transform: rotate(0deg);
}

/* Поворот при открытии */
#accordion-1755589219051 .accordion-toggle.active .accordion-icon { transform: rotate(180deg); }
#accordion-1755589219051 .accordion-toggle.collapsed .accordion-icon { transform: rotate(0deg); }

/* Тело и внутренности — как раньше предлагал (необязательно, но для полноты вида) */
#accordion-1755589219051 .accordion-group {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  transition: box-shadow 300ms;
  overflow: hidden;
  margin-bottom: 1rem;
}
#accordion-1755589219051 .accordion-group:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#accordion-1755589219051 .accordion-body { border-top: 1px solid #e5e7eb; background: #fff; }
#accordion-1755589219051 .accordion-inner { padding: 1.25rem 2rem; color: #374151; }

#item-1756978445069 ul li {
  font-size: 16px;
  line-height: 24px;
}

#item-1756978279257 .ba-button-wrapper a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 25px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  background-image: linear-gradient(to right, #2563eb, #0891b2); /* от синего к циановому */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

#item-1756978279257 .ba-button-wrapper a:hover {
  transform: scale(1.00);
  box-shadow: 0 12px 24px rgba(0, 2, 4, 0.2);
  background-image: linear-gradient(to right, #1e40af, #0369a1); /* чуть темнее при наведении */
}

/* Градиент у модалки со скидкой */
#item-1757323852527 {
    --tw-gradient-from: #ef4444;
    --tw-gradient-to: #ec4899;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    background-image: linear-gradient(to right, var(--tw-gradient-stops));
    background-color: transparent;

    --shadow-horizontal: 0px;
    --shadow-vertical: 30px;
    --shadow-blur: 60px;
    --shadow-spread: 0px;
    --shadow-color: var(--shadow);
}

/* Обёртка крестика только в конкретной секции */
#item-1757323852527 .close-lightbox {
    height: auto;     /* убираем жёсткое обнуление */
    right: 15px;
    top: 15px;
    left: auto;       /* чтобы не тянуло влево */
}

/* Иконка крестика */
#item-1757323852527 .close-lightbox i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.2); /* фон */
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Ховер эффект */
#item-1757323852527 .close-lightbox i:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

#item-17573253316190 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
}

#item-1757326096479 .ba-button-wrapper a {
    display: inline-block;
    padding: 12px 24px;
    background-image: linear-gradient(90deg, #ec4899, #f43f5e);
    color: #fff;
    border-radius: 50px; /* если нужна закруглённая */
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* Эффект при наведении */
#item-1757326096479 .ba-button-wrapper a:hover {
    opacity: 0.9;
}

#item-1757416209171 h1 {

  font-weight: bold;
  background: linear-gradient(to bottom, #ffffff, #9ca3af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* для современных браузеров */
  color: transparent;
}


#item-17575068536034 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
}

#item-17575068536049 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
  
}

/* кнопка купить на странице ИИ */

#item-17575068536043 .ba-btn-transition {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* как gap-2 */
  white-space: nowrap;
  font-weight: 500; /* font-medium */
  font-size: 1.125rem; /* text-lg */
 
  padding-left: 2rem; /* px-8 */
  padding-right: 2rem;
  border-radius: 0.375rem; /* rounded-md */
  background: linear-gradient(to right, #f59e0b, #ec4899);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(236 72 153 / 0.2),
              0 4px 6px -4px rgb(236 72 153 / 0.2);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  text-decoration: none;
}

#item-17575068536043 .ba-btn-transition:hover {
  background: linear-gradient(to right, #d97706, #db2777);
}

#item-17575068536038 h3 {
  font-size: 3.75rem;   /* аналог text-6xl */
  font-weight: 800;     /* font-extrabold */
  background: linear-gradient(to right, #4ade80, #60a5fa); /* green-400 → blue-400 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-top: 0.5rem;   /* my-2 */
  margin-bottom: 0.5rem;
}

/* уменьшение таймера на ИИ */

#item-17575068536040 .ba-countdown > span {
  margin: 5px;          /* вместо 10px */
  padding: 5px 10px;    /* вместо 10px 20px */
  font-size: 0.5em;     /* уменьшает цифры внутри */
}

/* тень у блока с ценой на ИИ */

#item-17575068536045 {
  
  box-shadow: 0 25px 50px -12px rgba(30, 58, 138, 0.3);
  
}

/* Заголовок АИ - неоспоримые преимущества */

#item-17575068326771 h2 {

  font-weight: 700; /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  background: linear-gradient(to right, #60a5fa, #a855f7); /* blue-400 → purple-500 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center; /* если нужен центр как у тебя в div */
}

/* === страница ИИ - «элемент» (иконка с градиентным фоном) === */
#item-17575757049821 .ba-icon-wrapper i {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: #fff; /* иконка белая */
  
  background: linear-gradient(to right, #22c55e, #10b981); /* green-500 → emerald-500 */
  border-radius: 15px; /* было через переменные, оставил напрямую */
  
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 19px; /* вместо 19px, чтобы форма была ровнее */

  /* убрал лишние var(--border) и shadow — не нужны */
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.25); /* лёгкая тень для объёма */
}

/* === страница ИИ - «элемент» (градиент для выделенного текста) === */
.gradient-green-emerald {
  background: linear-gradient(to right, #4ade80, #34d399); /* green-400 → emerald-400 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* === страница ИИ - «элемент» (иконка Telegram с градиентным фоном) === */
#item-17575347439240 .ba-icon-wrapper i {
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: #fff; /* белая иконка */
  background: linear-gradient(to right, #3b82f6, #a855f7); /* blue-500 → purple-500 */
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px; /* вместо 18px для аккуратной формы */
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.25); /* лёгкая тень в тон */
}

/* === страница ИИ - «элемент» (линия + точка на уровне Alpha) === */
#item-1757580364518 {
  position: relative;
  padding-left: 2.5rem; /* место под линию */
}

/* === страница ИИ - «элемент» (точка + линия для нескольких блоков) === */
#item-1757580364518,
#item-17575854440063,
#item-17575854548053,
#item-17575854770433 {
  position: relative;
  padding-left: 2rem;
}

#item-1757580364518::before,
#item-17575854440063::before,
#item-17575854548053::before,
#item-17575854770433::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.9em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #3b82f6; /* синяя точка */
  z-index: 2;
}

#item-1757580364518::after,
#item-17575854440063::after,
#item-17575854548053::after,
#item-17575854770433::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  top: calc(0.8em + 12px);
  height: calc(100% - 1.5em);
  width: 1px;
  background-color: #374151; /* синяя линия */
  z-index: 1;
}

#item-1757580374599 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
}

#item-17575854440062 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
}

#item-17575854548052 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
}

#item-17575854770432 ul.vertical-layout li {
    margin-bottom: -15px;   /* расстояние между пунктами */
}

/*Иконка Что дальше в ИИ */

#item-17575855107870 .ba-icon-list-wrapper ul li i {
    font-size: 29px;
    padding: 12px;
    border-radius: 15px;

    background: linear-gradient(to right, #f59e0b, #ec4899);
    color: white; /* сама иконка */
}

/* Градиент для ответов на вопросы ИИ*/
.gradient-blue-purple {
    background: linear-gradient(to right, #60a5fa, #c084fc); /* синий → фиолетовый */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* Firefox */
    color: transparent;
}

/* страница ИИ - элемент: иконка с градиентом */
#item-17575875581131 .ba-icon-wrapper i {
    color: #fff; /* цвет самой иконки */
    font-size: 32px; /* размер иконки */
    background: linear-gradient(to right, #a855f7, #3b82f6); /* фиолетовый → синий */
    padding: 21px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* страница ИИ - элемент: кнопка с градиентом */
#item-1748627157628 .ba-btn-transition {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* как у оригинала */
    padding: 0.5rem 2rem; /* py-2 px-8 */
   
    color: #fff;
    background: linear-gradient(to right, #3b82f6, #9333ea); /* синий → фиолетовый */
    border-radius: 0.9rem; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

#item-1748627157628 .ba-btn-transition:hover {
    background: linear-gradient(to right, #2563eb, #7e22ce); /* hover: синий → фиолетовый потемнее */
    box-shadow: 0 15px 20px -5px rgba(0,0,0,0.15), 0 6px 8px -6px rgba(0,0,0,0.1);
    transform: scale(1.05);
}

.ba-form-row .ba-form-calculation-field .ba-input-wrapper {
    /* никакой фон не ставим здесь */
}

.ba-form-row:has(.ba-form-calculation-field[data-title="Итого в месяц"]) {
    background: linear-gradient(90deg, rgba(20,83,45,0.1), rgba(30,58,138,0.1));
    padding: 20px;
    border: 1px solid rgba(74,222,128,0.5);
    border-radius: 12px;
}

.headline-gradient {
  font-size: 3rem; /* подгони под твой дизайн */
  font-weight: bold;
  background: linear-gradient(to bottom, #fff, #9ca3af);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}



/* === Заголовок === */
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  background-color: rgb(31 41 55 / 0.3); /* bg-gray-800/30 */
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.accordion-header:hover {
  background-color: rgb(31 41 55 / 0.5); /* hover:bg-gray-800/50 */
}

/* === Иконка (стрелка) === */
.accordion-icon {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  color: rgb(96 165 250 / 1); /* text-blue-400 */
  transition: transform 0.2s ease;
}

.accordion.open .accordion-icon {
  transform: rotate(180deg);
}



.ba-icon-list-wrapper ul.vertical-layout li {
    margin-bottom: -15px; /* расстояние между пунктами */
}

/* Потенциальный конфлитк */

.ba-item-main-menu li.deeper.parent > ul {
  box-shadow: none !important;
  overflow: visible !important;
  position: absolute !important;
  z-index: 9999 !important;
  background: #fff !important;
}



/* ====== SVG-иконки. Основные настройки ====== */

/* Контейнер иконки — фиксированный квадрат */
.sm-cap__icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;            /* чтобы svg при scale не вылезал за углы */
}

/* SVG — фиксированный размер, не растягивается */
.sm-cap__icon svg {
    width: 24px;
    height: 24px;
    display: block;
    stroke: currentColor;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
}
/* Ховер по всей карточке: подпрыгивает только svg, верстка не двигается */
.sm-card:hover .sm-cap__icon {
    transform: scale(1.1);
}

/* Ховер: увеличиваем только svg при наведении на сам блок с текстом */
.ba-item-text:hover .sm-cap__icon svg {
    transform: scale(1.1);
}


/* ====== SVG-иконки. Градиенты для разных разделов ====== */


/* Продажи */
.sm-cap__icon--sales {
  background: linear-gradient(135deg, #7209B7, #F72585);
}

/* Тренинги */
.sm-cap__icon--trainings {
  background: linear-gradient(135deg, #F72585, #7209B7);
}

/* Мембершип (from #3B82F6 → to #1D4ED8) */
.sm-cap__icon--membership {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}

/* Автоматизации (from #7209B7 → to #F72585) */
.sm-cap__icon--automations {
  background: linear-gradient(135deg, #7209B7, #F72585);
}

/* Пользователи (from #10B981 → to #059669) */
.sm-cap__icon--users {
  background: linear-gradient(135deg, #10B981, #059669);
}

/* Вебинары  (from #3B82F6 → to #1D4ED8) */
.sm-cap__icon--webinars {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
}


/* Партнёрка  (from #F72585 → to #7209B7) */
.sm-cap__icon--partners {
  background: linear-gradient(135deg, #F72585, #7209B7);
}

/* Календарь  (from #7209B7 → to #F72585) */
.sm-cap__icon--calendar {
  background: linear-gradient(135deg, #7209B7, #F72585);
}

/* API  (from #10B981 → to #059669) */
.sm-cap__icon--api {
  background: linear-gradient(135deg, #10B981, #059669);
}

/* Интеграции  (from #F59E0B → to #D97706) */
.sm-cap__icon--integrations {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* Расширения  (from #F72585 → to #7209B7) */
.sm-cap__icon--extensions {
  background: linear-gradient(135deg, #F72585, #7209B7);
}

/* Сайт  (from #F59E0B → to #D97706) */
.sm-cap__icon--site {
  background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* плавная анимация для контейнера иконки */
.sm-cap__icon {
    transition: transform 0.30s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* при наведении на карточку (блок с рамкой) увеличиваем иконку */
.ba-item-text.ba-item:hover .sm-cap__icon {
    transform: scale(1.10); /* примерно как group-hover:scale-110 */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10); /* по желанию можно усилить */
}

/* 1. Текст делаем прозрачным */
.text-transparent {
    color: transparent;
}

/* 2. Фон обрезаем по контуру текста */
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* 3. Сам градиент: справа налево F72585 → 7209B7 */
/* Можно завязать на комбинацию классов */
.bg-gradient-to-r.from-\[\#F72585\].to-\[\#7209B7\] {
    background-image: linear-gradient(to right, #F72585, #7209B7);
}





/* -- Форма триала -- */


/* ====== Градиентная CTA-кнопка (для структуры Gridbox) ====== */



/* Стиль на саму ссылку */
.sm-btn-primary .ba-button-wrapper a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: linear-gradient(to right, #F72585, #7209B7) !important;
text-decoration: none !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Ховер на ссылку */
.sm-btn-primary .ba-button-wrapper a:hover {
transform: scale(1.05) !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Базовая кнопка "Запустить" в форме item-17411665153863 */

/* Градиентная кнопка для форм (универсальное правило) */
.ba-form-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 12px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 15px 40px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ховер */
.ba-form-submit-btn-wrapper:hover .ba-form-submit-btn {
    background: linear-gradient(to right, rgba(247, 37, 133, 0.9), rgba(114, 9, 183, 0.9)) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Фокус */
.ba-form-submit-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9),
                0 0 0 4px rgba(247, 37, 133, 0.8),
                0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

/* НОВШЕСТВА 2025 */

/* Градиент для секции hero */
.sm-2025-hero {
    background: linear-gradient(to bottom, #0F172A, #1E293B, #0F172A) !important;
 
    position: relative !important;
    overflow: hidden !important;
}

/* Розово-фиолетовый круг слева вверху */
.sm-2025-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    left: 40px !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Фиолетово-розовый круг справа */
.sm-2025-hero::after {
    content: '' !important;
    position: absolute !important;
    top: 160px !important;
    right: 40px !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #7209B7, #F72585) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Золотой круг внизу по центру */
.sm-2025-hero .ba-section-items::before {
    content: '' !important;
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 400px !important;
    height: 400px !important;
    background: linear-gradient(to bottom right, #FFD700, #FFA500) !important;
    opacity: 0.1 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-2025-hero .ba-section-items {
    position: relative !important;
}

/* Контент поверх glow */
.sm-2025-hero .ba-row-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* Фикс для меню — поднимаем над декоративными элементами */
.ba-item-main-menu,
.ba-menu-wrapper,
.row-with-menu {
    position: relative !important;
    z-index: 9999 !important;
}


/* Градиентный текст заголовка */
.sm-2025-hero-title {
    color: transparent !important;
    background-image: linear-gradient(to right, #FFD700, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* Шильдик-бейдж */
.sm-2025-hero-badge li {
    padding: 12px 24px !important;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF6B6B) !important;
    border-radius: 9999px !important;
    border: 2px solid #FFD700 !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    list-style: none !important;
}


@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===== Pills: класс на .ba-item-icon-list ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li {
  margin: 0 !important;
}

/* ===== ССЫЛКА: пилюля на <a> ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0px !important;
  padding: 8px 14px !important;
  background: #1E293B !important;
  border: 2px solid #334155 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, color .2s !important;
}

/* ===== БЕЗ ССЫЛКИ: пилюля на самом <li> ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li.list-item-without-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 14px !important;
  background: #1E293B !important;
  border: 2px solid #334155 !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  line-height: 1 !important;
  transition: border-color .2s, box-shadow .2s, color .2s !important;
  cursor: default !important;
}

.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li.list-item-without-link > span {
  color: inherit !important;
}

/* ===== Иконки (ZMDI) ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul i.zmdi {
  font-size: 20px !important;
  line-height: 1 !important;
  color: #94A3B8 !important;
  transition: color .2s !important;
  display: inline-block !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* ===== Hover / Focus ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li > a:hover,
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li.list-item-without-link:hover {
  border-color: #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 20px rgba(255,215,0,.30) !important;
}

.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li:hover i.zmdi {
  color: #FFD700 !important;
}

.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li > a:focus-visible {
  outline: 2px solid #FFD700 !important;
  outline-offset: 2px !important;
}

/* ===== Активный пункт ===== */
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li.is-active > a,
.ba-item-icon-list.sm-2025-pills .ba-icon-list-wrapper > ul > li.is-active {
  border-color: #FFD700 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 20px rgba(255,215,0,.30) !important;
}

/* ===== Секция "Общее/Системные обновления" ===== */
.sm-2025-system {
    background: linear-gradient(to bottom right, #1E293B, #1E293B, #1E293B) !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 2px solid #7209B7 !important;
    border-bottom: 2px solid #7209B7 !important;
    padding: 96px 0 !important;
}

/* Средний слой с фиолетовым оттенком */
.sm-2025-system .ba-overlay {
    background: radial-gradient(ellipse at center, rgba(114, 9, 183, 0.1) 0%, transparent 70%) !important;
}

/* Декоративный золотой круг слева вверху */
.sm-2025-system::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 25% !important;
    width: 800px !important;
    height: 800px !important;
    background: linear-gradient(to bottom right, #FFD700, #F72585) !important;
    opacity: 0.1 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный фиолетовый круг справа внизу */
.sm-2025-system::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 25% !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #7209B7, transparent) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-2025-system .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== Большие иконки для системных обновлений (размер 32px) ====== */
/* Контейнер иконки — фиксированный квадрат 64x64 */
.sm-system-icon {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10) !important;
    overflow: hidden !important;
}

/* SVG — фиксированный размер 32px */
.sm-system-icon svg {
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    stroke: currentColor !important;
}

/* Градиенты для системных иконок */
.sm-system-icon--php {
    background: linear-gradient(135deg, #FFD700, #F72585) !important;
}

.sm-system-icon--mailer {
    background: linear-gradient(135deg, #7209B7, #F72585) !important;
}

.sm-system-icon--security {
    background: linear-gradient(135deg, #10B981, #059669) !important;
}

.sm-system-icon--files {
    background: linear-gradient(135deg, #3B82F6, #2563EB) !important;
}

/* ====== Блок статистики ====== */
.sm-stats-block {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.2), rgba(114, 9, 183, 0.2), rgba(247, 37, 133, 0.2)) !important;
   
}

/* ====== Градиентные числа статистики ====== */
.sm-stat-number--features {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #F72585) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    padding-bottom: 0px;
}

.sm-stat-number--fixes {
    color: transparent !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    padding-bottom: 0px;
}

.sm-stat-number--security {
    color: transparent !important;
    background: linear-gradient(to right, #7209B7, #10B981) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    padding-bottom: 0px;
}

/* ====== Бейдж "Системные обновления" ====== */
.sm-system-badge li {
    padding: 12px 24px !important;
    background: linear-gradient(to right, #FFD700, #F72585, #7209B7) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.4) !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    list-style: none !important;
}

/* ====== Заголовок с иконкой (h3) ====== */
.sm-section-title li {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    list-style: none !important;
    margin-bottom: 32px !important;
}

/* ====== Иконки в карточках (24px) ====== */
.sm-feature-icon {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #10B981 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.sm-feature-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    stroke: currentColor !important;
}

/* Градиент фона иконки */
.sm-feature-icon {
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
}

/* Ховер на карточке — усиливаем фон иконки */
.sm-feature-card:hover .sm-feature-icon,
.sm-feature-card-neutral:hover .sm-feature-icon {
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)) !important;
}

.sm-feature-card:hover .sm-feature-icon,
.sm-feature-card-neutral:hover .sm-feature-icon {
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)) !important;
}


/* Заголовок блока */
.sm-benefits-title li {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    list-style: none !important;
    margin-bottom: 20px!important;
}

.sm-benefits-title li i {
    flex-shrink: 0 !important;
}

.sm-benefits-title li span {
    color: #fff !important;
}

/* Список выгод */
.sm-benefits-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0px !important;
    list-style: none !important;
    margin-bottom: 5px!important;
}

.sm-benefits-list li i {
    flex: 0 0 0px !important;
	
}

/* ====== Секция School-master.AI ====== */
.sm-ai-section {
    background: linear-gradient(to bottom right, #0F172A, #1E1B4B, #0F172A) !important;
    border-top: 4px solid #FFD700 !important;
    border-bottom: 4px solid #FFD700 !important;
    padding: 96px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративные круги для AI секции */
.sm-ai-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #FFD700, #F72585) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-ai-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 800px !important;
    height: 800px !important;
    background: linear-gradient(to bottom right, #7209B7, #3B82F6) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-ai-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== Иконка мозга в заголовке AI ====== */
.sm-ai-brain-icon {
    flex: 0 0 80px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 16px !important;
    background: linear-gradient(to bottom right, #7209B7, #F72585) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-ai-brain-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* ====== Градиентный заголовок AI ====== */
.sm-ai-title {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ====== Бейдж "Приобретается отдельно" ====== */
.sm-ai-badge li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 24px !important;
    background: rgba(255, 215, 0, 0.2) !important;
    border: 2px solid #FFD700 !important;
    border-radius: 9999px !important;
    list-style: none !important;
}

.sm-ai-badge li span {
    color: #FFD700 !important;
}

/* ====== Иконки в карточках AI (24px) ====== */
.sm-ai-icon-blue {
    padding: 12px !important;
    background: linear-gradient(to right, #3B82F6, #8B5CF6) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.sm-ai-icon-green {
    padding: 12px !important;
    background: linear-gradient(to right, #10B981, #059669) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.sm-ai-icon-pink {
    padding: 12px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.sm-ai-icon-purple {
    padding: 12px !important;
    background: linear-gradient(to right, #8B5CF6, #7C3AED) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin-bottom: 16px !important;
}

.sm-ai-icon-blue svg,
.sm-ai-icon-green svg,
.sm-ai-icon-pink svg,
.sm-ai-icon-purple svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
    display: block !important;
}


/* ====== Секция "Чаты" ====== */
.sm-chats-section {
    background: linear-gradient(to bottom right, #1E293B, #0F172A, #1E293B) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sm-chats-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 700px !important;
    height: 700px !important;
    background: linear-gradient(to bottom right, #3B82F6, #8B5CF6) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-chats-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #8B5CF6, #3B82F6) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-chats-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== Бейдж "Дополнительное расширение" ====== */
.sm-extension-badge li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    background: linear-gradient(to right, #3B82F6, #8B5CF6, #EC4899) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4) !important;
    list-style: none !important;
}



/* ====== Иконка "Чаты" ====== */
.sm-chats-icon {
    flex: 0 0 80px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 16px !important;
    background: linear-gradient(to bottom right, #3B82F6, #8B5CF6) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-chats-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* ====== Градиентный заголовок "Чаты" ====== */
.sm-chats-title {
    color: transparent !important;
    background: linear-gradient(to right, #3B82F6, #8B5CF6, #EC4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ====== Бейдж "Приобретается отдельно" синий ====== */
.sm-chats-badge li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 24px !important;
    background: rgba(59, 130, 246, 0.2) !important;
    border: 2px solid #3B82F6 !important;
    border-radius: 9999px !important;
    list-style: none !important;
}


/* ====== Бейдж "Доступен бесплатно" зеленый ====== */
.sm-chats-badge2 li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 24px !important;
    background: #10b981!important;
    list-style: none !important;
}




/* ====== Блок "В ближайшее время добавим" ====== */
.sm-coming-soon {
    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2)) !important;
    border: 2px solid #8B5CF6 !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

/* Заголовок блока */
.sm-coming-soon-title li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 24px !important;
}

.sm-coming-soon-title li i {
    font-size: 28px !important;
    color: #8B5CF6 !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
}

.sm-coming-soon-title li span {
    color: #fff !important;
    font-weight: 700 !important;
}

/* ====== Иконки в блоке "В ближайшее время" ====== */
.sm-soon-icon-purple {
    flex: 0 0 48px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 12px !important;
    background: rgba(139, 92, 246, 0.2) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-soon-icon-blue {
    flex: 0 0 48px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 12px !important;
    background: rgba(59, 130, 246, 0.2) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-soon-icon-purple svg {
    width: 24px !important;
    height: 24px !important;
    color: #8B5CF6 !important;
    stroke: currentColor !important;
    display: block !important;
}

.sm-soon-icon-blue svg {
    width: 24px !important;
    height: 24px !important;
    color: #3B82F6 !important;
    stroke: currentColor !important;
    display: block !important;
}

/* ====== Black Friday секция ====== */
.sm-bf-section {
    background: linear-gradient(to bottom right, #000000, #1a1a1a, #000000) !important;
    border-top: 4px solid #FFD700 !important;
    border-bottom: 4px solid #FFD700 !important;
    padding: 128px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Моргающие декоративные круги */
.sm-bf-section::before {
    content: '' !important;
    position: absolute !important;
    top: 40px !important;
    right: 40px !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, #FFD700, #FFA500) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-bf-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 40px !important;
    left: 40px !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #FF6B6B, #FFD700) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-bf-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== Бейдж BLACK FRIDAY ====== */
.sm-bf-badge li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 16px 32px !important;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF6B6B) !important;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.6) !important;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
    list-style: none !important;
    
}

/* ====== Градиентный спан "обновлениям" ====== */
.sm-bf-gradient-text {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF6B6B) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* 1. ФОН СЕКЦИИ */
.sm-roadmap-section {
    background: linear-gradient(to bottom, #0F172A, #1E293B, #0F172A) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Сетка-паттерн на фоне (опционально) */
.sm-roadmap-section .ba-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

/* 2. ИКОНКА С РАКЕТОЙ (большая, в заголовке) */
.sm-roadmap-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: linear-gradient(to right, #10B981, #059669) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.sm-roadmap-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* 3. ИКОНКИ В КОЛОНКАХ (маленькие) */

/* Тренинги — зелёный градиент */
.sm-roadmap-card-icon--trainings {
    padding: 12px !important;
    background: linear-gradient(to right, #10B981, #059669) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Рассылка — синий градиент */
.sm-roadmap-card-icon--mailing {
    padding: 12px !important;
    background: linear-gradient(to right, #3B82F6, #2563EB) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Интеграция с Telegram — фиолетовый градиент */
.sm-roadmap-card-icon--telegram {
    padding: 12px !important;
    background: linear-gradient(to right, #8B5CF6, #7C3AED) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SVG внутри иконок колонок */
.sm-roadmap-card-icon--trainings svg,
.sm-roadmap-card-icon--mailing svg,
.sm-roadmap-card-icon--telegram svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
}




/* ====== Контейнер с ценой ====== */
.sm-bf-price-box {
    background: linear-gradient(to bottom right, #1a1a1a, #2a2a2a) !important;
    border: 4px solid #FFD700 !important;
    border-radius: 24px !important;
    padding: 48px !important;
    box-shadow: 0 0 80px rgba(255, 215, 0, 0.3) !important;
    margin-bottom: 48px !important;
}

/* Старая цена */
.sm-bf-old-price {
    text-align: center !important;
}

.sm-bf-old-price li {
    list-style: none !important;
}

.sm-bf-old-price li span:first-child {
    display: block !important;
    color: #6b7280 !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-decoration: line-through !important;
    margin-bottom: 8px !important;
}

.sm-bf-old-price li span:last-child {
    display: block !important;
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* Стрелка */
.sm-bf-arrow {
    font-size: 96px !important;
    color: #FFD700 !important;
    line-height: 1 !important;
}



/* Новая цена */
.sm-bf-new-price {
    text-align: center !important;
}

.sm-bf-new-price li {
    list-style: none !important;
}

.sm-bf-new-price li span:first-child {
    display: block !important;
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #FFA500) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-size: 72px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.sm-bf-new-price li span:last-child {
    display: block !important;
    color: #FFD700 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .sm-bf-prices {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .sm-bf-arrow {
        font-size: 48px !important;
        transform: rotate(90deg) !important;
    }
    
    .sm-bf-old-price li span:first-child {
        font-size: 32px !important;
    }
    
    .sm-bf-new-price li span:first-child {
        font-size: 64px !important;
    }
}

/* ====== Список преимуществ ====== */
.sm-bf-benefits li {
    display: flex !important;
    align-items: center !important;
    gap: 0px !important;
    padding: 10px 15px !important;
    background: rgba(255, 215, 0, 0.1) !important;
    list-style: none !important;
  margin-bottom: 15px;
}

.sm-bf-benefits li i {
    flex-shrink: 0 !important;
}

/* ====== Кнопка "Продлить сейчас" ====== */
.sm-bf-button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 24px 48px !important;
    background: linear-gradient(to right, #FFD700, #FFA500) !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5) !important;
    transition: transform 0.3s ease !important;
    text-decoration: none !important;
}

.sm-bf-button a:hover {
    transform: scale(1.05) !important;
}

.sm-bf-button a i {
    font-size: 32px !important;
    color: #000 !important;
}

/* ====== Секция "Акция ограничена" ====== */
.sm-bf-timer-section {
    background: linear-gradient(to right, rgba(255, 107, 107, 0.2), rgba(255, 215, 0, 0.2)) !important;
    border: 2px solid #FF6B6B !important;
    border-radius: 16px !important;
    padding: 32px !important;
}

.sm-bf-timer-section h4 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: #fff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
}

.sm-bf-timer-section h4 i {
    font-size: 32px !important;
    color: #FF6B6B !important;
}

/* ====== Таймер ====== */
.sm-bf-timer {
    background: #1a1a1a !important;
    border: 2px solid #FFD700 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    min-width: 100px !important;
    text-align: center !important;
}

.sm-bf-timer-number {
    color: #FFD700 !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.sm-bf-timer-label {
    color: #9ca3af !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}


/* Заголовок "Акция ограничена" */
.sm-bf-timer-title li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0px !important;
    list-style: none !important;
}

.sm-bf-timer-title li i {
    flex-shrink: 0 !important;
}

/* ====== Плавающая кнопка Black Friday ====== */
.sm-bf-float-button .ba-button-wrapper a {
    padding: 16px 24px !important;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF6B6B) !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6) !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important; /* Очень высокий приоритет */
}

.sm-bf-float-button .ba-button-wrapper a:hover {
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.8) !important;
}

.sm-bf-float-button .ba-button-wrapper a span {
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.sm-bf-float-button .ba-button-wrapper a i {
    color: #000 !important;
    font-size: 20px !important;
}


/* ====== Секция "Дополнительные расширения" ====== */
.sm-extensions-section {
    background: linear-gradient(to bottom, #1E293B, #0F172A, #0F172A) !important;
   
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративные круги */
.sm-extensions-section::before {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    left: 40px !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-extensions-section::after {
    content: '' !important;
    position: absolute !important;
    top: 160px !important;
    right: 40px !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, #7209B7, #F72585) !important;
    opacity: 0.2 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-extensions-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== Карточка расширения ====== */
.sm-extension-card {
    padding: 32px !important;
    background: #1E293B !important;
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.sm-extension-card:hover {
    border-color: #F72585 !important;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.3) !important;
}

/* ====== Иконка расширения ====== */
.sm-extension-icon {
    flex: 0 0 88px !important;
    width: 64px !important;
    height: 64px !important;
    padding: 20px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(247, 37, 133, 0.3) !important;
}

.sm-extension-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* Градиенты для разных расширений */
.sm-extension-icon--template {
    background: linear-gradient(to bottom right, #EC4899, #DB2777) !important;
}

.sm-extension-icon--ai {
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
}

.sm-extension-icon--chat {
    background: linear-gradient(to bottom right, #06B6D4, #0891B2) !important;
}

.sm-extension-icon--webinar {
    background: linear-gradient(to bottom right, #F59E0B, #D97706) !important;
}

.sm-extension-icon--backup {
    background: linear-gradient(to bottom right, #10B981, #059669) !important;
}

.sm-extension-icon--forum {
    background: linear-gradient(to bottom right, #8B5CF6, #7C3AED) !important;
}

.sm-extension-icon--forms {
    background: linear-gradient(to bottom right, #3B82F6, #2563EB) !important;
}

/* ====== Цены расширения ====== */
.sm-extension-price-old {
    color: #64748B !important;
    font-size: 16px !important;
    text-decoration: line-through !important;
    margin-bottom: 4px !important;
}

.sm-extension-price-new {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #F72585) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ====== Кнопки расширения ====== */
.sm-extension-buy a {
    display: inline-block !important;
    padding: 10px 24px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: opacity 0.3s ease !important;
    text-decoration: none !important;
}

.sm-extension-buy a:hover {
    opacity: 0.9 !important;
}

.sm-extension-details a {
    display: inline-block !important;   
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sm-extension-details a:hover {
    border-color: #F72585 !important;
    color: #F72585 !important;
}

/* ====== 1. Бейдж "Расширения" (список) ====== */
.sm-extensions-badge li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    background: linear-gradient(to right, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1)) !important;
    border: 1px solid rgba(114, 9, 183, 0.2) !important;
    border-radius: 9999px !important;
    list-style: none !important;
    
}

.sm-extensions-title-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ====== 3. Секция ИИ-расширение ====== */
.sm-ai-hero {
    background: linear-gradient(to bottom right, #7209B7, #F72585) !important;   
    color: #fff !important;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративные круги внутри секции ИИ */
.sm-ai-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background: #fff !important;
    opacity: 0.1 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-ai-hero::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 384px !important;
    height: 384px !important;
    background: #fff !important;
    opacity: 0.1 !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-ai-hero .ba-row-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* Иконка мозга в заголовке ИИ */
.sm-ai-hero-icon {
    flex: 0 0 56px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-ai-hero-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* ====== 4. Анимация иконки в секции ИИ-расширение ====== */
.sm-ai-icon-animated {
    position: relative !important;
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto !important;
}


/* ====== 5. Кнопка ИИ-расширение ====== */
.sm-ai-hero-button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.sm-ai-hero-button a:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05) !important;
}

/* ====== 6. Плашка "Популярное" (список) ====== */
.sm-popular-badge li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0px !important;
    border-radius: 9999px !important;
    list-style: none !important;
}

/* ====== 8. Иконки в карточках расширений ====== */
.sm-extension-icon-home {
    flex: 0 0 48px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 12px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1)) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sm-extension-icon-home svg {
    width: 24px !important;
    height: 24px !important;
    color: #7209B7 !important;
    stroke: currentColor !important;
}

.sm-extension-icon-home i {
    font-size: 24px !important;
    color: #7209B7 !important;
}

/* ============================================================
   SM 2025 — Hero секция главной страницы
   ============================================================ */

/* ====== 1. СЕКЦИЯ: градиент фона + декоративные круги ====== */
.sm-home-hero {
    background: linear-gradient(to bottom right, #0F172A, #1E1B4B, #0F172A) !important;
   
    position: relative !important;
    overflow: hidden !important;
   
}

/* Декоративный круг — левый верхний (розово-фиолетовый) */
.sm-home-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 25% !important;
    width: 800px !important;
    height: 800px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.2), rgba(114, 9, 183, 0.15), transparent) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: sm-hero-pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — правый (фиолетово-синий) */
.sm-home-hero::after {
    content: '' !important;
    position: absolute !important;
    top: 33% !important;
    right: 0 !important;
    width: 700px !important;
    height: 700px !important;
    background: linear-gradient(to bottom left, rgba(114, 9, 183, 0.2), rgba(59, 130, 246, 0.1), transparent) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: sm-hero-pulse 10s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Третий декоративный круг — нижний левый (зелёный) */
.sm-home-hero .ba-section-items::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to top right, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1), transparent) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: sm-hero-pulse 12s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-home-hero .ba-section-items {
    position: relative !important;
}

/* Контент поверх декоративных элементов */
.sm-home-hero .ba-row-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* Анимация пульсации для кругов */
@keyframes sm-hero-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}





/* ====== 3. ЗАГОЛОВОК H1 с градиентным спаном ====== */


/* Градиентный спан "онлайн-школ" */
.sm-hero-title-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #F72585, #B10DC9, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ====== 4. ПОДЗАГОЛОВОК: серый + белый спан ====== */
.sm-hero-subtitle {
    color: #94A3B8 !important;
    max-width: 640px !important;
}

/* Белый акцентный спан */
.sm-hero-subtitle-accent {
    font-weight: 700 !important;
    color: #fff !important;
}

@media (min-width: 1024px) {
    .sm-hero-subtitle {
        font-size: 24px !important;
    }
}


/* ====== 5. СПИСОК ПРЕИМУЩЕСТВ (чекбоксы) ====== */


.sm-hero-features li {

    gap: 5px !important;
  
    margin-bottom: 15px !important;
}

/* Иконка в круге */
.sm-hero-features li i {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)) !important;
    color: #10B981 !important;
   
    transition: all 0.3s ease !important;
}


/* Hover эффект */
.sm-hero-features li:hover i {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.4)) !important;
}


/* ====== 6. КНОПКИ CTA ====== */

/* Основная кнопка (градиент) */
.sm-hero-btn-primary .ba-button-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 20px 40px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.4) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sm-hero-btn-primary .ba-button-wrapper a:hover {
    background: linear-gradient(to right, rgba(247, 37, 133, 0.9), rgba(114, 9, 183, 0.9)) !important;
    box-shadow: 0 12px 48px rgba(247, 37, 133, 0.5) !important;
}

.sm-hero-btn-primary .ba-button-wrapper a i {
    font-size: 20px !important;
    color: #fff !important;
}

/* Вторичная кнопка (белая с рамкой) */
.sm-hero-btn-secondary .ba-button-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 20px 40px !important;
    background: #fff !important;
    color: #0F172A !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sm-hero-btn-secondary .ba-button-wrapper a:hover {
    border-color: #7209B7 !important;
    color: #7209B7 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}


/* ====== 7. ПРАВАЯ КОЛОНКА: контейнер карточек ====== */
.sm-hero-cards-container {
    background: linear-gradient(to bottom right, #1E293B, #334155) !important;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Внутренние декоративные круги */
.sm-hero-cards-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.2), transparent) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.sm-hero-cards-container::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.2), transparent) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
}


/* ====== 8. КАРТОЧКИ внутри контейнера ====== */
.sm-hero-card {
   
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.sm-hero-card:hover {
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.3) !important;
    border-color: rgba(247, 37, 133, 0.4) !important;
}


/* ====== 9. ИКОНКИ в карточках ====== */
.sm-hero-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.sm-hero-card-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Hover эффект на иконку при наведении на карточку */
.sm-hero-card:hover .sm-hero-card-icon {
    box-shadow: 0 8px 20px rgba(247, 37, 133, 0.4) !important;
    transform: scale(1.1) !important;
}




/* ====== 11. ПЛАВАЮЩИЙ БЕЙДЖ "500+ школ" ====== */
.sm-hero-float-badge {
    position: absolute !important;
    top: -24px !important;
    right: -24px !important;
    background: linear-gradient(to bottom right, #1E293B, #334155) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    z-index: 10 !important;
}

.sm-hero-float-badge li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    list-style: none !important;
}

/* Зелёная пульсирующая точка */
.sm-hero-float-badge li i {
    width: 12px !important;
    height: 12px !important;
    background: #10B981 !important;
    border-radius: 50% !important;
    animation: pulse 2s ease-in-out infinite !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6) !important;
}

.sm-hero-float-badge li span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #fff !important;
}


/* ====== 12. СЕТКА (опционально) ====== */
/* Можно наложить поверх секции сетку как на референсе */
.sm-home-hero .ba-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
}


/* ====== Карточки с ценами (Вторая и третья колонка) ====== */

/* Стандартная карточка (синяя) */
.sm-pricing-card-standard {
    background: linear-gradient(to bottom right, #1E293B, #334155) !important;
    border: 1px solid #475569 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Премиум карточка (розово-фиолетовая) */
.sm-pricing-card-premium {
    background: linear-gradient(to bottom right, #7209B7, #F72585) !important;
    border: 2px solid #FFD700 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 48px rgba(247, 37, 133, 0.5) !important;
    position: relative !important;
}

/* Иконка в карточке стандарт */
.sm-pricing-icon-standard {
    background: linear-gradient(to bottom right, #3B82F6, #2563EB) !important;
  padding: 16px;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    
}

.sm-pricing-icon-standard svg {
    width: 48px !important;
    height: 48px !important;
    color: #FFFFFF !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Иконка в карточке премиум */
.sm-pricing-icon-premium {
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 16px;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.sm-pricing-icon-premium svg {
    width: 48px !important;
    height: 48px !important;
    color: #FFFFFF !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Плашка со скидкой - применяется к <li> */
.sm-pricing-discount-badge li {
    background: linear-gradient(to right, #FFD700, #FFA500) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
}

.sm-pricing-discount-badge li span {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* прайс - черная - 2 колонка */

/* Контейнер списка возможностей */
.sm-pricing-features-list {
    list-style: none !important;
}

/* Элемент списка */
.sm-pricing-features-list li {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
}

/* Иконка чекмарк */
.sm-pricing-check-icon {
    color: #10B981 !important;
    flex-shrink: 0 !important;
}

.sm-pricing-check-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    display: block !important;
}



/* Контейнер списка возможностей*/
.sm-pricing-features-list {
    list-style: none !important;
}

/* Элемент списка */
.sm-pricing-features-list li {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    gap: 0px;
}


/* Кнопка стандартной карточки */
.sm-pricing-button-standard a {
    background: linear-gradient(to right, #3B82F6, #2563EB) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: block !important;
}

.sm-pricing-button-standard a:hover {
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4) !important;
    transform: scale(1.05) !important;
}


/* Кнопка премиум карточки */
.sm-pricing-button-premium a {
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

.sm-pricing-button-premium a:hover {
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

/* Иконка преимущества */
.sm-pricing-benefit-icon {
    background: linear-gradient(to bottom right, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)) !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 12px !important;
}

.sm-pricing-benefit-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #FFD700 !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Ссылка "Все обновления" */
.sm-pricing-updates-link {
    color: #FFD700 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.sm-pricing-updates-link:hover {
    color: #FFA500 !important;
}

/* ====== 1. СЕКЦИЯ: фон + декоративные круги ====== */
.sm-product-section {
    background: linear-gradient(to bottom, #ffffff, #F8FAFC, #ffffff) !important;
   
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративный круг — правый верхний */
.sm-product-section::before {
    content: '' !important;
    position: absolute !important;
    top: 25% !important;
    right: 25% !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.05)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — левый нижний */
.sm-product-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 25% !important;
    left: 25% !important;
    width: 400px !important;
    height: 400px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.05), rgba(247, 37, 133, 0.05)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-product-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== 2. ГЛАВНАЯ ИКОНКА секции (корзина) ====== */
.sm-product-main-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}

.sm-product-main-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #fff !important;
    stroke: currentColor !important;
    display: block !important;
}

/* ====== 4. ИКОНКА внутри карточки ====== */
.sm-product-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.sm-product-card-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Hover эффект на иконку при наведении на карточку */
.sm-product-card:hover .sm-product-card-icon {
    box-shadow: 0 10px 15px -3px rgba(247, 37, 133, 0.3) !important;
    transform: scale(1.1) !important;
}

/* ====== 6. КНОПКА "Узнать больше" ====== */
.sm-product-btn .ba-button-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 16px 32px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sm-product-btn .ba-button-wrapper a:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.05) !important;
}

.sm-product-btn .ba-button-wrapper a i {
    font-size: 20px !important;
    color: #fff !important;
}


/* ============================================================
   SM 2025 — Всплывающее окно Black Friday (PromoModal)
   ============================================================ */

/* ====== 1. КОНТЕЙНЕР МОДАЛЬНОГО ОКНА: фон + рамка ====== */
.sm-promo-modal {
    background: linear-gradient(to bottom right, #000000, #1a1a1a, #000000) !important;
    box-shadow: 0 0 80px rgba(255, 215, 0, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 24px !important;
}

/* Декоративный круг — правый верхний */
.sm-promo-modal::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 256px !important;
    height: 256px !important;
    background: linear-gradient(to bottom right, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.2)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 2s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — левый нижний */
.sm-promo-modal::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 192px !important;
    height: 192px !important;
    background: linear-gradient(to bottom right, rgba(255, 107, 107, 0.2), rgba(255, 215, 0, 0.2)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 2s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Контент поверх декоративных элементов */
.sm-promo-modal .ba-row-wrapper,
.sm-promo-modal .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== 2. ОСНОВНАЯ ИКОНКА (вращающаяся) ====== */
.sm-promo-main-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    background: linear-gradient(to bottom right, #FFD700, #FFA500) !important;
    border-radius: 50% !important;
    margin-bottom: 16px !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5) !important;
    animation: sm-promo-wobble 3s ease-in-out infinite !important;
}

.sm-promo-main-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #000 !important;
    stroke: currentColor !important;
    display: block !important;
}

/* Анимация покачивания/вращения */
@keyframes sm-promo-wobble {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* ====== 3. ЗАГОЛОВОК с градиентом "BLACK FRIDAY" ====== */
.sm-promo-title {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #FFA500, #FF6B6B) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ====== 4. БЛОК СТОИМОСТИ ====== */

/* Новая цена (градиент) */
.sm-promo-price-new {
    color: transparent !important;
    background: linear-gradient(to right, #FFD700, #FFA500) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ====== 5. ПЛАШКА "Экономия" ====== */
.sm-promo-saving li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    background: linear-gradient(to right, #FFD700, #FFA500) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    list-style: none !important;
}

.sm-promo-saving li i {
    font-size: 20px !important;
    color: #000 !important;
}

.sm-promo-saving li span {
    color: #000 !important;
    font-weight: 700 !important;
}

/* ============================================================
   SM 2025 — Секция "Клиенты" (ClientsSection)
   ============================================================ */

/* ====== 1. СЕКЦИЯ: фон + сетка + декоративные круги ====== */
.sm-clients-section {
    background: #2C3E50 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Сетка-паттерн на фоне */
.sm-clients-section .ba-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px) !important;
    background-size: 64px 64px !important;
    opacity: 0.05 !important;
}

/* Декоративный круг — левый верхний */
.sm-clients-section::before {
    content: '' !important;
    position: absolute !important;
    top: 25% !important;
    left: 25% !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.1), rgba(114, 9, 183, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — правый нижний */
.sm-clients-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 25% !important;
    right: 25% !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.1), rgba(247, 37, 133, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-clients-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ============================================================
   SM 2025 — Секция "FAQ" (Часто задаваемые вопросы)
   ============================================================ */



/* ====== 2. БЕЙДЖ "Ответы на вопросы" ====== */
.sm-faq-badge li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0px !important;
    list-style: none !important;
}



/* ====== 3. ЗАГОЛОВОК с градиентным спаном ====== */
.sm-faq-title {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 24px !important;
}

/* Градиентный спан "вопросы" */
.sm-faq-title-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #2563EB, #06B6D4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ============================================================
   5. АККОРДЕОН — Стили для Gridbox структуры
   ============================================================ */

/* Контейнер аккордеона */


/* Группа аккордеона (один пункт) */
.sm-faq-accordion .accordion-group {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.sm-faq-accordion .accordion-group:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Заголовок пункта (кликабельная область) */
.sm-faq-accordion .accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
}

.sm-faq-accordion .accordion-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 24px 32px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.sm-faq-accordion .accordion-toggle:hover {
    background: rgba(0, 0, 0, 0.01) !important;
}

/* Иконка стрелки */
.sm-faq-accordion .accordion-icon {
    flex-shrink: 0 !important;
    font-size: 24px !important;
    color: #111827 !important;
     margin-right: 16px;
  font-weight:600;
}

/* ============================================================
   SM 2025 — Секция "Telegram-канал" (TelegramCta)
   ============================================================ */

/* ====== 1. СЕКЦИЯ: белый фон-обёртка ====== */
.sm-telegram-section {
    background: #fff !important;
    padding: 48px 0 !important;
}


/* ====== 2. КОНТЕЙНЕР: тёмный градиент + сетка ====== */
.sm-telegram-box {
    background: linear-gradient(to bottom right, #1F2937, #111827, #000000) !important;
    position: relative !important;
    overflow: hidden !important;
}



/* Сетка-паттерн на фоне */
.sm-telegram-box .ba-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    opacity: 0.2 !important;
}

/* Контент поверх сетки */
.sm-telegram-box .ba-row-wrapper {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== 5. КНОПКА "Подписаться" ====== */
.sm-telegram-btn .ba-button-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

.sm-telegram-btn .ba-button-wrapper a:hover {
   
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3) !important;
    transform: scale(1.05) !important;
}


/* ============================================================
   SM 2025 — Секция "Остались вопросы?" (ConsultationForm)
   ============================================================ */

/* ====== 1. СЕКЦИЯ: фон + декоративные круги ====== */
.sm-consultation-section {
    background: #F8FAFC !important;
    padding: 128px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративный круг — правый верхний */
.sm-consultation-section::before {
    content: '' !important;
    position: absolute !important;
    top: 25% !important;
    right: 25% !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.05), rgba(247, 37, 133, 0.05)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — левый нижний */
.sm-consultation-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 25% !important;
    left: 25% !important;
    width: 500px !important;
    height: 500px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.05), rgba(114, 9, 183, 0.05)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-consultation-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== 2. КАРТОЧКИ услуг (левая колонка) ====== */
.sm-consult-card {
    border: 2px solid #E2E8F0 !important;
    transition: all 0.3s ease !important;
}

/* Hover — розовая рамка (по умолчанию) */
.sm-consult-card:hover {
    border-color: #F72585 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Вариант с фиолетовой рамкой */
.sm-consult-card--purple:hover {
    border-color: #7209B7 !important;
}

/* Вариант с зелёной рамкой */
.sm-consult-card--green:hover {
    border-color: #10B981 !important;
}

/* ====== 3. ИКОНКИ в карточках ====== */

/* Базовые стили иконки */
.sm-consult-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
}

.sm-consult-icon svg {
    width: 32px !important;
    height: 32px !important;
    stroke: currentColor !important;
}

/* Hover на иконку при наведении на карточку */
.sm-consult-card:hover .sm-consult-icon {
    transform: scale(1.1) !important;
}

/* Синяя иконка (Вопросы по возможностям) */
.sm-consult-icon--blue {
    background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1)) !important;
    color: #3B82F6 !important;
}

/* Фиолетовая иконка (Разработка функционала) */
.sm-consult-icon--purple {
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.1), rgba(247, 37, 133, 0.1)) !important;
    color: #7209B7 !important;
}

/* Зелёная иконка (IT компания) */
.sm-consult-icon--green {
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1)) !important;
    color: #10B981 !important;
}


/* ====== 8. КНОПКА "Отправить заявку" ====== */
.sm-consult-btn .ba-form-submit-btn-wrapper {
    width: 100% !important;
}

.sm-consult-btn .ba-form-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 20px 40px !important;
    background: linear-gradient(to right, #3B82F6, #2563EB) !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.sm-consult-btn .ba-form-submit-btn:hover {
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3),
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    transform: scale(1.02) !important;
}

.sm-consult-btn .ba-form-submit-btn i {
    font-size: 20px !important;
    color: #fff !important;
}

.sm-consult-btn .ba-form-submit-title {
    color: #fff !important;
    font-weight: 700 !important;
}

/* ============================================================
   SM 2025 — Секция "Техническая поддержка" (TechnicalSupport)
   ============================================================ */

/* ====== 1. СЕКЦИЯ: фон + декоративные круги ====== */
.sm-support-section {
    background: linear-gradient(to bottom right, #F8FAFC, #ffffff, #F1F5F9) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративный круг — левый верхний (зелёно-синий) */
.sm-support-section::before {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    left: 80px !important;
    width: 700px !important;
    height: 700px !important;
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — правый нижний (розово-оранжевый) */
.sm-support-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 80px !important;
    right: 80px !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.1), rgba(245, 158, 11, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-support-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}

/* ====== 2. БЕЙДЖ "Служба поддержки" ====== */
.sm-support-badge li {
    display: inline-flex !important;
    background: linear-gradient(to right, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1)) !important;
    list-style: none !important;

}

.sm-support-title-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #3B82F6, #2563EB) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ====== 4. КАРТОЧКИ поддержки ====== */
.sm-support-card {
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Зелёная карточка (1) */
.sm-support-card--green:hover {
    border-color: transparent !important;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.4),
                0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Синяя карточка (2) */
.sm-support-card--blue:hover {
    border-color: transparent !important;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.4),
                0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Оранжевая карточка (3) */
.sm-support-card--orange:hover {
    border-color: transparent !important;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.4),
                0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Розовая карточка (4) */
.sm-support-card--pink:hover {
    border-color: transparent !important;
    box-shadow: 0 0 40px rgba(247, 37, 133, 0.4),
                0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}


/* ====== 6. ИКОНКИ в карточках ====== */
.sm-support-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.sm-support-icon svg {
    width: 40px !important;
    height: 40px !important;
    color: #fff !important;
    stroke: currentColor !important;
}

/* Цвета иконок */
.sm-support-icon--green {
    background: linear-gradient(to bottom right, #10B981, #059669) !important;
}

.sm-support-icon--blue {
    background: linear-gradient(to bottom right, #3B82F6, #2563EB) !important;
}

.sm-support-icon--orange {
    background: linear-gradient(to bottom right, #F59E0B, #D97706) !important;
}

.sm-support-icon--pink {
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
}


/* ====== 9. ССЫЛКА внизу карточки ====== */

/* Оранжевая ссылка */
a.sm-support-link--orange {
    color: transparent !important;
    background: linear-gradient(to right, #F59E0B, #D97706) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

a.sm-support-link--orange:hover {
    opacity: 0.7 !important;
}

/* Розовая ссылка */
a.sm-support-link--pink {
    color: transparent !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
 
    text-decoration: none !important;
    transition: opacity 0.3s ease !important;
}

a.sm-support-link--pink:hover {
    opacity: 0.7 !important;
}

/* ====== Секция Школы ======= */

/* ====== Карточка школы ====== */
.ba-item-slideset .item {
    transition: all 0.3s ease !important;
}

.ba-item-slideset .slideset-inner {
    background: #ffffff !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 2px solid #E2E8F0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;

}

/* ====== Hover эффект ====== */
.ba-item-slideset .item:hover .slideset-inner {
    border-color: rgba(247, 37, 133, 0.5) !important;
    box-shadow: 0 12px 40px rgba(247, 37, 133, 0.15) !important;
    transform: translateY(-8px) !important;
}

/* ====== Стрелки навигации ====== */
.ba-item-slideset .ba-slideset-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

.ba-item-slideset .slideset-btn-prev,
.ba-item-slideset .slideset-btn-next {
    position: absolute !important;
    background: #ffffff !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    color: #64748B !important;
    cursor: pointer !important;
    pointer-events: all !important;
}

.ba-item-slideset .slideset-btn-prev {
    left: -28px !important;
}

.ba-item-slideset .slideset-btn-next {
    right: -28px !important;
}

/* Hover стрелок */
.ba-item-slideset .slideset-btn-prev:hover,
.ba-item-slideset .slideset-btn-next:hover {
    border-color: #F72585 !important;
    box-shadow: 0 8px 24px rgba(247, 37, 133, 0.2) !important;
    color: #F72585 !important;
    transform: scale(1.1) !important;
}

.ba-item-slideset .slideset-btn-prev:active,
.ba-item-slideset .slideset-btn-next:active {
    transform: scale(0.95) !important;
}

/* ====== Точки пагинации ====== */
.ba-item-slideset .ba-slideset-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 48px !important;
}

.ba-item-slideset .ba-slideset-dots > div {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #CBD5E1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 0 !important;
}

.ba-item-slideset .ba-slideset-dots > div:hover {
    background: #94A3B8 !important;
}

/* Активная точка */
.ba-item-slideset .ba-slideset-dots > div.active {
    width: 32px !important;
    border-radius: 4px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
}


/* ============================================================
   SM 2025 — Секция "Начните работать бесплатно" (FreeStartCTA)
   ============================================================ */

/* ====== 1. СЕКЦИЯ: тёмный градиент + декоративные круги + сетка ====== */
.sm-freestart-section {
    background: linear-gradient(to bottom right, #0F172A, #1E1B4B, #0F172A) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Декоративный круг — левый верхний */
.sm-freestart-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 25% !important;
    width: 800px !important;
    height: 800px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.2), rgba(114, 9, 183, 0.2)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — правый нижний */
.sm-freestart-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 25% !important;
    width: 600px !important;
    height: 600px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.2), rgba(247, 37, 133, 0.2)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Сетка на фоне */
.sm-freestart-section .ba-overlay {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) !important;
    background-size: 72px 72px !important;
}

.sm-freestart-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== 2. ИКОНКА (ракета) ====== */
.sm-freestart-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 24px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    border-radius: 24px !important;

    box-shadow: 0 0 60px rgba(247, 37, 133, 0.4) !important;
}

.sm-freestart-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    stroke: currentColor !important;
}


/* ====== 3. ГРАДИЕНТНЫЙ СПАН "бесплатно" ====== */
.sm-freestart-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ====== 4. КНОПКА формы ====== */
.sm-freestart-btn .ba-form-submit-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 20px 40px !important;
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(247, 37, 133, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.sm-freestart-btn .ba-form-submit-btn:hover {
    box-shadow: 0 12px 48px rgba(247, 37, 133, 0.5) !important;
}

.sm-freestart-btn .ba-form-submit-btn i {
    font-size: 24px !important;
    color: #fff !important;
}

.sm-freestart-btn .ba-form-submit-title {
    color: #fff !important;
    font-weight: 700 !important;
}


/* ============================================================
   SM 2025 — Страница "Подтвердите установку" (ConfirmInstallation)
   ============================================================ */

/* ====== 1. ИКОНКА заголовка (конверт) ====== */
.sm-confirm-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 16px !important;
    background: linear-gradient(to bottom right, rgba(247, 37, 133, 0.2), rgba(114, 9, 183, 0.2)) !important;
    border-radius: 16px !important;
   
}

.sm-confirm-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #7209B7 !important;
    stroke: currentColor !important;
}


/* ====== 2. ФИОЛЕТОВЫЙ СПАН в описании ====== */
.sm-confirm-accent {
    color: #7209B7 !important;
    font-weight: 600 !important;
}


/* ====== 3. КАРТОЧКИ шагов (1, 2, 3) ====== */
.sm-confirm-card {
    background: #fff !important;
    border: 2px solid #E2E8F0 !important;
    transition: all 0.3s ease !important;
}

.sm-confirm-card:hover {
    border-color: #F72585 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}


/* ====== 4. НОМЕР в карточке (1, 2, 3) ====== */
.sm-confirm-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    background: linear-gradient(to bottom right, #F72585, #7209B7) !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.sm-confirm-card:hover .sm-confirm-number {
    transform: scale(1.1) !important;
}


/* ====== 5. РОЗОВАЯ СТРОКА с иконками ====== */
.sm-confirm-features {
    background: linear-gradient(to right, #F72585, #7209B7) !important;
    border-radius: 16px !important;
    padding: 32px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}


/* ====== 6. ИКОНКИ в розовой строке ====== */
.sm-confirm-feature-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
}

.sm-confirm-feature-icon svg {
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    stroke: currentColor !important;
}


/* ============================================================
   SM 2025 — Страница "Система установлена" (SystemInstalled)
   ============================================================ */

/* ====== 0. ФОН СЕКЦИИ ====== */
.sm-installed-section {
    background: linear-gradient(to bottom right, #F8FAFC, #ffffff, #F1F5F9) !important;

    position: relative !important;
    overflow: hidden !important;
}

/* Декоративный круг — правый верхний (зелёный) */
.sm-installed-section::before {
    content: '' !important;
    position: absolute !important;
    top: 80px !important;
    right: 80px !important;
    width: 384px !important;
    height: 384px !important;
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Декоративный круг — левый нижний (фиолетовый) */
.sm-installed-section::after {
    content: '' !important;
    position: absolute !important;
    bottom: 80px !important;
    left: 80px !important;
    width: 384px !important;
    height: 384px !important;
    background: linear-gradient(to bottom right, rgba(114, 9, 183, 0.1), rgba(247, 37, 133, 0.1)) !important;
    border-radius: 50% !important;
    filter: blur(64px) !important;
    animation: pulse 8s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.sm-installed-section .ba-section-items {
    position: relative !important;
    z-index: 1 !important;
}


/* ====== 1. ИКОНКА успеха (галочка) ====== */
.sm-installed-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    padding: 24px !important;
    background: linear-gradient(to bottom right, #10B981, #059669) !important;
    border-radius: 24px !important;
    margin-bottom: 32px !important;
    box-shadow: 0 0 60px rgba(16, 185, 129, 0.5) !important;
    animation: pulse 2s ease-in-out infinite !important;
}

.sm-installed-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #fff !important;
    stroke: currentColor !important;
}


/* ====== 2. ГРАДИЕНТНЫЙ СПАН "School-master" ====== */
.sm-installed-gradient {
    color: transparent !important;
    background: linear-gradient(to right, #10B981, #059669) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}


/* ====== 3. БЛОК "Проверьте вашу почту" (список) ====== */
.sm-installed-check li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0px !important;
    padding: 10px 32px !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
 

}

.sm-installed-check li i {

    vertical-align: middle !important;
    margin-top: 20px !important;
}

.sm-installed-check li span {

    vertical-align: middle !important;
}





/* ====== 4. КАРТОЧКИ (Готово, Безопасно, Доступ) ====== */
.ba-grid-column.sm-installed-card,
.sm-installed-card {
    border-radius: 16px !important;
    border: 2px solid #E2E8F0 !important;
    transition: all 0.3s ease !important;
}

.ba-grid-column.sm-installed-card:hover,
.sm-installed-card:hover {
    border-color: #10B981 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}


/* ====== 5. ИКОНКА в карточке ====== */
.sm-installed-card-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 16px !important;
    background: linear-gradient(to bottom right, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2)) !important;
    border-radius: 12px !important;
}

.sm-installed-card-icon svg {
    width: 32px !important;
    height: 32px !important;
    color: #10B981 !important;
    stroke: currentColor !important;
}


/* ====== 6. БЛОК "Что дальше?" ====== */
.sm-installed-next {
    background: linear-gradient(to right, #10B981, #059669) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

.sm-installed-next-title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}

.sm-installed-next-text {
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 24px !important;
}