/* ============================================================
   БУКШЕРИНГ — базовые стили (общие для всех страниц)
   Цвета и шрифты сняты 1:1 с оригинального сайта на Тильде.
   ============================================================ */

@font-face {
  font-family: 'GilroyBlack';
  src: url('/fonts/gilroy-black.woff') format('woff'),
       url('https://static.tildacdn.com/tild3934-3935-4862-a361-333861386165/gilroy-black.woff') format('woff');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --c-teal: #227575;        /* фирменные полосы, шапка */
  --c-teal-dark: #147a7a;   /* крупные заголовки H1/H2 */
  --c-teal-mid: #309696;    /* заголовки карточек */
  --c-ink: #2e3838;         /* основной текст */
  --c-ink-deep: #0b3838;    /* текст на мятных кнопках, навигация */
  --c-mint: #9bfcdf;        /* акцент: кнопки, логотип */
  --c-grey: #b5b5b5;        /* подвал, вторичный текст */
  --c-footer: #2e6161;      /* фон подвала */
  --f-head: 'GilroyBlack', Arial, sans-serif;
  --f-text: 'Rubik', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  font-family: var(--f-text);
  color: var(--c-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Контейнер повторяет сетку Тильды: 1200 → 960 → 640 → 480 → 320 */
.container {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 1199px) { .container { width: 960px; } }
@media (max-width: 959px)  { .container { width: 640px; } }
@media (max-width: 639px)  { .container { width: 480px; padding: 0 12px; } }
@media (max-width: 479px)  { .container { width: 320px; } }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--c-ink-deep);
  background: var(--c-mint);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
  transition: filter .2s ease-in-out;
}
.btn:hover { filter: brightness(.96); }
.btn--lg { font-size: 20px; height: 60px; padding: 0 36px; }
.btn--sm { font-size: 14px; height: 40px; padding: 0 20px; }
.btn--outline {
  background: transparent;
  border: 2px solid var(--c-mint);
}
.btn--white { background: #fff; }

/* ---------- Шапка ---------- */
.site-header {
  height: 60px;
  background: var(--c-teal);
  position: relative;
  z-index: 100;
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
}
.site-header__logo {
  font-family: var(--f-head);
  font-size: 30px;
  line-height: 1.2;
  color: var(--c-mint);
}
.site-header__nav {
  display: flex;
  gap: 30px;
  margin-left: 100px;
}
.site-header__nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-ink-deep);
  line-height: 1.55;
}
.site-header__nav a:hover { color: var(--c-mint); }
.site-header__actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.site-header__burger {
  display: none;
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.site-header__burger img { width: 100%; }

.site-header__cta { display: none; }

@media (max-width: 959px) {
  .site-header__nav { display: none; }
}
@media (max-width: 639px) {
  .site-header { height: 50px; }
  .site-header__logo { font-size: 18px; line-height: 1; }
  .site-header__actions { display: none; }
  .site-header__cta {
    display: inline-flex;
    margin-left: auto;
    font-size: 12px;
    height: 30px;
    padding: 0 14px;
  }
  .site-header__burger { display: block; width: 20px; height: 20px; margin-left: 14px; }
}

/* ---------- Мобильное меню (панель справа, как T450) ---------- */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 300px;
  background: #fff;
  z-index: 99999;
  transform: translateX(100%);
  display: none;
  transition: transform .3s ease-in-out;
  overflow-y: auto;
  padding: 56px 30px 30px;
}
.mobile-menu.is-ready { display: block; }
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__close {
  position: absolute;
  top: 8px; right: 8px;
  width: 40px; height: 40px;
  background: none; border: none;
  cursor: pointer;
  color: #1c1c1c;
  font-size: 26px;
  line-height: 1;
}
.mobile-menu__logo {
  font-family: var(--f-head);
  font-size: 22px !important;
  color: #28d9d3 !important;
  margin-bottom: 24px;
}
.mobile-menu a {
  display: block;
  color: #1c1c1c;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.mobile-menu a:hover { color: var(--c-teal-mid); }
.mobile-menu__social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.mobile-menu__social a { margin-bottom: 0; }
.mobile-menu__social img { width: 28px; height: 28px; }
.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mobile-menu__overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Плашка cookie (как T657) ---------- */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
  z-index: 100000;
  padding: 14px 40px;
  text-align: center;
  display: none;
}
.cookie-bar.is-visible { display: block; }
.cookie-bar__text {
  font-size: 14px;
  font-weight: 300;
  color: var(--c-ink);
}
.cookie-bar__text a { color: var(--c-teal-mid); text-decoration: underline; }
.cookie-bar__btn {
  display: inline-block;
  margin-top: 10px;
  color: var(--c-mint);
  border: 1px solid var(--c-mint);
  border-radius: 30px;
  background: none;
  text-transform: uppercase;
  font-size: 12px;
  padding: 8px 24px;
  cursor: pointer;
}
.cookie-bar__close {
  position: absolute;
  top: 10px; right: 14px;
  background: none; border: none;
  cursor: pointer;
  font-size: 16px;
  color: #000;
  line-height: 1;
}

/* ---------- Подвал (как на оригинале) ---------- */
.site-footer {
  background: var(--c-footer);
  color: #fff;
  padding: 40px 0 30px;
}
.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.site-footer__brand {
  font-family: var(--f-head);
  font-size: 22px;
  line-height: 1.55;
  color: #fff;
}
.site-footer__copy {
  font-size: 12px;
  color: var(--c-grey);
  line-height: 1.55;
  margin-top: 4px;
}
.site-footer__col { min-width: 200px; }
.site-footer__col--brand { width: 330px; }
.site-footer__nav a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-right: 46px;
  line-height: 1.55;
}
.site-footer__legal {
  margin-top: 8px;
  font-size: 12px;
  color: var(--c-grey);
  line-height: 1.9;
}
.site-footer__legal a { color: var(--c-grey); margin-right: 28px; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__pay {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.site-footer__pay img { height: 24px; width: auto; }
.site-footer__contacts {
  margin-left: auto;
  text-align: right;
}
.site-footer__contacts a.mail {
  font-size: 12px;
  color: var(--c-grey);
}
.site-footer__social {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.site-footer__social img { width: 30px; height: 30px; }

@media (max-width: 959px) {
  .site-footer__contacts { margin-left: 0; text-align: left; }
  .site-footer__social { justify-content: flex-start; }
}