/* Critical CSS */


        body {
            line-height: 1.5;
        }
        .hbspt-form  {
            min-height:532px;
        }

        .header-menu {
            padding: 15px 30px 0;
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 9999;
            color: #fff;
        }

        .header-menu-ml-dark {
            background: #fff;
            transition: color .2s ease, background-color .2s ease, transform .2s ease;
        }

        .header-menu-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .header-menu-left img { width: 130px; height: auto; }
        .header-menu-left a { display: flex; }

        .header-menu-logo-light { display: none; }

        .header-menu-right { display: flex; gap: 40px; }

        .header-menu-right-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }

        .header-menu-right-list li { list-style: none; position: relative; }

        .header-menu-right-list > li > a {
            padding: 30px 0;
            font-size: 16px;
            font-weight: 700;
            display: block;
            text-decoration: none;
            color: #202226;
        }

        /* ✅ underline без reflow: псевдоелемент завжди є, міняємо тільки scale */
        .header-menu-right-list > li::after {
            content: "";
            position: absolute; left: 0; bottom: 0;
            height: 2px; width: 100%;
            background-color: #202226;
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform .16s ease;
        }
        .header-menu-right-list > li:hover::after { transform: scaleX(1); }
        .header-menu-right-list > li.menu-item-has-children::after { display: none; }

        .header-menu-right-list .menu-item-has-children { position: relative; }

        .header-menu-right-list .menu-item-has-children > a::after {
            content: "";
            display: inline-block;
            width: 4.4px; height: 4.4px;
            margin-left: 10px;
            position: relative; top: -2px;
            border-top: 2px solid #202226; border-right: 2px solid #202226;
            transform: rotate(135deg);
            transition: transform .3s ease-in-out;
            pointer-events: none;
        }
        .header-menu-right-list .menu-item-has-children:hover > a::after { transform: rotate(315deg); }

        /* ✅ підменю без display:none на десктопі — тільки opacity/transform */
        .sub-menu{
            position: absolute;
            top: 97%; left: 0; z-index: 9;
            background-color: #fff; color: #202226;
            padding-left: 0; margin: 0; list-style: none;
            opacity: 0; transform: translateY(8px);
            pointer-events: none; visibility: hidden;
            transition: opacity .16s ease, transform .16s ease;
            will-change: opacity, transform;
        }
        .header-menu-right-list .menu-item-has-children:hover > .sub-menu{
            opacity: 1; transform: none;
            pointer-events: auto; visibility: visible;
        }

        .menu-item-has-children .sub-menu > li > a {
            display: block; text-decoration: none; color: #202226;
            padding: 10px 20px; white-space: nowrap; font-weight: 700;
        }
        .menu-item-has-children .sub-menu > li:first-child > a { padding: 20px 20px 10px; }
        .menu-item-has-children .sub-menu > li:last-child  > a { padding: 10px 20px 20px; }
        .menu-item-has-children .sub-menu > li:hover > a { color: #e63c2f; }

        @media (min-width:1051px){
            .header-menu-bar {
                background:none;
                border:none;
                outline:none;
                box-shadow:none;
                pointer-events:none; /* щоб взагалі не клікався */
                opacity:0;           /* і не видно */
            }
        }

        /* ===== мобільний ===== */
        @media (max-width: 1050px) {
            .header-menu {
                position: sticky;
                z-index: 9997;
                overflow: visible;
                top: 0;
                line-height: 2;
                padding: 0;
            }

            .header-menu-container { display: block; }

            .header-menu-mobile {
                justify-content: space-between;
                flex-direction: column;
                flex-wrap: wrap;
                padding: 20px;

                background-color: #fff;

                visibility: hidden;
                opacity: 0;
                transform: translateY(-10px);
                transition: opacity .2s ease, transform .2s ease;
                background:#fff;

                padding:20px;
                visibility:hidden;
                opacity:0;
                transform:translateY(-4px);
                transition:opacity .18s ease, transform .18s ease;
                will-change:opacity, transform;
                position:absolute;
                top:100%;
                left:0;
                right:0;
                z-index:9998;
                pointer-events:none;
                max-height:0;
                overflow:hidden;
            }
            /* ✅ відкриття тільки класом .active — без інлайн-стилів */
            .header-menu-inner.active .header-menu-mobile {
                visibility:visible;
                opacity:1;
                transform:none;
                position:relative;
                pointer-events:auto;
            }





            .header-menu-mobile > li:last-child { margin-bottom: 16px; }

            .header-menu-inner {
                background-color: #202226;
                transition: background-color 0.3s ease-in-out;
            }
            .header-menu-inner.active { background-color: #fff; }

            .header-menu-right-list { display: block; flex-direction: column; }
            .header-menu-right-list > li > a,
            .menu-item-has-children .sub-menu > li:first-child > a,
            .menu-item-has-children .sub-menu > li:last-child  > a,
            .menu-item-has-children .sub-menu > li > a { padding: 0; }

            .header-menu-right-list .menu-item-has-children > a::after { border: none; }

            .header-menu-left img { height: 38px; }

            .header-menu-bar {
                display: flex;
                flex-direction: column;
                gap: 6px;
                cursor: pointer;
                width: 32px;
                height: 30px;
                touch-action: manipulation;
                all: unset; /* прибирає дефолтний вигляд button */
                display: flex;
                flex-direction: column;
                gap: 6px;
                cursor: pointer;
                width: 32px;
                height: 30px;
                touch-action: manipulation;
            }
            .header-menu-bar .header-menu-bar-line:nth-child(2) { margin: 6px 0; }

            .header-menu-bar-line {
                background-color: #fff;
                transition: background-color 0.2s ease-in-out;
                width: 32px; height: 2px;
                background-color: #fff;
                transition: background-color 0.2s ease-in-out;
                width: 32px;
                height: 2px;
            }

            .header-menu-logo-dark { display: none; }
            .header-menu-logo-dark.active { display: block; }
            .header-menu-logo-light.active { display: block; }

            .header-menu-bar-close {
                position: relative;
                height: 3px; width: 32px;
                display: block;
                background-color: #202226;
                transition: background-color 0.3s ease-in-out;
            }
            .header-menu-bar-close:first-child { top: 15px; transform: rotate(45deg); }
            .header-menu-bar-close:nth-child(2) { opacity: 0; }
            .header-menu-bar-close:last-child  { top: -3px; transform: rotate(-45deg); }

            .header-menu-mobile li { list-style: none; }
            .header-menu-mobile li a {
                color: #202226; font-size: 18px; font-weight: 700; text-decoration: none;
            }

            /* ✅ на мобі підменю — статичний список (без анімацій) */
            .sub-menu{
                position: relative; opacity: 1; transform: none; visibility: visible;
                pointer-events: auto; padding-left: 1rem;
            }

            .header-menu-wrapper {
                display: flex; justify-content: space-between; align-items: center;
                width: 100%; padding: 15px;
            }

            .header-menu-right-list > li:hover:not(.menu-item-has-children)::after { display: none; }
            .menu-item-has-children .sub-menu > li:hover > a { color: #202226; }




            .header-menu-inner.active .header-menu-mobile {
                max-height:100vh; /* або під конкретну висоту */
            }





        }

        /* вимкнути ховери там, де їх фізично немає */
        @media (hover:none){
            .header-menu-right-list > li::after { display:none; }
            .header-menu-right-list .menu-item-has-children > a::after{ border:0; }
        }

        .header-menu-mobile {
            will-change: transform, opacity;
        }


        body.home .header-menu-left a{ pointer-events:none; cursor:default; }


/* Accessible utility: keeps text for AT, hides visually */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}