/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    background: #101014;
    color: #e9ecf2;
    font-family: 'Montserrat', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: rgba(201, 38, 242, .35); }
a { text-decoration: none; }
button { font-family: inherit; cursor: pointer; outline: none;}
button:focus, button:focus-visible { outline: none;}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr {
    position: sticky;
    top: 0;
    z-index: 60;
    backdrop-filter: blur(16px);
    background: rgba(13, 13, 16, .82);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.hdr__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    height: 78px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.hdr__logo { display: flex; align-items: center; flex-shrink: 0; }
.hdr__logo img { height: 62px; width: auto; display: block; }

.hdr__nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.menu-item { position: relative; }
a.menu-item__link {
    display: flex;
    align-items: center;
    padding: 8px 11px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #9aa3b2;
    transition: all .15s;
    text-decoration: none;
}
.menu-item__link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.menu-item__arrow { margin-left: 5px; opacity: .55; font-size: 9px; }

.menu-pop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-top: 10px;
    min-width: 248px;
    z-index: 80;
}
.menu-item:hover .menu-pop { display: block; }
.menu-pop__inner {
    background: #16131b;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    padding: 7px;
    box-shadow: 0 24px 54px -18px rgba(0, 0, 0, .75);
}
a.menu-pop__link {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #c4ccda;
    transition: all .12s;
}
a.menu-pop__link:hover { background: rgba(201, 38, 242, .14); color: #fff; text-decoration: none;}

.hdr__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #181019;
    flex-shrink: 0;
}
.hdr__search:focus-within { border-color: #c926f2; }
.hdr__search input {
    background: transparent;
    border: none;
    outline: none;
    color: #e9ecf2;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    width: 110px;
}

.hdr__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #181019;
    color: #e9ecf2;
    flex-shrink: 0;
}

.hdr__mobile {
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(13, 13, 16, .98);
    padding: 12px 24px 18px;
    display: none;
    flex-direction: column;
    gap: 1px;
    max-height: 72vh;
    overflow-y: auto;
}
.hdr__mobile.is-open { display: flex; }
.hdr__mobile a.mobile-parent {
    padding: 11px 6px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    color: #e9ecf2;
}
.hdr__mobile a.mobile-child {
    padding: 7px 6px 7px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #9aa3b2;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer.new { border-top: 1px solid rgba(255, 255, 255, .06); background: #0b0b0e; padding: 0}
.site-footer__inner { max-width: 1320px; margin: 0 auto; padding: 48px 28px 30px; }
.footer-menu { display: grid;grid-template-columns: 1fr 1fr 1fr;}
.foot-grid { display: grid; grid-template-columns: 1.5fr 3fr; gap: 40px; }
.foot-logo { height: 66px; width: auto; display: block; }
.foot-desc { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: #8b93a3; max-width: 300px; }

.foot-social { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.foot-social__link {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b2;
    background: rgba(255, 255, 255, .05);
    transition: all .15s;
}
.foot-social__link:hover { color: #c926f2; background: rgba(201, 38, 242, .14); }
.foot-social__link--text { font-weight: 700; font-size: 13px; }

.foot-col__title {
    font-size: 11px;
    letter-spacing: .16em;
    color: #6b7383;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.foot-col { display: flex; flex-direction: column; }
.foot-col a.foot-link { margin-bottom: 12px; }
a.foot-link { font-size: 13.5px; color: #aeb6c4; }
a.foot-link:hover { color: #aeb6c4; text-decoration: none; }
.footer-submenu{display: flex; flex-direction: column;}
.foot-bottom {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.foot-bottom__legal { font-size: 11.5px; color: #5c6575; line-height: 1.6; }
.foot-bottom__copy { font-size: 11.5px; color: #5c6575; }
.footer-links .social-buttons{
    display: flex;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.footer-links .social-button{
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: rgb(154, 163, 178);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    transition: 0.15s;
    margin: 0;
}
.footer-links .social-button--telegram::before,
.footer-links .social-button--youtube::before,
.footer-links .social-button--tiktok::before,
.footer-links .social-button--odnoklassniki::before,
.footer-links .social-button--vkontakte::before {
    content: "";
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    color: rgb(154, 163, 178);
    width: 18px;
    height: 18px;
}
.footer-links .social-button--telegram::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3B2'%3E%3Cpath d='M21.9 4.3l-3.1 14.8c-.2 1-.8 1.3-1.7.8l-4.7-3.5-2.3 2.2c-.2.2-.5.4-.9.4l.3-4.8 8.8-7.9c.4-.3-.1-.5-.6-.2L6.9 13.2l-4.7-1.5c-1-.3-1-1 .2-1.5l18.3-7c.8-.3 1.5.2 1.2 1.4z'/%3E%3C/svg%3E");
}
.footer-links .social-button--youtube::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3B2'%3E%3Cpath d='M23 7.5c-.3-1-1-1.7-2-2C19.2 5 12 5 12 5s-7.2 0-9 .5c-1 .3-1.7 1-2 2C.5 9.3.5 12 .5 12s0 2.7.5 4.5c.3 1 1 1.7 2 2 1.8.5 9 .5 9 .5s7.2 0 9-.5c1-.3 1.7-1 2-2 .5-1.8.5-4.5.5-4.5s0-2.7-.5-4.5zM9.8 15.3V8.7l6.2 3.3-6.2 3.3z'/%3E%3C/svg%3E");
}
.footer-links .social-button--tiktok::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA3B2'%3E%3Cpath d='M16.5 3c.4 2.3 1.9 4 4 4.3v2.8c-1.5 0-2.9-.5-4-1.3v6.2c0 3.3-2.7 5.9-6 5.9s-6-2.6-6-5.9 2.7-5.9 6-5.9c.3 0 .6 0 .9.1v3c-.3-.1-.6-.2-.9-.2-1.6 0-2.9 1.3-2.9 3s1.3 3 2.9 3 3-1.3 3-3V3h3.1z'/%3E%3C/svg%3E");
}
.footer-links .social-button--odnoklassniki::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239AA3B2' d='M4 2L3 6.5V20h4.5v3H11l3-3h4l5-5V2H4zm15.5 11L17 15.5h-4L10 18.5V15.5H6.5V4h13v9zM15.5 7.5h-2v5h2v-5zm-5.5 0H8v5h2v-5z'/%3E%3C/svg%3E") !important;
}
.footer-links .social-button--vkontakte::before {
    content: "VK";
    width: 36px;
    height: 36px;
    text-decoration: none;
    transition: 0.15s;
    font-family: Montserrat;
    font-weight: 700;
    font-size: 13px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 980px) {
    .hdr__nav { display: none; }
    .hdr__burger { display: flex; }
    .foot-grid .site-branding{padding: 0; justify-content: start;}
}
@media (max-width: 880px) {
    .foot-grid { grid-template-columns: 1fr; gap: 30px; }
    .footer-menu{grid-template-columns: 1fr 1fr;padding: 0;gap: 26px;}
}
@media (max-width: 640px) {
    .hdr__search { display: none; }
    .hdr__mobile{position: absolute;width: 100%;}
    .hdr__inner{justify-content: space-between;}
    .hdr__inner .site-branding{padding: 0;}
    .footer-menu{grid-template-columns: 1fr;}
    .foot-grid .site-branding img, .site-logotype img{max-width: 60px;}
}
@media (max-width: 560px) {
    .foot-grid { grid-template-columns: 1fr; gap: 26px; }
    .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}