/* ------------------------------------------------ Hypercon refresh blocks */

.hc-liquid-hero,
.hc-interactive-roadmap {
    position: relative;
    max-width: 100vw;
    overflow: hidden;
    color: var(--colorone);
}

.hc-liquid-hero *,
.hc-interactive-roadmap * {
    box-sizing: border-box;
}

/* ------------------------------------------------ HC liquid hero */

.hc-liquid-hero {
    padding: 115px 0 95px;
    isolation: isolate;
}

.hc-liquid-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.hc-liquid-hero__bg::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(1120px, 92vw);
    height: 640px;
    transform: translate(-50%, -50%) rotate(-8deg);
    background:
        linear-gradient(125deg, rgba(17, 60, 248, .48), rgba(68, 158, 255, .18) 36%, rgba(255, 255, 255, .06) 58%, rgba(17, 60, 248, .16)),
        radial-gradient(circle at 18% 28%, rgba(255, 255, 255, .2), transparent 28%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 38% 62% 46% 54% / 52% 42% 58% 48%;
    filter: blur(.2px);
    opacity: .55;
}

.hc-liquid-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
    opacity: .34;
}

.hc-liquid-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    align-items: center;
    gap: 58px;
}

.hc-liquid-hero__content {
    min-width: 0;
}

.hc-liquid-hero__eyebrow,
.hc-interactive-roadmap__eyebrow {
    margin: 0 0 24px;
    color: var(--ctatxt2);
    font-family: var(--font-paragraph, 'Zalando Sans SemiExpanded', sans-serif);
    font-size: 13px;
    line-height: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.hc-liquid-hero__title {
    margin: 0;
    color: var(--colorone);
    font-family: var(--font-heading, 'Zalando Sans Expanded', sans-serif);
    font-size: 78px;
    line-height: 82px;
    font-weight: 500;
    max-width: 980px;
}

.hc-liquid-hero__title strong,
.hc-liquid-hero__title b {
    color: var(--ctatxt2);
    font-weight: 600;
}

.hc-liquid-hero__title .hc-title-word {
    display: inline-block;
    will-change: transform, opacity;
}

.hc-liquid-hero__description {
    max-width: 680px;
    margin-top: 28px;
}

.hc-liquid-hero__description,
.hc-liquid-hero__description p {
    color: var(--newtext-bluegray);
    font-family: var(--font-paragraph, 'Zalando Sans SemiExpanded', sans-serif);
    font-size: 17px;
    line-height: 27px;
    font-weight: 400;
}

.hc-liquid-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 36px;
}

.hc-liquid-hero__primary {
    z-index: 1;
}

.hc-liquid-hero__secondary {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--new-linecolor);
    border-radius: 999px;
    color: var(--colorone);
    font-size: 14px;
    line-height: 14px;
    text-decoration: none;
    transition: border-color .2s, color .2s, transform .2s;
}

.hc-liquid-hero__secondary:hover {
    color: var(--ctatxt2);
    border-color: var(--ctatxt2);
    transform: translateY(-1px);
}

.hc-liquid-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.hc-liquid-hero__chips span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid var(--new-linecolor);
    border-radius: 999px;
    color: var(--newtext-bluegray);
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
}

.hc-liquid-hero__visual {
    position: relative;
    min-height: 590px;
    perspective: 1200px;
}

.hc-liquid-hero__device {
    position: absolute;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 12, 24, .82);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55);
    will-change: transform;
}

.hc-liquid-hero__device img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hc-liquid-hero__device--desktop {
    right: 0;
    top: 64px;
    width: min(560px, 100%);
    height: 380px;
    border-radius: 34px;
    transform: rotate(-3deg);
}

.hc-liquid-hero__device--mobile {
    left: 0;
    bottom: 18px;
    width: 210px;
    height: 370px;
    border-radius: 36px;
    padding: 12px;
    transform: rotate(10deg);
}

.hc-liquid-hero__browser {
    position: absolute;
    left: 18px;
    top: 16px;
    z-index: 2;
    display: flex;
    gap: 7px;
}

.hc-liquid-hero__browser span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
}

.hc-liquid-hero__mock-dashboard {
    height: 100%;
    padding: 56px 28px 28px;
    background:
        linear-gradient(140deg, rgba(17, 60, 248, .24), transparent 42%),
        #090b13;
}

.hc-liquid-hero__mock-line {
    width: 48%;
    height: 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}

.hc-liquid-hero__mock-line.is-wide {
    width: 72%;
    height: 18px;
    background: rgba(255, 255, 255, .22);
}

.hc-liquid-hero__mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 190px;
    margin-top: 42px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background: rgba(255, 255, 255, .045);
}

.hc-liquid-hero__mock-chart span {
    flex: 1;
    height: var(--h);
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(to top, var(--ctabg1), var(--ctatxt2));
}

.hc-liquid-hero__mobile-ui {
    height: 100%;
    border-radius: 26px;
    background: linear-gradient(180deg, #101429, #050407);
    padding: 24px 18px;
}

.hc-liquid-hero__mobile-ui span {
    display: block;
    width: 54%;
    height: 8px;
    margin-bottom: 64px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .26);
}

.hc-liquid-hero__mobile-ui strong,
.hc-liquid-hero__mobile-ui em {
    display: block;
    font-style: normal;
}

.hc-liquid-hero__mobile-ui strong {
    color: #fff;
    font-size: 18px;
    line-height: 21px;
}

.hc-liquid-hero__mobile-ui em {
    margin-top: 14px;
    color: var(--ctatxt2);
    font-size: 56px;
    line-height: 58px;
}

.hc-liquid-hero__mobile-ui div {
    width: 100%;
    height: 8px;
    margin-top: 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ctabg1) 76%, rgba(255, 255, 255, .15) 76%);
}

.hc-liquid-hero__signal {
    position: absolute;
    right: 42px;
    bottom: 34px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    box-shadow: 0 14px 45px rgba(0, 0, 0, .35);
}

.hc-liquid-hero__signal p {
    margin: 0;
    color: #fff;
    font-size: 12px;
    line-height: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.hc-liquid-hero__signal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #52ffbd;
    box-shadow: 0 0 0 6px rgba(82, 255, 189, .13);
}

.hc-liquid-hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 55px;
    border: 1px solid var(--new-linecolor);
    border-radius: 26px;
    overflow: hidden;
    background: var(--new-linecolor);
}

.hc-liquid-hero__metric {
    min-height: 105px;
    padding: 24px;
    background: rgba(5, 4, 7, .92);
}

.hc-liquid-hero__metric strong,
.hc-liquid-hero__metric span {
    display: block;
}

.hc-liquid-hero__metric strong {
    color: var(--colorone);
    font-size: 34px;
    line-height: 36px;
    font-weight: 500;
}

.hc-liquid-hero__metric span {
    margin-top: 10px;
    color: var(--newtext-bluegray);
    font-size: 13px;
    line-height: 17px;
}

/* ------------------------------------------------ HC interactive roadmap */

.hc-interactive-roadmap {
    padding: 105px 0 115px;
}

.hc-interactive-roadmap::before {
    content: "";
    position: absolute;
    inset: 52px 5% auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(68, 158, 255, .45), transparent);
}

.hc-interactive-roadmap__header {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr);
    gap: 60px;
    align-items: end;
    margin-bottom: 56px;
}

.hc-interactive-roadmap__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: -34px;
}

.hc-interactive-roadmap__title {
    margin: 0;
    color: var(--colorone);
    font-size: 58px;
    line-height: 66px;
    font-weight: 400;
}

.hc-interactive-roadmap__description,
.hc-interactive-roadmap__description p {
    color: var(--newtext-bluegray);
    font-family: var(--font-paragraph, 'Zalando Sans SemiExpanded', sans-serif);
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
}

.hc-interactive-roadmap__stage {
    position: relative;
}

.hc-interactive-roadmap__rail {
    position: absolute;
    left: 23px;
    top: 36px;
    bottom: 36px;
    width: 1px;
    background: var(--new-linecolor);
}

.hc-interactive-roadmap__rail span {
    display: block;
    width: 100%;
    height: var(--hc-roadmap-rail, 0%);
    background: linear-gradient(to bottom, var(--ctatxt2), var(--ctabg1));
}

.hc-interactive-roadmap__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-left: 54px;
}

.hc-interactive-roadmap__card {
    position: relative;
    min-height: 430px;
    padding: 22px;
    border: 1px solid var(--new-linecolor);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
        rgba(9, 11, 20, .86);
    overflow: hidden;
    transition: border-color .25s, transform .25s, background-color .25s;
    will-change: transform;
}

.hc-interactive-roadmap__card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(140deg, rgba(68, 158, 255, .35), transparent 34%, rgba(17, 60, 248, .22));
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.hc-interactive-roadmap__card.is-active,
.hc-interactive-roadmap__card:hover {
    border-color: rgba(68, 158, 255, .78);
    transform: translateY(-6px);
}

.hc-interactive-roadmap__card.is-active::before,
.hc-interactive-roadmap__card:hover::before {
    opacity: 1;
}

.hc-interactive-roadmap__card > * {
    position: relative;
    z-index: 1;
}

.hc-interactive-roadmap__card-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 42px;
}

.hc-interactive-roadmap__label {
    color: var(--ctatxt2);
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.hc-interactive-roadmap__index {
    color: rgba(255, 255, 255, .16);
    font-size: 34px;
    line-height: 34px;
    font-weight: 500;
}

.hc-interactive-roadmap__card h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}

.hc-interactive-roadmap__card p {
    margin: 18px 0 0;
    color: var(--newtext-bluegray);
    font-family: var(--font-paragraph, 'Zalando Sans SemiExpanded', sans-serif);
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
}

.hc-interactive-roadmap__visual {
    position: relative;
    height: 112px;
    margin-top: 34px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .045);
    overflow: hidden;
}

.hc-interactive-roadmap__visual--bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 18px;
}

.hc-interactive-roadmap__visual--bars span {
    flex: 1;
    height: var(--h);
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(to top, var(--ctabg1), var(--ctatxt2));
    transform-origin: bottom;
}

.hc-interactive-roadmap__visual--wave {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
}

.hc-interactive-roadmap__visual--wave span {
    flex: 1;
    height: 42px;
    border-radius: 999px;
    background: rgba(68, 158, 255, .25);
    transform: scaleY(.45);
}

.hc-interactive-roadmap__visual--wave span:nth-child(2),
.hc-interactive-roadmap__visual--wave span:nth-child(4) {
    transform: scaleY(.85);
    background: rgba(68, 158, 255, .5);
}

.hc-interactive-roadmap__visual--network span,
.hc-interactive-roadmap__visual--network i {
    position: absolute;
    display: block;
}

.hc-interactive-roadmap__visual--network span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ctatxt2);
    box-shadow: 0 0 18px rgba(68, 158, 255, .7);
}

.hc-interactive-roadmap__visual--network span:nth-child(1) { left: 18%; top: 28%; }
.hc-interactive-roadmap__visual--network span:nth-child(2) { left: 62%; top: 22%; }
.hc-interactive-roadmap__visual--network span:nth-child(3) { left: 34%; top: 70%; }
.hc-interactive-roadmap__visual--network span:nth-child(4) { left: 78%; top: 68%; }

.hc-interactive-roadmap__visual--network i {
    left: 20%;
    top: 50%;
    width: 62%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(68, 158, 255, .75), transparent);
    transform-origin: left center;
}

.hc-interactive-roadmap__visual--network i:nth-of-type(2) {
    transform: rotate(26deg);
}

.hc-interactive-roadmap__visual--network i:nth-of-type(3) {
    transform: rotate(-24deg);
}

.hc-interactive-roadmap__meter {
    height: 6px;
    margin-top: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .11);
    overflow: hidden;
}

.hc-interactive-roadmap__meter span {
    display: block;
    width: var(--hc-roadmap-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ctabg1), var(--ctatxt2));
    transform-origin: left center;
}

.hc-interactive-roadmap__metric {
    display: block;
    margin-top: 16px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

@media screen and (max-width: 1180px) {
    .hc-liquid-hero__layout {
        grid-template-columns: 1fr;
    }

    .hc-liquid-hero__visual {
        max-width: 720px;
        width: 100%;
        margin: 0 auto;
    }

    .hc-interactive-roadmap__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 800px) {
    .hc-liquid-hero {
        padding: 78px 0 70px;
    }

    .hc-liquid-hero__title {
        font-size: 48px;
        line-height: 54px;
    }

    .hc-liquid-hero__description,
    .hc-liquid-hero__description p {
        font-size: 16px;
        line-height: 25px;
    }

    .hc-liquid-hero__visual {
        min-height: 480px;
    }

    .hc-liquid-hero__device--desktop {
        top: 26px;
        width: 92%;
        height: 300px;
    }

    .hc-liquid-hero__device--mobile {
        width: 160px;
        height: 285px;
    }

    .hc-liquid-hero__signal {
        right: 12px;
        bottom: 22px;
    }

    .hc-liquid-hero__metrics {
        grid-template-columns: 1fr;
        margin-top: 35px;
    }

    .hc-interactive-roadmap {
        padding: 78px 0 82px;
    }

    .hc-interactive-roadmap__header {
        display: block;
        margin-bottom: 38px;
    }

    .hc-interactive-roadmap__eyebrow {
        margin-bottom: 18px;
    }

    .hc-interactive-roadmap__title {
        font-size: 40px;
        line-height: 48px;
    }

    .hc-interactive-roadmap__description {
        margin-top: 18px;
    }

    .hc-interactive-roadmap__cards {
        grid-template-columns: 1fr;
        padding-left: 30px;
    }

    .hc-interactive-roadmap__rail {
        left: 11px;
    }

    .hc-interactive-roadmap__card {
        min-height: 0;
        border-radius: 24px;
    }
}

@media screen and (max-width: 430px) {
    .hc-liquid-hero__title {
        font-size: 40px;
        line-height: 46px;
    }

    .hc-liquid-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hc-liquid-hero__actions .ctabtn,
    .hc-liquid-hero__secondary {
        justify-content: center;
        width: 100%;
        max-width: none;
    }

    .hc-liquid-hero__visual {
        min-height: 410px;
    }

    .hc-liquid-hero__device--desktop {
        height: 250px;
        border-radius: 26px;
    }

    .hc-liquid-hero__device--mobile {
        width: 132px;
        height: 238px;
        border-radius: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-liquid-hero__device,
    .hc-interactive-roadmap__card,
    .hc-liquid-hero__secondary {
        transition: none;
        will-change: auto;
    }

    .hc-liquid-hero__title .hc-title-word {
        will-change: auto;
    }
}

.editor-styles-wrapper .hc-liquid-hero__device,
.editor-styles-wrapper .hc-interactive-roadmap__card,
.editor-styles-wrapper .hc-liquid-hero__signal {
    transform: none !important;
}

.editor-styles-wrapper .hc-interactive-roadmap__meter span {
    transform: none !important;
}