/* === Мобильная адаптация (до 768px) === */
@media (max-width: 768px) {
  /* Общие настройки */
  .container {
    padding: 0 15px;
  }

  /* Шапка */
  .header {
    padding: 16px 0;
  }

  .header__contacts {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
  }

  /* Приветственный экран */
  .welcome-screen {
    padding: 40px 15px;
    text-align: left;
  }

  .offer-badge {
    font-size: 14px;
    padding: 6px 12px;
    margin-bottom: 20px;
  }

  .main-title,
  .welcome-box h1 {
     font-size: 22px; /* ← адаптивный размер для h1 внутри .welcome-box */
   }

   .features {
     font-size: 14px;
   }

   .feature {
     font-size: 16px;
     margin: 8px 0;
   }

  /* Кнопка CTA */
  .cta-button {
    padding: 14px 20px;
    font-size: 17px;
    margin-top: 20px;
  }

  /* Шаги квиза */
  .step {
    padding: 20px;
  }

  .step h2 {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .quiz-select {
    font-size: 16px; /* Важно: не меньше 16px, чтобы не масштабировался iOS */
    padding: 12px;
  }

  /* Карточки с изображениями */
  .options-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .option-img {
    width: 100%;
    max-width: 320px;
    padding: 16px 12px;
  }

  .option-img .img-container {
    width: 100%;
    height: 200px; /* уменьшено для мобильных */
    max-width: 280px;
  }

  .option-img span {
    font-size: 18px;
  }

  /* Маленькие карточки (option-box) */
  .option-box {
    width: 100%;
    max-width: 200px;
    padding: 16px 10px;
  }

  .option-box img {
    width: 60px;
    height: 60px;
  }

  .option-box span {
    font-size: 14px;
  }

  /* Форма обратной связи */
  #feedback-form .form-label input {
    font-size: 16px;
    padding: 12px;
  }

  /* Попап */
  .popup_content {
    width: 95%;
    padding: 20px;
    max-width: none;
  }

  .popup_content input {
    font-size: 16px;
    padding: 12px;
  }

  .popup_content button {
    padding: 14px;
    font-size: 16px;
  }

  /* Фиксированная кнопка "Заказать звонок" */
  .callback-btn {
    top: 50px;
    right: 12px;
    min-width: 140px;
    padding: 10px 14px;
    font-size: 15px;
  }

  /* Подвал */
  .footer {
    padding: 15px 0;
    font-size: 13px;
    text-align: left;
  }

  /* Кастомные чекбоксы/радио */
  .custom-radio-checkbox {
    font-size: 16px;
    padding: 10px;
  }

  .custom-mark {
    width: 22px;
    height: 22px;
  }

  .custom-mark:after {
    left: 7px;
    top: 3px;
    width: 6px;
    height: 10px;
  }
}

/* === Очень маленькие экраны (до 480px) === */
@media (max-width: 480px) {
  .welcome-screen {
    padding: 30px 10px;
  }

  .main-title {
    font-size: 22px;
  }

  .features {
    font-size: 18px;
  }

  .offer-badge {
    font-size: 20px;
  }

  .step h2 {
    font-size: 20px;
  }

  .option-img .img-container {
    height: 180px;
  }

  .cta-button {
    padding: 12px 16px;
    font-size: 16px;
  }

  /* Убираем тень у кнопки, если экран очень узкий */
  .cta-button {
    box-shadow: 0 2px 6px rgba(176, 0, 0, 0.8);
  }

  .footer {
    font-size: 12px;
  }
}