.hb, .hb *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-feature-settings: 'liga' off, 'clig' off;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #FFF;
}

.hb{
    position: relative;
    background-color: #000;
    overflow: hidden;
}

.hb-container{
    position: relative;
    z-index: 2;
    width: min(88.889vw, 1422.2px);
    margin: 0 auto;
}

.hb-glow{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: min(100vw, 1600px);
    min-width: 100%;
    height: min(125vw, 2000px);
    transform: translateX(-50%);
    background: radial-gradient(
        min(69.444vw, 1111.1px) min(52.083vw, 833.3px) at min(13.889vw, 222.2px) min(60.764vw, 972.2px),
        rgba(2, 33, 44, 1) 0%,
        rgba(2, 33, 44, .95) 15%,
        rgba(2, 33, 44, .76) 35%,
        rgba(2, 33, 44, .44) 55%,
        rgba(2, 33, 44, .18) 75%,
        rgba(2, 33, 44, .04) 95%,
        rgba(2, 33, 44, 0) 100%
    );
    pointer-events: none;
}

.hb-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(27.778vw, 444.4px);
    height: min(4.444vw, 71.1px);
    border: min(0.069vw, 1.1px) solid #FFF;
    border-radius: min(0.556vw, 8.9px);
    background: #FFF;
    color: #000;
    font-family: inherit;
    font-size: min(1.389vw, 22.2px);
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: 300ms all;
}

.hb-btn:hover{
    color: #000 !important;
    border-color: #C4C4C4;
    background-color: #C4C4C4;
}

.hb-btn_outline{
    background: transparent;
    color: #FFF !important;
}

.hb-btn_outline:hover{
    color: #000 !important;
    border-color: #FFF;
    background-color: #FFF;
}

/* Index */
.hb-header{
    padding-top: min(2.222vw, 35.6px);
}

.hb-header-logo{
    display: block;
    width: min(6.944vw, 111.1px);
}

.hb-header-logo img,
.hb-index-logo{
    display: block;
    width: 100%;
    height: auto;
}

.hb-index{
    position: relative;
    padding-bottom: min(0.417vw, 6.7px);
}

.hb-index-bg{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 0;
    width: min(100vw, 1600px);
    min-width: 100%;
    height: auto;
    transform: translateX(-50%);
}

.hb-index-content{
    position: relative;
    z-index: 2;
    padding-top: min(25.417vw, 406.7px);
}

.hb-index-heading{
    font-size: min(2.639vw, 42.2px);
    font-weight: 450;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.hb-index-heading span{
    display: block;
}

.hb-index-logo{
    width: min(27.083vw, 433.3px);
    margin-top: min(0.556vw, 8.9px);
}

.hb-index-descr{
    margin-top: min(2.153vw, 34.4px);
    font-size: min(1.806vw, 28.9px);
    font-weight: 450;
    line-height: min(2.153vw, 34.4px);
    letter-spacing: -0.01em;
}

.hb-index-btn{
    margin-top: min(3.125vw, 50px);
}

.hb-index-prizes{
    position: absolute;
    top: min(15.833vw, 253.3px);
    left: min(52.778vw, 844.4px);
    z-index: 1;
    width: min(45.694vw, 731.1px);
    height: auto;
}

/* Prizes */
.hb-heading{
    font-size: min(3.333vw, 53.3px);
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-align: center;
}

.hb-prizes{
    position: relative;
    padding-top: min(7.708vw, 123.3px);
}

.hb-prizes-cards{
    display: grid;
    grid-template-columns: repeat(3, min(22.917vw, 366.7px));
    justify-content: center;
    gap: min(4.444vw, 71.1px);
    margin-top: min(4.653vw, 74.4px);
}

.hb-prizes-card{
    position: relative;
    display: flex;
    flex-direction: column;
    height: min(12.778vw, 204.4px);
    padding: min(1.111vw, 17.8px) min(1.389vw, 22.2px);
    border-radius: min(1.667vw, 26.7px);
    background: rgba(255, 255, 255, 0.08);
}

.hb-prizes-card::before{
    content: '';
    position: absolute;
    inset: 0;
    border: min(0.069vw, 1.1px) solid transparent;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 52%) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hb-prizes-card-title{
    position: relative;
    z-index: 1;
    margin-top: min(0.903vw, 14.4px);
    font-size: min(2.222vw, 35.6px);
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -0.01em;
}

.hb-prizes-card-place{
    position: relative;
    z-index: 1;
    margin-top: auto;
    margin-bottom: min(0.278vw, 4.4px);
    color: rgba(255, 255, 255, 0.6);
    font-size: min(1.667vw, 26.7px);
    font-weight: 450;
    line-height: min(2.014vw, 32.2px);
}

.hb-prizes-card-place span{
    display: block;
    color: #FFF;
    font-weight: 600;
}

.hb-prizes-card_inline .hb-prizes-card-title{
    margin-top: 0;
    font-size: min(1.944vw, 31.1px);
    line-height: min(2.153vw, 34.4px);
    letter-spacing: -0.02em;
}

.hb-prizes-card_inline .hb-prizes-card-place{
    margin-bottom: 0;
}

.hb-prizes-card_inline .hb-prizes-card-place span{
    display: inline;
}

.hb-prizes-card-img{
    position: absolute;
    z-index: 2;
    height: auto;
}

.hb-prizes-card_1 .hb-prizes-card-img{
    top: max(-1.736vw, -27.8px);
    left: min(12.986vw, 207.8px);
    width: min(9.931vw, 158.9px);
}

.hb-prizes-card_2 .hb-prizes-card-img{
    top: 0;
    left: min(12.778vw, 204.4px);
    width: min(12.083vw, 193.3px);
}

.hb-prizes-card_3 .hb-prizes-card-img{
    top: max(-0.694vw, -11.1px);
    left: min(9.583vw, 153.3px);
    width: min(16.389vw, 262.2px);
}

.hb-prizes-card_4 .hb-prizes-card-img{
    top: max(-0.764vw, -12.2px);
    left: min(13.611vw, 217.8px);
    width: min(10.069vw, 161.1px);
}

.hb-prizes-card_5 .hb-prizes-card-img{
    top: max(-1.875vw, -30px);
    left: min(10.278vw, 164.4px);
    width: min(14.792vw, 236.7px);
}

.hb-prizes-card_6 .hb-prizes-card-img{
    top: max(-2.569vw, -41.1px);
    left: min(17.222vw, 275.6px);
    width: min(10.278vw, 164.4px);
}

/* Steps */
.hb-prizes{
    padding-bottom: min(2.917vw, 46.7px);
}

.hb-steps{
    position: relative;
    padding-top: min(4.167vw, 66.7px);
    padding-bottom: min(6.875vw, 110px);
}

.hb-steps-glow{
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: min(100vw, 1600px);
    min-width: 100%;
    height: min(62.5vw, 1000px);
    transform: translateX(-50%);
    background: radial-gradient(
        min(83.333vw, 1333.3px) min(55.556vw, 888.9px) at min(69.444vw, 1111.1px) min(56.458vw, 903.3px),
        rgba(1, 25, 33, 1) 0%,
        rgba(1, 25, 33, 0.97) 15%,
        rgba(1, 25, 33, 0.92) 25%,
        rgba(1, 25, 33, 0.82) 35%,
        rgba(1, 25, 33, 0.62) 45%,
        rgba(1, 25, 33, 0.46) 55%,
        rgba(1, 25, 33, 0.3) 65%,
        rgba(1, 25, 33, 0.17) 75%,
        rgba(1, 25, 33, 0.09) 85%,
        rgba(1, 25, 33, 0.035) 95%,
        rgba(1, 25, 33, 0) 100%
    );
    pointer-events: none;
}

.hb-steps-subtitle{
    margin-top: min(1.528vw, 24.4px);
    font-size: min(1.667vw, 26.7px);
    font-weight: 450;
    line-height: 120%;
    text-align: center;
}

.hb-steps-tabs{
    position: relative;
    display: flex;
    width: max-content;
    margin: min(1.806vw, 28.9px) auto 0;
    padding: min(0.347vw, 5.6px);
    border: min(0.069vw, 1.1px) solid rgba(255, 255, 255, 0.25);
    border-radius: min(1.111vw, 17.8px);
}

.hb-steps-tabs-bg{
    position: absolute;
    top: min(0.347vw, 5.6px);
    left: 0;
    width: 0;
    height: min(4.167vw, 66.7px);
    border-radius: min(0.694vw, 11.1px);
    background: #22C3B1;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), width 400ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hb-steps-tabs_no-anim .hb-steps-tabs-bg,
.hb-steps-tabs_no-anim .hb-steps-tab{
    transition: none;
}

.hb-steps-tab{
    position: relative;
    z-index: 1;
    height: min(4.167vw, 66.7px);
    padding: 0 min(2.083vw, 33.3px);
    border: none;
    border-radius: min(0.694vw, 11.1px);
    background: transparent;
    color: #FFF;
    font-family: inherit;
    font-size: min(1.25vw, 20px);
    font-weight: 600;
    line-height: 120%;
    cursor: pointer;
    transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms;
}

.hb-steps-tab:not(.active):hover{
    background: rgba(255, 255, 255, 0.08);
}

.hb-steps-tab.active{
    color: #000;
    cursor: default;
}

.hb-steps-content{
    display: none;
}

.hb-steps-content.active{
    display: block;
}

.hb-steps-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(1.667vw, 26.7px);
    margin-top: min(4.514vw, 72.2px);
}

.hb-steps-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: min(1.736vw, 27.8px) min(1.667vw, 26.7px) min(1.597vw, 25.6px);
    border-radius: min(1.667vw, 26.7px);
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
}

.hb-steps-card-label{
    color: rgba(255, 255, 255, 0.7);
    font-size: min(1.25vw, 20px);
    font-weight: 450;
    line-height: 120%;
    letter-spacing: -0.01em;
}

.hb-steps-card-title{
    margin-top: min(1.389vw, 22.2px);
    font-size: min(1.806vw, 28.9px);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.015em;
}

.hb-steps-card-text{
    margin-top: min(0.556vw, 8.9px);
    font-size: min(1.25vw, 20px);
    font-weight: 450;
    line-height: min(1.597vw, 25.6px);
}

.hb-steps-card-btn{
    width: 100%;
    height: min(4.167vw, 66.7px);
    margin-top: min(1.667vw, 26.7px);
}

.hb-legal{
    margin-top: min(2.708vw, 43.3px);
    color: rgba(255, 255, 255, 0.85);
    font-size: min(0.903vw, 14.4px);
    font-weight: 450;
    line-height: min(1.25vw, 20px);
}

.hb-legal p{
    color: inherit;
}

.hb-legal p + p{
    margin-top: min(1.181vw, 18.9px);
}

.hb-legal a{
    color: inherit;
    text-decoration: underline;
}

.hb-legal a:hover{
    color: #FFF;
}

/* Steps: No subscription */
.hb-steps-cards_3{
    grid-template-columns: repeat(3, 1fr);
    gap: min(2.778vw, 44.4px);
}

.hb-steps-content_nosubs .hb-steps-cards{
    margin-top: min(5.625vw, 90px);
}

.hb-steps-content_nosubs .hb-steps-card{
    padding-bottom: min(1.875vw, 30px);
}

.hb-steps-content_nosubs.active ~ .hb-legal{
    margin-top: min(1.597vw, 25.6px);
}

/* Tariffs */
.hb-tariffs{
    margin-top: min(2.5vw, 40px);
    padding: min(2.569vw, 41.1px) min(2.5vw, 40px) min(2.361vw, 37.8px);
    border: min(0.069vw, 1.1px) solid rgba(255, 255, 255, 0.25);
    border-radius: min(1.667vw, 26.7px);
    overflow: hidden;
}

.hb-tariffs-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.hb-tariffs-title{
    font-size: min(2.5vw, 40px);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.015em;
}

.hb-tariffs-descr{
    margin-top: min(0.694vw, 11.1px);
    font-size: min(1.389vw, 22.2px);
    font-weight: 450;
    line-height: min(1.736vw, 27.8px);
}

.hb-tariffs-arrows{
    display: flex;
    margin-bottom: max(-0.069vw, -1.1px);
}

.hb-tariffs-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(2.778vw, 44.4px);
    height: min(2.222vw, 35.6px);
    border: min(0.069vw, 1.1px) solid rgba(255, 255, 255, 0.25);
    background: transparent;
    cursor: pointer;
    transition: 300ms all;
}

.hb-tariffs-arrow_prev{
    border-radius: min(0.417vw, 6.7px) 0 0 min(0.417vw, 6.7px);
}

.hb-tariffs-arrow_next{
    border-radius: 0 min(0.417vw, 6.7px) min(0.417vw, 6.7px) 0;
}

.hb-tariffs-arrow svg{
    width: min(1.111vw, 17.8px);
    height: min(1.111vw, 17.8px);
}

.hb-tariffs-arrow:hover{
    background: rgba(255, 255, 255, 0.08);
}

.hb-tariffs-arrow:disabled{
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.hb-tariffs-slider{
    margin: min(2.292vw, 36.7px) max(-2.5vw, -40px) 0 0;
    padding-bottom: min(4.583vw, 73.3px);
}

.hb-tariffs-slider .swiper-wrapper{
    align-items: stretch;
}

.hb-tariffs-slide{
    width: min(22.847vw, 365.6px);
    height: auto;
    padding-right: min(1.667vw, 26.7px);
}

.hb-tariffs-slide:last-child{
    width: min(23.681vw, 378.9px);
    padding-right: min(2.5vw, 40px);
}

.hb-tariff{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: min(27.986vw, 447.8px);
    padding: min(1.389vw, 22.2px);
    border-radius: min(0.556vw, 8.9px);
    background: #1A1A1A;
}

.hb-tariff_top{
    background: linear-gradient(216deg, rgb(25, 29, 28) 0%, rgb(19, 25, 25) 25%, rgb(15, 39, 37) 50%, rgb(15, 52, 48) 75%, rgb(16, 62, 57) 100%);
}

.hb-tariff_top::before{
    content: '';
    position: absolute;
    inset: 0;
    border: min(0.069vw, 1.1px) solid transparent;
    border-radius: inherit;
    background: linear-gradient(45deg, #22C3B1 57%, #FFF 100%) border-box;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.hb-tariff-badges{
    display: flex;
    gap: min(0.833vw, 13.3px);
}

.hb-tariff-badge{
    height: min(1.389vw, 22.2px);
    padding: 0 min(0.347vw, 5.6px);
    border-radius: min(0.278vw, 4.4px);
    background: #DE2B5C;
    font-size: min(0.972vw, 15.6px);
    font-weight: 600;
    line-height: min(1.389vw, 22.2px);
    text-transform: uppercase;
}

.hb-tariff-badge_white{
    font-size: min(0.903vw, 14.4px);
    background: #FFF;
    color: #000;
}

.hb-tariff-title{
    margin-top: min(0.694vw, 11.1px);
    font-size: min(1.944vw, 31.1px);
    font-weight: 500;
    line-height: 120%;
}

.hb-tariff-stats{
    display: flex;
    gap: min(1.736vw, 27.8px);
    margin-top: min(1.25vw, 20px);
}

.hb-tariff-stat{
    font-size: min(1.111vw, 17.8px);
    font-weight: 500;
    line-height: 120%;
}

.hb-tariff-stat span{
    display: block;
    margin-bottom: min(0.278vw, 4.4px);
    font-size: min(1.667vw, 26.7px);
    letter-spacing: -0.01em;
}

.hb-tariff-logo{
    display: block;
    width: min(18.403vw, 294.4px);
    height: auto;
    margin-top: min(1.319vw, 21.1px);
}

.hb-tariff-price{
    display: flex;
    align-items: baseline;
    margin-top: auto;
}

.hb-tariff-price-from{
    font-size: min(1.111vw, 17.8px);
    font-weight: 600;
    line-height: 120%;
}

.hb-tariff-price-num{
    margin-left: min(0.556vw, 8.9px);
    font-size: min(4.444vw, 71.1px);
    font-weight: 500;
    line-height: 100%;
}

.hb-tariff-price-per{
    align-self: flex-start;
    margin: min(0.833vw, 13.3px) 0 0 min(0.694vw, 11.1px);
    font-size: min(1.111vw, 17.8px);
    font-weight: 600;
    line-height: min(1.389vw, 22.2px);
}

.hb-tariff-price-per_note{
    margin-top: min(0.139vw, 2.2px);
}

.hb-tariff-price-per > span{
    display: block;
}

.hb-tariff-note{
    display: block;
    white-space: nowrap;
    color: #8C8C8C;
    font-size: min(1.111vw, 17.8px);
    font-weight: 450;
    line-height: min(1.389vw, 22.2px);
}

.hb-tariff-note sup{
    position: relative;
    top: min(0.139vw, 2.2px);
    font-size: min(0.556vw, 8.9px);
    font-weight: 600;
    line-height: 1;
    vertical-align: top;
    color: inherit;
}

.hb-tariffs-footnote sup{
    font-size: 65%;
    line-height: 0;
    vertical-align: super;
}

.hb-tariff-btn{
    width: 100%;
    height: min(3.333vw, 53.3px);
    margin-top: min(0.903vw, 14.4px);
    font-size: min(1.111vw, 17.8px);
}

.hb-tariffs-footnote{
    position: absolute;
    top: calc(100% + min(0.972vw, 15.6px));
    left: 0;
    padding-left: min(0.347vw, 5.6px);
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.5);
    font-size: min(0.764vw, 12.2px);
    font-weight: 500;
    line-height: min(0.903vw, 14.4px);
    letter-spacing: -0.01em;
}

.hb-tariffs-footnote sup{
    position: absolute;
    top: min(0.347vw, 5.6px);
    left: 0;
    color: inherit;
}

/* Pop-up */
.hb-popup{
    position: fixed;
    inset: 0;
    z-index: 10000;
    overscroll-behavior: contain;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: min(1.389vw, 22.2px);
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms, visibility 300ms;
}

.hb-popup.active{
    opacity: 1;
    visibility: visible;
}

.hb-popup-box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(72.222vw, 1155.6px);
    min-height: min(39.861vw, 637.8px);
    padding: min(5.556vw, 88.9px) min(2.778vw, 44.4px);
    border-radius: min(1.111vw, 17.8px);
    background: #141414;
    text-align: center;
    transform: scale(0.96);
    transition: transform 300ms;
}

.hb-popup.active .hb-popup-box{
    transform: scale(1);
}

.hb-popup-close{
    position: absolute;
    top: min(0.972vw, 15.6px);
    right: min(0.972vw, 15.6px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(2.639vw, 42.2px);
    height: min(2.639vw, 42.2px);
    border: none;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    transition: 300ms background-color;
}

.hb-popup-close:hover{
    background: #2A2A2A;
}

.hb-popup-close svg{
    width: min(1.667vw, 26.7px);
    height: min(1.667vw, 26.7px);
}

.hb-popup-title{
    font-size: min(3.333vw, 53.3px);
    font-weight: 500;
    line-height: 120%;
}

.hb-popup-text{
    margin-top: min(0.903vw, 14.4px);
    font-size: min(1.667vw, 26.7px);
    font-weight: 450;
    line-height: 120%;
}

.hb-popup-btn{
    width: min(21.389vw, 342.2px);
    height: min(3.333vw, 53.3px);
    margin-top: min(3.403vw, 54.4px);
    font-size: min(1.111vw, 17.8px);
}
