.zwc-page-wrap {
    --zwc-pad-y: clamp(60px,7vw,100px);
    --zwc-pad-x: clamp(20px,2vw,24px);
    --zwc-gap-section: clamp(40px,5vw,78px);
    --zwc-radius: clamp(10px,1vw,17px);
    --zwc-cta-red: #e42527;
    --zwc-dark: #000f19;
    --zwc-dark-2: #5a94b782;
    text-wrap-style: pretty;
    font-family: var(--primaryfont-regular);
    box-sizing: border-box;
    line-height: 1.5
}

h2,h3 {
    font-family: var(--primaryfont-semibold)
}

.zwc-banner-wrap {
    background-color: #000;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.7) 0,transparent 45%),radial-gradient(ellipse 55% 38% at 90% 100%,rgba(215,68,37,0.7),transparent 70%),radial-gradient(ellipse 65% 55% at 20% 100%,rgba(3,116,145,0.3),transparent 70%);
    color: #fff;
    padding: clamp(106px,10vw,121px) 0 0;
    text-align: center;
    overflow: hidden;
    margin-top: -68px
}

.zwc-banner-wrap .content-wrap {
    max-width: 1728px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

.zwc-banner-wrap .zwc-eyebrow {
    font-family: var(--primaryfont-semibold);
    font-size: clamp(24px,3vw,40px);
    line-height: 1.2;
    margin-bottom: clamp(16px,2vw,24px);
    letter-spacing: -0.02em
}

.zwc-banner-wrap h1 {
    font-family: var(--primaryfont-bold);
    font-size: clamp(32px,5.4vw,64px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 auto clamp(16px,2vw,24px);
    max-width: 800px
}

.zwc-banner-desc {
    font-size: clamp(16px,1.4vw,18px);
    line-height: 1.55;
    margin: 0 auto clamp(24px,3vw,36px);
    max-width: 680px;
    letter-spacing: -0.02em
}

.zwc-banner-wrap .cta-btn {
    text-transform: uppercase;
    margin-bottom: clamp(30px,2vw,40px)
}

.zwc-banner-visual {
    position: relative;
    max-width: 966px;
    margin: 0 10% 0 9%;
    height: 100%
}

.zwc-banner-visual>img {
    position: absolute
}

.zwc-banner-dialog {
    left: -6.5%;
    bottom: 16.5%;
    width: 34%
}

.zwc-banner-headset {
    top: -3%;
    right: -3.8%;
    width: 12.455%
}

.zwc-banner-menu {
    right: -6.5%;
    bottom: 10.6%;
    width: 13.5%
}

.zwc-banner-arrow {
    top: 28.5%;
    right: 2.4%;
    clip-path: inset(100% 0 0 0);
    width: 7.8%
}

.zwc-banner-gear {
    left: -13%;
    bottom: 10%;
    opacity: .8;
    width: 11.4%
}

.zwc-banner-clock {
    top: 33.47%;
    right: -12.4%;
    width: 7.8%;
    opacity: .8;
    animation: zwc-banner-float 3.5s ease-in-out infinite
}

.zwc-banner-dialog,.zwc-banner-menu {
    opacity: .5;
    transition: opacity .8s ease-out,transform .8s ease-out
}

.zwc-banner-dialog {
    transform: translateX(-60px)
}

.zwc-banner-menu {
    transform: translateX(60px)
}

.zwc-banner-headset {
    clip-path: circle(0 at center);
    transition: clip-path .9s ease-out
}

.zwc-banner-wrap .content-wrap.middle-animated .zwc-banner-dialog {
    opacity: 1;
    transform: none;
    transition-delay: .3s
}

.zwc-banner-wrap .content-wrap.middle-animated .zwc-banner-menu {
    opacity: 1;
    transform: none;
    transition-delay: .8s
}

.zwc-banner-wrap .content-wrap.middle-animated .zwc-banner-arrow {
    animation: zwc-banner-arrow-draw 1.4s ease-out 1.3s forwards
}

.zwc-banner-wrap .content-wrap.middle-animated .zwc-banner-headset {
    clip-path: circle(100% at center);
    transition-delay: 2.4s;
    animation: zwc-banner-float 4s ease-in-out infinite 3.3s
}

.zwc-banner-wrap .content-wrap.middle-animated .zwc-banner-gear {
    animation: zwc-banner-gear-spin 12s linear infinite
}

@keyframes zwc-banner-arrow-draw {
    from {
        clip-path: inset(100% 0 0 0)
    }

    to {
        clip-path: inset(0 0 0 0)
    }
}

@keyframes zwc-banner-gear-spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes zwc-banner-float {
    0%,100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }
}

.zwc-intro-wrap {
    padding: var(--zwc-pad-y) 0
}

.zwc-intro-wrap h2,.zwc-steps-wrap h2,.zwc-features-intro h2,.zwc-benefits-intro h2,.zwc-industries-intro h2,.zwc-bottom-cta-wrap h2 {
    font-size: clamp(28px,4.5vw,48px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0
}

.zwc-intro-wrap .content-wrap {
    max-width: 750px;
    text-align: center
}

.zwc-intro-wrap .zwc-intro-lead {
    flex: 0 0 auto;
    max-width: clamp(380px,45vw,577px);
    margin: 0 auto clamp(12px,1.2vw,20px)
}

.zwc-intro-copy {
    flex: 1 1 auto;
    font-size: clamp(16px,1.4vw,18px);
    line-height: 1.55;
    letter-spacing: -0.02em
}

.zwc-intro-copy p {
    margin: 0 0 clamp(12px,2vw,20px)
}

.zwc-intro-copy p:last-child {
    margin-bottom: 0
}

.zwc-steps-wrap .content-wrap {
    background-color: #f4f4f4;
    border-radius: 12px;
    padding: clamp(40px,6vw,92px) clamp(20px,6vw,106px)
}

.zwc-steps-wrap h2 {
    text-align: center;
    margin: 0 auto clamp(24px,5vw,45px);
    max-width: clamp(650px,3vw,730px)
}

.zwc-steps>li {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) minmax(0,1.1fr);
    align-items: center;
    gap: clamp(5px,3vw,8px);
    background-color: #fff;
    border-radius: 12px;
    padding: clamp(20px,3vw,36px) clamp(20px,5vw,75px) clamp(20px,3vw,36px) clamp(20px,5vw,75px);
    margin-bottom: 24px;
    max-width: 1000px;
    margin: 0 auto 24px
}

.zwc-steps>li:last-child {
    margin-bottom: 0
}

.zwc-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: linear-gradient(180deg,#000 0,#033d4f 100%);
    color: #f9fcfe;
    font-family: var(--primaryfont-semibold);
    font-size: clamp(16px,2.4vw,20px);
    line-height: 1;
    letter-spacing: -0.02em
}

.zwc-steps h3 {
    font-size: clamp(16px,2.4vw,20px);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 340px
}

.zwc-steps p {
    font-size: clamp(15px,1.4vw,18px);
    line-height: 1.55;
    letter-spacing: -0.02em;
    margin: 0
}

.zwc-feature-copy {
    max-width: 480px
}

.zwc-features-wrap {
    padding: clamp(80px,10vw,100px) 0 var(--zwc-pad-y)
}

.zwc-benefits-intro,.zwc-features-intro {
    text-align: center;
    margin: 0 auto clamp(30px,6vw,85px);
    max-width: 650px
}

.zwc-benefits-intro h2,.zwc-features-intro h2 {
    margin-bottom: 25px
}

.zwc-benefits-intro h2 {
    margin-top: 25px
}

.zwc-benefits-intro p {
    max-width: 545px;
    margin: 0 auto
}

.zwc-feature-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,0.8fr);
    align-items: center;
    gap: clamp(30px,8vw,120px);
    margin-bottom: clamp(50px,10vw,120px);
    width: 90%;
    margin: 0 auto clamp(50px,10vw,130px)
}

.zwc-feature-row:last-child {
    margin-bottom: 0
}

.zwc-feature-row-reverse {
    grid-template-columns: minmax(0,0.8fr) minmax(0,1fr)
}

.zwc-feature-row-reverse>:first-child {
    order: 2
}

.zwc-feature-row-reverse .zwc-feature-copy {
    margin-left: auto
}

.zwc-feature-row>img {
    display: block;
    width: 100%;
    height: auto
}

.zwc-feature-visual {
    position: relative
}

.zwc-feature-visual img {
    display: block;
    position: absolute
}

.zwc-routing-screen {
    opacity: .5;
    transform: translateY(60px);
    transition: opacity .8s ease-out,transform .8s ease-out
}

.zwc-routing-icon {
    opacity: .5;
    transform: translateX(-60px);
    transition: opacity .8s ease-out .3s,transform .8s ease-out .3s
}

.zwc-feature-row.zwe-om .zwc-routing-screen,.zwc-feature-row.zwe-om .zwc-routing-icon {
    opacity: 1;
    transform: none
}

.zwc-decline-screen {
    opacity: .5;
    transform: translateX(60px);
    transition: opacity .8s ease-out,transform .8s ease-out
}

.zwc-decline-reject {
    opacity: .5;
    transform: translateX(-60px);
    transition: opacity .8s ease-out .5s,transform .8s ease-out .5s
}

.zwc-decline-accept {
    opacity: .5;
    transform: translateX(60px);
    transition: opacity .8s ease-out .5s,transform .8s ease-out .5s
}

.zwc-feature-row.zwe-om .zwc-decline-screen,.zwc-feature-row.zwe-om .zwc-decline-reject,.zwc-feature-row.zwe-om .zwc-decline-accept {
    opacity: 1;
    transform: none
}

.zwc-qr-dept {
    opacity: .5;
    transform: translateY(60px);
    transition: opacity .8s ease-out,transform .8s ease-out
}

.zwc-qr-code {
    opacity: .5;
    transform: translateX(60px);
    transition: opacity .8s ease-out .3s,transform .8s ease-out .3s
}

.zwc-feature-row.zwe-om .zwc-qr-dept,.zwc-feature-row.zwe-om .zwc-qr-code {
    opacity: 1;
    transform: none
}

.zwc-reports-screen {
    opacity: .5;
    transform: translateY(60px);
    transition: opacity .8s ease-out,transform .8s ease-out
}

.zwc-reports-audit {
    opacity: .5;
    transform: translateX(60px);
    transition: opacity .8s ease-out .3s,transform .8s ease-out .3s
}

.zwc-feature-row.zwe-om .zwc-reports-screen,.zwc-feature-row.zwe-om .zwc-reports-audit {
    opacity: 1;
    transform: none
}

.zwc-routing-visual {
    aspect-ratio: 601.77 / 450
}

.zwc-routing-bg {
    left: 0;
    top: 27.98%;
    width: 100%
}

.zwc-routing-screen {
    left: 19.79%;
    top: 0;
    width: 71.61%
}

.zwc-routing-icon {
    left: 10.96%;
    top: 62.34%;
    width: 21.53%
}

.zwc-decline-visual {
    aspect-ratio: 600.73 / 450.18
}

.zwc-decline-bg {
    left: 0;
    top: 20.08%;
    width: 85.41%
}

.zwc-decline-screen {
    left: 23.11%;
    top: 32.33%;
    width: 76.89%
}

.zwc-decline-reject {
    left: 8.44%;
    top: 0;
    width: 39.93%
}

.zwc-decline-accept {
    left: 50.69%;
    top: 0;
    width: 39.93%
}

.zwc-qr-visual {
    aspect-ratio: 601.77 / 448.36
}

.zwc-qr-bg {
    left: 0;
    top: 0;
    width: 86.15%
}

.zwc-qr-dept {
    left: 9.44%;
    top: 33.82%;
    width: 69.57%
}

.zwc-qr-code {
    left: 59.03%;
    top: 0;
    width: 40.97%
}

.zwc-reports-visual {
    aspect-ratio: 601.77 / 475.43
}

.zwc-reports-bg {
    left: 0;
    top: 4.85%;
    width: 83.82%
}

.zwc-reports-screen {
    left: 8.67%;
    top: 25.38%;
    width: 85.89%
}

.zwc-reports-audit {
    left: 78.67%;
    top: 4.89%;
    width: 21.32%
}

.zwc-feature-copy h3 {
    font-size: clamp(24px,3vw,32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(16px,2vw,22px)
}

.zwc-feature-copy p {
    font-size: clamp(15px,1.3vw,16px);
    line-height: 1.6;
    letter-spacing: -0.02em;
    margin: 0
}

.zwc-benefits-wrap {
    padding: 0 0 var(--zwc-pad-y)
}

.zwc-benefit-cards {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: clamp(40px,5vw,62px) clamp(40px,6vw,100px);
    width: 80%;
    margin: 0 auto;
}

.zwc-benefit-cards>li::before {
    --icon-scale: 0.7;
    content: "";
    display: block;
    width: calc(66px * var(--icon-scale));
    height: calc(66px * var(--icon-scale));
    background-image: url(/sites/zweb/images/lens/ss-portal/icon.png);
    background-repeat: no-repeat;
    background-size: calc(826px * var(--icon-scale)) calc(88px * var(--icon-scale));
    margin-bottom: clamp(15px, 2vw, 20px);
}

.zwc-benefit-cost::before {
    background-position: calc(-540px * var(--icon-scale)) calc(-11px * var(--icon-scale))
}

.zwc-benefit-faster::before {
    background-position: calc(-612px * var(--icon-scale)) calc(-11px * var(--icon-scale))
}

.zwc-benefit-productivity::before {
    background-position: calc(-684px * var(--icon-scale)) calc(-12px * var(--icon-scale))
}

.zwc-benefit-experience::before {
    background-position: calc(-756px * var(--icon-scale)) calc(-12px * var(--icon-scale))
}

.zwc-benefit-cards h3 {
    font-size: clamp(24px,3.2vw,32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(14px,1.3vw,18px)
}

.zwc-benefit-cards p {
    font-size: clamp(15px,1.3vw,16px);
    line-height: 1.625;
    letter-spacing: -0.02em;
    margin: 0;
}

.zwc-industries-wrap {
    background-color: var(--zwc-dark);
    background-image: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(3, 74, 116, 0.35) 0%, transparent 70%);
    color: #fff;
    padding: clamp(60px,7vw,130px) var(--zwc-pad-x);
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

.zwc-industries-intro {
    display: flex;
    justify-content: space-between;
    gap: 0 clamp(40px,10vw,100px);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: clamp(40px,7vw,55px)
}

.zwc-industries-intro h2 {
    max-width: 791px;
    flex: 1 1 60%
}

.zwc-industries-intro p {
    max-width: 830px;
    font-size: clamp(16px,1.4vw,18px);
    letter-spacing: -0.02em;
    margin-top: clamp(10px,3vw,20px);
    flex-basis: 100%
}

.zwc-industry-nav {
    display: flex;
    gap: 10px;
}

.zwc-industry-nav .slick-prev,.zwc-industry-nav .slick-next {
    position: static;
    width: clamp(48px,5vw,58px);
    height: clamp(48px,5vw,58px);
    border-radius: 50%;
    border: 1px solid #4d8fb7cc;
    background: url('/sites/zweb/images/lens/ss-portal/zwc-arrow.svg') center / 20px 12px no-repeat;
    cursor: pointer;
    padding: 0;
    transform: none
}

.zwc-industry-nav .slick-prev {
    transform: scaleX(-1)
}

.zwc-industry-nav .slick-prev::before,.zwc-industry-nav .slick-next::before,.slick-prev::after,.slick-next::after {
    display: none
}

.zwc-industry-nav .slick-disabled {
    opacity: .4;
    cursor: default
}

.zwc-industry-slider .slick-list {
    overflow: visible;
    margin: 0 clamp(-21px,-1.5vw,-10px)
}

.zwc-industry-slider .slick-track {
    display: flex
}

.zwc-industry-slide {
    margin: 0 clamp(10px, 1.5vw, 15px);
    background-color: var(--zwc-dark);
    border: 1px solid var(--zwc-dark-2);
    border-radius: var(--zwc-radius);
    padding: clamp(20px, 3.23vw, 50px);
    height: auto;
}

.zwc-industry-slide::before {
    --icon-scale: 1;
    content: "";
    display: block;
    width: calc(66px * var(--icon-scale));
    height: calc(66px * var(--icon-scale));
    background-image: url('/sites/zweb/images/lens/ss-portal/icon.png');
    background-repeat: no-repeat;
    background-size: calc(631px * var(--icon-scale)) calc(71px * var(--icon-scale));
    margin-bottom: clamp(20px,2.5vw,28px)
}

.zwc-industry-manufacturing::before {
    background-position: calc(-4px * var(--icon-scale)) calc(-3px * var(--icon-scale))
}

.zwc-industry-healthcare::before {
    background-position: calc(-75px * var(--icon-scale)) calc(-3px * var(--icon-scale))
}

.zwc-industry-retail::before {
    background-position: calc(-146px * var(--icon-scale)) calc(-2px * var(--icon-scale))
}

.zwc-industry-construction::before {
    background-position: calc(-215px * var(--icon-scale)) calc(-3px * var(--icon-scale))
}

.zwc-industry-service::before {
    background-position: calc(-283px * var(--icon-scale)) calc(-2px * var(--icon-scale));
    width: calc(57px * var(--icon-scale))
}

.zwc-industry-insurance::before {
    background-position: calc(-341px * var(--icon-scale)) calc(-2px * var(--icon-scale))
}

.zwc-industry-slide h3 {
    font-size: clamp(28px,3vw,32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 clamp(16px,2vw,24px)
}

.zwc-industry-slide p {
    font-size: clamp(15px,1.3vw,16px);
    line-height: 1.6;
    letter-spacing: -0.02em;
    margin: 0
}

.zwc-industry-slider .slick-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: clamp(40px,5vw,60px) auto 0;
    padding: 12px 20px;
    list-style: none;
    border: 1px solid var(--zwc-dark-2);
    border-radius: 50px;
    width: fit-content
}

.zwc-industry-slider .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0;
    background: #1a577d;
    border: 0
}

.zwc-industry-slider .slick-dots li.slick-active {
    width: 36px
}

.zwc-industry-slider .slick-dots li button {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 0;
    background-color: #5a94b7;
    opacity: .4;
    cursor: pointer;
    padding: 0;
    font-size: 0
}

.zwc-banner-screen img {
    width: 91.6%;
    width: 100%;
    vertical-align: bottom
}

.zwc-industry-slider .slick-dots li button::before {
    display: none
}

.zwc-industry-slider .slick-dots li.slick-active button {
    opacity: 1
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
    z-index: 1;
}

.zwc-bottom-cta-wrap {
    padding: clamp(60px,7vw,100px) 0;
    text-align: center
}

.zwc-bottom-cta-wrap h2 {
    max-width: 1075px;
    margin: 0 auto clamp(16px,2.6vw,20px)
}

.zwc-bottom-cta-wrap h2 span {
    display: block
}

.zwc-bottom-cta-wrap p {
    font-size: clamp(15px,1.3vw,16px);
    line-height: 1.6;
    letter-spacing: -0.02em;
    max-width: 613px;
    margin: 0 auto clamp(22px,3vw,30px)
}

.zwc-bottom-cta-wrap .cta-btn {
    text-transform: uppercase
}

.zwc-industries-wrap .content-wrap::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 15%;
    background: #074a5c;
    filter: blur(150px);
    bottom: 0;
    right: -49%;
}
.zwc-industries-wrap .content-wrap::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 15%;
    filter: blur(110px);
    background: #58332B;
    bottom: 0;
    left: -49%;
}

@media(max-width: 1199px) {
    .zwc-feature-row {
        width:100%;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr)
    }

    .zwc-feature-row-reverse {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr)
    }

    .zwc-feature-row-reverse .zwc-feature-copy {
        max-width: 100%
    }
}

@media(max-width: 991px) {
    .zwc-intro-wrap .content-wrap,.zwc-features-intro,.zwc-industries-intro {
        flex-direction:column;
        gap: 0 10px
    }

    .zwc-features-intro h2,.zwc-benefits-intro h2 {
        margin-bottom: 16px
    }

    .zwc-steps>li {
        grid-template-columns: 48px minmax(0,1fr);
        grid-template-areas: "num title" "desc desc"
    }

    .zwc-steps>li>.zwc-step-num {
        grid-area: num
    }

    .zwc-steps>li>h3 {
        grid-area: title;
        max-width: 100%
    }

    .zwc-steps>li>p {
        grid-area: desc
    }

    .zwc-benefit-cards>li::before,.zwc-industry-slide::before {
        --icon-scale: .78
    }

    .zwc-page-wrap .content-wrap {
        max-width: 700px
    }

    .zwc-intro-wrap .zwc-intro-lead {
        max-width: 100%
    }
    .zwc-benefit-cards {
        width: 100%;
    }
    .zwc-industry-nav {
        display: none;
    }
    .zwc-industries-intro h2, .zwc-industries-intro p {
        text-align: center;
    } 
}

@media(max-width: 767px) {
    .zwc-banner-wrap h1 {
        max-width:100%
    }

    .zwc-banner-visual {
        margin-top: clamp(15px,2vw,25px)
    }

    .zwc-banner-wrap .cta-btn {
        margin-bottom: 12px
    }

    .zwc-page-wrap .content-wrap {
        max-width: 500px
    }

    .zwc-bottom-cta-wrap h2 span {
        display: inline
    }

    .zwc-feature-row,.zwc-benefit-cards {
        grid-template-columns: minmax(0,1fr);
        width: 100%
    }

    .zwc-feature-row-reverse>:first-child {
        order: 0
    }

    .zwc-benefit-cards li {
        width: 100%
    }

    .zwc-benefit-cards>li::before,.zwc-industry-slide::before {
        --icon-scale: .6
    }

    .zwc-benefit-cards>li::before {
        margin-inline:auto}

    .zwc-feature-copy,.zwc-benefit-cards li {
        text-align: center
    }

    .zwc-steps>li {
        grid-template-columns: 36px minmax(0,1fr);
        column-gap: 0
    }

    .zwc-step-num {
        width: 26px;
        height: 26px;
        font-size: 15px
    }

    .zwc-banner-clock,.zwc-banner-headset,.zwc-banner-gear,.zwc-banner-arrow {
        animation: none
    }

    .zwc-banner-headset {
        clip-path: none
    }

    .zwc-banner-dialog,.zwc-banner-menu {
        opacity: 1;
        transform: none;
        transition: none
    }

    .zwc-routing-screen,.zwc-routing-icon,.zwc-decline-screen,.zwc-decline-reject,.zwc-decline-accept,.zwc-qr-dept,.zwc-qr-code,.zwc-reports-screen,.zwc-reports-audit {
        opacity: 1;
        transform: none;
        transition: none
    }
}