.modal-form__thanks, .modal-form__error, .formsending, .feedback__thanks, .feedback__error, .footer__thanks, .footer__error {
	display: none;
	font-size: 26px;
	text-align: center;
	color: #fff;
	font-weight: bold;
}

.features__title {
	padding: 1.5em 0 0;
}

.blog__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -15px 40px;
}

@media (max-width: 584px) {
  .blog__items {
    margin: 0px 0px 40px;
  }
}

.blog__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(33.333% - 30px);
          flex: 0 0 calc(33.333% - 30px);
  margin: 0 15px 30px;
  -webkit-box-shadow: 0px 4px 12px rgba(32, 91, 162, 0.16);
          box-shadow: 0px 4px 12px rgba(32, 91, 162, 0.16);
  border-radius: 16px;
}

@media (min-width: 992px) {
  .blog__item:hover .blog__item-image:after {
    background: rgba(0, 0, 0, 0.5);
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .blog__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 30px);
            flex: 0 0 calc(50% - 30px);
  }
}

@media (max-width: 584px) {
  .blog__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin: 0px 0px 30px;
  }
}

.blog__item-image {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.blog__item-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px 16px 0 0;
}

@media (min-width: 992px) {
  .blog__item-image:after {
    content: 'Подробнее...';
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0);
    left: 0;
    top: 0;
    border-radius: 16px 16px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0px;
    -webkit-transition: .4s;
    transition: .4s;
  }
}

.blog__item-info {
  padding: 20px 20px 40px;
}

@media (max-width: 419px) {
  .blog__item-info {
    padding: 12px 10px 20px;
  }
}

.blog__item-header {
  display: flex;
  margin: 0 0 12px 0;
}

.blog__item-date {
  margin: 0px 12px 0 0;
  color: #fff;
}

.blog__item-views {
  margin: 0 0 0 auto;
  padding: 0 0 0 22px;
  color: #fff;
  background: url('/images/views.png') left center / 20px no-repeat;
}

.blog__item-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 27px;
  color: #fff;
  margin: 0px 0px 12px;
  -webkit-transition: .4s;
  transition: .4s;
}

.blog__item-title:hover {
  color: #0725c0;
}

.blog__item-intro {
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.icon-angle-double-left {
  display: block;
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #0725c0;
}

.icon-angle-double-left:before {
  content: '<<';
}

.icon-angle-left {
  display: block;
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #0725c0;
}

.icon-angle-left:before {
  content: '<';
}

.icon-angle-right {
  display: block;
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #0725c0;
}

.icon-angle-right:before {
  content: '>';
}

.icon-angle-double-right {
  display: block;
  width: 32px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #0725c0;
}

.icon-angle-double-right:before {
  content: '>>';
}

.page-item {
  margin: 0px 10px 0px 0px;
  background: #fff;
  -webkit-transition: .4s;
  transition: .4s;
}

.page-item:not(.disabled):not(.active):hover {
  cursor: pointer;
  background: rgba(246, 51, 51, 0.5);
}

.page-item .page-link {
  display: block;
  width: 32px;
  height: 32px;
  color: #333333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 600;
  font-size: 12px;
  line-height: 80%;
}

.page-item.active {
  background: #0725c0;
}

.page-item.active .page-link {
  color: #fff;
}

.page-item.disabled .icon-angle-double-left {
  color: #666;
}

.page-item.disabled .icon-angle-left {
  color: #666;
}

.page-item.disabled .icon-angle-double-right {
  color: #666;
}

.page-item.disabled .icon-angle-right {
  color: #666;
}

.article .container {
	max-width: 950px;
}

.article__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0px 0px 40px;
}

@media (max-width: 584px) {
  .article__header {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}


.article__date {
  margin: 0px 12px 0px 0px;
  color: #fff;
}

@media (max-width: 584px) {
  .article__date {
    margin: 0;
  }
}
.article__content {
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

@media (max-width: 479px) {
  .article__content {
    font-size: 18px;
    line-height: 28px;
  }
}

.article__views {
  padding: 0 0 0 24px;
  background: url('/images/views.png') left center / 20px no-repeat;
  font-size: 16px;
  color: #fff;
}

.article__intro {
  margin: 0px 0px 30px;
}

.article__image {
  margin: 0px 0px 30px;
  border-radius: 24px;
}

.article__image img {
  border-radius: 24px;
  display: block;
  margin: auto;
}
.article p {
	margin: 0 0 12px 0;
}

ul.default {
  margin: 0 0 28px 0;
}

ul.default li {
  position: relative;
  padding: 0 0 0 12px;
  margin: 0 0 8px 0;
}

ul.default li:before {
  content: '';
  width: 6px;
  height: 6px;
  background: #222;
  position: absolute;
  top: .5em;
  left: 0;
  border-radius: 50%;
}

#writereview .popup__box {
  width: 100%;
}

@media (min-width: 540px) {
    .integration__item_big .integration__image {
        bottom: 20px;
    }
}

.form__agreement {
  font-size: 12px;
  margin: 10px 0 0 0;
}

.form__agreement a {
  text-decoration: underline;
}

[id^="feedtext_"] {

}

[id^="feedtext_"] p {
  margin: 0 0 10px 0;
}

[id^="feedtext_"] ul li {
  position: relative;
  padding: 0 0 0 15px;
  margin: 0 0 10px 0;
}

[id^="feedtext_"] ul li:before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: .6em;
  left: 0;
}
.blog__item a {
  display: block;
  width: 100%;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .burger {
        display: block;
    }
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        border-top: var(--header-height) solid transparent;
        padding-top: 20px;
        padding-bottom: calc(100vh - 100svh + 40px);
        padding-left: calc(var(--section-padding));
        padding-right: calc(var(--section-padding));
        background: var(--black);
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s;
    }
    .menu_open {
        opacity: 1;
        pointer-events: all;
    }
    .menu > * {
        transition: 0.2s 0s;
        transform: translateY(-30px);
        opacity: 0;
    }
    .menu_open > * {
        transition: 0.4s 0.2s;
        transform: translateY(0);
        opacity: 1;
    }
    .menu .header__contacts {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .header__container { gap: clamp(24px, 1.7vw, 32px); }
    .header .menu { gap: clamp(16px, 1.15vw, 22px); }
    .header__actions { gap: 16px; }
    .header__contacts { flex-shrink: 0; }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .header__phone { display: none; }
}

/* Обложка: отступ под шапку. В style.css он обнуляется более сильным правилом
   [class*="__container"], и длинный заголовок (как на «Услугах») уезжал под меню */
.hero .hero__container {
    padding-top: calc(var(--header-height) + 32px);
    padding-bottom: calc(var(--header-height) + 32px);
}

/* Оборудование: OctaNode, FlexNode и RTU-SUN на фото крупнее остальных устройств —
   уменьшаем их внутри карточки, края фото растворяем в фоне карточки.
   У RTU id на русской странице rtu-sun-isp02, на EN/UZ — rtu-sun-007-isp02 */
.integration_page :is(#octanode, #flexnode) .integration__image img {
    transform: scale(.82);
}
.integration_page :is(#rtu-sun-isp02, #rtu-sun-007-isp02) .integration__image img {
    transform: scale(.72);
}
.integration_page :is(#octanode, #flexnode, #rtu-sun-isp02, #rtu-sun-007-isp02) .integration__image img {
    -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%);
}

/* Блок «Заявка» внизу страниц (request-form.html): модели подключения слева, короткая форма справа */
.feedback__models {
    display: grid;
    gap: 10px;
    margin-top: clamp(20px, 2vw, 32px);
}
.feedback-model {
    display: block;
    position: relative;
    padding: 16px 20px;
    border: 1px solid var(--lightblack);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition);
}
.feedback-model input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.feedback-model__name {
    display: block;
    font-weight: 500;
    color: var(--white);
}
.feedback-model__text {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--gray);
}
.feedback-model:hover {
    border-color: var(--gray);
}
.feedback-model:has(input:checked) {
    border-color: var(--blue);
    background-color: rgba(7, 37, 192, .15);
}
.feedback-model:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
select.form__input {
    background: var(--lightblack) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239E9FA3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 1.75em center / 12px 8px;
    padding-right: 3.5em;
    cursor: pointer;
}
select.form__input:invalid {
    color: var(--gray);
}
select.form__input option {
    background: var(--softblack);
    color: var(--white);
}
.feedback__form_request .form__input_textarea {
    height: 120px;
    border-radius: 30px;
}

/* Баннер главной на телефонах и планшетах (портрет): в колонку — текст, картинка с монитором, бегущая строка; без наложений */
@media (max-aspect-ratio: 5/4) {
    .hero {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-height: 0;
        padding-bottom: 24px;
    }
    /* фиолетово-оранжевое свечение внизу — по ширине экрана, а не 800px */
    .hero::before {
        width: 100%;
    }
    .hero .hero__container {
        width: 100%;
        padding-top: calc(var(--header-height) + 24px);
        padding-bottom: 0;
    }
    .hero .hero__text {
        margin-bottom: 1.5em;
    }
    .hero__image {
        position: relative;
        inset: auto;
        z-index: 0;
        width: 100%;
        max-width: 680px;
        aspect-ratio: 1.3;
        margin: 8px auto 0;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .2) 15%, #000 42%, #000 78%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .2) 15%, #000 42%, #000 78%, transparent), linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
        mask-composite: intersect;
    }
    /* крупно монитор: правая часть фото, увеличенная */
    .hero__image img {
        object-position: 100% 50%;
        transform: scale(1.42);
        transform-origin: 97% 52%;
    }
    .hero__marquee {
        position: relative;
        bottom: auto;
        margin: 4px 0 0;
    }
    /* Внутренние страницы (у них нет бегущей строки): фото фоном в верхней части шапки,
       заголовок и текст поверх затемнённого низа фото. Без увеличения монитора, как на главной */
    .hero:not(:has(.hero__marquee)) {
        min-height: 0;
        padding-bottom: 40px;
    }
    .hero:not(:has(.hero__marquee)) .hero__container {
        padding-top: calc(var(--header-height) + 52vw);
    }
    .hero:not(:has(.hero__marquee)) .hero__image {
        position: absolute;
        inset: 0 0 auto 0;
        height: calc(var(--header-height) + 80vw);
        z-index: -1;
        width: auto;
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .hero:not(:has(.hero__marquee)) .hero__image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(1, 3, 18, .6) 0%, rgba(1, 3, 18, 0) 25%, rgba(1, 3, 18, 0) 55%, rgba(1, 3, 18, .8) 80%, #010312 100%);
    }
    .hero:not(:has(.hero__marquee)) .hero__image img {
        transform: none;
        object-position: 50% 50%;
    }
    /* на узком экране от широкого фото видна треть — держим в кадре лицо или планшет */
    .hero:not(:has(.hero__marquee)) .hero__image img[src*="hero-img-contacts"] { object-position: 72% 50%; }
    .hero:not(:has(.hero__marquee)) .hero__image img[src*="hero-img-company"] { object-position: 62% 50%; }
    .hero:not(:has(.hero__marquee)) .hero__image img[src*="poster-img2"] { object-position: 45% 50%; }
}

/* Планшет в альбомной ориентации и ноутбуки 4:3–16:10: сдвигаем картинку, чтобы монитор не обрезался, и затемняем слева под текстом */
@media (min-aspect-ratio: 5/4) and (max-aspect-ratio: 16/9) {
    .hero__image img {
        object-position: 100% 50%;
    }
    .hero__image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(1, 3, 18, .75) 0%, rgba(1, 3, 18, .4) 40%, transparent 65%);
    }
}

/* «Услуги»: кольцевые диаграммы в блоке economy — анимация при прокрутке (AOS), подсказки при наведении, фокусе или нажатии на сектор */
.economy__content { align-items: center; }
.donut { position: relative; max-width: 384px; margin: 0 auto; }
.donut__svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); overflow: visible; }
.donut__seg { fill: none; stroke-width: 26; cursor: pointer; outline: none; transition: stroke-width .3s, opacity .3s, stroke-dasharray 1.6s cubic-bezier(.2, .7, .2, 1) .3s; }
.donut__seg_base { stroke: #27077E; }
.economy__chart.aos-init:not(.aos-animate) .donut__seg { stroke-dasharray: 0 503; }
.donut__seg:hover, .donut__seg:focus { stroke-width: 34; }
.economy__chart:has(.donut__seg:hover, .donut__seg:focus) .donut__seg:not(:hover):not(:focus) { opacity: .35; }
.donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; transition: opacity .25s; }
.economy__chart:has(.donut__seg:hover, .donut__seg:focus, .donut__key:hover) .donut__center { opacity: .12; }
.donut__value { font-size: clamp(34px, 3.4vw, 54px); font-weight: 700; line-height: 1; background: linear-gradient(90deg, #d2307f, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.donut__label { max-width: 9em; margin-top: .5em; font-size: 15px; line-height: 1.3; color: var(--gray); }
.donut__tip { position: absolute; z-index: 2; width: min(250px, 78%); padding: 14px 16px; border: 1px solid var(--shadowblue); border-radius: 12px; background: rgba(13, 15, 27, .94); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); font-size: 14px; line-height: 1.45; color: var(--gray); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; pointer-events: none; }
.donut__tip b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--white); }
.donut__tip_accent { top: 0; right: -8%; }
.donut__tip_base { bottom: 0; left: -8%; }
.economy__chart:has(.donut__seg_accent:hover, .donut__seg_accent:focus, .donut__key_accent:hover) .donut__tip_accent,
.economy__chart:has(.donut__seg_base:hover, .donut__seg_base:focus, .donut__key_base:hover) .donut__tip_base { opacity: 1; visibility: visible; transform: none; }
.donut__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--gray); }
.donut__key { display: flex; align-items: center; gap: 8px; cursor: default; }
.donut__key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #27077E; }
.donut__key_accent::before { background: linear-gradient(135deg, #d2307f, #ff7a2f); }
@media (max-width: 900px) { .donut__tip_accent { right: 0; } .donut__tip_base { left: 0; } }
/* Диаграммы на телефоне: две в ряд, без подписи в центре (смысл даёт легенда), подсказка под диаграммой */
@media (max-width: 600px) {
    .economy__content { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
    .economy__desc { grid-column: 1 / -1; }
    .economy__text { font-size: 15px; text-align: left; min-width: 0; max-width: none; margin: 0; }
    .donut__value { font-size: 24px; }
    .donut__label { display: none; }
    .donut__seg { stroke-width: 30; }
    .donut__seg:hover, .donut__seg:focus { stroke-width: 38; }
    .donut__legend { flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; }
    .donut__tip, .donut__tip_accent, .donut__tip_base { top: calc(100% + 6px); bottom: auto; width: 250px; font-size: 13px; background: var(--darkblack); }
    .economy__chart:first-child .donut__tip { left: 0; right: auto; }
    .economy__chart:nth-child(2) .donut__tip { right: 0; left: auto; }
}

/* Телефоны и планшеты: подсветка-«тень» блоков (.shadow) в style.css сделана через filter: blur(500px).
   На телефоне это огромная GPU-текстура, iOS Safari на ней подвисает при прокрутке.
   Заменяем на радиальный градиент: выглядит так же, рисуется без фильтра. */
@media (max-width: 1023px) {
    .shadow::before, .shadow::after {
        filter: none;
        width: 140vw;
        background: radial-gradient(closest-side, rgba(40, 43, 72, .45), rgba(40, 43, 72, 0));
    }
}

/* Главная, блок innovation: схема системы (оборудование → контроллеры → облако) и три факта под ней */
.innovation .innovation__title { margin-bottom: .6em; }
.innovation__lead { max-width: 46em; margin-bottom: clamp(32px, 4vw, 56px); font-size: var(--text-size-l); line-height: 1.5; color: var(--gray); }
.innovation__flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.innovation__step { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2vw, 32px); border: 1px solid var(--lightblack); border-radius: var(--border-radius); background: rgba(15, 17, 30, .78); }
/* стрелка к следующему шагу: в промежутке между карточками */
.innovation__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -19px; width: 12px; height: 12px; border-top: 2px solid #ff7a2f; border-right: 2px solid #ff7a2f; transform: translateY(-50%) rotate(45deg); z-index: 1; }
.innovation__num { font-weight: 700; font-size: 18px; line-height: 1; background: linear-gradient(90deg, #d2307f, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.innovation__name { margin: 14px 0 8px; font-family: var(--second-family); font-weight: 600; font-size: clamp(20px, 1vw + 12px, 26px); line-height: 1.25; }
.innovation__desc { margin: 0 0 20px; font-size: 15px; line-height: 1.5; color: var(--gray); }
.innovation__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.innovation__tags li { display: flex; }
.innovation__tag { display: inline-block; padding: 6px 12px; border: 1px solid var(--lightblack); border-radius: 999px; background: var(--softblack); font-size: 13px; line-height: 1.3; color: var(--white); }
a.innovation__tag { transition: border-color var(--transition), background-color var(--transition); }
a.innovation__tag:hover, a.innovation__tag:focus-visible { border-color: var(--blue); background: rgba(7, 37, 192, .25); }
.innovation__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: clamp(32px, 4vw, 56px) 0 0; padding: clamp(24px, 3vw, 40px) 0 0; border-top: 1px solid var(--lightblack); list-style: none; }
.innovation__value { display: block; font-family: var(--second-family); font-weight: 600; font-size: clamp(24px, 1.6vw + 12px, 40px); line-height: 1.15; background: linear-gradient(90deg, #d2307f, #ff7a2f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.innovation__caption { max-width: 24em; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--gray); }
@media (max-width: 1023px) {
    .innovation__flow { grid-template-columns: 1fr; gap: 28px; }
    .innovation__step:not(:last-child)::after { top: auto; right: auto; bottom: -21px; left: 50%; transform: translateX(-50%) rotate(135deg); }
    .innovation__facts { grid-template-columns: 1fr; gap: 20px; }
}
/* Появление: карточки поднимаются по очереди (AOS, задержки в разметке), следом стрелка и теги по одному.
   Прячем только когда AOS запустился (.aos-init), чтобы без скрипта всё было видно */
.innovation__step:nth-child(1) { --d: 0s; }
.innovation__step:nth-child(2) { --d: .25s; }
.innovation__step:nth-child(3) { --d: .5s; }
/* переход только в состоянии «появилось»: прячется мгновенно (без мигания при загрузке), появляется плавно */
.innovation__step.aos-init .innovation__tags > li,
.innovation__step.aos-init:not(:last-child)::after { opacity: 0; }
.innovation__step.aos-init .innovation__tags > li { transform: translateY(10px) scale(.94); }
.innovation__step.aos-animate .innovation__tags > li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.innovation__step.aos-animate:not(:last-child)::after { opacity: 1; transition: opacity .5s ease calc(var(--d) + .7s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(1) { transition-delay: calc(var(--d) + .45s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(2) { transition-delay: calc(var(--d) + .52s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(3) { transition-delay: calc(var(--d) + .59s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(4) { transition-delay: calc(var(--d) + .66s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(5) { transition-delay: calc(var(--d) + .73s); }
.innovation__step.aos-animate .innovation__tags > li:nth-child(6) { transition-delay: calc(var(--d) + .8s); }
/* на телефоне карточки появляются по мере прокрутки каждая сама, общая задержка не нужна */
@media (max-width: 1023px) {
    .innovation__step:nth-child(n) { --d: 0s; }
}
@media (prefers-reduced-motion: reduce) {
    .innovation__step.aos-init .innovation__tags > li,
    .innovation__step.aos-init:not(:last-child)::after { opacity: 1; transform: none; transition: none; }
}

/* ===== Внутренние ссылки в тексте блоков (31.10) ===== */
/* «Подробнее…» под текстом блока: ведёт на другую страницу сайта */
.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 1.4em;
    font-size: var(--text-size-m);
    line-height: 1.3;
    color: var(--white);
}
.more-link::after {
    content: "";
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition);
}
@media (hover: hover) {
    .more-link:hover::after { transform: translateX(4px) rotate(45deg); }
}
/* Ссылка внутри абзаца. Двойной селектор перебивает a:hover {text-decoration: none} из style.css */
.text-link,
.text-link:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(255, 255, 255, 0.35);
}
@media (hover: hover) {
    .text-link:hover { color: var(--white); text-decoration-color: currentColor; }
}

/* Telegram-канал под формой подписки в подвале */
.footer__channel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    max-width: 22em;
    line-height: 1.4;
    color: var(--white);
}
.footer__channel img {
    flex-shrink: 0;
    width: 30px;
    aspect-ratio: 1;
}

/* ===== Единая типографика (02.11) =====
   Заголовки и кнопки — Mont 600/400, текст и поля форм — Montserrat 400/300.
   Размеры только из переменных style.css, поэтому на телефоне они уменьшаются сами:
   раздел --title-size, карточка --subtitle-size, вводный абзац --text-size-l, текст карточки --text-size,
   кнопка --text-size-l, поле формы --form-text-size.
   Обложки (hero), крупные цифры, диаграммы, вкладки «Климат/Свет…» и иконки не трогаем */

/* Заголовок раздела: «Заказать звонок», «Мобильное приложение» и блок продуктов были крупнее или мельче остальных */
.title:not(.hero__title),
.mobileapp__title,
.feedback__title,
.innovation__content_small .innovation__title,
.integration__title,
.popup__title {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: var(--title-size);
}

/* Заголовок карточки: было 23, 24, 26 и 27 px, у «Принципов» и «Гарантий» — тонкий Montserrat. Подвал не трогаем: там 23 px */
.subtitle:not(.warranty__subtitle):not(.footer__title),
.guarantees__subtitle,
.principle__subtitle,
.partnership__subtitle,
.integration__subtitle,
.innovation__name,
.mobileapp__subtitle {
    font-family: var(--second-family);
    font-weight: 600;
    font-size: var(--subtitle-size);
}
.prod-feature__name { font-family: var(--second-family); font-weight: 600; }

/* Вводный абзац под заголовком раздела: было 16, 18 и 23 px, местами тонкий */
.economy__text,
.feedback__text,
.mobileapp__cta,
.mobileapp__text,
.integration__text,
.innovation__lead,
.comfort__text,
.team__text,
.warranty__text,
.poster__text:not(.poster__text_big),
.control__text,
.control p:not([class]) {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--text-size-l);
}

/* Текст карточки: было 15, 17 и 18 px */
.features__text,
.optimization__text,
.guarantees__text,
.solutions__text,
.principle__text,
.innovation__desc,
.innovation__caption {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--text-size);
}

/* Шаги на «Партнёрам» были набраны крупным Mont как заголовки */
.steps__item { font-family: var(--font-family); font-size: var(--text-size-l); }

/* Кнопки: было 16–19 px */
.button:not(.header__button),
.form__button {
    font-family: var(--second-family);
    font-weight: 400;
    font-size: var(--text-size-l);
}

/* Поля форм: во всех формах одинаково */
.form__input {
    font-family: var(--font-family);
    font-weight: 300;
    font-size: var(--form-text-size);
}

/* Блог: заголовок карточки шрифтом заголовков, анонс без жирных кусков и заголовков из текста статьи */
.blog__item-title { font-family: var(--second-family); font-weight: 600; }
.blog__item-intro,
.blog__item-intro * {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: var(--text-size);
}

/* Подзаголовки внутри статей: в тексте части статей размер и жирность заданы прямо в теге (style="…"),
   поэтому здесь !important */
.article__content h2 { font-family: var(--second-family) !important; font-weight: 600 !important; font-size: var(--subtitle-size) !important; line-height: 1.3 !important; }
.article__content h3 { font-family: var(--second-family) !important; font-weight: 600 !important; font-size: var(--text-size-xl) !important; line-height: 1.3 !important; }
.article__content h4 { font-family: var(--second-family) !important; font-weight: 600 !important; font-size: var(--text-size-l) !important; line-height: 1.3 !important; }

/* «Продукты»: у страницы свои размеры в <style> внутри материала (produkty-*.html), поэтому селекторы длиннее */
.main .integration_page .integration__title.integration__title_sub { font-size: var(--title-size); }
.main .integration_page .integration__title_sub + .integration__text { font-size: var(--text-size-l); }
.main .integration_page .integration__subtitle { font-size: var(--subtitle-size); }
.main .integration_page .prod-feature__name { font-weight: 600; }

/* ===== «Где применять решения Uspace»: здания линиями вместо фото и показания под текстом (03.11) =====
   Разметку рисует script.js (partnershipBuildings). Карточка оживает от наведения (класс pbld_active),
   плашка Uspace загорается синим, как кнопки сайта */
.partnership__image_dash img { opacity: 0; }
.pbld__pic {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0a0c18;
}
.pbld__pic svg { display: block; width: 100%; height: 100%; }
.pbld__line { fill: none; stroke: #2c3150; stroke-width: 1.2; transition: stroke .5s; }
.pbld__win { fill: #161a2c; transition: fill .4s; transition-delay: 0s; }
.pbld__sensor, .pbld__wire { opacity: 0; transition: opacity .4s; transition-delay: 0s; }
.pbld__sensor { fill: #ff5a4f; stroke: #0a0c18; stroke-width: 2; }
.pbld__wire { fill: none; stroke: #ff5a4f; stroke-width: 1; stroke-dasharray: 3 3; }
.pbld__hub rect { fill: rgba(7, 37, 192, .18); stroke: #2b3fae; stroke-width: 1; transition: fill .4s, stroke .4s, filter .4s; }
.pbld__hub text { font-family: var(--second-family); font-size: 10px; font-weight: 600; fill: #8e9ad8; transition: fill .4s; }

.pbld_active .pbld__line { stroke: #5a6190; }
.pbld_active .pbld__win { fill: #ffb070; transition-delay: var(--d); }
.pbld_active .pbld__sensor { opacity: 1; transition-delay: var(--d); }
.pbld_active .pbld__wire { opacity: .7; transition-delay: var(--d); animation: pbld-flow 1.2s linear infinite; }
.pbld_active .pbld__hub rect { fill: var(--blue); stroke: #4d6bff; filter: drop-shadow(0 0 6px rgba(45, 85, 255, .9)); }
.pbld_active .pbld__hub text { fill: var(--white); }

.pbld__metrics { display: flex; gap: 6px; margin-top: 16px; }
.pbld__metric { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: #151930; }
.pbld__metric b { display: block; font-family: var(--second-family); font-size: 15px; font-weight: 600; color: var(--white); white-space: nowrap; }
.pbld__metric span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.3; color: #8b90ab; }

@keyframes pbld-flow { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
    .pbld, .pbld * { animation: none !important; transition: none !important; }
}