.architecture {
    padding-bottom: 110px
}

.architecture-rows {
    display: grid;
    gap: 20px
}

.architecture-row {
    display: grid;
    grid-template-columns: 700px 1fr;
    gap: 48px;
    align-items: center
}

.architecture-layer {
    position: relative;
    display: flex;
    gap: 32px;
    align-items: center;
    min-height: 130px;
    padding: 18px 20px;
    background: #e9f5ff;
    border-radius: 12px
}

.architecture-row:nth-child(2) .architecture-layer {
    min-height: 100px
}

.architecture-layer h3 {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 164px;
    color: #334a75;
    font-size: 16px;
    white-space: nowrap
}

.architecture-icon {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: #237cf2;
    border-radius: 8px
}

.architecture-tags {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 6px 10px
}

.architecture-tags span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    background: #f9fcff;
    border: 1px solid #cde2fb;
    border-radius: 4px;
    color: #334a75;
    font-size: 14px;
    white-space: nowrap
}

.architecture-layer--pressure {
    gap: 6px
}

.architecture-layer--pressure .architecture-tags {
    grid-template-columns: 100px 130px 100px 100px
}

.architecture-copy {
    position: relative;
    padding: 8px 0 22px
}

.architecture-copy h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px
}

.architecture-copy h3 span {
    color: var(--blue)
}

.architecture-copy p {
    font-size: 14px;
    color: var(--muted);
    line-height: 22px
}

.architecture-divider {
    position: absolute;
    bottom: 0;
    left: 0
}

.architecture-arrow {
    position: absolute;
    z-index: 1;
    bottom: -14px;
    max-width: none
}

.architecture-arrow--down {
    left: 147px;
    transform: rotate(90deg)
}

.architecture-arrow--up {
    right: 19px;
    transform: rotate(-90deg)
}

.modules {
    background: var(--surface);
    padding-bottom: 147px
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px
}

.module-card {
    min-height: 240px;
    padding: 28px 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px #6b82a61f
}

.module-card h3 {
    font-size: 20px;
    margin: 16px 0 12px
}

.module-card p,
.feature-card p {
    font-size: 14px;
    line-height: 22px;
    color: var(--muted)
}

.features {
    padding-bottom: 0
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.feature-card {
    min-height: 280px;
    padding: 24px 30px 34px;
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: 0 0 9px #0041d70f
}

.feature-card h3 {
    font-size: 24px;
    margin: 20px 0 12px;
    color: #292e3a
}

.changelog {
    padding-top: 80px;
    padding-bottom: 80px
}

.changelog .section-heading {
    margin-bottom: 50px
}

.changelog .section-heading__mark {
    display: none
}

.changelog h2 {
    font-size: 40px;
    font-weight: 500
}

.release {
    margin-bottom: 10px;
    background: linear-gradient(90deg, #d4e1ff, rgba(253, 255, 255, 0));
    position: relative
}

.release:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: max(calc((100% - 1200px)/2 + 237px), 237px);
    background: #f8f9fd
}

.release__inner {
    position: relative;
    display: grid;
    grid-template-columns: 237px 1fr;
    min-height: 180px;
    padding-top: 46px;
    padding-bottom: 46px
}

.release__version {
    text-align: right;
    padding-right: 48px
}

.release__version h3 {
    font-size: 30px;
    font-weight: 500;
    white-space: nowrap
}

.release__version time {
    display: block;
    font-size: 16px;
    color: var(--muted);
    margin-top: 4px
}

.release ul {
    padding-left: 48px;
    display: grid;
    align-content: start;
    gap: 12px
}

.release li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    line-height: 20px
}

.release li img {
    flex: none
}

.release:nth-last-child(-n+3) .release__inner {
    min-height: 220px
}

.release:last-child .release__inner {
    min-height: 240px
}

.customers {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    text-align: center;
    padding: 98px 0 96px
}

.customers h2 {
    font-size: 40px
}

.customers h2 span {
    color: var(--blue);
    margin-right: 16px
}

.case-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    color: var(--blue);
    font-size: 22px;
    margin: 24px 0 48px
}

.customer-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 1660px;
    margin: auto;
    justify-content: center
}

.customer-logo {
    width: 120px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden
}

.customer-logo img {
    object-fit: contain;
    max-width: 104px;
    max-height: 44px
}

.customers:before,
.customers:after {
    content: "";
    position: absolute;
    width: 27%;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1
}

.customers:before {
    left: 0;
    background: linear-gradient(90deg, #f4f7f9 35%, #f4f7f900)
}

.customers:after {
    right: 0;
    background: linear-gradient(-90deg, #f4f7f9 35%, #f4f7f900)
}

.customers h2,
.case-link {
    position: relative;
    z-index: 2
}

.start-using {
    text-align: center;
    background: #001d6f;
    color: #fff;
    padding: 98px 16px 86px
}

.start-using h2 {
    font-size: 52px
}

.start-using p {
    font-size: 24px;
    margin: 12px 0 60px
}

.start-using .button {
    width: 160px;
    min-height: 58px;
    font-size: 18px
}


.section-news{
background: #f5f6f8;
padding:12px 0;
width:100%
}


.news-bar {
    width: 100%;
}

.news-bar .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 左右两列 */
    gap: 0 48px;
    /* 两列之间的间距 */
}

/* 单条新闻：标题 + 日期 */
.news-item {
    display: flex;
    align-items: center;
    min-width: 0;
    /* 允许子项收缩，省略号生效的关键 */
    font-size: 14px;
    color: #333;
    text-decoration: none;
    line-height: 24px;
    padding: 8px 0;
    transition: color 0.2s ease;
}

.news-item:hover {
    color: #2b7ce9;
}

/* 标题过长时显示省略号 */
.news-item .news-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 日期固定宽度不参与截断 */
.news-item .news-date {
    flex-shrink: 0;
    margin-left: 16px;
    font-size: 13px;
    color: #999;
    /* 日期弱化显示 */
}


@media(min-width:1660px) {
    .customer-logos {
        margin-left: calc((100% - 1660px)/2)
    }
}

@media(max-width:1250px) {
    .architecture-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: 32px
    }

    .architecture-layer {
        gap: 16px
    }

    .architecture-layer h3 {
        flex-basis: 140px
    }

    .architecture-tags {
        flex: 1;
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .architecture-layer--pressure .architecture-tags {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .architecture-tags span {
        font-size: 12px;
        white-space: normal
    }

    .architecture-layer--pressure h3 {
        flex-basis: 124px
    }

    .feature-card {
        padding: 24px
    }

    .feature-card h3 {
        font-size: 22px
    }

    .news-bar .container {
        gap: 0 24px;
        padding: 10px 16px;
    }
}

@media(max-width:900px) {
    .architecture-row {
        grid-template-columns: 1fr
    }

    .architecture-layer {
        min-height: 130px
    }

    .architecture-copy {
        padding-bottom: 12px
    }

    .architecture-arrow {
        display: none
    }

    .module-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .modules {
        padding-bottom: 72px
    }

    .release__inner {
        grid-template-columns: 210px 1fr
    }

    .release__version {
        padding-right: 24px
    }

    .release ul {
        padding-left: 24px
    }

    .release:before {
        width: 226px
    }

    .customers:before,
    .customers:after {
        width: 12%
    }

    .customer-logos {
        width: 100%;
        padding: 0 16px;
        gap: 16px
    }

    .customers {
        padding: 64px 0
    }

    .customers h2 {
        font-size: 30px
    }
}

@media(max-width:767px) {
    .architecture {
        padding-bottom: 56px
    }

    .architecture-layer {
        padding: 16px;
        gap: 12px;
        flex-direction: column;
        align-items: stretch
    }

    .architecture-layer h3,
    .architecture-layer--pressure h3 {
        flex-basis: auto
    }

    .architecture-tags {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .architecture-layer--pressure .architecture-tags {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .module-grid,
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .module-card {
        min-height: 0;
        padding: 24px
    }

    .feature-card {
        min-height: 0
    }

    .changelog {
        padding: 56px 0
    }

    .changelog h2 {
        font-size: 28px
    }

    .release__inner {
        grid-template-columns: 1fr;
        padding: 28px 0;
        gap: 20px;
        min-height: 0 !important
    }

    .release__version {
        text-align: left;
        padding: 0
    }

    .release__version h3 {
        font-size: 24px
    }

    .release ul {
        padding: 0
    }

    .release:before {
        display: none
    }

    .customers h2 {
        font-size: 24px
    }

    .customers h2 span {
        display: block;
        margin: 0
    }

    .case-link {
        font-size: 18px;
        margin-bottom: 32px
    }

    .customer-logo {
        width: calc((100% - 32px)/3);
        height: 52px
    }

    .customer-logo img {
        max-width: 90%;
        height: auto
    }

    .start-using {
        padding: 64px 16px
    }

    .start-using h2 {
        font-size: 32px
    }

    .start-using p {
        font-size: 17px;
        margin-bottom: 32px
    }

    .news-bar .container {
        grid-template-columns: 1fr;
        padding: 8px 16px;
    }

    .news-item {
        font-size: 13px;
        padding: 6px 0;
    }

    .news-item .news-date {
        margin-left: 12px;
        font-size: 12px;
    }
}

/* Figma 原始分层图标，保留各素材的位置和尺寸。 */
.icon-layer-0 {
    overflow: hidden;
    position: relative;
    width: 66px;
    height: 66px
}

.icon-layer-1 {
    position: absolute;
    display: contents;
    inset: 20.31% 12.5%
}

.icon-layer-2 {
    position: absolute;
    bottom: 29.69%;
    left: 25%;
    right: 12.5%;
    top: 51.56%
}

.icon-layer-3 {
    position: absolute;
    inset: -64.65% -19.39%
}

.icon-layer-4 {}

.icon-layer-5 {
    position: absolute;
    bottom: 60.94%;
    left: 25%;
    right: 12.5%;
    top: 20.31%
}

.icon-layer-6 {
    position: absolute;
    inset: -64.65% -19.39%
}

.icon-layer-7 {}

.icon-layer-8 {
    position: absolute;
    bottom: 20.31%;
    left: 12.5%;
    right: 25%;
    top: 60.94%
}

.icon-layer-9 {
    position: absolute;
    inset: -32.32% -19.39% -96.97% -19.39%
}

.icon-layer-10 {}

.icon-layer-11 {
    position: absolute;
    bottom: 51.56%;
    left: 12.5%;
    right: 25%;
    top: 29.69%
}

.icon-layer-12 {
    position: absolute;
    inset: -32.32% -19.39% -96.97% -19.39%
}

.icon-layer-13 {}

.icon-layer-14 {
    position: absolute;
    inset: 31.25% 70.31% 53.13% 14.06%
}

.icon-layer-15 {
    position: absolute;
    inset: -77.58%
}

.icon-layer-16 {}

.icon-layer-17 {
    position: absolute;
    inset: 62.5% 27.34% 21.88% 57.03%
}

.icon-layer-18 {
    position: absolute;
    inset: -77.58%
}

.icon-layer-19 {}

.icon-layer-20 {
    position: absolute;
    inset: 34.38% 73.44% 56.25% 17.19%
}

.icon-layer-21 {
    position: absolute;
    inset: -64.65% -129.29% -193.94% -129.29%
}

.icon-layer-22 {}

.icon-layer-23 {
    position: absolute;
    bottom: 25%;
    left: 60.16%;
    right: 30.47%;
    top: 65.63%
}

.icon-layer-24 {
    position: absolute;
    inset: -64.65% -129.29% -193.94% -129.29%
}

.icon-layer-25 {}

.icon-layer-26 {
    overflow: hidden;
    position: relative;
    width: 66px;
    height: 66px
}

.icon-layer-27 {
    position: absolute;
    display: contents;
    inset: 12.5%
}

.icon-layer-28 {
    position: absolute;
    bottom: 25%;
    left: 25%;
    right: 12.5%;
    top: 12.5%
}

.icon-layer-29 {
    position: absolute;
    inset: -19.39%
}

.icon-layer-30 {}

.icon-layer-31 {
    position: absolute;
    bottom: 12.5%;
    left: 12.5%;
    right: 25%;
    top: 25%
}

.icon-layer-32 {
    position: absolute;
    inset: -9.7% -19.39% -29.09% -19.39%
}

.icon-layer-33 {}

.icon-layer-34 {
    position: absolute;
    bottom: 25%;
    left: 18.75%;
    right: 31.25%;
    top: 37.5%
}

.icon-layer-35 {
    position: absolute;
    inset: -16.16% -24.24% -48.48% -24.24%
}

.icon-layer-36 {}

.icon-layer-37 {
    position: absolute;
    bottom: 21.88%;
    left: 25%;
    right: 62.5%;
    top: 65.63%
}

.icon-layer-38 {
    position: absolute;
    inset: -96.97%
}

.icon-layer-39 {}

.icon-layer-40 {
    position: absolute;
    bottom: 37.5%;
    left: 43.75%;
    right: 43.75%;
    top: 50%;
    top: 50%
}

.icon-layer-41 {
    position: absolute;
    inset: -96.97%
}

.icon-layer-42 {}

.icon-layer-43 {
    position: absolute;
    bottom: 53.13%;
    left: 50%;
    right: 37.5%;
    top: 34.38%
}

.icon-layer-44 {
    position: absolute;
    inset: -96.97%
}

.icon-layer-45 {}

.icon-layer-46 {
    position: absolute;
    bottom: 25%;
    left: 28.13%;
    right: 65.63%;
    top: 68.75%
}

.icon-layer-47 {
    position: absolute;
    inset: -96.97% -193.94% -290.91% -193.94%
}

.icon-layer-48 {}

.icon-layer-49 {
    position: absolute;
    inset: 37.5% 40.63% 56.25% 53.13%
}

.icon-layer-50 {
    position: absolute;
    inset: -96.97% -193.94% -290.91% -193.94%
}

.icon-layer-51 {}

.icon-layer-52 {
    position: absolute;
    inset: 53.13% 46.88% 40.63% 46.88%
}

.icon-layer-53 {
    position: absolute;
    inset: -96.97% -193.94% -290.91% -193.94%
}

.icon-layer-54 {}

.icon-layer-55 {
    overflow: hidden;
    position: relative;
    width: 66px;
    height: 66px
}

.icon-layer-56 {
    position: absolute;
    display: contents;
    inset: 17.19% 12.5%
}

.icon-layer-57 {
    position: absolute;
    bottom: 20.31%;
    left: 25%;
    right: 12.5%;
    top: 17.19%
}

.icon-layer-58 {
    position: absolute;
    inset: -19.39%
}

.icon-layer-59 {}

.icon-layer-60 {
    position: absolute;
    bottom: 17.19%;
    left: 12.5%;
    right: 25%;
    top: 32.81%
}

.icon-layer-61 {
    position: absolute;
    inset: -12.12% -19.39% -36.36% -19.39%
}

.icon-layer-62 {}

.icon-layer-63 {
    position: absolute;
    inset: 39.06% 34.38% 23.44% 59.38%
}

.icon-layer-64 {
    position: absolute;
    inset: -16.16% -193.94% -48.48% -193.94%
}

.icon-layer-65 {}

.icon-layer-66 {
    position: absolute;
    inset: 57.81% 46.88% 23.44% 46.88%
}

.icon-layer-67 {
    position: absolute;
    inset: -32.32% -193.94% -96.97% -193.94%
}

.icon-layer-68 {}

.icon-layer-69 {
    position: absolute;
    inset: 45.31% 59.38% 23.44% 34.38%
}

.icon-layer-70 {
    position: absolute;
    inset: -19.39% -193.94% -58.18% -193.94%
}

.icon-layer-71 {}

.icon-layer-72 {
    position: absolute;
    inset: 64.06% 71.88% 23.44% 21.88%
}

.icon-layer-73 {
    position: absolute;
    inset: -48.48% -193.94% -145.45% -193.94%
}

.icon-layer-74 {}

.icon-layer-75 {
    overflow: hidden;
    position: relative;
    width: 66px;
    height: 66px
}

.icon-layer-76 {
    position: absolute;
    display: contents;
    inset: 12.5% 20.31%
}

.icon-layer-77 {
    position: absolute;
    bottom: 25%;
    left: 32.81%;
    right: 20.31%;
    top: 12.5%
}

.icon-layer-78 {
    position: absolute;
    inset: -19.39% -25.86%
}

.icon-layer-79 {}

.icon-layer-80 {
    position: absolute;
    bottom: 75%;
    left: 62.5%;
    right: 20.31%;
    top: 12.5%
}

.icon-layer-81 {
    position: absolute;
    inset: -48.48% -70.52% -145.45% -70.52%
}

.icon-layer-82 {}

.icon-layer-83 {
    position: absolute;
    bottom: 12.5%;
    left: 20.31%;
    right: 32.81%;
    top: 25%
}

.icon-layer-84 {
    position: absolute;
    inset: -9.7% -25.86% -29.09% -25.86%
}

.icon-layer-85 {}

.icon-layer-86 {
    position: absolute;
    inset: 59.38% 39.06% 35.94% 26.56%
}

.icon-layer-87 {
    position: absolute;
    inset: -129.29% -35.26% -387.88% -35.26%
}

.icon-layer-88 {}

.icon-layer-89 {
    position: absolute;
    bottom: 25%;
    left: 26.56%;
    right: 39.06%;
    top: 70.31%
}

.icon-layer-90 {
    position: absolute;
    inset: -129.29% -35.26% -387.88% -35.26%
}


.icon-layer-92 {
    position: absolute;
    inset: 48.44% 39.06% 46.88% 26.56%
}

.icon-layer-93 {
    position: absolute;
    inset: -129.29% -35.26% -387.88% -35.26%
}


.icon-layer-95 {
    position: absolute;
    inset: 37.5% 51.56% 57.81% 26.56%
}

.icon-layer-96 {
    position: absolute;
    inset: -129.29% -55.41% -387.88% -55.41%
}


.icon-layer-98 {
    overflow: hidden;
    position: relative;
    width: 66px;
    height: 66px
}

.icon-layer-99 {
    position: absolute;
    display: contents;
    inset: 12.5%
}

.icon-layer-100 {
    position: absolute;
    bottom: 25%;
    left: 25%;
    right: 12.5%;
    top: 12.5%
}

.icon-layer-101 {
    position: absolute;
    inset: -19.39%
}


.icon-layer-103 {
    position: absolute;
    bottom: 12.5%;
    left: 12.5%;
    right: 25%;
    top: 25%
}

.icon-layer-104 {
    position: absolute;
    inset: -9.7% -19.39% -29.09% -19.39%
}