/* =============================================
   MOBILE FIX — добавить в конец style.css
   Работает для экранов до 768px (телефоны)
   ============================================= */

/* --- Базовые сбросы --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

/* =============================================
   НАВИГАЦИЯ
   ============================================= */
@media (max-width: 768px) {
  nav,
  header nav,
  .nav,
  .navbar,
  .header {
    flex-wrap: wrap;
    padding: 12px 16px;
  }

  /* Скрыть ссылки в меню на мобильном */
  nav ul,
  nav .nav-links,
  .nav-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0;
  }

  /* Кнопка "Обсудить проект" в навигации */
  nav a[href="#contact"],
  .nav-cta,
  .header-cta {
    font-size: 13px;
    padding: 8px 14px;
    white-space: nowrap;
  }
}

/* =============================================
   HERO — главный блок
   ============================================= */
@media (max-width: 768px) {
  /* Контейнер hero */
  section:first-of-type,
  .hero,
  [class*="hero"] {
    padding: 40px 16px 32px;
    text-align: center;
  }

  /* Главный заголовок */
  h1,
  .hero h1,
  .hero-title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2;
    word-break: break-word;
  }

  /* Подзаголовок */
  .hero p,
  .hero-subtitle,
  .hero-description {
    font-size: 15px;
    line-height: 1.6;
  }

  /* Кнопки в hero */
  .hero .btn,
  .hero a[href],
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .hero .btn,
  .hero a.btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 14px 20px;
    font-size: 15px;
  }

  /* Изображение/фото в hero */
  .hero img,
  .hero-image {
    width: 100%;
    max-width: 280px;
    margin: 24px auto 0;
    display: block;
  }
}

/* =============================================
   СТАТИСТИКА (3x ROAS, -40% CPL, 50+ кампаний)
   ============================================= */
@media (max-width: 768px) {
  .stats,
  .stats-grid,
  [class*="stats"],
  .metrics,
  .numbers {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 24px 16px;
  }

  .stats > *,
  .stats-grid > *,
  .metric {
  flex: 0 0 calc(50% - 8px);
  max-width: calc(50% - 8px); 
  min-width: 0;               
  text-align: center;
  box-sizing: border-box;     
}
  .stat-number,
  [class*="stat"] strong,
  .number {
    font-size: 28px;
  }
}

/* =============================================
   СЕТКИ (услуги, преимущества, тарифы)
   ============================================= */
@media (max-width: 768px) {
  /* Любые grid/flex сетки — в колонку */
  .grid,
  .services-grid,
  .cards-grid,
  [class*="grid"],
  [class*="cards"],
  [class*="services"] {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }

  /* Карточки услуг */
  .card,
  .service-card,
  [class*="card"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* =============================================
   ТАРИФЫ (pricing)
   ============================================= */
@media (max-width: 768px) {
  .pricing,
  .pricing-grid,
  [class*="pricing"],
  [class*="plans"],
  [class*="tarif"] {
    flex-direction: column !important;
    align-items: center;
    padding: 24px 16px;
  }

  .pricing-card,
  .plan,
  [class*="pricing"] > * {
    width: 100% !important;
    max-width: 400px;
  }

  /* Популярный тариф */
  .pricing-card.popular,
  .plan.featured {
    transform: none !important;
    order: -1;
  }
}

/* =============================================
   ШАГИ ПРОЦЕССА (timeline/steps)
   ============================================= */
@media (max-width: 768px) {
  .process,
  .steps,
  .timeline,
  [class*="process"],
  [class*="steps"] {
    padding: 24px 16px;
  }

  .step,
  .process-item,
  [class*="step"] {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* =============================================
   ОТЗЫВЫ (testimonials)
   ============================================= */
@media (max-width: 768px) {
  .testimonials,
  [class*="testimonials"],
  [class*="reviews"] {
    padding: 24px 16px;
  }

  .testimonial-card,
  .review,
  [class*="testimonial"] > * {
    width: 100% !important;
    min-width: unset !important;
  }

  /* Если есть горизонтальный скролл отзывов */
  [class*="testimonials"] [class*="scroll"],
  [class*="testimonials"] [class*="slider"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 16px;
    padding-bottom: 12px;
  }
}

/* =============================================
   КЕЙС / ПОРТФОЛИО
   ============================================= */
@media (max-width: 768px) {
  .case,
  .portfolio,
  [class*="case"],
  [class*="portfolio"] {
    padding: 24px 16px;
  }

  .case-metrics,
  .case-stats,
  [class*="case"] [class*="metrics"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
  }

  .case-metric,
  [class*="case"] [class*="metric"] {
    flex: 0 0 calc(50% - 6px);
  }
}

/* =============================================
   ФОРМА ОБРАТНОЙ СВЯЗИ
   ============================================= */
@media (max-width: 768px) {
  form,
  .contact-form,
  [class*="form"] {
    width: 100%;
    padding: 0 16px;
  }

  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Важно: 16px предотвращает zoom на iOS */
    padding: 12px 14px;
    box-sizing: border-box;
  }

  textarea {
    min-height: 120px;
    resize: vertical;
  }

  button[type="submit"],
  .submit-btn,
  form .btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }
}

/* =============================================
   КОНТАКТЫ
   ============================================= */
@media (max-width: 768px) {
  .contact,
  [class*="contact"] {
    flex-direction: column !important;
    padding: 32px 16px;
    gap: 24px;
  }

  .contact-links,
  [class*="contact"] [class*="links"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

/* =============================================
   ОБЩИЕ СЕКЦИИ — паддинги и заголовки
   ============================================= */
@media (max-width: 768px) {
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 34px) !important;
    line-height: 1.25;
    word-break: break-word;
  }

  h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  p {
    font-size: 15px;
    line-height: 1.65;
  }

  /* Контейнеры с фиксированной шириной */
  .container,
  .wrapper,
  [class*="container"],
  [class*="wrapper"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =============================================
   МЕЛКИЕ ЭКРАНЫ (до 480px — iPhone SE и т.п.)
   ============================================= */
@media (max-width: 480px) {
  h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
  }

  .stats > *,
  .stat-item {
    flex: 0 0 100%;
  }

  .case-metric {
    flex: 0 0 100%;
  }
}

/* =============================================
   БЕГУЩАЯ СТРОКА (marquee/ticker)
   ============================================= */
@media (max-width: 768px) {
  [class*="marquee"],
  [class*="ticker"],
  [class*="scroll-text"] {
    font-size: 13px;
  }
}
* {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
input,
textarea,
select,
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
}

@media (hover: none) {

  a:hover,
  button:hover,
  .btn:hover,
  .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

}.cursor,
.custom-cursor,
.cursor-dot,
.cursor-ring,
.mouse-circle,
.circle {
  display: none !important;
}html,
body {
  overflow-x: hidden !important;
  max-width: 100%;
}

* {
  box-sizing: border-box;
  max-width: 100%;
}
.marquee-track {
  max-width: unset !important;
  width: max-content !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  animation: marquee-scroll 25s linear infinite;
  will-change: transform;
}

.marquee-item {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
section,
div,
container {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Мобильная адаптация */

@media (max-width: 768px) {

  body {
    overflow-x: hidden !important;
  }

  .container,
  .hero-container,
  .about-container,
  .services-container,
  .results-grid,
  .stats-grid,
  .cta-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 auto !important;
  }

  .stats-grid,
  .results-grid,
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-card,
  .service-card,
  .result-card {
    width: 100% !important;
  }

  h1 {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }

  h2 {
    font-size: 28px !important;
  }

  .hero-buttons {
    flex-direction: column !important;
  }

  .hero-buttons a {
    width: 100%;
  }

}