@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/montserrat-cyrillic.v1.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/montserrat-latin.v1.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: HiteproIcons;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("assets/icons/icons.v1.woff2") format("woff2");
}

* { box-sizing: border-box; }
html { background: #050608; }
body { margin: 0; color: #fff; font: 400 18px/1.2 Montserrat, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.page {
    max-width: 600px;
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 84px;
    background: #050608 url("assets/images/background.v1.webp") center top / cover;
}

.hero, .hero img { display: block; width: 100%; }
.hero img {
    height: auto;
    aspect-ratio: 10 / 7;
    -webkit-mask-image: radial-gradient(90% 100% at 50% 0%, #000 60%, #0008 85%, transparent 100%);
    mask-image: radial-gradient(90% 100% at 50% 0%, #000 60%, #0008 85%, transparent 100%);
}
.content { padding: 0 14px; }
.socials {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 21px 0 14px;
}
.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
}
.icon {
    display: inline-block;
    font: normal 32px/1 HiteproIcons;
    text-transform: none;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}
.icon-vk::before { content: "\e008"; }
.icon-youtube::before { content: "\e000"; }
.icon-telegram::before { content: "\e007"; }
.icon-whatsapp::before { content: "\e001"; }
.icon-max::before { content: "\e9a8"; }
.icon-rutube::before { content: "\e949"; color: #f11341; }
.icon-rutube::after { content: "\e94a"; margin-left: -1em; color: #fff; }
.socials .icon-vk { color: #07f; font-size: 35px; }
.socials .icon-youtube { color: #db4141; }
.socials .icon-telegram { color: #61a8de; font-size: 30px; }
.socials .icon-rutube { margin-top: -6.4px; font-size: 25px; }
.links { list-style: none; margin: 0; padding: 0; }
.links li + li { margin-top: 14px; }
.links li.products-start { margin-top: 35px; }
.links li.contacts-start { margin-top: 42px; }
.link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px;
    border-radius: 40px;
    background: #3f59b49e;
    -webkit-backdrop-filter: blur(3px) saturate(120%);
    backdrop-filter: blur(3px) saturate(120%);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .2px;
}
.link .label { flex: 1; min-width: 0; padding: 6px; }
.link.with-icon { padding: 6px 58px 6px 10px; }
.link.with-icon img {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-right: 6px;
    border-radius: 50%;
    object-fit: cover;
}
.link.review { background: #9800ff9e; }
.link.keyway { background: #2429359e; }
.link.partner { background: #91a7ff9e; animation: pulse 2s linear infinite; }
.link.whatsapp { background: #55cd6c; }
.link.telegram { background: #61a8de; }
.link.max {
    background: radial-gradient(136.12% 140.74% at 99.77% 99.04%,
        #8d28c8 0%, #7c42fa 20%, #007aff 80%, #609ceb 100%);
}
.link.ozon { background: #f1117ee8; }
.link.messenger { padding: 10px 58px 10px 10px; }
.messenger .icon {
    flex: 0 1 42px;
    width: 42px;
    margin-right: 6px;
    font-size: 30px;
}
.messenger .icon-max { font-size: 25px; }

.video-section { margin-top: 42px; }
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
    overflow: hidden;
    background: #050608;
}
.video-launch, .video-mount, .video-frame .video-js {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.video-launch { display: block; }
.video-launch img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.7);
}
.video-launch::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #0009;
    transform: translate(-50%, -50%);
}
.video-launch::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(50% - 12px);
    top: calc(50% - 21px);
    border-left: 35px solid white;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
}
.video-launch:focus-visible { outline-offset: -5px; }
.video-feedback {
    padding: 12px;
    border-radius: 12px;
    background: #050608;
    font: 400 14px/1.5 Montserrat, sans-serif;
}
.video-feedback p { margin: 0 0 8px; }
.video-feedback a { text-decoration: underline; }
.video-feedback button {
    min-height: 44px;
    margin: 0 12px 0 0;
    padding: 8px 12px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: transparent;
    color: #fff;
}
.video-frame .vjs-big-play-button {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@keyframes pulse {
    0%, 20%, 100% { transform: scale(1); }
    10% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .link.partner { animation: none; }
}