/* ============================================================
   Уточнення масштабу, сітки та ритму.
   Підключається ПІСЛЯ основних стилів і навмисно не чіпає
   кольори, шрифти й композицію — лише розміри та пропорції.
   ============================================================ */

:root {
  /* Типографічна шкала. Раніше h1, h2 і h3 були однакові — 72px,
     а розмір залежав від висоти вікна через calc(1vw + 1vh). */
  --fs-display: clamp(34px, 2.2vw + 24px, 72px);
  --fs-h2:      clamp(26px, 1.6vw + 14px, 48px);
  --fs-h3:      clamp(18px, 0.5vw + 15px, 26px);
  --fs-body:    clamp(15px, 0.35vw + 12px, 19px);
  --fs-small:   clamp(13px, 0.2vw + 12px, 16px);
  --fs-button:  clamp(15px, 0.25vw + 12.5px, 18px);

  /* Міжрядкові інтервали. У базі стояло line-height:1 — рядки злипались. */
  --lh-display: 1.06;
  --lh-h2:      1.12;
  --lh-h3:      1.25;
  --lh-body:    1.62;

  /* Вертикальний ритм: три кроки замість випадкових множників --index */
  --space-section: clamp(56px, 5.5vw, 104px);
  --space-block:   clamp(24px, 2.2vw, 42px);
  --space-tight:   clamp(12px, 0.9vw, 18px);

  /* Ширина контенту і бічні поля */
  --measure: 62ch;
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* ---------- базова типографіка ---------- */

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body h1,
body .main_h2,
body h2,
body h3 {
  text-wrap: balance;
}

/* Заголовок сторінки */
body main .main .text h1,
body main .main .left_side .text h1,
body main .main .text .main_h2,
body main .main .left_side .text .main_h2 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.005em;
  padding-bottom: var(--space-block);
}

/* Заголовки секцій: були такі самі, як h1 */
body main .main_h2,
body main section > h2,
body main section > h3.main_h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

/* Підзаголовки: імена в команді, назви карток */
body main .we .we_ares .we_are div h3,
body main .practics .pre_images_block .items .item h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* Основний текст + обмеження довжини рядка */
body main .main .text .main_p,
body main .main .left_side .text .main_p,
body main .main .text p,
body main .main .left_side .text p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: var(--measure);
  padding-bottom: var(--space-block);
}

body main p,
body main li a {
  line-height: var(--lh-body);
}

/* ---------- заклик до дії ---------- */
/* Була 734x106 зі шрифтом 43px — конкурувала із заголовком */

body main .main .text .theme_button,
body main .main .left_side .text .theme_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  font-size: var(--fs-button);
  line-height: 1.2;
  padding: 0.95em 2.1em;
  letter-spacing: 0.01em;
}

/* ---------- сітка команди ---------- */
/* Було flex із flex-basis:23%; auto-fit тримає пропорції на всіх ширинах */

body main .we .we_ares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(16px, 1.6vw, 32px);
  align-items: start;
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: var(--space-section);
}

body main .we .we_ares .we_are {
  flex-basis: auto;
}

body main .we .we_ares .we_are img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- статистика ---------- */

body main .statistic .items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-block);
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
  padding-block: var(--space-block);
}

body main .statistic .items .item p {
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* ---------- ритм секцій ---------- */

body main .practics .pre_images_block .navs {
  padding-top: var(--space-section);
  padding-bottom: var(--space-block);
}

body main .practics .pre_images_block .navs .practics_nav a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- анімації ---------- */
/* Було transition: 0.6s на *, тобто на всі властивості разом, включно
   з геометрією — звідси «желейність» при зміні розмірів вікна. */

*, *:before, *:after {
  -webkit-transition-property: color, background-color, border-color, fill, stroke, opacity, -webkit-transform;
  transition-property: color, background-color, border-color, fill, stroke, opacity, transform;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

/* ---------- карусель практик ---------- */
/* Іконки були 174px (центральна — 348px через scale(2)) при підписі 24px,
   а бічні впирались у краї секції. */

body main .practics .pre_images_block .items {
  height: clamp(210px, 20vw, 320px);
  padding: clamp(28px, 3.5vw, 64px) 0;
}

body main .practics .pre_images_block .items .item img,
body main .practics .pre_images_block .items #item_1 img,
body main .practics .pre_images_block .items #item_2 img {
  width: clamp(54px, 4.2vw, 86px);
  padding: 0 0 var(--space-tight) 0;
}

body main .practics .pre_images_block .items .item_center {
  -webkit-transform: translate(-50%, clamp(14px, 1.8vw, 34px)) scale(1.45);
          transform: translate(-50%, clamp(14px, 1.8vw, 34px)) scale(1.45);
}

/* Відступ від країв, щоб бічні іконки не обрізались */
body main .practics .pre_images_block .items .item_left  { left: 4%; }
body main .practics .pre_images_block .items .item_right { left: 96%; }

/* ---------- список практик під каруселлю ---------- */
/* У базі `justify-content: space-betwen` — друкарська помилка, через яку
   правило не діяло і колонки збивались вліво. */

body main .practics .pre_images_block .navs .practics_nav {
  width: min(100% - var(--gutter) * 2, var(--container));
}

body main .practics .pre_images_block .navs .practics_nav ul {
  display: grid;
  /* Рівно три колонки: списки в цьому блоці мають 3 і 2 пункти, і при
     auto-fit другий список розтягувався на власні дві колонки — пункти
     двох рядків не збігались по вертикалі. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-tight) var(--space-block);
  align-items: start;
}

@media (max-width: 900px) {
  body main .practics .pre_images_block .navs .practics_nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body main .practics .pre_images_block .navs .practics_nav ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

body main .practics .pre_images_block .navs .practics_nav ul li {
  -ms-flex-preferred-size: auto;
      flex-basis: auto;
  margin: 0;
  text-align: left;
}

body main .practics .pre_images_block .navs .practics_nav ul li a,
body main .practics .pre_images_block .navs .practics_nav ul li a.more {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- числа статистики ---------- */
/* Були 72px — більші за заголовки секцій, що ламало ієрархію */

body main .statistic .items .item h3 {
  font-size: clamp(30px, 1.9vw + 12px, 52px);
  line-height: 1.05;
  padding-bottom: var(--space-tight);
}

/* ---------- підвал ---------- */

body footer {
  padding-block: var(--space-section);
}

body footer nav ul li h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

body footer nav ul li a {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- мобільне меню ---------- */
/* Посилання були 52px — майже як заголовок сторінки */

body .burger_menu nav a {
  font-size: clamp(17px, 0.6vw + 14px, 22px);
  line-height: 1.45;
}

/* ---------- заголовок форми ---------- */

body main .form .right-side form h2,
body .pop_up .form .right-side form h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  padding-bottom: var(--space-tight);
}

/* ---------- поля форм ---------- */

body main .form .right-side form input,
body .pop_up .form .right-side form input {
  font-size: var(--fs-body);
}

/* ---------- верхня навігація ---------- */
/* Була 26px при основному тексті 19px — навігація важила більше за контент */

body header .header nav ul li a {
  font-size: clamp(15px, 0.2vw + 13px, 17px);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* ---------- єдиний бічний відступ ---------- */
/* Текстова колонка починалась на різній відстані від краю: 29px на
   сторінці оплати, 122px на головній. */

body main .main .text,
body main .main .left_side .text {
  padding-inline-start: var(--gutter);
  padding-inline-end: var(--space-block);
}

body main .main .text > *,
body main .main .left_side .text > * {
  max-width: var(--measure);
}

body main .main .text h1,
body main .main .left_side .text h1,
body main .main .text h2,
body main .main .left_side .text h2,
body main .main .text .main_h2,
body main .main .left_side .text .main_h2 {
  max-width: 18ch;
}

/* ---------- заголовки внутрішніх сторінок ---------- */
/* Були 81–87px, тобто більші за заголовок головної */

body main .main h2,
body main .contacts .left_side .text h2,
body main .why_help .left_side .text h2 {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
}

body main .product h2,
body main .snake_history h2,
body main .we h3,
body main .regalies h3 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}

body main .main .block h3,
body main .product .block h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* ---------- смуга із закликом ---------- */
/* Телефон і посилання були 58px — як заголовок секції */

body main .contacts_line .contacts_line_bottom a,
body .contacts_line .contacts_line_bottom a {
  font-size: var(--fs-button);
  line-height: 1.35;
}

body main .contacts_line .contacts_line_bottom p,
body .contacts_line .contacts_line_bottom p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

body main .contacts_line > p,
body .contacts_line > p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* Контактні рядки на сторінці контактів */
body main .contacts .left_side .text a {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* Плашки заклику стискаємо до вмісту — при зменшеному шрифті
   вони виглядали порожніми смугами на пів екрана */

body main .contacts_line .contacts_line_bottom,
body .contacts_line .contacts_line_bottom {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space-block);
  width: min(100% - var(--gutter) * 2, 980px);
  margin-inline: auto;
}

body main .contacts_line .contacts_line_bottom a,
body .contacts_line .contacts_line_bottom a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1em 2.2em;
  min-width: 15rem;
}

/* ---------- блок .navs: список практик ---------- */

/* Повітря між пунктами. Було лише 12–18px по вертикалі,
   рядки читались як суцільна маса. */
body main .practics .pre_images_block .navs .practics_nav ul {
  gap: var(--space-block) clamp(24px, 2.6vw, 56px);
}

/* Другий список — окремий <ul>, тож проміжок задаємо явно */
body main .practics .pre_images_block .navs .practics_nav ul + ul {
  margin-top: var(--space-block);
}

body main .practics .pre_images_block .navs .practics_nav ul li a {
  display: inline-block;
  padding-block: 0.15em;
}

/* Посилання «Детальніше» зі стрілкою.
   У розмітці було два атрибути class поспіль, браузер лишав перший —
   тому .more не діяв і стрілка висіла на базовій лінії тексту. */
body main .practics .pre_images_block .navs .practics_nav ul li a.more {
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.55em;
  width: -webkit-fit-content;
  width: fit-content;
}

body main .practics .pre_images_block .navs .practics_nav ul li a.more img {
  width: 0.48em;
  height: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transform: translateY(0.06em);
          transform: translateY(0.06em);
}

body main .practics .pre_images_block .navs .practics_nav ul li a.more:hover img {
  -webkit-transform: translate(0.22em, 0.06em);
          transform: translate(0.22em, 0.06em);
}