/* === ANDROID & MOBILE FIX PATCH v6 (FINAL) === */
@media (max-width: 767px) {
  /* 1. Запобігання горизонтальному скролу */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* 2. Адаптивність для всіх зображень */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 3. Масштабування заголовку на головному екрані */
  #hero-title {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }

  /* 4. Виправлення для сіток (grid) */
  section[aria-label="Reliable"] .grid,
  #demo .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  section[aria-label="Reliable"] .grid img {
    width: 80px !important;
    height: auto !important;
    flex: 0 0 auto;
  }

  /* 5. Безпечно ховаємо блок з картою на мобільних */
  .region-reach {
    display: none !important;
  }

  /* 6. Універсальні відступи для контейнерів */
  .responsive-container, .feature-block, main section {
    width: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 7. Виправлення для блоку цін та "Як почати" */
  #pricing .grid, #get-started .grid {
    display: block !important;
  }
  #pricing article, #get-started article {
    margin-bottom: 1.5rem;
  }
  #numbers .lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* 8. Виправлення для фото у блоці "W liczbach" */
  #numbers img.absolute {
      display: none !important;
  }
  #numbers .pr-\[220px\], #numbers .pr-\[260px\], #numbers .pr-\[300px\] {
      padding-right: 0 !important;
  }

  /* 9. Виправлення позиції напису "Найпопулярніший вибір" */
  #pricing article:nth-of-type(2) span.absolute {
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    width: auto;
  }

  /* 10. Виправлення фону в блоці "W liczbach" */
  #numbers .relative.rounded-3xl {
    background-color: #f9fafb !important;
  }

  /* 11. Центрування карток у блоці "W liczbach" */
  #numbers .space-y-6 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #numbers .space-y-6 > div {
    width: 90%;
    max-width: 400px;
  }

  /* 12. Прибираємо ефект "фон на фоні" */
  #numbers .lg\:grid-cols-2 > .relative > div:first-of-type {
    background-color: transparent !important;
  }

  /* 13. НОВЕ: Змінюємо вигляд карток у блоці "W liczbach" */
  #numbers .space-y-6 > div {
    flex-direction: column; /* Ставимо елементи один під одним */
    align-items: center;   /* Центруємо по горизонталі */
    text-align: center;      /* Центруємо текст */
    gap: 0.5rem;             /* Зменшуємо проміжок між цифрою і текстом */
  }
  /* Зменшуємо розмір цифр на мобільному */
  #numbers .space-y-6 > div > div:first-child {
    font-size: 3rem; /* text-5xl */
    margin-bottom: 0.5rem;
  }
}