/*   
Theme Name: F-SK
Theme URI: https://cyberworkers.ru
Text Domain: F-SK
Version: 1.0
Tags: clean, development, html5
Description: Адаптивная тема F-SK.pro
Author: Дмитрий Панкратов (vivado@bk.ru)
Author E-mail: vivado@bk.ru
Author Phone: +7 (905) 550-55-61
*/

/* === Ядро WordPress === */
img.alignright { float: right; margin: 5px 0 20px 20px; }
img.alignnone { margin: 5px 20px 20px 0; }
img.alignleft { float: left; margin: 5px 20px 20px 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus {	clip: auto !important; display: block; font-size: 14px; height: auto; left: 5px; line-height: normal; text-decoration: none; top: 5px; width: auto; z-index: 999; }
.hide-microrazmetka { display: none; } /* скрываем поля микроразметки */
.disabled { opacity: 0.5; cursor: not-allowed; }
a img.alignright:hover, a img.alignnone:hover, a img.alignleft:hover, a img.aligncenter:hover { border-radius: 10px; cursor: zoom-in; }


/* === Стили для сайта === */
*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	margin: 0; padding: 0; 
}
html { -webkit-font-smoothing: antialiased; }
body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; font-style: normal; }

/* --- Объекты для плавной анимации --- */
a, 
img,
.blok,
#presentation {
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

/* --- Переменные --- */
:root {
	--blue: #0686c5;
	--lightblue: #47abe9;
	--lightblue2: #e2f9ff;
	--green: #27a78a;
	--grey: #f4f4f4;	
	--darkgrey: #bfbfbf;
	--darkgrey2: #777;
}

/* --- Вспомогательное --- */
.all-center { text-align: center; }
.all-left { text-align: left; }
.all-right { text-align: right; }
.clear { clear: both; }
.grid { display: grid; }
.flex { display: flex; flex-wrap: wrap; }
.block-inline { display: inline-table; }
.green { color: var(--green)!important; }
.greyscale { filter: grayscale(1); }
.line { width: 100%; height: 2px; background-color: var(--blue); margin: 20px 0; }

/* --- Максимальная ширина контента --- */
.max-width { margin: 0 auto; }

/* --- Шапка / подвал --- */
header, footer { width: 100%; height: auto; display: block; }
header { border-bottom: 1px solid #000; position: fixed; z-index: 1000; background-color: #fff; }
header > .flex, footer > .flex { height: 80px;  justify-content: space-between; align-items: center; }

.header-logo-block, 
.footer-logo-block,
.header-btns-block { display: flex; align-items: center; }
.header-btns-block { gap: 10px; }
.header-btns-block div { text-align: center; }
.header-btns-block div a, .header-btns-block div span { display: block; }
.header-logo-block img, .footer-logo-block img { max-height: 60px; }
.logo { margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.title { font-weight: 600; color: var(--blue); }

.contact-block { max-width: 300px; }
.contact-block a { font-size: 20px; font-weight: 600; display: block; color: var(--blue); }
.contact-block a:hover { color: var(--lightblue); }
.contact-block a:first-child { margin-bottom: 5px; }

/* --- Главное меню --- */
.menu-block {	padding: 0; }
.menu { display: flex; justify-content: space-between; padding: 0; margin: 0; }
.menu ul {  padding: 0; margin: 0; }
.menu li { display: inline-block; position: relative; z-index: 100; padding: 0 2px; }
.menu li:first-child { margin-left: 0; }

/* --- Пункты меню --- */
.menu li a, 
.menu ul li a { display: block; text-align: center; font-size: 16px; color: #000; width: fit-content; padding: 5px 10px; }
.menu li a:hover { color: var(--lightblue); }

/* --- Мобильное меню (выезжающее слева) --- */
.hidden-menu-left { 
	display: block; position: fixed; margin: 0; box-sizing: border-box; width: 265px; height: 100%; top: 0px;  -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; 
	background-color: #fff; z-index: 1000; background: linear-gradient(45deg, var(--lightblue) 0, var(--lightblue2) 20%, var(--lightblue2) 80%, var(--lightblue) 100%);
}
.hidden-menu-left { left: -265px; transition: left .2s; }
.mobile-menu { padding: 10px 20px; }
.mob-menu { list-style: none; margin: 0; padding: 0; }
.close-menu { position: relative; left: 205px; }

/* Чекбоксы: */
input#checkmenu1, input#checkmenu2 { display: none; }

/* Кнопка-бургер: */
.btn-menu { position: absolute; top: 70px; cursor: pointer; z-index: 3; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }
.btn-menu.left { left: 10px; transition: left .23s; }

.mob-pres { margin: 20px 0; }
.mob-pres .present-min { font-size: 16px; padding-left: 20px; margin-bottom: 10px; }
.mob-pres img { width: 20px; height: auto; }


/* CSS3-селекторы позволяют нам определять состояние чекбокса и применять, 
в зависимости от этого те или иные свойства для соседних элементов :checked ~.
В данном примере мы при «чекнутом» инпуте сдвигаем кнопку меню .hidden-menu-ticker:checked ~ .btn-menu влево на X пикселей, 
меню до левого края .hidden-menu-ticker:checked ~ .hidden-menu. */

input#checkmenu1:checked ~ .hidden-menu-left { left: -265px; transition: left .2s; }
input#checkmenu2:checked  ~ .hidden-menu-left { left: 0px; transition: left .2s; }
input#checkmenu2:checked ~ .btn-menu.left { left: 10px; }

@media (max-width: 1199px) {
	.desktop-menu { display: none; }
	.mob-menu li a { line-height: 34px; width: 100%; display: block; color: #000; font-weight: bold; }
}
@media (min-width: 660px) and (max-width: 1199px) {
	.btn-menu { top: 20px; }
}
@media (min-width: 1200px) {
	.mobile-menu, #touch-menu { display: none; }
}
@media (min-width: 992px) and (max-width: 1023px) {
	.menu-block .desktop-menu { width: 450px; margin: -10px 0 0 240px; }
	.menu li a, .menu ul li a { width: auto; padding: 0 10px; }
}
@media (min-width: 1200px) {
	.menu-block .desktop-menu { display: block; }
}
/* --- END Главное меню --- */


/* --- Модальные окна --- */
.modal-form { max-width: 320px; }
.modal-form .fancybox__content { border-radius: 10px; }
.modal-form h2 { margin: 10px 0; }
.modal-form .flex { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-form .flex input { width: 100%; border: 1px solid #000; border-radius: 5px; padding: 0 8px; line-height: 44px; background-color: #fff; }
.modal-form .warning { font-size: 12px; }

/* --- Контент --- */
.content { padding-top: 80px; }
.frontpage > .content { padding-top: 0px; }

.content p { font-size: 18px; color: #000; margin-bottom: 20px; }
.content ul, .content ol { margin-bottom: 30px; }
.content ul li, .content ol li { font-size: 16px; line-height: 16px; margin: 0 0 10px 50px; color: var(--darkgrey2); }

.blue-li { margin: 5px 0 20px 0; list-style: none; padding: 0; }
.blue-li li {
    line-height: 20px; padding-left: 20px; position: relative;
    word-wrap: break-word; /* Для переноса длинных слов, если нужно */
}
.blue-li li:before { width: 8px; height: 8px; background-image: url(/wp-content/themes/fskTheme/img/icons/square.png); content: ''; position: absolute; left: 0; top: 4px; margin: 0; }

h1, h2, h3, h4 {  font-weight: 400; color: #000; }
h1 { font-size: 42px; text-align: center; }
.page h1 { margin: 40px 0; }
.page h1::first-letter { color: var(--blue); }
.frontpage h1.subtitle { margin: 0 !important; }

h2 { font-size: 38px; margin: 30px 0; }
section h2 { margin-top: 0; }
.page-content section h2 { margin-top: 20px!important; }
h3 { font-size: 26px; margin: 20px 0; }
h4 { font-size: 20px; font-weight: bold; margin: 20px 0; }

a, a:link, a:visited, a:hover, a:focus { text-decoration: none; }
.content a:hover, .anons a:hover { color: var(--lightblue); }

/* Настройка контейнера для секций */
.presentation { width: 100%; }
.frontpage .presentation { height: 100vh; scroll-snap-type: y mandatory; }
.page .presentation { min-height: calc(100vh - 160px); }

/* Общие стили для всех секций */
.slide { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; position: relative; padding: 40px; }
.slide.slide-top { align-items: flex-start!important; }

/* === Стилизация первого блока === */
.banner { background-image: url(/wp-content/themes/fskTheme/img/banners/volna.jpg); background-position: center center; background-repeat: no-repeat; box-sizing: border-box; }
.banner .max-width { background-color: rgba(255, 255, 255, 0.8); padding: 10px 30px; border-radius: 20px; }
.big-blue { font-size: 58px; line-height: 62px; color: var(--blue); text-transform: uppercase; max-width: 330px; margin-top: 12px; }
.logo-bioks { color: var(--green); display: inline-block; }
.logo-bioks .letter-i { font-size: 0.85em; position: relative; }

.banner .logo-bioks { font-size: 145px; line-height: 145px; font-weight: 900; text-shadow: 5px 5px 0px #1c6258; }
h2 .logo-bioks, .bioks-tube .logo-bioks { font-weight: 800; text-shadow: 3px 3px 0px #1c6258; }
h2 .logo-bioks { font-size: 42px; line-height: 42px; }

/* -- Таблицы -- */
.table-container { width: 100%; overflow-x: auto; font-family: sans-serif; margin-bottom: 25px; }
.responsive-table { width: 100%; border-collapse: collapse; text-align: center; }
.responsive-table th, .responsive-table td { border: 1px solid #a0a0a0; padding: 10px; font-size: 14px; white-space: pre-line; }
.responsive-table th { background-color: #d9e1f2; font-weight: bold; }

@media screen and (max-width: 767px) {
	.responsive-table thead { display: none !important; }
	.responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block !important; width: 100% !important; box-sizing: border-box; }
	.responsive-table tr { margin-bottom: 15px; border: 1px solid #a0a0a0 !important; background-color: #fff !important; }
	.responsive-table td { text-align: right !important; position: relative !important; padding-left: 50% !important; padding-top: 12px !important; padding-bottom: 12px !important; border: none !important; background-color: #fff !important; }
	/* Красим ячейки через одну */
	.responsive-table td:nth-child(2n+1) { background-color: #d9e1f2 !important; }
	/* Текст-заголовок слева из атрибута data-label */
	.responsive-table td::before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-right: 10px; text-align: left; font-weight: bold; font-size: 13px; top: 50%; transform: translateY(-50%); white-space: normal; }
}

/* Основные стили серой таблицы */
.water-table { width: 100%; border-collapse: collapse; font-size: 14px; background-color: #fff; }

/* Сетка и границы */
.water-table th, .water-table td { border: 1px solid #dcdcdc; padding: 5px; vertical-align: middle; }
.water-table thead tr { background-color: #ccc; }
.water-table th { font-weight: bold; color: #000; text-align: center; }
.water-table thead tr:last-child { background-color: #f2f2f2; }
.water-table .sub-th { font-weight: normal; text-align: left; font-size: 13px; }
.water-table td { text-align: center; color: #333; }
.water-table .col-name { text-align: left; font-weight: bold; background-color: #f2f2f2; width: 25%; }
.water-table th:not(.col-name), .water-table td:not(.col-name) { width: 25%; }
.water-table sub, .water-table sup { font-size: 10px; line-height: 0; }


/* === Стилизация блока О нас === */
.scheme-container { position: relative; width: 100%; min-width: 480px; max-width: 480px; height: 350px; }
.present-min { display: flex; gap: 10px; align-items: center; font-size: 18px; color: #000; }

/* Главный круг */
.main-circle { width: 210px; height: 210px; background: radial-gradient(circle, #fcfcfc 0%, #e6e6e6 100%); border-radius: 50%; box-shadow: inset 0 0 15px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px; margin: 0 auto; position: relative; z-index: 10; }
.main-circle .h2 { color: var(--green); font-size: 20px; line-height: 22px; letter-spacing: 0.5px; font-weight: 600; }

/* Цветные точки */
.dots-indicator { display: flex; gap: 4px; margin-bottom: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.yellow { background-color: #f7e61c; }
.dot.green { background-color: #72c113; }
.dot.cyan { background-color: #26b19d; }
.dot.blue { background-color: #118fce; }
.dot.purple { background-color: #562a84; }
.dot.red { background-color: #e51d24; }
.dot.orange { background-color: #fca311; }

/* Общие стили для малых кругов */
.branch-circle { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 14px; font-weight: bold; padding: 8px; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0,0,0,0.15); transition: transform 0.2s ease; }

.branch-circle:hover { transform: scale(1.05); }

/* Цвета куружков */
.branch-projects .branch-circle { background-color: #72c113; }
.branch-equipment .branch-circle { background-color: #26b19d; }
.branch-supervision .branch-circle { background-color: #118fce; }
.branch-commissioning .branch-circle { background-color: #562a84; }
.branch-service .branch-circle { background-color: #e51d24; }

/* --- Схема для мобильных --- */
@media (min-width: 360px) and (max-width: 499px) {
	.scheme-container { min-width: 100%; max-width: 100% }
	.branches-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
	.scheme-container { height: auto; display: flex; flex-direction: column; align-items: center; gap: 25px; margin: 0 auto; }
	.branch-item { position: static; transform: none !important; }
	.branch-circle { font-size: 14px !important; }
}

/* --- Схема для десктопов --- */
@media (min-width: 500px) {
   .o-nas .flex .text { display: flex; flex-direction: column; justify-content: space-between; }
  .branches-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .branch-item { position: absolute; }
  /* Позиционируем кружки */
  .branch-projects { left: 15px; top: 80px;}
  .branch-equipment { left: 70px; top: 190px; }
  .branch-supervision { left: 185px; top: 230px; transform: translateX(-50%);}
  .branch-commissioning { right: 70px; top: 190px;}
  .branch-service { right: 15px; top: 80px;}
}
@media (min-width: 768px) {
	.o-nas .flex { flex-wrap: nowrap; gap: 30px; }
	.branch-supervision { left: 50%; top: 230px; transform: translateX(-50%);}
}

/* === Системы BiOKS === */
.sistemy-bioks, .blue-bg { background-color: var(--lightblue2); }
.blue-bg { padding: 20px; border-radius: 20px; }
.sistemy-bioks .text-img { max-width: 50%; }
.sistemy-bioks .text-img img { width: 100%; border-radius: 20px; opacity: 0.8; }
.text-img img:hover { opacity: 1; } 

@media (min-width: 768px) {
	.sistemy-bioks .flex { flex-wrap: nowrap; gap: 30px; }
	.sistemy-bioks .flex .text { display: flex; flex-direction: column; justify-content: space-between; }
	.sistemy-bioks .text-img { max-width: 50%; }
}

/* === Почему мы === */
.pochemy-my .flex .text-title { min-width: 340px; max-width: 340px; }
.fading-image-container { background-color: #fff; display: inline-block; line-height: 0; }
.fading-image-container img { width: 100%; height: auto; margin-bottom: 10px; 
  /* Маска, которая плавно уводит в прозрачность все 4 стороны */
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
              linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    /* Режим смешивания масок для корректной работы */
  mask-composite: intersect;
    /* Поддержка для старых версий браузеров Safari/Chrome */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%),
                      linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: destination-in;
}

.pochemy-my .text-title h3 { color: var(--blue); }
.pochemy-my .blok > ul { margin-top: 10px; margin-bottom: 10px; }
.pochemy-my .blok > ul > li { font-size: 18px; line-height: 22px; }

@media (min-width: 768px) {
	.pochemy-my .flex { flex-wrap: nowrap; gap: 30px; align-items: center; }
}

/* === Сферы применения === */
.sfery { background-color: var(--lightblue2) }
.sfery .flex { justify-content: space-around; }
.sfery .flex .blok { max-width: 220px; text-align: center; }
.sfery .flex .blok img { width: 190px; height: auto; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); border-radius: 50%; opacity: 0.8; }
.sfery .flex .blok img:hover { transform: rotateZ(15deg); opacity: 1; }

/* === Технологии === */
.tehnology > .max-width > .flex { justify-content: space-around; }
.tehnology .blok { text-align: center; border: 4px solid var(--grey); padding: 10px; display: grid; align-items: center; min-height: 85px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
.tehnology .blok:hover { border-color: var(--green); }
.bloks3 .blok { width: 30%; }
.bioks-tube { background-image: url(/wp-content/themes/fskTheme/img/bioks.jpg); background-repeat: no-repeat; background-position: center center; background-size: auto; }
.bioks-tube .blok { width: 400px; margin: 20px auto; padding: 20px; background-color: rgba(255,255,255,0.8); }
.bioks-tube .blok .logo-bioks { font-size: 62px; line-height: 62px; }
.bloks4 .blok { width: 23%; }

/* -- Рисуем адаптивные стрелки к блокам -- */
/* Общие правила для горизонтальных линий */
.bloks3::before, .bloks4::before {content: ''; position: absolute; height: 3px; background-color: #a5d1f3; }
/* Включаем относительное позиционирование для всех блоков в обеих схемах */
.bloks3 .blok, .bloks4 .blok { position: relative; }
/* Общие правила для всех вертикальных линий */
.bloks3 .blok::before, .bloks4 .blok::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 3px; background-color: #a5d1f3; }
/* Общие правила для всех наконечников (треугольников) */
.bloks3 .blok::after, .bloks4 .blok::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 6px solid transparent; }
/* -- Стили для схемы из 3 блоков -- */
.bloks3 { position: relative; margin-bottom: 50px; }
/* Горизонтальная линия снизу */
.bloks3::before { bottom: -40px; left: 16.7%; right: 16.7%; }
/* Вертикальные линии снизу */
.bloks3 .blok::before { bottom: -40px; height: 30px; }
/* Стрелочки смотрят вверх */
.bloks3 .blok::after { bottom: -10px; border-bottom-color: #a5d1f3; }
/* -- Стили для схемы из 4 блоков -- */
.bloks4 {position: relative; padding-top: 40px; }
/* Горизонтальная линия сверху */
.bloks4::before { top: 0; left: 12.5%; right: 12.5%; }
/* Вертикальные линии сверху */
.bloks4 .blok::before { top: -40px; height: 30px; }
/* Стрелочки смотрят вниз */
.bloks4 .blok::after { top: -10px; border-top-color: #a5d1f3; }


/* === Решения === */
.reshenija { background-color: var(--lightblue2); }
.reshenija .flex, .preim-drops { gap: 20px; margin-top: 30px; }
.reshenija .blok, .preim-drops .blok { width: 45%; }
.reshenija .grid, .preim-drops .grid { grid-template-columns: 80px auto; align-items: center; }
.reshenija .blok img, .preim-drops .blok img { width: 64px; height: auto; }
.reshenija .blok:hover img { margin-left: 10px; }
.reshenija .blok p, .preim-drops .blok p { margin-bottom: 0; }

/* === Линейка === */
.linejka .flex { gap: 20px; }
.linejka .flex .blok { width: 48%; }
.twoblok { margin: 20px 0; justify-content: space-between; gap: 0; }
.obj-scroll { max-height: 50vh; border: 2px dashed var(--darkgrey); overflow-y: scroll; overflow-x: hidden; margin-bottom: 40px; }

/* === Преимущества === */
.preim .flex { justify-content: space-between; }
.info-blok div > p { margin-bottom: 10px; }
.info-blok > div > p > span { content: ''; width: 22px; height: 22px; display: block; float: left; margin-right: 20px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
.info-blok > .grey > p { color: var(--darkgrey); }
.info-blok > .grey > p > span { background-color: var(--darkgrey); }
.info-blok > .blue > p { color: var(--blue); }
.info-blok > .blue > p > span { background-color: var(--blue); }

.charts-container { margin: 40px auto; font-family: sans-serif; display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: 100%; box-sizing: border-box; }
/* Выравниваем элементы строки в идеальный ряд */
.chart-row { display: grid; grid-template-columns: 2.5fr 1fr 5fr; align-items: center; gap: 30px; width: 100%; }
.chart-label { color: var(--blue); font-size: 26px; line-height: 28px; text-align: right; }
.chart-number { color: var(--blue); font-size: 64px; font-weight: bold; line-height: 1; text-align: center; position: relative; }
.percent-sign { font-size: 24px; vertical-align: super; margin-left: 2px; }
/* Контейнер для двух наложенных полос */
.chart-bar-wrapper { position: relative; height: 50px; display: flex; flex-direction: column; justify-content: space-between; }
/* Серая фоновая полоса (100%) */
.bar-total { position: absolute; top: 0; left: 0; width: 100%; height: 24px; background-color: var(--darkgrey); color: #fff; text-align: right; padding-right: 10px; font-size: 14px; line-height: 24px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); }
/* Синяя активная полоса */
.bar-filled {
  position: absolute; bottom: 0; left: 0;
  /* Изначально 0% для анимации появления, JS включит var(--progress) */
  width: 0%; height: 26px; background-color: var(--blue); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); 
  color: #fff; text-align: right; padding-right: 10px; font-size: 14px; line-height: 26px;
  /* Плавное заполнение полосы */
  transition: width 1.5s cubic-bezier(0.1, 1, 0.1, 1); 
}
/* Интерактивный эффект: при наведении строка подсвечивается */
.chart-row:hover .bar-filled { filter: brightness(1.1); }
.chart-row:hover .chart-number { transform: scale(1.05); transition: transform 0.2s; }

.preim-drops .blok p { color: var(--darkgrey2); }
.preim-drops .blok:hover img { transform: translateY(10px); }

/* -- Реализованные проекты -- */
ol.object { list-style-type: none; counter-reset: num; position: relative; margin: 0 0 0 50px; padding: 5px 0; font-size: 16px; }
ol.object li { position: relative;	margin: 0 0 0 0; padding: 0 0 10px 0; line-height: 1.4; border-bottom: 1px solid var(--darkgrey); margin: 30px 0 30px 15px; }
ol.object li:after {content: counter(num); counter-increment: num; display: inline-block; position: absolute; top: 0; left: -35px; width: 24px; height: 24px; line-height: 22px; 
background: #fff; color: #000; text-align: center; font-size: 14px; border-radius: 50%; border: 1px solid rgba(0, 46, 101, 1); }

.content ol.object p { font-size: 16px!important; margin-bottom: 5px!important;}


/* -- Статьи / Записи -- */
.meta { margin: 0 0 20px 50px; }
.meta .n-tags { font-size: 14px; font-style: italic; margin: 5px 0; }

.category-articles h3 a, .category-articles h3 a:hover,
.image-block a, .image-block a:hover,
.post-img a, .post-img a:hover { font-weight: bold; border-bottom: none; color: transparent; }

.image-block img { border: 1px solid #aeb0b4; }
.image-block img:hover { border-color: #f4b449; }
.image-block { margin-bottom: 20px; }

/* -- Страница Контакты --*/
.contact-icons { display: flex; gap: 10px; align-items: center; }
.contact-icons img { max-width: 32px; height: auto; }
.contact-icons a  { color: var(--blue); }

.directions { margin: 20px auto 40px auto; }
.directions .flex { gap: 20px; }
.directions .blok { text-align: center; padding: 20px; border: 1px solid var(--blue); border-radius: 10px; }
.directions .blok p:first-child { font-size: 16px; }
.directions .blok h4 span, .contact a { display: block; font-size: 16px; }
.directions .contact a { color: var(--blue); }


/* -- Подвал -- */
footer { border-top: 1px solid #000; background-color: #fff; }
.footer-logo-block img { filter: grayscale(1); }
.privacy p { margin-bottom: 5px; font-size: 14px; }
footer .grey { color: var(--darkgrey2); }


/* -- Тулбар в подвале про Cookie -- */
#cookieBar { width: 290px; bottom: 10px; left: 10px; position: fixed; z-index: 100; border: 1px dashed #ff0000; background-color: #fff; border-radius: 10px; text-align: center; display: none; box-sizing: border-box; padding: 10px; }
#cookieBar p { font-size: 11px; color: #000; margin: 0; }
#closeButton { color: #fff; background-color: var(--blue); border: none; display: block; cursor: pointer; margin: 5px auto 0 auto; font-size: 14px; line-height: 20px; padding: 5px 10px; border-radius: 6px; }
#closeButton:hover { background-color: var(--lightblue); }

/* -- Презентация -- */
#presentation { position: fixed; right: 10px; bottom: 10px; width: 150px; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; border: 2px solid #0686c5; border-radius: 10px; overflow: hidden; background-color: #fff; }
#presentation a { position: relative; }
#presentation img { width: 100%; }
#presentation p { font-size: 12px; font-weight: bold; margin: 0; text-transform: uppercase; position: absolute; z-index: 100; bottom: 65px; background-color: #fff; padding: 5px 0; border-top: 2px solid #0686c5; border-bottom: 2px solid #0686c5; }
#presentation:hover p { background-color: #0686c5; color: #fff; }


/* 📱 Адаптация под мобильные устройства */

@media (max-width: 767px) {
	.directions .flex { justify-content: center; }
	#cookieBar { width: 180px; }
	#closeButton { font-size: 12px; }
	#presentation { display: none; width: 130px; }
	#cookieBar p, #presentation p { font-size: 10px; }
     #presentation p { bottom: 55px; }
}

@media (max-width: 1199px) {
	.max-width { max-width: 100%; }
	.content { padding: 80px 15px 20px 15px; }
	header > .flex, footer > .flex { flex-wrap: wrap; justify-content: center; gap: 10px; }
	header > .flex { height: auto; padding-bottom: 10px; }
	.logo .title { font-size: 18px; }
	.content p { font-size: 15px; }
	.page-content { padding-top: 50px; }
    .presentation { height: auto; scroll-snap-type: none; overflow-y: visible; }
    .slide { height: auto; min-height: 100dvh; scroll-snap-align: none; flex-direction: column; padding: 40px 20px; }
	.banner .flex { justify-content: center; }
	h1 { font-size: 30px; }
	h1.subtitle { font-size: 20px!important; line-height: 22px!important; }
	.big-blue { font-size: 26px; line-height: 30px; max-width: 100%; width: 100%; text-align: center; }
	h2 { font-size: 26px; line-height: 28px; }
	h2 .logo-bioks { font-size: 30px; line-height: 30px; }
	h3 { font-size: 20px; margin: 10px 0; }
	.banner .logo-bioks { font-size: 70px; line-height: 70px; }

	.bloks3 .blok, .bloks4 .blok { width: 100%; margin-bottom: 20px; }
	.bloks3 .blok:last-child { margin-bottom: 0; margin-bottom: -15px; }
	.bloks4 { padding-top: 25px; }
    .bloks4 .blok:first-child { margin-top: 0px; }
	.bloks3 .blok::before, .bloks4 .blok::before { bottom: -25px; height: 20px; }
	.bloks4 .blok::before { top: -25px; }
	.bioks-tube .blok { width: 80%; }
	.sistemy-bioks .text-img { max-width: 100%; }
	.content ul li, .content ol li { margin: 0 0 5px 20px; }
	.pochemy-my .blok > ul > li { font-size: 15px; line-height: 17px; }
	.sfery .flex .blok { width: 160px; }
	.sfery .flex .blok img { width: 94%; }
	.chart-row { grid-template-columns: 4fr 1fr 2fr; gap: 10px; }
	.chart-label { font-size: 18px; line-height: 20px; }
	.chart-number { font-size: 40px; }
	.reshenija .flex, .preim-drops, .linejka .flex { gap: 10px; justify-content: center; }
	.linejka .flex .blok { width: 100%; }
	.reshenija .grid, .preim-drops .grid { grid-template-columns: auto; grid-template-rows: 70px 1fr;  text-align: center; align-items: self-start; }
	.reshenija .blok img, .preim-drops .blok img { margin: 0 auto; }
}
@media (min-width: 1200px) {
	.max-width { max-width: 1200px; }
	.logo .title { font-size: 20px; }
}