.hvideo {
    margin: var(--section-margin) 0;
    overflow-x: clip;
}

.hvideo__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: 20px;
}

.hvideo__content {
}

.hvideo__badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 100px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 20px;
    font-size: 16px;
    width: fit-content;
}

.hvideo__badge-icon {
    flex: 0 0 auto;
}

.hvideo__title {
    margin-bottom: 20px;
    max-width: 12ch;
}

.hvideo__title-accent {
    position: relative;
    color: var(--color-accent);
    white-space: nowrap;
}

.hvideo__title-accent:after {
    transform: translateX(8px);
    content: '';
    position: absolute;
    left: 0px;
    right: 0;
    bottom: -0.16em;
    height: 0.4em;
    background: var(--color-accent);
    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTk2IiBoZWlnaHQ9IjE5IiB2aWV3Qm94PSIwIDAgMTk2IDE5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMiAxN0MzLjY3MjI2IDE2LjA3MzcgNS4zNDQ1MyAxNS4xNDc1IDkuNzM2NSAxMy4wNDY1QzE0LjEyODUgMTAuOTQ1NSAyMS4xODk1IDcuNjk3ODYgMjUuODE0OCA1Ljc3OTIxQzMyLjMzOCAzLjA3MzI0IDM1LjkxOTYgMi42ODE3OCAzOC4wMDc4IDIuNjMzNjhDNDEuNTM1NiAyLjU1MjQxIDMwLjc2NjYgMTEuNzY5NyAzMC42MDk4IDEzLjE1MzNDMzAuNTIyNSAxMy45MjQyIDMyLjc1NTYgMTMuNzIzMiAzOC42MDg0IDEyLjI3ODRDNDQuNDYxMiAxMC44MzM2IDU0LjQ2MzQgNy44NjcwNCA1OS41OTA2IDYuNjQxOTFDNjQuNzE3OCA1LjQxNjc4IDY0LjY2NyA2LjAyMyA2My40MzI0IDguMTY2MUM2Mi4xOTc5IDEwLjMwOTIgNTkuNzgxMiAxMy45NzA4IDU5Ljg0NjcgMTUuMDQ3N0M1OS45MTIzIDE2LjEyNDYgNjIuNTMzMyAxNC41MDU5IDY1Ljk0NTMgMTMuMDQyMkM2OS4zNTczIDExLjU3ODQgNzMuNDgwOCAxMC4zMTg3IDkzLjk5NTMgOC40MDkxQzExNC41MSA2LjQ5OTQ5IDE1MS4yOSAzLjk3ODE1IDE3MS4wNDggMi44MjE0MUMxOTAuODA1IDEuNjY0NjggMTkyLjQyNiAxLjk0ODk0IDE5NCAyLjM1NDEiIHN0cm9rZT0iI0ZGNjgwOSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+') no-repeat center / 100% 100%;
}

.hvideo__title-accent:before {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzUiIGhlaWdodD0iNzIiIHZpZXdCb3g9IjAgMCA3NSA3MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTU2LjM4NjUgMTEuMTM1NUM0OS42MjcgMTkuNjk5OSAzOC4yNDc4IDM1LjQ2MjggMzIuMjk3MiA0NC4wMTk1QzI2LjM0NjYgNTIuNTc2MyAyNi4xNjk0IDUzLjQ0OTMgMjYuMTAzMSA1NC4zNTU4IiBzdHJva2U9IiNGRjY4MDkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik0yMy4zMzkzIDIwLjk2NTlDMjAuNTEyOSAyNi45MjI2IDE2LjI3ODMgMzcuNzQ0MiAxNC4xODYgNDMuNTg4M0MxMi4wOTM3IDQ5LjQzMjQgMTIuMjcyIDQ5Ljk3MTIgMTIuNTY0MyA1MC41MTQ5IiBzdHJva2U9IiNGRjY4MDkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CjxwYXRoIGQ9Ik01OS4yMzcxIDQ1LjMxMzdDNTMuMDc2NSA0OC4wMDU0IDQyLjU2MzEgNTMuNDg3NiAzNy4wMzIxIDU2LjU3NjNDMzEuNTAxIDU5LjY2NDkgMzEuMjcwOSA2MC4xOTQgMzEuMTIzMyA2MC44MDE4IiBzdHJva2U9IiNGRjY4MDkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==');
    position: absolute;
    top: -32px;
    right: -44px;
}

.hvideo__snippet {
    max-width: 602px;
    margin-bottom: 40px;
}

.hvideo__snippet p {
    margin: 0;
}

.hvideo__actions {
    display: flex;
    align-items: center;
    gap: clamp(48px,6vw,110px);
    flex-wrap: wrap;
    position: relative;
}

.hvideo__demo {
    padding-right: 8px;
}

.hvideo__demo svg {
    width: 2em;
    height: 2em;
    flex: 0 0 32px;
}

.hvideo__demo-icon:after {
    content: '';
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--color-accent);
    margin-left: 2px;
}

.hvideo__demo:hover .hvideo__demo-icon {
    transform: scale(1.08);
}

.hvideo__label{
    font-family: var(--font-handwrite);
    font-weight: 500;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.15;
    color: var(--color-accent);
    max-width: 180px;
    position: relative;
    top: 80px;
}

.hvideo__label.aos-animate {
}

.hvideo__label:before {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI2IiBoZWlnaHQ9IjExMiIgdmlld0JveD0iMCAwIDEyNiAxMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMjMuNDM5IDc5LjIyOTFDMTEwLjk5MSA4MC45MDQ1IDk2LjIyODIgODMuOTA3IDgzLjk1OTkgODAuMzA0NEM2NC45MTUxIDc0LjY3NjkgNDEuOTIzOCA1MS44NTU3IDYwLjMyOSAzMi45MTY0QzcxLjE3NTMgMjEuODAwMyA5NC4zNzE5IDI5LjQxMDcgODYuMjM5OCA0Ni4zOTIyQzcxLjcyOTQgNzYuNDgxNSAyMy41MjM1IDU1Ljk1ODMgMTQuNzY3NSAyOS43NzE4IiBzdHJva2U9IiNGRjY4MDkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMxLjU3NzkgMzguMTUzM0MyNi43NDQ4IDM1LjY0NTEgMTkuODA1NCAyOS4yODE1IDE0Ljc0NTQgMjguMDk1NkMxMC41NjcgMjcuMDYxIDcuOTQ4NzIgNDIuNTgzNyA2LjE5NTAzIDQ2LjQ1NzMiIHN0cm9rZT0iI0ZGNjgwOSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=');
    position: absolute;
    left: -150px;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
}

.hvideo__label span {
    position: relative;
    display: inline-block;
}

.hvideo__label span:before {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE0IiBoZWlnaHQ9IjU5IiB2aWV3Qm94PSIwIDAgMTE0IDU5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTguMzE0NSA0MS40NjU5QzE4LjMxNDUgNDEuOTMxNyAyMS42MjczIDQzLjI2MDQgMzEuMzU1OSA0NC45NDY2QzM3LjU3NzQgNDYuMDI0OSA0Ny4xOTAzIDQ1LjYxNzIgNTQuNDM0MyA0NS40MjY3QzYxLjY3ODMgNDUuMjM2MyA2Ni40NjI0IDQ0Ljc4MDEgNzEuNzA0NyA0NC4wNTk5Qzc2Ljk0NyA0My4zMzk3IDgyLjUwMjUgNDIuMzY5NCA4Ny4wODU0IDQxLjIwMDhDOTUuNDM1MyAzOS4wNzE4IDEwMS43NTcgMzUuNTQ5MyAxMDYuOTY3IDMyLjQyOTZDMTEwLjQyOCAzMC4zNTc1IDExMS43NTMgMjguMDc4MSAxMTIuNjQ1IDI1LjYwNTRDMTEzLjU0OSAyMy4xMDMyIDExMS44ODMgMTkuNDk2OCAxMTAuMDMzIDE1LjgwNzNDMTA4Ljk4MyAxMy43MTMxIDEwNC44MzIgMTEuMTU4MyA5OS4wMzc1IDcuOTY3NThDOTUuODMxNCA2LjIwMjE4IDg2LjkwODMgNC41NjIzNCA3NC42Mzg2IDIuNDUzOTRDNjkuOTg5NiAxLjY1NTA3IDY4LjQ3MTcgMS41NDY2IDYyLjg1MTYgMS4zNDA0OEM1Ny4yMzE2IDEuMTM0MzYgNDcuNTM3MiAwLjg2OTY4OSA0MS40MTQ2IDAuOTAxMzc1QzMzLjAxMDUgMC45NDQ4NjggMjcuODYgMi4zMTUzOCAyMS45OTg4IDQuMDQzOTlDMTUuNDQ5OCA1Ljk3NTQ0IDExLjU5MTIgOC40Mjk4MSA4Ljc4OTE3IDEwLjM3NDZDNC40Mjk0NiAxMy40MDA1IDIuMjkzMjEgMTYuMjk0NiAxLjYxNDM5IDE3Ljk4MkMwLjcwOTk2NyAyMC4yMyAwLjc2MTE0MiAyMy4zOTI4IDEuMjIzOTcgMjcuMzYzMUMxLjc3MTU3IDMyLjA2MDUgNC45NTYxOSAzNi4yODIyIDguNzMwMDcgNDAuMDAxOUMxMC44NDY5IDQyLjA4ODQgMTQuNDQ5NSA0NC4xODg3IDE5LjY2NDEgNDYuNjIxM0MzMS4zMjc0IDUyLjA2MjEgNDAuNDUxNSA1NC42OTM5IDQ0LjQwNzYgNTUuNTNDNDYuOTg4MSA1Ni4wMDc3IDUwLjczMTcgNTYuNTk0MSA1My4wNTAyIDU2Ljg5NjJDNTUuMzY4NiA1Ny4xOTgyIDU2LjE0ODQgNTcuMTk4MiA1Ni45NTE3IDU3LjE5ODIiIHN0cm9rZT0iI0ZGNjgwOSIgc3Ryb2tlLXdpZHRoPSIxLjc5Njc5IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
    position: absolute;
    top: -4px;
    left: -12px;
}

.hvideo__window {
    position: relative;
}

.hvideo__window:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FF680933;
    border-radius: 20px;
    transform: rotate(4.6deg);
}

.hvideo__glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    opacity: .9;
    border-radius: 20px;
    transform: rotate(-6.7deg);
    z-index: 0;
}

.hvideo__bar {
    position: relative;
    z-index: 1;
}

.hvideo__bar:after {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCA0NCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzJfMyIgc3R5bGU9Im1hc2stdHlwZTpsdW1pbmFuY2UiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSI0NCIgaGVpZ2h0PSIxMyI+CjxwYXRoIGQ9Ik00My45NDM3IDBIMFYxMi4zOTQ0SDQzLjk0MzdWMFoiIGZpbGw9IndoaXRlIi8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF8yXzMpIj4KPHBhdGggZD0iTTUuOTA2MjUgMTEuMzc0QzguODc2OTQgMTEuMzc0IDExLjI4NTIgOC45NjU4MSAxMS4yODUyIDUuOTk1MTJDMTEuMjg1MiAzLjAyNDQzIDguODc2OTQgMC42MTYyMTEgNS45MDYyNSAwLjYxNjIxMUMyLjkzNTU2IDAuNjE2MjExIDAuNTI3MzQ0IDMuMDI0NDMgMC41MjczNDQgNS45OTUxMkMwLjUyNzM0NCA4Ljk2NTgxIDIuOTM1NTYgMTEuMzc0IDUuOTA2MjUgMTEuMzc0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTIyLjM3ODkgMTEuMzc0QzI1LjM0OTYgMTEuMzc0IDI3Ljc1NzggOC45NjU4MSAyNy43NTc4IDUuOTk1MTJDMjcuNzU3OCAzLjAyNDQzIDI1LjM0OTYgMC42MTYyMTEgMjIuMzc4OSAwLjYxNjIxMUMxOS40MDgyIDAuNjE2MjExIDE3IDMuMDI0NDMgMTcgNS45OTUxMkMxNyA4Ljk2NTgxIDE5LjQwODIgMTEuMzc0IDIyLjM3ODkgMTEuMzc0WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTM4LjE3OTcgMTEuMzc0QzQxLjE1MDQgMTEuMzc0IDQzLjU1ODYgOC45NjU4MSA0My41NTg2IDUuOTk1MTJDNDMuNTU4NiAzLjAyNDQzIDQxLjE1MDQgMC42MTYyMTEgMzguMTc5NyAwLjYxNjIxMUMzNS4yMDkgMC42MTYyMTEgMzIuODAwOCAzLjAyNDQzIDMyLjgwMDggNS45OTUxMkMzMi44MDA4IDguOTY1ODEgMzUuMjA5IDExLjM3NCAzOC4xNzk3IDExLjM3NFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+');
    position: absolute;
    top: 2px;
    left: 16px;
    z-index: 2;
}

.hvideo__video {
    display: block;
    aspect-ratio: 788 / 464;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid var(--color-dark);
    border-top-width: 24px;
    background: var(--color-dark);
    position: relative;
}

.hvideo__video[data-fancybox] {
    cursor: pointer;
}

.hvideo__video iframe,
.hvideo__video video,
.hvideo__poster {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 18px;
    object-fit: cover;
}

.hvideo__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    line-height: 0;
    transition: transform .3s;
}

.hvideo__play svg {
    display: block;
    width: clamp(48px, 6vw, 66px);
    height: auto;
}

.hvideo__play svg path:first-child {
    transition: fill .3s;
}

.hvideo__video:hover .hvideo__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.hvideo__video:hover .hvideo__play svg path:first-child {
    fill: #ff0000;
}

@media (width < 1280px) {
    .hvideo__stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 505px);
    }
}

@media (width < 992px) {
    .hvideo__stage {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        position: relative;
        padding-bottom: 64px;
    }

    .hvideo__title {
        max-width: none;
    }

    .hvideo__title-accent:before {
        transform: scale(0.5);
        top: -36px;
        right: -42px;
    }

    .hvideo__actions {
        position: static;
    }

    .hvideo__content {
        display: contents;
    }

    .hvideo__label {
        position: absolute;
        bottom: -16px;
        max-width: 100%;
        left: 50%;
        white-space: nowrap;
        margin-left: -100px;
    }


    .hvideo__label:before {
        left: auto;
        right: 0px;
        transform: translateX(105%) scale(-0.7, 0.7);
        top: -66px;
    }

    .hvideo__window {
        max-width: 640px;
        margin: 54px auto 0;
    }

    .hvideo__label span:before {
        transform: scale(0.75) translate(-8.5%, -18.5%);
    }
}

@media (width < 768px) {
    .hvideo__demo {
        width: 100%;
    }

    .hvideo__label {
        left: 33%;
        top: auto;
    }
}