/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.phone-container {
  position: relative;
  width: 340px; /* Пример */
  margin: 0 auto; /* Чтобы центрировать */
}

/* Само изображение телефона */
.phone-frame {
  position: relative;
  z-index: 2; /* чтобы рамка была поверх iframe */
  width: 100%;
  height: auto;
  display: block;
  /* Отключаем обработку кликов */
  pointer-events: none; 
}

/* Контейнер для iframe */
.screen-wrapper {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 309px;
  height: 659px;
  z-index: 2;
  overflow: hidden;
  border-radius: 40px;
}

.screen-wrapper iframe {
  /* Делаем его больше на обратную величину масштаба,
     чтобы при scale(0.8) iframe всё равно «закрывал» всю нужную область */
  width: 111%;  /* 1 / 0.8 = 125% */
  height: 111%; 
  border: none;

  /* Масштабируем на 80% */
  transform: scale(0.9);
  transform-origin: 0 0; /* чтобы «увеличение/уменьшение» шло от верхнего левого угла */
}
.tryit {
  width: 100%;
  height: 152px;
  background-size: contain; 
  background-position: center;
  background-repeat: no-repeat;
}



/* Анимация телефона */
@keyframes phone-wiggle {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(2deg); }
    40%  { transform: rotate(-2deg); }
    60%  { transform: rotate(1.5deg); }
    80%  { transform: rotate(-1.5deg); }
    100% { transform: rotate(0deg); }
}

.phone-container.wiggle-once {
    animation: phone-wiggle 1.2s ease-in-out;
}


.next-prev-example {
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary-accent);
    border: none;
    color: white; /* цвет стрелки */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
    font-size: 24px;
    box-shadow: none; /* убираем обрезанную тень */
    overflow: hidden; /* на всякий случай */
    padding-left: 4px; /* немного сдвигаем стрелку внутрь */
}

.left-arrow span {
    transform: translateX(-13px);
}

.right-arrow span {
    transform: translateX(15px);
}

.next-prev-example:hover {
    background-color: var(--color-primary-accent) !important;
}

.next-prev-example:hover {
    background-color: var(--color-primary-accent) !important;
}

/* Левая кнопка — "назад" */
.left-arrow {
    left: -30px; /* 60px кнопка + 15px отступ */
    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

/* Правая кнопка — "вперёд" */
.right-arrow {
    right: -30px;
    clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

[class^="uil-"]:before, [class*=" uil-"]:before {
    line-height: 2!important;
}

@media (max-width: 991px) {
  .tryit {
    display: none;
  }
}

.phone-container-wrapper {
    width: 100%;
    max-width: 469px;
}

@media (max-width: 767px) {
  .col-phone {
    padding-left: 0!important;
    padding-right: 0!important;
  }
}
@media (max-width: 767px) {
  .phone-container-wrapper {
    transform: scale(0.8) !important;
    transform-origin: top left !important;
    width: 125% !important;
  }
}
/* Стилизация кнопки пошагового мастера */
.btn-wizard-outline {
  background-color: var(--color-surface);
  color: #FFFFFF !important;
  border: 1px solid rgba(247, 147, 26, 0.4); /* Полупрозрачная оранжевая рамка в тон интерфейса */
  font-family: var(--bs-font-sans-serif);
  font-weight: 600;
  font-size: 1.125rem; /* Соответствует btn-lg */
  transition: all 0.25s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Эффект наведения мыши */
.btn-wizard-outline:hover {
  background-color: var(--bs-body-bg); /* Слегка меняем глубину подложки */
  border-color: var(--color-primary-accent); /* Яркая оранжевая рамка */
  color: var(--color-primary-accent) !important; /* Текст становится оранжевым */
  box-shadow: 0 0 15px rgba(247, 147, 26, 0.25); /* Легкое фирменное свечение */
  transform: translateY(-1px);
}

/* Активное состояние при нажатии */
.btn-wizard-outline:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Адаптивность для мобильных экранов */
@media (max-width: 575.98px) {
  .hero-section .btn-crypto-primary,
  .hero-section .btn-wizard-outline {
    width: 100%; /* На мобилках кнопки растягиваются на всю ширину для удобства тапа */
  }
}

/* ==========================================================================
   ABOUT SECTION STYLES (ADAPTED FOR NEW DESIGN)
   ========================================================================== */

/* Базовый класс для карточки преимуществ */
.feature-box {
  position: relative;
  overflow: hidden;
  padding: 2.25rem 2rem !important;
}

/* Обертка иконки и её дефолтное состояние (размытый оранжевый фон в стиле сайта) */
.feature-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  line-height: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background-color: rgba(234, 88, 12, 0.1);
  border: 1px solid rgba(234, 88, 12, 0.25);
  color: var(--color-primary-accent);
}

/* Эффект инверсии при наведении на карточку */
.feature-box:hover .feature-icon-wrapper {
  background: var(--gradient-primary);
  color: #ffffff;
  border-color: transparent;
  transform: scale(1.05);
  box-shadow: 0 0 20px -3px rgba(234, 88, 12, 0.5);
}

/* Шахматное смещение блоков (2-й и 4-й приподнимаются) */
@media (min-width: 768px) {
  .about-features-grid .col-md-6:nth-child(2) .feature-box, 
  .about-features-grid .col-md-6:nth-child(4) .feature-box {
    margin-top: -40px;
    margin-bottom: 40px;
  }
}

/* Сброс смещения на мобильных устройствах, чтобы сетка не ломалась */
@media (max-width: 767.98px) {
  .about-features-grid .col-md-6:nth-child(2) .feature-box, 
  .about-features-grid .col-md-6:nth-child(4) .feature-box {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   VIDEO SECTION STYLES
   ========================================================================== */

/* Контейнер плеера */
.video-player-container {
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Оверлей поверх превью */
.video-overlay {
  background: rgba(3, 3, 4, 0.4);
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

/* Изменение состояния при воспроизведении (если ваш скрипт убирает оверлей) */
.video-player-container:not(.video-player-paused) .video-overlay {
  opacity: 0;
}

/* Стилизация новой кнопки Play */
.crypto-play-button {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--gradient-primary);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 25px rgba(234, 88, 12, 0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Эффекты при наведении на кнопку */
.crypto-play-button:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 35px rgba(247, 147, 26, 0.7);
}

/* Иконки внутри кнопки */
.crypto-play-button .play-icon,
.crypto-play-button .pause-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1); /* Делаем SVG иконки чисто белыми */
  transition: transform 0.2s ease;
}

/* Логика отображения иконок (play/pause) в зависимости от класса контейнера */
.video-player-paused .crypto-play-button .pause-icon {
  display: none !important;
}

.video-player-container:not(.video-player-paused) .crypto-play-button {
  opacity: 0; /* Прячем кнопку, когда видео играет */
  visibility: hidden;
}

/* Показываем кнопку паузы при наведении на играющее видео (если поддерживается вашим JS) */
.video-player-container:not(.video-player-paused):hover .crypto-play-button {
  opacity: 1;
  visibility: visible;
}

.video-player-container:not(.video-player-paused) .crypto-play-button .play-icon {
  display: none !important;
}

.video-player-container:not(.video-player-paused) .crypto-play-button .pause-icon {
  display: inline-block !important;
}

@media (max-width: 767.98px) {
  .crypto-play-button {
    width: 60px;
    height: 60px;
  }
  .crypto-play-button .play-icon,
  .crypto-play-button .pause-icon {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   CRM SECTION STYLES
   ========================================================================== */
/* Мягкий интерактивный эффект для элементов списка фич */
.crypto-feature-item {
  padding: 1rem;
  border-radius: 0.75rem;
  transition: background-color 0.3s ease;
}

.crypto-feature-item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.crypto-feature-item .icon-node {
  /* Перебиваем фиксированные инлайны, чтобы иконка идеально центрировалась */
  width: 48px;
  height: 48px;
}



/* ==========================================================================
   EXAMPLES SECTION STYLES
   ========================================================================== */


.swiper {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 2;
    border-radius: 12px;
    overflow: visible;
    /* overflow: hidden;
    margin: auto;
    border: 1px solid #57595E;
    transition: background-color 0.2s ease-in-out; */
}


/* Перебиваем базовые отступы крипто-карточки конкретно для картинок в карусели */
.swiper-slide {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
  border-color: var(--color-border) !important;
}

/* Ховер-эффект: карточка чуть приподнимается и загорается оранжевым неоновым контуром */
.swiper-slide:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(247, 147, 26, 0.6) !important;
  box-shadow: 0 10px 30px 2px rgba(247, 147, 26, 0.5) !important;
}

/* ==========================================================================
   PRICES STYLES
   ========================================================================== */

/* Обёртка таблицы для рамки и Glow-эффекта */
.pricing-table-wrap {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  transition: all 0.3s ease;
  border-color: rgba(247, 147, 26, 0.5);
}
.not-posible {
  color: var(--color-primary-accent) !important;
}
/* Эффект свечения всей таблицы при наведении */
.pricing-table-wrap:hover {
  border-color: rgba(247, 147, 26, 0.5);
  box-shadow: 0 0 30px -10px rgba(247, 147, 26, 0.35);
}

/* Сетка самой таблицы */
.pricing-comparison-table {
  border-collapse: collapse;
  width: 100%;
  border-radius: 16px !important;
}

.pricing-comparison-table td, 
.pricing-comparison-table th {
  border: 1px solid var(--color-border) !important;
  padding: 1rem 0.75rem;
}

/* Разделители категорий (Resources, AI consultant и т.д.) */
.table-category-divider {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Стилизация правого столбца (Flexible) */
.pricing-comparison-table .flexible-column {
  background-color: rgba(247, 147, 26, 0.11) !important; /* Твой цвет #f7931a1c */
}

.flexible-column {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Новые стильные кнопки плюса и минуса */
.custom-calc-btn {
  font-size: 1.1rem;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.2s ease;
  position: relative;
  z-index: 10;
  pointer-events: auto !important;
}

/* Минус — утонченный белый/серый, при наведении подсвечивается красным */
.custom-calc-btn.btn-minus {
  color: rgba(255, 255, 255, 0.6);
}
.custom-calc-btn.btn-minus:hover {
  color: #ef4444;
  transform: scale(1.1);
}

/* Плюс — утонченный белый/серый, при наведении подсвечивается твоим оранжевым или зеленым */
.custom-calc-btn.btn-plus {
  color: rgba(255, 255, 255, 0.6);
}
.custom-calc-btn.btn-plus:hover {
  color: var(--color-primary-accent);
  transform: scale(1.1);
}

/* Класс текста, который ты заменил */
.text-normal {
  color: rgba(255, 255, 255, 0.85) !important;
}
.text-success {
  color: var(--color-primary-accent) !important; /* Зеленый для положительных значений */
}
/* Экстремальное сжатие для мобилок */
@media (max-width: 576px) {
  .pricing-comparison-table {
    font-size: 0.65rem !important;
    table-layout: fixed;
  }
  .pricing-comparison-table td, 
  .pricing-comparison-table th {
    padding: 0.5rem 0.25rem !important;
  }
  .pricing-comparison-table th .fs-2 {
    font-size: 1.3rem !important;
  }
  /* .flexible-column .custom-calc-btn {
    display: none !important; 
  } */
  .price-table-value {
    padding: 0 !important;
    font-size: 0.75rem;
  }
  .disclaimer {
    font-size: 0.55rem !important;
    line-height: 1.1;
  }
  td.flexible-column {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  td.flexible-column > * {
    margin: auto;
  }
  
}