/* hero 样式已抽离至 hero-banner.css（产品/解决方案共用），经 pageStyles 引入 */

.product-section {
    padding: 74px 0
}

.product-section.soft {
    background: #f3f8ff
}

.product-title {
    text-align   : center;
    font-size    : 29px;
    margin-bottom: 48px
}

.value-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 28px
}

.value-grid.four {
    grid-template-columns: repeat(4, 1fr)
}

.value-card {
    min-height: 280px;
    background: #fff;
    box-shadow: var(--wj-shadow);
    text-align: center;
    overflow  : hidden
}

.value-card img {
    width     : 100%;
    max-height    : 500px;
    object-fit: contain;
}

.value-card h3 {
    font-size: 18px;
    margin   : 28px 18px 20px;
}

.value-card p {
    color      : var(--wj-body);
    line-height: 1.8;
    padding    : 0 20px 22px;
    text-align: left;
}

.value-card.compact {
    min-height     : 145px;
    padding        : 28px 18px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column
}

.value-card.compact img {
    height       : 48px;
    width        : 48px;
    padding      : 0;
    margin-bottom: 18px
}

.value-card.compact p {
    padding  : 0;
    font-size: 13px
}

.feature-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 24px
}

.feature-card {
    display              : grid;
    grid-template-columns: 1fr 150px;
    min-height           : 170px;
    padding              : 40px 10px 40px 28px;
    border               : 1px solid #cfe0f7;
    background           : linear-gradient(145deg, #eff7ff, #fff);
    border-radius: 5px;
}

.feature-card h3 {
    font-size    : 18px;
    margin-bottom: 13px
}

.feature-card p {
    color      : var(--wj-body);
    line-height: 1.8
}

.feature-card img {
    width     : 72px;
    height    : 72px;
    object-fit: contain;
    align-self: center;
    justify-self: center
}

.feature-card-horizontal {
    display      : flex;
    align-items  : flex-start;
    gap          : 16px;
    padding      : 28px;
    border       : 1px solid #cfe0f7;
    background   : linear-gradient(145deg, #eff7ff, #fff);
    border-radius: 5px
}

.feature-card-horizontal img {
    width     : 48px;
    height    : 48px;
    object-fit: contain;
    flex-shrink: 0
}

.feature-card-horizontal .feature-card-body {
    display       : flex;
    flex-direction: column;
    gap           : 10px
}

.feature-card-horizontal h3 {
    font-size  : 18px;
    line-height: 1.2;
    margin     : 0
}

.feature-card-horizontal p {
    color      : var(--wj-body);
    line-height: 1.8;
    margin     : 0
}

.feature-rows {
    display: grid;
    gap    : 55px
}

.feature-row {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 80px;
    align-items          : center
}

.feature-row:nth-child(even) .feature-row-copy {
    order: 2
}

.feature-row:nth-child(even) > img {
    order: 1
}

.feature-row-copy {
    display    : flex;
    gap        : 18px;
    align-items: flex-start
}

.feature-row-icon {
    width     : 48px;
    height    : 48px;
    object-fit: contain;
    flex-shrink: 0
}

.feature-row h3 {
    font-size    : 19px;
    margin-bottom: 16px
}

.feature-row p {
    color      : var(--wj-body);
    line-height: 1.9
}

.feature-row > img {
    width     : 100%;
    height    : 260px;
    object-fit: contain
}

.product-showcase {
    background: #f8fbff url('../../images/ui/product/leader/bg.png') center/cover no-repeat
}

.showcase-lead {
    display              : grid;
    grid-template-columns: 1fr 2fr;
    gap                  : 55px;
    align-items          : center;
    margin-bottom        : 48px
}

.showcase-lead h3 {
    font-size    : 20px;
    margin-bottom: 20px
}

.showcase-lead p,
.showcase-lead li {
    color      : var(--wj-body);
    line-height: 1.9
}

.showcase-lead ul {
    list-style   : none;
    padding-left : 0;
    margin       : 0
}

.showcase-lead li {
    position     : relative;
    padding-left : 20px;
    margin-bottom: 14px
}

.showcase-lead li:last-child {
    margin-bottom: 0
}

.showcase-lead li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    transform: translateY(-45%);
    width: 9px;
    height: 15px;
    background: url(../../images/ui/product/cadre/zhLi.png) no-repeat center / contain
}

.value-tags {
    display   : flex;
    gap       : 16px;
    margin-top: 22px
}

.value-tag {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    color          : var(--wj-blue);
    font-size      : 15px;

    width: 90px;
    height: 90px;
    background: linear-gradient( 0deg, #FFFFFF 0%, #F2F7FF 100%);
    box-shadow: 0px 1px 28px 0px rgba(26,100,228,0.16);
    border: 2px solid #FFFFFF;border-radius: 50%;
   
}

.showcase-lead img {
    width     : 100%;
    height    : 360px;
    object-fit: contain
}

.screen-grid {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 40px
}

.screen-grid figure {
    margin    : 0;
    text-align: center
}

.screen-grid img {
    width     : 100%;
    height    : 300px;
    object-fit: contain
}

.digital-screens {
    gap: 60px
}

.digital-screens img {
    width : 100%;
    height: 460px
}

.screen-grid figcaption {
    color      : var(--wj-blue);
    font-weight: 600;
    margin-top : 8px
}

.platform-capability {
    position: relative;
    width   : min(920px, 100%);
    margin  : auto
}

.platform-capability>img {
    width     : 100%;
    max-height: 520px;
    object-fit: contain
}

.ai-scenes {
    display: grid;
    gap    : 40px
}

.ai-scenes-top {
    display              : grid;
    grid-template-columns: 1.1fr .9fr;
    gap                  : 50px;
    align-items          : stretch
}

.ai-scenes-digital img {
    width     : 100%;
    height    : 100%;
    min-height: 380px;
    object-fit: cover;
    border-radius: 5px
}

.ai-scenes-right {
    display              : grid;
    /* grid-template-columns: 1fr 1.1fr;
    gap                  : 30px; */
    align-items          : center;
    position: relative;
}

.ai-scenes-right .ai-scenes-visual img {
    width     : 100%;
    /* height    : 300px; */
    object-fit: cover;
    border-radius: 5px
}

.ai-scenes-features {
    display: grid;
    gap    : 24px
}

.ai-scenes-features article {
    display    : flex;
    align-items: flex-start;
    gap        : 16px;
    position: absolute;
}

.ai-scenes-features article:first-child {
    top: 20%;
    right: 30%;
}
.ai-scenes-features article:nth-child(2) {
    top: 50%;
    right: 10%;   
}
.ai-scenes-features article:last-child {
    bottom: 15%;
    right: 30%;
}

.ai-scenes-features article>img {
    width     : 30px;
    height    : 30px;
    object-fit: contain;
    flex-shrink: 0
}

.ai-scenes-features h3 {
    font-size    : 18px;
    margin-bottom: 6px
}

.ai-scenes-features p {
    color: var(--wj-body)
}

.ai-scenes-bottom {
    display              : grid;
    grid-template-columns: .6fr 1.6fr;
    gap                  : 24px;
    align-items          : center
}

.ai-scenes-tags {
    display: grid;
    gap    : 16px
}

.ai-scenes-tags article {
    padding      : 18px 22px;
    background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, rgba(35,128,236,0.3) 100%);
    border-radius: 8px;
}

.ai-scenes-tags h3 {
    font-size    : 17px;
    margin-bottom: 5px
}

.ai-scenes-tags p {
    color      : var(--wj-body);
    font-size  : 14px;
    line-height: 1.6
}

.ai-scenes-figures {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 24px
}

.ai-scenes-figures img {
    width     : 100%;
    height    : 280px;
    object-fit: cover;
    border-radius: 5px
}

.architecture-box {
    padding   : 35px;
    background: #fff;
    box-shadow: var(--wj-shadow);
    margin-bottom: 60px;
}

.architecture-intro {
    margin-bottom: 30px
}

.architecture-intro h3 {
    font-size    : 20px;
    margin-bottom: 18px
}

.architecture-intro ul {
    list-style   : none;
    padding-left : 0;
    margin       : 0
}

.architecture-intro li {
    position     : relative;
    padding-left : 18px;
    margin-bottom: 10px;
    color        : var(--wj-body);
    line-height  : 1.8
}

.architecture-intro li:before {
    content   : "";
    position  : absolute;
    left      : 0;
    top       : 0.78em;
    transform : translateY(-45%);
    width     : 9px;
    height    : 15px;
    background: url('../../images/ui/product/cadre/zhLi.png') no-repeat center / contain
}

.architecture-intro li b {
    color      : var(--wj-title);
    font-weight: 600
}

.architecture-box img {
    width     : 100%;
    max-height: 540px;
    object-fit: contain
}

@media(max-width:900px) {
    .value-grid.four {
        grid-template-columns: repeat(2, 1fr)
    }

    .feature-row {
        gap: 35px
    }

    .ai-scenes-top,
    .ai-scenes-right,
    .ai-scenes-bottom {
        grid-template-columns: 1fr
    }

    .ai-scenes-digital img,
    .ai-scenes-visual img,
    .ai-scenes-figures img {
        height: auto
    }

    .showcase-lead {
        grid-template-columns: 1fr
    }
}

@media(max-width:600px) {
    .product-section {
        padding: 52px 0
    }

    .product-title {
        font-size    : 24px;
        margin-bottom: 34px
    }

    .value-grid,
    .value-grid.four,
    .feature-grid,
    .feature-row,
    .screen-grid {
        grid-template-columns: 1fr
    }

    .value-card {
        min-height: 0
    }

    .feature-row:nth-child(even) .feature-row-copy {
        order: initial
    }

    .feature-row:nth-child(even) img {
        order: initial
    }

    .feature-row img {
        height: 220px
    }

    .showcase-lead img {
        height: 260px
    }

    .screen-grid img {
        height: 220px
    }

    .digital-screens {
        gap: 30px
    }

    .digital-screens img {
        height: 300px
    }

    .ai-scenes>img {
        height: 250px
    }
}

/* 超小屏手机 hero 规则已抽离至 hero-banner.css */