/* ==== 0) База и типографика ==== */
:root {
  --container-max: 1320px;
  --gutter: 16px;
}

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

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Флюидная типографика */
h1 { font-size: clamp(1.8rem, 2.2vw + 1rem, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 1.6vw + .9rem, 2.25rem); line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 1.2vw + .8rem, 1.75rem); line-height: 1.25; }
p, li { font-size: clamp(1rem, .3vw + .85rem, 1.125rem); line-height: 1.6; }

/* Контейнеры */
.container, .wrap, .inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Картинки и видео */
img, svg, canvas, video { max-width: 100%; height: auto; }

/* Безопасные отступы для iOS */
.page-header, .page-footer {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* ==== 1) Хедер и навигация (без правок HTML) ==== */
/* Лого не «ломает» ряд */
.header .logo { max-width: clamp(120px, 12vw, 200px); height: auto; }

/* Горизонтальная навигация с авто-скроллом на узких экранах */
.nav, .menu, .main-nav { display: flex; gap: clamp(8px, 1.2vw, 20px); flex-wrap: wrap; }
@media (max-width: 900px) {
  .nav, .menu, .main-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .nav a, .menu a, .main-nav a { scroll-snap-align: start; white-space: nowrap; padding: 10px 6px; }
}

/* Прилипание хедера */
@supports (position: sticky) {
  .site-header { position: sticky; top: 0; z-index: 1000; backdrop-filter: saturate(1.2) blur(6px); }
}

/* ==== 2) Hero (поверх твоей текущей настройки) ==== */
.hero_area { min-height: 50vh; }
.hero_area .content {
  display: grid;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(12px, 3vw, 32px) 0;
}
.hero_area .cta { display: inline-flex; align-items: center; padding: clamp(10px, 1.2vw, 14px) clamp(16px, 2vw, 22px); }

/* На очень узких — компактнее */
@media (max-width: 480px) {
  .hero_area { min-height: 42vh; }
  .hero_area .cta { width: 100%; justify-content: center; }
}

/* ==== 3) Сетки и карточки ==== */
/* Универсальная флюидная сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.5vw, 24px);
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1200px) {
  .cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* Карточки одинаковой высоты */
.card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; }
.card__body { flex: 1 1 auto; display: grid; align-content: start; gap: 10px; }

/* ==== 4) Формы (учёт мобильного UX) ==== */
form { display: grid; gap: clamp(12px, 1.5vw, 20px); }
.form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.5vw, 20px); }
.form-row > .col-6 { grid-column: span 6; }
.form-row > .col-4 { grid-column: span 4; }
.form-row > .col-12 { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .form-row > .col-6, .form-row > .col-4 { grid-column: 1 / -1; }
}

input, select, textarea {
  width: 100%;
  padding: clamp(10px, 1.2vw, 14px);
  border-radius: 8px;
}
input[type="checkbox"], input[type="radio"] { inline-size: 18px; block-size: 18px; }

/* Крупнее тач-таргеты */
button, .btn { min-height: 44px; }

/* ==== 5) Таблицы (горизонтальный скролл без правок HTML) ==== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; border-collapse: collapse; width: 100%; }
.table-wrap th, .table-wrap td { padding: 10px 12px; text-align: left; }

/* При необходимости фиксируем первую колонку */
.table--sticky-first th:first-child, 
.table--sticky-first td:first-child {
  position: sticky; left: 0; background: inherit;
}

/* ==== 6) Модальные/попапы на маленьких экранах ==== */
.modal {
  width: min(92vw, 720px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 16px;
}

/* ==== 7) Отступы и вертикальный ритм для секций ==== */
.section { padding-block: clamp(28px, 6vw, 80px); }
.section--tight { padding-block: clamp(20px, 4vw, 48px); }

/* ==== 8) Медиа-точки для «особых» блоков ==== */
/* XXL: раскладываем плотнее */
@media (min-width: 1440px) {
  .hero_area { min-height: 60vh; }
}

/* MD: упрощаем сложные боковые панели */
@media (max-width: 992px) {
  .sidebar { order: 2; }
  .content { order: 1; }
}

/* SM: убираем лишние маргины и декоративные элементы */
@media (max-width: 600px) {
  .hide-on-mobile { display: none !important; }
  .section .lead { font-size: clamp(1.05rem, 1.2vw + .8rem, 1.25rem); }
}

/* ==== 9) Футер ==== */
.footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px) {
  .footer .cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .footer .cols { grid-template-columns: 1fr; }
}

/* ==== 10) Микроулучшения ==== */
/* Более мягкие тени и скругления в едином стиле */
.card, .modal, .dropdown, .tooltip, .popover {
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* Ссылки кликабельнее на тач-экранах */
a { padding-inline: 2px; }

.cf-turnstile {
  display: flex;
  justify-content: center;
  min-height: 70px; /* место под iframe 300x65 */
}