/* ----------- Utilities ----------- */
.zwc-full-width {
    display: block;
    width: 100%;
}

.zw-product-header {
    background-color: #fff9ef;
}

/* ----------- Banner ----------- */
.zwc-banner-wrap {
    position: relative;
    z-index: 1;
    padding: clamp(60px, 10vw, 94px) 0 0;
    background: linear-gradient(0deg, #CBE8FF 3.33%, #FFFDF6 41.33%, #FFF9EF 100%);
}

.zwc-banner-wrap .content-wrap>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.zwc-banner-wrap .zwc-sec-title {
    position: relative;
    z-index: 1;
    max-width: 691px;
    margin: 0 auto;
    padding: clamp(50px, 14.17vw, 204px) 0;
    text-align: center;
}

.zwc-banner-wrap h1 {
    font-family: var(--zf-primary-boldserif);
    font-size: clamp(38px, 5.14vw, 80px);
    line-height: 82px;
    letter-spacing: -0.74px;
    color: #000;
    margin: 0;
}

.zwc-banner-wrap h2 {
    font-family: var(--zf-primary-boldserif);
    font-size: clamp(20px, 2.22vw, 32px);
    line-height: 1.16;
    text-transform: uppercase;
    color: #000;
    margin: clamp(10px, 1.11vw, 16px) 0 0;
}

.zwc-banner-wrap p {
    font-family: var(--zf-primary-regular);
    font-size: clamp(16px, 1.39vw, 20px);
    line-height: 1.6;
    letter-spacing: -0.4px;
    color: #000;
    max-width: 591px;
    margin: clamp(10px, 1.11vw, 16px) auto 0;
}

.zwc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fa0011;
    color: #fff;
    font-family: var(--zf-primary-semibold);
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    padding: clamp(16px, 1.39vw, 20px) clamp(28px, 2.78vw, 40px);
}

.zwc-banner-wrap .zwc-cta {
    margin-top: clamp(20px, 1.81vw, 26px);
}

.zwc-badge {
    position: absolute;
    z-index: 2;
    right: clamp(10px, 9.79vw, 141px);
    bottom: clamp(-98px, -6.81vw, -50px);
    width: clamp(120px, 14.58vw, 210px);
    line-height: 0;
}

.zwc-badge img {
    width: 100%;
    height: auto;
}

/* ----------- Accolades + Training ----------- */
.zwc-testi-wrap {
    padding: clamp(60px, 9.72vw, 140px) 0;
    background: linear-gradient(-24.08deg, #48380b 16.55%, #0b2a6d 46.98%, #0b2a6d 84.16%);
}

.zwc-testi-wrap h2 {
    font-family: var(--zf-primary-medium);
    font-size: clamp(32px, 4.17vw, 60px);
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0;
}

.zwc-accolades h2 {
    text-align: center;
    margin-bottom: clamp(24px, 2.64vw, 38px);
}

.zwc-testi-card {
    position: relative;
    border-radius: 10px;
    background: linear-gradient(144deg, #FAF9F6 13.79%, #D4E7FF 64.56%, #5993E9 94.9%);
    padding: clamp(30px, 4.51vw, 65px) clamp(20px, 6.94vw, 100px) clamp(30px, 4.13vw, 59px) clamp(20px, 5vw, 72px);
}

.zwc-testi-slide {
    display: flex;
    align-items: center;
    gap: clamp(24px, 3.96vw, 57px);
    padding-bottom: clamp(35px, 4.41vw, 64px);
}

.zwc-testi-slide .zwc-img-wrap {
    position: relative;
    flex: 0 0 clamp(180px, 22.36vw, 322px);
}

.zwc-testi-slide .zwc-img-wrap>img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

.zwc-quote {
    position: absolute;
    left: 55.59%;
    top: 80.12%;
    width: 44.41%;
    line-height: 0;
}

.zwc-quote img {
    width: 100%;
    height: auto;
}

.zwc-testi-content {
    flex: 1 1 auto;
    min-width: 0;
}

.zwc-testi-content>p {
    font-family: var(--zf-primary-medium);
    font-size: clamp(17px, 1.53vw, 22px);
    line-height: 1.64;
    letter-spacing: -0.44px;
    color: #000;
    max-width: 630px;
    margin: 0;
}

.zwc-testi-author {
    margin-top: clamp(20px, 2.57vw, 37px);
}

.zwc-testi-author p {
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: -0.32px;
    color: #000;
    margin: 0;
}

.zwc-testi-author p .zwc-full-width {
    font-family: var(--zf-primary-regular);
}

/* Testimonial slider navigation */
.zwc-navigation {
    position: absolute;
    right: clamp(20px, 6.94vw, 100px);
    bottom: clamp(60px, 8.96vw, 129px);
}

.zwc-navigation .zc-slider-arrow-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
    position: static;
    transform: none;
}

.zwc-navigation .zc-slider-arrow {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 41px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0;
    cursor: pointer;
    transform: none;
}

.zwc-navigation .zc-slider-arrow:hover {
    transform: none;
}

.zwc-navigation .zc-slider-next {
    border-left: 1px solid #000;
}

.zwc-navigation .zc-slider-arrow::before {
    content: "";
    display: block;
    width: 7px;
    height: 13px;
    background-color: #000;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath opacity='1' d='M7.1377 13.5254L0.750015 7.13771L7.1377 0.750029' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpath opacity='1' d='M7.1377 13.5254L0.750015 7.13771L7.1377 0.750029' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.zwc-navigation .zc-slider-next::before {
    transform: rotate(180deg);
}

.zwc-navigation .zc-slider-arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Get trained by the best */
.zwc-training {
    margin-top: clamp(60px, 6.94vw, 100px);
    scroll-margin-top: clamp(60px, 5.56vw, 80px);
}

.zwc-training>.zwc-sec-title {
    max-width: 612px;
    margin: 0 auto clamp(40px, 4.17vw, 60px);
    text-align: center;
}

.zwc-training>.zwc-sec-title p {
    font-family: var(--zf-primary-medium);
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    letter-spacing: -0.34px;
    color: #fff;
    max-width: 536px;
    margin: clamp(8px, 0.83vw, 12px) auto 0;
}

.zwc-training-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 14.58vw, 210px);
}

.zwc-training-grid::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: -45px;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.zwc-training-col>img {
    display: block;
    margin-bottom: clamp(16px, 1.39vw, 20px);
}

.zwc-training-col h3 {
    font-family: var(--zf-primary-medium);
    font-size: clamp(24px, 2.22vw, 32px);
    line-height: 1.31;
    letter-spacing: -0.64px;
    color: #fff;
    max-width: 244px;
    margin: 0;
}

.zwc-training-col .zwc-sec-title p {
    font-family: var(--zf-primary-medium);
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    letter-spacing: -0.34px;
    color: #fff;
    margin: clamp(8px, 0.83vw, 12px) 0 0;
}

.zwc-cta-box {
    display: inline-block;
    max-width: 425px;
    margin-top: clamp(16px, 1.53vw, 22px);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: clamp(20px, 2.01vw, 29px) clamp(20px, 1.88vw, 27px);
}

.zwc-cta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 11px;
}

.zwc-cta-list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 39px;
    padding: 0 14px 0 49px;
    border-radius: 6px;
    background: #fff;
    color: #000;
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.32px;
    text-decoration: none;
}


.zwc-cta-list a:hover {
    background: #f4f4f4;
    color: #000;
}

.zwc-icon {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: #ededed;
    background-repeat: no-repeat;
    background-position: center;
}

.zwc-icon-projects {
    background-image: url(/sites/zweb/images/producticon/projects.svg);
    background-size: 20px 17px;
}

.zwc-icon-sprints {
    background-image: url(/sites/zweb/images/producticon/sprints.svg);
    background-size: 19px 20px;
}

.zwc-icon-projects-plus {
    background-image: url(/sites/zweb/images/producticon/projects-plus.svg);
    background-size: 18px 21px;
}

.zwc-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--zf-primary-semibold);
    font-size: 16px;
    line-height: normal;
    letter-spacing: -0.32px;
    text-decoration: none;
}

.zwc-link-cta span:first-child {
    text-decoration: underline;
    text-underline-position: from-font;
}

.zwc-training-col .zwc-link-cta {
    margin-top: clamp(16px, 1.53vw, 22px);
    color: #fff;
}

/* ----------- Become the expert ----------- */
.zwc-expert-wrap {
    padding: clamp(60px, 9.72vw, 140px) 0;
    background: #fff;
}

.zwc-expert-wrap .content-wrap {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 18.75vw, 270px);
}

.zwc-expert-intro {
    flex: 0 1 513px;
}

.zwc-expert-intro h2 {
    font-family: var(--zf-primary-medium);
    font-size: clamp(32px, 4.17vw, 60px);
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: #000;
    white-space: nowrap;
    margin: 0;
}

.zwc-expert-intro .zwc-sec-title p {
    font-family: var(--zf-primary-medium);
    font-size: clamp(15px, 1.18vw, 17px);
    line-height: 1.65;
    letter-spacing: -0.34px;
    color: #282828;
    margin: clamp(10px, 1.11vw, 16px) 0 0;
}

.zwc-expert-intro .zwc-link-cta {
    margin-top: clamp(16px, 1.53vw, 22px);
    color: var(--zwc-link-clr);
}

.zwc-expert-steps {
    position: relative;
    flex: 0 0 405px;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 3.82vw, 55px);
}

.zwc-expert-steps::before {
    content: "";
    position: absolute;
    left: 0;
    top: -10px;
    bottom: -82px;
    border-left: 2px dashed #104be0;
}

/* Animated solid fill line */
.zwc-expert-steps::after {
    content: "";
    position: absolute;
    left: 0;
    top: -10px;
    width: 2px;
    height: 0;
    background: #104be0;
    transition: height 3s cubic-bezier(0.4, 0, 0.2, 1);
}

.zwc-expert-steps.zwc-in-view::after {
    height: calc(100% + 89px);
}

/* Step items */
.zwc-step {
    position: relative;
    padding-left: clamp(24px, 3.33vw, 48px);
}

/* Diamond bullet points */
.zwc-step-bullet {
    position: absolute;
    left: 1px;
    top: 7px;
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #104be0;
    transform: translateX(-50%) rotate(45deg);
    z-index: 2;
    transition: background-color 0.35s ease;
}

/* Staggered bullet fill on in-view */
.zwc-expert-steps.zwc-in-view .zwc-step:nth-child(1) .zwc-step-bullet {
    background: #104be0;
    transition-delay: 0.1s;
}

.zwc-expert-steps.zwc-in-view .zwc-step:nth-child(2) .zwc-step-bullet {
    background: #104be0;
    transition-delay: 0.9s;
}

.zwc-expert-steps.zwc-in-view .zwc-step:nth-child(3) .zwc-step-bullet {
    background: #104be0;
    transition-delay: 1.8s;
}

.zwc-expert-steps.zwc-in-view .zwc-step:nth-child(4) .zwc-step-bullet {
    background: #104be0;
    transition-delay: 2.7s;
}

.zwc-expert-steps p {
    font-family: var(--zf-primary-medium);
    font-size: clamp(18px, 1.67vw, 24px);
    line-height: 1.5;
    letter-spacing: -0.48px;
    color: #000;
    margin: 0;
}

/* ----------- Footer CTA ----------- */
.zwc-footer-wrap {
    background: #fff;
}

.zwc-footer-inner {
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #faf9f6 0%, #d4e7ff 62.02%, #96bdf4 89.19%, #5993e9 100%);
}

.zwc-footer-content {
    display: flex;
    align-items: flex-end;
    gap: clamp(30px, 12.15vw, 175px);
    max-width: 978px;
    margin-left: clamp(20px, 9.31vw, 134px);
    padding: clamp(50px, 7.43vw, 107px) 0;
}

.zwc-footer-content h2 {
    font-family: var(--zf-primary-medium);
    font-size: clamp(32px, 4.17vw, 60px);
    line-height: 1.1;
    letter-spacing: -1.2px;
    color: #0a0a0a;
    margin: 0;
}

.zwc-footer-content .zwc-cta {
    width: 100%;
    max-width: 210px;
}

/* ----------- Responsive ----------- */
@media (max-width: 1280px) {

    /* Become the expert */
    .zwc-expert-steps {
        flex: 0 1 405px;
    }
}

@media (max-width: 1024px) {

    /* Accolades */
    .zwc-testi-slide {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-bottom: 20px;
    }

    .zwc-testi-slide .zwc-img-wrap {
        flex: 0 0 auto;
        width: 240px;
    }

    .zwc-navigation {
        position: initial;
    }

    /* Become the expert */
    .zwc-expert-intro h2 {
        white-space: normal;
    }

    /* Get trained by the best */
    .zwc-training-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 50px;
    }

    .zwc-training-grid::before {
        display: none;
    }

    .zwc-training-col h3 {
        max-width: none;
    }

    .zwc-cta-box {
        display: block;
    }

    /* Become the expert */
    .zwc-expert-wrap .content-wrap {
        flex-direction: column;
        gap: 50px;
    }

    .zwc-expert-intro,
    .zwc-expert-steps {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .zwc-expert-steps::before {
        top: 0;
        bottom: 0;
    }

    .zwc-expert-steps::after {
        top: 0;
    }

    .zwc-expert-steps.zwc-in-view::after {
        height: 100%;
    }

    /* Footer CTA */
    .zwc-footer-content {
        margin-left: 0;
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 767px) {

    /* Banner */
    .zwc-banner-wrap h1,
    .zwc-banner-wrap h2 {
        letter-spacing: normal;
        line-height: normal;
    }

    .zwc-banner-wrap .zwc-sec-title {
        max-width: 80%;
    }

    .zwc-badge {
        right: 0;
    }

    /* Accolades */
    .zwc-testi-wrap h2,
    .zwc-testi-content>p,
    .zwc-testi-author p,
    .zwc-training>.zwc-sec-title p,
    .zwc-training-col h3,
    .zwc-training-col .zwc-sec-title p {
        letter-spacing: normal;
        line-height: normal;
    }

    .zwc-testi-content>p,
    .zwc-testi-author p,
    .zwc-training>.zwc-sec-title p,
    .zwc-training-col .zwc-sec-title p {
        line-height: 1.6;
    }

    .zwc-testi-slide .zwc-img-wrap {
        width: 180px;
    }

    /* Become the expert */
    .zwc-expert-intro h2,
    .zwc-expert-intro .zwc-sec-title p,
    .zwc-expert-steps p {
        letter-spacing: normal;
        line-height: normal;
    }

    .zwc-expert-intro .zwc-sec-title p,
    .zwc-expert-steps p {
        line-height: 1.5;
    }

    /* Footer CTA */
    .zwc-footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .zwc-footer-content h2 {
        letter-spacing: normal;
        line-height: normal;
    }
}

@media (max-width: 400px) {
    .zwc-banner-wrap .zwc-sec-title {
        padding: 0 24px 30px 24px;
        max-width: 100%;
    }

    .zwc-banner-wrap .content-wrap>img {
        display: none;
    }

    .zwc-badge {
        position: relative;
        right: auto;
        bottom: auto;
        margin: 0 auto;
        padding-bottom: 20px;
    }
}