.navbar {
    border-bottom-color: transparent !important
}

.q-hm {
    overflow-x: hidden;
    margin-bottom: -1px
}

.q-hm .hero {
    color: #fff
}

.q-hm .hero__shape {
    display: block;
    width: 100%;
    height: 8px;
    background-color: #4298b4;
    transform: rotate(180deg) scaleY(-1)
}

.q-hm .hero__shape path {
    fill: #fff
}

.q-hm .hero__text {
    padding: 40px 15px;
    background-color: #4298b4
}

.q-hm .hero__text h1 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    max-width: 1080px
}

.q-hm .hero__text p {
    margin-bottom: 20px;
    max-width: 640px
}

.q-hm .scene {
    margin: -1px
}

.q-hm .scene img {
    display: block;
    width: 100%;
    height: auto
}

.q-hm .metrics {
    margin-top: 40px;
    margin-bottom: 40px;
    display: grid;
    grid-gap: 20px
}

.q-hm .metrics.metrics--en {
    grid-template-columns: repeat(2, 1fr)
}

.q-hm .metrics .metric {
    text-align: center
}

.q-hm .metrics .metric .metric__value {
    margin: 0 0 5px
}

.q-hm .metrics .metric .metric__label {
    margin: 0
}

.q-hm .resource--centered,
.q-hm .resource--centered .resource__inner {
    flex-direction: column
}

.q-hm .resource--centered h2 {
    text-align: center
}

.q-hm .resource--shaded {
    background-color: #f6f6f7
}

.q-hm .resource--types,
.q-hm .resource--types .resource__shape {
    margin-top: 40px
}

.q-hm .resource--testimonials {
    position: relative;
    margin-top: 50px
}

.q-hm .resource--testimonials .resource__inner .section__title {
    margin-bottom: 40px
}

.q-hm .resource__scene {
    margin-bottom: 20px;
    margin-top: 40px;
    background-color: #f6f6f7;
    width: 263px;
    height: 170px
}

.q-hm .resource__scene--white {
    background-color: #fff
}

.q-hm .resource__scene--left {
    clip-path: polygon(5% 19%, 55% 0, 95% 19%, 100% 81%, 51% 100%, 0 81%)
}

.q-hm .resource__scene--right {
    clip-path: polygon(0 24%, 50% 0, 100% 17%, 95% 81%, 45% 100%, 5% 83%)
}

.q-hm .resource__scene img {
    width: 190px;
    height: auto
}

.q-hm .resource__tag {
    margin: 0 0 5px
}

.q-hm .resource .section__title {
    margin-bottom: 10px
}

.q-hm .resource__subtitle {
    margin-bottom: 20px
}

.q-hm .resource__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.q-hm .resource__actions .sp-link {
    margin-top: 20px
}

.q-hm .resource__shape {
    display: block;
    width: 100%;
    height: 20px;
    background-color: #fff
}

.q-hm .resource__shape.angular-1920-1 {
    transform: rotate(180deg);
    height: 11px
}

.q-hm .resource__shape.angular-1920-2.upper {
    transform: rotate(180deg) scaleX(-1)
}

.q-hm .resource__shape path {
    fill: #f6f6f7
}

.q-hm .testimonials__star {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: pulse infinite ease-in-out
}

.q-hm .testimonials__star--smaller {
    width: 10px;
    height: 10px
}

.q-hm .testimonials__star--1 {
    top: 30px;
    left: calc(50% - 46px);
    animation-delay: 1s;
    animation-duration: 2.9s
}

.q-hm .testimonials__star--1 path {
    fill: #8dc1d2
}

.q-hm .testimonials__star--2 {
    top: 0;
    left: calc(50% - 67px);
    animation-delay: .5s;
    animation-duration: 3.1s
}

.q-hm .testimonials__star--2 path {
    fill: #addac7
}

.q-hm .testimonials__star--3 {
    top: -10px;
    left: calc(50% - 40px);
    animation-duration: 2.75s
}

.q-hm .testimonials__star--3 path {
    fill: #e9be61
}

.q-hm .testimonials__star--4 {
    top: -3px;
    left: calc(50% + 55px);
    animation-delay: 1.2s;
    animation-duration: 2.6s
}

.q-hm .testimonials__star--4 path {
    fill: #b7a0c2
}

.q-hm .testimonials__star--5 {
    top: 6px;
    left: calc(50% + 31px);
    animation-delay: .6s;
    animation-duration: 2.7s
}

.q-hm .testimonials__star--5 path {
    fill: #f4deb0
}

.q-hm .testimonials__star--6 {
    top: 25px;
    left: calc(50% + 43px);
    animation-delay: .8s;
    animation-duration: 3s
}

.q-hm .testimonials__star--6 path {
    fill: #e9be61
}

@keyframes pulse {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.q-hm .testimonials__quote-wrapper {
    clip-path: polygon(10% 19%, 54% 0, 96% 17%, 100% 83%, 54% 100%, 0 74%);
    width: 30px;
    height: 28px;
    position: absolute;
    bottom: -1px;
    inset-inline-start: -8px;
    background-color: #fff
}

.q-hm .testimonials__quote {
    clip-path: polygon(10% 19%, 54% 0, 96% 17%, 100% 83%, 54% 100%, 0 74%);
    width: 24px;
    height: 22px
}

.q-hm .testimonials__quote--top {
    margin: -30px 0 40px;
    width: 50px;
    height: 45px;
    background-color: #e4ae3a
}

.q-hm .testimonials__quote--top svg {
    width: 20px;
    height: 20px
}

.q-hm .testimonials__slider.wrapper__slider[class] .slide__outer {
    padding-right: 0;
    padding-left: 10px;
    flex-basis: 240px
}

.q-hm .testimonials__carousel {
    width: 100%
}

.q-hm .testimonials__carousel .slider__slides {
    padding-inline: 0 10px;
    align-items: flex-start
}

.q-hm .testimonial {
    width: 100%;
    border: none
}

.q-hm .testimonial.card--blue .testimonials__quote {
    background-color: #4298b4
}

.q-hm .testimonial.card--blue .user__personality,
.q-hm .testimonial.card--blue .user__code {
    color: rgb(var(--rgb-blue))
}

.q-hm .testimonial.card--green .testimonials__quote {
    background-color: #33a474
}

.q-hm .testimonial.card--green .user__personality,
.q-hm .testimonial.card--green .user__code {
    color: rgb(var(--rgb-green))
}

.q-hm .testimonial.card--purple .testimonials__quote {
    background-color: #88619a
}

.q-hm .testimonial.card--purple .user__personality,
.q-hm .testimonial.card--purple .user__code {
    color: rgb(var(--rgb-purple))
}

.q-hm .testimonial.card--yellow .testimonials__quote {
    background-color: #e4ae3a
}

.q-hm .testimonial.card--yellow .user__personality,
.q-hm .testimonial.card--yellow .user__code {
    color: rgb(var(--rgb-yellow))
}

.q-hm .testimonial:nth-child(4n+1) .user__photo img {
    clip-path: polygon(56.25% 0%, 10% 25%, 0% 75%, 47.5% 100%, 100% 81.25%, 93.75% 18.75%)
}

.q-hm .testimonial:nth-child(4n+2) .user__photo img {
    clip-path: polygon(56.25% 0%, 10% 12.5%, 0% 68.75%, 35% 100%, 100% 81.25%, 93.75% 18.75%)
}

.q-hm .testimonial:nth-child(4n+3) .user__photo img {
    clip-path: polygon(43.75% 0%, 0% 25%, 6.25% 81.25%, 60% 100%, 100% 75%, 93.75% 12.5%)
}

.q-hm .testimonial:nth-child(4n+4) .user__photo img {
    clip-path: polygon(43.75% 0%, 0% 31.25%, 12.5% 87.5%, 60% 100%, 93.75% 87.5%, 100% 31.25%, 87.5% 12.5%)
}

.q-hm .testimonial .user {
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    gap: 20px
}

.q-hm .testimonial .user__photo {
    position: relative;
    flex-shrink: 0
}

.q-hm .cta {
    background-color: #33a474;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.q-hm .cta .image,
.q-hm .cta svg {
    display: block
}

.q-hm .cta .section__title,
.q-hm .cta .cta__scene {
    padding-left: 15px;
    padding-right: 15px
}

.q-hm .cta .section__title {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    color: #fff
}

.q-hm .cta .cta__scene {
    margin: -13px 15px 0;
    z-index: 1;
    width: 100%;
    max-width: 1800px;
    height: auto
}

.q-hm .cta .sp-button {
    margin-bottom: 40px
}

.q-hm .cta .cta__shape {
    width: 100%
}

.q-hm .cta .cta__shape--top {
    height: 22px;
    background-color: #f6f6f7;
    margin-bottom: -1px
}

.q-hm .cta .cta__shape--top path:nth-of-type(1) {
    fill: #2d9368
}

.q-hm .cta .cta__shape--top path:nth-of-type(2) {
    fill: #33a474
}

.q-hm .cta .cta__shape--bottom {
    background-color: #33a474;
    height: 15px
}

.q-hm .cta .cta__shape--bottom path {
    transform: rotate(180deg);
    transform-origin: center;
    fill: #fff
}

#main-app:not(.int) #footer.footer--vue {
    border-top: none
}

@media(min-width:460px) {
    .q-hm .resource__actions {
        flex-direction: row;
        align-items: center;
        gap: 20px
    }

    .q-hm .resource__actions .sp-link {
        margin-top: 0
    }

    .q-hm .testimonials__carousel .slider__slides {
        padding-inline-end: 20px
    }
}

@media(min-width:768px) {
    .q-hm .hero__shape {
        height: 16px
    }

    .q-hm .hero__text {
        padding: 60px 20px 40px;
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column
    }

    .q-hm .hero__text h1 {
        margin-bottom: 20px
    }

    .q-hm .hero__text p {
        margin-bottom: 30px
    }

    .q-hm .metrics {
        margin-bottom: 60px
    }

    .q-hm .metrics {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        row-gap: 40px
    }

    .q-hm .metrics.metrics--en {
        grid-template-columns: repeat(4, 1fr)
    }

    .q-hm .metrics .metric .metric__value {
        margin-bottom: 10px
    }

    .q-hm .resource--types,
    .q-hm .resource--types .resource__shape--top,
    .q-hm .resource--types .resource__shape--bottom {
        margin-top: 60px
    }

    .q-hm .resource--types .resource__inner {
        flex-direction: row-reverse
    }

    .q-hm .resource--testimonials {
        margin-top: 76px
    }

    .q-hm .resource--testimonials .resource__inner {
        margin-top: 0
    }

    .q-hm .resource__inner {
        margin-top: 60px
    }

    .q-hm .resource__inner {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .q-hm .resource__scene--left {
        padding-inline-start: 120px;
        margin-block: 0;
        margin-inline-start: -146px;
        margin-inline-end: 40px
    }

    .q-hm .resource__scene--right {
        padding-inline-end: 120px;
        margin-block: 0;
        margin-inline-start: 40px;
        margin-inline-end: -146px
    }

    .q-hm .resource__scene {
        margin-top: 9px;
        width: 480px;
        flex: 0 0 480px;
        height: 310px
    }

    .q-hm .resource__scene img {
        width: 280px
    }

    .q-hm .resource__subtitle {
        margin-bottom: 30px
    }

    .q-hm .resource__shape {
        height: 32px
    }

    .q-hm .resource__shape.angular-1920-1 {
        height: 24px
    }

    .q-hm .resource__shape.angular-1920-2.upper {
        height: 44px
    }

    .q-hm .testimonials__star {
        width: 16px;
        height: 16px
    }

    .q-hm .testimonials__star--smaller {
        width: 12px;
        height: 12px
    }

    .q-hm .testimonials__star--1 {
        top: 64px;
        left: calc(50% - 95px)
    }

    .q-hm .testimonials__star--2 {
        top: 4px;
        left: calc(50% - 125px)
    }

    .q-hm .testimonials__star--3 {
        top: -17px;
        left: calc(50% - 69px)
    }

    .q-hm .testimonials__star--4 {
        top: 0;
        left: calc(50% + 110px)
    }

    .q-hm .testimonials__star--5 {
        top: 16px;
        left: calc(50% + 60px)
    }

    .q-hm .testimonials__star--6 {
        top: 54px;
        left: calc(50% + 85px)
    }

    .q-hm .testimonials__quote--top {
        width: 100px;
        height: 90px;
        margin-top: -61px
    }

    .q-hm .testimonials__quote--top svg {
        width: 40px;
        height: 40px
    }

    .q-hm .testimonials__slider.wrapper__slider[class] .slide__outer {
        flex-basis: 260px;
        padding-left: 20px
    }

    .q-hm .testimonials__carousel .slider__slides {
        padding-inline: 0 20px
    }

    .q-hm .cta .section__title,
    .q-hm .cta .cta__scene {
        padding-left: 20px;
        padding-right: 20px
    }

    .q-hm .cta .section__title {
        margin-top: 25px
    }

    .q-hm .cta .section__title {
        margin-bottom: 30px
    }

    .q-hm .cta .cta__scene {
        margin-top: -30px
    }

    .q-hm .cta .sp-button {
        margin-bottom: 60px
    }

    .q-hm .cta .cta__shape--top {
        height: 48px
    }

    .q-hm .cta .cta__shape--bottom {
        height: 32px
    }
}

@media(min-width:992px) {
    .q-hm .hero__text {
        padding: 80px 20px 40px
    }
}

@media(min-width:1200px) {
    .q-hm .hero__shape {
        height: 40px
    }

    .q-hm .metrics {
        margin-top: 60px
    }

    .q-hm .metrics {
        margin-bottom: 80px
    }

    .q-hm .metrics {
        grid-template-columns: repeat(4, 1fr)
    }

    .q-hm .resource--types {
        margin-top: 20px
    }

    .q-hm .resource--testimonials,
    .q-hm .resource__inner {
        margin-top: 80px
    }

    .q-hm .resource__scene--left {
        padding: 80px 70px;
        margin-inline-start: 0;
        margin-inline-end: 100px
    }

    .q-hm .resource__scene--right {
        padding: 80px 70px;
        margin-inline-start: 100px;
        margin-inline-end: 0
    }

    .q-hm .resource__scene {
        width: 620px;
        flex: 0 0 620px;
        height: 400px
    }

    .q-hm .resource__scene img {
        width: 480px
    }

    .q-hm .resource__text {
        max-width: 530px
    }

    .q-hm .resource__subtitle {
        margin-bottom: 30px
    }

    .q-hm .resource__shape {
        height: 80px
    }

    .q-hm .resource__shape.angular-1920-1 {
        height: 60px
    }

    .q-hm .resource__shape.angular-1920-2.upper {
        height: 110px
    }

    .q-hm .testimonials__star--1 {
        top: 100px
    }

    .q-hm .testimonials__star--2 {
        top: 40px
    }

    .q-hm .testimonials__star--3 {
        top: 20px
    }

    .q-hm .testimonials__star--4 {
        top: 34px
    }

    .q-hm .testimonials__star--5 {
        top: 50px
    }

    .q-hm .testimonials__star--6 {
        top: 90px
    }

    .q-hm .testimonials__quote--top {
        margin-top: -90px
    }

    .q-hm .testimonials__slider.wrapper__slider[class] .slide__outer {
        flex-basis: 380px
    }

    .q-hm .testimonial .user__info .user__personality {
        display: flex;
        gap: 5px
    }

    .q-hm .cta .section__title,
    .q-hm .cta .cta__scene {
        padding-left: 0;
        padding-right: 0
    }

    .q-hm .cta .section__title {
        margin-top: 20px
    }

    .q-hm .cta .cta__scene {
        margin-top: -60px
    }

    .q-hm .cta .sp-button {
        margin-bottom: 40px
    }

    .q-hm .cta .cta__shape--top {
        height: 120px
    }

    .q-hm .cta .cta__shape--bottom {
        height: 80px
    }
}