/* =====================================================
   KTalk — видеовстречи Контур Толк в Битрикс24 — landing styles
   ===================================================== */

/* ---- CSS Variables ---- */
:root {
   --purple:       #2f6feb;
   --purple-dark:  #1f52b8;
   --purple-light: #5c8ff2;
   --purple-pale:  #eaf1ff;
   --gray-bg:      #f7f7f7;
   --text:         #1a1a2e;
   --text-muted:   #5c5c7a;
   --white:        #ffffff;
   --green:        #039f00;
   --radius:       12px;
   --shadow:       0 10px 40px rgba(47, 111, 235, 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(47, 111, 235, 0.35);
}

.button--fill:hover,
.colored-btn:hover {
   background: var(--purple-dark);
   box-shadow: 0 8px 28px rgba(47, 111, 235, 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 — изолированные стили (kt-hero)
   Используем префикс kt- чтобы не конфликтовать
   с глобальными стилями шаблона Битрикс
   ===================================================== */

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

/* Горизонтальный контейнер — два блока рядом */
.kt-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;
}

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

/* Правый блок — иконка приложения */
.kt-hero__col-right {
   flex: 0 0 360px !important;
   width: 360px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.kt-hero__img {
   width: 100% !important;
   max-width: 340px !important;
   height: auto !important;
   display: block !important;
   border-radius: 32px !important;
   filter: drop-shadow(0 20px 50px rgba(47, 111, 235, 0.28)) !important;
}

/* Бейдж «Приложение для Битрикс24» */
.kt-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;
}

/* Заголовок */
.kt-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;
}

/* Описание */
.kt-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;
}

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

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

.kt-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;
}

.kt-btn--fill {
   background: var(--purple) !important;
   color: #fff !important;
   box-shadow: 0 6px 20px rgba(47, 111, 235, 0.35) !important;
}

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

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

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

.kt-btn--block {
   width: 100% !important;
   display: flex !important;
}

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

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

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

@media (max-width: 767px) {
   .kt-hero__wrap {
      flex-direction: column !important;
      gap: 32px !important;
   }
   .kt-hero__col-right {
      flex: 0 0 auto !important;
      width: 100% !important;
      max-width: 220px !important;
      order: -1 !important;
   }
   .kt-hero__title { font-size: 26px !important; }
   .kt-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(47, 111, 235, 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; }

.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 SHOTS — Интерфейс приложения (скриншоты)
   ===================================================== */
.section-shots {
   padding: 70px 0;
}

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

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

.section-shots__row {
   display: flex;
   align-items: center;
   gap: 56px;
   margin-bottom: 56px;
}

.section-shots__row:last-child { margin-bottom: 0; }

.section-shots__row.reverse { flex-direction: row-reverse; }

.section-shots__img {
   flex: 0 0 56%;
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   overflow: hidden;
   background: var(--white);
}

.section-shots__img img {
   display: block;
   width: 100%;
   height: auto;
}

.section-shots__text {
   flex: 1 1 0;
   min-width: 0;
   display: grid;
   gap: 12px;
}

.section-shots__tag {
   display: inline-block;
   background: var(--purple-pale);
   color: var(--purple);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 20px;
   width: fit-content;
}

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

.section-shots__text p {
   font-size: 15px;
   line-height: 1.7;
   color: var(--text-muted);
   margin: 0;
}

@media (max-width: 900px) {
   .section-shots__row,
   .section-shots__row.reverse {
      flex-direction: column;
      gap: 24px;
   }
   .section-shots__img { flex: 0 0 auto; width: 100%; }
}

/* =====================================================
   ZOOM (клик по скриншоту -> лайтбокс)
   ===================================================== */
.kt-zoom {
   position: relative;
   cursor: zoom-in;
   overflow: hidden;
   line-height: 0;
}
.kt-zoom img { transition: transform 0.35s ease; }
.kt-zoom:hover img { transform: scale(1.03); }
.kt-zoom__hint {
   position: absolute;
   right: 14px;
   bottom: 14px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(26, 26, 46, 0.62);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.2s ease, transform 0.2s ease;
   pointer-events: none;
}
.kt-zoom:hover .kt-zoom__hint { opacity: 1; transform: translateY(0); }

/* =====================================================
   LIGHTBOX — модалка увеличения скриншотов
   ===================================================== */
.kt-lightbox {
   position: fixed;
   inset: 0;
   z-index: 3000;
   display: none;
   align-items: center;
   justify-content: center;
   padding: 40px;
   background: rgba(14, 10, 28, 0.86);
   backdrop-filter: blur(2px);
}
.kt-lightbox.is-open { display: flex; }
.kt-lightbox__img {
   max-width: min(1200px, 92vw);
   max-height: 90vh;
   width: auto;
   height: auto;
   display: block;
   border-radius: 12px;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
   -webkit-user-select: none;
   user-select: none;
}
.kt-lightbox__close {
   position: absolute;
   top: 24px;
   right: 28px;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
   border: none;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background 0.2s ease;
}
.kt-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

@media (max-width: 600px) {
   .kt-lightbox { padding: 16px; }
   .kt-lightbox__close { top: 12px; right: 12px; }
}

/* =====================================================
   SECTION 3 — Без KTalk / С KTalk
   ===================================================== */
.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(47, 111, 235, 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 VIDEO — видео-инструкция по настройке
   ===================================================== */
.section-video {
   padding: 70px 0;
}

.section-video__tag {
   display: table;
   margin: 0 auto 14px;
   background: var(--purple-pale);
   color: var(--purple);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 20px;
}

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

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

.section-video__frame {
   max-width: 860px;
   margin: 0 auto;
   padding: 10px;
   border-radius: calc(var(--radius) + 6px);
   background: linear-gradient(135deg, var(--purple), var(--purple-light));
   box-shadow: var(--shadow);
}

.section-video__ratio {
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 */
   border-radius: var(--radius);
   overflow: hidden;
   background: #000;
}

.section-video__ratio iframe {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}

/* =====================================================
   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(47, 111, 235, 0.2);
}

.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);
}

.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;
}

.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) {
   .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) {
   .section-1__table,
   .section-6__table {
      grid-template-columns: 1fr;
   }

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

   .section-video__frame { padding: 6px; }

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

   .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-bsocial {
   background-color: #fff;
   box-shadow: 0 0 15px rgba(47, 111, 235, .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;
   }
}

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

.kt-cta-form__wrap {
   display: grid;
   gap: 44px;
}

@media (min-width: 900px) {
   .kt-cta-form__wrap {
      grid-template-columns: 1fr 1fr;
      align-items: center;
   }
}

.kt-cta-form__eyebrow {
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--purple);
   background: var(--purple-pale);
   border-radius: 20px;
   padding: 6px 14px;
   display: inline-block;
   margin-bottom: 18px;
}

.kt-cta-form__title {
   font-size: 28px;
   font-weight: 800;
   line-height: 1.3;
   color: var(--text);
   margin: 0 0 16px;
}

.kt-cta-form__text {
   font-size: 16px;
   line-height: 1.7;
   color: var(--text-muted);
   margin: 0;
}

.kt-cta-form__form {
   background: var(--white);
   border-radius: var(--radius);
   padding: 32px;
   box-shadow: var(--shadow);
}

.kt-cta-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.kt-cta-form__field label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.kt-cta-form__field input,
.kt-cta-form__field textarea {
   border: 1px solid #d0cfe0;
   border-radius: 8px;
   padding: 13px 14px;
   font-size: 15px;
   color: var(--text);
   outline: none;
   transition: border-color 0.2s;
   width: 100%;
   font-family: inherit;
   resize: vertical;
   box-sizing: border-box;
}
.kt-cta-form__field input:focus,
.kt-cta-form__field textarea:focus { border-color: var(--purple); }
.kt-cta-form__field input.error,
.kt-cta-form__field textarea.error { border-color: #c0392b; }

.kt-cta-form__agree {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 12.5px;
   line-height: 1.5;
   color: var(--text-muted);
   margin-bottom: 18px;
   cursor: pointer;
}
.kt-cta-form__agree input { margin-top: 3px; flex-shrink: 0; }
.kt-cta-form__agree a { color: var(--purple); }

.kt-cta-form__result {
   margin-top: 14px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
}
.kt-cta-form__result--ok    { color: var(--green); }
.kt-cta-form__result--error { color: #c0392b; }

@media (max-width: 767px) {
   .kt-cta-form__title { font-size: 22px; }
}