/* =====================================================
   Универсальный коннектор для сайтов — landing styles
   integrator.Digital
   ===================================================== */

/* ---- CSS Variables ---- */
:root {
   --purple:       #623fa2;
   --purple-dark:  #4e3183;
   --purple-light: #7048b8;
   --purple-pale:  #f3eeff;
   --gray-bg:      #f7f7f7;
   --text:         #1a1a2e;
   --text-muted:   #5c5c7a;
   --white:        #ffffff;
   --green:        #039f00;
   --radius:       12px;
   --shadow:       0 10px 40px rgba(98, 63, 162, 0.12);
}

/* Кнопки для секций ниже hero */
.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 14px 28px;
   border-radius: 8px;
   font-size: 15px;
   font-weight: 700;
   text-decoration: none;
   transition: all 0.25s ease;
   cursor: pointer;
   border: 2px solid var(--purple);
}

.button--fill,
.colored-btn {
   background: var(--purple);
   color: var(--white) !important;
   box-shadow: 0 6px 20px rgba(98, 63, 162, 0.35);
}

.button--fill:hover,
.colored-btn:hover {
   background: var(--purple-dark);
   box-shadow: 0 8px 28px rgba(98, 63, 162, 0.45);
   transform: translateY(-1px);
   color: var(--white) !important;
}

.button--outline {
   background: transparent;
   color: var(--purple) !important;
}

.button--outline:hover {
   background: var(--purple);
   color: var(--white) !important;
}

/* =====================================================
   HERO — изолированные стили (uc-hero)
   Используем префикс uc- чтобы не конфликтовать
   с глобальными стилями шаблона Битрикс
   ===================================================== */

.uc-hero {
   background: linear-gradient(135deg, #f7f5ff 0%, #f0ecfa 50%, #e8e1f8 100%) !important;
   width: 100% !important;
   box-sizing: border-box !important;
   padding: 60px 0 70px !important;
   overflow: hidden !important;
}

/* Горизонтальный контейнер — два блока рядом */
.uc-hero__wrap {
   max-width: 1200px !important;
   margin: 0 auto !important;
   padding: 0 24px !important;
   display: flex !important;
   flex-direction: row !important;
   align-items: center !important;
   gap: 60px !important;
   box-sizing: border-box !important;
}

/* Левый блок — текст */
.uc-hero__col-left {
   flex: 1 1 0 !important;
   min-width: 0 !important;
   display: flex !important;
   flex-direction: column !important;
   gap: 0 !important;
}

/* Правый блок — картинка */
.uc-hero__col-right {
   flex: 0 0 460px !important;
   width: 460px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.uc-hero__img {
   width: 100% !important;
   max-width: 460px !important;
   height: auto !important;
   display: block !important;
   border-radius: 24px !important;
   filter: drop-shadow(0 20px 50px rgba(0, 100, 200, 0.22)) !important;
}

/* Бейдж «Приложение для Битрикс24» */
.uc-hero__subtitle {
   font-size: 12px !important;
   font-weight: 700 !important;
   letter-spacing: 2px !important;
   text-transform: uppercase !important;
   color: var(--purple) !important;
   background: var(--purple-pale) !important;
   border-radius: 20px !important;
   padding: 6px 14px !important;
   display: inline-block !important;
   margin-bottom: 18px !important;
   line-height: 1.4 !important;
}

/* Заголовок */
.uc-hero__title {
   font-size: 40px !important;
   font-weight: 800 !important;
   line-height: 1.15 !important;
   color: var(--text) !important;
   margin: 0 0 20px !important;
   padding: 0 !important;
}

/* Описание */
.uc-hero__desc {
   font-size: 16px !important;
   font-weight: 400 !important;
   line-height: 1.7 !important;
   color: var(--text-muted) !important;
   margin: 0 0 30px !important;
   padding: 0 !important;
}

.uc-hero__desc strong {
   color: var(--purple) !important;
   font-weight: 600 !important;
}

/* Кнопки */
.uc-hero__btns {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 12px !important;
   margin-bottom: 28px !important;
}

.uc-btn {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 14px 28px !important;
   border-radius: 8px !important;
   font-size: 15px !important;
   font-weight: 700 !important;
   text-decoration: none !important;
   cursor: pointer !important;
   border: 2px solid var(--purple) !important;
   transition: all 0.25s ease !important;
   box-sizing: border-box !important;
   line-height: 1 !important;
}

.uc-btn--fill {
   background: var(--purple) !important;
   color: #fff !important;
   box-shadow: 0 6px 20px rgba(98, 63, 162, 0.35) !important;
}

.uc-btn--fill:hover {
   background: var(--purple-dark) !important;
   color: #fff !important;
   box-shadow: 0 8px 28px rgba(98, 63, 162, 0.45) !important;
   transform: translateY(-1px) !important;
}

.uc-btn--outline {
   background: transparent !important;
   color: var(--purple) !important;
}

.uc-btn--outline:hover {
   background: var(--purple) !important;
   color: #fff !important;
}

/* Бейджи внизу */
.uc-hero__badges {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 10px !important;
}

.uc-hero__badge {
   font-size: 13px !important;
   font-weight: 600 !important;
   color: var(--purple) !important;
   background: var(--purple-pale) !important;
   border: 1px solid rgba(98, 63, 162, 0.2) !important;
   padding: 5px 12px !important;
   border-radius: 20px !important;
   display: inline-block !important;
}

/* ── Адаптив hero ── */
@media (max-width: 1024px) {
   .uc-hero__col-right {
      flex: 0 0 360px !important;
      width: 360px !important;
   }
   .uc-hero__title { font-size: 32px !important; }
}

@media (max-width: 767px) {
   .uc-hero__wrap {
      flex-direction: column !important;
      gap: 32px !important;
   }
   .uc-hero__col-right {
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: 340px !important;
      order: -1 !important;
   }
   .uc-hero__title { font-size: 26px !important; }
   .uc-hero__btns { flex-direction: column !important; align-items: flex-start !important; }
}

/* =====================================================
   SHARED / UTILITIES
   ===================================================== */
.graybg { background: var(--gray-bg); }

.n-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}

/* =====================================================
   SECTION 1 — Задачи
   ===================================================== */
.section-1 {
   padding: 70px 0 60px;
}

.section-1__text {
   font-size: 18px;
   font-weight: 500;
   line-height: 1.7;
   color: var(--text-muted);
   max-width: 860px;
   margin: 0 auto 50px;
   text-align: center;
}

.section-1__text span {
   color: var(--purple);
   font-weight: 700;
}

.section-1__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   text-align: center;
   margin-bottom: 40px;
}

.section-1__table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

.section-1__table-item { display: contents; }

.section-1__subtable-1 {
   background: var(--white);
   border-radius: var(--radius);
   padding: 28px;
   box-shadow: var(--shadow);
   border-top: 4px solid transparent;
   transition: transform 0.25s, box-shadow 0.25s;
   display: grid;
   gap: 10px;
}

.section-1__subtable-1:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 50px rgba(98, 63, 162, 0.18);
}

.section-1__subtable-1.ones   { border-top-color: var(--purple); }
.section-1__subtable-1.twos   { border-top-color: #4370e5; }
.section-1__subtable-1.threes { border-top-color: #039f00; }
.section-1__subtable-1.fours  { border-top-color: #e8630a; }

.s1-icon {
   font-size: 32px;
   display: block;
}

.section-1__subtable-1 strong {
   font-size: 17px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--text);
}

.section-1__subtable-1 p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-muted);
   margin: 0;
}

/* =====================================================
   SECTION 2 — Как работает (flow)
   ===================================================== */
.section-2 {
   padding: 70px 0;
}

.section-2__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 10px;
   text-align: center;
}

.section-2__subtitle {
   font-size: 16px;
   color: var(--text-muted);
   margin-bottom: 50px;
   text-align: center;
}

.section-2__flow {
   display: flex;
   align-items: flex-start;
   gap: 0;
}

.section-2__step {
   flex: 1;
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px 28px;
   box-shadow: var(--shadow);
   display: grid;
   gap: 12px;
   position: relative;
   transition: transform 0.25s;
}

.section-2__step:hover { transform: translateY(-4px); }

.section-2__step-num {
   position: absolute;
   top: -16px;
   left: 24px;
   width: 34px;
   height: 34px;
   background: var(--purple);
   color: var(--white);
   border-radius: 50%;
   font-size: 15px;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(98,63,162,0.35);
}

.section-2__step-icon { font-size: 36px; }

.section-2__step strong {
   font-size: 16px;
   font-weight: 800;
   color: var(--text);
   line-height: 1.3;
}

.section-2__step p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-muted);
   margin: 0;
}

.section-2__arrow {
   font-size: 28px;
   color: var(--purple-light);
   padding: 60px 16px 0;
   flex-shrink: 0;
   font-weight: 300;
}

/* =====================================================
   SECTION 3 — Дедубликация
   ===================================================== */
.section-3 {
   padding: 70px 0;
}

.section-3__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 10px;
   text-align: center;
}

.section-3__subtitle {
   font-size: 16px;
   color: var(--text-muted);
   margin-bottom: 40px;
   text-align: center;
}

.section-3__table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px;
   margin-bottom: 32px;
}

.section-3__col {
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow);
}

.section-3__col-header {
   padding: 18px 24px;
   font-size: 16px;
   font-weight: 800;
   display: flex;
   align-items: center;
   gap: 10px;
}

.section-3__col-header.bad  { background: #fff0f0; color: #c0392b; }
.section-3__col-header.good { background: #e6fbe6; color: var(--green); }

.section-3__list {
   background: var(--white);
   padding: 20px 24px;
   list-style: none;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.section-3__list li {
   font-size: 15px;
   line-height: 1.5;
   color: var(--text-muted);
   padding-left: 20px;
   position: relative;
}

.section-3__col.bad .section-3__list li::before {
   content: '✗';
   position: absolute;
   left: 0;
   color: #c0392b;
   font-weight: 700;
}

.section-3__col.good .section-3__list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--green);
   font-weight: 700;
}

.section-3__note {
   background: var(--purple-pale);
   border-left: 4px solid var(--purple);
   border-radius: 0 var(--radius) var(--radius) 0;
   padding: 18px 24px;
   font-size: 15px;
   line-height: 1.6;
   color: var(--text);
}

.section-3__note strong { color: var(--purple); }

/* =====================================================
   SECTION 4 — Установка
   ===================================================== */
.section-4 {
   padding: 70px 0;
}

.section-4__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 10px;
   text-align: center;
}

.section-4__subtitle {
   font-size: 16px;
   color: var(--text-muted);
   margin-bottom: 50px;
   text-align: center;
}

.section-4__steps {
   display: flex;
   flex-direction: column;
   gap: 0;
   max-width: 820px;
   margin: 0 auto;
}

.section-4__block {
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px 36px;
   box-shadow: var(--shadow);
   border-left: 5px solid var(--purple);
   transition: box-shadow 0.25s;
}

.section-4__block:hover {
   box-shadow: 0 16px 50px rgba(98,63,162,0.18);
}

.section-4__block-num {
   font-size: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: var(--purple);
   margin-bottom: 8px;
}

.section-4__block-title {
   font-size: 19px;
   font-weight: 800;
   color: var(--text);
   margin: 0 0 18px;
}

.section-4__ol {
   padding-left: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0;
}

.section-4__ol li {
   font-size: 15px;
   line-height: 1.6;
   color: var(--text-muted);
}

.section-4__ol li strong { color: var(--text); }
.section-4__ol li em { color: var(--purple); font-style: normal; }

.section-4__example {
   margin-top: 16px;
   background: #fffbea;
   border: 1px solid #ffe68d;
   border-radius: 8px;
   padding: 12px 16px;
   font-size: 14px;
   color: var(--text-muted);
   line-height: 1.6;
}

.section-4__example-label {
   font-weight: 700;
   color: #7a5c00;
   margin-right: 6px;
}

.section-4__connector {
   text-align: center;
   font-size: 28px;
   color: var(--purple-light);
   line-height: 1;
   padding-top: 6px;
   padding-bottom: 6px;
}

/* =====================================================
   SECTION 5 — Повторные обращения
   ===================================================== */
.section-5 {
   padding: 70px 0;
}

.section-5__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 10px;
   text-align: center;
}

.section-5__subtitle {
   font-size: 16px;
   color: var(--text-muted);
   margin-bottom: 40px;
   text-align: center;
}

.section-5__table {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.section-5__card {
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px 28px;
   box-shadow: var(--shadow);
   display: flex;
   flex-direction: column;
   gap: 14px;
   transition: transform 0.25s, box-shadow 0.25s;
   border-bottom: 4px solid var(--purple);
}

.section-5__card:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 55px rgba(98, 63, 162, 0.2);
}

.section-5__card-icon { font-size: 36px; }

.section-5__card strong {
   font-size: 16px;
   font-weight: 800;
   color: var(--text);
   line-height: 1.3;
}

.section-5__card p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-muted);
   margin: 0;
   flex: 1;
}

.section-5__tag {
   display: inline-block;
   background: var(--purple-pale);
   color: var(--purple);
   font-size: 12px;
   font-weight: 700;
   padding: 5px 12px;
   border-radius: 20px;
   align-self: flex-start;
}

/* =====================================================
   SECTION 6 — Требования
   ===================================================== */
.section-6 {
   padding: 70px 0;
}

.section-6__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 40px;
   text-align: center;
}

.section-6__table {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
}

.section-6__col-title {
   font-size: 17px;
   font-weight: 800;
   color: var(--text);
   margin: 0 0 20px;
}

.section-6__list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.section-6__list li {
   font-size: 15px;
   line-height: 1.5;
   color: var(--text-muted);
   padding-left: 28px;
   position: relative;
}

.section-6__list.check li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--green);
   font-weight: 700;
   font-size: 16px;
}

.section-6__list.gear li::before {
   content: '⚙';
   position: absolute;
   left: 0;
   font-size: 14px;
}

.section-6__note {
   margin-top: 24px;
   background: var(--purple-pale);
   border-left: 4px solid var(--purple);
   border-radius: 0 var(--radius) var(--radius) 0;
   padding: 16px 20px;
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-muted);
}

.section-6__note strong { color: var(--purple); }

/* =====================================================
   SECTION 7 — Источники
   ===================================================== */
.section-7 {
   padding: 70px 0;
}

.section-7__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--purple);
   margin-bottom: 10px;
   text-align: center;
}

.section-7__text {
   font-size: 17px;
   font-weight: 500;
   color: var(--text-muted);
   margin-bottom: 40px;
   text-align: center;
}

.section-7__table {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 24px;
}

.section-7__table-item {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.section-7__table-subitem {
   background: var(--gray-bg);
   border-radius: var(--radius);
   padding: 24px;
   display: grid;
   gap: 10px;
   transition: box-shadow 0.25s, transform 0.25s;
}

.section-7__table-subitem:hover {
   box-shadow: -12px 12px 5px 4px rgba(0,0,0,0.05);
   transform: translateX(-2px);
}

.s7-icon { font-size: 28px; }

.section-7__table-subitem strong {
   font-size: 16px;
   font-weight: 800;
   color: var(--text);
}

.section-7__table-subitem p {
   font-size: 14px;
   line-height: 1.65;
   color: var(--text-muted);
   margin: 0;
}

.section-7__table-subitem-right {
   background: var(--gray-bg);
   border-radius: var(--radius);
   padding: 36px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   height: 100%;
   box-sizing: border-box;
   transition: box-shadow 0.25s;
   background-image: url('../images/bg-2.png');
   background-repeat: no-repeat;
   background-position: right bottom;
   background-size: 160px;
}

.section-7__table-subitem-right:hover {
   box-shadow: -12px 12px 5px 4px rgba(0,0,0,0.05);
}

.section-7__table-subitem-right strong {
   font-size: 26px;
   font-weight: 800;
   line-height: 1.2;
   color: var(--text);
}

.section-7__table-subitem-right p {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
   color: var(--purple);
   margin: 0;
}

.section-7__small_btn a {
   background: var(--purple) !important;
   border-color: var(--purple) !important;
   color: var(--white) !important;
   font-weight: 700 !important;
   display: inline-block;
}

.section-7__small_btn a:hover {
   background: var(--white) !important;
   color: var(--purple) !important;
}

/* =====================================================
   SECTION 9 — CTA
   ===================================================== */
.section-9 {
   padding: 70px 0;
   position: relative;
   overflow: hidden;
}

.section-9__title {
   font-size: 28px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--purple) !important;
   margin-bottom: 40px;
}

.section-9__block {
   display: grid;
   grid-template-columns: auto 300px;
   gap: 20px;
   align-items: center;
}

.section-9__block_left { display: flex; flex-direction: column; gap: 20px; }

.section-9__text {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.6;
   color: var(--text-muted);
   margin: 0;
}

.purpure-btn-c {
   background: var(--purple) !important;
   border-color: var(--purple) !important;
   color: var(--white) !important;
   box-shadow: 15px 15px 5px 0 rgba(0,0,0,0.06) !important;
   font-weight: 700 !important;
}

.purpure-btn-c:hover {
   background: var(--white) !important;
   color: var(--purple) !important;
}

.section-9__block_right { min-height: 120px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
   .landing-hero__item {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .hero-mockup { order: -1; }

   .support-hero__text { font-size: 30px; }

   .section-2__flow {
      flex-direction: column;
   }

   .section-2__arrow {
      transform: rotate(90deg);
      padding: 0 0 0 28px;
   }

   .section-5__table,
   .section-3__table {
      grid-template-columns: 1fr;
   }

   .section-7__table {
      grid-template-columns: 1fr;
   }

   .section-9__block {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 767px) {
   .landing-hero__content { padding: 40px 0 50px; }

   .support-hero__text { font-size: 24px; }

   .support-hero__wrapper { flex-direction: column; align-items: flex-start; }

   .section-1__table,
   .section-6__table {
      grid-template-columns: 1fr;
   }

   .section-1__title,
   .section-2__title,
   .section-3__title,
   .section-4__title,
   .section-5__title,
   .section-6__title,
   .section-7__title,
   .section-9__title {
      font-size: 22px;
   }

   .section-5__table {
      grid-template-columns: 1fr;
   }

   .hero-mockup__flow { flex-direction: column; }
   .hero-mockup__flow-arrow { transform: rotate(90deg); }

   .hero-badges { flex-direction: column; }

   .section-4__steps { max-width: 100%; }

   .section-9__block_right { display: none; }
}

/* =====================================================
   SCROLL ANIMATIONS
   ===================================================== */
.fade-on-scroll {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* =====================================================
   SECTION CONTACT — Связаться с разработчиком
   ===================================================== */
.section-contact {
   padding: 70px 0;
}

.section-contact__title {
   font-size: 30px;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 30px;
   text-align: center;
}

.contacts-block-social {
   padding: 0;
   margin: 0 0 55px;
}

.contacts-bsocial {
   background-color: #fff;
   box-shadow: 0 0 15px rgba(98, 63, 162, .1);
   border: 1px solid #ededed;
   border-radius: 10px;
   padding: 26px 18px 26px 21px;
   width: 100%;
   display: grid;
   grid-template-columns: 355px auto;
   gap: 50px;
   grid-auto-flow: column;
   box-sizing: border-box;
}

.contacts-bsocial__left h3 {
   font-size: 24px;
   font-weight: 600;
   line-height: 28px;
}

.contacts-bsocial__left div {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.3;
   padding-top: 30px;
}

.contacts-bsocial__social-icon {
   display: grid;
   gap: 10px;
   grid-auto-flow: column;
}

.contacts-bsocial__si {
   color: #000000;
   font-size: 18px;
   line-height: 1.55;
   font-weight: 600;
   border-width: 1px;
   border-radius: 5px;
   background-position: center center;
   border-color: #000000;
   border-style: solid;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 15px 3px;
   text-decoration: none;
}

.contacts-bsocial__si:hover {
   background-color: var(--purple);
   background-image: none;
   color: #fff !important;
   opacity: 1;
}

.contacts-bsocial__icon {
   width: 25px;
   height: 25px;
   position: relative;
   margin-right: 5px;
}

.contacts-bsocial__icon div {
   width: 25px;
   height: 25px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
}

.contacts-bsocial__telegram .contacts-bsocial__default {
   background-image: url(../img/telegram.svg);
}

.contacts-bsocial__telegram:hover .contacts-bsocial__default {
   background-image: url(../img/telegram-hover.svg);
}

.contacts-bsocial__vk .contacts-bsocial__default {
   background-image: url(../img/vk.svg);
}

.contacts-bsocial__vk:hover .contacts-bsocial__default {
   background-image: url(../img/vk-hover.svg);
}

.contacts-bsocial__whatsapp .contacts-bsocial__default {
   background-image: url(../img/whatsapp.svg);
}

.contacts-bsocial__whatsapp:hover .contacts-bsocial__default {
   background-image: url(../img/whatsapp-hover.svg);
}

.contacts-bsocial__social-text {
   padding-top: 20px;
}

.contacts-bsocial__social-text div {
   color: #878787;
}

.contacts-bsocial__social-text a {
   font-weight: bold;
}

@media (max-width: 767px) {
   .contacts-bsocial {
      display: block;
   }

   .contacts-bsocial__social-icon {
      display: block;
   }

   .contacts-bsocial__si {
      margin: 10px 0;
   }
}

/* =====================================================
   UC-CTA-FORM — форма обратной связи лендинга
   ===================================================== */
.uc-cta-form {
   padding: 70px 0;
}

.uc-cta-form__title {
   font-size: 24px;
   font-weight: 800;
   color: var(--text);
   text-align: center;
   margin-bottom: 36px;
}

.uc-cta-form__fields {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   gap: 16px;
   align-items: flex-end;
   max-width: 960px;
   margin: 0 auto;
}

.uc-cta-form__field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.uc-cta-form__label {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-muted);
}

.uc-cta-form__input {
   border: 1px solid #d0cfe0;
   border-radius: 8px;
   padding: 12px 14px;
   font-size: 15px;
   color: var(--text);
   outline: none;
   transition: border-color 0.2s;
   width: 100%;
   box-sizing: border-box;
}

.uc-cta-form__input:focus {
   border-color: var(--purple);
}

.uc-cta-form__input.error {
   border-color: #c0392b;
}

.uc-cta-form__result {
   max-width: 960px;
   margin: 14px auto 0;
   font-size: 15px;
   font-weight: 600;
   text-align: center;
}

.uc-cta-form__result--ok    { color: var(--green); }
.uc-cta-form__result--error { color: #c0392b; }

.uc-cta-form__agree {
   max-width: 960px;
   margin: 16px auto 0;
   font-size: 13px;
   color: var(--text-muted);
   line-height: 1.5;
}

.uc-cta-form__agree a {
   color: var(--purple);
}

@media (max-width: 900px) {
   .uc-cta-form__fields {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 600px) {
   .uc-cta-form__fields {
      grid-template-columns: 1fr;
   }
}