/* 🔷 Обёртка всей секции */
.tools-section {
  max-width: clamp(320px, 90vw, 1600px);;
  margin: clamp(54px, 7.2vh, 90px) auto;
  padding: 0 clamp(14.4px, 2.7vw, 36px);
  font-family: 'Manrope';
}

/* 🔷 Заголовок секции */
.tools-title {
  text-align: center;
  font-size: clamp(25.2px, 3.24vw, 43.2px);
  font-weight: 500;
  margin-bottom: clamp(21.6px, 3.6vh, 36px);
}

/* 🔷 Контейнер верхнего ряда (2 карточки) */
.tools-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10.8px, 1.8vw, 18px);
  align-items: stretch;
}

/* 🔷 Левая (фиолетовая) часть */
.tools-left {
  flex: 1;
  background-image: url('/Images/BotBG1.png');
  background-size: cover;
  background-position: center;
  border-radius: clamp(16.2px, 1.98vw, 25.2px);
  color: white;
  padding: clamp(18px, 2.7vw, 27px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 🔷 Надпись в правом верхнем углу */
.tools-note {
  font-size: clamp(9.9px, 0.9vw, 11.7px);
  text-align: right;
  margin-bottom: auto;
  color: #ccc;
}

/* 🔷 Заголовок "Бот + стрелка" */
.tools-bot-title {
  display: flex;
  align-items: center;
  font-size: clamp(27px, 3.6vw, 45px);
  font-weight: 700;
  margin: clamp(10.8px, 1.8vh, 18px) 0;
  gap: clamp(5.4px, 0.9vw, 9px);
}

/* 🔷 Картинка стрелки */
.tools-arrow img {
  width: clamp(28.8px, 3.6vw, 52.2px);
  height: clamp(28.8px, 3.6vw, 52.2px);
  transform: rotate(-45deg);
  margin-top: clamp(10.8px, 1.8vh, 21.6px);
}

/* 🔷 Описание под заголовком */
.tools-description {
  font-size: clamp(12.6px, 1.08vw, 16.2px);
  line-height: 1.5;
  margin-bottom: clamp(21.6px, 3.6vh, 36px);
  font-weight: 200;
}

/* 🔷 Правая карточка (серая) */
.tools-right {
  flex: 1;
  position: relative;
  background-color: #f3f3f3;
  border-radius: clamp(16.2px, 1.98vw, 25.2px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 🔷 Фото телефона */
.tools-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 🔷 Текст "90% продаж..." */
.tools-overlay-text {
  position: absolute;
  top: clamp(10.8px, 1.8vh, 18px);
  right: clamp(10.8px, 1.8vw, 18px);
  font-size: clamp(14.4px, 1.44vw, 18px);
  font-weight: 400;
  color: #000;
  z-index: 2;
}

/* 🔷 Фиолетовая часть текста */
.highlight-purple {
  color: #6163AE;
  font-size: clamp(16.2px, 1.8vw, 20.7px);
}

/* 🔷 Нижний ряд с 3 карточками */
.tools-bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10.8px, 1.8vw, 18px);
  margin-top: clamp(14.4px, 2.7vh, 22.5px);
}

/* 🔷 Белая карточка */
.tools-card {
  flex: 1;
  background-color: #fff;
  border-radius: clamp(12.6px, 1.35vw, 18px);
  padding: clamp(12.6px, 1.8vw, 18px);
  border: 1px solid #d6d6d6;
  height: clamp(162px, 25.2vh, 198px);
}

/* 🔷 Заголовок карточки */
.tools-card h4 {
  font-size: clamp(18px, 1.98vw, 25.2px);
  font-weight: 400;
  margin-bottom: clamp(5.4px, 0.9vh, 9px);
}

/* 🔷 Текст под заголовком */
.tools-card p {
  font-size: clamp(12.6px, 1.08vw, 15.3px);
  color: #878787;
  line-height: 1.4;
  margin-top: clamp(10.8px, 1.8vh, 18px);
}




/* === TOOLS: Адаптация под мобилки (до 768px) === */
@media (max-width: 768px) {
  .tools-top-row,
  .tools-bottom-row {
    flex-direction: column;
  }

  .tools-left,
  .tools-right,
  .tools-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .tools-arrow img {
    width: 36px;
    height: 36px;
    margin-top: 0;
  }

  .tools-bot-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .tools-title {
    font-size: 24px;
  }

  .tools-description {
    font-size: 14px;
  }

  .tools-card {
    height: auto;
  }

  .tools-card h4 {
    font-size: 18px;
  }

  .tools-card p {
    font-size: 14px;
  }

  .tools-section {
    padding: 0 16px;
  }

  /* скрываем текст "90% продаж..." */
  .tools-overlay-text {
    display: none !important;
  }
}