/* Digital Slap — base CSS shared across all pages */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #0A0A0A;
  color: #F5F2EC;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: #C6FF3D; color: #0A0A0A; }

h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

img { max-width: 100%; display: block; }

/* Responsive: hide desktop nav on narrow screens, show burger */
@media (max-width: 900px) {
  .ds-nav-desktop { display: none !important; }
  .ds-cta-desktop { display: none !important; }
  .ds-burger { display: block !important; }
}
@media (max-width: 760px) {
  .ds-footer-strip { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ds-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 480px) {
  .ds-footer-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================
   Mobile polish — кнопки, процесс-чипсы, общие правки
   ========================================================== */

/* Горизонтальный скролл защищаем на html И body — clip не ломает sticky (в отличие от hidden) */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Длинные русские слова ("конфиденциальности") на мобиле должны переноситься, а не вылезать */
h1, h2, h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
@media (max-width: 640px) {
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
}


/* --- Мобильный хедер: всегда виден, бургер и CTA поверх контента --- */
@media (max-width: 900px) {
  [data-ds-header] {
    background: rgba(10,10,10,0.88) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    border-bottom: 1px solid rgba(245,242,236,0.06) !important;
  }
}

/* --- Мобильная CTA-кнопка в хедере, появляется при скролле --- */
.ds-cta-mobile { display: none !important; }
@media (max-width: 900px) {
  .ds-cta-mobile.scrolled-visible { display: flex !important; align-items: center !important; }
  /* На мобиле кнопку сжимаем сильнее, чтобы влезло с бургером */
  .ds-cta-mobile .ds-btn {
    font-size: 11px !important;
    padding: 10px 14px !important;
    letter-spacing: .02em !important;
    gap: 8px !important;
  }
  .ds-cta-mobile .ds-btn-arrow { width: 20px !important; height: 20px !important; }
}

/* --- CTA buttons — сжимаем на мобильных --- */
@media (max-width: 640px) {
  .ds-btn {
    font-size: 12px !important;
    letter-spacing: .03em !important;
    gap: 10px !important;
    white-space: normal !important;       /* разрешаем перенос длинного текста */
    text-align: left !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
  }
  .ds-btn-lg { padding: 16px 22px !important; }
  .ds-btn-md { padding: 14px 18px !important; }
  .ds-btn-sm { padding: 10px 14px !important; }

  .ds-btn-lg .ds-btn-arrow { width: 28px !important; height: 28px !important; }
  .ds-btn-md .ds-btn-arrow { width: 24px !important; height: 24px !important; }
  .ds-btn-sm .ds-btn-arrow { width: 20px !important; height: 20px !important; }
}

@media (max-width: 380px) {
  .ds-btn { font-size: 11px !important; }
  .ds-btn-lg { padding: 14px 18px !important; }
}

/* --- Process meta-chips (СТАРТ/КАНАЛОВ/ЦЕЛЬ) на мобиле --- */
@media (max-width: 640px) {
  /* Контейнер чипсов — принудительно в сетку 2 колонки, не вертикальный стек */
  .process-chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .process-chip {
    flex: none !important;               /* убираем растяжение flex-item */
    padding: 10px 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Последний чип (3-й из нечётного количества) — тянется на обе колонки */
  .process-chips > .process-chip:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
}

/* --- Ужимаем карточки процесса по краям на мобиле --- */
@media (max-width: 640px) {
  .process-card {
    padding: 18px !important;
    border-radius: 16px !important;
  }
  /* Номер шага УНАД карточкой, чтобы карточка заняла всю ширину */
  .process-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Круг номера шага — меньше и не по центру, а влево */
  .process-row > div:first-child {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .process-row > div:first-child > div:first-child {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
  }
  /* Скрываем декоративную вертикальную линию между шагами на мобиле */
  .process-line { display: none !important; }
}

/* --- Italic serif: подстраховка от фэйкового курсива --- */
em, .ds-italic, [style*="Instrument Serif"] {
  font-synthesis: none;                    /* запрещаем синтетический курсив/жирный */
}

/* --- FAQ accordion: зелёная рамка не должна прятаться под sticky header --- */
.faq-item {
  position: relative;
  z-index: 1;
  scroll-margin-top: 100px;                /* отступ при скролле к элементу */
}

/* --- Contact section: на мобиле контакты УКАЖУТСЯ ПОД формой, чтобы не отделять её --- */
.contacts-mobile { display: none !important; }
@media (max-width: 900px) {
  .contacts-inline { display: none !important; }  /* скрываем версию в левой колонке */
  .contacts-mobile { display: block !important; } /* показываем дубликат после формы */
}