/* 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: 9998; 
    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;
}


.content-demo{
    height: 200px;
}

/* Резервуємо місце під HubSpot Scheduler для уникнення CLS */
.meetings-iframe-container {
    min-height: 746.5px; /* Висота для мобільних пристроїв */
    width: 100%;
    display: block;
}

/* Для екранів ширше 768px (планшети та десктоп) */
@media (min-width: 768px) {
    .meetings-iframe-container {
        min-height: 721.5px; /* Висота для десктопа */
    }
}