/* =========================================================
   TYPOGRAPHY + GLOBAL RHYTHM — trwczech
   Требования:
   - все размеры в px
   - адаптив под разные экраны
   - единое семейство шрифтов
   - цвета/жирность указаны явно
   - минимум лишних margin у текста
   - уважает твои переменные: --gap --purple --ink --muted --line --container
========================================================= */

/* ===== Базовая типографика сайта ===== */
:root{
  /* Семейство и базовые веса */
  --fontMain: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Базовые цвета текста */
  --txt: #0D140F;                 /* соответствует твоему --ink */
  --txtMuted: rgba(13,20,15,.72); /* читабельный muted */
  --txtSoft: rgba(13,20,15,.62);  /* вторичный */
  --txtAccent: #3B1347;           /* соответствует твоему --purple */
}

/* Сброс маржинов у текста (чтобы не ломало ритм) */
h1,h2,h3,h4,p{ margin: 0; }

/* Базовые настройки текста */


/* Текстовые элементы по умолчанию */
p{
  font-size: 16px;
  line-height: 24px;
  color: var(--txtMuted);
  font-weight: 700;
}

/* Ссылки (глобально) */
a{
  color: rgba(59,19,71,.92);
  text-decoration: none;
  font-weight: 800;
}
a:hover{ color: rgba(59,19,71,1); }

/* ===== Заголовки (Default) — твоя система классов ===== */
/* H1 — брендовый крупный */
.defaultH1{
  font-family: var(--fontMain);
  font-size: 90px !important;
  line-height: 58px !important;
  letter-spacing: -1px !important;
  color: var(--txt) !important;
  font-weight: 900 !important;
}

/* H2 — секционные заголовки (не больше 3 слов у тебя в контенте) */
.defaultH2{
  font-family: var(--fontMain);
  font-size: 40px !important;
  line-height: 36px !important;
  letter-spacing: -0.6px !important;
  color: var(--txtAccent) !important;
  font-weight: 900 !important;
   margin-bottom:20px !important;
}

/* H3 — карточки / подзаголовки */
.defaultH3{
  font-family: var(--fontMain);
  font-size: 18px !important;
  line-height: 22px !important;
  letter-spacing: -0.2px !important;
  color: var(--txtAccent) !important;
  font-weight: 900 !important;
}

/* H4 — микро-заголовки/лейблы */
.defaultH4{
  font-family: var(--fontMain);
  font-size: 14px !important;
  line-height: 18px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: rgba(59,19,71,.88) !important;
  font-weight: 900 !important;
}

/* Абзац / текст */
.defaultP{
  font-family: var(--fontMain);
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--txtMuted) !important;
  font-weight: 700 !important;
}

/* ===== Списки (если они где-то остались) ===== */
li{
  font-family: var(--fontMain);
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--txtMuted) !important;
  font-weight: 700 !important;

  margin-block: 0px !important; /* чтобы не ломали ритм */
}

/* ===== Секции: единый отступ (у тебя уже есть .section) ===== */
/* Если используешь <section class="section"> — ЭТОТ блок не нужен.
   Но если где-то есть просто section без класса — удержим единый ритм. */
section{
  padding-top: calc(var(--gap) * 3) !important;
  padding-bottom: calc(var(--gap) * 3) !important;
  margin-bottom: 0px !important;
}

/* Заголовок секции без “пляски” */
section h2{
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* Подзаголовок сразу после h2 */
section h2 + p{
  margin-top: 0px !important;
  margin-bottom: calc(var(--gap) * 2) !important;
}

/* ===== Header/левый блок (если у тебя есть layout с .left) ===== */
.left{
  border-top: 1px solid rgba(13,20,15,.12);
}

/* ссылки в левом блоке — в стиле trwczech (не желтые) */
.left a{
  color: rgba(59,19,71,.92);
}
.left a:hover{
  color: rgba(59,19,71,1);
}

/* если есть .hero__title внутри .left */
.left .hero__title{
  margin-bottom: calc(var(--gap) * 2.5);
}

/* если в .left секции должны быть компактнее */
.left section{
  padding-top: calc(var(--gap) * 1) !important;
  padding-bottom: calc(var(--gap) * 1) !important;
  margin-bottom: 0px !important;
}

/* ===== Footer p (у тебя было пусто) ===== */
.site-footer p{
  font-family: var(--fontMain);
  font-size: 12px;
  line-height: 18px;
  color: rgba(13,20,15,.72);
  font-weight: 700;
  margin: 0;
}

/* =========================================================
   RESPONSIVE — px-only
   Логика:
   - уменьшение шагами под 1100 / 900 / 700 / 500 / 380
========================================================= */

@media screen and (max-width: 1100px){
  .defaultH1{ font-size: 50px !important; line-height: 50px !important; }
  .defaultH2{ font-size: 28px !important; line-height: 32px !important; }
  .defaultH3{ font-size: 17px !important; line-height: 22px !important; }
  .defaultH4{ font-size: 13px !important; line-height: 18px !important; }
  .defaultP, li{ font-size: 15px !important; line-height: 22px !important; }

  section h2 + p{ margin-bottom: calc(var(--gap) * 2) !important; }

  .left section{
    padding-top: calc(var(--gap) * 1) !important;
    padding-bottom: calc(var(--gap) * 1) !important;
  }
}

@media screen and (max-width: 900px){
  .defaultH1{ font-size: 50px !important; line-height: 46px !important; }
  .defaultH2{ font-size: 26px !important; line-height: 30px !important; }
  .defaultP, li{ font-size: 15px !important; line-height: 22px !important; }
}

@media screen and (max-width: 700px){
  .defaultH1{ font-size: 50px !important; line-height: 42px !important; }
  .defaultH2{ font-size: 24px !important; line-height: 28px !important; }

  /* на мобилках секции компактнее */
  section{
    padding-top: calc(var(--gap) * 3) !important;
    padding-bottom: calc(var(--gap) * 3) !important;
  }

  section h2 + p{
    margin-bottom: calc(var(--gap) * 1.6) !important;
  }
}

@media screen and (max-width: 500px){
  .defaultH1{ font-size: 55px !important; line-height: 38px !important; }
  .defaultH2{ font-size: 35px !important; line-height: 26px !important; }
   .defaultH3{ font-size: 28px !important; line-height: 22px !important; }
  .defaultP, li{ font-size: 16px !important; line-height: 21px !important; }
  .planValue{
    font-size: 26px ;
  }
  .proofValue{  font-size: 26px ;}
}

@media screen and (max-width: 380px){
  .defaultH1{ font-size: 40px !important; line-height: 36px !important; }
  .defaultH2{ font-size: 28px !important; line-height: 25px !important; }
   .defaultH3{ font-size: 22px !important; line-height: 22px !important; }
  .defaultP, li{ font-size: 14px !important; line-height: 21px !important; }
  .planValue{
    font-size: 20px ;
  }
  .proofValue{  font-size: 20px ;}
}
.ctaTitle{
  font-size: 32px;
  line-height: 36px;
  letter-spacing: -0.6px;
  font-weight: 900;
  color: var(--white) !important;
}