/* Стили страницы «home». Вынесены из templates/index.html без изменений:
   каскад тот же — <link> стоит там же, где стоял <style>. */
/* Единая ширина главной: main = 1200px с полями 32px (контент 1136),
           как у обёрток rk-блоков. Перебивает адаптивные main{width:65/80/90%}
           из main.css. Full-bleed rk-блоки (100vw) не сдвигаются. */
        main { width: 100%; max-width: 1200px; padding-inline: 0; box-sizing: border-box; }
        /* Контент ровно 1200px: убираем внутренние боковые поля 32px у обёрток
           (иначе контент 1200−64=1136). На узких экранах вернём отступ ниже. */
        .rk-hero2 .wrap, .rk-hero2 .hero-inner,
        .rk-pif .pif-wrap, .rk-mech .mech-wrap, .rk-promo .promo-wrap, .rk-catalog .cat-wrap,
        .rk-sol .sol-wrap, .rk-awards .aw-wrap, .rk-team .team-wrap, .rk-findcta-wrap,
        .rk-cta .cta-inner, .exp2-head, .info-head { padding-inline: 0; }
        /* --sbw = ширина полосы прокрутки (100vw включает её, 100% — нет). Нужна,
           чтобы выровнять боковые отступы ВСЕХ блоков: полноширинные секции сделаны
           через width:100vw и их контент оказывается на пол-скроллбара «шире»/левее,
           чем у блоков внутри main (hero/эксперты/информация/новости). */
        :root { --sbw: calc(100vw - 100%); }
        @media (max-width: 1240px) {
          main { padding-inline: 20px; }
          .rk-hero2 .wrap, .rk-hero2 .hero-inner, .exp2-head, .info-head { padding-inline: 20px; }
          /* Узкие экраны: контент full-bleed секций шире main на пол-скроллбара с
             каждой стороны — добавляем этот пол-скроллбара к отступу, чтобы край
             контента совпал с main (симметрично). */
          .rk-pif .pif-wrap, .rk-mech .mech-wrap, .rk-promo .promo-wrap, .rk-catalog .cat-wrap,
          .rk-sol .sol-wrap, .rk-awards .aw-wrap, .rk-team .team-wrap, .rk-findcta-wrap,
          .rk-cta .cta-inner { padding-inline: calc(20px + var(--sbw) / 2); }
        }
        /* Широкие экраны: контент full-bleed (1200px) центрирован в 100vw и сдвинут
           влево на пол-скроллбара относительно main — возвращаем ровно этим сдвигом. */
        @media (min-width: 1241px) {
          .rk-pif .pif-wrap, .rk-mech .mech-wrap, .rk-promo .promo-wrap, .rk-catalog .cat-wrap,
          .rk-sol .sol-wrap, .rk-awards .aw-wrap, .rk-team .team-wrap, .rk-findcta-wrap,
          .rk-cta .cta-inner { transform: translateX(calc(var(--sbw) / 2)); }
        }
        /* Футер выровнен глобально — правило в footer2.css. */
        /* Единый вертикальный ритм: каждый блок «владеет» 56px сверху и снизу,
           поэтому любой зазор между блоками = 112px. Голым блокам (эксперты,
           информация) добавляем недостающий отступ снизу. */
        main > .block-center { margin-bottom: 50px; }      /* низ блока экспертов */
        main > .blocklink-center { margin: 30px 0 50px; }  /* отступ от подзаголовка + низ блока «Информация» */
        /* Карточка-статистика «6 наград» кликабельна — ведёт к разделу наград */
        a.v2-proof-item { text-decoration: none; color: inherit; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
        a.v2-proof-item:hover { transform: translateY(-2px); }
        html { scroll-behavior: smooth; }
        /* Трест-бар (надзор ЦБ / НАУФОР) в самом верху hero */
        .rk-hero2 .v2-trustbar { margin-top: 0; margin-bottom: 18px; }

        /* Ноутбуки/ПК: убираем лишний «воздух» hero — блоки не жмём, только зазоры.
           Базовые (мягкие) правки применяются всегда на десктопе. */
        @media (min-width: 1025px) {
          .rk-hero2 .v2-hero { padding-top: 95px; }   /* отступ между шапкой и началом страницы */
          .rk-hero2 .v2-h1 { margin-top: 22px; }
          .rk-hero2 .v2-lead { margin-top: 22px; }
          .rk-hero2 .v2-chips { margin-top: 44px; }   /* больше воздуха перед чипами */
          .rk-hero2 .v2-cta { margin-top: 40px; }     /* и перед кнопками */
          .rk-hero2 .v2-proof { margin-top: 48px; }   /* было 72 */
        }
        /* Заголовок блока «Информация о компании» — eyebrow+заголовок+подзаголовок,
           оформление как в других блоках главной (из process1). Блоки не трогаем. */
        .info-head { max-width: 1200px; margin: 50px auto 0; padding: 0; }
        .info-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #000b73; display: inline-flex; align-items: center; gap: 11px; }
        .info-eyebrow::before { content: ""; width: 30px; height: 1.5px; background: #000f9f; display: inline-block; }
        .info-h { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(28px, 3.6vw, 38px); line-height: 1.08; letter-spacing: -.01em; color: #14161d; margin: 14px 0 0; }
        .info-sub { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; color: #474b58; margin: 10px 0 0; }
        .video {
            width: 100%;
            top: 0;
            left: 0;
        }
        @media (max-width: 768px) {
            .video {
                margin-top: 80px;
            }
        }
        .scroll-button {
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: absolute;
            z-index: 2; 
            display: flex;
            justify-content: center;
            align-items: center;
        }
        @media (max-width: 600px) {
            .scroll-button {
                display: none; 
            }
        }
        .blocklink {
            font-size: 14px;
            display: flex;
            align-items: center;
            flex: 1 1 calc(30%);
            box-sizing: border-box;
            min-width: 300px;
            height: auto;
            box-shadow: 0 0 20px rgba(102, 102, 102, 0.1);
            margin: 0;
            padding: 20px;
            border-radius: 13px;
            transition: 0.7s;
            background-color: #ffffff;
            justify-content: center;
            text-decoration: none;
            color: inherit;
        }
        .blocklink:hover {
            box-shadow: 0 0 20px rgba(2, 20, 177, 0.1);
            transform: translateY(-2px);
        }
        .link {
            flex: 1;
            text-align: left;
            margin-left: 20px;
        }
        .blocklink-center {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
        }
        .CB, .naufor {
            max-width: 100%;
            height: auto;
            min-width: 150px;
        }
        .CB {
            width: 40%;
        }
        .naufor {
            width: 35%;
            margin: 20px 0;
        }
        @media (max-width: 1150px) {
            .blocklink {
                flex-direction: column;
                align-items: center;
                width: calc(100%);
                min-width: 0;
                max-width: 800px;
            }
            .link {
                text-align: center;
                margin-left: 0;
                margin-top: 10px;
            }
            .CB {
                width: 80%;
                max-width: 250px;
            }
            .naufor {
                width: 75%;
                max-width: 230px;
            }
        }
        .invest-container {
            display: flex;
            overflow-x: auto;
            padding-top: 25px;
            user-select: none;
            cursor: grab;
            max-width: 1200px;
            scrollbar-width: none;
        }
        .invest-conteiner:active {
            cursor: grabbing;
        }
        .block-invest {
            position: relative;
            display: inline-block;
            flex: 0 0 auto;
            width: 245px;
            height: 270px; 
            box-shadow: 0 0 20px rgba(102, 102, 102, 0.16);
            margin: 7px;
            padding: 20px;
            border-radius: 13px;
            transition: 0.7s;
            background-size: cover;
            background-color: rgba(255, 255, 255, 0.897);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
        .block-invest:hover {
            transition: 0.5s;
            transform: translateY(-20px);
            box-shadow: 0 0 20px rgba(2, 19, 177, 0.1);
            .invest-title {
                color: rgb(75, 75, 75);
                transition: 0.5s;
                transform: translateY(-100px);
            }
            .foto {
                opacity: 0;
                transition: 0.5s;
            }
            .text {
                opacity: 1;
                transition: 0.5s;
            }
            .invest-for {
                display: none;
            }
            .invest-from {
                display: none;
            }
        }
        .invest-title {
            position: absolute;
            color: rgba(255, 255, 255, 0.808);
            z-index: 1;
            background-color: rgba(255, 255, 255, 0.185);
            width: 265px;
            height: 70px;
            backdrop-filter: blur(10px);
            padding: 10px;
            transition: 0.5s;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 14px;
        }
        .foto {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            transition: opacity 0.5s ease;
            z-index: 0;
            pointer-events: none;
        }
        .text {
            opacity: 0;
            color: rgb(70, 70, 70);
            margin-top: 80px;
        }
        .invest-for {
            color: rgba(255, 255, 255, 0.7);
            position: absolute;
            margin: 150px 10px 0 12px;
            padding-left: 7px;
            z-index: 1;
            line-height: 20px;
            text-align: left;
            border-left: 2px solid rgba(255, 255, 255, 0.7);
        }
        .invest-from {
            color: rgba(255, 255, 255, 0.7);
            position: absolute;
            top: 85px;
            margin-left: 170px;
            z-index: 1;
            font-weight: 500;
        }
        .event-menu-container {
            display: flex;
            overflow-x: auto;          
            cursor: grab;
            user-select: none;
            padding: 5px 0 5px 0;
            max-width: 1200px;
            scrollbar-width: none;
        }
        .event-menu-container:active {
            cursor: grabbing;
        }
        /* Ссылка-обёртка карточки новости не должна создавать свой бокс:
           иначе флекс-элементом становится сама ссылка, а .event-item теряет
           ширину из flex-basis и карточки наезжают друг на друга. */
        .event-menu-container > .all-link {
            display: contents;
        }
        .event-item {
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            margin: 7px; 
            box-shadow: 0 0 25px rgba(102, 102, 102, 0.075);
            transition: transform 0.5s;
            flex: 0 0 285px;
            height: 400px;
            position: relative;
            overflow: hidden;
            font-size: 14px;
        }
        /* .event-menu-container > .all-link {
            flex: 0 0 285px;
            margin: 7px;
        } */
        .event-item:hover {
            transform: scale(1.05); 
        }
        .event-date {
            color: rgb(85, 85, 85);
            padding: 10px 20px 0 20px;
            font-weight: 500;
            text-align: left;
        }
        .event-title {
            height: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px 20px 0 20px;
            font-weight: bold;
            color: #000f9f;
            text-align: left;
            font-size: 16px;
            line-height: 1.5;
        }
        .event-description {
            padding: 10px 20px 0 20px;
            color: #555;
            text-align: left;
        }
        .image-container {
            height: 50%;
            overflow: hidden;
            position: relative; 
        }
        .news {
            position: absolute;
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            width: 100%;
            pointer-events: none;
        }
        .team-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            margin: auto;
            max-width: 1210px;
        }
        .team-member {
            display: flex;
            align-items: flex-start;
            width: 50%;
        }
        .member-image {
            width: 50%;
            height: auto;
            margin: 7px;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .member-info {
            width: 50%;
            flex: 1;
            margin: 7px;
            line-height: 20px;
            z-index: 0;
            opacity: 0;
        }
        .info-right {
            text-align: right;
        }
        .member-name {
            font-size: 16px;
            color: #000f9f;
            font-weight: bold;
        }
        .member-position {
            color: #000f9f;
            font-size: 14px;
            font-weight: 600;
        }
        .member-details {
            list-style-type: none;
            padding: 0;
            color: rgb(92, 91, 110);
            font-size: 14px;
        }
        .member-details li {
            padding: 3px 0;
        }
        @media (min-width: 768px) and (max-width: 1870px) {
            .team-container {
                flex-direction: column;
            }
            .team-member.reverse {
                flex-direction: row;
            }
            .team-member:first-of-type {
                flex-direction: row;
            }
            .team-member {
                align-items: center;
                width: 100%;
            }
            .member-info {
                width: 100%;
                opacity: 1;
            }
            .member-image {
                opacity: 1;
            }
        }
        @media (min-width: 768px) and (max-width: 1200px) {
            .member-image {
                width: 35%;
            }
        }
        @media (min-width: 1200px) and (max-width: 1870px) {
            .member-image {
                width: 30%;
            }
        }
        @media (max-width: 768px) {
            .team-container {
                flex-direction: column;
            }
            .team-member {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .member-image {
                width: 300px;
                opacity: 1;
            }
            .member-info {
                width: 100%;
                opacity: 1;
            }
            .team-member:nth-of-type(2) {
                flex-direction: column-reverse;
                text-align: left;
            }
            .info-right {
                text-align: left;
            }
        }
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes slideInSides {
            0% {
                transform: translateX(-100%);
            }
            30% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(0);
            }
        }
        @keyframes slideInSidesRight {
            0% {
                transform: translateX(100%);
            }
            30% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(0);
            }
        }
        @media (min-width: 1870px) {
            .member-image.animate {
                animation: slideInSides 0.7s forwards;
                opacity: 1;
            }
            .animationRS.animate {
                animation: slideInSidesRight 0.7s forwards;
                opacity: 1;
            }
            .member-info.animate {
                animation: fadeInUp 2s forwards;
                opacity: 0;
            }
        }
        .history-title {
            display: block;
            background-color: #ffffff;
            box-shadow: 0 0 20px rgba(102, 102, 102, 0.1);
            border-radius: 10px;
            padding: 25px;
            margin: 7px;
            line-height: 1.5;
            font-size: 18px;
            color: #000f9f;
            text-align: center;
            width: 100%;
            height: auto;
            font-weight: 600;
            max-width: 1140px;
            position: relative;
            overflow: hidden;
        }
        .history-title::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(20, 47, 168, 0.075) 50%, rgba(255, 255, 255, 0));
            transform: rotateZ(-40deg);
            animation: shine 3s infinite linear;
        }
        @media (max-width: 1002px) {
            .history-title::before {
                background: none;
            }
        }
        @keyframes shine {
            0% {
                left: -150%;
            }
            50% {
                left: 100%;
            }
            100% {
                left: 150%;
            }
        }
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #ffffff;
        }
        ::-webkit-scrollbar-thumb {
            background: #ebebeb;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-button:end:increment {
            width: 30%;
        }
        ::-webkit-scrollbar-button:start:increment {
            width: 30%;
        }
        /* плавающая кнопка «Позвонить» (снизу справа) — дизайн из новой версии сайта */
        /* Когда открыто меню-бутерброд — прячем плавающую кнопку звонка,
           чтобы она не была поверх меню (z-index ненадёжен из-за контекста наложения). */
        .checkbox-none:checked ~ .call-fab { display: none; }
        .call-fab {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 490;   /* ниже меню-бутерброда (aside z-index:500), чтобы не перекрывать его */
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #000f9f;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 30px rgba(0,15,159,.45);
            transition: .25s;
            text-decoration: none;
        }
        .call-fab:hover {
            background: #000b73;
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 14px 38px rgba(0,15,159,.55);
        }
        .call-fab::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            animation: callPulse 2.4s ease-out infinite;
        }
        @keyframes callPulse {
            0% { box-shadow: 0 0 0 0 rgba(0,15,159,.45); }
            70%, 100% { box-shadow: 0 0 0 16px rgba(0,15,159,0); }
        }
        .call-fab-tip {
            position: absolute;
            right: calc(100% + 12px);
            background: #14161d;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 14px;
            border-radius: 8px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transform: translateX(6px);
            transition: .2s;
            box-shadow: 0 8px 24px rgba(9,13,48,.18);
        }
        .call-fab:hover .call-fab-tip {
            opacity: 1;
            transform: translateX(0);
        }
        @media (prefers-reduced-motion: reduce) {
            .call-fab::after { animation: none; }
        }
        @media (max-width: 680px) {
            .call-fab { width: 52px; height: 52px; right: 16px; bottom: 16px; }
        }
        .form-bottom {
            margin-bottom: 90px;
        }