/* ============================================================
   ПОДКЛЮЧЕНИЕ ШРИФТОВ И ИКОНОК
   ============================================================ */

/* Подключаем иконки Font Awesome (локальный файл) */
@import url(fontawesome-all.min.css);

/* Подключаем шрифт Source Sans Pro с Google Fonts
   (три начертания: 300=тонкий, 700=жирный, 900=очень жирный) */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");

/*
   Phantom by HTML5 UP — готовый шаблон сайта
   Лицензия CCA 3.0 — можно использовать бесплатно
*/

/* ============================================================
   СБРОС СТИЛЕЙ БРАУЗЕРА (CSS Reset)
   Все браузеры по умолчанию добавляют свои отступы и размеры.
   Этот блок обнуляет всё "до нуля", чтобы везде выглядело одинаково.
   ============================================================ */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;           /* убираем внешние отступы */
  padding: 0;          /* убираем внутренние отступы */
  border: 0;           /* убираем рамки */
  font-size: 100%;     /* сбрасываем размер шрифта */
  font: inherit;       /* наследуем шрифт от родителя */
  vertical-align: baseline; /* выравнивание по базовой линии */
}

/* Эти HTML5-теги в старых браузерах не блочные — делаем блочными */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Убираем маркеры у списков */
ol, ul {
  list-style: none;
}

/* Убираем кавычки у цитат */
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

/* Убираем пробелы между ячейками таблицы */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Запрещаем браузеру увеличивать шрифт на мобильных при повороте экрана */
body {
  -webkit-text-size-adjust: none;
}

/* Убираем фон у выделенного текста (тег <mark>) */
mark {
  background-color: transparent;
  color: inherit;
}

/* Убираем рамку внутри кнопок в Firefox */
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Убираем стандартный вид полей ввода (чтобы стилизовать самим) */
input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/* ============================================================
   БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ
   ============================================================ */

/* Ширина экрана для старого IE */
@-ms-viewport {
  width: device-width;
}

/* Показываем полосу прокрутки в IE */
body {
  -ms-overflow-style: scrollbar;
}

/* На очень маленьких экранах минимальная ширина — 320px */
@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px;
  }
}

/* Включаем правильный подсчёт размеров блоков (padding входит в ширину) */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Цвет фона всей страницы — белый */
body {
  background: #ffffff;
}

/* Отключаем все анимации пока страница грузится (класс добавляется JS-ом) */
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;
}

/* ============================================================
   ТИПОГРАФИКА — шрифты, размеры, заголовки
   ============================================================ */

/* Основной стиль текста: цвет, шрифт, размер, жирность, межстрочный интервал */
body, input, select, textarea {
  color: #585858;                               /* тёмно-серый текст */
  font-family: "Source Sans Pro", Helvetica, sans-serif; /* шрифт */
  font-size: 16pt;                              /* базовый размер 16pt */
  font-weight: 300;                             /* тонкое начертание */
  line-height: 1.75;                            /* межстрочный интервал */
}

/* На экранах ≤1680px уменьшаем шрифт до 14pt */
@media screen and (max-width: 1680px) {
  body, input, select, textarea {
    font-size: 14pt;
  }
}

/* На экранах ≤1280px уменьшаем шрифт до 12pt */
@media screen and (max-width: 1280px) {
  body, input, select, textarea {
    font-size: 12pt;
  }
}

/* Стиль ссылок */
a {
  /* Плавное изменение цвета нижней линии и цвета при наведении */
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
  text-decoration: none;                        /* убираем стандартное подчёркивание */
  color: #585858;                               /* цвет ссылки = серый */
  border-bottom: dotted 1px rgba(88, 88, 88, 0.5); /* пунктирная линия снизу */
}

/* Ссылка при наведении мышки */
a:hover {
  border-bottom-color: transparent;            /* убираем линию */
  color: #f2849e !important;                   /* розовый цвет */
}

/* Жирный текст */
strong, b {
  font-weight: 900;
}

/* Курсив */
em, i {
  font-style: italic;
}

/* Абзац — отступ снизу */
p {
  margin: 0 0 2em 0;
}

/* Заголовок H1 */
h1 {
  font-size: 2.75em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1em 0;
  letter-spacing: -0.035em;  /* немного сжимаем буквы */
}

/* Ссылка внутри H1 — берёт цвет родителя */
h1 a {
  color: inherit;
}

/* H1 на планшетах (≤736px) */
@media screen and (max-width: 736px) {
  h1 {
    font-size: 2em;
    margin: 0 0 1em 0;
  }
}

/* H1 на маленьких экранах (≤360px) */
@media screen and (max-width: 360px) {
  h1 {
    font-size: 1.75em;
  }
}

/* Заголовки H2–H6: жирные, с верхним регистром и широким межбуквенным интервалом */
h2, h3, h4, h5, h6 {
  font-weight: 900;
  line-height: 1.5;
  margin: 0 0 2em 0;
  text-transform: uppercase;   /* заглавные буквы */
  letter-spacing: 0.35em;      /* разрядка */
}

h2, h3, h4, h5, h6 {
  a { color: inherit; }        /* ссылки берут цвет заголовка */
}

h2 { font-size: 1.1em; }
h3 { font-size: 1em; }
h4 { font-size: 0.8em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.8em; }

/* На ≤980px скрываем переносы строк внутри заголовков */
@media screen and (max-width: 980px) {
  h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {
    display: none;
  }
}

/* На ≤736px уменьшаем заголовки */
@media screen and (max-width: 736px) {
  h2 { font-size: 1em; }
  h3 { font-size: 0.8em; }
}

/* Подстрочный (нижний) текст */
sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em;
}

/* Надстрочный (верхний) текст */
sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em;
}

/* Цитата — с серой левой полоской */
blockquote {
  border-left: solid 4px #c9c9c9;
  font-style: italic;
  margin: 0 0 2em 0;
  padding: 0.5em 0 0.5em 2em;
}

/* Инлайн-код */
code {
  background: rgba(144, 144, 144, 0.075); /* лёгкий серый фон */
  border-radius: 4px;
  border: solid 1px #c9c9c9;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 0.25em 0.65em;
}

/* Блок кода */
pre {
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  margin: 0 0 2em 0;
}
pre code {
  display: block;
  line-height: 1.75;
  padding: 1em 1.5em;
  overflow-x: auto; /* горизонтальная прокрутка если код длинный */
}

/* Горизонтальная разделительная линия */
hr {
  border: 0;
  border-bottom: solid 1px #c9c9c9;
  margin: 2em 0;
}

/* Широкая разделительная линия */
hr.major {
  margin: 3em 0;
}

/* Утилитарные классы выравнивания текста */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* ============================================================
   СЕТКА (.row) — система колонок для раскладки блоков
   Работает как Bootstrap: делим строку на 12 колонок
   ============================================================ */

.row {
  display: flex;          /* флекс-контейнер */
  flex-wrap: wrap;        /* перенос на следующую строку */
  box-sizing: border-box;
  align-items: stretch;   /* все колонки одинаковой высоты */
}

.row > * { box-sizing: border-box; }

/* Выравнивание строк по горизонтали */
.row.aln-left   { justify-content: flex-start; }
.row.aln-center { justify-content: center; }
.row.aln-right  { justify-content: flex-end; }

/* Выравнивание строк по вертикали */
.row.aln-top    { align-items: flex-start; }
.row.aln-middle { align-items: center; }
.row.aln-bottom { align-items: flex-end; }

/* Ширина колонок: col-1 = 1/12, col-6 = половина, col-12 = вся строка */
.row > .col-1  { width: 8.33333%; }
.row > .col-2  { width: 16.66667%; }
.row > .col-3  { width: 25%; }
.row > .col-4  { width: 33.33333%; }
.row > .col-5  { width: 41.66667%; }
.row > .col-6  { width: 50%; }
.row > .col-7  { width: 58.33333%; }
.row > .col-8  { width: 66.66667%; }
.row > .col-9  { width: 75%; }
.row > .col-10 { width: 83.33333%; }
.row > .col-11 { width: 91.66667%; }
.row > .col-12 { width: 100%; }

/* Отступы между колонками (gtr = gutter/промежуток):
   gtr-0=нет, gtr-25=четверть, gtr-50=половина, обычный=полный, gtr-150=полтора, gtr-200=двойной */
.row.gtr-0   { margin-left: 0; }
.row.gtr-25  { margin-left: -0.5em; }
.row.gtr-50  { margin-left: -1em; }
.row         { margin-left: -2em; }
.row.gtr-150 { margin-left: -3em; }
.row.gtr-200 { margin-left: -4em; }

/* Аналогичные настройки для разных размеров экрана (xlarge, large, medium, small, xsmall):
   Повторяется много раз — это адаптивная сетка под каждый breakpoint.
   Принцип тот же, просто отступы немного меньше на меньших экранах. */
/* ... (блоки @media с .col-*-xlarge, .col-*-large и т.д. до max-width: 480px) */

/* ============================================================
   СЕКЦИИ И СТАТЬИ
   ============================================================ */

/* Центрированный контент (класс .special) */
section.special, article.special {
  text-align: center;
}

/* Подзаголовок сразу под заголовком — поднимаем вверх */
header p {
  margin-top: -1em;
}

/* На мобильных оставляем без смещения */
@media screen and (max-width: 736px) {
  header p { margin-top: 0; }
}

/* ============================================================
   ИКОНКИ (.icon) — Font Awesome
   ============================================================ */

.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
}

/* Псевдоэлемент :before рисует саму иконку */
.icon:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  display: inline-block;
  font-style: normal;
}

/* Скрываем текстовую подпись иконки (для screen readers) */
.icon > .label { display: none; }

/* Залитые иконки */
.icon.solid:before { font-weight: 900; }

/* Иконки брендов */
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

/* Иконка в рамке (style2) — квадрат с закруглёнными углами и рамкой */
.icon.style2 {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  background-color: transparent;
  border: solid 1px #c9c9c9; /* серая рамка */
  border-radius: 4px;
  width: 2.65em;
  height: 2.65em;
  display: inline-block;
  text-align: center;
  line-height: 2.65em;
  color: inherit;
}

/* Иконка в рамке при наведении — розовая */
.icon.style2:hover {
  color: #f2849e;
  border-color: #f2849e;
}

/* Иконка в рамке при клике — лёгкий розовый фон */
.icon.style2:active {
  background-color: rgba(242, 132, 158, 0.1);
}

/* ============================================================
   СПИСКИ
   ============================================================ */

/* Нумерованный список */
ol {
  list-style: decimal;
  margin: 0 0 2em 0;
  padding-left: 1.25em;
}
ol li { padding-left: 0.25em; }

/* Маркированный список */
ul {
  list-style: disc;
  margin: 0 0 2em 0;
  padding-left: 1em;
}
ul li { padding-left: 0.5em; }

/* Альтернативный список без маркеров, с разделительными линиями */
ul.alt { list-style: none; padding-left: 0; }
ul.alt li {
  border-top: solid 1px #c9c9c9;
  padding: 0.5em 0;
}
ul.alt li:first-child { border-top: 0; padding-top: 0; }

/* Список описаний */
dl { margin: 0 0 2em 0; }
dl dt {
  display: block;
  font-weight: 900;
  margin: 0 0 1em 0;
}
dl dd { margin-left: 2em; }

/* ============================================================
   КНОПКИ-ДЕЙСТВИЯ (.actions) — горизонтальный список кнопок
   ============================================================ */

ul.actions {
  display: flex;
  list-style: none;
  margin-left: -1em;
  padding-left: 0;
}

ul.actions li {
  padding: 0 0 0 1em;
  vertical-align: middle;
}

/* Центрирование всех кнопок */
ul.actions.special {
  justify-content: center;
  width: 100%;
  margin-left: 0;
}

/* Кнопки в столбик */
ul.actions.stacked {
  flex-direction: column;
  margin-left: 0;
}
ul.actions.stacked li { padding: 1.3em 0 0 0; }
ul.actions.stacked li:first-child { padding-top: 0; }

/* Кнопки на всю ширину */
ul.actions.fit { width: calc(100% + 1em); }
ul.actions.fit li { flex-grow: 1; flex-shrink: 1; width: 100%; }
ul.actions.fit li > * { width: 100%; }

/* На маленьких экранах кнопки становятся вертикальными */
@media screen and (max-width: 480px) {
  ul.actions:not(.fixed) {
    flex-direction: column;
    margin-left: 0;
    width: 100% !important;
  }
  ul.actions:not(.fixed) li {
    flex-grow: 1;
    padding: 1em 0 0 0;
    text-align: center;
    width: 100%;
  }
  ul.actions:not(.fixed) li > * { width: 100%; }
  ul.actions:not(.fixed) li:first-child { padding-top: 0; }
}

/* ============================================================
   ИКОНКИ-СПИСОК (.icons) — для соцсетей и т.п.
   ============================================================ */

ul.icons {
  list-style: none;
  padding-left: 0;
  margin: -1em 0 2em -1em;
}
ul.icons li {
  display: inline-block; /* в строку */
  padding: 1em 0 0 1em;
}

/* ============================================================
   ФОРМЫ
   ============================================================ */

form {
  margin: 0 0 2em 0;
  overflow-x: hidden;
}

form > :last-child { margin-bottom: 0; }

/* Контейнер полей формы — flex-раскладка */
form > .fields {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 3em);
  margin: -1.5em 0 2em -1.5em;
}

form > .fields > .field { padding: 1.5em 0 0 1.5em; width: calc(100% - 1.5em); }
form > .fields > .field.half    { width: calc(50% - 0.75em); }    /* половина строки */
form > .fields > .field.third   { width: calc(100%/3 - 0.5em); }  /* треть строки */
form > .fields > .field.quarter { width: calc(25% - 0.375em); }   /* четверть строки */

/* На мобильных все поля на всю ширину */
@media screen and (max-width: 480px) {
  form > .fields { width: calc(100% + 3em); margin: -1.5em 0 2em -1.5em; }
  form > .fields > .field,
  form > .fields > .field.half,
  form > .fields > .field.third,
  form > .fields > .field.quarter { padding: 1.5em 0 0 1.5em; width: calc(100% - 1.5em); }
}

/* Подпись поля */
label {
  display: block;
  font-size: 0.9em;
  font-weight: 900;
  margin: 0 0 1em 0;
}

/* Текстовые поля ввода — минималистичный стиль: только нижняя линия */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  appearance: none;
  background-color: transparent;  /* прозрачный фон */
  border: none;                   /* убираем рамку */
  border-radius: 0;
  border-bottom: solid 1px #c9c9c9; /* только нижняя серая линия */
  color: inherit;
  display: block;
  outline: 0;
  padding: 0;
  text-decoration: none;
  width: 100%;
}

/* При фокусе (когда кликнули) — нижняя линия становится розовой */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  border-bottom-color: #f2849e;
  box-shadow: inset 0 -1px 0 0 #f2849e;
}

/* Высота однострочных полей */
input[type="text"],
input[type="password"],
input[type="email"],
select { height: 3em; }

textarea { padding: 0; min-height: 3.75em; }

/* Чекбокс и радио-кнопка — скрыты, стиль через label:before */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;         /* невидимый оригинал */
  width: 1em;
  z-index: -1;
}

/* Метка чекбокса/радио — с отступом для кастомного квадрата/круга */
input[type="checkbox"] + label,
input[type="radio"] + label {
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.55em; /* место для кастомного чекбокса */
  padding-right: 0.75em;
  position: relative;
}

/* Кастомный чекбокс/радио — рисуется через :before */
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  border-radius: 4px;
  border: solid 1px #c9c9c9; /* серая рамка */
  content: '';
  display: inline-block;
  font-size: 0.8em;
  height: 2.25em;
  left: 0;
  line-height: 2.25em;
  position: absolute;
  text-align: center;
  top: 0;
  width: 2.25em;
}

/* Когда чекбокс/радио отмечен — тёмный фон и галочка */
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  background: #585858;
  border-color: #585858;
  color: #ffffff;
  content: '\f00c'; /* иконка галочки Font Awesome */
}

/* При фокусе — розовая рамка */
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
  border-color: #f2849e;
  box-shadow: 0 0 0 1px #f2849e;
}

/* Чекбокс квадратный, радио-кнопка круглая */
input[type="checkbox"] + label:before { border-radius: 4px; }
input[type="radio"]    + label:before { border-radius: 100%; }

/* ============================================================
   БЛОК (.box) — рамка с отступами
   ============================================================ */

.box {
  border-radius: 4px;
  border: solid 1px #c9c9c9; /* серая рамка */
  margin-bottom: 2em;
  padding: 1.5em;
}
.box.alt { border: 0; border-radius: 0; padding: 0; } /* вариант без рамки */

/* ============================================================
   КАРТИНКИ (.image)
   ============================================================ */

.image {
  border-radius: 4px;
  border: 0;
  display: inline-block;
  position: relative;
}
.image img { border-radius: 4px; display: block; }

/* Картинка слева (обтекание текстом) */
.image.left {
  float: left;
  max-width: 40%;
  padding: 0 1.5em 1em 0;
  top: 0.25em;
}

/* Картинка справа (обтекание текстом) */
.image.right {
  float: right;
  max-width: 40%;
  padding: 0 0 1em 1.5em;
  top: 0.25em;
}

/* Картинка на всю ширину блока */
.image.fit {
  display: block;
  margin: 0 0 2em 0;
  width: 100%;
}
.image.fit img, .image.main img { width: 100%; }

/* Главная большая картинка */
.image.main {
  display: block;
  margin: 0 0 3em 0;
  width: 100%;
}

@media screen and (max-width: 736px) {
  .image.main { margin: 0 0 2em 0; }
}

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */

.table-wrapper {
  overflow-x: auto; /* горизонтальная прокрутка если таблица широкая */
}

table { margin: 0 0 2em 0; width: 100%; }

/* Строки таблицы с серыми разделителями сверху/снизу */
table tbody tr {
  border: solid 1px #c9c9c9;
  border-left: 0;
  border-right: 0;
}

/* Чередование строк: каждая вторая с лёгким серым фоном */
table tbody tr:nth-child(2n + 1) {
  background-color: rgba(144, 144, 144, 0.075);
}

table td { padding: 0.75em; }

table th {
  font-size: 0.9em;
  font-weight: 900;
  padding: 0 0.75em 0.75em;
  text-align: left;
}

table thead { border-bottom: solid 2px #c9c9c9; }
table tfoot { border-top: solid 2px #c9c9c9; }

/* ============================================================
   КНОПКИ
   ============================================================ */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  appearance: none;
  /* Плавная смена фона, цвета и тени */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: transparent;              /* прозрачный фон */
  border-radius: 4px;
  border: 0;
  box-shadow: inset 0 0 0 2px #585858;        /* серая рамка через тень */
  color: #585858 !important;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8em;
  font-weight: 900;
  height: 3.5em;
  letter-spacing: 0.35em;                     /* разрядка букв */
  line-height: 3.45em;
  overflow: hidden;
  padding: 0 1.25em 0 1.6em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;                  /* заглавные буквы */
  white-space: nowrap;
}

/* При наведении — розовая рамка и текст */
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
  color: #f2849e !important;
  box-shadow: inset 0 0 0 2px #f2849e;
}

/* При клике — лёгкий розовый фон */
input[type="submit"]:active,
button:active,
.button:active {
  background-color: rgba(242, 132, 158, 0.1);
}

/* Маленькая кнопка */
.button.small  { font-size: 0.6em; }

/* Большая кнопка */
.button.large  { font-size: 1em; }

/* Основная (заполненная) кнопка */
.button.primary {
  box-shadow: none;
  background-color: #585858; /* тёмно-серый фон */
  color: #ffffff !important;
}
.button.primary:hover  { background-color: #f2849e; } /* розовый при наведении */
.button.primary:active { background-color: #ee5f81; } /* насыщенный розовый при клике */

/* Неактивная кнопка */
.button.disabled,
.button:disabled {
  pointer-events: none; /* не реагирует на клики */
  opacity: 0.25;
}

/* ============================================================
   ПЛИТКИ (.tiles) — сетка карточек с картинками
   ============================================================ */

.tiles {
  display: flex;
  flex-wrap: wrap;
  margin: -2.5em 0 0 -2.5em; /* компенсация отступов карточек */
}

/* Одна карточка — треть ширины */
.tiles article {
  transition: transform 0.5s ease, opacity 0.5s ease;
  position: relative;
  width: calc(33.33333% - 2.5em);
  margin: 2.5em 0 0 2.5em;
}

/* Картинка карточки */
.tiles article > .image {
  transition: transform 0.5s ease;
  position: relative;
  display: block;
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.tiles article > .image img { display: block; width: 100%; }

/* Цветной полупрозрачный оверлей поверх картинки */
.tiles article > .image:before {
  transition: background-color 0.5s ease, opacity 0.5s ease;
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0.8;
  z-index: 1;
}

/* Декоративный крестик поверх картинки (svg-паттерн) */
.tiles article > .image:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,..."); /* svg-паттерн */
  opacity: 0.25;
  z-index: 2;
}

/* Ссылка поверх всей карточки — центрирует текст */
.tiles article > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.5s ease, transform 0.5s ease;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 1em;
  border-radius: 4px;
  border-bottom: 0;
  color: #ffffff;
  text-align: center;
  z-index: 3;
}

/* Скрытый текст внутри карточки — показывается при наведении */
.tiles article > a .content {
  transition: max-height 0.5s ease, opacity 0.5s ease;
  width: 100%;
  max-height: 0;  /* скрыт */
  opacity: 0;
}

/* Цвета оверлеев для разных стилей карточек */
.tiles article.style1 > .image:before { background-color: #f2849e; } /* розовый */
.tiles article.style2 > .image:before { background-color: #7ecaf6; } /* голубой */
.tiles article.style3 > .image:before { background-color: #7bd0c1; } /* бирюзовый */
.tiles article.style4 > .image:before { background-color: #c75b9b; } /* фиолетово-розовый */
.tiles article.style5 > .image:before { background-color: #ae85ca; } /* лавандовый */
.tiles article.style6 > .image:before { background-color: #8499e7; } /* синий */

/* При наведении на карточку: картинка увеличивается, оверлей темнеет, текст показывается */
body:not(.is-touch) .tiles article:hover > .image {
  transform: scale(1.1);
}
body:not(.is-touch) .tiles article:hover > .image:before {
  background-color: #333333;
  opacity: 0.35;
}
body:not(.is-touch) .tiles article:hover > .image:after {
  opacity: 0;
}
body:not(.is-touch) .tiles article:hover .content {
  max-height: 15em;
  opacity: 1; /* показываем текст */
}

/* На планшетах: карточки по 2 в ряд */
@media screen and (max-width: 980px) {
  .tiles article { width: calc(50% - 2.5em); }
}

/* На телефонах: карточки на всю ширину */
@media screen and (max-width: 480px) {
  .tiles { margin: 0; }
  .tiles article { width: 100%; margin: 1.25em 0 0 0; }
}

/* Страница загружается — карточки изначально уменьшены и прозрачны */
body.is-preload .tiles article {
  transform: scale(0.9);
  opacity: 0;
}

/* На тач-устройствах текст внутри карточек всегда виден */
body.is-touch .tiles article .content {
  max-height: 15em;
  opacity: 1;
}

/* ============================================================
   ШАПКА САЙТА (#header)
   ============================================================ */

/* Верхний отступ шапки */
#header {
  padding: 8em 0 0.1em 0;
}

/* Логотип — ссылка без подчёркивания, жирный, заглавные буквы */
#header .logo {
  display: inline-block;
  position: fixed;
  top: 65px;
  left: 90px;
  border-bottom: 0;
  color: inherit;
  font-weight: 900;
  letter-spacing: 0.35em;
  margin: 0 1 2.5em 0;
  text-decoration: none;
  text-transform: uppercase;
}

#header .logo > * { display: inline-block; vertical-align: middle; }

/* Изображение в логотипе */
#header .logo .symbol { margin-right: 0.95em; }
#header .logo .symbol img { display: block; width: 2em; height: 2em; }

/* Навигационное меню — зафиксировано в правом верхнем углу */
#header nav {
  position: fixed;       /* всегда на экране */
  right: 2em;
  top: 2em;
  z-index: 10000;        /* поверх всего контента */
}

/* Список пунктов меню — горизонтально */
#header nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#header nav ul li { display: block; padding: 0; }

/* ССЫЛКА В МЕНЮ — вот здесь создаются "квадратики" */
#header nav ul li a {
  display: block;
  position: relative;
  height: 2em;
  line-height: 2em;
  padding: 0 1.5em;
  background-color: transparent; /* фон прозрачный */
  border-radius: 4px;            /* скруглённые углы — это и есть форма квадратиков */
  border: 0;
  font-size: 0.8em;
  font-weight: 900;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* Кнопка-бургер (иконка меню) — скрывает текст, показывает SVG-иконку */
#header nav ul li a[href="#menu"] {
  width: 4em;
  text-indent: 4em;           /* уводим текст за экран */
  font-size: 1em;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
}

/* Бургер SVG: розовый при наведении, серый по умолчанию */
#header nav ul li a[href="#menu"]:before {
  /* розовые три полоски */
  background-image: url("data:image/svg+xml;...");
  opacity: 0; /* скрыт */
}
#header nav ul li a[href="#menu"]:after {
  /* серые три полоски */
  background-image: url("data:image/svg+xml;...");
  opacity: 1; /* виден */
}
#header nav ul li a[href="#menu"]:hover:before { opacity: 1; } /* показываем розовый */
#header nav ul li a[href="#menu"]:hover:after  { opacity: 0; } /* скрываем серый */

/* Шапка на мобильных */
@media screen and (max-width: 736px) {
  #header { padding: 4em 0 0.1em 0; }
  #header nav { right: 0.5em; top: 0.5em; }
}

/* ============================================================
   БОКОВОЕ МЕНЮ (#menu) — выезжает справа
   ============================================================ */

/* Обёртка страницы — при открытом меню затемняется */
#wrapper {
  transition: opacity 0.45s ease;
  opacity: 1;
}

/* Само боковое меню — изначально спрятано за правым краем */
#menu {
  transform: translateX(22em); /* сдвинуто вправо = скрыто */
  transition: transform 0.45s ease, visibility 0.45s;
  position: fixed;
  top: 0; right: 0;
  width: 22em;
  max-width: 80%;
  height: 100%;
  background: #585858; /* тёмно-серый фон */
  color: #ffffff;
  cursor: default;
  visibility: hidden; /* скрыт */
  z-index: 10002;
}

/* Внутренняя часть меню с прокруткой */
#menu > .inner {
  transition: opacity 0.45s ease;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 2.75em;
  opacity: 0;
  overflow-y: auto; /* вертикальная прокрутка */
}

/* Список пунктов в боковом меню */
#menu > .inner > ul {
  list-style: none;
  margin: 0 0 1em 0;
  padding: 0;
}

/* Разделители между пунктами */
#menu > .inner > ul > li {
  padding: 0;
  border-top: solid 1px rgba(255, 255, 255, 0.15); /* полупрозрачная белая линия */
}

/* Ссылка в боковом меню */
#menu > .inner > ul > li a {
  display: block;
  padding: 1em 0;
  line-height: 1.5;
  border: 0;
  color: inherit;
}

/* Первый пункт без разделительной линии сверху */
#menu > .inner > ul > li:first-child { border-top: 0; margin-top: -1em; }

/* Кнопка закрытия меню (X) */
#menu > .close {
  transition: opacity 0.45s ease, transform 0.45s ease;
  transform: scale(0.25) rotate(180deg); /* изначально повёрнута и маленькая */
  display: block;
  position: absolute;
  top: 2em;
  left: -6em; /* снаружи панели */
  width: 6em;
  height: 3em;
  border: 0;
  font-size: 1em;
  opacity: 0;
  overflow: hidden;
}

/* Когда меню открыто — обёртка затемняется */
body.is-menu-visible #wrapper {
  pointer-events: none;
  opacity: 0.25;
}

/* Когда меню открыто — сдвигаем панель на место */
body.is-menu-visible #menu {
  transform: translateX(0); /* выезжает */
  visibility: visible;
}

/* Когда меню открыто — показываем кнопку X */
body.is-menu-visible #menu .close {
  transform: scale(1.0) rotate(0deg);
  opacity: 1;
}

/* Боковое меню на мобильных — уже */
@media screen and (max-width: 736px) {
  #menu {
    transform: translateX(16.5em);
    width: 16.5em;
  }
  #menu > .inner { padding: 2.75em 1.5em; }
  #menu > .close { top: 0.5em; left: -4.25em; width: 4.25em; }
}

/* ============================================================
   ОСНОВНОЙ КОНТЕНТ (#main)
   ============================================================ */

#main { padding: 0em 0 6em 0; }

@media screen and (max-width: 736px) {
  #main { padding: 0em 0 4em 0; }
}

/* ============================================================
   ПОДВАЛ (#footer)
   ============================================================ */

#footer {
  padding: 5em 0 6em 0;
  background-color: #f6f6f6; /* светло-серый фон */
}

/* Содержимое подвала — flex в строку */
#footer > .inner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Первая колонка подвала — 2/3 ширины */
#footer > .inner section:nth-child(1) {
  width: calc(66% - 2.5em);
  margin-right: 2.5em;
}

/* Вторая колонка подвала — 1/3 ширины */
#footer > .inner section:nth-child(2) {
  width: calc(33% - 2.5em);
  margin-left: 2.5em;
}

/* Строка с копирайтом */
#footer > .inner .copyright {
  width: 100%;
  padding: 0;
  margin-top: 5em;
  list-style: none;
  font-size: 0.8em;
  color: rgba(88, 88, 88, 0.5); /* полупрозрачный серый */
}

#footer > .inner .copyright a { color: inherit; }

/* Элементы копирайта — в строку с разделителями */
#footer > .inner .copyright li {
  display: inline-block;
  border-left: solid 1px rgba(88, 88, 88, 0.15);
  padding: 0 0 0 1em;
  margin: 0 0 0 1em;
}
#footer > .inner .copyright li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }

/* Подвал на разных размерах экрана */
@media screen and (max-width: 980px) {
  #footer > .inner section:nth-child(1) { width: 66%; margin-right: 0; }
  #footer > .inner section:nth-child(2) { width: calc(33% - 2.5em); margin-left: 2.5em; }
}

@media screen and (max-width: 736px) {
  #footer { padding: 3em 0 1em 0; }
  #footer > .inner { flex-direction: column; }
  #footer > .inner section:nth-child(1) { width: 100%; margin: 3em 0 0 0; }
  #footer > .inner section:nth-child(2) { order: -1; width: 100%; margin-left: 0; }
  #footer > .inner .copyright { margin-top: 3em; }
}

@media screen and (max-width: 480px) {
  #footer > .inner .copyright li {
    border-left: 0;
    padding-left: 0;
    margin: 0.75em 0 0 0;
    display: block; /* каждый элемент на своей строке */
  }
}

/* ============================================================
   ОБЁРТКА (#wrapper) — ограничение ширины контента
   ============================================================ */

#wrapper > * > .inner {
  width: 100%;
  max-width: 68em;       /* максимальная ширина контента */
  margin: 0 auto;        /* центрирование */
  padding: 0 2.5em;      /* боковые отступы */
}

@media screen and (max-width: 736px) {
  #wrapper > * > .inner { padding: 0 1.25em; }
}

/* ============================================================
   КАСТОМНЫЕ СТИЛИ (ТВОИ ДОБАВКИ)
   Всё что ниже — добавлено тобой поверх шаблона
   ============================================================ */

/* CSS-переменные — цвета для всего сайта.
   Меняй значения здесь — изменится везде. */
:root {
  --bg-primary:   #1a1f2e; /* основной тёмный фон страницы */
  --bg-secondary: #474e65; /* фон плашки навигации и карточек */
  --accent:       #4ecdc4; /* акцентный цвет (бирюзовый) — ссылки, ховеры */
  --text:         #e0e6f0; /* основной цвет текста */
  --text-muted:   #b0b7c4; /* приглушённый текст */
}

/* ============================================================
   КАСТОМНАЯ НАВИГАЦИЯ (#top-nav) — 
   ============================================================ */

/* Desktop: плашка фиксирована по центру сверху */
@media screen and (min-width: 130px) {
  #top-nav {
    position: fixed;
    top: 30px;
    right: 40%;
    min-width: 1120px;
    max-width: 1420px;
    transform: translateX(-30%); /* сдвиг для центрирования */
    background: var(--bg-secondary); /* ← ВОТ ЧТО ДАЁТ СЕРЫЙ ФОН ПЛАШКИ */
    border-radius: 50px;             /* ← скруглённая форма плашки */
    padding: 20px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* тень под плашкой */
    z-index: 1200;
  }

  #top-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px; /* расстояние между пунктами */
  }

  /* ССЫЛКИ В НАВИГАЦИИ — здесь нет background, нет border-radius у ссылок!
     Квадратики НЕ здесь. Ссылки чистые. */
  #top-nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }

  #top-nav a:hover {
    color: var(--accent); /* бирюзовый при наведении */
  }
}

/* Скрываем оригинальное боковое меню и бургер на десктопе */
#menu, #header nav ul li a[href="#menu"] {
  display: none !important;
}

/* Планшет (100px–1400px): навигация растягивается на всю ширину */
@media screen and (max-width: 1400px) {
  #top-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 15px 20px;
  }

  #top-nav ul {
    gap: 15px;
  }
}

/* Мобильные (≤767px): скрываем кастомную навигацию,
   остаётся оригинальный Phantom-стиль */
@media screen and (max-width: 767px) {
  #top-nav { display: none; }
}

/* ============================================================
   ТЁМНАЯ ЦВЕТОВАЯ СХЕМА ДЛЯ ВСЕГО САЙТА
   ============================================================ */

/* Тёмный фон всей страницы */
body {
  background: var(--bg-primary) !important;
  color: var(--text) !important;
}

/* Шапка с размытием (эффект frosted glass) */
#header {
  background: rgba(36, 41, 56, 0.95); /* полупрозрачный тёмный фон */
  backdrop-filter: blur(10px);         /* размытие фона за шапкой */
}

/* Тёмный фон для основного контента */
#wrapper {
  background: var(--bg-primary);
}

/* Карточки плиток — тёмный фон и скруглённые углы */
.tiles article {
  background: var(--bg-secondary);
  border-radius: 15px;
}

/* Текст заголовков карточек */
.tiles article a h2 {
  color: var(--text);
}

/* Приглушённый текст описания карточек */
.tiles article a .content p {
  color: var(--text-muted);
}

/* Все ссылки на сайте — бирюзовый акцент */
a {
  color: var(--accent);
}

/* Основная (primary) кнопка — бирюзовый фон */
.primary {
  background: var(--accent);
}

/* Кнопки смены языков */
#lang-switcher {
  position: fixed;
  top: 20px;
  right: 120px;   /* левее бургер-меню */
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0;
  box-shadow: none;
  height: auto;
  line-height: normal;
  text-transform: uppercase;
  transition: color 0.2s;
}

.lang-btn.active {
  color: var(--accent);  /* бирюзовый = активный язык */
}

.lang-btn:hover {
  color: var(--accent);
}

/* Русский скрыт по умолчанию — JS покажет если нужно */
.lang-ru {
  display: none;
}

/* Русские надписи в навигации — убираем широкий межбуквенный интервал */
#top-nav .lang-ru {
  letter-spacing: 0.29em; /* было 0.35em — уменьшаем */
  font-size: 1em;       /* чуть меньше размер чтобы влезло */
}